ec.uniapp-master/pages/index/index/index.less

@import '../../../common/css/global';

#microData {
	//秒杀
	.seckill-box {
		background: #ffffff;
		padding: 15px;
		margin-bottom: 10px;
		.title {
			height: 35px !important;
			display: flex;
			justify-content: space-between;
			color: #000;
			line-height: 35px;

			text:nth-child(1) {
				font-size: 22px;
				font-weight: 700;
			}

			text:nth-child(2) {
				font-size: 12px;
			}
		}
		.seckill-info {
			display: flex;
			align-items: flex-start;
			margin-top: 15px;
			.left {
				width: 100px;
				height: 100px;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.right {
				flex: 1;
				margin-left: 10px;
				overflow: hidden;
				.goods-name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 15px;
					color: #333333;
				}
				.price-box {
					color: #e50303;
					font-size: 18px;
					.old {
						font-size: 12px;
						color: #9c9c9c;
						text-decoration: line-through;
					}

					&.free-money {
						font-size: 14px;
						color: #9c9c9c;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.money {
							display: flex;
							align-items: center;
							.new {
								font-size: 18px;
								color: @globalColor;
							}
							.old {
								font-size: 10px;
								margin-left: 5px;
								text-decoration: line-through;
							}
						}
					}
				}
				.seckill-time {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					.free {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						flex: 1;
					}

					.buy {
						width: 70px;
						height: 25px;
						border-radius: 50px;
						color: #fff;
						background: #fb5054;
						font-size: 12px;
						line-height: 25px;
						text-align: center;
					}
				}
			}
		}
	}

	.about-program {
		image {
			width: 100%;
		}
	}
	image {
		vertical-align: middle;
	}
	.author{
	    image{
	      width: 100%;
	    }
	  }
	.index-class-box {
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 15px;
		.title {
			font-size: 15px;
			color: #111111;
			border-bottom: 3px solid @mainColor;
		}
		.class-box {
			display: flex;
			align-items: center;
			font-size: 13px;
			color: #111111;
			flex: 1;
			text-align: center;
			margin-left: 30px;
			.class-item {
				flex: 1;
			}
		}
	}
	.banner {
		//position: relative;
		//
		//left: 0;
		//top: 0;
		//height: 174px;
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.search {
			display: flex;
			align-items: center;
			//position: absolute;
			//top: 0;
			//left: 0;
			width: 100%;
			height: 44px;
			//background: @globalColor;
			background: #ffffff;
			padding: 7px 10px;
			//filter:blur(20);
			.menu-box {
				width: 40px;
				//color: #FFFFFF;
				color: #825139;
				margin-right: 10px;
			}
			.search_box {
              display: flex;
              align-items: center;
				position: relative;
				width: 100rpx;
				height: 30px;
				background: rgba(0,0,0,0.7);
				color: #FFFFFF;
				border-radius: 5px;
				padding: 0 4rpx;
				icon {
					position: absolute;
					top: 5px;
					left: 8px;
					z-index: 5;
				}
				input{
					    margin-left: 4rpx;
					    font-size: 12px;
						color: #FFFFFF !important;
				}
			}
		}
	}
	.coupon-warp-box {
		background: #ffffff;
		overflow: auto;
		white-space: nowrap;
		width: 100%;
		padding: 10px 15px;
		.coupon-item-box {
			width: 160px;
			height: 65px;
			display: inline-block;
			background: @mainColor;
			margin-right: 5px;
			border-radius: 4px;
			.coupon-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				padding: 5px;
				color: #ffffff;
				.left {
					.money {
						font-size: 10px;
					}
					.num {
						font-size: 30px;
					}
				}
				.right {
					font-size: 10px;
					text-align: center;
					.label {
					}
					.btn {
						padding: 2px 10px;
						border-radius: 3px;
						background: #ffffff;
						color: @mainColor;
						margin-top: 5px;
						box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
					}
				}
			}
		}
	}
	.tn-box {
		padding: 10px 0;
		.img-box {
			padding: 0 10px;
			image {
				display: block;
				width: 100%;
				margin-bottom: 10px;
			}
		}
	}

	.g-main {
		position: relative;

		.m-lead {
			font-size: 13px;
			//height: 45px;
			background: #ffffff;

			//padding: 0 20px;

			ul {
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				justify-content: center;
				height: 100%;
				li {
					position: relative;
					flex: 1;
					width: 1px;
					height: 100%;
					text-align: center;
					span {
						display: inline-block;
						text-align: center;
						line-height: 45px;
						width: auto;
						height: 100%;
						font-size: 14px;
						box-sizing: content-box;
					}

					.hover {
						border-bottom: 2px solid #333;
						box-sizing: border-box;
					}

					span.active {
						font-size: 17px;
						font-weight: bold;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						border-bottom: 2px solid #000000;
					}
				}
			}
		}

		.m-content {
			padding: 10px 15px;
			.m-main {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-content: space-between;

				image {
					width: 100%;
					box-sizing: border-box;
					display: block;
				}
				.img-box {
					position: relative;
					width: 100%;
					height: 100%;
					margin-bottom: 10px;
					.description {
						position: absolute;
						width: 100%;
						left: 0;
						bottom: 0;
						height: 30px;
						line-height: 30px;
						text-indent: 5px;
						color: #fff;
						background: rgba(0, 0, 0, 0.5);
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						white-space: nowrap;
						font-size: 14px;
					}
					&:last-child {
						margin-bottom: 0;
					}
				}
				.goods_box {
					width: 48%;
					background: #ffffff;
					margin-top: 10px;
					.goods_image {
						position: relative;
						padding-top: 100%;
						width: 100%;

						image {
							position: absolute;
							left: 0;
							top: 0;
							height: 100%;
							width: 100%;
							object-fit: cover;
							object-position: center center;
						}
					}

					.title {
						font-size: 16px;
						color: #4a4a4a;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.price {
						color: #ea4448;
						font-size: 14px;
						text-indent: 5px;
					}
				}
			}
		}
	}

	.module-box {
		background: #ffffff;
		padding: 10px 20px;
		margin-bottom: 10px;
		.meal-price {
			border: 2px solid #979797;
			height: 50px;
			line-height: 48px;
			text-align: center;
			font-size: 16px;
			text:first-child {
				color: #e50303;
			}
			text:last-child {
				text-decoration: line-through;
			}
		}
		.module-title {
			height: 35px;
			display: flex;
			justify-content: space-between;
			color: #000;
			line-height: 35px;

			text:nth-child(1) {
				font-size: 22px;
				font-weight: 700;
			}

			text:nth-child(2) {
				font-size: 12px;
			}
		}
		.space-btween {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.module-content {
			padding: 20px 0;
			position: relative;

			.add {
				position: relative;
				transform: translateY(120%);
				width: 18px;
				height: 18px;
				margin-bottom: auto;

				&:last-child {
					display: none;
				}
				.t {
					position: absolute;
					top: 8px;
					left: 0;
					width: 100%;
					height: 2px;
					background: #b2b2b2;
					border-radius: 19px;
				}

				.l {
					position: absolute;
					left: 8px;
					top: 0;
					height: 100%;
					width: 2px;
					background: #b2b2b2;
					border-radius: 19px;
				}
			}
			.meal {
				position: relative;
				width: 25%;

				.goods_image {
					position: relative;
					width: 100%;
					padding-top: 100%;
					image {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}

				.goods_title {
					margin-top: 10px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					color: #000;
				}
			}
			image {
				//position: absolute;
				//left: 0;
				//top: 20px;
				//width: 100px;
				//height: 100px;
				//object-fit: cover;
				//object-position: center center;
			}

			.content {
				margin-left: 120px;
				height: 100%;
				.content_title {
					padding-right: 30px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 16px;
					line-height: 18px;
				}

				.content_info {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					vertical-align: bottom;

					.price {
						color: #e50303;
						font-size: 18px;
					}
					.delPrice {
						margin-right: auto;
						font-size: 12px;
					}

					.onlyPrice {
						color: #9c9c9c;
						font-size: 14px;
					}
				}

				.countDown {
					margin-top: 7px;
					.text {
						font-size: 12px;
						color: #4a4a4a;
					}

					.release {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						.time {
							display: flex;
							align-items: center;
							text {
								line-height: 19px;
								margin: 0 3px;
							}
							.dot {
								display: inline-block;
								width: 19px;
								height: 19px;
								background: #6d6d6d;
								font-size: 12px;
								line-height: 19px;
								text-align: center;
							}
						}

						.btnBuy {
							display: inline-block;
							width: 70px;
							height: 25px;
							border-radius: 50px;
							color: #ffffff;
							background: #ea4448;
							font-size: 12px;
							line-height: 25px;
							text-align: center;
						}
					}
				}
			}
		}
	}
	//拼团
	.groupon-item-box {
		padding: 10px 15px;
		background: #ffffff;
		margin-bottom: 10px;
		.title {
			height: 35px;
			display: flex;
			justify-content: space-between;
			color: #000;
			line-height: 35px;

			text:nth-child(1) {
				font-size: 18px;
				font-weight: bold;
			}

			text:nth-child(2) {
				font-size: 12px;
			}
		}
		.item {
			display: flex;
			/*align-items: center;*/
			padding: 10px 0;
			margin-bottom: 5px;
			background: #ffffff;
			overflow: hidden;
			.left {
				position: relative;
				width: 120px;
				.num {
					font-size: 12px;
					position: absolute;
					width: 100%;
					bottom: 0;
					background: #fb5054;
					opacity: 0.8;
					text-align: center;
					color: @countColor;
				}
				image {
					display: block;
					width: 100%;
				}
				.img-box {
					display: flex;
					align-items: center;
					margin-top: 10px;
					box-sizing: border-box;
					justify-content: space-between;
					image {
						width: 47%;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 14px;
				margin-left: 12px;
				flex: 1;

				.price-box {
					.old-price {
						font-size: 12px;
						color: #9b9b9b;
						text-decoration: line-through;
					}

					.seckill-time-box {
						.seckill-item {
							text-align: left;
							.time-out {
								color: #000 !important;
								display: block;
								.text {
									color: #4a4a4a;
								}
							}
							.tiem {
								color: #000;
								margin: 5px 0;
							}
							i {
								display: none;
							}
							.my-class {
								margin: 5px 0;
								color: #ea4448;
							}
						}
					}
					.meal-price {
						display: flex;
						align-items: flex-end;
						.price {
							flex: 1;
							color: #ff2741;
							span {
								color: #4a4a4a;
							}
						}
						.btn {
							color: #ffffff;
							background: #fb5054;
							padding: 5px 10px;
							border-radius: 4px;
							i {
								font-size: 12px;
							}
							&.no-start {
								background: #26a96d;
							}
						}
					}
				}
			}
		}
	}
	.index-gift-box {
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 200;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.box {
			position: fixed;
			z-index: 500;
			width: 80%;
			top: 47%;
			left: 50%;
			transform: translate(-50%, -50%);
			overflow: auto;
			height: 70%;
			image {
				width: 100%;
				border-radius: 4px;
			}
			.iconfont {
				font-size: 30px;
				text-align: center;
				color: #ffffff;
				margin-top: 30px;
			}
			.title {
				position: relative;
				height: 45%;
				background: url('https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/red-head.png') no-repeat;
				background-size: 100% 100%;
				image {
					position: absolute;
					width: 30px;
					height: 30px;
					right: 0px;
				}
				.title-info {
					position: absolute;
					padding: 0 30px;
					top: 33%;
					text-align: center;
					width: 100%;
					box-sizing: border-box;
					color: #ffffff;
					.text {
						font-size: 20px;
					}
					.tips {
						font-size: 12px;
					}
				}

				i {
					position: absolute;
					right: 0;
					top: -5px;
					color: #fff;
					font-size: 30px;
				}
			}

			.coupon-list {
				overflow: auto;
				height: 40%;
				background: #df3121;
				margin: 0 9px 0 10px;
				padding: 0 15px;
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					padding: 5px 10px;
					margin-bottom: 10px;
					background: #ffffff;
					border-radius: 4px;

					.lable {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.time {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					&:first-child {
						margin-top: 10px;
					}
					&::before {
						position: absolute;
						left: -5px;
						top: 20px;
						content: '';
						background: #df3121;
						width: 10px;
						height: 10px;
						border-radius: 100%;
					}
					&::after {
						position: absolute;
						right: -5px;
						top: 20px;
						content: '';
						background: #df3121;
						width: 10px;
						height: 10px;
						border-radius: 100%;
					}

					.left {
						flex: 1;
						font-size: 14px;
						margin-right: 10px;
						overflow: hidden;
						div {
							//white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.time {
							font-size: 10px;
							color: #9b9b9b;
							min-height: 19px;
						}
					}
					.right {
						font-size: 16px;
						color: #df3121;
					}

					&.point {
						padding: 13px 10px;
					}

					&.old {
						.left {
							color: #9b9b9b;
						}
						.right {
							color: #9b9b9b;
						}
					}
				}
			}

			.buttom {
				font-size: 14px;
				padding: 14px;
				/*height: 10%;*/
				text-align: center;
				color: #df3121;
				background: #ee5223;
				margin: 0 9px 0 10px;
				border-top: 4px solid #c1281a;
				span {
					background: #ffe985;
					border-radius: 20px;
					padding: 10px 50px;
				}
			}
		}
	}
	.new-gift {
		position: fixed;
		bottom: 100px;
		right: 20px;
		width: 40px;

		image {
			width: 50px;
			height: 60px;
		}
	}
	//套餐
	.meal_list {
		overflow: auto;
		white-space: nowrap;
		width: 100%;
		table,
		image {
			width: 100% !important;
			height: auto;
		}
		.store_list {
			//top:0;
			width: 26.4%;
			position: relative;
			display: inline-block;
			margin-right: 10%;
			view {
				box-sizing: border-box;
			}
			image {
				width: 100%;
				height: 100px;
			}
			.description {
				width: 100%;
				margin-top: 5px;
				font-size: 14px;
				//height: 48px;
				overflow: hidden;
				word-break: break-all;
				//word-spacing: ;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				//display: -webkit-box;
				//-webkit-box-orient: vertical;
				//white-space: normal;
			}
			.price {
				font-size: 14px;
				height: auto;
				/*overflow: visible;*/
				white-space: normal;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&:last-child {
				margin-right: 0;
				&:after {
					display: none;
					/*content: ;  */
				}
			}
			&:after {
				content: '';
				display: block;
				position: absolute;
				right: -28%;
				top: 20%;
				width: 18%;

				height: 10%;
				background: url('https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/uploading.png');
				background-size: 100% 100%;
			}
		}
	}

	//广告图
	.gg-box-big {
		font-size: 0;
		padding: 10px 0 0 10px;
		.img-item {
			width: 50%;
			display: inline-block;
			box-sizing: border-box;
			padding: 0 10px 10px 0;
			image {
				width: 100%;
				display: block;
			}
		}
	}

	//最佳销售单品
	.best {
		overflow: hidden;

		.title {
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}

		.SalesGoods-box {
			.SalesGoods-item {
				text-align: center;
				display: inline-block;
				width: 33.33%;
				padding: 0 3px;
				box-sizing: border-box;
				vertical-align: middle;
				margin-bottom: 6px;

				.item {
					background: #ffffff;
				}
			}

			.slider-image {
				width: 100%;
			}
			.goods-name {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-left: 2px;
			}

			.money-box {
				display: flex;
				align-items: center;
				padding-left: 7px;
				.money-now {
					color: red;
					font-size: 12px;
				}
				.money-old {
					color: #c7c7c7;
					font-size: 13px;
					text-decoration: line-through;
				}
			}
		}
		.button-box {
			width: 100%;
			height: 44px;
			text-align: center;
			line-height: 44px;
			background: #ffffff;
			margin-bottom: 10px;
		}
	}

	//商品组合
	.excellent-box {
		position: relative;

		.m-lead {
			font-size: 13px;
			height: 45px;
			background: #ffffff;

			padding: 0 20px;

			ul {
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				justify-content: center;
				height: 100%;
				li {
					position: relative;
					flex: 1;
					width: 1px;
					height: 100%;
					text-align: center;
					span {
						display: inline-block;
						text-align: center;
						line-height: 45px;
						width: auto;
						height: 100%;
						font-size: 14px;
						box-sizing: content-box;
					}

					.hover {
						border-bottom: 2px solid #333;
						box-sizing: border-box;
					}

					span.active {
						font-size: 17px;
						font-weight: bold;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						border-bottom: 2px solid #000000;
					}
				}
			}
		}

		.m-content {
			padding: 5px;
			.goods-box {
				padding: 5px;
				box-sizing: border-box;
				display: inline-block;
				width: 50%;

				.goods_image {
					image {
						width: 100%;
					}
				}
			}
		}
	}



	.marketing-time-box {
		.seckill-item {
			text-align: left !important;
			color: #000 !important;
			.time-out {
				flex-direction: column;
				color: #000 !important;
				align-items: flex-start !important;
				.text {
					color: #4a4a4a;
				}
				.tiem {
					margin: 5px 0;
					.num-item {
						color: #ffffff !important;
						background-color: #fb5054;
					}
				}
			}
		}
	}

	//底部广告
	.bottom-banner {
		padding: 10px 15px;
		image {
			display: block;
			width: 100%;
		}
		.goods-box {
			background: #ffffff;
			margin-bottom: 10px;
			.name {
				margin: 5px;
			}
			.price {
				margin: 5px;
				color: @globalColor;
			}
		}
		.image-box {
			margin-bottom: 10px;
		}
	}
}