首页和工单页，页面修改

package-lock.json

@@ -14,6 +14,7 @@
         "element-plus": "^2.9.5",
         "file-saver": "^2.0.5",
         "js-cookie": "^3.0.5",
+        "lottie-web": "^5.12.2",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
@@ -1481,6 +1482,12 @@
         "lodash-es": "*"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz",

package.json

@@ -17,6 +17,7 @@
     "element-plus": "^2.9.5",
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
+    "lottie-web": "^5.12.2",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

src/router/index.js

@@ -3,6 +3,9 @@ import Dashboard from '@/views/dashboard/Dashboard.vue';
 import ChildMap from '@/views/childMap/childMap.vue';
 import orderList from '@/views/orderList/orderList.vue';
 
+import ceshi from '@/views/ceshi.vue';
+
+
 const routes = [
   {
     path: '',
@@ -19,6 +22,11 @@ const routes = [
     name: 'OrderList',
     component: orderList,
   },
+  {
+    path: '/ceshi',
+    name: 'Ceshi',
+    component: ceshi,
+  },
   
 ];
 

src/views/ceshi.vue

@@ -0,0 +1,35 @@
+<template>
+    <div ref="lottieContainer" class="lottie-box"></div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import lottie from 'lottie-web'
+  import animationData from '@/assets/animations/huawu.json'
+
+  
+  const lottieContainer = ref(null)
+  let anim = null
+  
+  onMounted(() => {
+    anim = lottie.loadAnimation({
+      container: lottieContainer.value, // DOM容器
+      renderer: 'svg',                 // 渲染模式：svg/canvas/html
+      loop: true,                      // 循环播放
+      autoplay: true,                  // 自动播放
+      path: animationData    // JSON文件路径
+    })
+  })
+  
+  onBeforeUnmount(() => {
+    anim.destroy() // 组件卸载时销毁动画
+  })
+  </script>
+  
+  <style>
+  .lottie-box {
+    width: 300px;
+    height: 300px;
+    margin: 0 auto;
+  }
+  </style>

src/views/dashboard/cpns/map-chart.vue

@@ -2,7 +2,9 @@
   <div style="position: relative;width: 100%; height: 55vh;">
     <div class="btnCen">
       <div class="cenItem">
-        <div class="cenItemImg"></div>
+        <div class="cenItemImg">
+          <img :src="Flow2" width="80%" />
+        </div>
         <div class="cenItemCon">
           <div>12356话务总量</div>
           <div>
@@ -11,7 +13,9 @@
         </div>
       </div>
       <div class="cenItem">
-        <div class="cenItemImg"></div>
+        <div class="cenItemImg">
+          <img :src="Flow2" width="80%" />
+        </div>
         <div class="cenItemCon">
           <div>八院话务总量</div>
           <div>
@@ -22,7 +26,9 @@
         </div>
       </div>
       <div class="cenItem">
-        <div class="cenItemImg"></div>
+        <div class="cenItemImg">
+          <img :src="Flow2" width="80%" />
+        </div>
         <div class="cenItemCon">
           <div>九院话务总量</div>
           <div>
@@ -43,6 +49,7 @@
 import { onMounted, ref } from 'vue';
 import * as echarts from 'echarts';
 import { ZZmapData } from '@/utils/zhengzhou.js'
+import Flow2 from '@/assets/Flow2.gif'
 
 import { getPageListData } from '@/api/index.js'
 import { useRouter } from 'vue-router';
@@ -197,8 +204,8 @@ function setOptionHandle() {
       .cenItemImg {
         width: 28%;
         height: 5vh;
-        background: url(/src/assets/con_right.png) no-repeat;
-        background-size: 100% 100%;
+        // background: url(/src/assets/con_right.png) no-repeat;
+        // background-size: 100% 100%;
       }
       .cenItemCon{
         width: 72%;

src/views/dashboard/dashboard.vue

@@ -3,7 +3,7 @@
         <!-- 标题区域 -->
         <header class="dashboard-header">
             <!-- <h1>智慧城市数据大屏</h1> -->
-            <div class="title_text"></div>
+            <div class="child_title_text" style="font-size: 1.8vw; margin-top: 1vh;">郑州市12356心理援助热线大数据分析系统</div>
             <div class="time">{{ currentTime }}</div>
         </header>
 
@@ -432,6 +432,17 @@
 </script>
 
 <style lang="scss" scoped>
+    .child_title_text{
+        font-weight: bold;
+        font-size: 1.3vw;
+        background: linear-gradient(to bottom, #07B9FF, #F3FDFF);
+        /* 将背景裁剪到文字区域，-webkit- 前缀用于兼容 Safari 等浏览器 */
+        -webkit-background-clip: text;
+        background-clip: text;
+        /* 使文字颜色透明，显示出渐变背景，-webkit- 前缀用于兼容 Safari 等浏览器 */
+        -webkit-text-fill-color: transparent;
+        text-fill-color: transparent;
+    }
     .scroll-container{
         display: block;
         height: 9vh;

src/views/orderList/orderList.vue

@@ -3,14 +3,16 @@
         <!-- 标题区域 -->
         <header class="dashboard-header">
             <!-- <h1>智慧城市数据大屏</h1> -->
-            <div class="title_text"></div>
+            <div class="child_title_text" style="font-size: 1.8vw; margin-top: 1vh;">郑州市12356心理援助热线大数据分析系统</div>
             <div class="time">{{ currentTime }}</div>
         </header>
 
         <!-- 数据展示区域 -->
         <!-- <LineChart :values="values" :xLabels="xLabels" color="#00FF87" auto-resize theme="dark" @chart-click="handleChartClick" /> -->
         <div class="child-content">
-            <div class="child-title"></div>
+            <div class="child-title">
+                <div class="child_title_text">郑州市12356热线工单</div>
+            </div>
             <div class="child-warp">
                 <div class="center_item2_tit">
                     <span class="btn_tit" @click="goToPage('/')">郑州市</span> /
@@ -185,7 +187,17 @@ function goToPage(params) {
     gap: 1vh;
     background: url('@/assets/bj.png') no-repeat;
     background-size: 100% 100%;
-
+    .child_title_text{
+        font-weight: bold;
+        font-size: 1.3vw;
+        background: linear-gradient(to bottom, #07B9FF, #F3FDFF);
+        /* 将背景裁剪到文字区域，-webkit- 前缀用于兼容 Safari 等浏览器 */
+        -webkit-background-clip: text;
+        background-clip: text;
+        /* 使文字颜色透明，显示出渐变背景，-webkit- 前缀用于兼容 Safari 等浏览器 */
+        -webkit-text-fill-color: transparent;
+        text-fill-color: transparent;
+    }
     .dashboard-header {
         /* width: 89%; */
         background: url('@/assets/title_bg.png') no-repeat;
@@ -216,6 +228,9 @@ function goToPage(params) {
             height: 5vh;
             line-height: 5vh;
             margin-bottom: 2vh;
+            
+            
+            
             .title_text {
                 background: url('@/assets/title_text_bg.png') no-repeat;
                 background-size: 100% 100%;