完善页面布局

This commit is contained in:
2026-01-28 17:54:30 +08:00
parent 8c5024a943
commit 9f3c2803e3
25 changed files with 4333 additions and 2064 deletions

View File

@@ -452,18 +452,12 @@ const changePeriod = (period: string) => {
/* ===== 响应式设计 ===== */
@media (max-width: 1200px) {
.kpi-cards-row {
flex-wrap: wrap;
}
.kpi-card {
min-width: 45%;
flex: 0 0 auto;
}
.admin-card{
flex-wrap: warp;
}
.charts-row{
grid-template-columns: 1fr;

View File

@@ -1,25 +1,6 @@
<template>
<AdminLayout current-page="order">
<view class="order-management">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">订单管理</text>
<text class="page-subtitle">管理系统订单和物流信息</text>
</view>
<!-- Tab 切换栏 -->
<view class="tab-bar">
<view
v-for="tab in tabs"
:key="tab.key"
class="tab-item"
:class="{ 'active': activeTab === tab.key }"
@click="switchTab(tab.key)"
>
<text class="iconfont tab-icon">{{ tab.icon }}</text>
<text class="tab-title">{{ tab.title }}</text>
</view>
</view>
<!-- 订单列表Tab -->
<view v-if="activeTab === 'order-list'">
@@ -71,7 +52,6 @@
</view>
<view class="advanced-toggle" @click="showAdvancedSearch = !showAdvancedSearch">
<text>{{ showAdvancedSearch ? '收起' : '展开' }}筛选</text>
<text class="iconfont">{{ showAdvancedSearch ? 'icon-up' : 'icon-down' }}</text>
</view>
</view>
@@ -711,48 +691,6 @@ onMounted(() => {
</script>
<style lang="scss">
/* Tab 栏样式 */
.tab-bar {
display: flex;
background-color: #ffffff;
border-radius: 8rpx;
padding: 8rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 16rpx 24rpx;
border-radius: 6rpx;
cursor: pointer;
transition: all 0.2s;
background-color: #f5f5f5;
color: #666666;
}
.tab-item:hover {
background-color: #e8e8e8;
}
.tab-item.active {
background-color: #1890ff;
color: #ffffff;
}
.tab-icon {
font-size: 16rpx;
}
.tab-title {
font-size: 14rpx;
font-weight: 500;
}
/* 订单详情占位符 */
.order-detail-section {
background-color: #ffffff;
@@ -806,6 +744,7 @@ onMounted(() => {
.stats-cards {
display: flex;
flex-direction:row;
justify-content: space-between;
margin-bottom: 40rpx;
flex-wrap: wrap;
@@ -855,6 +794,7 @@ onMounted(() => {
.search-bar {
display: flex;
flex-direction:row;
align-items: center;
gap: 20rpx;
margin-bottom: 20rpx;
@@ -863,6 +803,7 @@ onMounted(() => {
.search-input-wrapper {
flex: 1;
display: flex;
flex-direction:row;
align-items: center;
border: 1rpx solid #ddd;
border-radius: 8rpx;
@@ -886,6 +827,7 @@ onMounted(() => {
.advanced-toggle {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
color: #1890ff;
@@ -901,6 +843,7 @@ onMounted(() => {
.filter-row {
display: flex;
flex-direction:row;
gap: 30rpx;
margin-bottom: 20rpx;
flex-wrap: wrap;
@@ -920,6 +863,7 @@ onMounted(() => {
.picker-display {
display: flex;
flex-direction:row;
align-items: center;
justify-content: space-between;
padding: 16rpx 20rpx;
@@ -931,6 +875,7 @@ onMounted(() => {
.date-range {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
}
@@ -952,6 +897,7 @@ onMounted(() => {
.filter-actions {
display: flex;
flex-direction:row;
gap: 20rpx;
justify-content: flex-end;
margin-top: 20rpx;
@@ -959,6 +905,7 @@ onMounted(() => {
.action-bar {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
@@ -969,12 +916,14 @@ onMounted(() => {
.left-actions,
.right-actions {
display: flex;
flex-direction:row;
align-items: center;
gap: 15rpx;
}
.select-all {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
font-size: 26rpx;
@@ -989,6 +938,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1002,6 +952,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1015,6 +966,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1028,6 +980,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1051,6 +1004,7 @@ onMounted(() => {
.table-row {
display: flex;
flex-direction:row;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
@@ -1086,6 +1040,7 @@ onMounted(() => {
.col-actions {
width: 200rpx;
display: flex;
flex-direction:row;
gap: 10rpx;
justify-content: center;
}
@@ -1099,7 +1054,7 @@ onMounted(() => {
.order-items {
display: flex;
flex-direction: column;
flex-direction:row;
gap: 4rpx;
}
@@ -1182,6 +1137,7 @@ onMounted(() => {
height: 60rpx;
border-radius: 8rpx;
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -1211,6 +1167,7 @@ onMounted(() => {
.pagination {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
@@ -1225,6 +1182,7 @@ onMounted(() => {
.page-controls {
display: flex;
flex-direction:row;
align-items: center;
gap: 15rpx;
}
@@ -1247,6 +1205,7 @@ onMounted(() => {
.page-numbers {
display: flex;
flex-direction:row;
gap: 8rpx;
margin: 0 20rpx;
}
@@ -1259,6 +1218,7 @@ onMounted(() => {
background-color: #fff;
color: #333;
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -1279,6 +1239,7 @@ onMounted(() => {
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
z-index: 1000;
@@ -1299,6 +1260,7 @@ onMounted(() => {
.modal-header {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
padding: 30rpx;
@@ -1339,6 +1301,7 @@ onMounted(() => {
.info-row {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
@@ -1369,6 +1332,7 @@ onMounted(() => {
.item-row {
display: flex;
flex-direction:row;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
@@ -1408,6 +1372,7 @@ onMounted(() => {
.amount-row {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
@@ -1437,6 +1402,7 @@ onMounted(() => {
.modal-footer {
display: flex;
flex-direction:row;
gap: 20rpx;
justify-content: space-between;
align-items: center;
@@ -1446,6 +1412,7 @@ onMounted(() => {
.action-buttons {
display: flex;
flex-direction:row;
gap: 15rpx;
}

View File

@@ -1,26 +1,6 @@
<template>
<AdminLayout current-page="product-list">
<view class="product-management">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">商品管理</text>
<text class="page-subtitle">管理系统商品信息和库存</text>
</view>
<!-- Tab 切换栏 -->
<view class="tab-bar">
<view
v-for="tab in tabs"
:key="tab.key"
class="tab-item"
:class="{ 'active': activeTab === tab.key }"
@click="switchTab(tab.key)"
>
<text class="iconfont tab-icon">{{ tab.icon }}</text>
<text class="tab-title">{{ tab.title }}</text>
</view>
</view>
<!-- 商品列表Tab -->
<view v-if="activeTab === 'product-list'">
<!-- 统计卡片 -->
@@ -71,7 +51,6 @@
</view>
<view class="advanced-toggle" @click="showAdvancedSearch = !showAdvancedSearch">
<text>{{ showAdvancedSearch ? '收起' : '展开' }}筛选</text>
<text class="iconfont">{{ showAdvancedSearch ? 'icon-up' : 'icon-down' }}</text>
</view>
</view>
@@ -958,48 +937,6 @@ onMounted(() => {
</script>
<style lang="scss">
/* Tab 栏样式 */
.tab-bar {
display: flex;
background-color: #ffffff;
border-radius: 8rpx;
padding: 8rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 16rpx 24rpx;
border-radius: 6rpx;
cursor: pointer;
transition: all 0.2s;
background-color: #f5f5f5;
color: #666666;
}
.tab-item:hover {
background-color: #e8e8e8;
}
.tab-item.active {
background-color: #1890ff;
color: #ffffff;
}
.tab-icon {
font-size: 16rpx;
}
.tab-title {
font-size: 14rpx;
font-weight: 500;
}
/* 分类管理样式 */
.category-section {
background-color: #ffffff;
@@ -1013,6 +950,7 @@ onMounted(() => {
.category-header {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
@@ -1026,12 +964,14 @@ onMounted(() => {
.category-tree {
display: flex;
flex-direction:row;
flex-direction: column;
gap: 16rpx;
}
.category-item {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
padding: 20rpx 24rpx;
@@ -1042,6 +982,8 @@ onMounted(() => {
.category-info {
display: flex;
flex-direction:row;
flex-direction:row;
align-items: center;
gap: 12rpx;
}
@@ -1059,6 +1001,7 @@ onMounted(() => {
.category-actions {
display: flex;
flex-direction:row;
gap: 12rpx;
}
@@ -1067,6 +1010,7 @@ onMounted(() => {
height: 40rpx;
border-radius: 6rpx;
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -1108,6 +1052,7 @@ onMounted(() => {
.stats-cards {
display: flex;
flex-direction:row;
flex-direction: row;
justify-content: space-between;
margin-bottom: 40rpx;
@@ -1158,6 +1103,7 @@ onMounted(() => {
.search-bar {
display: flex;
flex-direction:row;
align-items: center;
gap: 20rpx;
margin-bottom: 20rpx;
@@ -1166,6 +1112,7 @@ onMounted(() => {
.search-input-wrapper {
flex: 1;
display: flex;
flex-direction:row;
align-items: center;
border: 1rpx solid #ddd;
border-radius: 8rpx;
@@ -1189,6 +1136,7 @@ onMounted(() => {
.advanced-toggle {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
color: #1890ff;
@@ -1204,6 +1152,7 @@ onMounted(() => {
.filter-row {
display: flex;
flex-direction:row;
gap: 30rpx;
margin-bottom: 20rpx;
flex-wrap: wrap;
@@ -1223,6 +1172,7 @@ onMounted(() => {
.picker-display {
display: flex;
flex-direction:row;
align-items: center;
justify-content: space-between;
padding: 16rpx 20rpx;
@@ -1234,6 +1184,7 @@ onMounted(() => {
.price-range {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
}
@@ -1253,6 +1204,7 @@ onMounted(() => {
.filter-actions {
display: flex;
flex-direction:row;
gap: 20rpx;
justify-content: flex-end;
margin-top: 20rpx;
@@ -1260,6 +1212,7 @@ onMounted(() => {
.action-bar {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
@@ -1270,12 +1223,14 @@ onMounted(() => {
.left-actions,
.right-actions {
display: flex;
flex-direction:row;
align-items: center;
gap: 15rpx;
}
.select-all {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
font-size: 26rpx;
@@ -1290,6 +1245,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1303,6 +1259,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1316,6 +1273,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1329,6 +1287,7 @@ onMounted(() => {
font-size: 26rpx;
cursor: pointer;
display: flex;
flex-direction:row;
align-items: center;
gap: 8rpx;
}
@@ -1352,6 +1311,7 @@ onMounted(() => {
.table-row {
display: flex;
flex-direction:row;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
@@ -1392,6 +1352,7 @@ onMounted(() => {
.col-actions {
width: 250rpx;
display: flex;
flex-direction:row;
gap: 10rpx;
justify-content: center;
}
@@ -1478,6 +1439,7 @@ onMounted(() => {
height: 60rpx;
border-radius: 8rpx;
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -1507,6 +1469,7 @@ onMounted(() => {
.pagination {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
@@ -1521,6 +1484,7 @@ onMounted(() => {
.page-controls {
display: flex;
flex-direction:row;
align-items: center;
gap: 15rpx;
}
@@ -1543,6 +1507,7 @@ onMounted(() => {
.page-numbers {
display: flex;
flex-direction:row;
gap: 8rpx;
margin: 0 20rpx;
}
@@ -1555,6 +1520,7 @@ onMounted(() => {
background-color: #fff;
color: #333;
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -1575,6 +1541,7 @@ onMounted(() => {
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction:row;
align-items: center;
justify-content: center;
z-index: 1000;
@@ -1595,6 +1562,7 @@ onMounted(() => {
.modal-header {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
padding: 30rpx;
@@ -1620,6 +1588,7 @@ onMounted(() => {
.form-row {
display: flex;
flex-direction:row;
gap: 20rpx;
margin-bottom: 20rpx;
flex-wrap: wrap;
@@ -1664,17 +1633,18 @@ onMounted(() => {
.image-upload {
display: flex;
flex-direction:row;
align-items: center;
gap: 20rpx;
}
.upload-area {
width: 120rpx;
height: 120rpx;
width: 200rpx;
height: 200rpx;
border: 2rpx dashed #ddd;
border-radius: 8rpx;
display: flex;
flex-direction: column;
flex-direction:row;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -1695,6 +1665,7 @@ onMounted(() => {
.modal-footer {
display: flex;
flex-direction:row;
gap: 20rpx;
justify-content: flex-end;
padding: 30rpx;

View File

@@ -1,26 +1,6 @@
<template>
<AdminLayout current-page="system">
<view class="system-settings">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">系统设置</text>
<text class="page-subtitle">管理系统基础配置和参数</text>
</view>
<!-- Tab 切换栏 -->
<view class="tab-bar">
<view
v-for="tab in tabs"
:key="tab.key"
class="tab-item"
:class="{ 'active': activeTab === tab.key }"
@click="switchTab(tab.key)"
>
<text class="iconfont tab-icon">{{ tab.icon }}</text>
<text class="tab-title">{{ tab.title }}</text>
</view>
</view>
<!-- 设置分类导航 -->
<view class="settings-nav">
<view

View File

@@ -7,24 +7,11 @@
<text class="page-subtitle">管理系统用户账户和权限</text>
</view>
<!-- Tab 切换栏 -->
<view class="tab-bar">
<view
v-for="tab in tabs"
:key="tab.key"
class="tab-item"
:class="{ 'active': activeTab === tab.key }"
@click="switchTab(tab.key)"
>
<text class="iconfont tab-icon">{{ tab.icon }}</text>
<text class="tab-title">{{ tab.title }}</text>
</view>
</view>
<!-- 用户列表Tab -->
<view v-if="activeTab === 'user-list'">
<!-- 统计卡片 -->
<view class="stats-cards">
<view class="stats-cards">
<view class="stat-card">
<view class="stat-icon">👥</view>
<view class="stat-content">
@@ -887,6 +874,7 @@ onMounted(() => {
.stats-cards {
display: flex;
flex-direction:row;
justify-content: space-between;
margin-bottom: 40rpx;
flex-wrap: wrap;
@@ -1080,6 +1068,7 @@ onMounted(() => {
.search-bar {
display: flex;
flex-direction:row;
align-items: center;
gap: 20rpx;
margin-bottom: 20rpx;
@@ -1185,6 +1174,7 @@ onMounted(() => {
.action-bar {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
@@ -1195,12 +1185,14 @@ onMounted(() => {
.left-actions,
.right-actions {
display: flex;
flex-direction:row;
align-items: center;
gap: 15rpx;
}
.select-all {
display: flex;
flex-direction:row;
align-items: center;
gap: 10rpx;
font-size: 26rpx;
@@ -1264,6 +1256,7 @@ onMounted(() => {
.table-row {
display: flex;
flex-direction:row;
align-items: center;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
@@ -1402,6 +1395,7 @@ onMounted(() => {
.page-controls {
display: flex;
flex-direction:row;
align-items: center;
gap: 15rpx;
}
@@ -1424,6 +1418,7 @@ onMounted(() => {
.page-numbers {
display: flex;
flex-direction:row;
gap: 8rpx;
margin: 0 20rpx;
}

View File

@@ -368,6 +368,7 @@ const formatNumber = (num: number) => {
.filter-row {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
@@ -376,17 +377,20 @@ const formatNumber = (num: number) => {
.filter-left {
display: flex;
flex-direction:row;
gap: 32px;
flex-wrap: wrap;
}
.filter-right {
display: flex;
flex-direction:row;
gap: 16px;
}
.filter-item {
display: flex;
flex-direction:row;
align-items: center;
gap: 12px;
}
@@ -399,6 +403,7 @@ const formatNumber = (num: number) => {
.filter-select {
display: flex;
flex-direction:row;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
@@ -412,6 +417,7 @@ const formatNumber = (num: number) => {
.date-range {
display: flex;
flex-direction:row;
align-items: center;
gap: 8px;
}
@@ -459,13 +465,11 @@ const formatNumber = (num: number) => {
}
/* ===== 指标概览 ===== */
.metrics-section {
margin-bottom: 24px;
}
.metrics-row {
display: flex;
gap: 24px;
flex-direction:row;
flex-wrap: wrap;
}
@@ -557,6 +561,7 @@ const formatNumber = (num: number) => {
.admin-card-header {
padding: 24px 24px 0 24px;
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
@@ -575,6 +580,7 @@ const formatNumber = (num: number) => {
/* ===== 图表图例 ===== */
.chart-legend {
display: flex;
flex-direction:row;
justify-content: center;
gap: 32px;
margin-bottom: 24px;
@@ -583,6 +589,7 @@ const formatNumber = (num: number) => {
.legend-item {
display: flex;
flex-direction:row;
align-items: center;
gap: 8px;
}
@@ -643,6 +650,7 @@ const formatNumber = (num: number) => {
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 30px;
}

View File

@@ -6,6 +6,10 @@
}
},
"pages": [
{
"name": "管理端首页",
"path": "pages/mall/admin/index"
},
{
"path": "pages/mall/consumer/index",
"style": {
@@ -613,6 +617,10 @@
"condition": {
"current": 0,
"list": [
{
"name": "管理端首页",
"path": "pages/mall/admin/index"
},
{
"name": "消费者端首页",
"path": "pages/mall/consumer/index"
@@ -629,10 +637,6 @@
"name": "配送端首页",
"path": "pages/mall/delivery/index"
},
{
"name": "管理端首页",
"path": "pages/mall/admin/index"
},
{
"name": "客服端首页",
"path": "pages/mall/service/index"