Skip to content

S
SuperMan
Commit d5a17619 authored by 黄奎's avatar 黄奎
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/superman

parents 683eda57 bf886489
Hide whitespace changes
Inline Side-by-side
Showing with 898 additions and 3 deletions
src/App.vue
View file @ d5a17619
......@@ -10,7 +10,9 @@
</viewer>
<chosen-open-mode v-if="haveOpenMode" :settingSys="settingSys"></chosen-open-mode>
<!-- -->
<!-- <div class="showMyCareer">
<mycareer></mycareer>
</div> -->
</div>
</template>
......@@ -27,10 +29,12 @@ var sUserAgent = navigator.userAgent;
// document.html.style.minWidth = '1366px'
}
import chosenOpenMode from './components/commonPage/chosenOpenMode'
import mycareer from './components/champion/mycareer'
export default {
name: 'App',
components: {
chosenOpenMode
chosenOpenMode,
mycareer
},
created() {
//注册禁止后退，并且不做卸载
......@@ -124,6 +128,16 @@ export default {
.BMap_cpyCtrl {display: none;}
.anchorBL {display: none;}
.viewer{display: none !important;}
.showMyCareer{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,.3);
align-items: center;
justify-content: center;
z-index: 999999999999999;
}
</style>
src/components/champion/dashboard.vue 0 → 100644
View file @ d5a17619
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
score:{
type:Number,
default:0
},
title:{
type:String,
default:''
}
},
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let option = {
series: [
{
name: "ze",
type: "gauge",
radius: "99%", //仪表大小
// startAngle: 200, //开始角度
// endAngle: -20, //结束角度
min: 0,
max: 100,
splitNumber: 5,
data: [{ value: this.score, name: "ze" }],
axisLine: {
show: false,
lineStyle: {
color: [
[
(this.score/100),
new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: "#F7BF4Caa" },
{ offset: 1, color: "#F7BF4C00" }
])
],
[1, "#00000000"]
],
width: 25
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
//指针样式
length: "95%",
color: "#fff",
width: 0
},
title: {
show: false
},
detail: {
show: false
}
},
{
name: this.title,
type: "gauge",
radius: "100%", //仪表大小
// startAngle: 200, //开始角度
// endAngle: -20, //结束角度
min: 0,
max: 100,
splitNumber: 5,
data: [{ value: this.score, name: this.title}],
axisLine: {
show: false,
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.5, "#F7BF4C"], [0.8, "#F7BF4C"], [1, "#F7BF4C"]],
// shadowColor: "#F7BF4C",
// shadowBlur: 250,
width: 2
}
},
splitLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
// 属性lineStyle控制线条样式
color: "#F7BF4C66",
width: 1
}
},
axisLabel: {
show: false
},
pointer: {
//指针样式
length: "95%",
color: "#fff",
width: 3
},
title: {
show: true,
offsetCenter: [0, "80%"],
color: "#FFF",
fontSize: 14,
padding: 5,
fontFamily: "pingfangR"
},
detail: {
formatter: "{score|{value}}",
offsetCenter: [0, 0],
backgroundColor: "#000000",
shadowColor: "#F7BF4C88",
shadowBlur: 5,
borderRadius: 22,
width: 20,
rich: {
score: {
color: "#FFF",
fontSize: 22,
padding: 5,
fontFamily: "pingfangR"
}
}
}
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style scoped>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/champion/mycareer.vue 0 → 100644
View file @ d5a17619
<template>
<div class="mycareer">
<div class="title">
<div class="star"></div>
<div class="company-name">成都印象</div>
<div class="uerf">
<div class="dept-name">总部业务一组</div>
<div class="uer-name">唐萍</div>
</div>
<div class="post-name">销售经理</div>
</div>
<div class="uer-box">
<div class="photo">
<img src="http://imgfile.oytour.com/Upload/User/tangping.png" />
<div class="zezhao"></div>
<div class="bottom"></div>
</div>
<div class="my-score">
<div class="item">
<div class="k">综合能力</div>
<div class="v">95</div>
</div>
<div class="item">
<div class="k">周冠</div>
<div class="v">2</div>
</div>
<div class="item">
<div class="k">销售额排名</div>
<div class="v white">#13</div>
</div>
</div>
<div class="dashboards">
<div class="item">
<dashboard :score="67" title="名单开发"></dashboard>
</div>
<div class="item">
<dashboard :score="20" title="约访"></dashboard>
</div>
<div class="item">
<dashboard :score="40" title="探询需求"></dashboard>
</div>
<div class="item">
<dashboard :score="41" title="解决需求"></dashboard>
</div>
<div class="item">
<dashboard :score="80" title="说明成交"></dashboard>
</div>
<div class="item">
<dashboard :score="19" title="售后服务"></dashboard>
</div>
</div>
</div>
<div class="split"></div>
<div class="change-box">
<div class="btn dis">
<i class="el-icon-caret-left"></i>
</div>
<div class="option">每日数据</div>
<div class="btn">
<i class="el-icon-caret-right"></i>
</div>
</div>
<div class="data-box-before"></div>
<div class="data-box">
<div class="tab-head" ref="mycareerHead">
<table>
<thead>
<tr>
<th>日期</th>
<th>新增同行</th>
<th>IM广告</th>
<th>IM互动</th>
<th>IM时长</th>
<th>同行PV</th>
<th>外出时长</th>
<th>完成计划</th>
<th>拜访计划</th>
<th>拜访同行</th>
<th>拜访同行2</th>
<th>拜访同行3</th>
<th>拜访同行4</th>
<th>拜访同行5</th>
</tr>
</thead>
</table>
</div>
<div class="lft-head">
<table>
<thead>
<tr>
<th>时间</th>
</tr>
</thead>
</table>
</div>
<div class="lft-body" ref="mycareerLeft">
<table>
<tbody>
<tr>
<td class="odd">7月1日</td>
</tr>
<tr>
<td class="odd">7月2日</td>
</tr>
<tr>
<td class="odd">7月3日</td>
</tr>
<tr>
<td class="odd">7月4日</td>
</tr>
<tr>
<td class="odd">7月5日</td>
</tr>
<tr>
<td class="odd">7月6日</td>
</tr>
<tr>
<td class="odd">7月7日</td>
</tr>
<tr>
<td class="odd">7月8日</td>
</tr>
<tr>
<td class="odd">7月9日</td>
</tr>
<tr>
<td class="odd">7月10日</td>
</tr>
<tr>
<td class="odd">7月11日</td>
</tr>
<tr>
<td class="odd">7月12日</td>
</tr>
</tbody>
</table>
</div>
<div class="content-body" ref="mycareerContent">
<table>
<tbody>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import dashboard from "./dashboard";
export default {
components: {
dashboard
},
mounted() {
this.$refs.mycareerContent.addEventListener(
"scroll",
this.handleScroll,
true
);
},
methods: {
handleScroll() {
this.$refs.mycareerLeft.scrollTop = this.$refs.mycareerContent.scrollTop;
this.$refs.mycareerHead.scrollLeft = this.$refs.mycareerContent.scrollLeft;
}
}
};
</script>
<style scoped>
.mycareer {
height: 740px;
width: 1027px;
background: url("../../assets/img/champion/bg.png");
position: relative;
user-select: none;
cursor: default;
}
.mycareer .title {
width: 554px;
height: 69px;
background: url("../../assets/img/champion/title.png");
position: relative;
z-index: 2;
margin: 0 auto;
display: flex;
}
.mycareer .title .star {
position: absolute;
top: 21px;
left: 154px;
width: 244px;
height: 16px;
background: url("../../assets/img/champion/star.png");
}
.mycareer .title .company-name {
font-size: 18px;
color: rgba(255, 255, 255, 1);
background: linear-gradient(
0deg,
rgba(246, 134, 15, 1) 0%,
rgba(253, 207, 52, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: pingfangR;
margin-top: 17px;
width: 154px;
text-align: center;
}
.mycareer .title .uerf {
flex: 1;
margin-top: 12px;
}
.mycareer .title .uerf .dept-name {
height: 12px;
font-size: 12px;
color: #ffffff;
text-align: center;
margin-bottom: 4px;
}
.mycareer .title .uerf .uer-name {
background: linear-gradient(
0deg,
rgba(246, 134, 15, 1) 0%,
rgba(253, 207, 52, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 24px;
font-family: pingfangR;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.mycareer .title .post-name {
width: 156px;
text-align: center;
margin-top: 17px;
font-family: pingfangR;
font-size: 18px;
color: rgba(255, 255, 255, 1);
background: linear-gradient(
0deg,
rgba(163, 169, 164, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mycareer .uer-box {
margin-top: 13px;
display: flex;
}
.mycareer .uer-box .photo {
margin-left: 81px;
width: 240px;
height: 240px;
border-radius: 50%;
position: relative;
}
.mycareer .uer-box .photo img {
width: 240px;
height: 240px;
border-radius: 50%;
position: absolute;
/* top: 5px;
left: 5px; */
z-index: 2;
}
.mycareer .uer-box .photo .zezhao {
background: radial-gradient(
circle,
rgba(91, 52, 9, 0) 0%,
rgba(0, 0, 0, 1) 74%
);
width: 230px;
height: 230px;
z-index: 1;
position: absolute;
top: 5px;
left: 5px;
border-radius: 50%;
z-index: 3;
}
.mycareer .uer-box .photo .bottom {
width: 177px;
height: 63px;
left: 33px;
bottom: -29px;
position: absolute;
background: url("../../assets/img/champion/bottom.png");
z-index: 1;
}
.mycareer .uer-box .my-score {
margin-left: 38px;
}
.mycareer .uer-box .my-score .item {
margin-top: 27px;
}
.mycareer .uer-box .my-score .item .k {
font-family: pingfangR;
font-size: 14px;
color: rgba(255, 255, 255, 1);
background: linear-gradient(
0deg,
rgba(163, 169, 164, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mycareer .uer-box .my-score .item .v {
font-family: pingfangR;
font-size: 32px;
color: rgba(255, 255, 255, 1);
background: linear-gradient(
0deg,
rgba(246, 134, 15, 1) 0%,
rgba(253, 207, 52, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mycareer .uer-box .my-score .item .v.white {
background: linear-gradient(
0deg,
rgba(163, 169, 164, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mycareer .uer-box .dashboards {
margin-right: 50px;
flex: 1;
display: flex;
margin-left: 60px;
flex-wrap: wrap;
}
.mycareer .uer-box .dashboards .item {
width: 120px;
height: 120px;
margin-right: 40px;
margin-top: 25px;
}
.mycareer .split {
margin: 10px 33px 0 32px;
height: 27px;
background: url("../../assets/img/champion/split.png");
}
.mycareer .change-box {
width: 250px;
margin: 5px auto;
display: flex;
margin-bottom: 0px;
}
.mycareer .change-box .btn {
width: 35px;
height: 22px;
background: rgba(255, 179, 57, 1);
opacity: 0.8;
border-radius: 2px;
color: #fff;
cursor: pointer;
font-size: 12px;
line-height: 22px;
text-align: center;
box-shadow: 0 0 5px rgba(255, 179, 57, 0.8);
}
.mycareer .change-box .btn.dis {
background: #333;
cursor: no-drop;
color: #ddd;
box-shadow: 0 0 5px #333c;
}
.mycareer .change-box .option {
flex: 1;
text-align: center;
color: #ffffff;
font-size: 14px;
font-family: pingfangR;
height: 22px;
line-height: 22px;
}
.mycareer .data-box {
overflow: hidden;
position: absolute;
bottom: 39px;
top: 433px;
left: 33px;
right: 33px;
z-index: 2;
}
.mycareer .data-box .tab-head {
height: 43px;
overflow: hidden;
}
.mycareer .data-box .lft-head {
left: -1px;
top: 0;
width: 100px;
overflow: hidden;
right: unset;
height: 43px;
position: absolute;
background: url("../../assets/img/champion/head.png") no-repeat;
}
.mycareer .data-box .lft-body {
left: -1px;
top: 43px;
width: 100px;
bottom: 6px;
right: unset;
position: absolute;
overflow: hidden;
z-index: 3;
}
.mycareer .data-box .content-body {
left: -1px;
top: 43px;
right: 0;
bottom: 0px;
position: absolute;
overflow: auto;
z-index: 2;
margin: 0 2px;
}
.mycareer .data-box-before {
display: block;
position: absolute;
z-index: 1;
background: url("../../assets/img/champion/head.png") no-repeat;
height: 43px;
content: " ";
top: 433px;
left: 33px;
right: 33px;
}
.mycareer .data-box table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
.mycareer .data-box table thead th {
height: 43px;
padding-top: 10px;
box-sizing: border-box;
text-align: left;
padding-left: 10px;
font-size: 14px;
font-family: pingfangR;
color: rgba(255, 168, 53, 1);
min-width: 80px;
background: linear-gradient(
0deg,
rgba(163, 169, 164, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mycareer .data-box table thead th {
min-width: 100px;
max-width: 100px;
}
.mycareer .data-box table tbody td {
height: 30px;
line-height: 30px;
font-size: 12px;
color: rgba(255, 168, 53, 1);
background: linear-gradient(
0deg,
rgba(163, 169, 164, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: left;
padding-left: 10px;
min-width: 100px;
max-width: 100px;
}
.mycareer .data-box table tbody td.odd {
background: #1d160b;
color: #fff;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
.mycareer .data-box .content-body::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
border:1px solid rgba(161,154,147,1);
border-radius:5px;
background: transparent;
padding: 2px
}
.mycareer .data-box .content-body::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
height:4px;
width: 4px;
background:rgba(222,186,102,1);
border-radius:5px;
}
.mycareer .data-box .content-body::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius:5px;
background: transparent;
}
.mycareer .data-box .content-body::-webkit-scrollbar-corner{
color: transparent;
}
</style>
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