yonge
/
yyszkt_help_douyin_miniprogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Colexiu - 闊充箰鏁板瓧鏁欏绯荤粺</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&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": {
                        "surface-bright": "#F7F9FC",
                        "background": "#F7F9FC",
                        "primary": "#0064FF",
                        "on-surface": "#1A1D23",
                        "on-surface-variant": "#5F6D7E",
                        "surface-container": "#FFFFFF",
                        "outline-variant": "#E2E8F0"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.5rem",
                        "lg": "0.75rem",
                        "xl": "1rem",
                        "2xl": "1.5rem",
                        "3xl": "2rem",
                        "full": "9999px"
                    },
                    "fontFamily": {
                        "headline": ["Noto Sans SC", "Inter", "sans-serif"],
                        "body": ["Noto Sans SC", "Inter", "sans-serif"],
                        "label": ["Noto Sans SC", "Inter", "sans-serif"]
                    }
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .soft-shadow {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
        }
        .glass-header {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .chinese-tracking {
            letter-spacing: 0.02em;
        }
        .section-title {
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: 0.02em;
        }
        .section-marker {
            height: 0.25rem;
            width: 2rem;
            background: #0064FF;
            border-radius: 9999px;
            margin-top: 0.25rem;
        }
        .section-caption {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.3;
            color: #5F6D7E;
        }
        .feature-card {
            display: flex;
            gap: 1.25rem;
            padding: 1.5rem;
            border-radius: 2rem;
            border: 1px solid #f8fafc;
            background: #fff;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
        }
        .feature-icon-wrap {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 1rem;
            background: #eff6ff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .resource-pill {
            padding: 0.5rem 1rem;
            border-radius: 0.75rem;
            border: 1px solid #f1f5f9;
            background: #f8fafc;
            font-size: 0.875rem;
            font-weight: 500;
            color: #1A1D23;
        }
        .bottom-nav-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.625rem 0;
            transition: all 0.2s ease;
        }
        .bottom-nav-item:active {
            transform: scale(0.95);
        }
        .bottom-nav-item.active {
            border-radius: 18px;
            background: #0064FF;
            color: #fff;
        }
        .bottom-nav-item.inactive {
            color: #5F6D7E;
        }
    </style>
</head>
<body class="bg-surface-bright text-on-surface font-body selection:bg-primary/20 selection:text-primary">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 glass-header border-b border-white/20 px-5 py-3 flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white font-black text-sm">C</div>
<span class="font-bold text-base tracking-tight text-on-surface">鏅鸿兘闊充箰鏁板瓧绯荤粺</span>
</div>
<div class="flex items-center gap-3">
<button class="text-on-surface/70">
<span class="material-symbols-outlined text-[22px]">menu</span>
</button>
</div>
</header>
<main class="pt-16 pb-32">
<!-- Hero Section -->
<section class="relative px-6 py-12 overflow-hidden bg-white">
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-primary/5 rounded-full blur-[80px]"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-60 h-60 bg-blue-400/5 rounded-full blur-[60px]"></div>
<div class="relative z-10">
<h1 class="text-[40px] leading-[1.2] font-black text-on-surface mb-5 chinese-tracking pt-4">
<span class="text-primary">鏂颁竴浠</span><br>鏅鸿兘闊充箰鏁板瓧绯荤粺
            </h1>
<p class="text-base text-on-surface-variant leading-relaxed mb-8 max-w-[90%]">
                浠ュ皷绔煶棰戞妧鏈噸濉戦煶涔愬伐鍏枫€備负鏁板瓧鍖栨椂浠ｆ墦閫犵殑楂樹繚鐪熴€佹櫤鑳藉寲鐨勪笓涓氱骇鏁欏骞冲彴銆?            </p>
<div class="flex flex-col gap-3">
<button class="w-full bg-slate-50 text-on-surface-variant py-4 rounded-2xl font-bold text-lg border border-slate-200 active:scale-[0.98] transition-all">
                    瑙傜湅婕旂ず瑙嗛
                </button>
