@import './wh.scss';

.data-display-container{
  width: 100vw;
  height: 100vh;
  background: url('../images/display-back.png') no-repeat;
  background-size: 100% 100%;
  color: #9ca0aa  ;
}
.display-top-header{
  width: 100vw;
  height: h(70); 
  display: flex;
  justify-content: space-between;
  .left-header{
    height: 100%;
    background: url('../images/top-header-left.png') no-repeat;
    background-size: 100% 100%;
    .header-current{
      display: inline-block;
      height: h(55);
      line-height: h(55); 
      background-image:-webkit-linear-gradient(bottom,rgb(128, 196, 255),rgb(244, 250, 255)); 
      background-clip:text; 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
      font-family: din;
      font-weight: 500;
      font-size: w(16);
      .display-clock{
        margin: 0 w(10) 0 0;
      }
    }
  }
  .center-header{
    display: flex;
    height: 100%;
    font-family: pmzd;
    line-height: h(70);
    color: #fff;
    text-align: center;
    font-size: w(34);
    font-weight: 400;
    background: url('../images/top-header-center.png') no-repeat;
    background-size: 100% 100%;
    .display-logo{
      font-size: h(65);
    }
    .display-title{
      display: inline-block;
      height: h(70);
      line-height: h(70);
      background-image:-webkit-linear-gradient(bottom,rgb(189, 225, 255),rgb(255, 255, 255)); 
      background-clip:text; 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
    }
  }
  .right-header{
    height: 100%;
    background: url('../images/top-header-right.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .right-header-content{
      display: flex;
      position: absolute;
      right: w(10);
      top: h(18);
      .content{
        width: w(165);
        position: relative;
        .content-text{
          display: block;
          width: w(160);
          height: h(36);
          padding-left: h(50);
          background-image:-webkit-linear-gradient(right,#0057A1,#142142); 
          border-radius: h(18);
          line-height: h(36);
          position: absolute;
          top: h(4);
          font-size: w(16);
          font-family: pmzd;
          font-weight: 400;
          color: #fff;
          text-shadow: 2px 2px 8px rgba(0, 138, 255, 0.7);
          white-space: nowrap; /* 防止文本换行 */  
          overflow: hidden; /* 文本溢出容器时隐藏 */  
          text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */  
          span{
            color: #18FEFE;
          }
        }
        .content-icon{
          display: block;
          width: w(44);
          height: h(44);
          // position: absolute;
          .display-right{
            font-size: h(44);
          }
        }
      }
      .content-right{
        width: w(180);
        .content-text{
          width: w(175);
        }
      }
    }
  }
}