From ab826d12b52265bc4f25044d43a042df2104f972 Mon Sep 17 00:00:00 2001
From: kyy <3283105747@qq.com>
Date: 星期一, 14 七月 2025 21:34:10 +0800
Subject: [PATCH] 最新代码

---
 pages/QC/XJ/List.vue |  626 +++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 438 insertions(+), 188 deletions(-)

diff --git a/pages/QC/XJ/List.vue b/pages/QC/XJ/List.vue
index f19e6b0..9660e38 100644
--- a/pages/QC/XJ/List.vue
+++ b/pages/QC/XJ/List.vue
@@ -1,88 +1,107 @@
 <template>
   <view>
     <!-- 鍒锋柊椤甸潰鍚庣殑椤堕儴鎻愮ず妗� -->
-    <view class="tips" :class="{ 'tips-ani': tipShow }">鍒锋柊鎴愬姛</view>
+    <view class="tips" :class="{ 'tips-ani': tipShow }">
+      <view class="tips-icon">鉁�</view>
+      <view class="tips-text">鍒锋柊鎴愬姛</view>
+    </view>
 
     <view class="newsTab">
-      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
-                             active-color="#87cefa" ></uni-segmented-control>
+      <uni-segmented-control 
+        :current="current" 
+        :values="items" 
+        @clickItem="onClickItem" 
+        style-type="button"
+        active-color="#409EFF" 
+        class="segmented-control fixed-tabs"
+      ></uni-segmented-control>
+      
       <view class="content">
         <view v-show="current===0">
           <!-- 鍩轰簬 uni-list 鐨勯〉闈㈠竷灞� -->
-          <uni-list>
-            <!-- to 灞炴�ф惡甯﹀弬鏁拌烦杞鎯呴〉闈紝褰撳墠鍙负鍙傝�� -->
-            <uni-list-item style="margin-top: 10px;background-color:#EFEFF4;border-radius: 5px;"
-                           class="list-item" direction="column" v-for="item in data" :key="item.id"
-                           :to="'Add?id='+item.id+'&releaseNo='+item.releaseNo">
+          <view v-if="data.length === 0" class="empty-state">
+            <view class="empty-icon">馃摑</view>
+            <view class="empty-text">鏆傛棤鏈彁浜ょ殑妫�楠屽崟</view>
+          </view>
+          
+          <uni-list v-else>
+            <!-- 浼樺寲鍚庣殑鍒楄〃椤� -->
+            <uni-list-item 
+              style="margin-top: 15px;"
+              class="list-item enhanced-list" 
+              direction="column" 
+              v-for="item in data" 
+              :key="item.id"
+              :to="'Add?id='+item.id+'&releaseNo='+item.releaseNo"
+            >
               <!-- 閫氳繃header鎻掓Ы瀹氫箟鍒楄〃鐨勬爣棰� -->
               <template v-slot:header>
-                <view class="form-group uni-title" style="margin-bottom: 0;">
-                  <label class="form-label">妫�楠屽崟鍙�:</label>
-                  <input class="form-input" disabled="true" type="text" v-model="item.releaseNo"/>
+                <view class="card-header pending-header">
+                  <view class="form-group">
+                    <label class="form-label">妫�楠屽崟鍙�:</label>
+                    <input class="form-input order-no" disabled="true" type="text" v-model="item.releaseNo"/>
+                  </view>
                 </view>
               </template>
+              
               <!-- 閫氳繃body鎻掓Ы瀹氫箟鍒楄〃鍐呭鏄剧ず -->
               <template v-slot:body>
-                <view style="margin-top: 0;">
-                  <view class="uni-content">
-                    <view class="uni-title-sub uni-ellipsis-2">
+                <view class="card-body pending-body">
+                  <view class="row">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">鍒涘缓鏃堕棿:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.createDate"/>
                       </view>
                     </view>
-                    <view class="uni-note" >
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">鍒涘缓浜�:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
                       </view>
                     </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
