提交

src/locale/lang/en.ts

@@ -98,5 +98,39 @@ export default {
     contactForPhoneWorkTime: 'Monday to Sunday 9:00-18:00',
     contactForEmailTitle: 'Email',
     contactForEmailWorkTime: 'We will reply within 24 hours',
+  },
+  comments: {
+    "马库斯": "Marcus",
+    "皮埃尔": "Pierre",
+    "杰森": "Jason",
+    "伊莎贝拉": "Isabella",
+    "杰克": "Jack",
+    "埃里克": "Eric",
+    "亚历山德罗": "Alessandro",
+    "卢卡": "Luca",
+    "劳伦斯": "Lawrence",
+    "安娜": "Anna",
+    "约翰": "John",
+    "奥地利": "Austria",
+    "法国": "France",
+    "英国": "United Kingdom",
+    "西班牙": "Spain",
+    "美国": "United States",
+    "瑞典": "Sweden",
+    "新西兰": "New Zealand",
+    "澳大利亚": "Australia",
+    "意大利": "Italy",
+
+    "如果你想买其他东西，没有比 Vava buy 更好的了": "If you want to buy other things, there's no better option than Vava buy",
+    "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻": "Amazing! Everything went smoothly, and the speed of receiving orders and shipping them out quickly is impressive",
+    "非常易于使用，包装很精美，会收获很多惊喜": "Very easy to use, the packaging is exquisite, and you will get many surprises",
+    "商品易于使用，质量很棒。物流给力，包装精美，客服态度热情！": "The product is easy to use and of great quality. Logistics is efficient, packaging is exquisite, and the customer service is enthusiastic!",
+    "飞快送达，包装妥帖，商品完美。会再来光顾的！": "Delivered quickly, packaging is proper, product is perfect. Will come again!",
+    "国际物流送货上门太赞了！商品没瑕疵，包装抗摔，全程追踪清晰～": "International logistics delivering to the door is awesome! The product has no defects, the packaging is drop-resistant, and the whole process tracking is clear～",
+    "这商品太好用了，操作简单。国际物流全程顺畅，包装精美又牢固！": "This product is very easy to use and simple to operate. International logistics went smoothly throughout, and the packaging is exquisite and sturdy!",
+    "到货比想的快，包装抗造，东西超棒。": "Arrived faster than expected, packaging is durable, product is great.",
+    "商品易于使用，完全满足需求。物流比预期快，客服响应迅速，体验非常好!": "The product is easy to use and fully meets the needs. Logistics is faster than expected, customer service responds quickly, great experience!",
+    "清关过程很顺利，物流速度很快。包装处理得很棒，连说明书都套了保护袋!": "Customs clearance process was smooth, logistics speed is fast. Packaging is handled well, even the manual is covered with a protective bag!",
+    "物流全程透明，从出库到派送都能看到。包装很结实，拆开后商品崭新如初!": "Logistics is transparent throughout, visible from outbound to delivery. Packaging is strong, and the product is as good as new after unpacking!"
   }
 }

src/locale/lang/es.ts

