loan
/
client


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
							<!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&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"/>
<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": {
                    "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>