<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
       <!-- <div class="app-titel">
        <div class="titel-text">楼盘选择：</div>
        <div style="margin-left: 26px">
           <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div> -->
      <div class="app-titel">
        <div class="titel-text">接待时间</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">近7天</div>
          <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)"> 近15天 </div>
          <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">  近30天 </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            @change="confirmtime()"
            v-model="customtime"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>
    </div>

    <!-- 二 -->
    <div class="app-box-er">
      <div class="container">
          <div class="grid-content" @click="Overviewxlick('1')">
            <div class="text1" :class="{ tophovese: cardindex == 1 }">接待量</div>
            <div class="text2" :class="{ tophovese: cardindex == 1 }">{{cardobj.receptionCount || 0}}</div>
          </div>
           <div class="grid-content" @click="Overviewxlick('2')">
            <div class="text1" :class="{ tophovese: cardindex == 2 }">有效接待</div>
            <div class="text2" :class="{ tophovese: cardindex == 2 }">{{cardobj.activeCustomer || 0}}</div>
          </div>
           <div class="grid-content" @click="Overviewxlick('3')">
            <div class="text1" :class="{ tophovese: cardindex == 3 }">平均接待时长（分钟）</div>
            <div class="text2" :class="{ tophovese: cardindex == 3 }">{{Math.floor(cardobj.avgDuration/60) || 0}}</div>
          </div>
           <div class="grid-content" @click="Overviewxlick('4')">
            <div class="text1" :class="{ tophovese: cardindex == 4 }">平均执行率(%)</div>
            <div class="text2" :class="{ tophovese: cardindex == 4 }">{{cardobj.fraction || 0}}</div>
          </div>
           <div class="grid-content" @click="Overviewxlick('5')">
            <div class="text1" :class="{ tophovese: cardindex == 5 }">违禁接待次数</div>
            <div class="text2" :class="{ tophovese: cardindex == 5 }">{{cardobj.prohibitedCustomer || 0}}</div>
          </div>
      </div>

      <div id="main"></div>
      <!-- <div  v-if="Brokenline.length==0" style="display:flex;justify-content: center; align-items: center;height: 60%;">
          <div>暂无数据</div>
        </div> -->
    </div>

     <!-- 三 -->
    <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">团队销讲趋势</div>
              <div class="text2">
                <el-select style="width: 90%; margin: 0 auto;" @change="Pinspeaktap(1)"  v-model="departmentsri" placeholder="请选择">
                  <el-option
                    v-for="item in departmentlist"
                    :key="item.deptId"
                    :label="item.name"
                    :value="item.deptId">
                  </el-option>
                </el-select>
              </div>
          </div>
          <div class="hejisan">
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">合计接待</div>
              <div class="text1-2">{{Pinspeak.sum}}个</div>
            </div>
            <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">均值</div>
              <div class="text1-2">{{Pinspeak.avg}}%</div>
            </div>
           </div>
          <div id="Pinspeak1"></div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">员工销讲趋势</div>
             <div class="text2">
               <el-select style="width: 90%; margin: 0 auto;"  @change="Pinspeaktap(2)" v-model="consultantsri" placeholder="请选择">
                <el-option
                  v-for="item in consultantlist"
                  :key="item.accountId"
                  :label="item.name"
                  :value="item.accountId">
                </el-option>
              </el-select>
             </div>
          </div>
          <div class="hejisan">
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">合计接待</div>
              <div class="text1-2">{{Pinspeak2.sum}}个</div>
            </div>
            <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">均值</div>
              <div class="text1-2">{{Pinspeak2.avg}}%</div>
            </div>
           </div>
           <div id="Pinspeak2"></div>
        </div>
    </div>


  <!-- 四 -->
   <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">员工接待量排名（TOP10）</div>
          </div>
          <div class="hejisan">
                <div  class="sanbox1" style="width: 30%;">
                  <div class="text1-1">合计</div>
                  <div class="text1-2">{{ceratelist.sum || ''}}个</div>
                </div>
                <div  class="sanbox1" style="width: 40%;">
                  <div class="text1-1">顾问</div>
                  <div class="text1-2">{{ceratelist.num || ''}}个</div>
                </div>
                <div  class="sanbox1" style="width: 30%;">
                  <div class="text1-1">人均接待</div>
                  <div class="text1-2">{{ceratelist.avg || ''}}%</div>
                </div>
            </div>
            <div style="overflow-y:auto;height: 290px;width: 94%;margin: 0 auto;margin-top: 15px;margin-bottom: 16px;">
                <div  class="jinbox" v-for="(item,i) in ceratelist.list" :key='i'>
                    <div class="jinboxtit">{{item.name}}</div>
                    <div class="jinbox-box">
                        <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                    </div>
                    <div class="jinboxbott">{{item.zxl}}个</div>
                </div>
            </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">员工接待时长排名（TOP10）</div>
              <div class="text2"></div>
          </div>
          <div class="hejisan">
                <div  class="sanbox1" style="width: 30%;">
                  <div class="text1-1">合计</div>
                  <div class="text1-2">{{Math.floor(ceratelist1.sum /60) || ''}}分钟</div>
                </div>
                <div  class="sanbox1" style="width: 40%;">
                  <div class="text1-1">顾问</div>
                  <div class="text1-2">{{ceratelist1.num || ''}}个</div>
                </div>
                <div  class="sanbox1" style="width: 30%;">
                  <div class="text1-1">均值</div>
                  <div class="text1-2">{{Math.floor(ceratelist1.avg /60) || ''}}分钟</div>
                </div>
          </div>
          <div style="overflow-y:auto;height: 290px;width: 94%;margin: 0 auto;margin-top: 15px;margin-bottom: 16px;">
                <div  class="jinbox" v-for="(item,i) in ceratelist1.list" :key='i'>
                    <div class="jinboxtit">{{item.name}}</div>
                    <div class="jinbox-box">
                        <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                    </div>
                    <div class="jinboxbott">{{item.zxl}}分钟</div>
                </div>
            </div>

        </div>
    </div>

      <!-- 五 -->
    <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">销讲维度执行排名</div>
          </div>
          <div style="overflow-y:auto;height: 290px;width: 94%;margin: 0 auto;margin-top: 15px;margin-bottom: 16px;">
                <div  class="jinbox" v-for="(item,i) in Zxllist" :key='i'>
                    <div class="jinboxtit">{{item.name}}</div>
                    <div class="jinbox-box">
                        <div class="boxbaifenbi" :style="'width:'+(item.zxl)+'%;'"></div>
                    </div>
                    <div class="jinboxbott">{{item.zxl}}%</div>
                </div>
            </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">销讲指标执行率排名</div>
              <div class="text2"></div>
               <div class="text2">
                <el-select style="width: 90%; margin: 0 auto;" @change="zxltapchang()"  v-model="marketingId" placeholder="请选择">
                  <el-option
                    v-for="item in Zxllist"
                    :key="item.marketingId"
                    :label="item.name"
                    :value="item.marketingId">
                  </el-option>
                </el-select>
              </div>
          </div>
          <div style="overflow-y:auto;height: 290px;width: 94%;margin: 0 auto;margin-top: 15px;margin-bottom: 16px;">
                <div  class="jinbox" v-for="(item,i) in Zxllistchildren" :key='i'>
                    <div class="jinboxtit">{{item.name}}</div>
                    <div class="jinbox-box">
                        <div class="boxbaifenbi" :style="'width:'+(item.zxl)+'%;'"></div>
                    </div>
                    <div class="jinboxbott">{{item.zxl}}%</div>
                </div>
            </div>

        </div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
       pickerOptions: {
        disabledDate(time) {
          //根据当前日期 --- 禁止选中之后的日期
          return time.getTime() > Date.now();
        },
      },
      role:'',
      customtime: [],
      TimetoAhoose: 4,
      fromobj: {
        statDateStart: "",
        statDateEnd: "",
      },
      houseId: "",
      ceratelist:{
        avg:'',
        sum:'',
        num:'',
        list:[]
      },
      ceratelist1:{
        avg:'',
        sum:'',
        num:'',
        list:[]
      },
      cardobj:{},
      cardindex:1,
      departmentlist:[],
      departmentsri:'',
      consultantlist:[],
      consultantsri:'',
      Brokenline:[],
      Pinspeak:{
          avg:'',
          sum:'',
          list:[]
      },
      Pinspeak2:{
          avg:'',
          sum:'',
          list:[]
      },
      Zxllist:[],
      Zxllistchildren:[],
      marketingId:''

    };
  },
  mounted() {
    this.role=localStorage.getItem("orgType");
    if(this.role==3){
      this.houseId = localStorage.getItem("houseId");
      this.overviewfindList()
      this.overviewfindUserListByHouseId()
      this.overviewreceptionOverview()
      this.overviewreceptionData()

      this.overviewreceptionRanking()
      this.overviewreceptionRanking1()
      this.overviewreceptionOverviewZxl()
    }
  },
  methods: {
    //切换二级
    zxltapchang(){
        this.Zxllistchildren=[];
        this.Zxllist.forEach(item=>{
          if(this.marketingId==item.marketingId){
              this.Zxllistchildren=item.children
          }
        })
    },
    //获取执行率
    overviewreceptionOverviewZxl(){
        this.Zxllistchildren=[];
        this.Zxllist=[];
          let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd,
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewreceptionOverviewZxl(parmo).then((res) => {
         this.Zxllist=res.data.list || [];
         if(this.Zxllist.length!==0){
            this.marketingId=res.data.list[0].marketingId;
            this.Zxllistchildren=res.data.list[0].children;
         }
        })
    },
    //接待量排名
    overviewreceptionRanking(){
      this.ceratelist={
            avg:'',
            sum:'',
            num:'',
            list:[]
          }
      let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd,
          type:0
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewreceptionRanking(parmo).then((res) => {
              let arr=[]
              res.data.list.map(item=>{
								let obj={}
								obj.name=item.accountName
								obj.zxl=item.activeCustomer
								arr.push(obj)
							})
							arr=this.dealData(arr)
              this.ceratelist={
                avg: res.data.avg,
                sum: res.data.sum,
                num: res.data.num,
                list:arr
              }
        })
    },
    //接待时长排名
    overviewreceptionRanking1(){
      this.ceratelist1={
            avg:'',
            sum:'',
            num:'',
            list:[]
          }
      let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd,
          type:1
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewreceptionRanking(parmo).then((res) => {
            let arr=[]
            res.data.list.map(item=>{
              let obj={}
              obj.name=item.accountName
              obj.zxl=Math.floor(item.sumDuration /60) || 0;
              arr.push(obj)
            })
            arr=this.dealData(arr)
            this.ceratelist1={
              avg: res.data.avg,
              sum: res.data.sum,
              num: res.data.num,
              list:arr
            }
        })
    },

    //团队员工下拉切换
    Pinspeaktap(i){
        if(i==1){
          this.overviewteamOrAccountSellingTrends()
        }else{
           this.overviewteamOrAccountSellingTrends1()
        }
    },
    //团队销讲趋势
    overviewteamOrAccountSellingTrends(){
      this.Pinspeak={
          avg:'',
          sum:'',
          list:[]
      }
      let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd,
          deptId:this.departmentsri
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewteamOrAccountSellingTrends(parmo).then((res) => {
         this.Pinspeak=res.data;
          var newline=[];
          var newline2=[];
          this.Pinspeak.list.map(item=>{
            newline.push(item.fraction)
            newline2.push(item.statDate.slice(5,10))
          })
          this.Pinspeakfun1(newline,newline2)
        })
    },
    //员工销讲趋势
     overviewteamOrAccountSellingTrends1(){
      this.Pinspeak2={
          avg:'',
          sum:'',
          list:[]
      }
        let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd,
          accountId:this.consultantsri
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewteamOrAccountSellingTrends(parmo).then((res) => {
         this.Pinspeak2=res.data;
          var newline=[];
          var newline2=[];
          this.Pinspeak2.list.map(item=>{
            newline.push(item.fraction)
            newline2.push(item.statDate.slice(5,10))
          })
          this.Pinspeakfun2(newline,newline2)
        })
    },
    //卡片切换
    Overviewxlick(i){
      this.cardindex=i;
      var newline=[];
      var newline2=[];
      var Strname=''
      if(this.cardindex==1){
        Strname='接待客户/个'
        this.Brokenline.map(item=>{
          newline.push(item.receptionCount)
          newline2.push(item.statDate.slice(5,10))
        })
      }else if(this.cardindex==2){
        Strname='接待客户/个'
        this.Brokenline.map(item=>{
          newline.push(item.activeCustomer)
          newline2.push(item.statDate.slice(5,10))
        })
      }else if(this.cardindex==3){
        Strname='接待时长/分钟'
        this.Brokenline.map(item=>{
          newline.push(Math.floor(item.avgDuration/60))
          newline2.push(item.statDate.slice(5,10))
        })
      }else if(this.cardindex==4){
        Strname='执行率/%'
        this.Brokenline.map(item=>{
          newline.push(item.fraction)
          newline2.push(item.statDate.slice(5,10))
        })
      }else{
        Strname='违禁/次'
        this.Brokenline.map(item=>{
          newline.push(item.prohibitedCustomer)
          newline2.push(item.statDate.slice(5,10))
        })
      }
      this.SwitchCARDS(newline,newline2,Strname)
    },
    //获取卡片数据
    overviewreceptionOverview(){
      let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewreceptionOverview(parmo).then((res) => {
            this.cardobj=res.data
        })
    },
    //获取卡片下折线图
    overviewreceptionData(){
      let parmo={
          houseId:this.houseId,
          dateType:this.TimetoAhoose,
          statDateStart:this.fromobj.statDateStart,
          statDateEnd:this.fromobj.statDateEnd
      }
      if(this.TimetoAhoose==8){
        parmo.dateType=null;
      }
       this.$api.http.overviewreceptionData(parmo).then((res) => {
         this.Brokenline=res.data;
           this.Overviewxlick(1)
        })
    },
    //获取部门下拉菜单
    overviewfindList(){
        this.$api.http.overviewfindList({
          houseId:this.houseId,
        }).then((res) => {
            this.departmentlist=[{name:'全部',deptId:''}]
            this.departmentlist=this.departmentlist.concat(res.data);
            this.departmentsri='';
        })
        this.overviewteamOrAccountSellingTrends()
    },
    //获取顾问
    overviewfindUserListByHouseId(){
      this.$api.http.overviewfindUserListByHouseId({
        orgType:localStorage.getItem("orgType"),
        projectId:this.houseId,
      }).then((res) => {
          this.consultantlist=res.data;
          this.consultantsri=res.data[0].accountId;
          this.overviewteamOrAccountSellingTrends1()
      })
    },
    //卡片下折线图
    SwitchCARDS(newline,newline2,Strname){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
          tooltip: {
                trigger: 'axis'
              },
          legend: {
              data: [Strname],
              bottom: '10',
          },
          grid: {
              left: 10,
              right: 10,

              containLabel: true,
          },
          xAxis: {
              type: 'category',
              data: newline2,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
              axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度

                  }
              }
          },
          yAxis: {
              type: 'value',
              splitNumber:4,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
               axisLine: {
                  lineStyle: {
                    ype: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度
                  }
              },
              splitLine: {
                  lineStyle: {
                      type: 'dashed' // y轴分割线类型
                  }
              },
              axisTick: {       //y轴刻度线
                  show: false
              },
          },
          series: [{
              name:Strname,
              data: newline,
              type: 'line',
              smooth: true,

          }]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },

     //团队销讲
    Pinspeakfun1(newline,newline2){
      let chartDom = document.getElementById('Pinspeak1');
      let myChart = echarts.init(chartDom);
      let option= {
          tooltip: {
                trigger: 'axis'
              },
          legend: {
              data: ['执行率/%'],
              bottom: '10',
          },
          grid: {
              left: 10,
              right: 10,

              containLabel: true,
          },
          xAxis: {
              type: 'category',
              data: newline2,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
              axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度

                  }
              }
          },
          yAxis: {
              type: 'value',
              splitNumber:4,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
               axisLine: {
                  lineStyle: {
                    ype: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度
                  }
              },
              splitLine: {
                  lineStyle: {
                      type: 'dashed' // y轴分割线类型
                  }
              },
              axisTick: {       //y轴刻度线
                  show: false
              },
          },
          series: [{
              name:'执行率/%',
              data: newline,
              type: 'line',
              smooth: true,

          }]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },
    //员工销讲
    Pinspeakfun2(newline,newline2){
         let chartDom = document.getElementById('Pinspeak2');
      let myChart = echarts.init(chartDom);
      let option= {
          tooltip: {
                trigger: 'axis'
              },
          legend: {
              data: ['执行率/%'],
              bottom: '10',
          },
          grid: {
              left: 10,
              right: 10,

              containLabel: true,
          },
          xAxis: {
              type: 'category',
              data: newline2,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
              axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度

                  }
              }
          },
          yAxis: {
              type: 'value',
              splitNumber:4,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
               axisLine: {
                  lineStyle: {
                    ype: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度
                  }
              },
              splitLine: {
                  lineStyle: {
                      type: 'dashed' // y轴分割线类型
                  }
              },
              axisTick: {       //y轴刻度线
                  show: false
              },
          },
          series: [{
              name:'执行率/%',
              data:newline,
              type: 'line',
              smooth: true,

          }]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },

    //时间选择
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.fromobj.statDateStart = "";
      this.fromobj.statDateEnd = "";
      this.customtime = [];
      this.overviewreceptionOverview()
      this.overviewreceptionData()
      this.overviewteamOrAccountSellingTrends()
      this.overviewteamOrAccountSellingTrends1()
      this.overviewreceptionRanking()
      this.overviewreceptionRanking1()
       this.overviewreceptionOverviewZxl()
    },
    //自定义时间
    confirmtime() {
      this.fromobj.statDateStart= this.customtime[0]
      this.fromobj.statDateEnd= this.customtime[1]
      this.TimetoAhoose = 8;
      this.overviewreceptionOverview()
      this.overviewreceptionData()
      this.overviewteamOrAccountSellingTrends()
      this.overviewteamOrAccountSellingTrends1()
      this.overviewreceptionRanking()
      this.overviewreceptionRanking1()
       this.overviewreceptionOverviewZxl()
    },
    dealData(arr){
      let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果：3
			arr.map(item=>{
					item.zxl1=Math.floor(item.zxl/num*100)
				})
				return arr
		},

  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 19%) ;
  grid-column-gap: 18px;
}


// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 20px;
      .jinboxtit {
            width: 14%;
            height: 18px;
            padding-right: 6px;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }
        .jinbox-box {
            width: 75%;
            height: 100%;
            border-radius: 8px;
            background: #F2F2F2;
        }
        .boxbaifenbi {
            height: 100%;
            background:#60D7A0;
            border-radius: 8px;
        }
        .boxbaifenbi2 {
            height: 100%;
            background: #5B8FF9;
        }
        .jinboxbott {
            width: 16%;
            text-indent: 20px;
        }
  }




#main{
  width: 100%;
  height: 380px;
}
#Brokenline1{
  width: 100%;
  height: 350px;
}
#Brokenline2{
  width: 100%;
  height: 350px;
}
#Pinspeak1{
 width: 100%;
  height: 350px;
}
#Pinspeak2{
 width: 100%;
  height: 350px;
}
.app-box-san{
  width: 100%;
  // height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo{
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
      }
      .text2{
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you{
    height: 100%;
    flex: 1;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
      }
      .text2{
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}





.app-box-er{
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding: 15px;
}
.grid-content{
  background: #ffffff;
  height: 90px;
  border: 1px solid #E0E0E0;
  .text1{
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 20px;
    margin-top: 20px;
  }
  .text2{
    height: 32px;
    font-size: 32px;
    font-weight: normal;
    line-height: 32px;
    text-indent: 20px;
    margin-top: 10px;
  }
}




.tophove {
  color: #ffffff;
  background: #2671e2;
}
.tophovese{
  color: #2671e2;
}
.app-top{
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}
  .hejisan{
		width: 92%;
		margin: 0 auto;
		display: flex;
    margin-top: 15px;
		.text1-1{
			color: #666666;
		}
		.text1-2{
			color: #333333;
			margin-top: 10px;
		}
	}
</style>
