loan
/
client


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!DOCTYPE html>

<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<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;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"],
                    "body": ["Inter", "PingFang SC"],
                    "label": ["Inter", "PingFang SC"]
            }
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            display: inline-block;
            vertical-align: middle;
        }
        body {
            font-family: 'Inter', 'PingFang SC', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .glass-header {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-surface text-on-surface antialiased min-h-screen">
<!-- TopAppBar -->
<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 w-full">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full overflow-hidden bg-surface-container">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional smiling Asian man in a business suit, soft natural lighting, clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMclVdJTkeuusRqwHroiAItsC4Vp-AMqYCVxizWrvaTerY_EyETRglTkVpKG2uKa0PD3LpQfAS1-YS9rronBh1L3v-4pz7ZwYKRCg0VsGMTVpRTm6y-Y3y0xgKRbBRu4nE0MsXuBjENLUjmEw3vMMjVsiymFRYytvRlnjtz3XF5uc6CgAwDwFas0rRxbwC8s0lgwt8QrGNTGf_XsT-fXSud2U3ygX5CR3mv00p63SLpPkP0NK92CyNehCjDfk13ZpICH2AECVemxIB"/>
</div>
<span class="text-lg font-bold text-slate-900 dark:text-slate-100 font-['PingFang_SC','SF_Pro','Inter'] tracking-tight">贷款助手</span>
</div>
<div class="flex items-center">
<button class="text-slate-400 dark:text-slate-500 hover:opacity-70 transition-opacity active:scale-95 duration-200">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
</div>
</header>
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto">
<!-- Profile Hero Section -->
<section class="flex flex-col items-center mb-10">
<div class="relative mb-4">
<div class="w-28 h-28 rounded-full p-1 bg-gradient-to-tr from-primary-container to-primary">
<div class="w-full h-full rounded-full overflow-hidden border-4 border-surface-container-lowest">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Professional headshot of an Asian financial advisor, clean studio lighting, high-end editorial style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD59yXzbwu2NndPt-nUsaCtM_jVcIvKafSSabxXRJz6bJcrk_HWZK0UUj9-hS8dnMb402NXmsqQfky5_l6wznb__lkBSydi4iKlQd4ghp7x6G5sSoImRHxDomyEZ9y73NG1f2Ye2a7RVlf5fkHpNqtG34TGaVC380vB7E1xXTeL-SjAABE3aT0uMQJ6M4Cfu8h6p-0I5_sje4NznSWnynLP0NT9GF-96tY0A9nJzHiurKQ5kz7fjYPnJLKVWRtEVxJxGtx_9Wh4XNWl"/>
</div>
</div>
<div class="absolute bottom-1 right-1 bg-primary text-on-primary w-8 h-8 rounded-full flex items-center justify-center border-4 border-surface-container-lowest shadow-lg">
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
</div>
<h1 class="text-2xl font-extrabold tracking-tight text-on-surface mb-1">张建华</h1>
<p class="text-on-surface-variant text-sm font-medium tracking-wide">高级信贷经理 · 智融金融</p>
</section>
<!-- Stats Grid (Bento Style) -->
<section class="grid grid-cols-3 gap-4 mb-10">
<div class="bg-surface-container-lowest rounded-xl p-4 flex flex-col items-center justify-center text-center shadow-sm">
<span class="text-primary text-xl font-extrabold mb-1">128</span>
<span class="text-[10px] uppercase tracking-widest text-outline font-bold">已完成</span>
</div>
<div class="bg-surface-container-lowest rounded-xl p-4 flex flex-col items-center justify-center text-center shadow-sm">
<span class="text-primary text-xl font-extrabold mb-1">94%</span>
<span class="text-[10px] uppercase tracking-widest text-outline font-bold">成功率</span>
</div>
<div class="bg-surface-container-lowest rounded-xl p-4 flex flex-col items-center justify-center text-center shadow-sm">
<span class="text-primary text-xl font-extrabold mb-1">¥42k</span>
<span class="text-[10px] uppercase tracking-widest text-outline font-bold">本月收入</span>
</div>
</section>
<!-- Menu Groups -->
<div class="space-y-6">
<!-- Professional Group -->
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-sm">
<div class="flex items-center px-5 py-4 active:bg-surface-container-low transition-colors group">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-primary mr-4">
<span class="material-symbols-outlined" data-icon="group">group</span>
</div>
<span class="flex-1 font-semibold text-on-surface">我的客户</span>
<span class="material-symbols-outlined text-outline-variant group-active:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
<div class="flex items-center px-5 py-4 active:bg-surface-container-low transition-colors group">
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600 mr-4">
<span class="material-symbols-outlined" data-icon="domain">domain</span>
</div>
<span class="flex-1 font-semibold text-on-surface">机构设置</span>
<span class="material-symbols-outlined text-outline-variant group-active:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
</div>
<!-- System Group -->
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-sm">
<div class="flex items-center px-5 py-4 active:bg-surface-container-low transition-colors group">
<div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center text-orange-600 mr-4">
<span class="material-symbols-outlined" data-icon="shield">shield</span>
</div>
<span class="flex-1 font-semibold text-on-surface">安全设置</span>
<span class="material-symbols-outlined text-outline-variant group-active:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
<div class="flex items-center px-5 py-4 active:bg-surface-container-low transition-colors group">
<div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center text-green-600 mr-4">
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
</div>
<span class="flex-1 font-semibold text-on-surface">帮助与支持</span>
<span class="material-symbols-outlined text-outline-variant group-active:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
<div class="flex items-center px-5 py-4 active:bg-surface-container-low transition-colors group">
<div class="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center text-slate-600 mr-4">
<span class="material-symbols-outlined" data-icon="info">info</span>
</div>
<span class="flex-1 font-semibold text-on-surface">关于我们</span>
<span class="material-symbols-outlined text-outline-variant group-active:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
</div>
</div>
<!-- Logout Button -->
<button class="w-full mt-4 bg-surface-container-low hover:bg-error-container/10 text-error font-bold py-4 rounded-xl transition-all active:scale-[0.98] flex items-center justify-center gap-2">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
                退出登录
            </button>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full z-50 rounded-t-3xl bg-white/85 dark:bg-slate-900/85 backdrop-blur-3xl shadow-[0_-10px_40px_rgba(26,28,31,0.04)] border-none flex justify-around items-center px-4 pt-3 pb-8">
<div 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">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span class="text-[11px] font-medium leading-none mt-1">首页</span>
</div>
<div 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">
<span class="material-symbols-outlined" data-icon="group">group</span>
<span class="text-[11px] font-medium leading-none mt-1">客户</span>
</div>
<div 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">
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
<span class="text-[11px] font-medium leading-none mt-1">分析</span>
</div>
<div 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">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="text-[11px] font-medium leading-none mt-1">报表</span>
</div>
<div class="flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 hover:text-blue-500 transition-colors active:scale-90 duration-150">
<span class="material-symbols-outlined" data-icon="person" style="font-variation-settings: 'FILL' 1;">person</span>
<span class="text-[11px] font-medium leading-none mt-1">我的</span>
</div>
</nav>
</body></html>