更新

src/layout/main-layout.vue

@@ -1,18 +1,23 @@
 <template>
   <div id="main-layout">
-    <el-container style="background:#e7e8eb;">
-      <el-header height="4rem" class="head">
-        <heads></heads>
-      </el-header>
-      <el-container class="contain">
-        <el-aside width="13rem" class="side">
-          <menus></menus>
-        </el-aside>
-        <el-main class="main">
-          <router-view />
-        </el-main>
+    <div v-if="!toLogin()">
+      <el-container>
+        <el-header height="70px" class="head">
+          <heads></heads>
+        </el-header>
+        <el-container class="contain">
+          <el-aside class="side">
+            <menus></menus>
+          </el-aside>
+          <el-main class="main">
+            <router-view />
+          </el-main>
+        </el-container>
       </el-container>
-    </el-container>
+    </div>
+    <div v-else>
+      <router-view />
+    </div>
   </div>
 </template>
 
@@ -30,7 +35,12 @@ export default {
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    toLogin() {
+      let route = window.location.pathname;
+      return route.includes('login');
+    },
+  },
 };
 </script>
 
@@ -39,25 +49,20 @@ export default {
   margin: 0;
   padding: 0;
   width: 100%;
-  background: #20a0ff;
+  background: #2a2e43;
 }
 .contain {
   height: 100%;
-  margin: 20px 30px;
-  border: 1px solid #a2a2b6;
   background: #eeeeee;
 }
 .side {
-  margin: 0;
-  padding: 0;
-  width: 2rem;
-  border-right: 1px solid #a2a2b6;
+  width: 220px !important;
+  min-height: 867px;
   background: #ffffff;
 }
 .main {
   margin: 0;
-  padding: 0;
-  background: #ffffff;
+  padding: 20px;
   min-height: 550px;
 }
 </style>

src/router/index.js

@@ -128,6 +128,11 @@ const routes = [
     path: '/specialist/detail',
     component: () => import('../views/specialist/detail.vue'),
   },
+
+  {
+    path: '/login',
+    component: () => import('../views/login.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/login.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24" class="login" :style="'background: url(' + loginBei + ')no-repeat center center;'">
+        <el-col :span="12" class="info">
+          <el-col :span="24" class="topTitle">
+            后台登录系统
+          </el-col>
+          <el-col :span="24">
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="登录名称">
+                <el-input v-model="form.name" placeholder="请输入名称"></el-input>
+              </el-form-item>
+              <el-form-item label="登录密码">
+                <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
+              </el-form-item>
+              <el-form-item label="用户类型">
+                <el-select v-model="form.type" placeholder="请选择用户类型">
+                  <el-option label="金控集团" value="0"></el-option>
+                  <el-option label="金融机构" value="1"></el-option>
+                  <el-option label="政府机构" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-row class="btn">
+                <el-button type="success" @click="onSubmit">登录</el-button>
+              </el-row>
+            </el-form>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  props: {},
+  components: {},
+  data: () => ({
+    loginBei: require('@/assets/logo.jpg'),
+    form: {},
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    onSubmit(form) {
+      console.log(this.form);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  height: 100vh;
+}
+.info {
+  position: absolute;
+  top: 20%;
+  left: 32%;
+  width: 600px;
+  height: 500px;
+  background-color: #ffffff5f;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+}
+.topTitle {
+  padding: 50px 0;
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+}
+.el-form {
+  padding: 0 60px;
+}
+/deep/.el-form-item__label {
+  color: #fff;
+  font-size: 16px;
+}
+/deep/.el-form-item {
+  margin-bottom: 40px;
+}
+.btn {
+  text-align: center;
+  padding: 15px 0;
+}
+.btn .el-button {
+  width: 50%;
+}
+</style>