平台介绍

src/views/components/map/panelRight.vue

@@ -1,7 +1,26 @@
 <template>
   <div class="panel-box panel-right">
-        <view-title height="calc(100% / 3)" title="平台介绍"></view-title>
+    <view-title height="41%" title="平台介绍">
-        <view-title height="calc(100% / 3)" 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" />
@@ -20,7 +39,7 @@
           <div class="row-name">飞行服务</div>
         </div>
       </div>
-            <div class="use-row" style="margin-top: 6px;">
+      <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>
@@ -33,45 +52,93 @@
           <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>
+    <view-title height="calc(59% / 2 )" title="飞行场景"></view-title>
   </div>
-  </template>
+</template>
 
-  <script setup>
+<script setup>
-  import {ViewTitle} from "@/views/components/map"
+import { ViewTitle } from "@/views/components/map";
-  </script>
+</script>
 
-  <style lang="scss"  scoped>
+<style lang="scss" scoped>
-    .use-row{
+.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%;
+    }
+    .cell-name{
+        font-size: 15px;
+color: #D2F3FF;
+    }
+}
+.use-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
-        .row-item{
+  .row-item {
     box-sizing: border-box;
     padding: 6px;
     width: 80px;
     height: 90px;
-            background: url('../../../assets/images/use-row-bg.png');
+    background: url("../../../assets/images/use-row-bg.png");
     background-size: 100% 100%;
-            .row-img{
+    .row-img {
       display: block;
       width: 100%;
       height: 80%;
     }
-            .row-name{
+    .row-name {
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
-                color: #FEFEFF;
+      color: #fefeff;
       height: 20%;
-                background: url('../../../assets/images/use-row-name.png');
+      background: url("../../../assets/images/use-row-name.png");
       background-size: 100% 100%;
     }
   }
-    }
+}
-  </style>
+</style>