<template>
  <div style="height: 100%;">
    <scroller ref="scroller" class="all" style="position: relative" :on-refresh="refresh">
      <!-- 我的积分 我的绩效 -->
      <template v-if="getRole_three">
        <div style="height: 3.1rem;background-color: #fff;"><div style="background-color: #26A2FF;height: 1.55rem;"></div></div>
        <div class="my_integral">
          <div class="flex-box">
            <div class="flex-1 flex-box flex-v-ce integral_left" v-show="rankingIndex == 1">
              <div class="integral_b flex-1" @click="openUrl(5)">
                <div class="color_ccc">本月B分</div>
                <div class="color-blue num">{{ userStatistics.b || returnStr(userStatistics.b) }}</div>
                <div class="color_ccc">
                  已奖B分
                  <span>{{ userStatistics.reward || returnStr(userStatistics.reward) }}</span>
                </div>
              </div>
              <div class="integral_b flex-1" @click="openUrl(6)">
                <div class="color_ccc">本月A分</div>
                <div class="color-blue num">{{ userStatistics.a || returnStr(userStatistics.a) }}</div>
                <div class="color_ccc">
                  已扣B分
                  <span>{{ userStatistics.deduct || returnStr(userStatistics.deduct) }}</span>
                </div>
              </div>
            </div>
            <div class="flex-box integral_right">
              <div :class="rankingIndex == 1 ? 'active' : ''" @click="rankingIndex = 1">A&B</div>
            </div>
          </div>
        </div>
      </template>
      <div class="app_list_box" :class="{applistBox: !getRole_three}">
        <div class="applist_col flex-box flex-d-center">
          <span class="" style="font-size:0.32rem;">常用应用</span>
          <span style="color: #909399;font-size:0.29rem;display:flex;" @click="$emit('active2',1)">全部应用<van-icon name="arrow" :class="isIos?'isIos':'isAnd'" /></span>
        </div>
        <van-grid :border="false">
          <van-grid-item v-if="common_menu.length > 0" v-for="(app, app_index) in common_menu" :key="app_index" @click="url_jump(app)" :icon="app.icon" :text="app.code">
            <template slot="icon">
              <img :src="app.icon" />
              <span class="num9" :class="{ num10: total > 9 }" color="#F56C6C"  v-if="total > 0&&app.code_id=='att_review'">{{ total }}</span>
              <span class="num9" :class="{ num10: total > 9 }" color="#F56C6C"  v-if="review_count > 0&&app.code_id=='examine'">{{ review_count }}</span>
              <span class="num9" :class="{ num10: total > 9 }" color="#F56C6C"  v-if="task_count > 0&&app.code_id=='task'">{{ task_count }}</span>
            </template>
          </van-grid-item>

          <van-grid-item @click="open_common_menu" text="添加">
            <template slot="icon">
              <img src="static/images/add_common_menu.png" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 我的排行榜 -->
      <div class="rankingList" v-if="rankingList.length > 0">
        <div class="curr-bpoint__title flex-box flex-d-center">
          <span class="chart-title__title" style="font-size:0.32rem;">排行榜</span>
          <span style="font-size: 12px;color: #909399;">每小时更新一次</span>
        </div>
        <div @click="openUrl(1, item)" v-for="(item, index) in rankingList" :key="index">
          <div class="flex-box flex-d-center ranking_list">
            <div class="flex-box">
              <div class="ranking_name font-flex-word">{{ item.group_name.slice(0, 2) }}</div>
              <div class="ranking_num">
                <div>{{ item.group_name }}</div>
                <span class="color_ccc" v-if="getRole_four">第 {{ item.rank }} 名：<Wxopendata type="userName" :openid="item.employee_name"></Wxopendata></span>
                <span class="color_ccc" style="font-size:0.25rem;" v-else>第 {{ item.rank }} 名</span>
              </div>
            </div>
            <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
          </div>
        </div>
        <div v-if="rankingTotal > 5" class="rankingLists" @click="openUrl(2)">
          查看所有排行榜
          <i class="van-icon van-icon-arrow van-cell__right-icon" style="position: relative;top: 0.07rem;"></i>
        </div>
      </div>
      <!-- 管理者奖扣 -->
      <div class="chart-statistics__item" v-if="getRole_two">
        <div class="chart-title__bar">
          <div class="chart-title__title">当月管理者奖扣</div>
          <div class="chart-legend__wrap">
            <span class="chart-legend__pink">奖分</span>
            <span class="chart-legend__green">扣分</span>
          </div>
        </div>
        <template v-if="pieTotal > 0">
          <div id="situationChart" ref="situationChart" style="height: 4rem;"></div>
          <div class="rankingLists" @click="openUrl(3)" style="border-top: 1px solid #f1f1f1;" v-if="pieTotal > 0">
            更多奖扣详情
            <i class="van-icon van-icon-arrow van-cell__right-icon" style="position: relative;top: 0.07rem;"></i>
          </div>
        </template>
        <template v-else>
          <noData detail_text="暂无管理者" />
        </template>
      </div>
      <div style="height: 1rem;"></div>
    </scroller>
  </div>
