大屏示例

注意

<dv-full-screen-container> 实际项目放开注释

<div style="width: 100%;height: 100%">实际项目删除

边框参考：dataV-边框 (opens new window)

装饰参考：dataV-装饰 (opens new window)

Loading加载参考：dataV-Loading加载 (opens new window)

<template>
  <div style="width: 100%;height: 100%">
    <!--  <dv-full-screen-container>-->
    <!--      <dv-border-box-11 title="dv-border-box-11"></dv-border-box-11>-->
    <div class="container">
      <div class="top">
        <div class="top-left">
          <dv-border-box-4 title="dv-border-box-12" style="display: flex">
            <dv-border-box-10 title="dv-border-box-10" class="left-set">
              <!--              左上-->
              <!--              <RingChart></RingChart>-->
            </dv-border-box-10>
            <!--            <dv-border-box-10 title="dv-border-box-10" class="left-set">-->
            <!--              &lt;!&ndash;              左中&ndash;&gt;-->
            <!--            </dv-border-box-10>-->
            <dv-border-box-10 title="dv-border-box-10" class="left-set">
              <!--              左下-->
              <!--              <ScrollRanking></ScrollRanking>-->

            </dv-border-box-10>
          </dv-border-box-4>
        </div>
        <div class="top-center" style="position: relative;">
          <dv-border-box-11 title="数据大屏驾驶舱">
            <!--            <FlylineChart></FlylineChart>-->
          </dv-border-box-11>
          <!--          <dv-decoration-7 style="width:80px;height:40px;position: absolute; top: -5px; left: calc(50% - 240px);">首页</dv-decoration-7>-->
        </div>
        <div class="top-right">
          <dv-border-box-4 :reverse="true" title="dv-border-box-12" style="display: flex">
            <dv-border-box-10 title="dv-border-box-10" class="right-set">
              <!--              <PercentPond></PercentPond>-->

            </dv-border-box-10>
            <dv-border-box-10 title="dv-border-box-10" class="right-set">
              <!--              <CapsuleChart></CapsuleChart>-->

            </dv-border-box-10>
            <dv-border-box-10 title="dv-border-box-10" class="right-set">
              <div class="grid-container">
                <div class="grid-item">
                  <!--                  <DigitalFlop></DigitalFlop>-->
                </div>
                <div class="grid-item">
                  <!--                  <DigitalFlop :config="config1"></DigitalFlop>-->
                </div>
                <div class="grid-item">
                  <!--                  <DigitalFlop :config="config2"></DigitalFlop>-->
                </div>
                <div class="grid-item">
                  <!--                  <DigitalFlop :config="config3"></DigitalFlop>-->
                </div>
              </div>
            </dv-border-box-10>
          </dv-border-box-4>
        </div>
      </div>
      <div class="foot">
        <div class="foot-left">
          <dv-border-box-9 title="dv-border-box-12">
            <!--            <LevelPond></LevelPond>-->
          </dv-border-box-9>
        </div>
        <div class="foot-center">
          <dv-border-box-1 title="dv-border-box-12">
            <!--            <ConicalColumn></ConicalColumn>-->
          </dv-border-box-1>
        </div>
        <div class="foot-right">
          <dv-border-box-9 title="dv-border-box-12">
            <!--            <ScrollBoard></ScrollBoard>-->
          </dv-border-box-9>
        </div>
      </div>
    </div>
    <!--  </dv-full-screen-container>-->
  </div>
</template>

<style>
  /**
  *实际项目放开
  body {
    background-color: #000000;
  }
   */


  * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }


  .top {
    height: 75%;
    width: 100%;
    display: flex;
  }

  .top-left {
    width: 25%;
    color: white;
  }

  .top-center {
    width: 50%;
    color: white;
  }

  .top-right {
    width: 25%;
    color: white;
  }

  .foot {
    height: 25%;
    width: 100%;
    display: flex;
  }

  .foot-left {
    width: 25%;
    color: white;
  }

  .foot-center {
    width: 50%;
    color: white;
  }

  .foot-right {
    width: 25%;
    color: white;
  }

  .left-set {
    position: relative;
    width: calc(100% - 50px);
    height: calc(50% - 45px);
    margin: 30px 25px;
  }

  .right-set {
    position: relative;
    width: calc(100% - 50px);
    height: calc(33.33% - 53.33px); /* 计算高度，减去间距 */
    margin: 40px 25px; /* 设置间距 */
  }

  .grid-container {
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-template-rows: calc(50% - 5px) calc(50% - 5px);
    gap: 10px;
    height: 100%;
    width: 100%;
    padding: 20px;
  }

  .grid-item {
    position: relative;
    border: 1px solid black;
    text-align: center;
  }
</style>

Expand Copy Copy