Authored by 王水玲

posscss 修改

1 -/**  
2 - * GULP-FILE  
3 - * author: xuqi(qi.xu@yoho.cn)  
4 - * date: 2015/9/30  
5 - * 根据 PC 版修改为 H5 版, 毕凯  
6 - */  
7 -  
8 -var gulp = require('gulp'),  
9 - cp = require('child_process');  
10 -  
11 -var fs = require('fs'),  
12 - ftp = require('gulp-ftp'),  
13 - gutil = require('gulp-util'),  
14 - uglify = require('gulp-uglify'),  
15 - Package = require('father').SpmPackage,  
16 - transport = require('gulp-spm'),  
17 - concat = require('gulp-concat');  
18 -  
19 -var postcss = require('gulp-postcss');  
20 -var sourcemaps = require('gulp-sourcemaps');  
21 -var cssnano = require('gulp-cssnano');  
22 -  
23 -var config = require('./package');  
24 -  
25 -var rootDist = 'dist/myohobuy/',  
26 - ftpConfig = {  
27 - host: '218.94.75.58',  
28 - user: 'php',  
29 - pass: 'yoho9646'  
30 - };  
31 -  
32 -var distDir = {  
33 - js: rootDist + config.version,  
34 - css: rootDist + config.version,  
35 - img: rootDist + 'assets/img',  
36 - font: rootDist + 'assets/font'  
37 -};  
38 -  
39 -gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);  
40 -  
41 -  
42 -//根据环境变量生成postcss插件配置  
43 -function postcssEnvPlugin(env) {  
44 - var sprites = {  
45 - spritesmith: {  
46 - padding: 10  
47 - },  
48 - groupBy: function(file) {  
49 -  
50 - // 根据目录分组,防止合并后的图片太大  
51 - var group = file.url.split('/')[1];  
52 -  
53 - file.retina = true; // H5 强制所有图片都是用二倍图  
54 - return group ? Promise.resolve(group) : Promise.reject();  
55 - },  
56 - filterBy: function(file) {  
57 -  
58 - //使用resolve转化后静态资源生成../img或者../assets/img/的路径  
59 - if (/\/img/.test(file.url) || /data:image/.test(file.url)) {  
60 - return Promise.reject();  
61 - }  
62 - return Promise.resolve();  
63 - }  
64 - },  
65 - assets;  
66 -  
67 - if (env === 'DEV') {  
68 - assets = {  
69 - loadPaths: ['font/', 'img/'],  
70 - relativeTo: 'css/'  
71 - };  
72 -  
73 - Object.assign(sprites, {  
74 - basePath: './img',  
75 - stylesheetPath: './css',  
76 - spritePath: './img'  
77 - });  
78 - } else if (env === 'PRO') {  
79 - assets = {  
80 - loadPaths: [distDir.img, distDir.font],  
81 - relativeTo: distDir.css,  
82 - cachebuster: function(filePath, urlPathname) {  
83 -  
84 - //只给字体加no-cache  
85 - if (/font\//.test(urlPathname)) {  
86 - return fs.statSync(filePath).mtime.getTime().toString(16);  
87 - }  
88 - }  
89 - };  
90 -  
91 - Object.assign(sprites, {  
92 - basePath: distDir.img,  
93 - stylesheetPath: distDir.css,  
94 - spritePath: distDir.img  
95 - });  
96 - }  
97 -  
98 - return [  
99 - require('precss'),  
100 - require('postcss-assets')(assets),  
101 - require('postcss-sprites').default(sprites),  
102 - require('postcss-calc'),  
103 - require('postcss-pxtorem')({  
104 - rootValue: 40,  
105 - unitPrecision: 5, // 保留5位小数字  
106 - minPixelValue: 2, // 小于 2px 时,不转换, 单位为 PX 大写的时候不转换  
107 - selectorBlackList: [], // 选择器黑名单,可以使用正则  
108 - propWhiteList: [] // 属性名称为空,表示替换所有属性的值  
109 - }),  
110 - require('autoprefixer')({  
111 - browsers: ['> 1%']  
112 - }),  
113 -  
114 - //可选  
115 - require('postcss-use')({  
116 - modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']  
117 - })  
118 - ];  
119 -}  
120 -  
121 -//Postcss开发环境  
122 -gulp.task('postcss-dev', function() {  
123 - return gulp.src('sass/index.css')  
124 - .pipe(sourcemaps.init())  
125 - .pipe(postcss(postcssEnvPlugin('DEV')))  
126 - .pipe(sourcemaps.write('.'))  
127 - .pipe(gulp.dest('css/'))  
128 -});  
129 -  
130 -gulp.task('postcss-watch', function() {  
131 - gulp.watch('sass/**/*.css', ['postcss-dev']);  
132 -});  
133 -  
134 -//Postcss正式环境生成  
135 -gulp.task('postcss-pro', ['assets'], function() {  
136 - return gulp.src('sass/index.css')  
137 - .pipe(postcss(postcssEnvPlugin('PRO')))  
138 - .pipe(cssnano())  
139 - .pipe(gulp.dest(distDir.css))  
140 -});  
141 -  
142 -// start spm server  
143 -gulp.task('spm-doc', function() {  
144 - var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001,H5 用8000, 跑两个服务器,不冲突  
145 -  
146 - // sd.stdout.on('data', function(data) {  
147 - // console.log(data);  
148 - // });  
149 -  
150 - sd.stderr.on('data', function(data) {  
151 - console.log(data);  
152 - });  
153 -  
154 - sd.on('exit', function(code) {  
155 - console.log('process spm doc exit with code ' + code);  
156 - });  
157 -});  
158 -  
159 -//生成发布目录,可用于上传测试机  
160 -gulp.task('ge', ['assets', 'postcss-pro', 'build']);  
161 -  
162 -//发布  
163 -gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {  
164 - var ftpstream = ftp(ftpConfig);  
165 -  
166 - return gulp.src('dist/**/')  
167 - .pipe(ftpstream)  
168 - .pipe(gutil.noop());  
169 -});  
170 -  
171 -//font+img->dist/assets  
172 -gulp.task('assets', ['img', 'font']);  
173 -  
174 -gulp.task('img', function() {  
175 - return gulp.src('img/**/*')  
176 - .pipe(gulp.dest(distDir.img));  
177 -});  
178 -  
179 -gulp.task('font', function() {  
180 - return gulp.src('font/*')  
181 - .pipe(gulp.dest(distDir.font))  
182 -});  
183 -  
184 -//spm build  
185 -gulp.task('build', ['libs', 'business']);  
186 -  
187 -//libs  
188 -gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);  
189 -  
190 -gulp.task('pre-libs', function() {  
191 - var obj = {  
192 - name: '',  
193 - version: config.version,  
194 - spm: config.spm  
195 - };  
196 - var packages = [],  
197 - libsjs = '';  
198 -  
199 - var libCon, key, i;  
200 -  
201 - var pkg;  
202 -  
203 - obj.spm.main = 'libs.js';  
204 - obj.spm.buildArgs = '--idleading {{}} --include all';  
205 -  
206 - libCon = JSON.stringify(obj);  
207 -  
208 - fs.renameSync('package.json', 'package.bak.json');  
209 - fs.writeFileSync('package.json', libCon);  
210 -  
211 - for (key in obj.spm.dependencies) {  
212 - if (obj.spm.inside && obj.spm.inside[key]) {  
213 - packages.push(obj.spm.inside[key]);  
214 - } else {  
215 - packages.push(key);  
216 - }  
217 - }  
218 -  
219 - for (i = 0; i < packages.length; i++) {  
220 - libsjs += 'require("' + packages[i] + '");';  
221 - }  
222 -  
223 - fs.writeFileSync('libs.js', libsjs); //重写入口文件  
224 -  
225 - pkg = new Package(__dirname);  
226 -  
227 - return gulp.src(pkg.main)  
228 - .pipe(transport({  
229 - pkg: pkg  
230 - }))  
231 - .pipe(gulp.dest(distDir.js));  
232 -});  
233 -  
234 -gulp.task('concat-min-libs', ['pre-libs'], function() {  
235 - var path = distDir.js + '/libs.js';  
236 - var jsStr = fs.readFileSync(path).toString();  
237 -  
238 - fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));  
239 -  
240 - return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js'])  
241 - .pipe(concat('lib.js'))  
242 - .pipe(uglify())  
243 - .pipe(gulp.dest(distDir.js));  
244 -});  
245 -  
246 -gulp.task('clear-libs', ['concat-min-libs'], function() {  
247 - fs.renameSync('package.bak.json', 'package.json');  
248 - fs.unlinkSync('./libs.js');  
249 - fs.unlinkSync(distDir.js + '/libs.js');  
250 -});  
251 -  
252 -gulp.task('business', ['libs'], function() {  
253 - var pkg = new Package(__dirname);  
254 -  
255 - return gulp.src(pkg.main)  
256 - .pipe(transport({  
257 - pkg: pkg  
258 - }))  
259 - .pipe(concat('index-debug.js'))  
260 - .pipe(gulp.dest(distDir.js))  
261 - .pipe(uglify())  
262 - .pipe(concat('index.js'))  
263 - .pipe(gulp.dest(distDir.js));  
264 -});  
  1 +/**
  2 + * GULP-FILE
  3 + * author: xuqi(qi.xu@yoho.cn)
  4 + * date: 2015/9/30
  5 + */
  6 +
  7 +var gulp = require('gulp'),
  8 + compass = require('gulp-compass'),
  9 + cp = require('child_process');
  10 +
  11 +var fs = require('fs'),
  12 + ftp = require('gulp-ftp'),
  13 + gutil = require('gulp-util'),
  14 + uglify = require('gulp-uglify'),
  15 + Package = require('father').SpmPackage,
  16 + transport = require('gulp-spm'),
  17 + concat = require('gulp-concat');
  18 +
  19 +var config = JSON.parse(fs.readFileSync('./package.json').toString());
  20 +
  21 +var rootDist = 'dist/myohobuy/',
  22 + ftpConfig = {
  23 + host: '218.94.75.58',
  24 + user: 'php',
  25 + pass: 'yoho9646'
  26 + };
  27 +
  28 +var distDir = {
  29 + js: rootDist + config.version,
  30 + css: rootDist + config.version,
  31 + img: rootDist + 'assets/img',
  32 + font: rootDist + 'assets/font'
  33 +};
  34 +
  35 +gulp.task('default', ['compass', 'compass-watch', 'spm-doc']);
  36 +
  37 +// compass
  38 +gulp.task('compass', function() {
  39 + gulp.src('sass/**/*.scss')
  40 + .pipe(
  41 + compass({
  42 + config_file: 'config.rb',
  43 + css: 'css',
  44 + sass: 'sass'
  45 + })
  46 + ).on('error', function(error) {
  47 + console.log(error);
  48 + this.emit('end');
  49 + });
  50 +});
  51 +
  52 +// compass watch
  53 +gulp.task('compass-watch', function() {
  54 + gulp.watch('sass/**/*.scss', ['compass']);
  55 +});
  56 +
  57 +// start spm server
  58 +gulp.task('spm-doc', function() {
  59 + var sd = cp.exec('spm doc');
  60 +
  61 + // sd.stdout.on('data', function(data) {
  62 + // console.log(data);
  63 + // });
  64 +
  65 + sd.stderr.on('data', function(data) {
  66 + console.log(data);
  67 + });
  68 +
  69 + sd.on('exit', function(code) {
  70 + console.log('process spm doc exit with code ' + code);
  71 + });
  72 +});
  73 +
  74 +//生成发布目录,可用于上传测试机
  75 +gulp.task('ge', ['assets', 'compass-production', 'build']);
  76 +
  77 +//发布
  78 +gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
  79 + var ftpstream = ftp(ftpConfig);
  80 +
  81 + return gulp.src('dist/**/')
  82 + .pipe(ftpstream)
  83 + .pipe(gutil.noop());
  84 +});
  85 +
  86 +//font+img->dist/assets
  87 +gulp.task('assets', function() {
  88 + gulp.src('img/**')
  89 + .pipe(gulp.dest(distDir.img));
  90 + gulp.src('font/*')
  91 + .pipe(gulp.dest(distDir.font));
  92 +});
  93 +
  94 +//compass
  95 +gulp.task('compass-production', ['assets'], function() {
  96 + gulp.src('sass/index.scss')
  97 + .pipe(
  98 + compass({
  99 + css: distDir.css,
  100 + sass: 'sass',
  101 + image: distDir.img,
  102 + font: distDir.font,
  103 + http_path: '/',
  104 + style: 'compressed'
  105 + })
  106 + )
  107 + .on('error', function(error) {
  108 + console.log(error);
  109 + this.emit('end');
  110 + });
  111 +});
  112 +
  113 +//spm build
  114 +gulp.task('build', ['libs', 'business']);
  115 +
  116 +//libs
  117 +gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);
  118 +
  119 +gulp.task('pre-libs', function() {
  120 + var obj = {
  121 + name: '',
  122 + version: config.version,
  123 + spm: config.spm
  124 + };
  125 + var packages = [],
  126 + libsjs = '';
  127 +
  128 + var libCon, key, i;
  129 +
  130 + var pkg;
  131 +
  132 + obj.spm.main = 'libs.js';
  133 + obj.spm.buildArgs = '--idleading {{}} --include all';
  134 +
  135 + libCon = JSON.stringify(obj);
  136 +
  137 + fs.renameSync('package.json', 'package.bak.json');
  138 + fs.writeFileSync('package.json', libCon);
  139 +
  140 + for (key in obj.spm.dependencies) {
  141 + if (obj.spm.inside && obj.spm.inside[key]) {
  142 + packages.push(obj.spm.inside[key]);
  143 + } else {
  144 + packages.push(key);
  145 + }
  146 + }
  147 +
  148 + for (i = 0; i < packages.length; i++) {
  149 + libsjs += 'require("' + packages[i] + '");';
  150 + }
  151 +
  152 + fs.writeFileSync('libs.js', libsjs); //重写入口文件
  153 +
  154 + pkg = new Package(__dirname);
  155 +
  156 + return gulp.src(pkg.main)
  157 + .pipe(transport({
  158 + pkg: pkg
  159 + }))
  160 + .pipe(gulp.dest(distDir.js));
  161 +});
  162 +
  163 +gulp.task('concat-min-libs', ['pre-libs'], function() {
  164 + var path = distDir.js + '/libs.js';
  165 + var jsStr = fs.readFileSync(path).toString();
  166 +
  167 + fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
  168 +
  169 + return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js'])
  170 + .pipe(concat('lib.js'))
  171 + .pipe(uglify())
  172 + .pipe(gulp.dest(distDir.js));
  173 +});
  174 +
  175 +gulp.task('clear-libs', ['concat-min-libs'], function() {
  176 + fs.renameSync('package.bak.json', 'package.json');
  177 + fs.unlinkSync('./libs.js');
  178 + fs.unlinkSync(distDir.js + '/libs.js');
  179 +});
  180 +
  181 +gulp.task('business', ['libs'], function() {
  182 + var pkg = new Package(__dirname);
  183 +
  184 + return gulp.src(pkg.main)
  185 + .pipe(transport({
  186 + pkg: pkg
  187 + }))
  188 + .pipe(concat('index-debug.js'))
  189 + .pipe(gulp.dest(distDir.js))
  190 + .pipe(uglify())
  191 + .pipe(concat('index.js'))
  192 + .pipe(gulp.dest(distDir.js));
  193 +});
