.product-detail-page { .brand-banner { height: 45px; width: 100%; img { display: block; height: 45px; } .opt { margin-top: 5px; } .home, .brand-fav { display: inline-block; width: 32px; height: 32px; line-height: 32px; border: 1px solid #fff; text-align: center; color: #fff; cursor: pointer; } .home { margin-right: 5px; .iconfont { font-size: 14px; } } .brand-fav .iconfont { font-size: 13px; } .coled { color: #ee0014; } } .path-nav { border: none; margin-bottom: 0; } .main { width: 990px; margin: 0 auto; .infos { width: 465px; } .img { position: relative; width: 420px; height: 560px; } .img-show { display: block; width: 100%; height: 100%; } .tags { position: absolute; top: 0; left: 0; } .good-tag { float: left; box-sizing: border-box; height: 22px; line-height: 22px; color: #fff; padding: 0 7px; margin-right: 5px; font-size: 12px; } .new-tag { background: #78dc7d; } .renew-tag { background: #78dc7e; } .new-festival-tag { background: #000; } .yep-tag, .ymp-tag, .sale-tag { background: #ff565b; } .few-tag { background: #ffac5b; } .limit-tag { border: 1px solid #4e4e4e; color: #4e4e4e; background: #fff; } .thumbs { width: 75px; height: 510px; margin-left: 2px; overflow: hidden; } .thumb { display: block; width: 75px; cursor: pointer; margin-bottom: 2px; } .name { font-size: 18px; font-weight: bold; line-height: 24px; } .sale-tip { color: #ee0014; padding-left: 3px; } .brand-name { color: #666; font-size: 12px; } .title { color: #999; font-size: 12px; } .market-price { margin-top: 8px; } .price { color: #000; font-size: 22px; line-height: 24px; font-weight: bold; } .has-other-price { color: #999; text-decoration: line-through; font-size: 12px; } .arrival-date { color: #ee0014; font-size: 14px; font-weight: bold; margin-left: 24px; } .vip-price { line-height: 14px; color: #222; margin-top: 5px; background: resolve("product/vip-price-icon.png") no-repeat; padding-left: calc(5px + width("product/vip-price-icon.png")); font-size: 12px; .login-url, .cur { color: #f02200; } .vip-price-item { margin-left: 5px; } .vip-schedual { color: #999; text-decoration: underline; margin-left: 5px; } } .students-price { color: #fff; margin-top: 5px; font-size: 12px; span.title { display: inline-block; width: 43px; height: 16px; line-height: 16px; text-align: center; background: resolve("product/students-price-icon.png") no-repeat; color: #fff; } .price { font-size: 16px; font-weight: normal; padding: 0 5px; } } .activity { margin-top: 12px; li { line-height: 20px; } } .ac-type { display: inline-block; width: 60px; height: 16px; line-height: 16px; margin-right: 5px; text-align: center; background: #999; color: #fff; font-size: 12px; } .ac-des { font-size: 12px; } .row { margin-top: 10px; } .trade-content { padding-top: 20px; margin-top: 20px; border-top: 1px solid #eaeceb; } .chose-color { font-size: 12px; .title { margin-top: 14px; } img { display: block; height: 36px; width: 36px; border: 2px solid #fff; } .focus img { border-color: #222; } li { margin-right: 5px; margin-bottom: 5px; cursor: pointer; } } .chose-size, .chose-ticket { font-size: 12px; .title { margin-top: 6px; } li { float: left; display: block; height: 22px; line-height: 22px; margin-right: 5px; margin-bottom: 5px; padding: 0 5px; border: 1px solid #eaeceb; text-align: center; cursor: pointer; min-width: 28px; &.disable { opacity: 0.5; } &.focus { color: #fff; background: #222; } } } .size-wrapper { width: 415px; } .size { float: left; color: #666; } .size-ruler { float: left; display: block; width: 57px; height: 24px; background: resolve("product/size-ruler.jpg"); margin-bottom: 5px; cursor: pointer; } .size-warn, .num-warn { float: left; height: 24px; line-height: 24px; } .color-size-tip { color: #999; clear: both; line-height: 18px; } .chose-count .title { margin-top: 6px; } .num { display: block; width: 38px; height: 23px; line-height: 23px; text-align: center; border: 1px solid #eaeceb; color: #333; font-size: 12px; background: #ebebe4; } .minus-plus { display: block; width: 14px; height: 23px; border: 1px solid #eaeceb; border-left: none; text-align: center; cursor: pointer; i { display: block; width: 13px; height: 11px; line-height: 8px; font-size: 12px; -moz-user-select: none; } .dis { color: #999; } } .minus { border-top: 1px solid #eaeceb; font-size: 13px; } .lc-btn { float: left; display: block; width: 80px; height: 25px; line-height: 25px; color: #fff; background: #222; margin-left: 10px; font-size: 12px; text-align: center; cursor: default; &.had-lc, &.lc-sold-out { background: #ccc; } &.dis { background: #ccc; } } .num-wraper { position: relative; } $arrowTop: 40px; $arrow: product/arrow.png; $contentW: 220px; .lc-container { position: absolute; top: calc(0 - ($arrowTop - 1px)); right: calc(0 - (width($arrow) + $contentW)); z-index: 1; } .lc-arrow { position: absolute; top: $arrowTop; left: calc(0 - (width($arrow) -1px)); width: width($arrow); height: height($arrow); background: resolve($arrow); } .lc-content { box-sizing: border-box; width: $contentW; height: 285px; text-align: center; background: #f8f8f8; border: 1px solid #cecece; padding: 40px 25px 0; .qr-code { width: 137px; height: 137px; background: resolve("product/top-good-qr.png"); margin: 0 auto; } .title { font-size: 18px; color: #000; margin: 12px 0; line-height: 24px; } .sub-title { font-size: 14px; color: #939290; } } .buy-btn, .buy-ticket { display: inline-block; margin-right: 10px; height: 48px; line-height: 48px; width: 197px; text-align: center; color: #fff; background: #e92601; font-size: 14px; cursor: pointer; &.hover { background: #eb3b19; background: rgba(233, 38, 1, 0.8); } &.dis { background: #ccc; } } .collect-product, .keep-shopping { display: inline-block; width: 127px; height: 48px; text-align: center; line-height: 48px; background: #fff; color: #222; border: 1px solid #ccc; font-weight: bold; font-size: 12px; cursor: pointer; .iconfont { color: #ccc; font-size: 14px; } &.coled .iconfont { color: #fa5252; } } .share-row { margin-top: 20px; .title { margin-top: 2px; } } .balance { display: none; .success-tip { color: #222; font-size: 18px; margin-bottom: 10px; } .cart-total { color: #999; font-size: 12px; } .balance-btns { margin-top: 20px; } } } .other-infos { padding-bottom: 30px; } .info-block { margin-top: 30px; color: #999; border-top: 2px solid #eaeceb; font-size: 12px; .basic { width: 640px; margin: 0 auto; li { float: left; width: 25%; line-height: 20px; } } .comfort { width: 470px; border: 1px solid #eaeceb; margin: 17px auto 0; padding-bottom: 15px; li { margin: 12px 20px 0; } } .comfort-block { display: inline-block; width: 14px; height: 10px; border: 1px solid #eaeceb; margin-right: 2px; &.cur { background: #999; border: 1px solid #999; } } } .block-title { margin-bottom: 25px; text-align: center; .title { display: inline-block; padding-top: 15px; font-weight: bold; cursor: pointer; &.cur { color: #222; border-top: 2px solid #222; margin-top: -2px; } } .sep { display: inline-block; margin: 0 30px; color: #eaeceb; font-size: 14px; cursor: default; font-weight: bold; } } .description-content { overflow: hidden; } .material-content { display: none; overflow: hidden; } .material-detail li { width: 860px; padding-bottom: 20px; border-bottom: 1px dotted #eaeceb; margin: 0 auto 20px; img { float: left; width: 125px; height: 50px; } .name { float: left; width: 100px; line-height: 25px; border-right: 1px dotted #eaeceb; color: #666; font-weight: bold; text-align: center; font-size: 14px; } .text { float: left; width: 614px; padding-left: 20px; line-height: 18px; } } .wash { text-align: center; li { display: inline-block; padding: 0 20px; color: #666; border-right: 1px solid #eaeceb; } } .size-info { text-align: center; } .size-table, .reference-table, .fitting-report-table { text-align: center; margin: 0 auto; th { width: 110px; text-align: center; } tr { height: 30px; } tr, td { text-align: center; } thead { background: #f5f7f6; color: #999; } tbody { color: #222; } .avatar { width: 26px; height: 26px; border-radius: 50px; } .avatar-col { width: 26px; padding-left: 20px; padding-right: 20px; } .model-col { width: 90px; } .remark-col { width: 200px; } } .fr-img-wrap { width: 100%; text-align: center; img { max-width: 100%; } } .ref-model { padding-top: 10px; .model { width: 444px; height: 35px; padding-top: 47px; padding-left: 316px; color: #666; overflow: hidden; margin: 10px auto 0; em { margin-left: 5px; } } } .size-tip { color: #999; margin-top: 15px; text-align: center; } .details { text-align: center; font-size: 12px; color: #999; line-height: 18px; } .details-html { width: 750px; text-align: center; margin: 0 auto; b { font-weight: bold; } i { font-style: italic; } } .consults { display: none; } .consult-comment .title { color: #666; &.cur { color: #666; } } .cc-content { background: #f5f7f6; padding: 20px 20px 0; font-size: 12px; h2 { font-weight: bold; font-size: 14px; margin-bottom: 10px; color: #000; } li { border-top: 1px solid #eaeceb; padding: 20px 0; } .user-info { color: #999; line-height: 16px; > * { float: left; } .name { color: #666; } .date { color: #bbb; } .question { color: #222; } } .user-avatar { width: 30px; height: 30px; margin-right: 5px; } .more-wrap { text-align: center; color: #666; border-top: 1px solid #eaeceb; padding: 20px 0; font-size: 14px; font-weight: bold; color: #666; } .btn-wrap { padding: 20px 0; border-top: 1px solid #eaeceb; } .load-more { cursor: pointer; } .btn { display: block; width: 140px; height: 32px; line-height: 32px; color: #fff; background: #222; text-align: center; font-size: 12px; margin: 0 auto; cursor: pointer; .iconfont { font-size: 14px; } } .comment, .consult { margin-top: 10px; } .consults { display: none; } } .new-consult { padding: 20px 0; border-top: 1px solid #eaeceb; textarea { width: 590px; height: 80px; padding: 5px; outline: none; resize: none; } .submit-consult { display: block; width: 140px; height: 32px; line-height: 32px; margin: 8px 0 0; } .error { border-color: #e01; } } .consult-success { border-top: 1px solid #eaeceb; margin-top: 30px; text-align: center; padding: 20px 0; p { width: 295px; height: 55px; line-height: 55px; margin: 0 auto; border: 2px solid #222; display: block; color: #222; font-weight: bold; } } .after-service { text-align: center; margin-top: 30px; .after-service-content { display: none; } .after-service-switch { height: 44px; line-height: 44px; background: #eaeceb; text-align: center; font-size: 12px; cursor: pointer; .iconfont { font-size: 12px; } } .text { padding: 20px 15px; color: #666; background: #f5f7f6; text-align: left; color: #666; line-height: 18px; } .orange { color: #f9761a; } h4 { font-weight: bold; font-size: 14px; line-height: 24px; color: #222; margin-top: 10px; &:first-child { margin-top: 0; } } .img-1 { width: 715px; height: 259px; margin: 0 auto; background: resolve("product/after-service-1.png"); } .img-2 { width: 715px; height: 230px; margin: 0 auto; background: resolve("product/after-service-2.png"); } a { color: #666; } } .service { $service: product/service.png; width: width($service); height: height($service); margin: 45px auto; background: resolve($service); } .latest-walk { overflow: inherit; .goods { width: 1010px; margin: 0 auto; height: auto; > div { float: left; width: 180px; margin-right: 22px; } } img { height: 240px; width: 180px; display: block; } .name { display: block; margin-top: 5px; color: #222; line-height: 16px; } .price { color: #222; font-weight: bold; margin-top: 5px; } .market-price { margin-right: 5px; } .has-sale { text-decoration: line-through; color: #999; } } .warn-tip { display: inline-block; color: #e01; margin-left: 7px; font-size: 12px; i { font-size: 14px; } } .hot-point-wrap { position: relative; margin: 0 auto; .hot-point { position: absolute; filter: progid:dximagetransform.microsoft.alpha(Opacity=0); /* IE8 Hack */ &.hover .pointer { background-position: 0 -25px; } &.hover .hp-good { display: block; } } .pointer { position: absolute; display: block; background: resolve("product/hp-num.png") no-repeat 0 0; color: #fff; cursor: pointer; width: 25px; height: 25px; line-height: 25px; text-align: center; left: 0; top: 0; font-size: 18px; } .hp-good { display: none; position: absolute; left: 30px; top: 0; width: 210px; background: #000; height: 60px; padding: 10px; .pic { display: block; float: left; width: 60px; height: 60px; margin-right: 10px; } .info { position: relative; float: left; color: #fff; font-size: 12px; width: 140px; height: 60px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .check-btn { display: block; position: absolute; height: 18px; width: 40px; text-decoration: none; right: 0; bottom: 0; text-align: center; background: #e8e8e8; border-radius: 2px; } } } }