├── .project
├── README.md
├── css
    ├── mine.css
    └── mui.min.css
├── fonts
    └── mui.ttf
├── html
    ├── info.html
    ├── main.html
    ├── pagedetail.html
    ├── search.html
    ├── tab-classify.html
    ├── tab-main.html
    └── tab-mine.html
├── imgs
    ├── icon_like_n.svg
    ├── icon_like_y.svg
    ├── muwu.jpg
    └── play.jpg
├── js
    ├── handlebars-v4.0.11.js
    ├── mui.js
    ├── mui.min.js
    ├── mui.previewimage.js
    ├── mui.pullToRefresh.js
    ├── mui.pullToRefresh.material.js
    ├── mui.zoom.js
    └── vue.js
├── manifest.json
├── screenshots
    ├── download.png
    ├── shot1.jpg
    ├── shot2.jpg
    ├── shot3.jpg
    ├── shot4.jpg
    └── shot5.jpg
└── unpackage
    ├── .confirmed_dependencies
    ├── .confusion
    ├── .dependencies
    └── res
        └── icons
            ├── 120x120.png
            ├── 144x144.png
            ├── 152x152.png
            ├── 167x167.png
            ├── 180x180.png
            ├── 192x192.png
            ├── 20x20.png
            ├── 256x256.png
            ├── 29x29.png
            ├── 40x40.png
            ├── 48x48.png
            ├── 58x58.png
            ├── 60x60.png
            ├── 72x72.png
            ├── 76x76.png
            ├── 80x80.png
            ├── 87x87.png
            └── 96x96.png


/.project:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <projectDescription>
 3 | 	<name>WanAndroid</name>
 4 | 	<comment>Create By HBuilder</comment>
 5 | 	<projects>
 6 | 	</projects>
 7 | 	<buildSpec>
 8 | 		<buildCommand>
 9 | 			<name>com.pandora.projects.ui.MKeyBuilder</name>
10 | 			<arguments>
11 | 			</arguments>
12 | 		</buildCommand>
13 | 		<buildCommand>
14 | 			<name>com.aptana.ide.core.unifiedBuilder</name>
15 | 			<arguments>
16 | 			</arguments>
17 | 		</buildCommand>
18 | 	</buildSpec>
19 | 	<natures>
20 | 		<nature>com.pandora.projects.ui.MKeyNature</nature>
21 | 		<nature>com.aptana.projects.webnature</nature>
22 | 	</natures>
23 | 	<filteredResources>
24 | 		<filter>
25 | 			<id>0</id>
26 | 			<name></name>
27 | 			<type>10</type>
28 | 			<matcher>
29 | 				<id>org.eclipse.ui.ide.orFilterMatcher</id>
30 | 				<arguments>
31 | 					<matcher>
32 | 						<id>org.eclipse.ui.ide.multiFilter</id>
33 | 						<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
34 | 					</matcher>
35 | 					<matcher>
36 | 						<id>org.eclipse.ui.ide.multiFilter</id>
37 | 						<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
38 | 					</matcher>
39 | 				</arguments>
40 | 			</matcher>
41 | 		</filter>
42 | 		<filter>
43 | 			<id>0</id>
44 | 			<name></name>
45 | 			<type>26</type>
46 | 			<matcher>
47 | 				<id>org.eclipse.ui.ide.multiFilter</id>
48 | 				<arguments>1.0-name-matches-false-false-node_modules</arguments>
49 | 			</matcher>
50 | 		</filter>
51 | 	</filteredResources>
52 | </projectDescription>
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WanAndroid
 2 | 
 3 | 这是一个基于Mui和Vue.js开发的App，使用的开发工具是HBuilder,此项目是我学习H5的一个实践项目，后续会持续优化更新...
 4 | 
 5 | ## 预览
 6 | <img src="screenshots/shot1.jpg" width = "30%" />   <img src="screenshots/shot2.jpg" width = "30%" />
 7 | <img src="screenshots/shot3.jpg" width = "30%" />   <img src="screenshots/shot4.jpg" width = "30%" />
 8 | <img src="screenshots/shot5.jpg" width = "30%" /> 
 9 | 
10 | 
11 | ## [下载](https://fir.im/wanandroi)
12 | <img src="screenshots/download.png" width = "30%" />
13 | 
14 | ## Api来自WanAndroid和干货集中营
15 | 
16 | * http://www.wanandroid.com/blog/show/2
17 | * https://gank.io/api
18 | 
19 | 


--------------------------------------------------------------------------------
/css/mine.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * tab-main.css
  3 |  */
  4 | 
  5 | .padding-vertical {
  6 | 	margin-top: 8px;
  7 | 	padding-bottom: 6px;
  8 | }
  9 | 
 10 | .white {
 11 | 	background-color: white;
 12 | }
 13 | 
 14 | .text-white {
 15 | 	color: white;
 16 | }
 17 | 
 18 | .toolbar-bg {
 19 | 	height: 60px;
 20 | 	padding-top: 20px;
 21 | 	background-color: cornflowerblue;
 22 | }
 23 | 
 24 | .vertical {
 25 | 	width: 100%;
 26 | 	height: 20px;
 27 | 	line-height: 20px;
 28 | }
 29 | 
 30 | .vertical-img {
 31 | 	width: 20px;
 32 | 	height: 20px;
 33 | }
 34 | 
 35 | .round_icon {
 36 | 	width: 20px;
 37 | 	height: 20px;
 38 | 	margin-right: 6px;
 39 | 	border-radius: 50%;
 40 | }
 41 | 
 42 | .banner {
 43 | 	border-radius: 6px;
 44 | 	margin-top: 20px;
 45 | 	margin-left: 20px;
 46 | 	margin-right: 20px;
 47 | 	width: 90%;
 48 | }
 49 | 
 50 | 
 51 | /**
 52 |  * tab-classify.css
 53 |  */
 54 | 
 55 | .mui-bar~.mui-content .mui-fullscreen {
 56 | 	top: 44px;
 57 | 	height: auto;
 58 | }
 59 | 
 60 | .mui-pull-top-tips {
 61 | 	position: absolute;
 62 | 	top: -20px;
 63 | 	left: 50%;
 64 | 	margin-left: -25px;
 65 | 	width: 40px;
 66 | 	height: 40px;
 67 | 	border-radius: 100%;
 68 | 	z-index: 1;
 69 | }
 70 | 
 71 | .mui-bar~.mui-pull-top-tips {
 72 | 	top: 24px;
 73 | }
 74 | 
 75 | .mui-pull-top-wrapper {
 76 | 	width: 42px;
 77 | 	height: 42px;
 78 | 	display: block;
 79 | 	text-align: center;
 80 | 	background-color: #efeff4;
 81 | 	border: 1px solid #ddd;
 82 | 	border-radius: 25px;
 83 | 	background-clip: padding-box;
 84 | 	box-shadow: 0 4px 10px #bbb;
 85 | 	overflow: hidden;
 86 | }
 87 | 
 88 | .mui-pull-top-tips.mui-transitioning {
 89 | 	-webkit-transition-duration: 200ms;
 90 | 	transition-duration: 200ms;
 91 | }
 92 | 
 93 | .mui-pull-top-tips .mui-pull-loading {
 94 | 	/*-webkit-backface-visibility: hidden;
 95 | 		-webkit-transition-duration: 400ms;
 96 | 		transition-duration: 400ms;*/
 97 | 	margin: 0;
 98 | }
 99 | 
100 | .mui-pull-top-wrapper .mui-icon,
101 | .mui-pull-top-wrapper .mui-spinner {
102 | 	margin-top: 7px;
103 | }
104 | 
105 | .mui-pull-top-wrapper .mui-icon.mui-reverse {
106 | 	/*-webkit-transform: rotate(180deg) translateZ(0);*/
107 | }
108 | 
109 | .mui-pull-bottom-tips {
110 | 	text-align: center;
111 | 	background-color: #efeff4;
112 | 	font-size: 15px;
113 | 	line-height: 40px;
114 | 	color: #777;
115 | }
116 | 
117 | .mui-pull-top-canvas {
118 | 	overflow: hidden;
119 | 	background-color: #fafafa;
120 | 	border-radius: 40px;
121 | 	box-shadow: 0 4px 10px #bbb;
122 | 	width: 40px;
123 | 	height: 40px;
124 | 	margin: 0 auto;
125 | }
126 | 
127 | .mui-pull-top-canvas canvas {
128 | 	width: 40px;
129 | }
130 | 
131 | .mui-slider-indicator.mui-segmented-control {
132 | 	background-color: #efeff4;
133 | }
134 | 
135 | .img-padding{
136 | 	padding: 3px;
137 | }
138 | 
139 | .margin-top-10{
140 | 	margin-top: 10px;
141 | }
142 | 


--------------------------------------------------------------------------------
/css/mui.min.css:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * =====================================================
   3 |  * Mui v3.7.2 (http://dev.dcloud.net.cn/mui)
   4 |  * =====================================================
   5 |  */
   6 | 
   7 | 
   8 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
   9 | 
  10 | html {
  11 | 	font-family: sans-serif;
  12 | 	-webkit-text-size-adjust: 100%
  13 | }
  14 | 
  15 | body {
  16 | 	margin: 0
  17 | }
  18 | 
  19 | article,
  20 | aside,
  21 | details,
  22 | figcaption,
  23 | figure,
  24 | footer,
  25 | header,
  26 | hgroup,
  27 | main,
  28 | nav,
  29 | section,
  30 | summary {
  31 | 	display: block
  32 | }
  33 | 
  34 | audio,
  35 | canvas,
  36 | progress,
  37 | video {
  38 | 	display: inline-block;
  39 | 	vertical-align: baseline
  40 | }
  41 | 
  42 | audio:not([controls]) {
  43 | 	display: none;
  44 | 	height: 0
  45 | }
  46 | 
  47 | [hidden],
  48 | template {
  49 | 	display: none
  50 | }
  51 | 
  52 | a {
  53 | 	background: 0 0
  54 | }
  55 | 
  56 | a:active,
  57 | a:hover {
  58 | 	outline: 0
  59 | }
  60 | 
  61 | abbr[title] {
  62 | 	border-bottom: 1px dotted
  63 | }
  64 | 
  65 | b,
  66 | strong {
  67 | 	font-weight: 700
  68 | }
  69 | 
  70 | dfn {
  71 | 	font-style: italic
  72 | }
  73 | 
  74 | h1 {
  75 | 	margin: .67em 0
  76 | }
  77 | 
  78 | mark {
  79 | 	color: #000;
  80 | 	background: #ff0
  81 | }
  82 | 
  83 | small {
  84 | 	font-size: 80%
  85 | }
  86 | 
  87 | sub,
  88 | sup {
  89 | 	font-size: 75%;
  90 | 	line-height: 0;
  91 | 	position: relative;
  92 | 	vertical-align: baseline
  93 | }
  94 | 
  95 | sup {
  96 | 	top: -.5em
  97 | }
  98 | 
  99 | sub {
 100 | 	bottom: -.25em
 101 | }
 102 | 
 103 | img {
 104 | 	border: 0
 105 | }
 106 | 
 107 | svg:not(:root) {
 108 | 	overflow: hidden
 109 | }
 110 | 
 111 | figure {
 112 | 	margin: 1em 40px
 113 | }
 114 | 
 115 | hr {
 116 | 	box-sizing: content-box;
 117 | 	height: 0
 118 | }
 119 | 
 120 | pre {
 121 | 	overflow: auto
 122 | }
 123 | 
 124 | code,
 125 | kbd,
 126 | pre,
 127 | samp {
 128 | 	font-family: monospace, monospace;
 129 | 	font-size: 1em
 130 | }
 131 | 
 132 | button,
 133 | input,
 134 | optgroup,
 135 | select,
 136 | textarea {
 137 | 	font: inherit;
 138 | 	margin: 0;
 139 | 	color: inherit
 140 | }
 141 | 
 142 | button {
 143 | 	overflow: visible
 144 | }
 145 | 
 146 | button,
 147 | select {
 148 | 	text-transform: none
 149 | }
 150 | 
 151 | button,
 152 | html input[type=button],
 153 | input[type=reset],
 154 | input[type=submit] {
 155 | 	cursor: pointer;
 156 | 	-webkit-appearance: button
 157 | }
 158 | 
 159 | button[disabled],
 160 | html input[disabled] {
 161 | 	cursor: default
 162 | }
 163 | 
 164 | input {
 165 | 	line-height: normal
 166 | }
 167 | 
 168 | input[type=checkbox],
 169 | input[type=radio] {
 170 | 	box-sizing: border-box;
 171 | 	padding: 0
 172 | }
 173 | 
 174 | input[type=number]::-webkit-inner-spin-button,
 175 | input[type=number]::-webkit-outer-spin-button {
 176 | 	height: auto
 177 | }
 178 | 
 179 | input[type=search]::-webkit-search-cancel-button,
 180 | input[type=search]::-webkit-search-decoration {
 181 | 	-webkit-appearance: none
 182 | }
 183 | 
 184 | fieldset {
 185 | 	margin: 0 2px;
 186 | 	padding: .35em .625em .75em;
 187 | 	border: 1px solid silver
 188 | }
 189 | 
 190 | legend {
 191 | 	padding: 0;
 192 | 	border: 0
 193 | }
 194 | 
 195 | textarea {
 196 | 	overflow: auto
 197 | }
 198 | 
 199 | optgroup {
 200 | 	font-weight: 700
 201 | }
 202 | 
 203 | table {
 204 | 	border-spacing: 0;
 205 | 	border-collapse: collapse
 206 | }
 207 | 
 208 | td,
 209 | th {
 210 | 	padding: 0
 211 | }
 212 | 
 213 | * {
 214 | 	-webkit-box-sizing: border-box;
 215 | 	box-sizing: border-box;
 216 | 	-webkit-user-select: none;
 217 | 	outline: 0;
 218 | 	-webkit-tap-highlight-color: transparent;
 219 | 	-webkit-tap-highlight-color: transparent
 220 | }
 221 | 
 222 | body {
 223 | 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
 224 | 	font-size: 17px;
 225 | 	line-height: 21px;
 226 | 	color: #000;
 227 | 	background-color: #efeff4;
 228 | 	-webkit-overflow-scrolling: touch
 229 | }
 230 | 
 231 | a {
 232 | 	text-decoration: none;
 233 | 	color: #007aff
 234 | }
 235 | 
 236 | a:active {
 237 | 	color: #0062cc
 238 | }
 239 | 
 240 | .mui-content {
 241 | 	background-color: #efeff4;
 242 | 	-webkit-overflow-scrolling: touch
 243 | }
 244 | 
 245 | .mui-bar-nav~.mui-content {
 246 | 	padding-top: 44px
 247 | }
 248 | 
 249 | .mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
 250 | 	top: 44px
 251 | }
 252 | 
 253 | .mui-bar-header-secondary~.mui-content {
 254 | 	padding-top: 88px
 255 | }
 256 | 
 257 | .mui-bar-header-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
 258 | 	top: 88px
 259 | }
 260 | 
 261 | .mui-bar-footer~.mui-content {
 262 | 	padding-bottom: 44px
 263 | }
 264 | 
 265 | .mui-bar-footer~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
 266 | 	bottom: 44px
 267 | }
 268 | 
 269 | .mui-bar-footer-secondary~.mui-content {
 270 | 	padding-bottom: 88px
 271 | }
 272 | 
 273 | .mui-bar-footer-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
 274 | 	bottom: 88px
 275 | }
 276 | 
 277 | .mui-bar-tab~.mui-content {
 278 | 	padding-bottom: 50px
 279 | }
 280 | 
 281 | .mui-bar-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
 282 | 	bottom: 50px
 283 | }
 284 | 
 285 | .mui-bar-footer-secondary-tab~.mui-content {
 286 | 	padding-bottom: 94px
 287 | }
 288 | 
 289 | .mui-bar-footer-secondary-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
 290 | 	bottom: 94px
 291 | }
 292 | 
 293 | .mui-content-padded {
 294 | 	margin: 10px
 295 | }
 296 | 
 297 | .mui-inline {
 298 | 	display: inline-block;
 299 | 	vertical-align: top
 300 | }
 301 | 
 302 | .mui-block {
 303 | 	display: block!important
 304 | }
 305 | 
 306 | .mui-visibility {
 307 | 	visibility: visible!important
 308 | }
 309 | 
 310 | .mui-hidden {
 311 | 	display: none!important
 312 | }
 313 | 
 314 | .mui-ellipsis {
 315 | 	overflow: hidden;
 316 | 	white-space: nowrap;
 317 | 	text-overflow: ellipsis
 318 | }
 319 | 
 320 | .mui-ellipsis-2 {
 321 | 	display: -webkit-box;
 322 | 	overflow: hidden;
 323 | 	white-space: normal!important;
 324 | 	text-overflow: ellipsis;
 325 | 	word-wrap: break-word;
 326 | 	-webkit-line-clamp: 2;
 327 | 	-webkit-box-orient: vertical
 328 | }
 329 | 
 330 | .mui-table {
 331 | 	display: table;
 332 | 	width: 100%;
 333 | 	table-layout: fixed
 334 | }
 335 | 
 336 | .mui-table-cell {
 337 | 	position: relative;
 338 | 	display: table-cell
 339 | }
 340 | 
 341 | .mui-text-left {
 342 | 	text-align: left!important
 343 | }
 344 | 
 345 | .mui-text-center {
 346 | 	text-align: center!important
 347 | }
 348 | 
 349 | .mui-text-justify {
 350 | 	text-align: justify!important
 351 | }
 352 | 
 353 | .mui-text-right {
 354 | 	text-align: right!important
 355 | }
 356 | 
 357 | .mui-pull-left {
 358 | 	float: left
 359 | }
 360 | 
 361 | .mui-pull-right {
 362 | 	float: right
 363 | }
 364 | 
 365 | .mui-list-unstyled {
 366 | 	padding-left: 0;
 367 | 	list-style: none
 368 | }
 369 | 
 370 | .mui-list-inline {
 371 | 	margin-left: -5px;
 372 | 	padding-left: 0;
 373 | 	list-style: none
 374 | }
 375 | 
 376 | .mui-list-inline>li {
 377 | 	display: inline-block;
 378 | 	padding-right: 5px;
 379 | 	padding-left: 5px
 380 | }
 381 | 
 382 | .mui-clearfix:after,
 383 | .mui-clearfix:before {
 384 | 	display: table;
 385 | 	content: ' '
 386 | }
 387 | 
 388 | .mui-clearfix:after {
 389 | 	clear: both
 390 | }
 391 | 
 392 | .mui-bg-primary {
 393 | 	background-color: #007aff
 394 | }
 395 | 
 396 | .mui-bg-positive {
 397 | 	background-color: #4cd964
 398 | }
 399 | 
 400 | .mui-bg-negative {
 401 | 	background-color: #dd524d
 402 | }
 403 | 
 404 | .mui-error {
 405 | 	margin: 88px 35px;
 406 | 	padding: 10px;
 407 | 	border-radius: 6px;
 408 | 	background-color: #bbb
 409 | }
 410 | 
 411 | .mui-subtitle {
 412 | 	font-size: 15px
 413 | }
 414 | 
 415 | h1,
 416 | h2,
 417 | h3,
 418 | h4,
 419 | h5,
 420 | h6 {
 421 | 	line-height: 1;
 422 | 	margin-top: 5px;
 423 | 	margin-bottom: 5px
 424 | }
 425 | 
 426 | .mui-h1,
 427 | h1 {
 428 | 	font-size: 36px
 429 | }
 430 | 
 431 | .mui-h2,
 432 | h2 {
 433 | 	font-size: 30px
 434 | }
 435 | 
 436 | .mui-h3,
 437 | h3 {
 438 | 	font-size: 24px
 439 | }
 440 | 
 441 | .mui-h4,
 442 | h4 {
 443 | 	font-size: 18px
 444 | }
 445 | 
 446 | .mui-h5,
 447 | h5 {
 448 | 	font-size: 14px;
 449 | 	font-weight: 400;
 450 | 	color: #8f8f94
 451 | }
 452 | 
 453 | .mui-h6,
 454 | h6 {
 455 | 	font-size: 12px;
 456 | 	font-weight: 400;
 457 | 	color: #8f8f94
 458 | }
 459 | 
 460 | p {
 461 | 	font-size: 14px;
 462 | 	margin-top: 0;
 463 | 	margin-bottom: 10px;
 464 | 	color: #8f8f94
 465 | }
 466 | 
 467 | .mui-row:after,
 468 | .mui-row:before {
 469 | 	display: table;
 470 | 	content: ' '
 471 | }
 472 | 
 473 | .mui-row:after {
 474 | 	clear: both
 475 | }
 476 | 
 477 | .mui-col-sm-1,
 478 | .mui-col-sm-10,
 479 | .mui-col-sm-11,
 480 | .mui-col-sm-12,
 481 | .mui-col-sm-2,
 482 | .mui-col-sm-3,
 483 | .mui-col-sm-4,
 484 | .mui-col-sm-5,
 485 | .mui-col-sm-6,
 486 | .mui-col-sm-7,
 487 | .mui-col-sm-8,
 488 | .mui-col-sm-9,
 489 | .mui-col-xs-1,
 490 | .mui-col-xs-10,
 491 | .mui-col-xs-11,
 492 | .mui-col-xs-12,
 493 | .mui-col-xs-2,
 494 | .mui-col-xs-3,
 495 | .mui-col-xs-4,
 496 | .mui-col-xs-5,
 497 | .mui-col-xs-6,
 498 | .mui-col-xs-7,
 499 | .mui-col-xs-8,
 500 | .mui-col-xs-9 {
 501 | 	position: relative;
 502 | 	min-height: 1px
 503 | }
 504 | 
 505 | .mui-row>[class*=mui-col-] {
 506 | 	float: left
 507 | }
 508 | 
 509 | .mui-col-xs-12 {
 510 | 	width: 100%
 511 | }
 512 | 
 513 | .mui-col-xs-11 {
 514 | 	width: 91.66666667%
 515 | }
 516 | 
 517 | .mui-col-xs-10 {
 518 | 	width: 83.33333333%
 519 | }
 520 | 
 521 | .mui-col-xs-9 {
 522 | 	width: 75%
 523 | }
 524 | 
 525 | .mui-col-xs-8 {
 526 | 	width: 66.66666667%
 527 | }
 528 | 
 529 | .mui-col-xs-7 {
 530 | 	width: 58.33333333%
 531 | }
 532 | 
 533 | .mui-col-xs-6 {
 534 | 	width: 50%
 535 | }
 536 | 
 537 | .mui-col-xs-5 {
 538 | 	width: 41.66666667%
 539 | }
 540 | 
 541 | .mui-col-xs-4 {
 542 | 	width: 33.33333333%
 543 | }
 544 | 
 545 | .mui-col-xs-3 {
 546 | 	width: 25%
 547 | }
 548 | 
 549 | .mui-col-xs-2 {
 550 | 	width: 16.66666667%
 551 | }
 552 | 
 553 | .mui-col-xs-1 {
 554 | 	width: 8.33333333%
 555 | }
 556 | 
 557 | @media (min-width:400px) {
 558 | 	.mui-col-sm-12 {
 559 | 		width: 100%
 560 | 	}
 561 | 	.mui-col-sm-11 {
 562 | 		width: 91.66666667%
 563 | 	}
 564 | 	.mui-col-sm-10 {
 565 | 		width: 83.33333333%
 566 | 	}
 567 | 	.mui-col-sm-9 {
 568 | 		width: 75%
 569 | 	}
 570 | 	.mui-col-sm-8 {
 571 | 		width: 66.66666667%
 572 | 	}
 573 | 	.mui-col-sm-7 {
 574 | 		width: 58.33333333%
 575 | 	}
 576 | 	.mui-col-sm-6 {
 577 | 		width: 50%
 578 | 	}
 579 | 	.mui-col-sm-5 {
 580 | 		width: 41.66666667%
 581 | 	}
 582 | 	.mui-col-sm-4 {
 583 | 		width: 33.33333333%
 584 | 	}
 585 | 	.mui-col-sm-3 {
 586 | 		width: 25%
 587 | 	}
 588 | 	.mui-col-sm-2 {
 589 | 		width: 16.66666667%
 590 | 	}
 591 | 	.mui-col-sm-1 {
 592 | 		width: 8.33333333%
 593 | 	}
 594 | }
 595 | 
 596 | .mui-scroll-wrapper {
 597 | 	position: absolute;
 598 | 	z-index: 2;
 599 | 	top: 0;
 600 | 	bottom: 0;
 601 | 	left: 0;
 602 | 	overflow: hidden;
 603 | 	width: 100%
 604 | }
 605 | 
 606 | .mui-scroll {
 607 | 	position: absolute;
 608 | 	z-index: 1;
 609 | 	width: 100%
 610 | }
 611 | 
 612 | .mui-scrollbar {
 613 | 	position: absolute;
 614 | 	z-index: 9998;
 615 | 	overflow: hidden;
 616 | 	-webkit-transition: 500ms;
 617 | 	transition: 500ms;
 618 | 	transform: translateZ(0px);
 619 | 	pointer-events: none;
 620 | 	opacity: 0
 621 | }
 622 | 
 623 | .mui-scrollbar-vertical {
 624 | 	top: 0;
 625 | 	right: 1px;
 626 | 	bottom: 2px;
 627 | 	width: 4px
 628 | }
 629 | 
 630 | .mui-scrollbar-vertical .mui-scrollbar-indicator {
 631 | 	width: 100%
 632 | }
 633 | 
 634 | .mui-scrollbar-horizontal {
 635 | 	right: 2px;
 636 | 	bottom: 0;
 637 | 	left: 2px;
 638 | 	height: 4px
 639 | }
 640 | 
 641 | .mui-scrollbar-horizontal .mui-scrollbar-indicator {
 642 | 	height: 100%
 643 | }
 644 | 
 645 | .mui-scrollbar-indicator {
 646 | 	position: absolute;
 647 | 	display: block;
 648 | 	box-sizing: border-box;
 649 | 	-webkit-transition: .01s cubic-bezier(.1, .57, .1, 1);
 650 | 	transition: .01s cubic-bezier(.1, .57, .1, 1);
 651 | 	transform: translate(0px, 0) translateZ(0px);
 652 | 	border: 1px solid rgba(255, 255, 255, .80196);
 653 | 	border-radius: 2px;
 654 | 	background: rgba(0, 0, 0, .39804)
 655 | }
 656 | 
 657 | .mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll-wrapper,
 658 | .mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll-wrapper {
 659 | 	position: absolute;
 660 | 	top: 0;
 661 | 	bottom: 0;
 662 | 	left: 0;
 663 | 	overflow: hidden;
 664 | 	width: 100%
 665 | }
 666 | 
 667 | .mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll,
 668 | .mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll {
 669 | 	position: absolute;
 670 | 	width: 100%
 671 | }
 672 | 
 673 | .mui-plus-pullrefresh .mui-scroll-wrapper,
 674 | .mui-plus-pullrefresh .mui-slider-group {
 675 | 	position: static;
 676 | 	top: auto;
 677 | 	bottom: auto;
 678 | 	left: auto;
 679 | 	overflow: auto;
 680 | 	width: auto
 681 | }
 682 | 
 683 | .mui-plus-pullrefresh .mui-slider-group {
 684 | 	overflow: visible
 685 | }
 686 | 
 687 | .mui-plus-pullrefresh .mui-scroll {
 688 | 	position: static;
 689 | 	width: auto
 690 | }
 691 | 
 692 | .mui-off-canvas-wrap .mui-bar {
 693 | 	position: absolute!important;
 694 | 	-webkit-transform: translate3d(0, 0, 0);
 695 | 	transform: translate3d(0, 0, 0);
 696 | 	-webkit-box-shadow: none;
 697 | 	box-shadow: none
 698 | }
 699 | 
 700 | .mui-off-canvas-wrap {
 701 | 	position: relative;
 702 | 	z-index: 1;
 703 | 	overflow: hidden;
 704 | 	width: 100%;
 705 | 	height: 100%
 706 | }
 707 | 
 708 | .mui-off-canvas-wrap .mui-inner-wrap {
 709 | 	position: relative;
 710 | 	z-index: 1;
 711 | 	width: 100%;
 712 | 	height: 100%
 713 | }
 714 | 
 715 | .mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning {
 716 | 	-webkit-transition: -webkit-transform 350ms;
 717 | 	transition: transform 350ms cubic-bezier(.165, .84, .44, 1)
 718 | }
 719 | 
 720 | .mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left {
 721 | 	-webkit-transform: translate3d(-100%, 0, 0);
 722 | 	transform: translate3d(-100%, 0, 0)
 723 | }
 724 | 
 725 | .mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right {
 726 | 	-webkit-transform: translate3d(100%, 0, 0);
 727 | 	transform: translate3d(100%, 0, 0)
 728 | }
 729 | 
 730 | .mui-off-canvas-wrap.mui-active {
 731 | 	overflow: hidden;
 732 | 	height: 100%
 733 | }
 734 | 
 735 | .mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop {
 736 | 	position: absolute;
 737 | 	z-index: 998;
 738 | 	top: 0;
 739 | 	right: 0;
 740 | 	bottom: 0;
 741 | 	left: 0;
 742 | 	display: block;
 743 | 	transition: background 350ms cubic-bezier(.165, .84, .44, 1);
 744 | 	background: rgba(0, 0, 0, .4);
 745 | 	box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
 746 | 	-webkit-tap-highlight-color: transparent
 747 | }
 748 | 
 749 | .mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right {
 750 | 	z-index: 10000!important;
 751 | 	-webkit-transform: translate3d(100%, 0, 0)
 752 | }
 753 | 
 754 | .mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-left {
 755 | 	z-index: 10000!important;
 756 | 	-webkit-transform: translate3d(-100%, 0, 0)
 757 | }
 758 | 
 759 | .mui-off-canvas-left,
 760 | .mui-off-canvas-right {
 761 | 	position: absolute;
 762 | 	z-index: -1;
 763 | 	top: 0;
 764 | 	bottom: 0;
 765 | 	visibility: hidden;
 766 | 	box-sizing: content-box;
 767 | 	width: 70%;
 768 | 	min-height: 100%;
 769 | 	background: #333;
 770 | 	-webkit-overflow-scrolling: touch
 771 | }
 772 | 
 773 | .mui-off-canvas-left.mui-transitioning,
 774 | .mui-off-canvas-right.mui-transitioning {
 775 | 	-webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1);
 776 | 	transition: transform 350ms cubic-bezier(.165, .84, .44, 1)
 777 | }
 778 | 
 779 | .mui-off-canvas-left {
 780 | 	left: 0
 781 | }
 782 | 
 783 | .mui-off-canvas-right {
 784 | 	right: 0
 785 | }
 786 | 
 787 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable {
 788 | 	background-color: #333
 789 | }
 790 | 
 791 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left,
 792 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-right {
 793 | 	width: 80%;
 794 | 	-webkit-transform: scale(.8);
 795 | 	transform: scale(.8);
 796 | 	opacity: .1
 797 | }
 798 | 
 799 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left.mui-transitioning,
 800 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-right.mui-transitioning {
 801 | 	-webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
 802 | 	transition: transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1)
 803 | }
 804 | 
 805 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-left {
 806 | 	-webkit-transform-origin: -100%;
 807 | 	transform-origin: -100%
 808 | }
 809 | 
 810 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable>.mui-off-canvas-right {
 811 | 	-webkit-transform-origin: 200%;
 812 | 	transform-origin: 200%
 813 | }
 814 | 
 815 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-inner-wrap {
 816 | 	-webkit-transform: scale(.8);
 817 | 	transform: scale(.8)
 818 | }
 819 | 
 820 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-off-canvas-left,
 821 | .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active>.mui-off-canvas-right {
 822 | 	-webkit-transform: scale(1);
 823 | 	transform: scale(1);
 824 | 	opacity: 1
 825 | }
 826 | 
 827 | .mui-loading .mui-spinner {
 828 | 	display: block;
 829 | 	margin: 0 auto
 830 | }
 831 | 
 832 | .mui-spinner {
 833 | 	display: inline-block;
 834 | 	width: 24px;
 835 | 	height: 24px;
 836 | 	-webkit-transform-origin: 50%;
 837 | 	transform-origin: 50%;
 838 | 	-webkit-animation: spinner-spin 1s step-end infinite;
 839 | 	animation: spinner-spin 1s step-end infinite
 840 | }
 841 | 
 842 | .mui-spinner:after {
 843 | 	display: block;
 844 | 	width: 100%;
 845 | 	height: 100%;
 846 | 	content: '';
 847 | 	background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
 848 | 	background-repeat: no-repeat;
 849 | 	background-position: 50%;
 850 | 	background-size: 100%
 851 | }
 852 | 
 853 | .mui-spinner-white:after {
 854 | 	background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>')
 855 | }
 856 | 
 857 | @-webkit-keyframes spinner-spin {
 858 | 	0% {
 859 | 		-webkit-transform: rotate(0deg)
 860 | 	}
 861 | 	8.33333333% {
 862 | 		-webkit-transform: rotate(30deg)
 863 | 	}
 864 | 	16.66666667% {
 865 | 		-webkit-transform: rotate(60deg)
 866 | 	}
 867 | 	25% {
 868 | 		-webkit-transform: rotate(90deg)
 869 | 	}
 870 | 	33.33333333% {
 871 | 		-webkit-transform: rotate(120deg)
 872 | 	}
 873 | 	41.66666667% {
 874 | 		-webkit-transform: rotate(150deg)
 875 | 	}
 876 | 	50% {
 877 | 		-webkit-transform: rotate(180deg)
 878 | 	}
 879 | 	58.33333333% {
 880 | 		-webkit-transform: rotate(210deg)
 881 | 	}
 882 | 	66.66666667% {
 883 | 		-webkit-transform: rotate(240deg)
 884 | 	}
 885 | 	75% {
 886 | 		-webkit-transform: rotate(270deg)
 887 | 	}
 888 | 	83.33333333% {
 889 | 		-webkit-transform: rotate(300deg)
 890 | 	}
 891 | 	91.66666667% {
 892 | 		-webkit-transform: rotate(330deg)
 893 | 	}
 894 | 	100% {
 895 | 		-webkit-transform: rotate(360deg)
 896 | 	}
 897 | }
 898 | 
 899 | @keyframes spinner-spin {
 900 | 	0% {
 901 | 		transform: rotate(0deg)
 902 | 	}
 903 | 	8.33333333% {
 904 | 		transform: rotate(30deg)
 905 | 	}
 906 | 	16.66666667% {
 907 | 		transform: rotate(60deg)
 908 | 	}
 909 | 	25% {
 910 | 		transform: rotate(90deg)
 911 | 	}
 912 | 	33.33333333% {
 913 | 		transform: rotate(120deg)
 914 | 	}
 915 | 	41.66666667% {
 916 | 		transform: rotate(150deg)
 917 | 	}
 918 | 	50% {
 919 | 		transform: rotate(180deg)
 920 | 	}
 921 | 	58.33333333% {
 922 | 		transform: rotate(210deg)
 923 | 	}
 924 | 	66.66666667% {
 925 | 		transform: rotate(240deg)
 926 | 	}
 927 | 	75% {
 928 | 		transform: rotate(270deg)
 929 | 	}
 930 | 	83.33333333% {
 931 | 		transform: rotate(300deg)
 932 | 	}
 933 | 	91.66666667% {
 934 | 		transform: rotate(330deg)
 935 | 	}
 936 | 	100% {
 937 | 		transform: rotate(360deg)
 938 | 	}
 939 | }
 940 | 
 941 | .mui-btn,
 942 | button,
 943 | input[type=button],
 944 | input[type=reset],
 945 | input[type=submit] {
 946 | 	font-size: 14px;
 947 | 	font-weight: 400;
 948 | 	line-height: 1.42;
 949 | 	position: relative;
 950 | 	display: inline-block;
 951 | 	margin-bottom: 0;
 952 | 	padding: 6px 12px;
 953 | 	cursor: pointer;
 954 | 	-webkit-transition: all;
 955 | 	transition: all;
 956 | 	-webkit-transition-timing-function: linear;
 957 | 	transition-timing-function: linear;
 958 | 	-webkit-transition-duration: .2s;
 959 | 	transition-duration: .2s;
 960 | 	text-align: center;
 961 | 	vertical-align: top;
 962 | 	white-space: nowrap;
 963 | 	color: #333;
 964 | 	border: 1px solid #ccc;
 965 | 	border-radius: 3px;
 966 | 	border-top-left-radius: 3px;
 967 | 	border-top-right-radius: 3px;
 968 | 	border-bottom-right-radius: 3px;
 969 | 	border-bottom-left-radius: 3px;
 970 | 	background-color: #fff;
 971 | 	background-clip: padding-box
 972 | }
 973 | 
 974 | .mui-btn.mui-active:enabled,
 975 | .mui-btn:enabled:active,
 976 | button.mui-active:enabled,
 977 | button:enabled:active,
 978 | input[type=button].mui-active:enabled,
 979 | input[type=button]:enabled:active,
 980 | input[type=reset].mui-active:enabled,
 981 | input[type=reset]:enabled:active,
 982 | input[type=submit].mui-active:enabled,
 983 | input[type=submit]:enabled:active {
 984 | 	color: #fff;
 985 | 	background-color: #929292
 986 | }
 987 | 
 988 | .mui-btn.mui-disabled,
 989 | .mui-btn:disabled,
 990 | button.mui-disabled,
 991 | button:disabled,
 992 | input[type=button].mui-disabled,
 993 | input[type=button]:disabled,
 994 | input[type=reset].mui-disabled,
 995 | input[type=reset]:disabled,
 996 | input[type=submit].mui-disabled,
 997 | input[type=submit]:disabled {
 998 | 	opacity: .6
 999 | }
