uskyq/assets/js/component/headerCom.js

export default {
    props: {
        todo: Object,
        currentone: String,
        mobilelistboolean: Boolean
    },
    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="todo">
                                    <li v-for="item in todo" :key="item.id" 
                                    :class="!item.sname ? currentone=='/template'+item.categoryStyle+'/' ? 'active' : '' :currentone == '/template'+item.categoryStyle+'/?dup=' + item.sname ? 'active' : ''" 
                                    
                                    >
                                        <a  v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
                                        <a  v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{item.categoryName}}</a>
                                        <ul class="submenu">
                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id">
                                            <a
                                                    :href="item.sname?'/template'+item.categoryStyle+'/?dup='+item.sname+'&categoryid='+aa.id+'&isUrlId=1'  : '/template'+item.categoryStyle+'/?categoryid='+aa.id+'&isUrlId=1'"> <span
                                                        style="font-weight:bold;margin-right:10px">·</span>
                                                    {{aa.categoryName}}</a></li>
                                        </ul>
                                    </li>

                                </ul>
                            </div>
                        </nav>


                        <div class="apply-expre" v-if="todo.length>0" @click="gogo()">申请体验
                        </div>


                        <el-row class="tac mobileMenuBox"  :class="[mobilelistboolean?'active':'']" >
                            <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 todo" :key="item.id">
                                        <el-sub-menu :index="item.id" v-if="item.children.length>0">
                                            <template #title>
                                                <location />
                                                <span> 
                                                    <a  v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
                                                    <a  v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{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?'/template'+item.categoryStyle+'/?dup='+item.sname+'&categoryid='+aa.id+'&isUrlId=1'  : '/template'+item.categoryStyle+'/?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" v-if="item.sname" :href="item.categoryStyle==1?'/?dup='+item.sname:'/template'+item.categoryStyle+'/?dup='+item.sname">{{item.categoryName}}</a>
                                                <a style="color:#fff" v-else :href="item.categoryStyle==1?'/':'/template'+item.categoryStyle+'/'">{{item.categoryName}}</a>
                                            </span>
                                        </el-menu-item>
                                    </template>
                                </el-menu>
                            </el-col>
                        </el-row>
                    </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>
                
            </div>
            
        </header>
  `,
    methods: {
        gogo() {
            this.$emit('data-event');
        },
        mobileIconClick() {
            this.$emit('mobile-icon-click');
        }
    }

}