Skip to content

M
Muse
Commit e9d393ab authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

业绩竞赛修改

parent 67247df6
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 44 deletions
src/assets/global/font.css
View file @ e9d393ab
@font-face{
font-family: 'pingfang';
src:url('../fonts/pingfang.woff2') format('woff');
......@@ -40,6 +41,13 @@
font-style: 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-family:'DIN';
src:url('../fonts/DIN.TTF') format('truetype');
......
src/assets/img/competion/quan1.png
View replaced file @ 67247df6 View file @ e9d393ab
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
View replaced file @ 67247df6 View file @ e9d393ab
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
View replaced file @ 67247df6 View file @ e9d393ab
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
src/components/viitto/PerCompetition.vue
View file @ e9d393ab
<style>
.PerCompetition{
background: rgb(16,25,53);
background: url('../../assets/img/competion/bg.png');
background-size:100% 100%;
padding:20px 8px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
font-family:'percomp';
}
.PerCompetition::-webkit-scrollbar ,.content::-webkit-scrollbar,.el-cascader-menu::-webkit-scrollbar{
/*滚动条整体样式*/
......@@ -36,12 +39,13 @@
}
.PerCompetition .monthcol span{
background: url('../../assets/img/competion/monthb.png');
background-size:100% 100%;
background-size:100% 95%;
display: inline-block;
width: 114px;
height: 55px;
line-height: 45px;
text-align: center;
margin-right: 20px;
margin-right: 50px;
font-size:30px;
font-family:PangMenZhengDao;
font-weight:400;
......@@ -51,7 +55,13 @@
}
.PerCompetition .monthcol .active{
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{
height: 482px;
......@@ -70,9 +80,9 @@
margin:0 auto;
margin-top: 10px;
background: url('../../assets/img/competion/phtoprank.png') bottom no-repeat;
background-size:contain;
/* background-size:contain; */
position: relative;
background-position: 0 247px;
/* background-position: 0 247px; */
}
.PerCompetition .Pingbi .rankDiv .imgDiv1{
......@@ -136,17 +146,17 @@
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan1{
background: #fff;
box-shadow: 0 0 5px 0 #fff;
box-shadow: 0 0 5px 2px #fff;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan2{
background: #FFF029;
box-shadow: 0 0 5px 0 #FFF029;
box-shadow: 0 0 5px 2px#FFF029;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .desSpan3{
background: #F5DBC0;
box-shadow: 0 0 5px 0 #F5DBC0;
box-shadow: 0 0 5px 2px #F5DBC0;
}
.PerCompetition .zousi{
......@@ -188,7 +198,7 @@
box-sizing: border-box;
}
.PerCompetition .grPingbi .grDiv{
background: url('../../assets/img/competion/grdiv.png');
/* background: url('../../assets/img/competion/grdiv.png'); */
background-size:100% 100%;
width: 95%;
margin:10px auto;
......@@ -346,6 +356,14 @@
border-radius: 50%;
margin-top: 2%;
}
.PerCompetition .Pingbi .rankDiv .imgDiv .Paiming{
text-shadow:0 0 3px #fff;
}
.PerCompetition .bold{
font-weight: 500;
}
</style>
<template>
<div class="PerCompetition" v-loading="loading" element-loading-background="rgba(2,60,160,0.3)">
......@@ -356,8 +374,8 @@
<span @click="ChangeMoth(12)" :class="monthactive==12?'active':''">12月</span>
</el-col>
<el-col :span="8" style="color:#fff;text-align:center">
<p style="font-size:34px;padding-top:10px">2019印象集团杯业绩竞赛</p>
<p style="font-size:14px">Performance Competition</p>
<p class="bold" style="font-size:34px;padding-top:10px;font-family:'percomp';">2019印象集团杯业绩竞赛</p>
<p style="font-size:14px;font-family:'percomp';">PERFORMANCE COPETITION</p>
</el-col>
</el-row>
<!-- A组 -->
......@@ -366,17 +384,21 @@
<div class="Pingbi">
<el-row style="padding-top:15px">
<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="">
<span style="color:#fff;font-size:22px">团体月冠亚季评比</span>
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:22px">团体月冠亚季评比</span>
</el-col>
<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-row>
<el-row class="rankDiv">
<el-col :span="7" style="text-align:center">
<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">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
......@@ -389,7 +411,11 @@
</el-col>
<el-col :span="10" style="text-align:center">
<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">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
......@@ -401,7 +427,11 @@
</el-col>
<el-col :span="7" style="text-align:center">
<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">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
......@@ -418,8 +448,8 @@
<el-col class="zousi" :span="11">
<el-row style="padding-top:15px">
<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="">
<span style="color:#fff;font-size:22px">团体业绩走势</span>
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:22px">团体业绩走势</span>
</el-col>
<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">
......@@ -437,18 +467,22 @@
<el-col :span="13" style="padding:0 8px;box-sizing:border-box">
<div class="Pingbi">
<el-row style="padding-top:15px">
<el-col :span="8" style="margin-top:10px;overflow:hidden">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:22px">团体月冠亚季评比</span>
<el-col :span="8" style="margin-top:10px">
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:22px">团体月冠亚季评比</span>
</el-col>
<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-row>
<el-row class="rankDiv">
<el-col :span="7" style="text-align:center">
<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">
<span class="desSpan desSpan1">
<p style="font-weight:700;font-size:14px">NO.2 {{item.DepName}}</p>
......@@ -461,7 +495,11 @@
</el-col>
<el-col :span="10" style="text-align:center">
<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">
<span class="desSpan desSpan2">
<p style="font-weight:700;font-size:14px">NO.1 {{item.DepName}}</p>
......@@ -471,9 +509,13 @@
</div>
</div>
</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">
<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">
<span class="desSpan desSpan3">
<p style="font-weight:700;font-size:14px">NO.3 {{item.DepName}}</p>
......@@ -485,15 +527,16 @@
</el-col>
</el-row>
</div>
</el-col>
<el-col class="zousi" :span="11">
<el-row style="padding-top:15px">
<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="">
<span style="color:#fff;font-size:22px">团体业绩走势</span>
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:22px">团体业绩走势</span>
</el-col>
<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>{{item.DepName}}：总收客</span>
<span style="color:#FA9801;">{{item.TotalNum}}</span>
......@@ -505,10 +548,10 @@
</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">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">个人评比</span>
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:26px">个人评比</span>
</div>
<div class="grDiv">
......@@ -551,8 +594,8 @@
<el-col :span="17" style="padding:0 8px;box-sizing:border-box">
<div class="xinren" style="min-height:372px;">
<div style="padding-top:20px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">新人月冠亚季评比</span>
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:26px">新人月冠亚季评比</span>
</div>
<div style="box-sizing:border-box">
<el-row style="padding:0 20px;box-sizing:border-box">
......@@ -598,8 +641,8 @@
</el-col>
<el-col class="monthbg" :span="7" style="height:372px">
<div style="margin-top:30px">
<img style="width:13%;margin-left:10px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span style="color:#fff;font-size:26px">月度对比</span>
<img style="width:13%;margin:0 8px 0 20px;max-width: 50px;" src="../../assets/img/competion/row.png" alt="">
<span class="bold" style="color:#fff;font-size:26px">月度对比</span>
</div>
<el-row style="margin-top:20px">
<el-col :span="18" style="padding-left:20px">
......@@ -759,6 +802,12 @@ export default {
title: {
color:"#2C3343"
},
grid: {
        left: '4%',   //距离左边的距离
        right: '6%', //距离右边的距离
        top: '12%', //距离上边的距离
bottom:'5%',
       },
// 提示框
tooltip: {
trigger: 'axis',
......@@ -783,10 +832,16 @@ export default {
boundaryGap: false,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#DADADA'
// 设置x轴颜色
color: '#023CA0',
}
},
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
data:that.depAXser
},
yAxis: {
......@@ -794,9 +849,16 @@ export default {
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
color: '#023CA0',
}
},
axisLabel:{
textStyle:{
color: '#DADADA',
},
padding:[0, 0, 10, 0],
},
splitLine:{
show:true,
lineStyle:{
......@@ -820,6 +882,12 @@ export default {
title: {
color:"#2C3343"
},
grid: {
        left: '4%',   //距离左边的距离
        right: '6%', //距离右边的距离
bottom:'5%',
        top: '12%' //距离上边的距离
       },
// 提示框
tooltip: {
trigger: 'axis',
......@@ -843,10 +911,15 @@ export default {
boundaryGap: false,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#DADADA'
// 设置y轴颜色
color: '#023CA0',
}
},
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
data:that.depBXser
},
yAxis: {
......@@ -854,9 +927,14 @@ export default {
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#DADADA',
color: '#023CA0',
}
},
axisLabel:{
textStyle:{
color: '#DADADA',
},
},
splitLine:{
show:true,
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