huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成代码路径重构

Browse Source
This commit is contained in:
huangzhenbao
2026-03-18 08:36:49 +08:00
parent 4041933e42
commit c2cd6dcd95
290 changed files with 866 additions and 38459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
pages/mall/admin/finance/balance-record/record/index.uvue Normal file
View File

@@ -0,0 +1,256 @@
<template>
<view class="finance-balance-record">
<!-- 筛选卡片 -->
<view class="filter-card border-shadow">
<view class="filter-row">
<view class="filter-item">
<text class="filter-label">订单时间:</text>
<view class="date-picker-wrap">
<text class="calendar-icon">📅</text>
<text class="date-placeholder">开始日期 - 结束日期</text>
</view>
</view>
<view class="filter-item">
<text class="filter-label">交易类型:</text>
<view class="select-box">
<text class="select-txt">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
</view>
</view>
<!-- 列表表格 -->
<view class="table-container border-shadow">
<view class="table-header">
<view class="th col-id"><text class="th-txt">ID</text></view>
<view class="th col-order"><text class="th-txt">关联订单</text></view>
<view class="th col-time"><text class="th-txt">交易时间</text></view>
<view class="th col-amount"><text class="th-txt">交易金额</text></view>
<view class="th col-user"><text class="th-txt">用户</text></view>
<view class="th col-type"><text class="th-txt">交易类型</text></view>
<view class="th col-remark"><text class="th-txt">备注</text></view>
<view class="th col-op"><text class="th-txt">操作</text></view>
</view>
<scroll-view class="table-body">
<view class="table-row" v-for="item in pagedList" :key="item.id">
<view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
<view class="td col-order text-left"><text class="td-txt">{{ item.order }}</text></view>
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
<view class="td col-amount">
<text :class="['td-txt', item.amount.startsWith('+') ? 'red-txt' : 'green-txt']">{{ item.amount }}</text>
</view>
<view class="td col-user"><text class="td-txt">{{ item.user }}</text></view>
<view class="td col-type"><text class="td-txt">{{ item.type }}</text></view>
<view class="td col-remark text-left"><text class="td-txt">{{ item.remark }}</text></view>
<view class="td col-op">
<text class="btn-link">备注</text>
</view>
</view>
</scroll-view>
<CommonPagination
v-if="total > 0"
:total="total"
:loading="false"
:currentPage="currentPage"
:pageSize="pageSize"
:pageSizeOptionLabels="pageSizeOptionLabels"
:pageSizeIndex="pageSizeIndex"
:visiblePages="visiblePages"
:totalPage="totalPage"
:jumpPageInput="jumpPageInput"
@page-size-change="handlePageSizeChange"
@page-change="handlePageChange"
@update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
@jump-page="handleJumpPage"
/>
</view>
</view>
</template>
<script setup lang="uts">
import { ref, computed } from 'vue'
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
interface BalanceRecord {
id: string
order: string
time: string
amount: string
user: string
type: string
remark: string
}
// ========== MOCK DATA START ==========
// TODO: 接真实接口时替换此处 tableData 为 fetchBalanceRecordList() 调用
const tableData = ref<BalanceRecord[]>([
{ id: '31216', order: '新用户注册赠送余额', time: '2026-02-03 10:30:11', amount: '+ 88888.00', user: '1', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31215', order: '新用户注册赠送余额', time: '2026-02-03 10:19:52', amount: '+ 88888.00', user: 'circus', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31214', order: 'cp541560738494283776', time: '2026-02-03 10:09:07', amount: '- 999.00', user: '1岁上班22岁退休', type: '余额支付购买商品', remark: '余额支付999.00元购买商品' },
{ id: '31213', order: '新用户注册赠送余额', time: '2026-02-03 10:07:59', amount: '+ 88888.00', user: '1岁上班22岁退休', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31212', order: '新用户注册赠送余额', time: '2026-02-03 02:17:24', amount: '+ 88888.00', user: '136****0434', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31211', order: '新用户注册赠送余额', time: '2026-02-03 02:04:17', amount: '+ 88888.00', user: '灵境', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31210', order: '新用户注册赠送余额', time: '2026-02-03 00:58:21', amount: '+ 88888.00', user: 'J.', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31209', order: 'cp540123456789012345', time: '2026-02-02 18:30:00', amount: '- 288.00', user: '张小明', type: '余额支付购买商品', remark: '余额支付288.00元购买商品' },
{ id: '31208', order: '管理员手动充值', time: '2026-02-02 16:00:00', amount: '+ 500.00', user: '李大力', type: '管理员手动充值', remark: '管理员充值500元' },
{ id: '31207', order: 'cp539876543210987654', time: '2026-02-02 14:20:00', amount: '- 99.00', user: '王芳', type: '余额支付购买商品', remark: '余额支付99.00元购买商品' },
{ id: '31206', order: '退款退回余额', time: '2026-02-02 11:45:00', amount: '+ 150.00', user: '赵明', type: '退款退回余额', remark: '订单退款150元返还余额' },
{ id: '31205', order: 'cp538765432109876543', time: '2026-02-02 09:00:00', amount: '- 1280.00', user: '陈小燕', type: '余额支付购买商品', remark: '余额支付1280.00元购买商品' },
{ id: '31204', order: '签到赠送余额', time: '2026-02-01 23:59:00', amount: '+ 10.00', user: '刘建国', type: '签到赠送余额', remark: '每日签到赠送10元余额' },
{ id: '31203', order: 'cp537654321098765432', time: '2026-02-01 20:30:00', amount: '- 450.00', user: '黄晓兰', type: '余额支付购买商品', remark: '余额支付450.00元购买商品' },
{ id: '31202', order: '新用户注册赠送余额', time: '2026-02-01 18:00:00', amount: '+ 88888.00', user: '周大卫', type: '新用户注册赠送余额', remark: '新用户注册赠送88888余额' },
{ id: '31201', order: '管理员手动充值', time: '2026-02-01 15:30:00', amount: '+ 1000.00', user: '吴玲玲', type: '管理员手动充值', remark: '管理员充值1000元' },
{ id: '31200', order: 'cp536543210987654321', time: '2026-02-01 12:00:00', amount: '- 680.00', user: '郑明亮', type: '余额支付购买商品', remark: '余额支付680.00元购买商品' },
{ id: '31199', order: '活动赠送余额', time: '2026-02-01 10:00:00', amount: '+ 200.00', user: '孙小丽', type: '活动赠送余额', remark: '新春活动赠送200元余额' },
{ id: '31198', order: 'cp535432109876543210', time: '2026-01-31 16:30:00', amount: '- 320.00', user: '冯浩', type: '余额支付购买商品', remark: '余额支付320.00元购买商品' },
{ id: '31197', order: '退款退回余额', time: '2026-01-31 14:00:00', amount: '+ 99.00', user: '陈建国', type: '退款退回余额', remark: '订单退款99元返还余额' },
])
// ========== MOCK DATA END ==========
// ========== PAGINATION STATE ==========
const currentPage = ref(1)
const pageSize = ref(15)
const jumpPageInput = ref('')
const pageSizeOptions = [10, 15, 20, 30, 50]
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
const total = computed(() => tableData.value.length)
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
const pagedList = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
return tableData.value.slice(start, start + pageSize.value)
})
const visiblePages = computed((): number[] => {
const t = totalPage.value; const cur = currentPage.value
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
return [1, -1, cur - 1, cur, cur + 1, -1, t]
})
const handlePageChange = (p: number) => { currentPage.value = p }
const handlePageSizeChange = (e: any) => {
const idx = Number(e.detail.value)
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
currentPage.value = 1
}
const handleJumpPage = () => {
const p = parseInt(jumpPageInput.value)
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
}
// ========== END PAGINATION STATE ==========
</script>
<style scoped lang="scss">
.finance-balance-record {
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.filter-card { padding: 24px; margin-bottom: 20px; }
.filter-row { display: flex; flex-direction: row; align-items: center; }
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 40px; }
.filter-label { font-size: 14px; color: #333; margin-right: 15px; }
.date-picker-wrap {
width: 260px;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
}
.select-box {
width: 200px;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
}
.calendar-icon { font-size: 14px; margin-right: 10px; color: #c0c4cc; }
.date-placeholder, .select-txt { font-size: 14px; color: #c0c4cc; }
.arrow-down { margin-left: auto; font-size: 10px; color: #c0c4cc; }
/* 表格样式 */
.table-container {
display: flex;
flex-direction: column;
min-height: 600px;
}
.table-header {
background-color: #e6f0ff;
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
padding: 4px 0;
}
.th {
padding: 12px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.th-txt {
font-size: 13px;
font-weight: 500;
color: #606266;
}
.table-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
background-color: #fff;
}
.table-row:hover {
background-color: #f9f9f9;
}
.td {
padding: 16px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.td-txt {
font-size: 13px;
color: #606266;
}
/* 列宽分配 (参考截图比例) */
.col-id { width: 70px; }
.col-order { flex: 1.5; min-width: 180px; justify-content: flex-start; }
.col-time { width: 160px; }
.col-amount { width: 120px; }
.col-user { width: 120px; }
.col-type { width: 150px; }
.col-remark { flex: 1.8; min-width: 200px; justify-content: flex-start; }
.col-op { width: 80px; }
.text-left { justify-content: flex-start; text-align: left; }
/* 颜色 */
.red-txt { color: #f56c6c; font-weight: 500; }
.green-txt { color: #67c23a; font-weight: 500; }
.btn-link { color: #1890ff; font-size: 13px; cursor: pointer; }
</style>

541
pages/mall/admin/finance/balance-record/statistics/index.uvue Normal file
View File

@@ -0,0 +1,541 @@
<template>
<view class="finance-balance-stats">
<!-- 顶部数据统计卡片 (3列布局) -->
<view class="stats-grid">
<view class="stat-card border-shadow">
<view class="stat-icon-circle bg-blue">
<text class="icon-white">💰</text>
</view>
<view class="stat-content">
<text class="stat-value">1447117274.55</text>
<text class="stat-label">当前余额</text>
</view>
</view>
<view class="stat-card border-shadow">
<view class="stat-icon-circle bg-orange">
<text class="icon-white">🏦</text>
</view>
<view class="stat-content">
<text class="stat-value">1602611838.49</text>
<text class="stat-label">累计余额</text>
</view>
</view>
<view class="stat-card border-shadow">
<view class="stat-icon-circle bg-green">
<text class="icon-white">💳</text>
</view>
<view class="stat-content">
<text class="stat-value">155494563.94</text>
<text class="stat-label">累计消耗余额</text>
</view>
</view>
</view>
<!-- 时间筛选区 -->
<view class="filter-bar border-shadow">
<view class="filter-item">
<text class="filter-label">时间选择:</text>
<view class="date-picker-wrap">
<text class="calendar-icon">📅</text>
<text class="date-range">2026/01/05 - 2026/02/03</text>
</view>
</view>
</view>
<!-- 趋势图表区 (CRMEB 1:1) -->
<view class="chart-box border-shadow">
<view class="chart-header">
<text class="chart-title">余额使用趋势</text>
<view class="chart-legend">
<view class="legend-item">
<view class="dot blue-dot"></view>
<text class="legend-txt">余额积累</text>
</view>
<view class="legend-item">
<view class="dot green-dot"></view>
<text class="legend-txt">余额消耗</text>
</view>
</view>
<view class="chart-ops">
<text class="op-icon">📥</text>
</view>
</view>
<view class="main-chart-wrap">
<EChartsView v-if="trendOption != null" :option="trendOption" class="main-trend-chart" />
</view>
</view>
<!-- 底部双列分析 -->
<view class="bottom-analysis">
<view class="analysis-box border-shadow">
<view class="box-header">
<text class="box-title">余额来源分析</text>
<view class="btn-toggle" @click="toggleSourceStyle">
<text class="toggle-txt">切换样式</text>
</view>
</view>
<view class="chart-container">
<!-- 样式 0: 图表 -->
<EChartsView v-if="sourceStyleMode == 0 && sourceOption != null" :option="sourceOption" class="pie-chart" />
<!-- 样式 1: 列表 -->
<view v-if="sourceStyleMode == 1" class="stats-table">
<view class="table-header">
<text class="th col-idx">序号</text>
<text class="th col-name">来源</text>
<text class="th col-amount">金额</text>
<text class="th col-percent">占比率</text>
</view>
<scroll-view class="table-body">
<view class="table-row" v-for="(item, index) in sourceData" :key="index">
<text class="td col-idx">{{ index + 1 }}</text>
<text class="td col-name">{{ item.name }}</text>
<text class="td col-amount">{{ item.value.toFixed(2) }}</text>
<view class="td col-percent">
<view class="progress-container">
<view class="progress-bar" :style="{ width: item.percent + '%' }"></view>
</view>
<text class="percent-txt">{{ item.percent.toFixed(2) }}%</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<view class="analysis-box border-shadow">
<view class="box-header">
<text class="box-title">余额消耗</text>
<view class="btn-toggle" @click="toggleConsumptionStyle">
<text class="toggle-txt">切换样式</text>
</view>
</view>
<view class="chart-container">
<!-- 样式 0: 图表 -->
<EChartsView v-if="consumptionStyleMode == 0 && consumptionOption != null" :option="consumptionOption" class="pie-chart" />
<!-- 样式 1: 列表 -->
<view v-if="consumptionStyleMode == 1" class="stats-table">
<view class="table-header">
<text class="th col-idx">序号</text>
<text class="th col-name">来源</text>
<text class="th col-amount">金额</text>
<text class="th col-percent">占比率</text>
</view>
<scroll-view class="table-body">
<view class="table-row" v-for="(item, index) in consumptionDataList" :key="index">
<text class="td col-idx">{{ index + 1 }}</text>
<text class="td col-name">{{ item.name }}</text>
<text class="td col-amount">{{ item.value.toFixed(2) }}</text>
<view class="td col-percent">
<view class="progress-container">
<view class="progress-bar" :style="{ width: item.percent + '%' }"></view>
</view>
<text class="percent-txt">{{ item.percent.toFixed(2) }}%</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
const trendOption = ref<any>(null)
const sourceOption = ref<any>(null)
const consumptionOption = ref<any>(null)
// 样式切换状态: 0=图表, 1=列表
const sourceStyleMode = ref(0)
const consumptionStyleMode = ref(0)
// 统计数据 (使用 ref 保证响应式)
const sourceData = ref([
{ value: 125000.00, name: '系统增加', percent: 40.00 },
{ value: 93750.00, name: '用户充值', percent: 30.00 },
{ value: 78125.00, name: '佣金提现', percent: 25.00 },
{ value: 62500.00, name: '抽奖赠送', percent: 20.00 },
{ value: 46875.00, name: '商品退款', percent: 15.00 }
])
const consumptionDataList = ref([
{ value: 435692.51, name: '购买商品', percent: 50.00 },
{ value: 8060.18, name: '购买会员', percent: 20.00 },
{ value: 0.00, name: '充值退款', percent: 15.00 },
{ value: 0.00, name: '系统减少', percent: 15.00 }
])
/**
* 转换 Plain Object 工具
*/
function toPlainObject(obj : any) : any {
if (obj == null) return null
if (typeof obj !== 'object') return obj
if (Array.isArray(obj)) {
return (obj as Array<any>).map((item : any) : any => toPlainObject(item))
}
const plain : Record<string, any> = {}
const keys = Object.keys(obj as Record<string, any>)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
if (key.startsWith('_') || key == 'toJSON') continue
const value = (obj as Record<string, any>)[key]
if (typeof value == 'function') continue
if (value != null && typeof value == 'object' && !Array.isArray(value)) {
plain[key] = toPlainObject(value)
} else {
plain[key] = value
}
}
return plain
}
onMounted(() => {
setTimeout(() => {
initTrendChart()
initSourceChart()
initConsumptionChart()
}, 300)
})
function initTrendChart() {
const dates = ['01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02', '02-03']
const accumulationData = [2500000, 2900000, 1500000, 2400000, 1800000, 1300000, 500000, 2100000, 3000000, 2800000, 2300000, 2200000, 1500000, 1100000, 2300000, 2800000, 2600000, 2700000, 1800000, 1950000, 650000, 1600000, 1750000, 2400000, 2600000, 2000000, 1400000, 550000, 2100000, 550000]
const consumptionData = [10000, 20000, 15000, 120000, 50000, 20000, 10000, 30000, 40000, 35000, 60000, 25000, 30000, 45000, 55000, 110000, 60000, 50000, 40000, 35000, 85000, 45000, 120000, 50000, 45000, 40000, 35000, 55000, 65000, 45000]
const option = {
grid: { left: '3%', right: '4%', bottom: '5%', top: '5%', containLabel: true },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
boundaryGap: false,
data: dates,
axisLine: { lineStyle: { color: '#f0f0f0' } },
axisLabel: { color: '#999', interval: 4 }
},
yAxis: {
type: 'value',
axisLine: { show: false },
splitLine: { lineStyle: { color: '#f5f5f5' } },
axisLabel: { color: '#999' }
},
series: [
{
name: '余额积累',
type: 'line',
smooth: true,
data: accumulationData,
itemStyle: { color: '#1890ff' }
},
{
name: '余额消耗',
type: 'line',
smooth: true,
data: consumptionData,
itemStyle: { color: '#52c41a' }
}
]
}
trendOption.value = toPlainObject(option)
}
function initSourceChart() {
const option = {
tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
legend: { orient: 'vertical', right: '5%', top: 'center', itemWidth: 10, itemHeight: 10 },
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16', '#e8684a'],
series: [
{
name: '余额来源',
type: 'pie',
radius: '70%',
center: ['40%', '50%'],
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
// 关键点：将图表数据映射到 percent 字段
data: sourceData.value.map(item => ({ value: item.percent, name: item.name }))
}
]
}
sourceOption.value = toPlainObject(option)
}
function initConsumptionChart() {
const option = {
tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
legend: { orient: 'vertical', right: '5%', top: 'center', itemWidth: 10, itemHeight: 10 },
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16'],
series: [
{
name: '余额消耗',
type: 'pie',
radius: '70%',
center: ['40%', '50%'],
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
// 关键点：将图表数据映射到 percent 字段
data: consumptionDataList.value.map(item => ({ value: item.percent, name: item.name }))
}
]
}
consumptionOption.value = toPlainObject(option)
}
function toggleSourceStyle() {
sourceStyleMode.value = sourceStyleMode.value === 0 ? 1 : 0
if (sourceStyleMode.value === 0) {
setTimeout(() => initSourceChart(), 50)
}
}
function toggleConsumptionStyle() {
consumptionStyleMode.value = consumptionStyleMode.value === 0 ? 1 : 0
if (consumptionStyleMode.value === 0) {
setTimeout(() => initConsumptionChart(), 50)
}
}
</script>
<style scoped lang="scss">
.finance-balance-stats {
padding: 0;
background-color: transparent;
min-height: auto;
}
.border-shadow {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
/* 顶部卡片 */
.stats-grid {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
.stat-card {
flex: 1;
margin: 0 10px;
padding: 24px 30px;
display: flex;
flex-direction: row;
align-items: center;
}
.stats-grid .stat-card:first-child { margin-left: 0; }
.stats-grid .stat-card:last-child { margin-right: 0; }
.stat-icon-circle {
width: 60px;
height: 60px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
.bg-blue { background-color: #40a9ff; }
.bg-orange { background-color: #ffa940; }
.bg-green { background-color: #73d13d; }
.icon-white { color: #fff; font-size: 24px; }
.stat-content {
display: flex;
flex-direction: column;
}
.stat-value {
font-size: 28px;
font-weight: 500;
color: #303133;
line-height: 1.2;
}
.stat-label {
font-size: 14px;
color: #909399;
margin-top: 4px;
}
/* 时间筛选区 */
.filter-bar {
padding: 16px 24px;
margin-bottom: 20px;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.filter-label {
font-size: 14px;
color: #606266;
margin-right: 15px;
}
.date-picker-wrap {
width: 320px;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
}
.calendar-icon { font-size: 14px; color: #c0c4cc; margin-right: 10px; }
.date-range { font-size: 14px; color: #606266; }
/* 趋势图表区 */
.chart-box {
padding: 24px;
margin-bottom: 20px;
}
.chart-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 30px;
}
.chart-title { font-size: 16px; font-weight: 600; color: #303133; margin-right: auto; }
.chart-legend {
display: flex;
flex-direction: row;
}
.legend-item { display: flex; flex-direction: row; align-items: center; margin-left: 20px; }
.legend-txt { font-size: 13px; color: #666; }
.dot { width: 10px; height: 10px; border-radius: 5px; margin-right: 8px; }
.blue-dot { background-color: #1890ff; }
.green-dot { background-color: #52c41a; }
.chart-ops { margin-left: 20px; }
.op-icon { font-size: 20px; color: #909399; }
.main-chart-wrap {
height: 400px;
width: 100%;
}
.main-trend-chart {
width: 100%;
height: 100%;
}
/* 底部分析 */
.bottom-analysis {
display: flex;
flex-direction: row;
margin: 0 -10px 40px -10px;
}
.analysis-box {
flex: 1;
margin: 0 10px;
padding: 24px;
}
.box-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.box-title { font-size: 15px; font-weight: 600; color: #303133; }
.btn-toggle {
padding: 4px 12px;
border: 1px solid #dcdfe6;
border-radius: 15px;
cursor: pointer;
}
.toggle-txt { font-size: 12px; color: #606266; }
.chart-container {
height: 300px;
width: 100%;
}
.pie-chart {
width: 100%;
height: 100%;
}
/* 列表样式 */
.stats-table {
display: flex;
flex-direction: column;
}
.table-header {
display: flex;
flex-direction: row;
background-color: #e6f0ff;
padding: 12px 0;
border-radius: 4px;
}
.th {
font-size: 13px;
color: #606266;
text-align: center;
font-weight: 500;
}
.table-row {
display: flex;
flex-direction: row;
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
align-items: center;
}
.td {
font-size: 13px;
color: #606266;
text-align: center;
}
.col-idx { width: 60px; }
.col-name { flex: 1; }
.col-amount { flex: 1.5; }
.col-percent { flex: 2; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 20px; }
.progress-container {
flex: 1;
height: 8px;
background-color: #f5f5f5;
border-radius: 4px;
margin-right: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #1890ff;
border-radius: 4px;
}
.percent-txt {
width: 60px;
font-size: 12px;
color: #666;
}
</style>