DDAC/app/components/home/StatsSection.vue

<template>
  <section class="stats-section" :style="{ backgroundImage: `url(${homeBg})` }">
    <NuxtPicture  class="stats-figure" :src="homeD" alt="游戏盾" ></NuxtPicture>
    <div class="stat-item">
      <div class="stat-label">今日&nbsp;CC&nbsp;攻击次数</div>
      <div class="stat-value">{{ formatNumber(stats.ccAttacks) }}</div>
    </div>
    <div class="stat-item state-other">
      <div class="stat-label">今日&nbsp;DDoS&nbsp;攻击峰值</div>
      <div class="stat-value">{{ formatNumber(stats.ddosPeak) }}</div>
    </div>
    <div class="stat-item">
      <div class="stat-label">今日&nbsp;WAF&nbsp;拦截次数</div>
      <div class="stat-value">{{ formatNumber(stats.wafBlocks) }}</div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
const homeBg = '/images/home/home-bg.png'
const homeD = '/images/home/home-d.png'

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-section {
  width: 100%;
  max-width: 1920px;
  height: 749px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center top;
  overflow: hidden;

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

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

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

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

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

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

    .stat-label {
      font-family: 'Source Han Sans CN', sans-serif;
      font-size: 24px;
      font-weight: 400;
      line-height: 24px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }

    .stat-value {
      font-family: 'Roboto', sans-serif;
      font-size: 56px;
      font-weight: 700;
      line-height: 56px;
      color: #a182ff;
      text-align: center;
    }
  }
}
</style>