<template>
  <div class="mapData">
    <!-- 左侧指标栏列表 -->
    <div class="mapDataLeft"
         v-if="leftDafrt">
      <div v-if="leftDafrt.length!==0">指标名称</div>
      <!-- 指标名称 -->
      <div v-for="(item,index) in leftDafrt"
           :key="index"
           :class="{bgcolor:item.state}"
           @click="trickChange(index)">
           <div class="sanjiao"></div>
           {{item.name}}
           </div>
      <div style="margin:0 auto;color:#8fa3ae;font-size:1.375rem;"
           v-if="leftDafrt.length===0">暂无指标名</div>
    </div>
    <div class="mapDataRight">
      <div class="maptopSty">
        <!-- 年 -->
        <!-- <div class="yearD">
          <el-cascader v-model="value"
                       :options="options"
                       @change="handleChange"></el-cascader>
        </div> -->
        <!-- 月 -->
        <!-- 季 -->
        <!-- <div style="margin:0 auto;color:#8fa3ae;font-size:1.375rem;">该指标下暂无数据</div> -->
        <ul class="year">
          <li class="prev">
            <span :class="{'disable': !isReduceYear}"
                  @click="reduceYear"></span>
          </li>
          <li v-for="(year, index) in mapYearList"
              :key="index"
              :class="{'selected': selectYear == year}"
              @click="changeyear(year)">
            {{ year }}<span v-if="selectYear == year"></span>
          </li>
          <li class="next">
            <span :class="{'disable': !isAddYear}"
                  @click="addYear"></span>
          </li>
        </ul>
        <ul class="quarter">
          <!--      @click="selectQuarter=index" -->
          <li v-for="(item, index) in quarterList"
              :key="index"
              :class="{'selected': false}"
         >
            {{ item }}<span v-if="selectQuarter == index"></span>
          </li>
        </ul>
      </div>
      <div ref="mapRefs"></div>
    </div>
  </div>
