├── src
    ├── css
    │   ├── base.css
    │   ├── switch.css
    │   ├── sidebar.css
    │   ├── slide.css
    │   ├── menu.css
    │   ├── panel.css
    │   ├── modal.css
    │   └── btn.css
    ├── less
    │   ├── base.less
    │   ├── switch.less
    │   ├── sidebar.less
    │   ├── slide.less
    │   ├── menu.less
    │   ├── panel.less
    │   ├── modal.less
    │   └── btn.less
    ├── components
    │   ├── switch.vue
    │   ├── btn.vue
    │   ├── tabPanel.vue
    │   ├── menu.vue
    │   ├── accordion.vue
    │   ├── alert.vue
    │   ├── confirm.vue
    │   ├── actions.vue
    │   ├── prompt.vue
    │   ├── panel.vue
    │   ├── progress.vue
    │   └── slide.vue
    ├── index.js
    └── json
    │   └── school.json
├── .gitignore
├── .npmignore
├── docs
    ├── index.js
    ├── aside.vue
    ├── src
    │   ├── switchTest.vue
    │   ├── menuTest.vue
    │   ├── tabPanelTest.vue
    │   ├── btnTest.vue
    │   ├── accordionTest.vue
    │   ├── progressTest.vue
    │   ├── alertTest.vue
    │   ├── actionsTest.vue
    │   ├── panelTest.vue
    │   ├── slideTest.vue
    │   ├── confirmTest.vue
    │   └── promptTest.vue
    ├── lib
    │   ├── prism.css
    │   ├── smooth-scroll.min.js
    │   └── prism.js
    ├── menu.vue
    └── index.vue
├── index.html
├── webpack.config.js
├── package.json
├── README.md
└── dist
    ├── reset.css
    ├── mui.min.css
    ├── mui.js
    └── mui.css


/src/css/base.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/test.js.map
3 | dist/vue-mui.js.map
4 | dist/vue-mui.map


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | example/
3 | gulpfile.js
4 | dist/
5 | docs/
6 | index.html
7 | webpack.config.js


--------------------------------------------------------------------------------
/docs/index.js:
--------------------------------------------------------------------------------
 1 | var Vue = require('vue')
 2 | var App = require('./index.vue')
 3 | var prismcss = require('./lib/prism.css')
 4 | var prismjs = require('./lib/prism.js') //语法高亮
 5 | 
 6 | new Vue({
 7 | 	el : 'body',
 8 | 	components : {
 9 | 		app : App
10 | 	}
11 | })


--------------------------------------------------------------------------------
/src/less/base.less:
--------------------------------------------------------------------------------
 1 | @base-color: #fafafa;
 2 | @base-color-f5 : #f5f5f5;
 3 | @font-color-54: rgba(0,0,0,.54);
 4 | @font-color-87: rgba(0,0,0,.87);
 5 | @font-color-36: rgba(0,0,0,.36);
 6 | @border-color: #ddd;
 7 | @base-height: 44px;
 8 | @font-size: 14px;
 9 | @color-blue: #4c9cee;
10 | @color-green: #4c9;
11 | @color-red: #ef4f4f;


--------------------------------------------------------------------------------
/src/components/switch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="t-switch" :class="{'open':status}"
 3 | 					  @click="status=!status">
 4 | 	<div class="t-switch__btn"></div>
 5 | </div>
 6 | </template>
 7 | <script>
 8 | export default {
 9 | 	props : {
10 | 		status : {
11 | 			type : Boolean,
12 | 			default : false,
13 | 			toWay : true
14 | 		}
15 | 	}
16 | }
17 | </script>


--------------------------------------------------------------------------------
/src/components/btn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <a class="t-btn" :class="['t-btn--'+type]"
 3 | 				 @click.prevent="callback"><slot></slot></a>
 4 | </template>
 5 | <script>
 6 | export default {
 7 | 	props : {
 8 | 		type : {
 9 | 			type : String,
10 | 			default : 'default'
11 | 		},
12 | 		cb : {
13 | 			type : Function
14 | 		},
15 | 		opt : {
16 | 			type : null,
17 | 			default : ''
18 | 		}
19 | 	},
20 | 	methods : {
21 | 		callback : function(){
22 | 			this.opt === '' ? this.cb() : this.cb(this.opt);
23 | 		}
24 | 	}
25 | }
26 | </script>


--------------------------------------------------------------------------------
/src/components/tabPanel.vue:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .t-tab__bd{
 3 | 	display: block;
 4 | }
 5 | </style>
 6 | <template>
 7 | <section class="t-tab">
 8 | 	<nav>
 9 | 		<a v-for="its in list" v-text="its.title" :class="{'current':index===$index}" @click.prevent="index=$index"></a>
10 | 	</nav>
11 | 	<div class="t-tab__bd" v-for="its in list" v-show="index===$index">
12 | 		<p v-text="its.content"></p>
13 | 	</div>
14 | </section>
15 | </template>
16 | <script>
17 | export default {
18 | 	data() {
19 | 		return {
20 | 			index : 0
21 | 		}
22 | 	},
23 | 	props : {
24 | 		list : {
25 | 			type : Array
26 | 		}
27 | 	}
28 | }
29 | </script>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	alert : require('./components/alert.vue'),
 3 | 	confirm : require('./components/confirm.vue'),
 4 | 	prompt : require('./components/prompt.vue'),
 5 | 	actions : require('./components/actions.vue'),
 6 | 	panel : require('./components/panel.vue'),
 7 | 	accordion : require('./components/accordion.vue'),
 8 | 	tabpanel : require('./components/tabPanel.vue'),
 9 | 	btn : require('./components/btn.vue'),
10 | 	switchbtn : require('./components/switch.vue'),
11 | 	progress : require('./components/progress.vue'),
12 | 	slide : require('./components/slide.vue'),
13 | 	menubar : require('./components/menu.vue')
14 | }
15 | 


--------------------------------------------------------------------------------
/src/css/switch.css:
--------------------------------------------------------------------------------
 1 | .t-switch {
 2 |   position: relative;
 3 |   width: 50px;
 4 |   height: 24px;
 5 |   border-radius: 20px;
 6 |   background-color: #ddd;
 7 |   -webkit-transition: background-color 0.1s ease-in;
 8 |   transition: background-color 0.1s ease-in;
 9 | }
