usky-web-portal/src/components/layout/header.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useStore  } from 'vuex'
import { useRoute } from "vue-router"
const store = useStore()
const route = useRoute()
const currentPagePath = ref(route.path)//当前页面路径
const mobilelistboolean = ref(false)
if(route.path.indexOf("_")){
    currentPagePath.value = route.path.split("_")[0]
}
const pathTemplateQuery = ref()//页面模版复用参数
if(route.query && route.query.dup){
    pathTemplateQuery.value = route.query.dup
}

function mobileIconClick(){
    mobilelistboolean.value = !mobilelistboolean.value
}
function handleOpen(){

}
function handleClose(){

}
function dialogPersona(){
    store.commit("setDialogPersonalStatus",true)
}
if(typeof window !== 'undefined' && typeof window.globalThis.addEventListener === 'function') {
    globalThis.addEventListener('scroll', function() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var element:any = document.getElementById("scroll-up")
        var stickyHeader:any = document.getElementsByClassName("sticky-header")[0]
        if(scrollTop > 770){
            element.style.opacity = 1
        }else{
            element.style.opacity = 0
        }
        if(scrollTop > 110){
            stickyHeader.classList.add("sticky")
        }else{
            stickyHeader.classList.remove("sticky")
        }
    });
}

</script>
<template>
        <header class="header-absolute sticky-header">
            <div class="custom-container-one">
                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
                    <div class="logo">
                        <a href="/"><img src="@/assets/img/logo-white.png" alt="uskylogo"></a>
                    </div>
                    <div class="d-flex align-items-center ">
                        <nav class="main-menu">
                            <div class="menu-items">
                                <ul v-if="store.state.menuList.length>0">
                                    <li v-for="item in store.state.menuList" :key="item.id" 
                                    :class="item.sname ?  `${currentPagePath}?dup=${item.sname}` ==   `${item.path}?dup=${item.sname}`  &&  pathTemplateQuery ? 'active' : ' '  : currentPagePath == item.path  &&  !pathTemplateQuery ? 'active' : ' ' "
                                    >
                                        <a  :href="item.sname ? `${item.path}?dup=${item.sname}` : item.path
                                            ">{{item.categoryName}}</a>
                                            <ul class="submenu">
                                                <li v-if="item.children" v-for="children in item.children" :key="children.id">
                                                    <a  :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${children.id}&isUrlId=1` : `${item.path}?categoryid=${children.id}&isUrlId=1` "> 
                                                        <span style="font-weight:bold;margin-right:10px">·</span>
                                                        {{children.categoryName}}
                                                    </a>
                                                </li>
                                            </ul>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                        <div class="apply-expre" v-if="store.state.menuList.length>0" @click="dialogPersona()">申请体验</div>
                    </div>
                </div>
                <div class="mobile-menu mean-container mobileIcon">
                    <div class="mean-bar">
                        <a href="#nav"  @click="mobileIconClick" class="meanmenu-reveal"
                            style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;">
                            <span></span><span></span><span></span>
                        </a>
                    </div>
                </div>
                <el-row class="tac mobileMenuBox"  :class="[mobilelistboolean?'active':'']" v-if="mobilelistboolean">
                    <el-col :span="24">
                        <el-menu active-text-color="#ffd04b" background-color="#0c1923" class="el-menu-vertical-demo"
                            default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
                            <template v-for="item in store.state.menuList" :key="item.id">
                                <el-sub-menu :index="item.id" v-if="item.children.length>0">
                                    <template #title>
                                        <location />
                                        <span> 
                                            <a  :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${item.id}&isUrlId=1` : `${item.path}?categoryid=${item.id}&isUrlId=1` "> 
                                                {{item.categoryName}}
                                            </a>
                                        </span>
                                    </template>
                                    <el-menu-item-group title=""  v-for="aa in item.children" :key="aa.id">
                                        <el-menu-item :index="item.id+'-'+aa.id">
                                            <a  :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${aa.id}&isUrlId=1` : `${item.path}?categoryid=${aa.id}&isUrlId=1` "> 
                                                <span style="font-weight:bold;margin-right:10px">·</span>{{aa.categoryName}}
                                            </a>
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>

                                <el-menu-item v-else :index="item.index" >
                                    <icon-menu />
                                    <span>
                                        <a style="color:#fff" :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${item.id}&isUrlId=1` : `${item.path}?categoryid=${item.id}&isUrlId=1` "> 
                                            {{item.categoryName}}
                                        </a>
                                    </span>
                                </el-menu-item>
                            </template>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>
        </header>
</template>
<style lang="scss" scoped>

</style>