Skip to content

C
CRM
Commit aa6e6d4d authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 6b43d22e
Show whitespace changes
Inline Side-by-side
Showing with 751 additions and 729 deletions
src/components/Home.vue
View file @ aa6e6d4d
......@@ -8,35 +8,29 @@
<el-col :span="4">
<span>排行榜</span>
</el-col>
<el-col :span="20" class="option-item" style="display:flex;align-items:center;flex-direction: row-reverse;">
<el-col :span="20" class="option-item"
style="display:flex;align-items:center;flex-direction: row-reverse;">
<el-select v-model="rankMsg.RankType" size="mini" style="width:120px;" placeholder="请选择"
@change="GetRankingList">
<el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option>
</el-select>
<div class="time-box" v-if="diyDateRange==''">
<el-button plain size="mini" class="hide_input_time" style="margin:0 25px;">自定义日期
<el-date-picker
v-model="diyDateRange"
type="daterange"
align="right"
unlink-panels
ref="diydateRef"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@input="setDiyDateRange"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
<el-date-picker v-model="diyDateRange" type="daterange" align="right" unlink-panels ref="diydateRef"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @input="setDiyDateRange"
value-format="yyyy-MM-dd" :picker-options="pickerOptions">
</el-date-picker>
</el-button>
</div>
<div style="width:235px;" v-if="diyDateRange==''">
<el-tabs v-model="currentRankRange" @tab-click="changeRankTypeHandler" class="hide-tabs-content">
<el-tab-pane v-for="(x,i) in dataRangeList" :key="i" :label="x.name" :name="x.id.toString()"></el-tab-pane>
<el-tab-pane v-for="(x,i) in dataRangeList" :key="i" :label="x.name" :name="x.id.toString()">
</el-tab-pane>
</el-tabs>
</div>
<el-tag class="f12" size="medium" @close="clearDiyDateRange" closable v-if="diyDateRange!=''" style="margin-right:25px;">自定义日期：{{diyDateRange[0]}} 至 {{diyDateRange[1]}}</el-tag>
<el-tag class="f12" size="medium" @close="clearDiyDateRange" closable v-if="diyDateRange!=''"
style="margin-right:25px;">自定义日期：{{diyDateRange[0]}} 至 {{diyDateRange[1]}}</el-tag>
</el-col>
</el-row>
</div>
......@@ -47,10 +41,15 @@
<div class="rank" v-else-if="index==1"><img src="../assets/img/cust/second.png" /></div>
<div class="rank" v-else><img src="../assets/img/cust/first.png" /></div>
<div class="head">
<el-avatar style="background:#409efe" :size="40" @error="errorHandler" :src="item.EmpPhoto" v-if="item.EmpPhoto && item.EmpPhoto!=''">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
<el-avatar style="background:#409efe" :size="40" @error="errorHandler" :src="item.EmpPhoto"
v-if="item.EmpPhoto && item.EmpPhoto!=''">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
</el-avatar>
<el-avatar style="background:#409efe" :size="40" v-else>
<template v-if="item.EmpName&&item.EmpName!=''">
{{item.EmpName.substring(0,1)}}
</template>
</el-avatar>
<el-avatar style="background:#409efe" :size="40" v-else>{{item.EmpName.substring(0,1)}}</el-avatar>
</div>
<div class="rank-name">
<div class="rn">{{item.EmpName}}</div>
......@@ -398,10 +397,10 @@
</template>
<script>
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou";
export default {
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou";
export default {
components: {
ticheng,
notincome,
......@@ -410,8 +409,7 @@ export default {
data() {
return {
pickerOptions: {
shortcuts: [
{
shortcuts: [{
text: "最近一周",
onClick(picker) {
const end = new Date();
......@@ -448,15 +446,33 @@ export default {
TotalPrice: 0,
},
},
rankTypeList: [
{ id: 1, name: "引流排名(引流)", unit: "人" },
{ id: 4, name: "订单排名(引流)", unit: "单" },
{ id: 5, name: "销售额排名(票务)", unit: "元" },
{ id: 3, name: "利润排名(票务)", unit: "元" },
{ id: 2, name: "订单排名(票务)", unit: "单" },
],
dataRangeList: [
rankTypeList: [{
id: 1,
name: "引流排名(引流)",
unit: "人"
},
{
id: 4,
name: "订单排名(引流)",
unit: "单"
},
{
id: 5,
name: "销售额排名(票务)",
unit: "元"
},
{
id: 3,
name: "利润排名(票务)",
unit: "元"
},
{
id: 2,
name: "订单排名(票务)",
unit: "单"
},
],
dataRangeList: [{
id: 1,
name: "今日",
startTime: "",
......@@ -511,7 +527,7 @@ export default {
created() {
this.initRankRangeList();
},
watch:{
watch: {
diyDateRange: {
handler(val, oldVal) {
this.diyDateRange = val
......@@ -628,67 +644,67 @@ export default {
);
},
},
};
};
</script>
<style>
.time-box{
.time-box {
overflow: hidden;
}
.home {
}
.home {
width: 100%;
margin-bottom: 25px;
}
}
.el-card__header {
.el-card__header {
font-family: perfectFont;
font-weight: bold;
}
}
.el-card,
.el-message {
.el-card,
.el-message {
border-radius: 0 !important;
}
}
.box-card .shang-list {
}
.box-card .shang-list {}
.box-card,
.sum-card,
.rank-card {
.box-card,
.sum-card,
.rank-card {
padding-bottom: 20px;
}
}
.box-card .el-card__body,
.sum-card .el-card__body,
.rank-card .el-card__body {
.box-card .el-card__body,
.sum-card .el-card__body,
.rank-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding: 0px 20px !important;
margin-top: 20px;
}
}
.box-card .el-card__body {
.box-card .el-card__body {
height: 237px;
}
}
/* .box-card .el-card__body:hover, */
/* .box-card .el-card__body:hover, */
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover {
.sum-card .el-card__body:hover,
.rank-card .el-card__body:hover {
overflow-y: auto;
padding-right: 16px !important;
}
}
.box-card .shang-list .shang-list-item {
.box-card .shang-list .shang-list-item {
margin-bottom: 5px;
height: 54px;
background: rgba(242, 242, 242, 1);
display: flex;
align-items: center;
}
}
.box-card .icon {
.box-card .icon {
width: 26px;
height: 26px;
line-height: 26px;
......@@ -696,18 +712,18 @@ export default {
background: #409efe;
color: #fff;
margin: 0 25px;
}
}
.box-card .shang-list .shang-list-item .title {
.box-card .shang-list .shang-list-item .title {
font-size: 14px;
color: #333333;
width: 80px;
/* padding-top: 18px; */
font-weight: bold;
font-family: perfectFont;
}
}
.box-card .shang-list .shang-list-item .result {
.box-card .shang-list .shang-list-item .result {
flex: 1;
padding-left: 130px;
font-size: 20px;
......@@ -716,85 +732,85 @@ export default {
font-weight: bold;
text-align: right;
padding-right: 25px;
}
}
.box-card .shang-list .shang-list-item .eq {
.box-card .shang-list .shang-list-item .eq {
width: 200px;
font-size: 12px;
color: gray;
}
}
.box-card .shang-list .shang-list-item .eq i {
.box-card .shang-list .shang-list-item .eq i {
font-size: 26px;
margin-left: 30px;
margin-right: 15px;
color: #333;
vertical-align: sub;
}
}
.box-card .shang-list .shang-list-item .eq .val {
.box-card .shang-list .shang-list-item .eq .val {
font-size: 20px;
font-family: perfectFont;
}
}
.box-card .shang-list .shang-list-item .eq .green {
.box-card .shang-list .shang-list-item .eq .green {
color: rgb(16, 124, 16);
}
}
.box-card .shang-list .shang-list-item .eq .red {
.box-card .shang-list .shang-list-item .eq .red {
color: rgb(195, 0, 82);
}
}
.box-card .icon i {
.box-card .icon i {
font-size: 14px;
}
}
.box-card .icon.green {
.box-card .icon.green {
background: rgb(16, 124, 16);
}
}
.box-card .icon.blue {
.box-card .icon.blue {
background: rgb(0, 99, 177);
}
}
.box-card .icon.orange {
.box-card .icon.orange {
background: rgb(202, 80, 16);
}
}
.box-card .icon.grey {
.box-card .icon.grey {
background: rgb(118, 118, 118);
}
}
.box-card .icon.red {
.box-card .icon.red {
background: rgb(195, 0, 82);
}
}
.box-card .icon.zi {
.box-card .icon.zi {
background: rgb(136, 23, 152);
}
}
.box-card .icon.yellow {
.box-card .icon.yellow {
background: rgb(255, 185, 0);
}
}
.tic-card {
.tic-card {
padding: 0px;
height: 196px;
border: none;
}
}
.tic-card .el-card__body,
.zhou-card .el-card__body,
.notinmoney-card .el-card__body {
.tic-card .el-card__body,
.zhou-card .el-card__body,
.notinmoney-card .el-card__body {
padding: 0px;
}
}
.tic-card .tic-content {
.tic-card .tic-content {
height: 83px;
width: 100%;
}
}
.tic-card .tic-content .money-box {
.tic-card .tic-content .money-box {
margin-top: 20px;
margin-right: 30px;
color: #00c5c8;
......@@ -802,50 +818,50 @@ export default {
text-align: right;
font-size: 26px;
font-weight: bold;
}
}
.tic-card .tic-content .money-box small {
.tic-card .tic-content .money-box small {
font-size: 12px;
font-weight: 500;
}
}
.tic-card .tic-content .tips {
.tic-card .tic-content .tips {
font-size: 14px;
color: #666;
margin-right: 30px;
text-align: right;
}
}
.tic-card .tic-chart {
.tic-card .tic-chart {
height: 111px;
width: 100%;
}
}
.zhou-card {
.zhou-card {
padding: 0px;
border: none;
background: #409efe;
margin-top: 25px;
height: 236px;
}
}
.zhou-card .el-card__body {
.zhou-card .el-card__body {
padding: 0px;
background: url("../assets/img/home/zhouguan.png") #409efe;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
}
.zhou-card .title {
.zhou-card .title {
font-size: 20px;
font-family: perfectFont;
color: #fff;
padding: 10px 0 0 0px;
text-indent: 20px;
}
}
.zhou-card .money-box {
.zhou-card .money-box {
margin-top: 10px;
padding-right: 20px !important;
color: #fff;
......@@ -853,14 +869,14 @@ export default {
text-align: right;
font-size: 26px;
font-weight: bold;
}
}
.zhou-card .money-box small {
.zhou-card .money-box small {
font-size: 12px;
font-weight: 500;
}
}
.zhou-card .zhou-head {
.zhou-card .zhou-head {
margin: 10px auto;
display: block;
width: 70px;
......@@ -868,109 +884,108 @@ export default {
background: rgba(85, 189, 233, 0.2);
padding: 4px;
border-radius: 100%;
}
}
.zhou-card .zhou-head img {
.zhou-card .zhou-head img {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.zhou-card .zhou-name {
.zhou-card .zhou-name {
font-size: 14px;
color: #fff;
font-family: perfectFont;
font-weight: bold;
text-align: center;
}
}
.zhou-card .zhou-depart {
.zhou-card .zhou-depart {
font-size: 14px;
color: #fff;
font-family: perfectFont;
text-align: center;
margin-top: 15px;
}
}
.sum-card .el-card__body {
.sum-card .el-card__body {
height: 165px;
overflow-y: hidden;
padding-right: 20px;
}
}
.sum-card .sum-list {
}
.sum-card .sum-list {}
.sum-card .sum-list .sum-list-item {
.sum-card .sum-list .sum-list-item {
height: 45px;
border-bottom: 1px solid #e2e4ef;
display: flex;
align-items: center;
}
}
.sum-card .sum-list .sum-list-item .icon {
.sum-card .sum-list .sum-list-item .icon {
width: 4px;
height: 12px;
margin-right: 10px;
background: #ffa475;
}
}
.sum-card .sum-list .sum-list-item .icon.green {
.sum-card .sum-list .sum-list-item .icon.green {
background: #94b877;
}
}
.sum-card .sum-list .sum-list-item .icon.blue {
.sum-card .sum-list .sum-list-item .icon.blue {
background: #409efe;
}
}
.sum-card .sum-list .sum-list-item .icon.zi {
.sum-card .sum-list .sum-list-item .icon.zi {
background: rgb(210, 197, 240);
}
}
.sum-card .sum-list .sum-list-item .icon.qing {
.sum-card .sum-list .sum-list-item .icon.qing {
background: #55bde9;
}
}
.sum-card .sum-list .sum-list-item .icon.black {
.sum-card .sum-list .sum-list-item .icon.black {
background: #333;
}
}
.sum-card .sum-list .sum-list-item .item-name {
.sum-card .sum-list .sum-list-item .item-name {
width: 90px;
font-size: 12px;
}
}
.ding .sum-list .sum-list-item .item-name {
.ding .sum-list .sum-list-item .item-name {
width: 150px;
}
}
.sum-card .sum-list .sum-list-item .item-hui {
.sum-card .sum-list .sum-list-item .item-hui {
flex: 1;
font-size: 12px;
text-align: right;
}
}
.sum-card .sum-list .sum-list-item .item-hui b {
.sum-card .sum-list .sum-list-item .item-hui b {
font-weight: bold;
font-size: 22px;
font-family: perfectFont;
margin: 0 5px;
}
}
.notinmoney-card {
.notinmoney-card {
height: 268px;
}
}
.notinmoney-card .title {
.notinmoney-card .title {
font-size: 17px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
}
}
.notinmoney-card .money {
.notinmoney-card .money {
font-size: 30px;
font-family: perfectFont;
color: #000;
......@@ -978,149 +993,156 @@ export default {
text-indent: 20px;
font-weight: bold;
color: #ffa475;
}
}
.notinmoney-card .charts-box {
.notinmoney-card .charts-box {
height: 178px;
}
}
.notinmoney-card .money small {
.notinmoney-card .money small {
font-size: 12px;
font-weight: 400;
}
}
.rank-card .el-card__body,
.loudou-card .el-card__body {
.rank-card .el-card__body,
.loudou-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding-right: 20px;
}
}
.rank-list {
}
.rank-list {}
.rank-list .rank-list-item {
.rank-list .rank-list-item {
height: 55px;
display: flex;
align-items: center;
cursor: default;
user-select: none;
padding: 0 10px;
}
.rank-list .rank-list-item:first-child {
}
.rank-list .rank-list-item:first-child {
height: 85px;
}
.rank-list .rank-list-item:nth-child(2) {
}
.rank-list .rank-list-item:nth-child(2) {
height: 75px;
}
.rank-list .rank-list-item:nth-child(3) {
}
.rank-list .rank-list-item:nth-child(3) {
height: 65px;
}
.rank-list .rank-list-item:hover {
}
.rank-list .rank-list-item:hover {
background: #f4f5f9;
}
}
.rank-list .rank-list-item .rank {
.rank-list .rank-list-item .rank {
width: 200px;
font-size: 18px;
color: #999;
font-family: perfectFont !important;
font-weight: bold;
}
.rank-list .rank-list-item .rank img {
}
.rank-list .rank-list-item .rank img {
width: 36px;
height: 36px;
}
}
.rank-list .rank-list-item .rank.blue {
.rank-list .rank-list-item .rank.blue {
color: #409efe;
}
}
.rank-list .rank-list-item .rank.red {
.rank-list .rank-list-item .rank.red {
color: rgb(195, 0, 82);
}
}
.rank-list .rank-list-item .rank.zi {
.rank-list .rank-list-item .rank.zi {
color: rgb(136, 23, 152);
}
}
.rank-list .rank-list-item .head {
.rank-list .rank-list-item .head {
width: 70px;
}
}
.rank-list .rank-list-item .rank-name {
.rank-list .rank-list-item .rank-name {
width: 200px;
font-size: 12px;
color: #666;
}
}
.rank-list .rank-list-item .rank-name .rn {
.rank-list .rank-list-item .rank-name .rn {
font-family: perfectFont !important;
font-weight: bold;
color: #333;
font-size: 16px;
}
}
.rank-list .rank-list-item .score {
.rank-list .rank-list-item .score {
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
}
.rank-list .rank-list-item .score .unit {
}
.rank-list .rank-list-item .score .unit {
/* margin-left: 10px; */
font-size: 12px;
font-family: "PingFangR";
}
.option-item {
}
.option-item {
text-align: right;
}
}
.option-item .el-select > .el-input {
.option-item .el-select>.el-input {
display: block;
background: #409efe;
border-radius: 0;
}
}
.option-item .el-input--mini .el-input__inner {
.option-item .el-input--mini .el-input__inner {
height: 28px;
line-height: 28px;
background: #409efe;
border-radius: 0;
color: #f1f1f1;
}
}
.option-item .el-select .el-input.is-focus .el-input__inner {
.option-item .el-select .el-input.is-focus .el-input__inner {
border-color: #409efe;
}
}
.el-select-dropdown {
.el-select-dropdown {
border-radius: 0px !important;
}
}
.el-select-dropdown__item.selected {
.el-select-dropdown__item.selected {
font-family: perfectFont !important;
color: #409efe !important;
}
}
.el-select-dropdown__item {
.el-select-dropdown__item {
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
}
.loudou-card .el-card__header {
.loudou-card .el-card__header {
border: none;
}
}
.hide_input_time {
.hide_input_time {
position: relative !important;
}
.hide_input_time .el-date-editor {
}
.hide_input_time .el-date-editor {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
}
</style>
\ No newline at end of file
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