1000 | 
1001 | .mui-btn-blue,
1002 | .mui-btn-primary,
1003 | input[type=submit] {
1004 | 	color: #fff;
1005 | 	border: 1px solid #007aff;
1006 | 	background-color: #007aff
1007 | }
1008 | 
1009 | .mui-btn-blue.mui-active:enabled,
1010 | .mui-btn-blue:enabled:active,
1011 | .mui-btn-primary.mui-active:enabled,
1012 | .mui-btn-primary:enabled:active,
1013 | input[type=submit].mui-active:enabled,
1014 | input[type=submit]:enabled:active {
1015 | 	color: #fff;
1016 | 	border: 1px solid #0062cc;
1017 | 	background-color: #0062cc
1018 | }
1019 | 
1020 | .mui-btn-green,
1021 | .mui-btn-positive,
1022 | .mui-btn-success {
1023 | 	color: #fff;
1024 | 	border: 1px solid #4cd964;
1025 | 	background-color: #4cd964
1026 | }
1027 | 
1028 | .mui-btn-green.mui-active:enabled,
1029 | .mui-btn-green:enabled:active,
1030 | .mui-btn-positive.mui-active:enabled,
1031 | .mui-btn-positive:enabled:active,
1032 | .mui-btn-success.mui-active:enabled,
1033 | .mui-btn-success:enabled:active {
1034 | 	color: #fff;
1035 | 	border: 1px solid #2ac845;
1036 | 	background-color: #2ac845
1037 | }
1038 | 
1039 | .mui-btn-warning,
1040 | .mui-btn-yellow {
1041 | 	color: #fff;
1042 | 	border: 1px solid #f0ad4e;
1043 | 	background-color: #f0ad4e
1044 | }
1045 | 
1046 | .mui-btn-warning.mui-active:enabled,
1047 | .mui-btn-warning:enabled:active,
1048 | .mui-btn-yellow.mui-active:enabled,
1049 | .mui-btn-yellow:enabled:active {
1050 | 	color: #fff;
1051 | 	border: 1px solid #ec971f;
1052 | 	background-color: #ec971f
1053 | }
1054 | 
1055 | .mui-btn-danger,
1056 | .mui-btn-negative,
1057 | .mui-btn-red {
1058 | 	color: #fff;
1059 | 	border: 1px solid #dd524d;
1060 | 	background-color: #dd524d
1061 | }
1062 | 
1063 | .mui-btn-danger.mui-active:enabled,
1064 | .mui-btn-danger:enabled:active,
1065 | .mui-btn-negative.mui-active:enabled,
1066 | .mui-btn-negative:enabled:active,
1067 | .mui-btn-red.mui-active:enabled,
1068 | .mui-btn-red:enabled:active {
1069 | 	color: #fff;
1070 | 	border: 1px solid #cf2d28;
1071 | 	background-color: #cf2d28
1072 | }
1073 | 
1074 | .mui-btn-purple,
1075 | .mui-btn-royal {
1076 | 	color: #fff;
1077 | 	border: 1px solid #8a6de9;
1078 | 	background-color: #8a6de9
1079 | }
1080 | 
1081 | .mui-btn-purple.mui-active:enabled,
1082 | .mui-btn-purple:enabled:active,
1083 | .mui-btn-royal.mui-active:enabled,
1084 | .mui-btn-royal:enabled:active {
1085 | 	color: #fff;
1086 | 	border: 1px solid #6641e2;
1087 | 	background-color: #6641e2
1088 | }
1089 | 
1090 | .mui-btn-grey {
1091 | 	color: #fff;
1092 | 	border: 1px solid #c7c7cc;
1093 | 	background-color: #c7c7cc
1094 | }
1095 | 
1096 | .mui-btn-grey.mui-active:enabled,
1097 | .mui-btn-grey:enabled:active {
1098 | 	color: #fff;
1099 | 	border: 1px solid #acacb4;
1100 | 	background-color: #acacb4
1101 | }
1102 | 
1103 | .mui-btn-outlined {
1104 | 	background-color: transparent
1105 | }
1106 | 
1107 | .mui-btn-outlined.mui-btn-blue,
1108 | .mui-btn-outlined.mui-btn-primary {
1109 | 	color: #007aff
1110 | }
1111 | 
1112 | .mui-btn-outlined.mui-btn-green,
1113 | .mui-btn-outlined.mui-btn-positive,
1114 | .mui-btn-outlined.mui-btn-success {
1115 | 	color: #4cd964
1116 | }
1117 | 
1118 | .mui-btn-outlined.mui-btn-warning,
1119 | .mui-btn-outlined.mui-btn-yellow {
1120 | 	color: #f0ad4e
1121 | }
1122 | 
1123 | .mui-btn-outlined.mui-btn-danger,
1124 | .mui-btn-outlined.mui-btn-negative,
1125 | .mui-btn-outlined.mui-btn-red {
1126 | 	color: #dd524d
1127 | }
1128 | 
1129 | .mui-btn-outlined.mui-btn-purple,
1130 | .mui-btn-outlined.mui-btn-royal {
1131 | 	color: #8a6de9
1132 | }
1133 | 
1134 | .mui-btn-outlined.mui-btn-blue:enabled:active,
1135 | .mui-btn-outlined.mui-btn-danger:enabled:active,
1136 | .mui-btn-outlined.mui-btn-green:enabled:active,
1137 | .mui-btn-outlined.mui-btn-negative:enabled:active,
1138 | .mui-btn-outlined.mui-btn-positive:enabled:active,
1139 | .mui-btn-outlined.mui-btn-primary:enabled:active,
1140 | .mui-btn-outlined.mui-btn-purple:enabled:active,
1141 | .mui-btn-outlined.mui-btn-red:enabled:active,
1142 | .mui-btn-outlined.mui-btn-royal:enabled:active,
1143 | .mui-btn-outlined.mui-btn-success:enabled:active,
1144 | .mui-btn-outlined.mui-btn-warning:enabled:active,
1145 | .mui-btn-outlined.mui-btn-yellow:enabled:active {
1146 | 	color: #fff
1147 | }
1148 | 
1149 | .mui-btn-link {
1150 | 	padding-top: 6px;
1151 | 	padding-bottom: 6px;
1152 | 	color: #007aff;
1153 | 	border: 0;
1154 | 	background-color: transparent
1155 | }
1156 | 
1157 | .mui-btn-link.mui-active:enabled,
1158 | .mui-btn-link:enabled:active {
1159 | 	color: #0062cc;
1160 | 	background-color: transparent
1161 | }
1162 | 
1163 | .mui-btn-block {
1164 | 	font-size: 18px;
1165 | 	display: block;
1166 | 	width: 100%;
1167 | 	margin-bottom: 10px;
1168 | 	padding: 15px 0
1169 | }
1170 | 
1171 | .mui-btn .mui-badge {
1172 | 	font-size: 14px;
1173 | 	margin: -2px -4px -2px 4px;
1174 | 	background-color: rgba(0, 0, 0, .15)
1175 | }
1176 | 
1177 | .mui-btn .mui-badge-inverted,
1178 | .mui-btn:enabled:active .mui-badge-inverted {
1179 | 	background-color: transparent
1180 | }
1181 | 
1182 | .mui-btn-negative:enabled:active .mui-badge-inverted,
1183 | .mui-btn-positive:enabled:active .mui-badge-inverted,
1184 | .mui-btn-primary:enabled:active .mui-badge-inverted {
1185 | 	color: #fff
1186 | }
1187 | 
1188 | .mui-btn-block .mui-badge {
1189 | 	position: absolute;
1190 | 	right: 0;
1191 | 	margin-right: 10px
1192 | }
1193 | 
1194 | .mui-btn .mui-icon {
1195 | 	font-size: inherit
1196 | }
1197 | 
1198 | .mui-btn.mui-icon {
1199 | 	font-size: 14px;
1200 | 	line-height: 1.42
1201 | }
1202 | 
1203 | .mui-btn.mui-fab {
1204 | 	width: 56px;
1205 | 	height: 56px;
1206 | 	padding: 16px;
1207 | 	border-radius: 50%;
1208 | 	outline: 0
1209 | }
1210 | 
1211 | .mui-btn.mui-fab.mui-btn-mini {
1212 | 	width: 40px;
1213 | 	height: 40px;
1214 | 	padding: 8px
1215 | }
1216 | 
1217 | .mui-btn.mui-fab .mui-icon {
1218 | 	font-size: 24px;
1219 | 	line-height: 24px;
1220 | 	width: 24px;
1221 | 	height: 24px
1222 | }
1223 | 
1224 | .mui-btn .mui-spinner {
1225 | 	width: 14px;
1226 | 	height: 14px;
1227 | 	vertical-align: text-bottom
1228 | }
1229 | 
1230 | .mui-btn-block .mui-spinner {
1231 | 	width: 22px;
1232 | 	height: 22px
1233 | }
1234 | 
1235 | .mui-bar {
1236 | 	position: fixed;
1237 | 	z-index: 10;
1238 | 	right: 0;
1239 | 	left: 0;
1240 | 	height: 44px;
1241 | 	padding-right: 10px;
1242 | 	padding-left: 10px;
1243 | 	border-bottom: 0;
1244 | 	background-color: #f7f7f7;
1245 | 	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
1246 | 	box-shadow: 0 0 1px rgba(0, 0, 0, .85);
1247 | 	-webkit-backface-visibility: hidden;
1248 | 	backface-visibility: hidden
1249 | }
1250 | 
1251 | .mui-bar .mui-title {
1252 | 	right: 40px;
1253 | 	left: 40px;
1254 | 	display: inline-block;
1255 | 	overflow: hidden;
1256 | 	width: auto;
1257 | 	margin: 0;
1258 | 	text-overflow: ellipsis
1259 | }
1260 | 
1261 | .mui-bar .mui-backdrop {
1262 | 	background: 0 0
1263 | }
1264 | 
1265 | .mui-bar-header-secondary {
1266 | 	top: 44px
1267 | }
1268 | 
1269 | .mui-bar-footer {
1270 | 	bottom: 0
1271 | }
1272 | 
1273 | .mui-bar-footer-secondary {
1274 | 	bottom: 44px
1275 | }
1276 | 
1277 | .mui-bar-footer-secondary-tab {
1278 | 	bottom: 50px
1279 | }
1280 | 
1281 | .mui-bar-footer,
1282 | .mui-bar-footer-secondary,
1283 | .mui-bar-footer-secondary-tab {
1284 | 	border-top: 0
1285 | }
1286 | 
1287 | .mui-bar-transparent {
1288 | 	top: 0;
1289 | 	background-color: rgba(247, 247, 247, 0);
1290 | 	-webkit-box-shadow: none;
1291 | 	box-shadow: none
1292 | }
1293 | 
1294 | .mui-bar-nav {
1295 | 	top: 0;
1296 | 	-webkit-box-shadow: 0 1px 6px #ccc;
1297 | 	box-shadow: 0 1px 6px #ccc
1298 | }
1299 | 
1300 | .mui-bar-nav~.mui-content .mui-anchor {
1301 | 	display: block;
1302 | 	visibility: hidden;
1303 | 	height: 45px;
1304 | 	margin-top: -45px
1305 | }
1306 | 
1307 | .mui-bar-nav.mui-bar .mui-icon {
1308 | 	margin-right: -10px;
1309 | 	margin-left: -10px;
1310 | 	padding-right: 10px;
1311 | 	padding-left: 10px
1312 | }
1313 | 
1314 | .mui-title {
1315 | 	font-size: 17px;
1316 | 	font-weight: 500;
1317 | 	line-height: 44px;
1318 | 	position: absolute;
1319 | 	display: block;
1320 | 	width: 100%;
1321 | 	margin: 0 -10px;
1322 | 	padding: 0;
1323 | 	text-align: center;
1324 | 	white-space: nowrap;
1325 | 	color: #000
1326 | }
1327 | 
1328 | .mui-title a {
1329 | 	color: inherit
1330 | }
1331 | 
1332 | .mui-bar-tab {
1333 | 	bottom: 0;
1334 | 	display: table;
1335 | 	width: 100%;
1336 | 	height: 50px;
1337 | 	padding: 0;
1338 | 	table-layout: fixed;
1339 | 	border-top: 0;
1340 | 	border-bottom: 0;
1341 | 	-webkit-touch-callout: none
1342 | }
1343 | 
1344 | .mui-bar-tab .mui-tab-item {
1345 | 	display: table-cell;
1346 | 	overflow: hidden;
1347 | 	width: 1%;
1348 | 	height: 50px;
1349 | 	text-align: center;
1350 | 	vertical-align: middle;
1351 | 	white-space: nowrap;
1352 | 	text-overflow: ellipsis;
1353 | 	color: #929292
1354 | }
1355 | 
1356 | .mui-bar-tab .mui-tab-item.mui-active {
1357 | 	color: #007aff
1358 | }
1359 | 
1360 | .mui-bar-tab .mui-tab-item .mui-icon {
1361 | 	top: 3px;
1362 | 	width: 24px;
1363 | 	height: 24px;
1364 | 	padding-top: 0;
1365 | 	padding-bottom: 0
1366 | }
1367 | 
1368 | .mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label {
1369 | 	font-size: 11px;
1370 | 	display: block;
1371 | 	overflow: hidden;
1372 | 	text-overflow: ellipsis
1373 | }
1374 | 
1375 | .mui-bar-tab .mui-tab-item .mui-icon:active {
1376 | 	background: 0 0
1377 | }
1378 | 
1379 | .mui-focusin>.mui-bar-header-secondary,
1380 | .mui-focusin>.mui-bar-nav {
1381 | 	position: absolute
1382 | }
1383 | 
1384 | .mui-focusin>.mui-bar~.mui-content {
1385 | 	padding-bottom: 0
1386 | }
1387 | 
1388 | .mui-bar .mui-btn {
1389 | 	font-weight: 400;
1390 | 	position: relative;
1391 | 	z-index: 20;
1392 | 	top: 7px;
1393 | 	margin-top: 0;
1394 | 	padding: 6px 12px 7px
1395 | }
1396 | 
1397 | .mui-bar .mui-btn.mui-pull-right {
1398 | 	margin-left: 10px
1399 | }
1400 | 
1401 | .mui-bar .mui-btn.mui-pull-left {
1402 | 	margin-right: 10px
1403 | }
1404 | 
1405 | .mui-bar .mui-btn-link {
1406 | 	font-size: 16px;
1407 | 	line-height: 44px;
1408 | 	top: 0;
1409 | 	padding: 0;
1410 | 	color: #007aff;
1411 | 	border: 0
1412 | }
1413 | 
1414 | .mui-bar .mui-btn-link.mui-active,
1415 | .mui-bar .mui-btn-link:active {
1416 | 	color: #0062cc
1417 | }
1418 | 
1419 | .mui-bar .mui-btn-block {
1420 | 	font-size: 16px;
1421 | 	top: 6px;
1422 | 	margin-bottom: 0;
1423 | 	padding: 5px 0
1424 | }
1425 | 
1426 | .mui-bar .mui-btn-nav.mui-pull-left {
1427 | 	margin-left: -5px
1428 | }
1429 | 
1430 | .mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav {
1431 | 	margin-right: -3px
1432 | }
1433 | 
1434 | .mui-bar .mui-btn-nav.mui-pull-right {
1435 | 	margin-right: -5px
1436 | }
1437 | 
1438 | .mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav {
1439 | 	margin-left: -3px
1440 | }
1441 | 
1442 | .mui-bar .mui-btn-nav:active {
1443 | 	opacity: .3
1444 | }
1445 | 
1446 | .mui-bar .mui-icon {
1447 | 	font-size: 24px;
1448 | 	position: relative;
1449 | 	z-index: 20;
1450 | 	padding-top: 10px;
1451 | 	padding-bottom: 10px
1452 | }
1453 | 
1454 | .mui-bar .mui-icon:active {
1455 | 	opacity: .3
1456 | }
1457 | 
1458 | .mui-bar .mui-btn .mui-icon {
1459 | 	top: 1px;
1460 | 	margin: 0;
1461 | 	padding: 0
1462 | }
1463 | 
1464 | .mui-bar .mui-title .mui-icon {
1465 | 	margin: 0;
1466 | 	padding: 0
1467 | }
1468 | 
1469 | .mui-bar .mui-title .mui-icon.mui-icon-caret {
1470 | 	top: 4px;
1471 | 	margin-left: -5px
1472 | }
1473 | 
1474 | .mui-bar input[type=search] {
1475 | 	height: 29px;
1476 | 	margin: 6px 0
1477 | }
1478 | 
1479 | .mui-bar .mui-input-row .mui-btn {
1480 | 	padding: 12px 10px
1481 | }
1482 | 
1483 | .mui-bar .mui-search:before {
1484 | 	margin-top: -10px
1485 | }
1486 | 
1487 | .mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear,
1488 | .mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech {
1489 | 	top: 0;
1490 | 	right: 12px
1491 | }
1492 | 
1493 | .mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear~.mui-icon-clear,
1494 | .mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech~.mui-icon-speech {
1495 | 	top: 0;
1496 | 	right: 0
1497 | }
1498 | 
1499 | .mui-bar .mui-segmented-control {
1500 | 	top: 7px;
1501 | 	width: auto;
1502 | 	margin: 0 auto
1503 | }
1504 | 
1505 | .mui-bar.mui-bar-header-secondary .mui-segmented-control {
1506 | 	top: 0
1507 | }
1508 | 
1509 | .mui-badge {
1510 | 	font-size: 12px;
1511 | 	line-height: 1;
1512 | 	display: inline-block;
1513 | 	padding: 3px 6px;
1514 | 	color: #333;
1515 | 	border-radius: 100px;
1516 | 	background-color: rgba(0, 0, 0, .15)
1517 | }
1518 | 
1519 | .mui-badge.mui-badge-inverted {
1520 | 	padding: 0 5px 0 0;
1521 | 	color: #929292;
1522 | 	background-color: transparent
1523 | }
1524 | 
1525 | .mui-badge-blue,
1526 | .mui-badge-primary {
1527 | 	color: #fff;
1528 | 	background-color: #007aff
1529 | }
1530 | 
1531 | .mui-badge-blue.mui-badge-inverted,
1532 | .mui-badge-primary.mui-badge-inverted {
1533 | 	color: #007aff;
1534 | 	background-color: transparent
1535 | }
1536 | 
1537 | .mui-badge-green,
1538 | .mui-badge-success {
1539 | 	color: #fff;
1540 | 	background-color: #4cd964
1541 | }
1542 | 
1543 | .mui-badge-green.mui-badge-inverted,
1544 | .mui-badge-success.mui-badge-inverted {
1545 | 	color: #4cd964;
1546 | 	background-color: transparent
1547 | }
1548 | 
1549 | .mui-badge-warning,
1550 | .mui-badge-yellow {
1551 | 	color: #fff;
1552 | 	background-color: #f0ad4e
1553 | }
1554 | 
1555 | .mui-badge-warning.mui-badge-inverted,
1556 | .mui-badge-yellow.mui-badge-inverted {
1557 | 	color: #f0ad4e;
1558 | 	background-color: transparent
1559 | }
1560 | 
1561 | .mui-badge-danger,
1562 | .mui-badge-red {
1563 | 	color: #fff;
1564 | 	background-color: #dd524d
1565 | }
1566 | 
1567 | .mui-badge-danger.mui-badge-inverted,
1568 | .mui-badge-red.mui-badge-inverted {
1569 | 	color: #dd524d;
1570 | 	background-color: transparent
1571 | }
1572 | 
1573 | .mui-badge-purple,
1574 | .mui-badge-royal {
1575 | 	color: #fff;
1576 | 	background-color: #8a6de9
1577 | }
1578 | 
1579 | .mui-badge-purple.mui-badge-inverted,
1580 | .mui-badge-royal.mui-badge-inverted {
1581 | 	color: #8a6de9;
1582 | 	background-color: transparent
1583 | }
1584 | 
1585 | .mui-icon .mui-badge {
1586 | 	font-size: 10px;
1587 | 	line-height: 1.4;
1588 | 	position: absolute;
1589 | 	top: -2px;
1590 | 	left: 100%;
1591 | 	margin-left: -10px;
1592 | 	padding: 1px 5px;
1593 | 	color: #fff;
1594 | 	background: red
1595 | }
1596 | 
1597 | .mui-card {
1598 | 	font-size: 14px;
1599 | 	position: relative;
1600 | 	overflow: hidden;
1601 | 	margin: 10px;
1602 | 	border-radius: 2px;
1603 | 	background-color: #fff;
1604 | 	background-clip: padding-box;
1605 | 	box-shadow: 0 1px 2px rgba(0, 0, 0, .3)
1606 | }
1607 | 
1608 | .mui-content>.mui-card:first-child {
1609 | 	margin-top: 15px
1610 | }
1611 | 
1612 | .mui-card .mui-input-group .mui-input-row:last-child:after,
1613 | .mui-card .mui-input-group .mui-input-row:last-child:before,
1614 | .mui-card .mui-input-group:after,
1615 | .mui-card .mui-input-group:before {
1616 | 	height: 0
1617 | }
1618 | 
1619 | .mui-card .mui-table-view {
1620 | 	margin-bottom: 0;
1621 | 	border-top: 0;
1622 | 	border-bottom: 0;
1623 | 	border-radius: 6px
1624 | }
1625 | 
1626 | .mui-card .mui-table-view .mui-table-view-cell:first-child,
1627 | .mui-card .mui-table-view .mui-table-view-divider:first-child {
1628 | 	top: 0;
1629 | 	border-top-left-radius: 6px;
1630 | 	border-top-right-radius: 6px
1631 | }
1632 | 
1633 | .mui-card .mui-table-view .mui-table-view-cell:last-child,
1634 | .mui-card .mui-table-view .mui-table-view-divider:last-child {
1635 | 	border-bottom-right-radius: 6px;
1636 | 	border-bottom-left-radius: 6px
1637 | }
1638 | 
1639 | .mui-card .mui-table-view:after,
1640 | .mui-card .mui-table-view:before,
1641 | .mui-card>.mui-table-view>.mui-table-view-cell:last-child:after,
1642 | .mui-card>.mui-table-view>.mui-table-view-cell:last-child:before {
1643 | 	height: 0
1644 | }
1645 | 
1646 | .mui-card-footer,
1647 | .mui-card-header {
1648 | 	position: relative;
1649 | 	display: -webkit-box;
1650 | 	display: -webkit-flex;
1651 | 	display: flex;
1652 | 	min-height: 44px;
1653 | 	padding: 10px 15px;
1654 | 	-webkit-box-pack: justify;
1655 | 	-webkit-justify-content: space-between;
1656 | 	justify-content: space-between;
1657 | 	-webkit-box-align: center;
1658 | 	-webkit-align-items: center;
1659 | 	align-items: center
1660 | }
1661 | 
1662 | .mui-card-footer .mui-card-link,
1663 | .mui-card-header .mui-card-link {
1664 | 	line-height: 44px;
1665 | 	position: relative;
1666 | 	display: -webkit-box;
1667 | 	display: -webkit-flex;
1668 | 	display: flex;
1669 | 	height: 44px;
1670 | 	margin-top: -10px;
1671 | 	margin-bottom: -10px;
1672 | 	-webkit-transition-duration: .3s;
1673 | 	transition-duration: .3s;
1674 | 	text-decoration: none;
1675 | 	-webkit-box-pack: start;
1676 | 	-webkit-justify-content: flex-start;
1677 | 	justify-content: flex-start;
1678 | 	-webkit-box-align: center;
1679 | 	-webkit-align-items: center;
1680 | 	align-items: center
1681 | }
1682 | 
1683 | .mui-card-footer:before,
1684 | .mui-card-header:after {
1685 | 	position: absolute;
1686 | 	top: 0;
1687 | 	right: 0;
1688 | 	left: 0;
1689 | 	height: 1px;
1690 | 	content: '';
1691 | 	-webkit-transform: scaleY(.5);
1692 | 	transform: scaleY(.5);
1693 | 	background-color: #c8c7cc
1694 | }
1695 | 
1696 | .mui-card-header {
1697 | 	font-size: 17px;
1698 | 	border-radius: 2px 2px 0 0
1699 | }
1700 | 
1701 | .mui-card-header:after {
1702 | 	top: auto;
1703 | 	bottom: 0
1704 | }
1705 | 
1706 | .mui-card-header>img:first-child {
1707 | 	font-size: 0;
1708 | 	line-height: 0;
1709 | 	float: left;
1710 | 	width: 34px;
1711 | 	height: 34px
1712 | }
1713 | 
1714 | .mui-card-footer {
1715 | 	color: #6d6d72;
1716 | 	border-radius: 0 0 2px 2px
1717 | }
1718 | 
1719 | .mui-card-content {
1720 | 	font-size: 14px;
1721 | 	position: relative
1722 | }
1723 | 
1724 | .mui-card-content-inner {
1725 | 	position: relative;
1726 | 	padding: 15px
1727 | }
1728 | 
1729 | .mui-card-media {
1730 | 	vertical-align: bottom;
1731 | 	color: #fff;
1732 | 	background-position: center;
1733 | 	background-size: cover
1734 | }
1735 | 
1736 | .mui-card-header.mui-card-media {
1737 | 	display: block;
1738 | 	padding: 10px
1739 | }
1740 | 
1741 | .mui-card-header.mui-card-media .mui-media-body {
1742 | 	font-size: 14px;
1743 | 	font-weight: 500;
1744 | 	line-height: 17px;
1745 | 	margin-bottom: 0;
1746 | 	margin-left: 44px;
1747 | 	color: #333
1748 | }
1749 | 
1750 | .mui-card-header.mui-card-media .mui-media-body p {
1751 | 	font-size: 13px;
1752 | 	margin-bottom: 0
1753 | }
1754 | 
1755 | .mui-table-view {
1756 | 	position: relative;
1757 | 	margin-top: 0;
1758 | 	margin-bottom: 0;
1759 | 	padding-left: 0;
1760 | 	list-style: none;
1761 | 	background-color: #fff
1762 | }
1763 | 
1764 | .mui-table-view:after {
1765 | 	position: absolute;
1766 | 	right: 0;
1767 | 	bottom: 0;
1768 | 	left: 0;
1769 | 	height: 1px;
1770 | 	content: '';
1771 | 	-webkit-transform: scaleY(.5);
1772 | 	transform: scaleY(.5);
1773 | 	background-color: #c8c7cc
1774 | }
1775 | 
1776 | .mui-table-view:before {
1777 | 	position: absolute;
1778 | 	right: 0;
1779 | 	left: 0;
1780 | 	height: 1px;
1781 | 	content: '';
1782 | 	-webkit-transform: scaleY(.5);
1783 | 	transform: scaleY(.5);
1784 | 	background-color: #c8c7cc;
1785 | 	top: -1px
1786 | }
1787 | 
1788 | .mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon {
1789 | 	font-size: 20px;
1790 | 	margin-top: -1px;
1791 | 	margin-right: 5px;
1792 | 	margin-left: -5px
1793 | }
1794 | 
1795 | .mui-table-view-icon .mui-table-view-cell:after {
1796 | 	left: 40px
1797 | }
1798 | 
1799 | .mui-table-view-chevron .mui-table-view-cell {
1800 | 	padding-right: 65px
1801 | }
1802 | 
1803 | .mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn) {
1804 | 	margin-right: -65px
1805 | }
1806 | 
1807 | .mui-table-view-radio .mui-table-view-cell {
1808 | 	padding-right: 65px
1809 | }
1810 | 
1811 | .mui-table-view-radio .mui-table-view-cell>a:not(.mui-btn) {
1812 | 	margin-right: -65px
1813 | }
1814 | 
1815 | .mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after {
1816 | 	font-size: 30px;
1817 | 	font-weight: 600;
1818 | 	right: 9px;
1819 | 	content: '';
1820 | 	color: #007aff
1821 | }
1822 | 
1823 | .mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after {
1824 | 	content: '\e472'
1825 | }
1826 | 
1827 | .mui-table-view-inverted {
1828 | 	color: #fff;
1829 | 	background: #333
1830 | }
1831 | 
1832 | .mui-table-view-inverted:after {
1833 | 	position: absolute;
1834 | 	right: 0;
1835 | 	bottom: 0;
1836 | 	left: 0;
1837 | 	height: 1px;
1838 | 	content: '';
1839 | 	-webkit-transform: scaleY(.5);
1840 | 	transform: scaleY(.5);
1841 | 	background-color: #222
1842 | }
1843 | 
1844 | .mui-table-view-inverted:before {
1845 | 	position: absolute;
1846 | 	top: 0;
1847 | 	right: 0;
1848 | 	left: 0;
1849 | 	height: 1px;
1850 | 	content: '';
1851 | 	-webkit-transform: scaleY(.5);
1852 | 	transform: scaleY(.5);
1853 | 	background-color: #222
1854 | }
1855 | 
1856 | .mui-table-view-inverted .mui-table-view-cell:after {
1857 | 	position: absolute;
1858 | 	right: 0;
1859 | 	bottom: 0;
1860 | 	left: 15px;
1861 | 	height: 1px;
1862 | 	content: '';
1863 | 	-webkit-transform: scaleY(.5);
1864 | 	transform: scaleY(.5);
1865 | 	background-color: #222
1866 | }
1867 | 
1868 | .mui-table-view-inverted .mui-table-view-cell.mui-active,
1869 | .mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active {
1870 | 	background-color: #242424
1871 | }
1872 | 
1873 | .mui-table-view-cell {
1874 | 	position: relative;
1875 | 	overflow: hidden;
1876 | 	padding: 11px 15px;
1877 | 	-webkit-touch-callout: none
1878 | }
1879 | 
1880 | .mui-table-view-cell:after {
1881 | 	position: absolute;
1882 | 	right: 0;
1883 | 	bottom: 0;
1884 | 	left: 15px;
1885 | 	height: 1px;
1886 | 	content: '';
1887 | 	-webkit-transform: scaleY(.5);
1888 | 	transform: scaleY(.5);
1889 | 	background-color: #c8c7cc
1890 | }
1891 | 
1892 | .mui-table-view-cell.mui-checkbox input[type=checkbox],
1893 | .mui-table-view-cell.mui-radio input[type=radio] {
1894 | 	top: 8px
1895 | }
1896 | 
1897 | .mui-table-view-cell.mui-checkbox.mui-left,
1898 | .mui-table-view-cell.mui-radio.mui-left {
1899 | 	padding-left: 58px
1900 | }
1901 | 
1902 | .mui-table-view-cell.mui-active {
1903 | 	background-color: #eee
1904 | }
1905 | 
1906 | .mui-table-view-cell:last-child:after,
1907 | .mui-table-view-cell:last-child:before {
1908 | 	height: 0
1909 | }
1910 | 
1911 | .mui-table-view-cell>a:not(.mui-btn) {
1912 | 	position: relative;
1913 | 	display: block;
1914 | 	overflow: hidden;
1915 | 	margin: -11px -15px;
1916 | 	padding: inherit;
1917 | 	white-space: nowrap;
1918 | 	text-overflow: ellipsis;
1919 | 	color: inherit
1920 | }
1921 | 
1922 | .mui-table-view-cell>a:not(.mui-btn).mui-active {
1923 | 	background-color: #eee
1924 | }
1925 | 
1926 | .mui-table-view-cell p {
1927 | 	margin-bottom: 0
1928 | }
1929 | 
1930 | .mui-table-view-cell.mui-transitioning>.mui-slider-handle,
1931 | .mui-table-view-cell.mui-transitioning>.mui-slider-left .mui-btn,
1932 | .mui-table-view-cell.mui-transitioning>.mui-slider-right .mui-btn {
1933 | 	-webkit-transition: -webkit-transform 300ms ease;
1934 | 	transition: transform 300ms ease
1935 | }
1936 | 
1937 | .mui-table-view-cell.mui-active>.mui-slider-handle {
1938 | 	background-color: #eee
1939 | }
1940 | 
1941 | .mui-table-view-cell>.mui-slider-handle {
1942 | 	position: relative;
1943 | 	background-color: #fff
1944 | }
1945 | 
1946 | .mui-table-view-cell>.mui-slider-handle .mui-navigate-right:after,
1947 | .mui-table-view-cell>.mui-slider-handle.mui-navigate-right:after {
1948 | 	right: 0
1949 | }
1950 | 
1951 | .mui-table-view-cell>.mui-slider-handle,
1952 | .mui-table-view-cell>.mui-slider-left .mui-btn,
1953 | .mui-table-view-cell>.mui-slider-right .mui-btn {
1954 | 	-webkit-transition: -webkit-transform 0ms ease;
1955 | 	transition: transform 0ms ease
1956 | }
1957 | 
1958 | .mui-table-view-cell>.mui-slider-left,
1959 | .mui-table-view-cell>.mui-slider-right {
1960 | 	position: absolute;
1961 | 	top: 0;
1962 | 	display: -webkit-box;
1963 | 	display: -webkit-flex;
1964 | 	display: flex;
1965 | 	height: 100%
1966 | }
1967 | 
1968 | .mui-table-view-cell>.mui-slider-left>.mui-btn,
1969 | .mui-table-view-cell>.mui-slider-right>.mui-btn {
1970 | 	position: relative;
1971 | 	left: 0;
1972 | 	display: -webkit-box;
1973 | 	display: -webkit-flex;
1974 | 	display: flex;
1975 | 	padding: 0 30px;
1976 | 	color: #fff;
1977 | 	border: 0;
1978 | 	border-radius: 0;
1979 | 	-webkit-box-align: center;
1980 | 	-webkit-align-items: center;
1981 | 	align-items: center
1982 | }
1983 | 
1984 | .mui-table-view-cell>.mui-slider-left>.mui-btn:after,
1985 | .mui-table-view-cell>.mui-slider-right>.mui-btn:after {
1986 | 	position: absolute;
1987 | 	z-index: -1;
1988 | 	top: 0;
1989 | 	width: 600%;
1990 | 	height: 100%;
1991 | 	content: '';
1992 | 	background: inherit
1993 | }
1994 | 
1995 | .mui-table-view-cell>.mui-slider-left>.mui-btn.mui-icon,
1996 | .mui-table-view-cell>.mui-slider-right>.mui-btn.mui-icon {
1997 | 	font-size: 30px
1998 | }
1999 | 
2000 | .mui-table-view-cell>.mui-slider-right {
2001 | 	right: 0;
2002 | 	-webkit-transition: -webkit-transform 0ms ease;
2003 | 	transition: transform 0ms ease;
2004 | 	-webkit-transform: translateX(100%);
2005 | 	transform: translateX(100%)
2006 | }
2007 | 
2008 | .mui-table-view-cell>.mui-slider-left {
2009 | 	left: 0;
2010 | 	-webkit-transition: -webkit-transform 0ms ease;
2011 | 	transition: transform 0ms ease;
2012 | 	-webkit-transform: translateX(-100%);
2013 | 	transform: translateX(-100%)
2014 | }
2015 | 
2016 | .mui-table-view-cell>.mui-slider-left>.mui-btn:after {
2017 | 	right: 100%;
2018 | 	margin-right: -1px
2019 | }
2020 | 
2021 | .mui-table-view-divider {
2022 | 	font-weight: 500;
2023 | 	position: relative;
2024 | 	margin-top: -1px;
2025 | 	margin-left: 0;
2026 | 	padding-top: 6px;
2027 | 	padding-bottom: 6px;
2028 | 	padding-left: 15px;
2029 | 	color: #999;
2030 | 	background-color: #fafafa
2031 | }
2032 | 
2033 | .mui-table-view-divider:after {
2034 | 	position: absolute;
2035 | 	right: 0;
2036 | 	bottom: 0;
2037 | 	left: 0;
2038 | 	height: 1px;
2039 | 	content: '';
2040 | 	-webkit-transform: scaleY(.5);
2041 | 	transform: scaleY(.5);
2042 | 	background-color: #c8c7cc
2043 | }
2044 | 
2045 | .mui-table-view-divider:before {
2046 | 	position: absolute;
2047 | 	top: 0;
2048 | 	right: 0;
2049 | 	left: 0;
2050 | 	height: 1px;
2051 | 	content: '';
2052 | 	-webkit-transform: scaleY(.5);
2053 | 	transform: scaleY(.5);
2054 | 	background-color: #c8c7cc
2055 | }
2056 | 
2057 | .mui-table-view .mui-media,
2058 | .mui-table-view .mui-media-body {
2059 | 	overflow: hidden
2060 | }
2061 | 
2062 | .mui-table-view .mui-media-large .mui-media-object {
2063 | 	line-height: 80px;
2064 | 	max-width: 80px;
2065 | 	height: 80px
2066 | }
2067 | 
2068 | .mui-table-view .mui-media .mui-subtitle {
2069 | 	color: #000
2070 | }
2071 | 
2072 | .mui-table-view .mui-media-object {
2073 | 	line-height: 42px;
2074 | 	max-width: 42px;
2075 | 	height: 42px
2076 | }
2077 | 
2078 | .mui-table-view .mui-media-object.mui-pull-left {
2079 | 	margin-right: 10px
2080 | }
2081 | 
2082 | .mui-table-view .mui-media-object.mui-pull-right {
2083 | 	margin-left: 10px
2084 | }
2085 | 
2086 | .mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object {
2087 | 	line-height: 29px;
2088 | 	max-width: 29px;
2089 | 	height: 29px;
2090 | 	margin: -4px 0
2091 | }
2092 | 
2093 | .mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object img {
2094 | 	line-height: 29px;
2095 | 	max-width: 29px;
2096 | 	height: 29px
2097 | }
2098 | 
2099 | .mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object.mui-pull-left {
2100 | 	margin-right: 10px
2101 | }
2102 | 
2103 | .mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object .mui-icon {
2104 | 	font-size: 29px
2105 | }
2106 | 
2107 | .mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-body:after {
2108 | 	position: absolute;
2109 | 	right: 0;
2110 | 	bottom: 0;
2111 | 	left: 55px;
2112 | 	height: 1px;
2113 | 	content: '';
2114 | 	-webkit-transform: scaleY(.5);
2115 | 	transform: scaleY(.5);
2116 | 	background-color: #c8c7cc
2117 | }
2118 | 
2119 | .mui-table-view .mui-table-view-cell.mui-media-icon:after {
2120 | 	height: 0!important
2121 | }
2122 | 
2123 | .mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view {
2124 | 	display: block
2125 | }
2126 | 
2127 | .mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:after,
2128 | .mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:before {
2129 | 	height: 0!important
2130 | }
2131 | 
2132 | .mui-table-view.mui-unfold .mui-table-view-cell.mui-media-icon.mui-collapse .mui-media-body:after {
2133 | 	position: absolute;
2134 | 	right: 0;
2135 | 	bottom: 0;
2136 | 	left: 70px;
2137 | 	height: 1px;
2138 | 	content: '';
2139 | 	-webkit-transform: scaleY(.5);
2140 | 	transform: scaleY(.5);
2141 | 	background-color: #c8c7cc
2142 | }
2143 | 
2144 | .mui-table-view-cell>.mui-badge,
2145 | .mui-table-view-cell>.mui-btn,
2146 | .mui-table-view-cell>.mui-switch,
2147 | .mui-table-view-cell>a>.mui-badge,
2148 | .mui-table-view-cell>a>.mui-btn,
2149 | .mui-table-view-cell>a>.mui-switch {
2150 | 	position: absolute;
2151 | 	top: 50%;
2152 | 	right: 15px;
2153 | 	-webkit-transform: translateY(-50%);
2154 | 	transform: translateY(-50%)
2155 | }
2156 | 
2157 | .mui-table-view-cell .mui-navigate-right>.mui-badge,
2158 | .mui-table-view-cell .mui-navigate-right>.mui-btn,
2159 | .mui-table-view-cell .mui-navigate-right>.mui-switch,
2160 | .mui-table-view-cell .mui-push-left>.mui-badge,
2161 | .mui-table-view-cell .mui-push-left>.mui-btn,
2162 | .mui-table-view-cell .mui-push-left>.mui-switch,
2163 | .mui-table-view-cell .mui-push-right>.mui-badge,
2164 | .mui-table-view-cell .mui-push-right>.mui-btn,
2165 | .mui-table-view-cell .mui-push-right>.mui-switch,
2166 | .mui-table-view-cell>a .mui-navigate-right>.mui-badge,
2167 | .mui-table-view-cell>a .mui-navigate-right>.mui-btn,
2168 | .mui-table-view-cell>a .mui-navigate-right>.mui-switch,
2169 | .mui-table-view-cell>a .mui-push-left>.mui-badge,
2170 | .mui-table-view-cell>a .mui-push-left>.mui-btn,
2171 | .mui-table-view-cell>a .mui-push-left>.mui-switch,
2172 | .mui-table-view-cell>a .mui-push-right>.mui-badge,
2173 | .mui-table-view-cell>a .mui-push-right>.mui-btn,
2174 | .mui-table-view-cell>a .mui-push-right>.mui-switch {
2175 | 	right: 35px
2176 | }
2177 | 
2178 | .mui-content>.mui-table-view:first-child {
2179 | 	margin-top: 15px
2180 | }
2181 | 
2182 | .mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:last-child:after,
2183 | .mui-table-view-cell.mui-collapse .mui-table-view:after,
2184 | .mui-table-view-cell.mui-collapse .mui-table-view:before {
2185 | 	height: 0
2186 | }
2187 | 
2188 | .mui-table-view-cell.mui-collapse>.mui-navigate-right:after,
2189 | .mui-table-view-cell.mui-collapse>.mui-push-right:after {
2190 | 	content: '\e581'
2191 | }
2192 | 
2193 | .mui-table-view-cell.mui-collapse.mui-active {
2194 | 	margin-top: -1px
2195 | }
2196 | 
2197 | .mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content,
2198 | .mui-table-view-cell.mui-collapse.mui-active .mui-table-view {
2199 | 	display: block
2200 | }
2201 | 
2202 | .mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,
2203 | .mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after {
2204 | 	content: '\e580'
2205 | }
2206 | 
2207 | .mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell>a:not(.mui-btn).mui-active {
2208 | 	margin-left: -31px;
2209 | 	padding-left: 47px
2210 | }
2211 | 
2212 | .mui-table-view-cell.mui-collapse .mui-collapse-content {
2213 | 	position: relative;
2214 | 	display: none;
2215 | 	overflow: hidden;
2216 | 	margin: 11px -15px -11px;
2217 | 	padding: 8px 15px;
2218 | 	-webkit-transition: height .35s ease;
2219 | 	-o-transition: height .35s ease;
2220 | 	transition: height .35s ease;
2221 | 	background: #fff
2222 | }
2223 | 
2224 | .mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-input-group,
2225 | .mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider {
2226 | 	width: auto;
2227 | 	height: auto;
2228 | 	margin: -8px -15px
2229 | }
2230 | 
2231 | .mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider {
2232 | 	margin: -8px -16px
2233 | }
2234 | 
2235 | .mui-table-view-cell.mui-collapse .mui-table-view {
2236 | 	display: none;
2237 | 	margin-top: 11px;
2238 | 	margin-right: -15px;
2239 | 	margin-bottom: -11px;
2240 | 	margin-left: -15px;
2241 | 	border: 0
2242 | }
2243 | 
2244 | .mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron {
2245 | 	margin-right: -65px
2246 | }
2247 | 
2248 | .mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
2249 | 	padding-left: 31px;
2250 | 	background-position: 31px 100%
2251 | }
2252 | 
2253 | .mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after {
2254 | 	position: absolute;
2255 | 	right: 0;
2256 | 	bottom: 0;
2257 | 	left: 30px;
2258 | 	height: 1px;
2259 | 	content: '';
2260 | 	-webkit-transform: scaleY(.5);
2261 | 	transform: scaleY(.5);
2262 | 	background-color: #c8c7cc
2263 | }
2264 | 
2265 | .mui-table-view.mui-grid-view {
2266 | 	font-size: 0;
2267 | 	display: block;
2268 | 	width: 100%;
2269 | 	padding: 0 10px 10px 0;
2270 | 	white-space: normal
2271 | }
2272 | 
2273 | .mui-table-view.mui-grid-view .mui-table-view-cell {
2274 | 	font-size: 17px;
2275 | 	display: inline-block;
2276 | 	margin-right: -4px;
2277 | 	padding: 10px 0 0 14px;
2278 | 	text-align: center;
2279 | 	vertical-align: middle;
2280 | 	background: 0 0
2281 | }
2282 | 
2283 | .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
2284 | 	width: 100%;
2285 | 	max-width: 100%;
2286 | 	height: auto
2287 | }
2288 | 
2289 | .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {
2290 | 	margin: -10px 0 0 -14px
2291 | }
2292 | 
2293 | .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn).mui-active,
2294 | .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn):active {
2295 | 	background: 0 0
2296 | }
2297 | 
2298 | .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
2299 | 	font-size: 15px;
2300 | 	line-height: 15px;
2301 | 	display: block;
2302 | 	width: 100%;
2303 | 	height: 15px;
2304 | 	margin-top: 8px;
2305 | 	text-overflow: ellipsis;
2306 | 	color: #333
2307 | }
2308 | 
2309 | .mui-table-view.mui-grid-view .mui-table-view-cell:after,
2310 | .mui-table-view.mui-grid-view .mui-table-view-cell:before {
2311 | 	height: 0
2312 | }
2313 | 
2314 | .mui-grid-view.mui-grid-9 {
2315 | 	margin: 0;
2316 | 	padding: 0;
2317 | 	border-top: 1px solid #eee;
2318 | 	border-left: 1px solid #eee;
2319 | 	background-color: #f2f2f2
2320 | }
2321 | 
2322 | .mui-grid-view.mui-grid-9:after,
2323 | .mui-grid-view.mui-grid-9:before {
2324 | 	display: table;
2325 | 	content: ' '
2326 | }
2327 | 
2328 | .mui-grid-view.mui-grid-9:after {
2329 | 	clear: both;
2330 | 	position: static
2331 | }
2332 | 
2333 | .mui-grid-view.mui-grid-9 .mui-table-view-cell {
2334 | 	margin: 0;
2335 | 	padding: 11px 15px;
2336 | 	vertical-align: top;
2337 | 	border-right: 1px solid #eee;
2338 | 	border-bottom: 1px solid #eee
2339 | }
2340 | 
2341 | .mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active {
2342 | 	background-color: #eee
2343 | }
2344 | 
2345 | .mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
2346 | 	margin: 0;
2347 | 	padding: 10px 0
2348 | }
2349 | 
2350 | .mui-grid-view.mui-grid-9:before {
2351 | 	height: 0
2352 | }
2353 | 
2354 | .mui-grid-view.mui-grid-9 .mui-media {
2355 | 	color: #797979
2356 | }
2357 | 
2358 | .mui-grid-view.mui-grid-9 .mui-media .mui-icon {
2359 | 	font-size: 2.4em;
2360 | 	position: relative
2361 | }
2362 | 
2363 | .mui-slider-cell {
2364 | 	position: relative
2365 | }
2366 | 
2367 | .mui-slider-cell>.mui-slider-handle {
2368 | 	z-index: 1
2369 | }
2370 | 
2371 | .mui-slider-cell>.mui-slider-left,
2372 | .mui-slider-cell>.mui-slider-right {
2373 | 	position: absolute;
2374 | 	z-index: 0;
2375 | 	top: 0;
2376 | 	bottom: 0
2377 | }
2378 | 
2379 | .mui-slider-cell>.mui-slider-left {
2380 | 	left: 0
2381 | }
2382 | 
2383 | .mui-slider-cell>.mui-slider-right {
2384 | 	right: 0
2385 | }
2386 | 
2387 | input,
2388 | select,
2389 | textarea {
2390 | 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
2391 | 	font-size: 17px;
2392 | 	-webkit-tap-highlight-color: transparent;
2393 | 	-webkit-tap-highlight-color: transparent
2394 | }
2395 | 
2396 | input:focus,
2397 | select:focus,
2398 | textarea:focus {
2399 | 	-webkit-tap-highlight-color: transparent;
2400 | 	-webkit-tap-highlight-color: transparent;
2401 | 	-webkit-user-modify: read-write-plaintext-only
2402 | }
2403 | 
2404 | input[type=color],
2405 | input[type=date],
2406 | input[type=datetime-local],
2407 | input[type=datetime],
2408 | input[type=email],
2409 | input[type=month],
2410 | input[type=number],
2411 | input[type=password],
2412 | input[type=search],
2413 | input[type=tel],
2414 | input[type=text],
2415 | input[type=time],
2416 | input[type=url],
2417 | input[type=week],
2418 | select,
2419 | textarea {
2420 | 	line-height: 21px;
2421 | 	width: 100%;
2422 | 	height: 40px;
2423 | 	margin-bottom: 15px;
2424 | 	padding: 10px 15px;
2425 | 	-webkit-user-select: text;
2426 | 	border: 1px solid rgba(0, 0, 0, .2);
2427 | 	border-radius: 3px;
2428 | 	outline: 0;
2429 | 	background-color: #fff;
2430 | 	-webkit-appearance: none
2431 | }
2432 | 
2433 | input[type=number]::-webkit-inner-spin-button,
2434 | input[type=number]::-webkit-outer-spin-button {
2435 | 	margin: 0;
2436 | 	-webkit-appearance: none
2437 | }
2438 | 
2439 | input[type=search] {
2440 | 	font-size: 16px;
2441 | 	-webkit-box-sizing: border-box;
2442 | 	box-sizing: border-box;
2443 | 	height: 34px;
2444 | 	text-align: center;
2445 | 	border: 0;
2446 | 	border-radius: 6px;
2447 | 	background-color: rgba(0, 0, 0, .1)
2448 | }
2449 | 
2450 | input[type=search]:focus {
2451 | 	text-align: left
2452 | }
2453 | 
2454 | textarea {
2455 | 	height: auto;
2456 | 	resize: none
2457 | }
2458 | 
2459 | select {
2460 | 	font-size: 14px;
2461 | 	height: auto;
2462 | 	margin-top: 1px;
2463 | 	border: 0!important;
2464 | 	background-color: #fff
2465 | }
2466 | 
2467 | select:focus {
2468 | 	-webkit-user-modify: read-only
2469 | }
2470 | 
2471 | .mui-input-group {
2472 | 	position: relative;
2473 | 	padding: 0;
2474 | 	border: 0;
2475 | 	background-color: #fff
2476 | }
2477 | 
2478 | .mui-input-group:after {
2479 | 	position: absolute;
2480 | 	right: 0;
2481 | 	bottom: 0;
2482 | 	left: 0;
2483 | 	height: 1px;
2484 | 	content: '';
2485 | 	-webkit-transform: scaleY(.5);
2486 | 	transform: scaleY(.5);
2487 | 	background-color: #c8c7cc
2488 | }
2489 | 
2490 | .mui-input-group:before {
2491 | 	position: absolute;
2492 | 	top: 0;
2493 | 	right: 0;
2494 | 	left: 0;
2495 | 	height: 1px;
2496 | 	content: '';
2497 | 	-webkit-transform: scaleY(.5);
2498 | 	transform: scaleY(.5);
2499 | 	background-color: #c8c7cc
2500 | }
2501 | 
2502 | .mui-input-group input,
2503 | .mui-input-group textarea {
2504 | 	margin-bottom: 0;
2505 | 	border: 0;
2506 | 	border-radius: 0;
2507 | 	background-color: transparent;
2508 | 	-webkit-box-shadow: none;
2509 | 	box-shadow: none
2510 | }
2511 | 
2512 | .mui-input-group input[type=search] {
2513 | 	background: 0 0
2514 | }
2515 | 
2516 | .mui-input-group input:last-child {
2517 | 	background-image: none
2518 | }
2519 | 
2520 | .mui-input-row {
2521 | 	clear: left;
2522 | 	overflow: hidden
2523 | }
2524 | 
2525 | .mui-input-row select {
2526 | 	font-size: 17px;
2527 | 	height: 37px;
2528 | 	padding: 0
2529 | }
2530 | 
2531 | .mui-input-row .mui-btn+input,
2532 | .mui-input-row label+input,
2533 | .mui-input-row:last-child {
2534 | 	background: 0 0
2535 | }
2536 | 
2537 | .mui-input-group .mui-input-row {
2538 | 	height: 40px
2539 | }
2540 | 
2541 | .mui-input-group .mui-input-row:after {
2542 | 	position: absolute;
2543 | 	right: 0;
2544 | 	bottom: 0;
2545 | 	left: 15px;
2546 | 	height: 1px;
2547 | 	content: '';
2548 | 	-webkit-transform: scaleY(.5);
2549 | 	transform: scaleY(.5);
2550 | 	background-color: #c8c7cc
2551 | }
2552 | 
2553 | .mui-input-row label {
2554 | 	font-family: 'Helvetica Neue', Helvetica, sans-serif;
2555 | 	line-height: 1.1;
2556 | 	float: left;
2557 | 	width: 35%;
2558 | 	padding: 11px 15px
2559 | }
2560 | 
2561 | .mui-input-row label~input,
2562 | .mui-input-row label~select,
2563 | .mui-input-row label~textarea {
2564 | 	float: right;
2565 | 	width: 65%;
2566 | 	margin-bottom: 0;
2567 | 	padding-left: 0;
2568 | 	border: 0
2569 | }
2570 | 
2571 | .mui-input-row .mui-btn {
2572 | 	line-height: 1.1;
2573 | 	float: right;
2574 | 	width: 15%;
2575 | 	padding: 10px 15px
2576 | }
2577 | 
2578 | .mui-input-row .mui-btn~input,
2579 | .mui-input-row .mui-btn~select,
2580 | .mui-input-row .mui-btn~textarea {
2581 | 	float: left;
2582 | 	width: 85%;
2583 | 	margin-bottom: 0;
2584 | 	padding-left: 0;
2585 | 	border: 0
2586 | }
2587 | 
2588 | .mui-button-row {
2589 | 	position: relative;
2590 | 	padding-top: 5px;
2591 | 	text-align: center
2592 | }
2593 | 
2594 | .mui-input-group .mui-button-row {
2595 | 	height: 45px
2596 | }
2597 | 
2598 | .mui-input-row {
2599 | 	position: relative
2600 | }
2601 | 
2602 | .mui-input-row.mui-input-range {
2603 | 	overflow: visible;
2604 | 	padding-right: 20px
2605 | }
2606 | 
2607 | .mui-input-row .mui-inline {
2608 | 	padding: 8px 0
2609 | }
2610 | 
2611 | .mui-input-row .mui-input-clear~.mui-icon-clear,
2612 | .mui-input-row .mui-input-password~.mui-icon-eye,
2613 | .mui-input-row .mui-input-speech~.mui-icon-speech {
2614 | 	font-size: 20px;
2615 | 	position: absolute;
2616 | 	z-index: 1;
2617 | 	top: 10px;
2618 | 	right: 0;
2619 | 	width: 38px;
2620 | 	height: 38px;
2621 | 	text-align: center;
2622 | 	color: #999
2623 | }
2624 | 
2625 | .mui-input-row .mui-input-clear~.mui-icon-clear.mui-active,
2626 | .mui-input-row .mui-input-password~.mui-icon-eye.mui-active,
2627 | .mui-input-row .mui-input-speech~.mui-icon-speech.mui-active {
2628 | 	color: #007aff
2629 | }
2630 | 
2631 | .mui-input-row .mui-input-speech~.mui-icon-speech {
2632 | 	font-size: 24px;
2633 | 	top: 8px
2634 | }
2635 | 
2636 | .mui-input-row .mui-input-clear~.mui-icon-clear~.mui-icon-speech {
2637 | 	display: none
2638 | }
2639 | 
2640 | .mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech {
2641 | 	display: inline-block
2642 | }
2643 | 
2644 | .mui-input-row .mui-icon-speech~.mui-placeholder {
2645 | 	right: 38px
2646 | }
2647 | 
2648 | .mui-input-row.mui-search .mui-icon-clear {
2649 | 	top: 7px
2650 | }
2651 | 
2652 | .mui-input-row.mui-search .mui-icon-speech {
2653 | 	top: 5px
2654 | }
2655 | 
2656 | .mui-checkbox,
2657 | .mui-radio {
2658 | 	position: relative
2659 | }
2660 | 
2661 | .mui-checkbox label,
2662 | .mui-radio label {
2663 | 	display: inline-block;
2664 | 	float: none;
2665 | 	width: 100%;
2666 | 	padding-right: 58px
2667 | }
2668 | 
2669 | .mui-checkbox.mui-left input[type=checkbox],
2670 | .mui-radio.mui-left input[type=radio] {
2671 | 	left: 20px
2672 | }
2673 | 
2674 | .mui-checkbox.mui-left label,
2675 | .mui-radio.mui-left label {
2676 | 	padding-right: 15px;
2677 | 	padding-left: 58px
2678 | }
2679 | 
2680 | .mui-checkbox input[type=checkbox],
2681 | .mui-radio input[type=radio] {
2682 | 	position: absolute;
2683 | 	top: 4px;
2684 | 	right: 20px;
2685 | 	display: inline-block;
2686 | 	width: 28px;
2687 | 	height: 26px;
2688 | 	border: 0;
2689 | 	outline: 0!important;
2690 | 	background-color: transparent;
2691 | 	-webkit-appearance: none
2692 | }
2693 | 
2694 | .mui-checkbox input[type=checkbox][disabled]:before,
2695 | .mui-radio input[type=radio][disabled]:before {
2696 | 	opacity: .3
2697 | }
2698 | 
2699 | .mui-checkbox input[type=checkbox]:before,
2700 | .mui-radio input[type=radio]:before {
2701 | 	font-family: Muiicons;
2702 | 	font-size: 28px;
2703 | 	font-weight: 400;
2704 | 	line-height: 1;
2705 | 	text-decoration: none;
2706 | 	color: #aaa;
2707 | 	border-radius: 0;
2708 | 	background: 0 0;
2709 | 	-webkit-font-smoothing: antialiased
2710 | }
2711 | 
2712 | .mui-checkbox input[type=checkbox]:checked:before,
2713 | .mui-radio input[type=radio]:checked:before {
2714 | 	color: #007aff
2715 | }
2716 | 
2717 | .mui-checkbox label.mui-disabled,
2718 | .mui-checkbox.mui-disabled label,
2719 | .mui-radio label.mui-disabled,
2720 | .mui-radio.mui-disabled label {
2721 | 	opacity: .4
2722 | }
2723 | 
2724 | .mui-radio input[type=radio]:before {
2725 | 	content: '\e411'
2726 | }
2727 | 
2728 | .mui-radio input[type=radio]:checked:before {
2729 | 	content: '\e441'
2730 | }
2731 | 
2732 | .mui-checkbox input[type=checkbox]:before {
2733 | 	content: '\e411'
2734 | }
2735 | 
2736 | .mui-checkbox input[type=checkbox]:checked:before {
2737 | 	content: '\e442'
2738 | }
2739 | 
2740 | .mui-select {
2741 | 	position: relative
2742 | }
2743 | 
2744 | .mui-select:before {
2745 | 	font-family: Muiicons;
2746 | 	position: absolute;
2747 | 	top: 8px;
2748 | 	right: 21px;
2749 | 	content: '\e581';
2750 | 	color: rgba(170, 170, 170, .6)
2751 | }
2752 | 
2753 | .mui-input-row .mui-switch {
2754 | 	float: right;
2755 | 	margin-top: 5px;
2756 | 	margin-right: 20px
2757 | }
2758 | 
2759 | .mui-input-range input[type=range] {
2760 | 	position: relative;
2761 | 	width: 100%;
2762 | 	height: 2px;
2763 | 	margin: 17px 0;
2764 | 	padding: 0;
2765 | 	cursor: pointer;
2766 | 	border: 0;
2767 | 	border-radius: 3px;
2768 | 	outline: 0;
2769 | 	background-color: #999;
2770 | 	-webkit-appearance: none!important
2771 | }
2772 | 
2773 | .mui-input-range input[type=range]::-webkit-slider-thumb {
2774 | 	width: 28px;
2775 | 	height: 28px;
2776 | 	border-color: #0062cc;
2777 | 	border-radius: 50%;
2778 | 	background-color: #007aff;
2779 | 	background-clip: padding-box;
2780 | 	-webkit-appearance: none!important
2781 | }
2782 | 
2783 | .mui-input-range label~input[type=range] {
2784 | 	width: 65%
2785 | }
2786 | 
2787 | .mui-input-range .mui-tooltip {
2788 | 	font-size: 36px;
2789 | 	line-height: 64px;
2790 | 	position: absolute;
2791 | 	z-index: 1;
2792 | 	top: -70px;
2793 | 	width: 64px;
2794 | 	height: 64px;
2795 | 	text-align: center;
2796 | 	opacity: .8;
2797 | 	color: #333;
2798 | 	border: 1px solid #ddd;
2799 | 	border-radius: 6px;
2800 | 	background-color: #fff;
2801 | 	text-shadow: 0 1px 0 #f3f3f3
2802 | }
2803 | 
2804 | .mui-search {
2805 | 	position: relative
2806 | }
2807 | 
2808 | .mui-search input[type=search] {
2809 | 	padding-left: 30px
2810 | }
2811 | 
2812 | .mui-search .mui-placeholder {
2813 | 	font-size: 16px;
2814 | 	line-height: 34px;
2815 | 	position: absolute;
2816 | 	z-index: 1;
2817 | 	top: 0;
2818 | 	right: 0;
2819 | 	bottom: 0;
2820 | 	left: 0;
2821 | 	display: inline-block;
2822 | 	height: 34px;
2823 | 	text-align: center;
2824 | 	color: #999;
2825 | 	border: 0;
2826 | 	border-radius: 6px;
2827 | 	background: 0 0
2828 | }
2829 | 
2830 | .mui-search .mui-placeholder .mui-icon {
2831 | 	font-size: 20px;
2832 | 	color: #333
2833 | }
2834 | 
2835 | .mui-search:before {
2836 | 	font-family: Muiicons;
2837 | 	font-size: 20px;
2838 | 	font-weight: 400;
2839 | 	position: absolute;
2840 | 	top: 50%;
2841 | 	right: 50%;
2842 | 	display: none;
2843 | 	margin-top: -18px;
2844 | 	margin-right: 31px;
2845 | 	content: '\e466'
2846 | }
2847 | 
2848 | .mui-search.mui-active:before {
2849 | 	font-size: 20px;
2850 | 	right: auto;
2851 | 	left: 5px;
2852 | 	display: block;
2853 | 	margin-right: 0
2854 | }
2855 | 
2856 | .mui-search.mui-active input[type=search] {
2857 | 	text-align: left
2858 | }
2859 | 
2860 | .mui-search.mui-active .mui-placeholder {
2861 | 	display: none
2862 | }
2863 | 
2864 | .mui-segmented-control {
2865 | 	font-size: 15px;
2866 | 	font-weight: 400;
2867 | 	position: relative;
2868 | 	display: table;
2869 | 	overflow: hidden;
2870 | 	width: 100%;
2871 | 	table-layout: fixed;
2872 | 	border: 1px solid #007aff;
2873 | 	border-radius: 3px;
2874 | 	background-color: transparent;
2875 | 	-webkit-touch-callout: none
2876 | }
2877 | 
2878 | .mui-segmented-control.mui-segmented-control-vertical {
2879 | 	border-collapse: collapse;
2880 | 	border-width: 0;
2881 | 	border-radius: 0
2882 | }
2883 | 
2884 | .mui-segmented-control.mui-segmented-control-vertical .mui-control-item {
2885 | 	display: block;
2886 | 	border-bottom: 1px solid #c8c7cc;
2887 | 	border-left-width: 0
2888 | }
2889 | 
2890 | .mui-segmented-control.mui-scroll-wrapper {
2891 | 	height: 38px
2892 | }
2893 | 
2894 | .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
2895 | 	width: auto;
2896 | 	height: 40px;
2897 | 	white-space: nowrap
2898 | }
2899 | 
2900 | .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
2901 | 	display: inline-block;
2902 | 	width: auto;
2903 | 	padding: 0 20px;
2904 | 	border: 0
2905 | }
2906 | 
2907 | .mui-segmented-control .mui-control-item {
2908 | 	line-height: 38px;
2909 | 	display: table-cell;
2910 | 	overflow: hidden;
2911 | 	width: 1%;
2912 | 	-webkit-transition: background-color .1s linear;
2913 | 	transition: background-color .1s linear;
2914 | 	text-align: center;
2915 | 	white-space: nowrap;
2916 | 	text-overflow: ellipsis;
2917 | 	color: #007aff;
2918 | 	border-color: #007aff;
2919 | 	border-left: 1px solid #007aff
2920 | }
2921 | 
2922 | .mui-segmented-control .mui-control-item:first-child {
2923 | 	border-left-width: 0
2924 | }
2925 | 
2926 | .mui-segmented-control .mui-control-item.mui-active {
2927 | 	color: #fff;
2928 | 	background-color: #007aff
2929 | }
2930 | 
2931 | .mui-segmented-control.mui-segmented-control-inverted {
2932 | 	width: 100%;
2933 | 	border: 0;
2934 | 	border-radius: 0
2935 | }
2936 | 
2937 | .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
2938 | .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
2939 | 	border-bottom: 1px solid #c8c7cc
2940 | }
2941 | 
2942 | .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
2943 | 	color: inherit;
2944 | 	border: 0
2945 | }
2946 | 
2947 | .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
2948 | 	color: #007aff;
2949 | 	border-bottom: 2px solid #007aff;
2950 | 	background: 0 0
2951 | }
2952 | 
2953 | .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
2954 | 	background-color: #007aff
2955 | }
2956 | 
2957 | .mui-segmented-control-positive {
2958 | 	border: 1px solid #4cd964
2959 | }
2960 | 
2961 | .mui-segmented-control-positive .mui-control-item {
2962 | 	color: #4cd964;
2963 | 	border-color: inherit
2964 | }
2965 | 
2966 | .mui-segmented-control-positive .mui-control-item.mui-active {
2967 | 	color: #fff;
2968 | 	background-color: #4cd964
2969 | }
2970 | 
2971 | .mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active {
2972 | 	color: #4cd964;
2973 | 	border-bottom: 2px solid #4cd964;
2974 | 	background: 0 0
2975 | }
2976 | 
2977 | .mui-segmented-control-positive.mui-segmented-control-inverted~.mui-slider-progress-bar {
2978 | 	background-color: #4cd964
2979 | }
2980 | 
2981 | .mui-segmented-control-negative {
2982 | 	border: 1px solid #dd524d
2983 | }
2984 | 
2985 | .mui-segmented-control-negative .mui-control-item {
2986 | 	color: #dd524d;
2987 | 	border-color: inherit
2988 | }
2989 | 
2990 | .mui-segmented-control-negative .mui-control-item.mui-active {
2991 | 	color: #fff;
2992 | 	background-color: #dd524d
2993 | }
2994 | 
2995 | .mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active {
2996 | 	color: #dd524d;
2997 | 	border-bottom: 2px solid #dd524d;
2998 | 	background: 0 0
2999 | }
3000 | 
3001 | .mui-segmented-control-negative.mui-segmented-control-inverted~.mui-slider-progress-bar {
3002 | 	background-color: #dd524d
3003 | }
3004 | 
3005 | .mui-control-content {
3006 | 	position: relative;
3007 | 	display: none
3008 | }
3009 | 
3010 | .mui-control-content.mui-active {
3011 | 	display: block
3012 | }
3013 | 
3014 | .mui-popover {
3015 | 	position: absolute;
3016 | 	z-index: 999;
3017 | 	display: none;
3018 | 	width: 280px;
3019 | 	-webkit-transition: opacity .3s;
3020 | 	transition: opacity .3s;
3021 | 	-webkit-transition-property: opacity;
3022 | 	transition-property: opacity;
3023 | 	-webkit-transform: none;
3024 | 	transform: none;
3025 | 	opacity: 0;
3026 | 	border-radius: 7px;
3027 | 	background-color: #f7f7f7;
3028 | 	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
3029 | 	box-shadow: 0 0 15px rgba(0, 0, 0, .1)
3030 | }
3031 | 
3032 | .mui-popover .mui-popover-arrow {
3033 | 	position: absolute;
3034 | 	z-index: 1000;
3035 | 	top: -25px;
3036 | 	left: 0;
3037 | 	overflow: hidden;
3038 | 	width: 26px;
3039 | 	height: 26px
3040 | }
3041 | 
3042 | .mui-popover .mui-popover-arrow:after {
3043 | 	position: absolute;
3044 | 	top: 19px;
3045 | 	left: 0;
3046 | 	width: 26px;
3047 | 	height: 26px;
3048 | 	content: ' ';
3049 | 	-webkit-transform: rotate(45deg);
3050 | 	transform: rotate(45deg);
3051 | 	border-radius: 3px;
3052 | 	background: #f7f7f7
3053 | }
3054 | 
3055 | .mui-popover .mui-popover-arrow.mui-bottom {
3056 | 	top: 100%;
3057 | 	left: -26px;
3058 | 	margin-top: -1px
3059 | }
3060 | 
3061 | .mui-popover .mui-popover-arrow.mui-bottom:after {
3062 | 	top: -19px;
3063 | 	left: 0
3064 | }
3065 | 
3066 | .mui-popover.mui-popover-action {
3067 | 	bottom: 0;
3068 | 	width: 100%;
3069 | 	-webkit-transition: -webkit-transform .3s, opacity .3s;
3070 | 	transition: transform .3s, opacity .3s;
3071 | 	-webkit-transform: translate3d(0, 100%, 0);
3072 | 	transform: translate3d(0, 100%, 0);
3073 | 	border-radius: 0;
3074 | 	background: 0 0;
3075 | 	-webkit-box-shadow: none;
3076 | 	box-shadow: none
3077 | }
3078 | 
3079 | .mui-popover.mui-popover-action .mui-popover-arrow {
3080 | 	display: none
3081 | }
3082 | 
3083 | .mui-popover.mui-popover-action.mui-popover-bottom {
3084 | 	position: fixed
3085 | }
3086 | 
3087 | .mui-popover.mui-popover-action.mui-active {
3088 | 	-webkit-transform: translate3d(0, 0, 0);
3089 | 	transform: translate3d(0, 0, 0)
3090 | }
3091 | 
3092 | .mui-popover.mui-popover-action .mui-table-view {
3093 | 	margin: 8px;
3094 | 	text-align: center;
3095 | 	color: #007aff;
3096 | 	border-radius: 4px
3097 | }
3098 | 
3099 | .mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after {
3100 | 	position: absolute;
3101 | 	right: 0;
3102 | 	bottom: 0;
3103 | 	left: 0;
3104 | 	height: 1px;
3105 | 	content: '';
3106 | 	-webkit-transform: scaleY(.5);
3107 | 	transform: scaleY(.5);
3108 | 	background-color: #c8c7cc
3109 | }
3110 | 
3111 | .mui-popover.mui-popover-action .mui-table-view small {
3112 | 	font-weight: 400;
3113 | 	line-height: 1.3;
3114 | 	display: block
3115 | }
3116 | 
3117 | .mui-popover.mui-active {
3118 | 	display: block;
3119 | 	opacity: 1
3120 | }
3121 | 
3122 | .mui-popover .mui-bar~.mui-table-view {
3123 | 	padding-top: 44px
3124 | }
3125 | 
3126 | .mui-backdrop {
3127 | 	position: fixed;
3128 | 	z-index: 998;
3129 | 	top: 0;
3130 | 	right: 0;
3131 | 	bottom: 0;
3132 | 	left: 0;
3133 | 	background-color: rgba(0, 0, 0, .3)
3134 | }
3135 | 
3136 | .mui-bar-backdrop.mui-backdrop {
3137 | 	bottom: 50px;
3138 | 	background: 0 0
3139 | }
3140 | 
3141 | .mui-backdrop-action.mui-backdrop {
3142 | 	background-color: rgba(0, 0, 0, .3)
3143 | }
3144 | 
3145 | .mui-backdrop-action.mui-backdrop,
3146 | .mui-bar-backdrop.mui-backdrop {
3147 | 	opacity: 0
3148 | }
3149 | 
3150 | .mui-backdrop-action.mui-backdrop.mui-active,
3151 | .mui-bar-backdrop.mui-backdrop.mui-active {
3152 | 	-webkit-transition: all .4s ease;
3153 | 	transition: all .4s ease;
3154 | 	opacity: 1
3155 | }
3156 | 
3157 | .mui-popover .mui-btn-block {
3158 | 	margin-bottom: 5px
3159 | }
3160 | 
3161 | .mui-popover .mui-btn-block:last-child {
3162 | 	margin-bottom: 0
3163 | }
3164 | 
3165 | .mui-popover .mui-bar {
3166 | 	-webkit-box-shadow: none;
3167 | 	box-shadow: none
3168 | }
3169 | 
3170 | .mui-popover .mui-bar-nav {
3171 | 	border-bottom: 1px solid rgba(0, 0, 0, .15);
3172 | 	border-top-left-radius: 12px;
3173 | 	border-top-right-radius: 12px;
3174 | 	-webkit-box-shadow: none;
3175 | 	box-shadow: none
3176 | }
3177 | 
3178 | .mui-popover .mui-scroll-wrapper {
3179 | 	margin: 7px 0;
3180 | 	border-radius: 7px;
3181 | 	background-clip: padding-box
3182 | }
3183 | 
3184 | .mui-popover .mui-scroll .mui-table-view {
3185 | 	max-height: none
3186 | }
3187 | 
3188 | .mui-popover .mui-table-view {
3189 | 	overflow: auto;
3190 | 	max-height: 300px;
3191 | 	margin-bottom: 0;
3192 | 	border-radius: 7px;
3193 | 	background-color: #f7f7f7;
3194 | 	background-image: none;
3195 | 	-webkit-overflow-scrolling: touch
3196 | }
3197 | 
3198 | .mui-popover .mui-table-view:after,
3199 | .mui-popover .mui-table-view:before {
3200 | 	height: 0
3201 | }
3202 | 
3203 | .mui-popover .mui-table-view .mui-table-view-cell:first-child,
3204 | .mui-popover .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn) {
3205 | 	border-top-left-radius: 12px;
3206 | 	border-top-right-radius: 12px
3207 | }
3208 | 
3209 | .mui-popover .mui-table-view .mui-table-view-cell:last-child,
3210 | .mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn) {
3211 | 	border-bottom-right-radius: 12px;
3212 | 	border-bottom-left-radius: 12px
3213 | }
3214 | 
3215 | .mui-popover.mui-bar-popover .mui-table-view {
3216 | 	width: 106px
3217 | }
3218 | 
3219 | .mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell {
3220 | 	padding: 11px 15px;
3221 | 	background-position: 0 100%
3222 | }
3223 | 
3224 | .mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell>a:not(.mui-btn) {
3225 | 	margin: -11px -15px -11px -15px
3226 | }
3227 | 
3228 | .mui-popup-backdrop {
3229 | 	position: fixed;
3230 | 	z-index: 998;
3231 | 	top: 0;
3232 | 	right: 0;
3233 | 	bottom: 0;
3234 | 	left: 0;
3235 | 	-webkit-transition-duration: 400ms;
3236 | 	transition-duration: 400ms;
3237 | 	opacity: 0;
3238 | 	background: rgba(0, 0, 0, .4)
3239 | }
3240 | 
3241 | .mui-popup-backdrop.mui-active {
3242 | 	opacity: 1
3243 | }
3244 | 
3245 | .mui-popup {
3246 | 	position: fixed;
3247 | 	z-index: 10000;
3248 | 	top: 50%;
3249 | 	left: 50%;
3250 | 	display: none;
3251 | 	overflow: hidden;
3252 | 	width: 270px;
3253 | 	-webkit-transition-property: -webkit-transform, opacity;
3254 | 	transition-property: transform, opacity;
3255 | 	-webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
3256 | 	transform: translate3d(-50%, -50%, 0) scale(1.185);
3257 | 	text-align: center;
3258 | 	opacity: 0;
3259 | 	color: #000;
3260 | 	border-radius: 13px
3261 | }
3262 | 
3263 | .mui-popup.mui-popup-in {
3264 | 	display: block;
3265 | 	-webkit-transition-duration: 400ms;
3266 | 	transition-duration: 400ms;
3267 | 	-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
3268 | 	transform: translate3d(-50%, -50%, 0) scale(1);
3269 | 	opacity: 1
3270 | }
3271 | 
3272 | .mui-popup.mui-popup-out {
3273 | 	-webkit-transition-duration: 400ms;
3274 | 	transition-duration: 400ms;
3275 | 	-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
3276 | 	transform: translate3d(-50%, -50%, 0) scale(1);
3277 | 	opacity: 0
3278 | }
3279 | 
3280 | .mui-popup-inner {
3281 | 	position: relative;
3282 | 	padding: 15px;
3283 | 	border-radius: 13px 13px 0 0;
3284 | 	background: rgba(255, 255, 255, .95)
3285 | }
3286 | 
3287 | .mui-popup-inner:after {
3288 | 	position: absolute;
3289 | 	z-index: 15;
3290 | 	top: auto;
3291 | 	right: auto;
3292 | 	bottom: 0;
3293 | 	left: 0;
3294 | 	display: block;
3295 | 	width: 100%;
3296 | 	height: 1px;
3297 | 	content: '';
3298 | 	-webkit-transform: scaleY(.5);
3299 | 	transform: scaleY(.5);
3300 | 	-webkit-transform-origin: 50% 100%;
3301 | 	transform-origin: 50% 100%;
3302 | 	background-color: rgba(0, 0, 0, .2)
3303 | }
3304 | 
3305 | .mui-popup-title {
3306 | 	font-size: 18px;
3307 | 	font-weight: 500;
3308 | 	text-align: center
3309 | }
3310 | 
3311 | .mui-popup-title+.mui-popup-text {
3312 | 	font-family: inherit;
3313 | 	font-size: 14px;
3314 | 	margin: 5px 0 0
3315 | }
3316 | 
3317 | .mui-popup-buttons {
3318 | 	position: relative;
3319 | 	display: -webkit-box;
3320 | 	display: -webkit-flex;
3321 | 	display: flex;
3322 | 	height: 44px;
3323 | 	-webkit-box-pack: center;
3324 | 	-webkit-justify-content: center;
3325 | 	justify-content: center
3326 | }
3327 | 
3328 | .mui-popup-button {
3329 | 	font-size: 17px;
3330 | 	line-height: 44px;
3331 | 	position: relative;
3332 | 	display: block;
3333 | 	overflow: hidden;
3334 | 	box-sizing: border-box;
3335 | 	width: 100%;
3336 | 	height: 44px;
3337 | 	padding: 0 5px;
3338 | 	cursor: pointer;
3339 | 	text-align: center;
3340 | 	white-space: nowrap;
3341 | 	text-overflow: ellipsis;
3342 | 	color: #007aff;
3343 | 	background: rgba(255, 255, 255, .95);
3344 | 	-webkit-box-flex: 1
3345 | }
3346 | 
3347 | .mui-popup-button:after {
3348 | 	position: absolute;
3349 | 	z-index: 15;
3350 | 	top: 0;
3351 | 	right: 0;
3352 | 	bottom: auto;
3353 | 	left: auto;
3354 | 	display: block;
3355 | 	width: 1px;
3356 | 	height: 100%;
3357 | 	content: '';
3358 | 	-webkit-transform: scaleX(.5);
3359 | 	transform: scaleX(.5);
3360 | 	-webkit-transform-origin: 100% 50%;
3361 | 	transform-origin: 100% 50%;
3362 | 	background-color: rgba(0, 0, 0, .2)
3363 | }
3364 | 
3365 | .mui-popup-button:first-child {
3366 | 	border-radius: 0 0 0 13px
3367 | }
3368 | 
3369 | .mui-popup-button:first-child:last-child {
3370 | 	border-radius: 0 0 13px 13px
3371 | }
3372 | 
3373 | .mui-popup-button:last-child {
3374 | 	border-radius: 0 0 13px
3375 | }
3376 | 
3377 | .mui-popup-button:last-child:after {
3378 | 	display: none
3379 | }
3380 | 
3381 | .mui-popup-button.mui-popup-button-bold {
3382 | 	font-weight: 600
3383 | }
3384 | 
3385 | .mui-popup-input input {
3386 | 	font-size: 14px;
3387 | 	width: 100%;
3388 | 	height: 26px;
3389 | 	margin: 15px 0 0;
3390 | 	padding: 0 5px;
3391 | 	border: 1px solid rgba(0, 0, 0, .3);
3392 | 	border-radius: 0;
3393 | 	background: #fff
3394 | }
3395 | 
3396 | .mui-plus.mui-android .mui-popup-backdrop {
3397 | 	-webkit-transition-duration: 1ms;
3398 | 	transition-duration: 1ms
3399 | }
3400 | 
3401 | .mui-plus.mui-android .mui-popup {
3402 | 	-webkit-transition-duration: 1ms;
3403 | 	transition-duration: 1ms;
3404 | 	-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
3405 | 	transform: translate3d(-50%, -50%, 0) scale(1)
3406 | }
3407 | 
3408 | .mui-progressbar {
3409 | 	position: relative;
3410 | 	display: block;
3411 | 	overflow: hidden;
3412 | 	width: 100%;
3413 | 	height: 2px;
3414 | 	-webkit-transform-origin: center top;
3415 | 	transform-origin: center top;
3416 | 	vertical-align: middle;
3417 | 	border-radius: 2px;
3418 | 	background: #b6b6b6;
3419 | 	-webkit-transform-style: preserve-3d;
3420 | 	transform-style: preserve-3d
3421 | }
3422 | 
3423 | .mui-progressbar span {
3424 | 	position: absolute;
3425 | 	top: 0;
3426 | 	left: 0;
3427 | 	width: 100%;
3428 | 	height: 100%;
3429 | 	-webkit-transition: 150ms;
3430 | 	transition: 150ms;
3431 | 	-webkit-transform: translate3d(-100%, 0, 0);
3432 | 	transform: translate3d(-100%, 0, 0);
3433 | 	background: #007aff
3434 | }
3435 | 
3436 | .mui-progressbar.mui-progressbar-infinite:before {
3437 | 	position: absolute;
3438 | 	top: 0;
3439 | 	left: 0;
3440 | 	width: 100%;
3441 | 	height: 100%;
3442 | 	content: '';
3443 | 	-webkit-transform: translate3d(0, 0, 0);
3444 | 	transform: translate3d(0, 0, 0);
3445 | 	-webkit-transform-origin: left center;
3446 | 	transform-origin: left center;
3447 | 	-webkit-animation: mui-progressbar-infinite 1s linear infinite;
3448 | 	animation: mui-progressbar-infinite 1s linear infinite;
3449 | 	background: #007aff
3450 | }
3451 | 
3452 | body>.mui-progressbar {
3453 | 	position: absolute;
3454 | 	z-index: 10000;
3455 | 	top: 44px;
3456 | 	left: 0;
3457 | 	border-radius: 0
3458 | }
3459 | 
3460 | .mui-progressbar-in {
3461 | 	-webkit-animation: mui-progressbar-in 300ms forwards;
3462 | 	animation: mui-progressbar-in 300ms forwards
3463 | }
3464 | 
3465 | .mui-progressbar-out {
3466 | 	-webkit-animation: mui-progressbar-out 300ms forwards;
3467 | 	animation: mui-progressbar-out 300ms forwards
3468 | }
3469 | 
3470 | @-webkit-keyframes mui-progressbar-in {
3471 | 	from {
3472 | 		-webkit-transform: scaleY(0);
3473 | 		opacity: 0
3474 | 	}
3475 | 	to {
3476 | 		-webkit-transform: scaleY(1);
3477 | 		opacity: 1
3478 | 	}
3479 | }
3480 | 
3481 | @keyframes mui-progressbar-in {
3482 | 	from {
3483 | 		transform: scaleY(0);
3484 | 		opacity: 0
3485 | 	}
3486 | 	to {
3487 | 		transform: scaleY(1);
3488 | 		opacity: 1
3489 | 	}
3490 | }
3491 | 
3492 | @-webkit-keyframes mui-progressbar-out {
3493 | 	from {
3494 | 		-webkit-transform: scaleY(1);
3495 | 		opacity: 1
3496 | 	}
3497 | 	to {
3498 | 		-webkit-transform: scaleY(0);
3499 | 		opacity: 0
3500 | 	}
3501 | }
3502 | 
3503 | @keyframes mui-progressbar-out {
3504 | 	from {
3505 | 		transform: scaleY(1);
3506 | 		opacity: 1
3507 | 	}
3508 | 	to {
3509 | 		transform: scaleY(0);
3510 | 		opacity: 0
3511 | 	}
3512 | }
3513 | 
3514 | @-webkit-keyframes mui-progressbar-infinite {
3515 | 	0% {
3516 | 		-webkit-transform: translate3d(-50%, 0, 0) scaleX(.5)
3517 | 	}
3518 | 	100% {
3519 | 		-webkit-transform: translate3d(100%, 0, 0) scaleX(.5)
3520 | 	}
3521 | }
3522 | 
3523 | @keyframes mui-progressbar-infinite {
3524 | 	0% {
3525 | 		transform: translate3d(-50%, 0, 0) scaleX(.5)
3526 | 	}
3527 | 	100% {
3528 | 		transform: translate3d(100%, 0, 0) scaleX(.5)
3529 | 	}
3530 | }
3531 | 
3532 | .mui-pagination {
3533 | 	display: inline-block;
3534 | 	margin: 0 auto;
3535 | 	padding-left: 0;
3536 | 	border-radius: 6px
3537 | }
3538 | 
3539 | .mui-pagination>li {
3540 | 	display: inline
3541 | }
3542 | 
3543 | .mui-pagination>li>a,
3544 | .mui-pagination>li>span {
3545 | 	line-height: 1.428571429;
3546 | 	position: relative;
3547 | 	float: left;
3548 | 	margin-left: -1px;
3549 | 	padding: 6px 12px;
3550 | 	text-decoration: none;
3551 | 	color: #007aff;
3552 | 	border: 1px solid #ddd;
3553 | 	background-color: #fff
3554 | }
3555 | 
3556 | .mui-pagination>li:first-child>a,
3557 | .mui-pagination>li:first-child>span {
3558 | 	margin-left: 0;
3559 | 	border-top-left-radius: 6px;
3560 | 	border-bottom-left-radius: 6px;
3561 | 	background-clip: padding-box
3562 | }
3563 | 
3564 | .mui-pagination>li:last-child>a,
3565 | .mui-pagination>li:last-child>span {
3566 | 	border-top-right-radius: 6px;
3567 | 	border-bottom-right-radius: 6px;
3568 | 	background-clip: padding-box
3569 | }
3570 | 
3571 | .mui-pagination>li.mui-active>a,
3572 | .mui-pagination>li.mui-active>a:active,
3573 | .mui-pagination>li.mui-active>span,
3574 | .mui-pagination>li.mui-active>span:active,
3575 | .mui-pagination>li:active>a,
3576 | .mui-pagination>li:active>a:active,
3577 | .mui-pagination>li:active>span,
3578 | .mui-pagination>li:active>span:active {
3579 | 	z-index: 2;
3580 | 	cursor: default;
3581 | 	color: #fff;
3582 | 	border-color: #007aff;
3583 | 	background-color: #007aff
3584 | }
3585 | 
3586 | .mui-pagination>li.mui-disabled>a,
3587 | .mui-pagination>li.mui-disabled>a:active,
3588 | .mui-pagination>li.mui-disabled>span,
3589 | .mui-pagination>li.mui-disabled>span:active {
3590 | 	opacity: .6;
3591 | 	color: #777;
3592 | 	border: 1px solid #ddd;
3593 | 	background-color: #fff
3594 | }
3595 | 
3596 | .mui-pagination-lg>li>a,
3597 | .mui-pagination-lg>li>span {
3598 | 	font-size: 18px;
3599 | 	padding: 10px 16px
3600 | }
3601 | 
3602 | .mui-pagination-sm>li>a,
3603 | .mui-pagination-sm>li>span {
3604 | 	font-size: 12px;
3605 | 	padding: 5px 10px
3606 | }
3607 | 
3608 | .mui-pager {
3609 | 	padding-left: 0;
3610 | 	list-style: none;
3611 | 	text-align: center
3612 | }
3613 | 
3614 | .mui-pager:after,
3615 | .mui-pager:before {
3616 | 	display: table;
3617 | 	content: ' '
3618 | }
3619 | 
3620 | .mui-pager:after {
3621 | 	clear: both
3622 | }
3623 | 
3624 | .mui-pager li {
3625 | 	display: inline
3626 | }
3627 | 
3628 | .mui-pager li>a,
3629 | .mui-pager li>span {
3630 | 	display: inline-block;
3631 | 	padding: 5px 14px;
3632 | 	border: 1px solid #ddd;
3633 | 	border-radius: 6px;
3634 | 	background-color: #fff;
3635 | 	background-clip: padding-box
3636 | }
3637 | 
3638 | .mui-pager li.mui-active>a,
3639 | .mui-pager li.mui-active>span,
3640 | .mui-pager li:active>a,
3641 | .mui-pager li:active>span {
3642 | 	cursor: default;
3643 | 	text-decoration: none;
3644 | 	color: #fff;
3645 | 	border-color: #007aff;
3646 | 	background-color: #007aff
3647 | }
3648 | 
3649 | .mui-pager .mui-next>a,
3650 | .mui-pager .mui-next>span {
3651 | 	float: right
3652 | }
3653 | 
3654 | .mui-pager .mui-previous>a,
3655 | .mui-pager .mui-previous>span {
3656 | 	float: left
3657 | }
3658 | 
3659 | .mui-pager .mui-disabled>a,
3660 | .mui-pager .mui-disabled>a:active,
3661 | .mui-pager .mui-disabled>span,
3662 | .mui-pager .mui-disabled>span:active {
3663 | 	opacity: .6;
3664 | 	color: #777;
3665 | 	border: 1px solid #ddd;
3666 | 	background-color: #fff
3667 | }
3668 | 
3669 | .mui-modal {
3670 | 	position: fixed;
3671 | 	z-index: 999;
3672 | 	top: 0;
3673 | 	overflow: hidden;
3674 | 	width: 100%;
3675 | 	min-height: 100%;
3676 | 	-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
3677 | 	transition: transform .25s, opacity 1ms .25s;
3678 | 	-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
3679 | 	transition-timing-function: cubic-bezier(.1, .5, .1, 1);
3680 | 	-webkit-transform: translate3d(0, 100%, 0);
3681 | 	transform: translate3d(0, 100%, 0);
3682 | 	opacity: 0;
3683 | 	background-color: #fff
3684 | }
3685 | 
3686 | .mui-modal.mui-active {
3687 | 	height: 100%;
3688 | 	-webkit-transition: -webkit-transform .25s;
3689 | 	transition: transform .25s;
3690 | 	-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
3691 | 	transition-timing-function: cubic-bezier(.1, .5, .1, 1);
3692 | 	-webkit-transform: translate3d(0, 0, 0);
3693 | 	transform: translate3d(0, 0, 0);
3694 | 	opacity: 1
3695 | }
3696 | 
3697 | .mui-android .mui-modal .mui-bar {
3698 | 	position: static
3699 | }
3700 | 
3701 | .mui-android .mui-modal .mui-bar-nav~.mui-content {
3702 | 	padding-top: 0
3703 | }
3704 | 
3705 | .mui-slider {
3706 | 	position: relative;
3707 | 	z-index: 1;
3708 | 	overflow: hidden;
3709 | 	width: 100%
3710 | }
3711 | 
3712 | .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
3713 | 	border-bottom: 0
3714 | }
3715 | 
3716 | .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
3717 | 	border-top: 1px solid #c8c7cc;
3718 | 	border-bottom: 1px solid #c8c7cc
3719 | }
3720 | 
3721 | .mui-slider .mui-slider-group {
3722 | 	font-size: 0;
3723 | 	position: relative;
3724 | 	-webkit-transition: all 0s linear;
3725 | 	transition: all 0s linear;
3726 | 	white-space: nowrap
3727 | }
3728 | 
3729 | .mui-slider .mui-slider-group .mui-slider-item {
3730 | 	font-size: 14px;
3731 | 	position: relative;
3732 | 	display: inline-block;
3733 | 	width: 100%;
3734 | 	height: 100%;
3735 | 	vertical-align: top;
3736 | 	white-space: normal
3737 | }
3738 | 
3739 | .mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item) {
3740 | 	line-height: 0;
3741 | 	position: relative;
3742 | 	display: block
3743 | }
3744 | 
3745 | .mui-slider .mui-slider-group .mui-slider-item img {
3746 | 	width: 100%
3747 | }
3748 | 
3749 | .mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after,
3750 | .mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before {
3751 | 	height: 0
3752 | }
3753 | 
3754 | .mui-slider .mui-slider-group.mui-slider-loop {
3755 | 	-webkit-transform: translate(-100%, 0);
3756 | 	transform: translate(-100%, 0)
3757 | }
3758 | 
3759 | .mui-slider-title {
3760 | 	line-height: 30px;
3761 | 	position: absolute;
3762 | 	bottom: 0;
3763 | 	left: 0;
3764 | 	width: 100%;
3765 | 	height: 30px;
3766 | 	margin: 0;
3767 | 	text-align: left;
3768 | 	text-indent: 12px;
3769 | 	opacity: .8;
3770 | 	background-color: #000
3771 | }
3772 | 
3773 | .mui-slider-indicator {
3774 | 	position: absolute;
3775 | 	bottom: 8px;
3776 | 	width: 100%;
3777 | 	text-align: center;
3778 | 	background: 0 0
3779 | }
3780 | 
3781 | .mui-slider-indicator.mui-segmented-control {
3782 | 	position: relative;
3783 | 	bottom: auto
3784 | }
3785 | 
3786 | .mui-slider-indicator .mui-indicator {
3787 | 	display: inline-block;
3788 | 	width: 6px;
3789 | 	height: 6px;
3790 | 	margin: 1px 6px;
3791 | 	cursor: pointer;
3792 | 	border-radius: 50%;
3793 | 	background: #aaa;
3794 | 	-webkit-box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
3795 | 	box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7)
3796 | }
3797 | 
3798 | .mui-slider-indicator .mui-active.mui-indicator {
3799 | 	background: #fff
3800 | }
3801 | 
3802 | .mui-slider-indicator .mui-icon {
3803 | 	font-size: 20px;
3804 | 	line-height: 30px;
3805 | 	width: 40px;
3806 | 	height: 30px;
3807 | 	margin: 3px;
3808 | 	text-align: center;
3809 | 	border: 1px solid #ddd
3810 | }
3811 | 
3812 | .mui-slider-indicator .mui-number {
3813 | 	line-height: 32px;
3814 | 	display: inline-block;
3815 | 	width: 58px
3816 | }
3817 | 
3818 | .mui-slider-indicator .mui-number span {
3819 | 	color: #ff5053
3820 | }
3821 | 
3822 | .mui-slider-progress-bar {
3823 | 	z-index: 1;
3824 | 	height: 2px;
3825 | 	-webkit-transform: translateZ(0);
3826 | 	transform: translateZ(0)
3827 | }
3828 | 
3829 | .mui-switch {
3830 | 	position: relative;
3831 | 	display: block;
3832 | 	width: 74px;
3833 | 	height: 30px;
3834 | 	-webkit-transition-timing-function: ease-in-out;
3835 | 	transition-timing-function: ease-in-out;
3836 | 	-webkit-transition-duration: .2s;
3837 | 	transition-duration: .2s;
3838 | 	-webkit-transition-property: background-color, border;
3839 | 	transition-property: background-color, border;
3840 | 	border: 2px solid #ddd;
3841 | 	border-radius: 20px;
3842 | 	background-color: #fff;
3843 | 	background-clip: padding-box
3844 | }
3845 | 
3846 | .mui-switch.mui-disabled {
3847 | 	opacity: .3
3848 | }
3849 | 
3850 | .mui-switch .mui-switch-handle {
3851 | 	position: absolute;
3852 | 	z-index: 1;
3853 | 	top: -1px;
3854 | 	left: -1px;
3855 | 	width: 28px;
3856 | 	height: 28px;
3857 | 	-webkit-transition: .2s ease-in-out;
3858 | 	transition: .2s ease-in-out;
3859 | 	-webkit-transition-property: -webkit-transform, width, left;
3860 | 	transition-property: transform, width, left;
3861 | 	border-radius: 16px;
3862 | 	background-color: #fff;
3863 | 	background-clip: padding-box;
3864 | 	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
3865 | 	box-shadow: 0 2px 5px rgba(0, 0, 0, .4)
3866 | }
3867 | 
3868 | .mui-switch:before {
3869 | 	font-size: 13px;
3870 | 	position: absolute;
3871 | 	top: 3px;
3872 | 	right: 11px;
3873 | 	content: 'Off';
3874 | 	text-transform: uppercase;
3875 | 	color: #999
3876 | }
3877 | 
3878 | .mui-switch.mui-dragging {
3879 | 	border-color: #f7f7f7;
3880 | 	background-color: #f7f7f7
3881 | }
3882 | 
3883 | .mui-switch.mui-dragging .mui-switch-handle {
3884 | 	width: 38px
3885 | }
3886 | 
3887 | .mui-switch.mui-dragging.mui-active .mui-switch-handle {
3888 | 	left: -11px;
3889 | 	width: 38px
3890 | }
3891 | 
3892 | .mui-switch.mui-active {
3893 | 	border-color: #4cd964;
3894 | 	background-color: #4cd964
3895 | }
3896 | 
3897 | .mui-switch.mui-active .mui-switch-handle {
3898 | 	-webkit-transform: translate(43px, 0);
3899 | 	transform: translate(43px, 0)
3900 | }
3901 | 
3902 | .mui-switch.mui-active:before {
3903 | 	right: auto;
3904 | 	left: 15px;
3905 | 	content: 'On';
3906 | 	color: #fff
3907 | }
3908 | 
3909 | .mui-switch input[type=checkbox] {
3910 | 	display: none
3911 | }
3912 | 
3913 | .mui-switch-mini {
3914 | 	width: 47px
3915 | }
3916 | 
3917 | .mui-switch-mini:before {
3918 | 	display: none
3919 | }
3920 | 
3921 | .mui-switch-mini.mui-active .mui-switch-handle {
3922 | 	-webkit-transform: translate(16px, 0);
3923 | 	transform: translate(16px, 0)
3924 | }
3925 | 
3926 | .mui-switch-blue.mui-active {
3927 | 	border: 2px solid #007aff;
3928 | 	background-color: #007aff
3929 | }
3930 | 
3931 | .mui-content.mui-fade {
3932 | 	left: 0;
3933 | 	opacity: 0
3934 | }
3935 | 
3936 | .mui-content.mui-fade.mui-in {
3937 | 	opacity: 1
3938 | }
3939 | 
3940 | .mui-content.mui-sliding {
3941 | 	z-index: 2;
3942 | 	-webkit-transition: -webkit-transform .4s;
3943 | 	transition: transform .4s;
3944 | 	-webkit-transform: translate3d(0, 0, 0);
3945 | 	transform: translate3d(0, 0, 0)
3946 | }
3947 | 
3948 | .mui-content.mui-sliding.mui-left {
3949 | 	z-index: 1;
3950 | 	-webkit-transform: translate3d(-100%, 0, 0);
3951 | 	transform: translate3d(-100%, 0, 0)
3952 | }
3953 | 
3954 | .mui-content.mui-sliding.mui-right {
3955 | 	z-index: 3;
3956 | 	-webkit-transform: translate3d(100%, 0, 0);
3957 | 	transform: translate3d(100%, 0, 0)
3958 | }
3959 | 
3960 | .mui-navigate-right:after,
3961 | .mui-push-left:after,
3962 | .mui-push-right:after {
3963 | 	font-family: Muiicons;
3964 | 	font-size: inherit;
3965 | 	line-height: 1;
3966 | 	position: absolute;
3967 | 	top: 50%;
3968 | 	display: inline-block;
3969 | 	-webkit-transform: translateY(-50%);
3970 | 	transform: translateY(-50%);
3971 | 	text-decoration: none;
3972 | 	color: #bbb;
3973 | 	-webkit-font-smoothing: antialiased
3974 | }
3975 | 
3976 | .mui-push-left:after {
3977 | 	left: 15px;
3978 | 	content: '\e582'
3979 | }
3980 | 
3981 | .mui-navigate-right:after,
3982 | .mui-push-right:after {
3983 | 	right: 15px;
3984 | 	content: '\e583'
3985 | }
3986 | 
3987 | .mui-pull-bottom-pocket,
3988 | .mui-pull-top-pocket {
3989 | 	position: absolute;
3990 | 	left: 0;
3991 | 	display: block;
3992 | 	visibility: hidden;
3993 | 	overflow: hidden;
3994 | 	width: 100%;
3995 | 	height: 50px
3996 | }
3997 | 
3998 | .mui-plus-pullrefresh .mui-pull-bottom-pocket,
3999 | .mui-plus-pullrefresh .mui-pull-top-pocket {
4000 | 	display: none;
4001 | 	visibility: visible
4002 | }
4003 | 
4004 | .mui-pull-top-pocket {
4005 | 	top: 0
4006 | }
4007 | 
4008 | .mui-bar-nav~.mui-content .mui-pull-top-pocket {
4009 | 	top: 44px
4010 | }
4011 | 
4012 | .mui-bar-nav~.mui-bar-header-secondary~.mui-content .mui-pull-top-pocket {
4013 | 	top: 88px
4014 | }
4015 | 
4016 | .mui-pull-bottom-pocket {
4017 | 	position: relative;
4018 | 	bottom: 0;
4019 | 	height: 40px
4020 | }
4021 | 
4022 | .mui-pull-bottom-pocket .mui-pull-loading {
4023 | 	visibility: hidden
4024 | }
4025 | 
4026 | .mui-pull-bottom-pocket .mui-pull-loading.mui-in {
4027 | 	display: inline-block
4028 | }
4029 | 
4030 | .mui-pull {
4031 | 	font-weight: 700;
4032 | 	position: absolute;
4033 | 	right: 0;
4034 | 	bottom: 10px;
4035 | 	left: 0;
4036 | 	text-align: center;
4037 | 	color: #777
4038 | }
4039 | 
4040 | .mui-pull-loading {
4041 | 	margin-right: 10px;
4042 | 	-webkit-transition: -webkit-transform .4s;
4043 | 	transition: transform .4s;
4044 | 	-webkit-transition-duration: 400ms;
4045 | 	transition-duration: 400ms;
4046 | 	vertical-align: middle
4047 | }
4048 | 
4049 | .mui-pull-loading.mui-reverse {
4050 | 	-webkit-transform: rotate(180deg) translateZ(0);
4051 | 	transform: rotate(180deg) translateZ(0)
4052 | }
4053 | 
4054 | .mui-pull-caption {
4055 | 	font-size: 15px;
4056 | 	line-height: 24px;
4057 | 	position: relative;
4058 | 	display: inline-block;
4059 | 	overflow: visible;
4060 | 	margin-top: 0;
4061 | 	vertical-align: middle
4062 | }
4063 | 
4064 | .mui-pull-caption span {
4065 | 	display: none
4066 | }
4067 | 
4068 | .mui-pull-caption span.mui-in {
4069 | 	display: inline
4070 | }
4071 | 
4072 | .mui-toast-container {
4073 | 	line-height: 17px;
4074 | 	position: fixed;
4075 | 	z-index: 9999;
4076 | 	bottom: 50px;
4077 | 	left: 50%;
4078 | 	-webkit-transition: opacity .3s;
4079 | 	transition: opacity .3s;
4080 | 	-webkit-transform: translate(-50%, 0);
4081 | 	transform: translate(-50%, 0);
4082 | 	opacity: 0
4083 | }
4084 | 
4085 | .mui-toast-container.mui-active {
4086 | 	opacity: .9
4087 | }
4088 | 
4089 | .mui-toast-message {
4090 | 	font-size: 14px;
4091 | 	padding: 10px 25px;
4092 | 	text-align: center;
4093 | 	color: #fff;
4094 | 	border-radius: 6px;
4095 | 	background-color: #323232
4096 | }
4097 | 
4098 | .mui-numbox {
4099 | 	position: relative;
4100 | 	display: inline-block;
4101 | 	overflow: hidden;
4102 | 	width: 120px;
4103 | 	height: 35px;
4104 | 	padding: 0 40px;
4105 | 	vertical-align: top;
4106 | 	vertical-align: middle;
4107 | 	border: solid 1px #bbb;
4108 | 	border-radius: 3px;
4109 | 	background-color: #efeff4
4110 | }
4111 | 
4112 | .mui-numbox [class*=btn-numbox],
4113 | .mui-numbox [class*=numbox-btn] {
4114 | 	font-size: 18px;
4115 | 	font-weight: 400;
4116 | 	line-height: 100%;
4117 | 	position: absolute;
4118 | 	top: 0;
4119 | 	overflow: hidden;
4120 | 	width: 40px;
4121 | 	height: 100%;
4122 | 	padding: 0;
4123 | 	color: #555;
4124 | 	border: none;
4125 | 	border-radius: 0;
4126 | 	background-color: #f9f9f9
4127 | }
4128 | 
4129 | .mui-numbox [class*=btn-numbox]:active,
4130 | .mui-numbox [class*=numbox-btn]:active {
4131 | 	background-color: #ccc
4132 | }
4133 | 
4134 | .mui-numbox [class*=btn-numbox][disabled],
4135 | .mui-numbox [class*=numbox-btn][disabled] {
4136 | 	color: silver
4137 | }
4138 | 
4139 | .mui-numbox .mui-btn-numbox-plus,
4140 | .mui-numbox .mui-numbox-btn-plus {
4141 | 	right: 0;
4142 | 	border-top-right-radius: 3px;
4143 | 	border-bottom-right-radius: 3px
4144 | }
4145 | 
4146 | .mui-numbox .mui-btn-numbox-minus,
4147 | .mui-numbox .mui-numbox-btn-minus {
4148 | 	left: 0;
4149 | 	border-top-left-radius: 3px;
4150 | 	border-bottom-left-radius: 3px
4151 | }
4152 | 
4153 | .mui-numbox .mui-input-numbox,
4154 | .mui-numbox .mui-numbox-input {
4155 | 	display: inline-block;
4156 | 	overflow: hidden;
4157 | 	width: 100%!important;
4158 | 	height: 100%;
4159 | 	margin: 0;
4160 | 	padding: 0 3px!important;
4161 | 	text-align: center;
4162 | 	text-overflow: ellipsis;
4163 | 	word-break: normal;
4164 | 	border: none!important;
4165 | 	border-right: solid 1px #ccc!important;
4166 | 	border-left: solid 1px #ccc!important;
4167 | 	border-radius: 0!important
4168 | }
4169 | 
4170 | .mui-input-row .mui-numbox {
4171 | 	float: right;
4172 | 	margin: 2px 8px
4173 | }
4174 | 
4175 | @font-face {
4176 | 	font-family: Muiicons;
4177 | 	font-weight: 400;
4178 | 	font-style: normal;
4179 | 	src: url(../fonts/mui.ttf) format('truetype')
4180 | }
4181 | 
4182 | .mui-icon {
4183 | 	font-family: Muiicons;
4184 | 	font-size: 24px;
4185 | 	font-weight: 400;
4186 | 	font-style: normal;
4187 | 	line-height: 1;
4188 | 	display: inline-block;
4189 | 	text-decoration: none;
4190 | 	-webkit-font-smoothing: antialiased
4191 | }
4192 | 
4193 | .mui-icon.mui-active {
4194 | 	color: #007aff
4195 | }
4196 | 
4197 | .mui-icon.mui-right:before {
4198 | 	float: right;
4199 | 	padding-left: .2em
4200 | }
4201 | 
4202 | .mui-icon-contact:before {
4203 | 	content: '\e100'
4204 | }
4205 | 
4206 | .mui-icon-person:before {
4207 | 	content: '\e101'
4208 | }
4209 | 
4210 | .mui-icon-personadd:before {
4211 | 	content: '\e102'
4212 | }
4213 | 
4214 | .mui-icon-contact-filled:before {
4215 | 	content: '\e130'
4216 | }
4217 | 
4218 | .mui-icon-person-filled:before {
4219 | 	content: '\e131'
4220 | }
4221 | 
4222 | .mui-icon-personadd-filled:before {
4223 | 	content: '\e132'
4224 | }
4225 | 
4226 | .mui-icon-phone:before {
4227 | 	content: '\e200'
4228 | }
4229 | 
4230 | .mui-icon-email:before {
4231 | 	content: '\e201'
4232 | }
4233 | 
4234 | .mui-icon-chatbubble:before {
4235 | 	content: '\e202'
4236 | }
4237 | 
4238 | .mui-icon-chatboxes:before {
4239 | 	content: '\e203'
4240 | }
4241 | 
4242 | .mui-icon-phone-filled:before {
4243 | 	content: '\e230'
4244 | }
4245 | 
4246 | .mui-icon-email-filled:before {
4247 | 	content: '\e231'
4248 | }
4249 | 
4250 | .mui-icon-chatbubble-filled:before {
4251 | 	content: '\e232'
4252 | }
4253 | 
4254 | .mui-icon-chatboxes-filled:before {
4255 | 	content: '\e233'
4256 | }
4257 | 
4258 | .mui-icon-weibo:before {
4259 | 	content: '\e260'
4260 | }
4261 | 
4262 | .mui-icon-weixin:before {
4263 | 	content: '\e261'
4264 | }
4265 | 
4266 | .mui-icon-pengyouquan:before {
4267 | 	content: '\e262'
4268 | }
4269 | 
4270 | .mui-icon-chat:before {
4271 | 	content: '\e263'
4272 | }
4273 | 
4274 | .mui-icon-qq:before {
4275 | 	content: '\e264'
4276 | }
4277 | 
4278 | .mui-icon-videocam:before {
4279 | 	content: '\e300'
4280 | }
4281 | 
4282 | .mui-icon-camera:before {
4283 | 	content: '\e301'
4284 | }
4285 | 
4286 | .mui-icon-mic:before {
4287 | 	content: '\e302'
4288 | }
4289 | 
4290 | .mui-icon-location:before {
4291 | 	content: '\e303'
4292 | }
4293 | 
4294 | .mui-icon-mic-filled:before,
4295 | .mui-icon-speech:before {
4296 | 	content: '\e332'
4297 | }
4298 | 
4299 | .mui-icon-location-filled:before {
4300 | 	content: '\e333'
4301 | }
4302 | 
4303 | .mui-icon-micoff:before {
4304 | 	content: '\e360'
4305 | }
4306 | 
4307 | .mui-icon-image:before {
4308 | 	content: '\e363'
4309 | }
4310 | 
4311 | .mui-icon-map:before {
4312 | 	content: '\e364'
4313 | }
4314 | 
4315 | .mui-icon-compose:before {
4316 | 	content: '\e400'
4317 | }
4318 | 
4319 | .mui-icon-trash:before {
4320 | 	content: '\e401'
4321 | }
4322 | 
4323 | .mui-icon-upload:before {
4324 | 	content: '\e402'
4325 | }
4326 | 
4327 | .mui-icon-download:before {
4328 | 	content: '\e403'
4329 | }
4330 | 
4331 | .mui-icon-close:before {
4332 | 	content: '\e404'
4333 | }
4334 | 
4335 | .mui-icon-redo:before {
4336 | 	content: '\e405'
4337 | }
4338 | 
4339 | .mui-icon-undo:before {
4340 | 	content: '\e406'
4341 | }
4342 | 
4343 | .mui-icon-refresh:before {
4344 | 	content: '\e407'
4345 | }
4346 | 
4347 | .mui-icon-star:before {
4348 | 	content: '\e408'
4349 | }
4350 | 
4351 | .mui-icon-plus:before {
4352 | 	content: '\e409'
4353 | }
4354 | 
4355 | .mui-icon-minus:before {
4356 | 	content: '\e410'
4357 | }
4358 | 
4359 | .mui-icon-checkbox:before,
4360 | .mui-icon-circle:before {
4361 | 	content: '\e411'
4362 | }
4363 | 
4364 | .mui-icon-clear:before,
4365 | .mui-icon-close-filled:before {
4366 | 	content: '\e434'
4367 | }
4368 | 
4369 | .mui-icon-refresh-filled:before {
4370 | 	content: '\e437'
4371 | }
4372 | 
4373 | .mui-icon-star-filled:before {
4374 | 	content: '\e438'
4375 | }
4376 | 
4377 | .mui-icon-plus-filled:before {
4378 | 	content: '\e439'
4379 | }
4380 | 
4381 | .mui-icon-minus-filled:before {
4382 | 	content: '\e440'
4383 | }
4384 | 
4385 | .mui-icon-circle-filled:before {
4386 | 	content: '\e441'
4387 | }
4388 | 
4389 | .mui-icon-checkbox-filled:before {
4390 | 	content: '\e442'
4391 | }
4392 | 
4393 | .mui-icon-closeempty:before {
4394 | 	content: '\e460'
4395 | }
4396 | 
4397 | .mui-icon-refreshempty:before {
4398 | 	content: '\e461'
4399 | }
4400 | 
4401 | .mui-icon-reload:before {
4402 | 	content: '\e462'
4403 | }
4404 | 
4405 | .mui-icon-starhalf:before {
4406 | 	content: '\e463'
4407 | }
4408 | 
4409 | .mui-icon-spinner:before {
4410 | 	content: '\e464'
4411 | }
4412 | 
4413 | .mui-icon-spinner-cycle:before {
4414 | 	content: '\e465'
4415 | }
4416 | 
4417 | .mui-icon-search:before {
4418 | 	content: '\e466'
4419 | }
4420 | 
4421 | .mui-icon-plusempty:before {
4422 | 	content: '\e468'
4423 | }
4424 | 
4425 | .mui-icon-forward:before {
4426 | 	content: '\e470'
4427 | }
4428 | 
4429 | .mui-icon-back:before,
4430 | .mui-icon-left-nav:before {
4431 | 	content: '\e471'
4432 | }
4433 | 
4434 | .mui-icon-checkmarkempty:before {
4435 | 	content: '\e472'
4436 | }
4437 | 
4438 | .mui-icon-home:before {
4439 | 	content: '\e500'
4440 | }
4441 | 
4442 | .mui-icon-navigate:before {
4443 | 	content: '\e501'
4444 | }
4445 | 
4446 | .mui-icon-gear:before {
4447 | 	content: '\e502'
4448 | }
4449 | 
4450 | .mui-icon-paperplane:before {
4451 | 	content: '\e503'
4452 | }
4453 | 
4454 | .mui-icon-info:before {
4455 | 	content: '\e504'
4456 | }
4457 | 
4458 | .mui-icon-help:before {
4459 | 	content: '\e505'
4460 | }
4461 | 
4462 | .mui-icon-locked:before {
4463 | 	content: '\e506'
4464 | }
4465 | 
4466 | .mui-icon-more:before {
4467 | 	content: '\e507'
4468 | }
4469 | 
4470 | .mui-icon-flag:before {
4471 | 	content: '\e508'
4472 | }
4473 | 
4474 | .mui-icon-home-filled:before {
4475 | 	content: '\e530'
4476 | }
4477 | 
4478 | .mui-icon-gear-filled:before {
4479 | 	content: '\e532'
4480 | }
4481 | 
4482 | .mui-icon-info-filled:before {
4483 | 	content: '\e534'
4484 | }
4485 | 
4486 | .mui-icon-help-filled:before {
4487 | 	content: '\e535'
4488 | }
4489 | 
4490 | .mui-icon-more-filled:before {
4491 | 	content: '\e537'
4492 | }
4493 | 
4494 | .mui-icon-settings:before {
4495 | 	content: '\e560'
4496 | }
4497 | 
4498 | .mui-icon-list:before {
4499 | 	content: '\e562'
4500 | }
4501 | 
4502 | .mui-icon-bars:before {
4503 | 	content: '\e563'
4504 | }
4505 | 
4506 | .mui-icon-loop:before {
4507 | 	content: '\e565'
4508 | }
4509 | 
4510 | .mui-icon-paperclip:before {
4511 | 	content: '\e567'
4512 | }
4513 | 
4514 | .mui-icon-eye:before {
4515 | 	content: '\e568'
4516 | }
4517 | 
4518 | .mui-icon-arrowup:before {
4519 | 	content: '\e580'
4520 | }
4521 | 
4522 | .mui-icon-arrowdown:before {
4523 | 	content: '\e581'
4524 | }
4525 | 
4526 | .mui-icon-arrowleft:before {
4527 | 	content: '\e582'
4528 | }
4529 | 
4530 | .mui-icon-arrowright:before {
4531 | 	content: '\e583'
4532 | }
4533 | 
4534 | .mui-icon-arrowthinup:before {
4535 | 	content: '\e584'
4536 | }
4537 | 
4538 | .mui-icon-arrowthindown:before {
4539 | 	content: '\e585'
4540 | }
4541 | 
4542 | .mui-icon-arrowthinleft:before {
4543 | 	content: '\e586'
4544 | }
4545 | 
4546 | .mui-icon-arrowthinright:before {
4547 | 	content: '\e587'
4548 | }
4549 | 
4550 | .mui-icon-pulldown:before {
4551 | 	content: '\e588'
4552 | }
4553 | 
4554 | .mui-fullscreen {
4555 | 	position: absolute;
4556 | 	top: 0;
4557 | 	right: 0;
4558 | 	bottom: 0;
4559 | 	left: 0
4560 | }
4561 | 
4562 | .mui-fullscreen.mui-slider .mui-slider-group {
4563 | 	height: 100%
4564 | }
4565 | 
4566 | .mui-fullscreen .mui-segmented-control~.mui-slider-group {
4567 | 	position: absolute;
4568 | 	top: 40px;
4569 | 	bottom: 0;
4570 | 	width: 100%;
4571 | 	height: auto
4572 | }
4573 | 
4574 | .mui-fullscreen.mui-slider .mui-slider-item>a {
4575 | 	top: 50%;
4576 | 	-webkit-transform: translateY(-50%);
4577 | 	transform: translateY(-50%)
4578 | }
4579 | 
4580 | .mui-fullscreen .mui-off-canvas-wrap .mui-slider-item>a {
4581 | 	top: auto;
4582 | 	-webkit-transform: none;
4583 | 	transform: none
4584 | }
4585 | 
4586 | .mui-bar-nav~.mui-content .mui-slider.mui-fullscreen {
4587 | 	top: 44px
4588 | }
4589 | 
4590 | .mui-bar-tab~.mui-content .mui-slider.mui-fullscreen .mui-segmented-control~.mui-slider-group {
4591 | 	bottom: 50px
4592 | }
4593 | 
4594 | .mui-android.mui-android-4-0 input:focus,
4595 | .mui-android.mui-android-4-0 textarea:focus {
4596 | 	-webkit-user-modify: inherit
4597 | }
4598 | 
4599 | .mui-android.mui-android-4-2 input,
4600 | .mui-android.mui-android-4-2 textarea,
4601 | .mui-android.mui-android-4-3 input,
4602 | .mui-android.mui-android-4-3 textarea {
4603 | 	-webkit-user-select: text
4604 | }
4605 | 
4606 | .mui-ios .mui-table-view-cell {
4607 | 	-webkit-transform-style: preserve-3d;
4608 | 	transform-style: preserve-3d
4609 | }
4610 | 
4611 | .mui-plus-visible,
4612 | .mui-wechat-visible {
4613 | 	display: none!important
4614 | }
4615 | 
4616 | .mui-plus-hidden,
4617 | .mui-wechat-hidden {
4618 | 	display: block!important
4619 | }
4620 | 
4621 | .mui-tab-item.mui-plus-hidden,
4622 | .mui-tab-item.mui-wechat-hidden {
4623 | 	display: table-cell!important
4624 | }
4625 | 
4626 | .mui-plus .mui-plus-visible,
4627 | .mui-wechat .mui-wechat-visible {
4628 | 	display: block!important
4629 | }
4630 | 
4631 | .mui-plus .mui-tab-item.mui-plus-visible,
4632 | .mui-wechat .mui-tab-item.mui-wechat-visible {
4633 | 	display: table-cell!important
4634 | }
4635 | 
4636 | .mui-plus .mui-plus-hidden,
4637 | .mui-wechat .mui-wechat-hidden {
4638 | 	display: none!important
4639 | }
4640 | 
4641 | .mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav {
4642 | 	height: 64px;
4643 | 	padding-top: 20px
4644 | }
4645 | 
4646 | .mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav~.mui-content {
4647 | 	padding-top: 64px
4648 | }
4649 | 
4650 | .mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary,
4651 | .mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav~.mui-content .mui-pull-top-pocket {
4652 | 	top: 64px
4653 | }
4654 | 
4655 | .mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary~.mui-content {
4656 | 	padding-top: 94px
4657 | }
4658 | 
4659 | .mui-iframe-wrapper {
4660 | 	position: absolute;
4661 | 	right: 0;
4662 | 	left: 0;
4663 | 	-webkit-overflow-scrolling: touch
4664 | }
4665 | 
4666 | .mui-iframe-wrapper iframe {
4667 | 	width: 100%;
4668 | 	height: 100%;
4669 | 	border: 0
4670 | }


