tradeScreen/src/components/header.vue

<template>
    <div class="headers">
        <div class="logo">
        </div>
        <div class="tab">
            <img v-if="show[0]" @click="showFn(0, '/')" class="tab-li" :src="u('SY')" alt="">
            <img v-else class="tab-li" @click="showFn(0, '/')" :src="u('SYXZ')" alt="">

            <img v-if="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SP.png" alt="">
            <img v-else="show[1]" @click="showFn(1, '/commodity')" class="tab-li" src="/static/index/SPXZ.png" alt="">

            <img v-if="show[2]" @click="showFn(2)" class="tab-li" src="/static/index/SH.png" alt="">
            <img v-else class="tab-li" @click="showFn(2)" src="/static/index/SHXZ.png" alt="">

            <img class="tab-li" @click="showFn(3)" v-if="show[3]" src="/static/index/DD.png" alt="">
            <img class="tab-li" @click="showFn(3)" v-else src="/static/index/DDxz.png" alt="">


            <img class="tab-li" @click="showFn(4)" v-if="show[4]" src="/static/index/CW.png" alt="">
            <img class="tab-li" @click="showFn(4)" v-else src="/static/index/CWXZ.png" alt="">
        </div>
        <div class="right">
            <div class="rigth-li" @click="choseTown = true">泸县</div>
            <Transition>
                <div class="address" v-if="choseTown">
                    <div class="address-li" @click="choseTownFn(1)"
                        v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>

                </div>
            </Transition>
            <div class="right-line">
                <span></span>
                <span></span>

            </div>

            <div class="rigth-li">15:39:25</div>
            <div class="right-line"> <span></span>
                <span></span>
            </div>

            <div class="rigth-li">2023.01.20</div>
            <div class="right-line">
                <span></span>
                <span></span>
            </div>

            <div class="rigth-li" @click="route.push('/')">关机</div>
            <div class="right-line">
                <span></span>
                <span></span>
            </div>

        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue"
import { useRouter } from 'vue-router'
const u = (name) => {
    return `/static/index/${name}.png`
}
const route = useRouter()
// 标题
const show = reactive([false, true, true, true, true])

const showFn = (index, src) => {
    show.forEach((item, i) => {
        show[i] = true
    })
    show[index] = !show[index]
    route.push(src)
}

// 选额镇
const choseTown = ref(false)

const choseTownFn = (id) => {
    choseTown.value = false
    route.push('/townDetail?id=' + id)
    console.log(route)
}





</script>
<style lang="scss" scoped>
.headers {
    display: flex;
    color: #B0C7D1;
    height: 6vh;
    align-items: center;
    justify-content: space-between;
    background-image: url('/static/index/TIT.png');
    background-color: #000C14;

    background-size: cover;

    .logo {
        width: 20vw;
        // margin-right: 30px;
        height: 40px;
        align-items: center;
    }

    .tab {
        display: flex;
        align-items: center;
        margin-left: 120px;
        width: 50vw;

        .tab-li {
            width: 13%;
            margin-right: 10px;
            cursor: pointer;
        }
    }

    .right {
        display: flex;
        font-size: 15px;
        margin-right: 30px;
        position: relative;

        .address {
            left: 1vw;
            top: 18px;
            position: absolute;
            width: 8vw;
            height: 18vh;
            background-color: #001E32;
            color: #C7DBE3;
            z-index: 9999;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 5px;

            .address-li {
                padding: 2px 5px;
                cursor: pointer;

                border-bottom: 0.1px solid #0E293C;
            }
        }

        .address::-webkit-scrollbar {
            width: 10px;
            background-color: #153041;
        }

        .address::-webkit-scrollbar-track {
            background-color: #153041;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #4AB9D0;
            border-radius: 5px;
        }

        .rigth-li {
            height: 15px;
            line-height: 15px;
            padding: 0 10px;
            cursor: pointer;
        }

        .right-line {
            width: 1px;
            height: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            span {
                width: 1px;
                height: 7px;
                background-color: #4BB9D0;

            }
        }
    }
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>