tousujianyi.wxss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. .container4 {
  2. padding: 20rpx;
  3. background-color: #f5f5f5;
  4. min-height: 100vh;
  5. padding-top: calc(90rpx + 44px + 20rpx); /* 增加了额外的顶部间距 */
  6. }
  7. .custom-nav {
  8. display: flex;
  9. align-items: center;
  10. height: 90rpx;
  11. margin-bottom: 20rpx;
  12. background-color: #2E82FF;
  13. position: fixed;
  14. top: 0;
  15. left: 0;
  16. right: 0;
  17. z-index: 1000;
  18. padding: 0 20rpx;
  19. padding-top: 44px; /* 适配iPhone状态栏 */
  20. }
  21. .fixed-back {
  22. font-size: 40rpx;
  23. text-align: center;
  24. color: #fff;
  25. }
  26. .nav-title {
  27. flex: 1;
  28. text-align: center;
  29. font-size: 34rpx;
  30. color: #fff;
  31. }
  32. .nav-placeholder {
  33. width: 60rpx;
  34. }
  35. .bill-card {
  36. background-color: #fff;
  37. border-radius: 16rpx;
  38. padding: 30rpx;
  39. margin-bottom: 20rpx;
  40. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  41. position: relative;
  42. }
  43. /* 第一个卡片额外的顶部间距 */
  44. .first-card {
  45. margin-top: 10rpx;
  46. }
  47. .bill-row {
  48. display: flex;
  49. justify-content: space-between;
  50. align-items: center;
  51. padding: 20rpx 0;
  52. }
  53. .bill-row-address {
  54. color: rgba(104, 108, 128, 1);
  55. }
  56. /* 必填项标记 */
  57. .required {
  58. color: #ff4d4f;
  59. margin-left: 4rpx;
  60. }
  61. /* 单选框样式 */
  62. .radio-group {
  63. display: flex;
  64. justify-content: flex-end;
  65. }
  66. .radio {
  67. margin-left: 30rpx;
  68. font-size: 28rpx;
  69. color: rgba(104, 108, 128, 1);
  70. }
  71. .divider {
  72. height: 1rpx;
  73. background-color: #eee;
  74. margin: 10rpx 0; /* 增加了分隔线上下间距 */
  75. }
  76. .solid-divider {
  77. height: 1rpx;
  78. background-color: #ddd;
  79. margin: 15rpx 0 20rpx 0;
  80. }
  81. .card-title {
  82. font-size: 32rpx;
  83. color: #333;
  84. font-weight: 500;
  85. margin-bottom: 10rpx;
  86. }
  87. .input-right {
  88. text-align: right;
  89. width: 60%;
  90. }
  91. .input-text {
  92. color: rgba(104, 108, 128, 1);
  93. }
  94. .placeholder-style {
  95. color: #999;
  96. text-align: right;
  97. }
  98. .selector-value {
  99. display: flex;
  100. align-items: center;
  101. }
  102. .arrow {
  103. margin-left: 10rpx;
  104. color: #999;
  105. }
  106. .fault-description {
  107. margin-bottom: 20rpx;
  108. }
  109. .fault-description textarea {
  110. width: 100%;
  111. height: 150rpx;
  112. padding: 10rpx;
  113. box-sizing: border-box;
  114. font-size: 28rpx;
  115. }
  116. .upload-section {
  117. display: flex;
  118. flex-wrap: wrap;
  119. }
  120. .upload-btn-container {
  121. width: 150rpx;
  122. height: 150rpx;
  123. margin-right: 20rpx;
  124. margin-bottom: 20rpx;
  125. border-radius: 8rpx;
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. }
  130. .solid-border {
  131. border: 2rpx solid #ccc;
  132. }
  133. .upload-btn {
  134. width: 120rpx;
  135. height: 120rpx;
  136. display: flex;
  137. justify-content: center;
  138. align-items: center;
  139. }
  140. .plus-icon {
  141. font-size: 60rpx;
  142. color: #999;
  143. }
  144. .upload-tip {
  145. font-size: 24rpx;
  146. color: #999;
  147. margin-top: 10rpx;
  148. }
  149. .image-preview {
  150. display: flex;
  151. flex-wrap: wrap;
  152. }
  153. .image-item {
  154. width: 150rpx;
  155. height: 150rpx;
  156. margin-right: 20rpx;
  157. margin-bottom: 20rpx;
  158. position: relative;
  159. }
  160. .image-item image {
  161. width: 100%;
  162. height: 100%;
  163. border-radius: 8rpx;
  164. }
  165. .delete-icon {
  166. position: absolute;
  167. top: -15rpx;
  168. right: -15rpx;
  169. width: 40rpx;
  170. height: 40rpx;
  171. background-color: rgba(0, 0, 0, 0.5);
  172. color: #fff;
  173. border-radius: 50%;
  174. display: flex;
  175. justify-content: center;
  176. align-items: center;
  177. font-size: 24rpx;
  178. }
  179. .submit-btn {
  180. width: 90%;
  181. height: 45px;
  182. background-color: #0080ff;
  183. color: white;
  184. border-radius: 22.5px;
  185. font-size: 16px;
  186. display: flex;
  187. align-items: center;
  188. justify-content: center;
  189. margin: 30px auto;
  190. }
  191. .submit-btn.disabled {
  192. opacity: 0.7;
  193. }