From 7ba20f06a52221d2d7d5370eb1b5d198facf4fc0 Mon Sep 17 00:00:00 2001
From: sleepwithoutbz <zy14074573@outlook.com>
Date: Mon, 10 Nov 2025 21:48:25 +0800
Subject: [PATCH] WIP

---
 src/components/AboutSection.vue  | 18 +++++++++++-----
 src/components/NavBar.vue        |  5 +----
 src/components/ProductDetail.vue | 19 ++++++++---------
 src/locales/en.json              | 33 +++++++++++++++++++-----------
 src/locales/zh.json              | 35 ++++++++++++++++++++------------
 src/types/VideoUrl.d.ts          |  4 ++++
 src/views/HomeView.vue           | 16 ++++++++-------
 src/views/WaterLife_bottle.vue   |  3 ++-
 src/views/WaterLife_cup.vue      |  3 ++-
 src/views/WaterLife_flosser.vue  |  3 ++-
 10 files changed, 85 insertions(+), 54 deletions(-)
 create mode 100644 src/types/VideoUrl.d.ts

diff --git a/src/components/AboutSection.vue b/src/components/AboutSection.vue
index 610a091..0dbf19a 100644
--- a/src/components/AboutSection.vue
+++ b/src/components/AboutSection.vue
@@ -1,12 +1,18 @@
 <template>
   <div class="hero-section">
     <div class="hero-bg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
-    <div class="hero-content">
+    <div
+      class="hero-content"
+      :style="modify && buttonshow ? 'padding-right: 400px;padding-top: 250px' : ''"
+    >
       <h2 class="hero-title">{{ title }}</h2>
-      <p class="hero-description">{{ description }}</p>
+      <!-- modify: 纯粹为了解决一个很蠢的需求设计的 -->
+      <p class="hero-description" :style="modify && !buttonshow ? 'line-height: 2.4;' : ''">
+        {{ description }}
+      </p>
       <button v-if="buttonshow" class="hero-btn" @click="goWaterlife">
         >
-        {{ $t('learnMore') }}
+        {{ $t('enter') }}
       </button>
     </div>
   </div>
@@ -23,7 +29,6 @@ function goWaterlife() {
   })
 }
 
