@import 'gm.less';
@import 'box.less';
@import 'index_vw.less';

@p03: 0 3.333vw;

body{
	.b_l_w;
	padding-bottom: 20vw;
}

img{
	display: block;
	object-fit: contain;
}

@media screen and (max-height: 120vw) {
	footer {
		display: none !important;
	}
}

[v-cloak]{
	display: none!important;
}

.van-nav-bar__placeholder{
	.van-nav-bar .van-icon{
		color: #000;
	}
	.van-nav-bar__title{
		font-size: 4vw;
		span{
			font-size: 3.2vw;
		}
	}
}

footer{
	position: fixed;
	left:0;
	bottom: 0;
	width: 100vw;
	min-height: 20vw;
	border-top:1px solid #f5f5f5;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.box;
	a{
		.b_k;
		.center;
		padding-top:12.5vw;
		width: 100%;
		height: 20vw;
		position: relative;
		color: #8d8d8d;
		&:before{
			content: '';
			position: absolute;
			left:calc(~'50% - 5.5vw');
			top:1.25vw;
			width: 11vw;
			height: 11vw;
			background: no-repeat;
			background-size: 11vw 22vw;
		}
	}
	.a{
		color: #3285ff;
		&:before{
			background-position: 0% 100%;
		}
	}
	.loop(@num:1) when(@num <= 4) {
		.f@{num}{
			&:before{
				background-image: url("../images/di-@{num}.png");
			}
		}
		.loop(@num + 1);
	}
	.loop;
	span {
		position: absolute;
		.y50;
	    right: 25%;
	    top: 2vw;
	    background: #c0060c;
	    color: #fff;
	    height: 4vw;
	    min-width: 4vw;
	    line-height: 4vw;
	}
}

.login{
	.b_l_w;
	padding: 12.667vw 10vw 0;
	>div{
		.b_l_w;
	}
	
	.logo{
		.box;
		.box-pack-center;
		.box-wrap;
		margin-bottom: 5vw;
		img{
			width: 18vw;
			height: 18vw;
		}
		p{
			.b_l_w;
			.center;
			font-size: 4.267vw;
			margin-top: 3.333vw;
		}
	}
	
	.tit{
		i{
			position: absolute;
			left:4vw;
			top:5.333vw;
		}
		font-size: 5.333vw;
		padding: 3vw 0;
	}
	
	.input{
		.box;
		.box-align-center;
		height: 14.933vw;
		border-bottom: 1px solid rgba(220,220,220,.8);
		padding: 2.667vw 2.667vw 0;
		input{
			width: 100%;
			border: 0!important;
			font-size: 3.733vw;
			
			&::-webkit-input-placeholder{
				color: #aaa;
			}
		}
		
		i{
			font-size: 5vw;
			color: #cbcbcb;
		}
	}
	
	.code{
		.box;
		.box-align-center;
		font-size: 2.933vw;
		height: 6vw;
		list-style: none;height: 6vw;
		border-radius: 3vw;
		border: solid 1px #3285ff;
		color: #3285ff;
		padding: 0 2.533vw;
		white-space: nowrap;
	}
	
	.forgot{
		font-size: 3.467vw;
		padding: 4.667vw 2.667vw;
	}
	
	.btn{
		padding: 5.2vw 3.333vw;
		>*{
			.b_l_w;
			.bs;
			.b;
			font-size: 4vw;
			letter-spacing: 0.4vw;
			border: 0;
			height: 10.667vw;
			background-color: #3285ff;
			border-radius: 5.333vw;
		}
	}
	
	.go{
		.center;
		font-size: 3.467vw;
		a{
			color: #3285ff;
		}
	}
	.language{
		.box;
		.box-pack-center;
		img{
			margin:.5vw auto 0;
			height: 6.8vw;
		}
		line-height: 4vw;
	}
	@media screen and (max-width: 500px) {
	    .language{
	    	position: absolute;
	    	bottom: 20vw;
	    	left:0;
	    }
	}
	@media screen and (min-width: 500px) {
	    .language{
			margin-top:8vw;
	    }
	}
	@media screen and (max-width: 500px) and (max-height: 150vw) {
	    .language{
			display: none;
	    }
	}
}

