<script setup lang="ts">
import {useConfigInfo, useSubMenu} from "~/composables/configState";
const subMenu = useSubMenu();
const config = useConfigInfo();
</script>

<template>
  <div class="w-full bg-black h-[300px] py-5">
    <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>
</template>

<style scoped lang="scss">

</style>
