飞行场景

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>