.agreement {
    .center;
    .box;
	.box-align-center;
	.box-pack-center;
    margin-top: 3vw;
    .van-checkbox__icon {
        display: inline-block !important;
		margin: -.2vw 0 0;
    }
    .van-checkbox__icon .van-icon {
        border: 1px solid #000;
    }
	.van-checkbox__label{
		margin-left: 1.467vw;
	}
    a {
        color: #3285ff;
    }
}

.search{
	height: 14.667vw;
	.van-search__content{
		background-color: #eee;
		height: 9.333vw;
	}
	.van-field__control::-webkit-input-placeholder{
		color: #888;
	}	
	.van-search__action{
		img{
			margin:.5vw auto 0;
			height: 6vw;
		}
		line-height: 4vw;
	}
}

.home {
	.b_l_w;

	.van-field__right-icon {
		margin: .3vw 0 0;

		padding {
			padding: 0 1vw;
		}

		i {
			font-size: 5vw;
		}
	}

	> div {
		.b_l_w;
	}

	.lm {
		ul {
			.b_l_w;
			margin: 3.733vw 0;

			li {
				float: left;
				.w-25;
				.center;
				padding: 2.267vw;
				font-size: 3.6vw;
				line-height: 10vw;

				img {
					.mx-auto;
					width: 12vw!important;
					height: 12vw!important;
					object-fit:cover;
					border-radius:2vw;
				}

				p {
					.b_l_w;
					.text-hide(1);
				}
			}
		}
	}

	.content {
		padding: @p03;

		.d1 {
			.b_l_w;
			.b_k;
			border-radius: 2vw;
			padding: @p03;
			margin: 0 0 4vw;

			> div {
				.b_l_w;
			}
		}

		.tit {
			height: 14vw;
			.box;
			.box-align-center;

			b {
				font-size: 4.8vw;
				color: #3285ff;
			}

			a {
				margin: 0 0 0 auto;
			}
		}

		.latest {
			.box;
			.box-wrap;

			a {
				.b_l;
				width: 26.667vw;
				height: 47.867vw;
				margin: 0 3.333vw 0 0;

				&:nth-child(3n) {
					margin: 0;
				}

				> div {
					.b_l_w;
				}

				> img {
					width: 26.667vw;
					height: 26.667vw;
					border-radius: 2vw;
				}

				.name {
					line-height: 4.8vw;
					margin: 2.533vw 0;
					.text-hide(1);
				}

				.price {
					.box;
					.box-align-center;

					b {
						color: #3285ff;
						font-size: 4vw;

						span {
							font-size: 2.933vw;
						}
					}

					img {
						margin-left: auto;
						height: 3.333vw;
					}
				}
			}
		}

		.sell {
			a {
				.b_l_w;
				.box;
				padding: 4vw 0;
				border-top: 1px solid #f5f5f5;

				&:first-child {
					padding: 0 0 4vw;
					border: 0;
				}

				img {
					width: 29.333vw;
					height: 29.333vw;
					border-radius: 2vw;
					margin-right: 3.333vw;
				}

				.c {
					width: calc(~'100% - 29.333vw - 6.666vw');
					height: 29.333vw;
					.box;
					.box-wrap;
					.box-align-between;
					padding: 2vw 0 .8vw;

					> div {
						.b_l_w;
					}

					.name {
						font-size: 4vw;
						line-height: 5.6vw;
						.text-hide(2);
					}

					.price {
						height: 6.667vw;
						.box;
						.box-align-center;

						b {
							color: #3285ff;
							font-size: 4.667vw;

							span {
								font-size: 3.2vw;
							}
						}

						s {
							color: #b5b5b5;
							margin-left: 2.533vw;
						}

						div {
							width: 16vw;
							height: 6.667vw;
							line-height: 6.667vw;
							background-color: #3285ff;
							border-radius: 3.333vw;
							.center;
							margin-left: auto;
							.bs;
							font-size: 3.467vw;
						}
					}
				}
			}
		}

		.d2 {
			.b_l_w;
			.box;
			.box-wrap;
			.box-pack-between;

			a {
				width: 44.667vw;
				height: 69.333vw;
				background-color: #fefefe;
				border-radius: 2vw;
				overflow: hidden;
				margin: 0 0 4vw;

				> img {
					width: 44.667vw;
					height: 45.333vw;
				}

				.c {
					.b_l_w;
					padding: @p03;

					.name {
						line-height: 4.8vw;
						margin: 3.333vw 0;
						.text-hide(2);
					}

					.price {
						.box;
						.box-align-center;

						b {
							color: #3285ff;
							font-size: 4.667vw;

							span {
								font-size: 3.2vw;
							}
						}

						img {
							margin-left: auto;
							height: 4vw;
						}
					}
				}
			}
		}
	}

	.van-tabs {
		margin: 0 0 4vw;

		.van-tab--active {
			.van-tab__text {
				.b;
				font-size: 4.267vw;
			}
		}
	}
}

