_goods-detail.css 7.78 KB
.shop-cart{
	.goods-detail{
		position: absolute;
		top: 10%;
		left: 0;
		z-index: 101;
		width: 650px;
		height: auto;
		overflow: hidden;
		border:1px solid #ccc;
		border-radius: 5px;
		background: #fff;
		display: none;
			.magnify{
		    	position: absolute;
		    	width: 12px;
		    	height: 12px;
		    	background: url(/cart/magnify.png);
		    	bottom: 2px;
		    	right: 2px;

		    }
		.detail-header{
			display: block;
			font-size: 12px;
			line-height: 16px;
			text-align: center;
			color: #fff;
			margin-top: 5px;
			box-sizing: border-box;
			padding-right: 5px;
			height: 16px;
			cursor: move;
			.colse{
				float: right;
				width: 46px; 
				height: 16px;
				background: #ccc;
				border-radius: 2px;
				cursor: pointer;
				&:hover{
					background: #414141;
				}
			}
		}
		.detail-body{
			width: 610px;
		    padding: 15px;
		    margin: 0 auto;
		    .none{
				display: none;
			}
		    .detail-bigpic{
		    	width: 290px;
			    padding-bottom: 15px;
			    float: left;
			    .bigpic{
				    width: 210px;
		    		height: 280px;
		    		display: block;
		    		margin:0 auto 10px;
		    		img{
						width: 100%; 
						height: auto;
		    		}
			    }
			    .piclist{
			    	height: 65px;
			    	cursor: pointer;
			    	span{    
			    		width: 10px;
	    				height: 60px;
			    	}
			    	.pre{
	                	background: url(/cart/pre.png);
			    		float: left;
			    	}
			    	.con{
			    		width: 260px;
				    	height: 65px;
					    overflow: hidden;
					    float: left;
					    margin-left: 5px;
					    li{
					    	float: left;
					    	width: 58px;
						    height: 58px;
						    border: 1px #ccc solid;
						    margin: 1px;
						    vertical-align: top;
						    overflow: hidden;
						    text-align: center;
						    img{
						    	width: auto;
						    	height: 100%;
						    	display: inline-block;
						    }
					    }
					    .active{
					    	width: 56px;
						    height: 56px;
						    border: 2px #333 solid;	
					    }
			    	}
			    	.next{
	                	background: url(/cart/next.png);
			    		float: right;
			    	}
			    }
		    }
		    .detail-info{
		    	width: 300px;
		    	float: right;
		    	padding-bottom: 15px;
		    	.title{
		    		padding: 5px 0;
		    		h2{
						width: 300px;
					    color: #000;
					    font-size: 12px;
					    font-weight: normal;
					    white-space: nowrap;
					    overflow: hidden;
		    		}
		    	}
		    	.arrivalDate{
		    		color: #f00;
		    	}
		    	.type{
		    		padding-bottom: 10px;
		    		.type-s{
						background: #ccc;
					    padding: 0px 5px;
					    color: #fff;
					    font-size: 12px;
					    height: 15px;
					    line-height: 15px;
					    display: inline-block;
		    		}
		    	}
		    	.price{
		    		 padding: 0px 0px 10px 0px;
				    margin-bottom: 10px;
				    border-bottom: 1px #000 solid;
				    .oldprice{
						color: #999;
					    font-size: 14px;
					    font-weight: bold;
					    display: block;
					    padding-bottom: 5px;
				    }
				    .newprice{
						color: #000;
					    font-size: 14px;
					    font-weight: bold;
					    height: 30px;
					    line-height: 30px;
					    padding: 0px 0px 5px 0px;
					    b{
							font-size: 22px;
						    font-family: arial;
					    }
				    }
		    	}
		    	.order{
				    color: #000;
				    font-size: 12px;	
				    dd{
				    	width: 55px;
				    	float: left;
				    	padding-bottom: 8px;
				    }
				    dt{
				    	width: 245px;
				    	float: left;
				    	padding-bottom: 8px;
		    		}
		    		dd.colorBox{
		    			line-height: 44px;
		    		}
		    		.colorBox{
				    	height: 75px;
				    	li{
				    		width: 44px;
						    height: 65px;
						    overflow: hidden;
						    text-align: center;
						    margin-right: 4px;
						    display: inline;
						    float: left;
							cursor: pointer;
						    .atcive{						    	
						    	width: 40px;
							    height: 40px;
							    border: 2px #e8044f solid;							    
							    span{
							    	position: absolute;
							    	bottom: 0;
							    	right: 0;
							    	width: 11px;
							    	height: 11px;
							    	overflow: hidden;
						    		background: resolve(/cart/ico_r_act.png) 0 0 no-repeat;
							    }
						    }
						    p{
						    	width: 42px;
							    height: 42px;
							    margin: 0px;
							    display: inline-block;							    
							    border: 1px #ccc solid;
							    position: relative;
							    img{
							    	width: 100%;
							    	height: auto;
							    }
						    }
						    span{
						    	line-height: 20px;
						    }
				    	}
				    }
				    .showSizeBox{
			    		height: 25px;
						line-height: 18px;
			    		span{
		    				cursor: pointer;
							height: 18px;
						    padding: 0px 10px;
						    border: 1px #ccc solid;
						    margin: 1px 5px 5px 1px;
						    display: inline;
						    float: left;
						    overflow: hidden;
			    		}
			    		.atcive{
							height: 16px;
						    border: 2px #f00 solid;
						    background: resolve(/cart/ico_r_act.png) right bottom no-repeat;
			    		}
			    		.nullAtcivec{
							height: 18px;
						    border: 1px #ccc solid;
						    color: #ccc;	
						}
						.atcivec{
							height: 16px;
						    border: 2px #ccc solid;
						    background: resolve(/cart/ico_r_act_h.png) right bottom no-repeat;
						    color: #ccc;	
						}
			    	}
			    	.amount_wrapper{
			    		width: 100px;
					    height: 20px;
					    display: inline-block;
					    .amount{
					    	width: 12px;
						    height: 12px;
						    display: inline;
						    cursor: pointer;
						    border: 0px;
						    float: left;
						    font-size: 10px;
						    color: #c4c4c4;
					    }
					    .cut{
                			background: url(/cart/ico_minus.png);   
						    margin: 5px 5px 0px 0px;
					    }
					    .add{
                			background: url(/cart/ico_plus.png);
					    	margin: 5px 0px 0px 5px;
					    }
					    .mnum{
					    	width: 33px;
						    height: 18px;
						    line-height: 16px;
						    border: #c4c4c4 solid 1px;
						    text-align: center;
						    overflow: hidden;
						    float: left;
						    font-size: 12px;
					    }
			    	}
				 }
				 .submit{
				 	padding-top: 10px;
				 	float: left;
				 	input{
						width: 225px;
					    height: 45px;
					    overflow: hidden;
					    border: 0px;
					    cursor: pointer;
					    float: left;
				 	}
				 	.addcart{
	                	background: url(/cart/btn_b_add.png);
				 	}
				 	.btn_pre_sale{
	                	background: url(/cart/btn_pre_sale.png);
				 	}
				 	.btn_sellout{
	                	background: url(/cart/btn_b_sellout.png);
				 	}
				 	.fav_count{
	                	background: url(/cart/btn_b_sc.png);
				 		height: 30px;
				 	}
				 }
		    }
			.detail-size{
				float: left;
				border-top: 1px #ccc dashed;
				width: 100%;
				height: auto;
				padding-bottom: 15px;
				h3{
					height: 35px;
				    line-height: 35px;
				    font-size: 14px;
				    span{
				    	font-size: 12px;
				    }
				}
				table{
					width: 100%;
					height: auto;    
					border: 1px solid #ccc;
				    margin-bottom: 5px;
				    font-size: 12px;
				    td{
						border: 1px solid #fff;
					    padding: 3px;
					    font-weight: normal;
					    background: #fbfbfb;
				   		text-align: center;
				   		padding: 8px 3px;
				    }
				    tr:nth-of-type(even) td{
				    	background:#f4f4f4;
				    }
				}
				.size-info{
					font-size: 12px;
					color: #999;
				}
			}
		}
	}
}