登录和注册界面调整

This commit is contained in:
dong 2023-09-14 13:54:48 +08:00
parent 0686831059
commit 1f32be8ce1
2 changed files with 21 additions and 11 deletions

View File

@ -9,7 +9,7 @@
</q-page-sticky> </q-page-sticky>
<q-card <q-card
v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }" v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
style="min-width: 350px" class="logoCard shadow-24"
> >
<q-card-section> <q-card-section>
<div class="text-center q-pt-lg"> <div class="text-center q-pt-lg">
@ -83,12 +83,15 @@ async function doLogin() {
} }
</script> </script>
<style> <style scoped>
.bg-image { .bg-image {
/* background-image: linear-gradient(135deg, #5481fd 0%, #0e02b1 80%); */ /* background-image: linear-gradient(135deg, #5481fd 0%, #0e02b1 80%); */
background-image: url('/logo/logoBg.png'); background-image: url('logo/logoBg.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
} }
.logoCard {
min-width: 350px;
}
</style> </style>

View File

@ -2,15 +2,15 @@
<q-layout> <q-layout>
<q-page-container> <q-page-container>
<q-page class="flex bg-image flex-center"> <q-page class="flex bg-image flex-center">
<q-page-sticky position="top-left" :offset="[200, 68]">
<div>
<img src="logo/xian.jpg" style="width: 350px" />
</div>
</q-page-sticky>
<q-card <q-card
v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }" v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
style="min-width: 350px" class="logoCard shadow-24"
> >
<q-card-section>
<q-avatar size="100px" class="absolute-center shadow-10">
<img src="icons/favicon-96x96.png" />
</q-avatar>
</q-card-section>
<q-card-section> <q-card-section>
<div class="text-center q-pt-lg"> <div class="text-center q-pt-lg">
<div class="col text-h6 ellipsis">注册</div> <div class="col text-h6 ellipsis">注册</div>
@ -90,8 +90,15 @@ async function doRegister() {
} }
</script> </script>
<style> <style scoped>
.bg-image { .bg-image {
background-image: linear-gradient(135deg, #5481fd 0%, #0e02b1 80%); /* background-image: linear-gradient(135deg, #5481fd 0%, #0e02b1 80%); */
background-image: url('logo/logoBg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.logoCard {
min-width: 350px;
} }
</style> </style>