product.css 12 KB
#product-intro {position: relative; z-index: 1; padding-left: 380px; min-height: 474px; height: auto!important; height: 474px; }
#preview {position: absolute; top: 0; left: 0;z-index: 100;}
#preview .big-pic{width: 367px;height: 367px;overflow: hidden;}
#gallery{margin-top:5px;position: relative;overflow: hidden;width: 369px;height: 62px;}
#gallery a{border:#ccc 1px solid;position: relative;display: block; float: left;margin-right: 4px;}
#gallery a img{display: block;width: 60px;height: 60px;}
#gallery a.current{border:#7c0000 1px solid;}
#gallery .show-list{width: 330px;overflow: hidden;height: 62px; position: absolute;top:0;left:21px;}
#gallery .turn-left,#gallery .turn-right{display: block;width: 13px;position: relative;height: 62px; position: absolute;top:0; background: url(../images/icon-slides.png) no-repeat; border: none;margin: 0;}
#gallery a.turn-left{left: 0; background-position: -30px 0}
#gallery a.turn-left:hover{left: 0; background-position: 0 0}
#gallery a.turn-right{right: 0;background-position: -45px 0;}
#gallery a.turn-right:hover{right: 0;background-position: -15px 0;}

.product-info {color: #777;}
.product-info li{margin-top:10px;position: relative;}
.product-info li label{width: 60px; display: inline-block;}
.product-info h1{font-family: "Microsoft YaHei"; line-height: 25px; padding: 0; margin: 0; font-weight: 600; font-size: 20px; color: #404040;}
.product-title{padding-bottom: 10px; border-bottom: 1px dotted #ccc;}
.product-price{margin-top: 10px;}
.product-price span{vertical-align: middle;}
.product-price .price {font-size: 26px; font-weight: 700; color: #c00; line-height: 26px; padding-right: 10px;}
.prom{background-color: #8c0000; color: #FFF; line-height: 18px; padding: 10px 0 15px 60px;margin-top: 10px;}
.prom .price{color: #FFF;}
.promo-type {background-color: #fff5f5; border-radius: 6px; color: #b10000; height: 16px; line-height: 16px; padding: 3px 8px; vertical-align: middle; margin: 0 2px 4px;}
.spec-info{padding: 10px 20px; height: auto; border: 1px dashed #aec083;position: relative;background: #fff;}
.spec-item {padding: 3px 0;  z-index: 5;}
.spec-item dt{float: left; width: 60px; text-align: right;padding: 6px 8px;}
.spec-item dd{float: left;width: 460px;}
.spec-values li{border: 1px solid #bbb; background: #FFFFFF; display: block; float: left; margin-right: 8px;  position: relative;cursor: pointer;padding: 3px; margin: 0 4px 4px 0;position: relative;}
.spec-values li img{display: block;float: left;}
.spec-values li label{padding: 2px 6px;}
.spec-values li span{padding: 2px 6px;display: block;}
.spec-values .selected{border: 1px solid #BD0021;}
.spec-values .disabled{border: 1px dashed #c0c0c0;cursor: not-allowed; color: #ccc;}
.spec-values .disabled i{display: none;}
.selected i{background-image: url(../images/icons.png);background-position: -6px -81px; font-size: 0; height: 11px; line-height: 0; overflow: hidden; position: absolute; right: 0; bottom: 0; width: 11px;}

.attr-list li{display: inline-block; width: 33%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 0; height: 28px; line-height: 28px;}
.goods-detail{position: relative;}
.goods-detail .sidebar{width: 230px;float: left;}
.goods-detail .sidebar .category-nav{padding-left: 15px;line-height: 24px;}
.goods-detail .sidebar .category-nav li {padding-top:10px;}
.goods-detail .child-category-list li{ margin-top: 10px;}
.child-category-list li dt,.child-category-list li dd{margin:5px 0;}
.goods-detail .content{padding-left: 230px;}
.consult-q,.consult-a,.comment{position: relative;padding:10px 20px;}
.comment{padding: 10px 0;}
.consult-item ,.comment-item{border-bottom: #ccc 1px solid;margin-top: 20px;}
.consult-item .head,.comment-item .head{width: 80px; text-align: center;}
.consult-item .head .arrow,.comment-item .head .arrow {border-color: rgba(0, 0, 0, 0) #d5d5d5; color: #d5d5d5; border-width: 8px 12px 8px 0; left: 105px; margin-top: 20px; top: 0; z-index: 1000}
.consult-item .head .arrow b,.comment-item .head .arrow b {border-color: rgba(0, 0, 0, 0) #f6f5fb; color: #f6f5fb; border-width: 8px 12px 8px 0; margin-top: -8px; left: 2px; }
.consult-item .head .arrow b,.consult-item .head .arrow,.comment-item .head .arrow b,.comment-item .head .arrow{border-style: dashed solid dashed dashed; font-size: 0; line-height: 0; position: absolute;}
.consult-item .head img,.comment-item .head img{border-radius: 100%;border:#ccc 1px solid;display: block;}
.consult-content,.comment-content{padding: 10px;left:117px;top:0; right: 108px; background: #f6f5fb; border: 1px solid #d8d8d8; border-color: #d8d8d8 #d5d5d5 #b8b8b8; border-radius: 5px; box-shadow: 0 1px 1px #dad7d7;position:absolute;}
.comment-content{right: 10px;}
.comment-content .top{border-bottom: dotted 1px #ccc;padding: 5px 0;margin-bottom: 10px;}
.consult-a{margin-top: 20px;}
.consult-a .consult-content{right: 107px; top:0;left:auto;}
.consult-a .head{margin-left:auto;margin-right: 0;text-align: center;overflow: hidden;}
.consult-a .head img{margin-left:auto;margin-right: 0;}
.consult-a .head .arrow {border-color: rgba(0, 0, 0, 0) #d5d5d5; color: #d5d5d5; border-width:  8px 0 8px 12px;left: auto; right: 95px; margin-top: 20px; top: 0; z-index: 1000}
.consult-a .head .arrow b {border-color: rgba(0, 0, 0, 0) #259bfd; color: #259bfd; border-width: 8px 0 8px 12px; margin-top: -8px; right: 2px; left: auto; }
.consult-a .head .arrow b,.consult-a .head .arrow{border-style: dashed dashed dashed solid; font-size: 0; line-height: 0; position: absolute;}
.consult-a  .consult-content{background: #259bfd;color: #fff;left:108px;}
.comment-score{width:120px;height: 120px;border-radius: 100%;border: 1px #999 dashed; background: #FFF7EE;}
.comment-score .circle{padding-left: 10px;height:52px;font-size: 40px; color: #548325; display: block; font-style: normal; font-family: Arial; line-height: 50px; padding-top: 10px; border-bottom: 1px #ccc solid;margin-bottom: 15px;}
.comment-list .comment-top{position: relative;height: 160px;overflow: hidden;}
.comment-list .comment-top li{float: left;}
.comment-list .comment-top li.comment-grade {margin-left:20px;width: 200px; padding: 10px 15px; border-right: dotted 1px #999; }
.comment-list .comment-top li.comment-action {float: right;padding-top: 20px;}

.comment-percent dt{float: left; width: 30px; line-height: 26px;display: block;}
.comment-percent dd.bar{float:left;width: 135px; background: #ccc; text-align: left;display: block; margin-top: 6px; height: 13px;}
.comment-percent dd.bar i{display: block; height: 13px;background: #ac0000;}
.comment-percent dd.percent{float: left; width: 32px; line-height: 26px; text-align: right;}


#selector{margin-left: 12.5px;overflow: hidden;border-bottom: none;}
#selector .spec-attr{border-bottom: none;}
#selector  a.select{background: #f1f1f1;color: #268026;}
#selector .attr{padding: 8px 12px;border-bottom: #ccc 1px dotted;overflow: hidden;height: auto;padding-right: 60px;position: relative;}
#selector .attr .o-more {position: absolute; top:5px; right: 10px; width: 31px; height: 32px; line-height: 32px; text-decoration: none; cursor: pointer; color: #005AA0;padding-right: 24px;}
#selector .attr .attr-key{float: left; font-weight: 700;width: 100px;text-align: right;  height: 20px;}
#selector .attr .attr-value {height: 24px;overflow: hidden;}
#selector .unflod .attr-value {height: auto;overflow: hidden;}

#selector .attr .attr-value a{display:block;float: left;position: relative;height: 20px ;padding: 2px 25px 2px 5px ;}
#selector .attr .attr-value a.select i{display: inline-block;background: url(../images/icons.png);width: 25px;height: 25px;background-position: -25px -50px;position: absolute;top:-2px;right: 0;}
#selector .attr .attr-value a.select:hover i{background-position: -25px -25px;}
#selector .attr-extra {position: relative; display: inline-block; height: 32px; border: 1px solid #ddd; border-top: none; margin-top: -1px; background: #fff; line-height: 20px; text-align: right; cursor: pointer; font-size: 12px; }
#selector .attr-extra b,#selector .o-more b {display: block; position: absolute; top: 12px; right: 16px; overflow: hidden; width: 9px; height: 9px; background: url(../images/icon.png) no-repeat;background-position: -6px -46px;}
#selector .unflod b{background-position: -6px -37px;top: 9px;}
#selector .attr-extra div{position: relative; _display: inline; _zoom: 1; height: 32px; padding: 0 32px 0 24px; line-height: 32px;}
#selector #select-more {position: relative; overflow: visible; height: 0; border-bottom: none; border-top: 1px solid #E6E6E6;margin-bottom: 34px; _margin-bottom: 10px; text-align: center; font-size: 0;margin-top: -1px;}


.sort-bar{margin-top: 5px;}
.sort-bar a,.sort-bar span{display: block;float: left;padding: 4px 10px; border: #ccc 1px solid;margin-right: 5px;}
.sort-bar a:hover{color: #ae0000}
.sort-bar a.current,.sort-bar a.current-2{background: #ae0000;color: #fff;padding-right: 20px;position: relative;}
.sort-bar a.current i,.sort-bar a.current-2 i{background:url(../images/icon.png);display: inline-block; position: absolute; top: 8px; right: 8px; width: 9px; height: 11px; overflow: hidden; font-size: 0px;background-position: -200px -3px;}
.sort-bar a.current-2 i{background-position: -200px -15px;}
.sort-bar span{border: none;}

.txt-panel {padding-right:10px;background: #fff; border: 1px solid #c4c4c4; box-shadow: 0 1px 0 #fff; }
.txt-panel textarea{ background:#fff; border:0; color:#636363; line-height:1.5; padding:5px; height:80px;width: 100%; resize:vertical; overflow:auto; vertical-align:top; -webkit-transition:height .24s linear; -moz-transition:height .24s linear; -ms-transition:height .24s linear; transition:height .24s linear;}

.groupbuy-info ul{width: auto; margin: 30px auto; line-height: 25px; height: 50px; color: #999; position: relative;}
.groupbuy-info .sell_price{font-size:36px; padding-top:20px; font-weight:700;background:#7c0000;color:#fff;padding:35px;margin-left: -6px;margin-right: -1px;overflow: visible;}
.groupbuy-info .sell_price i{background: url(../images/icon.png) no-repeat; width: 50px;height: 50px;display: block; float: left; background-position: -150px 0;}
.groupbuy-info .sell_price .group-tag,.groupbuy-info .sell_price .flash-tag{position: absolute; top: -45px;right: 10px;background: url(../images/icon.png) no-repeat; width: 100px;height: 100px;display: block; float: right; background-position: -105px -643px;}
.groupbuy-info .sell_price .flash-tag{background-position: 0 -643px;}
.groupbuy-info ul li {float: left; width: 33%; border-right: 1px solid #e5e5e5; text-align: center; }
.groupbuy-info ul li.end {border-right:none; }
.groupbuy-info .content{padding: 10px;text-align: center;line-height: 30px;font-size: 14px;background:#f1f1f1;height:110px;}
.groupbuy-info .info i{margin-top:-3px;}
.groupbuy-info .content .info{width:260px;margin-left:auto;margin-right:auto; text-align: left;padding-top: 5px;}


.bundling-bar,.bundling-bbar{ background: #f7f7f7; padding:25px;border-bottom: #ddd 1px solid;position: relative;overflow: visible;}
.bundling-spec{height: 30px; padding: 20px 0 0 30px; font: normal 24px/30px 'microsoft yahei'; color: #FF6600;}
.bundling-bbar{border-bottom:none;}
.bundling-bar .save-top{position: absolute; left: 50%;background: url(../images/icon.png) no-repeat;width: 210px;height: 180px;top:-1px;background-position:0 -456px;z-index: 10001;margin-left: -105px;}
.bundling-bar .save-top .save-price{margin-top: 68px; font-size: 24px; color: #fff;text-align: center;}
.bund-info dt{font-size: 16px;font-weight: 700; float: left;vertical-align: middle;line-height: 30px;}
.bund-info dd{float: left;margin-left: 10px;line-height: 30px;}
.bund-info .price-caption{background: #c00; color:#fff;padding:2px 5px;}
.bund-info .price{color: #c00; font-size: 24px;}
.bundling-list .group-item{position: relative;margin-top: 15px;line-height: 20px;overflow:auto;}
.bundling-list .group-item .goods-item{float:left;width:100px;padding:5px;margin-left:30px;position: relative;}
.bundling-list .group-item .goods-item s{position: absolute; width: 24px; height: 22px; left: -25px; margin-top: 40px; margin-right: 3px;}
.bundling-list .group-item .goods-item .title{height: 40px;overflow: hidden;}