hldy_app/component/Initialization/fuwu.vue

<template>
	<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="index-content-right">
			<view style="display: flex;position: relative;margin-left: -30rpx;">
				<view v-for="(item,index) in tabsArray" :key="index" class="tab" @click="clicktab(index)">
					<view :style="tabnumber===index?{fontWeight:800}:{}" style="z-index: 1;">
						{{item}}
					</view>
					<view class="tab-heng" v-show="tabnumber===index"></view>
				</view>
				<view class="right-title-father">
					<view style="margin-right: 20rpx;">
						长春市朝阳区久泰开运养老服务有限公司
					</view>
					<!-- <view class="index-title-left-font">
						{{name}}
					</view>
					<image class="index-title-left-img" src="/static/index/customer.png" /> -->

				</view>
			</view>

			<scroll-view scroll-y style="height: calc(100% - 10rpx);" :show-scrollbar="false">
				<view class="scroll-box">
					<view v-for="(item0,index0) in changearray" :key="index0">
						<view class="card" v-if="!item0.cardtype"
							:style="item0.states===1?{border:`2rpx solid red`,boxShadow:`none`}:{}">
							<view class="card-left">
								<view class="card-left-title">
									<view class="left-view">
										<image class="left-view-img" src="/static/index/oldman.png" />
										<view>
											<view class="top-font-line">
												<view class="line-weight">王金凤</view>
												<view class="line-margin">
													女
												</view>
												<view>
													80岁
												</view>
												<view style="margin-left: 20rpx;">
													2025.01.01
												</view>
											</view>
											<view class="top-font-line">
												<view class="font-gray">
													省医保 | 重度失能 | 正常缴费
												</view>

											</view>

										</view>
									</view>
									<view class="right-spec">

										护理单元
									</view>
								</view>
								<view class="bottom-balls">

									<view v-for="(item1,index1) in bottomballarray" :key="index1"
										class="one-ball-father">
										{{item1}}
										<!-- <image class="one-ball" :src="item1" /> -->
									</view>
								</view>
								<view class="topright-ball">

									<image class="ball-righttop"
										:src="`/static/index/video/videobottom/${item0.states===1?1:0}.png`" />
								</view>
								<view class="right-balls">
									<view v-for="(item1,index1) in righttoparray" :key="index1" class="blue-ball-father"
										@click="cardarray[index0].buttontarget[index1] = !cardarray[index0].buttontarget[index1]">
										<image class="blue-ball"
											:src="cardarray[index0]?.buttontarget[index1]? item1.targeturl : item1.url" />
										<image v-show="cardarray[index0]?.buttontarget[index1]"
											style="position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 80%;"
											src="/static/index/video/videoright/guang.png" />
									</view>
								</view>
								<image class="video-img" src="/static/index/bed.png" />
								<view class="video-bottom">
									<view class="blue-button">
										服务指令
									</view>
									<view class="">
										NUID:2506000001
									</view>
									<view class="bottom-shu">|</view>
									<view class="">
										未命名01
									</view>
								</view>
							</view>
							<view class="card-right">
								<view class="split-line-white-sec"></view>
								<view class="right-title">

									<!-- <image style="width: 100%;height: 100%;"
										:src="`/static/index/video/videotopright/${item0.states}${item0.states}.png`" /> -->
									<view class="right-other"
										:style="`background: ${rightballarray[item0.states].bgc};`">
										<image class="other-class" :src="rightballarray[item0.states].url" />
										<view class="other-font">
											{{rightballarray[item0.states].name}}
										</view>
									</view>
								</view>

								<view v-if="item0.states==1 || !item0.states" style="width: 100%;position: relative;">
									<!-- <view class="right-time">
										<view class="right-laba">
											<image class="laba-img" src="/static/index/video/laba.png" />
										</view>
										<view class="right-laba">
											<image class="laba-img" src="/static/index/video/video.png" />
										</view>
										<view class="right-laba">
											<image class="laba-img" src="/static/index/video/txt.png" />
										</view>
									</view> -->
									<view class="time">
										<view class="time-left">

											<view class="">
												10:00~10:10
											</view>
											<!-- <view style="width: 100%;display: flex;justify-content: flex-end;">
												<view class="time-right">
													待执行
												</view>
											</view> -->
										</view>
									</view>
									<view
										style="width: 100%;display: flex;align-items: center;flex-direction: column;position: relative;">
										<view class="time-right">
											待执行
										</view>
										<image class="time-img" src="/static/index/teeth.png" @click="jumptodanyuan" />
										<view class="small-button">
											<view class="gray-ball">
												<image class="laba-img" src="/static/index/video/laba.png" />
											</view>
											<view class="gray-ball">
												<image class="laba-img" src="/static/index/video/video.png" />
											</view>
											<view class="gray-ball">
												<image class="laba-img" src="/static/index/video/txt.png" />
											</view>
										</view>
										<view class="time-weight">
											准备洁具(口腔)
										</view>
									</view>

									<view class="time-people-two" style="margin-top: 20rpx;">
										<image class="time-people-img" src="/static/index/cardicons/zhixing.png" />
										<text class="time-people-font">
											单人执行
										</text>
									</view>
									<view class="time-people-two">
										<image class="time-people-img" src="/static/index/cardicons/zhifa.png" />
										<text class="time-people-font">
											王金福 / 李贵田
										</text>
									</view>
								</view>
								<view v-if="item0.states==2"
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
									<image class="fail-img" src="/static/index/video/videotopright/goto.png"
										@click="jumptodanyuan" />
									<view class="fail-text">
										长者外出
									</view>
								</view>
								<view v-if="item0.states==3"
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
									<image class="fail-img-spec" src="/static/index/video/videotopright/none.png"
										@click="jumptodanyuan" />
									<view class="fail-text-spec">
										暂无长者入住
									</view>
								</view>
							</view>
						</view>
						<view class="card" v-if="item0.cardtype">
							<view class="card-left">
								<view class="card-left-title">
									<view class="left-view">
										<image class="left-view-img" src="/static/index/badman.png"
											style="width: 70rpx;height: 80rpx;" />
										<view style="margin-left: 10rpx;width: 150rpx;">
											<!-- <view class=""> -->
											<view
												style="font-size: 35rpx;font-weight: 600;margin-top:20rpx;margin-left: 10rpx;">
												欧阳三四</view>
											<!-- </view> -->
											<!-- <view class="top-font-line">
												<view class="font-gray">
													13800000000
												</view>
											</view> -->
										</view>
										<view
											style="display: flex;align-items: center;position: absolute;top: 50%;transform: translateY(-50%);right: 0;">
											<view
												style="margin:0 15rpx;display: flex;flex-direction: column;align-items: center;position: relative;"
												v-for="(item,index2) in kufangarray" :key="index2">
												<image class="kufang-img"
													:src="item0.movestates===index2 ? item.targeturl : item.url" />
												<view style="font-size: 20rpx;"
													:style="item0.movestates===index2 ? {color:`#0096ff`} :{} ">
													{{ item.name }}
												</view>
												<!-- <view class="tab-heng" v-show="item0.movestates===index2"></view> -->
											</view>

										</view>
									</view>

								</view>
								<view class="bottom-balls">
									<view v-for="(item1,index1) in bottomballarray" :key="index1"
										class="one-ball-father">
										<!-- <image class="one-ball" :src="item1" /> -->
										{{item1}}
									</view>
								</view>
								<view class="topright-ball">

									<image class="ball-righttop"
										:src="`/static/index/video/videobottom/${item0.states===1?1:0}.png`" />
								</view>
								<view class="right-balls">
									<view v-for="(item1,index1) in righttoparray" :key="index1"
										:class="cardarray[index0]?.buttontarget[index1]?`blue-ball-father-target`:`blue-ball-father`"
										@click="cardarray[index0].buttontarget[index1] = !cardarray[index0].buttontarget[index1]">
										<image class="blue-ball"
											:src="cardarray[index0]?.buttontarget[index1]? item1.targeturl : item1.url" />
										<image v-show="cardarray[index0]?.buttontarget[index1]"
											style="position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 80%;"
											src="/static/index/video/videoright/guang.png" />
									</view>
								</view>
								<image class="video-img" src="/static/index/bed.png" />
								<view class="video-bottom">
									<view class="font-bottom-weight">
										库房
									</view>
									<view class="bottom-shu">|</view>
									<view class="">
										NUID:2506000001
									</view>
									<view class="bottom-shu">|</view>
									<view class="">
										库房01
									</view>
								</view>
							</view>
							<view class="card-right">
								<view class="split-line-white-sec"></view>
								<view class="right-title">
									<!-- <image style="width: 100%;height: 100%;"
										:src="`/static/index/video/videotopright/${item0.states + 4}${item0.states + 4}.png`" />
									<view class="right-other">
										<image class="other-class" :src="rightballarrayspec[item0.states].url" />
										<view class="other-font">
											{{rightballarrayspec[item0.states].name}}
										</view>
									</view> -->
									<view class="right-other"
										:style="`background: ${rightballarrayspec[item0.states].bgc};`">
										<image class="other-class" :src="rightballarrayspec[item0.states].url" />
										<view class="other-font">
											{{rightballarrayspec[item0.states].name}}
										</view>
									</view>
								</view>

								<view v-if=" !item0.states" style="width: 100%;position: relative;">

									<!-- <view class="right-time">
										<view class="right-laba">
											<image class="laba-img" src="/static/index/video/laba.png" />
										</view>
										<view class="right-laba">
											<image class="laba-img" src="/static/index/video/video.png" />
										</view>
										<view class="right-laba">
											<image class="laba-img" src="/static/index/video/txt.png" />
										</view>
									</view> -->
									<view class="time">
										<view class="time-left">
											<!-- <view style="width: 100%;display: flex;justify-content: flex-end;">
												<view class="time-right">
													待执行
												</view>
											</view> -->
											<view class="">
												10:00~10:10
											</view>
										</view>
									</view>
									<view
										style="width: 100%;display: flex;align-items: center;flex-direction: column;position: relative;">
										<view class="time-right">
											待执行
										</view>
										<image class="time-img" src="/static/index/teeth.png" @click="jumptokufang" />
										<view class="small-button">
											<view class="gray-ball">
												<image class="laba-img" src="/static/index/video/laba.png" />
											</view>
											<view class="gray-ball">
												<image class="laba-img" src="/static/index/video/video.png" />
											</view>
											<view class="gray-ball">
												<image class="laba-img" src="/static/index/video/txt.png" />
											</view>
										</view>
										<view class="time-weight">
											准备洁具(口腔)
										</view>
									</view>
									<view class="time-people-two" style="margin-top: 20rpx;">
										<image class="time-people-img" src="/static/index/cardicons/zhixing.png" />
										<text class="time-people-font">
											单人执行
										</text>
									</view>
									<view class="time-people-two">
										<image class="time-people-img" src="/static/index/cardicons/zhifa.png" />
										<text class="time-people-font">
											王金福 / 李贵田
										</text>
									</view>
								</view>
								<view v-if="item0.states==1"
									style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
									<image class="fail-img" style="width: 150rpx;height: 180rpx;"
										src="/static/index/video/videotopright/stop.png" @click="jumptokufang" />
									<view class="fail-text">
										库房已停用
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 
		<view class="index-content-down">
			长春市朝阳区久泰开运养老服务有限公司
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, nextTick } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { defineProps, defineEmits } from 'vue'


	const emit = defineEmits(['nav'])
	const props = defineProps({ isShow: { type: Boolean, required: true } })

	const bottomballarray = ref([
		`清晰度`,
		`分屏`,
		`画面旋转`
		// "/static/index/video/videobottom/0.png",
		// "/static/index/video/videobottom/1.png",
		// "/static/index/video/videobottom/2.png",
		// "/static/index/video/videobottom/3.png",
		// "/static/index/video/videobottom/4.png"
	])

	const rightballarray = ref([
		{
			url: `/static/index/video/videotopright/0.png`,
			name: `入住`,
			bgc: `linear-gradient(to right,#008AFF,#01BCFF)`
		},
		{
			url: `/static/index/video/videotopright/1.png`,
			name: `预警`,
			bgc: `linear-gradient(to right,#FF585D ,#FF4F52)`
		},
		{
			url: `/static/index/video/videotopright/2.png`,
			name: `外出`,
			bgc: `linear-gradient(to right,#709EE2 ,#A0BFEC )`
		},
		{
			url: `/static/index/video/videotopright/3.png`,
			name: `空闲`,
			bgc: `linear-gradient(to right,#B7BCD0,#B7BCD0)`
		},

	])
	const kufangarray = ref([
		{
			url: `/static/index/video/kufang/00.png`,
			targeturl: `/static/index/video/kufang/01.png`,
			name: `盘点`
		},
		{
			url: `/static/index/video/kufang/10.png`,
			targeturl: `/static/index/video/kufang/11.png`,
			name: `请领`
		},
		{
			url: `/static/index/video/kufang/20.png`,
			targeturl: `/static/index/video/kufang/21.png`,
			name: `退货`
		},
		{
			url: `/static/index/video/kufang/30.png`,
			targeturl: `/static/index/video/kufang/31.png`,
			name: `采购`
		},
		{
			url: `/static/index/video/kufang/40.png`,
			targeturl: `/static/index/video/kufang/41.png`,
			name: `指令`
		},

	])
	const rightballarrayspec = ref([
		{
			url: `/static/index/video/videotopright/4.png`,
			name: `启用`,
			bgc: `linear-gradient(to right,#008AFF,#01BCFF)`
		},
		{
			url: `/static/index/video/videotopright/5.png`,
			name: `停用`,
			bgc: `linear-gradient(to right,#B7BCD0,#B7BCD0)`
		},


	])

	const righttoparray = ref([
		{
			url: `/static/index/video/videoright/00.png`,
			targeturl: `/static/index/video/videoright/01.png`
		},
		{
			url: `/static/index/video/videoright/10.png`,
			targeturl: `/static/index/video/videoright/11.png`
		},
		{
			url: `/static/index/video/videoright/20.png`,
			targeturl: `/static/index/video/videoright/21.png`
		},
		{
			url: `/static/index/video/videoright/30.png`,
			targeturl: `/static/index/video/videoright/31.png`
		},
		{
			url: `/static/index/video/videoright/40.png`,
			targeturl: `/static/index/video/videoright/41.png`
		},

	])

	const cardarray = ref([
		{
			cardtype: 0,
			states: 0,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 0,
			states: 1,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 0,
			states: 2,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 0,
			states: 3,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 0,
			states: 0,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 1,
			states: 0,
			movestates: 0,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 1,
			states: 1,
			movestates: 1,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 1,
			states: 0,
			movestates: 2,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 1,
			states: 0,
			movestates: 3,
			buttontarget: [false, false, false, false, false]
		},
		{
			cardtype: 1,
			states: 0,
			movestates: 4,
			buttontarget: [false, false, false, false, false]
		},
	])
	const changearray = ref([])
	const transition = ref(true)
	const uuid = ref("")
	const tabsArray = ref(["全部", " 护理单元", "配务室", "库房"])

	// 区分首次渲染与动态添加
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				transition.value = false
				setTimeout(() => (transition.value = true), 50)
				tabnumber.value = 0
				changearray.value = JSON.parse(JSON.stringify(cardarray.value))

			}
		}
	)
	const name = ref("");
	onLoad(() => {
		name.value = uni.getStorageSync('realname')
		changearray.value = JSON.parse(JSON.stringify(cardarray.value))

	})
	const tabnumber = ref(0)
	const clicktab = (index : number) => {
		if (tabnumber.value !== index) {
			tabnumber.value = index;
			console.log("???", index)
			switch (index) {
				case 0:
					changearray.value = JSON.parse(JSON.stringify(cardarray.value))
					break
				case 1:
					changearray.value = []
					cardarray.value.forEach((element : any) => {
						if (!element.cardtype) {
							changearray.value.push(element)
						}
					})
					break
				case 2:
					changearray.value = []
					break
				// cardarray.value.forEach((element:any)=>{
				// 	if(!element.cardtype){
				// 		changearray.value.push(element)
				// 	}
				// })
				case 3:
					changearray.value = []
					cardarray.value.forEach((element : any) => {
						if (element.cardtype === 1) {
							changearray.value.push(element)
						}
					})
					break
				default:
					return '';
			}
		}

	}

	const jumptodanyuan = () => {
		uni.navigateTo({
			url: "/pages/Nursing/index"
		});
	}

	const jumptokufang = () => {
		uni.navigateTo({
			url: "/pages/Warehousing/index"
		});
	}
