hldy_app/pages/timeMatrix/indexnew.vue

<template>
	<view class="doctorsay-container-container">
		<!-- <view class="doctorsay-container-title">
			<view class="doctorsay-container-left">
				<view class="doctorsay-container-left-gun"></view>
				<view class="doctorsay-container-left-font">时间矩阵</view>
			</view>

			<view class="doctorsay-container-right">
				<view class="titlebutton-father">
					<view v-for="(item,index) in jiajianArray" :key="index">
						<view class="titlebutton" @click="changeType(index)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="titlebutton-father">
					<view v-for="(item,index) in buttonArray" :key="index">
						<view :class="getClassItem(index)" @click="changeTarget(index)">
							{{item}}
						</view>
					</view>
				</view>

				<view class="doctorsay-container-right-kuai-cheng"></view>
				<view class="doctorsay-container-kuai-font">日常</view>
				<view class="doctorsay-container-right-kuai-zi"></view>
				<view class="doctorsay-container-kuai-font">周期</view>
				<view class="doctorsay-container-juzhen" @click="routerBack">
					返回
				</view>
			</view>
		</view> -->
		<view class="super-card">
			<view class="super-card-container">

				<scroll-view style="height: 100%;width: 100%;" :scroll-left="scrollLeft" scroll-x
					:show-scrollbar="false">

					<view :style="{width:widthType * 24 + `rpx`}" style="display: flex;">
						<view v-for="(item0,index0) in changetimearr" :key="index0">
							<view class="super-card-time" :style="{width:widthType + `rpx`}">
								{{(item0.positioning.length == 1 ? ('0' + item0.positioning) : item0.positioning) + ":00"}}
							</view>
						</view>
					</view>

					<view style="display: flex;height: calc(100% - 80rpx);position: relative;"
						:style="{width:widthType * 24 + `rpx`}">
						<view class="xian-bian"></view>
						<scroll-view scroll-y :show-scrollbar="false" :scroll-top="scrollTop">
							<view style="display: flex;height: 100%;">
								<view v-for="(item0,index0) in changetimearr" :key="index0">
									<view class="super-card-time-und" :style="{width:widthType + `rpx`}">
										<view class="bottom-bian"></view>
										<view v-for="(item1,index1) in item0.children" style="width: 100%;"
											:key="index1">
											<view :style="{height:heightType + `rpx`}" class="super-card-time-card"
												@touchend="handleTap(item1,index0,index1)" :data-index0="index0"
												:data-index1="index1">
												<view :class="getClass(item1,index0,index1)" :style="scalcType >= 11 && item1.cycleType !== '日常' && item1.startTime  ? { backgroundColor: '#c5e5ff' } : {}"
													style="font-size: 30rpx;position: relative;">
													<view class="title-time-blue"
														v-show="clickX == index0 && clickY == index1">
													</view>
													<view class="title-time" v-if="item1.startTime"
														style="flex-direction: column;overflow: hidden;">
														<image v-show="item1.startTime"
															style="width: 50rpx;height: 50rpx;margin: 0 auto;"
															src="/static/index/tu.png" />
														<view class="title-time-time" style="font-size: 30rpx;"
															v-show="scalcType<10">
															{{item1.startTime + `-` + item1.endTime}}
														</view>
														<image class="title-time-button"
															style="width: 80rpx;height: 48rpx;"
															v-if="item1.cycleType!='日常'"
															src="/static/index/newruler/jiao.png"
															v-show="scalcType<11" />
														<view class="title-time-font"
															style="right: 10rpx;top: 5rpx;font-size: 20rpx;"
															v-show="scalcType<11" v-if="item1.cycleType!='日常'">
															{{item1.cycleType}}
														</view>
													</view>
													<view v-if="item1.startTime" class="title-time-font-rel"
														v-show="scalcType<11">
														{{splitString(item1.directiveName)[0]}}
													</view>
													<!-- <view class="title-time" v-if="item1.startTime"
														style="margin-top: 0rpx;">
														<view class="title-time-time" style="font-size: 25rpx;"
															v-show="scalcType<10">
															{{item1.startTime + `-` + item1.endTime}}
														</view>
														<image class="title-time-button" v-show="scalcType<10"
															:src="item1.cycleType=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
														<view class="title-time-font" v-show="scalcType<10">
															{{item1.cycleType}}
														</view>
													</view> -->
													<!-- <view v-show="scalcType>=10" style="margin: auto;"
														:style="{fontSize: cardFont + `rpx`}">
														{{item1.cycleType}}
													</view>
													<view v-show="scalcType<10"
														:style="splitString(item1.directiveName)[1] ? {}:{marginTop:`20rpx`}"
														style="font-weight: 700;font-size: 24rpx;">
														{{splitString(item1.directiveName)[0]}}
													</view>
													<view class="down-icons" v-show="scalcType<10"
														:style="item1.cycleType!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
														v-if="splitString(item1.directiveName)[1]">
														<view class=""
															v-for="(item,index) in splitString(item1.directiveName).slice(1)"
															:key="index">
															<view class="icon"
																:style="item1.cycleType!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
																{{splitString(item1.directiveName)[index + 1]}}
															</view>
														</view>
													</view> -->
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <addball :isShow="true" @clickBall="changeType(0)" />
		<decball :isShow="true" @clickBall="changeType(1)" /> -->
		<!-- <max :isShow="true" :isZhengti="scalcType!==6" @clickBall="changeRuler" /> -->
		<!-- <min :isShow="true" @clickBall="scalcType=24" /> -->
		<specialDrawerVue ref="gobackdrawer">
			<rightroll @clickball="clickball" :changerightbottom="scalcType===7?'缩略图':'标准'" />
		</specialDrawerVue>
		<!-- 轮盘 -->
		<!-- <joystick @movecard="movecard" /> -->
		<arrowkeys @movecard="movecard" />
		<!-- 长按的弹出层` -->
		<!-- <view v-show="isopen" class="popup-overlay" @click="isopen=false"> -->
		<view class="popup-overlay-content" v-show="isopen"
			:style="{ top: (2*openY - 350) + 'rpx',left: (2*openX - 780) + 'rpx',opacity: isopacity ? 1 : 0,backgroundColor:timearr[clickY]?.children[clickX]?.type==='日常'? '#fffcf6':'rgb(246, 244, 254)' }"
			@click.stop>
			<view class="popup-overlay-content-left">
				<image class="popup-overlay-content-left-img" :src="`/static/index/teeth.png`" />
				<text class="popup-overlay-content-left-font">
					占个位置
				</text>
			</view>
			<view class="popup-overlay-content-right">
				<view class="time-font">
					10:00 - 10:10
				</view>
				<view class="time-text">
					为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
				</view>
			</view>
		</view>
		<!-- </view> -->
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getNclist } from "@/component/rightItemssecond/api.js";
	import specialDrawerVue from './drawer/specialDrawer.vue';
	import rightroll from './drawer/index.vue';
	// import addball from "./addball.vue"
	// import decball from "./decball.vue"
	// import max from "./max.vue"
	// import min from "./min.vue"
	// import joystick from '@/component/public/newgame/joysticknew.vue';
	// 暗黑模式
	const darkFans = ref(false);
	const timearr = ref([]);
	type darkFanstype = {
		darkFans : boolean
	}
	const buttonArray = ref(["全部", "日常", "周期"]);
	const jiajianArray = ref(["放大", "缩小"]);
	const buttonTarget = ref(0);
	const sysInfo = uni.getSystemInfoSync();
	const rpx2px = sysInfo.windowWidth / 750;
	// 方法：根据条件返回不同的类名
	const getClass = (item : any, index0 : number, index1 : number) => {
		if (item.cycleType === '日常') {
			return 'title-time-border-yellow';
		} else if (item.cycleType) {
			//为啥这么写，是因为动画写行内无效！！！
			return 'title-time-border-pouple'
		}
		return 'title-time-border';
	}

	const getClassItem = (index) => {
		if (buttonTarget.value !== index) {
			return `titlebutton`
		} else {
			switch (index) {
				case 0:
					return `titlebutton-target`

				case 1:
					return `titlebutton-target-yellow`

				case 2:
					return `titlebutton-target-pouple`
			}
		}
	}

	const clickball = (index : number) => {
		switch (index) {
			case 0:
				changeTarget(2)
				break
			case 1:
				changeType(0)
				break
			case 2:
				changeTarget(1)
				break
			case 3:
				changeType(1)
				break
			case 4:
				changeTarget(0)
				break
			case 5:
				if (scalcType.value ===7) {
					changeRuler(false)
				} else {
					changeRuler(true)
				}

				break
		}
	}
	// 切割bigArray
	function splitString(str : any) {
		if (str) {
			// 使用正则表达式找到所有括号的内容
			let result = [];
			let remainingStr = str;
			// 正则匹配最外层括号（支持全角和半角）
			let regex = /([^（(]*)[（(]([^）)]+)[）)]/;

			while (regex.test(remainingStr)) {
				let match = remainingStr.match(regex);
				if (match) {
					// 添加括号前的部分（去掉空白）
					if (match[1].trim()) {
						result.push(match[1].trim());
					}
					// 添加括号内的内容
					if (match[2].trim()) {
						result.push(match[2].trim());
					}
					// 更新剩余的字符串
					remainingStr = remainingStr.replace(match[0], '').trim();
				}
			}

			// 如果最后还有剩余部分，也加入结果
			if (remainingStr.trim()) {
				result.push(remainingStr.trim());
			}

			return result;
		} else {
			return [];
		}

	}
	const scrollLeft = ref(0);
	const scrollTop = ref(0);

	const changetimearr = ref([]);
	const scalcType = ref(0);
	const widthType = ref(247);
	const heightType = ref(180);
	const cardFont = ref(0);
	const bili = ref(0)
	// 生命周期钩子
	onLoad((options) => {
		let arr = uni.getStorageSync('myArray');
		timearr.value = arr
		if (timearr.value[0].children.length < 8) {
			timearr.value.forEach((element : any) => {
				// 循环直到长度达到 7
				while (element.children.length < 8) {
					element.children.push({ directiveName: "" });
				}
			});
		}
		changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
		// scrollLeft.value = 740

		scalcType.value = 7
		centerCell()
		// widthType.value = 247;
		// scrollLeft.value = 740;
		// heightType.value = 140

	});

	const changeType = (number : number) => {
		if (number) {
			if (scalcType.value < 24) {
				scalcType.value++
			}
		} else {
			if (scalcType.value > 7) {
				scalcType.value--
			}
		}
	}
	const totalColumns = 24; // 总列数
	const totalRows = 11;    // 总行数
	const visibleWidth = 2220;  // 可视区域宽度 (rpx)，基于 scalcType * widthType ≈ 2220
	const visibleHeight = 562.5; // 可视区域高度 (rpx)，假设显示约5行时 heightType = 102.5
	function centerCell() {
		if (clickX.value >= 0 && clickX.value <= totalColumns && clickY.value >= 0 && clickY.value <= totalRows) {
			// 计算点击格子的中心位置 (rpx)
			const cellCenterX = (clickX.value + 0.5) * widthType.value;
			const cellCenterY = (clickY.value - 0.5) * heightType.value;

			// 计算 scrollLeft 和 scrollTop，使格子中心位于可视区域中心
			scrollLeft.value = cellCenterX - visibleWidth / 2;
			scrollTop.value = cellCenterY - visibleHeight / 2;

			// 计算网格总宽高
			const totalWidth = totalColumns * widthType.value;
			const totalHeight = totalRows * heightType.value;

			// 限制 scrollLeft 和 scrollTop 在有效范围内
			scrollLeft.value = Math.max(0, Math.min(scrollLeft.value, totalWidth - visibleWidth)) / 2;
			// scrollTop.value =  0// scrollTop.value =  0
			scrollTop.value = Math.max(0, Math.min(scrollTop.value, totalHeight - visibleHeight)) / 2;
			// setTimeout(() => rulerTouchClick(setTimeout(() => rulerTouchClick(changetimearr.value[clickX.value].children[clickY.value], clickX.value, clickY.value), 50), clickX.value, clickY.value), 50)
		}
	}
	const clickX = ref(10);
	const clickY = ref(0);
	watch([clickX, clickY], () => {
		centerCell();
	});

	watch(
		scalcType,
		(newVal, oldVal) => {
			if (oldVal !== newVal) {
				// 基准与视口设置
				// const BASE_WIDTH = 92.5;
				// const BASE_HEIGHT = 102.5;
				// const VIEW_ROWS = 11;
				// const VIEWPORT_HEIGHT = BASE_HEIGHT * VIEW_ROWS; // 11 * 102.5

				// 只设置宽度和字体，height 由后面按比例并保证整数行计算
				switch (newVal) {
					case 24:
						widthType.value = 92.5;
						heightType.value = 107;
						break;
					case 23:
						widthType.value = 96.5;
						heightType.value = 107;
						break;
					case 22:
						widthType.value = 101;
						heightType.value = 107;
						break;
					case 21:
						widthType.value = 106;
						heightType.value = 116;
						break;
					case 20:
						widthType.value = 112;
						heightType.value = 116;
						break;
					case 19:
						widthType.value = 117;
						heightType.value = 116;
						break;
					case 18:
						widthType.value = 124;
						heightType.value = 121;
						break;
					case 17:
						widthType.value = 131;
						heightType.value = 128;
						break;
					case 16:
						widthType.value = 139;
						heightType.value = 133;
						break;
					case 15:
						widthType.value = 148;
						heightType.value = 142;
						break;
					case 14:
						widthType.value = 159;
						heightType.value = 150;
						break;
					case 13:
						widthType.value = 171;
						heightType.value = 160;
						break;
					case 12:
						widthType.value = 185;
						heightType.value = 170;
						break;
					case 11:
						widthType.value = 202;
						heightType.value = 183;
						break;
					case 10:
						widthType.value = 222;
						heightType.value = 195;
						break;
					case 9:
						widthType.value = 247;
						heightType.value = 213;
						break;
					case 8:
						widthType.value = 280;
						heightType.value = 235;
						break;
					case 7:
						widthType.value = 320;
						heightType.value = 256;
						break;
					
				}

				// 按宽度比例计算期望高度
				// const tentativeHeight = BASE_HEIGHT * (widthType.value / BASE_WIDTH);

				// // 计算在视口内能完整显示的行数（取整），并限制在 1..VIEW_ROWS 之间
				// let rows = Math.floor(VIEWPORT_HEIGHT / tentativeHeight);
				// if (rows < 1) rows = 1;
				// if (rows > VIEW_ROWS) rows = VIEW_ROWS;

				// // 最终高度使得视口内恰好显示整数行，避免半个格子
				// heightType.value = VIEWPORT_HEIGHT / rows;

				centerCell();
				return;
			}
		}
	)

	// 上一次触摸结束的时间戳
	const lastTap = ref(0)
	// 单击逻辑的定时器 ID
	const clickTimer = ref(null)
	function handleTap(item : any, index0 : number, index1 : number) {
		const now = Date.now()
		// 先清除之前的单击定时器，防止误触
		if (clickTimer.value != null) {
			clearTimeout(clickTimer.value)
		}
		// 如果两次触摸间隔小于 250ms，则判定双击
		if (now - lastTap.value < 250) {
			// message.value = '检测到双击事件'
			// console.log('双击逻辑执行')
			if (item.startTime) {
				closeIsOpen(index0, index1)
			}

			lastTap.value = 0  // 重置，避免连续三次触发
		} else {
			// 延迟 250ms 执行单击逻辑，以等待可能的第二次触摸
			// clickTimer.value = setTimeout(() => {
			// 	rulerTouchClick(item, index0, index1, e)
			// }, 250)
			if (item.directiveName) {
				clickX.value = index0;
				clickY.value = index1;
			}

			lastTap.value = now
		}
	}
	const openX = ref(0);
	const openY = ref(0);
	const isopen = ref(false);
	const isopacity = ref(false);

	const timer = ref<number | null>(null)

	//表格点击开始
	const rulerTouchClick = (item : any, index0 : number, index1 : number) => {
		if (item.directiveName) {

			nextTick(() => {
				const query = uni.createSelectorQuery()
				query
					.selectAll('.super-card-time-card')
					.boundingClientRect((data : any) => {
						data.forEach(async (res : any) => {
							// 根据你的条件筛选元素
							if (res.dataset.index0 == index0 && res.dataset.index1 == index1) {
								if (res.left < 500) {
									// 表格太靠左侧，修改到右面
									openX.value = Math.floor(res.left) + 510;
								} else {
									openX.value = Math.floor(res.left) - 10
								}
								if (res.top < 300) {
									// 表格太靠上侧，修改到下面
									openY.value = Math.floor(res.top) + 250;
								} else {
									openY.value = Math.floor(res.top)
								}
								await nextTick()
								isopen.value = true;
								isopacity.value = false;
								//加动画
								setTimeout(() => {
									isopacity.value = true;
								}, 100)
							}
						})
					})
					.exec()
			})

		} else {
			// clickX.value = index0;
			// clickY.value = index1;
		}
	}
	const rulerTouchStart = () => {

	}
	const rulerTouchMove = () => {

	}
	const rulerTouchEnd = () => {

	}
	const routerBack = () => {
		uni.navigateBack()
	}
	const closeIsOpen = (index0 : number, index1 : number,) => {
		uni.navigateBack({
			delta: 1,
			success: () => {
				uni.$emit('where', {
					index0: index0,
					index1: index1,
				});
			}
		})
	}
	//处理空行，把空行全干掉
	const changeWhiteLine = () => {
		let emptyChildIndices = [];
		//找空行
		changetimearr.value.forEach((res : any, rowIndex : number) => {
			emptyChildIndices = [];
			// 遍历 res.children 数组中的每个子元素 child
			res.children.forEach((child, index) => {
				// 检查 child 的 value 属性是否为空
				if (child.directiveName === null || child.directiveName === '' || child.directiveName === undefined) {

					// 如果是空值，检查其他 res.children 中相同索引的元素
					const isEmptyInAllRows = changetimearr.value.every((otherRes) => {
						const otherChild = otherRes.children[index];
						return otherChild.directiveName === '';
					});
					// 如果在所有行中该位置的 directiveName 都为空，记录该索引
					if (isEmptyInAllRows) {
						emptyChildIndices.push(index);
					}
				}
			});
		})
		const sortedIndices = [...emptyChildIndices].sort((a, b) => b - a);
		changetimearr.value.forEach((element : any) => {
			sortedIndices.forEach(idx => {
				element.children.splice(idx, 1);
			});
		});
		if (changetimearr.value[0].children.length < 8) {
			changetimearr.value.forEach((element : any) => {
				// 循环直到长度达到 7
				while (element.children.length < 8) {
					element.children.push({ directiveName: "" });
				}
			});
		}
	}
	const changeTarget = (index : number) => {
		if (buttonTarget.value !== index) {
			changetimearr.value = []
			buttonTarget.value = index
			switch (index) {
				case 0:
					changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
					break;
				case 1:
					changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
					changetimearr.value.forEach((element0 : any) => {
						element0.children.forEach((element1 : any) => {
							if (element1.directiveName && element1.cycleType !== "日常") {
								element1.directiveName = "";
								element1.cycleType = ""
								element1.startTime = ""
							}
						})
					})
					break;
				case 2:
					changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
					changetimearr.value.forEach((element0 : any) => {
						element0.children.forEach((element1 : any) => {
							if (element1.directiveName && element1.cycleType === "日常") {
								element1.directiveName = "";
								element1.cycleType = ""
								element1.startTime = ""
							}
						})
					})
					break;
			}
		}
	}
	const movecard = (type : number) => {
		isopen.value = false
		switch (type) {
			case 0:
				if (clickY.value > 0) {
					clickY.value--
				}

				break
			case 1:
				if (clickX.value < 23) {
					clickX.value++
				}


				break
			case 2:
				if (clickY.value < 11) {
					clickY.value++
				}

				break
			case 3:
				if (clickX.value > 0) {
					clickX.value--
				}

				break
			case 4:
				rulerTouchClick(changetimearr.value[clickX.value].children[clickY.value], clickX.value, clickY.value)

				break
			case 5:

				routerBack()
				break
		}
	}
	function changeRuler(type : boolean) {
		if (type) {
			scalcType.value = 7
		} else {
			scalcType.value = 24
		}
	}
</script>

<style scoped lang="less">
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	//暗黑模式
	.darkbackgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}

	.doctorsay-container-container {
		border: 2rpx solid #fff;
		width: calc(100% - 4rpx);
		height: calc(100vh - 4rpx);
		/* 设置背景图和白色背景 */
		// background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.3);
		// backdrop-filter: blur(20rpx);
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		// background-blend-mode: screen;
		background-color: #eff0f4;
		border-radius: 30rpx;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
		/* 右下角阴影 */
		overflow: hidden;

		.super-card-end {
			width: 100%;
			display: flex;

			.super-end-father {
				height: 100%;
				display: flex;
				flex-direction: column;
				width: 100%;

				.super-end-items-all {
					width: calc(100% - 85rpx);
					height: 200rpx;
					margin-left: 40rpx;
					margin-right: 40rpx;
					margin-top: 20rpx;
				}

				.super-end-items {
					display: flex;
					width: calc(100% - 85rpx);
					height: 200rpx;

					.super-end-items-father {
						margin-right: 20rpx;
						width: 150rpx;
						height: 150rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						position: relative;
						background: linear-gradient(to bottom right, #fff 0%, #dcdcf9 50%, #dbdcf8 100%);
						border-radius: 25rpx;
						border: 2rpx solid #fff;
						box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
						transition: all 1.5s ease-in-out;

						.super-end-items-father-close-father {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							background-color: #A9ACB1;
							justify-content: center;
							align-items: center;
							position: absolute;
							top: 0rpx;
							right: 0rpx;
							z-index: 10;
							color: #fff;
						}


						.super-end-items-img-father {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;

							/* 让正方形变成圆 */
							.super-end-items-img {
								width: 85rpx;
								height: 85rpx;
							}
						}

						.super-end-items-img-father-active {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							animation: shake 0.5s infinite;

							/* 让正方形变成圆 */
							.super-end-items-img {
								width: 85rpx;
								height: 85rpx;
							}
						}


						.super-end-items-font {
							margin-top: -10rpx;
							font-size: 25rpx;
						}
					}
				}

				.super-end-font-father {
					display: flex;
					margin-top: 20rpx;
					margin-bottom: 10rpx;

					.super-end-font-gun {
						margin-left: 40rpx;
						margin-right: 20rpx;
						margin-top: 5rpx;
						width: 13rpx;
						height: 40rpx;
						background: linear-gradient(to bottom, #04BCED, #0160CE);
						border-radius: 10rpx;
					}

					.super-end-font-font {
						font-size: 38rpx;
						font-weight: 700;
					}
				}
			}
		}

		.doctorsay-container-title {
			width: 100%;
			height: 105rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.doctorsay-container-right {
				height: 100%;
				display: flex;
				align-items: center;
				// width: 800rpx;

				.doctorsay-container-juzhen {
					background: linear-gradient(to right bottom, #00c9ff, #0076ff);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					font-size: 27rpx;
					margin-right: 50rpx;
				}

				.doctorsay-container-button-father {
					display: flex;

					.doctorsay-container-button-target {
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #3FA9F5;
						color: #fff;
						width: 140rpx;
						height: 60rpx;
						margin-right: 20rpx;
						font-size: 28rpx;
						border-radius: 10rpx;
					}

					.doctorsay-container-button {
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #fff;
						width: 140rpx;
						height: 60rpx;
						margin-right: 20rpx;
						font-size: 28rpx;
						border-radius: 10rpx;
					}
				}

				.doctorsay-container-right-kuai-cheng {
					background-color: #FFDBA1;
					height: 35rpx;
					width: 35rpx;
					border-radius: 7rpx;
				}

				.doctorsay-container-right-kuai-zi {
					background-color: #7B61FF;
					height: 35rpx;
					width: 35rpx;
					border-radius: 7rpx;
				}

				.doctorsay-container-kuai-font {
					font-size: 32rpx;
					margin-left: 10rpx;
					margin-right: 25rpx;
				}
			}

			.doctorsay-container-left {
				display: flex;

				.doctorsay-container-left-gun {
					margin-top: 7rpx;
					margin-left: 40rpx;
					margin-right: 20rpx;
					width: 13rpx;
					height: 40rpx;
					background: linear-gradient(to bottom, #04BCED, #0160CE);
					border-radius: 10rpx;
				}

				.doctorsay-container-left-font {
					font-size: 38rpx;
					font-weight: 700;
				}
			}
		}

	}

	.super-card {
		display: flex;
		justify-content: center;
		width: 100%;
		height: calc(100% - 150rpx);
		margin-top: 100rpx;

		.scroll-x {
			height: 100%;
			width: 100%;
		}

		.super-card-container {
			/* 设置背景图和白色背景 */
			// background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.5);
			/* 使用 screen 混合模式，让图像与白色混合变淡 */
			// background-blend-mode: screen;
			// isolation: isolate;
			overflow: hidden;
			width: calc(100% - 100rpx);
			height: 100%;
			// border-radius: 20rpx;
			// border: 2rpx solid #fff;
			// box-shadow: 10rpx 10rpx 20px rgba(0, 0, 0, 0.1);
			// color: #A9ACB1;
			position: relative;
		}

		.super-card-time {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			width: 380rpx;
			color: #A9ACB1;
			// border-right: 1rpx solid transparent;
			// border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
			// font-weight: 700;
		}

		.super-card-time-und {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 380rpx;
			position: relative;
			flex-direction: column;
			border-right: 1rpx solid transparent;
			border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
		}

		.super-card-time-card {
			display: flex;
			justify-content: center;
			align-items: center;
			// height: 180rpx;

			width: calc(100%);
			border-top: 1rpx solid transparent;
			border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
			flex-direction: column;
			position: relative;

		}
	}

	.title-time-border-yellow {
		margin: 10rpx;
		// border: 2rpx solid #d0d8e0;
		background-color: #fff;
		// background: linear-gradient(to bottom, #fff1db, #ffe2b2);
		width: calc(100% - 40rpx);
		height: calc(100% - 40rpx);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		// opacity: 0.3;
		// box-shadow: 6rpx 6rpx 12rpx rgba(255, 138, 0, 0.7);
	}

	.title-time-border-pouple {
		margin: 10rpx;
		background-color: #fff;
		// opacity: 0.3;
		// border: 1rpx solid #dae8fa;
		// background: linear-gradient(to bottom, #f1eeff, #e3deff);
		width: calc(100% - 40rpx);
		height: calc(100% - 40rpx);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		// box-shadow: 6rpx 6rpx 12rpx rgba(123, 97, 255, 0.7);
	}

	.title-time-border {
		// margin-top: 4rpx;
		// margin-left: 4rpx;
		// // border: 1rpx solid black;
		// width: calc(100% - 8rpx);
		// height: calc(100% - 8rpx);
		// border-radius: 20rpx;
		// display: flex;
		// // justify-content: center;
		// align-items: center;
		// flex-direction: column;
		margin: 10rpx;
		// background-color: #fff;
		// opacity: 0.3;
		// border: 1rpx solid #dae8fa;
		// background: linear-gradient(to bottom, #f1eeff, #e3deff);
		width: calc(100% - 40rpx);
		height: calc(100% - 40rpx);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.title-time {
		display: flex;
		width: 100%;
		// position: relative;

		.title-time-time {
			font-size: 32rpx;
			margin: 0 auto;
			margin-top: 12rpx;

		}

		.title-time-button {
			position: absolute;
			top: -4rpx;
			right: -4rpx;
			width: 65rpx;
			height: 60rpx;
		}

		.title-time-zhejiao {
			position: absolute;
			top: 0rpx;
			left: 5rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.title-time-font {
			position: absolute;
			top: 7rpx;
			right: 5rpx;
			font-size: 20rpx;
			color: #fff;
		}
	}

	.down-icons {
		margin-top: 5rpx;
		width: 100%;
		height: 58rpx;
		background-color: rgb(255, 216, 126);
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			margin: 0 5rpx;
			font-size: 20rpx;
			padding: 3rpx 5rpx;
			background-color: rgb(255, 138, 0);
			color: #fff;
			border-radius: 5rpx;
		}
	}

	// .popup-overlay {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	/* 添加毛玻璃效果 */
	// 	z-index: 998;

	.popup-overlay-content {
		position: fixed;
		display: flex;
		align-items: center;
		width: 800rpx;
		height: 390rpx;
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
		opacity: 0;
		transition: opacity 0.4s ease;

		.popup-overlay-content-left {
			height: 100%;
			width: 350rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.popup-overlay-content-left-img {
				width: 280rpx;
				height: 180rpx;
				margin-top: -30rpx;
			}

			.popup-overlay-content-left-font {
				font-size: 30rpx;
			}
		}

		.popup-overlay-content-right {
			height: 100%;
			width: 450rpx;
			position: relative;

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

			.time-text {
				margin-left: 10rpx;
				font-size: 30rpx;
				width: 380rpx;
				margin-bottom: 50rpx;
				line-height: 35rpx;

			}

			.right-richang {
				background-color: #FFC363;
				position: absolute;
				top: 108rpx;
				right: 50rpx;
				padding: 5rpx;
				border-radius: 10rpx;
			}

			.right-richangnot {
				background-color: #7B61FF;
				position: absolute;
				top: 108rpx;
				right: 50rpx;
				padding: 5rpx;
				border-radius: 10rpx;
				color: #fff;
			}

			.right-crush {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 70rpx;
				height: 70rpx;
				animation: shake 0.5s 3;
			}
		}
	}

	// }

	.titlebutton-father {
		display: flex;
		margin-right: 20rpx;

		.titlebutton {
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;
			font-size: 27rpx;
			margin-right: 10rpx;
		}

		.titlebutton-target {
			background: linear-gradient(to right bottom, #00c9ff, #0076ff);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;
			font-size: 27rpx;
			margin-right: 10rpx;
		}

		.titlebutton-target-yellow {
			background: #FFDBA1;
			// color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;
			font-size: 27rpx;
			margin-right: 10rpx;
		}

		.titlebutton-target-pouple {
			background: #7B61FF;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;
			font-size: 27rpx;
			margin-right: 10rpx;
		}
	}

	.boom {
		position: absolute;
		top: 80rpx;
		left: 0rpx;
		width: 30rpx;
		height: 1500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		z-index: 10;

		.boom-son {
			height: 153rpx;
			width: 100%;
			font-size: 22rpx;
			letter-spacing: 5rpx;
			writing-mode: vertical-rl;
			/* 竖排文字，从右往左 */
			text-align: center;
			z-index: 10;
			/* 确保文字在容器内居中 */
			background: linear-gradient(to bottom, #ffe2b2, #e3deff);
			// z-index: -1;
			border-bottom-right-radius: 40rpx;
			border-top-right-radius: 40rpx;
		}

		.boom-son-target {
			height: 153rpx;
			width: 100%;
			font-size: 22rpx;
			letter-spacing: 5rpx;
			writing-mode: vertical-rl;
			/* 竖排文字，从右往左 */
			text-align: center;
			z-index: 10;
			/* 确保文字在容器内居中 */
			background: linear-gradient(to bottom, #ff8a00, #eceaff);
			border-bottom-right-radius: 40rpx;
			border-top-right-radius: 40rpx;
		}
	}

	.title-time-blue {
		/* 你的定位与尺寸保持不变 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 105%;
		height: 105%;
		z-index: 10;

		--color: #99C9FD;
		--thick: 2px;
		--radius: 16px;

		border: var(--thick) dashed var(--color);
		border-radius: var(--radius);

		background:
			/* 上边 */
			repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / 100% var(--thick) no-repeat,
			/* 下边 */
			repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) bottom left / 100% var(--thick) no-repeat,
			/* 左边 */
			repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / var(--thick) 100% no-repeat,
			/* 右边 */
			repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top right / var(--thick) 100% no-repeat;
	}

	.title-time-font-rel {
		min-width: 0;
		/* 关键：允许在 flex 中收缩以触发 overflow */
		// white-space: nowrap;
		overflow: hidden;
		text-align: center;
		// text-overflow: ellipsis;
	}

	.xian-bian {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		border-right: 1rpx solid transparent;
		border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
	}

	.bottom-bian {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;
		border-bottom: 1rpx solid transparent;
		border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
	}
</style>