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

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="app">
-    <el-row>
+    <el-row v-if="toLogin()">
+      <router-view />
+    </el-row>
+    <el-row v-else>
       <main-layout></main-layout>
     </el-row>
   </div>
@@ -13,6 +16,15 @@ export default {
     mainLayout,
   },
   data: () => ({}),
+  created() {},
+  methods: {
+    toLogin() {
+      let route = window.location.pathname;
+      console.log(route);
+
+      return route.includes('login');
+    },
+  },
 };
 </script>
 

src/router/index.js

@@ -62,6 +62,11 @@ const routes = [
     meta: { title: '添加' },
     component: () => import('../views/test/detail.vue'),
   },
+  {
+    path: '/login',
+    meta: { title: '登录' },
+    component: () => import('../views/login.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/login.vue

@@ -0,0 +1,76 @@
+<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-form label-position="left" label-width="80px" :model="form" class="form">
+            <el-form-item label="手机号">
+              <el-input v-model="form.phone"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+              <el-input v-model="form.passwd"></el-input>
+            </el-form-item>
+            <el-col :span="24" style="text-align:center;">
+              <el-button plain @click="onSubmit()">登录</el-button>
+            </el-col>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  props: {},
+  components: {},
+  data: () => ({
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    async onSubmit() {
+      console.log(this.form);
+    },
+  },
+};
+</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 {
+  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;
+}
+</style>