GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-07 08:46:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix login

Browse Source
This commit is contained in:
jxxghp
2023-07-10 13:49:43 +08:00
parent 78def7be2c
commit f8f6e79d18
1 changed files with 68 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/login.vue
+68 -53
View File
@@ -26,6 +26,9 @@ const errorMessage = ref("");
// 背景图片 // 背景图片
const backgroundImageUrl = ref(""); const backgroundImageUrl = ref("");
// 背景图片加载状态
const isImageLoaded = ref(false);
// 获取背景图片 // 获取背景图片
const fetchBackgroundImage = async () => { const fetchBackgroundImage = async () => {
api api
@@ -100,66 +103,78 @@ onMounted(() => {
</script> </script>
<template> <template>
<div <VImg
class="auth-wrapper d-flex align-center justify-center pa-4 w-full h-full overflow-hidden" aspect-ratio="4/3"
:style="{ backgroundImage: `url(${backgroundImageUrl})` }" :src="backgroundImageUrl"
class="w-full h-full overflow-hidden"
@load="isImageLoaded = true"
cover
> >
<VCard class="auth-card pa-7 backdrop-blur-xl bg-white/50" width="25rem" theme="light"> <div class="auth-wrapper d-flex align-center justify-center pa-4">
<VCardItem class="justify-center mb-7"> <VCard
<template #prepend> class="auth-card pa-7 w-full h-full"
<div class="d-flex"> :class="isImageLoaded ? 'backdrop-blur-xl bg-white/50' : ''"
<div v-html="logo" /> max-width="25rem"
</div> :theme="isImageLoaded ? 'light' : ''"
</template> >
<VCardItem class="justify-center mb-7">
<template #prepend>
<div class="d-flex">
<div v-html="logo" />
</div>
</template>
<VCardTitle class="font-weight-semibold text-2xl text-uppercase"> <VCardTitle class="font-weight-semibold text-2xl text-uppercase">
MoviePilot MoviePilot
</VCardTitle> </VCardTitle>
</VCardItem> </VCardItem>
<VCardText> <VCardText>
<VForm @submit.prevent="() => {}" ref="refForm"> <VForm @submit.prevent="() => {}" ref="refForm">
<VRow> <VRow>
<!-- username --> <!-- username -->
<VCol cols="12"> <VCol cols="12">
<VTextField <VTextField
v-model="form.username" v-model="form.username"
label="用户名" label="用户名"
type="text" type="text"
:rules="[requiredValidator]" :rules="[requiredValidator]"
/> />
</VCol> </VCol>
<!-- password --> <!-- password -->
<VCol cols="12"> <VCol cols="12">
<VTextField <VTextField
v-model="form.password" v-model="form.password"
label="密码" label="密码"
:type="isPasswordVisible ? 'text' : 'password'" :type="isPasswordVisible ? 'text' : 'password'"
:append-inner-icon=" :append-inner-icon="
isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline' isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
" "
:rules="[requiredValidator]" :rules="[requiredValidator]"
@click:append-inner="isPasswordVisible = !isPasswordVisible" @click:append-inner="isPasswordVisible = !isPasswordVisible"
/> />
<div v-if="errorMessage" class="text-error mt-1"> <div v-if="errorMessage" class="text-error mt-1">
{{ errorMessage }} {{ errorMessage }}
</div> </div>
<!-- remember me checkbox --> <!-- remember me checkbox -->
<div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4"> <div
<VCheckbox v-model="form.remember" label="保持登录" required /> class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4"
</div> >
<VCheckbox v-model="form.remember" label="保持登录" required />
</div>
<!-- login button --> <!-- login button -->
<VBtn block type="submit" @click="login"> 登录 </VBtn> <VBtn block type="submit" @click="login"> 登录 </VBtn>
</VCol> </VCol>
</VRow> </VRow>
</VForm> </VForm>
</VCardText> </VCardText>
</VCard> </VCard>
</div> </div>
</VImg>
</template> </template>
<style lang="scss"> <style lang="scss">