--------------------------------------------------------------------------------
/fonts/mui.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/fonts/mui.ttf


--------------------------------------------------------------------------------
/html/info.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | 	<head>
  5 | 		<meta charset="utf-8">
  6 | 		<title>Hello MUI</title>
  7 | 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8 | 		<meta name="apple-mobile-web-app-capable" content="yes">
  9 | 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 10 | 
 11 | 		<!--标准mui.css-->
 12 | 		<link rel="stylesheet" href="../css/mui.min.css">
 13 | 		<link rel="stylesheet" href="../css/mine.css">
 14 | 		<!--App自定义的css-->
 15 | 		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
 16 | 		<style>
 17 | 			p {
 18 | 				text-indent: 22px;
 19 | 				padding: 5px 8px;
 20 | 			}
 21 | 			
 22 | 			html,
 23 | 			body,
 24 | 			.mui-content {
 25 | 				background-color: #fff;
 26 | 			}
 27 | 			
 28 | 			h4 {
 29 | 				margin-left: 5px;
 30 | 			}
 31 | 			
 32 | 			.qrcode {
 33 | 				/*position: absolute;*/
 34 | 				top: 50px;
 35 | 				/*left: 50%;*/
 36 | 				width: 100%;
 37 | 				/*-webkit-transform: translate(-50%, 0);
 38 | 				transform: translate(-50%, 0);*/
 39 | 				text-align: center;
 40 | 			}
 41 | 			
 42 | 			.qrcode img {
 43 | 				margin: 0 auto;
 44 | 			}
 45 | 		</style>
 46 | 	</head>
 47 | 
 48 | 	<body>
 49 | 		<header class="mui-bar mui-bar-nav toolbar-bg">
 50 | 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
 51 | 			<h1 id="title" class="mui-title text-white">关于</h1>
 52 | 		</header>
 53 | 		<div class="mui-content">
 54 | 			<div class="mui-content-padded">
 55 | 				<div class="qrcode">
 56 | 					<img id="qrcode" src="../imgs/play.jpg" width="100%" />
 57 | 					<a id="shortcut" style="width: 60%;margin: 15px auto;padding: 5px;" class="mui-hidden mui-btn mui-btn-block mui-btn-red">创建桌面图标</a>
 58 | 				</div>
 59 | 				<!--<h4 style="margin-top:10px;">mui</h4>-->
 60 | 				<p>此应用是基于mui前端框架开发的的H5类型App，数据来自HongYang的<a href="http://http://www.wanandroid.com/index">WanAdroid</a>及代码家的<a href="https://gank.io/download">干货集中营</a>,再次感谢两位大佬！！
 61 | 					此项目的源码在这个<a href="https://github.com/ZKTian/WanAndroid">ZKT的WanAndroid</a>查看,会持续优化更新......</p>
 62 | 				<p style="text-align: center;color: #ccc;text-indent: 0;"><span id="version">2018.8.5</span></p>
 63 | 			</div>
 64 | 		</div>
 65 | 		<script src="../js/mui.min.js"></script>
 66 | 		<script type="text/javascript" charset="utf-8">
 67 | 			mui.init({
 68 | 				gestureConfig: {
 69 | 					longtap: true
 70 | 				},
 71 | 				swipeBack: true //启用右滑关闭功能
 72 | 			});
 73 | 			//处理点击事件，需要打开原生浏览器
 74 | 			mui('body').on('tap', 'a', function(e) {
 75 | 				var href = this.getAttribute('href');
 76 | 				if(href) {
 77 | 					if(window.plus) {
 78 | 						plus.runtime.openURL(href);
 79 | 					} else {
 80 | 						location.href = href;
 81 | 					}
 82 | 				}
 83 | 			});
 84 | 
 85 | 			var qrcodeEl = document.getElementById("qrcode");
 86 | 			qrcodeEl.addEventListener('longtap', function() {
 87 | 				plus.nativeUI.actionSheet({
 88 | 					cancel: '取消',
 89 | 					buttons: [{
 90 | 						title: '保存到相册'
 91 | 					}]
 92 | 				}, function(e) {
 93 | 					var index = e.index;
 94 | 					if(e.index === 1) {
 95 | 						plus.gallery.save(qrcodeEl.src, function() {
 96 | 							mui.toast('保存成功');
 97 | 						}, function() {
 98 | 							mui.toast('保存失败，请重试！');
 99 | 						});
100 | 					}
101 | 				});
102 | 			});
103 | 			if(mui.os.android && mui.os.stream) { //创建快捷方式
104 | 				var shortcutElem = document.getElementById("shortcut");
105 | 				shortcutElem.classList.remove('mui-hidden');
106 | 				shortcutElem.addEventListener('tap', function() {
107 | 					plus.navigator.createShortcut({
108 | 						name: "hello-mui",
109 | 						icon: "images/logo.png"
110 | 					});
111 | 				});
112 | 			}
113 | 		</script>
114 | 	</body>
115 | 
116 | </html>


