diff --git a/src/assets/images/state-bg.png b/src/assets/images/state-bg.png
new file mode 100644
index 0000000..fe5b581
Binary files /dev/null and b/src/assets/images/state-bg.png differ
diff --git a/src/assets/images/use-icon1.png b/src/assets/images/use-icon1.png
new file mode 100644
index 0000000..06bf0d1
Binary files /dev/null and b/src/assets/images/use-icon1.png differ
diff --git a/src/assets/images/use-icon2.png b/src/assets/images/use-icon2.png
new file mode 100644
index 0000000..31c72cf
Binary files /dev/null and b/src/assets/images/use-icon2.png differ
diff --git a/src/assets/images/use-icon3.png b/src/assets/images/use-icon3.png
new file mode 100644
index 0000000..fb1b9a2
Binary files /dev/null and b/src/assets/images/use-icon3.png differ
diff --git a/src/assets/images/use-icon4.png b/src/assets/images/use-icon4.png
new file mode 100644
index 0000000..52e3a73
Binary files /dev/null and b/src/assets/images/use-icon4.png differ
diff --git a/src/assets/images/use-icon5.png b/src/assets/images/use-icon5.png
new file mode 100644
index 0000000..f47d0b6
Binary files /dev/null and b/src/assets/images/use-icon5.png differ
diff --git a/src/assets/images/use-icon6.png b/src/assets/images/use-icon6.png
new file mode 100644
index 0000000..8840530
Binary files /dev/null and b/src/assets/images/use-icon6.png differ
diff --git a/src/assets/images/use-icon7.png b/src/assets/images/use-icon7.png
new file mode 100644
index 0000000..a4c5761
Binary files /dev/null and b/src/assets/images/use-icon7.png differ
diff --git a/src/assets/images/use-row-bg.png b/src/assets/images/use-row-bg.png
new file mode 100644
index 0000000..a733ac5
Binary files /dev/null and b/src/assets/images/use-row-bg.png differ
diff --git a/src/assets/images/use-row-name.png b/src/assets/images/use-row-name.png
new file mode 100644
index 0000000..2757a60
Binary files /dev/null and b/src/assets/images/use-row-name.png differ
diff --git a/src/assets/images/图标@2x.png b/src/assets/images/图标@2x.png
new file mode 100644
index 0000000..f80df70
Binary files /dev/null and b/src/assets/images/图标@2x.png differ
diff --git a/src/assets/images/底座@2x.png b/src/assets/images/底座@2x.png
new file mode 100644
index 0000000..1b1e1ef
Binary files /dev/null and b/src/assets/images/底座@2x.png differ
diff --git a/src/assets/images/无人机@2x.png b/src/assets/images/无人机@2x.png
new file mode 100644
index 0000000..08379d5
Binary files /dev/null and b/src/assets/images/无人机@2x.png differ
diff --git a/src/assets/images/框@2x.png b/src/assets/images/框@2x.png
new file mode 100644
index 0000000..933bb72
Binary files /dev/null and b/src/assets/images/框@2x.png differ
diff --git a/src/assets/images/椭圆背景@2x.png b/src/assets/images/椭圆背景@2x.png
new file mode 100644
index 0000000..c51630c
Binary files /dev/null and b/src/assets/images/椭圆背景@2x.png differ
diff --git a/src/assets/images/背景框@2x.png b/src/assets/images/背景框@2x.png
new file mode 100644
index 0000000..f46a24a
Binary files /dev/null and b/src/assets/images/背景框@2x.png differ
diff --git a/src/views/components/map/marsMap.vue b/src/views/components/map/marsMap.vue
index 84c0a64..a2063bf 100644
--- a/src/views/components/map/marsMap.vue
+++ b/src/views/components/map/marsMap.vue
@@ -370,7 +370,7 @@ const initRectangle = () => {
* 渲染所有点位
*/
const initMarker = () => {
- console.log(imageModules);
+
PointJson.map((item, index) => {
//绘制名字图标
lablePoint(item, index);
diff --git a/src/views/components/map/panelLeft.vue b/src/views/components/map/panelLeft.vue
index 6618989..d1a930b 100644
--- a/src/views/components/map/panelLeft.vue
+++ b/src/views/components/map/panelLeft.vue
@@ -21,22 +21,11 @@
<div class="contain-grid">
<div v-for="item in gridItems" :key="item.id" class="grid-item">
<div class="grid-item-content">{{ item.content }}</div>
- <div class="grid-item-footer">{{ item.footer }}</div>
+ <div class="grid-item-footer">{{ item.footer }} <span class="unit-name">{{ item.unit }}</span></div>
</div>
</div>
</view-title>
- <!-- 底部 -->
- <div class="contain-foot">
- <div class="itemone">
- <div><span>经度:</span>: <span>31</span></div>
- </div>
- <div class="itemone">
- <div><span>纬度:</span> <span>31</span></div>
- </div>
- <div class="itemtwo">
- <div><span>经度</span>: <span>31</span></div>
- </div>
- </div>
+
</div>
</template>
@@ -48,14 +37,14 @@ import { ModelCollada } from "vue-3d-model";
// 定义数据
const gridItems = [
- { id: 1, content: '-20', footer: '经度(°)' },
- { id: 2, content: '20', footer: '纬度(°)' },
- { id: 3, content: '20', footer: '高度(m)' },
- { id: 4, content: '20', footer: '偏航角(°)' },
- { id: 5, content: '20', footer: '水平速度(°)' },
- { id: 6, content: '20', footer: '垂直速度(m/s)' },
- { id: 7, content: '20', footer: '电量(%)' },
- { id: 8, content: '20', footer: '电池温度(°c)' },
+ { id: 1, content: '-20', footer: '经度',unit:'(°)' },
+ { id: 2, content: '20', footer: '纬度' ,unit:'(°)'},
+ { id: 3, content: '20', footer: '高度' ,unit:'(m)'},
+ { id: 4, content: '20', footer: '偏航角' ,unit:'(°)'},
+ { id: 5, content: '20', footer: '俯仰角',unit:'(°)' },
+ { id: 6, content: '20', footer: '滚转角',unit:'(°)' },
+ { id: 7, content: '20', footer: '速度',unit:'km/h' },
+ { id: 8, content: '20', footer: '电池电量',unit:''},
]
@@ -96,7 +85,7 @@ const lights = [
];
</script>
-<style scoped>
+<style lang="scss" scoped >
.panel-left {
display: flex;
flex-direction: column;
@@ -115,8 +104,21 @@ const lights = [
align-items: center;
justify-content: center;
flex-direction: column;
- /* background-color: #fff; */
- border:1px solid #ccc;
+ background: url('../../../assets/images/state-bg.png');
+ background-size: 100% 100%;
+ .grid-item-content{
+font-size: 30px;
+color: #fff;
+font-weight: bold;
+ }
+ .grid-item-footer{
+ font-size: 15px;
+ color: #FFFFFF;
+ }
+ .unit-name{
+ font-size: 13px;
+ color: #A2CBEA;
+ }
}
.contain-foot{
padding: .3rem 1rem;
diff --git a/src/views/components/map/panelRight.vue b/src/views/components/map/panelRight.vue
index 885d293..74d72a1 100644
--- a/src/views/components/map/panelRight.vue
+++ b/src/views/components/map/panelRight.vue
@@ -1,7 +1,41 @@
<template>
<div class="panel-box panel-right">
<view-title height="calc(100% / 3)" title="平台介绍"></view-title>
- <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>
@@ -10,8 +44,34 @@
import {ViewTitle} from "@/views/components/map"
</script>
- <style scoped>
- .panel-right{
- right: 46px;
- }
+ <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%;
+ }
+ }
+ }
</style>
\ No newline at end of file
diff --git a/src/views/map.vue b/src/views/map.vue
index aac066d..dac206d 100644
--- a/src/views/map.vue
+++ b/src/views/map.vue
@@ -2,7 +2,7 @@
<div>
<map-container>
<template #map>
- <mars-map></mars-map>
+ <!-- <mars-map></mars-map> -->
</template>
<template #left>
<panel-left></panel-left>