<template>
  <div @click="$emit('choose')" class="preset relative">
    <img src="/imgs/vip-preset-bg.png" class="absolute top-0 left-0 w-full h-auto" />
    <div class="m-auto  w-339rem relative">

      <div class="flex flex-col items-center w-full h-full">
        <div class="text-size-36rem text-primary font-light mb-24rem mt-32rem">{{item.name}}</div>
        <div class="text-size-30rem text-black mb-32rem">{{item.expire}}天</div>
        <div class="text-size-24rem text-[#686868] mb-38rem">{{item.descriptio}}</div>
        <div class="text-size-36rem text-primary font-light">仅{{item.price.toFixed(2)}}元</div>
      </div>
      <div class="flex flex-col w-full items-center mt-36rem">
        <div class="w-295rem text-size-24rem leading-tight h-120rem text-center">
          {{item.vipDescription}}
        </div>

        <div type="primary" round
             class="h-60rem w-500rem bg-primary flex justify-center items-center rounded-full text-white w-225rem h-60rem mt-24rem rounded-full  border-1rem border-solid border-primary flex items-center justify-center cursor-pointer">{{$t('立即开通')}}
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object,
      default(){
        return {}
      }
    }
  }
};
</script>

<style>
.preset {
  @apply w-339rem h-527rem;
  /* 矩形 145 */

  border-radius: 3rem;

  box-shadow: 0rem 3rem 6rem 0rem rgba(0, 0, 0, 0.1);
}
</style>
