<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`">
		<view class="left-container">
			<view class="left-head" @click="gotoLogin">
				<image class="left-head-img" src="/static/index/oldman.png" />
				<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
					王金凤
				</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-nav">
				<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
					N00123456
				</text>
				<text :class="darkFans?`right-container-title-class-dark`:`right-container-title-class`">
					护理单元01
				</text>
				
				<view class="right-icons">
					<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
					<view :class="darkFans?`right-icons-font-dark`: `right-icons-font` ">王金福</view>
					<image class="right-icons-img-icon" :src="darkFans?`/static/index/undericons/face.png`:`/static/index/undericons/facelight.png`" />
					<image class="right-icons-img-icon" :src="darkFans?`/static/index/undericons/hand.png`:`/static/index/undericons/handlight.png`" />
					<image class="right-icons-img-icon" :src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
				</view>
				<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-nav">
					<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
						<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
						<div class="right-container-fir-left-card-hulilei-font">护理类</div>
						<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
						<view class="right-container-fir-left-carousel">
							<view class="carousel">
								<view class="dots">
									<span v-for="(item, index) in [1, 2, 3]" :key="index"
										:class="darkFans?`dot-dark`:`dot`"
										:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
								</view>

							</view>
						</view>
						<view class="right-container-fir-left-card-main">
							<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular
								:indicator-dots="false" :vertical="true" :interval="4000" :duration="500"
								@change="onSwiperChange">
								<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
									<view class="right-container-fir-left-card-flex">
										<image class="right-container-fir-left-card-main-left-up"
											:src="`/static/index/arrow2.png`"
											@click="firstcurrentIndex===0?firstcurrentIndex=2:firstcurrentIndex=firstcurrentIndex-1" />

										<view class="uni-margin-wrap-fir">

											<swiper :current="firstcurrentIndex" class="swiper" circular
												:indicator-dots="false" :interval="4000" :duration="500">
												<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
													:key="index">
													<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`" />
															<div class="right-container-fir-left-card-zhixing-font">待执行
															</div>
														</view>
														<image class="right-container-fir-left-card-img"
															:src="`/static/index/teeth.png`" />
														<view class="right-container-fir-left-card-main-laba-video">
															<image class="right-container-fir-left-card-main-laba"
																:src="darkFans?`/static/index/darkicon/labadark.png`:`/static/index/laba.png`" />
															<text
																:class="darkFans?`right-container-fir-left-card-main-font-dark`:`right-container-fir-left-card-main-font`">
																准备洁具（口腔）
															</text>
															<image class="right-container-fir-left-card-main-video"
																:src="darkFans?`/static/index/indexvideo.png`:`/static/index/indexvideo.png`" />
														</view>

													</view>
													<view class="split-line">

													</view>
													<view class="time-tra-fir">
														<view :class="darkFans?`time-font-dark`:`time-font`">
															10:00 - 10:10
														</view>
														<view :class="darkFans?`time-text-dark`:`time-text`">
															为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
														</view>
														<view class="time-people-fir">
															<image class="time-people-img"
																:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
															<text
																:class="darkFans?`time-people-font-dark`:`time-people-font`">
																单人执行
															</text>
														</view>
														<view class="time-people-sec">
															<image class="time-people-img"
																:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
															<text
																:class="darkFans?`time-people-font-dark`:`time-people-font`">
																--
															</text>
														</view>
														<view class="time-button-view">
															<view class="time-button-start">
																开始服务
															</view>
															<view
																:class="darkFans?`time-button-end-dark`:`time-button-end`">
																服务结束
															</view>
														</view>
													</view>

												</swiper-item>
											</swiper>

										</view>
										<image class="right-container-fir-left-card-main-right"
											:src="`/static/index/arrow.png`"
											@click="firstcurrentIndex===2?firstcurrentIndex=0:firstcurrentIndex=firstcurrentIndex+1" />
										<view class="split-line-white-right-left">

											<image v-if="darkFans" class="split-line-white-img"
												:src="`/static/index/cardbgc/leftlight.png`" />
										</view>
									</view>
								</swiper-item>
							</swiper>
							<view class="right-huli-sec">
								<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
								<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true"
									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>
								</scroll-view>
								<!-- 暗黑模式 -->
								<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true"
									class="right-huli-view">
									<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
										<image class="right-huli-img" :src="item.url" />
										<text class="right-huli-text-dark">{{item.name}}</text>
									</view>
								</scroll-view>
								<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
							</view>

						</view>


					</view>

				</view>
				<view :class="darkFans?`right-container-fir-right-dark`:`right-container-fir-right`">
					<view class="right-container-card">
						<text :class="darkFans?`right-container-title-dark`:`right-container-title`">
							{{ currentTime }}
						</text>
						<text :class="darkFans?`right-container-date-dark`:`right-container-date`">
							{{ fullDate }}
						</text>
						<text :class="darkFans?`right-container-day-dark`:`right-container-day`">
							{{ weekDay }}
						</text>
						<view class="right-container-tem">
							<image class="right-container-tem-img"
								:src="darkFans?`/static/index/darkicon/wendudark.png`:`/static/index/roomicons/wendu.png`" />
							<text
								:class="darkFans?`right-container-tem-text-dark`:`right-container-tem-text`">23°C</text>
							<image class="right-container-tem-img"
								:src="darkFans?`/static/index/roomicons/shidu.png`:`/static/index/darkicon/shidudark.png`" />
							<text
								:class="darkFans?`right-container-tem-text-dark`:`right-container-tem-text`">39%</text>
						</view>
						<!-- 分割线 -->
						<view class="right-container-fenge"></view>

						<view class="right-container-button" v-if="!darkFans">
							<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 class="right-container-button" v-if="darkFans">
							<view v-for="(item,index) in roomBtttonListdark" :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'}:{color: '#fff'}">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right-container-sec">

				<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
					<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
					<div class="right-container-left-font">医疗类</div>
					<view class="right-container-fir-left-carousel">
						<view class="carousel">
							<view class="dots">
								<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
									:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
							</view>

						</view>
					</view>
					<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
					<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular :indicator-dots="false"
						:vertical="true" :interval="4000" :duration="500" @change="onSwiperChange">
						<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
							<div class="right-container-fir-left-card-flex">
								<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`"
									@click="secondcurrentIndex===0?secondcurrentIndex=2:secondcurrentIndex=secondcurrentIndex-1" />
								<view class="uni-margin-wrap">
									<swiper :current="secondcurrentIndex" class="swiper" circular
										:indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
										<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
											:key="index">
											<view class="time-tra-sec">

												<view :class="darkFans?`time-font-dark`:`time-font`">
													10:00 - 10:10
												</view>

												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/doctorsaydark.png`:`/static/index/medium/doctorsay.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														医嘱:药品
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/howtododark.png`:`/static/index/medium/howtodo.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														处置:肌肉注射
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/useMed.png`:`/static/index/medium/yongyao.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														用药:抗生素类
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/domanydark.png`:`/static/index/medium/domany.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														执行:周期一日执行一次
													</text>
												</view>
												<view class="time-button-view">
													<view class="time-button-start">
														开始服务
													</view>
													<view :class="darkFans?`time-button-end-dark`:`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="darkFans?`right-container-photo-text-dark`:`right-container-photo-text`">
													脑膜炎(1/2)
												</text>
											</view>
										</swiper-item>
									</swiper>
								</view>

								<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`"
									@click="secondcurrentIndex===2?secondcurrentIndex=0:secondcurrentIndex=secondcurrentIndex+1" />
							</div>
						</swiper-item>
					</swiper>
					<view class="split-line-white-sec">
						<image v-if="darkFans" class="split-line-white-img"
							:src="`/static/index/cardbgc/leftlight.png`" />
					</view>
					<view class="right-huli">
						<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
						<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true" 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>
								<div class="progress-bar-container" v-show="item.number !== 0">
									<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
								</div>
							</view>
						</scroll-view>
						<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
							<view v-for="(item,index) in mediumListdark" :key="index" class="right-huli-view-dis">
								<image class="right-huli-img" :src="item.url" />
								<text class="right-huli-text-dark">{{item.name}}</text>
								<div class="progress-bar-container" v-show="item.number !== 0">
									<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
								</div>
							</view>
						</scroll-view>
						<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
					</view>

				</view>

				<view class="right-container-right-father"
					:style="darkFans ? { backgroundColor: 'rgb(22, 48, 76)' } : ''">
					<view class="right-container-right-title">
						<text
							:class="darkFans? `right-container-right-text-dark`:`right-container-right-text`">服务指令</text>
						<image class="right-container-right-img"
							:src="darkFans? `/static/index/darkicon/diandark.png`:`/static/index/medium/whitedian.png`" />
					</view>
					<view class="right-container-right-down-father">

						<image class="right-container-right-down-left" :src="`/static/index/arrow2.png`"
							@click="thirdcurrentIndex===0?thirdcurrentIndex=2:thirdcurrentIndex=thirdcurrentIndex-1" />
						<view class="uni-margin-wrap">
							<swiper :current="thirdcurrentIndex" class="swiper" circular :indicator-dots="false"
								:autoplay="true" :interval="4000" :duration="500">
								<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
									<view
										:class="darkFans?`right-container-right-down-card-dark`:`right-container-right-down-card`">
										<view class="right-container-right-down-card-card">
											<image class="right-container-right-down-card-card-type"
												:src="darkFans?`/static/index/darkicon/baojieleidark.png`:`/static/index/label.png`" />
											<div
												:class="darkFans? `right-container-right-down-card-card-font-dark`: `right-container-right-down-card-card-font`">
												保洁类</div>
											<image class="right-container-right-down-card-img"
												:src="`/static/index/project3.png`" />
											<view class="">
												<text
													:class="darkFans?`right-container-right-down-card-font-dark`:`right-container-right-down-card-font`">
													更换纸尿裤
												</text>
											</view>

										</view>
										<view class="right-container-right-down-card-line"></view>
										<view class="time-tra-next">
											<view :class="darkFans?`time-font-dark`:`time-font`">
												10:00 - 10:10
											</view>

											<view class="time-people">
												<image class="time-people-img"
													:src="darkFans?`/static/index/darkicon/zhixingrenyuanddark.png`:`/static/index/cardicons/zhifa.png`" />
												<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
													协作执行
												</text>

											</view>
											<view class="time-people">
												<image class="time-people-img"
													:src="darkFans?`/static/index/darkicon/zhixingfangshidark.png`:`/static/index/cardicons/zhixing.png`" />
												<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
													王金福 / 李贵田
												</text>
											</view>
											<view class="time-button-view-fin">
												<view class="time-button-start">
													开始服务
												</view>
												<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
													服务结束
												</view>
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>


						<image class="right-container-right-down-right" :src="`/static/index/arrow.png`"
							@click="thirdcurrentIndex===2?thirdcurrentIndex=0:thirdcurrentIndex=thirdcurrentIndex+1" />
					</view>
				</view>
				<view class="under-father" >
					<view class="under-father-view" v-for="(item,index) in undericonList" :key="index" @click="changeMenuUnder(index)">
						<image class="under-father-light" src="/static/index/undericons/upguang.png" v-show="index === undermenuIndex" />
						<image class="under-father-img" :src="index === undermenuIndex ? item.targetUrl : item.url" />
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

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

	// 定义响应式数据现在时间
	const currentTime = ref('');
	const fullDate = ref('');
	const weekDay = ref('');
	// 定义 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/give.png', targetUrl: '/static/index/lefticontarget/givedark.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' }
	]);
	// 初始化下面侧单列表
	const undericonList = ref<Link[]>([
		{ url: '/static/index/undericons/alarm.png', targetUrl: '/static/index/undericons/alarmdark.png' },
		{ url: '/static/index/undericons/linshitime.png', targetUrl: '/static/index/undericons/linshitimedark.png' },
		
	]);
	// 定义 Link 类型
	type huliListType = {
		url : string;
		name : string
	}
	// 定义 药品类型
	type medType = {
		url : string;
		name : string,
		number : number
	}
	// 初始化第一个卡片列表
	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: "重点追踪" },
	]);
	// 初始化第一个卡片列表 暗黑模式
	const huliListDark = ref<huliListType[]>([
		{ url: '/static/index/darkicon/zhuandandark.png', name: "转单执行" },
		{ url: '/static/index/darkicon/xiezhudark.png', name: "协助执行" },
		{ url: '/static/index/darkicon/zhongdiandark.png', name: "重点追踪" },
	]);
	// 初始化第二排第一个卡片列表
	const mediumList = ref<medType[]>([
		{ url: '/static/index/medium/yaopin.png', name: "药品信息", number: 0 },
		{ url: '/static/index/medium/qingling.png', name: "请领指令", number: 60 },
		{ url: '/static/index/medium/peiyao.png', name: "配药指令", number: 100 },
		{ url: '/static/index/medium/xinxi.png', name: "信息反馈", number: 0 },
		{ url: '/static/index/medium/xinxi.png', name: "信息反馈2", number: 0 },
	]);
	// 初始化第二排第一个卡片列表 暗黑模式
	const mediumListdark = ref<medType[]>([
		{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息", number: 55 },
		{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令", number: 10 },
		{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令", number: 100 },
		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈", number: 15 },
		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈2", number: 20 },
	]);
	// 定义 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 roomBtttonListdark = ref<roomBtttonType[]>([
		{ url: '/static/index/darkicon/zhaomingdark.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: "照明" },
		{ url: '/static/index/darkicon/kontiaodark.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: "空调" },
		{ url: '/static/index/darkicon/nuanfengdark.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: "暖风" },
		{ url: '/static/index/darkicon/dianqidark.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: "电器" },
	]);
	// 当前选中的菜单索引
	const menuIndex = ref<number>(0);
	const undermenuIndex = ref<number>(0);
	// 暗黑模式
	const darkFans = ref<boolean>(false);
	const underFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	//滑块按钮
	const firstcurrentIndex = ref<number>(0);
	const firstcurrentIndexup = ref<number>(0);
	const secondcurrentIndex = ref<number>(0);
	const thirdcurrentIndex = ref<number>(0);
	// 变更菜单
	const changeMenu = (index : number) => {
		menuIndex.value = index;
	};
	// 变更底部菜单
	const changeMenuUnder = (index : number) => {
		undermenuIndex.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)
		}
	}
	// 更新时间、日期和星期的方法
	const updateTime = () => {
		const now = new Date();

		// 获取当前时间的时分
		const hours = now.getHours().toString().padStart(2, '0');
		const minutes = now.getMinutes().toString().padStart(2, '0');
		currentTime.value = `${hours}:${minutes}`;

		// 获取完整的日期（年/月/日）
		const year = now.getFullYear();
		const month = (now.getMonth() + 1).toString().padStart(2, '0');
		const day = now.getDate().toString().padStart(2, '0');
		fullDate.value = `${year}年${month}月${day}日`;

		// 获取星期几
		const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		const week = weekDays[now.getDay()];
		weekDay.value = week;
	};
	//给轮播图用的
	const onSwiperChange = (event : any) => {
		firstcurrentIndexup.value = event.detail.current;
	};
	const gotoLogin = () => {
		// 跳转到目标页面
		// uni.navigateTo({
		//   url: '/pages/login/login'  // 路径要以 / 开头，表示从根目录开始
		// });
	}
	// 生命周期钩子
	onMounted(() => {
		updateTime();
		// 每秒更新一次时间
		setInterval(updateTime, 1000);
	});
	// 在组件销毁时清除定时器
	onBeforeUnmount(() => {
		clearInterval(updateTime);
	});
</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: 578rpx;
			margin-top: 30rpx;
			display: flex;
			position: relative;

			.right-container-fir-left-carousel {
				position: absolute;
				right: 250rpx;
				top: 5rpx;

				.carousel {
					position: relative;
					width: 30rpx;
					/* 轮播图的宽度 */
					height: 100rpx;
					/* 轮播图的高度 */
					// background-color: #f0f0f0;

					/* 背景色（示例） */
					.dots {
						position: absolute;
						top: 50%;
						right: 10rpx;
						transform: translateY(-50%);
						display: flex;
						flex-direction: column;
						gap: 7rpx;

						.dot {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							background-color: #657494;
							/* 默认未激活的颜色 */
							cursor: pointer;
							transition: background-color 0.3s ease;
						}

						.dot-dark {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							background-color: #fff;
							/* 默认未激活的颜色 */
							cursor: pointer;
							transition: background-color 0.3s ease;
						}

						.dot.active {
							background-color: #01A0FE;
							/* 激活的颜色 */
						}
					}
				}
			}

			.right-container-right-father {
				margin-left: 2%;
				width: 40%;
				height: 600rpx;
				border-radius: 35rpx;
				border: 1rpx solid #fff;
				background-color: rgba(200, 216, 238, 0.8);
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				// justify-content: center;
				flex-direction: column;

				.uni-margin-wrap {
					margin-top: 200rpx;
					width: 1200rpx;
					// width: 100%;

					.swiper {
						height: 900rpx;

						.swiper-item-flex {
							display: flex;
						}

						.swiper-item {
							display: block;
							height: 300rpx;
							line-height: 300rpx;
							text-align: center;
						}
					}
				}

				.time-tra-next {
					// margin-left: 150rpx;
					// margin-top: 80rpx;
					height: 100%;
					width: 700rpx;

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

						.time-button-start {
							width: 200rpx;
							height: 80rpx;
							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: 30rpx;
							margin-right: 25rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						}

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

						.time-button-end-dark {
							width: 200rpx;
							height: 80rpx;
							border-radius: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 30rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
							background: linear-gradient(to top, #6B87BA, #FFFFFF);
							/* 渐变从下到上 */
						}

					}

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

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

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

						.time-people-font-dark {
							color: #CDD6EA;
							font-size: 35rpx;
							margin-right: 90rpx;
						}
					}

					.time-font {
						font-size: 65rpx;
						margin-top: 50rpx;
						margin-bottom: 10rpx;
						font-weight: 700;
						background: linear-gradient(to bottom, #7080A1, #263556);
						-webkit-background-clip: text;
						color: transparent;
					}

					.time-font-dark {
						font-size: 65rpx;
						margin-top: 50rpx;
						margin-bottom: 10rpx;
						background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
						-webkit-background-clip: text;
						color: transparent;
						font-weight: 700;
					}

					.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-father {
					width: 100%;
					height: 560rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.right-container-right-down-left {
						height: 50rpx;
						width: 50rpx;
						margin-top: -150rpx;
					}

					.right-container-right-down-card-dark {
						margin-left: 5rpx;
						margin-right: 5rpx;
						margin-top: 60rpx;
						width: 99%;
						height: 430rpx;
						border-radius: 40rpx;
						position: relative;
						display: flex;
						box-shadow: 2rpx 0 0 2rpx;
						background-color: rgb(22, 48, 76);

						// background-image: url('/static/index/cardbgc/newbgc.png');
						// background-position: 50% 60%;
						border: 2rpx solid #fff;


						.right-container-right-down-card-line {
							width: 1px;
							/* 线条的宽度 */
							height: 200rpx;
							/* 高度占满父容器 */
							background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
							margin-left: 0rpx;
							margin-right: 10rpx;
							margin-top: 100rpx;
						}

						.right-container-right-down-card-card {
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							width: 450rpx;
							position: relative;

							.right-container-right-down-card-card-type {
								position: absolute;
								top: 0rpx;
								left: -25rpx;
								width: 250rpx;
								height: 80rpx;
							}

							.right-container-right-down-card-card-font {
								position: absolute;
								top: 15rpx;
								left: 65rpx;
								font-size: 35rpx;
								color: #414F6E;
							}

							.right-container-right-down-card-card-font-dark {
								position: absolute;
								top: 15rpx;
								left: 65rpx;
								font-size: 35rpx;
								color: #fff;
							}

							.right-container-right-down-card-img {
								width: 280rpx;
								height: 230rpx;
								margin-top: 30rpx;
							}

							.right-container-right-down-card-font {
								font-size: 35rpx;
								margin-top: 30rpx;
							}

							.right-container-right-down-card-font-dark {
								font-size: 35rpx;
								color: #fff;
								margin-top: 30rpx;
							}
						}
					}

					.right-container-right-down-card {
						margin-left: 5rpx;
						margin-right: 5rpx;
						margin-top: 60rpx;
						width: 99%;
						height: 430rpx;
						border-radius: 40rpx;
						position: relative;
						display: flex;
						border: 2rpx solid black;

						.right-container-right-down-card-line {
							width: 1px;
							/* 线条的宽度 */
							height: 200rpx;
							/* 高度占满父容器 */
							background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
							margin-left: 0rpx;
							margin-right: 10rpx;
							margin-top: 100rpx;
						}

						.right-container-right-down-card-card {
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							width: 450rpx;
							position: relative;

							.right-container-right-down-card-card-type {
								position: absolute;
								top: 0rpx;
								left: -25rpx;
								width: 250rpx;
								height: 80rpx;
							}

							.right-container-right-down-card-card-font {
								position: absolute;
								top: 15rpx;
								left: 65rpx;
								font-size: 35rpx;
								color: #414F6E;
							}

							.right-container-right-down-card-img {
								width: 280rpx;
								height: 230rpx;
								margin-top: 30rpx;
							}

							.right-container-right-down-card-font {
								font-size: 35rpx;
								margin-top: 30rpx;
							}

							.right-container-right-down-card-font-dark {
								font-size: 50rpx;
								color: #fff;
								margin-top: 30rpx;
							}
						}
					}

					.right-container-right-down-right {
						height: 50rpx;
						width: 50rpx;
						margin-top: -150rpx;
					}
				}

				// align-items: center;
				.right-container-right-title {
					width: 100%;
					height: 170rpx;
					position: relative;

					.right-container-right-text {
						line-height: 130rpx;
						font-size: 40rpx;
						font-weight: 600;
						margin-left: 60rpx;
					}

					.right-container-right-text-dark {
						line-height: 130rpx;
						font-size: 40rpx;
						font-weight: 600;
						margin-left: 60rpx;
						color: #fff;
					}

					.right-container-right-img {
						position: absolute;
						top: 60rpx;
						right: 50rpx;
						width: 50rpx;
						height: 15rpx;
					}
				}
			}

			.right-container-left {
				width: 55%;
				height: 600rpx;
				border-radius: 45rpx;
				border: 1rpx solid #fff;
				// background-color: rgba(203, 219, 238, 0.8);
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(255, 255, 255, 0.5);
				/* 白色背景透明度为 10% */
				background-image: url('/static/index/cardbgc/newbgc.png');
				background-position: 10% 60%;
				overflow: hidden;
				/* 背景图片从左上角25%和30%的位置开始 */
			}

			.right-container-left-dark {
				width: 55%;
				height: 600rpx;
				border-radius: 45rpx;
				border: 1rpx solid #fff;
				background-color: rgb(22, 48, 76);
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}

			.uni-margin-wrap {
				width: 1000rpx;
				// width: 100%;

				.swiper {
					height: 700rpx;

					.swiper-item-flex {
						display: flex;
					}

					.swiper-item {
						display: block;
						height: 300rpx;
						line-height: 300rpx;
						text-align: center;
					}
				}
			}

			.right-container-fir-left-card-main-right {
				height: 50rpx;
				width: 50rpx;
				margin-right: 10rpx;
				margin-left: 10rpx;
				z-index: 11;
			}

			.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 {
					height: 750rpx;
					// background-color: #047ADB;
					overflow: auto;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					box-sizing: border-box;

					.right-huli-view-dis {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						width: 100%;
						height: 150rpx;

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

						.right-huli-text {
							width: 100%;
							height: 10rpx;
							font-size: 25rpx;
							text-align: center;
						}

						.right-huli-text-dark {
							width: 100%;
							height: 10rpx;
							font-size: 25rpx;
							text-align: center;
							color: #fff;
						}
					}
				}

				.right-huli-shang {
					margin-top: 40rpx;
					width: 30rpx;
					height: 30rpx;
				}

				.right-huli-xia {
					margin-bottom: 40rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.right-container-photo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.right-container-photo-img {
					width: 310rpx;
					height: 350rpx;
					// margin-top: 30rpx;
					margin-bottom: 10rpx;
				}

				.right-container-photo-text {
					font-size: 30rpx;
					color: #324160;
				}

				.right-container-photo-text-dark {
					font-size: 30rpx;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
				}
			}

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

			.right-container-left-type {
				position: absolute;
				top: 42rpx;
				left: -15rpx;
				width: 230rpx;
				height: 73rpx;
				z-index: 10;
			}

			.right-container-left-font {
				position: absolute;
				top: 51rpx;
				left: 50rpx;
				font-size: 36rpx;
				color: #fff;
				z-index: 10;
			}

			.time-tra-sec {
				margin-left: 0rpx;
				margin-top: 100rpx;
				height: 100%;
				width: 700rpx;
				overflow: hidden;

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

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

					.time-people-font {
						color: #586787;
						font-size: 30rpx;
						margin-right: 20rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						// width: 300rpx;
					}

					.time-people-font-dark {
						color: #CDD6EA;
						font-size: 30rpx;
						margin-right: 20rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}

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

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

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

					.time-button-end-dark {
						width: 230rpx;
						height: 80rpx;
						border-radius: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;
						box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						background: linear-gradient(to top, #6B87BA, #FFFFFF);
					}
				}

				.time-font {
					font-size: 65rpx;
					margin-top: 50rpx;
					margin-bottom: 10rpx;
					font-weight: 700;
					background: linear-gradient(to bottom, #7080A1, #263556);
					-webkit-background-clip: text;
					color: transparent;
				}

				.time-font-dark {
					font-size: 65rpx;
					margin-top: 50rpx;
					margin-bottom: 10rpx;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
					font-weight: 700;
				}

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

				.time-text-dark {
					margin-left: 10rpx;
					// color: #364464;
					font-size: 75rpx;
					font-weight: 700;
					width: 800rpx;
					margin-bottom: 50rpx;
					line-height: 70rpx;
					position: relative;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
				}

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

		}

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

			.time-people-img {
				width: 42rpx;
				height: 42rpx;
				margin-right: 10rpx;
				margin-left: 5rpx;
			}

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

			.time-people-font-dark {
				color: #CDD6EA;
				font-size: 30rpx;
				margin-right: 90rpx;
			}
		}

		.right-container-fir {
			width: 100%;
			height: 580rpx;
			display: flex;
			overflow: hidden;

			// background-color: red;
			.right-container-fir-left-nav {
				width: 63%;
				height: 578rpx;
				border-radius: 45rpx;
				/* 圆角 */
				position: relative;
				/* 增加背景色确保视觉效果 */
				background-color: rgba(255, 255, 255, 0.1);

				.right-container-fir-left-carousel {
					position: absolute;
					right: 230rpx;
					margin-top: 10rpx;

					.carousel {
						position: relative;
						width: 150rpx;
						/* 轮播图的宽度 */
						height: 100rpx;
						/* 轮播图的高度 */
						// background-color: #f0f0f0;

						/* 背景色（示例） */
						.dots {
							position: absolute;
							top: 50%;
							right: 10rpx;
							transform: translateY(-50%);
							display: flex;
							flex-direction: column;
							gap: 7rpx;

							.dot {
								width: 10rpx;
								height: 10rpx;
								border-radius: 50%;
								background-color: #657494;
								/* 默认未激活的颜色 */
								cursor: pointer;
								transition: background-color 0.3s ease;
							}

							.dot-dark {
								width: 10rpx;
								height: 10rpx;
								border-radius: 50%;
								background-color: #fff;
								/* 默认未激活的颜色 */
								cursor: pointer;
								transition: background-color 0.3s ease;
							}

							.dot.active {
								background-color: #01A0FE;
								/* 激活的颜色 */
							}
						}
					}
				}

				/* 包括边框在内计算宽高 */
				.right-container-fir-left-card {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 45rpx;
					border: 1rpx solid #fff;
					background-color: rgba(255, 255, 255, 0.1);
					/* 白色背景透明度为 10% */
					background-image: url('/static/index/cardbgc/newbgc.png');
					background-position: 10% 60%;
					/* 背景图片从左上角25%和30%的位置开始 */
				}

				.right-container-fir-left-card-dark {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius: 45rpx;
					background-image: url('/static/index/cardbgc/bgcdark.png');
					background-color: rgba(12, 25, 47, 0.1);
					// background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/static/index/cardbgc/fircardbgc.png');
					border: 1rpx solid #fff;
					/* 底色 */
					// background: linear-gradient(135deg, rgba(14, 27, 53, 0.45), rgba(52, 78, 119, 0.45), rgba(28, 74, 112, 0.45));
				}

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

					.split-line-white-right-left {
						width: 2rpx;
						/* 线条的宽度 */
						height: 800rpx;
						/* 高度占满父容器 */
						background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
						margin-right: 50rpx;
						position: relative;

						.split-line-white-img {
							position: absolute;
							top: 0rpx;
							left: -300rpx;
							height: 800rpx;
							width: 300rpx;
							z-index: -1;
						}
					}

					.uni-margin-wrap-fir {
						width: 100%;

						.swiper {
							height: 470rpx;

							.swiper-item-flex {
								display: flex;
								margin-top: 30rpx;
								z-index: 10;
							}

							.swiper-item {
								display: block;
								height: 200rpx;
								line-height: 300rpx;
								text-align: center;
							}
						}
					}

					.right-container-fir-left-card-main-right {
						height: 50rpx;
						width: 50rpx;
						margin-right: 25rpx;
						margin-left: 20rpx;
						z-index: 1;
					}



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

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

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

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

							.time-button-end-dark {
								width: 230rpx;
								height: 80rpx;
								border-radius: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 30rpx;
								box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
								background: linear-gradient(to top, #6B87BA, #FFFFFF);
								/* 渐变从下到上 */
							}
						}

						.time-people-fir {
							display: flex;

							.time-people-img {
								width: 42rpx;
								height: 42rpx;
								margin-right: 10rpx;
								margin-left: 5rpx;
							}

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

							.time-people-font-dark {
								color: #CDD6EA;
								font-size: 30rpx;
							}
						}

						.time-font {
							font-size: 60rpx;
							// text-shadow: 0 -3rpx 3rpx;
							margin-bottom: 30rpx;
							background: linear-gradient(to top, #334160, #687898);
							-webkit-background-clip: text;
							color: transparent;
							font-weight: 700;
						}

						.time-font-dark {
							font-size: 60rpx;
							// text-shadow: 0 -3rpx 3rpx;
							margin-bottom: 30rpx;
							background: linear-gradient(to right, #EBF4FF, #ADC4E0);
							-webkit-background-clip: text;
							color: transparent;
							font-weight: 700;
						}

						.time-text {
							margin-left: 10rpx;
							color: #586787;
							font-size: 32rpx;
							width: 530rpx;
							margin-bottom: 40rpx;
							line-height: 40rpx;
						}

						.time-text-dark {
							margin-left: 10rpx;
							color: #CDD6EA;
							font-size: 32rpx;
							width: 530rpx;
							margin-bottom: 40rpx;
							line-height: 40rpx;
						}
					}


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

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

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

							left: 25rpx;
							width: 150rpx;
							font-size: 25rpx;
							color: #fff;
							z-index: 10;
						}

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

						}

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

						}

						.right-container-fir-left-card-main-font-dark {
							font-size: 34rpx;
							font-weight: 350;
							color: #fff;
						}


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

							.right-container-fir-left-card-main-laba {
								width: 45rpx;
								height: 45rpx;
								margin-right: 5rpx;
							}

							.right-container-fir-left-card-main-video {
								width: 45rpx;
								height: 45rpx;
							}
						}

						.right-container-fir-left-card-img {
							// margin-top: 100rpx;
							width: 360rpx;
							height: 270rpx;
						}
					}

					.right-container-fir-left-card-main-left-up {
						height: 50rpx;
						width: 50rpx;
						margin-right: 0rpx;
						margin-left: 20rpx;
					}
				}

				.right-container-fir-left-card-hulilei {
					position: absolute;
					top: 42rpx;
					left: -15rpx;
					width: 220rpx;
					height: 73rpx;
					z-index: 10;
				}

				.right-container-fir-left-card-hulilei-font {
					position: absolute;
					top: 51rpx;
					left: 40rpx;
					font-size: 36rpx;
					color: #fff;
					z-index: 10;
				}
			}

			.right-container-fir-right {
				// margin-top: 6rpx;
				margin-left: 2%;
				margin-right: 2%;
				width: 700rpx;
				height: 578rpx;
				border-radius: 40rpx;
				border: 1rpx solid #fff;

				background: url(/static/index/rightbgi.png);
				background-size: cover;
			}

			.right-container-fir-right-dark {
				margin-left: 2%;
				margin-right: 2%;
				width: 700rpx;
				height: 578rpx;
				border-radius: 40rpx;
				border: 1rpx solid #fff;
				background-color: #16304c;
				// background: url(/static/index/rightbgi.png) no-repeat;
				// background-size: contain;
			}

			.right-container-card {
				margin-top: 20rpx;
				margin-left: 50rpx;
				// height: 700rpx;

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

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

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

						}

						.right-container-button-text {
							font-size: 30rpx;
							color: #313D56;
						}
					}

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

				.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: 30rpx;
					margin-bottom: 20rpx;

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

					.right-container-tem-text-dark {
						font-size: 50rpx;
						margin-right: 70rpx;
						color: #6B87BA;
					}

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

				.right-container-title {
					font-size: 120rpx;
					font-weight: 500;
					background: linear-gradient(to bottom, #7080A1, #263556);
					-webkit-background-clip: text;
					color: transparent;
					margin: 0;
				}

				.right-container-title-dark {
					font-size: 120rpx;
					display: block;
					margin: 0;
					font-weight: 500;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
				}

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

				.right-container-date-dark {
					font-size: 35rpx;
					color: #7080A1;
					display: block;
					margin: 0;
					margin-left: 18rpx;
					margin-bottom: 15rpx;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
				}

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


				}

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

					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
				}
			}
		}


		.right-container-title-nav {
			margin-top: 75rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;

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

			.right-container-title-no-dark {
				font-size: 25rpx;
				background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
				-webkit-background-clip: text;
				color: transparent;
			}

			.right-container-title-class {
				font-size: 25rpx;
				font-weight: 800;
				margin-left: 20rpx;
			}

			.right-container-title-class-dark {
				font-size: 25rpx;
				font-weight: 800;
				margin-left: 20rpx;
				background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
				-webkit-background-clip: text;
				color: transparent;
			}

			.right-container-title-class-anhei-button {
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				margin-right: 30rpx;
				width: 200rpx;
				height: 50rpx;
				background-color: black;
				border: 2rpx solid;

				.right-container-title-class-anhei {
					font-size: 20rpx;
					font-weight: 800;
					color: white;

				}
			}

		}
	}

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

		.blue-circle-pos {
			position: relative;

			.blue-circle {
				position: absolute;
				top: -50rpx;
				left: -68rpx;

				.blue-circle-size {
					width: 170rpx;
					height: 250rpx;
				}
			}
		}

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

			.left-head-img {
				width: 120rpx;
				height: 120rpx;
				margin-top: 80rpx;
			}

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

			.left-head-font-dark {
				font-weight: 700;
				font-size: 30rpx;
				background: linear-gradient(to right, #EBF4FF, #ADC4E0);
				-webkit-background-clip: text;
				color: transparent;
			}
		}

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

			.left-img {
				width: 93rpx;
				height: 93rpx;
				// margin-top: 25rpx;
				// margin-bottom: 25rpx;
				margin: 50rpx 0;
				z-index: 100;
			}
		}
	}

	//分割线
	.split-line {
		margin-left: 20rpx;
		margin-top: 120rpx;
		width: 2rpx;
		/* 线条的宽度 */
		height: 150rpx;
		/* 高度占满父容器 */
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #92a7c5 50%, rgba(0, 0, 0, 0) 100%);
		// margin-left: 20rpx;
		// margin-right: 20rpx;
		// display: block; /* 确保元素占据空间 */
		/* 上面到下面的渐变效果：
	     - 从透明到黑色，再从黑色到透明
	     - 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
	}

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

		.split-line-white-img {
			position: absolute;
			top: 0rpx;
			left: -300rpx;
			height: 800rpx;
			width: 300rpx;
			pointer-events: none;
		}
	}

	.card-upfaguang {
		position: absolute;
		top: 600rpx;
		left: 150rpx;
		height: 600rpx;
		width: 500rpx;
	}

	.card-upfaguang-down {
		position: absolute;
		top: 620rpx;
		left: 860rpx;
		height: 600rpx;
		width: 500rpx;
	}

	.right-container-fir {}

	.right-huli-sec {

		width: 200rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		// margin-left: -60rpx;


		.right-huli-view {
			width: 100%;
			overflow: auto;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			/* 垂直方向对齐方式可以调整 */
			flex-direction: column;
			margin-left: -73rpx;

			.right-huli-view-dis {
				height: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 100%;

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

				.right-huli-text {
					width: 100%;
					height: 15rpx;
					text-align: center;
					font-size: 25rpx;
					margin-top: 10rpx;
				}

				.right-huli-text-dark {
					width: 100%;
					height: 15rpx;
					text-align: center;
					font-size: 25rpx;
					color: #fff;
					margin-top: 10rpx;
				}
			}
		}

		.right-huli-shang {
			width: 30rpx;
			height: 20rpx;
			margin-left: -73rpx;
		}

		.right-huli-xia {
			// margin-top: 10rpx;
			width: 30rpx;
			height: 20rpx;
			margin-left: -73rpx;
		}
	}

	.right-container-fir-left-card-flex {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.savehundred {
		width: 100%;
		height: 100%;
	}

	.mt {
		margin-top: 50rpx;
	}

	.progress-bar-container {
		margin-top: 30rpx;
		width: 60%;
		height: 20rpx;
		background-color: #AAB9D6;
		border-radius: 15px;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;

		/* 这里可以更改进度百分比 */
		background: linear-gradient(to top, #047ADB, #0EA7DD);
		border-radius: 15px 0 0 15px;
		transition: width 0.3s ease;
	}

	.under-father {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		width: 100%;
		height: 150rpx;
		// background-color: red;
		.under-father-view{
			margin-left: 10rpx;
			margin-right: 150rpx;
			position: relative;
			.under-father-light{
				position: absolute;
				bottom: -20rpx;
				left: -100rpx;
				width: 300rpx;
				height: 200rpx;
			}
			.under-father-img{
				width: 100rpx;
				height: 100rpx;
				
			}
		}
		
	}
	.right-icons{
		display: flex;
		align-items: center;
		float: right;
		height: 70rpx;
		margin-right: 40rpx;
		.right-icons-font{
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		.right-icons-font-dark{
			color: #fff;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		.right-icons-img{
			width: 60rpx;
			height: 60rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			margin-right: 20rpx;
			
		}
		.right-icons-img-icon{
			width: 60rpx;
			height: 80rpx;
			margin-top: 10rpx;
			margin-left: 8rpx;
		}
	}
</style>