xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/index.vue

<template>
  <view class="matchmaker-workbench">
	   <view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFF9F9'}"></view>
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="header-title">红娘工作台</text>
      <view class="header-right">
        <!-- 返回用户端按钮 - 修改为与"前往红娘工作台"一致的样式 -->
        <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="function-grid">
        <view class="grid-item" 
              v-for="item in functionList" 
              :key="item.id"
              @click="navigateToFunction(item)">
          <view class="grid-icon-wrapper" :style="{ background: item.gradient || item.bgColor || '#FFE5F1' }">
            <text class="grid-icon" :style="{ color: item.iconColor || '#333333' }">{{ item.icon }}</text>
          </view>
          <text class="grid-text">{{ item.name }}</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'

export default {
		data() {
				return {
					statusBarHeight: 0,
					bestMatchmakers: [],
					announcements: [],
					currentAnnouncementIndex: 0,
					makerName: uni.getStorageSync("userInfo").nickname,
					matchmakerInfo: {
						realName: '',
						avatarUrl: '',
						successCouples: 0,
						points: 0
					},
					// 金刚区功能列表（从数据库获取）
					functionList: []
				}
		},
		computed: {
			currentAnnouncement() {
				return this.announcements.length > 0 ? this.announcements[this.currentAnnouncementIndex] : null
			},
			// 全局未读消息数（来自用户端已配置的 Vuex）
			unreadCount() {
				return this.$store.getters.getTotalUnread || 0
			}
		},
		onLoad() {
				this.loadMatchmakerInfo()
				this.loadRankingData()
				this.loadAnnouncements()
				this.loadFunctionGridData()
				//获取状态栏高度
				  const systemInfo = uni.getSystemInfoSync()
				  this.statusBarHeight = systemInfo.statusBarHeight
			},
		methods: {
			// 加载当前登录红娘信息
			async loadMatchmakerInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo || !userInfo.userId) {
						
						return
					}
					
					// 根据userId获取红娘信息
					const res = await api.matchmaker.getByUserId(userInfo.userId)
				
					
					// 解析返回数据（可能被包装在data字段中）
					let matchmaker = res
					if (res && res.data) {
						matchmaker = res.data
					}
					
					
					
					if (matchmaker && (matchmaker.matchmakerId || matchmaker.matchmaker_id)) {
						// 获取红娘ID
						const matchmakerId = matchmaker.matchmakerId || matchmaker.matchmaker_id
						
						this.matchmakerInfo = {
							realName: matchmaker.realName || matchmaker.real_name || userInfo.nickname,
							avatarUrl: matchmaker.avatarUrl || matchmaker.avatar_url || userInfo.avatarUrl,
							successCouples: matchmaker.successCouples || matchmaker.success_couples || 0,
							points: matchmaker.points || 0
						}
						
						// 将matchmakerId保存到userInfo中，供其他页面使用
						userInfo.matchmakerId = matchmakerId
						uni.setStorageSync('userInfo', userInfo)
						
					} 
				} catch (e) {
					
				}
			},
			
			// 加载排行榜数据（取前3名）
			async loadRankingData() {
				try {
					const res = await api.matchmaker.getRankingData({ limit: 20 })
					let list = []
					if (res && Array.isArray(res)) {
						list = res
					} else if (res && res.data && Array.isArray(res.data)) {
						list = res.data
					}
					// 只取前3名显示
					this.bestMatchmakers = list.slice(0, 3)
				} catch (e) {
					
				}
			},
			// 加载公告数据
				async loadAnnouncements() {
					try {
						const res = await api.home.getNotices()
						if (res && Array.isArray(res)) {
							this.announcements = res
						} else if (res && res.data && Array.isArray(res.data)) {
							this.announcements = res.data
						}
						// 如果有多条公告，自动轮播
						if (this.announcements.length > 1) {
							this.startAnnouncementCarousel()
						}
					} catch (e) {
						
					}
				},
					
				// 加载金刚区功能数据
				async loadFunctionGridData() {
			try {
				// 获取红娘端金刚区功能列表
				
				const res = await api.home.getFunctionGridByType('matchmaker')
			
				
				// 由于api.js中的request函数已经处理了响应，res直接是res.data.data或res.data
				if (Array.isArray(res)) {
					this.functionList = res
					
				} else if (res && res.code === 200 && Array.isArray(res.data)) {
					this.functionList = res.data
					
				} else {
				
					this.functionList = []
				}
			} catch (e) {
				c
				this.functionList = []
			}
		},
			// 公告轮播
			startAnnouncementCarousel() {
				setInterval(() => {
					this.currentAnnouncementIndex = (this.currentAnnouncementIndex + 1) % this.announcements.length
				}, 5000)
			},
			// 公告点击
			handleAnnouncement() {
				if (this.currentAnnouncement) {
					uni.navigateTo({
						url: '/pages/announcement/list'
					})
				}
			},
			// 导航到我的资源
			navigateToMyResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/my-resources'
				})
			},
			// 导航到优质资源
			navigateToQualityResources() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/quality-resources'
				})
			},
			// 导航到课程培训
			navigateToCourses() {
				uni.navigateTo({
					url: '/pages/courses/list'
				})
			},
			// 导航到积分商城
			navigateToPointsMall() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/points-mall'
				})
			},
			// 导航到活动中心
				navigateToActivityCenter() {
					uni.navigateTo({
						url: '/pages/matchmaker-workbench/activities'
					})
				},
					
				// 通用功能导航方法
				navigateToFunction(item) {
					uni.navigateTo({
						url: item.path
					})
				},
			// 导航到排行榜
			navigateToRanking() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/ranking'
				})
			},
			// 跳转到红娘详情
			goToMatchmakerDetail(item) {
				if (!item) return
				const id = item.matchmaker_id || item.matchmakerId
				if (id) {
					uni.navigateTo({
						url: `/pages/matchmakers/detail?id=${id}`
					})
				}
			},
			// 导航到工作台
			navigateToWorkbench() {
				// 已在工作台，无需跳转
			},
			// 导航到消息
			navigateToMessage() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/message'
				})
			},
			// 导航到我的
			navigateToMine() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/mine'
				})
			},
			// 返回用户端首页
			openExitPopup() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 搜索
			handleSearch() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matchmaker-workbench {
		min-height: 100vh;
		background: #FFF9F9;
		display: flex;
		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));
  padding: 25rpx 30rpx;
  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: 33rpx;
      height: 33rpx;
      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;
	  margin-right: 80px;

      &: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;
  }
}

