fe / yohobuy-node · Commits

Go to a project

Authored by 毕凯
Commit b8757b7a45aa5b694ac42864b716f492c7844258 1 parent 5607aa64

css 整理

Inline Side-by-side
Showing 19 changed files with 527 additions and 499 deletions
... ... @@ -8,13 +8,8 @@ module.exports = app => {
// 公共服务
// 专题活动等活动页面
// app.use(require('./apps/activity'));
// 业务模块
// app.use('/', require('./apps/index'));
app.use(require('./apps/channel')); // 频道页
app.use(require('./apps/activity')); // 专题活动等活动页面
app.use('/product', require('./apps/product'));
// 频道页
// app.use('/', require('./apps/channel'));
};
... ...
<div class="slide-container {{#if pagination}}slide-thumb-container{{/if}}">
<div class="slide-wrapper">
<ul>
{{# list}}
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{href}}" target= "_blank">
{{#if @first}}
<img src="{{image img 1150 450}}">
{{^}}
<img class="lazy" data-original="{{image img 1150 450}}" alt="">
{{/if}}
</a>
{{# tips}}
<div class="slide-tips">
<div class="g-mark"></div>
<p>{{.}}</p>
</div>
{{/ tips}}
</li>
{{/ list}}
</ul>
</div>
<ul>
{{# list}}
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{href}}" target= "_blank">
{{#if @first}}
<img src="{{image img 1150 450}}">
{{^}}
<img class="lazy" data-original="{{image img 1150 450}}" alt="">
{{/if}}
</a>
{{# tips}}
<div class="slide-tips">
<div class="g-mark"></div>
<p>{{.}}</p>
</div>
{{/ tips}}
</li>
{{/ list}}
</ul>
{{#if pagination}}
<div class="thumb-pagination">
<ul class="clearfix">
{{# pagination}}
<li>
<li data-slide="{{@index}}">
<a href="{{href}}" target="_blank"></a>
<img src="{{image img 138 54}}" alt="">
</li>
... ...
... ... @@ -93,6 +93,7 @@
"yoho-handlebars": "^4.0.5",
"yoho-jquery": "^1.12.4",
"yoho-jquery-lazyload": "^1.9.7",
"yoho-slider": "0.0.2",
"yoho-swiper": "^3.3.1"
}
}
... ...
... ... @@ -12,8 +12,8 @@ var homePage = $('.home-page').data('page'),
require('../common');
require('../plugins/slider');
require('../plugins/slider2');
// require('../plugins/slider');
// require('../plugins/slider2');
require('../plugins/logo-brand');
require('../plugins/accordion');
... ... @@ -39,13 +39,9 @@ if ($.inArray(homePage, ['boys', 'girls', 'kids', 'lifestyle']) > -1) {
});
}
lazyLoad($('img.lazy'));
if (homePage === 'boys') {
$('.slide-container').slider({
pagination: '.thumb-pagination'
});
require('../common/top-slider');
} else {
$('.center-col').slider();
$('.slide-container').slider();
... ... @@ -55,11 +51,13 @@ if (homePage === 'boys') {
$('.logo-brand').logoBrand({
url: brandUrl
});
$('.img-brand').slider2();
// $('.img-brand').slider2();
} else {
$('.logo-brand').logoBrand({
showNum: 10,
url: brandUrl
});
$('.img-slider-wrapper').slider2();
// $('.img-slider-wrapper').slider2();
}
... ...
var $ = require('yoho-jquery');
window.jQuery = $;
require('yoho-slider');
$(function() {
var topSlider = $('.slide-container').unslider({
autoplay: true,
delay: 5000,
arrows: {
},
nav: false,
animate: 'fade',
pagination: '.thumb-pagination'
});
var $thumbPagination = $('.thumb-pagination');
$thumbPagination.on('mouseenter', 'li', function() {
var $this = $(this);
topSlider.unslider('animate:' + $this.data('slide'));
});
topSlider.on('unslider.change', function(event, index) {
$thumbPagination.find('[data-slide="' + index + '"]').addClass('focus').siblings().removeClass('focus');
});
$thumbPagination.find('li').first().addClass('focus');
});
... ...
... ... @@ -2,6 +2,7 @@
width: 1150px;
margin: 10px auto 0;
/*
.slide-container {
position: absolute;
left: 0;
... ... @@ -99,6 +100,7 @@
}
}
*/
.thumb-pagination {
width: 1148px;
margin: 6px auto 0;
... ... @@ -169,6 +171,7 @@
}
}
*/
.debris-slider {
height: 510px;
width: 100%;
... ...
@use postcss-clearfix ;
/* Reset End */
.clearfix {
clear: fix;
}
body {
font-family: arial, "Microsoft YaHei";
}
@font-face {
font-family: "iconfont";
src: resolve('iconfont.eot');
src: resolve('iconfont.eot?#iefix') format('embedded-opentype'), resolve('iconfont.woff') format('woff'), resolve('iconfont.ttf') format('truetype'), resolve('iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.center-content {
width: 1150px;
margin-left: auto;
margin-right: auto;
}
.min-screen .center-content {
width: 990px;
}
.left,
.pull-left {
float: left;
}
.right,
.pull-right {
float: right;
}
.center {
text-align: center;
}
.hide {
display: none !important;
}
a:focus,
input,
textarea {
outline: none;
}
a {
text-decoration: none;
color: #000;
}
.body-mask {
position: absolute;
z-index: 100;
background: #000;
opacity: 0.2;
top: 0;
left: 0;
}
@define-mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
公共样式
*/
.g-list {
li {
float: left;
a {
position: relative;
display: block;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
}
}
.yoho-page {
.floor-header {
position: relative;
margin: 80px 0 40px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 15px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
}
/*
热门推荐模板样式
*/
.home-page {
.tpl-recommend {
width: 100%;
position: relative;
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
.tpl-body {
margin-bottom: 8px;
}
.tpl-nav {
float: left;
overflow: hidden;
.tpl-keywords {
margin-bottom: 8px;
}
.tpl-category {
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a {
float: left;
width: 50%;
text-align: center;
color: #000;
overflow: hidden;
}
}
}
.tpl-brands {
float: left;
overflow: hidden;
margin-left: 8px;
li {
margin-top: 8px;
}
}
.tpl-types {
float: left;
overflow: hidden;
margin-top: -8px;
width: 579px;
li {
float: left;
margin-left: 8px;
margin-top: 8px;
a {
width: 185px;
height: 248px;
}
}
}
.tpl-products {
overflow: hidden;
margin-left: -10px;
li {
float: left;
margin-left: 10px;
a {
width: 222px;
height: 298px;
}
}
}
.tpl-nav {
width: 185px;
.keywords0,
.keywords1,
.keywords2 {
margin-bottom: 10px;
height: 76px;
}
.keywords2 {
margin-bottom: 0;
}
.tpl-category {
height: 228px;
a {
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands {
width: 378px;
height: 512px;
li a {
height: 248px;
}
}
}
}
/*
人气单品
*/
.home-page .flash-sale {
.flash-sale-list {
margin-left: -10px;
a {
height: 340px;
width: 560px;
}
li {
margin: 10px;
}
.flash-sale-banner {
position: relative;
height: 260px;
}
.flash-sale-bottom {
height: 78px;
position: relative;
border: 1px solid #000;
border-top-style: none;
}
p.flash-sale-count {
position: absolute;
left: 50px;
top: 20px;
}
p.flash-sale-name {
position: absolute;
left: 120px;
top: 20px;
}
p.flash-sale-timer {
position: absolute;
left: 50px;
top: 50px;
}
.flash-sale-logo {
position: absolute;
right: 50px;
width: 100px;
height: 80px;
img {
width: 100px;
height: 50px;
margin-top: 15px;
}
}
}
}
... ...
/*
公共样式
*/
.g-list {
li {
float: left;
a {
position: relative;
display: block;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
}
}
.yoho-page {
.floor-header {
position: relative;
margin: 80px 0 40px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 15px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
}
/*
热门推荐模板样式
*/
.home-page {
.tpl-recommend {
width: 100%;
position: relative;
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
.tpl-body {
margin-bottom: 8px;
}
.tpl-nav {
float: left;
overflow: hidden;
.tpl-keywords {
margin-bottom: 8px;
}
.tpl-category {
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a {
float: left;
width: 50%;
text-align: center;
color: #000;
overflow: hidden;
}
}
}
.tpl-brands {
float: left;
overflow: hidden;
margin-left: 8px;
li {
margin-top: 8px;
}
}
.tpl-types {
float: left;
overflow: hidden;
margin-top: -8px;
width: 579px;
li {
float: left;
margin-left: 8px;
margin-top: 8px;
a {
width: 185px;
height: 248px;
}
}
}
.tpl-products {
overflow: hidden;
margin-left: -10px;
li {
float: left;
margin-left: 10px;
a {
width: 222px;
height: 298px;
}
}
}
.tpl-nav {
width: 185px;
.keywords0,
.keywords1,
.keywords2 {
margin-bottom: 10px;
height: 76px;
}
.keywords2 {
margin-bottom: 0;
}
.tpl-category {
height: 228px;
a {
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands {
width: 378px;
height: 512px;
li a {
height: 248px;
}
}
}
}
/*
人气单品
*/
.home-page .flash-sale {
.flash-sale-list {
margin-left: -10px;
a {
height: 340px;
width: 560px;
}
li {
margin: 10px;
}
.flash-sale-banner {
position: relative;
height: 260px;
}
.flash-sale-bottom {
height: 78px;
position: relative;
border: 1px solid #000;
border-top-style: none;
}
p.flash-sale-count {
position: absolute;
left: 50px;
top: 20px;
}
p.flash-sale-name {
position: absolute;
left: 120px;
top: 20px;
}
p.flash-sale-timer {
position: absolute;
left: 50px;
top: 50px;
}
.flash-sale-logo {
position: absolute;
right: 50px;
width: 100px;
height: 80px;
img {
width: 100px;
height: 50px;
margin-top: 15px;
}
}
}
}
@import "reset";
@import "common";
@import "header";
@import "footer";
@import "slider";
@import "404";
... ...
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q,
blockquote {
quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
... ...
.unslider{overflow:auto;margin:0;padding:0}.unslider-wrap{position:relative}.unslider-wrap.unslider-carousel>li{float:left}.unslider-vertical>ul{height:100%}.unslider-vertical li{float:none;width:100%}.unslider-fade{position:relative}.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}.unslider-fade .unslider-wrap li.unslider-active{z-index:10}.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}.unslider-arrow.next{left:auto;right:20px}
\ No newline at end of file
... ...
@charset "utf-8";
@use postcss-clearfix ;
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q,
blockquote {
quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/* Reset End */
.clearfix {
clear: fix;
}
body {
font-family: arial, "Microsoft YaHei";
}
@font-face {
font-family: "iconfont";
src: resolve('iconfont.eot');
src: resolve('iconfont.eot?#iefix') format('embedded-opentype'), resolve('iconfont.woff') format('woff'), resolve('iconfont.ttf') format('truetype'), resolve('iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.center-content {
width: 1150px;
margin-left: auto;
margin-right: auto;
}
.min-screen .center-content {
width: 990px;
}
.left,
.pull-left {
float: left;
}
.right,
.pull-right {
float: right;
}
.center {
text-align: center;
}
.hide {
display: none !important;
}
a:focus,
input,
textarea {
outline: none;
}
a {
text-decoration: none;
color: #000;
}
.body-mask {
position: absolute;
z-index: 100;
background: #000;
opacity: 0.2;
top: 0;
left: 0;
}
@define-mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 公共 */
@import "header";
@import "footer";
@import "404";
@import "index/index";
@import "product/index";
@import "plugins/slider";
@import "common/index";
/* 模块 */
@import "index/index";
@import "channel/index";
@import "product/index";
... ...
... ... @@ -320,6 +320,6 @@
}
}
@import "channel";
/* @import "channel"; */
@import "special";
@import "main-product";
... ...