完成适配移动端

2025-02-22 22:11:19 +08:00
parent 98758e89e2
commit 1f79c93859
62 changed files with 549 additions and 2973 deletions
--- a/components/AppFooter/Copyright/Copyright.vue
+++ b/components/AppFooter/Copyright/Copyright.vue
@@ -5,12 +5,13 @@ const config = useConfigInfo();
 </script>

 <template>
-  <div class="w-full bg-black">
+  <!-- PC端 -->
+  <div class="w-full sm:bg-black hidden-sm-and-down">
    <div class="xl:w-screen-xl flex flex-col justify-between m-auto">
      <!-- 友情链接 -->
      <Link />
      <!-- 版权信息 -->
-      <div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex sm:flex-row flex-col-reverse sm:justify-between justify-center items-center sm:py-3 text-center text-sm">
+      <div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex flex-row sm:justify-between justify-center items-center sm:py-3 text-center text-sm">
        <div class="text-gray-400 sm:gap-xs leading-7 flex flex-col sm:flex-row">
          <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
          <nuxt-link to="https://beian.miit.gov.cn/" class="visited:text-gray-400 hover:text-gray-200" target="_blank"> <span>备案号：{{ config?.icpNo }}</span></nuxt-link>
@@ -21,6 +22,23 @@ const config = useConfigInfo();
      </div>
    </div>
  </div>
+  <!-- 移动端 -->
+  <div class="w-full sm:bg-black hidden-sm-and-up">
+    <div class="xl:w-screen-xl flex flex-col justify-between m-auto">
+      <!-- 友情链接 -->
+      <Link />
+      <!-- 版权信息 -->
+      <div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex flex-col sm:justify-between justify-center items-center py-3 text-center text-sm">
+        <div class="text-gray-400 sm:gap-xs leading-7 flex flex-col sm:flex-row">
+          <span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
+          <nuxt-link to="https://beian.miit.gov.cn/" class="visited:text-gray-400 hover:text-gray-200" target="_blank"> <span>备案号：{{ config?.icpNo }}</span></nuxt-link>
+        </div>
+        <div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-300 text-xs mt-5">
+          Powered by <a rel="nofollow" href="https://site.websoft.top" target="_blank" class="visited:text-gray-300 hover:text-gray-200 ml-1">云·企业官网</a>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

 <style scoped lang="scss">
--- a/components/AppFooter/Link/Link.vue
+++ b/components/AppFooter/Link/Link.vue
@@ -1,3 +1,13 @@
+<template>
+  <el-space class="text-gray-400 text-sm hidden-sm-and-down">
+    <span>友情链接：</span>
+    <template v-for="(item,index) in list" :key="index">
+      <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-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 type {CmsLink} from "~/api/cms/cmsLink/model";
@@ -7,18 +17,6 @@ listCmsLink({}).then(res => {
  list.value = res;
 })
 </script>
-
-<template>
-  <el-space class="text-gray-400 text-sm">
-    <span>友情链接：</span>
-    <template v-for="(item,index) in list" :key="index">
-      <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-space>
-  <div class="border-b-solid bg-gray-700 border-1 mt-4 opacity-40"></div>
-</template>
-
 <style scoped lang="scss">

 </style>
--- a/components/AppFooter/SubMenu/SubMenu.vue
+++ b/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>
--- a/components/AppFooter/ToolBar/ToolBar.vue
+++ b/components/AppFooter/ToolBar/ToolBar.vue
@@ -5,7 +5,7 @@ const setting = useSetting()
 </script>

 <template>
-  <div id="toolbar" v-if="setting.floatTool">
+  <div id="toolbar" v-if="setting.floatTool" 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>
--- a/components/AppHeader/AppHeader.vue
+++ b/components/AppHeader/AppHeader.vue
@@ -1,6 +1,6 @@
 <template>
  <!-- 头部组件 -->
-  <div class="shadow-sm fixed z-100 top-0 w-full bg-white bg-opacity-90">
+  <div class="sm:p-0 px-4 shadow-sm fixed z-100 top-0 w-full bg-white bg-opacity-90">
    <!-- 顶部通栏 -->
    <TopBar />
    <!-- 导航栏 -->
