BIOBANK首页

src/dashoo.cn/frontend_web/src/pages/login.vue

@@ -1,26 +1,64 @@
 <template>
-  <div class="login-body">
-    <section class="login">
-      <header class="login-header">
-        <h1 style="text-align:center;margin-top:70px;margin-bottom:40px;">
-          <router-link to="/"><img src="../assets/img/logo.png" style="height:80px;"></router-link>
-        </h1>
-        <el-alert v-if="error" :title="error.title" type="warning" :description="error.message" show-icon />
-      </header>
-      <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
-        <h2 class="heading">登录</h2>
-        <el-form-item label="用户名" prop="username">
-          <el-input type="text" v-model="model.username" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
-        </el-form-item>
-        <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
-      </el-form>
-      <footer class="login-footer">
-        Copyright © 2018 labsop.
+  <div >
+
+    <div class="container">
+      <el-row>
+        <el-col :span="15">
+          <div class="leftpadding">
+            <img src="../assets/img/biaozhun.png" class="intelligent-img" /> </div>
+        </el-col>
+        <el-col :span="9">
+          <el-card class="box-card">
+         <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+            <h2 class="heading">登录</h2>
+            <el-form-item label="用户名" prop="username">
+              <el-input type="text" v-model="model.username" placeholder="请输入用户名">
+                <el-select v-model="loginMode" slot="append" placeholder="登录类型" style="width: 110px;">
+                  <el-option label="普通账户" :value="1"></el-option>
+                  <el-option label="PTR认证" :value="2"></el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+            </el-form-item>
+            <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
+          </el-form>
+          </el-card>
+          
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="footer">
+      <footer>
+        <el-row>
+          <el-col :span="12">
+            <div class="login_bg4">
+              <img src="../assets/img/logo2.png" class="logolabsop-img">
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div>
+              <el-row class="coptright">
+                <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>
+              </el-row>
+              <el-row>
+                <div class="license">青岛大数华创科技有限公司版权所有 Coptright @ 2019 DASHOO.</div>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="2">
+            <div class="login_bg5">
+              <img src="../assets/img/QR code.png" class="weixin-img">
+            </div>
+          </el-col>
+        </el-row>
       </footer>
-    </section>
+    </div>
   </div>
 </template>
 
@@ -97,87 +135,191 @@
 <style lang="scss">
   @import '../assets/styles/base/variables';
 
