商品讲解组件

src/components/livedModel/livedAnnouncement.vue

@@ -2,7 +2,7 @@
   <!-- 公告组件 -->
   <div class="livedAnnouncement" v-show="isShow">
     <div class="label">
-      <span class="label">公告：</span><span class="test">欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间</span>
+      <span class="labelTit">公告：</span><span class="test">欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间</span>
     </div>
   </div>
 </template>
@@ -48,6 +48,9 @@ export default {
   }
   .label{
     padding-right: 4px;
+    .labelTit{
+      color: #f9a93c;
+    }
   }
 }
 @keyframes toLeft {

src/components/livedModel/livedControls.vue

@@ -4,6 +4,8 @@
     <livedAnnouncement></livedAnnouncement>
     <!-- 评论层 -->
     <livedIsMsg></livedIsMsg>
+    <!-- 带货商品层 -->
+    <livedExplainingCommodities></livedExplainingCommodities>
     <!-- 底部控制层 -->
     <div class="control flex">
       <div class="goodsImg">
@@ -30,6 +32,7 @@
 <script type="text/ecmascript-6">
 import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
 import livedIsMsg from "@/components/livedModel/livedIsMsg";
+import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
 export default {
   name: "",
   data() {
@@ -47,7 +50,8 @@ export default {
   },
   components: {
     livedAnnouncement,
-    livedIsMsg
+    livedIsMsg,
+    livedExplainingCommodities
   },
   computed: {
     likeNumCopy() {

src/components/livedModel/livedExplainingCommodities.vue

+<template>
+  <!-- 讲解商品 -->
+  <div class="livedExplainingCommodities">
+    <div class="goods clearfix" v-if="!showFixedGoods">
+      <div
+        class="goodsList"
+        :class="{isEC:item.isEC}"
+        v-for="(item,index) in goodsList"
+        :key="index"
+      >
+        <img :src="item.img" alt />
+        <p class="num">{{item.id}}</p>
+        <div class="explain" v-if="item.isEC">讲解中</div>
+      </div>
+    </div>
+    <!-- 左上角展示讲解中商品 -->
+    <div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0">
+      <div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index">
+        <img :src="item.img" alt />
+        <p class="num">{{item.id}}</p>
+        <div class="explain" v-if="item.isEC">讲解中</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "",
+  data() {
+    return {
+      showFixedGoods: false, //展示讲解中商品方式  false底部|true左侧固定
+      goodsList: [
+        {
+          isEC: true,
+          id: 1,
+          img:
+            "https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg"
+        },
+        {
+          isEC: true,
+          id: 2,
+          img:
+            "https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
+        },
+        {
+          isEC: false,
+          id: 3,
+          img:
+            "https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
+        },
+        {
+          isEC: false,
+          id: 4,
+          img:
+            "https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
+        },
+        {
+          isEC: false,
+          id: 5,
+          img:
+            "https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
+        }
+      ],
+      // 讲解中浮动商品
+      fixedGoodsList: []
+    };
+  },
+  components: {},
+  computed: {},
+  created() {},
+  onLoad() {
+    setTimeout(() => {
+      let newArr = this.goodsList.filter((item, index) => {
+        if (item.isEC) {
+          return item;
+        }
+      });
+      this.fixedGoodsList=newArr?newArr:[];
+      this.showFixedGoods = true;
+    }, 5000);
+  },
+  onUnload() {
+    this.fixedGoodsList = [];
+    this.showFixedGoods = false;
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+img{
+  display: block;
+}
+.fl {
+  float: left;
+}
+/*清除浮动*/
+.clearfix {
+  zoom: 1;
+}
+
+.clearfix:after {
+  clear: both;
+  content: ".";
+  display: block;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+.livedExplainingCommodities {
+  width: 100%;
+  padding: 0 12px;
+  overflow-x: auto;
+  .goods {
+    overflow-x: auto;
+    white-space: nowrap;
+    overflow-y: hidden;
+    margin-bottom: 10px;
+    .goodsList {
+      display: inline-block;
+      position: relative;
+      width: 30vw;
+      height: 30vw;
+      border: 1px solid #949494;
+      margin-right: 10px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .num {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fff;
+        font-size: 12px;
+        background: #666;
+        padding: 2px 4px;
+        border-bottom-right-radius: 6px;
+      }
+      .explain {
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #fff;
+        font-size: 12px;
+        background: #ff3334;
+        padding: 2px 4px;
+        border-bottom-left-radius: 6px;
+      }
+    }
+  }
+  .isEC {
+    border-color: #ff3334;
+  }
+  .fixedGoods {
+    position: fixed;
+    top: 14vh;
+    left: 12px;
+    .goodsList{
+      width: 22vw;
+      height: 22vw;
+      border: 1px solid #ff3334;
+      margin-right: 10px;
+      overflow: hidden;
+      margin-bottom: 10px;
+      position: relative;
+      padding: 2px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .num {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: #fff;
+        font-size: 12px;
+        background: #666;
+        padding: 2px 4px;
+        border-bottom-right-radius: 6px;
+      }
+      .explain {
+        position: absolute;
+        top: 0;
+        right: 0;
+        color: #fff;
+        font-size: 12px;
+        background: #ff3334;
+        padding: 2px 4px;
+        border-bottom-left-radius: 6px;
+      }
+    }
+  }
+}
+</style>