fix: 功能完善修改。

src/pages.json

@@ -14,22 +14,19 @@
     {
       "path": "pages/index",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "纪念币查询"
-        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/banknote/index",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "纪念钞查询"
-        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/metal/index",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "贵金属查询"
-        "navigationStyle": "custom"
       }
     },
     {
@@ -133,13 +130,13 @@
         "selectedIconPath": "static/images/tabbar/work_.png",
         "text": "纪念钞"
       }
-      // ,
+      ,
-      // {
+      {
-      //   "pagePath": "pages/metal/index",
+        "pagePath": "pages/metal/index",
-      //   "iconPath": "static/images/tabbar/statistic.png",
+        "iconPath": "static/images/tabbar/statistic.png",
-      //   "selectedIconPath": "static/images/tabbar/statistic.png",
+        "selectedIconPath": "static/images/tabbar/statistic.png",
-      //   "text": "贵金属"
+        "text": "贵金属"
-      // }
+      }
     ]
   },
   "globalStyle": {

src/pages/banknote/index.vue

@@ -1,9 +1,7 @@
 <template>
   <view class="container">
-    <uni-navbar :statusBar="true" title="纪念钞查询" />
-    
     <!-- 查询条件区域 -->
-    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+    <u-sticky offsetTop="0" customNavHeight="0">
       <view class="search-view">
         <view class="search-input-wrapper">
           <u--input 
@@ -35,42 +33,43 @@
           <uni-icons type="list" size="18" color="#667eea"></uni-icons>
           <text>筛选</text>
         </view>
-
-        <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
-              <view class="filter-title">材质选择</view>
-              <view class="state-list">
-                <view 
-                  v-for="item in compositionOptions" 
-                  :key="item.dictValue" 
-                  class="state-item"
-                  :class="queryParams.composition === item.dictValue ? 'active' : ''"
-                  @click="selectComposition(item)">
-                  {{ item.dictLabel }}
-                </view>
-              </view>
-            </view>
-            
-            <view class="btn-box">
-              <view class="btn-reset" @click="handleReset()">
-                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
-                <text>重置</text>
-              </view>
-              <view class="btn-confirm" @click="searchSubmit()">
-                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
-                <text>确定</text>
-              </view>
-            </view>
-          </view>
-        </u-transition>
       </view>
     </u-sticky>
     
+    <!-- 筛选面板 -->
+    <u-transition :show="filterPanel" mode="slide-down">
+      <view class="filter-panel">
+        <view class="filter-panel-content">
+          <view class="filter-title">材质选择</view>
+          <view class="state-list">
+            <view 
+              v-for="item in compositionOptions" 
+              :key="item.dictValue" 
+              class="state-item"
+              :class="queryParams.composition === item.dictValue ? 'active' : ''"
+              @click="selectComposition(item)">
+              {{ item.dictLabel }}
+            </view>
+          </view>
+        </view>
+        
+        <view class="btn-box">
+          <view class="btn-reset" @click="handleReset()">
+            <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+            <text>重置</text>
+          </view>
+          <view class="btn-confirm" @click="searchSubmit()">
+            <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+            <text>确定</text>
+          </view>
+        </view>
+      </view>
+    </u-transition>
+
     <!-- 数据列表 -->
-    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+    <u-list @scrolltolower="loadmore" lowerThreshold="100">
       <u-list-item v-for="(item, index) in dataList" :key="index">
-        <view class="list-item" @click="handleViewDetail(item)">
+        <view class="list-item" >
           <view class="item-header">
             <view class="card-name-section">
               <view class="card-icon">
@@ -366,7 +365,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 page {
   height: 100%;
-  overflow: auto;
+  background: #f5f7fa;
 }
 
 .container {
@@ -471,122 +470,127 @@ page {
     }
   }
   
-  .filter-panel {
+}
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 999;
 
-    .filter-panel-content {
+.filter-panel {
-      background-color: #ffffff;
+  width: 100%;
-      padding: 0 30rpx 30rpx;
+  position: fixed;
-      border-radius: 16rpx 16rpx 0 0;
+  left: 0;
+  top: 90rpx;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
 
-      .filter-title {
+  .filter-panel-content {
-        color: #2c3e50;
+    background-color: #ffffff;
-        font-size: 32rpx;
+    padding: 0 30rpx 30rpx;
-        font-weight: 600;
+    border-radius: 0 0 16rpx 16rpx;
-        padding: 32rpx 0 24rpx 20rpx;
-        position: relative;
-        display: flex;
-        align-items: center;
 
-        &::before {
+    .filter-title {
-          content: '';
+      color: #2c3e50;
-          width: 6rpx;
+      font-size: 32rpx;
-          height: 32rpx;
+      font-weight: 600;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx 0 24rpx 20rpx;
-          border-radius: 3rpx;
+      position: relative;
-          margin-right: 12rpx;
+      display: flex;
-          flex-shrink: 0;
+      align-items: center;
-        }
-      }
       
-      .state-list {
+      &::before {
-        display: flex;
+        content: '';
-        flex-wrap: wrap;
+        width: 6rpx;
-        justify-content: flex-start;
+        height: 32rpx;
-        gap: 16rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        margin-bottom: 24rpx;
+        border-radius: 3rpx;
-
+        margin-right: 12rpx;
-        .state-item {
+        flex-shrink: 0;
-          padding: 0 32rpx;
-          height: 68rpx;
-          border: 2rpx solid #e8edf3;
-          border-radius: 34rpx;
-          text-align: center;
-          line-height: 68rpx;
-          font-size: 28rpx;
-          color: #666666;
-          transition: all 0.3s ease;
-          background: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-          
-          &:active {
-            transform: scale(0.95);
-          }
-        }
-
-        .active {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: 2rpx solid transparent;
-          color: #ffffff;
-          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
-          font-weight: 600;
-        }
       }
     }
 
-    .btn-box {
+    .state-list {
       display: flex;
-      gap: 20rpx;
+      flex-wrap: wrap;
-      padding: 24rpx 30rpx;
+      justify-content: flex-start;
-      background-color: #fff;
+      gap: 16rpx;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      margin-bottom: 24rpx;
 
-      .btn-reset,
+      .state-item {
-      .btn-confirm {
+        padding: 0 32rpx;
-        display: flex;
+        height: 68rpx;
-        align-items: center;
+        border: 2rpx solid #e8edf3;
-        justify-content: center;
+        border-radius: 34rpx;
-        gap: 8rpx;
+        text-align: center;
-        height: 88rpx;
+        line-height: 68rpx;
-        border-radius: 12rpx;
+        font-size: 28rpx;
-        font-size: 30rpx;
+        color: #666666;
-        font-weight: 600;
         transition: all 0.3s ease;
+        background: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
         
         &:active {
-          transform: scale(0.98);
+          transform: scale(0.95);
-          opacity: 0.9;
-        }
-        
-        text {
-          line-height: 1;
         }
       }
 
-      .btn-reset {
+      .active {
-        flex: 1;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        background: #f5f7fa;
+        border: 2rpx solid transparent;
-        border: 2rpx solid #dcdfe6;
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+        font-weight: 600;
+      }
+    }
+  }
 
-        text {
+  .btn-box {
-          color: #606266;
+    display: flex;
-        }
+    gap: 20rpx;
+    padding: 24rpx 30rpx;
+    background-color: #fff;
+    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset,
+    .btn-confirm {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 88rpx;
+      border-radius: 12rpx;
+      font-size: 30rpx;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
       
-      .btn-confirm {
+      text {
-        flex: 1;
+        line-height: 1;
-        background: #667eea;
+      }
-        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+    }
-        border: none;
     
-        text {
+    .btn-reset {
-          color: #ffffff;
+      flex: 1;
-        }
+      background: #f5f7fa;
+      border: 2rpx solid #dcdfe6;
+      
+      text {
+        color: #606266;
+      }
+    }
+    
+    .btn-confirm {
+      flex: 1;
+      background: #667eea;
+      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+      border: none;
+      
+      text {
+        color: #ffffff;
       }
     }
   }

src/pages/index.vue

@@ -1,9 +1,7 @@
 <template>
   <view class="container">
-    <uni-navbar :statusBar="true" title="纪念币查询" />
-    
     <!-- 查询条件区域 -->
-    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+    <u-sticky offsetTop="0" customNavHeight="0">
       <view class="search-view">
         <view class="search-input-wrapper">
           <u--input 
@@ -35,42 +33,43 @@
           <uni-icons type="list" size="18" color="#667eea"></uni-icons>
           <text>筛选</text>
         </view>
-
-        <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
-              <view class="filter-title">系列选择</view>
-              <view class="state-list">
-                <view 
-                  v-for="item in seriesOptions" 
-                  :key="item.dictValue" 
-                  class="state-item"
-                  :class="queryParams.series === item.dictValue ? 'active' : ''"
-                  @click="selectSeries(item)">
-                  {{ item.dictLabel }}
-                </view>
-              </view>
-            </view>
-            
-            <view class="btn-box">
-              <view class="btn-reset" @click="handleReset()">
-                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
-                <text>重置</text>
-              </view>
-              <view class="btn-confirm" @click="searchSubmit()">
-                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
-                <text>确定</text>
-              </view>
-            </view>
-          </view>
-        </u-transition>
       </view>
     </u-sticky>
     
+    <!-- 筛选面板 -->
+    <u-transition :show="filterPanel" mode="slide-down">
+      <view class="filter-panel">
+        <view class="filter-panel-content">
+          <view class="filter-title">系列选择</view>
+          <view class="state-list">
+            <view 
+              v-for="item in seriesOptions" 
+              :key="item.dictValue" 
+              class="state-item"
+              :class="queryParams.series === item.dictValue ? 'active' : ''"
+              @click="selectSeries(item)">
+              {{ item.dictLabel }}
+            </view>
+          </view>
+        </view>
+        
+        <view class="btn-box">
+          <view class="btn-reset" @click="handleReset()">
+            <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+            <text>重置</text>
+          </view>
+          <view class="btn-confirm" @click="searchSubmit()">
+            <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+            <text>确定</text>
+          </view>
+        </view>
+      </view>
+    </u-transition>
+
     <!-- 数据列表 -->
-    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+    <u-list @scrolltolower="loadmore" lowerThreshold="100">
       <u-list-item v-for="(item, index) in dataList" :key="index">
-        <view class="list-item" @click="handleViewDetail(item)">
+        <view class="list-item">
           <view class="item-header">
             <view class="card-name-section">
               <view class="card-icon">
@@ -407,7 +406,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 page {
   height: 100%;
-  overflow: auto;
+  background: #f5f7fa;
 }
 
 .container {
@@ -512,122 +511,127 @@ page {
     }
   }
   
-  .filter-panel {
+}
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 999;
 
-    .filter-panel-content {
+.filter-panel {
-      background-color: #ffffff;
+  width: 100%;
-      padding: 0 30rpx 30rpx;
+  position: fixed;
-      border-radius: 16rpx 16rpx 0 0;
+  left: 0;
+  top: 90rpx;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
 
-      .filter-title {
+  .filter-panel-content {
-        color: #2c3e50;
+    background-color: #ffffff;
-        font-size: 32rpx;
+    padding: 0 30rpx 30rpx;
-        font-weight: 600;
+    border-radius: 0 0 16rpx 16rpx;
-        padding: 32rpx 0 24rpx 20rpx;
-        position: relative;
-        display: flex;
-        align-items: center;
 
-        &::before {
+    .filter-title {
-          content: '';
+      color: #2c3e50;
-          width: 6rpx;
+      font-size: 32rpx;
-          height: 32rpx;
+      font-weight: 600;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 32rpx 0 24rpx 20rpx;
-          border-radius: 3rpx;
+      position: relative;
-          margin-right: 12rpx;
+      display: flex;
-          flex-shrink: 0;
+      align-items: center;
-        }
-      }
       
-      .state-list {
+      &::before {
-        display: flex;
+        content: '';
-        flex-wrap: wrap;
+        width: 6rpx;
-        justify-content: flex-start;
+        height: 32rpx;
-        gap: 16rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        margin-bottom: 24rpx;
+        border-radius: 3rpx;
-
+        margin-right: 12rpx;
-        .state-item {
+        flex-shrink: 0;
-          padding: 0 32rpx;
-          height: 68rpx;
-          border: 2rpx solid #e8edf3;
-          border-radius: 34rpx;
-          text-align: center;
-          line-height: 68rpx;
-          font-size: 28rpx;
-          color: #666666;
-          transition: all 0.3s ease;
-          background: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-          
-          &:active {
-            transform: scale(0.95);
-          }
-        }
-
-        .active {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: 2rpx solid transparent;
-          color: #ffffff;
-          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
-          font-weight: 600;
-        }
       }
     }
 
-    .btn-box {
+    .state-list {
       display: flex;
-      gap: 20rpx;
+      flex-wrap: wrap;
-      padding: 24rpx 30rpx;
+      justify-content: flex-start;
-      background-color: #fff;
+      gap: 16rpx;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      margin-bottom: 24rpx;
 
-      .btn-reset,
+      .state-item {
-      .btn-confirm {
+        padding: 0 32rpx;
-        display: flex;
+        height: 68rpx;
-        align-items: center;
+        border: 2rpx solid #e8edf3;
-        justify-content: center;
+        border-radius: 34rpx;
-        gap: 8rpx;
+        text-align: center;
-        height: 88rpx;
+        line-height: 68rpx;
-        border-radius: 12rpx;
+        font-size: 28rpx;
-        font-size: 30rpx;
+        color: #666666;
-        font-weight: 600;
         transition: all 0.3s ease;
+        background: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
         
         &:active {
-          transform: scale(0.98);
+          transform: scale(0.95);
-          opacity: 0.9;
-        }
-        
-        text {
-          line-height: 1;
         }
       }
 
-      .btn-reset {
+      .active {
-        flex: 1;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        background: #f5f7fa;
+        border: 2rpx solid transparent;
-        border: 2rpx solid #dcdfe6;
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+        font-weight: 600;
+      }
+    }
+  }
 
-        text {
+  .btn-box {
-          color: #606266;
+    display: flex;
-        }
+    gap: 20rpx;
+    padding: 24rpx 30rpx;
+    background-color: #fff;
+    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset,
+    .btn-confirm {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      height: 88rpx;
+      border-radius: 12rpx;
+      font-size: 30rpx;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
       
-      .btn-confirm {
+      text {
-        flex: 1;
+        line-height: 1;
-        background: #667eea;
+      }
-        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+    }
-        border: none;
     
-        text {
+    .btn-reset {
-          color: #ffffff;
+      flex: 1;
-        }
+      background: #f5f7fa;
+      border: 2rpx solid #dcdfe6;
+      
+      text {
+        color: #606266;
+      }
+    }
+    
+    .btn-confirm {
+      flex: 1;
+      background: #667eea;
+      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+      border: none;
+      
+      text {
+        color: #ffffff;
       }
     }
   }

src/pages/metal/index.vue

@@ -1,9 +1,7 @@
 <template>
   <view class="container">
-    <uni-navbar :statusBar="true" title="贵金属查询" />
-    
     <!-- 查询条件区域 -->
-    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+    <u-sticky offsetTop="0" customNavHeight="0">
       <view class="search-view">
         <view class="search-input-wrapper">
           <u--input 
@@ -26,44 +24,71 @@
           </uni-icons>
         </view>
         
+        <view class="reset-btn" @click="handleResetAll()">
+          <uni-icons type="reload" size="18" color="#667eea"></uni-icons>
+          <text>重置</text>
+        </view>
+        
         <view class="filter-btn" @click="filterPanel = !filterPanel">
           <uni-icons type="list" size="18" color="#667eea"></uni-icons>
           <text>筛选</text>
         </view>
-
-        <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
-              <view class="filter-title">系列选择</view>
-              <view class="state-list">
-                <view 
-                  v-for="item in seriesOptions" 
-                  :key="item.dictValue" 
-                  class="state-item"
-                  :class="queryParams.series === item.dictValue ? 'active' : ''"
-                  @click="selectSeries(item)">
-                  {{ item.dictLabel }}
-                </view>
-              </view>
-            </view>
-            
-            <view class="btn-box">
-              <view class="btn-reset" @click="handleReset()">
-                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
-                <text>重置</text>
-              </view>
-              <view class="btn-confirm" @click="searchSubmit()">
-                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
-                <text>确定</text>
-              </view>
-            </view>
-          </view>
-        </u-transition>
       </view>
     </u-sticky>
         
+    <!-- 筛选面板 -->
+    <u-transition :show="filterPanel" mode="slide-down">
+      <view class="filter-panel">
+        <view class="filter-panel-content">
+          <view class="filter-title">项目题材选择</view>
+          <view class="state-list">
+            <view 
+              v-for="item in blockTypeOptions" 
+              :key="item.dictValue" 
+              class="state-item"
+              :class="queryParams.blockType === item.dictValue ? 'active' : ''"
+              @click="selectBlockType(item)">
+              {{ item.dictLabel }}
+            </view>
+          </view>
+          
+          <view class="filter-title">系列选择</view>
+          <view class="state-list">
+            <view 
+              v-for="item in seriesOptions" 
+              :key="item.dictValue" 
+              class="state-item"
+              :class="queryParams.series === item.dictValue ? 'active' : ''"
+              @click="selectSeries(item)">
+              {{ item.dictLabel }}
+            </view>
+          </view>
+        </view>
+        
+        <view class="btn-box">
+          <view class="btn-reset" @click="handleReset()">
+            <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+            <text>重置</text>
+          </view>
+          <view class="btn-confirm" @click="searchSubmit()">
+            <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+            <text>确定</text>
+          </view>
+        </view>
+      </view>
+    </u-transition>
+
+    <!-- 年份选择器 -->
+    <u-picker
+      :show="showYearPicker"
+      :columns="yearColumns"
+      @confirm="confirmYear"
+      @cancel="showYearPicker = false"
+      @close="showYearPicker = false"
+    ></u-picker>
+
     <!-- 数据列表 -->
-    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+    <u-list @scrolltolower="loadmore" lowerThreshold="100">
       <u-list-item v-for="(item, index) in dataList" :key="index">
         <view class="list-item" @click="handleViewDetail(item)">
           <view class="item-header">
@@ -79,68 +104,80 @@
           
           <view class="card-body">
             <view class="info-row">
-              <view class="info-item">
+              <view class="info-item" v-if="item.shortName">
                 <text class="info-label">名称</text>
-                <text class="info-value">{{ item.shortName || '--' }}</text>
+                <text class="info-value">{{ item.shortName }}</text>
               </view>
-            <view class="info-item">
+              <view class="info-item" v-if="item.issueDate">
-                <text class="info-label">系列</text>
-                <text class="info-value">{{ getSeriesLabel(item.series) }}</text>
-              </view>
-              <view class="info-item">
                 <text class="info-label">发行时间</text>
-                <text class="info-value">{{ item.issueDate || '--' }}</text>
+                <text class="info-value">{{ item.issueDate }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.faceValue">
-                <text class="info-label">面值</text>
+                <text class="info-label">面额</text>
                 <text class="info-value">{{ item.faceValue }}元</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.mintage">
-                <text class="info-label">发行量</text>
+                <text class="info-label">最大发行量（枚）</text>
                 <text class="info-value">{{ item.mintage }}</text>
               </view>
-       
+              <view class="info-item" v-if="item.weight">
-              <view class="info-item">
+                <text class="info-label">重量</text>
-                <text class="info-label">材质</text>
+                <text class="info-value">{{ item.weight }}</text>
-                <text class="info-value">{{ getCompositionLabel(item.composition) }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.shape">
                 <text class="info-label">形状</text>
                 <text class="info-value">{{ getShapeLabel(item.shape) }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.composition">
-                <text class="info-label">重量</text>
+                <text class="info-label">材质</text>
-                <text class="info-value">{{ item.weight || '--' }}</text>
+                <text class="info-value">{{ item.composition }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.dimension">
                 <text class="info-label">规格尺寸</text>
-                <text class="info-value">{{ item.dimension || '--' }}</text>
+                <text class="info-value">{{ item.dimension }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.code">
-                <text class="info-label">厚度</text>
+                <text class="info-label">编码</text>
-                <text class="info-value">{{ item.thickness || '--' }}</text>
+                <text class="info-value">{{ item.code }}</text>
               </view>
-               <view class="info-item">
+              <view class="info-item" v-if="item.craft">
-                <text class="info-label">序号</text>
+                <text class="info-label">工艺</text>
-                <text class="info-value">{{ item.setNumber || '--' }}</text>
+                <text class="info-value">{{ item.craft }}</text>
               </view>
-              <view class="info-item">
+              <view class="info-item" v-if="item.quality">
-                <text class="info-label">币齿</text>
+                <text class="info-label">质量</text>
-                <text class="info-value">{{ getCoinTeethLabel(item.coinTeeth) }}</text>
+                <text class="info-value">{{ item.quality }}</text>
+              </view>
+              <view class="info-item" v-if="item.fineness">
+                <text class="info-label">成色</text>
+                <text class="info-value">{{ item.fineness }}</text>
+              </view>
+              <view class="info-item" v-if="item.blockType">
+                <text class="info-label">项目题材</text>
+                <text class="info-value">{{ getBlockTypeLabel(item.blockType) }}</text>
+              </view>
+              <view class="info-item" v-if="item.series">
+                <text class="info-label">系列</text>
+                <text class="info-value">{{ getSeriesLabel(item.series) }}</text>
+              </view>
+               <view class="info-item" v-if="item.remark">
+                <text class="info-label">发行公告</text>
+                <text class="info-value">{{ item.remark }}</text>
               </view>
-              
               <!-- 图片展示区域 -->
               <view class="info-item info-item-full" v-if="item.collectFileList && item.collectFileList.length > 0">
-                <text class="info-label"></text>
                 <view class="image-list">
-                  <image 
+                  <view 
                     v-for="(file, idx) in item.collectFileList.slice(0, 4)" 
                     :key="idx"
-                    :src="getFullImageUrl(file.url)" 
+                    class="image-wrapper"
-                    mode="aspectFill"
+                    @click.stop="handlePreviewImages(item.collectFileList, idx)">
-                    class="item-image"
+                    <image 
-                    @click.stop="handlePreviewImages(item.collectFileList, idx)"
+                      :src="getFullImageUrl(file.url)" 
-                  />
+                      mode="aspectFit"
+                      class="item-image"
+                    />
+                  </view>
                   <view v-if="item.collectFileList.length > 4" class="image-more" @click.stop="handlePreviewImages(item.collectFileList, 0)">
                     <text>+{{ item.collectFileList.length - 4 }}</text>
                   </view>
@@ -154,16 +191,7 @@
       <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
     </u-list>
     
-    <!-- 年份选择器 -->
+
-    <u-datetime-picker
-      :closeOnClickOverlay="true"
-      :show="showYearPicker"
-      v-model="yearValue"
-      mode="year"
-      @close="showYearPicker = false"
-      @cancel="showYearPicker = false"
-      @confirm="confirmYear"
-    ></u-datetime-picker>
   </view>
 </template>
 
@@ -179,6 +207,7 @@ const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
   issueYear: '',
+  blockType: '',
   series: ''
 })
 
@@ -188,8 +217,17 @@ const total = ref(0)
 const status = ref('loadmore')
 const showYearPicker = ref(false)
 const filterPanel = ref(false)
-const yearValue = ref(Number(new Date()))
 
+// 生成年份选项（最近100年）
+const yearColumns = ref([
+  Array.from({ length: 100 }, (_, i) => {
+    const year = new Date().getFullYear() - i
+    return { text: `${year}年`, value: year }
+  })
+])
+
+// 项目题材选项（从字典获取）
+const blockTypeOptions = ref([])
 // 系列选项（从字典获取）
 const seriesOptions = ref([])
 // 材质选项
@@ -204,10 +242,16 @@ const windowHeight = computed(() => {
   return uni.getSystemInfoSync().windowHeight - 50
 })
 
+// 获取项目题材标签
+const getBlockTypeLabel = (blockTypeValue) => {
+  const found = blockTypeOptions.value.find(item => item.dictValue === blockTypeValue)
+  return found ? found.dictLabel : '--'
+}
+
 // 获取系列标签
 const getSeriesLabel = (seriesValue) => {
   const found = seriesOptions.value.find(item => item.dictValue === seriesValue)
-  return found ? found.dictLabel : '未知系列'
+  return found ? found.dictLabel : '--'
 }
 
 // 获取材质标签
@@ -239,17 +283,20 @@ const getFullImageUrl = (url) => {
   return 'https://www.qdintc.com' + url
 }
 
-// 选择系列
-const selectSeries = (item) => {
-  queryParams.value.series = item.dictValue
-}
-
 // 加载字典数据（无需token）
 const loadDictData = async () => {
   try {
+    // 加载项目题材字典
+    const blockTypeRes = await request({
+      url: '/system/dict/data/type/precious_metal_block_type',
+      method: 'get',
+      headers: { isToken: false }
+    })
+    blockTypeOptions.value = blockTypeRes.data || []
+    
     // 加载系列字典
     const seriesRes = await request({
-      url: '/system/dict/data/type/commemorative_coin_series',
+      url: '/system/dict/data/type/precious_metal_coin_series',
       method: 'get',
       headers: { isToken: false }
     })
@@ -309,6 +356,37 @@ const getList = async () => {
   }
 }
 
+// 重置所有查询条件
+const handleResetAll = () => {
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    issueYear: '',
+    blockType: '',
+    series: ''
+  }
+  dataList.value = []
+  total.value = 0
+  // 重置后自动查询
+  getList()
+}
+
+// 选择项目题材
+const selectBlockType = (item) => {
+  queryParams.value.blockType = item.dictValue
+}
+
+// 选择系列
+const selectSeries = (item) => {
+  queryParams.value.series = item.dictValue
+}
+
+// 筛选面板重置
+const handleReset = () => {
+  queryParams.value.blockType = ''
+  queryParams.value.series = ''
+}
+
 // 确定查询
 const searchSubmit = () => {
   queryParams.value.pageNum = 1
@@ -317,23 +395,16 @@ const searchSubmit = () => {
   filterPanel.value = false
 }
 
-// 重置按钮
-const handleReset = () => {
-  queryParams.value = {
-    pageNum: 1,
-    pageSize: 10,
-    issueYear: '',
-    series: ''
-  }
-  dataList.value = []
-  total.value = 0
-}
-
 // 确认年份
 const confirmYear = (e) => {
-  const year = dayjs(e.value).format('YYYY')
+  const selectedValue = e.value[0]
-  queryParams.value.issueYear = year
+  const year = typeof selectedValue === 'object' ? selectedValue.value : selectedValue
+  queryParams.value.issueYear = String(year)
   showYearPicker.value = false
+  // 选择年份后自动查询
+  queryParams.value.pageNum = 1
+  dataList.value = []
+  getList()
 }
 
 // 加载更多
@@ -374,7 +445,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 page {
   height: 100%;
-  overflow: auto;
+  background: #f5f7fa;
 }
 
 .container {
@@ -433,6 +504,29 @@ page {
     }
   }
   
+  .reset-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+  
   .filter-btn {
     display: flex;
     align-items: center;
@@ -456,122 +550,129 @@ page {
     }
   }
   
-  .filter-panel {
+}
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 999;
 
-    .filter-panel-content {
+.filter-panel {
-      background-color: #ffffff;
+  width: 100%;
-      padding: 0 30rpx 30rpx;
+  position: fixed;
-      border-radius: 16rpx 16rpx 0 0;
+  left: 0;
+  top: 90rpx;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
 
-      .filter-title {
+  .filter-panel-content {
-        color: #2c3e50;
+    background-color: #ffffff;
-        font-size: 32rpx;
+    padding: 0 30rpx 30rpx;
-        font-weight: 600;
+    border-radius: 0 0 16rpx 16rpx;
-        padding: 32rpx 0 24rpx 20rpx;
+    max-height: 70vh;
-        position: relative;
+    overflow-y: auto;
-        display: flex;
-        align-items: center;
 
-        &::before {
+    .filter-title {
-          content: '';
+      color: #2c3e50;
-          width: 6rpx;
+      font-size: 36rpx;
-          height: 32rpx;
+      font-weight: 600;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 40rpx 0 30rpx 20rpx;
-          border-radius: 3rpx;
+      position: relative;
-          margin-right: 12rpx;
+      display: flex;
-          flex-shrink: 0;
+      align-items: center;
-        }
-      }
       
-      .state-list {
+      &::before {
-        display: flex;
+        content: '';
-        flex-wrap: wrap;
+        width: 6rpx;
-        justify-content: flex-start;
+        height: 32rpx;
-        gap: 16rpx;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        margin-bottom: 24rpx;
+        border-radius: 3rpx;
-
+        margin-right: 12rpx;
-        .state-item {
+        flex-shrink: 0;
-          padding: 0 32rpx;
-          height: 68rpx;
-          border: 2rpx solid #e8edf3;
-          border-radius: 34rpx;
-          text-align: center;
-          line-height: 68rpx;
-          font-size: 28rpx;
-          color: #666666;
-          transition: all 0.3s ease;
-          background: #ffffff;
-          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-          
-          &:active {
-            transform: scale(0.95);
-          }
-        }
-
-        .active {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: 2rpx solid transparent;
-          color: #ffffff;
-          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
-          font-weight: 600;
-        }
       }
     }
 
-    .btn-box {
+    .state-list {
       display: flex;
-      gap: 20rpx;
+      flex-wrap: wrap;
-      padding: 24rpx 30rpx;
+      justify-content: flex-start;
-      background-color: #fff;
+      gap: 16rpx;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      margin-bottom: 24rpx;
 
-      .btn-reset,
+      .state-item {
-      .btn-confirm {
+        padding: 0 40rpx;
-        display: flex;
+        height: 80rpx;
-        align-items: center;
+        border: 2rpx solid #e8edf3;
-        justify-content: center;
+        border-radius: 40rpx;
-        gap: 8rpx;
+        text-align: center;
-        height: 88rpx;
+        line-height: 80rpx;
-        border-radius: 12rpx;
+        font-size: 32rpx;
-        font-size: 30rpx;
+        color: #666666;
-        font-weight: 600;
         transition: all 0.3s ease;
+        background: #ffffff;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
         
         &:active {
-          transform: scale(0.98);
+          transform: scale(0.95);
-          opacity: 0.9;
-        }
-        
-        text {
-          line-height: 1;
         }
       }
 
-      .btn-reset {
+      .active {
-        flex: 1;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        background: #f5f7fa;
+        border: 2rpx solid transparent;
-        border: 2rpx solid #dcdfe6;
+        color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+        font-weight: 600;
+      }
+    }
+  }
 
-        text {
+  .btn-box {
-          color: #606266;
+    display: flex;
-        }
+    gap: 20rpx;
+    padding: 24rpx 30rpx;
+    background-color: #fff;
+    box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    .btn-reset,
+    .btn-confirm {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12rpx;
+      height: 96rpx;
+      border-radius: 12rpx;
+      font-size: 34rpx;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
       }
       
-      .btn-confirm {
+      text {
-        flex: 1;
+        line-height: 1;
-        background: #667eea;
+      }
-        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+    }
-        border: none;
     
-        text {
+    .btn-reset {
-          color: #ffffff;
+      flex: 1;
-        }
+      background: #f5f7fa;
+      border: 2rpx solid #dcdfe6;
+      
+      text {
+        color: #606266;
+      }
+    }
+    
+    .btn-confirm {
+      flex: 1;
+      background: #667eea;
+      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+      border: none;
+      
+      text {
+        color: #ffffff;
       }
     }
   }
@@ -705,28 +806,37 @@ page {
       
       .image-list {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
-        justify-content: center;
+        align-items: center;
         gap: 12rpx;
         margin-top: 8rpx;
         
-        .item-image {
+        .image-wrapper {
-          width: 220rpx;
+          width: 100%;
-          height: 220rpx;
+          height: 400rpx;
           border-radius: 12rpx;
-          background: #f5f7fa;
+          background: #ffffff;
-          border: 2rpx solid #e8edf3;
+          overflow: hidden;
           transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           
           &:active {
-            transform: scale(0.95);
+            transform: scale(0.98);
             opacity: 0.8;
           }
         }
         
+        .item-image {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+        
         .image-more {
-          width: 220rpx;
+          width: 100%;
-          height: 220rpx;
+          height: 180rpx;
           border-radius: 12rpx;
           background: rgba(102, 126, 234, 0.1);
           border: 2rpx dashed rgba(102, 126, 234, 0.4);
@@ -736,12 +846,12 @@ page {
           transition: all 0.3s ease;
           
           &:active {
-            transform: scale(0.95);
+            transform: scale(0.98);
             background: rgba(102, 126, 234, 0.15);
           }
           
           text {
-            font-size: 36rpx;
+            font-size: 40rpx;
             color: #667eea;
             font-weight: 600;
           }

src/pages/temp/list.vue

@@ -0,0 +1,447 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input 
+          v-model="queryParams.name" 
+          border="surround"
+          placeholder="请输入名称或昵称" 
+          placeholderStyle="color: #909399"
+          color="#333333"
+          customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
+          class="search-input"
+          @blur="handleSearch" 
+          suffixIcon="search" 
+          suffixIconStyle="color: #667eea">
+        </u--input>
+        <view class="add-btn" @click="handleAdd()">
+          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+          <text>新增</text>
+        </view>
+      </view>
+    </u-sticky>
+    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+      <u-list-item v-for="(item, index) in listData" :key="index">
+        <view class="list-item">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.name }}（{{ item.nickName }}）</text>
+                <text class="card-code">{{ dictStr(item.sex, sexList) }} · {{ dictStr(item.type, typeList) }} · {{ item.age }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item" v-if="item.birthday">
+                <text class="info-label">生日</text>
+                <text class="info-value">{{ item.birthday }}</text>
+              </view>
+              <view class="info-item" v-if="item.identityCard">
+                <text class="info-label">身份证</text>
+                <text class="info-value">{{ item.identityCard }}</text>
+              </view>
+              <view class="info-item" v-if="item.height">
+                <text class="info-label">身高（CM）</text>
+                <text class="info-value">{{ item.height }}</text>
+              </view>
+              <view class="info-item" v-if="item.weight">
+                <text class="info-label">体重（KG）</text>
+                <text class="info-value">{{ item.weight }}</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <view>
+      </view>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+  </view>
+         <!--返回首页按钮 -->
+         <suspend></suspend>
+</template>
+
+<script setup>
+import { listPerson, delPerson } from '@/api/health/person'
+import { getDicts } from '@/api/system/dict/data.js'
+import { timeHandler } from '@/utils/common.ts'
+import {onLoad,onShow} from "@dcloudio/uni-app";
+import dayjs from 'dayjs'
+    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+import {reactive ,toRefs,ref,computed }from "vue";
+const pageNum = ref(1)
+const listData = ref([])
+const isShow = ref(false)
+const status = ref('loadmore')
+const typeList = ref([])
+const sexList = ref([])
+const  flag= ref(true)
+const data = reactive({
+  filterPanel: false,
+  queryParams: {
+    name: null,
+    type: null,
+    nickName: null
+   } 
+})
+const { filterPanel, queryParams} = toRefs(data)
+const windowHeight = computed(() => {
+			uni.getSystemInfoSync().windowHeight - 50
+		})	
+onLoad(() => {
+    getList()
+  });
+
+ onShow(() => {
+    if (isShow.value) {
+      listData.value=[]
+      getList()
+      isShow.value = false
+    }
+  });
+
+  function handleSearch() {
+      pageNum.value = 1
+      listData.value = []
+      getList()
+     }
+
+  function dictStr(val, arr) {
+      let str = ''
+      arr.map(item => {
+        if (item.dictValue === val) {
+          str = item.dictLabel
+        }
+      })
+      return str
+    }
+
+function loadmore() {
+      pageNum.value += 1
+      if (status.value == 'loadmore') {
+        getList()
+      }
+    }
+function getList() {
+       // 类型
+       getDicts('person_type').then(res => {
+        typeList.value = res.data
+      })
+      // 类型
+        getDicts('sys_user_sex').then(res => {
+        sexList.value = res.data
+      })
+      status.value = 'loading'
+      listPerson({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
+        listData.value = listData.value.concat(res.rows)
+        if (listData.value.length < res.total) {
+          status.value = 'loadmore'
+        } else {
+          status.value = 'nomore'
+        }
+      }).catch(() => {
+        status.value = 'nomore'
+      })
+    }
+
+    function handleEdit(item) {
+      uni.navigateTo({ url: `/pages/health/person/addEdit?id=${item.id}` })
+      isShow.value = true
+    }
+    function handleAdd() {
+      uni.navigateTo({ url: `/pages/health/person/addEdit` })
+      isShow.value = true
+    }
+    function handleDelete(item) {
+      uni.showModal({
+        title: '确认删除',
+        content: '确定要删除这条记录吗？',
+        confirmText: '删除',
+        cancelText: '取消',
+        confirmColor: '#f5576c',
+        cancelColor: '#909399',
+        success: function (res) {
+          if (res.confirm) {
+            delPerson(item.id).then(() => {
+              uni.showToast({
+                title: '删除成功',
+                icon: 'success'
+              })
+              pageNum.value = 1
+              listData.value = []
+              getList()
+            })
+          }
+        }
+      });
+    }
+	
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.search-view {
+  padding: 12rpx 32rpx;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  gap: 24rpx;
+
+  .search-input {
+    background: rgba(102, 126, 234, 0.08);
+    color: #333333;
+    flex: 1;
+    margin-right: 0;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
+    
+    /* H5端placeholder样式 */
+    :deep(input::placeholder) {
+      color: #909399 !important;
+      font-size: 14px !important;
+    }
+    
+    :deep(input::-webkit-input-placeholder) {
+      color: #909399 !important;
+      font-size: 14px !important;
+    }
+    
+    :deep(input::-moz-placeholder) {
+      color: #909399 !important;
+      font-size: 14px !important;
+    }
+    
+    /* 输入文字颜色 */
+    :deep(.u-input__content__field-wrapper__field) {
+      color: #333333 !important;
+    }
+    
+    :deep(input) {
+      color: #333333 !important;
+    }
+  }
+  
+  .add-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    
+    &:active {
+      transform: scale(0.95);
+      background: rgba(102, 126, 234, 0.12);
+    }
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
+    }
+  }
+}
+
+.list-item {
+  margin: 10rpx 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .card-name-section {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .card-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+    }
+    
+    .card-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12rpx;
+      
+      .card-name {
+        color: #ffffff;
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-shrink: 0;
+        letter-spacing: 0.5rpx;
+      }
+      
+      .card-code {
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        min-width: 0;
+        letter-spacing: 0.3rpx;
+      }
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fafbfc;
+    border: 2rpx solid #f0f2f5;
+    margin: 15rpx 16rpx 2rpx;
+    border-radius: 12rpx;
+  }
+
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -12rpx;
+
+    .info-item {
+      width: 50%;
+      padding: 0 12rpx;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 20rpx;
+      
+      &.info-item-full {
+        width: 100%;
+      }
+
+      .info-label {
+        font-size: 24rpx;
+        color: #667eea;
+        font-weight: 500;
+        background: rgba(102, 126, 234, 0.08);
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        align-self: flex-start;
+        margin-bottom: 8rpx;
+      }
+
+      .info-value {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        flex: 1;
+        line-height: 1.5;
+        word-break: break-all;
+      }
+      
+      &:not(.info-item-full) .info-value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx 24rpx;
+    gap: 16rpx;
+
+    .btn-edit,
+    .btn-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 0 24rpx;
+      height: 64rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
+    }
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
+    }
+  }
+}
+</style>