</script>

<style scoped lang="less">
	.index-content-other {
		width: calc(100% - 170rpx);
		height: 100%;
		transition: opacity 1s ease;
		position: relative;
	}

	.index-content-down {
		width: calc(100% - 60rpx);
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.index-content-right {
		height: calc(100% - 30rpx);
		width: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}


	.big-ball {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 50%;
		left: -55rpx;
		transform: translateY(-50%);
		border-radius: 50%;
		background-color: rgb(219, 228, 246);

		.ball {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background-color: rgb(207, 221, 241);
		}
	}

	.tab {
		width: 200rpx;
		height: 120rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.tab-heng {
			position: absolute;
			left: 50%;
			bottom: 35rpx;
			transform: translateX(-50%);
			width: 50rpx;
			height: 12rpx;
			border-radius: 10rpx;
			background-color: #00B4FF;
			// background: linear-gradient(to right, #0052C2, #00B4FF);
		}
	}

	.scroll-box {
		display: flex;
		flex-wrap: wrap;

		.card {
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			border: 2rpx solid #fff;
			background-image: url('/static/index/mountain.png');
			background-color: rgba(255, 255, 255, 0.6);
			background-position: 60% 50%;
			width: 1045rpx;
			height: 650rpx;
			border-radius: 50rpx;
			// box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
			display: flex;
			border-top-right-radius: 40rpx;
			// overflow: hidden;

			.card-left {
				height: 100%;
				width: 68%;
				position: relative;

				.card-left-title {
					height: 23%;
					width: 100%;
					padding: 0 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left-view {
						display: flex;
						margin-top: 20rpx;
						position: relative;
						width: 100%;

						.left-view-img {
							width: 85rpx;
							height: 85rpx;
						}
					}
				}
			}

			.card-right {
				height: 100%;
				width: 32%;
				background-color: rgba(244, 235, 249, 0.3);
				position: relative;
				// border-radius: 20rpx;
				border-top-right-radius: 38rpx;
				border-bottom-right-radius: 38rpx;
				position: relative;
			}
		}
	}

	.top-font-line {
		display: flex;
		align-items: center;
		font-size: 23rpx;

		.line-weight {
			font-size: 35rpx;
			font-weight: 600;
			margin-left: 20rpx;
		}

		.line-margin {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.font-gray {
			margin-left: 20rpx;
			// margin-top: 10rpx;
			font-size: 28rpx;
			color: #555555;
		}
	}

	.blue-button {
		position: absolute;
		right: 20rpx;
		top: -3rpx;
		// transform: translateY(-50%);
		width: 130rpx;
		height: 50rpx;
		color: #fff;
		font-size: 25rpx;
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 10rpx 0 0;
	}

	.font-gray-right {
		margin-top: 10rpx;
		// margin-bottom: 5rpx;
		font-size: 25rpx;
		color: #858585;
		margin-right: 8rpx;
	}

	.right-spec {
		margin-top: 68rpx;
		font-weight: 600;
		margin-right: 10rpx;
		width: 150rpx;
		// display: flex;
		// flex-direction: column;
		// align-items: flex-end;
	}

	.video-img {
		// margin-top: 10rpx;
		margin-left: 110rpx;
		width: 570rpx;
		height: 400rpx;
		border-radius: 30rpx;
	}

	.video-bottom {
		width: 100%;
		overflow: hidden;
		height: 85rpx;
		display: flex;
		align-items: center;
		padding-left: 110rpx;
		color: #858585;
		font-size: 24rpx;
		position: relative;

		.font-bottom-weight {
			font-size: 28rpx;
			font-weight: 600;
			color: black;
		}

		.bottom-shu {
			margin: 0 15rpx;

		}
	}

	.bottom-balls {
		position: absolute;
		bottom: 120rpx;
		left: 38%;
		transform: translateX(-35%);
		z-index: 999;
		display: flex;

		.one-ball-father {
			width: 120rpx;
			// padding: 5rpx 15rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// background-color: rgb(111, 111, 111);
			border: 2rpx solid #fff;
			margin: 0 5rpx;
			color: #fff;
			font-size: 25rpx;
			border-radius: 10rpx;
			// border-radius: 50%;

			// .one-ball {
			// 	width: 35rpx;
			// 	height: 35rpx;
			// }
		}
	}

	.right-balls {
		position: absolute;
		left: 25rpx;
		top: 140rpx;
		padding-top: 10rpx;
		z-index: 999;

		.blue-ball {
			width: 35rpx;
			height: 35rpx;
		}

		.blue-ball-father {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #dbe8f9;
			border-radius: 25rpx;
			margin-right: 20rpx;
			margin-bottom: 18rpx;
			position: relative;
			overflow: hidden;
			// border: 2rpx solid gainsboro;
		}

		.blue-ball-father-target {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #dbe8f9;
			border-radius: 25rpx;
			margin-right: 20rpx;
			margin-bottom: 18rpx;
			position: relative;
			overflow: auto;
			// border: 2rpx solid gainsboro;
		}
	}

	.right-title {
		position: absolute;
		right: -50rpx;
		top: 10rpx;
		width: 250rpx;
		height: 120rpx;
		z-index: 1;
	}

	.right-other {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		width: 150rpx;
		height: 60rpx;

		.other-class {
			width: 35rpx;
			height: 35rpx;
			margin-right: 5rpx;
			margin-left: 5rpx;
		}

		.other-font {
			color: #fff;
		}
	}

	.time {
		display: flex;
		margin-top: 120rpx;
		align-items: center;
		justify-content: center;

		.time-left {
			background: linear-gradient(to bottom, #7080A1, #263556);
			-webkit-background-clip: text;
			color: transparent;
			font-size: 45rpx;
			font-weight: 600;
			// margin-left: 5rpx;
			font-weight: 600;
		}


	}

	.time-img {
		width: 240rpx;
		height: 180rpx;
		margin-bottom: 15rpx;
		// margin: 0 auto;
		// background: red;
		// margin-top: 30rpx;
		// margin-left: 30rpx;
		// margin-bottom: 10rpx;
	}

	.time-weight {
		font-weight: 600;
		font-size: 32rpx;
		margin-top: 25rpx;
		// margin-left: 40rpx;
	}

	.time-small {
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		color: #666666;
	}

	.time-people-two {
		display: flex;
		margin-left: 20rpx;
		align-items: center;
		// margin-top: 20rpx;
		margin-bottom: 5rpx;

		// flex-direction: column;
		.time-people-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
			margin-left: 5rpx;

		}

		.time-people-font {
			font-size: 27rpx;
		}
	}

	.right-time {
		position: absolute;
		top: 40%;
		right: 0;
		transform: translateY(-40%);

		.right-laba {
			width: 60rpx;
			height: 60rpx;
			margin-right: 5rpx;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10rpx;


		}
	}

	.fail-img {
		width: 250rpx;
		height: 250rpx;
	}

	.fail-img-spec {
		width: 400rpx;
		height: 350rpx;
		margin-left: -70rpx;
	}

	.fail-text {
		margin-top: 15rpx;
		color: #333333;
	}

	.fail-text-spec {
		margin-top: -100rpx;
		color: #333333;
	}

	.kufang-img {
		width: 43rpx;
		height: 43rpx;
		// margin-bottom: 5rpx;
	}

	.tab-heng {
		position: absolute;
		left: 50%;
		bottom: -15rpx;
		transform: translateX(-50%);
		width: 40rpx;
		height: 10rpx;
		border-radius: 10rpx;
		// background: linear-gradient(to right, #0052C2, #00B4FF);
	}

	.right-title-father {
		position: absolute;
		right: 20rpx;
		height: 100%;
		top: 0;
		display: flex;
		align-items: center;
		// .index-title-left-img {
		// 	width: 65rpx;
		// 	height: 65rpx;
		// 	margin-right: 20rpx;
		// }

		// .index-title-left-font {
		// 	margin-right: 25rpx;
		// 	font-size: 30rpx;
		// }
	}

	.split-line-white-sec {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 2rpx;
		/* 线条的宽度 */
		height: 600rpx;
		z-index: 999;
		/* 高度占满父容器 */
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
	}

	.topright-ball {
		position: absolute;
		top: 170rpx;
		right: 50rpx;
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.3);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;

		.ball-righttop {
			width: 45rpx;
			height: 45rpx;
			margin-top: -10rpx;
			// background: linear-gradient(to right,#008AFF,#01BCFF);
		}
	}

	.small-button {
		width: 70%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;

		.gray-ball {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #d8e1f2;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}

	.laba-img {
		width: 30rpx;
		height: 30rpx;
	}

	.time-right {
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		width: 90rpx;
		height: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFD5AC;
		color: #FF5834;
		border: 2rpx solid #FF5834;
		margin-left: 5rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
</style>