FE-daPengDaPing-led-2/src/views/components/center-bottom-right.vue

<template>
  <div class="center-bottom-right">
    <titleComponent :titleData="titleData"></titleComponent>
    <div class="center-bottom-right-page">
      <div class="dv-scroll-board-title-box">
        <p>设施房间</p>
        <p>使用人所属
          单位</p>
        <p>房间准入总
          人数</p>
        <p>30日进入总
          人次</p>
        <p>7日进入总
          人次</p>
      </div>
      <p class="null-p" v-if="!config.data[0]">暂无数据</p>
      <dv-scroll-board :config="config" style="width:773px;height:540px;margin:0 24px;" v-if="config.data[0]"/>
    </div>
  </div>
</template>
<script>
  import titleComponent from './subcomponent/titleComponent.vue'
  export default {
    name: 'center-bottom-right',
    components: {
      titleComponent,
    },
    data () {
      return {
        titleData:{
          name:'资源设施使用频率排行',
          type:'bottom2',
          num:'6',
        },
        config: {
          rowNum: 7,
          columnWidth:[154,154,150,150,150],
          align:['center','center','center','center','center'],
          oddRowBGC: 'rgba(0,71,152,0.1)',
          evenRowBGC: 'rgba(0,0,0,0.1)',
          data: [
            ['A01','植保学院','4','96','9',],
            ['A02','植保学院','4','96','9',],
            ['A03','植保学院','4','96','9',],
            ['A04','植保学院','4','96','9',],
            ['A05','植保学院','4','96','9',],
            ['A06','植保学院','4','96','9',],
            ['A07','植保学院','4','96','9',],
            ['A08','植保学院','4','96','9',],
            ['A09','植保学院','4','96','9',],
            ['A010','植保学院','4','96','9',],
          ]
        },
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{

    },
  }
</script>
<style scoped lang="scss">
  .center-bottom-right{
    width:821px;
    height:744px;
    .center-bottom-right-page{
      width:821px;
      height:664px;
      background-image: url("../../assets/ZDimages/icon_jrrs_bg@1x.png");
      background-size: 100% 100%;
      .dv-scroll-board-title-box{
        width: 773px;
        height: 80px;
        background: rgba(1,77,146,0.5);
        font-family: Source Han Sans CN;
        display: flex;
        margin:28px 24px 0;
        p{
          font-size:26px;
          color:#1476DF;
          text-align: center;
          line-height: 28px;
          margin-top:12px;
        }
        p:nth-child(1){
          width:160px;
          margin-top:26px;
        }
        p:nth-child(2){
          width:154px;
        }
        p:nth-child(3){
          width:150px;
        }
        p:nth-child(4){
          width:150px;
        }
        p:nth-child(5){
          width:150px;
        }
      }
      ::v-deep .ceil{
        font-size:26px;
      }
    }
  }
</style>