</div>
</div>
<div class="mt-12 relative">
<div class="rounded-3xl overflow-hidden soft-shadow border border-white">
<img class="w-full aspect-[4/3] object-cover" data-alt="Digital Music Platform professional product interface showing AI-powered performance analysis and interactive music staff" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXiCxegq7dPQqZr80RwY5VWYaObdvBXZ0mZQheQhkDOvoYVlGSsre7G7RXDpIb6z_NJsWtL0UOIpNqdb5yz-jymVp2o58QJVuxUhkLS9lsxXC8Dx4ci2BtGCWZhOZfgjBCs00CX1Kx5De-irgXZPxorzRQiS0V9e4kx9zVsKSP410cGBGWjwWya_YWOBl91_sZpLKk8KSkdMZkcPqKiS6fI8TqNmpFMh8trxfFYhgqJ4o8elCvfxjnyWCOGy-VCcM_UbfpZRDFkRY">
</div>
</div>
</section>
<!-- Core Features -->
<section class="px-6 py-12 space-y-6">
<div class="flex items-end justify-between mb-2">
<div>
<h2 class="section-title">鏍稿績浜や簰妯″潡</h2>
<div class="section-marker"></div>
</div>
<span class="section-caption">Module 01</span>
</div>
<div class="grid gap-4">
<!-- Feature Card 1 -->
<div class="feature-card">
<div class="feature-icon-wrap">
<span class="material-symbols-outlined text-primary text-3xl">play_circle</span>
</div>
<div>
<h3 class="text-lg font-bold mb-1">澶氭ā寮忛珮淇濈湡鎾斁</h3>
<p class="text-sm text-on-surface-variant leading-relaxed">鏀寔澶氱搴旂敤鍦烘櫙锛岀‘淇濋煶璐ㄥ缁堝涓€鐨勬竻鏅颁笌绋冲畾銆</p>
</div>
</div>
<!-- Feature Card 2 -->
<div class="feature-card">
<div class="feature-icon-wrap">
<span class="material-symbols-outlined text-primary text-3xl">speed</span>
</div>
<div>
<h3 class="text-lg font-bold mb-1">鏃犳崯鍙橀€熷彉璋</h3>
<p class="text-sm text-on-surface-variant leading-relaxed">鑷富鐮斿彂绠楁硶锛屽湪澶ц寖鍥磋皟鏁翠笅渚濈劧淇濇寔鑷劧闊宠壊銆</p>
</div>
</div>
</div>
</section>
<!-- Enhanced Resources Section -->
<section class="px-6 py-12 bg-white">
<div class="flex items-end justify-between mb-8">
<div>
<h2 class="section-title">鏁欏璧勬簮涓績</h2>
<div class="section-marker"></div>
</div>
<span class="section-caption">Resources</span>
</div>
<!-- Textbook Versions -->
<div class="mb-10">
<div class="flex items-center gap-2 mb-4">
<span class="material-symbols-outlined text-primary">menu_book</span>
<h3 class="font-bold text-lg">鏀寔鐨勬暀鏉愮増鏈</h3>
</div>
<p class="text-sm text-on-surface-variant mb-4">绱ф墸鏁欏澶х翰锛屽疄鐜?<span class="text-primary font-bold">100% 鍚屾鏁欐潗鍐呭</span>銆</p>
<div class="flex flex-wrap gap-2">
<span class="resource-pill">浜洪煶鐗</span>
<span class="resource-pill">浜烘暀鐗</span>
<span class="resource-pill">绮ゆ暀鐗</span>
<span class="resource-pill">鑻忔暀鐗</span>
<span class="resource-pill">婀樻暀鐗</span>
</div>
</div>
<!-- Massive Courseware -->
<div class="mb-10 p-6 rounded-3xl bg-blue-50/50 border border-blue-100/50">
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center soft-shadow text-primary">
<span class="material-symbols-outlined text-2xl">grid_view</span>
</div>
<div>
<h3 class="font-bold text-lg">娴烽噺璧勬簮鎻掍欢</h3>
<div class="flex items-center gap-1 mt-0.5">
<span class="text-primary font-black text-xl leading-none">30,000+</span>
<span class="text-[10px] text-on-surface-variant font-bold uppercase tracking-tighter">Premium Items</span>
</div>
</div>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed mb-4">娑电洊涔愮悊鐭ヨ瘑銆佽鍞辩粌鑰炽€佸櫒涔愭暀瀛︾瓑鍏ㄦ柟浣嶇簿鍝佽祫婧愶紝鍗崇偣鍗崇敤锛屾樉钁楅檷浣庝娇鐢ㄩ棬妲涖€</p>
<div class="flex gap-2">
<div class="flex-1 py-2 px-3 rounded-xl bg-white text-center text-[11px] font-bold text-primary border border-blue-100">涔愮悊</div>
<div class="flex-1 py-2 px-3 rounded-xl bg-white text-center text-[11px] font-bold text-primary border border-blue-100">瑙嗗敱</div>
<div class="flex-1 py-2 px-3 rounded-xl bg-white text-center text-[11px] font-bold text-primary border border-blue-100">缁冭€</div>
</div>
</div>
<!-- Music Scores & Audio -->
<div class="p-6 rounded-3xl bg-slate-50 border border-slate-100">
<div class="flex items-start gap-4 mb-4">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center soft-shadow text-primary">
<span class="material-symbols-outlined text-2xl">library_music</span>
</div>
<div>
<h3 class="font-bold text-lg">娴烽噺鏇茶氨涓庨煶棰戝簱</h3>
<p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest mt-0.5">Comprehensive Library</p>
</div>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">姹囬泦鍙ゅ吀鍚嶆洸鑷虫祦琛岄噾鏇诧紝鐧句竾閲忕骇鏇茶氨涓庨煶棰戣祫婧愬疄鏃舵洿鏂般€傛敮鎸佸绉嶆牸寮忓睍鐜帮紝婊¤冻涓嶅悓搴旂敤闃舵闇€姹傘€</p>
</div>
</section>
<!-- AI & Visualization -->
<section class="px-6 py-6">
<div class="bg-primary rounded-3xl p-8 relative overflow-hidden soft-shadow">
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl"></div>
<div class="relative z-10">
<div class="flex items-center gap-2 text-white/60 mb-4">
<span class="material-symbols-outlined text-sm">auto_awesome</span>
<span class="text-[10px] font-bold tracking-widest uppercase">Intelligence</span>
</div>
<h2 class="text-2xl font-bold text-white mb-4">AI 鏅鸿兘浜や簰涓庤瘑鍒</h2>
<p class="text-white/80 text-sm leading-relaxed mb-6">
                    鍩轰簬鑷爺娣卞害 learning 妯″瀷锛屾彁渚涘疄鏃舵紨濂忔祴璇勪笌鍙嶉锛岃姣忎竴娆＄粌涔犻兘鍍忎笓涓氭寚瀵艰埇绮惧噯銆?                </p>
