ok

hdApp/src/admin/home/member.vue

@@ -25,14 +25,16 @@
                 <div class="user-info">
                   <div class="user-main">
                     <div class="user-name">{{item.name}}</div>
-                    <div class="user-balance" v-if="Number(item.balance) !== 0">
-                      <text v-if="Number(item.balance) > 0" class="balance positive">+￥{{ parseFloat(item.balance).toFixed(2) }}</text>
-                      <text v-if="Number(item.balance) < 0" class="balance negative">-￥{{ parseFloat(Math.abs(item.balance)).toFixed(2) }}</text>
+                    <div class="right-info">
+                      <div v-if="!$util.isEmpty(item.memberName)" class="member-badge">{{ item.memberName }}</div>
+                      <div class="user-balance" v-if="Number(item.balance) !== 0">
+                        <text v-if="Number(item.balance) > 0" class="balance positive">+￥{{ parseFloat(item.balance).toFixed(2) }}</text>
+                        <text v-if="Number(item.balance) < 0" class="balance negative">-￥{{ parseFloat(Math.abs(item.balance)).toFixed(2) }}</text>
+                      </div>
                     </div>
                   </div>
                   <div class="user-meta">
                     <div class="visit-time">{{item.visitTime.substr(5,11)}}</div>
-                    <div v-if="!$util.isEmpty(item.memberName)" class="member-badge">{{ item.memberName }}</div>
                   </div>
                 </div>
               </div>
@@ -150,10 +152,6 @@ export default {
 }
   .list-wrap {
     padding-top: 100upx;
-    background-color: #fff;
-    border-radius: 10upx;
-    margin: 0 20upx;
-    overflow: hidden;
     
     .list {
       background-color: #fff;
@@ -204,32 +202,35 @@ export default {
    display: flex;
    align-items: center;
    padding: 20upx 0;
+   width: 100%;
+   position: relative;
 
-  .user-avatar {
-    width: 80upx;
-    height: 80upx;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-right: 20upx;
-
-    .avatar-img {
-      width: 100%;
-      height: 100%;
-    }
-  }
+     .user-avatar {
+     width: 80upx;
+     height: 80upx;
+     border-radius: 50%;
+     overflow: hidden;
+     margin-left: 30upx;
+     margin-right: 20upx;
 
-  .user-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 80upx;
-  }
+     .avatar-img {
+       width: 100%;
+       height: 100%;
+     }
+   }
 
-        .user-main {
+        .user-info {
+     flex: 1;
      display: flex;
+     flex-direction: column;
      justify-content: space-between;
-     align-items: center;
+     height: 80upx;
+     padding-right: 260upx;
+   }
+
+   .user-main {
+     display: flex;
+     align-items: flex-start;
      margin-bottom: 8upx;
    }
 
@@ -240,10 +241,18 @@ export default {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
-     flex: 1;
-     margin-right: 20upx;
-     min-width: 0;
-     max-width: 300upx;
+   }
+
+   .right-info {
+     position: absolute;
+     right: 70upx;
+     top: 20upx;
+     display: flex;
+     flex-direction: column;
+     align-items: flex-end;
+     gap: 6upx;
+     max-width: 160upx;
+     z-index: 1;
    }
 
    .user-balance {
@@ -266,15 +275,12 @@ export default {
 
    .user-meta {
      display: flex;
-     justify-content: space-between;
      align-items: center;
      font-size: 24upx;
      color: #9397a4;
    }
 
    .visit-time {
-     flex: 1;
-     margin-right: 20upx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
@@ -287,10 +293,15 @@ export default {
      border-radius: 20upx;
      font-size: 22upx;
      font-weight: bold;
-     margin-left: 20upx;
      box-shadow: 0 2upx 8upx rgba(4, 158, 44, 0.25);
      border: 1upx solid rgba(255, 255, 255, 0.3);
      white-space: nowrap;
+     flex-shrink: 0;
    }
 }
+
+// 确保箭头正常显示
+::v-deep .tui-list-cell.tui-cell-arrow:before {
+  z-index: 10;
+}
 </style>