loan
/
client


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<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"/>
<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": "0.5rem",
                    "xl": "1.5rem",
                    "2xl": "2rem"
            },
            "fontFamily": {
                    "headline": ["Inter", "PingFang SC", "sans-serif"],
                    "body": ["Inter", "PingFang SC", "sans-serif"],
                    "label": ["Inter", "PingFang SC", "sans-serif"]
            }
          },
        }
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .ios-blur {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-surface font-body text-on-surface antialiased pb-24">
<!-- Top AppBar (JSON Component) -->
<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-8 h-8 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 advisor in a minimalist corporate style with soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXS6JFP50IR0xKE0F8Ux7ctxME1lJB5F4xNeaPYvJMYMaguoUBKpqGWOdL7xYP-Uf_0n9-RoDo5WKKyuPNFrn1QooTfuDFbOtJfKsYFrwKTiDIRrPRt5wHPNO3IeWxd0sVL4cidXb8YSTi7CDi8yUWpv7yJxfAvTL6QuSEBiNPKD82NnXmtwTTqC08dlY8ZjoXFOK_QEMmuzOgl-QPJ_XrFP-SwYAa0u5-qCfXcGlljNFB2pWNxPR0z2eaCSsYfnAO0n1rwFAKrvUu"/>
</div>
<span class="text-lg font-bold text-slate-900 dark:text-slate-100 font-['PingFang_SC','SF_Pro','Inter'] tracking-tight">贷款助手</span>
</div>
<button class="text-blue-600 dark:text-blue-400 hover:opacity-70 transition-opacity active:scale-95 duration-200">
<span class="material-symbols-outlined">notifications</span>
</button>
</header>
<main class="pt-20 px-6 max-w-2xl mx-auto space-y-12">
<!-- Section Title: Modals & Alerts Showcase -->
<section class="space-y-6">
<h2 class="text-2xl font-bold tracking-tight text-on-surface px-2">交互反馈组件</h2>
<!-- Success Modal (iOS Center Style) -->
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-2xl blur opacity-25"></div>
<div class="relative bg-surface-container-lowest p-8 rounded-xl flex flex-col items-center text-center space-y-4 ios-blur shadow-[0_10px_40px_rgba(26,28,31,0.06)]">
<div class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center mb-2">
<span class="material-symbols-outlined text-green-500 text-4xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
<div>
<h3 class="text-xl font-bold text-on-surface">交易成功</h3>
<p class="text-on-surface-variant mt-2 text-sm">您的贷款申请已通过审核，资金预计将在24小时内到账。</p>
</div>
<div class="w-full pt-4 space-y-3">
<button class="w-full py-4 bg-gradient-to-br from-primary-container to-primary text-white rounded-xl font-semibold shadow-lg shadow-blue-500/20 active:scale-[0.98] transition-transform">查看详情</button>
<button class="w-full py-4 text-primary font-medium active:opacity-60 transition-opacity">返回首页</button>
</div>
</div>
</div>
<!-- Error Alert (iOS Compact Style) -->
<div class="bg-surface-container-lowest/90 ios-blur rounded-xl overflow-hidden shadow-[0_10px_40px_rgba(26,28,31,0.06)] max-w-sm mx-auto">
<div class="p-6 text-center border-b border-outline-variant/15">
<h3 class="text-lg font-bold text-on-surface">验证失败</h3>
<p class="text-on-surface-variant mt-1 text-sm leading-relaxed">无法识别您的身份信息，请重新上传清晰的二代身份证照片。</p>
</div>
<div class="grid grid-cols-2">
<button class="py-4 text-on-surface-variant font-medium border-r border-outline-variant/15 active:bg-surface-container-low">取消</button>
<button class="py-4 text-primary font-bold active:bg-surface-container-low">重试</button>
</div>
</div>
<!-- Action Dialog (Confirm Disbursement) -->
<div class="bg-surface-container-lowest p-6 rounded-xl space-y-6 shadow-[0_10px_40px_rgba(26,28,31,0.06)]">
<div class="flex items-start gap-4">
<div class="p-3 bg-tertiary-fixed rounded-xl text-tertiary">
<span class="material-symbols-outlined">account_balance_wallet</span>
</div>
<div>
<h3 class="text-lg font-bold">确认放款申请</h3>
<p class="text-on-surface-variant text-sm mt-1">请核对放款账户及金额</p>
</div>
</div>
<div class="bg-surface-container-low rounded-xl p-4 space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm text-on-surface-variant">放款金额</span>
<span class="font-bold text-lg">¥ 50,000.00</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-on-surface-variant">收款账户</span>
<span class="text-sm font-medium">工商银行 (**** 8829)</span>
</div>
</div>
<div class="flex gap-3">
<button class="flex-1 py-4 bg-surface-container-high text-on-surface font-semibold rounded-xl active:scale-[0.98] transition-transform">稍后再说</button>
<button class="flex-1 py-4 bg-primary text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 active:scale-[0.98] transition-transform">确认放款</button>
</div>
</div>
</section>
<!-- Standard List Items Section -->
<section class="space-y-6">
<h2 class="text-2xl font-bold tracking-tight text-on-surface px-2">常用列表项</h2>
<div class="bg-surface-container-lowest rounded-xl overflow-hidden shadow-[0_1px_3px_rgba(0,0,0,0.02)]">
<!-- List Item 1 -->
<div class="flex items-center justify-between p-5 hover:bg-surface-container-low transition-colors cursor-pointer group">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
<span class="material-symbols-outlined">receipt_long</span>
</div>
<div>
<p class="font-semibold text-on-surface">还款计划</p>
<p class="text-xs text-on-surface-variant">查看每期应还金额与日期</p>
</div>
</div>
<span class="material-symbols-outlined text-outline group-hover:translate-x-1 transition-transform">chevron_right</span>
</div>
<!-- List Item 2 (With Status) -->
<div class="flex items-center justify-between p-5 hover:bg-surface-container-low transition-colors cursor-pointer group">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600">
<span class="material-symbols-outlined">verified_user</span>
</div>
<div>
<p class="font-semibold text-on-surface">身份认证</p>
<p class="text-xs text-on-surface-variant">保障您的账户安全</p>
</div>
</div>
<div class="flex items-center gap-2">
<span class="px-2 py-1 bg-error-container text-on-error-container text-[10px] font-bold rounded-full tracking-wider uppercase">待完善</span>
<span class="material-symbols-outlined text-outline group-hover:translate-x-1 transition-transform">chevron_right</span>
</div>
</div>
<!-- List Item 3 (Switch style placeholder) -->
<div class="flex items-center justify-between p-5 hover:bg-surface-container-low transition-colors cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center text-purple-600">
<span class="material-symbols-outlined">notifications_active</span>
</div>
<div>
<p class="font-semibold text-on-surface">消息推送</p>
<p class="text-xs text-on-surface-variant">重要还款提醒</p>
</div>
</div>
<div class="w-12 h-6 bg-primary rounded-full relative flex items-center px-1">
<div class="w-4 h-4 bg-white rounded-full shadow-sm ml-auto"></div>
</div>
</div>
</div>
</section>
<!-- Bento Grid Feature Highlight -->
<section class="grid grid-cols-2 gap-4">
<div class="col-span-2 bg-gradient-to-br from-blue-600 to-indigo-700 p-6 rounded-2xl text-white relative overflow-hidden h-44 flex flex-col justify-end">
<img alt="Finance background" class="absolute inset-0 w-full h-full object-cover opacity-20 mix-blend-overlay" data-alt="high-quality close up of modern architectural glass building reflecting bright blue sky in an abstract pattern" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVg6ewjYsNUOYJrDAPDMae1nkKoJTuWHYBGZ372QXXeQzBoL04ahS3Xo3Zc2n6JY95Tck3s0lm6CIeZhQ_lNCwENOve-kZfzNXbZ_64g_bK6cdBEo_WqGP88CkL_b9KB7j1thcDELhuHAFGl_iyi057PSTTKslquKpMmkHkh1EwqgjykEpe3s9O5HwDERvGGbQfHEe9MwAq1eymOtmwAqGv8dzrxBi_FGhWYOORuLW5OkExEuB174TyAgaS-8Zc0YfEHY9dPJk3zLL"/>
<div class="relative z-10">
<p class="text-blue-100 text-sm font-medium mb-1">当前可用额度</p>
<h3 class="text-3xl font-extrabold tracking-tight">¥ 125,000.00</h3>
</div>
</div>
<div class="bg-surface-container-lowest p-5 rounded-2xl flex flex-col justify-between h-36 shadow-[0_10px_40px_rgba(26,28,31,0.04)]">
<span class="material-symbols-outlined text-blue-600 bg-blue-50 w-10 h-10 flex items-center justify-center rounded-xl">monitoring</span>
<div class="mt-2">
<p class="text-xs text-on-surface-variant">近7日利率</p>
<p class="font-bold text-lg text-on-surface">3.45%</p>
</div>
</div>
<div class="bg-surface-container-lowest p-5 rounded-2xl flex flex-col justify-between h-36 shadow-[0_10px_40px_rgba(26,28,31,0.04)]">
<span class="material-symbols-outlined text-emerald-600 bg-emerald-50 w-10 h-10 flex items-center justify-center rounded-xl">speed</span>
<div class="mt-2">
<p class="text-xs text-on-surface-variant">极速审批</p>
<p class="font-bold text-lg text-on-surface">5 分钟</p>
</div>
</div>
</section>
</main>
<!-- BottomNavBar (JSON Component) -->
<nav class="fixed bottom-0 left-0 w-full bg-white/85 dark:bg-slate-900/85 backdrop-blur-3xl shadow-[0_-10px_40px_rgba(26,28,31,0.04)] rounded-t-3xl z-50 flex justify-around items-center px-4 pt-3 pb-8">
<div class="flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 active:scale-90 transition-transform duration-150 cursor-pointer">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">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-50 transition-colors active:scale-90 transition-transform duration-150 cursor-pointer">
<span class="material-symbols-outlined">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-50 transition-colors active:scale-90 transition-transform duration-150 cursor-pointer">
<span class="material-symbols-outlined">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-50 transition-colors active:scale-90 transition-transform duration-150 cursor-pointer">
<span class="material-symbols-outlined">description</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-50 transition-colors active:scale-90 transition-transform duration-150 cursor-pointer">
<span class="material-symbols-outlined">person</span>
<span class="text-[11px] font-medium leading-none mt-1">我的</span>
</div>
</nav>
</body></html>