tui-upload.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. @font-face {
  2. font-family: 'tuiUpload';
  3. src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATcAA0AAAAAByQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEwAAAABoAAAAciR52BUdERUYAAASgAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxvR/tjbWFwAAAB+AAAAEUAAAFK5ibpuGdhc3AAAASYAAAACAAAAAj//wADZ2x5ZgAAAkwAAADXAAABAAmNjcZoZWFkAAABMAAAAC8AAAA2FpiS+WhoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAARAAAAEgwAACBsb2NhAAACQAAAAAwAAAAMAEoAgG1heHAAAAGAAAAAHwAAACABEgA2bmFtZQAAAyQAAAFJAAACiCnmEVVwb3N0AAAEcAAAACgAAAA6OMUs4HjaY2BkYGAAYo3boY/i+W2+MnCzMIDAzb3qdQj6fwPzf+YGIJeDgQkkCgA/KAtvAHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBl0GJgZgABJiDmAkIGhv9gPgMADTABSQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ9xMjf8b2CIYW5gaAAKM4LkANt9C+UAAHjaY2GAABYIVmBgAAAA+gAtAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE+4/z/n4EBQksxSf6GqgcCRjYGOIeRCUgwMaACRoZhDwCiLwmoAAAAAAAAAAAAAAAASgCAeNpdjkFKw0AARf/vkIR0BkPayWRKQZtYY90ohJju2kOIbtz0KD1HVm50UfEmWXoAr9ADOHFARHHzeY//Fx8Ci+FJfIgdJFa4AhgiMshbrCuIsLxhFJZVs+Vl1bT1GddtbXTC3OhohN4dg4BJ3zMJAnccyfm468ZzHXddrH9ZKbHzdf9n/vkY/xv9sPQXgGEvBrHHwst5kTbXLE+YpYVPkxepPmW94W16UbdNJd6f3SAzo5W7m1jaKd+8ZZIvk5nlKw9SK6Wle7BLS3f/bTzQLmfAF2T1NsQAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMxsKak5qSWpbFmZiRmJ+QAmgAUIAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9M296nUwGgA+8QYgAAA=) format('woff');
  4. font-weight: normal;
  5. font-style: normal;
  6. }
  7. .tui-upload-icon {
  8. font-family: "tuiUpload" !important;
  9. font-style: normal;
  10. -webkit-font-smoothing: antialiased;
  11. -moz-osx-font-smoothing: grayscale;
  12. padding: 10rpx;
  13. }
  14. .tui-icon-delete:before {
  15. content: "\e601";
  16. }
  17. .tui-icon-plus:before {
  18. content: "\e609";
  19. }
  20. .tui-upload-box {
  21. width: 100%;
  22. display: flex;
  23. flex-wrap: wrap;
  24. }
  25. .tui-upload-add {
  26. width: 220rpx;
  27. height: 220rpx;
  28. font-size: 68rpx;
  29. font-weight: 100;
  30. color: #888;
  31. background-color: #F7F7F7;
  32. display: flex;
  33. align-items: center;
  34. justify-content: center;
  35. padding: 0;
  36. }
  37. .tui-image-item {
  38. width: 220rpx;
  39. height: 220rpx;
  40. position: relative;
  41. margin-right: 20rpx;
  42. margin-bottom: 20rpx;
  43. }
  44. .tui-image-item:nth-of-type(3n) {
  45. margin-right: 0;
  46. }
  47. .tui-item-img {
  48. width: 220rpx;
  49. height: 220rpx;
  50. display: block;
  51. }
  52. .tui-img-del {
  53. width: 36rpx;
  54. height: 36rpx;
  55. position: absolute;
  56. right: -12rpx;
  57. top: -12rpx;
  58. background: #EB0909;
  59. border-radius: 50%;
  60. color: white;
  61. font-size: 34rpx;
  62. z-index: 999;
  63. }
  64. .tui-img-del::before {
  65. content: '';
  66. width: 16rpx;
  67. height: 1px;
  68. position: absolute;
  69. left: 10rpx;
  70. top: 18rpx;
  71. background: #fff;
  72. }
  73. .tui-upload-mask {
  74. width: 100%;
  75. height: 100%;
  76. position: absolute;
  77. left: 0;
  78. top: 0;
  79. display: flex;
  80. flex-direction: column;
  81. align-items: center;
  82. justify-content: space-around;
  83. padding: 40rpx 0;
  84. box-sizing: border-box;
  85. background: rgba(0, 0, 0, 0.6);
  86. }
  87. .tui-upload-loading {
  88. width: 28rpx;
  89. height: 28rpx;
  90. border-radius: 50%;
  91. border: 2px solid;
  92. border-color: #B2B2B2 #B2B2B2 #B2B2B2 #fff;
  93. animation: tui-rotate 0.7s linear infinite;
  94. }
  95. @keyframes tui-rotate {
  96. 0% {
  97. transform: rotate(0);
  98. }
  99. 100% {
  100. transform: rotate(360deg);
  101. }
  102. }
  103. .tui-tips {
  104. font-size: 26rpx;
  105. color: #fff;
  106. }
  107. .tui-mask-btn {
  108. padding: 6rpx 16rpx;
  109. border-radius: 40rpx;
  110. text-align: center;
  111. font-size: 24rpx;
  112. color: #fff;
  113. border: 1rpx solid #fff;
  114. display: flex;
  115. align-items: center;
  116. justify-content: center;
  117. }
  118. .tui-hover {
  119. opacity: 0.5;
  120. }