Skip to content

S
SuperMan
Commit b6fc973c authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

no message

parent 9c98772e
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 4 deletions
src/components/SalesModule/saleRnk.vue
View file @ b6fc973c
<style> <style>
.saleRankDialog{}
.saleRankDialog .top{ .saleRankDialog .top{
height: 340px;
background: url(../../assets/img/saleRank/bg.png)
}
.saleRankDialog .top .top_info{
display: flex;
justify-content: center;
padding-top: 40px;
}
.saleRankDialog .top .top_info .head,.saleRankDialog .bottom ._item .head{
width: 80px;
height: 80px;
border: 2px solid #F9DA49;
border-radius: 50%;
position: relative;
}
.saleRankDialog .top .top_info .head >.head_img,.saleRankDialog .bottom ._item .head>.head_img{
width: 76px;
height: 76px;
border-radius: 50%;
}
.saleRankDialog .top .top_info .head >.head_guan,.saleRankDialog .bottom ._item .head>.head_guan{
position: absolute;
left: -15px;
top: -24px;
}
.saleRankDialog .bottom ._item .head{
width: 40px;
height: 40px;
}
.saleRankDialog .bottom ._item .head>.head_img{
width: 36px;
height: 36px;
}
.saleRankDialog .bottom ._item .head>.head_guan{
left: -8px;
top: -12px;
}
.saleRankDialog .bottom ._item .head.num_two{
border-color: #BDC8DB;
}
.saleRankDialog .bottom ._item .head.num_tree{
border-color: #BAA3A3;
}
.saleRankDialog .top{
color: #FFFFFF;
font-size: 14px;
text-align: center;
}
.saleRankDialog .top ._name{
margin-top: 13px
}
.saleRankDialog .top ._rank{
color: #FFFFFF;
font-size: 30px;
margin-top: 20px
}
.saleRankDialog .top .top_money{
padding: 25px 0 ;
}
.saleRankDialog .top .top_money ._num{
color: #F1A131;
font-size: 24px;
margin-top: 5px;
}
.saleRankDialog .top .top_money .left{
border-right: 2px solid rgba(233,233,233,.5);
}
.saleRankDialog .top .top_money .right{
border-left: 2px solid rgba(233,233,233,.5);
}
.saleRankDialog .bottom{
padding: 0 30px;
background-color: white;
}
.saleRankDialog .bottom ._time {
text-align: center;
padding: 20px 0;
}
.saleRankDialog .bottom ._item ._item_left{
display: flex;
align-items: center;
}
.saleRankDialog .bottom ._time ._time_num{
display: inline-block;
text-align: center;
line-height: 24px;
width: 30px;
height: 24px;
background: linear-gradient(-30deg,rgba(79,169,255,1),rgba(71,121,255,1));
color: white;
}
.saleRankDialog .bottom ._item{
padding: 15px 0;
border-top: 1px solid #F0F0F0;
display: flex;
align-items: center;
}
.saleRankDialog .bottom ._item ._jiangpai{
height: 26px;
display: inline-block;
margin-right: 18px;
}
.saleRankDialog .bottom ._item ._name{
color: #666666;
padding-left: 20px;
}
.saleRankDialog .bottom ._item ._money{
float: right;
color: #F1A131;
font-size: 16px;
flex: 2;
text-align: right;
}
.saleRankDialog .bottom ._company{
font-size: 12px;
color: #888888;
padding: 15px;
border-top: 1px solid #F0F0F0;
}
.saleRankDialog .bottom ._company span{
color: #333333;
display: inline-block;
margin-left: 20px;
}
.saleRankDialog .history>div{
background-color: #D0D0D0;
color: #E95252;
text-align: center;
height: 60px;
line-height: 60px;
}
.saleRankDialog .history>div span{
cursor: pointer;
} }
</style> </style>
<template> <template>
<el-row class="saleRankDialog"> <el-row class="saleRankDialog">
<el-row class="top"> <el-row class="top">
<img src="../../assets/img/saleRank/bg.png" alt=""> <div class="top_info">
<div class="head">
<img class="head_img" :src="detail.List[0].EmployeeImg" alt="">
<img class="head_guan" src="../../assets/img/saleRank/diyitou.png" alt="">
</div>
</div>
<p class="_name">{{detail.List[0].EmployeeName}}（{{detail.List[0].BranchName}}）</p>
<p class="_rank">小组赛第1名</p>
<el-row class="top_money">
<el-col :span="12" class="left">
<div>
<p>本期数据值</p>
<p class="_num">¥{{moneyFormat(detail.List[0].WeekTotalPrice)}}</p>
</div>
</el-col>
<el-col :span="12" class="right">
<div>
<p>累计数据值</p>
<p class="_num">¥{{moneyFormat(detail.List[0].TotalPrice)}}</p>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="bottom">
<el-row class="_time">
<p>销售排名时间： <span class="_time_num">{{detail.StartDateMonth}}</span> 月 <span class="_time_num">{{detail.StartDateDay}}</span> 日 - <span class="_time_num">{{detail.EndDateMonth}}</span> 月 <span class="_time_num">{{detail.EndDateDay}}</span> 日</p>
</el-row>
<template v-for="(item, index) in detail.List" v-if="index !== 0">
<el-row class="_item">
<div class="_item_left">
<img class="_jiangpai" :src="jiangpai[index-1].p" alt="">
<div class="head" :class="{'num_two': index === 1, 'num_tree': index === 2}">
<img class="head_img" :src="item.EmployeeImg" alt="">
<img v-if="index < 3" class="head_guan" :src="jiangpai[index-1].g" alt="">
</div>
<p class="_name">{{item.EmployeeName}}（{{item.BranchName}}）</p>
</div>
<p class="_money">¥{{moneyFormat(item.WeekTotalPrice)}}</p>
</el-row>
</template>
<el-row class="_company">
<el-col :span="10">
<p>公司名称 <span>成都微途科技有限公司</span></p>
</el-col>
<el-col :span="8">
<p>统计时间 <span>按出团时间统计</span></p>
</el-col>
<el-col :span="6"></el-col>
</el-row>
</el-row>
<el-row class="history">
<div>
<span @click="goUrl('saleRnkBefore')">往期排行 >></span>
</div>
</el-row> </el-row>
</el-row> </el-row>
</template> </template>
<script> <script>
export default { export default {
props:['detail'],
data(){ data(){
return { return {
list: [1,2,3,4],
jiangpai: [
{
p: require('../../assets/img/saleRank/jiangpai2.png'),
g: require('../../assets/img/saleRank/diertou.png')
},
{
p: require('../../assets/img/saleRank/jiangpai3.png'),
g: require('../../assets/img/saleRank/disantou.png')
},
{
p: require('../../assets/img/saleRank/jiangpai4.png'),
},
{
p: require('../../assets/img/saleRank/jiangpai5.png'),
},
]
} }
}, },
mounted(){ mounted(){
}, },
methods:{ methods:{
goUrl: function (path) {
this.$router.push({ name: path, query:{ tab: '往期排行'}})
this.$emit('closeChangeMachie')
}
} }
} }
</script> </script>
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