myData.wxss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. page{
  2. background-color: #f2f2f2;
  3. }
  4. .upload{
  5. width: 690rpx;
  6. margin: 0 auto;
  7. display: flex;
  8. flex-direction: column;
  9. }
  10. .upload-title{
  11. height: 90rpx;
  12. border-bottom: 1rpx solid #efefef;
  13. font-size: 30rpx;
  14. color: #333;
  15. font-weight: 500;
  16. display: flex;
  17. align-items: center;
  18. }
  19. .content-title-text{
  20. font-size: 30rpx;
  21. color: #333;
  22. font-weight: 500;
  23. }
  24. .content-title-number{
  25. font-size: 24rpx;
  26. color: #333;
  27. }
  28. .upload-img{
  29. display: flex;
  30. height: 240rpx;
  31. align-items: center;
  32. }
  33. .upload-img image{
  34. margin-left: 30rpx;
  35. width: 120rpx;
  36. height: 120rpx;
  37. background-color: #f8f8f8;
  38. border-radius: 10rpx;
  39. }
  40. /* 图片 */
  41. .img{
  42. display: flex;
  43. flex-direction: column;
  44. justify-content: space-around;
  45. }
  46. .img_title{
  47. display: flex;
  48. align-items: center;
  49. padding: 30rpx 0rpx;
  50. }
  51. .img_title text{
  52. font-size: 26rpx;
  53. color:#333;
  54. }
  55. .img_title image{
  56. width: 26rpx;
  57. height: 26rpx;
  58. margin-left: 10rpx;
  59. }
  60. .image{
  61. width: 120rpx;
  62. height: 120rpx;
  63. background-color: #f8f8f8;
  64. display: flex;
  65. justify-content: center;
  66. align-items: center;
  67. margin-left: 20rpx;
  68. }
  69. .image image{
  70. width: 80rpx;
  71. height: 80rpx;
  72. }
  73. .delete-img{
  74. width: 20rpx;
  75. height: 20rpx;
  76. position: absolute;
  77. top: 0;
  78. right: 0;
  79. }
  80. .content{
  81. width: 100%;
  82. display: flex;
  83. justify-content: space-between;
  84. border-bottom: 1rpx solid #efefef;
  85. align-items: center;
  86. height: 90rpx;
  87. }
  88. .edit{
  89. width: 120rpx;
  90. height: 60rpx;
  91. display: flex;
  92. justify-content: center;
  93. align-items: center;
  94. font-size: 26rpx;
  95. color: #fff;
  96. margin-right: 30rpx;
  97. background-color: #33ad37;
  98. border-radius: 60rpx;
  99. }
  100. /* 遮罩层 */
  101. .mask{
  102. width:100%;
  103. height:100%;
  104. position:fixed;
  105. background-color:rgba(70, 70, 70, 0.5);
  106. z-index:9999;
  107. top:0;
  108. left:0;
  109. opacity:1;
  110. display: flex;
  111. justify-content: center;
  112. align-items: center;
  113. }
  114. .mask_content{
  115. width:542rpx;
  116. height: 320rpx;
  117. display: flex;
  118. flex-direction: column;
  119. align-items: center;
  120. background-color: #fff;
  121. border-radius: 20rpx;
  122. }
  123. .mask_content text{
  124. font-size: 30rpx;
  125. color:#333;
  126. margin-top: 54rpx;
  127. }
  128. .mask-input{
  129. height: 60rpx;
  130. border-bottom: 1rpx solid #000;
  131. text-align: center;
  132. margin-top: 30rpx;
  133. width: 388rpx;
  134. }
  135. .mask-btn{
  136. display: flex;
  137. justify-content: center;
  138. margin-top: 40rpx;
  139. }
  140. .mask-clear{
  141. width: 160rpx;
  142. height: 60rpx;
  143. border:1rpx solid #33ad37;
  144. border-radius: 60rpx;
  145. font-size: 26rpx;
  146. color: #33ad37;
  147. display: flex;
  148. justify-content: center;
  149. align-items: center;
  150. }
  151. .mask-true{
  152. width: 160rpx;
  153. height: 60rpx;
  154. background-color:#33ad37;
  155. border-radius: 60rpx;
  156. font-size: 26rpx;
  157. color: #fff;
  158. margin-left:50rpx;
  159. display: flex;
  160. justify-content: center;
  161. align-items: center;
  162. }
  163. .clear{
  164. display: flex;
  165. align-items: center;
  166. justify-content: center;
  167. margin-top: 60rpx;
  168. }
  169. .clear image{
  170. width: 60rpx;
  171. height: 60rpx;
  172. }
  173. .img-content{
  174. display:flex;
  175. }
  176. .img-content .bdimg{
  177. width: 120rpx;
  178. height: 120rpx;
  179. background-color: #f8f8f8;
  180. margin-left: 20rpx;
  181. position: relative;
  182. }
  183. .img-content .bdimg image{
  184. width: 100%;
  185. height: 100%;
  186. }