<!-- 主页 -->
<template>
	<view class="right-container" :style="isshow?{opacity: `1`}:{opacity: `0`}">
		<view class="right-container-title-nav">
			<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
				ID：12345678
			</text>
			<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
				名称：未命名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="darkFanschange()" 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="darkFanschange()" 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" @click="showPopup">护理类</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">
									<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">
														<div class="right-container-fir-left-card-zhixing-font">待执行
														</div>
													</view>
													<image class="right-container-fir-left-card-img"
														:src="`/static/index/teeth.png`" @click="showPopup" />
													<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-two">
														<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>

													<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>
									<view class="split-line-white-right-left"
										:style="darkFans ?  `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">

										<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">
					<view class="right-container-card-right">
						<view class="" v-for="(item,index) in [1,2,3,4]" :key="index">
							<image class="right-container-card-right-img" src="/static/index/customer.png" />
						</view>
					</view>
					<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" @click="showPopupsec">医疗类</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===secondcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
						</view>
					</view>
				</view>
				<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
				<swiper :current="secondcurrentIndexup" class="swiper savehundred" circular :indicator-dots="false"
					:vertical="true" :interval="4000" :duration="500" @change="onSwiperChangesec">
					<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
						<div class="right-container-fir-left-card-flex-sec">
							<view class="uni-margin-wrap">
								<swiper :current="secondcurrentIndex" class="swiper" circular :indicator-dots="false"
									:autoplay="false" :interval="4000" :duration="500">
									<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
										<div class="right-container-left-font-spec">进行中
										</div>
										<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-people-thi">
												<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>
												<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>
										<view class="right-container-photo">
											<image class="right-container-photo-img"
												:src="`/static/index/yiliao/project2.png`" @click="showPopupsec" />
											<text
												:class="darkFans?`right-container-photo-text-dark`:`right-container-photo-text`">
												脑膜炎(1/2)
											</text>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</div>
					</swiper-item>
				</swiper>
				<view class="split-line-white-sec"
					:style="darkFans ?  `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">
					<image v-if="darkFans" class="split-line-white-img" :src="`/static/index/cardbgc/leftlight.png`" />
				</view>
				<view class="right-huli-fir">
					<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="darkFans ? `right-container-right-father-dark`:`right-container-right-father`">
				<view class="right-container-right-down-father">
					<div class="right-container-fir-left-card-flex-sec">
						<image class="right-container-fir-left-card-flex-sec-img"
							:src="`/static/index/baojielei.png`" />
						<div class="right-container-fir-left-card-flex-sec-font" @click="showPopupthi">保洁类</div>

						<image class="right-container-fir-left-card-flex-sec-imgright-fir"
							:src="`/static/index/baojieleft.png`" />
						<image class="right-container-fir-left-card-flex-sec-imgright-sec"
							:src="`/static/index/baojieright.png`" />
						<view class="uni-margin-wrap">
							<swiper :current="secondcurrentIndex" class="swiper" circular :indicator-dots="false"
								:autoplay="false" :interval="4000" :duration="500">
								<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
									<view class="time-tra-thi">
										<view class="time-tra-thi-zhixing">
											<div class="time-tra-thi-zhixing-font">待执行
											</div>
										</view>
										<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-two">
											<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>
											<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>
									<view class="time-tra-thi-photo">
										<image class="time-tra-thi-photo-img" :src="`/static/index/project3.png`"
											@click="showPopupthi" />
										<text
											:class="darkFans?`time-tra-thi-photo-font-dark`:`time-tra-thi-photo-font`">
											更换纸尿裤
										</text>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</div>
				</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 :class="darkFans? `under-father-img-font-dark`:`under-father-img-font`">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层左上角 -->
		<view v-if="isPopupVisible" class="popup-overlay" @click="closePopup"
			:style="isPopupVisiblefiropen?{backgroundColor:`rgba(89, 109, 154, 0.5)`}:`{}`">
			<view class="popup-overlay-content" @click.stop
				:style="{ width: widthCom + 'rpx',height: heightCom + 'rpx',top: topCom + 'rpx',left: leftCom + 'rpx' }">
				<view class="right-container-fir-left-nav-open">
					<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
						<view
							style="width:1350rpx ;display: flex;justify-content: center;align-items: center;transition: all 0.4s ease-in-out;transform-origin: left top; /* 缩放 */"
							:style="isPopupVisiblefiropen?{transform: `scale(1.4)`,marginLeft:`0`,marginTop:`0`}:{transform: `scale(1)`,marginLeft:`0rpx`,marginTop:`-89rpx`}">
							<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
							<div class="right-container-fir-left-card-hulilei-font" @click="closePopup">护理类</div>
							<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
							<view class="right-container-fir-left-card-main">
								<view class="swiper savehundred">
									<view class="swiper-item-flex" v-for="(item,index) in [1]" :key="index">
										<view class="right-container-fir-left-card-flex"
											style="transition: all 0.4s ease-in-out">
											<view class="uni-margin-wrap-fir">
												<view class="swiper">
													<view class="swiper-item-flex" v-for="(item,index) in [1]"
														:key="index">
														<view class="right-container-fir-left-card-card"
															style="margin-top: 100rpx;">
															<view class="right-container-fir-left-card-zhixing">
																<div class="right-container-fir-left-card-zhixing-font">
																	待执行
																</div>
															</view>
															<image class="right-container-fir-left-card-img"
																:src="`/static/index/teeth.png`" @click="closePopup" />
															<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="time-tra-fir"
															style="transition: all 0.4s ease-in-out">
															<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-two">
																<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>

															<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>
												</view>

											</view>
											<view class="split-line-white-right-left"
												:style="darkFans ?  `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">
												<image v-if="darkFans" class="split-line-white-img"
													:src="`/static/index/cardbgc/leftlight.png`" />
											</view>
										</view>
									</view>
								</view>
								<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>
			</view>
		</view>
		<!-- 弹出层左上角结束 -->
		<!-- 弹出层左下角 -->
		<view v-if="isPopupVisiblesec" class="popup-overlay" @click="closePopupsec"
			:style="isPopupVisiblefiropensec?{backgroundColor:`rgba(89, 109, 154, 0.5)`}:`{}`">
			<view class="popup-overlay-content" @click.stop
				:style="{ width: widthComsec + 'rpx',height: heightComsec + 'rpx',top: topComsec + 'rpx',left: leftComsec + 'rpx' }">
				<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
					<view
						style="display: flex;justify-content: center;align-items: center;transition: all 0.4s ease-in-out;transform-origin: left bottom;"
						:style="isPopupVisiblefiropensec?{transform: `scale(1.5)`,marginLeft:`-630rpx`,marginTop:`650rpx`}:{transform: `scale(1)`,marginLeft:`100rpx`,marginTop:`150rpx`}">
						<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
						<div class="right-container-left-font" @click="closePopupsec">医疗类</div>
						<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
						<view class="swiper savehundred" style="width: 1000rpx;">
							<view class="swiper-item-flex" v-for="(item,index) in [1]" :key="index">
								<div class="right-container-fir-left-card-flex-sec">
									<view class="uni-margin-wrap">
										<view class="swiper">
											<view class="swiper-item-flex" v-for="(item,index) in [1]" :key="index"
												style="transition: all 0.4s ease-in-out">
												<div class="right-container-left-font-spec"
													:style="isPopupVisiblefiropensec?{top:`120rpx`}:{top:`120rpx`}">
													进行中
												</div>
												<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-people-thi`">
														<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>
														<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>
												<view :class="`right-container-photo`" @click="showPopupsec">
													<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>
											</view>
										</view>
									</view>
								</div>
							</view>
						</view>
						<view class="split-line-white-sec"
							:style="darkFans ?  `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">
							<image v-if="darkFans" class="split-line-white-img"
								:src="`/static/index/cardbgc/leftlight.png`" />
						</view>
						<view class="right-huli-fir" style="width: 250rpx;height: 700rpx;margin-top: -150rpx;">
							<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" :style="isPopupVisiblefiropensec?{height:`700rpx`}:{}">
								<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>
			</view>
		</view>
		<!-- 弹出层左下角结束 -->
		<!-- 弹出层右下角 -->
		<view v-if="isPopupVisiblethi" class="popup-overlay" @click="closePopupthi"
			:style="isPopupVisiblefiropenthi?{backgroundColor:`rgba(89, 109, 154, 0.5)`}:`{}`">
			<view class="popup-overlay-content" @click.stop
				:style="{ width: widthComthi + 'rpx',height: heightComthi + 'rpx',top: topComthi + 'rpx',left: leftComthi + 'rpx' }">
				<view :class="darkFans ? `right-container-right-father-dark`:`right-container-right-father`">
					<view class="right-container-right-down-father"
						:style="isPopupVisiblefiropenthi?{transform: `scale(1.8)`,marginLeft:`750rpx`,marginTop:`200rpx`}:{transform: `scale(1)`}">
						<div class="right-container-fir-left-card-flex-sec">
							<image class="right-container-fir-left-card-flex-sec-img"
								:src="`/static/index/baojielei.png`" />
							<div class="right-container-fir-left-card-flex-sec-font" @click="closePopupthi">保洁类
							</div>
							<view class="uni-margin-wrap">
								<div class="swiper" circular :indicator-dots="false" disable-touch>
									<div class="swiper-item-flex" v-for="(item,index) in [1]" :key="index"
										style="transition: all 0.4s ease-in-out">
										<view class="time-tra-thi-open">
											<view class="time-tra-thi-zhixing">
												<div class="time-tra-thi-zhixing-font">
													待执行
												</div>
											</view>
											<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-two">
												<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>
												<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>
										<view :class="`time-tra-thi-photo`"
											:style="isPopupVisiblefiropenthi?{marginLeft:`100rpx`}:{}">
											<image class="time-tra-thi-photo-img"
												style="margin-top: 150rpx;margin-left: -80rpx;"
												:src="`/static/index/project3.png`" @click="closePopupthi" />
											<text
												:class="darkFans?`time-tra-thi-photo-font-dark`:`time-tra-thi-photo-font`">
												更换纸尿裤
											</text>
										</view>
									</div>
								</div>
							</view>
						</div>
					</view>
				</view>
			</view>
		</view>
		<!-- 右下角结束 -->
	</view>

