anomaly.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. /* 页面背景 */
  2. .anomaly-container {
  3. min-height: 100vh;
  4. background-color: #F7F8FA;
  5. display: flex;
  6. flex-direction: column;
  7. }
  8. .anomaly-scroll {
  9. flex: 1;
  10. padding: 0.625rem 0.9375rem 0;
  11. box-sizing: border-box;
  12. }
  13. /* 内容卡片 */
  14. .ano-card {
  15. background-color: #fff;
  16. border-radius: 0.5rem;
  17. padding: 0.9375rem;
  18. margin-bottom: 0.625rem;
  19. }
  20. /* 节标题 */
  21. .ano-section-title {
  22. display: flex;
  23. align-items: center;
  24. margin-bottom: 0.625rem;
  25. }
  26. .ano-title-bar {
  27. width: 0.1875rem;
  28. height: 0.9375rem;
  29. background-color: #FF9800;
  30. border-radius: 0.09375rem;
  31. margin-right: 0.375rem;
  32. }
  33. .ano-title-text {
  34. font-size: 0.9375rem;
  35. font-weight: bold;
  36. color: #333;
  37. }
  38. /* 异常类型行 */
  39. .ano-type-row {
  40. display: flex;
  41. align-items: center;
  42. justify-content: space-between;
  43. padding: 0.3125rem 0;
  44. }
  45. .ano-type-val {
  46. font-size: 0.875rem;
  47. color: #333;
  48. flex: 1;
  49. }
  50. .ano-type-val.placeholder {
  51. color: #ccc;
  52. }
  53. .ano-right-arrow {
  54. width: 0.625rem;
  55. height: 0.625rem;
  56. }
  57. /* 描述文本框 */
  58. .ano-textarea {
  59. width: 100%;
  60. min-height: 6.25rem;
  61. font-size: 0.875rem;
  62. color: #333;
  63. line-height: 1.6;
  64. background-color: #FAFAFA;
  65. border-radius: 0.3125rem;
  66. padding: 0.625rem;
  67. box-sizing: border-box;
  68. }
  69. /* 照片网格 */
  70. .ano-photo-grid {
  71. display: flex;
  72. flex-wrap: wrap;
  73. gap: 0.5rem;
  74. }
  75. .ano-photo-item {
  76. width: 4.6875rem;
  77. height: 4.6875rem;
  78. border-radius: 0.375rem;
  79. position: relative;
  80. overflow: hidden;
  81. }
  82. .ano-photo-preview {
  83. width: 100%;
  84. height: 100%;
  85. }
  86. .ano-photo-del {
  87. position: absolute;
  88. top: 0.125rem;
  89. right: 0.125rem;
  90. width: 1.125rem;
  91. height: 1.125rem;
  92. line-height: 1rem;
  93. text-align: center;
  94. background-color: rgba(0, 0, 0, 0.5);
  95. color: #fff;
  96. border-radius: 50%;
  97. font-size: 0.875rem;
  98. }
  99. .ano-photo-add {
  100. width: 4.6875rem;
  101. height: 4.6875rem;
  102. border: 0.0625rem dashed #E0E0E0;
  103. border-radius: 0.375rem;
  104. background-color: #FAFAFA;
  105. display: flex;
  106. flex-direction: column;
  107. justify-content: center;
  108. align-items: center;
  109. }
  110. .ano-add-icon {
  111. width: 1.5625rem;
  112. height: 1.5625rem;
  113. margin-bottom: 0.3125rem;
  114. opacity: 0.5;
  115. }
  116. .ano-add-text {
  117. font-size: 0.75rem;
  118. color: #999;
  119. }
  120. /* 底部提交 */
  121. .ano-footer {
  122. position: fixed;
  123. bottom: 0;
  124. left: 0;
  125. width: 100%;
  126. background-color: #fff;
  127. padding: 0.625rem 1.25rem;
  128. padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
  129. box-sizing: border-box;
  130. box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.05);
  131. z-index: 10;
  132. }
  133. .ano-submit-btn {
  134. width: 100%;
  135. height: 2.8125rem;
  136. line-height: 2.8125rem;
  137. background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
  138. color: #fff;
  139. font-size: 1rem;
  140. font-weight: bold;
  141. border-radius: 1.40625rem;
  142. border: none;
  143. }
  144. .ano-submit-btn::after {
  145. border: none;
  146. }
  147. /* 异常类型选择器 */
  148. .ano-sheet-mask {
  149. position: fixed;
  150. top: 0;
  151. left: 0;
  152. width: 100%;
  153. height: 100%;
  154. background-color: rgba(0, 0, 0, 0.5);
  155. z-index: 999;
  156. display: flex;
  157. align-items: flex-end;
  158. }
  159. .ano-sheet {
  160. width: 100%;
  161. background-color: #fff;
  162. border-radius: 0.75rem 0.75rem 0 0;
  163. padding-bottom: constant(safe-area-inset-bottom);
  164. padding-bottom: env(safe-area-inset-bottom);
  165. }
  166. .ano-sheet-title {
  167. display: block;
  168. text-align: center;
  169. font-size: 0.875rem;
  170. color: #999;
  171. padding: 0.9375rem 0 0.625rem;
  172. border-bottom: 1px solid #f5f5f5;
  173. }
  174. .ano-sheet-list {
  175. max-height: 60vh;
  176. }
  177. .ano-sheet-item {
  178. display: flex;
  179. align-items: center;
  180. justify-content: space-between;
  181. padding: 0.9375rem 1.25rem;
  182. border-bottom: 1px solid #f9f9f9;
  183. }
  184. .ano-sheet-item-text {
  185. font-size: 1rem;
  186. color: #333;
  187. }
  188. .ano-sheet-item-text.selected {
  189. color: #FF9800;
  190. font-weight: bold;
  191. }
  192. .ano-check-icon {
  193. width: 0.625rem;
  194. height: 0.625rem;
  195. }
  196. .ano-sheet-cancel {
  197. text-align: center;
  198. font-size: 1rem;
  199. color: #999;
  200. padding: 0.9375rem 0;
  201. border-top: 0.5rem solid #F7F8FA;
  202. }