|
|
@@ -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>
|
