uav-flight-control/src/views/components/map/panelLeft.vue

<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>