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.
703 lines
11 KiB
703 lines
11 KiB
|
|
html{
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: rgb(9, 9, 24);
|
|
color: #fff;
|
|
overflow: hidden;
|
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
|
|
font-size: 17px;
|
|
margin-left: 2px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.biankaung {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1))
|
|
}
|
|
|
|
.biankuang_top{
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.cameraContent{
|
|
width: 36%;
|
|
height: 92%;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
.shiyituImage{
|
|
width: 36%;
|
|
height: 89%;
|
|
margin-top: 3%;
|
|
background-color:#1e2e3d;
|
|
position: relative;
|
|
}
|
|
|
|
.shiyituImage>img{
|
|
width: 100%;
|
|
height: 94%;
|
|
}
|
|
|
|
.video_canvas{
|
|
width: 100%;
|
|
height: 48%;
|
|
position: relative;
|
|
}
|
|
.video_canvas1{
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.video_canvas_icon{
|
|
position: absolute;
|
|
top: 6%;
|
|
left: 1%;
|
|
width: 4%;
|
|
}
|
|
|
|
.title_bg{
|
|
width: 100%;
|
|
}
|
|
|
|
.video_canvas_text{
|
|
position: absolute;
|
|
width: 40%;
|
|
top: 9%;
|
|
left: 6%;
|
|
letter-spacing: 2px;
|
|
font-size: 1vw;
|
|
}
|
|
.bofangImage{
|
|
position:absolute;
|
|
}
|
|
.bofangImage1{
|
|
top: 292px;
|
|
left: 230px;
|
|
}
|
|
.bofangImage2{
|
|
top: 292px;
|
|
left: 70px;
|
|
}
|
|
.bofangImage3{
|
|
top:538px;
|
|
left: 70px;
|
|
}
|
|
.bofangImage4{
|
|
top: 538px;
|
|
left: 230px;
|
|
}
|
|
.bofangImage5{
|
|
top: 314px;
|
|
left: 356px;
|
|
}
|
|
.image{
|
|
position: absolute;
|
|
}
|
|
|
|
.image1{
|
|
left: 12px;
|
|
top: 280px;
|
|
transform: rotateZ(150deg);
|
|
width: 120px;
|
|
height: 150px;
|
|
}
|
|
.image2{
|
|
left: 120px;
|
|
top: 280px;
|
|
transform: rotateZ(-150deg);
|
|
width: 120px;
|
|
height: 150px;
|
|
}
|
|
.image3{
|
|
left: 10px;
|
|
top: 440px;
|
|
transform: rotateZ(30deg);
|
|
width: 120px;
|
|
height: 150px;
|
|
}
|
|
.image4{
|
|
left: 90px;
|
|
top: 440px;
|
|
transform: rotateZ(-30deg);
|
|
width: 120px;
|
|
height: 150px;
|
|
}
|
|
.image5{
|
|
left: 345px;
|
|
top: 310px;
|
|
}
|
|
.imageContet{
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 15px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.imageContet img{
|
|
width: 50px;
|
|
}
|
|
|
|
.imageContet2{
|
|
position: absolute;
|
|
bottom: -20px;
|
|
left: 190px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
video{
|
|
width: 100%;
|
|
height: 90%;
|
|
position: absolute;
|
|
top: 9%;
|
|
left: 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.pitchColor{
|
|
border: 1px solid chartreuse;
|
|
}
|
|
|
|
.remoteControl{
|
|
height: 92%;
|
|
position: relative;
|
|
width: 25%;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
.facility_control{
|
|
width: 100%;
|
|
height: 97%;
|
|
background: rgba(31, 46, 61, 1);
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.Controls{
|
|
height: 30%;
|
|
width: 54%;
|
|
position: relative;
|
|
}
|
|
.Controls>img{
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.Controls_bg1{
|
|
top: 6%;
|
|
width: 88%;
|
|
}
|
|
.Controls_bg2{
|
|
width: 100%;
|
|
}
|
|
.Controls_bg3{
|
|
top: 34%;
|
|
width: 28%;
|
|
}
|
|
.Controls_bg4{
|
|
top: 40%;
|
|
width: 15%;
|
|
}
|
|
|
|
.Controls_icon{
|
|
z-index: 5;
|
|
width: 10%;
|
|
}
|
|
|
|
.Controls_icon:hover{
|
|
cursor: pointer;
|
|
}
|
|
.Controls_icon1{
|
|
top: 10%;
|
|
width: 14% !important;
|
|
}
|
|
.Controls_icon2{
|
|
left: 26% !important;
|
|
top: 20%;
|
|
}
|
|
.Controls_icon3{
|
|
left: 14% !important;
|
|
top: 40%;
|
|
}
|
|
.Controls_icon4{
|
|
left: 26% !important;
|
|
top: 68%;
|
|
}
|
|
.Controls_icon5{
|
|
top: 82%;
|
|
width: 14% !important;
|
|
}
|
|
.Controls_icon6{
|
|
left: 75% !important;
|
|
top: 68%;
|
|
}
|
|
.Controls_icon7{
|
|
left: 86% !important;
|
|
top: 40%;
|
|
}
|
|
.Controls_icon8{
|
|
top: 21%;
|
|
left: 75% !important;
|
|
}
|
|
|
|
.control_btn{
|
|
width: 100%;
|
|
height: 5%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.control_btn>span{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.Zoom,.Location{
|
|
width: 16%;
|
|
height: 84%;
|
|
}
|
|
|
|
.square_small{
|
|
width: 44%;
|
|
height: 93%;
|
|
background: rgba(39,83,97,1);
|
|
border: 1px solid rgb(64, 229, 240);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.square_small>img{
|
|
width: 56%;
|
|
}
|
|
|
|
.subtract_left{
|
|
position: absolute;
|
|
right: 35%;
|
|
top: 23%;
|
|
width: 7%;
|
|
}
|
|
|
|
.add_right{
|
|
position: absolute;
|
|
right: 8%;
|
|
top: 23%;
|
|
width: 7%;
|
|
}
|
|
|
|
.add_right:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.presetting_list{
|
|
height: 54%;
|
|
width: 82%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.camera_speed{
|
|
top: 23% !important;
|
|
left: 72% !important;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.windshield{
|
|
width: 7%;
|
|
height: 78%;
|
|
align-items: center;
|
|
background: rgba(39, 83, 97, 1);
|
|
border: 1px solid rgb(64, 229, 240);
|
|
}
|
|
|
|
.windshield>img{
|
|
width: 68%;
|
|
}
|
|
|
|
.square_small:hover,.windshieldImage:hover,.subtract_left:hover,.add_right:hover{
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.rotate_speed{
|
|
width: 30%;
|
|
height: 78%;
|
|
background: rgba(39,83,97,1);
|
|
border: 1px solid rgb(64, 229, 240);
|
|
font-size: 0.8vw;
|
|
color: #40E5F0;
|
|
position: relative;
|
|
}
|
|
.rotate_speed>span{
|
|
left: 5%;
|
|
position: absolute;
|
|
top: 16%;
|
|
}
|
|
|
|
.list_title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #40E5F0;
|
|
}
|
|
|
|
.list_title>span{
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.list_title>span:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list_title>span>img{
|
|
margin-right: 6px;
|
|
width: 28%;
|
|
}
|
|
|
|
.list_content{
|
|
height: 88%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.list_content::-webkit-scrollbar,.pathTable2::-webkit-scrollbar,.pathTable3::-webkit-scrollbar{
|
|
background-color: rgba(0,0,0,0);
|
|
width: 5px;
|
|
}
|
|
|
|
.list_content::-webkit-scrollbar-thumb,.pathTable2::-webkit-scrollbar-thumb,.pathTable3::-webkit-scrollbar-thumb{
|
|
background-color: #40455A;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.list_content>ul{
|
|
list-style: none;
|
|
padding: 0 0 0 4%;
|
|
margin: 0;
|
|
|
|
}
|
|
.list_content>ul>li{
|
|
height: 2.2vw;
|
|
color: #E7F5F6;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.local_name{
|
|
margin-left: 6%;
|
|
width: 57%;
|
|
display: inline-block;
|
|
white-space: nowrap; /* 禁止文本换行 */
|
|
overflow: hidden; /* 隐藏溢出部分 */
|
|
text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
|
|
}
|
|
|
|
.tourOption{
|
|
width:43%;
|
|
}
|
|
|
|
.caozuo{
|
|
width: 30%;
|
|
}
|
|
|
|
.caozuo,.tourOption{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.caozuo>img{
|
|
width: 24%;
|
|
}
|
|
.tourOption>img{
|
|
width: 18%;
|
|
}
|
|
|
|
.caozuo>img:hover,.tourOption>img,.addPreset>img:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pathName{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 11%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.addPreset{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 90px;
|
|
}
|
|
|
|
.addPreset>img{
|
|
width: 27%;
|
|
}
|
|
|
|
.tableTitle{
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.presetName{
|
|
width: 25%;
|
|
}
|
|
|
|
.presetSpeed{
|
|
width: 25%;
|
|
}
|
|
|
|
.pathSetting{
|
|
display: none;
|
|
height: 100%;
|
|
}
|
|
|
|
.presetTime{
|
|
width: 25%;
|
|
}
|
|
|
|
.option{
|
|
width: 10%;
|
|
}
|
|
|
|
.pathTable2,.pathTable3{
|
|
max-height: 60%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.pathTable3>table>tbody>tr>td{
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.quedin{
|
|
border: 1px solid rgb(64, 229, 240);
|
|
background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(39,83,97,1),rgba(39,83,97,1));
|
|
color: #40E5F0;
|
|
}
|
|
|
|
.quexiao{
|
|
border: 1px solid #767c97;
|
|
background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(176,189,212,0.2),rgba(176,189,212,0.2));
|
|
color: #c6d3ec;
|
|
}
|
|
|
|
.addImage{
|
|
height: 30px;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.addImage>img{
|
|
position: absolute;
|
|
right: 0;
|
|
width: 8%;
|
|
}
|
|
|
|
.addImage>img:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.setDiv{
|
|
width: 100%;
|
|
height: 2.4vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.speedInput,.pathIimeInput{
|
|
width: 70%;
|
|
height: 76%;
|
|
border-radius: 3px;
|
|
background-color: rgba(0,0,0,0);
|
|
color: #ffffff;
|
|
border: 1px solid #41476B;
|
|
padding: 0;
|
|
outline: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.zheGai{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgb(1,1,1,0.5);
|
|
z-index: 50;
|
|
display: none;
|
|
}
|
|
|
|
.oneKeyButton{
|
|
position: absolute;
|
|
right: 4%;
|
|
top: 2%;
|
|
width: 15%;
|
|
height: 5%;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.oneKeyButton>span{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.openDevice{
|
|
border: 1px solid #43e7f2;
|
|
color: #43e7f2;
|
|
background: linear-gradient(45deg, rgb(67,231,242,0.4),rgb(67,231,242,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(67,231,242,0.2),rgb(67,231,242,0.4)),
|
|
linear-gradient(135deg,rgb(67,231,242,0.4),rgb(67,231,242,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(67,231,242,0.2),rgb(67,231,242,0.4));
|
|
}
|
|
|
|
.closeDevice{
|
|
display: none;
|
|
border: 1px solid #767c97;
|
|
color: #c6d3ec;
|
|
background: linear-gradient(45deg, rgb(118,124,151,0.4),rgb(118,124,151,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(118,124,151,0.2),rgb(118,124,151,0.4)),
|
|
linear-gradient(135deg,rgb(118,124,151,0.4),rgb(118,124,151,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(118,124,151,0.2),rgb(118,124,151,0.4));
|
|
}
|
|
|
|
.oneKeyButton:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.patrolTask{
|
|
width: 40%;
|
|
height: 40%;
|
|
background-color: #222F3D;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 18%;
|
|
border: 1px solid #40486A;
|
|
display: none;
|
|
}
|
|
|
|
.taskOption{
|
|
height: 65%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-bottom: 4%;
|
|
}
|
|
|
|
.taskOption>div{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 60%;
|
|
height: 25%;
|
|
}
|
|
|
|
.taskListTitle{
|
|
width: 96%;
|
|
height: 8%;
|
|
border-bottom: 1px solid #40486A;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 2%;
|
|
font-size: 1.2vw;
|
|
}
|
|
|
|
.patroTitle{
|
|
width: 20%;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.taskInput{
|
|
width: 70%;
|
|
border: 1px solid #41476B;
|
|
height: 60%;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.presetButton,.presetButton1{
|
|
height: 12%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.presetButton>span,.presetButton1>span{
|
|
width: 10%;
|
|
height: 80%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.presetButton>span,.presetButton1>span:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.presetButton1{
|
|
margin-top: 6%;
|
|
}
|
|
|
|
.presetButton1>span{
|
|
width: 20% !important;
|
|
height: 72% !important;
|
|
}
|
|
|
|
.select_page1>option,.select_page>option{
|
|
background-color:rgba(31, 46, 61, 1) ;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.select_page1,.select_page{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0);
|
|
color: #ffffff;
|
|
border-radius: 3px;
|
|
outline: none;
|
|
font-size: 1vw;
|
|
text-align: center;
|
|
border: 1px solid #41476B ;
|
|
}
|
|
|
|
.select_page1{
|
|
border: none;
|
|
}
|
|
|
|
.select_page{
|
|
width: 75% !important;
|
|
height: 81% !important;
|
|
}
|
|
|
|
.quxiaoImage{
|
|
width: 2%;
|
|
}
|
|
|
|
.pathTitle{
|
|
font-size: 1vw !important;
|
|
}
|