From 603bbbe952b5dbfbf1b64e0a74ec9ebbdde3b8a6 Mon Sep 17 00:00:00 2001
From: Teng <461587751@qq.com>
Date: Thu, 27 Mar 2025 17:32:12 +0800
Subject: [PATCH] 3.27

---
 component/public/Drawer.vue                   |   80 +
 component/public/leftMenu.vue                 |  160 -
 component/rightItemsindex/index.css           | 2346 +++++++++++++++
 component/rightItemsindex/index.vue           | 2658 ++---------------
 component/rightItemssecond/api.js             |   13 +
 component/rightItemssecond/index.vue          |   16 +-
 manifest.json                                 |   13 +-
 pages/index/index.css                         |    0
 pages/index/index.vue                         |    3 +-
 unpackage/dist/dev/app-plus/app-service.js    |  179 +-
 unpackage/dist/dev/app-plus/manifest.json     |    7 +
 .../dist/dev/app-plus/pages/index/index.css   |  234 +-
 utils/request.js                              |   88 +
 13 files changed, 3112 insertions(+), 2685 deletions(-)
 create mode 100644 component/public/Drawer.vue
 delete mode 100644 component/public/leftMenu.vue
 create mode 100644 component/rightItemsindex/index.css
 create mode 100644 component/rightItemssecond/api.js
 create mode 100644 pages/index/index.css
 create mode 100644 utils/request.js

diff --git a/component/public/Drawer.vue b/component/public/Drawer.vue
new file mode 100644
index 0000000..eca546e
--- /dev/null
+++ b/component/public/Drawer.vue
@@ -0,0 +1,80 @@
+<template>
+	<view>
+		<!-- 遮罩层 -->
+		<view v-if="isVisible" class="overlay" @click="closeDrawer"></view>
+		<!-- 抽屉 -->
+		<view :class="['drawer', { 'drawer-open': isVisible }]">
+			<view class="drawer-content">
+				<!-- 抽屉内容 -->
+				<slot />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+
+	const isVisible = ref(false);
+
+	// 打开抽屉
+	const openDrawer = () => {
+		isVisible.value = true;
+	};
+
+	// 关闭抽屉
+	const closeDrawer = () => {
+		isVisible.value = false;
+	};
+
+	// 暴露方法供父组件调用
+	defineExpose({
+		openDrawer,
+		closeDrawer,
+	});
+</script>
+
+<style scoped>
+	/* 遮罩层样式 */
+	.overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+		/* 确保遮罩层在抽屉下方 */
+	}
+
+	/* 抽屉样式 */
+	.drawer {
+		position: fixed;
+		top: 0;
+		right: -80%;
+		width: 80%;
+		height: 100vh;
+		background: #fff;
+		z-index: 1000;
+		/* 确保抽屉在遮罩层上方 */
+		transition: right 0.5s ease;
+		border-top-left-radius: 80rpx;
+		/* 设置左上角的圆角半径 */
+		border-bottom-left-radius: 80rpx;
+		/* overflow: hidden; */
+		/* 设置左下角的圆角半径 */
+	}
+
+	/* 抽屉打开时的样式 */
+	.drawer-open {
+		right: 0;
+	}
+
+	/* 抽屉内容样式 */
+	.drawer-content {
+		/* padding: 20px; */
+		/* overflow: hidden; */
+	}
+</style>
\ No newline at end of file
diff --git a/component/public/leftMenu.vue b/component/public/leftMenu.vue
deleted file mode 100644
index ed70623..0000000
--- a/component/public/leftMenu.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<!-- 左侧菜单提取（已废弃）保留一下待用 -->
-<!-- <template>
-	<view class="left-container">
-		<view class="left-head">
-			<image class="left-head-img" src="/static/index/oldman.png" />
-			<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
-				王金凤
-			</text>
-		</view>
-		<view class="left-img-container">
-			<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos" >
-				<view class="blue-circle" v-show="index == menuIndex">
-					<image class="blue-circle-size" :src="`/static/index/ray.png`" />
-				</view>
-				<image class="left-img" :src="index == menuIndex ? item.targetUrl : item.url"
-					@click="jumpTonew(item.path)" />
-
-			</view>
-		</view>
-	</view>
-</template>
-
-<script setup>
-	import {
-		defineProps,
-		defineEmits,
-		ref
-	} from 'vue';
-
-	// 定义 Props
-	const props = defineProps({
-		darkFans: {
-			type: Boolean,
-			default: false
-		},
-		menuIndex: {
-			type: Number,
-			default: 0
-		},
-	});
-	// 定义事件
-	const emit = defineEmits(['click']);
-	// 初始化左侧菜单列表
-	const iconList = ref([{
-			url: '/static/index/lefticon/index.png',
-			targetUrl: '/static/index/lefticontarget/blueindex.png',
-			path: `/pages/index/index`
-		},
-		{
-			url: '/static/index/lefticon/nurse.png',
-			targetUrl: '/static/index/lefticontarget/bluenurse.png',
-			path: `/pages/doctorsay/index`
-		},
-		{
-			url: '/static/index/lefticon/doctor.png',
-			targetUrl: '/static/index/lefticontarget/bluedoctor.png',
-			path: ''
-		},
-		{
-			url: '/static/index/lefticon/give.png',
-			targetUrl: '/static/index/lefticontarget/givedark.png',
-			path: ''
-		},
-		{
-			url: '/static/index/lefticon/wifi.png',
-			targetUrl: '/static/index/lefticontarget/bluewifi.png',
-			path: ''
-		},
-		{
-			url: '/static/index/lefticon/back.png',
-			targetUrl: '/static/index/lefticontarget/blueback.png',
-			path: ''
-		}
-	]);
-
-	const handleClick = () => {
-		emit('click'); // 触发父组件的事件
-	};
-	// 变更菜单
-
-	const jumpTonew = (path) => {
-		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,
-				animationType: 'none', // 取消动画效果
-				animationDuration: 0 // 设置动画持续时间为0，表示没有动画
-			});
-			
-		}
-	}
-</script>
-
-<style scoped lang="less">
-	.left-container {
-		width: 235rpx;
-		height: 100%;
-
-		.blue-circle-pos {
-			position: relative;
-
-			.blue-circle {
-				position: absolute;
-				top: -50rpx;
-				left: -68rpx;
-
-				.blue-circle-size {
-					width: 170rpx;
-					height: 250rpx;
-				}
-			}
-		}
-
-		.left-head {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: column;
-
-			.left-head-img {
-				width: 150rpx;
-				height: 150rpx;
-				margin-top: 60rpx;
-			}
-
-			.left-head-font {
-				font-weight: 700;
-				font-size: 40rpx;
-			}
-
-			.left-head-font-dark {
-				font-weight: 700;
-				font-size: 40rpx;
-				background: linear-gradient(to right, #EBF4FF, #ADC4E0);
-				-webkit-background-clip: text;
-				color: transparent;
-			}
-		}
-
-		.left-img-container {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: column;
-			// margin-top: 30rpx;
-
-			.left-img {
-				width: 93rpx;
-				height: 93rpx;
-				// margin-top: 25rpx;
-				// margin-bottom: 25rpx;
-				margin: 50rpx 0;
-				z-index: 100;
-			}
-		}
-	}
-</style> -->
\ No newline at end of file
diff --git a/component/rightItemsindex/index.css b/component/rightItemsindex/index.css
new file mode 100644
index 0000000..71bc980
--- /dev/null
+++ b/component/rightItemsindex/index.css
@@ -0,0 +1,2346 @@
+	.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 {
+
+				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: 100%;
+				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;
+				/* 增加背景色确保视觉效果 */
+
+				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%);
+	}
+
+	.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;
+				}
+
+				.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;
+		}
+
+		.right-huli-xia {
+			width: 30rpx;
+			height: 20rpx;
+		}
+	}
+
+	.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;
+			}
+
+		}
+	}
+
+	.down-icons {
+		margin-top: 10rpx;
+		width: 100%;
+		height: 60rpx;
+		background-color: rgb(255, 216, 126);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.icon {
+			margin: 0 5rpx;
+			font-size: 20rpx;
+			padding: 5rpx 10rpx;
+			background-color: rgb(255, 138, 0);
+			color: #fff;
+			border-radius: 5rpx;
+		}
+	}
+
+	.right-container-big {
+		transform: scale(1.5);
+		/* 初始状态 */
+		transition: transform 0.5s ease;
+		/* 平滑过渡 */
+		transform-origin: left top;
+		background-color: rgba(220, 230, 254, 1);
+	}
+
+	.right-container-small {
+		transform: scale(1);
+		/* 初始状态 */
+		transition: transform 0.5s ease;
+		/* 平滑过渡 */
+		transform-origin: left top;
+		background-color: rgba(220, 230, 254, 1);
+		z-index: 998;
+	}
+
+	.right-container-right-big {
+		transform: scale(1.5);
+		margin-left: 2%;
+		width: 41%;
+		/* 初始状态 */
+		transition: transform 0.5s ease;
+		/* 平滑过渡 */
+		transform-origin: right bottom;
+		background-color: rgba(220, 230, 254, 1);
+		border-radius: 50rpx;
+	}
+
+	.right-container-right-small {
+		transform: scale(1);
+		margin-left: 2%;
+		width: 41%;
+		/* 初始状态 */
+		transition: transform 0.5s ease;
+		/* 平滑过渡 */
+		transform-origin: right bottom;
+		background-color: rgba(220, 230, 254, 1);
+		// z-index: 998;
+		border-radius: 50rpx;
+	}
+
+	.right-container-left-big {
+		transform: scale(1.5);
+		// margin-left: 2%;
+		width: 55%;
+		/* 初始状态 */
+		transition: transform 0.5s ease;
+		/* 平滑过渡 */
+		transform-origin: left bottom;
+		background-color: rgba(183, 200, 243, 1);
+		// background-color: #fff;
+		// z-index: 999;
+		border-radius: 50rpx;
+	}
+
+	.right-container-left-small {
+		transform: scale(1);
+		width: 55%;
+		/* 初始状态 */
+		transition: transform 0.5s ease;
+		/* 平滑过渡 */
+		transform-origin: left bottom;
+		background-color: rgba(183, 200, 243, 1);
+		// z-index: 998;
+		border-radius: 50rpx;
+	}
\ No newline at end of file
diff --git a/component/rightItemsindex/index.vue b/component/rightItemsindex/index.vue
index 7c433d0..723a722 100644
--- a/component/rightItemsindex/index.vue
+++ b/component/rightItemsindex/index.vue
@@ -135,7 +135,8 @@
 							<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">
