登录页

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

@@ -1,64 +1,26 @@
 <template>
-  <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>
+  <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>
-    </div>
+    </section>
   </div>
 </template>
 
@@ -135,191 +97,86 @@
 <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;
+  .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;
   }
 
-  .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;
+  .login {
+    flex: 1;
     width: 100%;
-    height: 100%;
+    max-width: 22rem;
     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;
-  }
+    font-size: 0.875rem;
+    opacity: 0.8;
 
-  .leftpadding {
-    padding-left: 0px;
-    padding-top: 100px;
-    // padding-left: 10%;
-    // padding-top: 100px;
-  }
+    &-header {
+      margin-bottom: 1rem;
 
-  .login_bg4 {
-    padding-left: 20px;
-    padding-top: 5%;
-  }
+      .brand {
+        margin: 4.5rem 0 3.5rem;
+        text-align: center;
+        letter-spacing: 0.125rem;
 
-  .coptright {
-    padding-top: 40px;
-    padding-left: 150px;
-  }
+        a {
+          margin: 0;
+          color: $brand-color;
+          font: 300 3rem sans-serif;
 
-  .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;
-  }
+          &:hover {
+            color: $brand-hover-color;
+            text-shadow: 0 0 1rem $brand-hover-color;
+          }
+        }
+      }
+    }
 
-  .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;
+    &-form {
       margin-bottom: 2.5rem;
-      // padding: 0 1.25rem;
-       background: $login-form-background;
+      padding: 1.875rem 1.25rem;
+      background: $login-form-background;
       color: $login-form-color;
-  }
-  .login {
-    &-form {
-      // position: absolute;
-      
+
+      .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

@@ -53,7 +53,7 @@
           </el-col>
           <el-col :span="2">
             <div class="login_bg5">
-              <img src="../assets/img/QR code.png" class="weixin-img">
+              <img src="../assets/img/QRcode.png" class="weixin-img">
             </div>
           </el-col>
         </el-row>

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

@@ -53,7 +53,7 @@
           </el-col>
           <el-col :span="2">
             <div class="login_bg5">
-              <img src="../assets/img/QR code.png" class="weixin-img">
+              <img src="../assets/img/QRcode.png" class="weixin-img">
             </div>
           </el-col>
         </el-row>

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

@@ -156,7 +156,6 @@
         font-size: 1.5rem;
       }
 
-
       .el-button {
         margin-top: 0.5rem;
         width: 100%;

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

@@ -53,7 +53,7 @@
           </el-col>
           <el-col :span="2">
             <div class="login_bg5">
-              <img src="../assets/img/QR code.png" class="weixin-img">
+              <img src="../assets/img/QRcode.png" class="weixin-img">
             </div>
           </el-col>
         </el-row>