fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit 98c481b24aa422329b8cfdfa9bb4dedd105e82c8 1 parent 14fe1928

yoho coin logic

Inline Side-by-side
Showing 7 changed files with 668 additions and 568 deletions
<div class="shopping-order-page blk-page">
{{# content}}
<div class="center-content">
<div class="address-info order-block">
<p class="title">
收货信息
<span id="new-address" class="right new-address">
新增收货地址
<i class="iconfont">&#xe61f;</i>
</span>
</p>
<div class="content">
<ul class="clearfix shrink">
{{#each address}}
<li class="address{{#if focus}} focus{{/if}}" data-id="{{id}}">
<div class="address-header"></div>
<div class="address-content">
<p class="default-or-not{{#unless default}} not-default{{/unless}}">
{{#if default}}
<span class="default-tag">默认地址</span>
{{^}}
<span class="set-default">设为默认</span>
{{/if}}
</p>
<p class="name-and-phone bold">
{{name}}
<span class="phone">{{phone}}</span>
</p>
<p class="address-area bold">{{area}}</p>
<p class="address-detail">{{detail}}</p>
<p class="address-opration">
<span class="modify">修改</span>
<span class="delete">删除</span>
</p>
</div>
{{#if focus}}
<span class="address-chosed iconfont">&#xe63b;</span>
{{/if}}
</li>
{{/each}}
</ul>
<p class="address-all">
显示全部地址
<span class="iconfont">&#xe616;</span>
</p>
</div>
</div>
<div class="payment-type order-block">
<p class="title">支付方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">在线支付</span>
<span class="tip-text">支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
</li>
</ul>
</div>
<div class="dispatch-type order-block">
<p class="title">配送方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">普通快递：运费￥10.00</span>
</li>
</ul>
</div>
<div class="order-info order-block">
<div class="order-inner">
<p class="title">
订单信息
<a class="right go-cart-link" href="{{goCartLink}}">
返回购物车修改
<span class="iconfont">&#xe61e;</span>
</a>
</p>
<div class="content">
<p class="order-table-head clearfix">
<span class="info">商品信息</span>
<span class="color-size">颜色尺码</span>
<span class="price">单价</span>
<span class="number">数量</span>
</p>
<ul class="order-table-body">
{{#each goods}}
<li class="order-goods clearfix">
<a class="goods-img inline-block" href="{{link}}">
<img class="lazy" src="{{img}}">
</a>
<p class="brand-and-name inline-block">
<a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
<a class="name" href="{{link}}">{{name}}</a>
</p>
<p class="color-size">
<span class="color">颜色：{{color}}</span>
<span class="size">尺码：{{size}}</span>
</p>
<p class="price">
￥{{price}}
</p>
<p class="number">
<span class="iconfont">&#xe61d;</span>
{{number}}
</p>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="invoice-info order-block">
<p class="title">发票信息</p>
<div class="content">
<p>
<span class="iconfont"></span>
发票开具
</p>
</div>
</div>
<div class="coin-and-remark">
<div class="coin">
<p class="title">
<span class="iconfont coin-ctrl">&#xe630;</span>
<span class="coin-ctrl bold">使用有货币</span>
</p>
<div class="content">
<div class="using-coin hide">
本次使用有货币
<input class="input coin-input" type="text">
个
您当前共有有货币<em class="blue">{{coinCount}}</em>个
<span id="coin-tip" class="coin-tip block blue">抵扣￥2.22</span>
<span id="coin-sure" class="btn">确定</span>
</div>
<div class="used-coin">
本次使用有货币<em id="coin-used" class="blue">321</em>，本次抵扣<span class="blue">￥<em id="coin-deduction">3.21</em></span>
<span class="btn white modify">修改</span>
<span class="btn white cancel">取消使用</span>
</div>
</div>
</div>
<div class="remark">
<p class="title">
<span class="iconfont remark-ctrl">&#xe630;</span>
<span class="remark-ctrl bold">添加备注信息</span>
</p>
<div class="content">
<textarea id="remark-content" class="remark-content" placeholder="声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效"></textarea>
<p class="print-price">
是否打印价格：
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</p>
</div>
</div>
</div>
<div class="balance clearfix">
<div class="balance-info left">
<p>
收货信息：{{receiver}}
<span class="right">{{count}}件商品</span>
</p>
<p>
支付方式：<em id="balance-pay-type">在线支付</em>
</p>
</div>
<ul class="balance-list right">
<li>
<span class="balance-title">商品金额：</span>
<span class="balance-cost">￥{{sumCost}}</span>
</li>
<li>
<span class="balance-title">有货币：</span>
<span class="balance-cost">-￥<em id="balance-coin">{{balanceCoin}}</em></span>
</li>
<li>
<span class="balance-title">运费：</span>
<span class="balance-cost">￥<em id="balance-freight">{{freight}}</em></span>
</li>
<li class="need-pay">
<span class="balance-title">应付金额（不含运费）：</span>
<span class="balance-cost">￥{{needPay}}</span>
</li>
<li>
<span class="btn submit-order">提交订单</span>
</li>
</ul>
</div>
</div>
{{/ content}}
<div class="shopping-order-page blk-page">
{{# content}}
<div class="center-content">
<div class="address-info order-block">
<p class="title">
收货信息
<span id="new-address" class="right new-address">
新增收货地址
<i class="iconfont">&#xe61f;</i>
</span>
</p>
<div class="content">
<ul class="clearfix shrink">
{{#each address}}
<li class="address{{#if focus}} focus{{/if}}" data-id="{{id}}">
<div class="address-header"></div>
<div class="address-content">
<p class="default-or-not{{#unless default}} not-default{{/unless}}">
{{#if default}}
<span class="default-tag">默认地址</span>
{{^}}
<span class="set-default">设为默认</span>
{{/if}}
</p>
<p class="name-and-phone bold">
{{name}}
<span class="phone">{{phone}}</span>
</p>
<p class="address-area bold">{{area}}</p>
<p class="address-detail">{{detail}}</p>
<p class="address-opration">
<span class="modify">修改</span>
<span class="delete">删除</span>
</p>
</div>
{{#if focus}}
<span class="address-chosed iconfont">&#xe63b;</span>
{{/if}}
</li>
{{/each}}
</ul>
<p class="address-all">
显示全部地址
<span class="iconfont">&#xe616;</span>
</p>
</div>
</div>
<div class="payment-type order-block">
<p class="title">支付方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">在线支付</span>
<span class="tip-text">支持主流银行卡、微信、支付宝、银联等平台付款，方便快捷</span>
</li>
</ul>
</div>
<div class="dispatch-type order-block">
<p class="title">配送方式</p>
<ul class="content">
<li class="chose-row clearfix focus">
<span class="chose-block">普通快递：运费￥10.00</span>
</li>
</ul>
</div>
<div class="order-info order-block">
<div class="order-inner">
<p class="title">
订单信息
<a class="right go-cart-link" href="{{goCartLink}}">
返回购物车修改
<span class="iconfont">&#xe61e;</span>
</a>
</p>
<div class="content">
<p class="order-table-head clearfix">
<span class="info">商品信息</span>
<span class="color-size">颜色尺码</span>
<span class="price">单价</span>
<span class="number">数量</span>
</p>
<ul class="order-table-body">
{{#each goods}}
<li class="order-goods clearfix">
<a class="goods-img inline-block" href="{{link}}">
<img class="lazy" data-original="{{img}}">
</a>
<p class="brand-and-name inline-block">
<a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
<a class="name" href="{{link}}">{{name}}</a>
</p>
<p class="color-size">
<span class="color">颜色：{{color}}</span>
<span class="size">尺码：{{size}}</span>
</p>
<p class="price">
￥{{price}}
</p>
<p class="number">
<span class="iconfont">&#xe61d;</span>
{{number}}
</p>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="invoice-info order-block">
<p class="title">发票信息</p>
<div class="content">
<div class="invoice-radio">
{{> icon/radio}}
<label>发票开具</label>
</p>
</div>
</div>
<div class="coin-and-remark">
<div class="coin">
<p class="title">
<span class="iconfont coin-ctrl">&#xe639;</span>
<span class="coin-ctrl bold">使用有货币</span>
</p>
<div class="content hide">
<div class="using-coin">
本次使用有货币
<input id="input-coin" class="input coin-input" type="text" data-max="{{coinCount}}">
个
您当前共有有货币<em class="blue">{{coinCount}}</em>个
<span id="coin-tip" class="coin-tip block blue vhide">抵扣￥2.22</span>
<span id="coin-sure" class="btn disable">确定</span>
</div>
<div class="used-coin hide">
本次使用有货币<em id="coin-used" class="blue">321</em>，本次抵扣<span class="blue">￥<em id="coin-deduction">3.21</em></span>
<span class="btn white modify">修改</span>
<span class="btn white cancel">取消使用</span>
</div>
</div>
</div>
<div class="remark">
<p class="title">
<span class="iconfont remark-ctrl">&#xe639;</span>
<span class="remark-ctrl bold">添加备注信息</span>
</p>
<div class="content hide">
<textarea id="remark-content" class="remark-content" placeholder="声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效"></textarea>
<p class="print-price">
是否打印价格：
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</p>
</div>
</div>
</div>
<div class="balance clearfix">
<div class="balance-info left">
<p>
收货信息：{{receiver}}
<span class="right">{{count}}件商品</span>
</p>
<p>
支付方式：<em id="balance-pay-type">在线支付</em>
</p>
</div>
<ul class="balance-list right">
<li>
<span class="balance-title">商品金额：</span>
<span class="balance-cost">￥{{sumCost}}</span>
</li>
<li>
<span class="balance-title">有货币：</span>
<span class="balance-cost">-￥<em id="balance-coin">{{balanceCoin}}</em></span>
</li>
<li>
<span class="balance-title">运费：</span>
<span class="balance-cost">￥<em id="balance-freight">{{freight}}</em></span>
</li>
<li class="need-pay">
<span class="balance-title">应付金额（不含运费）：</span>
<span id="balance-cost" class="balance-cost" data-cost="2">￥{{needPay}}</span>
</li>
<li>
<span class="btn submit-order">提交订单</span>
</li>
</ul>
</div>
</div>
{{/ content}}
</div>
\ No newline at end of file
... ...
No preview for this file type
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Fri Jul 8 15:34:51 2016
Created by FontForge 20120731 at Fri Jul 8 16:11:08 2016
By admin
</metadata>
<defs>
... ... @@ -167,8 +167,7 @@ q18 2 30 7q5 0 16.5 1.5t31 -3.5t39 -12.5t40.5 -25t35 -41.5q25 -57 10 -109q-6 -17
<glyph glyph-name="uniE62F" unicode="&#xe62f;"
d="M756 -133h-488q-21 0 -36.5 13t-15.5 32v780q0 19 15.5 32t36.5 13h488q21 0 36.5 -13t15.5 -32v-780q0 -19 -15.5 -32t-36.5 -13zM512 -88q14 0 24.5 9t10.5 21t-10.5 21t-24.5 9t-24.5 -9t-10.5 -21t10.5 -21t24.5 -9zM756 647h-488v-630h488v630z" />
<glyph glyph-name="uniE630" unicode="&#xe630;"
d="M513 857q98 0 184.5 -37t151 -102t102 -151.5t37.5 -185.5t-37.5 -185t-102 -151t-151 -102t-184.5 -37q-100 0 -186.5 37t-151 102t-102 151t-37.5 185t37.5 185.5t102 151.5t151 102t186.5 37zM784 316q28 0 47.5 20t19.5 48t-19.5 47t-47.5 19h-202v203q0 28 -20 48
t-48 20t-47.5 -20t-19.5 -48v-203h-203q-28 0 -47.5 -19t-19.5 -47t19.5 -48t47.5 -20h203v-202q0 -28 19.5 -48t47.5 -20t48 20t20 48v202h202z" />
d="M512 812q-139 0 -257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5t257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5zM768 215h-512v170h512v-170z" />
<glyph glyph-name="uniE631" unicode="&#xe631;"
d="M831 612q-2 12 -11 20t-21 8h-160v32q0 66 -47 113t-113 47t-112.5 -47t-46.5 -113v-32h-160q-12 0 -21.5 -8t-10.5 -20l-64 -576q-1 -15 8.5 -25.5t23.5 -10.5h767q14 0 23.5 10.5t7.5 25.5zM351.5 448q-13.5 0 -23 9.5t-9.5 22.5t9.5 22.5t23 9.5t22.5 -9.5t9 -22.5
t-9 -22.5t-22.5 -9.5zM575 640h-192v32q0 40 28.5 68t68 28t67.5 -28t28 -68v-32zM607.5 448q-13.5 0 -23 9.5t-9.5 22.5t9.5 22.5t23 9.5t22.5 -9.5t9 -22.5t-9 -22.5t-22.5 -9.5z" />
... ... @@ -188,6 +187,8 @@ d="M512 -212q-104 0 -199 40.5t-163.5 109t-109 163.5t-40.5 199t40.5 199t109 163.5
t271.5 -112.5t271.5 112.5t112.5 271.5t-112.5 271.5t-271.5 112.5z" />
<glyph glyph-name="uniE638" unicode="&#xe638;"
d="M511 833q-91 0 -174 -35.5t-143 -95.5t-95.5 -143t-35.5 -174t35.5 -174t95.5 -143t143 -95t174 -35t174 35t143 95t95.5 143t35.5 174t-35.5 174t-95.5 143t-143 95.5t-174 35.5z" />
<glyph glyph-name="uniE639" unicode="&#xe639;"
d="M512 -212q-139 0 -257 68.5t-186.5 186.5t-68.5 257t68.5 257t186.5 186.5t257 68.5t257 -68.5t186.5 -186.5t68.5 -257t-68.5 -257t-186.5 -186.5t-257 -68.5zM585 373v293h-146v-293h-293v-146h293v-293h146v293h293v146h-293z" />
<glyph glyph-name="uniE63A" unicode="&#xe63a;"
d="M963 564l-117 -190h92v-43h-107v-58h107v-42h-107v-85h-55v85h-112v42h112v58h-112v43h95l-115 190h62q81 -142 98 -180h1q6 16 33 63l66 117h59z" />
<glyph glyph-name="uniE63B" unicode="&#xe63b;"
... ...
No preview for this file type
No preview for this file type
/**
* [购物流程]结算页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/7/8
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
var minusPlus = {
minus: '&#xe630;',
plus: '&#xe639;'
};
var $coin = $('#input-coin'),
$coinTip = $('#coin-tip'),
$coinSure = $('#coin-sure'),
coinMax = +$coin.data('max'),
coinStatus = {
err: '请输入一个正整数',
max: '您的有货币不足',
success: '抵扣￥',
maxUse: '您最多使用',
muPostfix: '个有货币'
};
var balanceCost = +$('#balance-cost').data('cost');
require('../plugins/check');
lazyLoad($('img.lazy'));
// 发票
$('.invoice-radio').check({
type: 'radio'
});
// 有货币、备注切换显示
$('.coin-ctrl, .remark-ctrl').click(function() {
var $this = $(this),
$icon = $this.hasClass('iconfont') ? $this : $this.siblings('.iconfont');
if ($icon.hasClass('minus')) {
// hide panel
$icon.html(minusPlus.plus).removeClass('minus');
} else {
// show panel
$icon.html(minusPlus.minus).addClass('minus');
}
$this.parent('.title').siblings('.content').toggleClass('hide');
});
// 使用有货币输入框联动
$coin.on('input', function() {
var c = $.trim($coin.val());
var err = true;
if (c === '') {
// 输入框为空，确定按钮不可点
$coinTip.addClass('vhide');
$coinSure.addClass('disable');
return;
} else if (!/^[1-9]\d*$/.test(c)) {
// 验证输入不为正整数
$coinTip.text(coinStatus.err);
} else if (+c > coinMax) {
// 有货币不足
$coinTip.text(coinStatus.max);
} else if (+c > balanceCost * 100) {
// 输入的有货币大于订单额度
$coinTip.text(coinStatus.maxUse + (balanceCost * 100) + coinStatus.muPostfix);
} else {
err = false;
$coinTip.text(coinStatus.success + (c / 100).toFixed(2));
}
if (err) {
$coinSure.addClass('disable');
$coinTip.removeClass('vhide');
} else {
$coinSure.removeClass('disable');
$coinTip.addClass('vhide');
}
});
... ...
.shopping-order-page {
.order-block {
border-bottom: 1px solid #eee;
padding-bottom: 30px;
.title {
font-weight: bold;
}
}
.address-info {
padding-bottom: 15px;
ul {
width: 1173px;
&.shrink {
height: 195px;
overflow: hidden;
}
}
}
.new-address .iconfont {
font-size: 12px;
}
.address-header {
height: 11px;
background: #eee url(/shopping/address-tag.png);
}
.address {
position: relative;
float: left;
width: 270px;
height: 180px;
margin-right: 23px;
border: 1px solid #eee;
margin-bottom: 15px;
&.focus {
border-color: #000;
.address-header {
background-image: url(/shopping/address-tag-chosed.png);
}
}
.default-or-not {
text-align: right;
font-size: 12px;
height: 40px;
&.not-default {
line-height: 40px;
}
}
.set-default {
display: inline-block;
color: #ccc;
cursor: pointer;
}
.default-tag {
border: 1px solid #ccc;
color: #000;
padding: 5px;
display: inline-block;
margin-top: 8px;
}
}
.address-chosed {
position: absolute;
bottom: 0;
right: 0;
}
.address-content {
padding: 0 15px;
}
.address-area {
line-height: 40px;
border-top: 1px solid #ccc;
margin-top: 10px;
}
.address-detail {
line-height: 15px;
}
.address-detail,
.address-opration {
font-size: 12px;
color: #999;
}
.address-opration {
cursor: pointer;
line-height: 30px;
text-align: right;
> span:hover {
color: #000;
}
}
.address-all {
font-size: 12px;
color: #7e7e7e;
cursor: pointer;
.iconfont {
font-size: 12px;
}
}
.payment-type,
.dispatch-type {
padding-bottom: 10px;
}
.title {
line-height: 52px;
}
.chose-row {
color: #ccc;
line-height: 40px;
&.focus {
color: #000;
.chose-block {
border-color: #000;
}
}
}
.chose-block {
float: left;
display: block;
height: 40px;
margin-right: 20px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
.payment-type .chose-block {
width: 160px;
}
.dispatch-type .chose-block {
width: 200px;
}
ul.content > li {
margin-bottom: 20px;
}
.dispatch-call {
margin-top: 30px;
}
.call-before-dispatch-tip {
color: #ccc;
margin-left: 75px;
}
.go-cart-link .iconfont {
font-size: 16px;
}
.order-info {
margin-top: 50px;
}
.order-inner {
border: 1px solid #ccc;
.title {
padding: 0 15px;
border-bottom: 1px solid #ccc;
}
.block {
margin: 0 15px;
}
.content {
font-weight: bold;
}
.info {
width: 548px;
}
/* [表格内容]商品图片 */
.goods-img {
width: 180px;
padding: 0 40px;
img {
width: 100px;
height: 148px;
}
}
/* [表格内容]品牌和商品名称 */
.brand-and-name {
width: 368px;
text-align: left;
}
.color-size {
width: 190px;
}
.price {
width: 190px;
}
.number {
width: 190px;
}
}
.order-table-head {
height: 50px;
line-height: 50px;
margin: 0 15px;
> span {
display: block;
float: left;
text-align: center;
}
}
.order-table-body {
display: table;
}
.order-goods {
border-top: 1px solid #ccc;
padding: 20px 0;
margin: 0 15px;
text-align: center;
.brand-name {
display: block;
line-height: 50px;
}
.name {
font-size: 14px;
line-height: 16px;
}
> * {
display: table-cell;
vertical-align: middle;
}
.number > .iconfont {
font-size: 14px;
}
}
.coin-and-remark {
padding: 20px 0;
}
.coin .title,
.remark .title {
line-height: 30px;
}
.coin-ctrl,
.remark-ctrl {
cursor: pointer;
&.iconfont {
font-size: 16px;
}
}
.balance {
padding: 10px 20px;
border: 1px solid #ccc;
font-size: 14px;
font-weight: bold;
margin-bottom: 80px;
}
.balance-info {
line-height: 30px;
width: 670px;
}
.balance-list {
width: 364px;
li {
line-height: 30px;
}
}
.balance-cost {
float: right;
}
li.need-pay {
border-top: 1px solid #000;
line-height: 50px;
margin-top: 10px;
}
.submit-order {
width: 160px;
height: 40px;
line-height: 40px;
}
/* 使用有货币&备注 */
.coin-and-remark .content {
background: #f5f5f5;
padding: 15px 20px;
margin: 20px 0;
font-size: 14px;
}
.coin-input {
width: 70px;
margin-left: 20px;
}
.coin-tip {
line-height: 30px;
}
.used-coin .btn {
display: inline-block;
width: auto;
height: 20px;
line-height: 20px;
padding: 0 5px;
border: none;
cursor: pointer;
&.modify {
margin-left: 130px;
}
}
.remark-content {
width: 1110px;
height: 118px;
padding: 10px;
resize: none;
}
.print-price {
margin: 20px 0 10px;
}
.remark-tip {
color: #b1b1b1;
}
}
.shopping-order-page {
.order-block {
border-bottom: 1px solid #eee;
padding-bottom: 30px;
.title {
font-weight: bold;
}
}
.address-info {
padding-bottom: 15px;
ul {
width: 1173px;
&.shrink {
height: 195px;
overflow: hidden;
}
}
}
.new-address .iconfont {
font-size: 12px;
}
.address-header {
height: 11px;
background: #eee url(/shopping/address-tag.png);
}
.address {
position: relative;
float: left;
width: 270px;
height: 180px;
margin-right: 23px;
border: 1px solid #eee;
margin-bottom: 15px;
&.focus {
border-color: #000;
.address-header {
background-image: url(/shopping/address-tag-chosed.png);
}
}
.default-or-not {
text-align: right;
font-size: 12px;
height: 40px;
&.not-default {
line-height: 40px;
}
}
.set-default {
display: inline-block;
color: #ccc;
cursor: pointer;
}
.default-tag {
border: 1px solid #ccc;
color: #000;
padding: 5px;
display: inline-block;
margin-top: 8px;
}
}
.address-chosed {
position: absolute;
bottom: 0;
right: 0;
}
.address-content {
padding: 0 15px;
}
.address-area {
line-height: 40px;
border-top: 1px solid #ccc;
margin-top: 10px;
}
.address-detail {
line-height: 15px;
}
.address-detail,
.address-opration {
font-size: 12px;
color: #999;
}
.address-opration {
cursor: pointer;
line-height: 30px;
text-align: right;
> span:hover {
color: #000;
}
}
.address-all {
font-size: 12px;
color: #7e7e7e;
cursor: pointer;
.iconfont {
font-size: 12px;
}
}
.payment-type,
.dispatch-type {
padding-bottom: 10px;
}
.title {
line-height: 52px;
}
.chose-row {
color: #ccc;
line-height: 40px;
&.focus {
color: #000;
.chose-block {
border-color: #000;
}
}
}
.chose-block {
float: left;
display: block;
height: 40px;
margin-right: 20px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
.payment-type .chose-block {
width: 160px;
}
.dispatch-type .chose-block {
width: 200px;
}
ul.content > li {
margin-bottom: 20px;
}
.dispatch-call {
margin-top: 30px;
}
.call-before-dispatch-tip {
color: #ccc;
margin-left: 75px;
}
.go-cart-link .iconfont {
font-size: 16px;
}
.order-info {
margin-top: 50px;
}
.order-inner {
border: 1px solid #ccc;
.title {
padding: 0 15px;
border-bottom: 1px solid #ccc;
}
.block {
margin: 0 15px;
}
.content {
font-weight: bold;
}
.info {
width: 548px;
}
/* [表格内容]商品图片 */
.goods-img {
width: 180px;
padding: 0 40px;
img {
width: 100px;
height: 148px;
}
}
/* [表格内容]品牌和商品名称 */
.brand-and-name {
width: 368px;
text-align: left;
}
.color-size {
width: 190px;
}
.price {
width: 190px;
}
.number {
width: 190px;
}
}
.order-table-head {
height: 50px;
line-height: 50px;
margin: 0 15px;
> span {
display: block;
float: left;
text-align: center;
}
}
.order-table-body {
display: table;
}
.order-goods {
border-top: 1px solid #ccc;
padding: 20px 0;
margin: 0 15px;
text-align: center;
.brand-name {
display: block;
line-height: 50px;
}
.name {
font-size: 14px;
line-height: 16px;
}
> * {
display: table-cell;
vertical-align: middle;
}
.number > .iconfont {
font-size: 14px;
}
}
.invoice-radio {
color: #999;
cursor: pointer;
.iconfont {
font-size: 18px;
}
}
.coin-and-remark {
padding: 20px 0;
}
.coin .title,
.remark .title {
line-height: 30px;
}
.coin-ctrl,
.remark-ctrl {
cursor: pointer;
&.iconfont {
font-size: 16px;
}
}
.balance {
padding: 10px 20px;
border: 1px solid #ccc;
font-size: 14px;
font-weight: bold;
margin-bottom: 80px;
}
.balance-info {
line-height: 30px;
width: 670px;
}
.balance-list {
width: 364px;
li {
line-height: 30px;
}
}
.balance-cost {
float: right;
}
li.need-pay {
border-top: 1px solid #000;
line-height: 50px;
margin-top: 10px;
}
.submit-order {
width: 160px;
height: 40px;
line-height: 40px;
}
/* 使用有货币&备注 */
.coin-and-remark .content {
background: #f5f5f5;
padding: 15px 20px;
margin: 20px 0;
font-size: 14px;
}
.coin-input {
width: 70px;
margin-left: 20px;
}
.coin-tip {
line-height: 30px;
}
.used-coin .btn {
display: inline-block;
width: auto;
height: 20px;
line-height: 20px;
padding: 0 5px;
border: none;
cursor: pointer;
&.modify {
margin-left: 130px;
}
}
.remark-content {
width: 1110px;
height: 118px;
padding: 10px;
resize: none;
}
.print-price {
margin: 20px 0 10px;
}
.remark-tip {
color: #b1b1b1;
}
}
... ...