<template>
  <div class="app-container home" >
    <div id="main" >
      <div class="card_left">
        <el-card class="box-card card1 " v-loading="loading">
          <div class="title">
            <span>用户概括</span>
          </div>
          <div class="contain">
            <div id="user" ref="user" style="width: 100%;height: 400px;"></div>
          </div>
        </el-card>
        <el-card class="box-card card2" v-loading="loading">
          <div class="title">
            <span>消费数据统计</span>
          </div>
          <div class="contain">
            <el-card class="box-card">
              <div class="left"><img :src="tj1" alt="" class="tjimg"></div>
              <div class="right">
                <div class="num" style="color:#FFCB27;">{{collectList.total}}</div>
                <div class="num_txt">当天支付金额</div>
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="left"><img :src="tj2" alt="" class="tjimg"></div>
              <div class="right">
                <div class="num"  style="color:#9ED475">{{collectList.dishCount}}</div>
                <div class="num_txt">当天消费次数</div>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
      <div class="card_right">
        <el-card class="box-card card3" v-loading="loading">
          <div class="title">
            <span>充值行为分析</span>
          </div>
          <div class="contain">
            <div class="top">
              <el-card class="box-card" style="background:#79A8FF">
                <div class="num">{{orderMoney}}</div>
                <div class="num_txt" >今日充值总金额(元)</div>
              </el-card>
              <el-card class="box-card" style="background:#FF7859">
                <div class="num">{{orderCount}}</div>
                <div class="num_txt">今日充值次数(次)</div>
              </el-card>
              <el-card class="box-card" style="background:#FFC341">
                <div class="num">{{orderMoneyAverage}}</div>
                <div class="num_txt">今日平均充值金额(元)</div>
              </el-card>
            </div>
            <div class="middle">
              <el-card class="box-card" style="height:270px">
                <div class="header"><span>支付方式</span></div>
                <div class="zf" style="margin-top:40px">
                  <div class="introduce">
                    <div class="round xjbor"></div>
                    <div class="name">{{ payTypeCollectList[0].payType ==1?"现金":""}}</div>
                    <div class="ratio xjbc">{{payTypeCollectList[0].money}} ({{payTypeCollectList[0].radio}})</div>
                  </div>
                  <div class="progress">
                    <div class="progress1 xjbg"></div>
                    <div class="progress2 xjbg" :style="payTypeCollectList[0].radio"></div>
                  </div>
                </div>
                <div class="zf">
                  <div class="introduce">
                    <div class="round zfbbor"></div>
                    <div class="name">{{payTypeCollectList[1].payType == 2?"微信":""}}</div>
                    <div class="ratio zfbc">{{payTypeCollectList[1].money}} ({{payTypeCollectList[1].radio}})</div>
                  </div>
                  <div class="progress">
                    <div class="progress1 zfbbg"></div>
                    <div class="progress2 zfbbg" :style="payTypeCollectList[1].radio"></div>
                  </div>
                </div>

                <div class="zf">
                  <div class="introduce">
                    <div class="round wxbor"></div>
                    <div class="name">{{payTypeCollectList[2].payType==3?"支付宝":""}}</div>
                    <div class="ratio wxbc">{{payTypeCollectList[2].money}} ({{payTypeCollectList[2].radio}})</div>
                  </div>
                  <div class="progress">
                    <div class="progress1 wxbg"></div>
                    <div class="progress2 wxbg" :style="payTypeCollectList[2].radio"></div>
                  </div>
                </div>



                <div class="zf">
                  <div class="introduce">
                    <div class="round qtbor"></div>
                    <div class="name">{{payTypeCollectList[3].payType==4?"其他":""}}</div>
                    <div class="ratio qtbc">{{payTypeCollectList[3].money}} ({{payTypeCollectList[3].radio}})</div>
                  </div>
                  <div class="progress">
                    <div class="progress1 qtbg"></div>
                    <div class="progress2 qtbg" :style="payTypeCollectList[3].radio"></div>
                  </div>
                </div>
              </el-card>
              <el-card class="box-card" style="height:270px">
                <div class="header"><span>充值渠道</span></div>
                <div id="channel" style="width:100%;height:240px;" ></div>
              </el-card>
            </div>
          </div>

        </el-card>
        <el-card class="box-card card4" v-loading="loading">
          <div class="title">
            <span>充值数据统计</span>
          </div>
          <div class="contain">
            <div class="data">
              <el-dropdown @command="handleYear" class="data_type">
                <span class="el-dropdown-link">
                  {{year}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="dropdown" >
                  <template v-for="item in yearList"  >
                    <el-dropdown-item  :command="item.id"   :key="item.id">{{item.value}}</el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown @command="handleMonth" class="data_type">
                <span class="el-dropdown-link">
                  {{month}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="dropdown">
                  <template v-for="item in monthList">
                    <el-dropdown-item  :command="item.id"  :key="item.id">{{item.value}}</el-dropdown-item>
                  </template>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="bottom" >
              <div id="statistics" style="width: 100%;height:300px;margin-top:0px;"></div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import tj1Img from "@/assets/images/tj1.png";
import tj2Img from "@/assets/images/tj2.png";
import { employeesCountApi, personnelRatioApi, channelOrderMoneyApi, payTypeCollectApi, orderMoneyApi, collectApi, dateCollectApi  } from "@/api/recharge/index";
export default {
  name: "index",
  data() {
    return {
      employeesCountNum:null, //注册总人数
      personnelRatioList:[], //注册人员比例
      channelOrderMoneList:[], //渠道订单金额
      payTypeCollectList:[
        {payType:null,money:null,radio:null},
        {payType:null,money:null,radio:null},
        {payType:null,money:null,radio:null},
        {payType:null,money:null,radio:null}
      ], //支付方式数据
      payTypeCollectListCount:null,
      orderMoney:null, //今日充值金额
      orderCount:null, //今日充值次数
      orderMoneyAverage:null,//今日平均充值金额
      collectList:[
        {
          balance:null,
          total:null
        }
      ],
      startTime:null, // 开始时间
      endTime:null, // 结束时间
      month:"月",
      monthList:[
        {id:'1', value:'1月'},
        {id:'2', value:'2月'},
        {id:'3', value:'3月'},
        {id:'4', value:'4月'},
        {id:'5', value:'5月'},
        {id:'6', value:'6月'},
        {id:'7', value:'7月'},
        {id:'8', value:'8月'},
        {id:'9', value:'9月'},
        {id:'10', value:'10月'},
        {id:'11', value:'11月'},
        {id:'12', value:'12月'},
        {id:'所有', value:'所有'},
      ],
      monthParameter:'',
      year:"年",
      yearList:[],
      tj1:tj1Img,
      tj2:tj2Img,
      dataOrderTime:[],//充值数据统计 --日期
      dataOrderTotal:[],//充值数据统计 --数据


      // 遮罩层
      loading: true,
      // 导出遮罩层
      open: false,

    };
  },
  created(){
    this.yearListCreate()
  },
  mounted() {
    this.employeesCount()
    this.personnelRatio()
    this.channelOrderMoney()
    this.payTypeCollect()
    this.orderMoneyList()
    this.collect()
    this.dateCollect()
  },
  methods: {
    yearListCreate(){ // 获取年列表
      let startYear = 2021;
      let endYear = new Date().getFullYear();
      let arr = []
      for(let i = startYear; i<=endYear; i++){
        arr.push(i)
      }
      this.yearList = arr.map(item=>{
        return {
          id:item,
          value:item + '年'
        }
      })
    },
    employeesCount() {//注册总人数
        employeesCountApi().then(response => {
          this.employeesCountNum = response.data;
        }
      );
    },
    personnelRatio() {//注册总人数
      personnelRatioApi().then(response => {
        this.personnelRatioList = response.data
        this.personnelRatioList = response.data.map(item => {
            return {
                value: item.count,
                name: item.raType
            }
        })
        let total = ''
        for(let i =0;i<this.personnelRatioList.length;i++){
          total = Number(total) + Number(this.personnelRatioList[i].value)
        }
        for(let i =0;i<this.personnelRatioList.length;i++){
          if(total){
            this.personnelRatioList[i].ratio = '0.00%'
          }else{
            this.personnelRatioList[i].ratio = ((this.personnelRatioList[i].value / total) *100).toFixed(2) + '%'
          }

        }
        setTimeout(()=>{
          this.drawLine1();
        },100)

      });
    },
    channelOrderMoney() {//渠道订单金额
      channelOrderMoneyApi().then(response => {
        this.channelOrderMoneyList = response.data
        this.channelOrderMoneyList = response.data.map(item => {
            return {
                value: item.money,
                name: item.chName
            }
        })
        let total = ''
        for(let i =0;i<this.channelOrderMoneyList.length;i++){
          total = Number(total) + Number(this.channelOrderMoneyList[i].value)
        }
        for(let i =0;i<this.channelOrderMoneyList.length;i++){
          if(total == '0'){
            this.channelOrderMoneyList[i].ratio = '0.00%'
          }else{
            this.channelOrderMoneyList[i].ratio = ((this.channelOrderMoneyList[i].value / total) *100).toFixed(2) + '%'
          }

        }
        this.drawLine3();
      });
    },
    payTypeCollect(){ //支付方式
      payTypeCollectApi().then(response => {
        let arr = response.data
        var total = ''
        for(let i = 0; i<arr.length; i++){
          total = Number(total) +  Number(arr[i].money)
        }
        for(let i = 0; i<arr.length; i++){
          if(total == 0){
            arr[i].radio = '0%'
          }else{
            arr[i].radio = ((arr[i].money / total) * 100).toFixed(2) + '%'
          }
        }
        for(let i = 0; i<arr.length; i++){
          if(arr.find(val=>val.payType == Number(i+1))){
            arr[i].money = arr.find(val=>val.payType == Number(i+1)).money
            arr[i].payType = arr.find(val=>val.payType == Number(i+1)).payType
            arr[i].radio = arr.find(val=>val.payType == Number(i+1)).radio
          }
        }
        this.payTypeCollectList = arr
      });
    },
    orderMoneyList() {// 今日充值信息
      orderMoneyApi().then(response => {
        this.orderMoney = response.data.total
        this.orderCount = response.data.count
        if(this.orderCount == 0){
          this.orderMoneyAverage = 0
        }else{
          this.orderMoneyAverage = (this.orderMoney / this.orderCount).toFixed(2)
        }
        this.loading = false
      });
    },
    collect() {// 消费数据统计
      collectApi().then(response => {
        this.collectList = response.data
      });
    },
    handleMonth(month) {
      this.month = month + "月"
      if(this.month !="月" && this.month !="所有月"){
        if(this.month.length<3){
          this.monthParameter = '0' + month
          if(this.year !="年"){
            let lastDay= new Date(2019,month,0).getDate()
            this.resetDataAndStartEnd(0, this.year, this.monthParameter, this.monthParameter, lastDay)
          }
        }
      }else if(this.month =="所有月"){
        if(this.year !="年"){
          this.resetDataAndStartEnd(1, this.year, '01', '12', 31)
        }
      }
    },
    handleYear(year) {
      this.year = year + "年"
      if(this.month !="月"){
        if(this.month =="所有月"){
          this.resetDataAndStartEnd(1, this.year, '01', 12, 31)
        }else{
          let month1 = ''
          if((this.monthParameter).substring(0,1) == "0"){
            month1 = (this.monthParameter).substring(1,2)
          }else{
            month1 = (this.monthParameter).substring(0,2)
          }
          let lastDay= new Date(2019,month1,0).getDate()
          this.resetDataAndStartEnd(0, this.year, this.monthParameter, this.monthParameter, lastDay)
        }

      }
    },
    resetDataAndStartEnd(type, year, monthStart, monthEnd, lastDay){
      this.dataOrderTime = []
      this.dataOrderTotal = []
      this.startTime = year.substring(0,4) + '-' + monthStart + '-' + '01' + ' 00:00:00'
      this.endTime = year.substring(0,4) + '-' + monthEnd + '-' + lastDay + ' 23:59:59'
      this.dateCollectType(type, this.startTime, this.endTime)
    },
    dateCollect(){ //初始化数据
      var myDate = new Date();
      let tYear = myDate.getFullYear();
      let tMonth = myDate.getMonth() + 1;
      let lastDay= new Date(tYear,tMonth,0).getDate()
      this.month = tMonth + '月'
      this.year = tYear + '年'
      if(tMonth<10){
        tMonth = '0' + tMonth
        this.monthParameter = tMonth
      }else{
        this.monthParameter = tMonth
      }
      this.dateCollectType(0, tYear + '-' + tMonth + '-' + '00' + ' 00:00:00', tYear + '-' + tMonth + '-' + lastDay + ' 23:59:59')
    },
    dateCollectType(type, startTime, endTime){
      dateCollectApi(this.addDateRange({"type":type, "startTime":startTime, "endTime":endTime})).then(response =>{
        for(let i =0;i<response.data.length; i++){
          this.dataOrderTime.push(response.data[i].orderTime)
          this.dataOrderTotal.push(response.data[i].total)
        }
        this.drawLine4();
      })
    },

    drawLine4(){
	    // 基于准备好的dom，初始化echarts实例
      let statistics = this.$echarts.init(document.getElementById('statistics'))
      let channel = this.$echarts.init(document.getElementById('channel'))
      let user = this.$echarts.init(document.getElementById('user'))
      // 指定图表的配置项和数据
      var option4 = {
        color:[
          '#5BA3ED'
        ],
        title: {
          text: '充值总额(元）',
          textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontSize: 12,
              fontWeight: 'normal',
              color: "#999"
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
           // orient: 'vertical',
          bottom:'0',
          padding:[0,0,0,100],
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          containLabel: false
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dataOrderTime,
          axisLine: {
              lineStyle: {
                  color: '#999',
                  width: 1 //这里是为了突出显示加上的

              }
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,
          axisLine: {
              lineStyle: {
                  color: '#999',
                  width: 1 //这里是为了突出显示加上的

              }
          },
        },
        series: [
          {
            // name: 'Email',
            type: 'line',
            stack: 'Total',
            data: this.dataOrderTotal,
            symbolSize:[8,8],
            itemStyle:{
              normal:{
                color:"#fff",
                borderColor:"#0C83FB",
                symbolSize: 20,
                lineStyle:{
                  color:"#0C83FB",
                  width:2
                }

              },

            }
          },

        ]
      };
      statistics.setOption(option4);
      window.onresize = function() {

      };
    },
    drawLine3(){
	    // 基于准备好的dom，初始化echarts实例
      let channel = this.$echarts.init(document.getElementById('channel'))
      // 指定图表的配置项和数据
      var option3 = {
        color:['#FF8A78', '#71A9D4', '#9ED475', '#5BCB5E', '#80F3E9', '#D971FF', '#D3DA67', '#42C7FF', '#9454FF', '#B97E76', '#A8A9B3', '#67BDC0'],
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
           // orient: 'vertical',
          bottom: '0%',
        },
        // series: [
        //   {
        //     name: '',
        //     type: 'pie',
        //     radius: ['40%', '70%'],
        //     avoidLabelOverlap: false,
        //     itemStyle: {
        //       borderRadius: 10,
        //       borderColor: '#fff',
        //       borderWidth: 2
        //     },
        //     label: {
        //       show: false,
        //       position: 'center'
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         fontSize: '12',
        //         fontWeight: 'bold'
        //       }
        //     },
        //     labelLine: {
        //       show: false
        //     },
        //     data: this.channelOrderMoneList
        //   }
        // ]
        series : [
          {
              name: '',
              type: 'pie',
              radius : ['50%', '60%'],
              // center: ['50%', '60%'],
              label: {
                  normal: {
                      show: true,
                      formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                  }
              },
              data:this.channelOrderMoneyList   //datas在其他地方已赋值
          }
        ]
      };
      channel.setOption(option3);

    },

    drawLine1(){
	    // 基于准备好的dom，初始化echarts实例
      let user = this.$echarts.init(document.getElementById('user'))
      // 指定图表的配置项和数据
      var option1 = {
        color:['#FF7859', '#598CFF', '#FFC63C', '#5BCB5E', '#80F3E9', '#D971FF', '#D3DA67', '#42C7FF', '#9454FF', '#B97E76', '#A8A9B3', '#67BDC0'],
        tooltip: {
          trigger: 'item'
        },
        title: {
            //backgroundColor: "pink", // 标题背景色
            text: "已注册人数",
            x: "34.8%",
            y: "45%",
            center:'center',
            textStyle: {
                fontSize: 12,
                color: "#000",
            }
        },
        graphic: {
            backgroundColor: "pink",
            type: "text",
            left: "34.8%",
            top: "35%",
            center:'center',
            style: {
                // text: this.employeesCountNum,
                text: 23,
                textAlign: "center",
                fill: "#000",
                fontSize: 30,
                backgroundColor: "pink",
            }
        },
        legend: {
          orient: 'vertical',
          top: '0%',
          right: '0%',
          center:'center',
          formatter: function(name){
      　　　　return name.length>4?name.substr(0,4)+"...":name;
      　　}
        },
        series : [
          {
              name: '',
              type: 'pie',
              radius : ['40%', '50%'],
              center: ['40%', '40%'],
              label: {
                  normal: {
                      show: true,
                      formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                  }
              },
              data:this.personnelRatioList   //datas在其他地方已赋值
          }
        ]
      }
      user.setOption(option1);
    },
  }
}
</script>

<style scoped lang="scss">
  ::-webkit-scrollbar-track
  {
    background: #fff;
    border-radius: 0;
  }

  ::-webkit-scrollbar
  {
    -webkit-appearance: none;
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb
  {
      cursor: pointer;
      border-radius: 5px;
      background: rgba(0,0,0,.25);
      transition: color .2s ease;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    margin-top:20px;
  }
  #main{
    .box-card{
      .title{
        text-align: left;
        span{
          font-size: 14px;
          color:#0C83FB;
          font-weight: 700;;
          padding-left:10px;
          border-left:3px solid #0C83FB;
          opacity: 1;
        }
      }
    }
    .card_left{
      margin-top:-20px;
      width:40%;
      float: left;
      .card1{
        height:500px;
        .contain{

          margin:30px auto 0;
          text-align: center;
          position: relative;
          width:100%;
          &>div{
            display: inline-block;
          }
          .num{
            font-size: 30px;
            margin:0 16px;
            position: absolute;
            top:31%;
            width:100%;
            margin-left:-10%;
            text-align: center;

          }
          .num_txt{
            font-size: 12px;
            color:#000;
            opacity: 0.65;
            position: absolute;
            top:43%;
            width:100%;
            margin-left:-10%;
            text-align: center;

          }
        }
      }
      .card2{
        height:340px;
        .contain{
          margin:20px auto 0;
          text-align: left;
          display: flex;
          .box-card{
            margin:30px 0;
            padding:40px 0;
            flex:2;
            .left{
              width:30%;
              display: inline-block;
              vertical-align: middle;
              .tjimg{
                width:100%;
              }
            }
            .right{
              display: inline-block;
              vertical-align: middle;
              width:60%;
              text-align: left;
              margin-left:10%;
              .num{
                font-size: 26px;
                margin-top:5px;
                width:100%;

              }
              .num_txt{
                font-size: 14px;
                margin-top:10px;
                color:#333;
                margin-right:14px;
                width:100%;
              }

            }
          }
          .box-card:nth-child(2){
            margin-left:20px;
          }



        }
      }
    }
    .card_right{
      margin-top:-20px;
      float:left;
      width:60%;
      .card3{
        width:100%;
        height:500px;
        margin-left:20px;
        .title{
          width:100%;
          margin:0 auto;
        }
        .contain{
          width:92%;
          margin:30px auto 0;
          .top{
            // display: flex;
            div{
              // flex:3;
              // justify-content: space-between;
              width:25%;
              display: inline-block;
              text-align: center;
              color:#fff;

              .num{
                font-size: 20px;
                display: block;
                width:100%;
              }
              .num_txt{
                font-size: 12px;
                margin-top:10px;
                width:100%;
                display: block;
              }
            }
            .box-card:nth-child(2),.box-card:nth-child(3){
              margin-left:12.5%;
            }

          }
          .middle{
            .el-card{
              width:48%;
              float: left;
              padding:0 !important;
              position: relative;
              .el-card__body{
                 padding:0 !important;
              }
              .header{
                width:100%;
                height:46px;
                font-size: 14px;
                color:#000;
                font-weight: 700;
                opacity: 0.65;
                margin-top:0;
                top:0px;
                left:0px;
                background-color: #FAFAFA;
                position: absolute;
                span{
                  margin:12px  0 0 10px;
                  display: block;
                }
                // padding:10px 20px;
              }

            }
            .el-card:nth-child(2){
              margin-left:4%;
            }
          }
          .bottom{
            margin-top:40px;
          }
          .data{
            width:100%;
            text-align: right;
            margin-left:-100px;
            .data_type{
              margin:20px 0 0 20px;
              padding:0 15px;
              border:1px solid #000;
            }

          }

        }
      }
      .card4{
        width:100%;
        height:340px;
        margin-left:20px;
        .title{
          width:100%;
          margin:0 auto;
        }
        .contain{
          width:100%;
          margin:30px auto 0;
          .data{
            width:100%;
            text-align: right;
            margin-left:-100px;
            margin-top:-20px;
            .data_type{
              margin:-40px 0 0 20px;
              padding:0 15px;
              border:1px solid #000;
            }

          }

        }
      }
    }

  }
.zf{
  // padding:0 20px;
  margin-top: 10px;
  .zfbc{
    color:#44B2FF
  }
  .zfbbor{
    border: 2px solid #44B2FF;
  }
  .zfbbg{
    background-color: #44B2FF;
  }
  .wxbc{
    color:#51D455
  }
  .wxbor{
    border: 2px solid #51D455;
  }
  .wxbg{
    background-color: #51D455
  }
  .xjbc{
    color:#FECB27
  }
  .xjbor{
    border: 2px solid #FECB27;
  }
  .xjbg{
    background-color: #FECB27
  }
  .qtbc{
    color:#FE9627
  }
  .qtbor{
    border: 2px solid #FE9627;
  }
  .qtbg{
    background-color: #FE9627
  }
  width:100%;
  .introduce{
    height:30px;
    line-height: 30px;
    div{
      display: inline-block;
      vertical-align: middle;
    }
    .round{
      width: 10px;
      height: 10px;
      background: #ffffff;
      border-radius: 50%;
    }
    .name{
      font-size: 14px;
      margin-left:10px;
    }
    .ratio{
      float: right;
      font-size: 14px;
    }
  }
  .progress{
    margin-top:0px;
    position: relative;
    height:8px;
    div{
      border-radius: 4px;
      height:8px;
      position: absolute;
      top:0;
      left:0;
    }
    .progress1{
      width:100%;
      z-index: 0;
      opacity: .2;
    }
    .progress2{
      width:0%;
      transition-property:width;
      transition-duration:1s;
      z-index: 1;

    }
  }
}
.zf:nth-child(1){
  margin-top:-20px !important;
}
.data_type{
  border:1px solid #E4E4E4 !important;
  color:#999;

}
.dropdown{
  max-height:150px;
  overflow-y:scroll;
  color:#999;
}
.el-dropdown-menu__item{
  color:#999;
}
</style>
