Init commit.
This commit is contained in:
sleepwithoutbz
67
src/views/AboutView.vue
Normal file
67
src/views/AboutView.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<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>
|
||||
67
src/views/AgedLifeProducts.vue
Normal file
67
src/views/AgedLifeProducts.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<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>
|
||||
67
src/views/HomeView.vue
Normal file
67
src/views/HomeView.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<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(255, 255, 255);
|
||||
}
|
||||
</style>
|
||||
67
src/views/MediaView.vue
Normal file
67
src/views/MediaView.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<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>
|
||||
283
src/views/WaterLifeProducts.vue
Normal file
283
src/views/WaterLifeProducts.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div class="product-display">
|
||||
<ProductDetail
|
||||
v-for="product in products"
|
||||
: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
|
||||
v-for="product in products"
|
||||
:key="product.name"
|
||||
class="product-card"
|
||||
:class="{ active: selectedProduct === product.name }"
|
||||
@click="selectProduct(product.name)"
|
||||
>
|
||||
<img :src="product.imageUrl" class="product-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<transition name="fade" mode="out-in">
|
||||
<seekDetail
|
||||
v-if="selectedProductData"
|
||||
:key="selectedProductData.name"
|
||||
:productData="selectedProductData.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'
|
||||
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)
|
||||
})
|
||||
|
||||
import cyqImage from '@/assets/water/cyq.png'
|
||||
import cjqImage from '@/assets/water/cjq.png'
|
||||
|
||||
import cjbImage from '@/assets/water/cjb.png'
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: 'cyq',
|
||||
detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
imageUrl: cyqImage,
|
||||
infoData: tm('cyq') as unknown as ProductInfoData,
|
||||
},
|
||||
{
|
||||
name: 'cjb',
|
||||
detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
imageUrl: cjbImage,
|
||||
infoData: tm('cjb') as unknown as ProductInfoData,
|
||||
},
|
||||
{
|
||||
name: 'cjq',
|
||||
detailList: tm('cyq.detail') as unknown as DetailItem[],
|
||||
imageUrl: cjqImage,
|
||||
infoData: tm('cjq') as unknown as ProductInfoData,
|
||||
},
|
||||
])
|
||||
const selectedProduct = ref('')
|
||||
// 切换产品方法
|
||||
function selectProduct(productName: string) {
|
||||
selectedProduct.value = productName
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-display {
|
||||
}
|
||||
/* 产品展示区域样式 */
|
||||
.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>
|
||||
|
||||
<!--
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.product-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.product-move {
|
||||
display: flex;
|
||||
flex-direction: column; /* 内部上下排列 */
|
||||
align-items: center;
|
||||
gap: 2%;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
.product-image {
|
||||
height: auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
/* 开启 Flexbox */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.product-card:hover,
|
||||
.product-card.active {
|
||||
box-shadow: 10px 10px 12px rgba(14, 70, 174, 0.15);
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style> -->
|
||||
Reference in New Issue
Block a user