officialAccount/pages/login/threeselectone.vue

<template>
	<view class="login-container">
		<!-- <view class="title">
			<image class="title-imge" src="https://www.focusnu.com/media/directive/index/nu.png" @click="ceshi" />
			<view class="title-font">
				<view class="">您好，</view>
				<view class="">欢迎使用护理单元~</view>
			</view>
		</view> -->
		<image class="photo-imge" src="https://www.focusnu.com/media/directive/index/indexgif.gif" mode="widthFix"
			lazy-load="false" />
		<!-- <image class="photo-imge" src="https://www.focusnu.com/media/directive/index/bgc.png" /> -->
		<!-- <image class="old-imge" src="https://www.focusnu.com/media/directive/index/old.png" /> -->
		<!-- 	<view class="under-container">
			<three style="width: 90%;margin-left: 5%;" @updateCenterIndex="changePhoto" />
			<view class="font-father">
				<view class="font">
					{{fontArray[itemTarget]}}
				</view>
			</view>
			<view class="button-father" v-if="itemTarget==0">
				<view class="button-blue" @click="jumpToindex">
					绑定单元
				</view>
			</view>
			<view class="button-father" v-if="itemTarget==2">
				<view class="button-blue" style="margin-right: 30rpx;" @click="gotowork(0)">
					审核详情
				</view>
				<view class="button-blue" @click="">
					申请入驻
				</view>
			</view>
			<view class="button-father" v-if="itemTarget==1">
				<view class="button-blue" style="margin-right: 30rpx;"  @click="gotowork(1)">
					审核详情
				</view>
				<view class="button-blue" @click="gotoadd">
					申请加盟
				</view>
			</view>
		</view> -->
		<view class="card-title">
			恭喜您已成功绑定手机 <text style="color: #01A9FF ;">{{phone}}</text>，现在您可以：
		</view>
		<view class="card">
			<view class="card-left">
				<view class="card-weight">
					长者入住
				</view>
				<view class="card-text">
					护理单元日常护理涵盖生活照料、健康监测、康复护理及心理关怀，为老人提供贴心照护服务。
				</view>
				<view class="white-button" @click="jumpToindex">
					申请入住
				</view>
			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/old.png" />
			</view>
		</view>
		<view class="card">
			<view class="card-left">
				<view class="card-weight">
					员工入驻
				</view>
				<view class="card-text">
					护理员严格按标准流程，定时为失能老人开展床旁照护，用专业与温情守护老人生活与健康。
				</view>
				<view style="display: flex;">
					<!-- 	<view class="white-button" style="margin-right: 30rpx;">
						审核列表
					</view> -->
					<view class="white-button">
						申请入驻
					</view>
				</view>
			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/yuangong.png" />
			</view>
		</view>
		<view class="card" style="height: 330rpx;">
			<view class="card-left">
				<view class="card-weight">
					机构加盟
				</view>
				<view class="card-text">
					加盟我们，共享银发经济红利！依托成熟运营体系，标准化服务流程降低人力成本及管理开支，背靠品牌资源，助力企业快速实现营收增长。
				</view>
				<view style="display: flex;">
					<!-- <view class="white-button" style="margin-right: 30rpx;" @click="gotowork(1)">
						审核列表
					</view> -->
					<view class="white-button" @click="gotoadd">
						申请加盟
					</view>
				</view>

			</view>
			<view class="card-right">
				<image class="right-imge" src="https://www.focusnu.com/media/directive/login/gongsi.png" @click="ceshi" />
			</view>
		</view>
		<view class="blue-button" @click="close">
			关闭
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// import three from "@/compontent/public/photohuadong.vue";

	const itemTarget = ref(0);
	const fontArray = ["护理院日常护理涵盖生活照料、健康监测、康复护理及心理关怀，为老人提供贴心照护。", "护理员日常为老人提供饮食起居照料、协助康复训练监测健康状况，陪伴交流并做好环境清洁。",
		"护理员日常为老人提供饮食起居照料、协助康复训练监测健康状况，陪伴交流并做好环境清洁。"
	]

	const changePhoto = (index) => {
		itemTarget.value = index;
	}
	const ceshi = () => {
		uni.navigateTo({
			url: `/pages/login/workjoin?type=1`
		});
	}
	
	const jumpToindex = () => {
		uni.navigateTo({
			url: `/pages/index/index`
		});
	}
	const gotowork = (number) => {
		uni.navigateTo({
			url: `/pages/login/workjoin?type=${number}`
		});
	}
	const gotoadd = () => {
		uni.setStorageSync('specicalid', "");
		uni.setStorageSync("baddata", "")
		uni.navigateTo({
			url: `/pages/addjigou/name`
		});
		// uni.navigateTo({
		// 	url: `/pages/addjigou/where` 
		// });
	}
	const close = () => {
		uni.exitMiniProgram({});
	}
	const phone = ref("")
	onLoad(() => {
		phone.value = uni.getStorageSync('tel');
	})
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;

		.title {
			margin-top: 180rpx;
			align-items: center;

			.title-imge {
				width: 100rpx;
				height: 105rpx;
				margin-left: 100rpx;
			}

			.title-font {
				font-size: 35rpx;
				font-weight: 600;
				margin-left: 105rpx;
				margin-top: 10rpx;
			}
		}

		.photo-imge {
			position: absolute;
			top: 40rpx;
			left: 0;
			width: 100%;
			height: 1100rpx;

		}

		.old-imge {
			position: absolute;
			right: 30rpx;
			top: 400rpx;
			width: 400rpx;
			height: 400rpx;
		}

		.under-container {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 63vh;
			background-color: #fff;
			// border-top-left-radius: 50rpx;
			// border-top-right-radius: 50rpx;
			// box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	.font-father {
		width: 100%;
		color: #666666;
		justify-content: center;
		display: flex;

		.font {
			width: 60%;
		}
	}

	.button-father {
		width: 100%;
		margin-top: 80rpx;
		display: flex;
		justify-content: center;

		.button-blue {
			width: 40%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			border-radius: 43rpx;
			background: linear-gradient(to right, #00C9FF, #0076FF);
			color: #fff;
			font-size: 33rpx;
			margin-bottom: 30rpx;
		}
	}

	.card-title {
		z-index: 1;
		margin-top: 600rpx;
		width: 92%;
		margin-left: 4%;
		height: 100rpx;
		border-radius: 35rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.card {
		z-index: 1;
		margin-top: 30rpx;
		width: 92%;
		margin-left: 4%;
		height: 300rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;

		.card-left {
			height: 100%;
			width: 80%;
			padding-left: 50rpx;
			padding-right: 20rpx;

			.card-weight {
				font-size: 32rpx;
				font-weight: 600;
				margin-top: 35rpx;
				margin-bottom: 10rpx;
			}

			.card-text {
				color: #999999;
				font-size: 25rpx;

			}

			.white-button {
				width: 180rpx;
				height: 65rpx;
				margin-top: 15rpx;
				background-color: #f6f6f6;
				border-radius: 30rpx;
				color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.card-right {
			height: 100%;
			width: 20%;

			.right-imge {
				width: 100rpx;
				height: 100rpx;
				margin-top: 50rpx;
				margin-left: 5rpx;
			}
		}

		// .right-imge
	}

	.blue-button {
		width: 92%;
		margin-left: 4%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		border-radius: 30rpx;
		background: linear-gradient(to left, #00C9FF, #0076FF);
		color: #fff;
		font-size: 33rpx;
		margin-bottom: 60rpx;
		margin-top: 40rpx;
	}
</style>