feat: add login-form from https://alibaba.github.io/ice/block/login-form?type=react

src/config/router.config.js

@@ -283,6 +283,23 @@ export const asyncRouterMap = [
             ]
           },
         ]
+      },
+
+      // 扩展组件
+      {
+        path: '/views/blocks',
+        name: 'viewsBlocks',
+        component: RouteView,
+        redirect: '/views/blocks/login1',
+        meta: { title: '扩展组件', icon: 'share-alt' },
+        children: [
+          {
+            path: '/login1',
+            name: 'login1',
+            component: () => import(/* webpackChunkName: "blocks" */ '@/views/blocks/login'),
+            meta: { title: 'Login' }
+          }
+        ]
       }
     ]
   },
@@ -319,6 +336,18 @@ export const constantRouterMap = [
       }
     ]
   },
+  {
+    path: '/blocks',
+    component: RouteView,
+    children: [
+      {
+        path: 'login1',
+        name: 'login1',
+        component: () => import(/* webpackChunkName: "blocks" */ '@/views/blocks/login'),
+        meta: { title: 'Login' }
+      }
+    ]
+  },
 
   {
     path: '/test',

src/views/blocks/login/LoginForm.vue

+<template>
+  <div class="form-container">
+    <div>
+      <h4 class="title">登录</h4>
+      <a-form :form="form" @submit="handleSubmit" class="form-items">
+        <a-form-item>
+          <a-input 
+            class="custom-input"
+            placeholder="Username" 
+            v-decorator="[ 'username', { rules: [{ required: true, message: 'Please input your username!' }] }]"
+          >
+            <a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
+          </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-input 
+            class="custom-input"
+            placeholder="Password" 
+            v-decorator="[ 'password', { rules: [{ required: true, message: 'Please input your password!' }] }]"
+          >
+            <a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
+          </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-checkbox
+            v-decorator="[
+              'remember',
+              {
+                valuePropName: 'checked',
+                initialValue: true,
+              }
+            ]"
+          >
+            Remember me
+          </a-checkbox>
+          <a class='login-form-forgot' href='javascript:;' style="float: right;">Forgot password</a>
+          <a-button type="primary" htmlType="submit" block style="border-radius: 30px;">登录</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginForm',
+  data () {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        if (!errors) {
+          console.log('values', values)
+          return
+        }
+        console.log('err', errors)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .form-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100vh;
+    background: rgb(255, 255, 255);
+
+    .title {
+      margin-bottom: 40px;
+      font-weight: 500;
+      font-size: 32px;
+      text-align: center;
+      letter-spacing: 4px;
+    }
+    .form-items {
+      width: 320px;
+
+      .custom-input {
+        &:hover {
+          border-color: transparent;
+        }
+
+         /deep/
+        input {
+          border-radius: 0px;
+          border-top: 0px rgb(235, 237, 242);
+          border-left: 0px rgb(235, 237, 242);
+          border-right: 0px rgb(235, 237, 242);
+          border-bottom-color: rgb(235, 237, 242);
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file

src/views/blocks/login/LoginIntro.vue

+<template>
+  <div class="container">
+    <div class="logo">
+      <router-link :to="{ name: 'login' }">
+        <img src="~@/assets/logo.svg" alt="logo">
+      </router-link>
+    </div>
+    <div class="title">让前端开发简单友好</div>
+    <p class="description">Amazing Stuff is Lorem Here.ICE Team</p>
+    <a-button class="button" ghost style="border-radius: 30px; width: 120px">注册</a-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'LoginIntro'
+  }
+</script>
+
+<style lang="less" scoped>
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 100vh;
+
+    .logo {
+      img {
+        width: 60px;
+      }
+    }
+    .title {
+      margin-top: 50px;
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 1.5;
+      text-align: center;
+      color: #fff;
+    }
+    .description {
+      margin-top: 30px;
+      font-size: 13px;
+      color: #fff;
+    }
+  }
+</style>
\ No newline at end of file

src/views/blocks/login/index.vue

+<template>
+  <div class="login-form">
+    <a-row :gutter="0">
+      <a-col :xl="12" :sm="24">
+        <login-intro />
+      </a-col>
+      <a-col :xl="12" :sm="24" class="content">
+        <login-form />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import LoginIntro from './LoginIntro'
+import LoginForm from './LoginForm'
+export default {
+  components: {
+    LoginIntro,
+    LoginForm
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .login-form {
+    position: relative;
+    width: 100wh;
+    height: 100vh;
+    background-image: url("./bg.jpg");
+
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      background: #fff;
+    }
+  }
+</style>
\ No newline at end of file