.user-data{
	.b_l_w;
	padding-top: 5vw;
	.van-cell-group{
		margin-bottom: 4vw;
	}
	.van-cell{
		min-height: 14.667vw;
		.box-align-center;
		input,textarea{
			.b_l_w;
			background: transparent;
			border: 0;
			.right;
			min-height: 14.667vw;
		}
	}
	.van-cell__value,input{
		flex: 1.5;
		font-size: 3.2vw;
		color: #222;
	}
	.van-cell__right-icon{
		color: #222;
	}
	.avatar{
		width: 9.333vw;
		height: 9.333vw;
		border-radius: 5vw;
		display: inline-block;
	}
	
	.btn{
		.b_l_w;
		padding: 8vw 4.267vw;
		>*{
			.b_l_w;
			.bs;
			.b;
			font-size: 5.067vw;
			border: 0;
			height: 14.667vw;
			background-color: #3285ff;
			border-radius: 7.333vw;
		}
	}
	
}

.sort{
	.b_l_w;
	>div{
		.b_l_w;
	}
	.content{
		.box;
		height: calc(~'100vh - 14.667vw - 20vw');
		border-top:1px solid #f3f3f3;
		.van-sidebar{
			height: 100%;
			background: #f3f3f3;
		}
		.van-sidebar-item{
			background-color: #f3f3f3;
			.center;
			font-size: 3.2vw;
		}
		.van-sidebar-item--select, .van-sidebar-item--select:active{
			background-color: #fff;
			color: #3285ff;
		}
		.van-sidebar-item--select::before{
			background-color: #3285ff;
			width: 0.667vw;
			height: 4vw;
		}
		
		.c{
			width: 78.667vw;
			overflow-y: auto;
			.box;
			align-content: flex-start;
			.box-wrap;
			padding-top: 4.533vw;
			a{
				width:33.33%;
				.box;
				.box-pack-center;
				align-content: flex-start;
				.box-wrap;
				margin-bottom: 7vw;
				img{
					width: 16vw;
					height: 16vw;
					background-color: #f5f5f5;
					border-radius: 1.333vw;
				}
				p{
					.b_l_w;
					padding: 3vw 3vw 0;
					font-size: 3.467vw;
					.center;
					.text-hide(2);
				}
			}
		}
	}
}

