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="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
                    :src="u('DW')" alt=""> 泸县
            </div>
            <areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
            <div class="right-line">
                <span></span>
                <span></span>

            </div>

            <div class="rigth-li" id="time">15:33:26</div>
            <div class="right-line"> <span></span>
                <span></span>
            </div>

            <div class="rigth-li" id="days">2023-11-28</div>
            <div class="right-line">
                <span></span>
                <span></span>
            </div>

            <div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
                    alt=""></div>
            <div class="right-line">
                <span></span>
                <span></span>
            </div>

        </div>
    </div>
</template>
<script  setup>
import { ref, reactive, onMounted } from "vue"
import areaList from "./areaList.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.replace(src)
}

// 选额镇
const choseArea = ref(false)
// 关闭
const offAreaList = () => {
    choseArea.value = false
}

const out = () => {
    //@ts-ignore
    window.open("about:blank", "_top").close()

    //@ts-ignore
    // window.open('file:///C:\WINDOWS\system32\Shutdown.exe-r', 'File')
}


const updateTime = () => {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();


    var years = date.getFullYear()
    var month = date.getMonth()
    var days = date.getDate()
    // alert(days)

    // 添加前导零
    hours = (hours < 10 ? "0" : "") + hours;
    minutes = (minutes < 10 ? "0" : "") + minutes;
    seconds = (seconds < 10 ? "0" : "") + seconds;

    var currentTime = hours + ":" + minutes + ":" + seconds;
    var currentDays = years + '-' + (month >= 10 ? month + 1 : "0" + (month + 1)) + "-" + days
    // alert(days)

    // 将时间显示在指定的DOM元素中
    document.getElementById("time").innerHTML = currentTime;
    document.getElementById("days").innerHTML = currentDays;
}





onMounted(() => {
    setInterval(updateTime, 1000)
})
</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;
            display: flex;
            align-items: center;
        }

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