@import "base.less"; 
@import "element.less";

//设计的基础宽度
@base_width: 750;

@navLightLine: red;


//body开发调试
body {
  background-color: #000;
}



.pageViewForPad{

  
  width: 100%;

  nav {

    background-color:rgba(0,0,0,0.8);
    position:fixed;
    z-index:100;
    
    display:block;
    padding-left: (20vw / @base_width) * 100;
    overflow-x: auto;
    overflow-y: hidden;

    color: @titleColor;
    box-sizing: border-box;
    border-bottom: 1px solid @lineColor;

    .navList{
      display:block;
      color:@titleColor;

      div {

        padding-top: (13.5vw / @base_width) * 100;
        padding-bottom: (13.5vw / @base_width) * 100;
        display:inline-block;
        margin-right:(54vw / @base_width) * 100;
        width:max-content;
        font-size: (18vw / @base_width) * 100;
      }
    }

  }

  main{

    padding-top: (48vw / @base_width) * 100;
    color:@titleColor;

    .loading{
      width:100%;
      padding-top: (32vw / @base_width) * 100;
      padding-bottom: (32vw / @base_width) * 100;

      .flowerImg{
        opacity:0.65;
        background-image:url(img/shortvideo/default.gif);
        background-size:cover;
        display:block;
        margin:auto;
        width: (32vw / @base_width) * 100;
        height: (32vw / @base_width) * 100;
      }
    }

    .nothing{
      width:100%;
      padding-top: (15vw / @base_width) * 100;
      padding-bottom: (15vw / @base_width) * 100;

      .round{
        margin:auto;
        background-color:gray;
        width: (15vw / @base_width) * 100;
        height: (15vw / @base_width) * 100;
        border-radius:100%;
      }
    }

    article {
      overflow:hidden;
      width: (345vw / @base_width) * 100;
      display:block;
      float:left;
      position:relative;
      padding-left: (20vw / @base_width) * 100;
      margin-top: (15vw / @base_width) * 100;
      padding-bottom: (12vw / @base_width) * 100;

    }

    .lineForPad{
      display:block;
      width:100%;
      height:1px;
      background-color:@lineColor;
    }

    .cover {

      background-size:cover;
      background-image:url(./img/shortvideo/beforeLoadingVideo.png);
      position:relative;
      display:block;
      border: 0px solid;
      width: (355vw / @base_width) * 100;
      height: (200vw / @base_width) * 100;

      .playIcon{
        opacity:0.55;
        background-size:cover;
        background-image:url(./img/shortvideo/shortvideo_play.png);
        position:absolute;
        left: (145.75vw / @base_width) * 100;
        top: (72.5vw / @base_width) * 100;
        width: (55.5vw / @base_width) * 100;
        height: (55.5vw / @base_width) * 100;
      }

      .duration{
        font-size: (12vw / @base_width) * 100;
        text-align:right;
        width:94%;
        position:absolute;
        top: (180vw / @base_width) * 100;

        span{
          padding: (4vw / @base_width) * 100;
          background: rgba(0,0,0,0.3);
          border-radius:(3vw / @base_width) * 100;
        }
      }
    }
    
    .title {
      background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.6), rgba(0,0,0,0.3), transparent);
      text-shadow: 0px 0px 2px black; 
      padding: (14vw / @base_width) * 100;
      font-size: (16vw / @base_width) * 100;
      line-height: (21vw / @base_width) * 100;
    }

    .brief {

      clear:both;
      font-size: (14vw / @base_width) * 100;
      padding-top: (12vw / @base_width) * 100;
      color: @infoColor;

      div {
        display:inline-block;
        float:left;
      }

      .orgIcon img{
        display:inline-block;
        width: (36vw / @base_width) * 100;
        height: (36vw / @base_width) * 100;
        border-radius:100%;
      }

      .orgName {
        width: 50%;
        padding-left: (12vw / @base_width) * 100;
        padding-top: (9vw / @base_width) * 100;
        height: (23vw / @base_width) * 100;
      }

      .playingCount {
        text-align:right;
        width: 34%;
        padding-top: (10vw / @base_width) * 100;
      }
    }

    .brief:after {
      content: "";
      display: table;
      clear: both;
    }

  }

  .navLight {
    color:red;
    border-bottom: 2px solid @navLightLine;
  }

}