</template>

<script>
import request from '@/utils/request'
import ECharts from 'echarts'
import { getRole, getRole_three, getRole_two, getRole_four2, getRole_four, getToken } from '@/utils/auth'
import moment from 'moment'
import Vue from 'vue'
import { NoticeBar, Swipe, SwipeItem, Cell, Icon } from 'vant'
Vue.use(NoticeBar)
  .use(Swipe)
  .use(SwipeItem)
  .use(Cell)
  .use(Icon)

export default {
  name: 'statistics',
  data () {
    return {
      rankingList: [], // 我的排名列表
      rankingTotal: 0, // 我的排名列表数
      situationChart: '', // 管理者奖扣
      rankingIndex: 1,
      month: moment(new Date()).format('YYYY-MM'),
      userStatistics: {
        b: '',
        a: '',
        reward: '',
        deduct: '',
        performance: {
          base_point: '',
          complete_count: '',
          total_count: ''
        }
      }, // 个人统计
      pieTotal: 0,
      getRole_three: '',
      getRole_two: '',
      getRole_four: '',


      common_menu: [],
      total: 0,

      review_count: 0,
      task_count: 0,
      new_list:[
        {
          code: '任务',
          icon: 'static/images/a7.png',
          code_id: 'task',
          url: '/my_task',
          download_url: '',
        },
        {
          code: '审批',
          icon: 'static/images/a1.png',
          code_id: 'examine',
          url: '/approval_list',
          download_url: '',
        },
      ],
      isIos: false,
    }
  },
  mounted () {
    const u = navigator.userAgent;
    const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
    this.isIos = isIOS
    this.$store.dispatch('get_user_info', getToken()).then(res => {
      this.getRole_three = getRole_three()
      this.getRole_two = getRole_two()
      this.getRole_four = getRole_four()
    })
    window.addEventListener('resize', function () {
      var myChart1 = ECharts.init(this.$refs.situationChart)
      myChart1.resize()
    })

    this.$store.dispatch('getMenu').then(res => {
      this.getMenu(res)
    })
  },
  beforeDestroy () {
  	// 离开路由
  	window.removeEventListener('resize', function () {
      var myChart1 = ECharts.init(this.$refs.situationChart)
      myChart1.resize()
    })
  },
  methods: {
    chat_msg_session_list () {
      var http1 = request('get', '/api/integral/review/list', {type: 'waiting', page: 1, pt_id: 0, source_type: 0})// 获取为审批数量
      var http2 = request('get', '/api/integral/work/list', {status: 'running', page: 1, pt_id: 0})// 获取任务数
      Promise.all([http1, http2]).then(item => {
        if (item[0]) {
          this.review_count = item[0].data.data.total
        }
        if (item[1]) {
          this.task_count = item[1].data.data.total
        }
      })
    },
    clu () {
      this.$emit('shwoCunt', {data: 456})
    },

    // 获取常用应用
    getMenu (res) {
      if (!res) { return }
      var menuCommon = window.plus ? JSON.parse(plus.storage.getItem('menuCommon')) : JSON.parse(localStorage.getItem('menuCommon'))
      var menus = []
      if (menuCommon.length > 0) {
        menuCommon.forEach(itme => { menus.push(this.forEachMenu(itme)) })
      }
      if(getRole_four2()){
        menus.unshift(this.new_list[1])
      }else if(this.getRole_two) {
        this.new_list.forEach((item)=>{
          menus.unshift(item)
        })
      }else{
        menus.unshift(this.new_list[0])
      }

      this.common_menu = menus
    },
    // 遍历获取常用应用
    forEachMenu (id) {
      var menu = window.plus ? JSON.parse(plus.storage.getItem('menu')) : JSON.parse(localStorage.getItem('menu'))
      var obj = {}
      menu.forEach(menuItme => {
        if (menuItme.child.length > 0) {
          menuItme.child.forEach(item => {
            if (item.code_id == id) {
              obj = item
            }
          })
        }
      })
      return obj
    },
    open_common_menu () {
      this.$router.push({ name: 'add_common_menu'})
    },
    returnStr (str) {
      return str == '0' ? '0' : '--'
    },
    // 下拉刷新
    refresh (done) {
      this.chat_msg_session_list()
      this.$store.dispatch('getMenu').then(res => {
        this.getMenu(res)
      })
      this.getInitData(done)
    },
    // 管理者奖扣
    setECharts (data) {
      this.situationChart = ECharts.init(document.getElementById('situationChart'))
      // 指定图表的配置项和数据
      var reward = [],
        deduction = []

      let items = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          if(index<=100){//限制最多展示100人
            let arr = {}//转为wx通讯录适合解析的结构
            arr.type = "userName",
            arr.id = item.employee_name
            items.push(arr)
            reward.push(item.reward)
            deduction.push(item.deduction)
          }
        })
      }
      //根据数据的多少控制滚动条的初始长度
      let scrollBarWid = 100//滚动条宽度
      let dataZoomshow = false//是否显示滚动条
      let gridBottom = '3%'//柱状图整体偏移量
      let scrollBar = Math.round(items.length/5)
      if(scrollBar>0){
        scrollBarWid = scrollBarWid/scrollBar
      }
      dataZoomshow = scrollBar>1?true:false
      gridBottom = dataZoomshow?'10%':'3%'
      if(scrollBarWid<=5){
        scrollBarWid = 5
      }
      WWOpenData.prefetch({ items }, (err, data) => {
        if (err) {
          console.log(err);
        }
        var employee_name = data.items.map($0=>$0.data) // 这个就是转好的，直接丢到 echarts
        if (WWOpenData.initCanvas) {
          WWOpenData.initCanvas()
        }
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },

            formatter: (params) => {
              var htmlStr ='<div>';
              for(let i in params){
                if(i==0){
                  htmlStr += '<span style="display:inline-block;background-color:#4ECFFF;width:8px;height:8px;border-radius:50%;margin:0 5px;"></span>'
                }else{
                  htmlStr += '<span style="display:inline-block;background-color:#F8C748;width:8px;height:8px;border-radius:50%;margin:0 5px;"></span>'
                }
                htmlStr += '<span>'+params[i].seriesName+':</span>';
                htmlStr += '<span style="margin:0 5px 0 3px;">'+params[i].value+'</span><br>';
              }
              htmlStr += '</div>';
              return htmlStr;
            }
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: gridBottom,
            top: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisLine: { lineStyle: { color: '#eee' } },
              axisLabel: {
                /** ***重点还是在这里哦**/ //
                textStyle: {
                  color: '#333',
                  fontSize: 12
                },
                interval: 0,
                // formatter: function (params) {
                //   console.log(params)
                //   var newParamsName = '' // 最终拼接成的字符串
                //   var paramsNameNumber = params.length // 实际标签的个数
                //   var provideNumber = 4 // 每行能显示的字的个数
                //   var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                //   /**
                //    * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                //    */
                //   // 条件等同于rowNumber>1
                //   if (paramsNameNumber > provideNumber) {
                //     /** 循环每一行,p表示行 */
                //     for (var p = 0; p < rowNumber; p++) {
                //       var tempStr = '' // 表示每一次截取的字符串
                //       var start = p * provideNumber // 开始截取的位置
                //       var end = start + provideNumber // 结束截取的位置
                //       // 此处特殊处理最后一行的索引值
                //       if (p == rowNumber - 1) {
                //         // 最后一次不换行
                //         tempStr = params.substring(start, paramsNameNumber)
                //       } else {
                //         // 每一次拼接字符串并换行
                //         tempStr = params.substring(start, end) + '\n'
                //       }
                //       newParamsName += tempStr // 最终拼成的字符串
                //     }
                //   } else {
                //     // 将旧标签的值赋给新标签
                //     newParamsName = params
                //   }
                //   // 将最终的字符串返回
                //   return newParamsName
                // }
              },
              nameTextStyleObject: {
                fontSize: 10,
                align: 'center'
              },

              // type: 'category',
              // boundaryGap: false,
              // data: employee_name,


              // type: 'category',
              data: employee_name,
              axisPointer: {
                  type: 'shadow',
              },
              axisLabel:{
                interval:0,//横轴信息全部显示
                rotate:0,//30度角倾斜显示
              },
              axisLine:{//去掉X轴线
                  show:false
              },
              axisTick:{//去掉X轴刻度
                  show:false
              },
            }
          ],
          yAxis: [
            {
              position: 'right',
              axisLine: { lineStyle: { color: '#eee' } },
              axisLabel: { color: '#333' },
              type: 'value',
              splitLine: { lineStyle: { color: '#eee' } }
            }
          ],
          dataZoom: [
              {
                show: dataZoomshow,//展示
                start: scrollBarWid,//滚动条宽度
                end: 0,//滚动条起始位置
                top: '90%',//滚动条位置
                height: 20,//滚动条高度
                zoomLock:true,//固定滚动条
              },
          ],
          series: [
            {
              name: '奖分',
              type: 'bar',
              data: reward,
              // barWidth : 14,//柱图宽度
              itemStyle: {
                color: new ECharts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                  [{ offset: 0, color: '#4ECFFF' }, { offset: 1, color: '#26A2FF' }] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                )
              }
            },
            {
              name: '扣分',
              type: 'bar',
              // barWidth : 14,//柱图宽度
              data: deduction,
              itemStyle: {
                color: new ECharts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                  [{ offset: 0, color: '#F8C748' }, { offset: 1, color: '#F2A640' }] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                )
              }
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        this.situationChart.setOption(option)
      });
    },
    // 获取统计页初始化数据
    getInitData (done) {
      this.$toast.loading({
        message: '加载中...',
        loadingType: 'spinner'
      })
      var http1 = request('get', '/api/integral/statistics', { employee_id: this.$store.getters.user_info.id, month: this.month }, 'v2') // 获取个人统计
      var http2 = request('get', '/api/integral/statistics/ranking/list', { page: 1, page_size: 5 }) // 获取排行榜
      var http3 = request('get', '/api/integral/statistics/task/pie', { month: this.month }) // 管理者奖扣任务柱状图
      Promise.all([http1, http2, http3])
        .then(res => {
          if (res[0].data.code === 1) {
            this.userStatistics = res[0].data.data
          }
          if (res[1].data.code === 1) {
            this.rankingList = res[1].data.data.list
            this.rankingTotal = res[1].data.data.total
          }
          if (res[2].data.code === 1) {
            if (this.getRole_two) {
              var data = res[2].data.data.list
              if (data.length > 5) {
                data.pop()
              }
              this.pieTotal = res[2].data.data.total
              if (this.pieTotal != 0) {
                this.$nextTick(function () {
                  this.setECharts(data)
                })
              }
            }
          }
        })
        .finally(() => {
          done()
          this.$toast.clear()
        })
    },
    openUrl (index, item) {
      switch (index) {
        case 1: {
          if (item.type == 'normal') {
            this.$router.push({ name: 'integral_rank' })
          } else if (item.type == 'all') {
            this.$router.push({ name: 'rankB' })
          } else {
            this.$router.push({ name: 'ranking_detail', query: { group_id: item.target_id, title: item.group_name, date_interval: item.date_interval } })
          }
          break
        }
        case 2: {
          this.$router.push({ name: 'my_ranking' })
          break
        }
        case 3: {
          this.$router.push({ name: 'manager_reward_deduction' })
          break
        }
        case 4: {
          this.$router.push({ name: 'performance_list' })
          break
        }
        case 5: {
          this.$router.push({ name: 'statistics_personal_b', query: { month: this.month } })
          break
        }
        case 6: {
          this.$router.push({ name: 'statistics_personal_a', query: { month: this.month } })
          break
        }
        case 7: {
          this.$router.push({ name: 'my_statistics_personal', query: { month: this.month } })
          break
        }
      }
    },


    // 下载安装包
    url_jump (app) {
      let url = app.url
      let self = this
      // 当是安装包时打开安装里的内容
      if (app.download_url.indexOf('.zip') >= 0) {
        if (window.plus) {
          self.get_app_and_open(app.download_url, url)
        } else {
          self.$emit('url_jump', app)
          localStorage.setItem('work_scroller_top', self.$refs['work_box_scroller'].getPosition().top)
          window.location.href = url
        }
        return false
      }
      // 当不是安装包时使用
      if (url.indexOf('http://') == 0 || url.indexOf('https://') == 0) {
        if (window.plus) {
          var webview = plus.webview.create(url, url)// 创建新的Webview窗口
          webview.setStyle({// 设置Webview窗口
            titleNView: {
              titleColor: '#000',
              autoBackButton: true,
              buttons: [
                {
                  type: 'close',
                  float: 'left',
                  onclick: function () {
                    webview.close()
                  }
                }
              ]
            }
          })
          plus.key.addEventListener('backbutton', function () { // 添加监听设置返回事件
            webview.canBack(function (e) { // 看能不能返回
              if (e.canBack) {
                webview.back()
              } else { // 不行就关闭，调用路由的返回
                webview.close()
                self.$route_back()
              }
            })
          })
          webview.show()
        } else {
          window.location.href = url
        }
      } else {
        this.$router.push({ path: url })
      }
    },
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    update_common_menu_list: function (vm, data) {
      // if(this.getRole_two) {
      //   vm.new_list.forEach((item)=>{
      //     data.unshift(item)
      //   })
      // }
      vm.$store.dispatch('getMenu').then(res => {
        vm.getMenu(res)
      })
      // vm.common_menu = data
    },

    update_approval_list: function (vm, data) {
      vm.chat_msg_session_list(function () {})
      vm.clu();
    },
    update_task_message: function (vm, data) {
      vm.chat_msg_session_list(function () {})
      vm.clu();
    },
    update_message_list: function (vm, data) {
      vm.$store.dispatch('get_user_info', getToken()).then(res => {
        vm.chat_msg_session_list(function () {})
        vm.clu();
      })
    },
    update_msgInformation: function (vm, data) {
      vm.chat_msg_session_list(function () {})
      vm.clu();
    }
  }
}
</script>

