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

<template>
    <div class="headerWrap">
        <div class="left">
            <div class="left-1">
                <div class="menu">
                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="drawShow" >
                </div>
             <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;
    }
    .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);

    @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;
    }
}
        span {
            color: #2B4A60;
            font-size: 45px;
            font-weight: 900;
            @media screen and (max-width: 768px){
                font-size: 26px;
            }
        }

        .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;
                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(200px);
            }
        }
    }
}
</style>