<template>
  <section class="wrap__four">
    <img src="@/public/images/banner02.png" class="banner-bg" />
    <div class="mask-bg"></div>
    <div class="wrap__four-body">
      <div class="wrap__four-total trans-300">
        <span>10,117,195</span>
      </div>
      <div class="wrap__four-desc trans-300">
        <span>{{ $t('system["包裹运送到全球，而且还在不断增加..."]') }}</span>
      </div>
      <div class="wrap__four-tips">
        <span>{{ $t('system["自 Vava buy.com 成立以来"]') }}</span>
      </div>
    </div>
  </section>
</template>



<script setup lang="ts">
</script>



<style lang="less" scoped>
.wrap__four {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  height: auto;

  .banner-bg {
    width: 100%;
    max-width: 1200px;
    max-width: 75rem;
    height: auto;
    min-height: 260px;
    object-fit: cover;
  }

  .mask-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  }

  .wrap__four-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .wrap__four-total {
      margin-bottom: 30px;
      margin-bottom: 1.875rem;
      font-family: Poppins;
      font-size: 120px;
      font-size: 7.5rem;
      font-weight: 600;
      color: #ffffff;
    }

    .wrap__four-desc {
      font-family: Source Han Sans;
      font-size: 26px;
      font-size: 1.625rem;
      font-weight: bold;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #ffffff;
    }

    .wrap__four-tips {
      margin-top: 80px;
      margin-top: 5rem;
      font-family: Source Han Sans;
      font-weight: 500;
      font-size: 15px;
      font-size: 0.9375rem;
      color: rgba(255, 255, 255, 0.75);
    }
  }
}
</style>


<style lang="less" scoped>
@import url(./css/styles@1200.less);
@import url(./css/styles@1024.less);
@import url(./css/styles@768.less);
</style>