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="exit-workbench-btn" @click="openExitPopup">
					<text class="switch-icon">🔄</text>
					<text class="switch-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">{{makerName}}</text>
				</view>
				<view class="avatar"></view>
			</view>

			<!-- 统计卡片 -->
			<view class="stats-cards">
				<view class="stats-card success">
					<text class="stats-number">520</text>
					<text class="stats-label">成功撮合</text>
					<text class="stats-subtitle">匹配数</text>
				</view>
				<view class="stats-card points">
					<text class="stats-number">23</text>
					<text class="stats-label">积分可兑礼</text>
					<text class="stats-subtitle">我的积分</text>
					<text class="stats-extra">可兑换</text>
				</view>
			</view>

			<!-- 公告卡片 -->
			<view class="announcement-card" v-if="currentAnnouncement" @click="handleAnnouncement">
				<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">
						<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 class="badge">3</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
			}
		},
		computed: {
			currentAnnouncement() {
				return this.announcements.length > 0 ? this.announcements[this.currentAnnouncementIndex] : null
			}
		},
		onLoad() {
			this.loadRankingData()
			this.loadAnnouncements()
		},
		methods: {
			// 加载排行榜数据（取前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/activities/list'
				})
			},
			// 导航到排行榜
			navigateToRanking() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/ranking'
				})
			},
			// 导航到工作台
			navigateToWorkbench() {
				// 已在工作台，无需跳转
			},
			// 导航到消息
			navigateToMessage() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/message'
				})
			},
			// 导航到我的
			navigateToMine() {
				uni.navigateTo({
					url: '/pages/matchmaker-workbench/mine'
				})
			}
		}
	}
