<template>
	<view class="login-container">
		<view class="small-ball" :style="{top:`${moveHeight}px`}" @click="clickSmallball">
			<view class="small-dian" v-if="hong">
				{{ hong }}
			</view>
			<image class="small-ball-img" src="https://www.focusnu.com/media/directive/index/ling.png" />
		</view>
		<view class="index-up">
			<image class="index-up-img" src="https://www.focusnu.com/media/directive/index/indexgif.gif" mode="widthFix"
				lazy-load="false" />
		</view>
		<model :show="show" @close="show=false" :content="content" />
		<swiper style="width: 100%;position: fixed;bottom: 0;left: 0;" :duration="150" :style="{minHeight: `100vh`}"
			:current="which" @change="swiperchange">

			<view v-for="(item,index) in menuArray" :key="index">
				<swiper-item>
					<view class="white-content-father">

						<view style="z-index: 1;width: 100%;position: relative;"
							v-if="item.applyStatus!=`-1`&& item.elderInfo">
							<view class="two-card">
								<view class="left-card">
								<!-- 	NUID:{{ item.elderInfo && item.elderInfo.nuId  }} -->
									<view class="left-card-view">
										<image class="left-card-imge"
											src="https://www.focusnu.com/media/directive/index/uniicon.png" />
										{{ item.nuName  }}
									</view>
									<view
										style="font-size: 45rpx;font-weight: 600;margin-top: 70rpx;display: flex;justify-content: space-between;align-items: center;color: black;">
										{{ timeText }}
										<image style="width: 50rpx;height: 50rpx;"
											src="https://www.focusnu.com/media/directive/index/oldmanphoto/time.png"
											mode="widthFix" lazy-load="false" />
									</view>
									<view style="display: flex;margin-left: 5rpx;font-size: 24rpx;">
										{{ dateText  }}
										<view style="margin-left: 20rpx;">
											{{ weekdayText  }}
										</view>

									</view>

								</view>
								<view class="right-card">
									<view class="right-top-card">
										<image style="width: 70rpx;height: 70rpx;margin-right: 10rpx;"
											:src="`https://www.focusnu.com/media/directive/index/oldmanphoto/${item.elderInfo.sex == '男'?`old`:`woman`}.png`"
											mode="widthFix" lazy-load="false" />
										<view class="">
											<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 8rpx;">
												{{ (item.elderInfo && item.elderInfo.name)  }}
											</view>
											<view style="margin-left: 5rpx;font-size: 23rpx;display: flex;">
												<view>
													{{ item.elderInfo?.sex }}
												</view>
												<view class="gray-shu">

												</view>
												<view class="">
													<text style="font-weight: 600;white-space: nowrap;">
														{{ getAge(item.elderInfo.dateOfBirth) }}岁
													</text>

												</view>
												<view class="gray-shu">

												</view>
												{{ item.elderInfo?.dateOfBirth.replace('年', '.').replace('月', '.').replace('日', '') }}
											</view>
										</view>


									</view>
									<view class="right-top-card"
										style="margin-top: 20rpx;padding: 0 30rpx;font-size: 25rpx;">
										<view
											style="display: flex;width: 50%;padding-left: 15rpx;align-items: center;justify-content: space-around;">
											<!-- <image style="width: 45rpx;height: 45rpx;margin-bottom: 5rpx;"
												src="https://www.focusnu.com/media/directive/index/oldmanphoto/wen.png"
												mode="widthFix" lazy-load="false" /> -->
												<image style="width: 45rpx;height: 45rpx;margin-bottom: 5rpx;"
													src="https://www.focusnu.com/media/directive/index/oldmanmenu/wendu.png"
													mode="widthFix" lazy-load="false" />
												
											<view style="display: flex;flex-direction: column;">
												<view style="font-size: 25rpx;margin-right: 15rpx;">
													温度
												</view>
												<view style="font-size: 25rpx;">
													{{ (item.humidDeviceList && item.humidDeviceList[0] && item.humidDeviceList[0].temperature !== undefined && item.humidDeviceList[0].temperature !== null) ? item.humidDeviceList[0].temperature : '—' }}℃
												</view>
											</view>
										</view>
										<view
											style="display: flex;align-items: center;width: 50%;padding-left: 15rpx; justify-content: space-around;">
											<image style="width: 45rpx;height: 45rpx;margin-bottom: 5rpx;"
												src="https://www.focusnu.com/media/directive/index/oldmanphoto/shi.png"
												mode="widthFix" lazy-load="false" />
											<view style="display: flex;flex-direction: column;">
												<view style="font-size: 25rpx;margin-right: 15rpx;">
													湿度
												</view>
												<view style="font-size: 25rpx;">
													{{ (item.humidDeviceList && item.humidDeviceList[0] && item.humidDeviceList[0].humidity !== undefined && item.humidDeviceList[0].humidity !== null)
														   ? item.humidDeviceList[0].humidity
														   : '—'   }}%
												</view>
											</view>
										</view>
										


									</view>
								</view>
							</view>
							<!-- <view class="zhiling-box">
								<view style="margin-left: 30rpx;">
									<view style="font-size: 40rpx;font-weight: 600;">
										{{ item.elderInfo && item.elderInfo.name }}
									</view>
									<view style="display: flex;color: #7C788D;margin-left: 5rpx;">
										NUID
										<view style="margin-left: 20rpx;">
											{{ item.elderInfo && item.elderInfo.nuId  }}
										</view>

									</view>
								</view>
								<view style="display: flex;align-items: center;">
									<image style="width: 50rpx;height: 50rpx;margin-left: 10rpx;"
										src="https://www.focusnu.com/media/directive/index/oldmanmenu/wendu.png"
										mode="widthFix" lazy-load="false" />
									<view class="">
										<view style="font-size: 28rpx;margin-left: 5rpx;">
											温度
										</view>
										<view style="font-size: 28rpx;">
											{{ (item.humidDeviceList && item.humidDeviceList[0] && item.humidDeviceList[0].temperature !== undefined && item.humidDeviceList[0].temperature !== null) ? item.humidDeviceList[0].temperature : '—' }}℃
										</view>
									</view>
									<image style="width: 50rpx;height: 50rpx;margin-left: 30rpx;"
										src="https://www.focusnu.com/media/directive/index/oldmanmenu/shidu.png"
										mode="widthFix" lazy-load="false" />
									<view style="margin-right: 50rpx;margin-left: 10rpx;">
										<view style="font-size: 28rpx;margin-left: 5rpx;">
											湿度
										</view>
										<view style="font-size: 28rpx;">
											{{ (item.humidDeviceList && item.humidDeviceList[0] && item.humidDeviceList[0].humidity !== undefined && item.humidDeviceList[0].humidity !== null)
											   ? item.humidDeviceList[0].humidity
											   : '—'   }}%
										</view>
									</view>
								</view>

							</view> -->
							<view class="white-box-father">
								<view v-for="(item0,index) in buttonArray" :key="index" class="white-box"
									@click="clickButton(item,index)">
									<image class="box-img"
										:src="`https://www.focusnu.com/media/directive/index/oldmanphoto/${index}.png?_t=+ new Date().getTime()`" />
									<view class="box-font">{{item0}}</view>

								</view>
								<!-- <view class="white-box">
									<image class="box-img" style="width: 40rpx;height: 40rpx;"
										:src="`https://www.focusnu.com/media/directive/index/oldmanphoto/more.png`" />
								</view> -->
							</view>
						</view>

					</view>
					<view class="zhiling-box" v-if="item.applyStatus!=`-1`&& !item.elderInfo">
						<view class="zhiling-box">
							<view style="margin-left: 30rpx;">
								<view style="font-size: 40rpx;font-weight: 600;">
									{{ timeText }}
								</view>
								<view style="display: flex;color: #7C788D;margin-left: 5rpx;">
									{{ dateText  }}
									<view style="margin-left: 20rpx;">
										{{ weekdayText  }}
									</view>

								</view>
							</view>
							<view style="display: flex;align-items: center;">
								<image style="width: 50rpx;height: 50rpx;margin-left: 10rpx;"
									src="https://www.focusnu.com/media/directive/index/oldmanmenu/wendu.png"
									mode="widthFix" lazy-load="false" />
								<view class="drcon">
									<view style="font-size: 28rpx;margin-left: 5rpx;">
										温度
									</view>
									<view style="font-size: 28rpx;">
										{{ (item.humidDeviceList && item.humidDeviceList[0] && item.humidDeviceList[0].temperature !== undefined && item.humidDeviceList[0].temperature !== null) ? item.humidDeviceList[0].temperature : '—' }}℃
									</view>
								</view>
								<image style="width: 50rpx;height: 50rpx;margin-left: 30rpx;"
									src="https://www.focusnu.com/media/directive/index/oldmanmenu/shidu.png"
									mode="widthFix" lazy-load="false" />
								<view style="margin-right: 50rpx;margin-left: 10rpx;" class="drcon">
									<view style="font-size: 28rpx;margin-left: 5rpx;">
										湿度
									</view>
									<view style="font-size: 28rpx;">
										{{ (item.humidDeviceList && item.humidDeviceList[0] && item.humidDeviceList[0].humidity !== undefined && item.humidDeviceList[0].humidity !== null)
										   ? item.humidDeviceList[0].humidity
										   : '—'   }}%
									</view>
								</view>
							</view>

						</view>
						<!-- <view style="display: flex;align-items: center;">
							<view style="color: #999999;margin-right: 5rpx;">
								更多
							</view>
							<image class="zhiling-img"
								src="https://www.focusnu.com/media/directive/index/mine/more.png" />
						</view> -->

					</view>

					<view class="white-content" style="margin: 0 auto;margin-top: 30rpx;height: 582rpx;"
						v-if="item.applyStatus!=`-1` && !item.elderInfo">
						<view style="display: flex;width: 100%;margin-top: 30rpx;align-items: center;">
							<view class="blue-shu"></view>
							<view class="blue-font">
								{{ item.nuName }}
							</view>

						</view>
						<image class="white-content-secondimg-zero"
							src="https://www.focusnu.com/media/directive/index/oldmanmenu/bgc.png" lazy-load="false" />
						<view class="button-blue-zero" @click="searchjigou(item)">
							添加长者
						</view>
					</view>
					<view class="white-content" style="margin: 0 auto;margin-top: 0rpx;height: 750rpx;"
						v-if="item.applyStatus==`-1`">
						<view style="display: flex;width: 100%;margin-top: 30rpx;align-items: center;">
							<view class="blue-shu"></view>
							<view class="blue-font">
								长者入住
							</view>

						</view>
						<image class="white-content-secondimg"
							src="https://www.focusnu.com/media/directive/index/oldmanbgc.png" lazy-load="false" />
						<view class="button-blue">
							<view class="button-ball-father" @click="jumpSaoyisao">
								<view class="button-ball-blue">
									<image class="button-ball-img"
										:src="`https://www.focusnu.com/media/directive/index/saoyisaowhite.png`" />
								</view>
								扫码添加
							</view>
							<view class="button-ball-father" style="margin-left: 100rpx;" @click="jumpInput">
								<view class="button-ball-blue" style="background: #F5F5F5;">
									<image class="button-ball-img" style="width: 70%;height:70%"
										:src="`https://www.focusnu.com/media/directive/index/shoudong.png`" />
								</view>
								手动录入
							</view>
						</view>
					</view>

					<!-- <view class="white-content-father-time" v-if="item.applyStatus!=`-1`&& !item.elderInfo">
						<view class="white-content" style="background-color: transparent;">
							<view class="white-bgc">
								{{ item.departName }}
							</view>

						</view>
					</view> -->
				</swiper-item>
			</view>
		</swiper>
		<view
			style="z-index:999;position: fixed;bottom: 150rpx; width: 100%;display: flex;align-items: center;flex-direction: column;margin-top: -25rpx;height: 100rpx;">
			<view class="jia-box">
				<view v-for="(item,index) in menuArray" :key="index" @click="changecard(index)">
					<view :class="whichMenu==index? `black-box` :`gray-box`" v-if="index != menuArray.length - 1">
					</view>
					<view class="jia" @click="moveend" v-if="index == menuArray.length - 1">
						<image class="jia-img" :src="`https://www.focusnu.com/media/directive/index/bluejia.png`" />
					</view>
				</view>
			</view>
			<view class="btnname" @click="jumpt(menuArray[whichMenu]?.departName)">
				{{menuArray[whichMenu]?.departName}}
			</view>
		</view>
		<downMenu :itemTarget="0" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		getMessageList
	} from '@/pages/addstaff/api/addjigou.js'
	import {
		getIndex,
		isRead,
		queryElders,
		getOrgNuId
	} from './api.js'
	// import {
	// 	getOrgNuId
	// } from './api.js'
	import request from '@/request/index.js'
	import downMenu from '@/compontent/public/oldmandownmenu.vue'
	import model from "@/compontent/public/model.vue"

	const show = ref(false);

	const content = ref("");

	const buttonArray = ref(["护理服务", "医疗服务", "缴费记录", "视频影像", "外出申请", "长者信息", "监护人","缴费账单"])
	// const buttonArray = ref(["护理服务", "缴费账单", "账单查询", "视频影像", "外出申请", "长者信息", "监护人" ])
	const statusarray = ["loading", "success", "fail"]
	const which = ref(0);

	const timeText = ref('') // 21:23:26
	const dateText = ref('') // 05月22日
	const weekdayText = ref('') // 周四
	const fullText = ref('') // 21:23:26 05月22日 周四

	let timer = null

	const pad = (n) => String(n).padStart(2, '0')

	function formatParts(d) {
		const hh = pad(d.getHours())
		const mm = pad(d.getMinutes())
		const ss = pad(d.getSeconds())
		const month = pad(d.getMonth() + 1)
		const day = pad(d.getDate())
		const weekdayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
		return {
			time: `${hh}:${mm}:${ss}`,
			date: `${month}月${day}日`,
			weekday: weekdayMap[d.getDay()],
		}
	}

	function parseToDate(dateInput) {
		if (!dateInput) return null;
		if (dateInput instanceof Date) return dateInput;
		const s = String(dateInput).trim();
		// 支持 "1986-12-12", "1986/12/12", "1986年12月12日"
		const m = s.match(/^(\d{4})\D+(\d{1,2})\D+(\d{1,2})/);
		if (!m) return null;
		const year = parseInt(m[1], 10);
		const month = parseInt(m[2], 10) - 1; // JS 月份 0-11
		const day = parseInt(m[3], 10);
		return new Date(year, month, day);
	}

	function getAge(birth) {
		const bd = parseToDate(birth);
		if (!bd || Number.isNaN(bd.getTime())) return null; // 输入不合法返回 null
		const today = new Date();
		let age = today.getFullYear() - bd.getFullYear();
		const monthDiff = today.getMonth() - bd.getMonth();
		if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < bd.getDate())) {
			age -= 1;
		}
		return age;
	}

	function updateWithDate(d = new Date()) {
		const {
			time,
			date,
			weekday
		} = formatParts(d)
		timeText.value = time
		dateText.value = date
		weekdayText.value = weekday
		fullText.value = `${time} ${date} ${weekday}`
	}

	onLoad(() => {
		// 进入页面时立即更新一次，然后每秒刷新（如果不需要定时刷新，删掉 setInterval）
		updateWithDate()
		timer = setInterval(() => updateWithDate(), 1000)
	})
	onUnload(() => {
		if (timer) clearInterval(timer)
	})
	// const openLook = (res) => {
	// 	content.value = res;
	// 	show.value = true
	// }
	const clickButton = (item, index) => {

		switch (index) {
			case 7:
				uni.navigateTo({
					url: `/pages/oldmanindex/paybill`
				});
				break
			case 2:
				// console.log("NNNN",item.orgCode)
				uni.navigateTo({
					url: `/pages/oldmanindex/moneylist?nuId=${item.nuId}&&orgCode=${item.orgCode}`
				});
				break
			case 5:
				queryElders(item.elderId, item.orgCode).then(res => {
					uni.navigateTo({
						url: `/pages/addoldman/oldmanall?element=${JSON.stringify(res.result[0])}`
					});
				})
				break
			case 6:
				// if (item.guardianModifyStatus == '1') {
				// 	openLook("监护人信息正在审核中，请等待")
				// } else {
				// 	queryElders(item.elderId, item.orgCode).then(res => {
				// 		uni.navigateTo({
				// 			url: `/pages/addoldman/jianhurenall?element=${JSON.stringify(res.result[0])}`
				// 		});

				// 	})
				// }
				queryElders(item.elderId, item.orgCode).then(res => {
					uni.navigateTo({
						url: `/pages/addoldman/jianhurenall?element=${JSON.stringify(res.result[0])}`
					});

				})
				break
		}
	}

	function isAtLeastTenChars(str) {
		console.log(str)
		return typeof str === "string" && str.length >= 10;
	}
	async function jumpSaoyisao() {
		// uni.navigateTo({
		// 	url: "/pages/oldmanindex/saoyisao"
		// })
		const res = await uni.scanCode();
		// console.log("res",res.result)
		if (isAtLeastTenChars(res.result)) {
			console.log("res1111",res.result)
			getOrgNuId(res.result).then(res0 => {
				console.log("<><><",res0)
				if (res0.result) {
					uni.navigateTo({
						url: `/pages/oldmanindex/saoyisaothen?element=${JSON.stringify(res0.result)}`
					})
				} else {
					uni.showToast({
						title: '扫描的二维码有误',
						icon: 'none', // 不显示对勾图标
						duration: 2000
					});
				}
			})
		} else {
			uni.showToast({
				title: '扫描的二维码有误',
				icon: 'none', // 不显示对勾图标
				duration: 2000
			});
		}
	}
	const jumpInput = () => {
		uni.navigateTo({
			url: "/pages/oldmanindex/input"
		})
	}
	const clickSmallball = () => {
		// uni.getStorageSync('token')
		uni.setStorageSync('jumpIndex', 3);
		uni.navigateTo({
			url: "/pages/oldmanindex/message"
		})

	}

	const searchjigou = (item) => {
		uni.setStorageSync("baddata", "")
		uni.setStorageSync('specicalid', "");
		uni.setStorageSync("backhuancun", {})
		let data = {
			nuId: item.nuId,
			orgCode: item.orgCode
		}
		uni.setStorageSync('oldman', data);
		uni.navigateTo({
			url: "/pages/addoldman/oldIDcard"
		})
	}

	const clearvalue = () => {
		supervalue.value = ""
	}

	const changecard = (e) => {
		which.value = e
		whichMenu.value = which.value

	}
	const moveend = () => {
		which.value = menuArray.value.length
		whichMenu.value = which.value
	}
	const addjigou = () => {
		uni.setStorageSync('specicalid', "");
		uni.setStorageSync("baddata", "")
		uni.setStorageSync("backhuancun", {})
		uni.navigateTo({
			url: `/pages/addjigou/name`
		});
	}
	const look = (element) => {
		uni.navigateTo({
			url: `/pages/yuangongindex/workjoin`
		});
	}

	const jumptolist = (res) => {
		if (res) {
			content.value = res;
			show.value = true
		}
	}
	const jumpt = (res) => {
		if (res.length > 20) {
			content.value = res;
			show.value = true
		}
	}

	const again = (item) => {
		uni.navigateTo({
			url: "/pages/yuangongindex/searchjigou"
		})
		// uni.getStorage({
		// 	key: 'openid',
		// 	success: function(res) {
		// 		getMessageList(res.data).then(res => {
		// 			if (res.success) {
		// 				uni.setStorageSync("baddata", res.result[0])
		// 				uni.setStorageSync('specicalid', res.result[0].id);
		// 				uni.setStorageSync("backhuancun", {})
		// 				uni.navigateTo({
		// 					url: `/pages/addstaff/information`
		// 				});
		// 			}

		// 		})
		// 	}
		// });
	}
	const jumpTo = () => {
		uni.navigateTo({
			url: `/pages/login/index`
		});
	}

	const whichMenu = ref(0);
	const swiperchange = (res) => {
		whichMenu.value = res.detail.current
		which.value = res.detail.current
	}


	const gotoWindy = () => {
		uni.navigateTo({
			url: "/pages/selectunit/map"
		});

	}

	const goback = () => {
		uni.navigateBack()
	}
	const moveHeight = ref(0);
	onMounted(() => {
		// 首先尝试获取胶囊信息（返回 px）
		let capsule = null;
		if (typeof uni.getMenuButtonBoundingClientRect === 'function') {
			try {
				capsule = uni.getMenuButtonBoundingClientRect();
			} catch (e) {
				capsule = null;
			}
			moveHeight.value = capsule.top

			uni.setStorageSync("moveHeight", moveHeight.value)
		}
	})

	onUnmounted(() => {})
	const menuArray = ref([])
	const loadingData = () => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				getIndex(res.data).then(res => {
					menuArray.value = []
					// console.log("res",res)
					// res.result.forEach((element) => {
					// 	if (element.applyType == 1 || (element.applyType == 0 && element
					// 			.applyStatus == 2)) {
					// 		menuArray.value.push(element)
					// 	}
					// })
					menuArray.value = res.result
					// console.log("????",menuArray.value)
					// menuArray.value.push({
					// 	applyStatus: `0`
					// })
					menuArray.value.push({
						applyStatus: `-1`
					})
				})
				// getMessageList(res.data).then(res => {

				// 	uni.setStorageSync("staff", res.result[0])
				// })
			}
		});

	}
	const jumpToMine = () => {
		uni.navigateTo({
			url: '/pages/yuangongindex/companyyaoqing'
		})
	}
	const hong = ref(0);
	const isred = () => {
		hong.value = hong.value;
		isRead().then(res => {
			nextTick(() => {
				hong.value = res.result;
			})
		})
	}
	onShow(() => {
		loadingData();
		isred();
	})
	onPullDownRefresh(() => {
		loadingData();
		isred();
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
	.drcon{
		display: flex;
		flex-direction: column;
	}
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh);
		width: 100%;
		background-color: #F7F7F7;
		position: relative;
	}

	.index-up {
		position: absolute;
		top: 0rpx;
		left: 0;
		width: 100%;

		.index-up-img {
			width: 100%;
			height: 20rpx;
		}
	}

	.index-ball-father {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		position: fixed;
		top: 120rpx;
		left: 0;
		z-index: 999;
		margin-top: 120rpx;

		.white-ball {
			width: 60rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.super-white-ball {
			width: 70rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.small-img {
			width: 25rpx;
			height: 25rpx;
		}
	}

	.index-smallPhoto {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 480rpx;
		margin-bottom: 50rpx;

		.photo-box {
			margin-right: 40rpx;
			height: 180rpx;
			width: 250rpx;
			z-index: 2;
			position: relative;

			.photo-box-img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

	}

	.white-content {
		z-index: 1;
		height: 740rpx;
		width: 90%;
		background-color: #fff;
		border-radius: 30rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;

		.white-content-img {
			position: absolute;
			top: 110rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 200rpx;
			height: 175rpx;
		}

		.white-content-secondimg {
			position: absolute;
			left: 50%;
			top: 30%;
			transform: translate(-50%, -30%);
			width: 700rpx;
			height: 500rpx;
			z-index: 1;
		}

		.white-font {
			margin-top: 330rpx;
			font-size: 30rpx;
		}

		.second-font {
			margin: 10rpx auto 0;
			font-size: 30rpx;
			padding: 0 30rpx;
			width: 80%;
			color: #222222;
			font-weight: 600;
			text-align: center;
		}
	}

	.white-content-father {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 34vh;
		z-index: 1;
		position: relative;
		// overflow: hidden;

	}

	.bottom-text {
		font-size: 22rpx;
	}

	.white-content-father-time {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 0rpx;

		.white-bgc {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #333333;
		}

		.white-content {
			height: 110rpx;
			width: 92%;
			overflow: hidden;
			background-size: 100% auto;
			border-radius: 35rpx;
			z-index: 2;
		}

		.white-shu {
			height: 100%;
			width: 2rpx;
			background-color: #fff;
			margin: 0 20rpx;
		}
	}

	.bad-button {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		justify-content: flex-end;

		.blue-button {
			background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
			border: 2rpx solid #9AD1FF;
			color: #007CFF;
			font-size: 25rpx;
			padding: 10rpx 20rpx;
			border-radius: 35rpx;
			margin-right: 40rpx;
		}
	}

	.zhiling-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin-left: 4%;
		height: 150rpx;
		// background-color: #fff;
		background: linear-gradient(to right, #f8f3ff, #f8fbff, #d8eefe);
		border-radius: 35rpx;
		font-size: 32rpx;

		.zhiling-img {
			width: 25rpx;
			height: 25rpx;
		}
	}

	.white-box-father {
		display: flex;
		width: 92%;
		flex-wrap: wrap;
		margin-left: 4%;
		background-color: #fff;
		margin-top: 340rpx;
		border-radius: 30rpx;

		.white-box {
			// margin-top: 35rpx;
			margin: 15rpx 0;
			width: 20.7%;
			margin-left: 3%;
			height: 180rpx;

			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.box-img {
				width: 65rpx;
				height: 65rpx;
				margin-bottom: 15rpx;
			}

			.box-font {
				font-size: 30rpx;
			}
		}
	}

	.result {
		margin: 0 auto;
	}

	.jia-box {
		position: absolute;
		top: 0rpx;
		left: 0;
		display: flex;
		height: 80rpx;
		width: 100%;
		justify-content: center;
	}

	.jia {
		margin-top: -5rpx;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

		.jia-img {
			width: 18rpx;
			height: 18rpx;
			z-index: 2;
		}
	}

	.gray-box {
		border-radius: 20rpx;
		height: 20rpx;
		width: 35rpx;
		margin-right: 15rpx;
		background-color: #fff;
	}

	.black-box {
		border-radius: 20rpx;
		height: 20rpx;
		width: 35rpx;
		margin-right: 15rpx;
		background-color: black;
	}

	.button-blue {
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		// background: linear-gradient(to right, #00C9FF, #0076FF);
		// color: #fff;
		font-size: 28rpx;
		margin-top: 80rpx;
		z-index: 999;
	}

	.button-blue-spec {
		position: absolute;
		bottom: 45rpx;
		left: 50%;
		width: 40%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
		border: 2rpx solid #9AD1FF;
		color: #007CFF;
		font-size: 33rpx;
		margin-top: 80rpx;
	}

	.button-white-spec {
		position: absolute;
		bottom: 30rpx;
		right: 8%;
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		border: 2rpx solid #b1c0ca;
		// color: #fff;
		font-size: 33rpx;
		margin-top: 80rpx;
	}

	.chuo-img {
		position: absolute;
		top: 72rpx;
		right: 235rpx;
		width: 120rpx;
		height: 110rpx;
		z-index: 3;
	}

	.chuo-ball {
		position: absolute;
		top: 20rpx;
		right: 60rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 3;
		background-color: rgb(242, 242, 242);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.ball-img {
			width: 37rpx;
			height: 37rpx;
		}
	}

	.blue-shu {
		width: 17rpx;
		height: 35rpx;
		border-radius: 17rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		margin-left: 40rpx;
		margin-right: 20rpx;
	}

	.blue-font {
		font-size: 30rpx;
		color: black;
	}

	.card-font {
		margin-left: 40rpx;
		font-size: 33rpx;
		margin-top: 10rpx;
	}

	.gray-font {
		margin-left: 40rpx;
		font-size: 32rpx;
		margin-top: 20rpx;
		color: #B1B1B1;
		// width: 100%;
	}

	.gray-bgc {
		margin: 0 40rpx;
		width: 80%;
		height: 75rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
		text-align: center;
		font-size: 30rpx;
		margin-top: 40rpx;

		.gray-img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.small-ball {
		position: fixed;
		right: 120px;
		// top: 36px;
		z-index: 9999;
		width: 64rpx;
		height: 64rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.small-ball-img {
			width: 60%;
			height: 60%;
		}

		.small-dian {
			position: absolute;
			right: 0%;
			top: 0%;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #FF5757;
			color: #fff;
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.button-ball-father {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		// z-index: 999;
		.button-ball-img {
			width: 50%;
			height: 50%;
			// z-index: 99;
		}

		.button-ball-blue {
			background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
			// border: 2rpx solid #9AD1FF;
			color: #007CFF;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 15rpx;
		}
	}

	.button-blue-zero {
		position: absolute;
		bottom: 45rpx;
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
		border: 2rpx solid #9AD1FF;
		color: #007CFF;
		font-size: 33rpx;
		margin-top: 80rpx;
		z-index: 999;
	}

	.white-content-secondimg-zero {
		position: absolute;
		left: 50%;
		top: 30%;
		transform: translate(-50%, -30%);
		width: 800rpx;
		height: 500rpx;
		z-index: 1;
	}

	.two-card {
		position: absolute;
		top: 8rpx;
		left: 3%;
		width: 94%;
		height: 310rpx;
		// background-color: red;
		z-index: 1;
		display: flex;

		.left-card {
			height: 100%;
			width: 50%;
			background-color: #fff;
			border-radius: 50rpx;
			color: #5D5F66;
			// display: flex;
			padding: 0 40rpx;
			padding-top: 40rpx;
			font-size: 21rpx;

			.left-card-view {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				margin-top: 10rpx;
				color: black;
				.left-card-imge{
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}
		}

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

			.right-top-card {
				width: 95%;
				margin-left: 5%;
				height: 145.5rpx;
				border-radius: 50rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
			}
		}
	}

	.gray-shu {
		height: 23rpx;
		width: 3rpx;
		background-color: #CDCDCD;
		margin: auto 7rpx;
	}

	.btnname {
		font-size: 32rpx;
		margin-top: 50rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 90%;
		text-align: center;
		overflow: hidden;
		position: relative;
		z-index: 20;
	}
</style>