200 lines
11 KiB
HTML
200 lines
11 KiB
HTML
<!-- 个人中心 - 领航专升本志愿通 -->
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>个人中心 - 领航专升本志愿通</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#4a7c59", // Moss green primary
|
|
"primary-light": "#f2f5f1",
|
|
"background-light": "#fdfaf6", // Warm sand-beige
|
|
"background-dark": "#0f1723",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Work Sans", "system-ui", "sans-serif"]
|
|
},
|
|
borderRadius: {"DEFAULT": "1rem", "lg": "1.5rem", "xl": "2rem", "full": "9999px"},
|
|
boxShadow: {
|
|
'soft': '0 4px 20px -2px rgba(74, 124, 89, 0.08)',
|
|
}
|
|
},
|
|
},
|
|
}</script>
|
|
<style>
|
|
.water-ripple {
|
|
background-image: radial-gradient(circle at 20% 30%, rgba(74, 124, 89, 0.04) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(74, 124, 89, 0.02) 0%, transparent 40%);
|
|
}
|
|
</style>
|
|
<style>
|
|
.water-ripple {
|
|
background-image: radial-gradient(circle at 20% 30%, rgba(74, 124, 89, 0.04) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(74, 124, 89, 0.02) 0%, transparent 40%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen pb-24 water-ripple">
|
|
<!-- Header Section -->
|
|
<div class="relative overflow-hidden bg-white dark:bg-slate-900 px-6 pt-12 pb-8 rounded-b-xl shadow-soft">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-xl font-bold tracking-tight">个人中心</h1>
|
|
<div class="flex gap-4">
|
|
<span class="material-symbols-outlined text-slate-500 cursor-pointer">settings</span>
|
|
<span class="material-symbols-outlined text-slate-500 cursor-pointer">notifications</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<div class="size-20 rounded-full border-4 dark:border-primary/20 bg-cover bg-center overflow-hidden border-primary/10" data-alt="Professional male avatar with friendly expression" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD7TIe9GDVO1UZZG9ZjCIbRtiqctAqgq2edMmYepRSbGlgdRUNWmCo1YcjkUT6aDmcTCkp6V987VgM3NmOQ_qeIbJQMVtF-LRpKDI8FUH6V4xOgL0yAkM4ZbXtr8JtwWii-g1beh8iFGen89NHYse5Ma9FENtP-FSj3SxczUvJJPDJmb8LUUINPh8YSBqoECgT5mMB5DOvUUn0sq_Yq_RoSJSIqVud4H0NHlm-SthkF8tS_lLEE2CBN8YKESS65RP_-p2bua_3H-HHL')">
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 bg-primary text-white p-1 rounded-full border-2 border-white dark:border-slate-900">
|
|
<span class="material-symbols-outlined text-[14px] block">verified</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h2 class="text-lg font-bold">领航学子</h2>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<span class="px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-500 text-[10px] font-bold rounded-full uppercase tracking-wider">普通用户</span>
|
|
<span class="text-primary text-xs font-medium flex items-center gap-0.5">
|
|
<span class="material-symbols-outlined text-[14px]">stars</span>
|
|
未激活会员
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full text-xs font-bold transition-all shadow-md shadow-primary/10">
|
|
立即激活
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Stats/Quick Actions -->
|
|
<div class="px-4 -mt-4">
|
|
<div class="dark:bg-slate-800 rounded-lg p-4 shadow-soft flex justify-around items-center border border-primary/5 bg-white/80">
|
|
<div class="text-center">
|
|
<p class="text-xl font-bold text-primary">12</p>
|
|
<p class="text-[10px] text-slate-500 mt-1">志愿数量</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-slate-100 dark:bg-slate-700"></div>
|
|
<div class="text-center">
|
|
<p class="text-xl font-bold text-primary">342</p>
|
|
<p class="text-[10px] text-slate-500 mt-1">全省排名</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-slate-100 dark:bg-slate-700"></div>
|
|
<div class="text-center">
|
|
<p class="text-xl font-bold text-primary">85%</p>
|
|
<p class="text-[10px] text-slate-500 mt-1">录取概率</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main List Sections -->
|
|
<div class="mt-6 px-4 space-y-6">
|
|
<!-- Section 1: Core Services -->
|
|
<div class="bg-white dark:bg-slate-900 rounded-lg overflow-hidden shadow-soft">
|
|
<div class="p-4 border-b border-slate-50 dark:border-slate-800">
|
|
<h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest">核心服务</h3>
|
|
</div>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-primary-light dark:bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">assignment</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">我的志愿表</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-primary-light dark:bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">receipt_long</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">我的订单/缴费记录</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-primary-light dark:bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">leaderboard</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">成绩/排名记录</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-primary-light dark:bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">print</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">打印设置</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
</div>
|
|
<!-- Section 2: Support & Others -->
|
|
<div class="bg-white dark:bg-slate-900 rounded-lg overflow-hidden shadow-soft">
|
|
<div class="p-4 border-b border-slate-50 dark:border-slate-800">
|
|
<h3 class="text-sm font-bold text-slate-400 uppercase tracking-widest">更多功能</h3>
|
|
</div>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-orange-50 dark:bg-orange-900/10 flex items-center justify-center text-orange-600">
|
|
<span class="material-symbols-outlined">card_membership</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">激活会员卡</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-600">
|
|
<span class="material-symbols-outlined">handshake</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">商务合作</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-600">
|
|
<span class="material-symbols-outlined">menu_book</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">填报指南/教程</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-600">
|
|
<span class="material-symbols-outlined">support_agent</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">联系老师/客服</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
|
<div class="size-10 rounded-lg bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-600">
|
|
<span class="material-symbols-outlined">info</span>
|
|
</div>
|
|
<span class="flex-1 text-sm font-medium">关于小程序</span>
|
|
<span class="material-symbols-outlined text-slate-300 text-lg">chevron_right</span>
|
|
</a>
|
|
</div>
|
|
<!-- Logout & Footer -->
|
|
<div class="pt-4 pb-8 text-center">
|
|
<button class="w-full bg-white/60 dark:bg-slate-900 text-red-400 py-4 rounded-lg font-bold text-sm shadow-soft hover:bg-red-50/50 transition-colors border border-red-100/30">
|
|
退出登录
|
|
</button>
|
|
<p class="text-[10px] text-slate-400 mt-6 tracking-widest uppercase">Version 2.4.1 (Build 20241021)</p>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Navigation Bar -->
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg border-t border-slate-100 dark:border-slate-800 flex justify-around items-center px-4 pb-6 pt-2 z-50">
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 group" href="#">
|
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors">home</span>
|
|
<span class="text-[10px] font-bold">首页</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 group" href="#">
|
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors">assignment</span>
|
|
<span class="text-[10px] font-bold">志愿表</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-primary" href="#">
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">person</span>
|
|
<div class="absolute -top-1 -right-1 size-2 bg-primary rounded-full border border-white dark:border-slate-900"></div>
|
|
</div>
|
|
<span class="text-[10px] font-bold">个人中心</span>
|
|
</a>
|
|
</nav>
|
|
</body></html> |