|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
|
|
|
|
|
|
<title>商品介绍</title>
|
|
|
|
|
|
<!-- Bootstrap -->
|
|
|
|
|
|
<link href="../css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
<link href="../css/p-i.css" rel="stylesheet">
|
|
|
|
|
|
<link href="../css/reset.css" rel="stylesheet">
|
|
|
|
|
|
<script type="text/javascript" src="../js/cart.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
/* * {
|
|
|
|
|
|
box-sizing: content-box !important;
|
|
|
|
|
|
} */
|
|
|
|
|
|
.cart-header, .item-content {
|
|
|
|
|
|
/* position: relative; */
|
|
|
|
|
|
width: 990px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cart-header {
|
|
|
|
|
|
padding: 20px 0 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cart-logo {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cart {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 80px;
|
|
|
|
|
|
font-size:xx-large;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
.header-search {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
top: 10px;
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
height: 47px;
|
|
|
|
|
|
width: 45%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.form-control {
|
|
|
|
|
|
width:300px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-inner {
|
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-chk {
|
|
|
|
|
|
width: 45px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.chk {
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-content {
|
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-content .td {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
min-height: 119px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-item {
|
|
|
|
|
|
width: 302px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-pic {
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-item .item-info {
|
|
|
|
|
|
margin: -3px 0 0 91px;
|
|
|
|
|
|
padding-right: 25px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-basic-info {
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-other-info {
|
|
|
|
|
|
height: 72px;
|
|
|
|
|
|
}
|
|
|
|
|
|
body, button, input, select, textarea {
|
|
|
|
|
|
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
|
|
|
|
|
|
}
|
|
|
|
|
|
.price-line p {
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
color: #3c3c3c;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-info {
|
|
|
|
|
|
width: 192px;
|
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-price {
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.price-content {
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.price-line p {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
.td-amount {
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-content .item-amount {
|
|
|
|
|
|
height: 25px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
width: 77px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-content .td-sum {
|
|
|
|
|
|
color: #f40;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
width: 105px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.number, .price {
|
|
|
|
|
|
font-family: Verdana,Tahoma,arial;
|
|
|
|
|
|
}
|
|
|
|
|
|
.th-op, .td-op {
|
|
|
|
|
|
width: 84px;
|
|
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
li {
|
|
|
|
|
|
display: list-item;
|
|
|
|
|
|
}
|
|
|
|
|
|
.item-content .td-op a {
|
|
|
|
|
|
padding-bottom: 3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar, #footer, .wp {
|
|
|
|
|
|
width: 990px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar-holder {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 990px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
.group-wrapper {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 49px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
z-index: 10001;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar-wrapper {
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .select-all {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.select-all {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.select-all .cart-checkbox {
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
margin-top: -2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cart-checkbox {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 15px;
|
|
|
|
|
|
height: 15px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cart-checkbox input {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
z-index: 0;
|
|
|
|
|
|
left: -20px;
|
|
|
|
|
|
top: -20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cart-checkbox label {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
width: 15px;
|
|
|
|
|
|
height: 15px;
|
|
|
|
|
|
background-position: 0 0;
|
|
|
|
|
|
line-height: 200em;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
background-image: -webkit-image-set(url(../img/unchecked.png) 2x);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .operations {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .operations a {
|
|
|
|
|
|
margin-left: 25px;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .operations {
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar-right {
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
z-index: 4;
|
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar-right, .float-bar-wrapper {
|
|
|
|
|
|
background: #e5e5e5;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .amount-sum em {
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .amount-sum {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .amount-sum, .float-bar .price-sum {
|
|
|
|
|
|
height: 48px;
|
|
|
|
|
|
color: #3c3c3c;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .amount-sum, .float-bar .price-sum, .float-bar .btn-area {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .amount-sum .arrow-box {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .txt {
|
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .price-sum .price {
|
|
|
|
|
|
color: #f40;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
|
font-family: Arial;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .amount-sum em, .float-bar .price-sum .price em {
|
|
|
|
|
|
color: #f40;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-family: tohoma,arial;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .combine-not-supported:link, .float-bar .combine-not-supported:hover, .float-bar .submit-btn-disabled:link, .float-bar .submit-btn-disabled:hover {
|
|
|
|
|
|
background: #B0B0B0;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
border-left: 1px solid #e7e7e7;
|
|
|
|
|
|
width: 119px;
|
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .price-sum strong, .float-bar .amount-sum em, .float-bar .price-sum .txt, .float-bar .amount-sum .txt {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .submit-btn {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-family: 'Lantinghei SC','Microsoft Yahei';
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.pipe, .check-cod {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .pipe {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
margin: 0 10px 0 18px;
|
|
|
|
|
|
width: 1px;
|
|
|
|
|
|
height: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.float-bar .price-sum .price em {
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
padding: 0 3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
address, cite, dfn, em, var {
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
|
|
|
|
|
|
<script src="../js/jquery.min.js"></script>
|
|
|
|
|
|
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
|
|
|
|
|
|
<script src="../js/bootstrap.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="top-nav">
|
|
|
|
|
|
<div class="container clear-float">
|
|
|
|
|
|
<div class="fl">
|
|
|
|
|
|
<a class="item" href="#">首页</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="fr">
|
|
|
|
|
|
<a class="item" href="#">购物车</a>
|
|
|
|
|
|
<a class="item" href="#">我的订单</a>
|
|
|
|
|
|
<a class="item" href="#">收藏夹</a>
|
|
|
|
|
|
<a class="item" href="#">登录</a>
|
|
|
|
|
|
<a class="item" href="#">注册</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="cart-header header clearfix">
|
|
|
|
|
|
<img class="cart-logo" src="../img/logo.png" alt="">
|
|
|
|
|
|
<span class="cart">购物车</span>
|
|
|
|
|
|
<div class="header-search search-bar">
|
|
|
|
|
|
<input type="text">
|
|
|
|
|
|
<button>搜索</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<ul class="clearfix item-content">
|
|
|
|
|
|
<li class="td td-chk">
|
|
|
|
|
|
<div class="td-inner">
|
|
|
|
|
|
<div style="height: 82px;position: relative;">
|
|
|
|
|
|
<div class="cart-checkbox">
|
|
|
|
|
|
<input type="checkbox" class="chk">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="td td-item">
|
|
|
|
|
|
<div class="td-inner">
|
|
|
|
|
|
<div class="item-pic">
|
|
|
|
|
|
<a href="#">
|
|
|
|
|
|
<img src="../img/logo.png" alt="物品图片">
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-info">
|
|
|
|
|
|
<div class="item-basic-info">
|
|
|
|
|
|
<div><p>Apple/苹果 iPhone 11 Pro</p></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-other-info">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="td td-info">
|
|
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="td td-price">
|
|
|
|
|
|
<div class="td-inner">
|
|
|
|
|
|
<div class="item-price">
|
|
|
|
|
|
<div class="price-content">
|
|
|
|
|
|
<div class="price-line">
|
|
|
|
|
|
<p>￥8699.00</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="td td-amount">
|
|
|
|
|
|
<div class="td-inner">
|
|
|
|
|
|
<div class="amount-wrapper">
|
|
|
|
|
|
<div class="item-amount">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="td td-sum">
|
|
|
|
|
|
<div class="td-inner">
|
|
|
|
|
|
<p class="number">￥17398.00</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="td td-op">
|
|
|
|
|
|
<div class="td-inner">
|
|
|
|
|
|
<a href="#">移入收藏夹</a>
|
|
|
|
|
|
<a href="#">删除</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="float-bar-holder" id="J_FloatBarHolder">
|
|
|
|
|
|
<div id="J_FloatBar" class="float-bar clearfix default" style="position: static;">
|
|
|
|
|
|
<div class="float-bar-wrapper">
|
|
|
|
|
|
<div id="J_SelectAll2" class="select-all">
|
|
|
|
|
|
<div class="cart-checkbox">
|
|
|
|
|
|
<input type="checkbox" class="J_CheckBoxShop" id="J_SelectAllCbx2" name="select-all" value="true">
|
|
|
|
|
|
<label for="J_SelectAllCbx2">勾选购物车内所有商品</label>
|
|
|
|
|
|
</div> 全选
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="operations">
|
|
|
|
|
|
<a href="#" hidefocus="true" class="J_DeleteSelected">删除</a>
|
|
|
|
|
|
<a href="#" hidefocus="true" class="J_ClearInvalid hidden">清除失效宝贝</a>
|
|
|
|
|
|
<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
|
|
|
|
|
|
<a href="#" hidefocus="true" class="J_BatchShare">分享</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="float-bar-right">
|
|
|
|
|
|
<div id="J_ShowSelectedItems" class="amount-sum">
|
|
|
|
|
|
<span class="txt">已选商品</span><em id="J_SelectedItemsCount">0</em>
|
|
|
|
|
|
<span class="txt">件</span><div class="arrow-box">
|
|
|
|
|
|
<span class="selected-items-arrow"></span>
|
|
|
|
|
|
<span class="arrow"></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="J_CheckCOD" class="check-cod" style="display: none;">
|
|
|
|
|
|
<span class="icon-cod"></span>
|
|
|
|
|
|
<span class="s-checkbox J_CheckCOD"></span>货到付款
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pipe"></div>
|
|
|
|
|
|
<div class="price-sum">
|
|
|
|
|
|
<span class="txt">合计（不含运费）：</span>
|
|
|
|
|
|
<strong class="price"><em id="J_Total">
|
|
|
|
|
|
<span class="total-symbol"> </span>0.00</em>
|
|
|
|
|
|
</strong></div><div class="btn-area">
|
|
|
|
|
|
<a href="javascript:void(0)" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
|
|
|
|
|
|
<span>结 算</span><b></b>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script></script>
|
|
|
|
|
|
</html>
|
