316 lines
17 KiB
Markdown
316 lines
17 KiB
Markdown
<!-- 关于小程序 - 领航专升本志愿通 -->
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Public+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": "#ec5b13",
|
|
"background-light": "#f8f6f6",
|
|
"background-dark": "#221610",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Public Sans"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Public Sans', sans-serif;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display">
|
|
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
|
|
<!-- Top Navigation Bar -->
|
|
<div class="flex items-center bg-background-light dark:bg-background-dark p-4 pb-2 sticky top-0 z-10 border-b border-primary/10">
|
|
<div class="text-primary flex size-10 shrink-0 items-center justify-center cursor-pointer">
|
|
<span class="material-symbols-outlined" style="font-size: 24px;">arrow_back</span>
|
|
</div>
|
|
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-tight tracking-tight flex-1 text-center pr-10">关于我们</h2>
|
|
</div>
|
|
<!-- App Branding Section -->
|
|
<div class="flex p-8">
|
|
<div class="flex w-full flex-col gap-6 items-center">
|
|
<div class="flex gap-4 flex-col items-center">
|
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-2xl min-h-24 w-24 shadow-lg border-4 border-white dark:border-slate-800" data-alt="Modern app logo with minimalist orange icon" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCiv6QxOqmrKmNG9YgnMDyQTPn1Cfdax9jmClnKY4WVInBWPAHl4GU3AA-LYmiChx7SUDRlzAV36Iiqp2Chh9WIRHWuf2ZyPQVx9befY6vh6E85GCXSNwGr-QrSCCX5rKwhUNh7hEaBKA_zmuMhAKiIRI2JbTQqcCHYviXPTbRyOa8x1GKSpCzdl_zmFKDwnSER8v_WDh2-4Xlu-jz27I5jQqU5WAkWTGRMg55_a6f0-JOl0pugk4tpDJicoKI-No218Wo_zkI3y-hM");'>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center gap-1">
|
|
<p class="text-slate-900 dark:text-slate-100 text-2xl font-bold leading-tight tracking-tight text-center">悦享生活</p>
|
|
<p class="text-primary text-sm font-medium leading-normal text-center bg-primary/10 px-3 py-0.5 rounded-full">Version 2.4.5</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Developer Information -->
|
|
<div class="px-4">
|
|
<h3 class="text-slate-900 dark:text-slate-100 text-sm font-bold uppercase tracking-wider px-2 pb-3 pt-6 opacity-60">开发者信息</h3>
|
|
<div class="flex flex-col bg-white dark:bg-slate-800/50 rounded-xl overflow-hidden shadow-sm">
|
|
<div class="flex items-center gap-4 px-4 min-h-[64px] py-3 justify-between border-b border-slate-100 dark:border-slate-700/50">
|
|
<div class="flex flex-col justify-center">
|
|
<p class="text-slate-900 dark:text-slate-100 text-base font-medium">主体名称</p>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<p class="text-slate-500 dark:text-slate-400 text-sm">某某网络科技有限公司</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 px-4 min-h-[64px] py-3 justify-between">
|
|
<div class="flex flex-col justify-center">
|
|
<p class="text-slate-900 dark:text-slate-100 text-base font-medium">联系邮箱</p>
|
|
</div>
|
|
<div class="shrink-0">
|
|
<p class="text-primary text-sm font-medium">support@example.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Legal Links -->
|
|
<div class="px-4">
|
|
<h3 class="text-slate-900 dark:text-slate-100 text-sm font-bold uppercase tracking-wider px-2 pb-3 pt-8 opacity-60">法律条款</h3>
|
|
<div class="flex flex-col bg-white dark:bg-slate-800/50 rounded-xl overflow-hidden shadow-sm">
|
|
<a class="flex items-center gap-4 px-4 min-h-[56px] py-2 justify-between border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors" href="#">
|
|
<p class="text-slate-900 dark:text-slate-100 text-base">服务协议</p>
|
|
<span class="material-symbols-outlined text-slate-400" style="font-size: 20px;">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 min-h-[56px] py-2 justify-between border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors" href="#">
|
|
<p class="text-slate-900 dark:text-slate-100 text-base">隐私政策</p>
|
|
<span class="material-symbols-outlined text-slate-400" style="font-size: 20px;">chevron_right</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 px-4 min-h-[56px] py-2 justify-between hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors" href="#">
|
|
<p class="text-slate-900 dark:text-slate-100 text-base">开源声明</p>
|
|
<span class="material-symbols-outlined text-slate-400" style="font-size: 20px;">chevron_right</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Footer / Copyright -->
|
|
<div class="mt-auto p-10 flex flex-col items-center gap-2">
|
|
<p class="text-slate-400 dark:text-slate-500 text-xs font-medium text-center uppercase tracking-widest">
|
|
Copyright © 2024 Tech Co., Ltd.
|
|
</p>
|
|
<p class="text-slate-400/60 dark:text-slate-500/60 text-[10px] text-center">
|
|
All Rights Reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body></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> |