<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="[{
										name:'设备购买模式',
										url:'/cooperation',
										isSelect:false
									},{
										name:'设备租赁模式',
										url:'/lease',
										isSelect:false
									},{
										name:'运营商分级',
										url:'/operator',
										isSelect:true
									},{
										name:'代理商体系',
										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">
						<div class="block_1 flex-row justify-between">
							<span class="text_8">运营商分级</span>
							<img class="image_4"
								src="https://lanhu-oss-proxy.lanhuapp.com/4d94ccc5a55d303a4919ebb498c78bd1" />
						</div>
						<span class="text_9">越早加入，收益越大</span>
						<div class="block_2 flex-col">
							<div class="image-wrapper_2 flex-row">
								<img class="image_5" :src="item.lanhuimage0" v-for="(item, index) in loopData0"
									:key="index" />
							</div>
							<div class="list_1 flex-row">
								<div class="text-group_2 flex-col justify-between" v-for="(item, index) in loopData1"
									:key="index">
									<span class="text_10" v-html="item.lanhutext0"></span>
									<span class="text_11" v-html="item.lanhutext1"></span>
								</div>
							</div>
						</div>
					</div>
					<img class="image_6" src="https://lanhu-oss-proxy.lanhuapp.com/37480a72bb3aa65fc40f94b6a3e5de2f" />
				</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'
	import pageBtnGroupVue from '../components/page_btn_group.vue';

	export default {
		components: {
			HeaderNav,
			Footer,
			HeroSection,
			pageBtnGroupVue
		},
		data() {
			return {
				loopData0: [{
						lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/4f7e1003a818bdfa61a2ad80520e31fa',
					},
					{
						lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/0297295a31cb24d28c9dc44617880a91',
					},
					{
						lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/b8d6c8edf4a46e118a510af47add3f94',
					},
					{
						lanhuimage0: 'https://lanhu-oss-proxy.lanhuapp.com/f25585b66cc9a333755d76d6a5add1cc',
					},
				],
				loopData1: [{
						lanhutext0: '一般运营商',
						lanhutext1: 'General&nbsp;operator'
					},
					{
						lanhutext0: '银牌运营商',
						lanhutext1: 'Silver&nbsp;operator'
					},
					{
						lanhutext0: '金牌运营商',
						lanhutext1: 'Gold&nbsp;Operator'
					},
					{
						lanhutext0: '钻石运营商',
						lanhutext1: 'Diamond&nbsp;operator'
					},
				],
				constants: {},
			};
		},
		methods: {},
	};
</script>
<style src="./common.css" />
<style scoped>
	.page {
		position: relative;
		width: 100vw;
		height: 128.65vw;
		overflow: hidden;
	}

	.section_1 {
		position: relative;
		width: 100vw;
		height: 128.65vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/a27c35e937aa4e12aea16815570da728) 100% no-repeat;
		background-size: 100% 100%;
	}

	.box_1 {
		width: 100vw;
		height: 51.05vw;
		background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/194f26c02f9241948fff44169fc25a81_mergeImage.png) 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.21vw;
		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: 28.75vw;
		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.05vw;
	}

	.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.78vw;
	}

	.image_2 {
		width: 0.27vw;
		height: 3.08vw;
		margin: 1.56vw 0 0 0.1vw;
	}

	.box_3 {
		height: 51.05vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/7c31beb5b499b356dc860a6d44fd9a4f) 100% no-repeat;
		background-size: 100% 100%;
		margin-left: 2.61vw;
		width: 43.75vw;
		position: relative;
	}

	.image-wrapper_1 {
		width: 1.67vw;
		height: 1.67vw;
		margin: 2.6vw 0 0 39.47vw;
	}

	.label_1 {
		width: 1.67vw;
		height: 1.67vw;
	}

	.text-wrapper_1 {
		width: 40.99vw;
		height: 4.28vw;
		margin: 17.86vw 0 24.63vw -7.5vw;
	}

	.paragraph_1 {
		width: 40.99vw;
		height: 4.28vw;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 1.87vw;
		font-family: OPPOSans-R;
		font-weight: normal;
		text-align: left;
		line-height: 2.19vw;
	}

	.group_1 {
		position: absolute;
		left: -42.7vw;
		top: 45.84vw;
		width: 86.46vw;
		height: 5.21vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/dc51e580c2eaac765525b36bf53b4f2f) 100% no-repeat;
		background-size: 100% 100%;
	}

	.text_4 {
		width: 9.28vw;
		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 4.47vw;
	}

	.image_3 {
		width: 0.06vw;
		height: 2.3vw;
		margin: 1.92vw 0 0 4.47vw;
	}

	.text_5 {
		width: 9.28vw;
		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 4.42vw;
	}

	.text-wrapper_2 {
		height: 5.21vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/e12d5ff8ead3bcd1087c58c1603cfa80) 100% no-repeat;
		background-size: 100% 100%;
		margin-left: 4.43vw;
		width: 18.23vw;
	}

	.text_6 {
		width: 7.77vw;
		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.31vw;
	}

	.text_7 {
		width: 7.71vw;
		height: 1.52vw;
		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.87vw 0 0 5.31vw;
	}

	.image-text_1 {
		width: 4.38vw;
		height: 1.05vw;
		margin: 2.03vw 2.6vw 0 11.82vw;
	}

	.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;
	}

	.box_4 {
		width: 100vw;
		height: 59.43vw;
		margin-bottom: 18.18vw;
	}

	.box_5 {
		width: 85.47vw;
		height: 39.07vw;
		margin: 7.29vw 0 0 13.48vw;
	}

	.group_2 {
		width: 72.97vw;
		height: 39.07vw;
	}

	.block_1 {
		width: 72.97vw;
		height: 2.45vw;
	}

	.text_8 {
		background-image: linear-gradient(90deg,
				rgba(0, 82, 217, 1) 0,
				rgba(0, 82, 217, 1) 0,
				rgba(0, 199, 218, 1) 100%,
				rgba(0, 199, 218, 1) 100%);
		width: 12.45vw;
		height: 2.45vw;
		overflow-wrap: break-word;
		color: rgba(0, 82, 217, 1);
		font-size: 2.5vw;
		font-family: OPPOSans-B;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 1.57vw;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.image_4 {
		width: 2.09vw;
		height: 0.63vw;
	}

	.text_9 {
		width: 15.21vw;
		height: 1.83vw;
		overflow-wrap: break-word;
		color: rgba(67, 67, 67, 1);
		font-size: 1.66vw;
		font-family: OPPOSans-R;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 1.57vw;
		margin: 2.39vw 0 0 0.05vw;
	}

	.block_2 {
		width: 72.92vw;
		height: 28.13vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/128dea2f974433d36ea394d22c161702) -0.16vw -0.16vw no-repeat;
		background-size: 73.22vw 28.43vw;
		margin: 4.27vw 0 0 0.05vw;
	}

	.image-wrapper_2 {
		width: 65.94vw;
		height: 11.15vw;
		margin: 4.16vw 0 0 4.42vw;
	}

	.image_5 {
		width: 9.43vw;
		height: 10.21vw;
		margin: 0.72vw 8.33vw 0 0;
	}

	.list_1 {
		width: 63.13vw;
		height: 3.18vw;
		justify-content: space-between;
		margin: 3.38vw 0 6.25vw 4.89vw;
	}

	.text-group_2 {
		width: 8.39vw;
		height: 3.18vw;
		margin-right: 9.85vw;
	}

	.text_10 {
		width: 8.44vw;
		height: 1.67vw;
		overflow-wrap: break-word;
		color: rgba(67, 67, 67, 1);
		font-size: 1.66vw;
		font-family: OPPOSans-B;
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		line-height: 1.57vw;
	}

	.text_11 {
		width: 7.87vw;
		height: 0.99vw;
		overflow-wrap: break-word;
		color: rgba(67, 67, 67, 1);
		font-size: 1.25vw;
		font-family: DINEngsbek-Alternate;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 1.25vw;
		margin: 0.52vw 0 0 0.36vw;
	}

	.image_6 {
		width: 11.46vw;
		height: 19.12vw;
	}

	.box_6 {
		position: absolute;
		left: 0;
		top: 110.42vw;
		width: 100vw;
		height: 18.23vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/0750a15a5ce4b96a9b3ee715e06fbac4) 100% no-repeat;
		background-size: 100% 100%;
		justify-content: flex-center;
	}

	.box_7 {
		width: 34.85vw;
		height: 8.91vw;
		margin: 4.68vw 0 0 13.48vw;
	}

	.text_12 {
		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_13 {
		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_3 {
		width: 16.25vw;
		height: 1.15vw;
		margin: 2.65vw 0 0 0.1vw;
	}

	.text_14 {
		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_15 {
		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_4 {
		width: 34.8vw;
		height: 0.84vw;
		margin: 1.14vw 0 0 0.05vw;
	}

	.text_16 {
		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_17 {
		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_2 {
		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_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_7 {
		width: 6.25vw;
		height: 6.15vw;
		margin: 1.35vw 0 0 1.3vw;
	}

	.image-wrapper_4 {
		height: 5.21vw;
		background: url(https://lanhu-oss-proxy.lanhuapp.com/c95aa795b4876c98d94ce1dc72d7d99b) 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>