fe / yohobuy-mobile · Commits

Go to a project

Authored by 梁志锋
Commit 220afb71a00a87ab5feeee6e4e0c6444eef1af1c 1 parent 0d4887df

merge feature/newFestival

Inline Side-by-side
Showing 73 changed files with 2536 additions and 0 deletions
*.iml
.idea/
.ipr
.iws
*~
~*
*.diff
*.patch
*.bak
.DS_Store
Thumbs.db
.project
.*proj
.svn/
*.swp
*.swo
*.pyc
*.pyo
.build
node_modules
_site
sea-modules
spm_modules
.cache
dist
coverage
public/css
.sass-cache
\ No newline at end of file
... ...
dist
_site
sea-modules
spm_modules
node_modules
.git
tests
examples
test
coverage
... ...
language: node_js
node_js:
- "0.10"
install:
- npm install spm coveralls
before_script:
- node_modules/spm/bin/spm-install
script:
- node_modules/spm/bin/spm-test
after_success:
- node_modules/spm/bin/spm-test --coveralls | node_modules/.bin/coveralls
... ...
# History
---
## 0.0.1
`new` It is the first version of new-festival.
... ...
# new-festival [![spm version](http://spm.yoho.cn/badge/new-festival)](http://spm.yoho.cn/package/new-festival)
---
新品节
## Install
```
$ spm install new-festival --save
```
## Usage
```js
var newFestival = require('new-festival');
// use newFestival
```
... ...
/**
* Node服务端入口文件
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/27
*/
var express = require('express'),
path = require('path'),
hbs = require('hbs'),
bodyParser = require('body-parser'),
app = express();
//configuration
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);
hbs.registerPartials(__dirname + '/views/partials');
//middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(path.join(__dirname, '/public')));
//router
require('./router')(app);
//server
app.listen(5000, function() {
console.log('server start');
});
module.exports = app;
\ No newline at end of file
... ...
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/css"
sass_dir = "public/sass"
images_dir = "public/img"
javascripts_dir = "public/js"
fonts_dir = "public/fonts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Encoding.default_external = "utf-8"
\ No newline at end of file
... ...
var gulp = require('gulp'),
fs = require('fs'),
ftp = require('gulp-ftp'),
gutil = require('gulp-util'),
concat = require('gulp-concat'),
compass = require('gulp-compass'),
exec = require('child_process').exec,
uglify = require('gulp-uglify'),
Package = require('father').SpmPackage,
transport = require('gulp-spm'),
server = require('gulp-develop-server');
var config = JSON.parse(fs.readFileSync('./package.json').toString());
var assets_dir = 'dist/yoho-mobile/' + config.name + '/assets';
var dist_dir = {
js: 'dist/yoho-mobile/' + config.name + '/' + config.version,
css: 'dist/yoho-mobile/' + config.name + '/' + config.version,
image: assets_dir + '/images',
font: assets_dir + '/fonts'
};
var ftpConfig = {
host: '218.94.75.58',
user: 'php',
pass: 'yoho9646'
};
// 本地运行时
// 启动
gulp.task('default', ['server', 'server:restart', 'compass-watch', 'compass']);
// start express server
gulp.task('server', function() {
server.listen({
path: 'app.js'
});
});
// restart server if app.js changed
gulp.task('server:restart', function() {
gulp.watch([
'app.js', 'views/**/*.html', 'views/controller/*.js',
'layouts/*.html', 'public/css/*.css', 'public/js/data.js'
], server.restart);
});
//compass 解析压缩合并
gulp.task('compass-watch', function() {
gulp.watch('public/sass/**/*.scss', ['compass']);
});
gulp.task('compass', function() {
gulp.src('public/sass/**/*.scss')
.pipe(
compass({
config_file: 'config.rb',
css: 'public/css',
sass: 'public/sass'
})
)
});
//发布
//发布到CND
gulp.task('dist', function() {
var ftpstream = ftp(ftpConfig);
return gulp.src('dist/**/')
.pipe(ftpstream)
.pipe(gutil.noop());
});
//STEP1:拷贝fonts+images到发布目录
gulp.task('assets', function() {
gulp.src('public/img/**')
.pipe(gulp.dest(dist_dir.image));
gulp.src('public/fonts/*')
.pipe(gulp.dest(dist_dir.font));
});
//STEP2:compass整合所有css到index后发布到发布目录
gulp.task('compass-production', function() {
gulp.src('public/sass/index.scss')
.pipe(
compass({
css: dist_dir.css,
sass: 'public/sass',
image: dist_dir.image,
font: dist_dir.font,
http_path: '/',
style: 'compressed'
})
)
.on('error', function(error) {
console.log(error);
this.emit('end');
});
});
//STEP3: build
gulp.task('build', function() {
var pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(concat('index-debug.js'))
.pipe(gulp.dest(dist_dir.js))
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest(dist_dir.js));
});
\ No newline at end of file
... ...
var newFestival;
require('./public/js/brand');
require('./public/js/new-festival');
module.exports = newFestival;
... ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
<meta content="telephone=no" name="format-detection">
{{> header}}
</head>
<body>
{{{body}}}
</body>
{{> footer}}
</html>
\ No newline at end of file
... ...
{
"name": "new-festival",
"version": "0.0.1",
"description": "新品节",
"keywords": [],
"homepage": "",
"author": "xuqi <xuqi9010@gmail.com>",
"repository": {
"type": "git",
"url": ""
},
"licenses": "MIT",
"spm": {
"main": "index.js",
"dependencies": {
"jquery": "1.8.3",
"lazyload": "1.9.6",
"mustache": "2.0.0",
"yoho-idangerous.swiper": "0.0.3"
},
"devDependencies": {
"expect.js": "0.3.1"
},
"buildArgs": "--idleading {{}}"
},
"devDependencies": {
"spm": "3"
},
"dependencies": {
"body-parser": "^1.12.2",
"express": "^4.12.3",
"father": "^1.0.0",
"gulp": "^3.8.11",
"gulp-compass": "^2.0.4",
"gulp-concat": "^2.5.2",
"gulp-uglify": "^1.2.0",
"gulp-spm": "^0.11.3",
"gulp-develop-server": "^0.4.2",
"gulp-ftp": "^1.0.3",
"gulp-util": "^3.0.4",
"hbs": "^3.0.1"
}
"scripts": {
"test": "spm test",
"build": "spm build"
},
"main": "app.js",
"directories": {
"example": "examples",
"test": "tests"
},
"license": "ISC"
}
\ No newline at end of file
... ...
No preview for this file type
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Wed Apr 22 10:54:24 2015
By Ads
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
panose-1="2 0 6 3 0 0 0 0 0 0"
ascent="812"
descent="-212"
x-height="792"
bbox="0 -224 5637 800"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E60A"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".notdef" horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
/>
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="uniE600" unicode="&#xe600;" horiz-adv-x="1463"
d="M798 -160q0 -46 25 -58t61 16l537 420q36 28 36 68t-36 68l-537 424q-36 29 -61 16.5t-25 -57.5v-238q-138 0 -252.5 -24.5t-192 -63.5t-137.5 -94t-94.5 -109t-57.5 -117t-31.5 -109.5t-11 -94t-1.5 -63.5t2 -25q47 62 87 104t90 78t103.5 57.5t127 36.5t161.5 21t207 6
v-262z" />
<glyph glyph-name="uniE601" unicode="&#xe601;"
d="M281 372q-9 -6 -16.5 -14.5t-11.5 -18t-4 -18.5v-7v-483h1q4 -15 13.5 -28t24 -20t30.5 -7h582q28 0 48.5 20t20.5 49t-20.5 49t-48.5 20h41q35 0 59 24.5t24 58.5t-24 58.5t-59 24.5q35 0 59 24t24 59q0 16 -6.5 31.5t-17.5 26.5t-26.5 17.5t-32.5 6.5h-48q21 0 38 10.5
t27.5 27.5t10.5 38v-13q0 31 -22.5 54t-53.5 24q-125 6 -259 9q40 148 16 278q-4 25 -13.5 44.5t-22 31.5t-27 19.5t-29.5 8t-29.5 -2.5t-27.5 -12t-23 -21t-15.5 -30t-5.5 -38q-3 -19 -4.5 -36.5t-2.5 -28.5v-22q-1 -11 -2 -18.5t-2 -16t-3 -16.5t-5.5 -18t-8.5 -23
q-24 -60 -133 -115q-4 -1 -7 -2.5t-6 -3.5l-2 -1v0zM60 356q-25 0 -42.5 -17.5t-17.5 -42.5v-405q0 -25 17.5 -42.5t42.5 -17.5h134v525h-134z" />
<glyph glyph-name="uniE602" unicode="&#xe602;" horiz-adv-x="1323"
d="M643 472q0 -68 -47.5 -116t-113.5 -48q0 -68 47 -116t113.5 -48t113.5 48t47 116t-47 116t-113 48zM643 800q-68 0 -139.5 -21.5t-133 -57t-119 -80.5t-102.5 -93t-79 -94t-52 -84t-18 -62q0 -28 25 -75t68 -102t105 -111t131 -101.5t152 -74.5t161.5 -29t161.5 29
t152 74.5t131 101.5t105 111t68 102t25 75t-25 75t-68 101.5t-105 110.5t-131 102t-152 74.5t-161 28.5zM643 -21q-88 0 -162 44t-117 120t-43 165q0 66 25.5 127t68.5 105t102.5 70t125.5 26q131 0 225 -94q94 -99 96 -234q0 -30 -5.5 -59t-15 -55.5t-23.5 -51.5t-32 -46
t-38.5 -39.5t-44.5 -32.5t-50 -24t-54.5 -15.5t-57.5 -5.5z" />
<glyph glyph-name="uniE603" unicode="&#xe603;"
d="M512 286v343h85v-426h-81v-2h-256v85h252zM512 -224q139 0 257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5t-257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5z" />
<glyph glyph-name="uniE604" unicode="&#xe604;"
d="M774 324q6 -9 9.5 -19t2.5 -20.5t-5.5 -20.5t-12.5 -18l-1 -1l-427 -428q-18 -17 -42.5 -17t-41.5 17q-12 12 -16 27t0 30.5t15 26.5l387 387l-387 387q-17 17 -17 41.5t17.5 42t42 17.5t42.5 -17l427 -428q1 0 1 -1q2 -1 3.5 -2.5t2.5 -3.5z" />
<glyph glyph-name="uniE605" unicode="&#xe605;"
d="M707 748q-55 0 -105 -20.5t-90 -56.5q-40 36 -90 56.5t-105 20.5q-34 0 -67 -8t-62 -23t-54.5 -35.5t-45.5 -46.5t-34.5 -55.5t-22 -63t-7.5 -68.5q0 -110 69 -194l2 -2l344 -391q30 -33 73 -33t73 33l344 391q0 1 1 2h1q22 27 37.5 58.5t23.5 66t8 69.5q0 49 -14.5 94.5
t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" />
<glyph glyph-name="uniE606" unicode="&#xe606;" horiz-adv-x="5632"
d="M4316.5 156q54.5 0 93 38.5t38.5 93.5t-38.5 93.5t-93 38.5t-93.5 -38.5t-39 -93.5t39 -93.5t93.5 -38.5zM4910 156q27 0 51.5 10.5t42.5 28t28 42t10 51.5q0 55 -38.5 93.5t-93 38.5t-93.5 -38.5t-39 -93.5t39 -93.5t93 -38.5zM5504.5 156q54.5 0 93.5 38.5t39 93.5
t-39 93.5t-93.5 38.5t-93 -38.5t-38.5 -93.5t38.5 -93.5t93 -38.5z" />
<glyph glyph-name="uniE607" unicode="&#xe607;" horiz-adv-x="1643"
d="M547 190h-1l45 -46l248 239l-45 46l-201 -194l-195 201l-46 -44z" />
<glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1821"
d="M930 135q-14 -13 -33.5 -13t-33.5 13l-252 242q-14 13 -14 32t14 32t34 13t34 -13l251 -242q6 -5 9.5 -11.5t4.5 -13.5t0 -14t-4.5 -13.5t-9.5 -11.5zM360 135q-14 13 -14 32t14 32l251 242q14 13 34 13t34 -13q6 -6 9.5 -15t3.5 -17.5t-3.5 -17t-9.5 -14.5l-252 -242
q-14 -13 -33.5 -13t-33.5 13z" />
<glyph glyph-name="uniE609" unicode="&#xe609;" horiz-adv-x="1821"
d="M930 377l-251 -242q-14 -13 -34 -13t-34 13q-9 9 -12 20.5t0 23.5t12 20l252 242q14 13 33.5 13t33.5 -13t14 -32t-14 -32zM427 441l252 -242q9 -8 12 -20t0 -23.5t-12 -20.5q-14 -13 -34 -13t-34 13l-251 242q-14 13 -14 32t14 32q6 7 15 10.5t18 3.5t18 -3.5t16 -10.5z
" />
<glyph glyph-name="uniE60A" unicode="&#xe60a;"
d="M1024 288q0 -139 -68.5 -257t-186.5 -186.5t-257 -68.5t-257 68.5t-186.5 186.5t-68.5 257t68.5 257t186.5 186.5t257 68.5t257 -68.5t186.5 -186.5t68.5 -257zM801 498l-365 -366l-156 156l-37 -37l193 -193l403 403z" />
</font>
</defs></svg>
... ...
No preview for this file type
No preview for this file type
var $ = require('jquery'),
lazyLoad = require('./common/lazyload'),
Swiper = require('yoho-idangerous.swiper');
function initSwiper() {
$('.newfestivalbrandwrapper .show').find('.swiper-container').each(function() {
var id = $(this).attr('id');
new Swiper('.swiper-container' + id, {
pagination: '.swiper-pagination' + id
});
})
}
$(document).on('click', '.navitemwrapper', function() {
var nowActHeader = $(this),
preActHeader = $('.newfestivalbrandheader').data('actheadtag') || $('.hasunderline'),
tagId = nowActHeader.attr('tagid'),
nowActContent = $('#showpannel' + tagId),
preActContent = $('.newfestivalbrandheader').data('actcontenttag') || $('.newfestivalbrandwrapper .show');
preActHeader.removeClass('hasunderline');
nowActHeader.addClass('hasunderline');
$('.newfestivalbrandheader').data('actheadtag', nowActHeader);
preActContent.removeClass('show').addClass('hide');
nowActContent.removeClass('hide').addClass('show');
$('.newfestivalbrandheader').data('actcontenttag', nowActContent);
initSwiper();
})
$(document).ready(function(){
initSwiper();
})
\ No newline at end of file
... ...
/**
* lazyload
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/6/25
*/
var $ = require('jquery');
require('lazyload');
/**
* 为指定imgs添加lazyload效果,未指定imgs则为所有img.lazy添加lazyload效果
* @params imgs lazyload的图片
* @params options lazyload效果选项
*/
module.exports = function(imgs, options) {
var setting = {
effect : 'fadeIn',
effect_speed: 10,
placeholder: 'data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=='
}, $imgs, argsLength = arguments.length;
//分解参数
(function seperateOptions() {
switch (argsLength) {
case 0:
$imgs = $('img.lazy');
break;
case 1:
if (imgs instanceof $) {
//img
$imgs = imgs;
} else {
$imgs = $('img.lazy');
$.extend(setting, imgs);
}
break;
case 2:
$imgs = imgs;
setting = $.extend(setting, options);
break;
}
}());
$imgs.lazyload(setting);
};
\ No newline at end of file
... ...
/**
* 模拟数据
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/30
*/
module.exports = function(flag) {
switch (flag) {
//新品节
case 'newfestival':
return {
back: '',
home: '',
title: '新品节',
slider: [{
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
src: 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
}, {
url: 'http://sale.yohobuy.com/?specialsale_id=11&gender=1,3',
title: '',
src: 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
}],
banner: [{
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '单个图片',
imgId: '0',
src: 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '单个图片',
imgId: '0',
src: 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
}],
imageList: [{
column_num: 3,
title: "最热推荐",
list: [{
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/04/03/07/0235b2d48417d0e92b94484d284dca06fc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/04/03/07/0235b2d48417d0e92b94484d284dca06fc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}]
}, {
column_num: 2,
title: "亮点抢先看",
list: [{
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/04/03/07/0235b2d48417d0e92b94484d284dca06fc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '',
imgId: '0',
src: 'http://img13.static.yhbimg.com/goodsimg/2015/04/03/07/0235b2d48417d0e92b94484d284dca06fc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90'
}]
}],
banner2: [{
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '单个图片',
imgId: '0',
src: 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
}, {
url: 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
title: '',
alt: '单个图片',
imgId: '0',
src: 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
}],
goods: [{
id: 1,
src: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'GAWS DIGI 丛林数码印花拼接卫衣',
isLike: false,
price: 1268,
salePrice: 589,
tags: [
/*需要显示的放入即可，不需要显示不写*/
{
isNew: true
},
{
isSale: true
},
{
isLimit: true
},
{
isYohood: true
},
{
isReNew: true
}
],
isFew: true, //单独的即将售罄标志，不显示不写
url: '',
likeUrl: ''
}, {
id: 2,
src: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/023d70c59e81ccbfb39404487aaf642da2.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'CLOTtee 撞色连帽外套',
isLike: false,
price: 488,
salePrice: 139,
tags: [
{
isNew: true
},
{
isSale: true
},
{
isYohood: true
}
],
url: '',
likeUrl: ''
}, {
id: 3,
src: 'http://img12.static.yhbimg.com/goodsimg/2015/03/02/08/02e2d44125e95495e3152aa459fa6b9b0c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
url: '',
likeUrl: ''
}, {
id: 4,
src: 'http://img12.static.yhbimg.com/goodsimg/2015/03/03/08/022f25fbe177ee12803c522f04fcce06d0.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
salePrice: 148,
url: '',
likeUrl: ''
}]
};
case 'newfestivalbrands':
return {
brandsHeader: [{
id: 'b1',
title: '欧美潮牌',
defaultClass: 'hasunderline',
}, {
id: 'b2',
title: '国潮原创',
defaultClass: ''
}, {
id: 'b3',
title: '日韩潮牌',
defaultClass: ''
}],
todayBrands: [{
parentId: 'b1',
displayClass: 'show',
todayPic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}],
tomorrowPic: {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640',
text: '明日推荐品牌1'
}
}, {
parentId: 'b2',
displayClass: 'hide',
todayPic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}],
tomorrowPic: {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640',
text: '明日推荐品牌2'
}
}, {
parentId: 'b3',
displayClass: 'hide',
todayPic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}],
tomorrowPic: {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640',
text: '明日推荐品牌3'
}
}],
singleBrands: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}],
singleTomorrowPic: {
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640',
text: '明日推荐品牌3'
},
todayBtn: {
link: ''
},
brandsContent: [{
parentId: 'b1',
displayClass: 'show',
brandsList: [{
brandsId: '1',
pic: [{
hasWords: {
words: '太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真太傻太天真'
},
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
hasWords: {
words: '很好很强大很好很强大很好很强大很好很强大很好很强大很好很强大很好很强大'
},
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsId: '2',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsId: '3',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}]
}, {
parentId: 'b2',
displayClass: 'hide',
brandsList: [{
brandsId: '1',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsId: '2',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsId: '3',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}]
}, {
parentId: 'b3',
displayClass: 'hide',
brandsList: [{
brandsId: '1',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsId: '2',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsId: '3',
pic: [{
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/03/13/01a165dd33db8488edc741241950a596a8.jpg?imageView/2/w/640/h/640'
}]
}]
}],
brandsLogoList: [{
brandsLogoRow: [{
showClass: 'logoblack',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logogrey',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logoblack',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logogrey',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logoblack',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logogrey',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}]
}, {
brandsLogoRow: [{
showClass: 'logogrey',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logoblack',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logogrey',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logoblack',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logogrey',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}, {
showClass: 'logoblack',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/06/10/014fd517e2fe3f3e0dc3cbc3007d8093af.jpg?imageView/2/w/640/h/640'
}]
}]
};
}
};
\ No newline at end of file
... ...
/**
* 商品信息数据
* @author xuqi(qi.xu@yoho.cn)
* @date 2015/7/15
*/
module.exports = [
{
id: 5,
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'GAWS DIGI 丛林数码印花拼接卫衣',
isLike: false,
price: 1268,
salePrice: 589,
tags: [
/*需要显示的放入即可，不需要显示不写*/
{
isNew: false
},
{
isSale: true
},
{
isLimit: false
},
{
isYohood: true
},
{
isReNew: false
}
],
isFew: false, //单独的即将售罄标志，不显示不写
url: '',
likeUrl: ''
},
{
id: 6,
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/023d70c59e81ccbfb39404487aaf642da2.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'CLOTtee 撞色连帽外套',
isLike: false,
price: 488,
salePrice: 139,
url: '',
likeUrl: ''
},
{
id: 7,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/02/08/02e2d44125e95495e3152aa459fa6b9b0c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
url: '',
likeUrl: ''
},
{
id: 8,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/03/08/022f25fbe177ee12803c522f04fcce06d0.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
salePrice: 148,
url: '',
likeUrl: ''
}
];
\ No newline at end of file
... ...
var $ = require('jquery'),
lazyLoad = require('./common/lazyload'),
Swiper = require('yoho-idangerous.swiper'),
Mustache = require('mustache');
new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
loop: true,
autoplay: 3000
});
/**
* 初始化页面功能
*/
exports.init = function (url) {
//img-lazyload
function lazyLoad(imgs) {
var $imgs;
if (typeof imgs === 'undefined') {
$imgs = $('img.lazy');
} else {
$imgs = imgs;
}
$imgs.lazyload({
effect: 'fadeIn',
effect_speed: 10,
placeholder: 'data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=='
});
}
lazyLoad();
var $newArrival = $('.new-arrival:last');
// 无最新单品推荐模块时直接返回
if ($newArrival.length === 0) {
return;
}
var isLogin = $('#is-login').val();
isLogin = isLogin ? isLogin : 'N';
//登录提示变量
var $loginTip = $('#login-tip');
var winH = $(window).height(),
loading = false,
end = false,
page = 1,
tpl;
var $father = $('.new-arrival-content');
//var $goodList = $newArrival.children('.goods-list'),
var mblTop = $newArrival.offset().top; //页面内容固定，可以预先求出高度
tpl = ["<div class=\"good-info\" data-id=\"{{id}}\">",
" <div class=\"tag-container clearfix\">",
" {{# tags}}",
" {{# isNew}}",
" <p class=\"good-tag new-tag\">NEW</p>",
" {{/ isNew}}",
" {{# isReNew}}",
" <p class=\"good-tag renew-tag\">再到着</p>",
" {{/ isReNew}}",
" {{# isSale}}",
" <p class=\"good-tag sale-tag\">SALE</p>",
" {{/ isSale}}",
" {{# isYohood}}",
" <div class=\"good-tag yohood-tag\"></div>",
" {{/ isYohood}}",
" {{# isLimit}}",
" <p class=\"good-tag limit-tag\">限量商品</p>",
" {{/ isLimit}}",
" {{/ tags}}",
" </div>",
" <div class=\"good-detail-img\">",
" <a class=\"good-islike {{# isLike}}good-like{{/ isLike}} iconfont\" href=\"{{likeUrl}}\">&#xe605;</a>",
" <a class=\"good-thumb\" href=\"{{url}}\">",
" <img class=\"lazy\" data-original=\"{{src}}\">",
" </a>",
" {{# isFew}}",
" <p class=\"few-tag\">即将售罄</p>",
" {{/ isFew}}",
" </div>",
" <div class=\"good-detail-text\">",
" <div class=\"name\">",
" <a href=\"{{url}}\">{{name}}</a>",
" </div>",
" <div class=\"price\">",
" <span class=\"sale-price {{^price}}no-price{{/price}}\">￥{{salePrice}}</span>",
" {{#price}}",
" <span class=\"market-price\">￥{{.}}</span>",
" {{/price}}",
" </div>",
" </div>",
"</div>"].join("");
tpl = '{{# goods}}' + tpl + '{{/ goods}}';
//read good-info template
/*$.get('/common/goodinfo', function (data) {
tpl = '{{# goods}}' + data + '{{/ goods}}';
Mustache.parse(tpl);
});*/
Mustache.parse(tpl);
//srcoll to load more
$(window).scroll(function () {
var num;
if (end || loading) {
return;
}
if ($(window).scrollTop() + winH < mblTop + $newArrival.height()) {
return;
}
loading = true;
num = $father.children('.good-info').length;
$.ajax({
type: 'GET',
url: url,
data: {
//gender: 0, //性别
page: page + 1
}
}).then(function (data) {
var res,
i;
if (data.code === 200) {
res = data.data;
if (res.end) {
end = res.end;
}
console.log("aaa");
$father.append(Mustache.render(tpl, {
goods: res.goods
}));
//lazyLoad
lazyLoad($father.children('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
loading = false;
page++;
}
});
});
};
... ...
.brand-list {
padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
background: #fff;
.brand {
float: left;
width: 158rem / $pxConvertRem;
height: 128rem / $pxConvertRem;
border-right: 1px solid #e0e0e0;
margin-bottom: 10rem / $pxConvertRem;
a {
display: block;
text-decoration: none;
}
.brand-logo {
display: table-cell;
width: 158rem / $pxConvertRem;
height: 94rem / $pxConvertRem;
vertical-align: middle;
img {
display: block;
max-width: 158rem / $pxConvertRem;
max-height: 94rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
margin: 10rem / $pxConvertRem 0 0 0;
line-height: 24rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
}
.brand:nth-child(4n) {
border-right: none;
}
}
\ No newline at end of file
... ...
@import "compass", "compass/reset";
$pxConvertRem : 40;
body {
font-family: helvetica,Arial,"黑体";
background: #f0f0f0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ol, ul {
list-style: none;
}
.hide {
display: none !important;
}
a {
text-decoration: none;
}
/**
* 闭合浮动
* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6-7 触发 hasLayout */
}
/**
* 字体图标样式
*/
@font-face {
font-family: "iconfont";
src: font-url('iconfont.eot'); /* IE9*/
src: font-url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
font-url('iconfont.woff') format('woff'), /* chrome、firefox */
font-url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
font-url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.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;
}
.icon-sharedviewicon:before {
content: "\e60c";
}
.icon-sharedtimeicon:before {
content: "\e60d";
}
.icon-sharedlikebuttomhighlighted:before {
content: "\e60f";
}
.icon-sharedenterbuttomnormal:before {
content: "\e612";
}
@mixin retina-sprite($map, $sprite, $scale) {
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
$offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);
background: sprite-url($map) 0 $offsetY no-repeat;
$zoomX: ceil(image_width(sprite-path($map)) / $scale);
$zoomY: auto;
@include background-size($zoomX $zoomY);
display: block;
}
.swiper-container {
width: 100%;
height: 360rem / $pxConvertRem;
img {
height: 100%;
width: 100%;
}
.swiper-pagination {
bottom: 0;
left: 0;
width: 100%;
}
.swiper-pagination-switch {
margin: 0 5px;
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .6;
}
.swiper-active-switch {
opacity: 1;
background: #fff;
}
}
... ...
.good-info {
float: left;
width: 276rem / $pxConvertRem;
height: 486rem / $pxConvertRem;
margin: 28rem / $pxConvertRem (15rem / $pxConvertRem) 0;
.tag-container {
height: 28rem / $pxConvertRem;
width: 100%;
overflow: hidden;
.good-tag {
display: block;
float: left;
height: 28rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
text-align: center;
line-height: 28rem / $pxConvertRem;
box-sizing: border-box;
margin-right: 4rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
}
.new-tag {
width: 60rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.renew-tag {
width: 90rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.sale-tag {
width: 60rem / $pxConvertRem;
background-color: #ff575c;
color: #fff;
}
.yohood-tag {
width: 90rem / $pxConvertRem;
background: image-url('yohood.png') no-repeat;
background-size: 100% 100%;
}
.limit-tag {
width: 90rem / $pxConvertRem;
border: 1px solid #000;
color: #000;
}
}
}
.good-detail-img {
position: relative;
.good-islike {
position: absolute;
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
top: 0rem / $pxConvertRem;
right: 0rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
text-align: center;
color: #b0b0b0;
text-decoration: none;
}
.good-like {
color: #d72928;
}
img {
display: block;
width: 100%;
height: 366rem / $pxConvertRem;
}
.few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 28rem / $pxConvertRem;
background: #ffac5b;
font-size: 18rem / $pxConvertRem;
color: #fff;
line-height: 28rem / $pxConvertRem;
text-align: center;
}
}
.good-detail-text {
.name a {
display: block;
line-height: 56rem / $pxConvertRem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
font-size: 22rem / $pxConvertRem;
color: #444;
}
.price {
line-height: 22rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
.sale-price {
color: #d62927;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin: 0 0 0 (5rem / $pxConvertRem);
color: #b0b0b0;
text-decoration: line-through;
}
}
}
\ No newline at end of file
... ...
// Grids
// -------------------------------
$grid-padding-width: 0px !default;
$grid-responsive-sm-break: 567px !default; // smaller than landscape phone
$grid-responsive-md-break: 767px !default; // smaller than portrait tablet
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
@mixin display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@mixin display-inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
@mixin flex($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $fg;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
@mixin align-self($value: auto) {
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
@mixin align-content($value: stretch) {
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
@mixin justify-content($value: stretch) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
@mixin flex-order($n) {
-webkit-order: $n;
-ms-flex-order: $n;
order: $n;
-webkit-box-ordinal-group: $n;
}
@mixin responsive-grid-break($selector, $max-width) {
@media (max-width: $max-width) {
#{$selector} {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
@include flex(1);
margin-bottom: ($grid-padding-width * 3) / 2;
margin-left: 0;
max-width: 100%;
width: 100%;
}
}
}
}
.row {
@include display-flex();
padding: ($grid-padding-width / 2);
width: 100%;
}
.row-wrap {
@include flex-wrap(wrap);
}
.row-no-padding {
padding: 0;
> .col {
padding: 0;
}
}
.row + .row {
margin-top: ($grid-padding-width / 2) * -1;
padding-top: 0;
}
.col {
@include flex(1);
display: block;
padding: ($grid-padding-width / 2);
width: 100%;
text-align: center;
}
/* Vertically Align Columns */
/* .row-* vertically aligns every .col in the .row */
.row-top {
@include align-items(flex-start);
}
.row-bottom {
@include align-items(flex-end);
}
.row-center {
@include align-items(center);
}
.row-stretch {
@include align-items(stretch);
}
.row-baseline {
@include align-items(baseline);
}
/* .col-* vertically aligns an individual .col */
.col-top {
@include align-self(flex-start);
}
.col-bottom {
@include align-self(flex-end);
}
.col-center {
@include align-self(center);
}
/* Column Offsets */
.col-offset-10 {
margin-left: 10%;
}
.col-offset-20 {
margin-left: 20%;
}
.col-offset-25 {
margin-left: 25%;
}
.col-offset-33, .col-offset-34 {
margin-left: 33.3333%;
}
.col-offset-50 {
margin-left: 50%;
}
.col-offset-66, .col-offset-67 {
margin-left: 66.6666%;
}
.col-offset-75 {
margin-left: 75%;
}
.col-offset-80 {
margin-left: 80%;
}
.col-offset-90 {
margin-left: 90%;
}
/* Explicit Column Percent Sizes */
/* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */
.col-10 {
@include flex(0, 0, 10%);
max-width: 10%;
}
.col-20 {
@include flex(0, 0, 20%);
max-width: 20%;
}
.col-25 {
@include flex(0, 0, 25%);
max-width: 25%;
}
.col-33, .col-34 {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
.col-50 {
@include flex(0, 0, 50%);
max-width: 50%;
}
.col-66, .col-67 {
@include flex(0, 0, 66.6666%);
max-width: 66.6666%;
}
.col-75 {
@include flex(0, 0, 75%);
max-width: 75%;
}
.col-80 {
@include flex(0, 0, 80%);
max-width: 80%;
}
.col-90 {
@include flex(0, 0, 90%);
max-width: 90%;
}
/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */
@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);
... ...
/**
* 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: July 6, 2015
*/
.swiper-container{margin:0 auto;position:relative;overflow:hidden;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(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,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}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{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-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{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")}.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:.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(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-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}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.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-wrapper{-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-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{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,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}.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}.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-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px)}.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow{z-index:0}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(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,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.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)}}
\ No newline at end of file
... ...
.yoho-header {
position: relative;
background-color: #000;
color: #fff;
width: 100%;
overflow: hidden;
height: 44px;
line-height: 44px;
z-index: 999;
.nav-back {
position: absolute;
left: 17px;
top: 14px;
width: 9px;
height: 16px;
background: image-url("back.png") no-repeat;
background-size: 100% 100%;
}
.nav-home {
position: absolute;
top: 14px;
right: 17px;
width: 15px;
height: 15px;
background: image-url("home.png") no-repeat;
background-size: 100% 100%;
}
.title {
position: absolute;
margin-left: 26px;
margin-right: 32px;
height: 100%;
font-size: 18px;
color: #fff;
font-weight: bold;
top: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
}
\ No newline at end of file
... ...
.err-page {
text-align: center;
height: 480rem / $pxConvertRem;
width: 480rem / $pxConvertRem;
position: absolute;
left: 50%;
top: 50%;
margin-top: -240rem / $pxConvertRem;
margin-left: -240rem / $pxConvertRem;
}
.err-bg {
width: 168rem / $pxConvertRem;
height: 168rem / $pxConvertRem;
margin: 0 auto;
background-image: image-url('err-bg.png');
background-size: 100% 100%;
}
.err-tip {
font-size: 24rem / $pxConvertRem;
margin-top: 40rem / $pxConvertRem;
}
.err-reload {
display: block;
position: absolute;
bottom: 30rem / $pxConvertRem;
span {
font-size: 30rem / $pxConvertRem;
color: #fff;
background-color: #444;
padding: 30rem / $pxConvertRem 180rem / $pxConvertRem;
@include border-radius(5px);
}
}
\ No newline at end of file
... ...
@import "common/common","common/grid","common/swiper", "newfestival/newfestivalbrand", "error/error", "newfestival/newfestival";
//恢复样式覆盖
b {
font-weight: bold;
}
i {
font-style: italic;
}
//登录提示
.login-tip {
display: none;
position: fixed;
z-index: 1000;
height: 60px;
line-height: 60px;
text-align: center;
width: 140px;
font-weight: bold;
background-color: #ccc;
opacity: 0.7;
filter: Alpha(opacity=70);
@include border-radius(10px);
}
... ...
@import "../common/good-info", "../common/yoho-header";
.newfestival-container {
.newfestival-block {
margin-bottom: 30rem / $pxConvertRem;
background-color: #fff;
}
.img-container {
width: 100%;
display: block;
.img {
width: 100%;
height: 100%;
}
}
.new-arrival {
padding-left: 0 30rem / $pxConvertRem;
.new-arrival-header {
text-align: center;
height: 70rem / $pxConvertRem;
.header-text {
font-size: 28rem / $pxConvertRem;
color: #9e9e9e;
line-height: 250%;
}
}
.new-arrival-content {
border-top: 1px solid #e0e0e0;
padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
}
}
.img-list {
padding-left: 0 30rem / $pxConvertRem;
.new-arrival-header {
text-align: center;
height: 70rem / $pxConvertRem;
.header-text {
font-size: 28rem / $pxConvertRem;
color: #9e9e9e;
line-height: 250%;
}
}
}
.newfestival-recom-3 {
.newfestival-recom-item {
position: relative;
box-sizing: border-box;
float: left;
width: 213.3rem / $pxConvertRem;
height: 213.3rem / $pxConvertRem;
overflow: hidden;
.img-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 213.3rem / $pxConvertRem;
height: 213.3rem / $pxConvertRem;
img {
width: 213.3rem / $pxConvertRem;
height: 213.3rem / $pxConvertRem;
max-width: 100%;
max-height: 100%;
}
}
}
}
.newfestival-recom-2 {
.newfestival-recom-item {
position: relative;
box-sizing: border-box;
float: left;
width: 320rem / $pxConvertRem;
height: 320rem / $pxConvertRem;
overflow: hidden;
.img-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 320rem / $pxConvertRem;
height: 320rem / $pxConvertRem;
img {
width: 320rem / $pxConvertRem;
height: 320rem / $pxConvertRem;
max-width: 100%;
max-height: 100%;
}
}
}
}
}
\ No newline at end of file
... ...
.newfestivalbrandwrapper {
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
.newfestivalbrandheader {
overflow: hidden;
.hasunderline {
border-bottom: 4rem / $pxConvertRem solid #373737 !important;
}
.hasvline {
border-right: 2rem / $pxConvertRem solid #c1c1c1;
}
.navitemwrapper {
height: 50rem / $pxConvertRem;
border-bottom: 4rem / $pxConvertRem solid #c1c1c1;
}
.navitem {
margin-top: 10rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
width: 100%;
text-align: center;
}
}
.brandsshowpannel {
.brandpicwrapper {
margin-bottom: 20rem / $pxConvertRem;
.branddetail {
position: relative;
}
}
}
.singlebrandpicwrapper {
img{
width: 100%;
}
}
.singlebrandbtnleft {
background-color:#1f1f1f;
.todaybtn {
background-color: #514d4d;
}
}
.singlebrandbtnright {
background-color:red;
.todaybtn {
background-color: white;
color: black;
}
}
.gridwrapper {
width: 100%;
clear: both;
.gridtiem {
height: 100rem / $pxConvertRem;
width: 16.666666667%;
line-height: 100rem / $pxConvertRem;
float: left;
}
.logoblack {
background-color: black;
}
.logogrey {
background-color: grey;
}
}
.tomorrowbrand {
position: relative;
img {
width: 100%;
}
}
.picwordswrapper {
background: rgba(1,1,1,.5);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
.picwords {
text-align: center;
margin-top: 25%;
line-height: 20rem / $pxConvertRem;
color: white;
}
}
.brandpicwordswrapper {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
text-overflow : ellipsis ;
line-height: 20rem / $pxConvertRem;
font-size: 20rem / $pxConvertRem;
padding: 31rem / $pxConvertRem;
color: white;
.brandpicwords {
width: 100%;
height: 100%;
text-align: left;
overflow: hidden;
}
}
.todaybtn {
display: block;
width: 95%;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
text-align: center;
margin: 20rem / $pxConvertRem auto;
background-color: black;
color: white;
border: none;
border-radius: 5rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
}
}
.morlogo {
display: inline-block;
position: relative;
width: 28rem / $pxConvertRem;
height: 28rem / $pxConvertRem;
border-radius: 50%;
vertical-align: middle;
margin-top: -13px;
.cart {
display: block;
position: absolute;
left: 45%;
top:37%;
width: 0;
height: 0;
}
}
.infolist {
display: inline-block;
vertical-align: middle;
.infoitem {
line-height: 40rem / $pxConvertRem;
text-align: left;
font-weight: normal;
}
}
.whiteword {
color: #fff;
}
.redword {
color: #f12200
}
.morlogowhite{
background-color: #fff;
.cart {
border-top: 4rem / $pxConvertRem solid transparent;
border-left: 4rem / $pxConvertRem solid #000;
border-right: 4rem / $pxConvertRem solid transparent;
border-bottom: 4rem / $pxConvertRem solid transparent;
}
}
.morlogored{
background-color: #f12200;
.cart {
border-top: 4rem / $pxConvertRem solid transparent;
border-left: 4rem / $pxConvertRem solid #fff;
border-right: 4rem / $pxConvertRem solid transparent;
border-bottom: 4rem / $pxConvertRem solid transparent;
}
}
.mt10 {
margin-top: 10rem / $pxConvertRem !important;
}
... ...
/**
* 路由处理文件
* @author: liuyue(yue.liu@yoho.cn)
* @date: 2015/7/13
*/
var controllerPath = './views/controller/',
newfestival = require(controllerPath + 'newfestival');
goods = require(controllerPath + 'goods');
module.exports = function(app) {
//router here
app.get('/newfestival', newfestival.home);
app.get('/newfestival/brand', newfestival.brand);
app.get('/newfestival/todaybrand', newfestival.todaybrand);
app.get('/newfestival/singlebrand', newfestival.singlebrand);
app.get('/common/goodinfo', goods.goodTpl); //商品信息模板
app.get('/goods/more', goods.more); //下拉加载更多
};
\ No newline at end of file
... ...
/**
* 错误页面控制器文件
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/5/25
*/
exports.show = function(req, res) {
res.render('error/error', {
reloadUrl: '',
layout: '../layouts/layout'
});
};
\ No newline at end of file
... ...
/**
* 商品信息相关路由处理
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/7/15
*/
var fs = require('fs'),
path = require('path'),
tplPath = path.normalize(path.join(__dirname, '../partials/common/good_info.html')),
data = require('../../public/js/goods');
exports.goodTpl = function(req, res) {
fs.readFile(tplPath, 'utf8', function(err, data) {
if (err) {
res.send({
success: false
});
}
res.send(data);
});
};
//加载更多商品信息
exports.more = function(req, res) {
res.send({
code: 200,
data: {
end: true,
goods: data
}
});
};
// 收藏、取消收藏
exports.like = function(req, res) {
res.send({
code: 200
});
};
\ No newline at end of file
... ...
/**
* saunter页控制器文件
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/27
*/
var data = require('../../public/js/data'),
brandsdata = data('newfestivalbrands');
newfestivaldata = data('newfestival');
//新品节首页
exports.home = function(req, res) {
res.render('pages/newfestival', {
data: newfestivaldata,
layout: '../layouts/layout',
isNewFestival: 'NewFestival'
});
};
//新品节品牌
exports.brand = function(req, res) {
res.render('pages/newfestival_brand', {
data: brandsdata,
layout: '../layouts/layout',
isBrand: 'brand-home'
});
};
//今日品牌
exports.todaybrand = function(req, res) {
res.render('pages/newfestival_todaybrand', {
data: brandsdata,
layout: '../layouts/layout',
isBrand: 'brand-home'
});
};
//今日单品
exports.singlebrand = function(req, res) {
res.render('pages/newfestival_singlebrand', {
data: brandsdata,
layout: '../layouts/layout',
isBrand: 'brand-home'
});
};
\ No newline at end of file
... ...
<div class="err-page">
<div class="err-bg"></div>
<p class="err-tip">页面出错啦， 再试试！ </p>
<a class="err-reload" href="{{reloadUrl}}">
<span>重新加载</span>
</a>
</div>
\ No newline at end of file
... ...
<div class="newfestival-container">
{{# data}}
{{> newfestival/newfestival_home_slider}}
<div class="newfestival-block">
{{# banner}}
{{> newfestival/newfestival_home_banner}}
{{/ banner}}
</div>
{{# imageList}}
{{> newfestival/newfestival_home_imglist}}
{{/ imageList}}
<div class="newfestival-block">
{{# banner2}}
{{> newfestival/newfestival_home_banner}}
{{/ banner2}}
</div>
{{> newfestival/newfestival_home_newarrival}}
{{/ data}}
</div>
\ No newline at end of file
... ...
{{# data}}
<div class="newfestivalbrandwrapper">
{{> newfestival/newfestival_brand_header}}
{{> newfestival/newfestival_brand_content}}
</div>
{{/ data}}
\ No newline at end of file
... ...
{{# data}}
<div class="newfestivalbrandwrapper">
{{> newfestival/newfestival_singlebrand_content}}
</div>
{{/ data}}
\ No newline at end of file
... ...
{{# data}}
<div class="newfestivalbrandwrapper">
{{> newfestival/newfestival_brand_header}}
{{> newfestival/newfestival_todaybrand_content}}
</div>
{{/ data}}
\ No newline at end of file
... ...
<div class="good-info" data-id="{{id}}">
<div class="tag-container clearfix">
{{# tags}}
{{# isNew}}
<p class="good-tag new-tag">NEW</p>
{{/ isNew}}
{{# isReNew}}
<p class="good-tag renew-tag">再到着</p>
{{/ isReNew}}
{{# isSale}}
<p class="good-tag sale-tag">SALE</p>
{{/ isSale}}
{{# isYohood}}
<div class="good-tag yohood-tag"></div>
{{/ isYohood}}
{{# isLimit}}
<p class="good-tag limit-tag">限量商品</p>
{{/ isLimit}}
{{/ tags}}
</div>
<div class="good-detail-img">
<a class="good-thumb" href="{{url}}">
<img class="lazy" data-original="{{src}}">
</a>
{{# isFew}}
<p class="few-tag">即将售罄</p>
{{/ isFew}}
</div>
<div class="good-detail-text">
<div class="name">
<a href="{{url}}">{{name}}</a>
</div>
<div class="price">
<span class="sale-price {{^price}}no-price{{/price}}">￥{{salePrice}}</span>
{{#price}}
<span class="market-price">￥{{.}}</span>
{{/price}}
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="yoho-header">
<a href="{{back}}" class="nav-back"></a>
<a href="{{home}}" class="nav-home"></a>
<p class="title">{{title}}</p>
</div>
\ No newline at end of file
... ...
<script src="http://localhost:8000/public/js/brand.js"></script>
<script type="text/javascript">
seajs.use('public/js/brand');
</script>
\ No newline at end of file
... ...
<script src="http://localhost:8000/public/js/new-festival.js"></script>
<script type="text/javascript">
seajs.use('public/js/new-festival',function(newfestival){
newfestival.init('url');
});
</script>
\ No newline at end of file
... ...
<script type="text/javascript" charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://localhost:8000/static/js/sea.js?nowrap"></script>
<script>
seajs.config({
base: 'http://localhost:8000/'
})
</script>
<!-- <script src="http://localhost:8000/public/dist/libs-dev.js"></script>-->
{{! 根据标识字段添加模块对应JS入口文件}}
{{! 新品节}}
{{# isNewFestival}}
{{> footer_js/new_festival}}
{{/ isNewFestival}}
{{! 品牌}}
{{# isBrand}}
{{> footer_js/brand}}
{{/ isBrand}}
\ No newline at end of file
... ...
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<link rel="stylesheet" href="../css/index.css">
\ No newline at end of file
... ...
{{# brandsContent}}
<div class="brandsshowpannel {{displayClass}}" id="showpannel{{parentId}}" >
{{#brandsList}}
<div class="row brandpicwrapper">
<div class="col">
<div class="swiper-container swiper-container{{../parentId}}{{brandsId}}" id="{{../parentId}}{{brandsId}}">
<div class="swiper-wrapper">
{{# pic}}
<div class="swiper-slide branddetail">
<a href="{{url}}">
<img src="{{img}}" />
{{#hasWords}}
<div class="brandpicwordswrapper">
<p class="brandpicwords">{{words}}</p>
</div>
{{/ hasWords}}
</a>
</div>
{{/ pic}}
</div>
<div class="swiper-pagination swiper-pagination{{../parentId}}{{brandsId}}"></div>
</div>
</div>
</div>
{{/brandsList}}
</div>
{{/ brandsContent}}
<div class="row">
<div class="col">
{{# brandsLogoList}}
<ul class="gridwrapper">
{{# brandsLogoRow}}
<li class="gridtiem {{showClass}}"></li>
{{/brandsLogoRow}}
</ul>
{{/ brandsLogoList}}
</div>
</div>
\ No newline at end of file
... ...
<div class="row newfestivalbrandheader">
{{# brandsHeader}}
<div class="col col-33 navitemwrapper {{defaultClass}}" tagid={{id}}>
<h3 class="navitem hasvline">{{title}}</h3>
</div>
{{/ brandsHeader}}
</div>
\ No newline at end of file
... ...
<div class="clearfix" data-id="{{imgId}}">
<a class="img-container" href="{{url}}">
<img class="img lazy" data-original="{{src}}" alt="">
</a>
</div>
... ...
<div class="img-list newfestival-block newfestival-recom-{{column_num}} clearfix">
{{# title}}
<div class="new-arrival-header">
<span class="header-text"> {{.}}</span>
</div>
{{/ title}}
{{# list}}
<div class="newfestival-recom-item clearfix">
<a href="{{url}}" class="img-wrapper">
<img class="lazy" data-original="{{src}}" alt="">
</a>
</div>
{{/ list}}
</div>
... ...
<div class="new-arrival newfestival-block">
<div class="new-arrival-header">
<span class="header-text">最新单品推荐</span>
</div>
<div class="new-arrival-content clearfix">
{{# goods}}
{{> common/good_info}}
{{/ goods}}
</div>
</div>
\ No newline at end of file
... ...
<div class="swiper-container newfestival-block">
<div class="swiper-wrapper">
{{# slider}}
<div class="swiper-slide">
<a href="{{url}}">
<img src="{{src}}" alt="">
</a>
</div>
{{/ slider}}
</div>
<div class="swiper-pagination"></div>
</div>
\ No newline at end of file
... ...
{{# singleBrands}}
<div class="row">
<div class="col">
<div class="singlebrandpicwrapper">
<a href="{{url}}">
<img src="{{img}}"/>
</a>
</div>
</div>
</div>
{{/ singleBrands}}
<div class="row">
<div class="col">
<div class="tomorrowbrand">
{{# singleTomorrowPic}}
<a href="{{url}}">
<img src="{{img}}"/>
<div class="picwordswrapper">
<p class="picwords">{{text}}</p>
</div>
</a>
{{/ singleTomorrowPic}}
</div>
</div>
</div>
<div class="row">
<div class="col col-50 singlebrandbtnleft">
{{# todayBtn}}
<a href="{{link}}">
<div type="button" class="todaybtn">
<ul class="infolist">
<li class="infoitem">查看更多：</li>
<li class="infoitem"><h3 class="whiteword">进入新品列表</h3></li>
</ul>
<div class="morlogo morlogowhite">
<span class="cart"></span>
</div>
</div>
</a>
{{/ todayBtn}}
</div>
<div class="col col-50 singlebrandbtnright">
{{# todayBtn}}
<a href="{{link}}">
<div type="button" class="todaybtn">
<ul class="infolist">
<li class="infoitem">YOHO!有货</li>
<li class="infoitem"><h3 class="redword">10周年联名单品</h3></li>
</ul>
<div class="morlogo morlogored">
<span class="cart"></span>
</div>
</div>
</a>
{{/ todayBtn}}
</div>
</div>
\ No newline at end of file
... ...
{{# todayBrands}}
<div class="brandsshowpannel {{displayClass}}" id="showpannel{{parentId}}" >
{{# todayPic}}
<div class="row">
<div class="col">
<div class="singlebrandpicwrapper">
<a href="{{url}}">
<img src="{{img}}"/>
</a>
</div>
</div>
</div>
{{/ todayPic}}
<div class="row">
<div class="col">
<div class="tomorrowbrand">
{{# tomorrowPic}}
<a href="{{url}}">
<img src="{{img}}"/>
<div class="picwordswrapper">
<p class="picwords">{{text}}</p>
</div>
</a>
{{/ tomorrowPic}}
</div>
</div>
</div>
</div>
{{/ todayBrands}}
{{# todayBtn}}
<a href="{{link}}">
<div type="button" class="todaybtn">
点击查看: 更多日韩品牌 <div class="morlogo morlogowhite"><span class="cart"></span></div>
</div>
</a>
{{/ todayBtn}}
\ No newline at end of file
... ...