diff --git a/pages/seller/index.wxml b/pages/seller/index.wxml
index 2c5cb80..41bf3a4 100644
--- a/pages/seller/index.wxml
+++ b/pages/seller/index.wxml
@@ -1,16 +1,16 @@
 <view class="container {{pageScrollLock ? 'page-scroll-lock' : ''}}" 
       style="align-items: flex-start; padding: 20rpx; width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; box-sizing: border-box;"
       catchtouchmove="{{touchMoveBlocked ? 'preventTouchMove' : ''}}">
-  <view style="display: flex; justify-content: space-between; align-items: center; width: 90%; margin-bottom: 20rpx;">
+  <view style="display: flex; justify-content: space-between; align-items: center; width: 95%; margin-bottom: 24rpx;">
     <view class="title">我的货源</view>
-    <view style="display: flex; align-items: center; gap: 10rpx;">
+    <view style="display: flex; align-items: center; gap: 16rpx;">
       <button 
         bindtap="contactCustomerService"
         class="customer-service-btn"
       >
         联系客服
       </button>
-      <view style="color: {{partnerstatus === 'approved' ? '#52c41a' : '#f5222d'}}; font-size: 24rpx;">
+      <view class="settlement-status {{partnerstatus === 'approved' ? 'approved' : 'pending'}}">
         {{partnerstatus === 'approved' ? '已入驻' : '未入驻'}}
       </view>
       <button 
@@ -23,21 +23,19 @@
   </view>
   
   <!-- 搜索框 -->
-  <view style="width: 100%; display: flex; justify-content: center; margin-bottom: 20rpx;">
-    <view style="width: 90%; display: flex; border: 1rpx solid #ddd; border-radius: 40rpx; overflow: hidden;">
-      <input 
-        style="flex: 1; padding: 20rpx 30rpx;"
-        placeholder="搜索货源名称或品种" 
-        bindinput="onSearchInput" 
-        value="{{searchKeyword}}"
-      />
-      <button 
-        style="background-color: #52c41a; color: white; font-size: 26rpx; height: 80rpx; line-height: 80rpx; padding: 0 30rpx;"
-        bindtap="searchSupplies"
-      >
-        搜索
-      </button>
-    </view>
+  <view class="search-container" style="width: 95%; margin: 0 auto 32rpx;">
+    <input 
+      class="search-input"
+      placeholder="搜索货源名称或品种" 
+      bindinput="onSearchInput" 
+      value="{{searchKeyword}}"
+    />
+    <button 
+      class="search-btn"
+      bindtap="searchSupplies"
+    >
+      搜索
+    </button>
   </view>
   
   <button 
@@ -49,18 +47,18 @@
   </button>
   
   <!-- 已上架货源 -->
-  <view style="margin-top: 30rpx; width: 100%;">
-    <view style="font-size: 28rpx; font-weight: bold; color: #52c41a; margin-bottom: 15rpx; display: flex; justify-content: space-between; align-items: center;">
-      <text>已上架货源 ({{publishedSupplies.length}})</text>
-      <view bindtap="togglePublishedExpand" style="width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center;">
-        <text wx:if="{{isPublishedExpanded}}" style="color: #52c41a; font-size: 28rpx;">▼</text>
-        <text wx:else style="color: #52c41a; font-size: 28rpx;">▲</text>
+  <view style="margin-top: 30rpx; width: 95%; margin-left: auto; margin-right: auto;">
+    <view class="category-title">
+      <text>已上架货源 <span class="count">({{publishedSupplies.length}})</span></text>
+      <view class="toggle-btn" bindtap="togglePublishedExpand">
+        <text wx:if="{{isPublishedExpanded}}" style="color: var(--primary-color);">▼</text>
+        <text wx:else style="color: var(--primary-color);">▲</text>
       </view>
     </view>
     
     <block wx:if="{{isPublishedExpanded}}">
       <block wx:if="{{publishedSupplies.length > 0}}">
