master

分支 (1)

管理

管理

master

imitate-tmall
/
settlement3.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.settlementDiv{
  max-width:1013px;
  margin:20px auto;
}
div.address{
  margin:20px 5px;
  text-align:left;
}
div.address div.addressTip{
  font-size:16px;
  font-weight:bold;
  text-align:left;
  margin-bottom:30px;
  color:#333333;
}
table.addressTable{
  width:550px;
  font-size:12px;
  margin:20px 20px;
}
table.addressTable td{
  color:#333333;
  vertical-align:top;
  padding-right:5px;
  height:30px;

}
table.addressTable td.detailAdress{
  width:100px;
  padding-top:2px;
}
table.addressTable td textarea{
  border:1px solid #AFAFAF;
  margin-bottom:10px;
  width:400px;
}
table.addressTable td input{
  border:1px solid #AFAFAF;
  width:225px;
}
span.redStar{
  color:red;
  font-size:12px;
}
td.detailAdress,td.postalCode,td.receiverName,td.phoneNumber{
  padding-top:2px;
}
div.productListTip{
  font-size:16px;
  font-weight:bold;
  text-align:left;
  margin-bottom:30px;
  color:#333333;
  }
  table.productListTable{
   font-size:12px;
   width:100%;
  }
  table.productListTable th{
   color:#999999;
   font-family:宋体;
   font-size:12px;
   text-align:center;
   padding-bottom:5px;
  }
  table.productListTable tr.rowborder td{
  background-color:#b2d1ff;
  border-right:2px solid #fff;
  height:3px;
  }
  th.productListTableFirstColumn{
   text-align:left !important;
  }
  th.productListTableFirstColumn img.tmallBuy{
    width:15px;
  }
  th.productListTableFirstColumn a.marketLink{
    color:black;
	font-family:宋体;
	font-weight:normal;
  }
  th.productListTableFirstColumn a.marketLink:hover{
    color:black;
	text-decoration:underline;
	font-family:宋体;
	font-weight:normal;
  }
  th.productListTableFirstColumn span.wangwangGif{
    display:inline-block;
	width:25px;
	height:25px;
	background-image:url(https://how2j.cn/tmall/img/site/wangwang.gif);
	background-repeat:no-repeat:
	background-color:transparent;
	background-attachment: scroll;
	background-position:-83px 0px;
	position:relative;
	top:8px;
	left:2px;
  }
  tbody.productListTableTbody td{
   text-align:center;
  }
  tbody.productListTableTbody td.orderItemImgTD{
   text-align:left;
  }
  tr.orderItemTR td{
   border-bottom:1px solid #E5E5E5;
  }
   tr.orderItemTR td{
    padding:10px 0px;
   }
   img.orderItemImg{
     width:50px;
	 height:50px;
	 border:1px solid #E9E9E9;
   }
   td.orderItemProductInfoTD{
   text-align:left !important;

   }
   div.orderItemProductInfoDiv{
     position:relative;
	 height:50px;
   }
   div.InnerImage{
     position:absolute;
	 bottom:0;
   }
   a.orderItemProductLink{
     color:#666666;
   }
   a.orderItemProductLink:hover{
     color:#C40000;
	 text-decoration:none;
   }
   span.orderItemProductNumber,span.orderItemProductPrice{
     color:#000000;
   }
   span.orderItemProductSum{
     color:#CC0000;
	 font-weight:bold;
   }
   td.orderItemImgTD,td.orderItemDeliveWay{
     border-bottom:0px solid black !important;
   }
   label.orderItemDeliveLabel{
     color:#666666;
	 font-family:宋体;
	 font-size:12px;
	 font-weight:normal;
   }
   select.orderItemDeliveSelect{
     height:23px;
	 width:100px;
   }
   div.orderItemSumDiv{
    border-top:2px solid #B4D0FF;
	background-color:#F2F6FF;
	height:60px;
	padding:20px;
   }
   div.orderItemSumDiv span{
    color:#999999;
   }
   span.leaveMessageText{
    display:inline-block;
	margin-right:10px;
	float:left;
   }
   div.orderItemSumPriceDiv{
    height:50px;
	margin:50px;
   }
   div.orderItemSumPriceDiv div{
     margin-top:25px;
   }
   div.orderItemSumPriceDiv span{
    color:#999999;
   }
   span.orderItemSumPrice{
    color:#C40000 !important;
	font-size:22px;
	font-weight:bold;
	border-bottom: 1px dotted #F2F6FF;

   }
   button.submitButton{
     color:white;
	 background-color:#C40000;
	 border:1px solid #C40000;
	 text-align:center;
	 line-height:40px;
	 font-size:16px;
	 font-weight:bold;
	 float:right;
	 display:inline-block;
	 width:180px;
	 height:40px;
	 margin:0px 25px;
	 padding-bottom:5px;
	 border-radius:2px;
   }
   .leaveMessageImg{
     cursor: pointer;
   }
   span.leaveMessageText{
     padding-top:5px;
   }
</style>

<script>
  $(function(){
    $(".leaveMessageImg").click(function(){
	   $(this).hide();
	   $("span.leaveMessageTextareaSpan").show();
	   $("div.orderItemSumDiv").css("height","80px")
	});


  });
</script>

<div class="settlementDiv">
  <div class="title">
    <img src="https://how2j.cn/tmall/img/site/simpleLogo.png" class="pull-left">
	<img src="https://how2j.cn/tmall/img/site/buyflow.png" class="pull-right">
	<div style="clear:both"></div>
  </div>
  <div class="address">
    <div class="addressTip">输入收货地址</div>
	<div>
	  <table class="addressTable">
	    <tbody>
		<tr>
		<td class="detailAdress">详细地址<span class="redStar">*</span></td>
		<td>
		<textarea placeholder="建议您如实填写详细收货地址，如街道名称，门牌号码，楼层和房间号等信息" name="address"></textarea>
		</td>
		</tr>
		<tr>
		<td class="postalCode">邮政编码</td>
		<td><input type="text" placeholder="如果您不清楚邮递区号，请填写000000" name="postalCode"></td>
		</tr>
		<tr>
		<td class="receiverName">收货人姓名<span class="redStar">*</span></td></td>
		<td><input type="text" placeholder="长度不超过25个字符" name="receiver"></td>
		</tr>
		<tr>
		<td class="phoneNumber">手机号码<span class="redStar">*</span></td></td>
		<td><input type="text" placeholder="请输入11位手机号码" name="phoneNumber"></td>
		</tr>
		</tbody>
	  </table>
	 </div>
	</div>
	<div class="productList">
  <div class="productListTip">确认订单信息</div>
  <table class="productListTable">
    <thead>
      <th class="productListTableFirstColumn" colspan="2">
	    <img src="https://how2j.cn/tmall/img/site/tmallbuy.png" class="tmallBuy">
		<a href="#nowhere" class="marketLink">店铺：天猫店铺</a>
		<a href="#nowhere" class="wangwangLink"><span class="wangwangGif"></span></a>
	  </th>
	  <th>单价</th>
	  <th>数量</th>
	  <th>小计</th>
	  <th>配送方式</th>
	  <tr class="rowborder">
                    <td colspan="2"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
	</thead>
	<tbody class="productListTableTbody">
	  <tr class="orderItemTR">
	   <td class="orderItemImgTD">
	   <img src="https://how2j.cn/tmall/img/productSingle_middle/4206.jpg" class="orderItemImg">
	   </td>
	   <td class="orderItemProductInfoTD">
	    <div class="orderItemProductInfoDiv">
	     <a href="#nowhere" class="orderItemProductLink">Philips/飞利浦 HR1897/30破壁微榨原汁机 多功能家用果汁榨汁机</a>
	     <div class="InnerImage">
	   <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png" style="height:16px;width:16px">
	   <img title="消费者保障服务，7天无条件退货" src="https://how2j.cn/tmall/img/site/7day.png">
	   <img title="消费者保障服务，承诺如实描述"  src="https://how2j.cn/tmall/img/site/promise.png">
	     </div>
	    </div>
	   </td>
	   <td>
	   <span class="orderItemProductPrice">￥3514.05</span>
	   </td>
	   <td>
	   <span class="orderItemProductNumber">2</span>
	   </td>
	   <td>
	   <span class="orderItemProductSum">￥7028.10</span>
	   </td>
	   <td class="orderItemDeliveWay" rowspan="5">
	   <label class="orderItemDeliveLabel">
	     <input type="radio" checked="checked">
		 普通配送
	   </label>
	   <select class="orderItemDeliveSelect">
	     <option>快递 免邮费</option>
	   </select>
	   </td>
	   </tr>

	    <tr class="orderItemTR">
	   <td class="orderItemImgTD">
	   <img src="https://how2j.cn/tmall/img/productSingle_middle/3796.jpg" class="orderItemImg">
	   </td>
	   <td class="orderItemProductInfoTD">
	    <div class="orderItemProductInfoDiv">
	     <a href="#nowhere" class="orderItemProductLink">公众智能扫地机器人家用全自动电动清洁地毯擦拖地一体机吸尘器</a>
	     <div class="InnerImage">
	   <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png" style="height:16px;width:16px">
	   <img title="消费者保障服务，7天无条件退货" src="https://how2j.cn/tmall/img/site/7day.png">
	   <img title="消费者保障服务，承诺如实描述"  src="https://how2j.cn/tmall/img/site/promise.png">
	     </div>
	    </div>
	   </td>
	   <td>
	   <span class="orderItemProductPrice">￥2,124.15</span>
	   </td>
	   <td>
	   <span class="orderItemProductNumber">1</span>
	   </td>
	   <td>
	   <span class="orderItemProductSum">￥2,124.15</span>
	   </td>
	   </tr>
	   </tbody>
	 </table>
	 <div class="orderItemSumDiv">
	   <div class="pull-left">
	    <span class="leaveMessageText">给卖家留言：</span>
		 <span>
             <img src="https://how2j.cn/tmall/img/site/leaveMessage.png" class="leaveMessageImg">
         </span>
		 <span class="leaveMessageTextareaSpan" style="display:none" width="100px">
		   <textarea class="leaveMessageTextarea" name="Message" ></textarea>
		   <div>
		     <span>还可以输入200个字符...</span>
		   </div>
		 </span>
		</div>
		<div class="orderItemSumPriceDiv">
		  <div class="pull-right">
		    <span>实付款：</span>
			 <span class="orderItemSumPrice">￥9152.25</span>
		  </div>
		</div>
		<div class="submitOrderDiv">
		  <button class="submitButton " >提交订单</button>
		 </div>
	</div>
</div>