From 96aa0c968156ec3277b6d7fd23d4e2724459c209 Mon Sep 17 00:00:00 2001
From: xuhongjie <1943105267@qq.com>
Date: Wed, 9 Apr 2025 14:24:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=9E=E8=A1=8C=E5=9C=BA=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/{底座@2x.png => flight-circle.png} | Bin
 .../images/{无人机@2x.png => uav-img.png}     | Bin
 src/views/components/map/panelRight.vue       | 148 +++++++++++++++---
 3 files changed, 127 insertions(+), 21 deletions(-)
 rename src/assets/images/{底座@2x.png => flight-circle.png} (100%)
 rename src/assets/images/{无人机@2x.png => uav-img.png} (100%)

diff --git a/src/assets/images/底座@2x.png b/src/assets/images/flight-circle.png
similarity index 100%
rename from src/assets/images/底座@2x.png
rename to src/assets/images/flight-circle.png
diff --git a/src/assets/images/无人机@2x.png b/src/assets/images/uav-img.png
similarity index 100%
rename from src/assets/images/无人机@2x.png
rename to src/assets/images/uav-img.png
diff --git a/src/views/components/map/panelRight.vue b/src/views/components/map/panelRight.vue
index 62e6993..10f2902 100644
--- a/src/views/components/map/panelRight.vue
+++ b/src/views/components/map/panelRight.vue
@@ -54,12 +54,33 @@
         </div>
       </div>
     </view-title>
-    <view-title height="calc(59% / 2 )" title="飞行场景"></view-title>
+    <view-title height="calc(59% / 2 )" title="飞行场景" >
+      <div class="flight-circle">
+        <div class="uav-img"></div>
+        <div
+          v-for="(item, index) in list"
+          :key="index"
+           :class="['section-object-item', item.className]"
+        >
+        {{item.name}}
+    </div>
+      </div>
+     
+    </view-title>
   </div>
 </template>
 
 <script setup>
 import { ViewTitle } from "@/views/components/map";
+
+const list = [
+  { name: "市容环卫场景应用", className: "item1" },
+  { name: "违章搭建场景应用", className: "item2" },
+  { name: "应急救灾场景应用", className: "item3" },
+  { name: "森林防火场景应用", className: "item4" },
+  { name: "依林值保场景应用", className: "item5" },
+  { name: "测绘勘察场景应用", className: "item6" },
+];
 </script>
 
 <style lang="scss" scoped>
@@ -90,27 +111,27 @@ import { ViewTitle } from "@/views/components/map";
     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;
+.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;
-    }
+  .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;
@@ -141,4 +162,89 @@ color: #D2F3FF;
     }
   }
 }
+
+.flight-circle {
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  width: 350px;
+  height: 149px;
+  background: url("../../../assets/images/flight-circle.png") no-repeat center;
+  background-size: 100% 100%;
+
+ 
+  margin: 0;
+    .uav-img{
+        position: absolute;
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 161px;
+        height: 131px;
+        background: url("../../../assets/images/uav-img.png") no-repeat center;
+        background-size: 100% 100%;
+    }
+  .section-object-item {
+      position: absolute;
+      width: 65px;
+      height: 30px;
+     
+font-size: 14px;
+color: #FFFFFF;
+font-weight: 400;
+
+text-shadow: 2px 0px 2px #020D21;
+  }
+}
+
+//-------------------旋转动画---------------
+.item1 {
+  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
+    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
+    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
+}
+.item2 {
+  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
+    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
+    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
+}
+.item3 {
+  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
+    animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
+    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
+}
+.item4 {
+  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
+    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
+    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
+}
+.item5 {
+  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
+    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
+    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
+}
+.item6 {
+  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
+    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
+    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
+}
+@keyframes animX {
+  0% {
+    left: 0px;
+  }
+  100% {
+    left: 360px;
+  }
+}
+@keyframes animY {
+  0% {
+    top: -40px;
+  }
+  100% {
+    top: 149px;
+  }
+}
+@keyframes scale {
+}
 </style>