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