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>
<div class="home">
<el-row :gutter="25">
<el-col :span="16">
<el-col :span="16">
<el-card class="rank-card" shadow="never">
<div slot="header" class="clearfix">
<el-row>
<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>
<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>
......@@ -66,7 +65,7 @@
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="tic-card" shadow="never">
<div class="tic-content">
......@@ -241,7 +240,7 @@
</el-row>
<el-row :gutter="25" style="margin-top:25px;">
<el-col :span="16">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix">
<span>客户简报</span>
......@@ -398,729 +397,752 @@
</template>
<script>
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou";
export default {
components: {
ticheng,
notincome,
sjld,
},
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
import ticheng from "./chart/ticheng";
import notincome from "./chart/noincome";
import sjld from "./chart/shangjiloudou";
export default {
components: {
ticheng,
notincome,
sjld,
},
data() {
return {
pickerOptions: {
shortcuts: [{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
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: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
id: 4,
name: "订单排名(引流)",
unit: "单"
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
id: 5,
name: "销售额排名(票务)",
unit: "元"
},
{
id: 3,
name: "利润排名(票务)",
unit: "元"
},
{
id: 2,
name: "订单排名(票务)",
unit: "单"
},
],
},
rankType: 1,
rankType2: "1",
RankingList: [],
Briefing: {
model: {
TotalPrice: 0,
},
},
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: "",
endTime: "",
mappingStart: "StartDay",
mappingEnd: "EndDay",
type: "1",
},
{
id: 2,
name: "本周",
startTime: "",
endTime: "",
mappingStart: "StartDay",
mappingEnd: "EndDay",
type: "1",
},
{
id: 3,
name: "本月",
startTime: "",
endTime: "",
mappingStart: "StartMonth",
mappingEnd: "EndMonth",
type: "2",
},
{
id: 4,
name: "本年",
startTime: "",
endTime: "",
mappingStart: "StartYear",
mappingEnd: "EndYear",
type: "3",
dataRangeList: [{
id: 1,
name: "今日",
startTime: "",
endTime: "",
mappingStart: "StartDay",
mappingEnd: "EndDay",
type: "1",
},
{
id: 2,
name: "本周",
startTime: "",
endTime: "",
mappingStart: "StartDay",
mappingEnd: "EndDay",
type: "1",
},
{
id: 3,
name: "本月",
startTime: "",
endTime: "",
mappingStart: "StartMonth",
mappingEnd: "EndMonth",
type: "2",
},
{
id: 4,
name: "本年",
startTime: "",
endTime: "",
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", //结束年份
},
],
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) {
let date;
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);
created() {
this.initRankRangeList();
},
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;
watch: {
diyDateRange: {
handler(val, oldVal) {
this.diyDateRange = val
this.setDiyDateRange()
},
},
},
clearDiyDateRange() {
this.diyDateRange = "";
mounted() {
this.changeRankTypeHandler();
this.GetBriefing();
},
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) {
this.Briefing = res.data.data;
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) {
let date;
if (dateValue instanceof Date) {
date = dateValue;
} else {
date = new Date(dateValue);
}
});
},
//排行榜
GetRankingList() {
this.currentRankType = this.rankTypeList.find(
(x) => x.id == this.rankMsg.RankType
);
this.apipost(
"/api/CustomerDashboard/GetRankingList",
this.rankMsg,
(res) => {
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() {
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) {
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>
<style>
.time-box{
overflow: hidden;
}
.home {
width: 100%;
margin-bottom: 25px;
}
.el-card__header {
font-family: perfectFont;
font-weight: bold;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.box-card .shang-list {
}
.box-card,
.sum-card,
.rank-card {
padding-bottom: 20px;
}
.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 {
height: 237px;
}
/* .box-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 {
margin-bottom: 5px;
height: 54px;
background: rgba(242, 242, 242, 1);
display: flex;
align-items: center;
}
.box-card .icon {
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background: #409efe;
color: #fff;
margin: 0 25px;
}
.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 {
flex: 1;
padding-left: 130px;
font-size: 20px;
font-family: perfectFont;
color: #000;
font-weight: bold;
text-align: right;
padding-right: 25px;
}
.box-card .shang-list .shang-list-item .eq {
width: 200px;
font-size: 12px;
color: gray;
}
.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 {
font-size: 20px;
font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .eq .green {
color: rgb(16, 124, 16);
}
.box-card .shang-list .shang-list-item .eq .red {
color: rgb(195, 0, 82);
}
.box-card .icon i {
font-size: 14px;
}
.box-card .icon.green {
background: rgb(16, 124, 16);
}
.box-card .icon.blue {
background: rgb(0, 99, 177);
}
.box-card .icon.orange {
background: rgb(202, 80, 16);
}
.box-card .icon.grey {
background: rgb(118, 118, 118);
}
.box-card .icon.red {
background: rgb(195, 0, 82);
}
.box-card .icon.zi {
background: rgb(136, 23, 152);
}
.box-card .icon.yellow {
background: rgb(255, 185, 0);
}
.tic-card {
padding: 0px;
height: 196px;
border: none;
}
.tic-card .el-card__body,
.zhou-card .el-card__body,
.notinmoney-card .el-card__body {
padding: 0px;
}
.tic-card .tic-content {
height: 83px;
width: 100%;
}
.tic-card .tic-content .money-box {
margin-top: 20px;
margin-right: 30px;
color: #00c5c8;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.tic-card .tic-content .money-box small {
font-size: 12px;
font-weight: 500;
}
.tic-card .tic-content .tips {
font-size: 14px;
color: #666;
margin-right: 30px;
text-align: right;
}
.tic-card .tic-chart {
height: 111px;
width: 100%;
}
.zhou-card {
padding: 0px;
border: none;
background: #409efe;
margin-top: 25px;
height: 236px;
}
.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 {
font-size: 20px;
font-family: perfectFont;
color: #fff;
padding: 10px 0 0 0px;
text-indent: 20px;
}
.zhou-card .money-box {
margin-top: 10px;
padding-right: 20px !important;
color: #fff;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.zhou-card .money-box small {
font-size: 12px;
font-weight: 500;
}
.zhou-card .zhou-head {
margin: 10px auto;
display: block;
width: 70px;
height: 70px;
background: rgba(85, 189, 233, 0.2);
padding: 4px;
border-radius: 100%;
}
.zhou-card .zhou-head img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.zhou-card .zhou-name {
font-size: 14px;
color: #fff;
font-family: perfectFont;
font-weight: bold;
text-align: center;
}
.zhou-card .zhou-depart {
font-size: 14px;
color: #fff;
font-family: perfectFont;
text-align: center;
margin-top: 15px;
}
.sum-card .el-card__body {
height: 165px;
overflow-y: hidden;
padding-right: 20px;
}
.sum-card .sum-list {
}
.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 {
width: 4px;
height: 12px;
margin-right: 10px;
background: #ffa475;
}
.sum-card .sum-list .sum-list-item .icon.green {
background: #94b877;
}
.sum-card .sum-list .sum-list-item .icon.blue {
background: #409efe;
}
.sum-card .sum-list .sum-list-item .icon.zi {
background: rgb(210, 197, 240);
}
.sum-card .sum-list .sum-list-item .icon.qing {
background: #55bde9;
}
.sum-card .sum-list .sum-list-item .icon.black {
background: #333;
}
.sum-card .sum-list .sum-list-item .item-name {
width: 90px;
font-size: 12px;
}
.ding .sum-list .sum-list-item .item-name {
width: 150px;
}
.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 {
font-weight: bold;
font-size: 22px;
font-family: perfectFont;
margin: 0 5px;
}
.notinmoney-card {
height: 268px;
}
.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 {
font-size: 30px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
color: #ffa475;
}
.notinmoney-card .charts-box {
height: 178px;
}
.notinmoney-card .money small {
font-size: 12px;
font-weight: 400;
}
.rank-card .el-card__body,
.loudou-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding-right: 20px;
}
.rank-list {
}
.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 {
height: 85px;
}
.rank-list .rank-list-item:nth-child(2) {
height: 75px;
}
.rank-list .rank-list-item:nth-child(3) {
height: 65px;
}
.rank-list .rank-list-item:hover {
background: #f4f5f9;
}
.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 {
width: 36px;
height: 36px;
}
.rank-list .rank-list-item .rank.blue {
color: #409efe;
}
.rank-list .rank-list-item .rank.red {
color: rgb(195, 0, 82);
}
.rank-list .rank-list-item .rank.zi {
color: rgb(136, 23, 152);
}
.rank-list .rank-list-item .head {
width: 70px;
}
.rank-list .rank-list-item .rank-name {
width: 200px;
font-size: 12px;
color: #666;
}
.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 {
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
}
.rank-list .rank-list-item .score .unit {
/* margin-left: 10px; */
font-size: 12px;
font-family: "PingFangR";
}
.option-item {
text-align: right;
}
.option-item .el-select > .el-input {
display: block;
background: #409efe;
border-radius: 0;
}
.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 {
border-color: #409efe;
}
.el-select-dropdown {
border-radius: 0px !important;
}
.el-select-dropdown__item.selected {
font-family: perfectFont !important;
color: #409efe !important;
}
.el-select-dropdown__item {
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
.loudou-card .el-card__header {
border: none;
}
.hide_input_time {
position: relative !important;
}
.hide_input_time .el-date-editor {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
</style>
.time-box {
overflow: hidden;
}
.home {
width: 100%;
margin-bottom: 25px;
}
.el-card__header {
font-family: perfectFont;
font-weight: bold;
}
.el-card,
.el-message {
border-radius: 0 !important;
}
.box-card .shang-list {}
.box-card,
.sum-card,
.rank-card {
padding-bottom: 20px;
}
.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 {
height: 237px;
}
/* .box-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 {
margin-bottom: 5px;
height: 54px;
background: rgba(242, 242, 242, 1);
display: flex;
align-items: center;
}
.box-card .icon {
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background: #409efe;
color: #fff;
margin: 0 25px;
}
.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 {
flex: 1;
padding-left: 130px;
font-size: 20px;
font-family: perfectFont;
color: #000;
font-weight: bold;
text-align: right;
padding-right: 25px;
}
.box-card .shang-list .shang-list-item .eq {
width: 200px;
font-size: 12px;
color: gray;
}
.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 {
font-size: 20px;
font-family: perfectFont;
}
.box-card .shang-list .shang-list-item .eq .green {
color: rgb(16, 124, 16);
}
.box-card .shang-list .shang-list-item .eq .red {
color: rgb(195, 0, 82);
}
.box-card .icon i {
font-size: 14px;
}
.box-card .icon.green {
background: rgb(16, 124, 16);
}
.box-card .icon.blue {
background: rgb(0, 99, 177);
}
.box-card .icon.orange {
background: rgb(202, 80, 16);
}
.box-card .icon.grey {
background: rgb(118, 118, 118);
}
.box-card .icon.red {
background: rgb(195, 0, 82);
}
.box-card .icon.zi {
background: rgb(136, 23, 152);
}
.box-card .icon.yellow {
background: rgb(255, 185, 0);
}
.tic-card {
padding: 0px;
height: 196px;
border: none;
}
.tic-card .el-card__body,
.zhou-card .el-card__body,
.notinmoney-card .el-card__body {
padding: 0px;
}
.tic-card .tic-content {
height: 83px;
width: 100%;
}
.tic-card .tic-content .money-box {
margin-top: 20px;
margin-right: 30px;
color: #00c5c8;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.tic-card .tic-content .money-box small {
font-size: 12px;
font-weight: 500;
}
.tic-card .tic-content .tips {
font-size: 14px;
color: #666;
margin-right: 30px;
text-align: right;
}
.tic-card .tic-chart {
height: 111px;
width: 100%;
}
.zhou-card {
padding: 0px;
border: none;
background: #409efe;
margin-top: 25px;
height: 236px;
}
.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 {
font-size: 20px;
font-family: perfectFont;
color: #fff;
padding: 10px 0 0 0px;
text-indent: 20px;
}
.zhou-card .money-box {
margin-top: 10px;
padding-right: 20px !important;
color: #fff;
font-family: perfectFont;
text-align: right;
font-size: 26px;
font-weight: bold;
}
.zhou-card .money-box small {
font-size: 12px;
font-weight: 500;
}
.zhou-card .zhou-head {
margin: 10px auto;
display: block;
width: 70px;
height: 70px;
background: rgba(85, 189, 233, 0.2);
padding: 4px;
border-radius: 100%;
}
.zhou-card .zhou-head img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.zhou-card .zhou-name {
font-size: 14px;
color: #fff;
font-family: perfectFont;
font-weight: bold;
text-align: center;
}
.zhou-card .zhou-depart {
font-size: 14px;
color: #fff;
font-family: perfectFont;
text-align: center;
margin-top: 15px;
}
.sum-card .el-card__body {
height: 165px;
overflow-y: hidden;
padding-right: 20px;
}
.sum-card .sum-list {}
.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 {
width: 4px;
height: 12px;
margin-right: 10px;
background: #ffa475;
}
.sum-card .sum-list .sum-list-item .icon.green {
background: #94b877;
}
.sum-card .sum-list .sum-list-item .icon.blue {
background: #409efe;
}
.sum-card .sum-list .sum-list-item .icon.zi {
background: rgb(210, 197, 240);
}
.sum-card .sum-list .sum-list-item .icon.qing {
background: #55bde9;
}
.sum-card .sum-list .sum-list-item .icon.black {
background: #333;
}
.sum-card .sum-list .sum-list-item .item-name {
width: 90px;
font-size: 12px;
}
.ding .sum-list .sum-list-item .item-name {
width: 150px;
}
.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 {
font-weight: bold;
font-size: 22px;
font-family: perfectFont;
margin: 0 5px;
}
.notinmoney-card {
height: 268px;
}
.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 {
font-size: 30px;
font-family: perfectFont;
color: #000;
padding: 10px 0 0 0px;
text-indent: 20px;
font-weight: bold;
color: #ffa475;
}
.notinmoney-card .charts-box {
height: 178px;
}
.notinmoney-card .money small {
font-size: 12px;
font-weight: 400;
}
.rank-card .el-card__body,
.loudou-card .el-card__body {
height: 358px;
overflow-y: hidden;
padding-right: 20px;
}
.rank-list {}
.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 {
height: 85px;
}
.rank-list .rank-list-item:nth-child(2) {
height: 75px;
}
.rank-list .rank-list-item:nth-child(3) {
height: 65px;
}
.rank-list .rank-list-item:hover {
background: #f4f5f9;
}
.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 {
width: 36px;
height: 36px;
}
.rank-list .rank-list-item .rank.blue {
color: #409efe;
}
.rank-list .rank-list-item .rank.red {
color: rgb(195, 0, 82);
}
.rank-list .rank-list-item .rank.zi {
color: rgb(136, 23, 152);
}
.rank-list .rank-list-item .head {
width: 70px;
}
.rank-list .rank-list-item .rank-name {
width: 200px;
font-size: 12px;
color: #666;
}
.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 {
font-size: 22px;
font-family: perfectFont !important;
font-weight: bold;
color: #333;
text-align: right;
flex: 1;
}
.rank-list .rank-list-item .score .unit {
/* margin-left: 10px; */
font-size: 12px;
font-family: "PingFangR";
}
.option-item {
text-align: right;
}
.option-item .el-select>.el-input {
display: block;
background: #409efe;
border-radius: 0;
}
.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 {
border-color: #409efe;
}
.el-select-dropdown {
border-radius: 0px !important;
}
.el-select-dropdown__item.selected {
font-family: perfectFont !important;
color: #409efe !important;
}
.el-select-dropdown__item {
/* font-family: perfectFont !important; */
font-size: 12px !important;
}
.loudou-card .el-card__header {
border: none;
}
.hide_input_time {
position: relative !important;
}
.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