fe / YOHOBUYPC · Commits

Go to a project

Authored by uedxwg
Commit 519a93de7a5a70122eee33b20230cc3731c47c93 1 parent d71228a2

结算页面UI重构

Inline Side-by-side
Showing 2 changed files with 298 additions and 5 deletions
... ... @@ -13,7 +13,141 @@
font-size: 26rem / $pxConvertRem;
font-weight: bold;
}
/*xwg 2016-3-19 10:53*/
.address{
display: block;
position: relative;
margin-top: 0;
border-top: none;
.info{
width: 90%;
height: auto;
overflow: hidden;
padding-left: 10%;
padding-bottom: 12rem / $pxConvertRem;
position: relative;
span{
display: inline-block;
}
i{
position: absolute;
left: 0;
top: 20%;
font-size: 48rem / $pxConvertRem;
}
}
.info-name{
width: 48%;
font-size: 32rem / $pxConvertRem;
}
.info-phone{
width: 48%;
font-size: 24rem / $pxConvertRem;
text-align: right;
}
.info-address{
width: 100%;
font-size: 24rem / $pxConvertRem;
line-height: 38rem / $pxConvertRem;
}
> a{
position: absolute;
right: 32rem / $pxConvertRem;
bottom:8rem / $pxConvertRem;
color: #f00;
font-size: 24rem / $pxConvertRem;
span{
font-size: 24rem / $pxConvertRem;
}
}
}
.dispatch{
padding:0%;
margin:0;
.sub-block{
color: #444;
&:last-child h3{
border-bottom:none;
}
h3{
width: 95%;
height: 80rem / $pxConvertRem;
overflow: hidden;
line-height: 80rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
margin-left: 5%;
border-bottom:1px solid #e0e0e0;
p{
display: inline-block;
}
i{
font-size: 36rem / $pxConvertRem;
margin-left: 8rem / $pxConvertRem;
}
span{
display: inline-block;
width: 65%;
text-align: right;
font-size: 28rem / $pxConvertRem;
}
}
ul{
width: 90%;
height:auto;
overflow: hidden;
line-height: 80rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
background: #e0e0e0;
padding-left:10%;
display: none;
padding-bottom: 8rem / $pxConvertRem;
.right{
float: right;
margin-right: 40rem / $pxConvertRem;
}
li{
border-bottom:1px solid #fff;
&:last-child{
border-bottom:none;
}
}
}
}
}
.goods-num{
width: 100%;
height: 52rem / $pxConvertRem;
color: #b0b0b0;
background:#fff;
padding:20rem / $pxConvertRem 0;
text-align: right;
font-size: 28rem / $pxConvertRem;
line-height: 52rem / $pxConvertRem;
span{
padding-right:20rem / $pxConvertRem;
color: #f00;
}
}
.price-cal{
margin-bottom: 0;
font-size: 28rem / $pxConvertRem;
position: relative;
span{
position: absolute;
right: 28rem / $pxConvertRem;
text-align: right;
}
li{
font-size: 28rem / $pxConvertRem;
p{
display: inline-block;
}
span{
display: inline-block;
}
}
}
.address-wrap {
display: block;
position: relative;
... ...
{{> layout/header}}
<!-- {{> layout/header}}
<div class="order-ensure-page yoho-page">
{{# orderEnsure}}
<a class="address-wrap block" data-id="{{addressId}}" data-support="{{isSupport}}" href="/cart/index/selectAddress">
... ... @@ -46,10 +46,6 @@
<a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
<span class="title">优惠券</span>
{{# coupon}}
<!--<span class="coupon-count">
{{count}}张可用
</span>-->
{{#if couponName}}
<span class="used coupon-use" data-name="{{couponName}}">
{{couponName}}
... ... @@ -160,3 +156,166 @@
</ul>
</script>
{{> layout/footer}}
-->
{{> layout/header}}
<div class="order-ensure-page yoho-page">
{{# orderEnsure}}
<div class="address block address-wrap" data-id ="{{addressId}}">
<div class="info">
<span class="info-name">{{name}}</span>
<span class="info-phone">{{phoneNum}}</span>
<span class="info-address">{{addressInfo}}</span>
<i class="iconfont">&#xe637;</i>
</div>
<a href="/cart/index/selectAddress">其他地址<span class="iconfont">&#xe614;</span></a>
</div>
<section class="dispatch block">
<div class="sub-block payment-type">
<h3>
<p>支付方式</p>
<span>在线支付 (推荐)</span>
<i class="iconfont">&#xe616;</i>
</h3>
<ul>
<li>
<span>在线支付 (推荐)</span>
<i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="1"></i>
</li>
<li>
<span>货到付款</span>
<i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="2"></i>
</li>
</ul>
</div>
<div class="sub-block delivery-id">
<h3>
<p>配送方式</p>
<span>普通快递 ¥0</span>
<i class="iconfont">&#xe616;</i>
</h3>
<ul>
{{#each dispatchMode}}
<li {{#if isSelected}}class="chosed"{{/if}}>
<span>{{name}}</span>
<i class="right iconfont {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></i>
</li>
{{/each}}
</ul>
</div>
<div class="sub-block delivery-time">
<h3>
<p>送货时间</p>
<span>只在工作日送</span>
<i class="iconfont">&#xe616;</i>
</h3>
<ul>
{{#each dispatchTime}}
<li {{#if isSelected}}class="chosed"{{/if}} >
<span>{{name}}</span>
<i class="right iconfont radio {{#if isSelected}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></i>
</li>
{{/each}}
</ul>
</div>
</section>
<section class="block" style="margin-bottom: 0;">
<div class="goods">
{{#each goods}}
{{> me/order/good}}
{{/each}}
</div>
</section>
<div class="goods-num">共{{num}}件商品 合计<span>¥{{price}}</span></div>
<section class="block">
<ul class="sale-invoice">
{{#if isOrdinaryCart}}
<li class="coupon">
<a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
<span class="title">优惠券</span>
{{# coupon}}
{{#if couponName}}
<span class="used coupon-use" data-name="{{couponName}}">
{{couponName}}
<i class="iconfont">&#xe614;</i>
</span>
{{^}}
<span class="not-used coupon-use">
{{#if isLimit}}该商品不可使用优惠券{{else}}未使用{{/if}}
<i class="iconfont">&#xe614;</i>
</span>
{{/if}}
{{/coupon}}
</a>
</li>
{{/if}}
<li class="coin" data-yoho-coin="{{yohoCoin}}">
<span class="title">YOHO币</span>
{{#if yohoCoin}}
<span class="desc used {{#unless useYohoCoin}}hide{{/unless}}">已抵¥{{useYohoCoin}}</span>
<span class="desc can-use {{#if useYohoCoin}}hide{{/if}}">可抵¥{{yohoCoin}}</span>
{{#if useYohoCoin}}
<span class="coin-check">
<em>- ¥ {{useYohoCoin}}</em>
<i class="iconfont checkbox icon-cb-radio"></i>
</span>
{{else}}
<span class="coin-check">
<em style="display: none;">- ¥ {{useYohoCoin}}</em>
<i class="iconfont checkbox icon-radio"></i>
</span>
{{/if}}
{{^}}
<span class="not-used coin-check">
无YOHO币可用
</span>
{{/if}}
</li>
{{#if invoice}}
<li class="invoice {{#if needInvoice}}focus{{/if}}">
<span class="title">发票</span>
<span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>
<form id="invoice">
<input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
<label>
发票类型
<select class="invoice-type" name="invoice-type">
{{# invoice}}
<option value="{{id}}" {{#if isSelected}}selected{{/if}}>{{name}}</option>
{{/ invoice}}
</select>
</label>
</form>
</li>
{{/if}}
</ul>
<form id="msg" action="" method="post">
<input type="text" name="msg" value="{{msg}}" maxlength="40" placeholder="留言">
</form>
</section>
<section class="price-cal block">
<ul>
{{#cartPayData}}
<li>
<p>{{promotion}}</p>
<span>{{promotion_amount}}</span>
</li>
{{/cartPayData}}
</ul>
<div class="price-cost">
实付金额：
<span>¥{{price}}</span>
</div>
</section>
<div class="bill">
您需要支付<span>¥{{price}}</span>
<a href="#">结算</a>
</div>
{{/ orderEnsure}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...