zhongshen_project/addon/pc/source/os/assets/css/promotion/detail_seckill.scss

.el-main{
  .detail-nav-wrap{
    background-color: #f8f8f8;
    .detail-nav{
      margin: auto;
      width: 1210px;
      height: 54px;
      display: flex;
      align-items: center;
      .iconfont{
        margin: 0 8px;
      }
      span{
        color: #666;
        &:last-of-type{
          color: $base-color;
        }
      }
      .goods-name{
        display: inline-block;
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.detail-main {
  background: #fff;
  padding-top: 20px;
}
.goods-detail {
	overflow: hidden;
	margin: 0 auto;
	width: 1210px;
	.preview-wrap {
	  display: flex;
	  float: left;
		.video-player-wrap {
			position: absolute;
			z-index: 1;
			.video-player {
				visibility: hidden;
				> div {
					width: 356px;
					height: 356px;
					display: none;
				}
				.vjs-control-bar,
				.vjs-big-play-button {
					visibility: hidden;
					transition: none;
				}
				.vjs-big-play-button {
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.media-mode {
				position: absolute;
				width: 356px;
				z-index: 5;
				bottom: 0;
				top: 300px;
				text-align: center;
				line-height: 25px;

				span {
					background: rgba(100, 100, 100, 0.6);
					color: #fff;
					font-size: 12px;
					line-height: 25px;
					border-radius: 10px;
					padding: 0 15px;
					display: inline-block;
					cursor: pointer;

					&:last-child {
						margin-left: 20px;
					}
				}
			}
			&.show {
				.video-player,
				.vjs-control-bar,
				.vjs-big-play-button {
					visibility: visible;
				}

				.video-player {
					> div {
						display: block;
					}
				}
				.media-mode {
					top: initial;
					bottom: 50px;
				}
			}
		}
		.magnifier-wrap {
			width: 460px;
			height: 460px;
			border: 1px solid #d8d8d8;
			box-sizing: border-box;
			.magnifier-box .mouse-cover {
				background-color: #fede4f;
				opacity: 0.4;
			}
		}

		.spec-items {
	    margin-left: 10px;
			position: relative;
	    width: 84px;
			height: 460px;
			overflow: hidden;
			> span {
				cursor: pointer;
	      left: 0;
				top: 0;
	      width: 84px;
	      height: 42px;
	      line-height: 42px;
	      text-align: center;
				position: absolute;
				background: #fff;
				color: #838383;
				z-index: 1;
	      font-size: 25px;
				&:first-of-type{
				  transform: rotate(180deg);
				}
	      &:last-of-type{
	        top: calc(100% - 42px);
	      }
			}
			ul {
	      display: flex;
	      flex-direction: column;
				width: 100%;
	      height: 500%;
				position: absolute;
				top: 48px;
				li {
					width: 84px;
					height: 84px;
					overflow: hidden;
	        margin-bottom: 10px;
					border: 1px solid #DADADA;
					cursor: pointer;
					opacity: 0.5;
					box-sizing: border-box;
					&:hover,
					&.selected {
						opacity: 1;
						border-color: $base-color;
					}
				}
			}
		}
		.share-collect {
			padding: 10px 0 20px;
			cursor: pointer;
			text-align: right;
			color: #838383;
			display: flex;
			justify-content: space-between;
			align-items: center;
			a{
				color: #838383;
			}
			i,
			span {
				vertical-align: middle;
			}
			i {
				margin-right: 5px;
			}
		}
	}
	.basic-info-wrap {
		float: left;
		width: calc(100% - 589px);
		margin-left: 30px;
		h1 {
			font-size: 20px;
      font-weight: normal;
      color: #333;
      line-height: 1.5;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.desc {
			font-size: 12px;
      color: #999;
			margin: 5px 0 12px;
		}
		.divider {
			margin: 10px 0;
			border: 0;
			border-top: 1px dotted #e5e5e5;
		}
		.discount-banner {
      margin-top: 5px;
			background: url(../../../../assets/images/goods/discount_bg.png) no-repeat;
			height: 40px;
			line-height: 40px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.activity-name {
				color: #fff;
				font-size: 14px;
				height: 40px;

				i {
					display: inline-block;
					line-height: 40px;
				}
				span {
					display: inline-block;
					line-height: 40px;
					vertical-align: top;
				}
			}
			.discount-icon {
				margin: 0 8px 0 10px;
				color: #fff;
				font-size: 20px;
			}
			.surplus-time {
				color: #fff;
				font-size: 14px;
				float: right;
				height: 35px;
				line-height: 35px;
				padding-right: 5px;
				text-align: right;
				> span {
					margin-right: 5px;
				}
				i {
					font-style: normal;
					padding: 2px;
					width: 20px;
					height: 20px;
					margin: 0 5px;
					border-radius: 3px;
				}
				.count-down {
					display: inline-block;
				}
			}
		}
		.item-block {
			background-color: #f8f8f8;
			padding: 15px 0;
			position: relative;
			background-size: cover;
			min-height: 62px;
		  margin-bottom: 20px;
			.statistical {
				position: absolute;
				right: 20px;
				top: 16px;
				li {
					display: inline-block;
					text-align: center;
					position: relative;
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					&:first-child {
						margin-right: 40px;
					}

					p {
						color: #838383;
					}

					span {
						color: #383838;
						font-size: 16px;
					}
				}
			}
		}
		.item-line {
			font-size: 14px;
			min-height: 35px;
			line-height: 35px;
			display: flex;
		  padding-left: 20px;
		  margin-bottom: 10px;
			dt {
				display: inline-block;
				width: 50px;
				height: 35px;
				line-height: 35px;
				text-align: justify;
				font-size: 12px;
				margin-right: 16px;
				color: #222;
				flex-shrink: 0;
				&::after {
					display: inline-block;
					width: 100%;
					content: '';
					height: 0;
				}
			}
			> * {
				height: inherit;
				line-height: inherit;
				font-size: 14px;
			}
			> dd {
		    display: flex;
		    align-items: center;
		    height: 35px;
			}
		  &:last-of-type{
		    margin-bottom: 0;
		  }
		  &:first-of-type > dd{
		    align-items: baseline;
		  }
			.yuan {
				font-size: 18px;
			}
			.price {
				font-size: 30px;
				font-weight: bold;
			}
			.market-yuan {
				font-size: 14px;
				text-decoration: line-through;
			}
			.member_price {
				font-size: 14px;
				margin-left: 5px;
			}
			.market-price {
				font-size: 14px;
				margin-left: 5px;
				text-decoration: line-through;
			}
			&.promotion-price .label {
				line-height: initial;
				font-size: 18px;
				background: transparent;
				padding: 0;
				vertical-align: text-bottom;
			}
			&.coupon-list {
		    align-items: baseline;
				> div {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					dd {
						margin-right: 20px;
					}
				}
				p {
					display: inline-block;
					position: relative;
					line-height: 18px;
				}
				span {
		      display: inline-block;
					padding: 0 10px;
					font-size: 12px;
					margin-right: 10px;
					cursor: pointer;
		      border: 1px solid $base-color;
		      height: 32px;
		      line-height: 32px;
		      color: $base-color;
		      font-size: 14px;
		      box-sizing: border-box;
				}
				label {
					line-height: 16px;
					position: absolute;
					left: 10px;
					top: 1px;
				}
			}
			&.manjian {
				align-items: end;
			}
			&.manjian span {
				// padding: 2px 10px;
				font-size: 12px;
				margin-right: 5px;
			}
			&.delivery {
				position: relative;
				i {
					margin-left: 5px;
				}
		    dd{
		      align-items: center;
		    }
				.region-selected {
					position: relative;
					display: inline-block;
					vertical-align: middle;
					cursor: pointer;
					margin: 0 5px 0 0;
					width: auto;
					padding: 0 10px;
					height: 32px;
					line-height: 32px;
					border: 1px solid #e5e5e5;
					z-index: 2;
		      font-size: 14px;
				}
				.region-list {
					width: 466px;
					position: absolute;
					z-index: 10;
					top: 35px;
					left: 82px;
					background: #fff;
					border: 1px solid #e5e5e5;
					padding: 15px;
					line-height: 18px;
					height: auto;
					display: none;
		      font-size: 14px;
					&.hide{
						display: none !important;
					}
					.nav-tabs {
						border-bottom: 2px solid $base-color;
						height: 30px;
						> li {
							margin-bottom: -2px;
							float: left;
							> div {
								padding: 4px 8px;
								border: 2px solid transparent;
								height: 20px;
								display: inline-block;
								line-height: 20px;
								transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
								cursor: pointer;
								&:hover {
									border-color: transparent;
								}
							}
							&.active {
								> div {
									color: $base-color;
									border: 2px solid;
									border-bottom-color: #fff !important;
								}
							}
						}
					}
					.tab-content {
						> .active {
							padding: 10px 0;
						}
						> .tab-pane {
							display: none;
							&.active {
								display: block;
							}
							li {
								float: left;
								width: 25%;
								line-height: 30px;
								&.selected {
									color: $base-color;
								}
								span {
									cursor: pointer;
									&:hover {
										color: $base-color;
									}
								}
							}
						}
					}
				}
				dd:hover {
					.region-list {
						display: block;
					}
				}
			}

			&.service a {
				margin: 0 5px;
			}
			&.buy-btn {
				margin: 25px 0 0;
		    dt{
		      margin: 0;
		      padding: 0;
		      width: 0;
		      height: 0;
		    }
		    dd{
		      height: auto;
		    }
				button {
					min-width: 168px;
					height: 52px;
					margin-right: 10px;
					font-size: 20px;
					text-shadow: 0 0 0;
		      border-radius: 0;
					&[disabled] {
						cursor: not-allowed;
						pointer-events: initial;
						border: 1px solid;
						opacity: 1;
					}
					i {
						margin-right: 5px;
						font-size: 20px;
					}
				}
			}
			.i-activity-flag {
		    height: 32px;
		    line-height: 32px;
				padding: 0 8px;
				border: 1px solid;
				font-size: 14px;
				margin-right: 5px;
				white-space: nowrap;
			}
			&.gift-point strong {
				font-size: 14px;
			}
			&.merchant-service {
				overflow: hidden;
				margin: 10px 0;
				align-items: flex-start;
				> div {
					display: inline-block;
				}
				dd {
					display: inline-block;
					margin-right: 18px;
					// margin: 0;
					&:last-child {
						padding-right: 0;
					}
					i {
						color: $base-color;
						font-size: $ns-font-size-base;
						margin-right: 5px;
					}
					span {
						cursor: pointer;
					}
				}
			}
		}
		.sku-list {
			ul {
				overflow: hidden;
				padding: 1px;
				li {
					float: left;
					position: relative;
					margin: 2px 10px 10px 0;
					line-height: 14px;
					vertical-align: middle;

					div {
						padding: 8px 12px;
						text-align: center;
						border: 1px solid #b7b7b7;
						display: inline-block;
						-webkit-transition: none;
						transition: none;
						position: relative;
						cursor: pointer;
						&.selected,
						&:hover {
							border: 2px solid;
							margin: -1px;
							color: $base-color;
						}
						&:hover {
							color: $base-color;
						}
						&.disabled,
						&.disabled:hover {
							border: 1px solid #b7b7b7;
							margin: 0;
							cursor: not-allowed;
							color: #aaa;
						}
						img {
							margin-right: 10px;
							width: 26px;
							height: 26px;
							display: inline-block;
							vertical-align: middle;
						}
						i {
							position: absolute;
							right: -10px;
							bottom: 0px;
							display: none;
							font-size: 32px;
						}

						&:not(.disabled).selected i,
						&:not(.disabled):hover i {
							display: block;
						}
					}
				}
			}
		}
		.buy-number {
			margin: 10px 0;
			.num-wrap {
				display: inline-block;
				vertical-align: middle;
				position: relative;
				margin-right: 10px;
				input {
			    width: 126px;
			    padding-left: 40px;
			    padding-right: 40px;
					font-size: 12px;
					height: 32px;
					line-height: 32px;
			    border-radius: 0;
			    border-color: #D5D5D5;
			    text-align: center;
					&.disabled {
						cursor: not-allowed;
					}
				}
				span {
			    position: absolute;
			    top: 2px;
			    left: 0;
					width: 32px;
					height: 32px;
					overflow: hidden;
					cursor: pointer;
					display: block;
					line-height: 32px;
					text-align: center;
					user-select: none;
			    z-index: 1;
			    &.decrease{
			      border-right: 1px solid #D5D5D5;
			    }
			    &.increase{
			      left: 94px;
			      border-left: 1px solid #D5D5D5;
			    }
					&.disabled {
						cursor: not-allowed;
					}
				}
			}
			.inventory {
				margin: 0 10px;
			}
		}
		.go-phone {
			position: relative;
			display: block;
			float: right;
		  width: 52px;
		  height: 52px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  flex-direction: column;
		  border: 1px solid #d8d8d8;
		  box-sizing: border-box;
      margin-right: 10px;
      cursor: pointer;
		  &>img{

		  }
		  &>span{
		    margin-top: 4px;
		    line-height: 1;
		    font-size: 12px;
		    color: #999;
		  }
			&:hover .qrcode-wrap {
				display: block;
			}
			.qrcode-wrap {
				border: 1px solid #e5e5e5;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
				height: 120px;
				overflow: hidden;
				padding: 10px;
				position: absolute;
				width: 120px;
				left: 30px;
				top: -50px;
				display: none;
				background:white;
			}
      &.icon-item{
        .iconfont{
          font-size: 22px;
          font-weight: bold;
          color: #5E5C5C;
          &.selected{
            color: #ff9000;
          }
        }
      }
		}
	}
	.shop-wrap {
		float: right;
		border: 1px solid #e9e9e9;
		padding: 0 20px;
		width: 234px;
		box-sizing: border-box;
		.head-wrap {
			text-align: center;
			padding: 16px 0;
			border-bottom: 1px solid #f1f1f1;
			.img-wrap {
				width: 64px;
				height: 64px;
				line-height: 64px;
				display: inline-block;

				img {
					max-width: 100%;
					max-height: 100%;
				}
			}
			.site-name {
				font-size: 14px;
				color: #383838;
			}
			.tag {
				margin-left: 10px;
				font-size: 14px;
			}
		}
		.info-wrap {
			padding: 10px 0;
			border-bottom: 1px solid #f1f1f1;
			dl {
				font-size: $ns-font-size-sm;
				dt {
					color: #838383;
					// width: 65px;
					line-height: 25px;
					font-weight: normal;
					float: left;
				}
				dt.site-score {
					// width: 58px;
					padding-right: 5px;
				}
				dd {
					height: 25px;
					line-height: 25px;
					// margin-left: 50px;
					color: #838383;
					span {
						color: #383838;
						font-weight: 600;
					}
				}
			}
		}
		.operation {
			padding: 12px 0;

			.el-button {
				padding: 10px 16px;
			}
		}
	}
	.detail-wrap {
		padding: 64px 0 35px;
		clear: both;
		.goods-recommended {
			float: left;
			width: 234px;
		}
		.goods-tab {
			.attr-list {
				font-size: 14px;
				display: flex;
				flex-wrap: wrap;
				li {
					margin-bottom: 5px;
					padding: 0 10px;
					flex: 0 0 30%;
					width: 33%;
				}
			}
		  .el-tabs__header{
		    margin-bottom: 30px;
		  }
		  .tablist{
		    border-radius: 0;
		  }
		  .el-tabs__item{
		    position: relative;
		    width: 168px;
		    height: 52px;
		    line-height: 52px;
		    text-align: center;
		    font-size: 18px;
		    &.is-active{
		      color: $base-color;
		      &:after{
		        content: "";
		        position: absolute;
		        top: -1px;
		        left: 0;
		        right: 0;
		        height: 2px;
		        background-color: $base-color;
		      }
		    }
		    &:hover{
		      color: $base-color;
		    }
		  }
			.evaluate {
				.empty {
					color: #898989;
					text-align: center;
					font-size: 14px;
				}
				nav {
					padding: 10px;
					overflow: hidden;
					background: #f7f7f7;
					li {
						float: left;
						padding: 0 20px;
						cursor: pointer;

						&:first-child {
							padding-left: 0;
						}
						&:hover,
						&.selected {
							color: $base-color;
						}
					}
				}
				.list {
					margin-top: 10px;
					font-size: 14px;
					li {
						padding: 15px;
						border-bottom: 1px solid #e5e5e5;
						.member-info {
							float: left;
							width: 140px;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							img {
								width: 25px;
								height: 25px;
								border-radius: 50%;
								margin-right: 5px;
							}
						}
						.info-wrap {
							margin-left: 150px;
							margin-bottom: 10px;
							.content {
								padding: 10px 0;
							}
							.img-list {
								.el-image {
									width: 50px;
									margin-left: 10px;
									&:first-child {
										margin-left: 0;
									}
								}
							}
							.sku-info {
								color: #898989;
								font-size: 12px;
								span {
									margin-right: 5px;
									&.create-time {
										margin-left: 10px;
									}
								}
							}
							.evaluation-reply {
								margin: 10px 0;
								color: $base-color;
							}
							.review-evaluation {
								.review-time {
									font-size: $ns-font-size-sm;
									margin-left: 20px;
									color: #898989;
								}
							}
						}
					}
				}
				.page-wrap {
					margin-top: 10px;
					text-align: right;
				}
			}
		}
	}
}