--------------------------------------------------------------------------------
/html/main.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | 	<head>
  5 | 		<meta charset="utf-8">
  6 | 		<title>Hello MUI</title>
  7 | 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8 | 		<meta name="apple-mobile-web-app-capable" content="yes">
  9 | 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 10 | 
 11 | 		<link rel="stylesheet" href="../css/mui.min.css">
 12 | 		<style>
 13 | 			html,
 14 | 			body {
 15 | 				background-color: #efeff4;
 16 | 			}
 17 | 		</style>
 18 | 	</head>
 19 | 
 20 | 	<body>
 21 | 		<nav class="mui-bar mui-bar-tab">
 22 | 			<a id="defaultTab" class="mui-tab-item mui-active" href="tab-main.html">
 23 | 				<span class="mui-icon mui-icon-home"></span>
 24 | 				<span class="mui-tab-label">主页</span>
 25 | 			</a>
 26 | 			<a class="mui-tab-item" href="tab-classify.html">
 27 | 				<span class="mui-icon mui-icon-bars">
 28 | 					<!--<span class="mui-badge">9</span>-->
 29 | 				</span>
 30 | 				<span class="mui-tab-label">分类</span>
 31 | 			</a>
 32 | 			<a class="mui-tab-item" href="tab-mine.html">
 33 | 				<span class="mui-icon mui-icon-person"></span>
 34 | 				<span class="mui-tab-label">我的</span>
 35 | 			</a>
 36 | 		</nav>
 37 | 		<script src="../js/mui.min.js"></script>
 38 | 		<script type="text/javascript" charset="utf-8">
 39 | 			 //mui初始化
 40 | 			mui.init();
 41 | 			var subpages = ['tab-main.html', 'tab-classify.html', 'tab-mine.html'];
 42 | 			var subpage_style = {
 43 | 				top: '0px',
 44 | 				bottom: '51px'
 45 | 			};
 46 | 			
 47 | 			var aniShow = {};
 48 | 			
 49 | 			 //创建子页面，首个选项卡页面显示，其它均隐藏；
 50 | 			mui.plusReady(function() {
 51 | 				var self = plus.webview.currentWebview();
 52 | 				for (var i = 0; i < 4; i++) {
 53 | 					var temp = {};
 54 | 					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
 55 | 					if (i > 0) {
 56 | 						sub.hide();
 57 | 					}else{
 58 | 						temp[subpages[i]] = "true";
 59 | 						mui.extend(aniShow,temp);
 60 | 					}
 61 | 					self.append(sub);
 62 | 				}
 63 | 			});
 64 | 			 //当前激活选项
 65 | 			var activeTab = subpages[0];
 66 | 			 //选项卡点击事件
 67 | 			mui('.mui-bar-tab').on('tap', 'a', function(e) {
 68 | 				var targetTab = this.getAttribute('href');
 69 | 				if (targetTab == activeTab) {
 70 | 					return;
 71 | 				}
 72 | 				//显示目标选项卡
 73 | 				//若为iOS平台或非首次显示，则直接显示
 74 | 				if(mui.os.ios||aniShow[targetTab]){
 75 | 					plus.webview.show(targetTab);
 76 | 				}else{
 77 | 					//否则，使用fade-in动画，且保存变量
 78 | 					var temp = {};
 79 | 					temp[targetTab] = "true";
 80 | 					mui.extend(aniShow,temp);
 81 | 					plus.webview.show(targetTab,"fade-in",300);
 82 | 				}
 83 | 				//隐藏当前;
 84 | 				plus.webview.hide(activeTab);
 85 | 				//更改当前活跃的选项卡
 86 | 				activeTab = targetTab;
 87 | 			});
 88 | 			 //自定义事件，模拟点击“首页选项卡”
 89 | 			document.addEventListener('gohome', function() {
 90 | 				var defaultTab = document.getElementById("defaultTab");
 91 | 				//模拟首页点击
 92 | 				mui.trigger(defaultTab, 'tap');
 93 | 				//切换选项卡高亮
 94 | 				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
 95 | 				if (defaultTab !== current) {
 96 | 					current.classList.remove('mui-active');
 97 | 					defaultTab.classList.add('mui-active');
 98 | 				}
 99 | 			});
