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

<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="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'

export default {
  data() {
    return {
      bestMatchmakers: [],
      announcements: [],
      currentAnnouncementIndex: 0,
      makerName: uni.getStorageSync("userInfo").nickname,
      matchmakerInfo: {
        realName: '',
        avatarUrl: '',
        successCouples: 0,
        points: 0
      }
    }
  },
  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()
  },
  methods: {
    // 加载当前登录红娘信息
    async loadMatchmakerInfo() {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.userId) {
          console.log('未登录，无法获取红娘信息')
          return
        }

        // 根据userId获取红娘信息
        const res = await api.matchmaker.getByUserId(userInfo.userId)
        console.log('红娘信息原始返回:', res)

        // 解析返回数据（可能被包装在data字段中）
        let matchmaker = res
        if (res && res.data) {
          matchmaker = res.data
        }

        console.log('解析后红娘信息:', matchmaker)

        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)
          console.log('设置红娘信息:', this.matchmakerInfo, '红娘ID:', matchmakerId)
        } else {
          console.log('未找到红娘信息，使用默认值')
        }
      } catch (e) {
        console.error('加载红娘信息失败:', 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) {
        console.error('加载排行榜数据失败:', 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) {
        console.error('加载公告失败:', e)
      }
    },
    // 公告轮播
    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'
      })
    },
    // 导航到排行榜
    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() {
      console.log('搜索')
    }
  }
}
</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));
  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>