Skip to content

M
member
Commit cc6dfebb by chenyu
Options

update: style

parent 2da52e18
Showing with 135 additions and 49 deletions
src/components/allCustomers/consumption.vue
......@@ -15,7 +15,7 @@
<div class="record" v-loading="fullscreenLoading">
<div class="record-search">
<div class="record-searchitem">
<el-select v-model="orderType" placeholder="所有类型" @change="handleSearch">
<el-select v-model="orderType" style="width:160px;" placeholder="所有类型" @change="handleSearch">
<el-option :key=-1 label="所有类型" :value=-1></el-option>
<el-option :key=1 label="销售" :value=1></el-option>
<el-option :key=2 label="退货" :value=2></el-option>
......@@ -57,45 +57,54 @@
<p class="code">{{group.clerkCode}}</p>
</div>
</template>
<template v-else>￥{{group[colunm.prop]|fomatFloat}}<el-popover
popper-class="amount-detail-popover" placement="bottom" width="242"
trigger="click" :open-delay="200">
<div class="amount-detail" v-loading="orderLoading"
v-if="Object.keys(orderInfo).length">
<h5 class="title">金额详情</h5>
<div class="middle">
<p class="amount-line">
<span>吊牌价总额：</span>¥{{orderInfo.totalAmount|fomatFloat}}
</p>
<p class="amount-line">
<span>订单应收：</span>¥{{orderInfo.paidAmount|fomatFloat}}
</p>
<p class="amount-line">
<span>订单实付：</span>¥{{group.paidAmount|fomatFloat}}
</p>
</div>
<div class="bottom">
<p class="amount-line">支付方式：</p>
<div class="right">
<p class="cash"><span>现金</span>¥{{payInfo.cash|fomatFloat}}
<template v-else>
<div style="display:flex;align-items:center;">
￥{{group[colunm.prop]|fomatFloat}}<el-popover
popper-class="amount-detail-popover" placement="bottom" width="242"
trigger="click" :open-delay="200">
<div class="amount-detail" v-loading="orderLoading"
v-if="Object.keys(orderInfo).length">
<h5 class="title">金额详情</h5>
<div class="middle">
<p class="amount-line">
<span>吊牌价总额：</span>¥{{orderInfo.totalAmount|fomatFloat}}
</p>
<p class="amount-line">
<span>订单应收：</span>¥{{orderInfo.paidAmount|fomatFloat}}
</p>
<p class="voucher">
<span>抵金券</span>¥{{payInfo.voucher|fomatFloat}}
<p class="amount-line">
<span>订单实付：</span>¥{{group.paidAmount|fomatFloat}}
</p>
</div>
<div class="bottom">
<p class="amount-line">支付方式：</p>
<div class="right">
<p class="cash"><span>现金</span>¥{{payInfo.cash|fomatFloat}}
</p>
<p class="voucher">
<span>抵金券</span>¥{{payInfo.voucher|fomatFloat}}
</p>
</div>
</div>
</div>
</div>
<div v-else style="text-align:center">暂无数据</div>
<span slot="reference" class="icon-span" title="查看金额详情"
@click="getOrderDetail(group.orderId)"><i
class="iconfont icon-dingdan1"></i></span>
</el-popover></template>
<div v-else style="text-align:center">暂无数据</div>
<span slot="reference" class="icon-span" title="查看金额详情"
@click="getOrderDetail(group.orderId)"><i
class="iconfont icon-zhangdan"></i></span>
</el-popover>
</div>
</template>
</template>
<template v-else>
<div class="good-info" v-if="colunm.prop==='productName'">
<img :src="row.imageUrl" alt="">
<div class="info-detail">
<p class="good-name">{{row.productName}}</p>
<p class="good-name">
<el-tooltip class="item" effect="dark" :content="row.productName"
placement="top"><span class="name">{{row.productName}}</span>
</el-tooltip>
<el-tag type="warning" v-if="row.productType==3">赠品</el-tag>
</p>
<p class="good-code">{{row.productCode}}</p>
<p class="good-attr">{{row.attrColorSize}}</p>
</div>
......@@ -414,7 +423,7 @@ p {
/deep/.el-table__header-wrapper {
display: none;
}
/deep/td:nth-last-child(3) {
/deep/td:nth-child(4) {
border-left: 1px solid #ebeef5;
}
}
......@@ -463,14 +472,23 @@ p {
}
.info-detail {
.good-name {
display: flex;
width: 100%;
margin-bottom: 4px;
font-size: 14px;
color: #303133;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.name {
flex: 1;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-tag {
height: 18px;
line-height: 18px;
}
}
.good-code {
margin-bottom: 3px;
......@@ -501,23 +519,23 @@ p {
}
}
.icon-span {
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
margin-left: 9px;
width: 30px;
height: 30px;
margin-left: 4px;
border-radius: 2px;
text-align: center;
cursor: pointer;
.el-icon-edit {
font-size: 14px;
.icon-zhangdan {
font-size: 19px;
color: #909399;
}
&:hover {
background: #f0f5ff;
.icon-dingdan1 {
color: #1890ff;
.icon-zhangdan {
color: #606266;
}
}
}
......
static/font/demo_index.html
......@@ -55,6 +55,18 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe74b;</span>
<div class="name">账单</div>
<div class="code-name">&amp;#xe74b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68d;</span>
<div class="name">1_黑名单管理</div>
<div class="code-name">&amp;#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68c;</span>
<div class="name">微信取关</div>
<div class="code-name">&amp;#xe68c;</div>
......@@ -1734,9 +1746,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1637055326075') format('woff2'),
url('iconfont.woff?t=1637055326075') format('woff'),
url('iconfont.ttf?t=1637055326075') format('truetype');
src: url('iconfont.woff2?t=1637285227740') format('woff2'),
url('iconfont.woff?t=1637285227740') format('woff'),
url('iconfont.ttf?t=1637285227740') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -1763,6 +1775,24 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-zhangdan"></span>
<div class="name">
账单
</div>
<div class="code-name">.icon-zhangdan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-1_heimingdanguanli"></span>
<div class="name">
1_黑名单管理
</div>
<div class="code-name">.icon-a-1_heimingdanguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weixinquguan"></span>
<div class="name">
微信取关
......@@ -4284,6 +4314,22 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhangdan"></use>
</svg>
<div class="name">账单</div>
<div class="code-name">#icon-zhangdan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-1_heimingdanguanli"></use>
</svg>
<div class="name">1_黑名单管理</div>
<div class="code-name">#icon-a-1_heimingdanguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weixinquguan"></use>
</svg>
<div class="name">微信取关</div>
......
static/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 688955 */
src: url('iconfont.woff2?t=1637055326075') format('woff2'),
url('iconfont.woff?t=1637055326075') format('woff'),
url('iconfont.ttf?t=1637055326075') format('truetype');
src: url('iconfont.woff2?t=1637285227740') format('woff2'),
url('iconfont.woff?t=1637285227740') format('woff'),
url('iconfont.ttf?t=1637285227740') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-zhangdan:before {
content: "\e74b";
}
.icon-a-1_heimingdanguanli:before {
content: "\e68d";
}
.icon-weixinquguan:before {
content: "\e68c";
}
......
static/font/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/font/iconfont.json
......@@ -6,6 +6,20 @@
"description": "",
"glyphs": [
{
"icon_id": "17102423",
"name": "账单",
"font_class": "zhangdan",
"unicode": "e74b",
"unicode_decimal": 59211
},
{
"icon_id": "22465139",
"name": "1_黑名单管理",
"font_class": "a-1_heimingdanguanli",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "25735940",
"name": "微信取关",
"font_class": "weixinquguan",
......
static/font/iconfont.ttf
No preview for this file type
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 to comment