diff --git a/src/App.vue b/src/App.vue
index d48df0d11a663e7b266f3200ff958e0672445ac8..91281b95ff7e7ae8255cce7a78899c6ea3970351 100644
--- a/src/App.vue
+++ b/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 {