body, html { height: 100%; background-color: #f8f8f8 } body { font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif } .item { padding: 10px 0 } .item__title { margin-bottom: 5px; padding-left: 15px; padding-right: 15px; color: #999; font-weight: 400; font-size: 14px } .item__ctn { padding: 0 15px } .page_feedback { padding: 15px; overflow: auto; background-color: #fff } label > * { pointer-events: none } /*mint ui*/ /*weui*/ body, html { height: 100%; -webkit-tap-highlight-color: transparent } body { font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif } ul { list-style: none } .page, body { background-color: #ededed } .page { box-sizing: border-box } .link { color: #07c160 } .container { overflow: hidden } .container, .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .page { overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; z-index: 1 } .page.js_show { opacity: 1 } .page__hd { padding: 40px } .page__bd_spacing { padding: 0 16px } .page__ft { padding-top: 40px; padding-bottom: 10px; padding-bottom: calc(10px + constant(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); text-align: center } .page__ft img { height: 19px } .page__ft.j_bottom { position: absolute; bottom: 0; left: 0; right: 0 } .page__title { text-align: left; font-size: 20px; font-weight: 400 } .page__desc { margin-top: 4px; color: rgba(0,0,0,.5); text-align: left; font-size: 14px } .weui-cell_example:before { left: 52px } .page.progress { background-color: #fff } .page.home .page__intro-icon { margin-top: -.2em; margin-left: 5px; width: 16px; height: 16px; vertical-align: middle } .page.home .page__title { font-size: 0; margin-bottom: 15px } .page.home .page__bd img { width: 30px; height: 30px } .page.home .page__bd li { margin: 8px 0; background-color: #fff; overflow: hidden; border-radius: 2px; cursor: pointer } .page.home .page__bd li.js_show .weui-flex { opacity: .5 } .page.home .page__bd li.js_show .page__category { height: auto } .page.home .page__bd li.js_show .page__category-content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .page.home .page__bd li:first-child { margin-top: 0 } .page.home .page__category { height: 0; overflow: hidden } .page.home .page__category-content { opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .3s; transition: .3s } .page.home .weui-flex { padding: 20px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-transition: .3s; transition: .3s } .page.home .weui-cells { margin-top: 0 } .page.home .weui-cells:after, .page.home .weui-cells:before { display: none } .page.home .weui-cell { padding-left: 20px; padding-right: 20px } .page.home .weui-cell:before { left: 20px; right: 20px } .page.form .weui-label { width: 3.1em } .page.form_page .weui-label { width: 4.1em } .page.form_select .weui-cells__group_form .weui-cell_select-before .weui-select { width: 3.1em } [class*=" form_"].page, [class^=form_].page { padding: 0 } .page.form_input_status .weui-label, .page.form_select .weui-label, .page.form_select_primary .weui-label, .page.form_vcode .weui-label { width: 3.1em } .page.button { background-color: #ededed } .page.button .weui-btn_mini { vertical-align: middle } .page.button .page__bd { padding: 0 } .page.button .button-sp-area { margin: 15px auto; padding: 15px; text-align: center } .page.button .button-sp-area.cell { padding: 15px 0 } .page.cell .page__bd { padding-bottom: 30px } .page.form { background-color: #fff } .page.form .page__bd { padding-bottom: 30px } .page.actionsheet, .page.dialog { background-color: #fff } .page.dialog .page__bd { padding: 0 15px } .page.msg, .page.msg_success, .page.msg_text, .page.msg_text_primary, .page.msg_warn, .page.toast { background-color: #fff } .page.panel .page__bd { padding-bottom: 20px } .page.article { background-color: #fff } .page.icons, .page.icons-svg { text-align: center } .page.icons-svg .page__bd, .page.icons .page__bd { padding: 0 40px; text-align: left } .page.icons-svg .icon-box, .page.icons .icon-box { margin-bottom: 25px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center } .page.icons-svg .icon-box i, .page.icons .icon-box i { margin-right: 18px } .page.icons-svg .icon-box__ctn, .page.icons .icon-box__ctn { -webkit-flex-shrink: 100; flex-shrink: 100 } .page.icons-svg .icon-box__title, .page.icons .icon-box__title { font-weight: 400 } .page.icons-svg .icon-box__desc, .page.icons .icon-box__desc { margin-top: 6px; font-size: 12px; color: #888 } .page.icons-svg .icon_sp_area, .page.icons .icon_sp_area { margin-top: 10px; text-align: left } .page.icons-svg .icon_sp_area i:before, .page.icons .icon_sp_area i:before { margin-bottom: 5px } .page.flex .placeholder { margin: 5px; padding: 0 10px; background-color: #f7f7f7; height: 2.3em; line-height: 2.3em; text-align: center; color: rgba(0,0,0,.3) } .page.loadmore { background-color: #fff } .page.layers { overflow-x: hidden; -webkit-perspective: 1000px; perspective: 1000px } @media only screen and (max-width:320px) { .page.layers .page__hd { padding-left: 20px; padding-right: 20px } } .page.layers .page__bd { position: relative } .page.layers .page__desc { min-height: 4.8em } .page.layers .layers__layer { position: absolute; left: 50%; width: 150px; height: 266px; margin-left: -75px; box-sizing: border-box; -webkit-transition: .5s; transition: .5s; background: url(images/layers/transparent.gif) no-repeat 50%; background-size: contain; font-size: 14px; color: #fff } .page.layers .layers__layer span { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; -webkit-transition: .5s; transition: .5s } .page.layers .layers__layer:last-child span { color: #aaa } .page.layers .layers__layer.j_hide { opacity: 0 } .page.layers .layers__layer.j_pic span { color: transparent } @media only screen and (min-width:375px) and (min-height:603px) { .page.layers .layers__layer { width: 180px; height: 320px; margin-left: -90px } } @media only screen and (min-width:414px) and (min-height:640px) { .page.layers .layers__layer { width: 200px; height: 355px; margin-left: -100px } } .page.layers .layers__layer_popout { border: 1px solid hsla(0,0%,80%,.5); z-index: 4 } .page.layers .layers__layer_popout.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px) } @media only screen and (max-width:320px) { .page.layers .layers__layer_popout.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px) } } .page.layers .layers__layer_popout.j_pic { border-color: transparent; background-image: url(images/layers/popout.png) } .page.layers .layers__layer_mask { background-color: rgba(0,0,0,.5); z-index: 3 } .page.layers .layers__layer_mask.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px) } @media only screen and (max-width:320px) { .page.layers .layers__layer_mask.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px) } } .page.layers .layers__layer_navigation { background-color: rgba(40,187,102,.5); z-index: 2 } .page.layers .layers__layer_navigation.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px) } @media only screen and (max-width:320px) { .page.layers .layers__layer_navigation.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px) } } .page.layers .layers__layer_navigation.j_pic { background-color: transparent; background-image: url(images/layers/navigation.png) } .page.layers .layers__layer_content { background-color: #fff; z-index: 1 } .page.layers .layers__layer_content.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px) } @media only screen and (max-width:320px) { .page.layers .layers__layer_content.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px) } } .page.layers .layers__layer_content.j_pic { background-image: url(images/layers/content.png) } .page.searchbar .searchbar-result { display: none; margin-top: 0; font-size: 14px } .page.searchbar .searchbar-result .weui-cell__bd { padding: 2px 0 2px 20px; color: #666 } .page.actionsheet, .page.picker { overflow: hidden } .page.picker { background-color: #fff } .page.gallery { overflow: hidden } .weui-half-screen-dialog { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s; -webkit-transform: translateY(100%); transform: translateY(100%) } .weui-half-screen-dialog_show { -webkit-transform: translateY(0); transform: translateY(0) } @-webkit-keyframes a { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes a { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @-webkit-keyframes b { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } } @keyframes b { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 } } .page.slideIn { -webkit-animation: a .2s forwards; animation: a .2s forwards } .page.slideOut { -webkit-animation: b .2s forwards; animation: b .2s forwards } @supports (top:constant(safe-area-inset-top)) { .page { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) } .page.navbar, .page.tabbar { padding-left: 0; padding-right: 0 } .weui-tab__panel { padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right) } } @supports (top:env(safe-area-inset-top)) { .page { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) } .page.article, .page.msg_success, .page.msg_text, .page.msg_text_primary, .page.msg_warn, .page.navbar, .page.tabbar { padding: 0 } } /*mint ui*/ /* 覆盖mint-ui的primary颜色,改为微信UI的绿色 */ .mint-header { background-color: #1aad19; } .mint-button:not(.is-disabled):active::after { opacity: .2 /* .6 */ } .mint-button--primary { background-color: #1aad19; } .mint-button--primary.is-plain { border: 1px solid #1aad19; color: #1aad19 } .mint-badge.is-primary { background-color: #1aad19 } .mint-switch-input:checked + .mint-switch-core { border-color: #1aad19; background-color: #1aad19; } .mint-navbar .mint-tab-item.is-selected { border-bottom: 3px solid #1aad19; color: #1aad19; } .mint-tabbar > .mint-tab-item.is-selected { color: #1aad19; } .mint-searchbar-cancel { color: #1aad19; } .mint-checkbox-input:checked + .mint-checkbox-core { background-color: #1aad19; border-color: #1aad19; } .mint-radio-input:checked + .mint-radio-core { background-color: #1aad19; border-color: #1aad19; } .mt-range-progress { background-color: #1aad19; } .mt-progress-progress { background-color: #1aad19; } .mint-msgbox-confirm { color: #1aad19; } .mint-msgbox-confirm:active { color: #1aad19; } .mint-datetime-action { color: #1aad19; } /*header*/ .mint-header .ion { font-size: 24px; line-height: 40px; } .weui-toptips{ top:0; left:0; right:0; border-radius:unset; }