-
 const props = defineProps({
   targetPath: {
     type: String,
@@ -33,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  modify: {
+    type: Boolean,
+    default: false,
+  },
   title: {
     type: String,
     required: true,
@@ -119,7 +128,6 @@ const props = defineProps({
   line-height: 1.8;
   margin-bottom: 30px;
   color: #444;
-  font-style: italic;
 }
 
 .hero-btn {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9cc7617..48d18f7 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -22,8 +22,6 @@
       </nav>
 
       <div class="language-switcher">
-        <router-link to="/store" class="nav-item">{{ $t('pages.store.name') }}</router-link>
-
         <select v-model="$i18n.locale" class="lang-selector">
           <option value="zh">中文</option>
           <option value="en">English</option>
@@ -47,8 +45,7 @@ const menuItems = ref([
   { name: 'pages.waterlife_bottle.name', path: '/waterlife_bottle' },
   { name: 'pages.aged.name', path: '/todo' },
   { name: 'pages.knowledge.name', path: '/knowledge' },
-  { name: 'pages.contact_us.name', path: '/todo' },
-  { name: 'pages.others.name', path: '/todo' },
+  { name: 'pages.store.name', path: '/store' },
 ])
 
 const isMenuOpen = ref(false)
diff --git a/src/components/ProductDetail.vue b/src/components/ProductDetail.vue
index 8f88c7a..6207042 100644
--- a/src/components/ProductDetail.vue
+++ b/src/components/ProductDetail.vue
@@ -21,14 +21,11 @@
         <br />
         <button
           v-for="videoUrl in videoUrls"
-          :key="videoUrl"
+          :key="videoUrl.url"
           class="video-btn"
-          @click="
-            showVideo = true,
-            curVideoUrl = videoUrl
-          "
+          @click="((showVideo = true), (curVideoUrl = videoUrl.url))"
         >
-          {{ $t(`operation.watch_video_learn_more`) }}
+          {{ videoUrl.display }}
           <img src="/images/camera.png" alt="Video" class="video_icon" />
         </button>
         <button class="manual-btn" @click="downloadManual">
@@ -58,12 +55,13 @@ import RowContent from './RowContent.vue'
 import type { PropType } from 'vue'
 import type { DetailItem } from '@/types/product'
 import { useI18n } from 'vue-i18n'
+import type { VideoUrl } from '@/types/VideoUrl'
 
 const curVideoUrl = ref('')
 
 const props = defineProps({
   videoUrls: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<VideoUrl[]>,
     required: true,
   },
   detailList: {
@@ -129,6 +127,7 @@ const downloadManual = () => {
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 15px;
+  margin-right: 10px;
   box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
 }
 
@@ -172,7 +171,7 @@ const downloadManual = () => {
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 15px;
-  margin-left: 15px;
+  margin-right: 10px;
   box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
 }
 .manual-btn:hover {
@@ -344,10 +343,10 @@ h1:after {
 .text2-intro {
   display: inline-flex;
   flex-direction: column;
-  font-size: 1.4em;
+  font-size: 1.3em;
   color: #2c3e50;
   font-weight: 600;
-  padding: 15px;
+  padding: 10px;
   max-width: 1000px;
   /* background: linear-gradient(135deg, rgb(242, 242, 242) 0%, rgb(108, 185, 254) 100%); */
   background: rgba(108, 186, 254, 0.5);
diff --git a/src/locales/en.json b/src/locales/en.json
index 102bbb1..7a782fc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -31,15 +31,9 @@
     "mainpage": {
       "name": "Main"
     },
-    "contact_us": {
-      "name": "Contact Us"
-    },
     "knowledge": {
       "name": "Sea of Knowledge"
     },
-    "others": {
-      "name": "Others"
-    },
     "store": {
       "name": "Store",
       "buy": "Way to purchase",
@@ -69,7 +63,10 @@
   },
   "cyq": {
     "video-urls": [
-      "/videos/productvideos/cyq/en.mp4"
+      {
+        "url": "/videos/productvideos/cyq/en.mp4",
+        "display": "Product Introduction"
+      }
     ],
     "name": "Electric Water Flosser",
     "notice": "1. Tap water only.\n2. Turn off the device promptly after the water tank is emptied to avoid dry running.",
@@ -120,7 +117,10 @@
   },
   "cjb": {
     "video-urls": [
-      "/videos/productvideos/cjb/en.mp4"
+      {
+        "url": "/videos/productvideos/cjb/en.mp4",
+        "display": "Product Introduction"
+      }
     ],
     "name": "Hypochlorous Acid Bionic Sterilizing Cup",
     "notice": "(1) Use immediately after preparation.\n(2) Water temperature exceeding 40°C is not recommended.",
@@ -163,9 +163,18 @@
   },
   "cjq": {
     "video-urls": [
-      "/videos/productvideos/cjq/en.mp4",
-      "/videos/productvideos/cjq/en2.mp4",
-      "/videos/productvideos/cjq/en3.mp4"
+      {
+        "url": "/videos/productvideos/cjq/en.mp4",
+        "display": "Product Introduction"
+      },
+      {
+        "url": "/videos/productvideos/cjq/en2.mp4",
+        "display": "Tap Water Only"
+      },
+      {
+        "url": "/videos/productvideos/cjq/en3.mp4",
+        "display": "Add Special Electrolvte"
+      }
     ],
     "name": "Multi-functional Electrolyzed Water Sterilizer",
     "notice": "1. Prepare the reaction solution on-site and use it immediately. Low-concentration hypochlorous acid is recommended to be used within 2 hour; medium-concentration hypochlorous acid can be stored for 12 hours at room temperature and away from light.\n2. After each use, clean the product promptly and keep it as dry as possible after cleaning.\n3. Do not modify, disassemble, or repair the product by yourself, as this may cause damage to the main unit.\n4. This product is prohibited from being immersed in water.\n5. The generated solution is forbidden to drink, and it is not allowed to be mixed with detergents such as concentrated sulfuric acid and toilet cleaners at the same time.",
@@ -241,7 +250,7 @@
     "precautions": "Precautions"
   },
   "property": "Company Property",
-  "learnMore": "Learn More",
+  "enter": "Enter",
   "address": "Company Address",
   "contactname": "Contact Info",
   "copyright": "Copyright"
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 38b04d4..746ebd5 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -31,11 +31,8 @@
     "mainpage": {
       "name": "首页"
     },
-    "contact_us": {
-      "name": "联系我们"
-    },
     "knowledge": {
-      "name": "知识储备"
+      "name": "知识海洋"
     },
     "store": {
       "name": "商城",
@@ -44,9 +41,6 @@
       "TaoBao": "淘宝",
       "RedNote": "小红书"
     },
-    "others": {
-      "name": "其它"
-    },
     "waterlife_flosser": {
       "name": "冲牙器"
     },
@@ -69,7 +63,10 @@
   },
   "cyq": {
     "video-urls": [
-      "/videos/productvideos/cyq/zh.mp4"
+      {
+        "url": "/videos/productvideos/cyq/zh.mp4",
+        "display": "产品简介"
+      }
     ],
     "name": "次氯酸冲牙器",
     "notice": "1、水箱泵完后及时关机,避免空转运行。\n2、公司推崇马斯克的“第一性原理”理念,即产品从最基本的事实、规律和原理出发,不依赖传统经验或类比,通过逻辑推理或者演绎,进而得出结论和解决方法的思维方式。",
@@ -120,7 +117,10 @@
   },
   "cjb": {
     "video-urls": [
-      "/videos/productvideos/cjb/zh.mp4"
+      {
+        "url": "/videos/productvideos/cjb/zh.mp4",
+        "display": "产品简介"
+      }
     ],
     "name": "次氯酸仿生除菌杯",
     "notice": "（1）即制即用,次氯酸易分解,不宜久存；\n（2）水温不建议超过40°C。",
@@ -167,9 +167,18 @@
   },
   "cjq": {
     "video-urls": [
-      "/videos/productvideos/cjq/zh.mp4",
-      "/videos/productvideos/cjq/zh2.mp4",
-      "/videos/productvideos/cjq/zh3.mp4"
+      {
+        "url": "/videos/productvideos/cjq/zh.mp4",
+        "display": "产品简介"
+      },
+      {
+        "url": "/videos/productvideos/cjq/zh2.mp4",
+        "display": "仅自来水"
+      },
+      {
+        "url": "/videos/productvideos/cjq/zh3.mp4",
+        "display": "加入电解质"
+      }
     ],
     "name": "多功能电解水除菌器",
     "notice": "1、反应液现配现用,低浓度次氯酸建议在1小时内使用,中浓度室温、避光条件下可保存24小时。\n2、每次使用后,及时清洗,洗后尽量保持干燥。\n3、请勿自行改装、拆解、维修以免导致主机损坏。如因外力导致主机破损、脱落、无法工作时,请停止使用并且联系客服维修。\n4、本产品禁止放入水中。\n5、生成后的溶液禁止饮用,禁止与浓硫酸、洁厕灵等洗涤剂同时混用。",
@@ -241,7 +250,7 @@
     "precautions": "注意事项"
   },
   "property": "公司专利",
-  "learnMore": "了解更多",
+  "enter": "进入",
   "address": "公司地址",
   "contactname": "联系方式",
   "copyright": "版权所有"
diff --git a/src/types/VideoUrl.d.ts b/src/types/VideoUrl.d.ts
new file mode 100644
index 0000000..1f3f4e9
--- /dev/null
+++ b/src/types/VideoUrl.d.ts
@@ -0,0 +1,4 @@
+export type VideoUrl = {
+  url: string
+  display: string
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e2c7841..b69efbb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,21 +3,21 @@
     <AboutSection
       v-for="section in waterLIfeSections"
       :key="section.title"
-      :reverse="false"
       :title="''"
       :description="''"
       :background-image="section.backgroundImage + locale + '.jpg'"
-      :buttonshow="false"
-      :targetPath="''"
+      :modify="true"
+      :buttonshow="true"
+      :targetPath="section.targetPath"
     />
     <AboutSection
       v-for="section in aboutSections"
       :key="section.title"
-      :reverse="section.reverse"
       :title="$t(section.title)"
       :description="$t(section.description)"
       :background-image="section.backgroundImage"
       :buttonshow="section.buttonShow"
+      :modify="section.modify"
       :targetPath="section.targetPath"
     />
   </div>
@@ -37,16 +37,19 @@ const waterLIfeSections = ref([
     title: 'areas.flosser.name',
     description: '',
     backgroundImage: '/images/banner1_',
+    targetPath: '/waterlife_flosser',
   },
   {
     title: 'areas.cup.name',
     description: '',
     backgroundImage: '/images/banner2_',
+    targetPath: '/waterlife_cup',
   },
   {
     title: 'areas.bottle.name',
     description: '',
     backgroundImage: '/images/banner3_',
+    targetPath: '/waterlife_bottle',
   },
 ])
 
@@ -55,23 +58,22 @@ const aboutSections = ref([
     title: 'areas.aged.name',
     description: 'areas.aged.intro',
     backgroundImage: background_1,
-    reverse: false,
     buttonShow: true,
+    modify:false,
     targetPath: '/todo',
   },
   {
     title: 'company.name',
     description: 'company.introduction',
     backgroundImage: background_2,
-    reverse: true,
     buttonShow: false,
+    modify:true,
     targetPath: '',
   },
   // {
   //   title: 'property',
   //   description: 'company.property',
   //   backgroundImage: background_2,
-  //   reverse: false,
   //   buttonShow: false,
   //   targetPath: '',
   // },
diff --git a/src/views/WaterLife_bottle.vue b/src/views/WaterLife_bottle.vue
index 71f2355..ef24259 100644
--- a/src/views/WaterLife_bottle.vue
+++ b/src/views/WaterLife_bottle.vue
@@ -11,7 +11,7 @@
       :info="$t(`${product.name}.info`)"
       :detailList="product.detailList"
       :imageUrl="product.imageUrl"
-      :videoUrls="tm(`${product.name}.video-urls`) as string[]"
+      :videoUrls="tm(`${product.name}.video-urls`) as VideoUrl[]"
     />
   </div>
 
@@ -37,6 +37,7 @@ import { useI18n } from 'vue-i18n'
 import seekDetail from '@/components/seekDetail.vue'
 import cjqImage from '@/assets/water/cjq.png'
 import type { DetailItem, ProductInfoData } from '@/types/product'
+import type { VideoUrl } from '@/types/VideoUrl'
 
 // import { useI18n } from 'vue-i18n'
 // const { t } = useI18n()
diff --git a/src/views/WaterLife_cup.vue b/src/views/WaterLife_cup.vue
index 26e3e2b..d4d0c29 100644
--- a/src/views/WaterLife_cup.vue
+++ b/src/views/WaterLife_cup.vue
@@ -11,7 +11,7 @@
       :info="$t(`${product.name}.info`)"
       :detailList="product.detailList"
       :imageUrl="product.imageUrl"
-      :videoUrls="tm(`${product.name}.video-urls`) as string[]"
+      :videoUrls="tm(`${product.name}.video-urls`) as VideoUrl[]"
     />
   </div>
 
@@ -37,6 +37,7 @@ import { useI18n } from 'vue-i18n'
 import seekDetail from '@/components/seekDetail.vue'
 import cjbImage from '@/assets/water/cjb.png'
 import type { DetailItem, ProductInfoData } from '@/types/product'
+import type { VideoUrl } from '@/types/VideoUrl'
 
 // import { useI18n } from 'vue-i18n'
 // const { t } = useI18n()
diff --git a/src/views/WaterLife_flosser.vue b/src/views/WaterLife_flosser.vue
index 208c463..5003fb6 100644
--- a/src/views/WaterLife_flosser.vue
+++ b/src/views/WaterLife_flosser.vue
@@ -11,7 +11,7 @@
       :info="$t(`${product.name}.info`)"
       :detailList="product.detailList"
       :imageUrl="product.imageUrl"
-      :videoUrls="tm(`${product.name}.video-urls`) as string[]"
+      :videoUrls="tm(`${product.name}.video-urls`) as VideoUrl[]"
     />
   </div>
 
@@ -37,6 +37,7 @@ import { useI18n } from 'vue-i18n'
 import seekDetail from '@/components/seekDetail.vue'
 import cyqImage from '@/assets/water/cyq.png'
 import type { DetailItem, ProductInfoData } from '@/types/product'
+import type { VideoUrl } from '@/types/VideoUrl'
 
 // import { useI18n } from 'vue-i18n'
 // const { t } = useI18n()