You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

137 lines
2.6KB

  1. /* package_A/page/upload/index.wxss */
  2. .upload_container {
  3. box-sizing: border-box;
  4. width: 100%;
  5. padding: 30rpx;
  6. display: flex;
  7. flex-direction: column;
  8. justify-content: flex-start;
  9. align-items: flex-start;
  10. }
  11. /* 上传图片 */
  12. .upload_images {
  13. width: 100%;
  14. margin-bottom: 50rpx;
  15. display: flex;
  16. flex-direction: column;
  17. justify-content: space-between;
  18. align-items: flex-start;
  19. font-size: 34rpx;
  20. color: #666666;
  21. position: relative;
  22. }
  23. .image_list {
  24. width: 100%;
  25. margin-top: 20rpx;
  26. display: flex;
  27. flex-wrap: wrap;
  28. justify-content: flex-start;
  29. align-content: flex-start;
  30. }
  31. .image_preview {
  32. height: 200rpx;
  33. width: 200rpx;
  34. margin-right: 20rpx;
  35. margin-bottom: 20rpx;
  36. position: relative;
  37. }
  38. .image_item {
  39. height:100%;
  40. width: 100%;
  41. margin-bottom: 20rpx;
  42. }
  43. .close{
  44. position: absolute;
  45. top:0;
  46. right:0;
  47. transform: translate(40%,-40%);
  48. height:50rpx;
  49. width:50rpx;
  50. background:rgba(179, 179, 179, 0.5);
  51. border-radius: 50%;
  52. z-index: 10;
  53. }
  54. .close::before{
  55. content: "";
  56. display: block;
  57. position: absolute;
  58. width: 60%;
  59. height: 10rpx;
  60. top:50%;
  61. left:50%;
  62. background:rgb(124, 124, 124);
  63. transform-origin: center;
  64. /* transform: ; */
  65. transform: translate(-50%,-50%) rotate(45deg);
  66. }
  67. .close::after{
  68. content: "";
  69. display: block;
  70. position: absolute;
  71. width: 60%;
  72. height: 10rpx;
  73. top:50%;
  74. left:50%;
  75. background:rgb(124, 124, 124);
  76. transform-origin: center;
  77. /* transform: ; */
  78. transform: translate(-50%,-50%) rotate(-45deg);
  79. }
  80. .upload_image {
  81. width: 200rpx;
  82. height: 200rpx;
  83. display: flex;
  84. flex-direction: column;
  85. align-items: center;
  86. justify-content: center;
  87. border: 1rpx dashed #A6A6A6;
  88. border-radius: 10rpx;
  89. }
  90. .upload_image text {
  91. color: rgba(0, 0, 0, 0.5);
  92. font-size: 30rpx;
  93. display: flex;
  94. flex-direction: column;
  95. justify-content: flex-start;
  96. align-items: flex-start;
  97. }
  98. .note_mark {
  99. margin-top: 20rpx;
  100. font-size: 24rpx;
  101. color: rgba(153, 153, 153, 1);
  102. }
  103. .tips{
  104. position: absolute;
  105. bottom: -40rpx;
  106. left: -15rpx;
  107. color: red;
  108. font-size: 24rpx;
  109. transform: translate(27rpx, -5rpx);
  110. display: none;
  111. }
  112. .upload_images.warning .tips{
  113. display: block;
  114. }
  115. /* 按钮区 */
  116. .btn_list {
  117. box-sizing: border-box;
  118. width: 100%;
  119. margin-top: 50rpx;
  120. padding: 10rpx 20rpx;
  121. display: flex;
  122. flex-direction: column;
  123. justify-content: space-between;
  124. align-items: center;
  125. }
  126. .btn_item {
  127. width: 600rpx;
  128. height: 80rpx;
  129. border-radius: 40rpx;
  130. line-height: 80rpx;
  131. text-align: center;
  132. font-size: 32rpx;
  133. color: #ffffff;
  134. background-color: #477DF3;
  135. }