@charset "utf-8"; /*! --------------- name:style.css author:moyyue site:www.vmore.com.cn 顺序：全局样式/元素样式/组件样式/页面样式 依赖于bootstrap -----------------*/ /* ------------------------------------------------ 第一部分：LESS混合集设置 * 加载初始化配置文件 --------------------------------------------------*/ /* ------------------------------------------------ 第一部分：基本配置设置-统一布局-必须 --------------------------------------------------*/ /* ------------------------------------------------ 第一部分：颜色 --------------------------------------------------*/ /* ------------------------------------------------ 第二部分：字体 --------------------------------------------------*/ /* ------------------------------------------------ 第三部分：间距 --------------------------------------------------*/ /* ------------------------------------------------ 第四部分：栅格系统配置 --------------------------------------------------*/ /* ------------------------------------------------ 第四部分：其他 --------------------------------------------------*/ /* ------------------------------------------------ 第五部分：section --------------------------------------------------*/ /* ------------------------------------------------ 第六部分：循环体-在item-loop中添加类.gutter-0,.gutter-1 等以改变间距 --------------------------------------------------*/ /*normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. 在所有浏览器中更新行高. * 2. Prevent adjustments of font size after orientation changes in iOS. */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * 在所有浏览器上移除外边距. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; text-decoration: none; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; outline: none; border: none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px white inset !important; box-shadow: 0 0 0px 1000px white inset !important; background-color: #fff !important; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } ul { margin: 0; padding: 0; } ul li { list-style-type: none; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0; padding: 0; } /* --------------------------------------------- * Bootstrap4.6部分-configuration文件夹 --------------------------------------------- */ .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100%; padding-right: 0.075rem; padding-left: 0.075rem; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .responsive-container, .container, .container-sm { max-width: 5.4rem; } } @media (min-width: 768px) { .responsive-container, .container, .container-md { max-width: 7.2rem; } } @media (min-width: 992px) { .responsive-container, .container, .container-lg { max-width: 9.6rem; } } @media (min-width: 1200px) { .responsive-container, .container, .container-xl { max-width: 11.4rem; } } @media (min-width: 1400px) { .responsive-container, .container, .container-xxl { max-width: 12.8rem; } } .row { display: flex; flex-wrap: wrap; margin-right: -0.075rem; margin-left: -0.075rem; } .grid-column, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl, .col-xxl-auto { position: relative; width: 100%; padding-right: 0.075rem; padding-left: 0.075rem; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-3 > * { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-6 > * { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .order-first { order: -1; } .order-last { order: 13; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-sm-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-sm-3 > * { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-sm-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-sm-6 > * { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .order-sm-first { order: -1; } .order-sm-last { order: 13; } .order-sm-0 { order: 0; } .order-sm-1 { order: 1; } .order-sm-2 { order: 2; } .order-sm-3 { order: 3; } .order-sm-4 { order: 4; } .order-sm-5 { order: 5; } .order-sm-6 { order: 6; } .order-sm-7 { order: 7; } .order-sm-8 { order: 8; } .order-sm-9 { order: 9; } .order-sm-10 { order: 10; } .order-sm-11 { order: 11; } .order-sm-12 { order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-md-3 > * { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-md-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-md-6 > * { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-md-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-md-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-md-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-md-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .order-md-first { order: -1; } .order-md-last { order: 13; } .order-md-0 { order: 0; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } .order-md-6 { order: 6; } .order-md-7 { order: 7; } .order-md-8 { order: 8; } .order-md-9 { order: 9; } .order-md-10 { order: 10; } .order-md-11 { order: 11; } .order-md-12 { order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-lg-3 > * { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-lg-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-lg-6 > * { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .order-lg-first { order: -1; } .order-lg-last { order: 13; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } .order-lg-6 { order: 6; } .order-lg-7 { order: 7; } .order-lg-8 { order: 8; } .order-lg-9 { order: 9; } .order-lg-10 { order: 10; } .order-lg-11 { order: 11; } .order-lg-12 { order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-xl-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-xl-3 > * { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-xl-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-xl-6 > * { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-xl-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-xl-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-xl-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-xl-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } .order-xl-first { order: -1; } .order-xl-last { order: 13; } .order-xl-0 { order: 0; } .order-xl-1 { order: 1; } .order-xl-2 { order: 2; } .order-xl-3 { order: 3; } .order-xl-4 { order: 4; } .order-xl-5 { order: 5; } .order-xl-6 { order: 6; } .order-xl-7 { order: 7; } .order-xl-8 { order: 8; } .order-xl-9 { order: 9; } .order-xl-10 { order: 10; } .order-xl-11 { order: 11; } .order-xl-12 { order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } } @media (min-width: 1400px) { .col-xxl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .row-cols-xxl-1 > * { flex: 0 0 100%; max-width: 100%; } .row-cols-xxl-2 > * { flex: 0 0 50%; max-width: 50%; } .row-cols-xxl-3 > * { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .row-cols-xxl-4 > * { flex: 0 0 25%; max-width: 25%; } .row-cols-xxl-5 > * { flex: 0 0 20%; max-width: 20%; } .row-cols-xxl-6 > * { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-xxl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-xxl-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; } .col-xxl-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } .col-xxl-3 { flex: 0 0 25%; max-width: 25%; } .col-xxl-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; } .col-xxl-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; } .col-xxl-6 { flex: 0 0 50%; max-width: 50%; } .col-xxl-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } .col-xxl-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; } .col-xxl-9 { flex: 0 0 75%; max-width: 75%; } .col-xxl-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; } .col-xxl-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; } .col-xxl-12 { flex: 0 0 100%; max-width: 100%; } .order-xxl-first { order: -1; } .order-xxl-last { order: 13; } .order-xxl-0 { order: 0; } .order-xxl-1 { order: 1; } .order-xxl-2 { order: 2; } .order-xxl-3 { order: 3; } .order-xxl-4 { order: 4; } .order-xxl-5 { order: 5; } .order-xxl-6 { order: 6; } .order-xxl-7 { order: 7; } .order-xxl-8 { order: 8; } .order-xxl-9 { order: 9; } .order-xxl-10 { order: 10; } .order-xxl-11 { order: 11; } .order-xxl-12 { order: 12; } .offset-xxl-0 { margin-left: 0; } .offset-xxl-1 { margin-left: 8.33333333%; } .offset-xxl-2 { margin-left: 16.66666667%; } .offset-xxl-3 { margin-left: 25%; } .offset-xxl-4 { margin-left: 33.33333333%; } .offset-xxl-5 { margin-left: 41.66666667%; } .offset-xxl-6 { margin-left: 50%; } .offset-xxl-7 { margin-left: 58.33333333%; } .offset-xxl-8 { margin-left: 66.66666667%; } .offset-xxl-9 { margin-left: 75%; } .offset-xxl-10 { margin-left: 83.33333333%; } .offset-xxl-11 { margin-left: 91.66666667%; } } /* ------------------------------------------------ 第二部分：第三方样式 --------------------------------------------------*/ /** * Swiper 11.0.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 26, 2023 */ /* FONT_START */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } /* Navigation font end */ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } :root { /* --swiper-scrollbar-border-radius: 10px; --swiper-scrollbar-top: auto; --swiper-scrollbar-bottom: 4px; --swiper-scrollbar-left: auto; --swiper-scrollbar-right: 4px; --swiper-scrollbar-sides-offset: 1%; --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1); --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5); --swiper-scrollbar-size: 4px; */ } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } /* Zoom container styles start */ .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } /* Zoom container styles end */ .swiper-slide-zoomed { cursor: move; touch-action: none; } /* a11y */ .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active { pointer-events: auto; } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } /* Cube slide shadows start */ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Cube slide shadows end */ .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Flip slide shadows start */ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Flip slide shadows end */ .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } /*********************************** ** 扩展-分页器 ************************************/ .swiper-horizontal .swiper-pagination-line .swiper-pagination-bullet { width: 0.56rem; height: 0.04rem; border-radius: 0; background-color: #fff; } .swiper-horizontal .swiper-pagination-line .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .swiper-horizontal .swiper-pagination-ring .swiper-pagination-bullet { width: 0.22rem; height: 0.22rem; border-radius: 0; background-color: transparent; border: solid 2px transparent; border-radius: 50%; position: relative; } .swiper-horizontal .swiper-pagination-ring .swiper-pagination-bullet::after { content: ""; width: 0.06rem; height: 0.06rem; border-radius: 50%; background-color: #fff; position: absolute; left: calc(50% - 0.03rem); top: calc(50% - 0.03rem); } .swiper-horizontal .swiper-pagination-ring .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: rgba(255, 255, 255, 0.5); } [aos][aos][aos-easing=linear], body[aos-easing=linear] [aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } [aos][aos][aos-easing=ease], body[aos-easing=ease] [aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); } [aos][aos][aos-easing=ease-in], body[aos-easing=ease-in] [aos] { -webkit-transition-timing-function: cubic-bezier(0.42, 0, 1, 1); transition-timing-function: cubic-bezier(0.42, 0, 1, 1); } [aos][aos][aos-easing=ease-out], body[aos-easing=ease-out] [aos] { -webkit-transition-timing-function: cubic-bezier(0, 0, 0.58, 1); transition-timing-function: cubic-bezier(0, 0, 0.58, 1); } [aos][aos][aos-easing=ease-in-out], body[aos-easing=ease-in-out] [aos] { -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } [aos][aos][aos-easing=ease-in-back], body[aos-easing=ease-in-back] [aos] { -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } [aos][aos][aos-easing=ease-out-back], body[aos-easing=ease-out-back] [aos] { -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } [aos][aos][aos-easing=ease-in-out-back], body[aos-easing=ease-in-out-back] [aos] { -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } [aos][aos][aos-easing=ease-in-sine], body[aos-easing=ease-in-sine] [aos] { -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } [aos][aos][aos-easing=ease-out-sine], body[aos-easing=ease-out-sine] [aos] { -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } [aos][aos][aos-easing=ease-in-out-sine], body[aos-easing=ease-in-out-sine] [aos] { -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } [aos][aos][aos-easing=ease-in-quad], [aos][aos][aos-easing=ease-in-cubic], [aos][aos][aos-easing=ease-in-quart], body[aos-easing=ease-in-quad] [aos], body[aos-easing=ease-in-cubic] [aos], body[aos-easing=ease-in-quart] [aos] { -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [aos][aos][aos-easing=ease-out-quad], [aos][aos][aos-easing=ease-out-cubic], [aos][aos][aos-easing=ease-out-quart], body[aos-easing=ease-out-quad] [aos], body[aos-easing=ease-out-cubic] [aos], body[aos-easing=ease-out-quart] [aos] { -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [aos][aos][aos-easing=ease-in-out-quad], [aos][aos][aos-easing=ease-in-out-cubic], [aos][aos][aos-easing=ease-in-out-quart], body[aos-easing=ease-in-out-quad] [aos], body[aos-easing=ease-in-out-cubic] [aos], body[aos-easing=ease-in-out-quart] [aos] { -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [aos][aos][aos-duration='50'], body[aos-duration='50'] [aos] { -webkit-transition-duration: 50ms; transition-duration: 50ms; } [aos][aos][aos-duration='100'], body[aos-duration='100'] [aos] { -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } [aos][aos][aos-duration='150'], body[aos-duration='150'] [aos] { -webkit-transition-duration: 150ms; transition-duration: 150ms; } [aos][aos][aos-duration='200'], body[aos-duration='200'] [aos] { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } [aos][aos][aos-duration='250'], body[aos-duration='250'] [aos] { -webkit-transition-duration: 250ms; transition-duration: 250ms; } [aos][aos][aos-duration='300'], body[aos-duration='300'] [aos] { -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } [aos][aos][aos-duration='350'], body[aos-duration='350'] [aos] { -webkit-transition-duration: 350ms; transition-duration: 350ms; } [aos][aos][aos-duration='400'], body[aos-duration='400'] [aos] { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } [aos][aos][aos-duration='450'], body[aos-duration='450'] [aos] { -webkit-transition-duration: 450ms; transition-duration: 450ms; } [aos][aos][aos-duration='500'], body[aos-duration='500'] [aos] { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } [aos][aos][aos-duration='550'], body[aos-duration='550'] [aos] { -webkit-transition-duration: 550ms; transition-duration: 550ms; } [aos][aos][aos-duration='600'], body[aos-duration='600'] [aos] { -webkit-transition-duration: 0.6s; transition-duration: 0.6s; } [aos][aos][aos-duration='650'], body[aos-duration='650'] [aos] { -webkit-transition-duration: 650ms; transition-duration: 650ms; } [aos][aos][aos-duration='700'], body[aos-duration='700'] [aos] { -webkit-transition-duration: 0.7s; transition-duration: 0.7s; } [aos][aos][aos-duration='750'], body[aos-duration='750'] [aos] { -webkit-transition-duration: 750ms; transition-duration: 750ms; } [aos][aos][aos-duration='800'], body[aos-duration='800'] [aos] { -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } [aos][aos][aos-duration='850'], body[aos-duration='850'] [aos] { -webkit-transition-duration: 850ms; transition-duration: 850ms; } [aos][aos][aos-duration='900'], body[aos-duration='900'] [aos] { -webkit-transition-duration: 0.9s; transition-duration: 0.9s; } [aos][aos][aos-duration='950'], body[aos-duration='950'] [aos] { -webkit-transition-duration: 950ms; transition-duration: 950ms; } [aos][aos][aos-duration='1000'], body[aos-duration='1000'] [aos] { -webkit-transition-duration: 1s; transition-duration: 1s; } [aos][aos][aos-duration='1050'], body[aos-duration='1050'] [aos] { -webkit-transition-duration: 1.05s; transition-duration: 1.05s; } [aos][aos][aos-duration='1100'], body[aos-duration='1100'] [aos] { -webkit-transition-duration: 1.1s; transition-duration: 1.1s; } [aos][aos][aos-duration='1150'], body[aos-duration='1150'] [aos] { -webkit-transition-duration: 1.15s; transition-duration: 1.15s; } [aos][aos][aos-duration='1200'], body[aos-duration='1200'] [aos] { -webkit-transition-duration: 1.2s; transition-duration: 1.2s; } [aos][aos][aos-duration='1250'], body[aos-duration='1250'] [aos] { -webkit-transition-duration: 1.25s; transition-duration: 1.25s; } [aos][aos][aos-duration='1300'], body[aos-duration='1300'] [aos] { -webkit-transition-duration: 1.3s; transition-duration: 1.3s; } [aos][aos][aos-duration='1350'], body[aos-duration='1350'] [aos] { -webkit-transition-duration: 1.35s; transition-duration: 1.35s; } [aos][aos][aos-duration='1400'], body[aos-duration='1400'] [aos] { -webkit-transition-duration: 1.4s; transition-duration: 1.4s; } [aos][aos][aos-duration='1450'], body[aos-duration='1450'] [aos] { -webkit-transition-duration: 1.45s; transition-duration: 1.45s; } [aos][aos][aos-duration='1500'], body[aos-duration='1500'] [aos] { -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } [aos][aos][aos-duration='1550'], body[aos-duration='1550'] [aos] { -webkit-transition-duration: 1.55s; transition-duration: 1.55s; } [aos][aos][aos-duration='1600'], body[aos-duration='1600'] [aos] { -webkit-transition-duration: 1.6s; transition-duration: 1.6s; } [aos][aos][aos-duration='1650'], body[aos-duration='1650'] [aos] { -webkit-transition-duration: 1.65s; transition-duration: 1.65s; } [aos][aos][aos-duration='1700'], body[aos-duration='1700'] [aos] { -webkit-transition-duration: 1.7s; transition-duration: 1.7s; } [aos][aos][aos-duration='1750'], body[aos-duration='1750'] [aos] { -webkit-transition-duration: 1.75s; transition-duration: 1.75s; } [aos][aos][aos-duration='1800'], body[aos-duration='1800'] [aos] { -webkit-transition-duration: 1.8s; transition-duration: 1.8s; } [aos][aos][aos-duration='1850'], body[aos-duration='1850'] [aos] { -webkit-transition-duration: 1.85s; transition-duration: 1.85s; } [aos][aos][aos-duration='1900'], body[aos-duration='1900'] [aos] { -webkit-transition-duration: 1.9s; transition-duration: 1.9s; } [aos][aos][aos-duration='1950'], body[aos-duration='1950'] [aos] { -webkit-transition-duration: 1.95s; transition-duration: 1.95s; } [aos][aos][aos-duration='2000'], body[aos-duration='2000'] [aos] { -webkit-transition-duration: 2s; transition-duration: 2s; } [aos][aos][aos-duration='2050'], body[aos-duration='2050'] [aos] { -webkit-transition-duration: 2.05s; transition-duration: 2.05s; } [aos][aos][aos-duration='2100'], body[aos-duration='2100'] [aos] { -webkit-transition-duration: 2.1s; transition-duration: 2.1s; } [aos][aos][aos-duration='2150'], body[aos-duration='2150'] [aos] { -webkit-transition-duration: 2.15s; transition-duration: 2.15s; } [aos][aos][aos-duration='2200'], body[aos-duration='2200'] [aos] { -webkit-transition-duration: 2.2s; transition-duration: 2.2s; } [aos][aos][aos-duration='2250'], body[aos-duration='2250'] [aos] { -webkit-transition-duration: 2.25s; transition-duration: 2.25s; } [aos][aos][aos-duration='2300'], body[aos-duration='2300'] [aos] { -webkit-transition-duration: 2.3s; transition-duration: 2.3s; } [aos][aos][aos-duration='2350'], body[aos-duration='2350'] [aos] { -webkit-transition-duration: 2.35s; transition-duration: 2.35s; } [aos][aos][aos-duration='2400'], body[aos-duration='2400'] [aos] { -webkit-transition-duration: 2.4s; transition-duration: 2.4s; } [aos][aos][aos-duration='2450'], body[aos-duration='2450'] [aos] { -webkit-transition-duration: 2.45s; transition-duration: 2.45s; } [aos][aos][aos-duration='2500'], body[aos-duration='2500'] [aos] { -webkit-transition-duration: 2.5s; transition-duration: 2.5s; } [aos][aos][aos-duration='2550'], body[aos-duration='2550'] [aos] { -webkit-transition-duration: 2.55s; transition-duration: 2.55s; } [aos][aos][aos-duration='2600'], body[aos-duration='2600'] [aos] { -webkit-transition-duration: 2.6s; transition-duration: 2.6s; } [aos][aos][aos-duration='2650'], body[aos-duration='2650'] [aos] { -webkit-transition-duration: 2.65s; transition-duration: 2.65s; } [aos][aos][aos-duration='2700'], body[aos-duration='2700'] [aos] { -webkit-transition-duration: 2.7s; transition-duration: 2.7s; } [aos][aos][aos-duration='2750'], body[aos-duration='2750'] [aos] { -webkit-transition-duration: 2.75s; transition-duration: 2.75s; } [aos][aos][aos-duration='2800'], body[aos-duration='2800'] [aos] { -webkit-transition-duration: 2.8s; transition-duration: 2.8s; } [aos][aos][aos-duration='2850'], body[aos-duration='2850'] [aos] { -webkit-transition-duration: 2.85s; transition-duration: 2.85s; } [aos][aos][aos-duration='2900'], body[aos-duration='2900'] [aos] { -webkit-transition-duration: 2.9s; transition-duration: 2.9s; } [aos][aos][aos-duration='2950'], body[aos-duration='2950'] [aos] { -webkit-transition-duration: 2.95s; transition-duration: 2.95s; } [aos][aos][aos-duration='3000'], body[aos-duration='3000'] [aos] { -webkit-transition-duration: 3s; transition-duration: 3s; } [aos][aos][aos-delay='50'], body[aos-delay='50'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='50'].aos-animate, body[aos-delay='50'] [aos].aos-animate { -webkit-transition-delay: 50ms; transition-delay: 50ms; } [aos][aos][aos-delay='100'], body[aos-delay='100'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='100'].aos-animate, body[aos-delay='100'] [aos].aos-animate { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } [aos][aos][aos-delay='150'], body[aos-delay='150'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='150'].aos-animate, body[aos-delay='150'] [aos].aos-animate { -webkit-transition-delay: 150ms; transition-delay: 150ms; } [aos][aos][aos-delay='200'], body[aos-delay='200'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='200'].aos-animate, body[aos-delay='200'] [aos].aos-animate { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } [aos][aos][aos-delay='250'], body[aos-delay='250'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='250'].aos-animate, body[aos-delay='250'] [aos].aos-animate { -webkit-transition-delay: 250ms; transition-delay: 250ms; } [aos][aos][aos-delay='300'], body[aos-delay='300'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='300'].aos-animate, body[aos-delay='300'] [aos].aos-animate { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } [aos][aos][aos-delay='350'], body[aos-delay='350'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='350'].aos-animate, body[aos-delay='350'] [aos].aos-animate { -webkit-transition-delay: 350ms; transition-delay: 350ms; } [aos][aos][aos-delay='400'], body[aos-delay='400'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='400'].aos-animate, body[aos-delay='400'] [aos].aos-animate { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } [aos][aos][aos-delay='450'], body[aos-delay='450'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='450'].aos-animate, body[aos-delay='450'] [aos].aos-animate { -webkit-transition-delay: 450ms; transition-delay: 450ms; } [aos][aos][aos-delay='500'], body[aos-delay='500'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='500'].aos-animate, body[aos-delay='500'] [aos].aos-animate { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } [aos][aos][aos-delay='550'], body[aos-delay='550'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='550'].aos-animate, body[aos-delay='550'] [aos].aos-animate { -webkit-transition-delay: 550ms; transition-delay: 550ms; } [aos][aos][aos-delay='600'], body[aos-delay='600'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='600'].aos-animate, body[aos-delay='600'] [aos].aos-animate { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } [aos][aos][aos-delay='650'], body[aos-delay='650'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='650'].aos-animate, body[aos-delay='650'] [aos].aos-animate { -webkit-transition-delay: 650ms; transition-delay: 650ms; } [aos][aos][aos-delay='700'], body[aos-delay='700'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='700'].aos-animate, body[aos-delay='700'] [aos].aos-animate { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } [aos][aos][aos-delay='750'], body[aos-delay='750'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='750'].aos-animate, body[aos-delay='750'] [aos].aos-animate { -webkit-transition-delay: 750ms; transition-delay: 750ms; } [aos][aos][aos-delay='800'], body[aos-delay='800'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='800'].aos-animate, body[aos-delay='800'] [aos].aos-animate { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } [aos][aos][aos-delay='850'], body[aos-delay='850'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='850'].aos-animate, body[aos-delay='850'] [aos].aos-animate { -webkit-transition-delay: 850ms; transition-delay: 850ms; } [aos][aos][aos-delay='900'], body[aos-delay='900'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='900'].aos-animate, body[aos-delay='900'] [aos].aos-animate { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } [aos][aos][aos-delay='950'], body[aos-delay='950'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='950'].aos-animate, body[aos-delay='950'] [aos].aos-animate { -webkit-transition-delay: 950ms; transition-delay: 950ms; } [aos][aos][aos-delay='1000'], body[aos-delay='1000'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1000'].aos-animate, body[aos-delay='1000'] [aos].aos-animate { -webkit-transition-delay: 1s; transition-delay: 1s; } [aos][aos][aos-delay='1050'], body[aos-delay='1050'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1050'].aos-animate, body[aos-delay='1050'] [aos].aos-animate { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; } [aos][aos][aos-delay='1100'], body[aos-delay='1100'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1100'].aos-animate, body[aos-delay='1100'] [aos].aos-animate { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } [aos][aos][aos-delay='1150'], body[aos-delay='1150'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1150'].aos-animate, body[aos-delay='1150'] [aos].aos-animate { -webkit-transition-delay: 1.15s; transition-delay: 1.15s; } [aos][aos][aos-delay='1200'], body[aos-delay='1200'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1200'].aos-animate, body[aos-delay='1200'] [aos].aos-animate { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } [aos][aos][aos-delay='1250'], body[aos-delay='1250'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1250'].aos-animate, body[aos-delay='1250'] [aos].aos-animate { -webkit-transition-delay: 1.25s; transition-delay: 1.25s; } [aos][aos][aos-delay='1300'], body[aos-delay='1300'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1300'].aos-animate, body[aos-delay='1300'] [aos].aos-animate { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } [aos][aos][aos-delay='1350'], body[aos-delay='1350'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1350'].aos-animate, body[aos-delay='1350'] [aos].aos-animate { -webkit-transition-delay: 1.35s; transition-delay: 1.35s; } [aos][aos][aos-delay='1400'], body[aos-delay='1400'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1400'].aos-animate, body[aos-delay='1400'] [aos].aos-animate { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } [aos][aos][aos-delay='1450'], body[aos-delay='1450'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1450'].aos-animate, body[aos-delay='1450'] [aos].aos-animate { -webkit-transition-delay: 1.45s; transition-delay: 1.45s; } [aos][aos][aos-delay='1500'], body[aos-delay='1500'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1500'].aos-animate, body[aos-delay='1500'] [aos].aos-animate { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } [aos][aos][aos-delay='1550'], body[aos-delay='1550'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1550'].aos-animate, body[aos-delay='1550'] [aos].aos-animate { -webkit-transition-delay: 1.55s; transition-delay: 1.55s; } [aos][aos][aos-delay='1600'], body[aos-delay='1600'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1600'].aos-animate, body[aos-delay='1600'] [aos].aos-animate { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; } [aos][aos][aos-delay='1650'], body[aos-delay='1650'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1650'].aos-animate, body[aos-delay='1650'] [aos].aos-animate { -webkit-transition-delay: 1.65s; transition-delay: 1.65s; } [aos][aos][aos-delay='1700'], body[aos-delay='1700'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1700'].aos-animate, body[aos-delay='1700'] [aos].aos-animate { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; } [aos][aos][aos-delay='1750'], body[aos-delay='1750'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1750'].aos-animate, body[aos-delay='1750'] [aos].aos-animate { -webkit-transition-delay: 1.75s; transition-delay: 1.75s; } [aos][aos][aos-delay='1800'], body[aos-delay='1800'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1800'].aos-animate, body[aos-delay='1800'] [aos].aos-animate { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; } [aos][aos][aos-delay='1850'], body[aos-delay='1850'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1850'].aos-animate, body[aos-delay='1850'] [aos].aos-animate { -webkit-transition-delay: 1.85s; transition-delay: 1.85s; } [aos][aos][aos-delay='1900'], body[aos-delay='1900'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1900'].aos-animate, body[aos-delay='1900'] [aos].aos-animate { -webkit-transition-delay: 1.9s; transition-delay: 1.9s; } [aos][aos][aos-delay='1950'], body[aos-delay='1950'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='1950'].aos-animate, body[aos-delay='1950'] [aos].aos-animate { -webkit-transition-delay: 1.95s; transition-delay: 1.95s; } [aos][aos][aos-delay='2000'], body[aos-delay='2000'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2000'].aos-animate, body[aos-delay='2000'] [aos].aos-animate { -webkit-transition-delay: 2s; transition-delay: 2s; } [aos][aos][aos-delay='2050'], body[aos-delay='2050'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2050'].aos-animate, body[aos-delay='2050'] [aos].aos-animate { -webkit-transition-delay: 2.05s; transition-delay: 2.05s; } [aos][aos][aos-delay='2100'], body[aos-delay='2100'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2100'].aos-animate, body[aos-delay='2100'] [aos].aos-animate { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; } [aos][aos][aos-delay='2150'], body[aos-delay='2150'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2150'].aos-animate, body[aos-delay='2150'] [aos].aos-animate { -webkit-transition-delay: 2.15s; transition-delay: 2.15s; } [aos][aos][aos-delay='2200'], body[aos-delay='2200'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2200'].aos-animate, body[aos-delay='2200'] [aos].aos-animate { -webkit-transition-delay: 2.2s; transition-delay: 2.2s; } [aos][aos][aos-delay='2250'], body[aos-delay='2250'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2250'].aos-animate, body[aos-delay='2250'] [aos].aos-animate { -webkit-transition-delay: 2.25s; transition-delay: 2.25s; } [aos][aos][aos-delay='2300'], body[aos-delay='2300'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2300'].aos-animate, body[aos-delay='2300'] [aos].aos-animate { -webkit-transition-delay: 2.3s; transition-delay: 2.3s; } [aos][aos][aos-delay='2350'], body[aos-delay='2350'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2350'].aos-animate, body[aos-delay='2350'] [aos].aos-animate { -webkit-transition-delay: 2.35s; transition-delay: 2.35s; } [aos][aos][aos-delay='2400'], body[aos-delay='2400'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2400'].aos-animate, body[aos-delay='2400'] [aos].aos-animate { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; } [aos][aos][aos-delay='2450'], body[aos-delay='2450'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2450'].aos-animate, body[aos-delay='2450'] [aos].aos-animate { -webkit-transition-delay: 2.45s; transition-delay: 2.45s; } [aos][aos][aos-delay='2500'], body[aos-delay='2500'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2500'].aos-animate, body[aos-delay='2500'] [aos].aos-animate { -webkit-transition-delay: 2.5s; transition-delay: 2.5s; } [aos][aos][aos-delay='2550'], body[aos-delay='2550'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2550'].aos-animate, body[aos-delay='2550'] [aos].aos-animate { -webkit-transition-delay: 2.55s; transition-delay: 2.55s; } [aos][aos][aos-delay='2600'], body[aos-delay='2600'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2600'].aos-animate, body[aos-delay='2600'] [aos].aos-animate { -webkit-transition-delay: 2.6s; transition-delay: 2.6s; } [aos][aos][aos-delay='2650'], body[aos-delay='2650'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2650'].aos-animate, body[aos-delay='2650'] [aos].aos-animate { -webkit-transition-delay: 2.65s; transition-delay: 2.65s; } [aos][aos][aos-delay='2700'], body[aos-delay='2700'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2700'].aos-animate, body[aos-delay='2700'] [aos].aos-animate { -webkit-transition-delay: 2.7s; transition-delay: 2.7s; } [aos][aos][aos-delay='2750'], body[aos-delay='2750'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2750'].aos-animate, body[aos-delay='2750'] [aos].aos-animate { -webkit-transition-delay: 2.75s; transition-delay: 2.75s; } [aos][aos][aos-delay='2800'], body[aos-delay='2800'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2800'].aos-animate, body[aos-delay='2800'] [aos].aos-animate { -webkit-transition-delay: 2.8s; transition-delay: 2.8s; } [aos][aos][aos-delay='2850'], body[aos-delay='2850'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2850'].aos-animate, body[aos-delay='2850'] [aos].aos-animate { -webkit-transition-delay: 2.85s; transition-delay: 2.85s; } [aos][aos][aos-delay='2900'], body[aos-delay='2900'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2900'].aos-animate, body[aos-delay='2900'] [aos].aos-animate { -webkit-transition-delay: 2.9s; transition-delay: 2.9s; } [aos][aos][aos-delay='2950'], body[aos-delay='2950'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='2950'].aos-animate, body[aos-delay='2950'] [aos].aos-animate { -webkit-transition-delay: 2.95s; transition-delay: 2.95s; } [aos][aos][aos-delay='3000'], body[aos-delay='3000'] [aos] { -webkit-transition-delay: 0; transition-delay: 0; } [aos][aos][aos-delay='3000'].aos-animate, body[aos-delay='3000'] [aos].aos-animate { -webkit-transition-delay: 3s; transition-delay: 3s; } [aos^=fade][aos^=fade] { opacity: 0; -webkit-transition-property: all; transition-property: all; } [aos^=fade][aos^=fade].aos-animate { opacity: 1; } [aos=fade-up] { -webkit-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); } [aos=fade-up].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-down] { -webkit-transform: translate(0, -100px); -ms-transform: translate(0, -100px); transform: translate(0, -100px); } [aos=fade-down].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-right] { -webkit-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate(-100px, 0); } [aos=fade-right].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-left] { -webkit-transform: translate(100px, 0); -ms-transform: translate(100px, 0); transform: translate(100px, 0); } [aos=fade-left].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-up-right] { -webkit-transform: translate(-100px, 100px); -ms-transform: translate(-100px, 100px); transform: translate(-100px, 100px); } [aos=fade-up-right].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-up-left] { -webkit-transform: translate(100px, 100px); -ms-transform: translate(100px, 100px); transform: translate(100px, 100px); } [aos=fade-up-left].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-down-right] { -webkit-transform: translate(-100px, -100px); -ms-transform: translate(-100px, -100px); transform: translate(-100px, -100px); } [aos=fade-down-right].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=fade-down-left] { -webkit-transform: translate(100px, -100px); -ms-transform: translate(100px, -100px); transform: translate(100px, -100px); } [aos=fade-down-left].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos^=zoom][aos^=zoom] { opacity: 0; -webkit-transition-property: all; transition-property: all; } [aos^=zoom][aos^=zoom].aos-animate { opacity: 1; } [aos=zoom-in] { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } [aos=zoom-in].aos-animate { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } [aos=zoom-in-up] { -webkit-transform: translate(0, 100px) scale(0.6); -ms-transform: translate(0, 100px) scale(0.6); transform: translate(0, 100px) scale(0.6); } [aos=zoom-in-up].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-in-down] { -webkit-transform: translate(0, -100px) scale(0.6); -ms-transform: translate(0, -100px) scale(0.6); transform: translate(0, -100px) scale(0.6); } [aos=zoom-in-down].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-in-right] { -webkit-transform: translate(-100px, 0) scale(0.6); -ms-transform: translate(-100px, 0) scale(0.6); transform: translate(-100px, 0) scale(0.6); } [aos=zoom-in-right].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-in-left] { -webkit-transform: translate(100px, 0) scale(0.6); -ms-transform: translate(100px, 0) scale(0.6); transform: translate(100px, 0) scale(0.6); } [aos=zoom-in-left].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-out] { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } [aos=zoom-out].aos-animate { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } [aos=zoom-out-up] { -webkit-transform: translate(0, 100px) scale(1.2); -ms-transform: translate(0, 100px) scale(1.2); transform: translate(0, 100px) scale(1.2); } [aos=zoom-out-up].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-out-down] { -webkit-transform: translate(0, -100px) scale(1.2); -ms-transform: translate(0, -100px) scale(1.2); transform: translate(0, -100px) scale(1.2); } [aos=zoom-out-down].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-out-right] { -webkit-transform: translate(-100px, 0) scale(1.2); -ms-transform: translate(-100px, 0) scale(1.2); transform: translate(-100px, 0) scale(1.2); } [aos=zoom-out-right].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=zoom-out-left] { -webkit-transform: translate(100px, 0) scale(1.2); -ms-transform: translate(100px, 0) scale(1.2); transform: translate(100px, 0) scale(1.2); } [aos=zoom-out-left].aos-animate { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } [aos=slide-up] { -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } [aos=slide-up].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=slide-down] { -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); } [aos=slide-down].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=slide-right] { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } [aos=slide-right].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos=slide-left] { -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } [aos=slide-left].aos-animate { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } [aos^=flip] { -webkit-backface-visibility: hidden; backface-visibility: hidden; } [aos=flip-left] { -webkit-transform: perspective(2500px) rotateY(-100deg); transform: perspective(2500px) rotateY(-100deg); } [aos=flip-left].aos-animate { -webkit-transform: perspective(2500px) rotateY(0); transform: perspective(2500px) rotateY(0); } [aos=flip-right] { -webkit-transform: perspective(2500px) rotateY(100deg); transform: perspective(2500px) rotateY(100deg); } [aos=flip-right].aos-animate { -webkit-transform: perspective(2500px) rotateY(0); transform: perspective(2500px) rotateY(0); } [aos=flip-up] { -webkit-transform: perspective(2500px) rotateX(-100deg); transform: perspective(2500px) rotateX(-100deg); } [aos=flip-up].aos-animate { -webkit-transform: perspective(2500px) rotateX(0); transform: perspective(2500px) rotateX(0); } [aos=flip-down] { -webkit-transform: perspective(2500px) rotateX(100deg); transform: perspective(2500px) rotateX(100deg); } [aos=flip-down].aos-animate { -webkit-transform: perspective(2500px) rotateX(0); transform: perspective(2500px) rotateX(0); } /* ------------------------------------------------ 第三部分：基本元素设置-统一布局-必须 --------------------------------------------------*/ /* ------------------------------------------------ 第四部分：图标样式 * 定义各组件样式 --------------------------------------------------*/ .ricon { display: inline-block; line-height: 1; width: 0.1rem; height: 0.08rem; background-position: center; background-repeat: no-repeat; background-size: contain; } .ricon.icon-lang-down { width: 0.13rem; height: 0.11rem; background-image: url(../images/icon-lang-down.svg); background-size: contain; } .ricon.icon-search { width: 0.15rem; height: 0.15rem; background-image: url(../images/icon-search.svg); } .ricon.icon-page-prev { width: 0.14rem; height: 0.23rem; background-image: url(../images/ricon-pages-left.svg); } .ricon.icon-page-next { width: 0.14rem; height: 0.22rem; background-image: url(../images/ricon-pages-right.svg); } /* ------------------------------------------------ * font基础字体设置 * 基础字体元素、大小及行高等设置 --------------------------------------------------*/ /* -----默认部分样式重置----*/ html { font-size: 625%; } body { position: relative; font-size: 0.14rem; font-family: "PingFang SC", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: #222; line-height: 1.67; } @media screen and (max-width: 992px) { body { padding-top: 0.7rem; } } h1, h2, h3, h4, h5, h6 { color: #222; } h1 { font-size: 0.36rem; } h2 { font-size: 0.3rem; } h3 { font-size: 0.24rem; } h4 { font-size: 0.16rem; } h5 { font-size: 0.14rem; } h6 { font-size: 0.12rem; } .h1 { font-size: 0.36rem; } .h2 { font-size: 0.3rem; } .h3 { font-size: 0.24rem; } .h4 { font-size: 0.16rem; } .h5 { font-size: 0.14rem; } .h6 { font-size: 0.12rem; } small, .small { font-size: 0.8em; } a { color: #222; cursor: pointer; } a:hover { color: #f34f39; } /* ------------------------------------------------ * 元素样式elements * 定义各元素样式 --------------------------------------------------*/ hr { border: none; /* 去掉边框 */ height: 0; /* 清除默认高度 */ margin: 0; /* 清除默认外边距 */ padding: 0; /* 清除默认内边距 */ border-bottom: solid 1px #e5e8ee; } .hr { border-bottom: solid 1px #e5e8ee; } /* -----自定义部分样式重置----*/ .radius { border-radius: 0.05rem; } .box-shadow { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* ------------------------------------------------ * 图片设置 --------------------------------------------------*/ img { max-width: 100%; } .image { position: relative; } .image img { display: block; } .zoompic { display: block; overflow: hidden; cursor: pointer; } .zoompic > img { display: block; max-width: 100%; max-height: 100%; object-fit: cover; transition: transform 0.5s ease-in-out; } .zoompic:hover > img { transform: scale(1.15); } .item:hover .zoompic > img { transform: scale(1.15); } .image-shadow { filter: drop-shadow(0 5rem #f34f39); transform: translateY(-5rem); } /* ------------------------------------------------ * 按钮样式button --------------------------------------------------*/ .btn { background-color: #f34f39; color: #fff; border: solid 1px #f34f39; padding: 0.05rem 0.18rem; border-radius: 0.05rem; text-align: center; cursor: pointer; transition: all 0.5s ease-in-out; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .btn > .ricon { margin-left: 0.04rem; } .btn:hover { color: #fff; background-color: #a31c0a; border-color: #a31c0a; } .btn-pri { background-color: #f34f39; border-color: #f34f39; color: #fff; } .btn-pri:hover { background-color: #d3240d; border-color: #d3240d; } .btn-sub { background-color: #e64e0c; border-color: #e64e0c; color: #fff; } .btn-sub:hover { background-color: #9d3508; border-color: #9d3508; } .btn-black { background-color: #000; border-color: #000; color: #fff; } .btn-black:hover { background-color: #000000; border-color: #000000; } .btn-dark { background-color: #222; border-color: #222; color: #fff; } .btn-dark:hover { background-color: #000000; border-color: #000000; } .btn-success { background-color: #28a745; border-color: #28a745; color: #fff; } .btn-success:hover { background-color: #19692b; border-color: #19692b; } .btn-danger { background-color: #ff3535; border-color: #ff3535; color: #fff; } .btn-danger:hover { background-color: #e70000; border-color: #e70000; } .btn-warning { background-color: #f9c851; border-color: #f9c851; color: #fff; } .btn-warning:hover { background-color: #f5b008; border-color: #f5b008; } .btn-info { background-color: #17a2b8; border-color: #17a2b8; color: #fff; } .btn-info:hover { background-color: #0f6674; border-color: #0f6674; } .btn-grey { background-color: #666; border-color: #666; color: #fff; } .btn-grey:hover { background-color: #404040; border-color: #404040; } .btn-light { background-color: #e5e8ee; border-color: #e5e8ee; color: #fff; } .btn-light:hover { background-color: #b7bfd0; border-color: #b7bfd0; } .btn-black:hover { background-color: #f34f39; border-color: #f34f39; } /* ------------------------------------------------ * 镂空样式outline --------------------------------------------------*/ .btn-outline { display: inline-block; background-color: transparent; color: #f34f39; border: solid 1px #f34f39; padding: 0.05rem 0.18rem; border-radius: 0.05rem; text-align: center; cursor: pointer; } .btn-outline:hover { color: #fff; background-color: #eb280e; border-color: #eb280e; } .btn-pri-outline { background-color: transparent; border-color: #f34f39; color: #f34f39; } .btn-pri-outline:hover { color: #fff; background-color: #f34f39; border-color: #f34f39; } .btn-sub-outline { background-color: transparent; border-color: #e64e0c; color: #e64e0c; } .btn-sub-outline:hover { color: #fff; background-color: #e64e0c; border-color: #e64e0c; } .btn-black-outline { background-color: transparent; border-color: #000; color: #000; } .btn-black-outline:hover { color: #fff; background-color: #000; border-color: #000; } .btn-dark-outline { background-color: transparent; border-color: #222; color: #222; } .btn-dark-outline:hover { color: #fff; background-color: #222; border-color: #222; } .btn-success-outline { background-color: transparent; border-color: #28a745; color: #28a745; } .btn-success-outline:hover { color: #fff; background-color: #28a745; border-color: #28a745; } .btn-danger-outline { background-color: transparent; border-color: #ff3535; color: #ff3535; } .btn-danger-outline:hover { color: #fff; background-color: #ff3535; border-color: #ff3535; } .btn-warning-outline { background-color: transparent; border-color: #f9c851; color: #f9c851; } .btn-warning-outline:hover { color: #fff; background-color: #f9c851; border-color: #f9c851; } .btn-info-outline { background-color: transparent; border-color: #17a2b8; color: #17a2b8; } .btn-info-outline:hover { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } .btn-grey-outline { background-color: transparent; border-color: #666; color: #666; } .btn-grey-outline:hover { color: #fff; background-color: #666; border-color: #666; } .btn-light-outline { background-color: transparent; border-color: #e5e8ee; color: #e5e8ee; } .btn-light-outline:hover { color: #fff; background-color: #e5e8ee; border-color: #e5e8ee; } .btn-light-outline { border: solid 1px #222; background-color: extract(light, 2); color: #222; } .btn-light-outline:hover { color: #fff; background-color: #222; border-color: #222; } .btn-#e5e8ee-outline { border: solid 1px #222; background-color: extract(#e5e8ee, 2); color: #222; } .btn-#e5e8ee-outline:hover { color: #fff; background-color: #222; border-color: #222; } /* ------------------------------------------------ * 动画特效 --------------------------------------------------*/ /* 图标旋转动画 */ .rotate { animation: spin 4s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .breathe { animation: breathe 4s infinite; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 0 0.05rem rgba(255, 53, 53, 0.5); } } .text-line-5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; } .text-line-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } .text-line-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } .text-line-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .text-line-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 文字行数限制 */ /* ------------------------------------------------ 第四部分：定义的布局样式-统一布局-必须 --------------------------------------------------*/ /*---------------------------------------------
---------------------------------------------*/ .main-menu { height: 100%; flex: 1; display: -webkit-flex; display: flex; justify-content: flex-end; margin-right: 10%; } .main-menu > ul { height: 100%; } .main-menu > ul > li { height: 100%; display: inline-block; margin: 0 0.25rem; position: relative; } .main-menu > ul > li:last-child { margin-right: 0; } .main-menu > ul > li > a { display: block; height: 100%; color: #666; font-size: 0.16rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-top: solid 2px transparent; } .main-menu > ul > li > .down { display: none; } .main-menu > ul > li .sub { display: none; position: absolute; left: 50%; min-width: 100%; top: 0.8rem; background-color: #fff; transform: translateX(-50%); padding: 0.05rem 0; } .main-menu > ul > li .sub ul { width: auto; } .main-menu > ul > li .sub ul li { width: auto; } .main-menu > ul > li .sub ul li a { text-align: center; display: block; width: 100%; white-space: nowrap; font-size: 0.14rem; padding: 0.1rem 0.3rem; } .main-menu > ul > li.active > a { border-color: #f34f39; color: #f34f39; } .main-menu > ul > li:hover > a { border-color: #f34f39; color: #f34f39; } .toggle-menu { display: none; position: relative; overflow: hidden; width: 0.42rem; height: 0.33rem; cursor: pointer; } .toggle-menu .line { display: block; width: 60%; height: 0.02rem; background: #fff; position: absolute; left: 50%; top: 50%; background-color: #222; transform: translate(-50%, -50%); transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; } .toggle-menu .line:nth-child(1) { margin-top: -0.07rem; } .toggle-menu .line:nth-child(3) { margin-top: 0.07rem; } .toggle-menu.active .line:nth-child(1) { margin-top: 0; transform: translate(-50%, -50%) rotate(45deg); } .toggle-menu.active .line:nth-child(2) { transform: translate(100%, -50%); opacity: 0; } .toggle-menu.active .line:nth-child(3) { margin-top: 0; transform: translate(-50%, -50%) rotate(-45deg); } @media screen and (max-width: 992px) { .main-menu { display: none; position: absolute; top: 0.69rem; left: 0; width: 100%; height: calc(100vh - 0.69rem); background-color: #fff; border-top: solid 1px #dbdbdb; padding-right: 0; } .main-menu > ul { height: auto; display: block; margin: 0 auto; max-width: 7.2rem; padding-left: 0.075rem; padding-right: 0.075rem; padding-bottom: 0.4rem; } .main-menu > ul > li { display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; height: auto; border-bottom: solid 1px #efefef; margin: 0 0.05rem; } .main-menu > ul > li:last-child { margin-right: 0.05rem; } .main-menu > ul > li > a { position: relative; height: 0.45rem; flex: 1; justify-content: flex-start; color: #222; border-bottom: solid 1px transparent; } .main-menu > ul > li > .down { cursor: pointer; width: 0.4rem; height: 0.45rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .main-menu > ul > li > .down .ricon { width: 0.22rem; height: 0.22rem; background: url(../images/icon-menu-plus.svg) no-repeat center; transform: rotate(180deg) scale(0.5); transition: all 0.5s linear; } .main-menu > ul > li .sub { position: relative; top: 0; box-shadow: none; padding: 0; } .main-menu > ul > li .sub ul li a { padding: 0.1rem 0.2rem; border-bottom: solid 1px #dbdbdb; text-align: left; } .main-menu > ul > li .sub ul li:last-child { border-bottom: 0; } .main-menu > ul > li:hover > a { border-top: none; border-color: transparent; color: #222; } .main-menu > ul > li:hover .sub { display: none; } .main-menu > ul > li.active > a { color: #f34f39; border-color: transparent; } .main-menu > ul > li.open > a { border-top: none; border-color: #dbdbdb; } .main-menu > ul > li.open > .down { border-bottom: solid 1px #dbdbdb; } .main-menu > ul > li.open > .down .ricon { background-image: url(../images/icon-menu-reduce-dark.svg); transform: rotate(360deg) scale(0.5); } .toggle-menu { display: inline-block; } } /* ------------------------------------------------ 基础样式:块基础样式 --------------------------------------------------*/ section, .section { padding: 0.6rem 0; } .section-hd { padding-bottom: 0.3rem; } .lead { font-size: 0.16rem; color: #999; } .tips { display: inline-block; background-color: #222; color: #fff; font-size: 0.12rem; padding: 0.02rem 0.08rem; padding-left: 0.12rem; border-radius: 0.03rem; position: relative; font-weight: normal; } .tips::before { content: ''; display: block; position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: #fff; left: 0.04rem; top: 0.04rem; } /* ------------------------------------------------ ** 可横向滚动栏目--需要与JS配合 ** 支持添加左右滑动按钮 ** item不能添加margin属性 格式如下：
xxx
xxx
xxx
xxx
--------------------------------------------------*/ .scroll-menu { display: flex; overflow-x: auto; white-space: nowrap; cursor: grab; scrollbar-width: none; } .scroll-menu::-webkit-scrollbar { display: none; } .scroll-menu * { user-select: none; /* 禁用文本选择 */ -webkit-user-select: none; /* 对于 Safari */ -moz-user-select: none; /* 对于 Firefox */ -webkit-user-drag: none; /* 禁用选择拖放效果 */ } .scroll-menu > .item { flex: 0 0 auto; } /*********************************** ** 表格样式 ** 格式如下：
提交
************************************/ .form-group { display: -webkit-flex; display: flex; flex-wrap: wrap; margin-left: -0.075rem; margin-right: -0.075rem; margin-bottom: -0.15rem; } .form-group > .item { width: 50%; padding-left: 0.075rem; padding-right: 0.075rem; margin-bottom: 0.15rem; flex-grow: 0; flex-shrink: 0; } .form-group > .item input, .form-group > .item textarea { display: block; width: 100%; height: 0.62rem; padding: 0 0.27rem; background-color: #f7f8fa; font-size: 0.16rem; border: none; outline: none; } .form-group > .item input::placeholder, .form-group > .item textarea::placeholder { font-size: 0.16rem; color: #999; } .form-group > .item .el-cascader { width: 100%; } .form-group > .item .el-cascader .el-input { padding-right: 0.2rem; background-color: #f7f8fa; } .form-group > .item .el-cascader .el-input .el-input__suffix { right: 0.2rem; } .form-group > .item textarea { padding: 0.12rem 0.27rem; line-height: 0.4rem; min-height: 1.9rem; } .form-group > .item .row { margin: 0 !important; padding: 0 !important; } .form-group > .item .row .col-lg-12 { margin: 0 !important; padding: 0 !important; display: -webkit-flex; display: flex; background-color: #f7f8fa; } .form-group > .item .row .col-lg-12 .btn { margin: 0 !important; padding: 0 !important; width: 50%; border: none; } .form-group > .item .row .col-lg-12 .btn.fileinput-button { background-color: #f7f8fa; color: #999; flex: 1; text-align: left; padding: 0 0.2rem !important; font-size: 0.16rem; } .form-group > .item .row .col-lg-12 .btn.fileinput-delete { width: 10%; } .form-group > .item .finecms-file-ts { display: none!important; } .form-group > .item #fileupload_ufile_files { display: none; } .form-group > .item .btn { border-radius: 0; width: 100%; height: 0.72rem; line-height: 0.72rem; font-size: 0.18rem; font-weight: 500; } /*********************************** ** 对话框 // dialog格式
// 按钮格式 ** 触发按钮和dialog中的dialog-name需保持一致 ************************************/ .dialog { display: none; z-index: 900; position: fixed; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; width: 100%; height: 100%; } .dialog > div { width: 100%; height: 100%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; flex-direction: column; } .dialog > div > div { position: relative; } .dialog > div > div .close { position: absolute; right: calc(-0.3rem - 0.1rem); top: calc(-0.3rem + 0.1rem); display: block; width: 0.3rem; height: 0.3rem; line-height: 1; border-radius: 0.3rem; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background-color: #fff; cursor: pointer; } /*********************************** ** 折叠面板 ** 格式
折叠面板标题
折叠面板内容
折叠面板标题
折叠面板内容
折叠面板标题
折叠面板内容
************************************/ .collapse-loop .item { overflow: hidden; } .collapse-loop .item .item-hd { cursor: pointer; } .collapse-loop .item .item-md { display: none; } /* ------------------------------------------------ 侧边悬浮样式-固定格式如下：
020-125480042
--------------------------------------------------*/ .scroll-bar { z-index: 900; position: fixed; width: 0.8rem; top: 40%; right: 0.2rem; } /* ------------------------------------------------ ** fixed-screen:屏幕滚动时悬停在原位置 ** 父元素需设置position; ** fixed-screen需设置left:0;width:100%; ** 第一屏时需可见 --------------------------------------------------*/ .fixed-screen { left: 0; width: 100%; } /* ------------------------------------------------ ** 语言切换下拉菜单-固定格式如下：
中文
中文 英文
--------------------------------------------------*/ .lang { position: relative; width: fit-content; } .lang .lang-now { cursor: pointer; white-space: nowrap; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .lang .lang-now .ricon { margin-left: 0.05rem; } .lang .lang-menu { display: none; position: absolute; z-index: 900; left: 50%; transform: translateX(-50%); top: calc(100% + 0.05rem); width: fit-content; padding: 0.06rem 0.2rem; background-color: #fff; } .lang .lang-menu a { white-space: nowrap; width: fit-content; color: #666; } /* ------------------------------------------------ ** 顶部搜索框样式，格式如下：
--------------------------------------------------*/ .search { width: fit-content; border: solid 1px #e5e8ee; border-radius: 0.2rem; overflow: hidden; height: 0.3rem; } .search form { display: -webkit-flex; display: flex; align-items: center; height: 100%; } .search form input { padding: 0 0.12rem; flex: 1; height: 100%; line-height: 100%; } .search form input::placeholder { color: #e5e8ee; line-height: 100%; } .search form .submit { height: 100%; aspect-ratio: 1.2/1; background-color: #e5e8ee; overflow: hidden; display: -webkit-flex; display: flex; justify-content: center; align-items: center; cursor: pointer; } .search form .submit .ricon { filter: drop-shadow(0 1rem #222); transform: translateY(-1rem); } /*********************************** ** 页面样式-左右结构 ************************************/ .wrapper { padding-top: 0.9rem; padding-bottom: 1rem; } .wrapper > .container { display: -webkit-flex; display: flex; justify-content: space-between; } /* ------------------------------------------------ 基础样式:页面样式-支持在aside中添加no-gutters消除上下间距 固定用法 --------------------------------------------------*/ aside > .sidebar { margin-bottom: 0.15rem; } aside.no-gutters { margin-bottom: 0; } aside.no-gutters > .sidebar { margin-bottom: 0; } /*********************************** ** 面包屑样式
首页{dr_catpos($catid,'')}详情
************************************/ .crumb { line-height: 1; display: -webkit-flex; display: flex; align-items: center; } .crumb a, .crumb span { line-height: 1; position: relative; color: #999; padding-left: 0.3rem; } .crumb a::before, .crumb span::before { content: ">"; font-family: "仿宋"; color: #999; display: block; width: 0.08rem; position: absolute; left: 0.08rem; top: 50%; transform: translateY(-50%); } .crumb a:first-child, .crumb span:first-child { padding-left: 0; } .crumb a:first-child::before, .crumb span:first-child::before { display: none; } .crumb span { color: #222; } /* ------------------------------------------------ 侧边悬浮样式-固定格式如下： 分页样式： @ pagination-width:每个分页的宽度 @ pagination-radius:分页边的弧度 --------------------------------------------------*/ .pagination { display: -webkit-flex; display: flex; padding-top: 0.65rem; } .pagination li { margin-right: 0.05rem; } .pagination li:last-child { margin-right: 0; } .pagination li a { display: block; height: 0.35rem; line-height: 0.35rem; min-width: 0.35rem; padding: 0 0.05rem; background-color: transparent; text-align: center; border-radius: 0; border: solid 1px rgba(0, 0, 0, 0.15); font-size: 0.18rem; color: #999; } .pagination li.pn a { border-color: rgba(0, 0, 0, 0.15); display: -webkit-flex; display: flex; justify-content: center; align-items: center; overflow: hidden; } .pagination li.pn a .ricon { filter: drop-shadow(0 1rem #999); transform: translateY(-1rem); zoom: 0.9; } .pagination li.active a, .pagination li:hover a { border-color: #f34f39; background-color: #f34f39; color: #fff; } .pagination li.active.pn a .ricon, .pagination li:hover.pn a .ricon { filter: drop-shadow(0 1rem #fff); } /* 隐藏样式，在这个尺寸以上隐藏 */ @media screen and (min-width: 1680px) { .hidden-xxl { display: none!important; } } @media screen and (min-width: 1200px) { .hidden-xl { display: none!important; } } @media screen and (min-width: 992px) { .hidden-lg { display: none!important; } } @media screen and (min-width: 768px) { .hidden-md { display: none!important; } } @media screen and (min-width: 576px) { .hidden-sm { display: none!important; } } /* ------------------------------------------------ 第五部分：其它自定义设置-自定义布局-可选 --------------------------------------------------*/ /* ------------------------------------------------ UL样式:带竖线和点的列表样式 固定用法 --------------------------------------------------*/ .ul-line li { position: relative; padding-left: 0.15rem; } .ul-line li::before { background: hsla(0, 100%, 77%, 0.5); content: ""; display: block; height: 100%; left: calc(0.11rem / 2 - 0.01rem / 2); position: absolute; top: calc(50% - 0.11rem / 2); width: 0.01rem; } .ul-line li::after { background-color: #ff8f8f; border: 0.02rem solid #fff; border-image: none; border-image: initial; border-radius: 50%; box-sizing: border-box; content: ""; display: block; flex-shrink: 0; width: 0.11rem; height: 0.11rem; left: 0; top: calc(50% - 0.11rem / 2); position: absolute; } .ul-line li:last-child::before { display: none; } /* ------------------------------------------------ 第二部分：全局样式重置 * 定义本站初始化样式 --------------------------------------------------*/ .logo { display: block; } .logo img { display: block; } section .section-hd .name, .section .section-hd .name { display: block; font-size: 0.24rem; color: #f34f39; line-height: 1; padding-bottom: 0.25rem; } section .section-hd h2, .section .section-hd h2 { line-height: 1.4; } @media screen and (max-width: 768px) { h2 { font-size: 0.28rem; } .lead { font-size: 0.15rem; } } .iconfont { font-size: 0.16rem; } /* ------------------------------------------------ 第三部分：组件样式components * 定义各组件样式 --------------------------------------------------*/ /*********************************** ** 头部组件 ************************************/ .main-header { position: relative; border-bottom: solid 1px #efefef; background-color: #fff; z-index: 999; } .main-header .container .header-md { height: 0.79rem; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; } .main-header .container .header-md .logo { width: 1.3rem; } .main-header .container .header-md .logo img { width: 100%; } .main-header .container .header-md .header-md-block { display: -webkit-flex; display: flex; align-items: center; } .main-header .container .header-md .header-md-block .search { margin-right: 0.2rem; } @media screen and (max-width: 992px) { .main-header { position: fixed; width: 100%; top: 0; left: 0; background-color: #fff; z-index: 999; border-bottom: solid 1px #efefef; } .main-header .container .header-md { height: 0.69rem; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .main-header .container .header-md .logo { overflow: hidden; width: auto; height: 0.5rem; } .main-header .container .header-md .logo img { transform: translateY(-1rem); filter: drop-shadow(0 1rem #f34f39); width: auto; height: 100%; } .main-header .container .header-md .header-md-block { flex: 1; display: -webkit-flex; display: flex; justify-content: flex-end; } .main-header .container .header-md .header-md-block .main-lang { flex: 1; display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; padding-right: 0.25rem; } .main-header .container .header-md .header-md-block .search { display: none; } } /*********************************** ** 底部组件 ************************************/ .main-footer { background-color: #222; color: #fff; padding: 0; } .main-footer a { color: #fff; } .main-footer a:hover { color: #f34f39; } .main-footer .section-md { padding: 0.2rem 0; border-bottom: solid 1px rgba(229, 232, 238, 0.1); } .main-footer .section-md .footer-menu ul { text-align: center; } .main-footer .section-md .footer-menu ul li { display: inline-block; position: relative; padding-right: 0.15rem; } .main-footer .section-md .footer-menu ul li.active a { color: #f34f39; } .main-footer .section-md .footer-menu ul li::after { content: ""; color: #e5e8ee; display: block; width: 1px; height: 0.15rem; background-color: rgba(229, 232, 238, 0.5); position: absolute; right: 0.06rem; top: 50%; transform: translateY(-50%); } .main-footer .section-md .footer-menu ul li:last-child::after { display: none; } .main-footer .section-fd { text-align: center; padding: 0.1rem 0; } /*********************************** ** banner ************************************/ .banner { background: url(../images/banner.jpg) no-repeat center; background-size: cover; } .banner .section-md .md-block { max-width: 6rem; margin: 0.5rem auto; } .banner .section-md .md-block h1 { text-align: center; color: #fff; padding-bottom: 0.2rem; } .banner .section-md .md-block .banner-search { height: 0.56rem; } .banner .section-md .md-block .banner-search form { display: -webkit-flex; display: flex; height: 100%; } .banner .section-md .md-block .banner-search form input { flex: 1; border-bottom-left-radius: 0.05rem; border-top-left-radius: 0.05rem; padding: 0 0.2rem; font-size: 0.16rem; } .banner .section-md .md-block .banner-search form button { width: 1.2rem; border-bottom-left-radius: 0; border-top-left-radius: 0; font-size: 0.16rem; } .banner .section-md .md-block .banner-search form button .iconfont { margin-right: 0.1rem; font-size: 0.16rem; } .banner .section-md .md-block .banner-menu ul { text-align: center; } .banner .section-md .md-block .banner-menu ul li { display: inline-block; position: relative; padding-right: 0.15rem; } .banner .section-md .md-block .banner-menu ul li.active a { color: #f34f39; } .banner .section-md .md-block .banner-menu ul li::after { content: ""; color: #e5e8ee; display: block; width: 1px; height: 0.15rem; background-color: rgba(229, 232, 238, 0.5); position: absolute; right: 0.06rem; top: 50%; transform: translateY(-50%); } .banner .section-md .md-block .banner-menu ul li:last-child::after { display: none; } .banner .section-md .md-block .lead { text-align: center; color: #fff; } /* ------------------------------------------------ 第四部分：页面样式pages * 定义各页面的样式 --------------------------------------------------*/ /*********************************** ** 首页 ************************************/ .page-home { height: 100vh; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; background-color: rgba(229, 232, 238, 0.05); } .home-main { flex: 1; } .home-main .home-banner { background: url(../images/banner.jpg) no-repeat center; background-size: cover; height: 100%; } .home-main .home-banner .container { height: 100%; } .home-main .home-banner .container .section-md { height: 100%; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; } .home-main .home-banner .container .section-md h1 { color: #fff; font-size: 0.44rem; font-weight: normal; padding-bottom: 0.4rem; } .home-main .home-banner .container .section-md .home-search { width: 100%; max-width: 6.5rem; height: 0.56rem; } .home-main .home-banner .container .section-md .home-search form { display: -webkit-flex; display: flex; height: 100%; } .home-main .home-banner .container .section-md .home-search form input { flex: 1; border-bottom-left-radius: 0.05rem; border-top-left-radius: 0.05rem; padding: 0 0.2rem; font-size: 0.16rem; } .home-main .home-banner .container .section-md .home-search form button { width: 1.2rem; border-bottom-left-radius: 0; border-top-left-radius: 0; font-size: 0.16rem; } .home-main .home-banner .container .section-md .home-search form button .iconfont { margin-right: 0.1rem; font-size: 0.16rem; } .home-main .home-banner .container .section-md .home-menu { padding-top: 0.2rem; } .home-main .home-banner .container .section-md .home-menu ul li { display: inline-block; } /*********************************** ** 样式列表页 ************************************/ .post-list .section-md { overflow: hidden; } .post-list .section-md .item { padding: 0.15rem; display: block; } .post-list .section-md .item .item-image { position: relative; } .post-list .section-md .item .item-image .image { display: block; } .post-list .section-md .item .item-image .image img { width: 100%; } .post-list .section-md .item .item-image .ymfl { position: absolute; left: 0; top: 0; } .post-list .section-md .item .item-image .ymfl a { display: inline-block; margin-right: 0.02rem; padding: 0.02rem 0.06rem; font-size: 0.12rem; color: #fff; } .post-list .section-md .item .item-image .ymfl a:last-child { margin-right: 0; } .post-list .section-md .item .item-block { padding-top: 0.1rem; } .post-list .section-md .item .item-block .block-hd { display: -webkit-flex; display: flex; justify-content: space-between; } .post-list .section-md .item .item-block .block-hd h2 { font-size: 0.14rem; font-weight: normal; } .post-list .section-md .item .item-block .block-hd h2 a { color: #0075d1; } .post-list .section-md .item .item-block .block-hd .xcode { color: #999; } .post-list .section-md .item .item-block .block-hd .xcode span { color: #0075d1; } .post-list .section-md .item .item-block .block-md { display: -webkit-flex; display: flex; justify-content: space-between; } .post-list .section-md .item .item-block .block-md .tags a { color: #f34f39; position: relative; } .post-list .section-md .item .item-block .block-md .tags a:hover { color: #17a2b8; } .post-list .section-md .item .item-block .block-md .tags a::after { content: ","; color: #999; position: absolute; } .post-list .section-md .item .item-block .block-md .tags a:last-child::after { display: none; } .post-list .section-md .item .item-block .block-md .date { color: #999; } /*********************************** ** 样式列表页 ************************************/ .section-post .section-md .post-thumb { border: solid 1px #e5e8ee; padding: 0.05rem; } .section-post .section-md .post-thumb .image img { width: 100%; } .section-example { padding-bottom: 0; } .section-example .section-md h2 { padding-bottom: 0.3rem; } .section-example .section-md .action { display: -webkit-flex; display: flex; justify-content: flex-end; border-bottom: solid 1px #f34f39; } .section-example .section-md .action .btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-right: 0.02rem; font-size: 0.12rem; padding: 0.04rem 0.15rem; } .section-example .section-md .action .btn:last-child { margin-right: 0; } /* ------------------------------------------------ 第十部分：助手类 * 加载助手类 --------------------------------------------------*/ /* ------------------------------------------------ * 助手函数 * 方便进行样式的微调 --------------------------------------------------*/ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .mx-0 { margin-left: 0; margin-right: 0; } .my-0 { margin-top: 0; margin-bottom: 0; } .p-0 { padding: 0; } .pt-0 { padding-top: 0; } .pr-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .px-0 { padding-left: 0; padding-right: 0; } .py-0 { padding-top: 0; padding-bottom: 0; } .m-5 { margin: 0.05rem; } .mt-5 { margin-top: 0.05rem; } .mr-5 { margin-right: 0.05rem; } .mb-5 { margin-bottom: 0.05rem; } .ml-5 { margin-left: 0.05rem; } .mx-5 { margin-left: 0.05rem; margin-right: 0.05rem; } .my-5 { margin-top: 0.05rem; margin-bottom: 0.05rem; } .p-5 { padding: 0.05rem; } .pt-5 { padding-top: 0.05rem; } .pr-5 { padding-right: 0.05rem; } .pb-5 { padding-bottom: 0.05rem; } .pl-5 { padding-left: 0.05rem; } .px-5 { padding-left: 0.05rem; padding-right: 0.05rem; } .py-5 { padding-top: 0.05rem; padding-bottom: 0.05rem; } .m-1 { margin: 0.1rem; } .mt-1 { margin-top: 0.1rem; } .mr-1 { margin-right: 0.1rem; } .mb-1 { margin-bottom: 0.1rem; } .ml-1 { margin-left: 0.1rem; } .mx-1 { margin-left: 0.1rem; margin-right: 0.1rem; } .my-1 { margin-top: 0.1rem; margin-bottom: 0.1rem; } .p-1 { padding: 0.1rem; } .pt-1 { padding-top: 0.1rem; } .pr-1 { padding-right: 0.1rem; } .pb-1 { padding-bottom: 0.1rem; } .pl-1 { padding-left: 0.1rem; } .px-1 { padding-left: 0.1rem; padding-right: 0.1rem; } .py-1 { padding-top: 0.1rem; padding-bottom: 0.1rem; } .m-2 { margin: 0.2rem; } .mt-2 { margin-top: 0.2rem; } .mr-2 { margin-right: 0.2rem; } .mb-2 { margin-bottom: 0.2rem; } .ml-2 { margin-left: 0.2rem; } .mx-2 { margin-left: 0.2rem; margin-right: 0.2rem; } .my-2 { margin-top: 0.2rem; margin-bottom: 0.2rem; } .p-2 { padding: 0.2rem; } .pt-2 { padding-top: 0.2rem; } .pr-2 { padding-right: 0.2rem; } .pb-2 { padding-bottom: 0.2rem; } .pl-2 { padding-left: 0.2rem; } .px-2 { padding-left: 0.2rem; padding-right: 0.2rem; } .py-2 { padding-top: 0.2rem; padding-bottom: 0.2rem; } .m-3 { margin: 0.3rem; } .mt-3 { margin-top: 0.3rem; } .mr-3 { margin-right: 0.3rem; } .mb-3 { margin-bottom: 0.3rem; } .ml-3 { margin-left: 0.3rem; } .mx-3 { margin-left: 0.3rem; margin-right: 0.3rem; } .my-3 { margin-top: 0.3rem; margin-bottom: 0.3rem; } .p-3 { padding: 0.3rem; } .pt-3 { padding-top: 0.3rem; } .pr-3 { padding-right: 0.3rem; } .pb-3 { padding-bottom: 0.3rem; } .pl-3 { padding-left: 0.3rem; } .px-3 { padding-left: 0.3rem; padding-right: 0.3rem; } .py-3 { padding-top: 0.3rem; padding-bottom: 0.3rem; } .m-4 { margin: 0.4rem; } .mt-4 { margin-top: 0.4rem; } .mr-4 { margin-right: 0.4rem; } .mb-4 { margin-bottom: 0.4rem; } .ml-4 { margin-left: 0.4rem; } .mx-4 { margin-left: 0.4rem; margin-right: 0.4rem; } .my-4 { margin-top: 0.4rem; margin-bottom: 0.4rem; } .p-4 { padding: 0.4rem; } .pt-4 { padding-top: 0.4rem; } .pr-4 { padding-right: 0.4rem; } .pb-4 { padding-bottom: 0.4rem; } .pl-4 { padding-left: 0.4rem; } .px-4 { padding-left: 0.4rem; padding-right: 0.4rem; } .py-4 { padding-top: 0.4rem; padding-bottom: 0.4rem; } .m-5 { margin: 0.5rem; } .mt-5 { margin-top: 0.5rem; } .mr-5 { margin-right: 0.5rem; } .mb-5 { margin-bottom: 0.5rem; } .ml-5 { margin-left: 0.5rem; } .mx-5 { margin-left: 0.5rem; margin-right: 0.5rem; } .my-5 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .p-5 { padding: 0.5rem; } .pt-5 { padding-top: 0.5rem; } .pr-5 { padding-right: 0.5rem; } .pb-5 { padding-bottom: 0.5rem; } .pl-5 { padding-left: 0.5rem; } .px-5 { padding-left: 0.5rem; padding-right: 0.5rem; } .py-5 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .m-6 { margin: 0.6rem; } .mt-6 { margin-top: 0.6rem; } .mr-6 { margin-right: 0.6rem; } .mb-6 { margin-bottom: 0.6rem; } .ml-6 { margin-left: 0.6rem; } .mx-6 { margin-left: 0.6rem; margin-right: 0.6rem; } .my-6 { margin-top: 0.6rem; margin-bottom: 0.6rem; } .p-6 { padding: 0.6rem; } .pt-6 { padding-top: 0.6rem; } .pr-6 { padding-right: 0.6rem; } .pb-6 { padding-bottom: 0.6rem; } .pl-6 { padding-left: 0.6rem; } .px-6 { padding-left: 0.6rem; padding-right: 0.6rem; } .py-6 { padding-top: 0.6rem; padding-bottom: 0.6rem; } .m-7 { margin: 0.7rem; } .mt-7 { margin-top: 0.7rem; } .mr-7 { margin-right: 0.7rem; } .mb-7 { margin-bottom: 0.7rem; } .ml-7 { margin-left: 0.7rem; } .mx-7 { margin-left: 0.7rem; margin-right: 0.7rem; } .my-7 { margin-top: 0.7rem; margin-bottom: 0.7rem; } .p-7 { padding: 0.7rem; } .pt-7 { padding-top: 0.7rem; } .pr-7 { padding-right: 0.7rem; } .pb-7 { padding-bottom: 0.7rem; } .pl-7 { padding-left: 0.7rem; } .px-7 { padding-left: 0.7rem; padding-right: 0.7rem; } .py-7 { padding-top: 0.7rem; padding-bottom: 0.7rem; } .m-8 { margin: 0.8rem; } .mt-8 { margin-top: 0.8rem; } .mr-8 { margin-right: 0.8rem; } .mb-8 { margin-bottom: 0.8rem; } .ml-8 { margin-left: 0.8rem; } .mx-8 { margin-left: 0.8rem; margin-right: 0.8rem; } .my-8 { margin-top: 0.8rem; margin-bottom: 0.8rem; } .p-8 { padding: 0.8rem; } .pt-8 { padding-top: 0.8rem; } .pr-8 { padding-right: 0.8rem; } .pb-8 { padding-bottom: 0.8rem; } .pl-8 { padding-left: 0.8rem; } .px-8 { padding-left: 0.8rem; padding-right: 0.8rem; } .py-8 { padding-top: 0.8rem; padding-bottom: 0.8rem; } .m-9 { margin: 0.9rem; } .mt-9 { margin-top: 0.9rem; } .mr-9 { margin-right: 0.9rem; } .mb-9 { margin-bottom: 0.9rem; } .ml-9 { margin-left: 0.9rem; } .mx-9 { margin-left: 0.9rem; margin-right: 0.9rem; } .my-9 { margin-top: 0.9rem; margin-bottom: 0.9rem; } .p-9 { padding: 0.9rem; } .pt-9 { padding-top: 0.9rem; } .pr-9 { padding-right: 0.9rem; } .pb-9 { padding-bottom: 0.9rem; } .pl-9 { padding-left: 0.9rem; } .px-9 { padding-left: 0.9rem; padding-right: 0.9rem; } .py-9 { padding-top: 0.9rem; padding-bottom: 0.9rem; } .m-10 { margin: 1rem; } .mt-10 { margin-top: 1rem; } .mr-10 { margin-right: 1rem; } .mb-10 { margin-bottom: 1rem; } .ml-10 { margin-left: 1rem; } .mx-10 { margin-left: 1rem; margin-right: 1rem; } .my-10 { margin-top: 1rem; margin-bottom: 1rem; } .p-10 { padding: 1rem; } .pt-10 { padding-top: 1rem; } .pr-10 { padding-right: 1rem; } .pb-10 { padding-bottom: 1rem; } .pl-10 { padding-left: 1rem; } .px-10 { padding-left: 1rem; padding-right: 1rem; } .py-10 { padding-top: 1rem; padding-bottom: 1rem; } .m-11 { margin: 1.1rem; } .mt-11 { margin-top: 1.1rem; } .mr-11 { margin-right: 1.1rem; } .mb-11 { margin-bottom: 1.1rem; } .ml-11 { margin-left: 1.1rem; } .mx-11 { margin-left: 1.1rem; margin-right: 1.1rem; } .my-11 { margin-top: 1.1rem; margin-bottom: 1.1rem; } .p-11 { padding: 1.1rem; } .pt-11 { padding-top: 1.1rem; } .pr-11 { padding-right: 1.1rem; } .pb-11 { padding-bottom: 1.1rem; } .pl-11 { padding-left: 1.1rem; } .px-11 { padding-left: 1.1rem; padding-right: 1.1rem; } .py-11 { padding-top: 1.1rem; padding-bottom: 1.1rem; } .m-12 { margin: 1.2rem; } .mt-12 { margin-top: 1.2rem; } .mr-12 { margin-right: 1.2rem; } .mb-12 { margin-bottom: 1.2rem; } .ml-12 { margin-left: 1.2rem; } .mx-12 { margin-left: 1.2rem; margin-right: 1.2rem; } .my-12 { margin-top: 1.2rem; margin-bottom: 1.2rem; } .p-12 { padding: 1.2rem; } .pt-12 { padding-top: 1.2rem; } .pr-12 { padding-right: 1.2rem; } .pb-12 { padding-bottom: 1.2rem; } .pl-12 { padding-left: 1.2rem; } .px-12 { padding-left: 1.2rem; padding-right: 1.2rem; } .py-12 { padding-top: 1.2rem; padding-bottom: 1.2rem; } .m-13 { margin: 1.3rem; } .mt-13 { margin-top: 1.3rem; } .mr-13 { margin-right: 1.3rem; } .mb-13 { margin-bottom: 1.3rem; } .ml-13 { margin-left: 1.3rem; } .mx-13 { margin-left: 1.3rem; margin-right: 1.3rem; } .my-13 { margin-top: 1.3rem; margin-bottom: 1.3rem; } .p-13 { padding: 1.3rem; } .pt-13 { padding-top: 1.3rem; } .pr-13 { padding-right: 1.3rem; } .pb-13 { padding-bottom: 1.3rem; } .pl-13 { padding-left: 1.3rem; } .px-13 { padding-left: 1.3rem; padding-right: 1.3rem; } .py-13 { padding-top: 1.3rem; padding-bottom: 1.3rem; } .m-14 { margin: 1.4rem; } .mt-14 { margin-top: 1.4rem; } .mr-14 { margin-right: 1.4rem; } .mb-14 { margin-bottom: 1.4rem; } .ml-14 { margin-left: 1.4rem; } .mx-14 { margin-left: 1.4rem; margin-right: 1.4rem; } .my-14 { margin-top: 1.4rem; margin-bottom: 1.4rem; } .p-14 { padding: 1.4rem; } .pt-14 { padding-top: 1.4rem; } .pr-14 { padding-right: 1.4rem; } .pb-14 { padding-bottom: 1.4rem; } .pl-14 { padding-left: 1.4rem; } .px-14 { padding-left: 1.4rem; padding-right: 1.4rem; } .py-14 { padding-top: 1.4rem; padding-bottom: 1.4rem; } .m-15 { margin: 1.5rem; } .mt-15 { margin-top: 1.5rem; } .mr-15 { margin-right: 1.5rem; } .mb-15 { margin-bottom: 1.5rem; } .ml-15 { margin-left: 1.5rem; } .mx-15 { margin-left: 1.5rem; margin-right: 1.5rem; } .my-15 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .p-15 { padding: 1.5rem; } .pt-15 { padding-top: 1.5rem; } .pr-15 { padding-right: 1.5rem; } .pb-15 { padding-bottom: 1.5rem; } .pl-15 { padding-left: 1.5rem; } .px-15 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-15 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .m-16 { margin: 1.6rem; } .mt-16 { margin-top: 1.6rem; } .mr-16 { margin-right: 1.6rem; } .mb-16 { margin-bottom: 1.6rem; } .ml-16 { margin-left: 1.6rem; } .mx-16 { margin-left: 1.6rem; margin-right: 1.6rem; } .my-16 { margin-top: 1.6rem; margin-bottom: 1.6rem; } .p-16 { padding: 1.6rem; } .pt-16 { padding-top: 1.6rem; } .pr-16 { padding-right: 1.6rem; } .pb-16 { padding-bottom: 1.6rem; } .pl-16 { padding-left: 1.6rem; } .px-16 { padding-left: 1.6rem; padding-right: 1.6rem; } .py-16 { padding-top: 1.6rem; padding-bottom: 1.6rem; } .m-17 { margin: 1.7rem; } .mt-17 { margin-top: 1.7rem; } .mr-17 { margin-right: 1.7rem; } .mb-17 { margin-bottom: 1.7rem; } .ml-17 { margin-left: 1.7rem; } .mx-17 { margin-left: 1.7rem; margin-right: 1.7rem; } .my-17 { margin-top: 1.7rem; margin-bottom: 1.7rem; } .p-17 { padding: 1.7rem; } .pt-17 { padding-top: 1.7rem; } .pr-17 { padding-right: 1.7rem; } .pb-17 { padding-bottom: 1.7rem; } .pl-17 { padding-left: 1.7rem; } .px-17 { padding-left: 1.7rem; padding-right: 1.7rem; } .py-17 { padding-top: 1.7rem; padding-bottom: 1.7rem; } .m-18 { margin: 1.8rem; } .mt-18 { margin-top: 1.8rem; } .mr-18 { margin-right: 1.8rem; } .mb-18 { margin-bottom: 1.8rem; } .ml-18 { margin-left: 1.8rem; } .mx-18 { margin-left: 1.8rem; margin-right: 1.8rem; } .my-18 { margin-top: 1.8rem; margin-bottom: 1.8rem; } .p-18 { padding: 1.8rem; } .pt-18 { padding-top: 1.8rem; } .pr-18 { padding-right: 1.8rem; } .pb-18 { padding-bottom: 1.8rem; } .pl-18 { padding-left: 1.8rem; } .px-18 { padding-left: 1.8rem; padding-right: 1.8rem; } .py-18 { padding-top: 1.8rem; padding-bottom: 1.8rem; } .m-19 { margin: 1.9rem; } .mt-19 { margin-top: 1.9rem; } .mr-19 { margin-right: 1.9rem; } .mb-19 { margin-bottom: 1.9rem; } .ml-19 { margin-left: 1.9rem; } .mx-19 { margin-left: 1.9rem; margin-right: 1.9rem; } .my-19 { margin-top: 1.9rem; margin-bottom: 1.9rem; } .p-19 { padding: 1.9rem; } .pt-19 { padding-top: 1.9rem; } .pr-19 { padding-right: 1.9rem; } .pb-19 { padding-bottom: 1.9rem; } .pl-19 { padding-left: 1.9rem; } .px-19 { padding-left: 1.9rem; padding-right: 1.9rem; } .py-19 { padding-top: 1.9rem; padding-bottom: 1.9rem; } .m-20 { margin: 2rem; } .mt-20 { margin-top: 2rem; } .mr-20 { margin-right: 2rem; } .mb-20 { margin-bottom: 2rem; } .ml-20 { margin-left: 2rem; } .mx-20 { margin-left: 2rem; margin-right: 2rem; } .my-20 { margin-top: 2rem; margin-bottom: 2rem; } .p-20 { padding: 2rem; } .pt-20 { padding-top: 2rem; } .pr-20 { padding-right: 2rem; } .pb-20 { padding-bottom: 2rem; } .pl-20 { padding-left: 2rem; } .px-20 { padding-left: 2rem; padding-right: 2rem; } .py-20 { padding-top: 2rem; padding-bottom: 2rem; } .m-auto { margin: auto; } .mt-auto { margin-top: auto; } .mr-auto { margin-right: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; } .p-auto { padding: auto; } .pt-auto { padding-top: auto; } .pr-auto { padding-right: auto; } .pb-auto { padding-bottom: auto; } .pl-auto { padding-left: auto; } .px-auto { padding-left: auto; padding-right: auto; } .py-auto { padding-top: auto; padding-bottom: auto; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-none { display: none; } .d-flex { display: -webkit-flex; display: flex; } .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } .align-items-start { align-items: flex-start; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .float-left { float: left; } .float-right { float: right; } .float-none { float: none; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .w-0 { width: 0 !important; } .h-0 { height: 0 !important; } .w-20 { width: 20% !important; } .h-20 { height: 20% !important; } .w-25 { width: 25% !important; } .h-25 { height: 25% !important; } .w-33 { width: 33.33333% !important; } .h-33 { height: 33.33333% !important; } .w-50 { width: 50% !important; } .h-50 { height: 50% !important; } .w-75 { width: 75% !important; } .h-75 { height: 75% !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .w-auto { width: auto !important; } .h-auto { height: auto !important; } .text-pri { color: #f34f39 !important; } .bg-pri { background-color: #f34f39 !important; } .text-sub { color: #e64e0c !important; } .bg-sub { background-color: #e64e0c !important; } .text-black { color: #000 !important; } .bg-black { background-color: #000 !important; } .text-white { color: #fff !important; } .bg-white { background-color: #fff !important; } .text-dark { color: #222 !important; } .bg-dark { background-color: #222 !important; } .text-light { color: #e5e8ee !important; } .bg-light { background-color: #e5e8ee !important; } .text-grey { color: #666 !important; } .bg-grey { background-color: #666 !important; } .text-success { color: #28a745 !important; } .bg-success { background-color: #28a745 !important; } .text-danger { color: #ff3535 !important; } .bg-danger { background-color: #ff3535 !important; } .text-warning { color: #f9c851 !important; } .bg-warning { background-color: #f9c851 !important; } .text-info { color: #17a2b8 !important; } .bg-info { background-color: #17a2b8 !important; } .border-pri { border-color: #f34f39 !important; } .border-sub { border-color: #e64e0c !important; } .border-black { border-color: #000 !important; } .border-white { border-color: #fff !important; } .border-dark { border-color: #222 !important; } .border-light { border-color: #e5e8ee !important; } .border-grey { border-color: #666 !important; } .border-success { border-color: #28a745 !important; } .border-danger { border-color: #ff3535 !important; } .border-warning { border-color: #f9c851 !important; } .border-info { border-color: #17a2b8 !important; } .fw-1 { font-weight: 100; } .fw-2 { font-weight: 200; } .fw-3 { font-weight: 300; } .fw-4 { font-weight: 400; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; } .fw-9 { font-weight: 900; } .fw-bold { font-weight: bold; } .mw-500 { max-width: 5rem; } .mw-850 { max-width: 8.5rem; } .mw-p50 { max-width: 50%; } .mw-p100 { max-width: 100%; } /* ------------------------------------------------ 循环间距:内容循环样式-支持在item-loop或者form-group中添加gutter-0消除上下间距 固定用法
--------------------------------------------------*/ .gutter-0 { margin-left: 0; margin-right: 0; margin-bottom: 0; } .gutter-0 > .item { padding-left: 0; padding-right: 0; margin-bottom: 0; } /* -------在item-loop添加预设类以更改循环体间距--------*/ .gutter-1 { margin-left: -0.05rem; margin-right: -0.05rem; margin-bottom: -0.1rem; } .gutter-1 > .col, .gutter-1 > [class*="col-"] { padding-left: 0.05rem; padding-right: 0.05rem; margin-bottom: 0.1rem; } .gutter-2 { margin-left: -0.1rem; margin-right: -0.1rem; margin-bottom: -0.2rem; } .gutter-2 > .col, .gutter-2 > [class*="col-"] { padding-left: 0.1rem; padding-right: 0.1rem; margin-bottom: 0.2rem; } .gutter-3 { margin-left: -0.15rem; margin-right: -0.15rem; margin-bottom: -0.3rem; } .gutter-3 > .col, .gutter-3 > [class*="col-"] { padding-left: 0.15rem; padding-right: 0.15rem; margin-bottom: 0.3rem; } .gutter-4 { margin-left: -0.2rem; margin-right: -0.2rem; margin-bottom: -0.4rem; } .gutter-4 > .col, .gutter-4 > [class*="col-"] { padding-left: 0.2rem; padding-right: 0.2rem; margin-bottom: 0.4rem; } .gutter-5 { margin-left: -0.25rem; margin-right: -0.25rem; margin-bottom: -0.5rem; } .gutter-5 > .col, .gutter-5 > [class*="col-"] { padding-left: 0.25rem; padding-right: 0.25rem; margin-bottom: 0.5rem; } /* -------默认的col循环会带上margin，在col添加gutter-no-margin会清除每个循环体的底部margin--------*/ .gutter-no-margin { margin-bottom: 0; } .gutter-no-margin > .col, .gutter-no-margin > [class*="col-"] { margin-bottom: 0; } /*# sourceMappingURL=./style.min.css.map */