diff --git a/config.xml b/config.xml index 5a5efb3..ab561f9 100644 --- a/config.xml +++ b/config.xml @@ -16,7 +16,7 @@ - + @@ -28,7 +28,7 @@ - + diff --git a/package.json b/package.json index 9cda8b2..afb60db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hybridstart", - "version": "1.2.2", + "version": "1.2.3", "description": "A hybrid application development framework", "main": "lib/index.js", "directories": { diff --git a/sdk/common.js b/sdk/common.js index d06309a..37b4c59 100644 --- a/sdk/common.js +++ b/sdk/common.js @@ -132,7 +132,11 @@ define(function(require, exports, module) { ele.removeAttribute('data-remote'); }); }); - + //沉浸式状态栏 + let safeTop = api.safeArea.top; + if(safeTop && safeTop>24){ + document.querySelector('.head').style.paddingTop = safeTop + 'px' + } }); }); \ No newline at end of file diff --git a/sdk/core.js b/sdk/core.js index 6126a32..025739d 100644 --- a/sdk/core.js +++ b/sdk/core.js @@ -915,8 +915,7 @@ var apputil = (function(document, undefined) { var left = config.left || 0, top = config.top || 0, width = config.width || 'auto', - height = config.height || 'auto', - bottomMargin = config.bottomMargin || 0; + height = config.height || 'auto'; if (!config.name) { config.name = 'pop-' + config.url; } @@ -932,7 +931,10 @@ var apputil = (function(document, undefined) { y: top, w: width, h: height, - marginBottom: bottomMargin + marginLeft: config.marginLeft, + marginTop: config.marginTop, + marginBottom: config.marginBottom, + marginRight: config.marginRight }, customRefreshHeader: 'UIPullRefreshFlash', useWKWebView: true, @@ -1154,7 +1156,6 @@ var gh=((((ga*ga)>>>17)+ga*gb)>>>15)+gb*gb;var gl=(((gx&4294901760)*gx)|0)+(((gx break; default: app.toast('服务端错误(' + status + ') code:' + code); - break; } }; var isEqual = function(o, x) { diff --git a/sdk/ui.css b/sdk/ui.css index a397959..965ab48 100644 --- a/sdk/ui.css +++ b/sdk/ui.css @@ -1 +1,2321 @@ -@font-face{font-family:'iconfont';src:url('font/iconfont.ttf') format('truetype'),url('font/iconfont.svg#iconfont') format('svg')}.ion{font-family:'iconfont' !important;font-size:1.1em;font-style:normal;display:inline-block;color:inherit;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{display:none}html{-webkit-user-select:none;user-select:none;font-family:sans-serif;-webkit-text-size-adjust:100%;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}html,body{height:100%}html{font-size:15.625vw}body{width:100%;line-height:1.7;font-size:.26rem;position:relative;background:#f5f5f5;overflow-x:hidden;overflow-y:auto;color:#333}body,h1,h2,h3,h4,p,ul,ol,dd,dl,form{margin:0}img{max-width:100%;height:auto;vertical-align:top;border:0 }ul{padding-left:0;list-style-type:none}i,em{font-style:normal}big{font-size:.338rem}small{font-size:.2002rem}a{color:inherit;text-decoration:none}article,aside,dialog,footer,header,section,nav,figure,menu,audio,canvas,progress,video{display:block}input,select,button,a,textarea{outline:0;margin:0;font-size:100%;border:0}table{border-spacing:0;border-collapse:collapse;background-color:transparent}td,th{padding:0}.row{display:block;width:102%;transition:0.2s width ease;*zoom:1}.row:before,.row:after{display:table;clear:both;content:''}.row>[class*="span-"]{float:left;margin-right:2%;*margin-right:1.89%}.row>.span-1{width:6.33333333%}.row>.span-2{width:14.66666667%}.row>.span-3{width:23%}.row>.span-4{width:31.33333333%}.row>.span-5{width:39.66666667%}.row>.span-6{width:48%}.row>.span-7{width:56.33333333%}.row>.span-8{width:64.66666667%}.row>.span-9{width:73%}.row>.span-10{width:81.33333333%}.row>.span-11{width:89.66666667%}.row>.span-12{width:98%}.full-row{width:100%;transition:0.2s width ease;*zoom:1}.full-row:before,.full-row:after{display:table;clear:both;content:''}.full-row>[class*='span']{float:left}.full-row>.span-1{width:8.33333333%;*width:8.22333333%}.full-row>.span-2{width:16.66666667%;*width:16.55666667%}.full-row>.span-3{width:25%;*width:24.89%}.full-row>.span-4{width:33.33333333%;*width:33.22333333%}.full-row>.span-5{width:41.66666667%;*width:41.55666667%}.full-row>.span-6{width:50%;*width:49.89%}.full-row>.span-7{width:58.33333333%;*width:58.22333333%}.full-row>.span-8{width:66.66666667%;*width:66.55666667%}.full-row>.span-9{width:75%;*width:74.89%}.full-row>.span-10{width:83.33333333%;*width:83.22333333%}.full-row>.span-11{width:91.66666667%;*width:91.55666667%}.full-row>.span-12{width:100%;*width:99.89%}.row>.pull-right,.full-row>.pull-right{float:right}.row>.center{position:relative;left:-1%;display:block;float:none;clear:both;margin-right:auto;margin-left:auto}.full-row>.center{display:block;float:none;clear:both;margin-right:auto;margin-left:auto}.pull-left-1{position:relative;left:-8.33333333%}.pull-left-2{position:relative;left:-16.66666667%}.pull-left-3{position:relative;left:-25%}.pull-left-4{position:relative;left:-33.33333333%}.pull-left-5{position:relative;left:-41.66666667%}.pull-left-6{position:relative;left:-50%}.pull-left-7{position:relative;left:-58.33333333%}.pull-left-8{position:relative;left:-66.66666667%}.pull-left-9{position:relative;left:-75%}.pull-left-10{position:relative;left:-83.33333333%}.pull-left-11{position:relative;left:-91.66666667%}.pull-left-12{position:relative;left:-100%}.pull-right-1{position:relative;left:8.33333333%}.pull-right-2{position:relative;left:16.66666667%}.pull-right-3{position:relative;left:25%}.pull-right-4{position:relative;left:33.33333333%}.pull-right-5{position:relative;left:41.66666667%}.pull-right-6{position:relative;left:50%}.pull-right-7{position:relative;left:58.33333333%}.pull-right-8{position:relative;left:66.66666667%}.pull-right-9{position:relative;left:75%}.pull-right-10{position:relative;left:83.33333333%}.pull-right-11{position:relative;left:91.66666667%}.pull-right-12{position:relative;left:100%}.btn{position:relative;overflow:hidden;font-size:.26rem;font-weight:normal;line-height:.65rem;height:.65rem;display:inline-block;margin-bottom:0;cursor:pointer;box-sizing:border-box;touch-action:manipulation;min-width:4em;border-radius:.1rem;user-select:none;text-align:center;vertical-align:middle;white-space:nowrap;border:0;padding:0 1em}.btn>.ion{vertical-align:middle;font-size:1.1em}.btn:active,.btn.active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:0.65;-webkit-box-shadow:none;box-shadow:none;filter:alpha(opacity=65)}.btn-default{color:#333;border-color:#dadada;background-color:#eee}.btn-default:active,.btn-default.active{color:#fff;border-color:#eee;background-color:#999}.btn-default.disabled,.btn-default[disabled],fieldset[disabled] .btn-default,.btn-default.disabled:active,.btn-default[disabled]:active,fieldset[disabled] .btn-default:active,.btn-default.disabled.active,.btn-default[disabled].active,fieldset[disabled] .btn-default.active{border-color:#dadada;background-color:#fff}.btn-primary{color:#fff;background-color:#1d6fb8}.btn-primary:active,.btn-primary.active{color:#fff !important;border-color:#0f3a60;background-color:#0f3a60}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{border-color:#1d6fb8;background-color:#1d6fb8}.btn-success{color:#fff;background-color:#25ae88}.btn-success:active,.btn-success.active{color:#fff !important;border-color:#135a46;background-color:#135a46}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{border-color:#25ae88;background-color:#25ae88}.btn-info{color:#fff;background-color:#4fcbf0}.btn-info:active,.btn-info.active{color:#fff !important;border-color:#119ec8;background-color:#119ec8}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{border-color:#4fcbf0;background-color:#4fcbf0}.btn-warning{color:#fff;background-color:#f97d22}.btn-warning:active,.btn-warning.active{color:#fff !important;border-color:#b04d05;background-color:#b04d05}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{border-color:#dadada;background-color:#f97d22}.btn-danger{color:#fff;background-color:#fd7b6d}.btn-danger:active,.btn-danger.active{color:#fff !important;border-color:#fc2008;background-color:#fc2008}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{border-color:#fd7b6d;background-color:#fd7b6d}.btn-link{background-color:transparent;font-weight:normal;color:#1d6fb8;padding:0;white-space:normal}.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{-webkit-box-shadow:none;box-shadow:none}.btn-link:active,.btn-link.active{text-decoration:underline;color:#0f3a60;border-color:transparent}.btn-lg{font-size:.338rem;height:.845rem;line-height:.845rem;min-width:7em}.btn-sm{font-size:.2002rem;height:.4004rem;line-height:.4004rem}.btn-block{display:block;width:100%;padding-right:0;padding-left:0}.btn-block+.btn-block{margin-top:.13rem}.btn .jon,.form-mark .jon{line-height:1.2;margin:0;vertical-align:baseline}input[type='submit'].btn-block,input[type='reset'].btn-block,input[type='button'].btn-block{width:100%}.btn-ghost{background:none;border-color:inherit;border:1px solid transparent}.btn-ghost.btn-primary{border-color:#1d6fb8}.btn-ghost.btn-success{border-color:#25ae88}.btn-ghost.btn-info{border-color:#4fcbf0}.btn-ghost.btn-warning{border-color:#f97d22}.btn-ghost.btn-danger{border-color:#fd7b6d}.btn-link.btn-ghost{padding-left:1em;padding-right:1em}.card{overflow:hidden;margin:.39rem .26rem;border-radius:.2rem;background-color:#fff;border:1px solid #dadada;padding:0}.card .item{padding-right:.26rem;padding-left:.26rem}.card .item:last-child{border-bottom:0 !important}.card .item-body{margin-top:0}@media screen and (-webkit-min-device-pixel-ratio:2){.card .item:last-child:before{display:none !important}}.card-head{position:relative;line-height:2.5em;padding:0 1em;border-bottom:1px solid #dadada}.card-title{overflow:hidden;font-weight:700;padding:.2em 0;width:100%;white-space:nowrap;text-overflow:ellipsis}.card-foot{overflow:hidden;line-height:2.5em;padding:0 1em;background-color:#eee}.badge{line-height:1.2em;display:inline-block;margin:0 .5em;padding:.2em .6em;text-align:center;vertical-align:baseline;white-space:nowrap;color:#fff;border-radius:1.6em;background:#999}.badge:empty{display:none !important}.badge-primary{background:#0f3a60}.badge-success{background:#135a46}.badge-info{background:#119ec8}.badge-warning{background:#b04d05}.badge-danger{background:#fc2008}.list{position:relative;margin-bottom:.26rem;padding:0;background:#fff}.list:last-child{margin-bottom:0}.list:last-child.card{margin-bottom:1.5em}.item{position:relative;z-index:2;display:block;box-sizing:border-box;line-height:1;padding:.312rem;border-bottom:1px solid #dadada;overflow:hidden}.list .item:last-child{border-bottom:0}.active-handle{position:absolute;width:400px;height:400px;border-radius:200px;background:#999;z-index:0;transform:scale(0);-webkit-transform:scale(0);opacity:.5;transition:all ease-out .5s;-webkit-transition:all ease-out .5s}.active .active-handle{transform:scale(1);-webkit-transform:scale(1);opacity:0}@media screen and (-webkit-min-device-pixel-ratio:2){.item{border-bottom:0}.item:before{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#dadada;z-index:99}.list .item:last-child:before{display:none}}.item.item-lite{padding:.208rem}.item:empty{display:none}.item h2{line-height:1.7;font-size:1.2em;font-weight:normal;margin:0 0 .3em 0;color:#333}.item h3{line-height:1.7;font-size:1.1em;font-weight:normal;margin:0 0 .3em 0;color:#333}.item p{margin-bottom:.3em;opacity:.9;line-height:1.5}.item.item-lite p{margin-bottom:0}.item h1:last-child,.item h2:last-child,.item h3:last-child,.item h4:last-child,.item h5:last-child,.item h6:last-child,.item p:last-child{margin-bottom:0}.item h1,.item h2,.item h3,.item h4,.item h5,.item h6,.item p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.item-divider{font-weight:500;margin:-1px 0 0 !important;color:#222;background-color:#eee}.item-note{position:absolute;right:0;top:0;color:#999;font-size:.9em;height:100%;padding-right:.26rem;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}input.item-note,input.item-note[readonly]{text-align:right;color:#555}.item-icon-left>.ion:first-child,.item-icon-right>.ion:last-child{font-size:1.3em;position:absolute;z-index:9;height:100%;top:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.item-icon-left,.item-icon-left.item-lite{padding-left:.78rem}.item-icon-left>.ion:first-child{left:.26rem;color:#1d6fb8}.item-icon-right,.item-icon-right.item-lite{padding-right:.78rem}.item-icon-right>.ion:last-child{right:.26rem;color:#999}.item-icon-right .item-note{right:.52rem}.item-icon-left.item-icon-right>.ion:first-child{right:auto}.item-icon-left.item-icon-right>.ion:last-child{left:auto}.item-icon-left .ion img{width:1.1em;vertical-align:middle}.item-button-left{padding-left:5em}.item-button-left>.btn{position:absolute;top:.6em;left:.8em;display:-webkit-box;display:-webkit-flex;display:flex;min-width:2.8em;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.item-button-right{padding-right:5em}.item-button-right>.btn{position:absolute;top:50%;margin-top:-0.325rem;right:0;display:-webkit-box;display:-webkit-flex;display:display: flex;min-width:2.8em;max-width:5em;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.item-button-right>.btn .ion:before{line-height:2.5em;position:relative;left:auto;width:auto}.item-avatar{min-height:5.5em;padding-left:6em}.item-avatar>img:first-child,.item-avatar .item-image{position:absolute;top:50%;left:1em;width:4em;height:4em;border-radius:50%;overflow:hidden;margin-top:-2em;box-shadow:0 0 2px rgba(0,0,0,0.3)}.item-avatar-right{min-height:5em;padding-right:5em}.item-avatar-right>img:first-child,.item-avatar-right .item-image{position:absolute;top:50%;right:1em;width:4em;height:4em;border-radius:50%;overflow:hidden;margin-top:-2em;box-shadow:1px 1px 2px rgba(0,0,0,0.3)}.item-thumbnail{min-height:5em;padding-top:.5em;padding-bottom:.5em;padding-left:6em}.item-thumbnail>img:first-child,.item-thumbnail .item-image{position:absolute;top:.5em;left:.5em;width:5em;height:3.75em}.item-thumbnail-right{min-height:8em;padding-top:.6em;padding-right:8em}.item-thumbnail-right>img:first-child,.item-thumbnail-right .item-image{position:absolute;top:.5em;right:.5em;width:5em;height:3.75em}.item-image{padding:0;text-align:center}.item-image img{width:100%;height:100%}.item-body{white-space:normal;text-overflow:inherit;margin-top:.5em;color:#555}.item-body h1,.item-body h2,.item-body h3,.item-body h4,.item-body h5,.item-body h6,.item-body p{white-space:normal}.item .badge+.badge{margin-left:.4em}.item-badge .badge{position:absolute;top:.26rem;right:.208rem;display:-webkit-box;display:-webkit-flex;display:flex}.item.item-icon-right .badge{right:.624rem}.item.item-divider .badge{top:.64em}.item.item-avatar .item-image .badge{top:-0.5em;right:-0.5em}.item.item-button-right .badge{right:5em}.item-input{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.item-input input,.item-input textarea{margin:0;margin-right:1em;border-radius:0;-webkit-box-flex:1;-webkit-flex:1;flex:1;width:100%;-webkit-appearance:none;appearance:none;background-color:transparent}.item-input input:last-child,.item-input textarea:last-child{margin-right:0}.item-input .btn .ion{font-size:1.3em;position:static;display:inline-block;height:auto;text-align:center;-webkit-box-flex:0;-webkit-flex:0 0 2em;flex:0 0 2em}.item-input .ion{min-width:1em}.item-input .input,textarea{display:block;padding-top:2px;padding-left:0;vertical-align:middle;color:inherit;box-sizing:border-box}textarea{padding:0;width:100%}::-webkit-input-placeholder{color:#aaa}input[type='radio'],input[type='checkbox']{line-height:normal;margin:0}.item-input input[type='file'],.item-input input[type='image'],.item-input input[type='submit'],.item-input input[type='reset'],.item-input input[type='button'],.item-input input[type='radio'],.item-input input[type='checkbox']{width:auto}input[type='file']{line-height:2em}input[disabled],select[disabled],textarea[disabled],input[readonly],textarea[readonly],select[readonly]{cursor:not-allowed;color:#aaa}input[type='radio'][disabled],input[type='checkbox'][disabled],input[type='radio'][readonly],input[type='checkbox'][readonly]{background-color:transparent}.input-label{display:table;margin-right:.5em;max-width:50%}.item-stacked-label{display:block;box-shadow:none;padding:.26rem}.item-stacked-label .input-label,.item-stacked-label .ion{display:inline-block;padding:.3em 0 0 0;vertical-align:middle}.item-stacked-label input,.item-stacked-label textarea{padding:0;border:0;-webkit-border-radius:.1em;border-radius:.1em;margin-top:.5em;overflow:hidden}.checkbox{position:relative;display:inline-block;padding:.5em .5em}.checkbox input{position:relative;display:block;width:1.5em;height:1.5em;border:0;background:transparent;-webkit-appearance:none}.checkbox input:before{border-color:#ccc;box-sizing:border-box;display:table;width:100%;height:100%;content:' ';-webkit-transition:background-color 20ms ease-in-out;transition:background-color 20ms ease-in-out;border-width:1px;border-style:solid;border-radius:1.2em;background:#fff}.checkbox input:after{position:absolute;top:26%;left:25%;display:table;width:.7em;height:.4em;content:' ';-webkit-transition:opacity .05s ease-in-out;transition:opacity .05s ease-in-out;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0;border:1px solid #fff;border-top:0;border-right:0}.checkbox input:checked:before{border-width:2px;border-color:#ddd;background:#ddd}.checkbox input:disabled:before{border-color:#ddd}.checkbox input:disabled:checked:before{background:#ddd}.checkbox input:checked:after{opacity:1}.item-checkbox{padding-left:3em !important}.item-checkbox.active{box-shadow:none}.item-checkbox .checkbox{position:absolute;z-index:3;top:50%;right:.5em;left:.5em;margin-top:-1.2em}.item-checkbox.item-checkbox-right{padding-right:5em;padding-left:1.2em}.item-checkbox-right .checkbox input{float:right}.checkbox-primary input:checked:before{border-color:#1d6fb8;background:#1d6fb8}.checkbox-success input:checked:before{border-color:#25ae88;background:#25ae88}.checkbox-info input:checked:before{border-color:#4fcbf0;background:#4fcbf0}.checkbox-warning input:checked:before{border-color:#f97d22;background:#f97d22}.checkbox-danger input:checked:before{border-color:#fd7b6d;background:#fd7b6d}.item-radio input{position:relative;display:inline-block;width:1.5em;height:1.5em;border:0;background:transparent;-webkit-appearance:none;vertical-align:middle}.item-radio input:before{border-color:#ccc;box-sizing:border-box;display:block;width:100%;height:100%;content:' ';-webkit-transition:background-color 20ms ease-in-out;transition:background-color 20ms ease-in-out;border-width:1px;border-style:solid;border-radius:50%;background:#fff}.item-radio input:after{position:absolute;top:20%;left:20%;width:60%;height:60%;content:' ';background:#777;-webkit-transition:opacity .05s ease-in-out;transition:opacity .05s ease-in-out;opacity:0;border-radius:50%;overflow:hidden}.item-radio input:checked:before{border-color:#ddd;background:#ddd;border-width:2px}.item-radio input:checked:after{opacity:1}.radio-primary input:checked:before{border-color:#1d6fb8}.radio-success input:checked:before{border-color:#25ae88}.radio-info input:checked:before{border-color:#4fcbf0}.radio-warning input:checked:before{border-color:#f97d22}.radio-danger input:checked:before{border-color:#fd7b6d}.radio-primary input:checked:after{background:#1d6fb8}.radio-success input:checked:after{background:#25ae88}.radio-info input:checked:after{background:#4fcbf0}.radio-warning input:checked:after{background:#f97d22}.radio-danger input:checked:after{background:#fd7b6d}.item-toggle{pointer-events:none}.toggle{position:relative;display:inline-block;pointer-events:auto}.toggle input:checked+.track{border-color:#ddd;background-color:#ddd}.toggle input{display:none}.toggle .track{display:inline-block;box-sizing:border-box;width:1.04rem;height:.416rem;content:' ';margin:.052rem 0 0;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background-color,border;transition-property:background-color,border;pointer-events:none;border:solid 2px #dadada;border-radius:1.2em;background-color:#fff}.toggle .handle{position:absolute;top:0;left:0;display:block;width:.52rem;height:.52rem;-webkit-transition:.3s cubic-bezier(0, 1.1, 1, 1.1);transition:.3s cubic-bezier(0, 1.1, 1, 1.1);-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,transform;border-radius:.26rem;background-color:#fff;box-shadow:0 2px .56em rgba(0,0,0,0.35),0 1px 1px rgba(0,0,0,0.15)}.toggle .handle:before{position:absolute;top:-0.32em;left:-1.8em;padding:1.5em 2.4em;content:' '}.toggle input:checked+.track .handle{-webkit-transform:translate3d(.52rem, 0, 0);transform:translate3d(.52rem, 0, 0);background-color:#fff}.item-toggle.active{box-shadow:none}.item-toggle{padding-right:4em}.item-toggle .toggle{position:absolute;z-index:3;top:.16rem;right:.26rem}.toggle input:disabled+.track{opacity:0.6}.item-toggle .toggle-small{top:1.28em}.toggle-small .track{width:2.72em;height:4.4em;border:0;background:#9e9e9e}.toggle-small .handle{top:2px;left:.32em;width:1.28em;height:1.28em;box-shadow:0 2px .4em rgba(0,0,0,0.25)}.toggle-small input:checked+.track .handle{-webkit-transform:translate3d(1.28em, 0, 0);transform:translate3d(1.28em, 0, 0)}.toggle-primary input:checked+.track{border-color:#1d6fb8;background-color:#1d6fb8}.toggle-success input:checked+.track{border-color:#25ae88;background-color:#25ae88}.toggle-info input:checked+.track{border-color:#4fcbf0;background-color:#4fcbf0}.toggle-warning input:checked+.track{border-color:#f97d22;background-color:#f97d22}.toggle-danger input:checked+.track{border-color:#fd7b6d;background-color:#fd7b6d}.range input{display:block;overflow:hidden;width:auto;height:3em;margin-top:.4em;margin-bottom:.4em;padding-right:2px;padding-left:1px;outline:none;margin-right:.8em;margin-left:.8em;-webkit-box-flex:1;-webkit-flex:1;flex:1;background:-webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #ccc), color-stop(100%, #ccc));background:-webkit-linear-gradient(left, #ccc 0, #ccc 100%);background:linear-gradient(to right, #ccc 0, #ccc 100%);background-repeat:no-repeat;background-position:center;background-size:99% 2px;-webkit-appearance:none}.range input::-webkit-slider-thumb{position:relative;width:2.5em;height:2.5em;border:0;border-radius:50%;background-color:#fff;box-shadow:0 0 2px rgba(0,0,0,0.3),0 3px .4em rgba(0,0,0,0.2);-webkit-appearance:none}.range input::-webkit-slider-thumb:before{position:absolute;top:1.25em;left:-2001px;width:2000px;height:2px;content:' ';background:#444}.range input::-webkit-slider-thumb:after{position:absolute;top:-4em;left:-4em;padding:2.4em;content:' '}.range{display:-webkit-box;display:-webkit-flex;display:flex;padding:2px 1em;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.range .ion{font-size:1.8em;display:block;text-align:center;-webkit-box-flex:0;-webkit-flex:0;flex:0}.range-label{display:block;white-space:nowrap;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto}.range-label:first-child{padding-left:.4em}.range input+.range-label{padding-right:.4em;padding-left:0}.item-select{position:relative}.item-select select{-webkit-appearance:none;appearance:none;position:absolute;top:0;bottom:0;right:.26rem;padding:0 2.4em 0 .8em;max-width:65%;border:0;background:none;color:#333;text-indent:.01px;text-overflow:'';white-space:nowrap;font-size:1.1em;cursor:pointer;direction:rtl}.item-select select:first-child{position:relative;max-width:none;padding:0;float:right}.item-select option{direction:ltr}.item-select:after{position:absolute;top:50%;right:1.2em;margin-top:-3px;width:0;height:0;border-top:.4em solid;border-right:.4em solid transparent;border-left:.4em solid transparent;color:#999;content:"";pointer-events:none}select[multiple],select[size]{height:auto}.item-select .item-note{margin-right:1.2em}.flex-col{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:flex;flex-direction:column;-webkit-box-orient:vertical;-webkit-flex-direction:column}.flex-row{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal}.flex-1{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.flex-2{-webkit-box-flex:2;-webkit-flex:2;flex:2;min-width:0}.flex-3{-webkit-box-flex:3;-webkit-flex:3;flex:3;min-width:0}.flex-4{-webkit-box-flex:4;-webkit-flex:4;flex:4;min-width:0}.align-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch}.align-center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.justify-center{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.flex-wrap{-webkit-flex-wrap:wrap;flex-wrap:wrap}.scroll_cont{position:relative;display:block;overflow:hidden;overflow-y:scroll;box-sizing:border-box;height:100%;-webkit-overflow-scrolling:touch;z-index:1}.border-t{border-top:1px solid #dadada}.border-b{border-bottom:1px solid #dadada}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-t,.border-b{position:relative;border:0}.border-t:before,.border-b:after{position:absolute;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#dadada}.border-t:before{top:0}.border-b:after{bottom:0}}.fix{*zoom:1;*clear:both}.fix:before,.fix:after{display:table;clear:both;content:''}.oh{overflow:hidden;*zoom:1}.l{float:left}.r{float:right}.pr{position:relative}.pa{position:absolute}.tc{text-align:center}.tl{text-align:left}.tr{text-align:right}.el{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hide{display:none}.hidetext{font:0/0 a;letter-spacing:-99px}.arr{display:inline-block;overflow:hidden;width:0;height:0}.opc0{opacity:0 ;filter:alpha(opacity=0)}.big{font-size:1.2em}.small{font-size:.8em}*[class*="rect-"]{position:relative;display:block;width:100%;height:0;overflow:hidden}*[class*="rect-"] ._full{position:absolute;left:0;top:0;width:100%;height:100%;*height:auto}.rect-4854{padding-bottom:48.54%}.rect-50{padding-bottom:50%}.rect-5625{padding-bottom:56.25%}.rect-60{padding-bottom:60%}.rect-618{padding-bottom:61.8%}.rect-70{padding-bottom:70%}.rect-75{padding-bottom:75%}.rect-80{padding-bottom:80%}.rect-90{padding-bottom:90%}.rect-100{padding-bottom:100%}.m{margin:.39rem}.m-0{margin:0}.m-l{margin-left:.39rem}.m-t{margin-top:.39rem}.m-r{margin-right:.39rem}.m-b{margin-bottom:.39rem}.m-lr{margin-left:.39rem;margin-right:.39rem}.m-tb{margin-top:.39rem;margin-bottom:.39rem}.m-sm{margin:.26rem}.m-l-sm{margin-left:.26rem}.m-t-sm{margin-top:.26rem}.m-r-sm{margin-right:.26rem}.m-b-sm{margin-bottom:.26rem}.m-lr-sm{margin-left:.26rem;margin-right:.26rem}.m-tb-sm{margin-top:.26rem;margin-bottom:.26rem}.m-lg{margin:.624rem}.m-l-lg{margin-left:.624rem}.m-t-lg{margin-top:.624rem}.m-r-lg{margin-right:.624rem}.m-b-lg{margin-bottom:.624rem}.m-lr-lg{margin-left:.624rem;margin-right:.624rem}.m-tb-lg{margin-top:.624rem;margin-bottom:.624rem}.p{padding:.39rem}.p-0{padding:0}.p-l{padding-left:.39rem}.p-t{padding-top:.39rem}.p-r{padding-right:.39rem}.p-b{padding-bottom:.39rem}.p-lr{padding-left:.39rem;padding-right:.39rem}.p-tb{padding-top:.39rem;padding-bottom:.39rem}.p-sm{padding:.26rem}.p-l-sm{padding-left:.26rem}.p-t-sm{padding-top:.26rem}.p-r-sm{padding-right:.26rem}.p-b-sm{padding-bottom:.26rem}.p-lr-sm{padding-left:.26rem;padding-right:.26rem}.p-tb-sm{padding-top:.26rem;padding-bottom:.26rem}.p-lg{padding:.624rem}.p-l-lg{padding-left:.624rem}.p-t-lg{padding-top:.624rem}.p-r-lg{padding-right:.624rem}.p-b-lg{padding-bottom:.624rem}.p-lr-lg{padding-left:.624rem;padding-right:.624rem}.p-tb-lg{padding-top:.624rem;padding-bottom:.624rem}.text-muted{color:#999}.text-black{color:#000}.text-light{color:#fff}.text-primary,.btn-ghost.btn-primary{color:#1d6fb8}a.text-primary:hover{color:#0f3a60}.text-success,.btn-ghost.btn-success{color:#25ae88}a.text-success:hover{color:#135a46}.text-info,.btn-ghost.btn-info{color:#4fcbf0}a.text-info:hover{color:#119ec8}.text-warning,.btn-ghost.btn-warning{color:#f97d22}a.text-warning:hover{color:#b04d05}.text-danger,.btn-ghost.btn-danger{color:#fd7b6d}a.text-danger:hover{color:#fc2008}.bg-black{background-color:#000}.bg-light{background-color:#fff}.bg-gray-light{background-color:#999}.bg-gray-lighter{background-color:#eee}.bg-primary{color:#fff;background-color:#1d6fb8}a.bg-primary:hover{background-color:#0f3a60}.bg-muted{background:#eee}.bg-success{color:#fff;background-color:#25ae88}a.bg-success:hover{background-color:#135a46}.bg-info{color:#fff;background-color:#4fcbf0}a.bg-info:hover{background-color:#119ec8}.bg-warning{color:#fff;background-color:#f97d22}a.bg-warning:hover{background-color:#b04d05}.bg-danger{color:#fff;background-color:#fd7b6d}a.bg-danger:hover{background-color:#fc2008}.head{position:relative;height:.8rem;line-height:.8rem;color:#fff;background:#1d6fb8;z-index:99}.head .title{position:absolute;z-index:0;bottom:0;left:0;width:100%;overflow:hidden;font-size:1.2em;text-align:center;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;padding:0 13%}.head .btn{position:relative;z-index:1;height:.8rem;line-height:inherit;min-width:initial;padding:0 .5em;border:0;background:none;box-shadow:none;vertical-align:top;color:inherit}.head .ion{font-size:1.3em;margin:0;vertical-align:middle}.head .ion img{width:1.3em;vertical-align:middle}.head .btn:last-child{position:absolute;left:auto;right:0}.head .item-input-inset{background:none;border-bottom:0;padding:.5em 4em .5em 0;font-size:.7em;color:inherit;border:0;margin-right:-13%}.head .item-input-inset .btn:last-child{margin:0;padding:0 .7em;z-index:9}.foot{position:relative;background:#fff;overflow:hidden;z-index:9;font-size:0.9em}.tabs{overflow:visible;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal}.tabs .tab-item{position:relative;font-weight:400;text-align:center;white-space:nowrap;text-decoration:none;text-overflow:ellipsis;color:inherit;color:#999;box-sizing:border-box;padding:.5em 0;-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden}.tabs .tab-item.cur{opacity:1;color:#1d6fb8}.tabs .tab-item .ion{font-size:1.5em;margin:0 .2em}.tabs .tab-item .ion img{height:1.2em;vertical-align:bottom;margin-bottom:.1em}.tabs-ion-top{padding-top:.2em}.tabs-ion-top .tab-item{padding:0}.tabs-ion-top .tab-item .ion{font-size:2.2em;vertical-align:top;margin:0;line-height:1.2}.tabs-ion-top .tab-item .badge{position:absolute;right:0;top:-0.2em;font-size:.8em}.tabs-text .tab-item{padding:1em 0;background:#fff}img[data-src],img[data-remote]{min-height:5em;width:100%}img[data-remote]{background:url(../res/img/prog.gif) center no-repeat #fff;background-size:auto 50%}.listPlaceholder{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;background:#eee}.listPlaceholder ._container{width:80%;text-align:center;line-height:1.5;margin-top:-15%}.listPlaceholder ._icon{color:#999;height:2.5em;border-bottom:2px solid #dadada;margin-bottom:2.5em}.listPlaceholder ._icon .ion{font-size:3.5em;background:#eee}.listPlaceholder ._title{font-size:1.2em}.listPlaceholder ._text{margin-bottom:1em}.listPlaceholder ._bar{position:absolute;left:0;bottom:1em;width:100%;text-align:center;color:#666}.listPlaceholder ._bar a[href]{color:#e70014;text-decoration:underline}.onKeyboard{overflow:hidden !important}.block-holder{background:#eee !important;color:#eee !important}img.block-holder{opacity:0}.picControl{padding:.8em 0 0 .8em;overflow:hidden}.picControl.bordered{background:none;border:2px dashed #dadada}.picControl ._pic{position:relative;float:left;width:4em;height:4em;line-height:4em;text-align:center;margin:0 .8em .8em 0}.picControl ._pic img{max-height:100%}.picControl ._pic ._del{position:absolute;width:1.44em;height:1.44em;background:#e70014;right:-0.72em;top:-0.72em;border-radius:50%;color:#fff;text-align:center;line-height:1.44em}.picControl ._pic ._del .ion{margin:0}.picControl ._pic ._state{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);color:#fff;font-size:.8em;white-space:nowrap}.picControl ._adder{float:left;width:4em;height:4em;background:url(../res/img/add.png) no-repeat;background-size:contain;cursor:pointer;margin:0 .8em .8em 0} \ No newline at end of file +/* +* name: ui.less +* version: v1.0.0 +* update: build +* date: 2017-07-13 +*/ +/*图标字体*/ +@font-face { + font-family: 'iconfont'; + src: url('font/iconfont.ttf') format('truetype'), url('font/iconfont.svg#iconfont') format('svg'); +} +.ion { + font-family: 'iconfont' !important; + font-size: 1.1em; + font-style: normal; + display: inline-block; + color: inherit; + -webkit-font-smoothing: antialiased; +} +/* reset */ +::-webkit-scrollbar { + display: none; +} +html { + -webkit-user-select: none; + user-select: none; + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -webkit-user-drag: none; + -webkit-tap-highlight-color: transparent; +} +html, +body { + height: 100%; +} +html { + font-size: 15.625vw; +} +body { + width: 100%; + line-height: 1.7; + font-size: 0.26rem; + position: relative; + background: #f5f5f5; + overflow-x: hidden; + overflow-y: auto; + color: #333333; +} +body, +h1, +h2, +h3, +h4, +p, +ul, +ol, +dd, +dl, +form { + margin: 0; +} +img { + max-width: 100%; + height: auto; + vertical-align: top; + border: 0 ; +} +ul { + padding-left: 0; + list-style-type: none; +} +i, +em { + font-style: normal; +} +big { + font-size: 0.338rem; +} +small { + font-size: 0.2002rem; +} +a { + color: inherit; + text-decoration: none; +} +article, +aside, +dialog, +footer, +header, +section, +nav, +figure, +menu, +audio, +canvas, +progress, +video { + display: block; +} +input, +select, +button, +a, +textarea { + outline: 0; + margin: 0; + font-size: 100%; + border: 0; +} +table { + border-spacing: 0; + border-collapse: collapse; + background-color: transparent; +} +td, +th { + padding: 0; +} +/* + * grid + */ +.row { + display: block; + width: 102%; + transition: 0.2s width ease; + *zoom: 1; +} +.row:before, +.row:after { + display: table; + clear: both; + content: ''; +} +.row > [class*="span-"] { + float: left; + margin-right: 2%; + *margin-right: 1.89%; +} +.row > .span-1 { + width: 6.33333333%; +} +.row > .span-2 { + width: 14.66666667%; +} +.row > .span-3 { + width: 23%; +} +.row > .span-4 { + width: 31.33333333%; +} +.row > .span-5 { + width: 39.66666667%; +} +.row > .span-6 { + width: 48%; +} +.row > .span-7 { + width: 56.33333333%; +} +.row > .span-8 { + width: 64.66666667%; +} +.row > .span-9 { + width: 73%; +} +.row > .span-10 { + width: 81.33333333%; +} +.row > .span-11 { + width: 89.66666667%; +} +.row > .span-12 { + width: 98%; +} +.full-row { + width: 100%; + transition: 0.2s width ease; + *zoom: 1; +} +.full-row:before, +.full-row:after { + display: table; + clear: both; + content: ''; +} +.full-row > [class*='span'] { + float: left; +} +.full-row > .span-1 { + width: 8.33333333%; + *width: 8.22333333%; +} +.full-row > .span-2 { + width: 16.66666667%; + *width: 16.55666667%; +} +.full-row > .span-3 { + width: 25%; + *width: 24.89%; +} +.full-row > .span-4 { + width: 33.33333333%; + *width: 33.22333333%; +} +.full-row > .span-5 { + width: 41.66666667%; + *width: 41.55666667%; +} +.full-row > .span-6 { + width: 50%; + *width: 49.89%; +} +.full-row > .span-7 { + width: 58.33333333%; + *width: 58.22333333%; +} +.full-row > .span-8 { + width: 66.66666667%; + *width: 66.55666667%; +} +.full-row > .span-9 { + width: 75%; + *width: 74.89%; +} +.full-row > .span-10 { + width: 83.33333333%; + *width: 83.22333333%; +} +.full-row > .span-11 { + width: 91.66666667%; + *width: 91.55666667%; +} +.full-row > .span-12 { + width: 100%; + *width: 99.89%; +} +.row > .pull-right, +.full-row > .pull-right { + float: right; +} +.row > .center { + position: relative; + left: -1%; + display: block; + float: none; + clear: both; + margin-right: auto; + margin-left: auto; +} +.full-row > .center { + display: block; + float: none; + clear: both; + margin-right: auto; + margin-left: auto; +} +.pull-left-1 { + position: relative; + left: -8.33333333%; +} +.pull-left-2 { + position: relative; + left: -16.66666667%; +} +.pull-left-3 { + position: relative; + left: -25%; +} +.pull-left-4 { + position: relative; + left: -33.33333333%; +} +.pull-left-5 { + position: relative; + left: -41.66666667%; +} +.pull-left-6 { + position: relative; + left: -50%; +} +.pull-left-7 { + position: relative; + left: -58.33333333%; +} +.pull-left-8 { + position: relative; + left: -66.66666667%; +} +.pull-left-9 { + position: relative; + left: -75%; +} +.pull-left-10 { + position: relative; + left: -83.33333333%; +} +.pull-left-11 { + position: relative; + left: -91.66666667%; +} +.pull-left-12 { + position: relative; + left: -100%; +} +.pull-right-1 { + position: relative; + left: 8.33333333%; +} +.pull-right-2 { + position: relative; + left: 16.66666667%; +} +.pull-right-3 { + position: relative; + left: 25%; +} +.pull-right-4 { + position: relative; + left: 33.33333333%; +} +.pull-right-5 { + position: relative; + left: 41.66666667%; +} +.pull-right-6 { + position: relative; + left: 50%; +} +.pull-right-7 { + position: relative; + left: 58.33333333%; +} +.pull-right-8 { + position: relative; + left: 66.66666667%; +} +.pull-right-9 { + position: relative; + left: 75%; +} +.pull-right-10 { + position: relative; + left: 83.33333333%; +} +.pull-right-11 { + position: relative; + left: 91.66666667%; +} +.pull-right-12 { + position: relative; + left: 100%; +} +/** + * Button + * -------------------------------------------------- + */ +.btn { + position: relative; + overflow: hidden; + font-size: 0.26rem; + font-weight: normal; + line-height: 0.65rem; + height: 0.65rem; + display: inline-block; + margin-bottom: 0; + cursor: pointer; + box-sizing: border-box; + touch-action: manipulation; + min-width: 4em; + border-radius: 0.1rem; + user-select: none; + text-align: center; + vertical-align: middle; + white-space: nowrap; + border: 0; + padding: 0 1em; +} +.btn > .ion { + vertical-align: middle; + font-size: 1.1em; +} +.btn:active, +.btn.active { + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn { + cursor: not-allowed; + pointer-events: none; + opacity: 0.65; + -webkit-box-shadow: none; + box-shadow: none; + filter: alpha(opacity=65); +} +.btn-default { + color: #333333; + border-color: #dadada; + background-color: #eeeeee; +} +.btn-default:active, +.btn-default.active { + color: #fff; + border-color: #eeeeee; + background-color: #999999; +} +.btn-default.disabled, +.btn-default[disabled], +fieldset[disabled] .btn-default, +.btn-default.disabled:active, +.btn-default[disabled]:active, +fieldset[disabled] .btn-default:active, +.btn-default.disabled.active, +.btn-default[disabled].active, +fieldset[disabled] .btn-default.active { + border-color: #dadada; + background-color: #fff; +} +.btn-primary { + color: #fff; + background-color: #1d6fb8; +} +.btn-primary:active, +.btn-primary.active { + color: #fff !important; + border-color: #0f3a60; + background-color: #0f3a60; +} +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + border-color: #1d6fb8; + background-color: #1d6fb8; +} +.btn-success { + color: #fff; + background-color: #25ae88; +} +.btn-success:active, +.btn-success.active { + color: #fff !important; + border-color: #135a46; + background-color: #135a46; +} +.btn-success.disabled, +.btn-success[disabled], +fieldset[disabled] .btn-success, +.btn-success.disabled:active, +.btn-success[disabled]:active, +fieldset[disabled] .btn-success:active, +.btn-success.disabled.active, +.btn-success[disabled].active, +fieldset[disabled] .btn-success.active { + border-color: #25ae88; + background-color: #25ae88; +} +.btn-info { + color: #fff; + background-color: #4fcbf0; +} +.btn-info:active, +.btn-info.active { + color: #fff !important; + border-color: #119ec8; + background-color: #119ec8; +} +.btn-info.disabled, +.btn-info[disabled], +fieldset[disabled] .btn-info, +.btn-info.disabled:active, +.btn-info[disabled]:active, +fieldset[disabled] .btn-info:active, +.btn-info.disabled.active, +.btn-info[disabled].active, +fieldset[disabled] .btn-info.active { + border-color: #4fcbf0; + background-color: #4fcbf0; +} +.btn-warning { + color: #fff; + background-color: #f97d22; +} +.btn-warning:active, +.btn-warning.active { + color: #fff !important; + border-color: #b04d05; + background-color: #b04d05; +} +.btn-warning.disabled, +.btn-warning[disabled], +fieldset[disabled] .btn-warning, +.btn-warning.disabled:active, +.btn-warning[disabled]:active, +fieldset[disabled] .btn-warning:active, +.btn-warning.disabled.active, +.btn-warning[disabled].active, +fieldset[disabled] .btn-warning.active { + border-color: #dadada; + background-color: #f97d22; +} +.btn-danger { + color: #fff; + background-color: #fd7b6d; +} +.btn-danger:active, +.btn-danger.active { + color: #fff !important; + border-color: #fc2008; + background-color: #fc2008; +} +.btn-danger.disabled, +.btn-danger[disabled], +fieldset[disabled] .btn-danger, +.btn-danger.disabled:active, +.btn-danger[disabled]:active, +fieldset[disabled] .btn-danger:active, +.btn-danger.disabled.active, +.btn-danger[disabled].active, +fieldset[disabled] .btn-danger.active { + border-color: #fd7b6d; + background-color: #fd7b6d; +} +.btn-link { + background-color: transparent; + font-weight: normal; + color: #1d6fb8; + padding: 0; + white-space: normal; +} +.btn-link:active, +.btn-link.active, +.btn-link[disabled], +fieldset[disabled] .btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link:active, +.btn-link.active { + text-decoration: underline; + color: #0f3a60; + border-color: transparent; +} +.btn-lg { + font-size: 0.338rem; + height: 0.845rem; + line-height: 0.845rem; + min-width: 7em; +} +.btn-sm { + font-size: 0.2002rem; + height: 0.4004rem; + line-height: 0.4004rem; +} +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; +} +.btn-block + .btn-block { + margin-top: 0.13rem; +} +.btn .jon, +.form-mark .jon { + line-height: 1.2; + margin: 0; + vertical-align: baseline; +} +input[type='submit'].btn-block, +input[type='reset'].btn-block, +input[type='button'].btn-block { + width: 100%; +} +.btn-ghost { + background: none; + border-color: inherit; + border: 1px solid transparent; +} +.btn-ghost.btn-primary { + border-color: #1d6fb8; +} +.btn-ghost.btn-success { + border-color: #25ae88; +} +.btn-ghost.btn-info { + border-color: #4fcbf0; +} +.btn-ghost.btn-warning { + border-color: #f97d22; +} +.btn-ghost.btn-danger { + border-color: #fd7b6d; +} +.btn-link.btn-ghost { + padding-left: 1em; + padding-right: 1em; +} +/** + * Card + * -------------------------------------------------- + */ +.card { + overflow: hidden; + margin: 0.39rem 0.26rem; + border-radius: 0.2rem; + background-color: #fff; + border: 1px solid #dadada; + padding: 0; +} +.card .item { + padding-right: 0.26rem; + padding-left: 0.26rem; +} +.card .item:last-child { + border-bottom: 0 !important; +} +.card .item-body { + margin-top: 0; +} +@media screen and (-webkit-min-device-pixel-ratio: 2) { + .card .item:last-child:before { + display: none !important; + } +} +.card-head { + position: relative; + line-height: 2.5em; + padding: 0 1em; + border-bottom: 1px solid #dadada; +} +.card-title { + overflow: hidden; + font-weight: 700; + padding: .2em 0; + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; +} +.card-foot { + overflow: hidden; + line-height: 2.5em; + padding: 0 1em; + background-color: #eeeeee; +} +/** + * Badges + * -------------------------------------------------- + */ +.badge { + line-height: 1.2em; + display: inline-block; + margin: 0 .5em; + padding: .2em .6em; + text-align: center; + vertical-align: baseline; + white-space: nowrap; + color: #fff; + border-radius: 1.6em; + background: #999999; +} +.badge:empty { + display: none !important; +} +.badge-primary { + background: #0f3a60; +} +.badge-success { + background: #135a46; +} +.badge-info { + background: #119ec8; +} +.badge-warning { + background: #b04d05; +} +.badge-danger { + background: #fc2008; +} +/** + * Lists + * -------------------------------------------------- + */ +.list { + position: relative; + margin-bottom: 0.26rem; + padding: 0; + background: #fff; +} +.list:last-child { + margin-bottom: 0; +} +.list:last-child.card { + margin-bottom: 1.5em; +} +/** + * Items + * -------------------------------------------------- + */ +.item { + position: relative; + z-index: 2; + display: block; + box-sizing: border-box; + line-height: 1; + padding: 0.312rem; + border-bottom: 1px solid #dadada; + overflow: hidden; +} +.list .item:last-child { + border-bottom: 0; +} +/* active handle */ +.active-handle { + position: absolute; + width: 400px; + height: 400px; + border-radius: 200px; + background: #999999; + z-index: 0; + transform: scale(0); + -webkit-transform: scale(0); + opacity: .5; + transition: all ease-out 0.5s; + -webkit-transition: all ease-out 0.5s; +} +.active .active-handle { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 0; +} +@media screen and (-webkit-min-device-pixel-ratio: 2) { + .item { + border-bottom: 0; + } + .item:before { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 1px; + content: ''; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + background-color: #dadada; + z-index: 99; + } + .list .item:last-child:before { + display: none; + } +} +.item.item-lite { + padding: 0.208rem; +} +.item:empty { + display: none; +} +.item h2 { + line-height: 1.7; + font-size: 1.2em; + font-weight: normal; + margin: 0 0 .3em 0; + color: #333333; +} +.item h3 { + line-height: 1.7; + font-size: 1.1em; + font-weight: normal; + margin: 0 0 .3em 0; + color: #333333; +} +.item p { + margin-bottom: .3em; + opacity: .9; + line-height: 1.5; +} +.item.item-lite p { + margin-bottom: 0; +} +.item h1:last-child, +.item h2:last-child, +.item h3:last-child, +.item h4:last-child, +.item h5:last-child, +.item h6:last-child, +.item p:last-child { + margin-bottom: 0; +} +.item h1, +.item h2, +.item h3, +.item h4, +.item h5, +.item h6, +.item p { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.item-divider { + font-weight: 500; + margin: -1px 0 0 !important; + color: #222222; + background-color: #eeeeee; +} +.item-note { + position: absolute; + right: 0; + top: 0; + color: #999999; + font-size: .9em; + height: 100%; + padding-right: 0.26rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +input.item-note, +input.item-note[readonly] { + text-align: right; + color: #555555; +} +/** + * Item Icons + * -------------------------------------------------- + */ +.item-icon-left > .ion:first-child, +.item-icon-right > .ion:last-child { + font-size: 1.3em; + position: absolute; + z-index: 9; + height: 100%; + top: 0; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.item-icon-left, +.item-icon-left.item-lite { + padding-left: 0.78rem; +} +.item-icon-left > .ion:first-child { + left: 0.26rem; + color: #1d6fb8; +} +.item-icon-right, +.item-icon-right.item-lite { + padding-right: 0.78rem; +} +.item-icon-right > .ion:last-child { + right: 0.26rem; + color: #999999; +} +.item-icon-right .item-note { + right: 0.52rem; +} +.item-icon-left.item-icon-right > .ion:first-child { + right: auto; +} +.item-icon-left.item-icon-right > .ion:last-child { + left: auto; +} +.item-icon-left .ion img { + width: 1.1em; + vertical-align: middle; +} +/** + * Item Button + * -------------------------------------------------- + */ +.item-button-left { + padding-left: 5em; +} +.item-button-left > .btn { + position: absolute; + top: .6em; + left: .8em; + display: -webkit-box; + display: -webkit-flex; + display: flex; + min-width: 2.8em; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.item-button-right { + padding-right: 5em; +} +.item-button-right > .btn { + position: absolute; + top: 50%; + margin-top: -0.325rem; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: display: flex; + min-width: 2.8em; + max-width: 5em; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.item-button-right > .btn .ion:before { + line-height: 2.5em; + position: relative; + left: auto; + width: auto; +} +/** + * Item Other + * -------------------------------------------------- + */ +.item-avatar { + min-height: 5.5em; + padding-left: 6em; +} +.item-avatar > img:first-child, +.item-avatar .item-image { + position: absolute; + top: 50%; + left: 1em; + width: 4em; + height: 4em; + border-radius: 50%; + overflow: hidden; + margin-top: -2em; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); +} +.item-avatar-right { + min-height: 5em; + padding-right: 5em; +} +.item-avatar-right > img:first-child, +.item-avatar-right .item-image { + position: absolute; + top: 50%; + right: 1em; + width: 4em; + height: 4em; + border-radius: 50%; + overflow: hidden; + margin-top: -2em; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); +} +.item-thumbnail { + min-height: 5em; + padding-top: .5em; + padding-bottom: .5em; + padding-left: 6em; +} +.item-thumbnail > img:first-child, +.item-thumbnail .item-image { + position: absolute; + top: .5em; + left: .5em; + width: 5em; + height: 3.75em; +} +.item-thumbnail-right { + min-height: 8em; + padding-top: .6em; + padding-right: 8em; +} +.item-thumbnail-right > img:first-child, +.item-thumbnail-right .item-image { + position: absolute; + top: .5em; + right: .5em; + width: 5em; + height: 3.75em; +} +.item-image { + padding: 0; + text-align: center; +} +.item-image img { + width: 100%; + height: 100%; +} +.item-body { + white-space: normal; + text-overflow: inherit; + margin-top: .5em; + color: #555555; +} +.item-body h1, +.item-body h2, +.item-body h3, +.item-body h4, +.item-body h5, +.item-body h6, +.item-body p { + white-space: normal; +} +.item .badge + .badge { + margin-left: .4em; +} +.item-badge .badge { + position: absolute; + top: 0.26rem; + right: 0.208rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; +} +.item.item-icon-right .badge { + right: 0.624rem; +} +.item.item-divider .badge { + top: .64em; +} +.item.item-avatar .item-image .badge { + top: -0.5em; + right: -0.5em; +} +.item.item-button-right .badge { + right: 5em; +} +/** + * Form + * -------------------------------------------------- + */ +.item-input { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: flex; + overflow: hidden; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.item-input input, +.item-input textarea { + margin: 0; + margin-right: 1em; + border-radius: 0; + -webkit-box-flex: 1; + -webkit-flex: 1; + flex: 1; + width: 100%; + -webkit-appearance: none; + appearance: none; + background-color: transparent; +} +.item-input input:last-child, +.item-input textarea:last-child { + margin-right: 0; +} +.item-input .btn .ion { + font-size: 1.3em; + position: static; + display: inline-block; + height: auto; + text-align: center; + -webkit-box-flex: 0; + -webkit-flex: 0 0 2em; + flex: 0 0 2em; +} +.item-input .ion { + min-width: 1em; +} +.item-input .input, +textarea { + display: block; + padding-top: 2px; + padding-left: 0; + vertical-align: middle; + color: inherit; + box-sizing: border-box; +} +textarea { + padding: 0; + width: 100%; +} +::-webkit-input-placeholder { + color: #aaa; +} +input[type='radio'], +input[type='checkbox'] { + line-height: normal; + margin: 0; +} +.item-input input[type='file'], +.item-input input[type='image'], +.item-input input[type='submit'], +.item-input input[type='reset'], +.item-input input[type='button'], +.item-input input[type='radio'], +.item-input input[type='checkbox'] { + width: auto; +} +input[type='file'] { + line-height: 2em; +} +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +textarea[readonly], +select[readonly] { + cursor: not-allowed; + color: #aaa; +} +input[type='radio'][disabled], +input[type='checkbox'][disabled], +input[type='radio'][readonly], +input[type='checkbox'][readonly] { + background-color: transparent; +} +.input-label { + display: table; + margin-right: .5em; + max-width: 50%; +} +.item-stacked-label { + display: block; + box-shadow: none; + padding: 0.26rem; +} +.item-stacked-label .input-label, +.item-stacked-label .ion { + display: inline-block; + padding: .3em 0 0 0; + vertical-align: middle; +} +.item-stacked-label input, +.item-stacked-label textarea { + padding: 0; + border: 0; + -webkit-border-radius: .1em; + border-radius: .1em; + margin-top: .5em; + overflow: hidden; +} +/** + * Checkbox + * -------------------------------------------------- + */ +.checkbox { + position: relative; + display: inline-block; + padding: .5em .5em; +} +.checkbox input { + position: relative; + display: block; + width: 1.5em; + height: 1.5em; + border: 0; + background: transparent; + -webkit-appearance: none; +} +.checkbox input:before { + border-color: #ccc; + box-sizing: border-box; + display: table; + width: 100%; + height: 100%; + content: ' '; + -webkit-transition: background-color 20ms ease-in-out; + transition: background-color 20ms ease-in-out; + border-width: 1px; + border-style: solid; + border-radius: 1.2em; + background: #fff; +} +.checkbox input:after { + position: absolute; + top: 26%; + left: 25%; + display: table; + width: .7em; + height: .4em; + content: ' '; + -webkit-transition: opacity 0.05s ease-in-out; + transition: opacity 0.05s ease-in-out; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0; + border: 1px solid #fff; + border-top: 0; + border-right: 0; +} +.checkbox input:checked:before { + border-width: 2px; + border-color: #ddd; + background: #ddd; +} +.checkbox input:disabled:before { + border-color: #ddd; +} +.checkbox input:disabled:checked:before { + background: #ddd; +} +.checkbox input:checked:after { + opacity: 1; +} +.item-checkbox { + padding-left: 3em !important; +} +.item-checkbox.active { + box-shadow: none; +} +.item-checkbox .checkbox { + position: absolute; + z-index: 3; + top: 50%; + right: .5em; + left: .5em; + margin-top: -1.2em; +} +.item-checkbox.item-checkbox-right { + padding-right: 5em; + padding-left: 1.2em; +} +.item-checkbox-right .checkbox input { + float: right; +} +.checkbox-primary input:checked:before { + border-color: #1d6fb8; + background: #1d6fb8; +} +.checkbox-success input:checked:before { + border-color: #25ae88; + background: #25ae88; +} +.checkbox-info input:checked:before { + border-color: #4fcbf0; + background: #4fcbf0; +} +.checkbox-warning input:checked:before { + border-color: #f97d22; + background: #f97d22; +} +.checkbox-danger input:checked:before { + border-color: #fd7b6d; + background: #fd7b6d; +} +/** + * Radio Button Inputs + * -------------------------------------------------- + */ +.item-radio input { + position: relative; + display: inline-block; + width: 1.5em; + height: 1.5em; + border: 0; + background: transparent; + -webkit-appearance: none; + vertical-align: middle; +} +.item-radio input:before { + border-color: #ccc; + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + content: ' '; + -webkit-transition: background-color 20ms ease-in-out; + transition: background-color 20ms ease-in-out; + border-width: 1px; + border-style: solid; + border-radius: 50%; + background: #fff; +} +.item-radio input:after { + position: absolute; + top: 20%; + left: 20%; + width: 60%; + height: 60%; + content: ' '; + background: #777; + -webkit-transition: opacity 0.05s ease-in-out; + transition: opacity 0.05s ease-in-out; + opacity: 0; + border-radius: 50%; + overflow: hidden; +} +.item-radio input:checked:before { + border-color: #ddd; + background: #ddd; + border-width: 2px; +} +.item-radio input:checked:after { + opacity: 1; +} +.radio-primary input:checked:before { + border-color: #1d6fb8; +} +.radio-success input:checked:before { + border-color: #25ae88; +} +.radio-info input:checked:before { + border-color: #4fcbf0; +} +.radio-warning input:checked:before { + border-color: #f97d22; +} +.radio-danger input:checked:before { + border-color: #fd7b6d; +} +.radio-primary input:checked:after { + background: #1d6fb8; +} +.radio-success input:checked:after { + background: #25ae88; +} +.radio-info input:checked:after { + background: #4fcbf0; +} +.radio-warning input:checked:after { + background: #f97d22; +} +.radio-danger input:checked:after { + background: #fd7b6d; +} +/** + * Toggle/toggle-small + * -------------------------------------------------- + */ +.item-toggle { + pointer-events: none; +} +.toggle { + position: relative; + display: inline-block; + pointer-events: auto; +} +.toggle input:checked + .track { + border-color: #ddd; + background-color: #ddd; +} +.toggle input { + display: none; +} +.toggle .track { + display: inline-block; + box-sizing: border-box; + width: 1.04rem; + height: 0.416rem; + content: ' '; + margin: 0.052rem 0 0; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: background-color, border; + transition-property: background-color, border; + pointer-events: none; + border: solid 2px #dadada; + border-radius: 1.2em; + background-color: #fff; +} +.toggle .handle { + position: absolute; + top: 0; + left: 0; + display: block; + width: 0.52rem; + height: 0.52rem; + -webkit-transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1); + transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1); + -webkit-transition-property: background-color, -webkit-transform; + transition-property: background-color, transform; + border-radius: 0.26rem; + background-color: #fff; + box-shadow: 0 2px 0.56em rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); +} +.toggle .handle:before { + position: absolute; + top: -0.32em; + left: -1.8em; + padding: 1.5em 2.4em; + content: ' '; +} +.toggle input:checked + .track .handle { + -webkit-transform: translate3d(0.52rem, 0, 0); + transform: translate3d(0.52rem, 0, 0); + background-color: #fff; +} +.item-toggle.active { + box-shadow: none; +} +.item-toggle { + padding-right: 4em; +} +.item-toggle .toggle { + position: absolute; + z-index: 3; + top: 0.16rem; + right: 0.26rem; +} +.toggle input:disabled + .track { + opacity: 0.6; +} +.item-toggle .toggle-small { + top: 1.28em; +} +.toggle-small .track { + width: 2.72em; + height: 4.4em; + border: 0; + background: #9e9e9e; +} +.toggle-small .handle { + top: 2px; + left: .32em; + width: 1.28em; + height: 1.28em; + box-shadow: 0 2px 0.4em rgba(0, 0, 0, 0.25); +} +.toggle-small input:checked + .track .handle { + -webkit-transform: translate3d(1.28em, 0, 0); + transform: translate3d(1.28em, 0, 0); +} +.toggle-primary input:checked + .track { + border-color: #1d6fb8; + background-color: #1d6fb8; +} +.toggle-success input:checked + .track { + border-color: #25ae88; + background-color: #25ae88; +} +.toggle-info input:checked + .track { + border-color: #4fcbf0; + background-color: #4fcbf0; +} +.toggle-warning input:checked + .track { + border-color: #f97d22; + background-color: #f97d22; +} +.toggle-danger input:checked + .track { + border-color: #fd7b6d; + background-color: #fd7b6d; +} +/** + * Range + * -------------------------------------------------- + */ +.range input { + display: block; + overflow: hidden; + width: auto; + height: 3em; + margin-top: .4em; + margin-bottom: .4em; + padding-right: 2px; + padding-left: 1px; + outline: none; + margin-right: .8em; + margin-left: .8em; + -webkit-box-flex: 1; + -webkit-flex: 1; + flex: 1; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ccc), color-stop(100%, #ccc)); + background: -webkit-linear-gradient(left, #ccc 0%, #ccc 100%); + background: linear-gradient(to right, #ccc 0%, #ccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: 99% 2px; + -webkit-appearance: none; +} +.range input::-webkit-slider-thumb { + position: relative; + width: 2.5em; + height: 2.5em; + border: 0; + border-radius: 50%; + background-color: #fff; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 0.4em rgba(0, 0, 0, 0.2); + -webkit-appearance: none; +} +.range input::-webkit-slider-thumb:before { + position: absolute; + top: 1.25em; + left: -2001px; + width: 2000px; + height: 2px; + content: ' '; + background: #444; +} +.range input::-webkit-slider-thumb:after { + position: absolute; + top: -4em; + left: -4em; + padding: 2.4em; + content: ' '; +} +.range { + display: -webkit-box; + display: -webkit-flex; + display: flex; + padding: 2px 1em; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.range .ion { + font-size: 1.8em; + display: block; + text-align: center; + -webkit-box-flex: 0; + -webkit-flex: 0; + flex: 0; +} +.range-label { + display: block; + white-space: nowrap; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + flex: 0 0 auto; +} +.range-label:first-child { + padding-left: .4em; +} +.range input + .range-label { + padding-right: .4em; + padding-left: 0; +} +/* + * Select + */ +.item-select { + position: relative; +} +.item-select select { + -webkit-appearance: none; + appearance: none; + position: absolute; + top: 0; + bottom: 0; + right: 0.26rem; + padding: 0 2.4em 0 .8em; + max-width: 65%; + border: 0; + background: none; + color: #333333; + text-indent: .01px; + text-overflow: ''; + white-space: nowrap; + font-size: 1.1em; + cursor: pointer; + direction: rtl; +} +.item-select select:first-child { + position: relative; + max-width: none; + padding: 0; + float: right; +} +.item-select option { + direction: ltr; +} +.item-select:after { + position: absolute; + top: 50%; + right: 1.2em; + margin-top: -3px; + width: 0; + height: 0; + border-top: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + color: #999999; + content: ""; + pointer-events: none; +} +select[multiple], +select[size] { + height: auto; +} +.item-select .item-note { + margin-right: 1.2em; +} +/* + * flex + * -------------------------------------------------- + */ +.flex-col { + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: flex; + flex-direction: column; + -webkit-box-orient: vertical; + -webkit-flex-direction: column; +} +.flex-row { + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; +} +.flex-1 { + -webkit-box-flex: 1; + -webkit-flex: 1; + flex: 1; + min-width: 0; +} +.flex-2 { + -webkit-box-flex: 2; + -webkit-flex: 2; + flex: 2; + min-width: 0; +} +.flex-3 { + -webkit-box-flex: 3; + -webkit-flex: 3; + flex: 3; + min-width: 0; +} +.flex-4 { + -webkit-box-flex: 4; + -webkit-flex: 4; + flex: 4; + min-width: 0; +} +.align-stretch { + -webkit-box-align: stretch; + -webkit-align-items: stretch; + align-items: stretch; +} +.align-center { + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.justify-center { + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.flex-wrap { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +/* 滚动区域 */ +.scroll_cont { + position: relative; + display: block; + overflow: hidden; + overflow-y: scroll; + box-sizing: border-box; + height: 100%; + -webkit-overflow-scrolling: touch; + z-index: 1; +} +/* + * Border 1px hack + * -------------------------------------------------- + */ +.border-t { + border-top: 1px solid #dadada; +} +.border-b { + border-bottom: 1px solid #dadada; +} +@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { + .border-t, + .border-b { + position: relative; + border: 0; + } + .border-t:before, + .border-b:after { + position: absolute; + right: 0; + left: 0; + height: 1px; + content: ''; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + background-color: #dadada; + } + .border-t:before { + top: 0; + } + .border-b:after { + bottom: 0; + } +} +/* + * Tools + * -------------------------------------------------- + */ +.fix { + *zoom: 1; + *clear: both; +} +.fix:before, +.fix:after { + display: table; + clear: both; + content: ''; +} +.oh { + overflow: hidden; + *zoom: 1; +} +.l { + float: left; +} +.r { + float: right; +} +.pr { + position: relative; +} +.pa { + position: absolute; +} +.tc { + text-align: center; +} +.tl { + text-align: left; +} +.tr { + text-align: right; +} +.el { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.hide { + display: none; +} +.hidetext { + font: 0/0 a; + letter-spacing: -99px; +} +.arr { + display: inline-block; + overflow: hidden; + width: 0; + height: 0; +} +.opc0 { + opacity: 0 ; + filter: alpha(opacity=0); +} +.big { + font-size: 1.2em; +} +.small { + font-size: .8em; +} +/* + * Rect + */ +*[class*="rect-"] { + position: relative; + display: block; + width: 100%; + height: 0; + overflow: hidden; +} +*[class*="rect-"] ._full { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + *height: auto; +} +.rect-4854 { + padding-bottom: 48.54%; +} +.rect-50 { + padding-bottom: 50%; +} +.rect-5625 { + padding-bottom: 56.25%; +} +.rect-60 { + padding-bottom: 60%; +} +.rect-618 { + padding-bottom: 61.8%; +} +.rect-70 { + padding-bottom: 70%; +} +.rect-75 { + padding-bottom: 75%; +} +.rect-80 { + padding-bottom: 80%; +} +.rect-90 { + padding-bottom: 90%; +} +.rect-100 { + padding-bottom: 100%; +} +/* + * Space + * -------------------------------------------------- + */ +.m { + margin: 0.39rem; +} +.m-0 { + margin: 0; +} +.m-l { + margin-left: 0.39rem; +} +.m-t { + margin-top: 0.39rem; +} +.m-r { + margin-right: 0.39rem; +} +.m-b { + margin-bottom: 0.39rem; +} +.m-lr { + margin-left: 0.39rem; + margin-right: 0.39rem; +} +.m-tb { + margin-top: 0.39rem; + margin-bottom: 0.39rem; +} +.m-sm { + margin: 0.26rem; +} +.m-l-sm { + margin-left: 0.26rem; +} +.m-t-sm { + margin-top: 0.26rem; +} +.m-r-sm { + margin-right: 0.26rem; +} +.m-b-sm { + margin-bottom: 0.26rem; +} +.m-lr-sm { + margin-left: 0.26rem; + margin-right: 0.26rem; +} +.m-tb-sm { + margin-top: 0.26rem; + margin-bottom: 0.26rem; +} +.m-lg { + margin: 0.624rem; +} +.m-l-lg { + margin-left: 0.624rem; +} +.m-t-lg { + margin-top: 0.624rem; +} +.m-r-lg { + margin-right: 0.624rem; +} +.m-b-lg { + margin-bottom: 0.624rem; +} +.m-lr-lg { + margin-left: 0.624rem; + margin-right: 0.624rem; +} +.m-tb-lg { + margin-top: 0.624rem; + margin-bottom: 0.624rem; +} +.p { + padding: 0.39rem; +} +.p-0 { + padding: 0; +} +.p-l { + padding-left: 0.39rem; +} +.p-t { + padding-top: 0.39rem; +} +.p-r { + padding-right: 0.39rem; +} +.p-b { + padding-bottom: 0.39rem; +} +.p-lr { + padding-left: 0.39rem; + padding-right: 0.39rem; +} +.p-tb { + padding-top: 0.39rem; + padding-bottom: 0.39rem; +} +.p-sm { + padding: 0.26rem; +} +.p-l-sm { + padding-left: 0.26rem; +} +.p-t-sm { + padding-top: 0.26rem; +} +.p-r-sm { + padding-right: 0.26rem; +} +.p-b-sm { + padding-bottom: 0.26rem; +} +.p-lr-sm { + padding-left: 0.26rem; + padding-right: 0.26rem; +} +.p-tb-sm { + padding-top: 0.26rem; + padding-bottom: 0.26rem; +} +.p-lg { + padding: 0.624rem; +} +.p-l-lg { + padding-left: 0.624rem; +} +.p-t-lg { + padding-top: 0.624rem; +} +.p-r-lg { + padding-right: 0.624rem; +} +.p-b-lg { + padding-bottom: 0.624rem; +} +.p-lr-lg { + padding-left: 0.624rem; + padding-right: 0.624rem; +} +.p-tb-lg { + padding-top: 0.624rem; + padding-bottom: 0.624rem; +} +/* + * Color + * -------------------------------------------------- + */ +.text-muted { + color: #999999; +} +.text-black { + color: #000; +} +.text-light { + color: #fff; +} +.text-primary, +.btn-ghost.btn-primary { + color: #1d6fb8; +} +a.text-primary:hover { + color: #0f3a60; +} +.text-success, +.btn-ghost.btn-success { + color: #25ae88; +} +a.text-success:hover { + color: #135a46; +} +.text-info, +.btn-ghost.btn-info { + color: #4fcbf0; +} +a.text-info:hover { + color: #119ec8; +} +.text-warning, +.btn-ghost.btn-warning { + color: #f97d22; +} +a.text-warning:hover { + color: #b04d05; +} +.text-danger, +.btn-ghost.btn-danger { + color: #fd7b6d; +} +a.text-danger:hover { + color: #fc2008; +} +.bg-black { + background-color: #000; +} +.bg-light { + background-color: #fff; +} +.bg-gray-light { + background-color: #999999; +} +.bg-gray-lighter { + background-color: #eeeeee; +} +.bg-primary { + color: #fff; + background-color: #1d6fb8; +} +a.bg-primary:hover { + background-color: #0f3a60; +} +.bg-muted { + background: #eeeeee; +} +.bg-success { + color: #fff; + background-color: #25ae88; +} +a.bg-success:hover { + background-color: #135a46; +} +.bg-info { + color: #fff; + background-color: #4fcbf0; +} +a.bg-info:hover { + background-color: #119ec8; +} +.bg-warning { + color: #fff; + background-color: #f97d22; +} +a.bg-warning:hover { + background-color: #b04d05; +} +.bg-danger { + color: #fff; + background-color: #fd7b6d; +} +a.bg-danger:hover { + background-color: #fc2008; +} +/* 头部 */ +.head { + position: relative; + height: .8rem; + line-height: .8rem; + color: #fff; + background: #1d6fb8; + z-index: 99; + padding-top: 24px; +} +.head .title { + position: absolute; + z-index: 0; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + font-size: 1.2em; + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + box-sizing: border-box; + padding: 0 13%; +} +.head .btn { + position: relative; + z-index: 1; + height: .8rem; + line-height: inherit; + min-width: initial; + padding: 0 .5em; + border: 0; + background: none; + box-shadow: none; + vertical-align: top; + color: inherit; +} +.head .ion { + font-size: 1.3em; + margin: 0; + vertical-align: middle; +} +.head .ion img { + width: 1.3em; + vertical-align: middle; +} +.head .btn:last-child { + position: absolute; + left: auto; + right: 0; +} +.head .item-input-inset { + background: none; + border-bottom: 0; + padding: .5em 4em .5em 0; + font-size: .7em; + color: inherit; + border: 0; + margin-right: -13%; +} +.head .item-input-inset .btn:last-child { + margin: 0; + padding: 0 .7em; + z-index: 9; +} +/* 底部 */ +.foot { + position: relative; + background: #fff; + overflow: hidden; + z-index: 9; + font-size: 0.9em; +} +.tabs { + overflow: visible; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-orient: horizontal; +} +.tabs .tab-item { + position: relative; + font-weight: 400; + text-align: center; + white-space: nowrap; + text-decoration: none; + text-overflow: ellipsis; + color: inherit; + color: #999999; + box-sizing: border-box; + padding: .5em 0; + -webkit-box-flex: 1; + -webkit-flex: 1; + flex: 1; + overflow: hidden; +} +.tabs .tab-item.cur { + opacity: 1; + color: #1d6fb8; +} +.tabs .tab-item .ion { + font-size: 1.5em; + margin: 0 .2em; +} +.tabs .tab-item .ion img { + height: 1.2em; + vertical-align: bottom; + margin-bottom: .1em; +} +.tabs-ion-top { + padding-top: .2em; +} +.tabs-ion-top .tab-item { + padding: 0; +} +.tabs-ion-top .tab-item .ion { + font-size: 2.2em; + vertical-align: top; + margin: 0; + line-height: 1.2; +} +.tabs-ion-top .tab-item .badge { + position: absolute; + right: 0; + top: -0.2em; + font-size: .8em; +} +.tabs-text .tab-item { + padding: 1em 0; + background: #fff; +} +/*占位图片*/ +img[data-src], +img[data-remote] { + min-height: 5em; + width: 100%; +} +img[data-remote] { + background: url(../res/img/prog.gif) center no-repeat #fff; + background-size: auto 50%; +} +/*空列表页面*/ +.listPlaceholder { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + background: #eeeeee; +} +.listPlaceholder ._container { + width: 80%; + text-align: center; + line-height: 1.5; + margin-top: -15%; +} +.listPlaceholder ._icon { + color: #999999; + height: 2.5em; + border-bottom: 2px solid #dadada; + margin-bottom: 2.5em; +} +.listPlaceholder ._icon .ion { + font-size: 3.5em; + background: #eeeeee; +} +.listPlaceholder ._title { + font-size: 1.2em; +} +.listPlaceholder ._text { + margin-bottom: 1em; +} +.listPlaceholder ._bar { + position: absolute; + left: 0; + bottom: 1em; + width: 100%; + text-align: center; + color: #666; +} +.listPlaceholder ._bar a[href] { + color: #e70014; + text-decoration: underline; +} +/* 打开键盘时 */ +.onKeyboard { + overflow: hidden !important; +} +/* 占位内容块 */ +.block-holder { + background: #eeeeee !important; + color: #eeeeee !important; +} +img.block-holder { + opacity: 0; +} +/*图片上传组件*/ +.picControl { + padding: .8em 0 0 .8em; + overflow: hidden; +} +.picControl.bordered { + background: none; + border: 2px dashed #dadada; +} +.picControl ._pic { + position: relative; + float: left; + width: 4em; + height: 4em; + line-height: 4em; + text-align: center; + margin: 0 .8em .8em 0; +} +.picControl ._pic img { + max-height: 100%; +} +.picControl ._pic ._del { + position: absolute; + width: 1.44em; + height: 1.44em; + background: #e70014; + right: -0.72em; + top: -0.72em; + border-radius: 50%; + color: #fff; + text-align: center; + line-height: 1.44em; +} +.picControl ._pic ._del .ion { + margin: 0; +} +.picControl ._pic ._state { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + color: #fff; + font-size: .8em; + white-space: nowrap; +} +.picControl ._adder { + float: left; + width: 4em; + height: 4em; + background: url(../res/img/add.png) no-repeat; + background-size: contain; + cursor: pointer; + margin: 0 .8em .8em 0; +} diff --git a/sdk/ui.less b/sdk/ui.less index 67d1f90..bad11cf 100644 --- a/sdk/ui.less +++ b/sdk/ui.less @@ -84,7 +84,7 @@ td, th { padding: 0;} .row > [class*="span-"] {float: left; margin-right: @gridGutter; *margin-right: @gridGutter - 0.11%;} .generate-row(@gridColumns); .generate-row(@n, @i: 1) when (@i =< @n) { - .row > .span-@{i} { + .row > .span-@{i} { width: (@i * 100% / @n) - @gridGutter; } .generate-row(@n, (@i + 1)); @@ -96,7 +96,7 @@ td, th { padding: 0;} .full-row > [class*='span'] {float: left; } .generate-full-row(@gridColumns); .generate-full-row(@n, @i: 1) when (@i =< @n) { - .full-row > .span-@{i} { + .full-row > .span-@{i} { width: @i * 100% / @n; *width: @i * 100% / @n - 0.11%; } .generate-full-row(@n, (@i + 1)); @@ -119,8 +119,8 @@ td, th { padding: 0;} * Button * -------------------------------------------------- */ -.btn { position: relative;overflow:hidden;font-size: @font-size; font-weight: normal; line-height: @btn-base-height;height: @btn-base-height; display: inline-block; - margin-bottom: 0; cursor: pointer; box-sizing: border-box;touch-action: manipulation;min-width: 4em;border-radius: @radius; +.btn { position: relative;overflow:hidden;font-size: @font-size; font-weight: normal; line-height: @btn-base-height;height: @btn-base-height; display: inline-block; + margin-bottom: 0; cursor: pointer; box-sizing: border-box;touch-action: manipulation;min-width: 4em;border-radius: @radius; user-select: none; text-align: center; vertical-align: middle; white-space: nowrap; border: 0; padding: 0 1em; } .btn > .ion{vertical-align: middle;font-size: 1.1em;} .btn:active, .btn.active { outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);} @@ -177,7 +177,7 @@ input[type='submit'].btn-block, input[type='reset'].btn-block, input[type='butto .card .item { padding-right: @space-sm; padding-left: @space-sm;} .card .item:last-child {border-bottom: 0 !important;} .card .item-body{margin-top: 0;} -@media screen and (-webkit-min-device-pixel-ratio: 2) { +@media screen and (-webkit-min-device-pixel-ratio: 2) { .card .item:last-child:before { display: none !important; } } .card-head{ @@ -226,7 +226,7 @@ input[type='submit'].btn-block, input[type='reset'].btn-block, input[type='butto * Items * -------------------------------------------------- */ -.item { position: relative; z-index: 2; display: block; box-sizing: border-box; line-height: 1; +.item { position: relative; z-index: 2; display: block; box-sizing: border-box; line-height: 1; padding: @space-sm * 1.2; border-bottom: 1px solid @border; overflow: hidden;} .list .item:last-child{border-bottom: 0;} /* active handle */ @@ -244,7 +244,7 @@ input[type='submit'].btn-block, input[type='reset'].btn-block, input[type='butto -webkit-transition:all ease-out .5s; } .active .active-handle{transform:scale(1);-webkit-transform:scale(1);opacity: 0;} -@media screen and (-webkit-min-device-pixel-ratio: 2) { +@media screen and (-webkit-min-device-pixel-ratio: 2) { .item{border-bottom:0; } .item:before{ position: absolute; @@ -332,7 +332,7 @@ input.item-note, input.item-note[readonly]{text-align: right;color:@gray;} -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 100%; -webkit-appearance: none; appearance: none;background-color:transparent;} .item-input input:last-child,.item-input textarea:last-child{margin-right: 0;} -.item-input .btn .ion {font-size: 1.3em; position: static; display: inline-block; height: auto; text-align: center; -webkit-box-flex: 0; +.item-input .btn .ion {font-size: 1.3em; position: static; display: inline-block; height: auto; text-align: center; -webkit-box-flex: 0; -webkit-flex: 0 0 2em; flex: 0 0 2em;} .item-input .ion { min-width: 1em;} .item-input .input, textarea {display: block; padding-top: 2px; padding-left: 0; vertical-align: middle; color: inherit;box-sizing:border-box;} @@ -359,7 +359,7 @@ input[type='radio'][disabled], input[type='checkbox'][disabled], input[type='rad .checkbox input:before{border-color: #ccc;box-sizing:border-box; display: table; width: 100%; height: 100%; content: ' '; -webkit-transition: background-color 20ms ease-in-out; transition: background-color 20ms ease-in-out; border-width: 1px; border-style: solid; border-radius: 1.2em; background: @light;} .checkbox input:after{position: absolute; top: 26%; left: 25%; display: table; width: .7em; height: .4em; content: ' '; --webkit-transition: opacity 0.05s ease-in-out; transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); +-webkit-transition: opacity 0.05s ease-in-out; transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; border: 1px solid @light; border-top: 0; border-right: 0;} .checkbox input:checked:before{ border-width: 2px;border-color: #ddd; background: #ddd;} .checkbox input:disabled:before { border-color: #ddd;} @@ -400,7 +400,7 @@ transform: rotate(-45deg); opacity: 0; border: 1px solid @light; border-top: 0; * Radio Button Inputs * -------------------------------------------------- */ -.item-radio input {position: relative; display: inline-block; width: 1.5em; height: 1.5em; border: 0; background: transparent; +.item-radio input {position: relative; display: inline-block; width: 1.5em; height: 1.5em; border: 0; background: transparent; -webkit-appearance: none;vertical-align: middle;} .item-radio input:before{ border-color: #ccc;box-sizing:border-box; display: block; width: 100%; height: 100%; content: ' '; -webkit-transition: background-color 20ms ease-in-out; transition: background-color 20ms ease-in-out; border-width: 1px; @@ -549,7 +549,7 @@ select[multiple],select[size]{height:auto} .border-t {border-top: 1px solid @border;} .border-b { border-bottom: 1px solid @border;} -@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) { +@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) { .border-t,.border-b{position: relative;border:0;} .border-t:before,.border-b:after{ position: absolute; @@ -582,7 +582,7 @@ select[multiple],select[size]{height:auto} .opc0 { opacity: 0 ; filter: alpha(opacity=0);} .big{font-size:1.2em;} .small{font-size:.8em;} -/* +/* * Rect */ *[class*="rect-"]{position: relative;display: block; width: 100%;height: 0;overflow: hidden;} @@ -745,8 +745,8 @@ a.bg-danger:hover{ background-color: @danger-dark; } /* 头部 */ -.head { position: relative; height: .8rem;line-height: .8rem; color: @light; background: @primary;z-index: 99;} -.head .title { position: absolute; z-index: 0;bottom: 0; left: 0; width:100%; overflow: hidden;font-size: 1.2em; +.head { position: relative; height: .8rem;line-height: .8rem; color: @light; background: @primary;z-index: 99;padding-top:24px;} +.head .title { position: absolute; z-index: 0;bottom: 0; left: 0; width:100%; overflow: hidden;font-size: 1.2em; text-align: center; white-space: nowrap; text-overflow: ellipsis;box-sizing: border-box;padding:0 13%;} .head .btn { position: relative; z-index: 1; height: .8rem;line-height: inherit; min-width: initial; padding: 0 .5em; border:0;background: none;box-shadow: none; vertical-align: top;color:inherit; } @@ -757,7 +757,7 @@ border:0;background: none;box-shadow: none; vertical-align: top;color:inherit; } .head .item-input-inset .btn:last-child {margin:0;padding:0 .7em;z-index: 9;} /* 底部 */ .foot { position: relative; background:@light;overflow:hidden;z-index: 9; font-size: 0.9em; } -.tabs {overflow: visible; display: -webkit-box; display: -webkit-flex; display: flex; +.tabs {overflow: visible; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; } .tabs .tab-item {position: relative; font-weight: 400; text-align: center; white-space: nowrap; text-decoration: none; text-overflow: ellipsis; color: inherit;color:@gray-light;box-sizing:border-box;padding:.5em 0;-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;overflow: hidden;} diff --git a/view/demo/img-view/temp.html b/view/demo/img-view/temp.html index 951f8b3..dc106cf 100644 --- a/view/demo/img-view/temp.html +++ b/view/demo/img-view/temp.html @@ -19,13 +19,13 @@
- +
- +
- +
diff --git a/view/demo/index/script.js b/view/demo/index/script.js index 789e3cb..9a82e25 100644 --- a/view/demo/index/script.js +++ b/view/demo/index/script.js @@ -34,6 +34,9 @@ define(function(require) { set: function(){ $title.innerText = '会员中心'; $head.classList.add('member-head'); + setTimeout(function(){ + app.window.evaluate('', 'member', 'update()') + },0) } } }; diff --git a/view/demo/lazyload/temp.html b/view/demo/lazyload/temp.html index e4f8f1b..3e63fb5 100644 --- a/view/demo/lazyload/temp.html +++ b/view/demo/lazyload/temp.html @@ -34,7 +34,7 @@

