样式

src/views/mine/teaTalk.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="assets" @scroll="handleScroll">
     <div class="list" v-if="list.length > 0">
-      <div class="item f-sb-n" v-for="(item, index) in list" :key="index">
-        <div class="left">
-          <div>
-            <span v-html="item.introduction"></span>
-            <img src="@/assets/images/copy.png" alt="" class="icon copys" :data-clipboard-text="item.introduction.replace(/<[^>]*>/g, '')" @click="copy(item.introduction.replace(/<[^>]*>/g, ''))" />
-          </div>
-          <div>
-            <van-image :src="item.img_url" alt="" class="pic" @click="preview(item.img_url)" />
-          </div>
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div v-if="item.introduction">
+          <span v-html="item.introduction.split(/\r\n|\r|\n/).join('<br>')"></span>
+          <img src="@/assets/images/copy.png" alt="" class="icon copys" :data-clipboard-text="item.introduction.replace(/<[^>]*>/g, '')" @click="copy(item.introduction.replace(/<[^>]*>/g, ''))" />
+        </div>
+        <div v-if="!item.introduction">
+          <span v-html="item.body.split(/\r\n|\r|\n/).join('<br>')"></span>
+          <img src="@/assets/images/copy.png" alt="" class="icon copys" :data-clipboard-text="item.body.replace(/<[^>]*>/g, '')" @click="copy(item.body.replace(/<[^>]*>/g, ''))" />
+        </div>
+        <div>
+          <van-image :src="item.img_url" alt="" class="pic" @click="preview(item.img_url)" />
+        </div>
+        <div class="f-sb-n">
           <div class="time">
             <span>{{ dateFormatFn(item.createtime) }}</span>
           </div>
-        </div>
-        <div class="right f-row copys" :data-clipboard-text="item.img_url" @click="copyimg(item.img_url)">
-          <img src="@/assets/images/down.png" alt="" class="icon" />
-          <span>{{ $t('lang293') }}</span>
+          <div class="right f-row copys" :data-clipboard-text="item.img_url" @click="copyimg(item.img_url)">
+            <img src="@/assets/images/down.png" alt="" class="icon" />
+            <span>{{ $t('lang293') }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -167,38 +171,34 @@ export default {
       border-radius: 12px;
       margin-bottom: 10px;
       background-color: #fff;
-      .left {
-        line-height: 150%;
-        padding-right: 10px;
-        .icon {
-          width: 14px;
-          height: 14px;
-          margin-left: 10px;
-        }
-        .pic {
-          min-width: 50px;
-          min-height: 50px;
-          max-width: 100%;
-          max-height: 140px;
-          margin: 10px 0;
+      line-height: 150%;
+      .icon {
+        width: 14px;
+        height: 14px;
+        margin-left: 10px;
+      }
+      .pic {
+        min-width: 50px;
+        min-height: 50px;
+        max-width: 100%;
+        max-height: 140px;
+        margin: 10px 0;
 
-          ::v-deep img {
-            max-width: 100% !important;
-            max-height: 140px !important;
-          }
-        }
-        .time {
-          font-size: 10px;
-          font-weight: normal;
-          color: #aaa;
+        ::v-deep img {
+          max-width: 100% !important;
+          max-height: 140px !important;
         }
       }
+      .time {
+        font-size: 10px;
+        font-weight: normal;
+        color: #aaa;
+      }
       .right {
         font-size: 9px;
         color: #7c92bf;
         width: fit-content;
         white-space: nowrap;
-        padding-bottom: 6px;
         .icon {
           width: 14px;
           height: 14px;