├── .gitignore
├── .babelrc
├── .eslintignore
├── src
    ├── component
    │   ├── use
    │   │   ├── listLoading
    │   │   ├── useRollNotice.de
    │   │   ├── useTabSwitch.de
    │   │   ├── useMarquee.de
    │   │   ├── useSpin.de
    │   │   ├── useVerify.de
    │   │   └── useDialog.de
    │   ├── ListLoading
    │   │   ├── index.js
    │   │   └── listloading.less
    │   ├── RollNotice
    │   │   ├── demo.js
    │   │   ├── notice.less
    │   │   └── index.js
    │   ├── TabSwitch
    │   │   ├── demo.js
    │   │   ├── tabswitch.less
    │   │   └── index.js
    │   ├── Marquee
    │   │   ├── demo.js
    │   │   ├── marquee.less
    │   │   └── index.js
    │   ├── Spin
    │   │   ├── index.js
    │   │   ├── demo.js
    │   │   └── spin.less
    │   ├── nav.js
    │   ├── Verify
    │   │   ├── demo.js
    │   │   ├── verify.less
    │   │   └── index.js
    │   ├── Dialog
    │   │   ├── showMsg.js
    │   │   ├── index.js
    │   │   ├── demo.js
    │   │   ├── modal.less
    │   │   └── modal.js
    │   ├── data.js
    │   ├── hello.js
    │   ├── app.js
    │   └── app.less
    ├── main.js
    └── index.tpl.html
├── docs
    ├── vendor-49974.min.js
    ├── index.html
    └── bundle-49974.min.css
├── README.md
├── .eslintrc
├── server.js
├── webpack.config.js
├── package.json
├── webpack.production.config.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build/
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-0", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | dependent
4 | coverage
5 | webpack.*.js
6 | *Server.js
7 | 


--------------------------------------------------------------------------------
/src/component/use/listLoading:
--------------------------------------------------------------------------------
1 | import ListLoading from ListLoading
2 | 
3 | ...
4 | <ListLoading /> //无参数，直接调用即可
5 | ...


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom'
3 | import App from './component/app.js'
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'));
6 | 


--------------------------------------------------------------------------------
/docs/vendor-49974.min.js:
--------------------------------------------------------------------------------
1 | !function(r){function e(t){if(o[t])return o[t].exports;var n=o[t]={exports:{},id:t,loaded:!1};return r[t].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var o={};e.m=r,e.c=o,e.p="./"}([]);


--------------------------------------------------------------------------------
/src/component/use/useRollNotice.de:
--------------------------------------------------------------------------------
 1 | import RollNotice from 'RollNotice'
 2 | 
 3 | ...
 4 | 	const data = [
 5 | 		'手机尾号1234的用户获得三等奖',
 6 | 		'手机尾号7788的用户获得三等奖',
 7 | 		'手机尾号3428的用户获得四等奖'
 8 | 	]
 9 | 	return (
10 | 		<RollNotice 
11 | 			data={data}
12 | 			color='#404040'
13 | 		/>
14 | 	)
15 | ...
16 | 
17 | 


--------------------------------------------------------------------------------
/src/component/ListLoading/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import style from './listloading.less';
 3 | 
 4 | const ListLoading = () => (
 5 | 	<div className={style.content}>
 6 | 		<div className={style.word}>加载中...</div>
 7 | 		<div className={style.errtip}>
 8 | 			<div></div>
 9 | 			<div></div>
10 | 			<div></div>
11 | 			<div></div>
12 | 			<div></div>
13 | 		</div>
14 |     </div>
15 | )
16 | 
17 | export default ListLoading
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ActiUI
 2 | 基于 React 的前端组件库，提供一些常用组件库里不常见的组件与功能，具体使用详情请查看 [https://tumars.github.io/ActiUI/](https://tumars.github.io/ActiUI/)
 3 | 
 4 | ## 补充说明
 5 | 这份组件库是刚学习 react 时写的，代码质量稀烂。。。。
 6 | 
 7 | 由于 up 主业务缠身，太忙（懒），这份代码已经一年多未更新，年久失修，文件结构、代码规范、实现方式、语法逻辑等等都已比较落后。各位看看理念就好。up 主日后会抽时重新整理更新。
 8 | 
 9 | 这份 https://github.com/tumars/boilerplate-webpack-react-es6-cssModule 使用了类似的理念与框架，代码相对较新。各位看官请参考这份。
10 | 
11 | 谢谢。
12 | <!-- 待 up 主有空时再更新本组件库吧。 -->
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/src/component/RollNotice/demo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import RollNotice from '../RollNotice'
 3 | 
 4 | const useRollNotice = () => {
 5 | 	const data = [
 6 | 		'手机尾号1234的用户获得三等奖',
 7 | 		'手机尾号7788的用户获得三等奖',
 8 | 		'手机尾号3428的用户获得四等奖'
 9 | 	]
10 | 	return (
11 | 		<div>
12 | 			<RollNotice 
13 | 				data={data}
14 | 				color='#404040'
15 | 			/>
16 | 			<br/>
17 | 			<RollNotice 
18 | 				data={data}
19 | 				color='#51BAE3'
20 | 			/>
21 | 		</div>
22 | 	) 
23 | }
24 | 
25 | export default useRollNotice 


--------------------------------------------------------------------------------
/src/component/use/useTabSwitch.de:
--------------------------------------------------------------------------------
 1 | import TabSwitch from 'TabSwitch'
 2 | 
 3 | ...
 4 | 	const c1 = (<div>我的标签一的内容</div>)
 5 | 	const c2 = (<div>我的标签二的内容</div>)
 6 | 	const c3 = (<div>我的标签三的内容</div>)
 7 | 
 8 | 	const panels = [
 9 | 		{title: '列表一', content: c1}, 
10 | 		{title: '列表二', content: c2}, 
11 | 		{title: '列表三', content: c3}
12 | 	]
13 | 	return (
14 | 		<div>
15 | 			<TabSwitch
16 | 				panels={panels}
17 | 				activeIndex={1}
18 | 				onTabChange={(prev, now)=>console.log(`上一页是${prev}，下一页是${now}`)}
19 | 			/>
20 | 		</div>
21 | 	) 
22 | ...


--------------------------------------------------------------------------------
/src/component/TabSwitch/demo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TabSwitch from '../TabSwitch'
 3 | 
 4 | const useTabSwitch = () => {
 5 | 	const c1 = (<div>我的标签一的内容</div>)
 6 | 	const c2 = (<div>我的标签二的内容</div>)
 7 | 	const c3 = (<div>我的标签三的内容</div>)
 8 | 
 9 | 	const panels = [
10 | 		{title: '列表一', content: c1}, 
11 | 		{title: '列表二', content: c2}, 
12 | 		{title: '列表三', content: c3}
13 | 	]
14 | 	return (
15 | 		<div>
16 | 			<TabSwitch
17 | 				panels={panels}
18 | 				activeIndex={1}
19 | 				onTabChange={(prev, now)=>console.log(`上一页是${prev}，下一页是${now}`)}
20 | 			/>
21 | 		</div>
22 | 	) 
23 | }
24 | 
25 | export default useTabSwitch 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "ecmaFeatures": {
 3 |     "jsx": true,
 4 |     "es6": true,
 5 |     "modules": true
 6 |   },
 7 |   "env": {
 8 |     "browser": true,
 9 |     "node": true,
10 |     "mocha": true
11 |   },
12 |   "parser": "babel-eslint",
13 |   "rules": {
14 |     no-empty: ["error", { "allowEmptyCatch": true }],
15 |     "strict": [2, "never"],
16 |     "react/jsx-uses-react": "error",
17 |     "react/jsx-uses-vars": "error",
18 |     "no-console": ["error", { allow: ["warn", "error", "log", "info"] }]
19 |   },
20 |   "Options": "except-parens",
21 |   "plugins": [
22 |     "react"
23 |   ],
24 |   "extends": ["eslint:recommended", "plugin:react/recommended"]
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var WebpackDevServer = require('webpack-dev-server');
 3 | var config = require('./webpack.config');
 4 | 
 5 | const isDeveloping = process.env.NODE_ENV !== 'production';
 6 | const port = isDeveloping ? 3000 : process.env.PORT;
 7 | 
 8 | var compiler = webpack(config);
 9 | var server = new WebpackDevServer(compiler, {
10 | 	publicPath: config.output.publicPath,
11 | 	hot: true,
12 | 	historyApiFallback: true,
13 | 	stats: {
14 | 		colors: true,
15 | 		hash: false,
16 | 		timings: true,
17 | 		chunks: false,
18 | 		chunkModules: false,
19 | 		modules: false
20 | 	}
21 | });
22 | 
23 | server.listen(3000, 'localhost', function(err, result) {
24 | 	if (err) {
25 | 		return console.log(err);
26 | 	}
27 | 	console.log('Listening at http://localhost:3000/');
28 | });


--------------------------------------------------------------------------------
/src/component/use/useMarquee.de:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Marquee from '../Marquee'
 3 | 
 4 | class UseMarquee extends Component {
 5 | 	constructor(props) {
 6 | 		super(props)
 7 | 		this.state ={
 8 | 			prize: -1,
 9 | 			startGame: false
10 | 		}
11 | 	}
12 | 	handleMarqueeStart() {
13 | 		//获取用户数据，开始游戏，改变 prize 值
14 | 		this.setState({
15 | 			startGame: true,
16 | 			prize: 6
17 | 		})
18 | 	}
19 | 	handleMarqueeResult() {
20 | 		//结束游戏，弹框提示获奖
21 | 		alert('恭喜你获得奖励'+this.state.prize)
22 | 	}
23 | 	render() {
24 | 		return (
25 | 			<Marquee 
26 | 				isStart={this.state.startGame}
27 | 				prize={this.state.prize}
28 | 				onStart={() => this.handleMarqueeStart()}
29 | 				onResult={() => this.handleMarqueeResult()}
30 | 			/>
31 | 		)
32 | 	}
33 | }
34 | 
35 | export default UseMarquee


--------------------------------------------------------------------------------
/src/component/Marquee/demo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component }from 'react'
 2 | import Marquee from '../Marquee'
 3 | 
 4 | class UseMarquee extends Component {
 5 | 
 6 | 	constructor(props) {
 7 | 		super(props)
 8 |         this.state ={
 9 | 			prize: -1,
10 | 			startGame: false
11 |         }
12 | 	}
13 | 	handleMarqueeStart() {
14 | 		//获取用户数据，开始游戏，改变 prize 值
15 | 		this.setState({
16 | 			startGame: true,
17 | 			prize: 6
18 | 		})
19 | 		
20 | 	}
21 | 	handleMarqueeResult() {
22 | 		//结束游戏，弹框提示获奖
23 | 		alert('恭喜你获得奖励'+this.state.prize)
24 | 	}
25 | 	render() {
26 | 		return (
27 | 			<Marquee 
28 | 				isStart={this.state.startGame}
29 | 				prize={this.state.prize}
30 | 				onStart={() => this.handleMarqueeStart()}
31 | 				onResult={() => this.handleMarqueeResult()}
32 | 			/>
33 | 		)
34 | 	}
35 | }
36 | 
37 | 
38 | export default UseMarquee


--------------------------------------------------------------------------------
/src/component/RollNotice/notice.less:
--------------------------------------------------------------------------------
 1 | .content {
 2 | 	display: table;
 3 | 	width: 100%;
 4 | 	overflow-y: hidden;
 5 | 	line-height: 20px;
 6 | }
 7 | .icon {
 8 | 	display: table-cell;
 9 | 	width: 20px;
10 | 	height: 20px;
11 | }
12 | .box {
13 | 	position: relative;
14 | 	display: table-cell;
15 | 	overflow-y: hidden;
16 | 	width: 100%;
17 | }
18 | .inner {
19 | 	display: block;
20 | 	position: absolute;
21 | 	left: 5px;
22 | }
23 | 
24 | 
25 | 
26 | 
27 | .enter {
28 |     transform: translate(0, 100%);
29 |     opacity: 0.01;
30 | }
31 | .enterActive {
32 |     transform: translate(0, 0);
33 |     opacity: 1;
34 |     transition: all 300ms ease-in;
35 | }
36 | 
37 | .leave {
38 | 	transform: translate(0, 0);
39 |     opacity: 1;
40 | }
41 | 
42 | .leaveActive {
43 | 	transform: translate(0, -100%);
44 |     opacity: 0.01;
45 |     transition: all 300ms ease-in;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/component/Spin/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import style from './spin.less';
 3 | 
 4 | 
 5 | const spin = ({blur, isFixed}) => (
 6 |     <div className={style.content}>
 7 | 		{blur == null ? null :
 8 | 			<div className={style.blur}>{blur}</div>
 9 | 		}
10 |         {!isFixed ? null:
11 | 			<div className={style.dyy}></div>
12 |         }
13 |         <div className={style.laballspin} style={isFixed ? {position: 'fixed'} : null}>
14 | 			<div></div>
15 | 			<div></div>
16 | 			<div></div>
17 | 			<div></div>
18 | 			<div></div>
19 | 			<div></div>
20 | 			<div></div>
21 | 			<div></div>
22 | 		</div>
23 |     </div>
24 | )
25 | 
26 | spin.propTypes = {
27 | 	isFixed: PropTypes.bool,
28 |     blur: PropTypes.node
29 | }
30 | 
31 | spin.defaultProps = {
32 | 	isFixed: false,
33 |     blur: null
34 | }
35 | 
36 | export default spin
37 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/src/component/use/useSpin.de:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Spin from '../Spin'
 3 | 
 4 | const bg = (
 5 | 	<div className="bg">
 6 | 		<h3>我是要被虚化的标题</h3>
 7 | 		<p>我是要被虚化的内容，我是要被虚化的内容</p>
 8 | 	</div>
 9 | )
10 | 
11 | const UseSpin = () => (
12 | 	<div>
13 | 		<div className="content">
14 | 			<Spin />
15 | 			{bg}
16 | 		</div>
17 | 		<br/>
18 | 		<div className="content">
19 | 			<Spin blur={bg}/>
20 | 		</div>
21 | 	</div>
22 | 	
23 | )
24 | 
25 | export default UseSpin
26 | 
27 | ---------------------------------
28 | 
29 | .content {
30 | 	position: relative;
31 | 	width: 260px;
32 | 	box-sizing: border-box
33 | }
34 | .btn {
35 | 	width: 150px;
36 | 	height: 30px;
37 | 	line-height: 30px;
38 | 	text-align: center;
39 | 	color: #fff;
40 | 	background: #108ee9;
41 | 	border-radius: 4px
42 | }
43 | .bg {
44 | 	box-sizing: border-box;
45 | 	padding: 10px;
46 | 	border: solid 1px #e9e9e9
47 | }
48 | 


--------------------------------------------------------------------------------
/src/component/Spin/demo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Spin from '../Spin'
 3 | 
 4 | const style = {
 5 | 	content: {
 6 | 		position: 'relative',
 7 | 		width: '260px',
 8 | 		boxSizing: 'border-box'
 9 | 	},
10 | 	btn: {
11 | 		width: '150px',
12 | 		height: '30px',
13 | 		lineHeight: '30px',
14 | 		textAlign: 'center',
15 | 		color: '#fff',
16 | 		background: '#108ee9',
17 | 		borderRadius: '4px'
18 | 	},
19 | 	bg: {
20 | 		boxSizing: 'border-box',
21 | 		padding: '10px',
22 | 		border: 'solid 1px #e9e9e9'
23 | 	}
24 | }
25 | 
26 | const bg = (
27 | 	<div style={style.bg}>
28 | 		<h3>我是要被虚化的标题</h3>
29 | 		<p>我是要被虚化的内容，我是要被虚化的内容</p>
30 | 	</div>
31 | )
32 | 
33 | const UseSpin = () => (
34 | 	<div>
35 | 		<div style={style.content}>
36 | 			<Spin />
37 | 			{bg}
38 | 		</div>
39 | 		<br/>
40 | 		<div style={style.content}>
41 | 			<Spin blur={bg} />
42 | 		</div>
43 | 	</div>
44 | 	
45 | )
46 | 
47 | export default UseSpin


--------------------------------------------------------------------------------
/src/component/nav.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { hashHistory } from 'react-router'
 3 | import data from '../component/data.js'
 4 | 
 5 | import style from './app.less'
 6 | 
 7 | const arr = Object.keys(data)
 8 | class Nav extends Component {
 9 | 	constructor(props) {
10 | 		super(props);
11 | 		this.state = {
12 | 			i: -1
13 | 		}
14 | 	}
15 | 	handleClick(i, id) {
16 | 		this.setState({
17 | 			i: i
18 | 		})
19 | 		hashHistory.replace(id)
20 | 	}
21 | 	render() {
22 | 		return (
23 | 			<ul className={style.nav}>
24 | 				<li className={this.state.i == -1 ? style.active : null} onClick={()=> this.handleClick(-1, '/')}><span>简介</span></li>
25 | 				{
26 | 					arr.map((val, index)=>
27 | 						<li key={index} className={this.state.i == index ? style.active : null} onClick={()=> this.handleClick(index, data[val].id)}>
28 | 							<span>
29 | 								{data[val].name}<small>{data[val].id}</small>
30 | 							</span>
31 | 						</li>
32 | 					)
33 | 				}
34 | 			</ul>
35 | 		)
36 | 	}
37 | }
38 | 
39 | export default Nav


--------------------------------------------------------------------------------
/src/component/Verify/demo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component }from 'react'
 2 | import Verify from "../Verify";
 3 | 
 4 | class UseVerify extends Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state = {
 8 | 			isShowV: false,
 9 | 			verifyTip: null
10 |         }
11 |     }
12 | 
13 |     setTip(text) {
14 | 		this.setState({verifyTip: text})
15 |     }
16 | 
17 |     handleSendSms(mobile) {
18 | 		alert(`手机号：${mobile}`)
19 | 		setTimeout(()=>
20 | 			this.setTip('已发送，请注意查收')
21 | 		,3000)
22 | 		
23 |     }
24 | 
25 |     handleComfirm(mobile, valid) {
26 | 		alert(`手机：${mobile}，验证码：${valid}`)
27 | 		setTimeout(()=>
28 | 			this.setTip('验证码已过期，请重新发送')
29 | 		,3000)
30 |     }
31 | 
32 |     render() {
33 |         const { verifyTip } = this.state
34 | 		return (
35 | 			<div>
36 | 				<Verify
37 | 					verifyTip={verifyTip}
38 | 					onSendSms={(mobile)=>this.handleSendSms(mobile)}
39 | 					onConfirm={(mobile, valid)=>this.handleComfirm(mobile, valid)}
40 | 				/>
41 | 			</div>
42 | 		)
43 |     }
44 | }
45 | 
46 | export default UseVerify


