完成官网首版开发

.editorconfig copy

@@ -1,9 +0,0 @@
-[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
-charset = utf-8
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-end_of_line = lf
-max_line_length = 100

src/assets/animation.css

@@ -21,4 +21,10 @@
 .text_hover_underline:hover::after {
   width: 100%;
 }
-/* -------------------- 文本 hover 下划线 end -------------------- */
+/* -------------------- 文本 hover 下划线 end -------------------- */
+
+
+
+.trans-300 {
+  transition: all 0.3s;
+}

src/assets/variable.css

@@ -1,8 +1,17 @@
 :root {
   --font-size: 16px;
+  --font-size: 1rem;
   --font-color: #333;
   --color-active: #3670f7;
 
   --layout-width-1200: calc(100vw * 0.625);
   --layout-width-1024: 100vw;
+}
+
+
+
+@media screen and (max-width: 768px) {
+  :root {
+    /* --font-size: 14px; */
+  }
 }

src/locale/index.ts

@@ -1,9 +1,18 @@
 import { createI18n } from 'vue-i18n'
-import en from './modules/en'
-import zh from './modules/zh'
+import en from './lang/en'
+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') : 'zhCN'
+}
+
+
+// 创建 i18n 实例
 const i18n = createI18n({
-  locale: 'zhCN',
+  legacy: false,
+  locale: (getCurrentLang() as string),
   fallbackLocale: 'zhCN',
   messages: {
     en: en,

src/main.ts

@@ -6,7 +6,9 @@ import { createPinia } from 'pinia'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 import i18n from '@/locale'
-import "swiper/css/swiper.min.css";
+import "swiper/css/swiper.min.css"
+
+import "@/utils/rem"
 
 import App from './App.vue'
 import router from './router'

src/stores/useSystemStore.ts

@@ -1,5 +1,5 @@
-import locale from 'ant-design-vue/es/locale-provider'
 import { defineStore } from 'pinia'
+import { getCurrentLang } from '@/locale/index'
 
 
 
@@ -19,7 +19,7 @@ export interface ILocale {
 
 const useSystemStore = defineStore('system', {
   state: (): ISystemState => ({
-    locale: !!localStorage.getItem('locale') && localStorage.getItem('locale') !== 'null' && localStorage.getItem('locale') !== 'undefine' ? (localStorage.getItem('locale') as string) : 'zhCN',
+    locale: getCurrentLang() as string,
     localeList: [
       { name: '简体中文', value: 'zhCN' },
       { name: 'English', value: 'en' },
@@ -27,9 +27,9 @@ const useSystemStore = defineStore('system', {
   }),
 
   getters: {
-    localeInfo: function(): ILocale | null {
+    localeInfo: function(): ILocale {
       const result = this.localeList.find((item: ILocale) => (item.value == this.locale))
-      return result ? result : null
+      return result ? result : this.localeList[0]
     }
   },
 
@@ -37,7 +37,7 @@ const useSystemStore = defineStore('system', {
     toggleLocale(localeInfo: ILocale) {
       if (localeInfo) {
         this.locale = localeInfo.value
-        localStorage.setItem('locale', locale.value)
+        localStorage.setItem('locale', localeInfo.value)
       }
     }
   }

src/utils/rem.ts

@@ -0,0 +1,16 @@
+// 基准大小
+const baseSize = 16
+
+// 设置 rem
+function setRem () {
+  let scale = document.documentElement.clientWidth / 1920
+  scale = scale >= 0.875 ? scale : 0.875
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 1.125) + 'px'
+}
+
+// 初始化
+setRem()
+
+window.onresize = function () {
+  setRem()
+}

src/views/Home/modules/Banners/css/styles@1024.less

@@ -1,17 +1,19 @@
 @media screen and (max-width: 1024px) {
   .banners {
   
-    .banners__image {
+   /*  .banners__image {
       min-height: 300px;
-    }
+    } */
   
   
     .banners__content-title {
       font-size: 38px;
+      font-size: 2.375rem;
     }
   
     .banners__content-desc {
       font-size: 16px;
+      font-size: 1rem;
     }
   }
 }

src/views/Home/modules/Banners/css/styles@1200.less

@@ -1,18 +1,20 @@
 @media screen and (max-width: 1200px) {
   .banners {
   
-    .banners__image {
+    /* .banners__image {
       min-height: 300px;
-    }
+    } */
   
   
     .banners__content-title {
       font-size: 38px;
+      font-size: 2.375rem;
     }
   
     .banners__content-desc {
       margin: 30px 0 60px;
       font-size: 16px;
+      font-size: 1rem;
     }
   }
 }

src/views/Home/modules/Banners/css/styles@768.less

@@ -1,26 +1,29 @@
 @media screen and (max-width: 768px) {
   .banners {
   
-    .banners__image {
-      min-height: 300px;
-    }
-  
   
     .banners__content-title {
       font-size: 30px;
+      font-size: 1.875rem;
     }
   
     .banners__content-desc {
-      margin: 20px 0 40px;
+      margin: 20px 0 30px;
+      margin: 1.25rem 0 1.875rem;
       padding: 0 15px;
+      padding: 0 0.9375rem;
       font-size: 14px;
+      font-size: 0.875rem;
       line-height: 1.5;
     }
   
     .banners__content-btn {
       min-width: 140px;
+      min-width: 8.75rem;
       height: 40px;
+      height: 2.5rem;
       font-size: 16px;
+      font-size: 1rem;
     }
   }
 }

src/views/Home/modules/Banners/index.vue

@@ -33,7 +33,8 @@
   .banners__image {
     width: 100%;
     height: auto;
-    min-height: 240px;
+    min-height: 250px;
+    // min-height: 15rem;
     object-fit: cover;
   }
 
@@ -54,23 +55,30 @@
   .banners__content-title {
     font-family: Source Han Sans;
     font-size: 44px;
+    font-size: 2.75rem;
     font-weight: bold;
     transition: all 0.3s;
   }
 
   .banners__content-desc {
     margin: 40px 0 80px;
+    margin: 2.5rem 0 5rem;
     font-family: Source Han Sans;
     font-size: 18px;
+    font-size: 1.125rem;
     color: rgba(255, 255, 255, 0.8);
     transition: all 0.3s;
   }
 
   .banners__content-btn {
     min-width: 164px;
+    min-width: 10.25rem;
     height: 50px;
+    height: 3.125rem;
     padding: 15px;
+    padding: 0.9375rem;
     border-radius: 10px;
+    border-radius: 0.625rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -78,6 +86,7 @@
     color: #000;
     font-family: Source Han Sans;
     font-size: 18px;
+    font-size: 1.125rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s;

src/views/Home/modules/Brands/css/styles@1024.less

@@ -1,8 +1,19 @@
 @media screen and (max-width: 1024px) {
   .brands {
-  
+
     .brands__title {
       font-size: 26px;
+      font-size: 1.625rem;
+    }
+
+    .brands__swiper {
+
+      .swiper-slide {
+        width: 100px;
+        width: 6.25rem;
+        height: 100px;
+        height: 6.25rem;
+      }
     }
   }
 }

src/views/Home/modules/Brands/css/styles@768.less

@@ -1,8 +1,19 @@
 @media screen and (max-width: 768px) {
   .brands {
-  
+
     .brands__title {
       font-size: 24px;
+      font-size: 1.5rem;
+    }
+
+    .brands__swiper {
+
+      .swiper-slide {
+        width: 100px;
+        width: 6.25rem;
+        height: 100px;
+        height: 6.25rem;
+      }
     }
   }
 }

src/views/Home/modules/Brands/index.vue

@@ -53,29 +53,40 @@ import Swiper from 'swiper'
 
 onMounted(() => {
   new Swiper('.swiper_box_01', {
-    speed: 600,
+    observer: true,
+    observeParents: true,
+    speed: 4000,
     loop: true,
+    // loopAdditionalSlides: 13,
     slidesPerView: 'auto',
+    freeMode: true,
+    loopPreventsSlide: true,
     autoplay: {
-      delay: 1200,
+      delay: 0,
       disableOnInteraction: false,
+      stopOnLastSlide: false,
     },
     grabCursor: true,
-    freeMode: true,
   })
 
   new Swiper('.swiper_box_02', {
-    speed: 700,
+    // noSwiping: true,
+    observer: true,
+    observeParents: true,
+    speed: 4000,
     loop: true,
+    // loopAdditionalSlides: 13,
     slidesPerView: 'auto',
-    slidesOffsetBefore: 70,
+    freeMode: true,
+    slidesOffsetBefore: 60,
+    loopPreventsSlide: true,
     autoplay: {
-      delay: 1600,
+      delay: 0,
       disableOnInteraction: false,
-      reverseDirection: true,
+      stopOnLastSlide: false,
+      // reverseDirection: true,
     },
     grabCursor: true,
-    freeMode: true,
   })
 })
 </script>
@@ -86,6 +97,7 @@ onMounted(() => {
 .brands {
   position: relative;
   padding: 50px 0;
+  padding: 3.125rem 0;
   width: 100%;
   height: auto;
 
@@ -94,15 +106,32 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     margin-bottom: 30px;
+    mask-border: 1.875rem;
   }
 
   .brands__title {
     font-size: 30px;
+    font-size: 1.875rem;
     font-weight: bold;
     text-align: center;
     color: #111827;
   }
 
+  .swiper-wrapper {
+    transition-timing-function: linear !important;
+    -webkit-transition-timing-function: linear !important;
+    -moz-transition-timing-function: linear !important;
+    -ms-transition-timing-function: linear !important;
+    -o-transition-timing-function: linear !important;
+    transition-timing-function: linear !important;
+  }
+
+  .swiper-container-free-mode > .swiper-wrapper {
+    -webkit-transition-timing-function: linear !important;
+    -o-transition-timing-function: linear !important;
+    transition-timing-function: linear !important;
+  }
+
   .brands__swiper {
     overflow: hidden;
     width: 100%;
@@ -111,13 +140,17 @@ onMounted(() => {
     .swiper-slide {
       text-align: center;
       font-size: 18px;
+      font-size: 1.125rem;
       background: #fff;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 140px;
+      width: 8.75rem;
       height: 140px;
+      height: 8.75rem;
       padding: 20px;
+      padding: 1.25rem;
       border: 1px solid #c9d1d7;
       border-right: 0;
 

src/views/Home/modules/WrapFive/css/styles@1024.less

@@ -1,3 +1,13 @@
 @media screen and (max-width: 1024px) {
-  
+  .wrap__five {
+    .wrap__five-box {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    .wrap__five-title {
+      font-size: 26px;
+      font-size: 1.625rem;
+    }
+  }
 }

src/views/Home/modules/WrapFive/css/styles@1200.less

@@ -1,3 +1,5 @@
 @media screen and (max-width: 1200px) {
-  
+  .wrap__five {
+    
+  }
 }

src/views/Home/modules/WrapFive/css/styles@412.less

@@ -0,0 +1,25 @@
+@media screen and (max-width: 412px) {
+  .wrap__five {
+    .wrap__five-box {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    .wrap__five-title {
+      font-size: 24px;
+      font-size: 1.5rem;
+    }
+
+    .mySwiper {
+      padding: 0;
+
+      .swiper-slide {
+        width: 100%;
+        // width: 15.625rem;
+        // height: 250px;
+        // height: 15.625rem;
+        margin: 0 0px;
+      }
+    }
+  }
+}

src/views/Home/modules/WrapFive/css/styles@768.less

@@ -1,3 +1,25 @@
 @media screen and (max-width: 768px) {
-  
+  .wrap__five {
+    .wrap__five-box {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    .wrap__five-title {
+      font-size: 24px;
+      font-size: 1.5rem;
+    }
+
+    .mySwiper {
+      padding: 0;
+
+      .swiper-slide {
+        // width: 100%;
+        // width: 15.625rem;
+        // height: 250px;
+        // height: 15.625rem;
+        // margin: 0 0px;
+      }
+    }
+  }
 }

src/views/Home/modules/WrapFive/index.vue

@@ -40,7 +40,9 @@ import Swiper from 'swiper'
 onMounted(() => {
   new Swiper('.mySwiper', {
     speed: 600,
+    // loop: true,
     slidesPerView: 'auto',
+    // centeredSlides: true,
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
@@ -80,15 +82,18 @@ const dataList = [
   width: 100%;
   height: auto;
   padding: 50px 15px;
+  padding: 3.125rem 0.9375rem;
 
   .wrap__five-head {
     margin-bottom: 40px;
+    margin-bottom: 2.5rem;
     text-align: center;
   }
 
   .wrap__five-title {
     font-family: Source Han Sans;
     font-size: 30px;
+    font-size: 1.875rem;
     font-weight: bold;
     color: #000000;
   }
@@ -97,12 +102,18 @@ const dataList = [
     display: inline-block;
     width: auto;
     max-width: 1400px;
+    max-width: 87.5rem;
   }
 
   .mySwiper {
+    overflow: hidden;
     width: 100%;
     position: relative;
     padding: 0 60px;
+    padding: 0 3.75rem;
+
+    .swiper-wrapper {
+    }
 
     .swiper-button-next,
     .swiper-button-prev {
@@ -113,6 +124,7 @@ const dataList = [
     .swiper-button-next:after,
     .swiper-button-prev:after {
       font-size: 38px;
+      font-size: 2.375rem;
       font-weight: 300;
     }
 
@@ -121,10 +133,15 @@ const dataList = [
       flex-direction: column;
       justify-content: space-between;
       width: 275px;
+      width: 17.1875rem;
       height: 275px;
+      height: 17.1875rem;
       padding: 22px;
+      padding: 1.375rem;
       margin-left: 28px;
+      margin-left: 1.75rem;
       border-radius: 12px;
+      border-radius: 0.75rem;
       background: #f5f5f5;
       border: 1px solid #cccccc;
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
@@ -138,6 +155,7 @@ const dataList = [
       text-align: center;
       font-family: Source Han Sans;
       font-size: 15px;
+      font-size: 0.9375rem;
       color: #4b5563;
     }
 
@@ -150,6 +168,7 @@ const dataList = [
     .swiper-slide__card-avatar {
       position: relative;
       width: 100px;
+      width: 6.25rem;
     }
 
     .swiper-slide__card-avatar img {
@@ -160,6 +179,7 @@ const dataList = [
     .swiper-slide__card-avatar img:nth-child(2) {
       position: absolute;
       left: 30px;
+      left: 1.875rem;
       top: 50%;
       transform: translateY(-50%);
       z-index: 0;
@@ -168,12 +188,14 @@ const dataList = [
     .swiper-slide__card-name {
       font-family: Source Han Sans;
       font-size: 14px;
+      font-size: 0.875rem;
       color: #3d3d3d;
     }
 
     .swiper-slide__card-desc {
       font-family: Source Han Sans;
       font-size: 12px;
+      font-size: 0.75rem;
       color: #4b5563;
     }
   }
@@ -185,4 +207,5 @@ const dataList = [
 @import url(./css/styles@1200.less);
 @import url(./css/styles@1024.less);
 @import url(./css/styles@768.less);
+@import url(./css/styles@412.less);
 </style>

src/views/Home/modules/WrapFour/css/styles@1024.less

@@ -1,3 +1,17 @@
 @media screen and (max-width: 1024px) {
+  .wrap__four {
+    
+    .wrap__four-body {
   
+      .wrap__four-total {
+        font-size: 80px;
+        font-size: 5rem;
+      }
+
+      .wrap__four-desc {
+        font-size: 23px;
+        font-size: 1.4375rem;
+      }
+    }
+  }
 }

src/views/Home/modules/WrapFour/css/styles@768.less

@@ -1,3 +1,24 @@
 @media screen and (max-width: 768px) {
+  .wrap__four {
+    
+    .wrap__four-body {
   
+      .wrap__four-total {
+        font-size: 70px;
+        font-size: 4.375rem;
+        margin-bottom: 20px;
+        margin-bottom: 1.25rem;
+      }
+
+      .wrap__four-desc {
+        font-size: 20px;
+        font-size: 1.25rem;
+      }
+
+      .wrap__four-tips {
+        margin-top: 30px;
+        margin-top: 1.875rem;
+      }
+    }
+  }
 }

src/views/Home/modules/WrapFour/index.vue

@@ -3,10 +3,10 @@
     <img src="@/public/images/banner02.png" class="banner-bg" />
     <div class="mask-bg"></div>
     <div class="wrap__four-body">
-      <div class="wrap__four-total">
+      <div class="wrap__four-total trans-300">
         <span>10,117,195</span>
       </div>
-      <div class="wrap__four-desc">
+      <div class="wrap__four-desc trans-300">
         <span>{{ $t('system["包裹运送到全球，而且还在不断增加..."]') }}</span>
       </div>
       <div class="wrap__four-tips">
@@ -34,7 +34,10 @@
   .banner-bg {
     width: 100%;
     max-width: 1200px;
+    max-width: 75rem;
     height: auto;
+    min-height: 260px;
+    object-fit: cover;
   }
 
   .mask-bg {
@@ -55,8 +58,10 @@
 
     .wrap__four-total {
       margin-bottom: 30px;
+      margin-bottom: 1.875rem;
       font-family: Poppins;
       font-size: 120px;
+      font-size: 7.5rem;
       font-weight: 600;
       color: #ffffff;
     }
@@ -64,6 +69,7 @@
     .wrap__four-desc {
       font-family: Source Han Sans;
       font-size: 26px;
+      font-size: 1.625rem;
       font-weight: bold;
       font-variation-settings: 'opsz' auto;
       font-feature-settings: 'kern' on;
@@ -72,9 +78,11 @@
 
     .wrap__four-tips {
       margin-top: 80px;
+      margin-top: 5rem;
       font-family: Source Han Sans;
       font-weight: 500;
       font-size: 15px;
+      font-size: 0.9375rem;
       color: rgba(255, 255, 255, 0.75);
     }
   }

src/views/Home/modules/WrapOne/css/styles@1024.less

@@ -9,6 +9,7 @@
   
       .wrap__one-title {
         font-size: 26px;
+        font-size: 1.625rem;
       }
     } 
   }

src/views/Home/modules/WrapOne/css/styles@768.less

@@ -1,15 +1,42 @@
 @media screen and (max-width: 768px) {
   .wrap__one {
     .wrap__one-box {
+      flex-direction: column;
+      align-items: center;
       width: 100%;
       min-width: 100%;
     }
 
     .wrap__one-left {
+      align-items: center;
   
       .wrap__one-title {
         font-size: 24px;
+        font-size: 1.5rem;
+        text-align: center;
       }
-    } 
+
+      .tag-list {
+        width: 100%;
+        width: auto;
+        justify-content: center;
+
+        .tag-item__content {
+          max-width: 168px;
+          max-width: 10.5rem;
+        }
+        
+        .tag-item {
+          justify-content: flex-end;
+          width: 50%;
+          max-width: 200px!important;
+          max-width: 12.5rem!important;
+          margin-right: 0;
+        }
+
+        .tag-item:nth-child(1n) {
+        }
+      }
+    }
   }
 }

src/views/Home/modules/WrapOne/index.vue

@@ -7,17 +7,15 @@
           <span>{{ $t('system["全球数百万会员享受简单且经济的全球运输"]') }}</span>
         </div>
         <!-- list -->
-        <template v-for="(item, i) in tagList" :key="i">
-          <div class="tag-list">
-            <div v-for="(info, index) in item" :key="index" class="tag-item">
-              <div class="tag-item__line"></div>
-              <div class="tag-item__content">
-                <div class="tag-item__name">{{ $t(`system["${info.name}"]`) }}</div>
-                <div class="tag-item__desc">{{ $t(`system["${info.desc}"]`) }}</div>
-              </div>
+        <div class="tag-list">
+          <div v-for="(info, i) in tagList" :key="i" class="tag-item">
+            <div class="tag-item__line"></div>
+            <div class="tag-item__content">
+              <div class="tag-item__name">{{ $t(`system["${info.name}"]`) }}</div>
+              <div class="tag-item__desc">{{ $t(`system["${info.desc}"]`) }}</div>
             </div>
           </div>
-        </template>
+        </div>
       </div>
       <div class="wrap__one-rigt">
         <img src="@/public/images/group@01.png" alt="" />
@@ -36,15 +34,11 @@ interface ITag {
   desc: string
 }
 
-const tagList = reactive<Array<ITag[]>>([
-  [
-    { name: '3000 万+', desc: '运送的包裹' },
-    { name: '600 万+', desc: '全球会员' },
-  ],
-  [
-    { name: '220 +', desc: '服务的国家和地区' },
-    { name: '25 +', desc: '服务年限' },
-  ],
+const tagList = reactive<Array<ITag>>([
+  { name: '3000 万+', desc: '运送的包裹' },
+  { name: '600 万+', desc: '全球会员' },
+  { name: '220 +', desc: '服务的国家和地区' },
+  { name: '25 +', desc: '服务年限' },
 ])
 </script>
 
@@ -58,13 +52,16 @@ const tagList = reactive<Array<ITag[]>>([
   width: 100%;
   height: auto;
   padding: 0 0 50px;
+  padding: 0 0 3.125rem;
 
   .wrap__one-box {
     display: flex;
     justify-content: space-between;
     min-width: 1200px;
+    min-width: 75rem;
     width: var(--layout-width-1200);
     padding: 0 15px;
+    padding: 0 0.9375rem;
   }
 
   .wrap__one-left {
@@ -75,7 +72,9 @@ const tagList = reactive<Array<ITag[]>>([
 
     .wrap__one-title {
       margin-bottom: 40px;
+      margin-bottom: 2.5rem;
       font-size: 30px;
+      font-size: 1.875rem;
       font-weight: bold;
       color: #111827;
     }
@@ -83,44 +82,55 @@ const tagList = reactive<Array<ITag[]>>([
     .tag-list {
       display: flex;
       flex-wrap: wrap;
+      max-width: 440px;
+      max-width: 27.5rem;
 
       .tag-item {
         display: flex;
         align-items: center;
         height: 60px;
-        width: 150px;
-        margin: 0 60px 40px 0;
+        height: 3.75rem;
+        width: 200px;
+        width: 12.5rem;
+        margin: 0 30px 40px 0;
+        margin: 0 1.875rem 2.5rem 0;
       }
 
-      .tag-item:last-child {
+      .tag-item:nth-child(2n) {
         margin-right: 0;
       }
 
       .tag-item__line {
         width: 6px;
+        width: 0.375rem;
         height: 54px;
+        height: 3.375rem;
         border-radius: 2px;
         background: #000000;
       }
 
       .tag-item__content {
+        flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         height: 100%;
+        min-width: 110px;
+        // min-width: 7.5rem;
         margin-left: 12px;
+        margin-left: 0.75rem;
       }
 
       .tag-item__name {
         font-family: Poppins;
         font-size: 20px;
+        font-size: 1.25rem;
         font-weight: 600;
         color: #111827;
       }
 
       .tag-item__desc {
         font-family: Source Han Sans;
-        font-size: 16px;
         font-weight: 350;
         color: #4b5563;
       }

src/views/Home/modules/WrapThree/css/styles@1024.less

@@ -3,10 +3,12 @@
 
     .wrap__three-title {
       font-size: 26px;
+      font-size: 1.625rem;
     }
 
     .wrap__three-title {
       margin-bottom: 30px;
+      margin-bottom: 1.875rem;
     }
   }
 }

src/views/Home/modules/WrapThree/css/styles@768.less

@@ -3,10 +3,12 @@
 
     .wrap__three-title {
       font-size: 24px;
+      font-size: 1.5rem;
     }
 
     .wrap__three-title {
       margin-bottom: 20px;
+      margin-bottom: 1.25rem;
     }
   }
 }

src/views/Home/modules/WrapThree/index.vue

@@ -34,7 +34,8 @@
           </div>
         </div>
       </div> -->
-      <img src="@/public/images/guojiyunfei.png" />
+      <img v-if="locale == 'en'" src="@/public/images/guojiyunfei_en.png" />
+      <img v-else src="@/public/images/guojiyunfei.png" />
     </div>
   </section>
 </template>
@@ -42,6 +43,12 @@
 
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import useSystemStore from '@/stores/useSystemStore'
+
+const systemStore = useSystemStore()
+const { locale } = storeToRefs(systemStore)
+
 const tableList = [
   { name: '价格', price: '$16.97' },
   { name: '时效', price: '$30.99' },
@@ -67,10 +74,13 @@ const tableList2 = [{ label: '$12.99' }, { label: '极速达' }, { label: '服
 
   .wrap__three-title {
     margin-bottom: 30px;
+    margin-bottom: 1.875rem;
     font-family: Source Han Sans;
     font-size: 30px;
+    font-size: 1.875rem;
     font-weight: bold;
     color: #000;
+    text-align: center;
   }
 
   .wrap__three-content {
@@ -81,6 +91,7 @@ const tableList2 = [{ label: '$12.99' }, { label: '极速达' }, { label: '服
   .wrap__three-content > img {
     width: 100%;
     max-width: 690px;
+    max-width: 43.125rem;
   }
 
   .wrap__three-body {
@@ -134,7 +145,6 @@ const tableList2 = [{ label: '$12.99' }, { label: '极速达' }, { label: '服
   .wrap__three-table-head {
     padding: 0 0 15px 0;
     font-family: Source Han Sans;
-    font-size: 16px;
     color: #5a6670;
   }
 

src/views/Home/modules/WrapTwo/css/styles@1024.less

@@ -7,7 +7,33 @@
     }
 
     .wrap__two-title {
-      font-size: 26px;
+      font-size: 1.625rem;
     }
+
+    .wrap__two-step-icon {
+      height: 50px;
+      height: 3.125rem;
+      width: auto;
+    }
+  
+    .wrap__two-step-index {
+      width: 32px;
+      width: 2rem;
+      height: 32px;
+      height: 2rem;
+      font-size: 24px;
+      font-size: 1.5rem;
+    }
+  
+    .wrap__two-step-name {
+      font-size: 22px;
+      font-size: 1.375rem;
+    }
+  
+    .wrap__two-step-desc {
+      font-size: 16px;
+      font-size: 1rem;
+    }
+  
   }
 }

src/views/Home/modules/WrapTwo/css/styles@768.less

@@ -8,6 +8,64 @@
 
     .wrap__two-title {
       font-size: 24px;
+      font-size: 1.5rem;
+    }
+
+    .wrap__two-title {
+      margin-bottom: 32px;
+      margin-bottom: 2rem;
+    }
+
+    .wrap__two-steps {
+      flex-direction: column;
+    }
+
+    .wrap__two-step-item {
+      margin-bottom: 28px;
+      margin-bottom: 1.75rem;
+    }
+
+    .wrap__two-step-icon {
+      height: 40px;
+      height: 2.5rem;
+      width: auto;
+    }
+
+    .wrap__two-step-cont {
+      margin: 20px 0 16px;
+      margin: 1.25rem 0 1rem;
+    }
+  
+    .wrap__two-step-index {
+      width: 24px;
+      width: 1.5rem;
+      height: 24px;
+      height: 1.5rem;
+      margin-right: 12px;
+      margin-right: 0.75rem;
+      font-size: 18px;
+      font-size: 1.125rem;
+    }
+  
+    .wrap__two-step-name {
+      font-size: 18px;
+      font-size: 1.125rem;
+    }
+  
+    .wrap__two-step-desc {
+      font-size: 14px;
+      font-size: 0.875rem;
+    }
+    .wrap__two-btn {
+      min-width: 140px;
+      min-width: 8.75rem;
+      height: 40px;
+      height: 2.5rem;
+      margin-top: 50px;
+      margin-top: 3.125rem;
+      margin-top: 0;
+      font-size: 16px;
+      font-size: 1rem;
     }
   }
 }

src/views/Home/modules/WrapTwo/index.vue

@@ -74,20 +74,26 @@ const stepList = reactive<IStep[]>([
   width: 100%;
   height: auto;
   padding: 50px 0;
+  padding: 3.125rem 0;
   background-color: #000;
 
   .wrap__two-box {
     min-width: 1200px;
+    min-width: 75rem;
     width: var(--layout-width-1200);
     padding: 0 15px;
+    padding: 0 0.9375rem;
   }
 
   .wrap__two-title {
     margin-bottom: 50px;
+    margin-bottom: 3.125rem;
     font-family: Source Han Sans;
     font-size: 30px;
+    font-size: 1.875rem;
     font-weight: bold;
     color: #ffffff;
+    text-align: center;
   }
 
   .wrap__two-content {
@@ -106,12 +112,14 @@ const stepList = reactive<IStep[]>([
     flex-direction: column;
     align-items: center;
     padding: 0 15px;
+    padding: 0 1.875rem;
     color: #fff;
     text-align: center;
   }
 
   .wrap__two-step-icon {
     height: 58px;
+    height: 3.625rem;
     width: auto;
   }
 
@@ -120,26 +128,33 @@ const stepList = reactive<IStep[]>([
     justify-content: center;
     align-items: center;
     margin: 32px 0 24px;
+    margin: 2rem 0 1.5rem;
   }
 
   .wrap__two-step-index {
     width: 36px;
+    width: 2.25rem;
     height: 36px;
+    height: 2.25rem;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 16px;
+    margin-right: 1rem;
     background: #ffffff;
     border-radius: 50%;
     font-family: Source Han Sans;
     font-size: 26px;
+    font-size: 1.625rem;
     font-weight: bold;
     color: #000000;
   }
 
   .wrap__two-step-name {
+    flex: 1;
     font-family: Source Han Sans;
     font-size: 24px;
+    font-size: 1.5rem;
     font-weight: bold;
     color: #ffffff;
   }
@@ -147,6 +162,7 @@ const stepList = reactive<IStep[]>([
   .wrap__two-step-desc {
     font-family: Source Han Sans;
     font-size: 18px;
+    font-size: 1.125rem;
     font-weight: normal;
     color: rgba(255, 255, 255, 0.8);
   }
@@ -159,20 +175,26 @@ const stepList = reactive<IStep[]>([
 
   .wrap__two-btn {
     min-width: 164px;
+    min-width: 10.25rem;
     height: 50px;
+    height: 3.125rem;
+    padding: 15px;
+    padding: 0.9375rem;
     margin-top: 70px;
+    margin-top: 4.375rem;
     border-radius: 10px;
+    border-radius: 0.625rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 15px;
     background: #ffffff;
+    color: #000;
     font-family: Source Han Sans;
     font-size: 18px;
+    font-size: 1.125rem;
     font-weight: 500;
-    text-align: center;
-    color: #000000;
     cursor: pointer;
+    transition: all 0.3s;
   }
 }
 </style>

src/views/Layout/modules/Footer/css/footer@512.less

@@ -0,0 +1,13 @@
+@media screen and (max-width: 512px) {
+  
+  .footer-friendlink {
+
+    .footer-wrap {
+      
+    }
+
+    .footer-friendlink__box {
+      width: 100%;
+    }
+  }
+}

src/views/Layout/modules/Footer/css/footer@768.less

@@ -1,6 +1,13 @@
 @media screen and (max-width: 768px) {
   
-  .footer__container {
-    
+  .footer-friendlink {
+
+    .footer-wrap {
+      
+    }
+
+    .footer-friendlink__box {
+      width: 50%;
+    }
   }
 }

src/views/Layout/modules/Footer/index.vue

@@ -34,7 +34,7 @@
     </div>
   </div>
 
-  <div class="footer__container footer-footnote">
+  <!-- <div class="footer__container footer-footnote">
     <div class="footer__box width-1200">
       <span>{{
         $t(
@@ -42,7 +42,7 @@
         )
       }}</span>
     </div>
-  </div>
+  </div> -->
 </template>
 
 
@@ -102,11 +102,13 @@ const linkList3 = [
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 30px 15px;
+    padding: 1.875rem 0.9375rem;
   }
 
   .footer-friendlink__box {
     width: auto;
     padding: 6px 10px 10px;
+    padding: 0.375rem 0.625rem 0.625rem;
   }
 
   .footer-friendlink__box:first-child {
@@ -115,13 +117,17 @@ const linkList3 = [
 
   .footer-friendlink__box .footer-friendlink__logo {
     width: 150px;
+    width: 9.375rem;
     margin-bottom: 36px;
+    margin-bottom: 2.25rem;
   }
 
   .footer-friendlink__baseinfo-item {
     margin-bottom: 4px;
+    margin-bottom: 0.25rem;
     font-family: Poppins;
     font-size: 14px;
+    font-size: 0.875rem;
     font-weight: normal;
     color: #3d3d3d;
   }
@@ -129,12 +135,13 @@ const linkList3 = [
   .footer-friendlink__baseinfo-item:last-child {
     margin-bottom: 0;
     margin-top: 20px;
+    margin-top: 1.25rem;
   }
 
   .footer-friendlink__item {
     margin-bottom: 6px;
+    margin-bottom: 0.375rem;
     font-family: Poppins;
-    font-size: 16px;
     font-weight: normal;
     letter-spacing: 1px;
     color: #3d3d3d;
@@ -146,9 +153,9 @@ const linkList3 = [
 
   .footer__box {
     padding: 15px;
+    padding: 0.9375rem;
     font-family: Poppins;
     font-weight: 400;
-    font-size: 16px;
     color: rgba(255, 255, 2555, 0.8);
   }
 }
@@ -156,7 +163,7 @@ const linkList3 = [
 .footer-footnote {
   .footer__box {
     padding: 15px;
-    font-size: 16px;
+    padding: 0.9375rem;
     font-family: Source Han Sans;
     font-weight: 400;
     color: #5a6670;
@@ -168,4 +175,5 @@ const linkList3 = [
 @import url(./css/footer@1200.less);
 @import url(./css/footer@1024.less);
 @import url(./css/footer@768.less);
+@import url(./css/footer@512.less);
 </style>

src/views/Layout/modules/Header/index.vue

@@ -13,10 +13,21 @@
 
       <!-- right -->
       <div class="nav__right navbar__right">
-        <!-- <div class="language-toggle">
-          <img src="@/public/images/icons/language-toggle__icon.png" />
-          <span>{{ systemStore.localeInfo && systemStore.localeInfo.name }}</span>
-        </div> -->
+        <a-dropdown>
+          <div class="language-toggle">
+            <img src="@/public/images/icons/language-toggle__icon.png" />
+            <span>{{ localeInfo && localeInfo.name }}</span>
+          </div>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item v-for="(item, index) in systemStore.localeList" :key="index">
+                <div @click="onLocaleChange(item)">
+                  <span class="text_hover_underline">{{ item.name }}</span>
+                </div>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
         <div class="login-btn">
           <span>{{ $t('system["登录"]') }}</span>
         </div>
@@ -29,7 +40,7 @@
     <div class="nav__box subnav__box">
       <!-- left -->
       <div class="nav__left subnav__left">
-        <img src="@/public/images/logo.png" alt="" style="width: 150px" />
+        <img src="@/public/images/logo.png" />
       </div>
 
       <!-- right -->
@@ -45,7 +56,7 @@
         <div class="nav-menus">
           <a-dropdown>
             <div class="menus__btn">
-              <MenuOutlined style="font-size: 20px; color: #000" />
+              <MenuOutlined style="font-size: 20px; font-size: 1.25rem; color: #000" />
             </div>
             <template #overlay>
               <a-menu>
@@ -73,15 +84,23 @@
 
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { storeToRefs } from 'pinia'
 import { MenuOutlined, HomeOutlined } from '@ant-design/icons-vue'
 import useSystemStore from '@/stores/useSystemStore'
+import type { ILocale } from '@/stores/useSystemStore'
 import useLinkList from './hooks/useLinkList'
 
+const i18n = useI18n()
 const systemStore = useSystemStore()
-
-console.log('systemStore', systemStore)
+const { localeInfo, localeList } = storeToRefs(systemStore)
 
 const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
+
+const onLocaleChange = function (info: ILocale) {
+  systemStore.toggleLocale(info)
+  i18n.locale.value = info.value
+}
 </script>
 
 
@@ -101,8 +120,10 @@ const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
 
 .nav__box {
   min-width: 1200px;
+  min-width: 75rem;
   width: var(--layout-width-1200);
   padding: 0 15px;
+  padding: 0 0.9375rem;
 }
 
 .navbar__box,
@@ -111,6 +132,7 @@ const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
   justify-content: space-between;
   align-items: center;
   height: 60px;
+  height: 3.75rem;
 }
 
 .nav__left {
@@ -124,29 +146,47 @@ const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
   align-items: center;
   color: #000;
   font-size: 14px;
+  font-size: 0.875rem;
+}
+
+.subnav__left {
+  img {
+    width: 150px;
+    width: 9.375rem;
+  }
 }
 
 .language-toggle {
   display: flex;
   align-items: center;
   margin-right: 30px;
+  margin-right: 1.875rem;
   cursor: pointer;
+  min-width: 84px;
+  min-width: 5.25rem;
 
   img {
     margin-right: 6px;
+    margin-right: 0.375rem;
     width: 20px;
     height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 }
 
 .login-btn {
   width: 76px;
+  width: 4.75rem;
   height: 30px;
+  height: 1.875rem;
   background: #000000;
   border-radius: 6px;
+  border-radius: 0.375rem;
   text-align: center;
   color: #fff;
   line-height: 30px;
+  line-height: 1.875rem;
   cursor: pointer;
 }
 
@@ -157,8 +197,10 @@ const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
 
   .text-link__item {
     padding-right: 30px;
+    padding-right: 1.875rem;
     color: #767676;
     font-size: 14px;
+    font-size: 0.875rem;
     text-transform: uppercase;
     cursor: pointer;
   }
@@ -169,7 +211,7 @@ const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
 }
 
 .subnav__right .text-link__item {
-  padding: 0 0 0 30px;
+  padding: 0 0 0 1.875rem;
 }
 
 .nav-menus {
@@ -180,9 +222,12 @@ const { textLinkList, textLinkList2, handleTextLinkClick } = useLinkList()
     justify-content: center;
     align-items: center;
     width: 46px;
+    width: 2.875rem;
     height: 38px;
+    height: 2.375rem;
     border: 1px solid #cfcfcf;
     border-radius: 6px;
+    border-radius: 0.375rem;
     cursor: pointer;
   }
 }