Skip to content

W
wanyou_website
Commit 3a35f8a7 by yang
Options

提交页面的修改

parent 9ffe9169
Showing with 1440 additions and 2905 deletions
.idea/.gitignore 0 → 100644
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
.idea/modules.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/wanyou_website.iml" filepath="$PROJECT_DIR$/.idea/wanyou_website.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
\ No newline at end of file
.idea/wanyou_website.iml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
index.html
......@@ -2,20 +2,24 @@
<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"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>企业官网</title>
<style>
::-webkit-scrollbar {
display: none;
}
* {
--el-border-radius-base: 8px
}
</style>
</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
<template>
<footer class="footer-container">
<div class="group_5 flex-row">
<div class="section_2 flex-col">
<span class="text_40">公司备案信息</span>
<span class="text_41">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span>
<div class="text-wrapper_11 flex-row justify-between">
<span class="text_42">联系我们</span>
<span class="text_43">导航</span>
<div class="flex-row">
<div class="footer_box flex-col">
<span class="footer_title">公司备案信息</span>
<br>
<span
class="text_44">经营许可证编号：川B2-20240967&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案/许可证号：川ICP备2024173426号</span>
<br>
<br>
<br>
<div class="flex-row">
<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;导航</span>
</div>
<div class="text-wrapper_12 flex-row justify-between">
<br>
<div class=" flex-row">
<span class="text_44">客服热线：400-888-9999</span>
<span class="text_45">企业总部地址：四川省成都市天府新区正兴街道上和领誉</span>
<span class="text_44">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业总部地址：四川省成都市天府新区正兴街道上和领誉</span>
</div>
</div>
<span class="paragraph_6">微信扫一扫<br />关注阳生万物微信</span>
<span class="paragraph_6">微信扫一扫<br/>关注阳生万物微信</span>
<img class="image_20"
src="https://lanhu-oss-proxy.lanhuapp.com/cef61f20ba097d29b200adb4299619aa" />
src="@/assets/footer/qrCode.png"/>
<img class="image_21"
src="https://lanhu-oss-proxy.lanhuapp.com/8af8fa0cbc04b171ff65e21f4116c917" />
src="@/assets/footer/footer.png"/>
</div>
</footer>
</template>
......@@ -35,81 +41,29 @@ export default {
top: 0;
width: 100vw;
height: 18.23vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/c2cb5daeef69f21f1d202a4cca135e34) 100% no-repeat;
background: url("@/assets/footer/bc.png") no-repeat center;
background-size: 100% 100%;
justify-content: flex-center;
}
.section_2 {
.footer_box {
width: 34.85vw;
height: 8.91vw;
margin: 4.68vw 0 0 13.48vw;
margin: 4vw 0 0 13.5vw;
}
.text_40 {
width: 6.88vw;
height: 1.15vw;
.footer_title {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-left: 0.06vw;
}
.text_41 {
width: 30.11vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.15vw;
}
.text-wrapper_11 {
width: 16.25vw;
height: 1.15vw;
margin: 2.65vw 0 0 0.1vw;
}
.text_42 {
width: 4.54vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text_43 {
width: 2.3vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text-wrapper_12 {
width: 34.8vw;
height: 0.84vw;
margin: 1.14vw 0 0 0.05vw;
}
.text_44 {
width: 9.8vw;
......@@ -119,19 +73,8 @@ export default {
font-size: 0.83vw;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text_45 {
width: 20.84vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.paragraph_6 {
width: 7.5vw;
......
src/components/second_header.vue 0 → 100644
<template>
<div class="pageHeader flex-col justify-end" :style="{
background: `url(${bcUrl}) 100% no-repeat`,
backgroundSize: '100% 100%'
}">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="flex-row">
<div class="flex-col pageBox">
<div class="flex-col">
<span class="title">{{title}}</span>
<span class="desc">{{desc}}</span>
</div>
<img class="line" src="@/assets/common/line.png" />
</div>
<span class="secondTitle">{{secondTitle}}</span>
</div>
<div class="page_btn_box flex-row">
<div class="box_group_left flex-row">
<div v-for="item in btnGroup">
<div class=" align-center justify-around flex-col" @click="toPage(item)"
:class="item.isSelect == true ? 'item_select':'item_noselect'">
<span class="itemName">{{item.name}}</span>
</div>
</div>
</div>
<div class="box_group_right justify-around align-center">
<div>
<span class="home_title">HOME</span>
<img src="@/assets/common/home.png" />
</div>
</div>
</div>
</div>
</template>
<script setup>
import HeaderNav from './HeaderNav.vue'
import pageBtnGroupVue from './page_btn_group.vue';
import {
useRouter
} from 'vue-router/dist/vue-router';
const props = defineProps({
title: '',
desc: '',
bcUrl: '',
secondTitle: '',
btnGroup: []
})
const router = useRouter()
const toPage = (item) => {
router.push(item.url)
}
</script>
<style scoped>
.pageHeader {
/* height: calc(100vw / 16 * 9); */
height: 100vh;
width: 100vw;
}
.pageBox {
width: 36vw;
margin-left: 14vw;
}
.secondTitle {
width: 36vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-R;
position: relative;
top: 1vw;
}
.title {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 4vw;
font-family: Gilroy-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
}
.desc {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.6vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
}
.line {
width: 0.27vw;
height: 3.vw;
margin-left: 0.2vw;
margin-top: 1vw;
}
.page_btn_box {
width: 86vw;
height: 5.2vw;
margin: 12.4vw 0 0 14vw;
background-color: #00C7DA;
background-size: 100% 100%;
}
.box_group_left {
width: 70vw;
}
.box_group_right {
width: 16vw;
height: 5.2vw;
}
.item_select {
height: 5.2vw;
background-color: #0052D9;
background-size: 100% 100%;
width: 18vw;
}
.item_noselect {
height: 5.2vw;
background-size: 100% 100%;
width: 18vw;
}
.itemName {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.6vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: center;
white-space: nowrap;
}
.home_title {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1vw;
font-family: Gilroy-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
margin-right: 1vw;
position: relative;
top: -0.1vw;
}
</style>
\ No newline at end of file
src/font/fonts.css
......@@ -2,7 +2,7 @@
/* 粗体 - Bold */
@font-face {
font-family: 'OPPOSans';
font-family: 'OPPOSans-B';
src: url('./OPPOSans/OPPOSans-B-2.ttf') format('truetype');
font-weight: 700;
/* Bold 对应 700 */
......@@ -12,7 +12,7 @@
/* 特粗 - Heavy */
@font-face {
font-family: 'OPPOSans';
font-family: 'OPPOSans-H';
src: url('./OPPOSans/OPPOSans-H-2.ttf') format('truetype');
font-weight: 900;
/* Heavy 对应 900 */
......@@ -22,7 +22,7 @@
/* 细体 - Light */
@font-face {
font-family: 'OPPOSans';
font-family: 'OPPOSans-L';
src: url('./OPPOSans/OPPOSans-L-2.ttf') format('truetype');
font-weight: 300;
/* Light 对应 300 */
......@@ -32,7 +32,7 @@
/* 中等 - Medium */
@font-face {
font-family: 'OPPOSans';
font-family: 'OPPOSans-M';
src: url('./OPPOSans/OPPOSans-M-2.ttf') format('truetype');
font-weight: 500;
/* Medium 对应 500 */
......@@ -42,7 +42,7 @@
/* 常规 - Regular */
@font-face {
font-family: 'OPPOSans';
font-family: 'OPPOSans-R';
src: url('./OPPOSans/OPPOSans-R-2.ttf') format('truetype');
font-weight: 400;
/* Regular 对应 400 */
......@@ -51,7 +51,6 @@
}
/* DINEngsbek - Regular */
@font-face {
font-family: 'DINEngsbek-Alternate';
......
src/router/index.js
......@@ -12,7 +12,6 @@ import operator from '@/views/operator.vue'
import agent from '@/views/agent.vue'
import certification from '@/views/certification.vue'
import contactUs from '@/views/contact-us.vue'
import tip from '@/views/tip.vue'
import brand from '@/views/brand.vue'
import homepage from '@/views/homepage.vue'
......@@ -49,12 +48,6 @@ const routes = [{
name: 'contact-us',
component: contactUs
},
// 其他页面路由
{
path: 'tip',
name: 'tip',
component: tip
},
{
path: 'agent',
name: 'agent',
......
src/views/Case.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="group_1 flex-row justify-end">
<!-- 导航栏已移到HeaderNav组件中 -->
<pageBtnGroupVue style="margin-top: 45.9vw;" :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'" :btn-group="[{
name:'品牌介绍',
url:'/Product',
isSelect:false
......@@ -17,8 +14,6 @@
url:'/serve',
isSelect:false
}]" />
<img class="image_5" src="https://lanhu-oss-proxy.lanhuapp.com/a6ee8311f404f2975899e93f5c7b965b" />
</div>
<div class="group_2 flex-col">
<div class="box_4 flex-row justify-between">
<div class="box_5 flex-col">
......@@ -175,17 +170,15 @@
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import SecondHeader from '../components/second_header.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......
src/views/Cooperation.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="group_1 flex-col">
<div class="group_2 flex-col justify-end">
<!-- 导航栏已移到HeaderNav组件中 -->
<div class="text-wrapper_1 flex-row justify-between">
<span class="text_2">cooperation</span>
<span class="paragraph_1">轻资产运营，高回报收益，共享万亿健康产业红利<br />合作模式&nbsp;|&nbsp;灵活选择，快速启动</span>
</div>
<div class="text-wrapper_2 flex-row">
<span class="text_3">合作优势</span>
</div>
<div class="image-wrapper_1 flex-row">
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/e7686206eed4ca67e1bdc497ab2bf39d" />
</div>
<div class="group_4 flex-row">
<pageBtnGroupVue style="margin-top: 0vw;margin-left: 0.5vw;" :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'" :btn-group="[{
name:'设备购买模式',
url:'/cooperation',
isSelect:true
......@@ -34,15 +18,13 @@
url:'/agent',
isSelect:false
}]" />
</div>
</div>
<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="https://lanhu-oss-proxy.lanhuapp.com/568f4c8fb4821973ead488538241d255" />
<img class="image_6" src="https://lanhu-oss-proxy.lanhuapp.com/568f4c8fb4821973ead488538241d255" />
</div>
<img class="image_7" src="https://lanhu-oss-proxy.lanhuapp.com/2d28e8ffea3257032bcc403011f1f2cf" />
<img class="image_8" src="https://lanhu-oss-proxy.lanhuapp.com/688a43b18deb112d0506b71edb0fdc2a" />
......@@ -117,20 +99,17 @@
<!-- 使用Footer组件替代重复的页脚代码 -->
<Footer />
</div>
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import SecondHeader from '../components/second_header.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......@@ -152,7 +131,6 @@
.group_1 {
position: relative;
width: 100vw;
height: 194.07vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/207a3c6f31a38b69fd78f7c87ca142e3) 100% no-repeat;
background-size: 100% 100%;
}
......
src/views/Product.vue
<template>
<div class="page flex-col">
<div class="group_1 flex-col">
<div class="block_1 flex-col justify-end">
<div class="block_3 flex-row">
<div class="text-group_1 flex-col justify-between">
<span class="text_2">PRODUCT</span>
<span class="text_3">自愈舱</span>
</div>
</div>
<div class="image-wrapper_1 flex-row">
<img class="image_2" src="@/assets/common/line.png" />
</div>
<pageBtnGroupVue :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'" :btn-group="[{
name:'品牌介绍',
url:'/Product',
isSelect:true
......@@ -25,7 +14,6 @@
url:'/serve',
isSelect:false
}]" />
</div>
<div class="block_6 flex-col">
<div class="block_7 flex-row justify-between">
<div class="group_2 flex-col">
......@@ -49,8 +37,7 @@
<span class="text_13">六维能量矩阵精准系统</span>
<div class="block_8 flex-row justify-between">
<div class="image-wrapper_2 flex-col">
<img class="label_2"
src="https://lanhu-oss-proxy.lanhuapp.com/5872f432dd0aed66485cac6fc0e428ee" />
<img class="label_2" src="https://lanhu-oss-proxy.lanhuapp.com/5872f432dd0aed66485cac6fc0e428ee" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_14">太赫兹波</span>
......@@ -64,8 +51,7 @@
</div>
<div class="block_10 flex-row justify-between">
<div class="image-wrapper_3 flex-col">
<img class="label_3"
src="https://lanhu-oss-proxy.lanhuapp.com/384b5a68b55c66267c049aa4ec30e380" />
<img class="label_3" src="https://lanhu-oss-proxy.lanhuapp.com/384b5a68b55c66267c049aa4ec30e380" />
</div>
<div class="text-group_4 flex-col justify-between">
<span class="text_16">交变磁场</span>
......@@ -84,8 +70,7 @@
</div>
<div class="block_12 flex-row justify-between">
<div class="image-wrapper_4 flex-col">
<img class="label_4"
src="https://lanhu-oss-proxy.lanhuapp.com/da0c4cf03164c19a464cc575013e5268" />
<img class="label_4" src="https://lanhu-oss-proxy.lanhuapp.com/da0c4cf03164c19a464cc575013e5268" />
</div>
<div class="text-group_5 flex-col justify-between">
<span class="text_21">远红外</span>
......@@ -103,8 +88,7 @@
</div>
<div class="block_14 flex-row justify-between">
<div class="image-wrapper_5 flex-col">
<img class="label_5"
src="https://lanhu-oss-proxy.lanhuapp.com/86e6d95f577e9638889d2ea14b032c30" />
<img class="label_5" src="https://lanhu-oss-proxy.lanhuapp.com/86e6d95f577e9638889d2ea14b032c30" />
</div>
<div class="text-group_6 flex-col justify-between">
<span class="text_25">热能量</span>
......@@ -118,8 +102,7 @@
</div>
<div class="block_16 flex-row justify-between">
<div class="image-wrapper_6 flex-col">
<img class="label_6"
src="https://lanhu-oss-proxy.lanhuapp.com/88231c6c1c355a70cb769c6617729970" />
<img class="label_6" src="https://lanhu-oss-proxy.lanhuapp.com/88231c6c1c355a70cb769c6617729970" />
</div>
<div class="text-group_7 flex-col justify-between">
<span class="text_27">氢分子</span>
......@@ -133,8 +116,7 @@
</div>
<div class="block_18 flex-row justify-between">
<div class="image-wrapper_7 flex-col">
<img class="label_7"
src="https://lanhu-oss-proxy.lanhuapp.com/11ea9cf6d4324a8ea4cd46f7649b733b" />
<img class="label_7" src="https://lanhu-oss-proxy.lanhuapp.com/11ea9cf6d4324a8ea4cd46f7649b733b" />
</div>
<div class="text-group_8 flex-col justify-between">
<span class="text_29">氧分子</span>
......@@ -157,23 +139,20 @@
<span class="text_35">*&nbsp;注:内容参考科普文献，效果因人而异，不做任何医疗承诺。</span>
</div>
</div>
</div>
<!-- 使用Footer组件 -->
<Footer />
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import SecondHeader from '../components/second_header.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......
src/views/Serve.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="box_1 flex-row justify-end">
<img class="image_1" src="https://lanhu-oss-proxy.lanhuapp.com/9ee05ad6e808ec8f3fa756fd90a269c4" />
<div class="section_1 flex-col">
<!-- 导航文字已移到HeaderNav组件中 -->
<div class="text-group_1 flex-col justify-between">
<span class="text_2">Product</span>
<span class="text_3">自愈舱</span>
</div>
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/246cc324d06f5e1e2545a431c2cda058" />
</div>
<div class="section_2 flex-col">
<img class="label_1" src="https://lanhu-oss-proxy.lanhuapp.com/a6a521da2532d3547dad35eac70d268b" />
<img class="image_3" src="https://lanhu-oss-proxy.lanhuapp.com/9a4ede6ce0f676d851f1ee02a15dc6fa" />
</div>
<pageBtnGroupVue style="margin-top: 45.9vw;" :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'" :btn-group="[{
name:'品牌介绍',
url:'/Product',
isSelect:false
......@@ -29,8 +14,6 @@
url:'/serve',
isSelect:true
}]" />
<img class="image_5" src="https://lanhu-oss-proxy.lanhuapp.com/711e9796613d22ecaa18040729759eec" />
</div>
<div class="box_3 flex-col">
<div class="block_1 flex-row justify-between">
<div class="box_4 flex-col">
......@@ -190,17 +173,15 @@
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import SecondHeader from '../components/second_header.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......
src/views/agent.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="box_1 flex-col">
<div class="block_1 flex-row justify-end">
<!-- 导航栏已移到HeaderNav组件中 -->
<div class="group_1 flex-col">
<span class="text_2">cooperation</span>
<span class="text_3">合作优势</span>
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/f7c3d0ce785e2dac90441b9270decc8e" />
</div>
<div class="group_2 flex-col">
<div class="image-wrapper_1 flex-row">
<img class="label_1"
src="https://lanhu-oss-proxy.lanhuapp.com/f70fb3b969d2aa568b8d0dae88348ad9" />
</div>
<div class="text-wrapper_1 flex-row">
<span class="paragraph_1">轻资产运营，高回报收益，共享万亿健康产业红利<br />合作模式&nbsp;|&nbsp;灵活选择，快速启动</span>
</div>
<pageBtnGroupVue style="margin-top: -5.2vw;margin-left: -42vw;" :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'" :btn-group="[{
name:'设备购买模式',
url:'/cooperation',
isSelect:false
......@@ -35,8 +18,7 @@
url:'/agent',
isSelect:true
}]" />
</div>
</div>
<div class="block_3 flex-col">
<div class="box_2 flex-row">
<div class="group_3 flex-col">
......@@ -80,8 +62,7 @@
</div>
</div>
<div class="group_4 flex-col justify-between">
<img class="image_9"
src="https://lanhu-oss-proxy.lanhuapp.com/adb1339fe50d70b41d882ffbb117d7d6" />
<img class="image_9" src="https://lanhu-oss-proxy.lanhuapp.com/adb1339fe50d70b41d882ffbb117d7d6" />
<div class="box_6 flex-col">
<div class="group_5 flex-row">
<span class="text_21">全国代理商</span>
......@@ -130,8 +111,7 @@
</div>
<span class="text_32">独家多模态能量专利，竞品无法复制</span>
</div>
<img class="image_15"
src="https://lanhu-oss-proxy.lanhuapp.com/445815afa412008511a20e0d5818f7f7" />
<img class="image_15" src="https://lanhu-oss-proxy.lanhuapp.com/445815afa412008511a20e0d5818f7f7" />
<div class="box_9 flex-col">
<div class="box_10 flex-col"></div>
<div class="text-group_3 flex-col justify-between">
......@@ -140,8 +120,7 @@
</div>
<span class="text_35">从选址装修到客户转化，全程标准化支持</span>
</div>
<img class="image_16"
src="https://lanhu-oss-proxy.lanhuapp.com/240819dad4bd7ac329d85e2156c942ee" />
<img class="image_16" src="https://lanhu-oss-proxy.lanhuapp.com/240819dad4bd7ac329d85e2156c942ee" />
<div class="box_11 flex-col">
<div class="box_12 flex-col"></div>
<div class="text-group_4 flex-col justify-between">
......@@ -156,20 +135,17 @@
<!-- 使用Footer组件替代重复的页脚代码 -->
<Footer />
</div>
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import SecondHeader from '../components/second_header.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......
src/views/brand.vue
<template>
<div class="page flex-col">
<div class="box_1 flex-col">
<div class="group_1 flex-col justify-end">
<!-- HeaderNav组件已移到Layout中 -->
<div class="text-wrapper_1 flex-row">
<span class="text_2">BRAND&nbsp;INTRODUCTION</span>
</div>
<div class="text-wrapper_2 flex-row">
<span class="text_3">品牌介绍</span>
</div>
<div class="image-wrapper_1 flex-row">
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/e98424a8388cb80f7ed98aebc26436c8" />
</div>
<pageBtnGroupVue :btn-group="[{name:'品牌介绍',url:'/brand'}]" />
</div>
<SecondHeader :title="'COOPERATION'"
:bcUrl="'src/assets/brand/topBC.png'" :desc="'合作优势'"
:btn-group="[{
name:'品牌介绍',
url:'/brand',
isSelect:true
}]"/>
<div class="group_3 flex-row">
<div class="text-wrapper_4 flex-col">
<span class="text_5">品牌故事</span>
<span class="text_6">故事发生&nbsp;BRAND&nbsp;STORY</span>
<span
class="paragraph_1">2020年，阳生万物自愈舱创始研发人即中国科学院高级工程师苏洪泉，在被查出患有肺结节后，亲身感受到疾病带来的痛苦与对健康的渴望，出于对传统治疗方式的慎重思考，凭借自身对生命科学的热爱与钻研，开启自愈舱的研发之路，最终成功研发出阳生万物多模态物理复合能量场健康自愈技术。<br /><br />自此，一个由苏洪泉领衔，来自清华大学、北京大学及国际顶尖实验室的临床和技术专家共同组成的核心科研团队，秉承“医工结合”的研发路径打破了单一能量模态健康自愈的技术壁垒，直接作用于细胞，让安全、有效的多模态物理能量场自愈技术设备“阳生万物自愈舱”成为细胞级修复激活自愈能力的新范式。<br /><br />阳生万物核心技术团队在能量源及传感器领域拥有近四十年的创新研发经验，专业涉及生物医学、机械结构、软件、算法等，具有强大的研发和自主创新能力。<br /><br />作为推进当今能量自愈新兴健康科技发展与中国高端健康设备的自主研发的创新品牌，阳生万物自愈舱实现了高端健康自愈设备的全流程自主研发、设计与制造，从效果和感受上不断升级“科技自愈”体验，用专业精神持久探寻细胞修复和科学力之间的新生密码。</span>
class="paragraph_1">2020年，阳生万物自愈舱创始研发人即中国科学院高级工程师苏洪泉，在被查出患有肺结节后，亲身感受到疾病带来的痛苦与对健康的渴望，出于对传统治疗方式的慎重思考，凭借自身对生命科学的热爱与钻研，开启自愈舱的研发之路，最终成功研发出阳生万物多模态物理复合能量场健康自愈技术。<br/><br/>自此，一个由苏洪泉领衔，来自清华大学、北京大学及国际顶尖实验室的临床和技术专家共同组成的核心科研团队，秉承“医工结合”的研发路径打破了单一能量模态健康自愈的技术壁垒，直接作用于细胞，让安全、有效的多模态物理能量场自愈技术设备“阳生万物自愈舱”成为细胞级修复激活自愈能力的新范式。<br/><br/>阳生万物核心技术团队在能量源及传感器领域拥有近四十年的创新研发经验，专业涉及生物医学、机械结构、软件、算法等，具有强大的研发和自主创新能力。<br/><br/>作为推进当今能量自愈新兴健康科技发展与中国高端健康设备的自主研发的创新品牌，阳生万物自愈舱实现了高端健康自愈设备的全流程自主研发、设计与制造，从效果和感受上不断升级“科技自愈”体验，用专业精神持久探寻细胞修复和科学力之间的新生密码。</span>
<span class="text_7">“80岁之前无大病”</span>
<span class="text_8">——&nbsp;创始研发人-苏洪泉</span>
</div>
<div class="image-wrapper_2 flex-col justify-between">
<img class="image_3" src="https://lanhu-oss-proxy.lanhuapp.com/c9022ec122e273aa2e050fa2ab7088fc" />
<img class="image_4" src="https://lanhu-oss-proxy.lanhuapp.com/f4d75eb6d36c853d18cc00f3c7dfba1f" />
</div>
<div class="block_3 flex-col">
<img class="image_5" src="https://lanhu-oss-proxy.lanhuapp.com/2974e899db809a1accace4a9b25bb30a" />
<div class="image-text_2 flex-row justify-between">
<img class="label_2"
src="https://lanhu-oss-proxy.lanhuapp.com/cb9e05a8816af5076ebbeb29cee7b442" />
<span class="text-group_2">联系我们</span>
</div>
<img class="image_3" src="@/assets/common/caidai.png"/>
<img class="image_4" src="@/assets/brand/shq.png"/>
</div>
<div class="block_3 flex-col"></div>
</div>
<div class="group_4 Border flex-col">
<div class="group_4 flex-col">
<div class="box_2 flex-col">
<div class="section_1 flex-row justify-between">
<span class="text_9">品牌介绍</span>
<img class="image_6"
src="https://lanhu-oss-proxy.lanhuapp.com/328ad77ad0fcb5d14917d3b2989df9a4" />
<img class="image_6" src="@/assets/common/caidai2.png"/>
</div>
<div class="text-wrapper_5 flex-row">
<span class="text_10">关于我们&nbsp;ABOUT&nbsp;US</span>
</div>
</div>
<div class="box_3 Border flex-row">
<div class="box_4 flex-col">
<img class="image_7"
src="https://lanhu-oss-proxy.lanhuapp.com/ca1c23757bb128b1d9734474803ce983" />
<div class="box_3 flex-row">
<div class="box_4 justify-center align-center">
<div class="noHoverContent justify-center align-center flex-col">
<img class="image_7" src="@/assets/brand/smysy.png"/>
<span class="text_11">使命与愿景</span>
<span class="text_12">01</span>
</div>
<div class="box_5 flex-row">
<img class="image_8"
src="https://lanhu-oss-proxy.lanhuapp.com/0fd3df78ef950ba66fe0e874b650411d" />
<div class="box_6 flex-col">
<div class="hoverContent justify-center align-center flex-col">
<span class="text_13">01</span>
<img class="image_9" src="@/assets/brand/smysy.png"/>
<span class="text_14">使命与愿景</span>
<div class="text-wrapper_6">
<span class="text_15">核心产品</span>
<span class="text_16">多模态物理能量自愈舱</span>
<span
class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
<span class="text_18">“细胞生物微动力修复理论”</span>
<span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
<span class="text_19">细胞激活：</span>
<span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
<span class="text_20">代谢优化：</span>
<span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
<span class="text_21">系统自愈：</span>
<span class="text_22">多模态协同作用激活人体天然修复机制。</span>
</div>
</div>
</div>
<div class="box_5 justify-center align-center">
<div class="noHoverContent justify-center align-center flex-col">
<img class="image_7" src="@/assets/brand/hxjs.png"/>
<span class="text_11">核心技术</span>
<span class="text_12">02</span>
</div>
<div class="hoverContent justify-center align-center flex-col">
<span class="text_13">02</span>
<img class="image_9"
src="https://lanhu-oss-proxy.lanhuapp.com/34f862a37eae502b5b9334eff7919862" />
<img class="image_9" src="@/assets/brand/hxjs.png"/>
<span class="text_14">核心技术</span>
<div class="text-wrapper_6">
<span class="text_15">核心产品</span>
<span class="text_16">多模态物理能量自愈舱</span>
<span class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
<span
class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
<span class="text_18">“细胞生物微动力修复理论”</span>
<span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
<span class="text_19">细胞激活：</span>
<span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
<span class="text_20">代谢优化：</span>
<span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
<span class="text_21">系统自愈：</span>
<span class="text_22">多模态协同作用激活人体天然修复机制。</span>
</div>
</div>
</div>
<div class="box_7 justify-center align-center">
<div class="noHoverContent justify-center align-center flex-col">
<img class="image_7" src="@/assets/brand/yfsl.png"/>
<span class="text_11">研发实力</span>
<span class="text_12">03</span>
</div>
<div class="hoverContent justify-center align-center flex-col">
<span class="text_13">03</span>
<img class="image_9" src="@/assets/brand/yfsl.png"/>
<span class="text_14">研发实力</span>
<div class="text-wrapper_6">
<span class="text_15">核心产品</span>
<span class="text_16">多模态物理能量自愈舱</span>
<span
class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
<span class="text_18">“细胞生物微动力修复理论”</span>
<span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br /></span>
<span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
<span class="text_19">细胞激活：</span>
<span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br /></span>
<span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
<span class="text_20">代谢优化：</span>
<span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br /></span>
<span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
<span class="text_21">系统自愈：</span>
<span class="text_22">多模态协同作用激活人体天然修复机制。</span>
</div>
</div>
</div>
<img class="image_10" src="https://lanhu-oss-proxy.lanhuapp.com/3c68015e53229cdba0f947c8535c44a8" />
<div class="box_7 flex-col">
<img class="image_11"
src="https://lanhu-oss-proxy.lanhuapp.com/cf5ac126f6fffe6920ef57e9f872af50" />
<span class="text_23">研发实力</span>
<span class="text_24">03</span>
<div class="box_8 justify-center align-center">
<div class="noHoverContent justify-center align-center flex-col">
<img class="image_7" src="@/assets/brand/cpyy.png"/>
<span class="text_11">产品应用</span>
<span class="text_12">04</span>
</div>
<div class="hoverContent justify-center align-center flex-col">
<span class="text_13">04</span>
<img class="image_9" src="@/assets/brand/cpyy.png"/>
<span class="text_14">产品应用</span>
<div class="text-wrapper_6">
<span class="text_15">核心产品</span>
<span class="text_16">多模态物理能量自愈舱</span>
<span
class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
<span class="text_18">“细胞生物微动力修复理论”</span>
<span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
<span class="text_19">细胞激活：</span>
<span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
<span class="text_20">代谢优化：</span>
<span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
<span class="text_21">系统自愈：</span>
<span class="text_22">多模态协同作用激活人体天然修复机制。</span>
</div>
<img class="image_12" src="https://lanhu-oss-proxy.lanhuapp.com/c996a500245ab30068c0e9bcb8a9548f" />
<div class="box_8 flex-col">
<img class="image_13"
src="https://lanhu-oss-proxy.lanhuapp.com/c347dd6f114d2a6b50bdb6eb885814e0" />
<span class="text_25">产品应用</span>
<span class="text_26">04</span>
</div>
<img class="image_14" src="https://lanhu-oss-proxy.lanhuapp.com/9b0cb2062a157eb5981a16e3b2f70f0c" />
<div class="box_9 flex-col">
<img class="image_15"
src="https://lanhu-oss-proxy.lanhuapp.com/6e2abffc13a51fbacd825306937928b5" />
<span class="text_27">社会责任</span>
<span class="text_28">05</span>
</div>
<div class="box_9 justify-center align-center">
<div class="noHoverContent justify-center align-center flex-col">
<img class="image_7" src="@/assets/brand/shzr.png"/>
<span class="text_11">社会责任</span>
<span class="text_12">05</span>
</div>
<span class="paragraph_5">阳生万物多模态物理能量自愈舱<br />历时5年的潜心研究，7224平米的生产基地，20+项发明专利，约3474人次做舱数据积累。</span>
<div class="hoverContent justify-center align-center flex-col">
<span class="text_13">05</span>
<img class="image_9" src="@/assets/brand/shzr.png"/>
<span class="text_14">社会责任</span>
<div class="text-wrapper_6">
<span class="text_15">核心产品</span>
<span class="text_16">多模态物理能量自愈舱</span>
<span
class="text_17">，突破单一能量局限，协同增效。整合了远红外、交变磁场、太赫兹波、热能量、氢分子、氧分子六种物理能量模态，基于</span>
<span class="text_18">“细胞生物微动力修复理论”</span>
<span class="paragraph_2">通过精确调控频率、强度等参数，特异性作用于细胞，促进细胞的新陈代谢，提升细胞活性，实现：<br/></span>
<span class="text_19">细胞激活：</span>
<span class="paragraph_3">六维能量矩阵促进微循环与线粒体功能；<br/></span>
<span class="text_20">代谢优化：</span>
<span class="paragraph_4">持续的低频能量协同刺激神经肌肉协同；<br/></span>
<span class="text_21">系统自愈：</span>
<span class="text_22">多模态协同作用激活人体天然修复机制。</span>
</div>
</div>
</div>
</div>
<span class="paragraph_5">阳生万物多模态物理能量自愈舱<br/>历时5年的潜心研究，7224平米的生产基地，20+项发明专利，约3474人次做舱数据积累。</span>
<div class="box_10 justify-between flex-row">
<div class=" flex-row justify-center align-center">
<img class="image_16"
src="https://lanhu-oss-proxy.lanhuapp.com/03813a48f4885a370e8ddf969f7fd58a" />
<img class="image_16" src="@/assets/brand/qxyj.png"/>
<span class="text_29">5</span>
<div class="flex-col justify-between">
<span class="text_30">年</span>
......@@ -112,8 +176,7 @@
</div>
<div class=" flex-row justify-center align-center">
<img class="image_16"
src="https://lanhu-oss-proxy.lanhuapp.com/17feae309c4c2a9fa02d8d9ccf79f9e7" />
<img class="image_16" src="@/assets/brand/scjd.png"/>
<span class="text_29">7224</span>
<div class="flex-col justify-between">
<span class="text_30">平方米+</span>
......@@ -122,8 +185,7 @@
</div>
<div class=" flex-row justify-center align-center">
<img class="image_16"
src="https://lanhu-oss-proxy.lanhuapp.com/6806467149d1cc5710e0e5dbee090b94" />
<img class="image_16" src="@/assets/brand/fmzl.png"/>
<span class="text_29">20</span>
<div class="flex-col justify-between">
<span class="text_30">项+</span>
......@@ -132,8 +194,7 @@
</div>
<div class=" flex-row justify-center align-center">
<img class="image_16"
src="https://lanhu-oss-proxy.lanhuapp.com/6fc405166020208d180b551e27e8e5d9" />
<img class="image_16" src="@/assets/brand/zcsj.png"/>
<span class="text_29">3474</span>
<div class="flex-col justify-between">
<span class="text_30">人+</span>
......@@ -142,143 +203,35 @@
</div>
</div>
</div>
<!-- Footer组件已移到Layout中 -->
</div>
</div>
</template>
<script>
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
export default {
components: {
HeroSection,
pageBtnGroupVue
},
data() {
return {
constants: {},
};
},
methods: {},
};
<script setup>
import SecondHeader from '../components/second_header.vue';
</script>
<style src="./common.css" />
<style src="./common.css"/>
<style scoped>
.page {
.page {
position: relative;
width: 100vw;
height: 200vw;
overflow: hidden;
}
.box_1 {
position: relative;
width: 100vw;
height: 200vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/a8a7d1970b492d4094db9d315bdace21) 100% no-repeat;
background-size: 100% 100%;
}
}
.group_1 {
height: 51.05vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/929c291cd64d7bf1932131cc2b6167f9) 100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
.block_1 {
width: 94.8vw;
height: 4.95vw;
margin: 0.93vw 0 0 2.6vw;
}
.image_1 {
width: 6.25vw;
height: 4.95vw;
}
.text_1 {
width: 40.11vw;
height: 1.05vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.04vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin: 1.92vw 0 0 4.68vw;
}
.label_1 {
width: 1.67vw;
height: 1.67vw;
margin: 1.66vw 0 0 42.08vw;
}
.text-wrapper_1 {
width: 44.38vw;
height: 3.03vw;
margin: 16.25vw 0 0 13.64vw;
}
.text_2 {
width: 44.38vw;
height: 3.03vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 4.16vw;
font-family: Gilroy-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
}
.text-wrapper_2 {
width: 7.19vw;
height: 1.83vw;
margin: 1.77vw 0 0 13.6vw;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
}
.image-wrapper_1 {
width: 0.27vw;
height: 3.08vw;
margin: 1.56vw 0 0 13.8vw;
}
.image_2 {
width: 0.27vw;
height: 3.08vw;
}
.group_3 {
.group_3 {
width: 100vw;
height: 56.36vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/7ce5da880e1e78c31f3fca4c398ea6a0) 100% no-repeat;
background: url(@/assets/brand/contentBC2.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: -0.1vw;
}
}
.text-wrapper_4 {
.text-wrapper_4 {
width: 42.45vw;
height: 42.61vw;
margin: 7.39vw 0 0 13.43vw;
}
}
.text_5 {
.text_5 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -293,9 +246,9 @@
white-space: nowrap;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_6 {
.text_6 {
overflow-wrap: break-word;
color: rgba(49, 49, 49, 1);
font-size: 1.87vw;
......@@ -304,9 +257,9 @@
text-align: left;
white-space: nowrap;
line-height: 2;
}
}
.paragraph_1 {
.paragraph_1 {
width: 41.67vw;
height: 26.15vw;
overflow-wrap: break-word;
......@@ -317,9 +270,9 @@
text-align: left;
line-height: 1.67vw;
margin-top: 2.66vw;
}
}
.text_7 {
.text_7 {
width: 16.57vw;
height: 2.04vw;
overflow-wrap: break-word;
......@@ -331,9 +284,9 @@
white-space: nowrap;
line-height: 1.67vw;
margin: 3.17vw 0 0 25.88vw;
}
}
.text_8 {
.text_8 {
width: 11.05vw;
height: 1.05vw;
overflow-wrap: break-word;
......@@ -345,82 +298,54 @@
white-space: nowrap;
line-height: 1.67vw;
margin: 1.04vw 0 0 30.67vw;
}
}
.image-wrapper_2 {
.image-wrapper_2 {
width: 27.14vw;
height: 42.71vw;
margin: 7.39vw 0 0 3.43vw;
}
}
.image_3 {
.image_3 {
width: 2.09vw;
height: 0.63vw;
margin-left: 25.06vw;
}
}
.image_4 {
.image_4 {
width: 27.14vw;
height: 36.46vw;
margin-top: 5.63vw;
}
}
.block_3 {
.block_3 {
width: 11.46vw;
height: 19.12vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/bc0403f2a3060594675f3d31430a736c) 100% no-repeat;
background: url(@/assets/common/erweima.png) 100% no-repeat;
background-size: 100% 100%;
margin: 7.39vw 1.04vw 0 1.04vw;
}
.image_5 {
width: 7.3vw;
height: 7.3vw;
margin: 5.52vw 0 0 2.08vw;
}
.image-text_2 {
width: 5.68vw;
height: 1.15vw;
margin: 4.01vw 0 1.14vw 2.91vw;
}
.label_2 {
width: 1.15vw;
height: 1.15vw;
margin-top: 0.25vw;
}
.text-group_2 {
overflow-wrap: break-word;
color: rgba(239, 245, 251, 1);
font-size: 1.04vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
}
}
.group_4 {
.group_4 {
width: 100vw;
height: 100vw;
margin-bottom: 18.18vw;
}
}
.box_2 {
.box_2 {
height: 12.5vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/f6a2398f364c9a69d6be402351a7bdf9) 100% no-repeat;
background: url(@/assets/brand/contentTiao.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: 0.21vw;
width: 100vw;
}
}
.section_1 {
.section_1 {
width: 72.87vw;
margin: 3.95vw 0 0 13.59vw;
}
}
.text_9 {
.text_9 {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 1) 0,
rgba(255, 255, 255, 1) 0,
......@@ -435,20 +360,20 @@
white-space: nowrap;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.image_6 {
.image_6 {
width: 2.09vw;
height: 0.63vw;
}
}
.text-wrapper_5 {
.text-wrapper_5 {
width: 17.82vw;
height: 1.83vw;
margin: 0.5vw 0 0 13.54vw;
}
}
.text_10 {
.text_10 {
width: 17.82vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -458,30 +383,21 @@
font-weight: 500;
text-align: left;
white-space: nowrap;
}
}
.box_3 {
.box_3 {
width: 100vw;
height: 44vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/29d84753c6f3f76a05cb09ea031a9030) 100% no-repeat;
background: url(@/assets/brand/contentBC3.png) 100% no-repeat;
background-size: 100% 100%;
}
.box_4 {
width: 9.28vw;
height: 22.04vw;
margin: 12.6vw 0 0 5.31vw;
}
}
.image_7 {
.image_7 {
width: 5vw;
height: 3.96vw;
margin-left: 2.19vw;
}
}
.text_11 {
width: 9.28vw;
height: 1.83vw;
.text_11 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
......@@ -489,60 +405,154 @@
font-weight: 700;
text-align: center;
white-space: nowrap;
line-height: 2.5vw;
margin-top: 7.04vw;
}
margin: 6vw 0 2vw 0;
}
.text_12 {
.text_12 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
color: #6D7B99;
font-size: 6.25vw;
font-family: DINEngsbek-Alternate;
font-weight: normal;
text-align: center;
line-height: 1.25vw;
margin: 4.63vw 0 0 2.81vw;
}
}
.box_5 {
width: 20vw;
height: 43.75vw;
border-left: 1px #fff solid;
position: relative;
}
.hoverContent {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease, visibility 1s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.noHoverContent {
opacity: 1;
visibility: visible;
transition: opacity 1s ease, visibility 1s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box_5:hover .hoverContent {
opacity: 1;
visibility: visible;
background: url(@/assets/brand/contentBC.png) 100% no-repeat;
background-size: 100% 100%;
}
.box_5:hover .noHoverContent {
opacity: 0;
visibility: hidden;
}
.box_5 {
.box_4 {
width: 20vw;
height: 43.75vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/24a0de27901e4016ab6b940d41235577) 100% no-repeat;
position: relative;
}
.box_4:hover .hoverContent {
opacity: 1;
visibility: visible;
background: url(@/assets/brand/contentBC.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 5.42vw;
}
}
.box_4:hover .noHoverContent {
opacity: 0;
visibility: hidden;
}
.image_8 {
width: 0.06vw;
.box_7 {
width: 20vw;
height: 43.75vw;
}
border-left: 1px #fff solid;
position: relative;
}
.box_6 {
width: 15.94vw;
height: 37.24vw;
margin: 2.7vw 1.97vw 0 2.03vw;
}
.box_7:hover .hoverContent {
opacity: 1;
visibility: visible;
background: url(@/assets/brand/contentBC.png) 100% no-repeat;
background-size: 100% 100%;
}
.text_13 {
.box_7:hover .noHoverContent {
opacity: 0;
visibility: hidden;
}
.box_8 {
width: 20vw;
height: 43.75vw;
border-left: 1px #fff solid;
position: relative;
}
.box_8:hover .hoverContent {
opacity: 1;
visibility: visible;
background: url(@/assets/brand/contentBC.png) 100% no-repeat;
background-size: 100% 100%;
}
.box_8:hover .noHoverContent {
opacity: 0;
visibility: hidden;
}
.box_9 {
width: 20vw;
height: 43.75vw;
border-left: 1px #fff solid;
position: relative;
}
.box_9:hover .hoverContent {
opacity: 1;
visibility: visible;
background: url(@/assets/brand/contentBC.png) 100% no-repeat;
background-size: 100% 100%;
}
.box_9:hover .noHoverContent {
opacity: 0;
visibility: hidden;
}
.text_13 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 8.33vw;
margin-top: -6vw;
line-height: 8vw;
font-family: DINEngsbek-Alternate;
font-weight: normal;
text-align: center;
line-height: 1.25vw;
margin-left: 5.32vw;
}
}
.image_9 {
.image_9 {
width: 4.07vw;
height: 4.07vw;
margin: 2.03vw 0 0 5.88vw;
}
margin-bottom: 1vw;
}
.text_14 {
width: 7.45vw;
height: 1.83vw;
.text_14 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
......@@ -550,11 +560,9 @@
font-weight: 700;
text-align: center;
white-space: nowrap;
line-height: 2.5vw;
margin: 2.08vw 0 0 4.16vw;
}
}
.text-wrapper_6 {
.text-wrapper_6 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -563,10 +571,10 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
margin-top: 2.66vw;
}
margin-top: 2vw
}
.text_15 {
.text_15 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -576,9 +584,9 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
}
}
.text_16 {
.text_16 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -588,9 +596,9 @@
font-weight: 700;
text-align: left;
line-height: 1.36vw;
}
}
.text_17 {
.text_17 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -600,9 +608,9 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
}
}
.text_18 {
.text_18 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -612,9 +620,9 @@
font-weight: 700;
text-align: left;
line-height: 1.36vw;
}
}
.paragraph_2 {
.paragraph_2 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -624,9 +632,9 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
}
}
.text_19 {
.text_19 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -636,9 +644,9 @@
font-weight: 700;
text-align: left;
line-height: 1.36vw;
}
}
.paragraph_3 {
.paragraph_3 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -648,9 +656,9 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
}
}
.text_20 {
.text_20 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -660,9 +668,9 @@
font-weight: 700;
text-align: left;
line-height: 1.36vw;
}
}
.paragraph_4 {
.paragraph_4 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -672,9 +680,9 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
}
}
.text_21 {
.text_21 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -684,9 +692,9 @@
font-weight: 700;
text-align: left;
line-height: 1.36vw;
}
}
.text_22 {
.text_22 {
width: 15.94vw;
height: 18.55vw;
overflow-wrap: break-word;
......@@ -696,139 +704,26 @@
font-weight: normal;
text-align: left;
line-height: 1.36vw;
}
}
.image_10 {
width: 0.06vw;
.box_7 {
width: 20vw;
height: 43.75vw;
}
.box_7 {
width: 7.3vw;
height: 22.24vw;
margin: 12.39vw 0 0 6.19vw;
}
.image_11 {
width: 4.38vw;
height: 4.38vw;
margin-left: 1.57vw;
}
.text_23 {
width: 7.3vw;
height: 1.83vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: center;
white-space: nowrap;
line-height: 2.5vw;
margin-top: 6.83vw;
}
}
.text_24 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 6.25vw;
font-family: DINEngsbek-Alternate;
font-weight: normal;
text-align: center;
line-height: 1.25vw;
margin: 4.63vw 0 0 1.87vw;
}
.image_12 {
width: 0.06vw;
.box_8 {
width: 20vw;
height: 43.75vw;
margin-left: 6.41vw;
}
.box_8 {
width: 7.24vw;
height: 22.04vw;
margin: 12.6vw 0 0 6.3vw;
}
.image_13 {
width: 3.96vw;
height: 3.96vw;
margin-left: 1.72vw;
}
}
.text_25 {
width: 7.24vw;
height: 1.83vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: center;
white-space: nowrap;
line-height: 2.5vw;
margin-top: 7.04vw;
}
.text_26 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 6.25vw;
font-family: DINEngsbek-Alternate;
font-weight: normal;
text-align: center;
line-height: 1.25vw;
margin: 4.63vw 0 0 1.82vw;
}
.image_14 {
width: 0.06vw;
.box_9 {
width: 20vw;
height: 43.75vw;
margin-left: 6.46vw;
}
.box_9 {
width: 7.45vw;
height: 22.09vw;
margin: 12.55vw 6.3vw 0 6.19vw;
}
.image_15 {
width: 4.38vw;
height: 4.07vw;
margin-left: 1.57vw;
}
}
.text_27 {
width: 7.45vw;
height: 1.83vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: center;
white-space: nowrap;
line-height: 2.5vw;
margin-top: 6.98vw;
}
.text_28 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 6.25vw;
font-family: DINzEngsbek-Alternate;
font-weight: normal;
text-align: center;
line-height: 1.25vw;
margin: 4.63vw 0 0 1.87vw;
}
.paragraph_5 {
width: 49.59vw;
height: 3.81vw;
.paragraph_5 {
overflow-wrap: break-word;
color: rgba(49, 49, 49, 1);
font-size: 1.25vw;
......@@ -836,29 +731,29 @@
font-weight: normal;
text-align: center;
line-height: 2.4vw;
margin: 10.93vw 0 0 25.05vw;
}
margin: 10.93vw 0 0 0;
}
.box_10 {
.box_10 {
width: 72.56vw;
height: 3.81vw;
margin: 5.72vw 0 13.8vw 13.69vw;
}
}
.image_16 {
.image_16 {
width: 3.18vw;
height: 3.7vw;
}
}
.text_29 {
.text_29 {
overflow-wrap: break-word;
color: rgba(0, 84, 217, 1);
font-size: 4.16vw;
font-family: DINEngsbek-Alternate;
margin: 0 0.5vw;
}
}
.text_30 {
.text_30 {
overflow-wrap: break-word;
color: rgba(0, 84, 217, 1);
font-size: 1.04vw;
......@@ -866,13 +761,13 @@
font-weight: 500;
position: relative;
top: -0.5vw;
}
}
.text_31 {
.text_31 {
overflow-wrap: break-word;
color: rgba(49, 49, 49, 1);
font-size: 1.04vw;
font-family: OPPOSans-M;
font-weight: 500;
}
}
</style>
\ No newline at end of file
src/views/certification.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="group_1 flex-row justify-end">
<!-- 导航栏已移到HeaderNav组件中 -->
<div class="box_2 flex-col">
<span class="text_2">EVENT&nbsp;INFORMATION</span>
<span class="text_3">企业资质</span>
<img class="image_2" src="@/assets/common/line.png" />
</div>
<div class="box_3 flex-col">
<img class="label_1" src="https://lanhu-oss-proxy.lanhuapp.com/72a342012afc5abdbeced29aa8415c77" />
<pageBtnGroupVue style="margin-top: 41.55vw;margin-left: -42.3vw;" :btn-group="[{
name:'企业资质',
url:'/certification',
isSelect:true
}]" />
</div>
</div>
<div class="group_2 flex-col">
<SecondHeader :title="'EVENT INFORMATION'"
:bcUrl="'src/assets/certification/topBC.png'" :desc="'企业资质'"
:btnGroup="[{ name:'企业资质', url:'/certification', isSelect:true
}]"/>
<div class="flex-col">
<div class="group_3 flex-row">
<div class="block_2 flex-col">
<span class="text_5">企业资质</span>
<span class="text_6">法定与经营合法性</span>
<img class="image_3" src="https://lanhu-oss-proxy.lanhuapp.com/b5615e80e4d9d9f7e100e284fc3d13f8" />
<img class="image_3" src="@/assets/certification/yyzz.png" alt=""/>
</div>
<img class="image_4" src="https://lanhu-oss-proxy.lanhuapp.com/127e96245b2d86e6ef062a0c51ac9ff0" />
<img class="image_5" src="https://lanhu-oss-proxy.lanhuapp.com/a5a8e2dfafb9c684be816b5df70d9d8d" />
<img class="image_4" src="@/assets/common/caidai.png" alt=""/>
<img class="image_5" src="@/assets/common/erweima.png" alt=""/>
</div>
<div class="group_4 flex-col">
<span class="text_7">核心技术知识产权</span>
<span class="text_8">创新是我们的基因。强大的技术专利壁垒，为您构筑无法复制的核心竞争力，确保市场独家优势。</span>
<div class="image-wrapper_1 flex-row">
<img class="image_6" :src="item.lanhuimage0" v-for="(item, index) in loopData0" :key="index" />
<img class="image_6" :src="item.url" v-for="(item, index) in imgList" :key="index" alt=""/>
</div>
</div>
</div>
<!-- 使用Footer组件替代重复的页脚代码 -->
<Footer />
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
<script setup>
import SecondHeader from '../components/second_header.vue';
import {ref} from "vue";
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
},
data() {
return {
loopData0: [{
lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/4204615dcd5c4228716950d592818126',
},
const imgList = ref([
{
lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/7faad42d56d27d31d0d56543176a1b98',
url: 'src/assets/certification/img1.png',
},
{
lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/794d8dfaaf0cccdffb96adc67dc995aa',
url: 'src/assets/certification/img2.png',
},
{
lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/13bf63125c52d54adcaaa8eefeac5001',
url: 'src/assets/certification/img3.png',
},
],
constants: {},
};
{
url: 'src/assets/certification/img4.png',
},
methods: {},
};
])
</script>
<style src="./common.css" />
<style src="./common.css"/>
<style scoped>
.page {
.page {
position: relative;
width: 100vw;
height: 175vw;
overflow: hidden;
}
.group_1 {
width: 100vw;
height: 51.05vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa) 100% no-repeat;
background-size: 100% 100%;
}
.image_1 {
width: 6.25vw;
height: 4.95vw;
margin: 0.93vw 0 0 2.6vw;
}
.box_2 {
width: 40.53vw;
height: 30.53vw;
margin: 2.86vw 0 0 4.58vw;
}
.text_1 {
width: 40.11vw;
height: 1.05vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.04vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin-left: 0.11vw;
}
.text_2 {
width: 40.32vw;
height: 3.03vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 4.16vw;
font-family: Gilroy-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin: 18.22vw 0 0 0.2vw;
}
.text_3 {
width: 7.4vw;
height: 1.83vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 2.19vw;
margin-top: 1.72vw;
}
}
.image_2 {
width: 0.27vw;
height: 3.08vw;
margin: 1.61vw 0 0 0.1vw;
}
.box_3 {
height: 51.05vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/afa8c5393379504c6e6fd392c6fdddd5) 100% no-repeat;
background-size: 100% 100%;
margin-left: 2.3vw;
width: 43.75vw;
position: relative;
}
.label_1 {
width: 1.67vw;
height: 1.67vw;
margin: 2.6vw 0 0 39.47vw;
}
.block_1 {
position: absolute;
left: -42.7vw;
top: 45.84vw;
width: 86.46vw;
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/40acffe4797cade9cf88dd6c597b24dd) 100% no-repeat;
background-size: 100% 100%;
}
.text-wrapper_1 {
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/f8c508cc48898a08a281938f114c5f88) 100% no-repeat;
background-size: 100% 100%;
width: 18.23vw;
}
.text_4 {
width: 6.15vw;
height: 1.57vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.56vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 2.19vw;
margin: 1.82vw 0 0 6.04vw;
}
.image-text_1 {
width: 4.38vw;
height: 1.05vw;
margin: 2.03vw 2.6vw 0 61.25vw;
}
.text-group_1 {
width: 2.56vw;
height: 0.73vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
font-family: Gilroy-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 2.19vw;
margin-top: 0.21vw;
}
.thumbnail_1 {
width: 0.94vw;
height: 1.05vw;
}
.group_2 {
width: 100vw;
height: 124.85vw;
margin-bottom: 18.18vw;
}
.group_3 {
.group_3 {
width: 85.47vw;
height: 51.57vw;
margin: 7.29vw 0 0 13.48vw;
}
}
.block_2 {
.block_2 {
width: 64.43vw;
height: 51.57vw;
}
}
.text_5 {
.text_5 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -253,11 +80,9 @@
white-space: nowrap;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_6 {
width: 14.9vw;
height: 1.83vw;
.text_6 {
overflow-wrap: break-word;
color: rgba(49, 49, 49, 1);
font-size: 1.87vw;
......@@ -265,38 +90,36 @@
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 3.75vw 0 0 0.1vw;
}
}
.image_3 {
.image_3 {
width: 55.79vw;
height: 40.63vw;
border: 1px solid rgba(210, 210, 210, 1);
margin: 2.91vw 0 0 8.64vw;
}
}
.image_4 {
.image_4 {
width: 2.09vw;
height: 0.63vw;
margin-left: 6.46vw;
}
}
.image_5 {
.image_5 {
width: 11.46vw;
height: 19.12vw;
margin-left: 1.05vw;
}
}
.group_4 {
.group_4 {
width: 100vw;
height: 49.38vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/b6acc594f3e8978ce0337ceda4bcd203) 100% no-repeat;
background: url(@/assets/certification/bottomBC.png) 100% no-repeat;
background-size: 100% 100%;
margin: 6.25vw 0 10.36vw 0;
}
}
.text_7 {
.text_7 {
width: 14.95vw;
height: 1.88vw;
overflow-wrap: break-word;
......@@ -308,9 +131,9 @@
white-space: nowrap;
line-height: 1.57vw;
margin: 6.25vw 0 0 13.54vw;
}
}
.text_8 {
.text_8 {
width: 52.97vw;
height: 1.36vw;
overflow-wrap: break-word;
......@@ -322,170 +145,19 @@
white-space: nowrap;
line-height: 1.57vw;
margin: 2.7vw 0 0 13.48vw;
}
}
.image-wrapper_1 {
.image-wrapper_1 {
width: 72.92vw;
height: 21.88vw;
justify-content: space-between;
margin: 5.67vw 0 9.63vw 13.54vw;
}
}
.image_6 {
.image_6 {
width: 16.67vw;
height: 21.88vw;
margin-right: 2.09vw;
}
.group_5 {
position: absolute;
left: 0;
top: 175.84vw;
width: 100vw;
height: 18.23vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/2eb9e1141134b4c9ff24c82786103bfa) 100% no-repeat;
background-size: 100% 100%;
justify-content: flex-center;
}
.section_1 {
width: 34.85vw;
height: 8.91vw;
margin: 4.68vw 0 0 13.48vw;
}
.text_9 {
width: 6.88vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-left: 0.06vw;
}
.text_10 {
width: 30.11vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.15vw;
}
.text-wrapper_2 {
width: 16.25vw;
height: 1.15vw;
margin: 2.65vw 0 0 0.1vw;
}
.text_11 {
width: 4.54vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text_12 {
width: 2.3vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text-wrapper_3 {
width: 34.8vw;
height: 0.84vw;
margin: 1.14vw 0 0 0.05vw;
}
.text_13 {
width: 9.8vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text_14 {
width: 20.84vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.paragraph_1 {
width: 7.5vw;
height: 2.19vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: right;
line-height: 1.25vw;
margin: 8.02vw 0 0 20.41vw;
}
.image-wrapper_2 {
background-color: rgba(255, 255, 255, 1);
border-radius: 30px;
height: 8.86vw;
width: 8.86vw;
margin: 4.68vw 13.54vw 0 1.35vw;
}
.image_7 {
width: 6.25vw;
height: 6.15vw;
margin: 1.35vw 0 0 1.3vw;
}
.image-wrapper_3 {
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/b6e72b93fb077b8c8d228e6bc505d448) 100% no-repeat;
background-size: 100% 100%;
width: 5.21vw;
position: absolute;
left: 79.43vw;
top: -2.6vw;
}
}
.image_8 {
width: 1.36vw;
height: 0.73vw;
margin: 2.23vw 0 0 1.92vw;
}
</style>
\ No newline at end of file
src/views/contact-us.vue
<template>
<div class="page flex-col">
<div class="box_1 flex-col justify-end">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="group_3 flex-row">
<div class="text-group_1 flex-col justify-between">
<span class="text_2">Contact&nbsp;us</span>
<span class="text_3">联系我们</span>
</div>
</div>
<div class="image-wrapper_1 flex-row">
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/2224e1dfa599083044d5a6918a4b498b" />
</div>
<pageBtnGroupVue style="margin-top: 41.55vw;margin-left: 14vw;" :btn-group="[{
name:'企业资质',
url:'/certification',
isSelect:true
}]" />
</div>
<SecondHeader :title="'CONTACT US'"
:bcUrl="'src/assets/contactUs/BC.png'" :desc="'联系我们'"
:btnGroup="[{ name:'联系我们', url:'/contact-us', isSelect:true
}]"/>
<div class="box_3 flex-col">
<div class="block_1 flex-row justify-between">
<div class="box_4 flex-col">
<div class="box_5 flex-row justify-between">
<span class="text_5">携手阳生万物，共创健康未来</span>
<img class="image_3"
src="https://lanhu-oss-proxy.lanhuapp.com/788a3c13c25ffeb6c71f54bf2c2378ec" />
<img class="image_3" src="@/assets/common/caidai.png"/>
</div>
<span class="text_6">诚邀全球志同道合的合作伙伴，共享千亿级蓝海市场。</span>
<div class="box_6 flex-col">
......@@ -40,29 +27,25 @@
<span class="text_9">认同理念</span>
<span class="text_10">高度认可“物理能量健康”的未来趋势与公司品牌理念。</span>
</div>
<img class="image_4"
src="https://lanhu-oss-proxy.lanhuapp.com/b6523b17393e90a6b313a7ad6266c813" />
<img class="image_4" src="@/assets/common/shuxian.png"/>
<div class="block_3 flex-col">
<div class="section_1 flex-col"></div>
<span class="text_11">资源与渠道</span>
<span class="text_12">拥有本地高端健康、医疗、美容、企业家圈层资源，或优质商业场地资源。</span>
</div>
<img class="image_5"
src="https://lanhu-oss-proxy.lanhuapp.com/0961a0f5bed65066085ac175c60bb60d" />
<img class="image_4" src="@/assets/common/shuxian.png"/>
<div class="block_4 flex-col">
<div class="section_2 flex-col"></div>
<span class="text_13">资金实力</span>
<span class="text_14">具备一定的项目投资实力和市场开拓能力。</span>
</div>
<img class="image_6"
src="https://lanhu-oss-proxy.lanhuapp.com/986eaed9c5233fb5805cb64a504b5fa3" />
<img class="image_4" src="@/assets/common/shuxian.png"/>
<div class="block_5 flex-col">
<div class="group_5 flex-col"></div>
<span class="text_15">运营能力</span>
<span class="text_16">拥有优秀的团队管理、市场运营和客户服务意识。</span>
</div>
<img class="image_7"
src="https://lanhu-oss-proxy.lanhuapp.com/4007185c5d7ef75d15cfd0a6549c9d0e" />
<img class="image_4" src="@/assets/common/shuxian.png"/>
<div class="block_6 flex-col">
<div class="group_6 flex-col"></div>
<span class="text_17">长远眼光</span>
......@@ -71,7 +54,7 @@
</div>
</div>
</div>
<img class="image_8" src="https://lanhu-oss-proxy.lanhuapp.com/6e07af78d272a51136b3a5536058c2e7" />
<img class="image_8" src="@/assets/common/erweima.png"/>
</div>
<div class="text-wrapper_2 flex-row">
<span class="text_19">合作咨询表单</span>
......@@ -80,227 +63,160 @@
<span class="text_20">提交您的合作意向，我们将尽快与您联系。</span>
</div>
<div class="block_7 flex-row justify-between">
<el-input class="box_10" placeholder="您的姓名" />
<el-input class="box_10" placeholder="联系电话" />
<el-input class="box_10" v-model="form.title" placeholder="您的姓名"/>
<el-input class="box_10" v-model="form.phone" placeholder="联系电话"/>
</div>
<div class="block_8 flex-row justify-between">
<el-input class="box_10" placeholder="电子邮箱" />
<el-input class="box_10" placeholder="您所在的城市" />
<el-input class="box_10" v-model="form.email" placeholder="电子邮箱"/>
<el-input class="box_10" v-model="form.address" placeholder="您所在的城市"/>
</div>
<div class="block_9 flex-row justify-between">
<el-input class="box_10" placeholder="主营业务/现有资源" />
<el-input class="box_10" placeholder="意向合作模式" />
<el-select v-model="form.job" placeholder="主营业务/现有资源" class="box_10">
<el-option
v-for="item in jobList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="form.type" placeholder="意向合作模式" class="box_10">
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<el-input class="block_12" type="textarea" :rows="7" placeholder="请输入您要咨询的问题" />
<el-input class="block_12" type="textarea" :rows="7" placeholder="请输入您要咨询的问题"/>
<div class="block_13 flex-row">
<div class="text-wrapper_11 align-center justify-center flex-col">
<div class="text-wrapper_11 align-center justify-center flex-col" @click="save">
<span class="text_34">立即提交，开启财富之旅</span>
</div>
</div>
</div>
<!-- 使用Footer组件替代重复的页脚代码 -->
<Footer />
</div>
<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>
<div class="dialog_section_1 justify-center align-center flex-col">
<div class="dialog_box_2 flex-row"></div>
<div class="dialog_box_3 flex-row">
<div class="dialog_text-group_1 flex-col">
<span class="dialog_text_1">感谢您的提交！</span>
<span class="dialog_text_2"
>我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span
>
</div>
</div>
<div class="dialog_box_4 flex-row">
<div class="dialog_text-wrapper_1 justify-center align-center">
<span class="dialog_text_3">直接联系信息：</span>
<span class="dialog_text_4">13641398000（雷女士）</span>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
},
data() {
return {
constants: {},
};
},
methods: {},
};
<script setup>
import SecondHeader from '../components/second_header.vue'
import {ref} from "vue";
const dialogVisible = ref(false)
const save = () => {
dialogVisible.value = true
}
const form = ref({
title: '',
phone: '',
email: '',
address: '',
job: '',
type: '',
desc: ''
})
const typeList = ref([{
value: '1',
label: '设备购买 - 直接采购设备，用于自身业务场景'
}, {
value: '2',
label: '渠道代理 - 获得区域/行业授权，进行市场销售与运营'
}, {
value: '3',
label: '设备租赁 - 短期或长期租赁设备，满足灵活使用需求'
}, {
value: '4',
label: '项目合作 - 共同开发定制化健康解决方案'
}, {
value: '5',
label: '其他模式'
}])
const jobList = ref([{
value: '1',
label: '医疗/健康管理机构'
}, {
value: '2',
label: '康养/度假基地'
}, {
value: '3',
label: '高端酒店/会所'
}, {
value: '4',
label: '企业行政福利/员工健康项目'
}, {
value: '5',
label: '社区/社群健康服务资源'
}, {
value: '6',
label: '健康科技产品代理经验'
}, {
value: '7',
label: '其他'
}])
</script>
<style src="./common.css" />
<style src="./common.css"/>
<style scoped>
.page {
.page {
position: relative;
width: 100vw;
height: 145vw;
overflow: hidden;
}
.box_1 {
height: 51.05vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/e115de88d905d1fb51f6d0cd7d5b1af4) 100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
.group_2 {
width: 94.8vw;
height: 4.95vw;
margin: 0.93vw 0 0 2.6vw;
}
.image_1 {
width: 6.25vw;
height: 4.95vw;
}
.text_1 {
width: 40.11vw;
height: 1.05vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.04vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin: 1.92vw 0 0 4.68vw;
}
.label_1 {
width: 1.67vw;
height: 1.67vw;
margin: 1.66vw 0 0 42.08vw;
}
.group_3 {
width: 25.47vw;
height: 6.57vw;
margin: 16.25vw 0 0 13.43vw;
}
.text-group_1 {
width: 25.47vw;
height: 6.57vw;
}
.text_2 {
width: 25.42vw;
height: 3.03vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 4.16vw;
font-family: Gilroy-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin-left: 0.06vw;
}
.text_3 {
width: 7.3vw;
height: 1.83vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.87vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 2.19vw;
margin-top: 1.72vw;
}
.image-wrapper_1 {
width: 0.27vw;
height: 3.08vw;
margin: 1.61vw 0 0 13.54vw;
}
.image_2 {
width: 0.27vw;
height: 3.08vw;
}
.group_4 {
width: 86.46vw;
height: 5.21vw;
margin: 12.44vw 0 0 13.54vw;
}
.box_2 {
width: 86.46vw;
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/447de32ad42be10a5c8ee1a453e73c32) 100% no-repeat;
background-size: 100% 100%;
}
.text-wrapper_1 {
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/27811ad6ec63eeadf571b2996da9886a) 100% no-repeat;
background-size: 100% 100%;
width: 18.23vw;
}
.text_4 {
width: 6.15vw;
height: 1.57vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.56vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 2.19vw;
margin: 1.82vw 0 0 5.98vw;
}
}
.image-text_1 {
width: 4.38vw;
height: 1.05vw;
margin: 2.03vw 2.6vw 0 61.25vw;
}
.text-group_2 {
width: 2.56vw;
height: 0.73vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
font-family: Gilroy-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 2.19vw;
margin-top: 0.21vw;
}
.thumbnail_1 {
width: 0.94vw;
height: 1.05vw;
}
.box_3 {
.box_3 {
width: 100vw;
height: 96.1vw;
margin-bottom: 18.18vw;
}
}
.block_1 {
.block_1 {
width: 85.47vw;
height: 35.27vw;
margin: 7.23vw 0 0 13.48vw;
}
}
.box_4 {
.box_4 {
width: 72.97vw;
height: 35.27vw;
}
}
.box_5 {
.box_5 {
width: 72.97vw;
}
}
.text_5 {
.text_5 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -315,15 +231,15 @@
white-space: nowrap;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.image_3 {
.image_3 {
width: 2.09vw;
height: 0.63vw;
margin-top: 0.06vw;
}
}
.text_6 {
.text_6 {
width: 38.91vw;
height: 1.88vw;
overflow-wrap: break-word;
......@@ -335,28 +251,28 @@
white-space: nowrap;
line-height: 2.5vw;
margin: 2.08vw 0 0 0.05vw;
}
}
.box_6 {
.box_6 {
height: 26.05vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/44e9bceb346ae4acbc8f125fd158db4f) 100% no-repeat;
background: url(@/assets/contactUs/lianxi.png) 100% no-repeat;
background-size: 100% 100%;
width: 72.92vw;
margin: 2.5vw 0 0 0.05vw;
}
}
.box_7 {
.box_7 {
width: 29.54vw;
height: 3.96vw;
margin: 2.03vw 0 0 2.5vw;
}
}
.text-group_3 {
.text-group_3 {
width: 29.54vw;
height: 3.96vw;
}
}
.text_7 {
.text_7 {
width: 23.39vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -367,9 +283,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.text_8 {
.text_8 {
width: 29.54vw;
height: 1.31vw;
overflow-wrap: break-word;
......@@ -381,29 +297,29 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 0.84vw;
}
}
.box_8 {
.box_8 {
width: 67.45vw;
height: 13.55vw;
margin: 4.06vw 0 2.44vw 2.55vw;
}
}
.block_2 {
.block_2 {
width: 9.9vw;
height: 9.12vw;
margin-top: 2.24vw;
}
}
.box_9 {
.box_9 {
width: 3.34vw;
height: 3.03vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/c2efb77d01d63534a59b659db42a5a42) 100% no-repeat;
background: url(@/assets/contactUs/rtln.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 0.16vw;
}
}
.text_9 {
.text_9 {
width: 4.95vw;
height: 1.2vw;
overflow-wrap: break-word;
......@@ -415,9 +331,9 @@
white-space: nowrap;
line-height: 1.57vw;
margin: 1.45vw 0 0 0.05vw;
}
}
.text_10 {
.text_10 {
width: 9.9vw;
height: 2.14vw;
overflow-wrap: break-word;
......@@ -428,29 +344,29 @@
text-align: left;
line-height: 1.25vw;
margin-top: 1.31vw;
}
}
.image_4 {
.image_4 {
width: 0.06vw;
height: 13.55vw;
margin-left: 2.04vw;
}
}
.block_3 {
.block_3 {
width: 10vw;
height: 10.47vw;
margin: 2.13vw 0 0 2.39vw;
}
}
.section_1 {
.section_1 {
width: 2.92vw;
height: 3.23vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/05c6e94d66541e2c0e61ba849597125c) 100% no-repeat;
background: url(@/assets/contactUs/zyyqd.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 0.37vw;
}
}
.text_11 {
.text_11 {
width: 6.2vw;
height: 1.25vw;
overflow-wrap: break-word;
......@@ -462,9 +378,9 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 1.36vw;
}
}
.text_12 {
.text_12 {
width: 10vw;
height: 3.39vw;
overflow-wrap: break-word;
......@@ -475,29 +391,23 @@
text-align: left;
line-height: 1.25vw;
margin-top: 1.25vw;
}
}
.image_5 {
width: 0.06vw;
height: 13.55vw;
margin-left: 2.24vw;
}
.block_4 {
.block_4 {
width: 9.95vw;
height: 9.17vw;
margin: 2.18vw 0 0 2.08vw;
}
}
.section_2 {
.section_2 {
width: 2.87vw;
height: 3.18vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/91459147fc0d788da2a6ae1fa8213869) 100% no-repeat;
background: url(@/assets/contactUs/zjsl.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 0.42vw;
}
}
.text_13 {
.text_13 {
width: 4.9vw;
height: 1.25vw;
overflow-wrap: break-word;
......@@ -509,9 +419,9 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 1.36vw;
}
}
.text_14 {
.text_14 {
width: 9.95vw;
height: 2.14vw;
overflow-wrap: break-word;
......@@ -522,29 +432,23 @@
text-align: left;
line-height: 1.25vw;
margin-top: 1.25vw;
}
}
.image_6 {
width: 0.06vw;
height: 13.55vw;
margin-left: 2.19vw;
}
.block_5 {
.block_5 {
width: 9.95vw;
height: 8.96vw;
margin: 2.39vw 0 0 2.13vw;
}
}
.group_5 {
.group_5 {
width: 2.82vw;
height: 2.71vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/2f6b5e87e3497e9f5fddcbfa162f80ed) 100% no-repeat;
background: url(@/assets/contactUs/yynl.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 0.42vw;
}
}
.text_15 {
.text_15 {
width: 4.9vw;
height: 1.2vw;
overflow-wrap: break-word;
......@@ -556,9 +460,9 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 1.62vw;
}
}
.text_16 {
.text_16 {
width: 9.95vw;
height: 2.14vw;
overflow-wrap: break-word;
......@@ -569,29 +473,23 @@
text-align: left;
line-height: 1.25vw;
margin-top: 1.31vw;
}
.image_7 {
width: 0.06vw;
height: 13.55vw;
margin-left: 2.09vw;
}
}
.block_6 {
.block_6 {
width: 10vw;
height: 9.02vw;
margin: 2.39vw 0 0 2.29vw;
}
}
.group_6 {
.group_6 {
width: 3.34vw;
height: 2.71vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/64886408f834caba38d6c03cf02cbd9b) 100% no-repeat;
background: url(@/assets/contactUs/cyyg.png) 100% no-repeat;
background-size: 100% 100%;
margin-left: 0.16vw;
}
}
.text_17 {
.text_17 {
width: 4.9vw;
height: 1.25vw;
overflow-wrap: break-word;
......@@ -603,9 +501,9 @@
white-space: nowrap;
line-height: 1.57vw;
margin: 1.61vw 0 0 0.05vw;
}
}
.text_18 {
.text_18 {
width: 10vw;
height: 2.14vw;
overflow-wrap: break-word;
......@@ -616,21 +514,21 @@
text-align: left;
line-height: 1.25vw;
margin-top: 1.31vw;
}
}
.image_8 {
.image_8 {
width: 11.46vw;
height: 19.12vw;
margin-top: 0.06vw;
}
}
.text-wrapper_2 {
.text-wrapper_2 {
width: 11.1vw;
height: 1.83vw;
margin: 5.1vw 0 0 13.48vw;
}
}
.text_19 {
.text_19 {
width: 11.1vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -641,15 +539,15 @@
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.text-wrapper_3 {
.text-wrapper_3 {
width: 22.97vw;
height: 1.41vw;
margin: 1.3vw 0 0 13.43vw;
}
}
.text_20 {
.text_20 {
width: 22.97vw;
height: 1.41vw;
overflow-wrap: break-word;
......@@ -660,524 +558,150 @@
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.block_7 {
.block_7 {
width: 72.92vw;
height: 3.13vw;
margin: 2.76vw 0 0 13.54vw;
}
}
.box_10 {
.box_10 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
height: 3.13vw;
border: 1px solid rgba(210, 210, 210, 1);
width: 35.94vw;
}
.text-wrapper_4 {
width: 4.48vw;
height: 0.94vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
.text_21 {
width: 4.48vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.text_22 {
width: 4.48vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.box_11 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
.box_10 >>> .el-select__wrapper {
height: 3.13vw;
border: 1px solid rgba(210, 210, 210, 1);
width: 35.94vw;
}
.text-wrapper_5 {
width: 4.54vw;
height: 0.94vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
.text_23 {
width: 4.54vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_24 {
width: 4.54vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.block_8 {
.block_8 {
width: 72.92vw;
height: 3.13vw;
margin: 1.04vw 0 0 13.54vw;
}
}
.group_7 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
height: 3.13vw;
border: 1px solid rgba(210, 210, 210, 1);
width: 35.94vw;
}
.text-wrapper_6 {
width: 4.54vw;
height: 0.94vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
.text_25 {
width: 4.54vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_26 {
width: 4.54vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.group_8 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
width: 35.94vw;
height: 3.13vw;
border: 1px solid rgba(210, 210, 210, 1);
}
.text-wrapper_7 {
width: 6.41vw;
height: 0.94vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
.text_27 {
width: 6.41vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_28 {
width: 6.41vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.thumbnail_2 {
width: 1.05vw;
height: 0.58vw;
margin: 1.3vw 1.4vw 0 25.98vw;
}
.block_9 {
.block_9 {
width: 72.92vw;
height: 3.13vw;
margin: 1.04vw 0 0 13.54vw;
}
.block_10 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
width: 35.94vw;
height: 3.13vw;
border: 1px solid rgba(210, 210, 210, 1);
}
.text-wrapper_8 {
width: 8.65vw;
height: 0.94vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
.text_29 {
width: 8.65vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_30 {
width: 8.65vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.thumbnail_3 {
width: 1.05vw;
height: 0.58vw;
margin: 1.3vw 1.4vw 0 23.75vw;
}
.block_11 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
width: 35.94vw;
height: 3.13vw;
border: 1px solid rgba(210, 210, 210, 1);
}
}
.text-wrapper_9 {
width: 6.41vw;
height: 0.94vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
.text_31 {
width: 6.41vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(255, 0, 0, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_32 {
width: 6.41vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.thumbnail_4 {
width: 1.05vw;
height: 0.58vw;
margin: 1.3vw 1.4vw 0 25.98vw;
}
.block_12 {
.block_12 {
width: 72.87vw;
height: 10.42vw;
margin: 1.04vw 0 0 13.54vw;
}
.text-wrapper_10 {
background-color: rgba(255, 255, 255, 1);
border-radius: 7px;
height: 10.42vw;
border: 1px solid rgba(210, 210, 210, 1);
width: 72.87vw;
}
.text_33 {
width: 11.25vw;
height: 0.94vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin: 1.09vw 0 0 1.09vw;
}
}
.block_13 {
.block_13 {
width: 16.1vw;
height: 3.13vw;
margin: 2.08vw 0 13.07vw 70.36vw;
}
}
.text-wrapper_11 {
.text-wrapper_11 {
background-color: rgba(0, 82, 217, 1);
border-radius: 7px;
height: 3.13vw;
width: 16.1vw;
}
}
.text_34 {
.text_34 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.04vw;
font-family: OPPOSans-B;
font-weight: 700;
}
}
.box_12 {
position: absolute;
left: 0;
top: 147.09vw;
width: 100vw;
height: 18.23vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/6313be63333acc1f2d5ab11883077206) 100% no-repeat;
background-size: 100% 100%;
justify-content: flex-center;
.dialog {
.dialog_section_1 {
background-color: rgba(255, 255, 255, 1);
width: 43.4vw;
height: 30vw;
margin-top: -2vw;
}
.section_3 {
width: 34.85vw;
height: 8.91vw;
margin: 4.68vw 0 0 13.48vw;
.dialog_image-wrapper_1 {
width: 43.4vw;
}
.text_35 {
width: 6.88vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-left: 0.06vw;
.dialog——label_1 {
width: 2.3vw;
height: 2.3vw;
object-fit: cover;
}
.text_36 {
width: 30.11vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.15vw;
.dialog_box_2 {
width: 6.2vw;
height: 6.2vw;
background: url(@/assets/contactUs/success.png) 100% no-repeat;
background-size: 100% 100%;
}
.text-wrapper_12 {
width: 16.25vw;
height: 1.15vw;
margin: 2.65vw 0 0 0.1vw;
.dialog_box_3 {
width: 34.43vw;
height: 7.09vw;
}
.text_37 {
width: 4.54vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
.dialog_text-group_1 {
width: 34.43vw;
height: 7.09vw;
}
.text_38 {
width: 2.3vw;
height: 1.15vw;
.dialog_text_1 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
color: rgba(67, 67, 67, 1);
font-size: 2.5vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: left;
text-align: center;
white-space: nowrap;
line-height: 1.25vw;
margin: 1vw 0;
}
.text-wrapper_13 {
width: 34.8vw;
height: 0.84vw;
margin: 1.14vw 0 0 0.05vw;
.dialog_text_2 {
overflow-wrap: break-word;
color: #434343;
font-size: 1.25vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: center;
}
.text_39 {
width: 9.8vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
.dialog_box_4 {
width: 33vw;
height: 1.25vw;
margin-top: 5vw;
padding-top: 50px;
border-top: 2px #B6B6B6 dashed;
}
.text_40 {
width: 20.84vw;
height: 0.84vw;
.dialog_text-wrapper_1 {
width: 30vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
font-size: 0;
font-family: OPPOSans-B;
font-weight: 700;
white-space: nowrap;
line-height: 1.25vw;
}
.paragraph_1 {
width: 7.5vw;
height: 2.19vw;
.dialog_text_3 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
font-family: MicrosoftYaHei-Bold;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: right;
line-height: 1.25vw;
margin: 8.02vw 0 0 20.41vw;
}
.image-wrapper_2 {
background-color: rgba(255, 255, 255, 1);
border-radius: 30px;
height: 8.86vw;
width: 8.86vw;
margin: 4.68vw 13.54vw 0 1.35vw;
}
.image_9 {
width: 6.25vw;
height: 6.15vw;
margin: 1.35vw 0 0 1.3vw;
}
.image-wrapper_3 {
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/fcfd80b52f35bec46896e1d0e81dd8f9) 100% no-repeat;
background-size: 100% 100%;
width: 5.21vw;
position: absolute;
left: 79.43vw;
top: -2.6vw;
}
.image_10 {
width: 1.36vw;
height: 0.73vw;
margin: 2.23vw 0 0 1.92vw;
.dialog_text_4 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-M;
font-weight: 500;
}
}
</style>
\ No newline at end of file
src/views/homepage.vue
......@@ -6,19 +6,19 @@
<div class="section_8 flex-col">
<!-- 导航文字已移到HeaderNav组件中 -->
<span
class="paragraph_1">细胞级修复&nbsp;重启生命活力<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="paragraph_2">中国科学院专家团队创新研发，技术行业领先<br />多项国家发明专利及权威认证，科学背书，品质保障<br />全球明星和富豪的健康标配</span>
class="paragraph_1">细胞级修复&nbsp;重启生命活力<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="paragraph_2">中国科学院专家团队创新研发，技术行业领先<br/>多项国家发明专利及权威认证，科学背书，品质保障<br/>全球明星和富豪的健康标配</span>
<img class="image_4"
src="https://lanhu-oss-proxy.lanhuapp.com/34fbf3cb24858cf9f2af7bd5d7594db8" />
src="https://lanhu-oss-proxy.lanhuapp.com/34fbf3cb24858cf9f2af7bd5d7594db8"/>
</div>
<div class="section_9 flex-row justify-center">
<div style="width: 50%;" class="align-center justify-center">
<img class="image_7 "
src="https://lanhu-oss-proxy.lanhuapp.com/a786e2b1a7d997d42aa0b466b62790d0" />
src="https://lanhu-oss-proxy.lanhuapp.com/a786e2b1a7d997d42aa0b466b62790d0"/>
</div>
<div style="width: 50%;" class="align-center justify-center">
<img class="image_7"
src="https://lanhu-oss-proxy.lanhuapp.com/a97e62b72e65ecb70c8b77318028218c" />
src="https://lanhu-oss-proxy.lanhuapp.com/a97e62b72e65ecb70c8b77318028218c"/>
</div>
</div>
</div>
......@@ -29,7 +29,7 @@
<span class="text_4">科技重构生命能量，激活人体与生俱来的自愈潜能</span>
</div>
<img class="image_9"
src="https://lanhu-oss-proxy.lanhuapp.com/17086003d05bec617a822b257ee01e52" />
src="https://lanhu-oss-proxy.lanhuapp.com/17086003d05bec617a822b257ee01e52"/>
</div>
<span class="text_5">02.技术定位：多模态物理复合能量场新范式</span>
<span class="text_6">多模态物理复合能量场技术，尖端科技升级再创新，科技健康管理先进设备。</span>
......@@ -47,11 +47,11 @@
<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 class="label_3" :src="item.lanhuimage0"/>
<img v-if="item.slot2 === 2" class="image_10"
:src="item.specialSlot2.lanhuimage0" />
:src="item.specialSlot2.lanhuimage0"/>
<img v-if="item.slot1 === 1" class="image_11"
src="https://lanhu-oss-proxy.lanhuapp.com/b2686f8b451366ed76052a07ee785a85" />
src="https://lanhu-oss-proxy.lanhuapp.com/b2686f8b451366ed76052a07ee785a85"/>
</div>
</div>
</div>
......@@ -63,21 +63,22 @@
<span class="text_11">中国科学院专家创新研发</span>
</div>
<img class="image_12"
src="https://lanhu-oss-proxy.lanhuapp.com/8b74cc1195173e6be75834c3a2756c24" />
src="https://lanhu-oss-proxy.lanhuapp.com/8b74cc1195173e6be75834c3a2756c24"/>
<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="https://lanhu-oss-proxy.lanhuapp.com/a66609a1f71f3af2633369417b5b3a79" />
src="https://lanhu-oss-proxy.lanhuapp.com/a66609a1f71f3af2633369417b5b3a79"/>
</div>
<div class="image-wrapper_5 flex-row">
<img class="image_14"
src="https://lanhu-oss-proxy.lanhuapp.com/f22d64caba6087500cb55236caf7c74e" />
src="https://lanhu-oss-proxy.lanhuapp.com/f22d64caba6087500cb55236caf7c74e"/>
</div>
<div class="text-wrapper_2 flex-row">
<span class="text_14">AUTHORITATIVE PLATFORM</span>
......@@ -97,7 +98,7 @@
<span class="text_18">一家专注于多模态物理能量自愈技术研发与应用的创新科技企业</span>
</div>
<img class="image_15"
src="https://lanhu-oss-proxy.lanhuapp.com/2b843ce0de44da316532309356b3a617" />
src="https://lanhu-oss-proxy.lanhuapp.com/2b843ce0de44da316532309356b3a617"/>
</div>
<div class="group_3 flex-row justify-between">
<div class="section_13 flex-col">
......@@ -139,7 +140,7 @@
<div class="image-text_1 flex-row justify-between">
<span class="text-group_11">READ MORE</span>
<img class="image_16"
src="https://lanhu-oss-proxy.lanhuapp.com/76881372345ecc12411ede93d82c5c05" />
src="https://lanhu-oss-proxy.lanhuapp.com/76881372345ecc12411ede93d82c5c05"/>
</div>
</div>
</div>
......@@ -151,34 +152,34 @@
<span class="text_30">轻资产运营，高回报收益，共享万亿健康产业红利</span>
</div>
<img class="image_17"
src="https://lanhu-oss-proxy.lanhuapp.com/f904f6587a1392c79415fce89273dc00" />
src="https://lanhu-oss-proxy.lanhuapp.com/f904f6587a1392c79415fce89273dc00"/>
</div>
<div class="block_3 flex-row justify-between">
<div class="group_5 flex-col">
<div class="group_6 flex-row justify-between">
<div class="group_7 flex-col justify-between">
<img class="image_18"
src="https://lanhu-oss-proxy.lanhuapp.com/423048cb998a3bb1b561d2fe9c184555" />
src="https://lanhu-oss-proxy.lanhuapp.com/423048cb998a3bb1b561d2fe9c184555"/>
<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>
class="paragraph_4">资金实力雄厚，希望长期持有资产的机构（如高端康复中心、私立医院、健康管理机构）。<br/><br/>计划快速回本并持续盈利的投资者。</span>
</div>
</div>
<div class="group_9 flex-col">
<div class="section_18 flex-row justify-between">
<div class="block_4 flex-col justify-between">
<img class="image_19"
src="https://lanhu-oss-proxy.lanhuapp.com/6026f4ae193bdcab95700de3c1e3c92b" />
src="https://lanhu-oss-proxy.lanhuapp.com/6026f4ae193bdcab95700de3c1e3c92b"/>
<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>
......@@ -190,14 +191,14 @@
<span class="text_40">开启您的健康科技事业</span>
</div>
<img class="image_21"
src="https://lanhu-oss-proxy.lanhuapp.com/9e55b9babdfd867b51f44c2dab0a46f0" />
src="https://lanhu-oss-proxy.lanhuapp.com/9e55b9babdfd867b51f44c2dab0a46f0"/>
</div>
<div class="group_11 flex-row justify-between">
<el-input class="text-wrapper_7" placeholder="您的姓名" />
<el-input class="text-wrapper_8" placeholder="您的手机" />
<el-input class="text-wrapper_9" placeholder="您的微信" />
<el-input class="text-wrapper_7" placeholder="您的姓名"/>
<el-input class="text-wrapper_8" placeholder="您的手机"/>
<el-input class="text-wrapper_9" placeholder="您的微信"/>
</div>
<el-input class="text-wrapper_10" type="textarea" :rows="7" placeholder="请输入您要咨询的问题" />
<el-input class="text-wrapper_10" 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">
......@@ -206,13 +207,12 @@
</div>
</div>
</div>
<!-- Footer组件已移到Layout中 -->
</div>
</template>
<script>
import HeroSection from '@/components/HeroSection.vue'
import HeroSection from '@/components/HeroSection.vue'
export default {
export default {
components: {
HeroSection
},
......@@ -250,149 +250,39 @@
};
},
methods: {},
};
};
</script>
<style src="./common.css" />
<style src="./common.css"/>
<style lang="css" scoped>
.homepage-container {
.homepage-container {
position: relative;
width: 100vw;
height: 320vw;
overflow: hidden;
}
}
.hero-section {
.hero-section {
position: relative;
width: 100vw;
height: 320vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/ae73196d6fa4d2ee8fda0fe85a541ff4) 100% no-repeat;
background-size: 100% 100%;
}
}
.hero-content {
.hero-content {
width: 100vw;
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/7d06f6bec66ed54f93af3cf8621f7ef4) 100% no-repeat;
background-size: 100% 100%;
}
.section_1 {
position: relative;
width: 9.43vw;
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/731d51545a971a22d49b17563169dc51) 100% no-repeat;
background-size: 100% 100%;
}
.image_1 {
width: 4.17vw;
height: 4.17vw;
margin: 1.35vw 0 0 2.13vw;
}
}
.text_1 {
width: 0.32vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin: 4.21vw 0 0 4.01vw;
}
.image_2 {
width: 0.06vw;
height: 25.32vw;
margin: 2.76vw 0 0 4.16vw;
}
.section_2 {
background-color: rgba(255, 255, 255, 1);
border-radius: 50%;
width: 0.42vw;
height: 0.42vw;
border: 1px solid rgba(255, 255, 255, 1);
margin: 2.76vw 0 0 4.01vw;
}
.section_3 {
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
width: 0.42vw;
height: 0.42vw;
border: 1px solid rgba(255, 255, 255, 1);
margin: 0.93vw 0 0 4.01vw;
}
.section_4 {
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
width: 0.42vw;
height: 0.42vw;
border: 1px solid rgba(255, 255, 255, 1);
margin: 0.93vw 0 0 4.01vw;
}
.section_5 {
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
width: 0.42vw;
height: 0.42vw;
border: 1px solid rgba(255, 255, 255, 1);
margin: 0.98vw 0 0 4.01vw;
}
.section_6 {
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
width: 0.42vw;
height: 0.42vw;
border: 1px solid rgba(255, 255, 255, 1);
margin: 0.93vw 0 0 4.01vw;
}
.section_7 {
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
width: 0.42vw;
height: 0.42vw;
border: 1px solid rgba(255, 255, 255, 1);
margin: 0.93vw 0 7.6vw 4.01vw;
}
.image_3 {
position: absolute;
left: 8.39vw;
top: 0;
width: 2.04vw;
height: 56.25vw;
}
.section_8 {
.section_8 {
width: 40.73vw;
height: 23.96vw;
margin: 2.86vw 0 0 4.06vw;
}
}
.text_2 {
width: 40.11vw;
height: 1.05vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.04vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 3.75vw;
margin-left: 0.06vw;
}
.paragraph_1 {
.paragraph_1 {
width: 40.73vw;
height: 3.6vw;
overflow-wrap: break-word;
......@@ -404,9 +294,9 @@
white-space: nowrap;
line-height: 1.2;
margin-top: 5.42vw;
}
}
.paragraph_2 {
.paragraph_2 {
width: 40.73vw;
height: 5.63vw;
overflow-wrap: break-word;
......@@ -417,15 +307,15 @@
text-align: left;
line-height: 1.6;
margin-top: 1.25vw;
}
}
.image_4 {
.image_4 {
width: 13.03vw;
height: 3.65vw;
margin: 3.38vw 0 0 0.2vw;
}
}
.section_9 {
.section_9 {
position: absolute;
right: 0;
width: 10vw;
......@@ -433,77 +323,32 @@
background: url(https://lanhu-oss-proxy.lanhuapp.com/ffd6c73339ae1120541cc18b6e8c41c8) 100% no-repeat;
background-size: 100% 100%;
margin-top: 51vw;
}
.label_1 {
width: 1.67vw;
height: 1.67vw;
margin-left: 32.19vw;
}
.image-wrapper_1 {
height: 5.32vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/5c8e223f2e635a5a69f05e6189636253) 100% no-repeat;
background-size: 100% 100%;
width: 18.23vw;
}
}
.label_2 {
width: 1.1vw;
height: 1.36vw;
margin: 2.08vw 0 0 8.59vw;
}
.thumbnail_1 {
width: 0.42vw;
height: 0.42vw;
margin: 2.44vw 0 0 3.95vw;
}
.image-wrapper_2 {
height: 1.57vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/2e8a50a096f202f5ad2cbd8a5fa6236e) 100% no-repeat;
background-size: 100% 100%;
width: 1.57vw;
margin: 1.87vw 0 0 1.04vw;
}
.image_5 {
width: 1.57vw;
height: 0.84vw;
margin-top: 0.73vw;
}
.image_6 {
width: 0.06vw;
height: 5.32vw;
margin-left: 3.96vw;
}
.image_7 {
.image_7 {
width: 1vw;
height: 1.8vw;
}
}
.hero-description {
.hero-description {
width: 100vw;
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/70031cfca24aed172eb0eceb26daea48) 100% no-repeat;
background-size: 100% 100%;
}
}
.group_1 {
.group_1 {
width: 72.97vw;
height: 7.04vw;
margin: 6.25vw 0 0 13.48vw;
}
}
.text-group_1 {
.text-group_1 {
width: 54.38vw;
height: 7.04vw;
}
}
.text_3 {
.text_3 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -520,9 +365,9 @@
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_4 {
.text_4 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.66vw;
......@@ -531,14 +376,14 @@
text-align: left;
white-space: nowrap;
line-height: 2;
}
}
.image_9 {
.image_9 {
width: 2.09vw;
height: 0.63vw;
}
}
.text_5 {
.text_5 {
width: 36.62vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -550,9 +395,9 @@
white-space: nowrap;
line-height: 1.88vw;
margin: 8.48vw 0 0 13.54vw;
}
}
.text_6 {
.text_6 {
width: 36.15vw;
height: 3.18vw;
overflow-wrap: break-word;
......@@ -563,17 +408,17 @@
text-align: left;
line-height: 1.6;
margin: 1.25vw 0 0 13.43vw;
}
}
.text-wrapper_1 {
.text-wrapper_1 {
height: 3.13vw;
background: url(@/assets/homepage/ReadMore.png) 100% no-repeat;
background-size: 100% 100%;
width: 10.42vw;
margin: 6.3vw 0 0 13.38vw;
}
}
.text_7 {
.text_7 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
......@@ -581,28 +426,28 @@
font-weight: 700;
text-align: left;
white-space: nowrap;
}
}
.list_1 {
.list_1 {
width: 72.92vw;
height: 13.55vw;
justify-content: space-between;
margin: 5.26vw 0 0 13.54vw;
}
}
.list-items_1 {
.list-items_1 {
height: 13.55vw;
background-size: 100% 100%;
width: 24.33vw;
}
}
.text-group_2 {
.text-group_2 {
width: 5vw;
height: 4.33vw;
margin: 3.12vw 0 0 2.55vw;
}
}
.text_8 {
.text_8 {
width: 6.05vw;
height: 2.24vw;
overflow-wrap: break-word;
......@@ -613,9 +458,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.text_9 {
.text_9 {
width: 12.4vw;
height: 1.2vw;
overflow-wrap: break-word;
......@@ -627,54 +472,54 @@
white-space: nowrap;
line-height: 1.88vw;
margin: 0.88vw 0 0 0.05vw;
}
}
.image-wrapper_3 {
.image-wrapper_3 {
width: 19.12vw;
height: 2.71vw;
margin: 0.67vw 0 2.7vw 2.6vw;
}
}
.label_3 {
.label_3 {
width: 1.36vw;
height: 1.36vw;
margin-top: 0.94vw;
}
}
.image_10 {
.image_10 {
width: 2.92vw;
height: 2.82vw;
margin: -0.05vw 0 0 14.84vw;
}
}
.image_11 {
.image_11 {
width: 2.09vw;
height: 2.71vw;
margin-left: 15.68vw;
}
}
.product-advantages {
.product-advantages {
width: 100vw;
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/0a39b256baabaad035245300c66b5ecc) 100% no-repeat;
background-size: 100% 100%;
}
}
.section_10 {
.section_10 {
width: 36.46vw;
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/51f0881b7874707083ecd9d2f85f657a) 100% no-repeat;
background-size: 100% 100%;
margin-left: 13.55vw;
}
}
.text-group_3 {
.text-group_3 {
width: 18.55vw;
height: 5.11vw;
margin: 6.3vw 0 0 2.55vw;
}
}
.text_10 {
.text_10 {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 1) 0,
rgba(255, 255, 255, 1) 0,
......@@ -692,9 +537,9 @@
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_11 {
.text_11 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.66vw;
......@@ -702,15 +547,15 @@
font-weight: normal;
text-align: left;
white-space: nowrap;
}
}
.image_12 {
.image_12 {
width: 4.69vw;
height: 5.21vw;
margin: 8.8vw 0 0 15.67vw;
}
}
.text_12 {
.text_12 {
width: 8.44vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -722,15 +567,15 @@
white-space: nowrap;
line-height: 1.25vw;
margin: 2.65vw 0 0 13.85vw;
}
}
.text-group_4 {
.text-group_4 {
width: 20.84vw;
height: 9.33vw;
margin: 0.78vw 0 17.08vw 7.6vw;
}
}
.paragraph_3 {
.paragraph_3 {
width: 20.84vw;
height: 4.8vw;
overflow-wrap: break-word;
......@@ -740,9 +585,9 @@
font-weight: 700;
text-align: center;
line-height: 2.5vw;
}
}
.text_13 {
.text_13 {
width: 19.69vw;
height: 3.81vw;
overflow-wrap: break-word;
......@@ -753,45 +598,45 @@
text-align: center;
line-height: 1.36vw;
margin: 0.72vw 0 0 0.62vw;
}
}
.section_11 {
.section_11 {
height: 56.15vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/adbd30c68311515ff390fea73b091fb8) 100% no-repeat;
background-size: 100% 100%;
width: 36.41vw;
margin: 0.05vw 13.59vw 0 0;
}
}
.image-wrapper_4 {
.image-wrapper_4 {
width: 2.09vw;
height: 0.63vw;
margin: 6.19vw 0 0 34.37vw;
}
}
.image_13 {
.image_13 {
width: 2.09vw;
height: 0.63vw;
}
}
.image-wrapper_5 {
.image-wrapper_5 {
width: 4.38vw;
height: 5.21vw;
margin: 13.33vw 0 0 16.04vw;
}
}
.image_14 {
.image_14 {
width: 4.38vw;
height: 5.21vw;
}
}
.text-wrapper_2 {
.text-wrapper_2 {
width: 10.16vw;
height: 0.99vw;
margin: 2.65vw 0 0 13.17vw;
}
}
.text_14 {
.text_14 {
width: 10.16vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -802,20 +647,20 @@
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.section_12 {
.section_12 {
width: 14.28vw;
height: 3.96vw;
margin: 0.78vw 0 22.39vw 11.09vw;
}
}
.text-group_5 {
.text-group_5 {
width: 14.28vw;
height: 3.96vw;
}
}
.text_15 {
.text_15 {
width: 14.28vw;
height: 2.09vw;
overflow-wrap: break-word;
......@@ -826,9 +671,9 @@
text-align: center;
white-space: nowrap;
line-height: 2.5vw;
}
}
.text_16 {
.text_16 {
width: 10.16vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -840,27 +685,27 @@
white-space: nowrap;
line-height: 1.36vw;
margin: 0.88vw 0 0 2.08vw;
}
}
.technology-section {
.technology-section {
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/03400cd245b3c14ec7dcd43c6dcee2ae) 100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
}
.group_2 {
.group_2 {
width: 72.97vw;
height: 5.21vw;
margin: 6.19vw 0 0 13.48vw;
}
}
.text-group_6 {
.text-group_6 {
width: 47.77vw;
height: 5.21vw;
}
}
.text_17 {
.text_17 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -877,9 +722,9 @@
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_18 {
.text_18 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.66vw;
......@@ -887,42 +732,42 @@
font-weight: normal;
text-align: left;
white-space: nowrap;
}
}
.image_15 {
.image_15 {
width: 2.09vw;
height: 0.63vw;
margin-top: 0.06vw;
}
}
.group_3 {
.group_3 {
width: 72.92vw;
height: 12.5vw;
margin: 6.3vw 0 0 13.54vw;
}
}
.section_13 {
.section_13 {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
width: 23.44vw;
height: 12.5vw;
}
}
.section_14 {
.section_14 {
width: 3.96vw;
height: 3.13vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/e38b754db402ca4f7c312064404d728d) 100% no-repeat;
background-size: 100% 100%;
margin: 2.65vw 0 0 2.76vw;
}
}
.text-group_7 {
.text-group_7 {
width: 8.44vw;
height: 3.18vw;
margin: 1.3vw 0 2.23vw 2.55vw;
}
}
.text_19 {
.text_19 {
width: 8.44vw;
height: 1.62vw;
overflow-wrap: break-word;
......@@ -933,9 +778,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.4;
}
}
.text_20 {
.text_20 {
width: 7.92vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -947,25 +792,25 @@
white-space: nowrap;
line-height: 1.4;
margin: 0.57vw 0 0 0.2vw;
}
}
.section_15 {
.section_15 {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
width: 23.44vw;
height: 12.5vw;
margin-left: 1.31vw;
}
}
.box_7 {
.box_7 {
width: 3.29vw;
height: 3.29vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/a56154341326b609b4f02a8dae8c3d0a) 100% no-repeat;
background-size: 100% 100%;
margin: 2.6vw 0 0 3.12vw;
}
}
.text_21 {
.text_21 {
width: 6.72vw;
height: 1.62vw;
overflow-wrap: break-word;
......@@ -977,9 +822,9 @@
white-space: nowrap;
line-height: 1.4;
margin: 1.19vw 0 0 2.55vw;
}
}
.text_22 {
.text_22 {
width: 7.24vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -991,31 +836,31 @@
white-space: nowrap;
line-height: 1.4;
margin: 0.57vw 0 2.23vw 2.76vw;
}
}
.section_16 {
.section_16 {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
width: 23.44vw;
height: 12.5vw;
margin-left: 1.31vw;
}
}
.box_8 {
.box_8 {
width: 3.44vw;
height: 3.44vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/36631d130ef36600cbb4dd07a36719c7) 100% no-repeat;
background-size: 100% 100%;
margin: 2.5vw 0 0 3.02vw;
}
}
.text-group_8 {
.text-group_8 {
width: 6.57vw;
height: 3.18vw;
margin: 1.14vw 0 2.23vw 2.55vw;
}
}
.text_23 {
.text_23 {
width: 6.57vw;
height: 1.62vw;
overflow-wrap: break-word;
......@@ -1026,9 +871,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.text_24 {
.text_24 {
width: 6.31vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -1040,36 +885,36 @@
white-space: nowrap;
line-height: 1.25vw;
margin: 0.57vw 0 0 0.2vw;
}
}
.group_4 {
.group_4 {
width: 72.92vw;
height: 12.5vw;
margin: 1.3vw 0 12.23vw 13.54vw;
}
}
.box_9 {
.box_9 {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
width: 23.44vw;
height: 12.5vw;
}
}
.section_17 {
.section_17 {
width: 3.13vw;
height: 3.13vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/88bb08aa61302723c635a350ec4f4310) 100% no-repeat;
background-size: 100% 100%;
margin: 2.65vw 0 0 3.17vw;
}
}
.text-group_9 {
.text-group_9 {
width: 8.91vw;
height: 3.23vw;
margin: 1.25vw 0 2.23vw 2.6vw;
}
}
.text_25 {
.text_25 {
width: 6.52vw;
height: 1.67vw;
overflow-wrap: break-word;
......@@ -1080,9 +925,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.text_26 {
.text_26 {
width: 8.75vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -1094,31 +939,31 @@
white-space: nowrap;
line-height: 1.25vw;
margin: 0.57vw 0 0 0.15vw;
}
}
.box_10 {
.box_10 {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
width: 23.44vw;
height: 12.5vw;
margin-left: 1.31vw;
}
}
.block_1 {
.block_1 {
width: 3.44vw;
height: 3.23vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/bd2594e04933b40134163c1f042afa7f) 100% no-repeat;
background-size: 100% 100%;
margin: 2.6vw 0 0 3.02vw;
}
}
.text-group_10 {
.text-group_10 {
width: 9.43vw;
height: 3.18vw;
margin: 1.25vw 0 2.23vw 2.55vw;
}
}
.text_27 {
.text_27 {
width: 6.72vw;
height: 1.62vw;
overflow-wrap: break-word;
......@@ -1129,9 +974,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
}
.text_28 {
.text_28 {
width: 9.28vw;
height: 0.99vw;
overflow-wrap: break-word;
......@@ -1143,23 +988,23 @@
white-space: nowrap;
line-height: 1.25vw;
margin: 0.57vw 0 0 0.15vw;
}
}
.box_11 {
.box_11 {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 20px;
width: 23.44vw;
height: 12.5vw;
margin-left: 1.31vw;
}
}
.image-text_1 {
.image-text_1 {
width: 7.97vw;
height: 0.73vw;
margin: 5.88vw 0 0 7.7vw;
}
}
.text-group_11 {
.text-group_11 {
width: 5.89vw;
height: 0.73vw;
overflow-wrap: break-word;
......@@ -1170,33 +1015,33 @@
text-align: left;
white-space: nowrap;
line-height: 1.88vw;
}
}
.image_16 {
.image_16 {
width: 1.25vw;
height: 0.68vw;
margin-top: 0.7vw;
}
}
.box_12 {
.box_12 {
height: 56.25vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/8004e12f2e16c1def4567f8c36fccaf2) 100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
}
.block_2 {
.block_2 {
width: 73.03vw;
height: 5.37vw;
margin: 6.25vw 0 0 13.43vw;
}
}
.text-group_12 {
.text-group_12 {
width: 37.45vw;
height: 5.37vw;
}
}
.text_29 {
.text_29 {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 1) 0,
rgba(255, 255, 255, 1) 0,
......@@ -1213,9 +1058,9 @@
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_30 {
.text_30 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.66vw;
......@@ -1224,20 +1069,20 @@
text-align: left;
white-space: nowrap;
line-height: 2;
}
}
.image_17 {
.image_17 {
width: 2.09vw;
height: 0.63vw;
}
}
.block_3 {
.block_3 {
width: 72.97vw;
height: 19.8vw;
margin: 8.95vw 0 15.88vw 13.48vw;
}
}
.group_5 {
.group_5 {
backdrop-filter: blur(15px);
/* 可选：添加背景色透明度 */
......@@ -1245,27 +1090,27 @@
border-radius: 20px;
height: 19.8vw;
width: 35.42vw;
}
}
.group_6 {
.group_6 {
width: 29.64vw;
height: 8.29vw;
margin: 1.87vw 0 0 3.54vw;
}
}
.group_7 {
.group_7 {
width: 9.9vw;
height: 7.04vw;
margin-top: 1.25vw;
}
}
.image_18 {
.image_18 {
width: 4.38vw;
height: 4.07vw;
margin-left: 0.27vw;
}
}
.text_31 {
.text_31 {
width: 9.9vw;
height: 1.67vw;
overflow-wrap: break-word;
......@@ -1277,20 +1122,20 @@
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.31vw;
}
}
.group_8 {
.group_8 {
width: 6.05vw;
height: 7.4vw;
}
}
.text-wrapper_3 {
.text-wrapper_3 {
width: 21.57vw;
height: 4.33vw;
margin: 1.3vw 0 4.01vw 3.48vw;
}
}
.paragraph_4 {
.paragraph_4 {
width: 21.57vw;
height: 4.33vw;
overflow-wrap: break-word;
......@@ -1300,9 +1145,9 @@
font-weight: normal;
text-align: left;
line-height: 1.25vw;
}
}
.group_9 {
.group_9 {
backdrop-filter: blur(15px);
/* 可选：添加背景色透明度 */
......@@ -1310,27 +1155,27 @@
border-radius: 20px;
height: 19.8vw;
width: 35.42vw;
}
}
.section_18 {
.section_18 {
width: 30.47vw;
height: 8.29vw;
margin: 1.87vw 0 0 3.54vw;
}
}
.block_4 {
.block_4 {
width: 9.9vw;
height: 7.19vw;
margin-top: 1.1vw;
}
}
.image_19 {
.image_19 {
width: 3.65vw;
height: 4.38vw;
margin-left: 0.63vw;
}
}
.text_32 {
.text_32 {
width: 9.9vw;
height: 1.67vw;
overflow-wrap: break-word;
......@@ -1342,20 +1187,20 @@
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.15vw;
}
}
.block_5 {
.block_5 {
width: 6.88vw;
height: 7.4vw;
}
}
.text-wrapper_4 {
.text-wrapper_4 {
width: 21.57vw;
height: 4.33vw;
margin: 1.3vw 0 4.01vw 3.48vw;
}
}
.paragraph_5 {
.paragraph_5 {
width: 21.57vw;
height: 4.33vw;
overflow-wrap: break-word;
......@@ -1365,154 +1210,28 @@
font-weight: normal;
text-align: left;
line-height: 1.25vw;
}
.box_13 {
width: 100vw;
height: 18.23vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/e8fe491d505475400432d9f727b976e9) 100% no-repeat;
background-size: 100% 100%;
margin-top: 38.03vw;
justify-content: flex-center;
}
.box_14 {
width: 34.85vw;
height: 8.91vw;
margin: 4.68vw 0 0 13.48vw;
}
.text_33 {
width: 6.88vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-left: 0.06vw;
}
.text_34 {
width: 30.11vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.15vw;
}
.text-wrapper_5 {
width: 16.25vw;
height: 1.15vw;
margin: 2.65vw 0 0 0.1vw;
}
.text_35 {
width: 4.54vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text_36 {
width: 2.3vw;
height: 1.15vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 1.14vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.text-wrapper_6 {
width: 34.8vw;
height: 0.84vw;
margin: 1.14vw 0 0 0.05vw;
}
.text_37 {
width: 9.8vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.text_38 {
width: 20.84vw;
height: 0.84vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.83vw;
font-family: MicrosoftYaHei-Semibold;
font-weight: 600;
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
.paragraph_6 {
width: 7.5vw;
height: 2.19vw;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
font-family: MicrosoftYaHei-Bold;
font-weight: 700;
text-align: right;
line-height: 1.25vw;
margin: 8.02vw 0 0 20.41vw;
}
.image_20 {
width: 8.86vw;
height: 8.86vw;
margin: 4.68vw 13.54vw 0 1.35vw;
}
.box_15 {
.box_15 {
position: absolute;
left: 0;
top: 281.25vw;
width: 100vw;
height: 38.08vw;
}
}
.group_10 {
.group_10 {
width: 73.03vw;
height: 5.16vw;
margin: 6.25vw 0 0 13.43vw;
}
}
.text-group_13 {
.text-group_13 {
width: 17.04vw;
height: 5.16vw;
}
}
.text_39 {
.text_39 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -1529,9 +1248,9 @@
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_40 {
.text_40 {
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.66vw;
......@@ -1540,112 +1259,59 @@
text-align: left;
white-space: nowrap;
line-height: 2;
}
}
.image_21 {
.image_21 {
width: 2.09vw;
height: 0.63vw;
}
}
.group_11 {
.group_11 {
width: 72.92vw;
height: 3.13vw;
margin: 2.65vw 0 0 13.54vw;
}
}
.text-wrapper_7 {
.text-wrapper_7 {
background-color: rgba(241, 244, 247, 1);
border-radius: 10px 10px 9px 9px;
height: 3.13vw;
width: 22.92vw;
}
}
.text_41 {
width: 3.65vw;
height: 0.99vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 1.88vw;
margin: 1.09vw 0 0 1.25vw;
}
.text-wrapper_8 {
.text-wrapper_8 {
background-color: rgba(241, 244, 247, 1);
border-radius: 10px 10px 9px 9px;
height: 3.13vw;
margin-left: 2.09vw;
width: 22.92vw;
}
}
.text_42 {
width: 3.75vw;
height: 0.99vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 1.88vw;
margin: 1.09vw 0 0 1.25vw;
}
.text-wrapper_9 {
.text-wrapper_9 {
background-color: rgba(241, 244, 247, 1);
border-radius: 10px 10px 9px 9px;
height: 3.13vw;
margin-left: 2.09vw;
width: 22.92vw;
}
}
.text_43 {
width: 3.75vw;
height: 0.99vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 1.88vw;
margin: 1.09vw 0 0 1.25vw;
}
.text-wrapper_10 {
.text-wrapper_10 {
border-radius: 10px 10px 9px 9px;
height: 7.82vw;
width: 72.92vw;
margin: 2.08vw 0 0 13.54vw;
}
}
.text_44 {
width: 9.38vw;
height: 0.99vw;
overflow-wrap: break-word;
color: rgba(149, 149, 149, 1);
font-size: 0.93vw;
font-family: OPPOSans-R;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 1.88vw;
margin: 1.09vw 0 0 1.25vw;
}
.group_12 {
.group_12 {
width: 73.08vw;
height: 3.13vw;
margin: 2.08vw 0 5.78vw 13.38vw;
}
}
.text_45 {
.text_45 {
width: 25.42vw;
height: 1.05vw;
overflow-wrap: break-word;
......@@ -1657,16 +1323,16 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 0.63vw;
}
}
.text-wrapper_11 {
.text-wrapper_11 {
background-color: rgba(0, 82, 217, 1);
border-radius: 10px 10px 9px 9px;
height: 3.13vw;
width: 22.92vw;
}
}
.text_46 {
.text_46 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 0.93vw;
......@@ -1674,5 +1340,5 @@
font-weight: 700;
text-align: left;
white-space: nowrap;
}
}
</style>
\ No newline at end of file
src/views/lease.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="group_1 flex-col">
<div class="section_1 flex-row justify-end">
<!-- 导航栏已移到HeaderNav组件中 -->
<div class="box_1 flex-col">
<span class="text_2">cooperation</span>
<span class="text_3">合作优势</span>
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/8178002b22a7a69a2d8ddb9644a3b939" />
</div>
<div class="box_2 flex-col">
<div class="image-wrapper_1 flex-row">
<img class="label_1"
src="https://lanhu-oss-proxy.lanhuapp.com/5d5a4d04132690a7d6dd94d2a0f0f423" />
</div>
<div class="text-wrapper_1 flex-row">
<span class="paragraph_1">轻资产运营，高回报收益，共享万亿健康产业红利<br />合作模式&nbsp;|&nbsp;灵活选择，快速启动</span>
</div>
<pageBtnGroupVue style="margin-top: -5.2vw;margin-left: -42vw;" :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'"
:btn-group="[{
name:'设备购买模式',
url:'/cooperation',
isSelect:false
......@@ -34,40 +18,37 @@
name:'代理商体系',
url:'/agent',
isSelect:false
}]" />
</div>
</div>
}]"/>
<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="https://lanhu-oss-proxy.lanhuapp.com/657ee418e362b514ee7f683a321d50c7" />
<img class="image_5" src="https://lanhu-oss-proxy.lanhuapp.com/657ee418e362b514ee7f683a321d50c7"/>
</div>
<img class="image_6" src="https://lanhu-oss-proxy.lanhuapp.com/579f993d0b2a96b6254576dd598b28f3" />
<img class="image_7" src="https://lanhu-oss-proxy.lanhuapp.com/93c6a78f6013e1e7f38a59a33327f42f" />
<img class="image_6" src="https://lanhu-oss-proxy.lanhuapp.com/579f993d0b2a96b6254576dd598b28f3"/>
<img class="image_7" src="https://lanhu-oss-proxy.lanhuapp.com/93c6a78f6013e1e7f38a59a33327f42f"/>
</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="https://lanhu-oss-proxy.lanhuapp.com/f83e72d1ddc74b329e8a1906d83858b8" />
src="https://lanhu-oss-proxy.lanhuapp.com/f83e72d1ddc74b329e8a1906d83858b8"/>
<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="https://lanhu-oss-proxy.lanhuapp.com/161db5194a90cc65a0107718ba98689f" />
<span class="paragraph_2">初创健康机构：健身工作室、美容院等，降低初期投入风险。<br />想试运营验证市场需求的投资者。</span>
src="https://lanhu-oss-proxy.lanhuapp.com/161db5194a90cc65a0107718ba98689f"/>
<span class="paragraph_2">初创健康机构：健身工作室、美容院等，降低初期投入风险。<br/>想试运营验证市场需求的投资者。</span>
</div>
<img class="image_9"
src="https://lanhu-oss-proxy.lanhuapp.com/5517f81ecd9081d65839dc6e83d96ba7" />
src="https://lanhu-oss-proxy.lanhuapp.com/5517f81ecd9081d65839dc6e83d96ba7"/>
</div>
<div class="image-text_4 flex-row justify-between">
<img class="image_10"
src="https://lanhu-oss-proxy.lanhuapp.com/6ddbce0f0185d0071abec27ca7ad0ee2" />
src="https://lanhu-oss-proxy.lanhuapp.com/6ddbce0f0185d0071abec27ca7ad0ee2"/>
<span class="text-group_2">轻资产运营理念的支持者，保险或保健品团队。</span>
</div>
</div>
......@@ -77,23 +58,23 @@
<div class="section_3 flex-col">
<div class="group_9 flex-row justify-between">
<img class="label_3"
src="https://lanhu-oss-proxy.lanhuapp.com/7423bfc3a53db5a8234f561f11c46d47" />
src="https://lanhu-oss-proxy.lanhuapp.com/7423bfc3a53db5a8234f561f11c46d47"/>
<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="https://lanhu-oss-proxy.lanhuapp.com/01c4e7004c7b35434649d9a271b29cf0" />
src="https://lanhu-oss-proxy.lanhuapp.com/01c4e7004c7b35434649d9a271b29cf0"/>
<img class="image_12"
src="https://lanhu-oss-proxy.lanhuapp.com/6abe205f626d9ef3123acd27574def27" />
src="https://lanhu-oss-proxy.lanhuapp.com/6abe205f626d9ef3123acd27574def27"/>
</div>
<span
class="text-group_3">大额购置成本：仅需支付押金+月租，即可启动运营，资金占用极低。<br />灵活退出机制：合约期满可退租或转购买（押金抵扣设备款）。</span>
class="text-group_3">大额购置成本：仅需支付押金+月租，即可启动运营，资金占用极低。<br/>灵活退出机制：合约期满可退租或转购买（押金抵扣设备款）。</span>
</div>
<div class="image-text_6 flex-row justify-between">
<img class="image_13"
src="https://lanhu-oss-proxy.lanhuapp.com/c7b0cd5af78f41734ad9bc4e1ff3d3cc" />
src="https://lanhu-oss-proxy.lanhuapp.com/c7b0cd5af78f41734ad9bc4e1ff3d3cc"/>
<span class="text-group_4">快速盈利验证：按单次收费300-800元，月均60客即可覆盖租金，剩余均为纯利。</span>
</div>
</div>
......@@ -103,16 +84,16 @@
<div class="group_12 flex-col">
<div class="section_4 flex-row justify-between">
<img class="label_4"
src="https://lanhu-oss-proxy.lanhuapp.com/c891e7af7624d72d0814d363dd499264" />
src="https://lanhu-oss-proxy.lanhuapp.com/c891e7af7624d72d0814d363dd499264"/>
<span class="text_12">政策支持</span>
</div>
<div class="section_5 flex-row">
<img class="image_14"
src="https://lanhu-oss-proxy.lanhuapp.com/14a80c7685fda29776affc015cec0b4f" />
src="https://lanhu-oss-proxy.lanhuapp.com/14a80c7685fda29776affc015cec0b4f"/>
<span class="text_13">首月免租金（限前50名签约伙伴）。</span>
<div class="image-text_7 flex-row justify-between">
<img class="image_15"
src="https://lanhu-oss-proxy.lanhuapp.com/ab839dca4d2efe1f76f53b1beaa79d68" />
src="https://lanhu-oss-proxy.lanhuapp.com/ab839dca4d2efe1f76f53b1beaa79d68"/>
<span class="text-group_5">提供客户引流支持（线上+线下推广模板）。</span>
</div>
</div>
......@@ -120,22 +101,19 @@
</div>
</div>
<!-- 使用Footer组件替代重复的页脚代码 -->
<Footer />
</div>
<Footer/>
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import SecondHeader from '../components/second_header.vue';
export default {
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......@@ -143,45 +121,45 @@
};
},
methods: {},
};
};
</script>
<style src="./common.css" />
<style src="./common.css"/>
<style scoped>
.page {
.page {
position: relative;
width: 100vw;
height: 194.07vw;
overflow: hidden;
}
}
.group_1 {
.group_1 {
position: relative;
width: 100vw;
height: 194.07vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/62dd678d224b66e829dc69063ca4b26c) 100% no-repeat;
background-size: 100% 100%;
}
}
.section_1 {
.section_1 {
width: 100vw;
height: 51.05vw;
background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/1183ce6d25e441a6b140402c64b1b3f9_mergeImage.png) 100% no-repeat;
background-size: 100% 100%;
}
}
.image_1 {
.image_1 {
width: 6.25vw;
height: 4.95vw;
margin: 0.93vw 0 0 2.6vw;
}
}
.box_1 {
.box_1 {
width: 40.21vw;
height: 30.53vw;
margin: 2.86vw 0 0 4.58vw;
}
}
.text_1 {
.text_1 {
width: 40.11vw;
height: 1.05vw;
overflow-wrap: break-word;
......@@ -193,9 +171,9 @@
white-space: nowrap;
line-height: 3.75vw;
margin-left: 0.11vw;
}
}
.text_2 {
.text_2 {
width: 28.75vw;
height: 3.03vw;
overflow-wrap: break-word;
......@@ -207,9 +185,9 @@
white-space: nowrap;
line-height: 3.75vw;
margin: 18.22vw 0 0 0.05vw;
}
}
.text_3 {
.text_3 {
width: 7.4vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -221,41 +199,41 @@
white-space: nowrap;
line-height: 2.19vw;
margin-top: 1.78vw;
}
}
.image_2 {
.image_2 {
width: 0.27vw;
height: 3.08vw;
margin: 1.56vw 0 0 0.1vw;
}
}
.box_2 {
.box_2 {
height: 51.05vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/27038ec4650aa0718cacb72e86f4f676) 100% no-repeat;
background-size: 100% 100%;
margin-left: 2.61vw;
width: 43.75vw;
position: relative;
}
}
.image-wrapper_1 {
.image-wrapper_1 {
width: 1.67vw;
height: 1.67vw;
margin: 2.6vw 0 0 39.47vw;
}
}
.label_1 {
.label_1 {
width: 1.67vw;
height: 1.67vw;
}
}
.text-wrapper_1 {
.text-wrapper_1 {
width: 40.99vw;
height: 4.28vw;
margin: 17.86vw 0 24.63vw -7.5vw;
}
}
.paragraph_1 {
.paragraph_1 {
width: 40.99vw;
height: 4.28vw;
overflow-wrap: break-word;
......@@ -265,9 +243,9 @@
font-weight: normal;
text-align: left;
line-height: 2.19vw;
}
}
.group_2 {
.group_2 {
position: absolute;
left: -42.7vw;
top: 45.84vw;
......@@ -275,9 +253,9 @@
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/faeb2a975230bce2938035ba58270853) 100% no-repeat;
background-size: 100% 100%;
}
}
.text_4 {
.text_4 {
width: 9.28vw;
height: 1.57vw;
overflow-wrap: break-word;
......@@ -289,17 +267,17 @@
white-space: nowrap;
line-height: 2.19vw;
margin: 1.82vw 0 0 4.47vw;
}
}
.text-wrapper_2 {
.text-wrapper_2 {
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/f203de88faea6af3ecbbd6d5b9def8bb) 100% no-repeat;
background-size: 100% 100%;
margin-left: 4.54vw;
width: 18.23vw;
}
}
.text_5 {
.text_5 {
width: 9.28vw;
height: 1.57vw;
overflow-wrap: break-word;
......@@ -311,9 +289,9 @@
white-space: nowrap;
line-height: 2.19vw;
margin: 1.82vw 0 0 4.42vw;
}
}
.text_6 {
.text_6 {
width: 7.77vw;
height: 1.57vw;
overflow-wrap: break-word;
......@@ -325,15 +303,15 @@
white-space: nowrap;
line-height: 2.19vw;
margin: 1.82vw 0 0 5.2vw;
}
}
.image_3 {
.image_3 {
width: 0.06vw;
height: 2.3vw;
margin: 1.45vw 0 0 5.15vw;
}
}
.text_7 {
.text_7 {
width: 7.71vw;
height: 1.52vw;
overflow-wrap: break-word;
......@@ -345,21 +323,21 @@
white-space: nowrap;
line-height: 2.19vw;
margin: 1.87vw 0 0 5.26vw;
}
}
.image_4 {
.image_4 {
width: 0.06vw;
height: 2.3vw;
margin: 1.45vw 0 0 5.2vw;
}
}
.image-text_1 {
.image-text_1 {
width: 4.38vw;
height: 1.05vw;
margin: 2.03vw 2.6vw 0 6.56vw;
}
}
.text-group_1 {
.text-group_1 {
width: 2.56vw;
height: 0.73vw;
overflow-wrap: break-word;
......@@ -371,31 +349,31 @@
white-space: nowrap;
line-height: 2.19vw;
margin-top: 0.21vw;
}
}
.thumbnail_1 {
.thumbnail_1 {
width: 0.94vw;
height: 1.05vw;
}
}
.section_2 {
.section_2 {
width: 100vw;
height: 124.85vw;
margin-bottom: 18.18vw;
}
}
.group_3 {
.group_3 {
width: 85.42vw;
height: 31.52vw;
margin: 7.29vw 0 0 13.54vw;
}
}
.box_3 {
.box_3 {
width: 58.39vw;
height: 31.52vw;
}
}
.text_8 {
.text_8 {
background-image: linear-gradient(90deg,
rgba(0, 82, 217, 1) 0,
rgba(0, 82, 217, 1) 0,
......@@ -413,9 +391,9 @@
line-height: 1.57vw;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.text_9 {
.text_9 {
width: 22.66vw;
height: 1.67vw;
overflow-wrap: break-word;
......@@ -427,51 +405,51 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 2.35vw;
}
}
.image_5 {
.image_5 {
width: 50.99vw;
height: 23.03vw;
margin: 2.03vw 0 0 7.39vw;
}
}
.image_6 {
.image_6 {
width: 2.09vw;
height: 0.63vw;
margin-left: 12.45vw;
}
}
.image_7 {
.image_7 {
width: 11.46vw;
height: 19.12vw;
margin-left: 1.05vw;
}
}
.group_4 {
.group_4 {
width: 72.92vw;
height: 20.84vw;
margin: 6.35vw 0 0 13.54vw;
}
}
.group_5 {
.group_5 {
height: 20.84vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/6deeaf5c933b774e9231d7ef3d0ca428) 0vw -0.89vw no-repeat;
background-size: 75.78vw 21.71vw;
width: 72.92vw;
}
}
.group_6 {
.group_6 {
width: 10.73vw;
height: 2.09vw;
margin: 2.96vw 0 0 3.75vw;
}
}
.label_2 {
.label_2 {
width: 2.09vw;
height: 2.09vw;
}
}
.text_10 {
.text_10 {
width: 7.4vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -483,31 +461,31 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 0.11vw;
}
}
.group_7 {
.group_7 {
width: 57.5vw;
height: 3.75vw;
margin: 4.47vw 0 7.55vw 3.54vw;
}
}
.image-text_2 {
.image-text_2 {
position: relative;
width: 29.64vw;
height: 3.75vw;
}
}
.image-text_3 {
.image-text_3 {
width: 29.64vw;
height: 3.75vw;
}
}
.image_8 {
.image_8 {
width: 1.1vw;
height: 1.05vw;
}
}
.paragraph_2 {
.paragraph_2 {
width: 27.45vw;
height: 3.75vw;
overflow-wrap: break-word;
......@@ -517,27 +495,27 @@
font-weight: normal;
text-align: left;
line-height: 1.67vw;
}
}
.image_9 {
.image_9 {
position: absolute;
left: 0;
top: 2.71vw;
width: 1.1vw;
height: 1.05vw;
}
}
.image-text_4 {
.image-text_4 {
width: 23.39vw;
height: 1.15vw;
}
}
.image_10 {
.image_10 {
width: 1.1vw;
height: 1.05vw;
}
}
.text-group_2 {
.text-group_2 {
width: 21.2vw;
height: 1.15vw;
overflow-wrap: break-word;
......@@ -548,33 +526,33 @@
text-align: left;
white-space: nowrap;
line-height: 1.67vw;
}
}
.group_8 {
.group_8 {
width: 72.92vw;
height: 20.84vw;
margin: 2.08vw 0 0 13.54vw;
}
}
.section_3 {
.section_3 {
height: 20.84vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/b363bc255e227e874a212f8745566977) 0vw -0.89vw no-repeat;
background-size: 75.78vw 21.71vw;
width: 72.92vw;
}
}
.group_9 {
.group_9 {
width: 10.73vw;
height: 1.98vw;
margin: 2.91vw 0 0 3.75vw;
}
}
.label_3 {
.label_3 {
width: 2.09vw;
height: 1.98vw;
}
}
.text_11 {
.text_11 {
width: 7.45vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -586,36 +564,36 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 0.16vw;
}
}
.group_10 {
.group_10 {
width: 66.05vw;
height: 5.53vw;
margin: 4.63vw 0 5.78vw 3.54vw;
}
}
.image-text_5 {
.image-text_5 {
width: 30.84vw;
height: 5.53vw;
}
}
.image-wrapper_2 {
.image-wrapper_2 {
width: 1.1vw;
height: 5.53vw;
}
}
.image_11 {
.image_11 {
width: 1.1vw;
height: 1.05vw;
}
}
.image_12 {
.image_12 {
width: 1.1vw;
height: 1.05vw;
margin-top: 3.44vw;
}
}
.text-group_3 {
.text-group_3 {
width: 28.65vw;
height: 5.42vw;
overflow-wrap: break-word;
......@@ -625,19 +603,19 @@
font-weight: normal;
text-align: left;
line-height: 1.67vw;
}
}
.image-text_6 {
.image-text_6 {
width: 31.93vw;
height: 2.71vw;
}
}
.image_13 {
.image_13 {
width: 1.1vw;
height: 1.05vw;
}
}
.text-group_4 {
.text-group_4 {
width: 29.74vw;
height: 2.71vw;
overflow-wrap: break-word;
......@@ -647,33 +625,33 @@
font-weight: normal;
text-align: left;
line-height: 1.67vw;
}
}
.group_11 {
.group_11 {
width: 72.92vw;
height: 20.84vw;
margin: 2.08vw 0 13.02vw 13.54vw;
}
}
.group_12 {
.group_12 {
height: 20.84vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/754cc4244240ca3825eac2bbf56b578d) 0vw -0.89vw no-repeat;
background-size: 75.78vw 21.71vw;
width: 72.92vw;
}
}
.section_4 {
.section_4 {
width: 10.47vw;
height: 2.09vw;
margin: 2.91vw 0 0 3.95vw;
}
}
.label_4 {
.label_4 {
width: 1.67vw;
height: 2.09vw;
}
}
.text_12 {
.text_12 {
width: 7.35vw;
height: 1.83vw;
overflow-wrap: break-word;
......@@ -685,20 +663,20 @@
white-space: nowrap;
line-height: 1.57vw;
margin-top: 0.16vw;
}
}
.section_5 {
.section_5 {
width: 56.1vw;
height: 1.05vw;
margin: 4.53vw 0 10.26vw 3.54vw;
}
}
.image_14 {
.image_14 {
width: 1.1vw;
height: 1.05vw;
}
}
.text_13 {
.text_13 {
width: 16.2vw;
height: 1.05vw;
overflow-wrap: break-word;
......@@ -710,20 +688,20 @@
white-space: nowrap;
line-height: 1.67vw;
margin-left: 1.15vw;
}
}
.image-text_7 {
.image-text_7 {
width: 21.98vw;
height: 1.05vw;
margin-left: 15.68vw;
}
}
.image_15 {
.image_15 {
width: 1.1vw;
height: 1.05vw;
}
}
.text-group_5 {
.text-group_5 {
width: 19.8vw;
height: 1.05vw;
overflow-wrap: break-word;
......@@ -734,9 +712,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.67vw;
}
}
.section_6 {
.section_6 {
position: absolute;
left: 0;
top: 175.84vw;
......@@ -745,15 +723,15 @@
background: url(https://lanhu-oss-proxy.lanhuapp.com/f3a3eb03f8d9c2f5d69121ff927034d6) 100% no-repeat;
background-size: 100% 100%;
justify-content: flex-center;
}
}
.box_4 {
.box_4 {
width: 34.85vw;
height: 8.91vw;
margin: 4.68vw 0 0 13.48vw;
}
}
.text_14 {
.text_14 {
width: 6.88vw;
height: 1.15vw;
overflow-wrap: break-word;
......@@ -765,9 +743,9 @@
white-space: nowrap;
line-height: 1.25vw;
margin-left: 0.06vw;
}
}
.text_15 {
.text_15 {
width: 30.11vw;
height: 0.84vw;
overflow-wrap: break-word;
......@@ -779,15 +757,15 @@
white-space: nowrap;
line-height: 1.25vw;
margin-top: 1.15vw;
}
}
.text-wrapper_3 {
.text-wrapper_3 {
width: 16.25vw;
height: 1.15vw;
margin: 2.65vw 0 0 0.1vw;
}
}
.text_16 {
.text_16 {
width: 4.54vw;
height: 1.15vw;
overflow-wrap: break-word;
......@@ -798,9 +776,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.text_17 {
.text_17 {
width: 2.3vw;
height: 1.15vw;
overflow-wrap: break-word;
......@@ -811,15 +789,15 @@
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.text-wrapper_4 {
.text-wrapper_4 {
width: 34.8vw;
height: 0.84vw;
margin: 1.14vw 0 0 0.05vw;
}
}
.text_18 {
.text_18 {
width: 9.8vw;
height: 0.84vw;
overflow-wrap: break-word;
......@@ -830,9 +808,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.text_19 {
.text_19 {
width: 20.84vw;
height: 0.84vw;
overflow-wrap: break-word;
......@@ -843,9 +821,9 @@
text-align: left;
white-space: nowrap;
line-height: 1.25vw;
}
}
.paragraph_3 {
.paragraph_3 {
width: 7.5vw;
height: 2.19vw;
overflow-wrap: break-word;
......@@ -856,23 +834,23 @@
text-align: right;
line-height: 1.25vw;
margin: 8.02vw 0 0 20.41vw;
}
}
.image-wrapper_3 {
.image-wrapper_3 {
background-color: rgba(255, 255, 255, 1);
border-radius: 30px;
height: 8.86vw;
width: 8.86vw;
margin: 4.68vw 13.54vw 0 1.35vw;
}
}
.image_16 {
.image_16 {
width: 6.25vw;
height: 6.15vw;
margin: 1.35vw 0 0 1.3vw;
}
}
.image-wrapper_4 {
.image-wrapper_4 {
height: 5.21vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/ac7da81aefa7b4057824a4f9127b678e) 100% no-repeat;
background-size: 100% 100%;
......@@ -880,11 +858,11 @@
position: absolute;
left: 79.43vw;
top: -2.6vw;
}
}
.image_17 {
.image_17 {
width: 1.36vw;
height: 0.73vw;
margin: 2.23vw 0 0 1.92vw;
}
}
</style>
\ No newline at end of file
src/views/operator.vue
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="section_1 flex-col">
<div class="box_1 flex-row justify-end">
<!-- 导航栏已移到HeaderNav组件中 -->
<div class="box_2 flex-col">
<span class="text_2">cooperation</span>
<span class="text_3">合作优势</span>
<img class="image_2" src="https://lanhu-oss-proxy.lanhuapp.com/4926f8f45c7b8960de431a2fb711cc74" />
</div>
<div class="box_3 flex-col">
<div class="image-wrapper_1 flex-row">
<img class="label_1"
src="https://lanhu-oss-proxy.lanhuapp.com/61c5472e47aa41ef42ad4d7e511100ba" />
</div>
<div class="text-wrapper_1 flex-row">
<span class="paragraph_1">轻资产运营，高回报收益，共享万亿健康产业红利<br />合作模式&nbsp;|&nbsp;灵活选择，快速启动</span>
</div>
<pageBtnGroupVue style="margin-top: -5.2vw;margin-left: -42vw;" :btn-group="[{
<SecondHeader :title="'COOPERATION'"
:bcUrl="'https://lanhu-oss-proxy.lanhuapp.com/3cdb25200d6a9cd9c567304f42cf01fa'" :desc="'合作优势'" :btn-group="[{
name:'设备购买模式',
url:'/cooperation',
isSelect:false
......@@ -35,8 +18,6 @@
url:'/agent',
isSelect:false
}]" />
</div>
</div>
<div class="box_4 flex-col">
<div class="box_5 flex-row justify-between">
<div class="group_2 flex-col">
......@@ -66,20 +47,17 @@
<!-- 使用Footer组件替代重复的页脚代码 -->
<Footer />
</div>
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
import pageBtnGroupVue from '../components/page_btn_group.vue';
import SecondHeader from '../components/second_header.vue';
export default {
components: {
HeaderNav,
Footer,
HeroSection,
pageBtnGroupVue
SecondHeader
},
data() {
return {
......
src/views/tip.vue deleted 100644 → 0
<template>
<div class="page flex-col">
<!-- 使用HeaderNav组件替代重复的导航栏 -->
<HeaderNav />
<div class="box_1 flex-col">
<div class="group_1 flex-col">
<div class="group_2 flex-col">
<div class="section_1 flex-col">
<div class="image-wrapper_1 flex-row">
<img
class="label_1"
src="https://lanhu-oss-proxy.lanhuapp.com/35353ba23ff97ba65d60f7ae05464f60"
/>
</div>
<div class="box_2 flex-row">
<div class="block_1 flex-col"></div>
</div>
<div class="box_3 flex-row">
<div class="text-group_1 flex-col justify-between">
<span class="text_1">感谢您的提交！</span>
<span class="text_2"
>我们已收到您的合作意向，专业的人员将在24小时内与您联系，请保持电话畅通。</span
>
</div>
</div>
<div class="image-wrapper_2 flex-row">
<img
class="image_1"
src="https://lanhu-oss-proxy.lanhuapp.com/51a16d5445a24b9a5bdadd501edf4e2b"
/>
</div>
<div class="box_4 flex-row">
<div class="text-wrapper_1">
<span class="text_3">直接联系信息：</span>
<span class="text_4">13641398000（雷女士）</span>
</div>
</div>
</div>
</div>
</div>
<!-- 使用Footer组件 -->
<Footer />
</div>
</div>
</template>
<script>
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import HeroSection from '@/components/HeroSection.vue'
export default {
components: {
HeaderNav,
Footer,
HeroSection
},
data() {
return {
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style scoped>
.page {
position: relative;
width: 100vw;
height: 165.32vw;
overflow: hidden;
}
.box_1 {
height: 165.32vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/8c77c00fde8dc36a7663b507929f3dee)
100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
.group_1 {
height: 165.32vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/54f3adbf4fe2132c839bfe4bb854384a)
100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
.group_2 {
height: 165.32vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/022182794b19df8ae1fc92da124ff6d8)
100% no-repeat;
background-size: 100% 100%;
width: 100vw;
}
.section_1 {
background-color: rgba(255, 255, 255, 1);
border-radius: 40px;
height: 36.36vw;
width: 52.09vw;
margin: 64.58vw 0 0 23.95vw;
}
.image-wrapper_1 {
width: 2.3vw;
height: 2.3vw;
margin: 0.98vw 0 0 48.75vw;
}
.label_1 {
width: 2.3vw;
height: 2.3vw;
}
.box_2 {
width: 6.2vw;
height: 6.2vw;
margin: 2.91vw 0 0 22.96vw;
}
.block_1 {
width: 6.2vw;
height: 6.2vw;
background: url(https://lanhu-oss-proxy.lanhuapp.com/3e5331b5e3303e1b2218ad355c8e2813)
100% no-repeat;
background-size: 100% 100%;
}
.box_3 {
width: 34.43vw;
height: 7.09vw;
margin: 1.66vw 0 0 8.43vw;
}
.text-group_1 {
width: 34.43vw;
height: 7.09vw;
}
.text_1 {
width: 15.79vw;
height: 2.5vw;
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 2.5vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
margin-left: 9.74vw;
}
.text_2 {
width: 34.43vw;
height: 3.13vw;
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: center;
line-height: 1.88vw;
margin-top: 1.46vw;
}
.image-wrapper_2 {
width: 34.8vw;
height: 0.06vw;
margin: 3.33vw 0 0 8.38vw;
}
.image_1 {
width: 34.8vw;
height: 0.06vw;
}
.box_4 {
width: 22.35vw;
height: 1.25vw;
margin: 2.6vw 0 7.96vw 14.84vw;
}
.text-wrapper_1 {
width: 22.35vw;
height: 1.25vw;
overflow-wrap: break-word;
font-size: 0;
font-family: OPPOSans-B;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_3 {
width: 22.35vw;
height: 1.25vw;
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-B;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 1.57vw;
}
.text_4 {
width: 22.35vw;
height: 1.25vw;
overflow-wrap: break-word;
color: rgba(67, 67, 67, 1);
font-size: 1.25vw;
font-family: OPPOSans-M;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 1.88vw;
}
</style>
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