+								<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis"
+									@click="openhuliList(index)">
 									<image class="right-huli-img" :src="item.url" />
 									<text class="right-huli-text">{{item.name}}</text>
 								</view>
@@ -405,6 +406,35 @@
 				</view>
 			</view>
 		</view>
+		<Drawer ref="drawer">
+			<view class="draw-all">
+				<view class="draw-title">
+					<view class="draw-title-gun"></view>
+					<view class="draw-title-font">转单执行</view>
+				</view>
+
+				<view class="draw-contain">
+					<view class="container-father">
+						<view class="draw-contain-white-sha"></view>
+						<view class="container">
+							<div class="line" :style="{width: lineWidth}"></div>
+							<div class="line-gray"></div>
+							<template v-for="(item, index) in circles" :key="index">
+								<div :class="circlesNumber>=index?  `outer-circle-target`:`outer-circle`"
+									@click="circlesNumber=index">
+									<div :class="circlesNumber>=index?  `inner-circle-target`:`inner-circle`">
+										<span>{{ item.label }}</span>
+									</div>
+								</div>
+							</template>
+						</view>
+						<view class="draw-contain-gray"></view>
+						<view class="draw-contain-white"></view>
+					</view>
+
+				</view>
+			</view>
+		</Drawer>
 	</view>
 
 </template>
@@ -412,7 +442,28 @@
 <script setup lang="ts">
 	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
 	import type { huliListType, medType, roomBtttonType } from "./index";
