feat(admin): redesign branded login page

This commit is contained in:
2026-07-13 17:28:27 +08:00
parent 971440ebff
commit 653317ca7d
5 changed files with 535 additions and 159 deletions

View File

@@ -16,44 +16,121 @@ function submit() {
<template>
<main class="login-page">
<section class="login-hero">
<div class="login-hero-main">
<div class="login-brand">
<span></span>
<strong>大本营千问千答</strong>
<section class="login-hero" aria-label="大本营千问千答后台登录">
<section class="login-hero-main" aria-label="产品介绍">
<header class="login-brand">
<span class="login-brand-mark" aria-hidden="true">
<svg viewBox="0 0 64 64" role="presentation">
<circle cx="32" cy="32" r="28" />
<path d="M32 9c4 7 8 10 15 11-1 7 1 12 7 17-6 4-9 9-9 16-7-1-12 1-17 6-4-6-9-9-16-9 1-7-1-12-6-17 6-4 9-9 9-16 7 1 12-1 17-6 4 6 9 9 16 9Z" />
<path d="M32 19c2.5 5 5.5 7.5 11 8-4 3.5-5.5 7.5-4 13-4.7-2.5-8.7-2.5-13 0 1.5-5.5 0-9.5-4-13 5.5-.5 8.5-3 10-8Z" />
<circle cx="32" cy="32" r="3" />
</svg>
</span>
<span class="login-brand-copy">
<strong>大本营千问千答</strong>
<small>智能知识管理与问答系统</small>
</span>
</header>
<div class="login-orbit" aria-hidden="true"><i></i></div>
<div class="login-dot-matrix" aria-hidden="true"></div>
<div class="login-brand-content">
<h1>
把大本营答疑知识库和学员<br />
运营放在<span>同一个控制台</span>
</h1>
<p>
统一维护学员名单开放知识库模型接入Agent 调试问答记录和系统运行参数让日常运营更清晰也让排查与交接更从容
</p>
<div class="login-highlights" aria-label="核心能力">
<div class="login-highlight-item">
<span aria-hidden="true">
<svg viewBox="0 0 24 24"><rect x="5" y="3.5" width="13" height="17" rx="2" /><path d="M8.5 7.5h5M8.5 11.5h6M8.5 15.5h3.5M18 7h2v11a2 2 0 0 1-2 2" /></svg>
</span>
<strong>大本营知识库</strong>
</div>
<div class="login-highlight-item">
<span aria-hidden="true">
<svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="12" rx="4" /><path d="M9 12h.01M15 12h.01M8 16h8M12 7V4M10.5 3h3" /></svg>
</span>
<strong>答疑 Agent 调试</strong>
</div>
<div class="login-highlight-item">
<span aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M5 5.5h14v11H9l-4 3v-14Z" /><path d="M8.5 9.5h7M8.5 13h4" /></svg>
</span>
<strong>问答记录审计</strong>
</div>
<div class="login-highlight-item">
<span aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 3.5 15 5l3.3-.2.2 3.3 1.7 2.9-2 2.7-.5 3.3-3.3.5-2.4 2.3-2.4-2.3-3.3-.5-.5-3.3-2-2.7 1.7-2.9.2-3.3L9 5l3-1.5Z" /><circle cx="12" cy="11.7" r="3" /></svg>
</span>
<strong>系统运行管理</strong>
</div>
</div>
</div>
<h1>把大本营答疑知识库和学员运营放在同一个控制台里</h1>
<p>统一维护学员名单开放知识库模型接入Agent 调试问答记录和系统运行参数方便排查与交接</p>
<div class="login-highlights">
<span>大本营知识库</span>
<span>答疑 Agent 调试</span>
<span>问答记录审计</span>
<svg class="login-wave" viewBox="0 0 920 250" preserveAspectRatio="none" aria-hidden="true">
<path d="M-20 45C105 25 110 150 250 151S410 85 530 118s185 97 410 18" />
<path d="M-20 62C95 40 127 169 264 167s160-64 277-28 180 82 399 18" />
<path d="M-20 80C90 57 140 188 278 184s159-60 273-23 176 69 389 17" />
<path d="M-20 105C88 78 142 209 295 202s168-54 278-16 165 56 367 13" />
<path d="M-20 133C95 102 157 224 315 220s164-46 282-11 158 43 343 12" />
</svg>
<svg class="login-lotus" viewBox="0 0 360 300" aria-hidden="true">
<g>
<path d="M180 258C126 219 119 159 180 72c61 87 54 147 0 186Z" />
<path d="M177 260C112 244 78 196 99 99c75 58 98 108 78 161Z" />
<path d="M183 260c65-16 99-64 78-161-75 58-98 108-78 161Z" />
<path d="M162 264C92 266 47 232 34 143c78 30 119 70 128 121Z" />
<path d="M198 264c70 2 115-32 128-121-78 30-119 70-128 121Z" />
<path d="M119 275c-45 5-80-8-111-41 56 3 97 15 111 41ZM241 275c45 5 80-8 111-41-56 3-97 15-111 41Z" />
</g>
</svg>
</section>
<section class="login-card" aria-labelledby="login-title">
<div class="login-card-inner">
<div class="login-card-head">
<span class="login-card-eyebrow">ADMIN CONSOLE</span>
<h2 id="login-title">欢迎登录</h2>
<p>登录大本营答疑助手后台管理系统</p>
</div>
<el-form label-position="top" autocomplete="off" @submit.prevent="submit">
<el-form-item label="管理员账号">
<el-input v-model="form.username" size="large" placeholder="请输入管理员账号" autocomplete="off">
<template #prefix>
<svg class="login-input-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="3.5" /><path d="M5.5 19c.6-4 2.8-6 6.5-6s5.9 2 6.5 6" /></svg>
</template>
</el-input>
</el-form-item>
<el-form-item label="密码">
<el-input
v-model="form.password"
size="large"
type="password"
placeholder="请输入密码"
autocomplete="new-password"
show-password
>
<template #prefix>
<svg class="login-input-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v2.5" /></svg>
</template>
</el-input>
</el-form-item>
<el-button type="primary" native-type="submit" :loading="loading" class="full-btn login-submit">
进入答疑后台
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
</el-button>
</el-form>
<p class="login-security-note"><span aria-hidden="true"></span>仅限已授权的后台管理员访问</p>
</div>
</div>
<section class="login-card">
<div class="login-card-head">
<h2>登录答疑后台</h2>
<p>请输入大本营答疑助手后台管理员账号和密码</p>
</div>
<el-form label-position="top" autocomplete="off" @submit.prevent="submit">
<el-form-item label="管理员账号">
<el-input v-model="form.username" size="large" placeholder="请输入管理员账号" autocomplete="off" />
</el-form-item>
<el-form-item label="密码">
<el-input
v-model="form.password"
size="large"
type="password"
placeholder="请输入密码"
autocomplete="new-password"
show-password
/>
</el-form-item>
<el-button type="primary" native-type="submit" :loading="loading" class="full-btn login-submit">
进入答疑后台
</el-button>
</el-form>
</section>
</section>
<p class="login-copyright">© 2026 大本营教育科技上海有限公司</p>
</main>
</template>