<template>
  <section class="wrap__three">
    <div class="wrap__head wrap__three-head">
      <div class="wrap__title wrap__three-title">
        <span>{{ $t('system["VAVA BUY 优势对比"]') }}</span>
      </div>
    </div>
    <div class="wrap__content wrap__three-content">
      <!-- <div class="wrap__three-body">
        <div class="wrap__three-table">
          <div class="wrap__three-table-head">
            <div class="wrap__three-table-item">
              <div class="wrap__three-table-td">价格基于从美国发货的1磅费率</div>
              <div class="wrap__three-table-td"></div>
              <div class="wrap__three-table-td">普通转运</div>
            </div>
          </div>
          <div class="wrap__three-table-body">
            <div class="wrap__three-table-item" v-for="(item, i) in tableList" :key="i">
              <div class="wrap__three-table-td">{{ item.name }}</div>
              <div class="wrap__three-table-td"></div>
              <div class="wrap__three-table-td">
                <span>{{ item.price }}</span>
                <img src="@/public/images/icons/error_icon.png" alt="" />
              </div>
            </div>

            <div class="wrap__three-table-card">
              <div class="wrap__three-table-card__head">
                <img src="@/public/images/logo.png" />
              </div>
              <div class="wrap__three-table-card__body"></div>
            </div>
          </div>
        </div>
      </div> -->
      <img v-if="locale == 'en'" src="@/public/images/guojiyunfei_en.png" />
      <img v-else src="@/public/images/guojiyunfei.png" />
    </div>
  </section>
</template>



<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useSystemStore from '@/stores/useSystemStore'

const systemStore = useSystemStore()
const { locale } = storeToRefs(systemStore)

const tableList = [
  { name: '价格', price: '$16.97' },
  { name: '时效', price: '$30.99' },
  { name: '服务项目', price: '无' },
]

const tableList2 = [{ label: '$12.99' }, { label: '极速达' }, { label: '服务项目' }]
</script>



<style lang="less" scoped>
.wrap__three {
  width: 100%;
  padding: 50px 15px 25px;

  .wrap__three-head {
    display: flex;
    justify-content: center;
    width: 100%;
    // margin-bottom: 100px;
  }

  .wrap__three-title {
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    font-family: Source Han Sans;
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: bold;
    color: #000;
    text-align: center;
  }

  .wrap__three-content {
    display: flex;
    justify-content: center;
  }

  .wrap__three-content > img {
    width: 100%;
    max-width: 690px;
    max-width: 43.125rem;
  }

  .wrap__three-body {
    position: relative;
    width: 100%;
    max-width: 690px;
  }

  .wrap__three-table-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .wrap__three-table-card {
    overflow: hidden;
    position: absolute;
    width: 35%;
    height: auto;
    bottom: -14px;
    left: 38%;
    z-index: 10;
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 25px -4px rgba(61, 61, 61, 0.63);
  }

  .wrap__three-table-card__head {
    padding: 15px;
    text-align: center;

    img {
      width: 85%;
      height: auto;
      object-fit: contain;
    }
  }

  .wrap__three-table-card__body {
    padding-bottom: 14px;
  }

  .wrap__three-table-item .wrap__three-table-td {
    width: 40%;
  }
  .wrap__three-table-item .wrap__three-table-td:last-child {
    width: 20%;
  }

  .wrap__three-table-head {
    padding: 0 0 15px 0;
    font-family: Source Han Sans;
    color: #5a6670;
  }

  .wrap__three-table-body {
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 18px;

    .wrap__three-table-item {
      padding: 15px 0;
      border-bottom: 2px solid #fff;
    }

    .wrap__three-table-item:last-child {
      border-width: 0;
    }

    .wrap__three-table-item .wrap__three-table-td {
      font-family: Poppins;
      font-size: 18px;
      color: #000000;
    }

    .wrap__three-table-item .wrap__three-table-td:first-child {
      padding-left: 20px;
      font-weight: 500;
    }

    .wrap__three-table-item .wrap__three-table-td:last-child {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
    }
  }
}
</style>


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