2025.2.20 第二版

pages.json

@@ -8,21 +8,16 @@
 				"orientation": "landscape" // 设置为横屏
 			}
 
+		},
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationStyle": "custom",
+				"orientation": "landscape" // 设置为横屏
+			}
+		
 		}
-		// {
-		// 	"path": "pages/index/indexDark",
-		// 	"style": {
-		// 		"navigationStyle": "custom",
-		// 		"orientation": "landscape" // 设置为横屏
-		// 	}
 	
-		// }
-		// {
-		// 	"path": "pages/login/login",
-		// 	"style": {
-		// 		"navigationBarTitleText": "注册页"
-		// 	}
-		// }
 
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`">
 		<view class="left-container">
-			<view class="left-head">
+			<view class="left-head" @click="gotoLogin">
 				<image class="left-head-img" src="/static/index/oldman.png" />
 				<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
 					王金凤
@@ -42,21 +42,40 @@
 				<view class="right-container-fir-left">
 					<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
 						<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
-						<font class="right-container-fir-left-card-hulilei-font">护理类</font>
+						<div class="right-container-fir-left-card-hulilei-font">护理类</div>
+						<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
+						<view class="right-container-fir-left-carousel">
+							<view class="carousel">
+								<view class="dots">
+									<span v-for="(item, index) in [1, 2, 3]" :key="index"
+										:class="darkFans?`dot-dark`:`dot`"
+										:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
+								</view>
 
+							</view>
+						</view>
 						<view class="right-container-fir-left-card-main">
-							<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`"
+							<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular
+								:indicator-dots="false" :vertical="true" :interval="4000" :duration="500"
+								@change="onSwiperChange">
+								<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
+									<view class="right-container-fir-left-card-flex">
+										<image class="right-container-fir-left-card-main-left"
+											:src="`/static/index/arrow2.png`"
 											@click="firstcurrentIndex===0?firstcurrentIndex=2:firstcurrentIndex=firstcurrentIndex-1" />
 
 										<view class="uni-margin-wrap">
-								<swiper :current="firstcurrentIndex" class="swiper" circular :indicator-dots="false"
+
-									:autoplay="true" :interval="4000" :duration="500">
+											<swiper :current="firstcurrentIndex" class="swiper" circular
-									<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
+												:indicator-dots="false" :interval="4000" :duration="500">
+												<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
+													:key="index">
 													<view class="right-container-fir-left-card-card">
 														<view class="right-container-fir-left-card-zhixing">
 															<image class="right-container-fir-left-card-zhixing-img"
 																:src="`/static/index/daizhixing.png`" />
-												<font class="right-container-fir-left-card-zhixing-font">待执行</font>
+															<div class="right-container-fir-left-card-zhixing-font">待执行
+															</div>
 														</view>
 														<image class="right-container-fir-left-card-img"
 															:src="`/static/index/teeth.png`" />
@@ -96,36 +115,61 @@
 															<view class="time-button-start">
 																开始服务
 															</view>
-												<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
+															<view
+																:class="darkFans?`time-button-end-dark`:`time-button-end`">
 																服务结束
 															</view>
 														</view>
 													</view>
 
-
 												</swiper-item>
 											</swiper>
+
 										</view>
