yanghongwei
/
ly-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

导航栏

This commit is contained in:
zengmingjie 2025-06-18 23:52:42 +08:00
parent f8fe6814d9
commit 9898cd5bde
2 changed files with 152 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/assets/css/index.scss
View File

@ -222,7 +222,7 @@ body {
} }
} }
.left-sidebar { .left-sidebar {
width: 18%; width: 31%;
height: calc(100% - 90px); height: calc(100% - 90px);
position: absolute; position: absolute;
top: 60px; top: 60px;
@ -232,9 +232,9 @@ body {
margin: 0; margin: 0;
padding: 0 40px; padding: 0 40px;
.stats { .stats {
width: 100%; width: 60%;
height: 100px; height: 100px;
margin-top: 15%; margin-top: 5%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@ -274,25 +274,27 @@ body {
} }
ul { ul {
width: 100%; width: 100%;
height: calc(75% - 40px); height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: auto; overflow: auto;
margin-top: 10px; margin-top: 10px;
li { li {
width: 90%; width: 95%;
height: 60px;
border-bottom: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
background: url(../img/uavBackfff.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
padding: 5px; padding: 5px;
color: #0144ef; color: #0144ef;
margin-left: 2%; margin-left: 2%;
margin-top: 3%;
position: relative;
display: flex;
.details-one { .details-one {
width: 100%; width: 60%;
height: 100%; height: 100%;
background: url(../img/uavBackfff.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
.top { .top {
width: 98%; width: 98%;
height: 50%; height: 50%;
@ -350,11 +352,15 @@ body {
} }
} }
.details-all { .details-all {
width: 100%; width: 60%;
height: 100%; height: 100%;
background: url(../img/uavBackfff-big.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
.top { .top {
width: 98%; width: 98%;
height: 10%; height: 30px;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-left: 5%; margin-left: 5%;
@ -369,7 +375,7 @@ body {
text-align: center; text-align: center;
font-size: 10px; font-size: 10px;
position: absolute; position: absolute;
top: 55%; top: 60%;
transform: translateY(-50%); transform: translateY(-50%);
line-height: 20px; line-height: 20px;
} }
@ -389,15 +395,19 @@ body {
margin-left: 20px; margin-left: 20px;
.color-ef { .color-ef {
color: #0144ef; color: #0144ef;
font-size: 14px; font-size: 1.09vw;
} }
.text-fff { .text-fff {
color: #000; color: #000;
font-size: 12px; font-size: 1.09vw;
}
.text-fff-time {
color: #000;
font-size: 1vw;
} }
.content-top { .content-top {
width: calc(100% - 10px); width: calc(100% - 10px);
height: 8%; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 400; font-weight: 400;
@ -411,7 +421,7 @@ body {
} }
.content-serial { .content-serial {
width: 100%; width: 100%;
height: 8%; height: 7%;
text-align: left; text-align: left;
.text-fff { .text-fff {
// 超出隐藏 // 超出隐藏
@ -420,7 +430,7 @@ body {
} }
.color-ef-fw { .color-ef-fw {
color: #0144ef; color: #0144ef;
font-size: 14px; font-size: 1.09vw;
font-weight: 600; font-weight: 600;
} }
.content-potions { .content-potions {
@ -440,11 +450,11 @@ body {
align-items: center; align-items: center;
.text { .text {
width: 100%; width: 100%;
font-size: 14px; font-size: 1.09vw;
} }
.characters { .characters {
width: 100%; width: 100%;
font-size: 14px; font-size: 1.09vw;
color: #000; color: #000;
} }
} }
@ -461,38 +471,80 @@ body {
align-items: center; align-items: center;
.text { .text {
width: 100%; width: 100%;
font-size: 14px; font-size: 1.09vw;
} }
.characters { .characters {
width: 100%; width: 100%;
font-size: 14px; font-size: 1.09vw;
color: #000; color: #000;
} }
} }
} }
.content-text1 { }
width: 50%; .content-fs {
height: 100%; width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
text-align: left;
.content-fs-lon {
width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
text-align: left; align-items: center;
p { }
padding: 0; .content-fs-heig {
margin: 0; width: 100%;
} display: flex;
flex-wrap: wrap;
align-items: center;
.text { .text {
width: 100%; width: 25%;
font-size: 14px; font-size: 1.09vw;
} }
.characters { .characters {
width: 100%; width: 50%;
font-size: 14px; 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;
}
} }
} }
} }

80
src/views/contentData/LeftSidebar/index.vue
View File

@ -15,10 +15,7 @@
:key="index" :key="index"
@click="handleDroneClick(drone)" @click="handleDroneClick(drone)"
:style="{ :style="{
height: drone.detailsShow ? '60px' : '330px', height: drone.detailsShow ? '60px' : '372px',
backgroundImage: drone.detailsShow
? `url(${require('@/assets/img/uavBackfff.png')})`
: `url(${require('@/assets/img/uavBackfff-big.png')})`,
padding: 0 padding: 0
}" }"
> >
@ -76,12 +73,12 @@
</div> </div>
<div class="content-serial"> <div class="content-serial">
<span class="color-ef"> 更新时间：</span> <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>
<div class="content-serial"> <div class="content-serial">
<span class="color-ef-fw">无人机方位</span> <span class="color-ef-fw">无人机方位</span>
</div> </div>
<div class="content-serial" style="height: 25%"> <div class="content-serial" style="height: 22%">
<div class="content-potions"> <div class="content-potions">
<div class="content-potions-lon"> <div class="content-potions-lon">
<p class="text">经纬度：</p> <p class="text">经纬度：</p>
@ -104,28 +101,33 @@
<div class="content-serial"> <div class="content-serial">
<span class="color-ef-fw">飞手方位</span> <span class="color-ef-fw">飞手方位</span>
</div> </div>
<div class="content-serial" style="height: 25%"> <div class="content-serial" style="height: 22%">
<div class="content-potions"> <div class="content-fs">
<div class="content-text1 content-potions-lon"> <div class="content-fs-lon">
<p class="text">经纬度</p> <p class="text">经纬度</p>
<p class="characters"> <p class="characters">
{{ drone.drone_lon }}, {{ drone.drone_lat }} {{ drone.drone_lon }}, {{ drone.drone_lat }}
</p> </p>
</div> </div>
<div class="content-text1 content-potions-lat"> <div class="content-fs-heig">
<p class="text">高度</p> <p class="text">高度：</p>
<p class="characters">{{ drone.height || 0 }}m</p> <p class="characters">{{ drone.height || 0 }}m</p>
</div> </div>
</div> </div>
</div> </div>
<div class="content-serial"> <div class="content-serial" style="height: 10%">
<div class="btns"> <div class="btns">
<div class="btn-trust"></div> <div class="btn-trust">
<div class="btn-navigation"></div> <el-button type="primary">信任</el-button>
</div>
<div class="btn-navigation">
<el-button type="primary">导航</el-button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="navigation-content" v-if="!drone.detailsShow"></div>
</li> </li>
</ul> </ul>
</div> </div>
@ -192,7 +194,55 @@ export default {
BatchId: "123456789", BatchId: "123456789",
DeviceId: "123456789", DeviceId: "123456789",
currTime: 15, 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, isContracted: false,