1

src/views/live/parts/videoDetail.vue

@@ -55,7 +55,34 @@
                 </el-col>
               </el-col>
             </van-tab>
-            <van-tab title="嘉宾访谈">嘉宾访谈</van-tab>
+            <van-tab title="嘉宾访谈">
+              <div class="jiabinlist">
+                <!-- <ul>
+                  <li v-for="(ref, index) in zxzdlist" :key="index">
+                    <img :src="ref.picture" />
+                    <p>
+                      <span class="textOver" @click="$router.push({ path: '/hall/zxzdxmly/zxzdDetail', query: { id: ref.id } })">{{ ref.title }}</span>
+                      <span>{{ ref.publish_time }}</span>
+                      <span class="text">{{ ref.titlejj }} </span>
+                    </p>
+                  </li>
+                </ul> -->
+                <el-col :span="24" class="jiabin" v-for="(item, index) in zxzdlist" :key="index">
+                  <el-col :span="4" class="img4">
+                    <img :src="item.picture" style="width: 100%; height: 100%" />
+                  </el-col>
+                  <el-col :span="20" class="info">
+                    <el-col :span="16" class="title">
+                      {{ item.title }}
+                    </el-col>
+                    <el-col :span="8" class="time">
+                      {{ item.publish_time }}
+                    </el-col>
+                    <el-col :span="24" class="con">{{ item.titlejj }}</el-col>
+                  </el-col>
+                </el-col>
+              </div>
+            </van-tab>
             <van-tab title="项目路演">项目路演</van-tab>
           </van-tabs>
         </el-col>
@@ -97,6 +124,8 @@ export default {
       active: 0,
       // 图文直播
       lunboList: [],
+      // 嘉宾访谈
+      zxzdlist: [],
     };
   },
   async created() {
@@ -125,7 +154,9 @@ export default {
         let exportdata = await this.expertQuery({ role: 6, limit: 6 });
         if (this.$checkRes(exportdata)) this.$set(this, `expertList`, exportdata.data);
         //嘉宾访谈dock id
-        let jbftData = await this.danceQuery();
+        let jbftData = await this.danceQuery({ dock_id: this.dock_id, role: 6, limit: 6 });
+        if (this.$checkRes(jbftData)) this.$set(this, `zxzdlist`, jbftData.data);
+        console.log(this.zxzdlist);
       }
     },
     // 文字/视频倒计时
@@ -273,6 +304,88 @@ export default {
         padding: 6px 0px 1px 20px;
       }
     }
+    .jiabinlist {
+      .jiabin {
+        padding: 5px 0px;
+        border-bottom: 1px dashed #ff8500;
+        .img4 {
+          height: 75px;
+        }
+        .info {
+          padding-left: 10px;
+          .title {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 18px;
+            font-weight: bolder;
+          }
+          .time {
+            font-size: 16px;
+            color: #666;
+          }
+          .con {
+            font-size: 16px;
+            color: #666;
+            margin-top: 5px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+    // .jiabinlist .jiabin {
+    //   float: left;
+    //   width: 100%;
+    //   height: 475px;
+    //   overflow: auto;
+    //   li {
+    //     float: left;
+    //     width: 100%;
+    //     border-bottom: 1px dashed #ff8500;
+    //     padding: 16px 0;
+    //     img {
+    //       float: left;
+    //       width: 20%;
+    //       height: 80px;
+    //     }
+    //     p {
+    //       float: left;
+    //       width: 71%;
+    //       padding: 0 0 0 10px;
+    //       span:first-child {
+    //         float: left;
+    //         width: 70%;
+    //         font-size: 18px;
+    //       }
+    //       span:first-child:hover {
+    //         cursor: pointer;
+    //       }
+    //       span:last-child {
+    //         float: left;
+    //         width: 100%;
+    //         font-size: 14px;
+    //         color: #888;
+    //         overflow: hidden;
+    //         text-overflow: ellipsis;
+    //         -webkit-line-clamp: 3;
+    //         word-break: break-all;
+    //         display: -webkit-box;
+    //         -webkit-box-orient: vertical;
+    //       }
+    //     }
+    //   }
+    //   li:last-child {
+    //     border-bottom: none;
+    //     float: left;
+    //     width: 100%;
+    //   }
+    //   li:hover p span:first-child {
+    //     color: #0e90d2;
+    //   }
+    // }
   }
 }
 /deep/.video-js {