* {margin:0; padding:0;} html,body{height:100%;} .box { height:100%; background: #020723; background-image:url("/image/lora2/background1.png"); background-size: 100% 100%; background-repeat: no-repeat; } html { /*在根元素中计算基准值字体大小,设备宽度 / 设计稿宽度 * 100*/ font-size: calc(100vw /1920 * 100 ); } .box{ font-size: 0.18rem; } /*头部*/ .title{ height: 0.64rem; display: -webkit-flex; display: flex; position: relative; } .school{ width: 2.06rem; height: 0.64rem; position: relative; } .school-logo{ width: 1.68rem; height: 0.43rem; position:absolute; bottom: 0; right: 0; padding:0; margin:0; } .college{ width: 1.71rem; } .college-text{ margin-top: 0.35rem; margin-left: 0.15rem; font-family: Source Han Sans CN; font-size: 0.18rem; font-weight: 400; color: #FFFFFF; } .menu{ position:absolute; left: 0; right: 0; margin:auto; width: 15.43rem; height: 0.64rem; background-image:url("/image/lora2/top.png"); background-size: 100% 100%; background-repeat: no-repeat; } /*设备列表*/ .device{ width: 2.99rem; height: 18.56rem; padding-top: 0.56rem; } .device-frame{ width: 2.4rem; height: 100%; margin-left: 0.34rem; } .device-cell1{ width: 2.4rem; height: 0.64rem; margin-bottom: 0.1rem; padding-left: 0.36rem; background: linear-gradient(90deg, rgba(0,250,255,0.84), rgba(0,250,255,0)); border-radius: 0.32rem; } .device-cell2{ width: 2.4rem; height: 0.64rem; margin-bottom: 0.1rem; padding: 0.015rem; background: linear-gradient(90deg, rgba(0,250,255,0.5), rgba(0,250,255,0.1)); border-radius: 0.32rem; } .device-cell{ width: 100%; height: 100%; background: #101010; border-radius: 0.32rem; background-image:url("/image/lora2/background1.png"); } .device-online{ width: 0.12rem; height: 0.12rem; background: #31EDB1; border-radius: 0.06rem; }