Skip to content

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

页面修改

parent 6b43d22e
Hide whitespace changes
Inline Side-by-side
Showing with 751 additions and 729 deletions
src/components/Home.vue
View file @ aa6e6d4d
<template> <template>
<div class="home"> <div class="home">
<el-row :gutter="25"> <el-row :gutter="25">
<el-col :span="16"> <el-col :span="16">
<el-card class="rank-card" shadow="never"> <el-card class="rank-card" shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<span>排行榜</span> <span>排行榜</span>
</el-col> </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="请选择" <el-select v-model="rankMsg.RankType" size="mini" style="width:120px;" placeholder="请选择"
@change="GetRankingList"> @change="GetRankingList">
<el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option> <el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option>
</el-select> </el-select>
<div class="time-box" v-if="diyDateRange==''"> <div class="time-box" v-if="diyDateRange==''">
<el-button plain size="mini" class="hide_input_time" style="margin:0 25px;">自定义日期 <el-button plain size="mini" class="hide_input_time" style="margin:0 25px;">自定义日期
<el-date-picker <el-date-picker v-model="diyDateRange" type="daterange" align="right" unlink-panels ref="diydateRef"
v-model="diyDateRange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @input="setDiyDateRange"
type="daterange" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
align="right" </el-date-picker>
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> </el-button>
</div> </div>
<div style="width:235px;" v-if="diyDateRange==''"> <div style="width:235px;" v-if="diyDateRange==''">
<el-tabs v-model="currentRankRange" @tab-click="changeRankTypeHandler" class="hide-tabs-content"> <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> </el-tabs>
</div> </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-col>
</el-row> </el-row>
</div> </div>
...@@ -47,10 +41,15 @@ ...@@ -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-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="rank" v-else><img src="../assets/img/cust/first.png" /></div>
<div class="head"> <div class="head">
<el-avatar style="background:#409efe" :size="40" @error="errorHandler" :src="item.EmpPhoto" v-if="item.EmpPhoto && item.EmpPhoto!=''"> <el-avatar style="background:#409efe" :size="40" @error="errorHandler" :src="item.EmpPhoto"
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/> 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>
<el-avatar style="background:#409efe" :size="40" v-else>{{item.EmpName.substring(0,1)}}</el-avatar>
</div> </div>
<div class="rank-name"> <div class="rank-name">
<div class="rn">{{item.EmpName}}</div> <div class="rn">{{item.EmpName}}</div>
...@@ -66,7 +65,7 @@ ...@@ -66,7 +65,7 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-card class="tic-card" shadow="never"> <el-card class="tic-card" shadow="never">
<div class="tic-content"> <div class="tic-content">
...@@ -241,7 +240,7 @@ ...@@ -241,7 +240,7 @@
</el-row> </el-row>
<el-row :gutter="25" style="margin-top:25px;"> <el-row :gutter="25" style="margin-top:25px;">
<el-col :span="16"> <el-col :span="16">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>客户简报</span> <span>客户简报</span>
...@@ -398,729 +397,752 @@ ...@@ -398,729 +397,752 @@
</template> </template>
<script> <script>
import ticheng from "./chart/ticheng"; import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome"; import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou"; import sjld from "./chart/shangjiloudou";
export default { export default {
components: { components: {
ticheng, ticheng,
notincome, notincome,
sjld, sjld,
}, },
data() { data() {
return { return {
pickerOptions: { pickerOptions: {
shortcuts: [ shortcuts: [{
{ text: "最近一周",
text: "最近一周", onClick(picker) {
onClick(picker) { const end = new Date();
const end = new Date(); const start = new Date();
const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]);
picker.$emit("pick", [start, end]); },
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
}, },
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
rankType: 1,
rankType2: "1",
RankingList: [],
Briefing: {
model: {
TotalPrice: 0,
},
},
rankTypeList: [{
id: 1,
name: "引流排名(引流)",
unit: "人"
}, },
{ {
text: "最近一个月", id: 4,
onClick(picker) { name: "订单排名(引流)",
const end = new Date(); unit: "单"
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
}, },
{ {
text: "最近三个月", id: 5,
onClick(picker) { name: "销售额排名(票务)",
const end = new Date(); unit: "元"
const start = new Date(); },
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); {
picker.$emit("pick", [start, end]); id: 3,
}, name: "利润排名(票务)",
unit: "元"
},
{
id: 2,
name: "订单排名(票务)",
unit: "单"
}, },
], ],
}, dataRangeList: [{
rankType: 1, id: 1,
rankType2: "1", name: "今日",
RankingList: [], startTime: "",
Briefing: { endTime: "",
model: { mappingStart: "StartDay",
TotalPrice: 0, mappingEnd: "EndDay",
}, type: "1",
}, },
rankTypeList: [ {
{ id: 1, name: "引流排名(引流)", unit: "人" }, id: 2,
{ id: 4, name: "订单排名(引流)", unit: "单" }, name: "本周",
{ id: 5, name: "销售额排名(票务)", unit: "元" }, startTime: "",
{ id: 3, name: "利润排名(票务)", unit: "元" }, endTime: "",
{ id: 2, name: "订单排名(票务)", unit: "单" }, mappingStart: "StartDay",
], mappingEnd: "EndDay",
dataRangeList: [ type: "1",
{ },
id: 1, {
name: "今日", id: 3,
startTime: "", name: "本月",
endTime: "", startTime: "",
mappingStart: "StartDay", endTime: "",
mappingEnd: "EndDay", mappingStart: "StartMonth",
type: "1", mappingEnd: "EndMonth",
}, type: "2",
{ },
id: 2, {
name: "本周", id: 4,
startTime: "", name: "本年",
endTime: "", startTime: "",
mappingStart: "StartDay", endTime: "",
mappingEnd: "EndDay", mappingStart: "StartYear",
type: "1", mappingEnd: "EndYear",
}, type: "3",
{ },
id: 3, ],
name: "本月", diyDateRange: "",
startTime: "", currentRankType: {},
endTime: "", currentRankRange: "2",
mappingStart: "StartMonth", rankMsg: {
mappingEnd: "EndMonth", RankType: 1, //排行类型(1-引流排行，2-销售排行,3-利润排行)
type: "2", QueryType: "1", //查询类型(1-按天查询，2-按月查询，3-按年查询)
}, StartDay: "2022-05-01", //开始时间
{ EndDay: "2022-05-31", //结束时间
id: 4, StartMonth: "2022-04", //开始月份
name: "本年", EndMonth: "2022-05", //结束月份
startTime: "", StartYear: "2022", //开始年份
endTime: "", EndYear: "2022", //结束年份
mappingStart: "StartYear",
mappingEnd: "EndYear",
type: "3",
}, },
], };
diyDateRange: "",
currentRankType: {},
currentRankRange: "2",
rankMsg: {
RankType: 1, //排行类型(1-引流排行，2-销售排行,3-利润排行)
QueryType: "1", //查询类型(1-按天查询，2-按月查询，3-按年查询)
StartDay: "2022-05-01", //开始时间
EndDay: "2022-05-31", //结束时间
StartMonth: "2022-04", //开始月份
EndMonth: "2022-05", //结束月份
StartYear: "2022", //开始年份
EndYear: "2022", //结束年份
},
};
},
created() {
this.initRankRangeList();
},
watch:{
diyDateRange: {
handler(val, oldVal) {
this.diyDateRange = val
this.setDiyDateRange()
},
},
},
mounted() {
this.changeRankTypeHandler();
this.GetBriefing();
},
methods: {
formatMoney(val) {
var str = val.toFixed(2) + "";
var sum = str
.substring(0, str.indexOf("."))
.replace(/\B(?=(?:\d{3})+$)/g, ","); //取到整数部分
var dot = str.substring(str.length, str.indexOf(".")); //取到小数部分搜索
var ret = sum + dot;
return ret;
},
errorHandler() {
return true;
}, },
beginOfWeek(dateValue) { created() {
let date; this.initRankRangeList();
if (dateValue instanceof Date) {
date = dateValue;
} else {
date = new Date(dateValue);
}
let subDay = 0;
let weekDay = date.getDay();
if (weekDay == 0) {
//周天
subDay = 6;
} else {
subDay = weekDay - 1;
}
let beginDateTime = date.getTime() - 86400000 * subDay;
return new Date(beginDateTime);
}, },
initRankRangeList() { watch: {
var date = new Date(); diyDateRange: {
this.dataRangeList[0].startTime = this.formatDate(date, "YYYY-MM-dd", 0); handler(val, oldVal) {
this.dataRangeList[0].endTime = this.dataRangeList[0].startTime; this.diyDateRange = val
this.setDiyDateRange()
this.dataRangeList[1].startTime = this.formatDate( },
this.beginOfWeek(date), },
"YYYY-MM-dd",
0
);
this.dataRangeList[1].endTime = this.dataRangeList[0].startTime;
this.dataRangeList[2].startTime = this.formatDate(date, "YYYY-MM", 0);
this.dataRangeList[2].endTime = this.dataRangeList[2].startTime;
this.dataRangeList[3].startTime = this.formatDate(date, "YYYY", 0);
this.dataRangeList[3].endTime = this.dataRangeList[3].startTime;
}, },
clearDiyDateRange() { mounted() {
this.diyDateRange = "";
this.changeRankTypeHandler(); this.changeRankTypeHandler();
this.GetBriefing();
}, },
setDiyDateRange() { methods: {
if (this.diyDateRange != "") { formatMoney(val) {
this.rankMsg.QueryType = 1; var str = val.toFixed(2) + "";
this.rankMsg.StartDay = this.diyDateRange[0]; var sum = str
this.rankMsg.EndDay = this.diyDateRange[1]; .substring(0, str.indexOf("."))
this.GetRankingList(); .replace(/\B(?=(?:\d{3})+$)/g, ","); //取到整数部分
} var dot = str.substring(str.length, str.indexOf(".")); //取到小数部分搜索
}, var ret = sum + dot;
changeRankTypeHandler() { return ret;
this.clearRankMsgHandler(); },
let temp = this.dataRangeList.find( errorHandler() {
(x) => x.id.toString() == this.currentRankRange return true;
); },
if (temp) { beginOfWeek(dateValue) {
this.rankMsg.QueryType = temp.type; let date;
this.rankMsg[temp.mappingStart] = temp.startTime; if (dateValue instanceof Date) {
this.rankMsg[temp.mappingEnd] = temp.endTime; date = dateValue;
this.GetRankingList(); } else {
} date = new Date(dateValue);
},
clearRankMsgHandler() {
this.rankMsg.StartDay = "";
this.rankMsg.EndDay = "";
this.rankMsg.StartMonth = "";
this.rankMsg.EndMonth = "";
this.rankMsg.StartYear = "";
this.rankMsg.EndYear = "";
},
//客户简报
GetBriefing() {
this.apipost("/api/CustomerDashboard/GetBriefing", {}, (res) => {
if (res.data.resultCode == 1) {
this.Briefing = res.data.data;
} }
}); let subDay = 0;
}, let weekDay = date.getDay();
//排行榜 if (weekDay == 0) {
GetRankingList() { //周天
this.currentRankType = this.rankTypeList.find( subDay = 6;
(x) => x.id == this.rankMsg.RankType } else {
); subDay = weekDay - 1;
this.apipost( }
"/api/CustomerDashboard/GetRankingList", let beginDateTime = date.getTime() - 86400000 * subDay;
this.rankMsg, return new Date(beginDateTime);
(res) => { },
initRankRangeList() {
var date = new Date();
this.dataRangeList[0].startTime = this.formatDate(date, "YYYY-MM-dd", 0);
this.dataRangeList[0].endTime = this.dataRangeList[0].startTime;
this.dataRangeList[1].startTime = this.formatDate(
this.beginOfWeek(date),
"YYYY-MM-dd",
0
);
this.dataRangeList[1].endTime = this.dataRangeList[0].startTime;
this.dataRangeList[2].startTime = this.formatDate(date, "YYYY-MM", 0);
this.dataRangeList[2].endTime = this.dataRangeList[2].startTime;
this.dataRangeList[3].startTime = this.formatDate(date, "YYYY", 0);
this.dataRangeList[3].endTime = this.dataRangeList[3].startTime;
},
clearDiyDateRange() {
this.diyDateRange = "";
this.changeRankTypeHandler();
},
setDiyDateRange() {
if (this.diyDateRange != "") {
this.rankMsg.QueryType = 1;
this.rankMsg.StartDay = this.diyDateRange[0];
this.rankMsg.EndDay = this.diyDateRange[1];
this.GetRankingList();
}
},
changeRankTypeHandler() {
this.clearRankMsgHandler();
let temp = this.dataRangeList.find(
(x) => x.id.toString() == this.currentRankRange
);
if (temp) {
this.rankMsg.QueryType = temp.type;
this.rankMsg[temp.mappingStart] = temp.startTime;
this.rankMsg[temp.mappingEnd] = temp.endTime;
this.GetRankingList();
}
},
clearRankMsgHandler() {
this.rankMsg.StartDay = "";
this.rankMsg.EndDay = "";
this.rankMsg.StartMonth = "";
this.rankMsg.EndMonth = "";
this.rankMsg.StartYear = "";
this.rankMsg.EndYear = "";
},
//客户简报
GetBriefing() {
this.apipost("/api/CustomerDashboard/GetBriefing", {}, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.RankingList = res.data.data; this.Briefing = res.data.data;
} }
} });
); },
//排行榜
GetRankingList() {
this.currentRankType = this.rankTypeList.find(
(x) => x.id == this.rankMsg.RankType
);
this.apipost(
"/api/CustomerDashboard/GetRankingList",
this.rankMsg,
(res) => {
if (res.data.resultCode == 1) {
this.RankingList = res.data.data;
}
}
);
},
}, },
}, };
};
</script> </script>
<style> <style>
.time-box{ .time-box {
overflow: hidden; overflow: hidden;
} }
.home {
width: 100%; .home {
margin-bottom: 25px; width: 100%;
} margin-bottom: 25px;
}
.el-card__header {
font-family: perfectFont; .el-card__header {
font-weight: bold; font-family: perfectFont;
} font-weight: bold;
}
.el-card,
.el-message { .el-card,
border-radius: 0 !important; .el-message {
} border-radius: 0 !important;
}
.box-card .shang-list {
} .box-card .shang-list {}
.box-card, .box-card,
.sum-card, .sum-card,
.rank-card { .rank-card {
padding-bottom: 20px; padding-bottom: 20px;
} }
.box-card .el-card__body, .box-card .el-card__body,
.sum-card .el-card__body, .sum-card .el-card__body,
.rank-card .el-card__body { .rank-card .el-card__body {
height: 358px; height: 358px;
overflow-y: hidden; overflow-y: hidden;
padding: 0px 20px !important; padding: 0px 20px !important;
margin-top: 20px; margin-top: 20px;
} }
.box-card .el-card__body { .box-card .el-card__body {
height: 237px; height: 237px;
} }
/* .box-card .el-card__body:hover, */ /* .box-card .el-card__body:hover, */
.sum-card .el-card__body:hover, .sum-card .el-card__body:hover,
.rank-card .el-card__body:hover { .rank-card .el-card__body:hover {
overflow-y: auto; overflow-y: auto;
padding-right: 16px !important; padding-right: 16px !important;
} }
.box-card .shang-list .shang-list-item { .box-card .shang-list .shang-list-item {
margin-bottom: 5px; margin-bottom: 5px;
height: 54px; height: 54px;
background: rgba(242, 242, 242, 1); background: rgba(242, 242, 242, 1);
display: flex; display: flex;
align-items: center; align-items: center;
} }
.box-card .icon { .box-card .icon {
width: 26px; width: 26px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
background: #409efe; background: #409efe;
color: #fff; color: #fff;
margin: 0 25px; margin: 0 25px;
} }
.box-card .shang-list .shang-list-item .title { .box-card .shang-list .shang-list-item .title {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
width: 80px; width: 80px;
/* padding-top: 18px; */ /* padding-top: 18px; */
font-weight: bold; font-weight: bold;
font-family: perfectFont; font-family: perfectFont;
} }
.box-card .shang-list .shang-list-item .result { .box-card .shang-list .shang-list-item .result {
flex: 1; flex: 1;
padding-left: 130px; padding-left: 130px;
font-size: 20px; font-size: 20px;
font-family: perfectFont; font-family: perfectFont;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
padding-right: 25px; padding-right: 25px;
} }
.box-card .shang-list .shang-list-item .eq { .box-card .shang-list .shang-list-item .eq {
width: 200px; width: 200px;
font-size: 12px; font-size: 12px;
color: gray; color: gray;
} }
.box-card .shang-list .shang-list-item .eq i { .box-card .shang-list .shang-list-item .eq i {
font-size: 26px; font-size: 26px;
margin-left: 30px; margin-left: 30px;
margin-right: 15px; margin-right: 15px;
color: #333; color: #333;
vertical-align: sub; 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-size: 20px;
font-family: perfectFont; 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); 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); color: rgb(195, 0, 82);
} }
.box-card .icon i { .box-card .icon i {
font-size: 14px; font-size: 14px;
} }
.box-card .icon.green { .box-card .icon.green {
background: rgb(16, 124, 16); background: rgb(16, 124, 16);
} }
.box-card .icon.blue { .box-card .icon.blue {
background: rgb(0, 99, 177); background: rgb(0, 99, 177);
} }
.box-card .icon.orange { .box-card .icon.orange {
background: rgb(202, 80, 16); background: rgb(202, 80, 16);
} }
.box-card .icon.grey { .box-card .icon.grey {
background: rgb(118, 118, 118); background: rgb(118, 118, 118);
} }
.box-card .icon.red { .box-card .icon.red {
background: rgb(195, 0, 82); background: rgb(195, 0, 82);
} }
.box-card .icon.zi { .box-card .icon.zi {
background: rgb(136, 23, 152); background: rgb(136, 23, 152);
} }
.box-card .icon.yellow { .box-card .icon.yellow {
background: rgb(255, 185, 0); background: rgb(255, 185, 0);
} }
.tic-card { .tic-card {
padding: 0px; padding: 0px;
height: 196px; height: 196px;
border: none; border: none;
} }
.tic-card .el-card__body, .tic-card .el-card__body,
.zhou-card .el-card__body, .zhou-card .el-card__body,
.notinmoney-card .el-card__body { .notinmoney-card .el-card__body {
padding: 0px; padding: 0px;
} }
.tic-card .tic-content { .tic-card .tic-content {
height: 83px; height: 83px;
width: 100%; width: 100%;
} }
.tic-card .tic-content .money-box { .tic-card .tic-content .money-box {
margin-top: 20px; margin-top: 20px;
margin-right: 30px; margin-right: 30px;
color: #00c5c8; color: #00c5c8;
font-family: perfectFont; font-family: perfectFont;
text-align: right; text-align: right;
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
.tic-card .tic-content .money-box small { .tic-card .tic-content .money-box small {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.tic-card .tic-content .tips { .tic-card .tic-content .tips {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
margin-right: 30px; margin-right: 30px;
text-align: right; text-align: right;
} }
.tic-card .tic-chart { .tic-card .tic-chart {
height: 111px; height: 111px;
width: 100%; width: 100%;
} }
.zhou-card { .zhou-card {
padding: 0px; padding: 0px;
border: none; border: none;
background: #409efe; background: #409efe;
margin-top: 25px; margin-top: 25px;
height: 236px; height: 236px;
} }
.zhou-card .el-card__body { .zhou-card .el-card__body {
padding: 0px; padding: 0px;
background: url("../assets/img/home/zhouguan.png") #409efe; background: url("../assets/img/home/zhouguan.png") #409efe;
height: 100%; height: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
.zhou-card .title { .zhou-card .title {
font-size: 20px; font-size: 20px;
font-family: perfectFont; font-family: perfectFont;
color: #fff; color: #fff;
padding: 10px 0 0 0px; padding: 10px 0 0 0px;
text-indent: 20px; text-indent: 20px;
} }
.zhou-card .money-box { .zhou-card .money-box {
margin-top: 10px; margin-top: 10px;
padding-right: 20px !important; padding-right: 20px !important;
color: #fff; color: #fff;
font-family: perfectFont; font-family: perfectFont;
text-align: right; text-align: right;
font-size: 26px; font-size: 26px;
font-weight: bold; font-weight: bold;
} }
.zhou-card .money-box small { .zhou-card .money-box small {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.zhou-card .zhou-head { .zhou-card .zhou-head {
margin: 10px auto; margin: 10px auto;
display: block; display: block;
width: 70px; width: 70px;
height: 70px; height: 70px;
background: rgba(85, 189, 233, 0.2); background: rgba(85, 189, 233, 0.2);
padding: 4px; padding: 4px;
border-radius: 100%; border-radius: 100%;
} }
.zhou-card .zhou-head img { .zhou-card .zhou-head img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100%; border-radius: 100%;
} }
.zhou-card .zhou-name { .zhou-card .zhou-name {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
font-family: perfectFont; font-family: perfectFont;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.zhou-card .zhou-depart { .zhou-card .zhou-depart {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
font-family: perfectFont; font-family: perfectFont;
text-align: center; text-align: center;
margin-top: 15px; margin-top: 15px;
} }
.sum-card .el-card__body { .sum-card .el-card__body {
height: 165px; height: 165px;
overflow-y: hidden; overflow-y: hidden;
padding-right: 20px; 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;
height: 45px; border-bottom: 1px solid #e2e4ef;
border-bottom: 1px solid #e2e4ef; display: flex;
display: flex; align-items: center;
align-items: center; }
}
.sum-card .sum-list .sum-list-item .icon {
.sum-card .sum-list .sum-list-item .icon { width: 4px;
width: 4px; height: 12px;
height: 12px; margin-right: 10px;
margin-right: 10px; background: #ffa475;
background: #ffa475; }
}
.sum-card .sum-list .sum-list-item .icon.green {
.sum-card .sum-list .sum-list-item .icon.green { background: #94b877;
background: #94b877; }
}
.sum-card .sum-list .sum-list-item .icon.blue {
.sum-card .sum-list .sum-list-item .icon.blue { background: #409efe;
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);
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;
background: #55bde9; }
}
.sum-card .sum-list .sum-list-item .icon.black {
.sum-card .sum-list .sum-list-item .icon.black { background: #333;
background: #333; }
}
.sum-card .sum-list .sum-list-item .item-name {
.sum-card .sum-list .sum-list-item .item-name { width: 90px;
width: 90px; font-size: 12px;
font-size: 12px; }
}
.ding .sum-list .sum-list-item .item-name {
.ding .sum-list .sum-list-item .item-name { width: 150px;
width: 150px; }
}
.sum-card .sum-list .sum-list-item .item-hui {
.sum-card .sum-list .sum-list-item .item-hui { flex: 1;
flex: 1; font-size: 12px;
font-size: 12px; text-align: right;
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-weight: bold; font-size: 22px;
font-size: 22px; font-family: perfectFont;
font-family: perfectFont; margin: 0 5px;
margin: 0 5px; }
}
.notinmoney-card {
.notinmoney-card { height: 268px;
height: 268px; }
}
.notinmoney-card .title {
.notinmoney-card .title { font-size: 17px;
font-size: 17px; font-family: perfectFont;
font-family: perfectFont; color: #000;
color: #000; padding: 10px 0 0 0px;
padding: 10px 0 0 0px; text-indent: 20px;
text-indent: 20px; font-weight: bold;
font-weight: bold; }
}
.notinmoney-card .money {
.notinmoney-card .money { font-size: 30px;
font-size: 30px; font-family: perfectFont;
font-family: perfectFont; color: #000;
color: #000; padding: 10px 0 0 0px;
padding: 10px 0 0 0px; text-indent: 20px;
text-indent: 20px; font-weight: bold;
font-weight: bold; color: #ffa475;
color: #ffa475; }
}
.notinmoney-card .charts-box {
.notinmoney-card .charts-box { height: 178px;
height: 178px; }
}
.notinmoney-card .money small {
.notinmoney-card .money small { font-size: 12px;
font-size: 12px; font-weight: 400;
font-weight: 400; }
}
.rank-card .el-card__body,
.rank-card .el-card__body, .loudou-card .el-card__body {
.loudou-card .el-card__body { height: 358px;
height: 358px; overflow-y: hidden;
overflow-y: hidden; padding-right: 20px;
padding-right: 20px; }
}
.rank-list {}
.rank-list {
} .rank-list .rank-list-item {
height: 55px;
.rank-list .rank-list-item { display: flex;
height: 55px; align-items: center;
display: flex; cursor: default;
align-items: center; user-select: none;
cursor: default; padding: 0 10px;
user-select: none; }
padding: 0 10px;
} .rank-list .rank-list-item:first-child {
.rank-list .rank-list-item:first-child { height: 85px;
height: 85px; }
}
.rank-list .rank-list-item:nth-child(2) { .rank-list .rank-list-item:nth-child(2) {
height: 75px; height: 75px;
} }
.rank-list .rank-list-item:nth-child(3) {
height: 65px; .rank-list .rank-list-item:nth-child(3) {
} height: 65px;
.rank-list .rank-list-item:hover { }
background: #f4f5f9;
} .rank-list .rank-list-item:hover {
background: #f4f5f9;
.rank-list .rank-list-item .rank { }
width: 200px;
font-size: 18px; .rank-list .rank-list-item .rank {
color: #999; width: 200px;
font-family: perfectFont !important; font-size: 18px;
font-weight: bold; color: #999;
} font-family: perfectFont !important;
.rank-list .rank-list-item .rank img { font-weight: bold;
width: 36px; }
height: 36px;
} .rank-list .rank-list-item .rank img {
width: 36px;
.rank-list .rank-list-item .rank.blue { height: 36px;
color: #409efe; }
}
.rank-list .rank-list-item .rank.blue {
.rank-list .rank-list-item .rank.red { color: #409efe;
color: rgb(195, 0, 82); }
}
.rank-list .rank-list-item .rank.red {
.rank-list .rank-list-item .rank.zi { color: rgb(195, 0, 82);
color: rgb(136, 23, 152); }
}
.rank-list .rank-list-item .rank.zi {
.rank-list .rank-list-item .head { color: rgb(136, 23, 152);
width: 70px; }
}
.rank-list .rank-list-item .head {
.rank-list .rank-list-item .rank-name { width: 70px;
width: 200px; }
font-size: 12px;
color: #666; .rank-list .rank-list-item .rank-name {
} width: 200px;
font-size: 12px;
.rank-list .rank-list-item .rank-name .rn { color: #666;
font-family: perfectFont !important; }
font-weight: bold;
color: #333; .rank-list .rank-list-item .rank-name .rn {
font-size: 16px; font-family: perfectFont !important;
} font-weight: bold;
color: #333;
.rank-list .rank-list-item .score { font-size: 16px;
font-size: 22px; }
font-family: perfectFont !important;
font-weight: bold; .rank-list .rank-list-item .score {
color: #333; font-size: 22px;
text-align: right; font-family: perfectFont !important;
flex: 1; font-weight: bold;
} color: #333;
.rank-list .rank-list-item .score .unit { text-align: right;
/* margin-left: 10px; */ flex: 1;
font-size: 12px; }
font-family: "PingFangR";
} .rank-list .rank-list-item .score .unit {
.option-item { /* margin-left: 10px; */
text-align: right; font-size: 12px;
} font-family: "PingFangR";
}
.option-item .el-select > .el-input {
display: block; .option-item {
background: #409efe; text-align: right;
border-radius: 0; }
}
.option-item .el-select>.el-input {
.option-item .el-input--mini .el-input__inner { display: block;
height: 28px; background: #409efe;
line-height: 28px; border-radius: 0;
background: #409efe; }
border-radius: 0;
color: #f1f1f1; .option-item .el-input--mini .el-input__inner {
} height: 28px;
line-height: 28px;
.option-item .el-select .el-input.is-focus .el-input__inner { background: #409efe;
border-color: #409efe; border-radius: 0;
} color: #f1f1f1;
}
.el-select-dropdown {
border-radius: 0px !important; .option-item .el-select .el-input.is-focus .el-input__inner {
} border-color: #409efe;
}
.el-select-dropdown__item.selected {
font-family: perfectFont !important; .el-select-dropdown {
color: #409efe !important; border-radius: 0px !important;
} }
.el-select-dropdown__item { .el-select-dropdown__item.selected {
/* font-family: perfectFont !important; */ font-family: perfectFont !important;
font-size: 12px !important; color: #409efe !important;
} }
.loudou-card .el-card__header { .el-select-dropdown__item {
border: none; /* font-family: perfectFont !important; */
} font-size: 12px !important;
}
.hide_input_time {
position: relative !important; .loudou-card .el-card__header {
} border: none;
.hide_input_time .el-date-editor { }
position: absolute;
top: 0; .hide_input_time {
left: 0; position: relative !important;
opacity: 0; }
}
</style> .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