html{ } body{ min-height: 100vh; margin: 0px; font:14px/1.42858 '微软雅黑'; background-color: #f2f2f2; position: relative; user-select: none; cursor: default; } h1,h2,h3,h3,h5,h6,ul,li,ol,p{ margin: 0; padding: 0; } ul{list-style:none;} .header,.footer{ position: fixed; left: 0px;right: 0px;left:auto;right:auto; z-index: 2; max-width: 640px; margin: 0 auto;width:100%; } a{text-decoration: none} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #c2c2c8; } input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #c2c2c8; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #c2c2c8; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #c2c2c8; } /*header begin*/ .header{ top: 0px; line-height: 1.1rem;height:1.1rem; border-bottom:1px solid #c2c2c2; background-color: #fff; } .header .xg-back{ display: block; position: absolute; top: 0px; left: 0px; width: 1.1rem; height: 1.1rem; background: url("../images/trade/btn_normal_back@3x.png") no-repeat center center / 0.3rem 0.4rem; } .header .xg-title{ margin: 0px; padding: 0 1.2rem; text-align: center; font-size: 0.43rem; font-weight: normal; color:#666; } .header-btn .xg-title { padding-right: 2.2rem; } .header-btn .xg-btn { position: absolute; top: 0; right: 0px; width: 1.58rem; padding: 0; margin-top: 0.2rem; margin-right: 0.5rem; line-height: 0.7rem; text-align: center; } /*end header*/ .xg-main{ position: absolute; top:1.1rem; left: 0; right: 0; bottom: 2.08rem; background-color: #fff; z-index: 1; } .xg-container{ background-color: #f2f2f2; margin-bottom: 2.08rem; } .xg-module{ padding: 0.32rem 0.38rem; background-color: #fff; } /*footer begin*/ .footer{ bottom: 0px; text-align: center; background-color: #f2f2f2; } /*end footer*/ /*button begin*/ .xg-btn{ display: inline-block; padding: 0.2rem 0rem; border:none; outline: none; line-height: 0.5rem; color: #fff; font-size: 0.4rem; white-space: nowrap; } .xg-btn-submit{ width: 80%; margin: 0.5rem auto; border-radius: 2rem; } .xg-btn-pill{ border-radius: 2rem; } .xg-btn-primary{ background-color: #19b1ea; } .xg-btn-gray{ background-color: #c1c1c1; } .xg-btn-disabled{ background-color: #c1c3c1; } .xg-btn-block{ display: block; } /*end button*/ /*清除浮动的影响*/ .clf{ zoom: 1; } .clf::before,.clf::after{ content: ''; display: table; clear: both; } .fl{ float: left; } .fr{ float: right; } body{ max-width: 640px; margin: 0 auto; background: url(../images/bg.jpg) no-repeat; } /*弹窗 begin*/ .xg-mask{ position: absolute; top:0;right: 0;bottom: 0;left: 0; background-color: rgba(0,0,0,0.5); z-index: 9; overflow: auto; } .xg-mask > .mask-container{ border-radius: 10px; margin: 1.2rem 0.5rem 1rem; background-color: #fff; overflow: hidden; max-width: 640px; } .mask-container > .mask-header{ padding: 0.5rem 0.16rem; font-size: 0.55rem; color: #fff; font-weight: normal; text-align: center; background:url('../images/trade/bg@3x.png') no-repeat center center/ 100% 100%; } .header-text.icon{ padding-left: 0.8rem; } .icon.icon-notice{ background: url('../images/trade/icon_normal_xuzhi@3x.png') no-repeat left center; background-size: 0.6rem; } .mask-container > .mask-body{ padding: 0.64rem 0.7rem; } .mask-container > .mask-footer{ padding: 0 0.7rem; } /*end 弹窗*/ /*单个复选框 begin*/ .xg-checkbox{ position: absolute; clip: rect(0,0,0,0); } .xg-checkbox-wrapper{ display: block; width: 50%; line-height: 0.4rem; font-size: 0.32rem; } .checkbox-icon{ float: left; font-size: 0; width: 0.4rem; height: 0.4rem; margin-right: 0.16rem; background: url('../images/trade/icon_weixuan_n.png') no-repeat center center / 0.36rem 0.36rem; } .xg-checkbox:checked + .checkbox-icon{ background-image: url("../images/trade/icon_xuanzhong_s.png"); } .checkbox-text{ color: #343434; } /*end 单个复选框*/ /*常见的表单元素 begin*/ .xg-textarea{ display: block; width: 100%; padding: 0.3rem 0.36rem; font-size: 0.34rem; font-family: "微软雅黑"; color: rgb(153,153,153); box-sizing: border-box; border:none; outline: none; resize: none; background-color: #fff; } /*end 常见的表单元素*/ .wrapper { bottom: 0px; font-family: "微软雅黑"; } .wrapper .xg-container { height: 100%; margin: 0; padding: 0.5rem; box-sizing: border-box; background-color: #f2f2f2; } .wrapper .xg-form{ width: 100%; } .wrapper .xg-textarea { height: 5.24rem; padding: 0.3rem 0.36rem; font-size: 0.34rem; } /*利用swiper的pagination模拟tab效果 begin*/ .swiper-container { width: 100%; height: auto; } .swiper-container > .swiper-wrapper{ padding-top: 1.24rem; box-sizing: border-box; } .swiper-wrapper .swiper-slide{ height: calc(100vh - 2.4rem); overflow: auto; } .swiper-tab{ position: absolute; top:0!important; bottom: auto!important; box-shadow: 0 0 0 0.14rem #eee; width: 100%; padding: 0; list-style: none; z-index: 2; background-color: #fff; max-width: 640px; margin: 0 auto 0.14rem; } .swiper-tab > .swiper-item{ float: left; width: 20%; text-align: center; box-sizing: border-box; transition: all 0.3s linear; text-decoration: none; color: #5d5d5d; outline: none; } .swiper-tab > .swiper-item.swiper-item-active{ color: rgb(25,177,234); } .swiper-tab > .swiper-item .text{ position: relative; display: inline-block; padding: 0.3rem 0; line-height: 0.4rem; font-size: 0.36rem; } .swiper-tab > .swiper-item.swiper-item-active .text:after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0px; height: 2px; background-color: currentColor; } /*end 利用swiper的pagination模拟tab效果*/ /*暂无数据 begin!*/ .no_data { position: relative; } .nodata_content { position: absolute; top: 50%; left: 50%; margin-top: -1.45rem; margin-left: -4.4rem; width: 8.8rem; height: 2.9rem; text-align: center; } .nogame_img{ width:2rem; height:2rem; margin-bottom: 0.3rem; } .icon-go { display: inline-block; margin-left: 0.12rem; vertical-align: sub; height: 0.45rem; width: 0.3rem; background: url("../images/trade/icon_xiala2.png") no-repeat center center; background-size: 100% 100%; } .clo_red{ color: rgb(217,65,50); } /*end 暂无数据*/