fini-ui/src/views/IPO/components/IpoHeader.vue

<template>
    <div class="headerWrap">
        <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
            style="background-color: #1C3F56;" :with-header="false"  >
            <Drawer />
        </el-drawer>
        <div class="hleft">
            <div class="left-1">
                <div class="menu">
                    <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                </div>
            <div class="title">{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</div>
            </div>
            
            <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 class="downLoad">
            <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
            <img src="@/assets/1x/source3.png" alt="找不到图片">
        </div> -->
    </div>
</template>

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

<script lang="ts" setup>
import i18n from '@/locales'
import { getCurrentInstance ,onMounted,onUnmounted} from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { ref } from 'vue'
import Lang from "@/views/login/components/Lang.vue";
const lang = ref()
const drawer = ref(false)
const { proxy } = (getCurrentInstance() as any)
const handlesearch = ()=>{
    proxy.$router.push("/home")
}
const handleDrawer = (done: () => void) => {
    done();
}
const openDrawer = () => {
    drawer.value = true;
}
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
})
</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;
    }
.headerWrap {
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 768px){
       
        .left-1{
            display: flex;
            justify-content: space-between;
            width: 80vw;
        }
    }
    .hleft {
        display: flex;
        justify-content: space-between;
        width: fit-content;
         position: relative;
        .menu{
    display: none;
    @media screen and (max-width: 768px){
        display: block;
        
    }
}
        .title {
            color: #2B4A60;
            font-size: 45px;
            font-weight:bolder;
            @media screen and (max-width: 768px){
              font-size: 26rem;
              transform: translateX(-60rem);
            }
        }
        
        .search {
            margin-top: 5px;
            background-color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 15px;
            transform: translateY(5px);
            cursor: pointer;

            img {
                width: 18px;
                height: 18px;
            }
            @media screen and (max-width: 768px){
                transform: translateY(-0.5vh);
            }
        }
    }

    .downLoad {
        display: flex;
        height: 30px;
        align-items: center;
        .report {
            font-size: 28px;
            color: #1C3F56;
            margin-right: 10px;
        }

        img {
            width: 20px;
            margin-top: 2px;

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

    }
}
</style>