fix: 健康档案统计，样式优化完善。

src/pages/health/person/list.vue

@@ -1,60 +1,65 @@
 <template>
   <view class="container">
-    <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
-         <view class="search-view">
-          <u-input v-model="queryParams.name" border="false" type="select"   @click="handleSearch" placeholder="请填入名称或昵称" suffixIcon="search"
-	    suffixIconStyle="color: #909399" class="search-input">
-        </u-input>
-        <u-icon name="plus-circle-fill" color="#666666" size="28" style="margin-left:10px" label="新增"
-        labelPos="left" labelSize="32rpx" labelColor="#666666" @click="handleAdd()"></u-icon>
-       </view>
-       </u-sticky>
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.name" border="false" placeholder="请输入名称或昵称" class="search-input"
+          @blur="handleSearch" suffixIcon="search" suffixIconStyle="color: #909399">
+        </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">
-            <u--text lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
-              :text="item.name+'（'+item.nickName+'）- '+dictStr(item.sex,sexList) +' - '+dictStr(item.type,typeList) +' - '+item.age" size="30rpx" color="#333333" :bold="true"></u--text>
+            <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="item-row">
-            <text class="row-label">昵称：</text>
-            <text class="row-value">{{ item.nickName }}</text>
-          </view> -->
-          <!-- <view class="item-row">
-            <text class="row-label">类型：</text>
-            <text class="row-value">{{ dictStr(item.type,typeList) }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">生日：</text>
-            <text class="row-value">{{ item.birthday }}</text>
+          
+          <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="item-row">
-            <text class="row-label">身份证：</text>
-            <text class="row-value">{{ item.identityCard }}</text>
-          </view>
-          <!-- <view class="item-row">
-            <text class="row-label">年龄：</text>
-            <text class="row-value">{{ item.age }}</text>
-          </view> -->
-          <view class="item-row">
-            <text class="row-label">身高（CM）：</text>
-            <text class="row-value">{{ item.height }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">体重（KG）：</text>
-            <text class="row-value">{{ item.weight }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">排序：</text>
-            <text class="row-value">{{ item.ranking }}</text>
-          </view>
-          <view class="item-row">
-            <text class="row-label">备注：</text>
-            <text class="row-value">{{ item.remark }}</text>
-          </view>
-          <view class="operate" >
-            <view class="btn filling" @click="handleEdit(item)">修改</view>
-            <view class="btn filling" @click="handleDelete(item)">删除</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>
@@ -160,30 +165,35 @@ function getList() {
     }
     function handleDelete(item) {
       uni.showModal({
-        	title: '提示',
-        	content: '你确定要删除吗',
-        	success: function (res) {
-        		if (res.confirm) {
-        		  delPerson(item.id)
-              uni.navigateTo({ url: `/pages/health/person/list` })
-        		} else if (res.cancel) {
-        			console.log('取消');
-        		}
-        	}
-        });
+        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>
-.btnAdd {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      display:float;
-      text-align: center;
-    }
+page {
+  height: 100%;
+  overflow: auto;
+}
 
 .search-view {
   padding: 12rpx 32rpx;
@@ -192,157 +202,207 @@ function getList() {
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
   .search-input {
-    background: #F5F5F5;
+    background: rgba(102, 126, 234, 0.08);
     color: #333333;
-    margin-right: 36rpx;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
   }
-
-  .filter-panel {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 96rpx;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .filter-panel-content {
-      background-color: #ffff;
-      padding: 0 30rpx 30rpx;
-
-      .filter-title {
-        color: #000000;
-        font-size: 30rpx;
-        font-weight: 500;
-        padding: 30rpx 0;
-      }
-
-      .state-list {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-
-        .state-item {
-          width: 210rpx;
-          height: 72rpx;
-          border: 1rpx solid rgba(0, 0, 0, 0.25);
-          border-radius: 72rpx;
-          text-align: center;
-          line-height: 72rpx;
-          margin: 0 20rpx 20rpx 0;
-          font-size: 28rpx;
-          color: #000000;
-        }
-
-        .active {
-          background-color: rgba(222, 241, 255, 1);
-          border: 1rpx solid rgba(22, 119, 255, 1);
-        }
-      }
+  
+  .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);
     }
-
-    .btn-box {
-      display: flex;
-      padding: 24rpx 30rpx;
-      background-color: #fff;
-      box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    
+    uni-icons {
+      color: #667eea;
     }
   }
 }
 
 .list-item {
-  margin: 0 24rpx 24rpx;
-  padding: 32rpx;
+  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-bottom: 16rpx;
-
-    .status {
-      .status-item {
-        width: 120rpx;
-        height: 44rpx;
-        text-align: center;
-        line-height: 44rpx;
-        border-radius: 4rpx;
-        font-size: 24rpx;
+    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;
       }
-
-      .status1 {
-        background: #F0F0F0;
-        color: #8C8C8C;
-      }
-
-      .status2 {
-        background: rgba(38, 129, 255, 0.2);
-        color: #2681FF;
-      }
-
-      .status3 {
-        background: #F7F7F7;
-        color: #2681FF;
-      }
-
-      .status4 {
-        background: rgba(255, 85, 51, 0.2);
-        color: #FF5533;
-      }
-
-      .status5 {
-        background: #F7F7F7;
-        color: rgba(0, 0, 0, 0.85);
-      }
-
-      .status7 {
-        background: rgba(255, 129, 51, 0.2);
-        color: #FF8133;
-      }
-
-      .status8 {
-        background: rgba(65, 217, 165, 0.2);
-        color: #41D9A5;
+      
+      .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;
       }
     }
   }
 
-  .item-row {
-    padding: 16rpx 0;
+  .card-body {
+    padding: 24rpx;
+    background: #fff;
+  }
 
-    .row-label {
-      color: rgba(0, 0, 0, 0.55);
-    }
+  .info-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24rpx;
+    margin-bottom: 0;
 
-    .row-value {
-      color: rgba(0, 0, 0, 0.85)
+    .info-item {
+      flex: 0 0 calc(50% - 12rpx);
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      min-width: 0;
+      margin-bottom: -5rpx;
+      
+      &.info-item-full {
+        flex: 0 0 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;
+      }
+
+      .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 {
-      width: 146rpx;
-      height: 56rpx;
-      line-height: 56rpx;
-      border-radius: 8rpx;
-      margin-left: 5rpx;
-      text-align: center;
+    .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);
+      }
     }
-
-    .circulation {
-      background: rgba(0, 0, 0, 0.04);
-      margin-right: 24rpx;
-      color: rgba(0, 0, 0, 0.85);
+    
+    .btn-edit {
+      background: rgba(102, 126, 234, 0.1);
+      color: #667eea;
+      border: 1rpx solid rgba(102, 126, 234, 0.3);
     }
-
-    .filling {
-      background: #2681FF;
-      border-radius: 8rpx;
-      color: #FFFFFF;
+    
+    .btn-delete {
+      background: rgba(245, 87, 108, 0.1);
+      color: #f5576c;
+      border: 1rpx solid rgba(245, 87, 108, 0.3);
     }
   }
 }