--- a/components/AppHeader/Login/Login.vue
+++ b/components/AppHeader/Login/Login.vue
@@ -1,12 +1,13 @@
 <template>
  <div class="fr clearfix flex items-center">
-    <div v-if="setting.searchBtn" class="fl mr-5">
+    <!-- PC端 -->
+    <div v-if="setting.searchBtn" class="fl mr-5 hidden-sm-and-down">
      <el-input v-model="keywords" :placeholder="`${$t('searchKeywords')}`" :suffix-icon="Search" @change="onSearch"/>
    </div>
    <template v-if="setting.loginBtn">
      <!-- 未登录 -->
      <div v-if="!token" class="lang flex justify-center text-center items-center">
-        <el-space>
+        <el-space class="hidden-sm-and-down">
          <nuxt-link to="/passport/login?type=register" type="text" class="text-sm text-gray-500">注册</nuxt-link>
          <el-divider direction="vertical"/>
          <nuxt-link to="/passport/login" type="text" class="text-sm text-gray-500">登录</nuxt-link>
@@ -43,16 +44,62 @@
          </el-space>
        </div>
      </div>
+      <!-- 移动端 -->
+      <div class="hidden-sm-and-up mx-7 sm:mx-0">
+        <div class="el-dropdown-link flex items-center" @click="drawer = true">
+          <el-avatar v-if="token" class="cursor-pointer" :src="user?.avatar" :size="30"/>
+          <el-icon v-else color="black" :size="24"><Fold /></el-icon>
+        </div>
+        <el-drawer
+          v-model="drawer"
+          :size="290"
+        >
+          <div id="menu">
+            <el-menu
+              currentIndex="/product"
+              :unique-opened="true"
+            >
+              <template v-for="(item,index) in navigations" :key="index">
+                <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
+                  <template #title><span>{{ item.title }}</span></template>
+                  <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
+                    <el-space>
+                      <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
+                      <a :href="navTo(sub)">{{ sub.title }}</a>
+                    </el-space>
+                  </el-menu-item>
+                </el-sub-menu>
+                <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
+              </template>
+            </el-menu>
+<!--            <div v-if="setting.searchBtn" class="search-tools flex justify-center p-4 mt-5">-->
+<!--              <el-input v-model="keywords" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>-->
+<!--            </div>-->
+<!--            <div v-if="setting.langBtn" class="lang flex justify-center text-center">-->
+<!--              <el-space>-->
+<!--                <a @click="onLang(`zh`)" class="text-sm text-gray-500">中文版</a>-->
+<!--                <el-divider direction="vertical" />-->
+<!--                <a @click="onLang(`en`)" class="text-sm text-gray-400">English</a>-->
+<!--              </el-space>-->
+<!--            </div>-->
+          </div>
+        </el-drawer>
+      </div>
    </template>
  </div>
 </template>
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
-import {useConfigInfo, useSetting} from "~/composables/configState";
+import { Search, Fold } from '@element-plus/icons-vue'
+import {useConfigInfo, useMenu, useSetting} from "~/composables/configState";
+import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
+import {listCmsLangLog} from "~/api/cms/cmsLangLog";
 const token = useToken();
 const user = useUser();
+const navigations = useMenu();
 const setting = useSetting();
 const keywords = ref<string>();
+const drawer = ref<boolean>(false);
+const langList = ref<CmsLangLog[]>([]);

 const onSearch = () => {
  navigateTo(`/search/${keywords.value || '关键词不能为空！'}`)
@@ -69,6 +116,16 @@ function handleCommand(command: string) {
  }
 }