</template>
<script>
// 引入数据计算js用于机选渲染的数据
// import ComputedData from '../../assets/js/computeddata'
import china from 'echarts/map/json/china.json'
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/map')
echarts.registerMap('china', china)
require('echarts/theme/shine')
export default {
  name: 'mapData',
  data () {
    return {
      datalist:{},
      yearStart: '',
      arr:[],
      yearEnd: '',
      isReduceYear: true,
      isAddYear: false,
      selectYear: '',
      selectQuarter: 0,
      mapYearList: [],
      quarterList: ['第一季度', '第二季度', '第三季度', '第四季度'],
      // 控制下拉框显示隐藏
      isHideProp: true,
      // 左侧当前默认
      defaultSelectLies: null,
      // 右侧默认显示数据
      defaultDataRight: null,
      leftCateData: null,
      option: {
        // title: {
        //   text: 'iphone销量',
        //   subtext: '纯属虚构',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left'
          // data: ['iphone3']
        },
        dataRange: {
          // min: 0,
          // max: 2500,
          show: true,
          x: 'left',
          y: 'bottom',
          // text: ['高', '低'], // 文本，默认为数值文本
          // calculable: true,
          splitList: [],
          color: [
            '#298ADC',
            '#479AE1',
            '#78B5E9',
            '#9FCAEF',
            '#C3DEF5',
            '#E2EFFA'
          ]
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // roamController: {
        //   show: true,
        //   x: 'right',
        //   mapTypeControl: {
        //     'china': true
        //   }
        // },
        series: [
          {
            // name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } }
            },
            data: [
              { name: '北京', value:100 },
              { name: '天津', value: Math.round(Math.random() * 1000) },
              { name: '上海', value: Math.round(Math.random() * 1000) },
              { name: '重庆', value: Math.round(Math.random() * 1000) },
              { name: '河北', value: Math.round(Math.random() * 1000) },
              { name: '河南', value: Math.round(Math.random() * 1000) },
              { name: '云南', value: Math.round(Math.random() * 1000) },
              { name: '辽宁', value: Math.round(Math.random() * 1000) },
              { name: '黑龙江', value: Math.round(Math.random() * 1000) },
              { name: '湖南', value: Math.round(Math.random() * 1000) },
              { name: '安徽', value: Math.round(Math.random() * 1000) },
              { name: '山东', value: Math.round(Math.random() * 1000) },
              { name: '新疆', value: Math.round(Math.random() * 1000) },
              { name: '江苏', value: Math.round(Math.random() * 1000) },
              { name: '浙江', value: Math.round(Math.random() * 1000) },
              { name: '江西', value: Math.round(Math.random() * 1000) },
              { name: '湖北', value: Math.round(Math.random() * 1000) },
              { name: '广西', value: Math.round(Math.random() * 1000) },
              { name: '甘肃', value: Math.round(Math.random() * 1000) },
              { name: '山西', value: Math.round(Math.random() * 1000) },
              { name: '内蒙古', value: Math.round(Math.random() * 1000) },
              { name: '陕西', value: Math.round(Math.random() * 1000) },
              { name: '吉林', value: Math.round(Math.random() * 1000) },
              { name: '福建', value: Math.round(Math.random() * 1000) },
              { name: '贵州', value: Math.round(Math.random() * 1000) },
              { name: '广东', value: Math.round(Math.random() * 1000) },
              { name: '青海', value: Math.round(Math.random() * 1000) },
              { name: '西藏', value: Math.round(Math.random() * 1000) },
              { name: '四川', value: Math.round(Math.random() * 1000) },
              { name: '宁夏', value: Math.round(Math.random() * 1000) },
              { name: '海南', value: Math.round(Math.random() * 1000) },
              { name: '台湾', value: Math.round(Math.random() * 1000) },
              { name: '香港', value: Math.round(Math.random() * 1000) },
              { name: '澳门', value: Math.round(Math.random() * 1000) }
            ]
          }
        ]
      },
      myEchartsObj: null, // 图表渲染对象
      // 栏目级数
      jishuTime: 1,
      // 默认显示栏目
      cityDefaultNameTime: '',
      // 筛选数据
      selectpatternTime: [
        {
          field: 'userProvinceId',
          placeholder: '2019'
        }
      ],
      
      // 栏目数据   结构不可变
      cityDataTime: [
        {
          id: '110000',
          name: '1985年',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        },
        {
          id: '110000',
          name: '1986年',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        },
        {
          id: '110000',
          name: '1987年',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        },
        {
          id: '110000',
          name: '2019年',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        }
      ],
      // 默认选中月
      monthData: '1月',
      // 筛选数据月
      selectMonth: [
        {
          field: 'userProvinceId',
          placeholder: '1月'
        }
      ],
      // 月 结构不可变
      monthDatas: [
        {
          id: '110000',
          name: '1月',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        },
        {
          id: '110000',
          name: '2月',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        },
        {
          id: '110000',
          name: '3月',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        },
        {
          id: '110000',
          name: '4月',
          parentId: '100000',
          shortName: '北京',
          cityCode: ''
        }
      ],
      // 左侧数据
      leftDafrt: null,
      // 总的地图数据
      AllMapCount: null,
      value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南'
        }
      ],
      //  visualMap: {
      //       min: 800,
      //       max: 50000,
      //       text: ['High', 'Low'],
      //       realtime: false,
      //       calculable: true,
      //       inRange: {
      //           color: ['lightskyblue', 'yellow', 'orangered']
      //       }
      //   },
    }
  },
  methods: {
    changeyear(e){
      console.log(e,79464333333)
      this.selectYear=e
      for(let i=0;i<Object.keys(this.datalist).length;i++){
        if(e == Object.keys(this.datalist)[i]){
             console.log(i)
           this.arr =  this.datalist[Object.keys(this.datalist)[i]]
        }
      }
      console.log(this.arr,'0000')
      this.option.series[0].data = this.arr
      // this.setMapLabel(
      //         this.arr
      // )
       this.option.dataRange.splitList = this.setMapLabel(
               this.arr
      )
      this.showMapData()
      
    },
    // 获取左侧菜单数据
    getCateData () {
      this.$axios({
        method: 'GET',
        url: 'data/data/list',
        params: {
          type: this.$route.query.type === 'area' ? 2 : 1,
          f: this.$store.state.selectDataLeft.f
        }
      })
        .then(res => {
          // console.log(res, '左侧菜单')
          // 请求接口完成   请求成功
          if (res.data.code === 200) {
            this.leftCateData = res.data.data.list
            this.defaultSelectLie()
          }
        })
        .catch(fail => {
          // console.log(fail)
        })
    },
    // 默认选中的列
    defaultSelectLie () {
      let stateStatic = []
      this.leftCateData.forEach((item1, index1) => {
        if (index1 === 0) {
          stateStatic.push('' + index1)
          if (item1.children) {
            item1.children.forEach((item2, index2) => {
              if (index2 === 0) {
                stateStatic.push('' + index1 + '-' + index2)
                if (item2.children) {
                  item2.children.forEach((item3, index3) => {
                    if (index3 === 0) {
                      stateStatic.push(
                        '' + index1 + '-' + index2 + '-' + index3
                      )
                      if (item3.children) {
                        item3.children.forEach((item4, index4) => {
                          if (index4 === 0) {
                            stateStatic.push(
                              '' +
                                index1 +
                                '-' +
                                index2 +
                                '-' +
                                index3 +
                                '-' +
                                index4
                            )
                            if (item4.children) {
                              item4.children.forEach((item5, index5) => {
                                if (index5 === 0) {
                                  stateStatic.push(
                                    '' +
                                      index1 +
                                      '-' +
                                      index2 +
                                      '-' +
                                      index3 +
                                      '-' +
                                      index4 +
                                      '-' +
                                      index5
                                  )
                                }
                              })
                            }
                          }
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
      this.defaultSelectLies = stateStatic
      // console.log(this.defaultSelectLies, 'stateStatic')
      let dataDome = []
      console.log(stateStatic, '数据')
      console.log(this.leftCateData[0].children[0], '数据0')
      JSON.parse(JSON.stringify(stateStatic)).forEach((item, index) => {
        console.log(index)
        index === 0
          ? (dataDome = this.leftCateData[index])
          : (dataDome = dataDome.children[0])
      })
      this.defaultDataRight = dataDome
      console.log(this.defaultDataRight, '1250')
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    selectActive (key, keyPath) {
      console.log(key, keyPath)
      this.showColoect(key)
    },
    // 渲染数据地图
    showMapData () {
      console.log(this.option)
      this.myEchartsObj = echarts.init(this.$refs.mapRefs, 'shine')
      // 绘制图表
      this.myEchartsObj.setOption(this.option, true)
      this.myEchartsObj.resize()
    },
    // 被选中时触发
    choiceCallerTime (resu) {
      console.log(resu, 1011111)
      // this.option.series[0].data = this.AllMapCount[resu[0]]
      // this.showMapData()
    },
    changesInputStu () {
      console.log(12569)
    },
    monthDataState (resu) {
      console.log(resu)
      // console.log(this.cityDefaultName)
    },
    monthDataChange () {
      console.log(12569)
    },
    // 地图左侧指标名称显示
    searchDataMap () {
      // console.log(this.$store.state.selectDataLeft, '10111110')
      this.$axios({
        method: 'GET',
        url: 'data/data/quota',
        params: {
          id: this.$store.state.selectDataLeft.id
        }
      })
        .then(res => {
          // console.log(res, '地图左侧指标名称显示')
          // 请求接口完成   请求成功
          if (res.data.code === 200) {
            this.leftDafrt = res.data.data.list.map((item, index) => {
              let brrO = {}
              if (index === 0) {
                brrO = {
                  id: item.id,
                  name: item.name,
                  state: true
                }
              } else {
                brrO = {
                  id: item.id,
                  name: item.name,
                  state: false
                }
              }
              return brrO
            })
            console.log(this.leftDafrt, 'this.leftDafrt')
            this.getLabelDatart()
          }
        })
        .catch(fail => {
          console.log(fail)
        })
    },
    // 获取每个指标的数据
    getLabelDatart () {
      // console.log(this.leftDafrt, 1010110)
      this.$axios({
        method: 'GET',
        url: 'data/data/map-data',
        params: {
          id: this.$store.state.selectDataLeft.id,
          quota_id: this.leftDafrt.find((item, index) => {
            return item.state === true
          }).id
        }
      })
        .then(res => {
          //console.log(res, '数据地图数据')
          // 请求接口完成   请求成功
          if (res.data.code === 200) {
            this.datalist=res.data.data.list
            this.initYearList()
            console.log(
              res.data.data.list,
              'Object.values(res.data.data.list)'
            )
            // 设置地图数值区间
            // this.option.dataRange.splitList = this.setMapLabel(
            //   res.data.data.list
            // )
            let year = ''
            // for(let i=0;i<Object.keys(this.datalist).length;i++){
            //  // if(e == Object.keys(this.datalist)[i]){
            //     year=  Object.keys(this.datalist)[i]
            //   //  console.log(year)
            //   //}
            // }
              year=  Object.keys(this.datalist)[0]
          //  console.log(year,"啊撒撒的撒打")
            this.changeyear(year);
            this.option.legend.data = [
              this.leftDafrt.find((item, index) => {
                return item.state === true
              }).name
            ]
            this.option.series[0].name = [
              this.leftDafrt.find((item, index) => {
                return item.state === true
              }).name
            ]
            this.AllMapCount = res.data.data.list
            this.cityDataTime = this.monthDatas
            // 筛选的数据
            this.cityDataTime = Object.keys(res.data.data.list).map(
              (item, index) => {
                return {
                  id: '110000',
                  name: item,
                  parentId: '100000',
                  shortName: '北京',
                  cityCode: ''
                }
              }
            )
            this.cityDefaultNameTime = this.cityDataTime[0].name
            this.selectpatternTime[0].placeholder = this.cityDataTime[0].name
            console.log(this.cityDataTime)
            this.options = Object.keys(res.data.data.list).map(
              (item, index) => {
                return {
                  value: item,
                  label: item
                }
              }
            )
            this.value = [this.options[0].value]
            this.option.series[0].data = this.AllMapCount[this.options[0].value]
            this.showMapData()
            // this.option.series[0].data = Object.values(res.data.data.list)
            // this.showMapData()
          }
        })
        .catch(fail => {
          // console.log(fail)
        })
    },
    // 根据地图数值设置数值区间
    setMapLabel (data) {
      console.log(data.length,'sssssssssss')
       let max = 0
      let min = 0
      // 数据地图显示的是当年的数据，他把每年的数据分为6个阶段，每个阶段都增加一个固定的值，这个值的计算方式为：当年各地区的最大数据减去最小数据 然后除以6  这个是每个阶段的增加的固定值，第一个区间是：最小值---最小值+固定值   第二区间为： 最小值+固定值----最小值+固定值+固定值，以此类推，最后一个为：最小值+固定值*5----最大值
      if(data.length == undefined){
     
      for (let key in data) {
        min = Number(data[key][0].value)
      }
      for (let key in data) {
        data[key].forEach((item, index) => {
          // console.log(item.value)
          if (item.value) {
            max = item.value > max ? parseFloat(item.value) : max
            min = item.value < min ? parseFloat(item.value) : min
          }
        })
      }
      console.log('最大值：' + max, '最小值：' + min)
        //   for(let a=0;a<data.length;a++){
        //   if(data[a].name == "总计"){
        //         data = data.splice(a,1)
        //         console.log(data,'123456789')
        //         break
        //   }else if(data[a].name == "合计"){
        //       data = data.splice(a,1)
        //         console.log(data,'123456789')
        //         break
        //   }else{
        //      max = data[a].value > max ? parseFloat(data[a].value) : max
        //     min = data[a].value < min ? parseFloat(data[a].value) : min
        //   }
         
        // }
      let list = [{ start: 0, end: 1 }]
      let temp = parseFloat(((max - min) / 6).toFixed(4))
      console.log(temp, '固定值')
      for (let i = 0; i < 6; i++) {
        i === 0
          ? (list[i] = {
            start: parseFloat((min + temp * (5 - i)).toFixed(2)),
            // end: parseFloat(Math.ceil(max).toFixed(2))
            end: parseFloat(max.toFixed(2))
          })
          : (list[i] = {
            start: parseFloat((min + temp * (5 - i)).toFixed(2)),
            end: parseFloat((min + temp * (6 - i)).toFixed(2))
          })
      }
      console.log(list, '区间列表')
      return list
      }else{
        
        for(let a=0;a<data.length;a++){
          if(data[a].name == "总计"){
                data = data.splice(a,1)
                console.log(data,'123456789')
                break
          }else if(data[a].name == "合计"){
              data = data.splice(a,1)
                console.log(data,'123456789')
                break
          }else{
            max = data[a].value > max ? parseFloat(data[a].value) : max
            min = data[a].value < min ? parseFloat(data[a].value) : min
          }
         
        }
        console.log(max,min,'000000')
        let list = [{ start: 0, end: 1 }]
      let temp = parseFloat(((max - min) / 6).toFixed(4))
      console.log(temp, '固定值')
      for (let i = 0; i < 6; i++) {
        i === 0
          ? (list[i] = {
            start: parseFloat((min + temp * (5 - i)).toFixed(2)),
            // end: parseFloat(Math.ceil(max).toFixed(2))
             end: parseFloat(max.toFixed(2))

          })
          : (list[i] = {
            start: parseFloat((min + temp * (5 - i)).toFixed(2)),
            end: parseFloat((min + temp * (6 - i)).toFixed(2))
          })
      }
      console.log(list, '区间列表')
      return list
      }
      
    },
    // 点击改变指标名称
    trickChange (ind) {
      this.leftDafrt.forEach((item, index) => {
        index === ind ? (item.state = true) : (item.state = false)
      })
      this.getLabelDatart()
      // this.showMapData()
    },
    // 选中
    handleChange (value) {
      console.log(value, 'map')
      // console.log(this.value, 'this.value')
      this.option.series[0].data = this.AllMapCount[value[0]]
      this.showMapData()
    },
    initYearList () {
     // console.log(this.datalist,'wsnbb')
     // console.log(Object.keys(this.datalist)[0],"thisyaear")
      const year = Object.keys(this.datalist)[0]
      let arrYear = []
      let thisYear = Object.keys(this.datalist)[ Object.keys(this.datalist).length-1]
      var section = thisYear - year
      for (let i = 0; i <= section; i++) {
        arrYear.push(thisYear--)
      }
      this.yearEnd = arrYear[0]
      this.yearStart = arrYear.length-1
      this.selectYear = arrYear[0]
      this.mapYearList = arrYear.reverse()
      //console.log(this.selectYear)
     // console.log(this.mapYearList)
    },
    reduceYear () {
      // console.log(this.yearStart + '-' + this.yearEnd)

      if (this.yearEnd - 10 > 0) {
        this.yearEnd -= 1
        this.yearStart = this.yearEnd - 10
        if (this.yearEnd - 10 < 1) {
          this.isReduceYear = false
        }
        if (this.yearEnd < this.mapYearList.length) {
          this.isAddYear = true
        }
      } else {
        this.isReduceYear = false
      }
    },
    addYear () {
      // console.log(this.yearStart + '-' + this.yearEnd)
      if (this.yearEnd < this.mapYearList.length) {
        this.yearEnd += 1
        this.yearStart = this.yearEnd - 10
        if (this.yearEnd === this.mapYearList.length) {
          this.isAddYear = false
        }
        if (this.yearEnd - 10 > 0) {
          this.isReduceYear = true
        }
      } else {
        this.isAddYear = false
      }
    }
  },
  mounted () {
    // 初始化年份列表
    // 查询左侧数据
    this.searchDataMap()
    // 获取菜单信息
    // this.getCateData()
    // 渲染图表
    // this.showMapData()
    // 查询左侧数据
    // this.searchDataMap()
    this.cityDataTime = this.monthDatas
  }
}
</script>
<style lang="scss" scoped>
.sanjiao{
 width: 0;
  height: 0;  
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #007AFF;
  margin-top:-2px!important;
  margin-right:3px
}
/deep/ .el-col-24 {
  min-width: 100%;
  width: auto;
}
/deep/ .el-menu {
  border: none;
}
/deep/ .el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row-reverse;
  // border: 1px solid red;
  padding: 0;
}
/deep/ .el-submenu__icon-arrow {
  position: static;
  margin-top: 0.25rem;
  margin-right: 0.42rem;
  // left: 0;
  // right: auto;
}
.bgcolor {
  background-color: #95cee4;
  color: #fff;
}
.mapData {
  margin-top: 0.75rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  & > .mapDataLeft {
    width: 26rem;
    // margin-right: 2rem;
    min-height: 56.875rem;
    overflow: auto;
    background-color: #ffffff;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
    & > div {
      padding-left: 10%;
      width: 90%;
      height: 2.5rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      // font-size: 1.375rem;
      // background: red;
    }
    & > div:hover {
      cursor: pointer;
    }
    & > div:nth-child(1) {
      padding: 0;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  & > .mapDataRight {
    width: 57rem;
    overflow: auto;
    background-color: #ffffff;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
    // border: 1px solid red;
    & > div:nth-child(2) {
      width: 100%;
      min-height: 50.875rem;
    }
    & > .maptopSty {
      width: 100%;
      height: 6rem;
      // display: flex;
      // flex-direction: row;
      // justify-content: flex-start;
      // align-items: center;
      // & > .yearD {
      //   margin: 0 2rem;
      // }
      // & > .monthD {
      //   margin: 0 2rem;
      // }
      > ul {
        list-style: none;
        overflow: hidden;
        background: #f8f8f8;
        display: flex;
        align-items: center;
      }
      .year {
        > li {
          text-align: center;
          background-color: gray;
          // width: 59px;
          flex: 1;
          height: 3rem;
          line-height: 3rem;
          position: relative;
          cursor: pointer;
          background: url(../../../static/data/icon_back.jpg) no-repeat center
            bottom;
        }
        .selected {
          > span {
            background: url(../../../static/data/up.jpg) no-repeat center bottom;
            position: absolute;
            width: 15px;
            height: 11px;
            bottom: -3px;
            left: 50%;
            transform: translate(-50%, 0);
            // right: 77px;
          }
        }
        .prev {
          > span {
            background: url(../../../static/data/left.jpg) no-repeat left center;
            position: absolute;
            width: 13px;
            height: 11px;
            bottom: 9px;
            right: 23px;
            cursor: pointer;
            left: 10px;
          }
          .disable {
            background: url(../../../static/data/left-disable.jpg) no-repeat
              right center;
            position: absolute;
            width: 13px;
            height: 11px;
            bottom: 9px;
            right: 23px;
            left: 10px;
            cursor: pointer;
          }
        }
        .next {
          > span {
            background: url(../../../static/data/right.jpg) no-repeat right
              center;
            position: absolute;
            width: 13px;
            height: 11px;
            bottom: 9px;
            right: 10px;
            cursor: pointer;
          }
          .disable {
            background: url(../../../static/data/right-disable.jpg) no-repeat
              right center;
            position: absolute;
            width: 13px;
            height: 11px;
            bottom: 9px;
            right: 10px;
            cursor: pointer;
          }
        }
      }
      .quarter {
        > li {
          flex: 1;
          text-align: center;
          background-color: gray;
          height: 3rem;
          line-height: 3rem;
          position: relative;
          background: url(../../../static/data/icon_back.jpg) no-repeat center
            bottom;
          cursor: pointer;
        }
        .selected {
          > span {
            background: url(../../../static/data/up.jpg) no-repeat center bottom;
            position: absolute;
            width: 15px;
            height: 11px;
            bottom: -3px;
            left: 50%;
            transform: translate(-50%, 0);
            // right: 77px;
          }
        }
      }
    }
  }
}
</style>
