From eb4e54d7164a0429e3c94c60c76c4bcf05fe5ed0 Mon Sep 17 00:00:00 2001
From: xuhongjie <1943105267@qq.com>
Date: Wed, 9 Apr 2025 10:03:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B9=B3=E5=8F=B0=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{背景框@2x.png => introduce-bg.png}       | Bin
 .../{框@2x.png => introduce-cell-bg.png}      | Bin
 .../{图标@2x.png => introduce-cell-icon.png}  | Bin
 .../{椭圆背景@2x.png => introduce-icon.png}   | Bin
 src/views/components/map/panelRight.vue       | 217 ++++++++++++------
 5 files changed, 142 insertions(+), 75 deletions(-)
 rename src/assets/images/{背景框@2x.png => introduce-bg.png} (100%)
 rename src/assets/images/{框@2x.png => introduce-cell-bg.png} (100%)
 rename src/assets/images/{图标@2x.png => introduce-cell-icon.png} (100%)
 rename src/assets/images/{椭圆背景@2x.png => introduce-icon.png} (100%)

diff --git a/src/assets/images/背景框@2x.png b/src/assets/images/introduce-bg.png
similarity index 100%
rename from src/assets/images/背景框@2x.png
rename to src/assets/images/introduce-bg.png
diff --git a/src/assets/images/框@2x.png b/src/assets/images/introduce-cell-bg.png
similarity index 100%
rename from src/assets/images/框@2x.png
rename to src/assets/images/introduce-cell-bg.png
diff --git a/src/assets/images/图标@2x.png b/src/assets/images/introduce-cell-icon.png
similarity index 100%
rename from src/assets/images/图标@2x.png
rename to src/assets/images/introduce-cell-icon.png
diff --git a/src/assets/images/椭圆背景@2x.png b/src/assets/images/introduce-icon.png
similarity index 100%
rename from src/assets/images/椭圆背景@2x.png
rename to src/assets/images/introduce-icon.png
diff --git a/src/views/components/map/panelRight.vue b/src/views/components/map/panelRight.vue
index 74d72a1..62e6993 100644
--- a/src/views/components/map/panelRight.vue
+++ b/src/views/components/map/panelRight.vue
@@ -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>
\ No newline at end of file
+    .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>