@@ -94,5 +94,40 @@ export default {
     contactForPhoneWorkTime: 'Lunes a domingo 9:00-18:00',
     contactForEmailTitle: 'Correo electrónico',
     contactForEmailWorkTime: 'Respondemos en menos de 24 horas',
+  },
+
+  comments: {
+    "马库斯": "Marcos",
+    "皮埃尔": "Pierre",
+    "杰森": "Jason",
+    "伊莎贝拉": "Isabel",
+    "杰克": "Jack",
+    "埃里克": "Erik",
+    "亚历山德罗": "Alessandro",
+    "卢卡": "Luca",
+    "劳伦斯": "Lorenzo",
+    "安娜": "Ana",
+    "约翰": "Juan",
+    "奥地利": "Austria",
+    "法国": "Francia",
+    "英国": "Reino Unido",
+    "西班牙": "España",
+    "美国": "Estados Unidos",
+    "瑞典": "Suecia",
+    "新西兰": "Nueva Zelanda",
+    "澳大利亚": "Australia",
+    "意大利": "Italia",
+
+    "如果你想买其他东西，没有比 Vava buy 更好的了": "Si quieres comprar otras cosas, no hay nada mejor que Vava buy",
+    "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻": "¡Excelente! Todo fue muy fluido, la velocidad en la recepción del pedido y el envío rápido es impresionante",
+    "非常易于使用，包装很精美，会收获很多惊喜": "Muy fácil de usar, el empaque es muy elegante, habrá muchas sorpresas",
+    "商品易于使用，质量很棒。物流给力，包装精美，客服态度热情！": "El producto es fácil de usar y de excelente calidad. La logística es eficiente, el empaque es hermoso y el servicio al cliente es cálido!",
+    "飞快送达，包装妥帖，商品完美。会再来光顾的！": "Llegó muy rápido, el empaque está bien hecho, el producto es perfecto. Volveré a comprar!",
+    "国际物流送货上门太赞了！商品没瑕疵，包装抗摔，全程追踪清晰～": "¡Genial que la logística internacional haga envíos a domicilio! El producto no tiene defectos, el empaque es resistente a caídas y el seguimiento completo es claro～",
+    "这商品太好用了，操作简单。国际物流全程顺畅，包装精美又牢固！": "Este producto es muy fácil de usar y 操作简单. La logística internacional fue fluida en todo momento, y el empaque es elegante y resistente!",
+    "到货比想的快，包装抗造，东西超棒。": "Llegó más rápido de lo esperado, el empaque es resistente y el producto es excelente.",
+    "商品易于使用，完全满足需求。物流比预期快，客服响应迅速，体验非常好!": "El producto es fácil de usar y satisface completamente las necesidades. La logística es más rápida de lo esperado, el servicio al cliente responde rápidamente, excelente experiencia!",
+    "清关过程很顺利，物流速度很快。包装处理得很棒，连说明书都套了保护袋!": "El proceso de aduana fue muy fluido, la logística es muy rápida. El empaque está muy bien tratado, incluso la hoja de instrucciones está en una bolsa protectora!",
+    "物流全程透明，从出库到派送都能看到。包装很结实，拆开后商品崭新如初!": "La logística es transparente en todo el proceso, se puede ver desde la salida del almacén hasta la entrega. El empaque es muy resistente, y el producto está como nuevo después de desempacarlo!"
   }
 }

src/locale/lang/zh.ts

