公告组件

src/components/livedModel/livedAnnouncement.vue

+<template>
+  <!-- 公告组件 -->
+  <div class="livedAnnouncement" v-if="isShow">
+    <div class="label">
+      <span class="label">公告：</span><span class="test">欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间</span>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "",
+  data() {
+    return {
+      isShow:true,
+    };
+  },
+  components: {},
+  computed: {},
+  created() {},
+  onLoad(){
+    console.log('----公告')
+    this.isShow=true;
+    setTimeout(() => {
+      this.isShow=false;
+    }, 5900);
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.livedAnnouncement{
+  margin-left:12px;
+  width: 40vw;
+  max-height: 20vh;
+  overflow-y: auto;
+  background: rgba(#000,0.4);
+  border-radius: 10px;
+  padding: 8px;
+  margin-bottom: 10px;
+  animation:toLeft 1s linear 5s;
+  opacity: 1;
+  span{
+    font-size: 14px;
+    color: #f1f1f1;
+  }
+  .label{
+    padding-right: 4px;
+  }
+}
+@keyframes toLeft {
+  50%{
+    opacity: 0.5;
+  }
+  100%{
+    opacity: 0;
+  }
+}
+</style>

src/components/livedModel/livedControls.vue

 <template>
     <div class="livedControls">
+      <!-- 公告层 -->
+      <livedAnnouncement></livedAnnouncement>
+      <!-- 底部控制层 -->
       <div class="control flex">
         <div class="goodsImg">
           <img src="../../../static/images/lived/goodsImg.png" alt="">
@@ -20,12 +23,15 @@
 </template>
 
 <script type="text/ecmascript-6">
+import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
 export default {
     name: "",
     data() {
         return {}
     },
-    components: {},
+    components: {
+      livedAnnouncement
+    },
     computed: {},
     created() {},
     mounted() {},