完善页面布局
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user