Thu Aug 22 16:12:00 CST 2024 inscode

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+const noticeList = ref([]);
+
+const startScroll = async () => {
+  const list = ['测试文字', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'];
+  noticeList.value = list;
+  nextTick(() => {
+    const content = document.querySelector('.scroll-content');
+    const contentOffsetWidth = content.offsetWidth;
+
+    // 根据内容长度计算动画持续时间
+    // 假设每秒滚动100px width 越大，速度越快
+    const width = 100;
+    const duration = Math.floor(contentOffsetWidth / width);
+    content.style.animationDuration = `${duration}s`;
+  });
+};
+
+startScroll();
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <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>
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  </div>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
+.text-scroll {
+  display: flex;
+  align-items: center;
+  background: red;
+  width: 800px;
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.scroll-container {
+  overflow-x: hidden; /* 启用水平滚动 */
+  overflow-y: hidden; /* 隐藏垂直滚动条 */
+  white-space: nowrap; /* 防止内容换行 */
+  width: 100%; /* 设置容器宽度，占满父容器 */
+  position: relative;
+  z-index: 99;
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+.scroll-content {
+  display: inline-block; /* 让内容作为内联块级元素，以便宽度自动调整 */
+  padding: 10px; /* 可选：添加内边距以调整内容位置 */
+  will-change: auto;
+  animation: scroll-left 10s linear infinite; /* 动画设置 */
+}
+
+.item {
+  display: inline-block; /* 让每个条目水平排列 */
+  text-align: left;
+  padding-left: 100%;
+  background: gold;
+}
 
-  .logo {
-    margin: 0 2rem 0 0;
+@keyframes scroll-left {
+  from {
+    transform: translateX(0);
   }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+  to {
+    transform: translateX(-100%); /* 根据内容总长度调整 */
   }
 }
 </style>