<template>
  <div class="daliy" v-loading="loading" v-if="result" :style="{zoom:zoomW}">
    <div class="head">
      <div class="name">销售结果分析</div>
      <div class="nav-item" :class="{'active':tab==0}" @click="changeTabHandler(0)">日常销售分析</div>
      <div class="nav-item" :class="{'active':tab==1}" @click="changeTabHandler(1)">年度数据统计</div>
      <!-- <div class="travelData">
        出团日期：
        <span class="ipt">
          <div class="left-top-border-samll"></div>
          <div class="right-bottom-border-samll"></div>
          <input v-model="beginTime" readonly />
        </span>
        <span class="ipt">
          <div class="left-top-border-samll"></div>
          <div class="right-bottom-border-samll"></div>
          <input v-model="endTime" readonly />
        </span>
      </div>-->
    </div>
    <div v-if="tab==0">
      <div class="base-box">
        <div class="base-item">
          <div class="rightbox"></div>
          <div class="leftbox"></div>
          <div class="top-after"></div>
          <div class="top">
            <span class="t">收客走势</span>
            <span class="d">
              <i class="iconfont icon-people"></i>
              收客人数
              <span class="blod">{{result.GuestTNum}}</span>
            </span>
          </div>
          <div class="content-box">
            <div class="qu-box">
              <shoukequ :data="result.GuestList"></shoukequ>
            </div>
            <div class="qu-price-box">
              <div class="sq-block-right"></div>
              <div class="sq-block-left"></div>
              <div class="t">客单价区间销售占比</div>
              <div class="c">
                <pricQujian :data="result.GuestRatioList"></pricQujian>
              </div>
            </div>
          </div>
        </div>
        <div class="base-item">
          <div class="rightbox"></div>
          <div class="leftbox"></div>
          <div class="top-after"></div>
          <div class="top">
            <span class="t">业绩走势</span>
            <span class="d right">
              <i class="iconfont icon-people"></i>
              总业绩
              <span class="blod">￥{{result.SaleTMoney}}</span>
            </span>
          </div>
          <div class="zhu-content-box">
            <yeji :data="result.TrajectoryList"></yeji>
          </div>
        </div>
      </div>
      <div class="middle-order-box">
        <div class="rightbox"></div>
        <div class="leftbox"></div>
        <div class="t">
          <span class="line"></span>
          <span class="n">订单数据分析展示</span>
          <span class="line last"></span>
        </div>
        <div class="content-box">
          <div class="item-box" style="width:346px;">
            <div class="sq-block-right"></div>
            <div class="sq-block-left"></div>
            <div class="t">订单来源占比</div>
            <div class="c">
              <pingtai :data="result.OrderFormRatioList"></pingtai>
            </div>
          </div>
          <div class="item-box" style="width:346px;">
            <div class="sq-block-right"></div>
            <div class="sq-block-left"></div>
            <div class="t">订单利润与亏损占比</div>
            <div class="c lirun">
              <div class="item">
                <span class="blod">80%</span>
                <br />盈利率
                <div class="progress" style="clip: rect(0px, 100px, 80px, 0px)"></div>
              </div>
              <div class="item" style="color:#5D78FF;">
                <span class="blod">20%</span>
                <br />亏损率
                <div
                  class="progress"
                  style="clip: rect(0px, 100px, 20px, 0px);border-color:#5D78FF;"
                ></div>
              </div>
            </div>
          </div>
          <div class="item-box" style="flex:1">
            <div class="sq-block-right"></div>
            <div class="sq-block-left"></div>
            <div class="t">订单类别销售占比</div>
            <div class="c lirun">
              <div
                class="more-items"
                :style="{'margin-right':index==result.OrderB2BTypeList.length?'0px':'20px'}"
                v-for="(item, index) in result.OrderB2BTypeList"
                :key="index"
              >
                <progressAny :percent="item.Ratio" :item="item.Name" :count="item.Num"></progressAny>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-order-box">
        <div class="rightbox"></div>
        <div class="leftbox"></div>
        <div class="l">
          <div class="sq-block-right"></div>
          <div class="sq-block-left"></div>
          <div class="t">产品线路销售占比</div>
          <div v-for="(item, index) in result.LineRatioList" style="height:100%;" :key="index">
            <div
              class="more-itms"
              style="min-width:110px;height:100%;"
              :style="{'margin-right':index==result.LineRatioList.length?'0px':'20px'}"
              v-if="item.Num>0"
            >
              <progressAny
                :percent="item.Ratio"
                :item="item.Name"
                :count="item.Num"
                :rank="2"
                color="#5D78FF"
              ></progressAny>
            </div>
          </div>
        </div>
        <div class="r">
          <div class="sq-block-right"></div>
          <div class="sq-block-left"></div>
          <div class="t">团队类型占比</div>
          <div class="c">
            <teamRatio :data="result.OrderJoinTypeRatioList"></teamRatio>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="base-box" v-if="yResult">
        <div class="base-item big">
          <div class="rightbox"></div>
          <div class="leftbox"></div>
          <div class="top-after"></div>
          <div class="lef-box">
            <div class="t" style="margin-top: -10px;">
              <span class="line"></span>
              <span class="n">{{year}}年度业绩统计</span>
              <span class="line last"></span>
            </div>
            <div class="table-s">
              <table>
                <thead>
                  <tr>
                    <th>月份</th>
                    <th>销售额</th>
                    <th>销售额环比</th>
                    <th>销售额同比</th>
                    <th>销售额占比</th>
                    <th>收客人数</th>
                    <th>人数环比</th>
                    <th>人数同比</th>
                    <th>待收金额</th>
                    <th>投诉</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in yResult.YearStatistics" :key="index">
                    <td class="month">{{item.Month}}</td>
                    <td>{{item.NowSaleMoney}}</td>
                    <td :class="{'up':item.HSaleProbability>0,'down':item.HSaleProbability<0}">
                      <i
                        :class="{'el-icon-caret-top':item.HSaleProbability>0,'el-icon-caret-bottom':item.HSaleProbability<0}"
                      ></i>
                      {{item.HSaleProbability}}%
                    </td>
                    <td :class="{'up':item.TSaleProbability>0,'down':item.TSaleProbability<0}">
                      <i
                        :class="{'el-icon-caret-top':item.TSaleProbability>0,'el-icon-caret-bottom':item.TSaleProbability<0}"
                      ></i>
                      {{item.TSaleProbability}}%
                    </td>
                    <td>{{item.SaleMoneyProbability}}%</td>
                    <td>{{item.NowSaleGuest}}</td>
                    <td :class="{'up':item.HGuestProbability>0,'down':item.HGuestProbability<0}">
                      <i
                        :class="{'el-icon-caret-top':item.HGuestProbability>0,'el-icon-caret-bottom':item.HGuestProbability<0}"
                      ></i>
                      {{item.HGuestProbability}}%
                    </td>
                    <td :class="{'up':item.TGuestProbability>0,'down':item.TGuestProbability<0}">
                      <i
                        :class="{'el-icon-caret-top':item.TGuestProbability>0,'el-icon-caret-bottom':item.TGuestProbability<0}"
                      ></i>
                      {{item.TGuestProbability}}%
                    </td>
                    <td class="down">{{item.NowSaleDueIn}}</td>
                    <td class="down">{{item.NowComplainNum}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="rig-box">
            <div class="sq-block-right"></div>
            <div class="sq-block-left"></div>
            <div class="t">去年数据对比</div>
            <div class="c">
              <div class="item">
                <div class="len">
                  <div class="ico"></div>
                  <div class="txt">
                    <span class="blod">￥{{yResult.YearComparison.NowSaleMoney}}</span>
                    <br />今年
                  </div>
                  <div class="ico yellow"></div>
                  <div class="txt yellow">
                    <span class="blod">￥{{yResult.YearComparison.BeforSaleMoney}}</span>
                    <br />去年
                  </div>
                </div>
                <div class="char">
                  <nddb
                    :newdata="yResult.YearComparison.NowSaleMoney"
                    :olddata="yResult.YearComparison.BeforSaleMoney"
                    title="销售额"
                    :colors="colorArray[0]"
                  ></nddb>
                </div>
              </div>
              <div class="item">
                <div class="len">
                  <div class="ico"></div>
                  <div class="txt">
                    <span class="blod">{{yResult.YearComparison.NowGuestNum}}人</span>
                    <br />今年
                  </div>
                  <div class="ico green"></div>
                  <div class="txt green">
                    <span class="blod">{{yResult.YearComparison.BeforGuestNum}}人</span>
                    <br />去年
                  </div>
                </div>
                <div class="char">
                  <nddb
                    :newdata="yResult.YearComparison.NowGuestNum"
                    :olddata="yResult.YearComparison.BeforGuestNum"
                    title="收客数"
                    :colors="colorArray[1]"
                  ></nddb>
                </div>
              </div>
              <div class="item">
                <div class="len">
                  <div class="ico"></div>
                  <div class="txt">
                    <span class="blod">{{yResult.YearComparison.NowComplainNum}}起</span>
                    <br />今年
                  </div>
                  <div class="ico red"></div>
                  <div class="txt red">
                    <span class="blod">{{yResult.YearComparison.BeforComplainNum}}起</span>
                    <br />去年
                  </div>
                </div>
                <div class="char">
                  <nddb :newdata="yResult.YearComparison.NowComplainNum" :olddata="yResult.YearComparison.BeforComplainNum" :colors="colorArray[2]" title="投诉"></nddb>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="base-box">
        <div class="base-item zoushi">
          <div class="rightbox"></div>
          <div class="leftbox"></div>
          <div class="top-after"></div>
          <div class="big-title">业绩走势</div>
          <div class="big-content">
            <ndzs :data="yResult.YearTrend"></ndzs>
          </div>
          <div class="d">
            <div class="block"></div>
            <span class="red">交易额</span>
            <div class="block red"></div>
            <span class="red">未收款</span>
            <div class="block yellow"></div>
            <span class="yellow">收客人数</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import shoukequ from "./shoukequ";
import pricQujian from "./priceQujian";
import yeji from "./yeji";
import pingtai from "./pingtai";
import progressAny from "./progress";
import teamRatio from "./teamRatio";
import nddb from "./nianduduibi";
import ndzs from "./nianduzoushi";
export default {
  data() {
    return {
      beginTime: "2019-07-01",
      endTime: "2019-07-31",
      zoomW: 0,
      loading: false,
      result: null,
      tab: 1,
      colorArray: [
        ["#EFB017", "#F7E61B"],
        ["#19B466", "#65DAC2"],
        ["#FD3C7C", "#FFABC7"]
      ],
      year: 0,
      yResult: null
    };
  },
  components: {
    shoukequ,
    pricQujian,
    yeji,
    pingtai,
    progressAny,
    teamRatio,
    nddb,
    ndzs
  },
  mounted() {
    this.year = new Date().getFullYear();
    this.zoomW = (document.documentElement.clientWidth / 1920).toFixed(2);
    this.init();
    this.initYear();
  },
  methods: {
    init() {
      this.loading = true;
      let query = {
        StartTime: "2019-01-01",
        EndTime: "2019-12-30",
        PriceSection: "1000-2999,3000-4999,5000-7999,8000-9999,10000-*"
      };
      this.apipost("sellorder_post_GetSellDeepAnalysisForDaily", query, r => {
        this.result = r.data.data;
        this.loading = false;
      });
    },
    initYear() {
      let query = {
        Year: this.year
      };
      this.apipost("sellorder_post_GetSellDeepAnalysisForYear", query, r => {
        this.yResult = r.data.data;
      });
    },
    changeTabHandler(index) {
      this.tab = index;
    }
  }
};
</script>
<style scoped>
.daliy {
  position: absolute;
  left: 310px;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  padding-bottom: 20px;
  padding-right: 10px;
  overflow-x: hidden;
}
.daliy .head {
  height: 64px;
  background: url("../../assets/img/persion/bg-daily.png");
  background-size: 100% 100%;
  margin-top: 10px;
  display: flex;
}
.daliy .head .name {
  margin-top: 15px;
  font-size: 32px;
  color: #4bdbff;
  font-family: pingfangR;
  margin-left: 147px;
  margin-right: 134px;
}
.daliy .head .nav-item {
  width: 196px;
  height: 40px;
  margin-top: 13px;
  text-align: center;
  background: url("../../assets/img/persion/nav.png");
  line-height: 40px;
  color: #49597d;
  font-family: pingfangR;
  font-size: 20px;
  margin-right: 54px;
  cursor: pointer;
}
.daliy .head .nav-item.active,
.daliy .head .nav-item:hover {
  background: url("../../assets/img/persion/nav-hover.png");
  color: #ededed;
}
.daliy .head .travelData {
  margin-left: 222px;
  font-size: 14px;
  color: #4379d7;
  margin-top: 19px;
  line-height: 32px;
  height: 32px;
}
.daliy .head .travelData .ipt {
  margin-left: 8px;
  width: 122px;
  height: 32px;
  background: rgba(4, 8, 29, 1);
  border: 1px solid rgba(14, 23, 60, 1);
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.daliy .head .travelData .ipt input {
  height: 100%;
  width: 100%;
  line-height: 32px;
  color: #fff;
  padding: 0 12px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
.daliy .head .left-top-border-samll::before {
  position: absolute;
  width: 8px;
  height: 8px;
  left: -1px;
  top: -1px;
  content: " ";
  border-left: 1px solid #4379d7;
  border-top: 1px solid #4379d7;
}
.daliy .head .right-bottom-border-samll::after {
  position: absolute;
  width: 8px;
  height: 8px;
  right: -1px;
  bottom: -1px;
  content: " ";
  border-right: 1px solid #4379d7;
  border-bottom: 1px solid #4379d7;
}
.daliy .base-box {
  margin: 0 3px;
  margin-top: 20px;
  display: flex;
}
.daliy .base-box .base-item {
  flex: 1;
  height: 345px;
  border: 1px solid rgba(2, 81, 136, 1);
  padding: 21px 28px;
  box-sizing: border-box;
  position: relative;
  margin-right: 17px;
}
.daliy .base-box .base-item:last-child {
  margin-right: 0px;
}
.daliy .leftbox::after {
  width: 7px;
  height: 7px;
  border: 2px solid rgba(1, 200, 255, 1);
  top: -3px;
  left: -3px;
  content: " ";
  position: absolute;
  display: block;
}
.daliy .leftbox::before {
  width: 7px;
  height: 7px;
  border: 2px solid rgba(1, 200, 255, 1);
  bottom: -3px;
  left: -3px;
  content: " ";
  position: absolute;
  display: block;
}
.daliy .rightbox::after {
  width: 7px;
  height: 7px;
  border: 2px solid rgba(1, 200, 255, 1);
  top: -3px;
  right: -3px;
  content: " ";
  position: absolute;
  display: block;
}
.daliy .rightbox::before {
  width: 7px;
  height: 7px;
  border: 2px solid rgba(1, 200, 255, 1);
  bottom: -3px;
  right: -3px;
  content: " ";
  position: absolute;
  display: block;
}
.daliy .base-box .base-item .top-after {
  height: 49px;
  border: 1px solid #019cff;
  left: 7px;
  right: 7px;
  position: absolute;
  border-radius: 3px;
  display: block;
  top: -6px;
  border-bottom: none;
}

.daliy .base-box .base-item .top-after::after {
  content: " ";
  left: -2px;
  bottom: -2px;
  background: #fff;
  display: block;
  border-radius: 3px;
  width: 3px;
  height: 3px;
  position: absolute;
}
.daliy .base-box .base-item .top-after::before {
  content: " ";
  right: -2px;
  bottom: -2px;
  background: #fff;
  display: block;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  position: absolute;
}
.daliy .base-box .base-item .top {
  display: flex;
  align-items: center;
  position: relative;
}
.daliy .base-box .base-item .top .t {
  font-size: 18px;
  font-family: pingfangR;
  margin-right: 50px;
  color: #fff;
}
.daliy .base-box .base-item .top .d {
  height: 33px;
  background: rgba(71, 165, 255, 0);
  border-radius: 17px;
  line-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  color: #fff;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #0251889e;
  box-shadow: 0 0 10px #025188 inset;
}
.daliy .base-box .base-item .top .d.right {
  position: absolute;
  top: -4px;
  right: 25px;
}
.daliy .base-box .base-item .top .d .blod {
  font-size: 16px;
  color: #46c3f1;
  font-family: pingfangR;
  margin-left: 5px;
}
.daliy .base-box .base-item .top .d i {
  font-size: 14px;
  color: #3aa0eb;
}
.daliy .content-box {
  display: flex;
  margin-top: 30px;
}
.daliy .content-box .qu-box {
  height: 220px;
  width: 540px;
}
.daliy .content-box .qu-price-box {
  width: 241px;
  height: 265px;
  background: rgba(3, 85, 164, 0.2);
  margin-left: 36px;
  margin-top: -36px;
  border: 1px solid #0355a4;
  border-left: none;
  border-right: none;
  position: relative;
}
.daliy .sq-block-left::before {
  content: " ";
  display: block;
  width: 7px;
  height: 2px;
  position: absolute;
  top: -2px;
  left: 0px;
  background: #019cff;
}
.daliy .sq-block-left::after {
  content: " ";
  display: block;
  width: 7px;
  height: 2px;
  position: absolute;
  bottom: -2px;
  left: 0px;
  background: #019cff;
}
.daliy .sq-block-right::before {
  content: " ";
  display: block;
  width: 7px;
  height: 2px;
  position: absolute;
  top: -2px;
  right: 0px;
  background: #019cff;
}
.daliy .sq-block-right::after {
  content: " ";
  display: block;
  width: 7px;
  height: 2px;
  position: absolute;
  bottom: -2px;
  right: 0px;
  background: #019cff;
}
.daliy .content-box .qu-price-box .t {
  margin: 18px 0;
  text-align: center;
  color: #fff;
  font-family: pingfangR;
  font-size: 14px;
}
.daliy .content-box .qu-price-box .c {
  top: 53px;
  bottom: 24px;
  left: 0;
  right: 0;
  position: absolute;
}
.daliy .zhu-content-box {
  position: absolute;
  top: 78px;
  bottom: 0;
  left: 0;
  right: 0;
}
.daliy .middle-order-box,
.daliy .bottom-order-box {
  border: 1px solid rgba(2, 81, 136, 1);
  height: 300px;
  padding: 10px 23px;
  box-sizing: border-box;
  margin: 15px 3px;
  position: relative;
}
.daliy .bottom-order-box {
  height: 246px;
}
.daliy .base-box .base-item.big .lef-box .t,
.daliy .middle-order-box .t {
  display: flex;
  align-items: center;
}
.daliy .base-box .base-item.big .lef-box .t .line,
.daliy .middle-order-box .t .line {
  display: block;
  background: url("../../assets/img/persion/split-line.png") repeat;
  height: 9px;
  padding-top: 4px;
  box-sizing: border-box;
  flex: 1;
  position: relative;
}
.daliy .base-box .base-item.big .lef-box .t .line::after,
.daliy .middle-order-box .t .line::after {
  display: block;
  content: " ";
  height: 1px;
  width: 100%;
  background: #075089;
}
.daliy .base-box .base-item.big .lef-box .t .line::before,
.daliy .middle-order-box .t .line::before {
  width: 3px;
  height: 3px;
  background: rgba(1, 200, 255, 1);
  display: block;
  content: " ";
  position: absolute;
  left: -6px;
  top: 3px;
  border-radius: 50%;
}
.daliy .base-box .base-item .lef-box .t .line.last::before,
.daliy .middle-order-box .t .line.last::before {
  left: unset;
  right: -6px;
}
.daliy .base-box .base-item.big .lef-box .t .n,
.daliy .middle-order-box .t .n {
  display: block;
  font-size: 20px;
  width: 160px;
  margin: 0 10px;
  color: #fff;
  font-family: pingfangR;
}
.daliy .base-box .base-item.big .lef-box .t .n {
  width: 168px;
}
.daliy .middle-order-box .content-box {
  margin-top: 15px;
  display: flex;
  align-items: baseline;
}
.daliy .middle-order-box .content-box .item-box {
  background: rgba(3, 85, 164, 0.2);
  margin-right: 23px;
  border: 1px solid #0355a4;
  border-left: none;
  border-right: none;
  position: relative;
  height: 215px;
  padding: 0 18px;
}
.daliy .middle-order-box .content-box .item-box:last-child {
  margin-right: 0px;
  box-sizing: border-box;
}
.daliy .middle-order-box .content-box .item-box .t {
  margin-top: 18px;
  font-size: 14px;
  color: #fff;
  font-family: pingfangR;
}
.daliy .middle-order-box .content-box .item-box .c {
  position: absolute;
  top: 54px;
  bottom: 0px;
  right: 18px;
  left: 18px;
}
.daliy .middle-order-box .content-box .item-box .lirun {
  display: flex;
}
.daliy .middle-order-box .content-box .item-box .lirun .item {
  width: 100px;
  height: 100px;
  border: 3px solid rgba(1, 156, 255, 0.3);
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
  color: #46c3f1;
  padding-top: 12px;
  margin-right: 108px;
}
.daliy .middle-order-box .content-box .item-box .lirun .item:last-child {
  margin-right: 0px;
}
.daliy .middle-order-box .content-box .item-box .lirun .item span.blod {
  font-size: 28px;
  font-family: pingfangR;
  padding: 5px;
  border-bottom: 1px solid #46c3f1;
  display: inline-block;
}
.daliy .middle-order-box .content-box .item-box .lirun .item .progress {
  width: 100px;
  height: 100px;
  border: 3px solid #46c3f1;
  border-radius: 50%;
  position: absolute;
  left: -3px;
  top: -3px;
}
.daliy .middle-order-box .content-box .item-box .lirun .more-itms {
  height: 100%;
  flex: 1;
  margin-right: 20px;
}
.daliy .bottom-order-box {
  display: flex;
  align-items: flex-end;
  padding: 19px 23px;
}
.daliy .bottom-order-box .l,
.daliy .bottom-order-box .r {
  flex: 1;
  border: 1px solid #0355a4;
  border-left: none;
  border-right: none;
  position: relative;
  height: 215px;
  padding: 0 18px;
  background: rgba(3, 85, 164, 0.2);
  flex-direction: row;
}
.daliy .bottom-order-box .r {
  width: 346px;
  margin-left: 26px;
  flex: unset;
}
.daliy .bottom-order-box .l {
  height: 167px;
  display: flex;
}
.daliy .bottom-order-box .l .t {
  position: absolute;
  top: -47px;
  left: calc((100% - 279px) / 2);
  height: 47px;
  background: url("../../assets/img/persion/t-bg.png") 100% 100%;
  line-height: 47px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-family: pingfangR;
  width: 279px;
}
.daliy .bottom-order-box .r .t {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  font-family: pingfangR;
  width: 100%;
}
.daliy .bottom-order-box .r .c {
  flex: 1;
  width: 100%;
  height: calc(100% - 50px);
}
.daliy .bottom-order-box .l .more-items {
  flex: 1;
  height: 100%;
  margin-right: 20px;
}
.daliy .base-box .base-item.big {
  height: 548px;
  display: flex;
}
.daliy .base-box .base-item.big .rig-box {
  width: 260px;
  margin-left: 20px;
  height: 490px;
  background: rgba(3, 85, 164, 0.2);
  position: relative;
}
.daliy .base-box .base-item.big .lef-box {
  flex: 1;
  height: 100%;
}
.daliy .base-box .base-item.big .lef-box .table-s table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.daliy .base-box .base-item.big .lef-box .table-s table thead {
  background: rgba(39, 88, 171, 0);
  border: 1px solid rgba(15, 92, 166, 1);
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0 0 13px rgba(15, 92, 166, 0.8) inset;
}
.daliy .base-box .base-item.big .lef-box .table-s table thead th {
  height: 30px;
  text-align: left;
  padding-left: 10px;
  font-size: 14px;
  font-family: pingfangR;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.daliy
  .base-box
  .base-item.big
  .lef-box
  .table-s
  table
  tbody
  tr:nth-child(odd) {
  background: rgba(26, 75, 157, 0.26);
  border: 1px solid rgba(75, 188, 255, 0);
}
.daliy
  .base-box
  .base-item.big
  .lef-box
  .table-s
  table
  tbody
  tr:nth-child(even) {
  background: rgba(26, 75, 157, 0.13);
  border: 1px solid rgba(75, 188, 255, 0);
}
.daliy .base-box .base-item.big .lef-box .table-s table tbody td {
  font-size: 12px;
  color: #a2dbff;
  text-align: left;
  padding-left: 10px;
  height: 36px;
  line-height: 36px;
}
.daliy .base-box .base-item.big .lef-box .table-s table tbody td.month {
  color: #fff;
}
.daliy .base-box .base-item.big .lef-box .table-s table tbody td.up {
  color: #00e000;
}
.daliy .base-box .base-item.big .lef-box .table-s table tbody td.down {
  color: #ff4c52;
}
.daliy .base-box .base-item.big .lef-box .table-s table tbody tr:hover {
  border: 1px solid rgba(75, 188, 255, 1);
  box-shadow: 0 0 13px rgba(75, 188, 255, 0.8);
  background: none;
}
.daliy .base-box .base-item.big .rig-box .t {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  font-family: pingfangR;
}
.daliy .base-box .base-item.big .rig-box .c {
}
.daliy .base-box .base-item.big .rig-box .c .item {
  margin-top: 15px;
  padding-left: 20px;
  display: flex;
}
.daliy .base-box .base-item.big .rig-box .c .item .char {
  width: 120px;
  height: 120px;
  margin-right: 15px;
  background: rgba(1, 156, 255, 0.1);
  border-radius: 50%;
}
.daliy .base-box .base-item.big .rig-box .c .item .len {
  flex: 1;
  padding-top: 10px;
}
.daliy .base-box .base-item.big .rig-box .c .item .len .ico {
  width: 20px;
  height: 5px;
  margin-bottom: 5px;
  background: linear-gradient(
    135deg,
    rgba(0, 103, 204, 0.88),
    rgba(0, 191, 249, 0.88)
  );
}
.daliy .base-box .base-item.big .rig-box .c .item .len .ico.yellow {
  background: linear-gradient(
    135deg,
    rgba(239, 176, 23, 0.88),
    rgba(247, 230, 27, 0.88)
  );
}
.daliy .base-box .base-item.big .rig-box .c .item .len .ico.green {
  background: linear-gradient(
    135deg,
    rgba(101, 218, 194, 1),
    rgba(25, 180, 102, 1)
  );
}
.daliy .base-box .base-item.big .rig-box .c .item .len .ico.red {
  background: linear-gradient(
    135deg,
    rgba(255, 171, 199, 0.88),
    rgba(253, 60, 124, 0.88)
  );
}
.daliy .base-box .base-item.big .rig-box .c .item .len .txt {
  font-size: 12px;
  color: #0067cc;
  margin-bottom: 10px;
}
.daliy .base-box .base-item.big .rig-box .c .item .len .txt .blod {
  font-family: pingfangR;
}
.daliy .base-box .base-item.big .rig-box .c .item .len .txt.yellow {
  color: #efb017;
}
.daliy .base-box .base-item.big .rig-box .c .item .len .txt.green {
  color: #19b466;
}
.daliy .base-box .base-item.big .rig-box .c .item .len .txt.red {
  color: #fd3c7c;
}
.daliy .base-box .base-item.zoushi {
  height: 357px;
  display: flex;
  background: rgba(39, 88, 171, 0.1);
}
.daliy .base-box .base-item.zoushi .big-title {
  font-size: 20px;
  color: #fff;
  font-family: pingfangR;
  margin-top: -10px;
}
.daliy .base-box .base-item.zoushi .big-content {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
}

.daliy .base-box .base-item.zoushi .d {
  height: 33px;
  background: rgba(71, 165, 255, 0);
  border-radius: 17px;
  line-height: 28px;
  padding: 0 20px;
  font-size: 12px;
  color: #4487f0;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #0251889e;
  box-shadow: 0 0 10px #025188 inset;
  position: absolute;
  top: 9px;
  right: 30px;
  display: flex;
  align-items: center;
}
.daliy .base-box .base-item.zoushi .d span {
  margin-right: 40px;
}
.daliy .base-box .base-item.zoushi .d span:last-child {
  margin-right: 0;
}
.daliy .base-box .base-item.zoushi .d .yellow {
  color: #ffb822;
}
.daliy .base-box .base-item.zoushi .d .red {
  color: #fd3c7c;
}
.daliy .base-box .base-item.zoushi .d.right {
  position: absolute;
  top: -4px;
  right: 25px;
}
.daliy .base-box .base-item.zoushi .d .blod {
  font-size: 16px;
  color: #46c3f1;
  font-family: pingfangR;
  margin-left: 5px;
}
.daliy .base-box .base-item.zoushi .d i {
  font-size: 14px;
  color: #3aa0eb;
}
.daliy .base-box .base-item.zoushi .d .block {
  width: 16px;
  height: 9px;
  margin-right: 10px;
  background: linear-gradient(
    0deg,
    rgba(68, 135, 240, 0.88),
    rgba(176, 208, 248, 0.88)
  );
}
.daliy .base-box .base-item.zoushi .d .block.red {
  background: linear-gradient(
    0deg,
    rgba(255, 171, 199, 0.88),
    rgba(253, 60, 124, 0.88)
  );
}
.daliy .base-box .base-item.zoushi .d .block.yellow {
  background: #ffb822;
  width: 16px;
  height: 4px;
}
</style>