更新

src/views/login.vue

@@ -13,7 +13,23 @@
         <el-col :span="24" class="main">
           <div class="w_1200">
             <el-col :span="24" class="info">
-              德鲁
+              <el-col :span="24" class="top">
+                登录
+              </el-col>
+              <el-col :span="24" class="form">
+                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
+                  <el-form-item label="手机号" prop="phone">
+                    <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
+                  </el-form-item>
+                  <el-form-item label="密码" prop="passwd">
+                    <el-input v-model="form.passwd" placeholder="请输入密码" show-password></el-input>
+                  </el-form-item>
+                  <el-col :span="24" style="text-align:center;">
+                    <el-button type="primary" @click="submitForm('form')">登录</el-button>
+                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+                  </el-col>
+                </el-form>
+              </el-col>
             </el-col>
           </div>
         </el-col>
@@ -41,10 +57,27 @@ export default {
     foot,
   },
   data: function() {
-    return {};
+    return {
+      form: {},
+      rules: {
+        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+        passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+      },
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -73,6 +106,15 @@ export default {
     .info {
       min-height: 600px;
       background: #fff;
+      padding: 0 20px;
+      .top {
+        text-align: center;
+        padding: 50px 0;
+        font-size: 40px;
+      }
+      .form {
+        padding: 0 0 20px 0;
+      }
     }
   }
   .foot {

src/views/register.vue

@@ -25,7 +25,7 @@
                     <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                   </el-form-item>
                   <el-form-item label="密码" prop="passwd">
-                    <el-input v-model="form.passwd" placeholder="请输入密码"></el-input>
+                    <el-input v-model="form.passwd" placeholder="请输入密码" show-password></el-input>
                   </el-form-item>
                   <el-form-item label="用户类别" prop="type">
                     <el-radio-group v-model="form.type">
@@ -260,6 +260,9 @@ export default {
         padding: 50px 0;
         font-size: 40px;
       }
+      .form {
+        padding: 0 0 20px 0;
+      }
     }
   }
   .foot {