-        <view wx:for="{{publishedSupplies}}" wx:key="id" class="card" style="width: 100%;">
+        <view wx:for="{{publishedSupplies}}" wx:key="id" class="card" style="width: 100%; margin-bottom: 24rpx;">
           <!-- 图片和信息1:1比例并排显示 -->
           <view style="display: flex; width: 100%; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
             <!-- 左侧图片区域 50%宽度 -->
@@ -462,84 +460,81 @@
   </view>
   
   <!-- 创建货源弹窗 -->
-  <view class="modal" wx:if="{{showModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 999;" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
-    <view class="modal-content" style="width: 92%; max-width: 600rpx; background: white; padding: 40rpx; border-radius: 20rpx; max-height: 85vh; position: relative; box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.15); transform: translateZ(0); -webkit-transform: translateZ(0);">
+  <view class="modal" wx:if="{{showModal}}" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
+    <view class="modal-content">
       <!-- 固定的关闭按钮 -->
-      <view style="position: absolute; top: 20rpx; right: 20rpx; background-color: #f5f5f5; color: #666; width: 60rpx; height: 60rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36rpx; z-index: 10;" bindtap="hideModal">×</view>
+      <view class="modal-close" bindtap="hideModal">×</view>
       
       <scroll-view scroll-y="true" style="height: 950rpx; overflow-y: scroll; -webkit-overflow-scrolling: touch; transform: translateZ(0); -webkit-transform: translateZ(0);" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
-        <view class="title" style="text-align: center; font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; margin-top: 10rpx;">创建货源</view>
+        <view class="modal-title">创建货源</view>
         
         <!-- 照片上传区域 -->
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-top: 10rpx;">商品图片</view>
-        <view class="upload-area" style="width: 100%; margin: 0 auto; margin-bottom: 30rpx; border: 1rpx dashed #ddd; border-radius: 12rpx; padding: 24rpx;">
+        <view class="form-label">商品图片</view>
+        <view class="upload-area">
           <view style="display: flex; flex-wrap: wrap;">
             <!-- 已上传的图片 -->
-            <view wx:for="{{newSupply.imageUrls}}" wx:key="index" style="position: relative; width: 160rpx; height: 160rpx; margin: 10rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);">
+            <view wx:for="{{newSupply.imageUrls}}" wx:key="index" class="upload-item">
               <image src="{{item}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{newSupply.imageUrls}}" data-index="{{index}}"></image>
-              <view class="delete-icon" style="position: absolute; top: 8rpx; right: 8rpx; background-color: rgba(0,0,0,0.6); color: white; width: 44rpx; height: 44rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx;" bindtap="deleteImage" data-index="{{index}}" data-type="new">×</view>
+              <view class="delete-icon" bindtap="deleteImage" data-index="{{index}}" data-type="new">×</view>
             </view>
             <!-- 上传按钮 -->
-            <view wx:if="{{newSupply.imageUrls.length < 5}}" style="width: 160rpx; height: 160rpx; margin: 10rpx; border: 2rpx dashed #1677ff; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; background-color: #f0f8ff;" bindtap="chooseImage" data-type="new">
-              <text style="font-size: 60rpx; color: #1677ff;">+</text>
+            <view wx:if="{{newSupply.imageUrls.length < 5}}" class="upload-btn" bindtap="chooseImage" data-type="new">
+              <text style="font-size: 60rpx;">+</text>
             </view>
           </view>
-          <view style="font-size: 22rpx; color: #999; margin-top: 16rpx; text-align: center;">最多上传5张图片</view>
+          <view class="upload-hint">最多上传5张图片</view>
         </view>
         
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">商品名称</view>
-        <view 
-          bindtap="openNameSelectModal" 
-          style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative;">
+        <view class="form-label">商品名称</view>
+        <view class="selector" bindtap="openNameSelectModal">
           <view style="display: flex; justify-content: space-between; align-items: center;">
             <text>{{newSupply.name || '请选择商品名称'}}</text>
