SaaS-DataScreen/src/views/index/components/entrance-guard/index.scss

@import '@/assets/css/function';

.entrance-guard{
  background: url('./images/logo@3x.png') no-repeat;
  background-size: 100% 100%;
  height: halfH(378);
  color: #fff;
  padding: 0 halfH(22);
  overflow: hidden;
  .tips{
    display: flex;
    padding: halfH(20) 0 halfH(12);
    align-items: flex-end;
    .tips-logo{
      width: halfW(50);
    }
    .tips-desc{
      flex: 1;
      text-align: right;
      font-size: halfH(22);
      .tips-desc-unit{
        color: #52DCFF;
        font-size: halfH(12);
      }
    }
  }
  .list{
    border-top: 1px solid #0748A2;
    padding-top: halfH(12);
    overflow: hidden;
    height: halfH(220);
    .list-item{
      display: flex;
      align-items: center;
      padding-bottom: halfH(12);
      animation: bubble 20s linear infinite;
      backface-visibility: hidden;
      animation-fill-mode: forwards;
      -webkit-animation: bubble 20s linear infinite;
      -webkit-backface-visibility: hidden;
      -webkit-animation-fill-mode: forwards;
      .list-item-txt{
        font-size: halfH(14);
      }
      .list-item-lr{
        flex: 1;
        text-align: right;
      }
    }
  }
  @keyframes bubble {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-600px);
      transform: translateY(-600px);
    }
  }
}