--------------------------------------------------------------------------------
/src/component/use/useVerify.de:
--------------------------------------------------------------------------------
 1 | import React, { Component }from 'react'
 2 | import Verify from "../Verify";
 3 | 
 4 | class UseVerify extends Component {
 5 |     constructor(props) {
 6 |         super(props);
 7 |         this.state = {
 8 | 			isShowV: false,
 9 | 			verifyTip: null
10 |         }
11 |     }
12 | 
13 |     setTip(text) {
14 | 		this.setState({verifyTip: text})
15 |     }
16 | 
17 |     handleSendSms(mobile) {
18 | 		alert(`手机号：${mobile}`)
19 | 		setTimeout(()=>
20 | 			this.setTip('已发送，请注意查收')
21 | 		,3000)
22 | 		
23 |     }
24 | 
25 |     handleComfirm(mobile, valid) {
26 | 		alert(`手机：${mobile}，验证码：${valid}`)
27 | 		setTimeout(()=>
28 | 			this.setTip('验证码已过期，请重新发送')
29 | 		,3000)
30 |     }
31 | 
32 |     render() {
33 |         const { verifyTip } = this.state
34 | 		return (
35 | 			<div>
36 | 				<Verify
37 | 					verifyTip={verifyTip}
38 | 					onSendSms={(mobile)=>this.handleSendSms(mobile)}
39 | 					onConfirm={(mobile, valid)=>this.handleComfirm(mobile, valid)}
40 | 				/>
41 | 			</div>
42 | 		)
43 |     }
44 | }
45 | 
46 | export default UseVerify


--------------------------------------------------------------------------------
/src/component/Dialog/showMsg.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Modal from './modal'
 4 | 
 5 | let that = null
 6 | const container = document.createElement('div')
 7 | document.body.appendChild(container)
 8 | 
 9 | class ShowM extends Component{
10 |     constructor(props) {
11 |         super(props)
12 |         this.state = {
13 |             show: false,
14 |             content: ''
15 |         }
16 |         that = this
17 |     }
18 |     
19 |     componentWillUnmount() {
20 |         document.removeChild(container)
21 |     }
22 | 
23 |     render() {
24 |         return(
25 |             <Modal 
26 |                 visible={this.state.show}
27 |             >
28 |                 <div style={{padding: '20px', textAlign: 'center'}}>{this.state.content}</div>
29 |             </Modal>
30 |         )
31 |     }
32 | }
33 | 
34 | ReactDOM.render(<ShowM />, container)
35 | 
36 | 
37 | export default function showMsg (msg) {
38 |     that.setState({
39 |         show: true,
40 |         content: msg
41 |     })
42 | }


--------------------------------------------------------------------------------
/src/component/use/useDialog.de:
--------------------------------------------------------------------------------
 1 | import React, { Component }from 'react'
 2 | import Dialog from '../Dialog'
 3 | 
 4 | class UseDialog extends Component {
 5 | 	constructor(props) {
 6 | 		super(props)
 7 | 		this.state ={showdiaolg: false}
 8 | 		this.handleClose = this.handleClose.bind(this)
 9 | 		this.handleClick = this.handleClick.bind(this)
10 | 	}
11 | 	handleClose() {
12 | 		this.setState({showdiaolg: false})
13 | 		console.log('弹框关闭')
14 | 	}
15 | 	handleClick() {
16 | 		this.setState({showdiaolg: true})
17 | 	}
18 | 	handleClickS() {
19 | 		Dialog.showMsg('HEY, 我是弹框的内容')
20 | 	}
21 | 	render() {
22 | 		const state = this.state 
23 | 		const pop = (
24 | 			<Dialog 
25 | 				onClose={this.handleClose}
26 | 				visible={state.showdiaolg}
27 | 			>
28 | 				<h2>我是弹框</h2>
29 | 				<p>我是弹框的内容</p>
30 | 			</Dialog>
31 | 		)
32 | 		return (
33 | 			<div>
34 | 				{pop}
35 | 				<div style={style.btn} onClick={this.handleClick}>第一种调用方式</div>
36 | 				<div style={style.btn} onClick={this.handleClickS}>第二种调用方式</div>
37 | 			</div>
38 | 		)
39 | 	}
40 | }
41 | 
42 | export default UseDialog


--------------------------------------------------------------------------------
/src/component/Dialog/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes,Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Modal from './modal'
 4 | import showMsg from "./showMsg";
 5 | 
 6 | class Dialog extends Component {
 7 |     constructor(props) {
 8 |         super(props);
 9 |     }
10 | 
11 |     renderPoral() {
12 |         ReactDOM.unstable_renderSubtreeIntoContainer(
13 |             this,
14 |             <Modal {...this.props}>
15 |                 {this.props.children}
16 |             </Modal>,
17 |             this.node
18 |         )
19 |     }
20 | 
21 |     componentDidMount() {
22 |         this.node = document.createElement('div')
23 |         document.body.appendChild(this.node)
24 |         this.renderPoral()
25 |     }
26 | 
27 |     componentDidUpdate() {
28 |         this.renderPoral()
29 |     }
30 | 
31 |     componentWillUnmount() {
32 |         document.body.removeChild(this.node)
33 |     }
34 | 
35 |     render() {        
36 |         return null
37 |     }
38 | }
39 | 
40 | Dialog.propTypes = {
41 |     onClose: PropTypes.func,
42 |     visible: PropTypes.bool,
43 |     children:PropTypes.node
44 | };
45 | 
46 | Dialog.defaultProps = {
47 |     visible: false
48 | };
49 | 
50 | 
51 | Dialog.showMsg = showMsg
52 | export default Dialog


--------------------------------------------------------------------------------
/src/component/Marquee/marquee.less:
--------------------------------------------------------------------------------
 1 | 
 2 | .content {
 3 |     position: relative;
 4 | }
 5 | .box {
 6 |     position: relative;
 7 |     background: #eee;
 8 |     background-size: 100%;
 9 |     width: 302px;
10 |     height: 302px;
11 |     text-align: center;
12 |     margin: 0 auto;
13 |     li {
14 |         position: absolute;
15 |         display: block;
16 |         width: 75px;
17 |         height: 75px;
18 |         line-height: 75px;
19 |         border: solid 1px #898989;
20 |         &:nth-child(1) {top:22px;left: 22px;}
21 |         &:nth-child(2) {top:22px;left: 110px;}
22 |         &:nth-child(3) {top:22px;left: 197px;}
23 |         &:nth-child(4) {top:110px;left: 197px;}
24 |         &:nth-child(5) {top:197px;left: 197px;}
25 |         &:nth-child(6) {top:197px;left: 110px;}
26 |         &:nth-child(7) {top:197px;left: 22px;}
27 |         &:nth-child(8) {top:110px;left: 22px;}
28 |     }
29 | }
30 | .active {
31 |     border: solid 4px #ffd700;
32 |     box-shadow: 3px 3px 0 #ffd700 inset,
33 |                 -3px -3px 0 #ffd700 inset;
34 | }
35 | 
36 | .start {
37 |     position: absolute;
38 |     width: 75px;
39 |     height: 75px;
40 |     line-height: 75px;
41 |     top: 110px;
42 |     left: 110px;
43 |     border: solid 1px #898989;
44 | }
45 | .start_disable {
46 |     .start;
47 |     border: solid 1px #ccc;
48 |     color: #ccc;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/component/TabSwitch/tabswitch.less:
--------------------------------------------------------------------------------
 1 | .content {
 2 |     width: 100%;
 3 |     margin: 0 auto;
 4 |     font-size: 14px;
 5 | }
 6 | .head {
 7 |     width: 100%;
 8 |     display: flex;
 9 |     justify-content: space-between;
10 |     align-items: flex-end;
11 |     li {
12 |         width: 48.5%;
13 |         text-align: center;
14 |         height: 30px;
15 |         line-height: 30px;
16 |         color: #fff;
17 |         font-size: 1.2em;
18 |         font-weight: bold;
19 |         background: #dd514c;
20 |         border: 1px solid #d9d9d9;
21 |         border-bottom: none;
22 |         border-radius: .5em .5em 0 0;
23 |     }
24 | }
25 | li.active {
26 |     position: relative;
27 |     height: 40px;
28 |     line-height: 40px;
29 |     font-size: 1.2em;
30 |     color: #898989;
31 |     background: #fff;
32 | 
33 |     &:after {
34 |         content: '';
35 |         position: absolute;
36 |         z-index: 1;
37 |         bottom: -2px;
38 |         left: 0;
39 |         width: 100%;
40 |         border-top: solid 4px #fff;
41 |         background: #fff;
42 |     }
43 | }
44 | 
45 | .body {
46 |     position: relative;
47 |     box-sizing: border-box;
48 |     min-height: 150px;
49 |     border: 1px solid #d9d9d9;
50 |     text-align: center;
51 | }
52 | .box{
53 |     position: absolute;
54 |     width: 100%;
55 | }
56 | 
57 | 
58 | .enter {
59 |     opacity: 0.5;
60 | }
61 | .enterActive {
62 |     opacity: 1;
63 |     transition: all 150ms ease-in;
64 | }
65 | 
66 | .leave {
67 |     opacity: .5;
68 | }
69 | 
70 | .leaveActive {
71 |     opacity: 0.01;
72 |     transition: all 150ms ease-in;
73 | }


--------------------------------------------------------------------------------
/src/component/Dialog/demo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component }from 'react'
 2 | import Dialog from '../Dialog'
 3 | 
 4 | const style = {
 5 | 	box: {
 6 | 		boxSizing: 'border-box',
 7 | 		padding: '20px',
 8 | 		color: 'rgb(16, 142, 233)'
 9 | 	},
10 | 	btn: {
11 | 		width: '150px',
12 | 		height: '30px',
13 | 		lineHeight: '30px',
14 | 		margin: '20px 0',
15 | 		textAlign: 'center',
16 | 		color: '#fff',
17 | 		background: '#108ee9',
18 | 		borderRadius: '4px'
19 | 	}
20 | }
21 | 
22 | 
23 | class UseDialog extends Component {
24 | 
25 | 	constructor(props) {
26 | 		super(props)
27 |         this.state ={
28 | 			showdiaolg: false
29 |         }
30 |         this.handleClose = this.handleClose.bind(this)
31 |         this.handleClick = this.handleClick.bind(this)
32 |         this.handleClickS = this.handleClickS.bind(this)
33 | 	}
34 | 	handleClose() {
35 | 		this.setState({
36 | 			showdiaolg: false
37 | 		})
38 | 
39 | 		console.log('弹框关闭')
40 | 	}
41 | 	handleClick() {
42 | 		this.setState({
43 | 			showdiaolg: true
44 | 		})
45 | 	}
46 | 	handleClickS() {
47 | 		Dialog.showMsg('HEY, 我是弹框的内容')
48 | 	}
49 | 	render() {
50 | 		const state = this.state 
51 | 		const pop = (
52 | 			<Dialog 
53 | 				onClose={this.handleClose}
54 | 				visible={state.showdiaolg}
55 | 			>
56 | 				<div style={style.box}>
57 | 					<h2>我是弹框</h2>
58 | 					<p>我是弹框的内容</p>
59 | 				</div>
60 | 			</Dialog>
61 | 		)
62 | 		return (
63 | 			<div>
64 | 				{pop}
65 | 				<div style={style.btn} onClick={this.handleClick}>第一种调用方式</div>
66 | 				<div style={style.btn} onClick={this.handleClickS}>第二种调用方式</div>
67 | 			</div>
68 | 			
69 | 		)
70 | 	}
71 | }
72 | 
73 | export default UseDialog


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | var autoprefixer = require('autoprefixer');
 5 | 
 6 | 
 7 | module.exports = {
 8 |     devtool: 'eval',
 9 |     entry: [
10 |         'webpack-dev-server/client?http://localhost:3000',
11 |         'webpack/hot/only-dev-server',
12 |         './src/main'
13 |     ],
14 |     output: {
15 |         path: path.join(__dirname, '/dist/'),
16 |         filename: 'bundle.js',
17 |         publicPath: '/static/'
18 |     },
19 |     plugins: [
20 |         new webpack.optimize.OccurenceOrderPlugin(),
21 |         new webpack.HotModuleReplacementPlugin(),
22 |         new webpack.NoErrorsPlugin()
23 |     ],
24 |     module: {
25 |         preLoaders: [
26 |             {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
27 |         ],
28 |         loaders: [{
29 |             test: /\.js$/,
30 |             loaders: ['react-hot', 'babel'],
31 |             include: path.join(__dirname, 'src')
32 |         }, {
33 |             test: /\.less$/,
34 |             exclude: [/node_modules/],
35 |             loader: 'style!css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!resolve-url!less'
36 |         }, {
37 |             test: /\.css$/,
38 |             exclude: [/node_modules/],
39 |             loader: 'style!css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
40 |         }, {
41 |             test:/\.(png|jpg)$/,
42 |             exclude: [/node_modules/],
43 |             loader: 'url?limit=5120&name=build/[name].[ext]'
44 |         }]
45 |     },
46 |     postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ],
47 |     eslint: { failOnWarning: true },  
48 |     resolve: {
49 |         extensions: ['', '.js', '.jsx', '.json']
50 |     }
51 | };


