更新

src/views/login copy.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24" class="style">
+        <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 prop="phone">
+                <span slot="label">手机号</span>
+                <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
+              </el-form-item>
+              <el-form-item prop="passwd">
+                <span slot="label">密码</span>
+                <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="resetForm('form')">重置</el-button>
+                <el-button type="success" @click="submitForm('form')">登录</el-button>
+              </el-col>
+            </el-form>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: login } = createNamespacedHelpers('login');
+export default {
+  name: 'login',
+  props: {},
+  components: {},
+  data: () => ({
+    form: {},
+    rules: {
+      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+      passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    ...login({ toLogin: 'login' }),
+    submitForm(formName) {
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          let res = await this.toLogin({ user: this.form });
+          if (res.id) {
+            this.$router.push('/');
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  background-image: url('../assets/login.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100vh;
+  .login {
+    position: relative;
+    top: 32%;
+    left: 43%;
+    width: 450px;
+    height: 400px;
+    background-color: #ffffff5f;
+    border-radius: 10px;
+    .top {
+      text-align: center;
+      color: #fff;
+      font-size: 40px;
+      text-shadow: cornflowerblue 3px 3px 3px;
+      font-family: cursive;
+      padding: 35px 0;
+    }
+    .form {
+      padding: 25px 50px;
+    }
+  }
+}
+/deep/.el-form-item__label {
+  font-size: 24px;
+  font-family: 楷体;
+  color: #fff;
+}
+/deep/.el-form-item {
+  margin-bottom: 30px;
+}
+</style>

src/views/login.vue

@@ -1,28 +1,35 @@
 <template>
   <div id="login">
     <el-row>
-      <el-col :span="24" class="style">
-        <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 prop="phone">
-                <span slot="label">手机号</span>
-                <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
-              </el-form-item>
-              <el-form-item prop="passwd">
-                <span slot="label">密码</span>
-                <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="resetForm('form')">重置</el-button>
-                <el-button type="success" @click="submitForm('form')">登录</el-button>
+      <el-col :span="24">
+        <div class="bg">
+          <div class="main">
+            <div class="left">
+              <span>中科在线（长春）技术交易直播后台</span>
+            </div>
+            <div class="right">
+              <el-col :span="24" class="title">
+                <span>用户登录</span>
               </el-col>
-            </el-form>
-          </el-col>
-        </el-col>
+              <el-col :span="24" class="form">
+                <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
+                  <el-form-item prop="phone">
+                    <span slot="label"><el-image :src="image.phone"></el-image></span>
+                    <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
+                  </el-form-item>
+                  <el-form-item prop="passwd">
+                    <span slot="label"><el-image :src="image.password"></el-image></span>
+                    <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="resetForm('form')">重置</el-button>
+                    <el-button type="success" @click="submitForm('form')">登录</el-button>
+                  </el-col>
+                </el-form>
+              </el-col>
+            </div>
+          </div>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -35,15 +42,20 @@ export default {
   name: 'login',
   props: {},
   components: {},
-  data: () => ({
-    form: {},
-    rules: {
-      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
-      passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-    },
-  }),
+  data: function() {
+    return {
+      form: {},
+      rules: {
+        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+        passwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+      },
+      image: {
+        phone: require('@/assets/user.png'),
+        password: require('@/assets/password.png'),
+      },
+    };
+  },
   created() {},
-  computed: {},
   methods: {
     ...login({ toLogin: 'login' }),
     submitForm(formName) {
@@ -63,43 +75,73 @@ export default {
       this.$refs[formName].resetFields();
     },
   },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.style {
-  background-image: url('../assets/login.png');
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
+.bg {
   width: 100%;
   height: 100vh;
-  .login {
-    position: relative;
-    top: 32%;
-    left: 43%;
-    width: 450px;
-    height: 400px;
-    background-color: #ffffff5f;
-    border-radius: 10px;
-    .top {
-      text-align: center;
-      color: #fff;
-      font-size: 40px;
-      text-shadow: cornflowerblue 3px 3px 3px;
-      font-family: cursive;
-      padding: 35px 0;
-    }
-    .form {
-      padding: 25px 50px;
+  background-image: url('../assets/bg3.jpg');
+  background-size: 100% 100%;
+  background-position: center center;
+}
+.main {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  width: 630px;
+  height: 300px;
+}
+.main .left {
+  float: left;
+  width: 300px;
+  height: 300px;
+  text-align: center;
+  background: #0000004f;
+}
+.main .left span {
+  font-size: 25px;
+  color: #fff;
+  font-weight: bold;
+  font-family: cursive;
+  padding: 36% 0;
+  display: inline-block;
+  line-height: 40px;
+}
+.main .right {
+  float: left;
+  width: 300px;
+  height: 300px;
+  background: #ffffff5f;
+  .title {
+    text-align: center;
+    padding: 20px 0;
+    margin: 0 0 20px 0;
+    border-bottom: 1px solid #ccc;
+    span {
+      font-size: 20px;
+      color: #0635ab;
+      font-weight: bold;
     }
   }
+  .form {
+    padding: 0 10px;
+  }
 }
-/deep/.el-form-item__label {
-  font-size: 24px;
-  font-family: 楷体;
-  color: #fff;
+/deep/.el-input {
+  width: 80%;
 }
-/deep/.el-form-item {
-  margin-bottom: 30px;
+/deep/.el-image {
+  top: 5px;
 }
 </style>