You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.0 KiB
106 lines
2.0 KiB
3 years ago
|
* {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;
|
||
|
|
}
|
||
|
|
|