1
0

index.wxss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. .control-button::after {
  2. border: 0;
  3. }
  4. .control-grid {
  5. display: flex;
  6. flex-wrap: wrap;
  7. gap: 14rpx;
  8. padding: 0 20rpx 22rpx;
  9. }
  10. .control-cell {
  11. width: calc((100% - 14rpx) / 2);
  12. box-sizing: border-box;
  13. }
  14. .control-cell--power {
  15. width: 100%;
  16. }
  17. .control-button {
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. width: 100%;
  22. min-height: 86rpx;
  23. margin: 0;
  24. padding: 0 20rpx;
  25. border: 1rpx solid #d8e2ea;
  26. border-radius: 14rpx;
  27. background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  28. color: #1f2937;
  29. font-size: 26rpx;
  30. line-height: 1.3;
  31. font-weight: 800;
  32. box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.05);
  33. box-sizing: border-box;
  34. }
  35. .control-button:active {
  36. opacity: 0.72;
  37. }
  38. .control-name {
  39. min-width: 0;
  40. flex: 1;
  41. color: #111827;
  42. text-align: center;
  43. word-break: break-all;
  44. }
  45. button[disabled].control-button {
  46. background: #eef1f5;
  47. color: #94a3b8;
  48. box-shadow: none;
  49. }
  50. .status-summary-panel .panel-header {
  51. padding-bottom: 16rpx;
  52. }
  53. .status-summary-body {
  54. padding: 0 24rpx 22rpx;
  55. }
  56. .status-summary-top,
  57. .status-summary-line {
  58. display: flex;
  59. align-items: center;
  60. gap: 14rpx;
  61. }
  62. .status-summary-top {
  63. padding-top: 2rpx;
  64. margin-bottom: 12rpx;
  65. }
  66. .status-summary-box {
  67. flex: 1;
  68. min-width: 0;
  69. min-height: 88rpx;
  70. padding: 14rpx 16rpx 16rpx;
  71. border: 1rpx solid #e6ebf2;
  72. border-radius: 14rpx;
  73. background: #f9fbfd;
  74. box-sizing: border-box;
  75. overflow: hidden;
  76. }
  77. .status-summary-box-label {
  78. color: #64748b;
  79. font-size: 22rpx;
  80. line-height: 1.2;
  81. font-weight: 700;
  82. white-space: nowrap;
  83. }
  84. .status-summary-box-value {
  85. min-width: 0;
  86. margin-top: 6rpx;
  87. color: #111827;
  88. font-size: 27rpx;
  89. line-height: 1.35;
  90. font-weight: 800;
  91. white-space: nowrap;
  92. overflow: hidden;
  93. text-overflow: ellipsis;
  94. }
  95. .status-summary-box--fault.is-warning {
  96. border-color: rgba(194, 65, 12, 0.22);
  97. background: #fff7ed;
  98. }
  99. .status-summary-box--fault.is-warning .status-summary-box-value {
  100. color: var(--danger);
  101. }
  102. .status-summary-line--metrics {
  103. justify-content: space-between;
  104. gap: 8rpx;
  105. padding: 14rpx 0 0;
  106. border-top: 1rpx solid #edf2f7;
  107. }
  108. .status-metric {
  109. flex: none;
  110. width: 160rpx;
  111. min-width: 160rpx;
  112. color: #111827;
  113. font-family: Menlo, Monaco, Consolas, monospace;
  114. font-size: 27rpx;
  115. line-height: 1.35;
  116. font-weight: 800;
  117. text-align: center;
  118. overflow: hidden;
  119. white-space: nowrap;
  120. text-overflow: ellipsis;
  121. box-sizing: border-box;
  122. }
  123. .theme-dark .status-summary-box {
  124. border-color: #263241;
  125. background: #17202c;
  126. }
  127. .theme-dark .status-summary-box-label {
  128. color: #94a3b8;
  129. }
  130. .theme-dark .status-summary-box-value,
  131. .theme-dark .status-metric {
  132. color: #e5e7eb;
  133. }
  134. .theme-dark .status-summary-box--fault.is-warning {
  135. border-color: #7c2d12;
  136. background: #33150f;
  137. }
  138. .theme-dark .status-summary-box--fault.is-warning .status-summary-box-value {
  139. color: #fed7aa;
  140. }
  141. .theme-dark .status-summary-line--metrics {
  142. border-color: #263241;
  143. }
  144. .upgrade-actions {
  145. flex-wrap: wrap;
  146. justify-content: flex-end;
  147. max-width: 286rpx;
  148. row-gap: 8rpx;
  149. }
  150. .upgrade-body {
  151. padding: 8rpx 24rpx 24rpx;
  152. }
  153. .upgrade-row {
  154. display: flex;
  155. align-items: center;
  156. justify-content: space-between;
  157. gap: 20rpx;
  158. min-height: 62rpx;
  159. border-top: 1rpx solid #edf2f7;
  160. }
  161. .upgrade-row:first-child {
  162. border-top: 0;
  163. }
  164. .upgrade-row--file {
  165. display: block;
  166. min-height: 0;
  167. padding-top: 14rpx;
  168. padding-bottom: 14rpx;
  169. }
  170. .upgrade-file-head {
  171. display: flex;
  172. align-items: center;
  173. justify-content: space-between;
  174. gap: 14rpx;
  175. }
  176. .upgrade-file-meta {
  177. display: flex;
  178. align-items: center;
  179. justify-content: flex-end;
  180. gap: 10rpx;
  181. min-width: 0;
  182. flex: 1;
  183. overflow: hidden;
  184. }
  185. .upgrade-file-meta-item {
  186. flex: none;
  187. min-width: 0;
  188. white-space: nowrap;
  189. overflow: hidden;
  190. text-overflow: ellipsis;
  191. }
  192. .upgrade-file-meta-item--program {
  193. color: var(--accent-dark);
  194. font-weight: 800;
  195. }
  196. .upgrade-file-meta-item--checksum,
  197. .upgrade-file-meta-item--size {
  198. color: #64748b;
  199. }
  200. .upgrade-file-name {
  201. display: block;
  202. margin-top: 8rpx;
  203. color: #111827;
  204. font-size: 24rpx;
  205. line-height: 1.35;
  206. font-weight: 700;
  207. white-space: nowrap;
  208. overflow: hidden;
  209. text-overflow: ellipsis;
  210. }
  211. .upgrade-label {
  212. flex: none;
  213. color: #64748b;
  214. font-size: 24rpx;
  215. line-height: 1.35;
  216. }
  217. .upgrade-value {
  218. min-width: 0;
  219. flex: 1;
  220. color: #111827;
  221. font-size: 24rpx;
  222. line-height: 1.35;
  223. text-align: right;
  224. overflow: hidden;
  225. text-overflow: ellipsis;
  226. white-space: nowrap;
  227. }
  228. .upgrade-status {
  229. margin-top: 14rpx;
  230. padding: 14rpx 16rpx;
  231. border-radius: 12rpx;
  232. background: #f8fafc;
  233. color: #64748b;
  234. font-size: 23rpx;
  235. line-height: 1.45;
  236. font-weight: 700;
  237. word-break: break-all;
  238. }
  239. .upgrade-status--ready {
  240. background: #effaf8;
  241. color: var(--accent-dark);
  242. }
  243. .upgrade-progress {
  244. position: relative;
  245. height: 14rpx;
  246. margin-top: 16rpx;
  247. border-radius: 999rpx;
  248. background: #e5e7eb;
  249. overflow: hidden;
  250. }
  251. .upgrade-progress-bar {
  252. height: 100%;
  253. min-width: 0;
  254. border-radius: inherit;
  255. background: linear-gradient(90deg, #10b981 0%, #0f8f87 100%);
  256. transition: width 0.18s ease;
  257. }
  258. .theme-dark .upgrade-progress {
  259. background: #263241;
  260. }
  261. .theme-dark .upgrade-progress-bar {
  262. background: linear-gradient(90deg, #2dd4bf 0%, #14b8a6 100%);
  263. }
  264. .theme-dark .upgrade-file-meta-item--checksum,
  265. .theme-dark .upgrade-file-meta-item--size,
  266. .theme-dark .upgrade-file-name {
  267. color: #cbd5e1;
  268. }
  269. .theme-dark .upgrade-file-meta-item--program {
  270. color: #5eead4;
  271. }