wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by biao
Commit 9363c45f541c09f074c8655606364f1b4b0bd224 2 parents a4b60dff 2fab0cb3

Merge branch 'develop/wap' of http://git.dev.yoho.cn/web/yohobuy into develop/wap

Inline Side-by-side
Showing 100 changed files with 1182 additions and 972 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 100 of 100+ files are displayed.

/**
* GULP-FILE
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/9/30
* 根据 PC 版修改为 H5 版， 毕凯
*/
var gulp = require('gulp'),
cp = require('child_process');
var fs = require('fs'),
ftp = require('gulp-ftp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
Package = require('father').SpmPackage,
transport = require('gulp-spm'),
concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var cssnano = require('gulp-cssnano');
var config = require('./package');
var rootDist = 'dist/myohobuy/',
ftpConfig = {
host: '218.94.75.58',
user: 'php',
pass: 'yoho9646'
};
var distDir = {
js: rootDist + config.version,
css: rootDist + config.version,
img: rootDist + 'assets/img',
font: rootDist + 'assets/font'
};
gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);
//根据环境变量生成postcss插件配置
function postcssEnvPlugin(env) {
var sprites = {
spritesmith: {
padding: 10
},
groupBy: function(file) {
// 根据目录分组，防止合并后的图片太大
var group = file.url.split('/')[1];
file.retina = true; // H5 强制所有图片都是用二倍图
return group ? Promise.resolve(group) : Promise.reject();
},
filterBy: function(file) {
//使用resolve转化后静态资源生成../img或者../assets/img/的路径
if (/\/img/.test(file.url) || /data:image/.test(file.url)) {
return Promise.reject();
}
return Promise.resolve();
}
},
assets;
if (env === 'DEV') {
assets = {
loadPaths: ['font/', 'img/'],
relativeTo: 'css/'
};
Object.assign(sprites, {
basePath: './img',
stylesheetPath: './css',
spritePath: './img'
});
} else if (env === 'PRO') {
assets = {
loadPaths: [distDir.img, distDir.font],
relativeTo: distDir.css,
cachebuster: function(filePath, urlPathname) {
//只给字体加no-cache
if (/font\//.test(urlPathname)) {
return fs.statSync(filePath).mtime.getTime().toString(16);
}
}
};
Object.assign(sprites, {
basePath: distDir.img,
stylesheetPath: distDir.css,
spritePath: distDir.img
});
}
return [
require('precss'),
require('postcss-assets')(assets),
require('postcss-sprites').default(sprites),
require('postcss-calc'),
require('postcss-pxtorem')({
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2px 时，不转换, 单位为 PX 大写的时候不转换
selectorBlackList: [], // 选择器黑名单，可以使用正则
propWhiteList: [] // 属性名称为空，表示替换所有属性的值
}),
require('autoprefixer')({
browsers: ['> 1%']
}),
//可选
require('postcss-use')({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
}
//Postcss开发环境
gulp.task('postcss-dev', function() {
return gulp.src('sass/index.css')
.pipe(sourcemaps.init())
.pipe(postcss(postcssEnvPlugin('DEV')))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css/'))
});
gulp.task('postcss-watch', function() {
gulp.watch('sass/**/*.css', ['postcss-dev']);
});
//Postcss正式环境生成
gulp.task('postcss-pro', ['assets'], function() {
return gulp.src('sass/index.css')
.pipe(postcss(postcssEnvPlugin('PRO')))
.pipe(cssnano())
.pipe(gulp.dest(distDir.css))
});
// start spm server
gulp.task('spm-doc', function() {
var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001，H5 用8000, 跑两个服务器，不冲突
// sd.stdout.on('data', function(data) {
// console.log(data);
// });
sd.stderr.on('data', function(data) {
console.log(data);
});
sd.on('exit', function(code) {
console.log('process spm doc exit with code ' + code);
});
});
//生成发布目录，可用于上传测试机
gulp.task('ge', ['assets', 'postcss-pro', 'build']);
//发布
gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
var ftpstream = ftp(ftpConfig);
return gulp.src('dist/**/')
.pipe(ftpstream)
.pipe(gutil.noop());
});
//font+img->dist/assets
gulp.task('assets', ['img', 'font']);
gulp.task('img', function() {
return gulp.src('img/**/*')
.pipe(gulp.dest(distDir.img));
});
gulp.task('font', function() {
return gulp.src('font/*')
.pipe(gulp.dest(distDir.font))
});
//spm build
gulp.task('build', ['libs', 'business']);
//libs
gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);
gulp.task('pre-libs', function() {
var obj = {
name: '',
version: config.version,
spm: config.spm
};
var packages = [],
libsjs = '';
var libCon, key, i;
var pkg;
obj.spm.main = 'libs.js';
obj.spm.buildArgs = '--idleading {{}} --include all';
libCon = JSON.stringify(obj);
fs.renameSync('package.json', 'package.bak.json');
fs.writeFileSync('package.json', libCon);
for (key in obj.spm.dependencies) {
if (obj.spm.inside && obj.spm.inside[key]) {
packages.push(obj.spm.inside[key]);
} else {
packages.push(key);
}
}
for (i = 0; i < packages.length; i++) {
libsjs += 'require("' + packages[i] + '");';
}
fs.writeFileSync('libs.js', libsjs); //重写入口文件
pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(gulp.dest(distDir.js));
});
gulp.task('concat-min-libs', ['pre-libs'], function() {
var path = distDir.js + '/libs.js';
var jsStr = fs.readFileSync(path).toString();
fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js'])
.pipe(concat('lib.js'))
.pipe(uglify())
.pipe(gulp.dest(distDir.js));
});
gulp.task('clear-libs', ['concat-min-libs'], function() {
fs.renameSync('package.bak.json', 'package.json');
fs.unlinkSync('./libs.js');
fs.unlinkSync(distDir.js + '/libs.js');
});
gulp.task('business', ['libs'], function() {
var pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(concat('index-debug.js'))
.pipe(gulp.dest(distDir.js))
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest(distDir.js));
});
... ...
/**
* GULP-FILE
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/9/30
*/
var gulp = require('gulp'),
compass = require('gulp-compass'),
cp = require('child_process');
var fs = require('fs'),
ftp = require('gulp-ftp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
Package = require('father').SpmPackage,
transport = require('gulp-spm'),
concat = require('gulp-concat');
var config = JSON.parse(fs.readFileSync('./package.json').toString());
var rootDist = 'dist/myohobuy/',
ftpConfig = {
host: '218.94.75.58',
user: 'php',
pass: 'yoho9646'
};
var distDir = {
js: rootDist + config.version,
css: rootDist + config.version,
img: rootDist + 'assets/img',
font: rootDist + 'assets/font'
};
gulp.task('default', ['compass', 'compass-watch', 'spm-doc']);
// compass
gulp.task('compass', function() {
gulp.src('sass/**/*.scss')
.pipe(
compass({
config_file: 'config.rb',
css: 'css',
sass: 'sass'
})
).on('error', function(error) {
console.log(error);
this.emit('end');
});
});
// compass watch
gulp.task('compass-watch', function() {
gulp.watch('sass/**/*.scss', ['compass']);
});
// start spm server
gulp.task('spm-doc', function() {
var sd = cp.exec('spm doc');
// sd.stdout.on('data', function(data) {
// console.log(data);
// });
sd.stderr.on('data', function(data) {
console.log(data);
});
sd.on('exit', function(code) {
console.log('process spm doc exit with code ' + code);
});
});
//生成发布目录，可用于上传测试机
gulp.task('ge', ['assets', 'compass-production', 'build']);
//发布
gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
var ftpstream = ftp(ftpConfig);
return gulp.src('dist/**/')
.pipe(ftpstream)
.pipe(gutil.noop());
});
//font+img->dist/assets
gulp.task('assets', function() {
gulp.src('img/**')
.pipe(gulp.dest(distDir.img));
gulp.src('font/*')
.pipe(gulp.dest(distDir.font));
});
//compass
gulp.task('compass-production', ['assets'], function() {
gulp.src('sass/index.scss')
.pipe(
compass({
css: distDir.css,
sass: 'sass',
image: distDir.img,
font: distDir.font,
http_path: '/',
style: 'compressed'
})
)
.on('error', function(error) {
console.log(error);
this.emit('end');
});
});
//spm build
gulp.task('build', ['libs', 'business']);
//libs
gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);
gulp.task('pre-libs', function() {
var obj = {
name: '',
version: config.version,
spm: config.spm
};
var packages = [],
libsjs = '';
var libCon, key, i;
var pkg;
obj.spm.main = 'libs.js';
obj.spm.buildArgs = '--idleading {{}} --include all';
libCon = JSON.stringify(obj);
fs.renameSync('package.json', 'package.bak.json');
fs.writeFileSync('package.json', libCon);
for (key in obj.spm.dependencies) {
if (obj.spm.inside && obj.spm.inside[key]) {
packages.push(obj.spm.inside[key]);
} else {
packages.push(key);
}
}
for (i = 0; i < packages.length; i++) {
libsjs += 'require("' + packages[i] + '");';
}
fs.writeFileSync('libs.js', libsjs); //重写入口文件
pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(gulp.dest(distDir.js));
});
gulp.task('concat-min-libs', ['pre-libs'], function() {
var path = distDir.js + '/libs.js';
var jsStr = fs.readFileSync(path).toString();
fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
return gulp.src(['js/sea.js', distDir.js + '/libs.js'])
.pipe(concat('lib.js'))
.pipe(uglify())
.pipe(gulp.dest(distDir.js));
});
gulp.task('clear-libs', ['concat-min-libs'], function() {
fs.renameSync('package.bak.json', 'package.json');
fs.unlinkSync('./libs.js');
fs.unlinkSync(distDir.js + '/libs.js');
});
gulp.task('business', ['libs'], function() {
var pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(concat('index-debug.js'))
.pipe(gulp.dest(distDir.js))
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest(distDir.js));
});
\ No newline at end of file
... ... @@ -2,10 +2,10 @@
* GULP-FILE
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/9/30
* 根据 PC 版修改为 H5 版， 毕凯
*/
var gulp = require('gulp'),
compass = require('gulp-compass'),
cp = require('child_process');
var fs = require('fs'),
... ... @@ -16,11 +16,7 @@ var fs = require('fs'),
transport = require('gulp-spm'),
concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var cssnano = require('gulp-cssnano');
var config = require('./package');
var config = JSON.parse(fs.readFileSync('./package.json').toString());
var rootDist = 'dist/myohobuy/',
ftpConfig = {
... ... @@ -36,112 +32,31 @@ var distDir = {
font: rootDist + 'assets/font'
};
gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);
//根据环境变量生成postcss插件配置
function postcssEnvPlugin(env) {
var sprites = {
spritesmith: {
padding: 10
},
groupBy: function(file) {
// 根据目录分组，防止合并后的图片太大
var group = file.url.split('/')[1];
file.retina = true; // H5 强制所有图片都是用二倍图
return group ? Promise.resolve(group) : Promise.reject();
},
filterBy: function(file) {
//使用resolve转化后静态资源生成../img或者../assets/img/的路径
if (/\/img/.test(file.url) || /data:image/.test(file.url)) {
return Promise.reject();
}
return Promise.resolve();
}
},
assets;
if (env === 'DEV') {
assets = {
loadPaths: ['font/', 'img/'],
relativeTo: 'css/'
};
Object.assign(sprites, {
basePath: './img',
stylesheetPath: './css',
spritePath: './img'
});
} else if (env === 'PRO') {
assets = {
loadPaths: [distDir.img, distDir.font],
relativeTo: distDir.css,
cachebuster: function(filePath, urlPathname) {
//只给字体加no-cache
if (/font\//.test(urlPathname)) {
return fs.statSync(filePath).mtime.getTime().toString(16);
}
}
};
Object.assign(sprites, {
basePath: distDir.img,
stylesheetPath: distDir.css,
spritePath: distDir.img
gulp.task('default', ['compass', 'compass-watch', 'spm-doc']);
// compass
gulp.task('compass', function() {
gulp.src('sass/**/*.scss')
.pipe(
compass({
config_file: 'config.rb',
css: 'css',
sass: 'sass'
})
).on('error', function(error) {
console.log(error);
this.emit('end');
});
}
return [
require('precss'),
require('postcss-assets')(assets),
require('postcss-sprites').default(sprites),
require('postcss-calc'),
require('postcss-pxtorem')({
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2px 时，不转换, 单位为 PX 大写的时候不转换
selectorBlackList: [], // 选择器黑名单，可以使用正则
propWhiteList: [] // 属性名称为空，表示替换所有属性的值
}),
require('autoprefixer')({
browsers: ['> 1%']
}),
//可选
require('postcss-use')({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
}
//Postcss开发环境
gulp.task('postcss-dev', function() {
return gulp.src('sass/index.css')
.pipe(sourcemaps.init())
.pipe(postcss(postcssEnvPlugin('DEV')))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css/'))
});
gulp.task('postcss-watch', function() {
gulp.watch('sass/**/*.css', ['postcss-dev']);
});
//Postcss正式环境生成
gulp.task('postcss-pro', ['assets'], function() {
return gulp.src('sass/index.css')
.pipe(postcss(postcssEnvPlugin('PRO')))
.pipe(cssnano())
.pipe(gulp.dest(distDir.css))
// compass watch
gulp.task('compass-watch', function() {
gulp.watch('sass/**/*.scss', ['compass']);
});
// start spm server
gulp.task('spm-doc', function() {
var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001，H5 用8000, 跑两个服务器，不冲突
var sd = cp.exec('spm doc');
// sd.stdout.on('data', function(data) {
// console.log(data);
... ... @@ -157,10 +72,10 @@ gulp.task('spm-doc', function() {
});
//生成发布目录，可用于上传测试机
gulp.task('ge', ['assets', 'postcss-pro', 'build']);
gulp.task('ge', ['assets', 'compass-production', 'build']);
//发布
gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
var ftpstream = ftp(ftpConfig);
return gulp.src('dist/**/')
... ... @@ -169,16 +84,30 @@ gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
});
//font+img->dist/assets
gulp.task('assets', ['img', 'font']);
gulp.task('img', function() {
return gulp.src('img/**/*')
gulp.task('assets', function() {
gulp.src('img/**')
.pipe(gulp.dest(distDir.img));
gulp.src('font/*')
.pipe(gulp.dest(distDir.font));
});
gulp.task('font', function() {
return gulp.src('font/*')
.pipe(gulp.dest(distDir.font))
//compass
gulp.task('compass-production', ['assets'], function() {
gulp.src('sass/index.scss')
.pipe(
compass({
css: distDir.css,
sass: 'sass',
image: distDir.img,
font: distDir.font,
http_path: '/',
style: 'compressed'
})
)
.on('error', function(error) {
console.log(error);
this.emit('end');
});
});
//spm build
... ... @@ -237,7 +166,7 @@ gulp.task('concat-min-libs', ['pre-libs'], function() {
fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js'])
return gulp.src(['js/sea.js', distDir.js + '/libs.js'])
.pipe(concat('lib.js'))
.pipe(uglify())
.pipe(gulp.dest(distDir.js));
... ... @@ -261,4 +190,4 @@ gulp.task('business', ['libs'], function() {
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest(distDir.js));
});
});
\ No newline at end of file
... ...

17.4 KB | W: | H:

17.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -6,6 +6,7 @@
var $ = require('jquery'),
Swiper = require('yoho.iswiper'),
lazyLoad = require('yoho.lazyload'),
noticeScroll = require('../plugin/notice-scroll'),
$mobileWrap = $('.mobile-wrap'),
$overlay = $('.overlay'),
$sideNav = $('.side-nav'),
... ... @@ -24,6 +25,7 @@ var start = 0,
isen = true;
lazyLoad($('img.lazy'));
noticeScroll('.notice', $('.notice').data('time') * 1000);
$('.nav-btn').on('touchstart', function() {
$sideNav.css('pointer-events', 'none');
... ...
... ... @@ -3,7 +3,9 @@
* @author: bikai<kai.bi@yoho.cn>
* @date: 2015/11/12
*/
var $ = require('jquery');
var $ = require('jquery'),
noticeScroll = require('../plugin/notice-scroll');
var $userAvatar = $('.user-avatar'),
$listItem = $('.list-item');
var myImage = new Image(),
... ... @@ -19,6 +21,8 @@ myImage.onload = function() {
$userAvatar.css('background-image', 'url(' + avatar + ')');
};
noticeScroll('.notice', $('.notice').data('time') * 1000);
$('.yoho-page').on('touchstart', '.list-item, .type-item, .order-title', function() {
$listItem.removeClass('highlight');
$(this).addClass('highlight');
... ...
/**
* 公告栏目滚动
* bikai kai.bi@yoho.cn
*/
var $ = require('jquery');
function noticeScroll(selecter, time) {
var $notice = $(selecter),
$noticeItem = $notice.find('.notice-item'),
count = $noticeItem.length,
i = 1;
selecter = selecter || '.notice';
time = time || 3000;
if (count > 1) {
setInterval(function() {
if (i >= count) {
i = 0;
}
$noticeItem.fadeOut();
$notice.find('.item-' + i).fadeIn();
i++;
}, time);
}
}
module.exports = noticeScroll;
... ...
This diff could not be displayed because it is too large.
.fresh-swiper {
position: relative;
height: 200rem / $pxConvertRem;
overflow: hidden;
ul {
li {
float: left;
width: 100%;
a, img {
display: block;
width: 100%;
height: 100%;
}
}
}
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20rem / $pxConvertRem;
text-align: center;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 (9rem / $pxConvertRem);
border-radius: 50%;
}
span.swiper-active-switch {
opacity: 1;
}
}
}
}
.fresh-list-swiper {
overflow: hidden;
padding-bottom: 15rem / $pxConvertRem;
background-color: #fff;
ul {
box-sizing: border-box;
}
li {
float:left;
width:240rem / $pxConvertRem;
margin: (20rem / $pxConvertRem) (10rem / $pxConvertRem) 0 (10rem / $pxConvertRem);
&:first-child {
margin-left: 20rem / $pxConvertRem;
}
&:last-child {
margin-right: 20rem / $pxConvertRem;
}
.img-box {
height: 100%;
height:320rem / $pxConvertRem;
text-align: center;
position: relative;
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.fresh-info {
.fresh-name a{
display:block;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
color: #444;
line-height: 48rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
}
.cur-price {
color: #d62927;
font-size: 22rem / $pxConvertRem;
}
.old-price {
margin: 0 0 0 (10rem / $pxConvertRem);
color: #b0b0b0;
text-decoration: line-through;
font-size: 22rem / $pxConvertRem;
}
.fresh-icon {
background: #d62927;
width: 100rem / $pxConvertRem;
height: 33rem / $pxConvertRem;
display: block;
margin: (8rem / $pxConvertRem) auto 0 auto;
color: #fff;
text-align: center;
border-radius: 40rem / $pxConvertRem;
line-height: 37rem / $pxConvertRem;
font-size:12rem / $pxConvertRem;
}
}
}
}
.fresh-list{
position: relative;
padding:(15rem / $pxConvertRem) 0 0 (15rem / $pxConvertRem);
}
\ No newline at end of file
... ...
... ... @@ -17,6 +17,7 @@
@import "hot-category";
@import "home-header";
@import "thumb-row";
@import "notice";
.mobile-container{
width: 100%;
... ...
.notice-wrap {
.trend {
position: relative;
box-sizing: border-box;
float: left;
width: 170px;
height: 72px;
background: resolve('img/trend.png') no-repeat center center;
background-size: 90%;
background-color: #fff;
&:after {
content: '';
position: absolute;
right: 0;
top: 16px;
width: 1px;
height: 40px;
background: #eee;
}
}
.notice {
box-sizing: border-box;
float: left;
padding: 0 30px;
background: #fff;
width: 470px;
height: 72px;
overflow: hidden;
.notice-item {
display: block;
width: 100%;
font-size: 24px;
line-height: 72px;
color: #444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notice-icon {
display: inline-block;
margin-right: 10px;
width: 28px;
height: 28px;
background: url("/me/index/volume.png");
vertical-align: middle;
}
span.notice-icon {
background-repeat: no-repeat !important;
}
}
}
... ...
.yoho-favorite-page {
width: 100%;
height: auto;
.fav-tab {
width: 100%;
height: 88px;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
color: #b0b0b0;
font-size: 26px;
li {
width: 50%;
height: 100%;
float: left;
text-align: center;
&.active {
color: #444;
}
&:nth-last-of-type(1) {
float: right;
position: relative;
&:after {
content: '';
display: block;
width: 1px;
height: 44px;
position: absolute;
left: 0;
top: 22px;
background: #b0b0b0;
}
}
}
}
.fav-content {
.fav-type {
display: none;
}
.show {
display: block;
}
.fav-null {
font-size: 22px;
color: #444;
display: block;
margin-top: 100px;
text-align: center;
&:before {
content: '';
display: block;
width: 188px;
height: 171px;
background: resolve("me/fav/fav-null.png");
background-size: 100% 100%;
margin: 0 auto 45px auto;
}
}
.go-shopping {
width: 472px;
height: 88px;
line-height: 88px;
margin: 80px auto 0 auto;
background: #444;
text-align: center;
color: #fff;
display: block;
font-size: 26px;
}
.fav-product-list {
list-style: none;
margin-left: 30px;
li {
height: auto;
overflow: hidden;
margin-top: 20px;
}
.fav-img-box {
width: 90px;
height: 120px;
float: left;
margin-right: 24px;
img {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
}
.fav-info-list {
color: #444;
font-size: 24px;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 20px;
height: 120px;
overflow: hidden;
position: relative;
h2 {
width: 430px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fav-price {
.new-price {
color: #d1021c;
}
.price-underline {
text-decoration: line-through;
margin-left: 15px;
color: #b0b0b0;
}
}
.save-price {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
min-height: 24px;
&.save-price-number {
text-indent: 42px;
color: #b0b0b0;
padding-top: 3px;
&:before {
content: '';
display: block;
background: url("/me/fav/save-price.png");
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 0;
margin-top: -16px;
}
span {
margin-left: 15px;
}
.del-fav {
text-indent: 0;
margin-left: 0;
}
}
span {
color: #d1021c;
&.sell-out {
padding: 5px 18px;
color: #fffefe;
border-radius: 20px;
background: #7f7f7f;
font-size: 22px;
}
&.del-fav {
width: 2rem;
height: 1.5rem;
line-height: 1.5rem;
position: absolute;
top: 50%;
margin-top: -0.75rem;
right: 0;
color: #999;
padding-right: 0.75rem;
text-align: right;
}
}
}
}
}
/*品牌收藏*/
.fav-brand-swiper {
border-top: 1px solid #e0e0e0;
border-bottom: 28px solid #f0f0f0;
position: relative;
&:nth-of-type(1) {
border-top: 0;
}
&:after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
border-top: 1px solid #e0e0e0;
display: block;
width: 100%;
height: 1px;
}
.swiper-header {
height: 100px;
padding: 20px 30px;
display: inline-block;
position: relative;
width: 100%;
box-sizing: border-box;
.swiper-logo {
height: 100%;
display: inline-block;
float: left;
margin-right: 45px;
> img {
max-height: 100%;
vertical-align: middle;
}
}
.brand-info {
float: left;
.brand-name {
font-size: 28px;
b {
color: #b0b0b0;
font-weight: normal;
}
}
.brand-update {
font-size: 22px;
b {
color: #b0b0b0;
font-weight: normal;
}
.brand-new {
color: #86bf4a;
margin-right: 24px;
}
.brand-discount {
color: #d1021c;
}
}
}
.fav-more {
width: 2.5rem;
height: 2.5rem;
position: absolute;
top: 0;
right: 0;
&:after {
background: url("/me/fav/fav-more.png");
width: 18px;
height: 29px;
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
content: '';
}
}
}
.swiper-container {
height: 365px;
margin: 0 30px;
.swiper-slide {
width: 225px;
height: 100%;
float: left;
padding-right: 30px;
&:nth-last-of-type(1) {
padding-right: 0;
}
img {
display: block;
width: 100%;
height: 300px;
overflow: hidden;
}
.brand-product {
height: 65px;
line-height: 65px;
text-align: center;
font-size: 22px;
.price-discount {
span {
color: #d1021c
}
b {
color: #b0b0b0;
text-decoration: line-through;
font-weight: normal;
margin-left: 13px;
}
}
}
}
}
}
}
.fav-load-more,.fav-brand-load-more {
width: 100%;
height: 2rem;
line-height: 2rem;
text-align: center;
color: #444;
&.load-background {
background: resolve('loading.gif') center center no-repeat;
background-size: auto 40%;
}
}
.fav-content-loading {
width: 100%;
height: 2rem;
background: resolve('loading.gif') center center no-repeat;
background-size: auto 40%;
position: absolute;
top: 50%;
left: 0;
margin-top: -1rem;
}
}
.yoho-favorite-page {
width: 100%;
height: auto;
.fav-tab {
width: 100%;
height: 88px;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
color: #b0b0b0;
font-size: 26px;
li {
width: 50%;
height: 100%;
float: left;
text-align: center;
&.active {
color: #444;
}
&:nth-last-of-type(1) {
float: right;
position: relative;
&:after {
content: '';
display: block;
width: 1px;
height: 44px;
position: absolute;
left: 0;
top: 22px;
background: #b0b0b0;
}
}
}
}
.fav-content {
.fav-type {
display: none;
}
.show {
display: block;
}
.fav-null {
font-size: 22px;
color: #444;
display: block;
margin-top: 100px;
text-align: center;
&:before {
content: '';
display: block;
width: 188px;
height: 171px;
background: resolve("me/fav/fav-null.png");
background-size: 100% 100%;
margin: 0 auto 45px auto;
}
}
.go-shopping {
width: 472px;
height: 88px;
line-height: 88px;
margin: 80px auto 0 auto;
background: #444;
text-align: center;
color: #fff;
display: block;
font-size: 26px;
}
.fav-product-list {
list-style: none;
margin-left: 30px;
li {
height: auto;
overflow: hidden;
margin-top: 20px;
}
.fav-img-box {
width: 90px;
height: 120px;
float: left;
margin-right: 24px;
img {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
}
.fav-info-list {
color: #444;
font-size: 24px;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 20px;
height: 120px;
overflow: hidden;
position: relative;
h2 {
width: 430px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fav-price {
.new-price {
color: #d1021c;
}
.price-underline {
text-decoration: line-through;
margin-left: 15px;
color: #b0b0b0;
}
}
.save-price {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
min-height: 24px;
&.save-price-number {
text-indent: 42px;
color: #b0b0b0;
padding-top: 3px;
&:before {
content: '';
display: block;
background: url("/me/fav/save-price.png");
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 0;
margin-top: -16px;
}
span {
margin-left: 15px;
}
.del-fav {
text-indent: 0;
margin-left: 0;
}
}
span {
color: #d1021c;
&.sell-out {
padding: 5px 18px;
color: #fffefe;
border-radius: 20px;
background: #7f7f7f;
font-size: 22px;
}
&.del-fav {
width: 2rem;
height: 1.5rem;
line-height: 1.5rem;
position: absolute;
top: 50%;
margin-top: -0.75rem;
right: 0;
color: #999;
padding-right: 0.75rem;
text-align: right;
}
}
}
}
}
/*品牌收藏*/
.fav-brand-swiper {
border-top: 1px solid #e0e0e0;
border-bottom: 28px solid #f0f0f0;
position: relative;
&:nth-of-type(1) {
border-top: 0;
}
&:after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
border-top: 1px solid #e0e0e0;
display: block;
width: 100%;
height: 1px;
}
.swiper-header {
height: 100px;
padding: 20px 30px;
display: inline-block;
position: relative;
width: 100%;
box-sizing: border-box;
.swiper-logo {
height: 100%;
display: inline-block;
float: left;
margin-right: 45px;
> img {
max-height: 100%;
vertical-align: middle;
}
}
.brand-info {
float: left;
.brand-name {
font-size: 28px;
b {
color: #b0b0b0;
font-weight: normal;
}
}
.brand-update {
font-size: 22px;
b {
color: #b0b0b0;
font-weight: normal;
}
.brand-new {
color: #86bf4a;
margin-right: 24px;
}
.brand-discount {
color: #d1021c;
}
}
}
.fav-more {
width: 2.5rem;
height: 2.5rem;
position: absolute;
top: 0;
right: 0;
&:after {
background: url("/me/fav/fav-more.png");
width: 18px;
height: 29px;
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
content: '';
}
}
}
.swiper-container {
height: 365px;
margin: 0 30px;
.swiper-slide {
width: 225px;
height: 100%;
float: left;
padding-right: 30px;
&:nth-last-of-type(1) {
padding-right: 0;
}
img {
display: block;
width: 100%;
height: 300px;
overflow: hidden;
}
.brand-product {
height: 65px;
line-height: 65px;
text-align: center;
font-size: 22px;
.price-discount {
span {
color: #d1021c
}
b {
color: #b0b0b0;
text-decoration: line-through;
font-weight: normal;
margin-left: 13px;
}
}
}
}
}
}
}
.fav-load-more,.fav-brand-load-more {
width: 100%;
height: 2rem;
line-height: 2rem;
text-align: center;
color: #444;
&.load-background {
background: resolve('loading.gif') center center no-repeat;
background-size: auto 40%;
}
}
.fav-content-loading {
width: 100%;
height: 2rem;
background: resolve('loading.gif') center center no-repeat;
background-size: auto 40%;
position: absolute;
top: 50%;
left: 0;
margin-top: -1rem;
}
}
... ...
.yoho-suggest-page {
width: 100%;
height: auto;
/*意见反馈头部*/
.suggest-header {
text-align: center;
color: #fff;
font-size: 26px;
line-height: 46px;
overflow: hidden;
padding-bottom: 20px;
background-image: linear-gradient(#383838, #505050);
&:before {
content: '';
display: block;
background: url("/me/suggest/suggest-logo.png");
width: 104px;
height: 35px;
margin: 10px auto 15px auto;
}
}
/*意见反馈主体*/
.suggest-content {
border-top: 1px solid #e0e0e0;
.suggest-item {
width: 100%;
color: #444;
border-top: 1px solid #e0e0e0;
border-bottom: 30px solid #f0f0f0;
overflow: hidden;
.suggest-item-img {
width: 100%;
overflow: hidden;
> img {
margin: 0 auto;
display: block;
max-width: 100%;
}
}
> h2 {
font-size: 38px;
margin: 30px 0 31px 0;
padding: 0 35px;
}
> p {
font-size: 26px;
line-height: 48px;
padding: 0 35px;
}
.suggest-type {
margin-top: 29px - 11px;
height: 88px;
line-height: 88px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
color: #b0b0b0;
font-size: 26px;
display: none;
text-align: center;
&.suggest-active {
> div {
width: 50%;
height: 100%;
float: left;
text-align: left;
padding-left: 128px;
box-sizing: border-box;
&:nth-last-of-type(1) {
padding-left: 0;
padding-right: 128px;
text-align: right;
float: right;
> span {
display: inline-block;
height: 100%;
overflow: hidden;
&:nth-of-type(1) {
transform: rotate(180deg);
}
}
}
}
}
> .active {
color: #444;
}
&.show {
display: block;
}
&.suggest-bad {
> div {
> span {
display: inline-block;
height: 100%;
overflow: hidden;
&:nth-of-type(1) {
transform: rotate(180deg);
}
}
}
}
}
}
}
/*发表意见*/
.create-new-suggest {
display: block;
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
font-size: 30px;
border-top: 30px solid #f0f0f0;
border-bottom: 30px solid #f0f0f0;
position: relative;
.list-item {
padding: 0 35px;
}
.new-right {
float: right;
margin-left: 40px;
color: #e0e0e0;
}
a {
color: #444;
display: inline-block;
}
}
}
/*提交页面*/
.yoho-suggest-sub-page {
width: 100%;
background: #f0f0f0;
.suggest-sub-form {
background: #fff;
width: 100%;
#suggest-textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 100%;
height: 255px;
max-height: 255px;
min-height: 255px;
padding: 30px;
font-size: 26px;
line-height: 48px;
color: #000;
display: block;
background: #fff;
border: none;
outline: none;
resize: none;
}
.img-form {
padding: 0 30px;
padding-top: 40px;
overflow: hidden;
.upload-img-list {
float: left;
> li {
display: block;
width: 130px;
height: 130px;
float: left;
margin-right: 30px;
background: resolve('loading.gif') center center no-repeat;
background-size: 50%;
position: relative;
> img {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
> span {
display: block;
background: url("/me/suggest/sub_del.png");
width: 42px;
height: 42px;
position: absolute;
top: -21px;
right: -21px;
}
}
}
.img-add {
display: block;
width: 130px;
height: 130px;
border: 1px dashed #e0e0e0;
position: relative;
text-indent: -1000px;
float: left;
&:after {
content: '';
display: block;
background: url("/me/suggest/suggest-add.png");
width: 72px;
height: 72px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -36px;
margin-left: -36px;
}
input[type="file"], {
position: absolute;
opacity: 0.2;
border: none;
outline: none;
display: block;
width: 130px;
height: 130px;
top: 0;
left: 0;
}
}
}
}
}
/*dialog*/
.dialog-wrapper {
background: hsla(0, 0%, 0%, .5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
.dialog-box {
width: 540px;
border-radius: 20px;
background: hsla(100, 100%, 100%, .8);
position: absolute;
left: 50%;
margin-left: -270px;
font-size: 30px;
text-align: center;
color: #000;
}
.dialog-content {
padding: 60px 30px;
}
.dialog-footer {
border-top: 1px solid #ccc;
height: 88px;
line-height: 88px;
> span {
display: block;
width: 50%;
height: 100%;
float: left;
box-sizing: border-box;
&:nth-last-of-type(1) {
border-left: 1px solid #ccc;
color: #ee0011;
}
}
> span:active {
background-color: #ccc;
}
}
}
.yoho-suggest-page {
width: 100%;
height: auto;
/*意见反馈头部*/
.suggest-header {
text-align: center;
color: #fff;
font-size: 26px;
line-height: 46px;
overflow: hidden;
padding-bottom: 20px;
background-image: linear-gradient(#383838, #505050);
&:before {
content: '';
display: block;
background: url("/me/suggest/suggest-logo.png");
width: 104px;
height: 35px;
margin: 10px auto 15px auto;
}
}
/*意见反馈主体*/
.suggest-content {
border-top: 1px solid #e0e0e0;
.suggest-item {
width: 100%;
color: #444;
border-top: 1px solid #e0e0e0;
border-bottom: 30px solid #f0f0f0;
overflow: hidden;
.suggest-item-img {
width: 100%;
overflow: hidden;
> img {
margin: 0 auto;
display: block;
max-width: 100%;
}
}
> h2 {
font-size: 38px;
margin: 30px 0 31px 0;
padding: 0 35px;
}
> p {
font-size: 26px;
line-height: 48px;
padding: 0 35px;
}
.suggest-type {
margin-top: 29px - 11px;
height: 88px;
line-height: 88px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
color: #b0b0b0;
font-size: 26px;
display: none;
text-align: center;
&.suggest-active {
> div {
width: 50%;
height: 100%;
float: left;
text-align: left;
padding-left: 128px;
box-sizing: border-box;
&:nth-last-of-type(1) {
padding-left: 0;
padding-right: 128px;
text-align: right;
float: right;
> span {
display: inline-block;
height: 100%;
overflow: hidden;
&:nth-of-type(1) {
transform: rotate(180deg);
}
}
}
}
}
> .active {
color: #444;
}
&.show {
display: block;
}
&.suggest-bad {
> div {
> span {
display: inline-block;
height: 100%;
overflow: hidden;
&:nth-of-type(1) {
transform: rotate(180deg);
}
}
}
}
}
}
}
/*发表意见*/
.create-new-suggest {
display: block;
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
font-size: 30px;
border-top: 30px solid #f0f0f0;
border-bottom: 30px solid #f0f0f0;
position: relative;
.list-item {
padding: 0 35px;
}
.new-right {
float: right;
margin-left: 40px;
color: #e0e0e0;
}
a {
color: #444;
display: inline-block;
}
}
}
/*提交页面*/
.yoho-suggest-sub-page {
width: 100%;
background: #f0f0f0;
.suggest-sub-form {
background: #fff;
width: 100%;
#suggest-textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 100%;
height: 255px;
max-height: 255px;
min-height: 255px;
padding: 30px;
font-size: 26px;
line-height: 48px;
color: #000;
display: block;
background: #fff;
border: none;
outline: none;
resize: none;
}
.img-form {
padding: 0 30px;
padding-top: 40px;
overflow: hidden;
.upload-img-list {
float: left;
> li {
display: block;
width: 130px;
height: 130px;
float: left;
margin-right: 30px;
background: resolve('loading.gif') center center no-repeat;
background-size: 50%;
position: relative;
> img {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
> span {
display: block;
background: url("/me/suggest/sub_del.png");
width: 42px;
height: 42px;
position: absolute;
top: -21px;
right: -21px;
}
}
}
.img-add {
display: block;
width: 130px;
height: 130px;
border: 1px dashed #e0e0e0;
position: relative;
text-indent: -1000px;
float: left;
&:after {
content: '';
display: block;
background: url("/me/suggest/suggest-add.png");
width: 72px;
height: 72px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -36px;
margin-left: -36px;
}
input[type="file"], {
position: absolute;
opacity: 0.2;
border: none;
outline: none;
display: block;
width: 130px;
height: 130px;
top: 0;
left: 0;
}
}
}
}
}
/*dialog*/
.dialog-wrapper {
background: hsla(0, 0%, 0%, .5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
.dialog-box {
width: 540px;
border-radius: 20px;
background: hsla(100, 100%, 100%, .8);
position: absolute;
left: 50%;
margin-left: -270px;
font-size: 30px;
text-align: center;
color: #000;
}
.dialog-content {
padding: 60px 30px;
}
.dialog-footer {
border-top: 1px solid #ccc;
height: 88px;
line-height: 88px;
> span {
display: block;
width: 50%;
height: 100%;
float: left;
box-sizing: border-box;
&:nth-last-of-type(1) {
border-left: 1px solid #ccc;
color: #ee0011;
}
}
> span:active {
background-color: #ccc;
}
}
}
... ...