ZangShiQi/addon/pc/source/os/assets/css/index/index.scss

.index-wrap {
	width: 100%;
	height: 500px;
}

.index {
	width: $width;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	.border-right {
		border-right: 1px solid #f5f5f5;
	}

	.border-bottom {
		border-bottom: 1px solid #f5f5f5;
	}

	.banner {
		height: 430px;
		width: 100%;
    .el-carousel__indicators--horizontal{
      padding-left: 240px;
    }
		.el-image {
			width: 100%;
			height: 100%;
		}
	}

}

.index-content-wrap {
	width: $width;
	margin: auto;
  // 中部广告位
  .adv-middle{
    display: flex;
    margin-top: 30px;
    .adv-middle-item{
      margin-right: 15px;
      height: 210px;
      // flex: 1;
      transition: all 0.2s linear 0s;
      cursor: pointer;
      .el-image{
        height: 210px;
      }
      &:last-of-type{
        margin-right: 0;
      }
      &:hover{
        z-index: 2;
        box-shadow: rgb(0 0 0 / 10%) 0 15px 30px;
        transform: translate3d(0px, -2px, 0px);
      }
      img{
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

	// 广告
	.ad-wrap {
		width: $width;
		margin: 20px auto;
		display: flex;
		justify-content: space-between;

		> div {
			width: calc((100% - 15px) / 2);
			height: 372px;
		}

		.ad-big {
			display: flex;
			justify-content: space-between;

			.ad-big-img {
				width: calc((100% - 15px) / 2);
				cursor: pointer;
			}
		}

		.ad-small {
			display: flex;
			justify-content: space-between;
			align-content: space-between;
			flex-wrap: wrap;

			.ad-small-img {
				width: calc((100% - 15px) / 2);
				height: calc((100% - 15px) / 2);
				cursor: pointer;
			}
		}
	}

	// 限时秒杀
	.seckill-wrap {
		height: 376px;
		width: $width;
		background-color: #ffffff;
		margin: 20px auto;
		border: 1px solid #e9e9e9;
	}

	.seckill-time {
		width: 100%;
		height: 45px;
		line-height: 44px;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
		box-sizing: border-box;

		.seckill-time-left {
			color: #383838;

			i,
			.seckill-time-title {
				font-size: 18px;
				font-weight: 600;
				margin-right: 5px;
			}

			.seckill-time-title {
				margin-right: 15px;
			}
		}

		.count-down {
			display: inline-block;
			margin-left: 7px;
		}

		.seckill-time-right {
			color: #838383;
			cursor: pointer;
		}
	}

	.seckill-content {
		padding: 20px 20px 0;
	}

	.seamless-warp2 {
		overflow: hidden;

		ul.item {
			li {
				float: left;
				width: 250px;
				padding: 0 25px;
				box-sizing: border-box;
				border-right: 1px solid #f1f1f1;

				.seckill-goods {
					cursor: pointer;

					.seckill-goods-img {
						width: 100%;
						height: 200px;
					}
					img {
						object-fit: cover;
					}

					> p {
						line-height: 24px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						height: 50px;
					}

					.seckill-price-wrap {
						display: flex;
						align-items: flex-end;
						height: 24px;
						line-height: 24px;
						margin-top: 10px;

						p span {
							font-size: 24px;
						}

						.primary-price {
							text-decoration: line-through;
							color: #838383;
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
}

.floor {
	width: $width;
	margin: 20px auto;

	.floor_item {
		margin-top: 10px;
	}
}

.floatLayer-wrap {
	position: fixed;
	height: 100vh;
	width: 100vw;
	left: 0;
	top: 0;
	background: rgba($color: #000000, $alpha: 0.5);
	z-index: 999;

	.floatLayer {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		cursor: pointer;
		.img-wrap {
			width: 456px;
			height: 274px;
			line-height: 274px;
			overflow: hidden;
			text-align: center;
			img{
				max-height: 100%;
			}
		}

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

// 悬浮搜索
.fixed-box {
	width: 100vw;
	background-color: #ffffff;
	position: fixed;
	top: 0;
  left: 0;
	z-index: 999;
	border-bottom: 2px solid $base-color;
}