Merge branch 'feature/wap/postcss' into develop/wap

@@ -248,16 +248,23 @@ class CartData
      *
      * @param int $uid 用户ID
      * @param string $cartType 购物车类型，ordinary表示普通购物车
-     * @param int $isUseYohoCoin 是否使用有货币，默认0不使用, 1使用
+     * @param int $isUseYohoCoin 是否使用有货币，0不使用, 1使用
+     * @param string $skuList 购买限购商品时需要传递的参数
      * @return array 接口返回的数据
      */
-    public static function cartPay($uid, $cartType, $isUseYohoCoin = 0)
+    public static function cartPay($uid, $cartType, $isUseYohoCoin, $skuList)
     {
         $param = Yohobuy::param();
         $param['method'] = 'app.Shopping.payment';
         $param['cart_type'] = $cartType;
         $param['yoho_coin_mode'] = $isUseYohoCoin;
         $param['uid'] = $uid;
+
+        // 购买限购商品时需要传递product_sku_list参数
+        if (!empty($skuList)) {
+            $param['product_sku_list'] = $skuList;
+        }
+
         $param['client_secret'] = Sign::getSign($param);
 
         return Yohobuy::get(Yohobuy::API_URL, $param);
@@ -272,9 +279,10 @@ class CartData
      * @param int $paymentType 支付方式，1表示在线支付，2表示货到付款
      * @param string $couponCode 优惠券码
      * @param mixed $yohoCoin 使用的YOHO币数量
+     * @param string $skuList 购买限购商品时需要传递的参数
      * @return array 接口返回的数据
      */
-    public static function orderCompute($uid, $cartType, $deliveryWay, $paymentType, $couponCode, $yohoCoin)
+    public static function orderCompute($uid, $cartType, $deliveryWay, $paymentType, $couponCode, $yohoCoin, $skuList)
     {
         $param = Yohobuy::param();
         $param['method'] = 'app.Shopping.compute';
@@ -288,6 +296,11 @@ class CartData
             $param['use_yoho_coin'] = $yohoCoin;
         }
 
+        // 购买限购商品时需要传递product_sku_list参数
+        if (!empty($skuList)) {
+            $param['product_sku_list'] = $skuList;
+        }
+
         $param['uid'] = $uid;
         $param['client_secret'] = Sign::getSign($param);
 
@@ -346,9 +359,10 @@ class CartData
      * @param string $remark 留言
      * @param string $couponCode 优惠券码
      * @param mixed $yohoCoin 使用的YOHO币数量或为空
+     * @param string $skuList 购买限购商品时需要传递的参数
      * @return array 接口返回的数据
      */
-    public static function orderSub($uid, $addressId, $cartType, $deliveryTime, $deliveryWay, $invoiceTitle, $invoiceId, $paymentId, $paymentType, $remark, $couponCode, $yohoCoin)
+    public static function orderSub($uid, $addressId, $cartType, $deliveryTime, $deliveryWay, $invoiceTitle, $invoiceId, $paymentId, $paymentType, $remark, $couponCode, $yohoCoin, $skuList)
     {
         $param = Yohobuy::param();
         $param['debug'] = 'Y';
@@ -375,6 +389,12 @@ class CartData
         if (!empty($yohoCoin)) {
             $param['use_yoho_coin'] = $yohoCoin;
         }
+
+        // 购买限购商品时需要传递product_sku_list参数
+        if (!empty($skuList)) {
+            $param['product_sku_list'] = $skuList;
+        }
+
         $param['uid'] = $uid;
         $param['client_secret'] = Sign::getSign($param);
 

@@ -35,6 +35,20 @@ class UserData
     }
 
     /**
+     * 获取个人中心公告有关数据
+     *
+     * @return mixed
+     */
+    public static function noticeData()
+    {
+        $param = Yohobuy::param();
+        $param['method'] = 'app.resources.getNotices';
+        $param['client_secret'] = Sign::getSign($param);
+
+        return Yohobuy::get(Yohobuy::API_URL, $param);
+    }
+
+    /**
      * 个人中心页面优惠券，收藏的商品等的数目数据
      *
      * @param int $uid 用户ID

+/**
+ * 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,7 +16,11 @@ var fs = require('fs'),
     transport = require('gulp-spm'),
     concat = require('gulp-concat');
 
-var config = JSON.parse(fs.readFileSync('./package.json').toString());
+var postcss = require('gulp-postcss');
+var sourcemaps = require('gulp-sourcemaps');
+var cssnano = require('gulp-cssnano');
+
+var config = require('./package');
 
 var rootDist = 'dist/myohobuy/',
     ftpConfig = {
@@ -32,31 +36,112 @@ var distDir = {
     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');
+gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);
+
+
+//根据环境变量生成postcss插件配置
+function postcssEnvPlugin(env) {
+    var sprites = {
+        spritesmith: {
+            padding: 4
+        },
+        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']);
 });
 
-// compass watch
-gulp.task('compass-watch', function() {
-    gulp.watch('sass/**/*.scss', ['compass']);
+//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');
+    var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001，H5 用8000, 跑两个服务器，不冲突
 
     // sd.stdout.on('data', function(data) {
     //     console.log(data);
@@ -72,10 +157,10 @@ gulp.task('spm-doc', function() {
 });
 
 //生成发布目录，可用于上传测试机
-gulp.task('ge', ['assets', 'compass-production', 'build']);
+gulp.task('ge', ['assets', 'postcss-pro', 'build']);
 
 //发布
-gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
+gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
     var ftpstream = ftp(ftpConfig);
 
     return gulp.src('dist/**/')
@@ -84,30 +169,16 @@ gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
 });
 
 //font+img->dist/assets