--------------------------------------------------------------------------------
/src/component/ListLoading/listloading.less:
--------------------------------------------------------------------------------
 1 | .content {
 2 |     position: relative;
 3 | }
 4 | .errtip {
 5 |     position: relative;
 6 |     // filter: blur(2px);
 7 |     // filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; /* IE6~IE9 */
 8 |     div {
 9 |         position: relative;
10 |         display: block;
11 |         height: 7px;
12 |         margin: 0 0 13px;
13 |         background: #ddd;
14 | 
15 |         &::before {
16 |             content: "";
17 |             opacity: 0;
18 |             position: absolute;
19 |             top: 0;
20 |             left: 0;
21 |             right: 0;
22 |             bottom: 0;
23 |             background: #eee;
24 |             animation: progressactive 1s infinite ease-in-out;
25 |         }
26 | 
27 |         &:nth-child(1) {width: 30%; animation: ball-spin .5s .1s infinite ease-in-out;}
28 |         &:nth-child(2) {width: 20%; animation: ball-spin .5s .3s infinite ease-in-out;margin-bottom: 20px;}
29 |         &:nth-child(3) {width: 60%; animation: ball-spin .5s .3s infinite ease-in-out;}
30 |         &:nth-child(4) {width: 80%; animation: ball-spin .5s .1s infinite ease-in-out;}
31 |         &:nth-child(5) {width: 50%; animation: ball-spin .5s .1s infinite ease-in-out;}
32 |     }
33 | }
34 | .word {
35 |     position: absolute;
36 |     top: 0;
37 |     right: 0;
38 |     color: #333;
39 |     font-size: 13px;
40 |     font-weight: bold;
41 |     animation: fadein .8s infinite;
42 | }
43 | 
44 | 
45 | @keyframes fadein {
46 |     0%{
47 |         opacity: 1;
48 |     }
49 |     50% {
50 |         opacity: .7;
51 |     }
52 |     100% {
53 |         opacity: 1;
54 |     }
55 | }
56 | 
57 | @keyframes progressactive {
58 |   0% {
59 |     opacity: 0.8;
60 |     width: 0;
61 |   }
62 |   100% {
63 |     opacity: 0;
64 |     width: 100%;
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tumars",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node server.js",
 8 |     "lint": "eslint src",
 9 |     "build-mac": "webpack -p --config ./webpack.production.config.js --progress --profile --colors",
10 |     "build-win": "del docs && set NODE_ENV=production && webpack -p --config ./webpack.production.config.js --progress --profile --colors"
11 |   },
12 |   "author": "tumars",
13 |   "license": "ISC",
14 |   "devDependencies": {
15 |     "autoprefixer": "6.3.6",
16 |     "babel-core": "^6.8.0",
17 |     "babel-eslint": "^6.0.4",
18 |     "babel-loader": "^6.2.4",
19 |     "babel-preset-es2015": "^6.6.0",
20 |     "babel-preset-react": "^6.5.0",
21 |     "babel-preset-react-hmre": "^1.1.1",
22 |     "babel-preset-stage-0": "^6.5.0",
23 |     "css-loader": "^0.23.1",
24 |     "eslint": "^2.9.0",
25 |     "eslint-loader": "^1.5.0",
26 |     "eslint-plugin-react": "^5.0.1",
27 |     "eventsource-polyfill": "^0.9.6",
28 |     "exports-loader": "^0.6.3",
29 |     "expose-loader": "^0.7.1",
30 |     "express": "^4.14.0",
31 |     "extract-text-webpack-plugin": "^1.0.1",
32 |     "file-loader": "^0.9.0",
33 |     "html-webpack-plugin": "^2.17.0",
34 |     "imports-loader": "^0.6.5",
35 |     "less": "^2.6.1",
36 |     "less-loader": "^2.2.3",
37 |     "postcss-loader": "^0.9.1",
38 |     "raw-loader": "^0.5.1",
39 |     "react": "^15.3.0",
40 |     "react-dom": "^15.3.0",
41 |     "react-hot-loader": "^1.3.0",
42 |     "react-syntax-highlighter": "^3.0.0",
43 |     "resolve-url-loader": "^1.6.0",
44 |     "style-loader": "^0.13.1",
45 |     "url-loader": "^0.5.7",
46 |     "webpack": "^1.13.0",
47 |     "webpack-dev-middleware": "^1.6.1",
48 |     "webpack-dev-server": "^1.14.1"
49 |   },
50 |   "dependencies": {
51 |     "react": "15.3.0",
52 |     "react-addons-css-transition-group": "15.3.0",
53 |     "react-dom": "15.3.0",
54 |     "react-router": "^3.0.0"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/component/Dialog/modal.less:
--------------------------------------------------------------------------------
 1 | :global {
 2 |     /* 背景 */
 3 |     #root {transition: all 150ms ease-in;}
 4 |     .blur-set {
 5 |         filter: blur(8px);
 6 |         transform: scale(.98);  
 7 |     }
 8 | }
 9 | 
10 | .dyy {
11 | 	position: fixed;
12 |     z-index: 10;
13 | 	top: 0;
14 |     left: 0;
15 | 	box-sizing: border-box;
16 | 	width: 100%;
17 | 	height: 100%;
18 | 	background: rgba(0, 0, 0, 0.3);
19 | }
20 | 
21 | .default {
22 |     z-index: 20;
23 |     position: fixed;
24 |     top: 70px;
25 |     left: 50%;
26 |     right: 0;
27 |     box-sizing: border-box;
28 |     width: 310px;
29 |     margin-left: -155px;
30 |     font-size: 16px;
31 |     line-height: 1.5;
32 |     background: #fff;
33 |     border-radius: 12px;
34 | }
35 | 
36 | .close {
37 |     position: absolute; 
38 |     z-index: 30;
39 |     right: 0;
40 |     top: 0;
41 |     width: 32px;
42 |     height: 32px;
43 |     line-height: 40px;
44 |     font-size: 16px;
45 |     font-weight: bold;
46 |     border-radius: 0 12px 0 0;
47 |     text-align: center;
48 |     overflow: hidden;
49 | 
50 |     svg {
51 |         width: 20px;
52 |         height: 20px;
53 |         fill: #999;
54 |     }
55 | }
56 | 
57 | 
58 | /* 动画 */
59 | .fadeEnter {
60 |     opacity: 0.01;
61 | }
62 | .fadeEnterActive {
63 |     opacity: 1;
64 |     transition: opacity 200ms linear;
65 | }
66 | .fadeLeave {
67 |     opacity: 1;
68 | }
69 | .fadeLeaveActive {
70 |     opacity: 0.01;
71 |     transition: opacity 200ms ease-in;
72 | }
73 | 
74 | 
75 | .slideEnter {
76 |     opacity: 0.01;
77 |     transform: scale(.8);
78 | }
79 | .slideEnterActive {
80 |     opacity: 1;
81 |     transform: scale(1);
82 |     transition: transform 100ms linear, opacity 100ms linear;
83 | }
84 | 
85 | .slideLeave {
86 |     opacity: 1;
87 |     transform: translate(0, 0);
88 | }
89 | .slideLeaveActive {
90 |     opacity: 0.01;
91 |     transform: translate(0, 2rem) scale(.8);
92 |     transition: transform 200ms ease-in, opacity 200ms linear;
93 | }


--------------------------------------------------------------------------------
/src/component/TabSwitch/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes, Component } from 'react';
 2 | import ReactCSSTransitionGroup  from 'react-addons-css-transition-group'
 3 | import style from './tabswitch.less';
 4 | 
 5 | class TabSwitch extends Component {
 6 |     constructor(props) {
 7 |         super(props)
 8 |         const activeIndex = this.props.activeIndex
 9 |         this.state = {
10 |             activeIndex
11 |         }
12 |     }
13 | 
14 |     handleTabClick(i) {
15 |         const { activeIndex } = this.state
16 |         i !== activeIndex && this.props.onTabChange && this.props.onTabChange(activeIndex, i)
17 | 
18 |         this.setState({
19 |             activeIndex: i
20 |         })
21 |     }
22 | 
23 |     render() {
24 |         const { panels } = this.props
25 |         const box = <div key={this.state.activeIndex} className={style.box}>{panels[this.state.activeIndex].content}</div>
26 | 
27 |         return (
28 |             <div className={style.content}>
29 |                 <ul className={style.head}>
30 |                 {panels.map((val,i) => 
31 |                     <li key={i} className={ this.state.activeIndex == i ? style.active : null } onClick={()=>this.handleTabClick(i)}>{val.title}</li>
32 |                 )}
33 |                 </ul>
34 |                 <div className={style.body}>
35 |                     <ReactCSSTransitionGroup 
36 |                         component='div'
37 |                         transitionName={{
38 |                             enter: style.enter,
39 |                             enterActive: style.enterActive,
40 |                             leave: style.leave,
41 |                             leaveActive: style.leaveActive
42 |                         }} 
43 |                         transitionEnterTimeout={150} 
44 |                         transitionLeaveTimeout={150}
45 |                     >
46 |                         {box}
47 |                     </ReactCSSTransitionGroup>
48 |                 </div>
49 |             </div>
50 |         )
51 |     }
52 | }
53 | 
54 | TabSwitch.propTypes = {
55 |     activeIndex: PropTypes.number,
56 |     panels: PropTypes.arrayOf(PropTypes.object),
57 |     onTabChange: PropTypes.func
58 | }
59 | 
60 | TabSwitch.defaultProps = {
61 |     activeIndex: 1,
62 |     panels: [
63 |         {title: 'tab1',content: 'empty1'},
64 |         {title: 'tab2',content: 'empty2'}
65 |     ]
66 | }
67 | 
68 | export default TabSwitch


--------------------------------------------------------------------------------
/src/component/data.js:
--------------------------------------------------------------------------------
 1 | import React  from 'react'
 2 | import ListLoading from './ListLoading'
 3 | import useTabSwitch from './TabSwitch/demo.js'
 4 | import useRollNotice from './RollNotice/demo.js'
 5 | import UseMarquee from './Marquee/demo.js'
 6 | import UseDialog from './Dialog/demo.js'
 7 | import UseSpin from './Spin/demo.js'
 8 | import UseVerify from './Verify/demo.js'
 9 | 
10 | 
11 | const data = {
12 | 	'Loading': {
13 | 		id: 'Loading',
14 | 		name: '带文本框样式的加载',
15 | 		demo: <ListLoading />,
16 | 		instru: '适用于在卡片列表等元素加载完成前显示，表示列表正在加载中',
17 | 		code: require("raw-loader!./use/listLoading"),
18 | 		api: null
19 | 	},
20 | 	'TabSwitch': {
21 | 		id:'TabSwitch',
22 | 		name: '标签切换',
23 | 		demo: useTabSwitch(),
24 | 		instru: '多标签页切换，可渲染两个及以上标签页，接收每个标签页的标题名与内容',
25 | 		code: require("raw-loader!./use/useTabSwitch.de"),
26 | 		api: [
27 | 			'activeIndex|默认显示的标签|number|1',
28 | 			'panels|标签页的名字及内容|array，[ReactNode]|[{title: "tab1",content: "empty1"}]',
29 | 			'onTabChange|标签切换时的事件|function|null'
30 | 		]
31 | 	},
32 | 	'RollNotice': {
33 | 		id: 'RollNotice',
34 | 		name: '滚动公告',
35 | 		demo: useRollNotice(),
36 | 		instru: '滚动公告，常用于用户获奖公告',
37 | 		code: require("raw-loader!./use/useRollNotice.de"),
38 | 		api: [
39 | 			'data|要滚动显示的数据组|array|null',
40 | 			'color|喇叭与文字颜色|string|#000'
41 | 		]
42 | 	},
43 | 	'Marquee': {
44 | 		id: 'Marquee',
45 | 		name: '跑马灯抽奖',
46 | 		demo: <UseMarquee />,
47 | 		instru: '用于用户抽奖活动，点击开始执行开始事件，接口获取到奖励后跑马灯开始旋转，定位到奖励后执行结束事件',
48 | 		code: require("raw-loader!./use/UseMarquee.de"),
49 | 		api: [
50 | 			'isStart|是否开始游戏|bool|false',
51 | 			'prize|获得的奖励位置|number|-1',
52 | 			'onStart|点击开始执行的事件|function|()=>alert("网络异常！")',
53 | 			'onResult|旋转结束执行的事件|function|()=>alert("网络异常！")'
54 | 		]
55 | 	},
56 | 	'Dialog': {
57 | 		id: 'Dialog',
58 | 		name: '弹框',
59 | 		demo: <UseDialog />,
60 | 		instru: '普通弹框，未设置过多功能，只有个关闭事件。支持使用 Dialog.showMsg(content) 的方式直接调用弹框，content 参数为 string 或 react node。',
61 | 		code: require("raw-loader!./use/UseDialog.de"),
62 | 		api: [
63 | 			'onClose|关闭弹窗时执行的事件|function|null',
64 | 			'visible|弹框是否可见|bool|fasle'
65 | 		]
66 | 	},
67 | 	'Spin': {
68 | 		id: 'Spin',
69 | 		name: '菊花图',
70 | 		demo: <UseSpin />,
71 | 		instru: '用于表示加载中，可以覆盖组件或整个屏幕，可将需要虚化的内容当做参数传入进行虚化',
72 | 		code: require("raw-loader!./use/UseSpin.de"),
73 | 		api: [
74 | 			'isFixed|是否覆盖全屏|bool|false',
75 | 			'blur|传入要虚化的内容|ReactNode|null'
76 | 		]
77 | 	},
78 | 	'Verify': {
79 | 		id: 'Verify',
80 | 		name: '手机验证',
81 | 		demo: <UseVerify />,
82 | 		instru: '完整的手机号码验证组件，常配合 Dialog 弹框一块使用',
83 | 		code: require("raw-loader!./use/UseVerify.de"),
84 | 		api: [
85 | 			'verifyTip|外部控制的提示|string|null',
86 | 			'onSendSms|申请验证码回调事件|function|null',
87 | 			'onConfirm|确认回调事件|function|null'
88 | 		]
89 | 	}
90 | }
91 | 
92 | export default data
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | var autoprefixer = require('autoprefixer');
 5 | 
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 8 | 
 9 | 
10 | 
11 | var nodeModulesPath = path.join(__dirname, '/node_modules/');
12 | 
13 | module.exports = {
14 |     devtool: false,
15 |     entry: {
16 |         bundle: './src/main.js'
17 |     },
18 |     output: {
19 |         path: path.join(__dirname, '/docs/'),
20 |         filename: '[name]-[hash:5].min.js',
21 |         chunkFilename: '[name]-[hash:5].chunk.js',
22 |         publicPath: './'
23 |     },
24 |     plugins: [
25 |         new webpack.optimize.CommonsChunkPlugin({
26 |             name: 'vendor',
27 |             children: true,
28 |             minChunks: 2,
29 |             async: true,
30 |         }),
31 |         new webpack.optimize.OccurenceOrderPlugin(true),
32 |         new webpack.optimize.DedupePlugin(),
33 |         new webpack.DefinePlugin({
34 |             'process.env':{
35 |                 'NODE_ENV': JSON.stringify('production')
36 |             }
37 |         }),
38 |          new webpack.optimize.UglifyJsPlugin({
39 |             compress: {
40 |                 warnings: false
41 |             }
42 |         }),
43 |         new HtmlWebpackPlugin({
44 |             template: 'src/index.tpl.html',
45 |             minify: {
46 |                 removeComments: true,
47 |                 collapseWhitespace: true,
48 |                 removeRedundantAttributes: true,
49 |                 useShortDoctype: true,
50 |                 removeEmptyAttributes: true,
51 |                 removeStyleLinkTypeAttributes: true,
52 |                 keepClosingSlash: true,
53 |                 minifyJS: true,
54 |                 minifyCSS: true,
55 |                 minifyURLs: true,
56 |             },
57 |             inject: 'body',
58 |             filename: 'index.html'
59 |         }),
60 |         new ExtractTextPlugin('[name]-[hash:5].min.css'),
61 |     ],
62 |     module: {
63 |         loaders: [{
64 |             test: /\.js$/,
65 |             loaders: ['babel'],
66 |             include: path.join(__dirname, 'src'),
67 |         }, {
68 |             test: /\.less$/,
69 |             exclude: [/node_modules/],
70 |             loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!resolve-url!postcss!less')
71 |         }, {
72 |             test: /\.css$/,
73 |             exclude: [/node_modules/],
74 |             loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!postcss')
75 |         }, {
76 |             test:/\.(png|jpg)$/,
77 |             exclude: [/node_modules/],
78 |             loader: 'url-loader?limit=8192&name=build/[name].[ext]'
79 |         }]
80 |     },
81 |     resolve: {
82 |         extensions: ['', '.js', '.jsx', '.json']
83 |     },
84 |     postcss: [
85 |         require('autoprefixer')
86 |     ]
87 | };


--------------------------------------------------------------------------------
/src/component/Verify/verify.less:
--------------------------------------------------------------------------------
  1 | .content {
  2 |     width: 220px;
  3 |     margin: 0 auto;
  4 |     padding: 20px 0;
  5 | 
  6 |     input {
  7 |         width: 100%;
  8 |         height: 44px;
  9 |         font-size: 16px;
 10 |         font-weight: bold;
 11 |         text-align: center;
 12 |         background-color: #eeeeee;
 13 |         box-shadow: 2px 2px 0 0 #e5e5e5 inset;
 14 |         border-radius: 8px;
 15 |         outline:none
 16 |     }
 17 | }
 18 | .validbox {
 19 |     display: table;
 20 |     width: 100%;
 21 |     margin: 10px auto 10px;
 22 | }
 23 | 
 24 | 
 25 | .section:first-child {
 26 |     display: table-cell;
 27 |     width: 70%;
 28 |     overflow: hidden;
 29 | 
 30 |     input {
 31 |         font-size: 16px;
 32 |         border-radius: 8px 0 0 8px;
 33 |     }
 34 | }
 35 | .section:nth-child(2) {
 36 |     display: table-cell;
 37 |     width: 30%;
 38 |     overflow: hidden;
 39 |     vertical-align: top;
 40 | 
 41 |     span {
 42 |         display: block;
 43 |         width: 100%;
 44 |         height: 44px;
 45 |         line-height: 44px;
 46 |         font-size: 14px;
 47 |         color: #fff;
 48 |         text-align: center;
 49 |         vertical-align: middle;
 50 |         border-radius: 0 .4em .4em 0;
 51 |         background-color: rgb(16, 142, 233);
 52 |     }
 53 | 
 54 |     .time {
 55 |         color:#fff;
 56 |         font-size:14px;
 57 |         background: #ccc;
 58 |         cursor: not-allowed
 59 |     }
 60 | }
 61 | 
 62 | .btn {
 63 |     display: block;
 64 |     margin: 20px auto 0;
 65 |     line-height: 2;
 66 |     color: #fff;
 67 |     font-size: 20px;
 68 |     font-weight: bold;
 69 |     text-align: center;
 70 |     background: rgb(16, 142, 233);
 71 |     border-radius: 8px;
 72 | }
 73 | 
 74 | .tip_show {
 75 |     display: block;
 76 |     height:  18px;
 77 |     color: #710600;
 78 |     font-size: 12px;
 79 |     text-align: center;
 80 |     overflow: hidden;
 81 | }
 82 | .tip_hide {
 83 |     .tip_show;
 84 |     height: 0;
 85 | }
 86 | 
 87 | .dotting {
 88 |     display: inline-block; min-width: 2px; min-height: 2px;
 89 |     box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
 90 |     animation: dot 1.5s infinite step-start both; /* for IE10+, ... */
 91 | }
 92 | 
 93 | .dotting:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
 94 | .dotting::before { content: ''; } /* for IE9+ 覆盖 IE8 */
 95 | :root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/
 96 | 
 97 | @keyframes dot {
 98 |     25% { box-shadow: none; }                                  /* 0个点 */
 99 |     50% { box-shadow: 2px 0 currentColor; }                    /* 1个点 */
100 |     75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ }
101 | }
102 | 
103 | 
104 | .enter {
105 |     display: block;
106 |     transform: translateY(18px);
107 |     opacity: 0.01;
108 | }
109 | .enterActive {
110 |     display: block;
111 |     transform: translateY(-0);
112 |     opacity: 1;
113 |     transition: all 150ms ease-in;
114 | }
115 | 
116 | .leave {
117 |     display: block;
118 |     transform: translateY(-0);
119 |     opacity: 1;
120 | }
121 | 
122 | .leaveActive {
123 |     display: block;
124 |     transform: translateY(-18px);
125 |     opacity: 0.01;
126 |     transition: all 150ms ease-in;
127 | }
128 | 
129 | 