10 | .t-switch.open {
11 |   background-color: #4c9cee;
12 | }
13 | .t-switch.open .t-switch__btn {
14 |   right: 2px;
15 |   left: auto;
16 | }
17 | .t-switch__btn {
18 |   position: absolute;
19 |   top: 2px;
20 |   left: 2px;
21 |   width: 20px;
22 |   height: 20px;
23 |   border-radius: 50%;
24 |   background-color: #fff;
25 |   -webkit-transition: left 0.2s ease-in;
26 |   transition: left 0.2s ease-in;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <ul class="t-menu">
 3 | 	<li v-for="its in list">
 4 | 		<a v-text="its.name" @click.prevent="handle($event,its.link)"></a>
 5 | 		<ul class="t-menu__child" v-if="its.child">
 6 | 			<li v-for="items in its.child">
 7 | 				<a :href="items.link" v-text="items.name"></a>
 8 | 			</li>
 9 | 		</ul>
10 | 	</li>
11 | </ul>
12 | </template>
13 | <script>
14 | export default {
15 | 	props : {
16 | 		list : {
17 | 			type : Array
18 | 		}
19 | 	},
20 | 	methods : {
21 | 
22 | 		handle(e, link) {
23 | 			if (link) {
24 | 				window.location.href = link;
25 | 			} else {
26 | 				e.target.classList.toggle('current');
27 | 			}
28 | 		}
29 | 	}
30 | }
31 | </script>


--------------------------------------------------------------------------------
/src/less/switch.less:
--------------------------------------------------------------------------------
 1 | @import 'base.less';
 2 | .t-switch{
 3 | 	position: relative;
 4 | 	width: 50px;
 5 | 	height: 24px;
 6 | 	border-radius: 20px;
 7 | 	background-color: #ddd;
 8 | 	-webkit-transition: background-color .1s ease-in;
 9 | 	transition: background-color .1s ease-in;
10 | 
11 | 	&.open{
12 | 		background-color: @color-blue;
13 | 
14 | 		.t-switch__btn{
15 | 			right: 2px;
16 | 			left: auto;
17 | 		}
18 | 	}
19 | 
20 | 	&__btn{
21 | 		position: absolute;
22 | 		top: 2px;
23 | 		left: 2px;
24 | 		width: 20px;
25 | 		height: 20px;
26 | 		border-radius: 50%;
27 | 		background-color: #fff;
28 | 		-webkit-transition: left .2s ease-in;
29 | 		transition: left .2s ease-in;
30 | 	}
31 | }


--------------------------------------------------------------------------------
/src/components/accordion.vue:
--------------------------------------------------------------------------------
 1 | <style lang="less">
 2 | .t-accordion{
 3 | 	.t-panel+.t-panel{
 4 | 		border-top: 0;
 5 | 	}
 6 | }
 7 | </style>
 8 | <template>
 9 | <div class="t-accordion">
10 | 	<slot></slot>
11 | </div>
12 | </template>
13 | <script>
14 | export default {
15 | 	ready() {
16 | 		this.init()
17 | 		this.listen()
18 | 	},
19 | 	methods : {
20 | 		init() {
21 | 			this.$children.forEach((x, i) => {
22 | 				if (i > 0) {
23 | 					x.show = false
24 | 				}
25 | 			})
26 | 		},
27 | 		listen() {
28 | 			let that = this
29 | 			that.$on('toggle', (child) => {
30 | 				that.$children.forEach((x) => {
31 | 					if (child !== x) {
32 | 						x.show = false
33 | 					}
34 | 				})
35 | 			})
36 | 		}
37 | 	}
38 | }
39 | </script>


--------------------------------------------------------------------------------
/src/components/alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="t-dimmer" v-show="show"></div>
 3 | <div class="t-modal" v-show="show">
 4 | 	<div class="t-modal__header">
 5 | 		<h3 class="t-modal__header--tt" 
 6 | 			v-show="title!==''" 
 7 | 			v-text="title"></h3>
 8 | 		<p class="t-modal__header--ct" v-text="content"></p>
 9 | 	</div>
10 | 	<div class="t-modal__footer">
11 | 		<a class="t-modal__footer--btn" @click.prevent="show=false">确定</a>
12 | 	</div>
13 | </div>
14 | </template>
15 | <script>
16 | export default {
17 | 	props : {
18 | 		show : {
19 | 			type : Boolean,
20 | 			default : false,
21 | 			twoWay : true
22 | 		},
23 | 		title : {
24 | 			type : String
25 | 		},
26 | 		content : {
27 | 			type : String
28 | 		}
29 | 	}
30 | }
31 | </script>


--------------------------------------------------------------------------------
/docs/aside.vue:
--------------------------------------------------------------------------------
 1 | <style lang="less">
 2 | @base-color: #ddd;
 3 | .aside{
 4 | 	position: fixed;
 5 | 	top: 50px;
 6 | 	right: 50px;
 7 | 	width: 100px;
 8 | 	border: 1px solid @base-color;
 9 | 	border-radius: 3px;
10 | 	box-sizing: border-box;
11 | 
12 | 	&:before,
13 | 	&:after{
14 | 		position: absolute;
15 | 		top: -50px;
16 | 		left: 25%;
17 | 		display: block;
18 | 		content: '';
19 | 		height: 50px;
20 | 		border-left: 1px solid @base-color;
21 | 	}
22 | 
23 | 	&:after{
24 | 		right: 25%;
25 | 		left: auto;
26 | 	}
27 | 
28 | 	a{
29 | 		color: #888;
30 | 		display: block;
31 | 		line-height: 36px;
32 | 		margin: 10px;
33 | 
34 | 		&:hover{
35 | 			color: #333;
36 | 		}
37 | 	}
38 | 
39 | }
40 | </style>
41 | 
42 | <template>
43 | <div class="aside">
44 | 	<a href="/">Home</a>
45 | 	<a href="https://github.com/mennghao/vue-mui" target="_blank">Github</a>
46 | 	<a href="./dist/vue-mui-min.js">Download</a>
47 | </div>
48 | </template>


--------------------------------------------------------------------------------
/src/components/confirm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="t-dimmer" v-show="show"></div>
 3 | <div class="t-modal" v-show="show">
 4 | 	<div class="t-modal__header">
 5 | 		<h3 class="t-modal__header--tt" 
 6 | 			v-show="title!==''" 
 7 | 			v-text="title"></h3>
 8 | 		<p class="t-modal__header--ct" v-text="content"></p>
 9 | 	</div>
10 | 	<div class="t-modal__footer">
11 | 		<a class="t-modal__footer--btn" 
12 | 		   @click.prevent="notify('cancel')">取消</a>
13 | 		<a class="t-modal__footer--btn" 
14 | 		   @click.prevent="notify('confirm')">确定</a>
15 | 	</div>
16 | </div>
17 | </template>
18 | <script>
19 | export default {
20 | 	props : {
21 | 		show : {
22 | 			type : Boolean,
23 | 			default: false,
24 | 			twoWay : true
25 | 		},
26 | 		title : {
27 | 			type : String
28 | 		},
29 | 		content : {
30 | 			type : String
31 | 		}
32 | 	},
33 | 	methods : {
34 | 		notify(type) {
35 | 			this.show = false
36 | 			this.$dispatch(type)
37 | 		}
38 | 	}
39 | }
40 | </script>


--------------------------------------------------------------------------------
/src/css/sidebar.css:
--------------------------------------------------------------------------------
 1 | .t-aside-dimmer {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   left: 0;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   background-color: rgba(0, 0, 0, 0.2);
 8 |   z-index: 1010;
 9 | }
10 | .t-aside {
11 |   position: fixed;
12 |   top: 0;
13 |   bottom: 0;
14 |   width: 250px;
15 |   background-color: #252525;
16 |   overflow-y: auto;
17 |   -webkit-overflow-scrolling: touch;
18 |   z-index: 1011;
19 |   -webkit-transform-style: preserve-3d;
20 |   transform-style: preserve-3d;
21 |   will-change: transform;
22 | }
23 | .t-aside--left {
24 |   left: 0;
25 |   -webkit-transform: translate3d(-100%, 0, 0);
26 |   transform: translate3d(-100%, 0, 0);
27 | }
28 | .t-aside--right {
29 |   right: 0;
30 |   -webkit-transform: translate3d(100%, 0, 0);
31 |   transform: translate3d(100%, 0, 0);
32 | }
33 | .aside-fix {
34 |   position: fixed;
35 |   -webkit-transition: margin-left 0.3s ease-in-out;
36 |   transition: margin-left 0.3s ease-in-out;
37 | }
38 | 


--------------------------------------------------------------------------------
/src/less/sidebar.less:
--------------------------------------------------------------------------------
 1 | @import 'base.less';
 2 | 
 3 | .t-aside-dimmer{
 4 | 	position: fixed;
 5 | 	top: 0;
 6 | 	left: 0;
 7 | 	width: 100%;
 8 | 	height: 100%;
 9 | 	background-color: rgba(0,0,0,0.2);
10 | 	z-index: 1010;
11 | }
12 | .t-aside{
13 | 	position: fixed;
14 | 	top:0;
15 | 	bottom: 0;
16 | 	width: 250px;
17 | 	background-color: #252525;
18 | 	overflow-y: auto;
19 | 	-webkit-overflow-scrolling: touch;
20 | 	z-index: 1011;
21 | 	-webkit-transform-style: preserve-3d;
22 |     transform-style: preserve-3d;
23 |     will-change: transform;
24 | 
25 | 	&--left{
26 | 		left: 0;
27 | 		-webkit-transform: translate3d(-100%, 0, 0);
28 | 		transform: translate3d(-100%, 0, 0);
29 | 	}
30 | 	&--right{
31 | 		right: 0;
32 | 		-webkit-transform: translate3d(100%, 0, 0);
33 | 		transform: translate3d(100%, 0, 0);
34 | 	}
35 | }
36 | .aside-fix{
37 | 	position: fixed;
38 |     -webkit-transition: margin-left .3s ease-in-out;
39 |     transition: margin-left .3s ease-in-out;
40 | }


--------------------------------------------------------------------------------
/src/components/actions.vue:
--------------------------------------------------------------------------------
 1 | <style lang="less">
 2 | .actions-transition{
 3 | 	-webkit-transition : all ease .3s;
 4 | 	transition : all ease .3s;
 5 | 	-webkit-transform: translate3d(0,0,0);
 6 | 	transform: translate3d(0,0,0);
 7 | }
 8 | .actions-enter,.actions-leave{
 9 | 	-webkit-transform: translate3d(0, 100%,0);
10 | 	transform: translate3d(0, 100%,0);
11 | }
12 | </style>
13 | <template>
14 | <div class="t-dimmer" v-show="show"></div>
15 | <div class="t-actions" v-show="show" transition="actions">
16 | 	<ul class="t-actions__list">
17 | 		<li class="t-actions__list--tt" v-if="title" v-text="title"></li>
18 | 		<slot></slot>
19 | 	</ul>
20 | 	<a class="t-actions__cancel" @click.prevent="show=false">取消</a>
21 | </div>
22 | </template>
23 | <script>
24 | export default {
25 | 	props : {
26 | 		show : {
27 | 			type : Boolean,
28 | 			default : false,
29 | 			twoWay : true
30 | 		},
31 | 		title : {
32 | 			type : String,
33 | 			default : ''
34 | 		}
35 | 	}
36 | }
37 | </script>


--------------------------------------------------------------------------------
/src/css/slide.css:
--------------------------------------------------------------------------------
 1 | .t-slide {
 2 |   position: relative;
 3 |   width: 100%;
 4 |   overflow: hidden;
 5 | }
 6 | .t-slide__inner {
 7 |   overflow: hidden;
 8 |   -webkit-transition: -webkit-transform 0.3s linear;
 9 |   transition: transform .3s linear;
10 | }
11 | .t-slide__inner li {
12 |   float: left;
13 | }
14 | .t-slide__inner a {
15 |   display: block;
16 |   font-size: 0;
17 | }
18 | .t-slide__inner img {
19 |   width: 100%;
20 | }
21 | .t-slide__indicator {
22 |   position: absolute;
23 |   left: 0;
24 |   right: 0;
25 |   bottom: 10px;
26 |   font-size: 0;
27 |   height: 5px;
28 |   line-height: 5px;
29 |   text-align: center;
30 |   overflow: hidden;
31 | }
32 | .t-slide__indicator span {
33 |   display: inline-block;
34 |   width: 5px;
35 |   height: 5px;
36 |   background-color: #fff;
37 |   border-radius: 50%;
38 | }
39 | .t-slide__indicator span.current {
40 |   background-color: #4c9cee;
41 | }
42 | .t-slide__indicator span + span {
43 |   margin-left: 5px;
44 | }
45 | 


--------------------------------------------------------------------------------
/src/less/slide.less:
--------------------------------------------------------------------------------
 1 | @indicator-size: 5px;
 2 | .t-slide{
 3 | 	position: relative;
 4 | 	width: 100%;
 5 | 	overflow: hidden;
 6 | 	&__inner{
 7 | 		overflow: hidden;
 8 | 		-webkit-transition: -webkit-transform .3s linear;
 9 | 		transition: transform .3s linear;
10 | 		li{
11 | 			float : left;
12 | 		}
13 | 		a{
14 | 			display: block;
15 | 			font-size: 0;
16 | 		}
17 | 
18 | 		img{
19 | 			width : 100%;
20 | 		}
21 | 	}
22 | 
23 | 	&__indicator{
24 | 		position: absolute;
25 | 		left: 0;
26 | 		right: 0;
27 | 		bottom: 10px;
28 | 		font-size:0;
29 | 		height: @indicator-size;
30 | 		line-height: @indicator-size;
31 | 		text-align: center;
32 | 		overflow: hidden;
33 | 
34 | 		span{
35 | 			display: inline-block;
36 | 			width: @indicator-size;
37 | 			height: @indicator-size;
38 | 			background-color: #fff;
39 | 			border-radius: 50%;
40 | 
41 | 			&.current{
42 | 				background-color: #4c9cee;
43 | 			}
44 | 		}
45 | 		span+span{
46 | 			margin-left: @indicator-size;
47 | 		}
48 | 	}
49 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8"/>
 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6 | <title>vue-mui</title>
 7 | <meta name="keywords" content="vuejs,vue,vue-mui,vuecomponents,vue组件,vue移动组件"/>
 8 | <meta name="description" content="mobile components for Vue.js"/>
 9 | <link rel="stylesheet" href="./dist/reset.css">
10 | <link rel="stylesheet" href="./dist/mui.min.css">
11 | <script type="text/javascript" src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js"></script>
12 | <script type="text/javascript">
13 | (function(){
14 |     if ('addEventListener' in document) {
15 |         document.addEventListener('DOMContentLoaded', function() {
16 |             FastClick.attach(document.body);
17 |         }, fals;
18 |     }
19 | }())
20 | </script>
21 | </head>
22 | <body>
23 | <app></app>
24 | <script type="text/javascript" src="./dist/test.js"></script>
25 | <script type="text/javascript" src="./example/lib/smooth-scroll.min.js"></script>
26 | <script>
27 | (function(){
28 | 	document.body.addEventListener('touchstart', function(){});
29 | 	smoothScroll.init();
30 | }())
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/src/components/prompt.vue:
--------------------------------------------------------------------------------
 1 | <style lang="less">
 2 | .t-prompt-ipt{
 3 | 	padding: 0 20px 20px;
 4 | 	input{
 5 | 		width: 100%;
 6 | 		line-height: 26px;
 7 | 		padding: 3px 10px;
 8 | 		border: 1px solid #ddd;
 9 | 		box-sizing: border-box;
10 | 	}
11 | }
12 | </style>
13 | <template>
14 | <div class="t-dimmer" v-show="show"></div>
15 | <div class="t-modal" v-show="show">
16 | 	<div class="t-modal__header">
17 | 		<h3 class="t-modal__header--tt" 
18 | 			v-show="title !== ''" 
19 | 			v-text="title"></h3>
20 | 		<p class="t-modal__header--ct" v-text="content"></p>
21 | 	</div>
22 | 	<div class="t-prompt-ipt">
23 | 		<input type="text" v-model="key">
24 | 	</div>
25 | 	<div class="t-modal__footer">
26 | 		<a class="t-modal__footer--btn" 
27 | 		   @click.prevent="notify('cancel')">取消</a>
28 | 		<a class="t-modal__footer--btn" 
29 | 		   @click.prevent="notify('confirm')">确定</a>
30 | 	</div>
31 | </div>
32 | </template>
33 | <script>
34 | export default {
35 | 	data() {
36 | 		return {
37 | 			key : ''
38 | 		}
39 | 	},
40 | 	props : {
41 | 		show : {
42 | 			type : Boolean,
43 | 			default: false,
44 | 			twoWay : true
45 | 		},
46 | 		title : {
47 | 			type : String
48 | 		},
49 | 		content : {
50 | 			type : String
51 | 		}
52 | 	},
53 | 	methods : {
54 | 		notify(type) {
55 | 			this.show = false
56 | 			this.$dispatch(type, this.key)
57 | 		}
58 | 	}
59 | }
60 | </script>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack')
 2 | 
 3 | module.exports = {
 4 |   entry: {
 5 |       test : './docs/index.js',
 6 |       mui : './src/index.js'
 7 |   },
 8 |   output: {
 9 |     path: './dist',
10 |     publicPath: 'dist/',
11 |     filename: '[name].js',
12 |     library: 'mui',
13 |     libraryTarget: 'umd'
14 |   },
15 |   module: {
16 |     loaders: [
17 |       {
18 |         test: /\.vue$/,
19 |         loader: 'vue'
20 |       },
21 |       { 
22 |         test: /\.css$/, 
23 |         loader: "style!css" 
24 |       },
25 |       {
26 |         // edit this for additional asset file types
27 |         test: /\.(png|jpg|gif)$/,
28 |         loader: 'file?name=[name].[ext]?[hash]'
29 |       }
30 |     ]
31 |   },
32 |   // example: if you wish to apply custom babel options
33 |   // instead of using vue-loader's default:
34 |   babel: {
35 |     presets: ['es2015', 'stage-0'],
36 |     plugins: ['transform-runtime']
37 |   }
38 | }
39 | 
40 | if (process.env.NODE_ENV === 'production') {
41 |   module.exports.plugins = [
42 |     new webpack.DefinePlugin({
43 |       'process.env': {
44 |         NODE_ENV: '"production"'
45 |       }
46 |     }),
47 |     new webpack.optimize.UglifyJsPlugin({
48 |       compress: {
49 |         warnings: false
50 |       }
51 |     }),
52 |     new webpack.optimize.OccurenceOrderPlugin()
53 |   ]
54 | } else {
55 |   module.exports.devtool = '#source-map'
56 | }


--------------------------------------------------------------------------------
/src/components/panel.vue:
--------------------------------------------------------------------------------
 1 | <style lang="less">
 2 | .toggle-transition{
 3 | 	-webkit-transition: height .3s ease;
 4 | 	transition: height .3s ease;
 5 | 	overflow: hidden;
 6 | }
 7 | .toggle-enter,
 8 | .toggle-leave{
 9 | 	height : 0!important;
10 | }
11 | </style>
12 | <template>
13 | <div class="t-panel">
14 | 	<header class="t-panel__hd" @click="toggle" v-text="title"></header>
15 | 	<div class="t-panel__bd" v-el:panel v-show="show" transition="toggle">
16 | 		<div class="t-panel__bd--ct">
17 | 			<slot></slot>
18 | 		</div>
19 | 	</div>
20 | </div>
21 | </template>
22 | <script>
23 | export default {
24 | 	data() {
25 | 		return {
26 | 			height : ''
27 | 		}
28 | 	},
29 | 	props : {
30 | 		type : {
31 | 			type : String,
32 | 			default : 'normal' // normal || fold
33 | 		},
34 | 		show : {
35 | 			type : Boolean,
36 | 			default : true
37 | 		},
38 | 		title : {
39 | 			type : String
40 | 		}
41 | 	},
42 | 	ready() {
43 | 		this.init()
44 | 	},
45 | 	methods : {
46 | 		toggle() {
47 | 			if (this.type !== 'normal') {
48 | 				this.show = !this.show
49 | 				//send event for accordion
50 | 				this.$dispatch('toggle', this)
51 | 			}
52 | 		},
53 | 		init() {
54 | 			if (this.type === 'normal') {
55 | 				this.show = true
56 | 			} else {
57 | 				let target = this.$els.panel
58 | 
59 | 				target.style.display = 'block'
60 | 				target.style.height = target.getBoundingClientRect().height + 'px'
61 | 
62 | 				if (!this.show) target.style.display = 'none'
63 | 			}
64 | 		}
65 | 	}
66 | }
67 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mui",
 3 |   "version": "2.0.0",
 4 |   "description": "mobile components for Vue.js",
 5 |   "main": "src/index.js",
 6 |   "devDependencies": {
 7 |     "babel-core": "^6.1.21",
 8 |     "babel-loader": "^6.1.0",
 9 |     "babel-plugin-transform-runtime": "^6.1.18",
10 |     "babel-preset-es2015": "^6.1.18",
11 |     "babel-preset-stage-0": "^6.1.18",
12 |     "babel-runtime": "^6.1.18",
13 |     "css-loader": "^0.21.0",
14 |     "file-loader": "^0.8.4",
15 |     "less": "^2.5.3",
16 |     "less-loader": "^2.2.2",
17 |     "style-loader": "^0.13.0",
18 |     "template-html-loader": "0.0.3",
19 |     "vue-hot-reload-api": "^1.2.1",
20 |     "vue-html-loader": "^1.0.0",
21 |     "vue-loader": "^7.0.3",
22 |     "webpack": "^1.12.6",
23 |     "webpack-dev-server": "^1.12.1"
24 |   },
25 |   "dependencies": {
26 |     "vue": "^1.0.8"
27 |   },
28 |   "scripts": {
29 |     "dev": "webpack-dev-server --inline --hot --quiet",
30 |     "build": "export NODE_ENV=production && webpack --progress --hide-modules"
31 |   },
32 |   "author": "mennghao",
33 |   "license": "MIT",
34 |   "directories": {
35 |     "example": "example"
36 |   },
37 |   "repository": {
38 |     "type": "git",
39 |     "url": "https://github.com/mennghao/vue-mui.git"
40 |   },
41 |   "keywords": [
42 |     "vue",
43 |     "vue-components",
44 |     "vue-mui",
45 |     "vue-mobile",
46 |     "mobile components"
47 |   ],
48 |   "bugs": {
49 |     "url": "https://github.com/mennghao/vue-mui/issues"
50 |   },
51 |   "homepage": "https://github.com/mennghao/vue-mui"
52 | }
53 | 


--------------------------------------------------------------------------------
/docs/src/switchTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-btn-switch">
 3 | 	<a href="#m-btn-switch" data-scroll><h2>Switch <span style="color:#4c9;" v-text="msg"></span></h2></a>
 4 | 	<div class="info__demo">
 5 | 		<div class="info__demo--show">
 6 | 			<switchbtn :status.sync="status"></switchbtn>
 7 | 		</div>
 8 | 	</div>
 9 | 		<pre>
10 | 			<code class="language-markup">
11 | 				<script type="language-mark-up">
12 | <switchbtn :status.sync="status"></switchbtn>
13 | 				</script>
14 | 			</code>
15 | 		</pre>
16 | 		<pre>
17 | 			<code class="language-javascript">
18 | var switchbtn = require('vue-mui').switchbtn;
19 | // or //
20 | import { switchbtn } from 'vue-mui'
21 | 
22 | new Vue({
23 | 	data() {
24 | 		return {
25 | 			status : false
26 | 		}
27 | 	},
28 | 	watch : {
29 | 		status(val) {
30 | 			...
31 | 		}
32 | 	},
33 | 	components : {
34 | 		switchbtn
35 | 	}
36 | })
37 | 			</code>
38 | 		</pre>
39 | 
40 | 	<table class="info__opt">
41 | 		<tr>
42 | 			<th>Name</th>
43 | 			<th>type</th>
44 | 			<th>default</th>
45 | 			<th>description</th>
46 | 		</tr>
47 | 		<tr>
48 | 			<td>status</td>
49 | 			<td>Boolean</td>
50 | 			<td><i>false</i></td>
51 | 			<td>is switch checked, true or false</td>
52 | 		</tr>
53 | 	</table>
54 | </div>
55 | 
56 | </template>
57 | 
58 | <script>
59 | import switchbtn from '../../src/components/switch.vue'
60 | 
61 | export default {
62 | 	data() {
63 | 		return {
64 | 			status : false,
65 | 			msg : 'close'
66 | 		}
67 | 	},
68 | 	components : {
69 | 		switchbtn
70 | 	},
71 | 	watch : {
72 | 		status(val) {
73 | 			this.msg = val ? 'open' : 'close'
74 | 		}
75 | 	}
76 | }
77 | </script>


--------------------------------------------------------------------------------
/src/css/menu.css:
--------------------------------------------------------------------------------
 1 | .t-menu {
 2 |   width: 100%;
 3 |   display: -webkit-box;
 4 |   display: -moz-box;
 5 |   display: -ms-flexbox;
 6 |   display: flex;
 7 |   -webkit-box-pack: justify;
 8 |   -moz-box-pack: justify;
 9 |   -ms-flex-pack: justify;
10 |   -webkit-box-align: center;
11 |   -moz-box-align: justify;
12 |   -ms-flex-align: center;
13 |   justify-content: space-between;
14 |   text-align: center;
15 |   background-color: #f1f1f1;
16 |   border: 1px solid #ddd;
17 |   font-size: 12px;
18 | }
19 | .t-menu > li {
20 |   position: relative;
21 |   -webkit-box-flex: 1;
22 |   -moz-box-flex: 1;
23 |   -webkit-flex: 1;
24 |   -ms-flex: 1;
25 |   flex: 1;
26 | }
27 | .t-menu > li + li {
28 |   border-left: 1px solid #ddd;
29 | }
30 | .t-menu__child {
31 |   display: none;
32 |   position: absolute;
33 |   width: 100%;
34 |   top: -8px;
35 |   -webkit-transform: translate3d(0, -100%, 0);
36 |   transform: translate3d(0, -100%, 0);
37 |   background-color: #f1f1f1;
38 |   border: 1px solid #ddd;
39 |   border-radius: 3px;
40 | }
41 | .t-menu__child:after {
42 |   position: absolute;
43 |   bottom: -5px;
44 |   left: 50%;
45 |   content: '';
46 |   display: block;
47 |   width: 0;
48 |   height: 0;
49 |   border-top: 5px solid #ddd;
50 |   border-left: 5px solid transparent;
51 |   border-right: 5px solid transparent;
52 |   -webkit-transform: translate3d(-50%, 0, 0);
53 |   transform: translate3d(-50%, 0, 0);
54 | }
55 | .t-menu__child > li + li {
56 |   border-top: 1px solid #ddd;
57 | }
58 | .t-menu a {
59 |   display: block;
60 |   line-height: 36px;
61 |   color: rgba(0, 0, 0, 0.87);
62 |   cursor: pointer;
63 | }
64 | .t-menu a.current + ul {
65 |   display: block;
66 | }
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-mui
 2 | [![](https://img.shields.io/npm/v/vue-mui.svg?style=flat-square)](https://www.npmjs.com/package/vue-mui) [![](https://img.shields.io/npm/dt/vue-mui.svg?style=flat-square)](https://www.npmjs.com/package/vue-mui)
 3 | 
 4 | > ## ❗️⛔️The project is temporarily suspended.
 5 | 
 6 | mobile components for Vue.js 1.0.*
 7 | 
 8 | ## Documentation ##
 9 | [Here](http://mui.yaobieting.com/docs/index.html)
10 | 
11 | ## Usage ##
12 | import mui.css
13 | ```HTML
14 | <link rel="stylesheet" href="./dist/mui.css">
15 | ```
16 | 
17 | ### CommonJS ###
18 | ```
19 | ➜ npm install vue-mui
20 | ```
21 | example：
22 | ```HTML
23 | <template>
24 | <a class="test-btn test-btn-confirm" @click.prevent="show=true">confirm</a>
25 | <confirm :show.sync="show"
26 | 	     :title="title" 
27 | 	     :content="content"></confirm>
28 | </template>
29 | ```
30 | 
31 | ```JavaScript
32 | var confirm = require('vue-mui').confirm;
33 | // or //
34 | import { confirm } from 'vue-mui'
35 | 
36 | export default {
37 | 	data() {
38 | 		return {
39 | 			show : false,
40 | 			title : 'This is title (optional)',
41 | 			content : 'This is content'
42 | 		}
43 | 	},
44 | 	components : {
45 | 		confirm
46 | 	},
47 | 	events : {
48 | 		confirm() {
49 | 			...code...
50 | 		},
51 | 		cancel() {
52 | 			...code...
53 | 		}
54 | 	}
55 | }
56 | ```
57 | 
58 | ### Browser ###
59 | ```HTML
60 | <div id="app">
61 | 	<alert></alert>
62 | </div>
63 | <script type="text/javascript" src="./dist/vue.js"></script>
64 | <script type="text/javascript" src="./dist/mui.js"></script>
65 | ```
66 | ```JavaScript
67 | var alert = mui.alert
68 | 
69 | var app = new Vue({
70 |     el : '#app',
71 |     components : {
72 |         'alert' : alert
73 |     }
74 | })
75 | ```
76 | 


--------------------------------------------------------------------------------
/docs/src/menuTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-menu-menu">
 3 | 	<a href="#m-menu-menu" data-scroll><h2>MenuList</h2></a>
 4 | 	<div class="info__demo">
 5 | 		<menubar :list="list"></menubar>
 6 | 	</div>
 7 | 		<pre>
 8 | 			<code class="language-markup">
 9 | 				<script type="language-mark-up">
10 | <menubar :list="list"></menubar>
11 | 				</script>
12 | 			</code>
13 | 		</pre>
14 | 		<pre>
15 | 			<code class="language-javascript">
16 | var menubar = require('vue-mui').menubar;
17 | // or //
18 | import { menubar } from 'vue-mui'
19 | 
20 | new Vue({
21 | 	data() {
22 | 		return {
23 | 			list : [{
24 | 				name : 'Hello',
25 | 				link : 'http://mui.yaobieting.com'
26 | 			},{
27 | 				name : 'World',
28 | 				child : [{
29 | 					name : 'test',
30 | 					link : 'http://mui.yaobieting.com'
31 | 				},{
32 | 					name : 'test2',
33 | 					link : 'http://mui.yaobieting.com'
34 | 				}]
35 | 			},{
36 | 				name : 'Test',
37 | 				link : 'http://mui.yaobieting.com'
38 | 			}]
39 | 		}
40 | 	},
41 | 	components : {
42 | 		menubar
43 | 	}
44 | 	
45 | })
46 | 			</code>
47 | 		</pre>
48 | 
49 | </div>
50 | 
51 | 
52 | </template>
53 | 
54 | <script>
55 | import menubar from '../../src/components/menu.vue'
56 | 
57 | export default {
58 | 	data() {
59 | 		return {
60 | 			list : [{
61 | 				name : 'Hello',
62 | 				link : 'http://mui.yaobieting.com'
63 | 			},{
64 | 				name : 'World',
65 | 				child : [{
66 | 					name : 'test',
67 | 					link : 'http://mui.yaobieting.com'
68 | 				},{
69 | 					name : 'test2',
70 | 					link : 'http://mui.yaobieting.com'
71 | 				}]
72 | 			},{
73 | 				name : 'Test',
74 | 				link : 'http://mui.yaobieting.com'
75 | 			}]
76 | 		}
77 | 	},
78 | 	components : {
79 | 		menubar
80 | 	}
81 | }
82 | </script>


--------------------------------------------------------------------------------
/src/less/menu.less:
--------------------------------------------------------------------------------
 1 | @import 'base.less';
 2 | @common-bg: #f1f1f1;
 3 | 
 4 | .t-menu{
 5 | 	width: 100%;
 6 | 	display: -webkit-box;
 7 |     display: -moz-box;
 8 |     display: -ms-flexbox;
 9 |     display: flex;
10 |     -webkit-box-pack: justify;
11 |     -moz-box-pack: justify;
12 |     -ms-flex-pack: justify;
13 |     -webkit-box-align: center;
14 |     -moz-box-align: justify;
15 |     -ms-flex-align: center;
16 |     justify-content: space-between;
17 | 	text-align: center;
18 | 	background-color: @common-bg;
19 | 	border: 1px solid @border-color;
20 | 	font-size: 12px;
21 | 
22 | 	&>li{
23 | 		position: relative;
24 | 	    -webkit-box-flex: 1;
25 | 	    -moz-box-flex: 1;
26 | 	    -webkit-flex: 1;
27 | 	    -ms-flex: 1;
28 | 	    flex: 1;
29 | 
30 | 		&+li{
31 | 			border-left: 1px solid @border-color;
32 | 		}
33 | 	}
34 | 
35 | 	&__child{
36 | 		display: none;
37 | 		position: absolute;
38 | 		width: 100%;
39 | 		top: -8px;
40 | 		-webkit-transform: translate3d(0,-100%,0);
41 | 		transform: translate3d(0,-100%,0);
42 | 		background-color: @common-bg;
43 | 		border: 1px solid @border-color;
44 | 		border-radius: 3px;
45 | 
46 | 		&:after{
47 | 			position: absolute;
48 | 			bottom: -5px;
49 | 			left : 50%;
50 | 			content : '';
51 | 			display: block;
52 | 			width: 0;
53 | 			height: 0;
54 | 			border-top: 5px solid @border-color;
55 | 			border-left : 5px solid transparent;
56 | 			border-right : 5px solid transparent;
57 | 			-webkit-transform : translate3d(-50%, 0, 0);
58 | 			transform : translate3d(-50%, 0, 0);
59 | 		}
60 | 
61 | 		&>li+li{
62 | 			border-top: 1px solid @border-color;
63 | 		}
64 | 	}
65 | 
66 | 	a{
67 | 		display : block;
68 | 		line-height: 36px;
69 | 		color: @font-color-87;
70 | 		cursor: pointer;
71 | 
72 | 		&.current+ul{
73 | 			display: block;
74 | 		}
75 | 	}
76 | }


--------------------------------------------------------------------------------
/docs/src/tabPanelTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-panel-tab-panel">
 3 | 	<a href="#m-panel-tab-panel" data-scroll><h2>tab-panel</h2></a>
 4 | 	<div class="info__demo">
 5 | 		<div class="info__demo--show">
 6 | 			<div class="demo-pannel">
 7 | 				<tabpanel :list="list"></tabpanel>
 8 | 			</div>
 9 | 		</div>
10 | 	</div>
11 | 		<!-- code -->
12 | 		<pre>
13 | 			<code class="language-markup">
14 | 				<script type="language-mark-up">
15 | <tabpanel :list="list"></tabpanel>
16 | 				</script>
17 | 			</code>
18 | 		</pre>
19 | 		<pre>
20 | 			<code class="language-javascript">
21 | var tabpanel = require('vue-mui').tabpanel;
22 | // or //
23 | import { tabpanel } from 'vue-mui'
24 | 
25 | new Vue({
26 | 	data() {
27 | 		return {
28 | 			list : [{
29 | 				title : 'tab1',
30 | 				content : 'The most distant way in the world'
31 | 			},{
32 | 				title : 'tab2',
33 | 				content : 'is not the way from birth to the end'
34 | 			}]
35 | 		}
36 | 	},
37 | 	components : {
38 | 		tabpanel
39 | 	}
40 | })				
41 | 			</code>
42 | 		</pre>
43 | 
44 | 	<table class="info__opt">
45 | 		<tr>
46 | 			<th>Name</th>
47 | 			<th>type</th>
48 | 			<th>default</th>
49 | 			<th>description</th>
50 | 		</tr>
51 | 		<tr>
52 | 			<td>list</td>
53 | 			<td>Array</td>
54 | 			<td></td>
55 | 			<td>
56 | 				<p>To render the list</p>
57 | 			</td>
58 | 		</tr>
59 | 	</table>
60 | 
61 | </div>
62 | </template>
63 | 
64 | <script>
65 | import tabpanel from '../../src/components/tabPanel.vue'
66 | 
67 | export default {
68 | 	data() {
69 | 		return {
70 | 			list : [{
71 | 				title : 'tab1',
72 | 				content : 'The most distant way in the world'
73 | 			},{
74 | 				title : 'tab2',
75 | 				content : 'is not the way from birth to the end'
76 | 			}]
77 | 		}
78 | 	},
79 | 	components : {
80 | 		tabpanel
81 | 	}
82 | }
83 | </script>


--------------------------------------------------------------------------------
/docs/src/btnTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-btn-btn">
 3 | 	<a href="#m-btn-btn" data-scroll><h2>botton</h2></a>
 4 | 	<div class="info__demo">
 5 | 		
 6 | 		<div class="info__demo--show">		
 7 | 			<btn type="normal" :cb="test">button 1</btn>
 8 | 		</div>
 9 | 		<div class="info__demo--show">
10 | 			<btn type="warn" :cb="test2">button 2</btn>
11 | 		</div>
12 | 		<div class="info__demo--show">
13 | 			<btn>button 3</btn>
14 | 		</div>
15 | 	</div>
16 | 		<pre>
17 | 			<code class="language-markup">
18 | 				<script type="language-mark-up">
19 | <btn type="normal" :cb="callback">button 1</btn>
20 | <btn type="warn" :cb="callback2">button 2</btn>
21 | <btn>button 3</btn>
22 | 				</script>
23 | 			</code>
24 | 		</pre>
25 | 		<pre>
26 | 			<code class="language-javascript">
27 | var btn = require('vue-mui').btn;
28 | // or //
29 | import { btn } from 'vue-mui'
30 | 
31 | new Vue({
32 | 	components : {
33 | 		btn
34 | 	},
35 | 	methods : {
36 | 		callback : function(){
37 | 			....code....
38 | 		}
39 | 	}
40 | })
41 | 			</code>
42 | 		</pre>
43 | 
44 | 	<table class="info__opt">
45 | 		<tr>
46 | 			<th>Name</th>
47 | 			<th>type</th>
48 | 			<th width="350">description</th>
49 | 		</tr>
50 | 		<tr>
51 | 			<td>type</td>
52 | 			<td>String</td>
53 | 			<td>Type of button <i>normal</i><i>warn</i><i>default</i></td>
54 | 		</tr>
55 | 		<tr>
56 | 			<td>callback</td>
57 | 			<td>Function</td>
58 | 			<td><p>A callback Function when you click the button component</p></td>
59 | 		</tr>
60 | 	</table>
61 | </div>
62 | </template>
63 | 
64 | <script>
65 | import btn from '../../src/components/btn.vue'
66 | 
67 | export default {
68 | 	components : {
69 | 		btn
70 | 	},
71 | 	methods : {
72 | 		test() {
73 | 			alert('Click normal button')
74 | 		},
75 | 		test2() {
76 | 			alert('Click warn button')
77 | 		}
78 | 	}
79 | }
80 | </script>


--------------------------------------------------------------------------------
/docs/src/accordionTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-panel-accordion">
 3 | 	<a href="#m-panel-accordion" data-scroll><h2>accordion</h2></a>
 4 | 	<div class="info__demo">
 5 | 		<!-- accordion -->
 6 | 		<accordion>
 7 | 			<panel type="fold" title="Title 1">
 8 | 				<div>Test Content 1</div>
 9 | 			</panel>
10 | 			<panel type="fold" title="Title 2" :show="false">
11 | 				<div>Test Content 2</div>
12 | 			</panel>
13 | 			<panel type="fold" title="Title 3" :show="false">
14 | 				<div>Test Content 3</div>
15 | 			</panel>
16 | 			<panel type="fold" title="Title 4" :show="false">
17 | 				<div>Test Content 4</div>
18 | 			</panel>
19 | 		</accordion>
20 | 	</div>
21 | 		<!-- code -->
22 | 		<pre>
23 | 			<code class="language-markup">
24 | 				<script type="language-mark-up">
25 | <accordion>
26 | 	<panel type="fold" title="Title 1">
27 | 		<div>Test Content 1</div>
28 | 	</panel>
29 | 	<panel type="fold" title="Title 2" :show="false">
30 | 		<div>Test Content 2</div>
31 | 	</panel>
32 | 	<panel type="fold" title="Title 3" :show="false">
33 | 		<div>Test Content 3</div>
34 | 	</panel>
35 | 	<panel type="fold" title="Title 4" :show="false">
36 | 		<div>Test Content 4</div>
37 | 	</panel>
38 | </accordion>		
39 | 				</script>
40 | 			</code>
41 | 		</pre>
42 | 		<pre>
43 | 			<code class="language-javascript">
44 | var panel = require('vue-mui').panel;
45 | var accordion = require('vue-mui').accordion;
46 | // or //
47 | import { panel } from 'vue-mui'
48 | import { accordion } from 'vue-mui'
49 | 
50 | new Vue({
51 | 	components : {
52 | 		panel,
53 | 		accordion
54 | 	}
55 | })	
56 | 			</code>
57 | 		</pre>
58 | 	
59 | 	<div class="hint"><i>notice:</i>must import 'panel' component</div>
60 | 
61 | </div>
62 | </template>
63 | 
64 | <script>
65 | import panel from '../../src/components/panel.vue'
66 | import accordion from '../../src/components/accordion.vue'
67 | 
68 | export default {
69 | 	components : {
70 | 		panel,
71 | 		accordion
72 | 	}
73 | }
74 | </script>


--------------------------------------------------------------------------------
/docs/src/progressTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-progress-bar">
 3 | 	<a href="#m-progress-bar" data-scroll><h2>Progress bar</h2></a>
 4 | 	<div class="info__demo">
 5 | 		
 6 | 		<a class="test-btn test-btn-ilb test-btn-blue" @click.prevent="status='start'">Start</a>
 7 | 		<a class="test-btn test-btn-ilb test-btn-green" @click.prevent="status='done'">Done</a>
 8 | 		<a class="test-btn test-btn-ilb test-btn-black" @click.prevent="setNum">random</a>
 9 | 		<progress :status="status" :num="num"></progress>
10 | 	</div>
11 | 		<pre>
12 | 			<code class="language-markup">
13 | 				<script type="language-mark-up">
14 | <progress :status="status" :num="num"></progress>
15 | 				</script>
16 | 			</code>
17 | 		</pre>
18 | 		<pre>
19 | 			<code class="language-javascript">
20 | var progress = require('vue-mui').progress;
21 | // or //
22 | import { progress } from 'vue-mui'
23 | 
24 | new Vue({
25 | 	components : {
26 | 		'progress' : Progress
27 | 	}
28 | })
29 | 			</code>
30 | 		</pre>
31 | 
32 | 	<table class="info__opt">
33 | 		<tr>
34 | 			<th>Name</th>
35 | 			<th>type</th>
36 | 			<th>default</th>
37 | 			<th>description</th>
38 | 		</tr>
39 | 		<tr>
40 | 			<td>status</td>
41 | 			<td>String</td>
42 | 			<td>hide</td>
43 | 			<td>whether to show progress<i>hide</i><i>start</i><i>done</i></td>
44 | 		</tr>
45 | 		<tr>
46 | 			<td>num</td>
47 | 			<td>Number</td>
48 | 			<td>0</td>
49 | 			<td><i>(optional)</i></td>
50 | 		</tr>
51 | 		<tr>
52 | 			<td>color</td>
53 | 			<td>String</td>
54 | 			<td>#4c9cee</td>
55 | 			<td><i>(optional)</i></td>
56 | 		</tr>
57 | 	</table>
58 | </div>
59 | </template>
60 | 
61 | <script>
62 | import progress from '../../src/components/progress.vue'
63 | 
64 | export default {
65 | 	data() {
66 | 		return {
67 | 			status : 'hide',
68 | 			num : 100
69 | 		}
70 | 	},
71 | 	components : {
72 | 		progress
73 | 	},
74 | 	methods : {
75 | 		setNum() {
76 | 			this.num = Math.floor(Math.random() * 100)
77 | 		}
78 | 	}
79 | }
80 | </script>


--------------------------------------------------------------------------------
/docs/src/alertTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-modal-alert">
 3 | 	<a href="#m-modal-alert" data-scroll><h2>Alert</h2></a>
 4 | 	<p class="info__bd--hint">A rendered 'alert' with title, content, and set of actions in the footer.</p>
 5 | 	<div class="info__demo">
 6 | 		
 7 | 		<a class="test-btn test-btn-blue" data-color="blue" @click.prevent="show=true">alert</a>
 8 | 		<alert :show.sync="show"
 9 | 			   :title="title"
10 | 			   :content="content"></alert>
11 | 	</div>
12 | 	<pre>
13 | 		<code class="language-markup">
14 | 			<script type="language-mark-up">
15 | <alert :show.sync="show"
16 | 	   :title="title"
17 | 	   :content="content"></alert>
18 | 			</script>
19 | 		</code>
20 | 	</pre>
21 | 	<pre>
22 | 		<code class="language-javascript">
23 | var alert = require('vue-mui').alert;
24 | // or //
25 | import { alert } from 'vue-mui'
26 | 
27 | new Vue({
28 | 	data() {
29 | 		return {
30 | 			show : false,
31 | 			title : 'This is title (optional)',
32 | 			content : 'This is content'
33 | 		}
34 | 	},
35 | 	components : {
36 | 		alert
37 | 	}
38 | })
39 | 		</code>
40 | 	</pre>
41 | 
42 | 	<table class="info__opt">
43 | 		<tr>
44 | 			<th>Name</th>
45 | 			<th>type</th>
46 | 			<th>default</th>
47 | 			<th>description</th>
48 | 		</tr>
49 | 		<tr>
50 | 			<td>show</td>
51 | 			<td>Boolean</td>
52 | 			<td><i>false</i></td>
53 | 			<td>Whether to show this component</td>
54 | 		</tr>
55 | 		<tr>
56 | 			<td>title</td>
57 | 			<td>String</td>
58 | 			<td></td>
59 | 			<td><i>(optional)</i>Title of component</td>
60 | 		</tr>
61 | 		<tr>
62 | 			<td>content</td>
63 | 			<td>String</td>
64 | 			<td></td>
65 | 			<td>Content of component</td>
66 | 		</tr>
67 | 	</table>
68 | </div>
69 | </template>
70 | <script>
71 | import alert from '../../src/components/alert.vue'
72 | 
73 | export default {
74 | 	data() {
75 | 		return {
76 | 			show : false,
77 | 			title : '测试标题',
78 | 			content : '测试内容'
79 | 		}
80 | 	},
81 | 	components : {
82 | 		alert
83 | 	}
84 | }
85 | </script>


--------------------------------------------------------------------------------
/docs/src/actionsTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="info__bd" id="m-modal-confirm">
 3 | 	<a href="#m-modal-confirm" data-scroll><h2>Actions</h2></a>
 4 | 	<p class="info__bd--hint">simulate IOS action list</p>
 5 | 	<div class="info__demo">
 6 | 		
 7 | 		<a class="test-btn test-btn-blue" data-color="blue" @click.prevent="show=true">actions</a>
 8 | 		<actions :show.sync="show" title="标题">
 9 | 			<li @click="test(1)">alert 1</li>
10 | 			<li @click="test(2)">alert 2</li>
11 | 		</actions>
12 | 	</div>
13 | 	<pre>
14 | 		<code class="language-markup">
15 | 			<script type="language-mark-up">
16 | <actions :show.sync="show" 
17 | 		 title="标题">
18 | 	<li @click="test(1)">alert 1</li>
19 | 	<li @click="test(2)">alert 2</li>
20 | </actions>
21 | 			</script>
22 | 		</code>
23 | 	</pre>
24 | 	<pre>
25 | 		<code class="language-javascript">
26 | var actions = require('vue-mui').actions;
27 | // or //
28 | import { actions } from 'vue-mui'
29 | 
30 | new Vue({
31 | 	data() {
32 | 		return {
33 | 			show : false
34 | 		}
35 | 	},
36 | 	components : {
37 | 		actions
38 | 	},
39 | 	methods : {
40 | 		test(data) {
41 | 			alert(data)
42 | 			this.show = false
43 | 		}
44 | 	}
45 | })
46 | 		</code>
47 | 	</pre>
48 | 
49 | 	<table class="info__opt">
50 | 		<tr>
51 | 			<th>Name</th>
52 | 			<th>type</th>
53 | 			<th>default</th>
54 | 			<th>description</th>
55 | 		</tr>
56 | 		<tr>
57 | 			<td>show</td>
58 | 			<td>Boolean</td>
59 | 			<td><i>false</i></td>
60 | 			<td>Whether to show this component</td>
61 | 		</tr>
62 | 		<tr>
63 | 			<td>title</td>
64 | 			<td>String</td>
65 | 			<td></td>
66 | 			<td><i>(optional)</i>Title of component</td>
67 | 		</tr>
68 | 
69 | 	</table>
70 | </div>
71 | </template>
72 | <script>
73 | import actions from '../../src/components/actions.vue'
74 | 
75 | export default {
76 | 	data() {
77 | 		return {
78 | 			show : false
79 | 		}
80 | 	},
81 | 	components : {
82 | 		actions
83 | 	},
84 | 	methods : {
85 | 		test(data) {
86 | 			alert(data)
87 | 			this.show = false
88 | 		}
89 | 	}
90 | }
91 | </script>


--------------------------------------------------------------------------------
/docs/src/panelTest.vue:
--------------------------------------------------------------------------------
 1 | <style lang="less">
 2 | .demo-pannel+.demo-pannel{
 3 | 	margin-top: 10px;
 4 | }
 5 | </style>
 6 | <template>
 7 | <div class="info__bd" id="m-panel-panel">
 8 | 	<a href="#m-panel-panel" data-scroll><h2>Panel</h2></a>
 9 | 	<div class="info__demo">
10 | 		<div class="demo-pannel">
11 | 			<!-- 演示 普通面板 -->
12 | 			<panel :show="false" title="default panel">
13 | 				<div>
14 | 					<p>The most distant way in the world</p>
15 | 					<p>is not the way from birth to the end</p>
16 | 				</div>
17 | 			</panel>
18 | 		</div>
19 | 		<div class="demo-pannel">
20 | 			<!-- 演示 折叠面板 -->
21 | 			<panel :show="false" title="folding panel" type="fold">
22 | 				<div>
23 | 					<p>The most distant way in the world</p>
24 | 					<p>is not the way from birth to the end</p>
25 | 				</div>
26 | 			</panel>
27 | 		</div>
28 | 	</div>
29 | 		<!-- code -->
30 | 		<pre>
31 | 			<code class="language-markup">
32 | 				<script type="language-mark-up">
33 | <panel :show="false" title="default panel">
34 | 	<div>
35 | 		<p>The most distant way in the world</p>
36 | 		<p>is not the way from birth to the end</p>
37 | 	</div>
38 | </panel>
39 | 
40 | <panel :show="false" title="folding panel" type="fold">
41 | 	<div>
42 | 		<p>The most distant way in the world</p>
43 | 		<p>is not the way from birth to the end</p>
44 | 	</div>
45 | </panel>			
46 | 				</script>
47 | 			</code>
48 | 		</pre>
49 | 		<pre>
50 | 			<code class="language-javascript">
51 | var panel = require('vue-mui').panel
52 | // or //
53 | import { panel } from 'vue-mui'
54 | 
55 | new Vue({
56 | 	components : {
57 | 		panel
58 | 	}
59 | })				
60 | 			</code>
61 | 		</pre>
62 | 	
63 | 	<table class="info__opt">
64 | 		<tr>
65 | 			<th>Name</th>
66 | 			<th>type</th>
67 | 			<th>default</th>
68 | 			<th>description</th>
69 | 		</tr>
70 | 		<tr>
71 | 			<td>type</td>
72 | 			<td>String</td>
73 | 			<td>normal</td>
74 | 			<td>
75 | 				<p>type of panel <i>optional</i></p>
76 | 				<p>normal : normal panel</p>
77 | 				<p>flod : folding panel</p>
78 | 			</td>
79 | 		</tr>
80 | 		<tr>
81 | 			<td>title</td>
82 | 			<td>String</td>
83 | 			<td></td>
84 | 			<td>Title of this component</td>
85 | 		</tr>
86 | 	</table>
87 | 
88 | </div>
89 | </template>
90 | <script>
91 | import panel from '../../src/components/panel.vue'
92 | 
93 | export default {
94 | 	components : {
95 | 		panel
96 | 	}
97 | }
98 | </script>


--------------------------------------------------------------------------------
/src/components/progress.vue:
--------------------------------------------------------------------------------
  1 | <style>
  2 | .t-progress-bar{
  3 | 	position: fixed;
  4 | 	top:0;
  5 | 	left:0;
  6 | 	width: 100%;
  7 | 	height:2px;
  8 | 	z-index: 999;
  9 | 	-webkit-transition: all 200ms ease;
 10 | 	transition: all 200ms ease;
 11 | }
 12 | </style>
 13 | <template>
 14 | <div class="t-progress-bar" :show="show" :style="{backgroundColor:color,transform:'translate3d(-100%,0,0)'}"></div>
 15 | </template>
 16 | <script>
 17 | export default {
 18 | 	data() {
 19 | 		return {
 20 | 			timer : null,
 21 | 			size : 100,
 22 | 			show : false
 23 | 		}
 24 | 	},
 25 | 	props : {
 26 | 		color : {
 27 | 			type : String,
 28 | 			default : '#4c9cee'
 29 | 		},
 30 | 		status : {
 31 | 			type : String, //hide start done
 32 | 			default : 'hide'
 33 | 		},
 34 | 		num : {
 35 | 			type : Number,
 36 | 			default : 100
 37 | 		}
 38 | 	},
 39 | 	watch : {
 40 | 		status(val) {
 41 | 			let that = this
 42 | 			return {
 43 | 				'hide' : that.hide,
 44 | 				'start' : that.start,
 45 | 				'done' : that.done
 46 | 			}[val].call(that)
 47 | 		},
 48 | 		/**
 49 | 		 * [if the num change, set progress bar size ,restart progress bar]
 50 | 		 * @param  {[type]} val [description]
 51 | 		 * @return {[type]}     [description]
 52 | 		 */
 53 | 		num(val) {
 54 | 			if (val !== 100) {
 55 | 				clearInterval(this.timer);
 56 | 				this.size = 100 - this.num; //get size by num
 57 | 				this.setSize(this.size);
 58 | 				this.start();
 59 | 			} else {
 60 | 				this.done();
 61 | 			}
 62 | 		}
 63 | 	},
 64 | 	methods : {
 65 | 		start() {
 66 | 			let that = this,
 67 | 				count = that.size
 68 | 
 69 | 			that.show = true
 70 | 
 71 | 			that.timer = setInterval(() => {
 72 | 				if (count > 10) {
 73 | 					count -= 1
 74 | 					that.setSize.call(that, count)
 75 | 				} else {
 76 | 					clearInterval(that.timer)
 77 | 				}
 78 | 			}, 1000)
 79 | 		},
 80 | 		done() {
 81 | 			let that = this
 82 | 
 83 | 			that.setSize.call(that, 0)
 84 | 			clearInterval(this.timer)
 85 | 			setTimeout(() => {
 86 | 
 87 | 				that.show = false
 88 | 				that.setSize.call(that, 100) // fix position
 89 | 				that.size = 100
 90 | 			}, 200)
 91 | 		},
 92 | 		hide() {
 93 | 			this.show = false
 94 | 		},
 95 | 		setSize(val) {
 96 | 			this.$el.style.transform = 'translate3d(-'+ val +'%,0,0)'
 97 | 			this.$el.style.webkitTransform = 'translate3d(-'+ val +'%,0,0)'
 98 | 		}
 99 | 	}
100 | }
101 | </script>


--------------------------------------------------------------------------------
/src/css/panel.css:
--------------------------------------------------------------------------------
  1 | header,
  2 | a,
  3 | li,
  4 | div {
  5 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  6 | }
  7 | .t-panel {
  8 |   font-size: 14px;
  9 |   border: 1px solid #ddd;
 10 |   border-bottom: 0;
 11 |   background-color: #fff;
 12 | }
 13 | .t-panel__hd {
 14 |   padding: 0 .5rem;
 15 |   line-height: 2.5;
 16 |   color: rgba(0, 0, 0, 0.87);
 17 |   background-color: #f5f5f5;
 18 |   border-bottom: 1px solid #ddd;
 19 | }
 20 | .t-panel__bd {
 21 |   border-bottom: 1px solid #ddd;
 22 | }
 23 | .t-panel__bd--ct {
 24 |   padding: 10px;
 25 | }
 26 | /**
 27 |  * tab-panel
 28 |  */
 29 | .t-tab {
 30 |   box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
 31 |   border-radius: 3px;
 32 | }
 33 | .t-tab nav {
 34 |   width: 100%;
 35 |   display: -webkit-box;
 36 |   display: -moz-box;
 37 |   display: -ms-flexbox;
 38 |   display: flex;
 39 |   -webkit-box-pack: justify;
 40 |   -moz-box-pack: justify;
 41 |   -ms-flex-pack: justify;
 42 |   -webkit-box-align: center;
 43 |   -moz-box-align: justify;
 44 |   -ms-flex-align: center;
 45 |   justify-content: space-between;
 46 |   text-align: center;
 47 |   line-height: 2.5;
 48 | }
 49 | .t-tab nav a {
 50 |   position: relative;
 51 |   display: block;
 52 |   -webkit-box-flex: 1;
 53 |   -moz-box-flex: 1;
 54 |   -webkit-flex: 1;
 55 |   -ms-flex: 1;
 56 |   flex: 1;
 57 |   color: rgba(0, 0, 0, 0.54);
 58 | }
 59 | .t-tab nav a:after {
 60 |   display: block;
 61 |   content: '';
 62 |   position: absolute;
 63 |   box-sizing: border-box;
 64 |   width: 100%;
 65 |   bottom: 0;
 66 |   left: 0;
 67 |   -webkit-transform: scaleY(0.5);
 68 |   transform: scaleY(0.5);
 69 |   -webkit-transform-origin: 0 0;
 70 |   transform-origin: 0 0;
 71 |   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 72 |   border-color: #eee;
 73 | }
 74 | .t-tab nav a.current {
 75 |   background-color: #f5f5f5;
 76 |   color: #333;
 77 | }
 78 | .t-tab nav a + a:before {
 79 |   display: block;
 80 |   content: '';
 81 |   position: absolute;
 82 |   box-sizing: border-box;
 83 |   height: 100%;
 84 |   left: 0;
 85 |   top: 0;
 86 |   -webkit-transform: scaleX(0.5);
 87 |   transform: scaleX(0.5);
 88 |   -webkit-transform-origin: 0 0;
 89 |   transform-origin: 0 0;
 90 |   border-left: 1px solid rgba(0, 0, 0, 0.2);
 91 |   border-color: #eee;
 92 | }
 93 | .t-tab__bd {
 94 |   display: none;
 95 |   padding: 10px;
 96 | }
 97 | .t-tab__bd.current {
 98 |   display: block;
 99 | }
100 | 


--------------------------------------------------------------------------------
/dist/reset.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,  textarea, p, blockquote, th, td/*input, button,*/ {
  3 | 	margin: 0;
  4 | 	padding: 0;
  5 | 	font-size: 100%;
  6 | 	vertical-align: baseline;
  7 | 	background: transparent;
  8 | }
  9 | input {
 10 |   -webkit-appearance: none;
 11 |   outline: 0;
 12 | }
 13 | fieldset, img, iframe {
 14 | 	border:0;
 15 | }
 16 | 
 17 | abbr, acronym {
 18 | 	border:0;
 19 | 	font-variant:normal;
 20 | }
 21 | 
 22 | /* remember to define focus styles! */
 23 | :focus {
 24 |     outline: 0 none;
 25 | }
 26 | 
 27 | /* tables still need 'cellspacing="0"' in the markup */
 28 | table {
 29 |     border-collapse: collapse;
 30 |     border-spacing: 0;
 31 | }
 32 | caption, th {
 33 |     text-align: left;
 34 | }
 35 | 
 36 | /*
 37 | 	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
 38 | */
 39 | address, caption, cite, code, dfn, em, strong, th, var, optgroup {
 40 | 	font-style:normal;
 41 | 	font-weight:normal;
 42 | }
 43 | 
 44 | h1, h2, h3, h4, h5, h6 {
 45 | 	font-size:100%;
 46 | 	font-weight:normal;
 47 | }
 48 | 
 49 | input, button, textarea, select, optgroup, option {
 50 |     font-family: inherit;
 51 |     font-size: inherit;
 52 |     font-style: inherit;
 53 |     font-weight: inherit;
 54 | }
 55 | 
 56 | /*to enable resizing for IE*/
 57 | input, button, textarea, select, code, kbd, samp, tt {
 58 |     *font-size: 100%;
 59 | }
 60 | 
 61 | del {
 62 |     text-decoration: line-through;
 63 | }
 64 | 
 65 | ul {
 66 | 	list-style:none;
 67 | }
 68 | 
 69 | blockquote, q {
 70 |     quotes: none;
 71 | }
 72 | blockquote:before, blockquote:after,
 73 | q:before, q:after {
 74 |     content: none;
 75 | }
 76 | 
 77 | :link, :visited {
 78 |     text-decoration: none;
 79 | }
 80 | 
 81 | /* to preserve line-height and selector appearance */
 82 | sup {
 83 | 	vertical-align:text-top;
 84 | }
 85 | sub {
 86 | 	vertical-align:text-bottom;
 87 | }
 88 | sub, sup {
 89 |     font-size: 60%;
 90 | }
 91 | 
 92 | /*because legend doesn't inherit in IE */
 93 | legend {
 94 | 	color:#222;
 95 | }
 96 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 97 | 	display: block;
 98 | }
 99 | body{
100 | 	font-family:monaco, arial, "Microsoft YaHei";
101 | 	background-color: #fff;
102 | }
103 | a{-webkit-tap-highlight-color:rgba(0,0,0,0); }


--------------------------------------------------------------------------------
/docs/lib/prism.css:
--------------------------------------------------------------------------------
  1 | /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
  2 | /**
  3 |  * okaidia theme for JavaScript, CSS and HTML
  4 |  * Loosely based on Monokai textmate theme by http://www.monokai.nl/
  5 |  * @author ocodia
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	color: #525252;
 11 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 12 | 	direction: ltr;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 	word-wrap: normal;
 18 | 	line-height: 1.5;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | }
 29 | 
 30 | /* Code blocks */
 31 | pre[class*="language-"] {
 32 | 	padding: 0 1em;
 33 | 	margin: 1em 0;
 34 | 	overflow: auto;
 35 | 	font-size: 12px;
 36 | }
 37 | 
 38 | :not(pre) > code[class*="language-"],
 39 | pre[class*="language-"] {
 40 | 	background: #f8f8f8;
 41 | 	border-radius: 3px;
 42 | }
 43 | 
 44 | /* Inline code */
 45 | :not(pre) > code[class*="language-"] {
 46 | 	padding: .1em;
 47 | 	border-radius: .3em;
 48 | }
 49 | 
 50 | .token.comment,
 51 | .token.prolog,
 52 | .token.doctype,
 53 | .token.cdata {
 54 | 	color: slategray;
 55 | }
 56 | 
 57 | .token.punctuation {
 58 | 	color: #2973b7;
 59 | }
 60 | 
 61 | .namespace {
 62 | 	opacity: .7;
 63 | }
 64 | 
 65 | .token.property,
 66 | .token.tag,
 67 | .token.constant,
 68 | .token.symbol,
 69 | .token.deleted {
 70 | 	color: #2973b7;
 71 | }
 72 | 
 73 | .token.boolean,
 74 | .token.number {
 75 | 	color: #ae81ff;
 76 | }
 77 | 
 78 | .token.selector,
 79 | .token.attr-name,
 80 | .token.string,
 81 | .token.char,
 82 | .token.builtin,
 83 | .token.inserted {
 84 | 	color: #4c9;
 85 | }
 86 | 
 87 | .token.operator,
 88 | .token.entity,
 89 | .token.url,
 90 | .language-css .token.string,
 91 | .style .token.string,
 92 | .token.variable {
 93 | 	color: #525252;
 94 | }
 95 | 
 96 | .token.atrule,
 97 | .token.attr-value,
 98 | .token.function {
 99 | 	color: #f92672;
100 | }
101 | 
102 | .token.keyword {
103 | 	color: #f92672;
104 | }
105 | 
106 | .token.regex,
107 | .token.important {
108 | 	color: #fd971f;
109 | }
110 | 
111 | .token.important,
112 | .token.bold {
113 | 	font-weight: bold;
114 | }
115 | .token.italic {
116 | 	font-style: italic;
117 | }
118 | 
119 | .token.entity {
120 | 	cursor: help;
121 | }
122 | 
123 | 


--------------------------------------------------------------------------------
/docs/src/slideTest.vue:
--------------------------------------------------------------------------------
  1 | <style lang="less">
  2 | #demo-slide-warn{
  3 | 	display: none;
  4 | 	color: #f92672;
  5 | }
  6 | @media screen and (min-width : 1000px) {
  7 | 	#demo-slide-warn{
  8 | 		display: block;
  9 | 	}
 10 | 	#demo-slide{
 11 | 		display: none;
 12 | 	}
 13 | }
 14 | </style>
 15 | 
 16 | <template>
 17 | <div class="info__bd" id="m-slide-slide">
 18 | 	<a href="#m-slide-slide" data-scroll><h2>slide</h2></a>
 19 | 	<p class="info__bd--hint" id="demo-slide-warn">Touch events only, you can be tested on the your mobile phone</p>
 20 | 	<div class="info__demo">
 21 | 		<div class="info__demo--show" id="demo-slide">
 22 | 			<slide :list="list"></slide>
 23 | 		</div>
 24 | 	</div>
 25 | 		<!-- code -->
 26 | 		<pre>
 27 | 			<code class="language-markup">
 28 | 				<script type="language-mark-up">
 29 | <slide :list="list"></slide>			
 30 | 				</script>
 31 | 			</code>
 32 | 		</pre>
 33 | 		<pre>
 34 | 			<code class="language-javascript">
 35 | var slide = require('vue-mui').slide;
 36 | // or //
 37 | import { slide } from 'vue-mui'
 38 | 
 39 | new Vue({
 40 | 	data() {
 41 | 		return {
 42 | 			list : [{
 43 | 				img : 'http://7u2iwk.com2.z0.glb.qiniucdn.com/banner5.png',
 44 | 				link : 'http://www.baidu.com'
 45 | 			},{
 46 | 				img : 'http://7u2iwk.com2.z0.glb.qiniucdn.com/banner6.jpg',
 47 | 				link : 'http://www.baidu.com'
 48 | 			},{
 49 | 				img : 'http://7u2iwk.com2.z0.glb.qiniucdn.com/banner1.jpg',
 50 | 				link : 'http://www.baidu.com'
 51 | 			}]
 52 | 		}
 53 | 	},
 54 | 	components : {
 55 | 		slide
 56 | 	}
 57 | })			
 58 | 			</code>
 59 | 		</pre>
 60 | 	
 61 | 	<table class="info__opt">
 62 | 		<tr>
 63 | 			<th>Name</th>
 64 | 			<th>type</th>
 65 | 			<th>default</th>
 66 | 			<th>description</th>
 67 | 		</tr>
 68 | 		<tr>
 69 | 			<td>list</td>
 70 | 			<td>array</td>
 71 | 			<td></td>
 72 | 			<td>
 73 | 				<p>pictures url set</p>
 74 | 			</td>
 75 | 		</tr>
 76 | 	</table>
 77 | 
 78 | </div>
 79 | </template>
 80 | 
 81 | <script>
 82 | import slide from '../../src/components/slide.vue'
 83 | 
 84 | export default {
 85 | 	data() {
 86 | 		return {
 87 | 			list : [{
 88 | 				img : 'http://7u2iwk.com2.z0.glb.qiniucdn.com/banner5.png',
 89 | 				link : 'http://www.baidu.com'
 90 | 			},{
 91 | 				img : 'http://7u2iwk.com2.z0.glb.qiniucdn.com/banner6.jpg',
 92 | 				link : 'http://www.baidu.com'
 93 | 			},{
 94 | 				img : 'http://7u2iwk.com2.z0.glb.qiniucdn.com/banner1.jpg',
 95 | 				link : 'http://www.baidu.com'
 96 | 			}]
 97 | 		}
 98 | 	},
 99 | 	components : {
100 | 		slide
101 | 	}
102 | }
103 | </script>


--------------------------------------------------------------------------------
/docs/src/confirmTest.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="info__bd" id="m-modal-confirm">
  3 | 	<a href="#m-modal-confirm" data-scroll><h2>Confirm</h2></a>
  4 | 	<div class="info__demo">
  5 | 		
  6 | 		<a class="test-btn test-btn-blue" data-color="blue" @click.prevent="show=true">confirm</a>
  7 | 		<confirm :show.sync="show"
  8 | 			     :title="title" 
  9 | 			     :content="content"></confirm>
 10 | 	</div>
 11 | 	<pre>
 12 | 		<code class="language-markup">
 13 | 			<script type="language-mark-up">
 14 | <confirm :show.sync="show"
 15 | 	     :title="title" 
 16 | 	     :content="content"></confirm>
 17 | 			</script>
 18 | 		</code>
 19 | 	</pre>
 20 | 	<pre>
 21 | 		<code class="language-javascript">
 22 | var confirm = require('vue-mui').confirm;
 23 | // or //
 24 | import { confirm } from 'vue-mui'
 25 | 
 26 | new Vue({
 27 | 	data() {
 28 | 		return {
 29 | 			show : false,
 30 | 			title : 'This is title (optional)',
 31 | 			content : 'This is content'
 32 | 		}
 33 | 	},
 34 | 	components : {
 35 | 		confirm
 36 | 	},
 37 | 	events : {
 38 | 		confirm() {
 39 | 			...code...
 40 | 		},
 41 | 		cancel() {
 42 | 			...code...
 43 | 		}
 44 | 	}
 45 | })
 46 | 		</code>
 47 | 	</pre>
 48 | 
 49 | 	<table class="info__opt">
 50 | 		<tr>
 51 | 			<th>Name</th>
 52 | 			<th>type</th>
 53 | 			<th>default</th>
 54 | 			<th>description</th>
 55 | 		</tr>
 56 | 		<tr>
 57 | 			<td>show</td>
 58 | 			<td>Boolean</td>
 59 | 			<td><i>false</i></td>
 60 | 			<td>Whether to show this component</td>
 61 | 		</tr>
 62 | 		<tr>
 63 | 			<td>title</td>
 64 | 			<td>String</td>
 65 | 			<td></td>
 66 | 			<td><i>(optional)</i>Title of component</td>
 67 | 		</tr>
 68 | 		<tr>
 69 | 			<td>content</td>
 70 | 			<td>String</td>
 71 | 			<td></td>
 72 | 			<td>Content of component</td>
 73 | 		</tr>
 74 | 		<tr>
 75 | 			<td>confirm</td>
 76 | 			<td>Function</td>
 77 | 			<td></td>
 78 | 			<td>A callback Function when you click the modal confirm button</td>
 79 | 		</tr>
 80 | 		<tr>
 81 | 			<td>cancel</td>
 82 | 			<td>Function</td>
 83 | 			<td></td>
 84 | 			<td>A callback Function when you click the modal cancel button</td>
 85 | 		</tr>
 86 | 
 87 | 	</table>
 88 | </div>
 89 | </template>
 90 | <script>
 91 | import confirm from '../../src/components/confirm.vue'
 92 | 
 93 | export default {
 94 | 	data() {
 95 | 		return {
 96 | 			show : false,
 97 | 			title : '测试标题',
 98 | 			content : '测试内容'
 99 | 		}
100 | 	},
101 | 	components : {
102 | 		confirm
103 | 	},
104 | 	events : {
105 | 		confirm() {
106 | 			alert('点击了确定')
107 | 		},
108 | 		cancel() {
109 | 			alert('点击了取消')
110 | 		}
111 | 	}
112 | }
113 | </script>


--------------------------------------------------------------------------------
/docs/src/promptTest.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="info__bd" id="m-modal-prompt">
  3 | 	<a href="#m-modal-prompt" data-scroll><h2>Prompt</h2></a>
  4 | 	<div class="info__demo">
  5 | 		
  6 | 		<a class="test-btn test-btn-blue" data-color="blue" @click.prevent="show=true">prompt</a>
  7 | 		<prompt :show.sync="show"
  8 | 			     :title="title" 
  9 | 			     :content="content"></prompt>
 10 | 	</div>
 11 | 	<pre>
 12 | 		<code class="language-markup">
 13 | 			<script type="language-mark-up">
 14 | <prompt :show.sync="show"
 15 |         :title="title" 
 16 |         :content="content"></prompt>
 17 | 			</script>
 18 | 		</code>
 19 | 	</pre>
 20 | 	<pre>
 21 | 		<code class="language-javascript">
 22 | var prompt = require('vue-mui').prompt;
 23 | // or //
 24 | import { prompt } from 'vue-mui'
 25 | 
 26 | new Vue({
 27 | 	data() {
 28 | 		return {
 29 | 			show : false,
 30 | 			title : 'This is title (optional)',
 31 | 			content : 'This is content'
 32 | 		}
 33 | 	},
 34 | 	components : {
 35 | 		prompt
 36 | 	},
 37 | 	events : {
 38 | 		confirm(val) {
 39 | 			alert('你输入了' + val)
 40 | 		},
 41 | 		cancel() {
 42 | 			alert('点击了取消')
 43 | 		}
 44 | 	}
 45 | })
 46 | 		</code>
 47 | 	</pre>
 48 | 
 49 | 	<table class="info__opt">
 50 | 		<tr>
 51 | 			<th>Name</th>
 52 | 			<th>type</th>
 53 | 			<th>default</th>
 54 | 			<th>description</th>
 55 | 		</tr>
 56 | 		<tr>
 57 | 			<td>show</td>
 58 | 			<td>Boolean</td>
 59 | 			<td><i>false</i></td>
 60 | 			<td>Whether to show this component</td>
 61 | 		</tr>
 62 | 		<tr>
 63 | 			<td>title</td>
 64 | 			<td>String</td>
 65 | 			<td></td>
 66 | 			<td><i>(optional)</i>Title of component</td>
 67 | 		</tr>
 68 | 		<tr>
 69 | 			<td>content</td>
 70 | 			<td>String</td>
 71 | 			<td></td>
 72 | 			<td>Content of component</td>
 73 | 		</tr>
 74 | 		<tr>
 75 | 			<td>confirm</td>
 76 | 			<td>Function</td>
 77 | 			<td></td>
 78 | 			<td>A callback Function when you click the modal confirm button</td>
 79 | 		</tr>
 80 | 		<tr>
 81 | 			<td>cancel</td>
 82 | 			<td>Function</td>
 83 | 			<td></td>
 84 | 			<td>A callback Function when you click the modal cancel button</td>
 85 | 		</tr>
 86 | 
 87 | 	</table>
 88 | </div>
 89 | </template>
 90 | <script>
 91 | import prompt from '../../src/components/prompt.vue'
 92 | 
 93 | export default {
 94 | 	data() {
 95 | 		return {
 96 | 			show : false,
 97 | 			title : '测试标题',
 98 | 			content : '测试内容'
 99 | 		}
100 | 	},
101 | 	components : {
102 | 		prompt
103 | 	},
104 | 	events : {
105 | 		confirm(val) {
106 | 			alert('你输入了' + val)
107 | 		},
108 | 		cancel() {
109 | 			alert('点击了取消')
110 | 		}
111 | 	}
112 | }
113 | </script>


--------------------------------------------------------------------------------
/src/less/panel.less:
--------------------------------------------------------------------------------
  1 | @import 'base.less';
  2 | header,a,li,div{-webkit-tap-highlight-color:rgba(0,0,0,0); }
  3 | 
  4 | .t-panel{
  5 | 	font-size: @font-size;
  6 | 	border: 1px solid @border-color;
  7 | 	border-bottom: 0;
  8 | 	background-color: #fff;
  9 | 
 10 | 	&__hd{
 11 | 		padding: 0 .5rem;
 12 | 		line-height: 2.5;
 13 | 		color: @font-color-87;
 14 | 		background-color: @base-color-f5;
 15 | 		border-bottom: 1px solid @border-color;
 16 | 	}
 17 | 
 18 | 	&__bd{
 19 | 		border-bottom: 1px solid @border-color;
 20 | 
 21 | 		&--ct{
 22 | 			padding: 10px;
 23 | 		}
 24 | 	}
 25 | 
 26 | 
 27 | }
 28 | /**
 29 |  * tab-panel
 30 |  */
 31 | .t-tab{
 32 | 	box-shadow: 0 0 1px rgba(0,0,0,.2);
 33 | 	border-radius: 3px;
 34 | 
 35 | 	nav{
 36 | 		width: 100%;
 37 | 		display: -webkit-box;
 38 | 	    display: -moz-box;
 39 | 	    display: -ms-flexbox;
 40 | 	    display: flex;
 41 | 	    -webkit-box-pack: justify;
 42 | 	    -moz-box-pack: justify;
 43 | 	    -ms-flex-pack: justify;
 44 | 	    -webkit-box-align: center;
 45 | 	    -moz-box-align: justify;
 46 | 	    -ms-flex-align: center;
 47 | 	    justify-content: space-between;
 48 | 		text-align: center;
 49 | 		line-height: 2.5;
 50 | 		a{
 51 | 			position: relative;
 52 | 			display: block;
 53 | 		    -webkit-box-flex: 1;
 54 | 		    -moz-box-flex: 1;
 55 | 		    -webkit-flex: 1;
 56 | 		    -ms-flex: 1;
 57 | 		    flex: 1;
 58 | 			color: @font-color-54;
 59 | 
 60 | 			&:after{
 61 | 				display: block;
 62 | 			    content: '';
 63 | 			    position: absolute;
 64 | 			    box-sizing: border-box;
 65 | 			    width: 100%;
 66 | 			    bottom: 0;
 67 | 			    left: 0;
 68 | 			    -webkit-transform: scaleY(.5);
 69 | 			    transform: scaleY(.5);
 70 | 			    -webkit-transform-origin: 0 0;
 71 | 			    transform-origin: 0 0;
 72 | 			    border-bottom: 1px solid rgba(0,0,0,.2);
 73 | 			    border-color: #eee;
 74 | 			}
 75 | 
 76 | 			&.current{
 77 | 				background-color: #f5f5f5;
 78 |     			color: #333;
 79 | 			}
 80 | 		}
 81 | 
 82 | 		a+a{
 83 | 			&:before{
 84 | 			    display: block;
 85 | 			    content: '';
 86 | 			    position: absolute;
 87 | 			    box-sizing: border-box;
 88 | 			    height: 100%;
 89 | 			    left: 0;
 90 | 			    top: 0;
 91 | 			    -webkit-transform: scaleX(.5);
 92 | 			    transform: scaleX(.5);
 93 | 			    -webkit-transform-origin: 0 0;
 94 | 			    transform-origin: 0 0;
 95 | 			    border-left: 1px solid rgba(0,0,0,.2);
 96 | 			    border-color: #eee;
 97 | 			}
 98 | 		}
 99 | 	}
100 | 
101 | 	&__bd{
102 | 		display: none;
103 | 		padding: 10px;
104 | 
105 | 		&.current{
106 | 			display: block;
107 | 		}
108 | 	}
109 | 
110 | 
111 | }


--------------------------------------------------------------------------------
/src/components/slide.vue:
--------------------------------------------------------------------------------
  1 | <style lang="less">
  2 | @base-width:16rem;
  3 | @color-gray:#eee;
  4 | @color-green:#4c9;
  5 | 
  6 | .slide{
  7 | 	position: relative;
  8 | 	width: @base-width;
  9 | 	height: (@base-width * 6 / 16);
 10 | 	overflow: hidden;
 11 | 	&-detail{
 12 | 		height: 16rem;
 13 | 	}
 14 | 	&__inner{
 15 | 		position: relative;
 16 | 		width: @base-width;
 17 | 		height: 100%;
 18 | 		&--img{
 19 | 			position: absolute;
 20 | 			top: 0;
 21 | 			width: 100%;
 22 | 			height: 100%;
 23 | 		}
 24 | 		img{
 25 | 			width: 100%;
 26 | 		}
 27 | 	}
 28 | 	&__indicator{
 29 | 		position: absolute;
 30 | 		right: 10px;
 31 | 		bottom: 10px;
 32 | 		span{
 33 | 			display: inline-block;
 34 | 			width: 5px;
 35 | 			height: 5px;
 36 | 			margin-right: 5px;
 37 | 			border-radius: 50%;
 38 | 			background-color: @color-gray;
 39 | 			&.current{
 40 | 				background-color: @color-green;
 41 | 			}
 42 | 		}
 43 | 	}
 44 | 	&__inner{
 45 | 		transition: transform .5s linear;
 46 | 	}
 47 | }
 48 | </style>
 49 | <template>
 50 | <section class="slide" :class="{'slide-detail':detail}">
 51 | 	<ul class="slide__inner" @touchstart.prevent="start" @touchmove.prevent="move" @touchend.prevent="end" :style="{transform:'translate3d('+position+'px,0,0)'}">
 52 | 		<li v-for="its in list" class="slide__inner--img" :style="{left : $index * width + 'px'}">
 53 | 			<a :href="its.link">
 54 | 				<img :src="its.img">
 55 | 			</a>
 56 | 		</li>
 57 | 	</ul>
 58 | 	<div class="slide__indicator">
 59 | 		<span v-for="its in list" :class="{'current':$index===index}"></span>
 60 | 	</div>
 61 | </section>
 62 | </template>
 63 | <script>
 64 | export default {
 65 | 	data () {
 66 | 		return {
 67 | 			index : 0,
 68 | 			width : 0,
 69 | 			position : 0, //inner移动距离
 70 | 			tmp : 0,
 71 | 			xy : 0,
 72 | 			zz : 0
 73 | 		}
 74 | 	},
 75 | 	props : {
 76 | 		detail : {
 77 | 			type : Boolean,
 78 | 			default : false
 79 | 		},
 80 | 		list : {
 81 | 			type : Array
 82 | 		}
 83 | 	},
 84 | 	ready() {
 85 | 		this.width = document.documentElement.getBoundingClientRect().width
 86 | 	},
 87 | 	methods : {
 88 | 		start(e) {
 89 | 			this.xy = e.touches[0].clientX
 90 | 		},
 91 | 		move(e) {
 92 | 			this.zz = e.touches[0].clientX - this.xy
 93 | 			this.position = this.zz + this.tmp
 94 | 
 95 | 		},
 96 | 		end(e) {
 97 | 
 98 | 			if (this.zz < -100) { //right
 99 | 				if (this.index < this.list.length - 1) {
100 | 					this.index++
101 | 				}
102 | 			} else if (this.zz > 100) { //left
103 | 				if (this.index > 0) {
104 | 					this.index--
105 | 				}
106 | 			}
107 | 
108 | 			this.tmp = this.position = -this.index * this.width
109 | 		}
110 | 	}
111 | }
112 | </script>


--------------------------------------------------------------------------------
/src/less/modal.less:
--------------------------------------------------------------------------------
  1 | @import 'base.less';
  2 | @btn-height: 46px;
  3 | /**
  4 |  * 模态框组件
  5 |  */
  6 | /**
  7 |  * 遮罩层
  8 |  */
  9 | *{
 10 | 	margin:0;
 11 | 	padding: 0;
 12 | }
 13 | .fix-position{
 14 | 	overflow: hidden;
 15 | }
 16 | .btn-active{
 17 | 	background-color: #ddd;
 18 | }
 19 | .border-top{
 20 | 	position: absolute;
 21 | 	display: block;
 22 | 	top: 0;
 23 | 	left: 0;
 24 | 	width: 100%;
 25 | 	heiht: 1px;
 26 | 	border-top: 1px solid @border-color;
 27 | 	-webkit-transform: scaleY(.5);
 28 | 	transform: scaleY(.5);
 29 | 	-webkit-transform-origin: 0 0;
 30 | 	transform-origin: 0 0;
 31 | 	z-index: 1001;
 32 | }
 33 | .t-dimmer{
 34 | 	position: fixed;
 35 | 	width: 100%;
 36 | 	height: 100%;
 37 | 	top: 0;
 38 | 	left: 0;
 39 | 	background-color: rgba(0,0,0,.5);
 40 | 	z-index: 999;
 41 | 	pointer-events: none;
 42 | }
 43 | .t-modal{
 44 | 	position: fixed;
 45 | 	width: 80%;
 46 | 	top: 50%;
 47 | 	left: 50%;
 48 | 	font-size: @font-size;
 49 | 	background-color: @base-color;
 50 | 	border-radius: 3px;
 51 | 	overflow: hidden;
 52 | 	z-index: 1000;
 53 | 	-webkit-transform: translate(-50%,-50%);
 54 | 	transform: translate(-50%,-50%);
 55 | 
 56 | 	&__header{
 57 | 			padding: 15px 10px 15px;
 58 | 		&--tt{
 59 | 			margin-bottom: 15px;
 60 | 			text-align: center;
 61 | 			color: @font-color-87;
 62 | 		}
 63 | 
 64 | 		&--ct{
 65 | 			line-height: @base-height / 2;
 66 | 			color: @font-color-54;
 67 | 		}
 68 | 		
 69 | 	}
 70 | 
 71 | 	&__footer{
 72 | 		position: relative;
 73 | 		display: table;
 74 | 		width: 100%;
 75 | 		border-collapse: collapse;
 76 | 
 77 | 		&:before{
 78 | 			content: '';
 79 | 			.border-top;
 80 | 		}
 81 | 
 82 | 		&--btn{
 83 | 			position: relative;
 84 | 			display: table-cell;
 85 | 			height: @base-height;
 86 | 			line-height: @base-height;
 87 | 			text-align: center;
 88 | 			color: @font-color-87;
 89 | 			box-sizing: border-box;
 90 | 			overflow: hidden;
 91 | 
 92 | 			&:nth-child(2):after{
 93 | 				display: block;
 94 | 				content: '';
 95 | 				position: absolute;
 96 | 				top: 0;
 97 | 				left: 0;
 98 | 				width: 1px;
 99 | 				height: 100%;
100 | 				border-left: 1px solid @border-color;
101 | 				-webkit-transform: scaleX(.5);
102 | 				transform: scaleX(.5);
103 | 				transform-origin: 0 0;
104 | 			}
105 | 		}
106 | 	}
107 | }
108 | .t-actions{
109 | 	position: fixed;
110 | 	left: 0;
111 | 	bottom: 0;
112 | 	width: 100%;
113 | 	font-size: 14px;
114 | 	text-align: center;
115 | 	z-index: 1001;
116 | 
117 | 	&__list{
118 | 		color: @font-color-54;
119 | 		background-color: @base-color;
120 | 
121 | 		&--tt{
122 | 			color: @font-color-87;
123 | 		}
124 | 
125 | 		li{
126 | 			position: relative;
127 | 			display: block;
128 | 			height: @btn-height;
129 | 			line-height: @btn-height;
130 | 			overflow: hidden;
131 |     		text-overflow: ellipsis;
132 | 			word-wrap: normal;
133 |     		white-space: nowrap;
134 | 		}
135 | 		li+li{
136 | 			&:before{
137 | 				content : '';
138 | 				.border-top;
139 | 			}
140 | 		}
141 | 	}
142 | 
143 | 	&__cancel{
144 | 		display: block;
145 | 		margin-top: 10px;
146 | 		height: @btn-height;
147 | 		line-height: @btn-height;
148 | 		color: #fff;
149 | 		background-color: @color-blue;
150 | 	}
151 | }


--------------------------------------------------------------------------------
/docs/lib/smooth-scroll.min.js:
--------------------------------------------------------------------------------
1 | /** smooth-scroll v5.1.2, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
2 | !function(t,e){"function"==typeof define&&define.amd?define("smoothScroll",e(t)):"object"==typeof exports?module.exports=e(t):t.smoothScroll=e(t)}(this,function(t){"use strict";var e,n={},o=!!document.querySelector&&!!t.addEventListener,r={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},a=function(t,e,n){if("[object Object]"===Object.prototype.toString.call(t))for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.call(n,t[o],o,t);else for(var r=0,a=t.length;a>r;r++)e.call(n,t[r],r,t)},c=function(t,e){var n={};return a(t,function(e,o){n[o]=t[o]}),a(e,function(t,o){n[o]=e[o]}),n},u=function(t,e){for(var n=e.charAt(0);t&&t!==document;t=t.parentNode)if("."===n){if(t.classList.contains(e.substr(1)))return t}else if("#"===n){if(t.id===e.substr(1))return t}else if("["===n&&t.hasAttribute(e.substr(1,e.length-2)))return t;return!1},i=function(t){for(var e,n=String(t),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(e=n.charCodeAt(r),0===e)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=e>=1&&31>=e||127==e||0===r&&e>=48&&57>=e||1===r&&e>=48&&57>=e&&45===c?"\\"+e.toString(16)+" ":e>=128||45===e||95===e||e>=48&&57>=e||e>=65&&90>=e||e>=97&&122>=e?n.charAt(r):"\\"+n.charAt(r)}return a},s=function(t,e){var n;return"easeInQuad"===t&&(n=e*e),"easeOutQuad"===t&&(n=e*(2-e)),"easeInOutQuad"===t&&(n=.5>e?2*e*e:-1+(4-2*e)*e),"easeInCubic"===t&&(n=e*e*e),"easeOutCubic"===t&&(n=--e*e*e+1),"easeInOutCubic"===t&&(n=.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1),"easeInQuart"===t&&(n=e*e*e*e),"easeOutQuart"===t&&(n=1- --e*e*e*e),"easeInOutQuart"===t&&(n=.5>e?8*e*e*e*e:1-8*--e*e*e*e),"easeInQuint"===t&&(n=e*e*e*e*e),"easeOutQuint"===t&&(n=1+--e*e*e*e*e),"easeInOutQuint"===t&&(n=.5>e?16*e*e*e*e*e:1+16*--e*e*e*e*e),n||e},f=function(t,e,n){var o=0;if(t.offsetParent)do o+=t.offsetTop,t=t.offsetParent;while(t);return o=o-e-n,o>=0?o:0},l=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},d=function(t){return t&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(t):{}},h=function(t,e){history.pushState&&(e||"true"===e)&&history.pushState({pos:t.id},"",window.location.pathname+t)};n.animateScroll=function(e,n,o){var a=c(a||r,o||{}),u=d(e?e.getAttribute("data-options"):null);a=c(a,u),n="#"+i(n.substr(1));var p,m,b,v=document.querySelector("[data-scroll-header]"),g=null===v?0:v.offsetHeight+v.offsetTop,O=t.pageYOffset,y=f(document.querySelector(n),g,parseInt(a.offset,10)),I=y-O,S=l(),A=0;h(n,a.updateURL);var Q=function(o,r,c){var u=t.pageYOffset;(o==r||u==r||t.innerHeight+u>=S)&&(clearInterval(c),a.callbackAfter(e,n))},C=function(){A+=16,m=A/parseInt(a.speed,10),m=m>1?1:m,b=O+I*s(a.easing,m),t.scrollTo(0,Math.floor(b)),Q(b,y,p)},H=function(){a.callbackBefore(e,n),p=setInterval(C,16)};0===t.pageYOffset&&t.scrollTo(0,0),H()};var p=function(t){var o=u(t.target,"[data-scroll]");o&&"a"===o.tagName.toLowerCase()&&(t.preventDefault(),n.animateScroll(o,o.hash,e,t))};return n.destroy=function(){e&&(document.removeEventListener("click",p,!1),e=null)},n.init=function(t){o&&(n.destroy(),e=c(r,t||{}),document.addEventListener("click",p,!1))},n});


--------------------------------------------------------------------------------
/src/css/modal.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 模态框组件
  3 |  */
  4 | /**
  5 |  * 遮罩层
  6 |  */
  7 | * {
  8 |   margin: 0;
  9 |   padding: 0;
 10 | }
 11 | .fix-position {
 12 |   overflow: hidden;
 13 | }
 14 | .btn-active {
 15 |   background-color: #ddd;
 16 | }
 17 | .border-top {
 18 |   position: absolute;
 19 |   display: block;
 20 |   top: 0;
 21 |   left: 0;
 22 |   width: 100%;
 23 |   heiht: 1px;
 24 |   border-top: 1px solid #ddd;
 25 |   -webkit-transform: scaleY(0.5);
 26 |   transform: scaleY(0.5);
 27 |   -webkit-transform-origin: 0 0;
 28 |   transform-origin: 0 0;
 29 |   z-index: 1001;
 30 | }
 31 | .t-dimmer {
 32 |   position: fixed;
 33 |   width: 100%;
 34 |   height: 100%;
 35 |   top: 0;
 36 |   left: 0;
 37 |   background-color: rgba(0, 0, 0, 0.5);
 38 |   z-index: 999;
 39 |   pointer-events: none;
 40 | }
 41 | .t-modal {
 42 |   position: fixed;
 43 |   width: 80%;
 44 |   top: 50%;
 45 |   left: 50%;
 46 |   font-size: 14px;
 47 |   background-color: #fafafa;
 48 |   border-radius: 3px;
 49 |   overflow: hidden;
 50 |   z-index: 1000;
 51 |   -webkit-transform: translate(-50%, -50%);
 52 |   transform: translate(-50%, -50%);
 53 | }
 54 | .t-modal__header {
 55 |   padding: 15px 10px 15px;
 56 | }
 57 | .t-modal__header--tt {
 58 |   margin-bottom: 15px;
 59 |   text-align: center;
 60 |   color: rgba(0, 0, 0, 0.87);
 61 | }
 62 | .t-modal__header--ct {
 63 |   line-height: 22px;
 64 |   color: rgba(0, 0, 0, 0.54);
 65 | }
 66 | .t-modal__footer {
 67 |   position: relative;
 68 |   display: table;
 69 |   width: 100%;
 70 |   border-collapse: collapse;
 71 | }
 72 | .t-modal__footer:before {
 73 |   content: '';
 74 |   position: absolute;
 75 |   display: block;
 76 |   top: 0;
 77 |   left: 0;
 78 |   width: 100%;
 79 |   heiht: 1px;
 80 |   border-top: 1px solid #ddd;
 81 |   -webkit-transform: scaleY(0.5);
 82 |   transform: scaleY(0.5);
 83 |   -webkit-transform-origin: 0 0;
 84 |   transform-origin: 0 0;
 85 |   z-index: 1001;
 86 | }
 87 | .t-modal__footer--btn {
 88 |   position: relative;
 89 |   display: table-cell;
 90 |   height: 44px;
 91 |   line-height: 44px;
 92 |   text-align: center;
 93 |   color: rgba(0, 0, 0, 0.87);
 94 |   box-sizing: border-box;
 95 |   overflow: hidden;
 96 | }
 97 | .t-modal__footer--btn:nth-child(2):after {
 98 |   display: block;
 99 |   content: '';
100 |   position: absolute;
101 |   top: 0;
102 |   left: 0;
103 |   width: 1px;
104 |   height: 100%;
105 |   border-left: 1px solid #ddd;
106 |   -webkit-transform: scaleX(0.5);
107 |   transform: scaleX(0.5);
108 |   transform-origin: 0 0;
109 | }
110 | .t-actions {
111 |   position: fixed;
112 |   left: 0;
113 |   bottom: 0;
114 |   width: 100%;
115 |   font-size: 14px;
116 |   text-align: center;
117 |   z-index: 1001;
118 | }
119 | .t-actions__list {
120 |   color: rgba(0, 0, 0, 0.54);
121 |   background-color: #fafafa;
122 | }
123 | .t-actions__list--tt {
124 |   color: rgba(0, 0, 0, 0.87);
125 | }
126 | .t-actions__list li {
127 |   position: relative;
128 |   display: block;
129 |   height: 46px;
130 |   line-height: 46px;
131 |   overflow: hidden;
132 |   text-overflow: ellipsis;
133 |   word-wrap: normal;
134 |   white-space: nowrap;
135 | }
136 | .t-actions__list li + li:before {
137 |   content: '';
138 |   position: absolute;
139 |   display: block;
140 |   top: 0;
141 |   left: 0;
142 |   width: 100%;
143 |   heiht: 1px;
144 |   border-top: 1px solid #ddd;
145 |   -webkit-transform: scaleY(0.5);
146 |   transform: scaleY(0.5);
147 |   -webkit-transform-origin: 0 0;
148 |   transform-origin: 0 0;
149 |   z-index: 1001;
150 | }
151 | .t-actions__cancel {
152 |   display: block;
153 |   margin-top: 10px;
154 |   height: 46px;
155 |   line-height: 46px;
156 |   color: #fff;
157 |   background-color: #4c9cee;
158 | }
159 | 


--------------------------------------------------------------------------------
/docs/menu.vue:
--------------------------------------------------------------------------------
  1 | <style lang="less">
  2 | @border-color: #ddd;
  3 | @color-blue : #4c9cee;
  4 | .menu{
  5 | 	position: fixed;
  6 | 	top: 0;
  7 | 	left: 0;
  8 | 	width: 200px;
  9 | 	height: 100%;
 10 | 	font-size: 14px;
 11 | 
 12 | 	a.active{
 13 | 		color: @color-blue;
 14 | 	}
 15 | 
 16 | 	h2{
 17 | 		height: 60px;
 18 | 		text-indent: -1000px;
 19 | 		border-bottom: 1px solid @border-color;
 20 | 	    background: url(http://mui.yaobieting.com/src/images/logo.png) no-repeat center center;
 21 |     	background-size: auto 60%;
 22 | 
 23 |     	a{
 24 |     		display: block;
 25 |     		height: 60px;
 26 |     	}
 27 | 	}
 28 | 
 29 | 	&>&__index>li{
 30 | 	    &>a{
 31 | 	    	padding-left: 0;
 32 | 
 33 | 	    	span{
 34 | 	    		display: inline-block;
 35 | 	    		vertical-align: middle;
 36 | 	    	}
 37 | 	    	
 38 | 
 39 | 	    	&:before{
 40 | 		    	content: '';
 41 | 			    display: block;
 42 | 			    width: 0;
 43 | 			    height: 0;
 44 | 			    margin-right: 10px;
 45 | 			    border-left: 5px solid #888;
 46 | 			    border-top: 5px solid transparent;
 47 | 			    border-bottom: 5px solid transparent;
 48 | 			    display: inline-block;
 49 | 			    vertical-align: middle;
 50 | 			    -webkit-transition: transform .2s linear;
 51 | 			    transition: transform .2s linear;
 52 | 		    }
 53 | 
 54 | 		    &.open{
 55 | 		    	&+ul{
 56 | 		    		display: block;
 57 | 		    	}
 58 | 		    	&:before{
 59 | 		    		-webkit-transform: rotate(90deg);
 60 | 		    		transform: rotate(90deg);
 61 | 		    	}
 62 | 		    }
 63 | 	    }
 64 | 
 65 | 	    
 66 | 	}
 67 | 
 68 | 	&__index{
 69 | 		padding: 20px;
 70 | 
 71 | 		&>li{
 72 | 			margin-bottom: 20px;
 73 | 			cursor: pointer;
 74 | 
 75 | 			a{
 76 | 				display: block;
 77 | 	    		padding-left: 10px;
 78 | 				color: #888;
 79 | 
 80 | 				&:hover{
 81 | 					color: @color-blue;
 82 | 				}
 83 | 			}
 84 | 
 85 | 
 86 | 
 87 | 		}	
 88 | 	}
 89 | 
 90 | 	&__children{
 91 | 		display: none;
 92 | 		padding: 10px 20px 0;
 93 | 		li{
 94 | 			margin-bottom: 20px;
 95 | 		}
 96 | 	}
 97 | 	
 98 | }
 99 | </style>
100 | 
101 | <template>
102 | <div class="menu">
103 | 	<h2>
104 | 		<a href="http://mui.yaobieting.com/">vue-mui</a>
105 | 	</h2>
106 | 	<ul class="menu__index" v-el="menu">
107 | 		<li v-for="item in list">
108 | 		<a data-scroll :href="'#m-'+item.id" @click="toggle(item.id)" :class="{active:act==='m-'+item.id,open:index===item.id}"><span v-text="item.name"></span></a>
109 | 
110 | 		<ul class="menu__index menu__children">
111 | 			<li v-for="its in item.children">
112 | 				<a data-scroll :href="'#m-'+item.id+'-'+its.id" v-text="its.name" :class="{active:act==='m-'+item.id+'-'+its.id}"></a>
113 | 			</li>
114 | 		</ul>
115 | 	</li>
116 | 	</ul>
117 | </div>
118 | </template>
119 | 
120 | <script>
121 | export default {
122 | 	data() {
123 | 		return {
124 | 			index : 'modal',
125 | 			status : true,
126 | 			timer : null,
127 | 			list : [{
128 | 				name : 'Modal',
129 | 				id : 'modal',
130 | 				show : true,
131 | 				children : [{
132 | 						name : 'alert',
133 | 						id : 'alert'
134 | 					},{
135 | 						name : 'confirm',
136 | 						id : 'confirm'
137 | 					},{
138 | 						name : 'prompt',
139 | 						id : 'prompt'
140 | 					},{
141 | 						name : 'actions',
142 | 						id : 'actions'
143 | 					}
144 | 				]
145 | 			},{
146 | 				name : 'Panel',
147 | 				id : 'panel',
148 | 				show : false,
149 | 				children : [{
150 | 						name : 'panel',
151 | 						id : 'panel'
152 | 					},{
153 | 						name : 'accordion',
154 | 						id : 'accordion'
155 | 					},{
156 | 						name : 'tab-panel',
157 | 						id : 'tab-panel'
158 | 					}
159 | 				]
160 | 			},{
161 | 				name : 'Button',
162 | 				id : 'btn',
163 | 				show : false,
164 | 				children : [{
165 | 						name : 'button',
166 | 						id : 'btn'
167 | 					},{
168 | 						name : 'switch',
169 | 						id : 'switch'
170 | 					}
171 | 				]
172 | 			},{
173 | 				name : 'Progress',
174 | 				id : 'progress',
175 | 				show : false,
176 | 				children : [{
177 | 						name : 'progress bar',
178 | 						id : 'bar'
179 | 					}
180 | 				]
181 | 			},{
182 | 				name : 'Slide',
183 | 				id : 'slide',
184 | 				show : false,
185 | 				children : [{
186 | 						name : 'Slide',
187 | 						id : 'slide'
188 | 				}]
189 | 			},{
190 | 				name : 'Menu',
191 | 				id : 'menu',
192 | 				show : false,
193 | 				children : [{
194 | 						name : 'MenuList',
195 | 						id : 'menu'
196 | 				}]
197 | 			}]
198 | 		}
199 | 	},
200 | 	props : {
201 | 		act : {
202 | 			type : String
203 | 		}
204 | 	},
205 | 	watch : {
206 | 		act(val) {
207 | 			if (this.status) {
208 | 				let index;
209 | 				val = val.substring(2);
210 | 				index = val.indexOf('-');
211 | 
212 | 				this.index = index < 0 ? val : val.substr(0, index);
213 | 			}
214 | 		}
215 | 	},
216 | 	methods : {
217 | 		toggle(id) {
218 | 			let that = this;
219 | 			that.index = id;
220 | 			that.status = false;
221 | 
222 | 			clearTimeout(that.timer);
223 | 
224 | 			that.timer = setTimeout(() => {
225 | 				that.status = true;
226 | 			}, 600)
227 | 		}
228 | 	}
229 | }
230 | </script>


--------------------------------------------------------------------------------
/src/css/btn.css:
--------------------------------------------------------------------------------
  1 | .t-btn {
  2 |   position: relative;
  3 |   display: block;
  4 |   line-height: 2.5;
  5 |   font-size: 16px;
  6 |   text-align: center;
  7 |   color: #fff;
  8 |   border-radius: 3px;
  9 | }
 10 | .t-btn--normal {
 11 |   background-color: #4c9cee;
 12 | }
 13 | .t-btn--normal:active {
 14 |   background-color: #3895F5;
 15 | }
 16 | .t-btn--warn {
 17 |   background-color: #ef4f4f;
 18 | }
 19 | .t-btn--warn:active {
 20 |   background-color: #ef3737;
 21 | }
 22 | .t-btn--default {
 23 |   color: rgba(0, 0, 0, 0.87);
 24 |   background-color: #f5f5f5;
 25 | }
 26 | .t-btn--default:active {
 27 |   background-color: #ddd;
 28 | }
 29 | .t-btn:after {
 30 |   display: block;
 31 |   content: '';
 32 |   position: absolute;
 33 |   top: 0;
 34 |   left: 0;
 35 |   width: 200%;
 36 |   height: 200%;
 37 |   -webkit-transform: scale(0.5);
 38 |   transform: scale(0.5);
 39 |   -webkit-transform-origin: 0 0;
 40 |   transform-origin: 0 0;
 41 |   border: 1px solid rgba(0, 0, 0, 0.2);
 42 |   border-radius: 6px;
 43 |   box-sizing: border-box;
 44 | }
 45 | /**
 46 |  * Hamburger
 47 |  */
 48 | .t-hamburger-common {
 49 |   display: block;
 50 |   list-style: none;
 51 |   height: 5px;
 52 |   margin-bottom: 7px;
 53 |   background-color: #fff;
 54 | }
 55 | .t-hamburger {
 56 |   display: block;
 57 |   width: 30px;
 58 |   height: 30px;
 59 |   padding: 10px;
 60 |   background-color: #4c9cee;
 61 | }
 62 | .t-hamburger li {
 63 |   display: block;
 64 |   list-style: none;
 65 |   height: 5px;
 66 |   margin-bottom: 7px;
 67 |   background-color: #fff;
 68 | }
 69 | .t-hamburger:before,
 70 | .t-hamburger:after {
 71 |   content: '';
 72 |   display: block;
 73 |   list-style: none;
 74 |   height: 5px;
 75 |   margin-bottom: 7px;
 76 |   background-color: #fff;
 77 | }
 78 | .t-hamburger:before {
 79 |   -webkit-animation: hb-top-close 400ms ease-out forwards;
 80 |   animation: hb-top-close 400ms ease-out forwards;
 81 | }
 82 | .t-hamburger:after {
 83 |   -webkit-animation: hb-bottom-close 400ms ease-out forwards;
 84 |   animation: hb-bottom-close 400ms ease-out forwards;
 85 | }
 86 | .t-hamburger li {
 87 |   -webkit-animation: hb-middle-close 400ms ease-out forwards;
 88 |   animation: hb-middle-close 400ms ease-out forwards;
 89 | }
 90 | .t-hamburger.open:before {
 91 |   -webkit-animation: hb-top 400ms ease-out forwards;
 92 |   animation: hb-top 400ms ease-out forwards;
 93 | }
 94 | .t-hamburger.open:after {
 95 |   -webkit-animation: hb-bottom 400ms ease-out forwards;
 96 |   animation: hb-bottom 400ms ease-out forwards;
 97 | }
 98 | .t-hamburger.open li {
 99 |   -webkit-animation: hb-middle 400ms ease-out forwards;
100 |   animation: hb-middle 400ms ease-out forwards;
101 | }
102 | @-webkit-keyframes hb-top {
103 |   0% {
104 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
105 |   }
106 |   50% {
107 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
108 |   }
109 |   100% {
110 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
111 |   }
112 | }
113 | @keyframes hb-top {
114 |   0% {
115 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
116 |   }
117 |   50% {
118 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
119 |   }
120 |   100% {
121 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
122 |   }
123 | }
124 | @-webkit-keyframes hb-top-close {
125 |   100% {
126 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
127 |   }
128 |   50% {
129 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
130 |   }
131 |   0% {
132 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
133 |   }
134 | }
135 | @keyframes hb-top-close {
136 |   100% {
137 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
138 |   }
139 |   50% {
140 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
141 |   }
142 |   0% {
143 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
144 |   }
145 | }
146 | @-webkit-keyframes hb-bottom {
147 |   0% {
148 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
149 |   }
150 |   50% {
151 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
152 |   }
153 |   100% {
154 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
155 |   }
156 | }
157 | @keyframes hb-bottom {
158 |   0% {
159 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
160 |   }
161 |   50% {
162 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
163 |   }
164 |   100% {
165 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
166 |   }
167 | }
168 | @-webkit-keyframes hb-bottom-close {
169 |   100% {
170 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
171 |   }
172 |   50% {
173 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
174 |   }
175 |   0% {
176 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
177 |   }
178 | }
179 | @keyframes hb-bottom-close {
180 |   100% {
181 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
182 |   }
183 |   50% {
184 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
185 |   }
186 |   0% {
187 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
188 |   }
189 | }
190 | @-webkit-keyframes hb-middle {
191 |   0% {
192 |     opacity: 1;
193 |   }
194 |   50% {
195 |     opacity: 1;
196 |   }
197 |   51% {
198 |     opacity: 0;
199 |   }
200 |   100% {
201 |     opacity: 0;
202 |   }
203 | }
204 | @keyframes hb-middle {
205 |   0% {
206 |     opacity: 1;
207 |   }
208 |   50% {
209 |     opacity: 1;
210 |   }
211 |   51% {
212 |     opacity: 0;
213 |   }
214 |   100% {
215 |     opacity: 0;
216 |   }
217 | }
218 | @-webkit-keyframes hb-middle-close {
219 |   0% {
220 |     opacity: 0;
221 |   }
222 |   50% {
223 |     opacity: 0;
224 |   }
225 |   51% {
226 |     opacity: 1;
227 |   }
228 |   100% {
229 |     opacity: 1;
230 |   }
231 | }
232 | @keyframes hb-middle-close {
233 |   0% {
234 |     opacity: 0;
235 |   }
236 |   50% {
237 |     opacity: 0;
238 |   }
239 |   51% {
240 |     opacity: 1;
241 |   }
242 |   100% {
243 |     opacity: 1;
244 |   }
245 | }
246 | 


--------------------------------------------------------------------------------
/src/less/btn.less:
--------------------------------------------------------------------------------
  1 | @import 'base.less';
  2 | @hamburger-size : 30px;
  3 | .t-btn{
  4 | 	position: relative;
  5 | 	display: block;
  6 | 	line-height: 2.5;
  7 | 	font-size: 16px;
  8 | 	text-align: center;
  9 | 	color: #fff;
 10 | 	border-radius: 3px;
 11 | 
 12 | 	&--normal{
 13 | 		background-color: @color-blue;
 14 | 
 15 | 		&:active{
 16 | 			background-color: #3895F5;
 17 | 		}
 18 | 	}
 19 | 
 20 | 	&--warn{
 21 | 		background-color: @color-red;
 22 | 
 23 | 		&:active{
 24 | 			background-color: #ef3737;
 25 | 		}
 26 | 	}
 27 | 
 28 | 	&--default{
 29 | 		color: @font-color-87;
 30 | 		background-color: #f5f5f5;
 31 | 
 32 | 		&:active{
 33 | 			background-color: #ddd;
 34 | 		}
 35 | 	}
 36 | 
 37 | 	&:after{
 38 | 		display: block;
 39 | 		content: '';
 40 | 		position: absolute;
 41 | 		top: 0;
 42 | 		left: 0;
 43 | 		width: 200%;
 44 | 		height: 200%;
 45 | 		-webkit-transform: scale(.5);
 46 | 	    transform: scale(.5);
 47 | 	    -webkit-transform-origin: 0 0;
 48 | 	    transform-origin: 0 0;
 49 | 	    border: 1px solid rgba(0,0,0,.2);
 50 | 		border-radius: 6px;
 51 | 		box-sizing: border-box;
 52 | 	}
 53 | }
 54 | /**
 55 |  * Hamburger
 56 |  */
 57 | .t-hamburger-common{
 58 | 	display:block;
 59 | 	list-style: none;
 60 | 	height: @hamburger-size / 6;
 61 | 	margin-bottom: 7px;
 62 | 	background-color: #fff;
 63 | }
 64 | .t-hamburger{
 65 | 	display:block;
 66 | 	width: @hamburger-size;
 67 | 	height: @hamburger-size;
 68 | 	padding: @hamburger-size / 3;
 69 | 	background-color: @color-blue;
 70 | 
 71 | 	li{
 72 | 		.t-hamburger-common;
 73 | 	}
 74 | 	&:before,
 75 | 	&:after{
 76 | 		content: '';
 77 | 		.t-hamburger-common;
 78 | 	}
 79 | 
 80 | 	&:before{
 81 | 		-webkit-animation: hb-top-close 400ms ease-out forwards;
 82 | 		animation: hb-top-close 400ms ease-out forwards;
 83 | 	}
 84 | 
 85 | 	&:after{
 86 | 		-webkit-animation: hb-bottom-close 400ms ease-out forwards;
 87 | 		animation: hb-bottom-close 400ms ease-out forwards;
 88 | 	}
 89 | 	li{
 90 | 		-webkit-animation: hb-middle-close 400ms ease-out forwards;
 91 | 		animation: hb-middle-close 400ms ease-out forwards;
 92 | 	}
 93 | 
 94 | 	&.open{
 95 | 		&:before{
 96 | 			-webkit-animation: hb-top 400ms ease-out forwards;
 97 | 			animation: hb-top 400ms ease-out forwards;
 98 | 		}
 99 | 
100 | 		&:after{
101 | 			-webkit-animation: hb-bottom 400ms ease-out forwards;
102 | 			animation: hb-bottom 400ms ease-out forwards;
103 | 		}
104 | 		li{
105 | 			-webkit-animation: hb-middle 400ms ease-out forwards;
106 | 			animation: hb-middle 400ms ease-out forwards;
107 | 		}
108 | 	}
109 | }
110 | @-webkit-keyframes hb-top{ 
111 |     0%{ 
112 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
113 |     } 
114 |     50%{ 
115 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
116 |     } 
117 |     100%{ 
118 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
119 |     }
120 | }
121 | @keyframes hb-top{ 
122 |     0%{ 
123 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
124 |     } 
125 |     50%{ 
126 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
127 |     } 
128 |     100%{ 
129 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
130 |     }
131 | }
132 | 
133 | @-webkit-keyframes hb-top-close{ 
134 |     100%{ 
135 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
136 |     } 
137 |     50%{ 
138 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
139 |     } 
140 |     0%{ 
141 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
142 |     }
143 | }
144 | @keyframes hb-top-close{ 
145 |     100%{ 
146 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
147 |     } 
148 |     50%{ 
149 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(0); 
150 |     } 
151 |     0%{ 
152 |     	-webkit-transform: translate3d(0,@hamburger-size/2.5,0) rotate(45deg); 
153 |     }
154 | }
155 | 
156 |     
157 |     
158 | @-webkit-keyframes hb-bottom{ 
159 |     0%{ 
160 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
161 |     } 
162 |     50%{ 
163 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
164 |     } 
165 |     100%{ 
166 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
167 |     }
168 | }
169 | @keyframes hb-bottom{ 
170 |     0%{ 
171 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
172 |     } 
173 |     50%{ 
174 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
175 |     } 
176 |     100%{ 
177 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
178 |     }
179 | }
180 |     
181 | @-webkit-keyframes hb-bottom-close{ 
182 |     100%{ 
183 |     	-webkit-transform: translate3d(0,0,0) rotate(0); 
184 |     } 
185 |     50%{ 
186 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
187 |     } 
188 |     0%{ 
189 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
190 |     }
191 | }
192 | @keyframes hb-bottom-close{ 
193 |     100%{ 
194 |     	-webkit-transform: translate3d(0,0,0) rotate(0);
195 |     } 
196 |     50%{ 
197 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(0); 
198 |     } 
199 |     0%{ 
200 |     	-webkit-transform: translate3d(0,-@hamburger-size/2.5,0) rotate(-45deg); 
201 |     }
202 | }
203 |     
204 |     
205 | @-webkit-keyframes hb-middle{ 
206 |     0%{ 
207 |     	opacity:1;
208 |     } 
209 |     50%{ 
210 |     	opacity: 1;
211 |     } 
212 |     51%{ 
213 |     	opacity:0;
214 |     } 
215 |     100%{ 
216 |     	opacity:0;
217 |     }
218 | }
219 | @keyframes hb-middle{ 
220 |     0%{ 
221 |     	opacity:1;
222 |     } 
223 |     50%{ 
224 |     	opacity: 1;
225 |     } 
226 |     51%{ 
227 |     	opacity:0;
228 |     } 
229 |     100%{ 
230 |     	opacity:0;
231 |     }
232 | }
233 |     
234 | @-webkit-keyframes hb-middle-close{ 
235 |     0%{
236 |     	opacity:0;
237 |     } 
238 |     50%{
239 |     	opacity: 0;
240 |     } 
241 |     51%{
242 |     	opacity:1;
243 |     } 
244 |     100%{
245 |     	opacity:1;
246 |     }
247 | }
248 | @keyframes hb-middle-close{ 
249 |     0%{
250 |     	opacity:0;
251 |     } 
252 |     50%{
253 |     	opacity: 0;
254 |     } 
255 |     51%{
256 |     	opacity:1;
257 |     } 
258 |     100%{
259 |     	opacity:1;
260 |     }
261 | }
262 | 
263 | 


--------------------------------------------------------------------------------
/docs/lib/prism.js:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism-dark&languages=markup+css+clike+javascript */
2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==n)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},plugins:{},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),l=0;a=r[l++];)t.highlightElement(a,e===!0,n)},highlightElement:function(n,a,r){for(var l,i,o=n;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1],i=t.languages[l]),n.className=n.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=n.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=n.textContent,u={element:n,language:l,grammar:i,code:s};if(!s||!i)return t.hooks.run("complete",u),void 0;if(t.hooks.run("before-highlight",u),a&&_self.Worker){var g=new Worker(t.filename);g.onmessage=function(e){u.highlightedCode=e.data,t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=t.highlight(u.code,u.grammar,u.language),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(n),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)},highlight:function(e,a,r){var l=t.tokenize(e,a);return n.stringify(t.util.encode(l),r)},tokenize:function(e,n){var a=t.Token,r=[e],l=n.rest;if(l){for(var i in l)n[i]=l[i];delete n.rest}e:for(var i in n)if(n.hasOwnProperty(i)&&n[i]){var o=n[i];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;u=u.pattern||u;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),P=[p,1];b&&P.push(b);var A=new a(i,g?t.tokenize(m,g):m,h);P.push(A),w&&P.push(w),Array.prototype.splice.apply(r,P)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var l={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}t.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code,l=n.immediateClose;_self.postMessage(t.highlight(r,t.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
3 | Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[^\s>\/=.]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
7 | 


--------------------------------------------------------------------------------
/docs/index.vue:
--------------------------------------------------------------------------------
  1 | <style lang="less">
  2 | @border-color: #eee;
  3 | @color-green : #4c9;
  4 | @color-blue : #4c9cee;
  5 | @color-black : #333;
  6 | @color-gray: #ddd;
  7 | @base-padding: 20px;
  8 | @s87 : rgba(0,0,0,.87);
  9 | @s54 : rgba(0,0,0,.54);
 10 | html,body{
 11 | 	background-color: #eee;
 12 | 	-webkit-font-smoothing: antialiased;
 13 | }
 14 | .test-btn{
 15 | 	display: block;
 16 | 	width: 100px;
 17 | 	height: 32px;
 18 | 	line-height: 32px;
 19 | 	margin-right: 10px;
 20 | 	margin-bottom: 10px;
 21 | 	text-align: center;
 22 | 	color: #fff;
 23 | 	cursor: pointer;
 24 | 	border-radius: 3px;
 25 | 	font-size: 12px;
 26 | 
 27 | 	&-blue{
 28 | 		background-color: @color-blue;
 29 | 	}
 30 | 
 31 | 	&-green{
 32 | 		background-color: @color-green;
 33 | 	}
 34 | 
 35 | 	&-black{
 36 | 		background-color: @color-black;
 37 | 	}
 38 | 
 39 | 	&-ilb{
 40 | 		display: inline-block;
 41 | 	}
 42 | }
 43 | i{
 44 |     display: inline-block;
 45 |     padding: 3px 5px;
 46 |     margin: 0 3px;
 47 |     font-size: 12px;
 48 |     line-height: 12px;
 49 |     font-style: normal;
 50 |     border-radius: 3px;
 51 |     border: 1px solid #ddd;
 52 |     color: #f92672;
 53 | 	background-color: #eee;
 54 | }
 55 | .hint{
 56 | 	font-size: 12px;
 57 |     margin-top: 20px;
 58 |     line-height: 30px;
 59 |     color: @s54;
 60 | }
 61 | .main{
 62 | 	margin: 0 200px;
 63 | 	border-left: 1px solid @color-gray;
 64 | 	border-right: 1px solid @color-gray;
 65 | 	box-shadow: 0px 0px 1px @color-gray;
 66 | }
 67 | .info{
 68 | 	background-color: #fff;
 69 | 
 70 | 	a[data-scroll]{
 71 | 		display: block;
 72 | 		color: @s87;
 73 | 	}
 74 | 	&__header{
 75 | 		h1{
 76 | 			padding: @base-padding;
 77 | 			line-height: 20px;
 78 | 			font-size: 26px;
 79 | 			font-weight: 700;
 80 | 			border-bottom: 1px dashed @border-color;
 81 | 		}
 82 | 		p{
 83 | 			color: @s54;
 84 | 			font-size:14px;
 85 | 			padding: @base-padding;
 86 | 		}
 87 | 	}
 88 | 
 89 | 	&__bd{
 90 | 		padding: @base-padding;
 91 | 		h2{
 92 | 			font-weight: 700;
 93 | 			font-size: 14px;
 94 | 			line-height: 2;
 95 | 			margin-bottom: 10px;
 96 | 
 97 | 			&:before{
 98 | 				content: '#';
 99 | 				color: @color-green;
100 | 				margin-right: 5px;
101 | 			}
102 | 
103 | 			&:hover{
104 | 				color: @color-green;
105 | 			}
106 | 		}
107 | 
108 | 		&--hint{
109 | 			margin-bottom: 10px;
110 | 			line-height: 1.5;
111 | 			font-size: 12px;
112 | 			color: @s54;
113 | 		}
114 | 	}
115 | 
116 | 	&__demo{
117 | 		margin: 15px 0;
118 | 
119 | 		&--show{
120 | 			padding: 10px 15px;
121 | 		}
122 | 	}
123 | 
124 | 	&__opt{
125 | 		width: 100%;
126 | 		margin: 20px auto;
127 | 		border: 1px solid @border-color;
128 | 		font-size: 12px;
129 | 
130 | 		tr{
131 | 			line-height: 40px;
132 | 		}
133 | 
134 | 		tr+tr{
135 | 			border-top: 1px solid @border-color;
136 | 		}
137 | 
138 | 		th{
139 | 			padding: 0 10px;
140 | 			color: @s87;
141 | 			font-weight: 700;
142 | 		}
143 | 
144 | 		th+th,
145 | 		td+td{
146 | 			border-left: 1px solid @border-color;
147 | 		}
148 | 		td{
149 | 			padding: 0 10px;
150 | 			color: @s54;
151 | 
152 | 			p{
153 | 				line-height: 2;
154 | 			}
155 | 		}
156 | 	}
157 | }
158 | #back-top{
159 | 	display: block;
160 | 	width: 40px;
161 | 	height: 40px;
162 | 	position: fixed;
163 | 	right: 80px;
164 | 	bottom: 40px;
165 | 	background: url(http://mui.yaobieting.com/src/images/back.png) no-repeat center center;
166 | 	background-size: 100%;
167 | }
168 | .backtop-transition{
169 | 	-webkit-transition: transform .3s ease;
170 | 	transition: transform .3s ease;
171 | 	-webkit-transform: translate3d(0, 0, 0);
172 | 	transform: translate3d(0, 0, 0);
173 | }
174 | .backtop-enter,
175 | .backtop-leave{
176 | 	-webkit-transform: translate3d(0, 80px, 0);
177 | 	transform: translate3d(0, 80px, 0);
178 | }
179 | @media screen and (max-width : 600px) {
180 | 	.main{
181 | 		width: 100%;
182 | 		margin: 0;
183 | 	}
184 | 	.aside,.menu{
185 | 		display: none;
186 | 	}
187 | }
188 | </style>
189 | <template>
190 | <asidebox></asidebox>
191 | <menubox :act.sync="id"></menubox>
192 | 
193 | <div class="main">
194 | 	<div class="info">
195 | 		<div class="info__header" id="m-modal">
196 | 			<a href="#m-modal" data-scroll><h1>Modal</h1></a>
197 | 			<p>A set of modal window appearance effects with IOS style. <i>alert</i><i>confirm</i><i>prompt</i></p>
198 | 		</div>
199 | 
200 | 		<!-- alert start -->
201 | 		<alert></alert>
202 | 		<!-- alert end -->
203 | 
204 | 		<!-- confirm start -->
205 | 		<confirm></confirm>
206 | 		<!-- confirm end -->
207 | 
208 | 		<!-- prompt start -->
209 | 		<prompt></prompt>
210 | 		<!-- prompt end -->
211 | 
212 | 		<!-- actions start -->
213 | 		<actions></actions>
214 | 		<!-- actions end -->
215 | 
216 | 	</div>
217 | 
218 | 	<div class="info">
219 | 		<div class="info__header" id="m-panel">
220 | 			<a href="#m-panel" data-scroll><h1>Panels</h1></a>
221 | 			<p>include<i>default panel</i><i>folding panel</i></p>
222 | 		</div>
223 | 		
224 | 		<!-- panel start -->
225 | 		<panel></panel>
226 | 		<!-- panel end -->
227 | 
228 | 		<!-- accordion start -->
229 | 		<accordion></accordion>
230 | 		<!-- accordion end -->
231 | 	
232 | 		<!-- tabpanel start -->
233 | 		<tabpanel></tabpanel>
234 | 		<!-- tabpanel end -->
235 | 
236 | 	</div>
237 | 
238 | 	<div class="info">
239 | 		<div class="info__header" id="m-btn">
240 | 			<a href="#m-btn" data-scroll><h1>Buttons</h1></a>
241 | 		</div>
242 | 		
243 | 		<btn></btn>
244 | 
245 | 		<sbtn></sbtn>
246 | 
247 | 	</div>
248 | 
249 | 	<div class="info">
250 | 		<div class="info__header" id="m-progress">
251 | 			<a href="#m-progress" data-scroll><h1>Progress</h1></a>
252 | 		</div>
253 | 		
254 | 		<progress></progress>
255 | 
256 | 	</div>
257 | 
258 | 	<div class="info">
259 | 		<div class="info__header" id="m-slide">
260 | 			<a href="#m-slide" data-scroll><h1>Slide</h1></a>
261 | 		</div>
262 | 		
263 | 		<slide></slide>
264 | 
265 | 	</div>
266 | 
267 | 	<div class="info">
268 | 		<div class="info__header" id="m-menu">
269 | 			<a href="#m-menu" data-scroll><h1>Menu</h1></a>
270 | 		</div>
271 | 		
272 | 		<menubar></menubar>
273 | 
274 | 	</div>
275 | 
276 | </div>
277 | <a href="#m-modal" data-scroll id="back-top" v-show="back" transition="backtop"></a>
278 | </template>
279 | <script>
280 | import asidebox from './aside.vue'
281 | import menubox 	from './menu.vue'
282 | 
283 | import alert 	from './src/alertTest.vue'
284 | import confirm  from './src/confirmTest.vue'
285 | import prompt  	from './src/promptTest.vue'
286 | import actions 	from './src/actionsTest.vue'
287 | //panel
288 | import panel 	from './src/panelTest.vue'
289 | import accordion from './src/accordionTest.vue'
290 | import tabpanel from './src/tabPanelTest.vue'
291 | //btn
292 | import btn from './src/btnTest.vue'
293 | import sbtn from './src/switchTest.vue'
294 | //progress
295 | import progress from './src/progressTest.vue'
296 | //slide
297 | import slide from './src/slideTest.vue'
298 | //menu
299 | import menubar from './src/menuTest.vue'
300 | 
301 | export default {
302 | 	data() {
303 | 		return {
304 | 			id : 'm-modal',
305 | 			back : false
306 | 		}
307 | 	},
308 | 	components : {
309 | 		asidebox,
310 | 		menubox,
311 | 		alert,
312 | 		confirm,
313 | 		prompt,
314 | 		actions,
315 | 		panel,
316 | 		accordion,
317 | 		tabpanel,
318 | 		btn,
319 | 		sbtn,
320 | 		progress,
321 | 		slide,
322 | 		menubar
323 | 	},
324 | 	ready() {
325 | 		let that = this,
326 | 			d = document.documentElement,
327 | 			b = document.body,
328 | 			linkList,
329 | 			len;
330 | 
331 | 		linkList = document.querySelectorAll('.main a[data-scroll]');
332 | 		len = linkList.length;
333 | 		console.log(linkList)
334 | 		window.addEventListener('scroll', function(){
335 | 			that.updateSidebar.apply(that, [d, b, linkList, len]);
336 | 		}, !1);
337 | 	},
338 | 	methods : {
339 | 		updateSidebar(d, b, linkList, len) {
340 | 			let top = d && d.scrollTop || b.scrollTop,
341 | 				last;
342 | 			top += 100;
343 | 
344 | 			this.setBackTop(top);
345 | 
346 | 			for (var i = 0; i < len; i++) {
347 | 				let link = linkList[i];
348 | 				if (link.offsetTop > top) {
349 | 					if (!last) last = link;
350 | 					break;
351 | 				} else {
352 | 					last = link;
353 | 				}
354 | 			}
355 | 
356 | 			if (last) this.setActive(last.hash.substring(1));
357 | 		},
358 | 		setActive(id) {
359 | 			this.id = id;
360 | 		},
361 | 		/**
362 | 		 * [toggle back to top button]
363 | 		 * @param {[type]} top [description]
364 | 		 */
365 | 		setBackTop(top) {
366 | 			this.back = top > 500 ? true : false;
367 | 		}
368 | 	}
369 | }
370 | </script>


--------------------------------------------------------------------------------
/dist/mui.min.css:
--------------------------------------------------------------------------------
1 | .t-btn:after,.t-hamburger:after,.t-hamburger:before,.t-menu__child:after{content:''}.fix-position,.t-actions__list li,.t-modal{overflow:hidden}.t-actions,.t-btn,.t-menu,.t-modal__header--tt,.t-slide__indicator,.t-tab nav{text-align:center}.t-btn{position:relative;display:block;line-height:2.5;font-size:16px;color:#fff;border-radius:3px}.t-btn--normal{background-color:#4c9cee}.t-btn--normal:active{background-color:#3895F5}.t-btn--warn{background-color:#ef4f4f}.t-btn--warn:active{background-color:#ef3737}.t-btn--default{color:rgba(0,0,0,.87);background-color:#f5f5f5}.t-btn--default:active{background-color:#ddd}.t-btn:after{display:block;position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-sizing:border-box}.t-hamburger-common{display:block;list-style:none;height:5px;margin-bottom:7px;background-color:#fff}.t-hamburger{display:block;width:30px;height:30px;padding:10px;background-color:#4c9cee}.t-hamburger li,.t-hamburger:after,.t-hamburger:before{display:block;list-style:none;height:5px;margin-bottom:7px;background-color:#fff}.t-hamburger:before{-webkit-animation:hb-top-close .4s ease-out forwards;animation:hb-top-close .4s ease-out forwards}.t-hamburger:after{-webkit-animation:hb-bottom-close .4s ease-out forwards;animation:hb-bottom-close .4s ease-out forwards}.t-hamburger li{-webkit-animation:hb-middle-close .4s ease-out forwards;animation:hb-middle-close .4s ease-out forwards}.t-menu,.t-menu__child{width:100%;background-color:#f1f1f1;border:1px solid #ddd}.t-hamburger.open:before{-webkit-animation:hb-top .4s ease-out forwards;animation:hb-top .4s ease-out forwards}.t-hamburger.open:after{-webkit-animation:hb-bottom .4s ease-out forwards;animation:hb-bottom .4s ease-out forwards}.t-hamburger.open li{-webkit-animation:hb-middle .4s ease-out forwards;animation:hb-middle .4s ease-out forwards}@-webkit-keyframes hb-top{0%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,12px,0) rotate(0)}100%{-webkit-transform:translate3d(0,12px,0) rotate(45deg)}}@keyframes hb-top{0%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,12px,0) rotate(0)}100%{-webkit-transform:translate3d(0,12px,0) rotate(45deg)}}@-webkit-keyframes hb-top-close{100%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,12px,0) rotate(0)}0%{-webkit-transform:translate3d(0,12px,0) rotate(45deg)}}@keyframes hb-top-close{100%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,12px,0) rotate(0)}0%{-webkit-transform:translate3d(0,12px,0) rotate(45deg)}}@-webkit-keyframes hb-bottom{0%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,-12px,0) rotate(0)}100%{-webkit-transform:translate3d(0,-12px,0) rotate(-45deg)}}@keyframes hb-bottom{0%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,-12px,0) rotate(0)}100%{-webkit-transform:translate3d(0,-12px,0) rotate(-45deg)}}@-webkit-keyframes hb-bottom-close{100%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,-12px,0) rotate(0)}0%{-webkit-transform:translate3d(0,-12px,0) rotate(-45deg)}}@keyframes hb-bottom-close{100%{-webkit-transform:translate3d(0,0,0) rotate(0)}50%{-webkit-transform:translate3d(0,-12px,0) rotate(0)}0%{-webkit-transform:translate3d(0,-12px,0) rotate(-45deg)}}@-webkit-keyframes hb-middle{0%,50%{opacity:1}100%,51%{opacity:0}}@keyframes hb-middle{0%,50%{opacity:1}100%,51%{opacity:0}}@-webkit-keyframes hb-middle-close{0%,50%{opacity:0}100%,51%{opacity:1}}@keyframes hb-middle-close{0%,50%{opacity:0}100%,51%{opacity:1}}.t-menu{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-moz-box-align:justify;-ms-flex-align:center;justify-content:space-between;font-size:12px}.t-actions,.t-modal,.t-panel{font-size:14px}.t-menu>li{position:relative;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.t-menu>li+li{border-left:1px solid #ddd}.t-menu__child{display:none;position:absolute;top:-8px;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);border-radius:3px}.border-top,.t-menu a,.t-menu a.current+ul{display:block}.t-menu__child:after{position:absolute;bottom:-5px;left:50%;display:block;width:0;height:0;border-top:5px solid #ddd;border-left:5px solid transparent;border-right:5px solid transparent;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.border-top,.t-dimmer{width:100%;top:0;left:0}.border-top,.t-menu__child>li+li{border-top:1px solid #ddd}.t-menu a{line-height:36px;color:rgba(0,0,0,.87);cursor:pointer}*{margin:0;padding:0}.btn-active{background-color:#ddd}.border-top{position:absolute;heiht:1px;-webkit-transform:scaleY(.5);transform:scaleY(.5);-webkit-transform-origin:0 0;transform-origin:0 0;z-index:1001}.t-dimmer{position:fixed;height:100%;background-color:rgba(0,0,0,.5);z-index:999;pointer-events:none}.t-modal{position:fixed;width:80%;top:50%;left:50%;background-color:#fafafa;border-radius:3px;z-index:1000;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.t-actions__list li+li:before,.t-modal__footer:before{heiht:1px;border-top:1px solid #ddd;-webkit-transform:scaleY(.5);z-index:1001}.t-modal__header{padding:15px 10px}.t-modal__header--tt{margin-bottom:15px;color:rgba(0,0,0,.87)}.t-modal__header--ct{line-height:22px;color:rgba(0,0,0,.54)}.t-modal__footer{position:relative;display:table;width:100%;border-collapse:collapse}.t-modal__footer--btn:nth-child(2):after,.t-modal__footer:before{display:block;content:'';left:0;top:0}.t-modal__footer:before{position:absolute;width:100%;transform:scaleY(.5);-webkit-transform-origin:0 0;transform-origin:0 0}.t-modal__footer--btn{position:relative;display:table-cell;height:44px;line-height:44px;text-align:center;color:rgba(0,0,0,.87);box-sizing:border-box;overflow:hidden}.t-modal__footer--btn:nth-child(2):after{position:absolute;width:1px;height:100%;border-left:1px solid #ddd;-webkit-transform:scaleX(.5);transform:scaleX(.5);transform-origin:0 0}.t-actions__cancel,.t-actions__list li{display:block;height:46px;line-height:46px}.t-actions{position:fixed;left:0;bottom:0;width:100%;z-index:1001}.t-actions__list{color:rgba(0,0,0,.54);background-color:#fafafa}.t-actions__list--tt{color:rgba(0,0,0,.87)}.t-actions__list li{position:relative;text-overflow:ellipsis;word-wrap:normal;white-space:nowrap}.t-actions__list li+li:before{content:'';position:absolute;display:block;top:0;left:0;width:100%;transform:scaleY(.5);-webkit-transform-origin:0 0;transform-origin:0 0}.t-actions__cancel{margin-top:10px;color:#fff;background-color:#4c9cee}a,div,header,li{-webkit-tap-highlight-color:transparent}.t-panel{border:1px solid #ddd;border-bottom:0;background-color:#fff}.t-panel__bd,.t-panel__hd{border-bottom:1px solid #ddd}.t-panel__hd{padding:0 .5rem;line-height:2.5;color:rgba(0,0,0,.87);background-color:#f5f5f5}.t-panel__bd--ct,.t-tab__bd{padding:10px}.t-tab{box-shadow:0 0 1px rgba(0,0,0,.2);border-radius:3px}.t-tab nav{width:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-moz-box-align:justify;-ms-flex-align:center;justify-content:space-between;line-height:2.5}.t-tab nav a{position:relative;display:block;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:rgba(0,0,0,.54)}.t-tab nav a+a:before,.t-tab nav a:after{display:block;content:'';position:absolute;box-sizing:border-box;left:0}.t-tab nav a:after{width:100%;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);-webkit-transform-origin:0 0;transform-origin:0 0;border-bottom:1px solid rgba(0,0,0,.2);border-color:#eee}.t-tab nav a.current{background-color:#f5f5f5;color:#333}.t-tab nav a+a:before{height:100%;top:0;-webkit-transform:scaleX(.5);transform:scaleX(.5);-webkit-transform-origin:0 0;transform-origin:0 0;border-left:1px solid rgba(0,0,0,.2);border-color:#eee}.t-tab__bd{display:none}.t-tab__bd.current{display:block}.t-aside-dimmer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.2);z-index:1010}.t-aside{position:fixed;top:0;bottom:0;width:250px;background-color:#252525;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:1011;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform}.t-slide,.t-slide__inner img{width:100%}.t-aside--left{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.t-aside--right{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.aside-fix{position:fixed;-webkit-transition:margin-left .3s ease-in-out;transition:margin-left .3s ease-in-out}.t-slide{position:relative;overflow:hidden}.t-slide__inner{overflow:hidden;-webkit-transition:-webkit-transform .3s linear;transition:transform .3s linear}.t-slide__inner li{float:left}.t-slide__inner a{display:block;font-size:0}.t-slide__indicator{position:absolute;left:0;right:0;bottom:10px;font-size:0;height:5px;line-height:5px;overflow:hidden}.t-slide__indicator span{display:inline-block;width:5px;height:5px;background-color:#fff;border-radius:50%}.t-slide__indicator span.current{background-color:#4c9cee}.t-slide__indicator span+span{margin-left:5px}.t-switch{position:relative;width:50px;height:24px;border-radius:20px;background-color:#ddd;-webkit-transition:background-color .1s ease-in;transition:background-color .1s ease-in}.t-switch.open{background-color:#4c9cee}.t-switch.open .t-switch__btn{right:2px;left:auto}.t-switch__btn{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background-color:#fff;-webkit-transition:left .2s ease-in;transition:left .2s ease-in}


--------------------------------------------------------------------------------
/dist/mui.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.mui=e():t.mui=e()}(this,function(){return function(t){function e(s){if(o[s])return o[s].exports;var i=o[s]={exports:{},id:s,loaded:!1};return t[s].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var o={};return e.m=t,e.c=o,e.p="dist/",e(0)}([function(t,e,o){t.exports={alert:o(56),confrim:o(58),prompt:o(61),actions:o(55),panel:o(15),accordion:o(54),tabpanel:o(64),btn:o(57),switchbtn:o(63),progress:o(60),slide:o(62),menubar:o(59)}},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var o=this[e];o[2]?t.push("@media "+o[2]+"{"+o[1]+"}"):t.push(o[1])}return t.join("")},t.i=function(e,o){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},i=0;i<this.length;i++){var n=this[i][0];"number"==typeof n&&(s[n]=!0)}for(i=0;i<e.length;i++){var r=e[i];"number"==typeof r[0]&&s[r[0]]||(o&&!r[2]?r[2]=o:o&&(r[2]="("+r[2]+") and ("+o+")"),t.push(r))}},t}},function(t,e,o){function s(t,e){for(var o=0;o<t.length;o++){var s=t[o],i=f[s.id];if(i){i.refs++;for(var n=0;n<i.parts.length;n++)i.parts[n](s.parts[n]);for(;n<s.parts.length;n++)i.parts.push(p(s.parts[n],e))}else{for(var r=[],n=0;n<s.parts.length;n++)r.push(p(s.parts[n],e));f[s.id]={id:s.id,refs:1,parts:r}}}}function i(t){for(var e=[],o={},s=0;s<t.length;s++){var i=t[s],n=i[0],r=i[1],a=i[2],l=i[3],p={css:r,media:a,sourceMap:l};o[n]?o[n].parts.push(p):e.push(o[n]={id:n,parts:[p]})}return e}function n(t,e){var o=v(),s=_[_.length-1];if("top"===t.insertAt)s?s.nextSibling?o.insertBefore(e,s.nextSibling):o.appendChild(e):o.insertBefore(e,o.firstChild),_.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");o.appendChild(e)}}function r(t){t.parentNode.removeChild(t);var e=_.indexOf(t);e>=0&&_.splice(e,1)}function a(t){var e=document.createElement("style");return e.type="text/css",n(t,e),e}function l(t){var e=document.createElement("link");return e.rel="stylesheet",n(t,e),e}function p(t,e){var o,s,i;if(e.singleton){var n=y++;o=m||(m=a(e)),s=c.bind(null,o,n,!1),i=c.bind(null,o,n,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(o=l(e),s=u.bind(null,o),i=function(){r(o),o.href&&URL.revokeObjectURL(o.href)}):(o=a(e),s=d.bind(null,o),i=function(){r(o)});return s(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;s(t=e)}else i()}}function c(t,e,o,s){var i=o?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,i);else{var n=document.createTextNode(i),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(n,r[e]):t.appendChild(n)}}function d(t,e){var o=e.css,s=e.media;e.sourceMap;if(s&&t.setAttribute("media",s),t.styleSheet)t.styleSheet.cssText=o;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(o))}}function u(t,e){var o=e.css,s=(e.media,e.sourceMap);s&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */");var i=new Blob([o],{type:"text/css"}),n=t.href;t.href=URL.createObjectURL(i),n&&URL.revokeObjectURL(n)}var f={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},x=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=h(function(){return document.head||document.getElementsByTagName("head")[0]}),m=null,y=0,_=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=x()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var o=i(t);return s(o,e),function(t){for(var n=[],r=0;r<o.length;r++){var a=o[r],l=f[a.id];l.refs--,n.push(l)}if(t){var p=i(t);s(p,e)}for(var r=0;r<n.length;r++){var l=n[r];if(0===l.refs){for(var c=0;c<l.parts.length;c++)l.parts[c]();delete f[l.id]}}}};var g=function(){var t=[];return function(e,o){return t[e]=o,t.filter(Boolean).join("\n")}}()},,,,,,,,,,,,,function(t,e,o){o(39),t.exports=o(22),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(48)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={ready:function(){this.init(),this.listen()},methods:{init:function(){this.$children.forEach(function(t,e){e>0&&(t.show=!1)})},listen:function(){var t=this;t.$on("toggle",function(e){t.$children.forEach(function(t){e!==t&&(t.show=!1)})})}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{show:{type:Boolean,"default":!1,twoWay:!0},title:{type:String,"default":""}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{show:{type:Boolean,"default":!1,twoWay:!0},title:{type:String},content:{type:String}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{type:{type:String,"default":"default"},cb:{type:Function},opt:{type:null,"default":""}},methods:{callback:function(){""===this.opt?this.cb():this.cb(this.opt)}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{show:{type:Boolean,"default":!1,twoWay:!0},title:{type:String},content:{type:String}},methods:{notify:function(t){this.show=!1,this.$dispatch(t)}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{list:{type:Array}},methods:{handle:function(t,e){e?window.location.href=e:t.target.classList.toggle("current")}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{height:""}},props:{type:{type:String,"default":"normal"},show:{type:Boolean,"default":!0},title:{type:String}},ready:function(){this.init()},methods:{toggle:function(){"normal"!==this.type&&(this.show=!this.show,this.$dispatch("toggle",this))},init:function(){if("normal"===this.type)this.show=!0;else{var t=this.$els.panel;t.style.display="block",t.style.height=t.getBoundingClientRect().height+"px",this.show||(t.style.display="none")}}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{timer:null,size:100,show:!1}},props:{color:{type:String,"default":"#4c9cee"},status:{type:String,"default":"hide"},num:{type:Number,"default":100}},watch:{status:function(t){var e=this;return{hide:e.hide,start:e.start,done:e.done}[t].call(e)},num:function(t){100!==t?(clearInterval(this.timer),this.size=100-this.num,this.setSize(this.size),this.start()):this.done()}},methods:{start:function(){var t=this,e=t.size;t.show=!0,t.timer=setInterval(function(){e>10?(e-=1,t.setSize.call(t,e)):clearInterval(t.timer)},1e3)},done:function(){var t=this;t.setSize.call(t,0),clearInterval(this.timer),setTimeout(function(){t.show=!1,t.setSize.call(t,100),t.size=100},200)},hide:function(){this.show=!1},setSize:function(t){this.$el.style.transform="translate3d(-"+t+"%,0,0)",this.$el.style.webkitTransform="translate3d(-"+t+"%,0,0)"}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{key:""}},props:{show:{type:Boolean,"default":!1,twoWay:!0},title:{type:String},content:{type:String}},methods:{notify:function(t){this.show=!1,this.$dispatch(t,this.key)}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{index:0,width:0,position:0,tmp:0,xy:0,zz:0}},props:{detail:{type:Boolean,"default":!1},list:{type:Array}},ready:function(){this.width=document.documentElement.getBoundingClientRect().width},methods:{start:function(t){this.xy=t.touches[0].clientX},move:function(t){this.zz=t.touches[0].clientX-this.xy,this.position=this.zz+this.tmp},end:function(t){this.zz<-100?this.index<this.list.length-1&&this.index++:this.zz>100&&this.index>0&&this.index--,this.tmp=this.position=-this.index*this.width}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{status:{type:Boolean,"default":!1,toWay:!0}}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{index:0}},props:{list:{type:Array}}}},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".actions-transition{-webkit-transition:all ease .3s;transition:all ease .3s;-webkit-transform:translateZ(0);transform:translateZ(0)}.actions-enter,.actions-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}",""])},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".t-prompt-ipt{padding:0 20px 20px}.t-prompt-ipt input{width:100%;line-height:26px;padding:3px 10px;border:1px solid #ddd;box-sizing:border-box}",""])},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".t-progress-bar{position:fixed;top:0;left:0;width:100%;height:2px;z-index:999;-webkit-transition:all .2s ease;transition:all .2s ease}",""])},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".t-accordion .t-panel+.t-panel{border-top:0}",""])},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".toggle-transition{-webkit-transition:height .3s ease;transition:height .3s ease;overflow:hidden}.toggle-enter,.toggle-leave{height:0!important}",""])},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".t-tab__bd{display:block}",""])},function(t,e,o){e=t.exports=o(1)(),e.push([t.id,".slide{position:relative;width:16rem;height:6rem;overflow:hidden}.slide-detail{height:16rem}.slide__inner{position:relative;width:16rem;height:100%}.slide__inner--img{position:absolute;top:0;width:100%;height:100%}.slide__inner img{width:100%}.slide__indicator{position:absolute;right:10px;bottom:10px}.slide__indicator span{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background-color:#eee}.slide__indicator span.current{background-color:#4c9}.slide__inner{-webkit-transition:-webkit-transform .5s linear;transition:-webkit-transform .5s linear;transition:transform .5s linear;transition:transform .5s linear,-webkit-transform .5s linear}",""])},function(t,e,o){var s=o(28);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,o){var s=o(29);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,o){var s=o(30);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,o){var s=o(31);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,o){var s=o(32);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,o){var s=o(33);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e,o){var s=o(34);"string"==typeof s&&(s=[[t.id,s,""]]);o(2)(s,{});s.locals&&(t.exports=s.locals)},function(t,e){t.exports="<div class=t-accordion><slot></slot></div>"},function(t,e){t.exports='<div class=t-dimmer v-show=show></div><div class=t-actions v-show=show transition=actions><ul class=t-actions__list><li class=t-actions__list--tt v-if=title v-text=title></li><slot></slot></ul><a class=t-actions__cancel @click.prevent="show=false">取消</a></div>'},function(t,e){t.exports='<div class=t-dimmer v-show=show></div><div class=t-modal v-show=show><div class=t-modal__header><h3 class=t-modal__header--tt v-show="title!==\'\'" v-text=title></h3><p class=t-modal__header--ct v-text=content></p></div><div class=t-modal__footer><a class=t-modal__footer--btn @click.prevent="show=false">确定</a></div></div>'},function(t,e){t.exports="<a class=t-btn :class=\"['t-btn--'+type]\" @click.prevent=callback><slot></slot></a>"},function(t,e){t.exports="<div class=t-dimmer v-show=show></div><div class=t-modal v-show=show><div class=t-modal__header><h3 class=t-modal__header--tt v-show=\"title!==''\" v-text=title></h3><p class=t-modal__header--ct v-text=content></p></div><div class=t-modal__footer><a class=t-modal__footer--btn @click.prevent=\"notify('cancel')\">取消</a> <a class=t-modal__footer--btn @click.prevent=\"notify('confirm')\">确定</a></div></div>"},function(t,e){t.exports='<ul class=t-menu><li v-for="its in list"><a v-text=its.name @click.prevent=handle($event,its.link)></a><ul class=t-menu__child v-if=its.child><li v-for="items in its.child"><a :href=items.link v-text=items.name></a></li></ul></li></ul>'},function(t,e){t.exports="<div class=t-panel><header class=t-panel__hd @click=toggle v-text=title></header><div class=t-panel__bd v-el:panel v-show=show transition=toggle><div class=t-panel__bd--ct><slot></slot></div></div></div>"},function(t,e){t.exports="<div class=t-progress-bar :show=show :style=\"{backgroundColor:color,transform:'translate3d(-100%,0,0)'}\"></div>"},function(t,e){t.exports="<div class=t-dimmer v-show=show></div><div class=t-modal v-show=show><div class=t-modal__header><h3 class=t-modal__header--tt v-show=\"title !== ''\" v-text=title></h3><p class=t-modal__header--ct v-text=content></p></div><div class=t-prompt-ipt><input v-model=key></div><div class=t-modal__footer><a class=t-modal__footer--btn @click.prevent=\"notify('cancel')\">取消</a> <a class=t-modal__footer--btn @click.prevent=\"notify('confirm')\">确定</a></div></div>"},function(t,e){t.exports='<section class=slide :class="{\'slide-detail\':detail}"><ul class=slide__inner @touchstart.prevent=start @touchmove.prevent=move @touchend.prevent=end :style="{transform:\'translate3d(\'+position+\'px,0,0)\'}"><li v-for="its in list" class=slide__inner--img :style="{left : $index * width + \'px\'}"><a :href=its.link><img :src=its.img></a></li></ul><div class=slide__indicator><span v-for="its in list" :class="{\'current\':$index===index}"></span></div></section>'},function(t,e){t.exports='<div class=t-switch :class="{\'open\':status}" @click="status=!status"><div class=t-switch__btn></div></div>'},function(t,e){t.exports='<section class=t-tab><nav><a v-for="its in list" v-text=its.title :class="{\'current\':index===$index}" @click.prevent="index=$index"></a></nav><div class=t-tab__bd v-for="its in list" v-show="index===$index"><p v-text=its.content></p></div></section>'},function(t,e,o){o(38),t.exports=o(16),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(42)},function(t,e,o){o(35),t.exports=o(17),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(43)},function(t,e,o){t.exports=o(18),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(44)},function(t,e,o){t.exports=o(19),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(45)},function(t,e,o){t.exports=o(20),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(46)},function(t,e,o){t.exports=o(21),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(47)},function(t,e,o){o(37),t.exports=o(23),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(49)},function(t,e,o){o(36),t.exports=o(24),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(50)},function(t,e,o){o(41),t.exports=o(25),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(51)},function(t,e,o){t.exports=o(26),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(52)},function(t,e,o){o(40),t.exports=o(27),t.exports.__esModule&&(t.exports=t.exports["default"]),("function"==typeof t.exports?t.exports.options:t.exports).template=o(53)}])});


