1

src/views/login copy.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="login">
+    <van-form @submit="onSubmit">
+      <van-field v-model="form.login_id" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
+      <van-field v-model="form.password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
+      <div style="margin: 16px;">
+        <van-button round block type="info" native-type="submit">登录</van-button>
+      </div>
+    </van-form>
+    <share></share>
+  </div>
+</template>
+
+<script>
+import share from '@/layout/common/share.vue';
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapLogin } = createNamespacedHelpers('login');
+export default {
+  name: 'login',
+  props: {},
+  components: {
+    share,
+  },
+  data: function() {
+    return {
+      form: {},
+    };
+  },
+  created() {},
+  methods: {
+    ...mapLogin(['login']),
+    async onSubmit() {
+      let dup = _.cloneDeep(this.form);
+      const res = await this.login(dup);
+      if (this.$checkRes(res, '登录成功', res.errmsg || '登陆失败')) {
+        // 跳转login
+        this.$router.push('/admin/index');
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/login.vue

@@ -1,13 +1,30 @@
 <template>
-  <div id="login">
-    <van-form @submit="onSubmit" style="margin-top:20vh">
-      <van-field v-model="form.login_id" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
-      <van-field v-model="form.password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
-      <div style="margin: 16px;">
-        <van-button round block type="info" native-type="submit">提交</van-button>
-      </div>
-    </van-form>
-    <share></share>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <p>吉林省计算中心</p>
+          <p>文章发布系统</p>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <van-form @submit="onSubmit">
+            <van-field v-model="form.login_id" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
+            <van-field
+              v-model="form.password"
+              type="password"
+              name="密码"
+              label="密码"
+              placeholder="密码"
+              :rules="[{ required: true, message: '请填写密码' }]"
+            />
+            <div style="margin: 16px;">
+              <van-button round block type="info" native-type="submit">登录</van-button>
+            </div>
+          </van-form>
+          <share></share>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -17,17 +34,20 @@ const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapLogin } = createNamespacedHelpers('login');
 export default {
-  name: 'login',
+  name: 'index',
   props: {},
-  components: {
-    share,
-  },
+  components: { share },
   data: function() {
     return {
+      clientHeight: '',
       form: {},
     };
   },
   created() {},
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 200;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
   methods: {
     ...mapLogin(['login']),
     async onSubmit() {
@@ -41,14 +61,36 @@ export default {
   },
   computed: {
     ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 200;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+    padding: 40px;
+    p {
+      font-size: 18px;
+      text-align: center;
+      font-weight: bold;
+    }
+    p:nth-child(1) {
+      font-size: 30px;
+    }
+    p:nth-child(2) {
+      margin: 15px 0 0 0;
+    }
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>