feat: 系统设置主要LOGO版权背景修改

src/views/login.vue

@@ -46,13 +46,6 @@ let state = reactive({
 /**表单验证通过 */
 function fnFinish() {
   state.fromClick = true;
-  // 账号密码登录
-  // let form = {
-  //   userName: state.from.username,
-  //   value: state.from.password,
-  //   grantType: 'password',
-  // };
-
   // 发送请求
   useUserStore()
     .fnLogin(toRaw(state.from))
@@ -96,6 +89,9 @@ function fnGetCaptcha() {
 
 onMounted(() => {
   fnGetCaptcha();
+  const container = document.getElementsByClassName('container').item(0);
+  if (container) {
+  }
 });
 
 /**改变多语言 */
@@ -105,19 +101,43 @@ function fnChangeLocale(e: any) {
 </script>
 
 <template>
-  <div class="container">
-    <div class="top">
-      <div class="header">
-        <a href="/" target="_self"
-          ><img src="@/assets/logo.png" class="logo" alt="logo" />
-          <span class="title">{{ t('common.title') }}</span>
-        </a>
+  <div
+    class="container"
+    :style="{
+      backgroundImage: `url(${appStore.getLoginBackground})`,
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+    }"
+  >
+    <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>
-      <div class="desc">{{ t('common.desc') }}</div>
-    </div>
-
-    <div class="main">
-      <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
+      <a-form
+        class="login-card__main"
+        :model="state.from"
+        name="stateFrom"
+        @finish="fnFinish"
+      >
         <a-form-item
           name="username"
           :rules="[
@@ -207,7 +227,7 @@ function fnChangeLocale(e: any) {
           align="middle"
           style="margin-bottom: 16px"
         >
-          <a-col :span="12">
+          <a-col :span="12" v-if="appStore.registerUser">
             <a-button
               type="link"
               target="_self"
@@ -251,70 +271,77 @@ function fnChangeLocale(e: any) {
           </a-col>
         </a-row>
       </a-form>
-    </div>
+    </a-card>
 
-    <GlobalFooter class="footer" :links="false" :copyright="appStore.copyright" />
+    <GlobalFooter
+      class="footer"
+      :links="false"
+      :copyright="appStore.copyright"
+    />
   </div>
 </template>
 
 <style lang="less" scoped>
+.login-card {
+  width: 368px;
+  min-width: 260px;
+  margin: 0 auto;
+  border-radius: 4px;
+  &__top {
+    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: 20px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+  &__main {
+    .prefix-icon {
+      color: #8c8c8c;
+      font-size: 16px;
+    }
+  }
+}
+
 .container {
   position: relative;
   width: 100%;
   min-height: 100%;
-  padding: 110px 0 144px;
+  padding-top: 150px;
   background-image: url(../assets/background.svg);
   background-repeat: no-repeat;
   background-position: center 110px;
   background-size: 100%;
 }
 
-.top {
-  text-align: center;
-
-  a {
-    text-decoration: none;
-  }
-
-  .header {
-    height: 44px;
-    line-height: 44px;
-    .logo {
-      height: 44px;
-      margin-right: 16px;
-      vertical-align: top;
-      border-style: none;
-      border-radius: 6.66px;
-    }
-    .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: 12px;
-    margin-bottom: 40px;
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 14px;
-  }
-}
-
-.main {
-  width: 368px;
-  min-width: 260px;
-  margin: 0 auto;
-
-  .prefix-icon {
-    color: #8c8c8c;
-    font-size: 16px;
-  }
-}
-
 .footer {
   position: absolute;
   bottom: 0;