master

分支 (1)

管理

管理

master

imitate-tmall
/
product货物加详情加评论.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<style>
body{
 font-size:12px;
 font-family:Arial;
}
div.product{
  max-width:1013px;
  margin:10px auto
}
div.imgAndInfo{
  margin:40px 20px auto;
  max-width:1013px;

}
div.allImg{
  float:left;
  width:400px;
}
img.bigImage{
  width:400px;
  height:400px;
  padding:20px;
  border:1px solid #F2F2F2;
}
div.smallImageDiv{
  margin:20px auto;
  width:80%;
}
img.smallImage{
  width:60px;
  height:60px;
  border:1px solid white;
}
img.smallImage:hover{
  border:1px solid black;
}
div.RightInfo{
  padding:0px 20px;
  overflow:hidden;
}
div.productTitle{
  margin-left:10px;
  font-size:16px;
  font-weight:bold;
  color:black;
}
div.productSubTitle{
  margin-left:11px;
  color:#DD2727;
}
div.RightInfo div.juHuaSuan{
  background-color:#2DA77A;
  color:white;
  text-align:center;
  height:40px;
  line-height:40px;
  margin-top:10px;
}
div.RightInfo div.juHuaSuan span.thefirstOfJu{
  font-weight:bold;
  font-size:18px;
  font-family:黑体;
}
div.RightInfo div.juHuaSuan span.TimeOfJu{
  color:#FFC057;
  font-weight:bold;
}
div.RightInfo div.productPriceDiv {
  background-image:url(https://how2j.cn/tmall/img/site/priceBackground.png);
  padding:10px;
  height:102px;
  color:#666666;
}
div.RightInfo div.productPriceDiv div.gouWuQuanDiv{
  margin-top:3px;
}
div.RightInfo div.productPriceDiv div.originalDiv{
  margin-top:3px;
}
div.RightInfo div.productPriceDiv div.promotionDiv{
  margin-top:3px;
}
div.RightInfo div.productPriceDiv div.originalDiv span.originalPriceDesc{
  color:#999999;
  display:inline-block;
  width:60px;
}
div.RightInfo div.productPriceDiv div.originalDiv span.originalPrice{
  text-decoration:line-through;
  color:#333333;
}
div.RightInfo div.productPriceDiv div.promotionDiv span.promotionPriceYuan{
  font-family:Arial;
  font-size:18px;
  color:#C40000;
}
div.RightInfo div.productPriceDiv div.promotionDiv span.promotionPrice{
  color:#DD2727;
  font-size:25px;
  font-weight:bold;
}
div.RightInfo div.productPriceDiv div.promotionDiv span.promotionPriceDesc{
  color:#999999;
  display:inline-block;
  width:55px;
  position:relative;
  left:0px;
  top:-3px;
}
div.RightInfo div.salesAndComments{
  margin:10px 0px;
  border-top:1px dotted #C9C9C9;
  border-bottom:1px dotted #C9C9C9;
  padding:10px;
}
div.RightInfo div.salesAndComments div{
  width:49%;
  display:inline-block;
  text-align:center;
  color:#888888;
}
div.RightInfo div.salesAndComments span.redBoldFont{
  color:#C40000;
  padding-left:3px;
  font-size:16px;
  font-weight:bold;

}
div.RightInfo div.salesAndComments div:first-child{
  border-right:1px solid #E5DFDA;
}
div.RightInfo div.buyNumbers{
  color:#888888;
  margin-left:3px;
}
div.buyNumbers input.inputBuyNumbersText{
  width:40px;
  vertial-align:center;
  ;
}
div.buyNumbers span.up{

  vertial-align:center;
  color:#DD2727;
  border:1px solid #C9C9C9;
  border-collapse:collapse;
  padding:2px;
}
div.buyNumbers span.down{

  vertial-align:center;
  color:#888888;
  border:1px solid #C9C9C9;
  padding:2px;
}
div.buyNumbers span.up:hover,div.buyNumbers span.down:hover{
  border:1px solid red;
  text-decoration：none;
}
div.buyNumbers span.arrow{
  margin-left:5px;
}
div.buyNumbers span.productStore{
  margin-left:5px;
  font-size:13px
}
div.buyNumbers span.productStoreNumber{
  color:#DD2727;
  font-size:15px;
  font-weight:bold;
  margin:0px 3px;
}
div.servicePromise{
  margin-top:20px;
}
div.servicePromise a{
  color:#666666;
}
div.servicePromise a:hover{
  text-decoration:none;
  color:#C40000;
}
div.buyDiv{
  margin:20px auto;
  text-align:center;
}
div.buyDiv button{
  width:180px;
  height:40px;
  margin:10px;
  display:inline-block;
}
div.buyDiv button.buyNow{
  border:1px solid #C40000;
  background-color:#FFEDED;
  line-height:40px;
  font-size:16px;
  color:#C40000;
  vertial-align:center;
}
div.buyDiv button.addCartButton{
  background-color:#C40000;
  border:1px solid #C40000;
  color:white;
  font-size:16px;
  line-height:40px;
}
div.buyDiv button.addCartButton span.smallCart{
  font-size:12px;
  margin-right:8px;
}
a:hover{
  text-decoration:none;
}


 div.productDetailDiv{
   width:790px;
   margin:40px auto;
 }
 div.titleDiv{
   border:1px solid #DFDFDF;
   border-left-width:0px;
 }
 div.titleDiv a.detailName{
   border-right:1px solid #cfbfb1;
   border-left:1px solid #cfbfb1;

   color:#b10000;
   display:inline-block;
   font-weight:bold;
   height:46px;
   line-height:46px;
   width:90px;
   text-align:center;
   position:relative;
 }
 div.titleDiv a.detailName:before{
   content:"";
   display:block;
   border-top:1px solid #b00000;
   width:90px;
   height:0;
   position:absolute;
   top:-1px;
   margin-left:-1px;
 }
 div.titleDiv a.detailName:after{
   content:"";
   display:block;
   border-color:#b00000 transparent transparent transparent;
   border-style:solid;
   border-width:5px;
   width:0px;
   height:0;
   position:absolute;
   top:0px;
   left:45%;
 }
 div.titleDiv a.totalComment{
   padding:0px 20px;
   border-right:1px solid #DFDFDF;
   color:#222222;
 }
 div.titleDiv a.totalComment span.totalCommentNumber{
   color:#3355B9;
   padding-left:1px;
 }
 div.titleDiv a:hover{
   color:#C40000;
   text-decoration:none;
 }
 div.productParaDiv{
   padding:40px;
   border:1px solid #DFDFDF;
   height:200px;
 }
 div.productParaTitle{
   font-weight:bold;
   color:#888888;
   margin-bottom:20px;
   font-size:14px;
 }
 div.productDetail span{
   display:block;
   width:220px;
   float:left;
   padding:8px 10px;
   margin-left:5px;
 }
 div.productImg img{
   display:block;
   margin:20px 0px;
 }


 div.productReviewDiv{
   width:790px;
   margin:40px auto;
}
div.productReviewTopPart{
  border:1px solid #DFDFDF;
}
div.productReviewTopPart a.productReviewTopPartSelectedLink{
   color:#222222;
   display:inline-block;
   height:46px;
   line-height:46px;
   width:90px;
   text-align:center;
}
div.productReviewTopPart a.selected{
   border-right:1px solid #cfbfb1;
   border-left:1px solid #cfbfb1;
   line-height:46px;
   width:90px;
   text-align:center;
   display:inline-block;
   color:#b10000;
   position:relative;
}
div.productReviewTopPart a.selected:before{
   content:"";
   display:block;
   border-top:1px solid #b00000;
   width:90px;
   height:0;
   position:absolute;
   top:-1px;
   margin-left:-1px;
}
div.productReviewTopPart a.selected:after{
   content:"";
   display:block;
   border-color:#b00000 transparent transparent transparent;
   border-style:solid;
   border-width:5px;
   width:0px;
   height:0;
   position:absolute;
   top:0px;
   left:45%;
 }
 div.productPageDiv div.productReviewComment{
   padding-top:50px;
 }
 div.productReviewComment div.productReviewItem{
   border-bottom:1px solid #E5DFDA;
   margin:10px 0px;
 }
 div.productReviewItem div.CommentContent{
   float:left;
   width:80%;
   color:#222222;
   display:inline-block;
   margin:3px 20px;
 }
 div.productReviewItem div.CommentDate{
   float:left;
   width:80%;
   display:inline-block;
   margin:3px 20px;
   color:#CCCCCC;
 }
 div.productReviewItem div.productReviewItemUser{
   margin:5px 20px;
   padding:20px 0;
   color:#404040;
 }
 div.productReviewItem div.productReviewItemUser span.hiddenName{
   color:#888888;
 }
 div.productPageDiv a:hover{
   text-decoration:none;
   color:#C40000;
 }
</style>

<script>
  $(function(){
    $("div.productReviewDiv").hide();
	$("a.totalComment").click(function(){
	  $("div.productDetailDiv").hide();
	  $("div.productReviewDiv").show();
	});
    $("a.productReviewTopPartSelectedLink").click(function(){
	  $("div.productDetailDiv").show();
	  $("div.productReviewDiv").hide();
	});


  });

  $(function(){
 $("img.smallImage").mouseenter(function(){
    var bigImageURL =$(this).attr("bigImageURL");
	$("img.bigImage").attr("src",bigImageURL);
 });
 $("img.bigImage").load(
   function(){
     $("img.smallImage").each(function(){
	   var bigImageURL=$(this).attr("bigImageURL");
	   img = new Image();
	   img.src="bigImageURL";
	   img.onload = function(){
	      console.log(bigImageURL);
		  $("div.img4load").append($(img));
	   };
	   });
	   });

	   });

$(function(){
   var stock=66;
  $("input.inputBuyNumbersText").keyup(function(){
    var num =$("input.inputBuyNumbersText").val();
	num =  parseInt(num);

    if(isNaN(num))
	 num=1;
	if(num<=0)
	 num=1;
	if(num>stock)
	 num=stock;
	$("input.inputBuyNumbersText").val(num);
  });

  $(".increaseNumber").click(function(){
    var num = $(".inputBuyNumbersText").val();
    num++;
	if(num>stock)
	 num=stock;
	 $("input.inputBuyNumbersText").val(num);
  });

  $(".decreaseNumber").click(function(){
    var num = $(".inputBuyNumbersText").val();
    num--;
	if(num<=0)
	 num=1;
	 $("input.inputBuyNumbersText").val(num);
  });
 });
</script>
<div class="product">
<div class="imgAndInfo">
  <div class="allImg">
    <img src="https://how2j.cn/tmall/img/productSingle/8619.jpg" width="100px" class="bigImage">
	<div class="smallImageDiv">
	  <img src="https://how2j.cn/tmall/img/productSingle/8620.jpg" width="56px" class="smallImage" bigImageURL="https://how2j.cn/tmall/img/productSingle/8620.jpg">
	  <img src="https://how2j.cn/tmall/img/productSingle/8619.jpg" width="56px" class="smallImage" bigImageURL="https://how2j.cn/tmall/img/productSingle/8619.jpg">
	  <img src="https://how2j.cn/tmall/img/productSingle/8618.jpg" width="56px" class="smallImage" bigImageURL="https://how2j.cn/tmall/img/productSingle/8618.jpg">
	  <img src="https://how2j.cn/tmall/img/productSingle/8617.jpg" width="56px" class="smallImage" bigImageURL="https://how2j.cn/tmall/img/productSingle/8617.jpg">
	  <img src="https://how2j.cn/tmall/img/productSingle/8616.jpg" width="56px" class="smallImage" bigImageURL="https://how2j.cn/tmall/img/productSingle/8616.jpg">
	</div>
	  <div class="img4load"></div>
  </div>


 <div class="RightInfo">
 <div class="productTitle">名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女</div>
 <div class="productSubTitle">高端定制 高档棉麻 现货即发 加购物车 领优惠券</div>
 <div class="theProductPrice">
 <div class="juHuaSuan">
   <span class="thefirstOfJu">聚划算</span>
   <span class="fontOfJu">此商品即将参加聚划算，</span>
   <span class="TimeOfJu">1天19小时</span>
   <span class="fontOfJu">后开始</span>
 </div>
 <div class="productPriceDiv">
   <div class="gouWuQuanDiv"><img src="https://how2j.cn/tmall/img/site/gouwujuan.png" height="16px">
    <span>全天猫实物商品通用</span>
   </div>
  <div class="originalDiv">
   <span class="originalPriceDesc">价格</span>
   <span class="originalPriceYuan">￥</span>
   <span class="originalPrice">399.00</span>
  </div>
  <div class="promotionDiv">
   <span class="promotionPriceDesc">促销价</span>
   <span class="promotionPriceYuan">￥</span>
   <span class="promotionPrice">379.05</span>
   </div>
 </div>
</div>
  <div class="salesAndComments">
    <div>销量<span class="redBoldFont">50</span></div>
	<div>累计评价<span class="redBoldFont">19</span></div>
  </div>
  <div class="buyNumbers">
    <span>数量</span>
	<span><input type="text" value="1" class="inputBuyNumbersText"></input></span>件
	<span class="arrow">
	  <a class="increaseNumber" href="#nowhere">
      <span class="up glyphicon glyphicon-arrow-up"></span>
	  </a>
	  <a class="decreaseNumber" href="#nowhere">
	  <span class="down glyphicon glyphicon-arrow-down"></span>
	  </a>
	</span>
	<span class="productStore">库存<span class="productStoreNumber">66</span>件</span>
  </div>
  <div class="servicePromise">
    <span style="color:#999999">服务承诺</span>
	<span><a href="#nowhere">正品保证</a></span>
	<span><a href="#nowhere">极速退款</a></span>
	<span><a href="#nowhere">赠运费险</a></span>
	<span><a href="#nowhere">七天无理由退换</a></span>
  </div>
  <div class="buyDiv">
    <a href="#nowhere" class="buyLink">
	<button class="buyNow">立即购买</button></a>
	<a class="addCartLink" href="#nowhere">
	<button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart smallCart"></span>加入购物车</button></a>
  </div>
  </div>
  <div style="clear:both">
</div>


<div class="productDetailDiv">
  <div class="titleDiv">
    <a href="#nowhere" class="detailName">商品详情</a>
	<a href="#nowhere" class="totalComment">累计评价<span class="totalCommentNumber">19</span></a>
  </div>


 <div class="productParaDiv">
    <div class="productParaTitle">产品参数：</div>
	<div class="productDetail">
	  <span >材质成分：聚脂钎维100%</span>
	  <span >品牌：Emyche/艾米秋</span>
	  <span >货号：129668</span>
	  <span >尺码：L M S XL X</span>
	  <span >上市年份季节：2016年夏季</span>
	  <span >颜色分类：白色 黑色 浅蓝</span>
	  <span >适用年龄：18-52周岁</span>
	</div>
	 </div>
	<div style="clear:both"></div>
	<div class="productImg">
	<img src="https://how2j.cn/tmall/img/productDetail/8626.jpg" width="790px">
	</div>

 </div>


 <div class="productPageDiv">
<div class="productReviewDiv" style="display:block;">
  <div class="productReviewTopPart">
    <a class="productReviewTopPartSelectedLink" href="#nowhere">商品详情</a>
	<a class="selected" href="#nowhere">累计评价<span class="productReviewTopPartSelectedLinkNumber">19</span>
	</a>
  </div>
  <div class="productReviewComment">
    <div class="productReviewItem">
	  <div class="CommentContent">
	   不错的购物，包装很精细，布料也不错舒服，因为之前一直购买品牌装，很好的一次网购，生完宝宝刚刚一个多月我一百五十斤穿2XL不错
	  </div>
	  <div class="CommentDate">2016-08-10</div>
	  <div class="productReviewItemUser">
	    哀****莉<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
       面料很好，大小也刚刚好，本来买之前还担心，犹豫，等货到了，比我心中想象的好很多，大家放心购买，很满意的购物，以后还会来??
	   </div>
	  <div class="CommentDate">2016-08-23</div>
	  <div class="productReviewItemUser">
	    贤*闲<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
     衣服收到了，给朋友买的，真心不错，料子也特别好，穿起来特别有气质，跟模特穿的效果差不多。。。好评，好评
	 </div>
	 <div class="CommentDate">2016-08-19</div>
	  <div class="productReviewItemUser">
	    哀****莉<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	  <div class="productReviewItem">
	  <div class="CommentContent">
	  衣服不错，手感不错，试穿很有型，真心的喜欢，谢谢老板
	  </div>
	  <div class="CommentDate">2016-07-19</div>
	  <div class="productReviewItemUser">
	    孤*****爱<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	   <div class="productReviewItem">
	  <div class="CommentContent">
	  喜欢(⊙o⊙)哦，美美哒，值得一试！！！宽松雪纺，很舒服
	  </div>
	  <div class="CommentDate">2016-08-10</div>
	  <div class="productReviewItemUser">
	    这****0<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	   <div class="productReviewItem">
	  <div class="CommentContent">
	  衣服已经收到，大小很合适，面料也可以，就是感觉衣服面料有一点厚，其他都还不错，款式也好看，希望店家多出一点新款，以后回来光顾你们。?
	  </div>
	  <div class="CommentDate">2016-07-10</div>
	  <div class="productReviewItemUser">
	    y****心<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	  <div class="productReviewItem">
	  <div class="CommentContent">
	  很漂亮的衣服，料子有垂感，我很满意，老公也说好呢
	  </div>
	  <div class="CommentDate">2016-07-27</div>
	  <div class="productReviewItemUser">
	    阿*、<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	  <div class="productReviewItem">
	  <div class="CommentContent">
	  真不错，已经迫不及待的穿上了，朋友们都说好，挺有气质的，就是上衣稍微有点肥，不过肉肉被藏起来了！有看上的赶紧下单吧！
	  </div>
	  <div class="CommentDate">2016-08-12</div>
	  <div class="productReviewItemUser">
	    名*****_<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
	  质量是真的不错，适合个子高一点的美眉穿，很漂亮?
	  </div>
	  <div class="CommentDate">2016-08-03</div>
	  <div class="productReviewItemUser">
	    安**°<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
再买的时候纠结了好久，最后还是选择在这里购买，一次满意的网购，让我对网购有了希望，或刚收到，因觉得物超所值，就迫不及待拍了照片，那个玻璃的声音非常脆，我个人觉得挺好的，值得拥有！	  </div>
	  <div class="CommentDate">2016-08-08</div>
	  <div class="productReviewItemUser">
	    这****0<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	  <div class="productReviewItem">
	  <div class="CommentContent">
	  服务：不错
	  </div>
	  <div class="CommentDate">2016-08-20</div>
	  <div class="productReviewItemUser">
	    醉**心<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
	  强烈推荐，我的天，质量也太好了，让我情何以堪，大爱啊。说说我的体格吧，162.105斤，腰围大概是22，穿m码刚刚好。快递那么快，特地跟店家说10号要外出店家也尽心备注的很好。真的特别感动，我收藏店铺了，下次还来你们家。衣服比雪纺舒服，薄薄的，现在穿刚好，我配了高跟鞋和小白鞋都很完美。店家还送了无痕肩带，真的太细心了，给一百个好评，赞。衣服我看了没有线头，薄薄的。不说了，我赶紧发给我姐让她看看。
	  </div>
	  <div class="CommentDate">2016-08-17</div>
	  <div class="productReviewItemUser">
	    安**°<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	  <div class="productReviewItem">
	  <div class="CommentContent">
	  此用户没有填写评论！
	  </div>
	  <div class="CommentDate">2016-07-21</div>
	  <div class="productReviewItemUser">
	    乱**型<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
	  衣服质量真心不错很厚实，上身效果很棒哦，穿起来很舒服，很洋气。价格也很合理……赞赞赞
	  </div>
	  <div class="CommentDate">2016-08-19</div>
	  <div class="productReviewItemUser">
	    丶***眠<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	  <div class="productReviewItem">
	  <div class="CommentContent">
	  服裤子都很合身，同事笑我说这是我买得最好看最时尚的一套衣服，衣服上身效果也不错，很是满意，还送了隐形带，正好用上，质量很好穿着凉快，唯一不足的就是洗了后需要烫一下才不皱，不过不影响衣服的美，很满意。上传两张没P的照片
	  </div>
	  <div class="CommentDate">2016-08-08</div>
	  <div class="productReviewItemUser">
	    乱**型<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
	  不好意思好久才来评价  质量好  上身效果好  主要有胖子穿的漂亮衣服啦   赞赞赞
	  </div>
	  <div class="CommentDate">2016-07-11</div>
	  <div class="productReviewItemUser">
	    l******1<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
	   网购以来为数不多的质量好到超乎意料，穿上特别舒服，大小也正合适，超赞！这个店里值得好好逛逛！
	  </div>
	  <div class="CommentDate">2016-07-10</div>
	  <div class="productReviewItemUser">
	    盗**记<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 <div class="productReviewItem">
	  <div class="CommentContent">
	  宝贝面料很舒服，一字领也非常美，说实话是充上衣买的！犹豫了很长时间才下定决心的，很喜欢，很满意！喜欢就是最值的！
	  </div>
	  <div class="CommentDate">2016-07-24</div>
	  <div class="productReviewItemUser">
	   贤*闲<span class="hiddenName">（匿名）</span>
	  </div>
	  <div style="clear:both"></div>
	 </div>

	 </div>
	 </div>
</div>
</div>