lixin-web
Version:
vue and bootstrap
122 lines (120 loc) • 6.63 kB
CSS
.recreation-main{max-width:1170px;margin:20px auto;overflow:hidden;}
.recreation-main-nav1{background:#333333;height:50px;}
.recreation-main-nav2{height:58px;background:#e6e6e6}
.recreation-main-nav2 .recreation-main-nav2-1{overflow: hidden;height: 50px;}
.recreation-main-nav2 .recreation-main-nav2-1 a{border-bottom:3px solid #e6e6e6;width: 20%;text-align:center;line-height: 55px;color:#333333;display:inline-block;}
.recreation-main-nav2 .recreation-main-nav2-1 a:hover{color:#00c4ff}
.recreation-main-nav2 .recreation-main-nav2-1 a.active2{border-bottom:3px solid #00c4ff;color:#00c4ff;}
.recreation-main-con{margin-top:10px; overflow: hidden;}
.recreation-main-con li{height:278px;position:relative;width:186px;transition:all 0.5s ease;float:left;margin:10px 10px 0 0;}
.recreation-main-con li img{position:absolute}
.recreation-main-con li .min-1{opacity:0;position:absolute;width:100%;background:rgba(0,0,0,.6);height:100%;color:#fff;transition:all 0.5s ease;}
.recreation-main-con li .min-1.active3{opacity:1}
.recreation-main-con li .min-1 .join-game,.recreation-main-con li .min-1 .free-game{ margin:0 auto;color:#fff;display:block;width:130px;height:30px;line-height:30px;text-align:center;background:#fb7c23; margin-bottom: 10px;}
.recreation-main-con li .min-1 .free-game{background:#00c4ff}
.recreation-main-con li .min-1 .button{width:100%; position: absolute;bottom: 72px;}
.recreation-main-con li:nth-child(1) .min-1 .tj,.recreation-main-con li:nth-child(2) .min-1 .tj{background:url(../img/game_recreation/rece_10.png) no-repeat -113px 0px;}
.recreation-main-con li .min-1 .tj{width:40px;height:70px;position:absolute;right:0px;top:-2px;}
.recreation-main-con li .min-1 .sc i{display:inline-block;vertical-align: -5px;width:30px;height:33px;background:url(../img/game_recreation/rece_10.png) no-repeat 0 0;}
.recreation-main-con li .min-1 .sc a{color:#fff}
.recreation-main-con li .min-1 .bg{left: 64px;top: 64px;position:absolute;width:55px;height:42px;background:url(../img/game_recreation/rece_10.png) no-repeat -43px 0px;}
.page{margin:20px;height:40px;text-align:right;}
.page a{display:inline-block;padding:5px 12px;color:#787878;border:1px solid #787878;border-radius:3px;}
.page a:hover{border:1px solid #00c4ff;color:#00c4ff}
.page a.active4{background:#00c4ff;color:#fff;border:#00c4ff 1px solid;}
body{background: #eee;}
#LieBiao .tiyujinji_lao i.sc{float: left;position: absolute; cursor: pointer; color: #ff9262;
right: 5px;top: 7px;}
#LieBiao .tiyujinji_lao .game-btn{float:right}
#LieBiao .tiyujinji_lao .game-name{line-height:25px; padding: 0px 5px 10px 10px; margin: 0; position: relative;}
#LieBiao .col-sm-3 .yuanlai{display:block;margin: 0 auto;width: 199px;border:7px solid #FFFFFF}
#LieBiao .col-sm-3 .tiyujinji_lao{width: 199px;margin: 0 auto; background: #fff;}
#LieBiao .col-sm-3{ margin-top: 20px;width:20%}
#LieBiao .col-sm-3{transition:all 0.2s ease}
#LieBiao i span{font-family: Microsoft YaHei, Arial, Helvetica, sans-serif; padding: 0 3px;}
#LieBiao .col-sm-3 .game-tags{line-height:25px;}
#LieBiao .col-sm-3:hover .yuanlai{border-color:#2e2e2e;}
#LieBiao .col-sm-3:hover .tiyujinji_lao{background:#2e2e2e;}
#LieBiao .col-sm-3:hover .game-name{color:#fff;}
#LieBiao .col-sm-3:hover i span{color:#fff;}
#LieBiao .col-sm-3:hover .img img{}
#LieBiao .col-sm-3:hover .img {transition:all 0.3s ease;}
.yuanlai .begin-one{}
#LieBiao .col-sm-3 *{transition:all 0.3s ease;}
#LieBiao .tiyujinji_lao i.fa-heart{color:#E91E63}
.yuanlai .begin-one{ opacity: 0;
overflow: hidden;
padding: 8px;
position: absolute;
top: 18px;
margin: 0 auto;
width: 100px;
left: 50%;
margin-left: -50px;}
.yuanlai .begin-one a{ color: #ffffff;
background: #fff;
display: block;
text-align: center;
margin-bottom: 10px;
padding: 6px;}
.yuanlai .begin-one a.top1{margin-top:25px}
#LieBiao .col-sm-3:hover .yuanlai .begin-one{opacity:1}
.yuanlai .begin-one a:nth-child(1){ background: #00c4ff;}
.yuanlai .begin-one a:nth-child(2){ background: #fd8049;}
#ShaiXuan {overflow: hidden;height: 50px;line-height: 50px;background: #333333;color: #fff;}
#LieBiao .col-sm-3 .yuanlai .img{position:relative;}
#LieBiao .col-sm-3 .yuanlai .img:before{content: "";position: absolute;top: -15px;
left: 0;
width: 100%;
height: 120%;
background: rgba(82, 82, 82, 0.47);
content: '';
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);}
#LieBiao .col-sm-3:hover .yuanlai .img:before{webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-7%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-7%,0);top:15px}
#LieBiao .col-sm-3 .yuanlai .img,#LieBiao .col-sm-3 .yuanlai img{height:110px;width: 185px;overflow:hidden;}
.recreation-main-nav1{}
.recreation-main-nav1 span {color: #fff;display: inline-block;line-height: 50px;text-align: center;}
#ShaiXuan .col-md-8{background:none}
#ShaiXuan .col-md-8 span{ padding: 0px 19px;cursor: pointer;display: inline-block;}
#ShaiXuan .col-md-8 label{padding:0 10px}
#ShaiXuan .col-md-8 span.select{ background: #00c4ff;}
#SouSuo{margin-top:7px;position: relative;}
#SouSuo .input-group{width:100%}
#SouSuo .input-group span{ position: absolute;right: 1px;height: 35px;top: 0;width: 50px;text-align: center;}
#SouSuo .input-group span:before{cursor:pointer; vertical-align: -5px;margin-left: 10px;}
#gotoTop {
display: none;
position: fixed;
top: 90%;
right: 6px;
cursor: pointer;
margin-top: -50px;
margin-left: 520px;
width: 88px;
height: 88px;
text-align: center;
border: 1px solid #e0e0e0;
background: #00c4ff;
color: #fff;
}
#gotoTop .huojian{}
#gotoTop .huojian i{
font-size: 42px;
padding-top: 7px;
}
#SouSuo .input-group input{ height: 35px ;width: 90%;}
@media screen and (max-width:768px){
.recreation-main-con ul{width:100%;overflow: hidden;}
.recreation-main-con li{width: 100%;}
.recreation-main-con li .min-1{width:186px;margin:0 auto}
.recreation-main-con li .min-1,.recreation-main-con li img{left:50%;margin-left:-93px;}
.recreation-main-nav2 .recreation-main-nav2-1 a{overflow: hidden;}
#gotoTop{display:none }
#LieBiao .col-sm-3{width:100%}
}
#LaoHuJi {
min-height: 500px;
}