feat：对接景区数据和监控视频

src/views/scenic/components/box-1.vue

@@ -67,29 +67,24 @@
       </div>
       <div class="flex align-center justify-between">
         <div>
-          <div class="cell">
-            <span class="tag tag--success">普通</span>
-            <p class="content">
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-            </p>
-          </div>
-          <div class="cell">
-            <span class="tag tag--error">普通</span>
-            <p class="content">
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-            </p>
-          </div>
-          <div class="cell">
-            <span class="tag tag--primary">普通</span>
-            <p class="content">
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-            </p>
-          </div>
+          <vue3-seamless-scroll
+            class="list"
+            :list="scenicStore.wordkOrderList"
+            :limitScrollNum="3"
+            :hover="true"
+            :step="0.2"
+            :wheel="true"
+            :isWatch="true"
+          >
+            <div class="cell" v-for="(item, index) in scenicStore.wordkOrderList" :key="index">
+              <span :class="`tag--${item.level}`">{{ item.level_text }}</span>
+              <p class="content">
+                {{ item.title }}
+              </p>
+            </div>
+          </vue3-seamless-scroll>
         </div>
-        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" />
+        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" @click="handleMore" />
       </div>
     </div>
   </div>
@@ -97,9 +92,16 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
+  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
   import { useScenicStore } from '@/stores/scenic'
+  import { useRouter } from 'vue-router'
 
+  const router = useRouter()
   const scenicStore = useScenicStore()
+
+  const handleMore = () => {
+    router.push('/workOrder')
+  }
 </script>
 
 <style scoped lang="scss">
@@ -205,6 +207,11 @@
           }
         }
       }
+      .list {
+        margin-top: vh(4);
+        height: vh(116);
+        overflow: hidden;
+      }
       .cell {
         display: flex;
         margin-left: vw(4);
@@ -216,30 +223,28 @@
           padding: 0 vw(16);
           font-weight: bold;
           font-size: vw(14);
+          color: #fff;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: vw(2);
-          &--success {
-            color: #02f9fa;
-            border: 1px solid #02f9fa;
-            box-shadow: inset 0 0 vw(8) 0 #0be1ab;
-          }
-          &--error {
-            color: #ee2c2c;
-            border: 1px solid #ee2c2c;
-            box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
-          }
-          &--primary {
-            color: #00aaff;
-            border: 1px solid #00aaff;
-            box-shadow: inset 0 0 vw(8) 0 #00aaff;
-          }
+        }
+        .tag--important {
+          @extend .tag;
+          background: #feae00;
+        }
+        .tag--warn {
+          @extend .tag;
+          background: #d9011b;
+        }
+        .tag--normal {
+          @extend .tag;
+          background: #2380fb;
         }
         .content {
           margin-left: vw(4);
           padding: 0 vw(10);
-          width: vw(660);
+          width: vw(760);
           height: vh(24);
           line-height: vh(24);
           white-space: nowrap;