fix: 登录页居中布局 + 删除Logo区域
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Your Name
@@ -4,99 +4,87 @@
|
|||||||
<div class="wallpaper-bg" :style="{ backgroundImage: `url(${currentWallpaper})` }" />
|
<div class="wallpaper-bg" :style="{ backgroundImage: `url(${currentWallpaper})` }" />
|
||||||
<div class="wallpaper-overlay" />
|
<div class="wallpaper-overlay" />
|
||||||
|
|
||||||
<v-container fluid class="fill-height pa-0 login-container">
|
<div class="login-center">
|
||||||
<v-row align="center" justify="center" no-gutters style="min-height: 100vh">
|
<v-card elevation="0" rounded="xl" class="login-card pa-10" border>
|
||||||
<v-col cols="12" sm="8" md="5" lg="4" xl="3">
|
|
||||||
<v-card elevation="0" rounded="xl" class="login-card pa-10" border>
|
|
||||||
<!-- Logo -->
|
|
||||||
<div class="text-center mb-8">
|
|
||||||
<v-avatar color="primary" size="56" rounded="xl" class="mb-4">
|
|
||||||
<v-icon icon="mdi-server-network" size="30" color="white" />
|
|
||||||
</v-avatar>
|
|
||||||
<h1 class="text-h5 font-weight-bold mb-1">登录 Nexus</h1>
|
|
||||||
<p class="text-body-2 text-medium-emphasis">服务器运维管理平台</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Error -->
|
<!-- Error -->
|
||||||
<v-alert v-if="error" type="error" density="compact" class="mb-4" closable @click:close="error = ''" rounded="lg" variant="tonal">
|
<v-alert v-if="error" type="error" density="compact" class="mb-4" closable @click:close="error = ''" rounded="lg" variant="tonal">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
</v-alert>
|
</v-alert>
|
||||||
|
|
||||||
<!-- Lockout -->
|
<!-- Lockout -->
|
||||||
<v-alert v-if="lockoutUntil" type="warning" density="compact" class="mb-4" rounded="lg" variant="tonal">
|
<v-alert v-if="lockoutUntil" type="warning" density="compact" class="mb-4" rounded="lg" variant="tonal">
|
||||||
账户已锁定，请 {{ remainingMinutes }} 分钟后重试
|
账户已锁定，请 {{ remainingMinutes }} 分钟后重试
|
||||||
</v-alert>
|
</v-alert>
|
||||||
|
|
||||||
<!-- Form -->
|
<!-- Form -->
|
||||||
<v-form @submit.prevent="doLogin">
|
<v-form @submit.prevent="doLogin">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="username"
|
v-model="username"
|
||||||
label="用户名"
|
label="用户名"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
density="comfortable"
|
density="comfortable"
|
||||||
prepend-inner-icon="mdi-account-outline"
|
prepend-inner-icon="mdi-account-outline"
|
||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
autocomplete="username"
|
autocomplete="username"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
hide-details="auto"
|
hide-details="auto"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="password"
|
v-model="password"
|
||||||
label="密码"
|
label="密码"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
density="comfortable"
|
density="comfortable"
|
||||||
prepend-inner-icon="mdi-lock-outline"
|
prepend-inner-icon="mdi-lock-outline"
|
||||||
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
:type="showPassword ? 'text' : 'password'"
|
:type="showPassword ? 'text' : 'password'"
|
||||||
@click:append-inner="showPassword = !showPassword"
|
@click:append-inner="showPassword = !showPassword"
|
||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
hide-details="auto"
|
hide-details="auto"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-if="needTotp"
|
v-if="needTotp"
|
||||||
v-model="totpCode"
|
v-model="totpCode"
|
||||||
label="TOTP 验证码"
|
label="TOTP 验证码"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
density="comfortable"
|
density="comfortable"
|
||||||
prepend-inner-icon="mdi-shield-key-outline"
|
prepend-inner-icon="mdi-shield-key-outline"
|
||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
autocomplete="one-time-code"
|
autocomplete="one-time-code"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
hide-details="auto"
|
hide-details="auto"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-btn
|
<v-btn
|
||||||
type="submit"
|
type="submit"
|
||||||
color="primary"
|
color="primary"
|
||||||
variant="flat"
|
variant="flat"
|
||||||
block
|
block
|
||||||
size="large"
|
size="large"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:disabled="!!lockoutUntil"
|
:disabled="!!lockoutUntil"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
class="mt-2"
|
class="mt-2"
|
||||||
height="48"
|
height="48"
|
||||||
>
|
>
|
||||||
登录
|
登录
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-form>
|
</v-form>
|
||||||
|
|
||||||
<div v-if="failedAttempts > 0 && !lockoutUntil" class="text-center mt-4">
|
<div v-if="failedAttempts > 0 && !lockoutUntil" class="text-center mt-4">
|
||||||
<v-chip size="small" variant="tonal" color="warning" label>
|
<v-chip size="small" variant="tonal" color="warning" label>
|
||||||
已失败 {{ failedAttempts }} 次
|
已失败 {{ failedAttempts }} 次
|
||||||
</v-chip>
|
</v-chip>
|
||||||
</div>
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</div>
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -225,13 +213,20 @@ async function doLogin() {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-center {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
background: rgba(var(--v-theme-surface), 0.92) !important;
|
background: rgba(var(--v-theme-surface), 0.92) !important;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user