Skip to content

W
wanyou_website
Commit 632e3839 by yang
Options

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

parent 72bdfc10
Showing with 201 additions and 594 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/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