样式迁移

pages/login/index.vue

@@ -14,25 +14,31 @@
 
 			<view class="login">
 				<view class="login-box">
-					<view class="tel highlight">
+					<view :class="['tel',telHighlight==true?'highlight':'']" >
 						<view class="icon">
-							<u-icon name="account-fill" size="40" color="#1F4A99 "></u-icon>
+							<u-icon name="account-fill" size="40"></u-icon>
 
 						</view>
-						<u-line color="red" direction="col" length="40rpx" margin="auto 0" />
+						<view class="line">
+						</view>
 						<view class="tips">
-							<u-input type="number"  v-model="form.phone" placeholder="请填写系统预留手机号码" />
+							<u-input type="number"
+							   @focus="handleTelFocus" @blur="handleTelBlur" 
+							  v-model="form.phone" placeholder="请填写系统预留手机号码" />
 						</view>
 					</view>
-					<view class="pwd">
+					<view :class="['pwd',pwdHighlight==true?'highlight':'']">
 						<view class="icon">
 							<u-icon name="chat-fill" size="40"></u-icon>
 
 						</view>
-						<u-line color="red" direction="col" length="40rpx" margin="auto 0" />
+						<view class="line">
+						</view>
 						<view class="tips">
 							<view class="input">
-								<u-input type="number" v-model="form.code"  placeholder="请输入验证码" />
+								<u-input type="number" v-model="form.code" 
+								  @focus="handlePwdFocus" @blur="handlePwdBlur" 
+								 placeholder="请输入验证码" />
 							</view>
 							<view class="verification-code"  @click="getCode"  >{{codeTips}}</view>
 							<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
@@ -76,7 +82,9 @@
 				sendMsgSecond: 60 * 2,
 				customStyle: {
 					background: '#1677ff'
-				}
+				},
+				telHighlight:false,
+				pwdHighlight:false
 			}
 		},
 		onLoad(op) {
@@ -93,6 +101,20 @@
 			
 		},
 		methods: {
+			// 帐号框聚焦失焦
+			handleTelFocus(){
+				this.telHighlight=true
+			},
+			handleTelBlur(){
+				this.telHighlight=false
+			},
+			// 密码框聚焦失焦
+			handlePwdFocus(){
+				this.pwdHighlight=true
+			},
+			handlePwdBlur(){
+				this.pwdHighlight=false
+			},
 			goBack(){
 				uni.redirectTo({
 					url: '/'
@@ -300,9 +322,17 @@
 				width: 400rpx;
 			}
 		}
-
+    .line{
+			  width: 2rpx;
+			  height: 40rpx;
+			  background-color: #C1CCDF;
+			  position: absolute;
+			  top: 20rpx;
+			  left: 70rpx;
+		  }
 		.tel,
 		.pwd {
+				position: relative;
 			display: flex;
 			width: 74.4%;
 			height: 80rpx;
@@ -319,7 +349,7 @@
 			.icon {
 				width: 14%;
 				text-align: center;
-
+   color: #B0B8C8;
 				img {
 					vertical-align: middle;
 				}
@@ -355,6 +385,12 @@
 			/deep/.u-input__input{
 				color: rgba(0, 90, 217, 1);
 			}
+			.icon{
+				color: #1F4A99;
+			}
+			.line{
+						  background-color: #005AD9;
+			}
 		}
 	}