login.vue设计

src/dashoo.cn/frontend_web/nuxt.config.js

@@ -159,13 +159,13 @@ module.exports = {
   },
 
   axios: {
-    // baseURL: '//localhost:10091/api/' // 本机开发使用
+    baseURL: '//localhost:10091/api/' // 本机开发使用
     // baseURL: '//47.92.212.59:10091/api/' // Lims使用
     // baseURL: '//api09.labsop.cn/api/'
     // baseURL: '//52.80.133.197:10091/api/' // DQM 爱萨尔发布使用
     // baseURL: '//192.168.0.211:10091/api/' // 花生所系统
     // baseURL: '//121.42.244.202:9081/api/' // 基石发布使用
-    baseURL: '//52.80.133.197:9081/api/' // BioBank on AWS发布使用
+    // baseURL: '//52.80.133.197:9081/api/' // BioBank on AWS发布使用
     // baseURL: '//52.80.133.197:10092/api/' // 因顿LIMS发布
     // baseURL: '//188.188.30.89:9081/api/' //临沂使用
     // proxyHeaders: false

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

@@ -1,39 +1,64 @@
 <template>
-
-  <div style="height: calc(100vh); width: 100%; background-color:#FFFFFF" >
-    <img src="../assets/img/title_gongfang.png" style="height:50px; margin-top: 20px;margin-left: 100px;"  >
-    <div class="back-width">
-      <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-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>
-
-
-        </section>
-      </div>
-    </div>
-    <div >
-      <footer class="login-footer" style="color:#A9A9A9">
-        ©大港油田信息中心 版权所有
-      </footer>
-    </div>
+  <div class="login-body">
+    <el-container>
+      <el-header style="height:100px">
+        <div style="top: 18px; position: relative;">
+          <img src="../assets/img/title_gongfang.png">
+        </div>
+      </el-header>
+      <el-main style="height:800px;">
+        <el-container>
+          <el-main style="height:760px; padding:5px 20px 0 15px; background-color: #D3DCE6;">
+            <div>
+              <div style="height:365px; background-color: white;">
+                <div style="padding: 10px 0 0 15px;"><img src="../assets/img/tongzhigonggao.jpg" style="height: 40px; width: 100px;"></div>
+                <div>
+                  <ul type="circle">
+                    <li>苹果</li>
+                    <li>香蕉</li>
+                    <li>柠檬</li>
+                    <li>桔子</li>
+                  </ul>
+                </div>
+              </div>
+              <div style="height:365px; background-color: white; margin: 20px 0 0 0;">
+                <div style="padding: 10px 0 0 15px;"><img src="../assets/img/ziliaoxiazai.jpg" style="height: 40px; width: 100px;"></div>
+                <div>
+                  <ul type="circle">
+                    <li>苹果</li>
+                    <li>香蕉</li>
+                    <li>柠檬</li>
+                    <li>桔子</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </el-main>
+          <el-aside style="height:760px; width:300px;">
+            <div style="padding: 5px 10px 0 0;">
+              <el-form auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+                <p style="font-size: 20px; margin: 15px 0 5px 0; font-weight: 500;">登录</p>
+                <el-form-item label="用户名" prop="username" style="text-align:left;">
+                  <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" style="text-align:left;">
+                  <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+                </el-form-item>
+                <el-button type="primary" :loading="loading" @click="login()" style="width:100px">{{ loading ? '登录中...' : '登录' }}</el-button>
+              </el-form>
+            </div>
+          </el-aside>
+        </el-container>
+      </el-main>
+      <el-footer style="height:30px; font-size:10px; padding: 7px;">
+        <div>©大港油田信息中心 版权所有</div>
+      </el-footer>
+    </el-container>
   </div>
 </template>
 
@@ -42,14 +67,10 @@
   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,
@@ -85,7 +106,7 @@
                 password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
               }
             })
