htz-image-upload.wxss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. .ceshi {
  2. width: 100%;
  3. height: 100%;
  4. position: relative;
  5. top: 0;
  6. left: 0;
  7. bottom: 0;
  8. right: 0;
  9. background-color: #FFFFFF;
  10. color: #2C405A;
  11. opacity: 0.5;
  12. z-index: 100;
  13. }
  14. .preview-full {
  15. position: fixed;
  16. top: 0;
  17. left: 0;
  18. bottom: 0;
  19. width: 100%;
  20. height: 100%;
  21. z-index: 1002;
  22. }
  23. .preview-full video {
  24. width: 100%;
  25. height: 100%;
  26. z-index: 1002;
  27. }
  28. .preview-full-close {
  29. position: fixed;
  30. right: 32rpx;
  31. top: 25rpx;
  32. width: 80rpx;
  33. height: 80rpx;
  34. line-height: 60rpx;
  35. text-align: center;
  36. z-index: 1003;
  37. /* background-color: #808080; */
  38. color: #fff;
  39. font-size: 65rpx;
  40. font-weight: bold;
  41. text-shadow: 1px 2px 5px rgb(0 0 0);
  42. }
  43. /* .preview-full-close-before,
  44. .preview-full-close-after {
  45. position: absolute;
  46. top: 50%;
  47. left: 50%;
  48. content: '';
  49. height: 60rpx;
  50. margin-top: -30rpx;
  51. width: 6rpx;
  52. margin-left: -3rpx;
  53. background-color: #FFFFFF;
  54. z-index: 20000;
  55. }
  56. .preview-full-close-before {
  57. transform: rotate(45deg);
  58. }
  59. .preview-full-close-after {
  60. transform: rotate(-45deg);
  61. } */
  62. .htz-image-upload-list {
  63. display: flex;
  64. flex-wrap: wrap;
  65. }
  66. .htz-image-upload-Item {
  67. width: 160rpx;
  68. height: 160rpx;
  69. margin: 13rpx;
  70. border-radius: 10rpx;
  71. position: relative;
  72. }
  73. .htz-image-upload-Item image {
  74. width: 100%;
  75. height: 100%;
  76. border-radius: 10rpx;
  77. }
  78. .htz-image-upload-Item-video {
  79. width: 100%;
  80. height: 100%;
  81. border-radius: 10rpx;
  82. position: relative;
  83. }
  84. .htz-image-upload-Item-video-fixed {
  85. position: absolute;
  86. top: 0;
  87. left: 0;
  88. bottom: 0;
  89. width: 100%;
  90. height: 100%;
  91. border-radius: 10rpx;
  92. z-index: 996;
  93. }
  94. .htz-image-upload-Item video {
  95. width: 100%;
  96. height: 100%;
  97. border-radius: 10rpx;
  98. }
  99. .htz-image-upload-Item-add {
  100. font-size: 105rpx;
  101. /* line-height: 160rpx; */
  102. text-align: center;
  103. border: 1px dashed #d9d9d9;
  104. color: #d9d9d9;
  105. }
  106. .htz-image-upload-Item-del {
  107. background-color: #f5222d;
  108. font-size: 24rpx;
  109. position: absolute;
  110. width: 35rpx;
  111. height: 35rpx;
  112. line-height: 35rpx;
  113. text-align: center;
  114. top: 0;
  115. right: 0;
  116. z-index: 997;
  117. color: #fff;
  118. }
  119. .htz-image-upload-Item-del-cover {
  120. background-color: #f5222d;
  121. font-size: 24rpx;
  122. position: absolute;
  123. width: 35rpx;
  124. height: 35rpx;
  125. text-align: center;
  126. top: 0;
  127. right: 0;
  128. color: #fff;
  129. line-height: 35rpx;
  130. z-index: 997;
  131. }
  132. .htz-image-upload-Item-video-app-poster {
  133. width: 100%;
  134. height: 100%;
  135. }