style: 登录页面样式修改

src/store/modules/app.ts

@@ -1,7 +1,6 @@
 import { getSysConf } from '@/api';
 import defaultLOGOIcon from '@/assets/logo_icon.png';
 import defaultLOGOBrand from '@/assets/logo_brand.png';
-import defaultLoginBackground from '@/assets/background.svg';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { validHttp } from '@/utils/regular-utils';
 import { defineStore } from 'pinia';
@@ -80,7 +79,7 @@ const useAppStore = defineStore('app', {
     getLoginBackground(state) {
       const path = state.loginBackground;
       if (!path) {
-        return defaultLoginBackground;
+        return '';
       }
       if (validHttp(path)) {
         return path;

src/views/login.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { GlobalFooter } from '@ant-design-vue/pro-layout';
 import { message } from 'ant-design-vue/lib';
-import { reactive, onMounted } from 'vue';
+import { reactive, onMounted, computed } from 'vue';
 import useUserStore from '@/store/modules/user';
 import useAppStore from '@/store/modules/app';
 import { getCaptchaImage } from '@/api/login';
@@ -87,6 +86,19 @@ function fnGetCaptcha() {
   });
 }
 
+// 判断是否有背景地址
+const calcBG = computed(() => {
+  const bgURL = appStore.getLoginBackground;
+  if (bgURL) {
+    return {
+      backgroundImage: `url(${bgURL})`,
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+    };
+  }
+  return undefined
+});
+
 onMounted(() => {
   fnGetCaptcha();
   const container = document.getElementsByClassName('container').item(0);
@@ -101,43 +113,38 @@ function fnChangeLocale(e: any) {
 </script>
 
 <template>
-  <div
-    class="container"
-    :style="{
-      backgroundImage: `url(${appStore.getLoginBackground})`,
-      backgroundPosition: 'center',
-      backgroundSize: 'cover',
-    }"
-  >
+  <div class="container" :style="calcBG">
+    <section v-show="!calcBG">
+      <div class="animation animation1"></div>
+      <div class="animation animation2"></div>
+      <div class="animation animation3"></div>
+      <div class="animation animation4"></div>
+      <div class="animation animation5"></div>
+    </section>
+
+    <header class="header">
+      <template v-if="appStore.logoType === 'icon'">
+        <img
+          :src="appStore.getLOGOIcon"
+          class="logo-icon"
+          :alt="appStore.appName"
+        />
+        <span class="title">{{ appStore.appName }}</span>
+      </template>
+      <template v-if="appStore.logoType === 'brand'">
+        <img
+          :src="appStore.getLOGOBrand"
+          class="logo-brand"
+          :alt="appStore.appName"
+        />
+      </template>
+    </header>
+
     <a-card :bordered="false" class="login-card">
-      <div class="login-card__top">
-        <div class="header">
-          <template v-if="appStore.logoType === 'icon'">
-            <img
-              :src="appStore.getLOGOIcon"
-              class="logo-icon"
-              :alt="appStore.appName"
-            />
-            <span class="title">{{ appStore.appName }}</span>
-          </template>
-          <template v-if="appStore.logoType === 'brand'">
-            <img
-              :src="appStore.getLOGOBrand"
-              class="logo-brand"
-              :alt="appStore.appName"
-            />
-          </template>
-        </div>
-        <div class="desc">
-          {{ t('common.desc') }}
-        </div>
+      <div class="desc">
+        {{ t('common.desc') }}
       </div>
-      <a-form
-        class="login-card__main"
-        :model="state.from"
-        name="stateFrom"
-        @finish="fnFinish"
-      >
+      <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
         <a-form-item
           name="username"
           :rules="[
@@ -273,78 +280,128 @@ function fnChangeLocale(e: any) {
       </a-form>
     </a-card>
 
-    <GlobalFooter
-      class="footer"
-      :links="false"
-      :copyright="appStore.copyright"
-    />
+    <footer class="footer">
+      <div class="footer-copyright">Copyright ©2023 For AGrand 千通科技</div>
+    </footer>
   </div>
 </template>
 
 <style lang="less" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  padding-top: 164px;
+
+  background: url('https://nacos.io/img/black_dot.png') 0% 0% / 14px 14px repeat;
+  .animation {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #1be1f6;
+
+    &.animation1 {
+      left: 15%;
+      top: 70%;
+      animation: slashStar 2s ease-in-out 0.3s infinite;
+    }
+    &.animation2 {
+      left: 34%;
+      top: 35%;
+      animation: slashStar 2s ease-in-out 1.2s infinite;
+    }
+    &.animation3 {
+      left: 10%;
+      top: 8%;
+      animation: slashStar 2s ease-in-out 0.5s infinite;
+    }
+    &.animation4 {
+      left: 68%;
+      top: 55%;
+      animation: slashStar 2s ease-in-out 0.8s infinite;
+    }
+    &.animation5 {
+      left: 87%;
+      top: 30%;
+      animation: slashStar 2s ease-in-out 1.5s infinite;
+    }
+  }
+  @keyframes slashStar {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+.header {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  background-color: transparent;
+  padding: 16px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+
+  .logo-icon {
+    height: 48px;
+    margin-right: 16px;
+    vertical-align: top;
+    border-style: none;
+    border-radius: 6.66px;
+  }
+  .logo-brand {
+    height: 48px;
+    vertical-align: top;
+    border-style: none;
+    border-radius: 2px;
+  }
+  .title {
+    position: relative;
+    top: 2px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 28px;
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+  }
+}
+
 .login-card {
   width: 368px;
   min-width: 260px;
   margin: 0 auto;
   border-radius: 4px;
-  &__top {
+
+  & .desc {
     text-align: center;
-    .header {
-      height: 48px;
-      line-height: 48px;
-
-      .logo-icon {
-        height: 48px;
-        margin-right: 16px;
-        vertical-align: top;
-        border-style: none;
-        border-radius: 6.66px;
-      }
-      .logo-brand {
-        height: 48px;
-        vertical-align: top;
-        border-style: none;
-        border-radius: 2px;
-      }
-      .title {
-        position: relative;
-        top: 2px;
-        color: rgba(0, 0, 0, 0.85);
-        font-weight: 600;
-        font-size: 33px;
-        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      }
-    }
-
-    .desc {
-      margin-top: 14px;
-      margin-bottom: 28px;
-      color: #666;
-      font-size: 18px;
-    }
+    margin-bottom: 18px;
+    color: #666;
+    font-weight: 600;
+    font-size: 18px;
   }
-  &__main {
-    .prefix-icon {
-      color: #8c8c8c;
-      font-size: 16px;
-    }
+  & .prefix-icon {
+    color: #8c8c8c;
+    font-size: 16px;
   }
 }
 
-.container {
-  position: relative;
-  width: 100%;
-  min-height: 100%;
-  padding-top: 150px;
-  background-image: url(../assets/background.svg);
-  background-repeat: no-repeat;
-  background-position: center 110px;
-  background-size: 100%;
-}
-
 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
+  margin: 12px auto 30px;
+  text-align: center;
+
+  &-copyright {
+    opacity: 0.8;
+    font-size: 16px;
+    color: #fff;
+  }
 }
 </style>

src/views/system/setting/components/change-login-bg.vue

@@ -131,7 +131,9 @@ onMounted(() => {
             :before-upload="fnBeforeUpload"
             :custom-request="fnUpload"
           >
-            <a-button type="link" :loading="state.loading"> 上传背景 </a-button>
+            <a-button type="link" :disabled="state.loading">
+              上传背景
+            </a-button>
           </a-upload>
         </a-form-item>