-							<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`"
+										<image class="right-container-fir-left-card-main-right"
+											:src="`/static/index/arrow.png`"
 											@click="firstcurrentIndex===2?firstcurrentIndex=0:firstcurrentIndex=firstcurrentIndex+1" />
-							<view class="split-line-white"></view>
+										<view class="split-line-white">
+											<image v-if="darkFans" class="split-line-white-img"
+												:src="`/static/index/cardbgc/leftlight.png`" />
+										</view>
+									</view>
+								</swiper-item>
+							</swiper>
 							<view class="right-huli">
 								<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
-								<view class="right-huli-view" v-if="!darkFans">
+								<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true"
+									class="right-huli-view">
+									<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis">
+										<image class="right-huli-img" :src="item.url" />
+										<text class="right-huli-text">{{item.name}}</text>
+									</view>
+								</scroll-view>
+								<!-- 暗黑模式 -->
+								<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true"
+									class="right-huli-view">
+									<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
+										<image class="right-huli-img" :src="item.url" />
+										<text class="right-huli-text-dark">{{item.name}}</text>
+									</view>
+								</scroll-view>
+
+								<!-- <view class="right-huli-view" v-if="!darkFans">
 									<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis">
 										<image class="right-huli-img" :src="item.url" />
 										<text class="right-huli-text">{{item.name}}</text>
 									</view>
 								</view>
-								<!-- 暗黑模式 -->
+								
 								<view class="right-huli-view" v-if="darkFans">
 									<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
 										<image class="right-huli-img" :src="item.url" />
 										<text class="right-huli-text-dark">{{item.name}}</text>
 									</view>
-								</view>
+								</view> -->
 								<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
 							</view>
+
 						</view>
 
 
@@ -186,13 +230,28 @@
 
 				<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
 					<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
-					<font class="right-container-left-font">医疗类</font>
+					<div class="right-container-left-font">医疗类</div>
+					<view class="right-container-fir-left-carousel">
+						<view class="carousel">
+							<view class="dots">
+								<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
+									:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
+							</view>
+
+						</view>
+					</view>
+					<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
+					<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular :indicator-dots="false"
+						:vertical="true" :interval="4000" :duration="500" @change="onSwiperChange">
+						<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
+							<div class="right-container-fir-left-card-flex">
 								<image class="right-container-fir-left-card-main-left" :src="`/static/index/arrow2.png`"
 									@click="secondcurrentIndex===0?secondcurrentIndex=2:secondcurrentIndex=secondcurrentIndex-1" />
 								<view class="uni-margin-wrap">
-						<swiper :current="secondcurrentIndex" class="swiper" circular :indicator-dots="false"
+									<swiper :current="secondcurrentIndex" class="swiper" circular
-							:autoplay="true" :interval="4000" :duration="500">
+										:indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
-							<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
+										<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
+											:key="index">
 											<view class="time-tra">
 
 												<view :class="darkFans?`time-font-dark`:`time-font`">
@@ -200,7 +259,8 @@
 												</view>
 												<view :class="darkFans?`time-text-dark`:`time-text`">
 													<text>静脉注射</text>
-										<image class="time-text-img" :src="`/static/index/yiliao/project4.png`" />
+													<image class="time-text-img"
+														:src="`/static/index/yiliao/project4.png`" />
 												</view>
 												<view class="time-people">
 													<image class="time-people-img"
@@ -249,21 +309,33 @@
 
 								<image class="right-container-fir-left-card-main-right" :src="`/static/index/arrow.png`"
 									@click="secondcurrentIndex===2?secondcurrentIndex=0:secondcurrentIndex=secondcurrentIndex+1" />
-					<view class="split-line-white"></view>
+							</div>
+						</swiper-item>
+					</swiper>
+					<view class="split-line-white">
+						<image v-if="darkFans" class="split-line-white-img"
+							:src="`/static/index/cardbgc/leftlight.png`" />
+					</view>
 					<view class="right-huli">
 						<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
-						<view class="right-huli-view" v-if="!darkFans">
+						<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
 							<view v-for="(item,index) in mediumList" :key="index" class="right-huli-view-dis">
 								<image class="right-huli-img" :src="item.url" />
 								<text class="right-huli-text">{{item.name}}</text>
+								<div class="progress-bar-container" v-show="item.number !== 0">
+									<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
+								</div>
 							</view>
-						</view>
+						</scroll-view>
-						<view class="right-huli-view" v-if="darkFans">
+						<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
 							<view v-for="(item,index) in mediumListdark" :key="index" class="right-huli-view-dis">
 								<image class="right-huli-img" :src="item.url" />
 								<text class="right-huli-text-dark">{{item.name}}</text>
+								<div class="progress-bar-container" v-show="item.number !== 0">
+									<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
+								</div>
 							</view>
-						</view>
+						</scroll-view>
 						<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
 					</view>
 
@@ -284,12 +356,14 @@
 							<swiper :current="thirdcurrentIndex" class="swiper" circular :indicator-dots="false"
 								:autoplay="true" :interval="4000" :duration="500">
 								<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
-									<view class="right-container-right-down-card"
+									<view
-										:style="darkFans ? { backgroundColor: 'rgb(22, 48, 76)',border:`3rpx solid #fff`,boxShadow:'' } : ''">
+										:class="darkFans?`right-container-right-down-card-dark`:`right-container-right-down-card`">
 										<view class="right-container-right-down-card-card">
 											<image class="right-container-right-down-card-card-type"
