apply.wxss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. page {
  2. background-color: #fff;
  3. }
  4. .gcs-box {
  5. padding-bottom: 100rpx;
  6. }
  7. .gcs-box .card {
  8. position: relative;
  9. background: #fff;
  10. }
  11. .card-header {
  12. display: flex;
  13. padding: 30rpx;
  14. box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.1);
  15. }
  16. .card-header .title {
  17. flex: 1;
  18. color: #f75451;
  19. font-size: 30rpx;
  20. font-weight: bold;
  21. }
  22. .bot-line {
  23. width: 100%;
  24. height: 1rpx;
  25. border-bottom: 1rpx solid #f5f5f5;
  26. transition: 200ms all ease-in-out;
  27. }
  28. .bot-line.focus {
  29. border-bottom: 2rpx solid #f75451;
  30. }
  31. .info-item {
  32. margin-top: 54rpx;
  33. }
  34. .info-item .item-title {
  35. font-size: 22rpx;
  36. color: #7593b4;
  37. margin-bottom: 15rpx;
  38. }
  39. .info-item .item-content {
  40. font-size: 26rpx;
  41. color: #000;
  42. }
  43. .card-body {
  44. padding: 0 36rpx;
  45. }
  46. .edit-btn button {
  47. background-color: #f75451;
  48. text-align: center;
  49. line-height: 90rpx;
  50. margin: 80rpx 36rpx;
  51. color: #fff;
  52. border-radius: 6rpx;
  53. font-size: 38rpx;
  54. font-weight: bold;
  55. }
  56. .edit-btn button::after {
  57. border: 0;
  58. }
  59. /* 图片添加 */
  60. .img-group {
  61. display: flex;
  62. flex-wrap: wrap;
  63. font-size: 24rpx;
  64. margin-top: 30rpx;
  65. }
  66. .img-group .img-item {
  67. margin: 0 6rpx;
  68. width: 150rpx;
  69. height: 150rpx;
  70. position: relative;
  71. box-sizing: border-box;
  72. }
  73. .img-group .img-item .progress {
  74. position: absolute;
  75. left: 16rpx;
  76. bottom: 20rpx;
  77. width: 120rpx;
  78. height: 16rpx;
  79. border-radius: 20rpx;
  80. border: 2rpx solid #ddd;
  81. display: flex;
  82. align-items: center;
  83. }
  84. .img-group .img-item .progress span {
  85. height: 8rpx;
  86. width: 0;
  87. max-width: 112rpx;
  88. border-radius: 12rpx;
  89. position: absolute;
  90. left: 4rpx;
  91. top: 4rpx;
  92. background: #f5f5f5;
  93. }
  94. .img-group .img-item .hide-progress {
  95. opacity: 0;
  96. }
  97. .img-group .img-item .close {
  98. width: 32rpx;
  99. height: 32rpx;
  100. position: absolute;
  101. right: -8rpx;
  102. top: -8rpx;
  103. }
  104. .img-group .img-item image {
  105. height: 100%;
  106. width: 100%;
  107. }
  108. .img-group .img-item .closeImg {
  109. font-size: 40rpx;
  110. color: #a0a0a0;
  111. }
  112. .img-group .img-add {
  113. display: flex;
  114. align-items: center;
  115. justify-content: center;
  116. flex-direction: column;
  117. border: 2rpx dashed #dedede;
  118. color: #bcbcbc;
  119. }
  120. .img-group .img-add .cameraImg {
  121. width: 44rpx;
  122. height: 44rpx;
  123. color: #cdcdcd;
  124. margin-bottom: 8rpx;
  125. display: flex;
  126. justify-content: center;
  127. align-items: center;
  128. }