DDAC/app/components/home/StatsSection.vue

<template>
  <div class="stats-container">
    <div class="stats-bg-wrapper">
      <img class="stats-bg" src="/images/home/home-bg.png" alt="首页背景" />
      <section class="stats-section">
        <NuxtPicture class="stats-figure" src="/images/home/home-d.png" alt="游戏盾"></NuxtPicture>
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-label">今日攻击次数</div>
            <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">今日拦截次数</div>
            <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
          </div>
        </div>
        <div class="stat-item state-other">
          <div class="stat-label">今日DDoS攻击峰值</div>
          <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
const statsStore = useStatsStore()
const { stats } = storeToRefs(statsStore)

let intervalId = null

onMounted(() => {
  intervalId = statsStore.startAutoIncrement()
})

onUnmounted(() => {
  if (intervalId) {
    statsStore.stopAutoIncrement(intervalId)
  }
})

const formatNumber = (num) => {
  return num.toLocaleString()
}
</script>

<style scoped lang="scss">
.stats-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.stats-bg-wrapper {
  position: relative;
  width: 100%;
  height: 800px;

  .stats-bg {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1400px;
    height: auto;
  }
}

.stats-section {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .stats-row {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  .stats-figure {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: float 3s ease-in-out infinite;

    :deep(img) {
      width: 180px;
      height: auto;
    }
  }

  @keyframes float {
    0% {
      transform: translateX(-50%) translateY(-50%);
    }

    50% {
      transform: translateX(-50%) translateY(calc(-50% - 20px));
    }

    100% {
      transform: translateX(-50%) translateY(-50%);
    }
  }

  .state-other {
    position: absolute;
    top: 60px;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 0 300px;
    z-index: 1;

    .stat-label {

      font-size: 24px;
      font-weight: 400;
      line-height: 24px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }

    .stat-value {

      font-size: 56px;
      font-weight: 700;
      line-height: 56px;
      color: #a182ff;
      text-align: center;
    }
  }
}
</style>