@define-mixin relatedTitle { margin: 0 29px; background: #fff; border: 1px solid #e0e0e0; border-bottom: none; line-height: 72px; font-size: 30px; color: #b0b0b0; text-align: center; } .guang-detail-page { #wrapper { background: #f0f0f0; } #wrapper.ios { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; &.has-head { top: 90px; + .fixed-top { top: 90px; } } } .author { border-bottom: 1px solid #e0e0e0; background: #fff; > a { display: block; height: 100%; } .avatar { float: left; margin-top: 20px; margin-left: 30px; width: 50px; height: 50px; border-radius: 50%; } .name { float: left; font-size: 28px; color: #000; padding: 30px 0; margin-left: 30px; } .intro { float: left; font-size: 28px; color: #b0b0b0; padding: 30px 0; margin-left: 30px; } } .post-title { padding: 16px 0 26px 30px; background: #fff; .title { line-height: 60px; font-size: 40px; color: #000; font-weight: bold; } } .text-block { padding: 20px 30px; line-height: 46px; font-size: 28px; background: #fff; color: #444; word-break: break-word; word-wrap: break-word; } .big-img-block { padding-bottom: 5px; background: #fff; img { width: 100%; } } .small-img-block { padding-bottom: 8px; background: #fff; img { float: right; width: 315px; height: 420px; &:first-child { float: left; } } } .collocation-block { background: #fff; .good-list { padding-left:15px; } } .thumb-container { padding-top: 30px; padding-left: 20px; background: transparent resolve('guang/thumb-container-bg.png') no-repeat; background-size: 200% 100%; &.fixed-top { position: fixed; left: 0; right: 0; top: 0; } &.fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); } &.absolute { position: absolute; left: 0; right: 0; } &.static { position: static; } &.hide { display: none; } } .clothe-type { position: absolute; right: 6px; bottom: 34px; width: 20px; height: 20px; border-radius: 50%; &.bag { background: url("/guang/clothes/bag.png"); background-color: #fff; background-size: 100%; } &.cloth { background: url("/guang/clothes/cloth.png"); background-color: #fff; background-size: 100%; } &.dress { background: url("/guang/clothes/dress.png"); background-color: #fff; background-size: 100%; } &.headset { background: url("/guang/clothes/headset.png"); background-color: #fff; background-size: 100%; } &.lamp { background: url("/guang/clothes/lamp.png"); background-color: #fff; background-size: 100%; } &.pants { background: url("/guang/clothes/pants.png"); background-color: #fff; background-size: 100%; } &.shoe { background: url("/guang/clothes/shoe.png"); background-color: #fff; background-size: 100%; } &.swim-suit { background: url("/guang/clothes/swim-suit.png"); background-color: #fff; background-size: 100%; } &.under { background: url("/guang/clothes/under.png"); background-color: #fff; background-size: 100%; } &.watch { background: url("/guang/clothes/watch.png"); background-color: #fff; background-size: 100%; } } .thumb { display: inline-block; position: relative; margin-right: 22px; padding-bottom: 30px; &:last-child { margin-right: 0; } &.focus .thumb-img { border-color: #000; } } .thumb-img { height: 134px; width: 96px; border: 1px solid transparent; } .related-reco-block { background: #fff; padding-left: 15px; border-top: 1px solid #e0e0e0; h2 { margin-left: -15px; line-height: 104px; font-size: 30px; color: #b0b0b0; text-align: center; } .one-good { padding-left: 15px; padding-right: 30px; margin-bottom: 20px; .thumb { float: left; height: 134px; width: 96px; } .content-container { padding-left: 120px; height: 134px; line-height: 1; font-size: 24px; > p { height: 50%; line-height: 94px; } span { display: inline-block; line-height: 24px; } .price { line-height: 47px; } } .sale-price { color: #d62927; line-height: 1.5; } .sale-price.no-price { color: #000; } .market-price { margin-left: 5px; color: #b0b0b0; text-decoration: line-through; line-height: 1.5; } .check-detail { display: inline-block; color: #000; border: 1px solid; border-radius: 2PX; float: right; padding: 0 5px; line-height: 1.5; } } } .link-block { display: block; height: 80px; line-height: 80px; padding: 0 30px; font-size: 28px; background: #fff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; .iconfont { float: right; color: #ccc; } } .related-brand { margin-top: 30px; h2 { @mixin relatedTitle; } .brand-list { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 30px 0 30px; background: #fff; } .brand { float: left; width: 158px; height: 128px; border-right: 1px solid #e0e0e0; margin-bottom: 10px; a { display: block; } &:nth-child(4n) { border-right: none; } } .brand-logo { display: table-cell; width: 158px; height: 94px; vertical-align: middle; img { display: block; max-width: 158px; max-height: 94px; vertical-align: middle; margin: 0 auto; } } .brand-name { margin: 10px 0 0 0; line-height: 24px; font-size: 18px; color: #babac2; text-align: center; text-decoration: none; border-bottom: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .related-tag { position: relative; padding-bottom: 30px; border-bottom: 1px solid #e0e0e0; background: #fff; .tag-bg { position: absolute; height: 40px; width: 40px; background: resolve('guang/tag.png') no-repeat; background-size: 100% 100%; top: 35px; left: 20px; } .tag-list { margin-left: 50px; } li { float: left; margin-top: 31px; margin-left: 31px; } a { height: 50px; line-height: 50px; font-size: 30px; color: #000; text-decoration: underline; white-space: nowrap; } } .related-info { margin-top: 30px; h2 { @mixin relatedTitle; } .info-list { background: #fff; padding-bottom: 30px; border-top: 1px solid #e0e0e0; } li { padding-top: 30px; margin-bottom: 10px; a { display: block; } img { float: left; margin-left: 30px; width: 182px; height: 114px; &.square { height: 182px; } } } .title, .publish-time { float: left; width: 360px; margin-left: 30px; line-height: 40px; color: #444; font-size: 28px; } .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; overflow: hidden; } .publish-time { font-size: 18px; margin-top: 0; color: #b0b0b0; .iconfont { font-size: 18px; } } } .weixin { margin: 20px 0; text-align: center; padding: 0 20px; .ems-cnpl { width: 47.3%; display: inline-block; background: #ededed; position: relative; overflow: hidden; .weixin-img { width: 100%; height: 100%; } } a:nth-child(1) { margin-right: 20px; } } }