bid/ruoyi-ui/src/views/bigScreen.vue

<template>
  <dv-full-screen-container>
    <dv-loading v-show="isLoading">Loading...</dv-loading>

    <div class="header">
      <div class="title">全 网 招 投 标 商 机 态 势 感 知 中 心</div>
      <dv-decoration-5 style="width:800px;height:50px;" />
    </div>

    <div class="main">

      <div class="lf">1111111111</div>
      <div class="ct">
        <dv-decoration-9 style="width:180px;height:180px;">
          <dv-digital-flop :config="digitalconfig" style="width:120px;height:80px;" />
        </dv-decoration-9>

        <div style="height: 200px;">
          2222222222
        </div>
      </div>
      <div class="rt">
        <dv-scroll-board :config="scrollData" style="width:400px;height:500px"/>
      </div>

    </div>

  </dv-full-screen-container>
</template>

<script>
export default {
  name: "BigScreen",
  data() {
    return {
      isLoading: true,
      digitalconfig: {
        number: [0], // 数字数组
        content: '{nt}条', // 数字格式
      },
      scrollData: {
        data: [
          ['2025/12/9', '宣汉县土黄镇第二中心小学迁建项目'],
          ['2025/12/9', '九龙县湾坝整市政基础设施建设项目'],
          ['2025/12/9', '遂宁市船山区永兴片区污水综合整治项目'],
          ['2025/12/9', '宣汉县土黄镇第二中心小学迁建项目'],
          ['2025/12/9', '九龙县湾坝整市政基础设施建设项目'],
          ['2025/12/9', '遂宁市船山区永兴片区污水综合整治项目'],
          ['2025/12/9', '宣汉县土黄镇第二中心小学迁建项目'],
          ['2025/12/9', '九龙县湾坝整市政基础设施建设项目'],
          ['2025/12/9', '遂宁市船山区永兴片区污水综合整治项目'],
          ['2025/12/9', '宣汉县土黄镇第二中心小学迁建项目'],
          ['2025/12/9', '九龙县湾坝整市政基础设施建设项目'],
          ['2025/12/9', '遂宁市船山区永兴片区污水综合整治项目'],
        ],
        index: true,
        rowNum: 10,
        oddRowBGC: 'rgba(255, 255, 255, 0);',
        evenRowBGC: 'rgba(255, 255, 255, 0.1);',
        columnWidth: [50,90],
      }
    }
  },
  created() {
    this.isLoading = false;
  },
  mounted() {
    setTimeout(()=>{
      this.digitalconfig={...{
          number: [999], // 数字数组
          content: '{nt}条', // 数字格式
        }}
    })
  }
}
</script>

<style scoped lang="scss">
#dv-full-screen-container{
  padding: 0 10px;
  background-image: url("../assets/images/bg1.png");

  .header{
    height: 12vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title{
      margin-top: 10px;
      color: #b1ff8b;
      font-size: 28px;
      font-weight: bold;
    }
  }

  .main{
    height: 85vh;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .lf{
      width: 200px;
    }
    .ct{
      width: 300px;
    }
    .rt{
      width: 400px;
    }
  }

}

</style>