loan
/
client


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!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=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&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>
        .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);
        }
        body {
            font-family: 'Inter', 'PingFang SC', sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        .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 flex flex-col items-center justify-start overflow-x-hidden">
<!-- Hero Background Graphic (Ethereal Style) -->
<div class="fixed top-0 left-0 w-full h-[397px] z-0 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-primary-container/10 via-surface to-surface"></div>
<div class="absolute -top-24 -right-24 w-96 h-96 bg-primary-container/5 rounded-full blur-[80px]"></div>
<div class="absolute top-1/4 -left-20 w-64 h-64 bg-secondary-container/10 rounded-full blur-[60px]"></div>
</div>
<!-- Main Content Canvas -->
<main class="relative z-10 w-full max-w-md px-8 pt-24 pb-12 flex flex-col min-h-screen">
<!-- Header Section -->
<header class="mb-12">
<div class="w-16 h-16 bg-gradient-to-tr from-primary-container to-primary rounded-xl flex items-center justify-center shadow-xl shadow-primary/20 mb-6">
<span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">account_balance</span>
</div>
<h1 class="text-3xl font-bold tracking-tight text-on-surface mb-2">欢迎回来</h1>
<p class="text-on-surface-variant font-medium">登录贷款助手，开启您的财务管理之旅</p>
</header>
<!-- Login Card -->
<section class="bg-surface-container-lowest/80 ios-blur rounded-xl p-1 shadow-sm mb-8">
<!-- Tabs -->
<nav class="flex p-1 gap-1 mb-6">
<button class="flex-1 py-3 text-sm font-semibold rounded-lg bg-surface-container-lowest shadow-sm text-primary transition-all duration-200">
                    验证码登录
                </button>
<button class="flex-1 py-3 text-sm font-semibold text-on-surface-variant hover:text-on-surface transition-colors duration-200">
                    密码登录
                </button>
</nav>
<!-- Form Fields -->
<div class="space-y-4 px-3 pb-6">
<!-- Phone Number Input -->
<div class="group">
<label class="block text-[11px] font-bold tracking-wider text-outline uppercase mb-2 ml-1">手机号码</label>
<div class="flex items-center bg-surface-container-low rounded-lg px-4 py-3.5 group-focus-within:bg-surface-container-lowest group-focus-within:ring-2 ring-primary/10 transition-all duration-200">
<span class="text-on-surface font-semibold mr-3">+86</span>
<div class="w-[1px] h-4 bg-outline-variant/30 mr-3"></div>
<input class="bg-transparent border-none p-0 w-full text-on-surface placeholder:text-outline/60 focus:ring-0 font-medium" placeholder="请输入手机号" type="tel"/>
<span class="material-symbols-outlined text-outline/40 text-xl">smartphone</span>
</div>
</div>
<!-- Verification Code Input -->
<div class="group">
<label class="block text-[11px] font-bold tracking-wider text-outline uppercase mb-2 ml-1">验证码</label>
<div class="flex items-center bg-surface-container-low rounded-lg px-4 py-3.5 group-focus-within:bg-surface-container-lowest group-focus-within:ring-2 ring-primary/10 transition-all duration-200">
<input class="bg-transparent border-none p-0 w-full text-on-surface placeholder:text-outline/60 focus:ring-0 font-medium" placeholder="请输入6位验证码" type="text"/>
<button class="ml-2 text-sm font-bold text-primary hover:opacity-70 active:scale-95 transition-all">
                            获取验证码
                        </button>
</div>
</div>
</div>
</section>
<!-- Action Buttons -->
<div class="space-y-4">
<button class="w-full py-4 bg-gradient-to-br from-primary-container to-primary text-white font-bold rounded-lg shadow-lg shadow-primary/20 active:scale-[0.98] transition-all duration-200">
                立即登录
            </button>
<div class="flex items-center justify-between px-2">
<button class="text-sm font-medium text-on-surface-variant hover:text-primary transition-colors">注册账号</button>
<button class="text-sm font-medium text-on-surface-variant hover:text-primary transition-colors">遇到问题？</button>
</div>
</div>
<!-- Social Login / Divider -->
<div class="mt-auto pt-12">
<div class="flex items-center gap-4 mb-8">
<div class="h-[1px] flex-1 bg-surface-container-highest"></div>
<span class="text-xs font-bold text-outline tracking-widest uppercase">其他方式登录</span>
<div class="h-[1px] flex-1 bg-surface-container-highest"></div>
</div>
<div class="flex justify-center gap-8 mb-12">
<button class="w-12 h-12 rounded-full bg-surface-container-low flex items-center justify-center hover:bg-surface-container-high transition-colors active:scale-90 duration-150">
<img alt="WeChat" class="w-6 h-6 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" data-alt="clean minimalist wechat icon logo in blue tone" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-r_nprCYMXXP2IvUJKNxUMXqvqCVHA4QMiC0fscarJC6YBIZFWm5zd7l7o_ud73RNOYAjKGl4FDnHWKy-1adLF1pPPD0XwDBZJGIP7Z5rjLct5E3spblLRPrO5FT2e0tdJgLEjzF2wsqmthedf5_8z-r3pYF7G_26sp7_SNceiIRPowaBP5LhAvnUNGrzK4JpZpj6Luvnp4C2RAL3w_fC0u38g3Bs3bnoTXmzOv_ACVg6Wpf4URUJPJ-ZCQIk915fJf01xzch-nhN"/>
</button>
<button class="w-12 h-12 rounded-full bg-surface-container-low flex items-center justify-center hover:bg-surface-container-high transition-colors active:scale-90 duration-150">
<img alt="Apple" class="w-6 h-6 grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all" data-alt="minimalist apple logo in blue tone" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuvbBzcdMbP8ADIppF3NoJee0KH2m6P_b7Nme5ZSShMS-cMkx9oVVC5UVW82iGY9StX8UCRmVK_jFJc3GYlujROsy13xdz0BfQFM2uyxNp8c2dbxAQo8txyO9Sop2GhBnM9bC18w8Zb63nuBWzPPl2hpeE-PBMJ24RSq6ZTAgZ5t4nCzTvmsm-PWkZ0S3_uNkuTgb_JTfs8pPyYepcxxBm3gvfRy9v06yNFrtyRvLpfyaaRlWSGHCeV2RZUQcKxggPLrxF0WTM6Jr5"/>
</button>
</div>
<!-- Agreement Section -->
<div class="flex items-start gap-3 px-2">
<div class="pt-0.5">
<input class="w-4 h-4 rounded-full border-outline-variant text-primary focus:ring-primary/20 bg-surface-container-low transition-all" id="agreement" type="checkbox"/>
</div>
<label class="text-xs leading-relaxed text-on-surface-variant" for="agreement">
                    登录即代表您已阅读并同意
                    <a class="text-primary font-semibold" href="#">《用户服务协议》</a>、
                    <a class="text-primary font-semibold" href="#">《隐私政策》</a>
                    以及授权该应用获取您的公开信息。
                </label>
</div>
</div>
</main>
<!-- Footer Decorative Shape -->
<div class="fixed bottom-0 left-0 w-full h-24 pointer-events-none overflow-hidden z-0">
<div class="absolute bottom-0 right-0 w-64 h-64 bg-primary-container/5 rounded-full blur-[60px] translate-y-1/2 translate-x-1/2"></div>
</div>
</body></html>