100 | 		</script>
101 | 	</body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/html/pagedetail.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="UTF-8">
 5 | 		<title></title>
 6 | 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7 | 		<link href="../css/mui.min.css" rel="stylesheet" />
 8 | 		<link href="../css/mine.css" rel="stylesheet" />
 9 | 	</head>
10 | 
11 | 	<body>
12 | 		<header class="mui-bar mui-bar-nav  toolbar-bg">
13 | 			<h1 id="title" class="mui-title text-white"></h1>
14 | 			<a class="mui-action-back mui-icon mui-icon-back mui-pull-left text-white" onclick="openSearch()"></a>
15 | 		</header>
16 | 		<script src="../js/mui.min.js"></script>
17 | 		<script type="text/javascript">
18 | 			mui.plusReady(function() {
19 | 				var self = plus.webview.currentWebview();
20 | 			 mui.init({  
21 |                 subpages: [{
22 |                     url: self.url,
23 |                     id: 'artical.html',
24 |                     styles: {
25 |                         top: '60px',
26 |                         bottom: '0px',
27 |                     }
28 |                 }]
29 |             });
30 |             document.getElementById('title').innerText=self.title;
31 | 			});
32 | 			
33 | 			
34 | 		</script>
35 | 	</body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/html/search.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | 	<head>
  5 | 		<meta charset="UTF-8">
  6 | 		<title></title>
  7 | 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8 | 		<link href="../css/mui.min.css" rel="stylesheet" />
  9 | 		<link href="../css/mine.css" rel="stylesheet" />
 10 | 		<script src="../js/vue.js"></script>
 11 | 	</head>
 12 | 
 13 | 	<body>
 14 | 		<div id="content">
 15 | 			<header class="mui-bar mui-bar-nav toolbar-bg">
 16 | 				<a class="mui-action-back mui-icon mui-icon-back mui-pull-left text-white" style="width: 15%;"></a>
 17 | 				<div class="mui-input-row mui-search" style="display: inline-block;width: 85%;height: 40px;">
 18 | 					<input v-model="inputkey" type="search" class="mui-input-clear" placeholder="请输入关键字" style="background: white;border-radius: 20px;height: 30px;">
 19 | 				</div>
 20 | 			</header>
 21 | 			<div class="mui-content white">
 22 | 				<div style="padding: 14px;margin-top: 10px;">
 23 | 					<button :class="{'mui-btn mui-btn-primary':true,'mui-btn-outlined':item.isActive}" v-for="item of labels" style="margin: 6px;border-radius: 20px;" @click="search(item)">{{item.name}}</button>
 24 | 				</div>
 25 | 
 26 | 				<!--列表-->
 27 | 				<div id="pulltorefresh" class="mui-content mui-scroll-wrapper">
 28 | 					<div class="mui-scroll">
 29 | 						<ul class="mui-table-view">
 30 | 							<li class="mui-table-view-cell" v-for="item of mainlists" @click="openDetail(item)">
 31 | 								<div class="mui-card">
 32 | 									<div class="mui-card-content mui-card-content-inner">
 33 | 										<div class="vertical">
 34 | 											<img src="../imgs/muwu.jpg" class="round_icon mui-pull-left"></img>
 35 | 											<a class="mui-card-link">{{item.author}}</a>
 36 | 											<a class="mui-card-link mui-pull-right">{{item.niceDate}}</a>
 37 | 										</div>
 38 | 										<p class="padding-vertical">{{item.title}}</p>
 39 | 										<div class="vertical">
 40 | 											<a class="mui-card-link">{{item.superChapterName}}</a>
 41 | 											<img src="../imgs/icon_like_y.svg" class="mui-pull-right vertical-img" />
 42 | 											</a>
 43 | 										</div>
 44 | 									</div>
 45 | 							</li>
 46 | 						</ul>
 47 | 						</div>
 48 | 					</div>
 49 | 				</div>
 50 | 			</div>
 51 | 		</div>
 52 | 		<script src="../js/mui.min.js"></script>
 53 | 		<script type="text/javascript">
 54 | 			mui.init({
 55 | 				pullRefresh: {
 56 | 					container: '#pulltorefresh',
 57 | 					up: {
 58 | 						auto: true,
 59 | 						contentrefresh: '正在加载...',
 60 | 						callback: pullupRefresh
 61 | 					}
 62 | 				}
 63 | 			});
 64 | 
 65 | 			var count = 0;
 66 | 
 67 | 			function pullupRefresh() {
 68 | 				if(count > 0) {
 69 | 					getListData(vue.keyword);
 70 | 				}
 71 | 			}
 72 | 
 73 | 			function getListData(keyword) {
 74 | 				setTimeout(function() {
 75 | 					mui.post('http://www.wanandroid.com/article/query/' + count + '/json', {
 76 | 						k: keyword
 77 | 					}, function(data) {
 78 | 						if(data.errorCode == 0) {
 79 | 							if(count == 0) {
 80 | 								vue.mainlists = [];
 81 | 							}
 82 | 							vue.mainlists = vue.mainlists.concat(data.data.datas);
 83 | 							if(data.data.datas.length == 0) {
 84 | 								mui('#pulltorefresh').pullRefresh().disablePullupToRefresh();
 85 | 							} else {
 86 | 								mui('#pulltorefresh').pullRefresh().enablePullupToRefresh();
 87 | 							}
 88 | 							mui('#pulltorefresh').pullRefresh().endPullupToRefresh();
 89 | 							count++;
 90 | 						}
 91 | 					}, 'json');
 92 | 				}, 10);
 93 | 			}
 94 | 
 95 | 			mui.get('http://www.wanandroid.com/hotkey/json', {}, function(data) {
 96 | 				if(data.errorCode == 0) {
 97 | 					vue.labels = data.data;
 98 | 					for(var i = 0; i < vue.labels.length; i++) {
 99 | 						vue.labels[i].isActive = true;
100 | 					}
101 | 					getListData();
102 | 				}
103 | 			}, 'json');
104 | 
105 | 			var vue = new Vue({
106 | 				el: '#content',
107 | 				data: {
108 | 					labels: [],
109 | 					mainlists: [],
110 | 					keyword: '',
111 | 					inputkey: ''
112 | 				},
113 | 				methods: {
114 | 					openDetail: function(item) {
115 | 						mui.openWindow({
116 | 							url: 'pagedetail.html',
117 | 							id: 'newwindow',
118 | 							extras: {
119 | 								url: item.link,
120 | 								title:item.title
121 | 							}
122 | 						});
123 | 					},
124 | 					search: function(item) {
125 | 						count = 0;
126 | 						for(var i = 0; i < this.labels.length; i++) {
127 | 							this.labels[i].isActive = true;
128 | 						}
129 | 						item.isActive = !item.isActive;
130 | 						this.keyword = item.name;
131 | 						getListData(item.name);
132 | 					}
133 | 				},
134 | 				watch: {
135 | 					inputkey: function() {
136 | 						count = 0;
137 | 						this.keyword = this.inputkey;
138 | 						getListData(this.inputkey);
139 | 					}
140 | 				}
141 | 			});
142 | 		</script>
143 | 	</body>
144 | 
145 | </html>


