更新红娘端页面

LiangZhiYUMao/pages/matchmaker-workbench/index.vue

@@ -7,8 +7,10 @@
 				<view class="search-icon" @click="handleSearch"></view>
 				<!-- 退出红娘工作台按钮 -->
 				<view class="exit-workbench-btn" @click="openExitPopup">
-					<text class="switch-icon">🔄</text>
-					<text class="switch-text">切换首页</text>
+					<view class="arrow-container">
+						<view class="arrow arrow-top"></view>
+						<view class="arrow arrow-bottom"></view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -19,7 +21,7 @@
 				<view class="welcome-text">
 					<text class="welcome-title">欢迎回来</text>
 					<text class="heart-icon">❤️</text>
-					<text class="matchmaker-name">{{makerName}}</text>
+					<text class="matchmaker-name">高红娘</text>
 				</view>
 				<view class="avatar"></view>
 			</view>
@@ -27,22 +29,27 @@
 			<!-- 统计卡片 -->
 			<view class="stats-cards">
 				<view class="stats-card success">
-					<text class="stats-number">520</text>
+					<view class="stats-row">
+						<text class="stats-number">520</text>
+						<text class="stats-tag orange">撮合达人</text>
+					</view>
 					<text class="stats-label">成功撮合</text>
 					<text class="stats-subtitle">匹配数</text>
 				</view>
 				<view class="stats-card points">
-					<text class="stats-number">23</text>
-					<text class="stats-label">积分可兑礼</text>
-					<text class="stats-subtitle">我的积分</text>
-					<text class="stats-extra">可兑换</text>
+					<view class="stats-row">
+						<text class="stats-number">23</text>
+						<text class="stats-tag purple">积分可兑礼</text>
+					</view>
+					<text class="stats-label">我的积分</text>
+					<text class="stats-subtitle">可兑换</text>
 				</view>
 			</view>
 
 			<!-- 公告卡片 -->
-			<view class="announcement-card" v-if="currentAnnouncement" @click="handleAnnouncement">
+			<view class="announcement-card" @click="handleAnnouncement" v-if="currentAnnouncement">
 				<text class="announcement-tag">公告</text>
-				<text class="announcement-content">{{ currentAnnouncement.content || '恭喜高红娘成功助力丁先生和贾女士牵手成功！' }}</text>
+				<text class="announcement-content">{{ currentAnnouncement.content }}</text>
 				<view class="arrow-right"></view>
 			</view>
 			<view class="announcement-card" v-else>