@@ -23,12 +23,8 @@ export default {
     "包裹运送到全球，而且还在不断增加...": "包裹运送到全球，而且还在不断增加...",
     "自 Vava buy.com 成立以来": "自 Vava buy.com 成立以来",
     "深受全球购物者的喜爱": "深受全球购物者的喜爱",
-    "新西兰": "新西兰",
-    "澳大利亚": "澳大利亚",
-    "意大利": "意大利",
-    "Lawrence": "劳伦斯",
-    "Anna": "安娜",
-    "John": "约翰",
+
+
     download: '下载 App',
     updateTimeTxt: '更新于 {updateTime}',
     companyName: '广州哇哇买商贸有限公司',
@@ -70,9 +66,6 @@ export default {
   paragraph: {
     "bannerTitle": "国际运转·一站解决",
     "bannerDesc": "连接全球优质商品，一键下单无忧，实时查看订单进程，享受便捷购物体验。",
-    "如果你想买其他东西，没有比 Vava buy 更好的了": "如果你想买其他东西，没有比 Vava buy 更好的了",
-    "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻": "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻",
-    "非常易于使用，包装很精美，会收获很多惊喜": "非常易于使用，包装很精美，会收获很多惊喜",
     "我们使用 cookie 来提供更好的在线体验。 访问和使用 VAVA BUY.com，即表示您同意我们使用 Cookie。 通过阅读我们的条款和条件、使用条款、 和隐私政策。": "我们使用 cookie 来提供更好的在线体验。 访问和使用 VAVA BUY.com，即表示您同意我们使用 Cookie。 通过阅读我们的条款和条件、使用条款、 和隐私政策。",
   },
   questionPage: {
@@ -94,5 +87,41 @@ export default {
     contactForPhoneWorkTime: '周一至周日 9:00-18:00',
     contactForEmailTitle: '电子邮件',
     contactForEmailWorkTime: '我们会在24小时内回复',
+  },
+  comments: {
+    "马库斯": "马库斯",
+    "皮埃尔": "皮埃尔",
+    "杰森": "杰森",
+    "伊莎贝拉": "伊莎贝拉",
+    "杰克": "杰克",
+    "埃里克": "埃里克",
+    "亚历山德罗": "亚历山德罗",
+    "卢卡": "卢卡",
+    "劳伦斯": "劳伦斯",
+    "安娜": "安娜",
+    "约翰": "约翰",
+
+
+    "奥地利": "奥地利",
+    "法国": "法国",
+    "英国": "英国",
+    "西班牙": "西班牙",
+    "美国": "美国",
+    "瑞典": "瑞典",
+    "新西兰": "新西兰",
+    "澳大利亚": "澳大利亚",
+    "意大利": "意大利",
+
+    "如果你想买其他东西，没有比 Vava buy 更好的了": "如果你想买其他东西，没有比 Vava buy 更好的了",
+    "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻": "太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻",
+    "非常易于使用，包装很精美，会收获很多惊喜": "非常易于使用，包装很精美，会收获很多惊喜",
+    "商品易于使用，质量很棒。物流给力，包装精美，客服态度热情！": "商品易于使用，质量很棒。物流给力，包装精美，客服态度热情！",
+    "飞快送达，包装妥帖，商品完美。会再来光顾的！": "飞快送达，包装妥帖，商品完美。会再来光顾的！",
+    "国际物流送货上门太赞了！商品没瑕疵，包装抗摔，全程追踪清晰～": "国际物流送货上门太赞了！商品没瑕疵，包装抗摔，全程追踪清晰～",
+    "这商品太好用了，操作简单。国际物流全程顺畅，包装精美又牢固！": "这商品太好用了，操作简单。国际物流全程顺畅，包装精美又牢固！",
+    "到货比想的快，包装抗造，东西超棒。": "到货比想的快，包装抗造，东西超棒。",
+    "商品易于使用，完全满足需求。物流比预期快，客服响应迅速，体验非常好!": "商品易于使用，完全满足需求。物流比预期快，客服响应迅速，体验非常好!",
+    "清关过程很顺利，物流速度很快。包装处理得很棒，连说明书都套了保护袋!": "清关过程很顺利，物流速度很快。包装处理得很棒，连说明书都套了保护袋!",
+    "物流全程透明，从出库到派送都能看到。包装很结实，拆开后商品崭新如初!": "物流全程透明，从出库到派送都能看到。包装很结实，拆开后商品崭新如初!",
   }
 }

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

@@ -10,21 +10,26 @@
         <div class="swiper-wrapper">
           <div v-for="(item, i) in dataList" :key="i" class="swiper-slide swiper-slide__card">
             <div class="swiper-slide__card-head">
-              <div class="swiper-slide__card-content">{{ $t(`paragraph["${item.content}"]`) }}</div>
+              <div class="swiper-slide__card-content">{{ $t(`comments["${item.content}"]`) }}</div>
             </div>
             <div class="swiper-slide__card-body">
               <div class="swiper-slide__card-avatar">
-                <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/avatar/avatar_1.jpg" alt="" v-if="i == 0" />
+                <img src="@/public/images/avatar/avatar_2.jpg" alt="" v-if="i == 1" />
+                <img src="@/public/images/avatar/avatar_3.jpg" alt="" v-if="i == 2" />
+                <img src="@/public/images/avatar/avatar_4.jpg" alt="" v-if="i == 3" />
+                <img src="@/public/images/avatar/avatar_5.jpg" alt="" v-if="i == 4" />
+                <img src="@/public/images/avatar/avatar_6.jpg" alt="" v-if="i == 5" />
+                <img src="@/public/images/avatar/avatar_7.jpg" alt="" v-if="i == 6" />
+                <img src="@/public/images/avatar/avatar_8.jpg" alt="" v-if="i == 7" />
+                <img src="@/public/images/avatar/avatar_9.jpg" alt="" v-if="i == 8" />
+                <img src="@/public/images/avatar/avatar_10.jpg" alt="" v-if="i == 9" />
+                <img src="@/public/images/avatar/avatar_11.jpg" alt="" v-if="i == 10" />
                 <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>
-                <div class="swiper-slide__card-desc">{{ $t(`system["${item.address}"]`) }}</div>
+                <div class="swiper-slide__card-name">{{ $t(`comments["${item.name}"]`) }}</div>
+                <div class="swiper-slide__card-desc">{{ $t(`comments["${item.address}"]`) }}</div>
               </div>
             </div>
           </div>
@@ -45,9 +50,14 @@ import Swiper from 'swiper'
 onMounted(() => {
   new Swiper('.mySwiper', {
     speed: 600,
-    // loop: true,
+    loop: true,
     slidesPerView: 'auto',
-    // centeredSlides: true,
+    centeredSlides: true,
+    autoplay: {
+      delay: 1500,
+      disableOnInteraction: false,
+      stopOnLastSlide: false,
+    },
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
@@ -57,24 +67,72 @@ onMounted(() => {
 
 const dataList = [
   {
-    name: 'Lawrence',
+    name: '马库斯',
+    address: '奥地利',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '商品易于使用，质量很棒。物流给力，包装精美，客服态度热情！',
+  },
+  {
+    name: '劳伦斯',
     address: '新西兰',
     avatar: ['../../../../public/images/icons/xinxilan_logo_icon.png'],
     content: '如果你想买其他东西，没有比 Vava buy 更好的了',
     locale: '',
   },
   {
-    name: 'John',
+    name: '皮埃尔',
+    address: '法国',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '飞快送达，包装妥帖，商品完美。会再来光顾的！',
+  },
+  {
+    name: '约翰',
     address: '澳大利亚',
     avatar: ['../../../../public/images/icons/aodaliya_logo_icon.png'],
     content: '太棒了！一切都很顺利，接收订单并快速发货的速度让人印象深刻',
   },
   {
-    name: 'Anna',
+    name: '安娜',
     address: '意大利',
     avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
     content: '非常易于使用，包装很精美，会收获很多惊喜',
   },
+  {
+    name: '杰森',
+    address: '英国',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '国际物流送货上门太赞了！商品没瑕疵，包装抗摔，全程追踪清晰～',
+  },
+  {
+    name: '伊莎贝拉',
+    address: '西班牙',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '这商品太好用了，操作简单。国际物流全程顺畅，包装精美又牢固！',
+  },
+  {
+    name: '杰克',
+    address: '美国',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '到货比想的快，包装抗造，东西超棒。',
+  },
+  {
+    name: '埃里克',
+    address: '瑞典',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '商品易于使用，完全满足需求。物流比预期快，客服响应迅速，体验非常好!',
+  },
+  {
+    name: '亚历山德罗',
+    address: '意大利',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '清关过程很顺利，物流速度很快。包装处理得很棒，连说明书都套了保护袋!',
+  },
+  {
+    name: '卢卡',
+    address: '意大利',
+    avatar: ['../../../../public/images/icons/yidali_logo_icon.png'],
+    content: '物流全程透明，从出库到派送都能看到。包装很结实，拆开后商品崭新如初!',
+  },
 ]
 </script>
 
@@ -107,8 +165,8 @@ const dataList = [
   .wrap__five-box {
     display: inline-block;
     width: auto;
-    max-width: 1400px;
-    max-width: 87.5rem;
+    max-width: 1024px;
+    max-width: 64rem;
   }
 
   .mySwiper {

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

@@ -1,11 +1,16 @@
 @media screen and (max-width: 1024px) {
   .wrap__four {
-    
+
     .wrap__four-body {
-  
+
       .wrap__four-total {
         font-size: 80px;
         font-size: 5rem;
+
+        :deep(.ant-statistic-content-value-int) {
+          font-size: 80px;
+          font-size: 5rem;
+        }
       }
 
       .wrap__four-desc {

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

@@ -1,13 +1,17 @@
 @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;
+
+        :deep(.ant-statistic-content-value-int) {
+          font-size: 70px;
+          font-size: 4.375rem;
+        }
       }
 
       .wrap__four-desc {

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

@@ -4,7 +4,9 @@
     <div class="mask-bg"></div>
     <div class="wrap__four-body">
       <div class="wrap__four-total trans-300">
-        <span>10,117,195</span>
+        <!-- <span>10,117,195</span> -->
+        <!-- <a-statistic title="" :value="statisticNumber" /> -->
+        <a-statistic title="" :value="computeStatisticValue(Date.now())" />
       </div>
       <div class="wrap__four-desc trans-300">
         <span>{{ $t('system["包裹运送到全球，而且还在不断增加..."]') }}</span>
@@ -19,6 +21,67 @@
 
 
 <script setup lang="ts">
+import { ref, onBeforeUnmount, onMounted } from 'vue'
+
+const statisticNumber = ref<number>(0)
+const statisticTimer = ref<number>(-1)
+const computeDelay = ref<number>(1000 * 60 * 60 * 1)
+const statisticStorageKey: string = 'statistic_time'
+
+// 获取统计值
+function initForStatistic() {
+  statisticNumber.value = getStatisticValue()
+  const nowTime = Date.now()
+  const oldTime = !!localStorage.getItem(statisticStorageKey)
+    ? Number(localStorage.getItem(statisticStorageKey))
+    : nowTime
+  let step_temp = Math.floor((nowTime - oldTime) / computeDelay.value)
+  console.log('(nowTime - oldTime)', nowTime - oldTime)
+  console.log('step_temp', step_temp)
+  if (step_temp > 0) {
+    statisticNumber.value = computeStatisticValue(oldTime + computeDelay.value * step_temp)
+    localStorage.setItem(statisticStorageKey, `${oldTime + computeDelay.value * step_temp}`)
+  } else {
+    !localStorage.getItem(statisticStorageKey) &&
+      localStorage.setItem(statisticStorageKey, `${nowTime}`)
+  }
+}
+
+function getStatisticValue(): number {
+  let oldVal: string | null = localStorage.getItem(statisticStorageKey)
+  const nowTime: number = Date.now()
+  let result: number = computeStatisticValue(!!oldVal ? Number(oldVal) : nowTime)
+  return result
+}
+
+// 计算统计值
+function computeStatisticValue(value: number): number {
+  return Number((value / (1000 * 60 * 60)).toFixed(0))
+}
+
+// 添加计时器
+function addInterval(delay = 1000 * 30) {
+  statisticTimer.value = setInterval(() => {
+    initForStatistic()
+  }, delay)
+}
+
+// 移除计时器
+function removeInterval() {
+  clearInterval(statisticTimer.value)
+  statisticTimer.value = -1
+}
+
+/* ------------------------------ 生命周期钩子 ------------------------------ */
+
+onMounted(() => {
+  initForStatistic()
+  addInterval()
+})
+
+onBeforeUnmount(() => {
+  removeInterval()
+})
 </script>
 
 
@@ -59,11 +122,14 @@
     .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;
+
+      :deep(.ant-statistic-content-value-int) {
+        font-family: Poppins;
+        font-size: 120px;
+        font-size: 7.5rem;
+        font-weight: 600;
+        color: #ffffff;
+      }
     }
 
     .wrap__four-desc {