Skip to content

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

新增个人中心

parent 679e0c1d
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 { ...@@ -113,7 +113,7 @@ export default {
} }
</script> </script>
<style> <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/Semibold.css";
@import "./assets/css/global/config.css"; @import "./assets/css/global/config.css";
@import "./assets/css/fileIcon.css"; @import "./assets/css/fileIcon.css";
......
src/components/index.vue
View file @ 84491924
...@@ -96,6 +96,11 @@ ...@@ -96,6 +96,11 @@
</div> </div>
</div> </div>
</el-dropdown-item> </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,'财务单据')"> <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> <i class="iconfont icon-nav-caiwu" style="color:#8e44ad"></i>
财务单 财务单
......
src/components/personalCenter.vue
View file @ 84491924
<template> <template>
<div class="personal" :style="{zoom:zoom}"> <div class="personal">
<div class="u-box"> <div class="u-box" :style="{zoom:zoomH}">
<!-- <div class="left-point"></div>
<div class="right-point"></div> -->
<div class="h-info-box"> <div class="h-info-box">
<div class="h-info"> <div class="h-info">
<div class="k">姓名</div> <div class="k">姓名</div>
...@@ -13,7 +11,7 @@ ...@@ -13,7 +11,7 @@
<div class="h-img"> <div class="h-img">
<div class="left-point-samll"></div> <div class="left-point-samll"></div>
<div class="right-point-samll"></div> <div class="right-point-samll"></div>
<img :src="u.Icon" :onerror="defaultHeadImg"> <img :src="u.Icon" :onerror="defaultHeadImg" />
</div> </div>
</div> </div>
<div class="u-info"> <div class="u-info">
...@@ -35,7 +33,7 @@ ...@@ -35,7 +33,7 @@
<div class="n-info"> <div class="n-info">
<div class="item"> <div class="item">
<i class="iconfont icon-dingdanguanli-"></i> <i class="iconfont icon-dingdanguanli-"></i>
<span class="n-name">我的订单</span> <span class="n-name" @click="goUrlNav('groupTourOrder',0,'跟团游订单')">我的订单</span>
<span class="fang"> <span class="fang">
<i class="iconfont icon-right1"></i> <i class="iconfont icon-right1"></i>
</span> </span>
...@@ -56,7 +54,7 @@ ...@@ -56,7 +54,7 @@
</div> </div>
<div class="item"> <div class="item">
<i class="iconfont icon-kaohedefen"></i> <i class="iconfont icon-kaohedefen"></i>
<span class="n-name">我的考核</span> <span class="n-name" @click="goUrlNav('ExaminationStatistics',0,'行政考核')">行政考核</span>
<span class="fang"> <span class="fang">
<i class="iconfont icon-right1"></i> <i class="iconfont icon-right1"></i>
</span> </span>
...@@ -93,36 +91,265 @@ ...@@ -93,36 +91,265 @@
</div> </div>
</div> </div>
</div> </div>
<div class="c-box"> <div class="m-box" v-if="zoomW!=0" :style="{zoom:zoomW}">
<div class="fince"> <div class="c-box">
<fince></fince> <div class="first">
<div class="fince">
<div class="canvas-box">
<fince></fince>
</div>
<div class="todayIncome">
<div class="infos">
<div class="left-text">
<span class="bold">7日累计收款</span>
<span>今日新增2笔收款</span>
</div>
<i class="iconfont icon-iconkaobei right-icon"></i>
</div>
<div class="sumMoney">
￥
<span class="bold">200000.00</span>
</div>
</div>
<div class="todayIncome daishou">
<div class="infos">
<div class="left-text">
<span class="bold">累计待收</span>
<span>共有23笔待收款</span>
</div>
<i class="iconfont icon-iconkaobei1 right-icon red"></i>
</div>
<div class="sumMoney">
￥
<span class="mbold">5000000.00</span>
</div>
</div>
<div class="title">近7日收款走势</div>
</div>
<div class="myorder">
<div class="title">本月收客走势</div>
<div class="canvas-box">
<myorder></myorder>
</div>
<div class="infos">
<span class="bold">399</span>
<span>本月收客人数</span>
</div>
</div>
</div> </div>
<div class="orders">
<div class="title">我的订单</div>
<i class="more iconfont icon-gengduo1" title="查看所有订单"></i>
<div class="per-tab">
<table>
<thead>
<th class="blue">订单号</th>
<th>团号</th>
<th>人数</th>
<th>成交单价</th>
<th>应收总额</th>
<th>实收</th>
<th>待收</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
<tr>
<td class="blue bold">31156</td>
<td class="bold">KIXCA07190413A</td>
<td>3</td>
<td class="bold">9600.00</td>
<td class="bold org">28800.00</td>
<td class="bold red">10000.00</td>
<td class="bold red">18800.00</td>
<td class="bold">正常</td>
<td class="op">
<i title="查看" class="el-icon-view"></i>
</td>
</tr>
<tr>
<td class="blue bold">31156</td>
<td class="bold">KIXCA07190413A</td>
<td>3</td>
<td class="bold">9600.00</td>
<td class="bold org">28800.00</td>
<td class="bold red">10000.00</td>
<td class="bold red">18800.00</td>
<td class="bold">正常</td>
<td class="op">
<i title="查看" class="el-icon-view"></i>
</td>
</tr>
<tr>
<td class="blue bold">31156</td>
<td class="bold">KIXCA07190413A</td>
<td>3</td>
<td class="bold">9600.00</td>
<td class="bold org">28800.00</td>
<td class="bold red">10000.00</td>
<td class="bold red">18800.00</td>
<td class="bold">正常</td>
<td class="op">
<i title="查看" class="el-icon-view"></i>
</td>
</tr>
<tr>
<td class="blue bold">31156</td>
<td class="bold">KIXCA07190413A</td>
<td>3</td>
<td class="bold">9600.00</td>
<td class="bold org">28800.00</td>
<td class="bold red">10000.00</td>
<td class="bold red">18800.00</td>
<td class="bold">正常</td>
<td class="op">
<i title="查看" class="el-icon-view"></i>
</td>
</tr>
<tr>
<td class="blue bold">31156</td>
<td class="bold">KIXCA07190413A</td>
<td>3</td>
<td class="bold">9600.00</td>
<td class="bold org">28800.00</td>
<td class="bold red">10000.00</td>
<td class="bold red">18800.00</td>
<td class="bold">正常</td>
<td class="op">
<i title="查看" class="el-icon-view"></i>
</td>
</tr>
<tr>
<td class="blue bold">31156</td>
<td class="bold">KIXCA07190413A</td>
<td>3</td>
<td class="bold">9600.00</td>
<td class="bold org">28800.00</td>
<td class="bold red">10000.00</td>
<td class="bold red">18800.00</td>
<td class="bold">正常</td>
<td class="op">
<i title="查看" class="el-icon-view"></i>
</td>
</tr>
</tbody>
</table>
</div>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="queryCommonData.currentPage"
layout="total,prev, pager, next, jumper"
:page-size="queryCommonData.pageSize"
:total="queryCommonData.total"
></el-pagination>
</div>
<div class="first">
<div class="pingtai">
<div class="title">成交平台占比</div>
<pingtai></pingtai>
</div>
<div class="cloud">
<div class="title">云盘</div>
<cloud></cloud>
</div>
</div>
<div class="first">
<div class="imbox">
<div class="title">近期消息</div>
<imbox></imbox>
</div>
<div class="imbox" style="margin-left:20px;padding-top:60px">
<div class="title">公告通知</div>
<div class="tab">
<span class="item" :class="{'active':choseNoticeType==0}" @click="changeNoticeType(0)">公告</span>
<span class="item" :class="{'active':choseNoticeType==1}" @click="changeNoticeType(1)">通知</span>
</div>
<gonggao v-show="choseNoticeType==0"></gonggao>
<notice v-show="choseNoticeType==1"></notice>
</div>
</div>
</div>
<div class="r-box">
<div class="sell">
<div class="title">本周销冠</div>
<i class="more iconfont icon-gengduo1 white" title="查看往期排行"></i>
<sell></sell>
</div>
<div class="todayOpera">
<div class="title">今日操作</div>
<div class="content">
<todayOpera></todayOpera>
</div>
</div>
<div class="newpersonal">
<div class="title">新鲜的同事</div>
<newpersonal></newpersonal>
</div>
<div class="tousu">
<div class="title">我的投诉</div>
<div class="content">
<tousu></tousu>
</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import fince from './personalCenter/fince' import fince from "./personalCenter/fince";
import myorder from "./personalCenter/myorder";
import todayOpera from "./personalCenter/todayOpera";
import pingtai from './personalCenter/pingtai';
import cloud from './personalCenter/cloud';
import imbox from './personalCenter/imbox';
import gonggao from './personalCenter/gonggao'
import notice from './personalCenter/notice'
import sell from './personalCenter/sell'
import newpersonal from './personalCenter/newpersonal'
import tousu from './personalCenter/tousu'
export default { export default {
data() { data() {
return { return {
u: {}, u: {},
defaultHeadImg: `this.src="${require("../assets/img/default_head_img.jpg")}"`, defaultHeadImg: `this.src="${require("../assets/img/default_head_img.jpg")}"`,
zoom: 1, zoomH: 1,
zoomW: 0,
NotDealCount: 0, NotDealCount: 0,
MyAuditCount: 0 MyAuditCount: 0,
queryCommonData: {
pageSize: 6,
total: 100,
currentPage: 1
},
choseNoticeType:0
}; };
}, },
components:{ components: {
fince fince,
myorder,
todayOpera,
pingtai,
cloud,
imbox,
gonggao,
notice,
sell,
newpersonal,
tousu
}, },
mounted() { mounted() {
this.u = this.getLocalStorage(); this.u = this.getLocalStorage();
this.zoom = (document.documentElement.clientHeight / 969).toFixed(2); this.zoomH = (document.documentElement.clientHeight / 969).toFixed(2);
this.zoomW = (document.documentElement.clientWidth / 1920).toFixed(2);
this.getNotDealCount(); this.getNotDealCount();
this.myAuditCount(); this.myAuditCount();
}, },
methods: { methods: {
handleCurrentChange() {},
changeNoticeType(t) {
this.choseNoticeType=t
},
getNotDealCount() { getNotDealCount() {
this.apipost( this.apipost(
"Financial_post_GetNotDealCount", "Financial_post_GetNotDealCount",
...@@ -177,20 +404,258 @@ export default { ...@@ -177,20 +404,258 @@ export default {
bottom: 0; bottom: 0;
border: 1px solid #2c2739; border: 1px solid #2c2739;
} }
.personal .c-box { .personal .m-box {
position: absolute; position: absolute;
left: 300px; left: 300px;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: rgba(242, 243, 248, 1);
overflow-y: auto;
padding-bottom: 20px;
}
.personal .c-box {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 480px;
background: rgba(242, 243, 248, 1);
padding: 20px;
}
.personal .c-box .first {
display: flex; display: flex;
background:rgba(242,243,248,1); }
.personal .r-box {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 480px;
padding: 20px; padding: 20px;
padding-left: 0;
background: rgba(242, 243, 248, 1);
}
.personal .c-box .fince,
.personal .c-box .myorder,
.personal .c-box .pingtai,
.personal .c-box .cloud,
.personal .c-box .imbox {
width: 540px;
height: 360px;
border-radius: 4px;
overflow: hidden;
background: #fff;
box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
position: relative;
} }
.personal .c-box .fince{ .personal .c-box .imbox {
width: 400px; height: 405px;
height: 245px; margin-bottom: 20px;
border-radius: 4px; }
.personal .c-box .pingtai {
height: 300px;
margin: 20px 0;
padding-top: 65px;
}
.personal .c-box .cloud {
height: 300px;
margin: 20px 0 20px 20px;
padding: 110px 45px 0 45px;
}
.personal .c-box .orders {
height: 419px;
background: #fff;
box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
border-radius: 6px;
margin-top: 20px;
position: relative;
padding-top: 50px;
}
.personal .r-box .todayOpera,
.personal .r-box .newpersonal {
height: 460px;
box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
border-radius: 6px;
background: #fff;
margin-top: 20px;
}
.personal .r-box .newpersonal{
height: auto;
position: relative;
}
.personal .r-box .sell,
.personal .r-box .tousu {
height: auto;
box-shadow: 0px 3px 14px 0px rgba(193, 198, 221, 1);
border-radius: 6px;
background: #fff;
position: relative;
overflow: hidden;
}
.personal .r-box .tousu {
margin-top: 20px;
}
.personal .r-box .sell .title{
height: 73px;
padding:0 30px;
padding-top: 21px;
font-size: 16px;
color: #FFF;
box-sizing: border-box;
background:#8EAFEC;
}
.personal .r-box .tousu .title{
padding:20px 30px;
font-size: 16px;
color: #2c3343;
}
.personal .r-box .tousu .content{
height: 154px;
}
.personal .r-box .todayOpera .title,
.personal .r-box .newpersonal .title {
height: 56px;
line-height: 56px;
padding-left: 30px;
border-bottom: 1px solid #ebedf2;
font-size: 16px;
color: #2c3343;
}
.personal .r-box .todayOpera .content {
width: 100%;
height: 403px;
padding: 15px 30px;
overflow-y: auto;
box-sizing: border-box;
}
.personal .c-box .myorder {
margin-left: 20px;
}
.personal .c-box .fince .canvas-box {
width: 100%;
height: 203px;
}
.personal .c-box .myorder .canvas-box {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 220px;
}
.personal .c-box .fince .todayIncome {
width: 213px;
height: 144px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 3px 14px 0px rgba(215, 215, 215, 1);
border-radius: 6px;
top: 162px;
left: 39px;
position: absolute;
padding: 25px 27px;
box-sizing: border-box;
}
.personal .c-box .fince .todayIncome .infos {
display: flex;
}
.personal .c-box .myorder .infos {
margin-top: 80px;
margin-left: 30px;
font-size: 12px;
color: #93959a;
}
.personal .c-box .myorder .infos * {
display: block;
}
.personal .c-box .myorder .infos .bold {
font-size: 28px;
color: #5d78ff;
font-family: pingfangR;
}
.personal .c-box .fince .todayIncome .infos .left-text {
flex: 1;
height: 36px;
line-height: 21px;
font-size: 12px;
color: #93959a;
}
.personal .c-box .fince .todayIncome .infos .left-text * {
display: block;
}
.personal .c-box .fince .todayIncome .infos .left-text .bold {
font-family: pingfangR;
font-size: 14px;
color: #0a0919;
}
.personal .c-box .fince .todayIncome .infos .right-icon {
font-size: 36px;
color: #0abb87;
width: 36px;
margin-top: -10px;
}
.personal .c-box .fince .todayIncome .infos .right-icon.red {
color: #dc3545;
}
.personal .c-box .fince .todayIncome .sumMoney {
color: #2c3343;
font-size: 12px;
text-align: right;
margin-top: 20px;
}
.personal .c-box .fince .todayIncome .sumMoney .bold {
font-size: 28px;
font-family: pingfangR;
}
.personal .c-box .fince .todayIncome .sumMoney .mbold {
font-size: 25px;
font-family: pingfangR;
}
.personal .c-box .fince .title,
.personal .c-box .myorder .title,
.personal .c-box .orders .title,
.personal .c-box .pingtai .title,
.personal .c-box .cloud .title,
.personal .c-box .imbox .title {
height: 15px;
font-size: 16px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 34px;
position: absolute;
left: 30px;
top: 10px;
font-family: pingfangR;
}
.personal .more {
position: absolute;
top: 17px;
right: 20px;
font-size: 13px;
color: #8a8894;
cursor: pointer;
}
.personal .more:hover {
color: #5d78ff;
}
.personal .more.white{
color:#FFF;
opacity:0.5;
}
.personal .more.white:hover{
opacity:1;
}
.personal .c-box .myorder .title,
.personal .c-box .orders .title,
.personal .c-box .pingtai .title,
.personal .c-box .cloud .title,
.personal .c-box .imbox .title {
color: #2c3343;
}
.personal .c-box .fince .todayIncome.daishou {
right: 40px;
left: unset;
} }
.personal .u-box .h-info-box { .personal .u-box .h-info-box {
margin: 15px; margin: 15px;
...@@ -300,6 +765,7 @@ export default { ...@@ -300,6 +765,7 @@ export default {
.personal .u-box .n-info .item .fang { .personal .u-box .n-info .item .fang {
width: 80px; width: 80px;
text-align: right; text-align: right;
padding-right: 15px;
} }
.personal .u-box .n-info .item .fang i { .personal .u-box .n-info .item .fang i {
font-size: 12px; font-size: 12px;
...@@ -402,4 +868,72 @@ export default { ...@@ -402,4 +868,72 @@ export default {
border-right: 2px solid #8a8894; border-right: 2px solid #8a8894;
border-bottom: 2px solid #8a8894; border-bottom: 2px solid #8a8894;
} }
.personal .per-tab table {
padding: 0;
margin: 0;
width: 100%;
border-collapse: collapse;
color: #6c7293;
}
.personal .per-tab table thead th {
font-size: 14px;
font-family: pingfangR;
padding: 10px 16px;
border-bottom: 1px solid #ebedf2;
text-align: left;
}
.personal .per-tab table td.blue,
.personal .per-tab table th.blue {
color: #5d78ff;
}
.personal .per-tab table td.org,
.personal .per-tab table th.org {
color: #ffb822;
}
.personal .per-tab table td.red,
.personal .per-tab table th.red {
color: #fd397a;
}
.personal .per-tab table td {
padding: 10px 16px;
font-size: 12px;
border-bottom: 1px solid #ebedf2;
text-align: left;
}
.personal .per-tab table td.bold {
font-size: 14px;
font-family: pingfangR;
}
.personal .per-tab table td.op i {
font-size: 18px;
color: #5d78ff;
cursor: pointer;
}
.personal .per-tab table td.op i:hover {
color: #3658ff;
}
.personal .el-pagination {
margin-top: 18px;
border-top: none;
font-weight: 400px;
}
.personal .c-box .imbox .tab{
position: absolute;
top: 18px;
right: 0px;
display: flex;
}
.personal .c-box .imbox .tab .item{
margin-right: 40px;
padding: 7px 8px;
font-size: 12px;
color: #757880;
cursor: pointer;
border-radius:2px;
}
.personal .c-box .imbox .tab .item.active,
.personal .c-box .imbox .tab .item:hover{
background:#eef1ff;
color:#5D78FF;
}
</style> </style>
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 { ...@@ -21,21 +21,11 @@ export default {
"12", "12",
"13", "13",
"14", "14",
"15", "15"
"16",
"17",
"18",
"19"
]; ];
var data = [220, 182, 191, 234, 290, 330, 310, 100, 30, 60, 650]; var data2 = [130, 202, 500, 200, 220, 310, 360];
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);
}
let option = { let option = {
backgroundColor: "#fd397a", //"#19133e6e", backgroundColor: "#0abb87", //"#19133e6e",
title: { title: {
show: false show: false
}, },
...@@ -50,6 +40,7 @@ export default { ...@@ -50,6 +40,7 @@ export default {
interval: 0, interval: 0,
show: false show: false
}, },
type : 'category',
axisTick: { axisTick: {
show: false show: false
}, },
...@@ -74,14 +65,14 @@ export default { ...@@ -74,14 +65,14 @@ export default {
splitLine: { splitLine: {
show: false show: false
}, },
interval: 1000, interval: 600,
max: 1000, max: 600,
min: 0, min: 0,
splitNumber: 5 splitNumber: 5
}, },
grid: { grid: {
left: -30, left: -45,
right: -30, right: -45,
top: 0, top: 0,
bottom: 0 bottom: 0
}, },
...@@ -97,18 +88,20 @@ export default { ...@@ -97,18 +88,20 @@ export default {
}, },
series: [ series: [
{ {
name: "同行浏览与分享", name: "收款",
type: "line", type: "line",
smooth: false, smooth: false,
symbol: "none", symbol: "circle",
symbolSize: 4,
itemStyle: { itemStyle: {
normal: { normal: {
lineStyle: { lineStyle: {
color: "#e63a5e" color: "#1EA87F"
}, },
areaStyle: { areaStyle: {
color: "#e14c86" color: "#20CC99"
} },
color:"#1EA87F"
} }
}, },
data: data2 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