	
	page {
		 font-size: $uni-font-size-sm;
		 width: 100%;
		 height: 100%;
	 }
	 
	.container{
		background-color: $uni-bg-color-grey;
		min-height: 100%;
		width: 100%;
	}
	
	.block{
		display: flex;
		flex-direction: column;
		background-color: white;
	}
	
	/*栅格系统*/
	.row{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		background-color: white;

	}
	
	.col1{
		width: 4.166%;
	}

	.col2{
		width: 8.333%;	
	}
	
	.col3{
		width: 12.5%;
	}
		
	.col4{
		width: 16.666%;
	}
			
	.col5{
		width: 20.8333%;
	}	
			
	.col6{
		width: 25%;
	}		
			
	.col7{
		width: 29.1666%;
	}	
	
	.col8{
		width: 33.333%;
	}	
	
	.col9{
		width:37.5%
	}	
		
	.col10{
		width: 41.666%;
	}	
			
	.col11{
		width: 45.8333%;
	}	
				
	.col12{
		width: 50%;	
	}	

	.col13{
		width:54.166%;
	}	
	
	.col14{
		width: 58.333%;
	}	
			
	.col15{
		width: 62.5%;
	}						
	
	.col16{
		width: 66.666%;		
	}		
	
	.col17{
		width: 70.8333%;
	}		
		
	.col18{
		width: 75%;		
	}	
				
	.col19{
		width: 79.166%;
	}						
	
	
	.col20{
		width: 83.333%;
	}	
			
	.col21{
		width: 87.5%;
	}					
	
	.col22{
		width: 91.666%;
	}		

	.col23{
		width: 95.8333%;
	}	
				
	.col24{
		width: 100%;
	}						
	
	.w10p{
		width: 10%;
		box-sizing: border-box;
	}
	.w15p{
		width: 15%;
		box-sizing: border-box;
	}	
	.w20p{
		width: 20%;
		box-sizing: border-box;		
	}
	.w25p{
		width: 25%;
		box-sizing: border-box;		
	}
	.w30p{
		width: 30%;
		box-sizing: border-box;		
	}	
	.w35p{
		width: 35%;
		box-sizing: border-box;		
	}
	.w40p{
		width: 40%;
		box-sizing: border-box;		
	}	
	.w45p{
		width: 45%;
		box-sizing: border-box;		
	}
	.w50p{
		width: 50%;
		box-sizing: border-box;		
	}
	.w55p{
		width: 55%;
		box-sizing: border-box;		
	}	
	.w60p{
		width: 60%;
		box-sizing: border-box;		
	}	
	.w65p{
		width: 65%;
		box-sizing: border-box;		
	}
	.w70p{
		width: 70%;
		box-sizing: border-box;		
	}
	.w75p{
		width: 75%;
		box-sizing: border-box;		
	}										
	.w80p{
		width: 80%;
		box-sizing: border-box;		
	}
	.w85p{
		width: 85%;
		box-sizing: border-box;		
	}
	.w90p{
		width: 90%;
		box-sizing: border-box;		
	}
	.w95p{
		width: 95%;
		box-sizing: border-box;		
	}
	.w100p{
		width: 100%;
		box-sizing: border-box;		
	}
		
	.h100p{
		height: 100%;
		box-sizing: border-box;		
	}
	.h80p{
		height: 80%;
		box-sizing: border-box;		
	}	

	.h70p{
		height: 70%;
		box-sizing: border-box;		
	}
	
	.h60p{
		height: 60%;
		box-sizing: border-box;		
	}
				
	.h50p{
		height: 50%;
		box-sizing: border-box;
	}

	.h40p{
		height: 40%;
		box-sizing: border-box;
	}	
	.hflex{
		display: flex;
	}
	
	.vflex{
		display: flex;
		flex-direction: column;
	}


	.hflex-hstart{
		justify-content: flex-start;
	}
	.hflex-hend{
		justify-content: flex-end;
	}
	.hflex-space-between{
		justify-content: space-between;
	}
	.hflex-space-around{
		justify-content: space-around;
	}
	.hflex-vstart{
		align-items: flex-start;
	}
	.hflex-vend{
		align-items: flex-end;
	}
	.hflex-hc{
		justify-content: center;
	}
	.hflex-vc{
		align-items: center;
	}
	
	.hflex-c{
		justify-content: center;
		align-items: center;
		
	}
	
	.vflex-hc{
		align-items: center;
	}
	.vflex-vc{
		justify-content: center;
	}
	.vflex-vstart{
		justify-content: flex-start;
	}
	.vflex-vend{
		justify-content: flex-end;
	}
	.vflex-hstart{
		align-items: flex-start;
	}
	.vflex-hend{
		align-items: flex-end;
	}
	.vflex-space-between{
		justify-content: space-between;
	}
	.vflex-space-around{
		justify-content: space-around;
	}
	.vflex-c{
		justify-content: center;
		align-items: center;
		
	}
	
	.wh30{
		width: 30px;
		height: 30px;
	}
		
	.padlf5{
		padding-left: 5px;
		padding-right: 5px;		
	}
	.padlf10{
		padding-left: 10px;
		padding-right: 10px;
	}	
	.padlf15{
		padding-left: 15px;
		padding-right: 15px;		
	}	
	.padlf20{
		padding-left: 20px;
		padding-right: 20px;
	}
	.padl10f5{
		padding-left: 10px;
		padding-right: 5px;		
	}
	.padtb5{
		padding-top: 5px;
		padding-bottom: 5px;		
	}
	.padtb10{
		padding-top: 10px;
		padding-bottom: 10px;		
	}	
	.padtb15{
		padding-top: 15px;
		padding-bottom: 15px;		
	}	
	.padtb20{
		padding-top: 20px;
		padding-bottom: 20px;		
	}
		
	.marlf5{
		margin-left: 5px;
		margin-right: 5px;
	}
	.marlf10{
		margin-left: 10px;
		margin-right: 10px;
	}
	.marlf15{
		margin-left: 15px;
		margin-right: 15px;
	}
	.marlf20{
		margin-left: 20px;
		margin-right: 20px;
	}

	.martb5{
		margin-top: 5px;
		margin-bottom: 5px;
	}		
	.martb10{
		margin-top: 10px;
		margin-bottom: 10px;
	}
		
	.martb15{
		margin-top: 15px;
		margin-bottom: 15px;
	}
							
	.martb20{
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.hidden{
		display: none;
	}	

	.underline{
		border: 1px none lightgrey;
		border-bottom-style:solid;
	}
		
	view {
		box-sizing: border-box;
		color: $uni-text-color;
		font-size: $uni-font-size-sm;
	}					
	
	
	/*20等分的栅隔*/
	
	.col20-1{
		width: 5%;
	}
	.col20-2{
		width: 10%;
	}
	.col20-3{
		width: 15%;
	}
	.col20-4{
		width: 20%;
	}
	.col20-5{
		width: 25%;
	}
	.col20-6{
		width: 30%;
	}
	.col20-7{
		width: 35%;
	}
	.col20-8{
		width: 40%;
	}
	.col20-9{
		width: 45%;
	}
	.col20-10{
		width: 50%;
	}
	.col20-11{
		width: 55%;
	}
	.col20-12{
		width: 60%;
	}
	.col20-13{
		width: 65%;
	}
	.col20-14{
		width: 70%;
	}
	.col20-15{
		width: 75%;
	}
	.col20-16{
		width: 80%;
	}
	.col20-17{
		width: 85%;
	}
	.col20-18{
		width: 90%;
	}
	.col20-19{
		width: 95%;
	}
	.col20-20{
		width: 100%;
	}