generator-zl-fis3-less/app/templates/page/web1/css/__inc-index-carousel-mF_shousports.less

基于 Yeoman 的 FIS3 主题模板制作框架初始化脚手架

@carouselWidth:440px;

.__carouselH{
  height: 315px;
}
.__carouselW{
  width: @carouselWidth;
}

.carousel:extend(.__carouselH) {
  .panel:extend(.__carouselH){
    .mF_sohusports_wrap:extend(.__carouselH){
      .mF_sohusports:extend(.__carouselH){
        .pic:extend(.__carouselH){
          li:extend(.__carouselH){
            a:extend(.__carouselH){
              img:extend(.__carouselH){}
            }
          }

        }
      }
    }
  }
}

.carousel:extend(.__carouselW) {
  .panel:extend(.__carouselW){
    .mF_sohusports_wrap:extend(.__carouselW){
      .mF_sohusports:extend(.__carouselW){
        .pic:extend(.__carouselW){
          li:extend(.__carouselW){
            a:extend(.__carouselW){
              img:extend(.__carouselW){}
            }
          }
        }
        .txt li:extend(.__carouselW){}
      }
    }
  }
}

/* 焦点图片下方文字描述的宽度定义 */
.carousel{
  /* 针对焦点图片的间隔,只允许使用 panel 来设置, 不允许使用 _wrap 来设置 */
  .panel{
    padding:15px;background: #fff;
    .mF_sohusports_wrap{
      padding:0; border: 0;
      .mF_sohusports{
        position: relative;
        .txt{
          position: absolute; bottom: 0;
        }
        .txt,
        .txt li{
          height: 36px; line-height: 36px;

        }
        .txt li a{
          width: @carouselWidth - 100;
          padding-left: 15px;
          font-family: "Microsoft YaHei";
          font-weight: normal;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #fff;
          span{
            display:none;
          }
        }
        .txt li b{
          filter: alpha(opacity=50); opacity: 0.5;
        }
        .num{
          bottom: 14px;
          right: 0;
          position: absolute;
          z-index: 3;
          li{
            float:left;
            a{
              width: 8px;
              height: 8px;
              text-indent: -999999px;
              margin-right: 6px;
              background: url(../imgs/tw_ico.png) 0 0 no-repeat;
              *background: url(../imgs/tw_ico.gif) 0 0 no-repeat;
            }
          }
          li.current a,
          li a:hover{
            background: url(../imgs/tw_ico.png) -14px 0 no-repeat;
            *background: url(../imgs/tw_ico.gif) -14px 0 no-repeat;
          }
        }
      }
    }
  }
}