-												:src="`/static/index/label.png`" />
+												:src="darkFans?`/static/index/darkicon/baojieleidark.png`:`/static/index/label.png`" />
-											<font class="right-container-right-down-card-card-font">保洁类</font>
+											<div
+												:class="darkFans? `right-container-right-down-card-card-font-dark`: `right-container-right-down-card-card-font`">
+												保洁类</div>
 											<image class="right-container-right-down-card-img"
 												:src="`/static/index/project3.png`" />
 											<view class="">
@@ -370,7 +444,12 @@
 		url : string;
 		name : string
 	}
-
+	// 定义 药品类型
+	type medType = {
+		url : string;
+		name : string,
+		number : number
+	}
 	// 初始化第一个卡片列表
 	const huliList = ref<huliListType[]>([
 		{ url: '/static/index/hulilist/zhuandan.png', name: "转单执行" },
@@ -384,18 +463,20 @@
 		{ url: '/static/index/darkicon/zhongdiandark.png', name: "重点" },
 	]);
 	// 初始化第二排第一个卡片列表
-	const mediumList = ref<huliListType[]>([
+	const mediumList = ref<medType[]>([
-		{ url: '/static/index/medium/yaopin.png', name: "药品信息" },
+		{ url: '/static/index/medium/yaopin.png', name: "药品信息", number: 0 },
-		{ url: '/static/index/medium/qingling.png', name: "请领指令" },
+		{ url: '/static/index/medium/qingling.png', name: "请领指令", number: 60 },
-		{ url: '/static/index/medium/peiyao.png', name: "配药指令" },
+		{ url: '/static/index/medium/peiyao.png', name: "配药指令", number: 100 },
-		{ url: '/static/index/medium/xinxi.png', name: "信息反馈" },
+		{ url: '/static/index/medium/xinxi.png', name: "信息反馈", number: 0 },
+		{ url: '/static/index/medium/xinxi.png', name: "信息反馈2", number: 0 },
 	]);
 	// 初始化第二排第一个卡片列表 暗黑模式
-	const mediumListdark = ref<huliListType[]>([
+	const mediumListdark = ref<medType[]>([
-		{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息" },
+		{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息", number: 55 },
-		{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令" },
+		{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令", number: 10 },
-		{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令" },
+		{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令", number: 100 },
-		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈" },
+		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈", number: 15 },
+		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈2", number: 20 },
 	]);
 	// 定义 Link 类型
 	type roomBtttonType = {
@@ -426,6 +507,7 @@
 	const roomTar = ref<number[]>([]);
 	//滑块按钮
 	const firstcurrentIndex = ref<number>(0);
+	const firstcurrentIndexup = ref<number>(0);
 	const secondcurrentIndex = ref<number>(0);
 	const thirdcurrentIndex = ref<number>(0);
 	// 变更菜单
@@ -465,6 +547,16 @@
 		const week = weekDays[now.getDay()];
 		weekDay.value = week;
 	};
+	//给轮播图用的
+	const onSwiperChange = (event : any) => {
+		firstcurrentIndexup.value = event.detail.current;
+	};
+	const gotoLogin = () => {
+		// 跳转到目标页面
+		// uni.navigateTo({
+		//   url: '/pages/login/login'  // 路径要以 / 开头，表示从根目录开始
+		// });
+	}
 	// 生命周期钩子
 	onMounted(() => {
 		updateTime();
@@ -511,6 +603,58 @@
 			height: 900rpx;
 			margin-top: 50rpx;
 			display: flex;
+			position: relative;
+
+			.right-container-fir-left-carousel {
+				position: absolute;
+				right: 280rpx;
+				top: 0rpx;
+
+				.carousel {
+					position: relative;
+					width: 300rpx;
+					/* 轮播图的宽度 */
+					height: 200rpx;
+					/* 轮播图的高度 */
+					// background-color: #f0f0f0;
+
+					/* 背景色（示例） */
+					.dots {
+						position: absolute;
+						top: 50%;
+						right: 10rpx;
+						transform: translateY(-50%);
+						display: flex;
+						flex-direction: column;
+						gap: 10rpx;
+
+						.dot {
+							width: 20rpx;
+							height: 20rpx;
+							border-radius: 50%;
+							background-color: #657494;
+							/* 默认未激活的颜色 */
+							cursor: pointer;
+							transition: background-color 0.3s ease;
+						}
+
+						.dot-dark {
+							width: 20rpx;
+							height: 20rpx;
+							border-radius: 50%;
+							background-color: #fff;
+							/* 默认未激活的颜色 */
+							cursor: pointer;
+							transition: background-color 0.3s ease;
+						}
+
+						.dot.active {
+							background-color: #01A0FE;
+							/* 激活的颜色 */
+						}
+					}
+				}
+			}
 
 			.right-container-right {
 				margin-left: 2%;
@@ -666,6 +810,84 @@
 						width: 100rpx;
 					}
 
+					.right-container-right-down-card-dark {
+						margin-left: 5rpx;
+						margin-right: 5rpx;
+						margin-top: 80rpx;
+						width: 99%;
+						height: 650rpx;
+						border-radius: 80rpx;
+						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: 3rpx solid #fff;
+
+
+						.right-container-right-down-card-line {
+							width: 1px;
+							/* 线条的宽度 */
+							height: 300rpx;
+							/* 高度占满父容器 */
+							background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #808080 50%, rgba(0, 0, 0, 0) 100%);
+							margin-left: -20rpx;
+							margin-right: 30rpx;
+							margin-top: 150rpx;
+						}
+
+						.right-container-right-down-card-card {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							flex-direction: column;
+							width: 450rpx;
+							position: relative;
+
+							.right-container-right-down-card-card-type {
+								position: absolute;
+								top: 0rpx;
+								left: -25rpx;
+								width: 315rpx;
+								height: 104rpx;
+							}
+
+							.right-container-right-down-card-card-font {
+								position: absolute;
+								top: 15rpx;
+								left: 95rpx;
+								font-size: 40rpx;
+								color: #414F6E;
+							}
+
+							.right-container-right-down-card-card-font-dark {
+								position: absolute;
+								top: 15rpx;
+								left: 95rpx;
+								font-size: 40rpx;
+								color: #fff;
+							}
+
+							.right-container-right-down-card-img {
+								width: 400rpx;
+								height: 350rpx;
+							}
+
+							.right-container-right-down-card-font {
+								font-size: 50rpx;
+								margin-top: 30rpx;
+							}
+
+							.right-container-right-down-card-font-dark {
+								font-size: 50rpx;
+								color: #fff;
+								margin-top: 30rpx;
+							}
+						}
+					}
+
 					.right-container-right-down-card {
 						margin-left: 5rpx;
 						margin-right: 5rpx;
@@ -673,14 +895,12 @@
 						width: 99%;
 						height: 650rpx;
 						border-radius: 80rpx;
-						// border: 1rpx solid ;
-						background-color: rgba(200, 216, 238, 0.8);
-						/* 背景颜色 #f4f9ff，透明度 70% */
 						position: relative;
 						display: flex;
-						// justify-content: center;
-						// flex-direction: column;
 						box-shadow: 2rpx 0 0 2rpx;
+						background-color: rgba(255, 255, 255, 0.4);
+						background-image: url('/static/index/cardbgc/newbgc.png');
+						background-position: 50% 60%;
 
 						.right-container-right-down-card-line {
 							width: 1px;
@@ -724,11 +944,13 @@
 
 							.right-container-right-down-card-font {
 								font-size: 50rpx;
+								margin-top: 30rpx;
 							}
 
 							.right-container-right-down-card-font-dark {
 								font-size: 50rpx;
 								color: #fff;
+								margin-top: 30rpx;
 							}
 						}
 					}
@@ -775,12 +997,17 @@
 				height: 900rpx;
 				border-radius: 80rpx;
 				border: 1rpx solid #fff;
-				background-color: rgba(203, 219, 238, 0.8);
+				// background-color: rgba(203, 219, 238, 0.8);
 				/* 背景颜色 #f4f9ff，透明度 70% */
 				position: relative;
 				display: flex;
 				justify-content: center;
 				align-items: center;
+				background-color: rgba(255, 255, 255, 0.5);
+				/* 白色背景透明度为 10% */
+				background-image: url('/static/index/cardbgc/newbgc.png');
+				background-position: 10% 60%;
+				/* 背景图片从左上角25%和30%的位置开始 */
 			}
 
 			.right-container-left-dark {
@@ -821,6 +1048,7 @@
 				margin-right: 5rpx;
 				width: 70rpx;
 				height: 90rpx;
+				z-index: 10;
 			}
 
 			.right-huli {
@@ -833,42 +1061,41 @@
 				align-items: center;
 				flex-direction: column;
 
-				.right-huli-view::-webkit-scrollbar {
+
-					display: none;
-				}
 
 				.right-huli-view {
-					height: 700rpx;
+					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 {
-						// flex-direction: column;
-						margin-top: 30rpx;
-						// margin-bottom: 30rpx;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 						flex-direction: column;
+						width: 100%;
+						height: 250rpx;
 
 						.right-huli-img {
-							width: 120rpx;
+							width: 130rpx;
-							height: 120rpx;
+							height: 130rpx;
 						}
 
 						.right-huli-text {
 							width: 100%;
-							height: 20rpx;
+							height: 25rpx;
 							text-align: center;
+
 						}
 
 						.right-huli-text-dark {
 							width: 100%;
-							height: 20rpx;
+							height: 25rpx;
 							text-align: center;
 							color: #fff;
 						}
@@ -924,16 +1151,18 @@
 				position: absolute;
 				top: 70rpx;
 				left: -15rpx;
-				width: 315rpx;
+				width: 320rpx;
 				height: 104rpx;
+				z-index: 10;
 			}
 
 			.right-container-left-font {
 				position: absolute;
 				top: 80rpx;
-				left: 55rpx;
+				left: 63rpx;
 				font-size: 50rpx;
 				color: #fff;
+				z-index: 10;
 			}
 
 			.time-tra {
@@ -1064,6 +1293,7 @@
 			width: 100%;
 			height: 900rpx;
 			display: flex;
+			overflow: hidden;
 
 			// background-color: red;
 			.right-container-fir-left {
@@ -1074,7 +1304,7 @@
 				position: relative;
 
 				/* 使用背景来模拟边框 */
-				background-image: linear-gradient(45deg, #A496E8, #777CCC, #FAFDFF, #8BC5ED, #B8C5DD, #BBC8DD);
+				// background-image: linear-gradient(45deg, #A496E8, #777CCC, #FAFDFF, #8BC5ED, #B8C5DD, #BBC8DD);
 				background-origin: border-box;
 				/* 背景从边框开始 */
 				background-clip: content-box;
@@ -1087,6 +1317,56 @@
 				/* 内部背景色 */
 				box-sizing: border-box;
 
+				.right-container-fir-left-carousel {
+					position: absolute;
+					right: 380rpx;
+
+					.carousel {
+						position: relative;
+						width: 300rpx;
+						/* 轮播图的宽度 */
+						height: 200rpx;
+						/* 轮播图的高度 */
+						// background-color: #f0f0f0;
+
+						/* 背景色（示例） */
+						.dots {
+							position: absolute;
+							top: 50%;
+							right: 10rpx;
+							transform: translateY(-50%);
+							display: flex;
+							flex-direction: column;
+							gap: 10rpx;
+
+							.dot {
+								width: 20rpx;
+								height: 20rpx;
+								border-radius: 50%;
+								background-color: #657494;
+								/* 默认未激活的颜色 */
+								cursor: pointer;
+								transition: background-color 0.3s ease;
+							}
+
+							.dot-dark {
+								width: 20rpx;
+								height: 20rpx;
+								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;
@@ -1095,7 +1375,12 @@
 					width: 99%;
 					height: 98%;
 					border-radius: 80rpx;
-					background-color: rgb(195, 211, 233);
+					border: 2rpx solid #fff;
+					background-color: rgba(255, 255, 255, 0.1);
+					/* 白色背景透明度为 10% */
+					background-image: url('/static/index/cardbgc/newbgc.png');
+					background-position: 10% 60%;
+					/* 背景图片从左上角25%和30%的位置开始 */
 				}
 
 				.right-container-fir-left-card-dark {
@@ -1105,7 +1390,10 @@
 					width: 99%;
 					height: 98%;
 					border-radius: 80rpx;
-					background-color: rgb(22, 48, 76);
+					background-image: url('/static/index/cardbgc/bgcdark.png');
+					background-color: rgba(12, 25, 47, 0.1);
+					// background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/static/index/cardbgc/fircardbgc.png');
+					border: 2rpx solid #fff;
 					/* 底色 */
 					// background: linear-gradient(135deg, rgba(14, 27, 53, 0.45), rgba(52, 78, 119, 0.45), rgba(28, 74, 112, 0.45));
 				}
@@ -1125,6 +1413,15 @@
 						/* 高度占满父容器 */
 						background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
 						margin-right: 50rpx;
+						position: relative;
+
+						.split-line-white-img {
+							position: absolute;
+							top: 0rpx;
+							left: -300rpx;
+							height: 800rpx;
+							width: 300rpx;
+						}
 					}
 
 					.uni-margin-wrap {
@@ -1152,72 +1449,10 @@
 						margin-right: 30rpx;
 						width: 70rpx;
 						height: 90rpx;
+						z-index: 10;
 					}
 
-					.right-huli {
 
-						width: 200rpx;
-						height: 100%;
-						// background-color: #047ADB;
-						margin-top: -100rpx;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						flex-direction: column;
-
-						.right-huli-view::-webkit-scrollbar {
-							display: none;
-						}
-
-						.right-huli-view {
-							height: 700rpx;
-							// background-color: #047ADB;
-							overflow: auto;
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							flex-direction: column;
-
-							.right-huli-view-dis {
-								// flex-direction: column;
-								margin-top: 30rpx;
-								margin-bottom: 30rpx;
-								display: flex;
-								justify-content: center;
-								align-items: center;
-								flex-direction: column;
-
-								.right-huli-img {
-									width: 120rpx;
-									height: 120rpx;
-								}
-
-								.right-huli-text {
-									width: 100%;
-									height: 20rpx;
-									text-align: center;
-								}
-
-								.right-huli-text-dark {
-									width: 100%;
-									height: 20rpx;
-									text-align: center;
-									color: #fff;
-								}
-							}
-						}
-
-						.right-huli-shang {
-							width: 50rpx;
-							height: 30rpx;
-						}
-
-						.right-huli-xia {
-							margin-top: 10rpx;
-							width: 50rpx;
-							height: 30rpx;
-						}
-					}
 
 					.time-tra {
 						margin-left: 30rpx;
@@ -1394,7 +1629,7 @@
 					left: -15rpx;
 					width: 315rpx;
 					height: 104rpx;
-
+					z-index: 10;
 				}
 
 				.right-container-fir-left-card-hulilei-font {
@@ -1403,6 +1638,7 @@
 					left: 55rpx;
 					font-size: 50rpx;
 					color: #fff;
+					z-index: 10;
 				}
 			}
 
@@ -1694,8 +1930,132 @@
 		/* 高度占满父容器 */
 		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%);
 		margin-left: 20rpx;
-		/* 上面到下面的渐变效果：
+		position: relative;
-		 - 从透明到黑色，再从黑色到透明
+
-		 - 渐变的范围：50%处为渐变的中心，顶部和底部是透明的 */
+		.split-line-white-img {
+			position: absolute;
+			top: 0rpx;
+			left: -300rpx;
+			height: 800rpx;
+			width: 300rpx;
+		}
+	}
+
+	.card-upfaguang {
+		position: absolute;
+		top: 600rpx;
+		left: 150rpx;
+		height: 600rpx;
+		width: 500rpx;
+	}
+
+	.card-upfaguang-down {
+		position: absolute;
+		top: 620rpx;
+		left: 860rpx;
+		height: 600rpx;
+		width: 500rpx;
+	}
+
+	.right-container-fir {}
+
+	.right-huli {
+
+		width: 200rpx;
+		height: 100%;
+		// background-color: #047ADB;
+		margin-top: -100rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+
+
+
+		.right-huli-view {
+			// margin-top: 50rpx;
+			min-height: 650rpx;
+			// background-color: #047ADB;
+			overflow: auto;
+			display: flex;
+			justify-content: center;
+			align-items: flex-start;
+			/* 垂直方向对齐方式可以调整 */
+			flex-direction: column;
+
+			.right-huli-view-dis {
+				height: 250rpx;
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				width: 100%;
+
+				.right-huli-img {
+					width: 120rpx;
+					height: 120rpx;
+				}
+
+				.right-huli-text {
+					width: 100%;
+					height: 25rpx;
+					text-align: center;
+				}
+
+				.right-huli-text-dark {
+					width: 100%;
+					height: 25rpx;
+					text-align: center;
+					color: #fff;
+				}
+			}
+		}
+
+		.right-huli-shang {
+			width: 50rpx;
+			height: 30rpx;
+		}
+
+		.right-huli-xia {
+			// margin-top: 10rpx;
+			width: 50rpx;
+			height: 30rpx;
+		}
+	}
+
+	.right-container-fir-left-card-flex {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.savehundred {
+		width: 100%;
+		height: 100%;
+	}
+
+	.mt {
+		margin-top: 50rpx;
+	}
+
+	.progress-bar-container {
+		margin-top: 30rpx;
+		width: 60%;
+		height: 20rpx;
+		background-color: #AAB9D6;
+		border-radius: 15px;
+		overflow: hidden;
+	}
+
+	.progress-bar {
+		height: 100%;
+		
+		/* 这里可以更改进度百分比 */
+		background: linear-gradient(to top, #047ADB, #0EA7DD);
+		border-radius: 15px 0 0 15px;
+		transition: width 0.3s ease;
 	}
 </style>

pages/login/login.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
+      <swiper-item>
+        1
+      </swiper-item>
+      <swiper-item>
+        2
+      </swiper-item>
+      <swiper-item>
+        3
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      startX: 0,
+      startY: 0,
+      isDragging: false
+    };
+  },
+  methods: {
+    // 手指触摸开始
+    onTouchStart(e) {
+      this.startX = e.touches[0].clientX;
+      this.startY = e.touches[0].clientY;
+      this.isDragging = false;
+    },
+    // 手指滑动
+    onTouchMove(e) {
+      const moveX = e.touches[0].clientX - this.startX;
+      const moveY = e.touches[0].clientY - this.startY;
+
+      if (Math.abs(moveX) > Math.abs(moveY)) {
+        // 横向滑动
+        this.isDragging = true;
+      } else {
+        // 纵向滑动
+        this.isDragging = true;
+      }
+
+      if (this.isDragging) {
+        e.preventDefault(); // 防止页面默认滑动
+      }
+    },
+    // 手指抬起
+    onTouchEnd() {
+      this.isDragging = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  position: relative;
+  width: 100%;
+  height: 300px;
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+</style>