-            <text style="color: #999;">▼</text>
+            <text class="arrow">▼</text>
           </view>
         </view>
 
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">蛋黄</view>
-        <view bindtap="openYolkSelectModal" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative;">
+        <view class="form-label">蛋黄</view>
+        <view class="selector" bindtap="openYolkSelectModal">
           <view style="display: flex; justify-content: space-between; align-items: center;">
             <text>{{newSupply.yolk || '请选择蛋黄类型'}}</text>
-            <text style="color: #999;">▼</text>
+            <text class="arrow">▼</text>
           </view>
         </view>
         
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">规格</view>
-          <!-- 修改为可点击的视图，点击后打开自定义弹窗 -->
-          <view bindtap="onSpecChange" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative; z-index: 1;">
-            <view style="display: flex; justify-content: space-between; align-items: center;">
-              <text>{{newSupply.spec || '请选择规格'}}</text>
-              <text style="color: #999;">▼</text>
-            </view>
+        <view class="form-label">规格</view>
+        <!-- 修改为可点击的视图，点击后打开自定义弹窗 -->
+        <view class="selector" bindtap="onSpecChange" style="z-index: 1;">
+          <view style="display: flex; justify-content: space-between; align-items: center;">
+            <text>{{newSupply.spec || '请选择规格'}}</text>
+            <text class="arrow">▼</text>
           </view>
-          <!-- 搜索功能已移至弹窗内 -->
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">价格</view>
-        <input class="input" type="text" placeholder="请输入价格" bindinput="onInput" data-field="price" value="{{newSupply.price}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
+        </view>
+        <!-- 搜索功能已移至弹窗内 -->
+        <view class="form-label">价格</view>
+        <input class="form-input" type="text" placeholder="请输入价格" bindinput="onInput" data-field="price" value="{{newSupply.price}}" placeholder-style="font-size: 24rpx;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
         
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">件数</view>
-        <input class="input" type="number" placeholder="请输入件数" bindinput="onInput" data-field="minOrder" value="{{newSupply.minOrder}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
+        <view class="form-label">件数</view>
+        <input class="form-input" type="number" placeholder="请输入件数" bindinput="onInput" data-field="minOrder" value="{{newSupply.minOrder}}" placeholder-style="font-size: 24rpx;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
         
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">斤重</view>
-        <input class="input" type="text" placeholder="请输入斤重" bindinput="onInput" data-field="grossWeight" value="{{newSupply.grossWeight || ''}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
+        <view class="form-label">斤重</view>
+        <input class="form-input" type="text" placeholder="请输入斤重" bindinput="onInput" data-field="grossWeight" value="{{newSupply.grossWeight || ''}}" placeholder-style="font-size: 24rpx;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
         
-
-        <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">地区</view>
-        <input class="input" placeholder="请输入地区" bindinput="onInput" data-field="region" value="{{newSupply.region}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
+        <view class="form-label">地区</view>
+        <input class="form-input" placeholder="请输入地区" bindinput="onInput" data-field="region" value="{{newSupply.region}}" placeholder-style="font-size: 24rpx;" catchtouchmove="true" bindtouchstart="onInputTouchStart" bindtouchmove="onInputTouchMove"></input>
         
-        <view style="display: flex; justify-content: space-between; margin-top: 20rpx; margin-bottom: 20rpx; gap: 20rpx;">
-          <button bindtap="hideModal" style="flex: 1; height: 90rpx; line-height: 90rpx; background-color: #f5f5f5; color: #666; font-size: 30rpx; border-radius: 12rpx; margin: 0; display: flex; align-items: center; justify-content: center;">取消</button>
-          <button bindtap="addSupply" style="flex: 1; height: 90rpx; line-height: 90rpx; background-color: #07c160; color: white; font-size: 30rpx; border-radius: 12rpx; margin: 0; display: flex; align-items: center; justify-content: center;">创建</button>
+        <view class="form-actions">
+          <button class="btn btn-outline" bindtap="hideModal">取消</button>
+          <button class="btn btn-primary" bindtap="addSupply">创建</button>
         </view>
       </scroll-view>
     </view>
   </view>
   
   <!-- 编辑货源弹窗 -->