-gulp.task('assets', function() {
-    gulp.src('img/**')
+gulp.task('assets', ['img', 'font']);
+
+gulp.task('img', function() {
+    return 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');
-        });
+gulp.task('font', function() {
+    return gulp.src('font/*')
+        .pipe(gulp.dest(distDir.font))
 });
 
 //spm build
@@ -166,7 +237,7 @@ gulp.task('concat-min-libs', ['pre-libs'], function() {
 
     fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
 
-    return gulp.src(['js/sea.js', distDir.js + '/libs.js'])
+    return gulp.src(['plugin/sea.js', distDir.js + '/libs.js'])
         .pipe(concat('lib.js'))
         .pipe(uglify())
         .pipe(gulp.dest(distDir.js));
@@ -190,4 +261,4 @@ gulp.task('business', ['libs'], function() {
         .pipe(uglify())
         .pipe(concat('index.js'))
         .pipe(gulp.dest(distDir.js));
-});
\ No newline at end of file
+});

@@ -37,7 +37,8 @@ function getInstance() {
     return dialogTemplate;
 }
 
-exports.showDialog = function(data, callback, callbackForLeft) {
+// fullWithBtn是供详情页获取限购码使用的特殊参数
+exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
 
     var dialogTemplate = getInstance(),
         dialogStr = dialogTemplate(data),
@@ -51,6 +52,8 @@ exports.showDialog = function(data, callback, callbackForLeft) {
 
     $dialogBox = $('.dialog-box');
     $dialogWrapper = $('.dialog-wrapper');
+
+
     dialogWrapperHammer = new Hammer(document.getElementById('dialog-wrapper'));
 
     // 显示
@@ -62,6 +65,15 @@ exports.showDialog = function(data, callback, callbackForLeft) {
         $dialogWrapper.fadeIn();
     }
 
+    if (fullWithBtn) {
+        $('.dialog-wrapper .dialog-footer > span').css('width', '100%');
+        $('.dialog-wrapper .dialog-content').css({
+            'padding-left': '1.85rem',
+            'padding-right': '1.85rem'
+        });
+        $dialogWrapper.css('z-index', '10');
+    }
+
     $dialogBox.css({
         top: '50%',
         marginTop: -($dialogBox.height() / 2)

@@ -18,6 +18,11 @@ var goodsDiscountEl = document.getElementById('goodsDiscount'),
 
 var $cart = $('.cart-bar');
 
+var limitSaleBtn = document.getElementById('limit-sale'),
+    limitSaleHammer = limitSaleBtn && new Hammer(limitSaleBtn);
+
+var dialog = require('../../me/dialog');
+
 //add extra marign-bottom for footer to show the yoho copyright
 function showFooter() {
     var $cartBar = $('.cart-bar');
@@ -75,6 +80,25 @@ if (goodsDiscountHammer && $discountFolder.children().length > 0) {
     });
 }
 
+limitSaleHammer ? limitSaleHammer.on('tap', function(e) {
+    e.srcEvent.stopPropagation();
+    dialog.showDialog({
+        dialogText: '进入有货APP尖货频道分享\n以获取限购码',
+        hasFooter: {
+            rightBtnText: '打开Yoho!Buy有货APP'
+        }
+    }, function() {
+        console.log('111');
+    }, undefined, true);
+
+    $('.dialog-wrapper').off('touchstart').on('touchstart', function(e) {
+        e.stopPropagation();
+        if ($(e.target).hasClass('dialog-wrapper')) {
+            dialog.hideDialog();
+        }
+    });
+}) : null;
+
 require('./desc');
 require('./comments-consults');
 require('../recommend-for-you-product-desc');

@@ -34,18 +34,33 @@
     }
   },
   "devDependencies": {
+    "autoprefixer": "^6.3.3",
     "father": "^1.0.0",
     "gulp": "^3.9.0",
     "gulp-compass": "^2.1.0",
     "gulp-concat": "^2.6.0",
+    "gulp-cssnano": "^2.1.1",
     "gulp-ftp": "^1.0.4",
+    "gulp-postcss": "^6.1.0",
+    "gulp-sourcemaps": "^1.6.0",
     "gulp-spm": "^0.11.3",
     "gulp-uglify": "^1.4.2",
     "gulp-util": "^3.0.6",
-    "spm": "3"
+    "postcss-assets": "^4.0.1",
+    "postcss-calc": "^5.2.0",
+    "postcss-center": "^1.0.0",
+    "postcss-clearfix": "^0.2.1",
+    "postcss-crip": "^2.0.0",
+    "postcss-position": "^0.4.0",
+    "postcss-pxtorem": "^3.3.1",
+    "postcss-short": "^1.4.0",
+    "postcss-sprites": "^3.1.0",
+    "postcss-use": "^2.0.2",
+    "precss": "^1.4.0",
+    "spm": "3.4"
   },
   "scripts": {
     "test": "spm test",
     "build": "spm build"
   }
-}
\ No newline at end of file
+}

@@ -276,6 +276,7 @@ $basicBtnC:#eb0313;
         }
     }
     .price-date {
+        position: relative;
         width: 100%;
         color: $subFontC;
         height: pxToRem(88px);
@@ -284,6 +285,30 @@ $basicBtnC:#eb0313;
         background-color: #fff;
         border-bottom: 1px solid $borderC;
     }