-            if (process.env.appclient == 'lims') {
+            if (process.env.appclient == 'gfgl') {
               this.$router.push(this.$route.query.page || '/')
             } else if (process.env.appclient == 'cellbank') {
               this.$router.push(this.$route.query.page || '/indexdqm')
@@ -94,7 +115,6 @@
             }
           }
         } catch (e) {
-          // this.$message.warning(e.message)
           this.$message.warning('账号或密码错误')
         } finally {
           this.logging = false
@@ -109,116 +129,32 @@
 </script>
 
 <style lang="scss">
-  @import '../assets/styles/base/variables';
-
-  .back-width {
-    background-color: #2F79F6;
-    position: fixed;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 70px;
-    width: 100%;
-    height: 550px;
+  .el-header {
+    background-color: #41adec;
+    text-align: center;
   }
-
-  .login-body {
-
-    background: url("../assets/img/tian.png") no-repeat left 50%;
-    font-family: 'Open Sans', sans-serif;
-    background-color: #2469E8;
-    background-size: cover;
-
-    /*background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;*/
-    /*min-height: 1050px;*/
-
-    position: absolute;
-
-    margin: auto;
-    left: -400px;
-    right: 0;
-    bottom: 0;
-    width: 899px;
-    height: 550px;
-    /*
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;*/
+  
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
   }
 
-  .login-footer {
-    font-size: 10px;
-    clear: both;
-    display: block;
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
     text-align: center;
-    margin: 0px auto;
-    position: absolute;
-    bottom: 10px;
-    width: 100%;
-
-    a {
-      color: $brand-color;
-    }
   }
 
-  .login {
-    /*flex: 1;
-    width: 100%;*/
-    position: relative;
-    max-width: 22rem;
-    top: 60px;
-    left: 850px;
-    font-size: 0.875rem;
-    opacity: 0.9;
-
-    &-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%;
-      }
-    }
-
-
+  .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
   }
 
-  .nuxt-progress {
-    display: none;
+  .login-body {
+    margin: auto;
+    width: 1000px;
+    height: 1300px;
   }
 
 </style>

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

@@ -0,0 +1,224 @@
+<template>
+
+  <div style="height: calc(100vh); width: 100%; background-color:#FFFFFF" >
+    <img src="../assets/img/title_gongfang.png" style="height:50px; margin-top: 20px;margin-left: 100px;"  >
+    <div class="back-width">
+      <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-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>
+
+
+        </section>
+      </div>
+    </div>
+    <div >
+      <footer class="login-footer" style="color:#A9A9A9">
+        ©大港油田信息中心 版权所有
+      </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 {
+        loginMode: 1,
+        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 || '/')
+            } 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';
+
+  .back-width {
+    background-color: #2F79F6;
+    position: fixed;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 70px;
+    width: 100%;
+    height: 550px;
+  }
+
+  .login-body {
+
+    background: url("../assets/img/tian.png") no-repeat left 50%;
+    font-family: 'Open Sans', sans-serif;
+    background-color: #2469E8;
+    background-size: cover;
+
+    /*background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;*/
+    /*min-height: 1050px;*/
+
+    position: absolute;
+
+    margin: auto;
+    left: -400px;
+    right: 0;
+    bottom: 0;
+    width: 899px;
+    height: 550px;
+    /*
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;*/
+  }
+
+  .login-footer {
+    font-size: 10px;
+    clear: both;
+    display: block;
+    text-align: center;
+    margin: 0px auto;
+    position: absolute;
+    bottom: 10px;
+    width: 100%;
+
+    a {
+      color: $brand-color;
+    }
+  }
+
+  .login {
+    /*flex: 1;
+    width: 100%;*/
+    position: relative;
+    max-width: 22rem;
+    top: 60px;
+    left: 850px;
+    font-size: 0.875rem;
+    opacity: 0.9;
+
+    &-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%;
+      }
+    }
+
+
+  }
+
+  .nuxt-progress {
+    display: none;
+  }
+
+</style>