tradeScreen/src/components/header.vue

<template>
    <div class="headers">
        <div class="logo">
        </div>
        <div class="tab">
            <div class="tab-li">
                <img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
                    alt="">
                <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" :src="u('SYXZ')"
                    alt="">
            </div>
            <div class="tab-li">
                <img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
                    :src="u('SP')" alt="">
                <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
                    alt="">
            </div>
            <div class="tab-li">
                <img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
                    :src="u('SH')" alt="">
                <img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;"
                    :src="u('SHXZ')" alt="">
            </div>
            <div class="tab-li">
                <img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;"
                    :src="u('DD')" alt="">
                <img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('DDXZ')"
                    alt="">

            </div>
            <div class="tab-li">
                <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
                    :src="u('CW')" alt="">
                <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('CWXZ')"
                    alt="">

            </div>
        </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/LOGO.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;
        height: 100%;
        // background-color: white;

        .tab-li {
            width: 8vw;
            border-left: 1px solid #4AB9D0;
            text-align: center;
            cursor: pointer;
            height: 1.5vh;
            position: relative;
            // background-color: red;

            .tab-img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: (translate(-50%, -50%));

            }
        }
    }

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