vue3中使用css实现页面底部信息栏行情数据展示，当超出时左右滚动显示数据

<template>
  <div class="bottom-bar">
    <div class="scroll-wrapper">
      <div class="scroll-content">
        <!-- 在这里渲染您的行情数据 -->
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">123 -</div>
        <div class="quote">1239 -</div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style>
.bottom-bar {
  width: 100%;
  height: 50px; /* 替换为您的底部信息栏高度 */
}

.scroll-wrapper {
  width: 60%;
  overflow: hidden;
}

.scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: marqueeAnimation 8s linear infinite;
}

@keyframes marqueeAnimation {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 可根据需要自定义样式 */
.quote {
  display: inline-block;
  margin-right: 10px; /* 根据您的行情数据元素之间的间距调整 */
}
</style>

可以使用以下几个步骤来实现在Vue3中使用CSS实现页面底部信息栏行情数据展示，并在超出时左右滚动来显示数据：

1. 创建一个底部信息栏区域，可以使用<div>元素或其他合适的元素。
2. 使用CSS设置该区域的样式，例如设置高度、背景颜色等。
3. 在该区域内创建一个包含所有行情数据的<div>元素，并使用CSS设置其样式，例如设置宽度、高度、字体大小、颜色等。
4. 将该<div>元素的overflow属性设置为hidden，以便在数据超出时隐藏溢出部分。
5. 将该<div>元素的white-space属性设置为nowrap，以便在数据超出时强制其在同一行内显示。
6. 使用CSS的animation属性创建一个左右滚动的动画效果，例如设置animation-name属性为scroll，animation-duration属性为20s等。
7. 在<style>标签中定义该动画，例如使用@keyframes规则来定义动画的起点和终点。
8. 在Vue3的模板中使用数据绑定来动态地显示行情数据，例如使用v-for指令来遍历数据数组，并将每个数据项显示为一个<span>元素。

下面是一个示例代码，它展示了如何在Vue3中使用CSS实现页面底部信息栏行情数据展示，并在超出时左右滚动来显示数据：

<template>
  <div class="footer">
    <div class="scrollable">
      <span v-for="data in dataList" :key="data.id">{{ data.value }}</span>
    </div>
  </div>
</template>

<style>
.footer {
  height: 50px;
  background-color: #f0f0f0;
  overflow: hidden;
}

.scrollable {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  animation-name: scroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, value: 'Data 1' },
        { id: 2, value: 'Data 2' },
        { id: 3, value: 'Data 3' },
        { id: 4, value: 'Data 4' },
        { id: 5, value: 'Data 5' },
        { id: 6, value: 'Data 6' },
        { id: 7, value: 'Data 7' },
        { id: 8, value: 'Data 8' },
        { id: 9, value: 'Data 9' },
        { id: 10, value: 'Data 10' },
        { id: 11, value: 'Data 11' },
        { id: 12, value: 'Data 12' },
        { id: 13, value: 'Data 13' },
        { id: 14, value: 'Data 14' },
        { id: 15, value: 'Data 15' }
      ]
    };
  }
};
</script>

运行上述代码后，您将看到一个底部信息栏，其中包含了所有行情数据，当数据超出可见区域时会自动左右滚动来显示溢出部分。