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

vue and bootstrap

.lottery-nav{
  color: #fff;
  z-index: @zindex-navbar + 10;
  .btn{
    font-size: @font-size-medium;
  }
  &.el-dropdown{
    position: absolute;
    .btn{
      padding-bottom: 43px;
      padding-top: 45px;
      padding-left: 210px;
      &,&:active{
        background: transparent;
        border-color:transparent;
      }
      &:active{
        box-shadow:none
      }
      span{
        .text-hide();
      }
    //  width: 96px;
    //  padding-top: 2px;
    //  padding-bottom: 2px;
    //  border-radius: 0;
    //  &,&:hover,&:focus,&:active,&:active:focus{
    //    border-color:fade(#fff,50);
    //    background: #42d2db;
    //  }

    }
  }



}

.lottery-nav-list{
  padding-top: 0;
  padding-bottom: 0;
  //border-radius:0;
  top: 75px;
  &.el-dropdown-menu{
    background: fade(@brand-warning,80);
    border:none;
  }
  >ul > li{
    text-align: center;
    border-bottom:1px solid fade(#fff,40);
    > div:first-child{
      display: none;
    }
    &:last-child{
      border:none
    }

  }
  .items{
    a{
      line-height: 24px;
      display: inline-block;
      @lottery-nav-item-width:1/3 * 100%;
      color: #fff;
      width: 90px;
      width:~'calc(@{lottery-nav-item-width} - 10px)';
      text-align:center;
      margin-bottom: 10px;
      margin-left: 3px;
      margin-right: 3px;
      .transition(.15s);position: relative;
      &:hover,&:focus{
        border-color:#fff;
        color: @text-color;
      }
    }

  }
  //.icon-new,.icon-hot{
  //  position: absolute;
  //
  //}
  //.icon-hot{
  //  right: -15px;
  //  top: 0;
  //}
  //.icon-new{
  //  top: 13px;
  //  right: -17px;
  //}
  > ul{

    > li{
      height: 330px;
      float: left;
      width:100%/7;
      border-right:1px solid fade(#fff,40);
      > div:first-child{
        //display block overwrite none
        display: block;
        .text-hide();
        margin: 10px auto 5px;
      }
      &:nth-child(2){
        .items a:first-child{
          //重庆时时彩 字符长度小于后面的.15分彩
          .new{
            right: 17px;
          }
          .hot{
            right: 32px;
          }
        }
      }
    }
    .items{
      margin-right: -5px;
      overflow:hidden;
      a{
        display: block;
        width: auto;
        margin-bottom: 0;
        line-height: 28px;
      }
    }
  }

  &.el-dropdown-menu{
    width: @container-lg;
    left:0!important;
    right: 0;
    margin:auto;
    box-shadow: none;
    .items{
      .new,.hot{
        position: absolute;
        margin-top: 9px;
        width: 11px;
        height: 11px;
      }
      .new{
        margin-left: 20px;
        background-image: url(../../img/lottery/icon-sup-new.png);
      }
      .hot{
        margin-left: 5px;
        background-image: url(../../img/lottery/icon-sup-hot.png);
      }
    }
  }
}

//.lottery-nav-list .u9 { background: #00c4ff; }
//.lottery-nav-list .ssc { background: #f7b24a; }
//.lottery-nav-list .x511 { background: #3a85c9; }
//.lottery-nav-list .k3 { background: #58b530; }
//.lottery-nav-list .c3 { background: #ff6e63; }
//.lottery-nav-list .kl8 { background: #01bada; }
//.lottery-nav-list .pk10 { background: #e48129; }