|
|
@@ -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>
|
