优化

src/components/livedModel/livedAnnouncement.vue

 <template>
   <!-- 公告组件 -->
   <div class="livedAnnouncement" v-show="isShow">
+    <scroll-view :style="{'max-height': '20vh','width':'40vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
       <div class="label">
         <span class="labelTit">公告：</span><span class="test">{{liveNotice}}</span>
       </div>
+    </scroll-view>
   </div>
 </template>
 
@@ -14,6 +16,7 @@ export default {
   data() {
     return {
       isShow:true,
+      scrollTop:0,
     };
   },
   components: {},
@@ -23,8 +26,11 @@ export default {
     console.log('----公告')
     this.isShow=true;
     setTimeout(() => {
+      this.scrollTop=1000;
+    }, 2000);
+    setTimeout(() => {
       this.isShow=false;
-    }, 8000);
+    }, 7000);
   },
   mounted() {},
   methods: {}
@@ -35,20 +41,17 @@ export default {
 .livedAnnouncement{
   margin-left:12px;
   width: 40vw;
-  max-height: 20vh;
-  overflow-y: auto;
   background: rgba(#000,0.4);
   border-radius: 10px;
-  padding: 8px;
+  padding: 6px;
   margin-bottom: 10px;
-  animation:toLeft 7s linear;
+  animation:toLeft 6s linear;
   opacity: 0;
   span{
     font-size: 14px;
     color: #f1f1f1;
   }
   .label{
-    padding-right: 4px;
     .labelTit{
       color: #f9a93c;
     }
@@ -59,7 +62,7 @@ export default {
     opacity: 1;
   }
   80%{
-    opacity: 0.3;
+    opacity: 0.6;
   }
   100%{
     opacity: 0;

src/components/livedModel/livedControls.vue

@@ -267,7 +267,7 @@ export default {
 }
 .livedControls {
   position: absolute;
-  bottom: 10px;
+  bottom: 20px;
   left: 0;
   width: 100vw;
   .userComing {
@@ -354,15 +354,18 @@ export default {
       .like {
         position: absolute;
         top: 0;
-        left: 20%;
+        left: 50%;
+        margin-left: -16px;
       }
       .heardNum {
         text-align: center;
-        transform: translateY(-5px);
+        transform: translateY(-18px);
         background: rgba(#e60012, 0.5);
-        border-radius: 4px;
+        border-radius: 8px;
         padding: 1px 2px;
         font-size: 12px;
+        color: #fff;
+        min-width: 30px;
       }
       .box {
         width: 100px;
@@ -420,11 +423,11 @@ export default {
       align-items: center;
       justify-content: space-between;
       background: rgba(#000, 0.4);
-      padding: 0 12px;
+      padding: 0 6px;
       width: 100%;
-      height: 38px;
-      border-radius: 38px;
-      line-height: 38px;
+      height: 40px;
+      border-radius: 40px;
+      line-height: 40px;
       font-size: 16px;
       .sendIpt {
         width: 60vw;
@@ -434,7 +437,7 @@ export default {
       .send {
         color: #fff;
         height: 30px;
-        width: 80px;
+        width: 70px;
         text-align: center;
         line-height: 30px;
         border-radius: 30px;

src/components/livedModel/livedIsMsg.vue

 <template>
   <!-- 评论模块 -->
-  <div class="livedIsMsg">
-    <div class="list" v-if="list.length>0">
+  <div class="livedIsMsg" v-if="list.length>0">
+    <div class="list">
       <scroll-view :style="{'height': '24vh','width':'52vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"  @scrolltolower="scrolltolower">
         <div class="item flex" v-for="(item,index) in list" :key="index">
           <div class="user">