index.acss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. .uploader-index {
  2. display: block;
  3. height: initial;
  4. }
  5. @import "../common/index.acss";
  6. .uploader-index .van-uploader {
  7. position: relative;
  8. display: inline-block;
  9. }
  10. .uploader-index .van-uploader__wrapper {
  11. display: -webkit-flex;
  12. display: flex;
  13. -webkit-flex-wrap: wrap;
  14. flex-wrap: wrap;
  15. }
  16. .uploader-index .van-uploader__slot:empty {
  17. display: none;
  18. }
  19. .uploader-index .van-uploader__slot:not(:empty) + .van-uploader__upload {
  20. display: none !important;
  21. }
  22. .uploader-index .van-uploader__upload {
  23. position: relative;
  24. display: -webkit-flex;
  25. display: flex;
  26. -webkit-flex-direction: column;
  27. flex-direction: column;
  28. -webkit-align-items: center;
  29. align-items: center;
  30. -webkit-justify-content: center;
  31. justify-content: center;
  32. box-sizing: border-box;
  33. width: 80px;
  34. height: 80px;
  35. margin: 0 8px 8px 0;
  36. background-color: #f7f8fa;
  37. }
  38. .uploader-index .van-uploader__upload:active {
  39. background-color: #f2f3f5;
  40. }
  41. .uploader-index .van-uploader__upload-icon {
  42. color: #dcdee0;
  43. font-size: 24px;
  44. }
  45. .uploader-index .van-uploader__upload-text {
  46. margin-top: 8px;
  47. color: #969799;
  48. font-size: 12px;
  49. }
  50. .uploader-index .van-uploader__upload--disabled {
  51. opacity: 0.5;
  52. opacity: var(--uploader-disabled-opacity, 0.5);
  53. }
  54. .uploader-index .van-uploader__preview {
  55. position: relative;
  56. margin: 0 8px 8px 0;
  57. cursor: pointer;
  58. }
  59. .uploader-index .van-uploader__preview-image {
  60. display: block;
  61. width: 80px;
  62. height: 80px;
  63. overflow: hidden;
  64. }
  65. .uploader-index .van-uploader__preview-delete {
  66. position: absolute;
  67. top: 0;
  68. right: 0;
  69. width: 14px;
  70. height: 14px;
  71. padding: 0 0 8px 8px;
  72. }
  73. .uploader-index .van-uploader__preview-delete:after {
  74. position: absolute;
  75. top: 0;
  76. right: 0;
  77. width: 14px;
  78. height: 14px;
  79. background-color: rgba(0, 0, 0, 0.7);
  80. border-radius: 0 0 0 12px;
  81. content: "";
  82. }
  83. .uploader-index .van-uploader__preview-delete-icon {
  84. position: absolute;
  85. top: -2px;
  86. right: -2px;
  87. z-index: 1;
  88. color: #fff;
  89. font-size: 16px;
  90. -webkit-transform: scale(0.5);
  91. transform: scale(0.5);
  92. }
  93. .uploader-index .van-uploader__file {
  94. display: -webkit-flex;
  95. display: flex;
  96. -webkit-flex-direction: column;
  97. flex-direction: column;
  98. -webkit-align-items: center;
  99. align-items: center;
  100. -webkit-justify-content: center;
  101. justify-content: center;
  102. width: 80px;
  103. height: 80px;
  104. background-color: #f7f8fa;
  105. }
  106. .uploader-index .van-uploader__file-icon {
  107. color: #646566;
  108. font-size: 20px;
  109. }
  110. .uploader-index .van-uploader__file-name {
  111. box-sizing: border-box;
  112. width: 100%;
  113. margin-top: 8px;
  114. padding: 0 4px;
  115. color: #646566;
  116. font-size: 12px;
  117. text-align: center;
  118. }
  119. .uploader-index .van-uploader__mask {
  120. position: absolute;
  121. top: 0;
  122. right: 0;
  123. bottom: 0;
  124. left: 0;
  125. display: -webkit-flex;
  126. display: flex;
  127. -webkit-flex-direction: column;
  128. flex-direction: column;
  129. -webkit-align-items: center;
  130. align-items: center;
  131. -webkit-justify-content: center;
  132. justify-content: center;
  133. color: #fff;
  134. background-color: rgba(50, 50, 51, 0.88);
  135. }
  136. .uploader-index .van-uploader__mask-icon {
  137. font-size: 22px;
  138. }
  139. .uploader-index .van-uploader__mask-message {
  140. margin-top: 6px;
  141. padding: 0 4px;
  142. font-size: 12px;
  143. line-height: 14px;
  144. }
  145. .uploader-index .van-uploader__loading {
  146. width: 22px;
  147. height: 22px;
  148. color: #fff !important;
  149. }