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 :drawer="drawer" @childfn="fn" />
        </el-drawer>
        <div class="hleft">
            <div class="left-1">
                <img src="@/assets/1x/1x/source5.png" alt="menu" @click="openDrawer" class="menu">
                <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) => {
    e.stopPropagation()
    lang.value.showLang = !lang.value.showLang
}
onMounted(() => {
    document.documentElement.onclick = function () {
        if (!lang.value.showLang) return
        lang.value.showLang = false
    }
})
function fn(data: any) {
    drawer.value = data
}
onUnmounted(() => {
    document.documentElement.onclick = null
})
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
    .headerWrap {
        margin-left: 18px;
    }
}

.langWrap {
    //   position: absolute;
    // //   top:-20px;
    //   left: 260px;
    //   display: flex;
    //   align-items: end;
    position: relative;
    margin-left: 15px;

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

    .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: -110px;
    }
}

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

        @media screen and (max-width: 768px) {
            justify-content: flex-start;
        }

        .menu {
            display: none;

            @media screen and (max-width: 768px) {
                display: block;
                vertical-align: middle;
                width: 25px;
                height: 20px;

            }
        }

        .title {
            color: #2B4A60;
            font-size: 45px;
            font-weight: bolder;

            @media screen and (max-width: 768px) {
                font-size: 20px;
                transform: translateX(-60px);
                display: inline;
            }
        }

        .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);
                position: absolute;
                right: 50px;
            }
        }
    }

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