Here is title!

- +

Here is title!

@@ -48,7 +48,7 @@

Here is title!

- +

Here is title!

@@ -62,7 +62,7 @@

Here is title!

- +

Here is title!

@@ -76,7 +76,7 @@

Here is title!

- +

Here is title!

@@ -90,7 +90,7 @@

Here is title!

- +

Here is title!

@@ -104,7 +104,7 @@

Here is title!

- +

Here is title!

@@ -118,7 +118,7 @@

Here is title!

- +

Here is title!

diff --git a/view/demo/slide/script.js b/view/demo/slide/script.js index 9676e6d..0c70c63 100644 --- a/view/demo/slide/script.js +++ b/view/demo/slide/script.js @@ -10,11 +10,11 @@ define(function(require) { slide({ el: '#banner', data: [{ - src: 'http://7xnt8z.com1.z0.glb.clouddn.com/view0.jpg' + src: 'http://static.refined-x.com/view0.jpg' }, { - src: 'http://7xnt8z.com1.z0.glb.clouddn.com/view1.jpg' + src: 'http://static.refined-x.com/view1.jpg' }, { - src: 'http://7xnt8z.com1.z0.glb.clouddn.com/view2.jpg' + src: 'http://static.refined-x.com/view2.jpg' }] }); diff --git a/view/member/index/script.js b/view/member/index/script.js index 3030feb..c847c1c 100644 --- a/view/member/index/script.js +++ b/view/member/index/script.js @@ -5,12 +5,10 @@ define(function(require) { var comm = require('sdk/server'); require('sdk/common'); var $ = app.util; - var userData = comm.getUser(); + //拉取个人信息 - var showUser = function(reload) { - if (reload) { - userData = comm.getUser(); - } + window.update = function(reload) { + var userData = comm.getUser(); if(userData){ if(userData.headImg){ $('#avat')[0].src = userData.headImg; @@ -18,13 +16,12 @@ define(function(require) { $('#usern')[0].innerText = (userData.nickName); $('#score')[0].innerText = (userData.nowScore); } - + }; $('#avat')[0].addEventListener('touchend',function(){ app.openView(null,'member','setPersonal'); }); - - showUser(); - - -}); \ No newline at end of file + + + +});