完成适配移动端

components/AppFooter/SubMenu/SubMenu.vue

@@ -1,11 +1,6 @@
-<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">
+  <!-- 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">
@@ -23,8 +18,38 @@ const config = useConfigInfo();
       </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 scoped lang="scss">
-
+<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>