joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成 4 个TabBar 页面初版样式修改

Browse Source
This commit is contained in:
R524809
2026-04-02 17:05:55 +08:00
parent b18dbcb0d1
commit 206c44cf6d
61 changed files with 4670 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stitch-ui/profile/code.html
+176
View File
@@ -0,0 +1,176 @@
<!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=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Be_Vietnam_Pro:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config"> tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#FFD700",
"on-primary": "#2D2A00",
"background-light": "#f8f0e0",
"background-dark": "#23200f",
"surface": "#f8f0e0",
"on-surface": "#322e25",
"on-surface-variant": "#605b50",
"outline": "#7c766a",
"surface-container": "#f0e7d6",
"surface-container-low": "#f8f0e0",
"surface-container-lowest": "#ffffff"
},
fontFamily: {
"headline": ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"],
"body": ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"],
"label": ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}</script>
<style>
body { background-color: #f8f0e0; font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', sans-serif; color: #322e25; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.glass-nav { background: rgba(248, 240, 224, 0.8); backdrop-filter: blur(20px); }
</style>
</head>
<body class="bg-surface text-on-surface min-h-screen pb-32" style="background-color: #f8f0e0; font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', sans-serif;">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 backdrop-blur-xl h-16 flex items-center justify-between px-6 shadow-sm shadow-stone-900/5 transition-all glass-nav">
<div class="flex items-center gap-4">
<button class="text-on-surface hover:scale-95 transition-transform duration-200">
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
</button>
<h1 class="font-headline font-bold text-xl tracking-tight text-on-surface">个人中心</h1>
</div>
<div class="font-headline font-extrabold text-2xl tracking-tighter text-[#FFD700]">涂鸦丫</div>
</header>
<main class="pt-24 px-6 max-w-2xl mx-auto space-y-10">
<!-- User Profile Header -->
<section class="relative flex flex-col items-center py-10 bg-surface-container-lowest rounded-[1.5rem] shadow-sm border border-outline/10 overflow-hidden">
<div class="absolute top-0 left-0 w-full h-24 bg-primary opacity-10"></div>
<div class="relative mt-4">
<div class="w-32 h-32 rounded-full border-4 border-surface-container-lowest overflow-hidden shadow-md">
<img class="w-full h-full object-cover" data-alt="close-up portrait of a smiling young woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAGKPxq5QCFibqBWRNKE2x6_7teoAJCy4pSdGtBO-U6rPl6LleUVVoMS-3ldq9k91D_1Lu7ln183WaEYvRnXoXEbS4JNiuvED2Lp48-pf4bJNFvYIutp0WfDa4wE3fqeet7zItd6VsbAB9DmvRA_iIKiPtcdHOi9JPXaDddJ_1LfSKd5BhWLcc1LCs0-KzSPknReZBpNzVOoEeOeveNhOwAV8UbpMuw7FgZMTIhsft64QSr6mAQVuOTQrvIBjXwnT9O10R3BMeCig"/>
</div>
<div class="absolute bottom-1 right-1 bg-primary text-on-primary p-2 rounded-full border-4 border-surface-container-lowest flex items-center justify-center shadow-sm">
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">edit</span>
</div>
</div>
<div class="mt-4 text-center">
<h2 class="font-headline font-bold text-2xl text-on-surface">Alex Rivera</h2>
</div>
<div class="flex gap-4 mt-8 w-full px-6">
<div class="flex-1 bg-surface-container-low p-4 rounded-xl text-center border border-outline/10">
<span class="block font-headline font-extrabold text-xl text-on-surface">24</span>
<span class="block font-label text-[10px] text-on-surface-variant uppercase tracking-wider">打印</span>
</div>
<div class="flex-1 bg-surface-container-low p-4 rounded-xl text-center border border-outline/10">
<span class="block font-headline font-extrabold text-xl text-on-surface">12</span>
<span class="block font-label text-[10px] text-on-surface-variant uppercase tracking-wider">收藏</span>
</div>
</div>
</section>
<!-- Menu Grid -->
<section class="grid grid-cols-1 gap-4">
<div class="grid grid-cols-2 gap-4">
<!-- My Favorites -->
<button class="group flex flex-col p-6 bg-surface-container-lowest rounded-[1.5rem] border border-outline/10 hover:bg-surface-container-low transition-all duration-200 active:scale-95 items-center">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-on-primary mb-4 shadow-sm">
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
</div>
<span class="font-headline font-bold text-on-surface">我的收藏</span>
<span class="font-body text-xs text-on-surface-variant mt-1 text-center">已保存的练习题</span>
</button>
<!-- Download History -->
<button class="group flex flex-col p-6 bg-surface-container-lowest rounded-[1.5rem] border border-outline/10 hover:bg-surface-container-low transition-all duration-200 active:scale-95 items-center">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-on-primary mb-4 shadow-sm">
<span class="material-symbols-outlined" data-icon="download">download</span>
</div>
<span class="font-headline font-bold text-on-surface">下载历史</span>
<span class="font-body text-xs text-on-surface-variant mt-1 text-center">查看历史文件</span>
</button>
</div>
<!-- List Style for other items -->
<div class="space-y-4">
<button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
<span class="material-symbols-outlined" data-icon="print">print</span>
</div>
<span class="font-headline font-semibold text-on-surface">打印指南</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</button>
<button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
</div>
<span class="font-headline font-semibold text-on-surface">提交反馈</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</button><button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</div>
<span class="font-headline font-semibold text-on-surface">设置</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</button><button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
<span class="material-symbols-outlined" data-icon="info">info</span>
</div>
<span class="font-headline font-semibold text-on-surface">关于涂鸦丫</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</button>
</div>
</section>
<!-- Premium Upsell -->
<section class="bg-[#2D2A26] p-8 rounded-[1.5rem] relative overflow-hidden shadow-xl">
<div class="absolute top-0 right-0 p-4 opacity-10 transform translate-x-4 -translate-y-4">
<span class="material-symbols-outlined text-8xl text-white" data-icon="auto_awesome">auto_awesome</span>
</div>
<div class="relative z-10">
<h3 class="font-headline font-extrabold text-xl text-white">升级专业版</h3>
<p class="font-body text-white/70 text-sm mt-2 max-w-[200px]">解锁 500+ 精选教育模板并获得优先体验。</p>
<button class="mt-6 bg-primary text-on-primary font-headline font-bold py-3 px-8 rounded-full hover:scale-105 active:scale-95 transition-all shadow-lg">立即升级</button>
</div>
</section>
<!-- Bottom Settings Link -->
</main>
<!-- BottomNavBar -->
<div class="text-center py-6 pb-32">
<p class="font-label text-[10px] text-on-surface-variant uppercase tracking-[0.2em]">Doodle Mini v2.4.0</p>
</div><nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 py-3 backdrop-blur-xl rounded-t-[3rem] z-50 shadow-[0_-8px_32px_rgba(50,46,37,0.06)] pb-safe glass-nav">
<a class="flex flex-col items-center justify-center text-[#322e25]/70 px-4 py-2 hover:bg-[#f0e7d6] rounded-full transition-all duration-200 active:scale-90" href="#">
<span class="material-symbols-outlined" data-icon="explore">explore</span>
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">发现</span>
</a>
<a class="flex flex-col items-center justify-center text-[#322e25]/70 px-4 py-2 hover:bg-[#f0e7d6] rounded-full transition-all duration-200 active:scale-90" href="#">
<span class="material-symbols-outlined" data-icon="category">category</span>
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">分龄</span>
</a>
<a class="flex flex-col items-center justify-center text-[#322e25]/70 px-4 py-2 hover:bg-[#f0e7d6] rounded-full transition-all duration-200 active:scale-90" href="#">
<span class="material-symbols-outlined" data-icon="favorite">favorite</span>
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">收藏</span>
</a>
<a class="flex flex-col items-center justify-center bg-[#FFD700] text-[#453900] rounded-full px-6 py-2 shadow-inner active:scale-90 transition-all duration-200 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="person" style='font-variation-settings: "FILL" 1;'>person</span>
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">我的</span>
</a>
</nav>
</body></html>