|
|
@@ -1,715 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="teacher-dashboard">
|
|
|
- <!-- 数据概览卡片 -->
|
|
|
- <el-row :gutter="24" class="stat-row">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="stat-card">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%)">
|
|
|
- <i class="el-icon-user-solid"></i>
|
|
|
- </div>
|
|
|
- <div class="stat-content">
|
|
|
- <div class="stat-value">{{ stats.serviceFamilyCount }}</div>
|
|
|
- <div class="stat-label">服务家庭</div>
|
|
|
- <div class="stat-trend up">
|
|
|
- <i class="el-icon-top"></i> 12%
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="stat-card">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #10B981 0%, #34D399 100%)">
|
|
|
- <i class="el-icon-s-data"></i>
|
|
|
- </div>
|
|
|
- <div class="stat-content">
|
|
|
- <div class="stat-value">{{ stats.activeFamilyCount }}</div>
|
|
|
- <div class="stat-label">活跃家庭</div>
|
|
|
- <div class="stat-trend up">
|
|
|
- <i class="el-icon-top"></i> 8%
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="stat-card">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)">
|
|
|
- <i class="el-icon-coin"></i>
|
|
|
- </div>
|
|
|
- <div class="stat-content">
|
|
|
- <div class="stat-value">{{ formatPriceWithSymbol(stats.monthlySales) }}</div>
|
|
|
- <div class="stat-label">本月销售额</div>
|
|
|
- <div class="stat-trend up">
|
|
|
- <i class="el-icon-top"></i> 23%
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="stat-card">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%)">
|
|
|
- <i class="el-icon-wallet"></i>
|
|
|
- </div>
|
|
|
- <div class="stat-content">
|
|
|
- <div class="stat-value">{{ formatPriceWithSymbol(stats.myCommission) }}</div>
|
|
|
- <div class="stat-label">我的佣金</div>
|
|
|
- <div class="stat-trend neutral">
|
|
|
- <i class="el-icon-minus"></i> 0%
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 快捷操作 & 今日概览 -->
|
|
|
- <el-row :gutter="24" class="section-row">
|
|
|
- <el-col :span="8">
|
|
|
- <el-card class="quick-actions-card">
|
|
|
- <div slot="header" class="card-header">
|
|
|
- <span class="card-title">快捷操作</span>
|
|
|
- </div>
|
|
|
- <div class="quick-actions">
|
|
|
- <div class="action-item" @click="$router.push('/teacher-families')">
|
|
|
- <div class="action-icon" style="background: #EBF5FF">
|
|
|
- <i class="el-icon-user" style="color: #3B82F6"></i>
|
|
|
- </div>
|
|
|
- <span>管理家庭</span>
|
|
|
- </div>
|
|
|
- <div class="action-item" @click="$router.push('/teacher-messages')">
|
|
|
- <div class="action-icon" style="background: #ECFDF5">
|
|
|
- <i class="el-icon-chat-line-round" style="color: #10B981"></i>
|
|
|
- </div>
|
|
|
- <span>消息中心</span>
|
|
|
- </div>
|
|
|
- <div class="action-item" @click="$router.push('/teacher-orders')">
|
|
|
- <div class="action-icon" style="background: #FFFBEB">
|
|
|
- <i class="el-icon-document" style="color: #F59E0B"></i>
|
|
|
- </div>
|
|
|
- <span>查看订单</span>
|
|
|
- </div>
|
|
|
- <div class="action-item" @click="$router.push('/teacher-assessment')">
|
|
|
- <div class="action-icon" style="background: #F5F3FF">
|
|
|
- <i class="el-icon-edit-outline" style="color: #8B5CF6"></i>
|
|
|
- </div>
|
|
|
- <span>DAN测评</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="16">
|
|
|
- <el-card class="today-overview-card">
|
|
|
- <div slot="header" class="card-header">
|
|
|
- <span class="card-title">今日概览</span>
|
|
|
- <span class="card-date">{{ todayDate }}</span>
|
|
|
- </div>
|
|
|
- <div class="today-stats">
|
|
|
- <div class="today-stat-item">
|
|
|
- <div class="today-stat-value" style="color: #3B82F6">{{ todayStats.newFamilies }}</div>
|
|
|
- <div class="today-stat-label">新增家庭</div>
|
|
|
- </div>
|
|
|
- <div class="today-stat-item">
|
|
|
- <div class="today-stat-value" style="color: #10B981">{{ todayStats.completedTasks }}</div>
|
|
|
- <div class="today-stat-label">完成任务</div>
|
|
|
- </div>
|
|
|
- <div class="today-stat-item">
|
|
|
- <div class="today-stat-value" style="color: #F59E0B">{{ todayStats.newOrders }}</div>
|
|
|
- <div class="today-stat-label">新订单</div>
|
|
|
- </div>
|
|
|
- <div class="today-stat-item">
|
|
|
- <div class="today-stat-value" style="color: #8B5CF6">{{ todayStats.pendingReviews }}</div>
|
|
|
- <div class="today-stat-label">待审核</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 家庭列表 & 团队列表 -->
|
|
|
- <el-row :gutter="24" class="section-row">
|
|
|
- <el-col :span="12">
|
|
|
- <el-card class="list-card">
|
|
|
- <div slot="header" class="card-header">
|
|
|
- <span class="card-title">我的家庭</span>
|
|
|
- <el-button type="text" @click="$router.push('/teacher-families')">查看全部 <i class="el-icon-arrow-right"></i></el-button>
|
|
|
- </div>
|
|
|
- <div class="family-list">
|
|
|
- <div v-for="family in families" :key="family.id" class="family-item">
|
|
|
- <div class="family-avatar">
|
|
|
- <i class="el-icon-house"></i>
|
|
|
- </div>
|
|
|
- <div class="family-info">
|
|
|
- <div class="family-name">{{ family.familyName || '家庭' + family.familyId }}</div>
|
|
|
- <div class="family-meta">
|
|
|
- <span class="meta-tag"><i class="el-icon-user"></i> {{ family.childrenCount || 0 }}个孩子</span>
|
|
|
- <span class="meta-tag success"><i class="el-icon-circle-check"></i> 服务中</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="family-stats">
|
|
|
- <div class="completion-ring">
|
|
|
- <el-progress type="circle" :percentage="family.taskCompletionRate || 0" :width="50" :stroke-width="4"
|
|
|
- :color="getCompletionColor(family.taskCompletionRate || 0)">
|
|
|
- </el-progress>
|
|
|
- </div>
|
|
|
- <div class="completion-label">完成率</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="families.length === 0" class="empty-state">
|
|
|
- <i class="el-icon-folder-delete"></i>
|
|
|
- <p>暂无服务家庭</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-card class="list-card">
|
|
|
- <div slot="header" class="card-header">
|
|
|
- <span class="card-title">我的团队</span>
|
|
|
- <el-button type="text" @click="$router.push('/teacher-team')">查看全部 <i class="el-icon-arrow-right"></i></el-button>
|
|
|
- </div>
|
|
|
- <div class="team-list">
|
|
|
- <div v-for="member in teamMembers" :key="member.id" class="team-item">
|
|
|
- <div class="member-avatar">
|
|
|
- <i class="el-icon-user"></i>
|
|
|
- </div>
|
|
|
- <div class="member-info">
|
|
|
- <div class="member-name">{{ member.nickname || '规划师' + member.id }}</div>
|
|
|
- <div class="member-level">
|
|
|
- <el-tag size="mini" :type="getLevelType(member.level)" effect="dark">{{ member.level || '初级' }}</el-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="member-performance">
|
|
|
- <div class="performance-value">{{ formatPriceWithSymbol(member.monthlySales || 0) }}</div>
|
|
|
- <div class="performance-label">本月业绩</div>
|
|
|
- </div>
|
|
|
- <div class="member-trend" :class="member.trend >= 0 ? 'up' : 'down'">
|
|
|
- <i :class="member.trend >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
|
|
|
- {{ Math.abs(member.trend || 0) }}%
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="teamMembers.length === 0" class="empty-state">
|
|
|
- <i class="el-icon-user-solid"></i>
|
|
|
- <p>暂无团队成员</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 最近订单 -->
|
|
|
- <el-row :gutter="24" class="section-row">
|
|
|
- <el-col :span="24">
|
|
|
- <el-card class="orders-card">
|
|
|
- <div slot="header" class="card-header">
|
|
|
- <span class="card-title">最近订单</span>
|
|
|
- <el-button type="text" @click="$router.push('/teacher-orders')">查看全部 <i class="el-icon-arrow-right"></i></el-button>
|
|
|
- </div>
|
|
|
- <el-table :data="recentOrders" stripe style="width: 100%" class="orders-table">
|
|
|
- <el-table-column prop="orderNo" label="订单号" width="200">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="order-no">{{ scope.row.orderNo }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="familyName" label="家庭">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="family-cell">
|
|
|
- <i class="el-icon-house"></i>
|
|
|
- {{ scope.row.familyName }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="packageName" label="套餐">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag size="small" effect="plain">{{ scope.row.packageName }}</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="amount" label="金额" width="120">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span class="amount-value">{{ formatPriceWithSymbol(scope.row.amount) }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="status" label="状态" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag :type="getStatusType(scope.row.status)" size="small" effect="dark">
|
|
|
- {{ scope.row.status }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="createdAt" label="时间" width="160"></el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { getBoundFamilies, getTeamMembers, getGuideOrders, getGuideDashboardStats } from '@/api/guide'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'TeacherDashboard',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- stats: {
|
|
|
- serviceFamilyCount: 0,
|
|
|
- activeFamilyCount: 0,
|
|
|
- monthlySales: 0,
|
|
|
- myCommission: 0
|
|
|
- },
|
|
|
- families: [],
|
|
|
- teamMembers: [],
|
|
|
- recentOrders: [],
|
|
|
- todayStats: {
|
|
|
- newFamilies: 0,
|
|
|
- completedTasks: 0,
|
|
|
- newOrders: 0,
|
|
|
- pendingReviews: 0
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- todayDate() {
|
|
|
- const now = new Date()
|
|
|
- return `${now.getMonth() + 1}月${now.getDate()}日 ${['周日', '周一', '周二', '周三', '周四', '周五', '周六'][now.getDay()]}`
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async loadData() {
|
|
|
- try {
|
|
|
- const results = await Promise.all([
|
|
|
- getBoundFamilies().catch(err => { console.error('获取家庭列表失败:', err); return { data: [] } }),
|
|
|
- getTeamMembers().catch(err => { console.error('获取团队成员失败:', err); return { data: [] } }),
|
|
|
- getGuideOrders().catch(err => { console.error('获取订单失败:', err); return { data: { records: [] } } }),
|
|
|
- getGuideDashboardStats().catch(err => { console.error('获取统计数据失败:', err); return { data: {} } })
|
|
|
- ])
|
|
|
- const [familyRes, teamRes, orderRes, statsRes] = results
|
|
|
- if (familyRes.data) {
|
|
|
- this.families = familyRes.data.slice(0, 5)
|
|
|
- this.stats.serviceFamilyCount = familyRes.data.length
|
|
|
- this.stats.activeFamilyCount = familyRes.data.filter(f => f.status === 'active').length
|
|
|
- }
|
|
|
- if (teamRes.data) {
|
|
|
- this.teamMembers = teamRes.data.slice(0, 5).map(m => ({
|
|
|
- ...m,
|
|
|
- trend: 0
|
|
|
- }))
|
|
|
- }
|
|
|
- if (orderRes.data && orderRes.data.records) {
|
|
|
- this.recentOrders = orderRes.data.records.slice(0, 10)
|
|
|
- const totalSales = orderRes.data.records.reduce((sum, o) => sum + (o.amount || 0), 0)
|
|
|
- this.stats.monthlySales = totalSales
|
|
|
- this.stats.myCommission = Math.round(totalSales * 0.1)
|
|
|
- this.todayStats.newOrders = orderRes.data.records.filter(o => {
|
|
|
- const today = new Date().toDateString()
|
|
|
- return new Date(o.createdAt).toDateString() === today
|
|
|
- }).length
|
|
|
- }
|
|
|
- if (statsRes.data) {
|
|
|
- this.todayStats.newFamilies = statsRes.data.totalFamilies || 0
|
|
|
- this.todayStats.completedTasks = statsRes.data.todayCompletedTasks || 0
|
|
|
- this.todayStats.pendingReviews = statsRes.data.pendingReviewTasks || 0
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.error(e)
|
|
|
- }
|
|
|
- },
|
|
|
- getCompletionColor(rate) {
|
|
|
- if (rate >= 80) return '#10B981'
|
|
|
- if (rate >= 50) return '#F59E0B'
|
|
|
- return '#EF4444'
|
|
|
- },
|
|
|
- getLevelType(level) {
|
|
|
- const map = {
|
|
|
- '初级': '',
|
|
|
- '中级': 'success',
|
|
|
- '高级': 'warning'
|
|
|
- }
|
|
|
- return map[level] || ''
|
|
|
- },
|
|
|
- getStatusType(status) {
|
|
|
- const map = {
|
|
|
- '已完成': 'success',
|
|
|
- '待支付': 'warning',
|
|
|
- '已取消': 'info'
|
|
|
- }
|
|
|
- return map[status] || 'info'
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.teacher-dashboard {
|
|
|
- padding: 24px;
|
|
|
- background: #F0F7FF;
|
|
|
- min-height: calc(100vh - 120px);
|
|
|
-}
|
|
|
-
|
|
|
-/* 统计卡片 */
|
|
|
-.stat-row {
|
|
|
- margin-bottom: 24px;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-card {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20px 24px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
|
|
|
- border: none;
|
|
|
- transition: all 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-card:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
|
|
|
-}
|
|
|
-
|
|
|
-.stat-icon {
|
|
|
- width: 56px;
|
|
|
- height: 56px;
|
|
|
- border-radius: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 16px;
|
|
|
- font-size: 24px;
|
|
|
- color: #FFFFFF;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-value {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 700;
|
|
|
- color: #1E293B;
|
|
|
- line-height: 1.2;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-label {
|
|
|
- font-size: 14px;
|
|
|
- color: #64748B;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-trend {
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-trend.up {
|
|
|
- color: #10B981;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-trend.down {
|
|
|
- color: #EF4444;
|
|
|
-}
|
|
|
-
|
|
|
-.stat-trend.neutral {
|
|
|
- color: #64748B;
|
|
|
-}
|
|
|
-
|
|
|
-/* 快捷操作 */
|
|
|
-.quick-actions-card,
|
|
|
-.today-overview-card,
|
|
|
-.list-card,
|
|
|
-.orders-card {
|
|
|
- border-radius: 16px;
|
|
|
- border: none;
|
|
|
- box-shadow: 0 2px 12px rgba(59, 130, 246, 0.06);
|
|
|
-}
|
|
|
-
|
|
|
-.quick-actions-card .el-card__header,
|
|
|
-.today-overview-card .el-card__header,
|
|
|
-.list-card .el-card__header,
|
|
|
-.orders-card .el-card__header {
|
|
|
- border-bottom: 1px solid #F1F5F9;
|
|
|
- padding: 16px 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.card-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.card-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1E293B;
|
|
|
-}
|
|
|
-
|
|
|
-.card-date {
|
|
|
- font-size: 13px;
|
|
|
- color: #64748B;
|
|
|
-}
|
|
|
-
|
|
|
-.quick-actions {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.action-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 16px;
|
|
|
- background: #F8FAFC;
|
|
|
- border-radius: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
-}
|
|
|
-
|
|
|
-.action-item:hover {
|
|
|
- background: #F1F5F9;
|
|
|
- transform: translateY(-2px);
|
|
|
-}
|
|
|
-
|
|
|
-.action-icon {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- border-radius: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 8px;
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.action-item span {
|
|
|
- font-size: 13px;
|
|
|
- color: #64748B;
|
|
|
-}
|
|
|
-
|
|
|
-/* 今日概览 */
|
|
|
-.today-stats {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(4, 1fr);
|
|
|
- gap: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.today-stat-item {
|
|
|
- text-align: center;
|
|
|
- padding: 12px;
|
|
|
- background: #F8FAFC;
|
|
|
- border-radius: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.today-stat-value {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 700;
|
|
|
-}
|
|
|
-
|
|
|
-.today-stat-label {
|
|
|
- font-size: 13px;
|
|
|
- color: #64748B;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 家庭列表 */
|
|
|
-.family-list {
|
|
|
- max-height: 340px;
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.family-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 14px 0;
|
|
|
- border-bottom: 1px solid #F1F5F9;
|
|
|
-}
|
|
|
-
|
|
|
-.family-item:last-child {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-
|
|
|
-.family-avatar {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
|
|
- border-radius: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.family-name {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
- color: #1E293B;
|
|
|
-}
|
|
|
-
|
|
|
-.family-meta {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.meta-tag {
|
|
|
- font-size: 12px;
|
|
|
- color: #64748B;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.meta-tag.success {
|
|
|
- color: #10B981;
|
|
|
-}
|
|
|
-
|
|
|
-.family-stats {
|
|
|
- margin-left: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.completion-ring {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.completion-label {
|
|
|
- font-size: 11px;
|
|
|
- color: #64748B;
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 团队列表 */
|
|
|
-.team-list {
|
|
|
- max-height: 340px;
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.team-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 14px 0;
|
|
|
- border-bottom: 1px solid #F1F5F9;
|
|
|
-}
|
|
|
-
|
|
|
-.team-item:last-child {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-
|
|
|
-.member-avatar {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.member-name {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
- color: #1E293B;
|
|
|
-}
|
|
|
-
|
|
|
-.member-level {
|
|
|
- margin-top: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.member-performance {
|
|
|
- margin-left: auto;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-
|
|
|
-.performance-value {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1E293B;
|
|
|
-}
|
|
|
-
|
|
|
-.performance-label {
|
|
|
- font-size: 11px;
|
|
|
- color: #64748B;
|
|
|
-}
|
|
|
-
|
|
|
-.member-trend {
|
|
|
- margin-left: 16px;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 500;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.member-trend.up {
|
|
|
- color: #10B981;
|
|
|
-}
|
|
|
-
|
|
|
-.member-trend.down {
|
|
|
- color: #EF4444;
|
|
|
-}
|
|
|
-
|
|
|
-/* 订单表格 */
|
|
|
-.orders-table {
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.order-no {
|
|
|
- font-family: 'Monaco', 'Menlo', monospace;
|
|
|
- color: #64748B;
|
|
|
-}
|
|
|
-
|
|
|
-.family-cell {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
-}
|
|
|
-
|
|
|
-.family-cell i {
|
|
|
- color: #3B82F6;
|
|
|
-}
|
|
|
-
|
|
|
-.amount-value {
|
|
|
- font-weight: 600;
|
|
|
- color: #1E293B;
|
|
|
-}
|
|
|
-
|
|
|
-/* 空状态 */
|
|
|
-.empty-state {
|
|
|
- text-align: center;
|
|
|
- padding: 48px 0;
|
|
|
- color: #94A3B8;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-state i {
|
|
|
- font-size: 48px;
|
|
|
- margin-bottom: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.empty-state p {
|
|
|
- font-size: 14px;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* 滚动条 */
|
|
|
-.family-list::-webkit-scrollbar,
|
|
|
-.team-list::-webkit-scrollbar {
|
|
|
- width: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.family-list::-webkit-scrollbar-thumb,
|
|
|
-.team-list::-webkit-scrollbar-thumb {
|
|
|
- background: #CBD5E1;
|
|
|
- border-radius: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.section-row {
|
|
|
- margin-bottom: 24px;
|
|
|
-}
|
|
|
-</style>
|