daimp-front/new-digital-agriculture-screen/src/views/inputs/components/inputsSix.vue

<template>
  <div height="100%">
    <custom-scroll-board :chart-config="chartConfig" />
    <div class="announcement-bar">
      <!-- 喇叭图标 -->
      <div class="horn-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 10V14C3 15.1 3.9 16 5 16H6L9 19V5L6 8H5C3.9 8 3 8.9 3 10Z" fill="#34f9b7" />
          <path d="M16.5 12C16.5 10.23 15.48 8.71 14 7.97V16.02C15.48 15.29 16.5 13.77 16.5 12Z" fill="#34f9b7" />
          <path
            d="M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72 18.01 4.14 14 3.23Z"
            fill="#34f9b7"
          />
        </svg>
      </div>

      <!-- 滚动内容容器 -->
      <div class="scroll-container" ref="scrollContainer">
        <div class="scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
          <span class="text-content">
            距今产业运营平台已为全县投入品花费节省约
            <span class="highlight">¥1256.8 万元</span>
            （截至{{ currentDate }}）
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 表格配置
const chartConfig = ref({
  attr: {
    w: 200, // 容器宽度
    h: 192, // 容器高度
  },
  option: {
    header: ['投入品种类', '平台价格', '市场价格'],
    dataset: [
      ['圆茄种苗', '0.3元/棵', '0.4元/棵'],
      ['高氮复合肥', '1850元/吨', '1980元/吨'],
      ['硫酸钾', '1250元/吨', '1380元/吨'],
      ['高氮复合肥', '1850元/吨', '1980元/吨'],
      ['西红柿种苗', '0.3元/棵', '0.4元/棵'],
    ],
    // 样式配置
    headerBGC: 'rgba(53, 208, 192, 0.4)', // 表头背景
    oddRowBGC: 'rgba(0, 59, 81, 0.1)', // 奇数行背景
    evenRowBGC: 'rgba(10, 39, 50, 0.1)', // 偶数行背景
    headerHeight: 40, // 表头高度
    columnWidth: [300, 200, 200], // 列宽分配
    align: ['left', 'center', 'center'], // 列对齐方式
    rowNum: 4, // 可视行数
    waitTime: 3, // 滚动间隔(秒)
    carousel: 'single', // 滚动方式
    hoverPause: true, // 悬停暂停
  },
});

// 动态数据
const currentDate = ref('2023年12月15日');
const scrollPosition = ref(0);
const scrollContainer = ref(null);
let animationFrameId = null;

// 滚动控制
const startScrolling = () => {
  const scrollSpeed = -60; // px/s
  let lastTime = 0;

  const scroll = (timestamp) => {
    if (!lastTime) lastTime = timestamp;
    const delta = (timestamp - lastTime) / 1000; // 秒
    lastTime = timestamp;

    scrollPosition.value += scrollSpeed * delta;

    // 循环逻辑
    const containerWidth = scrollContainer.value?.clientWidth || 0;
    const contentWidth = scrollContainer.value?.scrollWidth || 0;

    if (Math.abs(scrollPosition.value) > contentWidth + 50) {
      scrollPosition.value = containerWidth;
    }

    animationFrameId = requestAnimationFrame(scroll);
  };

  animationFrameId = requestAnimationFrame(scroll);
};

onMounted(() => {
  // 获取真实日期
  const now = new Date();
  currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;

  startScrolling();
});

onUnmounted(() => {
  cancelAnimationFrame(animationFrameId);
});
</script>

<style scoped lang="scss">
/* 自定义样式 */
.dv-scroll-board {
  font-family: 'PingFang SC', 'PingFang SC-Regular', sans-serif;
  color: #ffffff;
  font-size: 16px;

  :deep(.header-item) {
    text-align: left;
    font-weight: 700;
    padding-left: 16px;
  }

  :deep(.row-item) {
    transition: all 0.5s ease;
    font-weight: 400;
    .ceil {
      text-align: left;
      padding-left: 16px;
    }
  }
}

.announcement-bar {
  $primary-color: #0e6965;
  $secondary-color: #34f9b7;
  $text-color: #b5f5ff;
  $bg-color: rgba(0, 60, 107, 0.8);

  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: $bg-color;
  border-radius: 0.5rem;
  border-left: 0.25rem solid $secondary-color;
  box-shadow: 0 0.25rem 1rem rgba($primary-color, 0.2);
  overflow: hidden;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(90deg, rgba($bg-color, 0) 0%, $bg-color 100%);
    z-index: 1;
  }

  .horn-icon {
    flex-shrink: 0;
    margin-right: 1rem;
    color: $secondary-color;

    svg {
      width: 1.5rem;
      height: 1.5rem;
      filter: drop-shadow(0 0 0.25rem rgba($secondary-color, 0.5));
    }
  }

  .scroll-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 1.5rem;

    .scroll-content {
      position: absolute;
      white-space: nowrap;
      will-change: transform;
      padding-right: 2rem; // 防止文字紧贴边缘

      .text-content {
        color: $text-color;
        font-size: 1.125rem;
        font-weight: 500;
        text-shadow: 0 0 0.5rem rgba($primary-color, 0.3);
      }

      .highlight {
        color: $secondary-color;
        font-weight: bold;
        margin: 0 0.25rem;
      }
    }
  }
}
</style>