+                  </view>
+                  
+                  <view class="row">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">浜х嚎:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.daa020"/>
                       </view>
                     </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">鐗╂枡缂栫爜:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                       </view>
                     </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
-                      <view class="form-group">
-                        <label class="form-label">鐗╂枡鍚嶇О:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.itemName"/>
-                      </view>
-                    </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
-                      <view class="form-group">
-                        <label class="form-label">瑙勬牸鍨嬪彿:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.itemModel"/>
-                      </view>
-                    </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
+                  </view>
+                  
+                  <!-- 浜у搧鍚嶇О鍗曠嫭涓�琛� -->
+                  <view class="form-group">
+                    <label class="form-label">浜у搧鍚嶇О:</label>
+                    <input class="form-input" disabled="true" type="text" v-model="item.itemName"/>
+                  </view>
+                  
+                  <!-- 浜у搧瑙勬牸鍗曠嫭涓�琛� -->
+                  <view class="form-group">
+                    <label class="form-label">浜у搧瑙勬牸:</label>
+                    <input class="form-input" disabled="true" type="text" v-model="item.itemModel"/>
+                  </view>
+                  
+                  <view class="row status-row">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label">宸ュ崟鏁伴噺:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.planQty"/>
                       </view>
                     </view>
-
-                    <view class="uni-note" style="color: red">
-                      <view class="form-group">
-                        <label class="form-label lab">妫�楠屼汉:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.fcheckBy"/>
-                      </view>
-                    </view>
-                    <view class="uni-note" style="color: red">
-                      <view class="form-group">
+                    <view class="col-50">
+                      <view class="form-group status-group">
                         <label class="form-label lab">妫�娴嬬粨鏋�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
+                        <span class="status-tag pending-tag" :class="item.fcheckResu === '鍚堟牸' ? 'success' : 'danger'">
+                          {{ item.fcheckResu }}
+                        </span>
                       </view>
                     </view>
                   </view>
@@ -90,89 +109,92 @@
               </template>
             </uni-list-item>
           </uni-list>
-          <!-- 閫氳繃 loadMore 缁勪欢瀹炵幇涓婃媺鍔犺浇鏁堟灉锛屽闇�鑷畾涔夋樉绀哄唴瀹癸紝鍙弬鑰冿細https://ext.dcloud.net.cn/plugin?id=29 -->
-          <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->
-
-          <!-- <view class="fab" @click="handleFabClick">
-            <text class="fab-icon">+</text>
-          </view> -->
-          <view class="plus-button" @click="handleFabClick">
-            +
-          </view>
         </view>
+        
         <view v-show="current===1">
-          <uni-list>
-            <!-- to 灞炴�ф惡甯﹀弬鏁拌烦杞鎯呴〉闈紝褰撳墠鍙负鍙傝�� -->
-            <uni-list-item  style="margin-top: 10px;background-color:#EFEFF4;border-radius:5px;"
-                class="list-item" direction="column" v-for="item in data" :key="item.id"
-                           :to="'Add?id='+item.id+'&releaseNo='+item.releaseNo">
+          <view v-if="data.length === 0" class="empty-state">
+            <view class="empty-icon">馃搧</view>
+            <view class="empty-text">鏆傛棤宸叉彁浜ょ殑妫�楠屽崟</view>
+          </view>
+          
+          <uni-list v-else>
+            <!-- 宸叉彁浜ゅ垪琛ㄩ」鏍峰紡 -->
+            <uni-list-item 
+              style="margin-top: 15px;"
+              class="list-item enhanced-list" 
+              direction="column" 
+              v-for="item in data" 
+              :key="item.id"
+              :to="'Add?id='+item.id+'&releaseNo='+item.releaseNo"
+            >
               <!-- 閫氳繃header鎻掓Ы瀹氫箟鍒楄〃鐨勬爣棰� -->
               <template v-slot:header>
