Merge remote-tracking branch 'origin/test_dev' into test_dev

LiangZhiYUMao/pages/index/index.vue

@@ -7,7 +7,7 @@
 				<!-- 红娘工作台切换按钮 - 根据数据库查询结果动态显示 -->
 				<view v-if="showMatchmakerButton"
 					class="matchmaker-btn" @click="openMatchmakerPopup">
-					<text class="switch-icon">🔄</text>
+<!--					<text class="switch-icon">🔄</text>-->
 					<text class="switch-text">切换工作台</text>
 				</view>
 				<!-- 消息通知图标 -->
@@ -1031,35 +1031,26 @@
 
 		.matchmaker-btn {
 			position: relative;
-			width: auto;
-			height: auto;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			background: transparent;
-			border-radius: 0;
+			padding: 16rpx 32rpx;
+			background: linear-gradient(135deg, #9B7EDE 0%, #B19CD9 100%);
+			border-radius: 30rpx;
+			box-shadow: 0 8rpx 20rpx rgba(155, 126, 222, 0.3);
 			transition: all 0.3s ease;
-			padding: 10rpx 20rpx;
-			color: #E91E63;
-			font-weight: 600;
-			border: 2rpx solid #E91E63;
-			border-radius: 25rpx;
+			border: none;
 			
 			&:active {
-				opacity: 0.8;
-				transform: scale(0.98);
-				background: rgba(233, 30, 99, 0.1);
-			}
-
-			.switch-icon {
-				font-size: 28rpx;
-				margin-right: 8rpx;
+				transform: scale(0.95);
+				box-shadow: 0 4rpx 12rpx rgba(155, 126, 222, 0.4);
 			}
 			
 			.switch-text {
 				font-size: 26rpx;
-				color: #E91E63;
-				font-weight: 600;
+				color: #FFFFFF;
+				font-weight: 700;
+				letter-spacing: 0.5rpx;
 			}
 		}
 

LiangZhiYUMao/pages/matchmaker-workbench/index.vue

@@ -1,143 +1,142 @@
 <template>
-	<view class="matchmaker-workbench">
-		<!-- 顶部导航栏 -->
-		<view class="header">
-			<text class="header-title">红娘工作台</text>
-			<view class="header-right">
-				<view class="search-icon" @click="handleSearch"></view>
-				<!-- 退出红娘工作台按钮 -->
-				<view class="exit-workbench-btn" @click="openExitPopup">
-					<view class="arrow-container">
-						<view class="arrow arrow-top"></view>
-						<view class="arrow arrow-bottom"></view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<scroll-view scroll-y class="content">
-			<!-- 欢迎卡片 -->
-			<view class="welcome-card">
-				<view class="welcome-text">
-					<text class="welcome-title">欢迎回来</text>
-					<text class="heart-icon">❤️</text>
-					<text class="matchmaker-name">{{ matchmakerInfo.realName || makerName }}</text>
-				</view>
-				<image class="avatar" :src="matchmakerInfo.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
-			</view>
-
-			<!-- 统计卡片 -->
-			<view class="stats-cards">
-				<view class="stats-card success">
-					<view class="stats-row">
-						<text class="stats-number">{{ matchmakerInfo.successCouples || 0 }}</text>
-						<text class="stats-tag orange">撮合达人</text>
-					</view>
-					<text class="stats-label">成功撮合</text>
-					<text class="stats-subtitle">匹配数</text>
-				</view>
-				<view class="stats-card points">
-					<view class="stats-row">
-						<text class="stats-number">{{ matchmakerInfo.points || 0 }}</text>
-						<text class="stats-tag purple">积分可兑礼</text>
-					</view>
-					<text class="stats-label">我的积分</text>
-					<text class="stats-subtitle">可兑换</text>
-				</view>
-			</view>
-
-			<!-- 公告卡片 -->
-			<view class="announcement-card" @click="handleAnnouncement" v-if="currentAnnouncement">
-				<text class="announcement-tag">公告</text>
-				<text class="announcement-content">{{ currentAnnouncement.content }}</text>
-				<view class="arrow-right"></view>
-			</view>
-			<view class="announcement-card" v-else>
-				<text class="announcement-tag">公告</text>
-				<text class="announcement-content">暂无公告</text>
-			</view>
-
-			<!-- 功能菜单 -->
-			<view class="menu-grid">
-				<view class="menu-item" @click="navigateToMyResources">
-					<view class="menu-icon resources"></view>
-					<text class="menu-text">我的资源</text>
-				</view>
-				<view class="menu-item" @click="navigateToQualityResources">
-					<view class="menu-icon quality"></view>
-					<text class="menu-text">优质资源</text>
-				</view>
-				<view class="menu-item" @click="navigateToCourses">
-					<view class="menu-icon courses"></view>
-					<text class="menu-text">课程培训</text>
-				</view>
-				<view class="menu-item" @click="navigateToPointsMall">
-					<view class="menu-icon mall"></view>
-					<text class="menu-text">积分商城</text>
-				</view>
-				<view class="menu-item" @click="navigateToActivityCenter">
-					<view class="menu-icon activity"></view>
-					<text class="menu-text">活动中心</text>
-				</view>
-			</view>
-
-			<!-- 本周最佳红娘 -->
-			<view class="best-matchmaker-section">
-				<view class="section-header">
-					<text class="section-title">
-						<text class="crown-icon">👑</text>
-						本周最佳红娘
-					</text>
-					<text class="section-more" @click="navigateToRanking">排行榜 ></text>
-				</view>
-				<view class="best-matchmaker-list">
-					<view class="best-matchmaker-item" v-for="(item, index) in bestMatchmakers" :key="item.matchmaker_id || index" @click="goToMatchmakerDetail(item)">
-						<text class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</text>
-						<image class="avatar-small" :src="item.avatar_url || '/static/default-avatar.svg'" mode="aspectFill"></image>
-						<view class="matchmaker-info">
-							<text class="matchmaker-name-small">{{ item.real_name || '红娘' }}</text>
-							<text class="success-count">成功人数: {{ item.success_couples || 0 }}</text>
-						</view>
-						<view class="likes-info">
-							<text class="heart-small">❤️</text>
-							<text class="like-count">{{ item.likes || 0 }}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</scroll-view>
-
-		<!-- 底部导航 -->
-		<view class="tabbar">
-			<view class="tabbar-item active home" @click="navigateToWorkbench">
-				<view class="tabbar-icon"></view>
-				<text class="tabbar-text">工作台</text>
-			</view>
-			<view class="tabbar-item resources" @click="navigateToMyResources">
-				<view class="tabbar-icon"></view>
-				<text class="tabbar-text">我的资源</text>
-			</view>
-			<view class="tabbar-item trophy" @click="navigateToRanking">
-				<view class="tabbar-icon"></view>
-				<text class="tabbar-text">排行榜</text>
-			</view>
-			<view class="tabbar-item message" @click="navigateToMessage">
-				<view class="tabbar-icon">
-					<view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
-				</view>
-				<text class="tabbar-text">消息</text>
-			</view>
-			<view class="tabbar-item mine" @click="navigateToMine">
-				<view class="tabbar-icon"></view>
-				<text class="tabbar-text">我的</text>
-			</view>
-		</view>
-	</view>
+  <view class="matchmaker-workbench">
+    <!-- 顶部导航栏 -->
+    <view class="header">
+      <text class="header-title">红娘工作台</text>
+      <view class="header-right">
+        <view class="search-icon" @click="handleSearch"></view>
+        <!-- 返回用户端按钮 - 修改为与"前往红娘工作台"一致的样式 -->
+        <view class="back-to-user-btn" @click="openExitPopup">
+          <text class="btn-text">返回用户端</text>
+        </view>
+      </view>
+    </view>
+
+    <scroll-view scroll-y class="content">
+      <!-- 欢迎卡片 -->
+      <view class="welcome-card">
+        <view class="welcome-text">
+          <text class="welcome-title">欢迎回来</text>
+          <text class="heart-icon">❤️</text>
+          <text class="matchmaker-name">{{ matchmakerInfo.realName || makerName }}</text>
+        </view>
+        <image class="avatar" :src="matchmakerInfo.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
+      </view>
+
+      <!-- 统计卡片 -->
+      <view class="stats-cards">
+        <view class="stats-card success">
+          <view class="stats-row">
+            <text class="stats-number">{{ matchmakerInfo.successCouples || 0 }}</text>
+            <text class="stats-tag orange">撮合达人</text>
+          </view>
+          <text class="stats-label">成功撮合</text>
+          <text class="stats-subtitle">匹配数</text>
+        </view>
+        <view class="stats-card points">
+          <view class="stats-row">
+            <text class="stats-number">{{ matchmakerInfo.points || 0 }}</text>
+            <text class="stats-tag purple">积分可兑礼</text>
+          </view>
+          <text class="stats-label">我的积分</text>
+          <text class="stats-subtitle">可兑换</text>
+        </view>
+      </view>
+
+      <!-- 公告卡片 -->
+      <view class="announcement-card" @click="handleAnnouncement" v-if="currentAnnouncement">
+        <text class="announcement-tag">公告</text>
+        <text class="announcement-content">{{ currentAnnouncement.content }}</text>
+        <view class="arrow-right"></view>
+      </view>
+      <view class="announcement-card" v-else>
+        <text class="announcement-tag">公告</text>
+        <text class="announcement-content">暂无公告</text>
+      </view>
+
+      <!-- 功能菜单 -->
+      <view class="menu-grid">
+        <view class="menu-item" @click="navigateToMyResources">
+          <view class="menu-icon resources"></view>
+          <text class="menu-text">我的资源</text>
+        </view>
+        <view class="menu-item" @click="navigateToQualityResources">
+          <view class="menu-icon quality"></view>
+          <text class="menu-text">优质资源</text>
+        </view>
+        <view class="menu-item" @click="navigateToCourses">
+          <view class="menu-icon courses"></view>
+          <text class="menu-text">课程培训</text>
+        </view>
+        <view class="menu-item" @click="navigateToPointsMall">
+          <view class="menu-icon mall"></view>
+          <text class="menu-text">积分商城</text>
+        </view>
+        <view class="menu-item" @click="navigateToActivityCenter">
+          <view class="menu-icon activity"></view>
+          <text class="menu-text">活动中心</text>
+        </view>
+      </view>
+
+      <!-- 本周最佳红娘 -->
+      <view class="best-matchmaker-section">
+        <view class="section-header">
+          <text class="section-title">
+            <text class="crown-icon">👑</text>
+            本周最佳红娘
+          </text>
+          <text class="section-more" @click="navigateToRanking">排行榜 ></text>
+        </view>
+        <view class="best-matchmaker-list">
+          <view class="best-matchmaker-item" v-for="(item, index) in bestMatchmakers" :key="item.matchmaker_id || index"
+                @click="goToMatchmakerDetail(item)">
+            <text class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</text>
+            <image class="avatar-small" :src="item.avatar_url || '/static/default-avatar.svg'"
+                   mode="aspectFill"></image>
+            <view class="matchmaker-info">
+              <text class="matchmaker-name-small">{{ item.real_name || '红娘' }}</text>
+              <text class="success-count">成功人数: {{ item.success_couples || 0 }}</text>
+            </view>
+            <view class="likes-info">
+              <text class="heart-small">❤️</text>
+              <text class="like-count">{{ item.likes || 0 }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部导航 -->
+    <view class="tabbar">
+      <view class="tabbar-item active home" @click="navigateToWorkbench">
+        <view class="tabbar-icon"></view>
+        <text class="tabbar-text">工作台</text>
+      </view>
+      <view class="tabbar-item resources" @click="navigateToMyResources">
+        <view class="tabbar-icon"></view>
+        <text class="tabbar-text">我的资源</text>
+      </view>
+      <view class="tabbar-item trophy" @click="navigateToRanking">
+        <view class="tabbar-icon"></view>
+        <text class="tabbar-text">排行榜</text>
+      </view>
+      <view class="tabbar-item message" @click="navigateToMessage">
+        <view class="tabbar-icon">
+          <view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
+        </view>
+        <text class="tabbar-text">消息</text>
+      </view>
+      <view class="tabbar-item mine" @click="navigateToMine">
+        <view class="tabbar-icon"></view>
+        <text class="tabbar-text">我的</text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import api from '@/utils/api.js'
-	
+import api from '@/utils/api.js'
+
 export default {
 		data() {
 			return {
@@ -343,523 +342,516 @@ export default {
 		flex-direction: column;
 	}
 
-	/* 顶部导航栏 */
-	.header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 25rpx 30rpx;
-		padding-top: calc(25rpx + env(safe-area-inset-top));
-		background: #FFF9F9;
-		border-bottom: 1rpx solid #F0F0F0;
-
-		.header-title {
-			font-size: 38rpx;
-			font-weight: bold;
-			color: #9C27B0;
-		}
-
-		.header-right {
-			display: flex;
-			align-items: center;
-			gap: 20rpx;
-
-			.search-icon,
-			.settings-icon {
-				width: 44rpx;
-				height: 44rpx;
-				background-size: contain;
-				background-repeat: no-repeat;
-				background-position: center;
-			}
-
-			.search-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
-			}
-
-			.settings-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
-			}
-
-			/* 切换工作台按钮 */
-			.exit-workbench-btn {
-				width: 60rpx;
-				height: 44rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
-				border-radius: 22rpx;
-				padding: 8rpx 12rpx;
-
-				.arrow-container {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					gap: 4rpx;
-
-					.arrow {
-						width: 0;
-						height: 0;
-						border-left: 8rpx solid transparent;
-						border-right: 8rpx solid transparent;
-
-						&.arrow-top {
-							border-bottom: 8rpx solid #FFFFFF;
-						}
-
-						&.arrow-bottom {
-							border-top: 8rpx solid #FFFFFF;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.content {
-		flex: 1;
-		padding: 20rpx 20rpx 120rpx;
-		display: flex;
-		flex-direction: column;
-	}
-
-	/* 欢迎卡片 + 统计卡片合并 */
-	.welcome-card {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 30rpx;
-		background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
-		border-radius: 20rpx;
-		margin-bottom: 20rpx;
-
-		.welcome-text {
-			display: flex;
-			align-items: center;
-			gap: 10rpx;
-
-			.welcome-title {
-				font-size: 38rpx;
-				color: #333;
-			}
-
-			.heart-icon {
-				font-size: 32rpx;
-			}
-
-			.matchmaker-name {
-				font-size: 40rpx;
-				font-weight: bold;
-				color: #333;
-			}
-		}
-
-		.avatar {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-			background: rgba(255, 255, 255, 0.3);
-		}
-	}
-
-	/* 统计卡片 */
-	.stats-cards {
-		display: flex;
-		gap: 20rpx;
-		margin-bottom: 20rpx;
-
-		.stats-card {
-			flex: 1;
-			padding: 25rpx;
-			border-radius: 15rpx;
-			background: #FFFFFF;
-			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-
-			.stats-row {
-				display: flex;
-				align-items: center;
-				gap: 10rpx;
-				margin-bottom: 8rpx;
-			}
-
-			.stats-number {
-				font-size: 48rpx;
-				font-weight: bold;
-			}
-
-			.stats-tag {
-				font-size: 20rpx;
-				padding: 4rpx 12rpx;
-				border-radius: 6rpx;
-				font-weight: 500;
-
-				&.orange {
-					color: #FF6B8A;
-					border: 1rpx solid #FF6B8A;
-					background: rgba(255, 107, 138, 0.1);
-				}
-
-				&.purple {
-					color: #9C27B0;
-					border: 1rpx solid #9C27B0;
-					background: rgba(156, 39, 176, 0.1);
-				}
-			}
-
-			.stats-label {
-				display: block;
-				font-size: 28rpx;
-				margin-bottom: 8rpx;
-			}
-
-			.stats-subtitle {
-				display: block;
-				font-size: 24rpx;
-				color: #999;
-			}
-
-			.stats-extra {
-				display: block;
-				font-size: 22rpx;
-				color: #999;
-				margin-top: 8rpx;
-			}
-
-			&.success {
-				.stats-number {
-					color: #FF6B8A;
-				}
-				.stats-label {
-					color: #333;
-				}
-			}
-
-			&.points {
-				.stats-number {
-					color: #9C27B0;
-				}
-				.stats-label {
-					color: #333;
-				}
-			}
-		}
-	}
-
-	/* 公告卡片 */
-	.announcement-card {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 35rpx 30rpx;
-		min-height: 80rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx;
-		margin-bottom: 20rpx;
-		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-		position: relative;
-
-		.announcement-tag {
-			display: inline-block;
-			background: #FF9800;
-			color: #FFFFFF;
-			font-size: 22rpx;
-			padding: 6rpx 16rpx;
-			border-radius: 12rpx;
-			margin-right: 15rpx;
-			font-weight: bold;
-		}
-
-		.announcement-content {
-			flex: 1;
-			font-size: 26rpx;
-			color: #333;
-			line-height: 1.4;
-		}
-
-		.arrow-right {
-			width: 24rpx;
-			height: 24rpx;
-			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
-			background-size: contain;
-			background-repeat: no-repeat;
-			background-position: center;
-			margin-left: 15rpx;
-		}
-	}
-
-	/* 功能菜单 */
-	.menu-grid {
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		gap: 25rpx;
-		padding: 35rpx 20rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx;
-		margin-bottom: 20rpx;
-		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-
-		.menu-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 15rpx;
-
-			.menu-icon {
-				width: 90rpx;
-				height: 90rpx;
-				border-radius: 50%;
-				background-size: 50rpx 50rpx;
-				background-repeat: no-repeat;
-				background-position: center;
-
-				&.resources {
-					background-color: #E8F5E9;
-					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
-				}
-
-				&.quality {
-					background-color: #FFF3E0;
-					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
-				}
-
-				&.courses {
-					background-color: #E3F2FD;
-					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19h14v-2H5v2zm0-4h14v-2H5v2zm0-4h14v-2H5v2z"/></svg>');
-				}
-
-				&.mall {
-					background-color: #F3E5F5;
-					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
-				}
-
-				&.activity {
-					background-color: #FFEBEE;
-					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
-				}
-			}
-
-			.menu-text {
-				font-size: 26rpx;
-				color: #333;
-			}
-		}
-	}
-
-	/* 本周最佳红娘 */
-	.best-matchmaker-section {
-		flex: 1;
-		min-height: 400rpx;
-		padding: 30rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx;
-		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-		display: flex;
-		flex-direction: column;
-		margin-bottom: 20rpx;
-
-		.section-header {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			margin-bottom: 20rpx;
-
-			.section-title {
-				display: flex;
-				align-items: center;
-				font-size: 30rpx;
-				font-weight: bold;
-				color: red;
-
-				.crown-icon {
-					font-size: 32rpx;
-					margin-right: 10rpx;
-				}
-			}
-
-			.section-more {
-				font-size: 24rpx;
-				color: #9C27B0;
-			}
-		}
-
-		.best-matchmaker-list {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			gap: 20rpx;
-
-			.best-matchmaker-item {
-				display: flex;
-				align-items: center;
-				gap: 20rpx;
-				padding: 30rpx 25rpx;
-				background: #FAFAFA;
-				border-radius: 15rpx;
-				min-height: 100rpx;
-
-				.rank-number {
-					width: 45rpx;
-					height: 45rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 28rpx;
-					font-weight: bold;
-					color: #FFF;
-					border-radius: 50%;
-					background: #FFD700;
-
-					&.rank-1 {
-						background: #FFD700;
-					}
-
-					&.rank-2 {
-						background: #C0C0C0;
-					}
-
-					&.rank-3 {
-						background: #CD7F32;
-					}
-				}
-
-				.avatar-small {
-					width: 80rpx;
-					height: 80rpx;
-					border-radius: 50%;
-					background: #F0F0F0;
-				}
-
-				.matchmaker-info {
-					flex: 1;
-
-					.matchmaker-name-small {
-						display: block;
-						font-size: 32rpx;
-						font-weight: bold;
-						color: #333;
-						margin-bottom: 8rpx;
-					}
-
-					.success-count {
-						display: block;
-						font-size: 26rpx;
-						color: #999;
-					}
-				}
-
-				.likes-info {
-					display: flex;
-					align-items: center;
-					gap: 10rpx;
-
-					.heart-small {
-						font-size: 28rpx;
-					}
-
-					.like-count {
-						font-size: 28rpx;
-						color: #E91E63;
-						font-weight: bold;
-					}
-				}
-			}
-		}
-	}
-
-	/* 底部导航 */
-	.tabbar {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 100rpx;
-		background: #FFFFFF;
-		border-top: 1rpx solid #F0F0F0;
-		display: flex;
-		justify-content: space-around;
-		align-items: center;
-		padding-bottom: env(safe-area-inset-bottom);
-
-		.tabbar-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 8rpx;
-			padding: 10rpx 0;
-
-			.tabbar-icon {
-				width: 44rpx;
-				height: 44rpx;
-				background-size: contain;
-				background-repeat: no-repeat;
-				background-position: center;
-				position: relative;
-
-				.badge {
-					position: absolute;
-					top: -8rpx;
-					right: -8rpx;
-					background: #FF4444;
-					color: #FFFFFF;
-					font-size: 20rpx;
-					font-weight: bold;
-					width: 32rpx;
-					height: 32rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-radius: 16rpx;
-				}
-			}
-
-			.tabbar-text {
-				font-size: 20rpx;
-				color: #999;
-			}
-
-			&.active {
-				.tabbar-text {
-					color: #9C27B0;
-					font-weight: bold;
-				}
-			}
-
-			&.home .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
-			}
-
-			&.resources .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
-			}
-
-			&.active.resources .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
-			}
-
-			&.trophy .tabbar-icon {
-				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
-			}
-
-			&.active.trophy .tabbar-icon {
-				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
-			}
-
-			&.message .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
-			}
-
-			&.active.message .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
-			}
-
-			&.mine .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
-			}
-
-			&.active.mine .tabbar-icon {
-				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
-			}
-		}
-	}
+/* 顶部导航栏 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 25rpx 30rpx;
+  padding-top: calc(25rpx + env(safe-area-inset-top));
+  background: #FFF9F9;
+  border-bottom: 1rpx solid #F0F0F0;
+
+  .header-title {
+    font-size: 38rpx;
+    font-weight: bold;
+    color: #9C27B0;
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+
+    .search-icon,
+    .settings-icon {
+      width: 44rpx;
+      height: 44rpx;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    .search-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
+    }
+
+    .settings-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
+    }
+
+    /* 返回用户端按钮 - 与"前往红娘工作台"按钮样式一致 */
+    .back-to-user-btn {
+      height: 60rpx;
+      padding: 0 24rpx;
+      background: linear-gradient(135deg, #FF8A9B 0%, #FF6B8A 100%);
+      border-radius: 30rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4rpx 12rpx rgba(255, 107, 138, 0.3);
+      transition: all 0.3s ease;
+
+      &:active {
+        transform: scale(0.95);
+        box-shadow: 0 2rpx 8rpx rgba(255, 107, 138, 0.3);
+      }
+
+      .btn-text {
+        font-size: 26rpx;
+        color: #FFFFFF;
+        font-weight: bold;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  padding: 20rpx 20rpx 120rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 欢迎卡片 + 统计卡片合并 */
+.welcome-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+
+  .welcome-text {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+
+    .welcome-title {
+      font-size: 38rpx;
+      color: #333;
+    }
+
+    .heart-icon {
+      font-size: 32rpx;
+    }
+
+    .matchmaker-name {
+      font-size: 40rpx;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .avatar {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
+
+/* 统计卡片 */
+.stats-cards {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 20rpx;
+
+  .stats-card {
+    flex: 1;
+    padding: 25rpx;
+    border-radius: 15rpx;
+    background: #FFFFFF;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+    .stats-row {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+      margin-bottom: 8rpx;
+    }
+
+    .stats-number {
+      font-size: 48rpx;
+      font-weight: bold;
+    }
+
+    .stats-tag {
+      font-size: 20rpx;
+      padding: 4rpx 12rpx;
+      border-radius: 6rpx;
+      font-weight: 500;
+
+      &.orange {
+        color: #FF6B8A;
+        border: 1rpx solid #FF6B8A;
+        background: rgba(255, 107, 138, 0.1);
+      }
+
+      &.purple {
+        color: #9C27B0;
+        border: 1rpx solid #9C27B0;
+        background: rgba(156, 39, 176, 0.1);
+      }
+    }
+
+    .stats-label {
+      display: block;
+      font-size: 28rpx;
+      margin-bottom: 8rpx;
+    }
+
+    .stats-subtitle {
+      display: block;
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    .stats-extra {
+      display: block;
+      font-size: 22rpx;
+      color: #999;
+      margin-top: 8rpx;
+    }
+
+    &.success {
+      .stats-number {
+        color: #FF6B8A;
+      }
+
+      .stats-label {
+        color: #333;
+      }
+    }
+
+    &.points {
+      .stats-number {
+        color: #9C27B0;
+      }
+
+      .stats-label {
+        color: #333;
+      }
+    }
+  }
+}
+
+/* 公告卡片 */
+.announcement-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 35rpx 30rpx;
+  min-height: 80rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+
+  .announcement-tag {
+    display: inline-block;
+    background: #FF9800;
+    color: #FFFFFF;
+    font-size: 22rpx;
+    padding: 6rpx 16rpx;
+    border-radius: 12rpx;
+    margin-right: 15rpx;
+    font-weight: bold;
+  }
+
+  .announcement-content {
+    flex: 1;
+    font-size: 26rpx;
+    color: #333;
+    line-height: 1.4;
+  }
+
+  .arrow-right {
+    width: 24rpx;
+    height: 24rpx;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-left: 15rpx;
+  }
+}
+
+/* 功能菜单 */
+.menu-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 25rpx;
+  padding: 35rpx 20rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  .menu-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15rpx;
+
+    .menu-icon {
+      width: 90rpx;
+      height: 90rpx;
+      border-radius: 50%;
+      background-size: 50rpx 50rpx;
+      background-repeat: no-repeat;
+      background-position: center;
+
+      &.resources {
+        background-color: #E8F5E9;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
+      }
+
+      &.quality {
+        background-color: #FFF3E0;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
+      }
+
+      &.courses {
+        background-color: #E3F2FD;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19h14v-2H5v2zm0-4h14v-2H5v2zm0-4h14v-2H5v2z"/></svg>');
+      }
+
+      &.mall {
+        background-color: #F3E5F5;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
+      }
+
+      &.activity {
+        background-color: #FFEBEE;
+        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
+      }
+    }
+
+    .menu-text {
+      font-size: 26rpx;
+      color: #333;
+    }
+  }
+}
+
+/* 本周最佳红娘 */
+.best-matchmaker-section {
+  flex: 1;
+  min-height: 400rpx;
+  padding: 30rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20rpx;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      font-size: 30rpx;
+      font-weight: bold;
+      color: red;
+
+      .crown-icon {
+        font-size: 32rpx;
+        margin-right: 10rpx;
+      }
+    }
+
+    .section-more {
+      font-size: 24rpx;
+      color: #9C27B0;
+    }
+  }
+
+  .best-matchmaker-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+
+    .best-matchmaker-item {
+      display: flex;
+      align-items: center;
+      gap: 20rpx;
+      padding: 30rpx 25rpx;
+      background: #FAFAFA;
+      border-radius: 15rpx;
+      min-height: 100rpx;
+
+      .rank-number {
+        width: 45rpx;
+        height: 45rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #FFF;
+        border-radius: 50%;
+        background: #FFD700;
+
+        &.rank-1 {
+          background: #FFD700;
+        }
+
+        &.rank-2 {
+          background: #C0C0C0;
+        }
+
+        &.rank-3 {
+          background: #CD7F32;
+        }
+      }
+
+      .avatar-small {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        background: #F0F0F0;
+      }
+
+      .matchmaker-info {
+        flex: 1;
+
+        .matchmaker-name-small {
+          display: block;
+          font-size: 32rpx;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 8rpx;
+        }
+
+        .success-count {
+          display: block;
+          font-size: 26rpx;
+          color: #999;
+        }
+      }
+
+      .likes-info {
+        display: flex;
+        align-items: center;
+        gap: 10rpx;
+
+        .heart-small {
+          font-size: 28rpx;
+        }
+
+        .like-count {
+          font-size: 28rpx;
+          color: #E91E63;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+/* 底部导航 */
+.tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  background: #FFFFFF;
+  border-top: 1rpx solid #F0F0F0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .tabbar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+    padding: 10rpx 0;
+
+    .tabbar-icon {
+      width: 44rpx;
+      height: 44rpx;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      position: relative;
+
+      .badge {
+        position: absolute;
+        top: -8rpx;
+        right: -8rpx;
+        background: #FF4444;
+        color: #FFFFFF;
+        font-size: 20rpx;
+        font-weight: bold;
+        width: 32rpx;
+        height: 32rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16rpx;
+      }
+    }
+
+    .tabbar-text {
+      font-size: 20rpx;
+      color: #999;
+    }
+
+    &.active {
+      .tabbar-text {
+        color: #9C27B0;
+        font-weight: bold;
+      }
+    }
+
+    &.home .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
+    }
+
+    &.resources .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
+    }
+
+    &.active.resources .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
+    }
+
+    &.trophy .tabbar-icon {
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
+    }
+
+    &.active.trophy .tabbar-icon {
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
+    }
+
+    &.message .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
+    }
+
+    &.active.message .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
+    }
+
+    &.mine .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
+    }
+
+    &.active.mine .tabbar-icon {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
+    }
+  }
+}
 </style>