</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
	import type { huliListType, medType, roomBtttonType } from "./index";

	const props = defineProps({
		isshow: {
			type: Boolean,
			required: true,
		},
		darkFans: {
			type: Boolean,
			required: true,
		},
	});
	//点击后动画效果（左上角）
	const isPopupVisible = ref(false);
	const widthCom = ref(1320);
	const heightCom = ref(540);
	const topCom = ref(145);
	const leftCom = ref(233);
	const isPopupVisiblefiropen = ref(false);

	//点击后动画效果（左下角）
	const isPopupVisiblesec = ref(false);
	const widthComsec = ref(1150);
	const heightComsec = ref(630);
	const topComsec = ref(630);
	const leftComsec = ref(233);
	const isPopupVisiblefiropensec = ref(false);

	//点击后动画效果（右下角）
	const isPopupVisiblethi = ref(false);
	const widthComthi = ref(880);
	const heightComthi = ref(630);
	const topComthi = ref(730);
	const leftComthi = ref(1420);
	const isPopupVisiblefiropenthi = ref(false);
	// 定义响应式数据现在时间
	const currentTime = ref('');
	const fullDate = ref('');
	const weekDay = ref('');

	// 初始化下面侧单列表
	const undericonList = ref<roomBtttonType[]>([
		{ url: '/static/index/undericons/alarm.png', targetUrl: '/static/index/undericons/alarmdark.png', name: '服务考核' },
		{ url: '/static/index/undericons/linshitime.png', targetUrl: '/static/index/undericons/linshitimedark.png', name: '护理流程' },
		{ 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 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 },
	]);


	// 初始化第二个卡片列表
	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 secondcurrentIndexup = ref<number>(0);
	const secondcurrentIndex = ref<number>(0);
	const thirdcurrentIndex = ref<number>(0);
	const emit = defineEmits(['darkchange']);
	// 暗黑模式改变
	const darkFanschange = () => {
		emit('darkchange', !props.darkFans);
	}
	// 变更菜单
	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 onSwiperChangesec = (event : any) => {
		secondcurrentIndexup.value = event.detail.current;
	};

	const jumpTonew = (path : string) => {
		const pages = getCurrentPages(); // 获取当前页面栈
		if (pages.length === 0) return; // 确保有页面
		const currentPage = pages[pages.length - 1]; // 获取当前页面
		const currentPath = '/' + currentPage.route; // 获取当前页面路径（带前缀 /）
		if ((currentPath !== path) && path) {
			uni.redirectTo({
				url: path
			});
		}
	}
	//动画的点击触发（左上角）

	const showPopup = () => {
		isPopupVisible.value = true;
		setTimeout(() => {
			widthCom.value = 1900;
			heightCom.value = 1080;
			topCom.value = 145;
			leftCom.value = 233;
			isPopupVisiblefiropen.value = true;
		}, 10)
	}
	const closePopup = () => {
		widthCom.value = 1320;
		heightCom.value = 540;
		topCom.value = 145;
		leftCom.value = 233;
		isPopupVisiblefiropen.value = false;
		setTimeout(() => {
			isPopupVisible.value = false;
		}, 300)

	}
	//动画的点击触发（左下角）

	const showPopupsec = () => {
		isPopupVisiblesec.value = true;
		setTimeout(() => {
			widthComsec.value = 1900;
			heightComsec.value = 1080;
			topComsec.value = 320;
			leftComsec.value = 233;
			isPopupVisiblefiropensec.value = true;
		}, 10)
	}
	const closePopupsec = () => {
		widthComsec.value = 1150;
		heightComsec.value = 630;
		topComsec.value = 730;
		leftComsec.value = 233;
		isPopupVisiblefiropensec.value = false;
		setTimeout(() => {
			isPopupVisiblesec.value = false;
		}, 300)

	}
	//动画的点击触发（右下角）

	const showPopupthi = () => {
		isPopupVisiblethi.value = true;
		setTimeout(() => {
			widthComthi.value = 1900;
			heightComthi.value = 1080;
			topComthi.value = 320;
			leftComthi.value = 380;
			isPopupVisiblefiropenthi.value = true;
		}, 10)
	}
	const closePopupthi = () => {
		widthComthi.value = 880;
		heightComthi.value = 630;
		topComthi.value = 730;
		leftComthi.value = 1420;
		isPopupVisiblefiropenthi.value = false;
		setTimeout(() => {
			isPopupVisiblethi.value = false;
		}, 300)
	}
	let timerId = null;
	// 生命周期钩子
	onMounted(() => {
		timerId = updateTime();
		// 每秒更新一次时间
		setInterval(updateTime, 1000);
	});
	// 在组件销毁时清除定时器
	onBeforeUnmount(() => {
		clearInterval(timerId);
	});