--------------------------------------------------------------------------------
/src/component/hello.js:
--------------------------------------------------------------------------------
 1 | import React  from 'react'
 2 | import style from './app.less'
 3 | 
 4 | const Hello = () => (
 5 | 	<div className={style.hello}>
 6 | 		<section style={{fontWeight: 'bold', border:'solid 1px #898989', padding: '20px'}}>
 7 | 			<h2>通知说明： </h2>
 8 | 			<p>这份组件库是刚学习 react 时写的，代码质量稀烂。。。。</p>
 9 | 			<p>由于 up 主业务缠身，太忙（懒），这份代码已经一年多未更新，年久失修，文件结构、代码规范、实现方式、语法逻辑等等都已比较落后。各位看看理念就好。up 主日后会抽时重新整理更新。</p>
10 | 			<p>这份 <a  href="https://github.com/tumars/boilerplate-webpack-react-es6-cssModule "> https://github.com/tumars/boilerplate-webpack-react-es6-cssModule</a>使用了类似的理念与框架，代码相对较新。各位看官请参考这份。</p>
11 | 		</section>
12 | 		<section>
13 | 			<h2>什么是 ActiUI？ </h2>
14 | 			<p>ActiUI 是基于 React 的 web conponent 组件库，包含多个独立的功能性组件，以便前端工程师开发时调取使用。</p>
15 | 			<p>ActiUI 目前是个人开发项目，还在不断的完善中，后续会推出更多组件，欢迎各位提 issue 或联系我本人。</p>
16 | 			<a className={style.git} href="https://github.com/tumars/ActiUI"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M1.3 525.3c0 223 142.9 412.6 342.1 482.2 26.8 6.8 22.7-12.4 22.7-25.4l0-88.5C211.2 911.8 205 809.2 194.5 792.1c-21.1-35.9-70.7-45-55.9-62.1 35.3-18.2 71.2 4.6 112.9 66.1 30.2 44.6 88.8 37.1 118.7 29.6 6.5-26.8 20.5-50.7 39.6-69.4-160.3-28.5-227.3-126.5-227.3-243 0-56.4 18.6-108.4 55.2-150.3-23.2-69.2 2.2-128.2 5.6-137 66.3-6 135.1 47.4 140.5 51.6 37.7-10.1 80.7-15.6 128.8-15.6 48.4 0 91.6 5.6 129.5 15.8 12.9-9.8 76.8-55.6 138.4-50 3.3 8.8 28.1 66.5 6.3 134.7 37 42 55.8 94.3 55.8 151 0 116.7-67.3 214.8-228.2 243.1 26.9 26.5 43.5 63.3 43.5 104l0 128.4c0.9 10.2 0 20.5 17.2 20.5 202.1-68.1 347.6-259.1 347.6-484.1 0-282.1-228.7-510.7-510.7-510.7C229.9 14.6 1.3 243.2 1.3 525.3z"></path></svg>查看源码</a>
17 | 		</section>
18 | 		<section>
19 | 			<h2>ActiUI 的特点？ </h2>
20 | 			<ul>
21 | 				<li><span>1.</span><span>每个组件相互独立解耦，单个组件所需的全部 js、css、jsx 等在同一文件夹内，按需下载使用即可</span></li>
22 | 				<li><span>2.</span><span>样式使用 <code>css module + less</code> 书写</span></li>
23 | 				<li><span>3.</span><span>使用 webpack 的构建工作流，<code>react + webpack</code> 的构建环境配置请参考：<a href="https://github.com/tumars/boilerplate-webpack-react-es6-cssModule/">boilerplate-webpack-react-es6-cssModule</a></span></li>
24 | 			</ul>
25 | 			<p>相对 ant Design、sui、amazeUI 等前端库而言，ActiUI 功能精简，组件分离，冗余代码很少，更容易修改定制。ActiUI 适合有一定 React 基础的前端开发人员。</p>
26 | 		</section>
27 | 		<section>
28 | 			<h2>如何使用？</h2>
29 | 			<p>ActiUI 暂未提供 npm 安装，使用时直接下载相应文件夹并在 react 项目里引用组件即可。例如 Spin 组件文件路径为 <code>src -> conponent -> Spin</code>，下载该文件夹后在自己的项目中使用 <code>import Spin from 'Spin'</code> 引入即可使用。</p>
30 | 			<p>每个组件包含以下三个文件：</p>
31 | 			<ul>
32 | 			<li><span>1.</span><span><code>index.js</code>  - 组件主文件，逻辑与界面写在这里</span></li>
33 | 			<li><span>2.</span><span><code>{"{组件名}"}.less</code>  - 组件样式文件</span></li>
34 | 			<li><span>3.</span><span><code>demo.js</code>  - 组件使用 demo 示例</span></li>
35 | 			</ul>
36 | 		</section>
37 | 		<div className={style.contact}>
38 | 			<h4>您可以通过以下方式联系到我：</h4>
39 | 			<ul className={style.list}>
40 | 				<li>
41 | 					<div>Twitter:</div>
42 | 					<div><a href="https://twitter.com/Tumars" target="_blank">@Tumars</a></div>
43 | 				</li>
44 | 				<li>
45 | 					<div>GitHub:</div>
46 | 					<div><a href="https://github.com/tumars" target="_blank">github.com/tumars</a></div>
47 | 				</li>
48 | 				<li>
49 | 					<div>Email:</div>
50 | 					<div>menghui9898@gmail.com</div>
51 | 				</li>
52 | 				<li>
53 | 					<div>Blog:</div>
54 | 					<div><a href="http://www.ferecord.com/" target="_blank">www.ferecord.com</a></div>
55 | 				</li>
56 | 		</ul>
57 | 		</div>
58 | 	</div>
59 | )
60 | 
61 | export default Hello


--------------------------------------------------------------------------------
/src/component/Dialog/modal.js:
--------------------------------------------------------------------------------
  1 | import React, { PropTypes, Component } from 'react'
  2 | import ReactCSSTransitionGroup  from 'react-addons-css-transition-group'
  3 | import style from './modal.less';
  4 | 
  5 | class Modal extends Component {    
  6 |     constructor(props) {
  7 |         super(props);
  8 | 
  9 |         this.state = {
 10 |             isShow: this.props.visible
 11 |         };
 12 |     }
 13 | 
 14 |     componentDidMount() {
 15 |         if (this.props.visible) {
 16 |             this.enter();
 17 |         }
 18 |     }
 19 | 
 20 |     componentWillReceiveProps(nextProps) {
 21 |         if (nextProps.visible && !this.state.isShow) {
 22 |             this.enter()
 23 |         } else if(!nextProps.visible && this.state.isShow) {
 24 |             this.leave()
 25 |         }
 26 |     }
 27 | 
 28 |     componentWillUnmount() {
 29 |         this.leave();
 30 |     }
 31 | 
 32 |     changeBgs = {
 33 |         root: document.getElementById('root'),
 34 |         change() {
 35 |             const root = this.root
 36 |             if (root) {
 37 |                 root.classList.add('blur-set')
 38 |             } 
 39 |         },
 40 |         fix() {
 41 |             const root = this.root
 42 |             if (root) {
 43 |                 root.classList.remove('blur-set')
 44 |             }
 45 |         }   
 46 |     }
 47 | 
 48 |     enter() {
 49 |         this.setState({
 50 |             isShow: true
 51 |         }) 
 52 |         this.changeBgs.change()
 53 |     }
 54 | 
 55 |     leave() {
 56 |         this.setState({
 57 |             isShow: false
 58 |         });
 59 |         this.changeBgs.fix()
 60 |         this.props.onClose && this.props.onClose()
 61 |     }
 62 | 
 63 |     render() {
 64 |         const mask = this.state.isShow ? <div className={style.dyy} onClick={()=>this.leave()}> </div> : null
 65 |         const InnerContent = this.state.isShow ? (
 66 |                 <div className={style.default}>
 67 |                     <div className={style.close} onClick={()=>this.leave()}>
 68 |                         <svg className={style.icon} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
 69 |                             <path d="M902.741333 816.213333l-306.005333-307.2 297.984-303.957333c18.858667-18.858667 18.858667-49.322667 0-68.181333s-36.010667-18.858667-54.869333 0L532.394667 444.416l-306.346667-307.541333c-18.858667-18.858667-49.322667-18.858667-68.181333 0s-18.858667 49.322667 0 68.181333L464.810667 512 157.952 818.944c-18.858667 18.858667-18.858667 49.322667 0 68.181333s49.322667 18.858667 68.181333 0L529.92 577.194667l309.930667 309.930667c18.858667 18.858667 44.032 16.128 62.805333-2.645333S921.6 835.072 902.741333 816.213333z"></path>
 70 |                         </svg>
 71 |                     </div>
 72 |                     {this.props.children}
 73 |                 </div>
 74 |             ) : 
 75 |             null
 76 |         
 77 |         return (
 78 |             <div>
 79 |                 <ReactCSSTransitionGroup 
 80 |                     component='div'
 81 |                     transitionName={{
 82 |                         enter: style.fadeEnter,
 83 |                         enterActive: style.fadeEnterActive,
 84 |                         leave: style.fadeLeave,
 85 |                         leaveActive: style.fadeLeaveActive
 86 |                     }} 
 87 |                     transitionEnterTimeout={200} 
 88 |                     transitionLeaveTimeout={200}
 89 |                 >
 90 |                     {mask}
 91 |                 </ReactCSSTransitionGroup>
 92 |                 <ReactCSSTransitionGroup 
 93 |                     component='div'
 94 |                     transitionName={{
 95 |                         enter: style.slideEnter,
 96 |                         enterActive: style.slideEnterActive,
 97 |                         leave: style.slideLeave,
 98 |                         leaveActive: style.slideLeaveActive
 99 |                     }} 
100 |                     transitionEnterTimeout={200} 
101 |                     transitionLeaveTimeout={200}
102 |                 >
103 |                     {InnerContent}
104 |                 </ReactCSSTransitionGroup>
105 |             </div>
106 |         );
107 |     }
108 | }
109 | 
110 | Modal.propTypes = {
111 |     onClose: PropTypes.func,
112 |     visible: PropTypes.bool,
113 |     children:PropTypes.node
114 | };
115 | 
116 | Modal.defaultProps = {
117 |     visible: false
118 | };
119 | 
120 | export default Modal;