--------------------------------------------------------------------------------
/dist/mui.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .t-btn {
  3 |   position: relative;
  4 |   display: block;
  5 |   line-height: 2.5;
  6 |   font-size: 16px;
  7 |   text-align: center;
  8 |   color: #fff;
  9 |   border-radius: 3px;
 10 | }
 11 | .t-btn--normal {
 12 |   background-color: #4c9cee;
 13 | }
 14 | .t-btn--normal:active {
 15 |   background-color: #3895F5;
 16 | }
 17 | .t-btn--warn {
 18 |   background-color: #ef4f4f;
 19 | }
 20 | .t-btn--warn:active {
 21 |   background-color: #ef3737;
 22 | }
 23 | .t-btn--default {
 24 |   color: rgba(0, 0, 0, 0.87);
 25 |   background-color: #f5f5f5;
 26 | }
 27 | .t-btn--default:active {
 28 |   background-color: #ddd;
 29 | }
 30 | .t-btn:after {
 31 |   display: block;
 32 |   content: '';
 33 |   position: absolute;
 34 |   top: 0;
 35 |   left: 0;
 36 |   width: 200%;
 37 |   height: 200%;
 38 |   -webkit-transform: scale(0.5);
 39 |   transform: scale(0.5);
 40 |   -webkit-transform-origin: 0 0;
 41 |   transform-origin: 0 0;
 42 |   border: 1px solid rgba(0, 0, 0, 0.2);
 43 |   border-radius: 6px;
 44 |   box-sizing: border-box;
 45 | }
 46 | /**
 47 |  * Hamburger
 48 |  */
 49 | .t-hamburger-common {
 50 |   display: block;
 51 |   list-style: none;
 52 |   height: 5px;
 53 |   margin-bottom: 7px;
 54 |   background-color: #fff;
 55 | }
 56 | .t-hamburger {
 57 |   display: block;
 58 |   width: 30px;
 59 |   height: 30px;
 60 |   padding: 10px;
 61 |   background-color: #4c9cee;
 62 | }
 63 | .t-hamburger li {
 64 |   display: block;
 65 |   list-style: none;
 66 |   height: 5px;
 67 |   margin-bottom: 7px;
 68 |   background-color: #fff;
 69 | }
 70 | .t-hamburger:before,
 71 | .t-hamburger:after {
 72 |   content: '';
 73 |   display: block;
 74 |   list-style: none;
 75 |   height: 5px;
 76 |   margin-bottom: 7px;
 77 |   background-color: #fff;
 78 | }
 79 | .t-hamburger:before {
 80 |   -webkit-animation: hb-top-close 400ms ease-out forwards;
 81 |   animation: hb-top-close 400ms ease-out forwards;
 82 | }
 83 | .t-hamburger:after {
 84 |   -webkit-animation: hb-bottom-close 400ms ease-out forwards;
 85 |   animation: hb-bottom-close 400ms ease-out forwards;
 86 | }
 87 | .t-hamburger li {
 88 |   -webkit-animation: hb-middle-close 400ms ease-out forwards;
 89 |   animation: hb-middle-close 400ms ease-out forwards;
 90 | }
 91 | .t-hamburger.open:before {
 92 |   -webkit-animation: hb-top 400ms ease-out forwards;
 93 |   animation: hb-top 400ms ease-out forwards;
 94 | }
 95 | .t-hamburger.open:after {
 96 |   -webkit-animation: hb-bottom 400ms ease-out forwards;
 97 |   animation: hb-bottom 400ms ease-out forwards;
 98 | }
 99 | .t-hamburger.open li {
100 |   -webkit-animation: hb-middle 400ms ease-out forwards;
101 |   animation: hb-middle 400ms ease-out forwards;
102 | }
103 | @-webkit-keyframes hb-top {
104 |   0% {
105 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
106 |   }
107 |   50% {
108 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
109 |   }
110 |   100% {
111 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
112 |   }
113 | }
114 | @keyframes hb-top {
115 |   0% {
116 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
117 |   }
118 |   50% {
119 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
120 |   }
121 |   100% {
122 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
123 |   }
124 | }
125 | @-webkit-keyframes hb-top-close {
126 |   100% {
127 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
128 |   }
129 |   50% {
130 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
131 |   }
132 |   0% {
133 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
134 |   }
135 | }
136 | @keyframes hb-top-close {
137 |   100% {
138 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
139 |   }
140 |   50% {
141 |     -webkit-transform: translate3d(0, 12px, 0) rotate(0);
142 |   }
143 |   0% {
144 |     -webkit-transform: translate3d(0, 12px, 0) rotate(45deg);
145 |   }
146 | }
147 | @-webkit-keyframes hb-bottom {
148 |   0% {
149 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
150 |   }
151 |   50% {
152 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
153 |   }
154 |   100% {
155 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
156 |   }
157 | }
158 | @keyframes hb-bottom {
159 |   0% {
160 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
161 |   }
162 |   50% {
163 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
164 |   }
165 |   100% {
166 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
167 |   }
168 | }
169 | @-webkit-keyframes hb-bottom-close {
170 |   100% {
171 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
172 |   }
173 |   50% {
174 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
175 |   }
176 |   0% {
177 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
178 |   }
179 | }
180 | @keyframes hb-bottom-close {
181 |   100% {
182 |     -webkit-transform: translate3d(0, 0, 0) rotate(0);
183 |   }
184 |   50% {
185 |     -webkit-transform: translate3d(0, -12px, 0) rotate(0);
186 |   }
187 |   0% {
188 |     -webkit-transform: translate3d(0, -12px, 0) rotate(-45deg);
189 |   }
190 | }
191 | @-webkit-keyframes hb-middle {
192 |   0% {
193 |     opacity: 1;
194 |   }
195 |   50% {
196 |     opacity: 1;
197 |   }
198 |   51% {
199 |     opacity: 0;
200 |   }
201 |   100% {
202 |     opacity: 0;
203 |   }
204 | }
205 | @keyframes hb-middle {
206 |   0% {
207 |     opacity: 1;
208 |   }
209 |   50% {
210 |     opacity: 1;
211 |   }
212 |   51% {
213 |     opacity: 0;
214 |   }
215 |   100% {
216 |     opacity: 0;
217 |   }
218 | }
219 | @-webkit-keyframes hb-middle-close {
220 |   0% {
221 |     opacity: 0;
222 |   }
223 |   50% {
224 |     opacity: 0;
225 |   }
226 |   51% {
227 |     opacity: 1;
228 |   }
229 |   100% {
230 |     opacity: 1;
231 |   }
232 | }
233 | @keyframes hb-middle-close {
234 |   0% {
235 |     opacity: 0;
236 |   }
237 |   50% {
238 |     opacity: 0;
239 |   }
240 |   51% {
241 |     opacity: 1;
242 |   }
243 |   100% {
244 |     opacity: 1;
245 |   }
246 | }
247 | 
248 | .t-menu {
249 |   width: 100%;
250 |   display: -webkit-box;
251 |   display: -moz-box;
252 |   display: -ms-flexbox;
253 |   display: flex;
254 |   -webkit-box-pack: justify;
255 |   -moz-box-pack: justify;
256 |   -ms-flex-pack: justify;
257 |   -webkit-box-align: center;
258 |   -moz-box-align: justify;
259 |   -ms-flex-align: center;
260 |   justify-content: space-between;
261 |   text-align: center;
262 |   background-color: #f1f1f1;
263 |   border: 1px solid #ddd;
264 |   font-size: 12px;
265 | }
266 | .t-menu > li {
267 |   position: relative;
268 |   -webkit-box-flex: 1;
269 |   -moz-box-flex: 1;
270 |   -webkit-flex: 1;
271 |   -ms-flex: 1;
272 |   flex: 1;
273 | }
274 | .t-menu > li + li {
275 |   border-left: 1px solid #ddd;
276 | }
277 | .t-menu__child {
278 |   display: none;
279 |   position: absolute;
280 |   width: 100%;
281 |   top: -8px;
282 |   -webkit-transform: translate3d(0, -100%, 0);
283 |   transform: translate3d(0, -100%, 0);
284 |   background-color: #f1f1f1;
285 |   border: 1px solid #ddd;
286 |   border-radius: 3px;
287 | }
288 | .t-menu__child:after {
289 |   position: absolute;
290 |   bottom: -5px;
291 |   left: 50%;
292 |   content: '';
293 |   display: block;
294 |   width: 0;
295 |   height: 0;
296 |   border-top: 5px solid #ddd;
297 |   border-left: 5px solid transparent;
298 |   border-right: 5px solid transparent;
299 |   -webkit-transform: translate3d(-50%, 0, 0);
300 |   transform: translate3d(-50%, 0, 0);
301 | }
302 | .t-menu__child > li + li {
303 |   border-top: 1px solid #ddd;
304 | }
305 | .t-menu a {
306 |   display: block;
307 |   line-height: 36px;
308 |   color: rgba(0, 0, 0, 0.87);
309 |   cursor: pointer;
310 | }
311 | .t-menu a.current + ul {
312 |   display: block;
313 | }
314 | 
315 | /**
316 |  * 模态框组件
317 |  */
318 | /**
319 |  * 遮罩层
320 |  */
321 | * {
322 |   margin: 0;
323 |   padding: 0;
324 | }
325 | .fix-position {
326 |   overflow: hidden;
327 | }
328 | .btn-active {
329 |   background-color: #ddd;
330 | }
331 | .border-top {
332 |   position: absolute;
333 |   display: block;
334 |   top: 0;
335 |   left: 0;
336 |   width: 100%;
337 |   heiht: 1px;
338 |   border-top: 1px solid #ddd;
339 |   -webkit-transform: scaleY(0.5);
340 |   transform: scaleY(0.5);
341 |   -webkit-transform-origin: 0 0;
342 |   transform-origin: 0 0;
343 |   z-index: 1001;
344 | }
345 | .t-dimmer {
346 |   position: fixed;
347 |   width: 100%;
348 |   height: 100%;
349 |   top: 0;
350 |   left: 0;
351 |   background-color: rgba(0, 0, 0, 0.5);
352 |   z-index: 999;
353 |   pointer-events: none;
354 | }
355 | .t-modal {
356 |   position: fixed;
357 |   width: 80%;
358 |   top: 50%;
359 |   left: 50%;
360 |   font-size: 14px;
361 |   background-color: #fafafa;
362 |   border-radius: 3px;
363 |   overflow: hidden;
364 |   z-index: 1000;
365 |   -webkit-transform: translate(-50%, -50%);
366 |   transform: translate(-50%, -50%);
367 | }
368 | .t-modal__header {
369 |   padding: 15px 10px 15px;
370 | }
371 | .t-modal__header--tt {
372 |   margin-bottom: 15px;
373 |   text-align: center;
374 |   color: rgba(0, 0, 0, 0.87);
375 | }
376 | .t-modal__header--ct {
377 |   line-height: 22px;
378 |   color: rgba(0, 0, 0, 0.54);
379 | }
380 | .t-modal__footer {
381 |   position: relative;
382 |   display: table;
383 |   width: 100%;
384 |   border-collapse: collapse;
385 | }
386 | .t-modal__footer:before {
387 |   content: '';
388 |   position: absolute;
389 |   display: block;
390 |   top: 0;
391 |   left: 0;
392 |   width: 100%;
393 |   heiht: 1px;
394 |   border-top: 1px solid #ddd;
395 |   -webkit-transform: scaleY(0.5);
396 |   transform: scaleY(0.5);
397 |   -webkit-transform-origin: 0 0;
398 |   transform-origin: 0 0;
399 |   z-index: 1001;
400 | }
401 | .t-modal__footer--btn {
402 |   position: relative;
403 |   display: table-cell;
404 |   height: 44px;
405 |   line-height: 44px;
406 |   text-align: center;
407 |   color: rgba(0, 0, 0, 0.87);
408 |   box-sizing: border-box;
409 |   overflow: hidden;
410 | }
411 | .t-modal__footer--btn:nth-child(2):after {
412 |   display: block;
413 |   content: '';
414 |   position: absolute;
415 |   top: 0;
416 |   left: 0;
417 |   width: 1px;
418 |   height: 100%;
419 |   border-left: 1px solid #ddd;
420 |   -webkit-transform: scaleX(0.5);
421 |   transform: scaleX(0.5);
422 |   transform-origin: 0 0;
423 | }
424 | .t-actions {
425 |   position: fixed;
426 |   left: 0;
427 |   bottom: 0;
428 |   width: 100%;
429 |   font-size: 14px;
430 |   text-align: center;
431 |   z-index: 1001;
432 | }
433 | .t-actions__list {
434 |   color: rgba(0, 0, 0, 0.54);
435 |   background-color: #fafafa;
436 | }
437 | .t-actions__list--tt {
438 |   color: rgba(0, 0, 0, 0.87);
439 | }
440 | .t-actions__list li {
441 |   position: relative;
442 |   display: block;
443 |   height: 46px;
444 |   line-height: 46px;
445 |   overflow: hidden;
446 |   text-overflow: ellipsis;
447 |   word-wrap: normal;
448 |   white-space: nowrap;
449 | }
450 | .t-actions__list li + li:before {
451 |   content: '';
452 |   position: absolute;
453 |   display: block;
454 |   top: 0;
455 |   left: 0;
456 |   width: 100%;
457 |   heiht: 1px;
458 |   border-top: 1px solid #ddd;
459 |   -webkit-transform: scaleY(0.5);
460 |   transform: scaleY(0.5);
461 |   -webkit-transform-origin: 0 0;
462 |   transform-origin: 0 0;
463 |   z-index: 1001;
464 | }
465 | .t-actions__cancel {
466 |   display: block;
467 |   margin-top: 10px;
468 |   height: 46px;
469 |   line-height: 46px;
470 |   color: #fff;
471 |   background-color: #4c9cee;
472 | }
473 | 
474 | header,
475 | a,
476 | li,
477 | div {
478 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
479 | }
480 | .t-panel {
481 |   font-size: 14px;
482 |   border: 1px solid #ddd;
483 |   border-bottom: 0;
484 |   background-color: #fff;
485 | }
486 | .t-panel__hd {
487 |   padding: 0 .5rem;
488 |   line-height: 2.5;
489 |   color: rgba(0, 0, 0, 0.87);
490 |   background-color: #f5f5f5;
491 |   border-bottom: 1px solid #ddd;
492 | }
493 | .t-panel__bd {
494 |   border-bottom: 1px solid #ddd;
495 | }
496 | .t-panel__bd--ct {
497 |   padding: 10px;
498 | }
499 | /**
500 |  * tab-panel
501 |  */
502 | .t-tab {
503 |   box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
504 |   border-radius: 3px;
505 | }
506 | .t-tab nav {
507 |   width: 100%;
508 |   display: -webkit-box;
509 |   display: -moz-box;
510 |   display: -ms-flexbox;
511 |   display: flex;
512 |   -webkit-box-pack: justify;
513 |   -moz-box-pack: justify;
514 |   -ms-flex-pack: justify;
515 |   -webkit-box-align: center;
516 |   -moz-box-align: justify;
517 |   -ms-flex-align: center;
518 |   justify-content: space-between;
519 |   text-align: center;
520 |   line-height: 2.5;
521 | }
522 | .t-tab nav a {
523 |   position: relative;
524 |   display: block;
525 |   -webkit-box-flex: 1;
526 |   -moz-box-flex: 1;
527 |   -webkit-flex: 1;
528 |   -ms-flex: 1;
529 |   flex: 1;
530 |   color: rgba(0, 0, 0, 0.54);
531 | }
532 | .t-tab nav a:after {
533 |   display: block;
534 |   content: '';
535 |   position: absolute;
536 |   box-sizing: border-box;
537 |   width: 100%;
538 |   bottom: 0;
539 |   left: 0;
540 |   -webkit-transform: scaleY(0.5);
541 |   transform: scaleY(0.5);
542 |   -webkit-transform-origin: 0 0;
543 |   transform-origin: 0 0;
544 |   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
545 |   border-color: #eee;
546 | }
547 | .t-tab nav a.current {
548 |   background-color: #f5f5f5;
549 |   color: #333;
550 | }
551 | .t-tab nav a + a:before {
552 |   display: block;
553 |   content: '';
554 |   position: absolute;
555 |   box-sizing: border-box;
556 |   height: 100%;
557 |   left: 0;
558 |   top: 0;
559 |   -webkit-transform: scaleX(0.5);
560 |   transform: scaleX(0.5);
561 |   -webkit-transform-origin: 0 0;
562 |   transform-origin: 0 0;
563 |   border-left: 1px solid rgba(0, 0, 0, 0.2);
564 |   border-color: #eee;
565 | }
566 | .t-tab__bd {
567 |   display: none;
568 |   padding: 10px;
569 | }
570 | .t-tab__bd.current {
571 |   display: block;
572 | }
573 | 
574 | .t-aside-dimmer {
575 |   position: fixed;
576 |   top: 0;
577 |   left: 0;
578 |   width: 100%;
579 |   height: 100%;
580 |   background-color: rgba(0, 0, 0, 0.2);
581 |   z-index: 1010;
582 | }
583 | .t-aside {
584 |   position: fixed;
585 |   top: 0;
586 |   bottom: 0;
587 |   width: 250px;
588 |   background-color: #252525;
589 |   overflow-y: auto;
590 |   -webkit-overflow-scrolling: touch;
591 |   z-index: 1011;
592 |   -webkit-transform-style: preserve-3d;
593 |   transform-style: preserve-3d;
594 |   will-change: transform;
595 | }
596 | .t-aside--left {
597 |   left: 0;
598 |   -webkit-transform: translate3d(-100%, 0, 0);
599 |   transform: translate3d(-100%, 0, 0);
600 | }
601 | .t-aside--right {
602 |   right: 0;
603 |   -webkit-transform: translate3d(100%, 0, 0);
604 |   transform: translate3d(100%, 0, 0);
605 | }
606 | .aside-fix {
607 |   position: fixed;
608 |   -webkit-transition: margin-left 0.3s ease-in-out;
609 |   transition: margin-left 0.3s ease-in-out;
610 | }
611 | 
612 | .t-slide {
613 |   position: relative;
614 |   width: 100%;
615 |   overflow: hidden;
616 | }
617 | .t-slide__inner {
618 |   overflow: hidden;
619 |   -webkit-transition: -webkit-transform 0.3s linear;
620 |   transition: transform .3s linear;
621 | }
622 | .t-slide__inner li {
623 |   float: left;
624 | }
625 | .t-slide__inner a {
626 |   display: block;
627 |   font-size: 0;
628 | }
629 | .t-slide__inner img {
630 |   width: 100%;
631 | }
632 | .t-slide__indicator {
633 |   position: absolute;
634 |   left: 0;
635 |   right: 0;
636 |   bottom: 10px;
637 |   font-size: 0;
638 |   height: 5px;
639 |   line-height: 5px;
640 |   text-align: center;
641 |   overflow: hidden;
642 | }
643 | .t-slide__indicator span {
644 |   display: inline-block;
645 |   width: 5px;
646 |   height: 5px;
647 |   background-color: #fff;
648 |   border-radius: 50%;
649 | }
650 | .t-slide__indicator span.current {
651 |   background-color: #4c9cee;
652 | }
653 | .t-slide__indicator span + span {
654 |   margin-left: 5px;
655 | }
656 | 
657 | .t-switch {
658 |   position: relative;
659 |   width: 50px;
660 |   height: 24px;
661 |   border-radius: 20px;
662 |   background-color: #ddd;
663 |   -webkit-transition: background-color 0.1s ease-in;
664 |   transition: background-color 0.1s ease-in;
665 | }
666 | .t-switch.open {
667 |   background-color: #4c9cee;
668 | }
669 | .t-switch.open .t-switch__btn {
670 |   right: 2px;
671 |   left: auto;
672 | }
673 | .t-switch__btn {
674 |   position: absolute;
675 |   top: 2px;
676 |   left: 2px;
677 |   width: 20px;
678 |   height: 20px;
679 |   border-radius: 50%;
680 |   background-color: #fff;
681 |   -webkit-transition: left 0.2s ease-in;
682 |   transition: left 0.2s ease-in;
683 | }
684 | 