-
+	import Drawer from '../public/Drawer.vue';
+	//抽屉开启
+	const drawer = ref(null);
+	const circles = [
+		{ label: '指令' },
+		{ label: '转单' },
+		{ label: '完成' }
+	];
+	// 计算宽度
+	const lineWidth = computed(() => {
+		switch (circlesNumber.value) {
+			case 0:
+				return '0';
+			case 1:
+				return 'calc(100% - 600rpx)';
+			case 2:
+				return 'calc(100% - 120rpx)';
+			default:
+				return '100%';
+		}
+	});
+	const circlesNumber = ref(0);
 	const props = defineProps({
 		isshow: {
 			type: Boolean,
@@ -425,26 +476,14 @@
 	});
 	//点击后动画效果（左上角）
 	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('');
@@ -591,91 +630,38 @@
 		isPopupVisiblefiropen.value = true;
 		isPopupVisiblesec.value = false;
 		isPopupVisiblethi.value = false;
-		// setTimeout(() => {
-		// 	widthCom.value = 1900;
-		// 	heightCom.value = 1080;
-		// 	topCom.value = 145;
-		// 	leftCom.value = 233;
-		// 	isPopupVisiblefiropen.value = true;
-		// }, 10)
 		setTimeout(() => {
-			// widthComthi.value = 1900;
-			// heightComthi.value = 1080;
-			// topComthi.value = 320;
-			// leftComthi.value = 380;
 			isPopupVisiblefiropen.value = false;
 		}, 500)
 	}
-	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 = !isPopupVisiblesec.value;
 		isPopupVisible.value = false;
 		isPopupVisiblethi.value = false;
-		// setTimeout(() => {
-		// 	widthComsec.value = 1900;
-		// 	heightComsec.value = 1080;
-		// 	topComsec.value = 320;
-		// 	leftComsec.value = 233;
-		// 	isPopupVisiblefiropensec.value = true;
-		// }, 10)
 		isPopupVisiblefiropensec.value = true;
 		setTimeout(() => {
-			// widthComthi.value = 1900;
-			// heightComthi.value = 1080;
-			// topComthi.value = 320;
-			// leftComthi.value = 380;
 			isPopupVisiblefiropensec.value = false;
 		}, 500)
 	}
-	// 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 = !isPopupVisiblethi.value;
 		isPopupVisiblefiropenthi.value = true;
 		isPopupVisible.value = false;
 		isPopupVisiblesec.value = false;
 		setTimeout(() => {
-			// widthComthi.value = 1900;
-			// heightComthi.value = 1080;
-			// topComthi.value = 320;
-			// leftComthi.value = 380;
 			isPopupVisiblefiropenthi.value = false;
 		}, 500)
 	}
