Skip to content

W
wanyou_website
Commit 632e3839 by yang
Options

移除适配手机端 达到缩小可以适配

parent 72bdfc10
Showing with 199 additions and 1160 deletions
README.md
...@@ -33,14 +33,12 @@ ...@@ -33,14 +33,12 @@
## 功能特性 ## 功能特性
- ✅ 响应式布局设计
- ✅ 现代化 UI 界面 - ✅ 现代化 UI 界面
- ✅ 轮播图展示 - ✅ 轮播图展示
- ✅ 产品服务展示 - ✅ 产品服务展示
- ✅ 新闻动态 - ✅ 新闻动态
- ✅ 公司介绍 - ✅ 公司介绍
- ✅ 联系方式 - ✅ 联系方式
- ✅ 移动端适配
## 快速开始 ## 快速开始
......
index.html
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg"/> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>企业官网</title> <title>企业官网</title>
<style> <style>
::-webkit-scrollbar { ::-webkit-scrollbar {
...@@ -18,8 +17,8 @@ ...@@ -18,8 +17,8 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/components/Footer.vue
...@@ -3,17 +3,17 @@ ...@@ -3,17 +3,17 @@
<div class="flex-row"> <div class="flex-row">
<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" <div class=" flex-row" style="margin-top:0.5vw;">
style="margin-top: 1vw;">经营许可证编号：京ICP备2025127186号-2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：京ICP备2025127186号-2</span> <span class="text_44">经营许可证编号：京ICP备2025127186号-2</span>
<div class="flex-row" style="margin-top: 3vw;"> <span class="text_44">ICP备案/许可证号：京ICP备2025127186号-2</span>
</div>
<div class="flex-row" style="margin-top: 2.5vw;">
<span class="footer_title">联系我们</span> <span class="footer_title">联系我们</span>
<span <span class="footer_title">导航</span>
class="footer_title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;导航</span>
</div> </div>
<div class=" flex-row" style="margin-top:1vw;"> <div class=" flex-row" style="margin-top:0.5vw;">
<span class="text_44">联系我们：18610051468/13810383435</span> <span class="text_44">联系我们：18610051468/13810383435</span>
<span <span class="text_44">企业总部地址：北京市朝阳区望京SOHOT2-A座</span>
class="text_44">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业总部地址：北京市朝阳区望京SOHOT2-A座</span>
</div> </div>
</div> </div>
<span class="paragraph_6">微信扫一扫<br />关注阳生万物微信</span> <span class="paragraph_6">微信扫一扫<br />关注阳生万物微信</span>
...@@ -47,6 +47,7 @@ export default { ...@@ -47,6 +47,7 @@ export default {
} }
.footer_title { .footer_title {
width: 20vw;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-size: 1.14vw; font-size: 1.14vw;
...@@ -55,8 +56,7 @@ export default { ...@@ -55,8 +56,7 @@ export default {
} }
.text_44 { .text_44 {
width: 9.8vw; width: 20vw;
height: 0.84vw;
overflow-wrap: break-word; overflow-wrap: break-word;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-size: 0.83vw; font-size: 0.83vw;
......
src/components/HeaderNav.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<!-- Logo --> <!-- Logo -->
<router-link to="/" class="logo-link"> <router-link to="/" class="logo-link">
<div></div> <div></div>
<img class="logo" :src="logoUrl" alt="自愈舱官网"/> <img class="logo" :src="logoUrl" alt="自愈舱官网" />
</router-link> </router-link>
<!-- 导航菜单 --> <!-- 导航菜单 -->
...@@ -28,11 +28,11 @@ ...@@ -28,11 +28,11 @@
</div> </div>
</div> </div>
<router-link to="/cooperation" class="nav-link" :class="{ 'active': currentRoute === '/cooperation' }"> <router-link to="/cooperation" class="nav-link"
:class="{ 'active': (currentRoute === '/cooperation' || currentRoute === '/lease' || currentRoute === '/operator' || currentRoute === '/agent') }">
合作优势 合作优势
</router-link> </router-link>
<router-link to="/certification" class="nav-link" <router-link to="/certification" class="nav-link" :class="{ 'active': currentRoute === '/certification' }">
:class="{ 'active': currentRoute === '/certification' }">
企业资质 企业资质
</router-link> </router-link>
<router-link to="/contact-us" class="nav-link" :class="{ 'active': currentRoute === '/contact-us' }"> <router-link to="/contact-us" class="nav-link" :class="{ 'active': currentRoute === '/contact-us' }">
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
computed: { computed: {
// 检查是否在自愈舱相关路由 // 检查是否在自愈舱相关路由
isServeRouteActive() { isServeRouteActive() {
const serveRoutes = ['/serve', '/case', '/agent', '/operator', '/lease'] const serveRoutes = ['/serve', '/case', '/Product']
return serveRoutes.includes(this.currentRoute) return serveRoutes.includes(this.currentRoute)
} }
}, },
...@@ -280,57 +280,4 @@ export default { ...@@ -280,57 +280,4 @@ export default {
background-color: rgba(255, 255, 255, 0.98); background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
} }
/* 响应式设计 */
@media (max-width: 768px) {
.header-nav {
width: 100vw;
height: 60px;
padding: 0 15px;
}
.logo {
width: 40px;
height: 30px;
}
.nav-menu {
gap: 15px;
display: flex;
/* 移动端显示导航菜单 */
}
.nav-link {
font-size: 12px;
}
.dropdown-menu {
min-width: 120px;
}
.dropdown-item {
padding: 8px 12px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.header-nav {
height: 50px;
padding: 0 10px;
}
.logo {
width: 35px;
height: 25px;
}
.nav-menu {
gap: 10px;
}
.nav-link {
font-size: 12px;
}
}
</style> </style>
\ No newline at end of file
src/components/SectionWrapper.vue
...@@ -363,22 +363,4 @@ ...@@ -363,22 +363,4 @@
.space-x-0>*+* { .space-x-0>*+* {
margin-left: 0; margin-left: 0;
} }</style>
\ No newline at end of file
/* 响应式设计 */
@media (max-width: 768px) {
.section-title {
flex-direction: column;
text-align: center;
}
.title-decoration {
margin-top: 1rem;
}
.section-content.flex-row,
.section-content.two-column {
flex-direction: column;
}
}
</style>
\ No newline at end of file
src/views/Case.vue
<template> <template>
<div class="page flex-col"> <div class="page flex-col">
<SecondHeader :title="'COOPERATION'" <SecondHeader :title="'COOPERATION'" :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{
:bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{ name: '品牌介绍',
name:'品牌介绍', url: '/Product',
url:'/Product', isSelect: false
isSelect:false }, {
},{ name: '用户案例',
name:'用户案例', url: '/case',
url:'/case', isSelect: true
isSelect:true }, {
},{ name: '增值服务',
name:'增值服务', url: '/serve',
url:'/serve', isSelect: false
isSelect:false }]" />
}]"/>
<div class="group_2 flex-col"> <div class="group_2 flex-col">
<div class="box_4 flex-row justify-between"> <div class="box_4 flex-row justify-between">
<div class="box_5 flex-col"> <div class="box_5 flex-col">
<div class="section_1 flex-row justify-between"> <div class="section_1 flex-row justify-between">
<span class="text_7">用户案例</span> <span class="text_7">用户案例</span>
<img class="image_6" <img class="image_6" src="@/assets/case/icon_1.png" />
src="@/assets/case/icon_1.png"/>
</div> </div>
<span class="text_8">01.乳腺癌案例</span> <span class="text_8">01.乳腺癌案例</span>
<img class="image_7" src="@/assets/case/icon_2.png"/> <img class="image_7" src="@/assets/case/icon_2.png" />
<img class="image_8" src="@/assets/case/icon_3.png"/> <img class="image_8" src="@/assets/case/icon_3.png" />
</div> </div>
<img class="image_9" src="@/assets/case/icon_4.png"/> <img class="image_9" src="@/assets/case/icon_4.png" />
</div> </div>
<div class="box_6 flex-row"> <div class="box_6 flex-row">
<div class="group_3 flex-col"> <div class="group_3 flex-col">
...@@ -38,13 +36,11 @@ ...@@ -38,13 +36,11 @@
</div> </div>
<div class="group_5 flex-row"> <div class="group_5 flex-row">
<div class="image-text_2 flex-row justify-between"> <div class="image-text_2 flex-row justify-between">
<img class="image_10" <img class="image_10" src="@/assets/case/icon_5.png" />
src="@/assets/case/icon_5.png"/> <span class="text-group_3">体验前：2023年8月13日CT显示【82X26X44mm】<br />体验频次：每日2次</span>
<span class="text-group_3">体验前：2023年8月13日CT显示【82X26X44mm】<br/>体验频次：每日2次</span>
</div> </div>
<img class="image_11" <img class="image_11" src="@/assets/case/icon_6.png" />
src="@/assets/case/icon_6.png"/> <span class="paragraph_1">体验后：2023年9月10日CT显示【56X23X27mm】<br />效果：肿瘤缩小63%后才可手术</span>
<span class="paragraph_1">体验后：2023年9月10日CT显示【56X23X27mm】<br/>效果：肿瘤缩小63%后才可手术</span>
</div> </div>
<div class="group_6 flex-row"> <div class="group_6 flex-row">
<div class="text-wrapper_3"> <div class="text-wrapper_3">
...@@ -58,10 +54,10 @@ ...@@ -58,10 +54,10 @@
<span class="text_13">02.糖尿病足案例</span> <span class="text_13">02.糖尿病足案例</span>
</div> </div>
<div class="image-wrapper_1 flex-row"> <div class="image-wrapper_1 flex-row">
<img class="image_12" src="@/assets/case/icon_7.png"/> <img class="image_12" src="@/assets/case/icon_7.png" />
</div> </div>
<div class="image-wrapper_2 flex-row"> <div class="image-wrapper_2 flex-row">
<img class="image_13" src="@/assets/case/icon_8.png"/> <img class="image_13" src="@/assets/case/icon_8.png" />
</div> </div>
<div class="box_7 flex-row"> <div class="box_7 flex-row">
<div class="block_2 flex-col"> <div class="block_2 flex-col">
...@@ -71,17 +67,13 @@ ...@@ -71,17 +67,13 @@
</div> </div>
<div class="text-wrapper_6"> <div class="text-wrapper_6">
<span class="text_16">背景：</span> <span class="text_16">背景：</span>
<span <span class="text_17">2023年6月出现糖尿病足开始溃烂,&nbsp;在玉溪市中医院和玉溪市人民医院多次治疗效果不佳</span>
class="text_17">2023年6月出现糖尿病足开始溃烂,&nbsp;在玉溪市中医院和玉溪市人民医院多次治疗效果不佳</span>
</div> </div>
<div class="section_2 flex-row"> <div class="section_2 flex-row">
<img class="image_14" <img class="image_14" src="@/assets/case/icon_9.png" />
src="@/assets/case/icon_9.png"/> <span class="paragraph_2">体验前：9月到301医院住院稍显好转,&nbsp;12月份溃烂又加重,<br />严重到腹部已经出现溃烂。<br />使用频次：每日2次</span>
<span <img class="image_15" src="@/assets/case/icon_10.png" />
class="paragraph_2">体验前：9月到301医院住院稍显好转,&nbsp;12月份溃烂又加重,<br/>严重到腹部已经出现溃烂。<br/>使用频次：每日2次</span> <span class="paragraph_3">使用后：2024年1月1日开始使用万有自愈舱，60天后腿部已<br />基本痊愈。</span>
<img class="image_15"
src="@/assets/case/icon_10.png"/>
<span class="paragraph_3">使用后：2024年1月1日开始使用万有自愈舱，60天后腿部已<br/>基本痊愈。</span>
</div> </div>
<div class="text-wrapper_7"> <div class="text-wrapper_7">
<span class="text_18">2025年随访：</span> <span class="text_18">2025年随访：</span>
...@@ -93,10 +85,10 @@ ...@@ -93,10 +85,10 @@
<span class="text_20">03.脑梗案例</span> <span class="text_20">03.脑梗案例</span>
</div> </div>
<div class="image-wrapper_3 flex-row"> <div class="image-wrapper_3 flex-row">
<img class="image_16" src="@/assets/case/icon_11.png"/> <img class="image_16" src="@/assets/case/icon_11.png" />
</div> </div>
<div class="image-wrapper_4 flex-row"> <div class="image-wrapper_4 flex-row">
<img class="image_17" src="@/assets/case/icon_12.png"/> <img class="image_17" src="@/assets/case/icon_12.png" />
</div> </div>
<div class="box_8 flex-row"> <div class="box_8 flex-row">
<div class="section_3 flex-col"> <div class="section_3 flex-col">
...@@ -106,19 +98,16 @@ ...@@ -106,19 +98,16 @@
</div> </div>
<div class="text-wrapper_10"> <div class="text-wrapper_10">
<span class="text_23">背景：</span> <span class="text_23">背景：</span>
<span <span class="text_24">2022年5月13日住301医院，诊断为急性脑梗死、二型糖尿病、高血压高危、肺结节等当时右眼眼睑无法抬起,&nbsp;眼珠无法转动,重影不能眨眼。</span>
class="text_24">2022年5月13日住301医院，诊断为急性脑梗死、二型糖尿病、高血压高危、肺结节等当时右眼眼睑无法抬起,&nbsp;眼珠无法转动,重影不能眨眼。</span>
</div> </div>
<div class="box_9 flex-row"> <div class="box_9 flex-row">
<div class="image-text_3 flex-row justify-between"> <div class="image-text_3 flex-row justify-between">
<img class="image_18" <img class="image_18" src="@/assets/case/icon_13.png" />
src="@/assets/case/icon_13.png"/> <span class="text-group_4">使用前：准备做脑部手术<br />使用频次：每日2次</span>
<span class="text-group_4">使用前：准备做脑部手术<br/>使用频次：每日2次</span>
</div> </div>
<img class="image_19" <img class="image_19" src="@/assets/case/icon_14.png" />
src="@/assets/case/icon_14.png"/>
<span <span
class="paragraph_4">使用后：两个月后，核磁显示:&nbsp;脑部多发血管狭窄(先天)&nbsp;已完全恢<br/>复正常，动脉粥样硬化得到了改善（据医生讲先天性脑部血管狭窄<br/>是不可逆的，现在血管已经正常是个奇迹&nbsp;）</span> class="paragraph_4">使用后：两个月后，核磁显示:&nbsp;脑部多发血管狭窄(先天)&nbsp;已完全恢<br />复正常，动脉粥样硬化得到了改善（据医生讲先天性脑部血管狭窄<br />是不可逆的，现在血管已经正常是个奇迹&nbsp;）</span>
</div> </div>
<div class="text-wrapper_11"> <div class="text-wrapper_11">
<span class="text_25">2025年随访：</span> <span class="text_25">2025年随访：</span>
...@@ -130,10 +119,10 @@ ...@@ -130,10 +119,10 @@
<span class="text_27">04.脑溢血案例</span> <span class="text_27">04.脑溢血案例</span>
</div> </div>
<div class="image-wrapper_5 flex-row"> <div class="image-wrapper_5 flex-row">
<img class="image_20" src="@/assets/case/icon_15.png"/> <img class="image_20" src="@/assets/case/icon_15.png" />
</div> </div>
<div class="image-wrapper_6 flex-row"> <div class="image-wrapper_6 flex-row">
<img class="image_21" src="@/assets/case/icon_16.png"/> <img class="image_21" src="@/assets/case/icon_16.png" />
</div> </div>
<div class="box_10 flex-row"> <div class="box_10 flex-row">
<div class="group_7 flex-col"> <div class="group_7 flex-col">
...@@ -150,12 +139,10 @@ ...@@ -150,12 +139,10 @@
</div> </div>
</div> </div>
<div class="group_10 flex-row"> <div class="group_10 flex-row">
<img class="image_22" <img class="image_22" src="@/assets/case/icon_17.png" />
src="@/assets/case/icon_17.png"/> <span class="paragraph_5">使用前：经多方治疗生活依然不能自理，只能拄拐棍勉<br />强走路&nbsp;。<br />使用频次：每日1次</span>
<span class="paragraph_5">使用前：经多方治疗生活依然不能自理，只能拄拐棍勉<br/>强走路&nbsp;。<br/>使用频次：每日1次</span> <img class="image_23" src="@/assets/case/icon_18.png" />
<img class="image_23" <span class="paragraph_6">使用后：8天体验，扔掉拐棍可以行走，；59天体验生活基本<br />能自理。</span>
src="@/assets/case/icon_18.png"/>
<span class="paragraph_6">使用后：8天体验，扔掉拐棍可以行走，；59天体验生活基本<br/>能自理。</span>
</div> </div>
<div class="group_11 flex-row"> <div class="group_11 flex-row">
<div class="text-wrapper_15"> <div class="text-wrapper_15">
...@@ -187,17 +174,16 @@ export default { ...@@ -187,17 +174,16 @@ export default {
methods: {}, methods: {},
}; };
</script> </script>
<style src="./common.css"/> <style src="./common.css" />
<style scoped> <style scoped>
.page { .page {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 340vw; height: 345vw;
overflow: hidden; overflow: hidden;
} }
.block_1 { .block_1 {}
}
.group_1 { .group_1 {
position: relative; position: relative;
......
src/views/Cooperation.vue
<template> <template>
<div class="page flex-col"> <div class="page flex-col">
<SecondHeader :title="'COOPERATION'" <SecondHeader :title="'COOPERATION'" :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{
:bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{ name: '设备购买模式',
name:'设备购买模式', url: '/cooperation',
url:'/cooperation', isSelect: true
isSelect:true }, {
},{ name: '设备租赁模式',
name:'设备租赁模式', url: '/lease',
url:'/lease', isSelect: false
isSelect:false }, {
},{ name: '运营商分级',
name:'运营商分级', url: '/operator',
url:'/operator', isSelect: false
isSelect:false }, {
},{ name: '代理商体系',
name:'代理商体系', url: '/agent',
url:'/agent', isSelect: false
isSelect:false }]" />
}]"/>
<div class="group_5 flex-col"> <div class="group_5 flex-col">
<div class="box_2 flex-row"> <div class="box_2 flex-row">
<div class="section_1 flex-col"> <div class="section_1 flex-col">
<span class="text_8">设备购买模式</span> <span class="text_8">设备购买模式</span>
<span class="text_9">适合追求长期稳定收益的机构！</span> <span class="text_9">适合追求长期稳定收益的机构！</span>
<img class="image_6" src="@/assets/cooperation/icon_1.png"/> <img class="image_6" src="@/assets/cooperation/icon_1.png" />
</div> </div>
<img class="image_7" src="@/assets/cooperation/icon_2.png"/> <img class="image_7" src="@/assets/cooperation/icon_2.png" />
<img class="image_8" src="@/assets/cooperation/icon_3.png"/> <img class="image_8" src="@/assets/cooperation/icon_3.png" />
</div> </div>
<div class="box_3 flex-row"> <div class="box_3 flex-row">
<div class="box_4 flex-col"> <div class="box_4 flex-col">
<div class="group_6 flex-row justify-between"> <div class="group_6 flex-row justify-between">
<img class="label_2" <img class="label_2" src="@/assets/cooperation/icon_4.png" />
src="@/assets/cooperation/icon_4.png"/>
<span class="text_10">适合对象</span> <span class="text_10">适合对象</span>
</div> </div>
<div class="group_7 flex-row justify-between"> <div class="group_7 flex-row justify-between">
<div class="image-text_2 flex-row justify-between"> <div class="image-text_2 flex-row justify-between">
<img class="image_9" <img class="image_9" src="@/assets/cooperation/icon_5.png" />
src="@/assets/cooperation/icon_5.png"/> <span class="text-group_2">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。</span>
<span
class="text-group_2">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。</span>
</div> </div>
<div class="image-text_3 flex-row justify-between"> <div class="image-text_3 flex-row justify-between">
<img class="image_10" <img class="image_10" src="@/assets/cooperation/icon_6.png" />
src="@/assets/cooperation/icon_6.png"/>
<span class="text-group_3">计划快速回本并持续盈利的投资者。</span> <span class="text-group_3">计划快速回本并持续盈利的投资者。</span>
</div> </div>
</div> </div>
...@@ -54,24 +49,20 @@ ...@@ -54,24 +49,20 @@
<div class="box_5 flex-row"> <div class="box_5 flex-row">
<div class="section_2 flex-col"> <div class="section_2 flex-col">
<div class="group_8 flex-row justify-between"> <div class="group_8 flex-row justify-between">
<img class="label_3" <img class="label_3" src="@/assets/cooperation/image_1.png" />
src="@/assets/cooperation/image_1.png"/>
<span class="text_11">核心优势</span> <span class="text_11">核心优势</span>
</div> </div>
<div class="group_9 flex-row justify-between"> <div class="group_9 flex-row justify-between">
<div class="image-text_4 flex-row"> <div class="image-text_4 flex-row">
<div class="image-text_5 flex-row justify-between"> <div class="image-text_5 flex-row justify-between">
<img class="image_11" <img class="image_11" src="@/assets/cooperation/image_2.png" />
src="@/assets/cooperation/image_2.png"/>
<span <span
class="paragraph_2">永久产权：设备归购买方所有，无后续租金压力，长期收益最大化。<br/>高利润回报：单次服务收费500-2000元（视项目而定），按日均5客测算，年营收可达90万+，回本周期约1.5年。</span> class="paragraph_2">永久产权：设备归购买方所有，无后续租金压力，长期收益最大化。<br />高利润回报：单次服务收费500-2000元（视项目而定），按日均5客测算，年营收可达90万+，回本周期约1.5年。</span>
</div> </div>
<img class="image_12" <img class="image_12" src="@/assets/cooperation/image_3.png" />
src="@/assets/cooperation/image_3.png"/>
</div> </div>
<div class="image-text_6 flex-row justify-between"> <div class="image-text_6 flex-row justify-between">
<img class="image_13" <img class="image_13" src="@/assets/cooperation/image_4.png" />
src="@/assets/cooperation/image_4.png"/>
<span class="text-group_4">增值服务溢价：可搭配健康管理套餐（如检测+调理+跟踪服务），提升客单价30%以上。</span> <span class="text-group_4">增值服务溢价：可搭配健康管理套餐（如检测+调理+跟踪服务），提升客单价30%以上。</span>
</div> </div>
</div> </div>
...@@ -80,18 +71,15 @@ ...@@ -80,18 +71,15 @@
<div class="box_6 flex-row"> <div class="box_6 flex-row">
<div class="section_3 flex-col"> <div class="section_3 flex-col">
<div class="block_1 flex-row justify-between"> <div class="block_1 flex-row justify-between">
<img class="label_4" <img class="label_4" src="@/assets/cooperation/image_5.png" />
src="@/assets/cooperation/image_5.png"/>
<span class="text_12">政策支持</span> <span class="text_12">政策支持</span>
</div> </div>
<div class="block_2 flex-row"> <div class="block_2 flex-row">
<div class="image-text_7 flex-row justify-between"> <div class="image-text_7 flex-row justify-between">
<img class="image_14" <img class="image_14" src="@/assets/cooperation/image_6.png" />
src="@/assets/cooperation/image_6.png"/>
<span class="text-group_5">采购5台以上享9折优惠，赠送AI健康管理系统</span> <span class="text-group_5">采购5台以上享9折优惠，赠送AI健康管理系统</span>
</div> </div>
<img class="image_15" <img class="image_15" src="@/assets/cooperation/image_7.png" />
src="@/assets/cooperation/image_7.png"/>
<span class="text_13">免费提供市场推广方案及标准化运营培训</span> <span class="text_13">免费提供市场推广方案及标准化运营培训</span>
</div> </div>
</div> </div>
...@@ -118,7 +106,7 @@ export default { ...@@ -118,7 +106,7 @@ export default {
methods: {}, methods: {},
}; };
</script> </script>
<style src="./common.css"/> <style src="./common.css" />
<style scoped> <style scoped>
.page { .page {
position: relative; position: relative;
...@@ -127,8 +115,7 @@ export default { ...@@ -127,8 +115,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.group_5 { .group_5 {}
}
.box_2 { .box_2 {
width: 85.42vw; width: 85.42vw;
......
src/views/Product.vue
...@@ -150,7 +150,7 @@ const goToContact = () => { ...@@ -150,7 +150,7 @@ const goToContact = () => {
.page { .page {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 380vw; height: 385vw;
overflow: hidden; overflow: hidden;
} }
......
src/views/Serve.vue
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
.page { .page {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 230vw; height: 235vw;
overflow: hidden; overflow: hidden;
} }
......
src/views/brand.vue
<template> <template>
<div class="page flex-col"> <div class="page flex-col">
<SecondHeader :title="'COOPERATION'" :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{ <SecondHeader :title="'COOPERATION'" :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{
name: '品牌介绍', name: '产品介绍',
url: '/brand', url: '/brand',
isSelect: true isSelect: true
}]" /> }]" />
......
src/views/common.css
...@@ -25,15 +25,6 @@ button:active { ...@@ -25,15 +25,6 @@ button:active {
opacity: 0.6; opacity: 0.6;
} }
.van-nav-bar__left:active,
.van-nav-bar__right:active {
opacity: 1;
}
[class*='van-']::after {
border-bottom: 0;
}
.flex-col { .flex-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/views/contact-us.vue
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</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="45vw" 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>
...@@ -113,39 +113,13 @@ ...@@ -113,39 +113,13 @@
</template> </template>
<script setup> <script setup>
import SecondHeader from '../components/second_header.vue' import SecondHeader from '../components/second_header.vue'
import {ref, computed, onMounted, onUnmounted} from "vue"; import {ref} from "vue";
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import bgHeaderUrl from '@/assets/contactUs/BC.png' import bgHeaderUrl from '@/assets/contactUs/BC.png'
const dialogVisible = ref(false) const dialogVisible = ref(false)
const loading = ref(false) const loading = ref(false)
// 响应式dialog宽度
const windowWidth = ref(window.innerWidth)
const dialogWidth = computed(() => {
if (windowWidth.value <= 480) {
return '90vw'
} else if (windowWidth.value <= 768) {
return '90vw'
} else {
return '45vw'
}
})
// 监听窗口大小变化
const handleResize = () => {
windowWidth.value = window.innerWidth
}
onMounted(() => {
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
// 表单数据 // 表单数据
const form = ref({ const form = ref({
title: '', title: '',
...@@ -705,118 +679,6 @@ const jobList = ref([{ ...@@ -705,118 +679,6 @@ const jobList = ref([{
width: 100% !important; width: 100% !important;
} }
/* 只优化表单部分的移动端适配 */
@media (max-width: 768px) {
.block_7 {
width: 85vw;
margin: 15px auto 0;
flex-direction: column;
gap: 15px;
padding: 0 5vw;
box-sizing: border-box;
}
.box_10 {
width: 100%;
height: 45px;
max-width: 100%;
}
.box_10 >>> .el-select__wrapper {
height: 45px;
width: 100% !important;
max-width: 100%;
}
.box_10 >>> .el-input__wrapper {
height: 45px;
width: 100% !important;
max-width: 100%;
}
.block_12 {
width: 85vw !important;
margin: 15px auto 0 !important;
padding: 0 5vw;
box-sizing: border-box;
}
.block_13 {
width: 85vw !important;
margin: 15px auto 0 !important;
padding: 0 5vw;
box-sizing: border-box;
}
.text-wrapper_11 {
width: 100% !important;
max-width: 100%;
height: 45px !important;
}
.text_34 {
font-size: 3.8vw !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 480px) {
.block_7 {
width: 90vw;
margin: 10px auto 0;
gap: 10px;
padding: 0 5vw;
box-sizing: border-box;
}
.box_10 {
height: 40px;
width: 100%;
max-width: 100%;
}
.box_10 >>> .el-select__wrapper {
height: 40px;
width: 100% !important;
max-width: 100%;
}
.box_10 >>> .el-input__wrapper {
height: 40px;
width: 100% !important;
max-width: 100%;
}
.block_12 {
width: 90vw !important;
margin: 10px auto 0 !important;
padding: 0 5vw;
box-sizing: border-box;
}
.block_13 {
width: 90vw !important;
margin: 15px auto 0;
padding: 0 5vw;
box-sizing: border-box;
}
.text-wrapper_11 {
width: 100% !important;
max-width: 100%;
height: 40px !important;
}
.text_34 {
font-size: 3.5vw !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.block_12 { .block_12 {
width: 72.87vw; width: 72.87vw;
margin: 1.04vw 0 5vw 13.54vw; margin: 1.04vw 0 5vw 13.54vw;
...@@ -948,131 +810,4 @@ const jobList = ref([{ ...@@ -948,131 +810,4 @@ const jobList = ref([{
font-family: OPPOSans-M; font-family: OPPOSans-M;
font-weight: 500; font-weight: 500;
} }
} }</style>
\ No newline at end of file
/* 手机端dialog适配 */
@media (max-width: 768px) {
.dialog {
.dialog_section_1 {
width: 85vw !important;
height: auto !important;
padding: 5vw !important;
margin-top: -3vw;
}
.dialog_image-wrapper_1 {
width: 85vw !important;
}
.dialog——label_1 {
width: 6vw !important;
height: 6vw !important;
}
.dialog_box_2 {
width: 15vw !important;
height: 15vw !important;
}
.dialog_box_3 {
width: 75vw !important;
height: auto !important;
}
.dialog_text-group_1 {
width: 75vw !important;
height: auto !important;
}
.dialog_text_1 {
font-size: 5vw !important;
white-space: normal !important;
margin: 3vw 0 !important;
}
.dialog_text_2 {
font-size: 3.5vw !important;
line-height: 5vw !important;
}
.dialog_box_4 {
width: 70vw !important;
height: auto !important;
margin-top: 8vw !important;
padding-top: 8vw !important;
}
.dialog_text-wrapper_1 {
width: 70vw !important;
white-space: normal !important;
}
.dialog_text_3 {
font-size: 3.5vw !important;
}
.dialog_text_4 {
font-size: 3.5vw !important;
}
}
}
@media (max-width: 480px) {
.dialog {
.dialog_section_1 {
width: 90vw !important;
padding: 6vw !important;
}
.dialog_image-wrapper_1 {
width: 90vw !important;
}
.dialog——label_1 {
width: 7vw !important;
height: 7vw !important;
}
.dialog_box_2 {
width: 18vw !important;
height: 18vw !important;
}
.dialog_box_3 {
width: 80vw !important;
}
.dialog_text-group_1 {
width: 80vw !important;
}
.dialog_text_1 {
font-size: 5.5vw !important;
margin: 4vw 0 !important;
}
.dialog_text_2 {
font-size: 4vw !important;
line-height: 6vw !important;
}
.dialog_box_4 {
width: 75vw !important;
margin-top: 10vw !important;
padding-top: 10vw !important;
}
.dialog_text-wrapper_1 {
width: 75vw !important;
}
.dialog_text_3 {
font-size: 4vw !important;
}
.dialog_text_4 {
font-size: 4vw !important;
}
}
}
</style>
\ No newline at end of file
src/views/homepage.vue
...@@ -20,10 +20,10 @@ ...@@ -20,10 +20,10 @@
<!-- 轮播控制按钮 --> <!-- 轮播控制按钮 -->
<div class="section_9 flex-row justify-center"> <div class="section_9 flex-row justify-center">
<div style="width: 50%;" class="align-center justify-center" @click="prevSlide"> <div style="width: 50%;" class="align-center justify-center" @click="prevSlide">
<img class="image_7 " src="@/assets/homepage/left.png"/> <img class="image_7 " src="@/assets/homepage/left.png" />
</div> </div>
<div style="width: 50%;" class="align-center justify-center" @click="nextSlide"> <div style="width: 50%;" class="align-center justify-center" @click="nextSlide">
<img class="image_7" src="@/assets/homepage/right.png"/> <img class="image_7" src="@/assets/homepage/right.png" />
</div> </div>
</div> </div>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<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>
...@@ -58,9 +58,9 @@ ...@@ -58,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>
...@@ -71,20 +71,19 @@ ...@@ -71,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>
...@@ -103,7 +102,7 @@ ...@@ -103,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">
...@@ -144,7 +143,7 @@ ...@@ -144,7 +143,7 @@
<div class="box_11 flex-row"> <div class="box_11 flex-row">
<div class="image-text_1 flex-row justify-between" @click="goToBrand" style="cursor: pointer;"> <div class="image-text_1 flex-row justify-between" @click="goToBrand" style="cursor: pointer;">
<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>
...@@ -155,32 +154,31 @@ ...@@ -155,32 +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" @click="goToCooperation" style="cursor: pointer;"> <div class="group_5 flex-col" @click="goToCooperation" style="cursor: pointer;">
<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" src="@/assets/homepage/hand.png"/> <img class="image_18" 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" @click="goToLease" style="cursor: pointer;"> <div class="group_9 flex-col" @click="goToLease" style="cursor: pointer;">
<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" src="@/assets/homepage/book.png"/> <img class="image_19" 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>
...@@ -191,15 +189,14 @@ ...@@ -191,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">
...@@ -211,9 +208,9 @@ ...@@ -211,9 +208,9 @@
</div> </div>
</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="45vw" 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>
...@@ -244,9 +241,9 @@ import hdIcon from '@/assets/homepage/hd.png' ...@@ -244,9 +241,9 @@ import hdIcon from '@/assets/homepage/hd.png'
import bg1 from '@/assets/homepage/BC.png' import bg1 from '@/assets/homepage/BC.png'
import bg2 from '@/assets/homepage/banner2.jpg' import bg2 from '@/assets/homepage/banner2.jpg'
import bg3 from '@/assets/homepage/banner3.jpg' import bg3 from '@/assets/homepage/banner3.jpg'
import {ref, computed, onMounted, onUnmounted} from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import {ElMessage} from "element-plus"; import { ElMessage } from "element-plus";
import {useRouter} from "vue-router"; import { useRouter } from "vue-router";
// 轮播图数据 // 轮播图数据
const currentSlide = ref(1) // 从第二张开始，因为第一张是克隆的最后一张 const currentSlide = ref(1) // 从第二张开始，因为第一张是克隆的最后一张
...@@ -363,31 +360,11 @@ const form = ref({ ...@@ -363,31 +360,11 @@ const form = ref({
const dialogVisible = ref(false) const dialogVisible = ref(false)
// 响应式dialog宽度
const windowWidth = ref(window.innerWidth)
const dialogWidth = computed(() => {
if (windowWidth.value <= 480) {
return '90vw'
} else if (windowWidth.value <= 768) {
return '90vw'
} else {
return '45vw'
}
})
// 监听窗口大小变化
const handleResize = () => {
windowWidth.value = window.innerWidth
}
onMounted(() => { onMounted(() => {
window.addEventListener('resize', handleResize)
startAutoPlay() // 启动自动轮播 startAutoPlay() // 启动自动轮播
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize)
stopAutoPlay() // 停止自动轮播 stopAutoPlay() // 停止自动轮播
}) })
...@@ -398,7 +375,7 @@ const loopData0 = ref([{ ...@@ -398,7 +375,7 @@ 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: '技术定位',
...@@ -407,8 +384,8 @@ const loopData0 = ref([{ ...@@ -407,8 +384,8 @@ const loopData0 = ref([{
lanhuimage0: lbxIcon, lanhuimage0: lbxIcon,
}, },
slot2: 2, slot2: 2,
}, },
{ {
lanhuBg0: `url(${content3}) center no-repeat`, lanhuBg0: `url(${content3}) center no-repeat`,
lanhutext0: 'CELL CHARGING<br/>STATION', lanhutext0: 'CELL CHARGING<br/>STATION',
lanhutext1: '人体细胞的无限充电站', lanhutext1: '人体细胞的无限充电站',
...@@ -417,7 +394,7 @@ const loopData0 = ref([{ ...@@ -417,7 +394,7 @@ const loopData0 = ref([{
lanhuimage0: hdIcon, lanhuimage0: hdIcon,
}, },
slot2: 2, slot2: 2,
}, },
]) ])
...@@ -508,12 +485,12 @@ const resetForm = () => { ...@@ -508,12 +485,12 @@ 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;
width: 100vw; width: 100vw;
height: 320vw; height: 330vw;
overflow: hidden; overflow: hidden;
} }
...@@ -1646,429 +1623,11 @@ const resetForm = () => { ...@@ -1646,429 +1623,11 @@ const resetForm = () => {
height: auto !important; 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;
height: 23.96vw;
margin: 8vw 0 0 4.06vw;
}
.homepage-container {
height: auto !important;
min-height: 400vw;
}
.box_15 {
position: relative !important;
width: 90vw !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 5vw auto 10vw !important;
padding: 3vw 5vw !important;
box-sizing: border-box;
z-index: 100;
}
.group_10 {
width: 100% !important;
height: auto !important;
margin: 0 0 3vw 0 !important;
}
.group_11 {
width: 100% !important;
height: auto !important;
margin: 15px 0 0 0 !important;
flex-direction: column !important;
gap: 15px;
justify-content: flex-start !important;
align-items: stretch !important;
}
.text-wrapper_7,
.text-wrapper_8,
.text-wrapper_9 {
width: 100% !important;
height: 45px !important;
max-width: 100%;
margin-left: 0 !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
height: 45px !important;
width: 100% !important;
}
.text-wrapper_10 {
width: 100% !important;
height: auto !important;
margin: 15px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
width: 100% !important;
min-height: 100px !important;
}
.group_12 {
width: 100% !important;
height: auto !important;
margin: 15px 0 5vw 0 !important;
flex-direction: column !important;
gap: 15px;
justify-content: flex-start !important;
align-items: stretch !important;
}
.text_45 {
width: 100%;
text-align: center;
font-size: 2.5vw;
white-space: normal;
margin-top: 0;
}
.text-wrapper_11 {
width: 100% !important;
max-width: 100%;
height: 45px !important;
margin-left: 0 !important;
}
.text_46 {
font-size: 3.8vw !important;
}
}
@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: 12vw !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;
}
.box_15 {
position: relative !important;
width: 95vw !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 5vw auto 10vw !important;
padding: 3vw 2.5vw !important;
box-sizing: border-box;
z-index: 100;
}
.group_10 {
margin: 0 0 2vw 0 !important;
}
.group_11 {
margin: 10px 0 0 0 !important;
gap: 10px;
}
.text-wrapper_7,
.text-wrapper_8,
.text-wrapper_9 {
height: 40px !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
height: 40px !important;
}
.text-wrapper_10 {
margin: 10px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
min-height: 80px !important;
}
.group_12 {
margin: 10px 0 5vw 0 !important;
gap: 10px;
}
.text_45 {
font-size: 3vw;
}
.text-wrapper_11 {
height: 40px !important;
}
.text_46 {
font-size: 3.5vw !important;
}
}
/* Android设备竖屏特殊适配 */
@media screen and (max-width: 768px) and (orientation: portrait) {
.homepage-container {
position: relative;
width: 100vw;
height: auto;
min-height: 400vw;
overflow: visible;
}
.box_15 {
position: relative !important;
width: 90vw !important;
height: auto !important;
top: auto !important;
left: auto !important;
margin: 5vw auto 15vw !important;
padding: 3vw 5vw !important;
box-sizing: border-box;
z-index: 10;
}
.group_11 {
flex-direction: column !important;
align-items: stretch !important;
width: 100%;
margin: 15px 0 0 0;
gap: 15px;
}
.text-wrapper_7,
.text-wrapper_8,
.text-wrapper_9 {
width: 100% !important;
height: 45px !important;
max-width: 100%;
margin-left: 0 !important;
}
.text-wrapper_7 >>> .el-input__wrapper,
.text-wrapper_8 >>> .el-input__wrapper,
.text-wrapper_9 >>> .el-input__wrapper {
height: 45px !important;
width: 100% !important;
}
.text-wrapper_10 {
width: 100% !important;
height: auto !important;
margin: 15px 0 !important;
}
.text-wrapper_10 >>> .el-textarea__inner {
width: 100% !important; width: 100% !important;
min-height: 100px !important; min-height: 100px !important;
}
.group_12 {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
margin: 15px 0 5vw 0 !important;
gap: 15px;
}
.text-wrapper_11 {
width: 100% !important;
max-width: 100%;
height: 45px !important;
margin-left: 0 !important;
}
} }
.dialog { .dialog {
.dialog_section_1 { .dialog_section_1 {
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
...@@ -2157,130 +1716,4 @@ const resetForm = () => { ...@@ -2157,130 +1716,4 @@ const resetForm = () => {
font-weight: 500; font-weight: 500;
} }
} }
/* 手机端dialog适配 */
@media (max-width: 768px) {
.dialog {
.dialog_section_1 {
width: 85vw !important;
height: auto !important;
padding: 5vw !important;
margin-top: -3vw;
}
.dialog_image-wrapper_1 {
width: 85vw !important;
}
.dialog——label_1 {
width: 6vw !important;
height: 6vw !important;
}
.dialog_box_2 {
width: 15vw !important;
height: 15vw !important;
}
.dialog_box_3 {
width: 75vw !important;
height: auto !important;
}
.dialog_text-group_1 {
width: 75vw !important;
height: auto !important;
}
.dialog_text_1 {
font-size: 5vw !important;
white-space: normal !important;
margin: 3vw 0 !important;
}
.dialog_text_2 {
font-size: 3.5vw !important;
line-height: 5vw !important;
}
.dialog_box_4 {
width: 70vw !important;
height: auto !important;
margin-top: 8vw !important;
padding-top: 8vw !important;
}
.dialog_text-wrapper_1 {
width: 70vw !important;
white-space: normal !important;
}
.dialog_text_3 {
font-size: 3.5vw !important;
}
.dialog_text_4 {
font-size: 3.5vw !important;
}
}
}
@media (max-width: 480px) {
.dialog {
.dialog_section_1 {
width: 90vw !important;
padding: 6vw !important;
}
.dialog_image-wrapper_1 {
width: 90vw !important;
}
.dialog——label_1 {
width: 7vw !important;
height: 7vw !important;
}
.dialog_box_2 {
width: 18vw !important;
height: 18vw !important;
}
.dialog_box_3 {
width: 80vw !important;
}
.dialog_text-group_1 {
width: 80vw !important;
}
.dialog_text_1 {
font-size: 5.5vw !important;
margin: 4vw 0 !important;
}
.dialog_text_2 {
font-size: 4vw !important;
line-height: 6vw !important;
}
.dialog_box_4 {
width: 75vw !important;
margin-top: 10vw !important;
padding-top: 10vw !important;
}
.dialog_text-wrapper_1 {
width: 75vw !important;
}
.dialog_text_3 {
font-size: 4vw !important;
}
.dialog_text_4 {
font-size: 4vw !important;
}
}
}
</style> </style>
\ No newline at end of file
src/views/lease.vue
<template> <template>
<div class="page flex-col"> <div class="page flex-col">
<SecondHeader :title="'COOPERATION'" <SecondHeader :title="'COOPERATION'" :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{
:bcUrl="bgHeaderUrl" :desc="'合作优势'" name: '设备购买模式',
:btn-group="[{ url: '/cooperation',
name:'设备购买模式', isSelect: false
url:'/cooperation', }, {
isSelect:false name: '设备租赁模式',
},{ url: '/lease',
name:'设备租赁模式', isSelect: true
url:'/lease', }, {
isSelect:true name: '运营商分级',
},{ url: '/operator',
name:'运营商分级', isSelect: false
url:'/operator', }, {
isSelect:false name: '代理商体系',
},{ url: '/agent',
name:'代理商体系', isSelect: false
url:'/agent', }]" />
isSelect:false
}]"/>
<div class="section_2 flex-col"> <div class="section_2 flex-col">
<div class="group_3 flex-row"> <div class="group_3 flex-row">
<div class="box_3 flex-col"> <div class="box_3 flex-col">
<span class="text_8">设备租赁模式</span> <span class="text_8">设备租赁模式</span>
<span class="text_9">适合低成本试水市场的创业者！</span> <span class="text_9">适合低成本试水市场的创业者！</span>
<img class="image_5" src="@/assets/lease/icon_1.png"/> <img class="image_5" src="@/assets/lease/icon_1.png" />
</div> </div>
<img class="image_6" src="@/assets/lease/icon_2.png"/> <img class="image_6" src="@/assets/lease/icon_2.png" />
<img class="image_7" src="@/assets/lease/icon_3.png"/> <img class="image_7" src="@/assets/lease/icon_3.png" />
</div> </div>
<div class="group_4 flex-row"> <div class="group_4 flex-row">
<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">
<img class="label_2" <img class="label_2" src="@/assets/lease/icon_4.png" />
src="@/assets/lease/icon_4.png"/>
<span class="text_10">适合对象</span> <span class="text_10">适合对象</span>
</div> </div>
<div class="group_7 flex-row justify-between"> <div class="group_7 flex-row justify-between">
<div class="image-text_2 flex-row"> <div class="image-text_2 flex-row">
<div class="image-text_3 flex-row justify-between"> <div class="image-text_3 flex-row justify-between">
<img class="image_8" <img class="image_8" src="@/assets/lease/icon_5.png" />
src="@/assets/lease/icon_5.png"/> <span class="paragraph_2">初创健康机构：健身工作室、美容院等，降低初期投入风险。<br />想试运营验证市场需求的投资者。</span>
<span class="paragraph_2">初创健康机构：健身工作室、美容院等，降低初期投入风险。<br/>想试运营验证市场需求的投资者。</span>
</div> </div>
<img class="image_9" <img class="image_9" src="@/assets/lease/icon_6.png" />
src="@/assets/lease/icon_6.png"/>
</div> </div>
<div class="image-text_4 flex-row justify-between"> <div class="image-text_4 flex-row justify-between">
<img class="image_10" <img class="image_10" src="@/assets/lease/icon_7.png" />
src="@/assets/lease/icon_7.png"/>
<span class="text-group_2">轻资产运营理念的支持者，保险或保健品团队。</span> <span class="text-group_2">轻资产运营理念的支持者，保险或保健品团队。</span>
</div> </div>
</div> </div>
...@@ -57,24 +51,19 @@ ...@@ -57,24 +51,19 @@
<div class="group_8 flex-row"> <div class="group_8 flex-row">
<div class="section_3 flex-col"> <div class="section_3 flex-col">
<div class="group_9 flex-row justify-between"> <div class="group_9 flex-row justify-between">
<img class="label_3" <img class="label_3" src="@/assets/lease/icon_8.png" />
src="@/assets/lease/icon_8.png"/>
<span class="text_11">核心优势</span> <span class="text_11">核心优势</span>
</div> </div>
<div class="group_10 flex-row justify-between"> <div class="group_10 flex-row justify-between">
<div class="image-text_5 flex-row justify-between"> <div class="image-text_5 flex-row justify-between">
<div class="image-wrapper_2 flex-col justify-between"> <div class="image-wrapper_2 flex-col justify-between">
<img class="image_11" <img class="image_11" src="@/assets/lease/icon_9.png" />
src="@/assets/lease/icon_9.png"/> <img class="image_12" src="@/assets/lease/icon_10.png" />
<img class="image_12"
src="@/assets/lease/icon_10.png"/>
</div> </div>
<span <span class="text-group_3">大额购置成本：仅需支付押金+月租，即可启动运营，资金占用极低。<br />灵活退出机制：合约期满可退租或转购买（押金抵扣设备款）。</span>
class="text-group_3">大额购置成本：仅需支付押金+月租，即可启动运营，资金占用极低。<br/>灵活退出机制：合约期满可退租或转购买（押金抵扣设备款）。</span>
</div> </div>
<div class="image-text_6 flex-row justify-between"> <div class="image-text_6 flex-row justify-between">
<img class="image_13" <img class="image_13" src="@/assets/lease/icon_11.png" />
src="@/assets/lease/icon_11.png"/>
<span class="text-group_4">快速盈利验证：按单次收费300-800元，月均60客即可覆盖租金，剩余均为纯利。</span> <span class="text-group_4">快速盈利验证：按单次收费300-800元，月均60客即可覆盖租金，剩余均为纯利。</span>
</div> </div>
</div> </div>
...@@ -83,17 +72,14 @@ ...@@ -83,17 +72,14 @@
<div class="group_11 flex-row"> <div class="group_11 flex-row">
<div class="group_12 flex-col"> <div class="group_12 flex-col">
<div class="section_4 flex-row justify-between"> <div class="section_4 flex-row justify-between">
<img class="label_4" <img class="label_4" src="@/assets/lease/icon_12.png" />
src="@/assets/lease/icon_12.png"/>
<span class="text_12">政策支持</span> <span class="text_12">政策支持</span>
</div> </div>
<div class="section_5 flex-row"> <div class="section_5 flex-row">
<img class="image_14" <img class="image_14" src="@/assets/lease/icon_13.png" />
src="@/assets/lease/icon_13.png"/>
<span class="text_13">首月免租金（限前50名签约伙伴）。</span> <span class="text_13">首月免租金（限前50名签约伙伴）。</span>
<div class="image-text_7 flex-row justify-between"> <div class="image-text_7 flex-row justify-between">
<img class="image_15" <img class="image_15" src="@/assets/lease/icon_14.png" />
src="@/assets/lease/icon_14.png"/>
<span class="text-group_5">提供客户引流支持（线上+线下推广模板）。</span> <span class="text-group_5">提供客户引流支持（线上+线下推广模板）。</span>
</div> </div>
</div> </div>
...@@ -121,7 +107,7 @@ export default { ...@@ -121,7 +107,7 @@ export default {
methods: {}, methods: {},
}; };
</script> </script>
<style src="./common.css"/> <style src="./common.css" />
<style scoped> <style scoped>
.page { .page {
position: relative; position: relative;
......
src/views/operator.vue
<template> <template>
<div class="page flex-col"> <div class="page flex-col">
<SecondHeader :title="'COOPERATION'" <SecondHeader :title="'COOPERATION'" :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{
:bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{ name: '设备购买模式',
name:'设备购买模式', url: '/cooperation',
url:'/cooperation', isSelect: false
isSelect:false }, {
},{ name: '设备租赁模式',
name:'设备租赁模式', url: '/lease',
url:'/lease', isSelect: false
isSelect:false }, {
},{ name: '运营商分级',
name:'运营商分级', url: '/operator',
url:'/operator', isSelect: true
isSelect:true }, {
},{ name: '代理商体系',
name:'代理商体系', url: '/agent',
url:'/agent', isSelect: false
isSelect:false }]" />
}]"/>
<div class="box_4 flex-col"> <div class="box_4 flex-col">
<div class="box_5 flex-row justify-between"> <div class="box_5 flex-row justify-between">
<div class="group_2 flex-col"> <div class="group_2 flex-col">
<div class="block_1 flex-row justify-between"> <div class="block_1 flex-row justify-between">
<span class="text_8">运营商分级</span> <span class="text_8">运营商分级</span>
<img class="image_4" <img class="image_4" src="@/assets/operator/icon_1.png" />
src="@/assets/operator/icon_1.png"/>
</div> </div>
<span class="text_9">越早加入，收益越大</span> <span class="text_9">越早加入，收益越大</span>
<div class="block_2 flex-col"> <div class="block_2 flex-col">
<div class="image-wrapper_2 flex-row"> <div class="image-wrapper_2 flex-row">
<img class="image_5" :src="item.lanhuimage0" v-for="(item, index) in loopData0" <img class="image_5" :src="item.lanhuimage0" v-for="(item, index) in loopData0" :key="index" />
:key="index"/>
</div> </div>
<div class="list_1 flex-row"> <div class="list_1 flex-row">
<div class="text-group_2 flex-col justify-between" v-for="(item, index) in loopData1" <div class="text-group_2 flex-col justify-between" v-for="(item, index) in loopData1" :key="index">
:key="index">
<span class="text_10" v-html="item.lanhutext0"></span> <span class="text_10" v-html="item.lanhutext0"></span>
<span class="text_11" v-html="item.lanhutext1"></span> <span class="text_11" v-html="item.lanhutext1"></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<img class="image_6" src="@/assets/operator/main_image.png"/> <img class="image_6" src="@/assets/operator/main_image.png" />
</div> </div>
</div> </div>
</div> </div>
...@@ -99,12 +95,12 @@ export default { ...@@ -99,12 +95,12 @@ export default {
methods: {}, methods: {},
}; };
</script> </script>
<style src="./common.css"/> <style src="./common.css" />
<style scoped> <style scoped>
.page { .page {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 105vw; height: 110vw;
overflow: hidden; overflow: hidden;
} }
......
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