<div class="grid grid-cols-2 gap-3 mb-6">
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/10">
<span class="material-symbols-outlined text-white mb-2" data-icon="psychology">psychology</span>
<div class="text-white font-bold text-sm">娣卞害瀛︿範</div>
<div class="text-[10px] text-white/50 uppercase">璇嗗埆寮曟搸</div>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/10">
<span class="material-symbols-outlined text-white mb-2" data-icon="analytics">analytics</span>
<div class="text-white font-bold text-sm">瀹炴椂璇勫垎</div>
<div class="text-[10px] text-white/50 uppercase">澶氱淮鍒嗘瀽</div>
</div>
</div>
<div class="rounded-2xl overflow-hidden border border-white/20 shadow-2xl">
<img class="w-full h-40 object-cover" data-alt="AI visualization notes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKa2Dxq5IUqanp4ymV7nk4RgOvdEPJk7mpUeec0t4LlHqtbHDvotCMqDYDI-xOhI8sA58WX1BRT9h3w6ziV1fcER4X8E_xx_lg-R8EoEPOLuCB_IvqgTfeqNa1uR-bVG5Nxh1hFVuWlTue8M9LSwaowdPbXFs80gTy29VgYtXcHzY03JxwbDvIo4e9l3BIXucSwJm-Z3V09tA7cOQD7WGcCe8dPt50riIvbwMq4M4plx8TaoaYo4-B1PceOt3uaiH75zjuVVObxAs">
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="px-6 py-12">
<div class="bg-white rounded-3xl p-10 text-center border border-slate-100 soft-shadow relative overflow-hidden">
<div class="absolute top-0 left-0 w-2 h-full bg-primary/20"></div>
<h2 class="text-2xl font-black mb-4">寮€鍚偍鐨勬暟瀛楅煶涔愪箣鏃</h2>
<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">鍔犲叆鏁板崈鍚嶄笓涓氱敤鎴风殑琛屽垪锛屽叡鍚屾帰绱㈤煶涔愬伐鍏风殑鏃犻檺鍙兘銆</p>
<button class="bg-primary text-white w-full py-4 rounded-2xl font-bold shadow-lg shadow-primary/20 active:scale-[0.98] transition-all">
                绔嬪嵆鍏嶈垂璇曠敤
            </button>
</div>
</section>
</main>
<!-- BottomNavBar -->
<div class="fixed bottom-0 left-0 w-full z-50 flex justify-center pb-6">
<nav class="bg-white/90 backdrop-blur-2xl fixed bottom-5 left-1/2 -translate-x-1/2 w-[92%] max-w-sm rounded-[24px] p-1.5 shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-white/50 flex">
<a class="bottom-nav-item active" href="#">
<span class="material-symbols-outlined text-[20px] mb-0.5">dashboard</span>
<span class="text-[10px] font-bold tracking-wider">浜у搧婕旂ず</span>
</a>
<a class="bottom-nav-item inactive" href="#">
<span class="material-symbols-outlined text-[20px] mb-0.5">verified_user</span>
<span class="text-[10px] font-bold tracking-wider">鍏嶈垂璇曠敤</span>
</a>
</nav>
</div>
</body></html>