Commit e9d393ab authored by 黄媛媛's avatar 黄媛媛

业绩竞赛修改

parent 67247df6
@font-face{ @font-face{
font-family: 'pingfang'; font-family: 'pingfang';
src:url('../fonts/pingfang.woff2') format('woff'); src:url('../fonts/pingfang.woff2') format('woff');
...@@ -40,6 +41,13 @@ ...@@ -40,6 +41,13 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
@font-face {
font-family:'percomp';
src:url('../fonts/pingfang.woff2') format('truetype');
font-style: normal;
font-weight: normal;
}
@font-face{ @font-face{
font-family:'DIN'; font-family:'DIN';
src:url('../fonts/DIN.TTF') format('truetype'); src:url('../fonts/DIN.TTF') format('truetype');
......
src/assets/img/competion/quan1.png

118 KB | W: | H:

src/assets/img/competion/quan1.png

149 KB | W: | H:

src/assets/img/competion/quan1.png
src/assets/img/competion/quan1.png
src/assets/img/competion/quan1.png
src/assets/img/competion/quan1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/competion/quan2.png

155 KB | W: | H:

src/assets/img/competion/quan2.png

189 KB | W: | H:

src/assets/img/competion/quan2.png
src/assets/img/competion/quan2.png
src/assets/img/competion/quan2.png
src/assets/img/competion/quan2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/competion/quan3.png

84.9 KB | W: | H:

src/assets/img/competion/quan3.png

117 KB | W: | H:

src/assets/img/competion/quan3.png
src/assets/img/competion/quan3.png
src/assets/img/competion/quan3.png
src/assets/img/competion/quan3.png
  • 2-up
  • Swipe
  • Onion skin
<style> <style>
.PerCompetition{ .PerCompetition{
background: rgb(16,25,53); background: url('../../assets/img/competion/bg.png');
background-size:100% 100%;
padding:20px 8px; padding:20px 8px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family:'percomp';
} }
.PerCompetition::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{ .PerCompetition::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{
/*滚动条整体样式*/ /*滚动条整体样式*/
...@@ -36,12 +39,13 @@ ...@@ -36,12 +39,13 @@
} }
.PerCompetition .monthcol span{ .PerCompetition .monthcol span{
background: url('../../assets/img/competion/monthb.png'); background: url('../../assets/img/competion/monthb.png');
background-size:100% 100%; background-size:100% 95%;
display: inline-block; display: inline-block;
width: 114px; width: 114px;
height: 55px; height: 55px;
line-height: 45px;
text-align: center; text-align: center;
margin-right: 20px; margin-right: 50px;
font-size:30px; font-size:30px;
font-family:PangMenZhengDao; font-family:PangMenZhengDao;
font-weight:400; font-weight:400;
...@@ -51,7 +55,13 @@ ...@@ -51,7 +55,13 @@
} }
.PerCompetition .monthcol .active{ .PerCompetition .monthcol .active{
background: url('../../assets/img/competion/montha.png')!important; background: url('../../assets/img/competion/montha.png')!important;
background-size:100% 100%!important; background-size:100% 95%!important;
color: #fff;
text-shadow:0 0 5px #fff,
-0 -0 5px #fff;
}
.PerCompetition .Textshadow{
text-shadow:0 0 3px #fff;
} }
.PerCompetition .Pingbi{ .PerCompetition .Pingbi{
height: 482px; height: 482px;
...@@ -70,9 +80,9 @@ ...@@ -70,9 +80,9 @@
margin:0 auto; margin:0 auto;
margin-top: 10px; margin-top: 10px;
background: url('../../assets/img/competion/phtoprank.png') bottom no-repeat; background: url('../../assets/img/competion/phtoprank.png') bottom no-repeat;
background-size:contain; /* background-size:contain; */
position: relative; position: relative;
background-position: 0 247px; /* background-position: 0 247px; */
} }
.PerCompetition .Pingbi .rankDiv .imgDiv1{ .PerCompetition .Pingbi .rankDiv .imgDiv1{
...@@ -136,17 +146,17 @@ ...@@ -136,17 +146,17 @@
} }
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan1{ .PerCompetition .Pingbi .rankDiv .imgDiv .desSpan1{
background: #fff; background: #fff;
box-shadow: 0 0 5px 0 #fff; box-shadow: 0 0 5px 2px #fff;
} }
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan2{ .PerCompetition .Pingbi .rankDiv .imgDiv .desSpan2{
background: #FFF029; background: #FFF029;
box-shadow: 0 0 5px 0 #FFF029; box-shadow: 0 0 5px 2px#FFF029;
} }
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan3{ .PerCompetition .Pingbi .rankDiv .imgDiv .desSpan3{
background: #F5DBC0; background: #F5DBC0;
box-shadow: 0 0 5px 0 #F5DBC0; box-shadow: 0 0 5px 2px #F5DBC0;
} }
.PerCompetition .zousi{ .PerCompetition .zousi{
...@@ -188,7 +198,7 @@ ...@@ -188,7 +198,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.PerCompetition .grPingbi .grDiv{ .PerCompetition .grPingbi .grDiv{
background: url('../../assets/img/competion/grdiv.png'); /* background: url('../../assets/img/competion/grdiv.png'); */
background-size:100% 100%; background-size:100% 100%;
width: 95%; width: 95%;
margin:10px auto; margin:10px auto;
...@@ -346,6 +356,14 @@ ...@@ -346,6 +356,14 @@
border-radius: 50%; border-radius: 50%;
margin-top: 2%; margin-top: 2%;
} }
.PerCompetition .Pingbi .rankDiv .imgDiv .Paiming{
text-shadow:0 0 3px #fff;
}
.PerCompetition .bold{
font-weight: 500;
}
</style> </style>
<template> <template>
<div class="PerCompetition" v-loading="loading" element-loading-background="rgba(2,60,160,0.3)"> <div class="PerCompetition" v-loading="loading" element-loading-background="rgba(2,60,160,0.3)">
...@@ -356,8 +374,8 @@ ...@@ -356,8 +374,8 @@
<span @click="ChangeMoth(12)" :class="monthactive==12?'active':''">12月</span> <span @click="ChangeMoth(12)" :class="monthactive==12?'active':''">12月</span>
</el-col> </el-col>
<el-col :span="8" style="color:#fff;text-align:center"> <el-col :span="8" style="color:#fff;text-align:center">
<p style="font-size:34px;padding-top:10px">2019印象集团杯业绩竞赛</p> <p class="bold" style="font-size:34px;padding-top:10px;font-family:'percomp';">2019印象集团杯业绩竞赛</p>
<p style="font-size:14px">Performance Competition</p> <p style="font-size:14px;font-family:'percomp';">PERFORMANCE COPETITION</p>
</el-col> </el-col>
</el-row> </el-row>
<!-- A组 --> <!-- A组 -->
...@@ -366,17 +384,21 @@ ...@@ -366,17 +384,21 @@
<div class="Pingbi"> <div class="Pingbi">
<el-row style="padding-top:15px"> <el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px"> <el-col :span="8" style="margin-top:10px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体月冠亚季评比</span> <span class="bold" style="color:#fff;font-size:22px">团体月冠亚季评比</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">A组</p> <p class="Textshadow" style="color:#FA9801;font-size:26px;text-align:center">A组</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="rankDiv"> <el-row class="rankDiv">
<el-col :span="7" style="text-align:center"> <el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depAList" :key="index" v-if="index==1" class="imgDiv imgDiv1"> <div v-for="(item,index) in depAList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg"> <!-- <img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg"> -->
<div class="Paiming" style="color:#FFFFFF">
<p style="font-size:26px;padding-top:10px">NO.2</p>
<p style="font-size:16px">{{item.BranchName}}</p>
</div>
<div class="desDiv"> <div class="desDiv">
<span class="desSpan desSpan1"> <span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p> <p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
...@@ -389,7 +411,11 @@ ...@@ -389,7 +411,11 @@
</el-col> </el-col>
<el-col :span="10" style="text-align:center"> <el-col :span="10" style="text-align:center">
<div v-for="(item,index) in depAList" :key="index" v-if="index==0" class="imgDiv imgDiv2"> <div v-for="(item,index) in depAList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg"> <!-- <img :src="item.Photo" alt="" :onerror="defaultImg"> -->
<div class="Paiming" style="color:#FFF029">
<p style="font-size:30px">NO.1</p>
<p style="font-size:18px">{{item.BranchName}}</p>
</div>
<div class="desDiv" style="bottom:-8px"> <div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2"> <span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p> <p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
...@@ -401,7 +427,11 @@ ...@@ -401,7 +427,11 @@
</el-col> </el-col>
<el-col :span="7" style="text-align:center"> <el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depAList" :key="index" v-if="index==2" class="imgDiv imgDiv3"> <div v-for="(item,index) in depAList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:9%" :src="item.Photo" alt="" :onerror="defaultImg"> <!-- <img style="margin-top:9%" :src="item.Photo" alt="" :onerror="defaultImg"> -->
<div class="Paiming" style="color:#F5DBC0">
<p style="font-size:24px;padding-top:10px">NO.3</p>
<p style="font-size:14px">{{item.BranchName}}</p>
</div>
<div class="desDiv"> <div class="desDiv">
<span class="desSpan desSpan3"> <span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p> <p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
...@@ -418,8 +448,8 @@ ...@@ -418,8 +448,8 @@
<el-col class="zousi" :span="11"> <el-col class="zousi" :span="11">
<el-row style="padding-top:15px"> <el-row style="padding-top:15px">
<el-col :span="7" style="margin-top:10px"> <el-col :span="7" style="margin-top:10px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体业绩走势</span> <span class="bold" style="color:#fff;font-size:22px">团体业绩走势</span>
</el-col> </el-col>
<el-col :span="16" style="margin-top: 18px;"> <el-col :span="16" style="margin-top: 18px;">
<span :class="`zouTitle${index}`" v-for="(item,index) in depATrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px"> <span :class="`zouTitle${index}`" v-for="(item,index) in depATrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
...@@ -437,18 +467,22 @@ ...@@ -437,18 +467,22 @@
<el-col :span="13" style="padding:0 8px;box-sizing:border-box"> <el-col :span="13" style="padding:0 8px;box-sizing:border-box">
<div class="Pingbi"> <div class="Pingbi">
<el-row style="padding-top:15px"> <el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px;overflow:hidden"> <el-col :span="8" style="margin-top:10px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体月冠亚季评比</span> <span class="bold" style="color:#fff;font-size:22px">团体月冠亚季评比</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<p style="color:#FA9801;font-size:26px;text-align:center">B组</p> <p class="Textshadow" style="color:#FA9801;font-size:26px;text-align:center">B组</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="rankDiv"> <el-row class="rankDiv">
<el-col :span="7" style="text-align:center"> <el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depBList" :key="index" v-if="index==1" class="imgDiv imgDiv1"> <div v-for="(item,index) in depBList" :key="index" v-if="index==1" class="imgDiv imgDiv1">
<img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg"> <!-- <img style="margin-top:10%" :src="item.Photo" alt="" :onerror="defaultImg"> -->
<div class="Paiming" style="color:#FFFFFF">
<p style="font-size:26px;padding-top:10px">NO.2</p>
<p style="font-size:16px">{{item.BranchName}}</p>
</div>
<div class="desDiv"> <div class="desDiv">
<span class="desSpan desSpan1"> <span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p> <p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
...@@ -461,7 +495,11 @@ ...@@ -461,7 +495,11 @@
</el-col> </el-col>
<el-col :span="10" style="text-align:center"> <el-col :span="10" style="text-align:center">
<div v-for="(item,index) in depBList" :key="index" v-if="index==0" class="imgDiv imgDiv2"> <div v-for="(item,index) in depBList" :key="index" v-if="index==0" class="imgDiv imgDiv2">
<img :src="item.Photo" alt="" :onerror="defaultImg"> <!-- <img :src="item.Photo" alt="" :onerror="defaultImg"> -->
<div class="Paiming" style="color:#FFF029">
<p style="font-size:30px">NO.1</p>
<p style="font-size:18px">{{item.BranchName}}</p>
</div>
<div class="desDiv" style="bottom:-8px"> <div class="desDiv" style="bottom:-8px">
<span class="desSpan desSpan2"> <span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p> <p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
...@@ -471,9 +509,13 @@ ...@@ -471,9 +509,13 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="7" style="text-align:center;"> <el-col :span="7" style="text-align:center">
<div v-for="(item,index) in depBList" :key="index" v-if="index==2" class="imgDiv imgDiv3"> <div v-for="(item,index) in depBList" :key="index" v-if="index==2" class="imgDiv imgDiv3">
<img style="margin-top:9%" :src="item.Photo" alt="" :onerror="defaultImg"> <!-- <img style="margin-top:9%" :src="item.Photo" alt="" :onerror="defaultImg"> -->
<div class="Paiming" style="color:#F5DBC0">
<p style="font-size:24px;padding-top:10px">NO.3</p>
<p style="font-size:14px">{{item.BranchName}}</p>
</div>
<div class="desDiv"> <div class="desDiv">
<span class="desSpan desSpan3"> <span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p> <p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
...@@ -485,15 +527,16 @@ ...@@ -485,15 +527,16 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</el-col> </el-col>
<el-col class="zousi" :span="11"> <el-col class="zousi" :span="11">
<el-row style="padding-top:15px"> <el-row style="padding-top:15px">
<el-col :span="7" style="margin-top:10px"> <el-col :span="7" style="margin-top:10px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体业绩走势</span> <span class="bold" style="color:#fff;font-size:22px">团体业绩走势</span>
</el-col> </el-col>
<el-col :span="16" style="margin-top: 18px;"> <el-col :span="16" style="margin-top: 18px;">
<span :class="`zouTitleB${index}`" v-for="(item,index) in depBTrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px"> <span :class="`zouTitle${index}`" v-for="(item,index) in depBTrendList" :key="index+50" style="color:#fff;font-size:12px;margin-right:15px">
<span class="colorSpan"></span> <span class="colorSpan"></span>
<span>{{item.DepName}}:总收客</span> <span>{{item.DepName}}:总收客</span>
<span style="color:#FA9801;">{{item.TotalNum}}</span> <span style="color:#FA9801;">{{item.TotalNum}}</span>
...@@ -505,10 +548,10 @@ ...@@ -505,10 +548,10 @@
</el-row> </el-row>
<!-- 个人评比 --> <!-- 个人评比 -->
<el-row v-if="GRList.length>0" class="grPingbi" style="margin-top:20px;margin-left:8px"> <el-row class="grPingbi" style="margin-top:20px;margin-left:8px">
<div style="margin-top:10px"> <div style="margin-top:10px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">个人评比</span> <span class="bold" style="color:#fff;font-size:26px">个人评比</span>
</div> </div>
<div class="grDiv"> <div class="grDiv">
...@@ -551,8 +594,8 @@ ...@@ -551,8 +594,8 @@
<el-col :span="17" style="padding:0 8px;box-sizing:border-box"> <el-col :span="17" style="padding:0 8px;box-sizing:border-box">
<div class="xinren" style="min-height:372px;"> <div class="xinren" style="min-height:372px;">
<div style="padding-top:20px"> <div style="padding-top:20px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">新人月冠亚季评比</span> <span class="bold" style="color:#fff;font-size:26px">新人月冠亚季评比</span>
</div> </div>
<div style="box-sizing:border-box"> <div style="box-sizing:border-box">
<el-row style="padding:0 20px;box-sizing:border-box"> <el-row style="padding:0 20px;box-sizing:border-box">
...@@ -598,8 +641,8 @@ ...@@ -598,8 +641,8 @@
</el-col> </el-col>
<el-col class="monthbg" :span="7" style="height:372px"> <el-col class="monthbg" :span="7" style="height:372px">
<div style="margin-top:30px"> <div style="margin-top:30px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt=""> <img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">月度对比</span> <span class="bold" style="color:#fff;font-size:26px">月度对比</span>
</div> </div>
<el-row style="margin-top:20px"> <el-row style="margin-top:20px">
<el-col :span="18" style="padding-left:20px"> <el-col :span="18" style="padding-left:20px">
...@@ -759,6 +802,12 @@ export default { ...@@ -759,6 +802,12 @@ export default {
title: { title: {
color:"#2C3343" color:"#2C3343"
}, },
grid: {
        left: '4%',   //距离左边的距离
        right: '6%', //距离右边的距离
        top: '12%', //距离上边的距离
bottom:'5%',
       },
// 提示框 // 提示框
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -784,9 +833,15 @@ export default { ...@@ -784,9 +833,15 @@ export default {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// 设置x轴颜色 // 设置x轴颜色
color: '#DADADA' color: '#023CA0',
} }
}, },
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
data:that.depAXser data:that.depAXser
}, },
yAxis: { yAxis: {
...@@ -794,9 +849,16 @@ export default { ...@@ -794,9 +849,16 @@ export default {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// 设置y轴颜色 // 设置y轴颜色
color: '#DADADA', color: '#023CA0',
} }
}, },
axisLabel:{
textStyle:{
color: '#DADADA',
},
padding:[0, 0, 10, 0],
},
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
...@@ -820,6 +882,12 @@ export default { ...@@ -820,6 +882,12 @@ export default {
title: { title: {
color:"#2C3343" color:"#2C3343"
}, },
grid: {
        left: '4%',   //距离左边的距离
        right: '6%', //距离右边的距离
bottom:'5%',
        top: '12%' //距离上边的距离
       },
// 提示框 // 提示框
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -843,10 +911,15 @@ export default { ...@@ -843,10 +911,15 @@ export default {
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// 设置x轴颜色 // 设置y轴颜色
color: '#DADADA' color: '#023CA0',
} }
}, },
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
data:that.depBXser data:that.depBXser
}, },
yAxis: { yAxis: {
...@@ -854,9 +927,14 @@ export default { ...@@ -854,9 +927,14 @@ export default {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// 设置y轴颜色 // 设置y轴颜色
color: '#DADADA', color: '#023CA0',
} }
}, },
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
......
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