-	// 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;
+	//点击左上角卡片的右侧菜单
+	const openhuliList = (index : number) => {
+		// console.log("????", index,drawer.value)
+		drawer.value.openDrawer();
+	}
 	// 生命周期钩子
 	onMounted(() => {
 		timerId = updateTime();
@@ -689,2404 +675,192 @@
 </script>
 
 <style lang="less" scoped>
-	.right-container {
-		width: calc(100% - 235rpx);
-		height: 100vh;
-		// opacity: 0;
-		transition: opacity 1s ease;
+	// 主页的css
+	@import './index';
 
-		.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 {
-
-				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: 100%;
-				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;
-				/* 增加背景色确保视觉效果 */
-
-				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;
+	// 抽屉的css
+	.draw-all {
+		width: 100%;
 		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;
+		border-top-left-radius: 80rpx;
 		overflow: hidden;
-	}
 
-	.progress-bar {
-		height: 100%;
+		.draw-title {
+			width: 100%;
+			height: 170rpx;
+			background: linear-gradient(to bottom, #dfecfa, #c9dbee);
+			display: flex;
 
-		/* 这里可以更改进度百分比 */
-		background: linear-gradient(to top, #047ADB, #0EA7DD);
-		border-radius: 15px 0 0 15px;
-		transition: width 0.3s ease;
-	}
+			.draw-title-gun {
+				margin-top: 70rpx;
+				margin-left: 40rpx;
+				margin-right: 20rpx;
+				width: 13rpx;
+				height: 50rpx;
+				background: linear-gradient(to bottom, #04BCED, #0160CE);
+				border-radius: 10rpx;
+			}
 
-	.under-father {
-		position: fixed;
-		bottom: 0;
-		width: 100%;
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: 150rpx;
+			.draw-title-font {
+				margin-top: 68rpx;
+				font-size: 40rpx;
+				font-weight: 700;
+			}
+		}
 
-		// background-color: red;
-		.under-father-view {
-			margin-left: 10rpx;
-			margin-right: 150rpx;
+		.draw-contain {
+			width: 100%;
+			height: calc(100vh - 170rpx);
+			background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
+			background-blend-mode: screen;
+
+			.draw-contain-jindu {
+				width: 100%;
+				height: 250rpx;
+				// background-color: red;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+
+		}
+
+		.container {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 1000rpx;
+			height: 200rpx;
+			margin: 0 auto;
 			position: relative;
+
+		}
+
+		.outer-circle-target {
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 50%;
+			background: rgba(2, 136, 217, 0.2);
 			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;
-
-			}
+			justify-content: center;
+			position: relative;
+			z-index: 2;
 		}
 
-	}
-
-	.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 {
+		.outer-circle {
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 50%;
+			// background: rgba(2, 136, 217, 0.2);
 			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;
+			justify-content: center;
+			position: relative;
+			z-index: 2;
 		}
 
-		.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;
+		.inner-circle-target {
+			width: 95rpx;
+			height: 95rpx;
+			border-radius: 50%;
+			background: #0288D9;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
+			position: absolute;
+			z-index: 3;
 		}
 
-		.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;
+		.inner-circle {
+			width: 95rpx;
+			height: 95rpx;
+			border-radius: 50%;
+			background: #dfecfa;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
+			position: absolute;
+			z-index: 3;
 		}
 
-	}
-	.down-icons {
-		margin-top: 10rpx;
-		width: 100%;
-		height: 60rpx;
-		background-color: rgb(255, 216, 126);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		.icon {
-			margin: 0 5rpx;
-			font-size: 20rpx;
-			padding: 5rpx 10rpx;
-			background-color: rgb(255, 138, 0);
+		.inner-circle-target span {
 			color: #fff;
+			font-size: 26rpx;
+			font-family: Arial, sans-serif;
+			z-index: 4;
+		}
+
+		.inner-circle span {
+			// color: #fff;
+			font-size: 26rpx;
+			font-family: Arial, sans-serif;
+			z-index: 4;
+		}
+
+		.line {
+			width: calc(100% - 120rpx);
+			height: 15rpx;
+			background: linear-gradient(to right, #0288D1, #0288D1);
+			position: absolute;
+			top: 50%;
+			left: 60rpx;
+			z-index: 1;
 			border-radius: 5rpx;
+			box-shadow:
+				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8),
+				/* 内部高光 */
+				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.4),
+				/* 内部阴影 */
+				0 0 8rpx rgba(2, 136, 209, 0.8);
+			/* 外部发光 */
+			filter: brightness(1.2);
+			z-index: 1;
+			transition: width 0.5s ease; /* 设置宽度变化的过渡效果 */
 		}
-	}
 
-	.right-container-big {
-		transform: scale(1.5);
-		/* 初始状态 */
-		transition: transform 0.5s ease;
-		/* 平滑过渡 */
-		transform-origin: left top;
-		background-color: rgba(220, 230, 254, 1);
-		// background-color: #fff;
-		// z-index: 999;
-	}
+		.line-gray {
+			width: calc(100% - 120rpx);
+			height: 15rpx;
+			background: #c9dbee;
+			position: absolute;
+			top: 50%;
+			left: 60rpx;
+			z-index: 0;
+			border-radius: 5rpx;
+			/* 外部发光 */
+			filter: brightness(1.2);
+		}
 
-	.right-container-small {
-		transform: scale(1);
-		/* 初始状态 */
-		transition: transform 0.5s ease;
-		/* 平滑过渡 */
-		transform-origin: left top;
-		background-color: rgba(220, 230, 254, 1);
-		z-index: 998;
-	}
+		.container-father {
+			width: 100%;
+			height: 200rpx;
+			background-color: rgba(187, 203, 236, 0.6);
 
-	.right-container-right-big {
-		transform: scale(1.5);
-		margin-left: 2%;
-		width: 41%;
-		/* 初始状态 */
-		transition: transform 0.5s ease;
-		/* 平滑过渡 */
-		transform-origin: right bottom;
-		background-color: rgba(220, 230, 254, 1);
-		// background-color: #fff;
-		// z-index: 999;
-		border-radius: 50rpx;
-	}
+			.draw-contain-white-sha {
+				width: 100%;
+				height: 1rpx;
+				background-color: #fff;
+				box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
+			}
+		}
+
+		.draw-contain-gray {
+			width: 100%;
+			height: 3rpx;
+			background-color: #d0e0ef;
+		}
+
+		.draw-contain-white {
+			width: 100%;
+			height: 1rpx;
+			background-color: #fff;
+		}
 
-	.right-container-right-small {
-		transform: scale(1);
-		margin-left: 2%;
-		width: 41%;
-		/* 初始状态 */
-		transition: transform 0.5s ease;
-		/* 平滑过渡 */
-		transform-origin: right bottom;
-		background-color: rgba(220, 230, 254, 1);
-		// z-index: 998;
-		border-radius: 50rpx;
-	}
-	.right-container-left-big {
-		transform: scale(1.5);
-		// margin-left: 2%;
-		width: 55%;
-		/* 初始状态 */
-		transition: transform 0.5s ease;
-		/* 平滑过渡 */
-		transform-origin: left bottom;
-		background-color: rgba(183, 200, 243, 1);
-		// background-color: #fff;
-		// z-index: 999;
-		border-radius: 50rpx;
-	}
-	
-	.right-container-left-small {
-		transform: scale(1);
-		width: 55%;
-		/* 初始状态 */
-		transition: transform 0.5s ease;
-		/* 平滑过渡 */
-		transform-origin: left bottom;
-		background-color: rgba(183, 200, 243, 1);
-		// z-index: 998;
-		border-radius: 50rpx;
 	}
 </style>
\ No newline at end of file
diff --git a/component/rightItemssecond/api.js b/component/rightItemssecond/api.js
new file mode 100644
index 0000000..7d3e5c4
--- /dev/null
+++ b/component/rightItemssecond/api.js
@@ -0,0 +1,13 @@
+// 引入 request 文件
+import request from '@/utils/request.js'
+
+// 以下 api 为博主项目示例，实际与项目相匹配
+
+// 分页查询学习列表
+export const pageStudyInfo = (params) => {
+    return request({
+        url: '/study/studyInfo/page',
+        method: 'get',
+        data: params
+    })
+}
diff --git a/component/rightItemssecond/index.vue b/component/rightItemssecond/index.vue
index dd13664..f73b6f4 100644
--- a/component/rightItemssecond/index.vue
+++ b/component/rightItemssecond/index.vue
@@ -393,6 +393,7 @@
 	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
 	import { onShow, onHide } from '@dcloudio/uni-app';
 	import type { roomBtttonType } from "./index";
+	import {pageStudyInfo} from "./api.js";
 
 	const props = defineProps({
 		isshow: {
@@ -423,19 +424,6 @@
 			bottomisShaking.value = false
 			shakyTable.value = false
 		})
-	// watch(
-	// 	() => props.liang.index1,
-	// 	() => {
-	// 		if (props.liang.index1 != 999) {
-	// 			saveBoomName.value = timearr.value[0].children[props.liang.index1].serve ? timearr.value[0].children[props.liang.index1].serve : "";
-	// 			reldata.value.find(item => {
-	// 				if (item.dataset.index0 === props.liang.index0 && item.dataset.index1 === props.liang.index1) {
-	// 					saveBoomTop.value = Math.floor(item.top)
-	// 				}
-	// 			})
-	// 		}
-	// 	}
-	// )
 	onMounted(() => {
 		downList.value = bigArray[0].data
 	})
@@ -2628,9 +2616,9 @@
 			width: 800rpx;
 			height: 500rpx;
 			background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.7);
+			background-blend-mode: screen;
 			border: 2rpx solid #fff;
 			/* 使用 screen 混合模式，让图像与白色混合变淡 */
-			background-blend-mode: screen;
 			border-radius: 30rpx;
 			box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
 			transition: opacity 0.4s ease;
diff --git a/manifest.json b/manifest.json
index 3fd2e27..2f9aa56 100644
--- a/manifest.json
+++ b/manifest.json
@@ -22,7 +22,9 @@
             "delay" : 0
         },
         /* 模块配置 */
-        "modules" : {},
+        "modules" : {
+            "Share" : {}
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -51,7 +53,14 @@
                 "dSYMs" : false
             },
             /* SDK配置 */
-            "sdkConfigs" : {}
+            "sdkConfigs" : {
+                "share" : {
+                    "weixin" : {
+                        "appid" : "",
+                        "UniversalLinks" : ""
+                    }
+                }
+            }
         }
     },
     /* 快应用特有相关 */
diff --git a/pages/index/index.css b/pages/index/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b35199e..73fbdce 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -73,7 +73,7 @@
 	]);
 
 	// 当前选中的菜单索引
-	const menuIndex = ref<number>(1);
+	const menuIndex = ref<number>(0);
 	const menuIndexshow = ref<boolean>(false);
 	const menuIndexshowsecond = ref<boolean>(false);
 	// 暗黑模式
@@ -144,7 +144,6 @@
 			const { index0, index1 } = clickedItem.dataset;
 			indexNumber.value.index0 = index0
 			indexNumber.value.index1 = index1
-			// console.log("????",indexNumber.value.index0 ,indexNumber.value.index1)
 			if (clientX.value > 2050 && canTrigger.value) {
 				ruler.value?.nextItems();
 				canTrigger.value = false;
diff --git a/unpackage/dist/dev/app-plus/app-service.js b/unpackage/dist/dev/app-plus/app-service.js
index 2172dfc..3c20055 100644
--- a/unpackage/dist/dev/app-plus/app-service.js
+++ b/unpackage/dist/dev/app-plus/app-service.js
@@ -47,6 +47,58 @@ if (uni.restoreGlobal) {
   const onShow = /* @__PURE__ */ createHook(ON_SHOW);
   const onHide = /* @__PURE__ */ createHook(ON_HIDE);
   const onLoad = /* @__PURE__ */ createHook(ON_LOAD);
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const _sfc_main$6 = {
+    __name: "Drawer",
+    setup(__props, { expose: __expose }) {
+      const isVisible = vue.ref(false);
+      const openDrawer = () => {
+        isVisible.value = true;
+      };
+      const closeDrawer = () => {
+        isVisible.value = false;
+      };
+      __expose({
+        openDrawer,
+        closeDrawer
+      });
+      const __returned__ = { isVisible, openDrawer, closeDrawer, ref: vue.ref };
+      Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+      return __returned__;
+    }
+  };
+  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("view", null, [
+      vue.createCommentVNode(" 遮罩层 "),
+      $setup.isVisible ? (vue.openBlock(), vue.createElementBlock("view", {
+        key: 0,
+        class: "overlay",
+        onClick: $setup.closeDrawer
+      })) : vue.createCommentVNode("v-if", true),
+      vue.createCommentVNode(" 抽屉 "),
+      vue.createElementVNode(
+        "view",
+        {
+          class: vue.normalizeClass(["drawer", { "drawer-open": $setup.isVisible }])
+        },
+        [
+          vue.createElementVNode("view", { class: "drawer-content" }, [
+            vue.createCommentVNode(" 抽屉内容 "),
+            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ])
+        ],
+        2
+        /* CLASS */
+      )
+    ]);
+  }
+  const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5], ["__scopeId", "data-v-40fcca19"], ["__file", "D:/hldy_app/component/public/Drawer.vue"]]);
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     __name: "index",
     props: {
@@ -62,24 +114,31 @@ if (uni.restoreGlobal) {
     emits: ["darkchange"],
     setup(__props, { expose: __expose, emit: __emit }) {
       __expose();
+      const drawer = vue.ref(null);
+      const circles = [
+        { label: "指令" },
+        { label: "转单" },
+        { label: "完成" }
+      ];
+      const lineWidth = vue.computed(() => {
+        switch (circlesNumber.value) {
+          case 0:
+            return "0";
+          case 1:
+            return "calc(100% - 600rpx)";
+          case 2:
+            return "calc(100% - 120rpx)";
+          default:
+            return "100%";
+        }
+      });
+      const circlesNumber = vue.ref(0);
       const props = __props;
       const isPopupVisible = vue.ref(false);
-      const widthCom = vue.ref(1320);
-      const heightCom = vue.ref(540);
-      const topCom = vue.ref(145);
-      const leftCom = vue.ref(233);
       const isPopupVisiblefiropen = vue.ref(false);
       const isPopupVisiblesec = vue.ref(false);
-      const widthComsec = vue.ref(1150);
-      const heightComsec = vue.ref(630);
-      const topComsec = vue.ref(630);
-      const leftComsec = vue.ref(233);
       const isPopupVisiblefiropensec = vue.ref(false);
       const isPopupVisiblethi = vue.ref(false);
-      const widthComthi = vue.ref(880);
-      const heightComthi = vue.ref(630);
-      const topComthi = vue.ref(730);
-      const leftComthi = vue.ref(1420);
       const isPopupVisiblefiropenthi = vue.ref(false);
       const currentTime = vue.ref("");
       const fullDate = vue.ref("");
@@ -200,8 +259,6 @@ if (uni.restoreGlobal) {
           isPopupVisiblefiropen.value = false;
         }, 500);
       };
-      const closePopup = () => {
-      };
       const showPopupsec = () => {
         isPopupVisiblesec.value = !isPopupVisiblesec.value;
         isPopupVisible.value = false;
@@ -221,6 +278,9 @@ if (uni.restoreGlobal) {
         }, 500);
       };
       let timerId = null;
+      const openhuliList = (index) => {
+        drawer.value.openDrawer();
+      };
       vue.onMounted(() => {
         timerId = updateTime();
         setInterval(updateTime, 1e3);
@@ -228,24 +288,17 @@ if (uni.restoreGlobal) {
       vue.onBeforeUnmount(() => {
         clearInterval(timerId);
       });
-      const __returned__ = { props, isPopupVisible, widthCom, heightCom, topCom, leftCom, isPopupVisiblefiropen, isPopupVisiblesec, widthComsec, heightComsec, topComsec, leftComsec, isPopupVisiblefiropensec, isPopupVisiblethi, widthComthi, heightComthi, topComthi, leftComthi, isPopupVisiblefiropenthi, currentTime, fullDate, weekDay, undericonList, huliList, huliListDark, mediumList, mediumListdark, roomBtttonList, roomBtttonListdark, menuIndex, undermenuIndex, underFans, roomTar, firstcurrentIndex, firstcurrentIndexup, secondcurrentIndexup, secondcurrentIndex, thirdcurrentIndex, emit, darkFanschange, changeMenu, changeMenuUnder, saveItem, updateTime, onSwiperChange, onSwiperChangesec, jumpTonew, showPopup, closePopup, showPopupsec, showPopupthi, get timerId() {
+      const __returned__ = { drawer, circles, lineWidth, circlesNumber, props, isPopupVisible, isPopupVisiblefiropen, isPopupVisiblesec, isPopupVisiblefiropensec, isPopupVisiblethi, isPopupVisiblefiropenthi, currentTime, fullDate, weekDay, undericonList, huliList, huliListDark, mediumList, mediumListdark, roomBtttonList, roomBtttonListdark, menuIndex, undermenuIndex, underFans, roomTar, firstcurrentIndex, firstcurrentIndexup, secondcurrentIndexup, secondcurrentIndex, thirdcurrentIndex, emit, darkFanschange, changeMenu, changeMenuUnder, saveItem, updateTime, onSwiperChange, onSwiperChangesec, jumpTonew, showPopup, showPopupsec, showPopupthi, get timerId() {
         return timerId;
       }, set timerId(v) {
         timerId = v;
-      } };
+      }, openhuliList, Drawer };
       Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
       return __returned__;
     }
   });
   const _imports_0$2 = "/static/index/customer.png";
   const _imports_1$1 = "/static/index/undericons/upguang.png";
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
       "view",
@@ -569,7 +622,8 @@ if (uni.restoreGlobal) {
                           vue.renderList($setup.huliList, (item, index) => {
                             return vue.openBlock(), vue.createElementBlock("view", {
                               key: index,
-                              class: "right-huli-view-dis"
+                              class: "right-huli-view-dis",
+                              onClick: ($event) => $setup.openhuliList(index)
                             }, [
                               vue.createElementVNode("image", {
                                 class: "right-huli-img",
@@ -582,7 +636,7 @@ if (uni.restoreGlobal) {
                                 1
                                 /* TEXT */
                               )
-                            ]);
+                            ], 8, ["onClick"]);
                           }),
                           128
                           /* KEYED_FRAGMENT */
@@ -1355,7 +1409,76 @@ if (uni.restoreGlobal) {
               /* KEYED_FRAGMENT */
             ))
           ])
