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-02-05 11:36:55 +08:00
parent d51e6a8f72
commit 821205b18a
15 changed files with 476 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
layouts/admin/pages/HomeIndex.uvue
View File

@@ -1,74 +1,54 @@
<template>
<view class="home-page">
<!-- 数据统计卡片行 -->
<view class="stats-row">
<!-- 销售额卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">销售额</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">91.1</view>
<view class="card-meta">
<text class="meta-text">昨日 2740</text>
<text class="meta-trend down">日环比 -96.67% ▼</text>
</view>
<view class="card-footer">
<text class="footer-label">本月销售额</text>
<text class="footer-value">2831.1元</text>
</view>
</view>
<!-- 数据统计卡片行 (使用统一响应式网格) -->
<view class="kpi-grid">
<KpiMiniCard
class="stat-card"
title="销售额"
tagText="今日"
:valueText="statsData.sales.today.toString()"
:metaLeft="'昨日 ' + statsData.sales.yesterday"
:metaRight="'日环比 ' + statsData.sales.trend + '%'"
:trend="statsData.sales.trend > 0 ? 'up' : 'down'"
footerLeftText="本月销售额"
:footerRightText="statsData.sales.monthTotal + '元'"
/>
<!-- 用户访问量卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">用户访问量</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">224</view>
<view class="card-meta">
<text class="meta-text">昨日 136</text>
<text class="meta-trend up">日环比 64.7% ▲</text>
</view>
<view class="card-footer">
<text class="footer-label">本月访问量</text>
<text class="footer-value">360Pv</text>
</view>
</view>
<KpiMiniCard
class="stat-card"
title="用户访问量"
tagText="今日"
:valueText="statsData.visits.today.toString()"
:metaLeft="'昨日 ' + statsData.visits.yesterday"
:metaRight="'日环比 ' + statsData.visits.trend + '%'"
:trend="statsData.visits.trend > 0 ? 'up' : 'down'"
footerLeftText="本月访问量"
:footerRightText="statsData.visits.monthTotal + 'Pv'"
/>
<!-- 订单量卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">订单量</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">4</view>
<view class="card-meta">
<text class="meta-text">昨日 8</text>
<text class="meta-trend down">日环比 -50% ▼</text>
</view>
<view class="card-footer">
<text class="footer-label">本月订单量</text>
<text class="footer-value">12单</text>
</view>
</view>
<KpiMiniCard
class="stat-card"
title="订单量"
tagText="今日"
:valueText="statsData.orders.today.toString()"
:metaLeft="'昨日 ' + statsData.orders.yesterday"
:metaRight="'日环比 ' + statsData.orders.trend + '%'"
:trend="statsData.orders.trend > 0 ? 'up' : 'down'"
footerLeftText="本月订单量"
:footerRightText="statsData.orders.monthTotal + '单'"
/>
<!-- 新增用户卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">新增用户</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">21</view>
<view class="card-meta">
<text class="meta-text">昨日 6</text>
<text class="meta-trend up">日环比 250% ▲</text>
</view>
<view class="card-footer">
<text class="footer-label">本月新增用户</text>
<text class="footer-value">27人</text>
</view>
</view>
<KpiMiniCard
class="stat-card"
title="新增用户"
tagText="今日"
:valueText="statsData.users.today.toString()"
:metaLeft="'昨日 ' + statsData.users.yesterday"
:metaRight="'日环比 ' + statsData.users.trend + '%'"
:trend="statsData.users.trend > 0 ? 'up' : 'down'"
footerLeftText="本月新增用户"
:footerRightText="statsData.users.monthTotal + '人'"
/>
</view>
<!-- 订单趋势图表区 -->
@@ -156,6 +136,7 @@ import { ref, computed, onMounted } from 'vue'
import AnalyticsComboChart from '@/components/analytics/AnalyticsComboChart.uvue'
import AnalyticsAreaChart from '@/components/analytics/AnalyticsAreaChart.uvue'
import AnalyticsPieChart from '@/components/analytics/AnalyticsPieChart.uvue'
import KpiMiniCard from '@/pages/mall/admin/homePage/components/KpiMiniCard.uvue'
// Filter periods
const periods = [
@@ -249,90 +230,9 @@ const statsData = ref({
min-height: 100vh;
}
.stats-row {
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;
}
/* 统计卡片 */
/* 兼容旧布局标识，样式逻辑已由 .kpi-grid 接管 */
.stat-card {
flex: 1;
min-width: 280px;
background-color: #ffffff;
border-radius: 4px;
padding: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s;
}
.stat-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* 卡片头部 */
.card-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.card-title {
font-size: 14px;
color: #666666;
font-weight: 400;
}
.tag {
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
}
.tag.today {
background-color: #e8f4ff;
color: #1890ff;
}
/* 卡片主值 */
.card-value {
font-size: 32px;
font-weight: 500;
color: #262626;
margin-bottom: 12px;
line-height: 1.2;
}
/* 卡片元数据 */
.card-meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.meta-text {
font-size: 13px;
color: #8c8c8c;
}
.meta-trend {
font-size: 13px;
font-weight: 500;
}
.meta-trend.up {
color: #ff4d4f;
}
.meta-trend.down {
color: #52c41a;
margin-bottom: 0px;
}
/* 图表区样式 */
@@ -453,14 +353,11 @@ const statsData = ref({
font-weight: 500;
}
/* 响应式 */
@media screen and (max-width: 1400px) {
.stat-card {
min-width: calc(50% - 8px);
@media screen and (max-width: 768px) {
.home-page {
padding: 12px;
}
}
@media screen and (max-width: 1024px) {
.bottom-charts {
flex-direction: column;
}
@@ -468,24 +365,25 @@ const statsData = ref({
.half-width {
min-width: 100%;
}
}
@media screen and (max-width: 768px) {
.home-page {
padding: 12px;
}
.stats-row {
/* 调整图表头部在移动端的展示 */
.chart-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.stat-card {
min-width: 100%;
padding: 16px;
.header-right {
width: 100%;
}
.card-value {
font-size: 28px;
.period-tabs {
width: 100%;
justify-content: space-between;
}
.period-tab {
flex: 1;
}
}
</style>