-  .login-body {
-    background: url("../assets/img/login_bg1.jpg") no-repeat 0 0;
-    // background: url("../assets/img/logo_01.jpg") no-repeat 0 0;
-    font-family: 'Open Sans', sans-serif;
-    background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    min-height: 1050px;
-    height: 500px;
-    background-size: cover;
-    position: absolute;
+  .nav {
+    background: #fff;
+    border-bottom: 1px solid rgba(230, 230, 230, 0.99);
+    z-index: 2;
+    width: 100%;
+    position: fixed;
     top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
   }
 
-  .login {
-    flex: 1;
+  .nav .nav-logo {
+    padding-top: 2px;
+    padding-left: 35px;
+  }
+
+  .nav header {
+    /*shift way to clear float because of the overflow hidden will hide the algolia*/
+    padding: 0px 0 0px;
+    // max-width: 1136px;
+    min-width: 1300px;
+    margin: 0 auto;
+  }
+      .heading {
+        margin: 0 0 1rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+      }
+
+  .nav ul.nav-item {
+    height: 32px;
+    float: left;
+    line-height: 32px;
+    padding-left: 350px;
+  }
+
+  .logu {
+
+    margin-top: 100px;
+    // padding-left: 120px;
+  }
+
+  .nav ul.nav-item li {
+    display: inline-block;
+    margin-left: 40px;
+  }
+
+  .nav ul.nav-item a {
+    display: inline-block;
+    color: #3c3c3c;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+
+  .nav-logo {
+    margin: 0;
+    display: inline-block;
+    float: left;
+    padding-top: 2px;
+  }
+
+  .container {
+    text-align: center;
+    background: url("../assets/img/Background.png");
+    // min-width: 1300px;
     width: 100%;
-    max-width: 22rem;
+    height: 100%;
     margin: 0 auto;
-    font-size: 0.875rem;
-    opacity: 0.8;
+    background-size: cover;
+    // background-position: center;
+    // position: relative;
+  }
 
-    &-header {
-      margin-bottom: 1rem;
+  .nav {
+    // max-width: 100%;
+    min-width: 1100px;
+    min-height: 600px;
+  }
 
-      .brand {
-        margin: 4.5rem 0 3.5rem;
-        text-align: center;
-        letter-spacing: 0.125rem;
+  .license {
+    padding-top: 10px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
 
-        a {
-          margin: 0;
-          color: $brand-color;
-          font: 300 3rem sans-serif;
+  .footer a {
+    color: #6E717C;
+  }
 
-          &:hover {
-            color: $brand-hover-color;
-            text-shadow: 0 0 1rem $brand-hover-color;
-          }
-        }
-      }
-    }
+  .nav header .search-query {
+    height: 30px;
+    line-height: 32px;
+    box-sizing: border-box;
+    border: 1px solid #e6e6e6;
+    border-radius: 15px;
+    outline: none;
+    padding: 0 15px 0 32px;
+    background-size: 20px;
+  }
 
-    &-form {
-      margin-bottom: 2.5rem;
-      padding: 1.875rem 1.25rem;
-      background: $login-form-background;
-      color: $login-form-color;
+  .footer {
+    min-width: 1100px;
+    background: #F9F9F9;
+    border-top: 1px solid rgba(230, 230, 230, 0.99);
+    width: 100%;
+    height: 18%;
+  }
 
-      .heading {
-        margin: 0 0 1rem;
-        font-weight: 400;
-        font-size: 1.5rem;
-      }
+  .intelligent-img {
+    width: 650px;
+    // max-width: 800px;
+    //  min-width: 20%;
+  }
+
+  .weixin-img {
+    width: 77px;
+  }
+
+  .leftpadding {
+    padding-left: 0px;
+    padding-top: 100px;
+    // padding-left: 10%;
+    // padding-top: 100px;
+  }
+
+  .login_bg4 {
+    padding-left: 20px;
+    padding-top: 5%;
+  }
+
+  .coptright {
+    padding-top: 40px;
+    padding-left: 150px;
+  }
+
+  .license {
+    padding-top: 10px;
+    padding-left: 50px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
 
+  .login_bg5 {
+    padding-left: 10px;
+    // padding-top: 20px;
+  }
+
+  .login_bg5 {
+    padding-right: 10px;
+    float: left;
+    // float: top;
+    padding-top: 20px;
+    // padding: 15;
+  }
+
+  .logolabsop-img {
+    width: 400px;
+  }
+
+  .footer footer {
+    overflow: hidden;
+    max-width: 1136px;
+    margin: 0 auto;
+    padding-top: 0px;
+    padding-bottom: 30px;
+  }
+  .box-card {
+      margin-top: 140px;
+      width: 300px;
+      height: 350px;
+      margin-bottom: 2.5rem;
+      // padding: 0 1.25rem;
+       background: $login-form-background;
+      color: $login-form-color;
+  }
+  .login {
+    &-form {
+      // position: absolute;
+      
 
       .el-button {
         margin-top: 0.5rem;
         width: 100%;
       }
     }
-
-    &-footer {
-      margin-bottom: 1rem;
-      padding: 0.625rem;
-      // border: 0.0625rem solid $brand-color;
-      font-size: 0.75rem;
-      text-align: center;
-
-      a {
-        color: $brand-color;
-      }
-    }
-  }
-
-  .nuxt-progress {
-    display: none;
   }
 
 </style>

src/dashoo.cn/frontend_web/src/pages/login2.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="login-body">
+    <section class="login">
+      <header class="login-header">
+        <h1 style="text-align:center;margin-top:70px;margin-bottom:40px;">
+          <router-link to="/"><img src="../assets/img/logo.png" style="height:80px;"></router-link>
+        </h1>
+        <el-alert v-if="error" :title="error.title" type="warning" :description="error.message" show-icon />
+      </header>
+      <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+        <h2 class="heading">登录</h2>
+        <el-form-item label="用户名" prop="username">
+          <el-input type="text" v-model="model.username" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+        </el-form-item>
+        <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
+      </el-form>
+      <footer class="login-footer">
+        Copyright © 2018 labsop.
+      </footer>
+    </section>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Component from 'class-component'
+  @Component({
+    data() {
+      // form model
+      // TODO: remove default values
+      const model = {
+        username: '',
+        password: ''
+      }
+
+      // form validate rules
+      const rules = {
+        username: [{
+          required: true,
+          message: '请输入用户名'
+        }],
+        password: [{
+          required: true,
+          message: '请输入密码'
+        }]
+      }
+
+      return {
+        model: model,
+        rules: rules,
+        error: null,
+        loading: false
+      }
+    }
+  })
+  export default class Login extends Vue {
+    layout() {
+      return 'empty'
+    }
+    login() {
+      this.logging = true
+      this.$refs.user.validate(async (valid) => {
+        try {
+          if (valid) {
+            await this.$store.dispatch('auth/login', {
+              fields: {
+                username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
+                password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
+              }
+            })
+            if (process.env.appclient == 'lims') {
+              this.$router.push(this.$route.query.page || '/indexlims')
+            } else if (process.env.appclient == 'cellbank') {
+              this.$router.push(this.$route.query.page || '/indexdqm')
+            } else {
+              this.$router.push(this.$route.query.page || '/')
+            }
+          }
+        } catch (e) {
+          // this.$message.warning(e.message)
+          this.$message.warning('账号或密码错误')
+        } finally {
+          this.logging = false
+        }
+      })
+    }
+    logout() {
+      this.$store.dispatch('logout')
+    }
+  }
+
+</script>
+
+<style lang="scss">
+  @import '../assets/styles/base/variables';
+
+  .login-body {
+    background: url("../assets/img/login_bg1.jpg") no-repeat 0 0;
+    // background: url("../assets/img/logo_01.jpg") no-repeat 0 0;
+    font-family: 'Open Sans', sans-serif;
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    min-height: 1050px;
+    height: 500px;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .login {
+    flex: 1;
+    width: 100%;
+    max-width: 22rem;
+    margin: 0 auto;
+    font-size: 0.875rem;
+    opacity: 0.8;
+
+    &-header {
+      margin-bottom: 1rem;
+
+      .brand {
+        margin: 4.5rem 0 3.5rem;
+        text-align: center;
+        letter-spacing: 0.125rem;
+
+        a {
+          margin: 0;
+          color: $brand-color;
+          font: 300 3rem sans-serif;
+
+          &:hover {
+            color: $brand-hover-color;
+            text-shadow: 0 0 1rem $brand-hover-color;
+          }
+        }
+      }
+    }
+
+    &-form {
+      margin-bottom: 2.5rem;
+      padding: 1.875rem 1.25rem;
+      background: $login-form-background;
+      color: $login-form-color;
+
+      .heading {
+        margin: 0 0 1rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+      }
+
+
+      .el-button {
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+    }
+
+    &-footer {
+      margin-bottom: 1rem;
+      padding: 0.625rem;
+      // border: 0.0625rem solid $brand-color;
+      font-size: 0.75rem;
+      text-align: center;
+
+      a {
+        color: $brand-color;
+      }
+    }
+  }
+
+  .nuxt-progress {
+    display: none;
+  }
+
+</style>

src/dashoo.cn/frontend_web/src/pages/login_dingzhi.vue

@@ -0,0 +1,325 @@
+<template>
+  <div >
+
+    <div class="container">
+      <el-row>
+        <el-col :span="15">
+          <div class="leftpadding">
+            <img src="../assets/img/dingzhi.png" class="intelligent-img" /> </div>
+        </el-col>
+        <el-col :span="9">
+          <el-card class="box-card">
+         <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+            <h2 class="heading">登录</h2>
+            <el-form-item label="用户名" prop="username">
+              <el-input type="text" v-model="model.username" placeholder="请输入用户名">
+                <el-select v-model="loginMode" slot="append" placeholder="登录类型" style="width: 110px;">
+                  <el-option label="普通账户" :value="1"></el-option>
+                  <el-option label="PTR认证" :value="2"></el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+            </el-form-item>
+            <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
+          </el-form>
+          </el-card>
+          
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="footer">
+      <footer>
+        <el-row>
+          <el-col :span="12">
+            <div class="login_bg4">
+              <img src="../assets/img/logo2.png" class="logolabsop-img">
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div>
+              <el-row class="coptright">
+                <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>
+              </el-row>
+              <el-row>
+                <div class="license">青岛大数华创科技有限公司版权所有 Coptright @ 2019 DASHOO.</div>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="2">
+            <div class="login_bg5">
+              <img src="../assets/img/QR code.png" class="weixin-img">
+            </div>
+          </el-col>
+        </el-row>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Component from 'class-component'
+  @Component({
+    data() {
+      // form model
+      // TODO: remove default values
+      const model = {
+        username: '',
+        password: ''
+      }
+
+      // form validate rules
+      const rules = {
+        username: [{
+          required: true,
+          message: '请输入用户名'
+        }],
+        password: [{
+          required: true,
+          message: '请输入密码'
+        }]
+      }
+
+      return {
+        model: model,
+        rules: rules,
+        error: null,
+        loading: false
+      }
+    }
+  })
+  export default class Login extends Vue {
+    layout() {
+      return 'empty'
+    }
+    login() {
+      this.logging = true
+      this.$refs.user.validate(async (valid) => {
+        try {
+          if (valid) {
+            await this.$store.dispatch('auth/login', {
+              fields: {
+                username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
+                password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
+              }
+            })
+            if (process.env.appclient == 'lims') {
+              this.$router.push(this.$route.query.page || '/indexlims')
+            } else if (process.env.appclient == 'cellbank') {
+              this.$router.push(this.$route.query.page || '/indexdqm')
+            } else {
+              this.$router.push(this.$route.query.page || '/')
+            }
+          }
+        } catch (e) {
+          // this.$message.warning(e.message)
+          this.$message.warning('账号或密码错误')
+        } finally {
+          this.logging = false
+        }
+      })
+    }
+    logout() {
+      this.$store.dispatch('logout')
+    }
+  }
+
+</script>
+
+<style lang="scss">
+  @import '../assets/styles/base/variables';
+
+  .nav {
+    background: #fff;
+    border-bottom: 1px solid rgba(230, 230, 230, 0.99);
+    z-index: 2;
+    width: 100%;
+    position: fixed;
+    top: 0;
+  }
+
+  .nav .nav-logo {
+    padding-top: 2px;
+    padding-left: 35px;
+  }
+
+  .nav header {
+    /*shift way to clear float because of the overflow hidden will hide the algolia*/
+    padding: 0px 0 0px;
+    // max-width: 1136px;
+    min-width: 1300px;
+    margin: 0 auto;
+  }
+      .heading {
+        margin: 0 0 1rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+      }
+
+  .nav ul.nav-item {
+    height: 32px;
+    float: left;
+    line-height: 32px;
+    padding-left: 350px;
+  }
+
+  .logu {
+
+    margin-top: 100px;
+    // padding-left: 120px;
+  }
+
+  .nav ul.nav-item li {
+    display: inline-block;
+    margin-left: 40px;
+  }
+
+  .nav ul.nav-item a {
+    display: inline-block;
+    color: #3c3c3c;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+
+  .nav-logo {
+    margin: 0;
+    display: inline-block;
+    float: left;
+    padding-top: 2px;
+  }
+
+  .container {
+    text-align: center;
+    background: url("../assets/img/Background.png");
+    // min-width: 1300px;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    background-size: cover;
+    // background-position: center;
+    // position: relative;
+  }
+
+  .nav {
+    // max-width: 100%;
+    min-width: 1100px;
+    min-height: 600px;
+  }
+
+  .license {
+    padding-top: 10px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
+
+  .footer a {
+    color: #6E717C;
+  }
+
+  .nav header .search-query {
+    height: 30px;
+    line-height: 32px;
+    box-sizing: border-box;
+    border: 1px solid #e6e6e6;
+    border-radius: 15px;
+    outline: none;
+    padding: 0 15px 0 32px;
+    background-size: 20px;
+  }
+
+  .footer {
+    min-width: 1100px;
+    background: #F9F9F9;
+    border-top: 1px solid rgba(230, 230, 230, 0.99);
+    width: 100%;
+    height: 18%;
+  }
+
+  .intelligent-img {
+    width: 650px;
+    // max-width: 800px;
+    //  min-width: 20%;
+  }
+
+  .weixin-img {
+    width: 77px;
+  }
+
+  .leftpadding {
+    padding-left: 0px;
+    padding-top: 100px;
+    // padding-left: 10%;
+    // padding-top: 100px;
+  }
+
+  .login_bg4 {
+    padding-left: 20px;
+    padding-top: 5%;
+  }
+
+  .coptright {
+    padding-top: 40px;
+    padding-left: 150px;
+  }
+
+  .license {
+    padding-top: 10px;
+    padding-left: 50px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
+
+  .login_bg5 {
+    padding-left: 10px;
+    // padding-top: 20px;
+  }
+
+  .login_bg5 {
+    padding-right: 10px;
+    float: left;
+    // float: top;
+    padding-top: 20px;
+    // padding: 15;
+  }
+
+  .logolabsop-img {
+    width: 400px;
+  }
+
+  .footer footer {
+    overflow: hidden;
+    max-width: 1136px;
+    margin: 0 auto;
+    padding-top: 0px;
+    padding-bottom: 30px;
+  }
+  .box-card {
+      margin-top: 140px;
+      width: 300px;
+      height: 350px;
+      margin-bottom: 2.5rem;
+      // padding: 0 1.25rem;
+       background: $login-form-background;
+      color: $login-form-color;
+  }
+  .login {
+    &-form {
+      // position: absolute;
+      
+
+      .el-button {
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+    }
+  }
+
+</style>

src/dashoo.cn/frontend_web/src/pages/login_jichu.vue

@@ -0,0 +1,325 @@
+<template>
+  <div >
+
+    <div class="container">
+      <el-row>
+        <el-col :span="15">
+          <div class="leftpadding">
+            <img src="../assets/img/jichu.png" class="intelligent-img" /> </div>
+        </el-col>
+        <el-col :span="9">
+          <el-card class="box-card">
+         <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+            <h2 class="heading">登录</h2>
+            <el-form-item label="用户名" prop="username">
+              <el-input type="text" v-model="model.username" placeholder="请输入用户名">
+                <el-select v-model="loginMode" slot="append" placeholder="登录类型" style="width: 110px;">
+                  <el-option label="普通账户" :value="1"></el-option>
+                  <el-option label="PTR认证" :value="2"></el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+            </el-form-item>
+            <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
+          </el-form>
+          </el-card>
+          
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="footer">
+      <footer>
+        <el-row>
+          <el-col :span="12">
+            <div class="login_bg4">
+              <img src="../assets/img/logo2.png" class="logolabsop-img">
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div>
+              <el-row class="coptright">
+                <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>
+              </el-row>
+              <el-row>
+                <div class="license">青岛大数华创科技有限公司版权所有 Coptright @ 2019 DASHOO.</div>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="2">
+            <div class="login_bg5">
+              <img src="../assets/img/QR code.png" class="weixin-img">
+            </div>
+          </el-col>
+        </el-row>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Component from 'class-component'
+  @Component({
+    data() {
+      // form model
+      // TODO: remove default values
+      const model = {
+        username: '',
+        password: ''
+      }
+
+      // form validate rules
+      const rules = {
+        username: [{
+          required: true,
+          message: '请输入用户名'
+        }],
+        password: [{
+          required: true,
+          message: '请输入密码'
+        }]
+      }
+
+      return {
+        model: model,
+        rules: rules,
+        error: null,
+        loading: false
+      }
+    }
+  })
+  export default class Login extends Vue {
+    layout() {
+      return 'empty'
+    }
+    login() {
+      this.logging = true
+      this.$refs.user.validate(async (valid) => {
+        try {
+          if (valid) {
+            await this.$store.dispatch('auth/login', {
+              fields: {
+                username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
+                password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
+              }
+            })
+            if (process.env.appclient == 'lims') {
+              this.$router.push(this.$route.query.page || '/indexlims')
+            } else if (process.env.appclient == 'cellbank') {
+              this.$router.push(this.$route.query.page || '/indexdqm')
+            } else {
+              this.$router.push(this.$route.query.page || '/')
+            }
+          }
+        } catch (e) {
+          // this.$message.warning(e.message)
+          this.$message.warning('账号或密码错误')
+        } finally {
+          this.logging = false
+        }
+      })
+    }
+    logout() {
+      this.$store.dispatch('logout')
+    }
+  }
+
+</script>
+
+<style lang="scss">
+  @import '../assets/styles/base/variables';
+
+  .nav {
+    background: #fff;
+    border-bottom: 1px solid rgba(230, 230, 230, 0.99);
+    z-index: 2;
+    width: 100%;
+    position: fixed;
+    top: 0;
+  }
+
+  .nav .nav-logo {
+    padding-top: 2px;
+    padding-left: 35px;
+  }
+
+  .nav header {
+    /*shift way to clear float because of the overflow hidden will hide the algolia*/
+    padding: 0px 0 0px;
+    // max-width: 1136px;
+    min-width: 1300px;
+    margin: 0 auto;
+  }
+      .heading {
+        margin: 0 0 1rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+      }
+
+  .nav ul.nav-item {
+    height: 32px;
+    float: left;
+    line-height: 32px;
+    padding-left: 350px;
+  }
+
+  .logu {
+
+    margin-top: 100px;
+    // padding-left: 120px;
+  }
+
+  .nav ul.nav-item li {
+    display: inline-block;
+    margin-left: 40px;
+  }
+
+  .nav ul.nav-item a {
+    display: inline-block;
+    color: #3c3c3c;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+
+  .nav-logo {
+    margin: 0;
+    display: inline-block;
+    float: left;
+    padding-top: 2px;
+  }
+
+  .container {
+    text-align: center;
+    background: url("../assets/img/Background.png");
+    // min-width: 1300px;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    background-size: cover;
+    // background-position: center;
+    // position: relative;
+  }
+
+  .nav {
+    // max-width: 100%;
+    min-width: 1100px;
+    min-height: 600px;
+  }
+
+  .license {
+    padding-top: 10px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
+
+  .footer a {
+    color: #6E717C;
+  }
+
+  .nav header .search-query {
+    height: 30px;
+    line-height: 32px;
+    box-sizing: border-box;
+    border: 1px solid #e6e6e6;
+    border-radius: 15px;
+    outline: none;
+    padding: 0 15px 0 32px;
+    background-size: 20px;
+  }
+
+  .footer {
+    min-width: 1100px;
+    background: #F9F9F9;
+    border-top: 1px solid rgba(230, 230, 230, 0.99);
+    width: 100%;
+    height: 18%;
+  }
+
+  .intelligent-img {
+    width: 650px;
+    // max-width: 800px;
+    //  min-width: 20%;
+  }
+
+  .weixin-img {
+    width: 77px;
+  }
+
+  .leftpadding {
+    padding-left: 0px;
+    padding-top: 100px;
+    // padding-left: 10%;
+    // padding-top: 100px;
+  }
+
+  .login_bg4 {
+    padding-left: 20px;
+    padding-top: 5%;
+  }
+
+  .coptright {
+    padding-top: 40px;
+    padding-left: 150px;
+  }
+
+  .license {
+    padding-top: 10px;
+    padding-left: 50px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
+
+  .login_bg5 {
+    padding-left: 10px;
+    // padding-top: 20px;
+  }
+
+  .login_bg5 {
+    padding-right: 10px;
+    float: left;
+    // float: top;
+    padding-top: 20px;
+    // padding: 15;
+  }
+
+  .logolabsop-img {
+    width: 400px;
+  }
+
+  .footer footer {
+    overflow: hidden;
+    max-width: 1136px;
+    margin: 0 auto;
+    padding-top: 0px;
+    padding-bottom: 30px;
+  }
+  .box-card {
+      margin-top: 140px;
+      width: 300px;
+      height: 350px;
+      margin-bottom: 2.5rem;
+      // padding: 0 1.25rem;
+       background: $login-form-background;
+      color: $login-form-color;
+  }
+  .login {
+    &-form {
+      // position: absolute;
+      
+
+      .el-button {
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+    }
+  }
+
+</style>

src/dashoo.cn/frontend_web/src/pages/login_zhuanye.vue

@@ -0,0 +1,325 @@
+<template>
+  <div >
+
+    <div class="container">
+      <el-row>
+        <el-col :span="15">
+          <div class="leftpadding">
+            <img src="../assets/img/zhuanye.png" class="intelligent-img" /> </div>
+        </el-col>
+        <el-col :span="9">
+          <el-card class="box-card">
+         <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+            <h2 class="heading">登录</h2>
+            <el-form-item label="用户名" prop="username">
+              <el-input type="text" v-model="model.username" placeholder="请输入用户名">
+                <el-select v-model="loginMode" slot="append" placeholder="登录类型" style="width: 110px;">
+                  <el-option label="普通账户" :value="1"></el-option>
+                  <el-option label="PTR认证" :value="2"></el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+            </el-form-item>
+            <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
+          </el-form>
+          </el-card>
+          
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="footer">
+      <footer>
+        <el-row>
+          <el-col :span="12">
+            <div class="login_bg4">
+              <img src="../assets/img/logo2.png" class="logolabsop-img">
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div>
+              <el-row class="coptright">
+                <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>
+              </el-row>
+              <el-row>
+                <div class="license">青岛大数华创科技有限公司版权所有 Coptright @ 2019 DASHOO.</div>
+              </el-row>
+            </div>
+          </el-col>
+          <el-col :span="2">
+            <div class="login_bg5">
+              <img src="../assets/img/QR code.png" class="weixin-img">
+            </div>
+          </el-col>
+        </el-row>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Component from 'class-component'
+  @Component({
+    data() {
+      // form model
+      // TODO: remove default values
+      const model = {
+        username: '',
+        password: ''
+      }
+
+      // form validate rules
+      const rules = {
+        username: [{
+          required: true,
+          message: '请输入用户名'
+        }],
+        password: [{
+          required: true,
+          message: '请输入密码'
+        }]
+      }
+
+      return {
+        model: model,
+        rules: rules,
+        error: null,
+        loading: false
+      }
+    }
+  })
+  export default class Login extends Vue {
+    layout() {
+      return 'empty'
+    }
+    login() {
+      this.logging = true
+      this.$refs.user.validate(async (valid) => {
+        try {
+          if (valid) {
+            await this.$store.dispatch('auth/login', {
+              fields: {
+                username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
+                password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
+              }
+            })
+            if (process.env.appclient == 'lims') {
+              this.$router.push(this.$route.query.page || '/indexlims')
+            } else if (process.env.appclient == 'cellbank') {
+              this.$router.push(this.$route.query.page || '/indexdqm')
+            } else {
+              this.$router.push(this.$route.query.page || '/')
+            }
+          }
+        } catch (e) {
+          // this.$message.warning(e.message)
+          this.$message.warning('账号或密码错误')
+        } finally {
+          this.logging = false
+        }
+      })
+    }
+    logout() {
+      this.$store.dispatch('logout')
+    }
+  }
+
+</script>
+
+<style lang="scss">
+  @import '../assets/styles/base/variables';
+
+  .nav {
+    background: #fff;
+    border-bottom: 1px solid rgba(230, 230, 230, 0.99);
+    z-index: 2;
+    width: 100%;
+    position: fixed;
+    top: 0;
+  }
+
+  .nav .nav-logo {
+    padding-top: 2px;
+    padding-left: 35px;
+  }
+
+  .nav header {
+    /*shift way to clear float because of the overflow hidden will hide the algolia*/
+    padding: 0px 0 0px;
+    // max-width: 1136px;
+    min-width: 1300px;
+    margin: 0 auto;
+  }
+      .heading {
+        margin: 0 0 1rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+      }
+
+  .nav ul.nav-item {
+    height: 32px;
+    float: left;
+    line-height: 32px;
+    padding-left: 350px;
+  }
+
+  .logu {
+
+    margin-top: 100px;
+    // padding-left: 120px;
+  }
+
+  .nav ul.nav-item li {
+    display: inline-block;
+    margin-left: 40px;
+  }
+
+  .nav ul.nav-item a {
+    display: inline-block;
+    color: #3c3c3c;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+
+  .nav-logo {
+    margin: 0;
+    display: inline-block;
+    float: left;
+    padding-top: 2px;
+  }
+
+  .container {
+    text-align: center;
+    background: url("../assets/img/Background.png");
+    // min-width: 1300px;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    background-size: cover;
+    // background-position: center;
+    // position: relative;
+  }
+
+  .nav {
+    // max-width: 100%;
+    min-width: 1100px;
+    min-height: 600px;
+  }
+
+  .license {
+    padding-top: 10px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
+
+  .footer a {
+    color: #6E717C;
+  }
+
+  .nav header .search-query {
+    height: 30px;
+    line-height: 32px;
+    box-sizing: border-box;
+    border: 1px solid #e6e6e6;
+    border-radius: 15px;
+    outline: none;
+    padding: 0 15px 0 32px;
+    background-size: 20px;
+  }
+
+  .footer {
+    min-width: 1100px;
+    background: #F9F9F9;
+    border-top: 1px solid rgba(230, 230, 230, 0.99);
+    width: 100%;
+    height: 18%;
+  }
+
+  .intelligent-img {
+    width: 650px;
+    // max-width: 800px;
+    //  min-width: 20%;
+  }
+
+  .weixin-img {
+    width: 77px;
+  }
+
+  .leftpadding {
+    padding-left: 0px;
+    padding-top: 100px;
+    // padding-left: 10%;
+    // padding-top: 100px;
+  }
+
+  .login_bg4 {
+    padding-left: 20px;
+    padding-top: 5%;
+  }
+
+  .coptright {
+    padding-top: 40px;
+    padding-left: 150px;
+  }
+
+  .license {
+    padding-top: 10px;
+    padding-left: 50px;
+    font-family: sans-serif;
+    font-size: 14px;
+    color: #C7C7C7;
+  }
+
+  .login_bg5 {
+    padding-left: 10px;
+    // padding-top: 20px;
+  }
+
+  .login_bg5 {
+    padding-right: 10px;
+    float: left;
+    // float: top;
+    padding-top: 20px;
+    // padding: 15;
+  }
+
+  .logolabsop-img {
+    width: 400px;
+  }
+
+  .footer footer {
+    overflow: hidden;
+    max-width: 1136px;
+    margin: 0 auto;
+    padding-top: 0px;
+    padding-bottom: 30px;
+  }
+  .box-card {
+      margin-top: 140px;
+      width: 300px;
+      height: 350px;
+      margin-bottom: 2.5rem;
+      // padding: 0 1.25rem;
+       background: $login-form-background;
+      color: $login-form-color;
+  }
+  .login {
+    &-form {
+      // position: absolute;
+      
+
+      .el-button {
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+    }
+  }
+
+</style>