From 645c101ebbf57f19ea0234c3cac171619730f886 Mon Sep 17 00:00:00 2001
From: 18631081161 <2088094923@qq.com>
Date: Thu, 11 Sep 2025 17:10:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9UI.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   2 +-
 pages/appointment/appointment-page.vue        |  87 +++--
 pages/me/me-page.vue                          | 356 +++++++++---------
 .../uni-data-select/uni-data-select.vue       |   2 +-
 4 files changed, 242 insertions(+), 205 deletions(-)

diff --git a/pages.json b/pages.json
index a14f84f..de6f84f 100644
--- a/pages.json
+++ b/pages.json
@@ -90,7 +90,7 @@
 	"uniIdRouter": {},
 	"tabBar": {
 		"color": "#cdcdcd",
-		"selectedColor": "#1296db",
+		"selectedColor": "#59AB6D",
 		"borderStyle": "black",
 		"height": "129.17rpx",
 		"list": [{
diff --git a/pages/appointment/appointment-page.vue b/pages/appointment/appointment-page.vue
index 6e5e875..811ca9c 100644
--- a/pages/appointment/appointment-page.vue
+++ b/pages/appointment/appointment-page.vue
@@ -3,17 +3,27 @@
 
 		<text style="margin-top: 100rpx; text-align: center;">发起预约</text>
 
-
 		<view class=""
-			style="width: 90%; background-color: #F2F3F5; border-radius: 10rpx; margin: 30rpx auto 0; display: flex; justify-content: center;">
-			<view class="column" style="width: 95%; margin-bottom: 20rpx;">
+			style="width: 90%; background-color: #FFFFFF; border-radius: 10rpx; margin: 30rpx auto 0; display: flex; justify-content: center; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
+			<view class="column" style="width: 95%; margin-bottom: 20rpx; margin-top: 25rpx;">
+
+				<view class="row" style="align-items: center;">
+					<text style="font-size: 27.85rpx; margin-right: 23rpx;">开始时间</text>
+					<view class="" style="width: 80%;">
+						<uni-datetime-picker style="width: 50px;" type="datetime" v-model="startTimeStr"
+							@change="changeLog" />
+					</view>
+				</view>
+
+				<view class="row" style="align-items: center; margin-top: 30rpx;">
+					<text style="font-size: 27.85rpx; margin-right: 23rpx;">结束时间</text>
+					<view class="" style="width: 80%;">
+						<uni-datetime-picker style="margin-top: 10rpx;" type="datetime" v-model="endTimeStr"
+							@change="changeLog2" />
+					</view>
+				</view>
 
-				<text style="font-size: 26rpx; margin-bottom: 10rpx; margin-top: 20rpx;">开始时间</text>
-				<uni-datetime-picker style="width: 50px;" type="datetime" v-model="startTimeStr" @change="changeLog" />
 
-				<text style="font-size: 26rpx; margin-bottom: 10rpx; margin-top: 30rpx;">结束时间</text>
-				<uni-datetime-picker style="margin-top: 10rpx;" type="datetime" v-model="endTimeStr"
-					@change="changeLog2" />
 				<text v-if="hours!=''" style="font-size: 26rpx; margin-top: 20rpx;">合计：{{hours}}小时{{minutes}}分钟</text>
 
 			</view>
@@ -21,18 +31,20 @@
 
 
 
-		<view class="column" style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #F2F3F5;">
+		<view class="column"
+			style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #FFFFFF; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
 			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">组局名称</text>
 
 			<view class=""
-				style="width: 90%; background-color: white; margin-left: 20rpx; margin-top: 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;">
-				<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx;" />
+				style="width: 89%; background-color: white; margin: 20rpx auto 0; height: 70rpx; border-radius: 10rpx; display: flex; align-items: center; padding-left: 20rpx; border: 1rpx solid #515151;">
+				<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx; width: 100%;" />
 			</view>
 
 			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">房间</text>
 
-			<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
-				<uni-data-select v-model="roomValue" :localdata="range" @change="change"></uni-data-select>
+			<view class="" style="width: 92%; margin: 20rpx auto 0; border-radius: 50rpx;">
+				<uni-data-select class="custom-select" v-model="roomValue" :localdata="range"
+					@change="change"></uni-data-select>
 			</view>
 
 			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">人数</text>
@@ -55,13 +67,13 @@
 
 			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">其他补充</text>
 			<view class=""
-				style="width: 90%; background-color: white; margin-left: 20rpx; margin-top: 20rpx; margin-bottom: 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;">
-				<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx;" />
+				style="width: 89%; background-color: white; border-radius: 10rpx; margin: 20rpx auto 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;  border: 1rpx solid #515151;">
+				<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx; width: 100%;" />
 			</view>
 
 		</view>
 
-		<view class="column" style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #F2F3F5;">
+		<view class="column" style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #FFFFFF; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
 
 			<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
 				<view class="" style="width: 120rpx; font-size: 26rpx;  align-items: center;">
@@ -70,10 +82,10 @@
 
 				<radio-group class="" style="margin-left: 50rpx;">
 					<label class="" style="font-size: 24rpx;">
-						<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />禁烟
+						<radio value="r1" color="#00AC4E" style="transform:scale(0.7);" :checked="true" />禁烟
 					</label>
-					<label class="" style="font-size: 24rpx;">
-						<radio value="r2" color="#007aff" style="transform:scale(0.7);" />不禁烟
+					<label class="" style="font-size: 24rpx; margin-left: 90rpx;">
+						<radio value="r2" color="#00AC4E" style="transform:scale(0.7);" />不禁烟
 					</label>
 
 				</radio-group>
@@ -86,13 +98,13 @@
 				</view>
 				<radio-group class="" style="margin-left: 50rpx;">
 					<label class="" style="font-size: 24rpx;">
-						<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />不限
+						<radio value="r1" color="#00AC4E" style="transform:scale(0.7);" :checked="true" />不限
 					</label>
-					<label class="" style="font-size: 24rpx;">
-						<radio value="r2" color="#007aff" style="transform:scale(0.7);" />男
+					<label class="" style="font-size: 24rpx; margin-left: 90rpx;">
+						<radio value="r2" color="#00AC4E" style="transform:scale(0.7);" />男
 					</label>
-					<label class="" style="font-size: 24rpx;">
-						<radio value="r3" color="#007aff" style="transform:scale(0.7);" />女
+					<label class="" style="font-size: 24rpx; margin-left: 90rpx;">
+						<radio value="r3" color="#00AC4E" style="transform:scale(0.7);" />女
 					</label>
 				</radio-group>
 			</view>
@@ -101,11 +113,13 @@
 				<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
 					信誉
 				</view>
+				
+				<text style="font-size: 25.86rpx; margin-left: 55rpx;">大于等于</text>
 
 				<view class="counter-container">
 					<!-- 减号按钮 -->
 					<view class="" @click="decrement" :disabled="currentValue <= 0">
-						<uni-icons type="minus" size="24" color="#666" />
+						<uni-icons type="minus" size="24" color="#00AC4E" />
 					</view>
 
 					<!-- 数值显示 -->
@@ -115,7 +129,7 @@
 
 					<!-- 加号按钮 -->
 					<view class="" @click="increment" :disabled="currentValue >= 5">
-						<uni-icons type="plus" size="24" color="#666" />
+						<uni-icons type="plus" size="24" color="#00AC4E" />
 					</view>
 				</view>
 
@@ -125,7 +139,7 @@
 
 		</view>
 
-		<view class="column" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #F2F3F5;">
+		<view class="column" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #FFFFFF; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
 
 			<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
 				<view class="" style=" font-size: 26rpx; align-items: center;">
@@ -133,13 +147,13 @@
 				</view>
 				<radio-group class="" style="margin-left: 50rpx;">
 					<label class="" style="font-size: 24rpx;">
-						<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />0元
+						<radio value="r1" color="#00AC4E" style="transform:scale(0.7);" :checked="true" />0元
 					</label>
 					<label class="" style="font-size: 24rpx;">
-						<radio value="r2" color="#007aff" style="transform:scale(0.7);" />5元
+						<radio value="r2" color="#00AC4E" style="transform:scale(0.7);" />5元
 					</label>
 					<label class="" style="font-size: 24rpx;">
-						<radio value="r3" color="#007aff" style="transform:scale(0.7);" />10元
+						<radio value="r3" color="#00AC4E" style="transform:scale(0.7);" />10元
 					</label>
 				</radio-group>
 			</view>
@@ -148,7 +162,7 @@
 				style="font-size: 24rpx; margin-left: 20rpx; margin-bottom: 20rpx;">除发起者外，其他参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
 		</view>
 
-		<view class="center" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #1989FA;">
+		<view class="center" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #00AC4E;">
 			<text style="margin: 20rpx; color: white;">发起预约</text>
 		</view>
 
@@ -264,13 +278,14 @@
 		width: 100%;
 		height: 100vh;
 		overflow-y: auto;
+		background-color: #F7F7F7;
 	}
 
 	.counter-container {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		margin-left: 50rpx;
+		margin-left: 90rpx;
 	}
 
 	.counter-btn {
@@ -291,10 +306,16 @@
 
 
 	.counter-value {
-		width: 120rpx;
+		width: 90rpx;
 		text-align: center;
 		font-size: 28rpx;
 		font-weight: 500;
 		color: #333;
 	}
+
+	.custom-select ::v-deep .uni-input-input {
+		/* 正常状态下的边框颜色 */
+		border: 1px solid #007aff !important;
+		border-radius: 6px;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/me/me-page.vue b/pages/me/me-page.vue
index 345cb51..0502d3f 100644
--- a/pages/me/me-page.vue
+++ b/pages/me/me-page.vue
@@ -27,7 +27,7 @@
 			</view>
 		</view>
 		<view class="column" @click="currentAppointment ? openPop() : null"
-			style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">
+			style="width: 90%; border-radius: 30rpx; background: linear-gradient(to bottom, #D7F0DD, #FFFFFF); box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
 
 			<!-- 无预约状态 -->
 			<view v-if="!currentAppointment" class="row" style="align-items: center; margin: 20rpx;">
@@ -60,7 +60,7 @@
 
 
 		<view v-if="userInfo != null" class="column"
-			style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">
+			style="width: 90%; border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
 
 
 			<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;">
@@ -89,7 +89,7 @@
 		</view>
 
 		<view v-else class="column"
-			style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">
+			style="width: 90%;  border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
 			<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;">
 				<text style="font-size: 24rpx;">我的评分</text>
 				<text style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评分</text>
@@ -111,30 +111,39 @@
 
 		</view>
 
-		<view class="row" style="width: 90%; margin: 40rpx auto 0;">
 
-			<view class="column" @click="toAppointment()" style="align-items: center;">
-				<image src="@@:app/static/appoin_record.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
-				<text style="font-size: 24rpx; margin-top: 20rpx;">预约记录</text>
+		<view class="column"
+			style="width: 90%; margin: 40rpx auto 0;  border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);">
+
+			<text style="font-size: 30rpx; margin-top: 26rpx; margin-left: 36rpx;">常用功能</text>
+
+			<view class="row" style=" justify-content: space-between; margin: 40rpx;">
+
+				<view class="column" @click="toAppointment()" style="align-items: center;">
+					<image src="@@:app/static/appoin_record.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
+					<text style="font-size: 24rpx; margin-top: 20rpx;">预约记录</text>
+				</view>
+
+				<view class="column" style="align-items: center;">
+					<image src="@@:app/static/problem.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
+					<text style="font-size: 24rpx; margin-top: 20rpx;">常见问题</text>
+				</view>
+
+				<view class="column" style="align-items: center;">
+					<image src="@@:app/static/customer_s.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
+					<text style="font-size: 24rpx; margin-top: 20rpx;">联系我们</text>
+				</view>
+
+				<view class="column" @click="toBlacklist()" style="align-items: center;">
+					<image src="@@:app/static/blacklist.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
+					<text style="font-size: 24rpx; margin-top: 20rpx;">黑名单</text>
+				</view>
+
 			</view>
-
-			<view class="column" style="align-items: center; margin-left: 40rpx;">
-				<image src="@@:app/static/problem.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
-				<text style="font-size: 24rpx; margin-top: 20rpx;">常见问题</text>
-			</view>
-
-			<view class="column" style="align-items: center; margin-left: 40rpx;">
-				<image src="@@:app/static/customer_s.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
-				<text style="font-size: 24rpx; margin-top: 20rpx;">联系我们</text>
-			</view>
-
-			<view class="column" @click="toBlacklist()" style="align-items: center; margin-left: 40rpx;">
-				<image src="@@:app/static/blacklist.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
-				<text style="font-size: 24rpx; margin-top: 20rpx;">黑名单</text>
-			</view>
-
 		</view>
 
+
+
 	</view>
 
 
@@ -236,174 +245,181 @@
 </template>
 
 <script setup>
-import { userInfo, loadUserInfo } from '@/common/server/user'
-import { ref, reactive, onMounted } from 'vue'
+	import {
+		userInfo,
+		loadUserInfo
+	} from '@/common/server/user'
+	import {
+		ref,
+		reactive,
+		onMounted
+	} from 'vue'
 
-// 响应式数据
-const rateValue = ref(4.5)
-const infoPop = ref(null)
-const loading = ref(false)
+	// 响应式数据
+	const rateValue = ref(4.5)
+	const infoPop = ref(null)
+	const loading = ref(false)
 
-// 用户信息 - 未登录状态
-// const userInfo = reactive({
-// 	nickname: '未登录',
-// 	uid: '',
-// 	avatar: '@@:app/nouser.png',
-// 	rating: 0,
-// 	reputation: 0,
-// 	cardQuality: 0,
-// 	cardSkill: 0,
-// 	pigeonCount: 0
-// })
+	// 用户信息 - 未登录状态
+	// const userInfo = reactive({
+	// 	nickname: '未登录',
+	// 	uid: '',
+	// 	avatar: '@@:app/nouser.png',
+	// 	rating: 0,
+	// 	reputation: 0,
+	// 	cardQuality: 0,
+	// 	cardSkill: 0,
+	// 	pigeonCount: 0
+	// })
 
-// 当前预约信息
-const currentAppointment = ref(null)
+	// 当前预约信息
+	const currentAppointment = ref(null)
 
-// 预约详情数据
-const appointmentDetail = reactive({
-	organizer: {
-		name: '苏家辉',
-		avatar: '',
-		isBlacklisted: false
-	},
-	participants: [
-		{
-			name: '树下的胖子',
-			avatar: '',
-			isBlacklisted: true
-		},
-		{
-			name: '张三',
+	// 预约详情数据
+	const appointmentDetail = reactive({
+		organizer: {
+			name: '苏家辉',
 			avatar: '',
 			isBlacklisted: false
 		},
-		{
-			name: '李四',
-			avatar: '',
-			isBlacklisted: false
+		participants: [{
+				name: '树下的胖子',
+				avatar: '',
+				isBlacklisted: true
+			},
+			{
+				name: '张三',
+				avatar: '',
+				isBlacklisted: false
+			},
+			{
+				name: '李四',
+				avatar: '',
+				isBlacklisted: false
+			}
+		],
+		timeInfo: {
+			startTime: '2025/08/27 15：30',
+			endTime: '2025/08/27 17：30',
+			duration: '2小时'
+		},
+		roomInfo: {
+			roomNumber: '304号-大包',
+			price: '30元/小时',
+			playerCount: 3,
+			gameType: '扑克',
+			rules: '斗地主',
+			additionalInfo: '无'
+		},
+		requirements: {
+			smoking: '禁烟',
+			gender: '不限',
+			reputation: '≧4.0'
+		},
+		pigeonFee: '0元'
+	})
+
+	// 方法
+	const openPop = () => {
+		infoPop.value.open();
+	}
+
+	const clasePop = () => {
+		infoPop.value.close();
+	}
+
+	const toAppointment = () => {
+		if (userInfo.value == null) {
+			uni.navigateTo({
+				url: '/pages/me/login'
+			});
+			return;
 		}
-	],
-	timeInfo: {
-		startTime: '2025/08/27 15：30',
-		endTime: '2025/08/27 17：30',
-		duration: '2小时'
-	},
-	roomInfo: {
-		roomNumber: '304号-大包',
-		price: '30元/小时',
-		playerCount: 3,
-		gameType: '扑克',
-		rules: '斗地主',
-		additionalInfo: '无'
-	},
-	requirements: {
-		smoking: '禁烟',
-		gender: '不限',
-		reputation: '≧4.0'
-	},
-	pigeonFee: '0元'
-})
 
-// 方法
-const openPop = () => {
-	infoPop.value.open();
-}
+		uni.navigateTo({
+			url: '/pages/me/appointment-record-page'
+		});
+	}
 
-const clasePop = () => {
-	infoPop.value.close();
-}
+	const toEditInfo = () => {
+		// 未登录状态，跳转到登录页面
+		if (userInfo.value == null) {
+			uni.navigateTo({
+				url: '/pages/me/login'
+			});
+			return;
+		}
+		uni.navigateTo({
+			url: '/pages/me/edit-info'
+		});
+	}
 
-const toAppointment = () => {
-	if (userInfo.value == null) {
+	const toBlacklist = () => {
+		if (userInfo.value == null) {
+			uni.navigateTo({
+				url: '/pages/me/login'
+			});
+			return;
+		}
+		uni.navigateTo({
+			url: '/pages/me/blacklist-page'
+		});
+	}
+
+	const openUserPop = () => {
+		// 打开用户详情弹窗的逻辑
+		console.log('打开用户详情弹窗');
+	}
+
+	const toLogin = () => {
 		uni.navigateTo({
 			url: '/pages/me/login'
 		});
-		return;
 	}
 
-	uni.navigateTo({
-		url: '/pages/me/appointment-record-page'
-	});
-}
+	// 加载当前预约信息 - 未登录状态
+	const loadCurrentAppointment = async () => {
+		try {
+			// 未登录状态，没有预约数据
+			currentAppointment.value = null
 
-const toEditInfo = () => {
-	// 未登录状态，跳转到登录页面
-	if (userInfo.value == null) {
-		uni.navigateTo({
-			url: '/pages/me/login'
-		});
-		return;
+		} catch (error) {
+			console.error('加载预约信息失败:', error)
+			currentAppointment.value = null
+		}
 	}
-	uni.navigateTo({
-		url: '/pages/me/edit-info'
+
+	// 组件挂载时加载数据
+	onMounted(() => {
+		loadCurrentAppointment()
+	})
+
+	// 页面显示时重新加载数据（用于登录后刷新）
+	onShow(() => {
+		// 检查是否有登录状态
+		// getUserInfoData();
+	})
+	onLoad(async () => {
+		await loadUserInfo();
 	});
-}
-
-const toBlacklist = () => {
-	if (userInfo.value == null) {
-		uni.navigateTo({
-			url: '/pages/me/login'
-		});
-		return;
-	}
-	uni.navigateTo({
-		url: '/pages/me/blacklist-page'
-	});
-}
-
-const openUserPop = () => {
-	// 打开用户详情弹窗的逻辑
-	console.log('打开用户详情弹窗');
-}
-
-const toLogin = () => {
-	uni.navigateTo({
-		url: '/pages/me/login'
-	});
-}
-
-// 加载当前预约信息 - 未登录状态
-const loadCurrentAppointment = async () => {
-	try {
-		// 未登录状态，没有预约数据
-		currentAppointment.value = null
-
-	} catch (error) {
-		console.error('加载预约信息失败:', error)
-		currentAppointment.value = null
-	}
-}
-
-// 组件挂载时加载数据
-onMounted(() => {
-	loadCurrentAppointment()
-})
-
-// 页面显示时重新加载数据（用于登录后刷新）
-onShow(() => {
-	// 检查是否有登录状态
-	// getUserInfoData();
-})
-onLoad(async () => {
-	await loadUserInfo();
-});
 </script>
 
 <style lang="scss">
-.content {
-	width: 100%;
-	height: 100vh;
-}
+	.content {
+		width: 100%;
+		height: 100vh;
+		background-color: #F7F7F7;
+	}
 
-.loading-container {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	background-color: rgba(0, 0, 0, 0.7);
-	color: white;
-	padding: 20rpx 40rpx;
-	border-radius: 10rpx;
-	z-index: 9999;
-}
+	.loading-container {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background-color: rgba(0, 0, 0, 0.7);
+		color: white;
+		padding: 20rpx 40rpx;
+		border-radius: 10rpx;
+		z-index: 9999;
+	}
 </style>
\ No newline at end of file
diff --git a/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue b/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
index 85b2d7b..9598006 100644
--- a/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
+++ b/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue
@@ -541,7 +541,7 @@
 	$uni-base-color: #6a6a6a !default;
 	$uni-main-color: #333 !default;
 	$uni-secondary-color: #909399 !default;
-	$uni-border-3: #e5e5e5;
+	$uni-border-3: #515151;
   $uni-primary: #2979ff !default;
 	$uni-success: #4cd964 !default;
 	$uni-warning: #f0ad4e !default;