LiangZhiYUMao/pages/message/chat.vue

@@ -487,6 +487,25 @@ export default {
   },
 
   methods: {
+    /**
+     * 根据语音时长计算语音气泡宽度
+     */
+    getVoiceWidth(duration) {
+      // 基础宽度 120rpx，每秒增加 10rpx，最大 300rpx
+      const baseWidth = 120;
+      const perSecondWidth = 10;
+      const maxWidth = 300;
+      const minWidth = 120;
+      
+      const seconds = parseInt(duration) || 0;
+      let width = baseWidth + seconds * perSecondWidth;
+      
+      // 限制在最小和最大范围内
+      width = Math.max(minWidth, Math.min(maxWidth, width));
+      
+      return width + 'rpx';
+    },
+    
     /**
      * 红娘入口：根据当前登录用户ID获取红娘资料并设置头像
      */

service/websocket/src/main/java/com/zhentao/controller/ChatFriendController.java

@@ -6,6 +6,7 @@ import com.zhentao.vo.ResultVo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.List;
 import java.util.Map;
 
 @RestController
@@ -57,4 +58,38 @@ public class ChatFriendController {
         }
     }
 
+    /**
+     * 更新好友备注
+     * @param params 包含userId、friendId、remark的JSON对象
+     * @return 操作结果
+     */
+    @PostMapping("/updateRemark")
+    public ResultVo updateRemark(@RequestBody Map<String, Object> params) {
+        Long userId = Long.parseLong(params.get("userId").toString());
+        Long friendId = Long.parseLong(params.get("friendId").toString());
+        String remark = params.get("remark").toString();
+        
+        boolean result = chatFriendService.updateRemark(userId, friendId, remark);
+        if (result) {
+            return ResultVo.success("备注更新成功");
+        } else {
+            return ResultVo.fail("备注更新失败");
+        }
+    }
+
+    /**
+     * 批量获取好友备注
+     * @param params 包含userId和friendIds的JSON对象
+     * @return 备注列表
+     */
+    @PostMapping("/batchGetRemarks")
+    public ResultVo batchGetRemarks(@RequestBody Map<String, Object> params) {
+        Long userId = Long.parseLong(params.get("userId").toString());
+        @SuppressWarnings("unchecked")
+        List<String> friendIds = (List<String>) params.get("friendIds");
+        
+        List<Map<String, Object>> remarks = chatFriendService.batchGetRemarks(userId, friendIds);
+        return ResultVo.success("查询成功", remarks);
+    }
+
 }

