更新登录

src/components/login.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24" class="top">
+        <top></top>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200">
+          <logo :info="info"></logo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <menuInfo></menuInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <mainInfo></mainInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot :info="info"></foot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import logo from '@/layout/index/logo.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import mainInfo from '@/layout/login/mainInfo.vue';
+import foot from '@/layout/index/foot.vue';
+export default {
+  name: 'login',
+  props: {
+    info: null, //站点信息
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    foot, //底部
+    mainInfo, //登陆
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+}
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+
+.main {
+  height: 560px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/login/mainInfo.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="mainInfo">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-image style="image" :src="beijing"></el-image>
+        <el-col :span="24" class="login">
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="登录" name="first" class="dengli">
+              <el-form ref="form" :model="form" label-width="0px">
+                <el-form-item> <el-input v-model="form.name" placeholder="用户名"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.region" placeholder="密码"></el-input> </el-form-item>
+                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="注册" name="second">
+              <el-form ref="form" :model="form" label-width="0px">
+                <el-form-item> <el-input v-model="form.name" placeholder="用户名称"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.region" placeholder="登录密码"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.passward" placeholder="设置密码"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.queren" placeholder="确认密码"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.card" placeholder="身份证号"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.phone" placeholder="联系电话"></el-input> </el-form-item>
+                <el-form-item> <el-input v-model="form.address" placeholder="地址"></el-input> </el-form-item>
+                <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mainInfo',
+  props: {},
+  components: {},
+  data: () => ({
+    beijing: require('@/assets/denglu.jpg'),
+    form: {
+      name: '',
+      region: '',
+    },
+    activeName: 'second',
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  height: 560px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.info .image {
+  width: 100%;
+  height: 560px;
+}
+.info .login {
+  position: absolute;
+  right: 90px;
+  top: 60px;
+  width: 300px;
+  height: 420px;
+}
+
+/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+  padding-left: 65px;
+}
+/deep/.el-tabs__item {
+  padding: 0px 60px 0 0px;
+  height: 40px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 40px;
+  text-align: center;
+  display: inline-block;
+  list-style: none;
+  font-size: 24px;
+  font-weight: 500;
+  color: #303133;
+  position: relative;
+  width: 150px;
+}
+
+/deep/.el-button--primary {
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+  width: 300px;
+}
+
+/deep/.el-form-item__content {
+  line-height: 20px;
+  position: relative;
+  font-size: 14px;
+  height: 24px;
+}
+
+/deep/.el-input__inner {
+  -webkit-appearance: none;
+  border-radius: 0px;
+
+  color: #606266;
+  font-size: inherit;
+  height: 30px;
+  line-height: 30px;
+  outline: 0;
+  padding: 0 15px;
+  width: 100%;
+}
+.denglu {
+  width: 150px;
+}
+</style>

src/router/index.js

@@ -93,6 +93,12 @@ const routes = [
     name: 'service',
     component: () => import('../views/service/service.vue'),
   },
+  //登录和注册
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../views/login.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/login.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="login">
+    <login-detail :info="info"></login-detail>
+  </div>
+</template>
+
+<script>
+import loginDetail from '@/components/login.vue';
+export default {
+  name: 'login',
+  props: {},
+  components: {
+    loginDetail,
+  },
+  data: () => ({
+    info: {
+      logo: require('@/assets/logo.png'),
+      banquan: '版权所有：吉林省计算中心',
+      jishu: '技术支持：长春市福瑞科技有限公司',
+      youbian: '邮编：130000',
+      chuanzhen: '传真：239823982',
+      address: '地址：吉林省长春市朝阳区前进大街1244号',
+      phone: '电话：0431-1234567',
+      email: '邮箱：123456@163.com',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>