-  <view class="modal" wx:if="{{showEditModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 999;" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
-    <view class="modal-content" style="width: 92%; max-width: 600rpx; background: white; padding: 40rpx; border-radius: 20rpx; max-height: 85vh; position: relative; box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.15); transform: translateZ(0); -webkit-transform: translateZ(0);">
+  <view class="modal" wx:if="{{showEditModal}}" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
+    <view class="modal-content">
       <!-- 固定的关闭按钮 -->
-      <view style="position: absolute; top: 20rpx; right: 20rpx; background-color: #f5f5f5; color: #666; width: 60rpx; height: 60rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36rpx; z-index: 10;" bindtap="hideEditModal">×</view>
+      <view class="modal-close" bindtap="hideEditModal">×</view>
       
       <scroll-view scroll-y="true" style="height: 950rpx; overflow-y: scroll; -webkit-overflow-scrolling: touch; transform: translateZ(0); -webkit-transform: translateZ(0);" catchtouchmove="true" bindtouchstart="onModalTouchStart" bindtouchmove="onModalTouchMove">
         <view class="title" style="text-align: center; font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; margin-top: 10rpx;">编辑货源</view>
diff --git a/pages/seller/index.wxss b/pages/seller/index.wxss
index 7c08cb3..12c92fb 100644
--- a/pages/seller/index.wxss
+++ b/pages/seller/index.wxss
@@ -1,4 +1,45 @@
 /* pages/seller/index.wxss */
+/* 全局样式重置 */
+page {
+  background-color: #f5f7fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* 主色调定义 */
+:root {
+  --primary-color: #1677ff;
+  --success-color: #52c41a;
+  --warning-color: #faad14;
+  --error-color: #f5222d;
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --text-tertiary: #999999;
+  --border-color: #e8e8e8;
+  --background-color: #ffffff;
+  --light-background: #f5f7fa;
+  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.16);
+  --border-radius-sm: 8rpx;
+  --border-radius-md: 12rpx;
+  --border-radius-lg: 16rpx;
+  --transition: all 0.3s ease;
+}
+
+/* 容器样式优化 */
+.container {
+  background-color: var(--light-background);
+  min-height: 100vh;
+}
+
+/* 页面标题样式 */
+.title {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 24rpx;
+}
+
 /* 立体玻璃质感按钮基础样式 */
 .glass-btn {
   position: relative;
@@ -7,13 +48,10 @@
   padding: 28rpx 40rpx;
   font-size: 32rpx;
   font-weight: 600;
-  border-radius: 16rpx;
-  box-shadow: 
-    0 8rpx 24rpx rgba(0, 0, 0, 0.15),
-    0 0 0 1rpx rgba(255, 255, 255, 0.3) inset,
-    0 1rpx 0 rgba(255, 255, 255, 0.2) inset;
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-md);
   text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
+  transition: var(--transition);
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10rpx);
   -webkit-backdrop-filter: blur(10rpx);
