feat(login): add login view footer

src/pages/user/Login/index.less

@@ -6,11 +6,121 @@
   height: 100vh;
   overflow: auto;
   background: @layout-body-background;
-}
 
-.left {
-  width: 27%;
-  background: #fff;
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 27%;
+    background: #fff;
+
+    :global(.ant-layout-footer) {
+      background: #fff;
+    }
+
+    .lang {
+      width: 100%;
+      height: 40px;
+      line-height: 44px;
+      text-align: right;
+
+      :global(.ant-dropdown-trigger) {
+        margin-right: 24px;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: center;
+
+      .top {
+        width: 100%;
+        text-align: center;
+
+        .header {
+          height: 44px;
+          line-height: 44px;
+
+          a {
+            text-decoration: none;
+          }
+
+          .logo {
+            height: 44px;
+            margin-right: 16px;
+            vertical-align: top;
+          }
+
+          .title {
+            position: relative;
+            top: 2px;
+            color: @heading-color;
+            font-weight: 600;
+            font-size: 33px;
+            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+          }
+        }
+
+        .desc {
+          margin-top: 12px;
+          margin-bottom: 40px;
+          color: @text-color-secondary;
+          font-size: @font-size-base;
+        }
+
+        .main {
+          width: 328px;
+          margin: 60px auto 0;
+          @media screen and (max-width: @screen-sm) {
+            width: 95%;
+            max-width: 328px;
+          }
+
+          :global {
+            .@{ant-prefix}-tabs-nav-list {
+              margin: auto;
+              font-size: 16px;
+            }
+          }
+
+          .icon {
+            margin-left: 16px;
+            color: rgba(0, 0, 0, 0.2);
+            font-size: 24px;
+            vertical-align: middle;
+            cursor: pointer;
+            transition: color 0.3s;
+
+            &:hover {
+              color: @primary-color;
+            }
+          }
+
+          .other {
+            margin-top: 24px;
+            line-height: 22px;
+            text-align: left;
+
+            .register {
+              float: right;
+            }
+          }
+
+          .prefixIcon {
+            color: @primary-color;
+            font-size: @font-size-base;
+          }
+
+          .remember {
+            display: flex;
+            flex-direction: row;
+            margin-bottom: 30px;
+          }
+        }
+      }
+    }
+  }
 }
 
 .right {
@@ -53,30 +163,6 @@
   }
 }
 
-.lang {
-  width: 100%;
-  height: 40px;
-  line-height: 44px;
-  text-align: right;
-
-  :global(.ant-dropdown-trigger) {
-    margin-right: 24px;
-  }
-}
-
-.content {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: center;
-  padding: 40px 0;
-}
-
-.remember {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 30px;
-}
-
 @media (min-width: @screen-md-min) {
   .container {
     //background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
@@ -89,89 +175,3 @@
     padding: 32px 0 24px;
   }
 }
-
-.top {
-  width: 100%;
-  margin-top: 100px;
-  text-align: center;
-
-  .footer {
-    position: absolute;
-    bottom: 0;
-  }
-}
-
-.header {
-  height: 44px;
-  line-height: 44px;
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.logo {
-  height: 44px;
-  margin-right: 16px;
-  vertical-align: top;
-}
-
-.title {
-  position: relative;
-  top: 2px;
-  color: @heading-color;
-  font-weight: 600;
-  font-size: 33px;
-  font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
-}
-
-.desc {
-  margin-top: 12px;
-  margin-bottom: 40px;
-  color: @text-color-secondary;
-  font-size: @font-size-base;
-}
-
-.main {
-  width: 328px;
-  margin: 60px auto 0;
-  @media screen and (max-width: @screen-sm) {
-    width: 95%;
-    max-width: 328px;
-  }
-
-  :global {
-    .@{ant-prefix}-tabs-nav-list {
-      margin: auto;
-      font-size: 16px;
-    }
-  }
-
-  .icon {
-    margin-left: 16px;
-    color: rgba(0, 0, 0, 0.2);
-    font-size: 24px;
-    vertical-align: middle;
-    cursor: pointer;
-    transition: color 0.3s;
-
-    &:hover {
-      color: @primary-color;
-    }
-  }
-
-  .other {
-    margin-top: 24px;
-    line-height: 22px;
-    text-align: left;
-
-    .register {
-      float: right;
-    }
-  }
-
-  .prefixIcon {
-    color: @primary-color;
-    font-size: @font-size-base;
-  }
-}

src/pages/user/Login/index.tsx

@@ -13,6 +13,7 @@ import { useModel } from '@@/plugin-model/useModel';
 import SystemConst from '@/utils/const';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { SelectLang } from '@@/plugin-locale/SelectLang';
+import Footer from '@/components/Footer';
 
 /** 此方法会跳转到 redirect 参数所在的位置 */
 const goto = () => {
@@ -179,7 +180,6 @@ const Login: React.FC = () => {
                         loginRef.current.expires = e.target.checked ? -1 : 3600000;
                       }}
                     >
-                      {' '}
                       记住密码
                     </Checkbox>
                   </div>
@@ -193,6 +193,9 @@ const Login: React.FC = () => {
               </div>
             </div>
           </div>
+          <div>
+            <Footer />
+          </div>
         </div>
         <div className={styles.right}>
           <div className={styles.systemName}>{SystemConst.SYSTEM_NAME}</div>