+
+    .limit-sale {
+        position: absolute;
+        right: pxToRem(84px);
+        top: pxToRem(24px);
+        color: #d0021b;
+        border: 2px solid #d0021b;
+        background-color: #fff;
+        border-radius: pxToRem(40px);
+        padding: pxToRem(4px) pxToRem(20px);
+        font-size: pxToRem(24px);
+        font-weight: bold;
+    }
+
+    .limit-sale:active {
+        background-color: #f0f0f0;
+    }
+
+    .got-limit-sale {
+        @extend .limit-sale;
+        color: #ccc;
+        border-color: #ccc;
+    }
+
     .goodsPrice {
         float: left;
         font-size: pxToRem(34.59px);
@@ -367,7 +392,7 @@ $basicBtnC:#eb0313;
     }
     .goodsDiscount {
         display: block;
-        width: 100%; 
+        width: 100%;
         height:auto;
         font-size: pxToRem(28px);
         color: $mainFontC;

+.limit-good-page {
+    background-color: #f4f4f4;
+    color: #444;
+
+    .top {
+        font-size: 0.6rem;
+        height: 2rem;
+        line-height: 2.2rem;
+        margin-bottom: 0.1rem;
+        background-color: #fff;
+        padding: 0.2rem 0;
+
+
+        div {
+            width: 20%;
+            display: inline-block;
+            float: left;
+            img {
+                width: 1.5rem;
+                border: 1px solid #ccc;
+                border-radius: 100%;
+                position: relative;
+                top: 0.25rem;
+            }
+        }
+
+        p {
+            display: inline-block;
+            float: left;
+            width: 80%;
+        }
+    }
+
+    .detail {
+        background-color: #fff;
+        padding: 0.6rem 0.8rem;
+        border-bottom: 1px solid #e6e6e6;
+
+        .name {
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
+        }
+        .sale-info {
+            height: 1rem;
+            line-height: 1rem;
+        }
+        .price {
+            font-size: 0.8rem;
+            color: #d0021b;
+            float: left;
+         }
+
+        .date {
+            font-size: 0.6rem;
+            float: right;
+
+            .text {
+                position: relative;
+                top: 0.08rem;
+            }
+        }
+    }
+
+    .goodDesc {
+        margin-top: 1rem;
+    }
+
+    .bottom {
+        background-color: #fff;
+        border-top: 1px solid #e6e6e6;
+        padding: 0.5rem 2rem 2rem 2rem;
+        height: 3rem;
+        position: absolute;
+        bottom: 0;
+        width: 12rem;
+        margin: 0 auto;
+
+        .logo {
+            width: 100;
+            height: 2.5rem;
+
+            background-image: image-url('logo-bottom.png');
+            background-size: 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        .btn {
+            font-size: 0.8rem;
+            background-color: #fff;
+            border: 1px solid #444;
+            border-radius: 0.2rem;
+            padding: 0.3rem 0.6rem;
+        }
+
+        .btn:active {
+            background-color: #ccc;
+        }
+
+        .left, .right {
+            display: inline-block;
+            float: left;
+        }
+
+        .left {
+            width: 39%;
+        }
+
+        .right {
+            width: 60%;
+            font-size: 0.65rem;
+
+            span {
+                display: block;
+                width: 95%;
+                margin: 0 auto;
+            }
+        }
+    }
+}

+.filter-mask, .filter-body {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+
+.filter-mask {
+    height: 100%;
+    background: rgba(0,0,0,0.1);
+}
+
+.filter-body {
+    background: #fff;
+    color: #000;
+    cursor: pointer;
+    font-size: 14px;
+    height: 440px;
+
+    .classify {
+        width: 50%;
+        height: 100%;
+        background: #f8f8f8;
+
+        > li {
+            height: 60px;
+            line-height: 60px;
+
+            > * {
+                box-sizing: border-box;
+            }
+
+            &.active {
+                background: #fff;
+            }
+
+            .shower {
+                padding-left: 20px;
+                width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #333;
+
+                &.highlight {
+                    background: #eee;
+                }
+            }
+
+            .default {
+                color: #999;
+            }
+
+            .title {
+                float: left;
+                color: #000;
+            }
+
+        }
+    }
+
+    .sub-classify {
+        position: absolute;
+        display: none;
+        width: 50%;
+        height: 440px;
+        left: 50%;
+        top: 0;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        > li {
+            height: 60px;
+            line-height: 60px;
+            padding-left: 15px;
+            border-bottom: 1px solid #e6e6e6;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            &.highlight {
+                background: #eee;
+            }
+        }
+
+        .chosed-icon {
+            display: none;
+        }
+
+        .chosed .chosed-icon {
+            display: inline;
+        }
+    }
+
+    .active > .sub-classify {
+        display: block;
+    }
+}