service/websocket/src/main/java/com/zhentao/service/ChatFriendService.java

@@ -5,6 +5,9 @@ import com.zhentao.entity.ChatFriend;
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.zhentao.vo.ResultVo;
 
+import java.util.List;
+import java.util.Map;
+
 /**
 * @author 26621
 * @description 针对表【chat_friend(好友关系表)】的数据库操作Service
@@ -21,4 +24,8 @@ public interface ChatFriendService extends IService<ChatFriend> {
     ResultVo getblocklist(Long userId);
 
     boolean removeFromBlacklist(Long userId, Long blockedUserId);
+
+    boolean updateRemark(Long userId, Long friendId, String remark);
+
+    List<Map<String, Object>> batchGetRemarks(Long userId, List<String> friendIds);
 }

service/websocket/src/main/java/com/zhentao/service/impl/ChatFriendServiceImpl.java

@@ -20,7 +20,9 @@ import org.springframework.stereotype.Service;
 
 import java.util.ArrayList;
 import java.util.Date;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 /**
 * @author 26621
@@ -150,6 +152,77 @@ public class ChatFriendServiceImpl extends ServiceImpl<ChatFriendMapper, ChatFri
         return this.updateById(chatFriend);
     }
 
+    @Override
+    public boolean updateRemark(Long userId, Long friendId, String remark) {
+        // 1. 查询好友关系记录
+        LambdaQueryWrapper<ChatFriend> queryWrapper = new LambdaQueryWrapper<>();
+        queryWrapper.eq(ChatFriend::getUserId, userId)
+                .eq(ChatFriend::getFriendId, friendId)
+                .eq(ChatFriend::getIsDeleted, 0); // 未删除的记录
+
+        ChatFriend chatFriend = this.getOne(queryWrapper);
+
+        if (chatFriend == null) {
+            // 如果不存在好友关系，创建一个新的记录
+            chatFriend = new ChatFriend();
+            chatFriend.setUserId(userId);
+            chatFriend.setFriendId(friendId);
+            chatFriend.setFriendName(remark);
+            chatFriend.setStatus(1); // 正常状态
+            chatFriend.setIsDeleted(0);
+            chatFriend.setCreateTime(new Date());
+            chatFriend.setUpdateTime(new Date());
+            return this.save(chatFriend);
+        } else {
+            // 更新现有记录的备注
+            chatFriend.setFriendName(remark);
+            chatFriend.setUpdateTime(new Date());
+            return this.updateById(chatFriend);
+        }
+    }
+
+    @Override
+    public List<Map<String, Object>> batchGetRemarks(Long userId, List<String> friendIds) {
+        List<Map<String, Object>> result = new ArrayList<>();
+        
+        if (friendIds == null || friendIds.isEmpty()) {
+            return result;
+        }
+        
+        // 转换friendIds为Long类型
+        List<Long> friendIdList = new ArrayList<>();
+        for (String friendId : friendIds) {
+            try {
+                friendIdList.add(Long.parseLong(friendId));
+            } catch (NumberFormatException e) {
+                // 忽略无效的ID
+            }
+        }
+        
+        if (friendIdList.isEmpty()) {
+            return result;
+        }
+        
+        // 批量查询备注
+        LambdaQueryWrapper<ChatFriend> queryWrapper = new LambdaQueryWrapper<>();
+        queryWrapper.eq(ChatFriend::getUserId, userId)
+                .in(ChatFriend::getFriendId, friendIdList)
+                .eq(ChatFriend::getIsDeleted, 0)
+                .isNotNull(ChatFriend::getFriendName);
+        
+        List<ChatFriend> chatFriends = this.list(queryWrapper);
+        
+        // 转换为Map格式
+        for (ChatFriend chatFriend : chatFriends) {
+            Map<String, Object> map = new HashMap<>();
+            map.put("friendId", chatFriend.getFriendId().toString());
+            map.put("friendName", chatFriend.getFriendName());
+            result.add(map);
+        }
+        
+        return result;
+    }
+
 
 
     public void deleteChatConversation(BlockDto dto){