You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
6.7 KiB
CSS
126 lines
6.7 KiB
CSS
5 years ago
|
/**
|
||
|
|
* 首页样式
|
||
|
|
* @author 鹿文学
|
||
|
|
*/
|
||
|
|
|
||
|
|
.index-header {position:absolute;background:transparent;color:#333;}
|
||
|
|
.index-header .hbtn .iconfont {margin-top:.7rem;}
|
||
|
|
.index-header~.occupy{display:none;}
|
||
|
|
|
||
|
|
|
||
|
|
.banner {width:100%;}
|
||
|
|
.banner .slideBox{ position:relative; overflow:hidden; margin:0px auto; /* max-width:1200px; */}
|
||
|
|
.banner .slideBox .hd{ position:absolute; height:2.8rem; line-height:2; bottom:0; right:0; z-index:1; width:100%;text-align:center;}
|
||
|
|
.banner .slideBox .hd li{ display:inline-block; width:1rem; height:1rem; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:#333; text-indent:-9999px; overflow:hidden; margin:0 1rem; }
|
||
|
|
.banner .slideBox .hd li.on{ background:#16BFFA; }
|
||
|
|
|
||
|
|
.banner .slideBox .bd{ position:relative; z-index:0; }
|
||
|
|
.banner .slideBox .bd li{ position:relative; text-align:center; }
|
||
|
|
.banner .slideBox .bd li img{ background:url(../images/bannerdefault.png) center center no-repeat;background-size:100% auto;height:53vw; vertical-align:top; width:100%;/* 图片宽度100%，达到自适应效果 */}
|
||
|
|
.banner .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
|
||
|
|
.banner .slideBox .bd li .tit{ display:block; width:100%; position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px; background:url(images/focusBg.png) repeat-x; color:#fff; text-align:left; }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.shortcut,.welfare,.recommend,.hot{margin-top:1rem;background:#FFF;}
|
||
|
|
.shortcut {padding:2rem 0 1rem;margin-top:0;}
|
||
|
|
.shortcut li {width:25%;float:left;}
|
||
|
|
.shortcut li a {width:60%;margin:0 auto;display:block;max-width:9rem;min-width:2rem;text-align:center;}
|
||
|
|
.shortcut li a .iconfont {font-size:3rem;color:#FFF;padding:1rem;border-radius:1rem;}
|
||
|
|
.shortcut li a span {text-align:center;display:block;font-size:1.6rem;padding-top:1rem;}
|
||
|
|
.shortcut li a .icon-recharge{background:#F6555D;}
|
||
|
|
.shortcut li a .icon-category{background:#5EBDF7;}
|
||
|
|
.shortcut li a .icon-ranking{background:#FFCE39;}
|
||
|
|
.shortcut li a .icon-flag{background:#45D7D7;}
|
||
|
|
|
||
|
|
|
||
|
|
.welfare {padding:1rem 0;}
|
||
|
|
.welfare .welfaresub {float:left;width:50%;position:relative;}
|
||
|
|
.welfare .welfaresub img {width:90%;padding:0 5%;display:block;}
|
||
|
|
.welfare .welfaresub~.welfaresub {margin-left:-1px;border-left:1px solid #E7E7E7;}
|
||
|
|
|
||
|
|
.recommend {}
|
||
|
|
.trunker-section .t-title {position:relative;padding:1rem 1rem 0;}
|
||
|
|
.trunker-section .t-title .name {font-size:1.8rem;letter-spacing:.1rem;}
|
||
|
|
.trunker-section .t-title .link {position:absolute;bottom:0;right:1rem;color:#999;}
|
||
|
|
|
||
|
|
.trunker-section .t-content {padding:0 1rem;}
|
||
|
|
.trunker-section .t-content li {padding:1rem 0;overflow:hidden;clear:both;position:relative;}
|
||
|
|
.trunker-section .t-content li~li {border-top:1px solid #EEEEEE;}
|
||
|
|
.trunker-section .t-content .icon {float:left;width:6rem;height:6rem;border-radius:20%;}
|
||
|
|
.trunker-section .t-content .btnbox {width:8rem;float:right;}
|
||
|
|
.trunker-section .t-content .btnbox p {color:#FFC700;text-align:right;margin-top:0;margin-bottom:.5rem;}
|
||
|
|
.trunker-section .t-content .btnbox .btn {background:#18B1EA;color:#FFF;display:block;text-align:center;width:90%;float:right;height:3rem;border-radius:3rem;font-size:1.6rem;line-height:3rem;}
|
||
|
|
.trunker-section .t-content .btnbox .btn.disabled {background:#CCC;}
|
||
|
|
.trunker-section .t-content .text {margin:0 8rem 0 7rem;}
|
||
|
|
|
||
|
|
.trunker-section .t-content .text .name {font-size:1.6rem;margin-right:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:60%;display:inline-block;}
|
||
|
|
.trunker-section .t-content .text .starbox {line-height:1;vertical-align:top;}
|
||
|
|
.trunker-section .t-content .text .iconfont {color:#FFC600;font-size:1.2rem;}
|
||
|
|
.trunker-section .t-content .text .icon-star:before {vertical-align:top;margin-top:3.5%;display:inline-block;}
|
||
|
|
.trunker-section .t-content .text .info {color:#999;padding-top:.2rem;}
|
||
|
|
.trunker-section .t-content .text .info span {display:inline-block;margin-right:2rem;position:relative;}
|
||
|
|
.trunker-section .t-content .text .info span:after{content:'';width:.1rem;height:1.1rem;background:#999999;position:absolute;top:.3rem;right:-1rem;}
|
||
|
|
.trunker-section .t-content .text .info .dlnumber:after {width:0;}
|
||
|
|
|
||
|
|
.trunker-section .t-content .text .description {margin:0 0 0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#999;font-size:1.2rem;}
|
||
|
|
.trunker-section .t-empty {text-align:center;padding:1rem 0;display:none;}
|
||
|
|
|
||
|
|
|
||
|
|
/* search */
|
||
|
|
.searchpage {background:#FFF;}
|
||
|
|
.history {padding:0rem 2rem;}
|
||
|
|
.history .history-title {font-weight:100;font-size:2rem;}
|
||
|
|
.history .history-title a {float:right;}
|
||
|
|
.history .history-title a .iconfont {font-size:2rem;}
|
||
|
|
.history .history-list a {display:inline-block;background:#EEEEEE;padding:.5rem 1rem;color:#999;border-radius:.5rem;margin-right:.5rem;margin-bottom:.9rem;font-size:1.6rem;}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@media screen and (max-width:400px) {
|
||
|
|
.trunker-section .t-content li {padding:1.5rem 0;}
|
||
|
|
.trunker-section .t-content .icon {width:5.5rem;height:5.5rem;}
|
||
|
|
.trunker-section .t-content .btnbox {width:7rem;}
|
||
|
|
.trunker-section .t-content .btnbox p {font-size:1.2rem;}
|
||
|
|
.trunker-section .t-content .text .iconfont {font-size:1.1rem;}
|
||
|
|
.trunker-section .t-content .text {margin:0 7rem 0 6rem;}
|
||
|
|
.trunker-section .t-content .btnbox .btn {font-size:1.5rem;height:2.5rem;line-height:2.5rem;}
|
||
|
|
.trunker-section .t-content.bot li {margin-left:3rem;}
|
||
|
|
.trunker-section .t-content.bot li .sorticon {top:3.5rem;left:-2.5rem;width:1.7rem;height:1.7rem;}
|
||
|
|
|
||
|
|
.history .history-title,.history .history-title a .iconfont {font-size:1.8rem;}
|
||
|
|
.history .history-list a {font-size:1.4rem;}
|
||
|
|
|
||
|
|
.trunker-section .t-content .text .name {margin-right:2px;}
|
||
|
|
}
|
||
|
|
@media screen and (max-width:350px) {
|
||
|
|
.trunker-section .t-content li {padding:1rem 0;}
|
||
|
|
.trunker-section .t-content .icon {width:5rem;height:5rem;}
|
||
|
|
.trunker-section .t-content .btnbox {width:6rem;}
|
||
|
|
.trunker-section .t-content .text {margin:0 6rem 0 5.5rem;}
|
||
|
|
.trunker-section .t-content .btnbox .btn {font-size:1.3rem;height:2rem;line-height:2rem;}
|
||
|
|
.trunker-section .t-content .text .iconfont {font-size:1rem;}
|
||
|
|
.trunker-section .t-content .text {font-size:1.2rem;}
|
||
|
|
.trunker-section .t-content .text .name {font-size:1.4rem;}
|
||
|
|
.trunker-section .t-content .text .info span {margin-right:1rem;}
|
||
|
|
.trunker-section .t-content .text .info span:after {right:-.5rem;height:.9rem;}
|
||
|
|
.trunker-section .t-content.bot li {margin-left:2.5rem;}
|
||
|
|
.trunker-section .t-content.bot li .sorticon {top:3rem;left:-2rem;width:1.5rem;height:1.5rem;}
|
||
|
|
|
||
|
|
.trunker-section .t-content .btnbox p {font-size:1.2rem;}
|
||
|
|
|
||
|
|
.shortcut li a .iconfont {font-size:2.5rem;}
|
||
|
|
.shortcut li a span {font-size:1.4rem;}
|
||
|
|
|
||
|
|
.trunker-section .t-content .text .name {width:50%;margin-right:1px;}
|
||
|
|
|
||
|
|
|
||
|
|
.trunker-section .t-title .name {font-size:1.6rem;}
|
||
|
|
|
||
|
|
|
||
|
|
.history .history-title,.history .history-title a .iconfont {font-size:1.6rem;}
|
||
|
|
.history .history-list a {font-size:1.2rem;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|