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-overlay" />
|
||||
|
||||
<v-container fluid class="fill-height pa-0 login-container">
|
||||
<v-row align="center" justify="center" no-gutters style="min-height: 100vh">
|
||||
<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>
|
||||
<div class="login-center">
|
||||
<v-card elevation="0" rounded="xl" class="login-card pa-10" border>
|
||||
|
||||
<!-- Error -->
|
||||
<v-alert v-if="error" type="error" density="compact" class="mb-4" closable @click:close="error = ''" rounded="lg" variant="tonal">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
<!-- Error -->
|
||||
<v-alert v-if="error" type="error" density="compact" class="mb-4" closable @click:close="error = ''" rounded="lg" variant="tonal">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
|
||||
<!-- Lockout -->
|
||||
<v-alert v-if="lockoutUntil" type="warning" density="compact" class="mb-4" rounded="lg" variant="tonal">
|
||||
账户已锁定，请 {{ remainingMinutes }} 分钟后重试
|
||||
</v-alert>
|
||||
<!-- Lockout -->
|
||||
<v-alert v-if="lockoutUntil" type="warning" density="compact" class="mb-4" rounded="lg" variant="tonal">
|
||||
账户已锁定，请 {{ remainingMinutes }} 分钟后重试
|
||||
</v-alert>
|
||||
|
||||
<!-- Form -->
|
||||
<v-form @submit.prevent="doLogin">
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-account-outline"
|
||||
:disabled="loading"
|
||||
class="mb-4"
|
||||
autocomplete="username"
|
||||
rounded="lg"
|
||||
hide-details="auto"
|
||||
/>
|
||||
<!-- Form -->
|
||||
<v-form @submit.prevent="doLogin">
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-account-outline"
|
||||
:disabled="loading"
|
||||
class="mb-4"
|
||||
autocomplete="username"
|
||||
rounded="lg"
|
||||
hide-details="auto"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="密码"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
@click:append-inner="showPassword = !showPassword"
|
||||
:disabled="loading"
|
||||
class="mb-4"
|
||||
autocomplete="current-password"
|
||||
rounded="lg"
|
||||
hide-details="auto"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="密码"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
@click:append-inner="showPassword = !showPassword"
|
||||
:disabled="loading"
|
||||
class="mb-4"
|
||||
autocomplete="current-password"
|
||||
rounded="lg"
|
||||
hide-details="auto"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-if="needTotp"
|
||||
v-model="totpCode"
|
||||
label="TOTP 验证码"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-shield-key-outline"
|
||||
:disabled="loading"
|
||||
class="mb-4"
|
||||
autocomplete="one-time-code"
|
||||
rounded="lg"
|
||||
hide-details="auto"
|
||||
/>
|
||||
<v-text-field
|
||||
v-if="needTotp"
|
||||
v-model="totpCode"
|
||||
label="TOTP 验证码"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-shield-key-outline"
|
||||
:disabled="loading"
|
||||
class="mb-4"
|
||||
autocomplete="one-time-code"
|
||||
rounded="lg"
|
||||
hide-details="auto"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
type="submit"
|
||||
color="primary"
|
||||
variant="flat"
|
||||
block
|
||||
size="large"
|
||||
:loading="loading"
|
||||
:disabled="!!lockoutUntil"
|
||||
rounded="lg"
|
||||
class="mt-2"
|
||||
height="48"
|
||||
>
|
||||
登录
|
||||
</v-btn>
|
||||
</v-form>
|
||||
<v-btn
|
||||
type="submit"
|
||||
color="primary"
|
||||
variant="flat"
|
||||
block
|
||||
size="large"
|
||||
:loading="loading"
|
||||
:disabled="!!lockoutUntil"
|
||||
rounded="lg"
|
||||
class="mt-2"
|
||||
height="48"
|
||||
>
|
||||
登录
|
||||
</v-btn>
|
||||
</v-form>
|
||||
|
||||
<div v-if="failedAttempts > 0 && !lockoutUntil" class="text-center mt-4">
|
||||
<v-chip size="small" variant="tonal" color="warning" label>
|
||||
已失败 {{ failedAttempts }} 次
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<div v-if="failedAttempts > 0 && !lockoutUntil" class="text-center mt-4">
|
||||
<v-chip size="small" variant="tonal" color="warning" label>
|
||||
已失败 {{ failedAttempts }} 次
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -225,13 +213,20 @@ async function doLogin() {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
.login-center {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(var(--v-theme-surface), 0.92) !important;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user