github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/css/aui/aui.css (about) 1 /* 2 * ========================================================================= 3 * AUI APICLOUD UI 框架 流浪男 QQ:343757327 http://www.auicss.com 4 * Verson 1.1.2 兼容版 5 * ========================================================================= 6 */ 7 /*初始化类*/ 8 @charset "UTF-8"; 9 html{ 10 font-family: sans-serif; 11 } 12 html,body { 13 -webkit-touch-callout:none; 14 -webkit-text-size-adjust:none; 15 -webkit-tap-highlight-color:rgba(0, 0, 0, 0); 16 -webkit-user-select:none; 17 width: 100%; 18 height: 100%; 19 } 20 body { 21 line-height: 1.5; 22 font-size: 16px; 23 color: #000; 24 background-color: #f4f4f4; 25 outline: 0; 26 } 27 html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{ 28 margin:0; 29 border:0; 30 padding:0; 31 font-style:normal; 32 } 33 ul, li { 34 list-style: none; 35 } 36 b,strong { 37 font-weight: 700; 38 } 39 pre { 40 overflow: auto; 41 } 42 img { 43 border: 0; 44 } 45 p { 46 margin-top: 0; 47 margin-bottom: 0; 48 font-size: 14px; 49 color: #8f8f94; 50 } 51 a { 52 color: #0062cc; 53 text-decoration: none; 54 background-color: transparent; 55 } 56 a:hover { 57 outline: 0; 58 } 59 60 textarea { 61 overflow: hidden; 62 resize: none; 63 } 64 button { 65 overflow: visible; 66 } 67 button,select { 68 text-transform: none; 69 } 70 button,input,optgroup,select,textarea { 71 margin: 0; 72 font: inherit; 73 color: inherit; 74 } 75 76 hr { 77 height: 0; 78 -webkit-box-sizing: content-box; 79 -moz-box-sizing: content-box; 80 box-sizing: content-box; 81 } 82 pre { 83 overflow: auto; 84 } 85 86 87 /*自动移动文字*/ 88 .aui-ellipsis-1 { 89 padding-right: 15px; 90 overflow: hidden; 91 white-space: nowrap; 92 text-overflow: ellipsis; 93 } 94 .aui-ellipsis-2 { 95 display: -webkit-box; 96 overflow: hidden; 97 text-overflow: ellipsis; 98 word-wrap: break-word; 99 white-space: normal !important; 100 -webkit-line-clamp: 2; 101 -webkit-box-orient: vertical; 102 } 103 * { 104 -webkit-box-sizing: border-box; 105 box-sizing: border-box; 106 -webkit-user-select: none; 107 -webkit-tap-highlight-color: transparent; 108 -webkit-tap-highlight-color: transparent; 109 outline: none; 110 } 111 112 /*水平线*/ 113 .aui-line-x { 114 width: 100%; 115 position: relative; 116 height: 1px; 117 } 118 .aui-line-x:after { 119 border-bottom: 1px solid #c8c7cc; 120 display: block; 121 content: ''; 122 position: absolute; 123 top: 0; 124 right: 0; 125 bottom: 0; 126 left: 0; 127 -webkit-transform-origin: 0 0; 128 -webkit-transform: scale(1); 129 pointer-events: none; 130 } 131 132 133 134 /*内边距,结合aui-row使用*/ 135 .aui-row-5 { 136 margin-right: -5px; 137 margin-left: -5px; 138 } 139 .aui-row-10 { 140 margin-right: -10px; 141 margin-left: -10px; 142 } 143 .aui-row-15 { 144 margin-right: -15px; 145 margin-left: -15px; 146 } 147 .aui-row-20 { 148 margin-right: -20px; 149 margin-left: -20px; 150 } 151 .aui-padded-0-5 { 152 padding: 0 5px; 153 } 154 .aui-padded-0-10 { 155 padding: 0 10px; 156 } 157 .aui-padded-0-15 { 158 padding: 0 15px; 159 } 160 .aui-padded-0-20 { 161 padding: 0 20px; 162 } 163 .aui-padded-5 { 164 overflow: hidden; 165 padding: 5px; 166 } 167 .aui-padded-10 { 168 overflow: hidden; 169 padding: 10px; 170 } 171 .aui-padded-15 { 172 overflow: hidden; 173 padding: 15px; 174 } 175 .aui-padded-20 { 176 overflow: hidden; 177 padding: 20px; 178 } 179 .aui-clearfix { 180 clear: both; 181 } 182 .aui-clearfix:before { 183 display: table; 184 content: " "; 185 } 186 .aui-clearfix:after { 187 clear: both; 188 } 189 190 191 /*文字对齐*/ 192 .aui-text-left { 193 text-align: left !important; 194 } 195 196 .aui-text-center { 197 text-align: center !important; 198 } 199 200 .aui-text-justify { 201 text-align: justify !important; 202 } 203 204 .aui-text-right { 205 text-align: right !important; 206 } 207 /*文字类*/ 208 h1,h2,h3,h4,h5,h6 { 209 font-size: 100%; 210 font-weight: 400 211 } 212 213 h1 { 214 font-size: 18px; 215 } 216 217 h2 { 218 font-size: 17px; 219 } 220 221 h3 { 222 font-size: 16px; 223 } 224 225 h4 { 226 font-size: 16px; 227 } 228 229 h5 { 230 font-size: 14px; 231 font-weight: normal; 232 color: #8f8f94; 233 } 234 235 h6 { 236 font-size: 12px; 237 font-weight: normal; 238 color: #8f8f94; 239 } 240 h1 small,h2 small,h3 small,h4 small { 241 font-weight: normal; 242 line-height: 1; 243 color: #777777; 244 } 245 h5 small,h6 small { 246 font-weight: normal; 247 line-height: 1; 248 color: #8f8f94; 249 } 250 251 h1 small,h2 small,h3 small { 252 font-size: 65%; 253 } 254 255 h4 small,h5 small,h6 small { 256 font-size: 75%; 257 } 258 259 /*文字、背景颜色*/ 260 .aui-text-default { 261 color: #666666 !important; 262 } 263 .aui-text-primary { 264 color: #1abc9c !important; 265 } 266 267 .aui-text-success { 268 color: #2ecc71 !important; 269 } 270 271 .aui-text-info { 272 color: #3498db !important; 273 } 274 275 .aui-text-warning { 276 color: #f1c40f !important; 277 } 278 279 .aui-text-danger { 280 color: #e74c3c !important; 281 } 282 .aui-text-blue { 283 color: #a1d4cf !important; 284 } 285 .aui-text-pink { 286 color: #fbb8af !important; 287 } 288 .aui-bg-default { 289 background-color: #f4f4f4 !important; 290 } 291 .aui-bg-primary { 292 background-color: #1abc9c !important; 293 } 294 295 .aui-bg-success { 296 background-color: #2ecc71 !important; 297 } 298 299 .aui-bg-info { 300 background-color: #3498db !important; 301 } 302 303 .aui-bg-warning { 304 background-color: #f1c40f !important; 305 } 306 307 .aui-bg-danger { 308 background-color: #e74c3c !important; 309 } 310 .aui-bg-blue { 311 background-color: #a1d4cf !important; 312 } 313 .aui-bg-pink { 314 background-color: #fbb8af !important; 315 } 316 317 318 /*对齐,显示,隐藏等*/ 319 .aui-pull-right { 320 float: right !important; 321 } 322 .aui-pull-left { 323 float: left !important; 324 } 325 .aui-hide { 326 display: none !important; 327 } 328 .aui-show { 329 display: block !important; 330 } 331 .aui-invisible { 332 visibility: hidden; 333 } 334 .aui-inline { 335 display: inline-block; 336 vertical-align: top; 337 } 338 339 /*基本容器*/ 340 .aui-content { 341 -webkit-overflow-scrolling: touch; 342 margin-bottom: 15px; 343 } 344 .aui-content-title { 345 position: relative; 346 overflow: hidden; 347 margin: 0; 348 white-space: nowrap; 349 text-overflow: ellipsis; 350 font-size: 14px; 351 text-transform: uppercase; 352 line-height: 1; 353 color: #6d6d72; 354 padding: 25px 15px 10px; 355 } 356 .aui-content-padded { 357 margin: 0 10px; 358 -webkit-overflow-scrolling: touch; 359 margin-bottom: 15px; 360 } 361 .aui-card { 362 margin: 0 10px; 363 margin-bottom: 15px; 364 position: relative; 365 background: #fff; 366 border-radius: 6px; 367 } 368 .aui-card:after { 369 display: block; 370 content: ''; 371 position: absolute; 372 top: 0; 373 right: 0; 374 bottom: 0; 375 left: 0; 376 -webkit-transform-origin: 0 0; 377 -webkit-transform: scale(1); 378 pointer-events: none; 379 border: 1px solid #c8c7cc; 380 border-radius: 6px; 381 overflow: hidden; 382 } 383 .aui-card.aui-noborder:after { 384 border: none; 385 overflow: hidden; 386 } 387 .aui-card.aui-noborder .aui-list-view, 388 .aui-card.aui-noborder .aui-user-view { 389 border-radius: 6px; 390 } 391 392 /*栅格类*/ 393 .aui-col-xs-1,.aui-col-xs-2,.aui-col-xs-3,.aui-col-xs-4,.aui-col-xs-5,.aui-col-xs-6,.aui-col-xs-7,.aui-col-xs-8,.aui-col-xs-9,.aui-col-xs-10,.aui-col-xs-11,.aui-col-5 { 394 position: relative; 395 float: left; 396 } 397 .aui-col-xs-12 { 398 width: 100%; 399 position: relative; 400 } 401 .aui-col-xs-11 { 402 width: 91.66666667%; 403 } 404 .aui-col-xs-10 { 405 width: 83.33333333%; 406 } 407 .aui-col-xs-9 { 408 width: 75%; 409 } 410 .aui-col-xs-8 { 411 width: 66.66666667%; 412 } 413 .aui-col-xs-7 { 414 width: 58.33333333%; 415 } 416 .aui-col-xs-6 { 417 width: 50%; 418 } 419 .aui-col-xs-5 { 420 width: 41.66666667%; 421 } 422 .aui-col-xs-4 { 423 width: 33.33333333%; 424 } 425 .aui-col-xs-3 { 426 width: 25%; 427 } 428 .aui-col-xs-2 { 429 width: 16.66666667%; 430 } 431 .aui-col-xs-1 { 432 width: 8.33333333%; 433 } 434 .aui-col-5 { 435 width: 20%; 436 } 437 438 439 /*标签*/ 440 .aui-label { 441 display: table-cell; 442 padding: .3em .35em .2em .35em; 443 font-size: 12px; 444 line-height: 1; 445 color: #fff; 446 text-align: center; 447 white-space: nowrap; 448 vertical-align: baseline; 449 border-radius: .15em; 450 } 451 .aui-label-default { 452 background-color: #f4f4f4; 453 color: #8f8f94; 454 } 455 .aui-label-primary { 456 background-color: #1abc9c; 457 } 458 459 .aui-label-success { 460 background-color: #2ecc71; 461 } 462 463 .aui-label-info { 464 background-color: #3498db; 465 } 466 467 .aui-label-warning { 468 background-color: #f1c40f; 469 } 470 471 .aui-label-danger { 472 background-color: #e74c3c; 473 } 474 .aui-label-blue { 475 background-color: #a1d4cf; 476 } 477 .aui-label-pink { 478 background-color: #fbb8af; 479 } 480 481 482 483 /*按钮样式*/ 484 button, .aui-btn { 485 position: relative; 486 display: inline-block; 487 padding: 6px 12px; 488 margin-bottom: 0; 489 font-size: 14px; 490 font-weight: 400; 491 line-height: 1.42857143; 492 text-align: center; 493 background-color: #ecf0f1; 494 white-space: nowrap; 495 vertical-align: middle; 496 -ms-touch-action: manipulation; 497 touch-action: manipulation; 498 cursor: pointer; 499 -webkit-user-select: none; 500 -moz-user-select: none; 501 -ms-user-select: none; 502 user-select: none; 503 border: 1px solid #ecf0f1; 504 border-radius: 4px; 505 } 506 .aui-btn:active { 507 color: #ffffff; 508 background-color: #bdc3c7; 509 } 510 .aui-btn-default { 511 color: #ffffff; 512 background-color: #bdc3c7; 513 border: 1px solid #bdc3c7; 514 } 515 516 .aui-btn-primary { 517 color: #ffffff; 518 background-color: #1abc9c; 519 border: 1px solid #1abc9c; 520 } 521 .aui-btn-primary.active, .aui-btn-primary:active { 522 color: #fff; 523 background-color: #16a085; 524 border: 1px solid #16a085; 525 } 526 .aui-btn-success { 527 color: #ffffff; 528 background-color: #2ecc71; 529 border: 1px solid #2ecc71; 530 } 531 .aui-btn-success.active, .aui-btn-success:active { 532 color: #fff; 533 background-color: #27ae60; 534 border: 1px solid #27ae60; 535 } 536 .aui-btn-info { 537 color: #ffffff; 538 background-color: #3498db; 539 border: 1px solid #3498db; 540 } 541 .aui-btn-info.active, .aui-btn-info:active { 542 color: #fff; 543 background-color: #2980b9; 544 border: 1px solid #2980b9; 545 } 546 .aui-btn-warning { 547 color: #ffffff; 548 background-color: #f1c40f; 549 border: 1px solid #f1c40f; 550 } 551 .aui-btn-warning.active, .aui-btn-warning:active { 552 color: #fff; 553 background-color: #faa732; 554 border: 1px solid #faa732; 555 } 556 .aui-btn-danger { 557 color: #ffffff; 558 background-color: #e74c3c; 559 border: 1px solid #e74c3c; 560 } 561 .aui-btn-danger.active, .aui-btn-danger:active { 562 color: #fff; 563 background-color: #c0392b; 564 border: 1px solid #c0392b; 565 } 566 .aui-btn-block { 567 display: block; 568 width: 100%; 569 padding: 15px 0; 570 margin-bottom: 0; 571 font-size: 18px; 572 } 573 .aui-btn .aui-iconfont, .aui-btn-block .aui-iconfont { 574 margin-right: 6px; 575 } 576 .aui-btn .aui-badge, .aui-btn-block .aui-badge { 577 margin-left: 6px; 578 } 579 .aui-btn-outlined { 580 background: transparent; 581 } 582 .aui-btn-default.aui-btn-outlined { 583 color: #bdc3c7; 584 } 585 .aui-btn-primary.aui-btn-outlined { 586 color: #16a085; 587 } 588 .aui-btn-success.aui-btn-outlined { 589 color: #27ae60; 590 } 591 .aui-btn-info.aui-btn-outlined { 592 color: #2980b9; 593 } 594 .aui-btn-warning.aui-btn-outlined { 595 color: #faa732; 596 } 597 .aui-btn-danger.aui-btn-outlined { 598 color: #c0392b; 599 } 600 601 .aui-btn-default.aui-btn-outlined:active { 602 background: #bdc3c7; 603 color: #ffffff; 604 } 605 .aui-btn-primary.aui-btn-outlined:active { 606 background: #16a085; 607 color: #ffffff; 608 } 609 .aui-btn-success.aui-btn-outlined:active { 610 background: #27ae60; 611 color: #ffffff; 612 } 613 .aui-btn-info.aui-btn-outlined:active { 614 background: #2980b9; 615 color: #ffffff; 616 } 617 .aui-btn-warning.aui-btn-outlined:active { 618 background: #faa732; 619 color: #ffffff; 620 } 621 .aui-btn-danger.aui-btn-outlined:active { 622 background: #c0392b; 623 color: #ffffff; 624 } 625 /* 626 *表单类\输入框\radio\checkbox 627 **/ 628 textarea { 629 width: 100%; 630 -webkit-appearance: none; 631 padding: 10px 15px; 632 margin-bottom: 15px; 633 line-height: 21px; 634 -webkit-user-select: text; 635 background-color: #fff; 636 border: 1px solid rgba(0, 0, 0, .2); 637 border-radius: 3px; 638 outline: none; 639 } 640 select, 641 input[type="text"], 642 input[type="search"], 643 input[type="password"], 644 input[type="week"], 645 input[type="number"], 646 input[type="email"], 647 input[type="url"], 648 input[type="tel"], 649 input[type="color"], 650 input[type="datetime"], 651 input[type="datetime-local"], 652 input[type="date"], 653 input[type="month"], 654 input[type="time"] { 655 width: 100%; 656 -webkit-appearance: none; 657 -webkit-user-select: text; 658 padding: 10px 15px; 659 margin-bottom: 15px; 660 line-height: 21px; 661 background-color: #fff; 662 border: 1px solid rgba(0, 0, 0, .2); 663 border-radius: 3px; 664 outline: none; 665 } 666 .aui-form { 667 position: relative; 668 background: #ffffff; 669 } 670 671 672 .aui-input-row { 673 position: relative; 674 display: table; 675 padding: 6px 0; 676 } 677 678 .aui-input-row:after { 679 border-bottom: 1px solid #c8c7cc; 680 display: block; 681 content: ''; 682 position: absolute; 683 top: 0; 684 right: 0; 685 bottom: 0; 686 left: 0; 687 -webkit-transform-origin: 0 0; 688 -webkit-transform: scale(1); 689 pointer-events: none; 690 } 691 .aui-input-row:first-child:after { 692 border-top: 1px solid #c8c7cc; 693 display: block; 694 content: ''; 695 position: absolute; 696 top: 0; 697 right: 0; 698 bottom: 0; 699 left: 0; 700 -webkit-transform-origin: 0 0; 701 -webkit-transform: scale(1); 702 pointer-events: none; 703 } 704 .aui-input-row:last-child:after { 705 border-bottom: 1px solid #c8c7cc; 706 } 707 .aui-input-row .aui-input-addon { 708 font-size: 14px; 709 font-weight: 400; 710 line-height: 1; 711 color: #333; 712 text-align: center; 713 display: table-cell; 714 width: 1%; 715 white-space: nowrap; 716 vertical-align: middle; 717 padding: 5px; 718 } 719 .aui-input-row .aui-input { 720 font-size: 14px; 721 margin: 0; 722 display: table-cell; 723 position: relative; 724 float: left; 725 width: 100%; 726 border:none; 727 border-radius: 0; 728 } 729 730 .aui-btn-row { 731 position: relative; 732 text-align: center; 733 padding: 15px; 734 } 735 .aui-btn-row:after { 736 border-bottom: 1px solid #c8c7cc; 737 display: block; 738 content: ''; 739 position: absolute; 740 top: 0; 741 right: 0; 742 bottom: 0; 743 left: 0; 744 -webkit-transform-origin: 0 0; 745 -webkit-transform: scale(1); 746 pointer-events: none; 747 } 748 .aui-card .aui-form { 749 background: none; 750 } 751 .aui-card .aui-input-row:first-child:after{ 752 border-top: 0; 753 } 754 .aui-card .aui-input-row:last-child:after{ 755 border-bottom: 0; 756 } 757 .aui-card .aui-btn-row:after { 758 border-bottom: 0; 759 } 760 761 762 /*表单中单选、多选*/ 763 .aui-radio { 764 width: 26px; 765 height: 26px; 766 position: relative; 767 margin: 8px 10px; 768 background: #ffffff; 769 border: solid 1px #dddddd; 770 border-radius: 50%; 771 display: table; 772 float: left; 773 -webkit-appearance: none; 774 transition: background-color ease 0.1s; 775 } 776 .aui-radio-name { 777 height: 26px; 778 line-height: 26px; 779 margin: 8px 10px 8px -5px; 780 float: left; 781 } 782 .aui-radio:checked { 783 background-color: #1abc9c; 784 border: solid 1px #1abc9c; 785 text-align: center; 786 } 787 .aui-radio:checked:before { 788 position: absolute; 789 left: 5px; 790 top: 1px; 791 font-size: 16px; 792 display: table; 793 font-family: "auiicon"; 794 content: "\e645"; 795 color: #ffffff; 796 } 797 .aui-radio:checked:after { 798 position: absolute; 799 left: 5px; 800 top: 1px; 801 font-size: 16px; 802 display: table; 803 font-family: "auiicon"; 804 content: "\e645"; 805 color: #ffffff; 806 } 807 808 .aui-radio:disabled { 809 background-color: #d9d9d9; 810 border: solid 1px #d9d9d9; 811 } 812 .aui-radio:disabled:before { 813 position: absolute; 814 left: 5px; 815 top: 1px; 816 display: table; 817 font-family: "auiicon"; 818 content: "\e645"; 819 font-size: 16px; 820 color: #ffffff; 821 } 822 .aui-radio:disabled:after { 823 position: absolute; 824 left: 5px; 825 top: 1px; 826 display: table; 827 font-family: "auiicon"; 828 content: "\e645"; 829 font-size: 16px; 830 color: #ffffff; 831 } 832 .aui-radio.aui-radio-info:checked { 833 background-color: #3498db; 834 border: solid 1px #3498db; 835 } 836 .aui-radio.aui-radio-success:checked { 837 background-color: #2ecc71; 838 border: solid 1px #2ecc71; 839 } 840 .aui-radio.aui-radio-danger:checked { 841 background-color: #e74c3c; 842 border: solid 1px #e74c3c; 843 } 844 .aui-radio.aui-radio-warning:checked { 845 background-color: #f1c40f; 846 border: solid 1px #f1c40f; 847 } 848 849 .aui-checkbox { 850 width: 26px; 851 height: 26px; 852 position: relative; 853 margin: 8px 15px; 854 background: #ffffff; 855 border: solid 1px #dddddd; 856 border-radius: 4px; 857 display: table; 858 float: left; 859 -webkit-appearance: none; 860 transition: background-color ease 0.1s; 861 } 862 .aui-checkbox-name { 863 height: 26px; 864 line-height: 26px; 865 margin: 8px 10px 8px -5px; 866 float: left; 867 } 868 .aui-checkbox:checked { 869 background-color: #1abc9c; 870 border: solid 1px #1abc9c; 871 text-align: center; 872 } 873 .aui-checkbox:checked:before { 874 position: absolute; 875 left: 5px; 876 top: 1px; 877 font-size: 16px; 878 display: inline-block; 879 font-family: "auiicon"; 880 content: "\e645"; 881 color: #ffffff; 882 } 883 .aui-checkbox:checked:after { 884 position: absolute; 885 left: 5px; 886 top: 1px; 887 font-size: 16px; 888 display: inline-block; 889 font-family: "auiicon"; 890 content: "\e645"; 891 color: #ffffff; 892 } 893 894 .aui-checkbox:disabled { 895 background-color: #d9d9d9; 896 border: solid 1px #d9d9d9; 897 } 898 .aui-checkbox:disabled:before { 899 position: absolute; 900 left: 5px; 901 top: 1px; 902 display: inline-block; 903 font-family: "auiicon"; 904 content: "\e645"; 905 font-size: 16px; 906 color: #ffffff; 907 } 908 .aui-checkbox:disabled:after { 909 position: absolute; 910 left: 5px; 911 top: 1px; 912 display: inline-block; 913 font-family: "auiicon"; 914 content: "\e645"; 915 font-size: 16px; 916 color: #ffffff; 917 } 918 .aui-checkbox.aui-checkbox-info:checked { 919 background-color: #3498db; 920 border: solid 1px #3498db; 921 } 922 .aui-checkbox.aui-checkbox-success:checked { 923 background-color: #2ecc71; 924 border: solid 1px #2ecc71; 925 } 926 .aui-checkbox.aui-checkbox-danger:checked { 927 background-color: #e74c3c; 928 border: solid 1px #e74c3c; 929 } 930 .aui-checkbox.aui-checkbox-warning:checked { 931 background-color: #f1c40f; 932 border: solid 1px #f1c40f; 933 } 934 935 936 /*列表*/ 937 .aui-content > .aui-list-view:last-child { 938 margin-bottom: 15px; 939 } 940 .aui-list-view { 941 position: relative; 942 padding-left: 0; 943 margin-top: 0; 944 margin-bottom: 15px; 945 list-style: none; 946 background-color: #fff; 947 } 948 .aui-list-view-cell { 949 position: relative; 950 padding: 12px 15px; 951 overflow: hidden; 952 -webkit-transform-style: preserve-3d; 953 transform-style: preserve-3d; 954 -webkit-touch-callout: none; 955 956 } 957 958 .aui-list-view-cell:after { 959 border-bottom: 1px solid #c8c7cc; 960 display: block; 961 content: ''; 962 position: absolute; 963 top: 0; 964 right: 0; 965 bottom: 0; 966 left: 0; 967 -webkit-transform-origin: 0 0; 968 -webkit-transform: scale(1); 969 pointer-events: none; 970 } 971 .aui-list-view-cell:first-child:after { 972 border-top: 1px solid #c8c7cc; 973 display: block; 974 content: ''; 975 position: absolute; 976 top: 0; 977 right: 0; 978 bottom: 0; 979 left: 0; 980 -webkit-transform-origin: 0 0; 981 -webkit-transform: scale(1); 982 pointer-events: none; 983 } 984 .aui-list-view-cell:last-child:after { 985 border-bottom: 1px solid #c8c7cc; 986 } 987 .aui-card .aui-list-view-cell:first-child:after{ 988 border-top: 0; 989 } 990 .aui-card .aui-list-view-cell:last-child:after { 991 border-bottom: 0; 992 } 993 .aui-content-padded .aui-list-view-cell:first-child:after{ 994 border-top: 0; 995 } 996 .aui-content-padded .aui-list-view-cell:last-child:after { 997 border-bottom: 0; 998 } 999 1000 .aui-list-view-cell > a{ 1001 position: relative; 1002 padding: inherit; 1003 margin: -12px -15px; 1004 display: block; 1005 overflow: hidden; 1006 color: inherit; 1007 text-overflow: ellipsis; 1008 white-space: nowrap; 1009 } 1010 .aui-list-view-cell > a:active{ 1011 background: #f4f4f4; 1012 } 1013 .aui-list-view-cell > a.aui-active{ 1014 background-color: #eee; 1015 } 1016 1017 .aui-list-view-cell > a.aui-ellipsis-1, 1018 .aui-list-view-cell > a.aui-ellipsis-2 { 1019 padding-bottom: -4px; 1020 padding-right: 30px; 1021 } 1022 1023 .aui-list-view-cell p { 1024 margin-bottom: 0; 1025 } 1026 1027 1028 /*带有箭头的列表*/ 1029 .aui-arrow-right:after { 1030 font-family: 'auiicon'; 1031 font-size: inherit; 1032 line-height: 1; 1033 color: #bbbbbb; 1034 text-decoration: none; 1035 position: absolute; 1036 top: 50%; 1037 display: inline-block; 1038 -webkit-transform: translateY(-50%); 1039 transform: translateY(-50%); 1040 -webkit-font-smoothing: antialiased; 1041 } 1042 1043 .aui-arrow-right:after { 1044 font-family:"auiicon" !important; 1045 right: 15px; 1046 content: '\e6a3'; 1047 } 1048 1049 /*会员列表~通讯录~消息列表*/ 1050 .aui-user-view { 1051 position: relative; 1052 padding-left: 0; 1053 margin-top: 0; 1054 margin-bottom: 15px; 1055 list-style: none; 1056 background-color: #fff; 1057 } 1058 1059 .aui-user-view-cell { 1060 position: relative; 1061 padding: 11px 15px; 1062 overflow: hidden; 1063 } 1064 1065 .aui-user-view-cell:after { 1066 border-bottom: 1px solid #c8c7cc; 1067 display: block; 1068 content: ''; 1069 position: absolute; 1070 top: 0; 1071 right: 0; 1072 bottom: 0; 1073 left: 0; 1074 -webkit-transform-origin: 0 0; 1075 -webkit-transform: scale(1); 1076 pointer-events: none; 1077 } 1078 .aui-user-view-cell:first-child:after { 1079 border-top: 1px solid #c8c7cc; 1080 display: block; 1081 content: ''; 1082 position: absolute; 1083 top: 0; 1084 right: 0; 1085 bottom: 0; 1086 left: 0; 1087 -webkit-transform-origin: 0 0; 1088 -webkit-transform: scale(1); 1089 pointer-events: none; 1090 } 1091 .aui-user-view-cell:last-child:after { 1092 border-bottom: 1px solid #c8c7cc; 1093 } 1094 1095 .aui-card .aui-user-view-cell:first-child:after{ 1096 border-top: 0; 1097 } 1098 .aui-card .aui-user-view-cell:last-child:after { 1099 border-bottom: 0; 1100 } 1101 .aui-content-padded .aui-user-view-cell:first-child:after{ 1102 border-top: 0; 1103 } 1104 .aui-content-padded .aui-user-view-cell:last-child:after { 1105 border-bottom: 0; 1106 } 1107 .aui-user-view-cell:active { 1108 background: #f4f4f4; 1109 } 1110 .aui-user-view-cell > a { 1111 position: relative; 1112 padding: inherit; 1113 margin: -11px -15px; 1114 display: block; 1115 overflow: hidden; 1116 color: inherit; 1117 text-overflow: ellipsis; 1118 white-space: nowrap; 1119 } 1120 .aui-user-view-cell > a.aui-active { 1121 background-color: #eee; 1122 } 1123 .aui-user-view-cell p { 1124 margin-top: 3px; 1125 margin-bottom: 0; 1126 font-size: 12px; 1127 } 1128 .aui-user-view-cell .aui-img, 1129 .aui-user-view-cell .aui-img-body { 1130 overflow: hidden; 1131 } 1132 .aui-user-view-cell .aui-img-body span { 1133 color: #333333; 1134 margin-top: 2px; 1135 font-weight: 400; 1136 font-size: 16px; 1137 width: 100%; 1138 } 1139 .aui-user-view-cell .aui-img-body span > em { 1140 font-weight: 400; 1141 font-size: 12px; 1142 color: #8f8f94; 1143 float: right; 1144 } 1145 .aui-user-view-cell .aui-img-object { 1146 max-width: 48px !important; 1147 height: 48px !important; 1148 line-height: 48px !important; 1149 border-radius: 50%; 1150 } 1151 1152 .aui-user-view-cell .aui-img-object.aui-pull-left { 1153 margin-right: 15px; 1154 } 1155 .aui-user-view-cell .aui-img-object.aui-pull-right { 1156 margin-left: 0px; 1157 } 1158 .aui-user-view-cell .aui-img-body.aui-arrow-right:after { 1159 font-family: 'auiicon'; 1160 font-size: inherit; 1161 line-height: 1; 1162 color: #bbbbbb; 1163 text-decoration: none; 1164 position: absolute; 1165 top: 50%; 1166 display: table; 1167 font-size: 20px; 1168 right: 15px; 1169 content: '\e6a3'; 1170 } 1171 1172 1173 1174 /*列表处理*/ 1175 .aui-content-padded > .aui-list-view:last-child , .aui-card > .aui-list-view:last-child { 1176 margin-bottom: 0; 1177 } 1178 .aui-content-padded > .aui-list-view:last-child:after, .aui-card > .aui-list-view:last-child:after { 1179 border-top: 0; 1180 } 1181 .aui-content-padded > .aui-list-view .aui-list-view-cell:after, .aui-card > .aui-list-view .aui-list-view-cell:after { 1182 left: 0; 1183 } 1184 .aui-content-padded .aui-list-view:before, .aui-card .aui-list-view:before { 1185 border-top: 0; 1186 } 1187 1188 1189 /*列表页角标靠右*/ 1190 .aui-list-view-cell > .aui-badge, 1191 .aui-list-view-cell > a > .aui-badge { 1192 position: absolute; 1193 top: 50%; 1194 right: 15px; 1195 -webkit-transform: translateY(-50%); 1196 transform: translateY(-50%); 1197 } 1198 .aui-list-view-cell > a.aui-arrow-right > .aui-badge { 1199 position: absolute; 1200 top: 50%; 1201 right: 30px; 1202 -webkit-transform: translateY(-50%); 1203 transform: translateY(-50%); 1204 } 1205 1206 1207 /*图文列表类*/ 1208 .aui-list-view .aui-img, 1209 .aui-list-view .aui-img-body { 1210 overflow: hidden; 1211 } 1212 1213 .aui-list-view .aui-img-object { 1214 max-width: 60px; 1215 height: 60px; 1216 line-height: 60px; 1217 } 1218 .aui-list-view .aui-img-object.aui-pull-left { 1219 margin-right: 15px; 1220 } 1221 .aui-list-view .aui-img-object.aui-pull-right { 1222 margin-left: 0px; 1223 } 1224 .aui-list-view.aui-grid-view { 1225 display: table; 1226 width: 100%; 1227 padding: 0 10px 10px 0; 1228 font-size: 0; 1229 white-space: normal; 1230 } 1231 1232 .aui-list-view.aui-grid-view .aui-list-view-cell { 1233 display: table-cell; 1234 padding: 10px 0 0 10px; 1235 text-align: center; 1236 vertical-align: middle; 1237 background: none; 1238 } 1239 .aui-list-view.aui-grid-view .aui-list-view-cell:after { 1240 border-bottom: 0; 1241 } 1242 .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-object { 1243 width: 100%; 1244 max-width: 100%; 1245 height: auto; 1246 } 1247 .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body { 1248 font-size: 14px; 1249 padding: 5px 0; 1250 } 1251 .aui-list-view.aui-grid-view .aui-list-view-cell > a:active, 1252 .aui-list-view.aui-grid-view .aui-list-view-cell:active { 1253 background: none; 1254 } 1255 .aui-list-view.aui-grid-view .aui-list-view-cell .aui-media-body { 1256 display: table-cell; 1257 width: 100%; 1258 height: 15px; 1259 margin-top: 8px; 1260 font-size: 15px; 1261 line-height: 15px; 1262 color: #333; 1263 text-overflow: ellipsis; 1264 } 1265 .aui-list-view.aui-grid-view .aui-list-view-cell:before, 1266 .aui-list-view.aui-grid-view .aui-list-view-cell:after { 1267 border-top: 0; 1268 } 1269 1270 .aui-thumb-view { 1271 overflow: hidden; 1272 padding: 10px 8px 5px 8px; 1273 } 1274 .aui-thumb-view .aui-list-view-cell { 1275 display: table-cell; 1276 padding: 0 2px 4px 2px; 1277 margin-right: 0px; 1278 margin-bottom: -4px; 1279 font-size: 17px; 1280 text-align: center; 1281 vertical-align: middle; 1282 background: none; 1283 } 1284 .aui-thumb-view .aui-list-view-cell .aui-img-object { 1285 width: 100%; 1286 max-width: 100%; 1287 height: auto; 1288 } 1289 .aui-thumb-view .aui-list-view-cell > a { 1290 margin: 0px 0 0 -8px; 1291 } 1292 .aui-thumb-view .aui-list-view-cell > a:active, 1293 .aui-thumb-view .aui-list-view-cell:active { 1294 background: none; 1295 } 1296 .aui-thumb-view .aui-list-view-cell:before, 1297 .aui-thumb-view .aui-list-view-cell:after { 1298 border-top: 0; 1299 } 1300 1301 /*9宫格*/ 1302 .aui-grid-nine { 1303 overflow: auto; 1304 background: #ffffff; 1305 position: relative; 1306 } 1307 .aui-grid-nine:after { 1308 display: block; 1309 content: ''; 1310 position: absolute; 1311 top: 0; 1312 right: 0; 1313 bottom: 0; 1314 left: 0; 1315 -webkit-transform-origin: 0 0; 1316 -webkit-transform: scale(1); 1317 pointer-events: none; 1318 border-top: 1px solid #c8c7cc; 1319 border-right: 1px solid #c8c7cc; 1320 } 1321 .aui-grid-nine li { 1322 float: left; 1323 position: relative; 1324 padding: 20px 10px; 1325 } 1326 .aui-grid-nine li:after { 1327 display: block; 1328 content: ''; 1329 position: absolute; 1330 top: 0; 1331 right: 0; 1332 bottom: 0; 1333 left: 0; 1334 -webkit-transform-origin: 0 0; 1335 -webkit-transform: scale(1); 1336 border-left: 1px solid #c8c7cc; 1337 border-bottom: 1px solid #c8c7cc; 1338 1339 } 1340 .aui-grid-nine li:nth-last-of-type(1),.aui-grid-nine li:nth-last-of-type(4),.aui-grid-nine li:nth-last-of-type(7){ 1341 border-right: 0px; 1342 } 1343 .aui-grid-nine li .aui-iconfont { 1344 font-size: 26px; 1345 display: inline-block; 1346 text-indent: center; 1347 margin-bottom: 5px; 1348 } 1349 .aui-grid-nine li p { 1350 margin-bottom: 0; 1351 } 1352 .aui-grid-nine li:active { 1353 background: #f4f4f4; 1354 } 1355 1356 /*16宫格*/ 1357 .aui-grid-sixteen { 1358 overflow: auto; 1359 background: #ffffff; 1360 position: relative; 1361 } 1362 .aui-grid-sixteen:after { 1363 display: block; 1364 content: ''; 1365 position: absolute; 1366 top: 0; 1367 right: 0; 1368 bottom: 0; 1369 left: 0; 1370 -webkit-transform-origin: 0 0; 1371 -webkit-transform: scale(1); 1372 pointer-events: none; 1373 border-top: 1px solid #c8c7cc; 1374 border-right: 1px solid #c8c7cc; 1375 } 1376 .aui-grid-sixteen li { 1377 float: left; 1378 position: relative; 1379 padding: 15px 10px; 1380 } 1381 .aui-grid-sixteen li:after { 1382 display: block; 1383 content: ''; 1384 position: absolute; 1385 top: 0; 1386 right: 0; 1387 bottom: 0; 1388 left: 0; 1389 -webkit-transform-origin: 0 0; 1390 -webkit-transform: scale(1); 1391 border-left: 1px solid #c8c7cc; 1392 border-bottom: 1px solid #c8c7cc; 1393 } 1394 .aui-grid-sixteen li:nth-last-of-type(1),.aui-grid-sixteen li:nth-last-of-type(5),.aui-grid-sixteen li:nth-last-of-type(9),.aui-grid-sixteen li:nth-last-of-type(13){ 1395 border-right: 0px; 1396 } 1397 .aui-grid-sixteen li .aui-iconfont { 1398 font-size: 26px; 1399 display: inline-block; 1400 text-indent: center; 1401 margin-bottom: 5px; 1402 } 1403 .aui-grid-sixteen li p { 1404 margin-bottom: 0; 1405 } 1406 .aui-grid-sixteen li:active { 1407 background: #f4f4f4; 1408 } 1409 1410 /*角标*/ 1411 .aui-badge { 1412 display: inline-block; 1413 padding: 3px 6px; 1414 font-size: 12px; 1415 line-height: 1; 1416 color: #333; 1417 background-color: #bdc3c7; 1418 border-radius: 100px; 1419 } 1420 1421 .aui-badge-primary { 1422 color: #ffffff; 1423 background-color: #1abc9c; 1424 } 1425 1426 .aui-badge-success { 1427 color: #ffffff; 1428 background-color: #2ecc71; 1429 } 1430 1431 .aui-badge-info { 1432 color: #ffffff; 1433 background-color: #3498db; 1434 } 1435 1436 .aui-badge-warning { 1437 color: #ffffff; 1438 background-color: #f1c40f; 1439 } 1440 1441 .aui-badge-danger { 1442 color: #ffffff; 1443 background-color: #e74c3c; 1444 } 1445 1446 1447 /*导航栏*/ 1448 .aui-bar { 1449 position: relative; 1450 top: 0; 1451 right: 0; 1452 left: 0; 1453 z-index: 10; 1454 width: 100%; 1455 background-color: #3498db; 1456 color: #ffffff; 1457 display: table; 1458 min-height: 45px; 1459 line-height: 45px; 1460 font-size: 18px; 1461 text-align: center; 1462 } 1463 .aui-title { 1464 position: absolute; 1465 width: 100%; 1466 margin: 0 -10px; 1467 text-align: center; 1468 white-space: nowrap; 1469 } 1470 1471 .aui-title a { 1472 color: inherit; 1473 } 1474 .aui-bar .aui-title { 1475 right: 80px; 1476 left: 80px; 1477 width: auto; 1478 margin: 0; 1479 overflow: hidden; 1480 text-overflow: ellipsis; 1481 } 1482 .aui-bar a { 1483 color: #ffffff; 1484 } 1485 1486 .aui-bar-dark { 1487 background-color: #34495e; 1488 } 1489 .aui-bar-primary { 1490 background-color: #1abc9c; 1491 } 1492 .aui-bar-info { 1493 background-color: #3498db; 1494 } 1495 .aui-bar-danger { 1496 background-color: #e74c3c; 1497 } 1498 .aui-bar-success { 1499 background-color: #2ecc71; 1500 } 1501 .aui-bar-warning { 1502 background-color: #f1c40f; 1503 } 1504 .aui-bar .aui-iconfont { 1505 position: relative; 1506 z-index: 20; 1507 font-size: 20px; 1508 color: #ffffff; 1509 font-size: 400; 1510 line-height: 45px; 1511 } 1512 .aui-bar .aui-pull-left { 1513 padding-left: 10px; 1514 font-size: 16px; 1515 font-weight: 400; 1516 } 1517 .aui-bar .aui-pull-right { 1518 padding-right: 10px; 1519 font-size: 16px; 1520 font-weight: 400; 1521 } 1522 .aui-bar .aui-btn { 1523 position: relative; 1524 z-index: 20; 1525 font-size: 16px; 1526 height: 45px; 1527 line-height: 45px; 1528 padding-top: 0; 1529 padding-bottom: 0; 1530 margin: 0; 1531 border-radius: 0; 1532 border: none; 1533 } 1534 .aui-bar .aui-btn:active { 1535 background: none; 1536 border: none; 1537 } 1538 .aui-bar .aui-btn .aui-iconfont { 1539 font-size: 22px; 1540 line-height: 45px; 1541 padding: 0; 1542 margin: 0; 1543 color: #ffffff; 1544 } 1545 1546 .aui-bar-nav { 1547 top: 0; 1548 } 1549 /*底部切换栏*/ 1550 .aui-nav { 1551 position: fixed; 1552 right: 0; 1553 left: 0; 1554 bottom: 0; 1555 z-index: 10; 1556 width: 100%; 1557 height: 55px; 1558 background-color: #fff; 1559 } 1560 .aui-nav .aui-bar-tab { 1561 width: 100%; 1562 background-color: #fff; 1563 display: box; 1564 display: -webkit-box; 1565 box-sizing: border-box; 1566 font-size: 12px; 1567 height: 55px; 1568 } 1569 .aui-nav .aui-bar-tab li { 1570 position: relative; 1571 text-align: center; 1572 color: #666; 1573 width: 100%; 1574 box-flex: 1; 1575 -webkit-box-flex: 1; 1576 box-sizing: border-box; 1577 } 1578 .aui-nav .aui-bar-tab p { 1579 font-size: 12px; 1580 margin-bottom: 0; 1581 } 1582 .aui-nav .aui-bar-tab .aui-iconfont { 1583 font-size: 22px; 1584 color: #8f8f94; 1585 padding-top: 5px; 1586 height: 30px; 1587 line-height: 30px; 1588 display: inline-block; 1589 } 1590 .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p { 1591 color: #16a085; 1592 } 1593 .aui-nav .aui-bar-tab .active-dark .aui-iconfont, .aui-nav .aui-bar-tab .active-dark p { 1594 color: #34495e; 1595 } 1596 .aui-nav .aui-bar-tab .active-primary .aui-iconfont, .aui-nav .aui-bar-tab .active-primary p { 1597 color: #1abc9c; 1598 } 1599 .aui-nav .aui-bar-tab .active-info .aui-iconfont, .aui-nav .aui-bar-tab .active-info p { 1600 color: #2980b9; 1601 } 1602 .aui-nav .aui-bar-tab .active-danger .aui-iconfont, .aui-nav .aui-bar-tab .active-danger p { 1603 color: #c0392b; 1604 } 1605 .aui-nav .aui-bar-tab .active-success .aui-iconfont, .aui-nav .aui-bar-tab .active-success p { 1606 color: #27ae60; 1607 } 1608 .aui-nav .aui-bar-tab .active-warning .aui-iconfont, .aui-nav .aui-bar-tab .active-warning p { 1609 color: #faa732; 1610 } 1611 1612 /*数字加减类*/ 1613 .aui-counter-box { 1614 width: 100%; 1615 padding: 5px 0; 1616 line-height: 30px; 1617 } 1618 .aui-counter-list .aui-checkbox, .aui-counter-list .aui-radio { 1619 margin: 0; 1620 margin-top: 16px; 1621 margin-right: 15px; 1622 } 1623 .aui-counter { 1624 display: table; 1625 } 1626 .aui-counter-minus, 1627 .aui-counter-plus, 1628 input.aui-counter-input { 1629 display: table-cell; 1630 height: 30px; 1631 vertical-align: top; 1632 text-align: center; 1633 font-size: 14px; 1634 line-height: 28px; 1635 -webkit-appearance: none; 1636 border-radius: 0; 1637 margin:0; 1638 } 1639 .aui-counter-minus, 1640 .aui-counter-plus { 1641 width: 28px; 1642 background-color: #ffffff; 1643 border: 1px solid #e6e4e3; 1644 color: #1abc9c; 1645 } 1646 .aui-counter.aui-success .aui-counter-minus, 1647 .aui-counter.aui-success .aui-counter-plus { 1648 color: #2ecc71; 1649 } 1650 1651 .aui-counter.aui-info .aui-counter-minus, 1652 .aui-counter.aui-info .aui-counter-plus { 1653 color: #3498db; 1654 } 1655 1656 .aui-counter.aui-warning .aui-counter-minus, 1657 .aui-counter.aui-warning .aui-counter-plus { 1658 color: #f1c40f; 1659 } 1660 1661 .aui-counter.aui-danger .aui-counter-minus, 1662 .aui-counter.aui-danger .aui-counter-plus { 1663 color: #e74c3c; 1664 } 1665 .aui-counter-minus.aui-disabled, 1666 .aui-counter-plus.aui-disabled { 1667 background-color: #e7e7e7; 1668 color: #999 !important; 1669 } 1670 .aui-counter-minus:before { 1671 font-family: "auiicon"; 1672 font-style: normal; 1673 -webkit-font-smoothing: antialiased; 1674 -webkit-text-stroke-width: 0.2px; 1675 content: "\e768"; 1676 font-size: 16px; 1677 line-height: 27px; 1678 } 1679 .aui-counter-plus:before { 1680 font-family: "auiicon"; 1681 font-style: normal; 1682 -webkit-font-smoothing: antialiased; 1683 -webkit-text-stroke-width: 0.2px; 1684 content: "\e767"; 1685 1686 font-size: 16px; 1687 line-height: 27px; 1688 } 1689 input.aui-counter-input { 1690 width: 35px; 1691 border-style: solid none; 1692 border-width: 1px; 1693 border-color: #e6e4e3; 1694 color: #262626; 1695 background-color: #ffffff; 1696 text-align: center; 1697 padding: 0; 1698 } 1699 1700 /*loading*/ 1701 .aui-loading { 1702 width: 48px; 1703 height: 48px; 1704 position: fixed; 1705 top: 50%; 1706 left: 50%; 1707 margin-left: -24px; 1708 margin-top: -48px; 1709 z-index: 9999; 1710 color: #ffffff; 1711 background-color: rgba(0,0,0,.6) !important; 1712 border-radius: 50%; 1713 text-align: center; 1714 line-height: 48px; 1715 font-size: 20px; 1716 } 1717 1718 .aui-loading-1, .aui-loading-2 { 1719 width: 100%; 1720 height: 100%; 1721 border-radius: 50%; 1722 background-color: #67cf22; 1723 opacity: 1; 1724 position: absolute; 1725 top: 0; 1726 left: 0; 1727 -webkit-animation: bounce 2.0s infinite ease-in-out; 1728 animation: bounce 2.0s infinite ease-in-out; 1729 } 1730 1731 .aui-loading-2 { 1732 background-color: #ffcc00; 1733 -webkit-animation-delay: -1.0s; 1734 animation-delay: -1.0s; 1735 } 1736 1737 1738 /*switch开关*/ 1739 .aui-switch-title { 1740 float: left; 1741 line-height: 26px; 1742 } 1743 .aui-switch { 1744 width: 46px; 1745 height: 26px; 1746 margin: 0 10px; 1747 position: relative; 1748 border: 1px solid #dddddd; 1749 background-color: #ffffff; 1750 box-shadow: #dfdfdf 0 0 0 0 inset; 1751 border-radius: 13px; 1752 background-clip: content-box; 1753 display: inline-block; 1754 -webkit-appearance: none; 1755 user-select: none; 1756 outline: none; 1757 transition: border cubic-bezier(0, 0, 0, 1) 0.2s, 1758 box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; 1759 } 1760 .aui-switch:before { 1761 width: 24px; 1762 height: 24px; 1763 position: absolute; 1764 top: 0px; 1765 left: 0px; 1766 border-radius: 13px; 1767 background-color: #fff; 1768 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 1769 content: ''; 1770 transition: left 0.2s; 1771 } 1772 .aui-switch:checked { 1773 border-color: #1abc9c; 1774 box-shadow: #1abc9c 0 0 0 26px inset; 1775 background-color: #1abc9c; 1776 transition: border ease 0.2s, 1777 box-shadow ease 0.2s, 1778 background-color ease 0.6s; 1779 } 1780 .aui-switch.aui-switch-info:checked { 1781 border-color: #3498db; 1782 box-shadow: #3498db 0 0 0 26px inset; 1783 background-color: #3498db; 1784 } 1785 .aui-switch.aui-switch-success:checked { 1786 border-color: #2ecc71; 1787 box-shadow: #2ecc71 0 0 0 26px inset; 1788 background-color: #2ecc71; 1789 } 1790 .aui-switch.aui-switch-danger:checked { 1791 border-color: #e74c3c; 1792 box-shadow: #e74c3c 0 0 0 26px inset; 1793 background-color: #e74c3c; 1794 } 1795 .aui-switch.aui-switch-warning:checked { 1796 border-color: #f1c40f; 1797 box-shadow: #f1c40f 0 0 0 26px inset; 1798 background-color: #f1c40f; 1799 } 1800 .aui-switch:checked:before { 1801 left: 20px; 1802 transition: left 0.2s; 1803 } 1804 1805 /*聊天 会话*/ 1806 .aui-chat-receiver{ 1807 clear:both; 1808 } 1809 .aui-chat-receiver p { 1810 font-size: 12px; 1811 } 1812 .aui-chat-receiver .aui-chat-receiver-avatar{ 1813 float: left; 1814 } 1815 .aui-chat-receiver .aui-chat-receiver-avatar img { 1816 width: 50px; 1817 height: 50px; 1818 border-radius: 50%; 1819 } 1820 .aui-chat-receiver .aui-chat-receiver-cont{ 1821 background: #ffffff; 1822 float: left; 1823 margin: 0 20px 10px 15px; 1824 padding: 10px; 1825 border-radius:7px; 1826 max-width: 60%; 1827 position: relative; 1828 min-height: 20px; 1829 } 1830 .aui-chat-receiver-cont .aui-chat-status { 1831 color: #666; 1832 background: #ffffff; 1833 position: absolute; 1834 right: -36px; 1835 top: 6px; 1836 font-size: 12px; 1837 width: 30px; 1838 height: 30px; 1839 text-align: center; 1840 line-height: 30px; 1841 border-radius: 15px; 1842 } 1843 1844 .aui-chat-sender{ 1845 clear:both; 1846 } 1847 .aui-chat-sender p { 1848 color: #fff; 1849 font-size: 12px; 1850 } 1851 .aui-chat-sender .aui-chat-sender-avatar{ 1852 float: right; 1853 } 1854 1855 .aui-chat-sender .aui-chat-sender-avatar img { 1856 width: 50px; 1857 height: 50px; 1858 border-radius: 50%; 1859 } 1860 .aui-chat-sender .aui-chat-sender-cont{ 1861 float:right; 1862 background: #15b5e9; 1863 margin: 0 10px 10px 20px; 1864 padding: 10px; 1865 border-radius:7px; 1866 color: #ffffff; 1867 max-width: 60%; 1868 position: relative; 1869 min-height: 20px; 1870 } 1871 .aui-chat-sender-cont .aui-chat-status { 1872 color: #666; 1873 background: #ffffff; 1874 position: absolute; 1875 left: -36px; 1876 top: 6px; 1877 font-size: 12px; 1878 width: 30px; 1879 height: 30px; 1880 text-align: center; 1881 line-height: 30px; 1882 border-radius: 15px; 1883 } 1884 .aui-chat-left-triangle{ 1885 height:0px; 1886 width:0px; 1887 border-width:8px; 1888 border-style:solid; 1889 border-color:transparent #ffffff transparent transparent; 1890 position: absolute; 1891 left:-16px; 1892 top:6px; 1893 } 1894 .aui-chat-right-triangle{ 1895 height:0px; 1896 width:0px; 1897 border-width:8px; 1898 border-style:solid; 1899 border-color:transparent transparent transparent #15b5e9; 1900 position: absolute; 1901 right:-16px; 1902 top:6px; 1903 } 1904 .aui-chat-sender .aui-chat-sender-cont span, 1905 .aui-chat-receiver .aui-chat-receiver-cont span{ 1906 word-break:break-all; 1907 } 1908 .aui-chat-img img { 1909 width: 100%; 1910 } 1911 .aui-chat-status i.aui-chat-progress { 1912 color: #666; 1913 -webkit-animation: rotate 1s infinite linear; 1914 } 1915 /*tab切换类*/ 1916 .aui-tab { 1917 width: 100%; 1918 overflow: hidden; 1919 } 1920 .aui-tab-nav { 1921 width: 100%; 1922 display: box; 1923 display: -webkit-box; 1924 font-size: 16px; 1925 height: 45px; 1926 box-sizing: border-box; 1927 overflow: hidden; 1928 background-color: #fff; 1929 } 1930 .aui-tab-nav li { 1931 height: 45px; 1932 line-height: 45px; 1933 min-width: 70px; 1934 box-flex: 1; 1935 -webkit-box-flex: 1; 1936 text-align: center; 1937 color: #666; 1938 box-sizing: border-box; 1939 border-bottom: 2px solid transparent; 1940 width: 100%; 1941 } 1942 .aui-tab-nav li.active { 1943 color: #1abc9c; 1944 border-bottom: 2px #1abc9c solid; 1945 -webkit-animation: fadeIn .5s ease both; 1946 animation: fadeIn .5s ease both; 1947 } 1948 .aui-tab-nav.aui-tab-border { 1949 background-color: transparent; 1950 border: 1px solid #1abc9c; 1951 border-radius: 3px; 1952 } 1953 .aui-tab-nav.aui-tab-border li { 1954 width: 1%; 1955 overflow: hidden; 1956 line-height: 43px; 1957 color: #1abc9c; 1958 background-color: #ffffff; 1959 border-color: #1abc9c; 1960 border-left: 1px solid #1abc9c; 1961 } 1962 .aui-tab-nav.aui-tab-border li:first-child { 1963 border-left: 0px solid #1abc9c; 1964 } 1965 .aui-tab-nav.aui-tab-border li.active { 1966 background-color: #1abc9c; 1967 color: #fff; 1968 -webkit-animation: fadeIn .5s ease both; 1969 animation: fadeIn .5s ease both; 1970 } 1971 /* 1972 *瀑布流样式 1973 */ 1974 .aui-waterfall{ 1975 width: 100%; 1976 position:relative; 1977 } 1978 .aui-waterfall li{ 1979 width:100%; 1980 position: relative; 1981 margin-bottom: 10px; 1982 } 1983 .aui-waterfall li:after { 1984 display: block; 1985 content: ''; 1986 position: absolute; 1987 top: 0; 1988 right: 0; 1989 bottom: 0; 1990 left: 0; 1991 -webkit-transform-origin: 0 0; 1992 -webkit-transform: scale(1); 1993 pointer-events: none; 1994 border: 1px solid #c8c7cc; 1995 } 1996 .aui-waterfall .aui-waterfall-header img{ 1997 width: 100%; 1998 margin: 0; 1999 display: block; 2000 } 2001 .aui-waterfall .aui-waterfall-body { 2002 background: #ffffff; 2003 color: #666; 2004 padding: 10px; 2005 font-size: 0.8em; 2006 } 2007 .aui-waterfall .aui-waterfall-footer { 2008 background: #f4f4f4; 2009 padding: 10px; 2010 font-size: 0.75em; 2011 color: #666; 2012 } 2013 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 2014 .aui-line-x:after, 2015 .aui-card:after, 2016 .aui-input-row:first-child:after, 2017 .aui-input-row:after, 2018 .aui-btn-row:after, 2019 .aui-list-view-cell:first-child:after, 2020 .aui-list-view-cell:last-child:after, 2021 .aui-list-view-cell:after, 2022 .aui-user-view-cell:first-child:after, 2023 .aui-user-view-cell:last-child:after, 2024 .aui-user-view-cell:after, 2025 .aui-grid-nine:after, 2026 .aui-grid-nine li:after, 2027 .aui-grid-sixteen:after, 2028 .aui-grid-sixteen li:after, 2029 .aui-waterfall li:after { 2030 right: -100%; 2031 bottom: -100%; 2032 -webkit-transform: scale(0.5); 2033 } 2034 } 2035 @-webkit-keyframes rotate { 2036 0% { -webkit-transform: rotate(0deg); } 2037 100% { -webkit-transform: rotate(360deg); } 2038 } 2039 @-webkit-keyframes bounce { 2040 0%, 100% {-webkit-transform: scale(0.0) } 2041 50% {-webkit-transform: scale(1.0)} 2042 } 2043 @keyframes bounce { 2044 0%, 100% { 2045 -webkit-transform: scale(0.0); 2046 transform: scale(0.0); 2047 } 2048 50% { 2049 -webkit-transform: scale(1.0); 2050 transform: scale(1.0); 2051 } 2052 } 2053 @-webkit-keyframes fadeIn { 2054 from { opacity: 0.3; } 2055 to { } 2056 } 2057 /*图标*/ 2058 @font-face {font-family: "auiicon"; 2059 src: url('aui_iconfont.ttf') format('truetype'); 2060 } 2061 .aui-iconfont { 2062 position: relative; 2063 font-family:"auiicon" !important; 2064 font-size:16px; 2065 font-style:normal; 2066 -webkit-font-smoothing: antialiased; 2067 -moz-osx-font-smoothing: grayscale; 2068 } 2069 .aui-icon-appreciate:before { content: "\e644"; } 2070 .aui-icon-check:before { content: "\e645"; } 2071 .aui-icon-close:before { content: "\e646"; } 2072 .aui-icon-edit:before { content: "\e649"; } 2073 .aui-icon-emoji:before { content: "\e64a"; } 2074 .aui-icon-favorfill:before { content: "\e64b"; } 2075 .aui-icon-favor:before { content: "\e64c"; } 2076 .aui-icon-loading:before { content: "\e64f"; } 2077 .aui-icon-locationfill:before { content: "\e650"; } 2078 .aui-icon-location:before { content: "\e651"; } 2079 .aui-icon-phone:before { content: "\e652"; } 2080 .aui-icon-roundcheckfill:before { content: "\e656"; } 2081 .aui-icon-roundcheck:before { content: "\e657"; } 2082 .aui-icon-roundclosefill:before { content: "\e658"; } 2083 .aui-icon-roundclose:before { content: "\e659"; } 2084 .aui-icon-roundrightfill:before { content: "\e65a"; } 2085 .aui-icon-roundright:before { content: "\e65b"; } 2086 .aui-icon-search:before { content: "\e65c"; } 2087 .aui-icon-timefill:before { content: "\e65e"; } 2088 .aui-icon-time:before { content: "\e65f"; } 2089 .aui-icon-taxi:before { content: "\e65d"; } 2090 .aui-icon-unfold:before { content: "\e661"; } 2091 .aui-icon-warnfill:before { content: "\e662"; } 2092 .aui-icon-warn:before { content: "\e663"; } 2093 .aui-icon-camerafill:before { content: "\e664"; } 2094 .aui-icon-camera:before { content: "\e665"; } 2095 .aui-icon-commentfill:before { content: "\e666"; } 2096 .aui-icon-comment:before { content: "\e667"; } 2097 .aui-icon-likefill:before { content: "\e668"; } 2098 .aui-icon-like:before { content: "\e669"; } 2099 .aui-icon-notificationfill:before { content: "\e66a"; } 2100 .aui-icon-notification:before { content: "\e66b"; } 2101 .aui-icon-order:before { content: "\e66c"; } 2102 .aui-icon-samefill:before { content: "\e66d"; } 2103 .aui-icon-same:before { content: "\e66e"; } 2104 .aui-icon-deliver:before { content: "\e671"; } 2105 .aui-icon-evaluate:before { content: "\e672"; } 2106 .aui-icon-pay:before { content: "\e673"; } 2107 .aui-icon-send:before { content: "\e675"; } 2108 .aui-icon-shop:before { content: "\e676"; } 2109 .aui-icon-ticket:before { content: "\e677"; } 2110 .aui-icon-left:before { content: "\e679"; } 2111 .aui-icon-cascades:before { content: "\e67c"; } 2112 .aui-icon-discover:before { content: "\e67e"; } 2113 .aui-icon-list:before { content: "\e682"; } 2114 .aui-icon-more:before { content: "\e684"; } 2115 .aui-icon-myfill:before { content: "\e685"; } 2116 .aui-icon-my:before { content: "\e686"; } 2117 .aui-icon-scan:before { content: "\e689"; } 2118 .aui-icon-settings:before { content: "\e68a"; } 2119 .aui-icon-questionfill:before { content: "\e690"; } 2120 .aui-icon-question:before { content: "\e691"; } 2121 .aui-icon-shopfill:before { content: "\e697"; } 2122 .aui-icon-form:before { content: "\e699"; } 2123 .aui-icon-pic:before { content: "\e69b"; } 2124 .aui-icon-filter:before { content: "\e69c"; } 2125 .aui-icon-footprint:before { content: "\e69d"; } 2126 .aui-icon-top:before { content: "\e69e"; } 2127 .aui-icon-pulldown:before { content: "\e69f"; } 2128 .aui-icon-pullup:before { content: "\e6a0"; } 2129 .aui-icon-right:before { content: "\e6a3"; } 2130 .aui-icon-refresh:before { content: "\e6a4"; } 2131 .aui-icon-moreandroid:before { content: "\e6a5"; } 2132 .aui-icon-deletefill:before { content: "\e6a6"; } 2133 .aui-icon-refund:before { content: "\e6ac"; } 2134 .aui-icon-cart:before { content: "\e6af"; } 2135 .aui-icon-qrcode:before { content: "\e6b0"; } 2136 .aui-icon-remind:before { content: "\e6b2"; } 2137 .aui-icon-delete:before { content: "\e6b4"; } 2138 .aui-icon-profile:before { content: "\e6b7"; } 2139 .aui-icon-home:before { content: "\e6b8"; } 2140 .aui-icon-cartfill:before { content: "\e6b9"; } 2141 .aui-icon-discoverfill:before { content: "\e6ba"; } 2142 .aui-icon-homefill:before { content: "\e6bb"; } 2143 .aui-icon-message:before { content: "\e6bc"; } 2144 .aui-icon-addressbook:before { content: "\e6bd"; } 2145 .aui-icon-link:before { content: "\e6bf"; } 2146 .aui-icon-lock:before { content: "\e6c0"; } 2147 .aui-icon-unlock:before { content: "\e6c2"; } 2148 .aui-icon-vip:before { content: "\e6c3"; } 2149 .aui-icon-activity:before { content: "\e6c5"; } 2150 .aui-icon-friendaddfill:before { content: "\e6c9"; } 2151 .aui-icon-friendadd:before { content: "\e6ca"; } 2152 .aui-icon-friendfamous:before { content: "\e6cb"; } 2153 .aui-icon-friend:before { content: "\e6cc"; } 2154 .aui-icon-goods:before { content: "\e6cd"; } 2155 .aui-icon-selection:before { content: "\e6ce"; } 2156 .aui-icon-explore:before { content: "\e6d2"; } 2157 .aui-icon-present:before { content: "\e6d3"; } 2158 .aui-icon-squarecheckfill:before { content: "\e6d4"; } 2159 .aui-icon-square:before { content: "\e6d5"; } 2160 .aui-icon-squarecheck:before { content: "\e6d6"; } 2161 .aui-icon-round:before { content: "\e6d7"; } 2162 .aui-icon-roundaddfill:before { content: "\e6d8"; } 2163 .aui-icon-roundadd:before { content: "\e6d9"; } 2164 .aui-icon-add:before { content: "\e6da"; } 2165 .aui-icon-notificationforbidfill:before { content: "\e6db"; } 2166 .aui-icon-explorefill:before { content: "\e6dd"; } 2167 .aui-icon-fold:before { content: "\e6de"; } 2168 .aui-icon-game:before { content: "\e6df"; } 2169 .aui-icon-redpacket:before { content: "\e6e0"; } 2170 .aui-icon-selectionfill:before { content: "\e6e1"; } 2171 .aui-icon-similar:before { content: "\e6e2"; } 2172 .aui-icon-appreciatefill:before { content: "\e6e3"; } 2173 .aui-icon-infofill:before { content: "\e6e4"; } 2174 .aui-icon-info:before { content: "\e6e5"; } 2175 .aui-icon-forwardfill:before { content: "\e6ea"; } 2176 .aui-icon-forward:before { content: "\e6eb"; } 2177 .aui-icon-rechargefill:before { content: "\e6ec"; } 2178 .aui-icon-recharge:before { content: "\e6ed"; } 2179 .aui-icon-vipcard:before { content: "\e6ee"; } 2180 .aui-icon-voice:before { content: "\e6ef"; } 2181 .aui-icon-voicefill:before { content: "\e6f0"; } 2182 .aui-icon-friendfavor:before { content: "\e6f1"; } 2183 .aui-icon-wifi:before { content: "\e6f2"; } 2184 .aui-icon-share:before { content: "\e6f3"; } 2185 .aui-icon-wefill:before { content: "\e6f4"; } 2186 .aui-icon-we:before { content: "\e6f5"; } 2187 .aui-icon-lightauto:before { content: "\e6f6"; } 2188 .aui-icon-lightforbid:before { content: "\e6f7"; } 2189 .aui-icon-lightfill:before { content: "\e6f8"; } 2190 .aui-icon-camerarotate:before { content: "\e6f9"; } 2191 .aui-icon-light:before { content: "\e6fa"; } 2192 .aui-icon-barcode:before { content: "\e6fb"; } 2193 .aui-icon-flashlightclose:before { content: "\e6fc"; } 2194 .aui-icon-flashlightopen:before { content: "\e6fd"; } 2195 .aui-icon-searchlist:before { content: "\e6fe"; } 2196 .aui-icon-service:before { content: "\e6ff"; } 2197 .aui-icon-sort:before { content: "\e700"; } 2198 .aui-icon-down:before { content: "\e703"; } 2199 .aui-icon-mobile:before { content: "\e704"; } 2200 .aui-icon-mobilefill:before { content: "\e705"; } 2201 .aui-icon-copy:before { content: "\e706"; } 2202 .aui-icon-countdownfill:before { content: "\e707"; } 2203 .aui-icon-countdown:before { content: "\e708"; } 2204 .aui-icon-noticefill:before { content: "\e709"; } 2205 .aui-icon-notice:before { content: "\e70a"; } 2206 .aui-icon-upstagefill:before { content: "\e70e"; } 2207 .aui-icon-upstage:before { content: "\e70f"; } 2208 .aui-icon-choicenessfill:before { content: "\e714"; } 2209 .aui-icon-choiceness:before { content: "\e715"; } 2210 .aui-icon-clothesfill:before { content: "\e716"; } 2211 .aui-icon-clothes:before { content: "\e717"; } 2212 .aui-icon-creativefill:before { content: "\e718"; } 2213 .aui-icon-creative:before { content: "\e719"; } 2214 .aui-icon-female:before { content: "\e71a"; } 2215 .aui-icon-keyboard:before { content: "\e71b"; } 2216 .aui-icon-male:before { content: "\e71c"; } 2217 .aui-icon-pullleft:before { content: "\e71f"; } 2218 .aui-icon-pullright:before { content: "\e720"; } 2219 .aui-icon-rankfill:before { content: "\e721"; } 2220 .aui-icon-rank:before { content: "\e722"; } 2221 .aui-icon-bad:before { content: "\e723"; } 2222 .aui-icon-cameraadd:before { content: "\e724"; } 2223 .aui-icon-focus:before { content: "\e725"; } 2224 .aui-icon-friendfill:before { content: "\e726"; } 2225 .aui-icon-cameraaddfill:before { content: "\e727"; } 2226 .aui-icon-apps:before { content: "\e729"; } 2227 .aui-icon-paintfill:before { content: "\e72a"; } 2228 .aui-icon-paint:before { content: "\e72b"; } 2229 .aui-icon-picfill:before { content: "\e72c"; } 2230 .aui-icon-refresharrow:before { content: "\e72d"; } 2231 .aui-icon-markfill:before { content: "\e730"; } 2232 .aui-icon-mark:before { content: "\e731"; } 2233 .aui-icon-presentfill:before { content: "\e732"; } 2234 .aui-icon-repeal:before { content: "\e733"; } 2235 .aui-icon-album:before { content: "\e734"; } 2236 .aui-icon-peoplefill:before { content: "\e735"; } 2237 .aui-icon-people:before { content: "\e736"; } 2238 .aui-icon-servicefill:before { content: "\e737"; } 2239 .aui-icon-repair:before { content: "\e738"; } 2240 .aui-icon-file:before { content: "\e739"; } 2241 .aui-icon-repairfill:before { content: "\e73a"; } 2242 .aui-icon-taoxiaopu:before { content: "\e73b"; } 2243 .aui-icon-attentionfill:before { content: "\e73c"; } 2244 .aui-icon-attention:before { content: "\e73d"; } 2245 .aui-icon-commandfill:before { content: "\e73e"; } 2246 .aui-icon-command:before { content: "\e73f"; } 2247 .aui-icon-communityfill:before { content: "\e740"; } 2248 .aui-icon-community:before { content: "\e741"; } 2249 .aui-icon-read:before { content: "\e742"; } 2250 .aui-icon-calendar:before { content: "\e74a"; } 2251 .aui-icon-cut:before { content: "\e74b"; } 2252 .aui-icon-magic:before { content: "\e74c"; } 2253 .aui-icon-backwardfill:before { content: "\e74d"; } 2254 .aui-icon-forwardfill1:before { content: "\e74e"; } 2255 .aui-icon-playfill:before { content: "\e74f"; } 2256 .aui-icon-stop:before { content: "\e750"; } 2257 .aui-icon-tagfill:before { content: "\e751"; } 2258 .aui-icon-tag:before { content: "\e752"; } 2259 .aui-icon-group:before { content: "\e753"; } 2260 .aui-icon-move:before { content: "\e754"; } 2261 .aui-icon-all:before { content: "\e755"; } 2262 .aui-icon-backdelete:before { content: "\e756"; } 2263 .aui-icon-hotfill:before { content: "\e757"; } 2264 .aui-icon-hot:before { content: "\e758"; } 2265 .aui-icon-post:before { content: "\e759"; } 2266 .aui-icon-radiobox:before { content: "\e75b"; } 2267 .aui-icon-rounddown:before { content: "\e75c"; } 2268 .aui-icon-upload:before { content: "\e75d"; } 2269 .aui-icon-videofill:before { content: "\e75e"; } 2270 .aui-icon-video:before { content: "\e75f"; } 2271 .aui-icon-writefill:before { content: "\e760"; } 2272 .aui-icon-write:before { content: "\e761"; } 2273 .aui-icon-radioboxfill:before { content: "\e763"; } 2274 .aui-icon-punch:before { content: "\e764"; } 2275 .aui-icon-shake:before { content: "\e765"; } 2276 .aui-icon-add1:before { content: "\e767"; } 2277 .aui-icon-move1:before { content: "\e768"; } 2278 .aui-icon-safe:before { content: "\e769"; } 2279 .aui-icon-activityfill:before { content: "\e775"; } 2280 .aui-icon-crownfill:before { content: "\e776"; } 2281 .aui-icon-crown:before { content: "\e777"; } 2282 .aui-icon-goodsfill:before { content: "\e778"; } 2283 .aui-icon-messagefill:before { content: "\e779"; } 2284 .aui-icon-profilefill:before { content: "\e77a"; } 2285 .aui-icon-sound:before { content: "\e77b"; } 2286 .aui-icon-sponsorfill:before { content: "\e77c"; } 2287 .aui-icon-weunblock:before { content: "\e780"; } 2288 .aui-icon-weblock:before { content: "\e77f"; } 2289 .aui-icon-upblock:before { content: "\e77e"; } 2290 .aui-icon-sponsor:before { content: "\e77d"; } 2291 .aui-icon-babyfill:before { content: "\e710"; } 2292 .aui-icon-baby:before { content: "\e711"; }