--------------------------------------------------------------------------------
/src/json/school.json:
--------------------------------------------------------------------------------
1 | {"北京市":["北京大学","中国人民大学","清华大学","北京交通大学","北京科技大学","中国石油大学","北京邮电大学","华北电力大学","北京化工大学","中国农业大学","北京林业大学","北京中医药大学","北京师范大学","北京外国语大学","北京语言大学","对外经济贸易大学","中央财经大学","中国政法大学","中央民族大学","中国人民公安大学","北京协和医学院","北京体育大学","北京理工大学","北京航空航天大学","北京信息科技大学","北京工商大学","北京联合大学","北京工业大学","北方工业大学","首都医科大学","首都师范大学","首都经济贸易大学","中国传媒大学","国际关系学院","中央戏剧学院","中央美术学院","中央音乐学院","北京电子科技学院","外交学院","中国劳动关系学院","中国青年政治学院","中华女子学院","北京服装学院","北京建筑工程学院","北京印刷学院","首钢工学院","北京石油化工学院","北京农学院","首都体育学院","北京第二外国语学院","北京物资学院","北京警察学院","中国音乐学院","中国戏曲学院","北京电影学院","北京舞蹈学院","北京城市学院","北京青年政治学院","北京交通运输职业学院","北京信息职业技术学院","北京科技经营管理学院","北京电子科技职业学院","北京工业职业技术学院","北京科技职业学院","北京戏曲艺术职业学院","北京农业职业学院","北京汇佳职业学院","北京财贸职业学院","北京经济技术职业学院","北京北大方正软件职业技术学院","北京交通职业技术学院","北京培黎职业学院","北京吉利大学","北京经济管理职业学院","北京卫生职业学院","北京政法职业学院","北京体育职业学院","北京社会管理职业学院","北京新圆明职业学院","北京现代职业技术学院","北京京北职业技术学院","北京经贸职业学院","北京劳动保障职业学院","中国地质大学（北京）"],"天津市":["南开大学","天津大学","中国民航大学","天津工业大学","天津科技大学","天津理工大学","天津医科大学","天津中医药大学","天津师范大学","天津职业技术师范大学","天津外国语大学","天津财经大学","天津商业大学","天津天狮学院","天津城市建设学院","天津农学院","天津体育学院","天津美术学院","天津音乐学院","天津医学高等专科学校","天津工程职业技术学院","天津机电职业技术学院","天津现代职业技术学院","天津公安警官职业学院","天津轻工职业技术学院","天津市职业大学","天津渤海职业技术学院","天津滨海职业学院","天津电子信息职业技术学院","天津石油职业技术学院","天津交通职业学院","天津中德职业技术学院","天津城市职业学院","天津冶金职业技术学院","天津商务职业学院","天津城市建设管理职业技术学院","天津生物工程职业技术学院","天津艺术职业学院","天津国土资源和房屋职业学院","天津海运职业学院","天津青年职业学院","天津广播影视职业学院","天津铁道职业技术学院","天津开发区职业技术学院","天津工艺美术职业学院","河北工业大学"],"河北省":["河北大学","燕山大学","河北联合大学","河北科技大学","石家庄铁道大学","河北工程大学","河北农业大学","河北医科大学","河北师范大学","河北经贸大学","中国人民武装警察部队学院","中央司法警官学院","防灾科技学院","华北科技学院","北华航天工业学院","河北建筑工程学院","石家庄经济学院","河北科技学院","承德医学院","唐山师范学院","廊坊师范学院","沧州师范学院","河北民族师范学院","河北科技师范学院","河北外国语学院","河北金融学院","河北体育学院","河北传媒学院","河北美术学院","邯郸学院","衡水学院","石家庄学院","保定学院","唐山学院","河北北方学院","承德石油高等专科学校","河北工程技术高等专科学校","石家庄人民医学高等专科学校","邢台医学高等专科学校","石家庄医学高等专科学校","沧州医学高等专科学校","石家庄幼儿师范高等专科学校","承德护理职业学院","河北化工医药职业技术学院","邯郸职业技术学院","张家口职业技术学院","沧州职业技术学院","保定职业技术学院","石家庄铁路职业技术学院","河北能源职业技术学院","石家庄职业技术学院","邢台职业技术学院","河北工业职业技术学院","石家庄科技职业学院","河北劳动关系职业学院","唐山职业技术学院","渤海石油职业学院","石家庄科技工程职业学院","石家庄邮电职业技术学院","河北司法警官职业学院","冀中职业学院","石家庄工商职业学院","石家庄经济职业学院","石家庄城市职业学院","石家庄工程职业学院","河北省艺术职业学院","河北旅游职业学院","河北女子职业技术学院","廊坊职业技术学院","保定电力职业技术学院","河北机电职业技术学院","石家庄科技信息职业学院","河北公安警察职业学院","石家庄外国语职业学院","河北建材职业技术学院","河北政法职业学院","河北石油职业技术学院","唐山工业职业技术学院","衡水职业技术学院","秦皇岛职业技术学院","唐山科技职业技术学院","泊头职业学院","河北轨道运输职业技术学院","宣化科技职业学院","廊坊东方职业技术学院","廊坊卫生职业学院","河北软件职业技术学院","石家庄理工职业学院","石家庄信息工程职业学院","河北交通职业技术学院","石家庄财经职业学院","河北外国语职业学院","廊坊燕京职业技术学院"],"山西省":["山西大学","太原理工大学","中北大学","太原科技大学","山西农业大学","山西医科大学","山西师范大学","山西大同大学","山西财经大学","太原工业学院","山西中医学院","长治医学院","吕梁学院","忻州师范学院","太原师范学院","运城学院","长治学院","晋中学院","山西工商学院","太原电力高等专科学校","运城幼儿师范高等专科学校","晋中师范高等专科学校","阳泉师范高等专科学校","山西省财政税务专科学校","山西警官高等专科学校","太原大学","山西药科职业学院","山西兴华职业学院","山西建筑职业技术学院","山西轻工职业技术学院","山西工程职业技术学院","运城职业技术学院","山西老区职业技术学院","大同煤炭职业技术学院","山西交通职业技术学院","山西艺术职业学院","长治职业技术学院","晋城职业技术学院","山西电力职业技术学院","山西体育职业学院","山西警官职业学院","山西国际商务职业学院","山西华澳商贸职业学院","山西机电职业技术学院","山西戏剧职业学院","山西财贸职业技术学院","山西林业职业技术学院","山西水利职业技术学院","阳泉职业技术学院","晋中职业技术学院","运城护理职业学院","忻州职业技术学院","山西金融职业学院","临汾职业技术学院","山西职业技术学院","太原城市职业技术学院","山西运城农业职业技术学院","山西青年职业学院","山西经贸职业学院","山西同文职业技术学院","山西信息职业技术学院","山西管理职业学院","山西旅游职业学院","潞安职业技术学院","太原旅游职业学院","朔州职业技术学院","山西煤炭职业技术学院"],"内蒙古自治区":["内蒙古大学","内蒙古科技大学","内蒙古民族大学","内蒙古工业大学","内蒙古农业大学","内蒙古医科大学","内蒙古师范大学","内蒙古财经大学","河套学院","赤峰学院","集宁师范学院","呼伦贝尔学院","呼和浩特民族学院","乌兰察布医学高等专科学校","满洲里俄语职业学院","包头职业技术学院","内蒙古建筑职业技术学院","内蒙古机电职业技术学院","乌海职业技术学院","呼和浩特职业学院","内蒙古交通职业技术学院","阿拉善职业技术学院","赤峰工业职业技术学院","内蒙古能源职业学院","乌兰察布职业学院","内蒙古电子信息职业技术学院","通辽职业学院","内蒙古化工职业学院","内蒙古商贸职业学院","包头铁道职业技术学院","包头钢铁职业技术学院","内蒙古美术职业学院","科尔沁艺术职业学院","包头轻工职业技术学院","锡林郭勒职业学院","兴安职业技术学院","内蒙古警察职业学院","内蒙古体育职业学院","内蒙古经贸外语职业学院","赤峰职业技术学院","内蒙古北方职业技术学院","鄂尔多斯职业学院","内蒙古科技职业学院","内蒙古丰州职业学院","呼伦贝尔职业技术学院","内蒙古工业职业学院"],"辽宁省":["大连理工大学","东北大学","大连海事大学","辽宁大学","大连大学","沈阳大学","沈阳理工大学","辽宁工程技术大学","沈阳工业大学","沈阳建筑大学","辽宁石油化工大学","大连交通大学","沈阳化工大学","辽宁科技大学","大连工业大学","辽宁工业大学","沈阳航空航天大学","沈阳农业大学","大连海洋大学","中国医科大学","大连医科大学","辽宁中医药大学","沈阳药科大学","辽宁师范大学","沈阳师范大学","渤海大学","东北财经大学","大连民族学院","中国刑事警察学院","沈阳工程学院","辽宁科技学院","大连东软信息学院","大连科技学院","辽宁医学院","沈阳医学院","辽宁何氏医学院","鞍山师范学院","大连外国语学院","辽宁财贸学院","沈阳体育学院","鲁迅美术学院","沈阳音乐学院","大连艺术学院","辽东学院","辽宁对外经贸学院","辽宁交通高等专科学校","朝阳师范高等专科学校","抚顺师范高等专科学校","铁岭师范高等专科学校","锦州师范高等专科学校","辽宁税务高等专科学校","辽宁警官高等专科学校","阜新高等专科学校","辽宁城市建设职业技术学院","辽宁冶金职业技术学院","辽宁工程职业学院","铁岭卫生职业学院","辽宁卫生职业技术学院","抚顺职业技术学院","辽阳职业技术学院","大连职业技术学院","渤海船舶职业学院","盘锦职业技术学院","大连商务职业学院","辽宁农业职业技术学院","营口职业技术学院","沈阳职业技术学院","辽宁金融职业学院","辽河石油职业技术学院","辽宁装备制造职业技术学院","辽宁现代服务职业技术学院","辽宁政法职业学院","沈阳北软信息职业技术学院","辽宁体育运动职业技术学院","辽宁职业学院","大连装备制造职业技术学院","沈阳航空职业技术学院","辽宁地质工程职业学院","辽宁铁道职业技术学院","辽宁建筑职业技术学院","大连枫叶职业技术学院","辽宁商贸职业学院","大连翻译职业学院","辽宁理工职业学院","大连软件职业学院","辽宁美术职业学院","大连航运职业技术学院","辽宁林业职业技术学院","辽宁经济职业技术学院","辽宁信息职业技术学院","辽宁广告职业学院","大连汽车职业技术学院","辽宁机电职业技术学院","辽宁石化职业技术学院"],"吉林省":["吉林大学","东北师范大学","延边大学","北华大学","长春大学","长春理工大学","长春工业大学","吉林农业大学","长春中医药大学","吉林师范大学","吉林财经大学","东北电力大学","长春工程学院","吉林建筑工程学院","吉林化工学院","长春建筑学院","吉林农业科技学院","吉林医药学院","通化师范学院","白城师范学院","吉林工程技术师范学院","长春师范学院","吉林华桥外国语学院","吉林工商学院","吉林警察学院","吉林体育学院","吉林艺术学院","吉林动画学院","长春汽车工业高等专科学校","长春医学高等专科学校","白城医学高等专科学校","长春金融高等专科学校","吉林科技职业技术学院","四平职业大学","辽源职业技术学院","长春东方职业学院","吉林交通职业技术学院","吉林铁道职业技术学院","吉林司法警官职业学院","白城职业技术学院","吉林工业职业技术学院","吉林电子信息职业技术学院","长白山职业技术学院","松原职业技术学院","长春信息技术职业学院","延边职业技术学院","长春职业技术学院","吉林农业工程职业技术学院"],"黑龙江省":["东北林业大学","哈尔滨工业大学","哈尔滨工程大学","黑龙江大学","佳木斯大学","齐齐哈尔大学","哈尔滨理工大学","东北石油大学","东北农业大学","黑龙江八一农垦大学","哈尔滨医科大学","黑龙江中医药大学","哈尔滨师范大学","哈尔滨商业大学","哈尔滨学院","黑龙江工程学院","齐齐哈尔工程学院","黑龙江科技大学","哈尔滨远东理工学院","哈尔滨石油学院","齐齐哈尔医学院","牡丹江医学院","牡丹江师范学院","大庆师范学院","黑龙江外国语学院","哈尔滨金融学院","哈尔滨德强商务学院","哈尔滨体育学院","黑龙江东方学院","绥化学院","哈尔滨剑桥学院","哈尔滨广厦学院","黑河学院","哈尔滨华德学院","黑龙江护理高等专科学校","大庆医学高等专科学校","齐齐哈尔高等师范专科学校","黑龙江幼儿师范高等专科学校","鹤岗师范高等专科学校","鸡西大学","黑龙江司法警官职业学院","黑龙江建筑职业技术学院","牡丹江大学","伊春职业学院","黑龙江农垦职业学院","黑龙江农业职业技术学院","黑龙江林业职业技术学院","黑龙江农业工程职业学院","大庆职业学院","黑龙江农业经济职业学院","黑龙江旅游职业技术学院","大兴安岭职业学院","黑龙江职业学院","哈尔滨现代公共关系职业学院","黑龙江三江美术职业学院","黑龙江煤炭职业技术学院","黑龙江信息技术职业学院","黑龙江生态工程职业学院","七台河职业学院","黑龙江艺术职业学院","哈尔滨华夏计算机职业技术学院","黑龙江生物科技职业学院","黑龙江公安警官职业学院","黑龙江农垦科技职业学院","黑龙江商业职业学院","哈尔滨科学技术职业学院","黑龙江民族职业学院","哈尔滨铁道职业技术学院","黑龙江粮食职业学院","哈尔滨江南职业技术学院","哈尔滨应用职业技术学院","黑龙江交通职业技术学院","佳木斯职业学院","齐齐哈尔理工职业学院","哈尔滨工程技术职业学院","哈尔滨职业技术学院","哈尔滨电力职业技术学院"],"上海市":["复旦大学","同济大学","上海交通大学","华东理工大学","东华大学","华东师范大学","上海外国语大学","上海财经大学","上海大学","上海理工大学","上海海事大学","上海工程技术大学","上海海洋大学","上海中医药大学","上海师范大学","华东政法大学","上海海关学院","上海建桥学院","上海政法学院","上海电机学院","上海第二工业大学","上海电力学院","上海应用技术学院","上海对外贸易学院","上海立信会计学院","上海金融学院","上海商学院","上海体育学院","上海音乐学院","上海戏剧学院","上海杉达学院","上海出版印刷高等专科学校","上海医疗器械高等专科学校","上海医药高等专科学校","上海旅游高等专科学校","上海公安高等专科学校","上海民航职业技术学院","上海电影艺术职业学院","上海健康职业技术学院","上海东海职业技术学院","上海新侨职业技术学院","上海工会管理职业学院","上海工艺美术职业学院","上海震旦职业学院","上海立达职业技术学院","上海中华职业技术学院","上海兴韦信息技术职业学院","上海邦德职业技术学院","上海农林职业技术学院","上海思博职业技术学院","上海欧华职业技术学院","上海民远职业技术学院","上海交通职业技术学院","上海建峰职业技术学院","上海城市管理职业技术学院","上海体育职业学院","上海电子信息职业技术学院","上海行健职业学院","上海济光职业技术学院","上海工商外国语职业学院","上海海事职业技术学院","上海科学技术职业学院","上海中侨职业技术学院"],"江苏省":["南京大学","东南大学","中国矿业大学","河海大学","江南大学","南京农业大学","中国药科大学","南京理工大学","南京航空航天大学","苏州大学","扬州大学","江苏大学","江苏科技大学","南京邮电大学","南京工业大学","常州大学","南京林业大学","南京医科大学","南京中医药大学","南京师范大学","江苏师范大学","南京财经大学","南通大学","西交利物浦大学","南京森林警察学院","南京信息工程大学","金陵科技学院","徐州工程学院","盐城工学院","淮阴工学院","常州工学院","南京工程学院","淮海工学院","徐州医学院","盐城师范学院","南京晓庄学院","苏州科技学院","江苏技术师范学院","淮阴师范学院","南京审计学院","江苏警官学院","南京体育学院","南京艺术学院","常熟理工学院","三江学院","无锡太湖学院","连云港师范高等专科学校","泰州师范高等专科学校","徐州幼儿师范高等专科学校","镇江市高等专科学校","江苏畜牧兽医职业技术学院","无锡职业技术学院","南通纺织职业技术学院","苏州工艺美术职业技术学院","南京工业职业技术学院","无锡商业职业技术学院","泰州职业技术学院","南通职业大学","连云港职业技术学院","民办明达职业技术学院","苏州职业大学","江苏城市职业学院","沙洲职业工学院","扬州市职业大学","江苏建筑职业技术学院","南通航运职业技术学院","宿迁职业技术学院","江苏信息职业技术学院","江苏农林职业技术学院","江苏食品职业技术学院","徐州工业职业技术学院","常州机电职业技术学院","常州轻工职业技术学院","南京旅游职业学院","常州工程职业技术学院","南京信息职业技术学院","苏州高博软件技术职业学院","盐城卫生职业技术学院","苏州工业职业技术学院","江阴职业技术学院","南京城市职业学院","徐州生物工程职业技术学院","苏州信息职业技术学院","南京机电职业技术学院","江苏建康职业学院","苏州卫生职业技术学院","江苏海事职业技术学院","苏州经贸职业技术学院","江苏经贸职业技术学院","南京特殊教育职业技术学院","扬州环境资源职业技术学院","金肯职业技术学院","应天职业技术学院","南京化工职业技术学院","炎黄职业技术学院","苏州农业职业技术学院","无锡工艺职业技术学院","常州纺织服装职业技术学院","紫琅职业技术学院","常州信息职业技术学院","健雄职业技术学院","江苏财经职业技术学院","盐城纺织职业技术学院","扬州工业职业技术学院","江海职业技术学院","南京铁道职业技术学院","九州职业技术学院","江苏联合职业技术学院","金山职业技术学院","无锡科技职业学院","硅湖职业技术学院","无锡城市职业技术学院","苏州托普信息职业技术学院","正德职业技术学院","江南影视艺术职业学院","南通农业职业技术学院","苏州工业园区职业技术学院","太湖创意职业技术学院","淮安信息职业技术学院","无锡南洋职业技术学院","钟山职业技术学院","南京交通职业技术学院","建东职业技术学院","南京视觉艺术职业学院","昆山登云科技职业学院","苏州港大思培科技职业学院","宿迁泽达职业技术学院","苏州工业园区服务外包职业学院"],"浙江省":["浙江大学","宁波大学","浙江工业大学","杭州电子科技大学","浙江理工大学","浙江农林大学","浙江中医药大学","浙江师范大学","杭州师范大学","浙江工商大学","宁波诺丁汉大学","温州大学","公安海警学院","宁波大红鹰学院","浙江越秀外国语学院","宁波工程学院","中国计量学院","嘉兴学院","浙江科技学院","浙江海洋学院","温州医学院","绍兴文理学院","台州学院","湖州师范学院","浙江传媒学院","浙江外国语学院","浙江财经大学","浙江警察学院","中国美术学院","丽水学院","浙江树人学院","浙江万里学院","衢州学院","浙江水利水电专科学校","浙江医药高等专科学校","浙江医学高等专科学校","宁波职业技术学院","金华职业技术学院","浙江交通职业技术学院","温州职业技术学院","台州职业技术学院","浙江旅游职业学院","宁波城市职业技术学院","浙江工商职业技术学院","浙江经济职业技术学院","浙江机电职业技术学院","杭州万向职业技术学院","浙江商业职业技术学院","浙江汽车职业技术学院","浙江横店影视职业学院","浙江警官职业学院","嘉兴南洋职业技术学院","浙江工业职业技术学院","杭州科技职业技术学院","浙江建设职业技术学院","浙江经贸职业技术学院","浙江育英职业技术学院","温州科技职业学院","浙江长征职业技术学院","绍兴职业技术学院","杭州职业技术学院","浙江纺织服装职业技术学院","台州科技职业学院","浙江邮电职业技术学院","浙江同济科技职业学院","浙江广厦建设职业技术学院","浙江体育职业技术学院","宁波卫生职业技术学院","浙江工贸职业技术学院","浙江国际海运职业技术学院","嘉兴职业技术学院","湖州职业技术学院","衢州职业技术学院","丽水职业技术学院","浙江金融职业学院","义乌工商职业技术学院","浙江东方职业技术学院","浙江艺术职业学院","浙江农业商贸职业学院","浙江电力职业技术学院"],"安徽省":["合肥工业大学","中国科学技术大学","安徽大学","安徽理工大学","安徽工业大学","安徽工程大学","安徽农业大学","安徽医科大学","安徽师范大学","淮北师范大学","安徽财经大学","安徽三联学院","安徽建筑工业学院","安徽文达信息工程学院","安徽中医学院","皖南医学院","蚌埠医学院","淮南师范学院","安徽科技学院","阜阳师范学院","安庆师范学院","合肥师范学院","安徽外国语学院","滁州学院","池州学院","皖西学院","宿州学院","黄山学院","巢湖学院","蚌埠学院","铜陵学院","安徽新华学院","合肥学院","安徽医学高等专科学校","安徽中医药高等专科学校","安庆医药高等专科学校","合肥幼儿师范高等专科学校","亳州师范高等专科学校","桐城师范高等专科学校","马鞍山师范高等专科学校","安徽汽车职业技术学院","皖西卫生职业学院","安徽职业技术学院","芜湖职业技术学院","安徽水利水电职业技术学院","淮北职业技术学院","安徽警官职业学院","安徽商贸职业技术学院","淮南职业技术学院","淮南联合大学","民办万博科技职业学院","铜陵职业技术学院","安徽财贸职业学院","安徽国际商务职业学院","马鞍山职业技术学院","安徽人口职业学院","安徽新闻出版职业技术学院","安徽城市管理职业学院","安徽林业职业技术学院","徽商职业学院","滁州职业技术学院","民办安徽旅游职业学院","安徽邮电职业技术学院","安庆职业技术学院","安徽广播影视职业技术学院","安徽涉外经济职业学院","安徽公安职业学院","安徽审计职业学院","宣城职业技术学院","亳州职业技术学院","安徽中澳科技职业学院","安徽工业职业技术学院","安徽机电职业技术学院","安徽绿海商务职业学院","合肥共达职业技术学院","合肥科技职业学院","蚌埠经济技术职业学院","合肥职业技术学院","阜阳科技职业学院","池州职业技术学院","安徽矿业职业技术学院","安徽黄梅戏艺术职业学院","六安职业技术学院","民办合肥滨湖职业技术学院","合肥通用职业技术学院","安徽体育运动职业技术学院","安徽粮食工程职业学院","合肥信息技术职业学院","安徽艺术职业学院","民办合肥经济技术职业学院","安徽国防科技职业学院","安徽工商职业学院","宿州职业技术学院","安徽冶金科技职业学院","阜阳职业技术学院","安徽工业经济职业技术学院","安徽电子信息职业技术学院","安徽交通职业技术学院","安徽电气工程职业技术学院","安徽工贸职业技术学院","安徽长江职业学院","安徽扬子职业技术学院","安徽现代信息工程职业学院","民办合肥财经职业学院","芜湖信息技术职业学院","黄山职业技术学院","滁州城市职业学院","安徽建筑大学"],"福建省":["厦门大学","华侨大学","福建农林大学","集美大学","福州大学","仰恩大学","福建医科大学","福建中医药大学","福建师范大学","厦门理工学院","闽南理工学院","福建工程学院","宁德师范学院","泉州师范学院","漳州师范学院","福州外语外贸学院","福建警察学院","闽江学院","三明学院","龙岩学院","莆田学院","武夷学院","福建江夏学院","厦门医学高等专科学校","泉州医学高等专科学校","福建幼儿师范高等专科学校","泉州幼儿师范高等专科学校","福建商业高等专科学校","福州英华职业学院","福建船政交通职业学院","厦门华厦职业学院","泉州纺织服装职业学院","漳州职业技术学院","黎明职业大学","福建华南女子职业学院","闽西职业技术学院","福州黎明职业技术学院","厦门东海职业技术学院","漳州卫生职业学院","福州职业技术学院","福州海峡职业技术学院","泉州理工职业学院","福建警官职业学院","闽北职业技术学院","泉州华光摄影艺术职业学院","福建林业职业技术学院","泉州经贸职业技术学院","福建卫生职业技术学院","厦门华天涉外职业技术学院","漳州理工职业学院","厦门兴才职业技术学院","泉州信息职业技术学院","湄洲湾职业技术学院","福州软件职业技术学院","福州科技职业技术学院","福建艺术职业学院","福建生物工程职业技术学院","德化陶瓷职业技术学院","福建体育职业技术学院","宁德职业技术学院","厦门软件职业技术学院","三明职业技术学院","福建对外经济贸易职业技术学院","厦门海洋职业技术学院","福建农业职业技术学院","福建信息职业技术学院","厦门演艺职业学院","武夷山职业学院","福建电力职业技术学院","漳州科技职业学院","厦门城市职业学院","厦门南洋职业学院","漳州城市职业学院","福建水利电力职业技术学院","泉州轻工职业学院","泉州泰山航海职业学院","厦门安防科技职业学院"],"江西省":["南昌大学","江西理工大学","华东交通大学","东华理工大学","南昌航空大学","江西农业大学","江西师范大学","江西科技师范大学","江西财经大学","井冈山大学","景德镇陶瓷学院","南昌工程学院","南昌理工学院","南昌工学院","江西中医学院","赣南医学院","上饶师范学院","赣南师范学院","江西警察学院","江西服装学院","九江学院","江西科技学院","新余学院","宜春学院","江西中医药高等专科学校","南昌师范高等专科学校","景德镇高等专科学校","萍乡高等专科学校","江西护理职业技术学院","九江职业技术学院","江西工业职业技术学院","九江职业大学","江西泰豪动漫职业学院","江西先锋软件职业技术学院","江西工业贸易职业技术学院","江西枫林涉外经贸职业学院","江西司法警官职业学院","江西城市职业学院","江西太阳能科技职业学院","江西生物科技职业学院","江西电力职业技术学院","江西外语外贸职业学院","宜春职业技术学院","江西旅游商贸职业学院","抚州职业技术学院","江西青年职业学院","江西工程职业学院","江西建设职业技术学院","江西管理职业学院","江西农业工程职业学院","江西航空职业技术学院","江西经济管理职业学院","上饶职业技术学院","江西应用工程职业学院","江西制造职业技术学院","景德镇陶瓷职业技术学院","鹰潭职业技术学院","江西应用技术职业学院","江西渝州科技职业学院","共青科技职业学院","江西冶金职业技术学院","江西机电职业技术学院","江西新闻出版职业技术学院","江西现代职业技术学院","江西艺术职业学院","赣西科技职业学院","江西科技职业学院","江西交通职业技术学院","南昌职业学院","江西工业工程职业技术学院","江西工商职业技术学院","江西信息应用职业技术学院","江西环境工程职业学院","江西陶瓷工艺美术职业技术学院","江西财经职业学院"],"山东省":["山东大学","中国海洋大学","青岛大学","山东科技大学","山东理工大学","烟台大学","聊城大学","青岛科技大学","青岛理工大学","济南大学","山东建筑大学","山东农业大学","青岛农业大学","山东中医药大学","山东师范大学","曲阜师范大学","临沂大学","山东财经大学","鲁东大学","山东万杰医学院","潍坊科技学院","山东英才学院","山东轻工业学院","潍坊学院","山东交通学院","青岛工学院","潍坊医学院","泰山医学院","滨州医学院","济宁医学院","德州学院","齐鲁师范学院","山东工商学院","山东警察学院","山东青年政治学院","山东政法学院","山东体育学院","山东艺术学院","山东工艺美术学院","泰山学院","枣庄学院","烟台南山学院","青岛滨海学院","济宁学院","菏泽学院","滨州学院","山东女子学院","山东协和学院","青岛黄海学院","山东电力高等专科学校","菏泽医学专科学校","山东医学高等专科学校","山东中医药高等专科学校","淄博师范高等专科学校","济南幼儿师范高等专科学校","山东畜牧兽医职业学院","山东商业职业技术学院","日照职业技术学院","曲阜远东职业技术学院","青岛职业技术学院","济宁职业技术学院","山东劳动职业技术学院","聊城职业技术学院","莱芜职业技术学院","威海职业学院","滨州职业学院","山东杏林科技职业学院","山东工业职业学院","山东胜利职业学院","山东华宇职业技术学院","山东商务职业学院","枣庄科技职业学院","山东水利职业学院","山东力明科技职业学院","东营职业学院","潍坊职业学院","山东职业学院","德州职业技术学院","青岛飞洋职业技术学院","青岛港湾职业技术学院","潍坊护理职业学院","潍坊工商职业学院","山东凯文科技职业学院","烟台汽车工程职业学院","山东城市建设职业学院","山东大王职业学院","烟台职业学院","山东海事职业学院","山东科技职业学院","泰山护理职业学院","山东圣翰财贸职业学院","青岛酒店管理职业技术学院","山东服装职业学院","枣庄职业学院","山东外国语职业学院","潍坊工程职业学院","济南工程职业技术学院","青岛求实职业技术学院","青岛恒星职业技术学院","山东传媒职业学院","济南职业学院","德州科技职业学院","泰山职业技术学院","济南护理职业学院","淄博职业学院","山东电子职业技术学院","山东现代职业学院","山东药品食品职业学院","菏泽家政职业学院","山东旅游职业学院","临沂职业学院","山东信息职业技术学院","山东理工职业学院","山东铝业职业学院","山东经贸职业学院","山东司法警官职业学院","烟台工程职业技术学院","山东丝绸纺织职业学院","山东外贸职业学院","山东化工职业学院","山东交通职业学院","山东外事翻译职业学院","青岛远洋船员职业学院","山东文化产业职业学院"],"河南省":["郑州大学","河南大学","河南科技大学","河南理工大学","河南工业大学","河南农业大学","河南师范大学","河南财经政法大学","郑州华信学院","郑州科技学院","华北水利水电学院","郑州轻工业学院","中原工学院","郑州航空工业管理学院","河南城建学院","安阳工学院","南阳理工学院","黄河科技学院","河南工程学院","商丘工学院","洛阳理工学院","河南中医学院","新乡医学院","信阳师范学院","周口师范学院","商丘师范学院","安阳师范学院","南阳师范学院","洛阳师范学院","郑州师范学院","郑州升达经贸管理学院","郑州成功财经学院","河南警察学院","河南科技学院","新乡学院","平顶山学院","黄淮学院","许昌学院","商丘学院","铁道警官高等专科学校","郑州电力高等专科学校","河南机电高等专科学校","郑州牧业工程高等专科学校","信阳农业高等专科学校","南阳医学高等专科学校","商丘医学高等专科学校","漯河医学高等专科学校","郑州澍青医学高等专科学校","安阳幼儿师范高等专科学校","郑州幼儿师范高等专科学校","焦作师范高等专科学校","河南财政税务高等专科学校","河南商业高等专科学校","焦作工贸职业学院","河南化工职业学院","郑州理工职业学院","郑州信息工程职业学院","河南艺术职业学院","开封文化艺术职业学院","三门峡职业技术学院","郑州铁路职业技术学院","黄河水利职业技术学院","漯河职业技术学院","开封大学","河南职业技术学院","中州大学","焦作大学","许昌职业技术学院","郑州信息科技职业学院","郑州经贸职业学院","河南工业职业技术学院","河南司法警官职业学院","周口职业技术学院","鹤壁职业技术学院","平顶山工业职业技术学院","商丘职业技术学院","濮阳职业技术学院","嵩山少林武术职业学院","许昌电气职业学院","河南护理职业学院","河南机电职业学院","郑州电力职业技术学院","安阳职业技术学院","信阳涉外职业技术学院","郑州电子信息职业技术学院","洛阳职业技术学院","郑州工业安全职业学院","永城职业学院","郑州旅游职业学院","郑州职业技术学院","信阳职业技术学院","郑州商贸旅游职业学院","新乡职业技术学院","驻马店职业技术学院","河南经贸职业学院","河南交通职业技术学院","河南农业职业学院","南阳职业学院","济源职业技术学院","周口科技职业学院","河南推拿职业学院","郑州城市职业学院","河南检察职业学院","河南工业贸易职业学院","郑州黄河护理职业学院","河南质量工程职业学院","漯河食品职业学院","郑州交通职业学院","河南建筑职业技术学院","鹤壁汽车工程职业学院","许昌陶瓷职业学院","长垣烹饪职业技术学院"],"湖北省":["武汉大学","中南财经政法大学","华中科技大学","武汉理工大学","中国地质大学","华中农业大学","华中师范大学","中南民族大学","湖北大学","长江大学","江汉大学","三峡大学","武汉科技大学","湖北工业大学","武汉工程大学","武汉纺织大学","湖北中医药大学","荆楚理工学院","武汉轻工大学","湖北汽车工业学院","武昌工学院","武昌理工学院","湖北医药学院","湖北师范学院","黄冈师范学院","湖北工程学院","湖北第二师范学院","湖北经济学院","武汉长江工商学院","湖北警官学院","武汉体育学院","湖北美术学院","武汉音乐学院","湖北民族学院","湖北科技学院","湖北理工学院","湖北文理学院","武汉生物工程学院","汉口学院","武汉东湖学院","湖北中医药高等专科学校","郧阳师范高等专科学校","武汉工贸职业学院","鄂州职业大学","荆州理工职业学院","武汉商业服务学院","恩施职业技术学院","襄阳职业技术学院","湖北职业技术学院","十堰职业技术学院","长江职业学院","武汉职业技术学院","武汉船舶职业技术学院","黄冈职业技术学院","武汉信息传播职业技术学院","湖北财税职业学院","武汉城市职业学院","湖北国土资源职业学院","咸宁职业技术学院","鄂东职业技术学院","黄冈科技职业学院","湖北艺术职业学院","三峡旅游职业技术学院","江汉艺术职业学院","湖北生态工程职业技术学院","长江工程职业技术学院","湖北生物科技职业学院","天门职业学院","随州职业技术学院","武汉警官职业学院","湖北开放职业学院","武汉科技职业学院","武汉交通职业学院","武汉商贸职业学院","武汉外语外事职业学院","湖北水利水电职业技术学院","湖北城市建设职业技术学院","武昌职业学院","湖北三峡职业技术学院","武汉民政职业学院","湖北体育职业学院","襄阳汽车职业技术学院","武汉航海职业技术学院","三峡电力职业学院","武汉铁路职业技术学院","湖北科技职业学院","湖北青年职业学院","黄石职业技术学院","武汉工业职业技术学院","武汉电力职业技术学院","仙桃职业学院","武汉工程职业技术学院","荆州职业技术学院","武汉软件工程职业学院","湖北轻工职业技术学院","湖北交通职业技术学院","华中科技大学文华学院"],"湖南省":["中南大学","湖南大学","湘潭大学","湖南科技大学","吉首大学","长沙理工大学","南华大学","湖南工业大学","湖南农业大学","湖南中医药大学","湖南师范大学","长沙学院","湖南第一师范学院","湖南工学院","湖南理工学院","湖南城市学院","湖南工程学院","中南林业科技大学","长沙医学院","衡阳师范学院","湘南学院","湖南涉外经济学院","湖南财政经济学院","湖南商学院","湖南警察学院","湖南女子学院","湖南科技学院","湖南人文科技学院","湖南文理学院","邵阳学院","怀化学院","怀化医学高等专科学校","邵阳医学高等专科学校","益阳医学高等专科学校","湖南中医药高等专科学校","株洲师范高等专科学校","长沙师范学校","湖南税务高等专科学校","长沙航空职业技术学院","湖南冶金职业技术学院","湖南信息职业技术学院","湖南大众传媒职业技术学院","湖南工业职业技术学院","湖南环境生物职业技术学院","湖南铁道职业技术学院","长沙民政职业技术学院","永州职业技术学院","湖南外国语职业学院","湖南电子科技职业学院","湖南都市职业学院","湖南科技经贸职业学院","湖南软件职业学院","湖南信息科学职业学院","湘西民族职业技术学院","衡阳财经工业职业技术学院","益阳职业技术学院","湖南同德职业学院","湖南体育职业学院","湖南艺术职业学院","湖南司法警官职业学院","湖南工程职业技术学院","湖南工艺美术职业学院","湖南电气职业技术学院","湖南民族职业学院","湖南外贸职业学院","邵阳职业技术学院","湖南吉利汽车职业技术学院","湖南水利水电职业技术学院","长沙商贸旅游职业技术学院","湖南科技工业职业技术学院","湖南有色金属职业技术学院","湖南食品药品职业学院","长沙卫生职业学院","湖南网络工程职业学院","长沙环境保护职业技术学院","张家界航空工业职业技术学院","长沙电力职业技术学院","株洲职业技术学院","湖南石油化工职业技术学院","湖南城建职业技术学院","湖南化工职业技术学院","潇湘职业学院","长沙职业技术学院","怀化职业技术学院","岳阳职业技术学院","常德职业技术学院","湖南交通职业技术学院","娄底职业技术学院","湖南理工职业技术学院","长沙通信职业技术学院","湖南九嶷职业技术学院","湘潭职业技术学院","湖南商务职业技术学院","郴州职业技术学院","湖南生物机电职业技术学院","保险职业学院","湖南科技职业学院","湖南现代物流职业技术学院","湖南安全技术职业学院","湖南高速铁路职业技术学院","湖南机电职业技术学院","湖南铁路科技职业技术学院","湖南三一工业职业技术学院","长沙南方职业学院","湖南高尔夫旅游职业学院","湖南工商职业学院"],"广东省":["中山大学","华南理工大学","暨南大学","汕头大学","深圳大学","五邑大学","广东工业大学","南方科技大学","华南农业大学","广东海洋大学","广州中医药大学","南方医科大学","华南师范大学","广东外语外贸大学","广州大学","北京师范大学","广东石油化工学院","肇庆学院","东莞理工学院","广东科技学院","仲恺农业工程学院","广东医学院","广州医学院","广东药学院","韶关学院","湛江师范学院","嘉应学院","韩山师范学院","惠州学院","广东第二师范学院","广东商学院","广东金融学院","广东警官学院","广州体育学院","广州美术学院","星海音乐学院","广东技术师范学院","广东培正学院","佛山科学技术学院","广东白云学院","广州航海高等专科学校","肇庆医学高等专科学校","私立华联学院","民办南华工商学院","广州民航职业技术学院","广东食品药品职业学院","广东松山职业技术学院","深圳职业技术学院","潮汕职业技术学院","顺德职业技术学院","广东新安职业技术学院","广东农工商职业技术学院","广东交通职业技术学院","广东水利电力职业技术学院","广东轻工职业技术学院","佛山职业技术学院","广州珠江职业技术学院","广州现代信息工程职业技术学院","广东亚视演艺职业学院","清远职业技术学院","汕头职业技术学院","广东邮电职业技术学院","揭阳职业技术学院","广州南洋理工职业学院","广州科技职业技术学院","广东科贸职业学院","深圳信息职业技术学院","中山职业技术学院","广东司法警官职业学院","广州松田职业学院","广东省外语艺术职业学院","广东文理职业学院","广州番禺职业技术学院","广州铁路职业技术学院","广州华南商贸职业学院","广州华立科技职业学院","广州城市职业学院","广东工程职业技术学院","广州科技贸易职业学院","肇庆工商职业技术学院","广东体育职业技术学院","广东行政职业学院","广东文艺职业学院","广州体育职业技术学院","广东科学技术职业学院","中山火炬职业技术学院","江门职业技术学院","茂名职业技术学院","广州工程技术职业学院","广州涉外经济职业技术学院","惠州经济职业技术学院","广州城建职业学院","肇庆科技职业技术学院","珠海艺术职业学院","南海东软信息技术职业学院","广州康大职业技术学院","广州工商职业技术学院","广东青年职业学院","广州东华职业学院","广东创新科技职业学院","广东工贸职业技术学院","珠海城市职业技术学院","汕尾职业技术学院","广东财经职业学院","广东职业技术学院","罗定职业技术学院","河源职业技术学院","广东岭南职业技术学院","广东女子职业技术学院","广东建设职业技术学院","广东机电职业技术学院","广东理工职业学院","惠州卫生职业技术学院","阳江职业技术学院","广东舞蹈戏剧职业学院","广东南方职业学院","广州华商职业学院","广州华夏职业学院","广东环境保护工程职业学院","东莞职业技术学院","广东财经大学"],"广西壮族自治区":["广西大学","桂林电子科技大学","桂林理工大学","广西医科大学","广西中医药大学","广西师范大学","广西民族大学","桂林航天工业学院","广西工学院","桂林医学院","右江民族医学院","广西师范学院","广西民族师范学院","河池学院","玉林师范学院","广西外国语学院","广西财经学院","广西艺术学院","百色学院","贺州学院","钦州学院","梧州学院","柳州医学高等专科学校","柳州师范高等专科学校","桂林师范高等专科学校","广西幼儿师范高等专科学校","桂林旅游高等专科学校","广西警官高等专科学校","广西体育高等专科学校","广西科技职业学院","广西卫生职业技术学院","广西机电职业技术学院","广西职业技术学院","柳州职业技术学院","南宁职业技术学院","广西国际商务职业技术学院","广西经贸职业技术学院","北海职业学院","北海艺术设计职业学院","广西现代职业技术学院","桂林山水职业学院","广西演艺职业学院","广西工业职业技术学院","广西电力职业技术学院","广西经济职业学院","广西生态工程职业技术学院","贵港职业学院","广西城市职业学院","广西工商职业技术学院","百色职业学院","广西农业职业技术学院","广西工程职业学院","柳州铁道职业技术学院","广西理工职业技术学院","梧州职业学院","广西英华国际职业学院","广西建设职业技术学院","广西水利电力职业技术学院","广西交通职业技术学院","柳州城市职业学院","邕江大学"],"海南省":["海南大学","海南师范大学","海口经济学院","海南医学院","琼州学院","三亚学院","琼台师范高等专科学校","海南职业技术学院","三亚城市职业学院","海南科技职业学院","三亚航空旅游职业学院","海南软件职业技术学院","海南经贸职业技术学院","海南工商职业学院","三亚理工职业学院","海南政法职业学院","海南外国语职业学院"],"重庆市":["重庆大学","西南大学","重庆交通大学","重庆邮电大学","重庆理工大学","重庆医科大学","重庆师范大学","重庆工商大学","西南政法大学","重庆科技学院","长江师范学院","重庆第二师范学院","四川外语学院","重庆警察学院","四川美术学院","重庆三峡学院","重庆文理学院","重庆电力高等专科学校","重庆三峡医药高等专科学校","重庆医药高等专科学校","重庆化工职业学院","重庆工业职业技术学院","重庆正大软件职业技术学院","重庆城市管理职业学院","重庆公共运输职业学院","重庆安全技术职业学院","重庆三峡职业学院","重庆工贸职业技术学院","重庆民生职业技术学院","重庆轻工职业学院","重庆机电职业技术学院","重庆电信职业学院","重庆电子工程职业学院","重庆城市职业学院","重庆水利电力职业技术学院","重庆商务职业学院","重庆电讯职业学院","重庆能源职业学院","重庆传媒职业学院","重庆工商职业学院","重庆经贸职业学院","重庆建筑工程职业学院","重庆青年职业技术学院","重庆财经职业学院","重庆科创职业学院","重庆房地产职业学院","重庆海联职业技术学院","重庆信息技术职业学院","重庆航天职业技术学院","重庆工程职业技术学院","重庆艺术工程职业学院","重庆旅游职业学院","重庆交通职业学院"],"四川省":["四川大学","西南交通大学","电子科技大学","西南财经大学","西南民族大学","成都理工大学","西华大学","西南科技大学","四川农业大学","成都中医药大学","四川师范大学","西华师范大学","中国民用航空飞行学院","西南石油大学","成都工业学院","成都信息工程学院","四川理工学院","成都东软学院","泸州医学院","川北医学院","成都医学院","乐山师范学院","内江师范学院","四川文理学院","成都师范学院","四川警察学院","成都体育学院","四川音乐学院","四川民族学院","绵阳师范学院","攀枝花学院","成都学院","宜宾学院","西昌学院","成都纺织高等专科学校","四川烹饪高等专科学校","四川中医药高等专科学校","阿坝师范高等专科学校","川北幼儿师范高等专科学校","四川幼儿师范高等专科学校","民办四川天一学院","成都航空职业技术学院","四川商务职业学院","四川卫生康复职业学院","四川三河职业学院","四川电影电视职业学院","四川城市职业学院","四川汽车职业技术学院","成都农业科技职业学院","四川科技职业学院","宜宾职业技术学院","四川文化产业职业学院","四川华新现代职业学院","四川长江职业学院","四川司法警官职业学院","四川警安职业学院","四川信息职业技术学院","广安职业技术学院","四川现代职业学院","四川艺术职业学院","内江职业技术学院","成都职业技术学院","南充职业技术学院","四川水利职业技术学院","四川化工职业技术学院","四川航天职业技术学院","四川邮电职业技术学院","四川国际标榜职业学院","乐山职业技术学院","四川管理职业学院","四川财经职业学院","四川文化传媒职业学院","泸州职业技术学院","眉山职业技术学院","四川职业技术学院","四川托普信息技术职业学院","成都艺术职业学院","雅安职业技术学院","四川建筑职业技术学院","四川机电职业技术学院","四川交通职业技术学院","达州职业技术学院","四川工商职业技术学院","绵阳职业技术学院","四川电力职业技术学院","四川工程职业技术学院","四川大学锦城学院"],"贵州省":["贵州大学","贵州师范大学","贵州财经大学","贵州民族大学","贵阳医学院","遵义医学院","贵阳中医学院","毕节学院","遵义师范学院","黔南民族师范学院","六盘水师范学院","兴义民族师范学院","贵州师范学院","安顺学院","贵阳学院","凯里学院","铜仁学院","黔南民族医学高等专科学校","遵义医药高等专科学校","贵州商业高等专科学校","贵州航天职业技术学院","贵州电子信息职业技术学院","贵州交通职业技术学院","贵州警官职业学院","遵义职业技术学院","贵阳护理职业学院","贵州工业职业技术学院","贵州盛华职业学院","黔东南民族职业技术学院","安顺职业技术学院","贵州职业技术学院","毕节职业技术学院","贵州电力职业技术学院","贵州工商职业学院","黔南民族职业技术学院","铜仁职业技术学院","贵州亚泰职业学院","贵州轻工职业技术学院","贵阳职业技术学院","六盘水职业技术学院","黔西南民族职业技术学院"],"云南省":["云南大学","昆明理工大学","云南农业大学","西南林业大学","昆明医科大学","云南师范大学","云南财经大学","云南民族大学","云南中医学院","昭通学院","曲靖师范学院","玉溪师范学院","楚雄师范学院","普洱学院","红河学院","云南工商学院","云南警官学院","云南艺术学院","大理学院","昆明学院","保山学院","文山学院","昆明冶金高等专科学校","曲靖医学高等专科学校","楚雄医药高等专科学校","保山中医药高等专科学校","丽江师范高等专科学校","德宏师范高等专科学校","临沧师范高等专科学校","云南经贸外事职业学院","云南农业职业技术学院","昆明工业职业技术学院","云南机电职业技术学院","云南热带作物职业学院","云南司法警官职业学院","云南国防工业职业技术学院","云南锡业职业技术学院","云南能源职业技术学院","云南三鑫职业技术学院","德宏职业学院","云南新兴职业学院","云南旅游职业学院","云南经济管理职业学院","云南外事外语职业学院","红河卫生职业学院","玉溪农业职业技术学院","云南文化艺术职业学院","昆明艺术职业学院","昆明扬帆职业技术学院","云南城市建设职业学院","西双版纳职业技术学院","云南林业职业技术学院","云南国土资源职业学院","昆明卫生职业学院","云南科技信息职业学院","云南体育运动职业技术学院","云南现代职业技术学院","云南交通职业技术学院","云南商务职业学院"],"西藏自治区":["西藏大学","西藏藏医学院","西藏民族学院","拉萨师范高等专科学校","西藏警官高等专科学校","西藏职业技术学院","陕西国际商贸学院","陕西中医学院","咸阳师范学院","陕西服装工程学院","陕西工业职业技术学院","陕西邮电职业技术学院","陕西旅游烹饪职业学院","咸阳职业技术学院","陕西能源职业技术学院","陕西工商职业学院","陕西财经职业技术学院"],"陕西省":["西安交通大学","长安大学","西安电子科技大学","西北农林科技大学","陕西师范大学","西北工业大学","西北大学","延安大学","西安理工大学","西安建筑科技大学","西安科技大学","西安石油大学","西安工程大学","西安工业大学","西安邮电大学","西安外国语大学","西北政法大学","陕西科技大学","西安思源学院","西安航空学院","西安医学院","宝鸡文理学院","渭南师范学院","榆林学院","陕西理工学院","陕西学前师范学院","西安财经学院","西安体育学院","西安美术学院","西安音乐学院","西京学院","西安翻译学院","西安外事学院","西安文理学院","西安欧亚学院","西安培华学院","商洛学院","安康学院","西安电力高等专科学校","西安医学高等专科学校","杨凌职业技术学院","西安东方亚太职业技术学院","西安汽车科技职业学院","西安科技商贸职业学院","西安海棠职业学院","陕西警官职业学院","商洛职业技术学院","陕西经济管理职业技术学院","陕西铁路工程职业技术学院","陕西电子信息职业技术学院","西安职业技术学院","铜川职业技术学院","安康职业技术学院","西安铁路职业技术学院","西安航空职业技术学院","陕西职业技术学院","陕西交通职业技术学院","渭南职业技术学院","陕西国防工业职业技术学院","陕西航空职业技术学院","陕西电子科技职业学院","陕西青年职业学院","西安高新科技职业学院","西安城市建设职业学院","延安职业技术学院","汉中职业技术学院","宝鸡职业技术学院","榆林职业技术学院"],"甘肃省":["兰州大学","西北民族大学","兰州理工大学","兰州交通大学","甘肃农业大学","西北师范大学","兰州工业学院","甘肃中医学院","陇东学院","甘肃民族师范学院","天水师范学院","兰州商学院","甘肃政法学院","河西学院","兰州城市学院","平凉医学高等专科学校","张掖医学高等专科学校","陇南师范高等专科学校","定西师范高等专科学校","甘肃机电职业技术学院","甘肃联合大学","兰州石化职业技术学院","兰州资源环境职业技术学院","甘肃畜牧工程职业技术学院","甘肃农业职业技术学院","甘肃警察职业学院","甘肃交通职业技术学院","武威职业学院","甘肃有色冶金职业技术学院","白银矿冶职业技术学院","甘肃钢铁职业技术学院","甘肃工业职业技术学院","兰州职业技术学院","酒泉职业技术学院","甘肃建筑职业技术学院","甘肃林业职业技术学院","兰州外语职业学院"],"青海省":["青海大学","青海师范大学","青海民族大学","青海畜牧兽医职业技术学院","青海卫生职业技术学院","青海建筑职业技术学院","青海交通职业技术学院","青海警官职业学院"],"宁夏回族自治区":["北方民族大学","宁夏大学","宁夏理工学院","宁夏医科大学","宁夏师范学院","银川能源学院","宁夏民族职业技术学院","宁夏司法警官职业学院","宁夏财经职业技术学院","宁夏工商职业技术学院","宁夏防沙治沙职业技术学院","宁夏职业技术学院","宁夏工业职业学院","宁夏建设职业技术学院"],"新疆维吾尔自治区":["新疆大学","石河子大学","新疆农业大学","塔里木大学","新疆医科大学","新疆师范大学","新疆财经大学","新疆工程学院","伊犁师范学院","喀什师范学院","新疆警察学院","新疆艺术学院","昌吉学院","新疆维吾尔医学专科学校","和田师范专科学校","新疆兵团警官高等专科学校","新疆农业职业技术学院","乌鲁木齐职业大学","新疆机电职业技术学院","新疆轻工职业技术学院","克拉玛依职业技术学院","新疆职业大学","伊犁职业技术学院","新疆建设职业技术学院","巴音郭楞职业技术学院","阿克苏职业技术学院","新疆天山职业技术学院","新疆现代职业技术学院","新疆交通职业技术学院","新疆石河子职业技术学院","新疆能源职业技术学院","新疆体育职业技术学院","新疆应用职业技术学院","昌吉职业技术学院"]}


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