<template>
  <div id="data-view">
    <!-- <dv-full-screen-container> -->
      <div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">
      <top-header :Name = "showData.name" :Times = "showData.times"/>
      <div class="main-content" v-if="loadingDone">
        <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
        <div class="block-left-right-content">
          <div class="row1-col1" :style="`width:${row1Style.width[0]}; height:${row1Style.height};padding-right:0.1rem;`">
            <div v-for="(rcitem,rcindex) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
                <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
                <div class="rankHeader" style="display: flex;">
                  <p style="width: 0.5rem;text-align: center;">#</p>
                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                </div>
                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                <ul class="item" >
                  <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                    <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
                      <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div> 
                    </div>
                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                  </li>
                </ul>
                </vue-seamless-scroll> -->
                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
              </div>
              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
              </div>
            </div>
          </div>
          <div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};padding-right:0.1rem;`">
            <div v-for="(rcitem,rcindex) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
                <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
                <div class="rankHeader" style="display: flex;">
                  <p style="width: 0.5rem;text-align: center;">#</p>
                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                </div>
                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}"> -->
                  <!-- <ul class="item">
                    <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                      <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
                        <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div> 
                      </div>
                      <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                    </li>
                  </ul> -->
                <!-- </vue-seamless-scroll> -->

                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
              </div>
              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
              </div>
            </div>
          </div>
          <div class="row1-col3" v-if="row1col3report.length>0" :style="`width:${row1Style.width[2]}; height:${row1Style.height};`">
            <!-- <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
              <template v-for="(item,index) in totalData">
                  <rose-chart  :key="index" v-if="item.setting.reportType == 'pie'" :pieId="'roseChart'+index" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
                  <bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;"  pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
              </template>
            </div> -->
            <div v-for="(rcitem,rcindex) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
                <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
                <div class="rankHeader" style="display: flex;">
                  <p style="width: 0.5rem;text-align: center;">#</p>
                  <p v-for="(item,index) in rankHeader1" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                </div>
                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                <ul class="item" >
                  <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                    <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
                      <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
                    </div>
                    <div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                  </li>
                </ul>
                </vue-seamless-scroll> -->
                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
              </div>
              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
              </div>
            </div>
          </div>
          <div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
            <div v-for="(rcitem,rcindex) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
                <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
                <div class="rankHeader" style="display: flex;">
                  <p style="width: 0.5rem;text-align: center;">#</p>
                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                </div>
                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                <ul class="item" >
                  <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                    <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
                      <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
                    </div>
                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                  </li>
                </ul>
                </vue-seamless-scroll> -->
                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
              </div>
              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
              </div>
            </div>
          </div>
          <div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
            <div v-for="(rcitem,rcindex) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
                <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
                <div class="rankHeader" style="display: flex;">
                  <p style="width: 0.5rem;text-align: center;">#</p>
                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                </div>
                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                <ul class="item" >
                  <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                    <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
                      <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
                    </div>
                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                  </li>
                </ul>
                </vue-seamless-scroll> -->
                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
              </div>
              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
              </div>
            </div>
          </div>
          <div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`">
            <div v-for="(rcitem,rcindex) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
                <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
                <div class="rankHeader" style="display: flex;">
                  <p style="width: 0.5rem;text-align: center;">#</p>
                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                </div>
                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                <ul class="item" >
                  <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                    <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
                      <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
                    </div>
                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                  </li>
                </ul>
                </vue-seamless-scroll> -->
                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
              </div>
              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
              </div>
            </div>
          </div>
          <!-- <scroll-board  :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->

          <div class="block-top-bottom-content" style="flex: 1;"></div>
        </div>
        <!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
      </div>
      <dv-loading v-else>Loading...</dv-loading>
    <!-- </dv-full-screen-container> -->
    </div>
    <div id="dv-full-screen-container2" v-if="showNotices"  style="height: 100vh;width: 100vw;position: fixed;top: 0;left: 0;z-index: 9999;">
          <p v-if="notices.length>0" style="font-size: 0.6rem;margin: 0;padding: 0.2rem; text-align: center;font-weight: bold;">{{ notices[0].title }}</p>
          <div class="inner-content" v-if="notices.length>0" style="font-size: 0.4rem;margin: 0;padding: 0.2rem;white-space: pre-wrap;" v-html="notices[0].content"></div>
      </div>
  </div>
