├── 141125 ├── index.html └── js │ ├── page │ └── index.js │ └── tool │ ├── avalon.js │ ├── domReady.js │ └── require.js ├── 150111 ├── css │ ├── detail.css │ └── user.css ├── detail.html ├── index.html ├── js │ ├── lib │ │ ├── avalon.js │ │ ├── css.js │ │ ├── domReady.js │ │ ├── mmHistory.js │ │ ├── mmRouter.js │ │ └── require.js │ └── page │ │ └── user.js ├── mine.html └── recharge.html ├── 150620 ├── JSXTransformer.js ├── demo1.html ├── demo2.html ├── demo3.html ├── demo4.html ├── demo5.html ├── demo6.html └── react.js ├── 150626 ├── JSXTransformer.js ├── demo1.html ├── demo10.html ├── demo2.html ├── demo3.html ├── demo4.html ├── demo5.html ├── demo6.html ├── demo7.html ├── demo8.html ├── demo9.html └── react.js ├── 150921 ├── JSXTransformer.js ├── Refs.html ├── forceUpdate.html ├── getDOMNode.html ├── isMounted.html ├── react.js ├── replaceProps.html ├── replaceState.html ├── setProps.html └── setState.html ├── 151031 ├── karma.conf.js ├── package.json ├── src │ └── Alert.js ├── test │ └── Alert.js └── webpack.config.js ├── 170201 ├── async-done.js ├── bach │ ├── parallel.js │ └── series.js ├── demo1.js ├── demo2.js ├── last-run.js ├── now-and-later.map.js ├── now-and-later.mapSeries.js ├── undertaker-master │ ├── index.js │ └── lib │ │ ├── get-task.js │ │ ├── helpers │ │ ├── buildTree.js │ │ ├── createExtensions.js │ │ ├── metadata.js │ │ ├── normalizeArgs.js │ │ └── validateRegistry.js │ │ ├── last-run.js │ │ ├── parallel.js │ │ ├── registry.js │ │ ├── series.js │ │ ├── set-task.js │ │ ├── task.js │ │ └── tree.js └── undertaker-registry.js ├── .gitattributes ├── .gitignore └── FrozenUI-React ├── dist └── js │ └── page │ ├── loading.js │ └── tab.js ├── loading.html ├── package.json ├── src ├── css │ ├── frozen.css │ └── reset.scss ├── img │ ├── loading_sprite.png │ ├── loading_sprite_white.png │ └── vip │ │ ├── icon_qqlevel_sprite.png │ │ └── icon_vip.png └── js │ ├── component │ ├── Loading.js │ ├── Tab.js │ ├── TabPane.js │ ├── globalEventHandler.js │ └── styleMaps.js │ └── page │ ├── loading.js │ └── tab.js ├── tab.html └── webpack.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | */**/node_modules -------------------------------------------------------------------------------- /141125/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 初玩阿瓦隆 6 | 7 | 8 | 9 | 16 |
17 | 公告 18 | 媒体报道 19 | {{more_text}} 20 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /141125/js/page/index.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | baseUrl: 'js/', //相对于index.html页面文件的地址 3 | paths:{ //这里配置的地址,都是相对于上方的baseUrl的 4 | avalon: 'tool/avalon', 5 | domReady:'tool/domReady' 6 | }, 7 | shim:{ 8 | avalon: { exports: "avalon" } 9 | } 10 | }); 11 | 12 | require(['avalon',"domReady!"], function() { 13 | var vm = avalon.define({ 14 | $id: "list", 15 | more_name: "gg", 16 | more_text: "更多公告", 17 | gg:conf.gg, 18 | bd:conf.bd, 19 | infoList:conf.gg, 20 | changeUl:function(flag){ 21 | if(flag){ 22 | vm.more_name = "gg"; 23 | vm.more_text = "更多公告"; 24 | vm.infoList = vm.gg; 25 | }else{ 26 | vm.more_name = "bd"; 27 | vm.more_text = "更多报道"; 28 | vm.infoList = vm.bd; 29 | } 30 | } 31 | }); 32 | avalon.scan(); 33 | }); 34 | 35 | -------------------------------------------------------------------------------- /141125/js/tool/domReady.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license RequireJS domReady 2.0.1 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved. 3 | * Available via the MIT or new BSD license. 4 | * see: http://github.com/requirejs/domReady for details 5 | */ 6 | /*jslint */ 7 | /*global require: false, define: false, requirejs: false, 8 | window: false, clearInterval: false, document: false, 9 | self: false, setInterval: false */ 10 | 11 | 12 | define(function () { 13 | 'use strict'; 14 | 15 | var isTop, testDiv, scrollIntervalId, 16 | isBrowser = typeof window !== "undefined" && window.document, 17 | isPageLoaded = !isBrowser, 18 | doc = isBrowser ? document : null, 19 | readyCalls = []; 20 | 21 | function runCallbacks(callbacks) { 22 | var i; 23 | for (i = 0; i < callbacks.length; i += 1) { 24 | callbacks[i](doc); 25 | } 26 | } 27 | 28 | function callReady() { 29 | var callbacks = readyCalls; 30 | 31 | if (isPageLoaded) { 32 | //Call the DOM ready callbacks 33 | if (callbacks.length) { 34 | readyCalls = []; 35 | runCallbacks(callbacks); 36 | } 37 | } 38 | } 39 | 40 | /** 41 | * Sets the page as loaded. 42 | */ 43 | function pageLoaded() { 44 | if (!isPageLoaded) { 45 | isPageLoaded = true; 46 | if (scrollIntervalId) { 47 | clearInterval(scrollIntervalId); 48 | } 49 | 50 | callReady(); 51 | } 52 | } 53 | 54 | if (isBrowser) { 55 | if (document.addEventListener) { 56 | //Standards. Hooray! Assumption here that if standards based, 57 | //it knows about DOMContentLoaded. 58 | document.addEventListener("DOMContentLoaded", pageLoaded, false); 59 | window.addEventListener("load", pageLoaded, false); 60 | } else if (window.attachEvent) { 61 | window.attachEvent("onload", pageLoaded); 62 | 63 | testDiv = document.createElement('div'); 64 | try { 65 | isTop = window.frameElement === null; 66 | } catch (e) {} 67 | 68 | //DOMContentLoaded approximation that uses a doScroll, as found by 69 | //Diego Perini: http://javascript.nwbox.com/IEContentLoaded/, 70 | //but modified by other contributors, including jdalton 71 | if (testDiv.doScroll && isTop && window.external) { 72 | scrollIntervalId = setInterval(function () { 73 | try { 74 | testDiv.doScroll(); 75 | pageLoaded(); 76 | } catch (e) {} 77 | }, 30); 78 | } 79 | } 80 | 81 | //Check if document already complete, and if so, just trigger page load 82 | //listeners. Latest webkit browsers also use "interactive", and 83 | //will fire the onDOMContentLoaded before "interactive" but not after 84 | //entering "interactive" or "complete". More details: 85 | //http://dev.w3.org/html5/spec/the-end.html#the-end 86 | //http://stackoverflow.com/questions/3665561/document-readystate-of-interactive-vs-ondomcontentloaded 87 | //Hmm, this is more complicated on further use, see "firing too early" 88 | //bug: https://github.com/requirejs/domReady/issues/1 89 | //so removing the || document.readyState === "interactive" test. 90 | //There is still a window.onload binding that should get fired if 91 | //DOMContentLoaded is missed. 92 | if (document.readyState === "complete") { 93 | pageLoaded(); 94 | } 95 | } 96 | 97 | /** START OF PUBLIC API **/ 98 | 99 | /** 100 | * Registers a callback for DOM ready. If DOM is already ready, the 101 | * callback is called immediately. 102 | * @param {Function} callback 103 | */ 104 | function domReady(callback) { 105 | if (isPageLoaded) { 106 | callback(doc); 107 | } else { 108 | readyCalls.push(callback); 109 | } 110 | return domReady; 111 | } 112 | 113 | domReady.version = '2.0.1'; 114 | 115 | /** 116 | * Loader Plugin API method 117 | */ 118 | domReady.load = function (name, req, onLoad, config) { 119 | if (config.isBuild) { 120 | onLoad(null); 121 | } else { 122 | domReady(onLoad); 123 | } 124 | }; 125 | 126 | /** END OF PUBLIC API **/ 127 | 128 | return domReady; 129 | }); 130 | -------------------------------------------------------------------------------- /141125/js/tool/require.js: -------------------------------------------------------------------------------- 1 | /* 2 | RequireJS 2.1.14 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved. 3 | Available via the MIT or new BSD license. 4 | see: http://github.com/jrburke/requirejs for details 5 | */ 6 | var requirejs,require,define; 7 | (function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;dthis.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&& 19 | (f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a= 20 | this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f); 21 | if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval", 22 | "fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b, 23 | a);this.check()}));this.errback&&q(a,"error",u(this,this.errback))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p, 24 | nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b, 25 | a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild= 26 | !0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!== 27 | e&&(!("."===k||".."===k)||1e.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)): 34 | (e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl= 35 | O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b|| 36 | (b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this); -------------------------------------------------------------------------------- /150111/css/detail.css: -------------------------------------------------------------------------------- 1 | .detail{color:red;} -------------------------------------------------------------------------------- /150111/css/user.css: -------------------------------------------------------------------------------- 1 | body,html{padding: 0;margin:0;background: #EEE;} 2 | .ms-controller{visibility: hidden;} 3 | header{height: 50px;background: white;} 4 | header>span{display:block;padding: 16px;} 5 | nav{position: absolute;left:0;margin-top:50px;width: 200px;} 6 | nav>ul>li{margin-top: 12px;} 7 | nav>ul>li>a{text-decoration: none;color:blue;} 8 | nav>ul>li>a:hover{color:red;} 9 | article{padding: 15px;margin-left:200px;min-height: 600px;background: white;} -------------------------------------------------------------------------------- /150111/detail.html: -------------------------------------------------------------------------------- 1 |
2 | 哟哟哟,这里是详情页面,{{username.name}}你好 3 |
4 | -------------------------------------------------------------------------------- /150111/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 账户中心 6 | 7 | 8 | 9 | 10 | 16 |
17 | {{username.name}}你好,欢迎来到账户中心 18 |
19 | 26 |
27 |
28 | 29 | -------------------------------------------------------------------------------- /150111/js/lib/css.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Require-CSS RequireJS css! loader plugin 3 | * 0.1.2 4 | * Guy Bedford 2013 5 | * MIT 6 | */ 7 | 8 | /* 9 | * 10 | * Usage: 11 | * require(['css!./mycssFile']); 12 | * 13 | * Tested and working in (up to latest versions as of March 2013): 14 | * Android 15 | * iOS 6 16 | * IE 6 - 10 17 | * Chome 3 - 26 18 | * Firefox 3.5 - 19 19 | * Opera 10 - 12 20 | * 21 | * browserling.com used for virtual testing environment 22 | * 23 | * Credit to B Cavalier & J Hann for the IE 6 - 9 method, 24 | * refined with help from Martin Cermak 25 | * 26 | * Sources that helped along the way: 27 | * - https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent 28 | * - http://www.phpied.com/when-is-a-stylesheet-really-loaded/ 29 | * - https://github.com/cujojs/curl/blob/master/src/curl/plugin/css.js 30 | * 31 | */ 32 | 33 | define(function() { 34 | //>>excludeStart('excludeRequireCss', pragmas.excludeRequireCss) 35 | if (typeof window == 'undefined') 36 | return { load: function(n, r, load){ load() } }; 37 | 38 | var head = document.getElementsByTagName('head')[0]; 39 | 40 | var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/) || 0; 41 | 42 | // use 11 | 12 | 13 | 14 | 15 |
16 | 31 | 32 | -------------------------------------------------------------------------------- /150620/demo3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 组件嵌套 6 | 11 | 12 | 13 | 14 | 15 |
16 | 39 | 40 | -------------------------------------------------------------------------------- /150620/demo4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 组件Props 6 | 9 | 10 | 11 | 12 | 13 |
14 | 38 | 39 | -------------------------------------------------------------------------------- /150620/demo5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | props.children 6 | 9 | 10 | 11 | 12 | 13 |
14 | 39 | 40 | -------------------------------------------------------------------------------- /150620/demo6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | state 6 | 9 | 10 | 11 | 12 | 13 |
14 | 39 | 40 | -------------------------------------------------------------------------------- /150626/demo1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentWillMount 6 | 7 | 8 | 9 | 10 |
123
11 | 40 | 41 | -------------------------------------------------------------------------------- /150626/demo10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 题目 6 | 9 | 10 | 11 | 12 | 13 | 56 | 57 | -------------------------------------------------------------------------------- /150626/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentDidMount 6 | 7 | 8 | 9 | 10 |
123
11 |
123
12 | 39 | 40 | -------------------------------------------------------------------------------- /150626/demo3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentWillReceiveProps 6 | 9 | 10 | 11 | 12 | 13 |
123
14 |
123
15 | 45 | 46 | -------------------------------------------------------------------------------- /150626/demo4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentWillReceiveProps 6 | 9 | 10 | 11 | 12 | 13 |
123
14 | 33 | 34 | -------------------------------------------------------------------------------- /150626/demo5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | shouldComponentUpdate 6 | 9 | 10 | 11 | 12 | 13 |
123
14 | 38 | 39 | -------------------------------------------------------------------------------- /150626/demo6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentWillUpdate 6 | 9 | 10 | 11 | 12 | 13 |
123
14 | 41 | 42 | -------------------------------------------------------------------------------- /150626/demo7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentDidUpdate 6 | 9 | 10 | 11 | 12 | 13 |
123
14 | 44 | 45 | -------------------------------------------------------------------------------- /150626/demo8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | componentWillUnmount 6 | 9 | 10 | 11 | 12 | 13 |
123
14 |

这里是div2,点击我会移除上面div的组件

15 | 54 | 55 | -------------------------------------------------------------------------------- /150626/demo9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | getDefaultProps 和 getInitialState 6 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 51 | 52 | -------------------------------------------------------------------------------- /150921/Refs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Refs 6 | 7 | 8 | 9 | 10 |
123
11 | 31 | 32 | -------------------------------------------------------------------------------- /150921/forceUpdate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | forceUpdate 6 | 7 | 8 | 9 | 10 |
123
11 | 45 | 46 | -------------------------------------------------------------------------------- /150921/getDOMNode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | getDOMNode 6 | 7 | 8 | 9 | 10 |
123
11 | 37 | 38 | -------------------------------------------------------------------------------- /150921/isMounted.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | isMounted 6 | 7 | 8 | 9 | 10 |
123
11 | 40 | 41 | -------------------------------------------------------------------------------- /150921/replaceProps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | replaceProps 6 | 7 | 8 | 9 | 10 |
123
11 | 32 | 33 | -------------------------------------------------------------------------------- /150921/replaceState.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | replaceState 6 | 7 | 8 | 9 | 10 |
123
11 | 37 | 38 | -------------------------------------------------------------------------------- /150921/setProps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | setProps 6 | 7 | 8 | 9 | 10 |
123
11 | 32 | 33 | -------------------------------------------------------------------------------- /150921/setState.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | setState 6 | 7 | 8 | 9 | 10 |
123
11 | 39 | 40 | -------------------------------------------------------------------------------- /151031/karma.conf.js: -------------------------------------------------------------------------------- 1 | var isCI = process.env.CONTINUOUS_INTEGRATION === 'true'; 2 | var webpackConfig = require('./webpack.config.js'); 3 | module.exports = function(config) { 4 | config.set({ 5 | 6 | basePath: '', 7 | 8 | frameworks: [ 9 | 'mocha', 'chai', 'phantomjs-shim' 10 | ], 11 | 12 | files: [ 13 | 'test/*.js' 14 | ], 15 | 16 | preprocessors: { 17 | 'test/*.js': ['webpack'] 18 | }, 19 | 20 | webpack: webpackConfig, 21 | 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | 26 | port: 9876, 27 | 28 | colors: true, 29 | 30 | autoWatch: true, 31 | 32 | browsers: ['PhantomJS', 'PhantomJS_custom'], 33 | 34 | // you can define custom flags 35 | customLaunchers: { 36 | 'PhantomJS_custom': { 37 | base: 'PhantomJS', 38 | options: { 39 | windowName: 'my-window', 40 | settings: { 41 | webSecurityEnabled: false 42 | } 43 | }, 44 | flags: ['--load-images=true'], 45 | debug: true 46 | } 47 | }, 48 | 49 | phantomjsLauncher: { 50 | // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom) 51 | exitOnResourceError: true 52 | }, 53 | 54 | singleRun: isCI 55 | }); 56 | }; -------------------------------------------------------------------------------- /151031/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "151031", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "karma start --browsers PhantomJS_custom" 8 | }, 9 | "author": "VaJoy", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-core": "^5.8.33", 13 | "babel-loader": "^5.3.3", 14 | "chai": "^3.4.0", 15 | "karma": "^0.13.14", 16 | "karma-chai": "^0.1.0", 17 | "karma-mocha": "^0.2.0", 18 | "karma-phantomjs-launcher": "^0.2.1", 19 | "karma-phantomjs-shim": "^1.1.2", 20 | "karma-webpack": "^1.7.0", 21 | "mocha": "^2.3.3", 22 | "phantomjs": "^1.9.18", 23 | "react": "^0.14.1", 24 | "react-dom": "^0.14.1", 25 | "webpack": "^1.12.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /151031/src/Alert.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by VaJoy on 2015/10/31. 3 | */ 4 | import React from 'react'; 5 | 6 | const Alert = React.createClass({ 7 | render() { 8 | return ( 9 |
10 | {this.props.children} 11 |
12 | ); 13 | } 14 | }); 15 | 16 | export default Alert; 17 | -------------------------------------------------------------------------------- /151031/test/Alert.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactTestUtils from 'react/lib/ReactTestUtils'; 3 | import Alert from '../src/Alert'; 4 | 5 | describe('Alert', () => { 6 | it('往页面插入一段带有strong标签的组件', () => { 7 | let instance = ReactTestUtils.renderIntoDocument( 8 | 9 | Message 10 | 11 | ); 12 | assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong')); 13 | }); 14 | }); -------------------------------------------------------------------------------- /151031/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | //var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); 3 | 4 | module.exports = { 5 | //插件项 6 | //plugins: [commonsPlugin], 7 | //页面入口文件配置 8 | entry: undefined, 9 | //入口文件输出配置 10 | output: { 11 | pathinfo: true 12 | }, 13 | module: { 14 | //加载器配置 15 | loaders: [ 16 | //{ test: /\.css$/, loader: 'style-loader!css-loader' }, 17 | { test: /\.js$/, loader: 'babel-loader' } 18 | //{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, 19 | //{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} 20 | ] 21 | } 22 | }; -------------------------------------------------------------------------------- /170201/async-done.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var domain = require('domain'); 4 | 5 | var eos = require('end-of-stream'); 6 | var tick = require('next-tick'); 7 | var once = require('once'); 8 | var exhaust = require('stream-exhaust'); 9 | 10 | var eosConfig = { 11 | error: false, 12 | }; 13 | 14 | function asyncDone(fn, cb) { 15 | cb = once(cb); 16 | 17 | var d = domain.create(); 18 | d.once('error', onError); 19 | var domainBoundFn = d.bind(fn); 20 | 21 | function done() { 22 | d.removeListener('error', onError); 23 | d.exit(); 24 | //执行 cb 25 | return cb.apply(null, arguments); 26 | } 27 | 28 | function onSuccess(result) { 29 | return done(null, result); 30 | } 31 | 32 | function onError(error) { 33 | return done(error); 34 | } 35 | 36 | function asyncRunner() { 37 | var result = domainBoundFn(done); 38 | 39 | function onNext(state) { 40 | onNext.state = state; 41 | } 42 | 43 | function onCompleted() { 44 | return onSuccess(onNext.state); 45 | } 46 | 47 | if (result && typeof result.on === 'function') { 48 | // result 为 Stream 时 49 | d.add(result); 50 | //消耗完毕了自动触发 done 51 | eos(exhaust(result), eosConfig, done); 52 | return; 53 | } 54 | 55 | if (result && typeof result.subscribe === 'function') { 56 | // result 为 RxJS observable 时的处理 57 | result.subscribe(onNext, onError, onCompleted); 58 | return; 59 | } 60 | 61 | if (result && typeof result.then === 'function') { 62 | // result 为 Promise 对象时的处理 63 | result.then(onSuccess, onError); 64 | return; 65 | } 66 | } 67 | 68 | tick(asyncRunner); 69 | } 70 | 71 | module.exports = asyncDone; -------------------------------------------------------------------------------- /170201/bach/parallel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | //获取数组除最后一个元素之外的所有元素,这里用来获取第一个参数(tasks数组) 3 | var initial = require('lodash.initial'); 4 | //获取数组的最后一个元素,这里用来获取最后一个参数(extension对象) 5 | var last = require('lodash.last'); 6 | //将引入的函数异步化 7 | var asyncDone = require('async-done'); 8 | var nowAndLater = require('now-and-later'); 9 | 10 | var helpers = require('./helpers'); 11 | 12 | function buildParallel() { 13 | var args = helpers.verifyArguments(arguments); //验证传入参数合法性 14 | 15 | var extensions = helpers.getExtensions(last(args)); //extension对象 16 | 17 | if (extensions) { 18 | args = initial(args); //tasks数组 19 | } 20 | 21 | function parallel(done) { 22 | //遍历tasks数组,将其生命周期和extensions属性关联起来,且将每个task异步化,且并发执行 23 | nowAndLater.map(args, asyncDone, extensions, done); 24 | } 25 | 26 | return parallel; 27 | } 28 | 29 | module.exports = buildParallel; -------------------------------------------------------------------------------- /170201/bach/series.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var initial = require('lodash.initial'); 4 | var last = require('lodash.last'); 5 | var asyncDone = require('async-done'); 6 | var nowAndLater = require('now-and-later'); 7 | 8 | var helpers = require('./helpers'); 9 | 10 | function buildSeries() { 11 | var args = helpers.verifyArguments(arguments); 12 | 13 | var extensions = helpers.getExtensions(last(args)); 14 | 15 | if (extensions) { 16 | args = initial(args); 17 | } 18 | 19 | function series(done) { 20 | //遍历tasks数组,将其生命周期和extensions属性关联起来,且将每个task异步化,且按顺序执行 21 | nowAndLater.mapSeries(args, asyncDone, extensions, done); 22 | } 23 | 24 | return series; 25 | } 26 | 27 | module.exports = buildSeries; -------------------------------------------------------------------------------- /170201/demo1.js: -------------------------------------------------------------------------------- 1 | var ad = require('async-done'); 2 | 3 | ad(function(cb){ 4 | console.log('first task starts!'); 5 | cb(null, 'first task done!') 6 | }, function(err, data){ 7 | console.log(data) 8 | }); 9 | 10 | ad(function(cb){ 11 | console.log('second task starts!'); 12 | setTimeout( cb.bind(this, null, 'second task done!'), 1000 ) 13 | 14 | }, function(err, data){ 15 | console.log(data) 16 | }); 17 | 18 | ad(function(cb){ 19 | console.log('third task starts!'); 20 | cb(null, 'third task done!') 21 | }, function(err, data){ 22 | console.log(data) 23 | }); 24 | -------------------------------------------------------------------------------- /170201/demo2.js: -------------------------------------------------------------------------------- 1 | var undertaker = require('undertaker'); 2 | ut = new undertaker(); 3 | 4 | ut.task('taskA', function(cb){console.log('A'); cb()}); 5 | ut.task('taskB', function(cb){console.log('B'); cb()}); 6 | ut.task('taskC', function(cb){console.log('C'); cb()}); 7 | ut.task('taskD', function(cb){console.log('D'); cb()}); 8 | ut.task('taskE', function(cb){console.log('E'); cb()}); 9 | 10 | ut.task('taskC', ut.series('taskA', 'taskB')); 11 | ut.task('taskE', ut.parallel('taskC', 'taskD')); 12 | 13 | var tree = ut.tree(); 14 | console.log(tree); -------------------------------------------------------------------------------- /170201/last-run.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var assert = require('assert'); 4 | 5 | var WM = require('es6-weak-map'); 6 | var hasNativeWeakMap = require('es6-weak-map/is-native-implemented'); 7 | var defaultResolution = require('default-resolution'); 8 | 9 | var runtimes = new WM(); 10 | 11 | function isFunction(fn) { 12 | return (typeof fn === 'function'); 13 | } 14 | 15 | function isExtensible(fn) { 16 | if (hasNativeWeakMap) { 17 | // 支持原生 weakmap 直接返回 18 | return true; 19 | } 20 | //平台不支持 weakmap 的话则要求 fn 是可扩展属性的对象,以确保还是能支持 es6-weak-map 21 | return Object.isExtensible(fn); 22 | } 23 | 24 | //timeResolution参数用于决定返回的时间戳后几位数字要置0 25 | function lastRun(fn, timeResolution) { 26 | assert(isFunction(fn), 'Only functions can check lastRun'); 27 | assert(isExtensible(fn), 'Only extensible functions can check lastRun'); 28 | //先获取捕获时间 29 | var time = runtimes.get(fn); 30 | 31 | if (time == null) { 32 | return; 33 | } 34 | //defaultResolution接口 - timeResolution格式处理(转十进制整数) 35 | var resolution = defaultResolution(timeResolution); 36 | 37 | //减去(time % resolution)的作用是将后n位置0 38 | return time - (time % resolution); 39 | } 40 | 41 | function capture(fn, timestamp) { 42 | assert(isFunction(fn), 'Only functions can be captured'); 43 | assert(isExtensible(fn), 'Only extensible functions can be captured'); 44 | 45 | timestamp = timestamp || Date.now(); 46 | //(在任务执行的时候)存储捕获时间信息 47 | runtimes.set(fn, timestamp); 48 | } 49 | 50 | function release(fn) { 51 | assert(isFunction(fn), 'Only functions can be captured'); 52 | assert(isExtensible(fn), 'Only extensible functions can be captured'); 53 | 54 | runtimes.delete(fn); 55 | } 56 | 57 | //绑定静态方法 58 | lastRun.capture = capture; 59 | lastRun.release = release; 60 | 61 | module.exports = lastRun; -------------------------------------------------------------------------------- /170201/now-and-later.map.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var once = require('once'); 4 | var helpers = require('./helpers'); 5 | 6 | function map(values, iterator, extensions, done) { 7 | if (typeof extensions === 'function') { 8 | done = extensions; 9 | extensions = {}; 10 | } 11 | 12 | if (typeof done !== 'function') { 13 | done = helpers.noop; //没有传入done则赋予一个空函数 14 | } 15 | 16 | //让 done 函数只执行一次 17 | done = once(done); 18 | 19 | var keys = Object.keys(values); 20 | var length = keys.length; 21 | var count = length; 22 | var idx = 0; 23 | 24 | // 初始化一个空的、和values等长的数组 25 | var results = helpers.initializeResults(values); 26 | 27 | /** 28 | * helpers.defaultExtensions(extensions) 返回如下对象: 29 | * { 30 | create: extensions.create || defaultExts.create, 31 | before: extensions.before || defaultExts.before, 32 | after: extensions.after || defaultExts.after, 33 | error: extensions.error || defaultExts.error, 34 | } 35 | */ 36 | var exts = helpers.defaultExtensions(extensions); 37 | 38 | for (idx = 0; idx < length; idx++) { 39 | var key = keys[idx]; 40 | next(key); 41 | } 42 | 43 | function next(key) { 44 | var value = values[key]; 45 | //创建一个 Storage 实例 46 | var storage = exts.create(value, key) || {}; 47 | //触发'start'事件 48 | exts.before(storage); 49 | //利用 async-done 将 taskFunction 转为异步方法并执行 50 | iterator(value, once(handler)); 51 | 52 | function handler(err, result) { 53 | if (err) { 54 | //触发'error'事件 55 | exts.error(err, storage); 56 | return done(err, results); //有任务出错,故所有任务应停止调用 57 | } 58 | //触发'stop'事件 59 | exts.after(result, storage); 60 | results[key] = result; 61 | if (--count === 0) { 62 | done(err, results); //所有任务已经调用完毕 63 | } 64 | } 65 | } 66 | } 67 | 68 | module.exports = map; -------------------------------------------------------------------------------- /170201/now-and-later.mapSeries.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var once = require('once'); 4 | 5 | var helpers = require('./helpers'); 6 | 7 | function mapSeries(values, iterator, extensions, done) { 8 | // Allow for extensions to not be specified 9 | if (typeof extensions === 'function') { 10 | done = extensions; 11 | extensions = {}; 12 | } 13 | 14 | // Handle no callback case 15 | if (typeof done !== 'function') { 16 | done = helpers.noop; //空方法 17 | } 18 | 19 | done = once(done); 20 | 21 | // Will throw if non-object 22 | var keys = Object.keys(values); 23 | var length = keys.length; 24 | var idx = 0; 25 | // Return the same type as passed in 26 | var results = helpers.initializeResults(values); 27 | 28 | var exts = helpers.defaultExtensions(extensions); 29 | 30 | var key = keys[idx]; 31 | next(key); 32 | 33 | function next(key) { 34 | var value = values[key]; 35 | 36 | var storage = exts.create(value, key) || {}; 37 | 38 | exts.before(storage); 39 | iterator(value, once(handler)); 40 | 41 | function handler(err, result) { 42 | if (err) { 43 | exts.error(err, storage); 44 | return done(err, results); //有任务出错,故所有任务应停止调用 45 | } 46 | 47 | exts.after(result, storage); 48 | results[key] = result; 49 | 50 | if (++idx >= length) { 51 | done(err, results); //全部任务已经结束了 52 | } else { 53 | next(keys[idx]); //next不在是放在外面的循环里,而是在任务的回调里 54 | } 55 | } 56 | } 57 | } 58 | 59 | module.exports = mapSeries; -------------------------------------------------------------------------------- /170201/undertaker-master/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var inherits = require('util').inherits; 4 | var EventEmitter = require('events').EventEmitter; 5 | 6 | var DefaultRegistry = require('undertaker-registry'); 7 | 8 | var tree = require('./lib/tree'); 9 | var task = require('./lib/task'); 10 | var series = require('./lib/series'); 11 | var lastRun = require('./lib/last-run'); 12 | var parallel = require('./lib/parallel'); 13 | var registry = require('./lib/registry'); 14 | var _getTask = require('./lib/get-task'); 15 | var _setTask = require('./lib/set-task'); 16 | 17 | function Undertaker(customRegistry) { 18 | EventEmitter.call(this); 19 | 20 | this._registry = new DefaultRegistry(); //寄存器实例 21 | if (customRegistry) { //支持自定义寄存器 22 | this.registry(customRegistry); 23 | } 24 | 25 | this._settle = (process.env.UNDERTAKER_SETTLE === 'true'); 26 | } 27 | 28 | inherits(Undertaker, EventEmitter); 29 | 30 | 31 | Undertaker.prototype.tree = tree; 32 | 33 | Undertaker.prototype.task = task; 34 | 35 | Undertaker.prototype.series = series; 36 | 37 | Undertaker.prototype.lastRun = lastRun; 38 | 39 | Undertaker.prototype.parallel = parallel; 40 | 41 | Undertaker.prototype.registry = registry; 42 | 43 | Undertaker.prototype._getTask = _getTask; 44 | 45 | Undertaker.prototype._setTask = _setTask; 46 | 47 | module.exports = Undertaker; 48 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/get-task.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function get(name) { 4 | return this._registry.get(name); 5 | } 6 | 7 | module.exports = get; 8 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/helpers/buildTree.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var map = require('lodash.map'); 4 | 5 | var metadata = require('./metadata'); 6 | 7 | function buildTree(tasks) { 8 | return map(tasks, function(task) { 9 | var meta = metadata.get(task); 10 | if (meta) { 11 | return meta.tree; 12 | } 13 | 14 | var name = task.displayName || task.name || ''; 15 | meta = { 16 | name: name, 17 | tree: { 18 | label: name, 19 | type: 'function', 20 | nodes: [], 21 | }, 22 | }; 23 | 24 | metadata.set(task, meta); 25 | return meta.tree; 26 | }); 27 | } 28 | 29 | module.exports = buildTree; 30 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/helpers/createExtensions.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | //https://github.com/gulpjs/last-run/blob/master/index.js 3 | var captureLastRun = require('last-run').capture; 4 | var releaseLastRun = require('last-run').release; 5 | 6 | var metadata = require('./metadata'); 7 | 8 | var uid = 0; 9 | 10 | function Storage(fn) { 11 | var meta = metadata.get(fn); 12 | 13 | this.fn = meta.orig || fn; 14 | this.uid = uid++; 15 | this.name = meta.name; 16 | this.branch = meta.branch || false; 17 | this.captureTime = Date.now(); 18 | this.startHr = []; 19 | } 20 | 21 | Storage.prototype.capture = function() { 22 | //新建一个名为runtimes的WeakMap,执行 runtimes.set(fn, captureTime); 23 | captureLastRun(this.fn, this.captureTime); 24 | }; 25 | 26 | Storage.prototype.release = function() { 27 | //从WM中释放,即执行 runtimes.delete(fn); 28 | releaseLastRun(this.fn); 29 | }; 30 | 31 | function createExtensions(ee) { 32 | return { 33 | create: function(fn) { 34 | //返回一个 Storage 实例 35 | return new Storage(fn); 36 | }, 37 | before: function(storage) { 38 | storage.startHr = process.hrtime(); 39 | //undertaker实例是一个EventEmitter 40 | ee.emit('start', { 41 | uid: storage.uid, 42 | name: storage.name, 43 | branch: storage.branch, 44 | time: Date.now(), 45 | }); 46 | }, 47 | after: function(result, storage) { 48 | if (result && result.state === 'error') { 49 | return this.error(result.value, storage); 50 | } 51 | storage.capture(); 52 | ee.emit('stop', { 53 | uid: storage.uid, 54 | name: storage.name, 55 | branch: storage.branch, 56 | duration: process.hrtime(storage.startHr), 57 | time: Date.now(), 58 | }); 59 | }, 60 | error: function(error, storage) { 61 | if (Array.isArray(error)) { 62 | error = error[0]; 63 | } 64 | storage.release(); 65 | ee.emit('error', { 66 | uid: storage.uid, 67 | name: storage.name, 68 | branch: storage.branch, 69 | error: error, 70 | duration: process.hrtime(storage.startHr), 71 | time: Date.now(), 72 | }); 73 | }, 74 | }; 75 | } 76 | 77 | module.exports = createExtensions; 78 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/helpers/metadata.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // 使用 WeakMap 来保存 metadata 4 | var WM = require('es6-weak-map'); 5 | var metadata = new WM(); 6 | 7 | module.exports = metadata; 8 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/helpers/normalizeArgs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var assert = require('assert'); 4 | 5 | var map = require('lodash.map'); 6 | var flatten = require('lodash.flatten'); 7 | 8 | function normalizeArgs(registry, args) { 9 | function getFunction(task) { 10 | if (typeof task === 'function') { 11 | return task; 12 | } 13 | 14 | var fn = registry.get(task); 15 | assert(fn, 'Task never defined: ' + task); 16 | return fn; 17 | } 18 | 19 | //使用 flatten 将参数(单个或多个task)转为扁平化数组,再遍历(map)处理,生成并返回 taskFunctions 数组 20 | return map(flatten(args), getFunction); 21 | } 22 | 23 | module.exports = normalizeArgs; 24 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/helpers/validateRegistry.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var assert = require('assert'); 4 | 5 | function isFunction(fn) { 6 | return typeof fn === 'function'; 7 | } 8 | 9 | function isConstructor(registry) { 10 | if (!(registry && registry.prototype)) { 11 | return false; 12 | } 13 | 14 | var hasProtoGet = isFunction(registry.prototype.get); 15 | var hasProtoSet = isFunction(registry.prototype.set); 16 | var hasProtoInit = isFunction(registry.prototype.init); 17 | var hasProtoTasks = isFunction(registry.prototype.tasks); 18 | 19 | if (hasProtoGet || hasProtoSet || hasProtoInit || hasProtoTasks) { 20 | return true; 21 | } 22 | 23 | return false; 24 | } 25 | 26 | function validateRegistry(registry) { 27 | try { 28 | assert(isFunction(registry.get), 'Custom registry must have `get` function'); 29 | assert(isFunction(registry.set), 'Custom registry must have `set` function'); 30 | assert(isFunction(registry.init), 'Custom registry must have `init` function'); 31 | assert(isFunction(registry.tasks), 'Custom registry must have `tasks` function'); 32 | } catch (err) { 33 | if (isConstructor(registry)) { 34 | assert(false, 'Custom registries must be instantiated, but it looks like you passed a constructor'); 35 | } else { 36 | throw err; 37 | } 38 | } 39 | } 40 | 41 | module.exports = validateRegistry; 42 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/last-run.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var retrieveLastRun = require('last-run'); 4 | 5 | var metadata = require('./helpers/metadata'); 6 | 7 | function lastRun(task, timeResolution) { 8 | if (timeResolution == null) { 9 | timeResolution = process.env.UNDERTAKER_TIME_RESOLUTION; 10 | } 11 | 12 | var fn = task; 13 | if (typeof task === 'string') { 14 | fn = this._getTask(task); 15 | } 16 | 17 | var meta = metadata.get(fn); 18 | 19 | if (meta) { 20 | fn = meta.orig || fn; 21 | } 22 | 23 | return retrieveLastRun(fn, timeResolution); 24 | } 25 | 26 | module.exports = lastRun; 27 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/parallel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var bach = require('bach'); 4 | 5 | var metadata = require('./helpers/metadata'); 6 | var buildTree = require('./helpers/buildTree'); 7 | var normalizeArgs = require('./helpers/normalizeArgs'); 8 | var createExtensions = require('./helpers/createExtensions'); 9 | 10 | //并行任务接口 11 | function parallel() { 12 | var create = this._settle ? bach.settleParallel : bach.parallel; 13 | //通过参数获取存在寄存器(registry)中的 taskFunctions(数组形式) 14 | var args = normalizeArgs(this._registry, arguments); 15 | //新增一个扩展对象,用于后续给 taskFunction 加上生命周期 16 | var extensions = createExtensions(this); 17 | //将 taskFunctions 里的每一个 taskFunction 加上生命周期,且异步化taskFunction,安排它们并发执行(调用fn的时候) 18 | var fn = create(args, extensions); 19 | 20 | fn.displayName = ''; 21 | 22 | //设置初步 metadata,方便外层 this.task 接口获取依赖关系 23 | metadata.set(fn, { 24 | name: fn.displayName, 25 | branch: true, //表示当前 task 是被依赖的(parallel)任务 26 | tree: { 27 | label: fn.displayName, 28 | type: 'function', 29 | branch: true, 30 | nodes: buildTree(args) //返回每个 task metadata.tree 的集合(数组) 31 | } 32 | }); 33 | //返回 parallel taskFunction 供外层 this.task 接口注册任务 34 | return fn; 35 | } 36 | 37 | module.exports = parallel; 38 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/registry.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var reduce = require('lodash.reduce'); 4 | 5 | var validateRegistry = require('./helpers/validateRegistry'); 6 | 7 | function setTasks(inst, task, name) { 8 | inst.set(name, task); 9 | return inst; 10 | } 11 | 12 | function registry(newRegistry) { 13 | if (!newRegistry) { 14 | return this._registry; 15 | } 16 | 17 | //验证是否有效,主要判断是否带有 .get/.set/.tasks/.init 接口,若不符合则抛出错误 18 | validateRegistry(newRegistry); 19 | 20 | var tasks = this._registry.tasks(); 21 | 22 | //将现有 tasks 拷贝到新的寄存器上 23 | this._registry = reduce(tasks, setTasks, newRegistry); 24 | //调用初始化接口(无论是否需要,寄存器务必带有一个init接口) 25 | this._registry.init(this); 26 | } 27 | 28 | module.exports = registry; 29 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/series.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var bach = require('bach'); 4 | 5 | var metadata = require('./helpers/metadata'); 6 | var buildTree = require('./helpers/buildTree'); 7 | var normalizeArgs = require('./helpers/normalizeArgs'); 8 | var createExtensions = require('./helpers/createExtensions'); 9 | 10 | function series() { 11 | var create = this._settle ? bach.settleSeries : bach.series; 12 | 13 | var args = normalizeArgs(this._registry, arguments); 14 | var extensions = createExtensions(this); 15 | var fn = create(args, extensions); 16 | 17 | fn.displayName = ''; 18 | 19 | metadata.set(fn, { 20 | name: fn.displayName, 21 | branch: true, 22 | tree: { 23 | label: fn.displayName, 24 | type: 'function', 25 | branch: true, 26 | nodes: buildTree(args), 27 | }, 28 | }); 29 | return fn; 30 | } 31 | 32 | module.exports = series; 33 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/set-task.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var assert = require('assert'); 4 | 5 | var metadata = require('./helpers/metadata'); 6 | 7 | function set(name, fn) { 8 | //参数类型判断,不合法则报错 9 | assert(name, 'Task name must be specified'); 10 | assert(typeof name === 'string', 'Task name must be a string'); 11 | assert(typeof fn === 'function', 'Task function must be specified'); 12 | 13 | //weakmap 里要求 key 对象不能被引用过,所以有必要给 fn 多加一层简单包装 14 | function taskWrapper() { 15 | return fn.apply(this, arguments); 16 | } 17 | 18 | //解除包装 19 | function unwrap() { 20 | return fn; 21 | } 22 | 23 | taskWrapper.unwrap = unwrap; 24 | taskWrapper.displayName = name; 25 | 26 | //fn 若设置过 metadata,则获取其 branch 属性值作为 tree.nodes 值 27 | var meta = metadata.get(fn) || {}; 28 | var nodes = []; 29 | if (meta.branch) { 30 | nodes.push(meta.tree); 31 | } 32 | 33 | // this._registry.set 接口最后会返回 taskWrapper 34 | var task = this._registry.set(name, taskWrapper) || taskWrapper; 35 | 36 | //设置任务的 metadata 37 | metadata.set(task, { 38 | name: name, 39 | orig: fn, 40 | tree: { 41 | label: name, 42 | type: 'task', 43 | nodes: nodes 44 | } 45 | }); 46 | } 47 | 48 | module.exports = set; 49 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/task.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function task(name, fn) { 4 | if (typeof name === 'function') { 5 | fn = name; 6 | name = fn.displayName || fn.name; 7 | } 8 | 9 | if (!fn) { 10 | return this._getTask(name); 11 | } 12 | 13 | //存储task 14 | this._setTask(name, fn); 15 | } 16 | 17 | module.exports = task; 18 | -------------------------------------------------------------------------------- /170201/undertaker-master/lib/tree.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var defaults = require('lodash.defaults'); 4 | var map = require('lodash.map'); 5 | 6 | var metadata = require('./helpers/metadata'); 7 | 8 | function tree(opts) { 9 | opts = defaults(opts || {}, { 10 | deep: false, 11 | }); 12 | 13 | var tasks = this._registry.tasks(); //获取所有存储的任务 14 | var nodes = map(tasks, function(task) { //遍历并返回metadata数组 15 | var meta = metadata.get(task); 16 | 17 | if (opts.deep) { //如果传入了 {deep: true},则从 meta.tree 开始返回 18 | return meta.tree; 19 | } 20 | 21 | return meta.tree.label; //从 meta.tree.label 开始返回 22 | }); 23 | 24 | return { //返回Tasks对象 25 | label: 'Tasks', 26 | nodes: nodes 27 | }; 28 | } 29 | 30 | module.exports = tree; 31 | -------------------------------------------------------------------------------- /170201/undertaker-registry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by vajoy on 2017/2/2. 3 | */ 4 | 'use strict'; 5 | 6 | function DefaultRegistry() { 7 | //对外免 new 处理 8 | if (this instanceof DefaultRegistry === false) { 9 | return new DefaultRegistry(); 10 | } 11 | //初始化任务对象,用于存储任务 12 | this._tasks = {}; 13 | } 14 | 15 | // 初始化方法(仅做占位使用) 16 | DefaultRegistry.prototype.init = function init(taker) {}; 17 | 18 | //返回指定任务方法 19 | DefaultRegistry.prototype.get = function get(name) { 20 | return this._tasks[name]; 21 | }; 22 | 23 | //保存任务 24 | DefaultRegistry.prototype.set = function set(name, fn) { 25 | return this._tasks[name] = fn; 26 | }; 27 | 28 | //获取任务对象 29 | DefaultRegistry.prototype.tasks = function tasks() { 30 | var self = this; 31 | 32 | //克隆 this._tasks 对象,避免外部修改会对其有影响 33 | return Object.keys(this._tasks).reduce(function(tasks, name) { 34 | tasks[name] = self.get(name); 35 | return tasks; 36 | }, {}); 37 | }; 38 | 39 | module.exports = DefaultRegistry; -------------------------------------------------------------------------------- /FrozenUI-React/loading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /FrozenUI-React/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/js/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "vajoylan", 10 | "license": "ISC", 11 | "dependencies": { 12 | "css-loader": "^0.15.2", 13 | "expose-loader": "^0.7.0", 14 | "file-loader": "^0.8.4", 15 | "jsx-loader": "^0.13.2", 16 | "node-sass": "^3.2.0", 17 | "react": "^0.13.3", 18 | "sass-loader": "^1.0.2", 19 | "style-loader": "^0.12.3", 20 | "url-loader": "^0.5.6" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /FrozenUI-React/src/css/frozen.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @media screen and (max-width: 319px) { 3 | html { 4 | font-size: 85.33333px; } } 5 | @media screen and (min-width: 320px) and (max-width: 359px) { 6 | html { 7 | font-size: 85.33333px; } } 8 | @media screen and (min-width: 360px) and (max-width: 374px) { 9 | html { 10 | font-size: 96px; } } 11 | @media screen and (min-width: 375px) and (max-width: 383px) { 12 | html { 13 | font-size: 100px; } } 14 | @media screen and (min-width: 384px) and (max-width: 399px) { 15 | html { 16 | font-size: 102.4px; } } 17 | @media screen and (min-width: 400px) and (max-width: 413px) { 18 | html { 19 | font-size: 106.66667px; } } 20 | @media screen and (min-width: 414px) { 21 | html { 22 | font-size: 110.4px; } } 23 | /*CSS Reset*/ 24 | body, 25 | div, 26 | dl, 27 | dt, 28 | dd, 29 | ul, 30 | ol, 31 | li, 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | pre, 39 | code, 40 | form, 41 | fieldset, 42 | legend, 43 | input, 44 | textarea, 45 | p, 46 | blockquote, 47 | th, 48 | td, 49 | header, 50 | hgroup, 51 | nav, 52 | section, 53 | article, 54 | aside, 55 | footer, 56 | figure, 57 | figcaption, 58 | menu, 59 | button { 60 | margin: 0; 61 | padding: 0; } 62 | 63 | body { 64 | font-family: "Helvetica Neue",Helvetica,STHeiTi,sans-serif; 65 | line-height: 1.5; 66 | font-size: 16px; 67 | color: black; 68 | background-color: #f8f8f8; 69 | -webkit-user-select: none; 70 | -webkit-text-size-adjust: 100%; 71 | -webkit-tap-highlight-color: transparent; 72 | outline: 0; } 73 | 74 | h1, h2, h3, h4, h5, h6 { 75 | font-size: 100%; 76 | font-weight: normal; } 77 | 78 | table { 79 | border-collapse: collapse; 80 | border-spacing: 0; } 81 | 82 | caption, th { 83 | text-align: left; } 84 | 85 | fieldset, 86 | img { 87 | border: 0; } 88 | 89 | li { 90 | list-style: none; } 91 | 92 | ins { 93 | text-decoration: none; } 94 | 95 | del { 96 | text-decoration: line-through; } 97 | 98 | input, 99 | button, 100 | textarea, 101 | select, 102 | optgroup, 103 | option { 104 | font-family: inherit; 105 | font-size: inherit; 106 | font-style: inherit; 107 | font-weight: inherit; 108 | outline: 0; } 109 | 110 | button { 111 | -webkit-appearance: none; 112 | border: 0; 113 | background: none; } 114 | 115 | a { 116 | -webkit-touch-callout: none; 117 | text-decoration: none; } 118 | 119 | :focus { 120 | outline: 0; 121 | -webkit-tap-highlight-color: transparent; } 122 | 123 | em, i { 124 | font-style: normal; } 125 | 126 | .ui-icon, [class^="ui-icon-"] { 127 | font-family: "iconfont" !important; 128 | font-size: 32px; 129 | line-height: 44px; 130 | font-style: normal; 131 | -webkit-font-smoothing: antialiased; 132 | -webkit-text-stroke-width: 0.2px; 133 | display: block; 134 | color: rgba(0, 0, 0, 0.5); } 135 | 136 | .ui-icon-close:before { 137 | content: "\e60a"; } 138 | 139 | .ui-icon-search:before { 140 | content: "\e60c"; } 141 | 142 | .ui-icon-return:before { 143 | content: "\e614"; } 144 | 145 | .ui-icon-close, 146 | .ui-icon-search { 147 | color: #8e8e93; } 148 | 149 | 150 | .ui-icon, [class^="ui-icon-"] { 151 | font-family: "iconfont" !important; 152 | font-size: 32px; 153 | line-height: 44px; 154 | font-style: normal; 155 | -webkit-font-smoothing: antialiased; 156 | -webkit-text-stroke-width: 0.2px; 157 | display: block; 158 | color: rgba(0, 0, 0, 0.5); } 159 | 160 | .ui-icon-add:before { 161 | content: "\e615"; } 162 | 163 | .ui-icon-more:before { 164 | content: "\e616"; } 165 | 166 | .ui-icon-arrow:before { 167 | content: "\e600"; } 168 | 169 | .ui-icon-return:before { 170 | content: "\e614"; } 171 | 172 | .ui-icon-checked:before { 173 | content: "\e601"; } 174 | 175 | .ui-icon-checked-s:before { 176 | content: "\e602"; } 177 | 178 | .ui-icon-info-block:before { 179 | content: "\e603"; } 180 | 181 | .ui-icon-success-block:before { 182 | content: "\e604"; } 183 | 184 | .ui-icon-warn-block:before { 185 | content: "\e605"; } 186 | 187 | .ui-icon-info:before { 188 | content: "\e606"; } 189 | 190 | .ui-icon-success:before { 191 | content: "\e607"; } 192 | 193 | .ui-icon-warn:before { 194 | content: "\e608"; } 195 | 196 | .ui-icon-next:before { 197 | content: "\e617"; } 198 | 199 | .ui-icon-prev:before { 200 | content: "\e618"; } 201 | 202 | .ui-icon-tag:before { 203 | content: "\e60d"; } 204 | 205 | .ui-icon-tag-pop:before { 206 | content: "\e60f"; } 207 | 208 | .ui-icon-tag-s:before { 209 | content: "\e60e"; } 210 | 211 | .ui-icon-warn-lg:before { 212 | content: "\e609"; } 213 | 214 | .ui-icon-close:before { 215 | content: "\e60a"; } 216 | 217 | .ui-icon-close-progress:before { 218 | content: "\e619"; } 219 | 220 | .ui-icon-close-page:before { 221 | content: "\e60b"; } 222 | 223 | .ui-icon-emo:before { 224 | content: "\e61a"; } 225 | 226 | .ui-icon-delete:before { 227 | content: "\e61b"; } 228 | 229 | .ui-icon-search:before { 230 | content: "\e60c"; } 231 | 232 | .ui-icon-order:before { 233 | content: "\e61c"; } 234 | 235 | .ui-icon-news:before { 236 | content: "\e61d"; } 237 | 238 | .ui-icon-personal:before { 239 | content: "\e61e"; } 240 | 241 | .ui-icon-dressup:before { 242 | content: "\e61f"; } 243 | 244 | .ui-icon-cart:before { 245 | content: "\e620"; } 246 | 247 | .ui-icon-history:before { 248 | content: "\e621"; } 249 | 250 | .ui-icon-wallet:before { 251 | content: "\e622"; } 252 | 253 | .ui-icon-refresh:before { 254 | content: "\e623"; } 255 | 256 | .ui-icon-thumb:before { 257 | content: "\e624"; } 258 | 259 | .ui-icon-file:before { 260 | content: "\e625"; } 261 | 262 | .ui-icon-hall:before { 263 | content: "\e626"; } 264 | 265 | .ui-icon-voice:before { 266 | content: "\e627"; } 267 | 268 | .ui-icon-unfold:before { 269 | content: "\e628"; } 270 | 271 | .ui-icon-gototop:before { 272 | content: "\e629"; } 273 | 274 | .ui-icon-share:before { 275 | content: "\e62a"; } 276 | 277 | .ui-icon-home:before { 278 | content: "\e62b"; } 279 | 280 | .ui-icon-pin:before { 281 | content: "\e62c"; } 282 | 283 | .ui-icon-star:before { 284 | content: "\e62d"; } 285 | 286 | .ui-icon-bugle:before { 287 | content: "\e62e"; } 288 | 289 | .ui-icon-trend:before { 290 | content: "\e62f"; } 291 | 292 | .ui-icon-unchecked:before { 293 | content: "\e610"; } 294 | 295 | .ui-icon-unchecked-s:before { 296 | content: "\e611"; } 297 | 298 | .ui-icon-play-active:before { 299 | content: "\e630"; } 300 | 301 | .ui-icon-stop-active:before { 302 | content: "\e631"; } 303 | 304 | .ui-icon-play:before { 305 | content: "\e632"; } 306 | 307 | .ui-icon-stop:before { 308 | content: "\e633"; } 309 | 310 | .ui-icon-set:before { 311 | content: "\e634"; } 312 | 313 | .ui-icon-add-group:before { 314 | content: "\e635"; } 315 | 316 | .ui-icon-add-people:before { 317 | content: "\e636"; } 318 | 319 | .ui-icon-pc:before { 320 | content: "\e637"; } 321 | 322 | .ui-icon-scan:before { 323 | content: "\e638"; } 324 | 325 | .ui-icon-tag-svip:before { 326 | content: "\e613"; } 327 | 328 | .ui-icon-tag-vip:before { 329 | content: "\e612"; } 330 | 331 | .ui-icon-male:before { 332 | content: "\e639"; } 333 | 334 | .ui-icon-female:before { 335 | content: "\e63a"; } 336 | 337 | .ui-icon-collect:before { 338 | content: "\e63b"; } 339 | 340 | .ui-icon-commented:before { 341 | content: "\e63c"; } 342 | 343 | .ui-icon-like:before { 344 | content: "\e63d"; } 345 | 346 | .ui-icon-liked:before { 347 | content: "\e63e"; } 348 | 349 | .ui-icon-comment:before { 350 | content: "\e63f"; } 351 | 352 | .ui-icon-collected:before { 353 | content: "\e640"; } 354 | 355 | a { 356 | color: #00a5e0; } 357 | 358 | em { 359 | color: #ff8444; } 360 | 361 | ::-webkit-input-placeholder { 362 | color: #bbbbbb; } 363 | 364 | /** 365 | * 文字 366 | */ 367 | h1 { 368 | font-size: 18px; } 369 | 370 | h2 { 371 | font-size: 17px; } 372 | 373 | h3, h4 { 374 | font-size: 16px; } 375 | 376 | h5, .ui-txt-sub { 377 | font-size: 14px; } 378 | 379 | h6, .ui-txt-tips { 380 | font-size: 12px; } 381 | 382 | .ui-txt-default { 383 | color: black; } 384 | 385 | .ui-txt-white { 386 | color: white; } 387 | 388 | .ui-txt-info { 389 | color: #777777; } 390 | 391 | .ui-txt-muted { 392 | color: #bbbbbb; } 393 | 394 | .ui-txt-warning, .ui-txt-red { 395 | color: #ff4222; } 396 | 397 | .ui-txt-feeds { 398 | color: #314c83; } 399 | 400 | /* 同em */ 401 | .ui-txt-highlight { 402 | color: #ff8444; } 403 | 404 | .ui-txt-justify { 405 | text-align: justify; } 406 | 407 | .ui-txt-justify-one { 408 | text-align: justify; 409 | overflow: hidden; 410 | height: 24px; } 411 | 412 | .ui-txt-justify-one:after { 413 | display: inline-block; 414 | content: ''; 415 | overflow: hidden; 416 | width: 100%; 417 | height: 0; } 418 | 419 | /* 1px hack */ 420 | .ui-border-t { 421 | border-top: 1px solid #e0e0e0; } 422 | 423 | .ui-border-b { 424 | border-bottom: 1px solid #e0e0e0; } 425 | 426 | .ui-border-tb { 427 | border-top: #e0e0e0 1px solid; 428 | border-bottom: #e0e0e0 1px solid; 429 | background-image: none; } 430 | 431 | .ui-border-l { 432 | border-left: 1px solid #e0e0e0; } 433 | 434 | .ui-border-r { 435 | border-right: 1px solid #e0e0e0; } 436 | 437 | .ui-border { 438 | border: 1px solid #e0e0e0; } 439 | 440 | .ui-border-radius { 441 | border: 1px solid #e0e0e0; 442 | border-radius: 4px; } 443 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 444 | .ui-border-radius { 445 | position: relative; 446 | border: 0; } 447 | .ui-border-radius:before { 448 | content: ""; 449 | width: 200%; 450 | height: 200%; 451 | position: absolute; 452 | top: 0; 453 | left: 0; 454 | border: 1px solid #e0e0e0; 455 | -webkit-transform: scale(0.5); 456 | -webkit-transform-origin: 0 0; 457 | padding: 1px; 458 | -webkit-box-sizing: border-box; 459 | border-radius: 8px; 460 | pointer-events: none; } } 461 | 462 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 463 | .ui-border { 464 | position: relative; 465 | border: 0; } 466 | 467 | .ui-border-t, .ui-border-b, .ui-border-l, .ui-border-r, .ui-border-tb { 468 | border: 0; } 469 | 470 | .ui-border-t { 471 | background-position: left top; 472 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); } 473 | 474 | .ui-border-b { 475 | background-position: left bottom; 476 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); } 477 | 478 | .ui-border-t, 479 | .ui-border-b, 480 | .ui-border-tb { 481 | background-repeat: repeat-x; 482 | -webkit-background-size: 100% 1px; } 483 | 484 | .ui-border-tb { 485 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 486 | background-position: top, bottom; } 487 | 488 | .ui-border-l { 489 | background-position: left top; 490 | background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); } 491 | 492 | .ui-border-r { 493 | background-position: right top; 494 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); } 495 | 496 | .ui-border-l, 497 | .ui-border-r { 498 | background-repeat: repeat-y; 499 | -webkit-background-size: 1px 100%; } 500 | 501 | .ui-border:after { 502 | content: ""; 503 | width: 100%; 504 | height: 100%; 505 | position: absolute; 506 | top: 0; 507 | left: 0; 508 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 509 | -webkit-background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; 510 | background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; 511 | -webkit-background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; 512 | background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; 513 | background-repeat: no-repeat; 514 | background-position: top, right, bottom, left; 515 | padding: 1px; 516 | -webkit-box-sizing: border-box; 517 | z-index: 10; 518 | pointer-events: none; } } 519 | /* 箭头链接 */ 520 | .ui-arrowlink { 521 | position: relative; } 522 | .ui-arrowlink:before { 523 | font-family: "iconfont" !important; 524 | font-size: 32px; 525 | line-height: 44px; 526 | font-style: normal; 527 | -webkit-font-smoothing: antialiased; 528 | -webkit-text-stroke-width: 0.2px; 529 | display: block; 530 | color: rgba(0, 0, 0, 0.5); 531 | color: #c7c7c7; 532 | content: "\e600"; 533 | position: absolute; 534 | right: 15px; 535 | top: 50%; 536 | margin-top: -22px; 537 | margin-right: -10px; } 538 | @media (max-width: 320px) { 539 | .ui-arrowlink:before { 540 | right: 10px; } } 541 | 542 | .ui-arrowlink.active { 543 | background: #e5e6e7; } 544 | 545 | /* 文字截断 */ 546 | .ui-nowrap { 547 | max-width: 100%; 548 | overflow: hidden; 549 | white-space: nowrap; 550 | text-overflow: ellipsis; } 551 | 552 | .ui-nowrap-flex { 553 | display: -webkit-box; 554 | overflow: hidden; 555 | text-overflow: ellipsis; 556 | -webkit-box-orient: vertical; 557 | -webkit-line-clamp: 1; 558 | -webkit-box-flex: 1; 559 | height: inherit; } 560 | 561 | .ui-nowrap-multi { 562 | display: -webkit-box; 563 | overflow: hidden; 564 | text-overflow: ellipsis; 565 | -webkit-box-orient: vertical; 566 | -webkit-line-clamp: 2; } 567 | 568 | .ui-placehold { 569 | padding-top: 31.25%; 570 | position: relative; } 571 | 572 | .ui-placehold-cnt { 573 | color: #bbbbbb; 574 | position: absolute; 575 | top: 0; 576 | width: 100%; 577 | display: -webkit-box; 578 | -webkit-box-orient: vertical; 579 | -webkit-box-pack: center; 580 | -webkit-box-align: center; 581 | -webkit-box-sizing: border-box; 582 | text-align: center; 583 | height: 100%; 584 | z-index: -1; } 585 | 586 | .ui-placehold-img { 587 | padding-top: 31.25%; 588 | position: relative; } 589 | .ui-placehold-img > span { 590 | width: 100%; 591 | height: 100%; 592 | position: absolute; 593 | top: 0; 594 | left: 0; 595 | z-index: 1; 596 | background-repeat: no-repeat; 597 | -webkit-background-size: cover; } 598 | .ui-placehold-img img { 599 | width: 100%; 600 | height: 100%; } 601 | 602 | /* 三等分 */ 603 | .ui-grid, .ui-grid-trisect, .ui-grid-halve { 604 | padding-left: 15px; 605 | padding-right: 10px; 606 | overflow: hidden; 607 | padding-top: 10px; } 608 | @media (max-width: 320px) { 609 | .ui-grid, .ui-grid-trisect, .ui-grid-halve { 610 | padding-left: 10px; 611 | padding-right: 5px; } } 612 | .ui-grid li, .ui-grid-trisect li, .ui-grid-halve li { 613 | padding-right: 5px; 614 | padding-bottom: 10px; 615 | float: left; 616 | position: relative; 617 | -webkit-box-sizing: border-box; } 618 | 619 | .ui-grid-trisect > li { 620 | width: 33.3333%; } 621 | 622 | .ui-grid-trisect-img { 623 | padding-top: 149.47%; } 624 | 625 | .ui-grid-trisect h4 { 626 | position: relative; 627 | margin: 7px 0 3px; } 628 | 629 | .ui-grid-trisect h4 span { 630 | display: inline-block; 631 | margin-left: 12px; 632 | color: #777777; } 633 | 634 | /* 二等分 */ 635 | .ui-grid-halve > li { 636 | width: 50%; } 637 | 638 | .ui-grid-halve-img { 639 | padding-top: 55.17%; } 640 | 641 | .ui-grid-trisect-img, .ui-grid-halve-img { 642 | position: relative; 643 | width: 100%; } 644 | .ui-grid-trisect-img > span, .ui-grid-halve-img > span { 645 | width: 100%; 646 | height: 100%; 647 | position: absolute; 648 | top: 0; 649 | left: 0; 650 | z-index: 1; 651 | background-repeat: no-repeat; 652 | -webkit-background-size: cover; } 653 | .ui-grid-trisect-img img, .ui-grid-halve-img img { 654 | width: 100%; 655 | height: 100%; 656 | position: absolute; 657 | left: 0; 658 | top: 0; } 659 | .ui-grid-trisect-img.active, .ui-grid-halve-img.active { 660 | opacity: .5; } 661 | 662 | .ui-row { 663 | display: block; 664 | overflow: hidden; } 665 | 666 | .ui-col { 667 | float: left; 668 | -webkit-box-sizing: border-box; 669 | box-sizing: border-box; 670 | width: 100%; } 671 | 672 | .ui-col-10 { 673 | width: 10%; } 674 | 675 | .ui-col-20 { 676 | width: 20%; } 677 | 678 | .ui-col-25 { 679 | width: 25%; } 680 | 681 | .ui-col-33 { 682 | width: 33.3333%; } 683 | 684 | .ui-col-50 { 685 | width: 50%; } 686 | 687 | .ui-col-67 { 688 | width: 66.6666%; } 689 | 690 | .ui-col-75 { 691 | width: 75%; } 692 | 693 | .ui-col-80 { 694 | width: 80%; } 695 | 696 | .ui-col-90 { 697 | width: 90%; } 698 | 699 | .ui-row-flex { 700 | display: -webkit-box; 701 | width: 100%; 702 | -webkit-box-sizing: border-box; } 703 | .ui-row-flex .ui-col { 704 | float: none; 705 | -webkit-box-flex: 1; 706 | width: 0; } 707 | .ui-row-flex .ui-col-2 { 708 | -webkit-box-flex: 2; } 709 | .ui-row-flex .ui-col-3 { 710 | -webkit-box-flex: 3; } 711 | .ui-row-flex .ui-col-4 { 712 | -webkit-box-flex: 4; } 713 | 714 | .ui-row-flex-ver { 715 | -webkit-box-orient: vertical; } 716 | .ui-row-flex-ver .ui-col { 717 | width: 100%; 718 | height: 0; } 719 | 720 | .ui-whitespace { 721 | padding-left: 15px; 722 | padding-right: 15px; 723 | -webkit-box-sizing: border-box; 724 | box-sizing: border-box; } 725 | @media (max-width: 320px) { 726 | .ui-whitespace { 727 | padding-left: 10px; 728 | padding-right: 10px; } } 729 | 730 | .ui-whitespace-left { 731 | padding-left: 15px; 732 | -webkit-box-sizing: border-box; 733 | box-sizing: border-box; } 734 | @media (max-width: 320px) { 735 | .ui-whitespace-left { 736 | padding-left: 10px; } } 737 | 738 | .ui-whitespace-right { 739 | padding-right: 15px; 740 | -webkit-box-sizing: border-box; 741 | box-sizing: border-box; } 742 | @media (max-width: 320px) { 743 | .ui-whitespace-right { 744 | padding-right: 10px; } } 745 | 746 | .ui-justify { 747 | text-align: justify; 748 | font-size: 0; } 749 | .ui-justify:after { 750 | content: ''; 751 | display: inline-block; 752 | width: 100%; 753 | height: 0; 754 | overflow: hidden; } 755 | .ui-justify li { 756 | display: inline-block; 757 | text-align: center; } 758 | .ui-justify p { 759 | font-size: 16px; } 760 | 761 | .ui-justify-flex { 762 | width: 100%; 763 | display: -webkit-box; 764 | -webkit-box-pack: justify; 765 | -webkit-justify-content: space-between; } 766 | 767 | .ui-header, 768 | .ui-footer { 769 | position: fixed; 770 | width: 100%; 771 | z-index: 100; 772 | left: 0; } 773 | 774 | .ui-header { 775 | top: 0; 776 | height: 45px; 777 | line-height: 45px; } 778 | 779 | .ui-header-stable, 780 | .ui-header-positive { 781 | padding: 0 10px; 782 | -webkit-box-sizing: border-box; 783 | box-sizing: border-box; } 784 | 785 | .ui-header-stable, 786 | .ui-footer-stable { 787 | background-color: #f8f8f8; } 788 | 789 | .ui-header-positive, 790 | .ui-footer-positive { 791 | background-color: #18b4ed; 792 | color: #fff; } 793 | .ui-header-positive a, .ui-header-positive a:active, .ui-header-positive i, 794 | .ui-footer-positive a, 795 | .ui-footer-positive a:active, 796 | .ui-footer-positive i { 797 | color: #fff; } 798 | 799 | .ui-footer-btn { 800 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f9f9f9), to(#e0e0e0)); 801 | color: #00a5e0; } 802 | 803 | .ui-footer { 804 | bottom: 0; 805 | height: 56px; } 806 | 807 | .ui-header ~ .ui-container { 808 | border-top: 45px solid transparent; } 809 | 810 | .ui-footer ~ .ui-container { 811 | border-bottom: 56px solid transparent; } 812 | 813 | .ui-header h1 { 814 | text-align: center; 815 | font-size: 18px; } 816 | 817 | .ui-header .ui-icon-return { 818 | position: absolute; 819 | left: 0; } 820 | 821 | .ui-header .ui-btn, .ui-header .ui-btn-lg, .ui-header .ui-btn-s { 822 | display: block; 823 | position: absolute; 824 | right: 10px; 825 | top: 50%; 826 | margin-top: -15px; } 827 | 828 | /** 829 | * 垂直上下居中 830 | */ 831 | .ui-center { 832 | width: 100%; 833 | display: -webkit-box; 834 | -webkit-box-orient: vertical; 835 | -webkit-box-pack: center; 836 | -webkit-box-align: center; 837 | text-align: center; 838 | height: 150px; } 839 | 840 | /** 841 | * 排版 842 | */ 843 | .ui-flex, 844 | .ui-tiled { 845 | display: -webkit-box; 846 | width: 100%; 847 | -webkit-box-sizing: border-box; } 848 | 849 | .ui-flex-ver { 850 | -webkit-box-orient: vertical; } 851 | 852 | .ui-flex-pack-start { 853 | -webkit-box-pack: start; } 854 | 855 | .ui-flex-pack-end { 856 | -webkit-box-pack: end; } 857 | 858 | .ui-flex-pack-center { 859 | -webkit-box-pack: center; } 860 | 861 | .ui-flex-align-start { 862 | -webkit-box-align: start; } 863 | 864 | .ui-flex-align-end { 865 | -webkit-box-align: end; } 866 | 867 | .ui-flex-align-center { 868 | -webkit-box-align: center; } 869 | 870 | /** 871 | * 平铺 872 | */ 873 | .ui-tiled li { 874 | -webkit-box-flex: 1; 875 | width: 100%; 876 | text-align: center; 877 | display: -webkit-box; 878 | -webkit-box-orient: vertical; 879 | -webkit-box-pack: center; 880 | -webkit-box-align: center; } 881 | 882 | /** 883 | * 未读数通知 884 | */ 885 | .ui-badge, .ui-badge-muted, .ui-badge-num, .ui-badge-corner, .ui-badge-cornernum { 886 | display: inline-block; 887 | text-align: center; 888 | background: #f74c31; 889 | color: #fff; 890 | font-size: 11px; 891 | height: 16px; 892 | line-height: 16px; 893 | -webkit-border-radius: 8px; 894 | padding: 0 6px; 895 | -webkit-background-clip: padding-box; 896 | background-clip: padding-box; } 897 | 898 | /* 浅色的 */ 899 | .ui-badge-muted { 900 | background: #b6cae0; } 901 | 902 | .ui-badge-num { 903 | height: 19px; 904 | line-height: 20px; 905 | font-size: 12px; 906 | min-width: 19px; 907 | -webkit-border-radius: 10px; } 908 | 909 | .ui-badge-wrap { 910 | position: relative; 911 | text-align: center; } 912 | 913 | .ui-badge-corner { 914 | position: absolute; 915 | border: 2px #fff solid; 916 | height: 20px; 917 | line-height: 20px; 918 | top: -4px; 919 | right: -9px; } 920 | 921 | .ui-badge-cornernum { 922 | position: absolute; 923 | top: -4px; 924 | right: -9px; 925 | height: 19px; 926 | line-height: 19px; 927 | font-size: 12px; 928 | min-width: 19px; 929 | -webkit-border-radius: 10px; 930 | top: -5px; 931 | right: -5px; } 932 | 933 | /** 934 | * 红点提醒 935 | */ 936 | .ui-reddot, .ui-reddot-border, .ui-reddot-s { 937 | position: relative; 938 | display: inline-block; 939 | line-height: 22px; 940 | padding: 0 6px; } 941 | .ui-reddot:after, .ui-reddot-border:after, .ui-reddot-s:after { 942 | content: ''; 943 | position: absolute; 944 | display: block; 945 | width: 8px; 946 | height: 8px; 947 | background-color: #f74c31; 948 | border-radius: 5px; 949 | right: -3px; 950 | top: -3px; 951 | -webkit-background-clip: padding-box; 952 | background-clip: padding-box; } 953 | 954 | .ui-reddot-static { 955 | display: block; 956 | width: 8px; 957 | height: 8px; 958 | padding: 0; } 959 | .ui-reddot-static:after { 960 | top: 0; 961 | right: 0; } 962 | 963 | /* 带白边的 */ 964 | .ui-reddot-border:before { 965 | content: ''; 966 | position: absolute; 967 | display: block; 968 | width: 8px; 969 | height: 8px; 970 | background-color: #fff; 971 | border-radius: 5px; 972 | right: -4px; 973 | top: -4px; 974 | -webkit-background-clip: padding-box; 975 | background-clip: padding-box; 976 | padding: 1px; } 977 | 978 | /* 小号的 */ 979 | .ui-reddot-s:after { 980 | width: 6px; 981 | height: 6px; 982 | top: -5px; 983 | right: -5px; } 984 | 985 | /** 986 | * 圆角头像,列表场景 987 | */ 988 | .ui-avatar, 989 | .ui-avatar-lg, 990 | .ui-avatar-s, 991 | .ui-avatar-one, 992 | .ui-avatar-tiled { 993 | display: block; 994 | -webkit-background-size: cover; 995 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAA8FBMVEXp8Peat8+jwNidutKhvtagvdWcudGfu9Kpwteiv9ecudCsxNifvNTM2+ieu9PE1eSdudDO3OmkvtSyyNu/0eKhvNOivdPm7vWlv9WeutHI2Oa5zd+dudG+0eHn7/bG1+Xi6/SzydzT4Ozc5vDe6PLY5O/a5e/P3eqmv9WmwNW6zt/j7PTX4+6uxtno8Pff6fLh6vPW4u280ODg6fLC1OObuM+buNDD1eTU4eza5fDd5/GhvNKowdarw9jA0+K1y93k7PTk7fXl7fW7zt/F1uXc5/DZ5O/R3+vB0+OnwNXg6vKcuNDM2+mtxNjO3eq3zN1UQ75QAAACR0lEQVR4Xu3W1a7cMBAG4PnHDi4zMx5mxiLD+79Ne7YXq6hKHMU+Ui/8XVpKfo0nMwr9hyzLsizLsqx5ZTfX9DyvmXtXOaNXsd+rYqs9mJFx454HiLwMXsi8CzTO35JZ0x1ABLwlBZAzW0yhAzfgKOmiekLmVEII/peAd22u5ZGMSEpzSWYc30cyoim+oe4/wuU4LgZkwq0HyXEkPCMX9hmC4wmcHpK2VhWS40ncHZG2KcBJBAom2l7kJA6eSFsNDicJsB5qt8SH5EToz0nT1zUCRUi4IE3zqjLkm/aaPGsrQ8oz0nSkDgm1Z750AU4mtL/hYQ1FThZgZ4+0HH9BoAzx9knL8hKsoL9YChCsksdAd3PlWcXBhHSM15CsEqCsNY49uKwm4Lcos5MyAk7BRYmyOpxAcBoOqkca/1sBpyKyl1KH4HQc5J4pmzYkpwQsKJsQnFYRI8qmnD7EwdPrh0gcZA9xio76piBY4iFziACUMw+EcLNXEgKd7o5qVtD52UYeu5RNB3iiifIP0qcRgAplU4N/TNdILsVFgVq/0My6Vxa9lyeTF5jAwzPRsF4gLbfNhBSJ/pRMKPThxGbgkcy4iu19HqdkxN7oR2wlDmqrQ9K39JPm8RLYbZGu8T1cJ3mp1ElXJVqGLAKI7DOJxpA0Le8gJP8VSIGN7RE7Lmr6XfneACCKfwgAjfPFdP8qcpSbk76bgX+BDe+gPqMXs3quj43OQekNGTH+WBmV3nc/fdi+b+9m1S2VuqvZM6lZlmVZlmVZvwEAnS9LHbI74gAAAABJRU5ErkJggg==); } 996 | 997 | .ui-avatar { 998 | width: 50px; 999 | height: 50px; 1000 | -webkit-border-radius: 200px; 1001 | overflow: hidden; } 1002 | .ui-avatar > span { 1003 | width: 100%; 1004 | height: 100%; 1005 | display: block; 1006 | overflow: hidden; 1007 | background-repeat: no-repeat; 1008 | -webkit-background-size: cover; 1009 | -webkit-border-radius: 200px; } 1010 | 1011 | .ui-avatar-lg, 1012 | .ui-avatar-one { 1013 | width: 70px; 1014 | height: 70px; 1015 | -webkit-border-radius: 200px; 1016 | overflow: hidden; } 1017 | .ui-avatar-lg > span, 1018 | .ui-avatar-one > span { 1019 | width: 100%; 1020 | height: 100%; 1021 | display: block; 1022 | overflow: hidden; 1023 | background-repeat: no-repeat; 1024 | -webkit-background-size: cover; 1025 | -webkit-border-radius: 200px; } 1026 | 1027 | .ui-avatar-s { 1028 | width: 40px; 1029 | height: 40px; 1030 | -webkit-border-radius: 200px; 1031 | overflow: hidden; } 1032 | .ui-avatar-s > span { 1033 | width: 100%; 1034 | height: 100%; 1035 | display: block; 1036 | overflow: hidden; 1037 | background-repeat: no-repeat; 1038 | -webkit-background-size: cover; 1039 | -webkit-border-radius: 200px; } 1040 | 1041 | /* 平铺场景 */ 1042 | .ui-avatar-tiled { 1043 | width: 30px; 1044 | height: 30px; 1045 | -webkit-border-radius: 200px; 1046 | overflow: hidden; 1047 | display: inline-block; } 1048 | .ui-avatar-tiled > span { 1049 | width: 100%; 1050 | height: 100%; 1051 | display: block; 1052 | overflow: hidden; 1053 | background-repeat: no-repeat; 1054 | -webkit-background-size: cover; 1055 | -webkit-border-radius: 200px; } 1056 | 1057 | .ui-label { 1058 | display: inline-block; 1059 | position: relative; 1060 | line-height: 30px; 1061 | height: 30px; 1062 | padding: 0 15px; 1063 | border: 1px solid #cacccd; 1064 | border-radius: 15px; } 1065 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 1066 | .ui-label { 1067 | position: relative; 1068 | border: 0; } 1069 | .ui-label:before { 1070 | content: ""; 1071 | width: 200%; 1072 | height: 200%; 1073 | position: absolute; 1074 | top: 0; 1075 | left: 0; 1076 | border: 1px solid #cacccd; 1077 | -webkit-transform: scale(0.5); 1078 | -webkit-transform-origin: 0 0; 1079 | padding: 1px; 1080 | -webkit-box-sizing: border-box; 1081 | border-radius: 30px; 1082 | pointer-events: none; } } 1083 | .ui-label:active { 1084 | background-color: #f3f2f2; } 1085 | 1086 | .ui-label-list { 1087 | margin: 0 10px; } 1088 | .ui-label-list .ui-label { 1089 | margin: 0 10px 10px 0; } 1090 | 1091 | .ui-label-s { 1092 | font-size: 11px; 1093 | line-height: 13px; 1094 | display: inline-block; 1095 | position: relative; 1096 | padding: 0 1px; 1097 | color: #ff7f0d; 1098 | border: 1px solid #ff7f0d; 1099 | border-radius: 2px; } 1100 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 1101 | .ui-label-s { 1102 | position: relative; 1103 | border: 0; } 1104 | .ui-label-s:before { 1105 | content: ""; 1106 | width: 200%; 1107 | height: 200%; 1108 | position: absolute; 1109 | top: 0; 1110 | left: 0; 1111 | border: 1px solid #ff7f0d; 1112 | -webkit-transform: scale(0.5); 1113 | -webkit-transform-origin: 0 0; 1114 | padding: 1px; 1115 | -webkit-box-sizing: border-box; 1116 | border-radius: 4px; 1117 | pointer-events: none; } } 1118 | .ui-label-s:active { 1119 | background-color: #f3f2f2; } 1120 | .ui-label-s:after { 1121 | content: ""; 1122 | position: absolute; 1123 | top: -5px; 1124 | bottom: -5px; 1125 | left: -5px; 1126 | right: -5px; } 1127 | 1128 | .ui-tag-t, .ui-tag-hot, 1129 | .ui-tag-new, 1130 | .ui-tag-s-hot, 1131 | .ui-tag-s-new, 1132 | .ui-tag-pop-hot, 1133 | .ui-tag-pop-new { 1134 | position: relative; } 1135 | 1136 | .ui-tag-t:before, .ui-tag-hot:before, 1137 | .ui-tag-new:before, 1138 | .ui-tag-s-hot:before, 1139 | .ui-tag-s-new:before, 1140 | .ui-tag-pop-hot:before, 1141 | .ui-tag-pop-new:before, 1142 | .ui-tag-t:after, 1143 | .ui-tag-hot:after, 1144 | .ui-tag-new:after, 1145 | .ui-tag-s-hot:after, 1146 | .ui-tag-s-new:after, 1147 | .ui-tag-pop-hot:after, 1148 | .ui-tag-pop-new:after { 1149 | height: 20px; 1150 | left: 0; 1151 | top: 0; 1152 | z-index: 9; 1153 | display: block; } 1154 | 1155 | .ui-tag-t:before, .ui-tag-hot:before, 1156 | .ui-tag-new:before, 1157 | .ui-tag-s-hot:before, 1158 | .ui-tag-s-new:before, 1159 | .ui-tag-pop-hot:before, 1160 | .ui-tag-pop-new:before, 1161 | .ui-tag-vip:before, 1162 | .ui-tag-svip:before, 1163 | .ui-tag-selected:after { 1164 | font-family: "iconfont" !important; 1165 | font-size: 32px; 1166 | line-height: 44px; 1167 | font-style: normal; 1168 | -webkit-font-smoothing: antialiased; 1169 | -webkit-text-stroke-width: 0.2px; 1170 | display: block; 1171 | color: rgba(0, 0, 0, 0.5); 1172 | position: absolute; } 1173 | 1174 | .ui-tag-t:before, .ui-tag-hot:before, 1175 | .ui-tag-new:before, 1176 | .ui-tag-s-hot:before, 1177 | .ui-tag-s-new:before, 1178 | .ui-tag-pop-hot:before, 1179 | .ui-tag-pop-new:before { 1180 | content: "\e60d"; 1181 | line-height: 20px; 1182 | color: #ff0000; } 1183 | 1184 | .ui-tag-t:after, .ui-tag-hot:after, 1185 | .ui-tag-new:after, 1186 | .ui-tag-s-hot:after, 1187 | .ui-tag-s-new:after, 1188 | .ui-tag-pop-hot:after, 1189 | .ui-tag-pop-new:after { 1190 | position: absolute; 1191 | content: ''; 1192 | width: 22px; 1193 | text-align: right; 1194 | line-height: 20px; 1195 | font-size: 12px; 1196 | color: #fff; 1197 | padding-right: 14px; } 1198 | 1199 | .ui-tag-b, .ui-tag-freelimit, 1200 | .ui-tag-free, 1201 | .ui-tag-last, 1202 | .ui-tag-limit, 1203 | .ui-tag-act, 1204 | .ui-tag-xy, 1205 | .ui-tag-vip, 1206 | .ui-tag-svip { 1207 | position: relative; } 1208 | 1209 | .ui-tag-b:before, .ui-tag-freelimit:before, 1210 | .ui-tag-free:before, 1211 | .ui-tag-last:before, 1212 | .ui-tag-limit:before, 1213 | .ui-tag-act:before, 1214 | .ui-tag-xy:before, 1215 | .ui-tag-vip:before, 1216 | .ui-tag-svip:before { 1217 | position: absolute; 1218 | font-size: 10px; 1219 | width: 28px; 1220 | height: 13px; 1221 | line-height: 13px; 1222 | bottom: 0; 1223 | right: 0; 1224 | z-index: 9; 1225 | color: #fff; 1226 | border-radius: 2px; 1227 | text-align: center; } 1228 | 1229 | .ui-tag-vip:before, 1230 | .ui-tag-svip:before { 1231 | font-size: 32px; 1232 | text-indent: -2px; 1233 | border-radius: 2px; } 1234 | 1235 | .ui-tag-vip:before { 1236 | background-color: #ff0000; 1237 | color: #fffadf; 1238 | content: "\e612"; } 1239 | 1240 | .ui-tag-svip:before { 1241 | background-color: #ffd400; 1242 | color: #b7440e; 1243 | content: "\e613"; } 1244 | 1245 | .ui-tag-freelimit:before { 1246 | background-color: #18b4ed; 1247 | content: '限免'; } 1248 | 1249 | .ui-tag-free:before { 1250 | background-color: #5fb336; 1251 | content: '免费'; } 1252 | 1253 | .ui-tag-last:before { 1254 | background-color: #8f6adb; 1255 | content: '绝版'; } 1256 | 1257 | .ui-tag-limit:before { 1258 | background-color: #3385e6; 1259 | content: '限量'; } 1260 | 1261 | .ui-tag-act:before { 1262 | background-color: #00c795; 1263 | content: '活动'; } 1264 | 1265 | .ui-tag-xy:before { 1266 | background-color: #d7ba42; 1267 | content: '星影'; } 1268 | 1269 | .ui-tag-freemonthly:before { 1270 | background-color: #ff7f0d; 1271 | content: '包月'; } 1272 | 1273 | .ui-tag-onsale:before { 1274 | background-color: #00c795; 1275 | content: '特价'; } 1276 | 1277 | .ui-tag-hot:after, 1278 | .ui-tag-s-hot:after, 1279 | .ui-tag-pop-hot:after { 1280 | content: '热'; } 1281 | 1282 | .ui-tag-new:after, 1283 | .ui-tag-s-new:after, 1284 | .ui-tag-pop-new:after { 1285 | content: '新'; } 1286 | 1287 | .ui-tag-hot:before, 1288 | .ui-tag-s-hot:before, 1289 | .ui-tag-pop-hot:before { 1290 | color: #ff7200; } 1291 | 1292 | .ui-tag-s-hot:before, 1293 | .ui-tag-s-new:before { 1294 | content: "\e60e"; 1295 | left: -2px; } 1296 | 1297 | .ui-tag-s-hot:after, 1298 | .ui-tag-s-new:after { 1299 | width: 16px; 1300 | padding-right: 12px; } 1301 | 1302 | .ui-tag-selected:after { 1303 | content: "\e601"; 1304 | color: #18b4ed; 1305 | right: -5px; 1306 | top: -5px; 1307 | z-index: 9; 1308 | width: 26px; 1309 | height: 26px; 1310 | background: #fff; 1311 | border-radius: 13px; 1312 | line-height: 26px; 1313 | text-indent: -3px; } 1314 | 1315 | .ui-tag-wrap { 1316 | display: inline-block; 1317 | position: relative; 1318 | padding-right: 32px; } 1319 | .ui-tag-wrap .ui-tag-vip, 1320 | .ui-tag-wrap .ui-tag-svip { 1321 | position: static; } 1322 | .ui-tag-wrap .ui-tag-vip:before, 1323 | .ui-tag-wrap .ui-tag-svip:before { 1324 | top: 50%; 1325 | margin-top: -7px; } 1326 | 1327 | .ui-tag-pop-hot:before, 1328 | .ui-tag-pop-new:before { 1329 | content: "\e60f"; 1330 | left: -10px; 1331 | top: 1px; } 1332 | 1333 | .ui-tag-pop-hot:after, 1334 | .ui-tag-pop-new:after { 1335 | font-size: 11px; 1336 | padding-right: 0; 1337 | text-align: center; 1338 | left: -5px; } 1339 | 1340 | /** 1341 | * 按钮 1342 | */ 1343 | .ui-btn, .ui-btn-lg, .ui-btn-s { 1344 | height: 30px; 1345 | line-height: 30px; 1346 | padding: 0 11px; 1347 | min-width: 55px; 1348 | display: inline-block; 1349 | position: relative; 1350 | text-align: center; 1351 | font-size: 15px; 1352 | background-color: #fdfdfd; 1353 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, white), to(#fafafa)); 1354 | vertical-align: top; 1355 | color: #00a5e0; 1356 | -webkit-box-sizing: border-box; 1357 | -webkit-background-clip: padding-box; 1358 | background-clip: padding-box; 1359 | border: 1px solid #cacccd; 1360 | border-radius: 3px; } 1361 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 1362 | .ui-btn, .ui-btn-lg, .ui-btn-s { 1363 | position: relative; 1364 | border: 0; } 1365 | .ui-btn:before, .ui-btn-lg:before, .ui-btn-s:before { 1366 | content: ""; 1367 | width: 200%; 1368 | height: 200%; 1369 | position: absolute; 1370 | top: 0; 1371 | left: 0; 1372 | border: 1px solid #cacccd; 1373 | -webkit-transform: scale(0.5); 1374 | -webkit-transform-origin: 0 0; 1375 | padding: 1px; 1376 | -webkit-box-sizing: border-box; 1377 | border-radius: 6px; 1378 | pointer-events: none; } } 1379 | 1380 | .ui-btn:not(.disabled):not(:disabled):active, .ui-btn-lg:not(.disabled):not(:disabled):active, .ui-btn-s:not(.disabled):not(:disabled):active, .ui-btn.active, .active.ui-btn-lg, .active.ui-btn-s { 1381 | background: #f2f2f2; 1382 | color: rgba(0, 165, 224, 0.5); 1383 | -webkit-background-clip: padding-box; 1384 | background-clip: padding-box; } 1385 | 1386 | .ui-btn:after, .ui-btn-lg:after, .ui-btn-s:after { 1387 | content: ""; 1388 | position: absolute; 1389 | top: -7px; 1390 | bottom: -7px; 1391 | left: 0; 1392 | right: 0; } 1393 | 1394 | .ui-btn-primary { 1395 | background-color: #18b4ed; 1396 | border-color: #0baae4; 1397 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1fbaf3), to(#18b4ed)); 1398 | color: white; 1399 | -webkit-background-clip: padding-box; 1400 | background-clip: padding-box; } 1401 | 1402 | .ui-btn-primary:not(.disabled):not(:disabled):active, .ui-btn-primary.active { 1403 | background: #1ca7da; 1404 | border-color: #1ca7da; 1405 | color: rgba(255, 255, 255, 0.5); 1406 | -webkit-background-clip: padding-box; 1407 | background-clip: padding-box; } 1408 | 1409 | .ui-btn-danger { 1410 | background-color: #f75549; 1411 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #fc6156), to(#f75549)); 1412 | color: white; 1413 | border-color: #f43d30; 1414 | -webkit-background-clip: padding-box; 1415 | background-clip: padding-box; } 1416 | 1417 | .ui-btn-danger:not(.disabled):not(:disabled):active, .ui-btn-danger.active { 1418 | background: #e2574d; 1419 | border-color: #e2574d; 1420 | color: rgba(255, 255, 255, 0.5); 1421 | -webkit-background-clip: padding-box; 1422 | background-clip: padding-box; } 1423 | 1424 | .ui-btn.disabled, .disabled.ui-btn-lg, .disabled.ui-btn-s, .ui-btn:disabled, .ui-btn-lg:disabled, .ui-btn-s:disabled { 1425 | border: 0; 1426 | color: #cccccc; 1427 | background: #e9ebec; 1428 | -webkit-background-clip: padding-box; 1429 | background-clip: padding-box; } 1430 | 1431 | .ui-btn-lg { 1432 | font-size: 18px; 1433 | height: 44px; 1434 | line-height: 44px; 1435 | display: block; 1436 | width: 100%; 1437 | border-radius: 5px; } 1438 | 1439 | .ui-btn-wrap { 1440 | padding: 15px 10px; } 1441 | @media (max-width: 320px) { 1442 | .ui-btn-wrap { 1443 | padding: 10px; } } 1444 | 1445 | .ui-btn-s { 1446 | padding: 0; 1447 | width: 55px; 1448 | height: 25px; 1449 | line-height: 25px; 1450 | font-size: 13px; } 1451 | 1452 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 1453 | .ui-btn-primary:before { 1454 | border: 1px solid #0baae4; } 1455 | 1456 | .ui-btn-danger:before { 1457 | border: 1px solid #f43d30; } 1458 | 1459 | .ui-btn, .ui-btn-lg, .ui-btn-s { 1460 | border: 0; } 1461 | 1462 | .ui-btn.disabled, .disabled.ui-btn-lg, .disabled.ui-btn-s, 1463 | .ui-btn:disabled, 1464 | .ui-btn-lg:disabled, 1465 | .ui-btn-s:disabled, 1466 | .ui-btn.disabled:before, 1467 | .disabled.ui-btn-lg:before, 1468 | .disabled.ui-btn-s:before, 1469 | .ui-btn:disabled:before, 1470 | .ui-btn-lg:disabled:before, 1471 | .ui-btn-s:disabled:before { 1472 | border: 1px solid #e9ebec; } 1473 | 1474 | .ui-btn-lg:before { 1475 | border-radius: 10px; } } 1476 | .ui-btn-progress { 1477 | width: 55px; 1478 | padding: 0; 1479 | overflow: hidden; } 1480 | .ui-btn-progress .ui-btn-inner { 1481 | position: absolute; 1482 | left: 0; 1483 | top: 0; 1484 | height: 100%; 1485 | overflow: hidden; 1486 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1fbaf3), to(#18b4ed)); 1487 | border-bottom-left-radius: 3px; 1488 | border-top-left-radius: 3px; } 1489 | .ui-btn-progress .ui-btn-inner span { 1490 | display: inline-block; 1491 | color: white; 1492 | position: absolute; 1493 | width: 55px; 1494 | left: 0; } 1495 | .ui-btn-progress.disabled, .ui-btn-progress:disabled { 1496 | background-color: #fefefe; 1497 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, white), to(#fafafa)); 1498 | color: #cccccc; 1499 | border: 1px solid #cacccd; 1500 | -webkit-background-clip: padding-box; 1501 | background-clip: padding-box; } 1502 | 1503 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 1504 | .ui-btn-progress.disabled, 1505 | .ui-btn-progress:disabled { 1506 | border: 0; } 1507 | 1508 | .ui-btn-progress.disabled:before, 1509 | .ui-btn-progress:disabled:before { 1510 | border: 1px solid #cacccd; } } 1511 | .ui-btn-group { 1512 | display: -webkit-box; 1513 | width: 100%; 1514 | -webkit-box-sizing: border-box; 1515 | box-sizing: border-box; 1516 | -webkit-box-align: center; } 1517 | 1518 | .ui-btn-group button { 1519 | display: block; 1520 | -webkit-box-flex: 1; 1521 | margin-right: 10px; } 1522 | .ui-btn-group button:first-child { 1523 | margin-left: 10px; } 1524 | 1525 | .ui-tips { 1526 | padding: 20px 15px; 1527 | text-align: center; 1528 | font-size: 16px; 1529 | color: black; } 1530 | .ui-tips i { 1531 | display: inline-block; 1532 | width: 32px; 1533 | height: 1px; 1534 | vertical-align: top; } 1535 | 1536 | .ui-tips i:before { 1537 | font-family: "iconfont" !important; 1538 | font-size: 32px; 1539 | line-height: 44px; 1540 | font-style: normal; 1541 | -webkit-font-smoothing: antialiased; 1542 | -webkit-text-stroke-width: 0.2px; 1543 | display: block; 1544 | color: rgba(0, 0, 0, 0.5); 1545 | content: "\e606"; 1546 | color: #0090ff; 1547 | line-height: 21px; } 1548 | 1549 | .ui-tips-success i:before { 1550 | content: "\e607"; 1551 | color: #65d521; } 1552 | 1553 | .ui-tips-warn i:before { 1554 | content: "\e608"; 1555 | color: #f76249; } 1556 | 1557 | /** 1558 | * 页面消息提示 1559 | */ 1560 | .ui-newstips-wrap { 1561 | margin: 20px 15px; 1562 | text-align: center; } 1563 | 1564 | .ui-newstips { 1565 | background: #383939; 1566 | position: relative; 1567 | height: 40px; 1568 | line-height: 40px; 1569 | display: -webkit-inline-box; 1570 | -webkit-box-align: center; 1571 | padding-right: 25px; 1572 | border-radius: 5px; 1573 | font-size: 14px; 1574 | color: #fff; 1575 | padding-left: 15px; } 1576 | .ui-newstips .ui-avatar-tiled, .ui-newstips .ui-newstips-thumb, .ui-newstips i { 1577 | display: block; 1578 | margin-left: -5px; 1579 | margin-right: 10px; } 1580 | .ui-newstips .ui-newstips-thumb { 1581 | width: 30px; 1582 | height: 30px; 1583 | position: relative; } 1584 | .ui-newstips .ui-newstips-thumb > span { 1585 | display: block; 1586 | width: 100%; 1587 | height: 100%; 1588 | z-index: 1; 1589 | background-repeat: no-repeat; 1590 | -webkit-background-size: cover; } 1591 | .ui-newstips div { 1592 | display: -webkit-box; 1593 | overflow: hidden; 1594 | text-overflow: ellipsis; 1595 | -webkit-box-orient: vertical; 1596 | -webkit-line-clamp: 1; 1597 | -webkit-box-flex: 1; 1598 | height: inherit; } 1599 | 1600 | .ui-newstips:after { 1601 | font-family: "iconfont" !important; 1602 | font-size: 32px; 1603 | line-height: 44px; 1604 | font-style: normal; 1605 | -webkit-font-smoothing: antialiased; 1606 | -webkit-text-stroke-width: 0.2px; 1607 | display: block; 1608 | color: rgba(0, 0, 0, 0.5); 1609 | color: #c7c7c7; 1610 | content: "\e600"; 1611 | position: absolute; 1612 | right: 15px; 1613 | top: 50%; 1614 | margin-top: -22px; 1615 | margin-right: -10px; } 1616 | @media (max-width: 320px) { 1617 | .ui-newstips:after { 1618 | right: 10px; } } 1619 | 1620 | .ui-newstips .ui-reddot, .ui-newstips .ui-reddot-border, .ui-newstips .ui-reddot-s, .ui-newstips .ui-badge-num { 1621 | margin-left: 10px; 1622 | margin-right: 5px; } 1623 | 1624 | .ui-tooltips { 1625 | width: 100%; 1626 | position: relative; 1627 | z-index: 99; 1628 | overflow: hidden; 1629 | -webkit-box-sizing: border-box; 1630 | box-sizing: border-box; } 1631 | 1632 | .ui-tooltips-cnt { 1633 | background-color: white; 1634 | line-height: 44px; 1635 | height: 44px; 1636 | padding-left: 10px; 1637 | padding-right: 30px; 1638 | max-width: 100%; 1639 | overflow: hidden; 1640 | white-space: nowrap; 1641 | text-overflow: ellipsis; } 1642 | .ui-tooltips-cnt .ui-icon-close:before { 1643 | font-size: 40px; 1644 | color: rgba(0, 0, 0, 0.2); 1645 | margin-left: -10px; 1646 | position: absolute; 1647 | right: 0; 1648 | top: 0; } 1649 | 1650 | .ui-tooltips-warn .ui-tooltips-cnt { 1651 | background-color: rgba(255, 242, 183, 0.95); 1652 | color: #000; } 1653 | 1654 | .ui-tooltips-warn:active .ui-tooltips-cnt { 1655 | background-color: #e1d498; } 1656 | 1657 | .ui-tooltips-guide .ui-tooltips-cnt { 1658 | color: #00a5e0; 1659 | background-color: rgba(205, 242, 255, 0.95); } 1660 | .ui-tooltips-guide .ui-tooltips-cnt .ui-icon-close:before { 1661 | color: rgba(0, 165, 224, 0.2); } 1662 | 1663 | .ui-tooltips-guide:active .ui-tooltips-cnt { 1664 | background-color: #b5dbe8; } 1665 | 1666 | .ui-tooltips-cnt-link:after { 1667 | font-family: "iconfont" !important; 1668 | font-size: 32px; 1669 | line-height: 44px; 1670 | font-style: normal; 1671 | -webkit-font-smoothing: antialiased; 1672 | -webkit-text-stroke-width: 0.2px; 1673 | display: block; 1674 | color: rgba(0, 0, 0, 0.5); 1675 | color: #c7c7c7; 1676 | content: "\e600"; 1677 | position: absolute; 1678 | right: 15px; 1679 | top: 50%; 1680 | margin-top: -22px; 1681 | margin-right: -10px; 1682 | color: rgba(0, 0, 0, 0.5); } 1683 | @media (max-width: 320px) { 1684 | .ui-tooltips-cnt-link:after { 1685 | right: 10px; } } 1686 | 1687 | .ui-tooltips-guide .ui-tooltips-cnt-link:after { 1688 | color: #00aeef; } 1689 | 1690 | .ui-tooltips-warn i { 1691 | display: inline-block; 1692 | margin-right: 4px; 1693 | margin-left: -4px; 1694 | width: 32px; 1695 | height: 1px; 1696 | vertical-align: top; } 1697 | 1698 | .ui-tooltips-warn i:before { 1699 | font-family: "iconfont" !important; 1700 | font-size: 32px; 1701 | line-height: 44px; 1702 | font-style: normal; 1703 | -webkit-font-smoothing: antialiased; 1704 | -webkit-text-stroke-width: 0.2px; 1705 | display: block; 1706 | color: rgba(0, 0, 0, 0.5); 1707 | content: "\e608"; 1708 | color: #f76249; } 1709 | 1710 | /** 1711 | * 表格 1712 | */ 1713 | .ui-table { 1714 | width: 100%; 1715 | border-collapse: collapse; } 1716 | 1717 | .ui-table th { 1718 | font-weight: 500; } 1719 | 1720 | .ui-table td, .ui-table th { 1721 | border-bottom: 1px solid #e0e0e0; 1722 | border-right: 1px solid #e0e0e0; 1723 | text-align: center; } 1724 | 1725 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 1726 | .ui-table td, .ui-table th { 1727 | position: relative; 1728 | border-right: 0; 1729 | border-bottom: 0; } 1730 | 1731 | .ui-table td:after, .ui-table th:after { 1732 | content: ""; 1733 | position: absolute; 1734 | width: 100%; 1735 | height: 100%; 1736 | left: 0; 1737 | top: 0; 1738 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 1739 | -webkit-background-size: 1px 100% ,100% 1px; 1740 | background-size: 1px 100% ,100% 1px; 1741 | background-repeat: no-repeat; 1742 | background-position: right, bottom; 1743 | pointer-events: none; } 1744 | 1745 | .ui-table tr td:last-child:after, .ui-table tr th:last-child:after { 1746 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 1747 | -webkit-background-size: 100% 1px; 1748 | background-size: 100% 1px; 1749 | background-repeat: no-repeat; 1750 | background-position: bottom; } 1751 | 1752 | .ui-table tr:last-child td:not(:last-child):after { 1753 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 1754 | -webkit-background-size: 1px 100%; 1755 | background-size: 1px 100%; 1756 | background-repeat: no-repeat; 1757 | background-position: right; } } 1758 | .ui-table tr td:last-child, .ui-table tr th:last-child { 1759 | border-right: 0; } 1760 | 1761 | .ui-table tr:last-child td { 1762 | border-bottom: 0; } 1763 | 1764 | .ui-list { 1765 | background-color: #fff; 1766 | width: 100%; } 1767 | .ui-list > li { 1768 | position: relative; 1769 | margin-left: 15px; 1770 | line-height: 24px; 1771 | display: -webkit-box; } 1772 | 1773 | .ui-list-pure > li { 1774 | display: block; } 1775 | 1776 | /*文字列表*/ 1777 | .ui-list-text > li, 1778 | .ui-list-pure > li { 1779 | position: relative; 1780 | padding-top: 10px; 1781 | padding-bottom: 10px; 1782 | padding-right: 15px; 1783 | -webkit-box-align: center; } 1784 | 1785 | .ui-list-text h4, 1786 | .ui-list-text p { 1787 | -webkit-box-flex: 1; } 1788 | 1789 | /*通栏列表*/ 1790 | .ui-list-cover > li { 1791 | padding-left: 15px; 1792 | margin-left: 0px; } 1793 | 1794 | .ui-list > li.ui-border-t:first-child, 1795 | .ui-list > li:first-child > .ui-border-t { 1796 | border: none; 1797 | background-image: none; } 1798 | 1799 | /*列表缩略图*/ 1800 | .ui-list-thumb, 1801 | .ui-list-thumb-s, 1802 | .ui-list-img, 1803 | .ui-list-icon { 1804 | position: relative; 1805 | margin: 10px 10px 10px 0px; } 1806 | .ui-list-thumb > span, 1807 | .ui-list-thumb-s > span, 1808 | .ui-list-img > span, 1809 | .ui-list-icon > span { 1810 | display: block; 1811 | width: 100%; 1812 | height: 100%; 1813 | z-index: 1; 1814 | background-repeat: no-repeat; 1815 | -webkit-background-size: cover; } 1816 | 1817 | .ui-list-thumb { 1818 | width: 50px; 1819 | height: 50px; } 1820 | 1821 | /*列表普通图片*/ 1822 | .ui-list-img { 1823 | width: 100px; 1824 | height: 68px; } 1825 | 1826 | .ui-list-thumb-s { 1827 | width: 28px; 1828 | height: 28px; } 1829 | 1830 | /*列表icon*/ 1831 | .ui-list-icon { 1832 | width: 40px; 1833 | height: 40px; } 1834 | 1835 | .ui-list .ui-avatar, 1836 | .ui-list .ui-avatar-s, 1837 | .ui-list .ui-avatar-lg { 1838 | margin: 10px 10px 10px 0px; } 1839 | 1840 | /*列表主要信息*/ 1841 | .ui-list-info { 1842 | -webkit-box-flex: 1; 1843 | padding-top: 10px; 1844 | padding-bottom: 10px; 1845 | display: -webkit-box; 1846 | -webkit-box-orient: vertical; 1847 | -webkit-box-pack: center; 1848 | padding-right: 15px; } 1849 | .ui-list-info p { 1850 | color: #777777; 1851 | font-size: 14px; } 1852 | 1853 | .ui-list-text .ui-list-info { 1854 | padding-top: 0; 1855 | padding-bottom: 0; } 1856 | 1857 | .ui-list li h4 { 1858 | font-size: 16px; } 1859 | 1860 | .ui-list:not(.ui-list-text) li > p, 1861 | .ui-list li > h5 { 1862 | font-size: 14px; 1863 | color: #777777; } 1864 | 1865 | /*列表按压态*/ 1866 | .ui-list-active > li:active, 1867 | .ui-list li.active { 1868 | background-color: #e5e6e7; 1869 | padding-left: 15px; 1870 | margin-left: 0px; } 1871 | 1872 | .ui-list-active > li:active, 1873 | .ui-list > li.active, 1874 | .ui-list > li.active > .ui-border-t, 1875 | .ui-list > li.active + li > .ui-border-t, 1876 | .ui-list > li.active + li.ui-border-t { 1877 | background-image: none; 1878 | border-top-color: #e5e6e7; } 1879 | 1880 | /*连接列表*/ 1881 | .ui-list-link > li:after { 1882 | font-family: "iconfont" !important; 1883 | font-size: 32px; 1884 | line-height: 44px; 1885 | font-style: normal; 1886 | -webkit-font-smoothing: antialiased; 1887 | -webkit-text-stroke-width: 0.2px; 1888 | display: block; 1889 | color: rgba(0, 0, 0, 0.5); 1890 | color: #c7c7c7; 1891 | content: "\e600"; 1892 | position: absolute; 1893 | right: 15px; 1894 | top: 50%; 1895 | margin-top: -22px; 1896 | margin-right: -10px; } 1897 | @media (max-width: 320px) { 1898 | .ui-list-link > li:after { 1899 | right: 10px; } } 1900 | 1901 | .ui-list-text.ui-list-link > li { 1902 | padding-right: 30px; } 1903 | 1904 | .ui-list-link .ui-list-info { 1905 | padding-right: 30px; } 1906 | 1907 | /* 功能类 */ 1908 | .ui-list-function .ui-list-info { 1909 | padding-right: 75px; } 1910 | 1911 | .ui-list-function .ui-btn, .ui-list-function .ui-btn-lg, .ui-list-function .ui-btn-s { 1912 | position: absolute; 1913 | top: 50%; 1914 | right: 15px; 1915 | margin-top: -15px; } 1916 | 1917 | .ui-list-function .ui-btn-s { 1918 | margin-top: -12px; } 1919 | 1920 | .ui-list-function.ui-list-link .ui-list-info { 1921 | padding-right: 90px; } 1922 | 1923 | .ui-list-function.ui-list-link .ui-btn, .ui-list-function.ui-list-link .ui-btn-lg, .ui-list-function.ui-list-link .ui-btn-s { 1924 | right: 30px; } 1925 | 1926 | .ui-list-function li { 1927 | -webkit-box-align: inherit; } 1928 | 1929 | .ui-list-one > li { 1930 | padding-top: 0; 1931 | padding-bottom: 0; 1932 | line-height: 44px; } 1933 | .ui-list-one .ui-list-info { 1934 | -webkit-box-orient: horizontal; 1935 | -webkit-box-align: center; } 1936 | .ui-list-one h4 { 1937 | -webkit-box-flex: 1; } 1938 | 1939 | @media (max-width: 320px) { 1940 | .ui-list > li { 1941 | margin-left: 10px; } 1942 | 1943 | .ui-list-text > li, 1944 | .ui-list-pure > li, 1945 | .ui-list-info { 1946 | padding-right: 10px; } 1947 | 1948 | .ui-list-cover > li, 1949 | .ui-list-active > li:active, 1950 | .ui-list li.active { 1951 | padding-left: 10px; } 1952 | 1953 | .ui-list-text.ui-list-link > li { 1954 | padding-right: 25px; } 1955 | 1956 | .ui-list-function .ui-list-info { 1957 | padding-right: 70px; } 1958 | 1959 | .ui-list-function .ui-btn, .ui-list-function .ui-btn-lg, .ui-list-function .ui-btn-s { 1960 | right: 10px; } 1961 | 1962 | .ui-list-function.ui-list-link .ui-list-info { 1963 | padding-right: 85px; } 1964 | 1965 | .ui-list-function.ui-list-link .ui-btn, .ui-list-function.ui-list-link .ui-btn-lg, .ui-list-function.ui-list-link .ui-btn-s { 1966 | right: 25px; } } 1967 | /** 1968 | * 出错页面 1969 | */ 1970 | .ui-notice { 1971 | width: 100%; 1972 | height: 100%; 1973 | z-index: 99; 1974 | display: -webkit-box; 1975 | -webkit-box-orient: vertical; 1976 | -webkit-box-pack: center; 1977 | -webkit-box-align: center; 1978 | position: absolute; 1979 | text-align: center; } 1980 | 1981 | .ui-notice > i { 1982 | display: block; 1983 | margin-bottom: 20px; } 1984 | .ui-notice > i:before { 1985 | font-family: "iconfont" !important; 1986 | font-size: 32px; 1987 | line-height: 44px; 1988 | font-style: normal; 1989 | -webkit-font-smoothing: antialiased; 1990 | -webkit-text-stroke-width: 0.2px; 1991 | display: block; 1992 | color: rgba(0, 0, 0, 0.5); 1993 | content: "\e609"; 1994 | font-size: 100px; 1995 | line-height: 100px; 1996 | color: rgba(0, 0, 0, 0.3); } 1997 | 1998 | .ui-notice p { 1999 | font-size: 16px; 2000 | line-height: 20px; 2001 | color: #bbbbbb; 2002 | text-align: center; 2003 | padding: 0 15px; } 2004 | 2005 | .ui-notice-btn { 2006 | width: 100%; 2007 | -webkit-box-sizing: border-box; 2008 | padding: 50px 15px 15px; } 2009 | 2010 | .ui-notice-btn button { 2011 | margin: 10px 0px; } 2012 | 2013 | .ui-form { 2014 | background-color: white; } 2015 | 2016 | .ui-form-item-order.active { 2017 | background-color: #e5e6e7; } 2018 | 2019 | /* 表单输入项 */ 2020 | .ui-form-item { 2021 | position: relative; 2022 | font-size: 16px; 2023 | height: 44px; 2024 | line-height: 44px; 2025 | padding-right: 15px; 2026 | padding-left: 15px; } 2027 | .ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-radio) { 2028 | width: 95px; 2029 | position: absolute; 2030 | text-align: left; 2031 | -webkit-box-sizing: border-box; 2032 | box-sizing: border-box; } 2033 | .ui-form-item input, 2034 | .ui-form-item textarea { 2035 | width: 100%; 2036 | -webkit-box-sizing: border-box; 2037 | box-sizing: border-box; 2038 | -webkit-appearance: none; 2039 | border: 0; 2040 | background: none; 2041 | padding-left: 95px; } 2042 | .ui-form-item input[type="checkbox"], .ui-form-item input[type="radio"] { 2043 | padding-left: 0; } 2044 | .ui-form-item .ui-icon-close { 2045 | position: absolute; 2046 | top: 0; 2047 | right: 6px; } 2048 | @media (max-width: 320px) { 2049 | .ui-form-item .ui-icon-close { 2050 | right: 1px; } } 2051 | @media (max-width: 320px) { 2052 | .ui-form-item { 2053 | padding-left: 10px; 2054 | padding-right: 10px; } } 2055 | 2056 | .ui-form-item-textarea { 2057 | height: 65px; } 2058 | 2059 | .ui-form-item-textarea label { 2060 | vertical-align: top; } 2061 | 2062 | .ui-form-item-textarea textarea { 2063 | margin-top: 15px; 2064 | border: none; } 2065 | 2066 | .ui-form-item-textarea textarea:focus { 2067 | outline: none; } 2068 | 2069 | .ui-form-item-link > li:after { 2070 | font-family: "iconfont" !important; 2071 | font-size: 32px; 2072 | line-height: 44px; 2073 | font-style: normal; 2074 | -webkit-font-smoothing: antialiased; 2075 | -webkit-text-stroke-width: 0.2px; 2076 | display: block; 2077 | color: rgba(0, 0, 0, 0.5); 2078 | color: #c7c7c7; 2079 | content: "\e600"; 2080 | position: absolute; 2081 | right: 15px; 2082 | top: 50%; 2083 | margin-top: -22px; 2084 | margin-right: -10px; } 2085 | @media (max-width: 320px) { 2086 | .ui-form-item-link > li:after { 2087 | right: 10px; } } 2088 | 2089 | .ui-form-item-l label, 2090 | .ui-form-item-r button { 2091 | color: #00a5e0; 2092 | text-align: center; } 2093 | 2094 | .ui-form-item-r .ui-icon-close { 2095 | right: 125px; } 2096 | 2097 | .ui-form-item-l input:not([type="checkbox"]):not([type="radio"]) { 2098 | padding-left: 115px; 2099 | -webkit-box-sizing: border-box; 2100 | box-sizing: border-box; } 2101 | 2102 | .ui-form-item-r { 2103 | padding-right: 0; } 2104 | 2105 | .ui-form-item-r input:not([type="checkbox"]):not([type="radio"]) { 2106 | padding-left: 0; 2107 | padding-right: 150px; 2108 | -webkit-box-sizing: border-box; 2109 | box-sizing: border-box; } 2110 | 2111 | .ui-form-item-r button { 2112 | width: 110px; 2113 | height: 44px; 2114 | position: absolute; 2115 | top: 0; 2116 | right: 0; } 2117 | 2118 | .ui-form-item-r button.disabled { 2119 | color: #bbbbbb; } 2120 | 2121 | .ui-form-item-r button:not(.disabled):active { 2122 | background-color: #e5e6e7; } 2123 | 2124 | .ui-form-item-pure input, 2125 | .ui-form-item-pure textarea { 2126 | padding-left: 0; } 2127 | 2128 | /* 表单展示项 */ 2129 | .ui-form-item-show label { 2130 | color: #777777; } 2131 | 2132 | .ui-form-item-link:after { 2133 | font-family: "iconfont" !important; 2134 | font-size: 32px; 2135 | line-height: 44px; 2136 | font-style: normal; 2137 | -webkit-font-smoothing: antialiased; 2138 | -webkit-text-stroke-width: 0.2px; 2139 | display: block; 2140 | color: rgba(0, 0, 0, 0.5); 2141 | color: #c7c7c7; 2142 | content: "\e600"; 2143 | position: absolute; 2144 | right: 15px; 2145 | top: 50%; 2146 | margin-top: -22px; 2147 | margin-right: -10px; } 2148 | @media (max-width: 320px) { 2149 | .ui-form-item-link:after { 2150 | right: 10px; } } 2151 | 2152 | .ui-form-item-checkbox, 2153 | .ui-form-item-radio, 2154 | .ui-form-item-switch { 2155 | display: -webkit-box; 2156 | -webkit-box-align: center; } 2157 | 2158 | .ui-checkbox, .ui-checkbox-s { 2159 | display: inline-block; } 2160 | 2161 | .ui-checkbox input, .ui-checkbox-s input { 2162 | display: inline-block; 2163 | width: 25px; 2164 | height: 1px; 2165 | position: relative; 2166 | overflow: visible; 2167 | border: 0; 2168 | background: none; 2169 | -webkit-appearance: none; 2170 | outline: none; 2171 | margin-right: 8px; 2172 | vertical-align: middle; } 2173 | 2174 | .ui-checkbox input:before, .ui-checkbox-s input:before { 2175 | font-family: "iconfont" !important; 2176 | font-size: 32px; 2177 | line-height: 44px; 2178 | font-style: normal; 2179 | -webkit-font-smoothing: antialiased; 2180 | -webkit-text-stroke-width: 0.2px; 2181 | display: block; 2182 | color: rgba(0, 0, 0, 0.5); 2183 | content: "\e610"; 2184 | color: #18b4ed; 2185 | position: absolute; 2186 | top: -22px; 2187 | left: -4px; 2188 | color: #dedfe0; } 2189 | 2190 | .ui-checkbox input:checked:before, .ui-checkbox-s input:checked:before { 2191 | content: "\e601"; 2192 | color: #18b4ed; } 2193 | 2194 | .ui-checkbox-s { 2195 | width: 19px; } 2196 | 2197 | .ui-checkbox-s input:before { 2198 | content: "\e611"; } 2199 | 2200 | .ui-checkbox-s input:checked:before { 2201 | content: "\e602"; } 2202 | 2203 | .ui-switch { 2204 | position: absolute; 2205 | font-size: 16px; 2206 | right: 15px; 2207 | top: 50%; 2208 | margin-top: -16px; 2209 | width: 52px; 2210 | height: 32px; 2211 | line-height: 32px; } 2212 | @media (max-width: 320px) { 2213 | .ui-switch { 2214 | right: 10px; } } 2215 | .ui-switch input { 2216 | width: 52px; 2217 | height: 32px; 2218 | position: absolute; 2219 | z-index: 2; 2220 | border: none; 2221 | background: none; 2222 | -webkit-appearance: none; 2223 | outline: none; } 2224 | .ui-switch input:before { 2225 | content: ''; 2226 | width: 50px; 2227 | height: 30px; 2228 | border: 1px solid #dfdfdf; 2229 | background-color: #fdfdfd; 2230 | border-radius: 20px; 2231 | cursor: pointer; 2232 | display: inline-block; 2233 | position: relative; 2234 | vertical-align: middle; 2235 | -webkit-box-sizing: content-box; 2236 | box-sizing: content-box; 2237 | border-color: #dfdfdf; 2238 | -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; 2239 | box-shadow: #dfdfdf 0px 0px 0px 0px inset; 2240 | -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; 2241 | transition: border 0.4s, box-shadow 0.4s; 2242 | -webkit-background-clip: content-box; 2243 | background-clip: content-box; } 2244 | .ui-switch input:checked:before { 2245 | border-color: #64bd63; 2246 | -webkit-box-shadow: #64bd63 0px 0px 0px 16px inset; 2247 | box-shadow: #64bd63 0px 0px 0px 16px inset; 2248 | background-color: #64bd63; 2249 | transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; 2250 | -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; 2251 | background-color: #64bd63; } 2252 | .ui-switch input:checked:after { 2253 | left: 21px; } 2254 | .ui-switch input:after { 2255 | content: ''; 2256 | width: 30px; 2257 | height: 30px; 2258 | position: absolute; 2259 | top: 1px; 2260 | left: 0; 2261 | border-radius: 100%; 2262 | background-color: #fff; 2263 | -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 2264 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 2265 | -webkit-transition: left 0.2s; 2266 | transition: left 0.2s; } 2267 | 2268 | .ui-radio { 2269 | line-height: 25px; 2270 | display: inline-block; } 2271 | 2272 | .ui-radio input { 2273 | display: inline-block; 2274 | width: 26px; 2275 | height: 26px; 2276 | position: relative; 2277 | overflow: visible; 2278 | border: 0; 2279 | background: none; 2280 | -webkit-appearance: none; 2281 | outline: none; 2282 | margin-right: 8px; 2283 | vertical-align: middle; } 2284 | 2285 | .ui-radio input:before { 2286 | content: ''; 2287 | display: block; 2288 | width: 24px; 2289 | height: 24px; 2290 | border: 1px solid #dfe0e1; 2291 | border-radius: 13px; 2292 | -webkit-background-clip: padding-box; 2293 | background-clip: padding-box; 2294 | position: absolute; 2295 | left: 0px; 2296 | top: 0; } 2297 | 2298 | .ui-radio input:checked:after { 2299 | content: ''; 2300 | display: block; 2301 | width: 14px; 2302 | height: 14px; 2303 | background: #18b4ed; 2304 | border-radius: 7px; 2305 | position: absolute; 2306 | left: 6px; 2307 | top: 6px; } 2308 | 2309 | .ui-select { 2310 | position: relative; 2311 | margin-right: 6px; } 2312 | 2313 | .ui-select select { 2314 | -webkit-appearance: none; 2315 | border: 0; 2316 | background: none; 2317 | width: 100%; 2318 | padding-right: 14px; } 2319 | 2320 | .ui-select:after { 2321 | position: absolute; 2322 | top: 50%; 2323 | right: 0; 2324 | margin-top: -4px; 2325 | width: 0; 2326 | height: 0; 2327 | border-top: 6px solid; 2328 | border-right: 5px solid transparent; 2329 | border-left: 5px solid transparent; 2330 | color: #a6a6a6; 2331 | content: ""; 2332 | pointer-events: none; } 2333 | 2334 | .ui-select-group { 2335 | margin-left: 95px; 2336 | overflow: hidden; } 2337 | .ui-select-group .ui-select { 2338 | float: left; } 2339 | 2340 | .ui-form-item > .ui-select { 2341 | margin-left: 95px; } 2342 | 2343 | .ui-input-wrap { 2344 | background-color: #ebeced; 2345 | height: 44px; 2346 | display: -webkit-box; 2347 | -webkit-box-align: center; } 2348 | .ui-input-wrap .ui-btn, .ui-input-wrap .ui-btn-lg, .ui-input-wrap .ui-btn-s, .ui-input-wrap i { 2349 | margin-right: 10px; } 2350 | 2351 | .ui-input { 2352 | height: 30px; 2353 | line-height: 30px; 2354 | margin: 7px 10px; 2355 | background: #fff; 2356 | padding-left: 10px; 2357 | -webkit-box-flex: 1; } 2358 | 2359 | .ui-input input { 2360 | width: 100%; 2361 | height: 100%; 2362 | border: 0; 2363 | background: 0 0; 2364 | -webkit-appearance: none; 2365 | outline: 0; } 2366 | 2367 | .ui-searchbar-wrap { 2368 | display: -webkit-box; 2369 | -webkit-box-pack: center; 2370 | -webkit-box-align: center; 2371 | background-color: #ebeced; 2372 | height: 44px; } 2373 | .ui-searchbar-wrap button { 2374 | margin-right: 10px; } 2375 | .ui-searchbar-wrap .ui-searchbar-cancel { 2376 | color: #00a5e0; 2377 | font-size: 16px; 2378 | padding: 4px 8px; } 2379 | .ui-searchbar-wrap .ui-searchbar-input, .ui-searchbar-wrap button, .ui-searchbar-wrap .ui-icon-close { 2380 | display: none; } 2381 | .ui-searchbar-wrap.focus { 2382 | -webkit-box-pack: start; } 2383 | .ui-searchbar-wrap.focus .ui-searchbar-input, .ui-searchbar-wrap.focus button, .ui-searchbar-wrap.focus .ui-icon-close { 2384 | display: block; } 2385 | .ui-searchbar-wrap.focus .ui-searchbar-text { 2386 | display: none; } 2387 | 2388 | .ui-searchbar { 2389 | border-radius: 5px; 2390 | margin: 0 10px; 2391 | background: white; 2392 | height: 30px; 2393 | line-height: 30px; 2394 | position: relative; 2395 | padding-left: 4px; 2396 | -webkit-box-flex: 1; 2397 | display: -webkit-box; 2398 | -webkit-box-pack: center; 2399 | -webkit-box-align: center; 2400 | color: #bbbbbb; 2401 | width: 100%; } 2402 | .ui-searchbar input { 2403 | -webkit-appearance: none; 2404 | border: none; 2405 | background: none; 2406 | color: black; 2407 | width: 100%; 2408 | padding: 4px 0; } 2409 | .ui-searchbar.ui-border-radius { 2410 | border-radius: 5px; } 2411 | .ui-searchbar .ui-icon-search { 2412 | line-height: 30px; } 2413 | .ui-searchbar .ui-icon-close { 2414 | line-height: 30px; } 2415 | 2416 | .ui-searchbar-input { 2417 | -webkit-box-flex: 1; } 2418 | 2419 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 2420 | .ui-searchbar.ui-border-radius:before { 2421 | border-radius: 10px; } } 2422 | /** 2423 | * 轮播组件 2424 | */ 2425 | .ui-slider { 2426 | width: 100%; 2427 | overflow: hidden; 2428 | position: relative; 2429 | padding-top: 31.25%; } 2430 | 2431 | .ui-slider-content { 2432 | display: -webkit-box; 2433 | position: absolute; 2434 | left: 0; 2435 | top: 0; 2436 | height: 100%; } 2437 | 2438 | .ui-slider-content > li { 2439 | -webkit-box-flex: 1; 2440 | width: 100%; 2441 | height: 100%; } 2442 | 2443 | .ui-slider-content > li img { 2444 | display: block; 2445 | width: 100%; } 2446 | 2447 | .ui-slider-content > li span { 2448 | display: block; 2449 | width: 100%; 2450 | height: 100%; 2451 | background-repeat: no-repeat; 2452 | -webkit-background-size: 100% 100%; } 2453 | 2454 | .ui-slider-content > li.active { 2455 | opacity: .5; } 2456 | 2457 | .ui-slider-indicators { 2458 | position: absolute; 2459 | display: -webkit-box; 2460 | -webkit-box-pack: end; 2461 | width: 100%; 2462 | bottom: 10px; 2463 | right: 4px; 2464 | font-size: 0; } 2465 | 2466 | .ui-slider-indicators li { 2467 | display: block; 2468 | text-indent: 100%; 2469 | white-space: nowrap; 2470 | overflow: hidden; 2471 | font-size: 0; 2472 | width: 7px; 2473 | height: 7px; 2474 | background-color: rgba(0, 0, 0, 0.3); 2475 | border-radius: 10px; 2476 | margin-right: 6px; 2477 | -webkit-box-sizing: border-box; 2478 | -webkit-background-clip: padding-box; 2479 | background-clip: padding-box; 2480 | position: relative; } 2481 | 2482 | .ui-slider-indicators li.current:before { 2483 | content: ''; 2484 | position: absolute; 2485 | background-color: #fff; 2486 | left: 1px; 2487 | top: 1px; 2488 | width: 5px; 2489 | height: 5px; 2490 | border-radius: 10px; 2491 | -webkit-box-sizing: border-box; 2492 | -webkit-background-clip: padding-box; 2493 | background-clip: padding-box; } 2494 | 2495 | .ui-slider-indicators-center { 2496 | -webkit-box-pack: center; 2497 | right: 0; } 2498 | 2499 | .ui-panel { 2500 | overflow: hidden; 2501 | padding-top: 10px; } 2502 | .ui-panel .ui-grid-halve, .ui-panel .ui-grid-trisect { 2503 | padding-top: 0; } 2504 | .ui-panel h1, .ui-panel h2, .ui-panel h3 { 2505 | padding-left: 15px; 2506 | padding-right: 15px; 2507 | line-height: 44px; 2508 | position: relative; 2509 | overflow: hidden; 2510 | display: -webkit-box; } 2511 | @media (max-width: 320px) { 2512 | .ui-panel h1, .ui-panel h2, .ui-panel h3 { 2513 | padding-left: 10px; 2514 | padding-right: 10px; } } 2515 | .ui-panel h1 span, .ui-panel h2 span, .ui-panel h3 span { 2516 | display: block; } 2517 | 2518 | .ui-panel-pure h2, 2519 | .ui-panel-pure h3 { 2520 | color: #777777; } 2521 | 2522 | .ui-panel-card { 2523 | margin-bottom: 10px; } 2524 | 2525 | .ui-panel-card, 2526 | .ui-panel-simple { 2527 | background-color: white; } 2528 | 2529 | .ui-panel-simple { 2530 | padding-top: 0; } 2531 | 2532 | .ui-panel-subtitle { 2533 | font-size: 14px; 2534 | color: #777777; 2535 | margin-left: 10px; } 2536 | 2537 | .ui-panel-title-tips { 2538 | font-size: 12px; 2539 | color: #777777; 2540 | position: absolute; 2541 | right: 15px; } 2542 | @media (max-width: 320px) { 2543 | .ui-panel-title-tips { 2544 | right: 10px; } } 2545 | 2546 | .ui-arrowlink .ui-panel-title-tips { 2547 | right: 30px; } 2548 | @media (max-width: 320px) { 2549 | .ui-arrowlink .ui-panel-title-tips { 2550 | right: 25px; } } 2551 | 2552 | .ui-progress { 2553 | overflow: hidden; 2554 | width: 100%; 2555 | height: 2px; 2556 | font-size: 0px; 2557 | background-color: #e2e2e2; 2558 | -webkit-box-sizing: border-box; 2559 | box-sizing: border-box; } 2560 | 2561 | .ui-progress span { 2562 | display: block; 2563 | width: 0%; 2564 | background: #65d521; 2565 | height: 100%; 2566 | font-size: 0; } 2567 | 2568 | .ui-grid-trisect li .ui-progress, 2569 | .ui-grid-halve li .ui-progress { 2570 | position: absolute; 2571 | height: 13px; 2572 | bottom: 0px; 2573 | z-index: 9; 2574 | border: 5px solid rgba(248, 248, 248, 0.9); } 2575 | .ui-grid-trisect li .ui-progress span, 2576 | .ui-grid-halve li .ui-progress span { 2577 | border-radius: 3px; } 2578 | 2579 | /** 2580 | * 选项卡 2581 | */ 2582 | .ui-tab { 2583 | width: 100%; 2584 | overflow: hidden; } 2585 | 2586 | .ui-tab-nav { 2587 | width: 100%; 2588 | background-color: white; 2589 | display: box; 2590 | display: -webkit-box; 2591 | font-size: 16px; 2592 | height: 45px; 2593 | -webkit-box-sizing: border-box; 2594 | box-sizing: border-box; } 2595 | 2596 | .ui-tab-content { 2597 | margin-top: 45px; 2598 | display: -webkit-box; } 2599 | 2600 | .ui-tab-content > li { 2601 | -webkit-box-flex: 1; 2602 | width: 100%; } 2603 | 2604 | .ui-tab-nav li { 2605 | height: 45px; 2606 | line-height: 45px; 2607 | min-width: 70px; 2608 | box-flex: 1; 2609 | -webkit-box-flex: 1; 2610 | text-align: center; 2611 | color: #777777; 2612 | -webkit-box-sizing: border-box; 2613 | box-sizing: border-box; 2614 | border-bottom: 2px solid transparent; 2615 | width: 100%; } 2616 | 2617 | .ui-tab-nav li.current { 2618 | color: #00a5e0; 2619 | border-bottom: 2px #00a5e0 solid; } 2620 | 2621 | .ui-tab-nav li:active { 2622 | opacity: .8; } 2623 | 2624 | .ui-loading-wrap { 2625 | display: -webkit-box; 2626 | -webkit-box-pack: center; 2627 | -webkit-box-align: center; 2628 | text-align: center; 2629 | height: 40px; } 2630 | 2631 | .ui-loading { 2632 | width: 20px; 2633 | height: 20px; 2634 | display: block; 2635 | background: url(../img/loading_sprite.png); 2636 | -webkit-background-size: auto 20px; 2637 | -webkit-animation: am-rotate 1s steps(12) infinite; } 2638 | 2639 | .ui-loading-bright { 2640 | width: 37px; 2641 | height: 37px; 2642 | display: block; 2643 | background-image: url(../img/loading_sprite_white.png); 2644 | -webkit-background-size: auto 37px; 2645 | -webkit-animation: am-rotate2 1s steps(12) infinite; } 2646 | 2647 | .ui-loading-wrap .ui-loading { 2648 | margin: 10px; } 2649 | 2650 | .ui-loading-block { 2651 | position: fixed; 2652 | top: 0px; 2653 | left: 0px; 2654 | width: 100%; 2655 | height: 100%; 2656 | z-index: 9999; 2657 | display: -webkit-box; 2658 | -webkit-box-orient: horizontal; 2659 | -webkit-box-pack: center; 2660 | -webkit-box-align: center; 2661 | background: rgba(0, 0, 0, 0.4); 2662 | display: none; 2663 | background: transparent; } 2664 | .ui-loading-block .ui-loading-cnt { 2665 | width: 130px; 2666 | height: 110px; 2667 | display: -webkit-box; 2668 | -webkit-box-orient: vertical; 2669 | -webkit-box-align: center; 2670 | text-align: center; 2671 | background: rgba(0, 0, 0, 0.65); 2672 | border-radius: 6px; 2673 | color: #fff; 2674 | font-size: 16px; } 2675 | .ui-loading-block .ui-loading-bright { 2676 | margin: 18px 0 8px; } 2677 | 2678 | .ui-loading-block.show { 2679 | display: -webkit-box; 2680 | display: box; } 2681 | 2682 | @-webkit-keyframes am-rotate { 2683 | from { 2684 | background-position: 0 0; } 2685 | 2686 | to { 2687 | background-position: -240px 0; } } 2688 | @-webkit-keyframes am-rotate2 { 2689 | from { 2690 | background-position: 0 0; } 2691 | 2692 | to { 2693 | background-position: -444px 0; } } 2694 | .ui-poptips { 2695 | width: 100%; 2696 | position: fixed; 2697 | top: 0px; 2698 | left: 0px; 2699 | z-index: 999; 2700 | padding: 0px 10px; 2701 | -webkit-box-sizing: border-box; 2702 | box-sizing: border-box; } 2703 | 2704 | .ui-poptips-cnt { 2705 | background-color: rgba(0, 0, 0, 0.6); 2706 | line-height: 40px; 2707 | height: 40px; 2708 | color: #fff; 2709 | font-size: 16px; 2710 | text-align: center; 2711 | border-bottom-left-radius: 3px; 2712 | border-bottom-right-radius: 3px; 2713 | max-width: 100%; 2714 | overflow: hidden; 2715 | white-space: nowrap; 2716 | text-overflow: ellipsis; } 2717 | .ui-poptips-cnt i { 2718 | display: inline-block; 2719 | width: 32px; 2720 | height: 1px; 2721 | vertical-align: top; } 2722 | .ui-poptips-cnt i:before { 2723 | font-family: "iconfont" !important; 2724 | font-size: 32px; 2725 | line-height: 44px; 2726 | font-style: normal; 2727 | -webkit-font-smoothing: antialiased; 2728 | -webkit-text-stroke-width: 0.2px; 2729 | display: block; 2730 | color: rgba(0, 0, 0, 0.5); 2731 | margin-right: 2px; 2732 | margin-left: 4px; 2733 | color: #fff; 2734 | line-height: 40px; } 2735 | 2736 | .ui-poptips-info i:before { 2737 | content: "\e603"; } 2738 | 2739 | .ui-poptips-success i:before { 2740 | content: "\e604"; } 2741 | 2742 | .ui-poptips-warn i:before { 2743 | content: "\e605"; } 2744 | 2745 | /** 2746 | * 弹窗类 2747 | */ 2748 | .ui-dialog { 2749 | position: fixed; 2750 | top: 0px; 2751 | left: 0px; 2752 | width: 100%; 2753 | height: 100%; 2754 | z-index: 9999; 2755 | display: -webkit-box; 2756 | -webkit-box-orient: horizontal; 2757 | -webkit-box-pack: center; 2758 | -webkit-box-align: center; 2759 | background: rgba(0, 0, 0, 0.4); 2760 | display: none; } 2761 | 2762 | .ui-dialog.show { 2763 | display: -webkit-box; 2764 | display: box; } 2765 | 2766 | .ui-dialog-hd { 2767 | height: 48px; 2768 | line-height: 48px; 2769 | text-align: center; 2770 | position: relative; } 2771 | 2772 | .ui-dialog-cnt { 2773 | border-radius: 6px; 2774 | width: 270px; 2775 | -webkit-background-clip: padding-box; 2776 | background-clip: padding-box; 2777 | pointer-events: auto; 2778 | background-color: rgba(253, 253, 253, 0.95); 2779 | position: relative; 2780 | font-size: 16px; } 2781 | 2782 | .ui-dialog-bd { 2783 | min-height: 71px; 2784 | border-top-left-radius: 6px; 2785 | border-top-right-radius: 6px; 2786 | padding: 18px; 2787 | display: -webkit-box; 2788 | display: box; 2789 | -webkit-box-pack: center; 2790 | -webkit-box-align: center; 2791 | -webkit-box-orient: vertical; } 2792 | 2793 | .ui-dialog-bd > h4 { 2794 | margin-bottom: 4px; 2795 | width: 100%; 2796 | text-align: center; } 2797 | 2798 | .ui-dialog-bd > div, .ui-dialog-bd > ul { 2799 | width: 100%; } 2800 | 2801 | .ui-dialog-ft { 2802 | border-bottom-left-radius: 6px; 2803 | border-bottom-right-radius: 6px; 2804 | display: -webkit-box; 2805 | width: 100%; 2806 | -webkit-box-sizing: border-box; 2807 | box-sizing: border-box; 2808 | -webkit-box-align: center; 2809 | border-top: 1px solid #e0e0e0; 2810 | height: 42px; 2811 | line-height: 42px; } 2812 | 2813 | .ui-dialog-close:before { 2814 | font-family: "iconfont" !important; 2815 | font-size: 32px; 2816 | line-height: 44px; 2817 | font-style: normal; 2818 | -webkit-font-smoothing: antialiased; 2819 | -webkit-text-stroke-width: 0.2px; 2820 | display: block; 2821 | color: rgba(0, 0, 0, 0.5); 2822 | content: "\e60b"; 2823 | color: #828282; 2824 | display: block; 2825 | line-height: 32px; 2826 | position: absolute; 2827 | top: 3px; 2828 | right: 3px; } 2829 | 2830 | .ui-dialog-close:active { 2831 | opacity: 0.5; } 2832 | 2833 | .ui-dialog-ft button { 2834 | color: #00a5e0; 2835 | text-align: center; 2836 | border-right: 1px #e0e0e0 solid; 2837 | width: 100%; 2838 | line-height: 42px; 2839 | background: transparent; 2840 | display: block; 2841 | margin: 0 !important; 2842 | -webkit-box-flex: 1; } 2843 | .ui-dialog-ft button:active { 2844 | background-color: rgba(0, 0, 0, 0.1) !important; } 2845 | .ui-dialog-ft button:first-child { 2846 | border-bottom-left-radius: 6px; } 2847 | .ui-dialog-ft button:last-child { 2848 | border-right: 0; 2849 | border-bottom-right-radius: 6px; } 2850 | 2851 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 2852 | .ui-dialog-ft { 2853 | position: relative; 2854 | border: 0; 2855 | background-position: left top; 2856 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 2857 | background-repeat: repeat-x; 2858 | -webkit-background-size: 100% 1px; } 2859 | 2860 | .ui-dialog-ft button { 2861 | border-right: 0; 2862 | background-position: right top; 2863 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 2864 | background-repeat: repeat-y; 2865 | -webkit-background-size: 1px 100%; } 2866 | .ui-dialog-ft button:last-child { 2867 | background: none; } } 2868 | .ui-selector header { 2869 | padding: 6px 10px; 2870 | color: #a6a6a6; 2871 | overflow: hidden; } 2872 | 2873 | .ui-selector header h3 { 2874 | float: left; } 2875 | 2876 | .ui-selector-content { 2877 | background: white; } 2878 | 2879 | .ui-selector-item p { 2880 | margin-left: 10px; 2881 | -webkit-box-flex: 1; 2882 | overflow: hidden; 2883 | white-space: nowrap; 2884 | text-overflow: ellipsis; } 2885 | 2886 | .ui-selector-item .ui-txt-info { 2887 | margin: 0 10px; 2888 | font-size: 12px; } 2889 | 2890 | .ui-selector-item .ui-list-link li:after { 2891 | display: none; } 2892 | 2893 | .ui-selector-item h3:before { 2894 | content: ''; 2895 | display: block; 2896 | width: 0; 2897 | height: 0; 2898 | border-left: 6px solid; 2899 | border-top: 5px solid transparent; 2900 | border-bottom: 5px solid transparent; 2901 | color: #a6a6a6; 2902 | position: absolute; 2903 | left: 25px; 2904 | top: 15px; 2905 | -webkit-transition: all 0.2s; } 2906 | 2907 | .ui-selector-item.active h3:before { 2908 | -webkit-transform: rotate(90deg); } 2909 | 2910 | .ui-selector-item.active h3 { 2911 | border: none; 2912 | background-image: none; } 2913 | 2914 | .ui-selector-item.active ul { 2915 | display: block; } 2916 | 2917 | .ui-selector-item ul { 2918 | display: none; } 2919 | 2920 | .ui-selector-item h3 { 2921 | display: -webkit-box; 2922 | font-size: 16px; 2923 | padding-left: 54px; 2924 | line-height: 44px; 2925 | height: 44px; 2926 | position: relative; } 2927 | 2928 | .ui-actionsheet { 2929 | position: fixed; 2930 | top: 0px; 2931 | left: 0px; 2932 | width: 100%; 2933 | height: 100%; 2934 | z-index: 9999; 2935 | opacity: 0; 2936 | pointer-events: none; 2937 | display: -webkit-box; 2938 | -webkit-box-orient: horizontal; 2939 | -webkit-box-pack: center; 2940 | -webkit-box-align: end; 2941 | background: rgba(0, 0, 0, 0.4); } 2942 | .ui-actionsheet.show { 2943 | pointer-events: inherit; 2944 | opacity: 1; } 2945 | .ui-actionsheet.show .ui-actionsheet-cnt { 2946 | -webkit-transform: translateY(0); 2947 | -webkit-transition-delay: 0.3s; } 2948 | 2949 | .ui-actionsheet-cnt { 2950 | font-size: 21px; 2951 | position: fixed; 2952 | bottom: 0; 2953 | padding: 0 8px; 2954 | width: 100%; 2955 | -webkit-box-sizing: border-box; 2956 | box-sizing: border-box; 2957 | text-align: center; 2958 | -webkit-transform: translateY(100%); 2959 | -webkit-transition-property: all; 2960 | -webkit-transition-timing-function: ease-out; 2961 | -webkit-transition-duration: 0.3s; } 2962 | 2963 | .ui-actionsheet button, .ui-actionsheet h4 { 2964 | background: rgba(255, 255, 255, 0.84); 2965 | display: block; 2966 | width: 100%; 2967 | color: #0079ff; 2968 | -webkit-box-sizing: border-box; 2969 | box-sizing: border-box; } 2970 | 2971 | .ui-actionsheet button { 2972 | line-height: 44px; 2973 | height: 44px; } 2974 | 2975 | .ui-actionsheet h4 { 2976 | line-height: 24px; 2977 | padding-left: 20px; 2978 | padding-right: 20px; 2979 | padding-top: 10px; 2980 | padding-bottom: 10px; 2981 | border-top-left-radius: 3px; 2982 | border-top-right-radius: 3px; } 2983 | 2984 | .ui-actionsheet button:not(:last-child) { 2985 | border-top: 1px #e0e0e0 solid; } 2986 | 2987 | .ui-actionsheet button:last-child { 2988 | margin: 8px 0; 2989 | border-radius: 3px; } 2990 | 2991 | .ui-actionsheet button:nth-last-child(2) { 2992 | border-bottom-left-radius: 3px; 2993 | border-bottom-right-radius: 3px; } 2994 | 2995 | .ui-actionsheet button:active { 2996 | opacity: 0.84; } 2997 | 2998 | .ui-actionsheet h4 { 2999 | font-size: 13px; 3000 | color: #8a8a8a; } 3001 | 3002 | .ui-actionsheet .ui-actionsheet-del { 3003 | color: #fd472b; } 3004 | 3005 | @media screen and (-webkit-min-device-pixel-ratio: 2) { 3006 | .ui-actionsheet button:not(:last-child) { 3007 | border: 0; 3008 | background-position: left top; 3009 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); 3010 | background-repeat: repeat-x; 3011 | -webkit-background-size: 100% 1px; } } 3012 | -------------------------------------------------------------------------------- /FrozenUI-React/src/css/reset.scss: -------------------------------------------------------------------------------- 1 | $gray : #333; 2 | body,html{ 3 | padding: 0; margin:0; 4 | } 5 | .wrap{color:$gray;} -------------------------------------------------------------------------------- /FrozenUI-React/src/img/loading_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaJoy/BlogDemo2/c418e12542bc09a98cba82122a0d0c9282e25e3d/FrozenUI-React/src/img/loading_sprite.png -------------------------------------------------------------------------------- /FrozenUI-React/src/img/loading_sprite_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaJoy/BlogDemo2/c418e12542bc09a98cba82122a0d0c9282e25e3d/FrozenUI-React/src/img/loading_sprite_white.png -------------------------------------------------------------------------------- /FrozenUI-React/src/img/vip/icon_qqlevel_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaJoy/BlogDemo2/c418e12542bc09a98cba82122a0d0c9282e25e3d/FrozenUI-React/src/img/vip/icon_qqlevel_sprite.png -------------------------------------------------------------------------------- /FrozenUI-React/src/img/vip/icon_vip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VaJoy/BlogDemo2/c418e12542bc09a98cba82122a0d0c9282e25e3d/FrozenUI-React/src/img/vip/icon_vip.png -------------------------------------------------------------------------------- /FrozenUI-React/src/js/component/Loading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by vajoylan on 2015/7/6. 3 | */ 4 | 5 | var React = require('react'), 6 | loadingCN = require('../component/styleMaps').loadingCN, //引入加载组件类名对象 7 | PropTypes = React.PropTypes; 8 | 9 | var Loading = React.createClass({ 10 | 11 | propTypes: { 12 | isPart: PropTypes.bool, //是否局部加载 13 | onHide: PropTypes.func, //组件卸载后的回调 14 | content: PropTypes.string // 展示内容 15 | }, 16 | 17 | componentWillUnmount: function(){ 18 | if(typeof this.props.onHide === 'function'){ 19 | setTimeout(this.props.onHide, 10); 20 | } 21 | }, 22 | 23 | render: function () { 24 | var content = this.props.content || '正在加载中...', 25 | flag = this.props.isPart ? 'partial' : 'global', 26 | component = (
27 |
28 | 29 |

{content}

30 |
31 |
); 32 | 33 | return component 34 | } 35 | }); 36 | 37 | module.exports = Loading; -------------------------------------------------------------------------------- /FrozenUI-React/src/js/component/Tab.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by vajoylan on 2015/9/13. 3 | */ 4 | 5 | define(function (require, exports, module) { 6 | var React = require('react'), 7 | PropTypes = React.PropTypes, 8 | globalEventHandler = require("./globalEventHandler"); 9 | 10 | var Tab = React.createClass({ 11 | timer: null, 12 | 13 | mixins: [globalEventHandler], 14 | 15 | propTypes: { 16 | defaultActiveKey: PropTypes.number, //默认激活标签项 17 | autoPlay: PropTypes.bool, //是否自动播放 18 | playTime: PropTypes.number 19 | }, 20 | 21 | getDefaultProps: function () { 22 | return { 23 | autoPlay: true, 24 | playTime: 6000, 25 | defaultActiveKey: 1 26 | } 27 | }, 28 | 29 | getInitialState: function () { 30 | return { 31 | actKey: this.props.defaultActiveKey, 32 | tabWidth: 0 33 | } 34 | }, 35 | 36 | componentDidMount: function () { 37 | var tabWidth = this.getDOMNode().getBoundingClientRect().width; 38 | this.setState({tabWidth: tabWidth}); 39 | var content = this.getDOMNode().querySelector('.ui-tab-content'); 40 | setTimeout(function () { 41 | content.style.webkitTransition = '-webkit-transform .3s' 42 | }, 10); 43 | 44 | this.autoPlay() 45 | }, 46 | 47 | handleClick: function (index) { 48 | this.setState({actKey: index}); 49 | clearTimeout(this.timer); 50 | this.autoPlay(); 51 | }, 52 | 53 | renderPanes: function (child, index) { 54 | return React.cloneElement(child, { 55 | isAct: this.state.actKey == (index + 1), 56 | handleClick: this.handleClick.bind(this, index + 1) 57 | }); 58 | }, 59 | 60 | renderContents: function (child, index) { 61 | return ( 62 |
  • 63 | {child.props.children} 64 |
  • 65 | ) 66 | }, 67 | 68 | autoPlay: function () { 69 | if (!this.props.autoPlay) return; 70 | this.timer = setTimeout(function () { 71 | var nextKey = this.state.actKey == this.props.children.length ? 1 : (this.state.actKey + 1); 72 | this.setState({actKey: nextKey}); 73 | this.autoPlay(); 74 | }.bind(this), this.props.playTime) 75 | }, 76 | 77 | render: function () { 78 | this.windowResize(function () { 79 | var tabWidth = this.getDOMNode().getBoundingClientRect().width; 80 | this.setState({tabWidth: tabWidth}); 81 | }.bind(this)); 82 | 83 | var style = { 84 | width: 100 * this.props.children.length + '%', 85 | WebkitTransform: 'translateX(-' + this.state.tabWidth * (this.state.actKey - 1) + 'px)' 86 | }; 87 | return ( 88 |
    89 |
      90 | {React.Children.map(this.props.children, this.renderPanes)} 91 |
    92 |
      93 | {React.Children.map(this.props.children, this.renderContents)} 94 |
    95 |
    96 | ); 97 | } 98 | }); 99 | 100 | module.exports = Tab; 101 | }); -------------------------------------------------------------------------------- /FrozenUI-React/src/js/component/TabPane.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by vajoylan on 2015/7/7. 3 | */ 4 | 5 | define(function (require, exports, module) { 6 | var React = require('react'), 7 | PropTypes = React.PropTypes; 8 | 9 | var TabPane = React.createClass({ 10 | 11 | propTypes : { 12 | handleClick: PropTypes.func, 13 | tapCallback: PropTypes.func, 14 | tab: PropTypes.string // 标题内容 15 | }, 16 | 17 | tapCallback : function(){ 18 | this.props.handleClick(); 19 | this.props.tapCallback && setTimeout(this.props.tapCallback.bind(this), 10) 20 | }, 21 | 22 | render: function () { 23 | return ( 24 |
  • 25 | {this.props.tab} 26 |
  • 27 | ) 28 | } 29 | }); 30 | 31 | module.exports = TabPane; 32 | }); -------------------------------------------------------------------------------- /FrozenUI-React/src/js/component/globalEventHandler.js: -------------------------------------------------------------------------------- 1 | define(function (require, exports, module) { 2 | var throttle = function(fn, interval){ //节流 3 | var _self = fn, 4 | timer, 5 | firstTime = true; 6 | return function(){ 7 | var args = arguments, 8 | _me = this; 9 | if(firstTime){ 10 | _self.apply(_me, args); 11 | return firstTime = false; 12 | } 13 | if(timer) return false; 14 | timer = setTimeout(function(){ 15 | clearTimeout(timer); 16 | timer = null; 17 | _self.apply(_me, args); 18 | }, interval || 300) 19 | } 20 | }; 21 | 22 | module.exports = { 23 | windowResize : function(cb){ 24 | if(typeof cb !== 'function') return; 25 | window.onresize = throttle(cb) 26 | } 27 | }; 28 | 29 | }); -------------------------------------------------------------------------------- /FrozenUI-React/src/js/component/styleMaps.js: -------------------------------------------------------------------------------- 1 | define(function (require, exports, module) { 2 | 3 | module.exports = { 4 | globalCN: {}, 5 | loadingCN: { 6 | block: { 7 | partial: 'demo-block', 8 | global: 'ui-loading-block show' 9 | }, 10 | wrap: { 11 | partial: 'ui-loading-wrap', 12 | global: 'ui-loading-cnt' 13 | }, 14 | i: { 15 | partial: 'ui-loading', 16 | global: 'ui-loading-bright' 17 | } 18 | } 19 | }; 20 | }); -------------------------------------------------------------------------------- /FrozenUI-React/src/js/page/loading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by vajoylan on 2015/9/13. 3 | */ 4 | require('../../css/frozen.css'); //把样式引进来 5 | var React = require('react'), 6 | Loading = require('../component/Loading'); 7 | 8 | var wrap = document.querySelector('.wrap'), 9 | hideCallback = function(){ //卸载组件后的回调 10 | alert('done!!'); 11 | }; 12 | 13 | React.render( 14 | , wrap 15 | ); 16 | 17 | setTimeout(function(){ //3秒后卸载组件,模拟触发回调 18 | React.unmountComponentAtNode(wrap) 19 | }, 3000); -------------------------------------------------------------------------------- /FrozenUI-React/src/js/page/tab.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by vajoylan on 2015/9/13. 3 | */ 4 | 5 | require('../../css/frozen.css'); 6 | var React = require('react'), 7 | TabPane = require('../component/TabPane'), 8 | Tab = require('../component/Tab'); 9 | 10 | var tapCallback = function(){ 11 | alert('你点到我了!!'); 12 | }; 13 | 14 | React.render( 15 | 16 | 17 |

    内容1

    内容1

    内容1

    内容1

    18 |
    19 | 20 |

    内容2

    内容2

    21 |
    22 | 23 |

    内容3

    24 |
    25 |
    , document.querySelector('.wrap') 26 | ); -------------------------------------------------------------------------------- /FrozenUI-React/tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /FrozenUI-React/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | 4 | module.exports = { 5 | entry: { 6 | tab : './src/js/page/tab.js', 7 | loading : './src/js/page/loading.js' 8 | }, 9 | output: { 10 | path: 'dist/js/page', 11 | filename: '[name].js' 12 | }, 13 | module: { 14 | loaders: [ 15 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 16 | { test: /\.js$/, loader: 'jsx-loader?harmony' }, 17 | { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, 18 | { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} 19 | //{ 20 | // test: require.resolve("./src/js/component/globalEventHandler.js"), 21 | // loader: "exports?globalEventHandler" 22 | //} 23 | ] 24 | }, 25 | resolve: { 26 | extensions: ['', '.js', '.json', '.scss'], 27 | } 28 | }; 29 | 30 | 31 | 32 | --------------------------------------------------------------------------------