--------------------------------------------------------------------------------
/html/tab-classify.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | 	<head>
  5 | 		<meta charset="utf-8">
  6 | 		<title>mui选项卡切换和下拉刷新加载数据列表代码</title>
  7 | 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8 | 		<meta name="apple-mobile-web-app-capable" content="yes">
  9 | 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 10 | 		<link rel="stylesheet" href="../css/mui.min.css">
 11 | 		<link rel="stylesheet" href="../css/mine.css" />
 12 | 		<script src="../js/mui.min.js"></script>
 13 | 		<script src="../js/mui.pullToRefresh.js"></script>
 14 | 		<script src="../js/mui.pullToRefresh.material.js"></script>
 15 | 		<script src="../js/handlebars-v4.0.11.js"></script>
 16 | 	</head>
 17 | 
 18 | 	<body>
 19 | 		<header class="mui-bar mui-bar-nav toolbar-bg">
 20 | 			<h1 id="title" class="mui-title text-white">分类</h1>
 21 | 			<a class="mui-action-menu mui-icon mui-icon-search mui-pull-right text-white" onclick="openSearch()"></a>
 22 | 		</header>
 23 | 		<div class="mui-content" id="content">
 24 | 			<div id="slider" class="mui-slider mui-fullscreen" style="padding-top: 20px;">
 25 | 				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
 26 | 					<div id="tabs" class="mui-scroll">
 27 | 						<!--tabs菜单-->
 28 | 					</div>
 29 | 				</div>
 30 | 				<div id="pages" class="mui-slider-group">
 31 | 					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
 32 | 						<div class="mui-scroll-wrapper">
 33 | 							<div class="mui-scroll">
 34 | 								<ul class="mui-table-view">
 35 | 								</ul>
 36 | 							</div>
 37 | 						</div>
 38 | 					</div>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<script id="tab" type="text/x-handlebars-template">
 43 | 			{{#each this}}
 44 | 			<a class="mui-control-item {{#isFirst  @index}} mui-active{{/isFirst}}" href="#{{this.id}}">
 45 | 				{{this.name}}
 46 | 			</a>
 47 | 			{{/each}}
 48 | 		</script>
 49 | 
 50 | 		<script id="page" type="text/x-handlebars-template">
 51 | 			{{#each this}}
 52 | 			<div id="{{this.id}}" class="mui-slider-item mui-control-content {{#isFirst @index}}mui-active{{/isFirst}} margin-top-10">
 53 | 				<div class="mui-scroll-wrapper">
 54 | 					<div class="mui-scroll">
 55 | 						<ul class="mui-table-view">
 56 | 						</ul>
 57 | 					</div>
 58 | 				</div>
 59 | 			</div>
 60 | 			{{/each}}
 61 | 		</script>
 62 | 
 63 | 		<script id="listview" type="text/x-handlebars-template">
 64 | 			{{#each this}}
 65 | 			<li class="mui-table-view-cell" onclick="openDetail(this)" data-url='{{this.link}}'  data-title='{{this.title}}'>
 66 | 				<div class="mui-card">
 67 | 					<div class="mui-card-content mui-card-content-inner">
 68 | 						<div class="vertical">
 69 | 							<img src="../imgs/muwu.jpg" class="round_icon mui-pull-left" style="width: 20px;height: 20px;"></img>
 70 | 							<a class="mui-card-link">{{this.author}}</a>
 71 | 							<a class="mui-card-link mui-pull-right">{{this.niceDate}}</a>
 72 | 						</div>
 73 | 						<p class="padding-vertical">{{this.title}}</p>
 74 | 						<div class="vertical" style="width: 100%;height: 20px;line-height: 20px;">
 75 | 							<a class="mui-card-link">{{this.superChapterName}}</a>
 76 | 							<img src="../imgs/icon_like_y.svg" class="mui-pull-right vertical-img" style="width: 20px;height: 20px;" />
 77 | 						</div>
 78 | 					</div>
 79 | 			</li>
 80 | 			{{/each}}
 81 | 		</script>
 82 | 
 83 | 		<script>
 84 | 			mui.init();
 85 | 			Handlebars.registerHelper('isFirst', function(value, options) {
 86 | 				if(value == 0) {
 87 | 					return options.fn(this);
 88 | 				} else {
 89 | 					return options.inverse(this);
 90 | 				}
 91 | 
 92 | 			});
 93 | 
 94 | 			var txlist; //知识体系
 95 | 			var index = 0; //具体知识体系的index
 96 | 			var smallindex = new Array(); //具体知识体系的下知识点的index
 97 | 			var pageNums = new Array(); //具体知识体列表页数数组
 98 | 			var noDatas = new Array(); //无更多数据
 99 | 			var hasInits = new Array(); //页面是否已经初始化
100 | 
101 | 			mui.get('http://www.wanandroid.com/tree/json', {}, function(data) {
102 | 				if(data.errorCode == 0) {
103 | 					txlist = data.data;
104 | 
105 | 					//渲染tabs
106 | 					var t = document.getElementById('tab').innerHTML;
107 | 					var f = Handlebars.compile(t);
108 | 					var h = f(data.data);
109 | 					document.getElementById('tabs').innerHTML = h;
110 | 					//渲染tabs对应的页面
111 | 					var t1 = document.getElementById('page').innerHTML;
112 | 					var f1 = Handlebars.compile(t1);
113 | 					var h1 = f1(data.data);
114 | 					document.getElementById('pages').innerHTML = h1;
115 | 					
116 | 					//渲染tabs对应的页面
117 | 					initPages();
118 | 				}
119 | 			}, 'json');
120 | 
121 | 			function initPages() {
122 | 				setTimeout(function() {
123 | 					(function($) {
124 | 						//阻尼系数
125 | 						var deceleration = mui.os.ios ? 0.003 : 0.0009;
126 | 						$('.mui-scroll-wrapper').scroll({
127 | 							bounce: false,
128 | 							indicators: true, //是否显示滚动条
129 | 							deceleration: deceleration
130 | 						});
131 | 						$.ready(function() {
132 | 							//循环初始化所有下拉刷新，上拉加载。
133 | 							$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
134 | 
135 | 								pageNums.push(0);
136 | 								noDatas.push(false);
137 | 								smallindex.push(0);
138 | 								hasInits.push(false);
139 | 
140 | 								$(pullRefreshEl).pullToRefresh({
141 | 									up: {
142 | 										callback: function() {
143 | 											var self = this;
144 | 											setTimeout(function() {
145 | 												var ul = self.element.querySelector('.mui-table-view');
146 | 												getData((txlist[index].children)[smallindex[index]].id, self);
147 | 												self.endPullUpToRefresh(noDatas[index]);
148 | 											}, 1000);
149 | 										}
150 | 									}
151 | 								});
152 | 							});
153 | 						});
154 | 					})(mui);
155 | 
156 | 					getData((txlist[index].children)[smallindex[index]].id);
157 | 					pageNums[index] = pageNums[index] + 1; //第一页第一次上拉pageNum应为1
158 | 					hasInits[0] = true;
159 | 
160 | 				}, 1000);
161 | 			}
162 | 
163 | 			document.getElementById('slider').addEventListener('slide', function(e) {
164 | 				index = e.detail.slideNumber;
165 | 				if(hasInits[index] === false) {
166 | 					getData((txlist[index].children)[smallindex[index]].id, false);
167 | 					hasInits[index] = true;
168 | 				}
169 | 			});
170 | 
171 | 			function getData(id, lv) {
172 | 				mui.get('http://www.wanandroid.com/article/list/' + pageNums[index] + '/json?cid=' + id, {}, function(data) {
173 | 					if(data.errorCode == 0) {
174 | 						if(data.data.datas.length == 0) {
175 | 							if((txlist[index].children.length - 1) > smallindex[index]) {
176 | 								smallindex[index] = smallindex[index] + 1;
177 | 								pageNums[index] = 0;
178 | 								getData((txlist[index].children)[smallindex[index]].id, true);
179 | 							} else {
180 | 								noDatas[index] = true;
181 | 								lv.endPullUpToRefresh(true);
182 | 							}
183 | 						} else {
184 | 							//渲染tabs
185 | 							var t = document.getElementById('listview').innerHTML;
186 | 							var f = Handlebars.compile(t);
187 | 							var h = f(data.data.datas);
188 | 							var self = document.querySelector('.mui-slider-group .mui-active .mui-scroll .mui-table-view');
189 | 							self.innerHTML = self.innerHTML + h;
190 | 							pageNums[index]++;
191 | 						}
192 | 					}
193 | 				}, 'json');
194 | 			}
195 | 
196 | 			function openDetail(item) {
197 | 				mui.openWindow({
198 | 					url: 'pagedetail.html',
199 | 					id: 'zstxdetail',
200 | 					extras: {
201 | 						url: item.getAttribute("data-url"),
202 | 						title:item.getAttribute("data-title")
203 | 					}
204 | 				});
205 | 			}
206 | 
207 | 			function openSearch() {
208 | 				mui.openWindow({
209 | 					url: 'search.html',
210 | 					id: 'search',
211 | 				});
212 | 			}
213 | 		</script>
214 | 
215 | 	</body>
216 | 
217 | </html>


--------------------------------------------------------------------------------
/html/tab-main.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | 	<head>
  5 | 		<meta charset="utf-8">
  6 | 		<title>Hello MUI</title>
  7 | 		<meta name="referrer" content="no-referrer">
  8 | 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  9 | 		<meta name="apple-mobile-web-app-capable" content="yes">
 10 | 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 11 | 		<script src="../js/mui.min.js"></script>
 12 | 		<script src="../js/vue.js"></script>
 13 | 		<link rel="stylesheet" href="../css/mui.min.css">
 14 | 		<link rel="stylesheet" href="../css/mine.css" />
 15 | 		<style>
 16 | 		</style>
 17 | 	</head>
 18 | 
 19 | 	<body>
 20 | 		<header class="mui-bar mui-bar-nav  toolbar-bg">
 21 | 			<h1 id="title" class="mui-title text-white">首页</h1>
 22 | 			<a class="mui-action-menu mui-icon mui-icon-search mui-pull-right text-white" onclick="openSearch()"></a>
 23 | 		</header>
 24 | 		<div class="mui-content white" >
 25 | 			<!--轮播-->
 26 | 			<div id="slider" class="mui-slider  banner ">
 27 | 				<div id="banner" class="mui-slider-group mui-slider-loop">
 28 | 				</div>
 29 | 				<div id="indicators" class="mui-slider-indicator ">
 30 | 				</div>
 31 | 			</div>
 32 | 			<!--列表-->
 33 | 			<div id="pulltorefresh" class="mui-content mui-scroll-wrapper">
 34 | 				<div class="mui-scroll">
 35 | 					<ul class="mui-table-view">
 36 | 						<li class="mui-table-view-cell" v-for="item of mainlists" @click="openDetail(item)">
 37 | 							<div class="mui-card">
 38 | 								<div class="mui-card-content mui-card-content-inner">
 39 | 									<div class="vertical">
 40 | 										<img src="../imgs/muwu.jpg" class="round_icon mui-pull-left"></img>
 41 | 										<a class="mui-card-link">{{item.author}}</a>
 42 | 										<a class="mui-card-link mui-pull-right">{{item.niceDate}}</a>
 43 | 									</div>
 44 | 									<p class="padding-vertical">{{item.title}}</p>
 45 | 									<div class="vertical">
 46 | 										<a class="mui-card-link">{{item.superChapterName}}</a>
 47 | 										<img src="../imgs/icon_like_y.svg" class="mui-pull-right vertical-img" />
 48 | 									</div>
 49 | 								</div>
 50 | 						</li>
 51 | 					</ul>
 52 | 					</div>
 53 | 				</div>
 54 | 			</div>
 55 | 	</body>
 56 | 	<script>
 57 | 		mui.init({
 58 | 			pullRefresh: {
 59 | 				container: '#pulltorefresh',
 60 | 				down: {
 61 | 					style: 'circle',
 62 | 					callback: pulldownRefresh
 63 | 				},
 64 | 				up: {
 65 | 					auto: true,
 66 | 					contentrefresh: '正在加载...',
 67 | 					callback: pullupRefresh
 68 | 				}
 69 | 			}
 70 | 		});
 71 | 
 72 | 		var count = 0;
 73 | 
 74 | 		function pulldownRefresh() {
 75 | 			count = 0;
 76 | 			getListData(false);
 77 | 		}
 78 | 
 79 | 		function pullupRefresh() {
 80 | 			getListData(true);
 81 | 		}
 82 | 
 83 | 		function getListData(isUp) {
 84 | 			setTimeout(function() {
 85 | 				mui.get('http://www.wanandroid.com/article/list/' + count + '/json', {}, function(data) {
 86 | 					if(data.errorCode == 0) {
 87 | 						if(isUp) {
 88 | 							vue.mainlists = vue.mainlists.concat(data.data.datas);
 89 | 							mui('#pulltorefresh').pullRefresh().endPullupToRefresh();
 90 | 						} else {
 91 | 							vue.mainlists = data.data.datas;
 92 | 							mui('#pulltorefresh').pullRefresh().endPulldownToRefresh();
 93 | 						}
 94 | 						count++;
 95 | 					}
 96 | 				}, 'json');
 97 | 			}, 10);
 98 | 		}
 99 | 
100 | 		var banners;
101 | 		var s;
102 | 		mui.get('http://www.wanandroid.com/banner/json', {}, function(data) {
103 | 			if(data.errorCode == 0) {
104 | 				banners = data.data;
105 | 				for(var i = 0; i < banners.length + 2; i++) {
106 | 					var div = document.createElement('div');
107 | 					div.setAttribute("id", Math.floor(Math.random() * 100));
108 | 					if(i == 0 || i == banners.length + 1) {
109 | 						div.className = 'mui-slider-item mui-slider-item-duplicate';
110 | 					} else {
111 | 						div.className = 'mui-slider-item';
112 | 					}
113 | 					var a = document.createElement('a');
114 | 					a.setAttribute("href", '#');
115 | 					var img = document.createElement('img');
116 | 					if(i == 0) {
117 | 						img.setAttribute("src", banners[banners.length - 1].imagePath);
118 | 					} else if(i == banners.length + 1) {
119 | 						img.setAttribute("src", banners[0].imagePath);
120 | 					} else {
121 | 						img.setAttribute("src", banners[i - 1].imagePath);
122 | 					}
123 | 					a.appendChild(img);
124 | 					div.appendChild(a);
125 | 					document.getElementById('banner').appendChild(div);
126 | 
127 | 					if(i < banners.length) {
128 | 						var ind = document.createElement('div');
129 | 						ind.className = i == 0 ? 'mui-indicator mui-active' : 'mui-indicator';
130 | 						document.getElementById('indicators').appendChild(ind)
131 | 					}
132 | 					var slider = mui("#slider");
133 | 					slider.slider({
134 | 						interval: 3000
135 | 					});
136 | 				}
137 | 
138 | 			}
139 | 		}, 'json');
140 | 
141 | 		var vue = new Vue({
142 | 			el: '#pulltorefresh',
143 | 			data: {
144 | 				mainlists: []
145 | 			},
146 | 			methods: {
147 | 				openDetail: function(item) {
148 | 					mui.openWindow({
149 | 						url: 'pagedetail.html',
150 | 						id: 'newwindow',
151 | 						extras: {
152 | 							url: item.link,
153 | 							title:item.title
154 | 						}
155 | 					});
156 | 				}
157 | 			}
158 | 		});
159 | 
160 | 		function openSearch() {
161 | 			mui.openWindow({
162 | 				url:'search.html',
163 | 				id: 'search',
164 | 			});
165 | 		}
166 | 	</script>
167 | 
168 | </html>


--------------------------------------------------------------------------------
/html/tab-mine.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | 	<head>
  5 | 		<meta charset="utf-8">
  6 | 		<title>Hello MUI</title>
  7 | 		<meta name="referrer" content="no-referrer">
  8 | 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  9 | 		<meta name="apple-mobile-web-app-capable" content="yes">
 10 | 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 11 | 		<script src="../js/mui.min.js"></script>
 12 | 		<script src="../js/vue.js"></script>
 13 | 		<script src="../js/mui.previewimage.js"></script>
 14 | 		<script src="../js/mui.zoom.js"></script>
 15 | 		<link rel="stylesheet" href="../css/mui.min.css">
 16 | 		<link rel="stylesheet" href="../css/mine.css" />
 17 | 		<style type="text/css">
 18 | 			.mui-preview-image.mui-fullscreen {
 19 | 				position: fixed;
 20 | 				z-index: 20;
 21 | 				background-color: #000;
 22 | 			}
 23 | 			
 24 | 			.mui-preview-header,
 25 | 			.mui-preview-footer {
 26 | 				position: absolute;
 27 | 				width: 100%;
 28 | 				left: 0;
 29 | 				z-index: 10;
 30 | 			}
 31 | 			
 32 | 			.mui-preview-header {
 33 | 				height: 44px;
 34 | 				top: 0;
 35 | 			}
 36 | 			
 37 | 			.mui-preview-footer {
 38 | 				height: 50px;
 39 | 				bottom: 0px;
 40 | 			}
 41 | 			
 42 | 			.mui-preview-header .mui-preview-indicator {
 43 | 				display: block;
 44 | 				line-height: 25px;
 45 | 				color: #fff;
 46 | 				text-align: center;
 47 | 				margin: 15px auto 4;
 48 | 				width: 70px;
 49 | 				background-color: rgba(0, 0, 0, 0.4);
 50 | 				border-radius: 12px;
 51 | 				font-size: 16px;
 52 | 			}
 53 | 			
 54 | 			.mui-preview-image {
 55 | 				display: none;
 56 | 				-webkit-animation-duration: 0.5s;
 57 | 				animation-duration: 0.5s;
 58 | 				-webkit-animation-fill-mode: both;
 59 | 				animation-fill-mode: both;
 60 | 			}
 61 | 			
 62 | 			.mui-preview-image.mui-preview-in {
 63 | 				-webkit-animation-name: fadeIn;
 64 | 				animation-name: fadeIn;
 65 | 			}
 66 | 			
 67 | 			.mui-preview-image.mui-preview-out {
 68 | 				background: none;
 69 | 				-webkit-animation-name: fadeOut;
 70 | 				animation-name: fadeOut;
 71 | 			}
 72 | 			
 73 | 			.mui-preview-image.mui-preview-out .mui-preview-header,
 74 | 			.mui-preview-image.mui-preview-out .mui-preview-footer {
 75 | 				display: none;
 76 | 			}
 77 | 			
 78 | 			.mui-zoom-scroller {
 79 | 				position: absolute;
 80 | 				display: -webkit-box;
 81 | 				display: -webkit-flex;
 82 | 				display: flex;
 83 | 				-webkit-box-align: center;
 84 | 				-webkit-align-items: center;
 85 | 				align-items: center;
 86 | 				-webkit-box-pack: center;
 87 | 				-webkit-justify-content: center;
 88 | 				justify-content: center;
 89 | 				left: 0;
 90 | 				right: 0;
 91 | 				bottom: 0;
 92 | 				top: 0;
 93 | 				width: 100%;
 94 | 				height: 100%;
 95 | 				margin: 0;
 96 | 				-webkit-backface-visibility: hidden;
 97 | 			}
 98 | 			
 99 | 			.mui-zoom {
100 | 				-webkit-transform-style: preserve-3d;
101 | 				transform-style: preserve-3d;
102 | 			}
103 | 			
104 | 			.mui-slider .mui-slider-group .mui-slider-item img {
105 | 				width: auto;
106 | 				height: auto;
107 | 				max-width: 100%;
108 | 				max-height: 100%;
109 | 			}
110 | 			
111 | 			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
112 | 				width: 100%;
113 | 			}
114 | 			
115 | 			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
116 | 				display: inline-table;
117 | 			}
118 | 			
119 | 			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
120 | 				display: table-cell;
121 | 				vertical-align: middle;
122 | 			}
123 | 			
124 | 			.mui-preview-loading {
125 | 				position: absolute;
126 | 				width: 100%;
127 | 				height: 100%;
128 | 				top: 0;
129 | 				left: 0;
130 | 				display: none;
131 | 			}
132 | 			
133 | 			.mui-preview-loading.mui-active {
134 | 				display: block;
135 | 			}
136 | 			
137 | 			.mui-preview-loading .mui-spinner-white {
138 | 				position: absolute;
139 | 				top: 50%;
140 | 				left: 50%;
141 | 				margin-left: -25px;
142 | 				margin-top: -25px;
143 | 				height: 50px;
144 | 				width: 50px;
145 | 			}
146 | 			
147 | 			.mui-preview-image img.mui-transitioning {
148 | 				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
149 | 				transition: transform 0.5s ease, opacity 0.5s ease;
150 | 			}
151 | 			
152 | 			@-webkit-keyframes fadeIn {
153 | 				0% {
154 | 					opacity: 0;
155 | 				}
156 | 				100% {
157 | 					opacity: 1;
158 | 				}
159 | 			}
160 | 			
161 | 			@keyframes fadeIn {
162 | 				0% {
163 | 					opacity: 0;
164 | 				}
165 | 				100% {
166 | 					opacity: 1;
167 | 				}
168 | 			}
169 | 			
170 | 			@-webkit-keyframes fadeOut {
171 | 				0% {
172 | 					opacity: 1;
173 | 				}
174 | 				100% {
175 | 					opacity: 0;
176 | 				}
177 | 			}
178 | 			
179 | 			@keyframes fadeOut {
180 | 				0% {
181 | 					opacity: 1;
182 | 				}
183 | 				100% {
184 | 					opacity: 0;
185 | 				}
186 | 			}
187 | 			
188 | 			p img {
189 | 				max-width: 100%;
190 | 				height: auto;
191 | 			}
192 | 		</style>
193 | 
194 | 	</head>
195 | 
196 | 	<body>
197 | 		<header class="mui-bar mui-bar-nav toolbar-bg">
198 | 			<h1 id="title" class="mui-title text-white">福利</h1>
199 | 			<a class="mui-action-menu mui-icon mui-icon-help mui-pull-right text-white" onclick="openAbout()"></a>
200 | 		</header>
201 | 		<div class="mui-content">
202 | 			<!--列表-->
203 | 			<div id="pulltorefresh" class="mui-content mui-scroll-wrapper">
204 | 				<div class="mui-scroll">
205 | 					<ul id="listview" class="mui-table-view mui-grid-view">
206 | 					</ul>
207 | 				</div>
208 | 			</div>
209 | 		</div>
210 | 	</body>
211 | 	<script>
212 | 		mui.init({
213 | 			pullRefresh: {
214 | 				container: '#pulltorefresh',
215 | 				down: {
216 | 					style: 'circle',
217 | 					callback: pulldownRefresh
218 | 				},
219 | 				up: {
220 | 					auto: true,
221 | 					contentrefresh: '正在加载...',
222 | 					callback: pullupRefresh
223 | 				}
224 | 			}
225 | 		});
226 | 
227 | 		mui.previewImage();
228 | 
229 | 		var count = 1;
230 | 
231 | 		function pulldownRefresh() {
232 | 			count = 1;
233 | 			getListData(false);
234 | 		}
235 | 
236 | 		function pullupRefresh() {
237 | 			getListData(true);
238 | 		}
239 | 
240 | 		function getListData(isUp) {
241 | 			setTimeout(function() {
242 | 				mui.get('http://gank.io/api/data/福利/10/' + count, {}, function(data) {
243 | 					if(!data.error) {
244 | 						if(isUp) {
245 | 							addData(data.results);
246 | 							mui('#pulltorefresh').pullRefresh().endPullupToRefresh();
247 | 						} else {
248 | 							addData(data.results);
249 | 							mui('#pulltorefresh').pullRefresh().endPulldownToRefresh();
250 | 						}
251 | 						count++;
252 | 					}
253 | 				}, 'json');
254 | 			}, 100);
255 | 		}
256 | 
257 | 		function addData(data,isUp) {
258 | 			for(var i = 0; i < data.length; i++) {
259 | 				var li = document.createElement('li');
260 | 				li.className = 'mui-table-view-cell mui-media ';
261 | 				var a = document.createElement('div');
262 | 				a.className = 'mui-card mui-card-content-inner img-padding';
263 | 				var img = document.createElement('img');
264 | 				img.className = 'mui-media-objec';
265 | 				img.setAttribute("src", data[i].url);
266 | 				img.setAttribute('data-preview-src', '')
267 | 				img.setAttribute('data-preview-group', '1')
268 | 				img.style.width = '100%';
269 | 				img.style.height = '30%';
270 | 
271 |                 var footer=document.createElement('div');
272 |                 footer.style.paddingLeft='10px';
273 |                 footer.style.paddingRight='10px';
274 |                 
275 | 				var text = document.createElement('h5');
276 | 				text.className='mui-pull-left';
277 | 				text.style.paddingLeft='20';
278 | 				text.style.color='#007AFF';
279 | 				text.innerText = data[i].desc;
280 | 				
281 | 				var like = document.createElement('img');
282 | 				like.style.paddingRight='20';
283 | 				like.className = 'mui-pull-right vertical-img';
284 | 				like.setAttribute("src", '../imgs/icon_like_y.svg');
285 | 				
286 | 				footer.appendChild(text);
287 | 				footer.appendChild(like);
288 | 				
289 | 				a.appendChild(img);
290 | 				a.appendChild(footer);
291 | 				li.appendChild(a);
292 | 				document.getElementById('listview').appendChild(li);
293 | 			}
294 | 		}
295 | 		
296 | 		function openAbout(){
297 | 			mui.openWindow({
298 | 				url: 'info.html',
299 | 				id: 'about',
300 | 			});
301 | 		}
302 | 	</script>
303 | 
304 | </html>


--------------------------------------------------------------------------------
/imgs/icon_like_n.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1533182671089" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5944" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.987 911.927c-11.778 0-23.397-3.967-32.717-11.169-6.322-4.887-63.714-49.503-131.443-110.731-90.284-81.62-155.042-152.78-192.476-211.504-16.984-26.669-33.263-53.062-45.803-82.796-14.956-35.462-22.225-70.536-22.225-107.227 0-67.594 24.281-131.373 68.372-179.587 45.312-49.55 105.938-76.838 170.712-76.838 72.511 0 140.648 35.542 185.59 94.887 44.955-59.343 113.097-94.887 185.596-94.887 64.765 0 125.388 27.288 170.701 76.837 44.098 48.219 68.383 111.998 68.383 179.588 0 83.24-39.333 144.955-68.054 190.018-37.422 58.726-102.177 129.888-192.467 211.51-67.731 61.229-125.131 105.847-131.453 110.732C535.378 907.962 523.761 911.927 511.987 911.927zM326.407 182.073c-50.567 0-98.09 21.515-133.814 60.581-35.642 38.975-55.27 90.771-55.27 145.845 0 29.887 5.984 58.605 18.295 87.797 11.03 26.153 26.114 50.57 41.901 75.358 84.647 132.791 303.07 302.387 312.327 309.542 0.781 0.604 1.595 0.73 2.141 0.73 0.545 0 1.36-0.127 2.146-0.734 9.253-7.15 227.699-176.748 312.323-309.545 28.228-44.291 60.22-94.487 60.22-163.148 0-55.07-19.632-106.866-55.279-145.845-35.727-39.065-83.246-60.58-133.805-60.58-67.126 0-129.784 39.45-163.522 102.955-4.338 8.167-12.831 13.271-22.078 13.271-0.001 0-0.002 0-0.003 0-9.248-0.001-17.74-5.107-22.078-13.276C456.194 221.522 393.542 182.073 326.407 182.073z" p-id="5945" fill="#8a8a8a"></path></svg>


--------------------------------------------------------------------------------
/imgs/icon_like_y.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1533182552467" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5766" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M887.260709 232.849232c-96.93575-96.936773-254.116605-96.936773-351.037005 0l-24.7548 24.761963-24.769127-24.761963c-96.93575-96.936773-254.102279-96.936773-351.022679 0-96.950076 96.92654-96.950076 254.084882 0 351.020632l24.755824 24.7548 351.035982 298.873971 351.021655-298.873971 24.77015-24.755824C984.182133 486.934115 984.182133 329.775772 887.260709 232.849232L887.260709 232.849232z" p-id="5767" fill="#1296db"></path></svg>


--------------------------------------------------------------------------------
/imgs/muwu.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/imgs/muwu.jpg


--------------------------------------------------------------------------------
/imgs/play.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/imgs/play.jpg


--------------------------------------------------------------------------------
/js/mui.previewimage.js:
--------------------------------------------------------------------------------
  1 | (function($, window) {
  2 | 
  3 | 	var template = '<div id="{{id}}" class="mui-slider mui-preview-image mui-fullscreen"><div class="mui-preview-header">{{header}}</div><div class="mui-slider-group"></div><div class="mui-preview-footer mui-hidden">{{footer}}</div><div class="mui-preview-loading"><span class="mui-spinner mui-spinner-white"></span></div></div>';
  4 | 	var itemTemplate = '<div class="mui-slider-item mui-zoom-wrapper {{className}}"><div class="mui-zoom-scroller"><img src="{{src}}" data-preview-lazyload="{{lazyload}}" style="{{style}}" class="mui-zoom"></div></div>';
  5 | 	var defaultGroupName = '__DEFAULT';
  6 | 	var div = document.createElement('div');
  7 | 	var imgId = 0;
  8 | 	var PreviewImage = function(options) {
  9 | 		this.options = $.extend(true, {
 10 | 			id: '__MUI_PREVIEWIMAGE',
 11 | 			zoom: true,
 12 | 			header: '<span class="mui-preview-indicator"></span>',
 13 | 			footer: ''
 14 | 		}, options || {});
 15 | 		this.init();
 16 | 		this.initEvent();
 17 | 	};
 18 | 	var proto = PreviewImage.prototype;
 19 | 	proto.init = function() {
 20 | 		var options = this.options;
 21 | 		var el = document.getElementById(this.options.id);
 22 | 		if (!el) {
 23 | 			div.innerHTML = template.replace(/\{\{id\}\}/g, this.options.id).replace('{{header}}', options.header).replace('{{footer}}', options.footer);
 24 | 			document.body.appendChild(div.firstElementChild);
 25 | 			el = document.getElementById(this.options.id);
 26 | 		}
 27 | 
 28 | 		this.element = el;
 29 | 		this.scroller = this.element.querySelector($.classSelector('.slider-group'));
 30 | 		this.indicator = this.element.querySelector($.classSelector('.preview-indicator'));
 31 | 		this.loader = this.element.querySelector($.classSelector('.preview-loading'));
 32 | 		if (options.footer) {
 33 | 			this.element.querySelector($.classSelector('.preview-footer')).classList.remove($.className('hidden'));
 34 | 		}
 35 | 		this.addImages();
 36 | 	};
 37 | 	proto.initEvent = function() {
 38 | 		var self = this;
 39 | 		$(document.body).on('tap', 'img[data-preview-src]', function() {
 40 | 			self.open(this);
 41 | 			return false;
 42 | 		});
 43 | 		var laterClose = null;
 44 | 		var laterCloseEvent = function() {
 45 | 			!laterClose && (laterClose = $.later(function() {
 46 | 				self.loader.removeEventListener('tap', laterCloseEvent);
 47 | 				self.scroller.removeEventListener('tap', laterCloseEvent);
 48 | 				self.close();
 49 | 			}, 300));
 50 | 		};
 51 | 		this.scroller.addEventListener('doubletap', function() {
 52 | 			if (laterClose) {
 53 | 				laterClose.cancel();
 54 | 				laterClose = null;
 55 | 			}
 56 | 		});
 57 | 		this.element.addEventListener('webkitAnimationEnd', function() {
 58 | 			if (self.element.classList.contains($.className('preview-out'))) { //close
 59 | 				self.element.style.display = 'none';
 60 | 				self.element.classList.remove($.className('preview-out'));
 61 | 				self.element.classList.remove($.className('preview-in'));
 62 | 				laterClose = null;
 63 | 			} else { //open
 64 | 				self.loader.addEventListener('tap', laterCloseEvent);
 65 | 				self.scroller.addEventListener('tap', laterCloseEvent);
 66 | 			}
 67 | 		});
 68 | 		this.element.addEventListener('slide', function(e) {
 69 | 			if (self.options.zoom) {
 70 | 				var lastZoomerEl = self.element.querySelector('.mui-zoom-wrapper:nth-child(' + (self.lastIndex + 1) + ')');
 71 | 				if (lastZoomerEl) {
 72 | 					$(lastZoomerEl).zoom().setZoom(1);
 73 | 				}
 74 | 			}
 75 | 			var slideNumber = e.detail.slideNumber;
 76 | 			self.lastIndex = slideNumber;
 77 | 			self.indicator && (self.indicator.innerText = (slideNumber + 1) + '/' + self.currentGroup.length);
 78 | 			self._loadItem(slideNumber);
 79 | 
 80 | 		});
 81 | 	};
 82 | 	proto.addImages = function(group, index) {
 83 | 		this.groups = {};
 84 | 		var imgs = [];
 85 | 		if (group) {
 86 | 			if (group === defaultGroupName) {
 87 | 				imgs = document.querySelectorAll("img[data-preview-src]:not([data-preview-group])");
 88 | 			} else {
 89 | 				imgs = document.querySelectorAll("img[data-preview-src][data-preview-group='" + group + "']");
 90 | 			}
 91 | 		} else {
 92 | 			imgs = document.querySelectorAll("img[data-preview-src]");
 93 | 		}
 94 | 		if (imgs.length) {
 95 | 			for (var i = 0, len = imgs.length; i < len; i++) {
 96 | 				this.addImage(imgs[i]);
 97 | 			}
 98 | 		}
 99 | 	};
100 | 	proto.addImage = function(img) {
101 | 		var group = img.getAttribute('data-preview-group');
102 | 		group = group || defaultGroupName;
103 | 		if (!this.groups[group]) {
104 | 			this.groups[group] = [];
105 | 		}
106 | 		var src = img.getAttribute('src');
107 | 		if (img.__mui_img_data && img.__mui_img_data.src === src) { //已缓存且图片未变化
108 | 			this.groups[group].push(img.__mui_img_data);
109 | 		} else {
110 | 			var lazyload = img.getAttribute('data-preview-src');
111 | 			if (!lazyload) {
112 | 				lazyload = src;
113 | 			}
114 | 			var imgObj = {
115 | 				src: src,
116 | 				lazyload: src === lazyload ? '' : lazyload,
117 | 				loaded: src === lazyload ? true : false,
118 | 				sWidth: 0,
119 | 				sHeight: 0,
120 | 				sTop: 0,
121 | 				sLeft: 0,
122 | 				sScale: 1,
123 | 				el: img
124 | 			};
125 | 			this.groups[group].push(imgObj);
126 | 			img.__mui_img_data = imgObj;
127 | 		}
128 | 	};
129 | 
130 | 
131 | 	proto.empty = function() {
132 | 		this.scroller.innerHTML = '';
133 | 	};
134 | 	proto._initImgData = function(itemData, imgEl) {
135 | 		if (!itemData.sWidth) {
136 | 			var img = itemData.el;
137 | 			itemData.sWidth = img.offsetWidth;
138 | 			itemData.sHeight = img.offsetHeight;
139 | 			var offset = $.offset(img);
140 | 			itemData.sTop = offset.top;
141 | 			itemData.sLeft = offset.left;
142 | 			itemData.sScale = Math.max(itemData.sWidth / window.innerWidth, itemData.sHeight / window.innerHeight);
143 | 		}
144 | 		imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
145 | 	};
146 | 
147 | 	proto._getScale = function(from, to) {
148 | 		var scaleX = from.width / to.width;
149 | 		var scaleY = from.height / to.height;
150 | 		var scale = 1;
151 | 		if (scaleX <= scaleY) {
152 | 			scale = from.height / (to.height * scaleX);
153 | 		} else {
154 | 			scale = from.width / (to.width * scaleY);
155 | 		}
156 | 		return scale;
157 | 	};
158 | 	proto._imgTransitionEnd = function(e) {
159 | 		var img = e.target;
160 | 		img.classList.remove($.className('transitioning'));
161 | 		img.removeEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
162 | 	};
163 | 	proto._loadItem = function(index, isOpening) { //TODO 暂时仅支持img
164 | 		var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
165 | 		var itemData = this.currentGroup[index];
166 | 		var imgEl = itemEl.querySelector('img');
167 | 		this._initImgData(itemData, imgEl);
168 | 		if (isOpening) {
169 | 			var posi = this._getPosition(itemData);
170 | 			imgEl.style.webkitTransitionDuration = '0ms';
171 | 			imgEl.style.webkitTransform = 'translate3d(' + posi.x + 'px,' + posi.y + 'px,0) scale(' + itemData.sScale + ')';
172 | 			imgEl.offsetHeight;
173 | 		}
174 | 		if (!itemData.loaded && imgEl.getAttribute('data-preview-lazyload')) {
175 | 			var self = this;
176 | 			self.loader.classList.add($.className('active'));
177 | 			//移动位置动画
178 | 			imgEl.style.webkitTransitionDuration = '0.5s';
179 | 			imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
180 | 			imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
181 | 			this.loadImage(imgEl, function() {
182 | 				itemData.loaded = true;
183 | 				imgEl.src = itemData.lazyload;
184 | 				self._initZoom(itemEl, this.width, this.height);
185 | 				imgEl.classList.add($.className('transitioning'));
186 | 				imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
187 | 				imgEl.setAttribute('style', '');
188 | 				imgEl.offsetHeight;
189 | 				self.loader.classList.remove($.className('active'));
190 | 			});
191 | 		} else {
192 | 			itemData.lazyload && (imgEl.src = itemData.lazyload);
193 | 			this._initZoom(itemEl, imgEl.width, imgEl.height);
194 | 			imgEl.classList.add($.className('transitioning'));
195 | 			imgEl.addEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
196 | 			imgEl.setAttribute('style', '');
197 | 			imgEl.offsetHeight;
198 | 		}
199 | 		this._preloadItem(index + 1);
200 | 		this._preloadItem(index - 1);
201 | 	};
202 | 	proto._preloadItem = function(index) {
203 | 		var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
204 | 		if (itemEl) {
205 | 			var itemData = this.currentGroup[index];
206 | 			if (!itemData.sWidth) {
207 | 				var imgEl = itemEl.querySelector('img');
208 | 				this._initImgData(itemData, imgEl);
209 | 			}
210 | 		}
211 | 	};
212 | 	proto._initZoom = function(zoomWrapperEl, zoomerWidth, zoomerHeight) {
213 | 		if (!this.options.zoom) {
214 | 			return;
215 | 		}
216 | 		if (zoomWrapperEl.getAttribute('data-zoomer')) {
217 | 			return;
218 | 		}
219 | 		var zoomEl = zoomWrapperEl.querySelector($.classSelector('.zoom'));
220 | 		if (zoomEl.tagName === 'IMG') {
221 | 			var self = this;
222 | 			var maxZoom = self._getScale({
223 | 				width: zoomWrapperEl.offsetWidth,
224 | 				height: zoomWrapperEl.offsetHeight
225 | 			}, {
226 | 				width: zoomerWidth,
227 | 				height: zoomerHeight
228 | 			});
229 | 			$(zoomWrapperEl).zoom({
230 | 				maxZoom: Math.max(maxZoom, 1)
231 | 			});
232 | 		} else {
233 | 			$(zoomWrapperEl).zoom();
234 | 		}
235 | 	};
236 | 	proto.loadImage = function(imgEl, callback) {
237 | 		var onReady = function() {
238 | 			callback && callback.call(this);
239 | 		};
240 | 		var img = new Image();
241 | 		img.onload = onReady;
242 | 		img.onerror = onReady;
243 | 		img.src = imgEl.getAttribute('data-preview-lazyload');
244 | 	};
245 | 	proto.getRangeByIndex = function(index, length) {
246 | 		return {
247 | 			from: 0,
248 | 			to: length - 1
249 | 		};
250 | 		//		var from = Math.max(index - 1, 0);
251 | 		//		var to = Math.min(index + 1, length);
252 | 		//		if (index === length - 1) {
253 | 		//			from = Math.max(length - 3, 0);
254 | 		//			to = length - 1;
255 | 		//		}
256 | 		//		if (index === 0) {
257 | 		//			from = 0;
258 | 		//			to = Math.min(2, length - 1);
259 | 		//		}
260 | 		//		return {
261 | 		//			from: from,
262 | 		//			to: to
263 | 		//		};
264 | 	};
265 | 
266 | 	proto._getPosition = function(itemData) {
267 | 		var sLeft = itemData.sLeft - window.pageXOffset;
268 | 		var sTop = itemData.sTop - window.pageYOffset;
269 | 		var left = (window.innerWidth - itemData.sWidth) / 2;
270 | 		var top = (window.innerHeight - itemData.sHeight) / 2;
271 | 		return {
272 | 			left: sLeft,
273 | 			top: sTop,
274 | 			x: sLeft - left,
275 | 			y: sTop - top
276 | 		};
277 | 	};
278 | 	proto.refresh = function(index, groupArray) {
279 | 		this.currentGroup = groupArray;
280 | 		//重新生成slider
281 | 		var length = groupArray.length;
282 | 		var itemHtml = [];
283 | 		var currentRange = this.getRangeByIndex(index, length);
284 | 		var from = currentRange.from;
285 | 		var to = currentRange.to + 1;
286 | 		var currentIndex = index;
287 | 		var className = '';
288 | 		var itemStr = '';
289 | 		var wWidth = window.innerWidth;
290 | 		var wHeight = window.innerHeight;
291 | 		for (var i = 0; from < to; from++, i++) {
292 | 			var itemData = groupArray[from];
293 | 			var style = '';
294 | 			if (itemData.sWidth) {
295 | 				style = '-webkit-transform:translate3d(0,0,0) scale(' + itemData.sScale + ');transform:translate3d(0,0,0) scale(' + itemData.sScale + ')';
296 | 			}
297 | 			itemStr = itemTemplate.replace('{{src}}', itemData.src).replace('{{lazyload}}', itemData.lazyload).replace('{{style}}', style);
298 | 			if (from === index) {
299 | 				currentIndex = i;
300 | 				className = $.className('active');
301 | 			} else {
302 | 				className = '';
303 | 			}
304 | 			itemHtml.push(itemStr.replace('{{className}}', className));
305 | 		}
306 | 		this.scroller.innerHTML = itemHtml.join('');
307 | 		this.element.style.display = 'block';
308 | 		this.element.classList.add($.className('preview-in'));
309 | 		this.lastIndex = currentIndex;
310 | 		this.element.offsetHeight;
311 | 		$(this.element).slider().gotoItem(currentIndex, 0);
312 | 		this.indicator && (this.indicator.innerText = (currentIndex + 1) + '/' + this.currentGroup.length);
313 | 		this._loadItem(currentIndex, true);
314 | 	};
315 | 	proto.openByGroup = function(index, group) {
316 | 		index = Math.min(Math.max(0, index), this.groups[group].length - 1);
317 | 		this.refresh(index, this.groups[group]);
318 | 	};
319 | 	proto.open = function(index, group) {
320 | 		if (this.isShown()) {
321 | 			return;
322 | 		}
323 | 		if (typeof index === "number") {
324 | 			group = group || defaultGroupName;
325 | 			this.addImages(group, index); //刷新当前group
326 | 			this.openByGroup(index, group);
327 | 		} else {
328 | 			group = index.getAttribute('data-preview-group');
329 | 			group = group || defaultGroupName;
330 | 			this.addImages(group, index); //刷新当前group
331 | 			this.openByGroup(this.groups[group].indexOf(index.__mui_img_data), group);
332 | 		}
333 | 	};
334 | 	proto.close = function(index, group) {
335 | 		if (!this.isShown()) {
336 | 			return;
337 | 		}
338 | 		this.element.classList.remove($.className('preview-in'));
339 | 		this.element.classList.add($.className('preview-out'));
340 | 		var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (this.lastIndex + 1) + ')'));
341 | 		var imgEl = itemEl.querySelector('img');
342 | 		if (imgEl) {
343 | 			imgEl.classList.add($.className('transitioning'));
344 | 			var itemData = this.currentGroup[this.lastIndex];
345 | 			var posi = this._getPosition(itemData);
346 | 			var sLeft = posi.left;
347 | 			var sTop = posi.top;
348 | 			if (sTop > window.innerHeight || sLeft > window.innerWidth || sTop < 0 || sLeft < 0) { //out viewport
349 | 				imgEl.style.opacity = 0;
350 | 				imgEl.style.webkitTransitionDuration = '0.5s';
351 | 				imgEl.style.webkitTransform = 'scale(' + itemData.sScale + ')';
352 | 			} else {
353 | 				if (this.options.zoom) {
354 | 					$(imgEl.parentNode.parentNode).zoom().toggleZoom(0);
355 | 				}
356 | 				imgEl.style.webkitTransitionDuration = '0.5s';
357 | 				imgEl.style.webkitTransform = 'translate3d(' + posi.x + 'px,' + posi.y + 'px,0) scale(' + itemData.sScale + ')';
358 | 			}
359 | 		}
360 | 		var zoomers = this.element.querySelectorAll($.classSelector('.zoom-wrapper'));
361 | 		for (var i = 0, len = zoomers.length; i < len; i++) {
362 | 			$(zoomers[i]).zoom().destroy();
363 | 		}
364 | 		$(this.element).slider().destroy();
365 | //		this.empty();
366 | 	};
367 | 	proto.isShown = function() {
368 | 		return this.element.classList.contains($.className('preview-in'));
369 | 	};
370 | 
371 | 	var previewImageApi = null;
372 | 	$.previewImage = function(options) {
373 | 		if (!previewImageApi) {
374 | 			previewImageApi = new PreviewImage(options);
375 | 		}
376 | 		return previewImageApi;
377 | 	};
378 | 	$.getPreviewImage = function() {
379 | 		return previewImageApi;
380 | 	}
381 | 
382 | })(mui, window);