</template>

<script>
import topHeader from './topHeader'
// import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import scrollBoardBottom from './scrollBoardBottom'
import cards from './cards'
import rightTotal from './rightTotal.vue'
import barChart from './barChart.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import pageRank from './pageRank.vue'

export default {
  name: 'DataView',
  components: {
    topHeader,
    // digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    scrollBoardBottom,
    cards,
    rightTotal,
    barChart,
    vueSeamlessScroll,
    pageRank
  },
  data () {
    return {
      Aid: '',
      type: '',
      setting: {},
      totalData: [],
      todayData: [],
      notices: [],
      showNotices:false,
      showData: {
        name: '',
        times: [],
        leftData: [],
        reportedList: [],
        scrollList: [],
        scrollWidth: '20%',
        scrollList2: [],
        listName2:'',
        todayData: [],
        bottomData: [],
        allNum: 0,
        reportedNum: 0
      },
      
      reportSettings:[],
      rankHeader1:[],
      rankHeader2:[],
      rankHeader3:[],
      row1Style:{
        height:'65%',
        width:['25%','50%','25%'],
      },
      row1col1report:[],
      row1col2report:[],
      row1col3report:[],
      row2col1report:[],
      row2col2report:[],
      row2col3report:[],
      row2Style:{
        height:'35%',
        width:['100%','0%', '0%'],
      },
      loadingDone: false
    }
  },
  created (e) {
    console.log(window.location.href.split('?')[1])
    let params = window.location.href.split('?')[1];
    let Aid = params.split('=')[1];
    this.Aid = Aid;
    if(Aid == 'A1'){
      this.row1Style={
        height:'65%',
        width:['25%','50%','25%'],
      };
      this.row2Style={
        height:'35%',
        width:['100%','0%', '0%'],
      }
    }else if(Aid == 'A2'){
      this.row1Style={
        height:'40%',
        width:['100%','0%', '0%'],
      };
      this.row2Style={
        height:'60%',
        width:['80%','20%', '0%'],
      }
    }else if(Aid == 'A3'){
      this.row1Style={
        height:'50%',
        width:['100%','0%','0%'],
      };
      this.row2Style={
        height:'50%',
        width:['100%','0%', '0%'],
      }
    }else if(Aid == 'A4'){
      this.row1Style={
        height:'50%',
        width:['100%','0%','0%'],
      };
      this.row2Style={
        height:'50%',
        width:['100%','0%', '0%'],
      }
    }
    this.createdData(Aid)
    let that = this;
    setInterval(()=>{
      that.createdData(Aid)
    }, 900000)
  },
  methods: {
    createdData (Aid) {
      let that = this
      that.loadingDone = false;
      this.row1col1report = [];
      this.row1col2report = [];
      this.row1col3report = [];
      this.row2col1report = [];
      this.row2col2report = [];
      this.row2col3report = [];
      that.showNotices = false;
      this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
        if (res.code === '200') {
          let data = res.data;
          this.showData.name = res.data.title || '智能数据看板';
          this.reportSettings = data.reportSettings;
          this.notices = data.notices;
          // console.log(data.notices.length>0 , data.notices[0].starttime , data.notices[0].Endtime)
          if(data.notices.length>0 && data.notices[0].starttime && data.notices[0].Endtime){
            let nowtimestamp = new Date().getTime();
            let starttimestamp = new Date(this.notices[0].starttime).getTime();
            let endtimestamp = new Date(this.notices[0].Endtime).getTime();
            console.log(nowtimestamp, starttimestamp, endtimestamp)
            if(nowtimestamp>=starttimestamp && nowtimestamp<=endtimestamp){
              this.showNotices = true;
            }else{
              this.showNotices = false;
            }
          }

          if(data.reportSettings.length>0){
            data.reportSettings.forEach(item=>{
              if(item.columns.length>0){
                item.columns.sort((a,b) => a.sort - b.sort)
              }
              if(item.setting.rowNumber==1 && item.setting.columnNumber==1){
                this.row1col1report.push(item)
              }
              if(item.setting.rowNumber==1 && item.setting.columnNumber==2){
                this.row1col2report.push(item)
              }
              if(item.setting.rowNumber==1 && item.setting.columnNumber==3){
                this.row1col3report.push(item)
              }
              if(item.setting.rowNumber==2 && item.setting.columnNumber==1){
                this.row2col1report.push(item)
              }
              if(item.setting.rowNumber==2 && item.setting.columnNumber==2){
                this.row2col2report.push(item)
              }
              if(item.setting.rowNumber==2 && item.setting.columnNumber==3){
                this.row2col3report.push(item)
              }
             
            })
          }
         
          this.showData.name = res.data.title;
          this.loadingDone = true
        }
      });
    },
    dinnerDataFomat () {
      this.showData.name = this.setting.dinnerName
      this.showData.times = [this.setting.starttime, this.setting.endtime]
      this.showData.allNum = this.dinnerData.details.length
      // 深拷贝 并且 往对象里添加detail
      this.showData.leftData = JSON.parse(JSON.stringify(this.dinnerData.workItemFullData))
      this.showData.leftData.forEach(item => { item.details = [] })
      this.showData.bottomData = JSON.parse(JSON.stringify(this.showData.leftData))
      // 获取已上报数据列表
      let reportedList = this.dinnerData.details.filter((item) => {
        return item.reportID
      })
      // 右侧轮播列表
      // this.showData.scrollList = reportedList.map((item) => {
      //   return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
      // })
      this.showData.reportedNum = this.showData.scrollList.length
      // 一维数组 转换为 二维数组
      // let categoryList = Object.values(reportedList.reduce((res, item) => {
      //   res[item.workItemID] ? res[item.workItemID].push(item) : res[item.workItemID] = [item]
      //   return res
      // }, {}))
      // console.log(categoryList, this.showData.leftData, '+++++++++')
      reportedList.forEach((item, index) => {
        this.showData.leftData.forEach((i, idx) => {
          if (item.workItemID === i.ID) {
            i.details.push(item)
          }
        })
      })
      this.dinnerData.details.forEach((item, index) => {
        this.showData.bottomData.forEach((i, idx) => {
          if (item.workItemID === i.ID) {
            i.details.push(item)
          }
        })
      })
      this.loadingDone = true
    },
    // totalDataFomat () {
    //   this.showData.name = '各个食堂运营情况总结'
    //   this.showData.allNum = 0
    //   this.showData.reportedNum = 0
    //   this.showData.times = [this.setting.starttime, this.setting.endtime]
    //   this.showData.leftData = this.totalData.total.filter(item => {
    //     return !!item.dinnerName
    //   })
    //   this.totalData.total.forEach((item) => {
    //     this.showData.allNum += item.quantity
    //     this.showData.reportedNum += item.quantityDone
    //   })
    //   this.loadingDone = true
    // },
    getToday () {
      var today = new Date() // 创建一个表示当前时间的Date对象
      var year = today.getFullYear() // 获取当前年份（四位数）
      var month = today.getMonth() + 1 // 获取当前月份（注意月份从0开始计算，所以需要加上1）
      var day = today.getDate() // 获取当前日期
      return year + '-' + month + '-' + day
    }
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container,#dv-full-screen-container2{
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .row1-col1,.row1-col2,.row2-col1,.row2-col2{
    box-sizing: border-box;
    overflow: hidden;
  }
  .main-content {
    flex: 1;
    height: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    // flex: 1;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.2rem;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-left: 0.2rem;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    // padding-bottom: 20px;
  }
  .rankHeader{
    font-size: 0.2rem;
    font-weight: bold;
    color: #fff;
    p{
      margin: 0;
      height: 0.5rem;
      line-height: 0.5rem;
      background-color: #1e80ff;
      &:last-child{
        flex: 1;
      }
    }
  }
  .warp {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,a {
        display: block;
        // height: 0.5rem;
        line-height: 0.5rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.2rem;
      }
      .rowStyle1{
        background-color: rgba(10, 29, 50, 0.8);
      }
      .rowStyle2{
        background-color: rgba(0, 44, 81, 0.8);
      }
    }
  }
  #dv-full-screen-container2 .inner-content{
      p{
        margin: 0;
        font-size: 0.3rem;
      }
  }
}
.inner-content{
  h1,h2,h3{margin:0;}
  h1{font-size: 1rem;}
  h2{font-size: 0.6rem;}
}
</style>
