/** * 游戏样式 * @author 鹿文学 */ /* */ .base, .gd-t-tab, .gd-t-list .content { background: #FFF; } .copytext { -webkit-touch-callout: all; -webkit-user-select: all; -khtml-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } .base { padding: 1.5rem 1.5rem 0.8rem; position: relative; min-height: 6.2rem; } .base .icon, .t-list .content .icon { float: left; width: 8rem; height: 8rem; border-radius: 20%; position: relative; z-index: 2; } .base .text, .t-list .content .text { margin: 0 7rem 0 2rem; height: 6rem; box-sizing: border-box; } .base .text .name { font-size: 2.4rem; margin-right: 5px; font-weight: normal; width: 60%; width: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } .base .text .stars { margin-top: -1rem; } .base .text .iconfont { color: #FFC600; margin: 2px 1px 0; font-size: 1.8rem; } .base .text .info, .t-list .content .text .info { color: #999; padding-top: .2rem; line-height: 1; } .base .text .info span { display: inline-block; font-size: 1.6rem; margin-right: 2rem; position: relative; } .base .text .info span:after { content: ''; width: .1rem; height: 1.2rem; background: #999999; position: absolute; top: 0rem; right: -1rem; } .base .text .info .dlnumber:after { width: 0; } .base .text .info .dlnumber { margin-right: 0; } .base .text .description, .t-list .content .text .description { margin: .3rem 0 0; font-size: 1.4rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #999; } .base .rebate { position: absolute; right: 3rem; top: -1rem; width: 4rem; height: 8rem; text-align: center; background: url(../images/rebate.png) center top no-repeat; background-size: 100% 100%; } .base .rebate span { position: relative; top: 3.6rem; color: #FFF; font-size: 1.5rem; line-height: 1.6; display: block; padding-top: .1rem; } .base .text { height: 8rem; float: left; } .other { margin-top: 0.9rem; } .t-tab { border-bottom: 1px solid #E7E7E7; font-size: 2rem; padding-top: .3rem; margin-bottom: 0; padding-left: 1.6rem; padding-right: 1.6rem; } .t-tab li { width: 20%; float: left; text-align: center; } .t-tab li .btn { border-bottom: 2px solid transparent; padding: .8rem 0; display: block; } .t-tab li .btn.active { border-bottom-color: #1AB1EA; color: #1AB1EA; } .t-list .content .content-row { overflow: hidden; clear: both; font-size: 1.8rem; text-align: center; color: #555; height: 3.6rem; } .t-list .content .content-row>div { float: left; width: 33.333333333%; } .t-list .content .content-caption { background: #18B1EA; color: #FFF; height: 3.2rem; line-height: 3.2rem; border-radius: 3.2rem; } .t-list .content .content-caption>div~div { border-left: 1px solid #EEE; margin-left: -1px; } .t-list .content .content-caption~.content-row { padding: 1rem; margin: 0 -1rem; border-bottom: 1px dashed #DDDDDD; } .t-list .content .content-row .date { display: block; font-size: 1.3rem; } .t-list .content .content-row:not(.content-caption)>div:not(.open) { line-height: 3.6rem; } .t-list .content .content-row .blue { color: #18B1EA; } .gd-t-list .content { padding: 1.5rem 1.5rem 4rem; } .carousel { margin: 0px auto; text-align: center; } .carousel .bd ul { width: 100%; float: left; padding-top: 0px; } .carousel .bd li { width: 31%; float: left; font-size: 14px; text-align: center; margin-top: 0px; } .carousel .bd li:not(:last-child) { margin-right: 5px; } .carousel .bd li a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: inline-block; /* height: 100%; */ height: 312px; width: 100%; position: relative; border-radius: 4px; background-color: #e2e2e2; overflow: hidden; } .carousel .bd li img { width: 100%; background: url(../images/loading.gif) #fff center center no-repeat; position: relative; z-index: 2; } .introduce { padding-top: 1rem; margin: 0 auto; } .introduce .detail-item-title { margin: 1rem 0; color: #666; font-size: 2rem; position: relative; font-weight: 400; } .introduce p { font-size: 1.8rem; color: #999; margin: 0; line-height: 2.8rem; } .gd-other .btnbox { margin: 2rem 0; position: relative; } .gd-other .btnbox .obtn { position: absolute; width: 6rem; height: 3.8rem; display: block; top: 0.35rem; text-align: center; } .gd-other .btnbox .download { margin: 0 6rem; display: block; letter-spacing: .1rem; font-size: 2.2rem; background: #18B1EA; color: #FFF; height: 2.5rem; line-height: 2.5rem; border-radius: 2.5rem; text-align: center; padding: 1rem; } .gd-other .btnbox .download.disabled { background-color: #ccc !important; } .gd-other .btnbox .collect { left: 0; } .gd-other .btnbox .share { right: 0; } .gd-other .btnbox .obtn .iconfont { font-size: 3rem; border: 1px solid #F9AD4D; box-sizing: border-box; width: 3.8rem; height: 3.8rem; line-height: 3.8rem; color: #F9AD4D; border-radius: 100%; display: inline-block; } .gd-other .btnbox .obtn .iconfont:before {} /* .open-content {height:60vh;max-height:100%;} */ .gd-t-list .gift-content { padding-top: 0; } .t-list .content .content-item { padding: 2rem 0; overflow: hidden; clear: both; position: relative; } .t-list .content .content-item~.content-item { border-top: 1px solid #EEEEEE; } .t-list .content .btnbox { width: 6rem; float: right; margin: 0; } .t-list .content .btnbox .btn { background: #18B1EA; border: 3px solid #18B1EA; color: #FFF; display: block; margin-top: 1.4rem; text-align: center; height: 3rem; border-radius: 3rem; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1.6rem; line-height: 2.6rem; } .t-list .content .btnbox .btn.disabled { border-color: #CCC; color: #999; background: transparent; background-color: #CCC; color: #FFF; } .t-list .content .text .name { font-size: 2rem; } .t-list .content .text .info { font-size: 1.8rem; } .t-list2 .content { padding-top: 0; } .t-list2 .content .icon { float: left; width: 5rem; height: 5rem; border-radius: 100%; margin-top: 1rem; position: relative; border-radius: 50%; overflow: hidden; } .t-list2 .content .text { position: relative; margin-left: 6rem; border-bottom: 1px solid #EFEFEF; padding: 1rem 0; } .t-list2 .content .text .name { font-size: 1.8rem; } .t-list2 .content .text .time { color: #999; font-size: 1.6rem; position: absolute; right: 0; top: 1.1rem; } .t-list2 .content .text .description { position: relative; font-size: 1.6rem; margin: 0; padding-top: .8rem; overflow: hidden; height: 6rem; word-break: break-all; } .t-list2 .content .text .description .showarticle { color: #23BBF3; position: absolute; bottom: 0; right: 0; background: #FFF; text-indent: 0; padding: 0; margin: 0; white-space: nowrap; border: none; width: 4rem; text-align: left; text-indent: 0.2rem; } .t-list2 .content .text .description .showarticle .shengmark { color: #333; } .t-list2 .content .text .description .mark { width: 1px; height: 1px; display: inline-block; } .t-list2 .comment-content .text .name { color: #1AB1EA; } .pop-window .pop-box.comment { background: #F4F2F3; } .pop-window .pop-box.comment .pop-wrap .pop-btnbox .pop-cancel { background: #FFF; border-color: #FFF; } .pop-window .pop-box.comment .pop-wrap .pop-content { margin-bottom: 1.6rem; } @media screen and (max-width:450px) { .base .icon, .t-list .content .icon { width: 6rem; height: 6rem; } .base .text, .t-list .content .text { margin: 0 4rem 0 7rem; } .base .text, .t-list .content .text.z_fl { margin: 0 1.5rem; } .base .text .name { font-size: 1.8rem; } .base .text .iconfont { font-size: 1.6rem; } .base .text .info, .t-list .content .text .info { padding-top: .1rem; } .base .text .info span, .base .text .description, .t-list .content .text .info, .t-list .content .text .description { font-size: 1.2rem; } .base .text .description, .t-list .content .text .description { margin-top: .2rem; } .base .rebate { width: 4rem; height: 6.5rem; right: 2rem; } .base .rebate span { font-size: 1.3rem; top: 2.4rem; line-height: 1.2; padding-top: 0.5rem; } .base .text { height: 6rem; } .t-list .content .text .name { font-size: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block; } .t-list .content .btnbox { width: 5rem; } .t-list .content .btnbox .btn { font-size: 1.5rem; height: 3rem; line-height: 3rem; border-width: 1px; } .t-list2 .content .icon { width: 4rem; height: 4rem; } .t-list2 .content .text { margin-left: 5rem; } .t-list2 .content .text .name { font-size: 1.6rem; padding-top: .4rem; } .t-list2 .content .text .description { font-size: 1.4rem; padding-top: .4rem; } .t-list2 .content .text .time { font-size: 1.5rem; } .list-detail .btnbox .btn { border-width: 2px; } } @media screen and (max-width:400px) { .t-list .content .content-row, .t-tab { font-size: 1.8rem; } .introduce .detail-item-title { font-size: 1.8rem; } .introduce p { font-size: 1.6rem; line-height: 2.4rem; } .other .btnbox .obtn { width: 5rem; height: 3.1rem; } .other .btnbox .download { font-size: 1.8rem; height: 1.8rem; line-height: 1.8rem; margin: 0 5rem; } .other .btnbox .obtn .iconfont { font-size: 2.3rem; width: 3.1rem; height: 3.1rem; line-height: 3.1rem; } .base .text .name { max-width: 50%; } } @media screen and (max-width:350px) { .base .icon, .t-list .content .icon { width: 5rem; height: 5rem; } .base .text, .t-list .content .text { margin: 0 4rem 0 6rem; } .base .text .name { font-size: 1.6rem; } .base .text .iconfont { font-size: 1.3rem; } .base .text .info, .t-list .content .text .info { padding-top: 0rem; } .base .text .info span, .base .text .description, .t-list .content .text .info, .t-list .content .text .description { font-size: 1rem; } .base .text .description, .t-list .content .text .description { margin-top: 0rem; } .base .rebate { right: 1rem; } .base .rebate span { font-size: 1.2rem; line-height: 1.4; padding-top: 1rem; } .t-list .content .content-row { font-size: 1.6rem; } .t-tab { font-size: 1.6rem; } .introduce .detail-item-title { font-size: 1.6rem; } .introduce p { font-size: 1.4rem; line-height: 2rem; } .other .btnbox .obtn { width: 4rem; height: 2.9rem; } .other .btnbox .download { font-size: 1.6rem; height: 1.6rem; line-height: 1.6rem; margin: 0 4rem; } .other .btnbox .obtn .iconfont { font-size: 2.1rem; width: 2.9rem; height: 2.9rem; line-height: 2.9rem; } .t-list .content .text .name { font-size: 1.4rem; } .t-list .content .btnbox { width: 3.6rem; } .t-list .content .btnbox .btn { font-size: 1.2rem; height: 1.8rem; line-height: 1.8rem; border-width: 1px; } .t-list2 .content .icon { width: 4rem; height: 4rem; } .t-list2 .content .text { margin-left: 5rem; } .t-list2 .content .text .name { font-size: 1.4rem; padding-top: .4rem; } .t-list2 .content .text .description { font-size: 1.3rem; padding-top: .4rem; height: 5.6rem; } .t-list2 .content .text .time { font-size: 1.3rem; } .t-list2 .content .text .description .showarticle { width: 3.5rem; white-space: nowrap; } .list-detail .btnbox .btn { border-width: 1px; } } /*@author zwm*/ .collect_icon { display: inline-block; height: 2rem; width: 2rem; } .collect_icon_no { background: url("../images/icon_normal_shoucang@3x.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .collect_icon_yes { background: url("../images/icon_selected_yishoucang@3x.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .z_fl { float: left; } .down, .download_btn { font-size: 1.7rem; width: 90%; height: 5rem; line-height: 5rem; display: inline-block; border-radius: 0.4rem; } .down { background-color: #ddd; color: #b8b6b7; } .down, .download_btn { background-color: #18b1ea; color: #fff; } .download_icon { display: inline-block; height: 2rem; width: 2rem; vertical-align: sub; margin-right: 0.8rem; } .download_btn.download_btn_ios .download_icon_ios { background: url("../images/icon_disabled_pingguo@3x.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .down.download_btn .download_icon.download_icon_ios { background: url("../images/icon_normal_pingguo@3x.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .download_btn .download_icon.download_icon_and { background: url("../images/icon_disabled_anzhuo@3x.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .down.download_btn .download_icon.download_icon_and { background: url("../images/icon_normal_anzhuo@3x.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .base.zclearfix .text.z_fl { width: 55%; margin-right: 0.5rem; } .download_text { height: 3.5rem; line-height: 3.5rem; } .download_rebate { color: #ff9b22; } .download_text span { padding: 0 0.5rem; } .download_text .z_shugang { display: inline-block; height: 1rem; width: 2px; background-color: #9999; padding: 0; margin: 0 0.5rem; } .collect_box { float: right; } .za_icon { float: left; position: relative; display: inline-block; height: 6rem; width: 6rem; border-radius: 12px; background-color: #e2e2e2; overflow: hidden; } .dis_tab { position: absolute; z-index: 0; top: 0; left: 0; display: table; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-size: 16px; color: #bababa; table-layout: fixed; } .dis_tabcell { display: table-cell; vertical-align: middle; } @media screen and (max-width:769px) { .carousel .bd li a { height: 175px; } } @media screen and (min-width:769px) { .za_icon { height: 8rem; width: 8rem; } .pad_lef { padding-left: 7rem; } } /*-------@author zwm ---------*/ /*-------date 2018-07-13 ---------*/ /*-------begin! ---------*/ .z_clearfix:after { display: block; content: ""; height: 0; line-height: 0; visibility: hidden; clear: both; } .z_clearfix { zoom: 1; } .topr_num { position: absolute; padding: 0 0.2rem; min-width: 1.4rem; font-size: 1.2rem; margin-top: -0.15rem; margin-right: 0; margin-bottom: 0; margin-left: 0.05rem; background-color: red; color: #fff; border-radius: 40%; } /* 媒体对象 begin*/ .media, .media-body { overflow: hidden; zoom: 1; } .media-body, .media-left, .media-right { display: table-cell; vertical-align: middle; } .media-body { width: 10000px; } .media-left { padding-right: 10px; } .media-object { display: block; } /*end 媒体对象*/ .trade_img { width: 11.2rem; height: 6rem; border-radius: 6px; } .game_btn { float: left; border: 1px solid #ddd; padding: 0.15rem 0.4rem; font-size: 1.3rem; border-radius: .8rem; color: #989898; } .z_pays { color: red; float: right; } .z_detailp { margin-top: 1.5rem; } .z_game_detailli { padding: 1.25rem 0; border-bottom: 1px solid #f8f8f8; overflow: hidden; } .z_date { margin-bottom: 1rem; color: #999; } /*-------end! ---------*/ @media screen and (min-width:640px) { .base .text .stars { margin-top: -1.7rem; } .base .text .name { width: auto; max-width: 60%; } }