<template>
  <section class="wrap__one">
    <div class="wrap__one-box">
      <div class="wrap__one-left">
        <!-- title -->
        <div class="wrap__one-title">
          <span>{{ $t('system["全球数百万会员享受简单且经济的全球运输"]') }}</span>
        </div>
        <!-- list -->
        <div class="tag-list">
          <div v-for="(info, i) in tagList" :key="i" class="tag-item">
            <div class="tag-item__line"></div>
            <div class="tag-item__content">
              <div class="tag-item__name">{{ $t(`system["${info.name}"]`) }}</div>
              <div class="tag-item__desc">{{ $t(`system["${info.desc}"]`) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap__one-rigt">
        <img src="@/public/images/group@01.png" alt="" />
      </div>
    </div>
  </section>
</template>



<script setup lang="ts">
import { reactive } from 'vue'

interface ITag {
  name: string
  desc: string
}

const tagList = reactive<Array<ITag>>([
  { name: '3000 万+', desc: '运送的包裹' },
  { name: '600 万+', desc: '全球会员' },
  { name: '220 +', desc: '服务的国家和地区' },
  { name: '25 +', desc: '服务年限' },
])
</script>



<style lang="less" scoped>
.wrap__one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0 0 50px;
  padding: 0 0 3.125rem;

  .wrap__one-box {
    display: flex;
    justify-content: space-between;
    min-width: 1200px;
    min-width: 75rem;
    width: var(--layout-width-1200);
    padding: 0 15px;
    padding: 0 0.9375rem;
  }

  .wrap__one-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;

    .wrap__one-title {
      margin-bottom: 40px;
      margin-bottom: 2.5rem;
      font-size: 30px;
      font-size: 1.875rem;
      font-weight: bold;
      color: #111827;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      max-width: 440px;
      max-width: 27.5rem;

      .tag-item {
        display: flex;
        align-items: center;
        height: 60px;
        height: 3.75rem;
        width: 200px;
        width: 12.5rem;
        margin: 0 30px 40px 0;
        margin: 0 1.875rem 2.5rem 0;
      }

      .tag-item:nth-child(2n) {
        margin-right: 0;
      }

      .tag-item__line {
        width: 6px;
        width: 0.375rem;
        height: 54px;
        height: 3.375rem;
        border-radius: 2px;
        background: #000000;
      }

      .tag-item__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-width: 110px;
        // min-width: 7.5rem;
        margin-left: 12px;
        margin-left: 0.75rem;
      }

      .tag-item__name {
        font-family: Poppins;
        font-size: 20px;
        font-size: 1.25rem;
        font-weight: 600;
        color: #111827;
      }

      .tag-item__desc {
        font-family: Source Han Sans;
        font-weight: 350;
        color: #4b5563;
      }
    }
  }

  .wrap__one-rigt {
    width: 40%;

    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>


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