--------------------------------------------------------------------------------
/src/component/RollNotice/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes,Component } from 'react';
 2 | import ReactCSSTransitionGroup  from 'react-addons-css-transition-group'
 3 | import style from './notice.less'
 4 | 
 5 | class RollNotice extends Component {
 6 |     constructor(props) {
 7 |         super(props)
 8 |         this.state = {
 9 |             word: null
10 |         };
11 |     }
12 |     componentWillUnmount() {
13 |         clearInterval(this.timer)
14 |     }
15 |     componentDidMount() {
16 |         if (this.props.data) {
17 |             this.start()
18 |         }
19 |     }
20 |     start() {
21 |         const _that = this
22 |         _that.setState({
23 |             word:  _that.props.data[0]
24 |         })
25 |         let i = 0
26 |         _that.timer = setInterval(function() {
27 |             i == _that.props.data.length-1 ? i = 0 : i++ 
28 |             _that.setState({
29 |                 word:  _that.props.data[i]
30 |             })
31 |             
32 |         }, 4000)
33 |         
34 |     }
35 |     render() {  
36 |         const inner = (<span className={style.inner} key={this.state.word} >{this.state.word}</span>)
37 |         const horn = (
38 |             <svg className={style.icon} viewBox="0 0 1025 1024" xmlns="http://www.w3.org/2000/svg" width="200.1953125" height="200">
39 |                 <path d="M843.595596 514.05005c0-94.302302-51.251251-176.816817-127.103104-221.405405-3.587588-2.05005-11.787788-5.125125-17.425425-5.125125-16.912913 0-30.750751 13.837838-30.750751 30.75075 0 11.275275 6.15015 21.525526 15.375376 26.650651 58.938939 33.313313 98.402402 96.864865 98.402402 169.129129 0 73.801802-41.001001 137.865866-101.477477 171.179179-8.712713 5.125125-14.862863 15.375375-14.862863 26.138138 0 16.912913 13.837838 30.750751 30.750751 30.750751 7.175175 0 15.887888-4.1001 15.887887-4.1001 78.414414-44.076076 131.203203-127.615616 131.203204-223.967968z m-35.363364-376.696697c-5.637638-3.587588-11.275275-6.15015-18.45045-6.15015-16.912913 0-30.238238 13.837838-30.238238 30.238238 0 12.3003 7.175175 22.038038 17.425425 27.163164 111.727728 65.089089 187.067067 186.554555 187.067067 324.932933 0 138.890891-75.339339 259.843844-186.554555 324.932932-9.737738 5.125125-18.45045 15.375375-18.45045 27.675676 0 16.912913 13.837838 30.238238 30.238238 30.238238 6.662663 0 12.3003-2.562563 17.937938-6.15015 129.665666-75.851852 216.792793-216.28028 216.792793-377.209209 0.512513-159.391391-86.614615-299.81982-215.767768-375.671672z m-727.255255 165.029029h151.191191c19.987988 0 51.251251-8.2002 186.554555-107.115115 24.088088-17.425425 47.663664-35.363363 68.164164-50.738738l0.512512 398.734734c0 16.912913 13.837838 30.750751 30.750751 30.750751s30.750751-13.837838 30.750751-30.750751c0-3.075075-1.537538-452.548549-1.537538-452.548548 0-14.35035-8.2002-27.163163-21.013013-33.313314-12.812813-6.15015-28.188188-4.612613-38.950951 4.612613-0.512513 0.512513-54.838839 43.563564-114.802802 87.63964-104.552553 76.876877-134.790791 89.68969-140.940941 91.739739h-199.367368c-16.912913 0-30.238238 13.837838-30.238238 30.238239V757.493493c0 16.912913 13.837838 30.238238 30.238238 30.238239h223.967968c6.15015 2.05005 34.850851 15.375375 127.103103 90.714714 53.813814 44.076076 101.98999 86.614615 102.502503 87.127128 7.175175 6.15015 15.887888 9.225225 24.6006 9.225225 5.125125 0 10.25025-1.025025 15.375376-3.075075 13.325325-6.15015 22.038038-18.962963 22.038038-33.825826v-170.666667-2.562562c-1.025025-15.887888-14.35035-28.188188-30.238238-28.188189-16.912913 0-30.750751 13.837838-30.750751 30.750751 0 1.537538 0.512513 111.727728 0.512512 111.727728-16.4004-13.837838-34.850851-29.213213-53.301301-44.076076-123.515516-99.93994-154.266266-108.652653-174.766767-108.652653H89.177177c-21.525526 0-26.138138-6.15015-26.138138-27.675675v-373.10911c-1.537538-13.837838 0-23.063063 17.937938-23.063063z" fill={this.props.color}></path>
40 |             </svg>
41 |         )
42 |         return (
43 |             <div  className={style.content} style={{color:this.props.color}}>
44 |                 { horn }
45 |                 <ReactCSSTransitionGroup 
46 |                     className={style.box}
47 |                     transitionName={{
48 |                         enter: style.enter,
49 |                         enterActive: style.enterActive,
50 |                         leave: style.leave,
51 |                         leaveActive: style.leaveActive
52 |                       }} 
53 |                     transitionEnterTimeout={500} 
54 |                     transitionLeaveTimeout={500}
55 |                     >
56 |                     { inner }
57 |                 </ReactCSSTransitionGroup>
58 |             </div>
59 |         );
60 |     }
61 | }
62 | 
63 | RollNotice.propTypes = {
64 |     data: PropTypes.array,
65 |     color: PropTypes.string
66 | }
67 | 
68 | RollNotice.defaultProps = {
69 |     data: ['none'],
70 |     color: '#000'
71 | }
72 | 
73 | export default RollNotice


--------------------------------------------------------------------------------
/src/component/Marquee/index.js:
--------------------------------------------------------------------------------
  1 | import React, { PropTypes, Component } from 'react'
  2 | // import co from '../../methed/Common'
  3 | import style from './marquee.less'
  4 | 
  5 | class Marquee extends Component {
  6 |     constructor(props) {
  7 |         super(props)
  8 | 
  9 |         this.state = {
 10 |             index:-1,   //当前转动到哪个位置，起点位置
 11 |             count:7,    //总共有多少个位置
 12 |             speed:240,  //初始转动速度
 13 |             times:0,    //格子切换次数
 14 |             cycle:40,   //转动基本次数：即至少需要转动多少次再进入抽奖环节
 15 |             prize:this.props.prize,    //中奖位置,默认-1
 16 |             isScolling:false    //是否在旋转中
 17 |         }
 18 |         this.roll = this.roll.bind(this)
 19 |         this.controlRoll = this.controlRoll.bind(this)
 20 |         this.getResult = this.getResult.bind(this)
 21 |     }
 22 | 
 23 |     componentWillUnmount() {
 24 |         clearTimeout(this.timer)
 25 |     }
 26 |     componentWillReceiveProps(nextProps) {
 27 |         const _that = this
 28 |         nextProps.isStart == false ? null :
 29 |         nextProps.prize == -1 ? null :  
 30 |         nextProps.prize > -1  && nextProps.prize < _that.state.count ? 
 31 |             _that.getResult(nextProps.prize) : alert('网络异常！')
 32 |     }
 33 |     roll() {
 34 |         const _that = this
 35 |         let i = _that.state.index
 36 |         let count = _that.state.count
 37 |         i = i > count - 1 ? 0 : i + 1
 38 |         _that.setState({index: i})
 39 |     }
 40 |     controlRoll(position) {
 41 |         const _that = this
 42 |         _that.setState({times: _that.state.times + 1, isScolling: true})
 43 |         _that.roll()
 44 |         if (_that.state.times > _that.state.cycle+10 && _that.state.prize ==_that.state.index) {
 45 |             clearTimeout(_that.timer)
 46 |             _that.setState({
 47 |                 isScolling: false,
 48 |                 isTiming: false,
 49 |                 prize: -1,
 50 |                 times: 0,
 51 |                 speed: 240
 52 |             })
 53 |             setTimeout(function () {
 54 |                 _that.props.onResult()
 55 |             },100);
 56 |         } else {
 57 |             _that.setState({
 58 |                 isTiming: true
 59 |             })
 60 |             if(this.state.times < this.state.cycle) {
 61 |                 _that.setState({ speed: this.state.speed - 10})
 62 |             } else if (this.state.times == this.state.cycle) {
 63 |                 _that.setState({prize: position})
 64 |             } else {
 65 |                 if (_that.state.times > _that.state.cycle+10 && ((_that.state.prize==0 && _that.state.index==7) || _that.state.prize==_that.state.index+1)) {
 66 |                     _that.setState({speed: this.state.speed + 110})
 67 |                 }else{
 68 |                     _that.setState({speed: this.state.speed + 20 })
 69 |                 }
 70 |             }
 71 |             if (_that.state.speed<40) {
 72 |                 _that.setState({
 73 |                     speed: 40
 74 |                 })
 75 |             }
 76 |             _that.timer = setTimeout(function(){
 77 |                 _that.controlRoll(position)
 78 |             },_that.state.speed);
 79 |         }
 80 |         return false
 81 |     }
 82 | 
 83 |     getResult(position) {
 84 |         const _that = this
 85 |         _that.setState({
 86 |             isTiming: false
 87 |         })
 88 |         var countInterval = setInterval(function () {
 89 |             loopQueryRaffleResult(position)
 90 |         }, 800);
 91 | 
 92 |         function loopQueryRaffleResult(position){
 93 |             clearInterval(countInterval);
 94 |             if(_that.state.isTiming == false){
 95 |                 _that.controlRoll(position);
 96 |             }
 97 |         }
 98 |     }
 99 | 
100 | 
101 |     render() {
102 |         const { onStart } = this.props
103 |         const content = []
104 |         for (var i = 0; i < 8; i++) {
105 |              content.push(<li key={i} className={this.state.index == i ? style.active : null}>{i}</li>)
106 |         }
107 |         return (
108 |             <div className={style.content}>
109 |                 <div className={style.box}>
110 |                     <div className={this.state.isScolling ? style.start_disable : style.start} onClick={(e) => this.state.isScolling ? false : onStart(e)}>开始</div>
111 |                     <ul>
112 |                         {content}
113 |                     </ul>
114 |                 </div>
115 |             </div>
116 |         )
117 |     }
118 | }
119 | 
120 | Marquee.propTypes = {
121 |     isStart: PropTypes.bool,
122 |     prize: PropTypes.number,
123 |     onStart: PropTypes.func,
124 |     onResult: PropTypes.func
125 | }
126 | 
127 | Marquee.defaultProps = {
128 |     isStart: false,
129 |     prize: -1,
130 |     onStart: () => {
131 |         alert('网络异常！')
132 |     },
133 |     onResult: () => {
134 |         alert('网络异常！')
135 |     }
136 | }
137 | 
138 | export default Marquee


--------------------------------------------------------------------------------
/src/component/Verify/index.js:
--------------------------------------------------------------------------------
  1 | import React, { PropTypes, Component } from 'react'
  2 | import ReactCSSTransitionGroup  from 'react-addons-css-transition-group'
  3 | import style from './verify.less'
  4 | 
  5 | class Verify extends Component {
  6 |     constructor(props) {
  7 |         super(props)
  8 |         this.state = {
  9 |             isTiming: false,
 10 |             time: 60,
 11 |             tip: null
 12 |         }
 13 |     }
 14 | 
 15 |     componentWillUnmount() {
 16 |         clearInterval(this.timer)
 17 |     }
 18 | 
 19 |     componentWillReceiveProps(nextProps) {
 20 |         nextProps.verifyTip && this.setTip(nextProps.verifyTip)
 21 |     }
 22 | 
 23 |     clearTip() {
 24 |         this.setTip(null)
 25 |     }
 26 | 
 27 |     verifyTel(mobile) {
 28 |         const reg = /^[1]+[3,4,5,7,8]+\d{9}$/
 29 |         return mobile && mobile.length == 11 && reg.test(mobile)
 30 |     }
 31 | 
 32 |     verifyValid(valid) {
 33 |         const reg = /^\d{4}$/
 34 |         return valid && reg.test(valid)
 35 |     }
 36 | 
 37 |     startTime() {
 38 |         const prop =  this.props
 39 | 
 40 |         this.setState({
 41 |             isTiming: true
 42 |         })
 43 | 
 44 |         let t = prop.time
 45 |         this.timer = setInterval(()=>{
 46 |             t = t-1
 47 |             this.setState({
 48 |                 time: t
 49 |             })
 50 | 
 51 |             if (t<=0) {
 52 |                 clearInterval(this.timer)
 53 |                 this.setState({
 54 |                     isTiming: false,
 55 |                     time: this.props.time
 56 |                 })
 57 |             }
 58 |         }, 1000)
 59 |     }
 60 | 
 61 |     setTip(text) {
 62 |         this.setState({
 63 |             tip: text
 64 |         })
 65 |     }
 66 | 
 67 |     renderDot() {
 68 |         return (
 69 |             <span className={style.dotting}></span>
 70 |         )
 71 |     }
 72 | 
 73 |     sendClick() {
 74 |         const prop =  this.props
 75 |         const mobile = this.refs.PhoneInput.value
 76 | 
 77 |         this.clearTip()
 78 | 
 79 |         if(!this.verifyTel(mobile)){
 80 |             this.setTip('请输入正确手机号')
 81 |             return
 82 |         }
 83 |         this.startTime()
 84 | 
 85 |         this.setTip(<span>发送中{this.renderDot()}</span>)
 86 |         prop.onSendSms(mobile)
 87 |     }
 88 | 
 89 |     confirmClick() {
 90 |         const prop =  this.props
 91 |         const mobile = this.refs.PhoneInput.value
 92 |         const valid = this.refs.ValidInput.value
 93 | 
 94 |         this.clearTip()
 95 | 
 96 |         if(!this.verifyTel(mobile) || !this.verifyValid(valid)){
 97 |             this.setTip('请输入正确手机号及验证码')
 98 |             return
 99 |         }
100 | 
101 |         this.setTip(<span>验证中{this.renderDot()}</span>)
102 |         prop.onConfirm(mobile, valid)
103 |     }
104 | 
105 |     render() {
106 |         return (
107 |             <div className={style.content}>
108 |                 <input type="tel" className={style.mobile_input} ref="PhoneInput" onFocus={() => this.clearTip()}  name="mobile" maxLength="11" placeholder="请输入手机号码" />
109 |                 <div className={style.validbox} id="Codes">
110 |                     <div className={style.section}>
111 |                         <input type="text" ref="ValidInput" onFocus={() => this.clearTip()} maxLength="4" placeholder="输入验证码" />
112 |                     </div>
113 |                     <div className={style.section}>
114 |                         {this.state.isTiming ? (<span className={style.time}>{this.state.time}s后重试</span>) : (<span onClick={() => this.sendClick()}>获取</span>)}
115 |                     </div>
116 |                 </div>
117 |                 <div className={this.state.tip ? style.tip_show : style.tip_hide}>
118 |                     <ReactCSSTransitionGroup 
119 |                         component='div'
120 |                         transitionName={{
121 |                             enter: style.enter,
122 |                             enterActive: style.enterActive,
123 |                             leave: style.leave,
124 |                             leaveActive: style.leaveActive
125 |                         }} 
126 |                         transitionEnterTimeout={150} 
127 |                         transitionLeaveTimeout={150}
128 |                     >
129 |                         <span key={this.state.tip}>{this.state.tip}</span>
130 |                     </ReactCSSTransitionGroup>
131 |                 </div>
132 |                 <span className={style.btn} onClick={() => this.confirmClick()}>确定</span>
133 |             </div>
134 |         )
135 |     }
136 | }
137 | 
138 | Verify.propTypes = {
139 |     verifyTip: PropTypes.string,
140 |     time: PropTypes.string,
141 |     onSendSms: PropTypes.func.isRequired,
142 |     onConfirm:  PropTypes.func.isRequired
143 | }
144 | 
145 | Verify.defaultProps = {
146 |     time: '60',
147 |     verifyTip: ''
148 | }
149 | 
150 | export default Verify


