05211655

src/components/popupLayout/Broadcast.vue

@@ -2,6 +2,12 @@
   <div class="wrapper">
     <div class="ui-broadcast" @click="close">
       <div class="ui-con" @click.stop>
+        <div class="title">{{item.name}}</div>
+        <div class="tag">
+          <img :src="require(`@/assets/images/icon/tag/${iconArr[item.type].img}.png`)">
+          <span>{{iconArr[item.type].name}}</span>
+        </div>
+
         <img class="bg" :src="require('@/assets/images/collect_bg.png')">
         <img class="close"  @click="close" :src="require('@/assets/images/icon/close.png')">
         <div class="img-con img-k" >
@@ -9,6 +15,7 @@
           <img v-else-if="item.type == 'img'" :src="$serverName+item.filePath" alt="">
           <video controlslist="nodownload" disablePictureInPicture controls autoplay v-else :src="$serverName+item.filePath"></video>
         </div>
+        <div class="intro" v-html="item.description"></div>
       </div>
      <div class="full" v-if="isFull" @click.stop>
       <img class="full-btn"  @click="close" :src="`${$cdn}images/close-full.png`" alt="">
@@ -17,10 +24,25 @@
   </div>
 </template>
 <script>
+let iconArr={
+  img:{
+    img:'ICON_xiangpian2',
+    name:'图片'
+  },
+  video:{
+    img:'ICON_bofang2',
+    name:'视频'
+  },
+  model:{
+    img:'ICON_moxing2',
+    name:'模型'
+  },
+}
 export default {
   data(){
     return {
-      isFull:false
+      isFull:false,
+      iconArr
     };
   },
   mounted(){
@@ -61,6 +83,34 @@ export default {
     border-radius: 10px;
     overflow: hidden;
     box-sizing: border-box;
+    height: 80vh;
+      .title{
+        text-align: center;
+        position: absolute;
+        width: 100%;
+        font-size: 16px;
+        top: 26px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #fcd67b;
+      }
+      .tag{
+        position: absolute;
+        left: 60px;
+        top: 20px;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        >img{
+          width: 24px;
+          height: 24px;
+        }
+        >span{
+          font-size: 16px;
+          display: inline-block;
+          margin-left: 10px;
+        }
+      }
      .bg{
         position: absolute;
         top: 0;
@@ -88,6 +138,19 @@ export default {
       max-height: 60vh;
       height: auto;
     }
+    .intro{
+      font-size: 16px;
+      color: #fff;
+      width: 90%;
+      margin: 0 auto;
+      line-height: 1.5;
+      text-align: justify;
+      margin-top: 10px;
+      max-height: 80px;
+      overflow-y: auto;
+      letter-spacing: 1px;
+      padding-right: 10px;
+    }
   }
   .full{
     width: 100%;
@@ -142,6 +205,7 @@ export default {
         height: auto;
       }
     }
+   
   }
 }
 }

src/views/collection/pc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collection">
+  <div class="collection" v-show="hasLoad">
     <img class="bg" :src="require('@/assets/images/collect_bg.png')">
     <img class="close" @click="$bus.$emit('toggleCollect',false)" :src="require('@/assets/images/icon/close.png')">
     <div class="bar1">
@@ -77,7 +77,8 @@ export default {
         }
       ],
       typeActive:'',
-      list:[]
+      list:[],
+      hasLoad:false
     }
   },
   computed:{
@@ -124,6 +125,7 @@ export default {
       }
       this.list = result.data.list
       this.paging.total = result.data.total
+      this.hasLoad = true
     },
     handleToggle(data){
       this.isShow = data