@@ -136,8 +143,7 @@ export default {
 			return {
 				bestMatchmakers: [],
 				announcements: [],
-				currentAnnouncementIndex: 0,
-				makerName:uni.getStorageSync("userInfo").nickname
+				currentAnnouncementIndex: 0
 			}
 		},
 		computed: {
@@ -263,527 +269,483 @@ export default {
 
 	/* 顶部导航栏 */
 	.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 {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        /* 退出工作台按钮样式 */
-        .exit-workbench-btn {
-          position: relative;
-          width: auto;
-          height: auto;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: transparent;
-          border-radius: 0;
-          transition: all 0.3s ease;
-          padding: 10rpx 20rpx;
-          color: #E91E63;
-          font-weight: 600;
-          border: 2rpx solid #E91E63;
-          border-radius: 25rpx;
-          margin-left: 20rpx;
-
-          &:active {
-            opacity: 0.8;
-            transform: scale(0.98);
-            background: rgba(233, 30, 99, 0.1);
-          }
-
-          .switch-icon {
-            font-size: 28rpx;
-            margin-right: 8rpx;
-          }
-
-          .switch-text {
-            font-size: 26rpx;
-            color: #E91E63;
-            font-weight: 600;
-          }
-        }
-      }
-    }
-
-    .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: 25rpx 30rpx;
-      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;
-      padding: 30rpx;
-      background: #FFFFFF;
-      border-radius: 20rpx;
-      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-      display: flex;
-      flex-direction: column;
-
-      .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;
-        justify-content: space-between;
-
-        .best-matchmaker-item {
-          display: flex;
-          align-items: center;
-          gap: 20rpx;
-          padding: 25rpx 20rpx;
-          background: #FAFAFA;
-          border-radius: 15rpx;
-
-          .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>');
-        }
-      }
-    }
-  }
+		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>');
+			}
+		}
+	}
+
+	.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: 25rpx 30rpx;
+		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;
+		padding: 30rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+		display: flex;
+		flex-direction: column;
+
+		.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;
+			justify-content: space-between;
+
+			.best-matchmaker-item {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				padding: 25rpx 20rpx;
+				background: #FAFAFA;
+				border-radius: 15rpx;
+
+				.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/matchmaker-workbench/my-resources.vue

@@ -1,92 +1,77 @@
 <template>
-	<view class="my-resources" :class="{ 'dark-mode': isDarkTheme }">
+	<view class="my-resources">
 		<!-- 顶部导航栏 -->
 		<view class="header">
 			<text class="header-title">我的资源</text>
 			<view class="header-right">
 				<text class="dropdown-arrow">▼</text>
-				<text class="dropdown-icon">▼</text>
 			</view>
 		</view>
 
 		<!-- 搜索栏 -->
 		<view class="search-bar">
 			<view class="search-input-wrapper">
-				<text class="search-icon">🔍</text>
-				<input type="text" class="search-input" placeholder="请输入人搜索关键词" v-model="searchKeyword" @input="handleSearch" />
+				<view class="search-icon-small"></view>
+				<input type="text" class="search-input" placeholder="请输入搜索关键词" v-model="searchKeyword" @input="handleSearch" />
 			</view>
 		</view>
 
 		<scroll-view scroll-y class="content">
 			<!-- 资源列表 -->
-			<view class="resource-item" v-for="(item, index) in resources" :key="index" @click="handleViewUserDetail(item)">
-				<!-- 优质资源标签 -->
-				<view class="quality-tag" v-if="item.isQuality">
-					<text class="quality-star">★</text>
-					<text class="quality-text">优质资源</text>
-				</view>
-
-				<!-- 头部：头像 + 名字/性别 + 审核状态 -->
+			<view class="resource-item" v-for="(item, index) in resources" :key="index">
+				<!-- 右上角选中图标 -->
+				<view class="select-icon">✓-</view>
+				
 				<view class="resource-header">
-					<image
-						v-if="item.avatar"
-						:src="item.avatar"
-						mode="aspectFill"
+					<image 
+						:src="item.avatar" 
+						mode="aspectFill" 
 						class="resource-avatar"
 						@error="handleImageError(index)"
 						@load="handleImageLoad(index)"
 						:lazy-load="true"
 					></image>
-					<view v-else class="resource-avatar-placeholder"></view>
-
-					<view class="resource-info">
-						<view class="name-gender-row">
+					<view class="resource-basic-info">
+						<view class="name-gender">
 							<text class="resource-name">{{ item.name }}</text>
 							<text class="resource-gender">{{ item.gender }}</text>
+						</view>
+						<view class="status-tag-wrapper">
 							<text class="status-tag" :class="{ 'approved': item.status === '已审核', 'pending': item.status === '待审核' }">{{ item.status }}</text>
 						</view>
 					</view>
+				</view>
 
-					<!-- 右侧点赞/加号 -->
-					<view class="right-action" v-if="item.isPlus">
-						<text class="heart-icon">💗</text>
+				<view class="resource-details">
+					<view class="labels">
+						<text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
 					</view>
-				</view>
 
-				<!-- 标签 -->
-				<view class="labels-section">
-					<text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
-				</view>
+					<view class="requirement-box">
+						<text class="requirement-label">择偶要求:</text>
+						<text class="requirement-content">{{ item.requirement }}</text>
+					</view>
 
-				<!-- 择偶要求 -->
-				<view class="requirement-box">
-					<text class="requirement-label">择偶要求:</text>
-					<text class="requirement-content">{{ item.requirement }}</text>
-				</view>
+					<view class="contact-box">
+						<text class="contact-label">联系方式:</text>
+						<text class="contact-number">{{ item.contact }}</text>
+						<text class="copy-btn" @click.stop="handleCopy(item.contact)">复制</text>
+					</view>
 
-				<!-- 联系方式 -->
-				<view class="contact-box">
-					<text class="contact-label">联系方式:</text>
-					<text class="contact-number">{{ item.contact }}</text>
-					<text class="copy-btn" @click.stop="handleCopy(item.contact)">复制</text>
+					<view class="action-buttons">
+						<view class="delete-btn" @click.stop="handleDelete(item.id)">删除</view>
+						<view class="match-btn" @click.stop="handleMatch(item.id)">精准匹配</view>
+					</view>
 				</view>
 
-				<!-- 底部按钮 -->
-				<view class="action-buttons">
-					<view class="delete-btn" @click.stop="handleDelete(item.id)">删除</view>
-					<view class="match-btn" @click.stop="handleMatch(item.id)">精准匹配</view>
+				<!-- 优质资源标签 -->
+				<view class="quality-tag" v-if="item.isQuality">
+					<text class="quality-star">★</text>
+					<text class="quality-text">优质资源</text>
 				</view>
 			</view>
 		</scroll-view>
 
-		<!-- 底部优质资源按钮 -->
-		<view class="quality-resources-section fixed-bottom">
-			<view class="quality-resources-btn" @click="navigateToQualityResources">
-				<text class="btn-icon">⭐</text>
-				<text class="btn-text">优质资源</text>
-			</view>
-		</view>
-
 		<!-- 底部添加按钮 -->
 		<view class="add-button" @click="handleAdd">
 			<text class="add-button-icon">+</text>
@@ -94,26 +79,26 @@
 
 		<!-- 底部导航 -->
 		<view class="tabbar">
-			<view class="tabbar-item home" @click="navigateToWorkbench">
-				<view class="tabbar-icon"></view>
+			<view class="tabbar-item" @click="navigateToWorkbench">
+				<view class="tabbar-icon home"></view>
 				<text class="tabbar-text">工作台</text>
 			</view>
-			<view class="tabbar-item resources active" @click="navigateToMyResources">
-				<view class="tabbar-icon"></view>
+			<view class="tabbar-item active" @click="navigateToMyResources">
+				<view class="tabbar-icon resources"></view>
 				<text class="tabbar-text">我的资源</text>
 			</view>
-			<view class="tabbar-item trophy" @click="navigateToRanking">
-				<view class="tabbar-icon"></view>
+			<view class="tabbar-item" @click="navigateToRanking">
+				<view class="tabbar-icon trophy"></view>
 				<text class="tabbar-text">排行榜</text>
 			</view>
-			<view class="tabbar-item message" @click="navigateToMessage">
-				<view class="tabbar-icon">
-					<view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
+			<view class="tabbar-item" @click="navigateToMessage">
+				<view class="tabbar-icon message">
+					<view class="badge">3</view>
 				</view>
 				<text class="tabbar-text">消息</text>
 			</view>
-			<view class="tabbar-item mine" @click="navigateToMine">
-				<view class="tabbar-icon"></view>
+			<view class="tabbar-item" @click="navigateToMine">
+				<view class="tabbar-icon mine"></view>
 				<text class="tabbar-text">我的</text>
 			</view>
 		</view>
@@ -121,22 +106,20 @@
 </template>
 
 <script>
-import api from '@/utils/api.js'
-
+	import api from '@/utils/api.js'
+	
 export default {
 		data() {
 			return {
 				searchKeyword: '',
-				unreadCount: 3,
-				isDarkTheme: false,
 				resources: [
 					{
 						id: 1,
-						avatar: '',
+						avatar: 'https://example.com/avatar1.jpg',
 						name: '小高',
 						gender: '男',
 						status: '已审核',
-						isPlus: false,
+						isPlus: true,
 						labels: ['气质男', '小清新'],
 						requirement: '165+ 本科',
 						contact: '123****8912',
@@ -144,7 +127,7 @@ export default {
 					},
 					{
 						id: 2,
-						avatar: '',
+						avatar: 'https://example.com/avatar2.jpg',
 						name: '小美',
 						gender: '女',
 						status: '已审核',
@@ -156,7 +139,7 @@ export default {
 					},
 					{
 						id: 3,
-						avatar: '',
+						avatar: 'https://example.com/avatar3.jpg',
 						name: '阿强',
 						gender: '男',
 						status: '待审核',
@@ -169,12 +152,6 @@ export default {
 				]
 			}
 		},
-		onShow() {
-			const stored = uni.getStorageSync('matchmakerDarkMode')
-			if (stored === true || stored === false) {
-				this.isDarkTheme = stored
-			}
-		},
 		onLoad() {
 			// 加载我的资源数据
 			this.loadMyResources()
@@ -187,7 +164,7 @@ export default {
 				const userInfo = uni.getStorageSync('userInfo') || {}
 				const userId = uni.getStorageSync('userId')
 				const currentUserId = userInfo.userId || userId || null
-
+				
 				if (!currentUserId) {
 					console.error('无法获取当前登录用户ID')
 					uni.showToast({
@@ -196,28 +173,28 @@ export default {
 					})
 					return
 				}
-
+				
 				// 调用后端接口，传递当前用户ID作为matchmakerId
-				const baseUrl = process.env.NODE_ENV === 'development'
+				const baseUrl = process.env.NODE_ENV === 'development' 
 					? 'http://localhost:8083/api'  // 开发环境 - 通过网关
 					: 'https://your-domain.com/api'  // 生产环境
-
+				
 				// 构建查询参数
 				let url = `${baseUrl}/my-resource/list?currentUserId=${currentUserId}&pageNum=1&pageSize=100`
 				if (this.searchKeyword && this.searchKeyword.trim()) {
 					url += `&keyword=${encodeURIComponent(this.searchKeyword.trim())}`
 				}
-
+				
 				const [error, res] = await uni.request({
 					url: url,
 					method: 'GET'
 				})
-
+				
 				if (error) {
 					console.error('加载资源数据失败:', error)
 					return
 				}
-
+				
 				if (res.statusCode === 200 && res.data && res.data.code === 200) {
 					// 处理返回的数据
 					const pageData = res.data.data
@@ -241,7 +218,7 @@ export default {
 							if (item.house === 1) {
 								requirement += ' 有房'
 							}
-
+							
 							// 处理标签（可以根据实际需求扩展）
 							const labels = []
 							if (item.constellation) {
@@ -250,11 +227,11 @@ export default {
 							if (item.occupation) {
 								labels.push(item.occupation)
 							}
-
+							
 							// 处理头像URL：确保使用完整的URL
 							// 尝试多种可能的字段名
 							let avatarUrl = item.avatarUrl || item.avatar_url || item.avatar || ''
-
+							
 							console.log('=== 头像URL处理 ===')
 							console.log('资源ID:', item.resourceId, '姓名:', item.name)
 							console.log('原始数据字段:', {
@@ -264,7 +241,7 @@ export default {
 								'item完整对象': item
 							})
 							console.log('提取的avatarUrl值:', avatarUrl, '类型:', typeof avatarUrl, '是否为空:', !avatarUrl)
-
+							
 							// 如果头像URL为空或null，设置为空字符串（让CSS背景图显示）
 							if (!avatarUrl || avatarUrl.trim() === '' || avatarUrl === 'null' || avatarUrl === null || avatarUrl === undefined) {
 								avatarUrl = '' // 设置为空，让CSS默认背景显示
@@ -272,27 +249,27 @@ export default {
 							} else {
 								// 确保URL是完整的（如果已经是完整URL则直接使用）
 								avatarUrl = avatarUrl.trim()
-
+								
 								// 如果URL不是以http开头，可能需要拼接基础URL（根据实际情况调整）
 								if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
 									console.warn('⚠️ 头像URL不是完整URL，可能需要拼接:', avatarUrl)
 									// 如果是相对路径，可以尝试拼接MinIO基础URL
 									// avatarUrl = 'http://115.190.125.125:9000/' + avatarUrl
 								}
-
+								
 								// 确保MinIO URL可以正常访问（可能需要处理跨域）
 								// 如果MinIO配置了公共访问，直接使用URL即可
 								console.log('✅ 使用用户头像URL:', avatarUrl)
-
+								
 								// 验证URL格式
 								if (avatarUrl.includes('115.190.125.125:9000')) {
 									console.log('✅ 检测到MinIO URL，URL格式:', avatarUrl)
 								}
 							}
-
+							
 							console.log('最终设置的avatarUrl:', avatarUrl)
 							console.log('=== 头像URL处理结束 ===')
-
+							
 							return {
 								id: item.resourceId,
 								avatar: avatarUrl, // 使用处理后的头像URL
@@ -306,7 +283,7 @@ export default {
 								isQuality: false
 							}
 						})
-
+						
 						console.log('处理后的资源列表:', this.resources)
 					}
 				}
@@ -314,170 +291,157 @@ export default {
 				console.error('加载资源数据失败:', e)
 			}
 		},
-		// 搜索
-		async handleSearch() {
-			// 重新加载资源数据，包含搜索关键词
-			await this.loadMyResources()
-		},
-		// 复制联系方式
-		handleCopy(contact) {
-			uni.setClipboardData({
-				data: contact.replace(/\*+/g, ''),
-				success: () => {
-					uni.showToast({
-						title: '复制成功',
-						icon: 'success'
-					})
-				}
-			})
-		},
-		// 删除资源
-		handleDelete(id) {
-			uni.showModal({
-				title: '删除确认',
-				content: '确定要删除该资源吗？',
-				success: (res) => {
-					if (res.confirm) {
-						// 实现删除功能
-						console.log('删除资源:', id)
+			// 搜索
+			async handleSearch() {
+				// 重新加载资源数据，包含搜索关键词
+				await this.loadMyResources()
+			},
+			// 复制联系方式
+			handleCopy(contact) {
+				uni.setClipboardData({
+					data: contact.replace(/\*+/g, ''),
+					success: () => {
 						uni.showToast({
-							title: '删除成功',
+							title: '复制成功',
 							icon: 'success'
 						})
 					}
-				}
-			})
-		},
-		// 精准匹配
-		handleMatch(id) {
-			// 实现精准匹配功能
-			console.log('精准匹配:', id)
-			uni.navigateTo({
-				url: `/pages/matchmaker-workbench/precise-match?id=${id}`
-			})
-		},
-		// 添加资源
-		handleAdd() {
-			// 跳转到信息录入页面
-			uni.navigateTo({
-				url: '/pages/matchmaker-workbench/resource-input',
-				success: () => {
-					console.log('跳转到信息录入页面成功')
-				},
-				fail: (err) => {
-					console.error('跳转失败:', err)
-					uni.showToast({
-						title: '页面跳转失败',
-						icon: 'none'
-					})
-				}
-			})
-		},
-		// 导航到工作台
-		navigateToWorkbench() {
-			uni.navigateTo({
-				url: '/pages/matchmaker-workbench/index'
-			})
-		},
-		// 导航到我的资源
-		navigateToMyResources() {
-			// 已在我的资源页面，无需跳转
-		},
-		// 导航到排行榜
-		navigateToRanking() {
-			uni.navigateTo({
-				url: '/pages/matchmaker-workbench/ranking'
-			})
-		},
-		// 导航到消息
-		navigateToMessage() {
-			uni.navigateTo({
-				url: '/pages/matchmaker-workbench/message'
-			})
-		},
-		// 导航到我的
-		navigateToMine() {
-			uni.navigateTo({
-				url: '/pages/matchmaker-workbench/mine'
-			})
-		},
-		// 导航到优质资源
-		navigateToQualityResources() {
-			uni.navigateTo({
-				url: '/pages/matchmaker-workbench/quality-resources'
-			})
-		},
-		// 查看用户详情
-		handleViewUserDetail(item) {
-			// 跳转到客户详情页面，传递用户ID
-			uni.navigateTo({
-				url: `/pages/matchmaker-workbench/client-detail?id=${item.id}`
-			})
-		},
-		// 图片加载错误处理
-		handleImageError(index) {
-			try {
-				const resource = this.resources && this.resources[index]
-				if (!resource) {
-					console.warn('图片加载失败：资源不存在，index:', index)
-					return
-				}
-
-				const originalUrl = resource.avatar
-				console.error('❌ 图片加载失败:', {
-					index: index,
-					resourceName: resource.name,
-					resourceId: resource.id,
-					originalAvatarUrl: originalUrl,
-					'URL类型': typeof originalUrl,
-					'URL长度': originalUrl ? originalUrl.length : 0,
-					'是否包含placeholder': originalUrl && originalUrl.includes('placeholder'),
-					'完整resource对象': resource
 				})
-
-				// 如果图片加载失败，且不是已经设置的默认占位图，则设置为空（显示CSS背景）
-				// 避免重复设置导致循环
-				if (originalUrl &&
-					originalUrl.trim() !== '' &&
-					!originalUrl.includes('placeholder') &&
-					!originalUrl.includes('default') &&
-					!originalUrl.includes('via.placeholder')) {
-					// 设置为空字符串，让CSS默认背景显示
-					console.log('图片加载失败，将URL设置为空，显示CSS默认背景')
-					this.$set(this.resources[index], 'avatar', '')
-				} else {
-					console.log('图片加载失败，但URL已经是占位图或空，无需处理')
-					console.log('当前URL:', originalUrl)
-				}
-			} catch (e) {
-				console.error('处理图片错误时发生异常:', e)
-			}
-		},
-		// 图片加载成功处理
-		handleImageLoad(index) {
-			try {
-				if (this.resources && this.resources[index]) {
-					console.log('图片加载成功:', {
+			},
+			// 删除资源
+			handleDelete(id) {
+				uni.showModal({
+					title: '删除确认',
+					content: '确定要删除该资源吗？',
+					success: (res) => {
+						if (res.confirm) {
+							// 实现删除功能
+							console.log('删除资源:', id)
+							uni.showToast({
+								title: '删除成功',
+								icon: 'success'
+							})
+						}
+					}
+				})
+			},
+			// 精准匹配
+			handleMatch(id) {
+				// 实现精准匹配功能
+				console.log('精准匹配:', id)
+				uni.navigateTo({
+					url: `/pages/matchmaker-workbench/precise-match?id=${id}`
+				})
+			},
+			// 客户点击事件，跳转到客户详情页面
+			handleClientClick(id) {
+				uni.navigateTo({
+					url: `/pages/matchmaker-workbench/client-detail?id=${id}`
+				})
+			},
+			// 添加资源
+			handleAdd() {
+				// 跳转到信息录入页面
+				uni.navigateTo({
+					url: '/pages/matchmaker-workbench/resource-input',
+					success: () => {
+						console.log('跳转到信息录入页面成功')
+					},
+					fail: (err) => {
+						console.error('跳转失败:', err)
+						uni.showToast({
+							title: '页面跳转失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+			// 导航到工作台
+			navigateToWorkbench() {
+				uni.navigateTo({
+					url: '/pages/matchmaker-workbench/index'
+				})
+			},
+			// 导航到我的资源
+			navigateToMyResources() {
+				// 已在我的资源页面，无需跳转
+			},
+			// 导航到排行榜
+			navigateToRanking() {
+				uni.navigateTo({
+					url: '/pages/matchmaker-workbench/ranking'
+				})
+			},
+			// 导航到消息
+			navigateToMessage() {
+				uni.navigateTo({
+					url: '/pages/matchmaker-workbench/message'
+				})
+			},
+			// 导航到我的
+			navigateToMine() {
+				uni.navigateTo({
+					url: '/pages/matchmaker-workbench/mine'
+				})
+			},
+			// 图片加载错误处理
+			handleImageError(index) {
+				try {
+					const resource = this.resources && this.resources[index]
+					if (!resource) {
+						console.warn('图片加载失败：资源不存在，index:', index)
+						return
+					}
+					
+					const originalUrl = resource.avatar
+					console.error('❌ 图片加载失败:', {
 						index: index,
-						resource: this.resources[index]?.name,
-						avatarUrl: this.resources[index]?.avatar
+						resourceName: resource.name,
+						resourceId: resource.id,
+						originalAvatarUrl: originalUrl,
+						'URL类型': typeof originalUrl,
+						'URL长度': originalUrl ? originalUrl.length : 0,
+						'是否包含placeholder': originalUrl && originalUrl.includes('placeholder'),
+						'完整resource对象': resource
 					})
+					
+					// 如果图片加载失败，且不是已经设置的默认占位图，则设置为空（显示CSS背景）
+					// 避免重复设置导致循环
+					if (originalUrl && 
+						originalUrl.trim() !== '' && 
+						!originalUrl.includes('placeholder') && 
+						!originalUrl.includes('default') &&
+						!originalUrl.includes('via.placeholder')) {
+						// 设置为空字符串，让CSS默认背景显示
+						console.log('图片加载失败，将URL设置为空，显示CSS默认背景')
+						this.$set(this.resources[index], 'avatar', '')
+					} else {
+						console.log('图片加载失败，但URL已经是占位图或空，无需处理')
+						console.log('当前URL:', originalUrl)
+					}
+				} catch (e) {
+					console.error('处理图片错误时发生异常:', e)
+				}
+			},
+			// 图片加载成功处理
+			handleImageLoad(index) {
+				try {
+					if (this.resources && this.resources[index]) {
+						console.log('图片加载成功:', {
+							index: index,
+							resource: this.resources[index]?.name,
+							avatarUrl: this.resources[index]?.avatar
+						})
+					}
+				} catch (e) {
+					console.error('处理图片加载成功时发生异常:', e)
 				}
-			} catch (e) {
-				console.error('处理图片加载成功时发生异常:', e)
 			}
 		}
 	}
-}
 </script>
 
 <style lang="scss" scoped>
-.my-resources {
-	min-height: 100vh;
-	background: #FFF9F9;
-	display: flex;
-	flex-direction: column;
-}
 	.my-resources {
 		min-height: 100vh;
 		background: #F5F5F5;
@@ -485,14 +449,6 @@ export default {
 		flex-direction: column;
 	}
 
-/* 顶部导航栏 */
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 20rpx 30rpx;
-	padding-top: calc(20rpx + env(safe-area-inset-top));
-	background: #FFF9F9;
 	/* 顶部导航栏 */
 	.header {
 		display: flex;
@@ -508,11 +464,6 @@ export default {
 			font-weight: bold;
 			color: #9C27B0;
 		}
-	.header-title {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #9C27B0;
-	}
 
 	.header-right {
 		.dropdown-arrow {
@@ -522,589 +473,392 @@ export default {
 		}
 	}
 	}
-	.header-right {
-		.dropdown-icon {
+
+	/* 搜索栏 */
+	.search-bar {
+		padding: 20rpx;
+		background: #F5F5F5;
+
+		.search-input-wrapper {
+			display: flex;
+			align-items: center;
+			background: #FFFFFF;
+			border-radius: 30rpx;
+			padding: 12rpx 20rpx;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
+
+			.search-icon-small {
+				width: 32rpx;
+				height: 32rpx;
+				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>');
+				background-size: contain;
+				background-repeat: no-repeat;
+				background-position: center;
+				margin-right: 15rpx;
+			}
+
+			.search-input {
+				flex: 1;
+				font-size: 28rpx;
+				color: #333;
+				border: none;
+				outline: none;
+				background: transparent;
+
+				&::placeholder {
+					color: #999;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 0 20rpx 140rpx;
+	}
+
+	/* 资源列表 */
+	.resource-item {
+		background: #FFFFFF;
+		border-radius: 20rpx;
+		margin-bottom: 20rpx;
+		padding: 25rpx;
+		position: relative;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+		/* 右上角选中图标 */
+		.select-icon {
+			position: absolute;
+			top: 20rpx;
+			right: 20rpx;
+			width: 40rpx;
+			height: 40rpx;
+			background: #FF4444;
+			color: #FFFFFF;
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			font-size: 24rpx;
-			color: #9C27B0;
+			font-weight: bold;
+			z-index: 10;
+		}
+
+		.resource-header {
+			display: flex;
+			align-items: flex-start;
+			margin-bottom: 20rpx;
+			padding-right: 50rpx;
+
+			.resource-avatar {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 8rpx;
+				margin-right: 20rpx;
+				flex-shrink: 0;
+				background-color: #F5F5F5;
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23CCCCCC"><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>');
+				background-size: 60% 60%;
+				background-position: center;
+				background-repeat: no-repeat;
+			}
+
+			.resource-basic-info {
+				flex: 1;
+				min-width: 0;
+
+				.name-gender {
+					display: flex;
+					align-items: center;
+					gap: 10rpx;
+					margin-bottom: 12rpx;
+
+					.resource-name {
+						font-size: 30rpx;
+						font-weight: bold;
+						color: #333;
+					}
+
+					.resource-gender {
+						font-size: 26rpx;
+						color: #666;
+					}
+				}
+
+				.status-tag-wrapper {
+					display: flex;
+					align-items: center;
+
+					.status-tag {
+						display: inline-block;
+						padding: 4rpx 12rpx;
+						border-radius: 12rpx;
+						font-size: 22rpx;
+						font-weight: 500;
+
+						&.approved {
+							background: #E3F2FD;
+							color: #2196F3;
+						}
+
+						&.pending {
+							background: #FFF3E0;
+							color: #FF9800;
+						}
+					}
+				}
+			}
+		}
+
+		.resource-details {
+			.labels {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 10rpx;
+				margin-bottom: 15rpx;
+
+				.label {
+					display: inline-block;
+					padding: 6rpx 14rpx;
+					background: #F3E5F5;
+					color: #9C27B0;
+					border-radius: 15rpx;
+					font-size: 22rpx;
+					font-weight: 500;
+				}
+			}
+
+			.requirement-box {
+				background: #F3E5F5;
+				border-radius: 12rpx;
+				padding: 16rpx 20rpx;
+				margin-bottom: 15rpx;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.requirement-label {
+					font-size: 26rpx;
+					color: #7B1FA2;
+					font-weight: 500;
+					margin-right: 10rpx;
+					white-space: nowrap;
+				}
+
+				.requirement-content {
+					font-size: 26rpx;
+					color: #7B1FA2;
+					font-weight: 500;
+				}
+			}
+
+			.contact-box {
+				background: #F3E5F5;
+				border-radius: 12rpx;
+				padding: 16rpx 20rpx;
+				margin-bottom: 20rpx;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.contact-label {
+					font-size: 26rpx;
+					color: #7B1FA2;
+					font-weight: 500;
+					margin-right: 10rpx;
+					white-space: nowrap;
+				}
+
+				.contact-number {
+					flex: 1;
+					font-size: 26rpx;
+					color: #7B1FA2;
+					font-weight: 500;
+					min-width: 0;
+				}
+
+				.copy-btn {
+					font-size: 24rpx;
+					color: #9C27B0;
+					font-weight: 600;
+					margin-left: 15rpx;
+					white-space: nowrap;
+				}
+			}
+
+			.action-buttons {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				gap: 15rpx;
+
+				.delete-btn {
+					flex: 1;
+					padding: 14rpx 0;
+					background: #FFEBEE;
+					color: #E91E63;
+					border-radius: 25rpx;
+					font-size: 26rpx;
+					font-weight: 500;
+					text-align: center;
+				}
+
+				.match-btn {
+					flex: 1.5;
+					padding: 14rpx 0;
+					background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
+					color: #FFFFFF;
+					border-radius: 25rpx;
+					font-size: 26rpx;
+					font-weight: 500;
+					text-align: center;
+				}
+			}
+		}
+
+		/* 优质资源标签 */
+		.quality-tag {
+			position: absolute;
+			top: 80rpx;
+			right: 20rpx;
+			background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
+			color: #FFFFFF;
+			font-size: 22rpx;
+			font-weight: bold;
+			padding: 8rpx 16rpx;
+			border-radius: 20rpx;
+			display: flex;
+			align-items: center;
+			gap: 4rpx;
+			box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.3);
+			z-index: 5;
+
+			.quality-star {
+				font-size: 20rpx;
+			}
+
+			.quality-text {
+				font-size: 22rpx;
+			}
 		}
 	}
-}
 
-	/* 搜索栏 */
-	.search-bar {
-    padding: 20rpx;
-    background: #F5F5F5;
-    /* 搜索栏 */
-    .search-bar {
-      padding: 15rpx 20rpx;
-      background: #FFF9F9;
-
-      .search-input-wrapper {
-        display: flex;
-        align-items: center;
-        background: #FFFFFF;
-        border-radius: 30rpx;
-        padding: 12rpx 20rpx;
-        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
-
-        .search-input-wrapper {
-          display: flex;
-          align-items: center;
-          background: #FFFFFF;
-          border-radius: 25rpx;
-          padding: 12rpx 20rpx;
-          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-
-          .search-icon {
-            font-size: 28rpx;
-            margin-right: 12rpx;
-          }
-
-          .search-input {
-            flex: 1;
-            font-size: 26rpx;
-            color: #333;
-            border: none;
-            outline: none;
-            background: transparent;
-
-            &::placeholder {
-              color: #999;
-            }
-          }
-        }
-      }
-
-      .content {
-        flex: 1;
-        overflow-y: auto;
-        padding: 15rpx 20rpx 20rpx;
-      }
-
-      /* 优质资源按钮（紧贴加号按钮上方，稍微缩小） */
-      .quality-resources-section {
-        position: fixed;
-        right: 30rpx; /* 与加号按钮右边对齐 */
-        bottom: 240rpx; /* 在加号按钮正上方留一点间距 */
-        z-index: 999;
-
-        .quality-resources-btn {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8rpx;
-          padding: 14rpx 22rpx; /* 比之前的 20rpx 略小 */
-          background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
-          border-radius: 18rpx;
-          border: 2rpx solid #FFB74D;
-
-          .btn-icon {
-            font-size: 28rpx; /* 略小 */
-          }
-
-          .btn-text {
-            font-size: 24rpx; /* 略小 */
-            font-weight: bold;
-            color: #FF9800;
-          }
-        }
-      }
-
-      /* 资源卡片 */
-      .resource-item {
-        background: #FFFFFF;
-        border-radius: 16rpx;
-        margin-bottom: 15rpx;
-        padding: 20rpx;
-        position: relative;
-        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-
-        /* 右上角选中图标 */
-        .select-icon {
-          position: absolute;
-          top: 20rpx;
-          right: 20rpx;
-          width: 40rpx;
-          height: 40rpx;
-          background: #FF4444;
-          color: #FFFFFF;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 24rpx;
-          font-weight: bold;
-          z-index: 10;
-        }
-
-        .resource-header {
-          display: flex;
-          align-items: flex-start;
-          margin-bottom: 20rpx;
-          padding-right: 50rpx;
-          /* 优质资源标签 */
-          .quality-tag {
-            position: absolute;
-            top: 15rpx;
-            right: 15rpx;
-            background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
-            color: #FFFFFF;
-            font-size: 20rpx;
-            font-weight: bold;
-            padding: 6rpx 14rpx;
-            border-radius: 12rpx;
-          }
-
-          /* 头部：头像 + 名字/性别 + 审核状态 */
-          .resource-header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15rpx;
-            gap: 15rpx;
-
-            .resource-avatar {
-              width: 80rpx;
-              height: 80rpx;
-              border-radius: 50%;
-              flex-shrink: 0;
-              background: #E8E8E8;
-            }
-
-            .resource-avatar-placeholder {
-              width: 80rpx;
-              height: 80rpx;
-              border-radius: 50%;
-              flex-shrink: 0;
-              background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
-            }
-
-            .resource-avatar {
-              width: 100rpx;
-              height: 100rpx;
-              border-radius: 8rpx;
-              margin-right: 20rpx;
-              flex-shrink: 0;
-              background-color: #F5F5F5;
-              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23CCCCCC"><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>');
-              background-size: 60% 60%;
-              background-position: center;
-              background-repeat: no-repeat;
-            }
-
-            .resource-info {
-              flex: 1;
-
-              .resource-basic-info {
-                flex: 1;
-                min-width: 0;
-
-                .name-gender {
-                  display: flex;
-                  align-items: center;
-                  gap: 10rpx;
-                  margin-bottom: 12rpx;
-
-                  .name-gender-row {
-                    display: flex;
-                    align-items: center;
-                    gap: 10rpx;
-
-                    .resource-name {
-                      font-size: 30rpx;
-                      font-weight: bold;
-                      color: #333;
-                    }
-
-                    .resource-name {
-                      font-size: 28rpx;
-                      font-weight: bold;
-                      color: #333;
-                    }
-
-                    .resource-gender {
-                      font-size: 24rpx;
-                      color: #666;
-                    }
-
-                    .status-tag {
-                      display: inline-block;
-                      padding: 4rpx 12rpx;
-                      border-radius: 12rpx;
-                      font-size: 20rpx;
-                      font-weight: bold;
-
-                      .status-tag-wrapper {
-                        display: flex;
-                        align-items: center;
-
-                        .status-tag {
-                          display: inline-block;
-                          padding: 4rpx 12rpx;
-                          border-radius: 12rpx;
-                          font-size: 22rpx;
-                          font-weight: 500;
-
-                          &.approved {
-                            background: #E8F5E8;
-                            color: #4CAF50;
-                          }
-
-                          &.approved {
-                            background: #E3F2FD;
-                            color: #2196F3;
-                          }
-
-                          &.pending {
-                            background: #FFF3E0;
-                            color: #FF9800;
-                          }
-                        }
-                      }
-                    }
-
-                    .right-action {
-                      .heart-icon {
-                        font-size: 28rpx;
-
-                        &.pending {
-                          background: #FFF3E0;
-                          color: #FF9800;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              /* 标签 */
-              .labels-section {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 8rpx;
-                margin-bottom: 12rpx;
-
-                .label {
-                  display: inline-block;
-                  padding: 5rpx 14rpx;
-                  background: #F5F5F5;
-                  color: #666;
-                  border-radius: 12rpx;
-                  font-size: 22rpx;
-                }
-              }
-
-              /* 择偶要求 */
-              .requirement-section {
-                margin-bottom: 12rpx;
-
-                .requirement-text {
-                  font-size: 24rpx;
-                  color: #666;
-                  line-height: 1.4;
-                }
-              }
-
-              .label {
-                display: inline-block;
-                padding: 6rpx 14rpx;
-                background: #F3E5F5;
-                color: #9C27B0;
-                border-radius: 15rpx;
-                font-size: 22rpx;
-                font-weight: 500;
-              }
-            }
-
-            .requirement-box {
-              background: #F3E5F5;
-              border-radius: 12rpx;
-              padding: 16rpx 20rpx;
-              margin-bottom: 15rpx;
-              display: flex;
-              align-items: center;
-              flex-wrap: wrap;
-
-              .requirement-label {
-                font-size: 26rpx;
-                color: #7B1FA2;
-                font-weight: 500;
-                margin-right: 10rpx;
-                white-space: nowrap;
-              }
-
-              .requirement-content {
-                font-size: 26rpx;
-                color: #7B1FA2;
-                font-weight: 500;
-              }
-            }
-
-            /* 联系方式 */
-            .contact-section {
-              display: flex;
-              align-items: center;
-              margin-bottom: 15rpx;
-              gap: 8rpx;
-
-              .contact-box {
-                background: #F3E5F5;
-                border-radius: 12rpx;
-                padding: 16rpx 20rpx;
-                margin-bottom: 20rpx;
-                display: flex;
-                align-items: center;
-                flex-wrap: wrap;
-
-                .contact-label {
-                  font-size: 24rpx;
-                  color: #333;
-                  font-weight: bold;
-                }
-
-                .contact-label {
-                  font-size: 26rpx;
-                  color: #7B1FA2;
-                  font-weight: 500;
-                  margin-right: 10rpx;
-                  white-space: nowrap;
-                }
-
-                .contact-number {
-                  flex: 1;
-                  font-size: 24rpx;
-                  color: #9C27B0;
-                }
-
-                .contact-number {
-                  flex: 1;
-                  font-size: 26rpx;
-                  color: #7B1FA2;
-                  font-weight: 500;
-                  min-width: 0;
-                }
-
-                .copy-btn {
-                  font-size: 22rpx;
-                  color: #9C27B0;
-                  font-weight: bold;
-                }
-              }
-
-              .copy-btn {
-                font-size: 24rpx;
-                color: #9C27B0;
-                font-weight: 600;
-                margin-left: 15rpx;
-                white-space: nowrap;
-              }
-            }
-
-            .action-buttons {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              gap: 15rpx;
-              /* 底部按钮 */
-              .action-buttons {
-                display: flex;
-                justify-content: space-between;
-                gap: 12rpx;
-
-                .delete-btn {
-                  flex: 1;
-                  padding: 14rpx 0;
-                  background: #FFEBEE;
-                  color: #E91E63;
-                  border-radius: 25rpx;
-                  font-size: 26rpx;
-                  font-weight: 500;
-                  text-align: center;
-                }
-
-                .delete-btn {
-                  flex: 1;
-                  padding: 10rpx 20rpx;
-                  background: #FFEBEE;
-                  color: #E91E63;
-                  border-radius: 20rpx;
-                  font-size: 24rpx;
-                  font-weight: bold;
-                  text-align: center;
-                }
-
-                .match-btn {
-                  flex: 1.5;
-                  padding: 14rpx 0;
-                  background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
-                  color: #FFFFFF;
-                  border-radius: 25rpx;
-                  font-size: 26rpx;
-                  font-weight: 500;
-                  text-align: center;
-                }
-              }
-
-              .match-btn {
-                flex: 1;
-                padding: 10rpx 20rpx;
-                background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
-                color: #FFFFFF;
-                border-radius: 20rpx;
-                font-size: 24rpx;
-                font-weight: bold;
-                text-align: center;
-              }
-
-              /* 优质资源标签 */
-              .quality-tag {
-                position: absolute;
-                top: 80rpx;
-                right: 20rpx;
-                background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
-                color: #FFFFFF;
-                font-size: 22rpx;
-                font-weight: bold;
-                padding: 8rpx 16rpx;
-                border-radius: 20rpx;
-                display: flex;
-                align-items: center;
-                gap: 4rpx;
-                box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.3);
-                z-index: 5;
-
-                .quality-star {
-                  font-size: 20rpx;
-                }
-
-                .quality-text {
-                  font-size: 22rpx;
-                }
-              }
-            }
-          }
-        }
-
-        /* 添加按钮 */
-        .add-button {
-          position: fixed;
-          bottom: 130rpx;
-          right: 30rpx;
-          width: 90rpx;
-          height: 90rpx;
-          border-radius: 50%;
-          background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 4rpx 16rpx rgba(156, 39, 176, 0.3);
-          z-index: 1000;
-
-          .add-button-icon {
-            font-size: 50rpx;
-            color: #FFFFFF;
-            line-height: 1;
-            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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
-            }
-
-            &.home.active .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="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
-            }
-
-            &.resources .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="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>');
-            }
-
-            &.resources.active .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="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>');
-            }
-
-            &.trophy.active .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,<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>');
-            }
-
-            &.message.active .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="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,<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>');
-            }
-
-            &.mine.active .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="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>');
-            }
-          }
-        }
-      }
-    }
-  }
+	/* 添加按钮 */
+	.add-button {
+		position: fixed;
+		bottom: 130rpx;
+		right: 40rpx;
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50%;
+		background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 4rpx 20rpx rgba(156, 39, 176, 0.4);
+		z-index: 999;
+
+		.add-button-icon {
+			font-size: 60rpx;
+			color: #FFFFFF;
+			line-height: 1;
+			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="%23999"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
+			}
+
+			&.active.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="%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;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M18 6l-1.42 1.42-1.59-1.59L13 8.17l-1.42-1.42L9 8.17l-1.59-1.59L6 6l3 3V18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V9l3-3zm-4 12H8v-7.5l4-4 4 4V18z"/></svg>');
+			}
+
+			&.active.trophy .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="M18 6l-1.42 1.42-1.59-1.59L13 8.17l-1.42-1.42L9 8.17l-1.59-1.59L6 6l3 3V18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V9l3-3zm-4 12H8v-7.5l4-4 4 4V18z"/></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>