-        ])
+        ]),
+        vue.createVNode(
+          $setup["Drawer"],
+          { ref: "drawer" },
+          {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("view", { class: "draw-all" }, [
+                vue.createElementVNode("view", { class: "draw-title" }, [
+                  vue.createElementVNode("view", { class: "draw-title-gun" }),
+                  vue.createElementVNode("view", { class: "draw-title-font" }, "转单执行")
+                ]),
+                vue.createElementVNode("view", { class: "draw-contain" }, [
+                  vue.createElementVNode("view", { class: "container-father" }, [
+                    vue.createElementVNode("view", { class: "draw-contain-white-sha" }),
+                    vue.createElementVNode("view", { class: "container" }, [
+                      vue.createElementVNode(
+                        "div",
+                        {
+                          class: "line",
+                          style: vue.normalizeStyle({ width: $setup.lineWidth })
+                        },
+                        null,
+                        4
+                        /* STYLE */
+                      ),
+                      vue.createElementVNode("div", { class: "line-gray" }),
+                      (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList($setup.circles, (item, index) => {
+                          return vue.createElementVNode("div", {
+                            key: index,
+                            class: vue.normalizeClass($setup.circlesNumber >= index ? `outer-circle-target` : `outer-circle`),
+                            onClick: ($event) => $setup.circlesNumber = index
+                          }, [
+                            vue.createElementVNode(
+                              "div",
+                              {
+                                class: vue.normalizeClass($setup.circlesNumber >= index ? `inner-circle-target` : `inner-circle`)
+                              },
+                              [
+                                vue.createElementVNode(
+                                  "span",
+                                  null,
+                                  vue.toDisplayString(item.label),
+                                  1
+                                  /* TEXT */
+                                )
+                              ],
+                              2
+                              /* CLASS */
+                            )
+                          ], 10, ["onClick"]);
+                        }),
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
+                    ]),
+                    vue.createElementVNode("view", { class: "draw-contain-gray" }),
+                    vue.createElementVNode("view", { class: "draw-contain-white" })
+                  ])
+                ])
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          },
+          512
+          /* NEED_PATCH */
+        )
       ],
       4
       /* STYLE */
@@ -3788,7 +3911,7 @@ if (uni.restoreGlobal) {
         { url: "/static/index/lefticon/wifi.png", targetUrl: "/static/index/lefticontarget/bluewifi.png" },
         { url: "/static/index/lefticon/back.png", targetUrl: "/static/index/lefticontarget/blueback.png" }
       ]);
-      const menuIndex = vue.ref(1);
+      const menuIndex = vue.ref(0);
       const menuIndexshow = vue.ref(false);
       const menuIndexshowsecond = vue.ref(false);
       const darkFans = vue.ref(false);
@@ -3871,7 +3994,7 @@ if (uni.restoreGlobal) {
       };
       const changefangkuang = (fangkuang) => {
         fangkuaiValue.value = fangkuang;
-        formatAppLog("log", "at pages/index/index.vue:172", "!!!!", fangkuaiValue.value);
+        formatAppLog("log", "at pages/index/index.vue:171", "!!!!", fangkuaiValue.value);
       };
       const saveruler = vue.ref({});
       const openruler = (res, fangkuai) => {
diff --git a/unpackage/dist/dev/app-plus/manifest.json b/unpackage/dist/dev/app-plus/manifest.json
index 050eed7..cdb4ad3 100644
--- a/unpackage/dist/dev/app-plus/manifest.json
+++ b/unpackage/dist/dev/app-plus/manifest.json
@@ -17,6 +17,7 @@
     "url": ""
   },
   "permissions": {
+    "Share": {},
     "UniNView": {
       "description": "UniNView原生渲染"
     }
@@ -70,6 +71,12 @@
         "dSYMs": false
       },
       "plugins": {
+        "share": {
+          "weixin": {
+            "appid": "",
+            "UniversalLinks": ""
+          }
+        },
         "audio": {
           "mp3": {
             "description": "Android平台录音支持MP3格式文件"
diff --git a/unpackage/dist/dev/app-plus/pages/index/index.css b/unpackage/dist/dev/app-plus/pages/index/index.css
index 381f126..77a7a38 100644
--- a/unpackage/dist/dev/app-plus/pages/index/index.css
+++ b/unpackage/dist/dev/app-plus/pages/index/index.css
@@ -1,3 +1,45 @@
+
+	/* 遮罩层样式 */
+.overlay[data-v-40fcca19] {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+		/* 确保遮罩层在抽屉下方 */
+}
+
+	/* 抽屉样式 */
+.drawer[data-v-40fcca19] {
+		position: fixed;
+		top: 0;
+		right: -80%;
+		width: 80%;
+		height: 100vh;
+		background: #fff;
+		z-index: 1000;
+		/* 确保抽屉在遮罩层上方 */
+		transition: right 0.5s ease;
+		border-top-left-radius: 2.5rem;
+		/* 设置左上角的圆角半径 */
+		border-bottom-left-radius: 2.5rem;
+		/* overflow: hidden; */
+		/* 设置左下角的圆角半径 */
+}
+
+	/* 抽屉打开时的样式 */
+.drawer-open[data-v-40fcca19] {
+		right: 0;
+}
+
+	/* 抽屉内容样式 */
+.drawer-content[data-v-40fcca19] {
+		/* padding: 20px; */
+		/* overflow: hidden; */
+}
+
 .right-container[data-v-9f74ebdb] {
   width: calc(100% - 7.34375rem);
   height: 100vh;
@@ -1612,9 +1654,6 @@
   height: 4.6875rem;
   /* 高度占满父容器 */
   background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #92a7c5 50%, rgba(0, 0, 0, 0) 100%);
-  /* 上面到下面的渐变效果：
-	     - 从透明到黑色，再从黑色到透明
-	     - 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
 }
 .split-line-white-sec[data-v-9f74ebdb] {
   width: 0.0625rem;
@@ -1876,39 +1915,6 @@
   overflow: hidden;
   transition: all 0.4s ease-in-out;
 }
-.time-tra-thi-photo-change[data-v-9f74ebdb] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 15.9375rem;
-  margin-left: 6.25rem;
-  flex-direction: column;
-  transition: all 0.4s ease-in-out;
-}
-.time-tra-thi-photo-change .time-tra-thi-photo-img[data-v-9f74ebdb] {
-  width: 15.625rem;
-  height: 15.625rem;
-  margin-top: -3.125rem;
-  margin-left: -1.5625rem;
-  transition: all 0.4s ease-in-out;
-}
-.time-tra-thi-photo-change .time-tra-thi-photo-font[data-v-9f74ebdb] {
-  font-size: 1.25rem;
-  margin-right: 1.5625rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  transition: all 0.4s ease-in-out;
-}
-.time-tra-thi-photo-change .time-tra-thi-photo-font-dark[data-v-9f74ebdb] {
-  color: #CDD6EA;
-  font-size: 1.25rem;
-  margin-right: 1.5625rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  transition: all 0.4s ease-in-out;
-}
 .down-icons[data-v-9f74ebdb] {
   margin-top: 0.3125rem;
   width: 100%;
@@ -1985,6 +1991,160 @@
   background-color: #b7c8f3;
   border-radius: 1.5625rem;
 }
+.draw-all[data-v-9f74ebdb] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 2.5rem;
+  overflow: hidden;
+}
+.draw-all .draw-title[data-v-9f74ebdb] {
+  width: 100%;
+  height: 5.3125rem;
+  background: linear-gradient(to bottom, #dfecfa, #c9dbee);
+  display: flex;
+}
+.draw-all .draw-title .draw-title-gun[data-v-9f74ebdb] {
+  margin-top: 2.1875rem;
+  margin-left: 1.25rem;
+  margin-right: 0.625rem;
+  width: 0.40625rem;
+  height: 1.5625rem;
+  background: linear-gradient(to bottom, #04BCED, #0160CE);
+  border-radius: 0.3125rem;
+}
+.draw-all .draw-title .draw-title-font[data-v-9f74ebdb] {
+  margin-top: 2.125rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+.draw-all .draw-contain[data-v-9f74ebdb] {
+  width: 100%;
+  height: calc(100vh - 5.3125rem);
+  background: url("../../static/index/lightbgcnew.png") center / cover, rgba(255, 255, 255, 0.5);
+  background-blend-mode: screen;
+}
+.draw-all .draw-contain .draw-contain-jindu[data-v-9f74ebdb] {
+  width: 100%;
+  height: 7.8125rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.draw-all .container[data-v-9f74ebdb] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 31.25rem;
+  height: 6.25rem;
+  margin: 0 auto;
+  position: relative;
+}
+.draw-all .outer-circle-target[data-v-9f74ebdb] {
+  width: 3.75rem;
+  height: 3.75rem;
+  border-radius: 50%;
+  background: rgba(2, 136, 217, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+}
+.draw-all .outer-circle[data-v-9f74ebdb] {
+  width: 3.75rem;
+  height: 3.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+}
+.draw-all .inner-circle-target[data-v-9f74ebdb] {
+  width: 2.96875rem;
+  height: 2.96875rem;
+  border-radius: 50%;
+  background: #0288D9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.2);
+  position: absolute;
+  z-index: 3;
+}
+.draw-all .inner-circle[data-v-9f74ebdb] {
+  width: 2.96875rem;
+  height: 2.96875rem;
+  border-radius: 50%;
+  background: #dfecfa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.2);
+  position: absolute;
+  z-index: 3;
+}
+.draw-all .inner-circle-target span[data-v-9f74ebdb] {
+  color: #fff;
+  font-size: 0.8125rem;
+  font-family: Arial, sans-serif;
+  z-index: 4;
+}
+.draw-all .inner-circle span[data-v-9f74ebdb] {
+  font-size: 0.8125rem;
+  font-family: Arial, sans-serif;
+  z-index: 4;
+}
+.draw-all .line[data-v-9f74ebdb] {
+  width: calc(100% - 3.75rem);
+  height: 0.46875rem;
+  background: linear-gradient(to right, #0288D1, #0288D1);
+  position: absolute;
+  top: 50%;
+  left: 1.875rem;
+  border-radius: 0.15625rem;
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.8),  inset 0 -0.0625rem 0.125rem rgba(0, 0, 0, 0.4),  0 0 0.25rem rgba(2, 136, 209, 0.8);
+  /* 外部发光 */
+  filter: brightness(1.2);
+  z-index: 1;
+  transition: width 0.5s ease;
+  /* 设置宽度变化的过渡效果 */
+}
+.draw-all .line-gray[data-v-9f74ebdb] {
+  width: calc(100% - 3.75rem);
+  height: 0.46875rem;
+  background: #c9dbee;
+  position: absolute;
+  top: 50%;
+  left: 1.875rem;
+  z-index: 0;
+  border-radius: 0.15625rem;
+  /* 外部发光 */
+  filter: brightness(1.2);
+}
+.draw-all .container-father[data-v-9f74ebdb] {
+  width: 100%;
+  height: 6.25rem;
+  background-color: rgba(187, 203, 236, 0.6);
+}
+.draw-all .container-father .draw-contain-white-sha[data-v-9f74ebdb] {
+  width: 100%;
+  height: 0.03125rem;
+  background-color: #fff;
+  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.2);
+}
+.draw-all .draw-contain-gray[data-v-9f74ebdb] {
+  width: 100%;
+  height: 0.09375rem;
+  background-color: #d0e0ef;
+}
+.draw-all .draw-contain-white[data-v-9f74ebdb] {
+  width: 100%;
+  height: 0.03125rem;
+  background-color: #fff;
+}
 
 .super-card[data-v-337bb5da] {
   display: flex;
@@ -2530,9 +2690,9 @@
   width: 25rem;
   height: 15.625rem;
   background: url("../../static/index/lightbgcnew.png") center / cover, rgba(255, 255, 255, 0.7);
+  background-blend-mode: screen;
   border: 0.0625rem solid #fff;
   /* 使用 screen 混合模式，让图像与白色混合变淡 */
-  background-blend-mode: screen;
   border-radius: 0.9375rem;
   box-shadow: 0.3125rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.1);
   transition: opacity 0.4s ease;
diff --git a/utils/request.js b/utils/request.js
new file mode 100644
index 0000000..55ef1c2
--- /dev/null
+++ b/utils/request.js
@@ -0,0 +1,88 @@
+// 全局请求封装
+const base_url = 'http://localhost:996'
+// 需要修改token，和根据实际修改请求头
+export default (params) => {
+	let url = params.url;
+	let method = params.method || "get";
+	let data = params.data || {};
+	let header = {}
+	if (method == "post") {
+		header = {
+			'Content-Type': 'application/json'
+		};
+	}
+	// 获取本地token
+	if (uni.getStorageSync("token")) {
+		header['Authorization'] = 'Bearer ' + uni.getStorageSync("token");
+	}
+
+	return new Promise((resolve, reject) => {
+		uni.request({
+			url: base_url + url,
+			method: method,
+			header: header,
+			data: data,
+			success(response) {
+				const res = response
+				// 根据返回的状态码做出对应的操作
+				//获取成功
+				// console.log(res.statusCode);
+				if (res.statusCode == 200) {
+					resolve(res.data);
+				} else {
+					uni.clearStorageSync()
+					switch (res.statusCode) {
+						case 401:
+							uni.showModal({
+								title: "提示",
+								content: "请登录",
+								showCancel: false,
+								success(res) {
+									setTimeout(() => {
+										uni.navigateTo({
+											url: "/pages/login/index",
+										})
+									}, 1000);
+								},
+							});
+							break;
+						case 404:
+							uni.showToast({
+								title: '请求地址不存在...',
+								duration: 2000,
+							})
+							break;
+						default:
+							uni.showToast({
+								title: '请重试...',
+								duration: 2000,
+							})
+							break;
+					}
+				}
+			},
+			fail(err) {
+				console.log(err)
+				if (err.errMsg.indexOf('request:fail') !== -1) {
+					wx.showToast({
+						title: '网络异常',
+						icon: "error",
+						duration: 2000
+					})
+				} else {
+					wx.showToast({
+						title: '未知异常',
+						duration: 2000
+					})
+				}
+				reject(err);
+
+			},
+			complete() {
+				// 不管成功还是失败都会执行
+				uni.hideLoading();
+				uni.hideToast();
+			}
+		});
+	}).catch((e) => {});
+};
\ No newline at end of file