1 month ago · 7de914e00b
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 
				 # 请求 url
			
 
				-VITE_BASE_URL=
			
 
				+VITE_BASE_URL=https://vvbuy.csvip.top/api
			
 
				 
			
 
				 # 标题
			
 
				 VITE_APP_TITLE="VAVA BUY"
			
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 
				 # 请求 url
			
 
				-VITE_BASE_URL=
			
 
				+VITE_BASE_URL=https://get.vavabuy.com/api/
			
 
				 
			
 
				 # 标题
			
 
				 VITE_APP_TITLE="VAVA BUY"
			
--- a/index.html
+++ b/index.html
@@ -9,5 +9,14 @@
 
				   <body>
			
 
				     <div id="app"></div>
			
 
				     <script type="module" src="/src/main.ts"></script>
			
 
				+    
			
 
				+    <!-- Twitter conversion tracking base code -->
			
 
				+    <script>
			
 
				+      !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
			
 
				+      },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='https://static.ads-twitter.com/uwt.js',
			
 
				+      a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
			
 
				+      twq('config','prkh1');
			
 
				+    </script>
			
 
				+  <!-- End Twitter conversion tracking base code -->
			
 
				   </body>
			
 
				 </html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,24 @@
 
				 <script setup lang="ts">
			
 
				+import { onMounted, onBeforeMount } from 'vue'
			
 
				 import { RouterView } from 'vue-router'
			
 
				+import useSystemStore from '@/stores/useSystemStore'
			
 
				+
			
 
				+const systemStore = useSystemStore()
			
 
				+const { updateScreenWidth } = systemStore
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  window.addEventListener('resize', onWindowResize)
			
 
				+})
			
 
				+
			
 
				+onBeforeMount(() => {
			
 
				+  window.removeEventListener('resize', onWindowResize)
			
 
				+})
			
 
				+
			
 
				+function onWindowResize() {
			
 
				+  const clientWidth = document.documentElement.clientWidth
			
 
				+  updateScreenWidth(clientWidth)
			
 
				+}
			
 
				+onWindowResize()
			
 
				 </script>
			
 
				 
			
 
				 <template>
			
--- a/src/apis/article.ts
+++ b/src/apis/article.ts
@@ -0,0 +1,32 @@
 
				+import request from '@/utils/request'
			
 
				+
			
 
				+
			
 
				+
			
 
				+export const getContentHelpApi = (params: Object) => request({
			
 
				+  url: '/content/footer',
			
 
				+  method: 'get',
			
 
				+  params: params
			
 
				+})
			
 
				+
			
 
				+
			
 
				+export const getContentDetailApi = (params: Object) => request({
			
 
				+  url: '/content/detail',
			
 
				+  method: 'get',
			
 
				+  params: params
			
 
				+})
			
 
				+
			
 
				+export const getContentDetailByKeywordApi = (params: Object) => request({
			
 
				+  url: '/other/about',
			
 
				+  method: 'get',
			
 
				+  params: params
			
 
				+})
			
 
				+
			
 
				+
			
 
				+
			
 
				+export const getFAQCateListApi = (params: Object) => request({
			
 
				+  url: '/content/faq',
			
 
				+  method: 'get',
			
 
				+  params: params
			
 
				+})
			
 
				+
			
 
				+
			
--- a/src/apis/system.ts
+++ b/src/apis/system.ts
@@ -1,9 +0,0 @@
 
				-import request from '@/utils/request'
			
 
				-
			
 
				-
			
 
				-
			
 
				-export const getInfo = (params: Object) => request({
			
 
				-  url: '/api/cate/getCateListProduct',
			
 
				-  method: 'get',
			
 
				-  params: params
			
 
				-})
			
--- a/src/locale/index.ts
+++ b/src/locale/index.ts
@@ -5,7 +5,7 @@ import zh from './lang/zh'
 
				 
			
 
				 // 获取当前语言
			
 
				 export function getCurrentLang(): string | null {
			
 
				-  return !!localStorage.getItem('locale') && localStorage.getItem('locale') !== 'null' && localStorage.getItem('locale') !== 'undefine' ? localStorage.getItem('locale') : 'zh-CN'
			
 
				+  return !!localStorage.getItem('locale') && localStorage.getItem('locale') !== 'null' && localStorage.getItem('locale') !== 'undefine' ? localStorage.getItem('locale') : 'en'
			
 
				 }
			
 
				 
			
 
				 
			
