fe / yohobuywap-node · Commits

Go to a project

Authored by yyq
Commit ce76de21c457afd8d919b390fc3fbbcee9a99810 1 parent edadea36

gulp css 分离

Inline Side-by-side
Showing 10 changed files with 840 additions and 4 deletions
@@ -4,7 +4,12 @@ @@ -4,7 +4,12 @@
4 var pageHeader = { 4 var pageHeader = {
5 navBack: true, 5 navBack: true,
6 navTitle: '逛', 6 navTitle: '逛',
7 - navBtn: true 7 + navBtn: {
  8 + indexUrl: '#',
  9 + categoryUrl: '#',
  10 + shoppingCartUrl: '#',
  11 + mineUrl: '#'
  12 + }
8 }; 13 };
9 ``` 14 ```
10 ##公共底部模拟数据 15 ##公共底部模拟数据
@@ -18,9 +18,9 @@ @@ -18,9 +18,9 @@
18 (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=640){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/640)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window); 18 (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=640){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/640)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
19 </script> 19 </script>
20 {{#if devEnv}} 20 {{#if devEnv}}
21 - <link rel="stylesheet" href="//localhost:5000/css/index.css"> 21 + <link rel="stylesheet" href="//localhost:5000/css/m-index.css">
22 {{^}} 22 {{^}}
23 - <link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/index.css"> 23 + <link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/m-index.css">
24 {{/if}} 24 {{/if}}
25 <link rel="apple-touch-icon-precomposed" href="http://static.yohobuy.com/m/v1/img/touch/apple-touch-icon-144x144-precomposed-new.png"> 25 <link rel="apple-touch-icon-precomposed" href="http://static.yohobuy.com/m/v1/img/touch/apple-touch-icon-144x144-precomposed-new.png">
26 <link rel="apple-touch-startup-image" sizes="640x920" href="http://static.yohobuy.com/m/v1/img/startup/startup-retina.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"> 26 <link rel="apple-touch-startup-image" sizes="640x920" href="http://static.yohobuy.com/m/v1/img/startup/startup-retina.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">
@@ -124,7 +124,7 @@ const postcssPlugin = (et) => { @@ -124,7 +124,7 @@ const postcssPlugin = (et) => {
124 }; 124 };
125 125
126 // default 126 // default
127 -gulp.task('default', ['postcss-dev', 'postcss-watch', 'webpack-dev-server']); 127 +gulp.task('default', ['postcss-dev', 'postcss-dev-h5', 'postcss-watch', 'webpack-dev-server']);
128 128
129 // ge 129 // ge
130 gulp.task('ge', ['postcss', 'webpack']); 130 gulp.task('ge', ['postcss', 'webpack']);
@@ -147,9 +147,19 @@ gulp.task('postcss-dev', () => { @@ -147,9 +147,19 @@ gulp.task('postcss-dev', () => {
147 .pipe(gulp.dest('css/')); 147 .pipe(gulp.dest('css/'));
148 }); 148 });
149 149
  150 +// postcss compile in dev-h5
  151 +gulp.task('postcss-dev-h5', () => {
  152 + return gulp.src('m-scss/m-index.css')
  153 + .pipe(sourcemaps.init())
  154 + .pipe(postcss(postcssPlugin(env.dev)))
  155 + .pipe(sourcemaps.write('.'))
  156 + .pipe(gulp.dest('css/'));
  157 +});
  158 +
150 // postcss file watch 159 // postcss file watch
151 gulp.task('postcss-watch', () => { 160 gulp.task('postcss-watch', () => {
152 gulp.watch('scss/**/*.css', ['postcss-dev']); 161 gulp.watch('scss/**/*.css', ['postcss-dev']);
  162 + gulp.watch('m-scss/**/*.css', ['postcss-dev-h5']);
153 }); 163 });
154 164
155 // copy assets 165 // copy assets
  1 +.order-failure {
  2 + background-image: resolve('common/order-good.jpg');
  3 + background-size: 100%;
  4 +}
  5 +
  6 +.good-failure {
  7 + background-image: resolve('common/order-good.jpg');
  8 + background-size: 132px !important;
  9 + background-position-x: 40%;
  10 +}
  1 +.loading-mask {
  2 + position: fixed;
  3 + background: rgba(0, 0, 0, 0.1);
  4 + top: 0;
  5 + bottom: 0;
  6 + right: 0;
  7 + left: 0;
  8 +
  9 + @keyframes scale {
  10 + 0% {
  11 + transform: scale(1);
  12 + opacity: 1;
  13 + }
  14 +
  15 + 45% {
  16 + transform: scale(0.1);
  17 + opacity: 0.7;
  18 + }
  19 +
  20 + 80% {
  21 + transform: scale(1);
  22 + opacity: 1;
  23 + }
  24 + }
  25 +
  26 + .loading {
  27 + position: absolute;
  28 + width: 120px;
  29 + height: 40px;
  30 + top: 50%;
  31 + left: 50%;
  32 + margin-top: -20px;
  33 + margin-left: -60px;
  34 +
  35 + > div {
  36 + display: inline-block;
  37 + background: #fff;
  38 + width: 30px;
  39 + height: 30px;
  40 + border-radius: 100%;
  41 + margin: 4px;
  42 + $init: 0.12;
  43 +
  44 + @for $i from 1 to 3 {
  45 + &:nth-child($i) {
  46 + animation: scale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  47 + }
  48 + $init: ($i + 1) * 0.12;
  49 + }
  50 + }
  51 + }
  52 +}
  1 +html,
  2 +body,
  3 +div,
  4 +span,
  5 +applet,
  6 +object,
  7 +iframe,
  8 +h1,
  9 +h2,
  10 +h3,
  11 +h4,
  12 +h5,
  13 +h6,
  14 +p,
  15 +blockquote,
  16 +pre,
  17 +a,
  18 +abbr,
  19 +acronym,
  20 +address,
  21 +big,
  22 +cite,
  23 +code,
  24 +del,
  25 +dfn,
  26 +em,
  27 +img,
  28 +ins,
  29 +kbd,
  30 +q,
  31 +s,
  32 +samp,
  33 +small,
  34 +strike,
  35 +strong,
  36 +sub,
  37 +sup,
  38 +tt,
  39 +var,
  40 +b,
  41 +u,
  42 +i,
  43 +center,
  44 +dl,
  45 +dt,
  46 +dd,
  47 +ol,
  48 +ul,
  49 +li,
  50 +fieldset,
  51 +form,
  52 +label,
  53 +legend,
  54 +table,
  55 +caption,
  56 +tbody,
  57 +tfoot,
  58 +thead,
  59 +tr,
  60 +th,
  61 +td,
  62 +article,
  63 +aside,
  64 +canvas,
  65 +details,
  66 +embed,
  67 +figure,
  68 +figcaption,
  69 +footer,
  70 +header,
  71 +hgroup,
  72 +menu,
  73 +nav,
  74 +output,
  75 +ruby,
  76 +section,
  77 +summary,
  78 +time,
  79 +mark,
  80 +audio,
  81 +video {
  82 + margin: 0;
  83 + padding: 0;
  84 + border: 0;
  85 + font: inherit;
  86 + font-size: 100%;
  87 + vertical-align: baseline;
  88 +}
  89 +
  90 +html {
  91 + line-height: 1;
  92 +}
  93 +
  94 +ol,
  95 +ul {
  96 + list-style: none;
  97 +}
  98 +
  99 +table {
  100 + border-collapse: collapse;
  101 + border-spacing: 0;
  102 +}
  103 +
  104 +caption,
  105 +th,
  106 +td {
  107 + text-align: left;
  108 + font-weight: normal;
  109 + vertical-align: middle;
  110 +}
  111 +
  112 +q,
  113 +blockquote {
  114 + quotes: none;
  115 +}
  116 +
  117 +q:before,
  118 +q:after,
  119 +blockquote:before,
  120 +blockquote:after {
  121 + content: "";
  122 + content: none;
  123 +}
  124 +
  125 +a img {
  126 + border: none;
  127 +}
  128 +
  129 +article,
  130 +aside,
  131 +details,
  132 +figcaption,
  133 +figure,
  134 +footer,
  135 +header,
  136 +hgroup,
  137 +main,
  138 +menu,
  139 +nav,
  140 +section,
  141 +summary {
  142 + display: block;
  143 +}
  1 +/* stylelint-disable */
  2 +/**
  3 + * Swiper 3.0.8
  4 + * Most modern mobile touch slider and framework with hardware accelerated transitions
  5 + *
  6 + * http://www.idangero.us/swiper/
  7 + *
  8 + * Copyright 2015, Vladimir Kharlampidi
  9 + * The iDangero.us
  10 + * http://www.idangero.us/
  11 + *
  12 + * Licensed under MIT
  13 + *
  14 + * Released on: June 14, 2015
  15 + */
  16 +.swiper-container {
  17 + margin: 0 auto;
  18 + position: relative;
  19 + overflow: hidden;
  20 +
  21 + /* Fix of Webkit flickering */
  22 + z-index: 1;
  23 +}
  24 +
  25 +.swiper-container-no-flexbox .swiper-slide {
  26 + float: left;
  27 +}
  28 +
  29 +.swiper-container-vertical > .swiper-wrapper {
  30 + -webkit-box-orient: vertical;
  31 + -moz-box-orient: vertical;
  32 + -ms-flex-direction: column;
  33 + -webkit-flex-direction: column;
  34 + flex-direction: column;
  35 +}
  36 +
  37 +.swiper-wrapper {
  38 + position: relative;
  39 + width: 100%;
  40 + height: 100%;
  41 + z-index: 1;
  42 + display: -webkit-box;
  43 + display: -moz-box;
  44 + display: -ms-flexbox;
  45 + display: -webkit-flex;
  46 + display: flex;
  47 + -webkit-transform-style: preserve-3d;
  48 + -moz-transform-style: preserve-3d;
  49 + -ms-transform-style: preserve-3d;
  50 + transform-style: preserve-3d;
  51 + -webkit-transition-property: -webkit-transform;
  52 + -moz-transition-property: -moz-transform;
  53 + -o-transition-property: -o-transform;
  54 + -ms-transition-property: -ms-transform;
  55 + transition-property: transform;
  56 + -webkit-box-sizing: content-box;
  57 + -moz-box-sizing: content-box;
  58 + box-sizing: content-box;
  59 +}
  60 +
  61 +.swiper-container-android .swiper-slide,
  62 +.swiper-wrapper {
  63 + -webkit-transform: translate3d(0px, 0, 0);
  64 + -moz-transform: translate3d(0px, 0, 0);
  65 + -o-transform: translate(0px, 0px);
  66 + -ms-transform: translate3d(0px, 0, 0);
  67 + transform: translate3d(0px, 0, 0);
  68 +}
  69 +
  70 +.swiper-container-multirow > .swiper-wrapper {
  71 + -webkit-box-lines: multiple;
  72 + -moz-box-lines: multiple;
  73 + -ms-flex-wrap: wrap;
  74 + -webkit-flex-wrap: wrap;
  75 + flex-wrap: wrap;
  76 +}
  77 +
  78 +.swiper-container-free-mode > .swiper-wrapper {
  79 + -webkit-transition-timing-function: ease-out;
  80 + -moz-transition-timing-function: ease-out;
  81 + -ms-transition-timing-function: ease-out;
  82 + -o-transition-timing-function: ease-out;
  83 + transition-timing-function: ease-out;
  84 + margin: 0 auto;
  85 +}
  86 +
  87 +.swiper-slide {
  88 + -webkit-transform-style: preserve-3d;
  89 + -moz-transform-style: preserve-3d;
  90 + -ms-transform-style: preserve-3d;
  91 + transform-style: preserve-3d;
  92 + -webkit-flex-shrink: 0;
  93 + -ms-flex: 0 0 auto;
  94 + flex-shrink: 0;
  95 + width: 100%;
  96 + height: 100%;
  97 + position: relative;
  98 +}
  99 +
  100 +/* a11y */
  101 +.swiper-container .swiper-notification {
  102 + position: absolute;
  103 + left: 0;
  104 + top: 0;
  105 + pointer-events: none;
  106 + opacity: 0;
  107 + z-index: -1000;
  108 +}
  109 +
  110 +/* IE10 Windows Phone 8 Fixes */
  111 +.swiper-wp8-horizontal {
  112 + -ms-touch-action: pan-y;
  113 + touch-action: pan-y;
  114 +}
  115 +
  116 +.swiper-wp8-vertical {
  117 + -ms-touch-action: pan-x;
  118 + touch-action: pan-x;
  119 +}
  120 +
  121 +/* Arrows */
  122 +.swiper-button-prev,
  123 +.swiper-button-next {
  124 + position: absolute;
  125 + top: 50%;
  126 + width: 27px;
  127 + height: 44px;
  128 + margin-top: -22px;
  129 + z-index: 10;
  130 + cursor: pointer;
  131 + -moz-background-size: 27px 44px;
  132 + -webkit-background-size: 27px 44px;
  133 + background-size: 27px 44px;
  134 + background-position: center;
  135 + background-repeat: no-repeat;
  136 +}
  137 +
  138 +.swiper-button-prev.swiper-button-disabled,
  139 +.swiper-button-next.swiper-button-disabled {
  140 + opacity: 0.35;
  141 + cursor: auto;
  142 + pointer-events: none;
  143 +}
  144 +
  145 +.swiper-button-prev,
  146 +.swiper-container-rtl .swiper-button-next {
  147 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  148 + left: 10px;
  149 + right: auto;
  150 +}
  151 +
  152 +.swiper-button-prev.swiper-button-black,
  153 +.swiper-container-rtl .swiper-button-next.swiper-button-black {
  154 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
  155 +}
  156 +
  157 +.swiper-button-prev.swiper-button-white,
  158 +.swiper-container-rtl .swiper-button-next.swiper-button-white {
  159 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  160 +}
  161 +
  162 +.swiper-button-next,
  163 +.swiper-container-rtl .swiper-button-prev {
  164 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  165 + right: 10px;
  166 + left: auto;
  167 +}
  168 +
  169 +.swiper-button-next.swiper-button-black,
  170 +.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  171 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
  172 +}
  173 +
  174 +.swiper-button-next.swiper-button-white,
  175 +.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  176 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  177 +}
  178 +
  179 +/* Pagination Styles */
  180 +.swiper-pagination {
  181 + position: absolute;
  182 + text-align: center;
  183 + -webkit-transition: 300ms;
  184 + -moz-transition: 300ms;
  185 + -o-transition: 300ms;
  186 + transition: 300ms;
  187 + -webkit-transform: translate3d(0, 0, 0);
  188 + -ms-transform: translate3d(0, 0, 0);
  189 + -o-transform: translate3d(0, 0, 0);
  190 + transform: translate3d(0, 0, 0);
  191 + z-index: 10;
  192 +}
  193 +
  194 +.swiper-pagination.swiper-pagination-hidden {
  195 + opacity: 0;
  196 +}
  197 +
  198 +.swiper-pagination-bullet {
  199 + width: 8px;
  200 + height: 8px;
  201 + display: inline-block;
  202 + border-radius: 100%;
  203 + background: #000;
  204 + opacity: 0.2;
  205 +}
  206 +
  207 +.swiper-pagination-clickable .swiper-pagination-bullet {
  208 + cursor: pointer;
  209 +}
  210 +
  211 +.swiper-pagination-white .swiper-pagination-bullet {
  212 + background: #fff;
  213 +}
  214 +
  215 +.swiper-pagination-bullet-active {
  216 + opacity: 1;
  217 + background: #007aff;
  218 +}
  219 +
  220 +.swiper-pagination-white .swiper-pagination-bullet-active {
  221 + background: #fff;
  222 +}
  223 +
  224 +.swiper-pagination-black .swiper-pagination-bullet-active {
  225 + background: #000;
  226 +}
  227 +
  228 +.swiper-container-vertical > .swiper-pagination {
  229 + right: 10px;
  230 + top: 50%;
  231 + -webkit-transform: translate3d(0px, -50%, 0);
  232 + -moz-transform: translate3d(0px, -50%, 0);
  233 + -o-transform: translate(0px, -50%);
  234 + -ms-transform: translate3d(0px, -50%, 0);
  235 + transform: translate3d(0px, -50%, 0);
  236 +}
  237 +
  238 +.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
  239 + margin: 5px 0;
  240 + display: block;
  241 +}
  242 +
  243 +.swiper-container-horizontal > .swiper-pagination {
  244 + bottom: 10px;
  245 + left: 0;
  246 + width: 100%;
  247 +}
  248 +
  249 +.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
  250 + margin: 0 5px;
  251 +}
  252 +
  253 +/* 3D Container */
  254 +.swiper-container-3d {
  255 + -webkit-perspective: 1200px;
  256 + -moz-perspective: 1200px;
  257 + -o-perspective: 1200px;
  258 + perspective: 1200px;
  259 +}
  260 +
  261 +.swiper-container-3d .swiper-wrapper,
  262 +.swiper-container-3d .swiper-slide,
  263 +.swiper-container-3d .swiper-slide-shadow-left,
  264 +.swiper-container-3d .swiper-slide-shadow-right,
  265 +.swiper-container-3d .swiper-slide-shadow-top,
  266 +.swiper-container-3d .swiper-slide-shadow-bottom,
  267 +.swiper-container-3d .swiper-cube-shadow {
  268 + -webkit-transform-style: preserve-3d;
  269 + -moz-transform-style: preserve-3d;
  270 + -ms-transform-style: preserve-3d;
  271 + transform-style: preserve-3d;
  272 +}
  273 +
  274 +.swiper-container-3d .swiper-slide-shadow-left,
  275 +.swiper-container-3d .swiper-slide-shadow-right,
  276 +.swiper-container-3d .swiper-slide-shadow-top,
  277 +.swiper-container-3d .swiper-slide-shadow-bottom {
  278 + position: absolute;
  279 + left: 0;
  280 + top: 0;
  281 + width: 100%;
  282 + height: 100%;
  283 + pointer-events: none;
  284 + z-index: 10;
  285 +}
  286 +
  287 +.swiper-container-3d .swiper-slide-shadow-left {
  288 + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  289 +
  290 + /* Safari 4+, Chrome */
  291 + background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  292 +
  293 + /* Chrome 10+, Safari 5.1+, iOS 5+ */
  294 + background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  295 +
  296 + /* Firefox 3.6-15 */
  297 + background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  298 +
  299 + /* Opera 11.10-12.00 */
  300 + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  301 +
  302 + /* Firefox 16+, IE10, Opera 12.50+ */
  303 +}
  304 +
  305 +.swiper-container-3d .swiper-slide-shadow-right {
  306 + background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  307 +
  308 + /* Safari 4+, Chrome */
  309 + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  310 +
  311 + /* Chrome 10+, Safari 5.1+, iOS 5+ */
  312 + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  313 +
  314 + /* Firefox 3.6-15 */
  315 + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  316 +
  317 + /* Opera 11.10-12.00 */
  318 + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  319 +
  320 + /* Firefox 16+, IE10, Opera 12.50+ */
  321 +}
  322 +
  323 +.swiper-container-3d .swiper-slide-shadow-top {
  324 + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  325 +
  326 + /* Safari 4+, Chrome */
  327 + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  328 +
  329 + /* Chrome 10+, Safari 5.1+, iOS 5+ */
  330 + background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  331 +
  332 + /* Firefox 3.6-15 */
  333 + background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  334 +
  335 + /* Opera 11.10-12.00 */
  336 + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  337 +
  338 + /* Firefox 16+, IE10, Opera 12.50+ */
  339 +}
  340 +
  341 +.swiper-container-3d .swiper-slide-shadow-bottom {
  342 + background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  343 +
  344 + /* Safari 4+, Chrome */
  345 + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  346 +
  347 + /* Chrome 10+, Safari 5.1+, iOS 5+ */
  348 + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  349 +
  350 + /* Firefox 3.6-15 */
  351 + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  352 +
  353 + /* Opera 11.10-12.00 */
  354 + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  355 +
  356 + /* Firefox 16+, IE10, Opera 12.50+ */
  357 +}
  358 +
  359 +/* Coverflow */
  360 +.swiper-container-coverflow .swiper-wrapper {
  361 +
  362 + /* Windows 8 IE 10 fix */
  363 + -ms-perspective: 1200px;
  364 +}
  365 +
  366 +/* Fade */
  367 +.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  368 + -webkit-transition-timing-function: ease-out;
  369 + -moz-transition-timing-function: ease-out;
  370 + -ms-transition-timing-function: ease-out;
  371 + -o-transition-timing-function: ease-out;
  372 + transition-timing-function: ease-out;
  373 +}
  374 +
  375 +.swiper-container-fade .swiper-slide {
  376 + pointer-events: none;
  377 +}
  378 +
  379 +.swiper-container-fade .swiper-slide .swiper-slide {
  380 + pointer-events: none;
  381 +}
  382 +
  383 +.swiper-container-fade .swiper-slide-active,
  384 +.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  385 + pointer-events: auto;
  386 +}
  387 +
  388 +/* Cube */
  389 +.swiper-container-cube {
  390 + overflow: visible;
  391 +}
  392 +
  393 +.swiper-container-cube .swiper-slide {
  394 + pointer-events: none;
  395 + visibility: hidden;
  396 + -webkit-transform-origin: 0 0;
  397 + -moz-transform-origin: 0 0;
  398 + -ms-transform-origin: 0 0;
  399 + transform-origin: 0 0;
  400 + -webkit-backface-visibility: hidden;
  401 + -moz-backface-visibility: hidden;
  402 + -ms-backface-visibility: hidden;
  403 + backface-visibility: hidden;
  404 + width: 100%;
  405 + height: 100%;
  406 +}
  407 +
  408 +.swiper-container-cube.swiper-container-rtl .swiper-slide {
  409 + -webkit-transform-origin: 100% 0;
  410 + -moz-transform-origin: 100% 0;
  411 + -ms-transform-origin: 100% 0;
  412 + transform-origin: 100% 0;
  413 +}
  414 +
  415 +.swiper-container-cube .swiper-slide-active,
  416 +.swiper-container-cube .swiper-slide-next,
  417 +.swiper-container-cube .swiper-slide-prev,
  418 +.swiper-container-cube .swiper-slide-next + .swiper-slide {
  419 + pointer-events: auto;
  420 + visibility: visible;
  421 +}
  422 +
  423 +.swiper-container-cube .swiper-cube-shadow {
  424 + position: absolute;
  425 + left: 0;
  426 + bottom: 0px;
  427 + width: 100%;
  428 + height: 100%;
  429 + background: #000;
  430 + opacity: 0.6;
  431 + -webkit-filter: blur(50px);
  432 + filter: blur(50px);
  433 +}
  434 +
  435 +.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
  436 + z-index: 0;
  437 +}
  438 +
  439 +/* Scrollbar */
  440 +.swiper-scrollbar {
  441 + border-radius: 10px;
  442 + position: relative;
  443 + -ms-touch-action: none;
  444 + background: rgba(0, 0, 0, 0.1);
  445 +}
  446 +
  447 +.swiper-container-horizontal > .swiper-scrollbar {
  448 + position: absolute;
  449 + left: 1%;
  450 + bottom: 3px;
  451 + z-index: 50;
  452 + height: 5px;
  453 + width: 98%;
  454 +}
  455 +
  456 +.swiper-container-vertical > .swiper-scrollbar {
  457 + position: absolute;
  458 + right: 3px;
  459 + top: 1%;
  460 + z-index: 50;
  461 + width: 5px;
  462 + height: 98%;
  463 +}
  464 +
  465 +.swiper-scrollbar-drag {
  466 + height: 100%;
  467 + width: 100%;
  468 + position: relative;
  469 + background: rgba(0, 0, 0, 0.5);
  470 + border-radius: 10px;
  471 + left: 0;
  472 + top: 0;
  473 +}
  474 +
  475 +.swiper-scrollbar-cursor-drag {
  476 + cursor: move;
  477 +}
  478 +
  479 +/* Preloader */
  480 +.swiper-lazy-preloader {
  481 + width: 42px;
  482 + height: 42px;
  483 + position: absolute;
  484 + left: 50%;
  485 + top: 50%;
  486 + margin-left: -21px;
  487 + margin-top: -21px;
  488 + z-index: 10;
  489 + -webkit-transform-origin: 50%;
  490 + -moz-transform-origin: 50%;
  491 + transform-origin: 50%;
  492 + -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  493 + -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  494 + animation: swiper-preloader-spin 1s steps(12, end) infinite;
  495 +}
  496 +
  497 +.swiper-lazy-preloader:after {
  498 + display: block;
  499 + content: "";
  500 + width: 100%;
  501 + height: 100%;
  502 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  503 + background-position: 50%;
  504 + -webkit-background-size: 100%;
  505 + background-size: 100%;
  506 + background-repeat: no-repeat;
  507 +}
  508 +
  509 +.swiper-lazy-preloader-white:after {
  510 + background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  511 +}
  512 +
  513 +@-webkit-keyframes swiper-preloader-spin {
  514 + 100% {
  515 + -webkit-transform: rotate(360deg);
  516 + }
  517 +}
  518 +
  519 +@keyframes swiper-preloader-spin {
  520 + 100% {
  521 + transform: rotate(360deg);
  522 + }
  523 +}
  524 +/* stylelint-enable */
  1 +@charset "utf-8";
  2 +@use postcss-clearfix ;
  3 +@import "layout/reset";
  4 +
  5 +.clearfix {
  6 + clear: fix;
  7 +}
  8 +
  9 +* {
  10 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  11 +}
  12 +
  13 +html,
  14 +body {
  15 + font-family: helvetica, Arial, "黑体";
  16 + width: 100%;
  17 + font-size: 24px;
  18 + line-height: 1.4;
  19 +}
  20 +
  21 +button,
  22 +input,
  23 +select,
  24 +textarea {
  25 + font-size: 100%;
  26 + margin: 0;
  27 +}
  28 +
  29 +img {
  30 + max-width: 100%;
  31 + display: block;
  32 + border: 0;
  33 + margin: 0 auto;
  34 +}
  35 +
  36 +a {
  37 + text-decoration: none;
  38 + outline: none;
  39 + color: #000;
  40 +}
  41 +
  42 +*:focus {
  43 + outline: none;
  44 +}
  45 +
  46 +.hide {
  47 + display: none;
  48 +}
  49 +
  50 +.overflow-hidden {
  51 + overflow: hidden;
  52 +}
  53 +
  54 +@font-face {
  55 + font-family: "iconfont";
  56 + src: resolve('h5/iconfont.eot'); /* IE9 */
  57 + src: resolve('h5/iconfont.eot?#iefix') format('embedded-opentype'), resolve('h5/iconfont.woff') format('woff'), resolve('h5/iconfont.ttf') format('truetype'), resolve('h5/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  58 +}
  59 +
  60 +.iconfont {
  61 + font-family: "iconfont" !important;
  62 + font-size: 32px;
  63 + font-style: normal;
  64 + text-decoration: none;
  65 + -webkit-font-smoothing: antialiased;
  66 + -webkit-text-stroke-width: 0.4px;
  67 + -moz-osx-font-smoothing: grayscale;
  68 +}
  69 +
  70 +.yoho-tip {
  71 + position: fixed;
  72 + display: none;
  73 + text-align: center;
  74 + width: 70%;
  75 + padding: 68px 0;
  76 + top: 50%;
  77 + left: 50%;
  78 + margin-left: -35%;
  79 + margin-top: -90px;
  80 + background-color: rgba(0, 0, 0, 0.7);
  81 + color: #fff;
  82 + font-size: 36px;
  83 + border: none;
  84 + z-index: 4;
  85 + border-radius: 20px;
  86 +}
  87 +
  88 +@import "layout/lazy-failure";
  89 +@import "layout/loading";
  90 +@import "layout/swiper";
  91 +@import "layout/header";
  92 +@import "layout/footer";