feat: 走马灯效果

src/views/home.vue

@@ -12,10 +12,10 @@
       </div>
 
       <div class="notic">
-        <img class="icon" src="../assets/uliss/volume-up.png" alt="" />
-        <span class="msg one-line"
-          >公告：2022-2023学年数据上报站点于2023年9月1日正式启用，上报站点于2023年9月1日正式启用</span
-        >
+        <div  class="icon-wrapper"><img class="icon" src="../assets/uliss/volume-up.png" alt="" />公告：</div>
+        <div class="msg">
+          <span class="scroll-txt">2022-2023学年数据上报站点于2023年9月1日正式启用，上报站点于2023年9月1日正式启用</span>
+        </div>
         <span class="date">今天是2023/6/26 星期一</span>
       </div>
 
@@ -289,14 +289,25 @@ export default {
   color: #ffffff;
   align-items: center;
 
-  .icon {
+  .icon-wrapper {
     flex-shrink: 0;
+  }
+  .icon {
     width: 24px;
     height: 24px;
     margin-right: 10px;
+    vertical-align: middle;
   }
   .msg {
     flex-grow: 1;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .scroll-txt {
+    display: inline-block;
+    white-space: nowrap;
+    animation: scroll 10s linear infinite;
   }
 
   .date {
@@ -518,4 +529,13 @@ export default {
   line-height: 36px;
   margin-top: 112px;
 }
+
+@keyframes scroll {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
 </style>