From e3bcfac7d9e94cf7d7b373212086944ebc9edde6 Mon Sep 17 00:00:00 2001
From: cool314156 <35553436@qq.com>
Date: Mon, 21 Mar 2022 03:25:00 +0000
Subject: [PATCH] update src/component/noticeBar/index.vue.

---
 src/component/noticeBar/index.vue | 111 +++++++++++++++++++++++++++++-
 1 file changed, 110 insertions(+), 1 deletion(-)

diff --git a/src/component/noticeBar/index.vue b/src/component/noticeBar/index.vue
index b3d4c258..cd2eefb8 100644
--- a/src/component/noticeBar/index.vue
+++ b/src/component/noticeBar/index.vue
@@ -18,7 +18,15 @@
         >
           {{ text }}
         </div>
-        <div class="notice-bar-warp-slot" v-else><slot /></div>
+        <!-- <div class="notice-bar-warp-slot " v-else>  -->
+		<div  v-else> 
+		<div class="content_container">
+			 <ul class="content_container_list" >
+                 <li class="content_container_list_item" v-for="(v, index) in textlist" :key="index">{{v}}</li>
+             </ul> 
+		 </div> 
+        </div>  
+        <!-- <slot />  -->
       </div>
       <lay-icon
         :type="rightIcon"
@@ -52,6 +60,11 @@ export default defineComponent({
       type: String,
       default: () => "",
     },
+   // 多条通知文本内容
+   textlist: {
+	 type: Array,
+	 default: [],
+	  },
     // 通知文本颜色
     color: {
       type: String,
@@ -225,4 +238,100 @@ export default defineComponent({
 .notice-bar .notice-bar-warp .notice-bar-warp-right-icon:hover {
   cursor: pointer;
 }
+.content_container {
+    font-weight: 600;
+    overflow: hidden;
+    height: 40px;
+    padding: 0 5px;
+}
+
+.content_container_list {
+    margin-top: 0;
+    padding-left: 0px;
+    text-align: left;
+    list-style: none;
+    -webkit-animation-name: change;
+            animation-name: change;
+    -webkit-animation-duration: 10s;
+            animation-duration: 10s;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+}
+
+.content_container_list_item {
+    line-height: 40px;
+    margin: 0;
+}
+
+@-webkit-keyframes opacity {
+    0%, 100% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes opacity {
+    0%, 100% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes change {
+    0%, 12.66%, 100% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    16.66%, 29.32% {
+        transform: translate3d(0, -25%, 0);
+    }
+
+    33.32%, 45.98% {
+        transform: translate3d(0, -50%, 0);
+    }
+
+    49.98%, 62.64% {
+        transform: translate3d(0, -75%, 0);
+    }
+
+    66.64%, 79.3% {
+        transform: translate3d(0, -50%, 0);
+    }
+
+    83.3%, 95.96% {
+        transform: translate3d(0, -25%, 0);
+    }
+}
+
+@keyframes change {
+    0%, 12.66%, 100% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    16.66%, 29.32% {
+        transform: translate3d(0, -25%, 0);
+    }
+
+    33.32%, 45.98% {
+        transform: translate3d(0, -50%, 0);
+    }
+
+    49.98%, 62.64% {
+        transform: translate3d(0, -75%, 0);
+    }
+
+    66.64%, 79.3% {
+        transform: translate3d(0, -50%, 0);
+    }
+
+    83.3%, 95.96% {
+        transform: translate3d(0, -25%, 0);
+    }
+}
 </style>