Skip to content

M
marketing
Commit cb2ea8c6 by caoyanzhi
Options

update: 计费中心样式

parent 95487f43
Showing with 106 additions and 49 deletions
src/views/recharge/board.vue
......@@ -45,77 +45,93 @@
<select-depart v-if="config.isMoreAccount && config.showAllDepartment" :data="deparment1" class="mb20" @load="() => load('one')" @getDepartId="id => getDepartId(id, 'one')" @remote-search="val => remoteSearch(val, 'one')" :loading="deparment1.loading" />
<el-row class="recharge-today" :gutter="20" v-loading="loading1">
<el-col :span="6" style="padding: 0 2px">
<div class="recharge-today-item border2 flex_start">
<div class="recharge-today-item border2">
<div class="text-center">
<div class="icon-box">
<i class="iconfont icon-wenbenmsg fz36"></i>
</div>
</div>
<div class="flex_column_between">
<p>文本短信</p>
<div class="flex_between">
<span>
<span class="fz22">{{ recharge.messageCount || 0 }}</span>
条
</span>
<span class="regular-font-color">合计费用：￥{{ (recharge.messageFee / 1000) | amount }}</span>
<div class="consume-info">
<div class="consume-item">
<p class="consume-item-label">短信营销</p>
<p class="consume-item-value">
<span class="value-content">{{ recharge.messageCount || 0 }}</span> 条
</p>
</div>
<div class="consume-item">
<p class="consume-item-label">合计费用</p>
<p class="consume-item-value">
<span class="value-content">{{ (recharge.messageFee / 1000) | amount }}</span> 元
</p>
</div>
</div>
</div>
</el-col>
<el-col :span="6" style="padding: 0 2px">
<div class="recharge-today-item border2 flex_start">
<div class="recharge-today-item border2">
<div class="text-center">
<div class="icon-box color2">
<i class="iconfont icon-duanxinyzm fz28"></i>
</div>
</div>
<div class="flex_column_between">
<p>短信验证码</p>
<div class="flex_between">
<span>
<span class="fz22">{{ recharge.smsCount || 0 }}</span>
条
</span>
<span class="regular-font-color">合计费用：￥{{ (recharge.smsFee / 1000) | amount }}</span>
<div class="consume-info">
<div class="consume-item">
<p class="consume-item-label">短信验证码</p>
<p class="consume-item-value">
<span class="value-content">{{ recharge.smsCount || 0 }}</span> 条
</p>
</div>
<div class="consume-item">
<p class="consume-item-label">合计费用</p>
<p class="consume-item-value">
<span class="value-content">{{ (recharge.smsFee / 1000) | amount }}</span> 元
</p>
</div>
</div>
</div>
</el-col>
<el-col :span="6" style="padding: 0 2px">
<div class="recharge-today-item border2 flex_start">
<div class="recharge-today-item border2">
<div class="text-center">
<div class="icon-box color3">
<i class="iconfont icon-shuangxianghujiao1 fz36"></i>
</div>
</div>
<div class="flex_column_between">
<p>双向呼叫</p>
<div class="flex_between">
<span>
<span class="fz22">{{ recharge.callTime || 0 }}</span>
分钟
</span>
<span class="regular-font-color">合计费用：￥{{ (recharge.callFee / 1000) | amount }}</span>
<div class="consume-info">
<div class="consume-item">
<p class="consume-item-label">双向呼叫</p>
<p class="consume-item-value">
<span class="value-content">{{ recharge.callTime || 0 }}</span> 分钟
</p>
</div>
<div class="consume-item">
<p class="consume-item-label">合计费用</p>
<p class="consume-item-value">
<span class="value-content">{{ (recharge.callFee / 1000) | amount }}</span> 元
</p>
</div>
</div>
</div>
</el-col>
<el-col :span="6" style="padding: 0 2px">
<div class="recharge-today-item border2 flex_start">
<div class="recharge-today-item border2">
<div class="text-center">
<div class="icon-box color4">
<i class="iconfont icon-AIdianhua fz36"></i>
</div>
</div>
<div class="flex_column_between">
<p>AI电话</p>
<div class="flex_between">
<span>
<span class="fz22">{{ recharge.aiCount || 0 }}</span>
分钟
</span>
<span class="regular-font-color">合计费用：￥{{ (recharge.aiFee / 1000) | amount }}</span>
<div class="consume-info">
<div class="consume-item">
<p class="consume-item-label">AI电话</p>
<p class="consume-item-value">
<span class="value-content">{{ recharge.aiCount || 0 }}</span> 分钟
</p>
</div>
<div class="consume-item">
<p class="consume-item-label">合计费用</p>
<p class="consume-item-value">
<span class="value-content">{{ (recharge.aiFee / 1000) | amount }}</span> 元
</p>
</div>
</div>
</div>
......@@ -419,8 +435,61 @@ export default {
width: 20% !important;
}
&-item {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: stretch;
// padding: 15px;
padding: 5.4%;
margin: 4px;
.consume-info {
display: flex;
justify-content: space-between;
align-items: stretch;
margin-left: 12px;
width: calc(100% - 72px);
.consume-item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 50%;
+ .consume-item {
align-items: flex-end;
.consume-item-value {
justify-content: flex-end;
}
}
.consume-item-label {
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
.consume-item-value {
display: flex;
justify-content: flex-start;
align-items: flex-end;
width: 100%;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
.value-content {
margin-right: 5px;
transform: translateY(3px);
font-size: 22px;
font-weight: 600;
color: #303133;
line-height: 30px;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.icon-box {
width: 60px;
height: 60px;
......@@ -513,18 +582,6 @@ export default {
}
}
}
.flex_start {
display: flex;
justify-content: flex-start;
}
.flex_column_between {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-left: 10px;
width: 100%;
}
.flex_between {
display: flex;
justify-content: space-between;
......
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