diff --git a/src/views/components/map/panelLeft copy.vue b/src/views/components/map/panelLeft copy.vue
new file mode 100644
index 0000000..fc5fb54
--- /dev/null
+++ b/src/views/components/map/panelLeft copy.vue	
@@ -0,0 +1,94 @@
+<template>
+  <div class="panel-box panel-left">
+    <view-title height="50%" title="无人机信息">
+      <!-- <model-collada
+        :backgroundAlpha="0"
+        :rotation="{
+          x: - Math.PI / 2,
+          y: 0,
+          z: 0,
+        }"
+        src="../../../assets/images/uav-model.dae"
+      /> -->
+    </view-title>
+    <view-title height="50%" title="无人机实时状态">
+      <!-- 内容区 -->
+      <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>
+      </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>
+
+<script setup>
+import { ViewTitle } from "@/views/components/map";
+// 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)' },
+];
+</script>
+
+<style scoped>
+.panel-left {
+  display: flex;
+  flex-direction: column;
+}
+
+.contain-grid {
+  height: 100%;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.grid-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  /* background-color: #fff; */
+  border:1px solid #ccc;
+}
+.contain-foot{
+  padding: .3rem 1rem;
+  position: absolute;
+  width: 79%;
+  margin-left: -4.4%;
+  background-color: #05192A;
+  bottom: 2.4%;
+  display: flex;
+  justify-content: space-between;
+}
+.itemone{
+  display: flex;
+}
+.itemone span:first-child{
+  color:#BCDEFC 
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/map/panelLeft.vue b/src/views/components/map/panelLeft.vue
index 398acdb..fc5fb54 100644
--- a/src/views/components/map/panelLeft.vue
+++ b/src/views/components/map/panelLeft.vue
@@ -2,26 +2,93 @@
   <div class="panel-box panel-left">
     <view-title height="50%" title="无人机信息">
       <!-- <model-collada
-    :backgroundAlpha="0"
-    :rotation="{
-      x: - Math.PI / 2,
-      y: 0,
-      z: 0,
-    }"
-    src="../../../assets/images/uav-model.dae"
-  /> -->
+        :backgroundAlpha="0"
+        :rotation="{
+          x: - Math.PI / 2,
+          y: 0,
+          z: 0,
+        }"
+        src="../../../assets/images/uav-model.dae"
+      /> -->
     </view-title>
-    <view-title height="50%" title="无人机实时状态"></view-title>
+    <view-title height="50%" title="无人机实时状态">
+      <!-- 内容区 -->
+      <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>
+      </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>
 
 <script setup>
-import {ViewTitle} from "@/views/components/map"
+import { ViewTitle } from "@/views/components/map";
 // 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)' },
+];
 </script>
 
-<style  scoped>
-.panel-left{
-   
+<style scoped>
+.panel-left {
+  display: flex;
+  flex-direction: column;
+}
+
+.contain-grid {
+  height: 100%;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.grid-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  /* background-color: #fff; */
+  border:1px solid #ccc;
+}
+.contain-foot{
+  padding: .3rem 1rem;
+  position: absolute;
+  width: 79%;
+  margin-left: -4.4%;
+  background-color: #05192A;
+  bottom: 2.4%;
+  display: flex;
+  justify-content: space-between;
+}
+.itemone{
+  display: flex;
+}
+.itemone span:first-child{
+  color:#BCDEFC 
 }
 </style>
\ No newline at end of file