<style scoped="scoped" lang="less">
// 团队绩效
.team_performance {
  padding: 0.26rem;
  background-color: #fff;
}
.team_performance .flex-1 div:nth-child(1) {
  font-size: 0.32rem;
  margin-bottom: 0.1rem;
}
.team_performance .flex-1 div:nth-child(2) {
  font-size: 0.28rem;
}
.my_integral {
  height: 2.5rem;
  background-color: #fff;
  border-radius: 6px;
  position: fixed;
  top: 1.5rem;
  left: 0.3rem;
  right: 0.3rem;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
  padding: 0.28rem;
  box-sizing: border-box;
  z-index: 999;
  & .integral_b div:nth-child(1) {
    font-size: 0.3rem;
  }
  & .integral_b div:nth-child(2) {
    font-size: 0.44rem;
    font-weight: 600;
    margin-top: 0.1rem;
    margin-bottom: 0.47rem;
  }
  & .integral_b div:nth-child(3) {
    font-size: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 2.3rem;
  }
  & .integral_b div:nth-child(3) span {
    color: #222;
  }
  & .integral_right {
    border: 1px solid #ff9600;
    border-radius: 5px;
    background-color: #fff;
    height: 0.5rem;
    line-height: 0.5rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    color: #ff9600;
    & div {
      padding: 0 0.1rem;
    }
    & .active {
      background-color: #ff9600;
      color: #fff;
    }
  }
  & .integral_b2 div:nth-child(1) {
    font-size: 0.3rem;
    margin-top: 0.45rem;
  }
  & .integral_b2 div:nth-child(2) {
    font-size: 0.44rem;
    font-weight: 600;
  }
}
.left-text-bold /deep/ .van-nav-bar__left {
  font-size: 0.4rem !important;
  font-weight: bold;
}
// 管理者奖扣
.chart-statistics__item {
  position: relative;
  background: #fff;
  margin: 0.2rem 0;
  & .chart-title__bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    padding: 0.24rem 0.3rem;

    & .chart-title__title {
      position: relative;
      font-size: 0.32rem;
      color: #303133;
    }

    & .chart-legend__wrap {
      display: flex;
      flex: 1;
      font-size: 0.24rem;
      flex-direction: row;
      justify-content: flex-end;

      & .chart-legend__pink {
        position: relative;
        padding-left: 0.3rem;
        padding-right: 0.24rem;

        &:after {
          content: '';
          position: absolute;
          margin-top: -0.1rem;
          top: 50%;
          left: 0;
          width: 0.2rem;
          height: 0.2rem;
          background-image: linear-gradient(to top, #26a2ff 0%, #4ecfff 100%);
          border-radius: 100%;
        }
      }

      & .chart-legend__green {
        position: relative;
        padding-left: 0.3rem;

        &:after {
          content: '';
          position: absolute;
          margin-top: -0.1rem;
          top: 50%;
          left: 0;
          width: 0.2rem;
          height: 0.2rem;
          background-image: linear-gradient(to top, #f2a640 0%, #f8c748 100%);
          border-radius: 100%;
        }
      }
    }
  }
}

/* header */
.all {
  // height: calc(100% - 0.92rem) !important;
  height: calc(100%) !important;
  position: relative !important;
  background-color: #f5f7fa;
}
/*  我的排名 */
.rankingList {
  margin: 0rem !important;
  background-color: #fff;
  .ranking_list {
    padding: 0.26rem;
    border-bottom: 1px solid #f5f7fa;
  }
  .ranking_name {
    background-color: #26a2ff;
    border-radius: 5px;
    color: #fff;
    font-size: 0.32rem;
    margin-right: 0.26rem;
    width: 0.9rem;
    height: 0.9rem;
    line-height: 0.9rem;
    box-sizing: border-box;
    text-align: center;
  }
  .ranking_num div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 5rem;
    font-size: 0.32rem;
  }
  .ranking_num span {
    font-size: 0.28rem;
  }
}
.rankingLists {
  text-align: center;
  color: #909399;
  padding: 0.24rem 0.32rem;
  font-size: 0.28rem;
}
.curr-bpoint__title span span {
  font-size: 0.28rem;
  color: #909399;
}
.curr-bpoint__title {
  padding: 0.22rem 0.3rem;
  border-bottom: 1px solid #f5f7fa;
}
.num {
  font-family: DIN-Medium;
}
.num9 {
  position: absolute;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.28rem;
  width: 0.4rem;
  height: 0.4rem;
  padding: 0px;
  border-radius: 0.4rem;
  z-index: 1;
  background-color: #f56c6c;
  font-weight: normal;
  color: #fff;
  top: -5px;
  right: -5px;
}
.num10 {
  padding: 0 0.08rem !important;
  width: auto !important;
  max-width: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.applist_col{
  // background-color: #f5f7fa;
  padding: 0 0 .3rem 0;
}
.app_list_box {
  background-color: #fff;
  padding: 0 0.28rem;
  margin-bottom: 0.32rem;
}
.app_list_box .menu_title {
  font-size: 0.32rem;
  color: #1c1c1c;
  font-weight: bold;
  margin:0.32rem;
}
.app_list_box /deep/ .van-grid-item {
  margin-bottom: 0.4rem;
}
.app_list_box /deep/ .van-grid-item .van-grid-item__content {
  padding: 0 !important;
}
.app_list_box /deep/ .van-grid-item .van-grid-item__content .van-grid-item__text {
  font-size: 0.28rem;
  color: #606266;
  line-height: 0.44rem;
  width: 1.4rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app_list_box /deep/ .van-grid-item .van-grid-item__content .van-grid-item__icon-wrapper img {
  width: 1rem;
  height: 1rem;
  border-radius: 0.42rem;
}
.applistBox{
  padding-top: .4rem;
}

.isIos{
  margin: .06rem 0 0 .05rem;
}
.isAnd{
  margin: .08rem 0 0 .05rem;
}
</style>
