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

src/config/router.config.js

@@ -1,341 +1,370 @@
-// eslint-disable-next-line
-import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
-
-export const asyncRouterMap = [
-
-  {
-    path: '/',
-    name: 'index',
-    component: BasicLayout,
-    meta: { title: '首页' },
-    redirect: '/dashboard/workplace',
-    children: [
-      // dashboard
-      {
-        path: '/dashboard',
-        name: 'dashboard',
-        redirect: '/dashboard/workplace',
-        component: RouteView,
-        meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
-        children: [
-          {
-            path: '/dashboard/analysis',
-            name: 'Analysis',
-            component: () => import('@/views/dashboard/Analysis'),
-            meta: { title: '分析页', permission: [ 'dashboard' ] }
-          },
-          {
-            path: '/dashboard/monitor',
-            name: 'Monitor',
-            hidden: true,
-            component: () => import('@/views/dashboard/Monitor'),
-            meta: { title: '监控页', permission: [ 'dashboard' ] }
-          },
-          {
-            path: '/dashboard/workplace',
-            name: 'Workplace',
-            component: () => import('@/views/dashboard/Workplace'),
-            meta: { title: '工作台', permission: [ 'dashboard' ] }
-          }
-        ]
-      },
-
-      // forms
-      {
-        path: '/form',
-        redirect: '/form/basic-form',
-        component: PageView,
-        meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
-        children: [
-          {
-            path: '/form/base-form',
-            name: 'BaseForm',
-            component: () => import('@/views/form/BasicForm'),
-            meta: { title: '基础表单', permission: [ 'form' ] }
-          },
-          {
-            path: '/form/step-form',
-            name: 'StepForm',
-            component: () => import('@/views/form/stepForm/StepForm'),
-            meta: { title: '分步表单', permission: [ 'form' ] }
-          },
-          {
-            path: '/form/advanced-form',
-            name: 'AdvanceForm',
-            component: () => import('@/views/form/advancedForm/AdvancedForm'),
-            meta: { title: '高级表单', permission: [ 'form' ] }
-          }
-        ]
-      },
-
-      // list
-      {
-        path: '/list',
-        name: 'list',
-        component: PageView,
-        redirect: '/list/query-list',
-        meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
-        children: [
-          {
-            path: '/list/query-list',
-            name: 'QueryList',
-            component: () => import('@/views/list/TableList'),
-            meta: { title: '查询表格', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/edit-table',
-            name: 'EditList',
-            component: () => import('@/views/list/TableInnerEditList'),
-            meta: { title: '内联编辑表格', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/user-list',
-            name: 'UserList',
-            component: () => import('@/views/list/UserList'),
-            meta: { title: '用户列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/role-list',
-            name: 'RoleList',
-            component: () => import('@/views/list/RoleList'),
-            meta: { title: '角色列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/system-role',
-            name: 'SystemRole',
-            component: () => import('@/views/role/RoleList'),
-            meta: { title: '角色列表2', permission: [ 'table' ]}
-          },
-          {
-            path: '/list/permission-list',
-            name: 'PermissionList',
-            component: () => import('@/views/list/PermissionList'),
-            meta: { title: '权限列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/basic-list',
-            name: 'BasicList',
-            component: () => import('@/views/list/StandardList'),
-            meta: { title: '标准列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/card',
-            name: 'CardList',
-            component: () => import('@/views/list/CardList'),
-            meta: { title: '卡片列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/search',
-            name: 'SearchList',
-            component: () => import('@/views/list/search/SearchLayout'),
-            redirect: '/list/search/article',
-            meta: { title: '搜索列表', permission: [ 'table' ] },
-            children: [
-              {
-                path: '/list/search/article',
-                name: 'SearchArticles',
-                component: () => import('../views/list/TableList'),
-                meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
-              },
-              {
-                path: '/list/search/project',
-                name: 'SearchProjects',
-                component: () => import('../views/list/TableList'),
-                meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
-              },
-              {
-                path: '/list/search/application',
-                name: 'SearchApplications',
-                component: () => import('../views/list/TableList'),
-                meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
-              },
-            ]
-          },
-        ]
-      },
-
-      // profile
-      {
-        path: '/profile',
-        name: 'profile',
-        component: RouteView,
-        redirect: '/profile/basic',
-        meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
-        children: [
-          {
-            path: '/profile/basic',
-            name: 'ProfileBasic',
-            component: () => import('@/views/profile/basic/Index'),
-            meta: { title: '基础详情页', permission: [ 'profile' ] }
-          },
-          {
-            path: '/profile/advanced',
-            name: 'ProfileAdvanced',
-            component: () => import('@/views/profile/advanced/Advanced'),
-            meta: { title: '高级详情页', permission: [ 'profile' ] }
-          }
-        ]
-      },
-
-      // result
-      {
-        path: '/result',
-        name: 'result',
-        component: PageView,
-        redirect: '/result/success',
-        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
-        children: [
-          {
-            path: '/result/success',
-            name: 'ResultSuccess',
-            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
-            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
-          },
-          {
-            path: '/result/fail',
-            name: 'ResultFail',
-            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
-            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
-          }
-        ]
-      },
-
-      // Exception
-      {
-        path: '/exception',
-        name: 'exception',
-        component: RouteView,
-        redirect: '/exception/403',
-        meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
-        children: [
-          {
-            path: '/exception/403',
-            name: 'Exception403',
-            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
-            meta: { title: '403', permission: [ 'exception' ] }
-          },
-          {
-            path: '/exception/404',
-            name: 'Exception404',
-            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
-            meta: { title: '404', permission: [ 'exception' ] }
-          },
-          {
-            path: '/exception/500',
-            name: 'Exception500',
-            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
-            meta: { title: '500', permission: [ 'exception' ] }
-          }
-        ]
-      },
-
-      // account
-      {
-        path: '/account',
-        component: RouteView,
-        name: 'account',
-        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
-        children: [
-          {
-            path: '/account/center',
-            name: 'center',
-            component: () => import('@/views/account/center/Index'),
-            meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
-          },
-          {
-            path: '/account/settings',
-            name: 'settings',
-            component: () => import('@/views/account/settings/Index'),
-            meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ]  },
-            redirect: '/account/settings/base',
-            alwaysShow: true,
-            children: [
-              {
-                path: '/account/settings/base',
-                name: 'BaseSettings',
-                component: () => import('@/views/account/settings/BaseSetting'),
-                meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/security',
-                name: 'SecuritySettings',
-                component: () => import('@/views/account/settings/Security'),
-                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/custom',
-                name: 'CustomSettings',
-                component: () => import('@/views/account/settings/Custom'),
-                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/binding',
-                name: 'BindingSettings',
-                component: () => import('@/views/account/settings/Binding'),
-                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/notification',
-                name: 'NotificationSettings',
-                component: () => import('@/views/account/settings/Notification'),
-                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-            ]
-          },
-        ]
-      }
-    ]
-  },
-  {
-    path: '*', redirect: '/404', hidden: true
-  }
-]
-
-/**
- * 基础路由
- * @type { *[] }
- */
-export const constantRouterMap = [
-  {
-    path: '/user',
-    component: UserLayout,
-    redirect: '/user/login',
-    hidden: true,
-    children: [
-      {
-        path: 'login',
-        name: 'login',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
-      },
-      {
-        path: 'register',
-        name: 'register',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
-      },
-      {
-        path: 'register-result',
-        name: 'registerResult',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
-      }
-    ]
-  },
-
-  {
-    path: '/test',
-    component: BlankLayout,
-    redirect: '/test/home',
-    children: [
-      {
-        path: 'home',
-        name: 'TestHome',
-        component: () => import('@/views/Home')
-      }
-    ]
-  },
-
-  {
-    path: '/404',
-    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
-  },
-
-]
+// eslint-disable-next-line
+import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
+
+export const asyncRouterMap = [
+
+  {
+    path: '/',
+    name: 'index',
+    component: BasicLayout,
+    meta: { title: '首页' },
+    redirect: '/dashboard/workplace',
+    children: [
+      // dashboard
+      {
+        path: '/dashboard',
+        name: 'dashboard',
+        redirect: '/dashboard/workplace',
+        component: RouteView,
+        meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
+        children: [
+          {
+            path: '/dashboard/analysis',
+            name: 'Analysis',
+            component: () => import('@/views/dashboard/Analysis'),
+            meta: { title: '分析页', permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/dashboard/monitor',
+            name: 'Monitor',
+            hidden: true,
+            component: () => import('@/views/dashboard/Monitor'),
+            meta: { title: '监控页', permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/dashboard/workplace',
+            name: 'Workplace',
+            component: () => import('@/views/dashboard/Workplace'),
+            meta: { title: '工作台', permission: [ 'dashboard' ] }
+          }
+        ]
+      },
+
+      // forms
+      {
+        path: '/form',
+        redirect: '/form/basic-form',
+        component: PageView,
+        meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
+        children: [
+          {
+            path: '/form/base-form',
+            name: 'BaseForm',
+            component: () => import('@/views/form/BasicForm'),
+            meta: { title: '基础表单', permission: [ 'form' ] }
+          },
+          {
+            path: '/form/step-form',
+            name: 'StepForm',
+            component: () => import('@/views/form/stepForm/StepForm'),
+            meta: { title: '分步表单', permission: [ 'form' ] }
+          },
+          {
+            path: '/form/advanced-form',
+            name: 'AdvanceForm',
+            component: () => import('@/views/form/advancedForm/AdvancedForm'),
+            meta: { title: '高级表单', permission: [ 'form' ] }
+          }
+        ]
+      },
+
+      // list
+      {
+        path: '/list',
+        name: 'list',
+        component: PageView,
+        redirect: '/list/query-list',
+        meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
+        children: [
+          {
+            path: '/list/query-list',
+            name: 'QueryList',
+            component: () => import('@/views/list/TableList'),
+            meta: { title: '查询表格', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/edit-table',
+            name: 'EditList',
+            component: () => import('@/views/list/TableInnerEditList'),
+            meta: { title: '内联编辑表格', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/user-list',
+            name: 'UserList',
+            component: () => import('@/views/list/UserList'),
+            meta: { title: '用户列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/role-list',
+            name: 'RoleList',
+            component: () => import('@/views/list/RoleList'),
+            meta: { title: '角色列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/system-role',
+            name: 'SystemRole',
+            component: () => import('@/views/role/RoleList'),
+            meta: { title: '角色列表2', permission: [ 'table' ]}
+          },
+          {
+            path: '/list/permission-list',
+            name: 'PermissionList',
+            component: () => import('@/views/list/PermissionList'),
+            meta: { title: '权限列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/basic-list',
+            name: 'BasicList',
+            component: () => import('@/views/list/StandardList'),
+            meta: { title: '标准列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/card',
+            name: 'CardList',
+            component: () => import('@/views/list/CardList'),
+            meta: { title: '卡片列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/search',
+            name: 'SearchList',
+            component: () => import('@/views/list/search/SearchLayout'),
+            redirect: '/list/search/article',
+            meta: { title: '搜索列表', permission: [ 'table' ] },
+            children: [
+              {
+                path: '/list/search/article',
+                name: 'SearchArticles',
+                component: () => import('../views/list/TableList'),
+                meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
+              },
+              {
+                path: '/list/search/project',
+                name: 'SearchProjects',
+                component: () => import('../views/list/TableList'),
+                meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
+              },
+              {
+                path: '/list/search/application',
+                name: 'SearchApplications',
+                component: () => import('../views/list/TableList'),
+                meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
+              },
+            ]
+          },
+        ]
+      },
+
+      // profile
+      {
+        path: '/profile',
+        name: 'profile',
+        component: RouteView,
+        redirect: '/profile/basic',
+        meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
+        children: [
+          {
+            path: '/profile/basic',
+            name: 'ProfileBasic',
+            component: () => import('@/views/profile/basic/Index'),
+            meta: { title: '基础详情页', permission: [ 'profile' ] }
+          },
+          {
+            path: '/profile/advanced',
+            name: 'ProfileAdvanced',
+            component: () => import('@/views/profile/advanced/Advanced'),
+            meta: { title: '高级详情页', permission: [ 'profile' ] }
+          }
+        ]
+      },
+
+      // result
+      {
+        path: '/result',
+        name: 'result',
+        component: PageView,
+        redirect: '/result/success',
+        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
+        children: [
+          {
+            path: '/result/success',
+            name: 'ResultSuccess',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
+            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
+          },
+          {
+            path: '/result/fail',
+            name: 'ResultFail',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
+            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
+          }
+        ]
+      },
+
+      // Exception
+      {
+        path: '/exception',
+        name: 'exception',
+        component: RouteView,
+        redirect: '/exception/403',
+        meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
+        children: [
+          {
+            path: '/exception/403',
+            name: 'Exception403',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
+            meta: { title: '403', permission: [ 'exception' ] }
+          },
+          {
+            path: '/exception/404',
+            name: 'Exception404',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
+            meta: { title: '404', permission: [ 'exception' ] }
+          },
+          {
+            path: '/exception/500',
+            name: 'Exception500',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
+            meta: { title: '500', permission: [ 'exception' ] }
+          }
+        ]
+      },
+
+      // account
+      {
+        path: '/account',
+        component: RouteView,
+        name: 'account',
+        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
+        children: [
+          {
+            path: '/account/center',
+            name: 'center',
+            component: () => import('@/views/account/center/Index'),
+            meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
+          },
+          {
+            path: '/account/settings',
+            name: 'settings',
+            component: () => import('@/views/account/settings/Index'),
+            meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ]  },
+            redirect: '/account/settings/base',
+            alwaysShow: true,
+            children: [
+              {
+                path: '/account/settings/base',
+                name: 'BaseSettings',
+                component: () => import('@/views/account/settings/BaseSetting'),
+                meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/security',
+                name: 'SecuritySettings',
+                component: () => import('@/views/account/settings/Security'),
+                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/custom',
+                name: 'CustomSettings',
+                component: () => import('@/views/account/settings/Custom'),
+                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/binding',
+                name: 'BindingSettings',
+                component: () => import('@/views/account/settings/Binding'),
+                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/notification',
+                name: 'NotificationSettings',
+                component: () => import('@/views/account/settings/Notification'),
+                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+            ]
+          },
+        ]
+      },
+
+      // 扩展组件
+      {
+        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' }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '*', redirect: '/404', hidden: true
+  }
+]
+
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/user',
+    component: UserLayout,
+    redirect: '/user/login',
+    hidden: true,
+    children: [
+      {
+        path: 'login',
+        name: 'login',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
+      },
+      {
+        path: 'register',
+        name: 'register',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
+      },
+      {
+        path: 'register-result',
+        name: 'registerResult',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
+      }
+    ]
+  },
+  {
+    path: '/blocks',
+    component: RouteView,
+    children: [
+      {
+        path: 'login1',
+        name: 'login1',
+        component: () => import(/* webpackChunkName: "blocks" */ '@/views/blocks/login'),
+        meta: { title: 'Login' }
+      }
+    ]
+  },
+
+  {
+    path: '/test',
+    component: BlankLayout,
+    redirect: '/test/home',
+    children: [
+      {
+        path: 'home',
+        name: 'TestHome',
+        component: () => import('@/views/Home')
+      }
+    ]
+  },
+
+  {
+    path: '/404',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
+  },
+
+]

src/views/blocks/login/LoginForm.vue

@@ -0,0 +1,103 @@
+<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>

src/views/blocks/login/LoginIntro.vue

@@ -0,0 +1,48 @@
+<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>

src/views/blocks/login/index.vue

@@ -0,0 +1,40 @@
+<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>