@@ -2,10 +2,10 @@ @@ -2,10 +2,10 @@
2 * GULP-FILE 2 * GULP-FILE
3 * author: xuqi(qi.xu@yoho.cn) 3 * author: xuqi(qi.xu@yoho.cn)
4 * date: 2015/9/30 4 * date: 2015/9/30
  5 + * 根据 PC 版修改为 H5 版, 毕凯
5 */ 6 */
6 7
7 var gulp = require('gulp'), 8 var gulp = require('gulp'),
8 - compass = require('gulp-compass'),  
9 cp = require('child_process'); 9 cp = require('child_process');
10 10
11 var fs = require('fs'), 11 var fs = require('fs'),
@@ -16,7 +16,11 @@ var fs = require('fs'), @@ -16,7 +16,11 @@ var fs = require('fs'),
16 transport = require('gulp-spm'), 16 transport = require('gulp-spm'),
17 concat = require('gulp-concat'); 17 concat = require('gulp-concat');
18 18
19 -var config = JSON.parse(fs.readFileSync('./package.json').toString()); 19 +var postcss = require('gulp-postcss');
  20 +var sourcemaps = require('gulp-sourcemaps');
  21 +var cssnano = require('gulp-cssnano');
  22 +
  23 +var config = require('./package');
20 24
21 var rootDist = 'dist/myohobuy/', 25 var rootDist = 'dist/myohobuy/',
22 ftpConfig = { 26 ftpConfig = {
@@ -32,31 +36,112 @@ var distDir = { @@ -32,31 +36,112 @@ var distDir = {
32 font: rootDist + 'assets/font' 36 font: rootDist + 'assets/font'
33 }; 37 };
34 38
35 -gulp.task('default', ['compass', 'compass-watch', 'spm-doc']); 39 +gulp.task('default', ['postcss-dev', 'postcss-watch', 'spm-doc']);
36 40
37 -// compass  
38 -gulp.task('compass', function() {  
39 - gulp.src('sass/**/*.scss')  
40 - .pipe(  
41 - compass({  
42 - config_file: 'config.rb',  
43 - css: 'css',  
44 - sass: 'sass'  
45 - })  
46 - ).on('error', function(error) {  
47 - console.log(error);  
48 - this.emit('end'); 41 +
  42 +//根据环境变量生成postcss插件配置
  43 +function postcssEnvPlugin(env) {
  44 + var sprites = {
  45 + spritesmith: {
  46 + padding: 10
  47 + },
  48 + groupBy: function(file) {
  49 +
  50 + // 根据目录分组,防止合并后的图片太大
  51 + var group = file.url.split('/')[1];
  52 +
  53 + file.retina = true; // H5 强制所有图片都是用二倍图
  54 + return group ? Promise.resolve(group) : Promise.reject();
  55 + },
  56 + filterBy: function(file) {
  57 +
  58 + //使用resolve转化后静态资源生成../img或者../assets/img/的路径
  59 + if (/\/img/.test(file.url) || /data:image/.test(file.url)) {
  60 + return Promise.reject();
  61 + }
  62 + return Promise.resolve();
  63 + }
  64 + },
  65 + assets;
  66 +
  67 + if (env === 'DEV') {
  68 + assets = {
  69 + loadPaths: ['font/', 'img/'],
  70 + relativeTo: 'css/'
  71 + };
  72 +
  73 + Object.assign(sprites, {
  74 + basePath: './img',
  75 + stylesheetPath: './css',
  76 + spritePath: './img'
  77 + });
  78 + } else if (env === 'PRO') {
  79 + assets = {
  80 + loadPaths: [distDir.img, distDir.font],
  81 + relativeTo: distDir.css,
  82 + cachebuster: function(filePath, urlPathname) {
  83 +
  84 + //只给字体加no-cache
  85 + if (/font\//.test(urlPathname)) {
  86 + return fs.statSync(filePath).mtime.getTime().toString(16);
  87 + }
  88 + }
  89 + };
  90 +
  91 + Object.assign(sprites, {
  92 + basePath: distDir.img,
  93 + stylesheetPath: distDir.css,
  94 + spritePath: distDir.img
49 }); 95 });
  96 + }
  97 +
  98 + return [
  99 + require('precss'),
  100 + require('postcss-assets')(assets),
  101 + require('postcss-sprites').default(sprites),
  102 + require('postcss-calc'),
  103 + require('postcss-pxtorem')({
  104 + rootValue: 40,
  105 + unitPrecision: 5, // 保留5位小数字
  106 + minPixelValue: 2, // 小于 2px 时,不转换, 单位为 PX 大写的时候不转换
  107 + selectorBlackList: [], // 选择器黑名单,可以使用正则
  108 + propWhiteList: [] // 属性名称为空,表示替换所有属性的值
  109 + }),
  110 + require('autoprefixer')({
  111 + browsers: ['> 1%']
  112 + }),
  113 +
  114 + //可选
  115 + require('postcss-use')({
  116 + modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
  117 + })
  118 + ];
  119 +}
  120 +
  121 +//Postcss开发环境
  122 +gulp.task('postcss-dev', function() {
  123 + return gulp.src('sass/index.css')
  124 + .pipe(sourcemaps.init())
  125 + .pipe(postcss(postcssEnvPlugin('DEV')))
  126 + .pipe(sourcemaps.write('.'))
  127 + .pipe(gulp.dest('css/'))
  128 +});
  129 +
  130 +gulp.task('postcss-watch', function() {
  131 + gulp.watch('sass/**/*.css', ['postcss-dev']);
50 }); 132 });
51 133
52 -// compass watch  
53 -gulp.task('compass-watch', function() {  
54 - gulp.watch('sass/**/*.scss', ['compass']); 134 +//Postcss正式环境生成
  135 +gulp.task('postcss-pro', ['assets'], function() {
  136 + return gulp.src('sass/index.css')
  137 + .pipe(postcss(postcssEnvPlugin('PRO')))
  138 + .pipe(cssnano())
  139 + .pipe(gulp.dest(distDir.css))
55 }); 140 });
56 141
57 // start spm server 142 // start spm server
58 gulp.task('spm-doc', function() { 143 gulp.task('spm-doc', function() {
59 - var sd = cp.exec('spm doc'); 144 + var sd = cp.exec('spm doc watch --port 8000'); // PC 用8001,H5 用8000, 跑两个服务器,不冲突
60 145
61 // sd.stdout.on('data', function(data) { 146 // sd.stdout.on('data', function(data) {
62 // console.log(data); 147 // console.log(data);
@@ -72,10 +157,10 @@ gulp.task('spm-doc', function() { @@ -72,10 +157,10 @@ gulp.task('spm-doc', function() {
72 }); 157 });
73 158
74 //生成发布目录,可用于上传测试机 159 //生成发布目录,可用于上传测试机
75 -gulp.task('ge', ['assets', 'compass-production', 'build']); 160 +gulp.task('ge', ['assets', 'postcss-pro', 'build']);
76 161
77 //发布 162 //发布
78 -gulp.task('dist', ['assets', 'compass-production', 'build'], function() { 163 +gulp.task('dist', ['assets', 'postcss-pro', 'build'], function() {
79 var ftpstream = ftp(ftpConfig); 164 var ftpstream = ftp(ftpConfig);
80 165
81 return gulp.src('dist/**/') 166 return gulp.src('dist/**/')
@@ -84,30 +169,16 @@ gulp.task('dist', ['assets', 'compass-production', 'build'], function() { @@ -84,30 +169,16 @@ gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
84 }); 169 });
85 170
86 //font+img->dist/assets 171 //font+img->dist/assets
87 -gulp.task('assets', function() {  
88 - gulp.src('img/**') 172 +gulp.task('assets', ['img', 'font']);
  173 +
  174 +gulp.task('img', function() {
  175 + return gulp.src('img/**/*')
89 .pipe(gulp.dest(distDir.img)); 176 .pipe(gulp.dest(distDir.img));
90 - gulp.src('font/*')  
91 - .pipe(gulp.dest(distDir.font));  
92 }); 177 });
93 178
94 -//compass  
95 -gulp.task('compass-production', ['assets'], function() {  
96 - gulp.src('sass/index.scss')  
97 - .pipe(  
98 - compass({  
99 - css: distDir.css,  
100 - sass: 'sass',  
101 - image: distDir.img,  
102 - font: distDir.font,  
103 - http_path: '/',  
104 - style: 'compressed'  
105 - })  
106 - )  
107 - .on('error', function(error) {  
108 - console.log(error);  
109 - this.emit('end');  
110 - }); 179 +gulp.task('font', function() {
  180 + return gulp.src('font/*')
  181 + .pipe(gulp.dest(distDir.font))
111 }); 182 });
112 183
113 //spm build 184 //spm build

9.77 KB | W: | H:

21.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -373,12 +373,12 @@ @@ -373,12 +373,12 @@
373 padding: 5px 15px; 373 padding: 5px 15px;
374 background: #f00; 374 background: #f00;
375 color: #fff; 375 color: #fff;
376 - border-radius(10px; 376 + border-radius: 10px;
377 margin-left: 20px; 377 margin-left: 20px;
378 } 378 }
379 379
380 .coupon-use { 380 .coupon-use {
381 - box-sizing(border-box; 381 + box-sizing: border-box;
382 position: relative; 382 position: relative;
383 float: right; 383 float: right;
384 padding-right: 30px; 384 padding-right: 30px;
@@ -445,7 +445,7 @@ @@ -445,7 +445,7 @@
445 .block { 445 .block {
446 input, textarea { 446 input, textarea {
447 box-sizing: border-box; 447 box-sizing: border-box;
448 - margin: 20px) 0; 448 + margin: 20px 0;
449 padding: 0 12px; 449 padding: 0 12px;
450 width: 100%; 450 width: 100%;
451 height: 72px; 451 height: 72px;
@@ -455,7 +455,7 @@ @@ -455,7 +455,7 @@
455 line-height: 1; 455 line-height: 1;
456 outline: 0; 456 outline: 0;
457 border: 0; 457 border: 0;
458 - border-radius(4px; 458 + border-radius: 4px;
459 } 459 }
460 textarea { 460 textarea {
461 padding: 12px; 461 padding: 12px;
@@ -519,7 +519,7 @@ @@ -519,7 +519,7 @@
519 height: 88px; 519 height: 88px;
520 line-height: 88px; 520 line-height: 88px;
521 margin-bottom: 28px; 521 margin-bottom: 28px;
522 - border-radius(5px; 522 + border-radius: 5px;
523 font-size: 32px; 523 font-size: 32px;
524 color: #fff; 524 color: #fff;
525 text-align: center; 525 text-align: center;
@@ -3,3 +3,4 @@ @@ -3,3 +3,4 @@
3 @import "plus-star"; 3 @import "plus-star";
4 @import "info-list"; 4 @import "info-list";
5 @import "detail"; 5 @import "detail";
  6 +@import "star-classroom";
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 li { 6 li {
7 float: left; 7 float: left;
8 width: 100%; 8 width: 100%;
  9 +
9 a, img { 10 a, img {
10 display: block; 11 display: block;
11 width: 100%; 12 width: 100%;
@@ -19,15 +20,17 @@ @@ -19,15 +20,17 @@
19 right: 0; 20 right: 0;
20 bottom: 20px; 21 bottom: 20px;
21 text-align: center; 22 text-align: center;
  23 +
22 .pagination-inner { 24 .pagination-inner {
23 display: inline-block; 25 display: inline-block;
  26 +
24 span { 27 span {
25 display: inline-block; 28 display: inline-block;
26 width: 14px; 29 width: 14px;
27 height: 14px; 30 height: 14px;
28 background: #fff; 31 background: #fff;
29 opacity: 0.5; 32 opacity: 0.5;
30 - margin: 0 (9px); 33 + margin: 0 9px;
31 border-radius: 50%; 34 border-radius: 50%;
32 } 35 }
33 span.swiper-active-switch { 36 span.swiper-active-switch {
@@ -37,6 +40,7 @@ @@ -37,6 +40,7 @@
37 } 40 }
38 } 41 }
39 42
  43 +
40 .fresh-list-swiper { 44 .fresh-list-swiper {
41 overflow: hidden; 45 overflow: hidden;
42 padding-bottom: 15px; 46 padding-bottom: 15px;
@@ -50,7 +54,7 @@ @@ -50,7 +54,7 @@
50 li { 54 li {
51 float:left; 55 float:left;
52 width:240px; 56 width:240px;
53 - margin: (20px) (10px) 0 (10px); 57 + margin: 20px 10px 0 10px;
54 border: none; 58 border: none;
55 59
56 &:first-child { 60 &:first-child {
@@ -96,7 +100,7 @@ @@ -96,7 +100,7 @@
96 } 100 }
97 101
98 .old-price { 102 .old-price {
99 - margin: 0 0 0 (10px); 103 + margin: 0 0 0 10px;
100 color: #b0b0b0; 104 color: #b0b0b0;
101 text-decoration: line-through; 105 text-decoration: line-through;
102 font-size: 22px; 106 font-size: 22px;
@@ -105,13 +109,13 @@ @@ -105,13 +109,13 @@
105 .fresh-icon { 109 .fresh-icon {
106 background: #d62927; 110 background: #d62927;
107 width: 100px; 111 width: 100px;
108 - height: 20px; 112 + height: 33px;
109 display: block; 113 display: block;
110 - margin: (8px) auto 0 auto; 114 + margin: 8px auto 0 auto;
111 color: #fff; 115 color: #fff;
112 text-align: center; 116 text-align: center;
113 border-radius: 40px; 117 border-radius: 40px;
114 - line-height: 20px; 118 + line-height: 33px;
115 } 119 }
116 } 120 }
117 } 121 }
@@ -119,5 +123,5 @@ @@ -119,5 +123,5 @@
119 123
120 .fresh-list{ 124 .fresh-list{
121 position: relative; 125 position: relative;
122 - padding:(15px) 0 0 (15px); 126 + padding: 15px 0 0 15px;
123 } 127 }
@@ -18,6 +18,8 @@ @@ -18,6 +18,8 @@
18 @import "home-header"; 18 @import "home-header";
19 @import "thumb-row"; 19 @import "thumb-row";
20 @import "notice"; 20 @import "notice";
  21 +@import "fresh-only";
  22 +@import "coupon";
21 23
22 .mobile-container{ 24 .mobile-container{
23 width: 100%; 25 width: 100%;
@@ -34,7 +36,6 @@ @@ -34,7 +36,6 @@
34 transform: translateX(540px); 36 transform: translateX(540px);
35 } 37 }
36 38
37 -  
38 .overlay { 39 .overlay {
39 display: none; 40 display: none;
40 position: absolute; 41 position: absolute;