site-more.wxss 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. .page-background.data-v-eb9bae84{
  2. display: block;
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. width: 100%;
  7. height: 100%;
  8. }
  9. .body.data-v-eb9bae84{
  10. width: 100%;
  11. height: 100%;
  12. position: relative;
  13. z-index: 1;
  14. }
  15. .title.data-v-eb9bae84{
  16. font-size: 16px;
  17. font-weight: bold;
  18. }
  19. .subtitle.data-v-eb9bae84{
  20. font-size: 12px;
  21. color: #aaa;
  22. margin-top: 10px;
  23. }
  24. /* 面包屑 */
  25. .crumbs.data-v-eb9bae84{
  26. display: flex;
  27. align-items: center;
  28. height: 60px;
  29. border-radius: 8px;
  30. background-color: #fff;
  31. margin: 15px 0;
  32. }
  33. .crumbs .item.data-v-eb9bae84{
  34. flex: 1;
  35. display: flex;
  36. align-items: center;
  37. justify-content: center;
  38. flex-direction: column;
  39. }
  40. .crumbs .item .value.data-v-eb9bae84{
  41. font-size: 16px;
  42. font-weight: bold;
  43. color: #3EB6F8;
  44. }
  45. .crumbs .item .name.data-v-eb9bae84{
  46. font-size: 12px;
  47. }
  48. /* 切换 */
  49. .switch.data-v-eb9bae84{
  50. display: flex;
  51. align-items: center;
  52. justify-content: space-between;
  53. width: 100%;
  54. height: 44px;
  55. background-color: #fff;
  56. border-radius: 100pc;
  57. position: relative;
  58. }
  59. .switch .bg.data-v-eb9bae84{
  60. width: 50%;
  61. height: 40px;
  62. background-color: #3EB6F8;
  63. border-radius: 100pc;
  64. position: absolute;
  65. top: 2px;
  66. left: 2px;
  67. transition: all 200ms ease;
  68. }
  69. .switch .contet.data-v-eb9bae84{
  70. display: flex;
  71. align-items: center;
  72. justify-content: space-between;
  73. width: 100%;
  74. }
  75. .switch .text.data-v-eb9bae84{
  76. flex: 1;
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. font-size: 14px;
  81. position: relative;
  82. z-index: 2;
  83. transition: color 200ms ease;
  84. }
  85. .switch .text.data-v-eb9bae84:first-child,
  86. .switch.another .text.data-v-eb9bae84:last-child{
  87. color: #fff;
  88. }
  89. .switch.another .text.data-v-eb9bae84:first-child{
  90. color: inherit;
  91. }
  92. .switch.another .bg.data-v-eb9bae84{
  93. -webkit-transform: translateX(100%);
  94. transform: translateX(100%);
  95. }
  96. .list.data-v-eb9bae84{
  97. height: var(--list-height);
  98. overflow: auto;
  99. padding: 10px 0;
  100. }
  101. .list.data-v-eb9bae84::-webkit-scrollbar{
  102. display: none;
  103. }
  104. /* 设备列表 */
  105. .terminals.data-v-eb9bae84{
  106. margin-top: 10px;
  107. }
  108. .terminal-item.data-v-eb9bae84{
  109. display: flex;
  110. align-items: center;
  111. justify-content: space-between;
  112. background-color: #fff;
  113. border-radius: 8px;
  114. height: 78px;
  115. padding: 10px;
  116. }
  117. .terminal-item+.terminal-item.data-v-eb9bae84{
  118. margin-top: 10px;
  119. }
  120. .terminal-item .state.data-v-eb9bae84{
  121. display: flex;
  122. width: 58px;
  123. height: 58px;
  124. border-radius: 100%;
  125. margin-right: 10px;
  126. padding: 4px;
  127. background-image: linear-gradient(to right, #ccc 0%, #ccc 35.8%, #c7cccf 65.9%, #e8e8e8 80.4%, #c8c8c8 100%);
  128. }
  129. .terminal-item .state .cake.data-v-eb9bae84{
  130. display: flex;
  131. align-items: center;
  132. justify-content: center;
  133. flex-direction: column;
  134. width: 100%;
  135. height: 100%;
  136. border-radius: 100%;
  137. background-color: #eee;
  138. }
  139. .terminal-item .state .icon.data-v-eb9bae84{
  140. display: block;
  141. width: 20px;
  142. height: 20px;
  143. }
  144. .terminal-item .state .name.data-v-eb9bae84{
  145. font-size: 12px;
  146. margin-top: 3px;
  147. }
  148. .terminal-item .info.data-v-eb9bae84{
  149. flex: 1;
  150. }
  151. .terminal-item .info .name.data-v-eb9bae84{
  152. font-size: 14px;
  153. font-weight: bold;
  154. margin-bottom: 5px;
  155. }
  156. .terminal-item .info .subinfo.data-v-eb9bae84{
  157. font-size: 12px;
  158. color: #aaa;
  159. }
  160. .terminal-item .state.green.data-v-eb9bae84{
  161. background-image: linear-gradient(to right, #73e6a0 0%, #3eff8a 30%, #4edc86 60%, #b4ffd1 75%, #6be49a 100%);
  162. }
  163. .terminal-item .state.green .cake.data-v-eb9bae84{
  164. background-color: #ECFFF4;
  165. }
  166. .terminal-item .state.blue.data-v-eb9bae84{
  167. background-image: linear-gradient(to right, #3eb6f8 0%, #81d8ff 35%, #75ceff 65%, #94e2ff 80%, #2cb5ff 100%);
  168. }
  169. .terminal-item .state.blue .cake.data-v-eb9bae84{
  170. background-color: #E9F9FF;
  171. }
  172. .terminal-item .state.orange.data-v-eb9bae84{
  173. background-image: linear-gradient(to right, #FFE9BC 0%, #FFD070 35%, #FFD887 65%, #FFD887 80%, #FFC246 100%);
  174. }
  175. .terminal-item .state.orange .cake.data-v-eb9bae84{
  176. background-color: #FFF8EB;
  177. }
  178. .terminal-item .state.err.data-v-eb9bae84{
  179. background-image: linear-gradient(to right, #FFC4C4 0%, #F77474 35%, #FFAAAA 65%, #FFAAAA 80%, #F55B5B 100%);
  180. }
  181. .terminal-item .state.err .cake.data-v-eb9bae84{
  182. background-color: #FFE9E9;
  183. }
  184. /* 价格列表 */
  185. .price.data-v-eb9bae84{
  186. padding: 10px;
  187. background-color: #fff;
  188. border-radius: 8px;
  189. border: 1px solid transparent;
  190. position: relative;
  191. overflow: hidden;
  192. }
  193. .price + .price.data-v-eb9bae84{
  194. margin-top: 10px;
  195. }
  196. .price .header.data-v-eb9bae84{
  197. display: flex;
  198. align-items: center;
  199. }
  200. .price .header .icon.data-v-eb9bae84{
  201. display: flex;
  202. align-items: center;
  203. justify-content: center;
  204. width: 20px;
  205. height: 20px;
  206. font-size: 14px;
  207. color: #fff;
  208. border-radius: 4px;
  209. background-color: #ccc;
  210. margin-right: 14px;
  211. }
  212. .price .header .value.data-v-eb9bae84{
  213. font-size: 14px;
  214. font-weight: bold;
  215. }
  216. .price .info.data-v-eb9bae84{
  217. background-color: #F6F6F6;
  218. border-radius: 8px;
  219. padding: 10px;
  220. font-size: 14px;
  221. margin: 10px 0;
  222. }
  223. .price .info .row.data-v-eb9bae84{
  224. display: flex;
  225. align-items: center;
  226. justify-content: space-between;
  227. height: 30px;
  228. }
  229. .price .info .row .unit.data-v-eb9bae84{
  230. color: #aaa;
  231. margin-left: 5px;
  232. }
  233. .price .footer.data-v-eb9bae84{
  234. display: flex;
  235. align-items: center;
  236. justify-content: space-between;
  237. font-size: 14px;
  238. }
  239. .price.active.data-v-eb9bae84{
  240. border-color: #47B9F8;
  241. }
  242. .price.active .footer.data-v-eb9bae84,
  243. .price.active .header.data-v-eb9bae84{
  244. color: #47B9F8;
  245. }
  246. .price.active .header .icon.data-v-eb9bae84{
  247. background: linear-gradient(to right,#8FF8FB,#47AEFF);
  248. }
  249. .price.active.data-v-eb9bae84::after{
  250. content: '当前时段';
  251. display: flex;
  252. width: 76px;
  253. height: 30px;
  254. font-size: 14px;
  255. align-items: center;
  256. justify-content: center;
  257. color: #fff;
  258. background: linear-gradient(to right,#8FF8FB,#47AEFF);
  259. position: absolute;
  260. top: 0;
  261. right: 0;
  262. border-radius: 0 0 0 8px;
  263. text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  264. }
  265. .price.active .row .name.data-v-eb9bae84{
  266. font-weight: bolder;
  267. }
  268. .price.active .row .value.data-v-eb9bae84,.price.active .row .unit.data-v-eb9bae84{
  269. font-size: 18px;
  270. font-weight: bolder;
  271. color: #FF5D50;
  272. }
  273. /* 底部 */
  274. .underside.data-v-eb9bae84{
  275. position: fixed;
  276. left: 0;
  277. right: 0;
  278. bottom: 0;
  279. z-index: 10;
  280. padding: 10px;
  281. padding-bottom: 0;
  282. }
  283. .underside .scan.data-v-eb9bae84{
  284. display: flex;
  285. align-items: center;
  286. justify-content: center;
  287. width: 100%;
  288. height: 50px;
  289. border-radius: 8px;
  290. font-size: 14px;
  291. background: linear-gradient(to right,#8FF8FB,#47AEFF);
  292. }