底部控件静态

src/components/livedModel/livedComment.vue

+<template>
+    <div class="livedComment">
+      
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+    name: "",
+    data() {
+        return {}
+    },
+    components: {},
+    computed: {},
+    created() {},
+    mounted() {},
+    methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/livedModel/livedControls.vue

+<template>
+    <div class="livedControls">
+      <div class="control flex">
+        <div class="goodsImg">
+          <img src="../../../static/images/lived/goodsImg.png" alt="">
+          <p class="goodsNum">99</p>
+        </div>
+        <div class="iptCopy">
+          跟主播说点什么...
+        </div>
+        <div class="shareIcon">
+          <van-icon name="share" />
+        </div>
+        <div class="heardIcon">
+          <van-icon name="like" class="like"/>
+          <p class="heardNum">99.9w</p>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+    name: "",
+    data() {
+        return {}
+    },
+    components: {},
+    computed: {},
+    created() {},
+    mounted() {},
+    methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.flex{
+  display: flex;
+}
+.livedControls{
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  width: 100vw;
+  .control{
+    height: 40px;
+    align-items: center;
+    justify-content: space-around;
+    padding: 0 12px;
+    .goodsImg{
+      width: 30px;
+      height: 30px;
+      position: relative;
+      img{
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+      }
+      .goodsNum{
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+        margin-top: 10px;
+      }
+    }
+    .iptCopy{
+      margin: 0 10px;
+      width: 50vw;
+      background: rgba(#000,0.4);
+      color: #999;
+      font-size: 16px;
+      height: 38px;
+      border-radius: 38px;
+      line-height: 38px;
+      text-indent: 1em;
+    }
+    .shareIcon,.heardIcon{
+      color: #fff;
+      font-size: 30px;
+      position: relative;
+      width: 30px;
+      height: 30px;
+    }
+    .heardIcon{
+      .like{
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .heardNum{
+        text-align: center;
+        transform: translateY(-5px);
+        background: rgba(#E60012,0.5);
+        border-radius: 4px;
+        padding: 1px 2px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>

src/components/livedModel/notStarted.vue

@@ -40,10 +40,9 @@ export default {
 <style lang="scss" scoped>
 .notStarted {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 70vw;
+  top: 40%;
+  left: 15vw;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/pages/lived/index.vue

@@ -26,6 +26,8 @@
       </div>
       <!-- 未开始展示 -->
       <notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
+      <!-- 控件层 -->
+      <livedControls v-if="liveNoticeInfo" :info="liveNoticeInfo"></livedControls>
     </div>
     <!-- 直播 -->
     <live-player
@@ -44,6 +46,7 @@
 import { DFSImg } from "@/utils/index";
 import live from "@/api/live";
 import notStarted from "@/components/livedModel/notStarted"
+import livedControls from "@/components/livedModel/livedControls"
 export default {
   name: "",
   data() {
@@ -62,7 +65,8 @@ export default {
     };
   },
   components: {
-    notStarted
+    notStarted,
+    livedControls
   },
   computed: {},
   created() {},