--------------------------------------------------------------------------------
/js/mui.pullToRefresh.js:
--------------------------------------------------------------------------------
  1 | (function($, window, document) {
  2 | 	var STATE_BEFORECHANGEOFFSET = 'beforeChangeOffset';
  3 | 	var STATE_AFTERCHANGEOFFSET = 'afterChangeOffset';
  4 | 
  5 | 	var EVENT_PULLSTART = 'pullstart';
  6 | 	var EVENT_PULLING = 'pulling';
  7 | 	var EVENT_BEFORECHANGEOFFSET = STATE_BEFORECHANGEOFFSET;
  8 | 	var EVENT_AFTERCHANGEOFFSET = STATE_AFTERCHANGEOFFSET;
  9 | 	var EVENT_DRAGENDAFTERCHANGEOFFSET = 'dragEndAfterChangeOffset';
 10 | 
 11 | 	var CLASS_TRANSITIONING = $.className('transitioning');
 12 | 	var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
 13 | 	var CLASS_PULL_BOTTOM_TIPS = $.className('pull-bottom-tips');
 14 | 	var CLASS_PULL_LOADING = $.className('pull-loading');
 15 | 	var CLASS_SCROLL = $.className('scroll');
 16 | 
 17 | 	var CLASS_PULL_TOP_ARROW = $.className('pull-loading') + ' ' + $.className('icon') + ' ' + $.className('icon-pulldown');
 18 | 	var CLASS_PULL_TOP_ARROW_REVERSE = CLASS_PULL_TOP_ARROW + ' ' + $.className('reverse');
 19 | 	var CLASS_PULL_TOP_SPINNER = $.className('pull-loading') + ' ' + $.className('spinner');
 20 | 	var CLASS_HIDDEN = $.className('hidden');
 21 | 
 22 | 	var SELECTOR_PULL_LOADING = '.' + CLASS_PULL_LOADING;
 23 | 	$.PullToRefresh = $.Class.extend({
 24 | 		init: function(element, options) {
 25 | 			this.element = element;
 26 | 			this.options = $.extend(true, {
 27 | 				down: {
 28 | 					height: 75,
 29 | 					callback: false,
 30 | 				},
 31 | 				up: {
 32 | 					auto: false,
 33 | 					offset: 100, //距离底部高度(到达该高度即触发)
 34 | 					show: true,
 35 | 					contentinit: '上拉显示更多',
 36 | 					contentdown: '上拉显示更多',
 37 | 					contentrefresh: '正在加载...',
 38 | 					contentnomore: '没有更多数据了',
 39 | 					callback: false
 40 | 				},
 41 | 				preventDefaultException: {
 42 | 					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
 43 | 				}
 44 | 			}, options);
 45 | 			this.stopped = this.isNeedRefresh = this.isDragging = false;
 46 | 			this.state = STATE_BEFORECHANGEOFFSET;
 47 | 			this.isInScroll = this.element.classList.contains(CLASS_SCROLL);
 48 | 			this.initPullUpTips();
 49 | 
 50 | 			this.initEvent();
 51 | 		},
 52 | 		_preventDefaultException: function(el, exceptions) {
 53 | 			for (var i in exceptions) {
 54 | 				if (exceptions[i].test(el[i])) {
 55 | 					return true;
 56 | 				}
 57 | 			}
 58 | 			return false;
 59 | 		},
 60 | 		initEvent: function() {
 61 | 			if ($.isFunction(this.options.down.callback)) {
 62 | 				this.element.addEventListener($.EVENT_START, this);
 63 | 				this.element.addEventListener('drag', this);
 64 | 				this.element.addEventListener('dragend', this);
 65 | 			}
 66 | 			if (this.pullUpTips) {
 67 | 				this.element.addEventListener('dragup', this);
 68 | 				if (this.isInScroll) {
 69 | 					this.element.addEventListener('scrollbottom', this);
 70 | 				} else {
 71 | 					window.addEventListener('scroll', this);
 72 | 				}
 73 | 			}
 74 | 		},
 75 | 		handleEvent: function(e) {
 76 | 			switch (e.type) {
 77 | 				case $.EVENT_START:
 78 | 					this.isInScroll && this._canPullDown() && e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 79 | 					break;
 80 | 				case 'drag':
 81 | 					this._drag(e);
 82 | 					break;
 83 | 				case 'dragend':
 84 | 					this._dragend(e);
 85 | 					break;
 86 | 				case 'webkitTransitionEnd':
 87 | 					this._transitionEnd(e);
 88 | 					break;
 89 | 				case 'dragup':
 90 | 				case 'scroll':
 91 | 					this._dragup(e);
 92 | 					break;
 93 | 				case 'scrollbottom':
 94 | 					if (e.target === this.element) {
 95 | 						this.pullUpLoading(e);
 96 | 					}
 97 | 					break;
 98 | 			}
 99 | 		},
100 | 		initPullDownTips: function() {
101 | 			var self = this;
102 | 			if ($.isFunction(self.options.down.callback)) {
103 | 				self.pullDownTips = (function() {
104 | 					var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
105 | 					if (element) {
106 | 						element.parentNode.removeChild(element);
107 | 					}
108 | 					if (!element) {
109 | 						element = document.createElement('div');
110 | 						element.classList.add(CLASS_PULL_TOP_TIPS);
111 | 						element.innerHTML = '<div class="mui-pull-top-wrapper"><span class="mui-pull-loading mui-icon mui-icon-pulldown"></span></div>';
112 | 						element.addEventListener('webkitTransitionEnd', self);
113 | 					}
114 | 					self.pullDownTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
115 | 					document.body.appendChild(element);
116 | 					return element;
117 | 				}());
118 | 			}
119 | 		},
120 | 		initPullUpTips: function() {
121 | 			var self = this;
122 | 			if ($.isFunction(self.options.up.callback)) {
123 | 				self.pullUpTips = (function() {
124 | 					var element = self.element.querySelector('.' + CLASS_PULL_BOTTOM_TIPS);
125 | 					if (!element) {
126 | 						element = document.createElement('div');
127 | 						element.classList.add(CLASS_PULL_BOTTOM_TIPS);
128 | 						if (!self.options.up.show) {
129 | 							element.classList.add(CLASS_HIDDEN);
130 | 						}
131 | 						element.innerHTML = '<div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">' + self.options.up.contentinit + '</span></div>';
132 | 						self.element.appendChild(element);
133 | 					}
134 | 					self.pullUpTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
135 | 					return element;
136 | 				}());
137 | 			}
138 | 		},
139 | 		_transitionEnd: function(e) {
140 | 			if (e.target === this.pullDownTips && this.removing) {
141 | 				this.removePullDownTips();
142 | 			}
143 | 		},
144 | 		_dragup: function(e) {
145 | 			var self = this;
146 | 			if (self.loading) {
147 | 				return;
148 | 			}
149 | 			if (e && e.detail && $.gestures.session.drag) {
150 | 				self.isDraggingUp = true;
151 | 			} else {
152 | 				if (!self.isDraggingUp) { //scroll event
153 | 					return;
154 | 				}
155 | 			}
156 | 			if (!self.isDragging) {
157 | 				if (self._canPullUp()) {
158 | 					self.pullUpLoading(e);
159 | 				}
160 | 			}
161 | 		},
162 | 		_canPullUp: function() {
163 | 			if (this.removing) {
164 | 				return false;
165 | 			}
166 | 			if (this.isInScroll) {
167 | 				var scrollId = this.element.parentNode.getAttribute('data-scroll');
168 | 				if (scrollId) {
169 | 					var scrollApi = $.data[scrollId];
170 | 					return scrollApi.y === scrollApi.maxScrollY;
171 | 				}
172 | 			}
173 | 			return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;
174 | 		},
175 | 		_canPullDown: function() {
176 | 			if (this.removing) {
177 | 				return false;
178 | 			}
179 | 			if (this.isInScroll) {
180 | 				var scrollId = this.element.parentNode.getAttribute('data-scroll');
181 | 				if (scrollId) {
182 | 					var scrollApi = $.data[scrollId];
183 | 					return scrollApi.y === 0;
184 | 				}
185 | 			}
186 | 			return document.body.scrollTop === 0;
187 | 		},
188 | 		_drag: function(e) {
189 | 			if (this.loading || this.stopped) {
190 | 				e.stopPropagation();
191 | 				e.detail.gesture.preventDefault();
192 | 				return;
193 | 			}
194 | 			var detail = e.detail;
195 | 			if (!this.isDragging) {
196 | 				if (detail.direction === 'down' && this._canPullDown()) {
197 | 					if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {
198 | 						e.stopPropagation();
199 | 						e.detail.gesture.preventDefault();
200 | 						return;
201 | 					}
202 | 					this.isDragging = true;
203 | 					this.removing = false;
204 | 					this.startDeltaY = detail.deltaY;
205 | 					$.gestures.session.lockDirection = true; //锁定方向
206 | 					$.gestures.session.startDirection = detail.direction;
207 | 					this._pullStart(this.startDeltaY);
208 | 				}
209 | 			}
210 | 			if (this.isDragging) {
211 | 				e.stopPropagation();
212 | 				e.detail.gesture.preventDefault();
213 | 				var deltaY = detail.deltaY - this.startDeltaY;
214 | 				deltaY = Math.min(deltaY, 1.5 * this.options.down.height);
215 | 				this.deltaY = deltaY;
216 | 				this._pulling(deltaY);
217 | 				var state = deltaY > this.options.down.height ? STATE_AFTERCHANGEOFFSET : STATE_BEFORECHANGEOFFSET;
218 | 				if (this.state !== state) {
219 | 					this.state = state;
220 | 					if (this.state === STATE_AFTERCHANGEOFFSET) {
221 | 						this.removing = false;
222 | 						this.isNeedRefresh = true;
223 | 					} else {
224 | 						this.removing = true;
225 | 						this.isNeedRefresh = false;
226 | 					}
227 | 					this['_' + state](deltaY);
228 | 				}
229 | 				if ($.os.ios && parseFloat($.os.version) >= 8) {
230 | 					var clientY = detail.gesture.touches[0].clientY;
231 | 					if ((clientY + 10) > window.innerHeight || clientY < 10) {
232 | 						this._dragend(e);
233 | 						return;
234 | 					}
235 | 				}
236 | 			}
237 | 		},
238 | 		_dragend: function(e) {
239 | 			var self = this;
240 | 			if (self.isDragging) {
241 | 				self.isDragging = false;
242 | 				self._dragEndAfterChangeOffset(self.isNeedRefresh);
243 | 			}
244 | 			if (self.isPullingUp) {
245 | 				if (self.pullingUpTimeout) {
246 | 					clearTimeout(self.pullingUpTimeout);
247 | 				}
248 | 				self.pullingUpTimeout = setTimeout(function() {
249 | 					self.isPullingUp = false;
250 | 				}, 1000);
251 | 			}
252 | 		},
253 | 		_pullStart: function(startDeltaY) {
254 | 			this.pullStart(startDeltaY);
255 | 			$.trigger(this.element, EVENT_PULLSTART, {
256 | 				api: this,
257 | 				startDeltaY: startDeltaY
258 | 			});
259 | 		},
260 | 		_pulling: function(deltaY) {
261 | 			this.pulling(deltaY);
262 | 			$.trigger(this.element, EVENT_PULLING, {
263 | 				api: this,
264 | 				deltaY: deltaY
265 | 			});
266 | 		},
267 | 		_beforeChangeOffset: function(deltaY) {
268 | 			this.beforeChangeOffset(deltaY);
269 | 			$.trigger(this.element, EVENT_BEFORECHANGEOFFSET, {
270 | 				api: this,
271 | 				deltaY: deltaY
272 | 			});
273 | 		},
274 | 		_afterChangeOffset: function(deltaY) {
275 | 			this.afterChangeOffset(deltaY);
276 | 			$.trigger(this.element, EVENT_AFTERCHANGEOFFSET, {
277 | 				api: this,
278 | 				deltaY: deltaY
279 | 			});
280 | 		},
281 | 		_dragEndAfterChangeOffset: function(isNeedRefresh) {
282 | 			this.dragEndAfterChangeOffset(isNeedRefresh);
283 | 			$.trigger(this.element, EVENT_DRAGENDAFTERCHANGEOFFSET, {
284 | 				api: this,
285 | 				isNeedRefresh: isNeedRefresh
286 | 			});
287 | 		},
288 | 		removePullDownTips: function() {
289 | 			if (this.pullDownTips) {
290 | 				try {
291 | 					this.pullDownTips.parentNode && this.pullDownTips.parentNode.removeChild(this.pullDownTips);
292 | 					this.pullDownTips = null;
293 | 					this.removing = false;
294 | 				} catch (e) {}
295 | 			}
296 | 		},
297 | 		pullStart: function(startDeltaY) {
298 | 			this.initPullDownTips(startDeltaY);
299 | 		},
300 | 		pulling: function(deltaY) {
301 | 			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + deltaY + 'px,0)';
302 | 		},
303 | 		beforeChangeOffset: function(deltaY) {
304 | 			this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
305 | 		},
306 | 		afterChangeOffset: function(deltaY) {
307 | 			this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW_REVERSE;
308 | 		},
309 | 		dragEndAfterChangeOffset: function(isNeedRefresh) {
310 | 			if (isNeedRefresh) {
311 | 				this.pullDownTipsIcon.className = CLASS_PULL_TOP_SPINNER;
312 | 				this.pullDownLoading();
313 | 			} else {
314 | 				this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
315 | 				this.endPullDownToRefresh();
316 | 			}
317 | 		},
318 | 		pullDownLoading: function() {
319 | 			if (this.loading) {
320 | 				return;
321 | 			}
322 | 			if (!this.pullDownTips) {
323 | 				this.initPullDownTips();
324 | 				this.dragEndAfterChangeOffset(true);
325 | 				return;
326 | 			}
327 | 			this.loading = true;
328 | 			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
329 | 			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + this.options.down.height + 'px,0)';
330 | 			this.options.down.callback.apply(this);
331 | 		},
332 | 		pullUpLoading: function(e) {
333 | 			if (this.loading || this.finished) {
334 | 				return;
335 | 			}
336 | 			this.loading = true;
337 | 			this.isDraggingUp = false;
338 | 			this.pullUpTips.classList.remove(CLASS_HIDDEN);
339 | 			e && e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
340 | 			this.pullUpTipsIcon.innerHTML = this.options.up.contentrefresh;
341 | 			this.options.up.callback.apply(this);
342 | 		},
343 | 		endPullDownToRefresh: function() {
344 | 			this.loading = false;
345 | 			this.pullUpTips && this.pullUpTips.classList.remove(CLASS_HIDDEN);
346 | 			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
347 | 			this.pullDownTips.style.webkitTransform = 'translate3d(0,0,0)';
348 | 			if (this.deltaY <= 0) {
349 | 				this.removePullDownTips();
350 | 			} else {
351 | 				this.removing = true;
352 | 			}
353 | 			if (this.isInScroll) {
354 | 				$(this.element.parentNode).scroll().refresh();
355 | 			}
356 | 		},
357 | 		endPullUpToRefresh: function(finished) {
358 | 			if (finished) {
359 | 				this.finished = true;
360 | 				this.pullUpTipsIcon.innerHTML = this.options.up.contentnomore;
361 | 				this.element.removeEventListener('dragup', this);
362 | 				window.removeEventListener('scroll', this);
363 | 			} else {
364 | 				this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
365 | 			}
366 | 			this.loading = false;
367 | 			if (this.isInScroll) {
368 | 				$(this.element.parentNode).scroll().refresh();
369 | 			}
370 | 		},
371 | 		setStopped: function(stopped) {
372 | 			if (stopped != this.stopped) {
373 | 				this.stopped = stopped;
374 | 				this.pullUpTips && this.pullUpTips.classList[stopped ? 'add' : 'remove'](CLASS_HIDDEN);
375 | 			}
376 | 		},
377 | 		refresh: function(isReset) {
378 | 			if (isReset && this.finished && this.pullUpTipsIcon) {
379 | 				this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
380 | 				this.element.addEventListener('dragup', this);
381 | 				window.addEventListener('scroll', this);
382 | 				this.finished = false;
383 | 			}
384 | 		}
385 | 	});
386 | 	$.fn.pullToRefresh = function(options) {
387 | 		var pullRefreshApis = [];
388 | 		options = options || {};
389 | 		this.each(function() {
390 | 			var self = this;
391 | 			var pullRefreshApi = null;
392 | 			var id = self.getAttribute('data-pullToRefresh');
393 | 			if (!id) {
394 | 				id = ++$.uuid;
395 | 				$.data[id] = pullRefreshApi = new $.PullToRefresh(self, options);
396 | 				self.setAttribute('data-pullToRefresh', id);
397 | 			} else {
398 | 				pullRefreshApi = $.data[id];
399 | 			}
400 | 			if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
401 | 				pullRefreshApi.pullUpLoading();
402 | 			}
403 | 			pullRefreshApis.push(pullRefreshApi);
404 | 		});
405 | 		return pullRefreshApis.length === 1 ? pullRefreshApis[0] : pullRefreshApis;
406 | 	}
407 | })(mui, window, document);


--------------------------------------------------------------------------------
/js/mui.pullToRefresh.material.js:
--------------------------------------------------------------------------------
  1 | (function($) {
  2 | 	var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
  3 | 
  4 | 	$.PullToRefresh = $.PullToRefresh.extend({
  5 | 		init: function(element, options) {
  6 | 			this._super(element, options);
  7 | 			this.options = $.extend(true, {
  8 | 				down: {
  9 | 					tips: {
 10 | 						colors: ['008000', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
 11 | 						size: 200, //width=height=size;x=y=size/2;radius=size/4
 12 | 						lineWidth: 15,
 13 | 						duration: 1000,
 14 | 						tail_duration: 1000 * 2.5
 15 | 					}
 16 | 				}
 17 | 			}, this.options);
 18 | 			this.options.down.tips.color = this.options.down.tips.colors[0];
 19 | 			this.options.down.tips.colors = this.options.down.tips.colors.map(function(color) {
 20 | 				return {
 21 | 					r: parseInt(color.substring(0, 2), 16),
 22 | 					g: parseInt(color.substring(2, 4), 16),
 23 | 					b: parseInt(color.substring(4, 6), 16)
 24 | 				};
 25 | 			});
 26 | 		},
 27 | 		initPullDownTips: function() {
 28 | 			var self = this;
 29 | 			if ($.isFunction(self.options.down.callback)) {
 30 | 				self.pullDownTips = (function() {
 31 | 					var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
 32 | 					if (element) {
 33 | 						element.parentNode.removeChild(element);
 34 | 					}
 35 | 					if (!element) {
 36 | 						element = document.createElement('div');
 37 | 						element.classList.add(CLASS_PULL_TOP_TIPS);
 38 | 						element.innerHTML = '<div class="mui-pull-top-wrapper"><div class="mui-pull-top-canvas"><canvas id="pullDownTips" width="' + self.options.down.tips.size + '" height="' + self.options.down.tips.size + '"></canvas></div></div>';
 39 | 						element.addEventListener('webkitTransitionEnd', self);
 40 | 						document.body.appendChild(element);
 41 | 					}
 42 | 					self.pullDownCanvas = document.getElementById("pullDownTips");
 43 | 					self.pullDownCanvasCtx = self.pullDownCanvas.getContext('2d');
 44 | 					self.canvasUtils.init(self.pullDownCanvas, self.options.down.tips);
 45 | 					return element;
 46 | 				}());
 47 | 			}
 48 | 		},
 49 | 		removePullDownTips: function() {
 50 | 			this._super();
 51 | 			this.canvasUtils.stopSpin();
 52 | 		},
 53 | 		pulling: function(deltaY) {
 54 | 			var ratio = Math.min(deltaY / (this.options.down.height * 1.5), 1);
 55 | 			var ratioPI = Math.min(1, ratio * 2);
 56 | 			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + (deltaY < 0 ? 0 : deltaY) + 'px,0)';
 57 | 			this.pullDownCanvas.style.opacity = ratioPI;
 58 | 			this.pullDownCanvas.style.webkitTransform = 'rotate(' + 300 * ratio + 'deg)';
 59 | 			var canvas = this.pullDownCanvas;
 60 | 			var ctx = this.pullDownCanvasCtx;
 61 | 			var size = this.options.down.tips.size;
 62 | 			ctx.lineWidth = this.options.down.tips.lineWidth;
 63 | 			ctx.fillStyle = '#' + this.options.down.tips.color;
 64 | 			ctx.strokeStyle = '#' + this.options.down.tips.color;
 65 | 			ctx.stroke();
 66 | 			ctx.clearRect(0, 0, size, size);
 67 | 			//fixed android 4.1.x
 68 | 			canvas.style.display = 'none'; // Detach from DOM
 69 | 			canvas.offsetHeight; // Force the detach
 70 | 			canvas.style.display = 'inherit'; // Reattach to DOM
 71 | 			this.canvasUtils.drawArcedArrow(ctx, size / 2 + 0.5, size / 2, size / 4, 0 * Math.PI, 5 / 3 * Math.PI * ratioPI, false, 1, 2, 0.7853981633974483, 25, this.options.down.tips.lineWidth, this.options.down.tips.lineWidth);
 72 | 		},
 73 | 
 74 | 		beforeChangeOffset: function(deltaY) {},
 75 | 		afterChangeOffset: function(deltaY) {},
 76 | 		dragEndAfterChangeOffset: function(isNeedRefresh) {
 77 | 			if (isNeedRefresh) {
 78 | 				this.canvasUtils.startSpin();
 79 | 				this.pullDownLoading();
 80 | 			} else {
 81 | 				this.canvasUtils.stopSpin();
 82 | 				this.endPullDownToRefresh();
 83 | 			}
 84 | 		},
 85 | 		canvasUtils: (function() {
 86 | 			var canvasObj = null,
 87 | 				ctx = null,
 88 | 				size = 200,
 89 | 				lineWidth = 15,
 90 | 				tick = 0,
 91 | 				startTime = 0,
 92 | 				frameTime = 0,
 93 | 				timeLast = 0,
 94 | 				oldStep = 0,
 95 | 				acc = 0,
 96 | 				head = 0,
 97 | 				tail = 180,
 98 | 				rad = Math.PI / 180,
 99 | 				duration = 1000,
100 | 				tail_duration = 1000 * 2.5,
101 | 				colors = ['35ad0e', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
102 | 				rAF = null;
103 | 
104 | 			function easeLinear(currentIteration, startValue, changeInValue, totalIterations) {
105 | 				return changeInValue * currentIteration / totalIterations + startValue;
106 | 			}
107 | 
108 | 			function easeInOutQuad(currentIteration, startValue, changeInValue, totalIterations) {
109 | 				if ((currentIteration /= totalIterations / 2) < 1) {
110 | 					return changeInValue / 2 * currentIteration * currentIteration + startValue;
111 | 				}
112 | 				return -changeInValue / 2 * ((--currentIteration) * (currentIteration - 2) - 1) + startValue;
113 | 			}
114 | 
115 | 			function minmax(value, v0, v1) {
116 | 				var min = Math.min(v0, v1);
117 | 				var max = Math.max(v0, v1);
118 | 				if (value < min)
119 | 					return min;
120 | 				if (value > max)
121 | 					return min;
122 | 				return value;
123 | 			}
124 | 			var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) {
125 | 				'use strict';
126 | 				if (typeof(x0) == 'string') x0 = parseInt(x0);
127 | 				if (typeof(y0) == 'string') y0 = parseInt(y0);
128 | 				if (typeof(x1) == 'string') x1 = parseInt(x1);
129 | 				if (typeof(y1) == 'string') y1 = parseInt(y1);
130 | 				if (typeof(x2) == 'string') x2 = parseInt(x2);
131 | 				if (typeof(y2) == 'string') y2 = parseInt(y2);
132 | 				var radius = 3;
133 | 				var twoPI = 2 * Math.PI;
134 | 				ctx.save();
135 | 				ctx.beginPath();
136 | 				ctx.moveTo(x0, y0);
137 | 				ctx.lineTo(x1, y1);
138 | 				ctx.lineTo(x2, y2);
139 | 				switch (style) {
140 | 					case 0:
141 | 						var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
142 | 						ctx.arcTo(x1, y1, x0, y0, .55 * backdist);
143 | 						ctx.fill();
144 | 						break;
145 | 					case 1:
146 | 						ctx.beginPath();
147 | 						ctx.moveTo(x0, y0);
148 | 						ctx.lineTo(x1, y1);
149 | 						ctx.lineTo(x2, y2);
150 | 						ctx.lineTo(x0, y0);
151 | 						ctx.fill();
152 | 						break;
153 | 					case 2:
154 | 						ctx.stroke();
155 | 						break;
156 | 					case 3:
157 | 						var cpx = (x0 + x1 + x2) / 3;
158 | 						var cpy = (y0 + y1 + y2) / 3;
159 | 						ctx.quadraticCurveTo(cpx, cpy, x0, y0);
160 | 						ctx.fill();
161 | 						break;
162 | 					case 4:
163 | 						var cp1x, cp1y, cp2x, cp2y, backdist;
164 | 						var shiftamt = 5;
165 | 						if (x2 == x0) {
166 | 							backdist = y2 - y0;
167 | 							cp1x = (x1 + x0) / 2;
168 | 							cp2x = (x1 + x0) / 2;
169 | 							cp1y = y1 + backdist / shiftamt;
170 | 							cp2y = y1 - backdist / shiftamt;
171 | 						} else {
172 | 							backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
173 | 							var xback = (x0 + x2) / 2;
174 | 							var yback = (y0 + y2) / 2;
175 | 							var xmid = (xback + x1) / 2;
176 | 							var ymid = (yback + y1) / 2;
177 | 							var m = (y2 - y0) / (x2 - x0);
178 | 							var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt;
179 | 							var dy = m * dx;
180 | 							cp1x = xmid - dx;
181 | 							cp1y = ymid - dy;
182 | 							cp2x = xmid + dx;
183 | 							cp2y = ymid + dy;
184 | 						}
185 | 						ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0);
186 | 						ctx.fill();
187 | 						break;
188 | 				}
189 | 				ctx.restore();
190 | 			};
191 | 			var drawArcedArrow = function(ctx, x, y, r, startangle, endangle, anticlockwise, style, which, angle, d, lineWidth, lineRatio) {
192 | 				'use strict';
193 | 				style = typeof(style) != 'undefined' ? style : 3;
194 | 				which = typeof(which) != 'undefined' ? which : 1;
195 | 				angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
196 | 				lineWidth = lineWidth || 1;
197 | 				lineRatio = lineRatio || 10;
198 | 				d = typeof(d) != 'undefined' ? d : 10;
199 | 				ctx.save();
200 | 				ctx.lineWidth = lineWidth;
201 | 				ctx.beginPath();
202 | 				ctx.arc(x, y, r, startangle, endangle, anticlockwise);
203 | 				ctx.stroke();
204 | 				var sx, sy, lineangle, destx, desty;
205 | 				if (which & 1) {
206 | 					sx = Math.cos(startangle) * r + x;
207 | 					sy = Math.sin(startangle) * r + y;
208 | 					lineangle = Math.atan2(x - sx, sy - y);
209 | 					if (anticlockwise) {
210 | 						destx = sx + 10 * Math.cos(lineangle);
211 | 						desty = sy + 10 * Math.sin(lineangle);
212 | 					} else {
213 | 						destx = sx - 10 * Math.cos(lineangle);
214 | 						desty = sy - 10 * Math.sin(lineangle);
215 | 					}
216 | 					drawArrow(ctx, sx, sy, destx, desty, style, 2, angle, d);
217 | 				}
218 | 				if (which & 2) {
219 | 					sx = Math.cos(endangle) * r + x;
220 | 					sy = Math.sin(endangle) * r + y;
221 | 					lineangle = Math.atan2(x - sx, sy - y);
222 | 					if (anticlockwise) {
223 | 						destx = sx - 10 * Math.cos(lineangle);
224 | 						desty = sy - 10 * Math.sin(lineangle);
225 | 					} else {
226 | 						destx = sx + 10 * Math.cos(lineangle);
227 | 						desty = sy + 10 * Math.sin(lineangle);
228 | 					}
229 | 					drawArrow(ctx, sx - lineRatio * Math.sin(endangle), sy + lineRatio * Math.cos(endangle), destx - lineRatio * Math.sin(endangle), desty + lineRatio * Math.cos(endangle), style, 2, angle, d)
230 | 				}
231 | 				ctx.restore();
232 | 			}
233 | 			var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) {
234 | 				'use strict';
235 | 				if (typeof(x1) == 'string') x1 = parseInt(x1);
236 | 				if (typeof(y1) == 'string') y1 = parseInt(y1);
237 | 				if (typeof(x2) == 'string') x2 = parseInt(x2);
238 | 				if (typeof(y2) == 'string') y2 = parseInt(y2);
239 | 				style = typeof(style) != 'undefined' ? style : 3;
240 | 				which = typeof(which) != 'undefined' ? which : 1;
241 | 				angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
242 | 				d = typeof(d) != 'undefined' ? d : 10;
243 | 				var toDrawHead = typeof(style) != 'function' ? drawHead : style;
244 | 				var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
245 | 				var ratio = (dist - d / 3) / dist;
246 | 				var tox, toy, fromx, fromy;
247 | 				if (which & 1) {
248 | 					tox = Math.round(x1 + (x2 - x1) * ratio);
249 | 					toy = Math.round(y1 + (y2 - y1) * ratio);
250 | 				} else {
251 | 					tox = x2;
252 | 					toy = y2;
253 | 				}
254 | 				if (which & 2) {
255 | 					fromx = x1 + (x2 - x1) * (1 - ratio);
256 | 					fromy = y1 + (y2 - y1) * (1 - ratio);
257 | 				} else {
258 | 					fromx = x1;
259 | 					fromy = y1;
260 | 				}
261 | 				ctx.beginPath();
262 | 				ctx.moveTo(fromx, fromy);
263 | 				ctx.lineTo(tox, toy);
264 | 				ctx.stroke();
265 | 				var lineangle = Math.atan2(y2 - y1, x2 - x1);
266 | 				var h = Math.abs(d / Math.cos(angle));
267 | 				if (which & 1) {
268 | 					var angle1 = lineangle + Math.PI + angle;
269 | 					var topx = x2 + Math.cos(angle1) * h;
270 | 					var topy = y2 + Math.sin(angle1) * h;
271 | 					var angle2 = lineangle + Math.PI - angle;
272 | 					var botx = x2 + Math.cos(angle2) * h;
273 | 					var boty = y2 + Math.sin(angle2) * h;
274 | 					toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style);
275 | 				}
276 | 				if (which & 2) {
277 | 					var angle1 = lineangle + angle;
278 | 					var topx = x1 + Math.cos(angle1) * h;
279 | 					var topy = y1 + Math.sin(angle1) * h;
280 | 					var angle2 = lineangle - angle;
281 | 					var botx = x1 + Math.cos(angle2) * h;
282 | 					var boty = y1 + Math.sin(angle2) * h;
283 | 					toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style);
284 | 				}
285 | 			};
286 | 
287 | 			var spinColors = function(currentIteration, totalIterations) {
288 | 				var step = currentIteration % totalIterations;
289 | 				if (step < oldStep)
290 | 					colors.push(colors.shift());
291 | 				var c0 = colors[0],
292 | 					c1 = colors[1],
293 | 					r = minmax(easeLinear(step, c0.r, c1.r - c0.r, totalIterations), c0.r, c1.r),
294 | 					g = minmax(easeLinear(step, c0.g, c1.g - c0.g, totalIterations), c0.g, c1.g),
295 | 					b = minmax(easeLinear(step, c0.b, c1.b - c0.b, totalIterations), c0.b, c1.b);
296 | 
297 | 				oldStep = step;
298 | 				return "rgb(" + parseInt(r) + "," + parseInt(g) + "," + parseInt(b) + ")";
299 | 			}
300 | 
301 | 			var spin = function(t) {
302 | 				var timeCurrent = t || (new Date).getTime();
303 | 				if (!startTime) {
304 | 					startTime = timeCurrent;
305 | 				}
306 | 				tick = timeCurrent - startTime;
307 | 				acc = easeInOutQuad((tick + tail_duration / 2) % tail_duration, 0, duration, tail_duration);
308 | 				head = easeLinear((tick + acc) % duration, 0, 360, duration);
309 | 				tail = 20 + Math.abs(easeLinear((tick + tail_duration / 2) % tail_duration, -300, 600, tail_duration));
310 | 
311 | 				ctx.lineWidth = lineWidth;
312 | 				ctx.lineCap = "round";
313 | 
314 | 				ctx.strokeStyle = spinColors(tick, duration);
315 | 				ctx.clearRect(0, 0, size, size);
316 | 				//fixed android 4.1.x
317 | 				canvasObj.style.display = 'none'; // Detach from DOM
318 | 				canvasObj.offsetHeight; // Force the detach
319 | 				canvasObj.style.display = 'inherit'; // Reattach to DOM
320 | 				ctx.beginPath();
321 | 				ctx.arc(size / 2, size / 2, size / 4, parseInt(head - tail) % 360 * rad, parseInt(head) % 360 * rad, false);
322 | 				ctx.stroke();
323 | 
324 | 				rAF = requestAnimationFrame(spin);
325 | 			};
326 | 			var startSpin = function() {
327 | 				startTime = 0;
328 | 				oldStep = 0;
329 | 				rAF = requestAnimationFrame(spin);
330 | 			};
331 | 			var stopSpin = function() {
332 | 				rAF && cancelAnimationFrame(rAF);
333 | 			}
334 | 			var init = function(canvas, options) {
335 | 				canvasObj = canvas;
336 | 				ctx = canvasObj.getContext('2d');
337 | 				var options = $.extend(true, {}, options);
338 | 				colors = options.colors;
339 | 				duration = options.duration;
340 | 				tail_duration = options.tail_duration;
341 | 				size = options.size;
342 | 				lineWidth = options.lineWidth;
343 | 			};
344 | 			return {
345 | 				init: init,
346 | 				drawArcedArrow: drawArcedArrow,
347 | 				startSpin: startSpin,
348 | 				stopSpin: stopSpin
349 | 			};
350 | 		})()
351 | 	});
352 | })(mui);