/* 核心功能入口 */
.function-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20rpx;
  margin: 20rpx 10rpx;
  padding: 25rpx 15rpx;
  background: #fefeff;
  border-radius: 20rpx;
  border: 2rpx solid #f0f0f5;
  box-shadow: 0 4rpx 16rpx rgba(220, 220, 240, 0.2);
  box-sizing: border-box;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 15rpx 8rpx;
  transition: all 0.3s ease;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #fff 0%, #fdfdff 100%);
  box-shadow: 0 2rpx 8rpx rgba(220, 220, 240, 0.15);
  flex: 1;
  min-width: 0;
  box-sizing: border-box;

  &:hover,
  &:active {
    transform: translateY(-4rpx) scale(0.98);
    background: linear-gradient(180deg, #fff 0%, #f8f8ff 100%);
    box-shadow: 0 6rpx 18rpx rgba(200, 200, 230, 0.25);
  }
}

/* 为不同功能定制图标容器底色（贴合功能主题） */
.grid-item:nth-child(1) .grid-icon-wrapper {
  background: linear-gradient(135deg, #ff85a2 0%, #ff5d8f 100%);
}
.grid-item:nth-child(2) .grid-icon-wrapper {
  background: linear-gradient(135deg, #85cfff 0%, #5daaff 100%);
}
.grid-item:nth-child(3) .grid-icon-wrapper {
  background: linear-gradient(135deg, #ffc885 0%, #ffaa5d 100%);
}
.grid-item:nth-child(4) .grid-icon-wrapper {
  background: linear-gradient(135deg, #ff85d2 0%, #ff5daa 100%);
}

.grid-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 3rpx 10rpx rgba(255, 255, 255, 0.4),
              0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.grid-icon-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.7) 0%, 
    rgba(255, 255, 255, 0.3) 40%, 
    transparent 80%);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

.grid-icon {
  font-size: 80rpx;
  color: #fff;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.15));
}

.grid-text {
  font-size: 22rpx;
  font-weight: 600;
  color: #2d2d46;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

/* 响应式适配：小屏自动改为2列 */
@media (max-width: 600rpx) {
  .grid-item {
    min-width: calc(50% - 15rpx);
    max-width: calc(50% - 15rpx);
  }
}

/* 本周最佳红娘 */
.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>