css ui/** 初始化 **/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0);} a:active,a:hover{outline:0} img{display: inline-block; border: none; vertical-align: middle;} li{list-style:none;} table{border-collapse: collapse; border-spacing: 0;} h1,h2,h3,h4{font-weight: 700;} h5,h6{font-weight: 500; font-size: 100%;} button,input,select,textarea{font-size: 100%; } input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;} pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;} /** 初始化全局标签 **/ body{line-height: 1.6; color: #333; color: rgba(0,0,0,.85); font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;} hr{height: 0; line-height: 0; margin: 10px 0; padding: 0; border: none!important; border-bottom: 1px solid #eee !important; clear: both; overflow: hidden; background: none;} a{color: #333; text-decoration:none;} a:hover{color: #777;} a cite{font-style: normal; *cursor:pointer;} /** 基础通用 **/ .border-box, .border-box *{box-sizing: border-box;} /* 消除第三方ui可能造成的冲突 */.box, .box *{box-sizing: content-box;} .clear{clear: both; *zoom: 1;} .clear:after{content:'\20'; clear:both; *zoom:1; display:block; height:0;} .clear-space{word-spacing: -5px;} .inline{position: relative; display: inline-block; *display:inline; *zoom:1; vertical-align: middle;} /* 三角形 */.edge{position: relative; display: inline-block; vertical-align: middle; width: 0; height: 0; border-width: 6px; border-style: dashed; border-color: transparent; overflow: hidden;} .edge-top{top: -4px; border-bottom-color: #999; border-bottom-style: solid;} .edge-right{border-left-color: #999; border-left-style: solid;} .edge-bottom{top: 2px; border-top-color: #999; border-top-style: solid;} .edge-left{border-right-color: #999; border-right-style: solid;} /* 单行溢出省略 */.elip{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} /* 屏蔽选中 */.unselect,.icon, .disabled{-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} /* 禁用 */.disabled,.disabled:hover{color: #d2d2d2 !important; cursor: not-allowed !important;} /* 纯圆角 */.circle{border-radius: 100%;} .show{display: block !important;} .hide{display: none !important;} .show-v{visibility: visible !important;} .hide-v{visibility: hidden !important;} /** 图标字体 **/ @font-face { font-family: 'icon'; src: url('../font/iconfont.eot?v=282'); src: url('../font/iconfont.eot?v=282#iefix') format('embedded-opentype'), url('../font/iconfont.woff2?v=282') format('woff2'), url('../font/iconfont.woff?v=282') format('woff'), url('../font/iconfont.ttf?v=282') format('truetype'), url('../font/iconfont.svg?v=282#icon') format('svg'); } .icon{ font-family:"icon" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* font-class */ .icon-leaf:before{content: "\e701";} .icon-folder:before{content: "\eabe";} .icon-folder-open:before{content: "\eac1";} .icon-gitee:before{content: "\e69b";} .icon-github:before{content:"\e6a7"} .icon-disabled:before{content:"\e6cc"} .icon-moon:before{content:"\e6c2"} .icon-error:before{content:"\e693"} .icon-success:before{content:"\e697"} .icon-question:before{content:"\e699"} .icon-lock:before{content:"\e69a"} .icon-eye:before{content:"\e695"} .icon-eye-invisible:before{content:"\e696"} .icon-backspace:before{content:"\e694"} .icon-tips-fill:before{content:"\eb2e"} .icon-test:before{content:"\e692"} .icon-clear:before{content:"\e788"} .icon-heart-fill:before{content:"\e68f"} .icon-light:before{content:"\e748"} .icon-music:before{content:"\e690"} .icon-time:before{content:"\e68d"} .icon-ie:before{content:"\e7bb"} .icon-firefox:before{content:"\e686"} .icon-at:before{content:"\e687"} .icon-bluetooth:before{content:"\e689"} .icon-chrome:before{content:"\e68a"} .icon-edge:before{content:"\e68b"} .icon-heart:before{content:"\e68c"} .icon-key:before{content:"\e683"} .icon-android:before{content:"\e684"} .icon-mike:before{content:"\e6dc"} .icon-mute:before{content:"\e685"} .icon-gift:before{content:"\e627"} .icon-windows:before{content:"\e67f"} .icon-ios:before{content:"\e680"} .icon-logout:before{content:"\e682"} .icon-wifi:before{content:"\e7e0"} .icon-rss:before{content:"\e808"} .icon-email:before{content:"\e618"} .icon-reduce-circle:before{content:"\e616"} .icon-transfer:before{content:"\e691"} .icon-service:before{content:"\e626"} .icon-addition:before{content:"\e624"} .icon-subtraction:before{content:"\e67e"} .icon-slider:before{content:"\e714"} .icon-print:before{content:"\e66d"} .icon-export:before{content:"\e67d"} .icon-cols:before{content:"\e610"} .icon-screen-full:before{content:"\e622"} .icon-screen-restore:before{content:"\e758"} .icon-rate-half:before{content:"\e6c9"} .icon-rate-solid:before{content:"\e67a"} .icon-rate:before{content:"\e67b"} .icon-cellphone:before{content:"\e678"} .icon-vercode:before{content:"\e679"} .icon-login-weibo:before{content:"\e675"} .icon-login-qq:before{content:"\e676"} .icon-login-wechat:before{content:"\e677"} .icon-username:before{content:"\e66f"} .icon-password:before{content:"\e673"} .icon-refresh-3:before{content:"\e9aa"} .icon-auz:before{content:"\e672"} .icon-shrink-right:before{content:"\e668"} .icon-spread-left:before{content:"\e66b"} .icon-snowflake:before{content:"\e6b1"} .icon-tips:before{content:"\e702"} .icon-note:before{content:"\e66e"} .icon-senior:before{content:"\e674"} .icon-refresh-1:before{content:"\e666"} .icon-refresh:before{content:"\e669"} .icon-flag:before{content:"\e66c"} .icon-theme:before{content:"\e66a"} .icon-notice:before{content:"\e667"} .icon-console:before{content:"\e665"} .icon-website:before{content:"\e7ae"} .icon-face-surprised:before{content:"\e664"} .icon-set:before{content:"\e716"} .icon-template:before{content:"\e663"} .icon-app:before{content:"\e653"} .icon-template-1:before{content:"\e656"} .icon-home:before{content:"\e68e"} .icon-female:before{content:"\e661"} .icon-male:before{content:"\e662"} .icon-tread:before{content:"\e6c5"} .icon-praise:before{content:"\e6c6"} .icon-rmb:before{content:"\e65e"} .icon-more:before{content:"\e65f"} .icon-camera:before{content:"\e660"} .icon-cart-simple:before{content:"\e698"} .icon-face-cry:before{content:"\e69c"} .icon-face-smile:before{content:"\e6af"} .icon-survey:before{content:"\e6b2"} .icon-read:before{content:"\e705"} .icon-location:before{content:"\e715"} .icon-dollar:before{content:"\e659"} .icon-diamond:before{content:"\e735"} .icon-return:before{content:"\e65c"} .icon-camera-fill:before{content:"\e65d"} .icon-fire:before{content:"\e756"} .icon-more-vertical:before{content:"\e671"} .icon-cart:before{content:"\e657"} .icon-star-fill:before{content:"\e658"} .icon-prev:before{content:"\e65a"} .icon-next:before{content:"\e65b"} .icon-upload:before{content:"\e67c"} .icon-upload-drag:before{content:"\e681"} .icon-user:before{content:"\e770"} .icon-file-b:before{content:"\e655"} .icon-component:before{content:"\e857"} .icon-find-fill:before{content:"\e670"} .icon-loading:before{content:"\e63d"} .icon-loading-1:before{content:"\e63e"} .icon-add-1:before{content:"\e654"} .icon-pause:before{content:"\e651"} .icon-play:before{content:"\e652"} .icon-video:before{content:"\e6ed"} .icon-headset:before{content:"\e6fc"} .icon-voice:before{content:"\e688"} .icon-speaker:before{content:"\e645"} .icon-fonts-del:before{content:"\e64f"} .icon-fonts-html:before{content:"\e64b"} .icon-fonts-code:before{content:"\e64e"} .icon-fonts-strong:before{content:"\e62b"} .icon-unlink:before{content:"\e64d"} .icon-picture:before{content:"\e64a"} .icon-link:before{content:"\e64c"} .icon-face-smile-b:before{content:"\e650"} .icon-align-center:before{content:"\e647"} .icon-align-right:before{content:"\e648"} .icon-align-left:before{content:"\e649"} .icon-fonts-u:before{content:"\e646"} .icon-fonts-i:before{content:"\e644"} .icon-tabs:before{content:"\e62a"} .icon-circle:before{content:"\e63f"} .icon-radio:before{content:"\e643"} .icon-share:before{content:"\e641"} .icon-edit:before{content:"\e642"} .icon-delete:before{content:"\e640"} .icon-engine:before{content:"\e628"} .icon-chart-screen:before{content:"\e629"} .icon-chart:before{content:"\e62c"} .icon-table:before{content:"\e62d"} .icon-tree:before{content:"\e62e"} .icon-upload-circle:before{content:"\e62f"} .icon-templeate-1:before{content:"\e630"} .icon-util:before{content:"\e631"} .icon-layouts:before{content:"\e632"} .icon-prev-circle:before{content:"\e633"} .icon-carousel:before{content:"\e634"} .icon-code-circle:before{content:"\e635"} .icon-water:before{content:"\e636"} .icon-date:before{content:"\e637"} .icon-layer:before{content:"\e638"} .icon-fonts-clear:before{content:"\e639"} .icon-dialogue:before{content:"\e63a"} .icon-cellphone-fine:before{content:"\e63b"} .icon-form:before{content:"\e63c"} .icon-file:before{content:"\e621"} .icon-triangle-r:before{content:"\e623"} .icon-triangle-d:before{content:"\e625"} .icon-set-sm:before{content:"\e620"} .icon-add-circle:before{content:"\e61f"} .icon-layim-download:before{content:"\e61e"} .icon-layim-uploadfile:before{content:"\e61d"} .icon-404:before{content:"\e61c"} .icon-about:before{content:"\e60b"} .icon-layim-theme:before{content:"\e61b"} .icon-down:before{content:"\e61a"} .icon-up:before{content:"\e619"} .icon-circle-dot:before{content:"\e617"} .icon-set-fill:before{content:"\e614"} .icon-search:before{content:"\e615"} .icon-friends:before{content:"\e612"} .icon-group:before{content:"\e613"} .icon-reply-fill:before{content:"\e611"} .icon-menu-fill:before{content:"\e60f"} .icon-face-smile-fine:before{content:"\e60c"} .icon-picture-fine:before{content:"\e60d"} .icon-log:before{content:"\e60e"} .icon-list:before{content:"\e60a"} .icon-release:before{content:"\e609"} .icon-add-circle-fine:before{content:"\e608"} .icon-ok:before{content:"\e605"} .icon-help:before{content:"\e607"} .icon-chat:before{content:"\e606"} .icon-top:before{content:"\e604"} .icon-right:before{content:"\e602"} .icon-left:before{content:"\e603"} .icon-star:before{content:"\e600"} .icon-download-circle:before{content:"\e601"} .icon-close:before{content:"\1006"} .icon-close-fill:before{content:"\1007"} .icon-ok-circle:before{content:"\1005"} /* 基本布局 */ .main{position: relative; width: 1160px; margin: 0 auto;} .header{position: relative; z-index: 1000; height: 60px;} .header a:hover{transition: all .5s; -webkit-transition: all .5s;} .side{position: fixed; left: 0; top: 0; bottom: 0; z-index: 999; width: 200px; overflow-x: hidden;} .side-scroll{position: relative; width: 220px; height: 100%; overflow-x: hidden;} .body{position: relative; left: 200px; right: 0; top: 0; bottom: 0; z-index: 900; width: auto; box-sizing: border-box;} /* 后台框架大布局 */ .layout-body{overflow-x: hidden;} .layout-admin .header{position: fixed; top: 0; left: 0; right: 0; background-color: #23292e;} .layout-admin .side{top: 60px; width: 200px; overflow-x: hidden;} .layout-admin .body{position: absolute; top: 60px; padding-bottom: 44px;} .layout-admin .main{width: auto; margin: 0 15px;} .layout-admin .footer{position: fixed; left: 200px; right: 0; bottom: 0; z-index: 990; height: 44px; line-height: 44px; padding: 0 15px; box-shadow: -1px 0 4px rgb(0 0 0 / 12%); background-color: #fafafa;} .layout-admin .logo{position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #16baaa; font-size: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);} .layout-admin .header .nav{background: none;} .layout-left{position: absolute !important; left: 200px; top: 0;} .layout-right{position: absolute !important; right: 0; top: 0;} /* 栅格布局 */ .container{position: relative; margin: 0 auto; box-sizing: border-box;} .fluid{position: relative; margin: 0 auto; padding: 0 15px;} .row:before, .row:after{content: ""; display: block; clear: both;} .col-xs1, .col-xs2, .col-xs3, .col-xs4, .col-xs5, .col-xs6, .col-xs7, .col-xs8, .col-xs9, .col-xs10, .col-xs11, .col-xs12 ,.col-sm1, .col-sm2, .col-sm3, .col-sm4, .col-sm5, .col-sm6, .col-sm7, .col-sm8, .col-sm9, .col-sm10, .col-sm11, .col-sm12 ,.col-md1, .col-md2, .col-md3, .col-md4, .col-md5, .col-md6, .col-md7, .col-md8, .col-md9, .col-md10, .col-md11, .col-md12 ,.col-lg1, .col-lg2, .col-lg3, .col-lg4, .col-lg5, .col-lg6, .col-lg7, .col-lg8, .col-lg9, .col-lg10, .col-lg11, .col-lg12 ,.col-xl1, .col-xl2, .col-xl3, .col-xl4, .col-xl5, .col-xl6, .col-xl7, .col-xl8, .col-xl9, .col-xl10, .col-xl11, .col-xl12 {position: relative; display: block; box-sizing: border-box;} .col-xs1, .col-xs2, .col-xs3, .col-xs4, .col-xs5, .col-xs6, .col-xs7, .col-xs8, .col-xs9, .col-xs10, .col-xs11, .col-xs12{float: left;} .col-xs1{width: 8.33333333%;} .col-xs2{width: 16.66666667%;} .col-xs3{width: 25%;} .col-xs4{width: 33.33333333%;} .col-xs5{width: 41.66666667%;} .col-xs6{width: 50%;} .col-xs7{width: 58.33333333%;} .col-xs8{width: 66.66666667%;} .col-xs9{width: 75%;} .col-xs10{width: 83.33333333%;} .col-xs11{width: 91.66666667%;} .col-xs12{width: 100%;} .col-xs-offset1{margin-left: 8.33333333%;} .col-xs-offset2{margin-left: 16.66666667%;} .col-xs-offset3{margin-left: 25%;} .col-xs-offset4{margin-left: 33.33333333%;} .col-xs-offset5{margin-left: 41.66666667%;} .col-xs-offset6{margin-left: 50%;} .col-xs-offset7{margin-left: 58.33333333%;} .col-xs-offset8{margin-left: 66.66666667%;} .col-xs-offset9{margin-left: 75%;} .col-xs-offset10{margin-left: 83.33333333%;} .col-xs-offset11{margin-left: 91.66666667%;} .col-xs-offset12{margin-left: 100%;} /* 超小屏幕 */ @media screen and (max-width: 767.98px) { .container{padding: 0 15px;} .hide-xs{display: none!important;} .show-xs-block{display: block!important;} .show-xs-inline{display: inline!important;} .show-xs-inline-block{display: inline-block!important;} } /* 小型屏幕 */ @media screen and (min-width: 768px) { .container{width: 720px;} .hide-sm{display: none!important;} .show-sm-block{display: block!important;} .show-sm-inline{display: inline!important;} .show-sm-inline-block{display: inline-block!important;} .col-sm1, .col-sm2, .col-sm3, .col-sm4, .col-sm5, .col-sm6, .col-sm7, .col-sm8, .col-sm9, .col-sm10, .col-sm11, .col-sm12{float: left;} .col-sm1{width: 8.33333333%;} .col-sm2{width: 16.66666667%;} .col-sm3{width: 25%;} .col-sm4{width: 33.33333333%;} .col-sm5{width: 41.66666667%;} .col-sm6{width: 50%;} .col-sm7{width: 58.33333333%;} .col-sm8{width: 66.66666667%;} .col-sm9{width: 75%;} .col-sm10{width: 83.33333333%;} .col-sm11{width: 91.66666667%;} .col-sm12{width: 100%;} /* 列偏移 */ .col-sm-offset1{margin-left: 8.33333333%;} .col-sm-offset2{margin-left: 16.66666667%;} .col-sm-offset3{margin-left: 25%;} .col-sm-offset4{margin-left: 33.33333333%;} .col-sm-offset5{margin-left: 41.66666667%;} .col-sm-offset6{margin-left: 50%;} .col-sm-offset7{margin-left: 58.33333333%;} .col-sm-offset8{margin-left: 66.66666667%;} .col-sm-offset9{margin-left: 75%;} .col-sm-offset10{margin-left: 83.33333333%;} .col-sm-offset11{margin-left: 91.66666667%;} .col-sm-offset12{margin-left: 100%;} } /* 中型屏幕 */ @media screen and (min-width: 992px) { .container{width: 960px;} .hide-md{display: none!important;} .show-md-block{display: block!important;} .show-md-inline{display: inline!important;} .show-md-inline-block{display: inline-block!important;} .col-md1, .col-md2, .col-md3, .col-md4, .col-md5, .col-md6, .col-md7, .col-md8, .col-md9, .col-md10, .col-md11, .col-md12{float: left;} .col-md1{width: 8.33333333%;} .col-md2{width: 16.66666667%;} .col-md3{width: 25%;} .col-md4{width: 33.33333333%;} .col-md5{width: 41.66666667%;} .col-md6{width: 50%;} .col-md7{width: 58.33333333%;} .col-md8{width: 66.66666667%;} .col-md9{width: 75%;} .col-md10{width: 83.33333333%;} .col-md11{width: 91.66666667%;} .col-md12{width: 100%;} /* 列偏移 */ .col-md-offset1{margin-left: 8.33333333%;} .col-md-offset2{margin-left: 16.66666667%;} .col-md-offset3{margin-left: 25%;} .col-md-offset4{margin-left: 33.33333333%;} .col-md-offset5{margin-left: 41.66666667%;} .col-md-offset6{margin-left: 50%;} .col-md-offset7{margin-left: 58.33333333%;} .col-md-offset8{margin-left: 66.66666667%;} .col-md-offset9{margin-left: 75%;} .col-md-offset10{margin-left: 83.33333333%;} .col-md-offset11{margin-left: 91.66666667%;} .col-md-offset12{margin-left: 100%;} } /* 大型屏幕 */ @media screen and (min-width: 1200px) { .container{width: 1150px;} .hide-lg{display: none!important;} .show-lg-block{display: block!important;} .show-lg-inline{display: inline!important;} .show-lg-inline-block{display: inline-block!important;} .col-lg1, .col-lg2, .col-lg3, .col-lg4, .col-lg5, .col-lg6, .col-lg7, .col-lg8, .col-lg9, .col-lg10, .col-lg11, .col-lg12{float: left;} .col-lg1{width: 8.33333333%;} .col-lg2{width: 16.66666667%;} .col-lg3{width: 25%;} .col-lg4{width: 33.33333333%;} .col-lg5{width: 41.66666667%;} .col-lg6{width: 50%;} .col-lg7{width: 58.33333333%;} .col-lg8{width: 66.66666667%;} .col-lg9{width: 75%;} .col-lg10{width: 83.33333333%;} .col-lg11{width: 91.66666667%;} .col-lg12{width: 100%;} /* 列偏移 */ .col-lg-offset1{margin-left: 8.33333333%;} .col-lg-offset2{margin-left: 16.66666667%;} .col-lg-offset3{margin-left: 25%;} .col-lg-offset4{margin-left: 33.33333333%;} .col-lg-offset5{margin-left: 41.66666667%;} .col-lg-offset6{margin-left: 50%;} .col-lg-offset7{margin-left: 58.33333333%;} .col-lg-offset8{margin-left: 66.66666667%;} .col-lg-offset9{margin-left: 75%;} .col-lg-offset10{margin-left: 83.33333333%;} .col-lg-offset11{margin-left: 91.66666667%;} .col-lg-offset12{margin-left: 100%;} } /* 超大屏幕 */ @media screen and (min-width: 1400px) { .container{width: 1330px;} .hide-xl{display: none!important;} .show-xl-block{display: block!important;} .show-xl-inline{display: inline!important;} .show-xl-inline-block{display: inline-block!important;} .col-xl1, .col-xl2, .col-xl3, .col-xl4, .col-xl5, .col-xl6, .col-xl7, .col-xl8, .col-xl9, .col-xl10, .col-xl11, .col-xl12{float: left;} .col-xl1{width: 8.33333333%;} .col-xl2{width: 16.66666667%;} .col-xl3{width: 25%;} .col-xl4{width: 33.33333333%;} .col-xl5{width: 41.66666667%;} .col-xl6{width: 50%;} .col-xl7{width: 58.33333333%;} .col-xl8{width: 66.66666667%;} .col-xl9{width: 75%;} .col-xl10{width: 83.33333333%;} .col-xl11{width: 91.66666667%;} .col-xl12{width: 100%;} /* 列偏移 */ .col-xl-offset1{margin-left: 8.33333333%;} .col-xl-offset2{margin-left: 16.66666667%;} .col-xl-offset3{margin-left: 25%;} .col-xl-offset4{margin-left: 33.33333333%;} .col-xl-offset5{margin-left: 41.66666667%;} .col-xl-offset6{margin-left: 50%;} .col-xl-offset7{margin-left: 58.33333333%;} .col-xl-offset8{margin-left: 66.66666667%;} .col-xl-offset9{margin-left: 75%;} .col-xl-offset10{margin-left: 83.33333333%;} .col-xl-offset11{margin-left: 91.66666667%;} .col-xl-offset12{margin-left: 100%;} } /* 列间隔 */ .col-space1{margin: -0.5px;} .col-space1>*{padding: 0.5px;} .col-space2{margin: -1px;} .col-space2>*{padding: 1px;} .col-space4{margin: -2px;} .col-space4>*{padding: 2px;} .col-space5{margin: -2.5px;} .col-space5>*{padding: 2.5px;} .col-space6{margin: -3px;} .col-space6>*{padding: 3px;} .col-space8{margin: -4px;} .col-space8>*{padding: 4px;} .col-space10{margin: -5px;} .col-space10>*{padding: 5px;} .col-space12{margin: -6px;} .col-space12>*{padding: 6px;} .col-space14{margin: -7px;} .col-space14>*{padding: 7px;} .col-space15{margin: -7.5px;} .col-space15>*{padding: 7.5px;} .col-space16{margin: -8px;} .col-space16>*{padding: 8px;} .col-space18{margin: -9px;} .col-space18>*{padding: 9px;} .col-space20{margin: -10px;} .col-space20>*{padding: 10px;} .col-space22{margin: -11px;} .col-space22>*{padding: 11px;} .col-space24{margin: -12px;} .col-space24>*{padding: 12px;} .col-space25{margin: -12.5px;} .col-space25>*{padding: 12.5px;} .col-space26{margin: -13px;} .col-space26>*{padding: 13px;} .col-space28{margin: -14px;} .col-space28>*{padding: 14px;} .col-space30{margin: -15px;} .col-space30>*{padding: 15px;} .col-space32{margin: -16px;} .col-space32>*{padding: 16px;} /* 内边距 */ .padding-1{padding: 4px !important;} .padding-2{padding: 8px !important;} .padding-3{padding: 16px !important;} .padding-4{padding: 32px !important;} .padding-5{padding: 48px !important;} /* 外边距 */ .margin-1{margin: 4px !important;} .margin-2{margin: 8px !important;} .margin-3{margin: 16px !important;} .margin-4{margin: 32px !important;} .margin-5{margin: 48px !important;} /* * 页面元素 */ .btn, .input, .select, .textarea, .upload-button{outline: none; -webkit-appearance: none; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box;} /* 引用 */ .elem-quote{margin-bottom: 10px; padding: 15px; line-height: 1.8; border-left: 5px solid #16b777; border-radius: 0 2px 2px 0; background-color: #fafafa;} .quote-nm{border-style: solid; border-width: 1px; border-left-width: 5px; background: none;} /* 字段集合 */ .elem-field{margin-bottom: 10px; padding: 0; border-width: 1px; border-style: solid;} .elem-field legend{margin-left: 20px; padding: 0 10px; font-size: 20px;} .field-title{margin: 16px 0; border-width: 0; border-top-width: 1px;} .field-box{padding: 15px;} .field-title .field-box{padding: 10px 0;} /* 进度条 */ .progress{position: relative; height: 6px; border-radius: 20px; background-color: #eee;} .progress-bar{position: absolute; left: 0; top: 0; width: 0; max-width: 100%; height: 6px; border-radius: 20px; text-align: right; background-color: #16b777; transition: all .3s; -webkit-transition: all .3s;} .progress-big, .progress-big .progress-bar{height: 18px; line-height: 18px;} .progress-text{position: relative; top: -20px; line-height: 18px; font-size: 12px; color: #5F5F5F} .progress-big .progress-text{position: static; padding: 0 10px; color: #fff;} /* * 面板 */ /* 折叠面板 */ .collapse{border-width: 1px; border-style: solid; border-radius: 2px;} .colla-item, .colla-content{border-top-width: 1px; border-top-style: solid;} .colla-item:first-child{border-top: none;} .colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden;} .colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;} .colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;} /* 卡片面板 */ .card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);} .card:last-child{margin-bottom: 0;} .card-header{position: relative; height: 42px; line-height: 42px; padding: 0 15px; border-bottom: 1px solid #f8f8f8; color: #333; border-radius: 2px 2px 0 0; font-size: 14px;} .card-body{position: relative; padding: 10px 15px; line-height: 24px;} .card-body[pad15]{padding: 15px;} .card-body[pad20]{padding: 20px;} .card-body .table{margin: 5px 0;} .card .tab{margin: 0;} /* 常规面板 */ .panel{position: relative; border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); background-color: #fff; color: #5F5F5F;} /* 窗口面板 */ .panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #eee; background-color: #fff;} /* 其它辅助 */ .auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999;} .scrollbar-hide{overflow: hidden !important;} /* * 默认主题 */ /* 背景颜色 */ .bg-red{background-color: #ff5722 !important; color: #fff!important;} /*赤*/ .bg-orange{background-color: #ffb800!important; color: #fff!important;} /*橙*/ .bg-green{background-color: #16baaa!important; color: #fff!important;} /*绿*/ .bg-cyan{background-color: #2f4056!important; color: #fff!important;} /*藏青*/ .bg-blue{background-color: #1e9fff!important; color: #fff!important;} /*蓝*/ .bg-purple{background-color: #a233c6!important; color: #fff!important;} /*紫*/ .bg-black{background-color: #2f363c!important; color: #fff!important;} /*深*/ .bg-gray{background-color: #fafafa!important; color: #5F5F5F!important;} /*浅*/ /* 边框 */ .border, .quote-nm, .elem-field, .collapse, .panel, .colla-item, .colla-content, .badge-rim, .tab-title, .tab-title .this:after, .tab-bar, .tab-card, .input, .textarea, .select, .input-split, .form-pane .form-label, .form-pane .form-item[pane]{border-color: #eee;} .border{border-width: 1px; border-style: solid; color: #5F5F5F!important;} .border-red{border-width: 1px; border-style: solid; border-color: #ff5722!important; color: #ff5722!important;} .border-orange{border-width: 1px; border-style: solid; border-color: #ffb800!important; color: #ffb800!important;} .border-green{border-width: 1px; border-style: solid; border-color: #16baaa!important; color: #16baaa!important;} .border-cyan{border-width: 1px; border-style: solid; border-color: #2f4056!important; color: #2f4056!important;} .border-blue{border-width: 1px; border-style: solid; border-color: #1e9fff!important; color: #1e9fff!important;} .border-purple{border-width: 1px; border-style: solid; border-color: #a233c6!important; color: #a233c6!important;} .border-black{border-width: 1px; border-style: solid; border-color: #2f363c!important; color: #2f363c!important;} /* 背景边框 */ .timeline-item:before{background-color: #eee;} /* 文本区域 */ .text{line-height: 1.8; font-size: 14px;} .text h1, .text h2, .text h3, .text h4, .text h5, .text h6{color: #3A3A3A;} .text h1{font-size: 32px;} .text h2{font-size: 24px;} .text h3{font-size: 18px;} .text h4{font-size: 16px;} .text h5{font-size: 14px;} .text h6{font-size: 13px;} .text ul, .text ol{padding-left: 15px;} .text ul li{margin-top: 5px; list-style-type: disc;} .text ol li{margin-top: 5px; list-style-type: decimal;} .text-em, .word-aux{color: #999 !important; padding-left: 5px !important; padding-right: 5px !important;} .text p{margin: 15px 0;} .text p:first-child{margin-top: 0;} .text p:last-child{margin-bottom: 0;} .text a:not(.btn){color: #01AAED;} .text a:not(.btn):hover{text-decoration: underline;} .text blockquote:not(.elem-quote){padding: 5px 15px; border-left: 5px solid #eee;} .text pre > code:not(.code){padding: 15px; font-family: "Courier New",Consolas,"Lucida Console";} /* 字体大小 */ .font-12{font-size: 12px !important;} .font-13{font-size: 13px !important;} .font-14{font-size: 14px !important;} .font-16{font-size: 16px !important;} .font-18{font-size: 18px !important;} .font-20{font-size: 20px !important;} .font-22{font-size: 22px !important;} .font-24{font-size: 24px !important;} .font-26{font-size: 26px !important;} .font-28{font-size: 28px !important;} .font-30{font-size: 30px !important;} .font-32{font-size: 32px !important;} /* 字体颜色 */ .font-red{color: #ff5722 !important;} /*赤*/ .font-orange{color: #ffb800!important;} /*橙*/ .font-green{color: #16baaa!important;} /*绿*/ .font-cyan{color: #2f4056!important;} /*藏青*/ .font-blue{color: #01AAED!important;} /*蓝*/ .font-purple{color: #a233c6 !important;} /*紫*/ .font-black{color: #000!important;} /*深*/ .font-gray{color: #c2c2c2!important;} /*浅*/ /* * 按钮 */ .btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; border: 1px solid transparent; padding: 0 18px; background-color: #16baaa; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} .btn:hover{opacity: 0.8; filter:alpha(opacity=80); color: #fff;} .btn:active{opacity: 1; filter:alpha(opacity=100);} .btn+.btn{margin-left: 10px;} /* 按钮容器 */ .btn-container{word-spacing: -5px;} .btn-container .btn{margin-right: 10px; margin-bottom: 10px; word-spacing: normal;} .btn-container .btn+.btn{margin-left: 0;} .table .btn-container .btn{margin-bottom: 9px;} /* 圆角 */.btn-radius{border-radius: 100px;} .btn .icon{padding: 0 2px; vertical-align: middle\0; vertical-align: bottom;} /* 原始 */.btn-primary{border-color: #d2d2d2; background: none; color: #5F5F5F;} .btn-primary:hover{border-color: #16baaa; color: #333;} /* 百搭 */.btn-normal{background-color: #1e9fff;} /* 暖色 */.btn-warm{background-color: #ffb800;} /* 警告 */.btn-danger{background-color: #ff5722;} /* 选中 */.btn-checked{background-color: #16b777;} /* 禁用 */.btn-disabled, .btn-disabled:hover, .btn-disabled:active{border-color: #eee !important; background-color: #FBFBFB !important; color: #d2d2d2 !important; cursor: not-allowed !important; opacity: 1;} /* 大型 */.btn-lg{height: 44px; line-height: 44px; padding: 0 25px; font-size: 16px;} /* 小型 */.btn-sm{height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px;} /* 超小 */.btn-xs{height: 22px; line-height: 22px; padding: 0 5px; font-size: 12px;} .btn-xs i{font-size: 12px !important;} /* 按钮组 */.btn-group{display: inline-block; vertical-align: middle; font-size: 0;} .btn-group .btn{margin-left: 0!important; margin-right: 0!important; border-left: 1px solid rgba(255,255,255,.5); border-radius: 0;} .btn-group .btn-primary{border-left: none;} .btn-group .btn-primary:hover{border-color: #d2d2d2; color: #16baaa;} .btn-group .btn:first-child{border-left: none; border-radius: 2px 0 0 2px;} .btn-group .btn-primary:first-child{border-left: 1px solid #d2d2d2;} .btn-group .btn:last-child{border-radius: 0 2px 2px 0;} .btn-group .btn+.btn{margin-left: 0;} .btn-group+.btn-group{margin-left: 10px;} /* 流体 */.btn-fluid{width: 100%;} /** 表单 **/ .input, .textarea, .select{height: 38px; line-height: 1.3; line-height: 38px\9; border-width: 1px; border-style: solid; background-color: #fff; color: rgba(0,0,0,.85); border-radius: 2px;} .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select::-webkit-input-placeholder{line-height: 1.3;} .input, .textarea{display: block; width: 100%; padding-left: 10px;} .input:hover, .textarea:hover{border-color: #d2d2d2 !important;} .input:focus, .textarea:focus{border-color: #16b777 !important; box-shadow: 0 0 0 3px rgba(22,183,119,0.08);} .textarea{position: relative; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical;} .input[disabled], .textarea[disabled]{background-color: #fafafa;} .select{padding: 0 10px;} .form select, .form input[type=checkbox], .form input[type=radio]{display: none;} .form *[lay-ignore]{display: initial;} .form-item{position: relative; margin-bottom: 15px; clear: both; *zoom: 1;} .form-item:after{content:'\20'; clear: both; *zoom: 1; display: block; height:0;} .form-label{position: relative; float: left; display: block; padding: 9px 15px; width: 80px; font-weight: 400; line-height: 20px; text-align: right;} .form-label-col{display: block; float: none; padding: 9px 0; line-height: 20px; text-align: left;} .form-item .inline{margin-bottom: 5px; margin-right: 10px;} .input-block, .input-inline{position: relative;} .input-block{margin-left: 110px; min-height: 36px;} .input-inline{display: inline-block; vertical-align: middle;} .form-item .input-inline{float: left; width: 190px; margin-right: 10px;} .form-text .input-inline{width: auto;} /* 分割块 */ .form-mid{position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px;} /* 警告条 */ .form-danger:focus, .form-danger+.form-select .input{border-color: #ff5722 !important; box-shadow: 0 0 0 3px rgba(255,87,34,0.08);} /* 输入框点缀 */ .input-prefix, .input-suffix, .input-split, .input-suffix .input-affix{position: absolute; right: 0; top: 0; padding: 0 10px; width: 35px; height: 100%; text-align: center; transition: all .3s; box-sizing: border-box;} .input-prefix{left: 0; border-radius: 2px 0 0 2px;} .input-suffix{right: 0; border-radius: 0 2px 2px 0;} .input-split{border-width: 1px; border-style: solid;} .input-prefix .icon, .input-suffix .icon, .input-split .icon{position: relative; font-size: 16px; color: #5F5F5F; transition: all .3s;} /* 输入框前后置容器 */ .input-group{position: relative; display: table; box-sizing: border-box;} .input-group>*{display: table-cell; vertical-align: middle; position: relative;} .input-group .input{padding-right: 15px;} .input-group > .input-prefix{width: auto; border-right: 0;} .input-group > .input-suffix{width: auto; border-left: 0;} .input-group .input-split{white-space: nowrap;} /* 输入框前后缀容器 */ .input-wrap{position: relative; line-height: 38px;} .input-wrap .input{padding-right: 35px;;} .input-wrap .input::-ms-clear, .input-wrap .input::-ms-reveal{display: none;} .input-wrap .input-prefix + .input, .input-wrap .input-prefix ~ * .input{padding-left: 35px;} .input-wrap .input-split + .input, .input-wrap .input-split ~ * .input{padding-left: 45px;} .input-wrap .input-prefix ~ .form-select{position: static;} .input-wrap .input-prefix, .input-wrap .input-suffix, .input-wrap .input-split{pointer-events: none;} .input-wrap .input:hover + .input-split{border-color: #d2d2d2;} .input-wrap .input:focus + .input-split{border-color: #16b777;} .input-wrap .input-prefix.input-split{border-width: 0; border-right-width: 1px;} /* 输入框动态点缀 */ .input-affix{line-height: 38px;} .input-suffix .input-affix{right: auto; left: -35px;} .input-affix .icon{color: rgba(0,0,0,.8); pointer-events: auto!important; cursor: pointer;} .input-affix .icon-clear{color: rgba(0,0,0,.3);} .input-affix .icon:hover{color: rgba(0,0,0,.6);} /* 数字输入框动态点缀 */ .input-wrap .input-number{width: 24px; padding: 0;} .input-wrap .input-number .icon{position: absolute; right: 0; width: 100%; height: 50%; line-height: normal; font-size: 12px;} .input-wrap .input-number .icon:before{position: absolute; left: 50%; top: 50%; margin-top: -6px; margin-left: -6px;} .input-wrap .input-number .icon-up{top: 0; border-bottom: 1px solid #eee;} .input-wrap .input-number .icon-down{bottom: 0;} .input-wrap .input-number .icon:hover{font-weight: 700;} .input-wrap .input[type="number"]::-webkit-outer-spin-button, .input-wrap .input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none !important;} .input-wrap .input[type="number"]{-moz-appearance: textfield;} /* 下拉选择 */ .form-select{position: relative; color: #5F5F5F;} .form-select .input{padding-right: 30px; cursor: pointer;} .form-select .edge{position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s;} .form-select dl{display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #eee; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box;} .form-select dl dt, .form-select dl dd{padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .form-select dl dt{font-size: 12px; color: #999;} .form-select dl dd{cursor: pointer;} .form-select dl dd:hover{background-color: #f8f8f8; -webkit-transition: .5s all; transition: .5s all;} .form-select .select-group dd{padding-left: 20px;} .form-select dl dd.select-tips{padding-left: 10px !important; color: #999;} .form-select dl dd.this{background-color: #f8f8f8; color: #16b777; font-weight: 700;} /*.form-select dl dd.this{background-color: #f8f8f8; color: #16b777; font-weight: 700;}*/ .form-select dl dd.disabled{background-color: #fff;} .form-selected dl{display: block;} .form-selected .edge{margin-top: -9px; -webkit-transform:rotate(180deg); transform: rotate(180deg);} .form-selected .edge{margin-top: -3px\0; } :root .form-selected .edge{margin-top: -9px\0/IE9;} .form-selectup dl{top: auto; bottom: 42px;} .select-none{margin: 5px 0; text-align: center; color: #999;} .select-disabled .disabled{border-color: #eee !important;} .select-disabled .edge{border-top-color: #d2d2d2} /* 复选框 */ .form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;} .form-checkbox:hover{} .form-checkbox > *{display: inline-block; vertical-align: middle;} .form-checkbox > div{padding: 0 11px; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .form-checkbox > div > .icon{line-height: normal} .form-checkbox:hover > div{background-color: #c2c2c2;} .form-checkbox > i{position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center; box-sizing: border-box;} .form-checkbox:hover > i{border-color: #c2c2c2; color: #c2c2c2;} .form-checked, .form-checked:hover{border-color: #16b777;} .form-checked > div, .form-checked:hover > div{background-color: #16b777;} .form-checked > i, .form-checked:hover > i{color: #16b777;} .form-item .form-checkbox{margin-top: 4px;} .form-checkbox.checkbox-disabled > div{background-color: #eee !important;} .form *[lay-checkbox]{display: none;} /* 复选框-默认风格 */ .form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 24px; padding-right: 0; background: none;} .form-checkbox[lay-skin="primary"] > div{margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;} .form-checkbox[lay-skin="primary"] > i{right: auto; left: 0; width: 16px; height: 16px; line-height: 14px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;} .form-checkbox[lay-skin="primary"]:hover > i{border-color: #16b777; color: #fff;} .form-checked[lay-skin="primary"] > i{border-color: #16b777 !important; background-color: #16b777; color: #fff;} .checkbox-disabled[lay-skin="primary"] > div{background: none!important;} .form-checked.checkbox-disabled[lay-skin="primary"] > i{background: #eee!important; border-color: #eee!important;} .checkbox-disabled[lay-skin="primary"]:hover > i{border-color: #d2d2d2;} .form-item .form-checkbox[lay-skin="primary"]{margin-top: 10px;} .form-checkbox[lay-skin="primary"] > .icon-indeterminate{border-color: #16b777;} .form-checkbox[lay-skin="primary"] > .icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;} /* 复选框-开关风格 */ .form-switch{position: relative; display: inline-block; vertical-align: middle; height: 24px; line-height: 22px; min-width: 44px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; box-sizing: border-box; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;} .form-switch > i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;} .form-switch > div{position: relative; top: 0; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;} .form-onswitch{border-color: #16b777; background-color: #16b777;} .form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;} .form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;} .checkbox-disabled{border-color: #eee !important;} .checkbox-disabled > div{color: #c2c2c2!important;} .checkbox-disabled > i{border-color: #eee !important;} .checkbox-disabled:hover > i{color: #fff !important;} /* 单选框 */ .form-radio{display: inline-block; vertical-align: middle; line-height: 28px; margin: 6px 10px 0 0; padding-right: 10px; cursor: pointer; font-size: 0;} .form-radio > *{display: inline-block; vertical-align: middle; font-size: 14px;} .form-radio > i{margin-right: 8px; font-size: 22px; color: #c2c2c2;} .form-radioed, .form-radioed > i, .form-radio:hover > *{color: #16b777;} .radio-disabled > i{color: #eee !important;} .radio-disabled > *{color: #c2c2c2!important;} .form *[lay-radio]{display: none;} /* 表单方框风格 */ .form-pane .form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;} .form-pane .input-inline{margin-left: -1px;} .form-pane .input-block{margin-left: 110px; left: -1px;} .form-pane .input{border-radius: 0 2px 2px 0;} .form-pane .form-text .form-label{float: none; width: 100%; border-radius: 2px; box-sizing: border-box; text-align: left;} .form-pane .form-text .input-inline{display: block; margin: 0; top: -1px; clear: both;} .form-pane .form-text .input-block{margin: 0; left: 0; top: -1px;} .form-pane .form-text .textarea{min-height: 100px; border-radius: 0 0 2px 2px;} .form-pane .form-checkbox{margin: 4px 0 4px 10px;} .form-pane .form-switch, .form-pane .form-radio{margin-top: 6px; margin-left: 10px; } .form-pane .form-item[pane]{position: relative; border-width: 1px; border-style: solid;} .form-pane .form-item[pane] .form-label{position: absolute; left: 0; top: 0; height: 100%; border-width: 0px; border-right-width: 1px;} .form-pane .form-item[pane] .input-inline{margin-left: 110px;} /** 表单响应式 **/ @media screen and (max-width: 450px) { .form-item .form-label{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .form-item .inline{display: block; margin-right: 0; margin-bottom: 20px; clear: both;} .form-item .inline:after{content:'\20'; clear:both; display:block; height:0;} .form-item .input-inline{display: block; float: none; left: -3px; width: auto !important; margin: 0 0 10px 112px; } .form-item .input-inline+.form-mid{margin-left: 110px; top: -5px; padding: 0;} .form-item .form-checkbox{margin-right: 5px; margin-bottom: 5px;} } /** 分页 **/ .laypage{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 10px 0; font-size: 0;} .laypage>a:first-child, .laypage>a:first-child em{border-radius: 2px 0 0 2px;} .laypage>a:last-child, .laypage>a:last-child em{border-radius: 0 2px 2px 0;} .laypage>*:first-child{margin-left: 0!important;} .laypage>*:last-child{margin-right: 0!important;} .laypage a, .laypage span, .laypage input, .laypage button, .laypage select{border: 1px solid #eee;} .laypage a, .laypage span{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 0 15px; height: 28px; line-height: 28px; margin: 0 -1px 5px 0; background-color: #fff; color: #333; font-size: 12px;} .laypage a[data-page]{color: #333;} .laypage a{text-decoration: none !important; cursor: pointer;} .laypage a:hover{color: #16baaa;} .laypage em{font-style: normal;} .laypage .laypage-spr{color:#999; font-weight: 700;} .laypage .laypage-curr{position: relative;} .laypage .laypage-curr em{position: relative; color: #fff;} .laypage .laypage-curr .laypage-em{position: absolute; left: -1px; top: -1px; padding: 1px; width: 100%; height: 100%; background-color: #16baaa; } .laypage-em{border-radius: 2px;} .laypage-prev em, .laypage-next em{font-family: Sim sun; font-size: 16px;} .laypage .laypage-count, .laypage .laypage-limits, .laypage .laypage-refresh, .laypage .laypage-skip{margin-left: 10px; margin-right: 10px; padding: 0; border: none;} .laypage .laypage-limits, .laypage .laypage-refresh{vertical-align: top;} .laypage .laypage-refresh i{font-size: 18px; cursor: pointer;} .laypage select{height: 22px; padding: 3px; border-radius: 2px; cursor: pointer;} .laypage .laypage-skip{height: 30px; line-height: 30px; color: #999;} .laypage input, .laypage button{height: 30px; line-height: 30px; border-radius: 2px; vertical-align: top; background-color: #fff; box-sizing: border-box;} .laypage input{display: inline-block; width: 40px; margin: 0 10px; padding: 0 3px; text-align: center;} .laypage input:focus, .laypage select:focus{border-color: #16baaa!important;} .laypage button{margin-left: 10px; padding: 0 10px; cursor: pointer;} /** 流加载 **/ .flow-more{margin: 10px 0; text-align: center; color: #999; font-size: 14px; clear: both;} .flow-more a{ height: 32px; line-height: 32px; } .flow-more a *{display: inline-block; vertical-align: top;} .flow-more a cite{padding: 0 20px; border-radius: 3px; background-color: #eee; color: #333; font-style: normal;} .flow-more a cite:hover{opacity: 0.8;} .flow-more a i{font-size: 30px; color: #737383;} /** 表格 **/ .table{width: 100%; margin: 10px 0; background-color: #fff; color: #5F5F5F;} .table tr{transition: all .3s; -webkit-transition: all .3s;} .table th{text-align: left; font-weight: 600;} .table thead tr, .table-header, .table-tool, .table-total, .table-total tr, .table-patch{} .table-mend{background-color: #fff;} .table-hover, .table-click, .table[lay-even] tbody tr:nth-child(even){background-color: #f8f8f8;} .table-checked{background-color: #dbfbf0;} .table-checked.table-hover, .table-checked.table-click{background-color: #abf8dd;} .table th, .table td, .table[lay-skin="line"], .table[lay-skin="row"], .table-view, .table-tool, .table-header, .table-col-set, .table-total, .table-page, .table-fixed-r, .table-mend, .table-tips-main, .table-grid-down{border-width: 1px; border-style: solid; border-color: #eee;} .table th, .table td{position: relative; padding: 9px 15px; min-height: 20px; line-height: 20px; font-size: 14px;} .table[lay-skin="line"] th, .table[lay-skin="line"] td{border-width: 0; border-bottom-width: 1px;} .table[lay-skin="row"] th, .table[lay-skin="row"] td{border-width: 0;border-right-width: 1px;} .table[lay-skin="nob"] th, .table[lay-skin="nob"] td{border: none;} .table img{max-width:100px;} /* 大表格 */ .table[lay-size="lg"] th, .table[lay-size="lg"] td{padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;} .table-view .table[lay-size="lg"] .table-cell{height: 50px; line-height: 40px;} /* 小表格 */ .table[lay-size="sm"] th, .table[lay-size="sm"] td{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; font-size: 12px;} .table-view .table[lay-size="sm"] .table-cell{height: 30px; line-height: 20px; padding-top: 5px; padding-left: 11px; padding-right: 11px;} /* 数据表格 */ .table[lay-data], .table[lay-options]{display: none;} .table-box{position: relative; overflow: hidden;} .table-view{clear: both;} .table-view .table{position: relative; width: auto; margin: 0; border: 0; border-collapse: separate;} .table-view .table[lay-skin="line"]{border-width: 0; border-right-width: 1px;} .table-view .table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;} .table-view .table th, .table-view .table td{padding: 0; border-top: none; border-left: none;} .table-view .table th [lay-event], .table-view .table th.unselect .table-cell span{cursor: pointer;} .table-view .table th span, .table-view .table td{cursor: default;} .table-view .table td[data-edit]{cursor: text;} .table-view .table td[data-edit]:hover:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #16B777; pointer-events: none; content: "";} .table-view .form-checkbox[lay-skin="primary"] i{width: 18px; height: 18px; line-height: 16px;} .table-view .form-radio{line-height: 0; padding: 0;} .table-view .form-radio>i{margin: 0; font-size: 20px;} .table-init{position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 199;} .table-init .icon{position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; font-size: 30px; color: #c2c2c2;} .table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;} .table-header .table{margin-bottom: -1px;} .table-column{position: relative; width: 100%; min-height: 41px; padding: 8px 16px; border-width: 0; border-bottom-width: 1px;} .table-column .btn-container{margin-bottom: -8px;} .table-column .btn-container .btn{margin-right: 8px; margin-bottom: 8px;} .table-tool .inline[lay-event]{position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all;} .table-tool .inline[lay-event]:hover{border: 1px solid #999;} .table-tool-temp{padding-right: 120px;} .table-tool-self{position: absolute; right: 17px; top: 10px;} .table-tool .table-tool-self .inline[lay-event]{margin: 0 0 0 10px;} .table-tool-panel{position: absolute; top: 29px; left: -1px; z-index: 399; padding: 5px 0 !important; min-width: 150px; min-height: 40px; border: 1px solid #d2d2d2; text-align: left; overflow-y: auto; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.12);} .table-tool-panel li{padding: 0 10px; margin: 0 !important; line-height: 30px; list-style-type: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: .5s all; transition: .5s all;} .table-tool-panel li .form-checkbox[lay-skin="primary"]{width: 100%;} .table-tool-panel li:hover{background-color: #f8f8f8;} .table-tool-panel li .form-checkbox[lay-skin="primary"]{padding-left: 28px;} .table-tool-panel li .form-checkbox[lay-skin="primary"] i{position: absolute; left: 0; top: 0;} .table-tool-panel li .form-checkbox[lay-skin="primary"] span{padding: 0;} .table-tool .table-tool-self .table-tool-panel{left: auto; right: -1px;} .table-col-set{position: absolute; right: 0; top: 0; width: 20px; height: 100%; border-width: 0; border-left-width: 1px; background-color: #fff;} .table-sort{width: 10px; height: 20px; margin-left: 5px; cursor: pointer!important;} .table-sort .edge{position: absolute; left: 5px; border-width: 5px;} .table-sort .table-sort-asc{top: 3px; border-top: none; border-bottom-style: solid; border-bottom-color: #b2b2b2;} .table-sort .table-sort-asc:hover{border-bottom-color: #5F5F5F;} .table-sort .table-sort-desc{bottom: 5px; border-bottom: none; border-top-style: solid; border-top-color: #b2b2b2;} .table-sort .table-sort-desc:hover{border-top-color: #5F5F5F;} .table-sort[lay-sort="asc"] .table-sort-asc{border-bottom-color: #000;} .table-sort[lay-sort="desc"] .table-sort-desc{border-top-color: #000;} .table-cell{height: 38px; line-height: 28px; padding: 6px 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;} .table-cell .form-checkbox[lay-skin="primary"]{top: -1px; padding: 0;} .table-cell .form-checkbox[lay-skin="primary"] > div{padding-left: 24px;} .table-cell .table-link{color: #01AAED;} .table-cell .btn{vertical-align: inherit;} .table-cell[align="center"]{-webkit-box-pack: center;} .table-cell[align="right"]{-webkit-box-pack: end;} .laytable-cell-checkbox, .laytable-cell-radio, .laytable-cell-space, .laytable-cell-numbers{text-align: center; -webkit-box-pack: center;} .table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;} .table-body .none{line-height: 26px; padding: 30px 15px; text-align: center; color: #999;} .table-fixed{position: absolute; left: 0; top: 0; z-index: 101;} .table-fixed .table-body{overflow: hidden;} .table-fixed-l{box-shadow: 1px 0 8px rgba(0,0,0,.08);} .table-fixed-r{left: auto; right: -1px; border-width: 0; border-left-width: 1px; box-shadow: -1px 0 8px rgba(0,0,0,.08);} .table-fixed-r .table-header{position: relative; overflow: visible;} .table-mend{position: absolute; right: -49px; top: 0; height: 100%; width: 50px; border-width: 0; border-left-width: 1px;} .table-tool{position: relative; width: 100%; min-height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px; /*box-shadow: 0 1px 8px 0 rgb(0 0 0 / 8%);*/} .table-tool .btn-container{margin-bottom: -10px;} .table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;} .table-page{border-width: 0; border-top-width: 1px; margin-bottom: -1px; white-space: nowrap; overflow: hidden;} .table-page>div{height: 26px;} .table-page .laypage{margin: 0;} .table-page .laypage a, .table-page .laypage span{height: 26px; line-height: 26px; margin-bottom: 10px; border: none; background: none;} .table-page .laypage a, .table-page .laypage span.laypage-curr{padding: 0 12px;} .table-page .laypage span{margin-left: 0; padding: 0;} .table-page .laypage .laypage-prev{margin-left: -11px!important;} .table-page .laypage .laypage-curr .laypage-em{left: 0; top: 0; padding: 0;} .table-page .laypage input, .table-page .laypage button{height: 26px; line-height: 26px; } .table-page .laypage input{width: 40px;} .table-page .laypage button{padding: 0 10px;} .table-page select{height: 18px;} .table-pagebar{float: right; line-height: 23px;} .table-pagebar .btn-sm{margin-top: -1px;} .table-pagebar .btn-xs{margin-top: 2px;} .table-view select[lay-ignore]{display: inline-block;} .table-patch .table-cell{padding: 0; width: 30px;} .table-edit{position: absolute; left: 0; top: 0; z-index: 189; min-width: 100%; min-height: 100%; padding: 5px 14px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;} .table-edit:focus{border-color: #16b777!important;} input.input.table-edit{height: 100%;} select.table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;} .table-view .form-switch, .table-view .form-checkbox, .table-view .form-radio{top: 0; margin: 0;} .table-view .form-checkbox{top: -1px; height: 26px; line-height: 26px;} .table-view .form-checkbox i{height: 26px;} /* 展开溢出的单元格 */ .table-grid .table-cell{overflow: visible;} .table-grid-down{position: absolute; top: 0; right: 0; width: 24px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer;} .table-grid-down .icon{position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; font-size: 14px;} .table-grid-down:hover{background-color: #fbfbfb;} /* 单元格多行展开风格 */ .table-expanded{height: 95px;} .table-expanded .table-cell, .table-view .table[lay-size="sm"] .table-expanded .table-cell, .table-view .table[lay-size="lg"] .table-expanded .table-cell{height: auto; max-height: 94px; white-space: normal; text-overflow: clip;} .table-cell-c{position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: 0.3s all; font-size: 14px;} .table-cell-c:hover{border-color: #16b777;} .table-expanded td:hover .table-cell{overflow: auto;} /* 单元格 TIPS 展开风格 */ body .table-tips .layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);} .table-tips-main{margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;} .table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5F5F5F; border-radius: 50%; color: #fff;} .table-tips-c:hover{background-color: #777;} .table-tips-c:before{position: relative; right: -2px;} /** 树表 **/ .table-tree-nodeIcon {max-width: 20px;} .table-tree-nodeIcon > * {width: 100%;} .table-tree-flexIcon,.table-tree-nodeIcon {margin-right: 2px;} .table-tree-flexIcon {cursor: pointer;} /** 文件上传 **/ .upload-file{display: none!important; opacity: .01; filter: Alpha(opacity=1);} .upload-list{margin: 11px 0;} .upload-choose{max-width: 200px; padding: 0 10px; color: #999; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .upload-drag{position: relative; display: inline-block; padding: 30px; border: 1px dashed #e2e2e2; background-color: #fff; text-align: center; cursor: pointer; color: #999;} .upload-drag .icon{font-size: 50px; color: #16baaa;} .upload-drag[lay-over]{border-color: #16baaa} .upload-form{display: inline-block;} .upload-iframe{position: absolute; width: 0; height: 0; border: 0; visibility: hidden} .upload-wrap{position: relative; display: inline-block; vertical-align: middle;} .upload-wrap .upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;} .btn-container .upload-choose{padding-left: 0;} /* 基础菜单元素 */ .menu{position: relative; margin: 5px 0; background-color: #fff; box-sizing: border-box;} .menu *{box-sizing: border-box;} .menu li, .menu-body-title, .menu-body-title a{padding: 5px 15px; color: initial} .menu li{position: relative; margin: 1px 0; line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;} .menu li:hover{background-color: #f8f8f8; } .menu li.disabled, .menu li.disabled *{background: none !important; color: #d2d2d2 !important; cursor: not-allowed !important;} .menu-item-parent:hover>.menu-body-panel{display: block; animation-name: fadein; animation-duration: 0.3s; animation-fill-mode: both; animation-delay:.2s;} .menu-item-parent>.menu-body-title, .menu-item-group>.menu-body-title{padding-right: 38px;} .menu .menu-item-group:hover, .menu .menu-item-none:hover, .menu .menu-item-divider:hover{background: none; cursor: default;} .menu .menu-item-group>ul{margin: 5px 0 -5px;} .menu .menu-item-group>.menu-body-title{color: rgba(0,0,0,.35); user-select: none;} .menu .menu-item-none{color: rgba(0,0,0,.35); cursor: default;} .menu .menu-item-none{text-align: center;} .menu .menu-item-divider{margin: 5px 0; padding: 0; height: 0; line-height: 0; border-bottom: 1px solid #eee; overflow: hidden;} .menu .menu-item-up:hover, .menu .menu-item-down:hover{cursor: pointer;} .menu .menu-item-up>.menu-body-title{ color: rgba(0,0,0,.8);} .menu .menu-item-up>ul{visibility: hidden; height: 0; overflow: hidden;} .menu .menu-item-up>.menu-body-title:hover>.icon, .menu .menu-item-down:hover>.menu-body-title>.icon{color: rgba(0,0,0,1);} .menu .menu-item-down>ul{visibility: visible; height: auto;} .menu .menu-item-checked, .menu .menu-item-checked2{background-color: #f8f8f8!important; color: #16b777;} .menu .menu-item-checked a, .menu .menu-item-checked2 a{color: #16b777;} .menu .menu-item-checked:after{position: absolute; right: -1px; top: 0; bottom: 0; border-right: 3px solid #16b777; content: "";} .menu-body-title{position: relative; margin: -5px -15px; overflow: hidden; text-overflow: ellipsis;} .menu-body-title a{display: block; margin: -5px -15px; color: rgba(0,0,0,.8);} .menu-body-title a:hover{transition: all .3s;} .menu-body-title>.icon{position: absolute; right: 15px; top: 50%; margin-top: -6px; line-height: normal; font-size: 14px;} .menu-body-title>.icon:hover{transition: all .3s;} .menu-body-title>.icon-right{right: 14px;} .menu-body-panel{display: none; position: absolute; top: -7px; left: 100%; z-index: 1000; margin-left: 13px; padding: 5px 0;} .menu-body-panel:before{content: ""; position: absolute; width: 20px; left: -16px; top: 0; bottom: 0;} .menu-body-panel-left{left: auto; right: 100%; margin: 0 13px 0;} .menu-body-panel-left:before{left: auto; right: -16px;} .menu-lg li{line-height: 32px;} .menu-lg li:hover, .menu-lg .menu-body-title a:hover{background: none; color: #16b777;} .menu-lg li .menu-body-panel{margin-left: 14px} .menu-lg li .menu-body-panel-left{margin: 0 15px 0;} /* 下拉菜单 */ .dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;} .dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;} .dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto;} /** 导航菜单 **/ .nav{position: relative; padding: 0 15px; background-color: #2f363c; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;} .nav *{font-size: 14px;} .nav .nav-item{position: relative; display: inline-block; *display: inline; *zoom: 1; margin-top: 0; list-style: none; vertical-align: middle; line-height: 60px;} .nav .nav-item a{display: block; padding: 0 20px; color: #fff; color: rgba(255,255,255,.7); transition: all .3s; -webkit-transition: all .3s;} .nav-bar, .nav .this:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background-color: #16b777; transition: all .2s; -webkit-transition: all .2s; pointer-events: none;} .nav-bar{z-index: 1000;} .nav[lay-bar="disabled"] .nav-bar{display: none;} .nav[lay-bar="disabled"].this:after{} .nav .this a, .nav .nav-item a:hover{color: #fff; text-decoration: none;} .nav .this:after{top: auto; bottom: 0; width: 100%;} .nav-img{width: 30px; height: 30px; margin-right: 10px; border-radius: 50%;} .nav .nav-more{position: absolute; top: 0; right: 3px; left: auto !important; margin-top: 0; font-size: 12px; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;} .nav .nav-mored, .nav-itemed > a .nav-more{transform: rotate(180deg);} .nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #eee; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap; box-sizing: border-box;} .nav .nav-child a{color: #5F5F5F; color: rgba(0,0,0,.8);} .nav .nav-child a:hover{background-color: #f8f8f8; color: rgba(0,0,0,.8);} .nav-child dd{margin: 1px 0; position: relative;} .nav-child dd.this{background-color: #f8f8f8; color: #000;} .nav-child dd.this:after{display: none;} .nav-child-r{left: auto; right: 0;} .nav-child-c{text-align: center;} /* 垂直导航菜单 */ .nav.nav-tree{width: 200px; padding: 0;} .nav-tree .nav-item{display: block; width: 100%; line-height: 40px;} .nav-tree .nav-item a{position: relative; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} .nav-tree .nav-item>a{padding-top: 5px; padding-bottom: 5px;} .nav-tree .nav-more{right: 15px;} .nav-tree .nav-item>a .nav-more{padding: 5px 0;} .nav-tree .nav-bar{width: 5px; height: 0;} .side .nav-tree .nav-bar{width: 2px;} .nav-tree .this, .nav-tree .this>a, .nav-tree .this>a:hover, .nav-tree .nav-child dd.this, .nav-tree .nav-child dd.this a{background-color: #16baaa; color: #fff;} .nav-tree .this:after{display: none;} .nav-tree .nav-title a, .nav-tree .nav-title a:hover, .nav-itemed>a{color: #fff !important;} .nav-tree .nav-bar{background-color: #16baaa;} .nav-tree .nav-child{position: relative; z-index: 0; top: 0; border: none; box-shadow: none;} .nav-tree .nav-child dd{margin: 0;} .nav-tree .nav-child a{color: #fff; color: rgba(255,255,255,.7);} .nav-tree .nav-child a:hover, .nav-tree .nav-child{background: none; color: #fff;} .nav-itemed>.nav-child{display: block; background-color: rgba(0,0,0,.3) !important;} .nav-itemed>.nav-child>.this>.nav-child{display: block;} /* 侧边 */.nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;} /* 导航浅色背景 */ .nav.bg-gray .nav-item a, .nav-tree.bg-gray a{color: #373737; color: rgba(0,0,0,.8);} .nav-tree.bg-gray{padding: 6px 0;} .nav-tree.bg-gray .nav-itemed>a{color: #000 !important;} .nav.bg-gray .this a{color: #16b777;} .nav-tree.bg-gray .nav-itemed>.nav-child{padding-left: 11px; background: none!important;} .nav-tree.bg-gray .nav-item>a{padding-top: 0; padding-bottom: 0;} .nav-tree.bg-gray .nav-item>a .nav-more{padding: 0;} .nav-tree.bg-gray .this, .nav-tree.bg-gray .this>a, .nav-tree.bg-gray .nav-child dd.this, .nav-tree.bg-gray .nav-child dd.this a{background: none!important; color: #16b777!important; font-weight: 700;} .nav-tree.bg-gray .nav-bar{background-color: #16b777;} /** 面包屑 **/ .breadcrumb{visibility: hidden; font-size: 0;} .breadcrumb>*{font-size: 14px;} .breadcrumb a{color: #999 !important;} .breadcrumb a:hover{color: #16b777 !important;} .breadcrumb a cite{color: #5F5F5F; font-style: normal;} .breadcrumb span[lay-separator]{margin: 0 10px; color: #999;} /** Tab 选项卡 **/ .tab{margin: 10px 0; text-align: left !important;} .tab[overflow]>.tab-title{overflow: hidden;} .tab .tab-title{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;} .tab .tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;} .tab .tab-title li{position: relative; line-height: 40px; min-width: 65px; margin: 0; padding: 0 15px; text-align: center; cursor: pointer;} .tab .tab-title li a{display: block; padding: 0 15px; margin: 0 -15px;} .tab-title .this{color: #000;} .tab-title .this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;} .tab-bar{position: absolute; right: 0; top: 0; z-index: 10; width: 30px; height: 39px; line-height: 39px; border-width: 1px; border-style: solid; border-radius: 2px; text-align: center; background-color: #fff; cursor: pointer;} .tab-bar .icon{position: relative; display: inline-block; top: 3px; transition: all .3s; -webkit-transition: all .3s;} .tab-item{display: none;} .tab-more{padding-right: 30px; height: auto !important; white-space: normal !important;} .tab-more li.this:after{border-bottom-color: #eee; border-radius: 2px;} .tab-more .tab-bar .icon{top: -2px; top: 3px\0; -webkit-transform: rotate(180deg); transform: rotate(180deg);} :root .tab-more .tab-bar .icon{top: -2px\0/IE9;} .tab-content{padding: 15px 0;} /* Tab 关闭 */.tab-title li .tab-close{position: relative; display: inline-block; width: 18px; height: 18px; line-height: 20px; margin-left: 8px; top: 1px; text-align: center; font-size: 14px; color: #c2c2c2; transition: all .2s; -webkit-transition: all .2s;} .tab-title li .tab-close:hover{border-radius: 2px; background-color: #ff5722; color: #fff;} /* Tab 简洁风格 */.tab-brief > .tab-title .this{color: #16baaa;} .tab-brief > .tab-title .this:after ,.tab-brief > .tab-more li.this:after{border: none; border-radius: 0; border-bottom: 2px solid #16b777;} .tab-brief[overflow] > .tab-title .this:after{top: -1px;} /* Tab 卡片风格 */.tab-card{border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);} .tab-card > .tab-title{background-color: #fafafa;} .tab-card > .tab-title li{margin-right: -1px; margin-left: -1px;} .tab-card > .tab-title .this{background-color: #fff; } .tab-card > .tab-title .this:after{border-top: none; border-width: 1px; border-bottom-color: #fff;} .tab-card > .tab-title .tab-bar{height: 40px; line-height: 40px; border-radius: 0; border-top: none; border-right: none;} .tab-card > .tab-more .this{background: none; color: #16b777;} .tab-card > .tab-more .this:after{border: none;} /* 时间线 */ .timeline{padding-left: 5px;} .timeline-item{position: relative; padding-bottom: 20px;} .timeline-axis{position: absolute; left: -5px; top: 0; z-index: 10; width: 20px; height: 20px; line-height: 20px; background-color: #fff; color: #16b777; border-radius: 50%; text-align: center; cursor: pointer;} .timeline-axis:hover{color: #ff5722;} .timeline-item:before{content: ""; position: absolute; left: 5px; top: 0; z-index: 0; width: 1px; height: 100%;} .timeline-item:first-child:before{display: block;} .timeline-item:last-child:before{display: none;} .timeline-content{padding-left: 25px;;} .timeline-title{position: relative; margin-bottom: 10px; line-height: 22px;} /* 小徽章 */ .badge, .badge-dot, .badge-rim{position:relative; display: inline-block; padding: 0 6px; font-size: 12px; text-align: center; background-color: #ff5722; color: #fff; border-radius: 2px;} .badge{height: 18px; line-height: 18px;} .badge-dot{width: 8px; height: 8px; padding: 0; border-radius: 50%;} .badge-rim{height: 18px; line-height: 18px; border-width: 1px; border-style: solid; background-color: #fff; color: #5F5F5F;} .btn .badge, .btn .badge-dot{margin-left: 5px;} .nav .badge, .nav .badge-dot{position: absolute; top: 50%; margin: -5px 6px 0;} .nav .badge{margin-top: -10px;} .tab-title .badge, .tab-title .badge-dot{left: 5px; top: -2px;} /* carousel 轮播 */ .carousel{position: relative; left: 0; top: 0; background-color: #f8f8f8;} .carousel>*[carousel-item]{position: relative; width: 100%; height: 100%; overflow: hidden;} .carousel>*[carousel-item]:before{position: absolute; content: '\e63d'; left: 50%; top: 50%; width: 100px; line-height: 20px; margin: -10px 0 0 -50px; text-align: center; color: #c2c2c2; font-family:"icon" !important; font-size: 30px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .carousel>*[carousel-item] > *{display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #f8f8f8; transition-duration: .3s; -webkit-transition-duration: .3s;} .carousel-updown > *{-webkit-transition: .3s ease-in-out up; transition: .3s ease-in-out up;} .carousel-arrow{display: none\0; opacity: 0; position: absolute; left: 10px; top: 50%; margin-top: -18px; width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 20px; border: none 0; border-radius: 50%; background-color: rgba(0,0,0,.2); color: #fff; -webkit-transition-duration: .3s; transition-duration: .3s; cursor: pointer;} .carousel-arrow[lay-type="add"]{left: auto!important; right: 10px;} .carousel[lay-arrow="always"] .carousel-arrow{opacity: 1; left: 20px;} .carousel[lay-arrow="always"] .carousel-arrow[lay-type="add"]{right: 20px;} .carousel[lay-arrow="none"] .carousel-arrow{display: none;} .carousel-arrow:hover, .carousel-ind ul:hover{background-color: rgba(0,0,0,.35);} .carousel:hover .carousel-arrow{display: block\0; opacity: 1; left: 20px;} .carousel:hover .carousel-arrow[lay-type="add"]{right: 20px;} .carousel-ind{position: relative; top: -35px; width: 100%; line-height: 0!important; text-align: center; font-size: 0;} .carousel[lay-indicator="outside"]{margin-bottom: 30px;} .carousel[lay-indicator="outside"] .carousel-ind{top: 10px;} .carousel[lay-indicator="outside"] .carousel-ind ul{background-color: rgba(0,0,0,.5);} .carousel[lay-indicator="none"] .carousel-ind{display: none;} .carousel-ind ul{display: inline-block; padding: 5px; background-color: rgba(0,0,0,.2); border-radius: 10px; -webkit-transition-duration: .3s; transition-duration: .3s;} .carousel-ind ul li{display: inline-block; width: 10px; height: 10px; margin: 0 3px; font-size: 14px; background-color: #eee; background-color: rgba(255,255,255,.5); border-radius: 50%; cursor: pointer; -webkit-transition-duration: .3s; transition-duration: .3s;} .carousel-ind ul li:hover{background-color: rgba(255,255,255,.7);} .carousel-ind ul li.this{background-color: #fff;} .carousel>*[carousel-item]>.this, .carousel>*[carousel-item]>.carousel-prev, .carousel>*[carousel-item]>.carousel-next{display: block} .carousel>*[carousel-item]>.this{left: 0;} .carousel>*[carousel-item]>.carousel-prev{left: -100%;} .carousel>*[carousel-item]>.carousel-next{left: 100%;} .carousel>*[carousel-item]>.carousel-prev.carousel-right, .carousel>*[carousel-item]>.carousel-next.carousel-left{left: 0;} .carousel>*[carousel-item]>.this.carousel-left{left: -100%;} .carousel>*[carousel-item]>.this.carousel-right{left: 100%;} /* 上下切换 */.carousel[lay-anim="updown"] .carousel-arrow{left: 50%!important; top: 20px; margin: 0 0 0 -18px;} .carousel[lay-anim="updown"] .carousel-arrow[lay-type="add"]{top: auto!important; bottom: 20px;} .carousel[lay-anim="updown"] .carousel-ind{position: absolute; top: 50%; right: 20px; width: auto; height: auto;} .carousel[lay-anim="updown"] .carousel-ind ul{padding: 3px 5px;} .carousel[lay-anim="updown"] .carousel-ind li{display: block; margin: 6px 0;} .carousel[lay-anim="updown"]>*[carousel-item]>*{left: 0!important;} .carousel[lay-anim="updown"]>*[carousel-item]>.this{top: 0;} .carousel[lay-anim="updown"]>*[carousel-item]>.carousel-prev{top: -100%;} .carousel[lay-anim="updown"]>*[carousel-item]>.carousel-next{top: 100%;} .carousel[lay-anim="updown"]>*[carousel-item]>.carousel-prev.carousel-right, .carousel[lay-anim="updown"]>*[carousel-item]>.carousel-next.carousel-left{top: 0;} .carousel[lay-anim="updown"]>*[carousel-item]>.this.carousel-left{top: -100%;} .carousel[lay-anim="updown"]>*[carousel-item]>.this.carousel-right{top: 100%;} /* 渐显切换 */.carousel[lay-anim="fade"]>*[carousel-item]>*{left: 0!important;} .carousel[lay-anim="fade"]>*[carousel-item]>.carousel-prev, .carousel[lay-anim="fade"]>*[carousel-item]>.carousel-next{opacity: 0;} .carousel[lay-anim="fade"]>*[carousel-item]>.carousel-prev.carousel-right, .carousel[lay-anim="fade"]>*[carousel-item]>.carousel-next.carousel-left{opacity: 1;} .carousel[lay-anim="fade"]>*[carousel-item]>.this.carousel-left, .carousel[lay-anim="fade"]>*[carousel-item]>.this.carousel-right{opacity: 0} /** fixbar **/ .fixbar{position: fixed; right: 16px; bottom: 16px; z-index: 999999;} .fixbar li{width: 50px; height: 50px; line-height: 50px; margin-bottom: 1px; text-align:center; cursor: pointer; font-size:30px; background-color: #9F9F9F; color:#fff; border-radius: 2px; opacity: 0.95;} .fixbar li:hover{opacity: 0.85;} .fixbar li:active{opacity: 1;} .fixbar .fixbar-top{display: none; font-size: 40px;} /** 表情面板 **/ body .util-face{border: none; background: none;} body .util-face .layer-content{padding:0; background-color:#fff; color:#5F5F5F; box-shadow:none} .util-face .layer-TipsG{display:none;} .util-face ul{position:relative; width:372px; padding:10px; border:1px solid #D9D9D9; background-color:#fff; box-shadow: 0 0 20px rgba(0,0,0,.2);} .util-face ul li{cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center;} .util-face ul li:hover{position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec;} /** 代码文本修饰 **/ .code{display: block; position: relative; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333; font-family: "Courier New",Consolas,"Lucida Console"; font-size: 12px;} /** 穿梭框 **/ .transfer-box, .transfer-header, .transfer-search{border-width: 0; border-style: solid; border-color: #eee} .transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;} .transfer-box .form-checkbox{width: 100%; margin: 0 !important;} .transfer-header{height: 38px; line-height: 38px; padding: 0 11px; border-bottom-width: 1px;} .transfer-search{position:relative; padding: 11px; border-bottom-width: 1px;} .transfer-search .input{height: 32px; padding-left: 30px; font-size: 12px;} .transfer-search .icon-search{position: absolute; left: 20px; top: 50%; line-height: normal; margin-top: -8px; color: #5F5F5F;} .transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;} .transfer-active .btn{display: block; margin: 0; padding: 0 15px; background-color: #16b777; border-color: #16b777; color: #fff;} .transfer-active .btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;} .transfer-active .btn:first-child{margin-bottom: 15px;} .transfer-active .btn .icon{margin: 0; font-size: 14px !important;} .transfer-data{padding: 5px 0; overflow: auto;} .transfer-data li{height: 32px; line-height: 32px; margin-top: 0 !important; padding: 0 11px;list-style-type: none !important;} .transfer-data li:hover{background-color: #f8f8f8; transition: .5s all;} .transfer-data .none{padding: 15px 11px; text-align: center; color: #999;} /** 评分组件 **/ .rate, .rate *{display: inline-block; vertical-align: middle;} .rate{padding: 11px 6px 11px 0; font-size: 0;} .rate li{margin-top: 0 !important;} .rate li i.icon{ font-size: 20px; color: #ffb800;} .rate li i.icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;} .rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);} .rate[readonly] li i:hover{cursor: default; transform: scale(1);} /** 颜色选择器 **/ .colorpicker{width: 38px; height: 38px; border: 1px solid #eee; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box;} .colorpicker:hover{border-color: #d2d2d2;} .colorpicker.colorpicker-lg{width: 44px; height: 44px; line-height: 30px;} .colorpicker.colorpicker-sm{width: 30px; height: 30px; line-height: 20px; padding: 3px;} .colorpicker.colorpicker-xs{width: 22px; height: 22px; line-height: 16px; padding: 1px;} .colorpicker-trigger-bgcolor{display: block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); border-radius: 2px;} .colorpicker-trigger-span{display: block; height: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; text-align: center;} .colorpicker-trigger-i{display: inline-block; color: #FFF; font-size: 12px;} .colorpicker-trigger-i.icon-close{color: #999;} .colorpicker-main{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; width: 280px; margin: 5px 0; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);} .colorpicker-main-wrapper{height: 180px; position: relative;} .colorpicker-basis{width: 260px; height: 100%; position: relative;} .colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));} .colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);} .colorpicker-basis-cursor{width: 10px; height: 10px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px; cursor: pointer;} .colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);} .colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;} .colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)} .colorpicker-alpha-bgcolor{height: 100%; position: relative;} .colorpicker-alpha-slider{width: 5px; height: 100%; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; top: 0;} .colorpicker-main-pre{padding-top: 7px; font-size: 0;} .colorpicker-pre{width: 20px; height: 20px; border-radius: 2px; display: inline-block; margin-left: 6px; margin-bottom: 7px; cursor: pointer;} .colorpicker-pre:nth-child(11n+1){margin-left: 0;} .colorpicker-pre-isalpha{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)} .colorpicker-pre.this{box-shadow: 0 0 3px 2px rgba(0,0,0,.15);} .colorpicker-pre > div{height: 100%; border-radius: 2px;} .colorpicker-main-input{text-align: right; padding-top: 7px;} .colorpicker-main-input .btn-container .btn{margin: 0 0 0 10px;} .colorpicker-main-input div.inline{float: left; margin-right: 10px; font-size: 14px;} .colorpicker-main-input input.input{width: 150px; height: 30px; color: #5F5F5F;} /** 滑块 **/ .slider{height: 4px; background: #eee; border-radius: 3px; position: relative; cursor: pointer;} .slider-bar{border-radius: 3px; position: absolute; height: 100%;} .slider-step{position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #FFF; -webkit-transform: translateX(-50%); transform: translateX(-50%);} .slider-wrap{width: 36px; height: 36px; position: absolute; top: -16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; text-align: center;} .slider-wrap-btn{width: 12px; height: 12px; border-radius: 50%; background: #FFF; display: inline-block; vertical-align: middle; cursor: pointer; transition: 0.3s;} .slider-wrap:after{content: ""; height: 100%; display: inline-block; vertical-align: middle;} .slider-wrap-btn:hover, .slider-wrap-btn.slider-hover{transform: scale(1.2);} .slider-wrap-btn.disabled:hover{transform: scale(1) !important;} .slider-tips{position: absolute; top: -42px; z-index: 77777777; white-space:nowrap; display: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;} .slider-tips:after{content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;} .slider-input{width: 70px; height: 32px; border: 1px solid #eee; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -14px; box-sizing: border-box;} .slider-input-btn{position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee;} .slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center; color: #999;} .slider-input-btn i:first-child{top: 0; border-bottom: 1px solid #eee;} .slider-input-txt{height: 100%; font-size: 14px;} .slider-input-txt input{height: 100%; border: none; padding-right: 21px;} .slider-input-btn i:hover{color: #16baaa;} /*垂直滑块*/ .slider-vertical{width: 4px; margin-left: 33px;} .slider-vertical .slider-bar{width: 4px;} .slider-vertical .slider-step{top: auto; left: 0px; -webkit-transform: translateY(50%); transform: translateY(50%);} .slider-vertical .slider-wrap{top: auto; left: -16px; -webkit-transform: translateY(50%); transform: translateY(50%);} .slider-vertical .slider-tips{top: auto; left: 2px;} @media \0screen{ .slider-wrap-btn{margin-left: -20px;} .slider-vertical .slider-wrap-btn{margin-left: 0; margin-bottom: -20px;} .slider-vertical .slider-tips{margin-left: -8px;} .slider > span{margin-left: 8px;} } /** 树组件 **/ .tree{line-height: 22px;} .tree .form-checkbox{margin: 0 !important;} .tree-set{width: 100%; position: relative;} .tree-pack{display: none; padding-left: 20px; position: relative;} .tree-line .tree-pack{padding-left: 27px;} .tree-line .tree-set .tree-set:after{content: ""; position: absolute; top: 14px; left: -9px; width: 17px; height: 0; border-top: 1px dotted #c0c4cc;} .tree-entry{position: relative; padding: 3px 0; height: 26px; white-space: nowrap;} .tree-entry:hover{background-color: #eee;} .tree-line .tree-entry:hover{background-color: rgba(0,0,0,0);} .tree-line .tree-entry:hover .tree-txt{color: #999; text-decoration: underline; transition: 0.3s;} .tree-main{display: inline-block; vertical-align: middle; cursor: pointer; padding-right: 10px;} .tree-line .tree-set:before{content: ""; position: absolute; top: 0; left: -9px; width: 0; height: 100%; border-left: 1px dotted #c0c4cc;} .tree-line .tree-set.tree-setLineShort:before{height: 13px;} .tree-line .tree-set.tree-setHide:before{height: 0;} .tree-iconClick{display: inline-block; vertical-align: middle; position: relative; height: 20px; line-height: 20px; margin: 0 10px; color: #c0c4cc;} .tree-icon{height: 14px; line-height: 12px; width: 14px; text-align: center; border: 1px solid #c0c4cc;} .tree-iconClick .icon{font-size: 18px;} .tree-icon .icon{font-size: 12px; color: #5F5F5F;} .tree-iconArrow{padding: 0 5px;} .tree-iconArrow:after{content: ""; position: absolute; left: 4px; top: 3px; z-index: 100; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #c0c4cc; transition: 0.5s;} .tree-spread>.tree-entry .tree-iconClick>.tree-iconArrow:after{transform: rotate(90deg) translate(3px, 4px);} .tree-txt{display: inline-block; vertical-align: middle; color: #555;} .tree-search{margin-bottom: 15px; color: #5F5F5F;} .tree-btnGroup{visibility: hidden; display: inline-block; vertical-align: middle; position: relative;} .tree-btnGroup .icon{display: inline-block; vertical-align: middle; padding: 0 2px; cursor: pointer;} .tree-btnGroup .icon:hover{color: #999; transition: 0.3s;} .tree-entry:hover .tree-btnGroup{visibility: visible;} .tree-editInput{position: relative; display: inline-block; vertical-align: middle; height: 20px; line-height: 20px; padding: 0; border: none; background-color: rgba(0,0,0,0.05);} .tree-emptyText{text-align: center; color: #999;} /** 动画 **/ .anim{-webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both;} .anim.icon{display: inline-block;} .anim-loop{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} .trans, .trans a{transition: all .2s; -webkit-transition: all .2s;} /* 过度变换 */ /* 循环旋转 */ @-webkit-keyframes rotate{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @keyframes rotate{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .anim-rotate{-webkit-animation-name: rotate; animation-name: rotate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear;} /* 从最底部往上滑入 */ @-webkit-keyframes up{ from {-webkit-transform: translate3d(0, 100%, 0); opacity: 0.3;} to {-webkit-transform: translate3d(0, 0, 0); opacity: 1;} } @keyframes up{ from {transform: translate3d(0, 100%, 0); opacity: 0.3;} to {transform: translate3d(0, 0, 0); opacity: 1;} } .anim-up{-webkit-animation-name: up; animation-name: up;} /* 微微往上滑入 */ @-webkit-keyframes upbit{ from {-webkit-transform: translate3d(0, 15px, 0); opacity: 0.3;} to {-webkit-transform: translate3d(0, 0, 0); opacity: 1;} } @keyframes upbit{ from {transform: translate3d(0, 15px, 0); opacity: 0.3;} to {transform: translate3d(0, 0, 0); opacity: 1;} } .anim-upbit{-webkit-animation-name: upbit; animation-name: upbit;} /* 从最顶部往下滑入 */ @keyframes down { 0% {opacity: 0.3; transform: translate3d(0, -100%, 0);} 100% {opacity: 1; transform: translate3d(0, 0, 0);} } .anim-down{animation-name: down;} /* 微微往下滑入 */ @keyframes downbit { 0% {opacity: 0.3; transform: translate3d(0, -5px, 0);} 100% {opacity: 1; transform: translate3d(0, 0, 0);} } .anim-downbit{animation-name: downbit;} /* 放大 */ @-webkit-keyframes scale { 0% {opacity: 0.3; -webkit-transform: scale(.5);} 100% {opacity: 1; -webkit-transform: scale(1);} } @keyframes scale { 0% {opacity: 0.3; -ms-transform: scale(.5); transform: scale(.5);} 100% {opacity: 1; -ms-transform: scale(1); transform: scale(1);} } .anim-scale{-webkit-animation-name: scale; animation-name: scale} /* 弹簧式放大 */ @-webkit-keyframes scale-spring { 0% {opacity: 0.5; -webkit-transform: scale(.5);} 80% {opacity: 0.8; -webkit-transform: scale(1.1);} 100% {opacity: 1; -webkit-transform: scale(1);} } @keyframes scale-spring { 0% {opacity: 0.5; transform: scale(.5);} 80% {opacity: 0.8; transform: scale(1.1);} 100% {opacity: 1; transform: scale(1);} } .anim-scaleSpring{-webkit-animation-name: scale-spring; animation-name: scale-spring} /* 放小 */ @keyframes scalesmall { 0% {opacity: 0.3; transform: scale(1.5);} 100% {opacity: 1; transform: scale(1);} } .anim-scalesmall{animation-name: scalesmall} /* 弹簧式放小 */ @keyframes scalesmall-spring { 0% {opacity: 0.3; transform: scale(1.5);} 80% {opacity: 0.8; transform: scale(0.9);} 100% {opacity: 1; transform: scale(1);} } .anim-scalesmall-spring{animation-name: scalesmall-spring} /* 渐显 */ @-webkit-keyframes fadein { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadein { 0% {opacity: 0;} 100% {opacity: 1;} } .anim-fadein{-webkit-animation-name: fadein; animation-name: fadein;} /* 渐隐 */ @-webkit-keyframes fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } .anim-fadeout{-webkit-animation-name: fadeout; animation-name: fadeout}
数据列表操作启用、禁用 禁 用 激 活 多选表格头 表格行 排序表头 刷 新 表行 url()}" data-loading="false" data-value="id#{$vo.id};action#sort;sort#{value}" value="{$vo.sort}"> 爬虫 标题:{{=d.title}} 链接:{{=d.href}} 操作:删除 angluar操作例子 序号 是否正确 答案内容 添加 正确 错误 保存数据 取消编辑
FormData XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件! var form = document.getElementById("form"), formData = new FormData(form); /** * formData.get(name: string) * * 返回第一个属性为 name 的 值 || null */ /** * formData.getAll(name: string) * * 获取所有属性名为 name 的值，以 数组 || [] 形式返回 */ /** * （同步操作） * formData.append(name: string, value: string|Blob, fileName: string) * * 可添加多个同名的值，不会覆盖，非唯一性 */ formData.append("username", "jackie"); console.log("formData:", formData, "get:", formData.get("username"), "getAll:", formData.getAll("username")); /** * （同步操作） * formData.set(name: string, value: string|Blob, fileName: string) * * 有该属性则修改，无则添加该属性及值 * 会将 name 属性的值全部改为 value，且 getAll 会返回 仅包含一个该value值 的数组 */ formData.set("username", "setted-name"); console.log("formData:", formData, "get:", formData.get("username"), "getAll:", formData.getAll("username")); /** * has(name: string): Boolean */ console.log("has:", formData.has("username"), formData.has("has-attr")); /** * delete(name: string) * * 删除所有 name 属性 */ formData.delete("username") console.log("deleted-has:", formData.has("username"), formData.get("username"), formData.getAll("username")); // ************************************************************************************************************************ ### 多图上传 // 通过 $.each($input[0].files, function (index, file) { formData.append("file" + index, file); }); $.ajax({ // ... // 直接将 formData 对象传递给后台 data: formData, }) Base64、Blob、File 之间的相互转换 // 1、file、blob 转换为 base64 function fileOrBlobToBase64 (fileOrBlob, callback) { var reader = new FileReader(); reader.readAsDataURL(fileOrBlob); reader.onload = function(evt) { console.log(reader.result, this.result, evt.target.result); //获取到base64格式图片 // callback(result); }; } // 2、base64 转换为 blob function base64ToBlob(base64Data) { //console.log(base64Data);//data:image/png;base64, var byteString; if(base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]);//base64 解码 else{ byteString = unescape(base64Data.split(',')[1]); } var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png // var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组 // var ia = new Uint8Array(arrayBuffer);//创建视图 var ia = new Uint8Array(byteString.length);//创建视图 for(var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } var blob = new Blob([ia], { type: mimeString }); return blob; } // 3、base64 转换为 file function base64ToFile(base64, filename) {//将base64转换为文件 var arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); } 移动端调试控制台 // 实例化即可 var VConsole = new VConsole();IScroll 插件iscroll.js 文件只包含基本功能iscroll-probe.js 文件方可监听 scroll 事件。方便于添加 上拉加载 和 下拉刷新 功能官方用例 https://github.com/cubiq/iscroll/blob/master/demos/probe/index.html 1 2 3 #scroll-wrapper { /* 需要知道容器（垂直滚动时）高度 或 （水平滚动时）宽度 */ height: 800px; /* 必要 */ overflow: hidden; /* 如垂直滑动，当与 IOS 滑动冲突时，可尝试 overflow-y: scroll */ /* 可选，用于处理 IScroll 滚动区域不准确问题 */ position: relative; /* 可选，解决谷歌浏览器下警告 */ touch-action: none; } /* 当最后一条数据无法滑动到完整显示，可通过给滚动元素加 padding-bottom 解决 */ #scroll-wrapper >div { padding-bottom: 20px; }var IScrollInstance = new IScroll("#scroll-wrapper", { }); // request new data... $("#list").html(str); // 每次更新滑动列表内容后，记得手动刷新插件 IScrollInstance && IScrollInstance.refresh(); // iscroll-probe.js 才可监听到 IScrollInstance.on("scroll", funciton () { }); IScrollInstance.on("scrollEnd", _scrollEnd); function _scrollEnd(e) { /* 【this.maxScrollY】 页面最大滚动距离，若垂直滑动时为负数，其性质等同于 scrollHeight 【this.y】 已滚动距离 【this.pointY】 当前手指位置 */ // 手指滑出滚动区域后，使滑动内容回弹 // if (this.pointY < 0) // _IScrollInstance.scrollTo(0, this.maxScrollY, 100); // 加载更多！ maxScrollY 和 y 都为负数 if (this.y < 0 && _IScrollInstance.maxScrollY >= _IScrollInstance.y) { } } IScroll-pro 下拉刷新、上拉加载插件插件源码及用例 地址：https://github.com/baiJiXianSheng/IScroll-prowindow.postMessageH5 API：window.postMessage(message: any, targetOrigin: string);当通过 iframe 嵌入页面时父页面向 iframe 嵌套的子页面传递消息通知：iframe.contentWindow.postMessage() // 父页面 document.querySelect("iframe").contentWindow.postMessage({ res: 1, evtType: "showNotice" }, "*"); // 在子页面定义接收事件 window.addEventListener("message", _postMessage); function _postMessage (evt) { if (evt.data.evtType === "showNotice") { // use evt.data.res to do something ... } } iframe 包裹的子页面 向父页面传递消息：window.parent.postMessage() // 子页面 // 若多层 iframe 嵌套时，可使用 window.top 取得最顶层页面window window.parent.postMessage({ res: 1, evtType: "showNotice" }, "*"); // 父页面，定义接收消息事件处理函数 window.addEventListener("message", _postMessage); function _postMessage (evt) { if (evt.data.evtType === "showNotice") { // use evt.data.res to do something ... } }禁止 input 聚焦时调用第三方输入法（兼容性不高） 禁止显示 input 历史输入 IOS 下 input 聚焦时光标位置偏移。以input上边界开始到文本底部，IOS 下 input 默认行高100%？(1)该法可能会出现文字垂直居中效果不准确input { /* 如原本以 40px 垂直居中 */ /* line-height: 40px; */ /* 但通常 font-size 和 line-height值相同时，会出现文字被“裁剪”显示不全 */ font-size: 20px; line-height: 20px; margin: 10px 0; /* 若使用 padding: 10px 0; 在ios的高版本如12，会出现bug，当你点击到padding-top的区间的时候，input的光标会移动到input默认文字的最前面，而不是我们希望的最后面 */ }(2).parentDom { display: flex; align-items: center; input { font-size: 20px; } }IOS input 键盘 换行 -> 搜索外面嵌套一层 form IOS 原生滑动.box { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }input[type=search] 时安卓或谷歌浏览器 输入框右侧蓝色x按钮input::-webkit-search-cancel-button { display: none; }input 输入文本跳转搜索页面后，再次返回该页面时输入框自动聚焦// ... searchInput.value = ""; if (document.activeElement instanceof HTMLElement) { document.activeElement.blur(); } beforeRequest();iPhone 设备 media 查询 样式适配 /* iphoneX、iphoneXs */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { div { } } /* iphone Xs Max */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) { div { } } /* iphone XR */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) { div { } } CSS 伪元素 ::before ::after div::before { /* 默认为 inline 元素 */ display: block; /* 值得类型可选：'文本'、url(xxx.png)、attr(节点的某个属性)、counter()序列 **/ content: '\0252'; content: '内容'; content: url(assets/xxx.png); /* */ /* 可通过js修改 data-index 的值，使得 伪元素的内容自动改变 */ content: attr(data-index); } BFCfloat 的值不是 noneposition 的值不是 static或者relativedisplay 的值是 inline-block、table-cell、flex、table-caption、inline-flexoverflow 的值不是 visibleInput[type=file]h5调用设备相机手机QQ软件内置浏览器，需要添加 capture="camera" 属性方可调用相机。html js var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { $("#loadInput").removeAttr("capture"); } else { var browser = navigator.userAgent.toLowerCase(); if (browser.match(/MicroMessenger/i) == 'micromessenger') { // 微信浏览器 // 可直接调用相机 } else if(browser.indexOf(' qq') != -1 && browser.indexOf('mqqbrowser') != -1){ // 手机QQ软件 内置浏览器 // 需要添加 capture="camera" 属性方可调用相机 $("#loadInput").attr("capture","camera"); } else if(browser.indexOf('mqqbrowser') != -1 && browser.indexOf(" qq") == -1){ // QQ浏览器 // alert("QQ浏览器"); } else { // alert("以上都不是"); } } // 主动触发 input-file 点击选择文件事件 document.getElementById("loadInput").click(); IOS 下 当有 input 聚焦时，其他元素通过 click 绑定的点击事件，因 input 失去焦点阻止了 click 事件触发，需要二次点击方可触发 var _isIphone = navigator.userAgent.toUpperCase().indexOf("IPHONE") > -1; // hack：IOS 上点击登录按钮时，若输入框聚焦，首先会触发 blur 事件，click事件无法触发，需再次点击触发 if (_isIphone) { $("body").on("touchend", function(e) { // 当点击到 btn 上时，直接调用对应的方法 if (e.target.id == "btn") dosomething(); }) } else { $("#btn").click(function () { dosomething0(); }); } 有 input 聚焦时，底部footer position: fixed 失效被键盘顶起。尝试解决方案：聚焦时 隐藏footer，失去焦点时 显示footer // 浏览器当前的高度 var oHeight = $(document).height(); $(window).resize(function () { var now = $(document).height(); if (now < oHeight) { $(".footer").hide(); } else { $(".footer").show(); } }); h5 页面在 IOS 下返回，未重载// 解决 h5 在IOS 下返回，页面不重载问题 var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/; if (browserRule.test(navigator.userAgent)) { window.onpageshow = function(event) { console.log("onpageshow!") if (event.persisted) { window.location.reload(); } }; } h5 页面在 Android 下 window.history.go(-1) 无法返回上一页 var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $("#cancel-btn").click(function () { if (isIOS) window.history.go(-1); else window.location.href = "lastPage.html"; // 或者 无论IOS或Android，都直接通过 location.href = "lastPage.html"; 跳转到指定页面 }); 标签在 IOS 下点击无法播放解决方案一： // 用一张播放按钮的图片，监听其点击事件，触发时动态生成 video 标签插入，并调用 video.play(); ### 注：若在初始化加载html文档时， 或 标签没有 src 属性及值，通过动态赋值（不会重新请求？）可能无法正常加载。 $("#play-btn").click(function () { var $video = $(" "); // 可监听其 播放事件 $video.on("play", function () { }); $("#video-container").append($video); $video.get(0).play(); }); iframe 在IOS下宽度变宽，产生左右滑动 .iframe-box { overflow: auto; /* 或者 overflow-y: scroll */ -webkit-overflow-scrolling:touch; /* IOS 顺滑 */ width:100%; height:100%; } /* 关键步骤 */ .iframe-box iframe { width: 1px; min-width: 100%; *width: 100%; } var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 // 通过 js 设置 scrolling 属性 $("iframe").attr("scrolling", isIOS ? "no" : "auto");
resethtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, menu, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {display: block;} *[hidden] {display: none;} body {line-height: 1;} menu, ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: none;} table {border-collapse: collapse;border-spacing: 0;} .clearfix:after, .clearfix:before{content: " ";display: table;} .clearfix:after{clear: both;} .center-block{display: block;margin-left: auto;margin-right: auto;} .right{float: right!important;} .left{float: left!important;} .hide{display: none!important;} .show{display: block!important;} .invisible{visibility: hidden;} .text-hide{color: transparent;text-shadow: none;background-color: transparent;border: 0;} .hidden{display: none!important;} .fixed{position: fixed;} .font-s12{font-size: 12px!important} .font-s13{font-size: 13px!important} .font-s14{font-size: 14px!important;} .font-s16{font-size: 16px!important;} .font-s18{font-size: 18px!important;} .font-s20{font-size: 20px!important;} .border-none{border: none!important;} .border-radius-none{border-radius: 0!important;} .line-height-18{line-height: 18px!important;} .padding-none{padding: 0!important;} .padding-5{padding: 5px!important} .padding-10{padding: 10px!important} .padding-15{padding: 15px!important} .padding-20{padding: 20px!important} .padding-25{padding: 25px!important} .padding-top-0{padding-top: 0!important;} .padding-top-5{padding-top: 5px!important;} .padding-top-10{padding-top: 10px!important;} .padding-top-15{padding-top: 15px!important;} .padding-top-20{padding-top: 20px!important;} .padding-left-0{padding-left: 0!important;} .padding-left-5{padding-left: 5px!important;} .padding-left-10{padding-left: 10px!important;} .padding-left-15{padding-left: 15px!important;} .padding-left-20{padding-left: 20px!important;} .padding-right-0{padding-right: 0!important;} .padding-right-5{padding-right: 5px!important;} .padding-right-10{padding-right: 10px!important;} .padding-right-15{padding-right: 15px!important;} .padding-right-20{padding-right: 20px!important;} .padding-bottom-0{padding-bottom: 0!important;} .padding-bottom-5{padding-bottom: 5px!important;} .padding-bottom-10{padding-bottom: 10px!important;} .padding-bottom-15{padding-bottom: 15px!important;} .padding-bottom-20{padding-bottom: 20px!important;} .margin-none{margin: 0!important;} .margin-5{margin: 5px!important} .margin-10{margin: 10px!important} .margin-15{margin: 15px!important} .margin-20{margin: 20px!important} .margin-25{margin: 25px!important} .margin-top-0{margin-top: 0!important;} .margin-top-5{margin-top: 5px!important;} .margin-top-10{margin-top: 10px!important;} .margin-top-15{margin-top: 15px!important;} .margin-top-20{margin-top: 20px!important;} .margin-left-0{margin-left: 0!important;} .margin-left-5{margin-left: 5px!important;} .margin-left-10{margin-left: 10px!important;} .margin-left-15{margin-left: 15px!important;} .margin-left-20{margin-left: 20px!important;} .margin-right-0{margin-right: 0!important;} .margin-right-5{margin-right: 5px!important;} .margin-right-10{margin-right: 10px!important;} .margin-right-15{margin-right: 15px!important;} .margin-right-20{margin-right: 20px!important;} .margin-bottom-0{margin-bottom: 0!important;} .margin-bottom-5{margin-bottom: 5px!important;} .margin-bottom-10{margin-bottom: 10px!important;} .margin-bottom-15{margin-bottom: 15px!important;} .margin-bottom-20{margin-bottom: 20px!important;}grid.container{margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;} .row{margin-left: -15px; margin-right: -15px;} .col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px;} .col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float: left;} .col-xs-12{width: 100%;} .col-xs-11{width: 91.66666667%;} .col-xs-10{width: 83.33333333%;} .col-xs-9{width: 75%;} .col-xs-8{width: 66.66666667%;} .col-xs-7{width: 58.33333333%;} .col-xs-6{width: 50%;} .col-xs-5{width: 41.66666667%;} .col-xs-4{width: 33.33333333%;} .col-xs-3{width: 25%;} .col-xs-2{width: 16.66666667%;} .col-xs-1{width: 8.33333333%;} .col-xs-pull-12{right: 100%;} .col-xs-pull-11{right: 91.66666667%;} .col-xs-pull-10{right: 83.33333333%;} .col-xs-pull-9{right: 75%;} .col-xs-pull-8{right: 66.66666667%;} .col-xs-pull-7{right: 58.33333333%;} .col-xs-pull-6{right: 50%;} .col-xs-pull-5{right: 41.66666667%;} .col-xs-pull-4{right: 33.33333333%;} .col-xs-pull-3{right: 25%;} .col-xs-pull-2{right: 16.66666667%;} .col-xs-pull-1{right: 8.33333333%;} .col-xs-pull-0{right: auto;} .col-xs-push-12{left: 100%;} .col-xs-push-11{left: 91.66666667%;} .col-xs-push-10{left: 83.33333333%;} .col-xs-push-9{left: 75%;} .col-xs-push-8{left: 66.66666667%;} .col-xs-push-7{left: 58.33333333%;} .col-xs-push-6{left: 50%;} .col-xs-push-5{left: 41.66666667%;} .col-xs-push-4{left: 33.33333333%;} .col-xs-push-3{left: 25%;} .col-xs-push-2{left: 16.66666667%;} .col-xs-push-1{left: 8.33333333%;} .col-xs-push-0{left: auto;} .col-xs-offset-12{margin-left: 100%;} .col-xs-offset-11{margin-left: 91.66666667%;} .col-xs-offset-10{margin-left: 83.33333333%;} .col-xs-offset-9{margin-left: 75%;} .col-xs-offset-8{margin-left: 66.66666667%;} .col-xs-offset-7{margin-left: 58.33333333%;} .col-xs-offset-6{margin-left: 50%;} .col-xs-offset-5{margin-left: 41.66666667%;} .col-xs-offset-4{margin-left: 33.33333333%;} .col-xs-offset-3{margin-left: 25%;} .col-xs-offset-2{margin-left: 16.66666667%;} .col-xs-offset-1{margin-left: 8.33333333%;} .col-xs-offset-0{margin-left: 0;}button.btn{display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;} .btn.focus,.btn:focus,.btn:hover{color: #333; text-decoration: none;} .btn.active,.btn:active{outline: 0; background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); box-shadow: inset 0 3px 5px rgba(0,0,0,.125);} .btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor: not-allowed; opacity: .65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none;} a.btn.disabled,fieldset[disabled] a.btn{pointer-events: none;} .btn-default{color: #333; background-color: #fff; border-color: #ccc;} .btn-default.focus,.btn-default:focus{color: #333; background-color: #e6e6e6; border-color: #8c8c8c;} .btn-default:hover{color: #333; background-color: #e6e6e6; border-color: #adadad;} .btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color: #333; background-color: #e6e6e6; border-color: #adadad;} .btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color: #333; background-color: #d4d4d4; border-color: #8c8c8c;} .btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image: none;} .btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color: #fff; border-color: #ccc;} .btn-default .badge{color: #fff; background-color: #333;} .btn-primary{color: #fff; background-color: #337ab7; border-color: #2e6da4;} .btn-primary.focus,.btn-primary:focus{color: #fff; background-color: #286090; border-color: #122b40;} .btn-primary:hover{color: #fff; background-color: #286090; border-color: #204d74;} .btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color: #fff; background-color: #286090; border-color: #204d74;} .btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color: #fff; background-color: #204d74; border-color: #122b40;} .btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image: none;} .btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color: #337ab7; border-color: #2e6da4;} .btn-primary .badge{color: #337ab7; background-color: #fff;} .btn-success{color: #fff; background-color: #5cb85c; border-color: #4cae4c;} .btn-success.focus,.btn-success:focus{color: #fff; background-color: #449d44; border-color: #255625;} .btn-success:hover{color: #fff; background-color: #449d44; border-color: #398439;} .btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color: #fff; background-color: #449d44; border-color: #398439;} .btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color: #fff; background-color: #398439; border-color: #255625;} .btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image: none;} .btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color: #5cb85c; border-color: #4cae4c;} .btn-success .badge{color: #5cb85c; background-color: #fff;} .btn-info{color: #fff; background-color: #5bc0de; border-color: #46b8da;} .btn-info.focus,.btn-info:focus{color: #fff; background-color: #31b0d5; border-color: #1b6d85;} .btn-info:hover{color: #fff; background-color: #31b0d5; border-color: #269abc;} .btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color: #fff; background-color: #31b0d5; border-color: #269abc;} .btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color: #fff; background-color: #269abc; border-color: #1b6d85;} .btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image: none;} .btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color: #5bc0de; border-color: #46b8da;} .btn-info .badge{color: #5bc0de; background-color: #fff;} .btn-warning{color: #fff; background-color: #f0ad4e; border-color: #eea236;} .btn-warning.focus,.btn-warning:focus{color: #fff; background-color: #ec971f; border-color: #985f0d;} .btn-warning:hover{color: #fff; background-color: #ec971f; border-color: #d58512;} .btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color: #fff; background-color: #ec971f; border-color: #d58512;} .btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color: #fff; background-color: #d58512; border-color: #985f0d;} .btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image: none;} .btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color: #f0ad4e; border-color: #eea236;} .btn-warning .badge{color: #f0ad4e; background-color: #fff;} .btn-danger{color: #fff; background-color: #d9534f; border-color: #d43f3a;} .btn-danger.focus,.btn-danger:focus{color: #fff; background-color: #c9302c; border-color: #761c19;} .btn-danger:hover{color: #fff; background-color: #c9302c; border-color: #ac2925;} .btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color: #fff; background-color: #c9302c; border-color: #ac2925;} .btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color: #fff; background-color: #ac2925; border-color: #761c19;} .btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image: none;} .btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color: #d9534f; border-color: #d43f3a;} .btn-danger .badge{color: #d9534f; background-color: #fff;} .btn-link{color: #337ab7; font-weight: 400; border-radius: 0;} .btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color: transparent; -webkit-box-shadow: none; box-shadow: none;} .btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color: transparent;} .btn-link:focus,.btn-link:hover{color: #23527c; text-decoration: underline; background-color: transparent;} .btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color: #777; text-decoration: none;} .btn-lg{padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;} .btn-sm{padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;} .btn-xs{padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px;} .btn-block{display: block; width: 100%;} .btn-block+.btn-block{margin-top: 5px;} input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width: 100%;}media@media (min-width:640px){ html{font-size:24px;}} @media (min-width:631px) and (max-width:639px){html{font-size:23.66px;}} @media (min-width:622px) and (max-width:630px){html{font-size:23.33px;}} @media (min-width:613px) and (max-width:621px){html{font-size:23px;}} @media (min-width:604px) and (max-width:612px){html{font-size:22.66px;}} @media (min-width:595px) and (max-width:603px){html{font-size:22.33px;}} @media (min-width:586px) and (max-width:594px){html{font-size:22px;}} @media (min-width:577px) and (max-width:585px){html{font-size:21.66px;}} @media (min-width:568px) and (max-width:576px){html{font-size:21.33px;}} @media (min-width:559px) and (max-width:567px){html{font-size:21px;}} @media (min-width:550px) and (max-width:558px){html{font-size:20.66px;}} @media (min-width:541px) and (max-width:549px){html{font-size:20.33px;}} @media (min-width:533px) and (max-width:540px){html{font-size:20px;}} @media (min-width:524px) and (max-width:532px){html{font-size:19.66px;}} @media (min-width:515px) and (max-width:523px){html{font-size:19.33px;}} @media (min-width:506px) and (max-width:514px){html{font-size:19px;}} @media (min-width:497px) and (max-width:505px){html{font-size:18.66px;}} @media (min-width:488px) and (max-width:496px){html{font-size:18.33px;}} @media (min-width:480px) and (max-width:487px){html{font-size:18px;}} @media (min-width:471px) and (max-width:479px){html{font-size:17.66px;}} @media (min-width:462px) and (max-width:470px){html{font-size:17.33px;}} @media (min-width:453px) and (max-width:461px){html{font-size:17px;}} @media (min-width:444px) and (max-width:452px){html{font-size:16.66px;}} @media (min-width:435px) and (max-width:443px){html{font-size:16.33px;}} @media (min-width:426px) and (max-width:434px){html{font-size:16px;}} @media (min-width:417px) and (max-width:425px){html{font-size:15.66px;}} @media (min-width:408px) and (max-width:416px){html{font-size:15.33px;}} @media (min-width:400px) and (max-width:407px){html{font-size:15px;}} @media (min-width:391px) and (max-width:399px){html{font-size:14.66px;}} @media (min-width:382px) and (max-width:390px){html{font-size:14.33px;}} @media (min-width:374px) and (max-width:381px){html{font-size:14px;}} @media (min-width:365px) and (max-width:373px){html{font-size:13.66px;}} @media (min-width:356px) and (max-width:364px){html{font-size:13.33px;}} @media (min-width:347px) and (max-width:355px){html{font-size:13px;}} @media (min-width:338px) and (max-width:346px){html{font-size:12.66px;}} @media (min-width:329px) and (max-width:337px){html{font-size:12.44px;}} @media (max-width:328px){html{font-size:12px;}}typographyh1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;} h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight: normal; line-height: 1; color: #777777;} h1,.h1,h2,.h2,h3,.h3{margin-top: 20px; margin-bottom: 10px;} h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size: 65%;} h4,.h4,h5,.h5,h6,.h6{margin-top: 10px; margin-bottom: 10px;} h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size: 75%;} h1,.h1{font-size: 36px;} h2,.h2{font-size: 30px;} h3,.h3{font-size: 24px;} h4,.h4{font-size: 18px;} h5,.h5{font-size: 14px;} h6,.h6{font-size: 12px;} p{margin: 0 0 10px;} .lead{margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4;} small,.small{font-size: 85%;} mark,.mark{background-color: #fcf8e3; padding: .2em;} .text-left{text-align: left;} .text-right{text-align: right;} .text-center{text-align: center;} .text-justify{text-align: justify;} .text-nowrap{white-space: nowrap;} .text-lowercase{text-transform: lowercase;} .text-uppercase{text-transform: uppercase;} .text-capitalize{text-transform: capitalize;} .text-muted{color: #777777;} .text-primary{color: #337ab7;} a.text-primary:hover,a.text-primary:focus{color: #286090;} .text-success{color: #3c763d;} a.text-success:hover,a.text-success:focus{color: #2b542c;} .text-info{color: #31708f;} a.text-info:hover,a.text-info:focus{color: #245269;} .text-warning{color: #8a6d3b;} a.text-warning:hover,a.text-warning:focus{color: #66512c;} .text-danger{color: #a94442;} a.text-danger:hover,a.text-danger:focus{color: #843534;} .bg-primary{color: #fff; background-color: #337ab7;} a.bg-primary:hover,a.bg-primary:focus{background-color: #286090;} .bg-success{background-color: #dff0d8;} a.bg-success:hover,a.bg-success:focus{background-color: #c1e2b3;} .bg-info{background-color: #d9edf7;} a.bg-info:hover,a.bg-info:focus{background-color: #afd9ee;} .bg-warning{background-color: #fcf8e3;} a.bg-warning:hover,a.bg-warning:focus{background-color: #f7ecb5;} .bg-danger{background-color: #f2dede;} a.bg-danger:hover,a.bg-danger:focus{background-color: #e4b9b9;} .page-header{padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eeeeee;} ul,ol{margin-top: 0; margin-bottom: 10px;} ul ul,ol ul,ul ol,ol ol{margin-bottom: 0;} .list-unstyled{padding-left: 0; list-style: none;} .list-inline{padding-left: 0; list-style: none; margin-left: -5px;} .list-inline > li{display: inline-block; padding-left: 5px; padding-right: 5px;} dl{margin-top: 0; margin-bottom: 20px;} dt,dd{line-height: 1.42857143;} dt{font-weight: bold;} dd{margin-left: 0;} abbr[title],abbr[data-original-title]{cursor: help; border-bottom: 1px dotted #777777;} .initialism{font-size: 90%; text-transform: uppercase;} blockquote{padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eeeeee;} blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom: 0;} blockquote footer,blockquote small,blockquote .small{display: block; font-size: 80%; line-height: 1.42857143; color: #777777;} blockquote footer:before,blockquote small:before,blockquote .small:before{content: '\2014 \00A0';} .blockquote-reverse,blockquote.pull-right{padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0; text-align: right;} .blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content: '';} .blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content: '\00A0 \2014';} address{margin-bottom: 20px; font-style: normal; line-height: 1.42857143;}shape1.正方形#square { width: 100px; height: 100px; background: red;}2.长方形#rectangle { width: 200px; height: 100px; background: red;}3.左上三角#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }4.右上三角#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent;}5.左下三角#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }6.右下三角#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }7.平行四边形#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }8.梯形#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }9.六角星#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }10.五角星#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }11.五边形#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; } #pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; }12.六边形#hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } #hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }13.桃心#heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }14.无限大符号#infinity { position: relative; width: 212px; height: 100px; } #infinity:before, #infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }15.蛋#egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }16.提示对话框#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }17.十二角星#burst-8 { background: red; width: 80px; height: 80px; position: relative; text-align: center; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); transform: rotate(20deg); } #burst-8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }18.八角星#burst-8 { background: red; width: 80px; height: 80px; position: relative; text-align: center; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); transform: rotate(20deg); } #burst-8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }19.钻石#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; } #cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; }20.八卦#yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; } 21.开关/**开关按钮**/ .switch{ position:relative; display: block; padding: 1px; border-radius: 24px; height: 36px; width: 86px; margin-bottom: 15px; background-color: #eee; cursor: pointer; vertical-align: top; -webkit-user-select: none; } .switch:before{ content: ''; display: block; border-radius: 24px; height: 36px; background-color: white; -webkit-transform: scale(1, 1); -webkit-transition: all 0.3s ease; } .switch:after{ content: ''; position: absolute; top: 50%; left: 50%; margin-top: -19px; margin-left: -34px; width: 36px; height: 36px; border-radius: 22px; background-color: white; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08); -webkit-transform: translateX(-9px); -webkit-transition: all 0.3s ease; } .switch.checked:after{ -webkit-transform: translateX(9px); } .switch.checked:before{ background-color:#ffcd20; }media-2@media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) { /* 兼容iphone4/4s */ } @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { /* 兼容iphone5/SE */ } @media (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) { /* 兼容iphone6、iphone7、iphone8 */ } @media (device-height: 736px) and (-webkit-min-device-pixel-ratio: 2) { /* 兼容iphone6plus、iphone7plus、iphone8plus */ } @media (device-height: 812px) and (-webkit-min-device-pixel-ratio: 2) { /* 兼容iphoneX */ }
css常用组件公共reset.txt栅格grid.txt按钮button.txt手机端布局统一media.txt排版文件typography.txtjs常用js函数ajax示例操作十分钟玩转 jQuery、实例大全Javascript函数的几种写法pcm手机端自适应.txt