56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<template>
|
|
<!-- PC端 -->
|
|
<div class="w-full bg-black h-[300px] py-5 hidden-sm-and-down">
|
|
<div class="xl:w-screen-xl flex justify-between m-auto">
|
|
<template v-for="(item,index) in subMenu">
|
|
<div class="item">
|
|
<div class="text-base text-gray-400 hover:text-gray-200 py-3 font-bold">{{ item.title }}</div>
|
|
<div class="sub-menu flex flex-col">
|
|
<template v-for="(sub,subIndex) in item.children">
|
|
<nuxt-link :to="navTo(sub)" class="py-1 text-sm"><span class="text-gray-400 hover:text-gray-200">{{ sub.title }}</span></nuxt-link>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-col text-base">
|
|
<p class="text-base text-gray-400 py-2 font-bold">微信公众号</p>
|
|
<el-avatar :src="config.wxQrcode" shape="square" :size="120" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 移动端 -->
|
|
<el-collapse v-model="activeNames" accordion class="hidden-sm-and-up my-collapse">
|
|
<template v-for="(item,index) in subMenu">
|
|
<el-collapse-item :title="item.title" :name="index">
|
|
<template v-if="item.children">
|
|
<template v-for="sub in item.children">
|
|
<nuxt-link :to="sub.path" class="block cursor-pointer text-gray-600 hover:text-gray-900 py-0.5">
|
|
<span class="px-4">{{ sub.title }}</span>
|
|
</nuxt-link>
|
|
</template>
|
|
</template>
|
|
</el-collapse-item>
|
|
</template>
|
|
</el-collapse>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {useConfigInfo, useSubMenu} from "~/composables/configState";
|
|
const subMenu = useSubMenu();
|
|
const config = useConfigInfo();
|
|
const activeNames = ref(['1'])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.my-collapse{
|
|
.el-collapse-item__header{
|
|
background-color: transparent !important;
|
|
}
|
|
.el-collapse-item__wrap{
|
|
background-color: transparent !important;
|
|
}
|
|
.el-collapse-item{
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
</style>
|