From ec2ac2ce638631e18f650dfc1f1d7d8e06d6c816 Mon Sep 17 00:00:00 2001
From: zfz5720 <zfz5720@devide>
Date: Thu, 22 Aug 2024 16:17:45 +0800
Subject: [PATCH] Auto Commit

---
 src/App.vue | 36 +++++++++++++++---------------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d48df0d..91281b9 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 {
-- 
GitLab