sleepwithoutbz/qiaoshi-tooth-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
sleepwithoutbz
2025-11-10 21:48:25 +08:00
parent de451f2aab
commit 75aff27af2
8 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/NavBar.vue
View File

@@ -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>
@@ -48,7 +46,7 @@ const menuItems = ref([
{ 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)

19
src/components/ProductDetail.vue
View File

@@ -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);

28
src/locales/en.json
View File

@@ -37,9 +37,6 @@
"knowledge": {
"name": "Sea of Knowledge"
},
"others": {
"name": "Others"
},
"store": {
"name": "Store",
"buy": "Way to purchase",
@@ -69,7 +66,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 +120,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 +166,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": "Add Tap Water"
},
{
"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.",

28
src/locales/zh.json
View File

@@ -44,9 +44,6 @@
"TaoBao": "淘宝",
"RedNote": "小红书"
},
"others": {
"name": "其它"
},
"waterlife_flosser": {
"name": "冲牙器"
},
@@ -69,7 +66,10 @@
},
"cyq": {
"video-urls": [
"/videos/productvideos/cyq/zh.mp4"
{
"url": "/videos/productvideos/cyq/zh.mp4",
"display": "产品简介"
}
],
"name": "次氯酸冲牙器",
"notice": "1、水箱泵完后及时关机,避免空转运行。\n2、公司推崇马斯克的“第一性原理”理念,即产品从最基本的事实、规律和原理出发,不依赖传统经验或类比,通过逻辑推理或者演绎,进而得出结论和解决方法的思维方式。",
@@ -120,7 +120,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 +170,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、生成后的溶液禁止饮用,禁止与浓硫酸、洁厕灵等洗涤剂同时混用。",

4
src/types/VideoUrl.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
export type VideoUrl = {
url: string
display: string
}

3
src/views/WaterLife_bottle.vue
View File

@@ -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()

3
src/views/WaterLife_cup.vue
View File

@@ -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()

3
src/views/WaterLife_flosser.vue
View File

@@ -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()