登录页代码重构

Junvary · Oct 19, 2022 · e7407ed · e7407ed
1 parent 3a0b8b9
commit e7407ed
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 279 deletions.
diff --git a/GQA-FRONTEND/src/components/GqaScrollDown/index.vue b/GQA-FRONTEND/src/components/GqaScrollDown/index.vue
diff --git a/GQA-FRONTEND/src/css/app.scss b/GQA-FRONTEND/src/css/app.scss
@@ -38,9 +38,10 @@
 .gqa-form {
     & .q-field {
         &__bottom--animated {
-            left   : -5px;
-            bottom : 15px !important;
-            z-index: 10;
+            left          : -5px;
+            bottom        : 15px !important;
+            z-index       : 10;
+            pointer-events: none;
 
             & .q-field__messages {
                 & div {

diff --git a/...ND/src/layouts/LoginLayout/PageBanner.vue → ...ts/LoginLayout/ComplexView/PageBanner.vue b/...ND/src/layouts/LoginLayout/PageBanner.vue → ...ts/LoginLayout/ComplexView/PageBanner.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <section id="gqa-banner" v-if="bannerImage !== ''">
+        <section id="gqa-banner">
             <q-img :src="bannerImage" fit="cover" style="width: 100%; max-height: 95vh">
                 <div class="container-custom">
                     <div class="container-title">
@@ -29,43 +29,13 @@
                 </div>
             </q-img>
         </section>
-
-        <section class="gin-quasar-admin-banner" id="gqa-banner" v-else>
-            <div class="container-default">
-                <div class="container-title">
-                    <h1>
-                        {{ gqaFrontend.subTitle }}
-                    </h1>
-                    <p class="small-title">
-                        {{ gqaFrontend.webDescribe }}
-                    </p>
-                    <div class="buttons">
-                        <q-btn push color="primary" @click="openLink('https://gitee.com/junvary/gin-quasar-admin')"
-                            v-if="gqaFrontend.showGit === 'yesNo_yes'">
-                            Gitee
-                        </q-btn>
-
-                        <q-btn push color="primary" @click="showLoginForm">
-                            {{ $t('Login') }}
-                        </q-btn>
-
-                        <q-btn push color="primary" @click="openLink('https://github.com/Junvary/gin-quasar-admin')"
-                            v-if="gqaFrontend.showGit === 'yesNo_yes'">
-                            Github
-                        </q-btn>
-                    </div>
-                </div>
-            </div>
-        </section>
-
         <login-dialog ref="loginDialog" />
-
     </div>
 </template>
 
 <script setup>
-import { ref, computed, toRefs } from 'vue';
-import LoginDialog from './LoginDialog.vue'
+import { ref, computed } from 'vue';
+import LoginDialog from '../LoginDialog.vue'
 import { useStorageStore } from 'src/stores/storage'
 
 const loginDialog = ref(null);
@@ -77,7 +47,7 @@ const bannerImage = computed(() => {
     if (gqaFrontend.value.bannerImage && gqaFrontend.value.bannerImage.substring(0, 11) === 'gqa-upload:') {
         return process.env.API + gqaFrontend.value.bannerImage.substring(11)
     }
-    return ''
+    return "/img/sky.jpg"
 })
 
 const showLoginForm = () => {

diff --git a/...ND/src/layouts/LoginLayout/PageFooter.vue → ...ts/LoginLayout/ComplexView/PageFooter.vue b/...ND/src/layouts/LoginLayout/PageFooter.vue → ...ts/LoginLayout/ComplexView/PageFooter.vue
diff --git a/.../src/layouts/LoginLayout/indexComplex.vue → ...layouts/LoginLayout/ComplexView/index.vue b/.../src/layouts/LoginLayout/indexComplex.vue → ...layouts/LoginLayout/ComplexView/index.vue
@@ -2,8 +2,6 @@
     <q-layout style="overflow-x: hidden">
         <q-page-container>
             <page-banner />
-            <!-- <GqaScrollDown id="login-layout-scroll-down" class="login-layout-scroll-down"
-                v-if="pluginCurrent && pluginComponent && showScrollDown" @click="scrollDown" /> -->
             <component v-if="pluginCurrent && pluginComponent" :key="pluginCurrent" :is="pluginComponent" />
             <q-card v-else class="row items-center justify-center" style="padding: 20px 0;">
                 <q-btn color="primary" :label="$t('LoginLayoutWithoutPlugin')"></q-btn>
@@ -20,7 +18,6 @@
 import { ref, onUnmounted, onBeforeMount, toRefs } from 'vue';
 import PageBanner from './PageBanner.vue'
 import PageFooter from './PageFooter.vue'
-import GqaScrollDown from 'src/components/GqaScrollDown/index.vue'
 
 const props = defineProps({
     pluginComponent: {
@@ -43,12 +40,6 @@ onUnmounted(() => {
     window.removeEventListener('scroll', documentTop())
 })
 
-const scrollDown = () => {
-    document.getElementById('login-layout-scroll-down').nextElementSibling.scrollIntoView({
-        behavior: 'smooth',
-    })
-}
-
 const documentTop = () => {
     let top = document.documentElement.scrollTop
     if (top > 200) {

diff --git a/...ND/src/layouts/LoginLayout/InitDbForm.vue → .../layouts/LoginLayout/InitDbView/index.vue b/...ND/src/layouts/LoginLayout/InitDbForm.vue → .../layouts/LoginLayout/InitDbView/index.vue
@@ -108,6 +108,7 @@
     </div>
 </template>
 
+
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 import { useQuasar } from 'quasar'
@@ -175,4 +176,4 @@ const checkDb = async () => {
         }
     }
 }
-</script>
+</script>
diff --git a/GQA-FRONTEND/src/layouts/LoginLayout/LoginDialog.vue b/GQA-FRONTEND/src/layouts/LoginLayout/LoginDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <q-dialog v-model="loginVisible">
-        <q-card bordered style="width: 800px; max-width: 50vw;">
+        <q-card bordered style="width: 1000px; max-width: 50vw;">
             <q-card-section horizontal>
                 <q-img class="col-6" :src="bannerImage" fit="cover" />
                 <LoginForm class="col-6" />
@@ -16,12 +16,12 @@ import { ref, computed } from 'vue';
 
 const { gqaFrontend } = useCommon()
 const loginVisible = ref(false);
-const randomImg = 'https://api.ixiaowai.cn/api/api.php'
+
 const bannerImage = computed(() => {
     if (gqaFrontend.value.bannerImage && gqaFrontend.value.bannerImage.substring(0, 11) === 'gqa-upload:') {
         return process.env.API + gqaFrontend.value.bannerImage.substring(11)
     }
-    return randomImg
+    return "/img/sky.jpg"
 })
 
 const show = () => {
@@ -32,6 +32,3 @@ defineExpose({
     show
 })
 </script>
-
-<style lang="scss" scoped>
-</style>