/** * 基本样式 * @author 鹿文学*/ /* common*/ .clearfix { zoom:1 } .clearfix:after { content:""; display:block; height:0; font-size:0; clear:both; overflow:hidden } .inner { width:640px; margin:0 auto; position:relative; } .hidden { display:none!important; } /* head*/ .header { width:100%; z-index:99; position:fixed; top:0; background:#18B1EA; color:#FFF; max-width:640px; margin:0 auto; } .header>div { position:relative; } .header .caption { margin:0 6rem; display:block; position:relative; text-align:center; font-weight:normal; height:3rem; font-size:2.5rem; padding:1rem 1rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .header .hbtn { width:6rem; height:5rem; position:absolute; top:0; display:block; text-align:center; } .header .hbtn .iconfont { font-size:3.6rem; color:#FFF; margin:.8rem 0; display:block; } .header .back,.header .person,.header .sign { left:0; } .header .share,.header .download,.header .searchbtn,.header .addbtn,.header .set { right:0; } .header .download .number { background:red; border-radius:100%; width:2rem; height:2rem; line-height:2rem; display:block; font-style:normal; color:#FFF; position:absolute; top:.6rem; right:1rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .header .searchbtn { color:#FFF; font-size:2rem; padding:1.2rem 0; } .header .searchwrap .search { margin:0 6rem; display:block; position:relative; text-align:center; } .header .searchwrap .search .text { box-sizing:border-box; -webkit-sizing:border-box; width:100%; border:none; background:rgba(255,255,255,.4); border-radius:4rem; padding:.5rem 1.5rem .5rem 4rem; margin:.7rem 0; height:3.2rem; } .header .searchwrap .search .btn { position:absolute; top:0.9rem; left:.9rem; } .header .searchwrap .search .btn .iconfont { font-size:3rem; color:#FFF; } .searchpage .header .searchwrap .search .text { margin:.7rem 0 1.15rem; } .header .addbtn { color:#FFF; font-size:1.8rem; padding:1.3rem 0; width:10rem; } .occupy { height:5rem; } /**/ .emptybg { background:#FFF; height:100vh; } .empty { padding-top:25vh; text-align:center; } .empty img { width:20vw; } .empty p { color:#999; font-size:1.6rem; } .loading { text-align:center; /*background:#E7E7E7;*/ background:#fff; /*加载更多变成白色背景*/ padding:1rem 0; } .table { display:table; width:100%; height:100%; } .table-row { display:table-row; } .table-cell,.tcell { display:table-cell; position:relative; text-align:center; vertical-align: middle; } /*分享按钮 begin*/ .share_icon{ display: inline-block; height: 2rem; width: 2rem; background: url(../images/icon_normal_zhuanfa@3x.png) no-repeat center center; background-size: 100% 100%; } /*end 分享按钮*/ share_icon /* foot*/ .space { height:6rem; width:100%; } .footer { position:fixed; bottom:0; background:#F6F6F6; width:100%; z-index:10000; max-height:13.5vw; border-top:1px solid #E7E7E7; max-width:640px; margin:0 auto; } .footer .nav { position:relative; } .footer .nav li { float:left; width:20%; text-align:center; color:#777; } .footer .nav .item { display:block; } .footer .nav .item .iconfont { font-size:2.6rem; padding:.4rem 0 0; display:block; } .footer .nav .item span { display:block; padding-bottom:.2rem; } .footer .nav .item:hover,.footer .nav .item.active { color:#18B1EA; } .pop-window { display:none; -webkit-overflow-scrolling: touch; overflow:hidden; position:fixed; top:0; left:0; bottom:0; right:0; width:100vw; height:100vh; z-index:999; background:rgba(0,0,0,.2); } .pop-window .pop-box,.pop-hint-gift .pop-box { position:relative; top:26%; margin:0 auto 0; width:80vw; background:#FFF; border-radius:10px; max-width:293px; } .pop-window .pop-page {position:relative;margin:0 auto;width:100%;height:100%;background:#FFF;top:-11vw;} .pop-window .pop-box .pop-wrap { padding:5vw 7vw; padding: 1rem 2rem; } .pop-window .pop-box .pop-wrap .pop-title { position:relative; margin:0; color:#707070; font-size:.28rem; font-weight:normal; text-align:center; } .pop-window .pop-box .pop-wrap.gift .pop-table{ table-layout: fixed; } .pop-window .pop-box .pop-wrap.gift .code-txt { color:#18b1ea; display: block;width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* .pop-window .pop-box .pop-wrap .pop-title span { color:#18B1EA; }*/ .pop-window .pop-box .pop-wrap .pop-close { position:absolute; right:-1rem; top:-1rem; font-size:2.2rem; color:#999; } .pop-window .pop-box .pop-wrap .pop-content { color:#999; font-size:1.8rem; position:relative; margin-top:.2rem; } .pop-window .pop-box .pop-wrap .pop-content .des { color:#666; display:block; } .pop-window .pop-box .pop-wrap .pop-btnbox { overflow:hidden; clear:both; position:relative; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-btn { width:45%; text-align:center; padding:.4rem 0; font-size:2.6rem; border-radius:4rem; display:block; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-cancel { color:#707070; border:1px solid #F1F1F1; float:left; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-confirm { color:#FFF; background:#18B1EA; border:1px solid #18B1EA; float:right; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-confirm.disabled { background:#CCC; border-color:#CCC; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-input { padding:.8rem 0rem .8rem 8rem; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; color:#18B1EA; border:none; border-radius:2rem; font-size:3rem; line-height:1; vertical-align: middle; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-span { width: 205px; box-sizing: border-box; -webkit-box-sizing: border-box; color: #18B1EA; font-size: 2rem; line-height: 3rem; vertical-align: middle; overflow-x: scroll; display: inline-block; } .pop-window .pop-box .pop-wrap .pop-btnbox .prefix { position:absolute; left:.5rem; top:0rem; font-size:1.6rem; display:block; text-align: left; vertical-align:middle; line-height: 3rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy { background:#18B1EA; color:#FFF; box-sizing:border-box; -webkit-box-sizing:border-box; position:absolute; top:0; right:0; height:100%; width:7rem; font-size:2rem; text-align:center; padding-top:.8rem; border-top-right-radius:2rem; border-bottom-right-radius:2rem; } .pop-window .pop-box .pop-wrap .pop-textarea { width:100%; height:26vh; padding:.4rem; font-size:1.5rem; border:1px solid #DCDCDC; box-sizing:border-box; -webkit-box-sizing:border-box; } .totalnum { position:absolute; bottom:-1.2rem; right:.3rem; font-size:1.2rem; } .pop-dialog { display:none; position:fixed; z-index:1999; top:0; left:0; right:0; text-align:center; width:100vw; height:100vh; } .pop-dialog span { background:rgba(0,0,0,.6); top:50%; color:#FFF; display:inline-block; line-height:2; position:relative; padding:.3rem .5rem; word-break:break-all; max-width:60vw;border-radius: 5px; } .pop-table { display:table; width:100%; position:relative; } .pop-row { display:table-row; position:relative; } .pop-cell { display:table-cell; position:relative; vertical-align:middle; } .pop-cell.pop-mark{ width:24%;text-align:right; }.pop-cell.pop-input { text-align:left;} .pop-form { display:none; -webkit-overflow-scrolling: touch; overflow:hidden; position:fixed; top:0; left:0; bottom:0; right:0; width:100vw; height:100vh; z-index:999; background:rgba(0,0,0,.5); } .pop-form .pop-box { position:relative; top:28%; margin:0 auto 0; width:90vw; background:#FFF; border-radius:3vw; } .pop-form .pop-box .pop-wrap { padding:4vw 6vw 6vw; } .pop-form .pop-box .pop-wrap form { padding:1px; } .pop-form .pop-box .pop-wrap .pop-content { position:relative; width:100%; } .pop-form .pop-title { position:relative; margin:0; color:#707070; font-size:3.4rem; font-weight:100; text-align:center; } .pop-form .pop-box .pop-wrap .pop-close { position:absolute; right:0rem; top:0rem; font-size:2.2rem; color:#999; } .pop-form .pop-table-wrap { padding-top:1.7rem; width:100%; position:relative; overflow:hidden; } .pop-form .pop-table-wrap .pop-table { } .pop-form .pop-table-wrap .pop-table .pop-cell { height:6rem; font-size:2.2rem; } .pop-form .pop-table-wrap .pop-table .pop-cell:first-child { width:3.5rem; white-space: nowrap; } .pop-form .pop-table-wrap .pop-table .pop-cell:last-child { text-align:right; } .pop-form .pop-table-wrap .pop-table .pop-cell .pgood { } .pop-form .pop-table-wrap .pop-table .pop-cell p { margin:0; } .pop-form .pop-table-wrap .pop-table .pop-row~.pop-row { border-top:1px solid rgba(231,231,231,.5); } .pop-form .pop-table-wrap .pop-table .paddress { font-size:0.48rem; width:88%; } .pop-form .pop-table-wrap .pop-table .paddress { text-align: left; float: right; } .pop-form .pop-table-wrap .pop-table .paddress span { display:block; text-overflow:ellipsis; overflow:hidden; } .pop-form .pop-table-wrap .pop-table .pop-cell .icon-right { position:absolute; top:34.3%; right:0.2rem; width:0.3rem; height:0.54rem; display:block; } .pop-form .pop-butn-box { padding-top:0.58rem; } .pop-form .pop-butn-box .butn { width:100%; -webkit-appearance:none; font-size:3rem; color:#FFF; display:inline-block; padding:0.6rem 0; background:#18B1EA; border-radius:3rem; border:none; margin:0; } .pop-message,.pop-message-gift,.pop-cue,.pop-notice,.pop-hint,.pop-share,.pop-prompt,.pop-prompt2,.pop-form,.pop-bind,.pop-login,.pop-pay,.pop-pay-temp,.pop-partir,.pop-bookmark,.pop-load,.pop-hint-gift {display:none;position:fixed;z-index:1999;top:0;left:0;right:0;text-align:center;width:100vw;height:100vh;} .pop-message .pop-box {background:rgba(0,0,0,.84);position:relative;color:#FFF;display:inline-block;position:relative;word-break:break-all;border-radius:0.2rem;width:4.64rem;height:4.64rem;} .pop-message .pop-box .pop-image {width:1.94rem;height:1.4rem;margin-top:1.12rem;} .pop-message .pop-box .pop-text {margin:0.76rem 0 0;font-size:0.52rem;color:#FFF;} .pop-message>span{display: table;width: 100%; height: 100%;} .pop-message .pop-box2 { width: 10rem; margin: 0 auto; background: #000; color: #fff; height: 4rem; border-radius: .6rem; font-size: 1.8rem; line-height: 4rem; } .pop-message .pop-box2.pop-picture { height: 10rem; line-height: 1.4; } .pop-message .pop-box2.pop-picture .pop-image { width: 7rem; height: 7rem;margin: 0 auto; } .pop-hint-gift .pop-box .pop-wrap { padding-left: 3vw; padding-right: 3vw; } .pop-hint-gift .pop-box .pop-wrap .pop-close { width: 1.5rem; height: 1.5rem;right:0; } .pop-hint-gift .pop-text { line-height: 1.8; } .pop-hint-gift .pop-text-first { padding-top: .5rem; font-size: 1.15em;color:#333; } .pop-hint-gift .pop-code { border:1px solid #eee; border-radius: 4rem; margin-top: 1rem; overflow: hidden; } .pop-hint-gift .pop-butn { width: 20%; background: #18B1EA; color: #FFF; } .pop-hint-gift .pop-mark { width: 26%; } .pop-hint-gift .pop-input .pop-txt { width:98%; } .pop-message-gift>span { display: table; width: 100%; height: 100%; text-align: center; } .pop-message-gift .pop-box2 { width: 7rem; height: 7rem; margin: 0 auto; background: #333; border-radius: 1rem; } .pop-message-gift .pop-image { width: 4rem; height: 4rem; padding-top: .5rem; } .pop-message-gift .pop-text { color: #FFF; } /* @media screen and (max-width:550px) { .pop-window .pop-box .pop-wrap .pop-title,.pop-form .pop-title { font-size:2.5rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { font-size:2rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-btn,.pop-form .pop-butn-box .butn { font-size:2.5rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { height:5rem; } } */ @media screen and (max-width:450px) { .header .caption { font-size:2.2rem; height:2.8rem; margin:0 4rem; } .header .hbtn .iconfont { font-size:3.2rem; margin:1rem 0; } .header .person .iconfont { font-size:3.2rem; margin:.7rem 0; } .occupy { height:4.8rem; } .header .searchwrap .search .text { height:2.8rem; } .header .searchwrap .search .btn .iconfont { font-size:2.5rem; } .header .searchbtn { font-size:1.8rem; padding:1rem 0; } .header .addbtn { font-size:1.6rem; width:8rem; } .searchpage .header .searchwrap .search .text { height:3rem; margin:.8rem 0 1.05rem; } .searchpage .header .searchwrap .search .btn { top:1.25rem; } .empty p { font-size:1.4rem; } .pop-window .pop-box .pop-wrap .pop-title,.pop-form .pop-title { font-size:.32rem; } .pop-window .pop-box .pop-wrap .pop-content { font-size:1.6rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-btn,.pop-form .pop-butn-box .butn { font-size:2rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-input, .pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy { font-size:2.4rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .prefix { font-size:1.5rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-input { padding: .6rem 0.8rem .6rem 5.8rem; width: 100%; } .pop-window .pop-box .pop-wrap .pop-btnbox .prefix { left:0rem; padding-top:1rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .prefixa { font-size:1.5rem; left:0rem; padding-top:0.8rem; vertical-align: middle; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy { width:6rem; padding-top:.6rem; } .pop-window .pop-box .pop-wrap .pop-textarea { font-size:1.4rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { font-size:1.8rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { height:4rem; } } @media screen and (max-width:400px) { .pop-window .pop-box .pop-wrap .pop-content { font-size:1.4rem; } .footer .nav .item .iconfont { font-size:2.4rem; padding:.3rem 0 0; } .footer .nav .item span { font-size:1.3rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { font-size:1.6rem; } } @media screen and (max-width:350px) { .header .hbtn { width:4rem; } .header .caption { font-size:2rem; height:2.2rem; margin:0 4rem; } .header .hbtn .iconfont { font-size:3rem; margin:.7rem 0; } .header .person .iconfont { margin:.6rem 0; } .occupy { height:4.2rem; } .header .download .number { right:.2rem; width:1.6rem; height:1.6rem; line-height:1.6rem; font-size:1.2rem; } .header .searchwrap .search .text { height:2.6rem; } .header .searchwrap .search .btn .iconfont { font-size:2.4rem; } .header .addbtn { font-size:1.4rem; width:6rem; } .searchpage .header .searchwrap .search .text { margin:.8rem 0; } .searchpage .header .searchwrap .search .btn { top:1.1rem; } .space { height:4.7rem; } .footer .nav .item .iconfont { font-size:2.2rem; padding:.2rem 0 0; } .footer .nav .item span { font-size:1.2rem; } .empty p { font-size:1.2rem; } .pop-window .pop-box .pop-wrap .pop-title,.pop-form .pop-title { font-size:2rem; } .pop-window .pop-box .pop-wrap .pop-content { font-size:1.2rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-btn,.pop-form .pop-butn-box .butn { font-size:1.6rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-input, .pop-window .pop-box .pop-wrap .pop-btnbox .prefix, .pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy { font-size:1.4rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-input { width:100%; padding:.6rem 0.8rem .6rem 5.8rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .prefix { left:0rem; } .pop-window .pop-box .pop-wrap .pop-btnbox .pop-copy { width:5rem; padding-top:.6rem; } .pop-window .pop-box .pop-wrap .pop-textarea { font-size:1.2rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { font-size:1.4rem; } .pop-form .pop-table-wrap .pop-table .pop-cell { height:3rem; } } /*浮动层*/ .float_contact { position: fixed; bottom: -60px; z-index: 999; left: 10px; display:none; } .float_contact .float-bg { width: 50px; height:50px; background: url(../images/btn_normal_kefu@2x.png) no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; left: 0; z-index: 3; } .float_contact ul { width: 52px; height: 171px; padding-top: 14px; } .float_contact ul li { float: left; width: 100%; margin-bottom: 11px; position: relative; } .float_contact ul li a { width: 100%; height: 39px; display: inline-block; float: left; position: relative; z-index: 9; } .float_contact .kf_pic { visibility: hidden; opacity: 0; transition: 0.3s; width: 120px; height: 30px; padding: 10px 20px; background-color: #fff; border-radius: 6px; position: absolute; left: -180px; top: 0px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); z-index: 4; } .float_contact .kf_pic:after { width: 0; height:0; } .float_contact .kf_pic a { width: 100%; } .float_contact .kf_pic img { vertical-align: middle; } .float_contact .kf_pic span { width: 30px; height: 30px; display: inline-block; float: left; margin-right: 5px; margin: 5px 5px 0 10px; } .float_contact .kf_pic b { padding-top: 25px; line-height: 31px; font-size: 16px; color: #3c3c3c; } .float_contact .kf_pic .arrow { display: inline-block; border-width: 20px; border-top:10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #ffffff; position: absolute; right: -10px; top: 12px; } .float_contact .kf_pic .arrow { border-top:10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #ffffff; position: absolute; right: -10px; top: 12px; margin-left: -10px; } .float_contact .wx_pic,.float_contact .down_pic,.float_contact .pop_pic { visibility: hidden; opacity: 0; transition: 0.3s; width: 200px; height: 195px; background-color: #fff; border-radius: 6px; position: absolute; left: -200px; top: -20px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); z-index: 4; } .wx_pic_text{ display: block; text-align:center; color:#999999; } .down_pic_text{ text-align:center; color:#999999; } .wx_pic_text font{ color:#4badff; } .float_contact .down_pic{ text-align:center; } .float_contact .pop_pic{ height: 87px; text-align:center; padding:20px 0; line-height:20px; } .float_contact .pop_pic_btn{ display:block; height:35px; width:80px; background:#4badff; line-height:35px; margin:15px 0 0 65px; color:#ffffff; border-radius:5px; } .float_contact .wx_pic img, .float_contact .down_pic img { width: 170px; border-radius: 6px; margin-left:15px; } .float_contact .down_pic img{ margin-left:0px; } .float_contact .wx_pic .arrow, .float_contact .down_pic .arrow,.float_contact .pop_pic .arrow { display: inline-block; border-top:10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #ffffff; position: absolute; right: -10px; top: 12px; } .float_contact .rz_pic { visibility: hidden; opacity: 0; transition: 0.3s; position: absolute; width: 142px; height: 210px; left: -85px; bottom: -42px; } .float_contact .rz_pic .close { width: 18px; height: 18px; display: inline-block; cursor: pointer; position: absolute; bottom: 70px; right: 47px; z-index: 10; } .float_contact .rz_pic .rz-bg1 { position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; } .float_contact .rz_pic .rz-bg2 { position: absolute; top: 0; left: 0; z-index: 8; cursor: pointer; } .float_contact ul .active { opacity: 1; visibility: visible; left: -211px; } .float_contact .kf .active { opacity: 1; visibility: visible; left: -171px; } .float_contact .rz .active { opacity: 1; visibility: visible; left: -96px; } /*@author zwm*/ .zclearfix:after{ content:""; height:0; line-height:0; display:block; visibility:hidden; clear:both; } .zclearfix{ zoom:1; } .zdiv_copy{ width: 100%; margin-top: 0.5rem; } .zdiv_copy .copy.pop-btn{ font-size: 1.5rem; color: #fff; background-color: #18b1ea; padding: 0.3rem 1rem; border-radius: 0.3rem; display: block; width: 8rem; margin: 0 auto; text-align: center; } .code.pop-txt{ width:90%; } .za_icon1{ float: left; position:relative; display:inline-block; height:4.4rem; width:4.4rem; border-radius: 12px; background-color: #e2e2e2; overflow: hidden; } .dis_tab1{ position: absolute; z-index: 0; top: 1.5rem; left: 0; display: table; width: 4.4rem; height: 4.4rem; text-align: center; vertical-align: middle; font-size: 16px; color: #bababa; table-layout: fixed; background-color: #e2e2e2; } .dis_tabcell1{ display: table-cell; vertical-align: middle; } .dis_tabcell1 div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .trunker{ margin-bottom:59px; background-color:#fff; min-height:80vh; } @media screen and (min-width: 769px) { .pop-window{ max-width:640px; margin: 0 auto; } .pop-box.comment{ max-width:600px; } .pop-window .pop-box{max-width:530px;} /*.pop-window .pop-box .pop-wrap { padding:12% 8%; }*/ }