From 3dfba3d804842cf2716c1da6fd88bf79e13f111d Mon Sep 17 00:00:00 2001
From: Agent <agent@openclaw.ai>
Date: Thu, 26 Mar 2026 12:59:03 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=89=80=E6=9C=89=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2UI=E8=AE=BE=E8=AE=A1=EF=BC=9A=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E3=80=81=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E3=80=81?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8=E3=80=81=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E3=80=81=E5=BA=93=E5=AD=98=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/order/create.vue | 171 +++++++++++++++++++-------
 src/pages/order/list.vue   | 238 ++++++++++++++++++++++---------------
 src/pages/product/list.vue | 199 +++++++++++++++++++++----------
 src/pages/stock/list.vue   | 172 +++++++++++++++++++--------
 4 files changed, 528 insertions(+), 252 deletions(-)

diff --git a/src/pages/order/create.vue b/src/pages/order/create.vue
index 72c55e4..11a2caa 100644
--- a/src/pages/order/create.vue
+++ b/src/pages/order/create.vue
@@ -1,8 +1,11 @@
 <template>
   <view class="page">
     <!-- 客户信息 -->
-    <view class="section">
-      <view class="section-title">客户信息</view>
+    <view class="section card-section">
+      <view class="section-header">
+        <text class="section-icon">👤</text>
+        <text class="section-title">客户信息</text>
+      </view>
       <view class="form-item">
         <text class="label">客户</text>
         <picker 
@@ -13,14 +16,16 @@
         >
           <view class="picker-value">
             {{ selectedCustomer ? selectedCustomer.name : '请选择客户' }}
+            <text class="arrow">›</text>
           </view>
         </picker>
       </view>
     </view>
 
     <!-- 商品选择 -->
-    <view class="section">
+    <view class="section card-section">
       <view class="section-header">
+        <text class="section-icon">📦</text>
         <text class="section-title">商品明细</text>
         <text class="add-btn" @click="goToSelectProduct">+ 添加商品</text>
       </view>
@@ -55,13 +60,17 @@
       </view>
 
       <view v-if="orderItems.length === 0" class="empty-tip">
-        请添加商品
+        <text class="empty-icon">🛒</text>
+        <text>请添加商品</text>
       </view>
     </view>
 
     <!-- 优惠设置 -->
-    <view class="section">
-      <view class="section-title">优惠设置</view>
+    <view class="section card-section">
+      <view class="section-header">
+        <text class="section-icon">🎫</text>
+        <text class="section-title">优惠设置</text>
+      </view>
       <view class="form-item">
         <text class="label">折扣率</text>
         <input 
@@ -76,6 +85,10 @@
 
     <!-- 订单金额 -->
     <view class="section amount-section">
+      <view class="amount-header">
+        <text class="amount-icon">💰</text>
+        <text class="amount-title">订单金额</text>
+      </view>
       <view class="amount-row">
         <text class="amount-label">原价合计</text>
         <text class="amount-value">¥{{ totalAmount.toFixed(2) }}</text>
@@ -91,8 +104,11 @@
     </view>
 
     <!-- 支付方式 -->
-    <view class="section">
-      <view class="section-title">支付方式</view>
+    <view class="section card-section">
+      <view class="section-header">
+        <text class="section-icon">💳</text>
+        <text class="section-title">支付方式</text>
+      </view>
       <view class="payment-methods">
         <view 
           class="method-item" 
@@ -119,8 +135,11 @@
     </view>
 
     <!-- 备注 -->
-    <view class="section">
-      <view class="section-title">备注</view>
+    <view class="section card-section">
+      <view class="section-header">
+        <text class="section-icon">📝</text>
+        <text class="section-title">备注</text>
+      </view>
       <textarea 
         class="remark-input" 
         v-model="remark" 
