_detail.scss 4.1 KB
@charset "utf-8";
/**
 * Created by chenglong.wang@yoho.cn on 2014/1/4.
 */

.fashion{
  margin: 0 15px 0 15px;
  >h2{
    font-size: 2rem;
    font-weight: bold;
    margin-top: 15px;
    line-height: 24px;
  }
  >h3{
    font-size: 2rem;
    font-weight: bold;
    margin-top: 2px;
    line-height: 24px;
  }
  >p{
    font-size: 1.4rem;
    margin-top: 15px;
    color: #999;
    a{
      color: #999;
      @include unstyled-link();
      display: inline-block;
    }
    .detail_author{
      display: block;
      margin-bottom: 5px;
      text-decoration: underline;
      font-weight: normal;
    }
  }
  strong,b{
    font-weight: bold;
  }
  .fashion-banner.swiper-container{
    width: 100%;
    height: 185px;
    position: relative;
    overflow: hidden;
    background: #fff;
    .swiper-slide{
      width: 290px;
      height: 185px;
      display: block;
      overflow: hidden;
      float: left;
      background: #fff;
      text-align: center;
    }
    img{
      height: 185px;
      width: auto;
      margin: 0 auto;
      display: inline-block;
    }
    .fashion-switch{
      @include retina-sprite($icons,page-opacity);
      font-size: 1.4rem;
      color: #fff;
      font-weight: bold;
      text-align: center;
      line-height: 22px;
      position: absolute;
      right: 5px;
      bottom: 10px;
    }
  }
  .fashion-text{
    color: #000;
    line-height: 20px;
    font-size: 1.4rem;
    margin-top: 10px;
    word-wrap:break-word;
    a{
      color: #000;
    }
    img{
      width: 100%;
      overflow: hidden;
      display: block;
    }
    .param{
      width: 290px;
      height: auto;
    }
    ol{
      padding-left: 25px;
      list-style: decimal;
    }
  }
  //media
  .media{
    margin-top: 15px;
    video,img{
      width: 100%;
    }
  }
  //视频分页
  .detail-pagination{
    text-align: center;
    .channel-index-pager{
      height: auto;
      overflow: hidden;
      margin: 0 auto;
      display: inline-block;
    }
    .pager-item{
      @include retina-sprite($icons,detail-page);
      @include unstyled-link();
      color: #000;
      float: left;
      background: none;
      line-height: 27px;
      margin-bottom: 20px;
      font-size: 1.2rem;
    }
    .pager-item-choosen{
      @include retina-sprite($icons,detail-page);
      color: #fff;
    }
  }
}
//相关推荐
.recomment{
  margin: 30px 15px 0 15px;
  >h2{
    font-size: 2rem;
    color: #333;
    font-weight: bold;
  }
  >ul{
    margin-top: 12px;
    li{
      height: auto;
      overflow: hidden;
      border-bottom: 1px solid #ccc;
      padding-bottom: 15px;
      margin-bottom: 15px;
      a{
        color: #000;
        @include unstyled-link();
        display: block;
        height: auto;
        overflow: hidden;
      }
    }
    .content-pic{
      width: 96px;
      height: 61px;
      float: left;
      position: relative;
      img{
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
      }
      .play-icon{
        @include retina-sprite($icons,play-icon,true,true);
      }
    }
    .content-text{
      overflow: hidden;//开启BFC
      padding-left: 14px;
      height: 80px;
      font-size: 1.4rem;
      line-height: 1.8;
      font-weight: normal;
      color: #000;
    }
  }
}

//分页
.detail-page {
  margin: 44px 15px 0 15px;
  height: 16px;
  line-height: 16px;
  position: relative;
  >span{
    height: 20px;
    line-height: 20px;
    display: none;
    position: relative;
  }
  .detail-prev{
    &:before {
      content: '';
      @include retina-sprite($icons, comment-prev, false, true);
      left: 0;
    }
    float: left;
    a{
      margin-left: 20px;
    }
  }
  .detail-next{
    &:after {
      content: '';
      @include retina-sprite($icons, comment-next, false, true);
      right: 0;
    }
    float: right;
    a{
      margin-right: 20px;
    }
  }
  a{
    color: #000;
    @include unstyled-link();
    font-size: 1.2rem;
  }
}