食堂管理 登录

pages/canteenManagement/login.vue

@@ -1,6 +1,57 @@
 <template>
 	<view>
 		
+		<view class="main">
+			
+			<view class="logo">
+				<img src="../../assets/img/logo.png" alt="">
+			</view>
+			<view class="name">
+				食堂管理系统
+			</view>
+
+			<view class="login">
+				<view class="login-box">
+					
+						<view :class="['tel',telHighlight==true?'highlight':'']" >
+						<view class="icon" >
+							<u-icon name="account-fill" size="40" ></u-icon>
+						</view>
+						
+						
+						<view class="line">
+						</view>
+						<view class="tips">
+							<u-input v-model="phone"  @focus="handleTelFocus" @blur="handleTelBlur" class="telInput" type="number" placeholder="请输入手机号" />
+						<!-- <view class="clear" v-if="this.telHighlight==true">
+							<img src="../../assets/img/riFill-close-circle-fill@1x.png" alt="">
+						</view> -->
+						</view>
+					</view>
+					
+					<view :class="['pwd',pwdHighlight==true?'highlight':'']" >
+						<view class="icon">
+							<u-icon name="chat-fill" size="40"></u-icon>
+
+						</view>
+						<view class="line">
+						</view>
+						<view class="tips">
+							<view class="input">
+								<u-input   :type="type" :password-icon="passwordIcon" @focus="handlePwdFocus" @blur="handlePwdBlur"   placeholder="请输入密码" />
+							</view>
+							
+
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="btn">
+				<button>登录</button>
+			</view>
+		</view>
+		
 	</view>
 </template>
 
@@ -8,15 +59,171 @@
 	export default {
 		data() {
 			return {
-				
+                show:true,
+			    telHighlight:false,
+				pwdHighlight:false,
+				type: 'password',
+			    passwordIcon: true,
+				phone:'',
 			}
 		},
 		methods: {
-			
+			// 帐号框聚焦失焦
+			handleTelFocus(){
+				this.telHighlight=true
+			},
+			handleTelBlur(){
+				this.telHighlight=false
+			},
+			// 密码框聚焦失焦
+			handlePwdFocus(){
+				this.pwdHighlight=true
+			},
+			handlePwdBlur(){
+				this.pwdHighlight=false
+			}
+               
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	page {
+	   background: url("../../assets/img/bgc.png");
+	}
+
+	
+	
+	
+
+	.main {
+		width: 100%;
+		padding-top:240rpx;
+		position: relative;
+        .close{
+			position: absolute;
+			top: 24rpx;
+			left: 24rpx;
+		}
+		.logo {
+			display: flex;
+			justify-content: center;
+		}
+
+		.name {
+			color: rgba(16, 16, 16, 1);
+			font-size: 40rDDpx;
+			text-align: center;
+			font-weight: bold;
+			margin-top: 8rpx;
+			font-family: 'SemiBold';
+		}
+
+	}
+
+	.login-box {
+		margin-top: 160rpx;
+
+		.tel {
+			/deep/.u-input {
+				width: 450rpx;
+			}
+		}
+		.pwd{
+			/deep/.u-input {
+				width: 450rpx;
+			}
+		}
+		.clear{
+			   img{
+				   vertical-align: middle;
+			   }
+		}
+		
+		
+          .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;
+			line-height: 80rpx;
+			color: rgba(183, 172, 172, 1);
+			margin: auto;
+			margin-bottom: 36rpx;
+			border: 1px solid rgba(193, 204, 223, 1);
+			border-radius: 8px;
+           /deep/.u-input__input{
+			   font-size: 32rpx;
+		   }
+			.icon {
+				width: 14%;
+				text-align: center;
+                color: #B0B8C8;
+				img {
+					vertical-align: middle;
+				}
+			}
+
+
+			.tips {
+				
+				text-indent: 16rpx;
+				padding-right: 16rpx;
+				display: flex;
+				justify-content: space-between;
+
+				/deep/uni-input {
+					height: 80rpx !important;
+					line-height: 80rpx !important;
+				}
+
+				.input {
+					width: 60%;
+				}
+			}
+
+			/deep/.uicon-eye-fill,/deep/.uicon-eye{
+				color: rgba(0, 90, 217, 1) !important;
+			}
+		}
+        // 高亮
+		.highlight {
+			border: 1px solid rgba(31, 74, 153, 1);
+			box-shadow: 0px 0px 8rpx 0px rgba(0, 90, 217, 50);
+			/deep/.u-input__input{
+				color: rgba(0, 90, 217, 1);
+			}
+			.icon{
+				color: #1F4A99;
+			}
+			.line{
+						  background-color: #005AD9;
+			}
+		}
+		
+	}
 
+  .btn{
+	  width: 100%;
+	  margin-top: 120rpx;
+	  
+	  uni-button{
+		  margin:0 96rpx;
+		  height: 80rpx;
+		  border-radius: 8px;
+		  background-color: rgba(31, 74, 153, 1);
+		  color: rgba(255, 255, 255, 1);
+		  font-size: 16px;
+	  }
+  }
 </style>