--------------------------------------------------------------------------------
/src/component/app.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, PropTypes } from 'react'
  2 | import { Router, Route, IndexRoute, hashHistory } from 'react-router'
  3 | import SyntaxHighlighter from 'react-syntax-highlighter'
  4 | import { arduinoLight } from 'react-syntax-highlighter/dist/styles'
  5 | import data from './data.js'
  6 | import Nav from './nav.js'
  7 | import Hello from './Hello.js'
  8 | 
  9 | import style from './app.less'
 10 | 
 11 | class Card extends Component {
 12 | 	constructor(props) {
 13 | 		super(props);
 14 | 		this.state= {
 15 | 			isShowcode: false
 16 | 		}
 17 | 	}
 18 | 	handleClick() {
 19 | 		this.setState({
 20 | 			isShowcode: !this.state.isShowcode
 21 | 		})
 22 | 	}
 23 | 	render() {
 24 | 		const { value } = this.props
 25 | 		const apilist = value.api == null ? <p>没有接口，直接使用</p> : (
 26 | 			<div className={style.apilist}>
 27 | 				<ul>
 28 | 					<li>参数</li>
 29 | 					<li>说明</li>
 30 | 					<li>类型</li>
 31 | 					<li>默认值</li>
 32 | 				</ul>
 33 | 				{value.api.map((val,i) => 
 34 | 					<ul key={i}>
 35 | 						<li>{val.split('|')[0]}</li>
 36 | 						<li>{val.split('|')[1]}</li>
 37 | 						<li>{val.split('|')[2]}</li>
 38 | 						<li>{val.split('|')[3]}</li>
 39 | 					</ul>
 40 | 				)}
 41 | 				
 42 | 			</div>
 43 | 		)
 44 | 		return (
 45 | 			<div className={style.card}>
 46 | 			<section>
 47 | 				<h2 className={style.h2}>{ value.name + ' ' + value.id }</h2>
 48 | 				<div className={style.box}>
 49 | 					<div className={style.demo}>
 50 | 						{ value.demo }
 51 | 					</div>
 52 | 					<div className={style.meta}>
 53 | 						<h3>使用说明</h3>
 54 | 						<p>{ value.instru }</p>
 55 | 					</div>
 56 | 					<div className={style.meta}>
 57 | 						<h3>代码示例</h3>
 58 | 						<div className={this.state.isShowcode ? style.arrow_up : style.arrow} onClick={() => this.handleClick()}>
 59 | 							<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M749.548254 631.619378 749.575884 631.453602 749.820454 631.030977 749.923808 631.346155ZM724.868155 619.191324 724.892715 619.042945 725.111702 618.664322 725.2038 618.946754ZM512 111.702058c-220.713844 0-400.297942 179.584098-400.297942 400.298965 0 220.713844 179.585121 400.296919 400.297942 400.296919s400.297942-179.584098 400.297942-400.296919C912.297942 291.286156 732.712821 111.702058 512 111.702058zM512 866.612437c-195.544605 0-354.611413-159.068855-354.611413-354.612437 0-195.544605 159.066809-354.612437 354.611413-354.612437s354.612437 159.067832 354.612437 354.612437C866.612437 707.543581 707.544605 866.612437 512 866.612437zM705.557344 402.710898 511.146563 597.12168 318.368978 404.344095c-8.146541-8.146541-21.890566-7.611352-30.698163 1.195222-8.807596 8.806573-9.341762 22.551622-1.195222 30.698163l224.614687 224.728274 0.056282-0.057305 0.058328 0.057305 226.246861-226.361471c8.204869-8.205892 7.718799-21.998013-1.087774-30.80561C727.555357 394.992099 713.763237 394.505006 705.557344 402.710898z"></path></svg>
 60 | 						</div>
 61 | 						{this.state.isShowcode ? <SyntaxHighlighter language='javascript' style={arduinoLight}>{ value.code }</SyntaxHighlighter> : null}
 62 | 					</div>
 63 | 					<div className={style.meta}>
 64 | 						<h3>接口参数</h3>
 65 | 						{ apilist }
 66 | 					</div>
 67 | 					<a className={style.git} href={"https://github.com/tumars/ActiUI/tree/master/src/component/" + value.id}>
 68 | 						<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M1.3 525.3c0 223 142.9 412.6 342.1 482.2 26.8 6.8 22.7-12.4 22.7-25.4l0-88.5C211.2 911.8 205 809.2 194.5 792.1c-21.1-35.9-70.7-45-55.9-62.1 35.3-18.2 71.2 4.6 112.9 66.1 30.2 44.6 88.8 37.1 118.7 29.6 6.5-26.8 20.5-50.7 39.6-69.4-160.3-28.5-227.3-126.5-227.3-243 0-56.4 18.6-108.4 55.2-150.3-23.2-69.2 2.2-128.2 5.6-137 66.3-6 135.1 47.4 140.5 51.6 37.7-10.1 80.7-15.6 128.8-15.6 48.4 0 91.6 5.6 129.5 15.8 12.9-9.8 76.8-55.6 138.4-50 3.3 8.8 28.1 66.5 6.3 134.7 37 42 55.8 94.3 55.8 151 0 116.7-67.3 214.8-228.2 243.1 26.9 26.5 43.5 63.3 43.5 104l0 128.4c0.9 10.2 0 20.5 17.2 20.5 202.1-68.1 347.6-259.1 347.6-484.1 0-282.1-228.7-510.7-510.7-510.7C229.9 14.6 1.3 243.2 1.3 525.3z"></path></svg>
 69 | 						查看该组件源码
 70 | 					</a>
 71 | 				</div>
 72 | 				
 73 | 			</section>
 74 | 		</div>
 75 | 		)
 76 | 	}
 77 | }
 78 | 
 79 | Card.propTypes = {
 80 | 	value:  PropTypes.object
 81 | }
 82 | 
 83 | Card.defaultProps = {
 84 |     value: {
 85 | 		name: null,
 86 | 		demo: null,
 87 | 		instru: null,
 88 | 		code: null,
 89 | 		api: null
 90 |     }
 91 | }
 92 | 
 93 | // const wid = document.body.clientWidth
 94 | const arr = Object.keys(data)
 95 | export default class App extends Component {
 96 | 	constructor(props) {
 97 | 		super(props);
 98 | 	}
 99 | 
100 | 	render() {
101 | 		return (
102 | 			<div className={style.content}>
103 | 				<div className={style.head}>
104 | 					<h1>Acti UI</h1>
105 | 				</div>
106 | 				<div className={style.main}>
107 | 					<div className={style.left_box}>
108 | 						<Nav/>
109 | 					</div>
110 | 					<div className={style.right_box}>
111 | 						<Router history={ hashHistory} >
112 | 							<Route path="/">
113 | 								<IndexRoute component={Hello} />
114 | 								{
115 | 									arr.map((val, index)=>
116 | 										<Route key={index} path={val} component={() => (<Card value={data[val]} />)} />
117 | 									)
118 | 								}
119 | 							</Route>
120 | 						</Router>
121 | 					</div>
122 | 				</div>
123 | 			</div>
124 | 		);
125 | 	}
126 | }
127 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ActiUI</title><meta name="keywords" content="ActiUI"/><meta name="description" content="ActiUI"/><meta name="format-detection" content="telephone=no"/><link href="./bundle-49974.min.css" rel="stylesheet"></head><style>blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,input,legend,li,ol,p,td,textarea,th,ul{margin:0;padding:0;border:0;vertical-align:baseline}html{line-height:1}table{border-collapse:collapse;border-spacing:0}ol,ul{list-style:none}img{border:0}b,strong{font-weight:700}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}body{background:url(data:image/png;base64,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) left top #f5f5f5}</style><body><div class="container"><div id="root"></div></div><script type="text/javascript" src="./vendor-49974.min.js"></script><script type="text/javascript" src="./bundle-49974.min.js"></script></body></html>


--------------------------------------------------------------------------------
/src/component/Spin/spin.less:
--------------------------------------------------------------------------------
  1 | 
  2 | .content {
  3 |     width: 100%;
  4 |     height: inherit;
  5 | }
  6 | 
  7 | .dyy {
  8 | 	position: fixed;
  9 |     z-index: 1;
 10 | 	top: 0;
 11 |     left: 0;
 12 | 	box-sizing: border-box;
 13 | 	width: 100%;
 14 |     height: 100%;
 15 | 	background: rgba(225, 225, 225, 0.4);
 16 | }
 17 | 
 18 | .blur {
 19 |     height: inherit;
 20 |     filter: blur(2px) contrast(.8) brightness(.8);
 21 |     transform:  scale(.98); 
 22 | }
 23 | 
 24 | .laballspin,
 25 | .laballspin > div {
 26 |     position: absolute;
 27 |     z-index: 2;
 28 |     top: 50%;
 29 |     left: 50%;
 30 |     transform: translate(-50%, -50%);
 31 |     -webkit-box-sizing: border-box;
 32 |        -moz-box-sizing: border-box;
 33 |             box-sizing: border-box;
 34 | }
 35 | .laballspin {
 36 |     display: block;
 37 |     font-size: 0;
 38 |     color: #333;
 39 | }
 40 | .laballspin.la-dark {
 41 |     color: #333;
 42 | }
 43 | .laballspin > div {
 44 |     display: inline-block;
 45 |     float: none;
 46 |     background-color: currentColor;
 47 |     border: 0 solid currentColor;
 48 | }
 49 | .laballspin {
 50 |     width: 32px;
 51 |     height: 32px;
 52 | }
 53 | .laballspin > div {
 54 |     position: absolute;
 55 |     top: 50%;
 56 |     left: 50%;
 57 |     width: 8px;
 58 |     height: 8px;
 59 |     margin-top: -4px;
 60 |     margin-left: -4px;
 61 |     border-radius: 100%;
 62 |     -webkit-animation: ball-spin 1s infinite ease-in-out;
 63 |        -moz-animation: ball-spin 1s infinite ease-in-out;
 64 |          -o-animation: ball-spin 1s infinite ease-in-out;
 65 |             animation: ball-spin 1s infinite ease-in-out;
 66 | }
 67 | .laballspin > div:nth-child(1) {
 68 |     top: 5%;
 69 |     left: 50%;
 70 |     -webkit-animation-delay: -1.125s;
 71 |        -moz-animation-delay: -1.125s;
 72 |          -o-animation-delay: -1.125s;
 73 |             animation-delay: -1.125s;
 74 | }
 75 | .laballspin > div:nth-child(2) {
 76 |     top: 18.1801948466%;
 77 |     left: 81.8198051534%;
 78 |     -webkit-animation-delay: -1.25s;
 79 |        -moz-animation-delay: -1.25s;
 80 |          -o-animation-delay: -1.25s;
 81 |             animation-delay: -1.25s;
 82 | }
 83 | .laballspin > div:nth-child(3) {
 84 |     top: 50%;
 85 |     left: 95%;
 86 |     -webkit-animation-delay: -1.375s;
 87 |        -moz-animation-delay: -1.375s;
 88 |          -o-animation-delay: -1.375s;
 89 |             animation-delay: -1.375s;
 90 | }
 91 | .laballspin > div:nth-child(4) {
 92 |     top: 81.8198051534%;
 93 |     left: 81.8198051534%;
 94 |     -webkit-animation-delay: -1.5s;
 95 |        -moz-animation-delay: -1.5s;
 96 |          -o-animation-delay: -1.5s;
 97 |             animation-delay: -1.5s;
 98 | }
 99 | .laballspin > div:nth-child(5) {
100 |     top: 94.9999999966%;
101 |     left: 50.0000000005%;
102 |     -webkit-animation-delay: -1.625s;
103 |        -moz-animation-delay: -1.625s;
104 |          -o-animation-delay: -1.625s;
105 |             animation-delay: -1.625s;
106 | }
107 | .laballspin > div:nth-child(6) {
108 |     top: 81.8198046966%;
109 |     left: 18.1801949248%;
110 |     -webkit-animation-delay: -1.75s;
111 |        -moz-animation-delay: -1.75s;
112 |          -o-animation-delay: -1.75s;
113 |             animation-delay: -1.75s;
114 | }
115 | .laballspin > div:nth-child(7) {
116 |     top: 49.9999750815%;
117 |     left: 5.0000051215%;
118 |     -webkit-animation-delay: -1.875s;
119 |        -moz-animation-delay: -1.875s;
120 |          -o-animation-delay: -1.875s;
121 |             animation-delay: -1.875s;
122 | }
123 | .laballspin > div:nth-child(8) {
124 |     top: 18.179464974%;
125 |     left: 18.1803700518%;
126 |     -webkit-animation-delay: -2s;
127 |        -moz-animation-delay: -2s;
128 |          -o-animation-delay: -2s;
129 |             animation-delay: -2s;
130 | }
131 | .laballspin.la-sm {
132 |     width: 16px;
133 |     height: 16px;
134 | }
135 | .laballspin.la-sm > div {
136 |     width: 4px;
137 |     height: 4px;
138 |     margin-top: -2px;
139 |     margin-left: -2px;
140 | }
141 | .laballspin.la-2x {
142 |     width: 64px;
143 |     height: 64px;
144 | }
145 | .laballspin.la-2x > div {
146 |     width: 16px;
147 |     height: 16px;
148 |     margin-top: -8px;
149 |     margin-left: -8px;
150 | }
151 | .laballspin.la-3x {
152 |     width: 96px;
153 |     height: 96px;
154 | }
155 | .laballspin.la-3x > div {
156 |     width: 24px;
157 |     height: 24px;
158 |     margin-top: -12px;
159 |     margin-left: -12px;
160 | }
161 | /*
162 |  * Animation
163 |  */
164 | @-webkit-keyframes ball-spin {
165 |     0%,
166 |     100% {
167 |         opacity: 1;
168 |         -webkit-transform: scale(1);
169 |                 transform: scale(1);
170 |     }
171 |     20% {
172 |         opacity: 1;
173 |     }
174 |     80% {
175 |         opacity: 0;
176 |         -webkit-transform: scale(0);
177 |                 transform: scale(0);
178 |     }
179 | }
180 | @-moz-keyframes ball-spin {
181 |     0%,
182 |     100% {
183 |         opacity: 1;
184 |         -moz-transform: scale(1);
185 |              transform: scale(1);
186 |     }
187 |     20% {
188 |         opacity: 1;
189 |     }
190 |     80% {
191 |         opacity: 0;
192 |         -moz-transform: scale(0);
193 |              transform: scale(0);
194 |     }
195 | }
196 | @-o-keyframes ball-spin {
197 |     0%,
198 |     100% {
199 |         opacity: 1;
200 |         -o-transform: scale(1);
201 |            transform: scale(1);
202 |     }
203 |     20% {
204 |         opacity: 1;
205 |     }
206 |     80% {
207 |         opacity: 0;
208 |         -o-transform: scale(0);
209 |            transform: scale(0);
210 |     }
211 | }
212 | @keyframes ball-spin {
213 |     0%,
214 |     100% {
215 |         opacity: 1;
216 |         -webkit-transform: scale(1);
217 |            -moz-transform: scale(1);
218 |              -o-transform: scale(1);
219 |                 transform: scale(1);
220 |     }
221 |     20% {
222 |         opacity: 1;
223 |     }
224 |     80% {
225 |         opacity: 0;
226 |         -webkit-transform: scale(0);
227 |            -moz-transform: scale(0);
228 |              -o-transform: scale(0);
229 |                 transform: scale(0);
230 |     }
231 | }
232 | 


--------------------------------------------------------------------------------
/src/index.tpl.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>ActiUI</title>
 9 |     <meta name="keywords" content="ActiUI" />
10 |     <meta name="description" content="ActiUI" />
11 |     <meta name="format-detection" content="telephone=no" />
12 | </head>
13 | <style>
14 |     
15 |     html,
16 |     body,
17 |     h1,
18 |     h2,
19 |     h3,
20 |     h4,
21 |     h5,
22 |     h6,
23 |     p,
24 |     blockquote,
25 |     ul,
26 |     ol,
27 |     li,
28 |     dl,
29 |     dt,
30 |     dd,
31 |     form,
32 |     fieldset,
33 |     legend,
34 |     input,
35 |     textarea,
36 |     button,
37 |     th,
38 |     td {
39 |       margin: 0;
40 |       padding: 0;
41 |       border: 0;
42 |       vertical-align: baseline;
43 |     }
44 |     html {
45 |       line-height: 1;
46 |     }
47 |     table {
48 |       border-collapse: collapse;
49 |       border-spacing: 0;
50 |     }
51 |     ul,
52 |     ol {
53 |       list-style: none;
54 |     }
55 |     img {
56 |       border: 0;
57 |     }
58 |     b,
59 |     strong {
60 |       font-weight: 700;
61 |     }
62 |     article,
63 |     aside,
64 |     details,
65 |     figcaption,
66 |     figure,
67 |     footer,
68 |     header,
69 |     hgroup,
70 |     main,
71 |     nav,
72 |     section,
73 |     summary {
74 |       display: block;
75 |     }
76 |     audio,
77 |     canvas,
78 |     progress,
79 |     video {
80 |       display: inline-block;
81 |       vertical-align: baseline;
82 |     }
83 |     body {
84 |         background: url(data:image/png;base64,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) left top #f5f5f5;
85 |     }
86 | </style>
87 | 
88 | <body>
89 |     <div class="container">
90 |         <div id='root'>
91 |         </div>
92 |     </div>
93 | </body>
94 | 
95 | </html>
96 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="zh">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>ActiUI</title>
 9 |     <meta name="keywords" content="ActiUI" />
10 |     <meta name="description" content="ActiUI" />
11 |     <meta name="format-detection" content="telephone=no" />
12 | </head>
13 | <style>
14 |     
15 |     html,
16 |     body,
17 |     h1,
18 |     h2,
19 |     h3,
20 |     h4,
21 |     h5,
22 |     h6,
23 |     p,
24 |     blockquote,
25 |     ul,
26 |     ol,
27 |     li,
28 |     dl,
29 |     dt,
30 |     dd,
31 |     form,
32 |     fieldset,
33 |     legend,
34 |     input,
35 |     textarea,
36 |     button,
37 |     th,
38 |     td {
39 |       margin: 0;
40 |       padding: 0;
41 |       border: 0;
42 |       vertical-align: baseline;
43 |     }
44 |     html {
45 |       line-height: 1;
46 |     }
47 |     table {
48 |       border-collapse: collapse;
49 |       border-spacing: 0;
50 |     }
51 |     ul,
52 |     ol {
53 |       list-style: none;
54 |     }
55 |     img {
56 |       border: 0;
57 |     }
58 |     b,
59 |     strong {
60 |       font-weight: 700;
61 |     }
62 |     article,
63 |     aside,
64 |     details,
65 |     figcaption,
66 |     figure,
67 |     footer,
68 |     header,
69 |     hgroup,
70 |     main,
71 |     nav,
72 |     section,
73 |     summary {
74 |       display: block;
75 |     }
76 |     audio,
77 |     canvas,
78 |     progress,
79 |     video {
80 |       display: inline-block;
81 |       vertical-align: baseline;
82 |     }
83 |     body {
84 |         background: url(data:image/png;base64,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) left top #f5f5f5;
85 |     }
86 | </style>
87 | 
88 | <body>
89 |     <div class="container">
90 |         <div id='root'>
91 |         </div>
92 |     </div>
93 |     <script src="/static/bundle.js"></script>
94 | </body>
95 | 
96 | </html>
97 | 


--------------------------------------------------------------------------------
/src/component/app.less:
--------------------------------------------------------------------------------
  1 | @line:#e9e9e9;
  2 | 
  3 | .content {
  4 | 	box-sizing: border-box;
  5 | 	padding: 0;
  6 | 	line-height: 1.5;
  7 | 	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; 
  8 | 	font-size: 14px;
  9 | 	color: #404040;
 10 |     .h2 {
 11 |         margin: 1.6em 0 0.6em 0;
 12 |         color: #404040;
 13 |         font-size: 18px;
 14 |         font-weight: 500;
 15 |     }
 16 | }
 17 | body::-webkit-scrollbar {display:none}
 18 | pre, code {
 19 | 	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; 
 20 | }
 21 | .head {
 22 | 	display: block;
 23 | 	width: 100%;
 24 | 	background: #0e90d2;
 25 | 	h1 {
 26 | 		display: block;
 27 | 		width: 960px;
 28 | 		box-sizing: border-box;
 29 | 		margin: 0 auto;
 30 | 		color: #fff;
 31 | 	}
 32 | }
 33 | 
 34 | .hello {
 35 | 	box-sizing: border-box;
 36 | 	padding-top: 50px;
 37 | 	section {
 38 | 		margin-bottom: 30px;
 39 | 	}
 40 | 	h2 {
 41 | 	    margin: 0 0 0.6em;
 42 | 	    color: #404040;
 43 | 	    font-size: 18px;
 44 | 	    font-weight: 500;
 45 | 	}
 46 | 	p, li {
 47 | 		margin-bottom: 10px;
 48 | 	}
 49 | 	li {
 50 | 		display: table;
 51 | 		width: 100%;
 52 | 		span{
 53 | 			display: table-cell;
 54 | 			&:first-child {
 55 | 				width: 15px;
 56 | 			}
 57 | 		}
 58 | 	}
 59 | 
 60 | 	code {
 61 | 	    padding: 2px 4px;
 62 | 	    color: #c7254e;
 63 | 	    background-color: #f8f8f8;
 64 | 	    white-space: nowrap;
 65 | 	    border-radius: 0;
 66 | 	}
 67 | 	a {
 68 | 		color: #0e90d2;
 69 | 		text-decoration: none;
 70 | 		&:hover {color: #095f8a;}
 71 | 		&:focus {color: #095f8a;}
 72 | 	}
 73 | 	.git {
 74 | 		color: #404040;
 75 | 		text-decoration: none;
 76 | 		&:hover, &:focus{
 77 | 			color: #404040;
 78 | 			text-decoration: none;
 79 | 		    background-color: #ddd;
 80 | 		    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#eee),color-stop(100%,#ddd));
 81 | 		    background-image: linear-gradient(to bottom,#eee 0,#ddd 100%);
 82 | 		    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);
 83 | 		    border-color: #ccc;
 84 | 		}
 85 | 		padding: 3px 10px 3px 8px;
 86 | 	    font-size: 16px;
 87 | 	    line-height: 22px;
 88 | 	    border-radius: 4px;
 89 | 	    background-color: #eee;
 90 | 	    background-image: linear-gradient(to bottom,#fcfcfc 0,#eee 100%);
 91 | 	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#eeeeee', GradientType=0);
 92 | 	    background-repeat: no-repeat;
 93 | 	    border: 1px solid #d5d5d5;
 94 | 
 95 | 		svg {
 96 | 			width: 20px;
 97 | 			height: 20px;
 98 | 			margin-right: 5px;
 99 | 			fill: #404040;
100 | 			vertical-align: top;
101 | 			&:hover {color: #095f8a;}
102 | 			&:focus {color: #095f8a;}
103 | 		}
104 | 	}
105 | 	.contact {
106 | 		margin-top: 200px;
107 | 		h4 {line-height: 2.5;}
108 | 		li {
109 | 			margin: 10px 0;
110 | 			overflow: hidden;
111 | 			text-align: left;
112 | 			div {
113 | 				display: inline-block;
114 | 				&:first-child {
115 | 					margin-right: 5px;
116 | 				}
117 | 			}
118 | 		}
119 | }
120 | }
121 | 
122 | .main{
123 | 	display: flex;
124 | 	width: 1000px;
125 | 	box-sizing: border-box;
126 | 	margin: 0 auto;
127 | 	padding: 20px 20px;
128 | 	background: #fff;
129 | }
130 | .left_box {
131 | 	position: relative;
132 | 	display: block;
133 | 	width: 100%;
134 | 	max-width: 200px;
135 | 	margin: 0 auto;
136 | 	text-align: left;
137 | }
138 | .right_box {
139 | 	position: relative;
140 | 	display: block;
141 | 	width: 100%;
142 | 	max-width: 640px;
143 | 	box-sizing: border-box;
144 | 	margin: 0px auto;
145 | 	padding-bottom: 50px;
146 | 	background: #fff;
147 | 	overflow: hidden;
148 | }
149 | @media screen and (max-width: 900px)  {
150 | 	.content {
151 | 		// .content;
152 | 		.head {
153 | 			h1 {
154 | 				width: 100%;
155 | 				padding: 0 10px;
156 | 			}
157 | 		}
158 | 		.main {
159 | 			width: 100%;
160 | 			padding: 10px;
161 | 			display: block;
162 | 			flex-direction: column;
163 | 			justify-content: space-between;
164 | 		}
165 | 		.left_box {
166 | 			margin: 0;
167 | 		}
168 | 		.nav {
169 | 			margin-top: 0;
170 | 			li {
171 | 				padding: 0;
172 | 			}
173 | 		}
174 | 	}
175 | }
176 | 
177 | .nav {
178 | 	width: 100%;
179 | 	margin-top: 50px;
180 | 	font-size: 14px;
181 | 	li {
182 | 		display: block;
183 | 		box-sizing: border-box;
184 | 		padding-left: 20px;
185 | 		line-height: 2.5;
186 | 		cursor: pointer;
187 | 		&:hover {
188 | 			background-color: #e7f4fd;
189 | 		}
190 | 
191 | 		small {
192 | 			font-size: .8em;
193 | 			padding-left: 5px;
194 | 		}
195 | 	}
196 | 	.active {
197 | 		color: #dd514c;
198 | 	}
199 | }
200 | 
201 | .box {
202 | 	border: 1px solid @line;
203 | 	border-radius: 4px;
204 | 	display: block;
205 | 	position: relative;
206 | 	box-sizing: border-box;
207 | 	margin: 0px auto;
208 | 	padding-bottom: 10px;
209 | 	-webkit-transition: all 0.2s ease;
210 | 	transition: all 0.2s ease;
211 | 	.git {
212 | 		display: block;
213 | 		text-align: right;
214 | 		box-sizing: border-box;
215 | 		padding-right: 10px;
216 | 		color: #0e90d2;
217 | 		fill: #095f8a;
218 | 		text-decoration: underline;
219 | 		&:hover, &:focus {color: #095f8a;fill: #095f8a;}
220 | 
221 | 		svg{
222 | 			width: 20px;
223 | 			height: 20px;
224 | 			vertical-align: top;
225 | 			margin-right: 5px;
226 | 			fill:inherit;
227 | 		}
228 | 	}
229 | }
230 | .meta {
231 | 	position: relative;
232 | 	border-top: solid 1px @line; 
233 | 	padding: 20px 10px 40px;
234 | 	font-size: 14px;
235 | 	h3 {
236 | 		position: absolute;
237 | 		top: -12px;
238 | 		left: 10px;
239 | 		width: 80px;
240 | 		font-size: 14px;
241 | 		text-align: center;
242 | 		background: #fff;
243 | 	}
244 | 	.arrow {
245 | 		position: absolute;
246 | 		top: -10px;
247 | 		right: 10px;
248 | 		padding: 0 5px;
249 | 		background: #fff;
250 | 		svg {
251 | 			width: 22px;
252 | 			height: 22px;
253 | 			cursor: pointer;
254 | 			transform: rotate(0deg);
255 | 			transition: all 500ms ease;
256 | 			&:hover {
257 | 				fill: #666
258 | 			} 
259 | 		}
260 | 	}
261 | 	.arrow_up {
262 | 		.arrow;
263 | 		svg {
264 | 			transform: rotate(180deg);
265 | 			// transition: all 500ms ease;
266 | 		}
267 | 	}
268 | }
269 | .demo {
270 | 	width: 100%;
271 | 	max-width: 320px;
272 | 	min-height: 100px;
273 | 	box-sizing: border-box;
274 | 	padding: 30px 10px 50px;
275 | }
276 | 
277 | 
278 | .apilist {
279 | 	ul {
280 | 		display: table;
281 | 		width: 100%;
282 | 		border-left: solid 1px @line;
283 | 		&:first-child{
284 | 			border-top: solid 1px @line;
285 | 		}
286 | 		li {
287 | 			display: table-cell;
288 | 			width: 25%;
289 | 			padding: 10px;
290 | 			border: solid 1px @line;
291 | 			border-top: none;
292 | 			border-left: none;
293 | 			word-wrap: break-word;
294 | 			word-break:break-all;
295 | 		}
296 | 	}
297 | 	
298 | }


--------------------------------------------------------------------------------
/docs/bundle-49974.min.css:
--------------------------------------------------------------------------------
1 | .listloading-content-3pkDB,.listloading-errtip-3Xg8p{position:relative}.listloading-errtip-3Xg8p div{position:relative;display:block;height:7px;margin:0 0 13px;background:#ddd}.listloading-errtip-3Xg8p div:before{content:"";opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#eee;-webkit-animation:listloading-progressactive-1S4Ze 1s infinite ease-in-out;animation:listloading-progressactive-1S4Ze 1s infinite ease-in-out}.listloading-errtip-3Xg8p div:first-child{width:30%;-webkit-animation:listloading-ball-spin-2pAle .5s .1s infinite ease-in-out;animation:listloading-ball-spin-2pAle .5s .1s infinite ease-in-out}.listloading-errtip-3Xg8p div:nth-child(2){width:20%;margin-bottom:20px}.listloading-errtip-3Xg8p div:nth-child(2),.listloading-errtip-3Xg8p div:nth-child(3){-webkit-animation:listloading-ball-spin-2pAle .5s .3s infinite ease-in-out;animation:listloading-ball-spin-2pAle .5s .3s infinite ease-in-out}.listloading-errtip-3Xg8p div:nth-child(3){width:60%}.listloading-errtip-3Xg8p div:nth-child(4){width:80%}.listloading-errtip-3Xg8p div:nth-child(4),.listloading-errtip-3Xg8p div:nth-child(5){-webkit-animation:listloading-ball-spin-2pAle .5s .1s infinite ease-in-out;animation:listloading-ball-spin-2pAle .5s .1s infinite ease-in-out}.listloading-errtip-3Xg8p div:nth-child(5){width:50%}.listloading-word-1XGlg{position:absolute;top:0;right:0;color:#333;font-size:13px;font-weight:700;-webkit-animation:listloading-fadein-138b0 .8s infinite;animation:listloading-fadein-138b0 .8s infinite}@-webkit-keyframes listloading-fadein-138b0{0%{opacity:1}50%{opacity:.7}to{opacity:1}}@keyframes listloading-fadein-138b0{0%{opacity:1}50%{opacity:.7}to{opacity:1}}@-webkit-keyframes listloading-progressactive-1S4Ze{0%{opacity:.8;width:0}to{opacity:0;width:100%}}@keyframes listloading-progressactive-1S4Ze{0%{opacity:.8;width:0}to{opacity:0;width:100%}}.tabswitch-content-WsKYo{width:100%;margin:0 auto;font-size:14px}.tabswitch-head-2ciVr{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.tabswitch-head-2ciVr li{width:48.5%;text-align:center;height:30px;line-height:30px;color:#fff;font-size:1.2em;font-weight:700;background:#dd514c;border:1px solid #d9d9d9;border-bottom:none;border-radius:.5em .5em 0 0}li.tabswitch-active-1ExRQ{position:relative;height:40px;line-height:40px;font-size:1.2em;color:#898989;background:#fff}li.tabswitch-active-1ExRQ:after{content:"";position:absolute;z-index:1;bottom:-2px;left:0;width:100%;border-top:4px solid #fff;background:#fff}.tabswitch-body-UoLsH{position:relative;box-sizing:border-box;min-height:150px;border:1px solid #d9d9d9;text-align:center}.tabswitch-box-24dRP{position:absolute;width:100%}.tabswitch-enter-24SeU{opacity:.5}.tabswitch-enterActive-1kcxR{opacity:1;transition:all .15s ease-in}.tabswitch-leave-2rHGz{opacity:.5}.tabswitch-leaveActive-3xIQ7{opacity:.01;transition:all .15s ease-in}.notice-content-16wAA{display:table;width:100%;overflow-y:hidden;line-height:20px}.notice-icon-3vRQr{display:table-cell;width:20px;height:20px}.notice-box-1hheq{position:relative;display:table-cell;overflow-y:hidden;width:100%}.notice-inner-TupzO{display:block;position:absolute;left:5px}.notice-enter-g089O{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:.01}.notice-enterActive-1LhOP{transition:all .3s ease-in}.notice-enterActive-1LhOP,.notice-leave-30oN7{-webkit-transform:translate(0);transform:translate(0);opacity:1}.notice-leaveActive-NU2-g{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:.01;transition:all .3s ease-in}.marquee-content-2MKWD{position:relative}.marquee-box-38jVB{position:relative;background:#eee;background-size:100%;width:302px;height:302px;text-align:center;margin:0 auto}.marquee-box-38jVB li{position:absolute;display:block;width:75px;height:75px;line-height:75px;border:1px solid #898989}.marquee-box-38jVB li:first-child{top:22px;left:22px}.marquee-box-38jVB li:nth-child(2){top:22px;left:110px}.marquee-box-38jVB li:nth-child(3){top:22px;left:197px}.marquee-box-38jVB li:nth-child(4){top:110px;left:197px}.marquee-box-38jVB li:nth-child(5){top:197px;left:197px}.marquee-box-38jVB li:nth-child(6){top:197px;left:110px}.marquee-box-38jVB li:nth-child(7){top:197px;left:22px}.marquee-box-38jVB li:nth-child(8){top:110px;left:22px}.marquee-active-1wwoj{border:4px solid gold;box-shadow:inset 3px 3px 0 gold,inset -3px -3px 0 gold}.marquee-start-2sr-h{border:1px solid #898989}.marquee-start-2sr-h,.marquee-start_disable-3qdhG{position:absolute;width:75px;height:75px;line-height:75px;top:110px;left:110px}.marquee-start_disable-3qdhG{border:1px solid #898989;border:1px solid #ccc;color:#ccc}#root{transition:all .15s ease-in}.blur-set{-webkit-filter:blur(8px);filter:blur(8px);-webkit-transform:scale(.98);transform:scale(.98)}.modal-dyy-1d1qe{position:fixed;z-index:10;top:0;left:0;box-sizing:border-box;width:100%;height:100%;background:rgba(0,0,0,.3)}.modal-default-3gbHo{z-index:20;position:fixed;top:70px;left:50%;right:0;box-sizing:border-box;width:310px;margin-left:-155px;font-size:16px;line-height:1.5;background:#fff;border-radius:12px}.modal-close-oNdsW{position:absolute;z-index:30;right:0;top:0;width:32px;height:32px;line-height:40px;font-size:16px;font-weight:700;border-radius:0 12px 0 0;text-align:center;overflow:hidden}.modal-close-oNdsW svg{width:20px;height:20px;fill:#999}.modal-fadeEnter-1cbT8{opacity:.01}.modal-fadeEnterActive-2ah4b{opacity:1;transition:opacity .2s linear}.modal-fadeLeave-13iph{opacity:1}.modal-fadeLeaveActive-3To8D{opacity:.01;transition:opacity .2s ease-in}.modal-slideEnter-3hhqI{opacity:.01;-webkit-transform:scale(.8);transform:scale(.8)}.modal-slideEnterActive-ae4rr{opacity:1;-webkit-transform:scale(1);transform:scale(1);transition:opacity .1s linear,-webkit-transform .1s linear;transition:transform .1s linear,opacity .1s linear;transition:transform .1s linear,opacity .1s linear,-webkit-transform .1s linear}.modal-slideLeave-1oSUo{opacity:1;-webkit-transform:translate(0);transform:translate(0)}.modal-slideLeaveActive-313Zm{opacity:.01;-webkit-transform:translateY(2rem) scale(.8);transform:translateY(2rem) scale(.8);transition:opacity .2s linear,-webkit-transform .2s ease-in;transition:transform .2s ease-in,opacity .2s linear;transition:transform .2s ease-in,opacity .2s linear,-webkit-transform .2s ease-in}.spin-content-2Hpan{width:100%;height:inherit}.spin-dyy-3-cwu{position:fixed;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:100%;background:hsla(0,0%,88%,.4)}.spin-blur-TOEJc{height:inherit;-webkit-filter:blur(2px) contrast(.8) brightness(.8);filter:blur(2px) contrast(.8) brightness(.8);-webkit-transform:scale(.98);transform:scale(.98)}.spin-laballspin-qTvYF,.spin-laballspin-qTvYF>div{position:absolute;z-index:2;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-sizing:border-box}.spin-laballspin-qTvYF{display:block;font-size:0;color:#333}.spin-laballspin-qTvYF.spin-la-dark-2NVKJ{color:#333}.spin-laballspin-qTvYF>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.spin-laballspin-qTvYF{width:32px;height:32px}.spin-laballspin-qTvYF>div{position:absolute;top:50%;left:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;border-radius:100%;-webkit-animation:spin-ball-spin-2pnBv 1s infinite ease-in-out;animation:spin-ball-spin-2pnBv 1s infinite ease-in-out}.spin-laballspin-qTvYF>div:first-child{top:5%;left:50%;-webkit-animation-delay:-1.125s;animation-delay:-1.125s}.spin-laballspin-qTvYF>div:nth-child(2){top:18.18019485%;left:81.81980515%;-webkit-animation-delay:-1.25s;animation-delay:-1.25s}.spin-laballspin-qTvYF>div:nth-child(3){top:50%;left:95%;-webkit-animation-delay:-1.375s;animation-delay:-1.375s}.spin-laballspin-qTvYF>div:nth-child(4){top:81.81980515%;left:81.81980515%;-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.spin-laballspin-qTvYF>div:nth-child(5){top:95%;left:50%;-webkit-animation-delay:-1.625s;animation-delay:-1.625s}.spin-laballspin-qTvYF>div:nth-child(6){top:81.8198047%;left:18.18019492%;-webkit-animation-delay:-1.75s;animation-delay:-1.75s}.spin-laballspin-qTvYF>div:nth-child(7){top:49.99997508%;left:5.00000512%;-webkit-animation-delay:-1.875s;animation-delay:-1.875s}.spin-laballspin-qTvYF>div:nth-child(8){top:18.17946497%;left:18.18037005%;-webkit-animation-delay:-2s;animation-delay:-2s}.spin-laballspin-qTvYF.spin-la-sm-nSypm{width:16px;height:16px}.spin-laballspin-qTvYF.spin-la-sm-nSypm>div{width:4px;height:4px;margin-top:-2px;margin-left:-2px}.spin-laballspin-qTvYF.spin-la-2x-sqnPZ{width:64px;height:64px}.spin-laballspin-qTvYF.spin-la-2x-sqnPZ>div{width:16px;height:16px;margin-top:-8px;margin-left:-8px}.spin-laballspin-qTvYF.spin-la-3x-zWq0I{width:96px;height:96px}.spin-laballspin-qTvYF.spin-la-3x-zWq0I>div{width:24px;height:24px;margin-top:-12px;margin-left:-12px}@-webkit-keyframes spin-ball-spin-2pnBv{0%,to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:1}80%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes spin-ball-spin-2pnBv{0%,to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}20%{opacity:1}80%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}.verify-content-R1VVJ{width:220px;margin:0 auto;padding:20px 0}.verify-content-R1VVJ input{width:100%;height:44px;font-size:16px;font-weight:700;text-align:center;background-color:#eee;box-shadow:inset 2px 2px 0 0 #e5e5e5;border-radius:8px;outline:none}.verify-validbox-3924t{display:table;width:100%;margin:10px auto}.verify-section-1iRfO:first-child{display:table-cell;width:70%;overflow:hidden}.verify-section-1iRfO:first-child input{font-size:16px;border-radius:8px 0 0 8px}.verify-section-1iRfO:nth-child(2){display:table-cell;width:30%;overflow:hidden;vertical-align:top}.verify-section-1iRfO:nth-child(2) span{display:block;width:100%;height:44px;line-height:44px;font-size:14px;color:#fff;text-align:center;vertical-align:middle;border-radius:0 .4em .4em 0;background-color:#108ee9}.verify-section-1iRfO:nth-child(2) .verify-time-3HODU{color:#fff;font-size:14px;background:#ccc;cursor:not-allowed}.verify-btn-4MYg9{display:block;margin:20px auto 0;line-height:2;color:#fff;font-size:20px;font-weight:700;text-align:center;background:#108ee9;border-radius:8px}.verify-tip_show-7qERu{height:18px}.verify-tip_hide-38Oys,.verify-tip_show-7qERu{display:block;color:#710600;font-size:12px;text-align:center;overflow:hidden}.verify-tip_hide-38Oys{height:18px;height:0}.verify-dotting-2sLZ_{display:inline-block;min-width:2px;min-height:2px;box-shadow:2px 0 currentColor,6px 0 currentColor,10px 0 currentColor;-webkit-animation:verify-dot-3ruvS 1.5s infinite step-start both;animation:verify-dot-3ruvS 1.5s infinite step-start both}.verify-dotting-2sLZ_:before{content:"...";content:""}:root .verify-dotting-2sLZ_{margin-right:8px}@-webkit-keyframes verify-dot-3ruvS{25%{box-shadow:none}50%{box-shadow:2px 0 currentColor}75%{box-shadow:2px 0 currentColor,6px 0 currentColor}}@keyframes verify-dot-3ruvS{25%{box-shadow:none}50%{box-shadow:2px 0 currentColor}75%{box-shadow:2px 0 currentColor,6px 0 currentColor}}.verify-enter-Adr5p{display:block;-webkit-transform:translateY(18px);transform:translateY(18px);opacity:.01}.verify-enterActive-LgTlZ{transition:all .15s ease-in}.verify-enterActive-LgTlZ,.verify-leave-ka_0l{display:block;-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.verify-leaveActive-3rYMQ{display:block;-webkit-transform:translateY(-18px);transform:translateY(-18px);opacity:.01;transition:all .15s ease-in}.app-content-2OfhS{box-sizing:border-box;padding:0;line-height:1.5;font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;font-size:14px;color:#404040}.app-content-2OfhS .app-h2-2Ecu9{margin:1.6em 0 .6em;color:#404040;font-size:18px;font-weight:500}body::-webkit-scrollbar{display:none}code,pre{font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif}.app-head-3-r5d{display:block;width:100%;background:#0e90d2}.app-head-3-r5d h1{display:block;width:960px;box-sizing:border-box;margin:0 auto;color:#fff}.app-hello-2-yTl{box-sizing:border-box;padding-top:50px}.app-hello-2-yTl section{margin-bottom:30px}.app-hello-2-yTl h2{margin:0 0 .6em;color:#404040;font-size:18px;font-weight:500}.app-hello-2-yTl li,.app-hello-2-yTl p{margin-bottom:10px}.app-hello-2-yTl li{display:table;width:100%}.app-hello-2-yTl li span{display:table-cell}.app-hello-2-yTl li span:first-child{width:15px}.app-hello-2-yTl code{padding:2px 4px;color:#c7254e;background-color:#f8f8f8;white-space:nowrap;border-radius:0}.app-hello-2-yTl a{color:#0e90d2;text-decoration:none}.app-hello-2-yTl a:focus,.app-hello-2-yTl a:hover{color:#095f8a}.app-hello-2-yTl .app-git-1CPgW{color:#404040;text-decoration:none;padding:3px 10px 3px 8px;font-size:16px;line-height:22px;border-radius:4px;background-color:#eee;background-image:linear-gradient(180deg,#fcfcfc 0,#eee);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfcfc",endColorstr="#eeeeee",GradientType=0);background-repeat:no-repeat;border:1px solid #d5d5d5}.app-hello-2-yTl .app-git-1CPgW:focus,.app-hello-2-yTl .app-git-1CPgW:hover{color:#404040;text-decoration:none;background-color:#ddd;background-image:linear-gradient(180deg,#eee 0,#ddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee",endColorstr="#dddddd",GradientType=0);border-color:#ccc}.app-hello-2-yTl .app-git-1CPgW svg{width:20px;height:20px;margin-right:5px;fill:#404040;vertical-align:top}.app-hello-2-yTl .app-git-1CPgW svg:focus,.app-hello-2-yTl .app-git-1CPgW svg:hover{color:#095f8a}.app-hello-2-yTl .app-contact-97Y-T{margin-top:200px}.app-hello-2-yTl .app-contact-97Y-T h4{line-height:2.5}.app-hello-2-yTl .app-contact-97Y-T li{margin:10px 0;overflow:hidden;text-align:left}.app-hello-2-yTl .app-contact-97Y-T li div{display:inline-block}.app-hello-2-yTl .app-contact-97Y-T li div:first-child{margin-right:5px}.app-main-3soiG{display:-webkit-box;display:-ms-flexbox;display:flex;width:1000px;box-sizing:border-box;margin:0 auto;padding:20px;background:#fff}.app-left_box-bLhAa{max-width:200px;text-align:left}.app-left_box-bLhAa,.app-right_box-1JgZ2{position:relative;display:block;width:100%;margin:0 auto}.app-right_box-1JgZ2{max-width:640px;box-sizing:border-box;padding-bottom:50px;background:#fff;overflow:hidden}@media screen and (max-width:900px){.app-content-2OfhS .app-head-3-r5d h1{width:100%;padding:0 10px}.app-content-2OfhS .app-main-3soiG{width:100%;padding:10px;display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.app-content-2OfhS .app-left_box-bLhAa{margin:0}.app-content-2OfhS .app-nav-1U4Yi{margin-top:0}.app-content-2OfhS .app-nav-1U4Yi li{padding:0}}.app-nav-1U4Yi{width:100%;margin-top:50px;font-size:14px}.app-nav-1U4Yi li{display:block;box-sizing:border-box;padding-left:20px;line-height:2.5;cursor:pointer}.app-nav-1U4Yi li:hover{background-color:#e7f4fd}.app-nav-1U4Yi li small{font-size:.8em;padding-left:5px}.app-nav-1U4Yi .app-active-2MOLM{color:#dd514c}.app-box-3QqB8{border:1px solid #e9e9e9;border-radius:4px;display:block;position:relative;box-sizing:border-box;margin:0 auto;padding-bottom:10px;transition:all .2s ease}.app-box-3QqB8 .app-git-1CPgW{display:block;text-align:right;box-sizing:border-box;padding-right:10px;color:#0e90d2;fill:#095f8a;text-decoration:underline}.app-box-3QqB8 .app-git-1CPgW:focus,.app-box-3QqB8 .app-git-1CPgW:hover{color:#095f8a;fill:#095f8a}.app-box-3QqB8 .app-git-1CPgW svg{width:20px;height:20px;vertical-align:top;margin-right:5px;fill:inherit}.app-meta-2KGsy{position:relative;border-top:1px solid #e9e9e9;padding:20px 10px 40px;font-size:14px}.app-meta-2KGsy h3{position:absolute;top:-12px;left:10px;width:80px;font-size:14px;text-align:center;background:#fff}.app-meta-2KGsy .app-arrow-2_84v{position:absolute;top:-10px;right:10px;padding:0 5px;background:#fff}.app-meta-2KGsy .app-arrow-2_84v svg{width:22px;height:22px;cursor:pointer;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:all .5s ease}.app-meta-2KGsy .app-arrow-2_84v svg:hover{fill:#666}.app-meta-2KGsy .app-arrow_up-30ks1{position:absolute;top:-10px;right:10px;padding:0 5px;background:#fff}.app-meta-2KGsy .app-arrow_up-30ks1 svg{width:22px;height:22px;cursor:pointer;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:all .5s ease}.app-meta-2KGsy .app-arrow_up-30ks1 svg:hover{fill:#666}.app-meta-2KGsy .app-arrow_up-30ks1 svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.app-demo-3c3Z0{width:100%;max-width:320px;min-height:100px;box-sizing:border-box;padding:30px 10px 50px}.app-apilist-2Hzwz ul{display:table;width:100%;border-left:1px solid #e9e9e9}.app-apilist-2Hzwz ul:first-child{border-top:1px solid #e9e9e9}.app-apilist-2Hzwz ul li{display:table-cell;width:25%;padding:10px;border:1px solid #e9e9e9;border-top:none;border-left:none;word-wrap:break-word;word-break:break-all}


--------------------------------------------------------------------------------