!32 update src/component/noticeBar/index.vue.

Merge pull request !32 from cool314156/N/A

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>