鍒涢噺鏅鸿兘鎶曟斁姒傝宸ヤ綔鍙?/title> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&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": "#135bec", "neon-blue": "#00f2ea", "cyber-purple": "#8b5cf6", "background-dark": "#0D0D12", }, fontFamily: { "display": ["Manrope", "PingFang SC", "Microsoft YaHei", "sans-serif"] }, borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"}, }, }, } </script> <style type="text/tailwindcss"> .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } .glow-border-blue { border: 1px solid rgba(19, 91, 236, 0.4); box-shadow: 0 0 15px rgba(19, 91, 236, 0.15); } .glow-border-neon { border: 1px solid rgba(0, 242, 234, 0.3); box-shadow: 0 0 15px rgba(0, 242, 234, 0.1); } .glow-text-primary { text-shadow: 0 0 10px rgba(19, 91, 236, 0.6); } .glow-text-neon { text-shadow: 0 0 10px rgba(0, 242, 234, 0.5); } </style> </head> <body class="bg-background-dark font-display text-slate-100 min-h-screen"> <div class="flex h-screen overflow-hidden"> <aside class="w-64 glass-panel border-r border-slate-800 flex flex-col shrink-0"> <div class="p-6 flex items-center gap-3"> <div class="bg-primary p-2 rounded-lg shadow-[0_0_15px_rgba(19,91,236,0.4)]"> <span class="material-symbols-outlined text-white">diamond</span> </div> <h1 class="text-xl font-extrabold tracking-tight text-white glow-text-neon">鍒涢噺鏅烘姇</h1> </div> <nav class="flex-1 px-4 space-y-2 mt-4"> <a class="flex items-center gap-3 px-4 py-3 rounded-xl bg-primary/20 text-white border border-primary/40 shadow-[0_0_10px_rgba(19,91,236,0.2)]" href="#"> <span class="material-symbols-outlined">dashboard</span> <span class="font-medium text-sm">鎺у埗鍙?/span> </a> <a class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors text-slate-400 hover:text-white" href="./00-main.html"> <span class="material-symbols-outlined">add_box</span> <span class="font-medium text-sm">骞垮憡鍒涚紪</span> </a> <a class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors text-slate-400 hover:text-white" href="#"> <span class="material-symbols-outlined">analytics</span> <span class="font-medium text-sm">鎶曟斁绠＄悊</span> </a> <a class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors text-slate-400 hover:text-white" href="#"> <span class="material-symbols-outlined">folder_copy</span> <span class="font-medium text-sm">绱犳潗搴?/span> </a> <a class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors text-slate-400 hover:text-white" href="#"> <span class="material-symbols-outlined">movie_edit</span> <span class="font-medium text-sm">榄斿壀</span> </a> <a class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors text-slate-400 hover:text-white" href="#"> <span class="material-symbols-outlined">bolt</span> <span class="font-medium text-sm">绛栫暐娲炲療</span> </a> </nav> <div class="p-6 mt-auto"> <div class="glass-panel p-4 rounded-2xl border-primary/20 bg-gradient-to-br from-primary/10 to-transparent"> <p class="text-[10px] font-bold uppercase tracking-wider text-primary mb-2">鏅鸿兘璇婃柇鐘舵€?/p> <div class="flex items-center gap-2"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span> </span> <span class="text-xs text-slate-300">AI 浼樺寲寮曟搸杩愯涓?/span> </div> </div> </div> </aside> <main class="flex-1 flex flex-col overflow-y-auto"> <header class="h-20 glass-panel border-b border-slate-800 px-8 flex items-center justify-between sticky top-0 z-10"> <div class="flex items-center gap-8 flex-1"> <div class="relative w-full max-w-md"> <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-500">search</span> <input class="w-full bg-slate-800/50 border-slate-700 rounded-full pl-12 pr-4 py-2 text-sm focus:ring-primary focus:border-primary text-slate-200" placeholder="鎼滅储璁″垝銆佺礌鏉愭垨鎶ヨ〃..." type="text"/> </div> <div class="hidden lg:flex items-center gap-4 border-l border-slate-800 pl-8"> <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700"> <span class="material-symbols-outlined text-xs text-[#00f2ea]">play_circle</span> <span class="text-xs font-semibold">瀛楄妭璺冲姩</span> </div> <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700"> <span class="material-symbols-outlined text-xs text-[#2fac66]">chat_bubble</span> <span class="text-xs font-semibold">鑵捐骞垮憡</span> </div> <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700 opacity-50"> <span class="material-symbols-outlined text-xs">language</span> <span class="text-xs font-semibold">鐧惧害钀ラ攢</span> </div> </div> </div> <div class="flex items-center gap-6"> <button class="relative p-2 text-slate-400 hover:text-white transition-colors"> <span class="material-symbols-outlined">notifications</span> <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-[#0D0D12]"></span> </button> <button class="p-2 text-slate-400 hover:text-white transition-colors"> <span class="material-symbols-outlined">settings</span> </button> <div class="flex items-center gap-3 pl-4 border-l border-slate-800"> <div class="text-right"> <p class="text-sm font-bold">楂樼骇绠＄悊鍛?/p> <p class="text-[10px] text-primary uppercase tracking-tighter">浼佷笟鐗堟柟妗?/p> </div> <div class="w-10 h-10 rounded-full bg-gradient-to-tr from-primary to-cyber-purple p-[2px]"> <img alt="鐢ㄦ埛澶村儚" class="w-full h-full rounded-full bg-slate-900 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAShGy_-eAertuTfBGwY60KKsdj9ZX_OAhyCb2I5zKNxOQiTdvOorCiS5OMtndYP8vzCxyZsaVJ938XE3jPGsmSYAXgZ-tPQx_fvJW8tLMqR33KyjGtu3GlJLy6je40-Dob8ecUAeiXvfwyE67HG-_hQ8yXMRlRA9IPkqgGz_z7DDeUp-96O6tfIxwk-JzhgH6DdD3OJX8eBZ_-4myPO-YXOOPOaMGT27fbJtKmoaCjtl2W0l2iAYe9FjndJ42tpjaI78ZSk_ehH9E"/> </div> </div> </div> </header> <div class="p-8 space-y-8"> <div class="flex items-end justify-between"> <div> <h2 class="text-3xl font-bold tracking-tight mb-1">绯荤粺姒傝</h2> <p class="text-slate-500">鏅鸿兘鎶曟斁璁″垝鐨勫疄鏃舵牳蹇冭〃鐜版寚鏍囥€?/p> </div> <div class="flex gap-3"> <button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-xl text-sm font-medium border border-slate-700 transition-all flex items-center gap-2"> <span class="material-symbols-outlined text-sm">calendar_month</span> 鏈€杩?24 灏忔椂 </button> <button class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-xl text-sm font-bold shadow-lg shadow-primary/20 transition-all flex items-center gap-2"> <span class="material-symbols-outlined text-sm">download</span> 瀵煎嚭鎶ュ憡 </button> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="glass-panel p-6 rounded-2xl glow-border-blue relative overflow-hidden group"> <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition-opacity"> <span class="material-symbols-outlined text-8xl">payments</span> </div> <p class="text-slate-400 text-sm font-medium mb-1">鎬绘秷鑰?/p> <h3 class="text-3xl font-extrabold mb-4">楼1,284,500</h3> <div class="flex items-center justify-between"> <span class="text-emerald-400 text-sm font-bold flex items-center gap-1"> <span class="material-symbols-outlined text-sm">trending_up</span> +12.5% </span> <div class="h-10 w-24 bg-primary/10 rounded overflow-hidden"> <div class="w-full h-full bg-gradient-to-t from-primary/20 to-transparent flex items-end px-1 gap-1"> <div class="w-1 h-3 bg-primary rounded-full"></div> <div class="w-1 h-5 bg-primary rounded-full"></div> <div class="w-1 h-4 bg-primary rounded-full"></div> <div class="w-1 h-7 bg-primary rounded-full"></div> <div class="w-1 h-6 bg-primary rounded-full"></div> <div class="w-1 h-8 bg-primary rounded-full"></div> </div> </div> </div> </div> <div class="glass-panel p-6 rounded-2xl relative overflow-hidden group border border-slate-800"> <p class="text-slate-400 text-sm font-medium mb-1">鎶曚骇姣?(ROI)</p> <h3 class="text-3xl font-extrabold mb-4 glow-text-primary text-primary">4.2x</h3> <div class="flex items-center justify-between"> <span class="text-emerald-400 text-sm font-bold flex items-center gap-1"> <span class="material-symbols-outlined text-sm">trending_up</span> +0.8% </span> <div class="h-10 w-24 bg-emerald-400/10 rounded overflow-hidden"> <div class="w-full h-full bg-gradient-to-t from-emerald-400/20 to-transparent flex items-end px-1 gap-1"> <div class="w-1 h-2 bg-emerald-400 rounded-full"></div> <div class="w-1 h-4 bg-emerald-400 rounded-full"></div> <div class="w-1 h-3 bg-emerald-400 rounded-full"></div> <div class="w-1 h-5 bg-emerald-400 rounded-full"></div> <div class="w-1 h-4 bg-emerald-400 rounded-full"></div> <div class="w-1 h-6 bg-emerald-400 rounded-full"></div> </div> </div> </div> </div> <div class="glass-panel p-6 rounded-2xl relative overflow-hidden border border-slate-800"> <p class="text-slate-400 text-sm font-medium mb-1">鎬昏浆鍖栨暟</p> <h3 class="text-3xl font-extrabold mb-4">12,840</h3> <div class="flex items-center justify-between"> <span class="text-red-400 text-sm font-bold flex items-center gap-1"> <span class="material-symbols-outlined text-sm">trending_down</span> -2.1% </span> <div class="h-10 w-24 bg-red-400/10 rounded overflow-hidden"> <div class="w-full h-full bg-gradient-to-t from-red-400/20 to-transparent flex items-end px-1 gap-1"> <div class="w-1 h-8 bg-red-400 rounded-full"></div> <div class="w-1 h-7 bg-red-400 rounded-full"></div> <div class="w-1 h-6 bg-red-400 rounded-full"></div> <div class="w-1 h-5 bg-red-400 rounded-full"></div> <div class="w-1 h-4 bg-red-400 rounded-full"></div> <div class="w-1 h-3 bg-red-400 rounded-full"></div> </div> </div> </div> </div> <div class="glass-panel p-6 rounded-2xl relative overflow-hidden border border-slate-800"> <p class="text-slate-400 text-sm font-medium mb-1">鍦ㄦ姇璁″垝</p> <h3 class="text-3xl font-extrabold mb-4">86</h3> <div class="flex items-center justify-between"> <span class="text-emerald-400 text-sm font-bold flex items-center gap-1"> <span class="material-symbols-outlined text-sm">trending_up</span> +4% </span> <div class="h-10 w-24 bg-slate-700/30 rounded overflow-hidden flex items-center justify-center"> <span class="text-[10px] uppercase font-bold text-slate-500 tracking-widest">杩愯绋冲畾</span> </div> </div> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="lg:col-span-2 space-y-6"> <div class="glass-panel p-8 rounded-2xl glow-border-blue h-full"> <div class="flex items-center justify-between mb-8"> <div class="flex items-center gap-3"> <div class="p-2 bg-primary/20 rounded-lg text-primary"> <span class="material-symbols-outlined">auto_fix_high</span> </div> <h4 class="text-xl font-bold">鏅鸿兘鎵樼鎺у埗鍙?/h4> </div> <div class="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest bg-slate-800/50 px-3 py-1 rounded-full border border-slate-700"> <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> 杩愯涓? </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> <div class="p-5 rounded-2xl border border-slate-800 bg-slate-900/50 hover:bg-slate-800/50 transition-colors flex items-center justify-between group"> <div class="flex flex-col gap-1"> <span class="text-sm font-bold text-slate-100">鏅鸿兘鎵樼</span> <span class="text-xs text-slate-500">AI 椹卞姩鐨勫叏鑷姩璁″垝浼樺寲</span> </div> <label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full bg-slate-700 border border-slate-600 has-[:checked]:bg-primary transition-all"> <div class="h-6 w-6 rounded-full bg-white ml-0.5 has-[:checked]:ml-6 transition-all shadow-md"></div> <input checked="" class="invisible absolute" type="checkbox"/> </label> </div> <div class="p-5 rounded-2xl border border-slate-800 bg-slate-900/50 hover:bg-slate-800/50 transition-colors flex items-center justify-between"> <div class="flex flex-col gap-1"> <span class="text-sm font-bold text-slate-100">楂樻秷鑰楄嚜鍔ㄦ鎹?/span> <span class="text-xs text-slate-500">鑻?CPA 瓒呰繃鐩爣 150% 鍒欒嚜鍔ㄦ殏鍋?/span> </div> <label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full bg-slate-700 border border-slate-600 has-[:checked]:bg-primary transition-all"> <div class="h-6 w-6 rounded-full bg-white ml-0.5 has-[:checked]:ml-6 transition-all shadow-md"></div> <input checked="" class="invisible absolute" type="checkbox"/> </label> </div> <div class="p-5 rounded-2xl border border-slate-800 bg-slate-900/50 hover:bg-slate-800/50 transition-colors flex items-center justify-between"> <div class="flex flex-col gap-1"> <span class="text-sm font-bold text-slate-100">鏅鸿兘棰勭畻璋冩暣</span> <span class="text-xs text-slate-500">鏍规嵁琛ㄧ幇鑷姩鎻愬崌浼樿川璁″垝棰勭畻</span> </div> <label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full bg-slate-700 border border-slate-600 has-[:checked]:bg-primary transition-all"> <div class="h-6 w-6 rounded-full bg-white ml-0.5 has-[:checked]:ml-6 transition-all shadow-md"></div> <input checked="" class="invisible absolute" type="checkbox"/> </label> </div> <div class="p-5 rounded-2xl border border-slate-800 bg-slate-900/50 hover:bg-slate-800/50 transition-colors flex items-center justify-between"> <div class="flex flex-col gap-1"> <span class="text-sm font-bold text-slate-100">鍚﹀畾璇嶅叏灞€鍚屾</span> <span class="text-xs text-slate-500">璺ㄦ笭閬撳悓姝ュ睆钄戒綆鏁堟祦閲忓叧閿瘝</span> </div> <label class="relative flex h-[31px] w-[51px] cursor-pointer items-center rounded-full bg-slate-700 border border-slate-600 has-[:checked]:bg-primary transition-all"> <div class="h-6 w-6 rounded-full bg-white ml-0.5 transition-all"></div> <input class="invisible absolute" type="checkbox"/> </label> </div> </div> <div class="bg-primary/5 rounded-2xl border border-primary/20 p-6"> <div class="flex justify-between items-center mb-4"> <h5 class="font-bold text-sm">澶氬钩鍙版秷鑰楀垎甯?/h5> <span class="text-[10px] text-slate-400 uppercase font-bold tracking-widest">瀹炴椂娴侀噺</span> </div> <div class="space-y-4"> <div class="space-y-1"> <div class="flex justify-between text-xs mb-1"> <span>瀛楄妭璺冲姩 (浠婃棩澶存潯/鎶栭煶)</span> <span class="font-bold">楼642,250 (50%)</span> </div> <div class="h-2 w-full bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-primary w-1/2 shadow-[0_0_8px_rgba(19,91,236,0.6)]"></div> </div> </div> <div class="space-y-1"> <div class="flex justify-between text-xs mb-1"> <span>鑵捐骞垮憡 (寰俊/QQ)</span> <span class="font-bold">楼385,350 (30%)</span> </div> <div class="h-2 w-full bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-cyber-purple w-[30%] shadow-[0_0_8px_rgba(139,92,246,0.6)]"></div> </div> </div> <div class="space-y-1"> <div class="flex justify-between text-xs mb-1"> <span>蹇墜骞垮憡</span> <span class="font-bold">楼256,900 (20%)</span> </div> <div class="h-2 w-full bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-cyan-400 w-1/5 shadow-[0_0_8px_rgba(34,211,238,0.6)]"></div> </div> </div> </div> </div> </div> </div> <div class="lg:col-span-1"> <div class="glass-panel p-6 rounded-2xl border border-slate-800 flex flex-col h-full"> <h4 class="text-xl font-bold mb-6 flex items-center gap-2 text-white"> <span class="material-symbols-outlined text-amber-400">history</span> 鍔ㄦ€佹棩蹇? </h4> <div class="space-y-6 flex-1 overflow-y-auto pr-2"> <div class="flex gap-4 relative"> <div class="absolute left-4 top-10 bottom-0 w-[1px] bg-slate-800"></div> <div class="w-8 h-8 rounded-full bg-red-400/10 border border-red-400/30 flex items-center justify-center shrink-0"> <span class="material-symbols-outlined text-red-400 text-sm">pause</span> </div> <div> <p class="text-sm font-bold">璁″垝 X 宸茶嚜鍔ㄦ殏鍋?/p> <p class="text-xs text-slate-500 mt-1">楂樻秷鑰楄鎶ワ細CPA 杈惧埌楼45.00 (瓒呭嚭鐩爣 50%)銆?/p> <span class="text-[10px] text-slate-600 mt-2 block">2 鍒嗛挓鍓?/span> </div> </div> <div class="flex gap-4 relative"> <div class="absolute left-4 top-10 bottom-0 w-[1px] bg-slate-800"></div> <div class="w-8 h-8 rounded-full bg-emerald-400/10 border border-emerald-400/30 flex items-center justify-center shrink-0"> <span class="material-symbols-outlined text-emerald-400 text-sm">sync</span> </div> <div> <p class="text-sm font-bold">绱犳潗 Y 宸叉櫤鑳芥洿鏂?/p> <p class="text-xs text-slate-500 mt-1">AI 鑷姩鏇挎崲浜嗕綆鐐瑰嚮鐜囩礌鏉愶紝鐢熸垚浜嗘柊鍙樹綋銆?/p> <span class="text-[10px] text-slate-600 mt-2 block">45 鍒嗛挓鍓?/span> </div> </div> <div class="flex gap-4 relative"> <div class="absolute left-4 top-10 bottom-0 w-[1px] bg-slate-800"></div> <div class="w-8 h-8 rounded-full bg-primary/10 border border-primary/30 flex items-center justify-center shrink-0"> <span class="material-symbols-outlined text-primary text-sm">trending_up</span> </div> <div> <p class="text-sm font-bold">棰勭畻鑷姩鎵╁</p> <p class="text-xs text-slate-500 mt-1">鑵捐骞垮憡璁″垝 #204 琛ㄧ幇浼樺紓锛屾棩棰勭畻鎻愬崌 20%銆?/p> <span class="text-[10px] text-slate-600 mt-2 block">2 灏忔椂鍓?/span> </div> </div> <div class="flex gap-4"> <div class="w-8 h-8 rounded-full bg-slate-700 border border-slate-600 flex items-center justify-center shrink-0"> <span class="material-symbols-outlined text-slate-400 text-sm">check</span> </div> <div> <p class="text-sm font-bold">鎶ュ憡瀵煎嚭瀹屾垚</p> <p class="text-xs text-slate-500 mt-1">涓婃湀姹囨€绘姤琛ㄥ凡鐢熸垚锛屽彲鍓嶅線涓嬭浇銆?/p> <span class="text-[10px] text-slate-600 mt-2 block">4 灏忔椂鍓?/span> </div> </div> </div> <button class="mt-8 py-3 w-full bg-slate-800 hover:bg-slate-700 text-xs font-bold uppercase tracking-widest rounded-xl transition-colors border border-slate-700"> 鏌ョ湅瀹屾暣鎿嶄綔瀹¤ </button> </div> </div> </div> <div class="glass-panel p-6 rounded-2xl border border-slate-800 flex items-center justify-between text-slate-500 text-xs"> <div class="flex gap-8"> <div class="flex items-center gap-2"> <span class="material-symbols-outlined text-sm">database</span> <span>鏁版嵁涓績锛氬崕鍗?(骞垮窞)</span> </div> <div class="flex items-center gap-2"> <span class="material-symbols-outlined text-sm">lock</span> <span>瀹夊叏鍔犲瘑锛欰ES-256 杩愯涓?/span> </div> </div> <div> 漏 2024 鍒涢噺鏅烘姇 (Chuangliang Zhitou). 绯荤粺杩愯姝ｅ父銆? </div> </div> </div> </main> </div> <script src="./status-icons.js"></script> </body></html>