industry-database/src/views/c-cpns/VisualizationBottom.vue

<template>
  <div id="visualizationBottom">
    <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",
  setup(){
    let bottomList = ref([
      {
        id:"01",
        name:"mainPage",
        chosen:false,
        label:"过程库"
      },
      {
        id:"02",
        name:"houseBuilding",
        chosen:true,
        label:"现势库"
      },
      {
        id:"03",
        name:"municipalFacilities",
        chosen:false,
        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 {
      changePath,
      bottomList,
      imgUrl
    }
  }
}
</script>

<style scoped lang="scss">
#visualizationBottom{
  width: 1400px;
  height: 67px;
  position: absolute;
  bottom: 0;
  left: 286px;
  z-index: 2;
  background: url("../../assets/imgs/dbbj.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  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>