1

components/AppFooter/SubMenu/SubMenu.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- PC端 -->
+  <div
+       class="w-full bg-gray-500 h-[300px] py-5 hidden-sm-and-down">
+    <div class="xl:w-screen-xl flex justify-between m-auto">
+      <div class="flex flex-col pt-10">
+        <img :src="config.siteBottomLogo" style="width: 315px;"/>
+        <div class="flex">
+          <template v-for="(item,index) in subMenu">
+            <el-space class="item">
+              <nuxt-link :to="navTo(item)" class="text-base text-white hover:text-gray-200 py-3 link:text-white visited:text-white">{{ item.title }}</nuxt-link>
+              <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-white hover:text-gray-200">{{ sub.title }}</span></nuxt-link>
+                </template>
+              </div>
+            </el-space>
+          </template>
+        </div>
+      </div>
+      <div class="flex flex-col text-base">
+        <p class="text-base text-[#83adf6ff] font-bold">扫一扫关注公众号</p>
+        <el-avatar :src="config.wxQrcode" shape="square" :size="120"/>
+      </div>
+    </div>
+    <!-- 版权信息 -->
+    <Copyright />
+  </div>
+  <!-- 移动端 -->
+  <div class="hidden-sm-and-up">
+    <Copyright />
+  </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" @click="onSubMenu(item)">-->
+  <!--        <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";
+import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
+import {navigateTo} from "#imports";
+import Copyright from "~/components/AppFooter/Copyright/Copyright.vue";
+
+const subMenu = useSubMenu();
+const config = useConfigInfo();
+const activeNames = ref(['1'])
+
+const onSubMenu = (item: CmsNavigation) => {
+  if (item.children?.length === 0) {
+    return navigateTo({path: item.path})
+  }
+}
+</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>