Skip to content

semour / semour_web

Go to a project
Commit 867a68cb by 肖康
Options

购物车页面

parent 087a1313
Inline Side-by-side
Showing with 302 additions and 2 deletions
public/assets/css/car/car.less
.carbox{
.cons{
background: #fff;
padding:19px;
.titles{
border-bottom: 3px solid #164D9A;
border-radius: 2px;
font-size: 16px;
color:#222;
font-weight: bold;
padding-bottom: 7px;
padding-top: 10px;
width:134px;
text-align: center;
}
.section{
.left{
width:842px;
.list-table{
width: 842px;
border-radius: 0px 0px 8px 8px;
margin-top: 20px;
.w46{width:46px;}
.w98{width:98px;}
.w183{width:183px;}
.w119{width:119px;}
.w93{width:93px;}
.w110{width:110px;}
.w92{width:92px}
.check-group {
color : #555;
font-size: 16px;
cursor : pointer;
.check {
width : 14px;
height : 14px;
border : 1px solid #164D9A;
border-radius: 4px;
text-align : center;
line-height : 14px;
i {
color : #164D9A;
font-size: 12px;
display : none;
}
}
span{color:#555;font-size: 14px;margin-left: 5px;}
&.act {
.check {
i {
display: inline;
}
}
}
}
.thead{
height: 38px;
background: #DFEAFA;
line-height: 38px;
border-radius: 8px 8px 0px 0px;
padding:0 15px;
.th{
font-size: 14px;
color:#333;
font-weight: bold;
box-sizing: border-box;
padding-right: 5px;
}
}
.tbody{
font-size: 14px;
color:#555;
background: #F7FAFF;
input{
width: 64px;
height: 26px;
background: #FAFAFA;
border: 1px solid #DFEAFA;
border-radius: 4px;
line-height: 26px;
color:#333;
}
.tr{
line-height: 20px;
border-bottom: 1px solid #DFEAFA;
padding:20px 15px;
box-sizing: border-box;
.td{
word-break: break-all;
box-sizing: border-box;
padding-right: 5px;
}
&:last-child{border:0px;}
&.sxbox{
background: rgba(51, 51, 51, 0.2);
input{
background: none;
border: 1px solid #BCBCBC;
}
}
}
.pdf{color:#F68332;font-size: 20px;}
.sx{
width: 100px;
height: 20px;
border: 1px solid #EE1919;
border-radius: 14px;
color:#EE1919;
font-size: 14px;
text-align: center;
line-height: 20px;
position: relative;
top:1px;
}
}
.tfoot{
width: 842px;
height: 38px;
line-height: 38px;
background: #DFEAFA;
padding:0 15px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
border-radius: 8px;
font-size: 13px;
color:#555;
margin-top: 13px;
.fw{
font-weight: bold;
}
.selectcount{margin-left: 80px;margin-right: 60px;}
.del{cursor: pointer;}
}
}
}
.right{
width:298px;
padding-top: 20px;
.top{
width: 298px;
height: 180px;
background: #DFEAFA;
border-radius: 8px;
padding:0 4px;
.itemsp{
height:45px;
line-height: 45px;
color:#333;
font-size: 14px;
span{font-weight: bold;}
border-bottom: 1px solid #fff;
padding:0 17px;
}
}
.create{
width: 298px;
height: 32px;
line-height: 32px;
background: #164D9A;
text-align: center;
border-radius: 8px;
font-size: 14px;
color:#fff;
cursor: pointer;
margin-top: 20px;
}
.lgtips{
font-size: 14px;
color:#555;
a{color:#164D9A;}
margin-top: 12px;
}
.bannerc{
img{width:298px;height:321px;margin-top:24px;}
}
}
}
}
}
\ No newline at end of file
public/assets/css/car/car.min.css
.carbox .cons{background:#fff;padding:19px}.carbox .cons .titles{border-bottom:3px solid #164D9A;border-radius:2px;font-size:16px;color:#222;font-weight:bold;padding-bottom:7px;padding-top:10px;width:134px;text-align:center}.carbox .cons .section .left{width:842px}.carbox .cons .section .left .list-table{width:842px;border-radius:0px 0px 8px 8px;margin-top:20px}.carbox .cons .section .left .list-table .w46{width:46px}.carbox .cons .section .left .list-table .w98{width:98px}.carbox .cons .section .left .list-table .w183{width:183px}.carbox .cons .section .left .list-table .w119{width:119px}.carbox .cons .section .left .list-table .w93{width:93px}.carbox .cons .section .left .list-table .w110{width:110px}.carbox .cons .section .left .list-table .w92{width:92px}.carbox .cons .section .left .list-table .check-group{color:#555;font-size:16px;cursor:pointer}.carbox .cons .section .left .list-table .check-group .check{width:14px;height:14px;border:1px solid #164D9A;border-radius:4px;text-align:center;line-height:14px}.carbox .cons .section .left .list-table .check-group .check i{color:#164D9A;font-size:12px;display:none}.carbox .cons .section .left .list-table .check-group span{color:#555;font-size:14px;margin-left:5px}.carbox .cons .section .left .list-table .check-group.act .check i{display:inline}.carbox .cons .section .left .list-table .thead{height:38px;background:#DFEAFA;line-height:38px;border-radius:8px 8px 0px 0px;padding:0 15px}.carbox .cons .section .left .list-table .thead .th{font-size:14px;color:#333;font-weight:bold;box-sizing:border-box;padding-right:5px}.carbox .cons .section .left .list-table .tbody{font-size:14px;color:#555;background:#F7FAFF}.carbox .cons .section .left .list-table .tbody input{width:64px;height:26px;background:#FAFAFA;border:1px solid #DFEAFA;border-radius:4px;line-height:26px;color:#333}.carbox .cons .section .left .list-table .tbody .tr{line-height:20px;border-bottom:1px solid #DFEAFA;padding:20px 15px;box-sizing:border-box}.carbox .cons .section .left .list-table .tbody .tr .td{word-break:break-all;box-sizing:border-box;padding-right:5px}.carbox .cons .section .left .list-table .tbody .tr:last-child{border:0px}.carbox .cons .section .left .list-table .tbody .tr.sxbox{background:rgba(51,51,51,0.2)}.carbox .cons .section .left .list-table .tbody .tr.sxbox input{background:none;border:1px solid #BCBCBC}.carbox .cons .section .left .list-table .tbody .pdf{color:#F68332;font-size:20px}.carbox .cons .section .left .list-table .tbody .sx{width:100px;height:20px;border:1px solid #EE1919;border-radius:14px;color:#EE1919;font-size:14px;text-align:center;line-height:20px;position:relative;top:1px}.carbox .cons .section .left .list-table .tfoot{width:842px;height:38px;line-height:38px;background:#DFEAFA;padding:0 15px;box-shadow:0 0 10px 0 rgba(0,0,0,0.15);border-radius:8px;font-size:13px;color:#555;margin-top:13px}.carbox .cons .section .left .list-table .tfoot .fw{font-weight:bold}.carbox .cons .section .left .list-table .tfoot .selectcount{margin-left:80px;margin-right:60px}.carbox .cons .section .left .list-table .tfoot .del{cursor:pointer}.carbox .cons .section .right{width:298px;padding-top:20px}.carbox .cons .section .right .top{width:298px;height:180px;background:#DFEAFA;border-radius:8px;padding:0 4px}.carbox .cons .section .right .top .itemsp{height:45px;line-height:45px;color:#333;font-size:14px;border-bottom:1px solid #fff;padding:0 17px}.carbox .cons .section .right .top .itemsp span{font-weight:bold}.carbox .cons .section .right .create{width:298px;height:32px;line-height:32px;background:#164D9A;text-align:center;border-radius:8px;font-size:14px;color:#fff;cursor:pointer;margin-top:20px}.carbox .cons .section .right .lgtips{font-size:14px;color:#555;margin-top:12px}.carbox .cons .section .right .lgtips a{color:#164D9A}.carbox .cons .section .right .bannerc img{width:298px;height:321px;margin-top:24px}
\ No newline at end of file
resources/views/car/car.blade.php
......@@ -14,7 +14,123 @@
<span>Car</span>
</div>
<div class="cons">
car
<div class="titles">Shopping Cart</div>
<div class="section row bothSide">
<div class="left">
<div class="list-table">
<div class="thead row boxsiz">
<div class="th row verCenter w46">
<div class="check-group row verCenter act">
<div class="check">
<i class="icon iconfont icon-gou"></i>
</div>
</div>
</div>
<div class="th w98">Part NO.</div>
<div class="th w183">Details</div>
<div class="th w119">Delivery date</div>
<div class="th w93">Amount</div>
<div class="th w110">Availability</div>
<div class="th w92">Unit Price</div>
<div class="th">Ext. Price</div>
</div>
<div class="tbody boxsiz">
<div class="tr row">
<div class="td w46">
<div class="check-group row verCenter act">
<div class="check">
<i class="icon iconfont icon-gou"></i>
</div>
<span>1</span>
</div>
</div>
<div class="td w98">STTH1L06A</div>
<div class="td w183">Manufacturers：Yageo</div>
<div class="td w119">2-5 workdays</div>
<div class="td w93">
<input type="text" class="valuep" value="100">
</div>
<div class="td w110">10000</div>
<div class="td w92">$0.0011</div>
<div class="td">$0.11</div>
</div>
<div class="tr row sxbox">
<div class="td w46">
<div class="check-group row verCenter act">
<div class="check">
<i class="icon iconfont icon-gou"></i>
</div>
<span>2</span>
</div>
</div>
<div class="td w98">
STTH1L06A
<div class="pdf">
<i class="icon iconfont icon-PDF"></i>
</div>
</div>
<div class="td w183">
Manufacturers：Yageo
<div class="sx">Invalid Model</div>
</div>
<div class="td w119">2-5 workdays</div>
<div class="td w93">
<input type="text" class="valuep" value="100">
</div>
<div class="td w110">10000</div>
<div class="td w92">$0.0011</div>
<div class="td">$0.11</div>
</div>
</div>
<div class="tfoot boxsiz">
<div class="tr row">
<div class="td">
<div class="check-group row verCenter act">
<div class="check">
<i class="icon iconfont icon-gou"></i>
</div>
<span class="fw selectall">Select All</span>
</div>
</div>
<div class="td selectcount">
<b class="fw">2 </b>Items Selected
</div>
<div class="td">
<div class="del">Delete</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="top boxsiz">
<div class="itemsp row bothSide">
<span>Merchandise Total</span>
<span>$509.71</span>
</div>
<div class="itemsp row bothSide">
<span>Shipping</span>
<span>TBC</span>
</div>
<div class="itemsp row bothSide">
<span>Merchant Fee</span>
<span>TBC</span>
</div>
<div class="itemsp row bothSide">
<span>Subtotal</span>
<span>$559.71</span>
</div>
</div>
<div class="create">Place Order</div>
<div class="lgtips">
Already Registered? <a href="/login">Log In</a>
</div>
<a href="javascript:void(0)" class="bannerc">
<img src="{{$public}}/assets/images/car/carbanner.png" alt="">
</a>
</div>
</div>
</div>
</div>
@include('common.mallFooter')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment