52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import MobileLayout from './MobileLayout/index.vue'
|
|
import Logo from '@/pages/Home/logo.svg?component'
|
|
import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
|
|
|
|
// --- State ---
|
|
const selectedPlanId = ref('p2')
|
|
const selectedPayment = ref('alipay')
|
|
|
|
// --- Handlers ---
|
|
const handlePlanSelect = (id: string) => {
|
|
selectedPlanId.value = id
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-black text-black">
|
|
<!-- Full Width Header -->
|
|
<div class="h-[88px]">
|
|
<header
|
|
class="fixed top-[20px] right-[18px] left-[18px] z-50 flex h-[68px] items-center justify-between rounded-[90px] bg-[#ADFF5B] pr-[30px] pl-6"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<!-- Desktop Logo -->
|
|
<Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />
|
|
<!-- Mobile Logo -->
|
|
<MobileLogo
|
|
:src="MobileLogo"
|
|
alt="Hi快VPN"
|
|
class="block h-[28px] w-[67px] text-black md:hidden"
|
|
/>
|
|
</div>
|
|
<div class="text-xl font-[600]">个人账户</div>
|
|
</header>
|
|
</div>
|
|
<!-- Main Neon Green Card -->
|
|
<div class="px-[18px]">
|
|
<MobileLayout />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Simplified layout font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
|
|
|
|
.tracking-tight {
|
|
font-family: 'Inter', 'PingFang SC', sans-serif;
|
|
}
|
|
</style>
|