导航栏
This commit is contained in:
zengmingjie
parent
f8fe6814d9
commit
9898cd5bde
|
|
@ -222,7 +222,7 @@ body {
|
|||
}
|
||||
}
|
||||
.left-sidebar {
|
||||
width: 18%;
|
||||
width: 31%;
|
||||
height: calc(100% - 90px);
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
|
|
@ -232,9 +232,9 @@ body {
|
|||
margin: 0;
|
||||
padding: 0 40px;
|
||||
.stats {
|
||||
width: 100%;
|
||||
width: 60%;
|
||||
height: 100px;
|
||||
margin-top: 15%;
|
||||
margin-top: 5%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
|
@ -274,25 +274,27 @@ body {
|
|||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
height: calc(75% - 40px);
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
li {
|
||||
width: 90%;
|
||||
height: 60px;
|
||||
width: 95%;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
background: url(../img/uavBackfff.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
padding: 5px;
|
||||
color: #0144ef;
|
||||
margin-left: 2%;
|
||||
margin-top: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
.details-one {
|
||||
width: 100%;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: url(../img/uavBackfff.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.top {
|
||||
width: 98%;
|
||||
height: 50%;
|
||||
|
|
@ -350,11 +352,15 @@ body {
|
|||
}
|
||||
}
|
||||
.details-all {
|
||||
width: 100%;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: url(../img/uavBackfff-big.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.top {
|
||||
width: 98%;
|
||||
height: 10%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-left: 5%;
|
||||
|
|
@ -369,7 +375,7 @@ body {
|
|||
text-align: center;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 55%;
|
||||
top: 60%;
|
||||
transform: translateY(-50%);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
|
@ -389,15 +395,19 @@ body {
|
|||
margin-left: 20px;
|
||||
.color-ef {
|
||||
color: #0144ef;
|
||||
font-size: 14px;
|
||||
font-size: 1.09vw;
|
||||
}
|
||||
.text-fff {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-size: 1.09vw;
|
||||
}
|
||||
.text-fff-time {
|
||||
color: #000;
|
||||
font-size: 1vw;
|
||||
}
|
||||
.content-top {
|
||||
width: calc(100% - 10px);
|
||||
height: 8%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
|
@ -411,7 +421,7 @@ body {
|
|||
}
|
||||
.content-serial {
|
||||
width: 100%;
|
||||
height: 8%;
|
||||
height: 7%;
|
||||
text-align: left;
|
||||
.text-fff {
|
||||
// 超出隐藏
|
||||
|
|
@ -420,7 +430,7 @@ body {
|
|||
}
|
||||
.color-ef-fw {
|
||||
color: #0144ef;
|
||||
font-size: 14px;
|
||||
font-size: 1.09vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
.content-potions {
|
||||
|
|
@ -440,11 +450,11 @@ body {
|
|||
align-items: center;
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: 1.09vw;
|
||||
}
|
||||
.characters {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: 1.09vw;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
|
@ -461,38 +471,80 @@ body {
|
|||
align-items: center;
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: 1.09vw;
|
||||
}
|
||||
.characters {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: 1.09vw;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-text1 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.content-fs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
.content-fs-lon {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
.content-fs-heig {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
width: 25%;
|
||||
font-size: 1.09vw;
|
||||
}
|
||||
.characters {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
width: 50%;
|
||||
font-size: 1.09vw;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: 1.09vw;
|
||||
}
|
||||
.characters {
|
||||
width: 100%;
|
||||
font-size: 1.09vw;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
width: calc(100% - 20px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.el-button--primary {
|
||||
background-color: #0144ef;
|
||||
border-color: #0144ef;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigation-content {
|
||||
width: 140px;
|
||||
height: 244px;
|
||||
background: url(../img/uavBackfff-big.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,7 @@
|
|||
:key="index"
|
||||
@click="handleDroneClick(drone)"
|
||||
:style="{
|
||||
height: drone.detailsShow ? '60px' : '330px',
|
||||
backgroundImage: drone.detailsShow
|
||||
? `url(${require('@/assets/img/uavBackfff.png')})`
|
||||
: `url(${require('@/assets/img/uavBackfff-big.png')})`,
|
||||
height: drone.detailsShow ? '60px' : '372px',
|
||||
padding: 0
|
||||
}"
|
||||
>
|
||||
|
|
@ -76,12 +73,12 @@
|
|||
</div>
|
||||
<div class="content-serial">
|
||||
<span class="color-ef"> 更新时间：</span>
|
||||
<span class="text-fff">2025.6.15 21:12:43</span>
|
||||
<span class="text-fff-time">2025.6.15 21:12:43</span>
|
||||
</div>
|
||||
<div class="content-serial">
|
||||
<span class="color-ef-fw">无人机方位</span>
|
||||
</div>
|
||||
<div class="content-serial" style="height: 25%">
|
||||
<div class="content-serial" style="height: 22%">
|
||||
<div class="content-potions">
|
||||
<div class="content-potions-lon">
|
||||
<p class="text">经纬度：</p>
|
||||
|
|
@ -104,28 +101,33 @@
|
|||
<div class="content-serial">
|
||||
<span class="color-ef-fw">飞手方位</span>
|
||||
</div>
|
||||
<div class="content-serial" style="height: 25%">
|
||||
<div class="content-potions">
|
||||
<div class="content-text1 content-potions-lon">
|
||||
<div class="content-serial" style="height: 22%">
|
||||
<div class="content-fs">
|
||||
<div class="content-fs-lon">
|
||||
<p class="text">经纬度</p>
|
||||
<p class="characters">
|
||||
{{ drone.drone_lon }}, {{ drone.drone_lat }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-text1 content-potions-lat">
|
||||
<p class="text">高度</p>
|
||||
<div class="content-fs-heig">
|
||||
<p class="text">高度：</p>
|
||||
<p class="characters">{{ drone.height || 0 }}m</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-serial">
|
||||
<div class="content-serial" style="height: 10%">
|
||||
<div class="btns">
|
||||
<div class="btn-trust"></div>
|
||||
<div class="btn-navigation"></div>
|
||||
<div class="btn-trust">
|
||||
<el-button type="primary">信任</el-button>
|
||||
</div>
|
||||
<div class="btn-navigation">
|
||||
<el-button type="primary">导航</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-content" v-if="!drone.detailsShow"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -192,7 +194,55 @@ export default {
|
|||
BatchId: "123456789",
|
||||
DeviceId: "123456789",
|
||||
currTime: 15,
|
||||
detailsShow: false
|
||||
detailsShow: true
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
serial_number: "123456789",
|
||||
DeviceName: "设备名称",
|
||||
freq: "123.456GHz",
|
||||
device_type: "UAV",
|
||||
drone_lat: 30.592852,
|
||||
drone_lon: 104.060059,
|
||||
height: 100,
|
||||
alarmLevel: 1,
|
||||
times: "2021-01-01 12:00:00",
|
||||
BatchId: "123456789",
|
||||
DeviceId: "123456789",
|
||||
currTime: 15,
|
||||
detailsShow: true
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
serial_number: "123456789",
|
||||
DeviceName: "设备名称",
|
||||
freq: "123.456GHz",
|
||||
device_type: "UAV",
|
||||
drone_lat: 30.592852,
|
||||
drone_lon: 104.060059,
|
||||
height: 100,
|
||||
alarmLevel: 1,
|
||||
times: "2021-01-01 12:00:00",
|
||||
BatchId: "123456789",
|
||||
DeviceId: "123456789",
|
||||
currTime: 15,
|
||||
detailsShow: true
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
serial_number: "123456789",
|
||||
DeviceName: "设备名称",
|
||||
freq: "123.456GHz",
|
||||
device_type: "UAV",
|
||||
drone_lat: 30.592852,
|
||||
drone_lon: 104.060059,
|
||||
height: 100,
|
||||
alarmLevel: 1,
|
||||
times: "2021-01-01 12:00:00",
|
||||
BatchId: "123456789",
|
||||
DeviceId: "123456789",
|
||||
currTime: 15,
|
||||
detailsShow: true
|
||||
}
|
||||
],
|
||||
isContracted: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue