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.
548 lines
11 KiB
548 lines
11 KiB
* {margin:0; padding:0;}
|
|
html,body{height:100%;}
|
|
html{
|
|
background: #020723;
|
|
background-image:url("/image/lora2/background1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.box {
|
|
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;
|
|
width: 11.8rem;
|
|
margin:auto;
|
|
height: 0.64rem;
|
|
background-image:url("/image/lora2/top.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
padding-left: 2.07rem;
|
|
margin-left: 2.8rem;
|
|
}
|
|
.menu-button{
|
|
width: 1.17rem;
|
|
height: auto;
|
|
padding-left: 0.1rem;
|
|
padding-right: 0.1rem;
|
|
text-align: center;
|
|
line-height:0.64rem;
|
|
font-size: 0.2rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
opacity: 0.8;
|
|
cursor:pointer;
|
|
}
|
|
.menu-button-selected{
|
|
background-image:url("/image/lora2/top_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.menu-middle{
|
|
width: 4.27rem;
|
|
height: auto;
|
|
text-align: center;
|
|
line-height:0.64rem;
|
|
font-size: 0.28rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.version{
|
|
position:absolute;
|
|
right: 0.33rem;
|
|
top:0.38rem;
|
|
width: 0.56rem;
|
|
height: 0.14rem;
|
|
font-size: 0.18rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/*主体*/
|
|
.main{
|
|
height: auto;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
/*设备列表*/
|
|
.device{
|
|
width: 2.99rem;
|
|
height: auto;
|
|
padding-top: 0.56rem;
|
|
}
|
|
.device-frame{
|
|
width: 2.4rem;
|
|
height: 100%;
|
|
margin-left: 0.34rem;
|
|
}
|
|
.device-cell{
|
|
cursor:pointer;
|
|
}
|
|
.device-cell1{
|
|
width: 2.4rem;
|
|
height: 0.64rem;
|
|
margin-bottom: 0.1rem;
|
|
background: linear-gradient(90deg, rgba(0,250,255,0.84), rgba(0,250,255,0));
|
|
border-radius: 0.32rem;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.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-border1{
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.device-border2{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #101010;
|
|
border-radius: 0.32rem;
|
|
background-image:url("/image/lora2/background1.png");
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.device-info1{
|
|
margin-left: 0.36rem;
|
|
width: 1rem;
|
|
height: auto;
|
|
line-height:0.64rem;
|
|
font-size: 0.24rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
.device-info2{
|
|
width: 0.12rem;
|
|
height: auto;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.device-online-chunk{
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.device-online{
|
|
width: 0.12rem;
|
|
height: 0.12rem;
|
|
margin: auto;
|
|
background: #31EDB1;
|
|
border-radius: 0.06rem;
|
|
}
|
|
.device-online2{
|
|
width: 0.12rem;
|
|
height: 0.12rem;
|
|
margin: auto;
|
|
background: #F4543F;
|
|
border-radius: 0.06rem;
|
|
}
|
|
.device-info3{
|
|
width: 0.36rem;
|
|
height: auto;
|
|
margin-left: 0.07rem;
|
|
line-height:0.64rem;
|
|
font-size: 0.18rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
/*对比图*/
|
|
.diagram{
|
|
margin-top: 0.16rem;
|
|
}
|
|
.compare{
|
|
width: 15.9rem;
|
|
height: 6.42rem;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.compare-left{
|
|
width: 0.23rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.compare-left2{
|
|
width: 6.28rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.compare-middle{
|
|
height: auto;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.compare-middle-title{
|
|
position:absolute;
|
|
left: 0; right: 0;
|
|
margin: auto;
|
|
width: 2.1rem;
|
|
height: 0.32rem;
|
|
background-image:url("/image/lora2/kk_biaoti.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
font-family: Source Han Sans CN;
|
|
color: #FFFFFF;
|
|
z-index: 100;
|
|
|
|
}
|
|
.compare-middle-left{
|
|
width: 0.5rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.compare-middle-middle{
|
|
margin-top: 0.32rem;
|
|
width: 1.88rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_4.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.compare-middle-right{
|
|
width: 0.5rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transform: rotateY(180deg);
|
|
}
|
|
.compare-right2{
|
|
width: 6.28rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.compare-right{
|
|
width: 0.23rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk1_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transform: rotateY(180deg);
|
|
}
|
|
#container1{
|
|
position:absolute;
|
|
left: 0; right: 0; top: 0; bottom: 0;
|
|
padding-top: 0.33rem;
|
|
margin: auto;
|
|
width: 15.5rem;
|
|
height: 6rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
/*下部*/
|
|
.compare2{
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
margin-top: 0.33rem;
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
/*雷达图*/
|
|
.radar{
|
|
width: 4.71rem;
|
|
height: 3.01rem;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.radar-left{
|
|
width: 0.23rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.radar-left2{
|
|
width: 0.69rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.radar-middle{
|
|
height: auto;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.radar-middle-title{
|
|
position:absolute;
|
|
left: 0; right: 0;
|
|
margin: auto;
|
|
width: 2.1rem;
|
|
height: 0.32rem;
|
|
background-image:url("/image/lora2/kk_biaoti.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
font-family: Source Han Sans CN;
|
|
color: #FFFFFF;
|
|
z-index: 100;
|
|
}
|
|
.radar-middle-left{
|
|
width: 0.5rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.radar-middle-middle{
|
|
margin-top: 0.32rem;
|
|
width: 1.88rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_4.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.radar-middle-right{
|
|
width: 0.5rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transform: rotateY(180deg);
|
|
}
|
|
.radar-right2{
|
|
width: 0.68rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.radar-right{
|
|
width: 0.23rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transform: rotateY(180deg);
|
|
}
|
|
#container2{
|
|
position:absolute;
|
|
left: 0; right: 0; top:0.35rem;
|
|
margin: auto;
|
|
width: 2.6rem;
|
|
height: 2.7rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
/*数据图*/
|
|
.original{
|
|
margin-left: 0.21rem;
|
|
width: 10.98rem;
|
|
height: 3.01rem;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.original2{
|
|
width: 15.9rem;
|
|
height: 3.01rem;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.original-left{
|
|
width: 0.23rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.original-left2{
|
|
width: 3.82rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.original2-left2{
|
|
width: 6.82rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.original-middle{
|
|
height: auto;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.original-middle-title{
|
|
position:absolute;
|
|
left: 0; right: 0;
|
|
margin: auto;
|
|
width: 2.1rem;
|
|
height: 0.32rem;
|
|
background-image:url("/image/lora2/kk_biaoti.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
font-family: Source Han Sans CN;
|
|
color: #FFFFFF;
|
|
z-index: 100;
|
|
}
|
|
.original-middle-left{
|
|
width: 0.5rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.original-middle-middle{
|
|
margin-top: 0.32rem;
|
|
width: 1.88rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_4.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.original-middle-right{
|
|
width: 0.5rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transform: rotateY(180deg);
|
|
}
|
|
.original-right2{
|
|
width: 3.82rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.original2-right2{
|
|
width: 6.82rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: repeat-x;
|
|
}
|
|
.original-right{
|
|
width: 0.23rem;
|
|
height: auto;
|
|
background-image:url("/image/lora2/kk2_1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
transform: rotateY(180deg);
|
|
}
|
|
#container3{
|
|
position:absolute;
|
|
left: 0; right: 0; top: 0; bottom: 0;
|
|
padding-top: 0.33rem;
|
|
margin: auto;
|
|
width: 10.52rem;
|
|
height: 2.4rem;
|
|
z-index: 100;
|
|
|
|
font-size: 0.18rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#container4{
|
|
position:absolute;
|
|
left: 0; right: 0; top: 0; bottom: 0;
|
|
padding-top: 0.33rem;
|
|
margin: auto;
|
|
width: 15.5rem;
|
|
height: 6rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
#container5{
|
|
position:absolute;
|
|
left: 0; right: 0; top: 0; bottom: 0;
|
|
padding-top: 0.33rem;
|
|
margin: auto;
|
|
width: 15.5rem;
|
|
height: 2.4rem;
|
|
z-index: 100;
|
|
|
|
font-size: 0.18rem;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
}
|
|
|