Skip to content

W
wanyou_website
Commit 345fc10b by yang
Options

提交修改

parent c118ab3b
Showing with 450 additions and 105 deletions
src/components/Footer.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="footer_box flex-col"> <div class="footer_box flex-col">
<span class="footer_title">公司备案信息</span> <span class="footer_title">公司备案信息</span>
<span class="text_44" <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;"> <div class="flex-row" style="margin-top: 3vw;">
<span class="footer_title">联系我们</span> <span class="footer_title">联系我们</span>
<span <span
......
src/views/homepage.vue
...@@ -3,29 +3,44 @@ ...@@ -3,29 +3,44 @@
<div class="flex-col"> <div class="flex-col">
<!-- HeaderNav组件已移到Layout中 --> <!-- HeaderNav组件已移到Layout中 -->
<div class="hero-content flex-row"> <div class="hero-content flex-row">
<div class="section_8 flex-col"> <!-- 轮播图容器 -->
<!-- 导航文字已移到HeaderNav组件中 --> <div class="carousel-container" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
<span <div class="carousel-slides" :class="{ 'no-transition': isTransitioning }"
class="paragraph_1">细胞级修复&nbsp;重启生命活力<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
<span class="paragraph_2">中国科学院专家团队创新研发，技术行业领先<br/>多项国家发明专利及权威认证，科学背书，品质保障<br/>全球明星和富豪的健康标配</span> <div v-for="(slide, index) in carouselSlides" :key="index" class="carousel-slide"
<img class="image_4" src="@/assets/homepage/readMore.png"/> :style="{ backgroundImage: `url(${slide.background})` }">
</div> <div class="slide-content">
<div class="section_9 flex-row justify-center"> <span class="paragraph_1">{{ slide.title }}</span>
<div style="width: 50%;" class="align-center justify-center"> <span class="paragraph_2">{{ slide.description }}</span>
<img class="image_7 " src="@/assets/homepage/left.png"/> <img class="image_4" src="@/assets/homepage/readMore.png" />
</div>
</div>
</div> </div>
<div style="width: 50%;" class="align-center justify-center">
<img class="image_7" src="@/assets/homepage/right.png"/> <!-- 轮播控制按钮 -->
<div class="section_9 flex-row justify-center">
<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" @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> </div>
</div> </div>
<div class="hero-description flex-col justify-end"> <div class="hero-description flex-col justify-end">
<div class="group_1 flex-row justify-between"> <div class="group_1 flex-row justify-between">
<div class="text-group_1 flex-col justify-between"> <div class="text-group_1 flex-col justify-between">
<span class="text_3">多模态物理能量自愈舱的巅峰之作</span> <span class="text_3">多模态物理能量自愈舱的巅峰之作</span>
<span class="text_4">科技重构生命能量，激活人体与生俱来的自愈潜能</span> <span class="text_4">科技重构生命能量，激活人体与生俱来的自愈潜能</span>
</div> </div>
<img class="image_9" src="@/assets/common/caidai.png"/> <img class="image_9" src="@/assets/common/caidai.png" />
</div> </div>
<span class="text_5">02.技术定位：多模态物理复合能量场新范式</span> <span class="text_5">02.技术定位：多模态物理复合能量场新范式</span>
<span class="text_6">多模态物理复合能量场技术，尖端科技升级再创新，科技健康管理先进设备。</span> <span class="text_6">多模态物理复合能量场技术，尖端科技升级再创新，科技健康管理先进设备。</span>
...@@ -33,8 +48,8 @@ ...@@ -33,8 +48,8 @@
<span class="text_7">READ&nbsp;MORE</span> <span class="text_7">READ&nbsp;MORE</span>
</div> </div>
<div class="list_1 flex-row"> <div class="list_1 flex-row">
<div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }" <div class="list-items_1 flex-col" :style="{ background: item.lanhuBg0 }" v-for="(item, index) in loopData0"
v-for="(item, index) in loopData0" :key="index" style="background-size: 100% 100%"> :key="index" style="background-size: 100% 100%">
<div class="text-group_2 flex-col justify-between"> <div class="text-group_2 flex-col justify-between">
<div> <div>
<span class="text_8" v-html="item.lanhutext0"></span> <span class="text_8" v-html="item.lanhutext0"></span>
...@@ -43,9 +58,9 @@ ...@@ -43,9 +58,9 @@
<span class="text_9" v-html="item.lanhutext1"></span> <span class="text_9" v-html="item.lanhutext1"></span>
</div> </div>
<div class="image-wrapper_3 flex-row"> <div class="image-wrapper_3 flex-row">
<img class="label_3" :src="item.lanhuimage0"/> <img class="label_3" :src="item.lanhuimage0" />
<img v-if="item.slot2 === 2" class="image_10" :src="item.specialSlot2.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 v-if="item.slot1 === 1" class="image_11" src="@/assets/homepage/sl.png" />
</div> </div>
</div> </div>
</div> </div>
...@@ -56,20 +71,19 @@ ...@@ -56,20 +71,19 @@
<span class="text_10">产品优势</span> <span class="text_10">产品优势</span>
<span class="text_11">中国科学院专家创新研发</span> <span class="text_11">中国科学院专家创新研发</span>
</div> </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> <span class="text_12">INNOVATION UPGRADE</span>
<div class="text-group_4 flex-col justify-between"> <div class="text-group_4 flex-col justify-between">
<span class="paragraph_3">多模态物理能量场<br/>科学技术，创新再升级</span> <span class="paragraph_3">多模态物理能量场<br />科学技术，创新再升级</span>
<span <span class="text_13">融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量，直击细胞本源，提升细胞活力，激活人体与生俱来的自愈力。</span>
class="text_13">融合太赫兹波、远红外、交变磁场、氢分子、氧分子、热能量六维物理能量，直击细胞本源，提升细胞活力，激活人体与生俱来的自愈力。</span>
</div> </div>
</div> </div>
<div class="section_11 flex-col"> <div class="section_11 flex-col">
<div class="image-wrapper_4 flex-row"> <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>
<div class="image-wrapper_5 flex-row"> <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>
<div class="text-wrapper_2 flex-row"> <div class="text-wrapper_2 flex-row">
<span class="text_14">AUTHORITATIVE PLATFORM</span> <span class="text_14">AUTHORITATIVE PLATFORM</span>
...@@ -88,7 +102,7 @@ ...@@ -88,7 +102,7 @@
<span class="text_17">关于我们</span> <span class="text_17">关于我们</span>
<span class="text_18">一家专注于多模态物理能量自愈技术研发与应用的创新科技企业</span> <span class="text_18">一家专注于多模态物理能量自愈技术研发与应用的创新科技企业</span>
</div> </div>
<img class="image_15" src="@/assets/common/caidai.png"/> <img class="image_15" src="@/assets/common/caidai.png" />
</div> </div>
<div class="group_3 flex-row justify-between"> <div class="group_3 flex-row justify-between">
<div class="section_13 flex-col"> <div class="section_13 flex-col">
...@@ -129,7 +143,7 @@ ...@@ -129,7 +143,7 @@
<div class="box_11 flex-row"> <div class="box_11 flex-row">
<div class="image-text_1 flex-row justify-between"> <div class="image-text_1 flex-row justify-between">
<span class="text-group_11">READ MORE</span> <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> </div>
</div> </div>
...@@ -140,34 +154,31 @@ ...@@ -140,34 +154,31 @@
<span class="text_29">合作优势</span> <span class="text_29">合作优势</span>
<span class="text_30">轻资产运营，高回报收益，共享万亿健康产业红利</span> <span class="text_30">轻资产运营，高回报收益，共享万亿健康产业红利</span>
</div> </div>
<img class="image_17" src="@/assets/common/caidai.png"/> <img class="image_17" src="@/assets/common/caidai.png" />
</div> </div>
<div class="block_3 flex-row justify-between"> <div class="block_3 flex-row justify-between">
<div class="group_5 flex-col"> <div class="group_5 flex-col">
<div class="group_6 flex-row justify-between"> <div class="group_6 flex-row justify-between">
<div class="group_7 flex-col justify-between"> <div class="group_7 flex-col justify-between">
<img class="image_18" <img class="image_18" src="@/assets/homepage/hand.png" />
src="@/assets/homepage/hand.png"/>
<span class="text_31">设备购买模式</span> <span class="text_31">设备购买模式</span>
</div> </div>
<div class="group_8 flex-col"></div> <div class="group_8 flex-col"></div>
</div> </div>
<div class="text-wrapper_3 flex-row"> <div class="text-wrapper_3 flex-row">
<span <span class="paragraph_4">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。<br /><br />计划快速回本并持续盈利的投资者。</span>
class="paragraph_4">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。<br/><br/>计划快速回本并持续盈利的投资者。</span>
</div> </div>
</div> </div>
<div class="group_9 flex-col"> <div class="group_9 flex-col">
<div class="section_18 flex-row justify-between"> <div class="section_18 flex-row justify-between">
<div class="block_4 flex-col justify-between"> <div class="block_4 flex-col justify-between">
<img class="image_19" <img class="image_19" src="@/assets/homepage/book.png" />
src="@/assets/homepage/book.png"/>
<span class="text_32">设备租赁模式</span> <span class="text_32">设备租赁模式</span>
</div> </div>
<div class="block_5 flex-col"></div> <div class="block_5 flex-col"></div>
</div> </div>
<div class="text-wrapper_4 flex-row"> <div class="text-wrapper_4 flex-row">
<span class="paragraph_5">初创健康机构、健身工作室、美容院等，降低初期投入风险。<br/>想试运营验证市场需求的投资者。</span> <span class="paragraph_5">初创健康机构、健身工作室、美容院等，降低初期投入风险。<br />想试运营验证市场需求的投资者。</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -178,15 +189,14 @@ ...@@ -178,15 +189,14 @@
<span class="text_17">联系我们</span> <span class="text_17">联系我们</span>
<span class="text_18">开启您的健康科技事业</span> <span class="text_18">开启您的健康科技事业</span>
</div> </div>
<img class="image_9" src="@/assets/common/caidai.png"/> <img class="image_9" src="@/assets/common/caidai.png" />
</div> </div>
<div class="group_11 flex-row justify-between"> <div class="group_11 flex-row justify-between">
<el-input class="text-wrapper_7" v-model="form.name" 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_8" v-model="form.mobile" placeholder="您的手机" />
<el-input class="text-wrapper_9" v-model="form.wechat" placeholder="您的微信"/> <el-input class="text-wrapper_9" v-model="form.wechat" placeholder="您的微信" />
</div> </div>
<el-input class="text-wrapper_10" v-model="form.question" type="textarea" :rows="7" <el-input class="text-wrapper_10" v-model="form.question" type="textarea" :rows="7" placeholder="请输入您要咨询的问题" />
placeholder="请输入您要咨询的问题"/>
<div class="group_12 flex-row justify-between"> <div class="group_12 flex-row justify-between">
<span class="text_45">*&nbsp;您提交的信息请确保填写真实，以便我们再48小时内联系您</span> <span class="text_45">*&nbsp;您提交的信息请确保填写真实，以便我们再48小时内联系您</span>
<div class="text-wrapper_11 align-center justify-center flex-col" @click="save"> <div class="text-wrapper_11 align-center justify-center flex-col" @click="save">
...@@ -198,23 +208,16 @@ ...@@ -198,23 +208,16 @@
</div> </div>
</div> </div>
<el-dialog <el-dialog v-model="dialogVisible" :showClose="false" :width="dialogWidth" class="dialog justify-center align-center">
v-model="dialogVisible"
:showClose="false"
:width="dialogWidth"
class="dialog justify-center align-center"
>
<div class="dialog_image-wrapper_1 justify-end"> <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>
<div class="dialog_section_1 justify-center align-center flex-col"> <div class="dialog_section_1 justify-center align-center flex-col">
<div class="dialog_box_2 flex-row"></div> <div class="dialog_box_2 flex-row"></div>
<div class="dialog_box_3 flex-row"> <div class="dialog_box_3 flex-row">
<div class="dialog_text-group_1 flex-col"> <div class="dialog_text-group_1 flex-col">
<span class="dialog_text_1">感谢您的提交！</span> <span class="dialog_text_1">感谢您的提交！</span>
<span class="dialog_text_2" <span class="dialog_text_2">我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span>
>我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span
>
</div> </div>
</div> </div>
<div class="dialog_box_4 flex-row"> <div class="dialog_box_4 flex-row">
...@@ -235,8 +238,100 @@ import content3 from '@/assets/homepage/content3.png' ...@@ -235,8 +238,100 @@ import content3 from '@/assets/homepage/content3.png'
import addIcon from '@/assets/homepage/add.png' import addIcon from '@/assets/homepage/add.png'
import lbxIcon from '@/assets/homepage/lbx.png' import lbxIcon from '@/assets/homepage/lbx.png'
import hdIcon from '@/assets/homepage/hd.png' import hdIcon from '@/assets/homepage/hd.png'
import {ref, computed, onMounted, onUnmounted} from "vue"; import bg1 from '@/assets/homepage/BC.png'
import {ElMessage} from "element-plus"; 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 = () => { ...@@ -274,10 +369,12 @@ const handleResize = () => {
onMounted(() => { onMounted(() => {
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
startAutoPlay() // 启动自动轮播
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize) window.removeEventListener('resize', handleResize)
stopAutoPlay() // 停止自动轮播
}) })
const loopData0 = ref([{ const loopData0 = ref([{
...@@ -287,26 +384,26 @@ const loopData0 = ref([{ ...@@ -287,26 +384,26 @@ const loopData0 = ref([{
lanhuimage0: addIcon, lanhuimage0: addIcon,
slot1: 1, slot1: 1,
}, },
{ {
lanhuBg0: `url(${content2}) center no-repeat`, lanhuBg0: `url(${content2}) center no-repeat`,
lanhutext0: 'TECHNICAL<br/>POSITIONING', lanhutext0: 'TECHNICAL<br/>POSITIONING',
lanhutext1: '技术定位', lanhutext1: '技术定位',
lanhuimage0: addIcon, lanhuimage0: addIcon,
specialSlot2: { specialSlot2: {
lanhuimage0: lbxIcon, lanhuimage0: lbxIcon,
},
slot2: 2,
}, },
{ slot2: 2,
lanhuBg0: `url(${content3}) center no-repeat`, },
lanhutext0: 'CELL CHARGING<br/>STATION', {
lanhutext1: '人体细胞的无限充电站', lanhuBg0: `url(${content3}) center no-repeat`,
lanhuimage0: addIcon, lanhutext0: 'CELL CHARGING<br/>STATION',
specialSlot2: { lanhutext1: '人体细胞的无限充电站',
lanhuimage0: hdIcon, lanhuimage0: addIcon,
}, specialSlot2: {
slot2: 2, lanhuimage0: hdIcon,
}, },
slot2: 2,
},
]) ])
...@@ -399,7 +496,7 @@ const resetForm = () => { ...@@ -399,7 +496,7 @@ const resetForm = () => {
} }
</script> </script>
<style src="./common.css"/> <style src="./common.css" />
<style lang="css" scoped> <style lang="css" scoped>
.homepage-container { .homepage-container {
position: relative; position: relative;
...@@ -411,8 +508,75 @@ const resetForm = () => { ...@@ -411,8 +508,75 @@ const resetForm = () => {
.hero-content { .hero-content {
width: 100vw; width: 100vw;
height: 56.25vw; height: 56.25vw;
background: url(@/assets/homepage/BC.png) 100% no-repeat; position: relative;
background-size: 100% 100%; 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 { .section_8 {
...@@ -457,10 +621,12 @@ const resetForm = () => { ...@@ -457,10 +621,12 @@ const resetForm = () => {
.section_9 { .section_9 {
position: absolute; position: absolute;
right: 0; right: 0;
top: 51vw;
width: 10vw; width: 10vw;
height: 5.32vw; height: 5.32vw;
background-color: #fff; background-color: #fff;
margin-top: 51vw; z-index: 10;
cursor: pointer;
} }
.image_7 { .image_7 {
...@@ -471,6 +637,7 @@ const resetForm = () => { ...@@ -471,6 +637,7 @@ const resetForm = () => {
.hero-description { .hero-description {
width: 100vw; width: 100vw;
height: 56.25vw; height: 56.25vw;
padding-top: 55vw;
background: url(@/assets/homepage/zyc.png) 100% no-repeat; background: url(@/assets/homepage/zyc.png) 100% no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
...@@ -488,10 +655,10 @@ const resetForm = () => { ...@@ -488,10 +655,10 @@ const resetForm = () => {
.text_3 { .text_3 {
background-image: linear-gradient(90deg, background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0, rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0, rgba(0, 82, 217, 1) 0,
rgba(0, 199, 218, 1) 100%, rgba(0, 199, 218, 1) 100%,
rgba(0, 199, 218, 1) 100%); rgba(0, 199, 218, 1) 100%);
width: 60vw; width: 60vw;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(0, 82, 217, 1); color: rgba(0, 82, 217, 1);
...@@ -659,10 +826,10 @@ const resetForm = () => { ...@@ -659,10 +826,10 @@ const resetForm = () => {
.text_10 { .text_10 {
background-image: linear-gradient(90deg, background-image: linear-gradient(90deg,
rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0,
rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0,
rgba(0, 199, 218, 1) 100%, rgba(0, 199, 218, 1) 100%,
rgba(0, 199, 218, 1) 100%); rgba(0, 199, 218, 1) 100%);
width: 9.9vw; width: 9.9vw;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
...@@ -845,10 +1012,10 @@ const resetForm = () => { ...@@ -845,10 +1012,10 @@ const resetForm = () => {
.text_17 { .text_17 {
background-image: linear-gradient(90deg, background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0, rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0, rgba(0, 82, 217, 1) 0,
rgba(0, 199, 218, 1) 100%, rgba(0, 199, 218, 1) 100%,
rgba(0, 199, 218, 1) 100%); rgba(0, 199, 218, 1) 100%);
width: 10vw; width: 10vw;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(0, 82, 217, 1); color: rgba(0, 82, 217, 1);
...@@ -1181,10 +1348,10 @@ const resetForm = () => { ...@@ -1181,10 +1348,10 @@ const resetForm = () => {
.text_29 { .text_29 {
background-image: linear-gradient(90deg, background-image: linear-gradient(90deg,
rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0,
rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0,
rgba(0, 199, 218, 1) 100%, rgba(0, 199, 218, 1) 100%,
rgba(0, 199, 218, 1) 100%); rgba(0, 199, 218, 1) 100%);
width: 9.9vw; width: 9.9vw;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(0, 82, 217, 1); color: rgba(0, 82, 217, 1);
...@@ -1470,14 +1637,121 @@ const resetForm = () => { ...@@ -1470,14 +1637,121 @@ const resetForm = () => {
height: auto !important; height: auto !important;
} }
.text-wrapper_10 >>> .el-textarea__inner { .text-wrapper_10>>>.el-textarea__inner {
width: 100% !important; width: 100% !important;
min-height: 100px !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) { @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 { .section_8 {
width: 40.73vw; width: 40.73vw;
...@@ -1527,9 +1801,9 @@ const resetForm = () => { ...@@ -1527,9 +1801,9 @@ const resetForm = () => {
margin-left: 0 !important; margin-left: 0 !important;
} }
.text-wrapper_7 >>> .el-input__wrapper, .text-wrapper_7>>>.el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper, .text-wrapper_8>>>.el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper { .text-wrapper_9>>>.el-input__wrapper {
height: 45px !important; height: 45px !important;
width: 100% !important; width: 100% !important;
} }
...@@ -1540,7 +1814,7 @@ const resetForm = () => { ...@@ -1540,7 +1814,7 @@ const resetForm = () => {
margin: 15px 0 !important; margin: 15px 0 !important;
} }
.text-wrapper_10 >>> .el-textarea__inner { .text-wrapper_10>>>.el-textarea__inner {
width: 100% !important; width: 100% !important;
min-height: 100px !important; min-height: 100px !important;
} }
...@@ -1576,6 +1850,77 @@ const resetForm = () => { ...@@ -1576,6 +1850,77 @@ const resetForm = () => {
} }
@media (max-width: 480px) { @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 { .homepage-container {
height: auto !important; height: auto !important;
min-height: 450vw; min-height: 450vw;
...@@ -1608,9 +1953,9 @@ const resetForm = () => { ...@@ -1608,9 +1953,9 @@ const resetForm = () => {
height: 40px !important; height: 40px !important;
} }
.text-wrapper_7 >>> .el-input__wrapper, .text-wrapper_7>>>.el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper, .text-wrapper_8>>>.el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper { .text-wrapper_9>>>.el-input__wrapper {
height: 40px !important; height: 40px !important;
} }
...@@ -1618,7 +1963,7 @@ const resetForm = () => { ...@@ -1618,7 +1963,7 @@ const resetForm = () => {
margin: 10px 0 !important; margin: 10px 0 !important;
} }
.text-wrapper_10 >>> .el-textarea__inner { .text-wrapper_10>>>.el-textarea__inner {
min-height: 80px !important; min-height: 80px !important;
} }
...@@ -1680,9 +2025,9 @@ const resetForm = () => { ...@@ -1680,9 +2025,9 @@ const resetForm = () => {
margin-left: 0 !important; margin-left: 0 !important;
} }
.text-wrapper_7 >>> .el-input__wrapper, .text-wrapper_7>>>.el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper, .text-wrapper_8>>>.el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper { .text-wrapper_9>>>.el-input__wrapper {
height: 45px !important; height: 45px !important;
width: 100% !important; width: 100% !important;
} }
...@@ -1693,7 +2038,7 @@ const resetForm = () => { ...@@ -1693,7 +2038,7 @@ const resetForm = () => {
margin: 15px 0 !important; margin: 15px 0 !important;
} }
.text-wrapper_10 >>> .el-textarea__inner { .text-wrapper_10>>>.el-textarea__inner {
width: 100% !important; width: 100% !important;
min-height: 100px !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