-                <view class="form-group uni-title" style="margin-bottom: 0;">
-                  <label class="form-label">妫�楠屽崟鍙�:</label>
-                  <input class="form-input" disabled="true" type="text" v-model="item.releaseNo"/>
+                <view class="card-header submitted-header">
+                  <view class="form-group">
+                    <label class="form-label">妫�楠屽崟鍙�:</label>
+                    <input class="form-input order-no" disabled="true" type="text" v-model="item.releaseNo"/>
+                  </view>
                 </view>
               </template>
+              
               <!-- 閫氳繃body鎻掓Ы瀹氫箟鍒楄〃鍐呭鏄剧ず -->
               <template v-slot:body>
-                <view style="margin-top: 0;">
-                  <view class="uni-content">
-                    <view class="uni-title-sub uni-ellipsis-2">
+                <view class="card-body submitted-body">
+                  <view class="row">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">鍒涘缓鏃堕棿:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.createDate"/>
                       </view>
                     </view>
-                    <view class="uni-note" >
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">鍒涘缓浜�:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.createBy"/>
                       </view>
                     </view>
-                    <view class="uni-title-sub uni-ellipsis-2">
+                  </view>
+                  
+                  <view class="row">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">浜х嚎:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.daa020"/>
                       </view>
                     </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label lab">鐗╂枡缂栫爜:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/>
                       </view>
                     </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
-                      <view class="form-group">
-                        <label class="form-label">鐗╂枡鍚嶇О:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.itemName"/>
-                      </view>
-                    </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
-                      <view class="form-group">
-                        <label class="form-label">瑙勬牸鍨嬪彿:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.itemModel"/>
-                      </view>
-                    </view>
-
-                    <view class="uni-title-sub uni-ellipsis-2">
+                  </view>
+                  
+                  <!-- 浜у搧鍚嶇О鍗曠嫭涓�琛� -->
+                  <view class="form-group">
+                    <label class="form-label">浜у搧鍚嶇О:</label>
+                    <input class="form-input" disabled="true" type="text" v-model="item.itemName"/>
+                  </view>
+                  
+                  <!-- 浜у搧瑙勬牸鍗曠嫭涓�琛� -->
+                  <view class="form-group">
+                    <label class="form-label">浜у搧瑙勬牸:</label>
+                    <input class="form-input" disabled="true" type="text" v-model="item.itemModel"/>
+                  </view>
+                  
+                  <view class="row status-row">
+                    <view class="col-50">
                       <view class="form-group">
                         <label class="form-label">宸ュ崟鏁伴噺:</label>
                         <input class="form-input" disabled="true" type="text" v-model="item.planQty"/>
                       </view>
                     </view>
-                    <view class="uni-note" style="color: red">
-                      <view class="form-group">
-                        <label class="form-label lab">妫�楠屼汉:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.fcheckBy"/>
-                      </view>
-                    </view>
-                    <view class="uni-note" style="color: red">
-                      <view class="form-group">
+                    <view class="col-50">
+                      <view class="form-group status-group">
                         <label class="form-label lab">妫�娴嬬粨鏋�:</label>
-                        <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/>
+                        <span class="status-tag submitted-tag" :class="item.fcheckResu === '鍚堟牸' ? 'success' : 'danger'">
+                          {{ item.fcheckResu }}
+                        </span>
                       </view>
                     </view>
                   </view>
@@ -182,6 +204,11 @@
           </uni-list>
         </view>
       </view>
+    </view>
+    
+    <!-- 鍔犺浇鏇村缁勪欢 -->
+    <view v-if="loading || noData" class="load-more-container">
+      <uni-load-more :status="options.status" />
     </view>
   </view>
 </template>
@@ -194,36 +221,68 @@
       items: ['鏈彁浜�', '宸叉彁浜�'],
       current: 0,
       data: [],