.user{
	.b_l_w;
	padding: 0 4vw;
	
	>div{
		.b_l_w;
	}
	
	.top{
		height: 60.933vw;
		.box;
		.box-align-center;
		.box-pack-center;
		padding-top: 2vw;
		
		>div{
			.center;
			img{
				display: inline-block;
				width: 26.667vw;
				height: 26.667vw;
				background-color: #dcdcdc;
				border-radius: 13.333vw;
				margin-bottom: 3vw;
			}
			b,p{
				.b_l_w;
				line-height: 8vw;
			}
			b{
				font-size: 5.333vw;
			}
			p{
				font-size: 3.467vw;
				color: #71767a;
			}
		}
	}
	
	.block,.k{
		margin-bottom: 4vw;
		.van-cell{
			.box-align-center;
			border-radius: 2vw;
			.van-cell__title{
				font-size: 3.733vw;
			}
			.van-cell__left-icon{
				height: 100%;
				.box;
				.box-align-center;
				margin-right: 0;
				width: 9.067vw;
			}
			.van-cell__right-icon{
				width: 6.667vw;
				height: 6.667vw;
				background-color: #f5f5f5;
				border-radius: 2vw;
				.box;
				.box-center-center;
				color: #222;
				font-size: 3.8vw;
			}
		}
	}
	.block{
		.box;
		.box-pack-between;
		.b;
		img{
			width: 5.6vw;
			height: auto;
		}
		.van-cell{
			width: 44vw;
			height: 16vw;
		}
	}
	.k{
		.b_k;
		img{
			width: auto;
			height: 4.667vw;
		}
		border-radius: 2vw;
	}
}

.pro-list{
	.b_l_w;
	position: relative;
	padding-top:16vw;
	>div{
		.b_l_w;
	}
	.px{
		position: fixed;
		height: 12vw;
		margin-top: -16vw;
		.b_k;
		.box;
		a{
			width: 100%;
			.box;
			.box-center-center;
			font-size: 3.733vw;
			
			img{
				width: 1.867vw;
				margin-left: 1.333vw;
			}
		}
		.a {
			color: #3285ff;
		}
	}
	
	.content{
		.box;
		.box-pack-between;
		.box-wrap;
		padding: 0 3.333vw;
		a{
			width: 44.667vw;
			height: 69.333vw;
			background-color: #fefefe;
			border-radius: 2vw;
			overflow: hidden;
			margin: 0 0 4vw;
			
			img{
				width: 44.667vw;
				height: 45.333vw;
			}
			
			.c{
				.b_l_w;
				padding: 3.333vw 2.667vw 0;
				>div{
					.b_l_w;
				}
				.name{
					line-height: 4.8vw;
					.text-hide(2);
				}
				.price{
					margin-top: 3.333vw;
					.box;
					b{
						color: #3285ff;
						font-size: 4.667vw;
						span{
							font-size: 3.2vw;
						}
					}
					font{
						color: #898989;
						margin: .5vw 0 0 auto;
					}
				}
			}
		}
	}
}

.order-details {
	.b_l_w;
	padding: 4vw 3.333vw;

	> div {
		.b_l_w;
		margin-bottom: 4vw;
		.b_k;
		border-radius: 2vw;
	}

	.id {
	}

	.product {
		position: relative;
		padding: 3.333vw 3.333vw 0;

		> div {
			.b_l_w;
		}

		.t {
			height: 4vw;
			margin-bottom: 3.333vw;

			a {
				height: 100%;
				.box;
				.box-align-center;
				font-size: 3.467vw;

				img {
					height: 2.667vw;
					margin-left: 1.867vw;
				}
			}

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 3.333vw;
				width: .667vw;
				height: 4vw;
				background-color: #3285ff;
			}

			span {
				float: right;
				margin-top: -8px;
			}
		}

		.d {
			.box;
			margin-bottom: 3.333vw;
			position: relative;

			img {
				width: 24vw;
				height: 24vw;
				border-radius: 1.333vw;
				margin-right: 2.667vw;
			}

			.c {
				width: 41.867vw;
				height: 24vw;
				.box;
				.box-align-between;
				.box-wrap;

				b, p {
					.b_l_w;
				}

				b {
					.text-hide(1);
					font-size: 3.467vw;
					margin-bottom: .5vw;
				}

				p {
					font-size: 2.933vw;
				}
			}

			.price {
				width: 23.6vw;
				.right;
				line-height: 5.2vw;
				height: 24vw;
				.box;
				.box-tb;
				.box-pack-between;

				b {
					span {
						font-size: 2.667vw;
					}

					font-size: 3.467vw;
				}
			}

			p {
				color: #898989;
			}
		}

		.total {
			margin-top: -3.333vw;
			.right;
			.b;
			font-size: 4.267vw;

			span {
				font-size: 3.2vw;
			}
		}

		.times {
			margin: 3.333vw 0;
			height: 8vw;
			line-height: 8vw;
			font-size: 3.467vw;
			color: #898989;

			a {
				.b_r;
				.center;
				width: 22.667vw;
				height: 8vw;
				line-height: calc(~'8vw - 2px');
				border-radius: 4vw;
				border: solid 1px #3285ff;
				color: #3285ff;
			}
		}
	}

	.content {
		padding: 2vw 0 !important;

		p {
			.b_l_w;
			.box;
			.box-align-center;
			padding: 2vw 2.667vw;
			font-size: 3.733vw;

			b, span, a, div {
				margin-left: auto;
				.box;
				.box-align-center;
			}

			img {
				height: 2.667vw;
				margin-left: 2vw;
			}

			b {
				color: #3285ff;
				font-size: 4.267vw;

				font {
					font-size: 3.2vw;
				}
			}

			span, a {
				font-size: 3.733vw;
				color: #606060;
			}
		}
	}
}

