登录页修改

frontend_web/src/views/system/login/index.js

@@ -1,6 +1,6 @@
 // import page from './page_drugd'
 // import page from './page'
 // import page from './page_biobank'
-import page from './page_gene'
+import page from './page_college'
 
 export default page

frontend_web/src/views/system/login/page_college.vue

@@ -0,0 +1,350 @@
+<template>
+  <div>
+    <div class="header">
+      <el-row>
+        <el-col :span="4">
+          &nbsp;
+        </el-col>
+        <el-col :span="6">
+          <a href="/"
+             alt="logo">
+            <img src="./image/college_logo.jpg"
+                 style="height:100px">
+          </a>
+        </el-col>
+        <el-col :span="5">
+          &nbsp;
+        </el-col>
+        <el-col :span="8">
+          <div style="margin-top:20px">
+            <img src="./image/college_title.jpg">
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="container">
+      <el-row>
+        <el-col :span="16">
+          <div class="leftpadding">
+            <img src="./image/college_bgp.jpg" />
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <el-card class="login-card">
+            <el-form ref="loginForm"
+                     :model="formLogin"
+                     :rules="rules">
+              <div class="heading">登录</div>
+              <div style="margin-top:50px">
+                <i class="icon-username"></i>
+                <el-input type="text"
+                          v-model="formLogin.username"
+                          prop="username"
+                          placeholder="请输入用户名"
+                          @keyup.enter.native="submit"
+                          style="margin-left:30px;width:200px;height:40px"></el-input>
+              </div>
+              <div style="margin-top:50px">
+                <i class="icon-pass"></i>
+                <el-input type="password"
+                          v-model="formLogin.password"
+                          prop="password"
+                          placeholder="请输入密码"
+                          @keyup.enter.native="submit"
+                          style="margin-left:30px;width:200px;height:40px"></el-input>
+              </div>
+              <div style="margin-top:50px">
+                <el-button size="default"
+                           @click="submit"
+                           type="warnning"
+                           class="button-login"
+                           style="width:88%;background:#fa9139;color:#FFF">登录</el-button>
+              </div>
+              <!-- <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button> -->
+            </el-form>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="footer">
+      <el-row>
+        <el-col :span="4">
+          &nbsp;
+        </el-col>
+        <el-col :span="6">
+          <div style="margin-top:15px">
+            <img src="./image/logo3.png"
+                 class="logodashoo-img">
+          </div>
+        </el-col>
+        <el-col :span="4">
+          &nbsp;
+        </el-col>
+        <el-col :span="7.5">
+          <div style="margin-top: 20px;">
+            <a href="http://www.dashoo.cn"
+               target="_blank"> 关于我们 |</a>
+            <a href="http://www.dashoo.cn"
+               target="_blank"> 公司简介 |</a>
+            <a href="http://www.dashoo.cn"
+               target="_blank"> 免责声明 |</a>
+            <a href="http://www.dashoo.cn"
+               target="_blank"> 隐私政策</a>
+          </div>
+          <div class="license">青岛大数华创科技有限公司版权所有 Coptright @ DASHOO</div>
+        </el-col>
+        <el-col :span="4.5">
+          <div class="login_bg5">
+            <img src="./image/qrcode.png"
+                 class="weixin-img">
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+export default {
+  data () {
+    return {
+      // 快速选择用户
+      dialogVisible: false,
+      users: [
+        {
+          name: '管理员',
+          username: 'admin',
+          password: 'dashoo123456'
+        },
+        {
+          name: '制备人员',
+          username: 'editor',
+          password: 'editor'
+        },
+        {
+          name: '检测人员',
+          username: 'user1',
+          password: 'user1'
+        }
+      ],
+      // 表单
+      formLogin: {
+        username: 'dashoo',
+        password: '123456',
+        code: 'v9am'
+      },
+      // 校验
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
+  },
+  methods: {
+    ...mapActions('d2admin/account', [
+      'login'
+    ]),
+
+    /**
+     * @description 接收选择一个用户快速登录的事件
+     * @param {Object} user 用户信息
+     */
+    handleUserBtnClick (user) {
+      this.formLogin.username = user.username
+      this.formLogin.password = user.password
+      this.submit()
+    },
+    /**
+     * @description 提交表单
+     */
+    // 提交登录信息
+    submit () {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          // 登录
+          // 注意 这里的演示没有传验证码
+          // 具体需要传递的数据请自行修改代码
+          this.login({
+            username: this.formLogin.username,
+            password: this.formLogin.password
+          })
+            .then(() => {
+              // 重定向对象不存在则返回顶层路径
+              this.$router.replace(this.$route.query.redirect || '/')
+            })
+        } else {
+          // 登录表单校验失败
+          this.$message.error('请输入用户名或密码')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nav {
+  background: #fff;
+  border-bottom: 1px solid rgba(230, 230, 230, 0.99);
+  z-index: 2;
+  width: 100%;
+  // min-height: 1100px;
+  position: fixed;
+  top: 0;
+}
+
+.nav .nav-logo {
+  padding-top: 2px;
+  padding-left: 210px;
+}
+
+.nav-logo {
+  margin: 0;
+  display: inline-block;
+  float: left;
+  padding-top: 2px;
+}
+
+.nav header {
+  padding: 0px 0 0px;
+  height: 65px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.nav ul.nav-item {
+  height: 32px;
+  float: left;
+  line-height: 32px;
+  padding-left: 470px;
+}
+
+.nav ul.nav-item li {
+  display: inline-block;
+  margin-left: 25px;
+}
+
+.nav ul.nav-item a {
+  display: inline-block;
+  color: #3c3c3c;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+}
+
+.container {
+  text-align: center;
+  background: url("./image/college_bg.jpg");
+  height: calc(100vh - 200px);
+  background-size: cover;
+}
+
+.leftpadding {
+  margin-left: 280px;
+  margin-top: 130px;
+}
+
+.box-card {
+  margin-bottom: 2.5rem;
+}
+
+.footer {
+  min-width: 1100px;
+  width: 100%;
+}
+
+.footer a {
+  color: #6e717c;
+}
+
+.coptright {
+  padding-top: 30px;
+  padding-left: 150px;
+}
+
+.login_bg4 {
+  float: right;
+  // padding-left: 220px;
+  padding-right: 350px;
+  padding-top: 15px;
+}
+
+.logodashoo-img {
+  width: 180px;
+}
+
+.license {
+  padding-top: 10px;
+  padding-left: 10px;
+  font-family: sans-serif;
+  font-size: 15px;
+  color: #c7c7c7;
+}
+
+.login_bg5 {
+  //padding-left: 0px;
+  float: left;
+  padding-top: 10px;
+}
+
+.weixin-img {
+  width: 77px;
+}
+
+.login {
+  &-form {
+    .heading {
+      text-align: center;
+      color: #004f8c;
+    }
+
+    .el-button {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+  }
+}
+.heading {
+  font-size: 26px;
+  font-family: "微软雅黑";
+  text-align: center;
+  color: #004f8c;
+}
+
+.icon-username {
+  position: absolute;
+  z-index: 5;
+  background-image: url(./image/username.png); /*引入图片图片*/
+  background-repeat: no-repeat; /*设置图片不重复*/
+  background-position: 0px 0px; /*图片显示的位置*/
+  width: 51px; /*设置图片显示的宽*/
+  height: 51px; /*图片显示的高*/
+}
+.icon-pass {
+  position: absolute;
+  z-index: 5;
+  background-image: url(./image/password.png); /*引入图片图片*/
+  background-repeat: no-repeat; /*设置图片不重复*/
+  background-position: 0px 0px; /*图片显示的位置*/
+  width: 51px; /*设置图片显示的宽*/
+  height: 51px; /*图片显示的高*/
+}
+.button-login {
+  font-size: 22px;
+}
+.login-card {
+  width: 300px;
+  height: 373px;
+  margin-top: 130px;
+  margin-left: -100px;
+}
+</style>