Merge branch 'master' of http://git.cc-lotus.info/live-platform/live-cms

src/views/login.vue

@@ -2,7 +2,7 @@
   <div id="login">
     <el-row>
       <el-col :span="24" class="style">
-        <el-col :span="24" class="login">
+        <!-- <el-col :span="24" class="login">
           <el-col :span="24" class="top">登录</el-col>
           <el-form label-position="left" label-width="80px" :model="form" class="form">
             <el-form-item label="手机号">
@@ -15,6 +15,24 @@
               <el-button plain @click="onSubmit()">登录</el-button>
             </el-col>
           </el-form>
+        </el-col> -->
+        <el-col :span="24" class="login">
+          <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-col>
+            </el-form>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -28,12 +46,23 @@ export default {
   components: {},
   data: () => ({
     form: {},
+    rules: {
+      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+      passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+    },
   }),
   created() {},
   computed: {},
   methods: {
-    async onSubmit() {
-      console.log(this.form);
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
     },
   },
 };
@@ -46,31 +75,22 @@ export default {
   background-repeat: no-repeat;
   width: 100%;
   height: 100vh;
-}
-.login {
-  width: 35%;
-  height: 40%;
-  background-color: rgba(255, 255, 255, 0.5);
-  float: none;
-  margin: 30vh auto;
-}
-.top {
-  font-size: 1.5vw;
-  text-align: center;
-  font-family: 微软雅黑;
-  height: 10vh;
-  line-height: 10vh;
-  color: #666666;
-}
-/deep/.el-form-item__label {
-  width: 5vh;
-  font-size: 1.2vw;
-  font-family: 微软雅黑;
-}
-.form {
-  margin: 2vh 5vh;
-}
-/deep/.el-button {
-  width: 10vw;
+  .login {
+    position: relative;
+    top: 26%;
+    left: 41%;
+    width: 31%;
+    height: 52%;
+    background-color: #ffffff5f;
+    border-radius: 10px;
+    .top {
+      text-align: center;
+      color: #fff;
+      font-size: 50px;
+      text-shadow: cornflowerblue 3px 3px 3px;
+      font-family: cursive;
+      padding: 20px 0;
+    }
+  }
 }
 </style>