fe / yoho-activity-node · Commits

Go to a project

Authored by 王水玲
Commit d30909191611b3f774682ec9695037a1f6af6f57 1 parent 8540ee8f

星潮教室首页制作

Inline Side-by-side
Showing 11 changed files with 1667 additions and 6 deletions
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
}
html, body {
font-family: helvetica,Arial,"黑体";
width: 100%;
font-size: 100%;
background: #333;
}
body, ul, li {
margin: 0;
padding: 0;
border: 0;
}
ul, li {
list-style: none;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
img {
max-width: 100%;
display: block;
border: 0;
margin: 0 auto;
}
a {
text-decoration: none;
outline: none;
color: #000
}
a:link, a:visited, a:hover, a:actived {
color: #000;
}
*:focus {
outline: none;
}
.head-tab {
width: 100%;
height: 2.2rem;
background: #000;
}
.head-tab li {
width: 25%;
text-align: center;
float: left;
line-height: 2.2rem;
font-size: 0.75rem;
}
.head-tab li a {
color: #b0b0b0;
display: inline-block;
}
.head-tab li.cur a {
color: #fff;
}
.banner-top {
width: 100%;
height: 7.75rem;
margin-top: 0.75rem;
position: relative;
}
.banner-top .banner-swiper {
width: 100%;
height: 7.75rem;
overflow: hidden;
position: relative;
}
.banner-top .banner-swiper ul {
position: relative;
height: 7.75rem;
}
.banner-top .banner-swiper ul li {
float: left;
width: 100%;
height: 7.75rem;
}
.banner-top .banner-swiper ul li img {
width: 100%;
height: 100%;
}
.banner-top .swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 0.5rem;
text-align: center;
z-index: 1;
}
.banner-top .swiper-pagination .pagination-inner {
display: inline-block;
}
.banner-top .swiper-pagination .pagination-inner span {
display: inline-block;
width: 0.35rem;
height: 0.35rem;
background: #fff;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
margin: 0 0.225rem;
border-radius: 50%
}
.banner-top .swiper-pagination .pagination-inner span.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.home-floor-sign {
width: 100%;
height: 5.5rem;
margin-top: 0.75rem;
background: #000;
}
/**
* Swiper 3.0.8
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: June 14, 2015
*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev, .swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
opacity: 0.35;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
cursor: auto;
pointer-events: none;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
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");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
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");
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
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");
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
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");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
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");
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
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");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background: #007aff;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
/* Cube */
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-webkit-filter: blur(50px);
filter: blur(50px);
}
.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
z-index: 0;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
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");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
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");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
body, ul, li {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
body {
line-height: 1.5;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.png-bg {
background: rgba(0,0,0,0);
position: absolute;
cursor: pointer;
}
.page-home {
width: 1.75rem;
height: 1.75rem;
cursor: pointer;
background: url(../img/tag-icon.png) no-repeat;
background-size: contain;
position: fixed;
right: 0.5rem;
bottom: 0.5rem;
z-index: 999;
}
.big-page-swiper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.big-page-swiper>li {
width: 100%;
height: 100%;
float: left;
}
.page-list-swiper {
height: 6.2rem;
overflow: hidden;
padding: 0.5rem 0;
position: absolute;
left: 0;
right: 0;
}
.page-list-swiper ul {
box-sizing: border-box;
}
.swiper-out {
height: 7.2rem;
position: fixed;
bottom: -7.2rem;
left: 0;
right: 0;
background: rgba(0,0,0,0.8);
z-index: 999;
}
.page-list-swiper li {
width: 3.5rem;
float: left;
margin: 0 0.25rem;
position: relative;
}
.page-list-swiper img {
width: 100%;
height: 100%;
vertical-align: middle;
}
.page-jt {
width: 0.5rem;
height: 0.25rem;
background: url(../img/jt-icon.png) no-repeat;
background-size: contain;
position: absolute;
top: -0.5rem;
left: 1.5rem;
display: none;
}
@media screen and (min-width: 768px) {
.swiper-out {
height: 4.225rem;
bottom: -4.225rem;
}
.page-list-swiper {
height: 3.2rem;
}
.page-list-swiper li {
width: 2.525rem;
}
.page-jt {
left: 1.0125rem;
}
}
/*# sourceMappingURL=index.css.map */
... ...
{"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA;IACI,UAAU;IACV,WAAW;CACd","file":"index.css","sourcesContent":["body,ul,li {\n margin: 0;\n padding: 0;\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
{"version":3,"sources":["index.css","_swiper.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["* {\r\n -webkit-tap-highlight-color: rgba(0,0,0,0);\r\n -moz-tap-highlight-color: rgba(0,0,0,0);\r\n tap-highlight-color: rgba(0,0,0,0);\r\n}\r\n\r\nhtml,\r\nbody {\r\n font-family: helvetica,Arial,\"黑体\";\r\n width: 100%;\r\n font-size: 100%;\r\n background: #333;\r\n}\r\n\r\nbody,\r\nul,\r\nli {\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n}\r\n\r\nul,\r\nli {\r\n list-style: none;\r\n}\r\n\r\n.clearfix:before,\r\n.clearfix:after {\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.clearfix:after {\r\n clear: both;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n border: 0;\r\n margin: 0 auto;\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n outline: none;\r\n color: #000;\r\n\r\n &:link,\r\n &:visited,\r\n &:hover,\r\n &:actived {\r\n color: #000;\r\n }\r\n}\r\n\r\n*:focus {\r\n outline: none;\r\n}\r\n\r\n.head-tab {\r\n width: 100%;\r\n height: 88px;\r\n background: #000;\r\n\r\n li {\r\n width: 25%;\r\n text-align: center;\r\n float: left;\r\n line-height: 88px;\r\n font-size: 30px;\r\n\r\n a {\r\n color: #b0b0b0;\r\n display: inline-block;\r\n }\r\n\r\n &.cur a{\r\n color: #fff;\r\n }\r\n }\r\n}\r\n\r\n.banner-top {\r\n width: 100%;\r\n height: 310px;\r\n margin-top: 30px;\r\n position: relative;\r\n\r\n .banner-swiper {\r\n width: 100%;\r\n height: 310px;\r\n overflow: hidden;\r\n position: relative;\r\n\r\n ul {\r\n position: relative;\r\n height: 310px;\r\n\r\n li {\r\n float: left;\r\n width: 100%;\r\n height: 310px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .swiper-pagination {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0.5rem;\r\n text-align: center;\r\n z-index: 1;\r\n\r\n .pagination-inner {\r\n display: inline-block;\r\n\r\n span {\r\n display: inline-block;\r\n width: 0.35rem;\r\n height: 0.35rem;\r\n background: #fff;\r\n opacity: 0.5;\r\n margin: 0 0.225rem;\r\n border-radius: 50%;\r\n\r\n &.swiper-pagination-bullet-active {\r\n background: #fff;\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.home-floor-sign {\r\n width: 100%;\r\n height: 220px;\r\n margin-top: 30px;\r\n background: #000;\r\n}\r\n\r\n\r\n@import \"swiper\";","/**\r\n * Swiper 3.0.8\r\n * Most modern mobile touch slider and framework with hardware accelerated transitions\r\n * \r\n * http://www.idangero.us/swiper/\r\n * \r\n * Copyright 2015, Vladimir Kharlampidi\r\n * The iDangero.us\r\n * http://www.idangero.us/\r\n * \r\n * Licensed under MIT\r\n * \r\n * Released on: June 14, 2015\r\n */\r\n.swiper-container {\r\n margin: 0 auto;\r\n position: relative;\r\n overflow: hidden;\r\n /* Fix of Webkit flickering */\r\n z-index: 1;\r\n}\r\n.swiper-container-no-flexbox .swiper-slide {\r\n float: left;\r\n}\r\n.swiper-container-vertical > .swiper-wrapper {\r\n -webkit-box-orient: vertical;\r\n -moz-box-orient: vertical;\r\n -ms-flex-direction: column;\r\n -webkit-flex-direction: column;\r\n flex-direction: column;\r\n}\r\n.swiper-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n display: -webkit-box;\r\n display: -moz-box;\r\n display: -ms-flexbox;\r\n display: -webkit-flex;\r\n display: flex;\r\n -webkit-transform-style: preserve-3d;\r\n -moz-transform-style: preserve-3d;\r\n -ms-transform-style: preserve-3d;\r\n transform-style: preserve-3d;\r\n -webkit-transition-property: -webkit-transform;\r\n -moz-transition-property: -moz-transform;\r\n -o-transition-property: -o-transform;\r\n -ms-transition-property: -ms-transform;\r\n transition-property: transform;\r\n -webkit-box-sizing: content-box;\r\n -moz-box-sizing: content-box;\r\n box-sizing: content-box;\r\n}\r\n.swiper-container-android .swiper-slide,\r\n.swiper-wrapper {\r\n -webkit-transform: translate3d(0px, 0, 0);\r\n -moz-transform: translate3d(0px, 0, 0);\r\n -o-transform: translate(0px, 0px);\r\n -ms-transform: translate3d(0px, 0, 0);\r\n transform: translate3d(0px, 0, 0);\r\n}\r\n.swiper-container-multirow > .swiper-wrapper {\r\n -webkit-box-lines: multiple;\r\n -moz-box-lines: multiple;\r\n -ms-flex-wrap: wrap;\r\n -webkit-flex-wrap: wrap;\r\n flex-wrap: wrap;\r\n}\r\n.swiper-container-free-mode > .swiper-wrapper {\r\n -webkit-transition-timing-function: ease-out;\r\n -moz-transition-timing-function: ease-out;\r\n -ms-transition-timing-function: ease-out;\r\n -o-transition-timing-function: ease-out;\r\n transition-timing-function: ease-out;\r\n margin: 0 auto;\r\n}\r\n.swiper-slide {\r\n -webkit-transform-style: preserve-3d;\r\n -moz-transform-style: preserve-3d;\r\n -ms-transform-style: preserve-3d;\r\n transform-style: preserve-3d;\r\n -webkit-flex-shrink: 0;\r\n -ms-flex: 0 0 auto;\r\n flex-shrink: 0;\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n}\r\n/* a11y */\r\n.swiper-container .swiper-notification {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n pointer-events: none;\r\n opacity: 0;\r\n z-index: -1000;\r\n}\r\n/* IE10 Windows Phone 8 Fixes */\r\n.swiper-wp8-horizontal {\r\n -ms-touch-action: pan-y;\r\n touch-action: pan-y;\r\n}\r\n.swiper-wp8-vertical {\r\n -ms-touch-action: pan-x;\r\n touch-action: pan-x;\r\n}\r\n/* Arrows */\r\n.swiper-button-prev,\r\n.swiper-button-next {\r\n position: absolute;\r\n top: 50%;\r\n width: 27px;\r\n height: 44px;\r\n margin-top: -22px;\r\n z-index: 10;\r\n cursor: pointer;\r\n -moz-background-size: 27px 44px;\r\n -webkit-background-size: 27px 44px;\r\n background-size: 27px 44px;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n}\r\n.swiper-button-prev.swiper-button-disabled,\r\n.swiper-button-next.swiper-button-disabled {\r\n opacity: 0.35;\r\n cursor: auto;\r\n pointer-events: none;\r\n}\r\n.swiper-button-prev,\r\n.swiper-container-rtl .swiper-button-next {\r\n 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\");\r\n left: 10px;\r\n right: auto;\r\n}\r\n.swiper-button-prev.swiper-button-black,\r\n.swiper-container-rtl .swiper-button-next.swiper-button-black {\r\n 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\");\r\n}\r\n.swiper-button-prev.swiper-button-white,\r\n.swiper-container-rtl .swiper-button-next.swiper-button-white {\r\n 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\");\r\n}\r\n.swiper-button-next,\r\n.swiper-container-rtl .swiper-button-prev {\r\n 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\");\r\n right: 10px;\r\n left: auto;\r\n}\r\n.swiper-button-next.swiper-button-black,\r\n.swiper-container-rtl .swiper-button-prev.swiper-button-black {\r\n 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\");\r\n}\r\n.swiper-button-next.swiper-button-white,\r\n.swiper-container-rtl .swiper-button-prev.swiper-button-white {\r\n 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\");\r\n}\r\n/* Pagination Styles */\r\n.swiper-pagination {\r\n position: absolute;\r\n text-align: center;\r\n -webkit-transition: 300ms;\r\n -moz-transition: 300ms;\r\n -o-transition: 300ms;\r\n transition: 300ms;\r\n -webkit-transform: translate3d(0, 0, 0);\r\n -ms-transform: translate3d(0, 0, 0);\r\n -o-transform: translate3d(0, 0, 0);\r\n transform: translate3d(0, 0, 0);\r\n z-index: 10;\r\n}\r\n.swiper-pagination.swiper-pagination-hidden {\r\n opacity: 0;\r\n}\r\n.swiper-pagination-bullet {\r\n width: 8px;\r\n height: 8px;\r\n display: inline-block;\r\n border-radius: 100%;\r\n background: #000;\r\n opacity: 0.2;\r\n}\r\n.swiper-pagination-clickable .swiper-pagination-bullet {\r\n cursor: pointer;\r\n}\r\n.swiper-pagination-white .swiper-pagination-bullet {\r\n background: #fff;\r\n}\r\n.swiper-pagination-bullet-active {\r\n opacity: 1;\r\n background: #007aff;\r\n}\r\n.swiper-pagination-white .swiper-pagination-bullet-active {\r\n background: #fff;\r\n}\r\n.swiper-pagination-black .swiper-pagination-bullet-active {\r\n background: #000;\r\n}\r\n.swiper-container-vertical > .swiper-pagination {\r\n right: 10px;\r\n top: 50%;\r\n -webkit-transform: translate3d(0px, -50%, 0);\r\n -moz-transform: translate3d(0px, -50%, 0);\r\n -o-transform: translate(0px, -50%);\r\n -ms-transform: translate3d(0px, -50%, 0);\r\n transform: translate3d(0px, -50%, 0);\r\n}\r\n.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {\r\n margin: 5px 0;\r\n display: block;\r\n}\r\n.swiper-container-horizontal > .swiper-pagination {\r\n bottom: 10px;\r\n left: 0;\r\n width: 100%;\r\n}\r\n.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {\r\n margin: 0 5px;\r\n}\r\n/* 3D Container */\r\n.swiper-container-3d {\r\n -webkit-perspective: 1200px;\r\n -moz-perspective: 1200px;\r\n -o-perspective: 1200px;\r\n perspective: 1200px;\r\n}\r\n.swiper-container-3d .swiper-wrapper,\r\n.swiper-container-3d .swiper-slide,\r\n.swiper-container-3d .swiper-slide-shadow-left,\r\n.swiper-container-3d .swiper-slide-shadow-right,\r\n.swiper-container-3d .swiper-slide-shadow-top,\r\n.swiper-container-3d .swiper-slide-shadow-bottom,\r\n.swiper-container-3d .swiper-cube-shadow {\r\n -webkit-transform-style: preserve-3d;\r\n -moz-transform-style: preserve-3d;\r\n -ms-transform-style: preserve-3d;\r\n transform-style: preserve-3d;\r\n}\r\n.swiper-container-3d .swiper-slide-shadow-left,\r\n.swiper-container-3d .swiper-slide-shadow-right,\r\n.swiper-container-3d .swiper-slide-shadow-top,\r\n.swiper-container-3d .swiper-slide-shadow-bottom {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 10;\r\n}\r\n.swiper-container-3d .swiper-slide-shadow-left {\r\n background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));\r\n /* Safari 4+, Chrome */\r\n background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Chrome 10+, Safari 5.1+, iOS 5+ */\r\n background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 3.6-15 */\r\n background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Opera 11.10-12.00 */\r\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 16+, IE10, Opera 12.50+ */\r\n}\r\n.swiper-container-3d .swiper-slide-shadow-right {\r\n background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));\r\n /* Safari 4+, Chrome */\r\n background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Chrome 10+, Safari 5.1+, iOS 5+ */\r\n background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 3.6-15 */\r\n background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Opera 11.10-12.00 */\r\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 16+, IE10, Opera 12.50+ */\r\n}\r\n.swiper-container-3d .swiper-slide-shadow-top {\r\n background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));\r\n /* Safari 4+, Chrome */\r\n background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Chrome 10+, Safari 5.1+, iOS 5+ */\r\n background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 3.6-15 */\r\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Opera 11.10-12.00 */\r\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 16+, IE10, Opera 12.50+ */\r\n}\r\n.swiper-container-3d .swiper-slide-shadow-bottom {\r\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));\r\n /* Safari 4+, Chrome */\r\n background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Chrome 10+, Safari 5.1+, iOS 5+ */\r\n background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 3.6-15 */\r\n background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Opera 11.10-12.00 */\r\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\r\n /* Firefox 16+, IE10, Opera 12.50+ */\r\n}\r\n/* Coverflow */\r\n.swiper-container-coverflow .swiper-wrapper {\r\n /* Windows 8 IE 10 fix */\r\n -ms-perspective: 1200px;\r\n}\r\n/* Fade */\r\n.swiper-container-fade.swiper-container-free-mode .swiper-slide {\r\n -webkit-transition-timing-function: ease-out;\r\n -moz-transition-timing-function: ease-out;\r\n -ms-transition-timing-function: ease-out;\r\n -o-transition-timing-function: ease-out;\r\n transition-timing-function: ease-out;\r\n}\r\n.swiper-container-fade .swiper-slide {\r\n pointer-events: none;\r\n}\r\n.swiper-container-fade .swiper-slide .swiper-slide {\r\n pointer-events: none;\r\n}\r\n.swiper-container-fade .swiper-slide-active,\r\n.swiper-container-fade .swiper-slide-active .swiper-slide-active {\r\n pointer-events: auto;\r\n}\r\n/* Cube */\r\n.swiper-container-cube {\r\n overflow: visible;\r\n}\r\n.swiper-container-cube .swiper-slide {\r\n pointer-events: none;\r\n visibility: hidden;\r\n -webkit-transform-origin: 0 0;\r\n -moz-transform-origin: 0 0;\r\n -ms-transform-origin: 0 0;\r\n transform-origin: 0 0;\r\n -webkit-backface-visibility: hidden;\r\n -moz-backface-visibility: hidden;\r\n -ms-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n.swiper-container-cube.swiper-container-rtl .swiper-slide {\r\n -webkit-transform-origin: 100% 0;\r\n -moz-transform-origin: 100% 0;\r\n -ms-transform-origin: 100% 0;\r\n transform-origin: 100% 0;\r\n}\r\n.swiper-container-cube .swiper-slide-active,\r\n.swiper-container-cube .swiper-slide-next,\r\n.swiper-container-cube .swiper-slide-prev,\r\n.swiper-container-cube .swiper-slide-next + .swiper-slide {\r\n pointer-events: auto;\r\n visibility: visible;\r\n}\r\n.swiper-container-cube .swiper-cube-shadow {\r\n position: absolute;\r\n left: 0;\r\n bottom: 0px;\r\n width: 100%;\r\n height: 100%;\r\n background: #000;\r\n opacity: 0.6;\r\n -webkit-filter: blur(50px);\r\n filter: blur(50px);\r\n}\r\n.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {\r\n z-index: 0;\r\n}\r\n/* Scrollbar */\r\n.swiper-scrollbar {\r\n border-radius: 10px;\r\n position: relative;\r\n -ms-touch-action: none;\r\n background: rgba(0, 0, 0, 0.1);\r\n}\r\n.swiper-container-horizontal > .swiper-scrollbar {\r\n position: absolute;\r\n left: 1%;\r\n bottom: 3px;\r\n z-index: 50;\r\n height: 5px;\r\n width: 98%;\r\n}\r\n.swiper-container-vertical > .swiper-scrollbar {\r\n position: absolute;\r\n right: 3px;\r\n top: 1%;\r\n z-index: 50;\r\n width: 5px;\r\n height: 98%;\r\n}\r\n.swiper-scrollbar-drag {\r\n height: 100%;\r\n width: 100%;\r\n position: relative;\r\n background: rgba(0, 0, 0, 0.5);\r\n border-radius: 10px;\r\n left: 0;\r\n top: 0;\r\n}\r\n.swiper-scrollbar-cursor-drag {\r\n cursor: move;\r\n}\r\n/* Preloader */\r\n.swiper-lazy-preloader {\r\n width: 42px;\r\n height: 42px;\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n margin-left: -21px;\r\n margin-top: -21px;\r\n z-index: 10;\r\n -webkit-transform-origin: 50%;\r\n -moz-transform-origin: 50%;\r\n transform-origin: 50%;\r\n -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;\r\n -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;\r\n animation: swiper-preloader-spin 1s steps(12, end) infinite;\r\n}\r\n.swiper-lazy-preloader:after {\r\n display: block;\r\n content: \"\";\r\n width: 100%;\r\n height: 100%;\r\n 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\");\r\n background-position: 50%;\r\n -webkit-background-size: 100%;\r\n background-size: 100%;\r\n background-repeat: no-repeat;\r\n}\r\n.swiper-lazy-preloader-white:after {\r\n 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\");\r\n}\r\n@-webkit-keyframes swiper-preloader-spin {\r\n 100% {\r\n -webkit-transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes swiper-preloader-spin {\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n\r\n\r\nbody,ul,li {\r\n margin: 0;\r\n padding:0;\r\n}\r\n\r\nul,li{\r\n list-style: none;\r\n}\r\n\r\nbody {\r\n line-height: 1.5;\r\n -webkit-tap-highlight-color:rgba(0,0,0,0);\r\n}\r\n\r\n.png-bg {\r\n background:rgba(0,0,0,0);\r\n position: absolute;\r\n cursor: pointer;\r\n}\r\n\r\n.page-home {\r\n width: 1.75rem;\r\n height: 1.75rem;\r\n cursor: pointer;\r\n background: url(../img/tag-icon.png) no-repeat;\r\n background-size: contain;\r\n position: fixed;\r\n right: 0.5rem;\r\n bottom: 0.5rem;\r\n z-index: 999;\r\n}\r\n\r\n.big-page-swiper {\r\n overflow: hidden;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n}\r\n\r\n.big-page-swiper>li {\r\n width: 100%;\r\n height: 100%;\r\n float: left;\r\n}\r\n\r\n.page-list-swiper {\r\n height: 6.2rem;\r\n overflow: hidden;\r\n padding: 0.5rem 0;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n}\r\n\r\n.page-list-swiper ul {\r\n box-sizing: border-box;\r\n}\r\n\r\n.swiper-out{\r\n height: 7.2rem;\r\n position: fixed;\r\n bottom: -7.2rem;\r\n left: 0;\r\n right: 0;\r\n background: rgba(0,0,0,0.8);\r\n z-index: 999;\r\n}\r\n\r\n.page-list-swiper li {\r\n width: 3.5rem;\r\n float: left;\r\n margin: 0 0.25rem;\r\n position: relative;\r\n}\r\n\r\n.page-list-swiper img {\r\n width: 100%;\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.page-jt {\r\n width: 0.5rem;\r\n height: 0.25rem;\r\n background: url(../img/jt-icon.png) no-repeat;\r\n background-size: contain;\r\n position: absolute;\r\n top: -0.5rem;\r\n left: 1.5rem;\r\n display: none;\r\n}\r\n\r\n@media screen and (min-width: 768px) {\r\n .swiper-out{\r\n height: 4.225rem;\r\n bottom:-4.225rem;\r\n }\r\n\r\n .page-list-swiper{\r\n height: 3.2rem;\r\n }\r\n\r\n .page-list-swiper li{\r\n width: 2.525rem;\r\n }\r\n\r\n .page-jt{\r\n left: 1.0125rem;\r\n }\r\n}"],"sourceRoot":"/source/"}
\ No newline at end of file
... ...
require('./js/header');
require('./js/banner-top');
... ...
var $ = require('jquery'),
Swiper = require('swiper');
var bannerSwiper;
$(function() {
if ($('.banner-swiper').find('li').size() > 1) {
bannerSwiper = new Swiper('.banner-swiper', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 3000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
});
}
})
\ No newline at end of file
... ...
/**
* Swiper 3.0.8
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: June 14, 2015
*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
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");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
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");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
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");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
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");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
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");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
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");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
/* Cube */
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
}
.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
z-index: 0;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
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");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
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");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
body,ul,li {
margin: 0;
padding:0;
}
ul,li{
list-style: none;
}
body {
line-height: 1.5;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.png-bg {
background:rgba(0,0,0,0);
position: absolute;
cursor: pointer;
}
.page-home {
width: 1.75rem;
height: 1.75rem;
cursor: pointer;
background: url(../img/tag-icon.png) no-repeat;
background-size: contain;
position: fixed;
right: 0.5rem;
bottom: 0.5rem;
z-index: 999;
}
.big-page-swiper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.big-page-swiper>li {
width: 100%;
height: 100%;
float: left;
}
.page-list-swiper {
height: 6.2rem;
overflow: hidden;
padding: 0.5rem 0;
position: absolute;
left: 0;
right: 0;
}
.page-list-swiper ul {
box-sizing: border-box;
}
.swiper-out{
height: 7.2rem;
position: fixed;
bottom: -7.2rem;
left: 0;
right: 0;
background: rgba(0,0,0,0.8);
z-index: 999;
}
.page-list-swiper li {
width: 3.5rem;
float: left;
margin: 0 0.25rem;
position: relative;
}
.page-list-swiper img {
width: 100%;
height: 100%;
vertical-align: middle;
}
.page-jt {
width: 0.5rem;
height: 0.25rem;
background: url(../img/jt-icon.png) no-repeat;
background-size: contain;
position: absolute;
top: -0.5rem;
left: 1.5rem;
display: none;
}
@media screen and (min-width: 768px) {
.swiper-out{
height: 4.225rem;
bottom:-4.225rem;
}
.page-list-swiper{
height: 3.2rem;
}
.page-list-swiper li{
width: 2.525rem;
}
.page-jt{
left: 1.0125rem;
}
}
\ No newline at end of file
... ...
body,ul,li {
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
}
html,
body {
font-family: helvetica,Arial,"黑体";
width: 100%;
font-size: 100%;
background: #333;
}
body,
ul,
li {
margin: 0;
padding: 0;
}
\ No newline at end of file
border: 0;
}
ul,
li {
list-style: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
img {
max-width: 100%;
display: block;
border: 0;
margin: 0 auto;
}
a {
text-decoration: none;
outline: none;
color: #000;
&:link,
&:visited,
&:hover,
&:actived {
color: #000;
}
}
*:focus {
outline: none;
}
.head-tab {
width: 100%;
height: 88px;
background: #000;
li {
width: 25%;
text-align: center;
float: left;
line-height: 88px;
font-size: 30px;
a {
color: #b0b0b0;
display: inline-block;
}
&.cur a{
color: #fff;
}
}
}
.banner-top {
width: 100%;
height: 310px;
margin-top: 30px;
position: relative;
.banner-swiper {
width: 100%;
height: 310px;
overflow: hidden;
position: relative;
ul {
position: relative;
height: 310px;
li {
float: left;
width: 100%;
height: 310px;
img {
width: 100%;
height: 100%;
}
}
}
}
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 0.5rem;
text-align: center;
z-index: 1;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 0.35rem;
height: 0.35rem;
background: #fff;
opacity: 0.5;
margin: 0 0.225rem;
border-radius: 50%;
&.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
}
}
.home-floor-sign {
width: 100%;
height: 220px;
margin-top: 30px;
background: #000;
}
@import "swiper";
\ No newline at end of file
... ...
... ... @@ -23,7 +23,34 @@ exports.index = (req, res) => {
title: '星潮教室',
module: 'star-classroom',
version: '0.0.1',
headTab: ['全部', '星专题', '星搭配', '星鲜事']
headTab: [
{name: '全部', url: '#', cur: true},
{name: '星专题', url: '#'},
{name: '星搭配', url: '#'},
{name: '星鲜事', url: '#'},
],
bannerList: [
{
url:'http://feature.yoho.cn/0328/0328DAILYBOY/index.html?title=出游场景模拟变装趴&share_id=870',
img: 'http://img11.static.yhbimg.com/yhb-img01/2016/03/28/08/01b36610904562fd3085090f55aeca66df.jpg?imageView/2/w/640/h/240'
},
{
url:'http://designer.yoho.cn/bill?title=晒晒你的潮流清单&share_id=898',
img: 'http://img11.static.yhbimg.com/yhb-img01/2016/04/01/05/010cb10578a55206faff271bceb0f22aaf.jpg?imageView/2/w/640/h/240'
},
{
url:'http://feature.yoho.cn/NEWS/0331APPWEEKNEWSBOY/index.html?title=一周速报&share_id=882',
img: 'http://img11.static.yhbimg.com/yhb-img01/2016/03/31/03/01337e43ca91484214c4b5b2becc0ef13d.jpg?imageView/2/w/640/h/240'
},
{
url:'http://sale.m.yohobuy.com/?specialsale_id=14&gender=1,3',
img: 'http://img12.static.yhbimg.com/yhb-img01/2016/04/01/08/02c78a28a9ca1dc585d614b195abff3eb1.jpg?imageView/2/w/640/h/240'
},
{
url:'http://sale.m.yohobuy.com/?specialsale_id=11&gender=1,3',
img: 'http://img12.static.yhbimg.com/yhb-img01/2016/03/28/04/02ca2b986e193f7134d2f75c74f8169ec3.jpg?imageView/2/w/640/h/240'
}
]
// wxLottery: data
});
... ...
{{> star-classroom/head-tab}}
{{> star-classroom/banner-top}}
{{> star-classroom/home-floor-sign}}
\ No newline at end of file
... ...
<div class="banner-top">
<div class="banner-swiper swiper-container">
<ul class="swiper-wrapper">
{{#each bannerList}}
{{#if @first}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{img}}">
</a>
</li>
{{^}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/if}}
{{/each}}
</ul>
</div>
<div class="swiper-pagination">
<div class="pagination-inner">
</div>
</div>
</div>
\ No newline at end of file
... ...
<ul class="1">
<ul class="head-tab">
{{#each headTab}}
<li>{{ this }}</li>
<li {{#if cur}} class="cur" {{/if}}><a href="{{ url }}">{{ name }}</a></li>
{{/each}}
</ul>
... ...
<div class="home-floor-sign">
</div>
\ No newline at end of file
... ...