+// TODO 读取国际化配置
+listCmsLangLog({}).then(list => {
+  langList.value = list;
+})
+
+const onLang = (lang: string) => {
+  navigateTo(`?lang=${lang}`)
+  drawer.value = false;
+}
+
 function logOut() {
  token.value = '';
  localStorage.clear();
@@ -76,5 +133,7 @@ function logOut() {
 }
 </script>
 <style scoped lang="scss">
-
+.el-menu{
+  border-right: none;
+}
 </style>
--- a/components/AppHeader/Logo/Logo.vue
+++ b/components/AppHeader/Logo/Logo.vue
@@ -1,6 +1,6 @@
 <template>
  <nuxt-link to="/" class="flex items-center cursor-pointer gap-sm mr-7" v-if="website">
-    <el-image v-if="website.websiteLogo || logo?.value" :style="`${logo?.style}`" :src="logo?.value || website?.websiteLogo" class=" rounded-sm rounded-sm w-[107px] h-[24px]"/>
+    <el-image v-if="website.websiteLogo || logo?.value" :style="`${logo?.style}`" :src="logo?.value || website?.websiteLogo" class="rounded-sm rounded-sm w-[107px] h-[24px] py-3 sm:py-0"/>
    <h4 v-else class="text-gray-700 text-xl font-bold" :style="`${logo?.style}`">{{ website?.websiteName }}</h4>
  </nuxt-link>
 </template>
--- a/components/AppHeader/Menu/Menu.vue
+++ b/components/AppHeader/Menu/Menu.vue
@@ -1,26 +1,7 @@
-<script setup lang="ts">
-import {navigateTo} from "#imports";
-
-const navigations = useMenu();
-import {useMenu} from "~/composables/configState";
-const handleSelect = (index: any,keyPath: string[]) => {
-  const split = index.split('-');
-  if(split.length == 1){
-    const item = navigations.value[index];
-    navigateTo(item)
-  }
-  if(split.length == 2){
-    const item = navigations.value[split[0]];
-    if(item.children){
-      const child = item.children[split[1]];
-      navigateTo(child.path)
-    }
-  }
-}
-</script>
-
 <template>
+  <!-- PC版菜单 -->
  <el-menu
+      class="hidden-sm-and-down"
      mode="horizontal"
      style="background-color: transparent;"
      active-text-color="#1b850c"
@@ -54,7 +35,27 @@ const handleSelect = (index: any,keyPath: string[]) => {
    </template>
  </el-menu>
 </template>
+<script setup lang="ts">
+import {navigateTo} from "#imports";
+import {useMenu} from "~/composables/configState";

+const navigations = useMenu();
+
+const handleSelect = (index: any,keyPath: string[]) => {
+  const split = index.split('-');
+  if(split.length == 1){
+    const item = navigations.value[index];
+    navigateTo(item)
+  }
+  if(split.length == 2){
+    const item = navigations.value[split[0]];
+    if(item.children){
+      const child = item.children[split[1]];
+      navigateTo(child.path)
+    }
+  }
+}
+</script>
 <style scoped lang="scss">
 .el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
--- a/components/MCmsProductList.vue
+++ b/components/MCmsProductList.vue
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import {detail} from "~/utils/common";
-import dayjs from "dayjs";
-
-const props = withDefaults(
-    defineProps<{
-      data?: any;
-    }>(),
-    {}
-);
-
-</script>
-
-<template>
-  <el-row :gutter="20">
-    <template v-for="(item,index) in data" key="index">
-      <el-col :span="24" class="my-3">
-        <div class="item p-2 border-1 border-gray-200 border-solid hover:border-blue-500">
-          <a :href="detail(item)" :title="item.title" class="img"><el-image :fit="`scale-down`" :src="item.image" :alt="item.title" /></a>
-          <h3>
-            <a :href="detail(item)" :title="item.title" class="text-lg font-bold">{{ item.title }}</a>
-            <span class="line-clamp-2 text-gray-400 text-sm font-normal py-3 text-left">{{ item.comments }}</span>
-          </h3>
-        </div>
-      </el-col>
-    </template>
-  </el-row>
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/components/MContent.vue
+++ b/components/MContent.vue
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-    defineProps<{
-      data?: any;
-      isMobile?: boolean;
-    }>(),
-    {}
-);
-
-</script>
-
-<template>
-  <div class="content text-[16px]" v-html="data"></div>
-</template>
-
-<style lang="scss">
-.content {
-  padding-top: 15px;
-  overflow: hidden;
-  color: #333131;
-}
-.content p{
-  padding: 0;
-  line-height: 2.2rem;
-}
-.content img{
-  padding: 8px 0;
-  max-width: 100%;
-  height: auto;
-}
-.content video {
-  width: 100%;
-  height: auto;
-}
-</style>
--- a/components/MFooter.vue
+++ b/components/MFooter.vue
@@ -1,34 +0,0 @@
-<template>
-  <div class="h-[40px]"></div>
-  <div class="footer">
-    <div class="ffs">
-      <a :href="`tel:${config.callPhone}`"><span class="span1">{{ $t('tel') }}</span></a>
-      <a :href="`/${i18n.locale.value}/m/page/1008.html`"><span class="span2">{{ $t('map') }}</span></a>
-      <a :href="`/${i18n.locale.value}/m/order/1003.do`"><span class="span3">{{ $t('message') }}</span></a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 请求数据
-import {useConfigInfo} from "#imports";
-import {configWebsiteField} from "~/api/cms/cmsWebsiteField";
-
-const config = useConfigInfo();
-const i18n = useI18n();
-
-// TODO 读取网站配置信息
-  configWebsiteField({
-    lang: i18n.locale.value
-  }).then(res => {
-    config.value = res;
-  })
-</script>
-
-<style lang="scss">
-.el-divider__text{
-  display: block;
-  margin-top: -1px;
-  --el-bg-color: #ffffff;
-}
-</style>
--- a/components/MHeader.vue
+++ b/components/MHeader.vue
@@ -1,153 +0,0 @@
-<template>
-
-    <header class="clearfix flex justify-between items-center w-full">
-      <div class="logo" :class="logo?.style">
-        <nuxt-link :to="`/m`" target="_top"><el-image :src="logo?.value" class=" rounded-sm rounded-sm w-[107px] h-[40px]"/></nuxt-link>
-      </div>
-      <div class="sub-menu">
-        <el-icon color="black" :size="20" @click="drawer = true"><Fold /></el-icon>
-      </div>
-    </header>
-
-  <el-drawer
-      v-model="drawer"
-      :size="290"
-  >
-    <div id="menu">
-      <el-menu
-          currentIndex="/product"
-          :unique-opened="true"
-      >
-        <template v-for="(item,index) in navigations" :key="index">
-        <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
-          <template #title><span>{{ item.title }}</span></template>
-          <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
-            <el-space>
-              <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
-              <a :href="navTo(sub)">{{ sub.title }}</a>
-            </el-space>
-          </el-menu-item>
-        </el-sub-menu>
-        <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
-        </template>
-      </el-menu>
-      <div class="search-tools flex justify-center p-4 mt-5">
-        <el-input v-model="keyword" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>
-      </div>
-      <div class="lang flex justify-center text-center" v-if="langList.length > 0">
-        <el-space>
-          <a :href="`/m?spm=zh_CN`" class="text-sm text-gray-500">中文版</a>
-          <el-divider direction="vertical" />
-          <a :href="`/en/m?spm=en_US`" class="text-sm text-gray-400">English</a>
-        </el-space>
-      </div>
-    </div>
-  </el-drawer>
-
-</template>
-
-<script setup lang="ts">
-// 引入所需的图标
-import {
-  useConfigInfo, useLogo,
-  useMenu,
-  useToken,
-  useUser, useWebsite
-} from "~/composables/configState";
-import {getPath, isMobileDevice, navTo} from "#imports";
-import { Search, Expand, Fold } from '@element-plus/icons-vue'
-import {configWebsiteField, listCmsWebsiteField} from "~/api/cms/cmsWebsiteField";
-import {getSiteInfo, getUserInfo} from "~/api/layout";
-import {listCmsLangLog} from "~/api/cms/cmsLangLog";
-import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
-import type {CmsWebsiteField} from "~/api/cms/cmsWebsiteField/model";
-import {getWebsiteField} from "~/api/cms/cmsWebsiteField";
-
-const token = useToken();
-const user = useUser();
-const navigations = useMenu();
-const config = useConfigInfo();
-const i18n = useI18n();
-const isMobile = ref<boolean>(false);
-const langList = ref<CmsLangLog[]>([]);
-const drawer = ref<boolean>(false);
-const logo = useLogo()
-const keyword = ref();
-
-const setNav = () => {
-  navigations.value = navigations.value.map(item => {
-    item.showChild = false
-    item.childHeight = 0;
-    return item
-  })
-}
-setNav()
-
-const onSearch = () => {
-  window.location.href = `/m/search/${keyword.value}`;
-}
-
-
-const reload = async () => {
-
-  // TODO 读取网站配置信息
-  configWebsiteField({
-    lang: i18n.locale.value
-  }).then(res => {
-    config.value = res;
-  })
-
-  // TODO 读取国际化配置
-  listCmsLangLog({}).then(list => {
-    langList.value = list;
-  })
-
-  listCmsWebsiteField({
-    name: 'siteLogo'
-  }).then(data => {
-    if(data[0]){
-      logo.value = data[0]
-    }
-  })
-
-  // TODO 是否跳转H5版
-  if(isMobileDevice()){
-    isMobile.value = true;
-    const path = getPath(1);
-    if(!path || !path.startsWith('/m')){
-      let newUrl = '';
-      let origin = window.location.origin;
-      let href = window.location.href;
-      let pathname = window.location.pathname;
-      if(pathname.startsWith('/m') || pathname.startsWith(`/${i18n.locale.value}/m`)){
-        return false;
-      }
-      newUrl = href.replace(origin,origin + '/m');
-      window.location.href = newUrl;
-    }
-  }
-
-  // 获取用户信息
-  // token.value = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJ1c2VybmFtZVwiOlwiMTM4MDAwMTAzMTdcIixcInRlbmFudElkXCI6MTAzMTd9IiwiZXhwIjoxNzM1Nzk2NjA1LCJpYXQiOjE3MzMyMDQ2MDV9.hx6OV4ZHe6XTnNye1gvsuXjoxHW0YihcEwSuppUcoCc'
-  // 获取用户信息
-  if (token.value) {
-    getUserInfo().then(data => {
-      user.value = data
-    })
-  }
-}
-
-onMounted(() => {
-  // 在这里放置你想要在组件渲染完成后执行的代码
-  reload();
-});
-</script>
-
-<style lang="scss">
-.el-menu{
-  border-right: none !important;
-}
-.el-menu-item, .el-sub-menu{
-  border-bottom: 1px solid #f3f3f3;
-}
-</style>
--- a/components/NextArticle.vue
+++ b/components/NextArticle.vue
@@ -29,24 +29,16 @@ nextArticle.value = await getNext({
 </script>

 <template>
-  <div class="flex justify-between my-3 gap-4">
-      <nuxt-link :to="previousArticle ? detail(previousArticle) : ''" class="w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+  <div class="flex justify-between flex-col sm:flex-row my-3 gap-4">
+      <nuxt-link :to="previousArticle ? detail(previousArticle) : ''" class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
        <span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
        <span class="text-gray-400">{{ $t('previous') }}</span>
      </nuxt-link>
-      <nuxt-link :to="nextArticle ? detail(nextArticle) : ''" class="w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
+      <nuxt-link :to="nextArticle ? detail(nextArticle) : ''" class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
        <span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
        <span class="text-gray-400">{{ $t('next') }}</span>
      </nuxt-link>
  </div>
-<!--  <div class="page flex flex-col">-->
-<!--            <span class="text-left">-->
-<!--              {{ $t('previous') }}：<a :href="detail(previousArticle)">{{ previousArticle?.title }}</a>-->
-<!--            </span>-->
-<!--            <span class="text-left">-->
-<!--              {{ $t('next') }}：<a :href="detail(nextArticle)">{{ nextArticle?.title }}</a>-->
-<!--            </span>-->
-<!--  </div>-->
 </template>

 <style scoped lang="scss">
--- a/components/Tags.vue
+++ b/components/Tags.vue
@@ -13,10 +13,12 @@ const i18n = useI18n();

 <template>
  <div class="tag pt-1" v-if="data">
-    <el-space>
-      <span>{{ $t('keyword') }}：</span>
-      <el-tag v-for="(item,index) in JSON.parse(data)" :key="index"><a :href="`${i18n.locale.value == 'en' ? '/en' : ''}/tags/${item}`" target="_blank">{{ item }}</a></el-tag>
-    </el-space>
+    <div class="flex justify-between">
+      <div class="text-nowrap">{{ $t('keyword') }}：</div>
+      <el-space class="flex-wrap">
+        <el-tag v-for="(item,index) in JSON.parse(data)" :key="index"><a :href="`${i18n.locale.value == 'en' ? '/en' : ''}/tags/${item}`" target="_blank">{{ item }}</a></el-tag>
+      </el-space>
+    </div>
  </div>
 </template>