用户进入效果

src/components/livedModel/livedAnnouncement.vue

@@ -40,7 +40,7 @@ export default {
   border-radius: 10px;
   padding: 8px;
   margin-bottom: 10px;
-  animation:toLeft 5s linear;
+  animation:toLeft 6s linear;
   opacity: 0;
   span{
     font-size: 14px;

src/components/livedModel/livedControls.vue

@@ -2,6 +2,8 @@
   <div class="livedControls">
     <!-- 公告层 -->
     <livedAnnouncement></livedAnnouncement>
+    <!-- 用户进入通知 -->
+    <div class="userComing userComingAni" v-if="userComing"><span>xxx</span><span>来了</span></div>
     <!-- 评论层 -->
     <livedIsMsg></livedIsMsg>
     <!-- 带货商品层 -->
@@ -40,12 +42,13 @@ export default {
       likeNum: 9997, //点赞数
       imgList: [],
       iconList: [
-        "https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
-        "https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
-        "https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
-        "https://img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
+        "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+        "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
+        "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+        "//img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
       ],
-      num: 0
+      num: 0,
+      userComing:false,
     };
   },
   components: {
@@ -62,6 +65,7 @@ export default {
   mounted() {
     setInterval(() => {
       this.getAdd();
+      this.userComing=!this.userComing;
     }, 5000);
   },
   methods: {
@@ -108,6 +112,38 @@ export default {
   bottom: 10px;
   left: 0;
   width: 100vw;
+  .userComing{
+    margin-bottom: 10px;
+    background: rgba(#000, 0.4);
+    color: #fff;
+    font-size: 16px;
+    height: 26px;
+    line-height: 26px;
+    border-radius: 26px;
+    padding: 0 8px;
+    display: inline-block;
+  }
+  .userComingAni{
+    animation: userComingAni 5s linear;
+  }
+  @keyframes userComingAni {
+    0%{
+      transform: translateX(150vw);
+      opacity: 0.3;
+    }
+    30%{
+      transform: translateX(12px);
+      opacity: 1;
+    }
+    80%{
+      transform: translateX(12px);
+      opacity: 1;
+    }
+    100%{
+      transform: translateX(-150vw);
+      opacity: 0;
+    }
+  }
   .control {
     height: 40px;
     align-items: center;

src/components/livedModel/livedExplainingCommodities.vue

@@ -35,31 +35,31 @@ export default {
           isEC: true,
           id: 1,
           img:
-            "https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg"
+            "//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"
+            "//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"
+            "//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"
+            "//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"
+            "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
         }
       ],
       // 讲解中浮动商品