diff --git a/src/assets/background.jpg b/src/assets/background.jpg
new file mode 100644
index 00000000..10141832
Binary files /dev/null and b/src/assets/background.jpg differ
diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts
index a9112929..76842e5e 100644
--- a/src/store/modules/layout.ts
+++ b/src/store/modules/layout.ts
@@ -41,8 +41,8 @@ const proConfigLocal: LayoutStore['proConfig'] = localGetJSON(
   CACHE_LOCAL_PROCONFIG
 ) || {
   layout: 'mix',
-  headerTheme: 'dark',
-  navTheme: 'dark',
+  headerTheme: 'light',
+  navTheme: 'light',
   fixSiderbar: true,
   fixedHeader: true,
   splitMenus: true,
diff --git a/src/views/login.vue b/src/views/login.vue
index 8a817201..1adac691 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -136,6 +136,16 @@ onMounted(() => {
 function fnChangeLocale(e: any) {
   changeLocale(e.key);
 }
+
+/**系统使用手册跳转 */
+function fnClickHelpDoc(language?: string) {
+  const routeData = router.resolve({ name: 'HelpDoc' });
+  let href = routeData.href;
+  if (language) {
+    href = `${routeData.href}?language=${language}`;
+  }
+  window.open(href, '_blank');
+}
 </script>
 
 <template>
@@ -149,13 +159,32 @@ function fnChangeLocale(e: any) {
     </section>
 
     <header class="header">
-      <template v-if="appStore.logoType === 'icon'">
-        <img :src="logoUrl" class="logo-icon" :alt="appStore.appName" />
-        <span class="title">{{ appStore.appName }}</span>
-      </template>
-      <template v-if="appStore.logoType === 'brand'">
-        <img :src="logoUrl" class="logo-brand" :alt="appStore.appName" />
-      </template>
+      <div class="header-left">
+        <template v-if="appStore.logoType === 'icon'">
+          <img :src="logoUrl" class="logo-icon" :alt="appStore.appName" />
+          <span class="title">{{ appStore.appName }}</span>
+        </template>
+        <template v-if="appStore.logoType === 'brand'">
+          <img :src="logoUrl" class="logo-brand" :alt="appStore.appName" />
+        </template>
+      </div>
+      <div class="header-right">
+        <a-space direction="horizontal" :size="8">
+          <a-button
+            type="link"
+            :href="appStore.officialUrl"
+            target="_blank"
+            size="small"
+            v-if="appStore.officialUrl !== '#'"
+          >
+            {{ t('loayouts.basic.officialUrl') }}
+          </a-button>
+
+          <a-button type="link" size="small" @click="fnClickHelpDoc()">
+            {{ t('loayouts.basic.helpDoc') }}
+          </a-button>
+        </a-space>
+      </div>
     </header>
 
     <a-card :bordered="false" class="login-card">
@@ -237,7 +266,7 @@ function fnChangeLocale(e: any) {
             <a-image
               :alt="t('valid.codeHit')"
               style="cursor: pointer; border-radius: 2px"
-              width="120px"
+              width="100px"
               height="40px"
               :preview="false"
               :src="state.captcha.codeImg"
@@ -313,7 +342,13 @@ function fnChangeLocale(e: any) {
   min-height: 100%;
   padding-top: 164px;
 
-  background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
+  // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
+
+  background-image: url(./../assets/background.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+
   .animation {
     position: absolute;
     width: 6px;
@@ -338,7 +373,7 @@ function fnChangeLocale(e: any) {
     }
     &.animation4 {
       left: 68%;
-      top: 55%;
+      top: 68%;
       animation: slashStar 2s ease-in-out 0.8s infinite;
     }
     &.animation5 {
@@ -363,19 +398,21 @@ function fnChangeLocale(e: any) {
   top: 0;
   width: 100%;
   z-index: 1000;
-  background-color: transparent;
-  padding: 16px;
+  background-color: rgb(255 255 255 / 85%);
+  padding: 0 16px;
   display: flex;
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
 
   .logo-icon {
-    height: 48px;
-    width: 48px;
-    margin-right: 16px;
+    height: 40px;
+    width: 40px;
+    margin-right: 14px;
     vertical-align: top;
     border-style: none;
     border-radius: 6.66px;
+    margin-top: 4px;
+    margin-bottom: 4px;
   }
   .logo-brand {
     height: 48px;
@@ -386,10 +423,10 @@ function fnChangeLocale(e: any) {
   }
   .title {
     position: relative;
-    top: 2px;
-    color: #fff;
+    top: 6px;
+    color: rgba(0, 0, 0, 0.85);
     font-weight: 600;
-    font-size: 28px;
+    font-size: 24px;
     font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   }
 }
@@ -398,6 +435,7 @@ function fnChangeLocale(e: any) {
   width: 368px;
   min-width: 260px;
   margin: 0 auto;
+  margin-left: 60%;
   border-radius: 4px;
 
   & .desc {
@@ -413,17 +451,25 @@ function fnChangeLocale(e: any) {
   }
 }
 
+@media (max-width: 992px) {
+  .login-card {
+    margin: 0 auto;
+  }
+}
+
 .footer {
   position: absolute;
   bottom: 0;
+  height: 36px;
+  padding: 8px 16px 0;
+  text-align: left;
+  background-color: rgb(255 255 255 / 85%);
   width: 100%;
-  margin: 12px auto 30px;
-  text-align: center;
 
   &-copyright {
-    opacity: 0.8;
-    font-size: 16px;
-    color: #fff;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.75);
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   }
 }
 </style>