Auto Commit

src/App.vue

@@ -2,8 +2,12 @@
 import { ref, nextTick } from 'vue';
 const noticeList = ref([]);
 
-const startScroll = async () => {
-  const list = ['测试文字', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'];
+const getNoticeList = async () => {
+  const list = [
+    '测试文字',
+    '11111111111111111111111111111111111111111111111111111111',
+    '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
+  ];
   noticeList.value = list;
   nextTick(() => {
     const content = document.querySelector('.scroll-content');
@@ -17,38 +21,28 @@ const startScroll = async () => {
   });
 };
 
-startScroll();
+getNoticeList();
 </script>
 
 <template>
-  <div class="text-scroll">
-    <div class="scroll-container">
-      <div class="scroll-content">
-        <div
-          v-for="(item, index) in noticeList"
-          :key="item + index"
-          class="item"
-        >
-          {{ item }}
-        </div>
+  <div class="scroll-container">
+    <div class="scroll-content">
+      <div v-for="(item, index) in noticeList" :key="item + index" class="item">
+        {{ item }}
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.text-scroll {
+.scroll-container {
   display: flex;
   align-items: center;
   background: red;
-  width: 800px;
-}
-
-.scroll-container {
+  width: 500px;
   overflow-x: hidden; /* 启用水平滚动 */
   overflow-y: hidden; /* 隐藏垂直滚动条 */
   white-space: nowrap; /* 防止内容换行 */
-  width: 100%; /* 设置容器宽度，占满父容器 */
   position: relative;
   z-index: 99;
 }
@@ -63,8 +57,8 @@ startScroll();
 .item {
   display: inline-block; /* 让每个条目水平排列 */
   text-align: left;
-  padding-left: 100%;
-  background: gold;
+  padding-left: 500px;
+  color: #fff;
 }
 
 @keyframes scroll-left {