登录界面研发完成

h5_web/pages/phoneLogin/phoneLogin.vue

@@ -1,23 +1,27 @@
 <template>
-	<view class="wrap">
-		<view class="content">
-			<view class="title">手机号登录</view>
-			<input class="u-border-bottom" type="number" maxlength="11" v-model="tel" placeholder="请输入手机号" />
+	<view class="phonelogin">
+    <u-navbar title-color="#FFFFFF" :custom-back="customBack" :bpay-bottom="false" back-icon-color="#FFFFFF" :background="{background: 'transparent' }" title="手机登录" class="phonelogin-unavbar" />
+    <view class="phonelogin-title">
+      <view>欢迎您！</view>
+      <view>登录退役军人服务移动端</view>
+    </view>
+		<view class="phonelogin-content">
+			<!-- <input class="u-border-bottom" type="number" maxlength="11" v-model="tel" placeholder="请输入手机号" /> -->
+      <u-input class="u-border-bottom phonelogin-content-input" v-model="tel" :type="number" maxlength="11" placeholder="请输入手机号" />
 			<view class="u-text-center u-type-error u-m-t-20" v-if="telError">手机号输入错误</view>
-			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
-			<u-message-input v-if="show" :focus="true" :value="messageCode" @change="change" @finish="finish" mode="bottomLine" :maxlength="codelength"></u-message-input>
+			<button @tap="submit" :style="[inputStyle]" class="phonelogin-content-getcaptcha">获取验证码</button>
+			<u-message-input v-if="show" :focus="true" :value="messageCode" @change="change" @finish="finish" mode="bottomLine" :maxlength="codelength" class="phonelogin-content-messageinput"></u-message-input>
 		</view>
 		<!-- <view class="u-text-center u-type-error" v-if="phoneError">手机号输入错误</view> -->
-		<view class="captcha">
+		<view class="phonelogin-captcha">
 			<!-- <text v-if="show&&this.messageDisable==false" @tap="noCaptcha">收不到验证码点这里</text> -->
 			<text v-if="messageShow">{{ second }}秒后可重新获取验证码</text>
 		</view>
-		<view class="buttom">
-			<view class="hint u-text-center">
-				登录代表同意
-				<text class="link" @tap="jumpToPage(1)">《用户服务条款》</text>和
-				<text class="link" @tap="jumpToPage(2)">《隐私政策》</text>
-				并授权使用您的账号信息（如昵称、头像、收货地址）以便您统一管理
+		<view class="phonelogin-pact" :class="messageShow?'phonelogin-msgpact':''">
+			<view class="phonelogin-pact-hint u-text-center">
+				进入即代表同意
+				<text class="link" @tap="jumpToPage(1)">《用户协议》</text>及
+				<text class="link" @tap="jumpToPage(2)">《隐私协议》</text>
 			</view>
 		</view>
 		<u-toast ref="uToast" />
@@ -267,53 +271,116 @@ export default {
 
 <style lang="scss" scoped>
 .hide{display: none!important;}
-.wrap {
-	font-size: 28rpx;
-	.content {
-		width: 600rpx;
-		margin: 80rpx auto 0;
-
-		.title {
-			text-align: left;
-			font-size: 60rpx;
-			font-weight: 500;
-			margin-bottom: 100rpx;
-		}
-		input {
-			text-align: left;
-			margin-bottom: 10rpx;
-			padding-bottom: 20rpx;
-			border-bottom: 1px solid #ddd;
-		}
-		.getCaptcha {
-			margin: 45rpx auto 130rpx;
-			background-color: #a8c6f1;
-			color: $u-tips-color;
-			border: none;
-			font-size: 30rpx;
-			padding: 12rpx 0;
-			
-			&::after {
-				border: none;
-			}
-		}
-	}
-	.buttom {
-		.hint {
-			padding: 20rpx 40rpx;
-			font-size: 20rpx;
-			color: $u-tips-color;
-			
-			.link {
-				color: $u-type-warning;
-			}
-		}
-	}
-	.captcha {
-		color: $u-type-warning;
-		font-size: 30rpx;
-		margin-top: 40rpx;
-		text-align: center;
-	}
+.phonelogin{
+  width: 100%;
+  height: 100vh;
+  background-image: url(../../static/img/phonelogin-bg-png.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  
+  &-unavbar{
+    ::v-deep .u-border-bottom:after {
+      border-bottom-width: 0 !important;
+    }
+  }
+  
+  &-title{
+    padding: 10% 4% 6%;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #FFFFFF;
+    line-height: 98rpx;
+    letter-spacing: 2rpx;
+    
+    view:first-child{
+      font-size: 70rpx;
+    }
+    
+    view:last-child{
+      font-size: 56rpx;
+    }
+  }
+  
+  &-content{
+    padding: 0 4%;
+    
+    &-input{
+      ::v-deep {
+        .uni-input-placeholder {
+          text-align: center;
+          font-size: 40rpx;
+          font-family: PingFangSC-Heavy, PingFang SC;
+          color: #FFFFFF !important;
+          letter-spacing: 1px;
+          line-height: 60rpx;
+          opacity: 0.6;
+        }
+        .uni-input-input{
+          text-align: center;
+          font-size: 60rpx;
+          font-family: PingFangSC-Heavy, PingFang SC;
+          font-weight: 800;
+          color: #FFFFFF;
+          line-height: 83rpx;
+          letter-spacing: 1px;
+        }
+      }
+      
+      &:after {
+          top: 21rpx;
+      }
+    }
+    
+    &-getcaptcha{
+      margin-top: 10%;
+      color: $u-tips-color;
+      border: none;
+      padding: 14rpx 0;
+      background-color: rgba(255, 255, 255, 0.5);
+      border-radius: 55rpx;
+      font-size: 40rpx;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #6A5C52;
+      line-height: 83rpx;
+      
+      &::after {
+      	border: none;
+      }
+    }
+    
+    &-messageinput{
+      ::v-deep .u-char-item{
+        color: #FFFFFF !important;
+        
+        .u-bottom-line, .u-placeholder-line{
+          background: #FFFFFF !important;
+        }
+      }
+    }
+  }
+  
+  &-captcha{
+    color: $u-type-warning;
+    font-size: 30rpx;
+    margin-top: 40rpx;
+    text-align: center;
+  }
+  
+  &-pact{
+    width: 100%;
+    
+    &-hint{
+      font-size: 28rpx;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 83rpx;
+      opacity: 0.7;
+      .link {
+      	color: $u-type-warning;
+      }
+    }
+  }
 }
 </style>