</script>

<style lang="less" scoped>
	.right-container {
		width: calc(100% - 235rpx);
		height: 100vh;
		// opacity: 0;
		transition: opacity 1s ease;

		.right-container-sec {

			width: 100%;
			display: flex;
			position: relative;

			.right-container-left-font-spec {
				position: absolute;
				top: 180rpx;
				left: 580rpx;
				width: 100rpx;
				height: 40rpx;
				font-size: 25rpx;
				border-radius: 5rpx;
				color: #fff;
				z-index: 10;
				background-color: rgb(52, 198, 120);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.right-container-fir-left-carousel {
				position: absolute;
				right: 245rpx;
				top: 17rpx;

				.carousel {
					position: relative;
					width: 30rpx;
					/* 轮播图的宽度 */
					height: 80rpx;

					/* 轮播图的高度 */
					/* 背景色（示例） */
					.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-dark {
				margin-left: 2%;
				width: 41%;
				height: 630rpx;
				border-radius: 45rpx;
				background-color: rgb(22, 48, 76);
				border: 2rpx solid transparent;
				background:
					url('/static/index/cardbgc/bgcdark.png') padding-box,
					linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
				background-clip: padding-box, border-box;
				background-color: rgba(12, 25, 47, 0.1);
				/* 背景颜色 #f4f9ff，透明度 70% */
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				// justify-content: center;
				flex-direction: column;
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
				overflow: hidden;

				.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 {
					height: 100%;
					width: 700rpx;

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

						.time-button-start {
							width: 220rpx;
							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: 32rpx;
							margin-right: 25rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
							transition: all 0.4s ease-in-out;
						}

						.time-button-end {
							width: 220rpx;
							height: 80rpx;
							border-radius: 50rpx;
							background-color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 32rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
							transition: all 0.4s ease-in-out;
						}

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

					}

					.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: 30rpx;
							margin-right: 90rpx;
						}

						.time-people-font-dark {
							color: #CDD6EA;
							font-size: 30rpx;
							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;
						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 {
					// margin-left: 5%;
					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: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						height: 430rpx;
						border-radius: 40rpx;
						position: relative;
						display: flex;
						border: 1rpx solid black;
						box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);

						.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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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-right-father {
				margin-left: 2%;
				width: 41%;
				height: 630rpx;
				border-radius: 35rpx;
				border: 2rpx solid #fff;
				background-image: url('/static/index/mountain.png');
				background-color: rgba(200, 216, 238, 0.8);
				// background-image: url('/static/index/mountain.png');
				background-position: 60% 50%;
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				// justify-content: center;
				flex-direction: column;
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
				overflow: hidden;

				.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 {
					height: 100%;
					width: 700rpx;

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

						.time-button-start {
							width: 220rpx;
							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: 32rpx;
							margin-right: 25rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
							transition: all 0.4s ease-in-out;
						}

						.time-button-end {
							width: 220rpx;
							height: 80rpx;
							border-radius: 50rpx;
							background-color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 32rpx;
							box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
							transition: all 0.4s ease-in-out;
						}

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

					}

					.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: 30rpx;
							margin-right: 90rpx;
						}

						.time-people-font-dark {
							color: #CDD6EA;
							font-size: 30rpx;
							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 {
					// margin-left: 5%;
					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: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						height: 430rpx;
						border-radius: 40rpx;
						position: relative;
						display: flex;
						border: 1rpx solid black;
						box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);

						.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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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: 630rpx;
				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/mountain.png');
				background-position: 70% 45%;
				overflow: hidden;
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
				// box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
				/* 背景图片从左上角25%和30%的位置开始 */
			}

			.right-container-left-dark {
				width: 55%;
				height: 630rpx;
				border-radius: 45rpx;
				background-color: rgb(22, 48, 76);
				border: 2rpx solid transparent;
				background:
					url('/static/index/cardbgc/bgcdark.png') padding-box,
					linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
				background-clip: padding-box, border-box;
				background-color: rgba(12, 25, 47, 0.1);
				/* 背景颜色 #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;
						position: relative;
					}

					.swiper-item {
						display: block;
						height: 250rpx;
						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-fir {
				width: 250rpx;
				height: 100%;
				// background-color: #047ADB;
				margin-top: 0rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;



				.right-huli-view {
					margin-left: 8rpx;
					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: 170rpx;

						.right-huli-img {

							width: 80rpx;
							height: 80rpx;
						}

						.right-huli-text {
							width: 100%;
							height: 10rpx;
							font-size: 35rpx;
							text-align: center;
							margin-bottom: 5rpx;
						}

						.right-huli-text-dark {
							width: 100%;
							height: 10rpx;
							font-size: 35rpx;
							text-align: center;
							margin-bottom: 5rpx;
							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;
				margin-left: 50rpx;

				.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: 235rpx;
				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-thi {
				margin-left: 80rpx;
				margin-top: 70rpx;
				height: 100%;
				width: 550rpx;
				position: relative;

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

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

				.time-tra-thi-zhixing {
					position: absolute;
					top: 75rpx;
					left: 450rpx;
				}

				.time-tra-thi-zhixing-font {
					position: absolute;
					top: 60rpx;
					left: 10rpx;
					width: 100rpx;
					height: 40rpx;
					font-size: 25rpx;
					border-radius: 5rpx;
					color: #fff;
					z-index: 10;
					background-color: rgb(243, 123, 91);
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.time-people-two {
					display: flex;
					margin-top: 40rpx;
					margin-bottom: 40rpx;
				}

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

				}

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

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

				.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: 80rpx;
					margin-left: 0rpx;
					transition: all 0.4s ease-in-out;

					.time-button-start {
						width: 230rpx;
						height: 80rpx;
						border-radius: 40rpx;
						background: linear-gradient(to bottom, #AF8ED7, #4D3E9B);
						border-left: 2rpx solid #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 32rpx;
						margin-right: 25rpx;
						box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						transition: all 0.4s ease-in-out;
					}

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

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

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

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

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

			.time-tra-sec {
				margin-left: 80rpx;
				margin-top: 110rpx;
				height: 100%;
				width: 500rpx;
				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: 32rpx;
						margin-right: 25rpx;
						box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						transition: all 0.4s ease-in-out;
					}

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

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

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

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

				.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;
				transition: all 0.4s ease-in-out;
			}

			.time-people-font {
				// color: #586787;
				font-size: 30rpx;
				margin-right: 90rpx;
				transition: all 0.4s ease-in-out;
			}

			.time-people-font-dark {
				color: #CDD6EA;
				font-size: 30rpx;
				margin-right: 90rpx;
				transition: all 0.4s ease-in-out;
			}
		}

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


			// background-color: red;
			.right-container-fir-left-nav {
				width: 63%;
				height: 548rpx;
				border-radius: 45rpx;
				/* 圆角 */
				position: relative;
				/* 增加背景色确保视觉效果 */
				background-color: rgba(255, 255, 255, 0.6);
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);

				/* 增强的阴影效果 */
				.right-container-fir-left-carousel {
					position: absolute;
					left: 930rpx;
					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(99, 115, 157, 0.1);
					/* 白色背景透明度为 10% */
					background-image: url('/static/index/mountain.png');
					background-position: 60% 50%;
				}

				.right-container-fir-left-card-dark {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border: 2rpx solid transparent;
					border-radius: 45rpx;
					background:
						url('/static/index/cardbgc/bgcdark.png') padding-box,
						linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
					background-clip: padding-box, border-box;
					background-color: rgba(12, 25, 47, 0.1);
				}



				.right-container-fir-left-card-main {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					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: 20rpx;
						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-top: 40rpx;
						margin-left: 30rpx;

						.time-people-two {
							display: flex;
						}

						.time-button-view {
							display: flex;
							margin-top: 10rpx;
							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: 32rpx;
								margin-right: 25rpx;
								box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
								transition: all 0.4s ease-in-out;
							}

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

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

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

							.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: 70rpx;
							// text-shadow: 0 -3rpx 3rpx;
							margin-bottom: 30rpx;
							background: linear-gradient(to top, #334160, #687898);
							-webkit-background-clip: text;
							color: transparent;
							font-weight: 700;
							transition: all 0.4s ease-in-out;
						}

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

						.time-text {
							margin-left: 10rpx;
							// color: #586787;
							font-size: 35rpx;
							width: 530rpx;
							margin-bottom: 40rpx;
							line-height: 40rpx;
							transition: all 0.4s ease-in-out;
						}

						.time-text-dark {
							margin-left: 10rpx;
							color: #CDD6EA;
							font-size: 35rpx;
							width: 530rpx;
							margin-bottom: 40rpx;
							line-height: 40rpx;
							transition: all 0.4s ease-in-out;
						}
					}


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

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

						.right-container-fir-left-card-zhixing-font {
							position: absolute;
							top: 60rpx;
							left: 10rpx;
							width: 100rpx;
							height: 40rpx;
							font-size: 25rpx;
							border-radius: 5rpx;
							color: #fff;
							z-index: 10;
							background-color: rgb(243, 123, 91);
							display: flex;
							justify-content: center;
							align-items: center;
						}



						.right-container-fir-left-card-main-font {
							font-size: 34rpx;
							font-weight: 350;
							transition: all 0.4s ease-in-out;
						}

						.right-container-fir-left-card-main-font-dark {
							font-size: 34rpx;
							font-weight: 350;
							transition: all 0.4s ease-in-out;
							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;
								transition: all 0.4s ease-in-out;
							}

							.right-container-fir-left-card-main-video {
								width: 45rpx;
								height: 45rpx;
								transition: all 0.4s ease-in-out;
							}
						}

						.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: -10rpx;
					width: 220rpx;
					height: 73rpx;
					z-index: 10;
				}

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

			.right-container-fir-right {
				// margin-top: 6rpx;
				margin-left: 2%;
				margin-right: 2%;
				width: 700rpx;
				height: 548rpx;
				border-radius: 40rpx;
				border: 1rpx solid #fff;
				background: url(/static/index/rightbgi.png);
				background-size: cover;
				background-color: rgba(99, 115, 157, 0.1);
			}

			.right-container-fir-right-dark {
				margin-left: 2%;
				margin-right: 2%;
				width: 700rpx;
				height: 548rpx;
				border-radius: 40rpx;
				border: 1rpx solid #fff;
				background-color: #16304c;
				border: 2rpx solid transparent;
				background:
					url('/static/index/cardbgc/bgcdark.png') padding-box,
					linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
				background-clip: padding-box, border-box;
				background-color: rgba(12, 25, 47, 0.1);
			}

			.right-container-card {
				margin-top: 25rpx;
				margin-left: 40rpx;
				position: relative;

				// height: 700rpx;
				.right-container-card-right {
					position: absolute;
					right: 0;
					top: 0;
					width: 120rpx;
					height: 350rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-bottom: 20rpx;
					margin-right: 20rpx;

					.right-container-card-right-img {
						width: 60rpx;
						height: 60rpx;
						margin-top: 10rpx;
					}
				}

				.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: 25rpx;
							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, 0) 0%,
							/* 左端透明 */
							rgba(255, 255, 255, 1) 50%,
							/* 中心纯白 */
							rgba(255, 255, 255, 0) 100%
							/* 右端透明 */
						);
				}

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

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

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

					.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: 10rpx;
				}

				.right-container-date-dark {
					font-size: 35rpx;
					color: #7080A1;
					display: block;
					margin: 0;
					margin-left: 18rpx;
					margin-bottom: 10rpx;
					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: 35rpx;
				margin-right: 20rpx;
			}

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

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

			.right-container-title-class-dark {
				font-size: 35rpx;
				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;

				}
			}

		}
	}

	//分割线
	.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%);
		// wmargin-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: 265rpx;
		left: 50rpx;
		height: 600rpx;
		width: 500rpx;
		transition: all 0.4s ease-in-out;
	}

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


	.right-huli-sec {
		margin-left: 7rpx;
		width: 230rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transition: all 0.4s ease-in-out;


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

			.right-huli-view-dis {
				height: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 100%;
				transition: all 0.4s ease-in-out;

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

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

				.right-huli-text-dark {
					width: 100%;
					height: 15rpx;
					text-align: center;
					font-size: 35rpx;
					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%;
		margin-left: 20rpx;
	}

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


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

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

		.right-container-fir-left-card-flex-sec-imgright-fir {
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			top: 51rpx;
			left: 650rpx;
			z-index: 10;
		}

		.right-container-fir-left-card-flex-sec-imgright-sec {
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			top: 51rpx;
			left: 670rpx;
			z-index: 10;
		}
	}

	.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;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.under-father-light {
				position: absolute;
				bottom: -20rpx;
				left: -90rpx;
				width: 300rpx;
				height: 200rpx;
			}

			.under-father-img {
				width: 80rpx;
				height: 80rpx;
				margin-left: -3rpx;
			}

			.under-father-img-font {
				font-size: 30rpx;
			}

			.under-father-img-font-dark {
				font-size: 30rpx;
				background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
				-webkit-background-clip: text;
				color: transparent;

			}
		}

	}

	.right-icons {
		display: flex;
		align-items: center;
		float: right;
		height: 70rpx;
		margin-right: 40rpx;

		.right-icons-font {
			margin-left: 10rpx;
			margin-right: 10rpx;
			font-size: 35rpx;
			margin-top: -30rpx;
		}

		.right-icons-font-dark {
			color: #fff;
			margin-left: 10rpx;
			margin-right: 10rpx;
			font-size: 35rpx;
			margin-top: -30rpx;
		}

		.right-icons-img {
			width: 80rpx;
			height: 80rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin-top: -40rpx;

		}

		.right-icons-img-icon {
			width: 60rpx;
			height: 80rpx;
			margin-top: -10rpx;
			margin-left: 8rpx;
		}
	}

	.swiper-item-flex {
		// transition: all 0.4s ease-in-out;

		.time-tra-thi-photo {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			// height: 100%;
			flex-direction: column;
			// margin-left: -100rpx;
			transition: all 0.4s ease-in-out;
			margin-left: 20rpx;

			.time-tra-thi-photo-img {
				width: 330rpx;
				height: 330rpx;
				margin-top: -100rpx;
				margin-left: -50rpx;

				transition: all 0.4s ease-in-out;
			}

			.time-tra-thi-photo-font {
				font-size: 30rpx;
				margin-right: 50rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				transition: all 0.4s ease-in-out;
			}

			.time-tra-thi-photo-font-dark {
				color: #CDD6EA;
				font-size: 30rpx;
				margin-right: 50rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				transition: all 0.4s ease-in-out;
			}

		}
	}


	.time-tra-thi-photo-change {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 510rpx;
		// height: 550rpx;
		margin-left: 200rpx;
		// height: 100%;
		flex-direction: column;
		transition: all 0.4s ease-in-out;

		.time-tra-thi-photo-img {
			width: 500rpx;
			height: 500rpx;
			margin-top: -100rpx;
			margin-left: -50rpx;
			transition: all 0.4s ease-in-out;
		}

		.time-tra-thi-photo-font {
			font-size: 40rpx;
			margin-right: 50rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			transition: all 0.4s ease-in-out;
		}

		.time-tra-thi-photo-font-dark {
			color: #CDD6EA;
			font-size: 40rpx;
			margin-right: 50rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			transition: all 0.4s ease-in-out;
		}

	}

	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(1rpx);
		transition: all 0.4s ease-in-out;
		/* 添加毛玻璃效果 */
		z-index: 999;

		.popup-overlay-content {
			position: absolute;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 50rpx;
			transition: width 0.4s ease-in-out, height 0.4s ease-in-out, top 0.4s ease-in-out, left 0.4s ease-in-out;

			/* 修正了 transition 语法  左上角*/
			.right-container-fir-left-nav-open {
				width: 100%;
				height: 100%;
				border-radius: 45rpx;
				/* 圆角 */
				position: relative;
				/* 增加背景色确保视觉效果 */
				// background-color: rgba(255, 255, 255, 0.6);
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);

				/* 增强的阴影效果 */
				.right-container-fir-left-carousel {
					position: absolute;
					left: 950rpx;
					margin-top: 10rpx;
				}

				/* 包括边框在内计算宽高 */
				.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(201, 221, 244, 1);
					/* 白色背景透明度为 10% */
					// background-color: rgba(99, 115, 157, 1);
					/* 白色背景透明度为 10% */
					background-image: url('/static/index/mountain.png');
					background-position: 60% 50%;
					// box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
					/* 背景图片从左上角25%和30%的位置开始 */
				}

				.right-container-fir-left-card-dark {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border: 2rpx solid transparent;
					border-radius: 45rpx;
					background:
						url('/static/index/cardbgc/bgcdark.png') padding-box,
						linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
					background-clip: padding-box, border-box;
					background-color: rgba(12, 25, 47, 0.1)
				}

				.right-container-fir-left-card-main {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					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: 20rpx;
						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%;
						transition: all 0.4s ease-in-out;

						.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-top: 40rpx;
						margin-left: 50rpx;
						transition: all 0.4s ease-in-out;

						.time-people-two {
							display: flex;
							transition: all 0.4s ease-in-out;
						}

						.time-button-view {
							display: flex;
							margin-top: 10rpx;
							margin-left: 0rpx;
							transition: all 0.4s ease-in-out;

							.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: 32rpx;
								margin-right: 25rpx;
								box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
								transition: all 0.4s ease-in-out;
							}

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

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

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

							.time-people-img {
								width: 42rpx;
								height: 42rpx;
								margin-right: 10rpx;
								margin-left: 5rpx;
								transition: all 0.4s ease-in-out;
							}

							.time-people-font {
								// color: #586787;
								font-size: 30rpx;
								transition: all 0.4s ease-in-out;
							}

							.time-people-font-dark {
								color: #CDD6EA;
								font-size: 30rpx;
								transition: all 0.4s ease-in-out;
							}
						}

						.time-font {
							font-size: 70rpx;
							// text-shadow: 0 -3rpx 3rpx;
							margin-bottom: 30rpx;
							background: linear-gradient(to top, #334160, #687898);
							-webkit-background-clip: text;
							color: transparent;
							font-weight: 700;
							transition: all 0.4s ease-in-out;
						}

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

						.time-text {
							margin-left: 10rpx;
							// color: #586787;
							font-size: 35rpx;
							width: 530rpx;
							margin-bottom: 40rpx;
							line-height: 40rpx;
							transition: all 0.4s ease-in-out;
						}

						.time-text-dark {
							margin-left: 10rpx;
							color: #CDD6EA;
							font-size: 35rpx;
							width: 530rpx;
							margin-bottom: 40rpx;
							line-height: 40rpx;
							transition: all 0.4s ease-in-out;
						}
					}


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

						.right-container-fir-left-card-zhixing {
							position: absolute;
							top: 52rpx;
							left: 810rpx;
							transition: all 0.4s ease-in-out;
						}

						.right-container-fir-left-card-zhixing-font {
							position: absolute;
							top: -80rpx;
							left: 70rpx;
							width: 100rpx;
							height: 40rpx;
							font-size: 25rpx;
							border-radius: 5rpx;
							color: #fff;
							z-index: 10;
							background-color: rgb(243, 123, 91);
							display: flex;
							justify-content: center;
							align-items: center;
							transition: all 0.4s ease-in-out;
						}



						.right-container-fir-left-card-main-font {
							font-size: 34rpx;
							font-weight: 350;
							transition: all 0.4s ease-in-out;
						}

						.right-container-fir-left-card-main-font-dark {
							font-size: 34rpx;
							font-weight: 350;
							color: #fff;
							transition: all 0.4s ease-in-out;
						}


						.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;
								transition: all 0.4s ease-in-out;
							}
						}

						.right-container-fir-left-card-img {
							width: 360rpx;
							height: 270rpx;
							transition: all 0.4s ease-in-out;
						}
					}

					.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: 120rpx;
					left: -10rpx;
					width: 220rpx;
					height: 73rpx;
					z-index: 10;
				}

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

			//左下角


			.right-container-left-font-spec {
				position: absolute;
				top: 150rpx;
				left: 580rpx;
				width: 100rpx;
				height: 40rpx;
				font-size: 25rpx;
				border-radius: 5rpx;
				color: #fff;
				z-index: 10;
				background-color: rgb(52, 198, 120);
				display: flex;
				justify-content: center;
				align-items: center;
				transition: all 0.4s ease-in-out;
			}

			.right-container-right-father-dark {

				width: 100%;
				height: 100%;
				border-radius: 45rpx;
				background-color: rgb(22, 48, 76);
				border: 2rpx solid transparent;
				background:
					url('/static/index/cardbgc/bgcdark.png') padding-box,
					linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
				background-clip: padding-box, border-box;
				background-color: rgba(12, 25, 47, 0.1);
				/* 背景颜色 #f4f9ff，透明度 70% */
				// background-image: url('/static/index/mountain.png');
				// background-position: 60% 50%;
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				// justify-content: center;
				flex-direction: column;
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
				overflow: hidden;

				.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 {
					height: 100%;
					width: 700rpx;

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

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

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

						.time-button-end-dark {
							width: 220rpx;
							height: 80rpx;
							border-radius: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 32rpx;
							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: 30rpx;
							margin-right: 90rpx;
						}

						.time-people-font-dark {
							color: #CDD6EA;
							font-size: 30rpx;
							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 {
					// margin-left: 5%;
					width: 100%;
					height: 560rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					transition: all 0.4s ease-in-out;

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

					.right-container-right-down-card-dark {
						margin-left: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						height: 430rpx;
						border-radius: 40rpx;
						position: relative;
						display: flex;
						border: 1rpx solid black;
						box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);

						.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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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-right-father {

				width: 100%;
				height: 100%;
				border-radius: 35rpx;
				border: 2rpx solid #fff;
				background-image: url('/static/index/mountain.png');
				background-color: rgba(200, 216, 238, 0.8);
				// background-image: url('/static/index/mountain.png');
				background-position: 60% 50%;
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				// justify-content: center;
				flex-direction: column;
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
				overflow: hidden;

				.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 {
					height: 100%;
					width: 700rpx;

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

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

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

						.time-button-end-dark {
							width: 220rpx;
							height: 80rpx;
							border-radius: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 32rpx;
							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: 30rpx;
							margin-right: 90rpx;
						}

						.time-people-font-dark {
							color: #CDD6EA;
							font-size: 30rpx;
							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 {
					// margin-left: 5%;
					width: 100%;
					height: 560rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					transition: all 0.4s ease-in-out;

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

					.right-container-right-down-card-dark {
						margin-left: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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: 50rpx;
						margin-top: 60rpx;
						width: 763rpx;
						height: 430rpx;
						border-radius: 40rpx;
						position: relative;
						display: flex;
						border: 1rpx solid black;
						box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);

						.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: -20rpx;
							margin-right: 30rpx;
							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: 230rpx;
								height: 200rpx;
								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: 100%;
				height: 100%;
				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(201, 221, 244, 1);
				/* 白色背景透明度为 10% */
				background-image: url('/static/index/mountain.png');
				background-position: 70% 45%;
				overflow: hidden;
				box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.3);
				// box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
				/* 背景图片从左上角25%和30%的位置开始 */
			}

			.right-container-left-dark {
				width: 100%;
				height: 100%;
				border-radius: 45rpx;
				border: 2rpx solid transparent;
				background:
					url('/static/index/cardbgc/bgcdark.png') padding-box,
					linear-gradient(45deg, #9bc4f8, #285399, #9bc4f8, #285399, #9bc4f8) border-box;
				background-clip: padding-box, border-box;
				background-color: rgba(12, 25, 47, 0.1);
				background-color: rgb(22, 48, 76);
				/* 背景颜色 #f4f9ff，透明度 70% */
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}

			.uni-margin-wrap {
				width: 100%;
				transition: all 0.4s ease-in-out;
				// width: 100%;

				.swiper {
					height: 800rpx;

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

					.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-fir {
				width: 230rpx;
				height: 100%;
				// background-color: #047ADB;
				margin-top: 0rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				transition: all 0.4s ease-in-out;


				.right-huli-view {
					margin-left: 8rpx;
					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: 170rpx;

						.right-huli-img {

							width: 80rpx;
							height: 80rpx;
						}

						.right-huli-text {
							width: 100%;
							height: 10rpx;
							font-size: 35rpx;
							text-align: center;
							margin-bottom: 5rpx;
						}

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

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

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

			.right-container-photo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				transition: all 0.4s ease-in-out;

				.right-container-photo-img {
					width: 310rpx;
					height: 350rpx;
					margin-bottom: 10rpx;
					transition: all 0.4s ease-in-out;
				}

				.right-container-photo-text {
					font-size: 30rpx;
					color: #324160;
					transition: all 0.4s ease-in-out;
				}

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

			.right-container-photo-change {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 90rpx;
				transition: all 0.4s ease-in-out;
				margin-top: 100rpx;

				.right-container-photo-img {
					width: 510rpx;
					height: 550rpx;
					margin-bottom: 10rpx;
					transition: all 0.4s ease-in-out;
				}

				.right-container-photo-text {
					font-size: 40rpx;
					color: #324160;
					transition: all 0.4s ease-in-out;
				}

				.right-container-photo-text-dark {
					font-size: 40rpx;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
					transition: all 0.4s ease-in-out;
				}
			}

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

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

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

			.time-tra-thi-open {
				margin-left: 80rpx;
				margin-top: 70rpx;
				height: 100%;
				width: 550rpx;
				position: relative;
				transition: all 0.4s ease-in-out;

				.time-text {
					margin-left: 10rpx;
					// color: #586787;
					font-size: 35rpx;
					width: 450rpx;
					margin-bottom: 40rpx;
					line-height: 40rpx;
					transition: all 0.4s ease-in-out;
				}

				.time-text-dark {
					margin-left: 10rpx;
					color: #CDD6EA;
					font-size: 35rpx;
					width: 450rpx;
					margin-bottom: 40rpx;
					line-height: 40rpx;
					transition: all 0.4s ease-in-out;
				}

				.time-tra-thi-zhixing {
					position: absolute;
					top: 75rpx;
					left: 450rpx;
					transition: all 0.4s ease-in-out;
				}

				.time-tra-thi-zhixing-font {
					position: absolute;
					top: 60rpx;
					left: 10rpx;
					width: 100rpx;
					height: 40rpx;
					font-size: 25rpx;
					border-radius: 5rpx;
					color: #fff;
					z-index: 10;
					background-color: rgb(243, 123, 91);
					display: flex;
					justify-content: center;
					align-items: center;
					transition: all 0.4s ease-in-out;
				}

				.time-people-two {
					display: flex;
					margin-top: 40rpx;
					margin-bottom: 40rpx;
					transition: all 0.4s ease-in-out;
				}

				.time-people-img {
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
					transition: all 0.4s ease-in-out;
				}

				.time-people-font {
					transition: all 0.4s ease-in-out;
					font-size: 30rpx;
					margin-right: 20rpx;
				}

				.time-people-font-dark {
					transition: all 0.4s ease-in-out;
					color: #CDD6EA;
					font-size: 30rpx;
					margin-right: 20rpx;
				}

				.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: 80rpx;
					margin-left: 0rpx;
					transition: all 0.4s ease-in-out;

					.time-button-start {
						width: 230rpx;
						height: 80rpx;
						border-radius: 40rpx;
						background: linear-gradient(to bottom, #AF8ED7, #4D3E9B);
						border-left: 2rpx solid #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 32rpx;
						margin-right: 25rpx;
						box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						transition: all 0.4s ease-in-out;
					}

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

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

				.time-font {
					font-size: 70rpx;
					margin-top: 120rpx;
					margin-bottom: 40rpx;
					font-weight: 700;
					background: linear-gradient(to bottom, #7080A1, #263556);
					-webkit-background-clip: text;
					color: transparent;
					transition: all 0.4s ease-in-out;
				}

				.time-font-dark {
					font-size: 70rpx;
					margin-top: 120rpx;
					margin-bottom: 40rpx;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
					font-weight: 700;
					transition: all 0.4s ease-in-out;
				}

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

			.time-tra-sec {
				margin-left: 80rpx;
				margin-top: 50rpx;
				height: 100%;
				width: 500rpx;
				overflow: hidden;
				transition: all 0.4s ease-in-out;

				.time-people-thi {
					display: flex;
					margin-bottom: 15rpx;
					transition: all 0.4s ease-in-out;

					.time-people-img {
						width: 42rpx;
						height: 42rpx;
						margin-right: 5rpx;
						margin-left: 5rpx;
						transition: all 0.4s ease-in-out;
					}

					.time-people-font {
						font-size: 30rpx;
						margin-right: 20rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						transition: all 0.4s ease-in-out;
					}

					.time-people-font-dark {
						color: #CDD6EA;
						font-size: 30rpx;
						margin-right: 20rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						transition: all 0.4s ease-in-out;
					}
				}

				.time-people-thi-change {
					display: flex;
					margin-bottom: 15rpx;
					transition: all 0.4s ease-in-out;

					.time-people-img {
						width: 60rpx;
						height: 60rpx;
						margin-right: 8rpx;
						margin-left: 8rpx;
						transition: all 0.4s ease-in-out;
					}

					.time-people-font {
						// color: #586787;
						font-size: 45rpx;
						margin-right: 30rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						// width: 300rpx;
						transition: all 0.4s ease-in-out;
					}

					.time-people-font-dark {
						color: #CDD6EA;
						font-size: 45rpx;
						margin-right: 30rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						transition: all 0.4s ease-in-out;
					}
				}

				.time-button-view {
					display: flex;
					margin-top: 25rpx;
					margin-left: 0rpx;
					transition: all 0.4s ease-in-out;

					.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: 32rpx;
						margin-right: 25rpx;
						box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.3);
						transition: all 0.4s ease-in-out;
					}

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

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

				.time-font {
					font-size: 75rpx;
					margin-top: 30rpx;
					margin-bottom: 10rpx;
					font-weight: 700;
					background: linear-gradient(to bottom, #7080A1, #263556);
					-webkit-background-clip: text;
					color: transparent;
					transition: font-size 0.4s ease-in-out;
				}

				.time-font-dark {
					font-size: 75rpx;
					margin-top: 30rpx;
					margin-bottom: 10rpx;
					background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
					-webkit-background-clip: text;
					color: transparent;
					font-weight: 700;
					transition: font-size 0.4s ease-in-out;
				}

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

			}


			//左下角结束
		}
	}
</style>