41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<template>
|
|
<div class="px-6 font-sans">
|
|
<h2 class="mb-1 text-center text-2xl font-bold">套餐选择</h2>
|
|
<p class="mb-4 text-center text-sm font-[100] text-gray-600">*所有套餐均不限流量不限速度</p>
|
|
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="(plan, index) in plans"
|
|
:key="plan.id"
|
|
@click="$emit('select', plan.id)"
|
|
:class="[
|
|
'relative h-[126px] cursor-pointer overflow-hidden rounded-[40px] border-4 border-black py-4 pl-[45px] transition-all',
|
|
currentPlanIndex === index ? 'bg-black text-white' : 'bg-[#A8FF53] text-black',
|
|
]"
|
|
>
|
|
<div class="text-2xl font-bold">{{ plan.days }}天</div>
|
|
<div class="text-[40px] leading-none font-semibold">${{ plan.price }}</div>
|
|
<div :class="'text-sm'">约${{ plan.daily }}/天</div>
|
|
<div
|
|
v-if="plan.discount"
|
|
:class="[
|
|
index > 1 ? 'font-semibold' : '',
|
|
currentPlanIndex === index ? 'bg-[#A8FF53]! text-black' : ' ',
|
|
]"
|
|
class="absolute top-[20px] -right-[40px] h-[16px] w-[126px] origin-center rotate-45 bg-black text-center text-[14px] leading-[16px] font-[200] text-[#ADFF5B]"
|
|
>
|
|
{{ plan.discount }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
plans: Array,
|
|
currentPlanIndex: Number,
|
|
})
|
|
defineEmits(['select'])
|
|
</script>
|