@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; }