@charset "UTF-8"; $yahei: "Microsoft YaHei", SimHei, sans-serif; $maincolor : #e94646; $titleFont : PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans","Hiragino Sans GB","Source Han Sans CN","Source Han Sans SC","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif; @import "lego/lego"; @import "base/mixins"; html { font-size: 12px; height: 100%; // overflow-y: scroll; font: 12px/1.5 PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,SimSun,TW-Sung,"WenQuanYi Bitmap Song","AR PL UMing CN","AR PL UMing HK","AR PL UMing TW","AR PL UMing TW MBE",serif; font-family: $titleFont; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body { min-width: 1040px; height: 100%; a { text-decoration: none; &:hover { text-decoration: underline; } } p, a, span, em, i, h1, h2, h3, h4, h5, h6{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } } $maincolor : $maincolor; @mixin img-wrap($width,$height){ width: $width; height: $height; overflow: hidden; } .g-inner{ width: 1140px; margin: 0 auto; } .g-col-644{ width: 644px; float: left; } .g-col-480{ width: 480px; float: right; } .mod-title{ @include clearfix(); border-bottom: 3px solid #dcdcdc; h2{ color: #333333; font-size: 20px; line-height: 1; font-weight: normal; padding-bottom: 16px; float: left; } a{ float: right; color: #777777; font-size: 14px; line-height: 20px; } } .g-header{ background: url(../img/bg-header.jpg) center top no-repeat; padding-top: 492px; .list-nav{ @include clearfix(); background: url(../img/bg-nav.png) no-repeat; li{ float: left; text-align: center; width: 12.5%; &.active{ a{ background: url(../img/bg-nav-active.jpg) no-repeat; } } } a{ display: block; line-height: 1; height: 55px; padding-top: 22px; &:hover{ text-decoration: none; background: url(../img/bg-nav-active.jpg) center no-repeat; } } .title{ color: #ffffff; font-size: 18px; display: block; margin-bottom: 4px; } .s-title{ color: #b4cbde; font-size: 12px; } } } .page-index{ background: url(../img/bg-index.jpg) center top no-repeat; } .mod-score{ padding-top: 40px; height: 202px; .select-wrap{ position: relative; width: 200px; z-index: 2; cursor: pointer; h2{ height: 52px; line-height: 52px; color: #ffffff; font-size: 16px; font-weight: normal; padding-left: 17px; background: url(../img/bg-week.png?__sprite) no-repeat; span{ display: inline-block; padding-right: 23px; background: url(../img/icon-select.png) right center no-repeat; } } ul{ background: #393939; width: 180px; padding: 2px 0; position: absolute; top: 52px; } li{ color: #fff; font-size: 14px; height: 26px; line-height: 26px; margin: 0 2px; padding: 0 20px; border-radius: 2px; &.active{ background: #656565; } } } .list-week{ position: relative; z-index: 1; } } .mod-primary{ @include clearfix(); margin-top: 34px; .g-ui-tab{ } .g-tab__hd{ border-bottom: 3px solid #dcdcdc; margin-bottom: 20px; } .g-tab__nav{ @include clearfix(); } .g-tab__trigger{ float: left; font-size: 20px; line-height: 1; margin-right: 42px; padding-bottom: 16px; position: relative; &:before{ content: ''; background: #db2e2e; width: 100%; height: 3px; position: absolute; bottom: -3px; display: none; } a{ color: #848383; &:hover{ text-decoration: none; } } &.is-active{ &:before{ display: block; } a{ color: #333333; } } } .g-col-480{ line-height: 1; h3{ text-align: center; font-size: 22px; font-weight: normal; margin-top: 28px; a{ color: #db2e2e; } } p{ text-align: center; font-size: 16px; margin-top: 16px; a{ color: #555555; } } ul{ margin-top: 19px; } li{ line-height: 35px; font-size: 16px; color: #555555; @include clearfix(); a{ color: #555555; float: left; } span{ float: right; } } .link-more{ display: block; text-align: center; line-height: 34px; background: #dbdbdb; color: #333; margin-top: 10px; &:hover{ text-decoration: none; @include opacity(0.8); } } } .g-comlist .g-col-gItem{ margin: 0 20px 6px 0; } } .mod-match{ @include clearfix(); margin: 62px 0 100px 0; .player-nav{ padding: 33px 0 27px 0; height: 100px; } .play-intro{ @include clearfix(); border: 1px solid #e1e1e1; height: 156px; overflow: hidden; margin-bottom: 20px; .intro-fl{ width: 150px; float: left; margin-right: 22px; img{ display: block; width: 100%; overflow: hidden; } } .intro-fr{ float: left; width: 454px; p{ color: #545454; font-size: 14px; line-height: 28px; margin-top: 12px; } } } table{ text-align: center; color: #545454; font-size: 14px; width: 100%; margin-top: 24px; } thead{ background: #2a2a2a; th{ height: 40px; line-height: 40px; color: #ffffff; font-size: 14px; font-weight: normal; } } tbody{ tr{ line-height: 51px; height: 51px; &.bg-deep{ background: #e3e3e3; } &.row-rank1{ span{ background: #e94545; } } &.row-rank2{ span{ background: #ff6d34; } } &.row-rank3{ span{ background: #ff9d34; } } img{ width: 40px; vertical-align: middle; margin-right: 8px; } } } .col-rank{ span{ display: inline-block; width: 25px; height: 25px; line-height: 25px; color: #FFFFFF; background: #adadad; border-radius: 5px; } } } .page-player{ padding-bottom: 80px; .nav-player{ ul{ @include clearfix(); padding-top: 20px; height: 104px; overflow: hidden; margin-right: -12px; } li{ float: left; padding-top: 5px; margin: 0 13px; &:hover,&.is-active{ padding-top: 0px; .player-img{ width: 71px; height: 71px; border: 4px solid #de4747; } } } .player-img{ display: block; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; border: 4px solid #d2d2d2; transition: all .2s; } .player-title{ display: none; } img{ display: block; width: 100%; overflow: hidden; } } .player-cont{ @include clearfix(); height: 304px; .cont-fl{ float: left; width: 792px; padding: 35px; border: 1px solid #d6d6d6; @include clearfix(); height: 234px; } .intro-fl{ width: 234px; float: left; margin-right: 22px; img{ display: block; width: 100%; overflow: hidden; } } .intro-fr{ h1{ color: #212121; font-size: 18px; font-weight: normal; line-height: 1; } p{ color: #777777; font-size: 14px; line-height: 28px; margin-top: 12px; } } .cont-fr{ float: right; width: 218px; padding: 20px 18px; border: 1px solid #d6d6d6; height: 264px; h3{ color: #212121; font-size: 16px; font-weight: normal; line-height: 1; } ul{ margin-top: 6px; } li{ color: #777777; font-size: 12px; line-height: 24px; } } } .player-video{ @include clearfix(); margin-top: 24px; .player-video-fl{ float: left; width: 864px; } .player-video-fr{ width: 256px; float: right; } .hot-boke{ margin-top: 20px; .boke-title{ @include clearfix(); h3{ float: left; font-size: 16px; color: #212121; } p{ cursor: pointer; float: right; padding-left: 27px; color: #6c6c6c; font-size: 12px; background: url(../img/icon-change.png?__sprite) no-repeat; } } .boke-list{ @include clearfix(); margin-right: -14px; li{ float: left; width: 121px; height: 121px; margin: 14px 14px 0 0; } a{ display: block; height: 100%; position: relative; &:hover{ @include opacity(0.8); } } img{ width: 100%; overflow: hidden; display: block; } .item-title{ background: #000; background: rgba(0,0,0,0.6); color: #FFF; height: 26px; line-height: 26px; position: absolute; bottom: 0; width: 100%; text-align: center; } } } } } .page-time{ @include min-height(500px); .week-nav{ ul{ @include clearfix(); padding: 30px 0; margin-right: -15px; } li{ float: left; color: #777777; font-size: 18px; line-height: 40px; height: 40px; padding: 0 20px; border-radius: 30px; border: 1px solid #e1e1e1; cursor: pointer; margin-right: 15px; &.active{ background: #c62828; border: 1px solid #c62828; color: #FFF; } } } .week-cont{ } .list-week{} .item-week{ } .list-day{} .item-day{ margin-bottom: 50px; table{ width: 100%; } thead{ background: #2a2a2a; th{ height: 40px; line-height: 40px; color: #777777; font-size: 16px; font-weight: normal; text-align: center; } } tbody{ tr{ height: 82px; text-align: center; &.bg-deep{ background: #e3e3e3; } } } .th-time{ width: 20%; } .th-status{ width: 14%; } .th-group{ width: 40%; } .th-relative{ width: 26%; } .col-time{ color: #333333; font-size: 20px; } .col-status{ color: #777777; font-size: 16px; } .col-group{ line-height: 82px; font-size: 20px; @include clearfix(); img{ width: 40px; vertical-align: middle; margin: 0 8px; } .cell-teamA{ float: left; text-align: right; width: 40%; } .cell-teamB{ float: right; text-align: left; width: 40%; } .cell-name{ color: #333333; } .cell-grade{ float: left; color: #f40000; width: 20%; } } .col-relative{ ul{ @include clearfix(); } li{ float: left; width: 33.33%; color: #777777; } a{ color: #333333; font-size: 16px; } } } } .page-rank{ @include min-height(500px); text-align: center; h1{ font-size: 28px; color: #333333; font-weight: normal; line-height: 120px; height: 120px; } table{ color: #333333; font-size: 20px; width: 100%; margin-bottom: 50px; } thead{ background: #2a2a2a; th{ height: 40px; line-height: 40px; color: #777777; font-size: 16px; font-weight: normal; text-align: center; } } tbody{ tr{ line-height: 82px; height: 82px; &.bg-deep{ background: #e3e3e3; } &.row-rank1{ span{ background: #e94545; } } &.row-rank2{ span{ background: #ff6d34; } } &.row-rank3{ span{ background: #ff9d34; } } img{ width: 40px; vertical-align: middle; margin-right: 20px; } } } .col-rank{ span{ display: inline-block; width: 40px; height: 40px; line-height: 40px; color: #FFFFFF; background: #adadad; border-radius: 5px; } } .col-name{ padding-left: 20px; text-align: left; } .col-rank,.col-count,.col-success,.col-fail,.col-shengchang,.col-baichang,.col-jingshengchang,.col-score{ width: 120px; } } .page-list{ .g-inner{ @include clearfix(); padding-top: 20px; } .col-list-l { width: 820px; float: left } .col-list-r{ width: 300px; float: right; } .col-box { zoom:1;position: relative; padding: 20px; border: 1px solid #EFEFEF; font-size: 14px; background-color: #FFF; margin-bottom: 20px } .col-box-hd { border-bottom: 1px solid #dcdcdc; margin-bottom: 16px; h1{ font-size: 16px; font-weight: normal; line-height: 40px; color: #000; } } .col-box-hd-title { height: 16px; line-height: 16px; padding-bottom: 10px; position: relative } .col-box-hd-title h3 { color: #333; font-size: 16px; font-weight: 700; @include clearfix(); } .more-btn{ display: block; height: 16px; line-height: 16px; color: #666; font-size: 12px; text-indent: 32px; position: relative; font-weight: 400; float: right; } .col-box-sm { padding: 20px 13px } .news-list-page,.news-list3{ li { border-bottom: 1px dashed #eaeaea; } a{ display: block; @include clearfix(); &:hover{ .news-title{ color: #e94646; } } } span { display: block; height: 46px; line-height: 46px } } .news-list3{ li { span { height: 30px; line-height: 30px } } } .news-title { display: block; float: left; color: #333; font-size: 14px; height: 14px; line-height: 14px; width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .news-time { display: block; float: right; color: #999; font-size: 12px; height: 14px; line-height: 14px } .video-list{ margin-right: -12px; @include clearfix(); a{ display: block; &:hover{ text-decoration: none; @include opacity(0.8); } } li{ float: left; width: 128px; height: 130px; margin-right: 12px; } } .video-title{ color: #333; font-size: 14px; line-height: 18px; height: 36px; overflow: hidden; } .video-cover { width: 128px; height: 72px; overflow: hidden; position: relative; margin-bottom: 9px; img{ width: 100%; overflow: hidden; display: block; } } .side-recommend{ margin-right: -10px; overflow:hidden; a { color: #FFF; display: block; padding: 0 8px; background: #ba955e; border-radius: 5px; margin: 0 10px 10px 0; float:left; height:30px; line-height: 30px; &:hover { text-decoration: none; background: #daad6b; } } } } .page-viode{ background: url(../img/bg-index.jpg) center top no-repeat; .g-inner{ background: #FFF; } .list-remommend{ @include clearfix(); padding: 20px 0; h2{ float: left; margin-right: 20px; } ul{ float: left; width: 1020px; } li{ float: left; margin: 0 10px 10px 0; padding-left: 10px; line-height: 16px; border-left: 1px solid #CCC; } a:hover,a.active{ color: $maincolor; } } h1,h2{ font-size: 16px; border-left: 3px solid $maincolor; padding-left: 10px; margin-left: 10px; line-height: 1; } .video-wrap{ height: 860px; } .play-wrap{ height: 770px; padding: 10px; } } //---------排行榜-------------- .g-rank-tab{ .rank-tab__hd{ padding-bottom: 6px; @include clearfix; h2{ font-size: 16px; float: left; color: #32363d; line-height: 24px; height: 24px; } } .rank-tab__nav{ @include clearfix; float: right; } .rank-tab__trigger{ float: left; color: #666666; font-size: 12px; a{ color: #666666; display: block; height: 20px; line-height: 20px; padding: 0 5px; cursor: pointer; &:hover{ text-decoration: none; } } &.is-active{ a{ color: #ffffff; background: $maincolor; } } } .list-rank{ li{ margin-bottom: 12px; height: 56px; overflow: hidden; .ranking-col-fl{ float: left; } .img-wrap{ width: 108px; height: 60px; overflow: hidden; position: relative; } img{ width: 100%; display: block; overflow: hidden; transition: all .4s; } .index{ float: none; position: absolute; top: 0; left: 0; font-size: 12px; line-height: 16px; text-align: center; width: 28px; height: 28px; &.icon-rank1{ background: url(../img/icon-rank1.png?__sprite) no-repeat; } &.icon-rank2{ background: url(../img/icon-rank2.png?__sprite) no-repeat; } &.icon-rank3{ background: url(../img/icon-rank3.png?__sprite) no-repeat; } } .ranking-col-fr{ margin-left: 120px; } h3{ line-height: 20px; height: 40px; overflow: hidden; font-weight: normal; position: relative; top: -2px; font-size: 14px; a{ color: #212121; } } p{ @include clearfix(); } .ranking-name{ float: left; display: block; color: #b6b6b6; padding-left: 14px; background: url(../img/icon-author.png?__sprite) 0 3px no-repeat; width: 74px; @include ellipsis(); } .ranking-count{ float: right; color: #a2a2a2; display: inline-block; background: url(../img/icon-play.png?__sprite) 0 3px no-repeat; padding-left: 17px; } } } } //---------视频列表-------------- .g-comlist{ @include clearfix(); margin-right: -20px; &.comlist-row2{ height: 328px; overflow: hidden; } .g-col-gItem{ vertical-align: top; float: left; zoom: 1; margin: 0 20px 20px 0; width: 201px; height: auto; font-size: 12px; overflow: hidden; a{ display: block; color: #e94646; &:hover{ text-decoration: none; img{ opacity: 0.85; } .gItem-title{ color: #3585d8; } .gItem-mask{ opacity: 1; } .gItem-vdIcon{ bottom: 5px; } .gItem-vdTime{ bottom: 0; } .gItem-title{ height: 46px; } .gItem-info{ display: none; } } } .gItem-pic{ width: 201px; height: 112px; overflow: hidden; position: relative; img{ width: 100%; display: block; overflow: hidden; transition: opacity ease 300ms; } } .gItem-mask{ position: absolute; background: url(./../img/gItem-mask.png) repeat-x; bottom: 0; left: 0; width: 100%; height: 41px; z-index: 10; opacity: 0; transition: opacity 300ms ease; } .gItem-tag{ padding: 0 5px; position: absolute; right: 0; top: -24px; width: auto; height: 24px; line-height: 24px; text-indent: 5px; color: #fff; overflow: hidden; background-color: transparent; background-color: rgba(0,0,0,.5); zoom: 1; z-index: 11; transition: all 300ms ease; } .gItem-vdIcon{ position: absolute; z-index: 11; width: 24px; height: 24px; background: url(./../img/gItem-vdIcon.png?__sprite) no-repeat; bottom: -24px; left: 5px; transition: all 300ms ease; } .gItem-vdTime{ position: absolute; z-index: 11; right: 7px; bottom: -24px; line-height: 30px; color: #ffffff; font-size: 12px; transition: all 300ms ease; } .gItem-title{ font-size: 12px; color: #333333; line-height: 24px; height: 28px; font-weight: normal; overflow: hidden; text-align: left; margin-top: 2px; } .gItem-info{ line-height: 18px; height: 18px; overflow: hidden; font-size: 12px; span{ float: left; color: #999999; width: 100px; line-height: 18px; height: 18px; overflow: hidden; background: url(../img/icon-author.png) 0 3px no-repeat; padding-left: 14px; display: block; } em{ float: right; color: #999999; padding-left: 18px; background: url(./../img/gItem-vdIcon2.png?__sprite) 0 4px no-repeat; &.date{ background: none; padding-left: 0; background: none; width: 66px; overflow: hidden; } } } &.ext-gItnm-178{ width: 178px; .gItem-pic{ width: 178px; height: 98px; } .gItem-info{ span{ width: 70px; } } } &.ext-gItem-185{ width: 183px; .gItem-pic{ width: 183px; height: 104px; } .gItem-info{ span{ width: 120px; } } } } } //---------比赛情况轮播--------------- .w-ui-carousel { position: relative; .w-ui-carousel__scroller { width: 1140px; height: 150px; overflow: hidden; position: relative; &:before{ content: ''; position: absolute; height: 100%; width: 1px; background: #e1e1e1; } } ul{ display: none; } .list-days { width: 100000px !important; height: 150px; display: block; } .item-day { float: left; overflow: hidden; } .list-group{ @include clearfix(); } .item-group{ display: block; float: left; width: 189px; height: 148px; overflow: hidden; border: 1px solid #e1e1e1; border-left: none; outline: none; background: #FFF; cursor: pointer; img{ width: 100%; display: block; overflow: hidden; } &:hover{ background: #f5f5f5; text-decoration: none; } } .item-group{ text-align: center; font-size: 12px; .group-info{ @include clearfix(); height: 40px; line-height: 40px; padding: 0 16px; &.status1{ background: #8a8a8a; color: #FFF; } &.status2{ background: url(/src/img/bg-nav-active.jpg) center bottom no-repeat; color:#FFF; } &.status3{ background: #f3f3f3; color: #666666; } } .info-status{ float: left; } .info-time{ float: right; } .group-situ{ @include clearfix(); width: 100%; position: relative; padding-top: 24px; } .team{ width: 49.99%; float: left; } .team-icon{ display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: #000; overflow: hidden; } h4{ font-size: 12px; font-weight: normal; color: #666666; line-height: 1; margin-top: 10px; } .team-score{ color: #db2e2e; width: 100%; height: 24px; line-height: 24px; font-size: 24px; position: absolute; top: 36px; left: 0; text-align: center; } .team-score-vs{ position: absolute; top: 26px; left: 50%; margin-left: -16px; width: 32px; height: 42px; background: url(../img/icon-vs.png?__sprite) no-repeat; } } .btn-prev, .btn-next { position: absolute; top: 0; width: 27px; height: 100px; padding-top: 50px; cursor: pointer; text-align: center; } .btn-prev{ left: -40px; &.is-disabled{ .w-ui-icon{ background: url(../img/icon-prev1.png?__sprite) no-repeat; } } } .btn-next{ right: -40px; &.is-disabled{ .w-ui-icon{ background: url(../img/icon-next1.png?__sprite) no-repeat; } } } .btn-prev .w-ui-icon, .btn-next .w-ui-icon { display: inline-block; width: 27px; height: 45px; } .btn-prev .w-ui-icon{ background: url(../img/icon-prev2.png?__sprite) no-repeat; } .btn-next .w-ui-icon{ background: url(../img/icon-next2.png?__sprite) no-repeat; } } //-----------队伍轮播图---------- .p-ui-carousel{ position: relative; padding: 0 27px; .p-ui-carousel__scroller { width: 592px; height: 100px; overflow: hidden; } ul{ display: none; } .list-player { width: 100000px !important; height: 100px; display: block; } .item-player{ text-align: center; margin-right: 11px; &.is-active{ .player-img{ border: 3px solid #d92e2e; } .player-title{ color: #333333; } } } .player-img{ display: block; width: 69px; height: 69px; border: 3px solid transparent; margin-bottom: 9px; } img{ width: 100%; display: block; overflow: hidden; } .player-title{ color: #777777; } a{ &:hover{ text-decoration: none; } } .btn-prev, .btn-next { position: absolute; top: 0; width: 27px; height: 75px; padding-top: 25px; cursor: pointer; text-align: center; } .btn-prev{ left: 0px; } .btn-next{ right: 0px; } .btn-prev .ui-icon, .btn-next .ui-icon { display: inline-block; width: 14px; height: 24px; } .btn-prev .ui-icon{ background: url(../img/icon-s-prev1.png?__sprite) no-repeat; &:hover{ background: url(../img/icon-s-prev2.png?__sprite) no-repeat; } } .btn-next .ui-icon{ background: url(../img/icon-s-next1.png?__sprite) no-repeat; &:hover{ background: url(../img/icon-s-next2.png?__sprite) no-repeat; } } } //-----分页------ #pageNum { text-align: center; font-size: 14px; padding-bottom: 15px; padding-top: 20px; a { text-decoration: none; padding: 4px 9px; margin: 0 3px; color: #666; border: 1px solid #ddd; background: #fff; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; &:hover { text-decoration: none; color: #fff; background-color: $maincolor; border-color: $maincolor; } } } #pageNow a { cursor: not-allowed; color: #fff; background-color: $maincolor; border-color: $maincolor; }