@@ -307,44 +326,54 @@ export default {
 </script>
 
 <style>
+/* 全局 */
 .page {
   padding: 20rpx;
-  padding-bottom: 160rpx;
+  padding-bottom: 180rpx;
+  background: #f8f9fa;
 }
 
-.section {
+/* 卡片区块 */
+.card-section {
   background: #fff;
-  border-radius: 16rpx;
+  border-radius: 20rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
 }
 
 .section-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   margin-bottom: 20rpx;
 }
 
+.section-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+
 .section-title {
   font-size: 28rpx;
   font-weight: bold;
+  flex: 1;
 }
 
 .add-btn {
-  color: #3cc51f;
+  color: #667eea;
   font-size: 26rpx;
+  font-weight: 500;
 }
 
 .form-item {
   display: flex;
   align-items: center;
-  padding: 16rpx 0;
+  padding: 20rpx 0;
   border-bottom: 1rpx solid #f5f5f5;
 }
 
 .label {
-  width: 120rpx;
+  width: 140rpx;
   font-size: 28rpx;
   color: #666;
 }
@@ -352,17 +381,37 @@ export default {
 .picker-value {
   flex: 1;
   font-size: 28rpx;
+  color: #333;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.arrow {
+  font-size: 32rpx;
+  color: #ccc;
 }
 
 .discount-input {
   width: 120rpx;
   text-align: right;
+  font-size: 28rpx;
+  padding: 10rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
 }
 
+.unit {
+  font-size: 28rpx;
+  color: #666;
+  margin-left: 10rpx;
+}
+
+/* 订单商品项 */
 .order-item {
   padding: 20rpx;
   background: #f9f9f9;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
   margin-bottom: 16rpx;
 }
 
@@ -374,6 +423,7 @@ export default {
   font-size: 28rpx;
   font-weight: bold;
   display: block;
+  color: #333;
 }
 
 .item-spec {
@@ -392,7 +442,7 @@ export default {
   margin-right: 20rpx;
 }
 
-.qty-label, .qty-label {
+.qty-label {
   font-size: 24rpx;
   color: #666;
   margin-right: 8rpx;
@@ -418,18 +468,48 @@ export default {
 
 .delete-btn {
   margin-left: 20rpx;
-  font-size: 36rpx;
+  font-size: 40rpx;
   color: #999;
+  padding: 10rpx;
 }
 
 .empty-tip {
   padding: 40rpx;
   text-align: center;
   color: #999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
+.empty-icon {
+  font-size: 60rpx;
+  margin-bottom: 10rpx;
+}
+
+/* 金额区域 */
 .amount-section {
-  background: #fff7e6;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.amount-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.amount-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+
+.amount-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #fff;
 }
 
 .amount-row {
@@ -440,30 +520,30 @@ export default {
 
 .amount-label {
   font-size: 26rpx;
-  color: #666;
+  color: rgba(255, 255, 255, 0.8);
 }
 
 .amount-value {
   font-size: 26rpx;
-  color: #333;
+  color: #fff;
 }
 
 .amount-value.discount {
-  color: #52c41a;
+  color: #7dff7d;
 }
 
 .amount-row.actual {
-  border-top: 1rpx dashed #ddd;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
   padding-top: 20rpx;
   margin-top: 12rpx;
 }
 
 .amount-row.actual .amount-value {
-  font-size: 32rpx;
+  font-size: 36rpx;
   font-weight: bold;
-  color: #ff4d4f;
 }
 
+/* 支付方式 */
 .payment-methods {
   display: flex;
   gap: 20rpx;
@@ -471,25 +551,32 @@ export default {
 
 .method-item {
   flex: 1;
-  padding: 20rpx;
+  padding: 24rpx;
   text-align: center;
   background: #f5f5f5;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
   font-size: 26rpx;
+  transition: all 0.3s;
 }
 
 .method-item.active {
-  background: #e6f7ff;
-  color: #1890ff;
-  border: 1rpx solid #1890ff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
 }
 
+/* 备注 */
 .remark-input {
   width: 100%;
   height: 120rpx;
   font-size: 28rpx;
+  background: #f9f9f9;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
 }
 
+/* 底部提交 */
 .submit-bar {
   position: fixed;
   bottom: 0;
@@ -497,9 +584,9 @@ export default {
   right: 0;
   display: flex;
   align-items: center;
-  padding: 20rpx;
+  padding: 20rpx 30rpx;
   background: #fff;
-  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
 }
 
 .submit-info {
@@ -508,19 +595,21 @@ export default {
 }
 
 .submit-amount {
-  font-size: 36rpx;
+  font-size: 40rpx;
   font-weight: bold;
   color: #ff4d4f;
 }
 
 .submit-btn {
-  width: 200rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  background: #3cc51f;
+  width: 240rpx;
+  height: 88rpx;
+  line-height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
   border: none;
-  border-radius: 40rpx;
-  font-size: 28rpx;
+  border-radius: 44rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.4);
 }
 </style>
diff --git a/src/pages/order/list.vue b/src/pages/order/list.vue
index c798882..ee335ec 100644
--- a/src/pages/order/list.vue
+++ b/src/pages/order/list.vue
@@ -40,52 +40,61 @@
         class="order-card"
         @click="viewDetail(order)"
       >
-        <view class="order-header">
-          <text class="order-no">{{ order.orderNo }}</text>
+        <view class="card-header">
+          <view class="order-no-wrap">
+            <text class="order-icon">📋</text>
+            <text class="order-no">{{ order.orderNo }}</text>
+          </view>
           <text class="order-status" :class="getStatusClass(order.status)">
             {{ getStatusText(order.status) }}
           </text>
         </view>
         
-        <view class="order-customer">
-          <text class="customer-name">{{ order.customerName || '散客' }}</text>
-          <text class="customer-phone">{{ order.customerPhone || '-' }}</text>
-        </view>
-
-        <view class="order-items">
-          <text class="items-label">商品明细</text>
-          <text class="items-count">{{ getItemCount(order.orderId) }}种商品</text>
-        </view>
-
-        <view class="order-amount">
-          <view class="amount-row">
-            <text class="amount-label">原价</text>
-            <text class="amount-value">¥{{ order.totalAmount }}</text>
+        <view class="card-body">
+          <view class="customer-row">
+            <text class="customer-label">👤 客户</text>
+            <text class="customer-name">{{ order.customerName || '散客' }}</text>
+            <text class="customer-phone">{{ order.customerPhone || '' }}</text>
           </view>
-          <view class="amount-row">
-            <text class="amount-label">优惠</text>
-            <text class="amount-value discount">-¥{{ order.discountAmount }}</text>
-          </view>
-          <view class="amount-row actual">
-            <text class="amount-label">实付</text>
-            <text class="amount-value">¥{{ order.actualAmount }}</text>
+          
+          <view class="items-row">
+            <text class="items-label">📦 商品</text>
+            <text class="items-count">{{ getItemCount(order.orderId) }}种商品</text>
           </view>
         </view>
 
-        <view class="order-footer">
-          <text class="order-time">{{ formatTime(order.createdAt) }}</text>
-          <view class="order-actions" v-if="order.status === 0">
-            <text class="action-btn confirm" @click.stop="confirmOrder(order)">确认</text>
-            <text class="action-btn cancel" @click.stop="cancelOrder(order)">取消</text>
-            <text class="action-btn edit" @click.stop="editOrder(order)">编辑</text>
+        <view class="card-footer">
+          <view class="amount-info">
+            <view class="amount-row">
+              <text class="amount-label">原价</text>
+              <text class="amount-value">¥{{ order.totalAmount }}</text>
+            </view>
+            <view class="amount-row">
+              <text class="amount-label">优惠</text>
+              <text class="amount-value discount">-¥{{ order.discountAmount }}</text>
+            </view>
+            <view class="amount-row actual">
+              <text class="amount-label">实付</text>
+              <text class="amount-value">¥{{ order.actualAmount }}</text>
+            </view>
+          </view>
+          
+          <view class="action-section">
+            <text class="order-time">{{ formatTime(order.createdAt) }}</text>
+            <view class="order-actions" v-if="order.status === 0">
+              <text class="action-btn confirm" @click.stop="confirmOrder(order)">确认</text>
+              <text class="action-btn cancel" @click.stop="cancelOrder(order)">取消</text>
+              <text class="action-btn edit" @click.stop="editOrder(order)">编辑</text>
+            </view>
+            <text class="operator" v-else>{{ order.operatorName }}</text>
           </view>
-          <text class="operator" v-else>{{ order.operatorName }}</text>
         </view>
       </view>
 
       <!-- 空状态 -->
       <view v-if="orders.length === 0" class="empty">
-        <text>暂无订单</text>
+        <text class="empty-icon">📭</text>
+        <text class="empty-text">暂无订单</text>
       </view>
     </view>
 
@@ -249,44 +258,69 @@ export default {
 </script>
 
 <style>
+/* 全局 */
 .page {
+  min-height: 100vh;
+  background: #f8f9fa;
   padding: 20rpx;
 }
 
+/* 筛选栏 */
 .filter-bar {
   display: flex;
   background: #fff;
   border-radius: 16rpx;
-  padding: 16rpx;
+  padding: 12rpx;
   margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
 }
 
 .filter-item {
   flex: 1;
   text-align: center;
-  padding: 12rpx;
+  padding: 16rpx;
   font-size: 26rpx;
   color: #666;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
+  transition: all 0.3s;
 }
 
 .filter-item.active {
-  background: #3cc51f;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
+  font-weight: bold;
+}
+
+/* 订单列表 */
+.order-list {
+  padding-bottom: 20rpx;
 }
 
 .order-card {
   background: #fff;
-  border-radius: 16rpx;
+  border-radius: 20rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
 }
 
-.order-header {
+.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 20rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.order-no-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.order-icon {
+  font-size: 28rpx;
+  margin-right: 10rpx;
 }
 
 .order-no {
@@ -296,78 +330,87 @@ export default {
 }
 
 .order-status {
-  font-size: 24rpx;
-  padding: 4rpx 12rpx;
-  border-radius: 4rpx;
+  font-size: 22rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
 }
 
 .status-success {
-  background: #f6ffed;
-  color: #52c41a;
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  color: #fff;
 }
 
 .status-cancel {
-  background: #fff1f0;
-  color: #ff4d4f;
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+  color: #fff;
 }
 
 .status-refunding {
-  background: #fff7e6;
-  color: #fa8c16;
+  background: linear-gradient(135deg, #fa8c16 0%, #ffc069 100%);
+  color: #fff;
 }
 
 .status-refunded {
-  background: #f9f0ff;
-  color: #722ed1;
+  background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%);
+  color: #fff;
 }
 
-.order-customer {
+/* 卡片主体 */
+.card-body {
+  margin-bottom: 20rpx;
+}
+
+.customer-row, .items-row {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 16rpx;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.customer-label, .items-label {
+  font-size: 24rpx;
+  color: #999;
+  width: 100rpx;
 }
 
 .customer-name {
   font-size: 26rpx;
   color: #333;
+  font-weight: 500;
 }
 
 .customer-phone {
   font-size: 24rpx;
   color: #999;
-}
-
-.order-items {
-  display: flex;
-  justify-content: space-between;
-  padding: 16rpx 0;
-  border-top: 1rpx solid #f5f5f5;
-  border-bottom: 1rpx solid #f5f5f5;
-}
-
-.items-label {
-  font-size: 24rpx;
-  color: #666;
+  margin-left: 20rpx;
 }
 
 .items-count {
   font-size: 24rpx;
-  color: #999;
+  color: #667eea;
+  font-weight: 500;
 }
 
-.order-amount {
-  padding: 16rpx 0;
+/* 卡片底部 */
+.card-footer {
+  border-top: 1rpx solid #f5f5f5;
+  padding-top: 16rpx;
+}
+
+.amount-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16rpx;
 }
 
 .amount-row {
   display: flex;
-  justify-content: space-between;
-  padding: 8rpx 0;
+  align-items: center;
 }
 
 .amount-label {
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: #999;
+  margin-right: 10rpx;
 }
 
 .amount-value {
@@ -379,71 +422,74 @@ export default {
   color: #52c41a;
 }
 
-.amount-row.actual {
-  border-top: 1rpx dashed #ddd;
-  padding-top: 16rpx;
-  margin-top: 8rpx;
-}
-
-.amount-row.actual .amount-label {
-  font-weight: bold;
-}
-
 .amount-row.actual .amount-value {
   font-size: 28rpx;
   font-weight: bold;
   color: #ff4d4f;
 }
 
-.order-footer {
+/* 操作区域 */
+.action-section {
   display: flex;
   justify-content: space-between;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f5f5f5;
+  align-items: center;
 }
 
 .order-time {
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: #999;
 }
 
 .operator {
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: #999;
 }
 
 .order-actions {
   display: flex;
-  gap: 16rpx;
+  gap: 12rpx;
 }
 
 .action-btn {
-  font-size: 24rpx;
-  padding: 8rpx 16rpx;
-  border-radius: 4rpx;
+  font-size: 22rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 20rpx;
 }
 
 .action-btn.confirm {
-  background: #3cc51f;
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
   color: #fff;
 }
 
 .action-btn.cancel {
-  background: #fff1f0;
-  color: #ff4d4f;
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+  color: #fff;
 }
 
 .action-btn.edit {
-  background: #e6f7ff;
-  color: #1890ff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
 }
 
+/* 空状态 */
 .empty {
   padding: 100rpx;
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-icon {
+  font-size: 100rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  font-size: 28rpx;
   color: #999;
 }
 
+/* 加载更多 */
 .load-more {
   padding: 20rpx;
   text-align: center;
diff --git a/src/pages/product/list.vue b/src/pages/product/list.vue
index 463f555..e7b2baa 100644
--- a/src/pages/product/list.vue
+++ b/src/pages/product/list.vue
@@ -1,14 +1,17 @@
 <template>
   <view class="page">
     <!-- 搜索栏 -->
-    <view class="search-bar">
-      <input 
-        class="search-input" 
-        v-model="keyword" 
-        placeholder="搜索商品名称" 
-        @confirm="search"
-      />
-      <button class="search-btn" @click="search">搜索</button>
+    <view class="search-section">
+      <view class="search-bar">
+        <text class="search-icon">🔍</text>
+        <input 
+          class="search-input" 
+          v-model="keyword" 
+          placeholder="搜索商品名称" 
+          placeholder-class="placeholder"
+          @confirm="search"
+        />
+      </view>
     </view>
 
     <!-- 分类筛选 -->
@@ -36,26 +39,32 @@
       <view 
         v-for="item in products" 
         :key="item.productId" 
-        class="product-item"
+        class="product-card"
         @click="viewDetail(item)"
       >
-        <view class="product-info">
+        <view class="product-image">
+          <text class="product-emoji">📦</text>
+        </view>
+        <view class="product-content">
           <text class="product-name">{{ item.name }}</text>
           <text class="product-spec">{{ item.spec || '-' }}</text>
-          <view class="product-price">
-            <text class="price">¥{{ item.price }}</text>
-            <text class="unit">/{{ item.unit }}</text>
+          <view class="product-footer">
+            <view class="price-wrapper">
+              <text class="price">¥{{ item.price }}</text>
+              <text class="unit">/{{ item.unit }}</text>
+            </view>
+            <view class="stock-badge">
+              <text class="stock-label">库存</text>
+              <text class="stock-value">{{ getStock(item.productId) }}</text>
+            </view>
           </view>
         </view>
-        <view class="product-stock">
-          <text class="stock-label">库存</text>
-          <text class="stock-value">{{ getStock(item.productId) }}</text>
-        </view>
       </view>
       
       <!-- 空状态 -->
       <view v-if="products.length === 0" class="empty">
-        <text>暂无商品</text>
+        <text class="empty-icon">📭</text>
+        <text class="empty-text">暂无商品</text>
       </view>
     </view>
 
@@ -147,76 +156,115 @@ export default {
 </script>
 
 <style>
+/* 全局 */
 .page {
-  padding: 20rpx;
+  min-height: 100vh;
+  background: #f8f9fa;
+}
+
+/* 搜索区域 */
+.search-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 30rpx 30rpx 10rpx;
 }
 
 .search-bar {
   display: flex;
-  margin-bottom: 20rpx;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 50rpx;
+  padding: 0 30rpx;
+  height: 80rpx;
+}
+
+.search-icon {
+  font-size: 32rpx;
+  margin-right: 16rpx;
 }
 
 .search-input {
   flex: 1;
-  height: 70rpx;
-  padding: 0 20rpx;
-  background: #fff;
-  border-radius: 8rpx;
   font-size: 28rpx;
+  color: #333;
 }
 
-.search-btn {
-  width: 120rpx;
-  height: 70rpx;
-  line-height: 70rpx;
-  background: #3cc51f;
-  color: #fff;
-  border: none;
-  border-radius: 8rpx;
-  margin-left: 20rpx;
-  font-size: 28rpx;
+.placeholder {
+  color: #999;
 }
 
+/* 分类筛选 */
 .category-scroll {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20rpx 30rpx 40rpx;
   white-space: nowrap;
-  margin-bottom: 20rpx;
 }
 
 .category-item {
   display: inline-block;
-  padding: 12rpx 24rpx;
+  padding: 14rpx 32rpx;
   margin-right: 16rpx;
-  background: #fff;
-  border-radius: 8rpx;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 30rpx;
   font-size: 26rpx;
-  color: #666;
+  color: rgba(255, 255, 255, 0.8);
+  transition: all 0.3s;
 }
 
 .category-item.active {
-  background: #3cc51f;
-  color: #fff;
-}
-
-.product-list {
   background: #fff;
-  border-radius: 16rpx;
+  color: #667eea;
+  font-weight: bold;
 }
 
-.product-item {
+/* 商品列表 */
+.product-list {
   display: flex;
-  justify-content: space-between;
-  padding: 24rpx;
-  border-bottom: 1rpx solid #f5f5f5;
+  flex-wrap: wrap;
+  padding: 20rpx;
 }
 
-.product-info {
-  flex: 1;
+.product-card {
+  width: 48%;
+  background: #fff;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.3s;
+}
+
+.product-card:nth-child(odd) {
+  margin-right: 4%;
+}
+
+.product-card:active {
+  transform: scale(0.98);
+}
+
+.product-image {
+  height: 200rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-emoji {
+  font-size: 80rpx;
+}
+
+.product-content {
+  padding: 20rpx;
 }
 
 .product-name {
   font-size: 28rpx;
   font-weight: bold;
+  color: #333;
   display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .product-spec {
@@ -226,47 +274,72 @@ export default {
   display: block;
 }
 
-.product-price {
-  margin-top: 12rpx;
+.product-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16rpx;
+}
+
+.price-wrapper {
+  display: flex;
+  align-items: baseline;
 }
 
 .price {
   color: #ff4d4f;
-  font-size: 28rpx;
+  font-size: 32rpx;
   font-weight: bold;
 }
 
 .unit {
   color: #999;
-  font-size: 24rpx;
+  font-size: 22rpx;
+  margin-left: 4rpx;
 }
 
-.product-stock {
+.stock-badge {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  background: #f0f0f0;
+  border-radius: 20rpx;
+  padding: 6rpx 16rpx;
 }
 
 .stock-label {
-  font-size: 24rpx;
+  font-size: 20rpx;
   color: #999;
+  margin-right: 6rpx;
 }
 
 .stock-value {
-  font-size: 28rpx;
+  font-size: 24rpx;
   color: #333;
   font-weight: bold;
 }
 
+/* 空状态 */
 .empty {
-  padding: 100rpx;
-  text-align: center;
+  width: 100%;
+  padding: 100rpx 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-icon {
+  font-size: 100rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  font-size: 28rpx;
   color: #999;
 }
 
+/* 加载更多 */
 .load-more {
-  padding: 20rpx;
+  padding: 30rpx;
   text-align: center;
   color: #999;
   font-size: 24rpx;
diff --git a/src/pages/stock/list.vue b/src/pages/stock/list.vue
index 45bd468..569593b 100644
--- a/src/pages/stock/list.vue
+++ b/src/pages/stock/list.vue
@@ -1,14 +1,17 @@
 <template>
   <view class="stock-list">
     <!-- 搜索栏 -->
-    <view class="search-bar">
-      <input 
-        class="search-input" 
-        v-model="keyword" 
-        placeholder="搜索商品名称" 
-        @confirm="search"
-      />
-      <button class="search-btn" @click="search">搜索</button>
+    <view class="search-section">
+      <view class="search-bar">
+        <text class="search-icon">🔍</text>
+        <input 
+          class="search-input" 
+          v-model="keyword" 
+          placeholder="搜索商品名称" 
+          placeholder-class="placeholder"
+          @confirm="search"
+        />
+      </view>
     </view>
 
     <!-- 库存列表 -->
@@ -16,29 +19,35 @@
       <view 
         v-for="item in stockList" 
         :key="item.stockId" 
-        class="stock-item"
+        class="stock-card"
         @click="goToDetail(item)"
       >
-        <view class="stock-info">
-          <text class="product-name">{{ item.productName || '商品' + item.productId }}</text>
-          <text class="warehouse">仓库: {{ item.warehouseId || '默认' }}</text>
+        <view class="stock-left">
+          <view class="product-icon">📦</view>
+          <view class="stock-info">
+            <text class="product-name">{{ item.productName || '商品' + item.productId }}</text>
+            <text class="warehouse">🏠 仓库: {{ item.warehouseId || '默认' }}</text>
+          </view>
         </view>
-        <view class="stock-num">
-          <text class="quantity">{{ item.quantity || 0 }}</text>
-          <text class="label">库存</text>
-          <text class="locked" v-if="item.lockedQuantity > 0">锁定: {{ item.lockedQuantity }}</text>
+        <view class="stock-right">
+          <view class="stock-num">
+            <text class="quantity">{{ item.quantity || 0 }}</text>
+            <text class="label">库存</text>
+          </view>
+          <text class="locked" v-if="item.lockedQuantity > 0">🔒 锁定: {{ item.lockedQuantity }}</text>
         </view>
       </view>
       
       <view v-if="stockList.length === 0" class="empty">
-        <text>暂无库存数据</text>
+        <text class="empty-icon">📭</text>
+        <text class="empty-text">暂无库存数据</text>
       </view>
     </scroll-view>
 
     <!-- 底部操作 -->
     <view class="bottom-action">
-      <button class="action-btn primary" @click="goToIn">入库</button>
-      <button class="action-btn" @click="goToFlow">流水</button>
+      <button class="action-btn primary" @click="goToIn">📥 入库</button>
+      <button class="action-btn" @click="goToFlow">📊 流水</button>
     </view>
   </view>
 </template>
@@ -113,48 +122,81 @@ export default {
 </script>
 
 <style scoped>
+/* 全局 */
 .stock-list {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding-bottom: 100px;
+  background: #f8f9fa;
+  padding-bottom: 120rpx;
+}
+
+/* 搜索区域 */
+.search-section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 30rpx 30rpx 20rpx;
 }
 
 .search-bar {
   display: flex;
-  padding: 20rpx;
-  background: #fff;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 50rpx;
+  padding: 0 30rpx;
+  height: 80rpx;
+}
+
+.search-icon {
+  font-size: 32rpx;
+  margin-right: 16rpx;
 }
 
 .search-input {
   flex: 1;
-  height: 72rpx;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-  padding: 0 20rpx;
   font-size: 28rpx;
+  color: #333;
 }
 
-.search-btn {
-  margin-left: 20rpx;
-  height: 72rpx;
-  line-height: 72rpx;
-  font-size: 28rpx;
-  background: #3cc51f;
-  color: #fff;
+.placeholder {
+  color: #999;
 }
 
+/* 库存列表 */
 .stock-scroll {
   height: calc(100vh - 280rpx);
+  padding: 20rpx;
 }
 
-.stock-item {
+.stock-card {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 20rpx;
   padding: 30rpx;
   background: #fff;
-  border-radius: 12rpx;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.3s;
+}
+
+.stock-card:active {
+  transform: scale(0.98);
+}
+
+.stock-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.product-icon {
+  width: 90rpx;
+  height: 90rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 44rpx;
+  margin-right: 20rpx;
 }
 
 .stock-info {
@@ -163,8 +205,9 @@ export default {
 
 .product-name {
   display: block;
-  font-size: 30rpx;
-  font-weight: 500;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
   margin-bottom: 8rpx;
 }
 
@@ -173,57 +216,82 @@ export default {
   color: #999;
 }
 
-.stock-num {
+.stock-right {
   text-align: right;
 }
 
+.stock-num {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
 .quantity {
   display: block;
-  font-size: 40rpx;
+  font-size: 44rpx;
   font-weight: bold;
-  color: #3cc51f;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .label {
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: #999;
 }
 
 .locked {
   display: block;
-  font-size: 24rpx;
-  color: #ff9900;
+  font-size: 22rpx;
+  color: #fa8c16;
   margin-top: 8rpx;
 }
 
+/* 空状态 */
 .empty {
-  text-align: center;
   padding: 100rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-icon {
+  font-size: 100rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  font-size: 28rpx;
   color: #999;
 }
 
+/* 底部操作 */
 .bottom-action {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
-  padding: 20rpx;
+  padding: 20rpx 30rpx;
   background: #fff;
-  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
 }
 
 .action-btn {
   flex: 1;
-  height: 80rpx;
-  line-height: 80rpx;
+  height: 88rpx;
+  line-height: 88rpx;
   font-size: 30rpx;
+  border-radius: 44rpx;
   margin: 0 10rpx;
-  border-radius: 8rpx;
+  background: #f5f5f5;
+  color: #333;
+  font-weight: 500;
 }
 
 .action-btn.primary {
-  background: #3cc51f;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
+  box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.4);
 }
 </style>