Skip to content

S
SuperMan
Commit 84491924 authored by 罗超's avatar 罗超
Browse files
Options

新增个人中心

parent 679e0c1d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1743 additions and 46 deletions
src/App.vue
View file @ 84491924
......@@ -113,7 +113,7 @@ export default {
}
</script>
<style>
@import "//at.alicdn.com/t/font_635492_9ent0ufu6e.css";
@import "//at.alicdn.com/t/font_635492_7l7pdpshnqc.css";
@import "./assets/css/Semibold.css";
@import "./assets/css/global/config.css";
@import "./assets/css/fileIcon.css";
......
src/components/index.vue
View file @ 84491924
......@@ -96,6 +96,11 @@
</div>
</div>
</el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" @click.native="goUrlT('personalCenter',0,'')">
<i class="iconfont icon-yichuheimingdan" style="color:#27ae60"></i>
个人中心
<i class="iconfont icon-right1"></i>
</el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" v-if='firstMenuList.indexOf("财务单")!==-1' @click.native="goUrlT('FinancialDocuments',3,'财务单据')">
<i class="iconfont icon-nav-caiwu" style="color:#8e44ad"></i>
财务单
......
src/components/personalCenter.vue
View file @ 84491924
This diff is collapsed.
src/components/personalCenter/cloud.vue 0 → 100644
View file @ 84491924
<template>
<div class="cloud-c">
<div class="txt">已使用 506.83MB / 1GB</div>
<div class="progress">
<el-tooltip class="item" effect="dark" content="图片文件占用：25.6%" placement="top">
<div class="item green" style="width:25.6%"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="视频文件占用：7.4%" placement="top">
<div class="item yellow" style="width:7.4%"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="其他文件占用：15%" placement="top">
<div class="item red" style="width:15%"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="音频文件占用：2.03%" placement="top">
<div class="item blue" style="width:2.03%"></div>
</el-tooltip>
</div>
<div class="tuli">
<div class="item">
<span class="icon green"></span>图片
</div>
<div class="item">
<span class="icon yellow"></span>视频
</div>
<div class="item">
<span class="icon blue"></span>音频
</div>
<div class="item">
<span class="icon red"></span>其他文件
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.cloud-c .txt {
font-size: 12px;
color: #a2a4a7;
text-align: right;
margin-bottom: 14px;
}
.cloud-c .progress {
height: 18px;
background: rgba(241, 242, 247, 1);
border-radius: 4px;
display: flex;
overflow: hidden;
}
.cloud-c .progress .item {
height: 18px;
}
.cloud-c .progress .item:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.cloud-c .tuli {
display: flex;
margin-top: 55px;
}
.cloud-c .tuli .item {
flex: 1;
font-size: 12px;
color: #c1c6dd;
}
.cloud-c .tuli .item .icon {
width: 12px;
height: 12px;
border-radius: 3px;
margin-right: 10px;
display: inline-block;
}
.cloud-c .green {
background: rgba(52, 191, 163, 1);
}
.cloud-c .yellow {
background: rgba(255, 184, 34, 1);
}
.cloud-c .red {
background: rgba(253, 57, 149, 1);
}
.cloud-c .blue {
background: rgba(93, 120, 255, 1);
}
</style>
src/components/personalCenter/fince.vue
View file @ 84491924
......@@ -21,21 +21,11 @@ export default {
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19"
"15"
];
var data = [220, 182, 191, 234, 290, 330, 310, 100, 30, 60, 650];
var data2 = [130, 202, 101, 500, 10, 220, 310, 98, 17, 52, 360];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
var data2 = [130, 202, 500, 200, 220, 310, 360];
let option = {
backgroundColor: "#fd397a", //"#19133e6e",
backgroundColor: "#0abb87", //"#19133e6e",
title: {
show: false
},
......@@ -50,6 +40,7 @@ export default {
interval: 0,
show: false
},
type : 'category',
axisTick: {
show: false
},
......@@ -74,14 +65,14 @@ export default {
splitLine: {
show: false
},
interval: 1000,
max: 1000,
interval: 600,
max: 600,
min: 0,
splitNumber: 5
},
grid: {
left: -30,
right: -30,
left: -45,
right: -45,
top: 0,
bottom: 0
},
......@@ -97,18 +88,20 @@ export default {
},
series: [
{
name: "同行浏览与分享",
name: "收款",
type: "line",
smooth: false,
symbol: "none",
symbol: "circle",
symbolSize: 4,
itemStyle: {
normal: {
lineStyle: {
color: "#e63a5e"
color: "#1EA87F"
},
areaStyle: {
color: "#e14c86"
}
color: "#20CC99"
},
color:"#1EA87F"
}
},
data: data2
......
src/components/personalCenter/gonggao.vue 0 → 100644
View file @ 84491924
<template>
<div class="ad">
<div class="content">
为逐步规范资金管理，贯彻落实公司制定的货币资金管理制度，从机制上保证资金安全，确保现金合理通畅运行。现就武汉西安昆明人民币指定收款账户作以下规范。各办事处每日下班前应将收到的人民币现金全额存入公司指定账户，以便核对各办事处收款情况；并报送相应现金收支日报表给总部分公司分管会计。具体分配详见附件
<div class="user">何娟</div>
<div class="time">2019-07-05</div>
</div>
<div class="foot">
<div class="lt">
<div>附件：</div>
<div class="v">
<a href="javascript:void(0);">关于库存现金管理的通知.jpg</a>
</div>
</div>
<div class="rt">
<span class="disable">
<i class="iconfont icon-xingzhuang-1"></i>
</span>
<span>
<i class="iconfont icon-xingzhuang-"></i>
</span>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
.ad {
padding: 0 30px;
}
.ad .content {
height: 270px;
padding: 20px;
background: #eef1ff;
color: #2c3343;
overflow-y: auto;
font-size: 13px;
line-height: 25px;
position: relative;
}
.ad .content .time,
.ad .content .user {
text-align: right;
position: absolute;
right: 20px;
bottom: 20px;
}
.ad .content .user {
bottom: 50px;
}
.ad .foot {
margin-top: 23px;
display: flex;
}
.ad .foot .lt {
font-size: 13px;
color: #2c3343;
display: flex;
align-items: baseline;
}
.ad .foot .lt .v {
line-height: 25px;
}
.ad .foot .lt .v a {
display: block;
color: #5d78ff;
text-decoration: #5d78ff;
}
.ad .foot .rt{
text-align: right;
flex: 1;
}
.ad .foot .rt span{
display: inline-block;
height: 28px;
width: 28px;
line-height: 28px;
text-align: center;
background: #eef1ff;
color: #5d78ff;
margin-left: 30px;
font-size: 12px;
}
.ad .foot .rt span.disable{
color: #CDD3EE;
}
.ad .foot .rt span i {
zoom: 0.1;
}
</style>
src/components/personalCenter/imbox.vue 0 → 100644
View file @ 84491924
<template>
<div class="imbox-c">
<div class="item">
<img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
<div class="content">
<div class="name-box">
徐数学
<el-tag size="mini" style="margin-left:10px">线控</el-tag>
</div>
<div class="last-msg">你看这样可以了吗？</div>
</div>
<i class="iconfont icon-chat send-msg" title="和TA聊一下"></i>
</div>
<div class="item">
<img src="http://imgfile.oytour.com/Upload/User/636749538798815181.jpg?imageView&thumbnail=40z40" />
<div class="content">
<div class="name-box">
羊三红
<el-tag size="mini" style="margin-left:10px">财务总监</el-tag>
</div>
<div class="last-msg">大概就是这样</div>
</div>
<i class="iconfont icon-chat send-msg" title="和TA聊一下"></i>
</div>
<div class="item">
<img src="http://192.168.2.214:8130/Upload/User/636747229894789210.jpg" />
<div class="content">
<div class="name-box">
李建波
<el-tag size="mini" style="margin-left:10px">分公司总经理</el-tag>
</div>
<div class="last-msg">这次酒店的地址是在阳光新业2栋8楼哈“乐家林语艺术公寓”，出电梯就能看到，报和平国旅入住</div>
</div>
<i class="iconfont icon-chat send-msg" title="和TA聊一下"></i>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.imbox-c {
position: absolute;
top: 50px;
bottom: 0px;
left: 0;
right: 0;
overflow-y: auto;
}
.imbox-c .item {
padding: 22px 47px 21px 36px;
display: flex;
align-items: center;
cursor: default;
}
.imbox-c .item:hover {
background: #f1f1f2;
}
.imbox-c .item img {
width: 42px;
height: 42px;
border-radius: 50%;
margin-right: 28px;
}
.imbox-c .item .content {
flex: 1;
width: 284px;
}
.imbox-c .item .content .name-box {
font-size: 14px;
font-family: pingfangR;
color: #2c3343;
}
.imbox-c .item .content .last-msg {
font-size: 12px;
color: #a2a4a7;
width: 100%;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 3px;
}
.imbox-c .item .send-msg {
width: 28px;
height: 28px;
font-size: 24px;
color: #ebedf4;
cursor: pointer;
margin-left: 20px;
}
.imbox-c .item:hover .send-msg {
color: #5d78ff;
}
</style>
src/components/personalCenter/myorder.vue 0 → 100644
View file @ 84491924
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [
"7月1日",
"7月2日",
"7月3日",
"7月4日",
"7月5日",
"7月6日",
"7月7日",
"7月8日",
"7月9日",
"7月10日",
"7月11日",
"7月12日",
"7月13日",
"7月14日",
"7月15日",
"7月16日",
"7月17日",
"7月18日",
"7月19日",
"7月20日",
"7月21日"
];
var data2 = [130, 202, 500, 200, 220, 310, 360,130, 202, 500, 200, 220, 310, 360,130, 202, 500, 200, 220, 310, 360];
let option = {
backgroundColor: "#FFF", //"#19133e6e",
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#79778a",
fontFamily: "DIN"
},
margin: 10,
interval: 0,
show: false
},
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#272938",
fontFamily: "DIN"
},
show: false
},
splitLine: {
show: false
},
interval: 600,
max: 600,
min: 0,
splitNumber: 5
},
grid: {
left: -45,
right: -45,
top: 0,
bottom: 0
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: "#6a7985"
}
}
},
series: [
{
name: "收款",
type: "line",
smooth: false,
symbol: "circle",
symbolSize: 3,
itemStyle: {
normal: {
lineStyle: {
color: "#FB6E9D"
},
areaStyle: {
color: "#FFE1EB"
},
color:"#FB6E9D"
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/personalCenter/newpersonal.vue 0 → 100644
View file @ 84491924
<template>
<div class="newpersonal-c">
<div class="item">
<img src="http://imgfile.oytour.com/New/Upload/User/636952712312267265.jpg" />
<div class="content">
<div class="name-box">
肖萌
<i class="iconfont icon-nan nan"></i>
<el-tag size="mini" style="margin-left:10px">地接OP</el-tag>
</div>
<div class="last-msg">成都印象 · 日本线地接部 · 6月3日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
<div class="item">
<img src="../../assets/img/default_head_img.jpg" />
<div class="content">
<div class="name-box">
葛雯进
<i class="iconfont icon-nv"></i>
<el-tag size="mini" style="margin-left:10px">新人专员</el-tag>
</div>
<div class="last-msg">成都印象 · 总部业务六组（地州） · 6月11日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
<div class="item">
<img src="../../assets/img/default_head_img.jpg" />
<div class="content">
<div class="name-box">
胡明明
<i class="iconfont icon-nv"></i>
<el-tag size="mini" style="margin-left:10px">总公司会计</el-tag>
</div>
<div class="last-msg">成都印象 · 总部财务部 · 7月1日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
<div class="item">
<img src="../../assets/img/default_head_img.jpg" />
<div class="content">
<div class="name-box">
胡明明
<i class="iconfont icon-nv"></i>
<el-tag size="mini" style="margin-left:10px">总公司会计</el-tag>
</div>
<div class="last-msg">成都印象 · 总部财务部 · 7月1日入职</div>
</div>
<i class="iconfont icon-chat send-msg" title="认识一下"></i>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.newpersonal-c {
margin-top: 0px;
height: 204px;
overflow-y:auto;
}
.newpersonal-c .item {
padding: 12px 30px;
display: flex;
align-items: center;
cursor: default;
}
.newpersonal-c .item:hover {
background: #f1f1f2;
}
.newpersonal-c .item img {
width: 42px;
height: 42px;
border-radius: 50%;
margin-right: 14px;
}
.newpersonal-c .item .content {
flex: 1;
width: 284px;
}
.newpersonal-c .item .content .name-box {
font-size: 14px;
font-family: pingfangR;
color: #2c3343;
}
.newpersonal-c .item .content .name-box i {
font-size: 14px;
color: rgba(253, 57, 149, 1);
margin-left: 15px;
}
.newpersonal-c .item .content .name-box i.nan {
color: #5d78ff;
}
.newpersonal-c .item .content .last-msg {
font-size: 12px;
color: #a2a4a7;
width: 100%;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 3px;
font-family: pingfangR;
}
.newpersonal-c .item .send-msg {
width: 28px;
height: 28px;
font-size: 24px;
color: #ebedf4;
cursor: pointer;
margin-left: 20px;
}
.newpersonal-c .item:hover .send-msg {
color: #5d78ff;
}
</style>
src/components/personalCenter/notice.vue 0 → 100644
View file @ 84491924
<template>
<div class="notice-c">
<div class="item">
<div class="content">
<div class="name-box">
审批完成
</div>
<div class="last-msg">
<span class="time">1小时前</span>
您的财务申请已完成！
</div>
</div>
<i class="iconfont icon-xingzhuang9 send-msg"></i>
</div>
<div class="item">
<div class="content">
<div class="name-box">
审批完成
</div>
<div class="last-msg">
<span class="time">12小时前</span>
您的财务申请已完成！
</div>
</div>
<i class="iconfont icon-xingzhuang9 send-msg"></i>
</div>
<div class="item">
<div class="content">
<div class="name-box">
审批完成
</div>
<div class="last-msg">
<span class="time">3天前</span>
您的财务申请已完成！
</div>
</div>
<i class="iconfont icon-xingzhuang9 send-msg"></i>
</div>
<div class="item">
<div class="content">
<div class="name-box">
审批完成
</div>
<div class="last-msg">
<span class="time">一周前</span>
您的财务申请已完成！
</div>
</div>
<i class="iconfont icon-xingzhuang9 send-msg"></i>
</div>
<div class="item">
<div class="content">
<div class="name-box">
审批完成
</div>
<div class="last-msg">
<span class="time">13天前</span>
您的财务申请已完成！
</div>
</div>
<i class="iconfont icon-xingzhuang9 send-msg"></i>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.notice-c {
position: absolute;
top: 60px;
bottom: 0px;
left: 0;
right: 0;
overflow-y: auto;
}
.notice-c .item {
padding: 10px 15px;
display: flex;
align-items: center;
cursor: default;
}
.notice-c .item:hover {
background: #f1f1f2;
}
.notice-c .item img {
width: 42px;
height: 42px;
border-radius: 50%;
margin-right: 28px;
}
.notice-c .item .content {
flex: 1;
width: 284px;
}
.notice-c .item .content .name-box {
font-size: 14px;
font-family: pingfangR;
color: #2c3343;
}
.notice-c .item .content .last-msg {
font-size: 12px;
color: #a2a4a7;
width: 100%;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 3px;
}
.notice-c .item .content .last-msg .time{
margin-right: 15px
}
.notice-c .item .send-msg {
width: 12px;
height: 12px;
font-size: 12px;
color: #ebedf4;
cursor: pointer;
margin-left: 20px;
}
.notice-c .item:hover .send-msg {
color: #5d78ff;
}
</style>
src/components/personalCenter/pingtai.vue 0 → 100644
View file @ 84491924
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "70%", //图例距离左的距离
top: "15%", //图例上下居中
data: ["B2B PC平台", "B2B 手机端", "确认件", "麦子助手", "ERP"]
},
calculable: true,
graphic: [
{
type: "text",
left: "23%",
top: "30%",
style: {
text: "151",
textAlign: "center",
fill: "#A2A4A7", //文字的颜色
fontSize: 40,
width:120,
fontFamily: "pingfangR"
}
},
{
type: "text",
left: "22%",
top: "48%",
style: {
text: "累计成交订单",
textAlign: "center",
fill: "#A2A4A7", //文字的颜色
fontSize: 14,
fontFamily: "pingfangR"
}
}
],
series: [
{
center: ["30%", "40%"],
name: "订单来源",
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 2,
borderColor: "#fff",
color: function(params) {
//自定义颜色
var colorList = [
"#FFB822",
"#34BFA3",
"#FD3995",
"#5D78FF",
"#8e44ad"
];
return colorList[params.dataIndex];
}
},
emphasis: {
label: {
show: true,
center: ["30%", "40%"],
textStyle: {
fontSize: "20",
fontFamily: "pingfangR"
}
}
}
},
data: [
{ value: 335, name: "B2B PC平台" },
{ value: 310, name: "B2B 手机端" },
{ value: 234, name: "确认件" },
{ value: 135, name: "麦子助手" },
{ value: 1548, name: "ERP" }
]
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/personalCenter/sell.vue 0 → 100644
View file @ 84491924
<template>
<div class="sell-box">
<div class="top">
<div class="h">
<img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
</div>
<img class="caidai" src="../../assets/img/persion/caidai.png" />
<div class="money">
￥<span class="big">156800.00</span>
</div>
</div>
<div class="bottom">
<div class="t">
<div class="l">
<img src="http://imgfile.oytour.com/Upload/User/xushuxue.png" />
<div class="content">
<div class="name-box">
徐数学
</div>
<div class="last-msg">成都印象 · 欧洲销售组</div>
</div>
</div>
<div class="r">
<div class="count">18</div>
<div class="txt">周冠次数</div>
</div>
</div>
<div class="remark">
徐数学在本期的排名中取得了156800.00的业绩，领先第二名51800.00，这是他第18次获得销售周冠的称号，想看他的成功秘笈？戳下面的按钮查看吧！
</div>
<div class="more-btn">立即查看</div>
</div>
</div>
</template>
<style>
.sell-box {
}
.sell-box .top {
height: 248px;
background: url("../../assets/img/persion/sell.png") #8eafec;
background-size: 100% 100%;
position: relative;
}
.sell-box .top .h {
text-align: center;
position: absolute;
top: -23px;
width: 136px;
height: 136px;
padding: 5px;
background: rgba(255, 255, 255, 0.3);
left: 167px;
border-radius: 50%;
}
.sell-box .top .h img {
width: 126px;
height: 126px;
border-radius: 50%;
}
.sell-box .top .caidai {
position: absolute;
top: 75px;
left: 110px;
width: 240px;
height: 57px;
z-index: 2;
}
.sell-box .top .money {
position: absolute;
top: 132px;
left: 0;
right: 0;
height: 30px;
z-index: 2;
text-shadow: 0px 4px 5px rgba(0, 63, 163, 1);
font-size: 20px;
font-weight: bold;
text-align: center;
color: #FFF;
}
.sell-box .top .money .big {
font-family: pingfangR;
font-weight: unset;
font-size: 36px;
}
.sell-box .bottom{
padding: 25px;
}
.sell-box .bottom .t{
display: flex;
align-items: center;
}
.sell-box .bottom .t .l{
flex: 1;
display: flex;
}
.sell-box .bottom .t .l img {
width: 42px;
height: 42px;
border-radius: 50%;
margin-right: 14px;
}
.sell-box .bottom .t .l .content {
flex: 1;
}
.sell-box .bottom .t .l .content .name-box {
font-size: 18px;
font-family: pingfangR;
color: #6c7293;
}
.sell-box .bottom .t .l .content .last-msg {
font-size: 14px;
color: #a7abc3;
width: 100%;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: pingfangR;
}
.sell-box .bottom .t .r{
font-size: 12px;
color:#2c3343;
width: 80px;
text-align: right;
}
.sell-box .bottom .t .r .count {
font-size: 20px;
font-family: pingfangR;
color: #5d78ff !important;
text-align: center
}
.sell-box .bottom .t .r .txt {
font-size: 12px;
color: #a7abc3;
text-align: center
}
.sell-box .bottom .remark{
margin-top: 25px;
font-size: 12px;
color: #a7abc3;
font-family: pingfangR;
}
.sell-box .bottom .more-btn{
margin-top: 25px;
font-size: 12px;
font-family: pingfangR;
width:100px;
height: 33px;
line-height: 33px;
text-align: center;
background-color: rgba(93, 120, 255, 0.1);
color: #5d78ff;
cursor: pointer;
}
.sell-box .bottom .more-btn:hover{
background-color:#5d78ff;
color: #FFF;
border-radius: 4px;
}
</style>
src/components/personalCenter/todayOpera.vue 0 → 100644
View file @ 84491924
<template>
<div class="timelines">
<div class="split"></div>
<div class="line">
<div class="time">15:00</div>
<div class="smybile orange"></div>
<div class="operaContent">通过ERP后台，下载了0718“让你玩好·九”系列的WORD行程</div>
</div>
<div class="line">
<div class="time">14:03</div>
<div class="smybile"></div>
<div class="operaContent">录入订单编号为：“11123”的旅客，唐杰的信息</div>
</div>
<div class="line">
<div class="time">13:40</div>
<div class="smybile orange"></div>
<div class="operaContent">通过ERP后台，报入0718“让你玩好·九”系列12人</div>
</div>
<div class="line">
<div class="time">13:35</div>
<div class="smybile red"></div>
<div class="operaContent">通过了财务单号：“31520”的审批</div>
</div>
<div class="line">
<div class="time">13:20</div>
<div class="smybile"></div>
<div class="operaContent">通过APP分享了0718“让你玩好·九”系列的行程</div>
</div>
<div class="line">
<div class="time">11:00</div>
<div class="smybile"></div>
<div class="operaContent orange">新增客户拜访任务，将于7月20日拜访"全球通金牛区门店"客户。</div>
</div>
<div class="line">
<div class="time">10:00</div>
<div class="smybile"></div>
<div class="operaContent">通过手机APP报名，报入0718“让你玩好·九”系列1人</div>
</div>
<div class="line">
<div class="time">09:45</div>
<div class="smybile red"></div>
<div class="operaContent">新增收款单，收款金额5500元</div>
</div>
<div class="line">
<div class="time">09:20</div>
<div class="smybile green"></div>
<div class="operaContent">打卡上班了</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
d: []
};
}
};
</script>
<style scoped>
.timelines {
position: relative;
}
.timelines .line {
display: flex;
margin-bottom: 22px;
}
.timelines .split{
width: 2px;
background: #E7E9F5;
position: absolute;
top: 4px;
bottom: 4px;
left: 66px;
}
.timelines .line .time {
font-size: 16px;
font-family: pingfangR;
color: #a7abc3;
width: 50px;
}
.timelines .line .smybile {
border: 3px solid #5d78ff;
width: 14px;
height: 14px;
box-sizing: border-box;
position: relative;
border-radius: 100%;
margin: 4px 15px 0 10px;
background: #FFF;
}
.timelines .line .smybile.orange{
border-color: #ffb822 !important;
}
.timelines .line .smybile.red{
border-color: #fd397a !important;
}
.timelines .line .smybile.green{
border-color: #0abb87 !important
}
.timelines .line .smybile::after {
border: 3px solid #fff;
width: 14px;
height: 14px;
content: " ";
position: absolute;
left: -3px;
top: -3px;
z-index: -1;
border-radius: 100%;
}
.timelines .line .operaContent {
color: #a7abc3;
font-size: 12px;
word-break: break-all;
flex: 1;
margin-top: 3px;
}
</style>
src/components/personalCenter/tousu.vue 0 → 100644
View file @ 84491924
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "40%", //图例距离左的距离
top: "12%", //图例上下居中
data: ["行程景点", "酒店住宿", "销售责任", "导游服务"]
},
calculable: true,
graphic: [
{
type: "text",
left: "15.3%",
top: "30%",
style: {
text: "10",
textAlign: "center",
fill: "#A2A4A7", //文字的颜色
fontSize: 32,
width:120,
fontFamily: "pingfangR"
}
},
{
type: "text",
left: "14%",
top: "48%",
style: {
text: "累计投诉",
textAlign: "center",
fill: "#A2A4A7", //文字的颜色
fontSize: 14,
fontFamily: "pingfangR"
}
}
],
calculable : true,
series: [
{
center: ["20%", "40%"],
name: "投诉详情",
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 2,
borderColor: "#fff",
color: function(params) {
//自定义颜色
var colorList = [
"#FFB822",
"#34BFA3",
"#FD3995",
"#5D78FF",
"#8e44ad"
];
return colorList[params.dataIndex];
}
},
emphasis: {
label: {
show: true,
center: ["30%", "40%"],
textStyle: {
fontSize: "18",
fontFamily: "pingfangR"
}
}
}
},
data: [
{ value: 1, name: "行程景点" },
{ value: 3, name: "酒店住宿" },
{ value: 2, name: "销售责任" },
{ value: 4, name: "导游服务" }
]
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</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