xionggeshop/public/assets/login/previews/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>橙虎小酒 · 后台登录页方案预览</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background: #060f24;
            color: #fff;
            min-height: 100vh;
            padding: 36px 20px 56px;
        }
        h1 { text-align: center; font-size: 26px; margin-bottom: 6px; }
        .intro {
            text-align: center;
            color: rgba(255,255,255,0.65);
            margin-bottom: 12px;
            font-size: 14px;
        }
        .hint {
            text-align: center;
            color: #4096FF;
            margin-bottom: 32px;
            font-size: 15px;
            font-weight: 600;
        }
        .section-title {
            max-width: 1400px;
            margin: 0 auto 16px;
            font-size: 15px;
            color: rgba(255,255,255,0.5);
            padding-left: 4px;
        }
        .section-title.new { color: #F5D78E; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 24px;
            max-width: 1400px;
            margin: 0 auto 40px;
        }
        .card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-3px);
            border-color: #1677FF;
            box-shadow: 0 12px 32px rgba(22,119,255,0.2);
        }
        .card.new { border-color: rgba(245,215,142,0.35); }
        .card img { width: 100%; display: block; }
        .card-body { padding: 16px 20px 20px; }
        .card-body h2 { font-size: 17px; margin-bottom: 6px; }
        .card-body p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; }
        .tags { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
        .tag {
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            background: rgba(22,119,255,0.25);
            color: #93c5fd;
        }
        .tag.hot { background: #1677FF; color: #fff; }
        .tag.gold { background: rgba(201,162,39,0.3); color: #F5D78E; }
        .tag.new-tag { background: #C9A227; color: #0A2463; }
        .footer {
            text-align: center;
            font-size: 12px;
            color: rgba(255,255,255,0.35);
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <h1>橙虎小酒 · 后台登录页设计方案</h1>
    <p class="intro">共 7 套方案，点击查看大图。选定后回复「选 D」或「选 F」等，我立即按方案实现正式页面。</p>
    <p class="hint">★ 推荐优先看下方 4 套新方案（D / E / F / G）</p>

    <p class="section-title new">—— 新方案（2026-03-17）——</p>
    <div class="grid">
        <div class="card new" onclick="window.open('login-preview-D-minimal-white.jpg')">
            <img src="login-preview-D-minimal-white.jpg" alt="方案D">
            <div class="card-body">
                <h2>方案 D · 极简白底 · 商务专业</h2>
                <p>白底网格 + 左侧功能说明 + 右侧登录卡。干净、大气，类似企业 SaaS 后台，无多余装饰。</p>
                <div class="tags"><span class="tag hot">强烈推荐</span><span class="tag new-tag">新</span></div>
            </div>
        </div>
        <div class="card new" onclick="window.open('login-preview-E-glass-mesh.jpg')">
            <img src="login-preview-E-glass-mesh.jpg" alt="方案E">
            <div class="card-body">
                <h2>方案 E · 渐变网格 · 毛玻璃卡片</h2>
                <p>柔和蓝灰渐变背景 + 浮动白卡片，现代感强，视觉轻盈不压抑。</p>
                <div class="tags"><span class="tag">现代感</span><span class="tag new-tag">新</span></div>
            </div>
        </div>
        <div class="card new" onclick="window.open('login-preview-F-dashboard.jpg')">
            <img src="login-preview-F-dashboard.jpg" alt="方案F">
            <div class="card-body">
                <h2>方案 F · 数据看板风 · 运营感强</h2>
                <p>左侧模拟订单/佣金/区域数据卡片 + 销售柱状图，突出「运营后台」属性。</p>
                <div class="tags"><span class="tag hot">运营感</span><span class="tag new-tag">新</span></div>
            </div>
        </div>
        <div class="card new" onclick="window.open('login-preview-G-luxury-split.jpg')">
            <img src="login-preview-G-luxury-split.jpg" alt="方案G">
            <div class="card-body">
                <h2>方案 G · 奢品窄栏 · 金色高端</h2>
                <p>深黑蓝 + 金色按钮，窄登录栏，呼应白酒包装/logo 金色，高端酒业气质。</p>
                <div class="tags"><span class="tag gold">奢品风</span><span class="tag new-tag">新</span></div>
            </div>
        </div>
    </div>

    <p class="section-title">—— 初版方案 ——</p>
    <div class="grid">
        <div class="card" onclick="window.open('login-preview-A-split-blue.jpg')">
            <img src="login-preview-A-split-blue.jpg" alt="方案A">
            <div class="card-body">
                <h2>方案 A · 左右分栏 · 商务蓝白</h2>
                <p>左深蓝 + 酒瓶插画 + 右白卡。与小程序主题一致。</p>
                <div class="tags"><span class="tag">初版</span></div>
            </div>
        </div>
        <div class="card" onclick="window.open('login-preview-B-center-gradient.jpg')">
            <img src="login-preview-B-center-gradient.jpg" alt="方案B">
            <div class="card-body">
                <h2>方案 B · 全屏渐变 · 居中卡片</h2>
                <p>整页蓝色渐变，登录卡居中，简洁聚焦。</p>
                <div class="tags"><span class="tag">初版</span></div>
            </div>
        </div>
        <div class="card" onclick="window.open('login-preview-C-dark-gold.jpg')">
            <img src="login-preview-C-dark-gold.jpg" alt="方案C">
            <div class="card-body">
                <h2>方案 C · 深色奢品 · 金色点缀</h2>
                <p>深海军蓝 + 金色 CTA，偏传统高端风。</p>
                <div class="tags"><span class="tag gold">初版</span></div>
            </div>
        </div>
    </div>

    <p class="footer">预览页：/assets/login/previews/index.html · 正式页：/s.php/index/login</p>
</body>
</html>