refactor: 登录页重构为双栏视觉布局
左侧新增品牌展示区与平台能力介绍，右侧保留登录表单并优化可访问性属性，Element Plus 链接/文本按钮统一样式与焦点表现。
This commit is contained in:
caoxiaozhu
@@ -124,10 +124,18 @@ body {
|
||||
.el-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.el-button.is-link:hover {
|
||||
.el-button.is-link:hover,
|
||||
.el-button.is-text:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-button.is-link:focus,
|
||||
.el-button.is-text:focus {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* 4. 标签 (el-tag) 圆润化 */
|
||||
.el-tag {
|
||||
|
||||
@@ -40,225 +40,308 @@ async function handleLogin() {
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<!-- LOGO 和标题 -->
|
||||
<div class="login-header">
|
||||
<img src="/logo.png" alt="Logo" class="login-logo" />
|
||||
<h1 class="login-title">远光软件微调平台</h1>
|
||||
<p class="login-subtitle">模型管理平台</p>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="rules"
|
||||
size="large"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入账号/手机号/邮箱"
|
||||
clearable
|
||||
>
|
||||
<template #prefix><i class="fa fa-user-o" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
>
|
||||
<template #prefix><i class="fa fa-lock-o" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="login-options">
|
||||
<el-checkbox>记住密码</el-checkbox>
|
||||
<el-link type="primary" :underline="false">忘记密码？</el-link>
|
||||
<section class="login-visual" aria-labelledby="platform-title">
|
||||
<div class="login-visual-content">
|
||||
<div class="login-visual-copy">
|
||||
<h1 id="platform-title">远光软件微调平台</h1>
|
||||
<p>大模型微调、评测与推理的一体化工作台</p>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
class="login-btn"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
<div class="login-visual-footer" aria-label="平台核心能力">
|
||||
<span>数据准备</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>模型训练</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>效果评测</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="login-panel">
|
||||
<div class="brand-lockup" role="img" aria-label="远光软件">
|
||||
<span class="brand-logo-crop brand-logo-crop-mark" aria-hidden="true">
|
||||
<img src="/logo.png" alt="" />
|
||||
</span>
|
||||
<span class="brand-logo-crop brand-logo-crop-wordmark" aria-hidden="true">
|
||||
<img src="/logo.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="login-form-wrap">
|
||||
<div class="login-heading">
|
||||
<span>账号登录</span>
|
||||
<h2>欢迎回来</h2>
|
||||
<p>登录后继续使用微调平台</p>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
size="large"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<i class="fa fa-sign-in login-btn-icon" />
|
||||
登 录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="请输入账号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="login-options">
|
||||
<el-checkbox>记住密码</el-checkbox>
|
||||
<el-link type="primary" :underline="false">忘记密码？</el-link>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
class="login-btn"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<footer>© 2026 远光软件</footer>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background-color: #f8fafc;
|
||||
/* Beautiful light mesh gradient for AI platform */
|
||||
background-image:
|
||||
radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 40% 60%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 90% 80%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
|
||||
background-size: 100% 100%;
|
||||
min-height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 58fr) minmax(500px, 42fr);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #fcfcfe;
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
background-color: #121127;
|
||||
background-image: url('@/assets/login-hero-flow.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Add some dynamic floating orbs for extra premium feel */
|
||||
.login-page::before,
|
||||
.login-page::after {
|
||||
.login-visual::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
z-index: 0;
|
||||
animation: float 20s infinite ease-in-out alternate;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(12, 12, 35, 0.2), transparent 36%, rgba(12, 12, 35, 0.2));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.login-page::after {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: rgba(236, 72, 153, 0.08);
|
||||
bottom: -150px;
|
||||
right: -150px;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translate(0, 0) rotate(0deg); }
|
||||
100% { transform: translate(50px, 50px) rotate(10deg); }
|
||||
}
|
||||
|
||||
.login-card {
|
||||
.login-visual-content {
|
||||
min-height: inherit;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
/* Glassmorphism */
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 24px;
|
||||
padding: 48px 40px;
|
||||
box-shadow:
|
||||
0 20px 40px -10px rgba(0, 0, 0, 0.05),
|
||||
0 1px 3px rgba(0, 0, 0, 0.02),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
/* Entrance animation */
|
||||
transform: translateY(30px);
|
||||
opacity: 0;
|
||||
animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: clamp(80px, 10vh, 132px) clamp(56px, 6vw, 112px) clamp(56px, 7vh, 84px);
|
||||
}
|
||||
|
||||
@keyframes slideUpFade {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.login-visual-copy {
|
||||
max-width: 680px;
|
||||
margin-top: clamp(80px, 11vh, 136px);
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.login-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 20px;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0 0 8px;
|
||||
/* Gradient text */
|
||||
background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 15px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(38px, 3.8vw, 62px);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.035em;
|
||||
font-weight: 700;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 22px 0 0;
|
||||
color: rgba(226, 232, 240, 0.76);
|
||||
font-size: clamp(17px, 1.5vw, 24px);
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
.login-visual-footer {
|
||||
width: min(100%, 640px);
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
color: rgba(226, 232, 240, 0.72);
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
span:nth-child(3),
|
||||
span:nth-child(5) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span:nth-child(even) {
|
||||
color: rgba(199, 210, 254, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 120px clamp(48px, 5vw, 88px) 96px;
|
||||
border-left: 1px solid #e8eaf1;
|
||||
background: #fcfcfe;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
right: clamp(36px, 4vw, 64px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.brand-logo-crop {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-logo-crop-mark {
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
|
||||
img {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-logo-crop-wordmark {
|
||||
width: 96px;
|
||||
height: 25px;
|
||||
|
||||
img {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-wrap {
|
||||
width: min(100%, 480px);
|
||||
}
|
||||
|
||||
.login-heading {
|
||||
margin-bottom: 42px;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
color: #4f46e5;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #17182c;
|
||||
font-size: clamp(38px, 3vw, 48px);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.035em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 14px 0 0;
|
||||
color: #8a93a6;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Input Styling */
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: #272a3a;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(255, 255, 255, 0.6) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.5) inset !important;
|
||||
padding: 0 16px;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 54px;
|
||||
padding: 0 18px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px #cfd4df inset;
|
||||
transition: box-shadow 160ms ease, background-color 160ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6) inset !important;
|
||||
box-shadow: 0 0 0 1px #aeb6c6 inset;
|
||||
}
|
||||
|
||||
|
||||
&.is-focus {
|
||||
background-color: #ffffff !important;
|
||||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) inset, 0 0 0 1px #4f46e5 inset !important;
|
||||
box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 3px rgba(79, 70, 229, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 48px;
|
||||
font-size: 15px;
|
||||
color: #1e293b;
|
||||
&::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
color: #94a3b8;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
&::placeholder {
|
||||
color: #a4acba;
|
||||
}
|
||||
}
|
||||
|
||||
.login-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
margin-top: -8px;
|
||||
margin: -2px 0 30px;
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: #64748b;
|
||||
color: #556070;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-link) {
|
||||
font-weight: 500;
|
||||
color: #4f46e5;
|
||||
|
||||
&:hover {
|
||||
color: #4338ca;
|
||||
}
|
||||
@@ -267,30 +350,223 @@ async function handleLogin() {
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
height: 54px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.login-btn-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
|
||||
box-shadow: 0 14px 26px rgba(79, 70, 229, 0.24);
|
||||
background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 6px 14px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel footer {
|
||||
position: absolute;
|
||||
right: clamp(36px, 4vw, 64px);
|
||||
bottom: 34px;
|
||||
color: #9aa2b2;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.login-page {
|
||||
grid-template-columns: minmax(0, 55fr) minmax(500px, 45fr);
|
||||
}
|
||||
|
||||
.login-visual-content {
|
||||
padding-inline: clamp(52px, 5vw, 72px);
|
||||
}
|
||||
|
||||
.login-visual-copy {
|
||||
max-width: 580px;
|
||||
|
||||
h1 {
|
||||
font-size: clamp(42px, 3.6vw, 52px);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: clamp(16px, 1.45vw, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding-inline: clamp(44px, 4.2vw, 64px);
|
||||
}
|
||||
|
||||
.login-form-wrap {
|
||||
max-width: 440px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.login-page {
|
||||
grid-template-columns: minmax(0, 52fr) minmax(470px, 48fr);
|
||||
}
|
||||
|
||||
.login-visual-content {
|
||||
padding-inline: 48px;
|
||||
}
|
||||
|
||||
.login-visual-copy h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.login-visual-footer {
|
||||
gap: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 820px) and (min-width: 901px) {
|
||||
.login-visual {
|
||||
background-position: center 54%;
|
||||
}
|
||||
|
||||
.login-visual-content {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 38px;
|
||||
}
|
||||
|
||||
.login-visual-copy {
|
||||
max-width: 560px;
|
||||
margin-top: clamp(52px, 9vh, 72px);
|
||||
|
||||
h1 {
|
||||
font-size: clamp(38px, 3.4vw, 46px);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 14px;
|
||||
font-size: clamp(15px, 1.35vw, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
.login-visual-footer {
|
||||
gap: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding-top: 78px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.login-heading {
|
||||
margin-bottom: 26px;
|
||||
|
||||
> span {
|
||||
margin-bottom: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
margin-bottom: 7px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.login-options {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.login-panel footer {
|
||||
bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.login-page {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
padding: 116px 32px 84px;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.login-panel footer {
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.login-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 100px 24px 72px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
transform: scale(0.88);
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.login-heading {
|
||||
margin-bottom: 32px;
|
||||
|
||||
> span {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.login-options {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user