.page-background.data-v-eb9bae84{ display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .body.data-v-eb9bae84{ width: 100%; height: 100%; position: relative; z-index: 1; } .title.data-v-eb9bae84{ font-size: 16px; font-weight: bold; } .subtitle.data-v-eb9bae84{ font-size: 12px; color: #aaa; margin-top: 10px; } /* 面包屑 */ .crumbs.data-v-eb9bae84{ display: flex; align-items: center; height: 60px; border-radius: 8px; background-color: #fff; margin: 15px 0; } .crumbs .item.data-v-eb9bae84{ flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; } .crumbs .item .value.data-v-eb9bae84{ font-size: 16px; font-weight: bold; color: #3EB6F8; } .crumbs .item .name.data-v-eb9bae84{ font-size: 12px; } /* 切换 */ .switch.data-v-eb9bae84{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; background-color: #fff; border-radius: 100pc; position: relative; } .switch .bg.data-v-eb9bae84{ width: 50%; height: 40px; background-color: #3EB6F8; border-radius: 100pc; position: absolute; top: 2px; left: 2px; transition: all 200ms ease; } .switch .contet.data-v-eb9bae84{ display: flex; align-items: center; justify-content: space-between; width: 100%; } .switch .text.data-v-eb9bae84{ flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; z-index: 2; transition: color 200ms ease; } .switch .text.data-v-eb9bae84:first-child, .switch.another .text.data-v-eb9bae84:last-child{ color: #fff; } .switch.another .text.data-v-eb9bae84:first-child{ color: inherit; } .switch.another .bg.data-v-eb9bae84{ -webkit-transform: translateX(100%); transform: translateX(100%); } .list.data-v-eb9bae84{ height: var(--list-height); overflow: auto; padding: 10px 0; } .list.data-v-eb9bae84::-webkit-scrollbar{ display: none; } /* 设备列表 */ .terminals.data-v-eb9bae84{ margin-top: 10px; } .terminal-item.data-v-eb9bae84{ display: flex; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 8px; height: 78px; padding: 10px; } .terminal-item+.terminal-item.data-v-eb9bae84{ margin-top: 10px; } .terminal-item .state.data-v-eb9bae84{ display: flex; width: 58px; height: 58px; border-radius: 100%; margin-right: 10px; padding: 4px; background-image: linear-gradient(to right, #ccc 0%, #ccc 35.8%, #c7cccf 65.9%, #e8e8e8 80.4%, #c8c8c8 100%); } .terminal-item .state .cake.data-v-eb9bae84{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border-radius: 100%; background-color: #eee; } .terminal-item .state .icon.data-v-eb9bae84{ display: block; width: 20px; height: 20px; } .terminal-item .state .name.data-v-eb9bae84{ font-size: 12px; margin-top: 3px; } .terminal-item .info.data-v-eb9bae84{ flex: 1; } .terminal-item .info .name.data-v-eb9bae84{ font-size: 14px; font-weight: bold; margin-bottom: 5px; } .terminal-item .info .subinfo.data-v-eb9bae84{ font-size: 12px; color: #aaa; } .terminal-item .state.green.data-v-eb9bae84{ background-image: linear-gradient(to right, #73e6a0 0%, #3eff8a 30%, #4edc86 60%, #b4ffd1 75%, #6be49a 100%); } .terminal-item .state.green .cake.data-v-eb9bae84{ background-color: #ECFFF4; } .terminal-item .state.blue.data-v-eb9bae84{ background-image: linear-gradient(to right, #3eb6f8 0%, #81d8ff 35%, #75ceff 65%, #94e2ff 80%, #2cb5ff 100%); } .terminal-item .state.blue .cake.data-v-eb9bae84{ background-color: #E9F9FF; } .terminal-item .state.orange.data-v-eb9bae84{ background-image: linear-gradient(to right, #FFE9BC 0%, #FFD070 35%, #FFD887 65%, #FFD887 80%, #FFC246 100%); } .terminal-item .state.orange .cake.data-v-eb9bae84{ background-color: #FFF8EB; } .terminal-item .state.err.data-v-eb9bae84{ background-image: linear-gradient(to right, #FFC4C4 0%, #F77474 35%, #FFAAAA 65%, #FFAAAA 80%, #F55B5B 100%); } .terminal-item .state.err .cake.data-v-eb9bae84{ background-color: #FFE9E9; } /* 价格列表 */ .price.data-v-eb9bae84{ padding: 10px; background-color: #fff; border-radius: 8px; border: 1px solid transparent; position: relative; overflow: hidden; } .price + .price.data-v-eb9bae84{ margin-top: 10px; } .price .header.data-v-eb9bae84{ display: flex; align-items: center; } .price .header .icon.data-v-eb9bae84{ display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 14px; color: #fff; border-radius: 4px; background-color: #ccc; margin-right: 14px; } .price .header .value.data-v-eb9bae84{ font-size: 14px; font-weight: bold; } .price .info.data-v-eb9bae84{ background-color: #F6F6F6; border-radius: 8px; padding: 10px; font-size: 14px; margin: 10px 0; } .price .info .row.data-v-eb9bae84{ display: flex; align-items: center; justify-content: space-between; height: 30px; } .price .info .row .unit.data-v-eb9bae84{ color: #aaa; margin-left: 5px; } .price .footer.data-v-eb9bae84{ display: flex; align-items: center; justify-content: space-between; font-size: 14px; } .price.active.data-v-eb9bae84{ border-color: #47B9F8; } .price.active .footer.data-v-eb9bae84, .price.active .header.data-v-eb9bae84{ color: #47B9F8; } .price.active .header .icon.data-v-eb9bae84{ background: linear-gradient(to right,#8FF8FB,#47AEFF); } .price.active.data-v-eb9bae84::after{ content: '当前时段'; display: flex; width: 76px; height: 30px; font-size: 14px; align-items: center; justify-content: center; color: #fff; background: linear-gradient(to right,#8FF8FB,#47AEFF); position: absolute; top: 0; right: 0; border-radius: 0 0 0 8px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } .price.active .row .name.data-v-eb9bae84{ font-weight: bolder; } .price.active .row .value.data-v-eb9bae84,.price.active .row .unit.data-v-eb9bae84{ font-size: 18px; font-weight: bolder; color: #FF5D50; } /* 底部 */ .underside.data-v-eb9bae84{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px; padding-bottom: 0; } .underside .scan.data-v-eb9bae84{ display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 8px; font-size: 14px; background: linear-gradient(to right,#8FF8FB,#47AEFF); }