Skip to content

W
wanyou_website
Commit 632e3839 by yang
Options

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

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