lixin-web/webapp/less/lottery/landscape.less

vue and bootstrap

@import "../variables";
@import "~lesshat/lesshat";
@import "../mixins.less";

.landscape{
  // change skin layout require overflow-x
  overflow-x: hidden;
  .lottery-header{
    margin-bottom: 5px;
  }
  .lottery-launch{
    top: 250px;
  }
  //.lottery-body{
  //  margin-bottom: 60px;
  //  &:after{
  //    height: 10px;
  //    background-image: url(../../img/lottery/lotto_bd_landscape_decorate.png);
  //    bottom: -10px;
  //  }
  //  @media (min-width:@screen-sm){
  //    box-shadow:1px 5px 18px fade(#000,27);
  //    padding-left: 13px;
  //    padding-right: 13px;
  //  }
  //}
  .lottery-betting{
    width: 762px;
    float: left;
    padding-top: 35px;
    border-width:0 1px;
    height: 475px;
    & + div{
      position: absolute;
      width: 382px;
      right: 13px;
      top: 34px + 34px;
    }
  }

  .play-groups{
    position: absolute;
    left: 14px;
    right: 14px;
    top: 34px;
  }
  .play-list{
    min-height:68px;
    > div{
      &:nth-child(2):not(:last-child){
        position: absolute;
        left: 260px;
        top: 76px;
      }
    }
  }
  .play-help{
    .btn{
      right: 415px;
    }
  }
  .play-area{
    min-height: 240px;
    //.display(flex);
    //.justify-content(center);
    //.flex-direction(column);
    .balls li{
      margin-left: 3px;
      margin-right: 3px;
    }
    .row > .tools{
      margin-right: 10px;
      li{
        margin-left: 2px;
        margin-right: 2px;
      }
    }
    textarea{
      width:760px - 36;
    }
  }
  .adjust-prize{
    @media (min-width:@screen-md){
      .prize{
        position: absolute;
        top: 152px;
        //left: 650px;
        & + span{
          margin-left: 20px;
        }
      }
    }
  }
  .order-list{
    h4{
      border-right:1px solid #d5d5d5;
      margin-top: 0;
      margin-bottom: 0;
      line-height: 30px;
      span{
        font-size: 20px;
        .icon-alignment();
        top:-1px;
        margin-right: 5px;
      }
    }
    tr{
      td:nth-child(3),td:nth-child(4),td:nth-child(5),th:nth-child(3),th:nth-child(4),th:nth-child(5){
        display: none;
      }
    }
    td,.th-inner {
      text-align: left;
      padding-left: 10px!important;
    }
    [data-field="placeholder"]{
      //删除 t
      .th-inner{
        padding-left: 3px!important;
      }
    }
    .th-inner{
      line-height: 21px;
    }
    .fixed-table-container{
      border-left:none;
      height: 238px!important;
      background: @module-bg;
    }
    .fixed-table-header{
      table{
        background: transparent;
      }
      //th{
      //  background: @module-bg;
      //}
    }
    .fixed-table-body{
      //border-bottom:1px solid #d5d5d5;
      &,table,tbody tr:nth-child(even){
        background: @module-bg;
      }
      tbody{
        tr{
          &:nth-child(odd){
            background: #fff;
          }
          &.no-records-found{
            &,td{
              background: @module-bg;
            }
            td{
              color: @gray;text-align: center;
            }
          }
        }
      }
    }
    .fixed-table-footer{
      position: absolute;
      top: 310px;
      border-top:none;
      tr{
        td{
          &:first-child{
            .th-inner{
              margin-left: 75px;
            }
          }
          //&:not(:first-child){
          //  display: none;
          //}
        }
      }
    }
    .table-no-bordered{
      .fixed-table-body{
        overflow-x: hidden;
      }
    }
  }

  .lotto-clear-both{
    clear:both;
    border-top:1px solid #d5d5d5;
    height: 40px;
  }

  //.lottery-order-record{
  //  clear:both;
  //  border-top:1px solid #d5d5d5;
  //  height: 40px;
  //  .nav-tabs{
  //    margin: 0 auto 20px;
  //    width: 231px;
  //    display: block;
  //    li{
  //      width:116px;
  //      border-color:@brand-primary;
  //      a{
  //        font-size:@font-size-medium;
  //        color: @brand-primary;
  //        &:hover,&:focus{
  //          background: #fff;
  //        }
  //      }
  //    }
  //    .active{
  //      background: @brand-primary;
  //      a{
  //        color: #fff;
  //        &:hover,&:focus{
  //          background: @brand-primary;
  //        }
  //      }
  //    }
  //  }
  //  > .modal{
  //    > .modal-dialog{
  //      width: 842px;
  //    }
  //  }
  //
  //}

  .lotto-record-modal{
    .el-radio-group{
      display: block;
      margin:0 auto 10px;
      text-align: center;
    }
  }

  .lottery-button-groups{
    text-align: center;
    padding-top: 40px;
    border-right:1px solid #d5d5d5;
    height: 173px;
    .btn{
      color: @gray;
      border-color:#d5d5d5;
      &:nth-child(1),&:nth-child(2){
        padding-top: 0px;
        padding-bottom: 0px;
        line-height: 30px;
        span{
          font-size: @font-size-base * 2.2;
          top:0
        }
        &:hover,&:focus{
          border-color:@brand-primary;
          color: @brand-primary;
        }
        &:active{
          background: @brand-primary;
          color: #fff;
        }
      }
      &:nth-child(2){
        span{
          margin-right: 0;
          top:-.05em;
        }
      }
      &:nth-child(3){
        left: 0;
        right: 0;
        background: @module-bg;
        border-width:0 1px 1px 0;
        border-radius:0;
        position: absolute;
        top: 268px;
        padding-top: 5px;
        padding-bottom: 5px;
        span{
          font-size: @font-size-base * 1.8;
          top: 0;
        }
      }
    }
    .btn-primary{
      display: block;
      color: #fff;
      width:214px;
      margin:30px auto 0;
      padding-top: 11px;
      padding-bottom: 11px;
    }
  }
}

.lottery-header,.lottery-launch,.lottery-body,.lottery-betting,.lottery-betting + div
  ,.play-groups,.play-area
  ,.adjust-prize,.lottery-order-record,.lottery-button-groups
{

  transition:.3s;
}