home.scss 5.9 KB
.page{
	// position: absolute;
	// left: 0;
	// top: 0;
	width: 100%;
	height: 100%;
	// overflow-x: hidden;
	// overflow-y: auto;
	position: absolute;
}
.top-img {
	width: 750rpx;
	height: 600rpx;
	/* #ifdef MP */
	height: 650rpx;
	/* #endif */
}
.head{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		/* #ifdef APP-PLUS */
		height: calc(100rpx + var(--status-bar-height));
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef MP */
		height: calc(120rpx + var(--status-bar-height));
		padding-top: calc(40rpx + var(--status-bar-height));
		/* #endif */
		background-color: rgba(255,255,255,0);
		.logo-title{
			width: 40%;
			color: #fff;
			padding-left: 20rpx;
			image {
				width: 169rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}
		}
		.setting-mess{
			width: 20%;
			display: flex;
			align-items: center;
			height: 100%;
			margin-right: 20rpx;
			.setting{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 100%;
				text{
					font-size: 38rpx;
				}
			}
			.mess{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 100%;
				text{
					font-size: 38rpx;
				}
			}
		}
	}
.main{
	position: relative;
	top: 110rpx;
	/* #ifdef MP */
	top: 190rpx;
	/* #endif */
	padding-bottom: 140rpx;
	margin: 0 20rpx;
}
.banner{
		height: 400rpx;
		margin-bottom: 30rpx;
		// margin: -200rpx auto 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.screen-swiper{
			height: 100%;
			min-height: 100% !important;
			image{
				height: 400rpx;
				border-radius: 10rpx;
			}
		}
	}
.bg-white {
	background-color: #fff;
	border-radius: 20rpx;
}
.notice-content {
	display: flex;
	align-items: center;
	padding: 20rpx;
	.notice-left {
			image {
				width: 70rpx;
				height: 70rpx;
		}
	}
	.notice-line {
		width: 2rpx;
		background-color: #e1e1e1;
		height: 50rpx;
		margin: 0 20rpx;
	}
	.notice-right {
	.notice-right-content {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		.notice-icon {
			border: 2rpx solid #0FBB59;
			color: #0FBB59;
			background-color: #eefff5;
			border-radius: 10rpx;
			font-size: 20rpx;
			margin-right: 20rpx;
			padding: 2rpx 10rpx;
		}
		.notice-text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 460rpx;
			font-size: 24rpx;
		}
	}
	}
}

/* 订单tab */
.order-tab{
	display: flex;
	align-items: center;
	width: 100%;
	height: 90rpx;
	padding: 0 80rpx;
	border-bottom: 2rpx solid #E5E5E5;
	.tab{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 115%;
		text{
			font-size: 28rpx;
			font-weight: bold;
			color:#7B7B7B;
		}
		.active-img {
			display: none;
		}
		.active-img-right {
			display: none;
		}
	}
	.action{
		text{
			font-size: 32rpx;
			color: #000;
		}
	}
}
.wallet-info{
	display: flex;
	width: 100%;
	padding: 30rpx 0;
	margin-top: 20rpx;
	flex-wrap: wrap;
	justify-content: center;
	.list{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 25%;
		.icon{
			position: relative;
			display: flex;
			align-items: center;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
		.title{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			text{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
}
.screen-list {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		.list {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25%;
			height: 100%;
			text {
				font-size: 26rpx;
				color: #555555;
			}
			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.action {
			text {
				color: $base;
			}
		}
	}

/* 商品列表 */
.goods-data {
	width: 100%;
	.goods-list {
		overflow: hidden;
		.list-view {
			float: left;
			width: 49%;
			height: 560rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-right: 2%;
			margin-bottom: 20rpx;
			overflow: hidden;
			.thumb {
				width: 100%;
				display: flex;
				justify-content: space-evenly;
				padding-top:10px;
				//height: 300rpx;
				overflow: hidden;
				image {
                    height: 270rpx;
					border-radius: 20rpx;
				}
			}
			.item {
				width: 100%;
				.tag {
					padding: 10rpx 20rpx;
					text {
						display: inline-block;
						color: #717981;
						font-size: 24rpx;
						margin-right: 10rpx;
					}
				}
				.title {
					padding: 0 20rpx;
					text {
						width: 100%;
						color: #212121;
						font-size: 28rpx;
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.price {
					padding: 0 20rpx;
					.retail-price {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						width: 100%;
						color: #676767;
						font-size: 20rpx;
						margin-top: 20rpx;
						margin-bottom: 20rpx;
						.min {
							display: inline-block;
							font-size: 24rpx;
							color: #000;
							font-weight: bold;
							transform: scale(0.7);
						}
						.max {
							font-size: 24rpx;
							color: #000;
							font-weight: bold;
						}
						.line {
							height: 24rpx;
							width: 2rpx;
							border-right: 2rpx solid #E5E5E5;
							margin: 0 12rpx;
						}
					}
					.vip-price {
						display: flex;
						align-items: center;
						width: 100%;
						height: 40rpx;
						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}
						.min {
							width: 92%;
							font-size: 24rpx;
							color: #717981;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		.list-view:nth-child(2n) {
			margin-right: 0;
		}
	}
}