Complate login page

package.json

@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "animate.css": "^3.7.0",
     "ant-design-vue": "~1.3.7",
     "axios": "^0.18.0",
     "enquire.js": "^2.1.6",

src/config/router.config.js

@@ -191,10 +191,12 @@ export const constantRouterMap = [
       }
     ]
   },
-
+  {
+    path: '/login',
+    component: () => import('@/views/user/Login')
+  },
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   }
-
 ]

src/main.js

@@ -9,10 +9,12 @@ import './core/use'
 import bootstrap from './core/bootstrap'
 // import '@/permission' // permission control
 import '@/utils/filter' // global filter
+import animated from 'animate.css'
 
 Vue.config.productionTip = false
 
 Vue.use(router)
+Vue.use(animated)
 
 new Vue({
   router,

src/views/attachment/AttachmentList.vue

@@ -1,20 +1,118 @@
 <template>
   <div class="page-header-index-wide">
-    <a-card title="Card Title">
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
-      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
+    <a-row :gutter="12" type="flex" align="middle">
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
         </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+      <a-col
+        class="attachment-item"
+        :xl="4"
+        :lg="4"
+        :md="12"
+        :sm="12"
+        :xs="24"
+      >
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img :src="src" slot="cover" />
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      src: 'https://cdn.ryanc.cc/img/blog/thumbnails/c86b59623c4a9bfeac403824dec3a789.jpg'
+    }
+  }
+}
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+.attachment-item {
+  padding-bottom: 12px;
+}
 </style>

src/views/user/Login.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="container loginForm">
+    <div class="loginLogo animated fadeInUp">
+      Halo
+    </div>
+    <div class="loginBody animated">
+      <a-form layout="vertical">
+        <a-form-item class="animated fadeInUp" :style="{'animation-delay': '0.1s'}">
+          <a-input placeholder="用户名/邮箱"></a-input>
+        </a-form-item>
+        <a-form-item class="animated fadeInUp" :style="{'animation-delay': '0.2s'}">
+          <a-input type="password" placeholder="密码"></a-input>
+        </a-form-item>
+        <a-form-item class="animated fadeInUp" :style="{'animation-delay': '0.3s'}">
+          <a-button type="primary" block="true">登录</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  beforeCreate() {
+    this.form = this.$form.createForm(this)
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+body {
+  background-color: #f5f5f5;
+}
+* {
+  outline: 0;
+}
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.loginForm {
+  max-width: 380px;
+  margin-top: 10%;
+}
+.loginLogo {
+  font-size: 56px;
+  text-align: center;
+  margin-bottom: 25px;
+  font-weight: 500;
+  color: #444;
+  text-shadow: #b2baba 0.1em 0.1em 0.2em;
+}
+.loginBody {
+  padding: 20px;
+  background-color: #fff;
+  -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
+}
+</style>