disaster_web3/src/view/index/index.vue

<template>
    <!-- 底部导航栏 -->
    <div class="footet-bottom"> 
        <div class="leftline"></div>
        <div class="rightline"></div>
        <ul v-show="btnlistshow">
            <li class="fontcolor  "  v-for="(item, index) in listArray" :key="index" :class="{btnactive: index === currentIndex}"  @click="changeColor(index)"> <el-image :src="item.img" fit="contain"></el-image>{{item.name}}</li>
            <!-- <li class="fontcolor  btnactive" > <el-image :src="bt1" fit="contain"></el-image>灾情推演</li>
            <li class="fontcolor"> <el-image  :src="bt2" fit="contain"></el-image>路径判断</li>
            <li class="fontcolor"> <el-image  :src="bt3" fit="contain"></el-image>灾害对比</li> -->
        </ul>
    </div>

     </template>
   <script setup>
import { ref, onMounted, reactive, } from "vue";
import {RouterView,RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import bt1 from "@/assets/img/bt1.png"
import bt2 from "@/assets/img/bt2.png"
import bt3 from "@/assets/img/bt2.png"
let btnindex=ref(0);
let emit = defineEmits(['indexchange','hiadden' ])
let listArray = ref([
     { id: 0, name: "灾情推演",img:bt1 },
     { id: 1, name: "路径判断" ,img:bt2},
     { id: 2, name: "灾害对比" ,img:bt2},
   ]);
let currentIndex=ref(0);
let btnlistshow=ref(false);
const changeColor=(index)=>{
    btnindex.value=index;
    currentIndex.value = btnindex.value;
    emit("indexchange", btnindex.value);
    if(btnindex.value==0){
        emit("hiadden", 1);
    }else{
        emit("hiadden", 5);
    }
}
const showhadend=()=>{
    btnlistshow.value=true;
}
     defineExpose({showhadend,changeColor,btnindex});
   </script>
   <style  lang="scss" scoped>


   </style>