feat(WIP)
This commit is contained in:
sleepwithoutbz
@@ -2,7 +2,7 @@
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>合肥巧士健康科技</title>
|
||||
</head>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/images/RedNote.jpg
Normal file
BIN
public/images/RedNote.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
public/images/TaoBao.jpg
Normal file
BIN
public/images/TaoBao.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
public/images/WeChat.jpg
Normal file
BIN
public/images/WeChat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
public/images/background_1.jpg
Normal file
BIN
public/images/background_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
public/images/background_2.jpg
Normal file
BIN
public/images/background_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
public/images/background_3.jpg
Normal file
BIN
public/images/background_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
public/images/background_4.jpg
Normal file
BIN
public/images/background_4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
public/images/camera.png
Normal file
BIN
public/images/camera.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
public/manuals/Electric Water Flosser.pdf
Normal file
BIN
public/manuals/Electric Water Flosser.pdf
Normal file
Binary file not shown.
BIN
public/manuals/Hypochlorous Acid Bionic Sterilizing Cup.pdf
Normal file
BIN
public/manuals/Hypochlorous Acid Bionic Sterilizing Cup.pdf
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/manuals/多功能电解水除菌器.pdf
Normal file
BIN
public/manuals/多功能电解水除菌器.pdf
Normal file
Binary file not shown.
BIN
public/manuals/次氯酸仿生除菌杯.pdf
Normal file
BIN
public/manuals/次氯酸仿生除菌杯.pdf
Normal file
Binary file not shown.
BIN
public/manuals/次氯酸冲牙器.pdf
Normal file
BIN
public/manuals/次氯酸冲牙器.pdf
Normal file
Binary file not shown.
@@ -107,10 +107,11 @@ body {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
|
||||
/* background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.5; /* 背景图透明度50% */
|
||||
/* 背景图透明度50% */
|
||||
/* opacity: 0.5; */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -122,7 +123,7 @@ body {
|
||||
max-width: 800px;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(5px);
|
||||
/* backdrop-filter: blur(5px); */
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -158,7 +159,8 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 30px;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
|
||||
background: rgb(108, 186, 254);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="content-container">
|
||||
<h2 v-if="title" class="title">{{ title }}</h2>
|
||||
<p class="text">{{ content }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column; /* 纵向排列 */
|
||||
justify-content: space-between;
|
||||
padding: 2rem 4rem; /* 内边距 */
|
||||
margin: 3% 10%;
|
||||
/* background-color: #7bb77f; */
|
||||
}
|
||||
|
||||
.content-container .title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
text-align: center; /* 水平居中 */
|
||||
color: rgb(0, 3, 1);
|
||||
}
|
||||
|
||||
.content-container .text {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
text-indent: 2em; /* 缩进两个字符宽度 */
|
||||
}
|
||||
</style>
|
||||
@@ -7,9 +7,6 @@
|
||||
<span>{{ $t('company.wholeName') }} </span>
|
||||
</li>
|
||||
<li>E-mail: ykl1979@163.com</li>
|
||||
<!-- <li>
|
||||
{{ $t('contact.email') }}
|
||||
</li> -->
|
||||
<li>
|
||||
{{ $t('contact.phone') }}
|
||||
</li>
|
||||
@@ -35,8 +32,8 @@ li {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.footer-contact {
|
||||
background: linear-gradient(135deg, #8d53cc 0%, #74a3f4 100%);
|
||||
color: white;
|
||||
/* background: linear-gradient(135deg, #8d53cc 0%, #74a3f4 100%); */
|
||||
color: rgb(0, 0, 0);
|
||||
padding: 50px 0 20px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
|
||||
@@ -55,8 +52,15 @@ li {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* footer-section下的li标签样式 */
|
||||
.footer-section li {
|
||||
/* padding: 20px; */
|
||||
font-size: 1rem;
|
||||
/* font-weight: 700; */
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
@@ -4,24 +4,41 @@
|
||||
<div class="logo-section">
|
||||
<img src="../../public/images/logo.png" alt="公司Logo" class="logo" />
|
||||
<span class="company-name">{{ $t('company.name') }}</span>
|
||||
<!-- 菜单按钮（只在小屏显示） -->
|
||||
<button class="mobile-menu-btn" @click="toggleMenu">☰</button>
|
||||
</div>
|
||||
<!-- 菜单按钮（只在小屏显示） -->
|
||||
|
||||
<nav :class="['nav-bar', { open: isMenuOpen }]">
|
||||
<router-link to="/" class="nav-item">{{ $t('mainpage.name') }}</router-link>
|
||||
<router-link to="/about" class="nav-item">{{ $t('about.name') }}</router-link>
|
||||
<router-link to="/waterlife" class="nav-item">{{
|
||||
$t('areas.individual.name')
|
||||
}}</router-link>
|
||||
<router-link to="/agedlife" class="nav-item">{{ $t('areas.aged.name') }}</router-link>
|
||||
<!-- 主页 -->
|
||||
<router-link to="/" class="nav-item">{{ $t('pages.mainpage.name') }}</router-link>
|
||||
|
||||
<router-link to="/" class="nav-item">{{ $t('media.name') }}</router-link>
|
||||
<router-link to="/others" class="nav-item">{{ $t('others') }}</router-link>
|
||||
<!-- 水生活 -->
|
||||
<!-- <router-link to="/waterlife" class="nav-item">
|
||||
{{ $t('pages.waterlife.name') }}
|
||||
</router-link> -->
|
||||
|
||||
<!-- 水生活-冲牙器 -->
|
||||
<router-link to="/waterlife_flosser" class="nav-item">
|
||||
{{ $t('pages.waterlife_flosser.name') }}
|
||||
</router-link>
|
||||
|
||||
<!-- 水生活-除菌杯 -->
|
||||
<router-link to="/waterlife_cup" class="nav-item">
|
||||
{{ $t('pages.waterlife_cup.name') }}
|
||||
</router-link>
|
||||
|
||||
<!-- 水生活-小喷瓶 -->
|
||||
<router-link to="/waterlife_bottle" class="nav-item">
|
||||
{{ $t('pages.waterlife_bottle.name') }}
|
||||
</router-link>
|
||||
|
||||
<router-link to="/todo" class="nav-item">{{ $t('pages.aged.name') }}</router-link>
|
||||
<router-link to="/todo" class="nav-item">{{ $t('pages.contact_us.name') }}</router-link>
|
||||
<router-link to="/todo" class="nav-item">{{ $t('pages.others.name') }}</router-link>
|
||||
</nav>
|
||||
|
||||
<div class="language-switcher">
|
||||
<router-link to="/" class="nav-item">{{ $t('store') }}</router-link>
|
||||
<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>
|
||||
@@ -67,7 +84,7 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 30px;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
margin-bottom: 30px;
|
||||
@@ -91,7 +108,7 @@ body {
|
||||
|
||||
.company-name {
|
||||
font-size: 1.6rem;
|
||||
color: white;
|
||||
color: rgb(0, 0, 0);
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
@@ -109,7 +126,7 @@ body {
|
||||
.nav-item {
|
||||
padding: 12px 20px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: rgb(0, 0, 0);
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
@@ -164,8 +181,9 @@ body {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: rgba(32, 8, 117, 0.2);
|
||||
color: white;
|
||||
/* #6a11cb 0% */
|
||||
background: rgba(108, 186, 254, 0.5);
|
||||
color: rgb(0, 0, 0);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -213,9 +231,11 @@ body {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: absolute;
|
||||
top: 70px; /* header 高度 */
|
||||
/* header 高度 */
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
@@ -227,6 +247,7 @@ body {
|
||||
.nav-bar.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.language-switcher {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<section class="two-column-section" :class="{ 'reverse-layout': reverse }">
|
||||
<section class="two-column-section">
|
||||
<!-- 左侧产品名称与产品图片 -->
|
||||
<div v-if="imageUrl" class="image-container">
|
||||
<h3 class="image-title">{{ imagetitle }}</h3>
|
||||
<img :src="imageUrl" :alt="imageAlt" class="section-image" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧产品参数 -->
|
||||
<div class="product_details">
|
||||
<RowContent
|
||||
v-for="(item, index) in detailList"
|
||||
@@ -7,12 +14,18 @@
|
||||
:first-part="item.key"
|
||||
:second-part="item.value"
|
||||
/>
|
||||
|
||||
<!-- 右侧视频播放与手册下载 -->
|
||||
<p v-if="ad" class="text1">{{ ad }}</p>
|
||||
<p class="text2">
|
||||
{{ info }}
|
||||
<a class="text2-intro"> {{ info }} </a>
|
||||
<br />
|
||||
<button class="video-btn" @click="showVideo = true">Watch a video to learn more</button>
|
||||
<button class="video-btn" @click="showVideo = true">
|
||||
{{ $t(`operation.watch_video_learn_more`) }}
|
||||
<img src="/images/camera.png" alt="Video" class="video_icon" />
|
||||
</button>
|
||||
<button class="manual-btn" @click="downloadManual">
|
||||
{{ $t(`operation.download_manual`) }}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<teleport to="body">
|
||||
@@ -28,25 +41,17 @@
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
|
||||
<div v-if="imageUrl" class="image-container">
|
||||
<h3 class="image-title">{{ imagetitle }}</h3>
|
||||
<img :src="imageUrl" :alt="imageAlt" class="section-image" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, ref } from 'vue'
|
||||
import RowContent from './RowContent.vue'
|
||||
// const detailList = tm('cyq.detail') as DetailItem[]
|
||||
import type { PropType } from 'vue'
|
||||
interface DetailItem {
|
||||
key: string
|
||||
value: string
|
||||
}
|
||||
const showVideo = ref(false)
|
||||
defineProps({
|
||||
import type { DetailItem } from '@/types/product'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const props = defineProps({
|
||||
videoUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
@@ -86,15 +91,28 @@ defineProps({
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const showVideo = ref(false)
|
||||
|
||||
// 下载中英文手册
|
||||
const { locale } = useI18n()
|
||||
const downloadManual = () => {
|
||||
const link = document.createElement('a')
|
||||
link.href = '/manuals/' + props.imagetitle + '.pdf'
|
||||
link.download = (locale.value === 'zh' ? '手册' : 'Manual') + '.pdf'
|
||||
link.click()
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* 观看视频按钮样式 */
|
||||
.video-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
color: white;
|
||||
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
|
||||
background: rgba(255, 255, 255, 0);
|
||||
color: rgb(0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
@@ -121,6 +139,49 @@ defineProps({
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 视频按钮图标 */
|
||||
.video_icon {
|
||||
padding-left: 5px;
|
||||
width: 20px;
|
||||
/* height: 20px; */
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* 下载手册按钮样式 */
|
||||
.manual-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
|
||||
background: rgba(255, 255, 255, 0);
|
||||
color: rgb(0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
.manual-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(106, 17, 203, 0.3);
|
||||
}
|
||||
.manual-modal-overlay {
|
||||
display: none; /* 默认隐藏 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.video-modal-content {
|
||||
height: 80%; /* 屏幕一半高度 */
|
||||
@@ -183,28 +244,6 @@ h1:after {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-section h2 i {
|
||||
margin-right: 10px;
|
||||
color: #6a11cb;
|
||||
}
|
||||
|
||||
/* 双栏布局组件样式 */
|
||||
.two-column-section {
|
||||
width: 100%;
|
||||
@@ -248,7 +287,8 @@ h1:after {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
|
||||
/* background: linear-gradient(135deg, rgba(4, 134, 204, 0.1) 0%, rgba(3, 15, 110, 0.1) 100%); */
|
||||
background: linear-gradient(90deg, rgb(224, 242, 254, 0.5) 0%, rgba(167, 212, 255, 0.5) 100%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -281,11 +321,26 @@ h1:after {
|
||||
}
|
||||
|
||||
.text2 {
|
||||
font-size: 1.4em;
|
||||
/* color: #2c3e50; */
|
||||
/* font-weight: 600; */
|
||||
padding: 15px;
|
||||
max-width: 1000px;
|
||||
/* background: linear-gradient(135deg, rgb(242, 242, 242) 0%, rgb(108, 185, 254) 100%); */
|
||||
/* background: rgba(108, 186, 254, 0.5); */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.text2-intro {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.4em;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
|
||||
max-width: 1000px;
|
||||
/* background: linear-gradient(135deg, rgb(242, 242, 242) 0%, rgb(108, 185, 254) 100%); */
|
||||
background: rgba(108, 186, 254, 0.5);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -326,54 +381,3 @@ h1:after {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
<style scoped>
|
||||
.two-column-section {
|
||||
width: 80vw;
|
||||
height: 20vw;
|
||||
display: flex;
|
||||
justify-content: space-evenly; /* 水平居中整体 */
|
||||
gap: 3rem; /* 内容和图片间距 */
|
||||
padding: 5%;
|
||||
align-items: center;
|
||||
}
|
||||
.product_details {
|
||||
flex: 0.6; /* 平分可用宽度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1px; /* 设置子元素之间 5px 的间距 */
|
||||
}
|
||||
.image-container {
|
||||
flex: 0.35; /* 平分可用宽度 */
|
||||
display: flex;
|
||||
flex-direction: column; /* 内部上下排列 */
|
||||
align-items: center;
|
||||
gap: 2%;
|
||||
}
|
||||
.image-title {
|
||||
font-style: italic;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.section-image {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
}
|
||||
.two-column-section.reverse-layout {
|
||||
flex-direction: row-reverse;
|
||||
align-items: center; /* 保持垂直居中 */
|
||||
}
|
||||
|
||||
.text1 {
|
||||
font-size: 1em;
|
||||
color: rgb(27, 23, 54);
|
||||
text-indent: 2em;
|
||||
}
|
||||
.text2 {
|
||||
/* 缩进量，可以根据需要调整 */
|
||||
font-size: 1.4em;
|
||||
text-indent: 2em;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<section class="max-w-4xl mx-auto p-6 space-y-8">
|
||||
<!-- 标题 -->
|
||||
<h1 class="text-2xl font-bold text-gray-800">产品详情</h1>
|
||||
|
||||
<!-- Notice -->
|
||||
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg shadow">
|
||||
<h2 class="text-lg font-semibold text-yellow-700 mb-2">注意事项</h2>
|
||||
<p class="text-gray-700 whitespace-pre-line">{{ product.notice }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Usage -->
|
||||
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg shadow">
|
||||
<h2 class="text-lg font-semibold text-blue-700 mb-2">使用方法</h2>
|
||||
<p class="text-gray-700 whitespace-pre-line">{{ product.usage }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="bg-green-50 border-l-4 border-green-400 p-4 rounded-lg shadow">
|
||||
<h2 class="text-lg font-semibold text-green-700 mb-2">功能特点</h2>
|
||||
<p class="text-gray-700 whitespace-pre-line">{{ product.features }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Introduction -->
|
||||
<div class="bg-purple-50 border-l-4 border-purple-400 p-4 rounded-lg shadow">
|
||||
<h2 class="text-lg font-semibold text-purple-700 mb-2">产品介绍</h2>
|
||||
<p class="text-gray-700 whitespace-pre-line">{{ product.introduction }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const product = {
|
||||
notice:
|
||||
'1. Tap water only\n2. Turn off the device promptly after the water tank is emptied to avoid dry running.',
|
||||
usage:
|
||||
'（1） Unscrew the water tank and add an appropriate amount of tap water;\n（2）Press the switch, and the blue light will turn on; after the teeth are flushed, press the switch again, and the device will shut down;\n（3）If the red indicator light is on, it indicates a low battery, and a timely charge is required; the charger can be a regular phone charger, and after charging, the green indicator light will turn on.',
|
||||
features:
|
||||
'Building on traditional cleaning methods, this approach integrates low-pressure electrolyzed water technology to create a unique "hypochlorous acid-microbubble cavitation" system. It not only mimick the bactericidal mechanism of white blood cells through hypochlorous acid but also harnesses the "cavitation effect" of nanoscale microbubbles, enabling secondary cleaning of oral bacteria and dirt.',
|
||||
introduction:
|
||||
'The product uses electrolysis technology to convert chlorine elements in tap water into low-concentration hypochloric acid (5-10 ppm), while simultaneously forming a high-speed liquid with microbubbles of 0-0.5 µm and producing a "cavitation effect." This unique "hypochloric acid-microbubble cavitation" method simulates the bactericidal mechanism of neutrophils while simultaneously utilizing the "cavitation effect" of nano-sized microbubbles, achieve secondary removal of oral bacteria and dirt.',
|
||||
}
|
||||
</script>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div class="product-info">
|
||||
<section class="info-section intro-section">
|
||||
<h2 class="section-title">Introduction</h2>
|
||||
<p class="section-text">{{ productData.introduction }}</p>
|
||||
</section>
|
||||
|
||||
<section class="info-section features-section">
|
||||
<h2 class="section-title">Features</h2>
|
||||
<p class="section-text">{{ productData.features }}</p>
|
||||
</section>
|
||||
|
||||
<section class="info-section usage-section">
|
||||
<h2 class="section-title">Usage Instructions</h2>
|
||||
<p class="section-text">{{ productData.usage }}</p>
|
||||
</section>
|
||||
|
||||
<section class="info-section notice-section">
|
||||
<h2 class="section-title">Notice</h2>
|
||||
<p class="section-text">{{ productData.notice }}</p>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
defineProps({
|
||||
productData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
notice: '',
|
||||
usage: '',
|
||||
features: '',
|
||||
introduction: '',
|
||||
}),
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-info {
|
||||
/* Center and constrain content for readability on large screens */
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.info-section:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1rem;
|
||||
white-space: pre-line; /* Preserves line breaks from source text */
|
||||
}
|
||||
|
||||
/* Specific section styles for visual differentiation */
|
||||
.intro-section {
|
||||
background-color: #e8f5e9; /* Light green */
|
||||
}
|
||||
|
||||
.features-section {
|
||||
background-color: #e3f2fd; /* Light blue */
|
||||
}
|
||||
|
||||
.usage-section {
|
||||
background-color: #fff3e0; /* Light orange */
|
||||
}
|
||||
|
||||
.notice-section {
|
||||
background-color: #ffebee; /* Light red */
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +1,62 @@
|
||||
<template>
|
||||
<div class="product-detail">
|
||||
<h2 class="section-title">{{ $t('product-details') }}</h2>
|
||||
<h2 class="section-title">{{ $t('product-details.title') }}</h2>
|
||||
|
||||
<!-- 产品介绍 -->
|
||||
<div class="info-card">
|
||||
<div class="card-header" @click="toggleSection('introduction')">
|
||||
<h3>{{ $t('product-intro') }}</h3>
|
||||
<h3>{{ $t('product-details.intro') }}</h3>
|
||||
</div>
|
||||
<div class="card-content" v-if="visibleSections.introduction">
|
||||
<p>{{ productData.introduction }}</p>
|
||||
<p style="white-space: pre-line;">{{ productData.introduction }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品特点 -->
|
||||
<div class="info-card" v-if="productData.features">
|
||||
<div class="card-header" @click="toggleSection('features')">
|
||||
<h3>{{ $t('product-feature') }}</h3>
|
||||
<h3>{{ $t('product-details.feature') }}</h3>
|
||||
</div>
|
||||
<div class="card-content" v-if="visibleSections.features">
|
||||
<p>{{ productData.features }}</p>
|
||||
<p style="white-space: pre-line;">{{ productData.features }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用方法 -->
|
||||
<div class="info-card">
|
||||
<div class="card-header" @click="toggleSection('usage')">
|
||||
<h3>{{ $t('usage-instruction') }}</h3>
|
||||
<h3>{{ $t('product-details.instruction') }}</h3>
|
||||
</div>
|
||||
<div class="card-content" v-if="visibleSections.usage">
|
||||
<!-- <div class="step-item" v-for="(step, index) in usageSteps" :key="index">
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-text">{{ step }}</div>
|
||||
</div> -->
|
||||
<p>{{ productData.usage }}</p>
|
||||
<p style="white-space: pre-line;">{{ productData.usage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注意事项 -->
|
||||
<div class="info-card">
|
||||
<div class="card-header" @click="toggleSection('notice')">
|
||||
<h3>{{ $t('precautions') }}</h3>
|
||||
<h3>{{ $t('product-details.precautions') }}</h3>
|
||||
</div>
|
||||
<div class="card-content" v-if="visibleSections.notice">
|
||||
<!-- <div class="notice-item" v-for="(note, index) in noticePoints" :key="index">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<span>{{ note }}</span>
|
||||
</div> -->
|
||||
<p>{{ productData.notice }}</p>
|
||||
<p style="white-space: pre-line;">{{ productData.notice }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ProductInfoData } from '@/types/product'
|
||||
import { ref } from 'vue'
|
||||
import { type PropType } from 'vue'
|
||||
|
||||
// 定义 props 接口
|
||||
interface ProductInfoData {
|
||||
notice: string
|
||||
usage: string
|
||||
features: string
|
||||
introduction: string
|
||||
}
|
||||
|
||||
// 接收 props，使用 PropType 确保类型正确性
|
||||
defineProps({
|
||||
productData: {
|
||||
@@ -81,11 +74,12 @@ const visibleSections = ref({
|
||||
})
|
||||
|
||||
function toggleSection(section: keyof ProductInfoData) {
|
||||
visibleSections.value[section] = !visibleSections.value[section]
|
||||
// 添加类型断言，清除报错
|
||||
const key = section as keyof typeof visibleSections.value
|
||||
visibleSections.value[key] = !visibleSections.value[key]
|
||||
}
|
||||
|
||||
// 暴露给模板使用
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-detail {
|
||||
margin: 30px 0;
|
||||
@@ -133,7 +127,8 @@ function toggleSection(section: keyof ProductInfoData) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
/* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
|
||||
background: rgb(108, 186, 254);
|
||||
color: rgb(255, 255, 255);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1,248 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>背景图标题组件</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-section h2 i {
|
||||
margin-right: 10px;
|
||||
color: #6a11cb;
|
||||
}
|
||||
|
||||
/* 背景图标题组件样式 */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
margin: 30px 0;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.5; /* 背景图透明度50% */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
max-width: 800px;
|
||||
padding: 40px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.hero-title:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 30px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 30px;
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.hero-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(106, 17, 203, 0.3);
|
||||
}
|
||||
|
||||
.hero-btn i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 30px 20px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-section {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<div class="demo-section">
|
||||
<h2><i class="fas fa-image"></i> 背景图标题组件演示</h2>
|
||||
|
||||
<hero-section
|
||||
title="创新科技，呵护健康"
|
||||
description="我们的产品采用先进的电解水技术，能够有效清除口腔细菌，保护牙齿健康。结合微气泡空化效应和次氯酸杀菌技术，提供双重清洁保护，为您带来卓越的口腔护理体验。"
|
||||
background-image="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
|
||||
button-text="了解更多"
|
||||
></hero-section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
|
||||
// 背景图标题组件
|
||||
const HeroSection = {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
backgroundImage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '了解更多',
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div class="hero-section">
|
||||
<div class="hero-bg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
|
||||
<div class="hero-content">
|
||||
<h2 class="hero-title">{{ title }}</h2>
|
||||
<p class="hero-description">{{ description }}</p>
|
||||
<button class="hero-btn">
|
||||
<i class="fas fa-info-circle"></i>{{ buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
|
||||
// 主应用
|
||||
const app = createApp({})
|
||||
|
||||
app.component('HeroSection', HeroSection)
|
||||
app.mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,8 +0,0 @@
|
||||
<video
|
||||
controls="controls"
|
||||
autoplay="autoplay"
|
||||
playsinline="true"
|
||||
h5-playsinline="true"
|
||||
webkit-playsinline="true"
|
||||
src="https://usmile.oss-cn-shenzhen.aliyuncs.com/cnsrc/89SxNcwY.mp4"
|
||||
></video>
|
||||
@@ -1,4 +1,8 @@
|
||||
{
|
||||
"operation": {
|
||||
"watch_video_learn_more": "Watch a video to learn more",
|
||||
"download_manual": "Download the manual"
|
||||
},
|
||||
"company": {
|
||||
"name": "HefeiChoice Health Technology",
|
||||
"wholeName": "HefeiChoice Health Technology",
|
||||
@@ -6,17 +10,50 @@
|
||||
"property": "Our company currently holds 21 patents including 1 invention, 8 utility models, 4 design patents, 7 software copyrights, and 1 trademark. Additionally, 3 invention patents are under substantive examination."
|
||||
},
|
||||
"areas": {
|
||||
"name": "领域",
|
||||
"individual": {
|
||||
"waterlife": {
|
||||
"name": "Water Life",
|
||||
"intro": "In the field of personal protection, Hefei Qiaoshi Health Technology Company has ingeniously applied low-pressure electrolyzed water technology to simulate the oxidative sterilization mechanism of neutrophils (intracellular hypochlorous acid generation and bactericidal effects), establishing a comprehensive, multi-tiered product system centered on \"on-site production of hypochlorous acid\". The company has also pioneered the \"Oral Care New Concept\" based on the HefeiChoice Solution within the industry.",
|
||||
"items": [
|
||||
"Direct Utilization of Chlorine in Tap Water: By directly utilizing the chlorine elements in tap water, this technology converts them into low-concentration hypochlorous acid (5-10 ppm, pH≈7.0), combined with the \"cavitation effect\" of micro-nano bubbles, achieving highly efficient sterilization and cleaning of teeth and gums.",
|
||||
"Use food raw materials as substrates to produce hypochlorous acid with varying concentrations (25-98 ppm) and pH levels (5.8-7.0) tailored to different scenarios. These meet the needs of daily oral hygiene, inhibiting dental caries and plaque, alleviating periodontal diseases, while extending to the cleaning and deodorization of dental appliances/braces, as well as travel-friendly personal care."
|
||||
]
|
||||
"intro": "In the field of personal protection, Hefei Qiaoshi Health Technology Company has ingeniously applied low-pressure electrolyzed water technology to simulate the oxidative sterilization mechanism of neutrophils (intracellular hypochlorous acid generation and bactericidal effects), establishing a comprehensive, multi-tiered product system centered on \"on-site production of hypochlorous acid\". The company has also pioneered the \"Oral Care New Concept\" based on the HefeiChoice Solution within the industry."
|
||||
},
|
||||
"aged": {
|
||||
"name": "Elderly Care",
|
||||
"intro": "In the field of chronic disease management, relying on independently developed IoT-enabled smart pillboxes and chronic disease management systems, the company integrates IoT blood pressure monitors and mobile terminals for blood glucose meters. While managing medication adherence, health data, and prescription evaluation of patients with chronic diseases, the company has also established a unique \"pocket medical record\" and extended its services to the fields of medical consultation and home-based elderly care."
|
||||
}
|
||||
},
|
||||
"pages": {
|
||||
"mainpage": {
|
||||
"name": "Main"
|
||||
},
|
||||
"contact_us": {
|
||||
"name": "Contact Us"
|
||||
},
|
||||
"others": {
|
||||
"name": "Others"
|
||||
},
|
||||
"store": {
|
||||
"name": "Store",
|
||||
"buy": "Way to purchase",
|
||||
"WeChat": "WeChat",
|
||||
"TaoBao": "TaoBao",
|
||||
"RedNote": "RedNote"
|
||||
},
|
||||
"waterlife_flosser": {
|
||||
"name": "Braces Cleaner"
|
||||
},
|
||||
"waterlife_cup": {
|
||||
"name": "Mouthwash Cup"
|
||||
},
|
||||
"waterlife_bottle": {
|
||||
"name": "Travel Companion"
|
||||
},
|
||||
"waterlife": {
|
||||
"name": "Water Life"
|
||||
},
|
||||
"aged": {
|
||||
"name": "Elderly Care"
|
||||
},
|
||||
"todo": {
|
||||
"name": "Not Completed Page",
|
||||
"content": "To Be Developed..."
|
||||
}
|
||||
},
|
||||
|
||||
@@ -24,41 +61,54 @@
|
||||
"video-url": "/videos/productvideos/cyq/en.mp4",
|
||||
|
||||
"name": "Electric Water Flosser",
|
||||
"notice": "1. Tap water only 2. Turn off the device promptly after the water tank is emptied to avoid dry running. ",
|
||||
"usage": "（1） Unscrew the water tank and add an appropriate amount of tap water;（2）Press the switch, and the blue light will turn on; after the teeth are flushed, press the switch again, and the device will shut down;（3）If the red indicator light is on, it indicates a low battery, and a timely charge is required; the charger can be a regular phone charger, and after charging, the green indicator light will turn on.",
|
||||
"notice": "1. Tap water only.\n2. Turn off the device promptly after the water tank is emptied to avoid dry running.",
|
||||
"usage": "（1） Unscrew the water tank and add an appropriate amount of tap water;\n（2）Press the switch, and the blue light will turn on; after the teeth are flushed, press the switch again, and the device will shut down;\n（3）If the red indicator light is on, it indicates a low battery, and a timely charge is required; the charger can be a regular phone charger, and after charging, the green indicator light will turn on.",
|
||||
"features": "Building on traditional cleaning methods, this approach integrates low-pressure electrolyzed water technology to create a unique \"hypochlorous acid-microbubble cavitation\" system. It not only mimick the bactericidal mechanism of white blood cells through hypochlorous acid but also harnesses the \"cavitation effect\" of nanoscale microbubbles, enabling secondary cleaning of oral bacteria and dirt.",
|
||||
"introduction": "The product uses electrolysis technology to convert chlorine elements in tap water into low-concentration hypochloric acid (5-10 ppm), while simultaneously forming a high-speed liquid with microbubbles of 0-0.5 µm and producing a \"cavitation effect.\" This unique \"hypochloric acid-microbubble cavitation\" method simulates the bactericidal mechanism of neutrophils while simultaneously structural diagram.utilizing the \"cavitation effect\" of nano-sized microbubbles, achieve secondary removal of oral bacteria and dirt.",
|
||||
"ad": "Hypochlorous Acid + Microbubble Cavitation, Instantly electrolyzes low-concentration hypochlorous acid upon adding water",
|
||||
"ad": "Hypochlorous Acid + Microbubble Cavitation, Instantly electrolyzes low-concentration hypochlorous acid upon adding water.",
|
||||
"detail": [
|
||||
{
|
||||
"key": "Product Name",
|
||||
"value": "Electric Water Flosser"
|
||||
},
|
||||
{
|
||||
"key": "Working Voltage",
|
||||
"value": "20V"
|
||||
"key": "Product Model",
|
||||
"value": "JKJJ-1"
|
||||
},
|
||||
{ "key": "Tank Volume", "value": "Approx.250ml" },
|
||||
{
|
||||
"key": "Applicable Water Source",
|
||||
"key": "Working Voltage",
|
||||
"value": "26V"
|
||||
},
|
||||
{
|
||||
"key": "Maximum Power",
|
||||
"value": "78W"
|
||||
},
|
||||
{
|
||||
"key": "Concentration Reaches A Steady State",
|
||||
"value": "Municipal Tap Water"
|
||||
},
|
||||
{ "key": "Tank Volume", "value": "About 250ml" },
|
||||
{ "key": "Product Weight", "value": "About 230 grams" },
|
||||
{
|
||||
"key": "Hypochlorous Acid Concentration",
|
||||
"value": "6-10ppm"
|
||||
},
|
||||
{
|
||||
"key": "Applicable Water Source",
|
||||
"value": "Municipal Tap Water"
|
||||
}
|
||||
],
|
||||
"adshort": "Geek Clean World Bionic Water Flosser",
|
||||
|
||||
"info": " The hypochlorous acid water flosser combines the advantages of high-efficiency cleaning and sterilization. It utilizes high-pressure pulsed water jets to effectively remove debris from hard-to-reach areas such as between teeth that are difficult to reach with toothbrushes. Leveraging low-concentration (5ppm) hypochlorous acid, it can rapidly kill oral bacteria and effectively inhibit dental plaque."
|
||||
"info": "Low-concentration hypochloric acid+cavitation effect"
|
||||
},
|
||||
"cjb": {
|
||||
"video-url": "/videos/productvideos/cjb/en.mp4",
|
||||
"name": "Hypochlorous Acid Bionic Sterilizing Cup",
|
||||
"notice": "(1) Use immediately after preparation.(2) Water temperature exceeding 40°C is not recommended.",
|
||||
"scenarios": "(1)Cleans the oral cavity, suppresses dental caries and plaque, and relieves periodontal conditions (2)Soaks toothbrushes, orthodontic aligners, dentures, and other oral tools to neutralize odors.",
|
||||
"features": "(1) Mimics white blood cell bactericidal mechanism: generates hypochlorous acid (HOCl)—the most critical bactericidal agent produced by white blood cells—through in vitro synthesis. (2) Food-Grade Formulation: all ingredients are derived from food-grade materials, and the product has passed \"oral toxicity-free\" certification.",
|
||||
"usage": "(1) Add a small packet of special electrolyte and water or purified water for approximately 250ml；(2) Press the power switch; the blue indicator light turns on, and the device automatically stops after approximately 90 seconds of operation. The mouthwash solution is now ready.(3) If the blue indicator light starts flashing, it indicates that the battery is low, and a timely charge is required. The charger can be a regular phone charger; when fully charged, the red indicator light turns green.",
|
||||
"notice": "(1) Use immediately after preparation.\n(2) Water temperature exceeding 40°C is not recommended.",
|
||||
"scenarios": "(1)Cleans the oral cavity, suppresses dental caries and plaque, and relieves periodontal conditions.\n(2)Soaks toothbrushes, orthodontic aligners, dentures, and other oral tools to neutralize odors.",
|
||||
"features": "(1) Mimics white blood cell bactericidal mechanism: generates hypochlorous acid (HOCl)—the most critical bactericidal agent produced by white blood cells—through in vitro synthesis.\n(2) Food-Grade Formulation: all ingredients are derived from food-grade materials, and the product has passed \"oral toxicity-free\" certification.",
|
||||
"usage": "(1) Add a small packet of special electrolyte and water or purified water for approximately 250ml.\n(2) Press the power switch; the blue indicator light turns on, and the device automatically stops after approximately 90 seconds of operation. The mouthwash solution is now ready.\n(3) If the blue indicator light starts flashing, it indicates that the battery is low, and a timely charge is required. The charger can be a regular phone charger; when fully charged, the red indicator light turns green.",
|
||||
"introduction": "This product utilizes electrolysis technology with food ingredients to generate low-concentration hypochlorous acid (18-30 ppm). By mimicking the bactericidal mechanism of white blood cells(neutrophils), it effectively eliminates oral pathogens, inhibits dental caries, and alleviates periodontal diseases. Special electrolyte consists of food materials (common salt and PBS) and the patent application number for electrolyte formula is No: 202410555233.1 ",
|
||||
"detail": [
|
||||
{
|
||||
@@ -77,9 +127,17 @@
|
||||
"key": "Working Volume",
|
||||
"value": "Approx.250ml"
|
||||
},
|
||||
{
|
||||
"key": "Electrolysis Time",
|
||||
"value": "90 seconds"
|
||||
},
|
||||
{
|
||||
"key": "Hypochlorous Acid Concentration",
|
||||
"value": "Approx.25ppm"
|
||||
"value": "15-25ppm"
|
||||
},
|
||||
{
|
||||
"key": "PH",
|
||||
"value": "6-6.8"
|
||||
}
|
||||
],
|
||||
"info": "Generates hypochlorous acid through electrolyte electrolysis.",
|
||||
@@ -88,16 +146,36 @@
|
||||
"cjq": {
|
||||
"video-url": "/videos/productvideos/cjq/en.mp4",
|
||||
|
||||
"name": "Multifunctional 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. 2. After each use, clean the product promptly and keep it as dry as possible after cleaning. 3. Do not modify, disassemble, or repair the product by yourself, as this may cause damage to the main unit. 4. This product is prohibited from being immersed in water. 5. 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.",
|
||||
"cleaning": "1.After using the device, rinse it with clean water promptly and shake it dry.2.A cathode scale will form on the electrodes after long-term use, which may affect the service life of the device. It is recommended to clean the electrodes once a week with special electrolyte.",
|
||||
"usage": "1. Unscrew the spray head, pour in approximately 25ml tap water, then screw the spray head tightly.2. Press and hold the power button for 1 second to start the device; the blue indicator light will turn on and automatically turn off after 1.5 minutes of operation. If the blue indicator light flashes, it indicates low battery, and the device needs to be charged promptly.Ps：(1) Preventive Disinfection: Use only tap water with no additives; simply start the device directly.(2) Emergency Disinfection: Before starting, pull out one special electrolyte tube from the bottom cover and pour into the spray bottle containing 25ml of tap water, shake well and then start the device.(3) When charging, the green indicator light at the bottom turns on; the indicator light turns off once charging is complete.",
|
||||
"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.",
|
||||
"cleaning": "1.After using the device, rinse it with clean water promptly and shake it dry.\n2.A cathode scale will form on the electrodes after long-term use, which may affect the service life of the device. It is recommended to clean the electrodes once a week with special electrolyte.",
|
||||
"usage": "1. Unscrew the spray head, pour in approximately 25ml tap water, then screw the spray head tightly.\n2. Press and hold the power button for 1 second to start the device; the blue indicator light will turn on and automatically turn off after 1.5 minutes of operation. If the blue indicator light flashes, it indicates low battery, and the device needs to be charged promptly.\nPs：(1) Preventive Disinfection: Use only tap water with no additives; simply start the device directly.\n(2) Emergency Disinfection: Before starting, pull out one special electrolyte tube from the bottom cover and pour into the spray bottle containing 25ml of tap water, shake well and then start the device.\n(3) When charging, the green indicator light at the bottom turns on; the indicator light turns off once charging is complete.",
|
||||
"scenarios": "(1) Preventive Disinfection (Low-concentration)Apply to the surfaces of contact objects such as handrails of public transportation (e.g., buses, subways, shared bikes), elevators, and express parcels.(2) Emergency Disinfection (Medium-concentration) Apply to pathogen-contaminated items, epidemic-related objects, and contaminants from blood or body fluids of patients with infectious diseases.",
|
||||
"introduction": "This device can directly utilize the chlorine element in tap water and convert it into low-concentration hypochlorous acid (5-10mg/L) through electrolysis; alternatively, it can use special electrolyte to generate medium-concentration hypochlorous acid (approximately 100mg/L) with pH around 5.8.",
|
||||
"detail": [
|
||||
{
|
||||
"key": "Product Name",
|
||||
"value": "Multifunctional Electrolyzed Water Sterilizer"
|
||||
"value": "Multi-Functional Electrolyzed Water Sterilizer (Ultimate Travel Companion)"
|
||||
},
|
||||
{
|
||||
"key": "Operating Voltage",
|
||||
"value": "12V"
|
||||
},
|
||||
{
|
||||
"key": "Input Power Supply",
|
||||
"value": "5V/2A Adapter"
|
||||
},
|
||||
{
|
||||
"key": "Rated Power",
|
||||
"value": "1.4W"
|
||||
},
|
||||
{
|
||||
"key": "Battery Capacity",
|
||||
"value": "400mAh"
|
||||
},
|
||||
{
|
||||
"key": "Electrolysis time",
|
||||
"value": "1.5 minutes"
|
||||
},
|
||||
{
|
||||
"key": "Applicable Water Source",
|
||||
@@ -109,7 +187,7 @@
|
||||
},
|
||||
{
|
||||
"key": "Hypochlorous Acid Concentration",
|
||||
"value": "6-10ppm (tap water only) Approx.98ppm (with dedicated electrolyte)"
|
||||
"value": "6-10ppm (tap water only); Approx.98ppm (with dedicated electrolyte)"
|
||||
}
|
||||
],
|
||||
"info": "Hypochlorous Acid, Ultimate Travel Companion",
|
||||
@@ -122,27 +200,17 @@
|
||||
|
||||
"address": "Room 805, Building 5, Anhui Shangrong Big Health Industrial Park, Intersection of Baogong Avenue and Dazhong Road, Longgang Comprehensive Economic Development Zone, Yaohai District, Hefei City, Anhui Province"
|
||||
},
|
||||
"about": {
|
||||
"name": "About Us",
|
||||
"info": ""
|
||||
},
|
||||
"mainpage": {
|
||||
"name": "Main"
|
||||
},
|
||||
"media": {
|
||||
"name": "Contact Us"
|
||||
},
|
||||
|
||||
"product-feature": "Product Feature",
|
||||
"product-intro": "Product Introduction",
|
||||
"usage-instruction": "Usage Instructions",
|
||||
"precautions": "Precautions",
|
||||
"product-details": "Product Details",
|
||||
"product-details": {
|
||||
"title": "Product Details",
|
||||
"feature": "Product Feature",
|
||||
"intro": "Product Introduction",
|
||||
"instruction": "Usage Instructions",
|
||||
"precautions": "Precautions"
|
||||
},
|
||||
"property": "Company Property",
|
||||
"learnMore": "Learn More",
|
||||
"address": "Company Address",
|
||||
"contactname": "Contact Info",
|
||||
"copyright": "Copyright",
|
||||
"store": "Store",
|
||||
"others": "Others"
|
||||
"copyright": "Copyright"
|
||||
}
|
||||
|
||||
@@ -1,30 +1,69 @@
|
||||
{
|
||||
"operation": {
|
||||
"watch_video_learn_more": "观看视频了解更多",
|
||||
"download_manual": "下载手册"
|
||||
},
|
||||
|
||||
"company": {
|
||||
"name": "合肥巧士健康科技",
|
||||
"wholeName": "合肥巧士健康科技有限责任公司",
|
||||
"introduction": "合肥巧士健康科技成立于 2020 年,是一家专注于公共卫生领域技术应用,产品设计 研发与生产的科技型中小企业。公司于 2022 年荣获“国家高新技术企业” “合肥市大数据企业”称号,并取得“消毒器械生产许可”资质。",
|
||||
"property": "公司现拥有知识产权 21 项,其中发明 1 项 实用新型 8 项 外观专利 4项 软著7项 商标 1 项,另有 2 项实用新型与 3 项发明正在实审阶段。"
|
||||
},
|
||||
|
||||
"areas": {
|
||||
"name": "领域",
|
||||
"individual": {
|
||||
"waterlife": {
|
||||
"name": "水生活产品系列",
|
||||
"intro": "在个人防护领域,公司巧妙运用低压电解水技术,体外模拟白细胞氧化杀菌机制（胞内次氯酸生成与杀菌）,建立起以“次氯酸“即制即用为核心的全方位 多层次产品体系,并在行业内率先提出基于巧士方案的“口腔护理新概念“：",
|
||||
"items": [
|
||||
"1 直接利用自来水氯元素,将其转化为低浓度次氯酸（浓度 5-10ppm,PH 约 7.0）,结合微纳米气泡的“空化效应”,实现齿与龈的高效杀菌与清洁作用。",
|
||||
"2.2 采用混合电解法,以食品原料为基材,根据不同场景制备出浓度 25-98ppm PH5.8-7.0 不等的次氯酸。在满足日常口腔清洁 抑制龋齿与菌斑 缓解牙周疾病的同时,延伸到牙具牙套的清洁与异味消除以及差旅出行的日护领域"
|
||||
]
|
||||
"intro": "在个人防护领域,公司巧妙运用低压电解水技术,体外模拟白细胞氧化杀菌机制（胞内次氯酸生成与杀菌）,建立起以“次氯酸“即制即用为核心的全方位 多层次产品体系,并在行业内率先提出基于巧士方案的“口腔护理新概念“："
|
||||
},
|
||||
"aged": {
|
||||
"name": "慢病养老系列"
|
||||
"name": "慢病养老系列",
|
||||
"intro": "在慢病管理领域，公司依托自主研发的物联网智能药盒与慢病管理系统，整合物联网血压计、血糖仪移动终端，在实现慢病患者用药行为、健康数据与处方评价管理的同时，建立独特的“口袋病历”，并向就医服务、居家养老领域延伸。"
|
||||
}
|
||||
},
|
||||
|
||||
"pages": {
|
||||
"mainpage": {
|
||||
"name": "首页"
|
||||
},
|
||||
"contact_us": {
|
||||
"name": "联系我们"
|
||||
},
|
||||
"others": {
|
||||
"name": "其它"
|
||||
},
|
||||
"store": {
|
||||
"name": "商城",
|
||||
"buy": "购买方式",
|
||||
"WeChat": "微信",
|
||||
"TaoBao": "淘宝",
|
||||
"RedNote": "小红书"
|
||||
},
|
||||
"waterlife_flosser": {
|
||||
"name": "冲牙器"
|
||||
},
|
||||
"waterlife_cup": {
|
||||
"name": "除菌杯"
|
||||
},
|
||||
"waterlife_bottle": {
|
||||
"name": "小喷瓶"
|
||||
},
|
||||
"waterlife": {
|
||||
"name": "水生活产品系列"
|
||||
},
|
||||
"aged": {
|
||||
"name": "慢病养老系列"
|
||||
},
|
||||
"todo": {
|
||||
"name": "未完成页面",
|
||||
"content": "待开发..."
|
||||
}
|
||||
},
|
||||
"cyq": {
|
||||
"video-url": "/videos/productvideos/cyq/zh.mp4",
|
||||
"name": "次氯酸冲牙器",
|
||||
"notice": "1、水箱泵完后及时关机,避免空转运行。2、公司推崇马斯克的“第一性原理”理念,即产品从最基本的事实、规律和原理出发,不依赖传统经验或类比,通过逻辑推理或者演绎,进而得出结论和解决方法的思维方式。",
|
||||
"usage": "（1）拧下水箱,加适量自来水;（2）按下开关,蓝灯亮起;冲牙完毕后再次按下开关,设备关机;（3）如红色指示灯亮起,说明电量不足,须及时充电;充电器可为常规手机充电器,充电完成后绿色指示灯亮起。",
|
||||
"notice": "1、水箱泵完后及时关机,避免空转运行。\n2、公司推崇马斯克的“第一性原理”理念,即产品从最基本的事实、规律和原理出发,不依赖传统经验或类比,通过逻辑推理或者演绎,进而得出结论和解决方法的思维方式。",
|
||||
"usage": "（1）拧下水箱,加适量自来水;\n（2）按下开关,蓝灯亮起;冲牙完毕后再次按下开关,设备关机;\n（3）如红色指示灯亮起,说明电量不足,须及时充电;充电器可为常规手机充电器,充电完成后绿色指示灯亮起。",
|
||||
"features": "在传统清洁模式基础上,融合低压电解水技术,形成独特的“次氯酸-微气泡空化”方式,既能模拟白细胞次氯酸杀菌机制,又能发挥纳米级微气泡的“空化效应”,实现口腔病菌与污物的二次清洁。",
|
||||
"introduction": "本产品通过电解技术,将自来水中的氯元素转化为低浓度次氯酸（5-10ppm）,同时形成0-0.5um 的微气泡高速液体流并产生“空化效应”。这种独特的“次氯酸-微气泡空化”方式,模拟白细胞次氯酸杀菌机制的同时,发挥纳米级微气泡的“空化效应”,实现口腔病菌与污物的二次清除。",
|
||||
"ad": "次氯酸+微气泡空化反应,加水即刻电解出低浓度次氯酸",
|
||||
@@ -33,41 +72,59 @@
|
||||
"key": "产品名称",
|
||||
"value": "电动冲牙器"
|
||||
},
|
||||
{
|
||||
"key": "产品型号",
|
||||
"value": "JKJJ-1"
|
||||
},
|
||||
{
|
||||
"key": "工作电压",
|
||||
"value": "20V"
|
||||
"value": "26V"
|
||||
},
|
||||
{
|
||||
"key": "最大功率",
|
||||
"value": "78W"
|
||||
},
|
||||
{
|
||||
"key": "浓度达到稳定状态",
|
||||
"value": "约工作后8秒"
|
||||
},
|
||||
{
|
||||
"key": "水箱容积",
|
||||
"value": "约250ml"
|
||||
},
|
||||
{
|
||||
"key": "适用水源",
|
||||
"value": "市政自来水"
|
||||
"key": "次氯酸浓度",
|
||||
"value": "5-10ppm"
|
||||
},
|
||||
{
|
||||
"key": "次氯酸浓度",
|
||||
"value": "6-10ppm"
|
||||
"key": "产品重量",
|
||||
"value": "约230克"
|
||||
},
|
||||
{
|
||||
"key": "适用水源",
|
||||
"value": "市政自来水"
|
||||
}
|
||||
],
|
||||
"adshort": "极客净界,仿生水牙线",
|
||||
|
||||
"info": "次氯酸冲牙器兼具高效清洁与杀菌优势,以高压脉冲水流强力清除牙缝等牙刷难及处的残渣,同时依托低浓度（5ppm）次氯酸快速杀灭口腔细菌,有效抑制牙菌斑。"
|
||||
"info": "低浓度次氯酸+空化效应"
|
||||
},
|
||||
"cjb": {
|
||||
"video-url": "/videos/productvideos/cjb/zh.mp4",
|
||||
|
||||
"name": "次氯酸仿生除菌杯",
|
||||
"notice": "（1）即制即用,次氯酸易分解,不宜久存；（2）水温不建议超过40°C。",
|
||||
"usage": "（1）杯中倒入专用电解质,加自来水或纯净水约250ml;（2）按下开关,蓝灯亮起,工作约90秒后自动停止, 漱口液制备完毕。（3）如工作时蓝色指示灯开始闪烁,说明电量不足,须及时充电;充电器可为常规手机充电器,充电时红色指示灯亮起,充满后则绿色指示灯亮起。",
|
||||
"scenarios": "（1）清洁口腔,抑制龋齿与菌斑 缓解牙周疾病。（2）浸泡牙刷 牙套 义齿等牙具,消除异味。",
|
||||
"features": "（1）模拟白细胞杀菌机制,体外生成白细胞最重要的杀菌因子-次氯酸。（2）配方均源自食品材料,产物已通过“经口无毒”检测。",
|
||||
"introduction": "本产品通过食品原料的电解技术,生成低浓度次氯酸（18-30ppm）,模拟白细胞杀菌机制发挥清除口腔病菌 抑制龋齿 缓解牙周疾病的作用。（1）清洁口腔,抑制龋齿与菌斑 缓解牙周疾病。（2）浸泡牙刷 牙套 义齿等牙具,消除异味。（电解配方）专利申请号：2024105552331",
|
||||
"notice": "（1）即制即用,次氯酸易分解,不宜久存；\n（2）水温不建议超过40°C。",
|
||||
"usage": "（1）杯中倒入专用电解质,加自来水或纯净水约250ml;\n（2）按下开关,蓝灯亮起,工作约90秒后自动停止, 漱口液制备完毕。\n（3）如工作时蓝色指示灯开始闪烁,说明电量不足,须及时充电;充电器可为常规手机充电器,充电时红色指示灯亮起,充满后则绿色指示灯亮起。",
|
||||
"scenarios": "（1）清洁口腔,抑制龋齿与菌斑 缓解牙周疾病。\n（2）浸泡牙刷 牙套 义齿等牙具,消除异味。",
|
||||
"features": "（1）模拟白细胞杀菌机制,体外生成白细胞最重要的杀菌因子-次氯酸。\n（2）配方均源自食品材料,产物已通过“经口无毒”检测。",
|
||||
"introduction": "本产品通过食品原料的电解技术,生成低浓度次氯酸（18-30ppm）,模拟白细胞杀菌机制发挥清除口腔病菌 抑制龋齿 缓解牙周疾病的作用。\n（1）清洁口腔,抑制龋齿与菌斑 缓解牙周疾病。\n（2）浸泡牙刷 牙套 义齿等牙具,消除异味。（电解配方）专利申请号：2024105552331",
|
||||
"detail": [
|
||||
{
|
||||
"key": "产品名称",
|
||||
"value": "次氯酸仿生除菌杯"
|
||||
},
|
||||
{
|
||||
"key": "产品型号",
|
||||
"value": "QS-JWZ-03"
|
||||
},
|
||||
{
|
||||
"key": "工作电压",
|
||||
"value": "9V-12V"
|
||||
@@ -78,11 +135,19 @@
|
||||
},
|
||||
{
|
||||
"key": "工作容积",
|
||||
"value": "约250ml"
|
||||
"value": "250ml"
|
||||
},
|
||||
{
|
||||
"key": "电解时间",
|
||||
"value": "90秒"
|
||||
},
|
||||
{
|
||||
"key": "次氯酸浓度",
|
||||
"value": "约25ppm"
|
||||
"value": "15-25ppm"
|
||||
},
|
||||
{
|
||||
"key": "PH",
|
||||
"value": "6-6.8"
|
||||
}
|
||||
],
|
||||
"info": "电解质电解生成次氯酸",
|
||||
@@ -90,17 +155,32 @@
|
||||
},
|
||||
"cjq": {
|
||||
"video-url": "/videos/productvideos/cjq/zh.mp4",
|
||||
|
||||
"name": "多功能电解水除菌器",
|
||||
"notice": "1、反应液现配现用,低浓度次氯酸建议在1小时内使用,中浓度室温、避光条件下可保存24小时。2、每次使用后,及时清洗,洗后尽量保持干燥。3、请勿自行改装、拆解、维修以免导致主机损坏。如因外力导致主机破损、脱落、无法工作时,请停止使用并且联系客服维修。4、本产品禁止放入水中。5、生成后的溶液禁止饮用,禁止与浓硫酸、洁厕灵等洗涤剂同时混用。",
|
||||
"clean": "1、设备使用完毕后,及时清水冲洗、甩干。2、 电极长期使用将形成阴极垢,影响设备寿命,建议使用专用清洗剂每周清洗一次（专用清洗剂可与厂家联系）。",
|
||||
"usage": "1. 拧开喷头,注入约25ml自来水（离瓶肩1-2mm处）,旋紧喷头。2. 长按开机键1秒,启动设备,蓝色指示灯亮起,工作1.5分钟后自动熄灭。若蓝色指示灯闪烁,提示电量不足,需及时充电。(1) 预防性消毒 仅用自来水,无添加物,直接启动设备即可。(2) 应急性消毒 启动前,从底盖拔出一支专用电解质盐管,用瓶盖量坑量取0.1克,倒入含25ml自来水的喷瓶中,充分摇匀溶解后,再启动设备。3. 充电时,底部绿色指示灯亮起,充电结束后指示灯熄灭。",
|
||||
"notice": "1、反应液现配现用,低浓度次氯酸建议在1小时内使用,中浓度室温、避光条件下可保存24小时。\n2、每次使用后,及时清洗,洗后尽量保持干燥。\n3、请勿自行改装、拆解、维修以免导致主机损坏。如因外力导致主机破损、脱落、无法工作时,请停止使用并且联系客服维修。\n4、本产品禁止放入水中。\n5、生成后的溶液禁止饮用,禁止与浓硫酸、洁厕灵等洗涤剂同时混用。",
|
||||
"clean": "1、设备使用完毕后,及时清水冲洗、甩干。\n2、 电极长期使用将形成阴极垢,影响设备寿命,建议使用专用清洗剂每周清洗一次（专用清洗剂可与厂家联系）。",
|
||||
"usage": "1. 拧开喷头,注入约25ml自来水（离瓶肩1-2mm处）,旋紧喷头。\n2. 长按开机键1秒,启动设备,蓝色指示灯亮起,工作1.5分钟后自动熄灭。若蓝色指示灯闪烁,提示电量不足,需及时充电。\n(1) 预防性消毒 仅用自来水,无添加物,直接启动设备即可。\n(2) 应急性消毒 启动前,从底盖拔出一支专用电解质盐管,用瓶盖量坑量取0.1克,倒入含25ml自来水的喷瓶中,充分摇匀溶解后,再启动设备。\n3. 充电时,底部绿色指示灯亮起,充电结束后指示灯熄灭。",
|
||||
"introduction": "本设备可直接利用自来水中的氯元素,通过电解将其转化为低浓度次氯酸（5-10mg/L）；或利用专用的电解质溶液,电解生成PH约5.8的中浓度次氯酸（约100mg/L）。",
|
||||
"scenarios": "（1）预防性消毒（低浓度次氯酸）公交车 地铁 单车等公共交通工具扶把手,或电梯 快递件等接触物表面。（2）应急性消毒（中高浓度次氯酸）病菌感染物 涉疫物品 传染病患者血液或体液污染物等。",
|
||||
"detail": [
|
||||
{
|
||||
"key": "产品名称",
|
||||
"value": "多功能电解水除菌器"
|
||||
"value": "多功能电解水除菌器（差旅神器）"
|
||||
},
|
||||
{
|
||||
"key": "工作电压",
|
||||
"value": "12V"
|
||||
},
|
||||
{
|
||||
"key": "输入电源",
|
||||
"value": "5V/2A适配器"
|
||||
},
|
||||
{
|
||||
"key": "电池容量",
|
||||
"value": "400mAh"
|
||||
},
|
||||
{
|
||||
"key": "电解时间",
|
||||
"value": "1.5分钟"
|
||||
},
|
||||
{
|
||||
"key": "适用水源",
|
||||
@@ -112,7 +192,7 @@
|
||||
},
|
||||
{
|
||||
"key": "次氯酸浓度",
|
||||
"value": "6-10ppm (仅自来水) 约98ppm (专用电解质)"
|
||||
"value": "1-2mg/L (仅自来水)； 约100mg/L (专用电解质)"
|
||||
}
|
||||
],
|
||||
"info": "差旅神器——现制现用小喷瓶",
|
||||
@@ -124,26 +204,16 @@
|
||||
"email": "E-mail: ykl1979@163.com",
|
||||
"address": "地址：安徽省合肥市瑶海区龙岗综合经济开发区包公大道与大众路交口安徽尚荣大健康--产业园5栋805室"
|
||||
},
|
||||
"about": {
|
||||
"name": "关于我们",
|
||||
"info": ""
|
||||
"product-details": {
|
||||
"title": "产品详细信息",
|
||||
"feature": "产品特点",
|
||||
"intro": "产品介绍",
|
||||
"instruction": "使用方法",
|
||||
"precautions": "注意事项"
|
||||
},
|
||||
"mainpage": {
|
||||
"name": "首页"
|
||||
},
|
||||
"media": {
|
||||
"name": "联系我们"
|
||||
},
|
||||
"product-feature": "产品特点",
|
||||
"product-intro": "产品介绍",
|
||||
"usage-instruction": "使用方法",
|
||||
"precautions": "注意事项",
|
||||
"product-details": "产品详细信息",
|
||||
"property": "公司专利",
|
||||
"learnMore": "了解更多",
|
||||
"address": "公司地址",
|
||||
"contactname": "联系方式",
|
||||
"copyright": "版权所有",
|
||||
"store": "商城",
|
||||
"others": "其他"
|
||||
"copyright": "版权所有"
|
||||
}
|
||||
|
||||
@@ -8,30 +8,35 @@ const router = createRouter({
|
||||
name: 'home',
|
||||
component: () => import('../views/HomeView.vue'),
|
||||
},
|
||||
// {
|
||||
// path: '/waterlife',
|
||||
// name: 'waterlife',
|
||||
// component: () => import('../views/WaterLifeProducts.vue'),
|
||||
// },
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
path: '/waterlife_flosser',
|
||||
name: 'waterlife_flosser',
|
||||
component: () => import('../views/WaterLife_flosser.vue'),
|
||||
},
|
||||
{
|
||||
path: '/waterlife',
|
||||
name: 'waterlife',
|
||||
component: () => import('../views/WaterLifeProducts.vue'),
|
||||
path: '/waterlife_cup',
|
||||
name: 'waterlife_cup',
|
||||
component: () => import('../views/WaterLife_cup.vue'),
|
||||
},
|
||||
{
|
||||
path: '/agedlife',
|
||||
name: 'agedlife',
|
||||
component: () => import('../views/AgedLifeProducts.vue'),
|
||||
path: '/waterlife_bottle',
|
||||
name: 'waterlife_bottle',
|
||||
component: () => import('../views/WaterLife_bottle.vue'),
|
||||
},
|
||||
{
|
||||
path: '/media',
|
||||
name: 'media',
|
||||
component: () => import('../views/MediaView.vue'),
|
||||
path: '/todo',
|
||||
name: 'Todo',
|
||||
component: () => import('../views/TodoView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/greenproducts',
|
||||
name: 'media',
|
||||
component: () => import('../views/MediaView.vue'),
|
||||
path: '/store',
|
||||
name: 'Store',
|
||||
component: () => import('../views/StoreView.vue'),
|
||||
},
|
||||
],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
|
||||
18
src/types/product.d.ts
vendored
Normal file
18
src/types/product.d.ts
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @file product相关数据结构
|
||||
*/
|
||||
|
||||
// products 数据
|
||||
export interface DetailItem {
|
||||
key: string
|
||||
value: string
|
||||
}
|
||||
|
||||
// 产品用法、介绍展示
|
||||
export interface ProductInfoData {
|
||||
notice: string
|
||||
usage: string
|
||||
features: string
|
||||
introduction: string
|
||||
support: string
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<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"
|
||||
:targetPath="section.targetPath"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
}
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import AboutSection from '@/components/AboutSection.vue'
|
||||
import { ref } from 'vue'
|
||||
import logoImage from '/images/logo.png'
|
||||
import product2 from '/images/product2.png'
|
||||
|
||||
const aboutSections = ref([
|
||||
{
|
||||
title: 'company.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: logoImage,
|
||||
reverse: true,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'property',
|
||||
description: 'company.property',
|
||||
backgroundImage: '', // or whatever the default is
|
||||
reverse: false,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'areas.individual.name',
|
||||
description: 'areas.individual.intro',
|
||||
backgroundImage: product2,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '/waterlife',
|
||||
},
|
||||
{
|
||||
title: 'areas.aged.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: product2,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
background-color: rgb(241, 244, 247);
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<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"
|
||||
:targetPath="section.targetPath"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
}
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import AboutSection from '@/components/AboutSection.vue'
|
||||
import { ref } from 'vue'
|
||||
import logoImage from '/images/logo.png'
|
||||
import product2 from '/images/product2.png'
|
||||
|
||||
const aboutSections = ref([
|
||||
{
|
||||
title: 'company.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: logoImage,
|
||||
reverse: true,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'property',
|
||||
description: 'company.property',
|
||||
backgroundImage: '', // or whatever the default is
|
||||
reverse: false,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'areas.individual.name',
|
||||
description: 'areas.individual.intro',
|
||||
backgroundImage: product2,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '/waterlife',
|
||||
},
|
||||
{
|
||||
title: 'areas.aged.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: product2,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
background-color: rgb(241, 244, 247);
|
||||
}
|
||||
</style>
|
||||
@@ -21,14 +21,16 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import AboutSection from '@/components/AboutSection.vue'
|
||||
import { ref } from 'vue'
|
||||
import logoImage from '/images/logo.png'
|
||||
import product2 from '/images/product2.png'
|
||||
import background_1 from '/images/background_1.jpg'
|
||||
import background_2 from '/images/background_2.jpg'
|
||||
import background_3 from '/images/background_3.jpg'
|
||||
import background_4 from '/images/background_4.jpg'
|
||||
|
||||
const aboutSections = ref([
|
||||
{
|
||||
title: 'company.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: logoImage,
|
||||
backgroundImage: background_1,
|
||||
reverse: true,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
@@ -36,28 +38,29 @@ const aboutSections = ref([
|
||||
{
|
||||
title: 'property',
|
||||
description: 'company.property',
|
||||
backgroundImage: '', // or whatever the default is
|
||||
backgroundImage: background_2,
|
||||
reverse: false,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'areas.individual.name',
|
||||
description: 'areas.individual.intro',
|
||||
backgroundImage: product2,
|
||||
title: 'areas.waterlife.name',
|
||||
description: 'areas.waterlife.intro',
|
||||
backgroundImage: background_3,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '/waterlife',
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'areas.aged.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: product2,
|
||||
description: 'areas.aged.intro',
|
||||
backgroundImage: background_4,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '',
|
||||
targetPath: '/todo',
|
||||
},
|
||||
])
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<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"
|
||||
:targetPath="section.targetPath"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
}
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import AboutSection from '@/components/AboutSection.vue'
|
||||
import { ref } from 'vue'
|
||||
import logoImage from '/images/logo.png'
|
||||
import product2 from '/images/product2.png'
|
||||
|
||||
const aboutSections = ref([
|
||||
{
|
||||
title: 'company.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: logoImage,
|
||||
reverse: true,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'property',
|
||||
description: 'company.property',
|
||||
backgroundImage: '', // or whatever the default is
|
||||
reverse: false,
|
||||
buttonShow: false,
|
||||
targetPath: '',
|
||||
},
|
||||
{
|
||||
title: 'areas.individual.name',
|
||||
description: 'areas.individual.intro',
|
||||
backgroundImage: product2,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '/waterlife',
|
||||
},
|
||||
{
|
||||
title: 'areas.aged.name',
|
||||
description: 'company.introduction',
|
||||
backgroundImage: product2,
|
||||
reverse: false,
|
||||
buttonShow: true,
|
||||
targetPath: '',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
background-color: rgb(241, 244, 247);
|
||||
}
|
||||
</style>
|
||||
77
src/views/StoreView.vue
Normal file
77
src/views/StoreView.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="purchase-methods">
|
||||
<h2>购买方式</h2>
|
||||
<div class="methods-container">
|
||||
<!-- 微信 -->
|
||||
<div class="method">
|
||||
<h3>微信</h3>
|
||||
<img :src="WeChat" alt="微信二维码" />
|
||||
</div>
|
||||
|
||||
<!-- 淘宝 -->
|
||||
<div class="method">
|
||||
<h3>淘宝</h3>
|
||||
<img :src="TaoBao" alt="淘宝二维码" />
|
||||
</div>
|
||||
|
||||
<!-- 小红书 -->
|
||||
<div class="method">
|
||||
<h3>小红书</h3>
|
||||
<img :src="RedNote" alt="小红书二维码" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WeChat from '/images/WeChat.jpg'
|
||||
import TaoBao from '/images/TaoBao.jpg'
|
||||
import RedNote from '/images/RedNote.jpg'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.purchase-methods {
|
||||
font-family: 'Arial', sans-serif;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purchase-methods h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 30px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.methods-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.method {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.method h3 {
|
||||
margin-top: 0;
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.method img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 10px auto;
|
||||
display: block;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
26
src/views/TodoView.vue
Normal file
26
src/views/TodoView.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<AboutSection
|
||||
key="Todo"
|
||||
:title="$t('pages.todo.name')"
|
||||
:description="$t('pages.todo.content')"
|
||||
:background-image="background_4"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
}
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import AboutSection from '@/components/AboutSection.vue'
|
||||
import background_4 from '/images/background_4.jpg'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
background-color: rgb(241, 244, 247);
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +1,5 @@
|
||||
<!-- TODO: 拆分为独立的三个页面，后续产品种类提升可以合并 -->
|
||||
|
||||
<template>
|
||||
<div class="product-display">
|
||||
<ProductDetail
|
||||
@@ -44,26 +46,11 @@ import { ref, computed } from 'vue'
|
||||
import ProductDetail from '@/components/ProductDetail.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import seekDetail from '@/components/seekDetail.vue'
|
||||
|
||||
const { tm } = useI18n()
|
||||
|
||||
// import { useI18n } from 'vue-i18n'
|
||||
// const { t } = useI18n()
|
||||
interface DetailItem {
|
||||
key: string
|
||||
value: string
|
||||
}
|
||||
|
||||
// products 数据
|
||||
interface DetailItem {
|
||||
key: string
|
||||
value: string
|
||||
}
|
||||
interface ProductInfoData {
|
||||
notice: string
|
||||
usage: string
|
||||
features: string
|
||||
introduction: string
|
||||
}
|
||||
|
||||
const selectedProductData = computed(() => {
|
||||
return products.value.find((p) => p.name === selectedProduct.value)
|
||||
@@ -71,27 +58,29 @@ const selectedProductData = computed(() => {
|
||||
|
||||
import cyqImage from '@/assets/water/cyq.png'
|
||||
import cjqImage from '@/assets/water/cjq.png'
|
||||
|
||||
import cjbImage from '@/assets/water/cjb.png'
|
||||
import type { DetailItem, ProductInfoData } from '@/types/product'
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: 'cyq',
|
||||
detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
// detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
detailList: computed(() => tm('cyq.detail') as DetailItem[]),
|
||||
imageUrl: cyqImage,
|
||||
infoData: tm('cyq') as unknown as ProductInfoData,
|
||||
// infoData: tm('cyq') as unknown as ProductInfoData,
|
||||
infoData: computed(() => tm('cyq') as ProductInfoData),
|
||||
},
|
||||
{
|
||||
name: 'cjb',
|
||||
detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
detailList: computed(() => tm('cjb.detail') as DetailItem[]),
|
||||
imageUrl: cjbImage,
|
||||
infoData: tm('cjb') as unknown as ProductInfoData,
|
||||
infoData: computed(() => tm('cjb') as ProductInfoData),
|
||||
},
|
||||
{
|
||||
name: 'cjq',
|
||||
detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
detailList: computed(() => tm('cjq.detail') as DetailItem[]),
|
||||
imageUrl: cjqImage,
|
||||
infoData: tm('cjq') as unknown as ProductInfoData,
|
||||
infoData: computed(() => tm('cjq') as ProductInfoData),
|
||||
},
|
||||
])
|
||||
const selectedProduct = ref('')
|
||||
|
||||
178
src/views/WaterLife_bottle.vue
Normal file
178
src/views/WaterLife_bottle.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 小喷瓶 -->
|
||||
|
||||
<template>
|
||||
<div class="product-display">
|
||||
<ProductDetail
|
||||
:key="product.name"
|
||||
reverse
|
||||
:title="$t(`${product.name}.name`)"
|
||||
:content="$t(`${product.name}.info`)"
|
||||
:imagetitle="$t(`${product.name}.name`)"
|
||||
:info="$t(`${product.name}.info`)"
|
||||
:detailList="product.detailList"
|
||||
:imageUrl="product.imageUrl"
|
||||
:videoUrl="$t(`${product.name}.video-url`)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="product-move">
|
||||
<div class="product-list">
|
||||
<div :key="product.name" class="product-card">
|
||||
<img :src="product.imageUrl" class="product-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<transition name="fade" mode="out-in">
|
||||
<seekDetail :key="product.name" :productData="product.infoData" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import ProductDetail from '@/components/ProductDetail.vue'
|
||||
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 { useI18n } from 'vue-i18n'
|
||||
// const { t } = useI18n()
|
||||
const { tm } = useI18n()
|
||||
|
||||
const product = ref({
|
||||
name: 'cjq',
|
||||
detailList: computed(() => tm('cjq.detail') as DetailItem[]),
|
||||
imageUrl: cjqImage,
|
||||
infoData: computed(() => tm('cjq') as ProductInfoData),
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 产品展示区域样式 */
|
||||
.product-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.product-move {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.product-card:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-card.active {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.product-card.active:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition:
|
||||
opacity 0.5s ease,
|
||||
transform 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.product-list {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.product-display {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.product-list {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
178
src/views/WaterLife_cup.vue
Normal file
178
src/views/WaterLife_cup.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<!-- 除菌杯 -->
|
||||
|
||||
<template>
|
||||
<div class="product-display">
|
||||
<ProductDetail
|
||||
:key="product.name"
|
||||
reverse
|
||||
:title="$t(`${product.name}.name`)"
|
||||
:content="$t(`${product.name}.info`)"
|
||||
:imagetitle="$t(`${product.name}.name`)"
|
||||
:info="$t(`${product.name}.info`)"
|
||||
:detailList="product.detailList"
|
||||
:imageUrl="product.imageUrl"
|
||||
:videoUrl="$t(`${product.name}.video-url`)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="product-move">
|
||||
<div class="product-list">
|
||||
<div :key="product.name" class="product-card">
|
||||
<img :src="product.imageUrl" class="product-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<transition name="fade" mode="out-in">
|
||||
<seekDetail :key="product.name" :productData="product.infoData" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import ProductDetail from '@/components/ProductDetail.vue'
|
||||
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 { useI18n } from 'vue-i18n'
|
||||
// const { t } = useI18n()
|
||||
const { tm } = useI18n()
|
||||
|
||||
const product = ref({
|
||||
name: 'cjb',
|
||||
detailList: computed(() => tm('cjb.detail') as DetailItem[]),
|
||||
imageUrl: cjbImage,
|
||||
infoData: computed(() => tm('cjb') as ProductInfoData),
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 产品展示区域样式 */
|
||||
.product-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.product-move {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.product-card:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-card.active {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.product-card.active:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition:
|
||||
opacity 0.5s ease,
|
||||
transform 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.product-list {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.product-display {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.product-list {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/views/WaterLife_flosser.vue
Normal file
180
src/views/WaterLife_flosser.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<!-- 冲牙器 -->
|
||||
|
||||
<template>
|
||||
<div class="product-display">
|
||||
<ProductDetail
|
||||
:key="product.name"
|
||||
reverse
|
||||
:title="$t(`${product.name}.name`)"
|
||||
:content="$t(`${product.name}.info`)"
|
||||
:imagetitle="$t(`${product.name}.name`)"
|
||||
:info="$t(`${product.name}.info`)"
|
||||
:detailList="product.detailList"
|
||||
:imageUrl="product.imageUrl"
|
||||
:videoUrl="$t(`${product.name}.video-url`)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="product-move">
|
||||
<div class="product-list">
|
||||
<div :key="product.name" class="product-card">
|
||||
<img :src="product.imageUrl" class="product-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<transition name="fade" mode="out-in">
|
||||
<seekDetail :key="product.name" :productData="product.infoData" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import ProductDetail from '@/components/ProductDetail.vue'
|
||||
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 { useI18n } from 'vue-i18n'
|
||||
// const { t } = useI18n()
|
||||
const { tm } = useI18n()
|
||||
|
||||
const product = ref({
|
||||
name: 'cyq',
|
||||
// detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
detailList: computed(() => tm('cyq.detail') as DetailItem[]),
|
||||
imageUrl: cyqImage,
|
||||
// infoData: tm('cyq') as unknown as ProductInfoData,
|
||||
infoData: computed(() => tm('cyq') as ProductInfoData),
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 产品展示区域样式 */
|
||||
.product-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.product-move {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.product-card:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-card.active {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(106, 17, 203, 0.2);
|
||||
}
|
||||
|
||||
.product-card.active:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition:
|
||||
opacity 0.5s ease,
|
||||
transform 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.product-list {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.product-display {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.product-list {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user