-      tipShow: false // 鏄惁鏄剧ず椤堕儴鎻愮ず妗�
+      tipShow: false, // 鏄惁鏄剧ず椤堕儴鎻愮ず妗�
+      
+      // 澶氶〉鏁版嵁鎵�闇�鍙傛暟
+      pageIndex: 1,
+      limit: 20,
+      totalPage: 0,
+      totalCount: 0,
+      noData: false, // 娌℃湁鏇村鏁版嵁浜�
+      isLoading: false, // 鏄惁姝e湪鍔犺浇
+      
+      // 鍔犺浇鏇村缁勪欢鐘舵��
+      options: {
+        status: 'more'
+      }
     };
   },
   onLoad() {
-    //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
+    // 椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
     this.init();
   },
   methods: {
     init() {
-
       let result = "鏈畬鎴�";
       if (this.current === 1) {
         result = "宸插畬鎴�";
       }
 
-		//鑾峰彇褰撳墠鐧诲綍鐨勭敤鎴�
-		let userName = this.$loginInfo.account;
-		
-      //椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
+      // 鑾峰彇褰撳墠鐧诲綍鐨勭敤鎴�
+      let userName = this.$loginInfo.account;
+      
+      // 椤甸潰鍔犺浇鏃惰皟鐢ㄧ殑浜嬩欢
       this.$post({
         url: "/XJ/getPage",
         data: {
-          pageIndex: 1,
-          limit: 20,
+          pageIndex: this.pageIndex,
+          limit: this.limit,
           createUser: userName,
           result: result
         }
       }).then(res => {
-        this.data = res.data.tbBillList;
-      })
+        if (this.pageIndex === 1) {
+          // 濡傛灉鏄涓�椤碉紝鐩存帴瑕嗙洊鍘熸暟鎹�
+          this.data = res.data.tbBillList;
+        } else {
+          if (res.data.tbBillList.length > 0) {
+            // 濡傛灉鏄笅涓�椤碉紝杩藉姞鏂版暟鎹�
+            this.data = [...this.data, ...res.data.tbBillList];
+          }
+        }
+        
+        this.totalCount = res.data.totalCount;
+        this.totalPage = Math.ceil(this.totalCount / this.limit);
+        
+        this.noData = this.pageIndex >= this.totalPage;
+        this.isLoading = false; // 缁撴潫鍔犺浇
+        
+        // 鏇存柊鍔犺浇鏇村鐘舵��
+        this.options.status = this.noData ? 'noMore' : 'more';
+      }).catch(() => {
+        this.isLoading = false; // 鍑虹幇閿欒鏃剁粨鏉熷姞杞�
+        this.options.status = 'fail';
+      });
     },
     handleFabClick() {
       uni.navigateTo({
@@ -233,6 +292,8 @@
     onClickItem(index) {
       if (this.current !== index.currentIndex) {
         this.current = index.currentIndex;
+        this.data = [];
+        this.pageIndex = 1;
         this.init();
       }
     },
@@ -241,25 +302,31 @@
    * 涓嬫媺鍒锋柊鍥炶皟鍑芥暟
    */
   onPullDownRefresh() {
-    //閲嶆柊鎵ц涓�閬嶆煡璇�
+    // 閲嶆柊鎵ц涓�閬嶆煡璇�
     this.init();
     this.tipShow = true;
-    //鍏抽棴鍔ㄧ敾
+    
+    // 鍏抽棴鍔ㄧ敾
     uni.stopPullDownRefresh();
-
-    setTimeout(function () {
+    
+    // 姝g‘鍐欐硶锛堜娇鐢ㄧ澶村嚱鏁颁繚鎸乼his鎸囧悜锛�
+    setTimeout(() => {
       this.tipShow = false;
-    }, 3000);
+    }, 1000);
   },
   /**
    * 涓婃媺鍔犺浇鍥炶皟鍑芥暟
    */
   onReachBottom() {
-    this.init();
+    if (this.noData || this.isLoading) return;
+    
+    this.isLoading = true;
+    this.pageIndex++;
+    this.init(); // 鍔犺浇鏇村鏁版嵁
   },
   onShow() {
-    //姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
-    this.init();
+    // 姣忔杩涘叆椤甸潰閮戒細鎵ц鐨勬柟娉�
+    // this.init();
   }
 };
 </script>
@@ -267,76 +334,36 @@
 <style lang="scss">
 @import '@/common/uni-ui.scss';
 
-.uni-note {
-  margin-top: 0;
-}
-
-/* Set the input backgrounds to be gray */
-.form-input {
-  background-color: #f2f2f2; /* Or any other shade of gray you prefer */
-}
-
-/* Ensure automatic adaptation based on page size */
-.form-group {
-  display: flex;
-  align-items: center;
-}
-
-.form-label {
-  margin-bottom: 0;
-  border-bottom: 1px solid #FFFFFF;
-  padding: 5px;
-  font-size: 12px;
-  width: 60px;
-  /* Adjust the font size as per your requirement */
-}
-
-.form-input {
-  flex: 1;
-  margin-bottom: 0;
-  border-bottom: 1px solid #c7c7c7;
-  padding: 5px;
-  font-size: 12px;
-  background-color: #FFFFFF;
-  /* Adjust the font size as per your requirement */
-}
-
-.plus-button {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background-color: #007bff;
-  color: #ffffff;
-  text-align: center;
-  line-height: 59px;
-  font-size: 24px;
-  cursor: pointer;
-  z-index: 1000;
-  margin-bottom: 35px;
-}
-
+/* 鍏ㄥ眬鏍峰紡 */
 page {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background-color: #efeff4;
+  background-color: #f8f9fa;
   min-height: 100%;
   height: auto;
+  padding-bottom: 80px; /* 涓烘诞鍔ㄦ寜閽暀鍑虹┖闂� */
 }
 
+/* 椤堕儴鎻愮ず妗� */
 .tips {
-  color: #67c23a;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #3a86ff;
   font-size: 14px;
   line-height: 40px;
-  text-align: center;
-  background-color: #f0f9eb;
+  background-color: #e6f7ff;
   height: 0;
   opacity: 0;
   transform: translateY(-100%);
-  transition: all 0.3s;
+  transition: all 0.3s ease;
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(64, 158, 255, 0.2);
 }
 
 .tips-ani {
@@ -345,36 +372,259 @@
   opacity: 1;
 }
 
+.tips-icon {
+  margin-right: 8px;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* 鍥哄畾鏍囩椤垫牱寮� */
+.fixed-tabs {
+  background-color: #fff;
+  border-bottom: 2px solid #409EFF;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+
+/* 鍒嗘鎺т欢鎸夐挳鏍峰紡澧炲己 */
+.uni-segmented-control__button {
+  font-weight: 500;
+  font-size: 16px;
+  color: #606266;
+  transition: all 0.2s;
+}
+
+.uni-segmented-control__button--active {
+  color: #409EFF;
+  border-bottom: 2px solid #409EFF;
+  background-color: transparent;
+  font-weight: 600;
+}
+
+/* 鍐呭鍖哄煙 */
 .content {
   width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  margin-top: 10px;
 }
 
-.list-picture {
-  width: 100%;
-  height: 145px;
+/* 鍗$墖鏍峰紡 - 澧炲己瑙嗚灞傛 */
+.card-header, .card-body {
+  border-radius: 12px;
+  padding: 18px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
 }
 
-.thumb-image {
-  width: 100%;
-  height: 100%;
-}
-
-.ellipsis {
+.card-header {
+  margin-bottom: 10px;
   display: flex;
+  align-items: center;
+}
+
+.card-body {
+  margin-bottom: 15px;
+}
+
+/* 鏈彁浜ょ姸鎬佸崱鐗囨牱寮� */
+.pending-header {
+  background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
+  border-left: 4px solid #409EFF;
+}
+
+.pending-body {
+  background-color: #f0f9ff;
+}
+
+/* 宸叉彁浜ょ姸鎬佸崱鐗囨牱寮� */
+.submitted-header {
+  background: linear-gradient(145deg, #f6f6f6, #e9e9e9);
+  border-left: 4px solid #909399;
+}
+
+.submitted-body {
+  background-color: #f6f6f6;
+}
+
+/* 琛ㄥ崟鏍峰紡澧炲己 */
+.form-group {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 18px; /* 澧炲姞闂磋窛 */
+}
+
+.form-label {
+  margin-bottom: 0;
+  padding: 6px 10px;
+  font-size: 14px;
+  width: 100px; /* 澧炲姞鏍囩瀹藉害 */
+  color: #606266;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.form-label.lab {
+  color: #303133;
+  font-weight: 600;
+}
+
+.form-input {
+  flex: 1;
+  margin-bottom: 0;
+  padding: 10px 14px; /* 澧炲姞鍐呰竟璺� */
+  font-size: 14px; /* 澧炲ぇ瀛椾綋 */
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid #dcdfe6;
+  border-radius: 8px; /* 澧炲ぇ鍦嗚 */
+  color: #303133;
+  transition: all 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.form-input:active {
+  transform: scale(0.99);
+}
+
+/* 妫�楠屽崟鍙峰簳鑹� */
+.order-no {
+  background-color: #e6f7ff; /* 娴呰摑鑹插簳鑹� */
+  border-color: #bfdbfe;
+  font-weight: 500;
+}
+
+/* 琛屽拰鍒楀竷灞� */
+.row {
+  display: flex;
+  margin-bottom: 18px; /* 澧炲姞闂磋窛 */
+}
+
+.status-row {
+  border-top: 1px dashed #dcdfe6;
+  padding-top: 12px;
+  margin-top: 12px;
+}
+
+.col-50 {
+  flex: 1;
+  margin-right: 18px; /* 澧炲姞闂磋窛 */
+}
+
+.col-50:last-child {
+  margin-right: 0;
+}
+
+/* 鐘舵�佹爣绛惧寮� */
+.status-group {
+  align-items: center;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 6px 12px; /* 澧炲姞鍐呰竟璺� */
+  font-size: 14px; /* 澧炲ぇ瀛椾綋 */
+  border-radius: 20px; /* 鍦嗗舰鏍囩 */
+  margin-left: 12px; /* 澧炲姞闂磋窛 */
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.pending-tag {
+  background-color: rgba(64, 158, 255, 0.1);
+  color: #409EFF;
+}
+
+.submitted-tag {
+  background-color: rgba(144, 147, 153, 0.1);
+  color: #909399;
+}
+
+.success {
+  background-color: #e6f7ed;
+  color: #36b37e;
+  border: 1px solid #d1fae5;
+}
+
+.danger {
+  background-color: #ffefef;
+  color: #ff4d4f;
+  border: 1px solid #fee2e2;
+}
+
+/* 娴姩鎸夐挳 */
+.plus-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #409EFF, #66B1FF);
+  color: #ffffff;
+  text-align: center;
+  line-height: 72px;
+  font-size: 32px;
+  cursor: pointer;
+  z-index: 1000;
+  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4); /* 澧炲己鎸夐挳闃村奖 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.plus-button:active {
+  transform: scale(0.95);
+  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
+}
+
+.plus-button:hover {
+  transform: scale(1.03);
+}
+
+/* 绌虹姸鎬� */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #909399;
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: 24px;
+  color: #c0c4cc;
+}
+
+.empty-text {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* 鍔犺浇鏇村瀹瑰櫒 */
+.load-more-container {
+  padding: 30px 0;
+  text-align: center;
+}
+
+/* 澧炲己鍒楄〃椤瑰姩鐢� */
+.enhanced-list {
+  transition: all 0.3s ease;
+  border-radius: 12px;
   overflow: hidden;
 }
 
-.uni-ellipsis-1 {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.enhanced-list:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
-.uni-ellipsis-2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+.enhanced-list:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3