feat: 购物车物品显示

master
Haoyu Chen 5 years ago
parent 5bc637d317
commit 1e26b4b2ea

@ -1,10 +1,10 @@
*{ *{
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
/*background: rgba(0,0,0,.1);*/ /* background: rgba(0,0,0,.1); */
-webkit-box-sizing: background 200ms ; -webkit-box-sizing: background 200ms ;
-o-transition: background 200ms ; -o-transition: background 200ms ;
transition: background 200ms;/*改变页面中颜色变换时间*/ transition: background 200ms;/*
} }
.container{ .container{
display: block; display: block;

@ -9,15 +9,18 @@
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/p-i.css" rel="stylesheet"> <link href="../css/p-i.css" rel="stylesheet">
<link href="../css/reset.css" rel="stylesheet">
</head> </head>
<style> <style>
.cart-header { .cart-header, .item-content {
padding: 20px 0 20px;
/* position: relative; */ /* position: relative; */
width: 990px; width: 990px;
margin: 0 auto; margin: 0 auto;
} }
.cart-header {
padding: 20px 0 20px;
}
.cart-logo { .cart-logo {
display: block; display: block;
float: left; float: left;
@ -38,12 +41,100 @@
position: relative; position: relative;
top: 10px; top: 10px;
margin-right: 20px; margin-right: 20px;
height: 52px; height: 47px;
width: 45%; width: 45%;
} }
.form-control { .form-control {
width:300px; 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;
}
</style> </style>
<body> <body>
@ -75,4 +166,66 @@
</div> </div>
</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>
</html> </html>
Loading…
Cancel
Save