优化页面

pages/Mine/minecomponents/DetailsPKRecords/DetailsPKRecords.vue

@@ -15,6 +15,7 @@
       <view class="card">
         <!-- 主播A -->
         <view class="AnchorA">
+          <view class="Anchor">
           <view class="AnchorAImg">
             <!-- 头像 -->
             <image class="AnchorAImgcss" :src="item.anchorIconA" mode="scaleToFill" />
@@ -26,10 +27,11 @@
             mode="scaleToFill"
            v-if="item.winnerAnchorId == item.anchorIdA"
           />
+        </view>
           <view class="AnchorAinfo">
             <view class="AnchorAname"> {{ item.anchorIdA }} </view>
             <view class="AnchorATime">{{ formatDate(item.pkTime) }}</view>
-            <view class="AnchorAICon">
+            <view class="AnchorAICon" v-if="item.userACoins!==null">
               <view class="AnchorAIContext">实际打金币:</view>
               <view class="AnchorAIConNum">{{ item.userACoins }}K</view>
             </view>
@@ -42,14 +44,7 @@
         </view>
         <!-- 主播B -->
         <view class="AnchorB">
-          <view class="AnchorBinfo">
-            <view class="AnchorAname">{{ item.anchorIdB }} </view>
-            <view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
-            <view class="AnchorAICon">
-              <view class="AnchorAIContext">实际打金币:</view>
-              <view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
-            </view>
-          </view>
+          <view class="Anchor">
           <view class="AnchorAImg">
             <!-- 头像 -->
             <image class="AnchorBImgcss" :src="item.anchorIconB" mode="scaleToFill" />
@@ -62,6 +57,15 @@
             v-if="item.winnerAnchorId == item.anchorIdB"
           />
         </view>
+          <view class="AnchorBinfo">
+            <view class="AnchorAname">{{ item.anchorIdB }} </view>
+            <view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
+            <view class="AnchorAICon" v-if="item.userBCoins!==null">
+              <view class="AnchorAIContext">实际打金币:</view>
+              <view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
+            </view>
+          </view>
+        </view>
       </view>
       <view class="pkrecords-content">
         <scroll-view
@@ -99,8 +103,8 @@ export default {
   data() {
     return {
       title: "Hello",
-      item: {},
-      coinNumlist: [],
+      item:{},
+      coinNumlist:[],
       triggered: false,
     };
   },
@@ -191,20 +195,27 @@ export default {
 }
 /* 卡片 */
 .card {
-  width: 694.66rpx;
-  height: 161.26rpx;
+  width: 750rpx;
+  height: 300rpx;
   border-radius: 15rpx;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  margin-left: 28.55rpx;
   margin-top: 20rpx;
 }
 .AnchorA {
   display: flex;
+  flex-direction: column;
   align-items: center;
+  margin-left: 30rpx;
 }
 .AnchorB {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 30rpx;
+}
+.Anchor{
   display: flex;
   align-items: center;
 }
@@ -219,19 +230,23 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 20rpx;
+  width: 250rpx;
 }
 .AnchorBinfo {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-right: 20rpx;
+  width: 250rpx;
 }
 .AnchorAname {
+  width: 250rpx;
   font-weight: 500;
   font-size: 31rpx;
   color: #161616;
   text-align: center;
+  white-space: nowrap; /* 防止换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }
 .AnchorATime {
   font-weight: 400;
@@ -288,18 +303,16 @@ export default {
   color: #f0836c;
   font-weight: bold;
   font-style: italic;
-  margin-left: 26rpx;
 }
 .Stext {
   font-size: 45.8rpx;
   color: #58d8db;
   font-weight: bold;
   font-style: italic;
-  margin-right: 26rpx;
 }
 .pkrecords-content {
   position: absolute;
-  top: 240rpx;
+  top: 300rpx;
   left: 0;
   right: 0;
   display: flex;