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

+/**
+ * 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));
-});

@@ -2,10 +2,10 @@
  * GULP-FILE
  * GULP-FILE
  * author: xuqi(qi.xu@yoho.cn)
  * author: xuqi(qi.xu@yoho.cn)
  * date: 2015/9/30
  * date: 2015/9/30
- * 根据 PC 版修改为 H5 版， 毕凯
  */
  */
 
 
 var gulp = require('gulp'),
 var gulp = require('gulp'),
+    compass = require('gulp-compass'),
     cp = require('child_process');
     cp = require('child_process');
 
 
 var fs = require('fs'),
 var fs = require('fs'),
@@ -16,11 +16,7 @@ var fs = require('fs'),
     transport = require('gulp-spm'),
     transport = require('gulp-spm'),
     concat = require('gulp-concat');
     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/',
 var rootDist = 'dist/myohobuy/',
     ftpConfig = {
     ftpConfig = {
@@ -36,112 +32,31 @@ var distDir = {
     font: rootDist + 'assets/font'
     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
 // start spm server
 gulp.task('spm-doc', function() {
 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) {
     // sd.stdout.on('data', function(data) {
     //     console.log(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);
     var ftpstream = ftp(ftpConfig);
 
 
     return gulp.src('dist/**/')
     return gulp.src('dist/**/')
@@ -169,16 +84,30 @@ gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
 });
 });
 
 
 //font+img->dist/assets
 //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));
         .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
 //spm build
@@ -237,7 +166,7 @@ gulp.task('concat-min-libs', ['pre-libs'], function() {
 
 
     fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
     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(concat('lib.js'))
         .pipe(uglify())
         .pipe(uglify())
         .pipe(gulp.dest(distDir.js));
         .pipe(gulp.dest(distDir.js));
@@ -261,4 +190,4 @@ gulp.task('business', ['libs'], function() {
         .pipe(uglify())
         .pipe(uglify())
         .pipe(concat('index.js'))
         .pipe(concat('index.js'))
         .pipe(gulp.dest(distDir.js));
         .pipe(gulp.dest(distDir.js));
-});
+});

@@ -6,6 +6,7 @@
 var $ = require('jquery'),
 var $ = require('jquery'),
     Swiper = require('yoho.iswiper'),
     Swiper = require('yoho.iswiper'),
     lazyLoad = require('yoho.lazyload'),
     lazyLoad = require('yoho.lazyload'),
+    noticeScroll = require('../plugin/notice-scroll'),
     $mobileWrap = $('.mobile-wrap'),
     $mobileWrap = $('.mobile-wrap'),
     $overlay = $('.overlay'),
     $overlay = $('.overlay'),
     $sideNav = $('.side-nav'),
     $sideNav = $('.side-nav'),
@@ -24,6 +25,7 @@ var start = 0,
     isen = true;
     isen = true;
 
 
 lazyLoad($('img.lazy'));
 lazyLoad($('img.lazy'));
+noticeScroll('.notice', $('.notice').data('time') * 1000);
 
 
 $('.nav-btn').on('touchstart', function() {
 $('.nav-btn').on('touchstart', function() {
     $sideNav.css('pointer-events', 'none');
     $sideNav.css('pointer-events', 'none');

@@ -3,7 +3,9 @@
  * @author: bikai<kai.bi@yoho.cn>
  * @author: bikai<kai.bi@yoho.cn>
  * @date: 2015/11/12
  * @date: 2015/11/12
  */
  */
-var $ = require('jquery');
+var $ = require('jquery'),
+    noticeScroll = require('../plugin/notice-scroll');
+
 var $userAvatar = $('.user-avatar'),
 var $userAvatar = $('.user-avatar'),
     $listItem = $('.list-item');
     $listItem = $('.list-item');
 var myImage = new Image(),
 var myImage = new Image(),
@@ -19,6 +21,8 @@ myImage.onload = function() {
     $userAvatar.css('background-image', 'url(' + avatar + ')');
     $userAvatar.css('background-image', 'url(' + avatar + ')');
 };
 };
 
 
+noticeScroll('.notice', $('.notice').data('time') * 1000);
+
 $('.yoho-page').on('touchstart', '.list-item, .type-item, .order-title', function() {
 $('.yoho-page').on('touchstart', '.list-item, .type-item, .order-title', function() {
     $listItem.removeClass('highlight');
     $listItem.removeClass('highlight');
     $(this).addClass('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;

+.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);
+}

@@ -17,6 +17,7 @@
 @import "hot-category";
 @import "hot-category";
 @import "home-header";
 @import "home-header";
 @import "thumb-row";
 @import "thumb-row";
+@import "notice";
 
 
 .mobile-container{
 .mobile-container{
     width: 100%;
     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;
+        }
+    }
+}