zhu-jiang-yi-yuan-bigscreen/lib/pages/index.less

南方医科大学珠江医院大屏端

@import '../index.less';
@import '~antd/es/style/themes/default.less';

@prefix: ~'@{bigscreen-prefix}-main';

// header 标题距离顶部边界的距离
@header-title-top: 28.33;

// header 标题高度
@header-title-height: 80.9;

//
@content-padding-leftright: 50;
@content-center-width: 1902.95;
@content-left-width: 881.58;
//
@space: 35.85;

.@{prefix} {
  font-size: calc(40/@bigscreen-base-width * 100vw);
  font-family: 'PINGFANG-SC-REGULAR';
  color: white;
  height: 100vh;
  width: 100vw;
  background-color: #022B56;

  .fscreen-button {
    position: fixed;
    top: calc(10/@bigscreen-base-height * 100vh);
    right: calc(10/@bigscreen-base-width * 100vw);
    font-size: calc(30/@bigscreen-base-width * 100vw);
  }

  .refresh-button {
    position: fixed;
    top: calc(10/@bigscreen-base-height * 100vh);
    left: calc(10/@bigscreen-base-width * 100vw);
    font-size: calc(40/@bigscreen-base-width * 100vw);

    .countdown {
      margin-left: calc(20/@bigscreen-base-height * 100vh);
      font-size: calc(40/@bigscreen-base-width * 100vw);
      display: inline;

      .ant-statistic-content {
        display: inline;
        font-size: calc(40/@bigscreen-base-width * 100vw);
        color: white;
      }
    }
  }

  .main {
    height: 100vh;
    background: url('../assets/bg_overlay.svg');
    background-repeat: no-repeat;
    background-position: left 50% top calc(-100/@bigscreen-base-height * 100vh);
    background-size: calc(2760/@bigscreen-base-width * 100vw);

    .header {
      width: 100vw;
      height: calc(177/@bigscreen-base-height * 100vh);
      padding-top: calc(@header-title-top/@bigscreen-base-height * 100vh);
      color: white;
      background: url('../assets/head_wing.svg');
      background-repeat: no-repeat;
      background-position: left 50% bottom 0;
      background-size: calc(3200/@bigscreen-base-width * 100vw);

      .title {
        height: calc(@header-title-height/@bigscreen-base-height * 100vh);
        line-height: $height;
        font-size: calc(57/@bigscreen-base-width * 100vw);
        text-shadow: 0 0 calc(20/@bigscreen-base-width * 100vw) rgba(31, 244, 255, 50%);
        font-family: 'MSTIFFHEI-ULTRABOLD';
        text-align: center;

        img {
          width: calc(78.88/@bigscreen-base-width * 100vw);
          opacity: 0.7;
        }
      }

      .current-date {
        height: calc(56/@bigscreen-base-height * 100vh);
        margin-top: calc((202 - @header-title-top - @header-title-height)/@bigscreen-base-height * 100vh);
        text-shadow: 0 0 calc(5/@bigscreen-base-width * 100vw) rgba(31, 244, 255, 50%);
        text-align: center;
      }
    }

    .content {
      color: white;
      margin-top: calc(@space/@bigscreen-base-height * 100vh);

      >.content-col {
        display: inline-block;

        >.content-col {
          margin-bottom: calc(@space/@bigscreen-base-height * 100vh);
        }

        &.content-left {
          width: calc(@content-left-width/@bigscreen-base-width * 100vw);
          left: calc(@content-padding-leftright/@bigscreen-base-width * 100vw);
          position: absolute;
        }

        &.content-center {
          width: calc(@content-center-width/@bigscreen-base-width * 100vw);
          left: calc(100vw/2 - $width/2);
          position: absolute;

          >.content-col {
            margin-bottom: unset;

            &:first-child {
              margin-bottom: calc(@space/@bigscreen-base-height * 100vh);
            }

            >.content-col {
              margin-bottom: calc(@space/@bigscreen-base-height * 100vh);
              width: 50%;
              display: inline-block;


              &:first-child {
                padding-right: calc(@space/2/@bigscreen-base-height * 100vh);
              }

              &:last-child {
                padding-left: calc(@space/2/@bigscreen-base-height * 100vh);
              }
            }
          }
        }

        &.content-right {
          width: calc(886.5/@bigscreen-base-width * 100vw);
          right: calc(@content-padding-leftright/@bigscreen-base-width * 100vw);
          position: absolute;
        }
      }
    }
  }
}