ACS
This commit is contained in:
@@ -0,0 +1,892 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 统计卡片 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(card, index) in statisticsCards" :key="index">
|
||||
<el-card class="stat-card" :class="card.class" shadow="hover">
|
||||
<div class="card-top">
|
||||
<div class="card-meta">
|
||||
<div class="card-title">{{ card.title }}</div>
|
||||
<div class="card-value">{{ card.value }}</div>
|
||||
</div>
|
||||
<div class="card-icon">
|
||||
<el-icon><component :is="card.icon" /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span>较昨日</span>
|
||||
<span :class="card.trend > 0 ? 'up' : 'down'">
|
||||
{{ card.trend > 0 ? '+' : '' }}{{ card.trend }}%
|
||||
<el-icon v-if="card.trend > 0"><arrow-up /></el-icon>
|
||||
<el-icon v-else><arrow-down /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-inner" :style="{width: card.progress + '%', background: card.progressColor}"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 图表部分 -->
|
||||
<el-row :gutter="24" class="chart-row">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
||||
<el-card class="chart-card" shadow="hover">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">
|
||||
<h3>销售趋势</h3>
|
||||
<p>本期销售数据分析与预测</p>
|
||||
</div>
|
||||
<div class="chart-actions">
|
||||
<el-radio-group v-model="salesRange" size="small">
|
||||
<el-radio-button label="week">本周</el-radio-button>
|
||||
<el-radio-button label="month">本月</el-radio-button>
|
||||
<el-radio-button label="year">全年</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-dropdown class="chart-more">
|
||||
<el-button size="small" text>
|
||||
<el-icon><more-filled /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-icon><download /></el-icon> 导出数据
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-icon><refresh /></el-icon> 刷新
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-icon><setting /></el-icon> 配置
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-overview">
|
||||
<div class="overview-item">
|
||||
<span class="label">总销售额</span>
|
||||
<span class="value">¥ 893,204</span>
|
||||
<span class="rate up">+21.5%</span>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<span class="label">平均订单额</span>
|
||||
<span class="value">¥ 5,618</span>
|
||||
<span class="rate up">+6.8%</span>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<span class="label">转化周期</span>
|
||||
<span class="value">24天</span>
|
||||
<span class="rate down">-2.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" ref="salesChartRef"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||||
<el-card class="chart-card" shadow="hover">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">
|
||||
<h3>客户构成</h3>
|
||||
<p>客户群体分布情况</p>
|
||||
</div>
|
||||
<el-dropdown class="chart-more">
|
||||
<el-button size="small" text>
|
||||
<el-icon><more-filled /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-icon><download /></el-icon> 导出数据
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-icon><refresh /></el-icon> 刷新
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="customer-legend">
|
||||
<div v-for="(item, index) in customerData" :key="index" class="legend-item">
|
||||
<span class="legend-color" :style="{background: item.color}"></span>
|
||||
<span class="legend-label">{{ item.name }}</span>
|
||||
<span class="legend-value">{{ item.percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container" ref="customerChartRef"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 最近活动和待办事项 -->
|
||||
<el-row :gutter="24" class="activity-row">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||
<el-card class="activity-card" shadow="hover">
|
||||
<div class="card-header-custom">
|
||||
<div class="header-left">
|
||||
<h3>最近活动</h3>
|
||||
<el-badge :value="activities.length" class="badge" type="primary" />
|
||||
</div>
|
||||
<el-link type="primary" :underline="false" class="view-all">
|
||||
查看全部 <el-icon class="el-icon--right"><right /></el-icon>
|
||||
</el-link>
|
||||
</div>
|
||||
<div class="timeline-container">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:timestamp="activity.timestamp"
|
||||
:type="activity.type"
|
||||
:hollow="index !== 0"
|
||||
:size="index === 0 ? 'large' : 'normal'"
|
||||
>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">{{ activity.content }}</div>
|
||||
<div class="timeline-detail" v-if="activity.detail">{{ activity.detail }}</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||
<el-card class="todo-card" shadow="hover">
|
||||
<div class="card-header-custom">
|
||||
<div class="header-left">
|
||||
<h3>待办事项</h3>
|
||||
<el-tag type="danger" size="small" effect="dark" class="task-tag">{{ todoList.length }} 任务</el-tag>
|
||||
</div>
|
||||
<el-button type="primary" size="small" plain class="add-btn">
|
||||
<el-icon><plus /></el-icon> 添加
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="todo-filter">
|
||||
<el-radio-group v-model="todoFilter" size="small">
|
||||
<el-radio-button label="all">全部</el-radio-button>
|
||||
<el-radio-button label="today">今日</el-radio-button>
|
||||
<el-radio-button label="important">重要</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-dropdown>
|
||||
<el-button size="small" text>
|
||||
<el-icon><filter /></el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>按优先级排序</el-dropdown-item>
|
||||
<el-dropdown-item>按截止日期排序</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="todo-list">
|
||||
<div v-for="(todo, index) in todoList" :key="index" class="todo-item">
|
||||
<div class="todo-check">
|
||||
<el-checkbox size="large" />
|
||||
</div>
|
||||
<div class="todo-content">
|
||||
<div class="todo-title">{{ todo.title }}</div>
|
||||
<div class="todo-info">
|
||||
<el-tag :type="getPriorityType(todo.priority)" size="small" effect="plain">
|
||||
{{ todo.priority }}
|
||||
</el-tag>
|
||||
<span class="todo-date">
|
||||
<el-icon><calendar /></el-icon> {{ todo.deadline }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="todo-actions">
|
||||
<el-button type="primary" link size="small" circle>
|
||||
<el-icon><check /></el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" link size="small" circle>
|
||||
<el-icon><delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import {
|
||||
User, ShoppingCart, Money, DataAnalysis,
|
||||
MoreFilled, ArrowUp, ArrowDown, Right,
|
||||
Download, Refresh, Check, Delete, Plus,
|
||||
Setting, Calendar, Filter
|
||||
} from '@element-plus/icons-vue'
|
||||
import * as echarts from 'echarts'
|
||||
import Qrcode from '@/components/Qrcode.vue'
|
||||
import {useUserStore} from "@/store/userStore.js";
|
||||
|
||||
const userStore = useUserStore()
|
||||
// 数据统计卡片
|
||||
const statisticsCards = ref([
|
||||
{
|
||||
title: '访问量',
|
||||
value: '8,846',
|
||||
icon: 'User',
|
||||
trend: 12.5,
|
||||
class: 'visitors',
|
||||
progress: 78,
|
||||
progressColor: 'rgba(24, 144, 255, 0.8)'
|
||||
},
|
||||
{
|
||||
title: '订单量',
|
||||
value: '1,257',
|
||||
icon: 'ShoppingCart',
|
||||
trend: 5.2,
|
||||
class: 'orders',
|
||||
progress: 65,
|
||||
progressColor: 'rgba(82, 196, 26, 0.8)'
|
||||
},
|
||||
{
|
||||
title: '销售额',
|
||||
value: '¥ 125,430',
|
||||
icon: 'Money',
|
||||
trend: -2.3,
|
||||
class: 'sales',
|
||||
progress: 52,
|
||||
progressColor: 'rgba(250, 173, 20, 0.8)'
|
||||
},
|
||||
{
|
||||
title: '转化率',
|
||||
value: '32.8%',
|
||||
icon: 'DataAnalysis',
|
||||
trend: 4.6,
|
||||
class: 'conversion',
|
||||
progress: 83,
|
||||
progressColor: 'rgba(114, 46, 209, 0.8)'
|
||||
}
|
||||
])
|
||||
|
||||
// 客户构成数据
|
||||
const customerData = ref([
|
||||
{ name: '企业客户', value: 1048, percentage: 33, color: '#1890ff' },
|
||||
{ name: '个人客户', value: 735, percentage: 23, color: '#52c41a' },
|
||||
{ name: '政府单位', value: 580, percentage: 18, color: '#fa8c16' },
|
||||
{ name: '教育机构', value: 484, percentage: 15, color: '#722ed1' },
|
||||
{ name: '其他', value: 300, percentage: 11, color: '#f759ab' }
|
||||
])
|
||||
|
||||
const salesRange = ref('month')
|
||||
const todoFilter = ref('all')
|
||||
const salesChartRef = ref(null)
|
||||
const customerChartRef = ref(null)
|
||||
let salesChart = null
|
||||
let customerChart = null
|
||||
|
||||
// 活动数据
|
||||
const activities = ref([
|
||||
{
|
||||
content: '王经理 完成了销售目标',
|
||||
detail: '超额完成15%的销售指标',
|
||||
timestamp: '刚刚',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
content: '李明 上传了新的销售报告',
|
||||
detail: '包含Q2季度各区域销售数据',
|
||||
timestamp: '10分钟前',
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
content: '系统更新了安全策略',
|
||||
timestamp: '1小时前',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
content: '张经理 分配了新的任务',
|
||||
detail: '关于新产品线的市场调研',
|
||||
timestamp: '昨天',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
content: '年度销售会议即将开始',
|
||||
timestamp: '2天前',
|
||||
type: 'danger'
|
||||
}
|
||||
])
|
||||
|
||||
// 待办事项
|
||||
const todoList = ref([
|
||||
{ title: '完成季度销售报告', priority: '高', deadline: '2024-06-10' },
|
||||
{ title: '召开团队周会', priority: '中', deadline: '2024-06-12' },
|
||||
{ title: '审核营销方案', priority: '高', deadline: '2024-06-14' },
|
||||
{ title: '客户回访', priority: '低', deadline: '2024-06-18' }
|
||||
])
|
||||
|
||||
// 根据优先级返回标签类型
|
||||
const getPriorityType = (priority) => {
|
||||
switch (priority) {
|
||||
case '高': return 'danger'
|
||||
case '中': return 'warning'
|
||||
case '低': return 'info'
|
||||
default: return 'info'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initSalesChart()
|
||||
initCustomerChart()
|
||||
|
||||
// 窗口大小变化时重新调整图表大小
|
||||
window.addEventListener('resize', () => {
|
||||
salesChart?.resize()
|
||||
customerChart?.resize()
|
||||
})
|
||||
})
|
||||
|
||||
// 初始化销售趋势图表
|
||||
const initSalesChart = () => {
|
||||
if (!salesChartRef.value) return
|
||||
|
||||
salesChart = echarts.init(salesChartRef.value)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||
borderColor: '#e6e9ed',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#5e6d82'
|
||||
},
|
||||
formatter: function(params) {
|
||||
let result = params[0].name + '<br/>';
|
||||
params.forEach(item => {
|
||||
result += `<div style="display:flex;align-items:center;margin:5px 0">
|
||||
<span style="display:inline-block;width:10px;height:10px;background:${item.color};margin-right:5px;border-radius:50%"></span>
|
||||
<span>${item.seriesName}: ${item.value} 元</span>
|
||||
</div>`;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '8%',
|
||||
top: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e6e9ed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#5e6d82'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#5e6d82'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f0f3f8'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#1890ff'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#1890ff',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(24, 144, 255, 0.5)'
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(24, 144, 255, 0.5)' },
|
||||
{ offset: 1, color: 'rgba(24, 144, 255, 0.05)' }
|
||||
])
|
||||
},
|
||||
data: [12000, 19000, 15000, 22000, 19000, 28000, 32000]
|
||||
}
|
||||
]
|
||||
}
|
||||
salesChart.setOption(option)
|
||||
}
|
||||
|
||||
// 初始化客户构成图表
|
||||
const initCustomerChart = () => {
|
||||
if (!customerChartRef.value) return
|
||||
|
||||
customerChart = echarts.init(customerChartRef.value)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||
borderColor: '#e6e9ed',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#5e6d82'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '客户构成',
|
||||
type: 'pie',
|
||||
radius: ['55%', '75%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'self',
|
||||
scaleSize: 10,
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.2)'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: customerData.value.map(item => ({
|
||||
value: item.value,
|
||||
name: item.name,
|
||||
itemStyle: {
|
||||
color: item.color
|
||||
}
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
customerChart.setOption(option)
|
||||
}
|
||||
|
||||
// 监听销售范围变化
|
||||
watch(salesRange, (newVal) => {
|
||||
// 根据选择的时间范围更新图表数据
|
||||
if (salesChart) {
|
||||
const xAxisData = newVal === 'week'
|
||||
? ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
: newVal === 'month'
|
||||
? ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
|
||||
: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
|
||||
const seriesData = newVal === 'week'
|
||||
? [12000, 19000, 15000, 22000, 19000, 28000, 32000]
|
||||
: newVal === 'month'
|
||||
? [32000, 45000, 39000, 52000, 48000, 58000, 62000]
|
||||
: [158000, 165000, 180000, 220000, 210000, 252000, 265000, 270000, 285000, 302000, 318000, 350000]
|
||||
|
||||
salesChart.setOption({
|
||||
xAxis: {
|
||||
data: xAxisData
|
||||
},
|
||||
series: [{
|
||||
data: seriesData
|
||||
}]
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 统计卡片样式 */
|
||||
.stat-card {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.visitors .card-icon {
|
||||
background: linear-gradient(135deg, #1890ff, #096dd9);
|
||||
}
|
||||
|
||||
.orders .card-icon {
|
||||
background: linear-gradient(135deg, #52c41a, #389e0d);
|
||||
}
|
||||
|
||||
.sales .card-icon {
|
||||
background: linear-gradient(135deg, #faad14, #d48806);
|
||||
}
|
||||
|
||||
.conversion .card-icon {
|
||||
background: linear-gradient(135deg, #722ed1, #531dab);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
padding: 0 20px 15px;
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.up {
|
||||
color: #52c41a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.down {
|
||||
color: #f5222d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-inner {
|
||||
height: 100%;
|
||||
transition: width 0.8s ease;
|
||||
}
|
||||
|
||||
/* 图表样式 */
|
||||
.chart-row {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.chart-title h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.chart-title p {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chart-more {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.chart-overview {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 40px;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.overview-item .label {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.overview-item .value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.overview-item .rate {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* 客户构成图表特有样式 */
|
||||
.customer-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
font-size: 13px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.legend-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
/* 活动和待办事项 */
|
||||
.activity-row {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.activity-card, .todo-card {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-header-custom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-left h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
padding: 20px;
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
padding: 12px 16px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.timeline-detail {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* 待办事项特有样式 */
|
||||
.task-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.todo-filter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
padding: 10px 20px;
|
||||
height: 270px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.todo-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-check {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.todo-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.todo-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.todo-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.todo-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.chart-overview {
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.timeline-container,
|
||||
.todo-list {
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user