From da24caf4c42935e3b2b001e0307bf5391648bea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Mon, 22 Jan 2018 00:04:39 +0800
Subject: [PATCH] no message

Former-commit-id: 7aa8f366ef880ea13096cbef9b91d049dcdb20a0
Former-commit-id: 14bbcaa524412baed2e9ae04c7dbf42cd1c0b228
Former-commit-id: 7c9aa33bd00c573e4d9a2b19ed2917dba41a484e
---
 .../image/logo/index@3x.png.REMOVED.git-id    |  1 -
 src/assets/image/logo/w500.png.REMOVED.git-id |  1 +
 src/pages/core/login/index.vue                | 90 ++++++++++++++++++-
 3 files changed, 88 insertions(+), 4 deletions(-)
 delete mode 100644 src/assets/image/logo/index@3x.png.REMOVED.git-id
 create mode 100644 src/assets/image/logo/w500.png.REMOVED.git-id

diff --git a/src/assets/image/logo/index@3x.png.REMOVED.git-id b/src/assets/image/logo/index@3x.png.REMOVED.git-id
deleted file mode 100644
index 91b94d86..00000000
--- a/src/assets/image/logo/index@3x.png.REMOVED.git-id
+++ /dev/null
@@ -1 +0,0 @@
-183e2862510cac25d289c2d00765144d685eb6fa
\ No newline at end of file
diff --git a/src/assets/image/logo/w500.png.REMOVED.git-id b/src/assets/image/logo/w500.png.REMOVED.git-id
new file mode 100644
index 00000000..4972fb06
--- /dev/null
+++ b/src/assets/image/logo/w500.png.REMOVED.git-id
@@ -0,0 +1 @@
+a6df8e4324acd50c885bf16a4eddfe9895775dc7
\ No newline at end of file
diff --git a/src/pages/core/login/index.vue b/src/pages/core/login/index.vue
index 04a32272..7d9f9e53 100644
--- a/src/pages/core/login/index.vue
+++ b/src/pages/core/login/index.vue
@@ -1,8 +1,41 @@
 <template>
   <div class="login-page">
     <div class="layer bg" id="login"></div>
-    <div class="layer">
-      <el-card class="form-group"></el-card>
+    <div class="layer flex-center">
+      <div class="logo-group">
+        <img src="@/assets/image/logo/w500.png" alt="logo">
+      </div>
+      <div class="form-group">
+        <el-card>
+          <el-form
+            ref="loginForm"
+            label-position="top"
+            :rules="rules"
+            :model="formLogin">
+            <el-form-item  prop="username">
+              <el-input
+                type="text"
+                v-model="formLogin.username"
+                placeholder="用户名">
+                <i slot="prepend" class="fa fa-user-circle-o"></i>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                type="password"
+                v-model="formLogin.password"
+                placeholder="密码">
+                <i slot="prepend" class="fa fa-keyboard-o"></i>
+              </el-input>
+            </el-form-item>
+            <el-button @click="submit" type="primary" class="button-login">登陆</el-button>
+          </el-form>
+        </el-card>
+        <el-button type="info" class="button-help">
+          需要帮助
+          <i class="fa fa-question-circle"></i>
+        </el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -14,8 +47,36 @@ require('particles.js')
 // https://vincentgarreau.com/particles.js/#default
 import config from './config/default'
 export default {
+  data () {
+    return {
+      formLogin: {
+        username: '',
+        password: ''
+      },
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
   mounted () {
     particlesJS('login', config)
+  },
+  methods: {
+    submit () {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      })
+    }
   }
 }
 </script>
@@ -30,10 +91,33 @@ export default {
     position: absolute;
     height: 100%;
     width: 100%;
+    &.flex-center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+  }
+  // logo
+  .logo-group {
+    margin-top: -100px;
+    img {
+      width: 100px;
+    }
   }
   // 登陆表单
   .form-group {
-    box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+    width: 300px;
+    .el-card {
+      box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+    }
+    .button-login {
+      width: 100%;
+    }
+  }
+  .button-help {
+    width: calc(100% - 40px);
+    margin: 20px;
   }
   // 背景
   .bg {