--------------------------------------------------------------------------------
/js/mui.zoom.js:
--------------------------------------------------------------------------------
  1 | (function($, window) {
  2 | 	var CLASS_ZOOM = $.className('zoom');
  3 | 	var CLASS_ZOOM_SCROLLER = $.className('zoom-scroller');
  4 | 
  5 | 	var SELECTOR_ZOOM = '.' + CLASS_ZOOM;
  6 | 	var SELECTOR_ZOOM_SCROLLER = '.' + CLASS_ZOOM_SCROLLER;
  7 | 
  8 | 	var EVENT_PINCH_START = 'pinchstart';
  9 | 	var EVENT_PINCH = 'pinch';
 10 | 	var EVENT_PINCH_END = 'pinchend';
 11 | 	if ('ongesturestart' in window) {
 12 | 		EVENT_PINCH_START = 'gesturestart';
 13 | 		EVENT_PINCH = 'gesturechange';
 14 | 		EVENT_PINCH_END = 'gestureend';
 15 | 	}
 16 | 	$.Zoom = function(element, options) {
 17 | 		var zoom = this;
 18 | 
 19 | 		zoom.options = $.extend($.Zoom.defaults, options);
 20 | 
 21 | 		zoom.wrapper = zoom.element = element;
 22 | 		zoom.scroller = element.querySelector(SELECTOR_ZOOM_SCROLLER);
 23 | 		zoom.scrollerStyle = zoom.scroller && zoom.scroller.style;
 24 | 
 25 | 		zoom.zoomer = element.querySelector(SELECTOR_ZOOM);
 26 | 		zoom.zoomerStyle = zoom.zoomer && zoom.zoomer.style;
 27 | 
 28 | 		zoom.init = function() {
 29 | 			//自动启用
 30 | 			$.options.gestureConfig.pinch = true;
 31 | 			$.options.gestureConfig.doubletap = true;
 32 | 			zoom.initEvents();
 33 | 		};
 34 | 
 35 | 		zoom.initEvents = function(detach) {
 36 | 			var action = detach ? 'removeEventListener' : 'addEventListener';
 37 | 			var target = zoom.scroller;
 38 | 
 39 | 			target[action](EVENT_PINCH_START, zoom.onPinchstart);
 40 | 			target[action](EVENT_PINCH, zoom.onPinch);
 41 | 			target[action](EVENT_PINCH_END, zoom.onPinchend);
 42 | 
 43 | 			target[action]($.EVENT_START, zoom.onTouchstart);
 44 | 			target[action]($.EVENT_MOVE, zoom.onTouchMove);
 45 | 			target[action]($.EVENT_CANCEL, zoom.onTouchEnd);
 46 | 			target[action]($.EVENT_END, zoom.onTouchEnd);
 47 | 
 48 | 			target[action]('drag', zoom.dragEvent);
 49 | 			target[action]('doubletap', zoom.doubleTapEvent);
 50 | 		};
 51 | 		zoom.dragEvent = function(e) {
 52 | 			if (imageIsMoved || isGesturing) {
 53 | 				e.stopPropagation();
 54 | 			}
 55 | 		};
 56 | 		zoom.doubleTapEvent = function(e) {
 57 | 			zoom.toggleZoom(e.detail.center);
 58 | 		};
 59 | 		zoom.transition = function(style, time) {
 60 | 			time = time || 0;
 61 | 			style['webkitTransitionDuration'] = time + 'ms';
 62 | 			return zoom;
 63 | 		};
 64 | 		zoom.translate = function(style, x, y) {
 65 | 			x = x || 0;
 66 | 			y = y || 0;
 67 | 			style['webkitTransform'] = 'translate3d(' + x + 'px,' + y + 'px,0px)';
 68 | 			return zoom;
 69 | 		};
 70 | 		zoom.scale = function(style, scale) {
 71 | 			scale = scale || 1;
 72 | 			style['webkitTransform'] = 'translate3d(0,0,0) scale(' + scale + ')';
 73 | 			return zoom;
 74 | 		};
 75 | 		zoom.scrollerTransition = function(time) {
 76 | 			return zoom.transition(zoom.scrollerStyle, time);
 77 | 		};
 78 | 		zoom.scrollerTransform = function(x, y) {
 79 | 			return zoom.translate(zoom.scrollerStyle, x, y);
 80 | 		};
 81 | 		zoom.zoomerTransition = function(time) {
 82 | 			return zoom.transition(zoom.zoomerStyle, time);
 83 | 		};
 84 | 		zoom.zoomerTransform = function(scale) {
 85 | 			return zoom.scale(zoom.zoomerStyle, scale);
 86 | 		};
 87 | 
 88 | 		// Gestures
 89 | 		var scale = 1,
 90 | 			currentScale = 1,
 91 | 			isScaling = false,
 92 | 			isGesturing = false;
 93 | 		zoom.onPinchstart = function(e) {
 94 | 			isGesturing = true;
 95 | 		};
 96 | 		zoom.onPinch = function(e) {
 97 | 			if (!isScaling) {
 98 | 				zoom.zoomerTransition(0);
 99 | 				isScaling = true;
100 | 			}
101 | 			scale = (e.detail ? e.detail.scale : e.scale) * currentScale;
102 | 			if (scale > zoom.options.maxZoom) {
103 | 				scale = zoom.options.maxZoom - 1 + Math.pow((scale - zoom.options.maxZoom + 1), 0.5);
104 | 			}
105 | 			if (scale < zoom.options.minZoom) {
106 | 				scale = zoom.options.minZoom + 1 - Math.pow((zoom.options.minZoom - scale + 1), 0.5);
107 | 			}
108 | 			zoom.zoomerTransform(scale);
109 | 		};
110 | 		zoom.onPinchend = function(e) {
111 | 			scale = Math.max(Math.min(scale, zoom.options.maxZoom), zoom.options.minZoom);
112 | 			zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
113 | 			currentScale = scale;
114 | 			isScaling = false;
115 | 		};
116 | 		zoom.setZoom = function(newScale) {
117 | 			scale = currentScale = newScale;
118 | 			zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
119 | 			zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
120 | 		};
121 | 		zoom.toggleZoom = function(position, speed) {
122 | 			if (typeof position === 'number') {
123 | 				speed = position;
124 | 				position = undefined;
125 | 			}
126 | 			speed = typeof speed === 'undefined' ? zoom.options.speed : speed;
127 | 			if (scale && scale !== 1) {
128 | 				scale = currentScale = 1;
129 | 				zoom.scrollerTransition(speed).scrollerTransform(0, 0);
130 | 			} else {
131 | 				scale = currentScale = zoom.options.maxZoom;
132 | 				if (position) {
133 | 					var offset = $.offset(zoom.zoomer);
134 | 					var top = offset.top;
135 | 					var left = offset.left;
136 | 					var offsetX = (position.x - left) * scale;
137 | 					var offsetY = (position.y - top) * scale;
138 | 					this._cal();
139 | 					if (offsetX >= imageMaxX && offsetX <= (imageMaxX + wrapperWidth)) { //center
140 | 						offsetX = imageMaxX - offsetX + wrapperWidth / 2;
141 | 					} else if (offsetX < imageMaxX) { //left
142 | 						offsetX = imageMaxX - offsetX + wrapperWidth / 2;
143 | 					} else if (offsetX > (imageMaxX + wrapperWidth)) { //right
144 | 						offsetX = imageMaxX + wrapperWidth - offsetX - wrapperWidth / 2;
145 | 					}
146 | 					if (offsetY >= imageMaxY && offsetY <= (imageMaxY + wrapperHeight)) { //middle
147 | 						offsetY = imageMaxY - offsetY + wrapperHeight / 2;
148 | 					} else if (offsetY < imageMaxY) { //top
149 | 						offsetY = imageMaxY - offsetY + wrapperHeight / 2;
150 | 					} else if (offsetY > (imageMaxY + wrapperHeight)) { //bottom
151 | 						offsetY = imageMaxY + wrapperHeight - offsetY - wrapperHeight / 2;
152 | 					}
153 | 					offsetX = Math.min(Math.max(offsetX, imageMinX), imageMaxX);
154 | 					offsetY = Math.min(Math.max(offsetY, imageMinY), imageMaxY);
155 | 					zoom.scrollerTransition(speed).scrollerTransform(offsetX, offsetY);
156 | 				} else {
157 | 					zoom.scrollerTransition(speed).scrollerTransform(0, 0);
158 | 				}
159 | 			}
160 | 			zoom.zoomerTransition(speed).zoomerTransform(scale);
161 | 		};
162 | 
163 | 		zoom._cal = function() {
164 | 			wrapperWidth = zoom.wrapper.offsetWidth;
165 | 			wrapperHeight = zoom.wrapper.offsetHeight;
166 | 			imageWidth = zoom.zoomer.offsetWidth;
167 | 			imageHeight = zoom.zoomer.offsetHeight;
168 | 			var scaledWidth = imageWidth * scale;
169 | 			var scaledHeight = imageHeight * scale;
170 | 			imageMinX = Math.min((wrapperWidth / 2 - scaledWidth / 2), 0);
171 | 			imageMaxX = -imageMinX;
172 | 			imageMinY = Math.min((wrapperHeight / 2 - scaledHeight / 2), 0);
173 | 			imageMaxY = -imageMinY;
174 | 		};
175 | 
176 | 		var wrapperWidth, wrapperHeight, imageIsTouched, imageIsMoved, imageCurrentX, imageCurrentY, imageMinX, imageMinY, imageMaxX, imageMaxY, imageWidth, imageHeight, imageTouchesStart = {},
177 | 			imageTouchesCurrent = {},
178 | 			imageStartX, imageStartY, velocityPrevPositionX, velocityPrevTime, velocityX, velocityPrevPositionY, velocityY;
179 | 
180 | 		zoom.onTouchstart = function(e) {
181 | 			e.preventDefault();
182 | 			imageIsTouched = true;
183 | 			imageTouchesStart.x = e.type === $.EVENT_START ? e.targetTouches[0].pageX : e.pageX;
184 | 			imageTouchesStart.y = e.type === $.EVENT_START ? e.targetTouches[0].pageY : e.pageY;
185 | 		};
186 | 		zoom.onTouchMove = function(e) {
187 | 			e.preventDefault();
188 | 			if (!imageIsTouched) return;
189 | 			if (!imageIsMoved) {
190 | 				wrapperWidth = zoom.wrapper.offsetWidth;
191 | 				wrapperHeight = zoom.wrapper.offsetHeight;
192 | 				imageWidth = zoom.zoomer.offsetWidth;
193 | 				imageHeight = zoom.zoomer.offsetHeight;
194 | 				var translate = $.parseTranslateMatrix($.getStyles(zoom.scroller, 'webkitTransform'));
195 | 				imageStartX = translate.x || 0;
196 | 				imageStartY = translate.y || 0;
197 | 				zoom.scrollerTransition(0);
198 | 			}
199 | 			var scaledWidth = imageWidth * scale;
200 | 			var scaledHeight = imageHeight * scale;
201 | 
202 | 			if (scaledWidth < wrapperWidth && scaledHeight < wrapperHeight) return;
203 | 
204 | 			imageMinX = Math.min((wrapperWidth / 2 - scaledWidth / 2), 0);
205 | 			imageMaxX = -imageMinX;
206 | 			imageMinY = Math.min((wrapperHeight / 2 - scaledHeight / 2), 0);
207 | 			imageMaxY = -imageMinY;
208 | 
209 | 			imageTouchesCurrent.x = e.type === $.EVENT_MOVE ? e.targetTouches[0].pageX : e.pageX;
210 | 			imageTouchesCurrent.y = e.type === $.EVENT_MOVE ? e.targetTouches[0].pageY : e.pageY;
211 | 
212 | 			if (!imageIsMoved && !isScaling) {
213 | 				//				if (Math.abs(imageTouchesCurrent.y - imageTouchesStart.y) < Math.abs(imageTouchesCurrent.x - imageTouchesStart.x)) {
214 | 				//TODO 此处需要优化，当遇到长图，需要上下滚动时，下列判断会导致滚动不流畅
215 | 				if (
216 | 					(Math.floor(imageMinX) === Math.floor(imageStartX) && imageTouchesCurrent.x < imageTouchesStart.x) ||
217 | 					(Math.floor(imageMaxX) === Math.floor(imageStartX) && imageTouchesCurrent.x > imageTouchesStart.x)
218 | 				) {
219 | 					imageIsTouched = false;
220 | 					return;
221 | 				}
222 | 				//				}
223 | 			}
224 | 			imageIsMoved = true;
225 | 			imageCurrentX = imageTouchesCurrent.x - imageTouchesStart.x + imageStartX;
226 | 			imageCurrentY = imageTouchesCurrent.y - imageTouchesStart.y + imageStartY;
227 | 
228 | 			if (imageCurrentX < imageMinX) {
229 | 				imageCurrentX = imageMinX + 1 - Math.pow((imageMinX - imageCurrentX + 1), 0.8);
230 | 			}
231 | 			if (imageCurrentX > imageMaxX) {
232 | 				imageCurrentX = imageMaxX - 1 + Math.pow((imageCurrentX - imageMaxX + 1), 0.8);
233 | 			}
234 | 
235 | 			if (imageCurrentY < imageMinY) {
236 | 				imageCurrentY = imageMinY + 1 - Math.pow((imageMinY - imageCurrentY + 1), 0.8);
237 | 			}
238 | 			if (imageCurrentY > imageMaxY) {
239 | 				imageCurrentY = imageMaxY - 1 + Math.pow((imageCurrentY - imageMaxY + 1), 0.8);
240 | 			}
241 | 
242 | 			//Velocity
243 | 			if (!velocityPrevPositionX) velocityPrevPositionX = imageTouchesCurrent.x;
244 | 			if (!velocityPrevPositionY) velocityPrevPositionY = imageTouchesCurrent.y;
245 | 			if (!velocityPrevTime) velocityPrevTime = $.now();
246 | 			velocityX = (imageTouchesCurrent.x - velocityPrevPositionX) / ($.now() - velocityPrevTime) / 2;
247 | 			velocityY = (imageTouchesCurrent.y - velocityPrevPositionY) / ($.now() - velocityPrevTime) / 2;
248 | 			if (Math.abs(imageTouchesCurrent.x - velocityPrevPositionX) < 2) velocityX = 0;
249 | 			if (Math.abs(imageTouchesCurrent.y - velocityPrevPositionY) < 2) velocityY = 0;
250 | 			velocityPrevPositionX = imageTouchesCurrent.x;
251 | 			velocityPrevPositionY = imageTouchesCurrent.y;
252 | 			velocityPrevTime = $.now();
253 | 
254 | 			zoom.scrollerTransform(imageCurrentX, imageCurrentY);
255 | 		};
256 | 		zoom.onTouchEnd = function(e) {
257 | 			if (!e.touches.length) {
258 | 				isGesturing = false;
259 | 			}
260 | 			if (!imageIsTouched || !imageIsMoved) {
261 | 				imageIsTouched = false;
262 | 				imageIsMoved = false;
263 | 				return;
264 | 			}
265 | 			imageIsTouched = false;
266 | 			imageIsMoved = false;
267 | 			var momentumDurationX = 300;
268 | 			var momentumDurationY = 300;
269 | 			var momentumDistanceX = velocityX * momentumDurationX;
270 | 			var newPositionX = imageCurrentX + momentumDistanceX;
271 | 			var momentumDistanceY = velocityY * momentumDurationY;
272 | 			var newPositionY = imageCurrentY + momentumDistanceY;
273 | 
274 | 			if (velocityX !== 0) momentumDurationX = Math.abs((newPositionX - imageCurrentX) / velocityX);
275 | 			if (velocityY !== 0) momentumDurationY = Math.abs((newPositionY - imageCurrentY) / velocityY);
276 | 			var momentumDuration = Math.max(momentumDurationX, momentumDurationY);
277 | 
278 | 			imageCurrentX = newPositionX;
279 | 			imageCurrentY = newPositionY;
280 | 
281 | 			var scaledWidth = imageWidth * scale;
282 | 			var scaledHeight = imageHeight * scale;
283 | 			imageMinX = Math.min((wrapperWidth / 2 - scaledWidth / 2), 0);
284 | 			imageMaxX = -imageMinX;
285 | 			imageMinY = Math.min((wrapperHeight / 2 - scaledHeight / 2), 0);
286 | 			imageMaxY = -imageMinY;
287 | 			imageCurrentX = Math.max(Math.min(imageCurrentX, imageMaxX), imageMinX);
288 | 			imageCurrentY = Math.max(Math.min(imageCurrentY, imageMaxY), imageMinY);
289 | 
290 | 			zoom.scrollerTransition(momentumDuration).scrollerTransform(imageCurrentX, imageCurrentY);
291 | 		};
292 | 		zoom.destroy = function() {
293 | 			zoom.initEvents(true); //detach
294 | 			delete $.data[zoom.wrapper.getAttribute('data-zoomer')];
295 | 			zoom.wrapper.setAttribute('data-zoomer', '');
296 | 		}
297 | 		zoom.init();
298 | 		return zoom;
299 | 	};
300 | 	$.Zoom.defaults = {
301 | 		speed: 300,
302 | 		maxZoom: 3,
303 | 		minZoom: 1,
304 | 	};
305 | 	$.fn.zoom = function(options) {
306 | 		var zoomApis = [];
307 | 		this.each(function() {
308 | 			var zoomApi = null;
309 | 			var self = this;
310 | 			var id = self.getAttribute('data-zoomer');
311 | 			if (!id) {
312 | 				id = ++$.uuid;
313 | 				$.data[id] = zoomApi = new $.Zoom(self, options);
314 | 				self.setAttribute('data-zoomer', id);
315 | 			} else {
316 | 				zoomApi = $.data[id];
317 | 			}
318 | 			zoomApis.push(zoomApi);
319 | 		});
320 | 		return zoomApis.length === 1 ? zoomApis[0] : zoomApis;
321 | 	};
322 | })(mui, window);


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"@platforms": [
  3 | 		"android",
  4 | 		"iPhone",
  5 | 		"iPad"
  6 | 	],
  7 | 	"id": "H5CF40360",/*应用的标识，创建应用时自动生成，勿手动修改*/
  8 | 	"name": "WanAndroid",/*应用名称，程序桌面图标名称*/
  9 | 	"version": {
 10 | 		"name": "1.0.0",/*应用版本名称*/
 11 | 		"code": "83"
 12 | 	},
 13 | 	"description": "",/*应用描述信息*/
 14 | 	"icons": {
 15 | 		"72": "icon.png"
 16 | 	},
 17 | 	"launch_path": "html/main.html",/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
 18 | 	"developer": {
 19 | 		"name": "",/*开发者名称*/
 20 | 		"email": "",/*开发者邮箱地址*/
 21 | 		"url": "http://www.dcloud.io"
 22 | 	},
 23 | 	"permissions": {
 24 | 		"Cache": {
 25 | 			"description": "管理应用缓存"
 26 | 		},
 27 | 		"Console": {
 28 | 			"description": "跟踪调试输出日志"
 29 | 		},
 30 | 		
 31 | 		"Events": {
 32 | 			"description": "应用扩展事件"
 33 | 		}
 34 | 	},
 35 | 	"plus": {
 36 | 		"statusbar": {
 37 | 			"immersed": true
 38 | 		},
 39 | 		"splashscreen": {
 40 | 			"autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
 41 | 			"waiting": true,
 42 | 			"delay": "0"
 43 | 		},
 44 | 		"runmode": "liberate",/*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/
 45 | 		"signature": "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",/*可选，保留给应用签名，暂不使用*/
 46 | 		"distribute": {
 47 | 			"apple": {
 48 | 				"appid": "",/*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/
 49 | 				"mobileprovision": "",/*iOS应用打包配置文件*/
 50 | 				"password": "",/*iOS应用打包个人证书导入密码*/
 51 | 				"p12": "",/*iOS应用打包个人证书，打包配置文件关联的个人证书*/
 52 | 				"devices": "universal",/*iOS应用支持的设备类型，可取值iphone/ipad/universal*/
 53 | 				"frameworks": []
 54 | 			},
 55 | 			"google": {
 56 | 				"packagename": "",/*Android应用包名，如io.dcloud.HelloH5*/
 57 | 				"keystore": "",/*Android应用打包使用的密钥库文件*/
 58 | 				"password": "",/*Android应用打包使用密钥库中证书的密码*/
 59 | 				"aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
 60 | 				"permissions": ["<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"com.android.launcher.permission.UNINSTALL_SHORTCUT\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>"]
 61 | 			},
 62 | 			"orientation": [
 63 | 				"portrait-primary",
 64 | 				"portrait-secondary"
 65 | 			],/*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/
 66 | 			"icons": {
 67 | 				"ios": {
 68 | 					"prerendered": true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/
 69 | 					/*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/
 70 | 					"iphone": {
 71 | 						"normal": "",/*iPhone普通屏幕程序图标，分辨率：57x57*/
 72 | 						"retina": "",/*iPhone高分屏程序图标，分辨率：114x114*/
 73 | 						/*iPhone iOS7高分屏程序图标，分辨率：120x120*/
 74 | 						"spotlight-normal": "", /*iPhone Spotlight搜索程序图标，分辨率：29x29*/
 75 | 						"spotlight-retina": "", /*iPhone高分屏Spotlight搜索程序图标，分辨率：58x58*/
 76 | 						/*iPhone iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
 77 | 						"settings-normal": "", /*iPhone设置页面程序图标，分辨率：29x29*/
 78 | 						"app@2x": "unpackage/res/icons/120x120.png",
 79 | 						"app@3x": "unpackage/res/icons/180x180.png",
 80 | 						"settings@3x": "unpackage/res/icons/87x87.png",
 81 | 						"settings@2x": "unpackage/res/icons/58x58.png",
 82 | 						"spotlight@2x": "unpackage/res/icons/80x80.png",
 83 | 						"spotlight@3x": "unpackage/res/icons/120x120.png",
 84 | 						"notification@3x": "unpackage/res/icons/60x60.png",
 85 | 						"notification@2x": "unpackage/res/icons/40x40.png"
 86 | 					},
 87 | 					"ipad": {
 88 | 						"normal": "", /*iPad普通屏幕程序图标，分辨率：72x72*/
 89 | 						"retina": "", /*iPad高分屏程序图标，分辨率：144x144*/
 90 | 						/*iPad iOS7程序图标，分辨率：76x76*/
 91 | 						/*iPad iOS7高分屏程序图标，分辨率：152x152*/
 92 | 						"spotlight-normal": "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/
 93 | 						"spotlight-retina": "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/
 94 | 						/*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/
 95 | 						/*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
 96 | 						/*iPad设置页面程序图标，分辨率：29x29*/
 97 | 						"app": "unpackage/res/icons/76x76.png",
 98 | 						"app@2x": "unpackage/res/icons/152x152.png",
 99 | 						"settings": "unpackage/res/icons/29x29.png",
100 | 						"proapp@2x": "unpackage/res/icons/167x167.png",
101 | 						"spotlight": "unpackage/res/icons/40x40.png",
102 | 						"settings@2x": "unpackage/res/icons/58x58.png",
103 | 						"spotlight@2x": "unpackage/res/icons/80x80.png",
104 | 						"notification": "unpackage/res/icons/20x20.png",
105 | 						"notification@2x": "unpackage/res/icons/40x40.png"
106 | 					},
107 | 					"appstore": "C:/Users/ZKtian/Desktop/ic_launcher_round.png"
108 | 				},
109 | 				"android": {
110 | 					"mdpi": "unpackage/res/icons/48x48.png", /*普通屏程序图标，分辨率：48x48*/
111 | 					"ldpi": "unpackage/res/icons/48x48.png", /*大屏程序图标，分辨率：48x48*/
112 | 					"hdpi": "unpackage/res/icons/72x72.png", /*高分屏程序图标，分辨率：72x72*/
113 | 					"xhdpi": "unpackage/res/icons/96x96.png",/*720P高分屏程序图标，分辨率：96x96*/
114 | 					"xxhdpi": "unpackage/res/icons/144x144.png",
115 | 					"xxxhdpi": "unpackage/res/icons/192x192.png"
116 | 				}
117 | 			},
118 | 			"splashscreen": {
119 | 				"ios": {
120 | 					"iphone": {
121 | 						"default": "", /*iPhone3启动图片选，分辨率：320x480*/
122 | 						"retina35": "C:/Users/ZKtian/Desktop/init (2).png",/*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/
123 | 						"retina40": "C:/Users/ZKtian/Desktop/init (2).png",
124 | 						"iphonex": "C:/Users/ZKtian/Desktop/init (2).png",
125 | 						"retina47": "C:/Users/ZKtian/Desktop/init (2).png",
126 | 						"iphonexl": "C:/Users/ZKtian/Desktop/center.png",
127 | 						"retina55": "C:/Users/ZKtian/Desktop/init (2).png",
128 | 						"retina55l": "C:/Users/ZKtian/Desktop/init (2).png"
129 | 					},
130 | 					"ipad": {
131 | 						"portrait": "C:/Users/ZKtian/Desktop/center.png", /*iPad竖屏启动图片，分辨率：768x1004*/
132 | 						"portrait-retina": "C:/Users/ZKtian/Desktop/center.png",/*iPad高分屏竖屏图片，分辨率：1536x2008*/
133 | 						"landscape": "C:/Users/ZKtian/Desktop/center.png", /*iPad横屏启动图片，分辨率：1024x748*/
134 | 						"landscape-retina": "C:/Users/ZKtian/Desktop/center.png", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/
135 | 						"portrait7": "C:/Users/ZKtian/Desktop/center.png", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/
136 | 						"portrait-retina7": "C:/Users/ZKtian/Desktop/center.png",/*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/
137 | 						"landscape7": "C:/Users/ZKtian/Desktop/center.png", /*iPad iOS7横屏启动图片，分辨率：1024x768*/
138 | 						"landscape-retina7": "C:/Users/ZKtian/Desktop/center.png"
139 | 					}
140 | 				},
141 | 				"android": {
142 | 					"mdpi": "", /*普通屏启动图片，分辨率：240x282*/
143 | 					"ldpi": "", /*大屏启动图片，分辨率：320x442*/
144 | 					"hdpi": "C:/Users/ZKtian/Desktop/init.png", /*高分屏启动图片，分辨率：480x762*/
145 | 					"xhdpi": "C:/Users/ZKtian/Desktop/init.png", /*720P高分屏启动图片，分辨率：720x1242*/
146 | 					"xxhdpi": "C:/Users/ZKtian/Desktop/init.png"
147 | 				}
148 | 			}
149 | 		},
150 | 		"adid": "125775270805"
151 | 	},
152 | 	"dependencies": {
153 | 		"pages": {
154 | 			"html/tab-webview-main.html": {
155 | 				"resources": [
156 | 					"html/tab-webview-subpage-about.html"
157 | 				],
158 | 				"refer": [
159 | 					"html/tab-webview-subpage-setting.html",
160 | 					"html/tab-webview-subpage-chat.html",
161 | 					"html/tab-webview-subpage-contact.html"
162 | 				],
163 | 				"priority": 0
164 | 			},
165 | 			"html/main.html": {
166 | 				"resources": [
167 | 					"html/tab-main.html",
168 | 					"html/tab-mine.html"
169 | 				],
170 | 				"refer": [
171 | 					"html/tab-classify.html",
172 | 					"html/js/tab-classify.html"
173 | 				],
174 | 				"priority": 0
175 | 			},
176 | 			"html/tab-main.html": {
177 | 				"resources": [
178 | 					"css/mui.min.css",
179 | 					"imgs/icon_like_n.svg"
180 | 				],
181 | 				"refer": [
182 | 					"html/pagedetail.html",
183 | 					"html/search.html",
184 | 					"html/info.html",
185 | 					"html/nav_transparent.html"
186 | 				],
187 | 				"priority": 0
188 | 			},
189 | 			"html/tab-classify.html": {
190 | 				"resources": [],
191 | 				"refer": [
192 | 					"html/pagedetail.html",
193 | 					"html/pagedetail1.html",
194 | 					"html/search.html"
195 | 				],
196 | 				"priority": 0
197 | 			},
198 | 			"html/search.html": {
199 | 				"resources": [],
200 | 				"refer": [
201 | 					"html/pagedetail.html"
202 | 				],
203 | 				"priority": 0
204 | 			},
205 | 			"html/tab-mine.html": {
206 | 				"resources": [],
207 | 				"refer": [
208 | 					"html/info.html"
209 | 				],
210 | 				"priority": 0
211 | 			}
212 | 		},
213 | 		"idle": {
214 | 			"resources": [
215 | 				"vuel.html",
216 | 				"js/handlebars-v4.0.11.js",
217 | 				"imgs/muwu.jpg",
218 | 				"imgs/yuantiao.jpg",
219 | 				"fonts/mui.ttf",
220 | 				"imgs/cbd.jpg",
221 | 				"css/mui.css",
222 | 				"handlebars.html",
223 | 				"index.html",
224 | 				"js/vue.js",
225 | 				"js/mui.min.js",
226 | 				"js/zepto.min.js",
227 | 				"imgs/shuijiao.jpg",
228 | 				"js/mui.js"
229 | 			]
230 | 		}
231 | 	},
232 | 	"unpackage": [
233 | 		"handlebars.html",
234 | 		"index.html",
235 | 		"vuel.html"
236 | 	],
237 | 	"fullscreen": false
238 | }


--------------------------------------------------------------------------------
/screenshots/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/screenshots/download.png


--------------------------------------------------------------------------------
/screenshots/shot1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/screenshots/shot1.jpg


--------------------------------------------------------------------------------
/screenshots/shot2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/screenshots/shot2.jpg


--------------------------------------------------------------------------------
/screenshots/shot3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/screenshots/shot3.jpg


--------------------------------------------------------------------------------
/screenshots/shot4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/screenshots/shot4.jpg


--------------------------------------------------------------------------------
/screenshots/shot5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/screenshots/shot5.jpg


--------------------------------------------------------------------------------
/unpackage/.confirmed_dependencies:
--------------------------------------------------------------------------------
 1 | {
 2 |   "html/tab-webview-main.html": {
 3 |     "resources": [
 4 |       "html/tab-webview-subpage-about.html"
 5 |     ],
 6 |     "refer": [
 7 |       "html/tab-webview-subpage-setting.html",
 8 |       "html/tab-webview-subpage-chat.html",
 9 |       "html/tab-webview-subpage-contact.html",
10 |       "html/tab-webview-subpage-about.html"
11 |     ]
12 |   },
13 |   "html/main.html": {
14 |     "resources": [
15 |       "html/tab-main.html",
16 |       "html/tab-mine.html"
17 |     ],
18 |     "refer": [
19 |       "html/tab-main.html",
20 |       "html/tab-mine.html",
21 |       "html/tab-classify.html",
22 |       "html/js/tab-classify.html"
23 |     ]
24 |   },
25 |   "html/tab-main.html": {
26 |     "resources": [
27 |       "css/mui.min.css",
28 |       "imgs/icon_like_n.svg"
29 |     ],
30 |     "refer": [
31 |       "html/pagedetail.html",
32 |       "html/search.html",
33 |       "html/info.html",
34 |       "html/nav_transparent.html"
35 |     ]
36 |   },
37 |   "html/tab-classify.html": {
38 |     "refer": [
39 |       "html/pagedetail.html",
40 |       "html/pagedetail1.html",
41 |       "html/search.html"
42 |     ]
43 |   },
44 |   "html/search.html": {
45 |     "refer": [
46 |       "html/pagedetail.html"
47 |     ]
48 |   },
49 |   "html/tab-mine.html": {
50 |     "refer": [
51 |       "html/info.html"
52 |     ]
53 |   }
54 | }


--------------------------------------------------------------------------------
/unpackage/.confusion:
--------------------------------------------------------------------------------
1 | {"js/handlebars-v4.0.11.js":{},"js/mui.js":{},"js/mui.min.js":{},"js/mui.previewimage.js":{},"js/mui.pullToRefresh.js":{},"js/mui.pullToRefresh.material.js":{},"js/mui.zoom.js":{},"js/vue.js":{}}


--------------------------------------------------------------------------------
/unpackage/.dependencies:
--------------------------------------------------------------------------------
1 | null


--------------------------------------------------------------------------------
/unpackage/res/icons/120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/120x120.png


--------------------------------------------------------------------------------
/unpackage/res/icons/144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/144x144.png


--------------------------------------------------------------------------------
/unpackage/res/icons/152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/152x152.png


--------------------------------------------------------------------------------
/unpackage/res/icons/167x167.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/167x167.png


--------------------------------------------------------------------------------
/unpackage/res/icons/180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/180x180.png


--------------------------------------------------------------------------------
/unpackage/res/icons/192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/192x192.png


--------------------------------------------------------------------------------
/unpackage/res/icons/20x20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/20x20.png


--------------------------------------------------------------------------------
/unpackage/res/icons/256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/256x256.png


--------------------------------------------------------------------------------
/unpackage/res/icons/29x29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/29x29.png


--------------------------------------------------------------------------------
/unpackage/res/icons/40x40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/40x40.png


--------------------------------------------------------------------------------
/unpackage/res/icons/48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/48x48.png


--------------------------------------------------------------------------------
/unpackage/res/icons/58x58.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/58x58.png


--------------------------------------------------------------------------------
/unpackage/res/icons/60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/60x60.png


--------------------------------------------------------------------------------
/unpackage/res/icons/72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/72x72.png


--------------------------------------------------------------------------------
/unpackage/res/icons/76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/76x76.png


--------------------------------------------------------------------------------
/unpackage/res/icons/80x80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/80x80.png


--------------------------------------------------------------------------------
/unpackage/res/icons/87x87.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/87x87.png


--------------------------------------------------------------------------------
/unpackage/res/icons/96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZKTttttttttt/WanAndroid/3c85a2bd410a87dae92d66c5571f3e55e0cd9b32/unpackage/res/icons/96x96.png


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