开发者登录

src/router/index.js

@@ -245,7 +245,7 @@ router.beforeEach(function(to, from, next) {
     // 根据路由元信息设置文档标题
     window.document.title = to.meta.title || '中台';
     //使用钩子函数对路由进行权限跳转
-    const login = location.href.includes('dev.huorantech.cn') ? '/devLogin' : '/login'
+    const login = location.href.includes('192.168.31.126:') ? '/devLogin' : '/login'
     if (!sessionStorage.getItem('token') && to.path !== login && to.path !== '/join' && to.path !== '/success') {
         next(login);
     } else {

src/views/devLogin.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="wrap">
-    <div class="header">
-        <div class="logo">
-            <img src="../assets/img/logo.png">
-        </div>
-    </div>
+    <img class="logo" width="200" src="../assets/img/logo-white.png">
     <div class="login">
+      <div class="box">
+        <h1>欢迎使用开发者平台</h1>
         <div class="form">
             <ul class="tab">
               <li v-for="(item, i) in tabList" :key="i" :class="{active: activeIndex == item.id}" @click="handleSelect(item.id)">{{item.label}}</li>
@@ -31,10 +29,6 @@
                     </el-input>
                     <img @click="blur" :src="verificationIMG" class="verification" alt="">
                 </el-form-item>
-              
-              <div style="width:100%;display:flex;justify-content: flex-end;">
-                  <el-button type="text" class="forget">忘记密码?</el-button>
-              </div>
                 <div class="login-btn">
                     <el-button type="primary" @click="submitForm()">马上登录</el-button>
                 </div>
@@ -61,16 +55,13 @@
                     </el-input>
                     <img @click="phoneBlur" :src="PhoneVerificationIMG" class="verification" alt="">
                 </el-form-item>
-              
-              <div style="width:100%;display:flex;justify-content: flex-end;">
-                  <el-button type="text" class="forget">忘记密码?</el-button>
-              </div>
                 <div class="login-btn">
                     <el-button type="primary" @click="submitForm('phone')">马上登录</el-button>
                 </div>
             </el-form>
         </div>
       </div>
+    </div>
     <el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="576px">
         <p class="tips">依据国家政策法规，需绑定手机号进行网络实名才可登录使用本平台</p>
         <el-form ref="form" label-width="60px">
@@ -314,22 +305,37 @@ export default {
 .wrap {
   min-height: 100%;
 }
+.logo {
+  z-index: 2;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
 .login {
   position: relative;
-  height: calc(100vh - 144px);
+  height: 100%;
   background-image: url(../assets/img/devLogin.jpg);
   background-size: 100%;
 }
-/deep/ .form {
+.box {
   width: 448px;
   position: absolute;
   right: 20%;
   top: 50%;
-    padding: 20px 40px 0;
   transform: translateY(-50%);
-    background-color: rgba(255, 255, 255, .85);
+  h1 {
+    margin-bottom: 20px;
+    font-size: 34px;
+    color: #fff;
+    text-align: center;
+  }
+}
+/deep/ .form {
+    padding: 20px 60px 0;
+    background-color: rgba(255, 255, 255, .3);
     border-radius: 4px;
     box-sizing: border-box;
+    border: 4px solid rgba(255, 255, 255, .2);
     .el-input__inner {
         height: 50px;
         line-height: 50px;
@@ -357,15 +363,16 @@ export default {
         padding: 18px 5px;
         margin: 0 20px;
         font-size: 16px;
-        color: #555;
+        font-weight: 600;
+        color: #fff;
         cursor: pointer;
         border-bottom: 2px solid transparent;
         &:last-child{
             margin-right: 0;
         }
         &.active{
-            color: #9076FF;
-            border-bottom-color: #9076FF;
+            color: #fff;
+            border-bottom-color: #ccc;
         }
     }
 }
@@ -382,8 +389,9 @@ export default {
     height: 48px;
     margin-bottom: 50px;
     font-weight: bold;
-    background: #9076FF;
+    background: #1dabff;
     border-radius: 4px;
+    border: 0;
 }
 .forget{
     margin-bottom: 28px;
@@ -394,29 +402,4 @@ export default {
         color: #0092FF;
     }
 }
-
-/* 头部 */
-.header{
-    height: 60px;
-    background-color: #fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 18px;
-}
-.logo{
-    width: 171px;
-    height: 40px;
-    margin-left: 20px;
-}
-img{
-    width: 100%;
-    height: 100%;
-}
-.tips {
-    margin: -20px 0 20px 5px;
-    font-size: 14px;
-    text-align: center;
-    color: #666;
-}
 </style>