完成适配移动端

components/AppFooter/AppFooter.vue

@@ -1,12 +1,15 @@
 <template>
 
-
+  <!-- 下单定制 -->
+  <Customized />
   <!-- 底部菜单 -->
   <SubMenu />
   <!-- 版权信息 -->
   <Copyright />
   <!-- 侧边工具栏 -->
   <ToolBar />
+  <!-- 底部菜单 -->
+  <TabBar />
 
 </template>
 
@@ -14,6 +17,9 @@
 import SubMenu from "~/components/AppFooter/SubMenu/SubMenu.vue";
 import Copyright from "~/components/AppFooter/Copyright/Copyright.vue";
 import ToolBar from "~/components/AppFooter/ToolBar/ToolBar.vue";
+import TabBar from "~/components/AppFooter/TabBar/TabBar.vue";
+import Partners from "~/components/Index/Partners.vue";
+import Customized from "~/components/Index/Customized.vue";
 </script>
 
 <style lang="scss">

components/AppFooter/Link/Link.vue

@@ -5,16 +5,18 @@
       <nuxt-link :to="item.url" target="_blank" class="link:text-gray-400 visited:text-gray-400 hover:text-gray-200">{{ item.name }}</nuxt-link>
       <el-divider v-if="list.length-1 != index" direction="vertical" style="border-color: #9ca3af;" />
     </template>
+    <el-divider direction="vertical" style="border-color: #9ca3af;" />
+    <nuxt-link :to="`/links`" class="link:text-gray-400 visited:text-gray-400 hover:text-gray-200">更多...</nuxt-link>
   </el-space>
   <div class="border-b-solid bg-gray-700 border-1 mt-4 opacity-40 hidden-sm-and-down"></div>
 </template>
 <script setup lang="ts">
-import {listCmsLink} from "~/api/cms/cmsLink";
+import {listCmsLink, pageCmsLink} from "~/api/cms/cmsLink";
 import type {CmsLink} from "~/api/cms/cmsLink/model";
 
 const list = ref<CmsLink[]>([])
-listCmsLink({}).then(res => {
-  list.value = res;
+pageCmsLink({limit: 10}).then(res => {
+  list.value = res?.list || [];
 })
 </script>
 <style scoped lang="scss">

components/AppFooter/TabBar/TabBar.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="hidden-sm-and-up tab-bar flex justify-around items-center bg-white w-full fixed bottom-0 pt-2 pb-5 border-t border-gray-100 border-solid">
+      <template v-for="(item,index) in list">
+        <nuxt-link class="item flex flex-col justify-center items-center hover:text-green-700 block" @click="onLink(item,index)">
+          <component :is="item.icon" :style="{ fontSize: '18px',color: currentIndex == index ? '#15803DFF' : '#333333' }" />
+          <span :style="{ color: currentIndex == index ? '#15803DFF' : '#333333'}" class="py-1">{{ item.name }}</span>
+        </nuxt-link>
+      </template>
+    </div>
+  <div class="hidden-sm-and-up h-[80px]"></div>
+</template>
+
+<script lang="ts" setup>
+import { HomeOutlined, MessageOutlined, ShopOutlined, AppstoreOutlined, ReadOutlined } from '@ant-design/icons-vue';
+
+const currentIndex = ref<number>()
+
+const list = ref([
+  {
+    name: '首页',
+    icon: HomeOutlined,
+    path: '/'
+  },
+  {
+    name: '产品',
+    icon: AppstoreOutlined,
+    path: '/market'
+  },
+  {
+    name: '文档',
+    icon: ReadOutlined,
+    path: '/docs'
+  },
+  {
+    name: '店铺',
+    icon: ShopOutlined,
+    path: '/user'
+  }
+])
+
+const onLink = (item: any,index: number) => {
+  if(item.path == '/'){
+    // 回到页面顶部
+    window.scrollTo(0, 0)
+  }
+  currentIndex.value = index
+  navigateTo(item.path)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

components/AppFooter/ToolBar/ToolBar.vue

@@ -1,31 +1,45 @@
 <script setup lang="ts">
 import {useConfigInfo, useSetting} from "~/composables/configState";
+
 const config = useConfigInfo();
 const setting = useSetting()
 </script>
 
 <template>
-  <div id="toolbar" v-if="setting.floatTool" class="hidden-sm-and-down">
+
+  <div v-if="setting.floatTool" id="toolbar" class="hidden-sm-and-down">
     <ul>
-      <li><a :href="`http://wpa.qq.com/msgrd?v=3&amp;uin=${config.qqCode}&amp;site=qq&amp;menu=yes`" target="_blank">
-        <span class="icon-font icon-qq"></span>
-        <span class="wz">腾讯QQ</span>
-      </a></li>
-      <li><a href="javascript:;">
-        <span class="icon-font icon-phone">config.callPhone</span>
-        <span class="wz">{{ config.callPhone }}</span>
-      </a></li>
+<!--      <li>-->
+<!--        <a :href="`http://wpa.qq.com/msgrd?v=3&amp;uin=${config.qqCode}&amp;site=qq&amp;menu=yes`" target="_blank">-->
+<!--          <span class="icon-font icon-qq"></span>-->
+<!--          <span class="wz">腾讯QQ{{ config.qqCode }}</span>-->
+<!--        </a>-->
+<!--      </li>-->
+      <li>
+        <a href="#">
+          <span class="icon-font icon-qq"></span>
+          <span class="wz">{{ config.qqCode }}</span>
+        </a>
+      </li>
+      <li>
+        <a href="#">
+          <span class="icon-font icon-phone">config.callPhone</span>
+          <span class="wz">{{ config.callPhone }}</span>
+        </a>
+      </li>
       <li class="ewm">
         <span class="icon-font icon-ewm"></span>
-        <div class="ewm-box"><img :src="config.wxMpQrcode" alt="微信二维码" /></div>
+        <div class="ewm-box"><img :src="config.wxMpQrcode" alt="微信二维码"/></div>
+      </li>
+      <li>
+        <nuxt-link to="/order/3622">
+          <span class="icon-font icon-message"></span>
+          <span class="wz">在线留言</span>
+        </nuxt-link>
       </li>
-      <li><a href="/order/1003.html">
-        <span class="icon-font icon-message"></span>
-        <span class="wz">在线留言</span>
-      </a></li>
     </ul>
   </div>
-  <el-backtop :bottom="50" :right="25"></el-backtop>
+  <el-backtop :bottom="100" :right="25"></el-backtop>
 </template>
 
 <style scoped lang="scss">