<template>
  <div class="gift-pack">
    <h2 class="gift-pack-title">特惠礼包</h2>
    <div class="gift-pack-content">
      <template v-for="index in 3">
        <div class="content-item">
          <div class="content-item-img">
            <img src="../assets/giftpack.jpg"/>
          </div>
          <div class="content-item-title">游戏点券美元充值</div>
          <div class="content-item-remark">你看了一定想买</div>
          <div class="content-item-price">
            <del class="price-original">
              <span>￥{{ (index + 9) * 3 }}</span></del>
            <div class="price-target"><span>
              省{{ (index + 9) * 2 }}
            </span></div>
            <div class="price-now">￥{{ (index + 9) }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">

</script>

<style scoped lang="scss">
.gift-pack {
  width: 1170px;
  text-align: left;
  font-size: 12px;
  margin: 30px auto 50px auto ;
  line-height: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(217, 217, 217);
  .gift-pack-title {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .gift-pack-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }

  .content-item-title {
    font-weight: bold;
    font-size: 14px;
  }

  .content-item-remark {
    color: #999;
  }

  .content-item-price {
    display: flex;
    vertical-align: middle;
    margin: 10px 0;

    div {
      margin-right: 10px;
    }
    .price-original {
      text-decoration: line-through;
      color: #888888;
    }

    .price-target {
      vertical-align: middle;
      padding: 0 3px;
      margin: 0 0 0 4px;
      background: rgb(223, 30, 28);
      color: white;
      font-weight: bolder;
    }

    .price-now {
      font-family: BlinkMacSystemFont;
      font-size: 16px;
    }
  }

}
</style>