lolbox.duowan.com/pcbox/frontend/sass/newVideo.scss

@charset "UTF-8";

@import "base/base";
@import "base/mixins";

/* S ZhuanTi Common */
$main_width: 1000px;
$yahei: "Microsoft YaHei", SimHei, sans-serif;

html {
    font-size: 12px;
}
body {
    font-family: $yahei;
    a {
        text-decoration: none;
        color:#666;
        &:hover {
            text-decoration: none;
        }
        
    }
    p, a, span, em, i, h1, h2, h3, h4, h5, h6 {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    .clearfix{clear: both}
}

.o-wrap{
    width: 600px;
    height: 470px;
    padding: 15px;
    overflow: hidden;
    outline: none;
    position: relative;
    clear: both;
}

.page-newVideo{
    overflow: hidden;
    .mod-tabs-hd{
        @include clearfix;
        width: 100%;
        background: #ecf3f9;
        position: relative;
        .btn-refresh{
            position: absolute;
            top: 4px;
            right: 10px;
            width: 25px;
            height: 20px;
            vertical-align: 10px\9;
            border: 1px solid #cfdeea;
            background-color: #ecf3f9;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            cursor: pointer;
            background: url(../img/refresh.png?__sprite) 6px 3px no-repeat;
            &:hover{
                background-color: #cfdeea;
            }
        }
    }
    .mod-main{
        overflow: hidden;
    }
    .mod-tabs-trigger{
        width: 560px;
        li{
            float: left;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #666;
            font-size: 12px;
            background-color: #ecf3f9;
            cursor: pointer;
            &.selected{
                background-color: #ddebf7;
                font-weight: 700;
                &:hover a{
                    color: #666;
                }
            }
            &:hover a{
                color: #f26460;
            }
        }
        &.col-6{
            li{
                width: 16.6%;
            }
        }
    }
    .o-video-hd{
        margin-top: 15px;
        @include clearfix;
        li{
            float: left;
            padding: 0 10px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #666;
            font-size: 12px;
            cursor: pointer;
            a:hover,a:visited,a:active,a:link{
                outline: 0;
            }
            &.selected{
                background-color: #ddebf7;
                font-weight: 700;
                &:hover a{
                    color: #666;
                }
            }
            &:hover a{
                color: #f26460;
            }
        }
    }
    .o-video-bd{
          @include clearfix;
          ul{
              @include clearfix;
               font-family: "微软雅黑";
               font-size: 12px;
               margin-right: -15px;
          }
          .o-video-list{
              float: left;
              width: 190px;
              height: 155px;
              margin-right:15px;
              margin-top:15px;
              a:hover,a:visited,a:active,a:link{
                outline: 0;
              }
          }
          .list-pic{
              width: 190px;
              height: 107px;
              display: block;
              position: relative;
              overflow: hidden;
              img{
                  @include inline-block;
                  width: 100%;
                  overflow: hidden
              }
              em{
                  position: absolute;
                  top: 0;
                  left: 0;
                  color:#ccc;
              }
              .video-time{
                  position: absolute;
                  width: 60px;
                  height: 18px;
                  line-height: 18px;
                  text-align: center;
                  color: #fff;
                  background: #000;
                  @include opacity(0.5);
                  right: 0;
                  bottom: 0;
              }

          }
          .video-title{
              color: #666;
              @include inline-block;
              margin: 7px 0;
              width: 190px;
              @include ellipsis;

          }
        .video-msg{
            @include clearfix;
            color: #999;
            em{
                float: right;
                position: relative;
                top: 2px;
                margin-right: 15px;
                vertical-align: bottom;
                @include inline-block;
                width: 11px;
                height: 12px;
                background: url("../img/icon-person.png?__sprite") no-repeat;
            }
            .video-desc{
                float: left;
            }
            .video-people{
                float: right;
            }
        }

    }
    
}