@@ -26,47 +64,118 @@
 /* 按压效果 */
 .glass-btn:active {
   transform: translateY(2rpx);
-  box-shadow: 
-    0 4rpx 12rpx rgba(0, 0, 0, 0.1),
-    0 0 0 1rpx rgba(255, 255, 255, 0.2) inset,
-    0 1rpx 0 rgba(255, 255, 255, 0.1) inset;
+  box-shadow: var(--shadow-sm);
 }
 
 /* 主按钮 - 蓝色玻璃效果 */
 .primary-glass-btn {
-  background: rgba(22, 119, 255, 0.7);
+  background: linear-gradient(135deg, var(--primary-color), #4096ff);
+  color: white;
+  box-shadow: 0 8rpx 24rpx rgba(22, 119, 255, 0.3);
+}
+
+/* 按钮基础样式 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  border-radius: var(--border-radius-md);
+  border: none;
+  transition: var(--transition);
+  cursor: pointer;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* 按钮变体 */
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:active {
+  background-color: #4096ff;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-success {
+  background-color: var(--success-color);
   color: white;
-  box-shadow: 
-    0 8rpx 24rpx rgba(22, 119, 255, 0.3),
-    0 0 0 1rpx rgba(255, 255, 255, 0.3) inset,
-    0 1rpx 0 rgba(255, 255, 255, 0.2) inset;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-success:active {
+  background-color: #73d13d;
+}
+
+.btn-warning {
+  background-color: var(--warning-color);
+  color: white;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-warning:active {
+  background-color: #ffc53d;
+}
+
+.btn-danger {
+  background-color: var(--error-color);
+  color: white;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-danger:active {
+  background-color: #ff4d4f;
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: var(--primary-color);
+  border: 2rpx solid var(--primary-color);
+}
+
+.btn-outline:active {
+  background-color: rgba(22, 119, 255, 0.1);
+}
+
+/* 按钮尺寸 */
+.btn-sm {
+  padding: 12rpx 24rpx;
+  font-size: 24rpx;
+  border-radius: var(--border-radius-sm);
+}
+
+.btn-lg {
+  padding: 20rpx 48rpx;
+  font-size: 32rpx;
+  border-radius: var(--border-radius-lg);
 }
 
 /* 联系客服按钮样式 */
 .customer-service-btn {
-  background: #f0f0f0;
-  color: black;
-  font-size: 30rpx;
-  width: 70rpx;
-  height: 80rpx;
-  line-height: 70rpx;
+  background: var(--background-color);
+  color: var(--text-primary);
+  font-size: 28rpx;
+  width: 120rpx;
+  height: 64rpx;
+  line-height: 64rpx;
   padding: 0;
-  border-radius: 500rpx;
-  border: 1rpx solid #d9d9d9;
-  box-shadow: 
-    0 4rpx 16rpx rgba(0, 0, 0, 0.1),
-    0 1rpx 0 rgba(255, 255, 255, 0.5) inset;
-  transition: all 0.3s ease;
+  border-radius: var(--border-radius-full, 32rpx);
+  border: 2rpx solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
   white-space: nowrap;
   text-align: center;
 }
 
 .customer-service-btn:active {
   transform: translateY(2rpx);
-  background: #f5f5f5;
-  box-shadow: 
-    0 2rpx 8rpx rgba(0, 0, 0, 0.08),
-    0 1rpx 0 rgba(255, 255, 255, 0.3) inset;
+  background: var(--light-background);
+  box-shadow: var(--shadow-sm);
 }
 
 /* 服务区域容器 */
@@ -76,31 +185,405 @@
   gap: 20rpx;
 }
 
-/* 未入驻状态样式 */
-.no-settlement-status {
+/* 入驻状态样式 */
+.settlement-status {
   font-size: 24rpx;
-  color: #ff4d4f;
-  padding: 0 10rpx;
+  padding: 4rpx 16rpx;
+  border-radius: 16rpx;
+  font-weight: 500;
+}
+
+.settlement-status.approved {
+  color: var(--success-color);
+  background-color: rgba(82, 196, 26, 0.1);
+}
+
+.settlement-status.pending {
+  color: var(--warning-color);
+  background-color: rgba(250, 173, 20, 0.1);
 }
 
 /* 入驻按钮样式 */
 .apply-settlement-btn {
-  background: #1677ff;
+  background: var(--primary-color);
   color: white;
   font-size: 28rpx;
-  padding: 10rpx 20rpx;
-  border-radius: 8rpx;
+  padding: 12rpx 24rpx;
+  border-radius: var(--border-radius-md);
   border: none;
-  box-shadow: none;
-  transition: all 0.2s ease;
-  min-width: 100rpx;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+  min-width: 120rpx;
   text-align: center;
 }
 
 .apply-settlement-btn:active {
   background: #4096ff;
-  transform: none;
-  box-shadow: none;
+  transform: translateY(2rpx);
+  box-shadow: var(--shadow-sm);
+}
+
+/* 搜索框样式 */
+.search-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 32rpx;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius-lg);
+  padding: 12rpx 20rpx;
+  box-shadow: var(--shadow-sm);
+  box-sizing: border-box;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 28rpx;
+  color: var(--text-primary);
+  background: transparent;
+  padding: 12rpx 0;
+}
+
+.search-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.search-btn {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius-md);
+  padding: 12rpx 24rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+}
+
+.search-btn:active {
+  background-color: #4096ff;
+  transform: translateY(2rpx);
+}
+
+/* 卡片样式 */
+.card {
+  background-color: var(--background-color);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 24rpx;
+  overflow: hidden;
+  transition: var(--transition);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2rpx);
+}
+
+/* 分类标题样式 */
+.category-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 20rpx;
+  padding: 0 4rpx;
+}
+
+.category-title .count {
+  font-size: 24rpx;
+  font-weight: 400;
+  color: var(--text-secondary);
+}
+
+.category-title .toggle-btn {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  color: var(--text-tertiary);
+  transition: var(--transition);
+}
+
+.category-title .toggle-btn:active {
+  color: var(--primary-color);
+  transform: rotate(180deg);
+}
+
+/* 模态框样式 */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  backdrop-filter: blur(4rpx);
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+  width: 92%;
+  max-width: 600rpx;
+  background: white;
+  padding: 40rpx;
+  border-radius: var(--border-radius-lg);
+  max-height: 85vh;
+  position: relative;
+  box-shadow: var(--shadow-lg);
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  animation: slideUp 0.3s ease;
+}
+
+/* 表单元素样式 */
+.form-group {
+  margin-bottom: 30rpx;
+}
+
+.form-label {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 12rpx;
+  margin-left: 10rpx;
+}
+
+.form-input {
+  width: 100%;
+  height: 90rpx;
+  line-height: 90rpx;
+  padding: 0 24rpx;
+  font-size: 30rpx;
+  border: 2rpx solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  box-sizing: border-box;
+  background: white;
+  transition: var(--transition);
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 4rpx rgba(22, 119, 255, 0.1);
+}
+
+/* 上传区域样式 */
+.upload-area {
+  width: 100%;
+  margin: 0 auto 30rpx;
+  border: 2rpx dashed var(--border-color);
+  border-radius: var(--border-radius-md);
+  padding: 24rpx;
+  box-sizing: border-box;
+  background-color: #fafafa;
+  transition: var(--transition);
+}
+
+.upload-area:hover {
+  border-color: var(--primary-color);
+  background-color: rgba(22, 119, 255, 0.05);
+}
+
+.upload-item {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  margin: 10rpx;
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+}
+
+.upload-item:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.upload-item .delete-icon {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.upload-item .delete-icon:active {
+  background-color: rgba(0, 0, 0, 0.8);
+  transform: scale(0.9);
+}
+
+.upload-btn {
+  width: 160rpx;
+  height: 160rpx;
+  margin: 10rpx;
+  border: 2rpx dashed var(--primary-color);
+  border-radius: var(--border-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(22, 119, 255, 0.05);
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.upload-btn:hover {
+  background-color: rgba(22, 119, 255, 0.1);
+  transform: scale(1.05);
+}
+
+.upload-btn:active {
+  transform: scale(0.95);
+}
+
+/* 选择器样式 */
+.selector {
+  width: 100%;
+  height: 90rpx;
+  line-height: 90rpx;
+  padding: 0 24rpx;
+  font-size: 30rpx;
+  border: 2rpx solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  box-sizing: border-box;
+  background: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: var(--transition);
+  cursor: pointer;
+}
+
+.selector:hover {
+  border-color: var(--primary-color);
+}
+
+.selector:active {
+  background-color: rgba(22, 119, 255, 0.05);
+}
+
+.selector .arrow {
+  color: var(--text-tertiary);
+  font-size: 24rpx;
+  transition: var(--transition);
+}
+
+.selector:active .arrow {
+  transform: rotate(180deg);
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* 加载更多样式 */
+.load-more {
+  text-align: center;
+  padding: 32rpx 0;
+  color: var(--text-tertiary);
+  font-size: 28rpx;
+}
+
+.load-more .loading-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+}
+
+.load-more .loading-text::before {
+  content: '';
+  width: 24rpx;
+  height: 24rpx;
+  border: 2rpx solid var(--text-tertiary);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.load-more .load-more-text {
+  color: var(--primary-color);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.load-more .load-more-text:active {
+  opacity: 0.7;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 空状态样式 */
+.empty-state {
+  text-align: center;
+  padding: 80rpx 0;
+  color: var(--text-tertiary);
+}
+
+.empty-state .icon {
+  font-size: 120rpx;
+  margin-bottom: 24rpx;
+  opacity: 0.5;
+}
+
+.empty-state .text {
+  font-size: 28rpx;
+  margin-bottom: 16rpx;
+}
+
+.empty-state .subtext {
+  font-size: 24rpx;
+  opacity: 0.8;
 }
 
 /* 登录授权弹窗样式 - 专门用于登录相关弹窗 */
@@ -115,13 +598,16 @@
   justify-content: center;
   align-items: center;
   z-index: 999;
+  animation: fadeIn 0.3s ease;
 }
 
 .auth-modal-container {
-  background-color: white;
-  border-radius: 16rpx;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius-lg);
   width: 80%;
   padding: 40rpx;
+  box-shadow: var(--shadow-lg);
+  animation: slideUp 0.3s ease;
 }
 
 .auth-modal-title {
@@ -132,12 +618,13 @@
 .auth-modal-title text {
   font-size: 36rpx;
   font-weight: bold;
+  color: var(--text-primary);
 }
 
 .auth-modal-content {
   text-align: center;
   margin-bottom: 40rpx;
-  color: #666;
+  color: var(--text-secondary);
 }
 
 .auth-modal-content text {
@@ -149,18 +636,35 @@
 }
 
 .auth-primary-button {
-  background-color: #1677ff;
+  background-color: var(--primary-color);
   color: white;
   width: 100%;
-  border-radius: 8rpx;
+  border-radius: var(--border-radius-md);
   margin-bottom: 20rpx;
   border: none;
+  padding: 20rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+}
+
+.auth-primary-button:active {
+  background-color: #4096ff;
+  transform: translateY(2rpx);
 }
 
 .auth-cancel-button {
   background: none;
-  color: #666;
+  color: var(--text-secondary);
   border: none;
+  padding: 16rpx;
+  font-size: 28rpx;
+  transition: var(--transition);
+}
+
+.auth-cancel-button:active {
+  color: var(--text-primary);
 }
 
 /* 头像选择样式 */
@@ -179,6 +683,7 @@
   width: 160rpx;
   height: 160rpx;
   border-radius: 50%;
+  box-shadow: var(--shadow-sm);
 }
 
 /* 表单样式 */
@@ -190,14 +695,26 @@
   font-size: 28rpx;
   margin-bottom: 10rpx;
   display: block;
+  color: var(--text-primary);
 }
 
 .auth-form-input {
-  border: 1rpx solid #eee;
-  border-radius: 8rpx;
+  border: 2rpx solid var(--border-color);
+  border-radius: var(--border-radius-md);
   padding: 20rpx;
   width: 100%;
   max-width: 100%;
+  font-size: 28rpx;
+  color: var(--text-primary);
+  transition: var(--transition);
+  box-sizing: border-box;
+}
+
+.auth-form-input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 4rpx rgba(22, 119, 255, 0.1);
+  outline: none;
+}
   box-sizing: border-box;
   font-size: 28rpx;
 }