<template>
  <div class="home">
    <el-row :gutter="25">
    <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-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  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="结束日期"
                    @change="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-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-col>
            </el-row>
          </div>
          <div class="rank-list">
            <div class="rank-list-item" v-for="(item, index) in RankingList" :key="index">
              <div class="rank blue" v-if="index>2">NO.{{item.RankNum}}</div>
              <div class="rank" v-else-if="index==2"><img src="../assets/img/cust/thrid.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="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>
                <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>
                <div>{{item.DeptName}}</div>
              </div>
              <div class="score">{{currentRankType.unit=='元'?formatMoney(item.TotalNum):item.TotalNum}}
                <span class="unit">/ {{currentRankType.unit}}</span>
              </div>
            </div>
            <div v-if="RankingList.length < 1" class="nodata font-color-info">
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="tic-card" shadow="never">
          <div class="tic-content">
            <el-row :gutter="10">
              <el-col :span="8">
                <img src="../assets/img/home/money.png" style="margin:20px 0 0 20px;" />
              </el-col>
              <el-col :span="16">
                <div class="money-box">
                  <small>￥</small>
                  {{Briefing.totalCommission}}
                </div>
                <div class="tips">本月提成</div>
              </el-col>
            </el-row>
          </div>
          <div class="tic-chart" v-if="Briefing.sixMonthCommissionList">
            <ticheng :MYdata="Briefing.sixMonthCommissionList" />
          </div>
        </el-card>
        <el-card class="zhou-card" shadow="never">
          <el-row :gutter="10">
            <el-col :span="10" class="title">本周销冠</el-col>
            <el-col :span="14" class="money-box">
              <small>￥</small>
              {{Briefing.model.TotalPrice}}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span class="zhou-head">
                <img :src="Briefing.model.EmployeeImg" alt />
              </span>
            </el-col>
          </el-row>
          <div class="zhou-name">{{Briefing.model.EmployeeName}}</div>
          <div class="zhou-depart">
            {{Briefing.model.BranchName}}
            <b>·</b>
            {{Briefing.model.DeptName}}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="25" style="margin-top:25px;">
      <el-col :span="10">
        <el-card class="sum-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>数据汇总</span>
          </div>
          <div class="sum-list">
            <div class="sum-list-item">
              <div class="icon"></div>
              <div class="item-name">客户汇总</div>
              <div class="item-hui">
                新建客户
                <b>{{Briefing.allCustomerCount}}</b>个
              </div>
              <div class="item-hui">
                转成交客户
                <b>{{Briefing.caclCount}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon green"></div>
              <div class="item-name">跟进汇总</div>
              <div class="item-hui">
                跟进客户
                <b>{{Briefing.followUpCount}}</b>个
              </div>
              <div class="item-hui">
                新建客户中未跟进
                <b>{{Briefing.notFollowUpCount}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon blue"></div>
              <div class="item-name">商机汇总</div>
              <div class="item-hui">
                新建商机
                <b>{{Briefing.allBusinessCount}}</b>个
              </div>
              <div class="item-hui">
                赢单商机
                <b>{{Briefing.winningBusiness}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon zi"></div>
              <div class="item-name">订单汇总</div>
              <div class="item-hui">
                新建订单
                <b>{{Briefing.allOrderCount}}</b>个
              </div>
              <div class="item-hui">
                订单金额
                <b>{{Briefing.allOrderPrice}}</b>万
              </div>
            </div>
            <!-- <div class="sum-list-item">
                  <div class="icon qing"></div>
                  <div class="item-name">待收款金额汇总</div>
                  <div class="item-hui">未收金额<b>0</b>万</div>
                  <div class="item-hui">已收金额<b>0</b>万</div>
            </div>-->
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="notinmoney-card" shadow="never">
          <div class="title">待收款汇总</div>
          <div class="money">
            <small>￥</small>
            {{Briefing.DueInMoney}}
          </div>
          <div class="charts-box" v-if="Briefing.sixOrderList">
            <notincome :MYdata="Briefing.sixOrderList" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="sum-card ding" shadow="never">
          <div slot="header" class="clearfix">
            <span>遗忘提醒</span>
          </div>
          <div class="sum-list">
            <div class="sum-list-item">
              <div class="icon"></div>
              <div class="item-name">超过7天未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.sevenDayNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon green"></div>
              <div class="item-name">超过15天未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.fifteenDayNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon blue"></div>
              <div class="item-name">超过30天未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.ThirtyDayNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon zi"></div>
              <div class="item-name">超过3个月未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.threeMonthNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon qing"></div>
              <div class="item-name">超过6个月未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.sixMonthNum}}</b>个
              </div>
            </div>
            <div class="sum-list-item">
              <div class="icon block"></div>
              <div class="item-name">逾期未联系的客户</div>
              <div class="item-hui">
                <b>{{Briefing.beOverdueNum}}</b>个
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </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>
          </div>
          <div class="shang-list">
            <el-row :gutter="5">
              <el-col :span="12">
                <div class="shang-list-item">
                  <div class="icon">
                    <i class="iconfont iconVerifiedcustomername"></i>
                  </div>
                  <div class="title">新建客户</div>
                  <div class="result">{{Briefing.customerNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.customerRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.customerRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.customerRate > 0, 'green': Briefing.customerRate < 0}">{{Briefing.customerRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon orange">
                    <i class="iconfont iconlianxiren"></i>
                  </div>
                  <div class="title">新建联系人</div>
                  <div class="result">{{Briefing.contactNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.contactRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.contactRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.contactRate > 0, 'green': Briefing.contactRate < 0}">{{Briefing.contactRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon green">
                    <i class="iconfont iconshangji-"></i>
                  </div>
                  <div class="title">新建商机</div>
                  <div class="result">{{Briefing.businessNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.businessRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.businessRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.businessRate > 0, 'green': Briefing.businessRate < 0}">{{Briefing.businessRate}}</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon grey">
                    <i class="iconfont icongenjin"></i>
                  </div>
                  <div class="title">新建跟进</div>
                  <div class="result">0</div>
                  <!-- <div class="eq">
                    较上月
                    <i class="iconfont iconzujiantubiaokupx_- red"></i>
                    <span class="val red">40%</span>
                  </div> -->
                </div>
              </el-col>
              <el-col :span="12">
                <div class="shang-list-item">
                  <div class="icon blue">
                    <i class="iconfont icondingdan"></i>
                  </div>
                  <div class="title">新建订单</div>
                  <div class="result">{{Briefing.orderNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.orderRate > 0, 'green': Briefing.orderRate < 0}">{{Briefing.orderRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon red">
                    <i class="iconfont iconjine"></i>
                  </div>
                  <div class="title">订单金额</div>
                  <div class="result">{{Briefing.orderPriceNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.orderPriceRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-if="Briefing.orderPriceRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.orderPriceRate > 0, 'green': Briefing.orderPriceRate < 0}">{{Briefing.orderPriceRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon zi">
                    <i class="iconfont iconmoney"></i>
                  </div>
                  <div class="title">新建收款</div>
                  <div class="result">{{Briefing.financePriceNum}}</div>
                  <!-- <div class="eq">
                较上月
                <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
                <i class="iconfont iconic_trending_down_px green" v-else-if="Briefing.financePriceRate < 0"></i>
                <i class="iconfont iconchiping" v-else></i>
                <span class="val" :class="{'red': Briefing.financePriceRate > 0, 'green': Briefing.financePriceRate < 0}">{{Briefing.financePriceRate}}%</span>
                  </div>-->
                </div>
                <div class="shang-list-item">
                  <div class="icon yellow">
                    <i class="iconfont iconbaifang"></i>
                  </div>
                  <div class="title">新建拜访</div>
                  <div class="result">0</div>
                  <!-- <div class="eq">
                    较上月
                    <i class="iconfont iconzujiantubiaokupx_- red" v-if="Briefing.financePriceRate > 0"></i>
                    <i class="iconfont iconic_trending_down_px green" v-if="Briefing.financePriceRate < 0"></i>
                    <i class="iconfont iconchiping" v-else></i>
                    <span class="val red">100%</span>
                  </div> -->
                </div>
              </el-col>
            </el-row>

          </div>
        </el-card>
        <el-card shadow="never" style="margin-top:25px;">
          <div slot="header" class="clearfix">
            <span>能力评级</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="loudou-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="12">
                <span>销售漏斗</span>
              </el-col>
              <el-col :span="12" class="option-item" style>
                <el-select v-model="rankType2" size="mini" style="width:120px;" placeholder="请选择">
                  <el-option label="商机漏斗图" value="1"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div style="width:100%;height:100%;">
            <div v-if="RankingList.length < 1" class="nodata font-color-info">
              <p>努力开发中</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</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]);
            },
          },
          {
            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: "人" },
        { 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",
        },
      ],
      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();
    console.log(this.dataRangeList);
  },
  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);
    },
    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.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) {
            console.log("rankData", "res.data.data");
            this.RankingList = res.data.data;
          }
        }
      );
    },
  },
};
</script>

<style>
.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-tabs-content .el-tabs__header {
  margin: 0 !important;
}
.hide-tabs-content .el-tabs__content {
  display: none !important;
}
.hide-tabs-content .el-tabs__nav-wrap::after {
  background: none !important;
}
.hide_input_time {
  position: relative !important;
}
.hide_input_time .el-date-editor {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
</style>
