├── .gitignore ├── README.md ├── app ├── components │ ├── App.jsx │ ├── common │ │ ├── Alert.jsx │ │ ├── Grid.jsx │ │ ├── Header.jsx │ │ ├── InputBox.jsx │ │ ├── Progress.jsx │ │ ├── js │ │ │ ├── Store.js │ │ │ └── qrcode.js │ │ └── mixin │ │ │ └── AlertMixin.jsx │ ├── index │ │ └── Index.jsx │ ├── product │ │ ├── ProductList.jsx │ │ ├── ProductListItem.jsx │ │ ├── Purchase.jsx │ │ └── PurchaseAmount.jsx │ └── users │ │ ├── AboutUs.jsx │ │ ├── Assets.jsx │ │ ├── Invite.jsx │ │ ├── Login.jsx │ │ ├── ModifyPwd.jsx │ │ ├── PersonalSetting.jsx │ │ ├── Rebate.jsx │ │ ├── Register.jsx │ │ ├── TransactionRecord.jsx │ │ └── TransactionRecordItem.jsx ├── images │ ├── aboutUs │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 6.jpg │ ├── arrow-right.png │ ├── house.png │ ├── icon-alarm.png │ ├── icon-i.png │ ├── icon-incrementAmt.png │ ├── icon-interestEndDate.png │ ├── icon-interestStartDate.png │ ├── icon-investLowerAmt.png │ ├── icon-investUpperAmt.png │ ├── icon-inviteCode.png │ ├── icon-key.png │ ├── icon-phone.png │ ├── icon-safe.png │ ├── icon-verificationCode.png │ ├── index_icon.png │ ├── loading.gif │ ├── logo.png │ └── share-friends.png ├── main.js └── scss │ ├── common │ ├── Button.scss │ ├── Header.scss │ ├── Tool.scss │ ├── animate.scss │ ├── common.scss │ ├── components │ │ ├── Alert.scss │ │ ├── Grid.scss │ │ └── InputBox.scss │ └── reset.scss │ ├── index │ └── index.scss │ ├── product │ ├── ProductList.scss │ ├── Purchase.scss │ └── PurchaseAmount.scss │ └── users │ ├── AboutUs.scss │ ├── Assets.scss │ ├── Invite.scss │ ├── Login.scss │ ├── PersonalSetting.scss │ ├── Register.scss │ └── TransactionRecord.scss ├── build ├── assets.json ├── index.html ├── index_production.html ├── jquery-2.1.4.min.js ├── productList.json ├── purchase.json ├── qrcode.png ├── test.html └── transactionRecord.json ├── dist ├── all.a7e8fd9c.css ├── app.a7e8fd9c.js ├── app │ └── images │ │ ├── aboutUs │ │ ├── 1.dcb1d929.jpg │ │ ├── 2.b0de9ab2.jpg │ │ ├── 3.df25dadb.jpg │ │ ├── 4.a440884e.jpg │ │ ├── 5.6ba6bd3a.jpg │ │ └── 6.e49b00a3.jpg │ │ ├── icon-i.3c6f4443.png │ │ ├── icon-interestEndDate.f4389313.png │ │ ├── icon-interestStartDate.761be474.png │ │ ├── icon-investLowerAmt.4961db1f.png │ │ ├── icon-investUpperAmt.89822701.png │ │ ├── icon-safe.8ef83251.png │ │ ├── icon-verificationCode.164727ad.png │ │ ├── index_icon.d50c0901.png │ │ ├── loading.00218280.gif │ │ ├── logo.7d1b35f3.png │ │ └── share-friends.85c90899.png ├── assets.json ├── commons.a7e8fd9c.js ├── index.html ├── jquery-2.1.4.min.js ├── productList.json ├── purchase.json ├── test.html └── transactionRecord.json ├── gulpfile.js ├── package.json ├── webpack.config.js └── webpack.production.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /.idea/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReactProject 2 | 3 | 该项目是移动端项目 4 | 5 | 安装 $ npm install 6 | 7 | 1：开发 8 | 执行 $ gulp 9 | 访问路径 http://localhost:8080/build/index.html 10 | 11 | 12 | 2：生产 13 | 执行 $ gulp build 14 | 15 | 16 | 3：在线预览：http://springalskey.github.io/ReactProject/dist/test.html 17 | 18 | 19 | 4：扫描二维码： 20 | ![image](https://github.com/springalskey/ReactProject/blob/master/build/qrcode.png) 21 | 22 | 23 | 关于项目： 24 | 25 | 1.main.js配置路由 26 | 27 | 2.App.jsx是路由中的写法 28 | 29 | 3.css 30 | 1) reset.scss在App.jsx中引入且仅此一次。 31 | 2) common.scss在App.jsx中引入且仅此一次。 32 | 3) Tool.scss在每一个component中都可以作为“工具集公共项”来引入,不会添加到css文件中，是以变量的形式存在 33 | 34 | 4.js和jsx 35 | 1) 通用的js放在app/components/common/js目录下 36 | 2) mixin放需要mix到component中的公共组件，详情参考AlertMixin 37 | 38 | 5.html 39 | index_production.html是在执行gulp build命令时用的 40 | 41 | 6.dist目录 42 | 是最终gulp build的结果 43 | 若使用webstorm可直接选择dist/index.html在浏览器里运行，不需要安装环境。 44 | 45 | 46 | -------------------------------------------------------------------------------- /app/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 4 | 5 | require("../scss/common/reset.scss"); 6 | require("../scss/common/animate.scss"); 7 | require("../scss/common/common.scss"); 8 | 9 | export default class App extends React.Component { 10 | 11 | render() { 12 | return
13 | 19 | {React.cloneElement(this.props.children, { 20 | key: this.props.location.pathname 21 | })} 22 | 23 |
24 | } 25 | 26 | } -------------------------------------------------------------------------------- /app/components/common/Alert.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | require("../../scss/common/components/Alert.scss"); 3 | 4 | export default class Alert extends React.Component { 5 | 6 | render() { 7 | 8 | return
9 |
10 |
{this.props.message}
11 | 12 |
13 |
14 | } 15 | 16 | confirmHandler(){ 17 | var AlertDom = this.refs.AlertDom; 18 | AlertDom.className = "animated fadeOut"; 19 | AlertDom.addEventListener("animationend",()=>{ this.props.onClose(); },false); 20 | } 21 | } 22 | 23 | Alert.propTypes = { 24 | message: React.PropTypes.string.isRequired, //messagetext 25 | onClose: React.PropTypes.func.isRequired //callback close dialog 26 | }; -------------------------------------------------------------------------------- /app/components/common/Grid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import loading_gif from '../../images/loading.gif'; 3 | 4 | 5 | require("../../scss/common/components/Grid.scss"); 6 | 7 | export default class Grid extends React.Component { 8 | 9 | constructor(props){ 10 | super(props); 11 | this.store = props.store; 12 | this.showThead = props.showThead || false; //是否显示table thead，默认不显示 13 | this.layout = props.layout; 14 | this.OuterGridItem = props.OuterGridItem; 15 | this._ajaxLoaded = false; //false代表未执行ajax请求数据 16 | this.state = { data: this.store.getDataStructure() };//初次加载，渲染为空 17 | this.initData(); 18 | } 19 | 20 | initData(){ 21 | this.store.deferred.done( (d) => { 22 | this.store.setData(d); 23 | this._ajaxLoaded = true; 24 | this.setState({data: this.store.getData()}); 25 | }); 26 | } 27 | 28 | render() { 29 | var OuterGridItem = this.OuterGridItem; 30 | var hasData = false; //是否有数据 31 | if(this.store.hasData()){ 32 | hasData = true; 33 | } 34 | if(hasData){ 35 | 36 | //外部传入组件 37 | if(OuterGridItem){ 38 | return
39 | { 40 | this.state.data.items.map( (itemData,key) => ) 41 | } 42 |
43 |
44 | } 45 | 46 | //使用默认组件 47 | return 48 | } 49 | else{ 50 | if(this._ajaxLoaded) return
暂无数据
; 51 | else return
52 | } 53 | 54 | } 55 | 56 | componentDidMount(){ 57 | this._scrollHandler = ()=>{ 58 | var scrollHeight = document.documentElement.scrollHeight; 59 | var clientHeight= document.documentElement.clientHeight; 60 | var scrollTop = document.body.scrollTop; 61 | var scrollHeight2= document.body.scrollTop+clientHeight; 62 | var delayTime = 1500; //毫秒 63 | if(scrollTop > 0 && scrollHeight2==scrollHeight) { 64 | //滚动到底部移除scroll事件 65 | window.removeEventListener("scroll", this._scrollHandler, false); 66 | //显示加载数据gif图片 67 | var loading = document.querySelector(".loading"); 68 | loading.style.display = "block"; 69 | //滚动条滚到底部 70 | document.body.scrollTop = scrollTop+loading.clientHeight; 71 | 72 | if(this.state.data.totalPage <= 1 && this.state.data.pageNo >= this.state.data.totalPage){ 73 | var t = window.setTimeout(()=>{ 74 | loading.innerHTML = "已加载全部！"; 75 | clearTimeout(t); 76 | },delayTime); 77 | return; 78 | } 79 | 80 | this.store.request({ 81 | pageNo:this.state.data.pageNo+1, 82 | pageSize:this.state.data.pageSize 83 | }).done( (d) => { 84 | this.store.setData(d); 85 | //2秒后更新component 86 | var t= window.setTimeout(()=>{ 87 | loading.style.display = "none"; 88 | //数据加载完毕继续监听scroll事件 89 | this.setState({data: this.store.getData()}); 90 | window.addEventListener('scroll',this._scrollHandler, false); 91 | clearTimeout(t); 92 | },delayTime); 93 | }); 94 | } 95 | }; 96 | window.addEventListener('scroll',this._scrollHandler, false); 97 | } 98 | 99 | componentWillUnmount(){ 100 | window.removeEventListener("scroll", this._scrollHandler, false); 101 | } 102 | } 103 | 104 | 105 | //filed与name字段是必须，其他可选 106 | //var layout = [ 107 | // {filed:"id",name:"编号",style:{height:"1rem"}}, 108 | // {filed:"productName",name:"产品",style:{}}, 109 | // {filed:"orderId",name:"订单号",style:{}}, 110 | // {filed:"interest",name:"收益",style:{},formatter:function(value){ 111 | // return value+".00"; 112 | // }} 113 | //]; 114 | 115 | export class DefaultTableGrid extends React.Component { 116 | 117 | constructor(props){ 118 | super(props); 119 | this.layout = props.layout; 120 | this.data = props.data; 121 | this.showThead = props.showThead; 122 | } 123 | 124 | render() { 125 | var items = this.data.items; 126 | return
127 | 128 | 129 | 130 | { this.layout.map((item,key) => ) } 131 | 132 | 133 | 134 | { 135 | items.map((itemData,key)=> { 136 | var jsx = []; 137 | for(var i=0; i{value}); 145 | } 146 | return {jsx} 147 | 148 | })} 149 | 150 | 151 |
{item.name}
152 |
153 |
154 | } 155 | } 156 | 157 | Grid.propTypes = { 158 | store: React.PropTypes.object.isRequired, 159 | //layout与OuterGridItem二选一 160 | OuterGridItem: React.PropTypes.func, 161 | layout: React.PropTypes.array, 162 | showThead: React.PropTypes.bool 163 | }; 164 | 165 | DefaultTableGrid.propTypes = { 166 | data: React.PropTypes.object.isRequired, 167 | layout: React.PropTypes.array.isRequired, 168 | showThead: React.PropTypes.bool 169 | }; -------------------------------------------------------------------------------- /app/components/common/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import LogoImg from "../../images/logo.png" 3 | import HouseImg from "../../images/house.png" 4 | import { Link } from 'react-router' 5 | 6 | require("../../scss/common/Header.scss"); 7 | 8 | export default class Header extends React.Component { 9 | render() { 10 | return 14 | } 15 | } -------------------------------------------------------------------------------- /app/components/common/InputBox.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | require("../../scss/common/components/InputBox.scss"); 3 | 4 | export default class InputBox extends React.Component { 5 | 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | render() { 11 | return 24 | } 25 | 26 | changeHandler(e){ 27 | let value = e.target.value; 28 | let obj = {}; 29 | obj[this.props.name] = value; 30 | this.props.onChange(obj); 31 | } 32 | } 33 | 34 | InputBox.propTypes = { 35 | style: React.PropTypes.object, 36 | icon: React.PropTypes.string.isRequired, 37 | name: React.PropTypes.string.isRequired, 38 | maxLength: React.PropTypes.string, 39 | type: React.PropTypes.string.isRequired, 40 | placeholder: React.PropTypes.string 41 | }; -------------------------------------------------------------------------------- /app/components/common/Progress.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yanfl on 2015/12/7. 3 | */ 4 | import React from 'react'; 5 | import { Link} from 'react-router' 6 | require("../../scss/common/components/InputBox.scss"); 7 | 8 | export default class Progress extends React.Component { 9 | 10 | constructor(){ 11 | super(); 12 | } 13 | 14 | componentDidMount (){ 15 | this.circleProgress(this.props.data); 16 | } 17 | 18 | circleProgress (options) { 19 | if (options.progress !== 0) { 20 | options.progress = options.progress || 100; 21 | } 22 | if (options.duration !== 0) { 23 | options.duration = options.duration || 1000; 24 | } 25 | options.fps = 60; // requestAnimationFrame / cancelAnimationFrame 26 | options.color = options.color || 'rgb(52, 145, 204)'; 27 | options.bgColor = options.bgColor || 'rgb(230, 230, 230)'; 28 | options.textColor = options.textColor || 'black'; 29 | options.progressWidth = options.progressWidth || 0.25; //r 30 | options.fontScale = options.fontScale || 0.4; //r 31 | 32 | options.toFixed = options.toFixed || 0; 33 | var canvas = this.refs.progress; 34 | if (canvas == null || canvas.getContext == null) { 35 | return; 36 | } 37 | options.width = canvas.width; 38 | options.height = canvas.height; 39 | options.context = canvas.getContext('2d'); 40 | 41 | var step = function () { 42 | if (options.current < options.progress && options.duration > 0) { 43 | this.drawCircleProgress(options); 44 | options.current += options.progress * (1000 / options.fps) / options.duration; 45 | canvas.setAttribute('data-requestID', window.setTimeout(step, 1000 / 60)); 46 | } else { 47 | options.current = options.progress; 48 | this.drawCircleProgress(options); 49 | canvas.removeAttribute('data-requestID'); 50 | } 51 | }.bind(this); 52 | 53 | window.clearTimeout(canvas.getAttribute('data-requestID')); 54 | options.current = 0; 55 | step(); 56 | } 57 | 58 | drawCircleProgress (options) { 59 | var ctx = options.context; 60 | var width = options.width; 61 | var height = options.height; 62 | var current = options.current; 63 | var color = options.color; 64 | var bgColor = options.bgColor; 65 | var textColor = options.textColor; 66 | var progressWidth = options.progressWidth; 67 | var fontScale = options.fontScale; 68 | 69 | //console.log(width); 70 | var x = width / 2; 71 | var y = height / 2; 72 | var r1 = Math.floor(Math.min(width, height) / 2); 73 | var r2 = Math.floor(r1 * (1 - progressWidth)); 74 | var startAngle = -Math.PI / 2; 75 | var endAngle = startAngle + Math.PI * 2 * current / 100; 76 | var fontSize = Math.floor(r1 * fontScale); 77 | 78 | ctx.save(); 79 | ctx.clearRect(0, 0, width, height); 80 | 81 | 82 | //画出圆形 83 | ctx.beginPath(); 84 | ctx.moveTo(x, y); 85 | ctx.arc(x, y, r1, startAngle, Math.PI * 2, false); 86 | ctx.closePath(); 87 | ctx.fillStyle = bgColor; 88 | ctx.fill(); 89 | 90 | //画出旋转进度弧形 91 | ctx.beginPath(); 92 | ctx.moveTo(x, y); 93 | ctx.arc(x, y, r1, startAngle, endAngle, false); 94 | ctx.closePath(); 95 | ctx.fillStyle = color; 96 | ctx.fill(); 97 | 98 | //画出圆环 99 | ctx.beginPath(); 100 | ctx.moveTo(x, y); 101 | ctx.arc(x, y, r2, startAngle, Math.PI * 2, false); 102 | ctx.closePath(); 103 | ctx.fillStyle = 'rgba(255,255,255,1)'; 104 | ctx.fill(); 105 | 106 | ctx.fillStyle = textColor; 107 | if(!options.text){ 108 | ctx.font = '' + (fontSize/2.5) + 'px arial, sans serif'; 109 | ctx.textBaseline = 'bottom'; 110 | ctx.textAlign = 'center'; 111 | //console.log(x+":"+y); 112 | ctx.fillText('预期年化收益率', x, width/2.4); 113 | 114 | 115 | ctx.font = '' + fontSize + 'px arial, sans serif'; 116 | ctx.textBaseline = 'top'; 117 | ctx.textAlign = 'center'; 118 | //显示进度 119 | ctx.fillText(options.yearRate+"%",x, width/2.2); 120 | 121 | } 122 | else{ 123 | ctx.font = '' + fontSize/1.1 + 'px Microsoft YaHei'; 124 | ctx.textBaseline = 'middle'; 125 | ctx.textAlign = 'center'; 126 | ctx.fillText(options.text, x, y); 127 | } 128 | ctx.restore(); 129 | } 130 | 131 | 132 | render() { 133 | var bodyWidth = document.body.clientWidth; 134 | var v = bodyWidth/16; 135 | var isAndroid = window.navigator.appVersion.match(/android/gi); 136 | var isIPhone = window.navigator.appVersion.match(/iphone/gi); 137 | var t; //这里其实是size，因为在手机端会模糊，所以放大两倍，css控制在原来的大小即可。在PC上还是需要用7.5才行 138 | if (isIPhone || isAndroid) { 139 | t = this.props.data.size*2; 140 | } else { 141 | t = this.props.data.size; 142 | } 143 | var size = (t*v); 144 | return
145 | 146 |
147 | } 148 | } 149 | 150 | Progress.propTypes = { 151 | data: React.PropTypes.object.isRequired //data attr 152 | }; -------------------------------------------------------------------------------- /app/components/common/js/Store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yanfl on 2016/1/13. 3 | */ 4 | 5 | 6 | export default class Store { 7 | 8 | constructor(options){ 9 | this._url = options.url; 10 | this._data= this.getDataStructure(); 11 | if(this._url) this.deferred = this._ajax(); 12 | } 13 | 14 | _ajax(param){ 15 | param = param || {pageNo: 0,pageSize: this.getDataStructure().pageSize}; 16 | return $.ajax({ 17 | url: this._url, 18 | data:{pageNo:param.pageNo,pageSize:param.pageSize}, 19 | dataType: "json", 20 | type: "get", 21 | async: true, 22 | cache: false 23 | }); 24 | } 25 | 26 | request(param){ 27 | return this._ajax(param); 28 | } 29 | 30 | getData(){ 31 | return this._data; 32 | } 33 | 34 | hasData(){ 35 | if( this._data && 36 | this._data.totalPage > 0 && 37 | this._data.items && 38 | this._data.items.length > 0 39 | ) return true; 40 | return false; 41 | } 42 | 43 | getDataStructure(){ 44 | return { 45 | pageNo: 0, 46 | pageSize: 10, 47 | totalPage:0, 48 | totalNum: 0, 49 | items: [] 50 | } 51 | } 52 | 53 | setData(data){ 54 | this._data.pageNo = data.pageNo; 55 | this._data.pageSize = data.pageSize; 56 | this._data.totalPage = data.totalPage; 57 | this._data.totalNum = data.totalNum; 58 | this._data.items = this._data.items.concat(data.items); 59 | } 60 | } -------------------------------------------------------------------------------- /app/components/common/js/qrcode.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery 二维码qrcode插件 3 | */ 4 | (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataCache=null;this.dataList=[]}function q(a,c){if(void 0==a.length)throw Error(a.length+"/"+c);for(var d=0;da||this.moduleCount<=a||0>c||this.moduleCount<=c)throw Error(a+","+c);return this.modules[a][c]},getModuleCount:function(){return this.moduleCount},make:function(){if(1>this.typeNumber){for(var a=1,a=1;40>a;a++){for(var c=p.getRSBlocks(a,this.errorCorrectLevel),d=new t,b=0,e=0;e=d;d++)if(!(-1>=a+d||this.moduleCount<=a+d))for(var b=-1;7>=b;b++)-1>=c+b||this.moduleCount<=c+b||(this.modules[a+d][c+b]= 8 | 0<=d&&6>=d&&(0==b||6==b)||0<=b&&6>=b&&(0==d||6==d)||2<=d&&4>=d&&2<=b&&4>=b?!0:!1)},getBestMaskPattern:function(){for(var a=0,c=0,d=0;8>d;d++){this.makeImpl(!0,d);var b=j.getLostPoint(this);if(0==d||a>b)a=b,c=d}return c},createMovieClip:function(a,c,d){a=a.createEmptyMovieClip(c,d);this.make();for(c=0;c=f;f++)for(var i=-2;2>=i;i++)this.modules[b+f][e+i]=-2==f||2==f||-2==i||2==i||0==f&&0==i?!0:!1}},setupTypeNumber:function(a){for(var c= 10 | j.getBCHTypeNumber(this.typeNumber),d=0;18>d;d++){var b=!a&&1==(c>>d&1);this.modules[Math.floor(d/3)][d%3+this.moduleCount-8-3]=b}for(d=0;18>d;d++)b=!a&&1==(c>>d&1),this.modules[d%3+this.moduleCount-8-3][Math.floor(d/3)]=b},setupTypeInfo:function(a,c){for(var d=j.getBCHTypeInfo(this.errorCorrectLevel<<3|c),b=0;15>b;b++){var e=!a&&1==(d>>b&1);6>b?this.modules[b][8]=e:8>b?this.modules[b+1][8]=e:this.modules[this.moduleCount-15+b][8]=e}for(b=0;15>b;b++)e=!a&&1==(d>>b&1),8>b?this.modules[8][this.moduleCount- 11 | b-1]=e:9>b?this.modules[8][15-b-1+1]=e:this.modules[8][15-b-1]=e;this.modules[this.moduleCount-8][8]=!a},mapData:function(a,c){for(var d=-1,b=this.moduleCount-1,e=7,f=0,i=this.moduleCount-1;0g;g++)if(null==this.modules[b][i-g]){var n=!1;f>>e&1));j.getMask(c,b,i-g)&&(n=!n);this.modules[b][i-g]=n;e--; -1==e&&(f++,e=7)}b+=d;if(0>b||this.moduleCount<=b){b-=d;d=-d;break}}}};o.PAD0=236;o.PAD1=17;o.createData=function(a,c,d){for(var c=p.getRSBlocks(a, 12 | c),b=new t,e=0;e8*a)throw Error("code length overflow. ("+b.getLengthInBits()+">"+8*a+")");for(b.getLengthInBits()+4<=8*a&&b.put(0,4);0!=b.getLengthInBits()%8;)b.putBit(!1);for(;!(b.getLengthInBits()>=8*a);){b.put(o.PAD0,8);if(b.getLengthInBits()>=8*a)break;b.put(o.PAD1,8)}return o.createBytes(b,c)};o.createBytes=function(a,c){for(var d= 13 | 0,b=0,e=0,f=Array(c.length),i=Array(c.length),g=0;g>>=1;return c},getPatternPosition:function(a){return j.PATTERN_POSITION_TABLE[a-1]},getMask:function(a,c,d){switch(a){case 0:return 0==(c+d)%2;case 1:return 0==c%2;case 2:return 0==d%3;case 3:return 0==(c+d)%3;case 4:return 0==(Math.floor(c/2)+Math.floor(d/3))%2;case 5:return 0==c*d%2+c*d%3;case 6:return 0==(c*d%2+c*d%3)%2;case 7:return 0==(c*d%3+(c+d)%2)%2;default:throw Error("bad maskPattern:"+ 17 | a);}},getErrorCorrectPolynomial:function(a){for(var c=new q([1],0),d=0;dc)switch(a){case 1:return 10;case 2:return 9;case s:return 8;case 8:return 8;default:throw Error("mode:"+a);}else if(27>c)switch(a){case 1:return 12;case 2:return 11;case s:return 16;case 8:return 10;default:throw Error("mode:"+a);}else if(41>c)switch(a){case 1:return 14;case 2:return 13;case s:return 16;case 8:return 12;default:throw Error("mode:"+ 18 | a);}else throw Error("type:"+c);},getLostPoint:function(a){for(var c=a.getModuleCount(),d=0,b=0;b=g;g++)if(!(0>b+g||c<=b+g))for(var h=-1;1>=h;h++)0>e+h||c<=e+h||0==g&&0==h||i==a.isDark(b+g,e+h)&&f++;5a)throw Error("glog("+a+")");return l.LOG_TABLE[a]},gexp:function(a){for(;0>a;)a+=255;for(;256<=a;)a-=255;return l.EXP_TABLE[a]},EXP_TABLE:Array(256), 20 | LOG_TABLE:Array(256)},m=0;8>m;m++)l.EXP_TABLE[m]=1<m;m++)l.EXP_TABLE[m]=l.EXP_TABLE[m-4]^l.EXP_TABLE[m-5]^l.EXP_TABLE[m-6]^l.EXP_TABLE[m-8];for(m=0;255>m;m++)l.LOG_TABLE[l.EXP_TABLE[m]]=m;q.prototype={get:function(a){return this.num[a]},getLength:function(){return this.num.length},multiply:function(a){for(var c=Array(this.getLength()+a.getLength()-1),d=0;d 21 | this.getLength()-a.getLength())return this;for(var c=l.glog(this.get(0))-l.glog(a.get(0)),d=Array(this.getLength()),b=0;b>>7-a%8&1)},put:function(a,c){for(var d=0;d>>c-d-1&1))},getLengthInBits:function(){return this.length},putBit:function(a){var c=Math.floor(this.length/8);this.buffer.length<=c&&this.buffer.push(0);a&&(this.buffer[c]|=128>>>this.length%8);this.length++}};"string"===typeof h&&(h={text:h});h=r.extend({},{render:"canvas",width:256,height:256,typeNumber:-1, 29 | correctLevel:2,background:"#ffffff",foreground:"#000000"},h);return this.each(function(){var a;if("canvas"==h.render){a=new o(h.typeNumber,h.correctLevel);a.addData(h.text);a.make();var c=document.createElement("canvas");c.width=h.width;c.height=h.height;for(var d=c.getContext("2d"),b=h.width/a.getModuleCount(),e=h.height/a.getModuleCount(),f=0;f").css("width",h.width+"px").css("height",h.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",h.background);d=h.width/a.getModuleCount();b=h.height/a.getModuleCount();for(e=0;e").css("height",b+"px").appendTo(c);for(i=0;i").css("width", 31 | d+"px").css("background-color",a.isDark(e,i)?h.foreground:h.background).appendTo(f)}}a=c;jQuery(a).appendTo(this)})}})(jQuery); -------------------------------------------------------------------------------- /app/components/common/mixin/AlertMixin.jsx: -------------------------------------------------------------------------------- 1 | import React,{ Component } from 'react'; 2 | import Alert from "../Alert.jsx" 3 | require("../../../scss/common/components/Alert.scss"); 4 | 5 | function enhance(ComposedComponent) { 6 | class Enhance extends Component { 7 | 8 | constructor() { 9 | super(); 10 | this.state = { 11 | visible: false, 12 | message: "" 13 | } 14 | } 15 | 16 | onClose(){ 17 | this.setState({ 18 | visible: false 19 | }); 20 | } 21 | 22 | onShow(message){ 23 | this.setState({ 24 | visible: true, 25 | message: message 26 | }); 27 | } 28 | render() { 29 | var alertDialog; 30 | if(this.state.visible){ 31 | alertDialog = 32 | } 33 | 34 | return 35 | 36 | {alertDialog} 37 | ; 38 | } 39 | }; 40 | 41 | return Enhance; 42 | 43 | } 44 | 45 | export default enhance; -------------------------------------------------------------------------------- /app/components/index/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Header from "../common/Header.jsx" 3 | import { Link } from 'react-router' 4 | 5 | require("../../scss/index/index.scss"); 6 | 7 | export default class Index extends React.Component { 8 | render() { 9 | return
10 |
11 |
    12 | {!sessionStorage.getItem("cellphone")?
  • 登录/注册
    • :null} 13 |
  • 限时抢购
    • 14 |
  • 产品列表
    • 15 |
  • 资产明细
    • 16 |
  • 交易记录
    • 17 |
  • 邀请好友
    • 18 |
  • 个人设置
    • 19 |
  • 关于我们
    • 20 |
21 |
22 | } 23 | } -------------------------------------------------------------------------------- /app/components/product/ProductList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | import Header from "../common/Header.jsx" 4 | import ProductListItem from "./ProductListItem.jsx" 5 | 6 | require("../../scss/product/ProductList.scss"); 7 | 8 | export default class ProductList extends React.Component { 9 | 10 | constructor(){ 11 | super(); 12 | this.state = {}; 13 | this.state.data = []; 14 | } 15 | 16 | componentDidMount (){ 17 | this.ajaxHandler(); 18 | } 19 | 20 | ajaxHandler(){ 21 | $.ajax({ 22 | url: "./productList.json", 23 | dataType:"json", 24 | type:"get", 25 | success: (data)=> { this.setState({data: data}) } 26 | }); 27 | } 28 | 29 | render() { 30 | return
31 |
32 |
33 |
34 | { 35 | this.state.data.map((item,key) => ) 36 | } 37 |
38 |
39 |
40 | } 41 | } -------------------------------------------------------------------------------- /app/components/product/ProductListItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | import arrow from "../../images/arrow-right.png" 4 | import Progress from "../common/Progress.jsx" 5 | 6 | export default class ProductListItem extends React.Component { 7 | 8 | showInfoHandler(productId){ 9 | alert("查看详情"+productId) 10 | } 11 | 12 | getProgressData(){ 13 | return { 14 | id: 'progress', 15 | size: 3.5, 16 | yearRate: this.props.data.yearRate, 17 | progress: this.props.data.progress, 18 | duration: 2000, 19 | color: '#F43A4D', 20 | bgColor: "#F6C8C9", 21 | textColor: '#ea3e4f', 22 | progressWidth: 0.08, 23 | toFixed: 0 24 | }; 25 | } 26 | 27 | showAgreementHandler(){ 28 | alert("投资协议") 29 | } 30 | 31 | render() { 32 | var hotSale; 33 | if(this.props.data.hotSellFlag==="1") hotSale = 热销; 34 | else hotSale = ; 35 | 36 | return
37 |
38 | {this.props.data.productName} 39 | {hotSale} 40 | 到期还本付息 41 | 42 | 43 | 44 | 45 |
46 |
47 |
48 | 年化收益率 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | 理财期限 60 | {this.props.data.investPeriod} 61 | 62 | 63 | 64 | 65 |
66 |
67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 |
75 |
76 | } 77 | } -------------------------------------------------------------------------------- /app/components/product/Purchase.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import history from 'history/lib/createHashHistory'; 4 | import Header from "../common/Header.jsx"; 5 | import icon_alarm from "../../images/icon-alarm.png"; 6 | import icon_safe from "../../images/icon-safe.png"; 7 | import Progress from "../common/Progress.jsx"; 8 | 9 | 10 | require("../../scss/product/Purchase.scss"); 11 | 12 | export default class Purchase extends React.Component { 13 | 14 | constructor(){ 15 | super(); 16 | this.state = {}; 17 | this._timer = null; //定时器 18 | } 19 | 20 | getProgressData(){ 21 | return { 22 | id: 'progress', 23 | size: 7.5, 24 | yearRate: 12, 25 | progress: 70, 26 | duration: 2000, 27 | color: '#F43A4D', 28 | bgColor: "#F6C8C9", 29 | textColor: '#ea3e4f', 30 | progressWidth: 0.08, 31 | toFixed: 0 32 | }; 33 | } 34 | 35 | componentDidMount (){ 36 | this.ajaxHandler(); 37 | } 38 | 39 | ajaxHandler(){ 40 | $.ajax({ 41 | url: "./purchase.json", 42 | dataType:"json", 43 | type:"get", 44 | success: (data) => { 45 | this.setState(data); 46 | this.countDown(data.remaindTime); 47 | } 48 | }); 49 | } 50 | 51 | 52 | /** 53 | * 倒计时 54 | * @param time 抢购剩余时间（单位秒） 55 | */ 56 | countDown(time){ 57 | var count = 0; //花了多少时间，单位为秒 58 | this._timer = setInterval(()=>{ 59 | var t = time-count; 60 | count += 1; 61 | if(t>=0){ 62 | this.acc(t); 63 | if(t===0){ 64 | document.getElementById("purchaseButton").disabled = true; 65 | clearInterval(this._timer); 66 | } 67 | } 68 | },1000); 69 | } 70 | 71 | /** 72 | * 计算 73 | * @param value单位秒 74 | * @return 75 | */ 76 | acc(value){ 77 | var second = parseInt(value); 78 | var day = 0; //天 79 | var hour = 0;// 分 80 | var minute = 0;// 小时 81 | if(second > 60) { 82 | day = parseInt(parseInt(second/3600/24)); //天 83 | hour = parseInt(second%(3600*24)/3600);//时 84 | minute = parseInt(second%(3600*24)%3600/60); //分 85 | second = parseInt(second%(3600*24)%3600%60); //秒 86 | } 87 | this.setTime(day, hour, minute, second); 88 | } 89 | 90 | setTime(day,hour,minute,second){ 91 | document.getElementById("day").innerHTML = day; 92 | document.getElementById("hour").innerHTML = hour; 93 | document.getElementById("minute").innerHTML = minute; 94 | document.getElementById("second").innerHTML = second; 95 | } 96 | 97 | purchaseHandler(){ 98 | history().pushState(null,"/purchaseAmount"); 99 | } 100 | 101 | componentWillUnmount(){ 102 | if(this._timer) window.clearInterval(this._timer); 103 | } 104 | 105 | render() { 106 | return
107 | 108 |
109 | 110 |
111 |
112 |
{this.state.productName}
113 |
114 | 115 |
116 |

117 | 118 | 天 119 | 时 120 | 分 121 | 秒 122 |

123 |

124 |
125 |
126 |
    127 |
  • 天期限
    • 128 |
  • 元起购
    • 129 |
  • 人已购买
    • 130 |
131 | 132 |
133 |

134 | 135 | 136 |

137 |
138 |
139 | } 140 | } -------------------------------------------------------------------------------- /app/components/product/PurchaseAmount.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import AlertMixin from "../common/mixin/AlertMixin.jsx"; 4 | import Header from "../common/Header.jsx"; 5 | import icon_incrementAmt from "../../images/icon-incrementAmt.png"; 6 | import icon_i from "../../images/icon-i.png"; 7 | 8 | import icon_interestEndDate from "../../images/icon-interestEndDate.png"; 9 | import icon_interestStartDate from "../../images/icon-interestStartDate.png"; 10 | import icon_investLowerAmt from "../../images/icon-investLowerAmt.png"; 11 | import icon_investUpperAmt from "../../images/icon-investUpperAmt.png"; 12 | 13 | require("../../scss/product/PurchaseAmount.scss"); 14 | 15 | export default class PurchaseAmount extends React.Component { 16 | 17 | constructor(){ 18 | super(); 19 | this.product = { 20 | incrementAmt: 100000, 21 | investLowerAmt: 5000, 22 | investUpperAmt: 20000, 23 | interestStartDate:"2016-01-01", 24 | interestEndDate:"2016-12-12" 25 | } 26 | } 27 | 28 | render() { 29 | return
30 |
31 |

输入购买金额（元）：

32 |
33 | 35 |
36 |

预期收益：

37 | 0.00元 38 |
39 |
40 |

快速选择金额（元）：

41 |
42 | 1000元 43 | 3000元 44 | 5000元 45 | 10000元 46 |
47 |
48 | 49 |
50 | 51 |
52 | 理财产品到期后一次性还本付息，本金及收益自动返回至您的银行卡，并通过短信消息通知您 53 |
54 |
55 | 56 |
57 | 58 | 59 |
60 | 61 |
    62 |
  • 可售金额{this.product.incrementAmt}元
    • 63 |
  • 起投金额{this.product.investLowerAmt}元
    • 64 |
  • 单笔投资上限{this.product.investUpperAmt}元
    • 65 |
  • 起息日期{this.product.interestStartDate}
    • 66 |
  • 到期日期{this.product.interestEndDate}
    • 67 |
68 | 69 |
70 | 71 |
72 |
73 | } 74 | 75 | 76 | setAmtHandler(value){ 77 | this.refs.amountInput.value = value; 78 | 79 | } 80 | 81 | purchaseHandler(){ 82 | var value = this.refs.amountInput.value; 83 | if(this.valid(value)){ 84 | this.props.onShow("正在提交……"); 85 | } 86 | } 87 | 88 | valid(value){ 89 | if(!value){ 90 | this.props.onShow("请输入投资金额"); 91 | return false; 92 | } 93 | var reg = /^[1-9][0-9]*0{3}$/; 94 | if (reg.test(value)){ 95 | value = parseInt(value); 96 | if(value > this.product.investUpperAmt){ 97 | this.props.onShow("不能大于单笔投资上限："+this.product.investUpperAmt); 98 | return false; 99 | } 100 | else if(value < this.product.investLowerAmt){ 101 | this.props.onShow("不能小于单笔投资下限："+this.product.investLowerAmt); 102 | return false; 103 | } 104 | else if(value > this.product.incrementAmt){ 105 | this.props.onShow("不能大于可售金额："+this.product.incrementAmt); 106 | return false; 107 | } 108 | else{ 109 | return true; 110 | } 111 | } 112 | else{ 113 | this.props.onShow("格式不正确，请输入一千的整倍数"); 114 | return false; 115 | } 116 | } 117 | } 118 | 119 | export default AlertMixin(PurchaseAmount); -------------------------------------------------------------------------------- /app/components/users/AboutUs.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import ab1 from "../../images/aboutUs/1.jpg"; 4 | import ab2 from "../../images/aboutUs/2.jpg"; 5 | import ab3 from "../../images/aboutUs/3.jpg"; 6 | import ab4 from "../../images/aboutUs/4.jpg"; 7 | import ab5 from "../../images/aboutUs/5.jpg"; 8 | import ab6 from "../../images/aboutUs/6.jpg"; 9 | 10 | require("../../scss/users/AboutUs.scss"); 11 | 12 | export default class AboutUs extends React.Component { 13 | render() { 14 | 15 | return
16 |
    17 |
  • 18 | 19 |
    20 | “捞财宝”是上海证大爱特金融信息服务有限公司旗下的线上资产管理平台 21 |
    22 |
    • 23 | 24 |
  • 25 | 26 |
    27 | WWW.LAOCAIBAO.COM 28 |
    29 |
    • 30 |
  • 31 | 32 |
    33 | 客服热线：400-096-6588
    服务时间：周一至周五09:00-18:00     34 |
    35 |
    • 36 |
  • 37 | 38 |
    39 | 1943412854 40 |
    41 |
    • 42 |
  • 43 | 44 |
    45 | 捞财宝理财平台 46 |
    47 |
    • 48 |
  • 49 | 50 |
    51 | lcbservice@laocaibao.com 52 |
    53 |
    • 54 |
55 | 56 |
57 | } 58 | } 59 | -------------------------------------------------------------------------------- /app/components/users/Assets.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import Header from "../common/Header.jsx"; 4 | import Store from '../common/js/Store.js'; 5 | import Grid from '../common/Grid.jsx'; 6 | import arrow from '../../images/arrow-right.png'; 7 | 8 | require("../../scss/users/Assets.scss"); 9 | 10 | export default class Assets extends React.Component { 11 | render() { 12 | 13 | var store = new Store({url:"./assets.json"}); 14 | 15 | var layout = [ 16 | {filed:"productName",name:"产品名称",style:{height:"2.5rem",width:"8rem"}}, 17 | {filed:"yesterProfit",name:"昨日收益",formatter: (value)=>{ 18 | return
19 | 20 | 21 | 22 | 23 |
; 24 | }} 25 | ]; 26 | 27 | return
28 | 29 |
30 | 31 |
32 |
33 |

累计总资产(元)

34 | 1000000.00 35 |
36 | 40 |
已到期赎回产品不在此处展示。
41 |
42 | 43 |
44 |
45 |
46 | } 47 | } -------------------------------------------------------------------------------- /app/components/users/Invite.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | import Header from "../common/Header.jsx" 4 | import friends from "../../images/share-friends.png" 5 | 6 | require("../../scss/users/Invite.scss"); 7 | 8 | export default class Invite extends React.Component { 9 | 10 | constructor(){ 11 | super(); 12 | var bodyWidth = document.getElementById("app").clientWidth; 13 | this._size = (bodyWidth/16).toFixed(0)*8; 14 | } 15 | 16 | render(){ 17 | return
18 | 19 |
20 | 21 |
22 |

扫一扫 邀请好友来注册

23 | 24 |

我的邀请码

25 |
26 | 27 |
28 |
29 |
30 |
31 | 32 |
33 | 限仅支持微信6.1及以上版本 34 |
35 |
36 |
37 | } 38 | 39 | shareHandler(){ 40 | this.refs.overlay.style.display="block"; 41 | this.refs.share.style.display="block"; 42 | } 43 | 44 | hideHandler(){ 45 | this.refs.overlay.style.display="none"; 46 | this.refs.share.style.display="none"; 47 | } 48 | } 49 | 50 | import QRCode from "../common/js/qrcode.js" 51 | class QRcode extends React.Component { 52 | 53 | constructor(props){ 54 | super(); 55 | this._size = props.size; 56 | } 57 | 58 | render() { 59 | return
60 | } 61 | 62 | componentDidMount(){ 63 | $(this.refs.code).qrcode({ 64 | render: "canvas", //table、canvas方式 65 | width : this._size,//设置宽高 66 | height : this._size, 67 | text: "http://localhost:8080/build/index.html?inviteCode=123456" 68 | }); 69 | $(this.refs.code).css("width",this._size); 70 | $(this.refs.code).css("height",this._size); 71 | } 72 | 73 | } 74 | -------------------------------------------------------------------------------- /app/components/users/Login.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import { Link } from 'react-router'; 4 | import Header from "../common/Header.jsx"; 5 | import InputBox from "../common/InputBox.jsx"; 6 | import AlertMixin from "../common/mixin/AlertMixin.jsx"; 7 | import history from 'history/lib/createHashHistory'; 8 | import assign from 'object-assign'; 9 | 10 | import icon_phone from "../../images/icon-phone.png"; 11 | import icon_key from "../../images/icon-key.png"; 12 | 13 | require("../../scss/common/Button.scss"); 14 | require("../../scss/users/Login.scss"); 15 | 16 | 17 | class Login extends React.Component { 18 | 19 | constructor(props){ 20 | super(props); 21 | this.data = {}; 22 | } 23 | 24 | render() { 25 | return
26 |
27 |
28 |
29 | 30 | 38 | 39 | 48 | 49 | 50 |

忘记密码

51 | 52 |
53 |
54 |
55 | } 56 | 57 | changeHandler(data){ 58 | assign(this.data,data); 59 | } 60 | 61 | loginHandler(){ 62 | if(!this.data.mobile){ 63 | this.props.onShow("请输入手机号码！"); 64 | return; 65 | } 66 | if(!this.data.password){ 67 | this.props.onShow("请输入密码！"); 68 | return; 69 | } 70 | //sessionStorage.setItem("cellphone", cellphone); 71 | //sessionStorage.setItem("password", password); 72 | 73 | history().pushState(null,"/index"); 74 | } 75 | } 76 | 77 | export default AlertMixin(Login); -------------------------------------------------------------------------------- /app/components/users/ModifyPwd.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | 4 | export default class ModifyPwd extends React.Component { 5 | render() { 6 | 7 | return
8 | 修改密码 9 | 10 |
11 | } 12 | } -------------------------------------------------------------------------------- /app/components/users/PersonalSetting.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import Header from "../common/Header.jsx" 4 | 5 | require("../../scss/users/PersonalSetting.scss"); 6 | 7 | export default class PersonalSetting extends React.Component { 8 | render() { 9 | 10 | return
11 | 12 |
13 | 14 |
15 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /app/components/users/Rebate.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | 4 | export default class Rebate extends React.Component { 5 | render() { 6 | 7 | 8 | return
9 | 返利页面 10 | 11 |
12 | } 13 | } -------------------------------------------------------------------------------- /app/components/users/Register.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | import Header from "../common/Header.jsx" 4 | import InputBox from "../common/InputBox.jsx" 5 | import AlertMixin from "../common/mixin/AlertMixin.jsx" 6 | import history from 'history/lib/createHashHistory' 7 | import assign from 'object-assign'; 8 | 9 | import icon_phone from "../../images/icon-phone.png"; 10 | import icon_key from "../../images/icon-key.png"; 11 | import icon_verificationCode from "../../images/icon-verificationCode.png"; 12 | import icon_inviteCode from "../../images/icon-inviteCode.png"; 13 | 14 | require("../../scss/common/Button.scss"); 15 | require("../../scss/users/Register.scss"); 16 | 17 | class Register extends React.Component { 18 | 19 | constructor(props){ 20 | super(props); 21 | this.data = {}; 22 | } 23 | 24 | render() { 25 | 26 | return
27 | 28 |
29 | 30 |
31 |
32 | 33 | 41 | 42 |
43 |
    44 |
  • 45 | 46 |
    • 47 |
  • 48 | 50 | 51 |
    • 52 |
53 |
54 | 55 | 64 | 65 | 74 | 75 | 84 | 85 | 86 |

点击注册按钮表示您同意《注册协议》

87 |
88 |
89 |
90 | } 91 | 92 | changeHandler(data){ 93 | assign(this.data,data); 94 | } 95 | 96 | validateCodeHandler(e){ 97 | assign(this.data,{validateCode:e.target.value}); 98 | } 99 | 100 | registerHandler(){ 101 | if(!this.data.mobile){ 102 | this.props.onShow("请输入手机号码！"); 103 | return; 104 | } 105 | if(!this.data.validateCode){ 106 | this.props.onShow("请输入手机验证码！"); 107 | return; 108 | } 109 | if(!this.data.password){ 110 | this.props.onShow("请输入密码！"); 111 | return; 112 | } 113 | if(!this.data.rePassword){ 114 | this.props.onShow("请输入确认密码！"); 115 | return; 116 | } 117 | if(this.data.password!==this.data.rePassword){ 118 | this.props.onShow("两次密码不一致！"); 119 | return; 120 | } 121 | if(!this.data.inviteCode){ 122 | this.props.onShow("请输入邀请码！"); 123 | return; 124 | } 125 | 126 | //sessionStorage.setItem("cellphone", cellphone); 127 | //sessionStorage.setItem("password", password); 128 | 129 | history().pushState(null,"/index"); 130 | } 131 | } 132 | 133 | export default AlertMixin(Register); -------------------------------------------------------------------------------- /app/components/users/TransactionRecord.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router' 3 | import Header from "../common/Header.jsx" 4 | import Store from '../common/js/Store.js'; 5 | import Grid from '../common/Grid.jsx'; 6 | import TransactionRecordItem from './TransactionRecordItem.jsx'; 7 | 8 | require("../../scss/users/TransactionRecord.scss"); 9 | 10 | export default class TransactionRecord extends React.Component { 11 | render() { 12 | 13 | var store = new Store({url:"./transactionRecord.json"}); 14 | return
15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | } 23 | 24 | componentDidMount(){ 25 | 26 | } 27 | } 28 | 29 | 30 | -------------------------------------------------------------------------------- /app/components/users/TransactionRecordItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class TransactionRecordItem extends React.Component { 4 | 5 | constructor(props){ 6 | super(props); 7 | this.itemData = props.itemData; 8 | } 9 | 10 | render() { 11 | 12 | return
13 |
14 |
15 |
{this.itemData.productName}
16 |
{this.itemData.orderTime}
17 |
18 |
19 | 20 |
21 |
22 |
23 |
    24 |
  • {this.itemData.orderAmt}
    • 25 |
  • {this.itemData.principalinterest}
    • 26 |
  • {this.itemData.interest}
    • 27 |
  • 购买金额（元）
    • 28 |
  • 应收本息（元）
    • 29 |
  • 应收利息（元）
    • 30 |
31 |
32 |
33 |
    34 |
  • 35 | 起息日期： 36 | {this.itemData.interestStartDate} 37 |
    • 38 |
  • 39 | 到期日期： 40 | {this.itemData.interestEndDate} 41 |
    • 42 |
  • 43 | 44 |
    • 45 |
46 |
47 |
48 | } 49 | 50 | } 51 | 52 | TransactionRecordItem.propTypes = { 53 | itemData: React.PropTypes.object.isRequired 54 | }; -------------------------------------------------------------------------------- /app/images/aboutUs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/aboutUs/1.jpg -------------------------------------------------------------------------------- /app/images/aboutUs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/aboutUs/2.jpg -------------------------------------------------------------------------------- /app/images/aboutUs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/aboutUs/3.jpg -------------------------------------------------------------------------------- /app/images/aboutUs/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/aboutUs/4.jpg -------------------------------------------------------------------------------- /app/images/aboutUs/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/aboutUs/5.jpg -------------------------------------------------------------------------------- /app/images/aboutUs/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/aboutUs/6.jpg -------------------------------------------------------------------------------- /app/images/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/arrow-right.png -------------------------------------------------------------------------------- /app/images/house.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/house.png -------------------------------------------------------------------------------- /app/images/icon-alarm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-alarm.png -------------------------------------------------------------------------------- /app/images/icon-i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-i.png -------------------------------------------------------------------------------- /app/images/icon-incrementAmt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-incrementAmt.png -------------------------------------------------------------------------------- /app/images/icon-interestEndDate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-interestEndDate.png -------------------------------------------------------------------------------- /app/images/icon-interestStartDate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-interestStartDate.png -------------------------------------------------------------------------------- /app/images/icon-investLowerAmt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-investLowerAmt.png -------------------------------------------------------------------------------- /app/images/icon-investUpperAmt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-investUpperAmt.png -------------------------------------------------------------------------------- /app/images/icon-inviteCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-inviteCode.png -------------------------------------------------------------------------------- /app/images/icon-key.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-key.png -------------------------------------------------------------------------------- /app/images/icon-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-phone.png -------------------------------------------------------------------------------- /app/images/icon-safe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-safe.png -------------------------------------------------------------------------------- /app/images/icon-verificationCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/icon-verificationCode.png -------------------------------------------------------------------------------- /app/images/index_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/index_icon.png -------------------------------------------------------------------------------- /app/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/loading.gif -------------------------------------------------------------------------------- /app/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/logo.png -------------------------------------------------------------------------------- /app/images/share-friends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/app/images/share-friends.png -------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import { Router, Route,IndexRoute } from 'react-router'; 4 | import Index from './components/index/Index.jsx'; 5 | import App from './components/App.jsx'; 6 | import Login from "./components/users/Login.jsx"; 7 | import Register from "./components/users/Register.jsx"; 8 | import ProductList from "./components/product/ProductList.jsx"; 9 | import Purchase from "./components/product/Purchase.jsx"; 10 | import Assets from "./components/users/Assets.jsx"; 11 | import Invite from "./components/users/Invite.jsx"; 12 | import TransactionRecord from "./components/users/TransactionRecord.jsx"; 13 | import AboutUs from "./components/users/AboutUs.jsx"; 14 | import PersonalSetting from "./components/users/PersonalSetting.jsx"; 15 | import PurchaseAmount from "./components/product/PurchaseAmount.jsx"; 16 | 17 | 18 | //var DefaultRoute = Router.DefaultRoute; 19 | 20 | let routes = ( 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | 39 | main(); 40 | 41 | function main() { 42 | ReactDom.render(routes, document.getElementById('app')); 43 | } 44 | 45 | -------------------------------------------------------------------------------- /app/scss/common/Button.scss: -------------------------------------------------------------------------------- 1 | .button-red{ 2 | border-style: none; 3 | width: auto; 4 | overflow:visible; 5 | text-align: center; 6 | outline: none; 7 | padding: 0px 15px; 8 | border-radius: 5px; 9 | background-color: #EA3E4F; 10 | color: #FFFFFF; 11 | letter-spacing: 2px; 12 | } 13 | 14 | .button-red:active{ 15 | background-color: #b91c2c; 16 | } 17 | 18 | 19 | .button-red:disabled{ 20 | background-color: #999999; 21 | } 22 | 23 | 24 | .button-border-red{ 25 | width: auto; 26 | background-color: #FFFFFF; 27 | border: 2px solid #EA3E4F; 28 | overflow:visible; 29 | text-align: center; 30 | outline: none; 31 | padding: 0px 15px; 32 | border-radius: 5px; 33 | letter-spacing: 2px; 34 | } 35 | 36 | .button-border-red:active{ 37 | border: 2px solid #b91c2c; 38 | color: #b91c2c; 39 | } 40 | 41 | 42 | .button-state{ 43 | width: auto; 44 | background-color: #FFFFFF; 45 | border: none; 46 | overflow:visible; 47 | text-align: center; 48 | outline: none; 49 | letter-spacing: 2px; 50 | color: #FFFFFF; 51 | } 52 | 53 | -------------------------------------------------------------------------------- /app/scss/common/Header.scss: -------------------------------------------------------------------------------- 1 | @import "Tool"; 2 | 3 | #header{ 4 | width: 100%; 5 | height: 2.2rem; 6 | background-color: $color-red; 7 | } 8 | 9 | .iconLogo{ 10 | width: 1.9rem; 11 | height: 1.35rem; 12 | margin-top: 0.425rem; 13 | margin-left: 1rem; 14 | float: left; 15 | } 16 | 17 | .iconHouse{ 18 | width: 1.2rem; 19 | height: 1.2rem; 20 | margin-top: 0.5rem; 21 | margin-right: 1rem; 22 | float: right; 23 | } -------------------------------------------------------------------------------- /app/scss/common/Tool.scss: -------------------------------------------------------------------------------- 1 | $font-family: Microsoft YaHei; 2 | $color-red: #EA3E4F; //红色 3 | $color-bg-d7: #D7D7D7; //灰色背景 4 | $color-button-disabled: #999999; //disabled按钮 5 | $color-font-gray: gray; //灰色字体 6 | $color-font-black: #000000; //黑色字体 7 | 8 | @mixin userSelectNone{ 9 | -webkit-user-select: none; 10 | -ms-user-select: none; 11 | -moz-user-select: none; 12 | -o-user-select: none; 13 | user-select: none; 14 | } 15 | 16 | @mixin borderBox{ 17 | -moz-box-sizing: border-box; 18 | -webkit-box-sizing: border-box; 19 | -ms-box-sizing: border-box; 20 | -o-box-sizing: border-box; 21 | box-sizing: border-box; 22 | } 23 | 24 | 25 | @mixin opacity($opacity:50) { 26 | opacity: $opacity / 100; 27 | filter: alpha(opacity=$opacity); 28 | } -------------------------------------------------------------------------------- /app/scss/common/common.scss: -------------------------------------------------------------------------------- 1 | @import "Tool"; 2 | 3 | #app,.App{height: 100%;} 4 | .App>div{height: 100%;position: relative;} 5 | 6 | 7 | .red{ color: $color-red;} 8 | .hidden{display: none;} 9 | .strong{font-weight: bold;} 10 | .fr{float: right;} 11 | .fl{float: left;} 12 | .wh100{width: 100%;height: 100%;} 13 | .pointer{cursor: pointer;} 14 | .relative{position: relative;} 15 | .v-middle{vertical-align: middle;} 16 | 17 | /**margin**/ 18 | .mt1rem{margin-top: 1rem;} 19 | .mthalf{margin-top: 0.5rem;} 20 | 21 | /**padding**/ 22 | .pt1rem{padding-top: 1rem;} 23 | .pthalf{padding-top: 0.5rem;} 24 | 25 | /**text**/ 26 | .t-center{text-align: center;} 27 | .t-left{text-align: left;} 28 | .t-right{text-align: right;} 29 | .t-underline{ text-decoration:underline;} 30 | .t-underline-none{ text-decoration:none;} 31 | 32 | //调用 @include borderBox; 33 | 34 | 35 | .user-select-none{ 36 | -webkit-user-select: none; 37 | -ms-user-select: none; 38 | -moz-user-select: none; 39 | -o-user-select: none; 40 | user-select: none; 41 | } 42 | 43 | .box-sizing{ 44 | -moz-box-sizing:border-box; /* Firefox */ 45 | -webkit-box-sizing:border-box; /* Safari */ 46 | -ms-box-sizing:border-box; /* IE */ 47 | -o-box-sizing:border-box; /* IE */ 48 | box-sizing:border-box; 49 | } 50 | 51 | 52 | .overlay{ 53 | position:fixed; 54 | top:0; 55 | left: 0; 56 | z-index: 100; 57 | width: 100%; 58 | height: 100%; 59 | background: #000000; 60 | opacity:0.8; 61 | } 62 | 63 | .overlay.show{ 64 | display: block; 65 | } 66 | 67 | .overlay.hidden{ 68 | display: none; 69 | } 70 | 71 | 72 | 73 | .pageTransition-enter { 74 | opacity: 0.01; 75 | } 76 | 77 | .pageTransition-enter.pageTransition-enter-active { 78 | opacity: 1; 79 | transition: opacity 500ms ease-in; 80 | } 81 | 82 | .pageTransition-leave { 83 | opacity: 1; 84 | } 85 | 86 | .pageTransition-leave.pageTransition-leave-active { 87 | opacity: 0.01; 88 | transition: opacity 300ms ease-in; 89 | } -------------------------------------------------------------------------------- /app/scss/common/components/Alert.scss: -------------------------------------------------------------------------------- 1 | @import "../Tool"; 2 | #Alert{ 3 | width: 100%; 4 | height: 100%; 5 | background:rgba(120,120,120,0.2); 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | bottom: 0; 10 | z-index: 5; 11 | 12 | .dialog{ 13 | width: 12rem; 14 | height: 5rem; 15 | border: 1px solid #dddddd; 16 | background-color: #ffffff; 17 | border-radius: .5rem; 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | z-index: 10; 22 | -webkit-transform: translate(-50%,-50%); 23 | -ms-transform: translate(-50%,-50%); 24 | transform: translate(-50%,-50%); 25 | text-align: center; 26 | } 27 | 28 | .message{ 29 | width: 100%; 30 | height: 2.8rem; 31 | line-height: 2.8rem; 32 | } 33 | 34 | .confirmButton{ 35 | width: 5.4rem; 36 | height: 1.6rem; 37 | line-height: 1.6rem; 38 | background-color: #dddddd; 39 | border: 1px solid #dddddd; 40 | text-align: center; 41 | border-radius: .5rem; 42 | outline: none; 43 | -webkit-tap-highlight-color: transparent; 44 | 45 | } 46 | 47 | .confirmButton:active{ 48 | background-color: #D1D1D1; 49 | } 50 | } 51 | 52 | 53 | #Alert.animated { 54 | -webkit-animation-duration: .6s; 55 | animation-duration: .6s; 56 | } -------------------------------------------------------------------------------- /app/scss/common/components/Grid.scss: -------------------------------------------------------------------------------- 1 | @import "../Tool"; 2 | 3 | 4 | .grid.noData{ 5 | height: 3rem; 6 | line-height: 3rem; 7 | text-align: center; 8 | } 9 | 10 | .grid{ 11 | 12 | width: 16rem; 13 | 14 | .loading{ 15 | width: 100%; 16 | text-align: center; 17 | padding: 1rem; 18 | @include borderBox; 19 | 20 | img{ 21 | width: 1rem; 22 | height: 1rem; 23 | } 24 | } 25 | 26 | } 27 | 28 | 29 | .grid-table{ 30 | width: 100%; 31 | border: 1px solid #D7D7D7; 32 | vertical-align: middle; 33 | 34 | th{ 35 | text-align: left; 36 | border: 1px solid #D7D7D7; 37 | height: 2rem; 38 | } 39 | 40 | td{ 41 | border: 1px solid #D7D7D7; 42 | height: 2rem; 43 | } 44 | 45 | .noData{ 46 | 47 | } 48 | } -------------------------------------------------------------------------------- /app/scss/common/components/InputBox.scss: -------------------------------------------------------------------------------- 1 | .inputBox{ 2 | border-radius: 5px; 3 | border: 1px solid #AAAAAA; 4 | width: 12rem; 5 | height: 1.8rem; 6 | 7 | .icon{ 8 | width: 2rem; 9 | height: 1.8rem; 10 | text-align: center; 11 | } 12 | 13 | .icon img{ 14 | width: 1rem; 15 | height: 1rem; 16 | margin-top: .4rem; 17 | } 18 | 19 | 20 | li:last-child{ 21 | width: 10rem; 22 | height: 1.8rem; 23 | 24 | input{ 25 | 26 | } 27 | } 28 | 29 | input{ 30 | width: 100%; 31 | border: none; 32 | height: 1.2rem; 33 | line-height: 1.2rem; 34 | outline: none; 35 | margin-top: 0.3rem; 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /app/scss/common/reset.scss: -------------------------------------------------------------------------------- 1 | .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} 2 | .clearfix {*zoom:1} 3 | ul, ol,li{ list-style:none; } 4 | img{border: 0;outline: none;} 5 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 6 | h1, h2, h3, h4, h5, h6{ font-size:100%; } 7 | table { border-collapse:collapse; border-spacing:0; } 8 | a{ text-decoration: none;color:#333;outline: none;} 9 | *{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;} 10 | html{ 11 | margin: 0; 12 | padding: 0; 13 | width: 100%; 14 | height: 100%; 15 | font-family:'Microsoft YaHei'; 16 | font-size: 20px; 17 | font-size: calc(200vw/32); 18 | } 19 | 20 | body { 21 | min-width: 320px; 22 | max-width: 640px; 23 | height: 100%; 24 | margin: 0 auto; 25 | padding: 0; 26 | background-color: #FFFFFF; 27 | } 28 | 29 | @media all and (max-width:320px) { 30 | html { 31 | font-size: 20px; 32 | } 33 | body{ 34 | font-size: 12px; 35 | } 36 | } 37 | 38 | @media all and (min-width:640px) { 39 | html { 40 | font-size: 40px; 41 | } 42 | } 43 | 44 | @media only screen and (min-width: 321px){ 45 | body{ 46 | font-size: 14px; 47 | } 48 | } 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /app/scss/index/index.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | #indexPane{ 4 | width: 16rem; 5 | min-height: 100%; 6 | margin: auto; 7 | 8 | ul{ 9 | width: 100%; 10 | } 11 | 12 | li{ 13 | width: 5.3rem; 14 | float: left; 15 | height: 5.3rem; 16 | text-align: center; 17 | } 18 | 19 | li a{ 20 | color: #222; 21 | display: block; 22 | line-height: 2rem; 23 | } 24 | 25 | li:nth-child(3n-1){ 26 | border-left: solid 1px $color-bg-d7; 27 | border-right: solid 1px $color-bg-d7; 28 | } 29 | li:last-child{ 30 | border-right: solid 1px $color-bg-d7; 31 | } 32 | 33 | .left{ 34 | border-left: solid 1px $color-bg-d7; 35 | } 36 | 37 | .bottom{ 38 | border-bottom: solid 1px $color-bg-d7; 39 | } 40 | 41 | i{ 42 | display: block; 43 | background: url("../../images/index_icon.png") no-repeat; 44 | background-size:8.2rem 1.1rem; 45 | margin: 1.5rem auto 0; 46 | height: 1.14rem; 47 | } 48 | 49 | .index_icon1{ 50 | background-position: 0,0; 51 | width: 1.15rem; 52 | } 53 | 54 | .index_icon2{ 55 | background-position: -1.2rem 0; 56 | width: 1rem; 57 | } 58 | 59 | .index_icon3{ 60 | background-position: -2.2rem 0; 61 | width: 1rem; 62 | } 63 | 64 | .index_icon4{ 65 | background-position: -3.29rem 0; 66 | width: 0.98rem; 67 | } 68 | 69 | .index_icon5{ 70 | background-position: -4.3rem 0; 71 | width: 0.8rem; 72 | } 73 | 74 | .index_icon6{ 75 | background-position: -5.15rem 0; 76 | width: 1.1rem; 77 | } 78 | 79 | .index_icon7{ 80 | background-position: -6.3rem 0; 81 | width: 0.99rem; 82 | } 83 | 84 | .index_icon8{ 85 | background-position: -7.3rem 0; 86 | width: 0.9rem; 87 | } 88 | } 89 | 90 | 91 | -------------------------------------------------------------------------------- /app/scss/product/ProductList.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | #productListPane{ 4 | margin: auto; 5 | width: 16rem; 6 | color: #000000; 7 | background-color: #f3f3f3; 8 | min-height: 100%; 9 | 10 | #content{ 11 | width: 16rem; 12 | background-color: #f3f3f3; 13 | } 14 | 15 | .wrap{ 16 | margin-top: 0.4rem; 17 | width: 16rem; 18 | height: 9.4rem; 19 | background-color: #ffffff; 20 | border-top: 1px solid #D7D7D7; 21 | } 22 | 23 | .wrap .top{ 24 | margin: 0px 0.5rem; 25 | border-bottom: 1px solid #D7D7D7; 26 | height: 2.2rem; 27 | line-height: 2.2rem; 28 | } 29 | 30 | 31 | .top span:nth-child(1){ 32 | font-size: 14px; 33 | } 34 | 35 | .top .hotSale{ 36 | border-radius: 10px; 37 | background-color: $color-red; 38 | padding: 0px 0.3rem; 39 | color: #ffffff; 40 | } 41 | 42 | .top span:nth-child(3){ 43 | border-radius: 10px; 44 | background-color: #d7d7d7; 45 | padding: 0px 0.3rem; 46 | } 47 | 48 | .top span:nth-child(4){ 49 | float: right; 50 | } 51 | 52 | .top .productInfoText{ 53 | vertical-align: middle; 54 | } 55 | 56 | .top .r_arrow{ 57 | width: 0.3rem; 58 | height: 0.4rem; 59 | vertical-align: middle; 60 | margin-left: 5px; 61 | } 62 | 63 | .center{ 64 | height: 5.2rem; 65 | border-bottom: 1px solid #D7D7D7; 66 | padding: 0rem 0.5rem; 67 | } 68 | 69 | .center > div{ 70 | float: left; 71 | } 72 | 73 | .center .box1{ 74 | width: 5.5rem; 75 | } 76 | .center .box2{ 77 | width: 5.5rem; 78 | } 79 | .center .box3{ 80 | width: 4rem; 81 | } 82 | 83 | .center span{ 84 | line-height: 1.6rem; 85 | } 86 | 87 | .box1 span:nth-child(1){ 88 | display: block; 89 | height: 1.6rem; 90 | } 91 | 92 | .box1 span:nth-child(2){ 93 | display: block; 94 | font-size: 28px; 95 | color: $color-red; 96 | height: 1.8rem; 97 | font-family: arial, sans serif; 98 | } 99 | 100 | .box1 span:nth-child(3){ 101 | display: block; 102 | height: 1.6rem; 103 | } 104 | 105 | 106 | .box2 span:nth-child(1){ 107 | display: block; 108 | height: 1.6rem; 109 | } 110 | 111 | .box2 span:nth-child(2){ 112 | display: block; 113 | font-size: 22px; 114 | height: 1.8rem; 115 | } 116 | 117 | .box2 span:nth-child(3){ 118 | display: block; 119 | height: 1.6rem; 120 | } 121 | 122 | 123 | .progress{ 124 | width: 3.5rem; 125 | height: 3.5rem; 126 | margin-top: 0.75rem; 127 | float: right; 128 | } 129 | 130 | 131 | .bottom{ 132 | height: 2rem; 133 | padding: 0px 0.5rem; 134 | background-color: #f8f8f8; 135 | border-bottom: 1px solid #D7D7D7; 136 | line-height: 2rem; 137 | } 138 | 139 | .bottom label:last-child{ 140 | float: right; 141 | } 142 | 143 | 144 | .gray{ 145 | color: gray; 146 | } 147 | 148 | .black{ 149 | color: #000000; 150 | } 151 | 152 | 153 | .loading{ 154 | width: 100%; 155 | height: 30px; 156 | font-size: 14px; 157 | text-align: center; 158 | line-height: 30px; 159 | position: absolute; 160 | z-index: 100; 161 | left: 0; 162 | bottom:0px; 163 | color: blue; 164 | } 165 | 166 | .trade_fail{ 167 | width: 4.5rem; 168 | height: 5rem; 169 | margin: auto; 170 | } 171 | 172 | .trade_fail img{ 173 | width: 4.5rem; 174 | height: 4.5rem; 175 | padding-top: .5rem; 176 | } 177 | } 178 | 179 | 180 | -------------------------------------------------------------------------------- /app/scss/product/Purchase.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | #purchasePane{ 3 | width: 16rem; 4 | min-height: 100%; 5 | margin: auto; 6 | overflow: hidden; 7 | 8 | .wrap-header{ 9 | width: 100%; 10 | height: 14.6rem; 11 | background-color: #F8F8F8; 12 | } 13 | 14 | .time{ 15 | text-align: center; 16 | margin-top: 0.4rem; 17 | } 18 | 19 | .wrap-header label{ 20 | font-size: 20px; 21 | margin-right: 0.2rem; 22 | } 23 | 24 | .wrap-footer{ 25 | width: 100%; 26 | } 27 | 28 | #productName{ 29 | width: 100%; 30 | height: 2.65rem; 31 | line-height: 2.65rem; 32 | text-align: center; 33 | color: $color-red; 34 | font-size: 22px; 35 | } 36 | 37 | .outProgress{ 38 | width: 8rem; 39 | height: 8rem; 40 | border-radius: 100%; 41 | border: 3px solid #e8e8e8; 42 | margin: auto; 43 | } 44 | 45 | .progress{ 46 | width: 7.5rem; 47 | height: 7.5rem; 48 | margin: 0.25rem 0.25rem; 49 | } 50 | 51 | .icon-alarm{ 52 | width: 22px; 53 | height: 22px; 54 | margin-right: 0.2rem; 55 | margin-top: 2px; 56 | vertical-align: middle; 57 | margin-bottom: 10px; 58 | } 59 | 60 | .purchaseInfo{ 61 | height: 4rem; 62 | width: 100%; 63 | } 64 | 65 | .purchaseInfo li{ 66 | width: 33%; 67 | float: left; 68 | height: 4rem; 69 | line-height: 4rem; 70 | text-align: center; 71 | } 72 | 73 | .purchaseInfo label{ 74 | color: $color-red; 75 | font-size: 16px; 76 | } 77 | 78 | 79 | #purchaseButton{ 80 | margin-left: 1rem; 81 | width: 14rem; 82 | height: 1.8rem; 83 | border-radius: 1rem; 84 | } 85 | 86 | .tips{ 87 | font-size: 12px; 88 | padding-top: 0.5rem; 89 | text-align: center; 90 | } 91 | 92 | .iconSafe{ 93 | width: 22px; 94 | height: 22px; 95 | vertical-align: middle; 96 | padding-right: 5px; 97 | } 98 | 99 | .tips-text{ 100 | vertical-align: middle; 101 | } 102 | } 103 | 104 | -------------------------------------------------------------------------------- /app/scss/product/PurchaseAmount.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | #purchaseAmountPane{ 4 | width: 16rem; 5 | height: 27rem; 6 | margin: auto; 7 | background-color: #F3F3F3; 8 | margin-bottom: 3.5rem; 9 | 10 | 11 | .wrap{ 12 | width: 14.4rem; 13 | height: 8rem; 14 | padding: 0rem 0.8rem; 15 | background-color: #EA3E4F; 16 | } 17 | 18 | 19 | .inputBox{ 20 | margin: 0.2rem 0rem; 21 | background-color: #ffffff; 22 | width: 14.4rem; 23 | height: 2.2rem; 24 | } 25 | 26 | .amountInput{ 27 | width: 8.5rem; 28 | height: 1.8rem; 29 | margin: 0.2rem 0rem 0.2rem 0.1rem; 30 | line-height: 1.1rem; 31 | border: 0px; 32 | outline: none; 33 | } 34 | 35 | .earningsPane{ 36 | width: 5.3rem; 37 | height: 1.8rem; 38 | padding: 0rem 0.2rem; 39 | margin: 0.2rem 0rem; 40 | float: right; 41 | border-left: 1px solid #999999; 42 | @include borderBox; 43 | } 44 | 45 | 46 | .label{ 47 | width: 3.9rem; 48 | height: 0.9rem; 49 | line-height: 0.9rem; 50 | } 51 | 52 | .font-white{ 53 | color: #ffffff; 54 | } 55 | 56 | .optionalAmountPane{ 57 | margin-top: 0.2rem; 58 | width: 14.4rem; 59 | height: 1.5rem; 60 | } 61 | 62 | .optionalAmountPane > span{ 63 | display: block; 64 | float: left; 65 | width: 3.45rem; 66 | height: 1.2rem; 67 | color: #ffffff; 68 | border: 1px solid #ffffff; 69 | margin-right: 0.2rem; 70 | @include borderBox; 71 | border-radius: 1rem; 72 | text-align: center; 73 | line-height: 1.2rem; 74 | cursor: pointer; 75 | } 76 | 77 | .optionalAmountPane > span:active{ 78 | background-color: #b91c2c; 79 | border: 2px solid #b91c2c; 80 | } 81 | 82 | .optionalAmountPane > span:last-child{ 83 | margin: 0; 84 | } 85 | 86 | .prompt{ 87 | width: 14.4rem; 88 | height: 3rem; 89 | padding: 0rem 0.8rem; 90 | background-color: #ffffff; 91 | border-bottom: solid 1px $color-bg-d7; 92 | display: table; 93 | } 94 | 95 | .prompt img{ 96 | width: 1.1rem; 97 | height: 1.1rem; 98 | float: left; 99 | margin-top: 0.9rem; 100 | } 101 | 102 | .promptLabel{ 103 | width: 13rem; 104 | height: 3rem; 105 | display: table; 106 | float: right; 107 | padding-left: 0.2rem; 108 | } 109 | 110 | 111 | .promptLabel span{ 112 | display: table-cell; 113 | vertical-align: middle; 114 | } 115 | 116 | 117 | .inviteCode{ 118 | width: 14.4rem; 119 | height: 3rem; 120 | padding: 0rem 0.8rem; 121 | background-color: #ffffff; 122 | line-height: 3rem; 123 | border-bottom: solid 1px $color-bg-d7; 124 | margin-top: 0.5rem; 125 | border-top: solid 1px $color-bg-d7; 126 | } 127 | 128 | .inviteCode input{ 129 | border: none; 130 | width: 8rem; 131 | height: 1rem; 132 | outline: none; 133 | } 134 | 135 | 136 | ul.info{ 137 | width: 16rem; 138 | background-color: #ffffff; 139 | margin-top: 0.5rem; 140 | border-bottom: solid 1px $color-bg-d7; 141 | border-top: solid 1px $color-bg-d7; 142 | } 143 | 144 | .info img{ 145 | width: 1.1rem; 146 | height: 1.1rem; 147 | float: left; 148 | margin-top: 0.3rem; 149 | } 150 | 151 | ul.info li{ 152 | height: 1.7rem; 153 | padding: 0rem 0.8rem; 154 | } 155 | 156 | ul.info .text{ 157 | display: block; 158 | height: 1.7rem; 159 | width: 6rem; 160 | float: left; 161 | line-height: 1.7rem; 162 | padding-left: 0.5rem; 163 | } 164 | 165 | ul.info .last{ 166 | display: block; 167 | height: 1.7rem; 168 | width: 6rem; 169 | float: right; 170 | line-height: 1.7rem; 171 | text-align: right; 172 | } 173 | 174 | ul.info li:nth-child(odd){ 175 | background: #FFF; 176 | } 177 | 178 | ul.info li:nth-child(even){ 179 | background: #f8f8f8; 180 | } 181 | 182 | .footer{ 183 | width: 100%; 184 | height: 2.5rem; 185 | line-height: 2.5rem; 186 | text-align: center; 187 | margin: auto; 188 | position: fixed; 189 | bottom: 0px; 190 | left: 0; 191 | } 192 | 193 | #purchaseButton{ 194 | width: 16rem; 195 | height: 2.5rem; 196 | border-radius: 0; 197 | 198 | } 199 | } 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /app/scss/users/AboutUs.scss: -------------------------------------------------------------------------------- 1 | #aboutUsPane{ 2 | width: 16rem; 3 | min-height: 100%; 4 | margin: auto; 5 | 6 | .icon{ 7 | height: 3rem; 8 | width: 3rem; 9 | } 10 | 11 | .content{ 12 | width: 11rem; 13 | height: 3rem; 14 | background-color: #F3F3F3; 15 | -webkit-border-top-right-radius: 10px; 16 | -webkit-border-bottom-right-radius: 10px; 17 | border-top-right-radius: 10px; 18 | border-bottom-right-radius: 10px; 19 | -moz-border-top-right-radius: 10px; 20 | -moz-border-bottom-right-radius: 10px; 21 | padding-left: 0.8rem; 22 | display:table; 23 | } 24 | .content span{ 25 | display: table-cell; 26 | vertical-align: middle; 27 | } 28 | 29 | ul{ 30 | padding:1rem; 31 | width: 14rem; 32 | } 33 | 34 | li{ 35 | margin-bottom:0.6rem; 36 | height: 3rem; 37 | width: 100%; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /app/scss/users/Assets.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | #assetsPane{ 4 | margin: auto; 5 | width: 16rem; 6 | background-color: #f3f3f3; 7 | min-height: 100%; 8 | 9 | #content{ 10 | width: 100%; 11 | } 12 | 13 | .detail{ 14 | height: 4rem; 15 | padding-top: 2rem; 16 | background-image: linear-gradient(#FFFFFF, #EEEEEE); 17 | } 18 | .detail span{ 19 | display: inline-block; 20 | font-size: 25px; 21 | } 22 | 23 | .ul01{ 24 | border-top: solid 1px $color-bg-d7; 25 | border-bottom: solid 1px $color-bg-d7; 26 | height:3.6rem; 27 | background: #fff; 28 | } 29 | 30 | .ul01 li{ 31 | width: 50%; 32 | float: left; 33 | text-align: center; 34 | color: #666; 35 | height:2.5rem; 36 | margin-top: 1.1rem; 37 | } 38 | 39 | .ul01 span{ 40 | display: block; 41 | } 42 | 43 | .f25{ 44 | font-size: 25px; 45 | } 46 | 47 | 48 | .ul01 li a{ 49 | color: #666; 50 | border-right:solid 1px $color-bg-d7; 51 | display: inline-block; 52 | width:100%; 53 | height: 1.5rem; 54 | } 55 | 56 | .bz{ 57 | text-indent: 0.87rem; 58 | width: 100%; 59 | height: 1.3rem; 60 | line-height: 1.3rem; 61 | background-color: #F3F3F3; 62 | border-bottom: 1px solid $color-bg-d7; 63 | } 64 | 65 | #gridPane{ 66 | width: 16rem; 67 | background-color: #f3f3f3; 68 | 69 | .grid-table{ 70 | 71 | background-color: #ffffff; 72 | 73 | border: none; 74 | 75 | td{ 76 | border: none; 77 | } 78 | 79 | tr{ 80 | border-bottom: 1px solid $color-bg-d7; 81 | } 82 | 83 | tr>td:first-child{ 84 | text-indent: .87rem; 85 | } 86 | } 87 | } 88 | 89 | .right{ 90 | text-align: right; 91 | vertical-align: middle; 92 | 93 | img{ 94 | padding: 0rem .87rem .04rem 5px; 95 | vertical-align: middle; 96 | width: .3rem; 97 | height: .4rem; 98 | } 99 | } 100 | 101 | } 102 | 103 | 104 | -------------------------------------------------------------------------------- /app/scss/users/Invite.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | 4 | #invitePane{ 5 | width: 16rem; 6 | min-height: 100%; 7 | background: #F3F3F3; 8 | margin: auto; 9 | 10 | #content{ 11 | width: 15rem; 12 | margin: .5rem .5rem 0rem .5rem; 13 | border: 1px solid #DEDCDC; 14 | background: #EBEBEB; 15 | } 16 | 17 | .title, .mycode{ 18 | text-align: center; 19 | padding: .5rem 0rem; 20 | } 21 | 22 | #QRcode{ 23 | margin: auto; 24 | } 25 | 26 | 27 | #getPointsButton{ 28 | width: 12rem; 29 | height: 1.8rem; 30 | margin-left: 1.5rem; 31 | border-radius: 1rem; 32 | } 33 | 34 | 35 | .p{ 36 | text-align: center; 37 | } 38 | 39 | .white{ 40 | width: 100%; 41 | background-color: #FFFFFF; 42 | padding-top: 1rem; 43 | padding-bottom: 1rem; 44 | border-top: 1px solid #DEDCDC; 45 | } 46 | 47 | .share{ 48 | position:fixed; 49 | width: 100%; 50 | height: 100%; 51 | top:0; 52 | left: 0; 53 | z-index: 110; 54 | text-align: right; 55 | display: none; 56 | } 57 | 58 | .share img{ 59 | margin:10px 35px 0 0; 60 | width: 75%; 61 | } 62 | 63 | .tips{ 64 | color:#FFF; 65 | margin-top: 10px; 66 | text-align:center; 67 | margin-left:-15px; 68 | } 69 | } 70 | 71 | 72 | -------------------------------------------------------------------------------- /app/scss/users/Login.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | #loginPane{ 4 | width: 16rem; 5 | min-height: 100%; 6 | margin: auto; 7 | background-color: $color-bg-d7; 8 | 9 | #content{ 10 | width: 16rem; 11 | } 12 | .wrap-login{ 13 | padding: 2rem 1rem; 14 | margin: auto; 15 | width: 12rem; 16 | height: 12rem; 17 | background-color: #FFFFFF; 18 | margin-top: 1rem; 19 | } 20 | 21 | .wrap-login button{ 22 | width: 100%; 23 | height: 1.8rem; 24 | } 25 | 26 | .loginButton{ 27 | margin-top: 1rem; 28 | font-size: 20px; 29 | } 30 | 31 | .registerButton{ 32 | color: $color-red; 33 | font-size: 20px; 34 | } 35 | 36 | p{ 37 | height: 1.9rem; 38 | text-align: right; 39 | font-size: 14px; 40 | line-height: 1.5rem; 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /app/scss/users/PersonalSetting.scss: -------------------------------------------------------------------------------- 1 | #personalSettingPane{ 2 | width: 16rem; 3 | min-height: 100%; 4 | margin: auto; 5 | overflow:hidden; 6 | background-color: #F3F3F3; 7 | 8 | #content{ 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | li{ 14 | width: 15.15rem; 15 | padding-left: 0.85rem; 16 | border-bottom: solid 1px #d7d7d7; 17 | } 18 | li:nth-child(odd){ 19 | height: 1.8rem; 20 | line-height: 1.8rem; 21 | color: #666; 22 | } 23 | li:nth-child(even){ 24 | height: 2.3rem; 25 | line-height: 2.3rem; 26 | color: #222; 27 | background-color: #FFFFFF; 28 | } 29 | 30 | li .authed{ 31 | float: right; 32 | padding-right: 5%; 33 | } 34 | 35 | li.arrow{ 36 | background: url("../../images/arrow-right.png") no-repeat #fff 95% center; 37 | background-size: 0.47rem 0.85rem; 38 | } 39 | li:nth-child(even) a{ 40 | color: #222; 41 | display: block; 42 | text-decoration: none; 43 | } 44 | 45 | #logoutButton{ 46 | margin-left: 1rem; 47 | width: 14rem; 48 | height: 1.8rem; 49 | border-radius: 1rem; 50 | margin-top: 1rem; 51 | } 52 | 53 | .a-button{ 54 | display: block; 55 | } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /app/scss/users/Register.scss: -------------------------------------------------------------------------------- 1 | @import "../common/Tool"; 2 | 3 | #registerPane{ 4 | width: 16rem; 5 | margin: auto; 6 | min-height: 100%; 7 | 8 | #content{ 9 | width: 100%; 10 | height: 100%; 11 | background-color: #F3F3F3; 12 | overflow: hidden; 13 | } 14 | 15 | .wrap-register{ 16 | padding: 2rem 1rem 1rem 1rem; 17 | width: 12rem; 18 | height: 16rem; 19 | background-color: #FFFFFF; 20 | margin: auto; 21 | margin-top: 1rem; 22 | } 23 | 24 | .confirm{ 25 | width: 5.8rem; 26 | } 27 | 28 | #getValidateCodeButton{ 29 | width: 4rem; 30 | height: 1rem; 31 | padding: 0; 32 | margin-top: .4rem; 33 | } 34 | 35 | .wrap-register > button{ 36 | width: 100%; 37 | height: 1.8rem; 38 | } 39 | 40 | .registerButton{ 41 | margin-top: 1rem; 42 | font-size: 20px; 43 | } 44 | 45 | p{ 46 | text-align: center; 47 | line-height:27px; 48 | color: #666; 49 | } 50 | 51 | p a{ 52 | color: $color-red; 53 | } 54 | } 55 | 56 | 57 | -------------------------------------------------------------------------------- /app/scss/users/TransactionRecord.scss: -------------------------------------------------------------------------------- 1 | #transactionRecordPane{ 2 | margin: auto; 3 | width: 16rem; 4 | color: #000000; 5 | background-color: #f3f3f3; 6 | min-height: 100%; 7 | 8 | #content{ 9 | width: 16rem; 10 | background-color: #f3f3f3; 11 | } 12 | 13 | #gridPane{ 14 | -webkit-overflow-scrolling: touch; 15 | width: 16rem; 16 | } 17 | 18 | .grid-item{ 19 | margin-top: 0.4rem; 20 | width: 16rem; 21 | /**height: 10.2rem;**/ 22 | border-top: 1px solid #D7D7D7; 23 | 24 | } 25 | 26 | .grid-item .top{ 27 | width: 14.4rem; 28 | height: 2.2rem; 29 | background-color: #FFFFFF; 30 | padding: 0rem 0.8rem; 31 | } 32 | 33 | .nameAndTime{ 34 | float: left; 35 | width: 8.6rem; 36 | height: 1.2rem; 37 | padding-top: 0.5rem; 38 | line-height: 0.6rem; 39 | } 40 | 41 | .nameAndTime div:first-child{ 42 | font-size: 14px; 43 | height: 0.6rem; 44 | line-height: .6rem; 45 | color: #EA3E4F; 46 | } 47 | 48 | .nameAndTime div:last-child{ 49 | font-size: 12px; 50 | height: 1rem; 51 | line-height: 1rem; 52 | } 53 | 54 | .payState{ 55 | width: 5.8rem; 56 | height: 2.2rem; 57 | float: right; 58 | text-align: right; 59 | line-height: 2.2rem; 60 | } 61 | 62 | .payState button{ 63 | background-color: #0BACD3; 64 | width: 4rem; 65 | height: 1rem; 66 | border-radius: 10px; 67 | letter-spacing: 0; 68 | font-size: 12px; 69 | } 70 | 71 | 72 | .button-type-green{ 73 | background-color: #45BF55 !important; 74 | } 75 | 76 | .button-type-0BACD3{ 77 | background-color: #0BACD3 !important; 78 | } 79 | 80 | 81 | .button-type-green{ 82 | background-color: #45BF55 !important; 83 | } 84 | 85 | .button-type-gray{ 86 | background-color: #999999 !important; 87 | } 88 | 89 | 90 | .gray{ 91 | color: gray; 92 | } 93 | 94 | 95 | .center{ 96 | width: 16rem; 97 | height: 4rem; 98 | padding: 1rem 0.4rem 1rem 0.8rem; 99 | background-color: #F9F9F9; 100 | } 101 | 102 | .center ul{ 103 | } 104 | 105 | .center ul li{ 106 | width: 5.2rem; 107 | height: 1rem; 108 | float: left; 109 | } 110 | 111 | .center ul .w-small{ 112 | width: 4.2rem; 113 | float: left; 114 | } 115 | 116 | 117 | .bottom{ 118 | /**height: 4rem;**/ 119 | background-color: #FFFFFF; 120 | /**border-bottom: 1px solid #D7D7D7;**/ 121 | } 122 | 123 | .bottom ul{ 124 | width: 100%; 125 | height: 100%; 126 | } 127 | 128 | 129 | .borderBottomD7D7D7{ 130 | border-bottom: 1px solid #D7D7D7; 131 | } 132 | 133 | .bottomText{ 134 | width: 100%; 135 | height: 2rem; 136 | line-height: 2rem; 137 | } 138 | 139 | .bottomText>a{ 140 | float: left; 141 | color: #000000; 142 | } 143 | 144 | .bottomText>span{ 145 | float: right; 146 | } 147 | 148 | .bottom ul li{ 149 | width: 8rem; 150 | float: left; 151 | height: 2rem; 152 | line-height: 2rem; 153 | } 154 | 155 | .bottom ul li:last-child{ 156 | float: right; 157 | text-align: right; 158 | line-height:0; 159 | width: 16rem; 160 | } 161 | 162 | .plhalf{ 163 | padding-left: 0.8rem; 164 | } 165 | 166 | .prhalf{ 167 | padding-right: 0.8rem; 168 | } 169 | 170 | .bottom button{ 171 | width: 4rem; 172 | height: 1rem; 173 | color: red; 174 | letter-spacing: 0px; 175 | font-size: 12px; 176 | margin-top: 0.5rem; 177 | margin-right: 0.8rem; 178 | padding: 0px; 179 | } 180 | 181 | 182 | .trade_fail{ 183 | width: 4.5rem; 184 | height: 5rem; 185 | margin: auto; 186 | } 187 | 188 | .trade_fail img{ 189 | width: 4.5rem; 190 | height: 4.5rem; 191 | padding-top: .5rem; 192 | } 193 | 194 | p{ 195 | margin-top: 2rem; 196 | color: #8c8c8c; 197 | letter-spacing: 2px; 198 | } 199 | 200 | } 201 | 202 | -------------------------------------------------------------------------------- /build/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "pageNo":1, 3 | "pageSize": 10, 4 | "totalPage": 1, 5 | "totalNum": 10, 6 | "items": [ 7 | { 8 | "id":"1", 9 | "productName": "捞财宝1号", 10 | "statusName": "待付款", 11 | "orderAmt": "2,500", 12 | "principalinterest": "200.00", 13 | "yesterProfit": "20", 14 | "interestStartDate":"2015-12-25", 15 | "interestEndDate":"2016-05-14", 16 | "status": "1", 17 | "orderId": "001100", 18 | "orderAmt": "2,500", 19 | "orderTime": "2015-12-24" 20 | }, 21 | { 22 | "id":"2", 23 | "productName": "捞财宝2号", 24 | "statusName": "待付款", 25 | "orderAmt": "2,500", 26 | "principalinterest": "200.00", 27 | "yesterProfit": "20", 28 | "interestStartDate":"2015-12-25", 29 | "interestEndDate":"2016-05-14", 30 | "status": "1", 31 | "orderId": "001111", 32 | "orderAmt": "2,500", 33 | "orderTime": "2015-12-24" 34 | }, 35 | { 36 | "id":"3", 37 | "productName": "捞财宝3号", 38 | "statusName": "待付款", 39 | "orderAmt": "2,500", 40 | "principalinterest": "200.00", 41 | "yesterProfit": "20", 42 | "interestStartDate":"2015-12-25", 43 | "interestEndDate":"2016-05-14", 44 | "status": "1", 45 | "orderId": "001100", 46 | "orderAmt": "2,500", 47 | "orderTime": "2015-12-24" 48 | }, 49 | { 50 | "id":"4", 51 | "productName": "捞财宝4号", 52 | "statusName": "待付款", 53 | "orderAmt": "2,500", 54 | "principalinterest": "200.00", 55 | "yesterProfit": "20", 56 | "interestStartDate":"2015-12-25", 57 | "interestEndDate":"2016-05-14", 58 | "status": "1", 59 | "orderId": "001100", 60 | "orderAmt": "2,500", 61 | "orderTime": "2015-12-24" 62 | }, 63 | { 64 | "id":"5", 65 | "productName": "捞财宝5号", 66 | "statusName": "待付款", 67 | "orderAmt": "2,500", 68 | "principalinterest": "200.00", 69 | "yesterProfit": "20", 70 | "interestStartDate":"2015-12-25", 71 | "interestEndDate":"2016-05-14", 72 | "status": "1", 73 | "orderId": "001100", 74 | "orderAmt": "2,500", 75 | "orderTime": "2015-12-24" 76 | }, 77 | { 78 | "id":"6", 79 | "productName": "捞财宝6号", 80 | "statusName": "待付款", 81 | "orderAmt": "2,500", 82 | "principalinterest": "200.00", 83 | "yesterProfit": "20", 84 | "interestStartDate":"2015-12-25", 85 | "interestEndDate":"2016-05-14", 86 | "status": "1", 87 | "orderId": "001100", 88 | "orderAmt": "2,500", 89 | "orderTime": "2015-12-24" 90 | }, 91 | { 92 | "id":"7", 93 | "productName": "捞财宝7号", 94 | "statusName": "待付款", 95 | "orderAmt": "2,500", 96 | "principalinterest": "200.00", 97 | "yesterProfit": "20", 98 | "interestStartDate":"2015-12-25", 99 | "interestEndDate":"2016-05-14", 100 | "status": "1", 101 | "orderId": "001100", 102 | "orderAmt": "2,500", 103 | "orderTime": "2015-12-24" 104 | }, 105 | { 106 | "id":"8", 107 | "productName": "捞财宝8号", 108 | "statusName": "待付款", 109 | "orderAmt": "2,500", 110 | "principalinterest": "200.00", 111 | "yesterProfit": "20", 112 | "interestStartDate":"2015-12-25", 113 | "interestEndDate":"2016-05-14", 114 | "status": "1", 115 | "orderId": "001100", 116 | "orderAmt": "2,500", 117 | "orderTime": "2015-12-24" 118 | }, 119 | { 120 | "id":"9", 121 | "productName": "捞财宝9号", 122 | "statusName": "待付款", 123 | "orderAmt": "2,500", 124 | "principalinterest": "200.00", 125 | "yesterProfit": "20", 126 | "interestStartDate":"2015-12-25", 127 | "interestEndDate":"2016-05-14", 128 | "status": "1", 129 | "orderId": "001100", 130 | "orderAmt": "2,500", 131 | "orderTime": "2015-12-24" 132 | }, 133 | { 134 | "id":"10", 135 | "productName": "捞财宝10号", 136 | "statusName": "待付款", 137 | "orderAmt": "2,500", 138 | "principalinterest": "200.00", 139 | "yesterProfit": "20", 140 | "interestStartDate":"2015-12-25", 141 | "interestEndDate":"2016-05-14", 142 | "status": "1", 143 | "orderId": "001100", 144 | "orderAmt": "2,500", 145 | "orderTime": "2015-12-24" 146 | } 147 | ] 148 | } -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react project 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /build/index_production.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react project 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /build/productList.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "productId":"111111", 4 | "productName": "捞财宝1号", 5 | "yearRate": "10", 6 | "investPeriod": "365天", 7 | "interestStartDate": "2015-12-01", 8 | "totalInvestPerson": "100,000", 9 | "productPrincipal":"24万", 10 | "hotSellFlag":"1", 11 | "progress": 20 12 | }, 13 | 14 | { 15 | "productId":"222222", 16 | "productName": "捞财宝2号", 17 | "yearRate": "9", 18 | "investPeriod": "180天", 19 | "interestStartDate": "2015-12-01", 20 | "totalInvestPerson": "100,000", 21 | "productPrincipal":"24万", 22 | "hotSellFlag":"0", 23 | "progress": 30 24 | }, 25 | 26 | { 27 | "productId":"000000", 28 | "productName": "捞财宝3号", 29 | "yearRate": "18", 30 | "investPeriod": "90天", 31 | "interestStartDate": "2015-12-01", 32 | "totalInvestPerson": "100,000", 33 | "productPrincipal":"24万", 34 | "hotSellFlag":"1", 35 | "progress": 80 36 | } 37 | ] -------------------------------------------------------------------------------- /build/purchase.json: -------------------------------------------------------------------------------- 1 | { 2 | "productName":"捞财宝1号", 3 | "investPeriod": "180", 4 | "investLower": "1,000", 5 | "totalInvestPerson": "2,500", 6 | "remaindTime": 200000 7 | } 8 | -------------------------------------------------------------------------------- /build/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/build/qrcode.png -------------------------------------------------------------------------------- /build/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 在线预览 6 | 7 | 8 | 15 | 37 | 38 | 39 | 40 |
47 | 48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 | 64 | 70 | 71 |
72 | 73 | -------------------------------------------------------------------------------- /build/transactionRecord.json: -------------------------------------------------------------------------------- 1 | { 2 | "pageNo":1, 3 | "pageSize": 10, 4 | "totalPage": 1, 5 | "totalNum": 3, 6 | "items": [ 7 | { 8 | "id":"1", 9 | "productName": "捞财宝1号", 10 | "statusName": "待付款", 11 | "orderAmt": "2,500", 12 | "principalinterest": "200.00", 13 | "yesterProfit": "20", 14 | "interestStartDate":"2015-12-25", 15 | "interestEndDate":"2016-05-14", 16 | "status": "1", 17 | "orderId": "001100", 18 | "orderAmt": "2,500", 19 | "orderTime": "2015-12-24" 20 | }, 21 | { 22 | "id":"2", 23 | "productName": "捞财宝2号", 24 | "statusName": "待付款", 25 | "orderAmt": "2,500", 26 | "principalinterest": "200.00", 27 | "yesterProfit": "20", 28 | "interestStartDate":"2015-12-25", 29 | "interestEndDate":"2016-05-14", 30 | "status": "1", 31 | "orderId": "001111", 32 | "orderAmt": "2,500", 33 | "orderTime": "2015-12-24" 34 | }, 35 | { 36 | "id":"3", 37 | "productName": "捞财宝3号", 38 | "statusName": "待付款", 39 | "orderAmt": "2,500", 40 | "principalinterest": "200.00", 41 | "yesterProfit": "20", 42 | "interestStartDate":"2015-12-25", 43 | "interestEndDate":"2016-05-14", 44 | "status": "1", 45 | "orderId": "001100", 46 | "orderAmt": "2,500", 47 | "orderTime": "2015-12-24" 48 | } 49 | ] 50 | } -------------------------------------------------------------------------------- /dist/all.a7e8fd9c.css: -------------------------------------------------------------------------------- 1 | #header{width:100%;height:2.2rem;background-color:#ea3e4f}.iconLogo{width:1.9rem;height:1.35rem;margin-top:.425rem;margin-left:1rem;float:left}.iconHouse{width:1.2rem;height:1.2rem;margin-top:.5rem;margin-right:1rem;float:right}#indexPane{width:16rem;min-height:100%;margin:auto}#indexPane ul{width:100%}#indexPane li{width:5.3rem;float:left;height:5.3rem;text-align:center}#indexPane li a{color:#222;display:block;line-height:2rem}#indexPane li:nth-child(3n-1){border-left:1px solid #d7d7d7}#indexPane li:last-child,#indexPane li:nth-child(3n-1){border-right:1px solid #d7d7d7}#indexPane .left{border-left:1px solid #d7d7d7}#indexPane .bottom{border-bottom:1px solid #d7d7d7}#indexPane i{display:block;background:url(app/images/index_icon.d50c0901.png) no-repeat;background-size:8.2rem 1.1rem;margin:1.5rem auto 0;height:1.14rem}#indexPane .index_icon1{background-position:0,0;width:1.15rem}#indexPane .index_icon2{background-position:-1.2rem 0;width:1rem}#indexPane .index_icon3{background-position:-2.2rem 0;width:1rem}#indexPane .index_icon4{background-position:-3.29rem 0;width:.98rem}#indexPane .index_icon5{background-position:-4.3rem 0;width:.8rem}#indexPane .index_icon6{background-position:-5.15rem 0;width:1.1rem}#indexPane .index_icon7{background-position:-6.3rem 0;width:.99rem}#indexPane .index_icon8{background-position:-7.3rem 0;width:.9rem}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{*zoom:1}li,ol,ul{list-style:none}img{border:0;outline:none}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none;color:#333;outline:none}*{-webkit-tap-highlight-color:transparent}html{margin:0;width:100%;font-family:Microsoft YaHei;font-size:20px;font-size:6.25vw}body,html{padding:0;height:100%}body{min-width:320px;max-width:640px;margin:0 auto;background-color:#fff}@media all and (max-width:320px){html{font-size:20px}body{font-size:12px}}@media all and (min-width:640px){html{font-size:40px}}@media only screen and (min-width:321px){body{font-size:14px}}/*! 2 | Animate.css - http://daneden.me/animate 3 | Version - 3.4.0 4 | Licensed under the MIT license - http://opensource.org/licenses/MIT 5 | 6 | Copyright (c) 2015 Daniel Eden 7 | */.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes pulse{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}}@keyframes tada{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}}@keyframes wobble{0%,to{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.39063deg) skewY(.39063deg);transform:skewX(.39063deg) skewY(.39063deg)}88.8%{-webkit-transform:skewX(-.19531deg) skewY(-.19531deg);transform:skewX(-.19531deg) skewY(-.19531deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.39063deg) skewY(.39063deg);transform:skewX(.39063deg) skewY(.39063deg)}88.8%{-webkit-transform:skewX(-.19531deg) skewY(-.19531deg);transform:skewX(-.19531deg) skewY(-.19531deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}#app,.App,.App>div{height:100%}.App>div{position:relative}.red{color:#ea3e4f}.hidden{display:none}.strong{font-weight:700}.fr{float:right}.fl{float:left}.wh100{width:100%;height:100%}.pointer{cursor:pointer}.relative{position:relative}.v-middle{vertical-align:middle}.mt1rem{margin-top:1rem}.mthalf{margin-top:.5rem}.pt1rem{padding-top:1rem}.pthalf{padding-top:.5rem}.t-center{text-align:center}.t-left{text-align:left}.t-right{text-align:right}.t-underline{text-decoration:underline}.t-underline-none{text-decoration:none}.user-select-none{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.box-sizing{-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}.overlay{position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;background:#000;opacity:.8}.overlay.show{display:block}.overlay.hidden{display:none}.pageTransition-enter{opacity:.01}.pageTransition-enter.pageTransition-enter-active{opacity:1;transition:opacity .5s ease-in}.pageTransition-leave{opacity:1}.pageTransition-leave.pageTransition-leave-active{opacity:.01;transition:opacity .3s ease-in}.inputBox{border-radius:5px;border:1px solid #aaa;width:12rem;height:1.8rem}.inputBox .icon{width:2rem;height:1.8rem;text-align:center}.inputBox .icon img{width:1rem;height:1rem;margin-top:.4rem}.inputBox li:last-child{width:10rem;height:1.8rem}.inputBox input{width:100%;border:none;height:1.2rem;line-height:1.2rem;outline:none;margin-top:.3rem}#Alert{width:100%;height:100%;background:hsla(0,0%,47%,.2);position:fixed;top:0;left:0;bottom:0;z-index:5}#Alert .dialog{width:12rem;height:5rem;border:1px solid #ddd;background-color:#fff;border-radius:.5rem;position:absolute;top:50%;left:50%;z-index:10;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}#Alert .message{width:100%;height:2.8rem;line-height:2.8rem}#Alert .confirmButton{width:5.4rem;height:1.6rem;line-height:1.6rem;background-color:#ddd;border:1px solid #ddd;text-align:center;border-radius:.5rem;outline:none;-webkit-tap-highlight-color:transparent}#Alert .confirmButton:active{background-color:#d1d1d1}#Alert.animated{-webkit-animation-duration:.6s;animation-duration:.6s}.button-red{border-style:none;width:auto;overflow:visible;text-align:center;outline:none;padding:0 15px;border-radius:5px;background-color:#ea3e4f;color:#fff;letter-spacing:2px}.button-red:active{background-color:#b91c2c}.button-red:disabled{background-color:#999}.button-border-red{width:auto;background-color:#fff;border:2px solid #ea3e4f;overflow:visible;text-align:center;outline:none;padding:0 15px;border-radius:5px;letter-spacing:2px}.button-border-red:active{border:2px solid #b91c2c;color:#b91c2c}.button-state{width:auto;background-color:#fff;border:none;overflow:visible;text-align:center;outline:none;letter-spacing:2px;color:#fff}#loginPane{min-height:100%;margin:auto;background-color:#d7d7d7}#loginPane,#loginPane #content{width:16rem}#loginPane .wrap-login{padding:2rem 1rem;margin:auto;width:12rem;height:12rem;background-color:#fff;margin-top:1rem}#loginPane .wrap-login button{width:100%;height:1.8rem}#loginPane .loginButton{margin-top:1rem;font-size:20px}#loginPane .registerButton{color:#ea3e4f;font-size:20px}#loginPane p{height:1.9rem;text-align:right;font-size:14px;line-height:1.5rem}#registerPane{width:16rem;margin:auto;min-height:100%}#registerPane #content{width:100%;height:100%;background-color:#f3f3f3;overflow:hidden}#registerPane .wrap-register{padding:2rem 1rem 1rem;width:12rem;height:16rem;background-color:#fff;margin:auto;margin-top:1rem}#registerPane .confirm{width:5.8rem}#registerPane #getValidateCodeButton{width:4rem;height:1rem;padding:0;margin-top:.4rem}#registerPane .wrap-register>button{width:100%;height:1.8rem}#registerPane .registerButton{margin-top:1rem;font-size:20px}#registerPane p{text-align:center;line-height:27px;color:#666}#registerPane p a{color:#ea3e4f}#productListPane{margin:auto;color:#000;min-height:100%}#productListPane,#productListPane #content{width:16rem;background-color:#f3f3f3}#productListPane .wrap{margin-top:.4rem;width:16rem;height:9.4rem;background-color:#fff;border-top:1px solid #d7d7d7}#productListPane .wrap .top{margin:0 .5rem;border-bottom:1px solid #d7d7d7;height:2.2rem;line-height:2.2rem}#productListPane .top span:nth-child(1){font-size:14px}#productListPane .top .hotSale{border-radius:10px;background-color:#ea3e4f;padding:0 .3rem;color:#fff}#productListPane .top span:nth-child(3){border-radius:10px;background-color:#d7d7d7;padding:0 .3rem}#productListPane .top span:nth-child(4){float:right}#productListPane .top .productInfoText{vertical-align:middle}#productListPane .top .r_arrow{width:.3rem;height:.4rem;vertical-align:middle;margin-left:5px}#productListPane .center{height:5.2rem;border-bottom:1px solid #d7d7d7;padding:0 .5rem}#productListPane .center>div{float:left}#productListPane .center .box1,#productListPane .center .box2{width:5.5rem}#productListPane .center .box3{width:4rem}#productListPane .center span{line-height:1.6rem}#productListPane .box1 span:nth-child(1){display:block;height:1.6rem}#productListPane .box1 span:nth-child(2){display:block;font-size:28px;color:#ea3e4f;height:1.8rem;font-family:arial,sans serif}#productListPane .box1 span:nth-child(3),#productListPane .box2 span:nth-child(1){display:block;height:1.6rem}#productListPane .box2 span:nth-child(2){display:block;font-size:22px;height:1.8rem}#productListPane .box2 span:nth-child(3){display:block;height:1.6rem}#productListPane .progress{width:3.5rem;height:3.5rem;margin-top:.75rem;float:right}#productListPane .bottom{height:2rem;padding:0 .5rem;background-color:#f8f8f8;border-bottom:1px solid #d7d7d7;line-height:2rem}#productListPane .bottom label:last-child{float:right}#productListPane .gray{color:gray}#productListPane .black{color:#000}#productListPane .loading{width:100%;height:30px;font-size:14px;text-align:center;line-height:30px;position:absolute;z-index:100;left:0;bottom:0;color:blue}#productListPane .trade_fail{width:4.5rem;height:5rem;margin:auto}#productListPane .trade_fail img{width:4.5rem;height:4.5rem;padding-top:.5rem}#purchasePane{width:16rem;min-height:100%;margin:auto;overflow:hidden}#purchasePane .wrap-header{width:100%;height:14.6rem;background-color:#f8f8f8}#purchasePane .time{text-align:center;margin-top:.4rem}#purchasePane .wrap-header label{font-size:20px;margin-right:.2rem}#purchasePane .wrap-footer{width:100%}#purchasePane #productName{width:100%;height:2.65rem;line-height:2.65rem;text-align:center;color:#ea3e4f;font-size:22px}#purchasePane .outProgress{width:8rem;height:8rem;border-radius:100%;border:3px solid #e8e8e8;margin:auto}#purchasePane .progress{width:7.5rem;height:7.5rem;margin:.25rem}#purchasePane .icon-alarm{width:22px;height:22px;margin-right:.2rem;margin-top:2px;vertical-align:middle;margin-bottom:10px}#purchasePane .purchaseInfo{height:4rem;width:100%}#purchasePane .purchaseInfo li{width:33%;float:left;height:4rem;line-height:4rem;text-align:center}#purchasePane .purchaseInfo label{color:#ea3e4f;font-size:16px}#purchasePane #purchaseButton{margin-left:1rem;width:14rem;height:1.8rem;border-radius:1rem}#purchasePane .tips{font-size:12px;padding-top:.5rem;text-align:center}#purchasePane .iconSafe{width:22px;height:22px;vertical-align:middle;padding-right:5px}#purchasePane .tips-text{vertical-align:middle}.grid.noData{height:3rem;line-height:3rem;text-align:center}.grid{width:16rem}.grid .loading{width:100%;text-align:center;padding:1rem;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}.grid .loading img{width:1rem;height:1rem}.grid-table{width:100%;border:1px solid #d7d7d7;vertical-align:middle}.grid-table th{text-align:left}.grid-table td,.grid-table th{border:1px solid #d7d7d7;height:2rem}#assetsPane{margin:auto;width:16rem;background-color:#f3f3f3;min-height:100%}#assetsPane #content{width:100%}#assetsPane .detail{height:4rem;padding-top:2rem;background-image:linear-gradient(#fff,#eee)}#assetsPane .detail span{display:inline-block;font-size:25px}#assetsPane .ul01{border-top:1px solid #d7d7d7;border-bottom:1px solid #d7d7d7;height:3.6rem;background:#fff}#assetsPane .ul01 li{width:50%;float:left;text-align:center;color:#666;height:2.5rem;margin-top:1.1rem}#assetsPane .ul01 span{display:block}#assetsPane .f25{font-size:25px}#assetsPane .ul01 li a{color:#666;border-right:1px solid #d7d7d7;display:inline-block;width:100%;height:1.5rem}#assetsPane .bz{text-indent:.87rem;width:100%;height:1.3rem;line-height:1.3rem;background-color:#f3f3f3;border-bottom:1px solid #d7d7d7}#assetsPane #gridPane{width:16rem;background-color:#f3f3f3}#assetsPane #gridPane .grid-table{background-color:#fff;border:none}#assetsPane #gridPane .grid-table td{border:none}#assetsPane #gridPane .grid-table tr{border-bottom:1px solid #d7d7d7}#assetsPane #gridPane .grid-table tr>td:first-child{text-indent:.87rem}#assetsPane .right{text-align:right;vertical-align:middle}#assetsPane .right img{padding:0 .87rem .04rem 5px;vertical-align:middle;width:.3rem;height:.4rem}#invitePane{width:16rem;min-height:100%;background:#f3f3f3;margin:auto}#invitePane #content{width:15rem;margin:.5rem .5rem 0;border:1px solid #dedcdc;background:#ebebeb}#invitePane .mycode,#invitePane .title{text-align:center;padding:.5rem 0}#invitePane #QRcode{margin:auto}#invitePane #getPointsButton{width:12rem;height:1.8rem;margin-left:1.5rem;border-radius:1rem}#invitePane .p{text-align:center}#invitePane .white{width:100%;background-color:#fff;padding-top:1rem;padding-bottom:1rem;border-top:1px solid #dedcdc}#invitePane .share{position:fixed;width:100%;height:100%;top:0;left:0;z-index:110;text-align:right;display:none}#invitePane .share img{margin:10px 35px 0 0;width:75%}#invitePane .tips{color:#fff;margin-top:10px;text-align:center;margin-left:-15px}#transactionRecordPane{margin:auto;color:#000;min-height:100%}#transactionRecordPane,#transactionRecordPane #content{width:16rem;background-color:#f3f3f3}#transactionRecordPane #gridPane{-webkit-overflow-scrolling:touch;width:16rem}#transactionRecordPane .grid-item{margin-top:.4rem;width:16rem;border-top:1px solid #d7d7d7}#transactionRecordPane .grid-item .top{width:14.4rem;height:2.2rem;background-color:#fff;padding:0 .8rem}#transactionRecordPane .nameAndTime{float:left;width:8.6rem;height:1.2rem;padding-top:.5rem;line-height:.6rem}#transactionRecordPane .nameAndTime div:first-child{font-size:14px;height:.6rem;line-height:.6rem;color:#ea3e4f}#transactionRecordPane .nameAndTime div:last-child{font-size:12px;height:1rem;line-height:1rem}#transactionRecordPane .payState{width:5.8rem;height:2.2rem;float:right;text-align:right;line-height:2.2rem}#transactionRecordPane .payState button{background-color:#0bacd3;width:4rem;height:1rem;border-radius:10px;letter-spacing:0;font-size:12px}#transactionRecordPane .button-type-0BACD3{background-color:#0bacd3!important}#transactionRecordPane .button-type-green{background-color:#45bf55!important}#transactionRecordPane .button-type-gray{background-color:#999!important}#transactionRecordPane .gray{color:gray}#transactionRecordPane .center{width:16rem;height:4rem;padding:1rem .4rem 1rem .8rem;background-color:#f9f9f9}#transactionRecordPane .center ul li{width:5.2rem;height:1rem;float:left}#transactionRecordPane .center ul .w-small{width:4.2rem;float:left}#transactionRecordPane .bottom{background-color:#fff}#transactionRecordPane .bottom ul{width:100%;height:100%}#transactionRecordPane .borderBottomD7D7D7{border-bottom:1px solid #d7d7d7}#transactionRecordPane .bottomText{width:100%;height:2rem;line-height:2rem}#transactionRecordPane .bottomText>a{float:left;color:#000}#transactionRecordPane .bottomText>span{float:right}#transactionRecordPane .bottom ul li{width:8rem;float:left;height:2rem;line-height:2rem}#transactionRecordPane .bottom ul li:last-child{float:right;text-align:right;line-height:0;width:16rem}#transactionRecordPane .plhalf{padding-left:.8rem}#transactionRecordPane .prhalf{padding-right:.8rem}#transactionRecordPane .bottom button{width:4rem;height:1rem;color:red;letter-spacing:0;font-size:12px;margin-top:.5rem;margin-right:.8rem;padding:0}#transactionRecordPane .trade_fail{width:4.5rem;height:5rem;margin:auto}#transactionRecordPane .trade_fail img{width:4.5rem;height:4.5rem;padding-top:.5rem}#transactionRecordPane p{margin-top:2rem;color:#8c8c8c;letter-spacing:2px}#aboutUsPane{width:16rem;min-height:100%;margin:auto}#aboutUsPane .icon{height:3rem;width:3rem}#aboutUsPane .content{width:11rem;height:3rem;background-color:#f3f3f3;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;-moz-border-top-right-radius:10px;-moz-border-bottom-right-radius:10px;padding-left:.8rem;display:table}#aboutUsPane .content span{display:table-cell;vertical-align:middle}#aboutUsPane ul{padding:1rem;width:14rem}#aboutUsPane li{margin-bottom:.6rem;height:3rem;width:100%}#personalSettingPane{width:16rem;min-height:100%;margin:auto;overflow:hidden;background-color:#f3f3f3}#personalSettingPane #content{width:100%;height:100%}#personalSettingPane li{width:15.15rem;padding-left:.85rem;border-bottom:1px solid #d7d7d7}#personalSettingPane li:nth-child(odd){height:1.8rem;line-height:1.8rem;color:#666}#personalSettingPane li:nth-child(even){height:2.3rem;line-height:2.3rem;color:#222;background-color:#fff}#personalSettingPane li .authed{float:right;padding-right:5%}#personalSettingPane li.arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAcCAYAAABoMT8aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFNkEyQUI1MUFERjExRTU5QTFCRjFENTdGRDQzMzIxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFNkEyQUI2MUFERjExRTU5QTFCRjFENTdGRDQzMzIxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEU2QTJBQjMxQURGMTFFNTlBMUJGMUQ1N0ZENDMzMjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEU2QTJBQjQxQURGMTFFNTlBMUJGMUQ1N0ZENDMzMjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4r5bh0AAABi0lEQVR42pzVyyuEYRTH8XdmUAi9TUlKGOVSkppk4RpjXHNNFiz8QcrGgp1SNpJSkkQSIYWFWLBBmcUQchmXxPfUmd1Mnsepz2bent9b73nOGU8gEKhyHGcKY7h2LMuLCTRgGyX/CRjGLgo1pMI24Ant2EA+tlBtEyD1ih6sIBebqLUJkHrHIBbhYh2NNgFSnxjBHLKwirBNgNQ3xjGDDCyjL1mAz3XdRL//6PfIRj2GcIFT04B4rSEVzRjADU5sAhztyAfa0IsoDm0CpHbwgA50I6aXzzhA6gC36NLOeOTS2QRIHeFSu9KCe9sARztRg1J8ef8xfNN67Z8xmWJx2IdZ3RuP6MS+aUAa5vVCRXV6j+WBSUA6FrR9EbTiPP7wr4BMnQX54lcIaRcck4AcnYc6nYNQop2ZLMCvcxDEmR6OmI5znq61oF6cpmSHEwUU6OFK7OkHuzNdKMW6lcs0JKz9Nlpp5TpxRbrGpGUvplfTr2+Ulb6EfrwZX0+GKaZvk/+HURkQm+H4FWAAKPhV7jfDUscAAAAASUVORK5CYII=) no-repeat #fff 95% center;background-size:.47rem .85rem}#personalSettingPane li:nth-child(even) a{color:#222;display:block;text-decoration:none}#personalSettingPane #logoutButton{margin-left:1rem;width:14rem;height:1.8rem;border-radius:1rem;margin-top:1rem}#personalSettingPane .a-button{display:block}#purchaseAmountPane{width:16rem;height:27rem;margin:auto;background-color:#f3f3f3;margin-bottom:3.5rem}#purchaseAmountPane .wrap{width:14.4rem;height:8rem;padding:0 .8rem;background-color:#ea3e4f}#purchaseAmountPane .inputBox{margin:.2rem 0;background-color:#fff;width:14.4rem;height:2.2rem}#purchaseAmountPane .amountInput{width:8.5rem;height:1.8rem;margin:.2rem 0 .2rem .1rem;line-height:1.1rem;border:0;outline:none}#purchaseAmountPane .earningsPane{width:5.3rem;height:1.8rem;padding:0 .2rem;margin:.2rem 0;float:right;border-left:1px solid #999;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}#purchaseAmountPane .label{width:3.9rem;height:.9rem;line-height:.9rem}#purchaseAmountPane .font-white{color:#fff}#purchaseAmountPane .optionalAmountPane{margin-top:.2rem;width:14.4rem;height:1.5rem}#purchaseAmountPane .optionalAmountPane>span{display:block;float:left;width:3.45rem;height:1.2rem;color:#fff;border:1px solid #fff;margin-right:.2rem;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border-radius:1rem;text-align:center;line-height:1.2rem;cursor:pointer}#purchaseAmountPane .optionalAmountPane>span:active{background-color:#b91c2c;border:2px solid #b91c2c}#purchaseAmountPane .optionalAmountPane>span:last-child{margin:0}#purchaseAmountPane .prompt{width:14.4rem;height:3rem;padding:0 .8rem;background-color:#fff;border-bottom:1px solid #d7d7d7;display:table}#purchaseAmountPane .prompt img{width:1.1rem;height:1.1rem;float:left;margin-top:.9rem}#purchaseAmountPane .promptLabel{width:13rem;height:3rem;display:table;float:right;padding-left:.2rem}#purchaseAmountPane .promptLabel span{display:table-cell;vertical-align:middle}#purchaseAmountPane .inviteCode{width:14.4rem;height:3rem;padding:0 .8rem;background-color:#fff;line-height:3rem;border-bottom:1px solid #d7d7d7;margin-top:.5rem;border-top:1px solid #d7d7d7}#purchaseAmountPane .inviteCode input{border:none;width:8rem;height:1rem;outline:none}#purchaseAmountPane ul.info{width:16rem;background-color:#fff;margin-top:.5rem;border-bottom:1px solid #d7d7d7;border-top:1px solid #d7d7d7}#purchaseAmountPane .info img{width:1.1rem;height:1.1rem;float:left;margin-top:.3rem}#purchaseAmountPane ul.info li{height:1.7rem;padding:0 .8rem}#purchaseAmountPane ul.info .text{display:block;height:1.7rem;width:6rem;float:left;line-height:1.7rem;padding-left:.5rem}#purchaseAmountPane ul.info .last{display:block;height:1.7rem;width:6rem;float:right;line-height:1.7rem;text-align:right}#purchaseAmountPane ul.info li:nth-child(odd){background:#fff}#purchaseAmountPane ul.info li:nth-child(even){background:#f8f8f8}#purchaseAmountPane .footer{width:100%;height:2.5rem;line-height:2.5rem;text-align:center;margin:auto;position:fixed;bottom:0;left:0}#purchaseAmountPane #purchaseButton{width:16rem;height:2.5rem;border-radius:0} -------------------------------------------------------------------------------- /dist/app/images/aboutUs/1.dcb1d929.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/aboutUs/1.dcb1d929.jpg -------------------------------------------------------------------------------- /dist/app/images/aboutUs/2.b0de9ab2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/aboutUs/2.b0de9ab2.jpg -------------------------------------------------------------------------------- /dist/app/images/aboutUs/3.df25dadb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/aboutUs/3.df25dadb.jpg -------------------------------------------------------------------------------- /dist/app/images/aboutUs/4.a440884e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/aboutUs/4.a440884e.jpg -------------------------------------------------------------------------------- /dist/app/images/aboutUs/5.6ba6bd3a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/aboutUs/5.6ba6bd3a.jpg -------------------------------------------------------------------------------- /dist/app/images/aboutUs/6.e49b00a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/aboutUs/6.e49b00a3.jpg -------------------------------------------------------------------------------- /dist/app/images/icon-i.3c6f4443.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-i.3c6f4443.png -------------------------------------------------------------------------------- /dist/app/images/icon-interestEndDate.f4389313.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-interestEndDate.f4389313.png -------------------------------------------------------------------------------- /dist/app/images/icon-interestStartDate.761be474.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-interestStartDate.761be474.png -------------------------------------------------------------------------------- /dist/app/images/icon-investLowerAmt.4961db1f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-investLowerAmt.4961db1f.png -------------------------------------------------------------------------------- /dist/app/images/icon-investUpperAmt.89822701.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-investUpperAmt.89822701.png -------------------------------------------------------------------------------- /dist/app/images/icon-safe.8ef83251.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-safe.8ef83251.png -------------------------------------------------------------------------------- /dist/app/images/icon-verificationCode.164727ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/icon-verificationCode.164727ad.png -------------------------------------------------------------------------------- /dist/app/images/index_icon.d50c0901.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/index_icon.d50c0901.png -------------------------------------------------------------------------------- /dist/app/images/loading.00218280.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/loading.00218280.gif -------------------------------------------------------------------------------- /dist/app/images/logo.7d1b35f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/logo.7d1b35f3.png -------------------------------------------------------------------------------- /dist/app/images/share-friends.85c90899.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/springalskey/ReactProject/c4428c95e98f8548996c1d16533d8cbe9eb49382/dist/app/images/share-friends.85c90899.png -------------------------------------------------------------------------------- /dist/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "pageNo":1, 3 | "pageSize": 10, 4 | "totalPage": 1, 5 | "totalNum": 10, 6 | "items": [ 7 | { 8 | "id":"1", 9 | "productName": "捞财宝1号", 10 | "statusName": "待付款", 11 | "orderAmt": "2,500", 12 | "principalinterest": "200.00", 13 | "yesterProfit": "20", 14 | "interestStartDate":"2015-12-25", 15 | "interestEndDate":"2016-05-14", 16 | "status": "1", 17 | "orderId": "001100", 18 | "orderAmt": "2,500", 19 | "orderTime": "2015-12-24" 20 | }, 21 | { 22 | "id":"2", 23 | "productName": "捞财宝2号", 24 | "statusName": "待付款", 25 | "orderAmt": "2,500", 26 | "principalinterest": "200.00", 27 | "yesterProfit": "20", 28 | "interestStartDate":"2015-12-25", 29 | "interestEndDate":"2016-05-14", 30 | "status": "1", 31 | "orderId": "001111", 32 | "orderAmt": "2,500", 33 | "orderTime": "2015-12-24" 34 | }, 35 | { 36 | "id":"3", 37 | "productName": "捞财宝3号", 38 | "statusName": "待付款", 39 | "orderAmt": "2,500", 40 | "principalinterest": "200.00", 41 | "yesterProfit": "20", 42 | "interestStartDate":"2015-12-25", 43 | "interestEndDate":"2016-05-14", 44 | "status": "1", 45 | "orderId": "001100", 46 | "orderAmt": "2,500", 47 | "orderTime": "2015-12-24" 48 | }, 49 | { 50 | "id":"4", 51 | "productName": "捞财宝4号", 52 | "statusName": "待付款", 53 | "orderAmt": "2,500", 54 | "principalinterest": "200.00", 55 | "yesterProfit": "20", 56 | "interestStartDate":"2015-12-25", 57 | "interestEndDate":"2016-05-14", 58 | "status": "1", 59 | "orderId": "001100", 60 | "orderAmt": "2,500", 61 | "orderTime": "2015-12-24" 62 | }, 63 | { 64 | "id":"5", 65 | "productName": "捞财宝5号", 66 | "statusName": "待付款", 67 | "orderAmt": "2,500", 68 | "principalinterest": "200.00", 69 | "yesterProfit": "20", 70 | "interestStartDate":"2015-12-25", 71 | "interestEndDate":"2016-05-14", 72 | "status": "1", 73 | "orderId": "001100", 74 | "orderAmt": "2,500", 75 | "orderTime": "2015-12-24" 76 | }, 77 | { 78 | "id":"6", 79 | "productName": "捞财宝6号", 80 | "statusName": "待付款", 81 | "orderAmt": "2,500", 82 | "principalinterest": "200.00", 83 | "yesterProfit": "20", 84 | "interestStartDate":"2015-12-25", 85 | "interestEndDate":"2016-05-14", 86 | "status": "1", 87 | "orderId": "001100", 88 | "orderAmt": "2,500", 89 | "orderTime": "2015-12-24" 90 | }, 91 | { 92 | "id":"7", 93 | "productName": "捞财宝7号", 94 | "statusName": "待付款", 95 | "orderAmt": "2,500", 96 | "principalinterest": "200.00", 97 | "yesterProfit": "20", 98 | "interestStartDate":"2015-12-25", 99 | "interestEndDate":"2016-05-14", 100 | "status": "1", 101 | "orderId": "001100", 102 | "orderAmt": "2,500", 103 | "orderTime": "2015-12-24" 104 | }, 105 | { 106 | "id":"8", 107 | "productName": "捞财宝8号", 108 | "statusName": "待付款", 109 | "orderAmt": "2,500", 110 | "principalinterest": "200.00", 111 | "yesterProfit": "20", 112 | "interestStartDate":"2015-12-25", 113 | "interestEndDate":"2016-05-14", 114 | "status": "1", 115 | "orderId": "001100", 116 | "orderAmt": "2,500", 117 | "orderTime": "2015-12-24" 118 | }, 119 | { 120 | "id":"9", 121 | "productName": "捞财宝9号", 122 | "statusName": "待付款", 123 | "orderAmt": "2,500", 124 | "principalinterest": "200.00", 125 | "yesterProfit": "20", 126 | "interestStartDate":"2015-12-25", 127 | "interestEndDate":"2016-05-14", 128 | "status": "1", 129 | "orderId": "001100", 130 | "orderAmt": "2,500", 131 | "orderTime": "2015-12-24" 132 | }, 133 | { 134 | "id":"10", 135 | "productName": "捞财宝10号", 136 | "statusName": "待付款", 137 | "orderAmt": "2,500", 138 | "principalinterest": "200.00", 139 | "yesterProfit": "20", 140 | "interestStartDate":"2015-12-25", 141 | "interestEndDate":"2016-05-14", 142 | "status": "1", 143 | "orderId": "001100", 144 | "orderAmt": "2,500", 145 | "orderTime": "2015-12-24" 146 | } 147 | ] 148 | } -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react project 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist/productList.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "productId":"111111", 4 | "productName": "捞财宝1号", 5 | "yearRate": "10", 6 | "investPeriod": "365天", 7 | "interestStartDate": "2015-12-01", 8 | "totalInvestPerson": "100,000", 9 | "productPrincipal":"24万", 10 | "hotSellFlag":"1", 11 | "progress": 20 12 | }, 13 | 14 | { 15 | "productId":"222222", 16 | "productName": "捞财宝2号", 17 | "yearRate": "9", 18 | "investPeriod": "180天", 19 | "interestStartDate": "2015-12-01", 20 | "totalInvestPerson": "100,000", 21 | "productPrincipal":"24万", 22 | "hotSellFlag":"0", 23 | "progress": 30 24 | }, 25 | 26 | { 27 | "productId":"000000", 28 | "productName": "捞财宝3号", 29 | "yearRate": "18", 30 | "investPeriod": "90天", 31 | "interestStartDate": "2015-12-01", 32 | "totalInvestPerson": "100,000", 33 | "productPrincipal":"24万", 34 | "hotSellFlag":"1", 35 | "progress": 80 36 | } 37 | ] -------------------------------------------------------------------------------- /dist/purchase.json: -------------------------------------------------------------------------------- 1 | { 2 | "productName":"捞财宝1号", 3 | "investPeriod": "180", 4 | "investLower": "1,000", 5 | "totalInvestPerson": "2,500", 6 | "remaindTime": 200000 7 | } 8 | -------------------------------------------------------------------------------- /dist/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 在线预览 6 | 7 | 8 | 15 | 37 | 38 | 39 | 40 |
47 | 48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 | 64 | 70 | 71 |
72 | 73 | -------------------------------------------------------------------------------- /dist/transactionRecord.json: -------------------------------------------------------------------------------- 1 | { 2 | "pageNo":1, 3 | "pageSize": 10, 4 | "totalPage": 1, 5 | "totalNum": 3, 6 | "items": [ 7 | { 8 | "id":"1", 9 | "productName": "捞财宝1号", 10 | "statusName": "待付款", 11 | "orderAmt": "2,500", 12 | "principalinterest": "200.00", 13 | "yesterProfit": "20", 14 | "interestStartDate":"2015-12-25", 15 | "interestEndDate":"2016-05-14", 16 | "status": "1", 17 | "orderId": "001100", 18 | "orderAmt": "2,500", 19 | "orderTime": "2015-12-24" 20 | }, 21 | { 22 | "id":"2", 23 | "productName": "捞财宝2号", 24 | "statusName": "待付款", 25 | "orderAmt": "2,500", 26 | "principalinterest": "200.00", 27 | "yesterProfit": "20", 28 | "interestStartDate":"2015-12-25", 29 | "interestEndDate":"2016-05-14", 30 | "status": "1", 31 | "orderId": "001111", 32 | "orderAmt": "2,500", 33 | "orderTime": "2015-12-24" 34 | }, 35 | { 36 | "id":"3", 37 | "productName": "捞财宝3号", 38 | "statusName": "待付款", 39 | "orderAmt": "2,500", 40 | "principalinterest": "200.00", 41 | "yesterProfit": "20", 42 | "interestStartDate":"2015-12-25", 43 | "interestEndDate":"2016-05-14", 44 | "status": "1", 45 | "orderId": "001100", 46 | "orderAmt": "2,500", 47 | "orderTime": "2015-12-24" 48 | } 49 | ] 50 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"); 2 | var gutil = require("gulp-util"); 3 | var clean = require('gulp-clean'); //清除 4 | var webpack = require("webpack"); 5 | var WebpackDevServer = require("webpack-dev-server"); 6 | var webpackConfig = require("./webpack.config"); 7 | var gulpWebpack = require('gulp-webpack'); 8 | 9 | 10 | gulp.task("default", ["webpack-dev-server",'build']); 11 | 12 | gulp.task("webpack-dev-server", function(callback) { 13 | var myConfig = Object.create(webpackConfig); 14 | myConfig.devtool = "source-map"; 15 | myConfig.debug = true; 16 | 17 | // Start a webpack-dev-server 18 | new WebpackDevServer(webpack(myConfig)).listen(8080, "localhost", function(err) { 19 | if(err) throw new gutil.PluginError("webpack-dev-server", err); 20 | else gutil.log("[webpack-dev-server]", "http://localhost:8080/build/index.html"); 21 | }); 22 | 23 | gulp.watch(["app/**",'build/**'], ['build']); 24 | 25 | }); 26 | 27 | 28 | gulp.task("build",function(){ 29 | gulp.src('app/**') 30 | .pipe(gulpWebpack(require('./webpack.production.config.js') )) 31 | .pipe(gulp.dest('dist/')); 32 | 33 | gulp.src(["build/*","!build/*.html","!build/qrcode.png"]) 34 | .pipe(gulp.dest('dist/')); 35 | 36 | gulp.src(["build/test.html"]) 37 | .pipe(gulp.dest('dist/')); 38 | }); 39 | 40 | 41 | gulp.task("cleanDist",function(){ 42 | gulp.src("dist",{read: false}) 43 | .pipe(clean()); 44 | }); 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Router", 3 | "version": "1.0.0", 4 | "description": "Router Test1", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "build": "webpack", 8 | "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build", 9 | "prod": "webpack -p --config webpack.production.config.js" 10 | }, 11 | "author": "spring", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^5.8.29", 15 | "babel-loader": "^5.3.2", 16 | "css-loader": "^0.22.0", 17 | "style-loader": "^0.13.0", 18 | "sass-loader": "^3.1.2", 19 | "url-loader": "^0.5.7", 20 | "webpack": "^1.12.2", 21 | "extract-text-webpack-plugin": "^0.8.2", 22 | "gulp": "^3.9.0", 23 | "html-webpack-plugin":"^2.1.0", 24 | "gulp-webpack":"^1.5.0", 25 | "gulp-util":"^3.0.7", 26 | "webpack-dev-server":"^1.14.0", 27 | "gulp-clean": "^0.3.1", 28 | "react-addons-css-transition-group":"0.14.6", 29 | "object-assign": "4.0.1" 30 | }, 31 | "dependencies": { 32 | "history": "1.13.0", 33 | "jquery": "2.1.4", 34 | "react": "0.14.0", 35 | "react-dom": "0.14.0", 36 | "react-router": "1.0.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var node_modules = path.resolve(__dirname, 'node_modules'); 4 | var node_modules_dir = path.resolve(__dirname, 'node_modules'); 5 | 6 | config = { 7 | entry: path.resolve(__dirname, 'app/main.js'), 8 | output: { 9 | path: path.resolve(__dirname, 'build'), 10 | filename: 'bundle.js', 11 | publicPath: "http://localhost:8080/" 12 | }, 13 | module: { 14 | loaders: [ 15 | { test: /\.jsx?$/,loader: 'babel'}, 16 | { test: /\.css$/, loader: 'style!css'}, 17 | { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, 18 | { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'} 19 | ] 20 | }, 21 | plugins: [ 22 | new webpack.ProvidePlugin({ 23 | jQuery: "jquery", 24 | $: "jquery" 25 | }) 26 | 27 | ] 28 | }; 29 | 30 | module.exports = config; -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | var node_modules_dir = path.resolve(__dirname, 'node_modules'); 5 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | 7 | var pathToJquery = path.resolve(node_modules_dir, 'jquery/dist/jquery.min.js'); 8 | 9 | var pkg = ''; //如“pkg/” 10 | 11 | var config = { 12 | entry: { 13 | app: path.resolve(__dirname, 'app/main.js'), 14 | commons: ['react'] 15 | }, 16 | output: { 17 | path: path.resolve(__dirname, 'dist'), //for saving the fonts 18 | filename: pkg+'[name].[hash:8].js'//// 生成的打包文件名 19 | }, 20 | resolve: { 21 | alias: { 22 | 'jquery': path.resolve(node_modules_dir, 'jquery/dist/jquery.min.js'), //这样require('jquery')就直接请求到这个指定的js 23 | } 24 | }, 25 | module: { 26 | loaders: [ 27 | {test: /\.jsx?$/,exclude: [node_modules_dir],loader: 'babel'}, 28 | {test: /\.(jpg|png|gif)$/, loader: "url?limit=2048&name=[path][name].[hash:8].[ext]"}, 29 | {test: /\.scss/,loader: ExtractTextPlugin.extract('css!sass')} 30 | ] 31 | }, 32 | //更多插件请看http://webpack.github.io/docs/list-of-plugins.html 33 | plugins: [ 34 | new webpack.optimize.CommonsChunkPlugin('commons', pkg+'commons.[hash:8].js'), 35 | new ExtractTextPlugin(pkg+'all.[hash:8].css', {allChunks: true}), 36 | new webpack.optimize.DedupePlugin(), //查找相等或近似的模块，避免在最终生成的文件中出现重复的模块。 37 | new webpack.optimize.UglifyJsPlugin(), 38 | new webpack.optimize.OccurenceOrderPlugin(), //按引用频度来排序 ID，以便达到减少文件大小的效果 39 | new webpack.optimize.AggressiveMergingPlugin(), 40 | new webpack.NoErrorsPlugin(), 41 | //要不要把jquery打包进去？这里注释掉因为我在index.html里引入了 42 | //new webpack.ProvidePlugin({ 43 | // jQuery: "jquery", 44 | // $: "jquery" 45 | //}), 46 | new HtmlWebpackPlugin({ 47 | filename: 'index.html', //生成的html路径及名称 48 | template: 'build/index_production.html', //向index.html里面插入entry[key].js and ExtractTextPlugin(all.css) 49 | inject: 'body' 50 | }) 51 | ], 52 | 53 | noParse: [pathToJquery] //需要确定该模块没有新的依赖，webpack 将不再扫描这个文件中的依赖。 54 | }; 55 | 56 | module.exports = config; 57 | 58 | --------------------------------------------------------------------------------