<template>
  <div class="preset relative">
    <div class="m-auto mt-25px w-227.74px relative">
      <img src="/imgs/vip-preset-bg.png" class="w-full h-auto" />
      <div class="absolute top-0 left-0 flex flex-col items-center w-full h-full">
        <div class="text-size-20px text-primary font-light mb-11px mt-11px">{{item.name}}</div>
        <div class="text-size-15px text-black mb-30px">{{item.expire}}天</div>
        <div class="text-size-15px text-[#686868] mb-38px">{{item.description}}</div>
        <div class="text-size-25px text-primary font-light">仅{{item.price.toFixed(2)}}元</div>
      </div>
    </div>
    <div class="absolute flex flex-col w-full items-center bottom-25px">
      <div class="w-204px text-size-14px leading-20px text-center pb-24px">
        {{item.vipDescription}}
      </div>
      <div
              @click="$emit('choose')"
        class="w-168px h-34px rounded-full text-primary border-1px border-solid border-primary flex items-center justify-center cursor-pointer"
      >
        {{$t('立即开通')}}
      </div>
    </div>
  </div>
</template>

<script>
export default {

  props:{
     item:{
       type:Object,
       default(){
         return {}
       }
     }
  }

};
</script>

<style>
.preset {
  @apply w-253px h-367px;
  /* 矩形 145 */

  border-radius: 3px;

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