diff --git a/vue-admin-wonderful-next/src/assets/bg-login.png b/vue-admin-wonderful-next/src/assets/bg-login.png
new file mode 100644
index 00000000..c7f85bef
Binary files /dev/null and b/vue-admin-wonderful-next/src/assets/bg-login.png differ
diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss
index 0e5ed34d..7df2cbe9 100644
--- a/vue-admin-wonderful-next/src/theme/app.scss
+++ b/vue-admin-wonderful-next/src/theme/app.scss
@@ -16,3 +16,36 @@ body,
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
 }
+
+@for $i from 10 through 32 {
+  .font#{$i} {
+    font-size: #{$i}px !important;
+  }
+}
+
+@for $i from 5 through 20 {
+  .mt#{$i} {
+    margin-top: #{$i}px !important;
+  }
+  .mr#{$i} {
+    margin-right: #{$i}px !important;
+  }
+  .mb#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+  .ml#{$i} {
+    margin-left: #{$i}px !important;
+  }
+  .pt#{$i} {
+    padding-top: #{$i}px !important;
+  }
+  .pr#{$i} {
+    padding-right: #{$i}px !important;
+  }
+  .pb#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+  .pl#{$i} {
+    padding-left: #{$i}px !important;
+  }
+}
diff --git a/vue-admin-wonderful-next/src/views/login/index.vue b/vue-admin-wonderful-next/src/views/login/index.vue
index 7bcf4435..90b3393f 100644
--- a/vue-admin-wonderful-next/src/views/login/index.vue
+++ b/vue-admin-wonderful-next/src/views/login/index.vue
@@ -1,3 +1,41 @@
 <template>
-  login
-</template>
\ No newline at end of file
+  <div class="login-container">
+    <div class="login-logo">
+      <img src="/@/assets/logo-web-element.svg" />
+    </div>
+    <div class="login-copyright">
+      <div class="mb5">版权所有：深圳市xxx软件科技有限公司</div>
+      <div>Copyright: Shenzhen XXX Software Technology Co. Ltd 粤ICP备05010000号</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "login",
+};
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  width: 100%;
+  height: 100%;
+  background: url("/@/assets/bg-login.png") no-repeat;
+  background-size: 100% 100%;
+  .login-logo {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+  }
+  .login-copyright {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 30px;
+    text-align: center;
+    color: white;
+    font-size: 12px;
+    opacity: 0.8;
+  }
+}
+</style>
\ No newline at end of file