123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353 |
- @charset "utf-8";
- /*
- * 样式重置
- */
- *,
- *::before,
- *::after{
- box-sizing:border-box;
- }
- html {
- font-size: 100%;
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
- }
- body {
- margin: 0;
- padding: 0;
- font-family:"微软雅黑","PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif;
- font-size:14px;
- color:#333;
- word-break:break-all;
- }
- body::before{
- content:'';
- display: table;
- height:0;
- width:100%;
- }
- ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,hgroup,p,blockquote,figure,form,fieldset,input,legend,pre,abbr,button {
- margin: 0;
- padding: 0;
- }
- label,
- a,
- select,
- button,
- input {
- -webkit-appearance:none;
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- }
- input::-webkit-input-placeholder,
- textarea::-webkit-input-placeholder,
- input::placeholder,
- textarea::placeholder{
- color:#999;
- }
- button:focus,
- select:focus,
- input:focus,
- textarea:focus {
- outline:0;
- }
- li {
- list-style:none;
- }
- a {
- color:inherit;
- text-decoration:none;
- }
- table {
- width:100%;
- border-collapse:collapse;
- }
- td {
- padding:0 0.4em;
- }
- img {
- display:block;
- max-width:100%;
- }
- small {
- font-size:60%;
- }
- big {
- font-size:120%;
- }
- strong,h1,h2,h3,h4 {
- font-weight:400;
- }
- /*
- * 修复页面效果不按照指定样式渲染的bug
- */
- div,
- p,
- a {
- max-height:9999px;
- }
- /*超出出现省略号*/
- .ellipsis{
- white-space:nowrap;
- overflow:hidden;
- text-overflow:ellipsis;
- }
- /*通用清除浮动*/
- .clearfix:before,.clearfix:after{
- content:"";
- display:table;
- clear:both;
- }
- .clearfix{
- *zoom:1;/*IE/7/6*/
- }
- /*
- * layout(布局)
- */
- .layout-container{
- height:100%;
- overflow-y: scroll;
- -webkit-overflow-scrolling:touch;
- }
- .layout-boxs {
- background-color:#fff;
- }
- .layout-boxs+.layout-boxs {
- margin-top:.5rem;
- }
- .layout-boxs::before{
- background-color:#d9d9d9;
- }
- .layout-box,
- .layout-tr-center,
- .layout-tr,
- .layout-tr-top {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- }
- .layout-box,
- .layout-tr-center,
- .layout-tr {
- -webkit-box-align: center;
- -webkit-align-items: center;
- align-items: center;
- }
- .layout-box {
- padding:15px;
- }
- .layout-tr-center {
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
- .layout-tr.vertical {
- -webkit-box-orient:vertical;
- -webkit-flex-direction:column;
- flex-direction:column;
- }
- .layout-td {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- flex: 1;
- }
- /*动画*/
- .animated {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- @-webkit-keyframes fadeInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0)
- }
- 100% {
- opacity: 1;
- -webkit-transform: none;
- transform: none
- }
- }
- @keyframes fadeInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- -ms-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0)
- }
- 100% {
- opacity: 1;
- -webkit-transform: none;
- -ms-transform: none;
- transform: none
- }
- }
- .fadeInDown {
- -webkit-animation-name: fadeInDown;
- animation-name: fadeInDown
- }
- @-webkit-keyframes fadeInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0)
- }
- 100% {
- opacity: 1;
- -webkit-transform: none;
- transform: none
- }
- }
- @keyframes fadeInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- -ms-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0)
- }
- 100% {
- opacity: 1;
- -webkit-transform: none;
- -ms-transform: none;
- transform: none
- }
- }
- .fadeInUp {
- -webkit-animation-name: fadeInUp;
- animation-name: fadeInUp
- }
- @-webkit-keyframes shake {
- 0%,
- 80%,
- 90%,
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0)
- }
- 10%,
- 30%,
- 50%,
- 70%{
- -webkit-transform: translate3d(-3px, 0, 0);
- -ms-transform: translate3d(-3px, 0, 0);
- transform: translate3d(-3px, 0, 0)
- }
- 20%,
- 40%,
- 60%{
- -webkit-transform: translate3d(3px, 0, 0);
- -ms-transform: translate3d(3px, 0, 0);
- transform: translate3d(3px, 0, 0)
- }
- }
- @keyframes shake {
- 0%,
- 80%,
- 90%,
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0)
- }
- 10%,
- 30%,
- 50%,
- 70%{
- -webkit-transform: translate3d(-3px, 0, 0);
- -ms-transform: translate3d(-3px, 0, 0);
- transform: translate3d(-3px, 0, 0)
- }
- 20%,
- 40%,
- 60%{
- -webkit-transform: translate3d(3px, 0, 0);
- -ms-transform: translate3d(3px, 0, 0);
- transform: translate3d(3px, 0, 0)
- }
- }
- .shake {
- -webkit-animation-name: shake;
- animation-name: shake;
- animation-iteration-count:infinite;
- -webkit-animation-iteration-count:infinite;
- }
- @keyframes slideInLeft {
- from {
- transform: translate3d(-100%, 0, 0);
- visibility: visible;
- opacity: 1;
- }
- to {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes slideInDown {
- from {
- transform: translate3d(0, -100%, 0);
- visibility: visible;
- opacity: 1;
- }
- to {
- transform: translate3d(0, 0, 0);
- opacity: 1;
- }
- }
- .slideInDown {
- animation-name: slideInDown;
- }
- .slideInLeft {
- animation-name: slideInLeft;
- }
- @keyframes slideInUp {
- from {
- transform: translate3d(0, 100%, 0);
- visibility: visible;
- opacity: 1;
- }
- to {
- transform: translate3d(0, 0, 0);
- opacity: 1;
- }
- }
- .slideInUp {
- animation-name: slideInUp;
- }
- @keyframes flash {
- 0%,
- 20%,
- 50%,
- to{opacity: 1;}
-
- 10%,
- 30%{opacity: 0;}
- }
- .flash {
- -webkit-animation-duration: 2s;
- animation-duration:2s;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- animation-name: flash;
- animation-iteration-count:3;
- -webkit-animation-iteration-count:3;
- }
|