lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登录页面

This commit is contained in:
fangxiang 2022-03-30 15:30:22 +08:00
parent f9a4942581
commit b04731f4ae
4 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/login/network.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 824 B

BIN
public/login/password.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 459 B

BIN
public/login/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

46
src/pages/Login.vue
View File

@ -1,7 +1,22 @@
<template> <template>
<q-layout view="hHh lpR fFf"> <q-layout
view="hHh lpR fFf"
:style="
landspace
? {
'background-image': 'url(login_background.png)',
'background-size': '100% 100%',
'background-repeat': 'no-repeat',
}
: {}
"
>
<q-page-container> <q-page-container>
<q-page class="row items-center justify-evenly"> <q-page
class="row items-center"
:class="landspace ? '' : 'justify-evenly'"
:style="landspace ? { left: '50%' } : {}"
>
<q-card :style="{ width: (landspace ? 34 : 70) + 'vw' }"> <q-card :style="{ width: (landspace ? 34 : 70) + 'vw' }">
<q-card-section class="text-center text-h6"> <q-card-section class="text-center text-h6">
{{ $t("login") }} {{ $t("login") }}
@ -13,6 +28,8 @@
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input <q-input
:autofocus="!data.ip_address"
outlined
:loading="data.loading" :loading="data.loading"
:disable="data.loading" :disable="data.loading"
v-model="data.ip_address" v-model="data.ip_address"
@ -38,6 +55,9 @@
} }
" "
> >
<template v-slot:prepend>
<q-icon name="img:login/network.png" />
</template>
<template v-if="data.ip_address" v-slot:append> <template v-if="data.ip_address" v-slot:append>
<q-icon <q-icon
name="cancel" name="cancel"
@ -52,7 +72,8 @@
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input <q-input
autofocus :autofocus="!data.user_name"
outlined
ref="user_name" ref="user_name"
:loading="data.loading" :loading="data.loading"
:disable="data.loading" :disable="data.loading"
@ -73,6 +94,9 @@
} }
" "
> >
<template v-slot:prepend>
<q-icon name="img:login/user.png" />
</template>
<template v-if="data.user_name" v-slot:append> <template v-if="data.user_name" v-slot:append>
<q-icon <q-icon
name="cancel" name="cancel"
@ -87,6 +111,7 @@
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input <q-input
outlined
ref="password_input" ref="password_input"
:loading="data.loading" :loading="data.loading"
:disable="data.loading" :disable="data.loading"
@ -108,6 +133,9 @@
} }
" "
> >
<template v-slot:prepend>
<q-icon name="img:login/password.png" />
</template>
<template v-if="data.password" v-slot:append> <template v-if="data.password" v-slot:append>
<q-icon <q-icon
:name=" :name="
@ -125,7 +153,7 @@
</q-input> </q-input>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item class="q-mt-md">
<q-item-section> <q-item-section>
<q-checkbox <q-checkbox
:label="$t('remember password')" :label="$t('remember password')"
@ -143,13 +171,17 @@
</q-list> </q-list>
</q-form> </q-form>
</q-card-section> </q-card-section>
<q-card-actions> <q-card-actions class="q-px-lg">
<q-btn <q-btn
ref="login_button" ref="login_button"
class="full-width" class="full-width text-h6"
:loading="data.loading" :loading="data.loading"
:label="$t('login')" :label="$t('login')"
color="primary" style="
background: #273de4;
box-shadow: 0 4px 6px 0px rgb(39 60 228 / 40%);
"
text-color="white"
@click="$refs?.login_form?.submit()" @click="$refs?.login_form?.submit()"
/> />
</q-card-actions> </q-card-actions>