@@ -13,7 +13,7 @@ export function getCurrentLang(): string | null {
 
				 const i18n = createI18n({
			
 
				   legacy: false,
			
 
				   locale: (getCurrentLang() as string),
			
 
				-  fallbackLocale: 'zh-CN',
			
 
				+  fallbackLocale: 'en',
			
 
				   messages: {
			
 
				     en: en,
			
 
				     "zh-CN": zh,
			
--- a/src/locale/lang/en.ts
+++ b/src/locale/lang/en.ts
@@ -18,7 +18,7 @@ export default {
 
				     "加入VAVA BUY 以获取您的收货地址": "Join VAVA BUY to obtain your delivery address",
			
 
				     "下单购买": "Place an order for purchase",
			
 
				     "在商店购物，运送到您的新VAVA BUY地址": "Make a purchase at the store and have it delivered to your new VAVA BUY address",
			
 
				-    "收货转运": "Delivery transfer",
			
 
				+    "收货转运": "Delivery and transfer",
			
 
				     "合并包裹并节省高达80%的运费": "Combine packages and save up to 80% on shipping costs",
			
 
				     "VAVA BUY 优势对比": "VAVA BUY Advantage Comparison",
			
 
				     "包裹运送到全球，而且还在不断增加...": "Packages are being delivered worldwide, and the number is constantly increasing...",
			
@@ -27,8 +27,17 @@ export default {
 
				     "新西兰": "New Zealand",
			
 
				     "澳大利亚": "Australia",
			
 
				     "意大利": "Italy",
			
 
				-    "囧二": "Guang Er",
			
 
				-    updateTimeTxt: 'Updated on {updateTime}'
			
 
				+    "Lawrence": "Lawrence",
			
 
				+    "Anna": "Anna",
			
 
				+    "John": "John",
			
 
				+    updateTimeTxt: 'Updated on {updateTime}',
			
 
				+    companyName: 'Guangzhou Wawamai Trading Co., Ltd.',
			
 
				+    addressLabel: 'Address',
			
 
				+    companyAddress: 'Room D390, 401-466, No. 401-1, Tianyuan Road, Tianhe District, Guangzhou City',
			
 
				+    hongkongAddressLabel: 'Address (Hong Kong)',
			
 
				+    hongkongCompanyAddress: 'UNIT 60 3/F YAU LEE CENTER NO.45 HOI YUEN ROAD Kwun Tong Hong Kong',
			
 
				+    emailLabel: 'Email',
			
 
				+    hongkongEmailLabel: 'Email (Hong Kong)',
			
 
				 
			
 
				   },
			
 
				   textLink: {
			
@@ -59,9 +68,14 @@ export default {
 
				     "获取 VAVA BUY 应用程序": "Get the VAVA BUY app",
			
 
				   },
			
 
				   paragraph: {
			
 
				-    "国际运转·一站解决": "International operation · One-stop solution",
			
 
				-    "连接全球优质商品，一键下单无忧，实时查看订单进程，享受便捷购物体验。": "Connect to high-quality products from all over the world. Place orders with one click and enjoy worry-free shopping. View the order progress in real time and experience the convenient shopping experience.",
			
 
				+    "bannerTitle": "International operation · One-stop solution",
			
 
				+    "bannerDesc": `
			
 
				+      <div>Access high-quality products from around the world.</div>
			
 
				+      <div>Place one-click orders and enjoy worry-free shopping.</div>
			
 
				+      <div>Track your order in real time and enjoy a seamless shopping experience.</div>
			
 
				+    `,
			
 
				     "如果你想买其他东西，没有比 Vava buy 更好的了": "If you want to buy anything else, there's no better option than Vava Buy",
			
 
				+    "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻": "Great! Everything went smoothly. The speed of receiving orders and shipping them quickly was impressive",
			
 
				     "非常易于使用，包装很精美，会收获很多惊喜": "Very easy to use, with exquisite packaging, and you will receive many surprises",
			
 
				     "我们使用 cookie 来提供更好的在线体验。 访问和使用 VAVA BUY.com，即表示您同意我们使用 Cookie。 通过阅读我们的条款和条件、使用条款、 和隐私政策。": "We use cookies to provide a better online experience. By visiting and using VAVA BUY.com, you are agreeing to our use of cookies. Please read our terms and conditions, usage terms, and privacy policy.",
			
 
				   },
			
--- a/src/locale/lang/zh.ts
+++ b/src/locale/lang/zh.ts
@@ -19,7 +19,7 @@ export default {
 
				     "下单购买": "下单购买",
			
 
				     "在商店购物，运送到您的新VAVA BUY地址": "在商店购物，运送到您的新VAVA BUY地址",
			
 
				     "收货转运": "收货转运",
			
 
				-    "合并包裹并节省高达80%的运费": "合并包裹并节省高达80%的运费",
			
 
				+    "合并包裹并节省高达80%的运费": "合并包裹并节省高达 80% 的运费",
			
 
				     "VAVA BUY 优势对比": "VAVA BUY 优势对比",
			
 
				     "包裹运送到全球，而且还在不断增加...": "包裹运送到全球，而且还在不断增加...",
			
 
				     "自 Vava buy.com 成立以来": "自 Vava buy.com 成立以来",
			
@@ -27,8 +27,18 @@ export default {
 
				     "新西兰": "新西兰",
			
 
				     "澳大利亚": "澳大利亚",
			
 
				     "意大利": "意大利",
			
 
				-    "囧二": "囧二",
			
 
				-    updateTimeTxt: '更新于 {updateTime}'
			
 
				+    "Lawrence": "劳伦斯",
			
 
				+    "Anna": "安娜",
			
 
				+    "John": "约翰",
			
 
				+    updateTimeTxt: '更新于 {updateTime}',
			
 
				+    companyName: '广州哇哇买商贸有限公司',
			
 
				+    addressLabel: '地址',
			
 
				+    companyAddress: '广州市天河区天源路401号之一401-466房D390',
			
 
				+    hongkongAddressLabel: '地址（香港）',
			
 
				+    hongkongCompanyAddress: '香港观塘海园道45号友利中心3楼60室',
			
 
				+    emailLabel: '邮箱',
			
 
				+    hongkongEmailLabel: '邮箱（香港）',
			
 
				+
			
 
				   },
			
 
				   textLink: {
			
 
				     "常见问题": "常见问题",
			
@@ -58,9 +68,10 @@ export default {
 
				     "获取 VAVA BUY 应用程序": "获取 VAVA BUY 应用程序",
			
 
				   },
			
 
				   paragraph: {
			
 
				-    "国际运转·一站解决": "国际运转·一站解决",
			
 
				-    "连接全球优质商品，一键下单无忧，实时查看订单进程，享受便捷购物体验。": "连接全球优质商品，一键下单无忧，实时查看订单进程，享受便捷购物体验。",
			
 
				+    "bannerTitle": "国际运转·一站解决",
			
 
				+    "bannerDesc": "连接全球优质商品，一键下单无忧，实时查看订单进程，享受便捷购物体验。",
			
 
				     "如果你想买其他东西，没有比 Vava buy 更好的了": "如果你想买其他东西，没有比 Vava buy 更好的了",
			
 
				+    "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻": "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻",
			
 
				     "非常易于使用，包装很精美，会收获很多惊喜": "非常易于使用，包装很精美，会收获很多惊喜",
			
 
				     "我们使用 cookie 来提供更好的在线体验。 访问和使用 VAVA BUY.com，即表示您同意我们使用 Cookie。 通过阅读我们的条款和条件、使用条款、 和隐私政策。": "我们使用 cookie 来提供更好的在线体验。 访问和使用 VAVA BUY.com，即表示您同意我们使用 Cookie。 通过阅读我们的条款和条件、使用条款、 和隐私政策。",
			
 
				   },
			
--- a/src/public/images/avatar_1.jpg
+++ b/src/public/images/avatar_1.jpg
--- a/src/public/images/avatar_2.png
+++ b/src/public/images/avatar_2.png
--- a/src/public/images/avatar_3.jpg
+++ b/src/public/images/avatar_3.jpg
--- a/src/public/images/avatar_4.jpg
+++ b/src/public/images/avatar_4.jpg
--- a/src/public/images/icons/aodaliya_logo_icon.png
+++ b/src/public/images/icons/aodaliya_logo_icon.png
--- a/src/public/images/icons/xinxilan_logo_icon.png
+++ b/src/public/images/icons/xinxilan_logo_icon.png
--- a/src/public/images/icons/yidali_logo_icon.png
+++ b/src/public/images/icons/yidali_logo_icon.png
--- a/src/public/images/logo_icon.png
+++ b/src/public/images/logo_icon.png
--- a/src/stores/useFooterStore.ts
+++ b/src/stores/useFooterStore.ts
@@ -0,0 +1,123 @@
 
				+import { defineStore } from "pinia"
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import { getContentHelpApi } from '@/apis/article'
			
 
				+
			
 
				+
			
 
				+
			
 
				+export interface ILinkInfo {
			
 
				+  links: string;
			
 
				+  title: string;
			
 
				+  id: string | number;
			
 
				+}
			
 
				+
			
 
				+export interface IData {
			
 
				+  id: number;
			
 
				+  pid: number;
			
 
				+  name: string;
			
 
				+  sort: number;
			
 
				+  code: string | null;
			
 
				+  lists: Array<ILinkInfo>; 
			
 
				+}
			
 
				+
			
 
				+// store state
			
 
				+export interface IFooterState {
			
 
				+  linkList: Array<IData>;
			
 
				+  activeLinkId: string | number;
			
 
				+  activeLinkInfo: ILinkInfo | null;
			
 
				+  activeLinkCateInfo: IData | null;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+const useFooterStores = defineStore('footer', {
			
 
				+  state: (): IFooterState => ({
			
 
				+    linkList: [],
			
 
				+    activeLinkId: '',
			
 
				+    activeLinkInfo: null,
			
 
				+    activeLinkCateInfo: null,
			
 
				+  }),
			
 
				+
			
 
				+  getters: {
			
 
				+    activeInfo(): ILinkInfo | null {
			
 
				+      if (this.activeLinkInfo) return this.activeLinkInfo
			
 
				+      if (this.activeLinkCateInfo && this.activeLinkId) {
			
 
				+        const result = this.activeLinkCateInfo.lists.find((info: ILinkInfo) => (info.id == this.activeLinkId))
			
 
				+        return result ? result : null
			
 
				+      }
			
 
				+      return null
			
 
				+    }
			
 
				+  },
			
 
				+
			
 
				+  actions: {
			
 
				+
			
 
				+    // 获取数据列表
			
 
				+    fetchHelpDatas(lang: string) {
			
 
				+      const route = useRoute()
			
 
				+      const cateId = route.query.cateId ? route.query.cateId : ''
			
 
				+      const id = route.query.id ? route.query.id : ''
			
 
				+
			
 
				+      switch(lang) {
			
 
				+        case 'zh-CN':
			
 
				+          lang = 'zh'; break;
			
 
				+        default:
			
 
				+          break;
			
 
				+      }
			
 
				+  
			
 
				+      getContentHelpApi({ lang })
			
 
				+        .then((result) => {
			
 
				+          this.linkList = result.data
			
 
				+          console.log('this.linkList', this.linkList)
			
 
				+          if (this.linkList.length > 0) {
			
 
				+            if (cateId) {
			
 
				+              const cateInfo: IData | undefined = this.linkList.find((item: IData) => (`${item.id}` == cateId))
			
 
				+              const linkInfo: ILinkInfo | undefined = cateInfo ? cateInfo.lists.find((info: ILinkInfo) => (`${info.id}` == id)) : undefined
			
 
				+              this.updateActiveInfo(cateInfo ? cateInfo : null, linkInfo ? linkInfo : null)
			
 
				+            }
			
 
				+            else if (id) {
			
 
				+              let linkInfo: ILinkInfo | null = null
			
 
				+              for (let i = 0; i < this.linkList.length; i++) {
			
 
				+                for (let j = 0; j < this.linkList[i].lists.length; j++) {
			
 
				+                  if (`${this.linkList[i].lists[j].id}` == id) {
			
 
				+                    linkInfo = this.linkList[i].lists[j]
			
 
				+                    break
			
 
				+                  }
			
 
				+                }
			
 
				+                if (linkInfo) {
			
 
				+                  break
			
 
				+                }
			
 
				+              }
			
 
				+              this.updateActiveInfo(null, linkInfo)
			
 
				+            }
			
 
				+          }
			
 
				+        })
			
 
				+        .catch((err) => {
			
 
				+  
			
 
				+        })
			
 
				+    },
			
 
				+
			
 
				+    // 更新 active 信息
			
 
				+    updateActiveInfo(cateInfo: IData | null, linkInfo: ILinkInfo | null, callback?: Function) {
			
 
				+      if (!linkInfo) {
			
 
				+        this.activeLinkId = ''
			
 
				+        this.activeLinkInfo = null
			
 
				+        this.activeLinkCateInfo = null
			
 
				+      }
			
 
				+      else if (linkInfo.links) {
			
 
				+        console.log(linkInfo.links)
			
 
				+        window.open(linkInfo.links, '__blank')
			
 
				+        return
			
 
				+      }
			
 
				+      else {
			
 
				+        this.activeLinkId = linkInfo.id
			
 
				+        this.activeLinkInfo = linkInfo
			
 
				+        this.activeLinkCateInfo = cateInfo
			
 
				+      }
			
 
				+      callback && callback()
			
 
				+    }
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+export default useFooterStores
			
--- a/src/stores/useSystemStore.ts
+++ b/src/stores/useSystemStore.ts
@@ -6,6 +6,7 @@ import { getCurrentLang } from '@/locale/index'
 
				 export interface ISystemState {
			
 
				   locale: string;
			
 
				   localeList: ILocale[];
			
 
				+  screenWidth: number;
			
 
				 }
			
 
				 
			
 
				 
			
@@ -23,13 +24,14 @@ const useSystemStore = defineStore('system', {
 
				     localeList: [
			
 
				       { name: '简体中文', value: 'zh-CN' },
			
 
				       { name: 'English', value: 'en' },
			
 
				-    ]
			
 
				+    ],
			
 
				+    screenWidth: 1920
			
 
				   }),
			
 
				 
			
 
				   getters: {
			
 
				     localeInfo: function (): ILocale {
			
 
				       const result = this.localeList.find((item: ILocale) => (item.value == this.locale))
			
 
				-      return result ? result : this.localeList[0]
			
 
				+      return result ? result : this.localeList[1]
			
 
				     }
			
 
				   },
			
 
				 
			
@@ -39,6 +41,15 @@ const useSystemStore = defineStore('system', {
 
				         this.locale = localeInfo.value
			
 
				         localStorage.setItem('locale', localeInfo.value)
			
 
				       }
			
 
				+    },
			
 
				+
			
 
				+    updateScreenWidth(width: number) {
			
 
				+      if (width < 325) {
			
 
				+        this.screenWidth = 325
			
 
				+      }
			
 
				+      else {
			
 
				+        this.screenWidth = width
			
 
				+      }
			
 
				     }
			
 
				   }
			
 
				 })
			
--- a/src/utils/rem.ts
+++ b/src/utils/rem.ts
@@ -1,3 +1,6 @@
 
				+
			
 
				+
			
 
				+
			
 
				 // 基准大小
			
 
				 const baseSize = 16
			
 
				 
			
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -21,6 +21,9 @@ http.interceptors.request.use(
 
				     if (token) {
			
 
				       config.headers.token = token
			
 
				     }
			
 
				+    let lang = localStorage.getItem('locale')
			
 
				+    lang = lang && lang == 'zh-CN' ? 'zh' : lang
			
 
				+    config.headers.lang = lang ? lang : 'en'
			
 
				     return config
			
 
				   },
			
 
				   err => {
			
@@ -31,7 +34,8 @@ http.interceptors.request.use(
 
				 // 响应拦截器
			
 
				 http.interceptors.response.use(
			
 
				   res => {
			
 
				-    if (res.data.code == 1) {
			
 
				+    // console.log('res', res)
			
 
				+    if (res.data.ret == 1) {
			
 
				       return Promise.resolve(res.data)
			
 
				     }
			
 
				     else{
			
--- a/src/views/ArticleDetails/hooks/useData.ts
+++ b/src/views/ArticleDetails/hooks/useData.ts
@@ -0,0 +1,112 @@
 
				+import { ref, watch } from 'vue'
			
 
				+import { useRoute } from 'vue-router'
			
 
				+import { getContentDetailApi, getContentDetailByKeywordApi } from '@/apis/article'
			
 
				+
			
 
				+
			
 
				+export interface IDataInfo {
			
 
				+  id: number;
			
 
				+  title: string;
			
 
				+  desc: string;
			
 
				+  content: string;
			
 
				+  picture: string;
			
 
				+  inorder: number;
			
 
				+  show: number;
			
 
				+  indate: number;
			
 
				+  update: number;
			
 
				+  links: any;
			
 
				+  linkType: any;
			
 
				+  position: string;
			
 
				+  type: string;
			
 
				+  category: number;
			
 
				+  lang: string; 
			
 
				+}
			
 
				+
			
 
				+
			
 
				+function useData() {
			
 
				+
			
 
				+  // route 对象
			
 
				+  const route = useRoute()
			
 
				+  console.log('route', route)
			
 
				+  const articleId = ref<string | number>('')
			
 
				+  const articleType = ref<string>('')
			
 
				+  const dataInfo = ref<IDataInfo | string | null>(null)
			
 
				+  const loading = ref<boolean>(false)
			
 
				+
			
 
				+
			
 
				+  // 监听路由 id 变化
			
 
				+  watch(
			
 
				+    () => route.query,
			
 
				+    (newVal) => {
			
 
				+      console.log('newVal', newVal)
			
 
				+      if (newVal.type) {
			
 
				+        articleType.value = newVal.type as string
			
 
				+      }
			
 
				+      else {
			
 
				+        articleType.value = ''
			
 
				+      }
			
 
				+      if (newVal.id) {
			
 
				+        articleId.value = (newVal.id as (string | number))
			
 
				+        fetchData()
			
 
				+      }
			
 
				+    },
			
 
				+    {
			
 
				+      immediate: true
			
 
				+    }
			
 
				+  )
			
 
				+
			
 
				+  function fetchData() {
			
 
				+    switch(articleType.value) {
			
 
				+      case 'header':
			
 
				+        fetchArticleDetailByKeyword()
			
 
				+        break
			
 
				+      default:
			
 
				+        fetchArticleDetailById()
			
 
				+        break
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  // 根据 id 获取文章详情
			
 
				+  function fetchArticleDetailById() {
			
 
				+    loading.value = true
			
 
				+    getContentDetailApi({ id: articleId.value })
			
 
				+      .then(result => {
			
 
				+        dataInfo.value = result.data
			
 
				+      })
			
 
				+      .catch(err => {
			
 
				+
			
 
				+      })
			
 
				+      .finally(() => {
			
 
				+        loading.value = false
			
 
				+      })
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  // 根据关键词获取文章详情
			
 
				+  function fetchArticleDetailByKeyword() {
			
 
				+    loading.value = true
			
 
				+    getContentDetailByKeywordApi({ type: articleId.value })
			
 
				+      .then(result => {
			
 
				+        dataInfo.value = result.data
			
 
				+      })
			
 
				+      .catch(err => {
			
 
				+
			
 
				+      })
			
 
				+      .finally(() => {
			
 
				+        loading.value = false
			
 
				+      })
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  return {
			
 
				+    articleId,
			
 
				+    articleType,
			
 
				+    dataInfo,
			
 
				+    loading,
			
 
				+    fetchArticleDetailById
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+export default useData
			
--- a/src/views/ArticleDetails/index.vue
+++ b/src/views/ArticleDetails/index.vue
@@ -1,103 +1,54 @@
 
				 <template>
			
 
				   <section class="article-container">
			
 
				-    <!-- 文章标题 -->
			
 
				-    <h1 class="article-title">{{ article.title }}</h1>
			
 
				-
			
 
				-    <!-- 文章元信息 -->
			
 
				-    <div class="article-meta">
			
 
				-      <!--  <div class="author-info">
			
 
				-        <img :src="article.author.avatar" class="author-avatar" alt="作者头像" />
			
 
				-        <span class="author-name">{{ article.author.name }}</span>
			
 
				-      </div> -->
			
 
				-      <div class="publish-time">
			
 
				-        <span>{{
			
 
				-          $t('system["updateTimeTxt"]', {
			
 
				-            updateTime: formatDate(article.publishTime, locale),
			
 
				-          })
			
 
				-        }}</span>
			
 
				-      </div>
			
 
				-    </div>
			
 
				-
			
 
				-    <!-- 富文本内容区域 -->
			
 
				-    <div class="article-content" v-html="article.content"></div>
			
 
				-
			
 
				-    <!-- 标签 -->
			
 
				-    <div class="article-tags" v-if="article.tags && article.tags.length">
			
 
				-      <div class="tag" v-for="(tag, i) in article.tags" :key="i">
			
 
				-        <span>{{ tag }}</span>
			
 
				-      </div>
			
 
				+    <div class="loading-box" v-show="loading">
			
 
				+      <a-spin :spinning="loading" size="large" />
			
 
				     </div>
			
 
				+    <template v-if="!loading">
			
 
				+      <template v-if="articleType != 'header'">
			
 
				+        <!-- 文章标题 -->
			
 
				+        <h1 class="article-title">{{ dataInfo ? dataInfo.title : '' }}</h1>
			
 
				+
			
 
				+        <!-- 文章元信息 -->
			
 
				+        <!-- <div class="article-meta">
			
 
				+          <div class="author-info">
			
 
				+            <img :src="article.author.avatar" class="author-avatar" alt="作者头像" />
			
 
				+            <span class="author-name">{{ article.author.name }}</span>
			
 
				+          </div>
			
 
				+          <div class="publish-time" v-if="activeInfo">
			
 
				+            <span>{{
			
 
				+              $t('system["updateTimeTxt"]', {
			
 
				+                updateTime: formatDate(activeInfo.publishTime, locale),
			
 
				+              })
			
 
				+            }}</span>
			
 
				+          </div>
			
 
				+        </div> -->
			
 
				+      </template>
			
 
				+
			
 
				+      <!-- 富文本内容区域 -->
			
 
				+      <div class="article-content" v-html="dataInfo" v-if="articleType == 'header'"></div>
			
 
				+      <div class="article-content" v-html="dataInfo ? dataInfo.content : ''" v-else></div>
			
 
				+
			
 
				+      <!-- 标签 -->
			
 
				+      <!-- <div class="article-tags" v-if="activeInfo.tags && activeInfo.tags.length">
			
 
				+        <div class="tag" v-for="(tag, i) in activeInfo.tags" :key="i">
			
 
				+          <span>{{ tag }}</span>
			
 
				+        </div>
			
 
				+      </div> -->
			
 
				+    </template>
			
 
				   </section>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				 import { storeToRefs } from 'pinia'
			
 
				-import { ref } from 'vue'
			
 
				 import useSystemStore from '@/stores/useSystemStore'
			
 
				+import useData from './hooks/useData'
			
 
				+import type { IDataInfo } from './hooks/useData'
			
 
				 
			
 
				+// system store
			
 
				 const systemStore = useSystemStore()
			
 
				 const { locale } = storeToRefs(systemStore)
			
 
				 
			
 
				-// 模拟文章数据
			
 
				-const article = ref({
			
 
				-  title: '《平凡的世界》节选：黄土高原上的青春与奋斗',
			
 
				-  author: {
			
 
				-    name: '路遥',
			
 
				-    avatar: 'https://via.placeholder.com/40',
			
 
				-  },
			
 
				-  publishTime: '2023-05-15T10:30:00',
			
 
				-  content: `
			
 
				-  <h2>第一章</h2>
			
 
				-  
			
 
				-  <p>一九七五年二三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。</p>
			
 
				-  
			
 
				-  <p>在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方，冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。</p>
			
 
				-  
			
 
				-  <blockquote>
			
 
				-    "生活包含着更广阔的意义，而不在于我们实际得到了什么；关键是我们的心灵是否充实。"
			
 
				-  </blockquote>
			
 
				-  
			
 
				-  <h3>孙少平的出场</h3>
			
 
				-  
			
 
				-  <p>就在这时候，在空旷的院坝的北头，走过来一个瘦高个的青年人。他胳膊窝里夹着一只碗，缩着脖子在泥地里蹒跚而行。小伙子脸色黄瘦，而且两颊有点塌陷，显得鼻子像希腊人一样又高又直。脸上看来才刚刚褪掉少年的稚气——显然由于营养不良，还没有焕发出他这种年龄所特有的那种青春光彩。</p>
			
 
				-  
			
 
				-  <p>他撩开两条瘦长的腿，扑踏扑踏地踩着泥水走着。这也许就是那几个黑面馍的主人？看他那一身可怜的穿戴想必也只能吃这种伙食。瞧吧，他那身衣服尽管式样裁剪得勉强还算是学生装，但分明是自家织出的那种老土粗布，而且黑颜料染得很不均匀，给人一种肮肮脏脏的感觉。脚上的一双旧黄胶鞋已经没有了鞋带，凑合着系两根白线绳；一只鞋帮上甚至还缀补着一块蓝布补丁。裤子显然是前两年缝的，人长布缩，现在已经短窄得吊在了半腿把上；幸亏袜腰高，否则就要露肉了。</p>
			
 
				-  
			
 
				-  <img src="https://via.placeholder.com/600x400?text=黄土高原风光" alt="黄土高原风光" style="margin: 20px auto; display: block; border-radius: 8px;">
			
 
				-  
			
 
				-  <h2>青春的苦涩与尊严</h2>
			
 
				-  
			
 
				-  <p>他独个儿来到馍筐前，先怔了一下，然后便弯腰拾了两个高粱面馍。筐里还剩两个，不知他为什么没有拿。他直起身子来，眼睛不由地朝三只空荡荡的菜盆里瞥了一眼。他瞧见乙菜盆的底子上还有一点残汤剩水。房上的檐水滴答下来，盆底上的菜汤四处飞溅。他扭头瞧了瞧：雨雪迷蒙的大院坝里空无一人。他很快蹲下来，慌得如同偷窃一般，用勺子把盆底上混合着雨水的剩菜汤往自己的碗里舀。铁勺刮盆底的嘶啦声像炸弹的爆炸声一样令人惊心。血涌上了他黄瘦的脸。一滴很大的檐水落在盆底，溅了他一脸菜汤。他闭住眼，紧接着，就见两颗泪珠慢慢地从脸颊上滑落了下来——唉，我们姑且就认为这是他眼中溅进了辣子汤吧！</p>
			
 
				-  
			
 
				-  <p>他站起来，用手抹了一把脸，端着半碗剩菜汤，来到西南拐角处的开水房前，在水房后墙上伸出来的管子上给菜汤里搀了一些开水，然后把高粱面馍掰碎泡进去，就蹲在房檐下狼吞虎咽地吃起来。</p>
			
 
				-  
			
 
				-  <pre><code>这就是《平凡的世界》开篇展现的，
			
 
				-一个普通农村青年的日常生活。
			
 
				-没有华丽的辞藻，
			
 
				-只有真实得令人心痛的细节描写。</code></pre>
			
 
				-  
			
 
				-  <h3>关于尊严的思考</h3>
			
 
				-  
			
 
				-  <p>突然间，他听见后面传来一阵低低的议论声："瞧，这就是那个每天最后一个来拿饭的......"</p>
			
 
				-  
			
 
				-  <p>孙少平猛地转过身，眼睛紧张地扫视着刚才声音传来的方向。他发现是两个低年级的女生正看着他交头接耳——她们显然没有料到他会突然转身，立刻尴尬地低下头，装作若无其事地从他身边匆匆走过。</p>
			
 
				-  
			
 
				-  <p>孙少平站在那里，手里端着那碗被雨水稀释了的菜汤，感到一种难以言喻的屈辱。他知道，在这所县立高中，像他这样从农村来的学生并不多，而像他这样穷困的就更少了。大多数同学至少还能吃上玉米面馍，像他这样顿顿啃高粱面馍的，恐怕全校也就他一个。</p>
			
 
				-  
			
 
				-  <ul>
			
 
				-    <li>贫穷不是耻辱，但确实带来了难以言说的痛苦</li>
			
 
				-    <li>青春期的自尊心在这种环境下显得格外脆弱</li>
			
 
				-    <li>物质匮乏却无法阻挡精神世界的成长</li>
			
 
				-  </ul>
			
 
				-  
			
 
				-  <h2>结语</h2>
			
 
				-  
			
 
				-  <p>这就是路遥笔下的《平凡的世界》，它展现了中国社会变革时期普通人的生存状态和精神世界。孙少平的形象，代表了一代农村青年在城乡二元结构下的挣扎与奋斗。小说通过这些看似平凡的日常生活描写，展现了不平凡的人性光辉。</p>
			
 
				-  
			
 
				-  <p>正如路遥在书中所写："<strong>生活不能等待别人来安排，要自己去争取和奋斗；而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。</strong>"</p>
			
 
				-`,
			
 
				-  tags: ['路遥', '《平凡的世界》', '茅盾文学奖', '现实主义'],
			
 
				-})
			
 
				+const { dataInfo, articleType, loading } = useData()
			
 
				 
			
 
				 // 格式化日期
			
 
				 const formatDate = (dateString: string, lang: string) => {
			
@@ -108,8 +59,9 @@ const formatDate = (dateString: string, lang: string) => {
 
				 
			
 
				 <style scoped lang="less">
			
 
				 .article-container {
			
 
				-  max-width: 1200px;
			
 
				+  max-width: 800px;
			
 
				   max-width: 75rem;
			
 
				+  max-width: 50rem;
			
 
				   margin: 0 auto;
			
 
				   padding: 60px 15px;
			
 
				   padding: 3.75rem 0.9375rem;
			
@@ -117,6 +69,13 @@ const formatDate = (dateString: string, lang: string) => {
 
				   color: #333;
			
 
				 }
			
 
				 
			
 
				+.loading-box {
			
 
				+  position: absolute;
			
 
				+  top: 50%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -50%);
			
 
				+}
			
 
				+
			
 
				 .article-title {
			
 
				   font-size: var(--title-size);
			
 
				   margin-bottom: 20px;
			
@@ -196,7 +155,7 @@ const formatDate = (dateString: string, lang: string) => {
 
				 
			
 
				 <style>
			
 
				 /* 全局样式用于富文本内容 */
			
 
				-.article-content >>> h2 {
			
 
				+.article-content h2 {
			
 
				   font-size: 1.8rem;
			
 
				   margin: 30px 0 15px;
			
 
				   margin: 1.875rem 0 0.9375rem;
			
@@ -206,42 +165,43 @@ const formatDate = (dateString: string, lang: string) => {
 
				   padding-bottom: 0.625rem;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> h3 {
			
 
				+.article-content h3 {
			
 
				   font-size: 1.4rem;
			
 
				   margin: 25px 0 12px;
			
 
				   margin: 1.5625rem 0 0.75rem;
			
 
				   color: #333;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> p {
			
 
				+.article-content p {
			
 
				   margin: 15px 0;
			
 
				   margin: 0.9375rem 0;
			
 
				   font-size: 1rem;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> ul,
			
 
				-.article-content >>> ol {
			
 
				+.article-content ul,
			
 
				+.article-content ol {
			
 
				   margin: 15px 0;
			
 
				   margin: 0.9375rem 0;
			
 
				   padding-left: 30px;
			
 
				   padding-left: 1.875rem;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> li {
			
 
				+.article-content li {
			
 
				   margin: 8px 0;
			
 
				   margin: 0.5rem 0;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> a {
			
 
				+.article-content a {
			
 
				   color: var(--color-active);
			
 
				   text-decoration: none;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> a:hover {
			
 
				+.article-content a:hover {
			
 
				   text-decoration: underline;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> img {
			
 
				+.article-content img {
			
 
				+  width: 100%;
			
 
				   max-width: 100%;
			
 
				   height: auto;
			
 
				   margin: 20px 0;
			
@@ -250,7 +210,7 @@ const formatDate = (dateString: string, lang: string) => {
 
				   border-radius: 0.25rem;
			
 
				 }
			
 
				 
			
 
				-.article-content >>> pre {
			
 
				+.article-content pre {
			
 
				   background-color: #f6f8fa;
			
 
				   padding: 16px;
			
 
				   padding: 1rem;
			
--- a/src/views/FAQ/hooks/useData.ts
+++ b/src/views/FAQ/hooks/useData.ts
@@ -1,197 +1,51 @@
 
				 import { ref, computed } from 'vue'
			
 
				+import { getFAQCateListApi } from '@/apis/article'
			
 
				 
			
 
				 
			
 
				-function useData() {
			
 
				+// 问题
			
 
				+export interface IFAQInfo {
			
 
				+  id: number;
			
 
				+  title: string;
			
 
				+  links: string;
			
 
				+  content: string; 
			
 
				+}
			
 
				+
			
 
				+// 分类列表
			
 
				+export interface ICateInfo {
			
 
				+  id: number;
			
 
				+  pid: number;
			
 
				+  name: string;
			
 
				+  sort: number;
			
 
				+  code: number | string;
			
 
				+  lists: Array<IFAQInfo>; 
			
 
				+}
			
 
				+
			
 
				 
			
 
				-  // 问题分类
			
 
				-  const categoryList = ref([
			
 
				-    { id: 1, name: '账号问题', count: 12 },
			
 
				-    { id: 2, name: '支付问题', count: 8 },
			
 
				-    { id: 3, name: '订单问题', count: 15 },
			
 
				-    { id: 4, name: '产品使用', count: 23 },
			
 
				-    { id: 5, name: '售后服务', count: 7 },
			
 
				-    { id: 6, name: '其他问题', count: 5 },
			
 
				-  ])
			
 
				-  // 当前选中的分类 ID
			
 
				-  const activeCategory = ref<string | number>(1)
			
 
				-
			
 
				-
			
 
				-  // 模拟问题数据
			
 
				-  const questions = ref([
			
 
				-    {
			
 
				-      id: 101,
			
 
				-      categoryId: 1,
			
 
				-      title: '如何注册账号？',
			
 
				-      preview: '详细说明注册账号的步骤和注意事项...',
			
 
				-      content: `
			
 
				-      <h3>注册账号步骤</h3>
			
 
				-      <ol>
			
 
				-        <li>点击网站右上角的"注册"按钮</li>
			
 
				-        <li>填写您的手机号码或电子邮箱</li>
			
 
				-        <li>设置登录密码（6-20位字符，包含字母和数字）</li>
			
 
				-        <li>输入收到的验证码</li>
			
 
				-        <li>阅读并同意用户协议</li>
			
 
				-        <li>点击"立即注册"完成注册</li>
			
 
				-      </ol>
			
 
				-      <p><strong>注意事项：</strong></p>
			
 
				-      <ul>
			
 
				-        <li>请使用常用手机号或邮箱，以便接收重要通知</li>
			
 
				-        <li>密码请勿设置过于简单</li>
			
 
				-        <li>如未收到验证码，请检查垃圾邮件或60秒后重新获取</li>
			
 
				-      </ul>
			
 
				-    `,
			
 
				-      updateTime: '2023-05-15',
			
 
				-      views: 1245,
			
 
				-      isHot: true,
			
 
				-      isNew: false,
			
 
				-    },
			
 
				-    {
			
 
				-      id: 102,
			
 
				-      categoryId: 1,
			
 
				-      title: '忘记密码怎么办？',
			
 
				-      preview: '密码找回的几种方法和步骤说明...',
			
 
				-      content: `
			
 
				-      <h3>找回密码方法</h3>
			
 
				-      <p>如果您忘记了密码，可以通过以下方式找回：</p>
			
 
				-      
			
 
				-      <h4>方法一：通过手机找回</h4>
			
 
				-      <ol>
			
 
				-        <li>在登录页面点击"忘记密码"</li>
			
 
				-        <li>选择"通过手机找回"</li>
			
 
				-        <li>输入注册时使用的手机号码</li>
			
 
				-        <li>获取并输入短信验证码</li>
			
 
				-        <li>设置新密码并确认</li>
			
 
				-      </ol>
			
 
				-      
			
 
				-      <h4>方法二：通过邮箱找回</h4>
			
 
				-      <ol>
			
 
				-        <li>在登录页面点击"忘记密码"</li>
			
 
				-        <li>选择"通过邮箱找回"</li>
			
 
				-        <li>输入注册时使用的邮箱地址</li>
			
 
				-        <li>登录邮箱查收重置密码邮件</li>
			
 
				-        <li>点击邮件中的链接设置新密码</li>
			
 
				-      </ol>
			
 
				-      
			
 
				-      <p>如果以上方法都无法解决您的问题，请联系客服人员。</p>
			
 
				-    `,
			
 
				-      updateTime: '2023-06-02',
			
 
				-      views: 876,
			
 
				-      isHot: true,
			
 
				-      isNew: false,
			
 
				-    },
			
 
				-    {
			
 
				-      id: 201,
			
 
				-      categoryId: 2,
			
 
				-      title: '支持哪些支付方式？',
			
 
				-      preview: '介绍平台目前支持的支付渠道...',
			
 
				-      content: `
			
 
				-      <h3>支持的支付方式</h3>
			
 
				-      <p>我们目前支持以下支付方式：</p>
			
 
				-      
			
 
				-      <div class="payment-method">
			
 
				-        <h4>1. 在线支付</h4>
			
 
				-        <ul>
			
 
				-          <li>微信支付</li>
			
 
				-          <li>支付宝</li>
			
 
				-          <li>银联在线支付</li>
			
 
				-          <li>Apple Pay</li>
			
 
				-        </ul>
			
 
				-      </div>
			
 
				-      
			
 
				-      <div class="payment-method">
			
 
				-        <h4>2. 银行卡支付</h4>
			
 
				-        <p>支持以下银行的储蓄卡和信用卡：</p>
			
 
				-        <ul>
			
 
				-          <li>中国工商银行</li>
			
 
				-          <li>中国建设银行</li>
			
 
				-          <li>中国银行</li>
			
 
				-          <li>招商银行</li>
			
 
				-          <li>交通银行等主流银行</li>
			
 
				-        </ul>
			
 
				-      </div>
			
 
				-      
			
 
				-      <p><strong>注意：</strong>部分银行可能有支付限额，请以银行规定为准。</p>
			
 
				-    `,
			
 
				-      updateTime: '2023-04-28',
			
 
				-      views: 1532,
			
 
				-      isHot: false,
			
 
				-      isNew: false,
			
 
				-    },
			
 
				-    {
			
 
				-      id: 301,
			
 
				-      categoryId: 3,
			
 
				-      title: '如何查询订单状态？',
			
 
				-      preview: '订单状态查询的几种途径和方法...',
			
 
				-      content: `
			
 
				-      <h3>查询订单状态</h3>
			
 
				-      <p>您可以通过以下方式查询订单状态：</p>
			
 
				-      
			
 
				-      <h4>方法一：网站查询</h4>
			
 
				-      <ol>
			
 
				-        <li>登录您的账号</li>
			
 
				-        <li>点击右上角"我的订单"</li>
			
 
				-        <li>在订单列表中找到相应订单</li>
			
 
				-        <li>点击"查看详情"查看订单状态</li>
			
 
				-      </ol>
			
 
				-      
			
 
				-      <h4>方法二：手机APP查询</h4>
			
 
				-      <ol>
			
 
				-        <li>打开APP并登录</li>
			
 
				-        <li>点击底部导航栏"我的"</li>
			
 
				-        <li>选择"我的订单"</li>
			
 
				-        <li>查看相应订单状态</li>
			
 
				-      </ol>
			
 
				-      
			
 
				-      <h4>方法三：联系客服查询</h4>
			
 
				-      <p>如果您无法通过以上方式查询，可以联系客服提供订单号查询。</p>
			
 
				-      
			
 
				-      <p><strong>常见订单状态说明：</strong></p>
			
 
				-      <ul>
			
 
				-        <li><span class="status waiting">待付款</span> - 订单已生成，等待支付</li>
			
 
				-        <li><span class="status paid">已支付</span> - 付款成功，等待处理</li>
			
 
				-        <li><span class="status shipped">已发货</span> - 商品已发出</li>
			
 
				-        <li><span class="status completed">已完成</span> - 订单交易完成</li>
			
 
				-        <li><span class="status cancelled">已取消</span> - 订单已取消</li>
			
 
				-      </ul>
			
 
				-    `,
			
 
				-      updateTime: '2023-05-20',
			
 
				-      views: 2104,
			
 
				-      isHot: true,
			
 
				-      isNew: true,
			
 
				-    },
			
 
				-  ])
			
 
				-  // 当前查看的问题详情
			
 
				-  const currentQuestion = ref(null)
			
 
				+function useData() {
			
 
				 
			
 
				+  // 分类列表
			
 
				+  const categoryList = ref<ICateInfo[]>([])
			
 
				+  const isLoading = ref<boolean>(false)
			
 
				+  // 当前选中的分类
			
 
				+  const activeCategoryId = ref<string | number>(0)          // id
			
 
				+  const activeCategoryInfo = ref<ICateInfo | null>(null)    // 分类信息
			
 
				+   // 当前查看的问题详情
			
 
				+   const currentQuestion = ref<IFAQInfo | null>(null)
			
 
				 
			
 
				   // 搜索查询词
			
 
				-  const searchQuery = ref('')
			
 
				+  const searchQuery = ref<string>('')
			
 
				   // 搜索结果
			
 
				-  const searchResults = ref<Array<typeof questions.value[0]>>([])
			
 
				+  const searchResults = ref<Array<IFAQInfo>>([])
			
 
				 
			
 
				 
			
 
				-  // 获取分类名称
			
 
				-  const getCategoryName = (id: string | number) => {
			
 
				-    const category = categoryList.value.find((c) => (c.id === id))
			
 
				-    return category ? category.name : '所有问题'
			
 
				-  }
			
 
				-
			
 
				   // 切换分类
			
 
				-  const changeCategory = (categoryId: string | number) => {
			
 
				-    activeCategory.value = categoryId
			
 
				+  const changeCategory = (categoryInfo: ICateInfo) => {
			
 
				+    activeCategoryInfo.value = categoryInfo
			
 
				+    activeCategoryId.value = categoryInfo.id
			
 
				     currentQuestion.value = null
			
 
				     searchResults.value = []
			
 
				   }
			
 
				 
			
 
				-  // 获取当前分类下的问题
			
 
				-  const questionList = computed(() => {
			
 
				-    return questions.value.filter((q: any) => q.categoryId === activeCategory.value)
			
 
				-  })
			
 
				-
			
 
				-  // 显示问题详情
			
 
				-  const showQuestionDetail = (question: any) => {
			
 
				-    currentQuestion.value = question
			
 
				-  }
			
 
				 
			
 
				   // 搜索问题
			
 
				   const searchQuestions = () => {
			
@@ -201,26 +55,64 @@ function useData() {
 
				     }
			
 
				 
			
 
				     const query = searchQuery.value.toLowerCase()
			
 
				-    searchResults.value = questions.value.filter((q) => {
			
 
				-      return q.title.toLowerCase().includes(query) || q.preview.toLowerCase().includes(query)
			
 
				-    })
			
 
				+    const list: IFAQInfo[] = []
			
 
				+    for (let i = 0; i < categoryList.value.length; i++) {
			
 
				+      let cateInfo: ICateInfo = categoryList.value[i]
			
 
				+      for (let j = 0; j < cateInfo.lists.length; j++) {
			
 
				+        let faqInfo: IFAQInfo = cateInfo.lists[j]
			
 
				+        if (faqInfo.title.toLowerCase().includes(query) || faqInfo.content.toLowerCase().includes(query)) {
			
 
				+          list.push(faqInfo)
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    searchResults.value = list
			
 
				     currentQuestion.value = null
			
 
				   }
			
 
				 
			
 
				+
			
 
				+  // 显示问题详情
			
 
				+  const showQuestionDetail = (question: IFAQInfo) => {
			
 
				+    currentQuestion.value = question
			
 
				+  }
			
 
				+
			
 
				   // 返回问题列表
			
 
				   const backToList = () => {
			
 
				     currentQuestion.value = null
			
 
				   }
			
 
				 
			
 
				+
			
 
				+  // 获取问题列表
			
 
				+  function fetchFAQList() {
			
 
				+    isLoading.value = true
			
 
				+    getFAQCateListApi({})
			
 
				+      .then((result) => {
			
 
				+        // console.log('result', result)
			
 
				+        if (result.data && result.data.length > 0) {
			
 
				+          categoryList.value =  result.data
			
 
				+          activeCategoryInfo.value = result.data[0]
			
 
				+          activeCategoryId.value = result.data[0].id
			
 
				+        }
			
 
				+        else {
			
 
				+          categoryList.value =  []
			
 
				+          activeCategoryInfo.value = null
			
 
				+          activeCategoryId.value = ''
			
 
				+        }
			
 
				+      })
			
 
				+      .catch(err => {})
			
 
				+      .finally(() => {
			
 
				+        isLoading.value = false
			
 
				+      })
			
 
				+  }
			
 
				+  fetchFAQList()
			
 
				+
			
 
				   return {
			
 
				     categoryList,
			
 
				-    activeCategory,
			
 
				-    questionList,
			
 
				+    isLoading,
			
 
				+    activeCategoryId,
			
 
				+    activeCategoryInfo,
			
 
				     currentQuestion,
			
 
				-    questions,
			
 
				     searchQuery,
			
 
				     searchResults,
			
 
				-    getCategoryName,
			
 
				     changeCategory,
			
 
				     showQuestionDetail,
			
 
				     searchQuestions,
			
--- a/src/views/FAQ/index.vue
+++ b/src/views/FAQ/index.vue
@@ -39,7 +39,7 @@
 
				             <!-- 搜索结果列表 -->
			
 
				             <div v-if="searchResults.length > 0" class="search-results question-list">
			
 
				               <h2>
			
 
				-                <span>{{
			
 
				+                <span style="flex: 1; padding-right: 16px; padding-right: 1rem; line-height: 1.3">{{
			
 
				                   $t('questionPage["searchResultTitle"]', { count: searchResults.length })
			
 
				                 }}</span>
			
 
				                 <div class="category-menu-btn" @click="showCategoryDrawer">
			
@@ -56,37 +56,41 @@
 
				                 <div class="question-title">
			
 
				                   {{ item.title }}
			
 
				                 </div>
			
 
				-                <div class="question-preview">{{ item.preview }}</div>
			
 
				+                <div class="question-preview" v-html="item.content"></div>
			
 
				               </div>
			
 
				             </div>
			
 
				 
			
 
				             <!-- 问题列表 -->
			
 
				             <div v-else class="question-list">
			
 
				               <h2>
			
 
				-                <span>{{ getCategoryName(activeCategory) }}</span>
			
 
				+                <span style="flex: 1; padding-right: 16px; padding-right: 1rem; line-height: 1.3">{{
			
 
				+                  activeCategoryInfo ? activeCategoryInfo.name : ''
			
 
				+                }}</span>
			
 
				                 <div class="category-menu-btn" @click="showCategoryDrawer">
			
 
				                   <span>{{ $t('questionPage["questionCategoryMenuBtn"]') }}</span>
			
 
				                   <img src="@/public/images/icons/menu_icon.png" alt="" />
			
 
				                 </div>
			
 
				               </h2>
			
 
				 
			
 
				-              <div
			
 
				-                v-for="question in questionList"
			
 
				-                :key="question.id"
			
 
				-                class="question-item"
			
 
				-                @click="showQuestionDetail(question)"
			
 
				-              >
			
 
				-                <div class="question-title">
			
 
				-                  {{ question.title }}
			
 
				-                  <div v-if="question.isHot" class="question-tag hot-tag">
			
 
				-                    {{ $t('questionPage["questionTagHot"]') }}
			
 
				-                  </div>
			
 
				-                  <div v-if="question.isNew" class="question-tag new-tag">
			
 
				-                    {{ $t('questionPage["questionTagNew"]') }}
			
 
				+              <template v-if="activeCategoryInfo">
			
 
				+                <div
			
 
				+                  v-for="(question, index) in activeCategoryInfo.lists"
			
 
				+                  :key="index"
			
 
				+                  class="question-item"
			
 
				+                  @click="showQuestionDetail(question)"
			
 
				+                >
			
 
				+                  <div class="question-title">
			
 
				+                    {{ question.title }}
			
 
				+                    <!-- <div v-if="question.isHot" class="question-tag hot-tag">
			
 
				+                      {{ $t('questionPage["questionTagHot"]') }}
			
 
				+                    </div>
			
 
				+                    <div v-if="question.isNew" class="question-tag new-tag">
			
 
				+                      {{ $t('questionPage["questionTagNew"]') }}
			
 
				+                    </div> -->
			
 
				                   </div>
			
 
				+                  <div class="question-preview" v-html="question.content"></div>
			
 
				                 </div>
			
 
				-                <div class="question-preview">{{ question.preview }}</div>
			
 
				-              </div>
			
 
				+              </template>
			
 
				             </div>
			
 
				           </template>
			
 
				 
			
@@ -118,21 +122,15 @@
 
				 
			
 
				             <div class="detail-header">
			
 
				               <h2>{{ currentQuestion.title }}</h2>
			
 
				-              <div class="meta">
			
 
				-                <span>{{
			
 
				-                  $t('system["updateTimeTxt"]', {
			
 
				-                    updateTime: formatDate(currentQuestion.updateTime, locale),
			
 
				-                  })
			
 
				-                }}</span>
			
 
				-                <span>{{
			
 
				-                  $t('questionPage["questionReadCount"]', { count: currentQuestion.views })
			
 
				-                }}</span>
			
 
				-              </div>
			
 
				             </div>
			
 
				 
			
 
				             <div class="detail-content" v-html="currentQuestion.content"></div>
			
 
				           </div>
			
 
				         </div>
			
 
				+
			
 
				+        <div class="loading-box" v-show="isLoading">
			
 
				+          <a-spin :spinning="isLoading" size="large" />
			
 
				+        </div>
			
 
				       </div>
			
 
				 
			
 
				       <!-- 分类导航侧边抽屉 -->
			
@@ -151,12 +149,12 @@
 
				             v-for="category in categoryList"
			
 
				             :key="category.id"
			
 
				             class="category-item"
			
 
				-            :class="{ active: activeCategory === category.id }"
			
 
				-            @click="changeCategory(category.id)"
			
 
				+            :class="{ active: activeCategoryId === category.id }"
			
 
				+            @click="changeCategory(category)"
			
 
				           >
			
 
				-            {{ category.name }}
			
 
				+            <label class="category-item__name">{{ category.name }}</label>
			
 
				             <span class="count">{{
			
 
				-              $t('questionPage["questionCategoryCountTxt"]', { count: category.count })
			
 
				+              $t('questionPage["questionCategoryCountTxt"]', { count: category.lists.length })
			
 
				             }}</span>
			
 
				           </div>
			
 
				         </div>
			
@@ -167,22 +165,32 @@
 
				     <div class="question-main__container question-main-normal width-1200">
			
 
				       <!-- 左侧分类导航 -->
			
 
				       <div class="question-sidebar">
			
 
				-        <div
			
 
				-          v-for="category in categoryList"
			
 
				-          :key="category.id"
			
 
				-          class="category-item"
			
 
				-          :class="{ active: activeCategory === category.id }"
			
 
				-          @click="changeCategory(category.id)"
			
 
				-        >
			
 
				-          {{ category.name }}
			
 
				-          <span class="count">{{
			
 
				-            $t('questionPage["questionCategoryCountTxt"]', { count: category.count })
			
 
				-          }}</span>
			
 
				-        </div>
			
 
				+        <a-skeleton-button
			
 
				+          :active="true"
			
 
				+          size="large"
			
 
				+          shape="default"
			
 
				+          block="true"
			
 
				+          v-if="isLoading"
			
 
				+        />
			
 
				+        <template v-else>
			
 
				+          <div
			
 
				+            v-for="category in categoryList"
			
 
				+            :key="category.id"
			
 
				+            class="category-item"
			
 
				+            :class="{ active: activeCategoryId === category.id }"
			
 
				+            @click="changeCategory(category)"
			
 
				+          >
			
 
				+            <label class="category-item__name">{{ category.name }}</label>
			
 
				+            <span class="count">{{
			
 
				+              $t('questionPage["questionCategoryCountTxt"]', { count: category.lists.length })
			
 
				+            }}</span>
			
 
				+          </div>
			
 
				+        </template>
			
 
				       </div>
			
 
				 
			
 
				       <!-- 右侧内容 -->
			
 
				       <div class="question-content">
			
 
				+        <!-- 问题列表 -->
			
 
				         <template v-if="!currentQuestion">
			
 
				           <!-- 搜索结果列表 -->
			
 
				           <div v-if="searchResults.length > 0" class="search-results">
			
@@ -199,25 +207,27 @@
 
				 
			
 
				           <!-- 问题列表 -->
			
 
				           <div v-else class="question-list">
			
 
				-            <h2>{{ getCategoryName(activeCategory) }}</h2>
			
 
				+            <h2>{{ activeCategoryInfo ? activeCategoryInfo.name : '' }}</h2>
			
 
				 
			
 
				-            <div
			
 
				-              v-for="question in questionList"
			
 
				-              :key="question.id"
			
 
				-              class="question-item"
			
 
				-              @click="showQuestionDetail(question)"
			
 
				-            >
			
 
				-              <div class="question-title">
			
 
				-                {{ question.title }}
			
 
				-                <div v-if="question.isHot" class="question-tag hot-tag">
			
 
				-                  {{ $t('questionPage["questionTagHot"]') }}
			
 
				-                </div>
			
 
				-                <div v-if="question.isNew" class="question-tag new-tag">
			
 
				-                  {{ $t('questionPage["questionTagNew"]') }}
			
 
				+            <template v-if="activeCategoryInfo">
			
 
				+              <div
			
 
				+                v-for="question in activeCategoryInfo.lists"
			
 
				+                :key="question.id"
			
 
				+                class="question-item"
			
 
				+                @click="showQuestionDetail(question)"
			
 
				+              >
			
 
				+                <div class="question-title">
			
 
				+                  {{ question.title }}
			
 
				+                  <!-- <div v-if="question.isHot" class="question-tag hot-tag">
			
 
				+                    {{ $t('questionPage["questionTagHot"]') }}
			
 
				+                  </div>
			
 
				+                  <div v-if="question.isNew" class="question-tag new-tag">
			
 
				+                    {{ $t('questionPage["questionTagNew"]') }}
			
 
				+                  </div> -->
			
 
				                 </div>
			
 
				+                <div class="question-preview" v-html="question.content"></div>
			
 
				               </div>
			
 
				-              <div class="question-preview">{{ question.preview }}</div>
			
 
				-            </div>
			
 
				+            </template>
			
 
				           </div>
			
 
				         </template>
			
 
				 
			
@@ -225,16 +235,6 @@
 
				         <div v-else class="question-detail">
			
 
				           <div class="detail-header">
			
 
				             <h2>{{ currentQuestion.title }}</h2>
			
 
				-            <div class="meta">
			
 
				-              <span>{{
			
 
				-                $t('system["updateTimeTxt"]', {
			
 
				-                  updateTime: formatDate(currentQuestion.updateTime, locale),
			
 
				-                })
			
 
				-              }}</span>
			
 
				-              <span>{{
			
 
				-                $t('questionPage["questionReadCount"]', { count: currentQuestion.views })
			
 
				-              }}</span>
			
 
				-            </div>
			
 
				           </div>
			
 
				 
			
 
				           <div class="detail-content" v-html="currentQuestion.content"></div>
			
@@ -263,6 +263,10 @@
 
				             </div> -->
			
 
				           </div>
			
 
				         </div>
			
 
				+
			
 
				+        <div class="loading-box" v-show="isLoading">
			
 
				+          <a-spin :spinning="isLoading" size="large" />
			
 
				+        </div>
			
 
				       </div>
			
 
				     </div>
			
 
				 
			
@@ -285,7 +289,7 @@
 
				           </svg>
			
 
				           <div>
			
 
				             <strong>{{ $t('questionPage["contactForPhoneTitle"]') }}</strong>
			
 
				-            <p>400-888-9999</p>
			
 
				+            <p>+852-30623063</p>
			
 
				             <p>{{ $t('questionPage["contactForPhoneWorkTime"]') }}</p>
			
 
				           </div>
			
 
				         </div>
			
@@ -304,7 +308,7 @@
 
				           </svg>
			
 
				           <div>
			
 
				             <strong>{{ $t('questionPage["contactForEmailTitle"]') }}</strong>
			
 
				-            <p>support@example.com</p>
			
 
				+            <p>vavabuy@163.com</p>
			
 
				             <p>{{ $t('questionPage["contactForEmailWorkTime"]') }}</p>
			
 
				           </div>
			
 
				         </div>
			
@@ -315,8 +319,8 @@
 
				 
			
 
				 <script setup lang="ts">
			
 
				 import { useI18n } from 'vue-i18n'
			
 
				-import { storeToRefs } from 'pinia'
			
 
				 import { ref } from 'vue'
			
 
				+import { storeToRefs } from 'pinia'
			
 
				 import useSystemStore from '@/stores/useSystemStore'
			
 
				 import useData from './hooks/useData'
			
 
				 
			
@@ -326,13 +330,12 @@ const { locale } = storeToRefs(systemStore)
 
				 
			
 
				 const {
			
 
				   categoryList,
			
 
				-  activeCategory,
			
 
				-  questionList,
			
 
				+  isLoading,
			
 
				+  activeCategoryId,
			
 
				+  activeCategoryInfo,
			
 
				   currentQuestion,
			
 
				-  questions,
			
 
				   searchQuery,
			
 
				   searchResults,
			
 
				-  getCategoryName,
			
 
				   changeCategory,
			
 
				   showQuestionDetail,
			
 
				   searchQuestions,
			
@@ -367,6 +370,13 @@ const formatDate = (dateString: string, lang: string) => {
 
				   margin: 0 auto 3.125rem;
			
 
				 }
			
 
				 
			
 
				+.loading-box {
			
 
				+  position: absolute;
			
 
				+  top: 50%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -50%);
			
 
				+}
			
 
				+
			
 
				 .width-1200 {
			
 
				   padding: 0 15px 60px;
			
 
				   padding: 0 0.9375rem 3.75rem;
			
@@ -439,13 +449,14 @@ const formatDate = (dateString: string, lang: string) => {
 
				   gap: 1.875rem;
			
 
				 
			
 
				   .question-sidebar {
			
 
				-    width: 250px;
			
 
				-    width: 15.625rem;
			
 
				-    width: 250px;
			
 
				-    width: 15.625rem;
			
 
				+    min-width: 250px;
			
 
				+    min-width: 15.625rem;
			
 
				+    max-width: 300px;
			
 
				+    max-width: 18.75rem;
			
 
				     flex-shrink: 0;
			
 
				 
			
 
				     .category-item {
			
 
				+      flex: 1;
			
 
				       padding: 12px 15px;
			
 
				       padding: 0.75rem 0.9375rem;
			
 
				       border-left: 4px solid transparent;
			
@@ -466,10 +477,21 @@ const formatDate = (dateString: string, lang: string) => {
 
				     .category-item.active {
			
 
				       border-left-color: var(--color-active);
			
 
				       background: #e3f2fd;
			
 
				-      font-weight: bold;
			
 
				+      // font-weight: bold;
			
 
				+    }
			
 
				+
			
 
				+    .category-item__name {
			
 
				+      flex: 1;
			
 
				+      padding-right: 12px;
			
 
				+      padding-right: 0.75rem;
			
 
				+      /*  white-space: nowrap;
			
 
				+      overflow: hidden;
			
 
				+      text-overflow: ellipsis; */
			
 
				     }
			
 
				 
			
 
				     .count {
			
 
				+      min-width: 64px;
			
 
				+      min-width: 4rem;
			
 
				       color: #757575;
			
 
				       font-size: 0.9rem;
			
 
				     }
			
@@ -533,8 +555,13 @@ const formatDate = (dateString: string, lang: string) => {
 
				   }
			
 
				 
			
 
				   .question-preview {
			
 
				+    max-height: 24px;
			
 
				+    max-height: 1.5rem;
			
 
				     color: #666;
			
 
				     font-size: 0.9375rem;
			
 
				+    white-space: nowrap;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				   }
			
 
				 
			
 
				   .question-tag {
			
@@ -570,16 +597,6 @@ const formatDate = (dateString: string, lang: string) => {
 
				         margin-bottom: 0.625rem;
			
 
				         text-align: center;
			
 
				       }
			
 
				-
			
 
				-      .meta {
			
 
				-        display: flex;
			
 
				-        justify-content: center;
			
 
				-        gap: 15px;
			
 
				-        gap: 0.9375rem;
			
 
				-        color: #757575;
			
 
				-        font-size: 15px;
			
 
				-        font-size: 0.9375rem;
			
 
				-      }
			
 
				     }
			
 
				 
			
 
				     .detail-footer {
			
@@ -640,9 +657,16 @@ const formatDate = (dateString: string, lang: string) => {
 
				   }
			
 
				 }
			
 
				 
			
 
				+.question-main-normal {
			
 
				+  position: relative;
			
 
				+  min-height: 370px;
			
 
				+}
			
 
				+
			
 
				 .question-main-768 {
			
 
				+  position: relative;
			
 
				   display: none;
			
 
				   padding-bottom: 0;
			
 
				+  min-height: 320px;
			
 
				 }
			
 
				 
			
 
				 .question-main__container-768 {
			
@@ -667,6 +691,7 @@ const formatDate = (dateString: string, lang: string) => {
 
				       display: flex;
			
 
				       justify-content: space-between;
			
 
				       align-items: center;
			
 
				+      align-items: flex-start;
			
 
				       margin-bottom: 8px;
			
 
				       margin-bottom: 0.5rem;
			
 
				       color: var(--color-active);
			
@@ -675,6 +700,8 @@ const formatDate = (dateString: string, lang: string) => {
 
				     }
			
 
				 
			
 
				     .category-menu-btn {
			
 
				+      min-width: 60px;
			
 
				+      min-width: 3.75rem;
			
 
				       display: flex;
			
 
				       align-items: center;
			
 
				       color: #333;
			
@@ -798,6 +825,11 @@ const formatDate = (dateString: string, lang: string) => {
 
				 </style>
			
 
				 
			
 
				 <style>
			
 
				+.question-sidebar .ant-skeleton.ant-skeleton-element,
			
 
				+.question-sidebar .ant-skeleton.ant-skeleton-element .ant-skeleton-button {
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				 /* 富文本内容样式 */
			
 
				 .detail-content h3,
			
 
				 .detail-content h4 {
			
@@ -832,6 +864,11 @@ const formatDate = (dateString: string, lang: string) => {
 
				   margin: 0.5rem 0;
			
 
				 }
			
 
				 
			
 
				+.question-content img,
			
 
				+.detail-content img {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+
			
 
				 .payment-method {
			
 
				   margin: 20px 0;
			
 
				   margin: 1.25rem 0;
			
--- a/src/views/Home/modules/Banners/index.vue
+++ b/src/views/Home/modules/Banners/index.vue
@@ -6,13 +6,9 @@
 
				     <!-- content -->
			
 
				     <div class="banners__content">
			
 
				       <div class="banners__content-title">
			
 
				-        <span>{{ $t('paragraph["国际运转·一站解决"]') }}</span>
			
 
				-      </div>
			
 
				-      <div class="banners__content-desc">
			
 
				-        {{
			
 
				-          $t('paragraph["连接全球优质商品，一键下单无忧，实时查看订单进程，享受便捷购物体验。"]')
			
 
				-        }}
			
 
				+        <span>{{ $t('paragraph["bannerTitle"]') }}</span>
			
 
				       </div>
			
 
				+      <div class="banners__content-desc" v-html="$t(`paragraph['bannerDesc']`)"></div>
			
 
				       <div class="banners__content-btn" @click="goRegister">
			
 
				         <span>{{ $t('system["立即免费注册"]') }}</span>
			
 
				       </div>
			
@@ -71,6 +67,7 @@ const goRegister = function () {
 
				     font-size: 18px;
			
 
				     font-size: 1.125rem;
			
 
				     color: rgba(255, 255, 255, 0.8);
			
 
				+    line-height: 2;
			
 
				     transition: all 0.3s;
			
 
				   }
			
 
				 
			
--- a/src/views/Home/modules/WrapFive/index.vue
+++ b/src/views/Home/modules/WrapFive/index.vue
@@ -14,8 +14,13 @@
 
				             </div>
			
 
				             <div class="swiper-slide__card-body">
			
 
				               <div class="swiper-slide__card-avatar">
			
 
				-                <img src="@/public/images/avatar01.png" alt="" />
			
 
				-                <img src="@/public/images/avatar02.png" alt="" />
			
 
				+                <img src="@/public/images/avatar_1.jpg" alt="" v-if="i == 0" />
			
 
				+                <img src="@/public/images/avatar_3.jpg" alt="" v-if="i == 1" />
			
 
				+                <img src="@/public/images/avatar_4.jpg" alt="" v-if="i == 2" />
			
 
				+                <img src="../../../../public/images/logo_icon.png" />
			
 
				+                <!-- <img src="../../../../public/images/icons/xinxilan_logo_icon.png" v-if="i == 0" />
			
 
				+                <img src="../../../../public/images/icons/aodaliya_logo_icon.png" v-if="i == 1" />
			
 
				+                <img src="../../../../public/images/icons/yidali_logo_icon.png" v-if="i == 2" /> -->
			
 
				               </div>
			
 
				               <div>
			
 
				                 <div class="swiper-slide__card-name">{{ $t(`system["${item.name}"]`) }}</div>
			
@@ -52,21 +57,22 @@ onMounted(() => {
 
				 
			
 
				 const dataList = [
			
 
				   {
			
 
				-    name: '囧二',
			
 
				+    name: 'Lawrence',
			
 
				     address: '新西兰',
			
 
				-    avatar: [],
			
 
				+    avatar: ['../../../../public/images/icons/xinxilan_logo_icon.png'],
			
 
				     content: '如果你想买其他东西，没有比 Vava buy 更好的了',
			
 
				+    locale: '',
			
 
				   },
			
 
				   {
			
 
				-    name: '囧二',
			
 
				+    name: 'John',
			
 
				     address: '澳大利亚',
			
 
				-    avatar: [],
			
 
				-    content: '如果你想买其他东西，没有比 Vava buy 更好的了',
			
 
				+    avatar: ['../../../../public/images/icons/aodaliya_logo_icon.png'],
			
 
				+    content: '太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻',
			
 
				   },
			
 
				   {
			
 
				-    name: '囧二',
			
 
				+    name: 'Anna',
			
 
				     address: '意大利',
			
 
				-    avatar: [],
			
 
				+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
			
 
				     content: '非常易于使用，包装很精美，会收获很多惊喜',
			
 
				   },
			
 
				 ]
			
@@ -172,10 +178,20 @@ const dataList = [
 
				     }
			
 
				 
			
 
				     .swiper-slide__card-avatar img {
			
 
				+      width: 56px;
			
 
				+      width: 3.5rem;
			
 
				+      height: 56px;
			
 
				+      height: 3.5rem;
			
 
				+      border-radius: 50%;
			
 
				       position: relative;
			
 
				       z-index: 1;
			
 
				     }
			
 
				 
			
 
				+    .swiper-slide__card-avatar img:nth-child(1) {
			
 
				+      box-sizing: content-box;
			
 
				+      border: 3px solid #fff;
			
 
				+    }
			
 
				+
			
 
				     .swiper-slide__card-avatar img:nth-child(2) {
			
 
				       position: absolute;
			
 
				       left: 30px;
			
--- a/src/views/Home/modules/WrapTwo/index.vue
+++ b/src/views/Home/modules/WrapTwo/index.vue
@@ -8,7 +8,12 @@
 
				       </div>
			
 
				       <div class="wrap__two-content">
			
 
				         <div class="wrap__two-steps">
			
 
				-          <div v-for="(step, i) in stepList" :key="i" class="wrap__two-step-item">
			
 
				+          <div
			
 
				+            v-for="(step, i) in stepList"
			
 
				+            :key="i"
			
 
				+            class="wrap__two-step-item"
			
 
				+            :class="[locale == 'en' ? 'wrap__two-step-item__en' : '']"
			
 
				+          >
			
 
				             <img
			
 
				               v-if="i == 0"
			
 
				               src="@/public/images/icons/address_icon.png"
			
@@ -43,12 +48,17 @@
 
				 
			
 
				 <script setup lang="ts">
			
 
				 import { reactive } from 'vue'
			
 
				+import { storeToRefs } from 'pinia'
			
 
				+import useSystemStore from '@/stores/useSystemStore'
			
 
				 
			
 
				 interface IStep {
			
 
				   name: string
			
 
				   desc: string
			
 
				 }
			
 
				 
			
 
				+const systemStore = useSystemStore()
			
 
				+const { locale } = storeToRefs(systemStore)
			
 
				+
			
 
				 const stepList = reactive<IStep[]>([
			
 
				   {
			
 
				     name: '注册账户',
			
@@ -117,11 +127,19 @@ const goRegister = function () {
 
				     flex-direction: column;
			
 
				     align-items: center;
			
 
				     padding: 0 15px;
			
 
				-    padding: 0 1.875rem;
			
 
				+    padding: 0 1rem;
			
 
				     color: #fff;
			
 
				     text-align: center;
			
 
				   }
			
 
				 
			
 
				+  .wrap__two-step-item__en {
			
 
				+    flex: 3;
			
 
				+  }
			
 
				+
			
 
				+  .wrap__two-step-item__en:nth-child(2) {
			
 
				+    flex: 4;
			
 
				+  }
			
 
				+
			
 
				   .wrap__two-step-icon {
			
 
				     height: 58px;
			
 
				     height: 3.625rem;
			
--- a/src/views/Layout/index.vue
+++ b/src/views/Layout/index.vue
@@ -42,6 +42,8 @@ import Footer from './modules/Footer/index.vue'
 
				 
			
 
				   .layout__main {
			
 
				     flex: 1;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				     width: 100%;
			
 
				     height: auto;
			
 
				   }
			
--- a/src/views/Layout/modules/Footer/hooks/useLink.ts
+++ b/src/views/Layout/modules/Footer/hooks/useLink.ts
@@ -1,102 +0,0 @@
 
				-import { reactive, ref, watch } from 'vue'
			
 
				-import { useRoute, useRouter } from 'vue-router'
			
 
				-
			
 
				-
			
 
				-export interface ILink {
			
 
				-  text: string;
			
 
				-  path?: string;
			
 
				-  id?: string | number;
			
 
				-  url?: string;
			
 
				-}
			
 
				-
			
 
				-
			
 
				-function useLink() {
			
 
				-
			
 
				-
			
 
				-  const linkList1 = reactive<ILink[]>([
			
 
				-    { path: '/article/article_details', id: '123', text: 'VAVA BUY 是如何工作的' },
			
 
				-    { path: '/article/article_details', id: '456', text: '为什么选择 VAVA BUY' },
			
 
				-    { path: '/article/article_details', id: '3', text: '您所在国家/地区的运费和价格' },
			
 
				-    { path: '/article/article_details', id: '4', text: '报名' },
			
 
				-    { path: '/article/article_details', id: '5', text: '汇率' },
			
 
				-    { path: '/article/article_details', id: '6', text: '不能寄送的物品' },
			
 
				-    { path: '/faq', id: '', text: '常见问题' },
			
 
				-    { path: '/article/article_details', id: '8', text: '日志' },
			
 
				-    { path: '/article/article_details', id: '9', text: '您的隐私权利' },
			
 
				-  ])
			
 
				-
			
 
				-  const linkList2 = reactive<ILink[]>([
			
 
				-    { path: '/article/article_details', id: '10', text: '关于 VAVA BUY' },
			
 
				-    { path: '/article/article_details', id: '11', text: 'VAVA BUY 评论' },
			
 
				-    { path: '/article/article_details', id: '12', text: '新闻与动态' },
			
 
				-    { path: '/article/article_details', id: '13', text: 'VAVA BUY.com 的招聘信息' },
			
 
				-    { path: '/article/article_details', id: 'abcdefg', text: '与 VAVA BUY 合作' },
			
 
				-    { path: '/article/article_details', id: '15', text: '联系我们' },
			
 
				-    { path: '/article/article_details', id: '16', text: '网站地图' },
			
 
				-    { path: '/article/article_details', id: '17', text: '奖学金' },
			
 
				-    { path: '/article/article_details', id: '18', text: '顶级商店' },
			
 
				-  ])
			
 
				-
			
 
				-  const linkList3 = reactive<ILink[]>([
			
 
				-    { path: '/article/article_details', id: '19', text: 'Facebook' },
			
 
				-    { path: '/article/article_details', id: '20', text: '社交平台' },
			
 
				-    { path: '/article/article_details', id: '21', text: 'X（原 Twitter）' },
			
 
				-    { url: 'https://www.baidu.com', text: '获取 VAVA BUY 应用程序' },
			
 
				-  ])
			
 
				-
			
 
				-
			
 
				-  const route = useRoute()
			
 
				-  const router = useRouter()
			
 
				-  const currentPath = ref<string>('')
			
 
				-  const currentId = ref<string | number | null>(null)
			
 
				-
			
 
				-
			
 
				-  // 获取最新路由信息（路径&id）
			
 
				-  watch(
			
 
				-    () => route.fullPath,
			
 
				-    (newVal, oldVal) => {
			
 
				-      console.log('route', route)
			
 
				-      currentPath.value = route.path
			
 
				-      currentId.value = !!route.query.id ? (route.query.id as (string | number)) : null
			
 
				-    },
			
 
				-    { immediate: true }
			
 
				-  )
			
 
				-
			
 
				-
			
 
				-  // 跳转回调
			
 
				-  const handleTextLinkClick = function (linkInfo: ILink, id?: string | number) {
			
 
				-
			
 
				-    if (!linkInfo || (!linkInfo.path && !linkInfo.url)) return
			
 
				-
			
 
				-    if (linkInfo.url) {
			
 
				-      window.open(linkInfo.url, '_blank')
			
 
				-    }
			
 
				-    else if (linkInfo.id) {
			
 
				-      router.push({
			
 
				-        path: linkInfo.path,
			
 
				-        query: {
			
 
				-          id: linkInfo.id ? linkInfo.id : ''
			
 
				-        }
			
 
				-      })
			
 
				-    }
			
 
				-    else {
			
 
				-      router.push({ path: linkInfo.path })
			
 
				-    }
			
 
				-  }
			
 
				-
			
 
				-  return {
			
 
				-    linkList1,
			
 
				-    linkList2,
			
 
				-    linkList3,
			
 
				-    route,
			
 
				-    router,
			
 
				-    currentPath,
			
 
				-    currentId,
			
 
				-    handleTextLinkClick
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-
			
 
				-
			
 
				-
			
 
				-export default useLink
			
--- a/src/views/Layout/modules/Footer/index.vue
+++ b/src/views/Layout/modules/Footer/index.vue
@@ -6,69 +6,53 @@
 
				           <img src="@/public/images/logo.png" class="footer-friendlink__logo" />
			
 
				           <div class="footer-friendlink__baseinfo">
			
 
				             <div
			
 
				-              v-for="(item, i) in baseInfoList"
			
 
				-              :key="i"
			
 
				               class="footer-friendlink__baseinfo-item"
			
 
				+              style="font-size: 18px; font-size: 1.125rem; margin-bottom: 10px"
			
 
				             >
			
 
				-              <span class="footer-friendlink__baseinfo-label">{{ item.label }}</span>
			
 
				-              <span class="footer-friendlink__baseinfo-content">{{ item.content }}</span>
			
 
				+              <span class="footer-friendlink__baseinfo-label">{{ $t('system.companyName') }} </span>
			
 
				+            </div>
			
 
				+            <div class="footer-friendlink__baseinfo-item">
			
 
				+              <span class="footer-friendlink__baseinfo-label">{{ $t('system.emailLabel') }}: </span>
			
 
				+              <span class="footer-friendlink__baseinfo-content">vavabuy@163.com</span>
			
 
				+            </div>
			
 
				+            <div class="footer-friendlink__baseinfo-item">
			
 
				+              <span class="footer-friendlink__baseinfo-label"
			
 
				+                >{{ $t('system.hongkongEmailLabel') }}:
			
 
				+              </span>
			
 
				+              <span class="footer-friendlink__baseinfo-content">296635202@qq.com </span>
			
 
				+            </div>
			
 
				+            <div class="footer-friendlink__baseinfo-item">
			
 
				+              <span class="footer-friendlink__baseinfo-label"
			
 
				+                >{{ $t('system.addressLabel') }}:
			
 
				+              </span>
			
 
				+              <span class="footer-friendlink__baseinfo-content"
			
 
				+                >{{ $t('system.companyAddress') }}
			
 
				+              </span>
			
 
				+            </div>
			
 
				+            <div class="footer-friendlink__baseinfo-item">
			
 
				+              <span class="footer-friendlink__baseinfo-label"
			
 
				+                >{{ $t('system.hongkongAddressLabel') }}:
			
 
				+              </span>
			
 
				+              <span class="footer-friendlink__baseinfo-content"
			
 
				+                >{{ $t('system.hongkongCompanyAddress') }}
			
 
				+              </span>
			
 
				             </div>
			
 
				           </div>
			
 
				         </div>
			
 
				-        <div class="footer-friendlink__box">
			
 
				-          <div
			
 
				-            v-for="(link, i) in linkList1"
			
 
				-            :key="i"
			
 
				-            class="footer-friendlink__item"
			
 
				-            @click="handleTextLinkClick(link, link.id ? link.id : '')"
			
 
				-          >
			
 
				-            <span
			
 
				-              class="text_hover_underline"
			
 
				-              :class="[
			
 
				-                (currentId && currentId == link.id && currentPath == link.path) ||
			
 
				-                (!currentId && currentPath == link.path)
			
 
				-                  ? 'text_hover_underline--active'
			
 
				-                  : '',
			
 
				-              ]"
			
 
				-              >{{ $t(`textLink["${link.text}"]`) }}</span
			
 
				-            >
			
 
				-          </div>
			
 
				-        </div>
			
 
				-        <div class="footer-friendlink__box">
			
 
				-          <div
			
 
				-            v-for="(link, i) in linkList2"
			
 
				-            :key="i"
			
 
				-            class="footer-friendlink__item"
			
 
				-            @click="handleTextLinkClick(link, link.id ? link.id : '')"
			
 
				-          >
			
 
				-            <span
			
 
				-              class="text_hover_underline"
			
 
				-              :class="[
			
 
				-                (currentId && currentId == link.id && currentPath == link.path) ||
			
 
				-                (!currentId && currentPath == link.path)
			
 
				-                  ? 'text_hover_underline--active'
			
 
				-                  : '',
			
 
				-              ]"
			
 
				-              >{{ $t(`textLink["${link.text}"]`) }}</span
			
 
				-            >
			
 
				-          </div>
			
 
				-        </div>
			
 
				-        <div class="footer-friendlink__box">
			
 
				+        <div class="footer-friendlink__box" v-for="(itemInfo, i) in [...linkList]" :key="i">
			
 
				+          <div class="footer-friendlink__box-head">{{ itemInfo.name }}</div>
			
 
				           <div
			
 
				-            v-for="(link, i) in linkList3"
			
 
				-            :key="i"
			
 
				+            v-for="(info, index) in itemInfo.lists"
			
 
				+            :key="index"
			
 
				             class="footer-friendlink__item"
			
 
				-            @click="handleTextLinkClick(link, link.id ? link.id : '')"
			
 
				+            @click="updateActiveInfo(itemInfo, info, goArticleDetailPage)"
			
 
				           >
			
 
				             <span
			
 
				               class="text_hover_underline"
			
 
				               :class="[
			
 
				-                (currentId && currentId == link.id && currentPath == link.path) ||
			
 
				-                (!currentId && currentPath == link.path)
			
 
				-                  ? 'text_hover_underline--active'
			
 
				-                  : '',
			
 
				+                activeLinkId && activeLinkId == info.id ? 'text_hover_underline--active' : '',
			
 
				               ]"
			
 
				-              >{{ $t(`textLink["${link.text}"]`) }}</span
			
 
				+              >{{ info.title }}</span
			
 
				             >
			
 
				           </div>
			
 
				         </div>
			
@@ -95,27 +79,55 @@
 
				 
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-import useLink from './hooks/useLink'
			
 
				-
			
 
				-const {
			
 
				-  linkList1,
			
 
				-  linkList2,
			
 
				-  linkList3,
			
 
				-  route,
			
 
				-  router,
			
 
				-  currentPath,
			
 
				-  currentId,
			
 
				-  handleTextLinkClick,
			
 
				-} = useLink()
			
 
				-
			
 
				-const baseInfoList = [
			
 
				-  { label: '', content: '4299 Express Lane' },
			
 
				-  { label: '', content: 'Sarasota,FL 34249 USA' },
			
 
				-  { label: 'WhatsApp Message: ', content: '1.941.225.7374' },
			
 
				-  { label: 'Phone: ', content: '1.941.227.4444' },
			
 
				-  { label: 'Fax: ', content: '1.941.827.2985' },
			
 
				-  { label: 'Local Time: ', content: '04:19' },
			
 
				-]
			
 
				+import { watch, computed } from 'vue'
			
 
				+import { useRoute, useRouter } from 'vue-router'
			
 
				+import { storeToRefs } from 'pinia'
			
 
				+import useSystemStore from '@/stores/useSystemStore'
			
 
				+import useFooterStore from '@/stores/useFooterStore'
			
 
				+
			
 
				+// system store
			
 
				+const systemStore = useSystemStore()
			
 
				+const { locale, screenWidth } = storeToRefs(systemStore)
			
 
				+// footer store
			
 
				+const footerStore = useFooterStore()
			
 
				+const { linkList, activeLinkId, activeLinkInfo, activeLinkCateInfo } = storeToRefs(footerStore)
			
 
				+const { fetchHelpDatas, updateActiveInfo } = footerStore
			
 
				+// 路由对象
			
 
				+const route = useRoute()
			
 
				+const router = useRouter()
			
 
				+
			
 
				+const linkListCount = computed<number>(() => {
			
 
				+  let count = 4
			
 
				+  if (screenWidth.value >= 1200) {
			
 
				+    count = 4
			
 
				+  } else if (screenWidth.value > 824) {
			
 
				+    count = 3
			
 
				+  } else if (screenWidth.value > 524) {
			
 
				+    count = 2
			
 
				+  } else {
			
 
				+    count = 1
			
 
				+  }
			
 
				+  return count
			
 
				+})
			
 
				+
			
 
				+// 获取数据列表
			
 
				+fetchHelpDatas(locale.value)
			
 
				+
			
 
				+// 跳转文章详情页
			
 
				+const goArticleDetailPage = function () {
			
 
				+  if (!activeLinkInfo.value && !activeLinkId.value) return
			
 
				+  router.push({
			
 
				+    path: '/article/article_details',
			
 
				+    query: {
			
 
				+      id: activeLinkId.value
			
 
				+        ? activeLinkId.value
			
 
				+        : activeLinkInfo.value
			
 
				+        ? activeLinkInfo.value.id
			
 
				+        : '',
			
 
				+      cateId: activeLinkCateInfo.value ? activeLinkCateInfo.value.id : '',
			
 
				+    },
			
 
				+  })
			
 
				+}
			
 
				 </script>
			
 
				 
			
 
				 
			
@@ -136,7 +148,9 @@ const baseInfoList = [
 
				   }
			
 
				 
			
 
				   .footer-friendlink__box {
			
 
				-    width: auto;
			
 
				+    // width: 25%;
			
 
				+    max-width: 360px;
			
 
				+    max-width: 22.5rem;
			
 
				     padding: 6px 10px 10px;
			
 
				     padding: 0.375rem 0.625rem 0.625rem;
			
 
				   }
			
@@ -148,13 +162,27 @@ const baseInfoList = [
 
				   .footer-friendlink__box .footer-friendlink__logo {
			
 
				     width: 150px;
			
 
				     width: 9.375rem;
			
 
				-    margin-bottom: 36px;
			
 
				-    margin-bottom: 2.25rem;
			
 
				+    margin-bottom: 20px;
			
 
				+    margin-bottom: 1.25rem;
			
 
				+  }
			
 
				+
			
 
				+  .footer-friendlink__box .footer-friendlink__box-head {
			
 
				+    margin-bottom: 24px;
			
 
				+    margin-bottom: 1.5rem;
			
 
				+    font-size: 18px;
			
 
				+    font-size: 1.125rem;
			
 
				+    font-weight: 500;
			
 
				+    color: #222;
			
 
				+  }
			
 
				+
			
 
				+  .footer-friendlink__baseinfo {
			
 
				+    max-width: 360px;
			
 
				+    max-width: 22.5rem;
			
 
				   }
			
 
				 
			
 
				   .footer-friendlink__baseinfo-item {
			
 
				-    margin-bottom: 4px;
			
 
				-    margin-bottom: 0.25rem;
			
 
				+    margin-bottom: 6px;
			
 
				+    margin-bottom: 0.375rem;
			
 
				     font-family: Poppins;
			
 
				     font-size: 14px;
			
 
				     font-size: 0.875rem;
			
@@ -162,10 +190,12 @@ const baseInfoList = [
 
				     color: #3d3d3d;
			
 
				   }
			
 
				 
			
 
				-  .footer-friendlink__baseinfo-item:last-child {
			
 
				-    margin-bottom: 0;
			
 
				-    margin-top: 20px;
			
 
				-    margin-top: 1.25rem;
			
 
				+  .footer-friendlink__baseinfo-label {
			
 
				+    color: #000;
			
 
				+  }
			
 
				+
			
 
				+  .footer-friendlink__baseinfo-content {
			
 
				+    color: #555;
			
 
				   }
			
 
				 
			
 
				   .footer-friendlink__item {
			
@@ -206,4 +236,4 @@ const baseInfoList = [
 
				 @import url(./css/footer@1024.less);
			
 
				 @import url(./css/footer@768.less);
			
 
				 @import url(./css/footer@512.less);
			
 
				-</style>
			
 
				+</style>./hooks/useData
			
--- a/src/views/Layout/modules/Header/hooks/useLinkList.ts
+++ b/src/views/Layout/modules/Header/hooks/useLinkList.ts
@@ -6,8 +6,8 @@ import { useRoute, useRouter } from 'vue-router'
 
				 
			
 
				 export interface ITextLink {
			
 
				   text: string;
			
 
				-  path?: string;
			
 
				   id?: string | number;
			
 
				+  path?: string;
			
 
				   url?: string;
			
 
				 }
			
 
				 
			
@@ -18,7 +18,7 @@ function useLinkList() {
 
				     {
			
 
				       text: '与 VAVA BUY 合作',
			
 
				       path: '/article/article_details',
			
 
				-      id: 'abcdefg',
			
 
				+      id: 'connect',
			
 
				     },
			
 
				   ])
			
 
				 
			
@@ -26,17 +26,17 @@ function useLinkList() {
 
				     {
			
 
				       text: '如何运作',
			
 
				       path: '/article/article_details',
			
 
				-      id: '123',
			
 
				+      id: 'works',
			
 
				     },
			
 
				     {
			
 
				       text: '为什么选择 VAVA BUY',
			
 
				       path: '/article/article_details',
			
 
				-      id: '456',
			
 
				+      id: 'about',
			
 
				     },
			
 
				     {
			
 
				       text: '优势',
			
 
				       path: '/article/article_details',
			
 
				-      id: '789',
			
 
				+      id: 'superiority',
			
 
				     },
			
 
				     {
			
 
				       text: '在 VAVA BUY 购物',
			
@@ -73,7 +73,8 @@ function useLinkList() {
 
				       router.push({
			
 
				         path: linkInfo.path,
			
 
				         query: {
			
 
				-          id: linkInfo.id ? linkInfo.id : ''
			
 
				+          id: linkInfo.id ? linkInfo.id : '',
			
 
				+          type: 'header'
			
 
				         }
			
 
				       })
			
 
				     }
			
--- a/src/views/Layout/modules/Header/index.vue
+++ b/src/views/Layout/modules/Header/index.vue
@@ -160,6 +160,14 @@ const { textLinkList, textLinkList2, route, router, currentPath, currentId, hand
 
				 const onLocaleChange = function (info: ILocale) {
			
 
				   systemStore.toggleLocale(info)
			
 
				   i18n.locale.value = info.value
			
 
				+  const historyLength = window.history.length
			
 
				+  if (historyLength > 1) {
			
 
				+    window.history.go(-historyLength + 2)
			
 
				+  }
			
 
				+  router.replace('/')
			
 
				+  setTimeout(() => {
			
 
				+    window.location.reload()
			
 
				+  })
			
 
				 }
			
 
				 
			
 
				 // 跳转首页回调
			
--- a/src/views/Layout/modules/Main/index.vue
+++ b/src/views/Layout/modules/Main/index.vue
@@ -11,4 +11,8 @@ import { RouterView } from 'vue-router'
 
				 
			
 
				 
			
 
				 <style lang="less" scoped>
			
 
				+#main__container {
			
 
				+  position: relative;
			
 
				+  flex: 1;
			
 
				+}
			
 
				 </style>
			
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,4 +15,8 @@ export default defineConfig({
 
				       '@': fileURLToPath(new URL('./src', import.meta.url))
			
 
				     },
			
 
				   },
			
 
				+  server: {
			
 
				+    port: 4000,
			
 
				+    host: '0.0.0.0'
			
 
				+  }
			
 
				 })