77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface PaymentOption {
|
|
label: string
|
|
value: number
|
|
}
|
|
|
|
const list = ref<PaymentOption[]>([
|
|
{ label: '支付宝', value: 1 },
|
|
{ label: '微信', value: 2 },
|
|
{ label: '国际银行卡', value: 3 },
|
|
])
|
|
|
|
// 当前选中的值，默认选中第一个
|
|
const selectedValue = ref(1)
|
|
|
|
const handleSelect = (value: number) => {
|
|
selectedValue.value = value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="bg-[#A8FF53] px-6 pt-7 font-sans text-black">
|
|
<h2 class="mb-1 text-center text-2xl font-bold">选择付款方式</h2>
|
|
|
|
<div class="flex flex-col gap-4 pt-[43px]">
|
|
<div
|
|
v-for="item in list"
|
|
:key="item.value"
|
|
@click="handleSelect(item.value)"
|
|
:class="[
|
|
'flex h-[66px] cursor-pointer items-center justify-between border-[5px] border-black px-6 transition-all active:scale-[0.98]',
|
|
'rounded-[32px]', // 超大圆角
|
|
selectedValue === item.value ? 'bg-[#A8FF53]' : 'bg-[#A8FF53]',
|
|
]"
|
|
>
|
|
<span class="text-xl font-semibold">{{ item.label }}</span>
|
|
|
|
<div
|
|
class="flex h-7 w-7 items-center justify-center rounded-full border-[1px] border-black bg-transparent"
|
|
>
|
|
<div
|
|
v-if="selectedValue === item.value"
|
|
class="h-3.5 w-3.5 rounded-full bg-black"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 pt-[55px]">
|
|
<h2 class="mb-1 text-center text-2xl font-bold">订单信息</h2>
|
|
<div class="ml-[11px] pt-[22px] text-[16px] font-semibold">365天套餐</div>
|
|
<div class="ml-[11px] flex items-center justify-between pt-[22px] text-[16px] font-semibold">
|
|
<div>订单金额</div>
|
|
<div>USD 44.99</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 pt-[85px] pb-[23px]">
|
|
<Button
|
|
class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white hover:bg-black/90"
|
|
>
|
|
立即支付
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 如果需要特殊的斜体感，可以在这里微调 */
|
|
span {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
</style>
|