<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" >
		<view class="left-container">
			<view class="left-head">
				<image class="left-head-img" src="/static/index/oldman.png" />
				<text class="left-head-font" :style="darkFans ? { color: '#fff' } : {}">
					王金凤
				</text>
			</view>
			<view class="left-img-container">
				<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
					<view class="blue-circle" v-show="index === menuIndex">
						<image class="blue-circle-size" :src="`/static/index/ray.png`" />
					</view>
					<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"  @click="changeMenu(index)" />

				</view>
			</view>
		</view>
		<view class="right-container">
			<view class="right-container-title">
				<text class="right-container-title-no" :style="darkFans ? { color: '#fff' } : {}">
					N00123456
				</text>
				<text class="right-container-title-class" :style="darkFans ? { color: '#fff' } : {}">
					护理单元01
				</text>
				<view class="right-container-title-class-anhei-button" @click="darkFans=!darkFans" v-show="!darkFans">
					<text class="right-container-title-class-anhei">
						切换到暗黑模式
					</text>
				</view>
				<view class="right-container-title-class-anhei-button" :style="darkFans ? { backgroundColor:'#fff' } : {}" @click="darkFans=!darkFans" v-show="darkFans">
					<text class="right-container-title-class-anhei" :style="darkFans ? { color: 'black' } : {}">
						取消暗黑模式
					</text>
				</view>
			</view>
			<view class="right-container-fir">
				<view class="right-container-fir-left">
					<view class="right-container-fir-left-card">
						<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
						<font class="right-container-fir-left-card-hulilei-font">护理类</font>

						<view class="right-container-fir-left-card-main">
							<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`" />
							<view class="right-container-fir-left-card-card">
								<view class="right-container-fir-left-card-zhixing">
									<image class="right-container-fir-left-card-zhixing-img"
										:src="`/static/index/daizhixing.png`" />
									<font class="right-container-fir-left-card-zhixing-font">待执行</font>
								</view>
								<image class="right-container-fir-left-card-img" :src="`/static/index/yiliao/project.png`" />
								<view class="">
									<image class="right-container-fir-left-card-main-laba"
										:src="`/static/index/project.png`" />
									<text class="right-container-fir-left-card-main-font">
										准备洁具（口腔）
									</text>
								</view>

							</view>
							<view class="split-line"></view>
							<view class="time-tra">
								<view class="time-font">
									10:00 - 10:10
								</view>
								<view class="time-text">
									为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
								</view>
								<view class="time-people">
									<image class="time-people-img" :src="`/static/index/cardicons/zhixing.png`" />
									<text class="time-people-font">
										单人执行
									</text>
								</view>
								<view class="time-people">
									<image class="time-people-img" :src="`/static/index/cardicons/zhifa.png`" />
									<text class="time-people-font">
										--
									</text>
								</view>
								<view class="time-button-view">
									<view class="time-button-start">
										开始服务
									</view>
									<view class="time-button-end">
										服务结束
									</view>
								</view>
							</view>
							<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`" />
							<view class="split-line-white"></view>
							<view class="right-huli">
								<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
								<view class="right-huli-view">
									<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis">
										<image class="right-huli-img" :src="item.url" />
										<text class="right-huli-text">{{item.name}}</text>
									</view>
								</view>
								<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
							</view>
						</view>


					</view>

				</view>
				<view class="right-container-fir-right">
					<view class="right-container-card">
						<text class="right-container-title">
							10:18
						</text>
						<text class="right-container-date">
							2025年1月1日
						</text>
						<text class="right-container-day">
							星期三
						</text>
						<view class="right-container-tem">
							<image class="right-container-tem-img" :src="`/static/index/roomicons/wendu.png`" />
							<text class="right-container-tem-text">23°C</text>
							<image class="right-container-tem-img" :src="`/static/index/roomicons/shidu.png`" />
							<text class="right-container-tem-text">39%</text>
						</view>
						<!-- 分割线 -->
						<view class="right-container-fenge"></view>
						<view class="right-container-button">
							<view v-for="(item,index) in roomBtttonList" :key="index"
								class="right-container-button-any">
								<image v-show="roomTar.includes(index)" class="right-container-button-ray"
									:src="`/static/index/cardicons/ray2.png`" />
								<image class="right-container-button-img"
									:src="roomTar.includes(index)?item.targetUrl : item.url" @click="saveItem(index)" />
								<text class="right-container-button-text"
									:style="roomTar.includes(index)?{color: '#167ED7'}:{}">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right-container-sec">

				<view class="right-container-left">
					<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
					<font class="right-container-left-font">医疗类</font>
					<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`" />
					<view class="time-tra">

						<view class="time-font">
							10:00 - 10:10
						</view>
						<view class="time-text">
							<text>静脉注射</text>
							<image class="time-text-img" :src="`/static/index/yiliao/project4.png`" />
						</view>
						<view class="time-people">
							<image class="time-people-img" :src="`/static/index/yiliao/doctorW.png`" />
							<text class="time-people-font">
								李医生
							</text>
							<image class="time-people-img" :src="`/static/index/yiliao/yizhu.png`" />
							<text class="time-people-font">
								临时医嘱
							</text>
						</view>
						<view class="time-people">
							<image class="time-people-img" :src="`/static/index/yiliao/nurseW.png`" />
							<text class="time-people-font">
								王护士
							</text>
							<image class="time-people-img" :src="`/static/index/yiliao/yizhudown.png`" />
							<text class="time-people-font">
								医嘱开立
							</text>
						</view>
						<view class="time-button-view">
							<view class="time-button-start">
								开始服务
							</view>
							<view class="time-button-end">
								服务结束
							</view>
						</view>
					</view>
					<view class="right-container-photo">
						<image class="right-container-photo-img" :src="`/static/index/yiliao/project2.png`" />
						<text class="right-container-photo-text">
							脑膜炎(1/2)
						</text>
					</view>
					<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`" />
					<view class="split-line-white"></view>
					<view class="right-huli">
						<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
						<view class="right-huli-view">
							<view v-for="(item,index) in mediumList" :key="index" class="right-huli-view-dis">
								<image class="right-huli-img" :src="item.url" />
								<text class="right-huli-text">{{item.name}}</text>
							</view>
						</view>
						<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
					</view>
					
				</view>
				<view class="right-container-right">
					<view class="right-container-right-title">
						<text class="right-container-right-text">服务指令</text>
						<image class="right-container-right-img" :src="`/static/index/medium/whitedian.png`" />
					</view>
					<view class="right-container-right-down">
						<image class="right-container-right-down-left" :src="`/static/index/arrow2.png`" />
						<view class="right-container-right-down-card">
							<view class="right-container-right-down-card-card">
								
								<image class="right-container-right-down-card-img" :src="`/static/index/project3.png`" />
								<view class="">
									<text class="right-container-right-down-card-font">
										更换纸尿裤
									</text>
								</view>
							
							</view>
							<view class="right-container-right-down-card-line"></view>
							<view class="time-tra">
								<view class="time-font">
									10:00 - 10:10
								</view>
								
								<view class="time-people">
									<image class="time-people-img" :src="`/static/index/cardicons/zhixing.png`" />
									<text class="time-people-font">
										协作执行
									</text>
								</view>
								<view class="time-people">
									<image class="time-people-img" :src="`/static/index/cardicons/zhifa.png`" />
									<text class="time-people-font">
										王金福 / 李贵田
									</text>
								</view>
								<view class="time-button-view">
									<view class="time-button-start">
										开始服务
									</view>
									<view class="time-button-end">
										服务结束
									</view>
								</view>
							</view>
						</view>
						
						<image class="right-container-right-down-right" :src="`/static/index/arrow.png`" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';

	// 定义 Link 类型
	type Link = {
		url : string;
		targetUrl : string;
	}

	// 初始化左侧菜单列表
	const iconList = ref<Link[]>([
		{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png' },
		{ url: '/static/index/lefticon/nurse.png', targetUrl: '/static/index/lefticontarget/bluenurse.png' },
		{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png' },
		{ url: '/static/index/lefticon/wifi.png', targetUrl: '/static/index/lefticontarget/bluewifi.png' },
		{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png' }
	]);
	// 定义 Link 类型
	type huliListType = {
		url : string;
		name : string
	}

	// 初始化第一个卡片列表
	const huliList = ref<huliListType[]>([
		{ url: '/static/index/hulilist/zhuandan.png', name: "转单执行" },
		{ url: '/static/index/hulilist/xiezhu.png', name: "协助执行" },
		{ url: '/static/index/hulilist/zhongdian.png', name: "重点" },
		{ url: '/static/index/hulilist/genzong.png', name: "跟踪" },
	]);
	// 初始化第二排第一个卡片列表
	const mediumList = ref<huliListType[]>([
		{ url: '/static/index/medium/yaopin.png', name: "药品信息" },
		{ url: '/static/index/medium/qingling.png', name: "请领指令" },
		{ url: '/static/index/medium/peiyao.png', name: "配药指令" },
		{ url: '/static/index/medium/xinxi.png', name: "信息反馈" },
	]);
	// 定义 Link 类型
	type roomBtttonType = {
		url : string;
		targetUrl : string;
		name : string
	}

	// 初始化第二个卡片列表
	const roomBtttonList = ref<roomBtttonType[]>([
		{ url: '/static/index/roomicons/zhaoming.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: "照明" },
		{ url: '/static/index/roomicons/kongtiao.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: "空调" },
		{ url: '/static/index/roomicons/nuanfeng.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: "暖风" },
		{ url: '/static/index/roomicons/dianqi.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: "电器" },
	]);
	// 当前选中的菜单索引
	const menuIndex = ref<number>(0);
	// 暗黑模式
	const darkFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	// 变更菜单
	const changeMenu = (index : number) => {
		menuIndex.value = index;
	};
	const saveItem = (index : number) => {
		if (roomTar.value.includes(index)) {
			let array = []
			roomTar.value.forEach((res : number) => {
				if (res !== index) {
					array.push(res)
				}
			})
			roomTar.value = array
		} else {
			roomTar.value.push(index)
		}
	}
	// 生命周期钩子
	onMounted(() => {
		// 页面初始化的逻辑
		// uni.redirectTo({
		//   url: '/pages/login/login'
		// });
	});
</script>

<style lang="less" scoped>
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/lightbgc.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		// background-repeat: no-repeat;
	}
	//暗黑模式
	.darkbackgroundContainer{
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}
	.right-container {
		width: 100%;
		height: 100vh;

		.right-container-sec {
			width: 100%;
			height: 900rpx;
			margin-top: 50rpx;
			display: flex;
			.right-container-right{
				margin-left: 2%;
				width: 40%;
				height: 900rpx;
				border-radius: 80rpx;
				border: 1rpx solid #fff;
				background-color: rgba(200, 216, 238, 0.8);
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				// justify-content: center;
				flex-direction: column;
				.time-tra {
					// margin-left: 150rpx;
					margin-top: 80rpx;
					height: 100%;
					width: 700rpx;
					.time-button-view {
						display: flex;
						margin-top: 50rpx;
						margin-left: -30rpx;

						.time-button-start {
							width: 300rpx;
							height: 100rpx;
							border-radius: 50rpx;
							background: linear-gradient(to top, #047ADB, #0EA7DD);
							border-left: 2rpx solid #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 40rpx;
							margin-right: 25rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						}

						.time-button-end {
							width: 300rpx;
							height: 100rpx;
							border-radius: 50rpx;
							background-color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 40rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						}
					}

					.time-people {
						display: flex;
						margin-bottom: 20rpx;

						.time-people-img {
							width: 60rpx;
							height: 60rpx;
							margin-right: 5rpx;
							// margin-left: 50rpx;
						}

						.time-people-font {
							color: #586787;
							font-size: 42rpx;
							margin-right: 90rpx;
						}
					}

					.time-font {
						font-size: 100rpx;
						text-shadow: 0 -5rpx 5rpx;
						margin-bottom: 30rpx;
					}

					.time-text {
						margin-left: 10rpx;
						color: #364464;
						font-size: 70rpx;
						font-weight: 700;
						width: 800rpx;
						margin-bottom: 50rpx;
						line-height: 70rpx;
						position: relative;

						.time-text-img {
							position: absolute;
							top: 0;
							left: 300rpx;
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
				.right-container-right-down{
					width: 100%;
					height: 560rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.right-container-right-down-left{
						height: 100rpx;
						width: 100rpx;
					}
					.right-container-right-down-card{
						margin-top: 80rpx;
						width: 84%;
						height: 650rpx;
						border-radius: 80rpx;
						// border: 1rpx solid ;
						background-color: rgba(200, 216, 238, 0.8);
						/* 背景颜色 #f4f9ff，透明度 70% */
						position: relative;
						display: flex;
						// justify-content: center;
						// flex-direction: column;
						box-shadow: 2rpx 0 0 2rpx;
						.right-container-right-down-card-line{
							width: 1px;
							/* 线条的宽度 */
							height: 300rpx;
							/* 高度占满父容器 */
							background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
							margin-left: -20rpx;
							margin-right: 30rpx;
							margin-top: 150rpx;
						}
						.right-container-right-down-card-card{
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							width: 450rpx;
							.right-container-right-down-card-img{
								width: 400rpx;
								height: 350rpx;
							}
							.right-container-right-down-card-font{
								font-size: 50rpx;
							}
						}
					}
					.right-container-right-down-right{
						height: 100rpx;
						width: 100rpx;
					}
				}
				// align-items: center;
				.right-container-right-title{
					width: 100%;
					height: 170rpx;
					position: relative;
					// background-color: red;
					.right-container-right-text{
						line-height: 170rpx;
						font-size: 58rpx;
						font-weight: 600;
						margin-left: 120rpx;
					}
					.right-container-right-img{
						position: absolute;
						top: 80rpx;
						right: 80rpx;
						width: 80rpx;
						height: 20rpx;
					}
				}
			}
			.right-container-left {
				width: 55%;
				height: 900rpx;
				border-radius: 80rpx;
				border: 1rpx solid #fff;
				background-color: rgba(203, 219, 238, 0.8);
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				.right-container-fir-left-card-main-right {
					margin-left: 10rpx;
					margin-right: 5rpx;
					width: 70rpx;
					height: 90rpx;
				}
				
				.right-huli {
					width: 250rpx;
					height: 100%;
					// background-color: #047ADB;
					margin-top: 0rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				
					.right-huli-view::-webkit-scrollbar {
						display: none;
					}
				
					.right-huli-view {
						height: 700rpx;
						// background-color: #047ADB;
						overflow: auto;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
				
						.right-huli-view-dis {
							// flex-direction: column;
							margin-top: 30rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
				
							.right-huli-img {
								width: 120rpx;
								height: 120rpx;
							}
				
							.right-huli-text {
								width: 100%;
								height: 20rpx;
								text-align: center;
							}
						}
					}
				
					.right-huli-shang {
						width: 50rpx;
						height: 30rpx;
					}
				
					.right-huli-xia {
						margin-top: 10rpx;
						width: 50rpx;
						height: 30rpx;
					}
				}
				.right-container-photo{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.right-container-photo-img{
						width: 500rpx;
						height: 550rpx;
						margin-top: 30rpx;
						margin-bottom: 10rpx;
					}
					.right-container-photo-text{
						font-size: 50rpx;
						color: #324160 ;
					}
				}
				.right-container-fir-left-card-main-left {
					height: 100rpx;
					width: 100rpx;
					margin-right: 0rpx;
					margin-left: 0rpx;
				}

				.right-container-left-type {
					position: absolute;
					top: 70rpx;
					left: -15rpx;
					width: 315rpx;
					height: 104rpx;
				}

				.right-container-left-font {
					position: absolute;
					top: 80rpx;
					left: 55rpx;
					font-size: 50rpx;
					color: #fff;
				}

				.time-tra {
					// margin-left: 150rpx;
					margin-top: 450rpx;
					height: 100%;
					width: 700rpx;
					.time-button-view {
						display: flex;
						margin-top: 50rpx;
						margin-left: -30rpx;

						.time-button-start {
							width: 300rpx;
							height: 100rpx;
							border-radius: 50rpx;
							background: linear-gradient(to top, #0DA0B1, #04D3AF);
							border-left: 2rpx solid #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 40rpx;
							margin-right: 25rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						}

						.time-button-end {
							width: 300rpx;
							height: 100rpx;
							border-radius: 50rpx;
							background-color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 40rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						}
					}

					.time-people {
						display: flex;
						margin-bottom: 20rpx;

						.time-people-img {
							width: 60rpx;
							height: 60rpx;
							margin-right: 5rpx;
							// margin-left: 50rpx;
						}

						.time-people-font {
							color: #586787;
							font-size: 42rpx;
							margin-right: 90rpx;
						}
					}

					.time-font {
						font-size: 100rpx;
						text-shadow: 0 -5rpx 5rpx;
						margin-bottom: 30rpx;
					}

					.time-text {
						margin-left: 10rpx;
						color: #364464;
						font-size: 70rpx;
						font-weight: 700;
						width: 800rpx;
						margin-bottom: 50rpx;
						line-height: 70rpx;
						position: relative;

						.time-text-img {
							position: absolute;
							top: 0;
							left: 300rpx;
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
		}

		.right-container-fir {
			width: 100%;
			height: 900rpx;
			display: flex;

			// background-color: red;
			.right-container-fir-left {
				width: 65%;
				height: 900rpx;
				border-radius: 80rpx;
				/* 圆角 */
				position: relative;

				/* 使用背景来模拟边框 */
				background-image: linear-gradient(45deg, #A496E8, #777CCC, #FAFDFF, #8BC5ED, #B8C5DD, #BBC8DD);
				background-origin: border-box;
				/* 背景从边框开始 */
				background-clip: content-box;
				/* 使背景只填充在边框内，而不覆盖内容区域 */
				padding: 5rpx;
				/* 留出足够的空间来呈现渐变边框 */

				/* 增加背景色确保视觉效果 */
				background-color: rgba(255, 255, 255, 0.1);
				/* 内部背景色 */
				box-sizing: border-box;

				/* 包括边框在内计算宽高 */
				.right-container-fir-left-card {
					position: absolute;
					top: 1%;
					left: 0.5%;
					width: 99%;
					height: 98%;
					border-radius: 80rpx;
					background-color: rgb(195, 211, 233);

					.right-container-fir-left-card-main {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						margin-top: 60rpx;

						.right-container-fir-left-card-main-right {
							margin-left: 50rpx;
							margin-right: 30rpx;
							width: 70rpx;
							height: 90rpx;
						}

						.right-huli {
							width: 250rpx;
							height: 100%;
							// background-color: #047ADB;
							margin-top: -100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;

							.right-huli-view::-webkit-scrollbar {
								display: none;
							}

							.right-huli-view {
								height: 700rpx;
								// background-color: #047ADB;
								overflow: auto;
								display: flex;
								justify-content: center;
								align-items: center;
								flex-direction: column;

								.right-huli-view-dis {
									// flex-direction: column;
									margin-top: 30rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									flex-direction: column;

									.right-huli-img {
										width: 120rpx;
										height: 120rpx;
									}

									.right-huli-text {
										width: 100%;
										height: 20rpx;
										text-align: center;
									}
								}
							}

							.right-huli-shang {
								width: 50rpx;
								height: 30rpx;
							}

							.right-huli-xia {
								margin-top: 10rpx;
								width: 50rpx;
								height: 30rpx;
							}
						}

						.time-tra {
							margin-left: 30rpx;

							.time-button-view {
								display: flex;
								margin-top: 50rpx;
								margin-left: -30rpx;

								.time-button-start {
									width: 300rpx;
									height: 100rpx;
									border-radius: 50rpx;
									background: linear-gradient(to top, #047ADB, #0EA7DD);
									border-left: 2rpx solid #fff;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #fff;
									font-size: 40rpx;
									margin-right: 25rpx;
									box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
								}

								.time-button-end {
									width: 300rpx;
									height: 100rpx;
									border-radius: 50rpx;
									background-color: #fff;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 40rpx;
									box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
								}
							}

							.time-people {
								display: flex;

								.time-people-img {
									width: 50rpx;
									height: 50rpx;
									margin-right: 20rpx;
								}

								.time-people-font {
									color: #586787;
									font-size: 42rpx;

								}
							}

							.time-font {
								font-size: 100rpx;
								text-shadow: 0 -5rpx 5rpx;
								margin-bottom: 50rpx;
							}

							.time-text {
								margin-left: 10rpx;
								color: #586787;
								font-size: 42rpx;
								width: 800rpx;
								margin-bottom: 50rpx;
								line-height: 70rpx;
							}
						}


						.right-container-fir-left-card-card {
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							position: relative;

							.right-container-fir-left-card-zhixing {
								position: absolute;
								top: 25rpx;
								left: 450rpx;
							}

							.right-container-fir-left-card-zhixing-font {
								position: absolute;
								top: 5rpx;

								left: 30rpx;
								width: 200rpx;
								font-size: 30rpx;
								color: #fff;
								z-index: 10;
							}

							.right-container-fir-left-card-zhixing-img {
								width: 149rpx;
								height: 57rpx;
								z-index: 9;

							}

							.right-container-fir-left-card-main-font {
								font-size: 50rpx;
								font-weight: 350;

							}

							.right-container-fir-left-card-main-laba {
								width: 70rpx;
								height: 80rpx;
								position: absolute;
								top: 460rpx;
								left: 20rpx;

							}

							.right-container-fir-left-card-img {
								width: 588rpx;
								height: 466rpx;
							}
						}

						.right-container-fir-left-card-main-left {
							height: 100rpx;
							width: 70rpx;
							margin-right: 10rpx;
							// height: ;
						}
					}

					.right-container-fir-left-card-hulilei {
						position: absolute;
						top: 70rpx;
						left: -15rpx;
						width: 315rpx;
						height: 104rpx;

					}

					.right-container-fir-left-card-hulilei-font {
						position: absolute;
						top: 80rpx;
						left: 55rpx;
						font-size: 50rpx;
						color: #fff;
					}
				}
			}

			.right-container-fir-right {
				margin-top: 6rpx;
				margin-left: 2%;
				margin-right: 3%;
				width: 30%;
				height: 880rpx;
				border-radius: 80rpx;
				border: 1rpx solid #fff;

				background: url(/static/index/rightbgi.png) no-repeat;
				background-size: contain;

				.right-container-card {
					margin-top: 80rpx;
					margin-left: 100rpx;
					height: 800rpx;

					.right-container-button {
						display: flex;
						margin-left: -20rpx;
						margin-top: 40rpx;

						.right-container-button-any {
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							width: 180rpx;
							position: relative;

							.right-container-button-ray {
								position: absolute;
								top: -25rpx;
								left: 10rpx;
								width: 150rpx;
								height: 150rpx;

							}
						}

						.right-container-button-img {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.right-container-fenge {
						margin-top: 40rpx;
						width: 100%;
						height: 2rpx;
						/* 可根据需求调整容器的高度 */
						background: linear-gradient(to right,
								rgba(255, 255, 255, 1) 50%,
								/* 白色中心 */
								rgba(255, 255, 255, 0) 80%);
						/* 渐变至透明 */
					}

					.right-container-tem {
						display: flex;
						margin-top: 50rpx;

						.right-container-tem-text {
							font-size: 70rpx;
							margin-right: 70rpx;
						}

						.right-container-tem-img {
							width: 100rpx;
							height: 100rpx;
						}
					}

					.right-container-title {
						font-size: 150rpx;
						text-shadow: 0 -5rpx 5rpx;
						display: block;
						margin: 0;
					}

					.right-container-date {
						font-size: 50rpx;
						color: #7080A1;
						display: block;
						margin: 0;
						margin-left: 18rpx;
						margin-bottom: 10rpx;
					}

					.right-container-day {
						font-size: 55rpx;
						font-weight: 600;
						// color: #7080A1;
						margin-left: 18rpx;
					}
				}
			}
		}

		.right-container-title {
			margin-top: 127rpx;
			margin-bottom: 73rpx;

			.right-container-title-no {
				font-size: 58rpx;
			}

			.right-container-title-class {
				font-size: 58rpx;
				font-weight: 800;
				margin-left: 20rpx;
			}
			.right-container-title-class-anhei-button{
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				margin-right: 100rpx;
				width: 500rpx;
				height: 100rpx;
				background-color: black;
				border: 2rpx solid;
				.right-container-title-class-anhei {
					font-size: 58rpx;
					font-weight: 800;
					color: white;
					
				}
			}
			
		}
	}

	.left-container {
		width: 562rpx;
		height: 100%;

		.blue-circle-pos {
			position: relative;

			.blue-circle {
				position: absolute;
				top: -175rpx;
				left: -200rpx;

				.blue-circle-size {
					width: 350rpx;
					height: 600rpx;
				}
			}
		}

		.left-head {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.left-head-img {
				width: 266rpx;
				height: 266rpx;
				margin-top: 126rpx;
			}

			.left-head-font {
				font-weight: 700;
				font-size: 73rpx;
			}
		}

		.left-img-container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top: 75rpx;

			.left-img {
				width: 180rpx;
				height: 180rpx;
				margin-top: 75rpx;
				margin-bottom: 75rpx;
				z-index: 100;
			}
		}
	}

	//分割线
	.split-line {
		width: 1px;
		/* 线条的宽度 */
		height: 300rpx;
		/* 高度占满父容器 */
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
		margin-left: 40rpx;
		margin-right: 40rpx;
		/* 上面到下面的渐变效果：
	     - 从透明到黑色，再从黑色到透明
	     - 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
	}

	.split-line-white {
		width: 1px;
		/* 线条的宽度 */
		height: 800rpx;
		/* 高度占满父容器 */
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
		margin-left: 20rpx;
		/* 上面到下面的渐变效果：
		 - 从透明到黑色，再从黑色到透明
		 - 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
	}
</style>