.pageView{

  
  width: 100%;

  nav {
    
    background-color:rgba(0,0,0,0.8);
    position:fixed;
    z-index:100;

    display:block;
    padding-left: (20vw / @base_width) * 100;
    overflow-x: auto;
    overflow-y: hidden;

    color: @titleColor;
    box-sizing: border-box;
    border-bottom: 1px solid @lineColor;

    .navList{
      display:block;
      color:@titleColor;


      div {

        padding-top: (25vw / @base_width) * 100;
        padding-bottom: (25vw / @base_width) * 100;
        display:inline-block;
        margin-right:(38vw / @base_width) * 100;
        width:max-content;
        font-size: (38vw / @base_width) * 100;
      }
    }

  }

  main{

    color:@titleColor;
    padding-top: (88vw / @base_width) * 100;

    .loading{
      width:100%;
      padding-top: (24vw / @base_width) * 100;
      padding-bottom: (24vw / @base_width) * 100;

      .flowerImg{
        opacity:0.65;
        background-image:url(img/shortvideo/default.gif);
        background-size:cover;
        display:block;
        margin:auto;
        width: (64vw / @base_width) * 100;
        height: (64vw / @base_width) * 100;
      }
    }

    .nothing{
      width:100%;
      padding-top: (23vw / @base_width) * 100;
      padding-bottom: (23vw / @base_width) * 100;

      .round{
        margin:auto;
        background-color:gray;
        width: (23vw / @base_width) * 100;
        height: (23vw / @base_width) * 100;
        border-radius:100%;
      }
    }
    
    article {
      height:max-content;
      border-bottom: 1px solid @lineColor;
      margin-top: (30vw / @base_width) * 100;
      padding-bottom: (20vw / @base_width) * 100;

    }

    .cover {
      position:relative;
      background-size:cover;
      background-image:url(img/shortvideo/beforeLoadingVideo.png);
      display:block;
      border: 0px solid;
      width: (750vw / @base_width) * 100;
      height: (400vw / @base_width) * 100;


      .playIcon{
        opacity:0.55;
        background-size:cover;
        background-image:url(./img/shortvideo/shortvideo_play.png);
        position:absolute;
        left: (298vw / @base_width) * 100;
        top: (143vw / @base_width) * 100;
        width: (114vw / @base_width) * 100;
        height: (114vw / @base_width) * 100;
      }

      .duration{
        font-size: (20vw / @base_width) * 100;
        text-align:right;
        width:96%;
        position:absolute;
        top: (360vw / @base_width) * 100;
        span{
          padding: (10vw / @base_width) * 100;
          background: rgba(0,0,0,0.3);
          border-radius:(8vw / @base_width) * 100;
        }
      }
    }
    
    .title {
      background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.6), rgba(0,0,0,0.4), transparent);
      text-shadow: 0px 0px 3px black; 
      padding: (30vw / @base_width) * 100;
      font-size: (33vw / @base_width) * 100;
      line-height: (43vw / @base_width) * 100;
    }

    .brief {
      width: 70%;
      clear:both;
      font-size: (28vw / @base_width) * 100;
      padding-top: (25vw / @base_width) * 100;
      padding-left: (12vw / @base_width) * 100;
      color: @infoColor;

      div {
        display:inline-block;
        float:left;
      }

      .orgIcon img{
        display:inline-block;
        width: (70vw / @base_width) * 100;
        height: (70vw / @base_width) * 100;
        border-radius:100%;
      }

      .orgName {
        width: 45%;
        padding-left: (20vw / @base_width) * 100;
        padding-top: (17vw / @base_width) * 100;
        height: (43vw / @base_width) * 100;
      }

      .playingCount {
        text-align:right;
        width: 39%;
        padding-top: (17vw / @base_width) * 100;
        height: (43vw / @base_width) * 100;
      }
    }

    .brief:after {
      content: "";
      display: table;
      clear: both;
    }
    .share{
      width: (100vw / @base_width) * 100;
      height: (100vw / @base_width) * 100;
      position: relative;
      float:right;
      left: (-15vw / @base_width) * 100;
      top: (-94vw / @base_width) * 100;
      .shareVideo{
        float:right;
        width: (40vw / @base_width) * 100;
        height: (40vw / @base_width) * 100;
        position: relative;
        left: (-27vw / @base_width) * 100;
        top: (30vw / @base_width) * 100;
        background-image: url("img/shortvideo/share@3x.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }



  }

  .navLight {
    color:red;
    border-bottom: 2px solid @navLightLine;
  }

}