@border:#E7E7E7; #main-wrap-container{ background-color: #fff; font-size: 14px; .main-detail-container{ padding: 20px 0; margin-bottom: 20px; } .detail-box-left{ width: 450px; margin-right: 20px; .top-img-view{ border:1px solid #EEEEEE; border-radius: 2px; height: 450px; img{ width: 100%; height: 100%; border-radius: 2px; } } } .detail-box-right{ overflow: hidden; line-height: 1.8; .product-name{ font-size: 20px; color:#292929; } .p-size{ line-height: 40px; span{ margin-right: 20px; } } .p-dateMessage{ padding:0 10px; line-height: 40px; color:#fff; background:-webkit-linear-gradient(left,#ff7a20,#ff020f); background:-o-linear-gradient(left, #ff7a20, #ff020f); &>div:first-child{ font-size:18px; } &>div:first-child:before{ content: ''; display:inline-box; margin-top: 4px; margin-right: 5px; width: 30px; float: left; height: 30px; background: url(../images/ico.png) no-repeat -611px -84px; } &>div:last-child{ font-size:14px; } } .p-status{ line-height: 50px; li{ float: left; padding: 0 38px; &+li{ position: relative; &:before{ content: ''; width: 1px; height: 16px; background-color: #DFDFDF; position: absolute; left: 0; top:50%; margin-top: -8px; } } } } .ul-info-items{ padding: 10px 0; border-top: 1px dotted #E9E9E9; border-bottom: 1px dotted #E9E9E9; margin-bottom: 20px; li{ margin-bottom: 10px; .span-stock{ color:#9B9B9B; } .number-container{ //width: 124px; font-size: 0; display: inline-block; height: 40px; border:1px solid #E7E7E7; margin-right: 10px; .number-btn{ width: 30px; background-color: #F7F7F7; color:#DFDFDF; height: 100%; line-height: 40px; text-align: center; font-size: 14px; } .number-input{ border:1px solid #E7E7E7; border-top-color: transparent; border-bottom-color: transparent; font-size: 14px; width: 60px; height: 100%; vertical-align: top; box-sizing: border-box; padding: 0 10px; } } } .label{ color:#747474; vertical-align: middle; } .box-item{ width: 40px; height: 40px; display: inline-block; border-radius: 2px; border:1px solid #E0E0E0; text-align: center; line-height: 40px; margin-right: 10px; img{ width: 100%; height: 100%; } } } .opts-container{ line-height: 50px; a{ margin-right: 10px; span{ vertical-align: text-bottom; } } } .btns-container{ .submit-btn{ width: 130px; height: 40px; margin-right: 10px; } } .p-price{ background-color: #FAFAFA; border-radius: 2px; line-height: 60px; padding: 0 15px; font-size: 12px; .price-span{ font-size: 20px; font-weight: bold; margin: 0 15px; } .span-tag{ border-radius: 2px; background-color: #6CD955; color: #fff; padding: 0 3px; } } .p-banned-sale{ .platform{ width: 60px; height: 24px; display: inline-block; background: url("../images/ico3.png") no-repeat -64px -120px; font-size: 0; vertical-align: text-top; &.ebay{ background-position-x: -150px; } } } } .right-content{ width: 210px; margin-left: 15px; .box-title{ text-align: center; line-height: 40px; border-bottom:1px solid @border; background-color: #F7F7F7; } .code-box{ border:1px solid @border; text-align: center; button{ margin: 10px; height: 40px; line-height: 40px; border:1px solid @border; background-color: #F8F8F8; text-align: center; width: 160px; } } .recommend-box{ border:1px solid @border; margin: 20px 0; .box-body{ padding: 15px; li{ margin-bottom: 20px; .main-img{ width: 100%; margin-bottom: 10px; } .p-des{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; margin-bottom: 10px; } .new-price{ font-size: 16px; } .old-price{ font-size: 12px; color:#767676; text-decoration: line-through; } } } } } .left-content{ overflow: hidden; .content-tabs-container{ width: 100%; box-sizing: border-box; line-height: 40px; border:1px solid @border; border-bottom-color: #FF6A00; background-color: #F7F7F7; color:#747474; .tab-pane{ float: left; padding: 0 24px; cursor: pointer; &.active{ background-color: #ff6a00; color:#fff; } } } } } .swiper-container { width: 100%; height: 60px; margin-top: 20px; } .swiper-wrapper{ padding: 0 36px; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; width: 60px; border:1px solid #EFEFEF; margin-right: 20px; } .swiper-button-next, .swiper-button-prev{ height: 60px; width: 26px; top:50%; margin-top: -30px; } .swiper-button-prev{ left: 0; } .swiper-button-next{ right: 0; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ background-size: 50%; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background-size: 50%; } .layui-layer-btn0{ background-color: #FF6A07 !important; } .tabCon .tab-content{ margin-bottom: 50px; } #main-wrap-container .detail-box-right .ul-info-items .label{ vertical-align: baseline !important; } .wayfair-img { display: inline-block; content: ""; width: 80px; height: 20px; background: url("../images/wayfair-img.png") no-repeat; margin-right: 2px; vertical-align: text-top; background-position:center; }