.cart{
	.van-checkbox-group{
		.b_l_w;
		padding: 4vw 3.333vw 25vw;
		.van-checkbox{
			.b_l_w;
			.b_k;
			padding: 0 0 0 3.333vw;
			border-radius: 2vw;
			margin: 0 0 4vw;
		}
		
		.van-swipe-cell__right{
			.box;
			button{
				height: 100%;
			}
		}
	}
	
	._content{
		width: 100%;
		padding: 3.333vw 0;
		.box;
		.box-align-center;
		img{
			width: 22.667vw;
			height: 22.667vw;
			border-radius: 1.333vw;
			margin-right: 2.667vw;
		}
		.c{
			width: 59.333vw;
			padding-right: 6vw;
			min-height: 22.667vw;
			line-height: 5.5vw;
			position: relative;
			
			.name{
				.b;
				font-size: 3.467vw;
			}
			p{
				font-size: 2.933vw;
				color: #898989;
				line-height: 5vw;
			}
			.price{
				font-size: 3.467vw;
				color: #3285ff;
				span{
					font-size: 2.667vw;
				}
			}
			.van-stepper{
				position: absolute;
				right: 6vw;
				bottom: 0;
			}
		}
	}
	
	.van-submit-bar{
		.b_l_w;
		bottom: calc(~'20vw + 1px');
		.van-submit-bar__tip{
			.center;
		}
		.van-submit-bar__bar{
			min-height: 16vw;
		}
		.van-submit-bar__price{
			color: #3285ff;
		}
	}
}

.pro-details{
	.b_l_w;
	>div{
		.b_l_w;
	}
	
	.content{
		padding: 3.333vw;
		>div{
			.b_l_w;
		}
		.name{
			font-size: 4vw;
			margin-bottom: 3.333vw;
		}
		.price{
			
			>b{
				font-size: 5.067vw;
				color: #3285ff;
				span,font{
					font-size: 3.2vw;
				}
				font{
					font-weight: normal;
					color: #000;
				}
			}
			>span{
				margin-left: 4vw;
				color: #a6a6a6;
			}
			>font{
				.b_r;
				margin-top: 1.2vw;
			}
		}
		
		.c{
			margin-top: 4vw;
			padding: 3.333vw 3.333vw 1.333vw;
			background-color: #f5f5f5;
			border-radius: 2vw;
			b{
				font-size: 3.733vw;
			}
			
			._c{
				.b_l_w;
				margin-top: 3.333vw;
				.box;
				.box-wrap;
				>div{
					min-width: 100%;
					font-size: 3.333vw;
					margin-bottom: 2vw;
					span{
						color: #959595;
					}
				}
			}
		}
	}
	
	.details{
		.tit{
			.box;
			.box-center-center;
			color: #535353;
			height: 11.067vw;
			line-height: 11.067vw;
			background: #f5f5f5;
			
			p{
				width: 15vw;
				height: 1px;
				background-color: #c9c9c9;
				margin: 0 5vw;
			}
		}
	}
}