pengda
3 months ago
6 changed files with 1088 additions and 309 deletions
@ -0,0 +1,552 @@ |
|||
<template> |
|||
<div class="demo-wrap min-flex-right"> |
|||
<div class="flex-between"> |
|||
<h2>{{pageTitle}}</h2> |
|||
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px"> |
|||
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
|||
</CustomDropdown> |
|||
</div> |
|||
<div class=" flex-common" id=""> |
|||
<el-form> |
|||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="sort" label="排序" width="100"></el-table-column> |
|||
|
|||
<el-table-column v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" prop="name" :key="selectedType" :label="type_select[selectedType]"> |
|||
<template slot="header"> |
|||
<el-select class="custom-select" v-model="selectedType" @change="changeRankType"> |
|||
<el-option v-for="(item,type) in type_select" :key="type" :label="item" :value="type"></el-option> |
|||
</el-select> |
|||
</template> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column> |
|||
|
|||
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" :prop="String(index + 1)" sortable="custom"> |
|||
<template v-if="index == 3 && dataRank == 1 && type != 'agent'" v-slot="{ row, $index }"> |
|||
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> |
|||
<div class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3>{{ text }} {{ row.name }} <span @click="goLookMoreData(row.id)">查看更多</span></h3> |
|||
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
|||
</div> |
|||
<el-table :data="tableData1" style="width: 100%"> |
|||
<el-table-column prop="value_1" width="208" label="日期"></el-table-column> |
|||
<el-table-column width="348" :label="rank_type_desc[dataRank]"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.value_2 }} |
|||
<template v-if="Object.keys(growth_list1).length > 0"> |
|||
<span class="flex growth-text" v-if="growth_list1[scope.row.id]"> |
|||
<span v-if="growth_list1[scope.row.id].value>0"> |
|||
<span class="growth-up"> |
|||
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list1[scope.row.id].value}}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-if="growth_list1[scope.row.id].value<0"> |
|||
<span class="growth-down"> |
|||
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list1[scope.row.id].value}}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-if="growth_list1[scope.row.id].value==0"> |
|||
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
|||
</span> |
|||
</span> |
|||
<span class="flex growth-text" v-else>上年无数据</span> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<div class="flex" slot="reference" > |
|||
{{ row[field] }} |
|||
<template v-if="Object.keys(growth_list).length > 0"> |
|||
<template v-if="growth_list[row.id] && growth_list[row.id][field]"> |
|||
<span v-if="growth_list[row.id][field].value > 0" class="growth-text"> |
|||
<span class="growth-up"> |
|||
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> |
|||
{{ growth_list[row.id][field].value }}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-else-if="growth_list[row.id][field].value < 0" class="growth-text"> |
|||
<span class="growth-down"> |
|||
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> |
|||
{{ growth_list[row.id][field].value }}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-else class="growth-text"> |
|||
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" />同比上年持平 |
|||
</span> |
|||
</template> |
|||
<span v-else class="growth-text">上年无数据</span> |
|||
</template> |
|||
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
<template v-else slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row[field] }} |
|||
<template v-if="Object.keys(growth_list).length > 0"> |
|||
<template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]"> |
|||
<span v-if="growth_list[scope.row.id][field].value > 0" class="growth-text"> |
|||
<span class="growth-up"> |
|||
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> |
|||
{{ growth_list[scope.row.id][field].value }}% |
|||
</span> |
|||
同比上年 |
|||
</span> |
|||
<span v-else-if="growth_list[scope.row.id][field].value < 0" class="growth-text"> |
|||
<span class="growth-down"> |
|||
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> |
|||
{{ growth_list[scope.row.id][field].value }}% |
|||
</span> |
|||
同比上年 |
|||
</span> |
|||
<span v-else class="growth-text"> |
|||
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" /> |
|||
同比上年持平 |
|||
</span> |
|||
</template> |
|||
<span v-else class="growth-text">上年无数据</span> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import GuipForm from '@/components/GuipForm.vue' |
|||
import DateSelect from '@/components/super/DateSelect.vue'; |
|||
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|||
|
|||
export default { |
|||
name: 'rank_batch_list', |
|||
props: { |
|||
pageTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
rank_type: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
components: { |
|||
DateSelect, |
|||
CustomDropdown |
|||
}, |
|||
data() { |
|||
return { |
|||
viewDesc:{ |
|||
'month':'月份', |
|||
'monthTwo':'月份', |
|||
'year':'年份', |
|||
}, |
|||
rank_type_desc:{ |
|||
1:'毛利润/元', |
|||
2:'订单数', |
|||
3:'退单数', |
|||
4:'充值金额', |
|||
}, |
|||
type_desc:{ |
|||
'agent':'代理商昵称', |
|||
'ver_type':'品牌名称', |
|||
'check_type':'服务名称', |
|||
}, |
|||
type_select:{ |
|||
'ver_type':'按品牌名称', |
|||
'check_type':'按服务名称', |
|||
}, |
|||
selectedType: 'check_type', |
|||
view:'month', |
|||
labels:['','','',''], |
|||
valueFields:['value_1','value_2','value_3','value_4'], |
|||
currentPage: 1, //当前页 |
|||
pageSize: 20, //每页的容量 |
|||
total: 0, //列表总数 |
|||
sortBy: 4, |
|||
sortOrder: 2, |
|||
text:'',//下拉框显示具体文案 |
|||
selectedDate:new Date(),//默认当天日期 |
|||
dataType: '', |
|||
dataRank: '', |
|||
tableData: [], |
|||
growth_list: [], |
|||
tableData1: [], |
|||
growth_list1: [], |
|||
show_detail_index: 0, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init() |
|||
}, |
|||
computed: { |
|||
}, |
|||
watch: { |
|||
'$route'() { |
|||
this.init() |
|||
} |
|||
}, |
|||
methods: { |
|||
init(){ |
|||
this.text = this.getNowDate()//初始赋值 |
|||
|
|||
this.dataType = this.type |
|||
this.dataRank = this.rank_type |
|||
|
|||
this.getRankingData(); // 每次路由变化都重新获取数据 |
|||
}, |
|||
handleUpdateView(newView) { |
|||
this.view = newView; |
|||
}, |
|||
getNowDate(){ |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
|||
const currentYearMonth = `${year}-${month}`; |
|||
return `${currentYearMonth}` |
|||
}, |
|||
getDate(dateStr){ |
|||
const date = new Date(dateStr); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
if(this.view == 'year'){ |
|||
return `${year}` |
|||
}else{ |
|||
return `${year}-${month}` |
|||
} |
|||
}, |
|||
handleDateChange(date) { |
|||
this.text = this.getDate(date) |
|||
this.selectedDate = date; |
|||
localStorage.setItem('date',JSON.stringify(date)) |
|||
|
|||
this.$refs.dropdownRef.closeDropdown(); |
|||
|
|||
this.currentPage = 1; |
|||
this.getRankingData() |
|||
}, |
|||
goLookMoreData(id) { |
|||
let query = {} |
|||
query.date = this.text |
|||
query.rank_type = this.dataRank |
|||
if(this.dataType == 'agent') { |
|||
query.aid = id |
|||
} |
|||
if(this.dataType == 'ver_type') { |
|||
query.ver_type = id |
|||
} |
|||
if(this.dataType == 'check_type') { |
|||
query.check_type = id |
|||
} |
|||
window.open(this.$router.resolve({ |
|||
path: '/super/ranking/detail', |
|||
query: query |
|||
}).href, '_blank') |
|||
}, |
|||
closePop(row,type){ |
|||
row[type + '_popover'] = false; // 关闭弹框 |
|||
}, |
|||
handleClick(row, index, type) { |
|||
// 关闭其他行的弹框 |
|||
this.tableData.forEach((item, i) => { |
|||
if (i !== index) { |
|||
item[type + '_popover'] = false; |
|||
} |
|||
}); |
|||
// 打开当前行的弹框 |
|||
row[type + '_popover'] = true; |
|||
|
|||
let obj = {} |
|||
if(this.dataType == 'agent') { |
|||
obj.aid = row.id |
|||
} |
|||
if(this.dataType == 'ver_type') { |
|||
obj.ver_type = row.id |
|||
} |
|||
if(this.dataType == 'check_type') { |
|||
obj.check_type = row.id |
|||
} |
|||
this.getRankingDetail(obj); |
|||
}, |
|||
popshow() { |
|||
var ariaEls = document.querySelectorAll('.el-popover') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
|
|||
ariaEls = document.querySelectorAll('.el-radio__original') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
}, |
|||
handleSortChange({ prop, order }) { |
|||
this.sortBy = 4; |
|||
this.sortOrder = 2; |
|||
if (order == 'ascending') { |
|||
this.sortBy = prop; |
|||
this.sortOrder = 1; |
|||
} |
|||
if (order == 'descending') { |
|||
this.sortBy = prop; |
|||
this.sortOrder = 2; |
|||
} |
|||
this.currentPage = 1; |
|||
this.getRankingData() |
|||
}, |
|||
handleRowHover(row) { |
|||
this.show_detail_index = row.sort |
|||
}, |
|||
changeRankType(){ |
|||
this.dataType = this.selectedType |
|||
this.getRankingData() |
|||
}, |
|||
getRankingData() { |
|||
this.setLabelText(); |
|||
|
|||
if(this.dataType == 'agent') { |
|||
this.getAgentRanking() |
|||
} |
|||
if(this.dataType == 'ver_type') { |
|||
this.getVerRanking() |
|||
} |
|||
if(this.dataType == 'check_type') { |
|||
this.getTypeRanking() |
|||
} |
|||
}, |
|||
setLabelText(){ |
|||
const date = new Date(this.text); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
|
|||
this.labels = []; |
|||
if (this.view === 'year') { |
|||
for (let i = 3; i >= 0; i--) { |
|||
this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]); |
|||
} |
|||
} else { |
|||
const monthLabels = []; |
|||
for (let i = 3; i >= 0; i--) { |
|||
let m = month - i; |
|||
if (m <= 0) m += 12; |
|||
monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]); |
|||
} |
|||
this.labels = monthLabels; |
|||
} |
|||
}, |
|||
getAgentRanking() { |
|||
const that = this |
|||
//充值排行 |
|||
if(that.dataRank == 4){ |
|||
this.$http('POST', '/supernew/ajax_get_rank_recharge', { |
|||
date: that.text, |
|||
sortBy: that.sortBy, |
|||
sortOrder: that.sortOrder, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.growth_list = response.data.growth_list |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sortBy: that.sortBy, |
|||
sortOrder: that.sortOrder, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.growth_list = response.data.growth_list |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getVerRanking() { |
|||
const that = this |
|||
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sortBy: that.sortBy, |
|||
sortOrder: that.sortOrder, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.top_list = response.data.top_list |
|||
that.growth_list = response.data.growth_list |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getTypeRanking() { |
|||
const that = this |
|||
this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sortBy: that.sortBy, |
|||
sortOrder: that.sortOrder, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.top_list = response.data.top_list |
|||
that.growth_list = response.data.growth_list |
|||
that.total = response.data.total |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getRankingDetail(obj) { |
|||
const that = this |
|||
that.tableData1 = [] |
|||
that.growth_list1 = [] |
|||
this.$http('POST', '/supernew/ajax_get_rank_detail', { |
|||
date: that.text, |
|||
rank_type: that.dataRank, |
|||
sortBy: 2, |
|||
sortOrder: 2, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData1 = response.data.list.slice(0, 5) |
|||
that.growth_list1 = response.data.growth_list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
this.getRankingData() |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
this.getRankingData() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.growth-up{ |
|||
padding: 0 5px; |
|||
color:#22C55E; |
|||
} |
|||
.growth-down{ |
|||
padding: 0 5px; |
|||
color:#EF4444; |
|||
} |
|||
.growth-text{ |
|||
color:#9CA3AF; |
|||
padding-left: 5px; |
|||
} |
|||
.edit_icon{ |
|||
padding: 0 5px; |
|||
vertical-align: middle; |
|||
} |
|||
.demo-wrap { |
|||
width: 100%; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
.custom-select { |
|||
width: 120px; |
|||
border: none; |
|||
border-radius: 0; |
|||
font-size: 14px; |
|||
} |
|||
.custom-select ::v-deep(.el-input__inner) { |
|||
background: none; |
|||
border: 1px solid transparent; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
font-size: 14px; |
|||
color: #1e2226; |
|||
font-weight: bold; |
|||
padding: 0; |
|||
} |
|||
.custom-select ::v-deep(.el-input:focus-within) { |
|||
background: none; |
|||
border-color: #F5F7FA!important; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
outline:none; |
|||
} |
|||
|
|||
.detail_icon { |
|||
vertical-align: text-top; |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
::v-deep .el-popover.el-popper { |
|||
padding: 20px; |
|||
} |
|||
.pop-wrap { |
|||
// width: 596px; |
|||
// height: 320px; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
// padding: 20px; |
|||
gap: 20px; |
|||
box-sizing: border-box; |
|||
|
|||
// background: #FFFFFF; |
|||
/* 阴影/常规阴影 */ |
|||
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|||
.pop-top { |
|||
h3 { |
|||
/* body/body 1_bold */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: 18px; |
|||
letter-spacing: 0.08em; |
|||
color: #1D2129; |
|||
margin: 0; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin-left: 12px; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #006AFF; |
|||
} |
|||
} |
|||
img{ |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,479 @@ |
|||
<template> |
|||
<div class="demo-wrap min-flex-right"> |
|||
<div class="flex-between"> |
|||
<h2>{{filterTitle ? filterTitle : pageTitle}}</h2> |
|||
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px" v-if="showDateSelect"> |
|||
<DateSelect slot="normal" :view="view" :onlyYear="onlyYear" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
|||
</CustomDropdown> |
|||
</div> |
|||
<div class=" flex-common" v-if="type == 'year'"> |
|||
<el-form> |
|||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="sort" label="排序" width="100"></el-table-column> |
|||
<!-- 其他列 --> |
|||
<el-table-column prop="1" label="年份" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.value_1 }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.value_2 }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="代理商排行"> |
|||
<template v-slot="{ row, $index }"> |
|||
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> |
|||
<div class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3>{{ row.value_1 }} {{rank_type_desc[dataRank]}}<span @click="goLookMoreData(row.value_1)">查看更多</span></h3> |
|||
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
|||
</div> |
|||
<el-table :data="tableData1" style="width: 100%"> |
|||
<el-table-column prop="sort" width="100" label="排行"></el-table-column> |
|||
<el-table-column prop="name" width="208" label="代理商"></el-table-column> |
|||
<el-table-column prop="value_1" width="348" label="销售额"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 触发弹框的按钮 --> |
|||
<span v-if="top_list[row.id]" slot="reference" > |
|||
No.1 {{ top_list[row.id]['name'] }} |
|||
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
|||
</span> |
|||
</el-popover> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class=" flex-common" v-if="type == 'month'"> |
|||
<el-form> |
|||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="sort" label="排序" width="100"></el-table-column> |
|||
<!-- 其他列 --> |
|||
<el-table-column prop="1" label="月份" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.value_1 }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.value_2 }} |
|||
<span class="flex growth-text" v-if="growth_list[scope.row.id]"> |
|||
<span v-if="growth_list[scope.row.id].value>0"> |
|||
<span class="growth-up"> |
|||
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list[scope.row.id].value}}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-if="growth_list[scope.row.id].value<0"> |
|||
<span class="growth-down"> |
|||
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list[scope.row.id].value}}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-if="growth_list[scope.row.id].value==0"> |
|||
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
|||
</span> |
|||
</span> |
|||
<span class="flex growth-text" v-else>上年无数据</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="代理商排行"> |
|||
<template v-slot="{ row, $index }"> |
|||
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> |
|||
<div class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3>{{ row.value_1 }} {{rank_type_desc[dataRank]}}<span @click="goLookMoreData(row.value_1)">查看更多</span></h3> |
|||
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
|||
</div> |
|||
<el-table :data="tableData1" style="width: 100%"> |
|||
<el-table-column prop="sort" width="100" label="排行"></el-table-column> |
|||
<el-table-column prop="name" width="208" label="代理商"></el-table-column> |
|||
<el-table-column prop="value_1" width="348" label="销售额"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 触发弹框的按钮 --> |
|||
<span v-if="top_list[row.id]" slot="reference"> |
|||
No.1 {{ top_list[row.id]['name'] }} |
|||
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
|||
</span> |
|||
<span slot="reference" v-else>暂无排行</span> |
|||
</el-popover> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class=" flex-common" v-if="type == 'day'"> |
|||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;"> |
|||
<h3 style="margin: 0;"></h3> |
|||
<span style="font-size: 14px; color: #999;">总{{rank_type_desc[dataRank]}}：{{total_value}}</span> |
|||
</div> |
|||
|
|||
<el-form> |
|||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="sort" label="排序"></el-table-column> |
|||
<!-- 其他列 --> |
|||
<el-table-column prop="1" label="日期" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.value_1 }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
{{ scope.row.value_2 }} |
|||
<template v-if="Object.keys(growth_list).length > 0"> |
|||
<span class="flex growth-text" v-if="growth_list[scope.row.id]"> |
|||
<span v-if="growth_list[scope.row.id].value>0"> |
|||
<span class="growth-up"> |
|||
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list[scope.row.id].value}}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-if="growth_list[scope.row.id].value<0"> |
|||
<span class="growth-down"> |
|||
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list[scope.row.id].value}}% |
|||
</span>同比上年 |
|||
</span> |
|||
<span v-if="growth_list[scope.row.id].value==0"> |
|||
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
|||
</span> |
|||
</span> |
|||
<span class="flex growth-text" v-else>上年无数据</span> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class=" flex-common" v-if="type == 'agentnew'"> |
|||
<el-form> |
|||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="1" label="加盟时间" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.regtime }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="nick" label="代理商昵称"></el-table-column> |
|||
<el-table-column prop="real_name" label="负责人"></el-table-column> |
|||
<el-table-column prop="phone" label="电话"></el-table-column> |
|||
<el-table-column prop="2" label="账户余额" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.remain_money }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="3" label="累计总额/元" sortable="custom"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.total_money }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import GuipForm from '@/components/GuipForm.vue' |
|||
import DateSelect from '@/components/super/DateSelect.vue'; |
|||
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|||
|
|||
export default { |
|||
name: 'rank_detail', |
|||
props: { |
|||
pageTitle: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
rank_type: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
showDateSelect: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
components: { |
|||
DateSelect, |
|||
CustomDropdown |
|||
}, |
|||
data() { |
|||
return { |
|||
viewDesc:{ |
|||
'month':'月份', |
|||
'monthTwo':'月份', |
|||
'year':'年份', |
|||
}, |
|||
rank_type_desc:{ |
|||
1:'毛利润/元', |
|||
2:'订单数', |
|||
3:'退单数', |
|||
}, |
|||
aid:0, |
|||
ver_type:0, |
|||
check_type:0, |
|||
showfilterTitle:false, |
|||
filterTitle:"", |
|||
view:'year', |
|||
onlyYear:true, |
|||
dataRank:'', |
|||
text:'',//下拉框显示具体文案 |
|||
selectedDate:new Date(),//默认当天日期 |
|||
tableData: [], |
|||
total_value: 0, |
|||
tableData1: [], |
|||
top_list: [], |
|||
growth_list: [], |
|||
show_detail_index: 0, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init() |
|||
}, |
|||
computed: { |
|||
}, |
|||
watch: { |
|||
'$route'() { |
|||
this.init() |
|||
} |
|||
}, |
|||
methods: { |
|||
init(){ |
|||
if(this.showDateSelect){ |
|||
this.text = this.getNowYear()//初始赋值 |
|||
} |
|||
this.dataRank = this.rank_type |
|||
this.aid = this.$route.query.aid |
|||
this.ver_type = this.$route.query.ver_type |
|||
this.check_type = this.$route.query.check_type |
|||
if(this.$route.query.date) this.text = this.$route.query.date |
|||
if(this.$route.query.rank_type) this.dataRank = this.$route.query.rank_type |
|||
if(Object.keys(this.$route.query).length > 0) this.showfilterTitle = true |
|||
|
|||
if(this.type == 'agentnew'){ |
|||
this.getAgentNew() |
|||
return |
|||
} |
|||
|
|||
this.getRankingDetail() |
|||
}, |
|||
handleUpdateView(newView) { |
|||
this.view = newView; |
|||
}, |
|||
getNowYear(){ |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const currentYearMonth = `${year}`; |
|||
return `${currentYearMonth}` |
|||
}, |
|||
getDate(dateStr){ |
|||
const date = new Date(dateStr); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
if(this.view == 'year'){ |
|||
return `${year}` |
|||
}else{ |
|||
return `${year}-${month}` |
|||
} |
|||
}, |
|||
handleDateChange(date) { |
|||
this.text = this.getDate(date) |
|||
this.selectedDate = date; |
|||
localStorage.setItem('date',JSON.stringify(date)) |
|||
|
|||
this.$refs.dropdownRef.closeDropdown(); |
|||
this.getRankingDetail() |
|||
}, |
|||
goLookMoreData(date) { |
|||
let query = {} |
|||
query.date = date |
|||
query.rank_type = this.dataRank |
|||
query.type = 'agent' |
|||
window.open(this.$router.resolve({ |
|||
path: '/super/ranking/list', |
|||
query: query |
|||
}).href, '_blank') |
|||
}, |
|||
closePop(row,type){ |
|||
row[type + '_popover'] = false; // 关闭弹框 |
|||
}, |
|||
handleClick(row, index, type) { |
|||
// 关闭其他行的弹框 |
|||
this.tableData.forEach((item, i) => { |
|||
if (i !== index) { |
|||
item[type + '_popover'] = false; |
|||
} |
|||
}); |
|||
// 打开当前行的弹框 |
|||
row[type + '_popover'] = true; |
|||
this.getRankingList({date:row.value_1}); |
|||
}, |
|||
popshow() { |
|||
var ariaEls = document.querySelectorAll('.el-popover') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
|
|||
ariaEls = document.querySelectorAll('.el-radio__original') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
}, |
|||
handleSortChange({ prop, order }) { |
|||
this.currentPage = 1; |
|||
|
|||
let sortBy = 0; |
|||
let sortOrder = 0; |
|||
if (order == 'ascending') { |
|||
sortBy = prop; |
|||
sortOrder = 1; |
|||
} |
|||
if (order == 'descending') { |
|||
sortBy = prop; |
|||
sortOrder = 2; |
|||
} |
|||
if(this.type == 'agentnew'){ |
|||
this.getAgentNew({ sortBy: sortBy, sortOrder: sortOrder }) |
|||
return |
|||
} |
|||
this.getRankingDetail({ sortBy: sortBy, sortOrder: sortOrder }) |
|||
}, |
|||
handleRowHover(row) { |
|||
this.show_detail_index = row.sort |
|||
}, |
|||
getRankingDetail(obj) { |
|||
const that = this |
|||
that.tableData1 = [] |
|||
this.$http('POST', '/supernew/ajax_get_rank_detail', { |
|||
rank_type: that.dataRank, |
|||
aid:that.aid, |
|||
ver_type:that.ver_type, |
|||
check_type:that.check_type, |
|||
date: that.text, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.total_value = response.data.total_value |
|||
that.top_list = response.data.top_list |
|||
that.growth_list = response.data.growth_list |
|||
that.total = response.data.total |
|||
|
|||
if(that.showfilterTitle) that.filterTitle = response.data.title |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getRankingList(obj) { |
|||
const that = this |
|||
this.$http('POST', '/supernew/ajax_get_agent_rank_list', { |
|||
rank_type: that.dataRank, |
|||
cur_page: 1, |
|||
page_size: 5, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData1 = response.data.list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
getAgentNew(obj) { |
|||
const that = this |
|||
this.$http('POST', '/supernew/ajax_new_agent_list', { |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.growth-up{ |
|||
padding: 0 5px; |
|||
color:#22C55E; |
|||
} |
|||
.growth-down{ |
|||
padding: 0 5px; |
|||
color:#EF4444; |
|||
} |
|||
.growth-text{ |
|||
color:#9CA3AF; |
|||
padding-left: 5px; |
|||
} |
|||
.edit_icon{ |
|||
padding: 0 5px; |
|||
vertical-align: middle; |
|||
} |
|||
.demo-wrap { |
|||
width: 100%; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
|
|||
.detail_icon { |
|||
vertical-align: text-top; |
|||
padding-left: 5px; |
|||
} |
|||
|
|||
::v-deep .el-popover.el-popper { |
|||
padding: 20px; |
|||
} |
|||
.pop-wrap { |
|||
// width: 596px; |
|||
// height: 320px; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
// padding: 20px; |
|||
gap: 20px; |
|||
box-sizing: border-box; |
|||
|
|||
// background: #FFFFFF; |
|||
/* 阴影/常规阴影 */ |
|||
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|||
.pop-top { |
|||
h3 { |
|||
/* body/body 1_bold */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: 18px; |
|||
letter-spacing: 0.08em; |
|||
color: #1D2129; |
|||
margin: 0; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin-left: 12px; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #006AFF; |
|||
} |
|||
} |
|||
img{ |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,284 +0,0 @@ |
|||
<template> |
|||
<div class="demo-wrap min-flex-right"> |
|||
<div class="flex-between"> |
|||
<h2>总利润 - 年排行</h2> |
|||
<CustomDropdown :placeholder="text" width="280px"> |
|||
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
|||
</CustomDropdown> |
|||
</div> |
|||
<div class=" flex-common" id=""> |
|||
<el-form> |
|||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" |
|||
@cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="sort" label="排序" width="100"> |
|||
</el-table-column> |
|||
<!-- 其他列 --> |
|||
<el-table-column prop="value_1" label="年份" sortable="custom"> |
|||
</el-table-column> |
|||
<el-table-column prop="value_2" label="总利润/元" sortable="custom"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="代理商排行"> |
|||
<template v-slot="{ row, $index }"> |
|||
<el-popover v-model="row.id_popover" placement="top" trigger="manual" |
|||
:ref="`popover-${$index}`" @show="popshow"> |
|||
<div class="pop-wrap"> |
|||
<div class="flex-between flex pop-top"> |
|||
<h3>{{ row.id }} <span @click="goLookMoreData">查看更多</span></h3> |
|||
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
|||
</div> |
|||
<el-table :data="tableData1" style="width: 100%" @sort-change="handleSortChange" |
|||
@cell-mouse-enter="handleRowHover"> |
|||
<el-table-column prop="value_1" width="208" label="日期/月"></el-table-column> |
|||
<el-table-column prop="value_2" width="348" label="毛利润/元" |
|||
sortable="custom"></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 触发弹框的按钮 --> |
|||
<span v-if="profit_top_list[row.id]['name']" slot="reference" |
|||
@click="handleClick(row, $index, 'id')"> |
|||
No.1 {{ profit_top_list[row.id]['name'] }} <img v-if="show_detail_index == row.sort" |
|||
class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
|||
</span> |
|||
</el-popover> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|||
:total="tableData.length"> |
|||
</el-pagination> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import GuipForm from '@/components/GuipForm.vue' |
|||
import DateSelect from '@/components/super/DateSelect.vue'; |
|||
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|||
|
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
DateSelect, |
|||
CustomDropdown |
|||
}, |
|||
data() { |
|||
return { |
|||
viewDesc:{ |
|||
'month':'月份', |
|||
'monthTwo':'月份', |
|||
'year':'年份', |
|||
}, |
|||
view:'month', |
|||
currentPage: 1, //当前页 |
|||
pageSize: 20, //每页的容量 |
|||
total: 0, //列表总数 |
|||
text:'',//下拉框显示具体文案 |
|||
selectedDate:new Date(),//默认当天日期 |
|||
options_payword: [ |
|||
{ |
|||
label: '按篇', value: '0' |
|||
}, |
|||
{ |
|||
label: '按字符', value: '1' |
|||
}, |
|||
], |
|||
options: [ |
|||
{ label: '选项1', value: '1' }, |
|||
{ label: '选项2', value: '2' }, |
|||
{ label: '选项3', value: '3' }, |
|||
// 更多选项... |
|||
], |
|||
filteredOptions: this.options, |
|||
tableData: [ |
|||
], |
|||
tableData1: [], |
|||
profit_top_list: { |
|||
}, |
|||
show_detail_index: 0, |
|||
form: { |
|||
payword: '0', |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.text = this.getNowDate()//初始赋值 |
|||
this.getRankingData() |
|||
}, |
|||
computed: { |
|||
}, |
|||
methods: { |
|||
handleUpdateView(newView) { |
|||
this.view = newView; |
|||
}, |
|||
getNowDate(){ |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
|||
const currentYearMonth = `(${this.viewDesc[this.view]})${year}年${month}月`; |
|||
return `${currentYearMonth}` |
|||
}, |
|||
getDate(dateStr){ |
|||
const date = new Date(dateStr); |
|||
const year = date.getFullYear(); // 2025 |
|||
const month = date.getMonth() + 1; // 3 (表示3月) |
|||
if(this.view == 'year'){ |
|||
return `(${this.viewDesc[this.view]})${year}年` |
|||
}else{ |
|||
return `(${this.viewDesc[this.view]})${year}年${month}月` |
|||
} |
|||
}, |
|||
handleDateChange(date) { |
|||
this.text = this.getDate(date) |
|||
this.selectedDate = date; |
|||
localStorage.setItem('date',JSON.stringify(date)) |
|||
// 更新数据 |
|||
// this.getRankingData() |
|||
console.log('日期已更改:', date); |
|||
}, |
|||
goLookMoreData() { |
|||
this.$router.push('/') |
|||
}, |
|||
closePop(row,type){ |
|||
row[type + '_popover'] = false; // 关闭弹框 |
|||
|
|||
}, |
|||
handleClick(row, index, type) { |
|||
// 关闭其他行的弹框 |
|||
this.tableData.forEach((item, i) => { |
|||
if (i !== index) { |
|||
item[type + '_popover'] = false; |
|||
} |
|||
}); |
|||
// 打开当前行的弹框 |
|||
row[type + '_popover'] = true; |
|||
console.log(this.tableData,'this.tableData'); |
|||
}, |
|||
popshow() { |
|||
var ariaEls = document.querySelectorAll('.el-popover') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
|
|||
ariaEls = document.querySelectorAll('.el-radio__original') |
|||
ariaEls.forEach((item) => { |
|||
item.removeAttribute('aria-hidden') |
|||
}) |
|||
}, |
|||
handleSortChange({ prop, order }) { |
|||
this.currentPage = 1; |
|||
|
|||
let sortBy = 0; |
|||
let sortOrder = 0; |
|||
if (order == 'ascending') { |
|||
sortBy = prop; |
|||
sortOrder = 1; |
|||
} |
|||
if (order == 'descending') { |
|||
sortBy = prop; |
|||
sortOrder = 2; |
|||
} |
|||
this.getRankingData({ sortBy: sortBy, sortOrder: sortOrder }) |
|||
}, |
|||
handleRowHover(row) { |
|||
this.show_detail_index = row.sort |
|||
}, |
|||
getRankingData(obj) { |
|||
const that = this |
|||
this.$http('POST', this.reqUri + '/super/ajax_get_rank_detail', { |
|||
rank_type: 1, |
|||
cur_page: that.currentPage, |
|||
page_size: that.pageSize, |
|||
...obj |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.tableData = response.data.list |
|||
that.profit_top_list = response.data.top_list |
|||
that.total = response.data.total |
|||
}) |
|||
}) |
|||
.catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 列筛选 |
|||
filterHandler(value, row, column) { |
|||
// console.log(value, row, column,'======'); |
|||
const property = column['property']; |
|||
if (value == 0) { |
|||
return row[property] != value |
|||
} |
|||
return row[property] === value; |
|||
}, |
|||
// 自定义搜索筛选 |
|||
customFilter(keyword, options) { |
|||
if (!keyword) return options |
|||
return options.filter(item => { |
|||
// 自定义筛选逻辑 |
|||
return item.label.includes(keyword) || item.value.includes(keyword) |
|||
}) |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.demo-wrap { |
|||
width: 100%; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
|
|||
.detail_icon { |
|||
vertical-align: text-top; |
|||
} |
|||
|
|||
::v-deep .el-popover.el-popper { |
|||
padding: 20px; |
|||
} |
|||
.pop-wrap { |
|||
// width: 596px; |
|||
// height: 320px; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
// padding: 20px; |
|||
gap: 20px; |
|||
box-sizing: border-box; |
|||
|
|||
// background: #FFFFFF; |
|||
/* 阴影/常规阴影 */ |
|||
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|||
.pop-top { |
|||
h3 { |
|||
/* body/body 1_bold */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: 18px; |
|||
letter-spacing: 0.08em; |
|||
color: #1D2129; |
|||
margin: 0; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin-left: 12px; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #006AFF; |
|||
} |
|||
} |
|||
img{ |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue