hldy_xcx/pages/login/xuanchuan.vue

<template>
	<view class="font-father">
		<!-- <image class="title-img" :src="`https://www.focusnu.com/media/directive/login/introduce/allbgc.png`" /> -->
		<swiper style="width: 100%;" :duration="150" :style="{height: `92vh`}" :current="which" @change="swiperchange">
			<swiper-item style="position: relative;">
				<image class="title-img" :src="`https://www.focusnu.com/media/directive/login/bgc0.jpg`" />
				<view style="width: 100%;padding-left: 75rpx;padding-right: 75rpx;position: absolute;left: 0;bottom: 100rpx;">
					<view class="title-name">
						<!-- <view class="gray-heng"></view> -->
						<view class="font-weight">
							长者入住
						</view>
						<!-- <view class="gray-heng"></view> -->
					</view>
					<!-- <image class="white-imge-spec" src="https://www.focusnu.com/media/directive/login/old1.png" /> -->
					<view class="yuangong-font">
						&#x3000;&#x3000;提供专业照料，涵盖日常、饮食、清洁、排泄等方面，7*24
						小时生命体征监测，医护团队协同护航，量身定制科学的护理流程，护理员贴心床前陪伴，让长者感受家的温暖与关怀。
					</view>
				</view>
			</swiper-item>
			<swiper-item style="position: relative;">
				<image class="title-img" :src="`https://www.focusnu.com/media/directive/login/bgc1.jpg`" />
				<view style="width: 100%;padding-left: 75rpx;padding-right: 75rpx;position: absolute;left: 0;bottom: 100rpx;">
					<view class="title-name">
						<!-- <view class="gray-heng"></view> -->
						<view class="font-weight">
							员工入驻
						</view>
						<!-- <view class="gray-heng"></view> -->
					</view>
					<!-- <image class="white-imge-spec" src="https://www.focusnu.com/media/directive/login/yuangong1.png" /> -->

					<view class="yuangong-font">
						&#x3000;&#x3000;入驻护理单元，遵循标准护理流程，提供长者床旁照护，用专业技能与人文关怀共同守护长者健康。依托物联设备优化服务流程，依托员工培训提升照护能力，确保服务精准高效。
					</view>

				</view>
			</swiper-item>
			<swiper-item style="position: relative;">
				<image class="title-img" :src="`https://www.focusnu.com/media/directive/login/bgc2.jpg`" />
				<view style="width: 100%;padding-left: 75rpx;padding-right: 75rpx;position: absolute;left: 0;bottom: 150rpx;">
					<view class="title-name">
						<!-- <view class="gray-heng"></view> -->
						<view class="font-weight">
							机构加盟
						</view>
						<!-- <view class="gray-heng"></view> -->
					</view>
					<!-- <image class="white-imge-spec" src="https://www.focusnu.com/media/directive/login/jigou.png" /> -->

					<view class="yuangong-font">
						&#x3000;&#x3000;加盟护理单元，坐拥成熟运营体系，精简人力配置，降低运营成本。优质资源共享，多重优势协同发力，全方位拓宽利润空间，助力占领银发赛道。
					</view>

				</view>
			</swiper-item>
		</swiper>
		<view class="dian-father" v-if="which!=2">
			<view v-for="(item,index) in [1,2,3]" :key="index" :class="which===index ?`dian-target` :`dian`"></view>
		</view>
		<view class="bottom-button" v-if="which==2" @click="jumpto">
			前往注册
		</view>
	</view>


</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	const jumpto = () => {
		uni.redirectTo({
			url: `/pages/login/index`
		});
	}
	const which = ref(0);

	const swiperchange = (res) => {
		// whichMenu.value = res.detail.current
		which.value = res.detail.current
	}
</script>

<style lang="scss" scoped>
	.font-father {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f7f9;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;

		.title-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 92vh;
			z-index: -1;
		}

		.title-name {
			width: 100%;
			height: 100rpx;
			margin-top: 200rpx;
			// background-color: red;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.gray-heng {
				height: 2rpx;
				width: 200rpx;
				background-color: rgb(217, 217, 217);
			}

			.font-weight {
				font-weight: 600;
				font-size: 35rpx;
				margin: 0 auto;
			}

		}
	}

	.white-imge-spec {
		width: 100%;
		margin: 0 auto;
		height: 320rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.duanluo {
		margin: 18rpx 0;
		width: 100%;
		padding: 0 25rpx;

		.duanluo-title {
			display: flex;
			font-size: 32rpx;
			margin-bottom: 15rpx;
		}
	}

	.dian-father {
		width: 100%;
		display: flex;
		justify-content: center;

		.dian {
			width: 20rpx;
			height: 20rpx;
			margin: 0 10rpx;
			border-radius: 50%;
			background-color: #CCCCCC;
		}

		.dian-target {
			width: 20rpx;
			height: 20rpx;
			margin: 0 10rpx;
			border-radius: 50%;
			background-color: #2792FC;
		}
	}

	.yuangong-font {
		font-size: 32rpx;
		margin-top: 30rpx;
		line-height: 50rpx;
	}

	.bottom-button {
		// margin-left: 5%;
		margin-top: -20rpx;
		width: 80%;
		height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(to left, #00C9FF, #0076FF);
		color: #fff;
		font-size: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 3;
	}
</style>