|
|
@@ -0,0 +1,267 @@
|
|
|
+<!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=Inter:wght@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"/>
|
|
|
+<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": {
|
|
|
+ "on-primary": "#ffffff",
|
|
|
+ "surface-container-highest": "#e2e2e7",
|
|
|
+ "background": "#f9f9fe",
|
|
|
+ "on-surface": "#1a1c1f",
|
|
|
+ "on-secondary-container": "#394c84",
|
|
|
+ "on-surface-variant": "#434655",
|
|
|
+ "primary-container": "#2563eb",
|
|
|
+ "surface-container": "#ededf2",
|
|
|
+ "primary": "#004ac6",
|
|
|
+ "on-error": "#ffffff",
|
|
|
+ "on-secondary-fixed-variant": "#31447b",
|
|
|
+ "primary-fixed": "#dbe1ff",
|
|
|
+ "tertiary-fixed-dim": "#ffb596",
|
|
|
+ "secondary-fixed": "#dbe1ff",
|
|
|
+ "on-error-container": "#93000a",
|
|
|
+ "tertiary-container": "#bc4800",
|
|
|
+ "on-tertiary-container": "#ffede6",
|
|
|
+ "tertiary-fixed": "#ffdbcd",
|
|
|
+ "inverse-surface": "#2e3034",
|
|
|
+ "outline-variant": "#c3c6d7",
|
|
|
+ "secondary": "#495c95",
|
|
|
+ "on-tertiary-fixed-variant": "#7d2d00",
|
|
|
+ "on-tertiary-fixed": "#360f00",
|
|
|
+ "outline": "#737686",
|
|
|
+ "surface-tint": "#0053db",
|
|
|
+ "surface-container-lowest": "#ffffff",
|
|
|
+ "error-container": "#ffdad6",
|
|
|
+ "inverse-primary": "#b4c5ff",
|
|
|
+ "on-secondary-fixed": "#00174b",
|
|
|
+ "secondary-container": "#acbfff",
|
|
|
+ "surface-dim": "#d9dade",
|
|
|
+ "surface-bright": "#f9f9fe",
|
|
|
+ "surface-container-low": "#f3f3f8",
|
|
|
+ "tertiary": "#943700",
|
|
|
+ "primary-fixed-dim": "#b4c5ff",
|
|
|
+ "on-background": "#1a1c1f",
|
|
|
+ "surface": "#f9f9fe",
|
|
|
+ "surface-variant": "#e2e2e7",
|
|
|
+ "surface-container-high": "#e8e8ed",
|
|
|
+ "inverse-on-surface": "#f0f0f5",
|
|
|
+ "secondary-fixed-dim": "#b4c5ff",
|
|
|
+ "on-secondary": "#ffffff",
|
|
|
+ "on-primary-container": "#eeefff",
|
|
|
+ "error": "#ba1a1a",
|
|
|
+ "on-primary-fixed-variant": "#003ea8",
|
|
|
+ "on-primary-fixed": "#00174b",
|
|
|
+ "on-tertiary": "#ffffff"
|
|
|
+ },
|
|
|
+ "borderRadius": {
|
|
|
+ "DEFAULT": "0.25rem",
|
|
|
+ "lg": "1rem",
|
|
|
+ "xl": "1.5rem",
|
|
|
+ "full": "9999px"
|
|
|
+ },
|
|
|
+ "fontFamily": {
|
|
|
+ "headline": ["Inter", "PingFang SC", "sans-serif"],
|
|
|
+ "body": ["Inter", "PingFang SC", "sans-serif"],
|
|
|
+ "label": ["Inter", "PingFang SC", "sans-serif"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+<style>
|
|
|
+ body { font-family: 'Inter', 'PingFang SC', sans-serif; -webkit-font-smoothing: antialiased; }
|
|
|
+ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
|
+ .glass-effect { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
|
|
|
+ .no-scrollbar::-webkit-scrollbar { display: none; }
|
|
|
+ </style>
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ min-height: max(884px, 100dvh);
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+<body class="bg-surface text-on-surface min-h-screen pb-32">
|
|
|
+<!-- Top Navigation Bar -->
|
|
|
+<header class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-2xl shadow-[0_1px_0_0_rgba(0,0,0,0.05)] flex items-center justify-between px-6 h-16">
|
|
|
+<div class="flex items-center gap-3">
|
|
|
+<div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center overflow-hidden">
|
|
|
+<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a financial manager with a friendly expression, clean minimalist background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaF6Bqe7nlS2tVYmF-LfBIYU57o4Kj4AtfsyncQeQGuLC-ORpT3gePVUf0KTniVG_rFcGCAex_6Hrq0SzCBjcJ_cJyS3PukPTxM2pOEP2KPjBF4R81A3EiHXtOTfCEwPmt6n_RkfBaE3SKySeg4bimGw0Auf3cfPlDA6eQHAsD2bDz5UGqo6vBhT1YrRPuQccm8-YAo7XA0kwa9SOy9CKxODzISqqsmKGRr_npa_Y4c735IDU3fg_2uJGXLheY_KgcqS9di0ub9N1n"/>
|
|
|
+</div>
|
|
|
+<span class="text-lg font-bold text-slate-900 dark:text-slate-100 tracking-tight font-headline">贷款助手</span>
|
|
|
+</div>
|
|
|
+<button class="text-slate-400 hover:opacity-70 transition-opacity active:scale-95 duration-200">
|
|
|
+<span class="material-symbols-outlined text-2xl" data-icon="notifications">notifications</span>
|
|
|
+</button>
|
|
|
+</header>
|
|
|
+<main class="pt-24 px-6 max-w-7xl mx-auto">
|
|
|
+<!-- Greeting Section -->
|
|
|
+<section class="mb-8">
|
|
|
+<p class="text-on-surface-variant text-sm font-label tracking-wider uppercase mb-1">2024年5月22日 星期三</p>
|
|
|
+<h1 class="text-3xl font-extrabold tracking-tight text-on-surface">早上好，王经理</h1>
|
|
|
+</section>
|
|
|
+<!-- Task Statistics - Bento Style -->
|
|
|
+<section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
|
+<div class="col-span-2 md:col-span-2 bg-primary-container bg-gradient-to-br from-primary-container to-primary p-6 rounded-xl text-on-primary shadow-lg shadow-primary/10">
|
|
|
+<div class="flex justify-between items-start mb-4">
|
|
|
+<span class="material-symbols-outlined bg-white/20 p-2 rounded-lg" data-icon="pending_actions">pending_actions</span>
|
|
|
+<span class="text-xs font-label bg-white/20 px-2 py-1 rounded-full">+12%</span>
|
|
|
+</div>
|
|
|
+<p class="text-on-primary/80 text-sm mb-1">待处理申请</p>
|
|
|
+<p class="text-4xl font-extrabold">24</p>
|
|
|
+</div>
|
|
|
+<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
|
+<p class="text-on-surface-variant text-sm mb-1">进行中</p>
|
|
|
+<p class="text-2xl font-bold text-on-surface">156</p>
|
|
|
+<div class="mt-4 h-1 w-full bg-surface-container rounded-full overflow-hidden">
|
|
|
+<div class="h-full bg-secondary w-[65%]"></div>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+<div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
|
|
+<p class="text-on-surface-variant text-sm mb-1">成功撮合</p>
|
|
|
+<p class="text-2xl font-bold text-on-surface">1,280</p>
|
|
|
+<div class="mt-4 h-1 w-full bg-surface-container rounded-full overflow-hidden">
|
|
|
+<div class="h-full bg-tertiary w-[88%]"></div>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+</section>
|
|
|
+<!-- Quick Actions Grid -->
|
|
|
+<section class="mb-10">
|
|
|
+<h2 class="text-xl font-bold mb-5 tracking-tight">快捷操作</h2>
|
|
|
+<div class="grid grid-cols-4 md:grid-cols-4 gap-4">
|
|
|
+<button class="flex flex-col items-center gap-2 group active:scale-95 transition-transform">
|
|
|
+<div class="w-14 h-14 rounded-2xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
|
|
+<span class="material-symbols-outlined text-2xl" data-icon="person_add">person_add</span>
|
|
|
+</div>
|
|
|
+<span class="text-xs font-medium text-on-surface-variant">新增客户</span>
|
|
|
+</button>
|
|
|
+<button class="flex flex-col items-center gap-2 group active:scale-95 transition-transform">
|
|
|
+<div class="w-14 h-14 rounded-2xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
|
|
+<span class="material-symbols-outlined text-2xl" data-icon="upload_file">upload_file</span>
|
|
|
+</div>
|
|
|
+<span class="text-xs font-medium text-on-surface-variant">上传征信</span>
|
|
|
+</button>
|
|
|
+<button class="flex flex-col items-center gap-2 group active:scale-95 transition-transform">
|
|
|
+<div class="w-14 h-14 rounded-2xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
|
|
+<span class="material-symbols-outlined text-2xl" data-icon="calculate">calculate</span>
|
|
|
+</div>
|
|
|
+<span class="text-xs font-medium text-on-surface-variant">额度测算</span>
|
|
|
+</button>
|
|
|
+<button class="flex flex-col items-center gap-2 group active:scale-95 transition-transform">
|
|
|
+<div class="w-14 h-14 rounded-2xl bg-surface-container-high flex items-center justify-center text-primary group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
|
|
+<span class="material-symbols-outlined text-2xl" data-icon="assignment">assignment</span>
|
|
|
+</div>
|
|
|
+<span class="text-xs font-medium text-on-surface-variant">面谈记录</span>
|
|
|
+</button>
|
|
|
+</div>
|
|
|
+</section>
|
|
|
+<!-- Recent Activity List - No Borders -->
|
|
|
+<section class="mb-8">
|
|
|
+<div class="flex items-center justify-between mb-5">
|
|
|
+<h2 class="text-xl font-bold tracking-tight">最近动态</h2>
|
|
|
+<button class="text-primary text-sm font-medium">查看全部</button>
|
|
|
+</div>
|
|
|
+<div class="space-y-3">
|
|
|
+<!-- Activity Item -->
|
|
|
+<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-colors cursor-pointer group shadow-sm">
|
|
|
+<div class="w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
|
|
+<img alt="Client" class="w-full h-full object-cover" data-alt="close up of a professional business man smiling subtly, warm office lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBN6INUD6GZJZO9E4yt06uqTqpwyXWMrIUgV2pCwYF5WwBCDW7Ph8edn7Q6snR9_j1BWelvMgSI8WRbnRPuoFeS8TsHEZZVMGJOa1jmvAbqP8vS4I-CUoryleYtkOdBPbb-Uklm1CxuZQ9g3DMsNW0fCJlebsAsTEb4TH5XMuRBRtd4y94PMCl-qTV49UVIULxRGwzlWkd3SLFgZlJQON0B_mS1vUU2gdrQ5Nqog1tIo1HTu7Wr0RQJ2uI4aijEQC1_68bAV7FsUqKV"/>
|
|
|
+</div>
|
|
|
+<div class="flex-1 min-w-0">
|
|
|
+<div class="flex justify-between items-start mb-1">
|
|
|
+<h3 class="font-bold text-on-surface truncate">张德发 - 经营贷</h3>
|
|
|
+<span class="text-[10px] text-on-surface-variant font-label tracking-tighter">10分钟前</span>
|
|
|
+</div>
|
|
|
+<p class="text-xs text-on-surface-variant truncate">申请材料已上传，等待风控初审</p>
|
|
|
+</div>
|
|
|
+<div class="flex-shrink-0">
|
|
|
+<span class="px-2 py-1 rounded-full bg-secondary-container text-on-secondary-container text-[10px] font-bold">审核中</span>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+<!-- Activity Item -->
|
|
|
+<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-colors cursor-pointer group shadow-sm">
|
|
|
+<div class="w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
|
|
+<img alt="Client" class="w-full h-full object-cover" data-alt="portrait of a focused young woman professional, neutral corporate background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD3ARxomxkqEDtguZ0F44aNpo0tJN0xSb2LHoB0N2c_-hVTp9q8-5YinODomTSITdqrMbB9JDmQ98wzFxC_ssuvCqXkS57vmavdr8l-KvAqUwpVs8eYXG0uZQESpqSwhWzcVRG1NH7HUqqeIQv04i3LGpexi1FCUL0DDXa-h2m5rB1squXJNtca6Fw5pIWKs9a6z_03-JvtrEeF_Y3lL__3GcXZobhny9FL3cIjvVAWzkAO7jUhsLsaTu2i72FR_FOORgaZUezLv4yU"/>
|
|
|
+</div>
|
|
|
+<div class="flex-1 min-w-0">
|
|
|
+<div class="flex justify-between items-start mb-1">
|
|
|
+<h3 class="font-bold text-on-surface truncate">李美华 - 消费贷</h3>
|
|
|
+<span class="text-[10px] text-on-surface-variant font-label tracking-tighter">2小时前</span>
|
|
|
+</div>
|
|
|
+<p class="text-xs text-on-surface-variant truncate">系统匹配到 3 个符合条件的银行产品</p>
|
|
|
+</div>
|
|
|
+<div class="flex-shrink-0">
|
|
|
+<span class="px-2 py-1 rounded-full bg-tertiary-fixed text-on-tertiary-fixed text-[10px] font-bold">已匹配</span>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+<!-- Activity Item -->
|
|
|
+<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-colors cursor-pointer group shadow-sm">
|
|
|
+<div class="w-12 h-12 rounded-full overflow-hidden bg-surface-container flex-shrink-0">
|
|
|
+<img alt="Client" class="w-full h-full object-cover" data-alt="middle aged business owner in a casual work setting, natural sunlight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiaR11ypA0jGtLcMe_CH3TZ7X-Yded6O2rbm1v8fkG8hdEdIQbT01t-mqrgPJPQJfaLRg8mTky8H199bePT72WmFDaNxnR7EGb6VWloG6FbTNqcJ4C8_OwzmZM4xgvD57S-SBSufnVUHZWXtMD0P5J4Zu1HTvWqQ3DwWxCHiKFGU0dIOpDJCx1H2SJK8yMVOm3PpNovp3yCbu1ozfejIFQs3E7TRRCPQWiVBu6tCE60TX6gTXutYQbCrdUKE6qJrknsIuDJjFonxsz"/>
|
|
|
+</div>
|
|
|
+<div class="flex-1 min-w-0">
|
|
|
+<div class="flex justify-between items-start mb-1">
|
|
|
+<h3 class="font-bold text-on-surface truncate">王大锤 - 房抵贷</h3>
|
|
|
+<span class="text-[10px] text-on-surface-variant font-label tracking-tighter">1天前</span>
|
|
|
+</div>
|
|
|
+<p class="text-xs text-on-surface-variant truncate">银行面谈已完成，正在落实抵押登记</p>
|
|
|
+</div>
|
|
|
+<div class="flex-shrink-0">
|
|
|
+<span class="px-2 py-1 rounded-full bg-primary-fixed text-on-primary-fixed text-[10px] font-bold">待抵押</span>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+</section>
|
|
|
+<!-- Insights / Banner -->
|
|
|
+<section class="mb-12">
|
|
|
+<div class="relative overflow-hidden rounded-xl h-40 bg-slate-900 flex items-center p-8">
|
|
|
+<div class="z-10 relative">
|
|
|
+<h4 class="text-white text-xl font-bold mb-2">行业洞察</h4>
|
|
|
+<p class="text-slate-300 text-sm max-w-[200px]">本周 LPR 利率下调，建议优先推荐...</p>
|
|
|
+<button class="mt-4 bg-white text-slate-900 px-4 py-2 rounded-lg text-xs font-bold">立即了解</button>
|
|
|
+</div>
|
|
|
+<div class="absolute right-0 top-0 w-1/2 h-full opacity-60">
|
|
|
+<img class="w-full h-full object-cover" data-alt="abstract financial data visualization with glowing blue lines and charts on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCM9E5OgTecmLIXhMBBU1EwgHmlR_fdkeQo6g8xyIvEBNaxWcvpFgwBDX6Wht2qNj6JQa3ggfpd2wK_QgX7TUP6JVoHx3T2PUsSi6C7CnPuiKcRudm7qGvqQTUwnHMAJWIUzGwrIfH-6b9ilybdzZhO55JrR07fv4N_5eizbgyAZ2CurDcTNK3dbJ0RvM6ryV5Pno4_QPD-nQIgyynZYKw9gezixTGLl7LvXg4cMao_ZwFf7hLXhfsJP4QnTzut_Ffyu__mxYYZljl_"/>
|
|
|
+</div>
|
|
|
+<div class="absolute inset-0 bg-gradient-to-r from-slate-900 via-slate-900/40 to-transparent"></div>
|
|
|
+</div>
|
|
|
+</section>
|
|
|
+</main>
|
|
|
+<!-- Bottom Navigation Bar -->
|
|
|
+<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pt-3 pb-8 bg-white/85 dark:bg-slate-900/85 backdrop-blur-3xl shadow-[0_-10px_40px_rgba(26,28,31,0.04)] z-50 rounded-t-3xl">
|
|
|
+<a class="flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 active:scale-90 transition-transform duration-150" href="#">
|
|
|
+<span class="material-symbols-outlined" data-icon="home" style="font-variation-settings: 'FILL' 1;">home</span>
|
|
|
+<span class="text-[11px] font-medium leading-none mt-1">首页</span>
|
|
|
+</a>
|
|
|
+<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:text-blue-500 transition-colors active:scale-90 duration-150" href="#">
|
|
|
+<span class="material-symbols-outlined" data-icon="group">group</span>
|
|
|
+<span class="text-[11px] font-medium leading-none mt-1">客户</span>
|
|
|
+</a>
|
|
|
+<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:text-blue-500 transition-colors active:scale-90 duration-150" href="#">
|
|
|
+<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
|
|
|
+<span class="text-[11px] font-medium leading-none mt-1">分析</span>
|
|
|
+</a>
|
|
|
+<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:text-blue-500 transition-colors active:scale-90 duration-150" href="#">
|
|
|
+<span class="material-symbols-outlined" data-icon="description">description</span>
|
|
|
+<span class="text-[11px] font-medium leading-none mt-1">报表</span>
|
|
|
+</a>
|
|
|
+<a class="flex flex-col items-center justify-center text-slate-400 dark:text-slate-500 hover:text-blue-500 transition-colors active:scale-90 duration-150" href="#">
|
|
|
+<span class="material-symbols-outlined" data-icon="person">person</span>
|
|
|
+<span class="text-[11px] font-medium leading-none mt-1">我的</span>
|
|
|
+</a>
|
|
|
+</nav>
|
|
|
+<!-- FAB -->
|
|
|
+<div class="fixed bottom-24 right-6 z-40">
|
|
|
+<button class="w-14 h-14 rounded-full bg-gradient-to-br from-primary-container to-primary text-on-primary flex items-center justify-center shadow-2xl shadow-primary/40 active:scale-90 transition-transform">
|
|
|
+<span class="material-symbols-outlined text-3xl" data-icon="add">add</span>
|
|
|
+</button>
|
|
|
+</div>
|
|
|
+</body></html>
|
lv
