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">
					<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">高红娘</text>
				</view>
				<view class="avatar"></view>
			</view>

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

			<!-- 公告卡片 -->
			<view class="announcement-card" @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">
						<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
			}
		},
		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>');
			}
		}
	}

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