优化页面

pages/pkDetail/pkDetail.vue

@@ -13,14 +13,13 @@
       </view>
     </view>
     <view class="Content">
-      <!-- 发布者 -->
       <view class="sender">
         <view class="sengderIcon">
           <image class="Icon" :src="item.anchorIcon" mode="scaleToFill" />
         </view>
 
         <view class="Individual">
-          <view class="name">{{ item.anchorId }}</view>
+          <view class="name">{{ item.disPlayId }}</view>
 
           <view class="GenderAndAge">
             <view class="male" v-if="item.sex === '1'">
@@ -73,6 +72,16 @@
           </view>
         </view>
       </view>
+      <view class="remark">
+        <uni-easyinput
+            type="textarea"
+            v-model="item.remark"
+            placeholder="备注"
+            maxlength="-1"
+            disabled="true"
+            :style="style"
+          ></uni-easyinput>
+      </view>
       <view class="button" v-if="item.senderId !== id">
         <button class="accept" @click="openChat()">聊了个天</button>
         <button class="reject" @click="open()">立即邀请</button>
@@ -88,7 +97,7 @@
       <view class="popup-title">
         <view class="popup-text">请选择您要参与的主播</view>
         <scroll-view scroll-y="true" class="scroll">
-          <view class="card" v-for="(item, index) in list">
+          <view class="card" v-for="(item, index) in list" :key="index">
             <view
               class="card-content"
               @click="Select(item.id, index)"
@@ -103,14 +112,11 @@
               <view class="NameMoney">
                 <view class="TimeMoney">
                   <view class="NameMoney_Name">{{ item.anchorId }}</view>
-                  <viewm class="goldnb"
-                    ><view class="goldimg"></view>{{ item.coin }}K</viewm
-                  >
                 </view>
-                <view class="TimeMoney_Time"
-                  ><view class="pkTimeimg"></view
-                  ><view>{{ TimeFormatting(item.pkTime) }}</view></view
-                >
+                <view class="TimeMoney_Time">
+                <view class="pkTimeimg"></view><view>{{ TimeFormatting(item.pkTime) }}</view>
+                  <viewm class="goldnb"><view class="goldimg"></view>{{ item.coin }}K</viewm>
+                  </view>
               </view>
             </view>
           </view>
@@ -150,6 +156,9 @@ export default {
       chatInfo: {},
       currentConversation: null,
       // parentMessage: null,
+      style: {
+        backgroundColor: "#ffffff",
+      }
     };
   },
   onLoad(options) {
@@ -318,7 +327,7 @@ export default {
   border: 1rpx solid #03aba8;
 }
 .scroll {
-  width: 470rpx;
+  width: 500rpx;
   height: 400rpx;
   border-radius: 10px;
   /* background-color: #fff; */
@@ -329,13 +338,9 @@ export default {
   font-weight: bold;
   margin-bottom: 30rpx;
 }
-.card {
-  margin-top: 10rpx;
-  margin-left: 10rpx;
-}
 .card-content {
   /* width: 445rpx; */
-  width: 90%;
+  width: 100%;
   height: 100rpx;
   background-color: #ffffff;
   /* border: 2px solid #afafaf; */
@@ -398,10 +403,14 @@ export default {
   flex-direction: column;
 }
 .NameMoney_Name {
+  width: 400rpx;
   text-align: left;
   font-weight: bold;
   font-size: 27rpx;
   color: #161616;
+  white-space: nowrap;   /* 防止换行 */
+  overflow: hidden;      /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }
 .background {
   position: fixed;
@@ -470,8 +479,11 @@ export default {
   margin-right: 16.22rpx;
 }
 .nation {
-  width: 56.3rpx;
+  /* width: 56.3rpx; */
   height: 29.58rpx;
+  white-space: nowrap;   /* 防止换行 */
+  overflow: hidden;      /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
   font-size: 17.18rpx;
   color: #666666;
   text-align: center;
@@ -552,11 +564,15 @@ export default {
   flex-direction: column;
   align-items: center;
 }
+.remark{
+  margin-top: 60rpx;
+  width: 90%;
+}
 .button {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 645rpx;
+  margin-top: 500rpx;
 }
 .accept {
   width: 325.38rpx;