完善页面布局

pages/mall/admin/product-management.uvue

@@ -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;