yonge
/
yyszkt_help_douyin_miniprogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!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=Public+Sans:wght@400;500;600;700;800&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: {
                            50: '#f0f7ff',
                            100: '#e0effe',
                            200: '#bae0fd',
                            500: '#3b82f6',
                            600: '#2563eb',
                        },
                        slate: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        }
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "2xl": "1rem",
                        "3xl": "1.5rem",
                        "full": "9999px"
                    },
                    fontFamily: {
                        "headline": ["Public Sans", "PingFang SC", "sans-serif"],
                        "body": ["Public Sans", "PingFang SC", "sans-serif"],
                        "label": ["Public Sans", "PingFang SC", "sans-serif"]
                    }
                },
            },
        }
    </script>
<style>
        body {
            font-family: 'Public Sans', 'PingFang SC', sans-serif;
            -webkit-tap-highlight-color: transparent;
            min-height: max(884px, 100dvh);
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        .field-label {
            margin-left: 0.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: #64748b;
        }
        .segmented-wrap {
            display: flex;
            gap: 0.25rem;
            padding: 0.375rem;
            border-radius: 1rem;
            background: rgba(241, 245, 249, 0.5);
        }
        .segmented-btn {
            flex: 1;
            border-radius: 0.75rem;
            padding: 0.75rem 0;
            font-size: 0.875rem;
            font-weight: 600;
            color: #64748b;
            transition: all 0.2s ease;
        }
        .segmented-btn:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        .segmented-btn.active {
            background: #fff;
            color: #2563eb;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }
        .field-input {
            width: 100%;
            border: none;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.7);
            padding: 1rem 1.25rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
        }
        .field-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px #3b82f6;
        }
        .field-input::placeholder {
            color: #94a3b8;
        }
        .bottom-nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            transition: color 0.2s ease;
        }
        .bottom-nav-link.inactive {
            color: #94a3b8;
        }
        .bottom-nav-link.inactive:hover {
            color: #3b82f6;
        }
        .bottom-nav-link.active {
            color: #2563eb;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-primary-50 to-white min-h-screen text-slate-900">
<!-- TopAppBar -->
<nav class="fixed top-0 w-full backdrop-blur-md z-50 bg-white/80 dark:bg-slate-900/80 border-b border-slate-100 dark:border-slate-800 shadow-sm flex items-center justify-between px-4 h-14 w-full">
<div class="flex items-center gap-3">
<button class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors active:opacity-70">
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">arrow_back</span>
</button>
<h1 class="font-sans text-lg font-semibold tracking-tight text-slate-900 dark:text-white">鐢宠璇曠敤</h1>
</div>
<div class="w-8"></div> <!-- Spacer for balance -->
</nav>
<!-- Main Content -->
<main class="pt-20 pb-32 px-6 max-w-lg mx-auto">
<div class="space-y-8">
<!-- Header Image/Decoration -->
<div class="relative h-48 w-full rounded-3xl overflow-hidden shadow-sm">
<img alt="High-quality, minimalist header image for a digital music classroom application. The image features a modern tablet on a clean desk, displaying an interactive musical score with colorful notes and AI feedback indicators. Subtle musical elements like headphones or a small midi keyboard are in the background. The style is clean, bright, and professional with a soft blue and white color palette. 4k resolution, high fidelity, education-focused." class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDDTfU-IdAeo4NQslf_w5CxTbh5PjxL6jQM4Pjn27NpYeTR-rrTVBqZYGx_w00qNU0IS4NXIbHBUoIqdd7xwg8B2pp-I5RL6TrhC41RUi8VoKPeSwprG24DwrXX95kh9T25k0sTn71MpqH5pkcPxa-YAAfnekimwa2YQrxcjXsFY2E_u8wpyLI2HVbtYVTyxXnujLhMFLu--3C8Ul4jduk1orjhU0Xv8rpT2hDhWyuQoYM_nXszttb7OZC4Q-l_ZQCeK0ONNhNw5kU"/>
<div class="absolute inset-0 bg-gradient-to-tr from-primary-600/10 to-transparent"></div>
</div>
<!-- Form Section -->
<div class="space-y-6">
<!-- Role Selection -->
<div class="space-y-3">
<label class="field-label">韬唤鑱屼笟</label>
<div class="segmented-wrap">
<button class="segmented-btn active">瀛︾敓</button>
<button class="segmented-btn">鏁欏笀</button>
</div>
</div>
<!-- Name Input -->
<div class="space-y-3">
<label class="field-label">鎮ㄧ殑濮撳悕</label>
<input class="field-input" placeholder="璇疯緭鍏ュ鍚" type="text"/>
</div>
<!-- Gender Selection -->
<div class="space-y-3">
<label class="field-label">鎬у埆</label>
<div class="segmented-wrap">
<button class="segmented-btn active">鐢</button>
<button class="segmented-btn">濂</button>
</div>
</div>
<!-- Phone & Verification -->
<div class="space-y-3">
<label class="field-label">鑱旂郴鐢佃瘽</label>
<div class="relative">
<input class="field-input" placeholder="璇疯緭鍏ユ墜鏈哄彿" type="tel"/>
<button class="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-2 bg-blue-50 text-blue-600 text-sm font-medium rounded-xl hover:bg-blue-100 active:opacity-70 transition-all">鑾峰彇楠岃瘉鐮</button>
</div>
</div>
<!-- Submit Button -->
<button class="w-full py-4 mt-4 bg-blue-600 text-white font-bold text-lg rounded-3xl shadow-lg shadow-blue-200 active:scale-[0.98] transition-all">
                    鎻愪氦鐢宠
                </button>
</div>
<!-- Guidelines/Notes -->
<div class="bg-primary-50/50 border border-primary-100 rounded-3xl p-6 space-y-4">
<div class="flex items-center gap-2 text-blue-600">
<span class="material-symbols-outlined text-lg">info</span>
<span class="font-bold text-sm">娓╅Θ鎻愮ず</span>
</div>
<ul class="space-y-3 text-xs text-slate-500 leading-relaxed font-medium">
<li class="flex gap-3">
<span class="text-blue-400">1.</span>
<span>瀛︾敓鐢ㄦ埛锛氭湰浜у搧閰嶅鏈夌嫭绔婣PP锛屽彲浠ュ幓搴旂敤鍟嗗簵鎼滅储骞朵笅杞姐€</span>
</li>
<li class="flex gap-3">
<span class="text-blue-400">2.</span>
<span>鏁欏笀鐢ㄦ埛锛氭湰浜у搧閰嶅鏈夌綉椤电绠＄悊绯荤粺锛岀浉鍏充俊鎭彲閫氳繃瀹樻柟娓犻亾浜嗚В銆</span>
</li>
<li class="flex gap-3">
<span class="text-blue-400">3.</span>
<span>鍚屼竴鎵嬫満鍙蜂粎鍙敵璇疯瘯鐢ㄤ竴娆★紝鐢宠鍚庤处鍙疯嚜鍔ㄥ紑閫氾紝璇曠敤鏈熶负2澶┿€</span>
</li>
<li class="flex gap-3">
<span class="text-blue-400">4.</span>
<span>鏈変换浣曢棶棰樺彲浠ュ姞鍏ユ姈闊充富椤电矇涓濈兢杩涜鍜ㄨ銆</span>
</li>
</ul>
</div>
</div>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 w-full glass-card border-t border-slate-100 flex items-center justify-around px-8 pb-8 pt-3 z-50">
<a class="bottom-nav-link inactive" href="#">
<span class="material-symbols-outlined text-2xl">home</span>
<span class="text-[10px] font-bold">浜у搧浠嬬粛</span>
</a>
<a class="bottom-nav-link active" href="#">
<div class="relative">
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">assignment_turned_in</span>
<span class="absolute -top-1 -right-1 w-2 h-2 bg-blue-600 rounded-full"></span>
</div>
<span class="text-[10px] font-bold">鐢宠璇曠敤</span>
</a>
</nav>
</body></html>