登录及首页

src/pages/login.vue

@@ -11,9 +11,11 @@
         </div>
       </div>
     </transition>
-    <div class="bird-icon" />
+    <div class="bird-icon">
+      <h2>Hello!</h2>
+      <h3>欢迎使用租赁通～</h3>
+    </div>
     <div class="login-wrap">
-      <img class="title" src="../assets/login/right-title.png" >
       <div class="pwd">
         <div class="pwd-input">
           <input
@@ -24,7 +26,7 @@
           <img src="../assets/login/login-delete.png" >
         </div>
       </div>
-      <div class="pwd">
+      <div class="pwd" style="margin-top: 15px">
         <div class="pwd-input">
           <input
             id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码"
@@ -38,11 +40,9 @@
         <div class="register" @click="registerNew">注册</div>
         <div class="pwd-forgotten" @click="pwdForgotten">忘记密码？</div>
       </div>
-      <div class="both-button">
-        <div class="button submit" @click="access">登录</div>
-        <div class="button submit" @click="goHome">游客体验</div>
     </div>
-
+    <div class="login-btn">
+      <div class="button submit" @click="access">登录</div>
     </div>
   </scroll>
 </template>
@@ -104,10 +104,10 @@ export default {
   methods: {
     async goHome () {
       hlsPopup.showLongCenter('游客体验暂不可用！')
-      /*let flag = await this.getAccessToken()
+      /* let flag = await this.getAccessToken()
       if (flag) {
         this.$router.push('tab')
-      }*/
+      } */
     },
     changeType () {
       this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
@@ -143,12 +143,12 @@ export default {
           window.localStorage.setItem('user_phone', vm.username)
           window.localStorage.setItem('app_user_id', res.info.app_user_id)
           // vm.$router.push('tab')
-          vm.$router.push('/choose-user');
+          vm.$router.push('/choose-user')
           let tagOption = {
-            'username': isNaN(Number(vm.username)) ? '11111111111': vm.username
+            'username': isNaN(Number(vm.username)) ? '11111111111' : vm.username,
           }
-          let phone = isNaN(Number(vm.username)) ? '11111111111': vm.username;
-            vm.Jpush._jpush_config(tagOption, phone);
+          let phone = isNaN(Number(vm.username)) ? '11111111111' : vm.username
+          vm.Jpush._jpush_config(tagOption, phone)
         } else {
           hlsPopup.hideLoading()
           hlsPopup.showLongCenter(res.message)
@@ -313,7 +313,7 @@ export default {
     opacity: 0;
   }
 #login {
-  background: url("../assets/login/background.png") no-repeat;
+  background: url("../assets/login/background@3x.png") no-repeat;
   background-size: 100% 100%;
   background-position-x: 0px;
   color: #ffffff;
@@ -386,23 +386,28 @@ export default {
     }
   }
   .bird-icon {
-    padding-top: 30%;
-    background-size: 51px 25px;
+    padding-top: 35%;
+    h2,h3{
+      font-family: AlibabaPuHuiTi_2_85_Bold;
+      font-size: 27px;
+      color: #007BC7;
+      font-weight: 700;
+      margin-left: 10%;
+    }
+    h3{
+      font-size: 20px;
+      margin-top: 5px;
+    }
   }
   .login-wrap {
     width: 87%;
-    height: 355px;
+    height: auto;
     margin: 0 auto;
     background-color: #fff;
-    border-radius: 8px;
-    // margin-top: 15%;
-    margin-top: 6%;
-    padding: 32px 24px;
-    .title {
-      width: 227px;
-      height: 71px;
-      margin-left: -10px;
-    }
+    margin-top: 18%;
+    padding: 0 24px 20px 24px;
+    box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
+    border-radius: 10px;
   }
   .pwd {
     position: relative;
@@ -410,6 +415,7 @@ export default {
     margin: 0 auto;
     display: flex;
     display: -webkit-flex;
+
     .pwd-icon {
       margin-top: 2px;
       margin-right: 6px;
@@ -439,7 +445,7 @@ export default {
         line-height: 35px;
         display: flex;
         align-items: center;
-        border-bottom: 1px solid rgba(42, 42, 42, 0.4);
+        border-bottom: 1px solid rgba(226,226,226,1);
         margin-top: 30px;
         border-top:1px solid #FFF;
         border-left: 1px solid #FFF;
@@ -472,21 +478,21 @@ export default {
     display: flex;
     font-family: PingFangSC-Regular;
     font-size: 13px;
-    color: #1d3fff;
-    margin-top: 8px;
+    color: #007BC7;
+    margin-top: 15px;
     font-weight: 500;
     display: -webkit-flex;
     justify-content: space-between;
     -webkit-justify-content: space-between;
   }
-  .both-button{
+  .login-btn {
     display: flex;
     justify-content: space-around;
   }
   .submit {
-    background: #1d3fff;
-    border-radius: 4px;
-    width: 130px;
+    background: #007BC7;
+    border-radius: 50px;
+    width: 70%;
     margin-top: 32px;
     height: 45px;
     font-size: 16px;

src/pages/pwd-forgotten.vue

@@ -15,7 +15,7 @@
           <input slot="content" v-model="phone_number" placeholder="请输入手机号码">
         </item>
         <item>
-          <img slot="left-icon" src="../assets/login/phone_code.png" class="left-icon">
+          <img slot="left-icon" src="../assets/login/check@3x.png" class="left-icon">
           <div slot="name" class="required">验证码</div>
           <input slot="content" v-model="verifiedCode" type="text" placeholder="请填写验证码">
           <div slot="right-icon" class="verified-code">

src/pages/regiester2.vue

@@ -5,11 +5,13 @@
         <img src="@/assets/login/return.png" @click="returnLogin">
       </div>
       <div class="box">
-        <div class="box-content">
-          <img class="register-title" src="../assets/login/right-title.png" >
+        <div class="welcome">
+          <h2>欢迎注册！</h2>
+        </div>
+        <div class="register-content">
           <div class="reg-item">
-            <img src="../assets/login/reg-user.png" class="left-icon" >
-            <input v-model="phone_number" placeholder="请输入手机号码" >
+            <img src="../assets/login/phone.png" class="left-icon">
+            <input v-model="phone_number" placeholder="请输入手机号码">
             <img
               v-if="phone_number"
               class="right-icon"
@@ -18,15 +20,15 @@
             >
           </div>
           <div class="reg-item">
-            <img src="../assets/login/check.png" class="left-icon" >
-            <input v-model="verifiedCode" type="text" placeholder="请填写验证码" >
+            <img src="../assets/login/check@3x.png" class="left-icon">
+            <input v-model="verifiedCode" type="text" placeholder="请填写验证码">
             <div class="verified-code">
-              <div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">点击获取</div>
+              <div v-if="!showTimer" class="verified-code-box" @click="getPhoneCode">获取验证码</div>
               <span v-if="showTimer" class="verified-code-des">{{ timerCount }}{{ text }}</span>
             </div>
           </div>
           <div class="reg-item">
-            <img src="../assets/login/pass.png" class="left-icon" >
+            <img src="@/assets/login/passwordConfirm.png" class="left-icon">
             <input
               v-model="user_password"
               :type="pwdType"
@@ -35,15 +37,19 @@
               oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
 
             >
-            <img v-if="user_password" :src="openEye" class="right-icon" @click="changeType" >
+            <img v-if="user_password" :src="openEye" class="right-icon" @click="changeType">
           </div>
           <div class="reg-item">
-            <img src="../assets/login/pass.png" class="left-icon" >
+            <img src="../assets/login/passwordConfirm.png" class="left-icon">
             <input
-              v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')" placeholder="请重新输入密码"
+              v-model="confirm" :type="pwdType" oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')"
+              placeholder="请重新输入密码"
             >
-            <img v-if="confirm" :src="openEye" class="right-icon" @click="changeType" >
+            <img v-if="confirm" :src="openEye" class="right-icon" @click="changeType">
+          </div>
+
         </div>
+        <div class="register-btn">
           <div class="button submit" @click="submit">注册</div>
         </div>
       </div>
@@ -133,7 +139,6 @@ export default {
     },
     getPhoneCode () {
       let vm = this
-      debugger
       if (!vm.showTimer) {
         if (
           hlsUtil.phoneNumber(vm.phone_number) ||
@@ -251,40 +256,57 @@ export default {
 </script>
 
 <style lang="less">
-@import "../styles/mixin";
-@import "../styles/vue-1px";
+  @import "../styles/mixin";
+  @import "../styles/vue-1px";
 
-#register {
+  #register {
     .content {
-    background: url("../assets/login/background.png");
+      background: url("../assets/login/register-back@3x.png") no-repeat;
       background-size: 100% 100%;
     }
+
     .box {
-    width: 327px;
-    height: 512px;
-    margin: 0 auto;
-    margin-top:80px;
-    background: #1d3fff;
-    border-radius: 8px;
-    .box-content {
-      width: 279px;
-      margin: 0 auto;
-      .register-title {
-        width: 156px;
+      width: 100%;
+      height: auto;
+      padding-top: 35%;
+
+      .welcome {
+        //margin-top: 35%;
+        h2 {
+          margin-left: 10%;
+          font-family: AlibabaPuHuiTi_2_85_Bold;
+          font-size: 27px;
+          color: @theme-color;;
+          font-weight: 700;
+        }
       }
+
+      .register-content {
+        width: 87%;
+        margin: 0 auto;
+        background: #FFFFFF;
+        box-shadow: 0px 3px 20px 0px rgba(0,123,199,0.2);
+        border-radius: 10px;
+        padding: 20px 24px 30px 24px;
+        margin-top: 60px;
         .reg-item {
           position: relative;
           width: 100%;
           height: 40px;
           margin-top: 30px;
           line-height: 30px;
+          &:first-child {
+            margin-top: 6px;
+          }
           img {
             width: 28px;
             height: 28px;
           }
+
           .left-icon {
             position: absolute;
           }
+
           .right-icon {
             width: 24px;
             height: 24px;
@@ -292,124 +314,88 @@ export default {
             right: 0px;
             top: 5px;
           }
+
           .verified-code {
             position: absolute;
             right: 0px;
             top: 0px;
+
             .verified-code-box {
               padding-left: 12px;
               border-left: 1px solid #ffffff;
-            color: #fff;
-            font-family: PingFangSC-Regular;
+              color: @theme-color;;
               font-size: 14px;
               line-height: 30px;
             }
+
             .verified-code-des {
               font-size: 10px;
               color: #fff;
             }
           }
+
           input {
             width: 100%;
             text-indent: 30px;
-          background-color: #1d3fff;
-          font-family: PingFangSC-Regular;
             padding-bottom: 8px;
             font-size: 14px;
-          color: #ffffff;
             line-height: 30px;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.4);
-        }
-        input::placeholder {
-          font-family: PingFangSC-Regular;
-          font-size: 14px;
-          color: rgba(255, 255, 255, 0.6);
+            border-bottom: 1px solid rgba(226,226,226,1);
           }
+
           input:focus {
-          border-bottom: 1px solid #fff;
-        }
+            border-bottom: 1px solid #1d3fff;
           }
+          input::-webkit-input-placeholder {
+            font-size: 14px;
+            color: rgba(75, 74, 75, 0.4);
           }
         }
-  .right-logo {
-        width: 327px;
-margin: 0 auto;
-margin-top:10%;
-    img:last-child{
-float: right;
-    width: 50px;
-    }
-  img:first-child{
-float:left;
-    width: 20px;
-    }
-    // img {
-    //   width: 50px;
-    // }
-  }
-
-  .register-title {
-    margin-top: 16%;
-    // margin-left: 10%;
-
-    img {
-      width: 180px;
-    }
       }
-
-  .hls-list-item {
-    width: 90%;
-    margin-left: 8%;
-    margin-top: 6%;
-    background: #1d3fff;
     }
 
-  .hls-item .contents {
-    //.setBottomLine(rgba(29,63,255,0.25))
-    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
-  }
+    .right-logo {
+      width: 327px;
+      margin: 0 auto;
+      margin-top: 10%;
 
-  .hls-item .contents .add-name .left-icon {
-    width: 26px;
+      img:last-child {
+        float: right;
+        width: 50px;
       }
 
-  .hls-item .contents .add-content input {
-    text-align: left;
-    background-color: #1d3fff;
-    font-family: PingFangSC-Regular;
-    font-size: 14px;
-    color: #ffffff;
-  }
-  .hls-item .contents .add-content input::placeholder {
-    font-family: PingFangSC-Regular;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .add-content {
-    .right-icon {
-      width: 14px;
+      img:first-child {
+        float: left;
+        width: 20px;
       }
     }
 
+    .register-btn{
+      margin-top: 30px;
+      display: flex;
+      justify-content: center;
       .submit {
-    background: #ffffff;
-    border-radius: 4px;
-    color: @headerColor;
-    width: 279px;
-    height: 40px;
-    margin-top: 50px;
+        color: #fff;
+        background: @theme-color;
+        height: 44px;
+        border-radius: 50px;
+        width: 70%;
         display: flex;
         display: -webkit-flex;
         justify-content: center;
         -webkit-justify-content: center;
         align-items: center;
         -webkit-align-items: center;
+
         &.activated {
           opacity: 0.8;
           -webkit-transform: scale(1, 1);
           transform: scale(1, 1);
         }
       }
+    }
+
+
     .return {
       opacity: 1;
       background: #fff;
@@ -424,11 +410,12 @@ float:left;
       -webkit-justify-content: center;
       align-items: center;
       -webkit-align-items: center;
+
       &.activated {
         opacity: 0.8;
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);
       }
     }
-}
+  }
 </style>

src/styles/variables.less

@@ -15,14 +15,14 @@
 /**
 * 颜色
 */
-@theme-color:#1D3FFF;
+@theme-color:#007BC7;
 @font-color:#666666;
 @mainColor: #000;
 @baseColor: white;
 @hintColor:rgb(181,181,181);
-@headerColor: #1D3FFF;
+@headerColor: #007BC7;
 @background-color-gray: #fafafa;
-@activated-color: #1D3FFF;
+@activated-color: #0263c7;
 @divider-color:#fafafa;
 @check-box-bg:#48D2A0;