lixin-web/webapp/less/page/event.less

vue and bootstrap

body{
  @media (min-width:@screen-sm){
    background-repeat:no-repeat;
    background-position: 50% @banner-top;
  }
}

.game-event{
  padding-bottom: 15px;
  margin-top:@bar-height;
  @media (min-width:@screen-sm){
    margin-top: 290px;
    padding-bottom: 40px;

  }
  @media (min-width:@screen-md){
    margin-top: 342px;
  }
}

.game-event-nav{
  position: absolute;
  bottom: 40px;
  top:342px;
  //position: relative;
  //float: left;
  //&.affix{
  //  top:@banner-top + 68;
  //}
  //&.affix-bottom{
  //  bottom:120px;
  //}
  > div{
    &:before,&:after{
      content: '';
      position: absolute;
    }
    &:before{
      left: 64px;
      top: -28px;
      background-image: url(../../img/event/icon-event-arrow.png);
      width: 16px;
      height: 14px;
    }
    &:after{
      bottom: 0;
      top: -15px;
      left: 68px;
      width: 8px;
      background: #fff;
      border:solid #d5d5d5;
      border-width: 0 1px 1px;
    }
    &.ivu-affix{
      //.footer height 100
      bottom:100px + 40;
    }
  }

  li{
    position: relative;
    z-index:1;
    padding-left: 50px;
    line-height: 52px;
    margin-bottom: 20px;
    width: 172px;
    background-image: url(../../img/event/icon-event-nav.png);
    font-size:@font-size-medium;
    a{
      color: #999;

    }
    &:hover,&.active{
      background-image: url(../../img/event/icon-event-nav_hover.png);
      a{
        color: #fff;
      }
    }
  }
}


.game-event-main{
  &.el-collapse{
    border:none;
  }
  .el-collapse-item{
    position: relative;
    animation-delay:.3s;
    margin-bottom: 15px;
    @media (min-width:@screen-sm){
      margin-bottom: 30px;
      &:after{
        content: '';
        background-repeat:repeat-x;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -13px;
        background-image: url(../../img/collapse_decorate.png);
        height: 14px;
      }
    }
    &:nth-child(2){
      animation-delay:.6s;
    }
    &:nth-child(3){
      animation-delay:.9s;
    }
    &:nth-child(4){
      animation-delay:1.2s;
    }
  }
  .el-collapse-item__header{
    padding-left: 0;
    //height:auto;
    //color: #666;
    //border-bottom-color: #f6f6f6;
    i{
      display: none;
    }
    &,img{
      .border-top-radius(@border-radius-base);
    }
    img{
      width: 100%;
    }
  }

  .el-collapse-item__wrap{
    //background: #fff;
    border:solid #f6f6f6;
    border-width:0 1px;
  }
  h3{
    font-size:@font-size-medium;
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
    border:solid #f6f6f6;
    border-width:0 1px;
    @media (min-width:@screen-sm){
      padding: 15px;
      font-size:@font-size-large;

    }
  }
  .el-collapse-item__content{
    padding-top: 15px;
    padding-bottom: 15px;
    color: @gray;
    h4{
      margin-top: 0;
    }
    p{
      line-height: 24px;
    }
    > .text-center{
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
  .fixed-table-container{
    clear: inherit;
  }
  .el-table{
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: @font-size-medium;
    .table {
      th {
        background: @brand-primary;
        color: #fff;
        font-weight:bold;
      }
    }
  }
  li{
    line-height: 24px;
  }
  .btn{
    font-size: 14px;
    width: 120px;border-radius: 0;
  }
  .fade-enter-active,.fade-leave-active{
    transition-duration:1s
  }
  @media (min-width:@screen-sm){
    padding-left: 205px;
    min-height: 580px;
  }
}

.footer{
  @media (min-width:@screen-sm){
    position: relative;
  }
}