</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>');

        .exit-workbench-btn {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* 退出工作台按钮样式 */
        .exit-workbench-btn {
          position: relative;
          width: auto;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          background: transparent;
          border-radius: 0;
          transition: all 0.3s ease;
          padding: 10rpx 20rpx;
          color: #E91E63;
          font-weight: 600;
          border: 2rpx solid #E91E63;
          border-radius: 25rpx;
          margin-left: 20rpx;

          &:active {
            opacity: 0.8;
            transform: scale(0.98);
            background: rgba(233, 30, 99, 0.1);
          }

          .switch-icon {
            font-size: 28rpx;
            margin-right: 8rpx;
          }

          .switch-text {
            font-size: 26rpx;
            color: #E91E63;
            font-weight: 600;
          }
        }
      }
    }

    .content {
      flex: 1;
      padding: 20rpx 20rpx 120rpx;
      display: flex;
      flex-direction: column;
    }

    /* 欢迎卡片 + 统计卡片合并 */
    .welcome-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      .welcome-text {
        display: flex;
        align-items: center;
        gap: 10rpx;

        .welcome-title {
          font-size: 38rpx;
          color: #333;
        }

        .heart-icon {
          font-size: 32rpx;
        }

        .matchmaker-name {
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
        }
      }

      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
      }
    }

    /* 统计卡片 */
    .stats-cards {
      display: flex;
      gap: 20rpx;
      margin-bottom: 20rpx;

      .stats-card {
        flex: 1;
        padding: 25rpx;
        border-radius: 15rpx;
        background: #FFFFFF;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .stats-row {
          display: flex;
          align-items: center;
          gap: 10rpx;
          margin-bottom: 8rpx;
        }

        .stats-number {
          font-size: 48rpx;
          font-weight: bold;
        }

        .stats-tag {
          font-size: 20rpx;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
          font-weight: 500;

          &.orange {
            color: #FF6B8A;
            border: 1rpx solid #FF6B8A;
            background: rgba(255, 107, 138, 0.1);
          }

          &.purple {
            color: #9C27B0;
            border: 1rpx solid #9C27B0;
            background: rgba(156, 39, 176, 0.1);
          }
        }

        .stats-label {
          display: block;
          font-size: 28rpx;
          margin-bottom: 8rpx;
        }

        .stats-subtitle {
          display: block;
          font-size: 24rpx;
          color: #999;
        }

        .stats-extra {
          display: block;
          font-size: 22rpx;
          color: #999;
          margin-top: 8rpx;
        }

        &.success {
          .stats-number {
            color: #FF6B8A;
          }

          .stats-label {
            color: #333;
          }
        }

        &.points {
          .stats-number {
            color: #9C27B0;
          }

          .stats-label {
            color: #333;
          }
        }
      }
    }

    /* 公告卡片 */
    .announcement-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      position: relative;

      .announcement-tag {
        display: inline-block;
        background: #FF9800;
        color: #FFFFFF;
        font-size: 22rpx;
        padding: 6rpx 16rpx;
        border-radius: 12rpx;
        margin-right: 15rpx;
        font-weight: bold;
      }

      .announcement-content {
        flex: 1;
        font-size: 26rpx;
        color: #333;
        line-height: 1.4;
      }

      .arrow-right {
        width: 24rpx;
        height: 24rpx;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 15rpx;
      }
    }

    /* 功能菜单 */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 25rpx;
      padding: 35rpx 20rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15rpx;

        .menu-icon {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          background-size: 50rpx 50rpx;
          background-repeat: no-repeat;
          background-position: center;

          &.resources {
            background-color: #E8F5E9;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
          }

          &.quality {
            background-color: #FFF3E0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
          }

          &.courses {
            background-color: #E3F2FD;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19h14v-2H5v2zm0-4h14v-2H5v2zm0-4h14v-2H5v2z"/></svg>');
          }

          &.mall {
            background-color: #F3E5F5;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
          }

          &.activity {
            background-color: #FFEBEE;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
          }
        }

        .menu-text {
          font-size: 26rpx;
          color: #333;
        }
      }
    }

    /* 本周最佳红娘 */
    .best-matchmaker-section {
      flex: 1;
      padding: 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .section-title {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          font-weight: bold;
          color: red;

          .crown-icon {
            font-size: 32rpx;
            margin-right: 10rpx;
          }
        }

        .section-more {
          font-size: 24rpx;
          color: #9C27B0;
        }
      }

      .best-matchmaker-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .best-matchmaker-item {
          display: flex;
          align-items: center;
          gap: 20rpx;
          padding: 25rpx 20rpx;
          background: #FAFAFA;
          border-radius: 15rpx;

          .rank-number {
            width: 45rpx;
            height: 45rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #FFF;
            border-radius: 50%;
            background: #FFD700;

            &.rank-1 {
              background: #FFD700;
            }

            &.rank-2 {
              background: #C0C0C0;
            }

            &.rank-3 {
              background: #CD7F32;
            }
          }

          .avatar-small {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            background: #F0F0F0;
          }

          .matchmaker-info {
            flex: 1;

            .matchmaker-name-small {
              display: block;
              font-size: 32rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 8rpx;
            }

            .success-count {
              display: block;
              font-size: 26rpx;
              color: #999;
            }
          }

          .likes-info {
            display: flex;
            align-items: center;
            gap: 10rpx;

            .heart-small {
              font-size: 28rpx;
            }

            .like-count {
              font-size: 28rpx;
              color: #E91E63;
              font-weight: bold;
            }
          }
        }
      }
    }

    /* 底部导航 */
    .tabbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100rpx;
      background: #FFFFFF;
      border-top: 1rpx solid #F0F0F0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: env(safe-area-inset-bottom);

      .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;
        padding: 10rpx 0;

        .tabbar-icon {
          width: 44rpx;
          height: 44rpx;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          position: relative;

          .badge {
            position: absolute;
            top: -8rpx;
            right: -8rpx;
            background: #FF4444;
            color: #FFFFFF;
            font-size: 20rpx;
            font-weight: bold;
            width: 32rpx;
            height: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx;
          }
        }

        .tabbar-text {
          font-size: 20rpx;
          color: #999;
        }

        &.active {
          .tabbar-text {
            color: #9C27B0;
            font-weight: bold;
          }
        }

        &.home .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
        }

        &.resources .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
        }

        &.active.resources .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
        }

        &.trophy .tabbar-icon {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
        }

        &.active.trophy .tabbar-icon {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
        }

        &.message .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
        }

        &.active.message .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
        }

        &.mine .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
        }

        &.active.mine .tabbar-icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
        }
      }
    }
  }
</style>