zzy + 基本修改

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.7.0",
         "echarts": "^5.5.0",
+        "echarts-gl": "^2.0.9",
         "element-plus": "^2.7.3",
         "node-sass": "^9.0.0",
         "pinia": "^2.1.7",
@@ -1362,6 +1363,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -1543,6 +1549,18 @@
         "zrender": "5.5.0"
       }
     },
+    "node_modules/echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.7.3",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.3.tgz",
@@ -4967,6 +4985,11 @@
       "resolved": "https://registry.npmmirror.com/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -5111,6 +5134,15 @@
         "zrender": "5.5.0"
       }
     },
+    "echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
     "element-plus": {
       "version": "2.7.3",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.3.tgz",

src/router/index.js

@@ -9,7 +9,7 @@ const router = createRouter({
     routes:[
         {
             path:'/',
-            redirect:'/visualizationHome'
+            redirect:'/visualizationHome/mainPage'
         },
         {
             path:'/visualizationHome',

src/views/c-cpns/VisualizationBottom.vue

@@ -1,13 +1,18 @@
 <template>
   <div id="visualizationBottom">
-    <div v-for="item in bottomList">
+    <div class="middle-content">
-
+      <div  class="single" v-for="item in bottomList" :class="[item.chosen?'single_chosen':'']" :key="item.id">
+        <img v-if="item.chosen" :src="imgUrl(item)" alt="">
+        <img v-else :src="imgUrl(item)" alt="">
+        <span  @click="changePath(item)">{{item.label}}</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import {ref} from "vue";
+import router from "@/router/index.js";
 
 export default {
   name: "VisualizationBottom",
@@ -32,8 +37,26 @@ export default {
         label:"历史"
       }
     ])
+    function changePath(item){
+      bottomList.value.forEach((i)=>{
+        if(i.name == item.name){
+          i.chosen = true;
+        }else{
+          i.chosen = false;
+        }
+      })
+    }
+    function imgUrl(item){
+      if(item.chosen){
+        return new URL(`../../assets/imgs/${item.name}2.png`, import.meta.url).href
+      }else{
+        return new URL(`../../assets/imgs/${item.name}1.png`, import.meta.url).href
+      }
+    }
     return {
-      bottomList
+      changePath,
+      bottomList,
+      imgUrl
     }
   }
 }
@@ -48,9 +71,47 @@ export default {
   left: 286px;
   z-index: 2;
   background: url("../../assets/imgs/底部背景.png") no-repeat;
-  background-size: cover;
+  background-size: 100% 100%;
   display: flex;
-  justify-content: space-evenly;
+  justify-content: center;
   align-items: center;
+  .middle-content{
+    width: 700px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .single{
+      width: 163px;
+      height: 59px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span{
+        cursor: pointer;
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #BBCDE6;
+        opacity: 0.7;
+      }
+    }
+    .single_chosen{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-size: cover;
+      img{
+        padding-top: 10px;
+      }
+      span{
+        color: #BBCDE6;
+        opacity: 1;
+        background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
 }
 </style>