@charset "UTF-8"; /*针对英文单词,强制让单词换行,break-word不拆分单词, break-all拆分单词*/ * { word-wrap: break-word; /*word-break: break-all;*/ } html { //font-size: calc(100vw / 7.5); /*1rem = 100px*/ } body { font-family: "Helvetica", "Tahoma", "Arial", "PingFang SC", "Microsoft Yahei", "SimSun", "SimHei", "sans-serif"; color: #666; background: #fff; font-size: 14px; } .break-all { word-break: break-all; } /*对齐方式*/ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } /*图片居左、右、中*/ .img-left { display: inline; float: left; } .img-right { display: inline; float: right; } .img-center { clear: both; display: block; margin: auto; } /*父容器要清除浮动*/ /*隐藏文字*/ .text-indent { text-indent: -9999em; } .seo-text { font-size: 0; line-height: 0; overflow: hidden; } /*图片控制尺寸*/ .img-overflow { width: 100%; height: 100%; overflow: hidden; } /*img自适应*/ .img-responsive { max-width: 100%; height: auto; display: block; } img { border: none; } /*清除浮动*/ .fl { float: left; _display: inline; *zoom: 1; } .fr { float: right; _display: inline; *zoom: 1; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } /*外边距px*/ .margin-auto { margin-left: auto; margin-right: auto; } .mb30 { margin-bottom: 30px; } /*字体加粗*/ .bold { font-weight: bold; } /*1行显示省略号*/ .ellipsis { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } /*默认2行显示省略号 只适用于webkit内核*/ .ellipses-line2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ellipses-line4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } /*placeholder重置字体颜色*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999 !important; font-size: 12px; } input:-moz-placeholder, textarea:-moz-placeholder { color: #999 !important; font-size: 12px; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999 !important; font-size: 12px; } // 美化滚动条 ::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0; opacity: 0.5; } ::-webkit-scrollbar { width: 6px; height: 10px; } ::-webkit-scrollbar-thumb { height: 30px; background-color: #b8b8b8; -webkit-border-radius: 6px; outline: 1px solid transparent; outline-offset: -2px; border: 1px solid transparent; filter: alpha(opacity = 30); -moz-opacity: .5; opacity: .5; } ::-webkit-scrollbar-thumb:hover { height: 30px; background-color: #878987; -webkit-border-radius: 6px; } /*隐藏*/ .hidden { display: none; } .visible { display: block; } /*将dcss容器里的所有元素设为默认值*/ .dcss html, .dcss address, .dcss blockquote, .dcss body, .dcss dd, .dcss div, .dcss dl, .dcss dt, .dcss fieldset, .dcss form, .dcss frame, .dcss frameset, .dcss h1, .dcss h2, .dcss h3, .dcss h4, .dcss h5, .dcss h6, .dcss noframes, .dcss ol, .dcss p, .dcss ul, .dcss center, .dcss dir, .dcss hr, .dcss menu, .dcss pre { display: block; } .dcss li { display: list-item; } .dcss head { display: none; } .dcss table { display: table; } .dcss tr { display: table-row; } .dcss thead { display: table-header-group; } .dcss tbody { display: table-row-group; } .dcss tfoot { display: table-footer-group; } .dcss col { display: table-column; } .dcss colgroup { display: table-column-group; } .dcss td, .dcss th { display: table-cell; } .dcss caption { display: table-caption; } .dcss th { font-weight: bolder; text-align: center; } .dcss caption { text-align: center; } .dcss body { margin: 8px; line-height: 1.12; } .dcss h1 { font-size: 2em; margin: 0.67em 0; line-height: 1.5em; } .dcss h2 { font-size: 1.5em; margin: 0.75em 0; line-height: 1.5em; } .dcss h3 { font-size: 1.17em; margin: 0.83em 0; line-height: 1.5em; } .dcss h4 { font-size: 1.09em; margin: 1.12em 0; line-height: 1.5em; } .dcss h4, .dcss p, .dcss blockquote, .dcss ul, .dcss fieldset, .dcss form, .dcss ol, .dcss dl, .dcss dir, .dcss menu { margin: 1.12em 0; } .dcss h5 { font-size: 0.83em; margin: 1.5em 0; line-height: 1.5em; } .dcss h6 { font-size: 0.75em; margin: 1.67em 0; line-height: 1.5em; } .dcss h1, .dcss h2, .dcss h3, .dcss h4, .dcss h5, .dcss h6, .dcss b, .dcss strong { font-weight: bolder; } .dcss blockquote { margin-left: 40px; margin-right: 40px; } .dcss i, .dcss cite, .dcss em, .dcss var, .dcss address { font-style: italic; } .dcss pre, .dcss tt, .dcss code, .dcss kbd, .dcss samp { font-family: monospace; } .dcss pre { white-space: pre; } .dcss button, .dcss textarea, .dcss input, .dcss object, .dcss select { display: inline-block; } .dcss big { font-size: 1.17em; } .dcss small, .dcss sub, .dcss sup { font-size: 0.83em; } .dcss sub { vertical-align: sub; } .dcss sup { vertical-align: super; } .dcss table { border-spacing: 2px; } .dcss thead, .dcss tbody, .dcss tfoot { vertical-align: middle; } .dcss td, .dcss th { vertical-align: inherit; } .dcss s, .dcss strike, .dcss del { text-decoration: line-through; } .dcss hr { border: 1px inset; } .dcss ol, .dcss ul, .dcss dir, .dcss menu, .dcss dd { margin-left: 40px; } .dcss ol, .dcss ul, .dcss li { list-style-type: decimal; } .dcss ol ul, .dcss ul ol, .dcss ul ul, .dcss ol ol { margin-top: 0; margin-bottom: 0; } .dcss u, .dcss ins { text-decoration: underline; } .dcss br:before { content: "A"; } .dcss :before, .dcss :after { white-space: pre-line; } .dcss center { text-align: center; } .dcss abbr, .dcss acronym { font-variant: small-caps; letter-spacing: 0.1em; } .dcss :link, .dcss :visited { text-decoration: underline; } .dcss :focus { outline: thin dotted invert; } .dcss BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override; } .dcss BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override; } .dcss *[DIR="ltr"] { direction: ltr; unicode-bidi: embed; } .dcss *[DIR="rtl"] { direction: rtl; unicode-bidi: embed; } @media print { .dcss h1 { page-break-before: always; } .dcss h1, .dcss h2, .dcss h3, .dcss h4, .dcss h5, .dcss h6 { page-break-after: avoid; } .dcss ul, .dcss ol, .dcss dl { page-break-before: avoid; } } //间距 $size-map: ( -2: -2px, 4: 4px, 5: 5px, 8: 8px, 10: 10px, 12: 12px, 15: 15px, 16: 16px, 20: 20px, 24: 24px, 25: 25px, 30: 30px, 32: 32px, 40: 40px, 50: 50px, 80: 80px, 140: 140px ); @each $name in map-keys($size-map) { $value: map-get($size-map, $name); .mt-#{$name} { margin-top: $value; } .mr-#{$name} { margin-right: $value; } .mb-#{$name} { margin-bottom: $value; } .ml-#{$name} { margin-left: $value; } .margin-#{$name} { margin: $value; } .pt-#{$name} { padding-top: $value !important; } .pr-#{$name} { padding-right: $value; } .pb-#{$name} { padding-bottom: $value; } .pl-#{$name} { padding-left: $value; } .pd-#{$name} { padding: $value; } } //字号 $font-map: ( 10: 10px, 11: 11px, 14: 14px, 15: 15px, 18: 18px, 20: 20px, 24: 24px, 25: 25px, 30: 30px, 36: 36px, 40: 40px, 50: 50px, 80: 80px, 140: 140px ); @each $size in map-keys($font-map) { $value: map-get($font-map, $size); .font-#{$size} { font-size: $value; } } .message-pop { padding: 40px 28px; box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.3); border-radius: 8px; .popper__arrow::after { display: none; } .popper__arrow { display: none; } }