suzhou-jichuang-lanhai
/
uav-flight-control
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

平台介绍

Browse Source
main
许宏杰 1 week ago
parent 5918f860f0
commit eb4e54d716
5 changed files with 142 additions and 75 deletions
Show Stats Download Patch File Download Diff File

0
src/assets/images/背景框@2x.png → src/assets/images/introduce-bg.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

0
src/assets/images/框@2x.png → src/assets/images/introduce-cell-bg.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

0
src/assets/images/图标@2x.png → src/assets/images/introduce-cell-icon.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
src/assets/images/椭圆背景@2x.png → src/assets/images/introduce-icon.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

217
src/views/components/map/panelRight.vue
Unescape View File

@ -1,77 +1,144 @@
<template>
<div class="panel-box panel-right">
<view-title height="calc(100% / 3)" title="平台介绍"></view-title>
<view-title height="calc(100% / 3)" title="特色应用">
<div class="use-row">
<div class="row-item">
<img src="@/assets/images/use-icon1.png" class="row-img" />
<div class="row-name">服务受理</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon2.png" class="row-img" />
<div class="row-name">算法配置</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon3.png" class="row-img" />
<div class="row-name">事件分拨</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon4.png" class="row-img" />
<div class="row-name">飞行服务</div>
</div>
</div>
<div class="use-row" style="margin-top: 6px;">
<div class="row-item">
<img src="@/assets/images/use-icon5.png" class="row-img" />
<div class="row-name">飞行控制</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon6.png" class="row-img" />
<div class="row-name">设备管理</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon7.png" class="row-img" />
<div class="row-name">数据共享</div>
</div>
</div>
</view-title>
<view-title height="calc(100% / 3)" title="飞行场景"></view-title>
</div>
</template>
<script setup>
import {ViewTitle} from "@/views/components/map"
</script>
<style lang="scss" scoped>
.use-row{
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
.row-item{
box-sizing: border-box;
padding: 6px;
width: 80px;
height: 90px;
background: url('../../../assets/images/use-row-bg.png');
background-size: 100% 100%;
.row-img{
display: block;
width: 100%;
height: 80%;
}
.row-name{
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #FEFEFF;
height: 20%;
background: url('../../../assets/images/use-row-name.png');
background-size: 100% 100%;
}
}
<div class="panel-box panel-right">
<view-title height="41%" title="平台介绍">
<div class="introduce">
<div class="introduce-icon"></div>
<div class="introduce-text">
借助新质生产力赋能城市治理，利用无人机可垂直起降、可悬停、操作灵活，可任意方向飞行的特性，快速发现问题，快速解决问题，让城市治
</div>
</div>
<div class="introduce-cell">
<div class="cell-icon"></div>
<div class="cell-name">提升城市巡查裹盖范围</div>
</div>
<div class="introduce-cell">
<div class="cell-icon"></div>
<div class="cell-name">提升城市巡查频率和机动性</div>
</div>
<div class="introduce-cell">
<div class="cell-icon"></div>
<div class="cell-name">减轻基层工作人员压力</div>
</div>
</view-title>
<view-title height="calc(59% / 2 )" title="特色应用">
<div class="use-row">
<div class="row-item">
<img src="@/assets/images/use-icon1.png" class="row-img" />
<div class="row-name">服务受理</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon2.png" class="row-img" />
<div class="row-name">算法配置</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon3.png" class="row-img" />
<div class="row-name">事件分拨</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon4.png" class="row-img" />
<div class="row-name">飞行服务</div>
</div>
</div>
<div class="use-row" style="margin-top: 6px">
<div class="row-item">
<img src="@/assets/images/use-icon5.png" class="row-img" />
<div class="row-name">飞行控制</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon6.png" class="row-img" />
<div class="row-name">设备管理</div>
</div>
<div class="row-item">
<img src="@/assets/images/use-icon7.png" class="row-img" />
<div class="row-name">数据共享</div>
</div>
</div>
</view-title>
<view-title height="calc(59% / 2 )" title="飞行场景"></view-title>
</div>
</template>
<script setup>
import { ViewTitle } from "@/views/components/map";
</script>
<style lang="scss" scoped>
.introduce {
position: relative;
height: 142px;
background: url("../../../assets/images/introduce-bg.png");
background-size: 100% 100%;
.introduce-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 119px;
width: 119px;
background: url("../../../assets/images/introduce-icon.png");
background-size: 100% 100%;
}
.introduce-text {
position: absolute;
left: 119px;
width: calc(100% - 132px);
height: 100%;
font-size: 14px;
color: #70d4fd;
display: flex;
align-items: center;
justify-content: center;
}
}
.introduce-cell{
display: flex;
align-items: center;
margin-top: 2px;
height: 50px;
background: url("../../../assets/images/introduce-cell-bg.png");
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 50px;
.cell-icon{
margin-right: 25px;
width: 19px;
height: 18px;
background: url("../../../assets/images/introduce-cell-icon.png");
background-size: 100% 100%;
}
</style>
.cell-name{
font-size: 15px;
color: #D2F3FF;
}
}
.use-row {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
.row-item {
box-sizing: border-box;
padding: 6px;
width: 80px;
height: 90px;
background: url("../../../assets/images/use-row-bg.png");
background-size: 100% 100%;
.row-img {
display: block;
width: 100%;
height: 80%;
}
.row-name {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fefeff;
height: 20%;
background: url("../../../assets/images/use-row-name.png");
background-size: 100% 100%;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save