fini-ui/src/views/dashBoard/Header/index.vue

<template>
    <div class="headerWrap">
        <div class="left">
            <div class="left-1">
                    <img src="@/assets/1x/1x/source5.png" alt="menu"  @click="drawShow" class="menu">
                <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
            </div>
            <div class="left-right">
                <div class="search" @click="handlesearch">
                    <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
                </div>

                <div class="langWrap">
                    <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
                    <Lang ref="lang" class="lang" />
                </div>
            </div>


        </div>
        <div class="right">
            <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
            <li class="show">
                <span>Show Value</span>
                <el-switch v-model="value" size="small" style="--el-switch-on-color: #750000" />
            </li>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "XHeader",
};
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import i18n from '@/locales'
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import Lang from "@/views/login/components/Lang.vue";
import { conforms } from 'lodash';
const { proxy } = (getCurrentInstance() as any)
const value = ref(true)

const lang = ref()
const handleShowLang = (e: any) => {
    console.log(1111)
    e.stopPropagation()
    lang.value.showLang = !lang.value.showLang
}
onMounted(() => {
    document.documentElement.onclick = function () {
        if (!lang.value.showLang) return
        lang.value.showLang = false
    }
})
onUnmounted(() => {
    document.documentElement.onclick = null
})
const props = defineProps({
    time: [String, Number],
    openDrawer: {
        required: true,
        type: Function
    }
})
const handlesearch = () => {
    proxy.$router.push("/home")
}
const handleDrawer = (done: () => void) => {
    done();
}
const drawShow = () => {
    console.log(1111);
    props.openDrawer();
}
</script>

<style lang="scss" scoped>
.langWrap {
    //   position: absolute;
    // //   top:-20px;
    //   left: 260px;
    //   display: flex;
    //   align-items: end;
    position: relative;
    margin-left: 15px;
    .second {

        width: 32px;
        height: 36px;
        margin-top: 4px;

        &:hover {
            transform: scale(1.2);
        }
    }
}

.lang {
    position: absolute;
    top: 50px;
    left: -50px;

    @media screen and (max-width: 768px) {
        left: -120px;

    }
}

.left-right {
    display: flex;
    justify-content: space-between;
    width: 6vw;
    margin-right: 10rem;
}

.headerWrap {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
    transform: translateY(-20px);
    height: 50px;
    @media screen and (max-width: 768px) {
        flex-direction: column;
       
        .left-1 {
            display: flex;
            justify-content: space-between;
            width: 40vw;
            margin-left: 15px;
        }

        .left-right {
            display: flex;
            justify-content: space-between;
            width: 25vw;
            margin-right: 10px;
        }
    }

    .left {
        display: flex;
        position: relative;

        @media screen and (max-width: 768px) {
            justify-content: space-between;
            width: 100vw;
            align-items: center;
        }

        .menu {
            display: none;

            @media screen and (max-width: 768px) {
                display: block;
                // margin-top: 3px;
                vertical-align: middle;
            }
        }

        span {
            color: #2B4A60;
            font-size: 45px;
            font-weight: 900;

            @media screen and (max-width: 768px) {
                font-size: 25px;
                // margin-top: 4px;
            }
        }

        .search {
            background-color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 15px;
            margin-top: 6px;
            cursor: pointer;

            img {
                width: 18px;
                height: 18px;
            }
        }
    }

    .right {
        font-size: 20px;

        @media screen and (max-width: 768px) {
            // width: 100vw;
            color: red;
            margin-top: 10px;
             transform: translateX(-10px);
    
        }

        .time {
            color: #435F70;

            @media screen and (max-width: 768px) {
                float: right;
                font-size: 15px;
            }
        }

        .show {
            margin-top: 5px;
            text-align: right;
            color: #27485E;
            font-weight: 600;

            span {
                margin-right: 15px;
            }

            :deep(.el-switch__action) {
                background-color: #E86666;
            }

            @media screen and (max-width: 768px) {
                font-size: 15px;
                margin-top: 13px;
                transform: translateX(175px);
                
            }
        }
    }
}
</style>