Skip to content

W
wanyou_website
Commit 345fc10b by yang
Options

提交修改

parent c118ab3b
Showing with 417 additions and 72 deletions
src/components/Footer.vue
......@@ -4,7 +4,7 @@
<div class="footer_box flex-col">
<span class="footer_title">公司备案信息</span>
<span class="text_44"
style="margin-top: 1vw;">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span>
style="margin-top: 1vw;">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：京ICP备2025127186号-2</span>
<div class="flex-row" style="margin-top: 3vw;">
<span class="footer_title">联系我们</span>
<span
......
src/views/homepage.vue
......@@ -3,19 +3,34 @@
<div class="flex-col">
<!-- HeaderNav组件已移到Layout中 -->
<div class="hero-content flex-row">
<div class="section_8 flex-col">
<!-- 导航文字已移到HeaderNav组件中 -->
<span
class="paragraph_1">细胞级修复&nbsp;重启生命活力<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="paragraph_2">中国科学院专家团队创新研发，技术行业领先<br/>多项国家发明专利及权威认证，科学背书，品质保障<br/>全球明星和富豪的健康标配</span>
<img class="image_4" src="@/assets/homepage/readMore.png"/>
<!-- 轮播图容器 -->
<div class="carousel-container" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
<div class="carousel-slides" :class="{ 'no-transition': isTransitioning }"
:style="{ transform: `translateX(-${currentSlide * 100}%)` }">
<div v-for="(slide, index) in carouselSlides" :key="index" class="carousel-slide"
:style="{ backgroundImage: `url(${slide.background})` }">
<div class="slide-content">
<span class="paragraph_1">{{ slide.title }}</span>
<span class="paragraph_2">{{ slide.description }}</span>
<img class="image_4" src="@/assets/homepage/readMore.png" />
</div>
</div>
</div>
<!-- 轮播控制按钮 -->
<div class="section_9 flex-row justify-center">
<div style="width: 50%;" class="align-center justify-center">
<img class="image_7 " src="@/assets/homepage/left.png"/>
<div style="width: 50%;" class="align-center justify-center" @click="prevSlide">
<img class="image_7 " src="@/assets/homepage/left.png" />
</div>
<div style="width: 50%;" class="align-center justify-center">
<img class="image_7" src="@/assets/homepage/right.png"/>
<div style="width: 50%;" class="align-center justify-center" @click="nextSlide">
<img class="image_7" src="@/assets/homepage/right.png" />
</div>
</div>
<!-- 轮播指示器 -->
<div class="carousel-indicators">
<span v-for="index in 3" :key="index" class="indicator" :class="{ active: currentSlide === index }"
@click="goToSlide(index - 1)"></span>
</div>
</div>
</div>
......@@ -25,7 +40,7 @@
<span class="text_3">多模态物理能量自愈舱的巅峰之作</span>
<span class="text_4">科技重构生命能量，激活人体与生俱来的自愈潜能</span>
</div>
<img class="image_9" src="@/assets/common/caidai.png"/>
<img class="image_9" src="@/assets/common/caidai.png" />
</div>
<span class="text_5">02.技术定位：多模态物理复合能量场新范式</span>
<span class="text_6">多模态物理复合能量场技术，尖端科技升级再创新，科技健康管理先进设备。</span>
......@@ -33,8 +48,8 @@
<span class="text_7">READ&nbsp;MORE</span>
</div>
<div class="list_1 flex-row">
<div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }"
v-for="(item, index) in loopData0" :key="index" style="background-size: 100% 100%">
<div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }" v-for="(item, index) in loopData0"
:key="index" style="background-size: 100% 100%">
<div class="text-group_2 flex-col justify-between">
<div>
<span class="text_8" v-html="item.lanhutext0"></span>
......@@ -43,9 +58,9 @@
<span class="text_9" v-html="item.lanhutext1"></span>
</div>
<div class="image-wrapper_3 flex-row">
<img class="label_3" :src="item.lanhuimage0"/>
<img v-if="item.slot2 === 2" class="image_10" :src="item.specialSlot2.lanhuimage0"/>
<img v-if="item.slot1 === 1" class="image_11" src="@/assets/homepage/sl.png"/>
<img class="label_3" :src="item.lanhuimage0" />
<img v-if="item.slot2 === 2" class="image_10" :src="item.specialSlot2.lanhuimage0" />
<img v-if="item.slot1 === 1" class="image_11" src="@/assets/homepage/sl.png" />
</div>
</div>
</div>
......@@ -56,20 +71,19 @@
<span class="text_10">产品优势</span>
<span class="text_11">中国科学院专家创新研发</span>
</div>
<img class="image_12" src="@/assets/homepage/lbx.png"/>
<img class="image_12" src="@/assets/homepage/lbx.png" />
<span class="text_12">INNOVATION UPGRADE</span>
<div class="text-group_4 flex-col justify-between">
<span class="paragraph_3">多模态物理能量场<br/>科学技术，创新再升级</span>
<span
class="text_13">融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量，直击细胞本源，提升细胞活力，激活人体与生俱来的自愈力。</span>
<span class="paragraph_3">多模态物理能量场<br />科学技术，创新再升级</span>
<span class="text_13">融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量，直击细胞本源，提升细胞活力，激活人体与生俱来的自愈力。</span>
</div>
</div>
<div class="section_11 flex-col">
<div class="image-wrapper_4 flex-row">
<img class="image_13" src="@/assets/common/caidai2.png"/>
<img class="image_13" src="@/assets/common/caidai2.png" />
</div>
<div class="image-wrapper_5 flex-row">
<img class="image_14" src="@/assets/homepage/jz.png"/>
<img class="image_14" src="@/assets/homepage/jz.png" />
</div>
<div class="text-wrapper_2 flex-row">
<span class="text_14">AUTHORITATIVE PLATFORM</span>
......@@ -88,7 +102,7 @@
<span class="text_17">关于我们</span>
<span class="text_18">一家专注于多模态物理能量自愈技术研发与应用的创新科技企业</span>
</div>
<img class="image_15" src="@/assets/common/caidai.png"/>
<img class="image_15" src="@/assets/common/caidai.png" />
</div>
<div class="group_3 flex-row justify-between">
<div class="section_13 flex-col">
......@@ -129,7 +143,7 @@
<div class="box_11 flex-row">
<div class="image-text_1 flex-row justify-between">
<span class="text-group_11">READ MORE</span>
<img class="image_16" src="@/assets/homepage/rightLong.png"/>
<img class="image_16" src="@/assets/homepage/rightLong.png" />
</div>
</div>
</div>
......@@ -140,34 +154,31 @@
<span class="text_29">合作优势</span>
<span class="text_30">轻资产运营，高回报收益，共享万亿健康产业红利</span>
</div>
<img class="image_17" src="@/assets/common/caidai.png"/>
<img class="image_17" src="@/assets/common/caidai.png" />
</div>
<div class="block_3 flex-row justify-between">
<div class="group_5 flex-col">
<div class="group_6 flex-row justify-between">
<div class="group_7 flex-col justify-between">
<img class="image_18"
src="@/assets/homepage/hand.png"/>
<img class="image_18" src="@/assets/homepage/hand.png" />
<span class="text_31">设备购买模式</span>
</div>
<div class="group_8 flex-col"></div>
</div>
<div class="text-wrapper_3 flex-row">
<span
class="paragraph_4">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。<br/><br/>计划快速回本并持续盈利的投资者。</span>
<span class="paragraph_4">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。<br /><br />计划快速回本并持续盈利的投资者。</span>
</div>
</div>
<div class="group_9 flex-col">
<div class="section_18 flex-row justify-between">
<div class="block_4 flex-col justify-between">
<img class="image_19"
src="@/assets/homepage/book.png"/>
<img class="image_19" src="@/assets/homepage/book.png" />
<span class="text_32">设备租赁模式</span>
</div>
<div class="block_5 flex-col"></div>
</div>
<div class="text-wrapper_4 flex-row">
<span class="paragraph_5">初创健康机构、健身工作室、美容院等，降低初期投入风险。<br/>想试运营验证市场需求的投资者。</span>
<span class="paragraph_5">初创健康机构、健身工作室、美容院等，降低初期投入风险。<br />想试运营验证市场需求的投资者。</span>
</div>
</div>
</div>
......@@ -178,15 +189,14 @@
<span class="text_17">联系我们</span>
<span class="text_18">开启您的健康科技事业</span>
</div>
<img class="image_9" src="@/assets/common/caidai.png"/>
<img class="image_9" src="@/assets/common/caidai.png" />
</div>
<div class="group_11 flex-row justify-between">
<el-input class="text-wrapper_7" v-model="form.name" placeholder="您的姓名"/>
<el-input class="text-wrapper_8" v-model="form.mobile" placeholder="您的手机"/>
<el-input class="text-wrapper_9" v-model="form.wechat" placeholder="您的微信"/>
<el-input class="text-wrapper_7" v-model="form.name" placeholder="您的姓名" />
<el-input class="text-wrapper_8" v-model="form.mobile" placeholder="您的手机" />
<el-input class="text-wrapper_9" v-model="form.wechat" placeholder="您的微信" />
</div>
<el-input class="text-wrapper_10" v-model="form.question" type="textarea" :rows="7"
placeholder="请输入您要咨询的问题"/>
<el-input class="text-wrapper_10" v-model="form.question" type="textarea" :rows="7" placeholder="请输入您要咨询的问题" />
<div class="group_12 flex-row justify-between">
<span class="text_45">*&nbsp;您提交的信息请确保填写真实，以便我们再48小时内联系您</span>
<div class="text-wrapper_11 align-center justify-center flex-col" @click="save">
......@@ -198,23 +208,16 @@
</div>
</div>
<el-dialog
v-model="dialogVisible"
:showClose="false"
:width="dialogWidth"
class="dialog justify-center align-center"
>
<el-dialog v-model="dialogVisible" :showClose="false" :width="dialogWidth" class="dialog justify-center align-center">
<div class="dialog_image-wrapper_1 justify-end">
<img src="@/assets/contactUs/close.png" class="dialog——label_1" @click="dialogVisible=false" alt=""/>
<img src="@/assets/contactUs/close.png" class="dialog——label_1" @click="dialogVisible = false" alt="" />
</div>
<div class="dialog_section_1 justify-center align-center flex-col">
<div class="dialog_box_2 flex-row"></div>
<div class="dialog_box_3 flex-row">
<div class="dialog_text-group_1 flex-col">
<span class="dialog_text_1">感谢您的提交！</span>
<span class="dialog_text_2"
>我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span
>
<span class="dialog_text_2">我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span>
</div>
</div>
<div class="dialog_box_4 flex-row">
......@@ -235,8 +238,100 @@ import content3 from '@/assets/homepage/content3.png'
import addIcon from '@/assets/homepage/add.png'
import lbxIcon from '@/assets/homepage/lbx.png'
import hdIcon from '@/assets/homepage/hd.png'
import {ref, computed, onMounted, onUnmounted} from "vue";
import {ElMessage} from "element-plus";
import bg1 from '@/assets/homepage/BC.png'
import bg2 from '@/assets/homepage/banner2.jpg'
import bg3 from '@/assets/homepage/banner3.jpg'
import { ref, computed, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
// 轮播图数据
const currentSlide = ref(1) // 从第二张开始，因为第一张是克隆的最后一张
const carouselSlides = ref([
{
background: bg3, // 克隆最后一张
title: '产品优势 中国科学院专家创新研发',
description: '多模态物理能量场科学技术，创新再升级\n融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量'
},
{
background: bg1,
title: '细胞级修复 重启生命活力',
description: '中国科学院专家团队创新研发，技术行业领先\n多项国家发明专利及权威认证，科学背书，品质保障\n全球明星和富豪的健康标配'
},
{
background: bg2,
title: '多模态物理能量自愈舱的巅峰之作',
description: '科技重构生命能量，激活人体与生俱来的自愈潜能\n多模态物理复合能量场技术，尖端科技升级再创新'
},
{
background: bg3,
title: '产品优势 中国科学院专家创新研发',
description: '多模态物理能量场科学技术，创新再升级\n融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量'
},
{
background: bg1, // 克隆第一张
title: '细胞级修复 重启生命活力',
description: '中国科学院专家团队创新研发，技术行业领先\n多项国家发明专利及权威认证，科学背书，品质保障\n全球明星和富豪的健康标配'
}
])
const isTransitioning = ref(false)
// 轮播图控制函数
const nextSlide = () => {
if (isTransitioning.value) return
currentSlide.value++
// 如果到达最后一张（克隆的第一张），无缝跳转到真正的第一张
if (currentSlide.value === carouselSlides.value.length - 1) {
setTimeout(() => {
isTransitioning.value = true
currentSlide.value = 1
setTimeout(() => {
isTransitioning.value = false
}, 50)
}, 500) // 等待动画完成
}
}
const prevSlide = () => {
if (isTransitioning.value) return
currentSlide.value--
// 如果到达第一张（克隆的最后一张），无缝跳转到真正的最后一张
if (currentSlide.value === 0) {
setTimeout(() => {
isTransitioning.value = true
currentSlide.value = carouselSlides.value.length - 2
setTimeout(() => {
isTransitioning.value = false
}, 50)
}, 500) // 等待动画完成
}
}
const goToSlide = (index) => {
if (isTransitioning.value) return
currentSlide.value = index + 1 // 因为第一张是克隆的，所以+1
}
// 自动轮播
let autoPlayTimer = null
const startAutoPlay = () => {
autoPlayTimer = setInterval(() => {
nextSlide()
}, 5000) // 5秒自动切换
}
const stopAutoPlay = () => {
if (autoPlayTimer) {
clearInterval(autoPlayTimer)
autoPlayTimer = null
}
}
// 表单数据
......@@ -274,10 +369,12 @@ const handleResize = () => {
onMounted(() => {
window.addEventListener('resize', handleResize)
startAutoPlay() // 启动自动轮播
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
stopAutoPlay() // 停止自动轮播
})
const loopData0 = ref([{
......@@ -287,7 +384,7 @@ const loopData0 = ref([{
lanhuimage0: addIcon,
slot1: 1,
},
{
{
lanhuBg0: `url(${content2}) center no-repeat`,
lanhutext0: 'TECHNICAL<br/>POSITIONING',
lanhutext1: '技术定位',
......@@ -296,8 +393,8 @@ const loopData0 = ref([{
lanhuimage0: lbxIcon,
},
slot2: 2,
},
{
},
{
lanhuBg0: `url(${content3}) center no-repeat`,
lanhutext0: 'CELL CHARGING<br/>STATION',
lanhutext1: '人体细胞的无限充电站',
......@@ -306,7 +403,7 @@ const loopData0 = ref([{
lanhuimage0: hdIcon,
},
slot2: 2,
},
},
])
......@@ -399,7 +496,7 @@ const resetForm = () => {
}
</script>
<style src="./common.css"/>
<style src="./common.css" />
<style lang="css" scoped>
.homepage-container {
position: relative;
......@@ -411,8 +508,75 @@ const resetForm = () => {
.hero-content {
width: 100vw;
height: 56.25vw;
background: url(@/assets/homepage/BC.png) 100% no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
}
.carousel-container {
width: 100%;
height: 100%;
position: relative;
}
.carousel-slides {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.carousel-slides.no-transition {
transition: none;
}
.carousel-slide {
min-width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-start;
position: relative;
}
.slide-content {
width: 40.73vw;
height: 23.96vw;
margin: 5vw 0 0 4.06vw;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.carousel-indicators {
position: absolute;
bottom: 2vw;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1vw;
display: none;
z-index: 10;
}
.indicator {
width: 1vw;
height: 1vw;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background-color: rgba(0, 199, 218, 1);
transform: scale(1.2);
}
.indicator:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.section_8 {
......@@ -457,10 +621,12 @@ const resetForm = () => {
.section_9 {
position: absolute;
right: 0;
top: 51vw;
width: 10vw;
height: 5.32vw;
background-color: #fff;
margin-top: 51vw;
z-index: 10;
cursor: pointer;
}
.image_7 {
......@@ -471,6 +637,7 @@ const resetForm = () => {
.hero-description {
width: 100vw;
height: 56.25vw;
padding-top: 55vw;
background: url(@/assets/homepage/zyc.png) 100% no-repeat;
background-size: 100% 100%;
}
......@@ -1470,14 +1637,121 @@ const resetForm = () => {
height: auto !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
.text-wrapper_10>>>.el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
/* PC端响应式适配 - 只在大屏幕时一屏显示 */
@media (min-width: 1200px) {
.hero-content {
height: 100vh !important;
}
.hero-description {
height: 100vh !important;
}
.section_9 {
top: 90vh !important;
}
}
/* 中等屏幕PC端适配 - 不强制一屏显示 */
@media (min-width: 769px) and (max-width: 1199px) {
.hero-content {
height: 56.25vw !important;
}
.hero-description {
height: 56.25vw !important;
}
.section_9 {
top: 51vw !important;
}
}
/* 手机端表单适配优化 */
@media (max-width: 768px) {
/* 轮播图手机端适配 - 同等缩小 */
.hero-content {
height: 56.25vw !important;
}
.hero-description {
height: 56.25vw !important;
}
.carousel-container {
height: 100% !important;
}
.carousel-slide {
background-size: 100% 100% !important;
background-position: center;
}
.slide-content {
width: 40.73vw !important;
height: 23.96vw !important;
margin: 2vw 0 0 4.06vw !important;
text-align: left !important;
padding: 0 !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
.carousel-indicators {
display: none;
bottom: 2vw !important;
gap: 1vw !important;
}
.indicator {
width: 1vw !important;
height: 1vw !important;
}
.section_9 {
top: 51vw !important;
right: 0 !important;
width: 10vw !important;
height: 5.32vw !important;
background-color: #fff !important;
border-radius: 0 !important;
}
.image_7 {
width: 1vw !important;
height: 1.8vw !important;
}
/* 轮播图文字手机端适配 */
.slide-content .paragraph_1 {
width: 40.73vw !important;
height: 3.6vw !important;
font-size: 3.64vw !important;
margin-top: 12vw !important;
text-align: left !important;
white-space: nowrap !important;
}
.slide-content .paragraph_2 {
width: 40.73vw !important;
height: 5.63vw !important;
font-size: 1.25vw !important;
margin-top: 1.25vw !important;
text-align: left !important;
white-space: normal !important;
}
.slide-content .image_4 {
width: 13.03vw !important;
height: 3.65vw !important;
margin: 3.38vw 0 0 0.2vw !important;
}
.section_8 {
width: 40.73vw;
......@@ -1527,9 +1801,9 @@ const resetForm = () => {
margin-left: 0 !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
.text-wrapper_7>>>.el-input__wrapper,
.text-wrapper_8>>>.el-input__wrapper,
.text-wrapper_9>>>.el-input__wrapper {
height: 45px !important;
width: 100% !important;
}
......@@ -1540,7 +1814,7 @@ const resetForm = () => {
margin: 15px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
.text-wrapper_10>>>.el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
......@@ -1576,6 +1850,77 @@ const resetForm = () => {
}
@media (max-width: 480px) {
/* 小屏幕轮播图适配 */
.hero-content {
height: 56.25vw !important;
}
.hero-description {
height: 56.25vw !important;
}
.carousel-container {
height: 100% !important;
}
.carousel-slide {
background-size: 100% 100% !important;
}
.slide-content {
width: 40.73vw !important;
height: 23.96vw !important;
margin: 2vw 0 0 4.06vw !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
.carousel-indicators {
display: none;
bottom: 2vw !important;
gap: 1vw !important;
}
.indicator {
width: 1vw !important;
height: 1vw !important;
}
.section_9 {
top: 51vw !important;
right: 0 !important;
width: 10vw !important;
height: 5.32vw !important;
background-color: #fff !important;
}
.image_7 {
width: 1vw !important;
height: 1.8vw !important;
}
/* 小屏幕文字适配 */
.slide-content .paragraph_1 {
width: 40.73vw !important;
height: 3.6vw !important;
font-size: 3.64vw !important;
margin-top: 5.42vw !important;
}
.slide-content .paragraph_2 {
width: 40.73vw !important;
height: 5.63vw !important;
font-size: 1.25vw !important;
margin-top: 1.25vw !important;
}
.slide-content .image_4 {
width: 13.03vw !important;
height: 3.65vw !important;
margin: 3.38vw 0 0 0.2vw !important;
}
.homepage-container {
height: auto !important;
min-height: 450vw;
......@@ -1608,9 +1953,9 @@ const resetForm = () => {
height: 40px !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
.text-wrapper_7>>>.el-input__wrapper,
.text-wrapper_8>>>.el-input__wrapper,
.text-wrapper_9>>>.el-input__wrapper {
height: 40px !important;
}
......@@ -1618,7 +1963,7 @@ const resetForm = () => {
margin: 10px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
.text-wrapper_10>>>.el-textarea__inner {
min-height: 80px !important;
}
......@@ -1680,9 +2025,9 @@ const resetForm = () => {
margin-left: 0 !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
.text-wrapper_7>>>.el-input__wrapper,
.text-wrapper_8>>>.el-input__wrapper,
.text-wrapper_9>>>.el-input__wrapper {
height: 45px !important;
width: 100% !important;
}
......@@ -1693,7 +2038,7 @@ const resetForm = () => {
margin: 15px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
.text-wrapper_10>>>.el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment