fe / YOHOBUYWAP · Commits

Go to a project

Authored by 梁志锋
Commit a218d14680c7ab3f9a8bef90d0ed90433860236a 1 parent e8ced45a

删除多余的css文件，以及修改文字超长不换行的问题。

Inline Side-by-side
Showing 27 changed files with 0 additions and 4843 deletions

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

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

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 -});  
1 -.filter-mask, .filter-body {  
2 - position: absolute;  
3 - left: 0;  
4 - right: 0;  
5 - top: 0;  
6 -}  
7 -  
8 -.filter-mask {  
9 - height: 100%;  
10 - background: rgba(0,0,0,0.1);  
11 -}  
12 -  
13 -.filter-body {  
14 - background: #fff;  
15 - color: #000;  
16 - cursor: pointer;  
17 - font-size: 14px;  
18 - height: 440px;  
19 -  
20 - .classify {  
21 - width: 50%;  
22 - height: 100%;  
23 - background: #f8f8f8;  
24 -  
25 - > li {  
26 - height: 60px;  
27 - line-height: 60px;  
28 -  
29 - > * {  
30 - box-sizing: border-box;  
31 - }  
32 -  
33 - &.active {  
34 - background: #fff;  
35 - }  
36 -  
37 - .shower {  
38 - padding-left: 20px;  
39 - width: 100%;  
40 - overflow: hidden;  
41 - white-space: nowrap;  
42 - text-overflow: ellipsis;  
43 - color: #333;  
44 -  
45 - &.highlight {  
46 - background: #eee;  
47 - }  
48 - }  
49 -  
50 - .default {  
51 - color: #999;  
52 - }  
53 -  
54 - .title {  
55 - float: left;  
56 - color: #000;  
57 - }  
58 -  
59 - }  
60 - }  
61 -  
62 - .sub-classify {  
63 - position: absolute;  
64 - display: none;  
65 - width: 50%;  
66 - height: 440px;  
67 - left: 50%;  
68 - top: 0;  
69 - overflow: auto;  
70 - -webkit-overflow-scrolling: touch;  
71 -  
72 - > li {  
73 - height: 60px;  
74 - line-height: 60px;  
75 - padding-left: 15px;  
76 - border-bottom: 1px solid #e6e6e6;  
77 - overflow: hidden;  
78 - white-space: nowrap;  
79 - text-overflow: ellipsis;  
80 -  
81 - &.highlight {  
82 - background: #eee;  
83 - }  
84 - }  
85 -  
86 - .chosed-icon {  
87 - display: none;  
88 - }  
89 -  
90 - .chosed .chosed-icon {  
91 - display: inline;  
92 - }  
93 - }  
94 -  
95 - .active > .sub-classify {  
96 - display: block;  
97 - }  
98 -}  
1 -.good-info {  
2 - float: left;  
3 - width: 276rem / $pxConvertRem;  
4 - height: 486rem / $pxConvertRem;  
5 - margin: 0 (15rem / $pxConvertRem) (15rem / $pxConvertRem);  
6 -  
7 - .tag-container {  
8 - height: 28rem / $pxConvertRem;  
9 - width: 100%;  
10 - overflow: hidden;  
11 -  
12 - .good-tag {  
13 - display: block;  
14 - float: left;  
15 - height: 28rem / $pxConvertRem;  
16 - font-size: 18rem / $pxConvertRem;  
17 - text-align: center;  
18 - line-height: 28rem / $pxConvertRem;  
19 - box-sizing: border-box;  
20 - margin-right: 4rem / $pxConvertRem;  
21 -  
22 - &:last-child {  
23 - margin-right: 0;  
24 - }  
25 - }  
26 -  
27 - .new-tag {  
28 - width: 60rem / $pxConvertRem;  
29 - background-color: #78dc7e;  
30 - color: #fff;  
31 - }  
32 -  
33 - .renew-tag {  
34 - width: 90rem / $pxConvertRem;  
35 - background-color: #78dc7e;  
36 - color: #fff;  
37 - }  
38 -  
39 - .sale-tag {  
40 - width: 60rem / $pxConvertRem;  
41 - background-color: #ff575c;  
42 - color: #fff;  
43 - }  
44 - .running-man-tag {  
45 - width: 90rem / $pxConvertRem;  
46 - background-color: #017df9;  
47 - color: #f7ed02;  
48 - }  
49 - .limit-tag {  
50 - width: 100rem / $pxConvertRem;  
51 - border: 1px solid #000;  
52 - color: #000;  
53 - }  
54 - }  
55 -}  
56 -  
57 -.good-detail-img {  
58 - position: relative;  
59 - height: 368rem / $pxConvertRem;  
60 -  
61 - .good-islike {  
62 - position: absolute;  
63 - width: 60rem / $pxConvertRem;  
64 - height: 60rem / $pxConvertRem;  
65 - top: 0rem / $pxConvertRem;  
66 - right: 0rem / $pxConvertRem;  
67 - line-height: 60rem / $pxConvertRem;  
68 - font-size: 30rem / $pxConvertRem;  
69 - text-align: center;  
70 - color: #b0b0b0;  
71 - text-decoration: none;  
72 - }  
73 -  
74 - .good-like {  
75 - color: #d72928;  
76 - }  
77 - img {  
78 - display: block;  
79 - width: 100%;  
80 - height: 368rem / $pxConvertRem;  
81 - }  
82 -  
83 - .few-tag {  
84 - position: absolute;  
85 - bottom: 0;  
86 - width: 100%;  
87 - height: 28rem / $pxConvertRem;  
88 - background: #ffac5b;  
89 - font-size: 18rem / $pxConvertRem;  
90 - color: #fff;  
91 - line-height: 28rem / $pxConvertRem;  
92 - text-align: center;  
93 - }  
94 -}  
95 -  
96 -.good-detail-text {  
97 - .name a {  
98 - display: block;  
99 - line-height: 56rem / $pxConvertRem;  
100 - overflow: hidden;  
101 - white-space: nowrap;  
102 - text-overflow: ellipsis;  
103 - text-decoration: none;  
104 - font-size: 22rem / $pxConvertRem;  
105 - color: #444;  
106 - }  
107 - .price {  
108 - line-height: 22rem / $pxConvertRem;  
109 - font-size: 22rem / $pxConvertRem;  
110 - .sale-price {  
111 - color: #d62927;  
112 - }  
113 - .sale-price.no-price {  
114 - color: #000;  
115 - }  
116 - .market-price {  
117 - margin: 0 0 0 (5rem / $pxConvertRem);  
118 - color: #b0b0b0;  
119 - text-decoration: line-through;  
120 - }  
121 - }  
122 -}  
1 -.order-failure {  
2 - background-image: image-url('lazy-failure/order-good.jpg');  
3 - background-size: 100%;  
4 -}  
5 -  
6 -.good-failure {  
7 - background-image: image-url('lazy-failure/order-good.jpg');  
8 - background-size: 132rem / $pxConvertRem !important;  
9 - background-position-x: 40%;  
10 -}  
11 -  
1 -.loading-mask {  
2 - position: fixed;  
3 - background: rgba(0,0,0,.1);  
4 - top: 0;  
5 - bottom: 0;  
6 - right: 0;  
7 - left: 0;  
8 -  
9 - @-webkit-keyframes scale {  
10 - 0% {  
11 - -webkit-transform: scale(1);  
12 - transform: scale(1);  
13 - opacity: 1;  
14 - }  
15 -  
16 - 45% {  
17 - -webkit-transform: scale(0.1);  
18 - transform: scale(0.1);  
19 - opacity: 0.7;  
20 - }  
21 -  
22 - 80% {  
23 - -webkit-transform: scale(1);  
24 - transform: scale(1);  
25 - opacity: 1;  
26 - }  
27 - }  
28 -  
29 - @keyframes scale {  
30 - 0% {  
31 - -webkit-transform: scale(1);  
32 - transform: scale(1);  
33 - opacity: 1;  
34 - }  
35 -  
36 - 45% {  
37 - -webkit-transform: scale(0.1);  
38 - transform: scale(0.1);  
39 - opacity: 0.7;  
40 - }  
41 -  
42 - 80% {  
43 - -webkit-transform: scale(1);  
44 - transform: scale(1);  
45 - opacity: 1;  
46 - }  
47 - }  
48 -  
49 - .loading {  
50 - position: absolute;  
51 - width: 60px;  
52 - height: 20px;  
53 - top: 50%;  
54 - left: 50%;  
55 - margin-top: -10px;  
56 - margin-left: -30px;  
57 -  
58 - > div {  
59 - display: inline-block;  
60 - background: #fff;  
61 - width: 15px;  
62 - height: 15px;  
63 - @include border-radius(100%);  
64 - margin: 2px;  
65 -  
66 - $init: 0.12;  
67 - @for $i from 1 through 3 {  
68 - &:nth-child(#{$i}) {  
69 - -webkit-animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);  
70 - animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);  
71 - }  
72 -  
73 - $init: ($i + 1) * 0.12;  
74 - }  
75 - }  
76 - }  
77 -}  
1 -.chose-panel {  
2 - position: fixed;  
3 - display: none;  
4 - height: 100%;  
5 - top: 0;  
6 - bottom: 0;  
7 - left: 0;  
8 - right: 0;  
9 - background: rgba(0,0,0,.3);  
10 - z-index:3;  
11 -  
12 - .main {  
13 - position: absolute;  
14 - height: pxToRem(610px);  
15 - bottom: 0;  
16 - left: 0;  
17 - right: 0;  
18 - background: #fff;  
19 - }  
20 -  
21 - .infos {  
22 - height: 460rem / $pxConvertRem;  
23 - padding: 0 22rem / $pxConvertRem;  
24 - // padding-top: 30rem / $pxConvertRem;  
25 - }  
26 -  
27 - .chose-items {  
28 - height: 325rem / $pxConvertRem;  
29 - overflow: auto;  
30 - }  
31 -  
32 - .basic-info {  
33 - // height: 100rem / $pxConvertRem;  
34 - overflow: hidden;  
35 - position: relative;  
36 - margin-bottom: pxToRem(30px);  
37 - margin-top: pxToRem(30px);  
38 - }  
39 -  
40 - .thumb {  
41 - float: left;  
42 - width: 100rem / $pxConvertRem;  
43 - margin-right: 20rem / $pxConvertRem;  
44 - }  
45 -  
46 - .text-info {  
47 - height: auto;  
48 - .name {  
49 - font-size: 28rem / $pxConvertRem;  
50 - height: 74rem / $pxConvertRem;  
51 - overflow: hidden;  
52 - display: -webkit-box;  
53 - -webkit-line-clamp: 2;  
54 - -webkit-box-orient: vertical;  
55 - }  
56 -  
57 - .price{  
58 - font-size: pxToRem(24px);  
59 - display: inline;  
60 - }  
61 - .sale-price {  
62 - color: #e10;  
63 - margin-right: pxToRem(15px);  
64 -  
65 - &.no-price {  
66 - color: #000;  
67 - }  
68 - }  
69 -  
70 - .market-price {  
71 - color: #b0b0b0;  
72 - text-decoration: line-through;  
73 - }  
74 - }  
75 -  
76 - .color-list, .size-list, .num {  
77 - position: relative;  
78 - font-size: 28rem / $pxConvertRem;  
79 - padding-left: 80rem / $pxConvertRem;  
80 - input.disabled{  
81 - background-color:#fff;  
82 - color: #000;  
83 - opacity: 1;  
84 - @include border-radius(0);  
85 - -webkit-appearance: none;  
86 - }  
87 - > span {  
88 - position: absolute;  
89 - left: 0;  
90 - top: 20rem / $pxConvertRem;  
91 - }  
92 - >span.left-num{  
93 - position: absolute;  
94 - left: pxToRem(380px);  
95 - top: 20rem / $pxConvertRem;  
96 - }  
97 - span.disabled{  
98 - color: #e6e6e6;  
99 - }  
100 - }  
101 -  
102 - .size-list li.hide {  
103 - display: none;  
104 - }  
105 -  
106 - .block {  
107 - float: left;  
108 - display: block;  
109 - box-sizing: border-box;  
110 - padding: 0 20rem / $pxConvertRem;  
111 - min-width: 80rem / $pxConvertRem;  
112 - height: 80rem / $pxConvertRem;  
113 - border: 1px solid #000;  
114 - margin-right: 30rem / $pxConvertRem;  
115 - margin-bottom: 30rem / $pxConvertRem;  
116 - line-height: 80rem / $pxConvertRem;  
117 - text-align: center;  
118 -  
119 - &.chosed {  
120 - border-color: #e10;  
121 - background: image-url('shopping-cart/right.png') no-repeat;  
122 - background-size: 38rem / $pxConvertRem;  
123 - background-position: bottom right;  
124 - color: #e10;  
125 - }  
126 -  
127 - &.zero-stock {  
128 - color: #e0e0e0;  
129 - border-color: #e0e0e0;  
130 - }  
131 - &.zero-stock.chosed {  
132 - border-color: #e0e0e0;  
133 - background: none;  
134 - color: #e0e0e0;  
135 - background-color: #c0c0c0;  
136 - }  
137 - }  
138 -  
139 - .num {  
140 - margin-bottom: 20rem / $pxConvertRem;  
141 - }  
142 -  
143 - .num .btn {  
144 - float: left;  
145 - display: block;  
146 - height: 80rem / $pxConvertRem;  
147 - width: 80rem / $pxConvertRem;  
148 - text-align: center;  
149 - line-height: 80rem / $pxConvertRem;  
150 - border: 1px solid #e6e6e6;  
151 -  
152 - &.disable {  
153 - color: #e6e6e6;  
154 - }  
155 - }  
156 -  
157 - .good-num {  
158 - float: left;  
159 - width: 106rem / $pxConvertRem;  
160 - height: 80rem / $pxConvertRem;  
161 - line-height: 80rem / $pxConvertRem;  
162 - padding: 0;  
163 - border: 1px solid #e6e6e6;  
164 - text-align: center;  
165 - margin-left: -1px;  
166 - }  
167 - .btn-plus{  
168 - margin-left: -1px;  
169 - }  
170 -  
171 -  
172 - .btn-wrap {  
173 - position: relative;  
174 - height: 120rem / $pxConvertRem;  
175 - border-top: 1px solid #e6e6e6;  
176 - padding: 20rem / $pxConvertRem;  
177 - text-align: center;  
178 - background: #fff;  
179 - box-sizing: border-box;  
180 -  
181 - .btn-sure {  
182 - width: 260rem / $pxConvertRem;  
183 - height: 80rem / $pxConvertRem;  
184 - background: #e10;  
185 - color: #fff;  
186 - font-size: 32rem / $pxConvertRem;  
187 - border: none;  
188 - }  
189 - }  
190 -}  
1 -.gift-advance-page {  
2 - .gift-advance-good {  
3 - position: relative;  
4 - padding: 20rem / $pxConvertRem 0;  
5 - margin-left: 34rem / $pxConvertRem;  
6 - height: 160rem / $pxConvertRem;  
7 - border-bottom: 1px solid #e0e0e0;  
8 - }  
9 -  
10 - .advance-block:last-child .gift-advance-good:last-child {  
11 - border-bottom: 1px solid #e0e0e0;  
12 - }  
13 -  
14 - .thumb-wrap {  
15 - position: relative;  
16 - float: left;  
17 - width: 120rem / $pxConvertRem;  
18 - height: 160rem / $pxConvertRem;  
19 -  
20 - .thumb {  
21 - width: 100%;  
22 - height: 100%;  
23 - }  
24 - }  
25 -  
26 - .tag {  
27 - position: absolute;  
28 - bottom: 0;  
29 - left: 0;  
30 - right: 0;  
31 - height: 25rem / $pxConvertRem;  
32 - color: #fff;  
33 - text-align: center;  
34 - background: #eb76aa;  
35 -  
36 - &:before {  
37 - content: '加价购';  
38 - display: block;  
39 - font-size: 12px;  
40 - line-height: 25rem / $pxConvertRem;  
41 - transform: scale(0.833);  
42 - }  
43 - }  
44 -  
45 - .deps {  
46 - margin-left: 135rem / $pxConvertRem;  
47 - }  
48 -  
49 - .gift-advance-good .name {  
50 - margin-bottom: 20rem / $pxConvertRem;  
51 - width: 440rem / $pxConvertRem;  
52 - font-size: 28rem / $pxConvertRem;  
53 - }  
54 -  
55 - .row:nth-child(2) {  
56 - font-size: 22rem / $pxConvertRem;  
57 - height: 45rem / $pxConvertRem;  
58 - line-height: 45rem / $pxConvertRem;  
59 -  
60 - > span {  
61 - margin-right: 15rem / $pxConvertRem;  
62 - }  
63 - }  
64 -  
65 - .row:nth-child(3) {  
66 - position: relative;  
67 - }  
68 -  
69 - .color, .size {  
70 - color: #b6b6b6;  
71 - }  
72 -  
73 - .price {  
74 - // margin-left: 10rem / $pxConvertRem;  
75 - font-size: 24rem / $pxConvertRem;  
76 - color: #f1545b;  
77 -  
78 - &.market-price {  
79 - color: #999;  
80 - text-decoration: line-through;  
81 - }  
82 - }  
83 -  
84 - .count {  
85 - font-size: 20rem / $pxConvertRem;  
86 - color: #999;  
87 - margin-left: 22rem / $pxConvertRem;  
88 - }  
89 -  
90 - .chose {  
91 - position: absolute;  
92 - width: 88rem / $pxConvertRem;  
93 - height: 58rem / $pxConvertRem;  
94 - background: #f8f8f8;  
95 - border: 1px solid #ccc;  
96 - right: 20rem / $pxConvertRem;  
97 - top: 71rem / $pxConvertRem;  
98 - font-size: 26rem / $pxConvertRem;  
99 - line-height: 58rem / $pxConvertRem;  
100 - text-align: center;  
101 - }  
102 -  
103 - .title {  
104 - width: 600rem / $pxConvertRem;  
105 - height: 60rem / $pxConvertRem;  
106 - line-height: 60rem / $pxConvertRem;  
107 - padding: 0 20rem / $pxConvertRem;  
108 - font-size: 24rem / $pxConvertRem;  
109 - background: #f8f8f8;  
110 - white-space: nowrap;  
111 - text-overflow: ellipsis;  
112 - overflow: hidden;  
113 - }  
114 -  
115 - .gift-block .tag {  
116 - background: #a1ce4e;  
117 - &:before {  
118 - content: '赠品';  
119 - }  
120 - }  
121 -}  
1 -.shopping-cart-good {  
2 - $cartRed: #d0253b;  
3 - position: relative;  
4 - padding-left: 16rem / $pxConvertRem;  
5 -  
6 - .prevent-img-click {  
7 - position: absolute;  
8 - width: 20rem / $pxConvertRem;  
9 - height: 200rem / $pxConvertRem;  
10 - background-color: transparent;  
11 - z-index: 99;  
12 - }  
13 - .none{  
14 - display: none;  
15 - }  
16 - .checkbox {  
17 - position: absolute;  
18 - top: 50%;  
19 - margin-top: -34rem / $pxConvertRem;  
20 - margin-left: 8rem / $pxConvertRem;  
21 - font-size: 28rem / $pxConvertRem;  
22 -  
23 - &.icon-cb-checked {  
24 - color: #000;  
25 - }  
26 -  
27 - &.disabled {  
28 - color: #f0f0f0;  
29 - }  
30 - }  
31 -  
32 - .few-tag {  
33 - width: 150rem / $pxConvertRem;  
34 - position: absolute;  
35 - text-align: center;  
36 - top: 72%;  
37 - color: #fff;  
38 -  
39 - span {  
40 - display: inline-block;  
41 - @include transform(scale(0.833));  
42 - }  
43 - }  
44 -  
45 - .gift-tag {  
46 - background-color: #88BE51;  
47 - }  
48 -  
49 - .plus-tag {  
50 - background-color: #FC1264;  
51 - }  
52 -  
53 - .few-tag-expire {  
54 - position: absolute;  
55 - top: 40%;  
56 - left: 20rem / $pxConvertRem;  
57 - background-color: #7f7f7f;  
58 - display: inline-block;  
59 - color: #fff;  
60 - border-radius: 12rem / $pxConvertRem;  
61 - padding: 4rem / $pxConvertRem;  
62 - font-size: 20rem / $pxConvertRem;  
63 - width: 48rem / $pxConvertRem;  
64 - text-align: center;  
65 - }  
66 -  
67 - .info {  
68 - float: left;  
69 - margin-left: 60rem / $pxConvertRem;  
70 - padding: 16rem / $pxConvertRem 0;  
71 - padding-right: 20rem / $pxConvertRem;  
72 - }  
73 -  
74 - .fixed-height {  
75 - height: 2.7rem;  
76 - }  
77 -  
78 - .thumb {  
79 - float: left;  
80 - width: 150rem / $pxConvertRem;  
81 - background-size: 100%;  
82 - background-repeat: no-repeat;  
83 - }  
84 -  
85 - .deps {  
86 - position: relative;  
87 - width: 380rem / $pxConvertRem;  
88 - margin-left: 180rem / $pxConvertRem;  
89 - border-bottom: 1px solid #e0e0e0;  
90 - padding: 0.5rem 0;  
91 - }  
92 -  
93 - .name {  
94 - display: inline-block;  
95 - width: 80%;  
96 - color: #5a5a5a;  
97 - font-size: 0.6rem;  
98 - line-height: 0.7rem;  
99 - }  
100 -  
101 - .color-size-row > span {  
102 - margin-right: 15rem / $pxConvertRem;  
103 - }  
104 -  
105 - .color, .size {  
106 - font-size: 0.6rem;  
107 - color: #b6b6b6;  
108 - }  
109 -  
110 - .appear-date {  
111 - float: left;  
112 - color: $cartRed;  
113 - display: block;  
114 - font-size: 0.5rem;  
115 - }  
116 -  
117 - .price {  
118 - font-size: 0.6rem;  
119 - color: $cartRed;  
120 - display: inline;  
121 - .sale-price{  
122 - color: #b0b0b0;  
123 - text-decoration: line-through;  
124 - }  
125 - }  
126 -  
127 - .count {  
128 - font-size: 20rem / $pxConvertRem;  
129 - color: #999;  
130 - display: inline-block;  
131 - width: 22%;  
132 - position: absolute;  
133 - text-align: center;  
134 - }  
135 -  
136 - .low-stocks {  
137 - display: inline-block;  
138 - width: 100rem / $pxConvertRem;  
139 - height: 30rem / $pxConvertRem;  
140 - line-height: 30rem / $pxConvertRem;  
141 - font-size: 22rem / $pxConvertRem;  
142 - border: none;  
143 - color: #fff;  
144 - text-align: center;  
145 - float: right;  
146 - margin-right: 16rem / $pxConvertRem;  
147 - padding: 4rem / $pxConvertRem;  
148 -  
149 - border-radius: 20rem / $pxConvertRem;  
150 - }  
151 -  
152 - .low-stocks {  
153 - background: #7f7f7f;  
154 - }  
155 -  
156 - .vip {  
157 - display: inline-block;  
158 - color: #fff;  
159 - background: #e01;  
160 - @include border-radius(16rem / $pxConvertRem);  
161 - padding: 0 12rem / $pxConvertRem;  
162 - margin-left: 8rem / $pxConvertRem;  
163 - font-size: 20rem / $pxConvertRem;  
164 - }  
165 -  
166 - .la-tag {  
167 - margin-top: 0.3rem;  
168 - min-height: 1rem;  
169 - }  
170 -  
171 - .icon-del,  
172 - .icon-edit {  
173 - position: absolute;  
174 - color: #ccc;  
175 - font-size: 30rem / $pxConvertRem;  
176 - }  
177 -  
178 - .icon-del {  
179 - right: 20rem / $pxConvertRem;  
180 - }  
181 -  
182 - .icon-edit {  
183 - right: 72rem / $pxConvertRem;  
184 - }  
185 -  
186 - .opt-panel {  
187 - position: absolute;  
188 - width: 220rem / $pxConvertRem;  
189 - right: 0;  
190 - top: 0;  
191 - bottom: 0;  
192 -  
193 - color: #fff;  
194 -  
195 - > div {  
196 - float: left;  
197 - box-sizing: border-box;  
198 - width: 110rem / $pxConvertRem;  
199 - height: 100%;  
200 - text-align: center;  
201 - padding: 40rem / $pxConvertRem 20rem / $pxConvertRem 0;  
202 - font-size: 15px;  
203 - }  
204 -  
205 - span {  
206 - display: block;  
207 - }  
208 -  
209 - .put-in-favorite {  
210 - background: #bbb;  
211 -  
212 - }  
213 -  
214 - .del {  
215 - background: #999;  
216 -  
217 - .iconfont {  
218 - margin-bottom: 20rem / $pxConvertRem;  
219 - }  
220 - }  
221 - }  
222 - .calculate-num{  
223 - float: right;  
224 - .calculate{  
225 - float: right;  
226 - border:1px solid #b0b0b0;  
227 - border-radius:.2rem;  
228 - p{  
229 - color: #444;  
230 - &:first-child{  
231 - height: 60rem / $pxConvertRem;  
232 - border-bottom:1px solid #b0b0b0;  
233 - span {  
234 - border-left:1px solid #b0b0b0;  
235 - border-right:1px solid #b0b0b0;  
236 - }  
237 - }  
238 - i{  
239 - width: 72rem / $pxConvertRem;  
240 - height: 60rem / $pxConvertRem;  
241 - float: left;  
242 - line-height: 60rem / $pxConvertRem;  
243 - text-align: center;  
244 - }  
245 - span{  
246 - width: 96rem / $pxConvertRem;  
247 - height: 60rem / $pxConvertRem;  
248 - float: left;  
249 - font-size: 40rem / $pxConvertRem;  
250 - line-height: 60rem / $pxConvertRem;  
251 - text-align: center;  
252 -  
253 - }  
254 - &:last-child {  
255 - span{  
256 - width: 168rem / $pxConvertRem;  
257 - overflow: hidden;  
258 - font-size: 48em / $pxConvertRem;  
259 - text-overflow:ellipsis;  
260 - white-space:nowrap;  
261 - }  
262 - }  
263 - }  
264 - }  
265 - .price{  
266 - line-height: 60rem / $pxConvertRem;  
267 - font-size: 52em / $pxConvertRem;  
268 - font-weight: bold;  
269 - }  
270 - .count {  
271 - position: absolute;  
272 - right: 20rem / $pxConvertRem;;  
273 - top: 20rem / $pxConvertRem;;  
274 - font-size: 52em / $pxConvertRem;  
275 - }  
276 - }  
277 -}  
278 -  
279 -.shopping-cart-good:last-child {  
280 - .deps {  
281 - border: none;  
282 - }  
283 -}  
1 -@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon", "select-address";  
2 -  
3 -  
4 -.icon-checkbox:before { content: "\e61c"; }  
5 -.icon-cb-checked:before { content: "\e61d"; }  
6 -  
7 -.icon-radio:before { content: "\e647"; }  
8 -.icon-cb-radio:before { content: "\e646"; }  
9 -  
10 -  
11 -.shopping-cart-page {  
12 - margin-bottom: 120rem / $pxConvertRem;  
13 - overflow-x: hidden;  
14 - background: #f0f0f0;  
15 - display: none;  
16 -  
17 - .yoho-tip {  
18 - z-index: 4;  
19 - }  
20 -  
21 - .cart-content > * {  
22 - background: #fff;  
23 -  
24 - &:first-child {  
25 - border-top: none;  
26 - margin-top: 0;  
27 - }  
28 - }  
29 -  
30 - .cart-nav {  
31 - color: #c6c6c6;  
32 - border-bottom: 1px solid #e0e0e0;  
33 - background: #fff;  
34 -  
35 - li {  
36 - float: left;  
37 - width: 50%;  
38 - padding: 30rem / $pxConvertRem 0;  
39 - height: 30rem / $pxConvertRem;  
40 - }  
41 -  
42 - li.active {  
43 - color: #000;  
44 - }  
45 -  
46 - span {  
47 - display: block;  
48 - box-sizing: border-box;  
49 - width: 100%;  
50 - height: 30rem / $pxConvertRem;  
51 - line-height: 30rem / $pxConvertRem;  
52 - font-size: 30rem / $pxConvertRem;  
53 - text-align: center;  
54 - }  
55 -  
56 - li:first-child span {  
57 - border-right: 1px solid #e0e0e0;  
58 - }  
59 -  
60 - li:last-child {  
61 - position: relative;  
62 - }  
63 -  
64 - .presell-tip {  
65 - position: absolute;  
66 - z-index: 1;  
67 - left: -2rem;  
68 - top: 1.75rem;  
69 - }  
70 -  
71 - .triangle {  
72 - width: 0;  
73 - height: 0;  
74 - border-left: 8px solid transparent;  
75 - border-right: 8px solid transparent;  
76 - border-bottom: 12px solid #000;  
77 - margin-left: 6rem;  
78 - }  
79 -  
80 - .pt-content {  
81 - position: relative;  
82 - padding: 10px;  
83 - background: #000;  
84 - color: #fff;  
85 - font-size: 12px;  
86 - @include border-radius(5px);  
87 - text-align: center;  
88 - width: 7rem;  
89 - }  
90 - }  
91 -  
92 - .login-info {  
93 - height: 46rem / $pxConvertRem;  
94 - padding: 17rem / $pxConvertRem 20rem / $pxConvertRem;  
95 - color: #24acaa;  
96 - text-align: center;  
97 - font-size: 28rem / $pxConvertRem;  
98 -  
99 - .btn {  
100 - display: inline-block;  
101 - background: #ed0010;  
102 - color: #fff;  
103 - width: 80rem / $pxConvertRem;  
104 - height: 46rem / $pxConvertRem;  
105 - line-height: 46rem / $pxConvertRem;  
106 - }  
107 - }  
108 -  
109 - .presell-info {  
110 - height: 60rem / $pxConvertRem;  
111 - padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;  
112 - font-size: 22rem / $pxConvertRem;  
113 - background: #f0f0f0;  
114 - color: #b7b7b7;  
115 -  
116 - > span {  
117 - display: block;  
118 - }  
119 -  
120 - .iconfont {  
121 - float: left;  
122 - font-size: 45rem / $pxConvertRem;  
123 - }  
124 -  
125 - .txt {  
126 - height: 30rem / $pxConvertRem;  
127 - line-height: 30rem / $pxConvertRem;  
128 - margin-left: 80rem / $pxConvertRem;  
129 - }  
130 - }  
131 -  
132 - .cart-goods {  
133 - border-bottom: 1px solid #e0e0e0;  
134 - margin-bottom: 0.75rem;  
135 -  
136 - .shopping-cart-good:last-child .info {  
137 - border-bottom: none;  
138 - }  
139 - }  
140 -  
141 - .invalid-goods {  
142 - border-top: 1px solid #e0e0e0;  
143 - border-bottom: 1px solid #e0e0e0;  
144 - margin: 0.75rem 0;  
145 - }  
146 -  
147 - .freebie-and-advance-buy {  
148 - font-size: 24rem / $pxConvertRem;  
149 - border-top: 1px solid #e0e0e0;  
150 - border-bottom: 1px solid #e0e0e0;  
151 - margin-bottom: 30rem / $pxConvertRem;  
152 -  
153 - > li {  
154 - box-sizing: border-box;  
155 - height: 80rem / $pxConvertRem;  
156 - line-height: 80rem / $pxConvertRem;  
157 - margin-bottom: 10rem / $pxConvertRem;  
158 - padding: 0 20rem / $pxConvertRem;  
159 -  
160 - &:last-child {  
161 - margin-bottom: 0;  
162 - }  
163 -  
164 - a {  
165 - float: right;  
166 - width: 100%;  
167 - }  
168 -  
169 - .under-line {  
170 - display: inline-block;  
171 - height: 1px;  
172 - width: 91%;  
173 - position: absolute;  
174 - left: 9%;  
175 - background-color: #f1f1f1;  
176 - }  
177 -  
178 - }  
179 -  
180 - > li:first-child {  
181 - .under-line {  
182 - display: none;  
183 - }  
184 - }  
185 -  
186 - .count {  
187 - color: #7b7b7b;  
188 - float: right;  
189 - }  
190 -  
191 - .icon-right-arrow {  
192 - color: #8f8f8f;  
193 - float: right;  
194 - }  
195 - }  
196 -  
197 - .activity-title{  
198 - border-top: 1px solid #e0e0e0;  
199 - font-size: 32rem / $pxConvertRem;  
200 - padding: 20rem / $pxConvertRem 20rem / $pxConvertRem 0;  
201 - }  
202 -  
203 - .activity{  
204 - padding: 8rem / $pxConvertRem 20rem / $pxConvertRem 20rem / $pxConvertRem 32rem / $pxConvertRem;  
205 - font-size: 26rem / $pxConvertRem;  
206 - li:before {  
207 - content: "";  
208 - display: inline-block;  
209 - margin-right: 10rem / $pxConvertRem;  
210 - width: 8rem / $pxConvertRem;  
211 - height: 8rem / $pxConvertRem;  
212 - background-color: #000;  
213 - border-radius: 50%;  
214 - position: relative;  
215 - left: 0;  
216 - top: -.12rem;  
217 - }  
218 - }  
219 - .price-compute {  
220 - padding: 20rem / $pxConvertRem;  
221 - border-top: 1px solid #e0e0e0;  
222 - font-size: 28rem / $pxConvertRem;  
223 -  
224 - .title {  
225 - display: inline-block;  
226 - width: 175rem / $pxConvertRem;  
227 - }  
228 -  
229 - .minus {  
230 - float: right;  
231 - }  
232 - }  
233 -  
234 - .balance {  
235 - position: fixed;  
236 - box-sizing: border-box;  
237 - bottom: 0;  
238 - width: 100%;  
239 - padding: 20rem / $pxConvertRem;  
240 - height: 120rem / $pxConvertRem;  
241 - border-top: 1px solid #e0e0e0;  
242 - background: #fff;  
243 -  
244 - .iconfont {  
245 - position: absolute;  
246 - top: 50%;  
247 - margin-top: -14rem / $pxConvertRem;  
248 - font-size: 28rem / $pxConvertRem;  
249 - }  
250 -  
251 - p {  
252 - float: right;  
253 - margin-right: 32rem / $pxConvertRem;  
254 - font-size: 26rem / $pxConvertRem;  
255 -  
256 - span {  
257 - display: block;  
258 - height: 40rem / $pxConvertRem;  
259 - line-height: 40rem / $pxConvertRem;  
260 - color: #d0253b;  
261 - font-weight: bold;  
262 - }  
263 -  
264 - .tip {  
265 - color: #666;  
266 - font-size: 22rem / $pxConvertRem;  
267 - text-align: right;  
268 - font-weight:normal;  
269 - }  
270 - }  
271 -  
272 - .btn-balance {  
273 - float: right;  
274 - width: 140rem / $pxConvertRem;  
275 - height: 80rem / $pxConvertRem;  
276 - line-height: 80rem / $pxConvertRem;  
277 - text-align: center;  
278 - background: #e01;  
279 - color: #fff;  
280 - border: none;  
281 - font-size: 28rem / $pxConvertRem;  
282 - }  
283 - }  
284 -  
285 - .cart-zero{  
286 - width: 100%;  
287 - height: auto;  
288 - padding-top:2rem;  
289 - padding-bottom:20%;  
290 - i{  
291 - font-size: 6em;  
292 - display: block;  
293 - margin: 0 auto;  
294 - text-align: center;  
295 - color: #505050;  
296 - }  
297 - p{  
298 - display: block;  
299 - text-align: center;  
300 - font-size: 1.2em;  
301 - color: #505050;  
302 - padding:.6rem 0;  
303 - }  
304 - a{  
305 - width: 27%;  
306 - height: 1.2rem;  
307 - overflow: hidden;  
308 - line-height: 1.2rem;  
309 - border:1px solid #505050;  
310 - border-radius:.2rem;  
311 - display: block;  
312 - margin: 0 auto;  
313 - text-align: center;  
314 - }  
315 - }  
316 -}  
1 -.order-ensure-page {  
2 - background: #f0f0f0;  
3 -  
4 - .block {  
5 - background: #fff;  
6 - margin: 20rem / $pxConvertRem 0;  
7 - padding: 30rem / $pxConvertRem 20rem / $pxConvertRem;  
8 - border-top: 1px solid #e0e0e0;  
9 - border-bottom: 1px solid #e0e0e0;  
10 - }  
11 -  
12 - .title {  
13 - font-size: 32rem / $pxConvertRem;  
14 - color: #444;  
15 - }  
16 - /*xwg 2016-3-19 10:53*/  
17 - .price-cost{  
18 - span{  
19 - color: #f00;  
20 - }  
21 - }  
22 - .goods-bottom{  
23 - padding-bottom: 0;  
24 - }  
25 - .border-none{  
26 - border-bottom:none !important;  
27 - }  
28 - .boys{  
29 - background:image-url('shopping-cart/boys.png') bottom left repeat-x #fff;  
30 - }  
31 - .girls{  
32 - background:image-url('shopping-cart/girls.png') bottom left repeat-x #fff;  
33 - }  
34 - .kids{  
35 - background:image-url('shopping-cart/kids.png') bottom left repeat-x #fff;  
36 - }  
37 - .life-style{  
38 - background:image-url('shopping-cart/lifeStyle.png') bottom left repeat-x #fff !important;  
39 - }  
40 - .not-address{  
41 - position: relative;  
42 - i{  
43 - position: absolute;  
44 - left: 16rem / $pxConvertRem;  
45 - top: 0%;  
46 - font-size: 44rem / $pxConvertRem;  
47 - }  
48 - .choose{  
49 - display: block;  
50 - color: #000;  
51 - height: 64rem / $pxConvertRem;  
52 - overflow: hidden;  
53 - position: static;  
54 - padding-left:40rem / $pxConvertRem;  
55 - font-size: 32rem / $pxConvertRem;  
56 - line-height: 82rem / $pxConvertRem;  
57 - span{  
58 - position: absolute;  
59 - right: 20rem / $pxConvertRem;  
60 - top: 28rem / $pxConvertRem;  
61 - font-size: 32rem / $pxConvertRem;  
62 - }  
63 - }  
64 - }  
65 - .address{  
66 - display: block;  
67 - position: relative;  
68 - margin-top: 0;  
69 - border-top: none;  
70 - padding-bottom:.8rem;  
71 - .info{  
72 - width: 90%;  
73 - height: auto;  
74 - overflow: hidden;  
75 - padding-left: 10%;  
76 - padding-bottom: 12rem / $pxConvertRem;  
77 - position: relative;  
78 - span{  
79 - display: inline-block;  
80 - }  
81 - i{  
82 - position: absolute;  
83 - left: 0;  
84 - top: 0%;  
85 - font-size: 44rem / $pxConvertRem;  
86 - }  
87 - }  
88 - .info-name{  
89 - width: 48%;  
90 - height: 40rem / $pxConvertRem;  
91 - font-size: 32rem / $pxConvertRem;  
92 - overflow: hidden;  
93 - text-overflow:ellipsis;  
94 - white-space:nowrap;  
95 - }  
96 - .info-phone{  
97 - width: 48%;  
98 - font-size: 24rem / $pxConvertRem;  
99 - text-align: right;  
100 - }  
101 - .info-address{  
102 - width: 100%;  
103 - font-size: 24rem / $pxConvertRem;  
104 - line-height: 38rem / $pxConvertRem;  
105 - }  
106 - .rest{  
107 - position: absolute;  
108 - right: 32rem / $pxConvertRem;  
109 - bottom:20rem / $pxConvertRem;  
110 - color: #f00;  
111 - font-size: 24rem / $pxConvertRem;  
112 - span{  
113 - font-size: 24rem / $pxConvertRem;  
114 - }  
115 - }  
116 - }  
117 - .dispatch{  
118 - padding:0%;  
119 - margin:0;  
120 - .sub-block{  
121 - color: #444;  
122 - &:last-child h3{  
123 - border-bottom:none;  
124 - }  
125 - h3{  
126 - .hide{  
127 - display: none !important;  
128 - }  
129 - width: 95%;  
130 - height: 80rem / $pxConvertRem;  
131 - overflow: hidden;  
132 - line-height: 80rem / $pxConvertRem;  
133 - font-size: 32rem / $pxConvertRem;  
134 - margin-left: 5%;  
135 - border-bottom:1px solid #e0e0e0;  
136 - p{  
137 - display: inline-block;  
138 - height: 80rem / $pxConvertRem;  
139 - overflow: hidden;  
140 - text-overflow:ellipsis;  
141 - white-space:nowrap;  
142 - }  
143 - i{  
144 - font-size: 36rem / $pxConvertRem;  
145 - margin-left: 8rem / $pxConvertRem;  
146 - height: 80rem / $pxConvertRem;  
147 - display: inline-block;  
148 - overflow: hidden;  
149 - text-overflow:ellipsis;  
150 - white-space:nowrap;  
151 - }  
152 - span{  
153 - display: inline-block;  
154 - width: 65%;  
155 - height: 80rem / $pxConvertRem;  
156 - text-align: right;  
157 - font-size: 28rem / $pxConvertRem;  
158 - overflow: hidden;  
159 - text-overflow:ellipsis;  
160 - white-space:nowrap;  
161 - }  
162 - }  
163 - ul{  
164 - width: 90%;  
165 - height:auto;  
166 - overflow: hidden;  
167 - line-height: 80rem / $pxConvertRem;  
168 - font-size: 28rem / $pxConvertRem;  
169 - background: #e0e0e0;  
170 - padding-left:10%;  
171 - display: none;  
172 - padding-bottom: 8rem / $pxConvertRem;  
173 - .right{  
174 - float: right;  
175 - margin-right: 40rem / $pxConvertRem;  
176 - }  
177 - li{  
178 - border-bottom:1px solid #fff;  
179 - &:last-child{  
180 - border-bottom:none;  
181 - }  
182 - }  
183 - }  
184 - }  
185 -  
186 - }  
187 - .goods-num{  
188 - width: 100%;  
189 - height: 52rem / $pxConvertRem;  
190 - color: #b0b0b0;  
191 - background:#fff;  
192 - padding:20rem / $pxConvertRem 0;  
193 - text-align: right;  
194 - font-size: 28rem / $pxConvertRem;  
195 - line-height: 52rem / $pxConvertRem;  
196 - span{  
197 - padding-right:20rem / $pxConvertRem;  
198 - color: #f00;  
199 - }  
200 - }  
201 - .bill{  
202 - position: fixed;  
203 - background:#fff;  
204 - left: 0;  
205 - bottom: 0;  
206 - width: 96%;  
207 - height: 100rem / $pxConvertRem;  
208 - overflow: hidden;  
209 - line-height: 100rem / $pxConvertRem;  
210 - font-size: 28rem / $pxConvertRem;  
211 - padding-left: 4%;  
212 - span{  
213 - color: #f00;  
214 - }  
215 - a{  
216 - position: absolute;  
217 - right: 20rem / $pxConvertRem;  
218 - top: 10rem / $pxConvertRem;  
219 - background:#d0021b;  
220 - display: inline-block;  
221 - color: #fff;  
222 - width: 25%;  
223 - height: 80rem / $pxConvertRem;  
224 - overflow: hidden;  
225 - border-radius: 10rem / $pxConvertRem;  
226 - line-height: 80rem / $pxConvertRem;  
227 - text-align: center;  
228 - font-size: 30rem / $pxConvertRem;  
229 - }  
230 -  
231 - }  
232 - .price-cal{  
233 - margin-bottom: 90rem / $pxConvertRem;  
234 - font-size: 28rem / $pxConvertRem;  
235 - position: relative;  
236 - span{  
237 - position: absolute;  
238 - right: 28rem / $pxConvertRem;  
239 - text-align: right;  
240 - }  
241 - li{  
242 - font-size: 28rem / $pxConvertRem;  
243 - p{  
244 - display: inline-block;  
245 - }  
246 - span{  
247 - display: inline-block;  
248 - }  
249 - }  
250 - }  
251 -  
252 -  
253 - // .dispatch .sub-block:first-child {  
254 - // border-bottom: 1px solid #f7f7f7;  
255 - // margin-bottom: 15rem / $pxConvertRem;  
256 - // }  
257 -  
258 - // .dispatch-mode li,  
259 - // .dispatch-time li {  
260 - // float: left;  
261 - // padding: 10rem / $pxConvertRem 20rem / $pxConvertRem;  
262 - // margin-right: 15rem / $pxConvertRem;  
263 - // margin-bottom: 15rem / $pxConvertRem;  
264 - // border: 1px solid #c9c9c9;  
265 - // color: #676767;  
266 - // font-size: 26rem / $pxConvertRem;  
267 -  
268 - // &.chosed {  
269 - // border-color: #000;  
270 - // background: image-url('shopping-cart/black-right.png') no-repeat;  
271 - // background-size: 30rem / $pxConvertRem;  
272 - // background-position: bottom right;  
273 - // }  
274 - // }  
275 -  
276 - // .goods {  
277 - // margin-right: -20rem / $pxConvertRem;  
278 -  
279 - // .price-wrap {  
280 - // position: static;  
281 - // text-align: left;  
282 -  
283 - // .price {  
284 - // color: #444;  
285 - // }  
286 -  
287 - // .count {  
288 - // display: inline;  
289 - // margin-left: 20rem / $pxConvertRem;  
290 - // }  
291 - // }  
292 -  
293 - // .name {  
294 - // max-width: pxToRem(400px);  
295 - // }  
296 - // }  
297 -.order-good {  
298 - position: relative;  
299 - padding: 20rem / $pxConvertRem 0;  
300 - margin-left: 34rem / $pxConvertRem;  
301 - height: 160rem / $pxConvertRem;  
302 - border-bottom: 1px solid #e0e0e0;  
303 - font-size: 26rem / $pxConvertRem;  
304 -  
305 - &:last-child {  
306 - border-bottom: none;  
307 - }  
308 -  
309 - .thumb-wrap {  
310 - position: relative;  
311 - float: left;  
312 - width: 120rem / $pxConvertRem;  
313 - height: 160rem / $pxConvertRem;  
314 - }  
315 -  
316 - .thumb {  
317 - width: 100%;  
318 - height: 100%;  
319 - }  
320 -  
321 - .tag {  
322 - position: absolute;  
323 - bottom: 0;  
324 - left: 0;  
325 - right: 0;  
326 - color: #fff;  
327 - text-align: center;  
328 - font-size: 12px;  
329 -  
330 - &:before {  
331 - display: block;  
332 - line-height: 1;  
333 - @include transform(scale(0.833));  
334 - }  
335 - }  
336 -  
337 - .gift-tag {  
338 - height: 25rem / $pxConvertRem;  
339 - background: #a1ce4e;  
340 -  
341 - &:before {  
342 - content: '赠品';  
343 - }  
344 - }  
345 -  
346 - .advance-buy-tag {  
347 - height: 25rem / $pxConvertRem;  
348 - background: #eb76aa;  
349 -  
350 - &:before {  
351 - content: '加价购';  
352 - }  
353 - }  
354 -  
355 - .deps {  
356 - margin-left: 135rem / $pxConvertRem;  
357 - }  
358 -  
359 - .name {  
360 - font-size: 28rem / $pxConvertRem;  
361 - max-width: 70%;  
362 - text-overflow: -o-ellipsis-lastline;  
363 - overflow: hidden;  
364 - text-overflow: ellipsis;  
365 - display: -webkit-box;  
366 - -webkit-line-clamp: 2;  
367 - -webkit-box-orient: vertical;  
368 - }  
369 -  
370 - .row:nth-child(2) {  
371 - height: 45rem / $pxConvertRem;  
372 - line-height: 45rem / $pxConvertRem;  
373 -  
374 - > span {  
375 - margin-right: 15rem / $pxConvertRem;  
376 - }  
377 - }  
378 -  
379 - .color, .size {  
380 - color: #b6b6b6;  
381 - }  
382 -  
383 - .price-wrap {  
384 - position: absolute;  
385 - top: 20rem / $pxConvertRem;  
386 - right: 30rem / $pxConvertRem;  
387 - text-align: right;  
388 - }  
389 -  
390 - .price {  
391 - color: #e01;  
392 - }  
393 -  
394 - .count {  
395 - display: block;  
396 - color: #999;  
397 - text-align: right;  
398 - line-height: 45rem / $pxConvertRem;  
399 - }  
400 -  
401 - .appear-date {  
402 - color: #f00;  
403 - }  
404 -}  
405 - .sale-invoice {  
406 - margin-top: -20rem / $pxConvertRem;  
407 - font-size: 24rem / $pxConvertRem;  
408 -  
409 - li {  
410 - height: 90rem / $pxConvertRem;  
411 - line-height: 90rem / $pxConvertRem;  
412 - border-bottom: 1px solid #f7f7f7;  
413 - overflow: hidden;  
414 -  
415 - a {  
416 - display: block;  
417 - }  
418 - }  
419 -  
420 - .coupon-count {  
421 - padding: 5rem / $pxConvertRem 15rem / $pxConvertRem;  
422 - background: #f00;  
423 - color: #fff;  
424 - @include border-radius(10px);  
425 - margin-left: 20rem / $pxConvertRem;  
426 - }  
427 -  
428 - .coupon-use {  
429 - @include box-sizing(border-box);  
430 - position: relative;  
431 - float: right;  
432 - padding-right: 30rem / $pxConvertRem;  
433 - color: #999;  
434 - text-align: right;  
435 - width: 320rem / $pxConvertRem;  
436 - white-space: nowrap;  
437 - text-overflow: ellipsis;  
438 - overflow: hidden;  
439 -  
440 - .iconfont {  
441 - position: absolute;  
442 - top:0;  
443 - right: 0;  
444 - color: #999;  
445 - }  
446 - }  
447 -  
448 - .checkbox {  
449 - display: inline-block;  
450 - width: 80rem / $pxConvertRem;  
451 - text-align: center;  
452 - margin-right: -20rem / $pxConvertRem;  
453 - }  
454 -  
455 - .coin-check {  
456 - float: right;  
457 - color: #999;  
458 -  
459 - .checkbox {  
460 - margin-left: 5rem / $pxConvertRem;  
461 - color: #000;  
462 - }  
463 -  
464 - &.used {  
465 - color: #f00;  
466 - }  
467 -  
468 - em {  
469 - color: #f00;  
470 - }  
471 -  
472 - }  
473 -  
474 - .checkbox.icon-checkbox {  
475 - color: #ccc;  
476 - }  
477 -  
478 - .invoice {  
479 - .checkbox {  
480 - float: right;  
481 - }  
482 -  
483 - &.focus {  
484 - height: auto;  
485 - }  
486 - }  
487 -  
488 - .desc {  
489 - color: #999;  
490 - }  
491 - }  
492 -  
493 - .block {  
494 - input, textarea {  
495 - box-sizing: border-box;  
496 - margin: pxToRem(20px) 0;  
497 - padding: 0 pxToRem(12px);  
498 - width: 100%;  
499 - height: pxToRem(72px);  
500 - color: #444;  
501 - background: #efefef;  
502 - font-size: pxToRem(24px);  
503 - line-height: 1;  
504 - outline: 0;  
505 - border: 0;  
506 - @include border-radius(4px);  
507 - }  
508 - textarea {  
509 - padding: pxToRem(12px);  
510 - height: auto;  
511 - resize: none;  
512 - }  
513 - }  
514 -  
515 - #invoice {  
516 - border-top: 1px solid #f7f7f7;  
517 -  
518 - label {  
519 - display: block;  
520 - border-top: 1px solid #f7f7f7;  
521 - }  
522 -  
523 - select {  
524 - position: relative;  
525 - float: right;  
526 - width: 40%;  
527 - height: pxToRem(50px);  
528 - top: pxToRem(20px);  
529 - border: 1px solid #f7f7f7;  
530 - }  
531 - }  
532 -  
533 - #msg {  
534 - padding-top: pxToRem(20px);  
535 - input {  
536 - margin: 0;  
537 - }  
538 -  
539 - }  
540 -  
541 - .total {  
542 - font-size: 22rem / $pxConvertRem;  
543 - margin-top: 20rem / $pxConvertRem;  
544 -  
545 - span {  
546 - display: inline-block;  
547 - width: 130rem / $pxConvertRem;  
548 - }  
549 - }  
550 -  
551 - // .price-cal {  
552 - // font-family: monospace;  
553 - // }  
554 -  
555 - .cost {  
556 - border-top: 1px solid #f7f7f7;  
557 - line-height: 100rem / $pxConvertRem;  
558 - margin-top: 10rem / $pxConvertRem;  
559 - font-size: 34rem / $pxConvertRem;  
560 -  
561 - em {  
562 - color: #f00;  
563 - }  
564 - }  
565 -  
566 - .pay-mode {  
567 - background: #fff;  
568 - padding: 0 20rem / $pxConvertRem;  
569 - margin-top: -22rem / $pxConvertRem;  
570 -  
571 - li {  
572 - height: 88rem / $pxConvertRem;  
573 - line-height: 88rem / $pxConvertRem;  
574 - margin-bottom: 28rem / $pxConvertRem;  
575 - @include border-radius(5px);  
576 - font-size: 32rem / $pxConvertRem;  
577 - color: #fff;  
578 - text-align: center;  
579 - background: #000;  
580 - }  
581 -  
582 - .default {  
583 - background: #57b038;  
584 - }  
585 -  
586 - .iconfont {  
587 - margin-right: 20rem / $pxConvertRem;  
588 - font-size: 32rem / $pxConvertRem;  
589 - }  
590 - }  
591 -}  
1 -.select-address-page {  
2 - padding-bottom: pxToRem(20px);  
3 -  
4 - .add-address {  
5 - margin-bottom: 0;  
6 - }  
7 -  
8 -}  
1 -.select-coupon-page {  
2 - margin-top: pxToRem(30px);  
3 - margin-bottom: pxToRem(30px);  
4 -  
5 - #new-coupon {  
6 - margin-bottom: pxToRem(30px);  
7 - padding-left: pxToRem(30px);  
8 - padding-right: pxToRem(30px);  
9 - font-size: pxToRem(24px);  
10 -  
11 - input {  
12 - padding: 0 pxToRem(12px);  
13 - width: pxToRem(384px);  
14 - height: pxToRem(80px);  
15 - border: 1px solid #b0b0b0;  
16 - border-radius: .1rem;  
17 - outline: 0;  
18 - }  
19 -  
20 - .submit {  
21 - margin-left: pxToRem(30px);  
22 - width: pxToRem(130px);  
23 - height: pxToRem(80px);  
24 - color: #fff;  
25 - background: #b0b0b0;  
26 - border-radius: .1rem;  
27 - border: none;  
28 - outline: 0;  
29 - }  
30 - }  
31 -  
32 - .coupon-list {  
33 - .employ-main:first-child {  
34 - margin-top: 0;  
35 - }  
36 - .employ-main:last-child {  
37 - margin-bottom: 0;  
38 - }  
39 - }  
40 -  
41 - %line {  
42 - content: '';  
43 - position: absolute;  
44 - top: 50%;  
45 - border-top: 1px solid #b0b0b0;  
46 - width: pxToRem(120px);  
47 - height: 0;  
48 - }  
49 -  
50 - .not-use {  
51 - display: block;  
52 - width: pxToRem(560px);  
53 - margin: pxToRem(30px) auto 0;  
54 - text-align: center;  
55 - font-size: pxToRem(32px);  
56 - line-height: 2.5;  
57 - border: 1px solid #444;  
58 - @include border-radius(4px);  
59 - }  
60 -  
61 - .not-avaliable-coupon-line {  
62 - position: relative;  
63 - margin-top: pxToRem(30px);  
64 - margin-bottom: pxToRem(30px);  
65 - font-size: pxToRem(28px);  
66 - line-height: 2;  
67 - color: #b0b0b0;  
68 - text-align: center;  
69 -  
70 - &:before {  
71 - @extend %line;  
72 - left: pxToRem(60px);  
73 - }  
74 -  
75 - &:after {  
76 - @extend %line;  
77 - right: pxToRem(60px);  
78 - }  
79 - }  
80 -  
81 - .not-avaliable {  
82 - background-image: image-url('me/employ/employ-grey.jpg') !important;  
83 - }  
84 -}  
1 -.brand-page {  
2 - .re-pos-search {  
3 - top: 170rem / $pxConvertRem !important;  
4 - }  
5 - .hide-when-loading {  
6 - display: none;  
7 - }  
8 - .genderNav {  
9 - display: block;  
10 - width: 100%;  
11 - height: 80rem / $pxConvertRem;  
12 - line-height: 80rem / $pxConvertRem;  
13 - overflow: hidden;  
14 - color: #aeaeae;  
15 - z-index: 3;  
16 - position: fixed;  
17 - top: 90rem / $pxConvertRem;  
18 - border-bottom: 1px solid #e1e1e1;  
19 - background-color: #fff;  
20 -  
21 - ul{  
22 - width: 100%;  
23 - height: 90%;  
24 - overflow: hidden;  
25 - li{  
26 - width: 25%;  
27 - height: 100%;  
28 - overflow: hidden;  
29 - float: left;  
30 - text-align: center;  
31 - position: relative;  
32 - font-size: 28rem / $pxConvertRem;  
33 - i{  
34 - width: 100%;  
35 - height: 40%;  
36 - overflow: hidden;  
37 - display: block;  
38 - }  
39 - span:not(.split-border){  
40 - width: 100%;  
41 - height: auto;  
42 - overflow: hidden;  
43 - display: block;  
44 - //line-height: 40rem / $pxConvertRem;  
45 - }  
46 -  
47 - .split-border {  
48 - display: inline-block;  
49 - width: 2px;  
50 - height: 1rem;  
51 - background-color: #e1e1e1;  
52 - position: absolute;  
53 - top: 30%;  
54 - right: 0;  
55 - }  
56 - }  
57 -  
58 - li:last-child {  
59 - .split-border {  
60 - display: none;  
61 - }  
62 - }  
63 -  
64 - li.active {  
65 - color: #444;  
66 - }  
67 - }  
68 - }  
69 - .newbrand-search {  
70 - width: 93.75%;  
71 - height: 60rem / $pxConvertRem;  
72 - padding: 14rem / $pxConvertRem 3.125%;  
73 - background-color: #f8f8f8;  
74 - left: 0;  
75 - top: 90rem / $pxConvertRem;  
76 - position: fixed;  
77 - z-index: 2;  
78 -  
79 - .search-box {  
80 - position: relative;  
81 - width: 500rem / $pxConvertRem; //450  
82 - height: 60rem / $pxConvertRem;  
83 - background-color: #FFF;  
84 - border-radius: 30rem / $pxConvertRem;  
85 - padding: 0 32rem / $pxConvertRem 0 52rem / $pxConvertRem;  
86 -  
87 - a {  
88 - width: 100%;  
89 - height: 60rem / $pxConvertRem;  
90 - border: 0;  
91 - display: block;  
92 - span {  
93 - line-height: 60rem / $pxConvertRem;  
94 - color: #bdbdbd;  
95 - font-size: 1.2em;  
96 - padding-left: 18rem / $pxConvertRem;  
97 - }  
98 - }  
99 -  
100 - .search-icon {  
101 - position: absolute;  
102 - font-size: 24rem / $pxConvertRem;  
103 - top: 0;  
104 - left: 24rem / $pxConvertRem;  
105 - line-height: 60rem / $pxConvertRem;  
106 - color: #bdbdbd;  
107 - }  
108 -  
109 - .search-input {  
110 - border: none;  
111 - width: 95%;  
112 - height: 60rem / $pxConvertRem;  
113 - // line-height: 1;  
114 - font-size: 1.2em;  
115 - padding: 0 10rem / $pxConvertRem;  
116 - }  
117 -  
118 - .search-action {  
119 - display: none;  
120 - position: absolute;  
121 - top: 0;  
122 - right: -74rem / $pxConvertRem;  
123 - font-size: 32rem / $pxConvertRem;  
124 - line-height: 60rem / $pxConvertRem;  
125 - color: #666;  
126 - }  
127 -  
128 - .cancel-btn {  
129 - display: inline;  
130 - font-size: 28rem / $pxConvertRem;  
131 - vertical-align: middle;  
132 - color: #666;  
133 - }  
134 -  
135 - .clear-text {  
136 - margin-right: 20rem / $pxConvertRem;  
137 - }  
138 - }  
139 - }  
140 -  
141 - .banner-top {  
142 - padding-top: 258rem / $pxConvertRem;  
143 - background-color:#f8f8f8;  
144 - }  
145 -  
146 - .hot-brands {  
147 - padding-top: 178rem / $pxConvertRem;  
148 -  
149 - .floor-header {  
150 - padding: 0;  
151 - }  
152 -  
153 - .brands-swiper {  
154 - border-top: 0;  
155 - }  
156 - }  
157 -  
158 - .hot-brand {  
159 - margin: (30rem / $pxConvertRem) 0 0;  
160 -  
161 - .hot-brand-list {  
162 - background: #fff;  
163 -  
164 - li {  
165 - float: left;  
166 - width: 158rem / $pxConvertRem;  
167 - height: 158rem / $pxConvertRem;  
168 -  
169 - .img-box {  
170 - display: table-cell;  
171 - vertical-align: middle;  
172 - text-align: center;  
173 - width: 158rem / $pxConvertRem;  
174 - height: 158rem / $pxConvertRem;  
175 - }  
176 -  
177 - img {  
178 - max-width: 140rem / $pxConvertRem;  
179 - max-height: 140rem / $pxConvertRem;  
180 - }  
181 - }  
182 - }  
183 - }  
184 -  
185 - .brand-list {  
186 - width: 100%;  
187 -  
188 - .title-bar {  
189 - width: 100%;  
190 - background: #eeeeee;  
191 - color: #999999;  
192 - // font-weight: bold;  
193 - position: relative;  
194 -  
195 - h2 {  
196 - // width: 100%;  
197 - padding: 0 20rem / $pxConvertRem;  
198 - height: 50rem / $pxConvertRem;  
199 - line-height: 50rem / $pxConvertRem;  
200 - font-size: 34rem / $pxConvertRem;  
201 - border-top: 1px solid #e6e6e6;  
202 - background-color: #f4f4f4;  
203 - }  
204 - }  
205 -  
206 - p {  
207 - cursor: pointer;  
208 - // height: 50rem / $pxConvertRem;  
209 - padding: 0 20rem / $pxConvertRem;  
210 -  
211 - a {  
212 - display: block;  
213 - // padding-top: 10rem / $pxConvertRem;  
214 - height: 76rem / $pxConvertRem;  
215 - line-height: 76rem / $pxConvertRem;  
216 - font-size: 28rem / $pxConvertRem;  
217 - border-bottom: 1px solid #f3f3f3;  
218 - border-top: 1px solid #f9f9f9;  
219 -  
220 - i {  
221 - display: inline-block;  
222 - margin-top: -4rem / $pxConvertRem;  
223 - width: 108rem / $pxConvertRem;  
224 - height: 42rem / $pxConvertRem;  
225 - text-align: center;  
226 - vertical-align: middle;  
227 - font-size: 28rem / $pxConvertRem;  
228 - line-height: 44rem / $pxConvertRem;  
229 - color: #fff;  
230 - border-radius: 50rem / $pxConvertRem;  
231 - @include scale(.8)  
232 - }  
233 -  
234 - .icon-hot {  
235 - background: #ff0000;  
236 - }  
237 -  
238 - .icon-new {  
239 - background: #86c048;  
240 - }  
241 - }  
242 - }  
243 - }  
244 -  
245 - .right-bar {  
246 - width: 60rem / $pxConvertRem;  
247 - height: 75%;  
248 - top: 20%;  
249 - overflow: auto;  
250 - position: fixed;  
251 - right: 2rem / $pxConvertRem;  
252 - border-radius: 12rem / $pxConvertRem;  
253 - background: rgba(0, 0, 0, .8);  
254 - z-index: 2;  
255 - display: none;  
256 -  
257 - b {  
258 - height: 36rem / $pxConvertRem;  
259 - line-height: 36rem / $pxConvertRem;  
260 - text-align: center;  
261 - display: block;  
262 - color: #999999;  
263 - font-weight: bold;  
264 - }  
265 - }  
266 - .right-bar::-webkit-scrollbar {  
267 - display: none;  
268 - }  
269 -  
270 - .con {  
271 - padding-top: 10rem / $pxConvertRem;  
272 - }  
273 -  
274 - .search-result {  
275 - padding-top: 176rem / $pxConvertRem;  
276 - }  
277 -}  
1 -.hot-category {  
2 - margin: (30rem / $pxConvertRem) 0 0;  
3 - border-top: 1px solid #e0e0e0;  
4 - .category-banner {  
5 - height: 198rem / $pxConvertRem;  
6 - img {  
7 - display: block;  
8 - width: 100%;  
9 - height: 100%;  
10 - }  
11 - }  
12 - .category-list {  
13 - background: #fff;  
14 - border-top: 1px solid #e0e0e0;  
15 - li {  
16 - float: left;  
17 - width: 158rem / $pxConvertRem;  
18 - height: 174rem / $pxConvertRem;  
19 - border-bottom: 1px solid #e0e0e0;  
20 - border-left: 1px solid #e0e0e0;  
21 - .img-box {  
22 - width: 100%;  
23 - height: 138rem / $pxConvertRem;  
24 - text-align: center;  
25 - vertical-align: middle;  
26 - img {  
27 - max-width: 100%;  
28 - max-height: 100%;  
29 - vertical-align: middle;  
30 - }  
31 - }  
32 -  
33 - }  
34 - }  
35 -}  
1 -@import "brand";  
2 -  
3 -.category-page {  
4 - font-size: 30rem / $pxConvertRem;  
5 -  
6 - .search-input {  
7 - position: relative;  
8 - background-color: #f8f8f8;  
9 - padding: 13rem / $pxConvertRem 20rem / $pxConvertRem;  
10 -  
11 - p {  
12 - box-sizing: border-box;  
13 - width: 100%;  
14 - height: 60rem / $pxConvertRem;  
15 - line-height: 60rem / $pxConvertRem;  
16 - border: none;  
17 - padding-left: 66rem / $pxConvertRem;  
18 - border-radius: 60rem / $pxConvertRem;  
19 - font-size: 26rem / $pxConvertRem;  
20 - background: #fff;  
21 - color: #999;  
22 - }  
23 - }  
24 -  
25 - .search-icon {  
26 - position: absolute;  
27 - top: 0;  
28 - bottom: 0;  
29 - left: 43rem / $pxConvertRem;  
30 - line-height: 86rem / $pxConvertRem;  
31 - color: #999;  
32 - }  
33 -  
34 - .category-nav {  
35 - height: 70rem / $pxConvertRem;  
36 - border-bottom: 1px solid #e6e6e6;  
37 -  
38 - li {  
39 - display: block;  
40 - box-sizing: border-box;  
41 - float: left;  
42 - height: 100%;  
43 - padding: 20rem / $pxConvertRem 0;  
44 - width: 25%;  
45 - text-align: center;  
46 - color: #999;  
47 -  
48 - &:last-child {  
49 - border-right: none;  
50 - }  
51 -  
52 - &.focus {  
53 - color: #000;  
54 - }  
55 -  
56 - &.bytouch{  
57 - background:#eee;  
58 - }  
59 - }  
60 -  
61 -  
62 -  
63 - span {  
64 - display: block;  
65 - width: 100%;  
66 - height: 30rem / $pxConvertRem;  
67 - line-height: 30rem / $pxConvertRem;  
68 - font-size: 30rem / $pxConvertRem;  
69 - border-right: 1px solid #e6e6e6;  
70 - }  
71 -  
72 - li:last-child span {  
73 - border-right: 0;  
74 - }  
75 - }  
76 -  
77 - .content {  
78 - background: #f8f8f8;  
79 -  
80 - &.hide {  
81 - display: none;  
82 - }  
83 - }  
84 -  
85 - .primary-level {  
86 - float: left;  
87 - box-sizing: border-box;  
88 - width: 45%;  
89 -  
90 - > li {  
91 - height: 89rem / $pxConvertRem;  
92 - line-height: 89rem / $pxConvertRem;  
93 - padding-left: 32rem / $pxConvertRem;  
94 -  
95 - &.focus {  
96 - background-color: #fff;  
97 - }  
98 -  
99 - &.highlight {  
100 - background-color: #eee;  
101 - }  
102 - }  
103 - }  
104 -  
105 - .sub-level-container {  
106 - float: left;  
107 - box-sizing: border-box;  
108 - background: #fff;  
109 - width: 55%;  
110 - height: 100%;  
111 - }  
112 -  
113 - .sub-level {  
114 - width: 100%;  
115 -  
116 - &.hide {  
117 - display: none;  
118 - }  
119 -  
120 - > li {  
121 - box-sizing: border-box;  
122 - height: 89rem / $pxConvertRem;  
123 - line-height: 89rem / $pxConvertRem;  
124 - border-bottom: 1px solid #e6e6e6;  
125 - padding-left: 20rem / $pxConvertRem;  
126 -  
127 - &.highlight {  
128 - background: #eee;  
129 - }  
130 -  
131 - &:last-child {  
132 - border-bottom: none;  
133 - }  
134 - }  
135 -  
136 - a {  
137 - display: block;  
138 - height: 100%;  
139 - width: 100%;  
140 - color: #000;  
141 - }  
142 - }  
143 -}  
1 -@import "guang/clothes/*.png";  
2 -$clothes: sprite-map("guang/clothes/*.png");  
3 -  
4 -@mixin retina-sprite($map, $sprite, $scale) {  
5 - $width: image-width(sprite-file($map, $sprite));  
6 - $height: image-height(sprite-file($map, $sprite));  
7 - $offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);  
8 - background: sprite-url($map) 0 $offsetY no-repeat;  
9 - $zoomX: ceil(image_width(sprite-path($map)) / $scale);  
10 - $zoomY: auto;  
11 - @include background-size($zoomX $zoomY);  
12 - display: block;  
13 -}  
14 -  
15 -@mixin relatedTitle {  
16 - margin: 0 29rem / $pxConvertRem;  
17 - background: #fff;  
18 - border: 1px solid #e0e0e0;  
19 - border-bottom: none;  
20 - line-height: 72rem / $pxConvertRem;  
21 - font-size: 30rem / $pxConvertRem;  
22 - color: #b0b0b0;  
23 - text-align: center;  
24 -}  
25 -  
26 -.guang-detail-page {  
27 - #wrapper {  
28 - background: #f0f0f0;  
29 - }  
30 -  
31 - #wrapper.ios {  
32 - position: absolute;  
33 - top: 0;  
34 - bottom: 0;  
35 - left: 0;  
36 - right: 0;  
37 - overflow: hidden;  
38 -  
39 - &.has-head {  
40 - top: 90rem / $pxConvertRem;  
41 -  
42 - + .fixed-top {  
43 - top: 90rem / $pxConvertRem;  
44 - }  
45 - }  
46 - }  
47 -  
48 - .author {  
49 - border-bottom: 1px solid #e0e0e0;  
50 - background: #fff;  
51 -  
52 - > a {  
53 - display: block;  
54 - height: 100%;  
55 - }  
56 -  
57 - .avatar {  
58 - float: left;  
59 - margin-top: 20rem / $pxConvertRem;  
60 - margin-left: 30rem / $pxConvertRem;  
61 - width: 50rem / $pxConvertRem;  
62 - height: 50rem / $pxConvertRem;  
63 - @include border-radius(50%);  
64 - }  
65 -  
66 - .name {  
67 - float: left;  
68 - font-size: 28rem / $pxConvertRem;  
69 - color: #000;  
70 - padding: 30rem / $pxConvertRem 0;  
71 - margin-left: 30rem / $pxConvertRem;  
72 - }  
73 -  
74 - .intro {  
75 - float: left;  
76 - font-size: 28rem / $pxConvertRem;  
77 - color: #b0b0b0;  
78 - padding: 30rem / $pxConvertRem 0;  
79 - margin-left: 30rem / $pxConvertRem;  
80 - }  
81 - }  
82 -  
83 - .post-title {  
84 - padding: 16rem / $pxConvertRem 0 26rem / $pxConvertRem 30rem / $pxConvertRem;  
85 - background: #fff;  
86 -  
87 - .title {  
88 - line-height: 60rem / $pxConvertRem;  
89 - font-size: 40rem / $pxConvertRem;  
90 - color: #000;  
91 - font-weight: bold;  
92 - }  
93 - }  
94 -  
95 - .text-block {  
96 - padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;  
97 - line-height: 46rem / $pxConvertRem;  
98 - font-size: 28rem / $pxConvertRem;  
99 - background: #fff;  
100 - color: #444;  
101 - }  
102 -  
103 - .big-img-block {  
104 - padding-bottom: 5rem / $pxConvertRem;  
105 - background: #fff;  
106 -  
107 - img {  
108 - width: 100%;  
109 - height: 640rem / $pxConvertRem;  
110 - }  
111 - }  
112 -  
113 - .small-img-block {  
114 - padding-bottom: 8rem / $pxConvertRem;  
115 - background: #fff;  
116 -  
117 - img {  
118 - float: right;  
119 - width: 315rem / $pxConvertRem;  
120 - height: 420rem / $pxConvertRem;  
121 -  
122 - &:first-child {  
123 - float: left;  
124 - }  
125 - }  
126 - }  
127 -  
128 - .collocation-block {  
129 - background: #fff;  
130 -  
131 - .good-list {  
132 - padding-left:15rem / $pxConvertRem;  
133 - }  
134 - }  
135 -  
136 - .thumb-container {  
137 - padding-top: 30rem / $pxConvertRem;  
138 - padding-left: 20rem / $pxConvertRem;  
139 - background: transparent image-url('guang/thumb-container-bg.png') no-repeat;  
140 - background-size: 200% 100%;  
141 -  
142 - &.fixed-top {  
143 - position: fixed;  
144 - left: 0;  
145 - right: 0;  
146 - top: 0;  
147 - }  
148 -  
149 - &.fixed-bottom {  
150 - position: fixed;  
151 - left: 0;  
152 - right: 0;  
153 - bottom: 0;  
154 - background: rgba(255,255,255,0.9);  
155 - }  
156 -  
157 - &.absolute {  
158 - position: absolute;  
159 - left: 0;  
160 - right: 0;  
161 - }  
162 -  
163 - &.static {  
164 - position: static;  
165 - }  
166 -  
167 - &.hide {  
168 - display: none;  
169 - }  
170 - }  
171 -  
172 - .clothe-type {  
173 - position: absolute;  
174 - right: 6rem / $pxConvertRem;  
175 - bottom: 34rem / $pxConvertRem;  
176 - width: 20px;  
177 - height: 20px;  
178 - @include border-radius(50%);  
179 -  
180 - &.bag {  
181 - @include retina-sprite ($clothes, bag, 80/20);  
182 - background-color: #fff;  
183 - background-size: 100%;  
184 - }  
185 -  
186 - &.cloth {  
187 - @include retina-sprite ($clothes, cloth, 80/20);  
188 - background-color: #fff;  
189 - background-size: 100%;  
190 - }  
191 -  
192 - &.dress {  
193 - @include retina-sprite ($clothes, dress, 80/20);  
194 - background-color: #fff;  
195 - background-size: 100%;  
196 - }  
197 -  
198 - &.headset {  
199 - @include retina-sprite ($clothes, headset, 80/20);  
200 - background-color: #fff;  
201 - background-size: 100%;  
202 - }  
203 -  
204 - &.lamp {  
205 - @include retina-sprite ($clothes, lamp, 80/20);  
206 - background-color: #fff;  
207 - background-size: 100%;  
208 - }  
209 -  
210 - &.pants {  
211 - @include retina-sprite ($clothes, pants, 80/20);  
212 - background-color: #fff;  
213 - background-size: 100%;  
214 - }  
215 -  
216 - &.shoe {  
217 - @include retina-sprite ($clothes, shoe, 80/20);  
218 - background-color: #fff;  
219 - background-size: 100%;  
220 - }  
221 -  
222 - &.swim-suit {  
223 - @include retina-sprite ($clothes, swim-suit, 80/20);  
224 - background-color: #fff;  
225 - background-size: 100%;  
226 - }  
227 -  
228 - &.under {  
229 - @include retina-sprite ($clothes, under, 80/20);  
230 - background-color: #fff;  
231 - background-size: 100%;  
232 - }  
233 -  
234 - &.watch {  
235 - @include retina-sprite ($clothes, watch, 80/20);  
236 - background-color: #fff;  
237 - background-size: 100%;  
238 - }  
239 - }  
240 -  
241 - .thumb {  
242 - display: inline-block;  
243 - position: relative;  
244 - margin-right: 22rem / $pxConvertRem;  
245 - padding-bottom: 30rem / $pxConvertRem;  
246 -  
247 - &:last-child {  
248 - margin-right: 0;  
249 - }  
250 -  
251 - &.focus .thumb-img {  
252 - border-color: #000;  
253 - }  
254 - }  
255 -  
256 - .thumb-img {  
257 - height: 134rem / $pxConvertRem;  
258 - width: 96rem / $pxConvertRem;  
259 - border: 1px solid transparent;  
260 - }  
261 -  
262 - .related-reco-block {  
263 - background: #fff;  
264 - padding-left: 15rem / $pxConvertRem;  
265 - border-top: 1px solid #e0e0e0;  
266 -  
267 - h2 {  
268 - margin-left: -15rem / $pxConvertRem;  
269 - line-height: 104rem / $pxConvertRem;  
270 - font-size: 30rem / $pxConvertRem;  
271 - color: #b0b0b0;  
272 - text-align: center;  
273 - }  
274 -  
275 - .one-good {  
276 - padding-left: 15rem / $pxConvertRem;  
277 - padding-right: 30rem / $pxConvertRem;  
278 - margin-bottom: 20rem / $pxConvertRem;  
279 -  
280 - .thumb {  
281 - float: left;  
282 - height: 134rem / $pxConvertRem;  
283 - width: 96rem / $pxConvertRem;  
284 - }  
285 -  
286 - .content-container {  
287 - padding-left: 120rem / $pxConvertRem;  
288 - height: 134rem / $pxConvertRem;  
289 - line-height: 1;  
290 - font-size: 24rem / $pxConvertRem;  
291 -  
292 - > p {  
293 - height: 50%;  
294 - line-height: 94rem / $pxConvertRem;  
295 - }  
296 -  
297 - span {  
298 - display: inline-block;  
299 - line-height: 24rem / $pxConvertRem;  
300 - }  
301 -  
302 - .price {  
303 - line-height: 47rem / $pxConvertRem;  
304 - }  
305 - }  
306 -  
307 - .sale-price {  
308 - color: #d62927;  
309 - line-height: 1.5;  
310 - }  
311 -  
312 - .sale-price.no-price {  
313 - color: #000;  
314 - }  
315 -  
316 - .market-price {  
317 - margin-left: 5rem / $pxConvertRem;  
318 - color: #b0b0b0;  
319 - text-decoration: line-through;  
320 - line-height: 1.5;  
321 - }  
322 -  
323 - .check-detail {  
324 - display: inline-block;  
325 - color: #000;  
326 - border: 1px solid;  
327 - border-radius: 2px;  
328 - float: right;  
329 - padding: 0 5px;  
330 - line-height: 1.5;  
331 - }  
332 - }  
333 - }  
334 -  
335 - .link-block {  
336 - display: block;  
337 - height: 80rem / $pxConvertRem;  
338 - line-height: 80rem / $pxConvertRem;  
339 - padding: 0 30rem / $pxConvertRem;  
340 - font-size: 16px;  
341 - background: #fff;  
342 - border-top: 1px solid #e0e0e0;  
343 - border-bottom: 1px solid #e0e0e0;  
344 -  
345 - .iconfont {  
346 - float: right;  
347 - color: #ccc;  
348 - }  
349 - }  
350 -  
351 - .related-brand {  
352 - margin-top: 30rem / $pxConvertRem;  
353 -  
354 - h2 {  
355 - @include relatedTitle;  
356 - }  
357 -  
358 - .brand-list {  
359 - border-top: 1px solid #e0e0e0;  
360 - border-bottom: 1px solid #e0e0e0;  
361 - padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;  
362 - background: #fff;  
363 - }  
364 -  
365 - .brand {  
366 - float: left;  
367 - width: 158rem / $pxConvertRem;  
368 - height: 128rem / $pxConvertRem;  
369 - border-right: 1px solid #e0e0e0;  
370 - margin-bottom: 10rem / $pxConvertRem;  
371 -  
372 - a {  
373 - display: block;  
374 - }  
375 -  
376 - &:nth-child(4n) {  
377 - border-right: none;  
378 - }  
379 - }  
380 -  
381 - .brand-logo {  
382 - display: table-cell;  
383 - width: 158rem / $pxConvertRem;  
384 - height: 94rem / $pxConvertRem;  
385 - vertical-align: middle;  
386 -  
387 - img {  
388 - display: block;  
389 - max-width: 158rem / $pxConvertRem;  
390 - max-height: 94rem / $pxConvertRem;  
391 - vertical-align: middle;  
392 - margin: 0 auto;  
393 - }  
394 - }  
395 -  
396 - .brand-name {  
397 - margin: 10rem / $pxConvertRem 0 0 0;  
398 - line-height: 24rem / $pxConvertRem;  
399 - font-size: 18rem / $pxConvertRem;  
400 - color: #babac2;  
401 - text-align: center;  
402 - text-decoration: none;  
403 - border-bottom: none;  
404 - overflow: hidden;  
405 - text-overflow: ellipsis;  
406 - white-space: nowrap;  
407 - }  
408 - }  
409 -  
410 - .related-tag {  
411 - position: relative;  
412 - padding-bottom: 30rem / $pxConvertRem;  
413 - border-bottom: 1px solid #e0e0e0;  
414 - background: #fff;  
415 -  
416 - .tag-bg {  
417 - position: absolute;  
418 - height: 40rem / $pxConvertRem;  
419 - width: 40rem / $pxConvertRem;  
420 - background: image-url('guang/tag.png') no-repeat;  
421 - background-size: 100% 100%;  
422 - top: 35rem / $pxConvertRem;  
423 - left: 20rem / $pxConvertRem;  
424 - }  
425 -  
426 - .tag-list {  
427 - margin-left: 50rem / $pxConvertRem;  
428 - }  
429 -  
430 - li {  
431 - float: left;  
432 - margin-top: 31rem / $pxConvertRem;  
433 - margin-left: 31rem / $pxConvertRem;  
434 - }  
435 -  
436 - a {  
437 - height: 50rem / $pxConvertRem;  
438 - line-height: 50rem / $pxConvertRem;  
439 - font-size: 30rem / $pxConvertRem;  
440 - color: #000;  
441 - text-decoration: underline;  
442 - white-space: nowrap;  
443 - }  
444 - }  
445 -  
446 - .related-info {  
447 - margin-top: 30rem / $pxConvertRem;  
448 -  
449 - h2 {  
450 - @include relatedTitle;  
451 - }  
452 -  
453 - .info-list {  
454 - background: #fff;  
455 - padding-bottom: 30rem / $pxConvertRem;  
456 - border-top: 1px solid #e0e0e0;  
457 - }  
458 -  
459 - li {  
460 - padding-top: 30rem / $pxConvertRem;  
461 - margin-bottom: 10rem / $pxConvertRem;  
462 -  
463 - a {  
464 - display: block;  
465 - }  
466 -  
467 - img {  
468 - float: left;  
469 - margin-left: 30rem / $pxConvertRem;  
470 - width: 182rem / $pxConvertRem;  
471 - height: 114rem / $pxConvertRem;  
472 -  
473 - &.square {  
474 - height: 182rem / $pxConvertRem;  
475 - }  
476 - }  
477 - }  
478 -  
479 - .title, .publish-time {  
480 - float: left;  
481 - width: 360rem / $pxConvertRem;  
482 - margin-left: 30rem / $pxConvertRem;  
483 - line-height: 40rem / $pxConvertRem;  
484 - color: #444;  
485 - font-size: 28rem / $pxConvertRem;  
486 -  
487 - }  
488 -  
489 - .publish-time {  
490 - font-size: 18rem / $pxConvertRem;  
491 - margin-top: 0;  
492 - color: #b0b0b0;  
493 -  
494 - .iconfont {  
495 - font-size: 18rem / $pxConvertRem;  
496 - }  
497 - }  
498 - }  
499 -}  
1 -@import "tvls", "info", "plus-star", "info-list", "detail", "star-classroom";  
1 -.guang-list-page {  
2 - .editor-header {  
3 - margin-bottom: 30rem / $pxConvertRem;  
4 - padding-top: 36rem / $pxConvertRem;  
5 - padding-bottom: 40rem / $pxConvertRem;  
6 - background: #fff;  
7 - border-bottom: 1px solid #e0e0e0;  
8 - }  
9 -  
10 - .avatar {  
11 - float: left;  
12 - margin-left: 30rem / $pxConvertRem;  
13 - img {  
14 - width: 100rem / $pxConvertRem;  
15 - height: 100rem / $pxConvertRem;  
16 - @include border-radius(50%);  
17 - }  
18 - }  
19 -  
20 - .text {  
21 - float: left;  
22 - margin-left: 32rem / $pxConvertRem;  
23 - width: 475rem / $pxConvertRem;  
24 - .name {  
25 - font-size: 32rem / $pxConvertRem;  
26 - line-height: 40rem / $pxConvertRem;  
27 - }  
28 - .info {  
29 - margin-top: 6rem / $pxConvertRem;  
30 - color: #bdbdbf;  
31 - font-size: 24rem / $pxConvertRem;  
32 - line-height: 32rem / $pxConvertRem;  
33 - }  
34 - }  
35 -  
36 - .swiper-container {  
37 - width: 100%;  
38 - height: 310rem / $pxConvertRem;  
39 -  
40 - img {  
41 - height: 100%;  
42 - width: 100%;  
43 - }  
44 -  
45 - .swiper-pagination {  
46 - bottom: 0;  
47 - left: 0;  
48 - width: 100%;  
49 - }  
50 -  
51 - .swiper-pagination-bullet-active {  
52 - background: #fff;  
53 - }  
54 - }  
55 -  
56 - .guang-nav {  
57 - background-color: #fff;  
58 - overflow: hidden;  
59 - height: 80rem / $pxConvertRem;  
60 - }  
61 -  
62 -  
63 - .guang-nav-item {  
64 - float: left;  
65 - color: #ccc;  
66 - font-size: 28rem / $pxConvertRem;  
67 - padding: 0 22rem / $pxConvertRem;  
68 - line-height: 80rem / $pxConvertRem;  
69 -  
70 - &.focus {  
71 - color: #000;  
72 - }  
73 - }  
74 -  
75 - .bytouch{  
76 - background:#eee;  
77 - }  
78 -  
79 - .info-list-container {  
80 - overflow-x: hidden;  
81 - background: #f0f0f0;  
82 - }  
83 -  
84 - .info-list.hide {  
85 - display: none;  
86 - }  
87 -}  
1 -.guang-info {  
2 - margin-bottom: 30rem / $pxConvertRem;  
3 - padding: 0 0 24rem / $pxConvertRem 0;  
4 - border-top: 1px solid #e0e0e0;  
5 - border-bottom: 1px solid #e0e0e0;  
6 - background: #fff;  
7 -  
8 - .info-author {  
9 - display: block;  
10 - width: 100%;  
11 -  
12 - .avatar {  
13 - float: left;  
14 - margin-top: 20rem / $pxConvertRem;  
15 - width: 50rem / $pxConvertRem;  
16 - height: 50rem / $pxConvertRem;  
17 - margin-left: 30rem / $pxConvertRem;  
18 - @include border-radius(50%);  
19 - }  
20 -  
21 - .name {  
22 - float: left;  
23 - margin-left: 30rem / $pxConvertRem;  
24 - padding: 30rem / $pxConvertRem 0;  
25 - font-size: 28rem / $pxConvertRem;  
26 - color: #000;  
27 - }  
28 - }  
29 -  
30 - &:last-child {  
31 - margin-bottom: 0;  
32 - }  
33 -  
34 - .info-img {  
35 - position: relative;  
36 - width: 100%;  
37 -  
38 - img {  
39 - display: block;  
40 - width: 100%;  
41 - }  
42 - }  
43 -  
44 - .info-match {  
45 - position: absolute;  
46 - top: 0;  
47 - left: 0;  
48 - width: 130rem / $pxConvertRem;  
49 - height: 50rem / $pxConvertRem;  
50 - line-height: 50rem / $pxConvertRem;  
51 - font-size: 28rem / $pxConvertRem;  
52 - color: #fff;  
53 - background: #000;  
54 - text-align: center;  
55 - text-decoration: none;  
56 - z-index: 1;  
57 - }  
58 -  
59 - .info-tag {  
60 - position: absolute;  
61 - top: 0;  
62 - left: 105rem / $pxConvertRem;  
63 - height: 50rem / $pxConvertRem;  
64 - width: 50rem / $pxConvertRem;  
65 -  
66 - &.collocation {  
67 - background: image-url('guang/info/collocation.png');  
68 - background-size: 100% 100%;  
69 - }  
70 -  
71 - &.fashion-good {  
72 - background: image-url('guang/info/fashion-good.png');  
73 - background-size: 100% 100%;  
74 - }  
75 -  
76 - &.fashion-man {  
77 - background: image-url('guang/info/fashion-man.png');  
78 - background-size: 100% 100%;  
79 - }  
80 -  
81 - &.tip {  
82 - background: image-url('guang/info/tip.png');  
83 - background-size: 100% 100%;  
84 - }  
85 -  
86 - &.topic {  
87 - background: image-url('guang/info/topic.png');  
88 - background-size: 100% 100%;  
89 - }  
90 - }  
91 -  
92 - .info-deps {  
93 - margin: 32rem / $pxConvertRem 0 0 0;  
94 - padding: 0 40rem / $pxConvertRem 0 30rem / $pxConvertRem;  
95 -  
96 - .info-title-container {  
97 - text-decoration: none;  
98 - color: #000;  
99 - }  
100 -  
101 - .info-title{  
102 - line-height: 44rem / $pxConvertRem;  
103 - color: #000;  
104 - font-size: 40rem / $pxConvertRem;  
105 - font-weight:bold;  
106 -  
107 - }  
108 -  
109 - .info-text {  
110 - margin: 16rem / $pxConvertRem 0 0 0;  
111 - line-height: 46rem / $pxConvertRem;  
112 - font-size: 28rem / $pxConvertRem;  
113 - color: #444;  
114 - }  
115 -  
116 - .time-view-like-share {  
117 - margin-top: 16rem / $pxConvertRem;  
118 - }  
119 - }  
120 -}  
1 -.ps-list-page {  
2 - background-color: #f0f0f0;  
3 -  
4 - .nav-tab, .ps-content {  
5 - width: 100%;  
6 - }  
7 -  
8 - .nav-tab {  
9 - height: 60rem / $pxConvertRem;  
10 - padding: 10rem / $pxConvertRem 0;  
11 - background-color: #fff;  
12 - }  
13 -  
14 - .star-nav, .plus-nav {  
15 - box-sizing: border-box;  
16 - float: left;  
17 - width: 50%;  
18 - height: 60rem / $pxConvertRem;  
19 - line-height: 60rem / $pxConvertRem;  
20 - font-size: 16px;  
21 - text-align: center;  
22 - color: #ccc;  
23 -  
24 - &.focus {  
25 - color: #000;  
26 - }  
27 - }  
28 - .bytouch{  
29 - background:#eee;  
30 - }  
31 - .star-nav {  
32 - border-right: 1px solid #ccc;  
33 - }  
34 -  
35 - .plus-star-row {  
36 - margin-bottom: 30rem / $pxConvertRem;  
37 -  
38 - &:last-child {  
39 - margin-bottom: 0;  
40 - }  
41 -  
42 - > a {  
43 - display: block;  
44 - height: 310rem / $pxConvertRem;  
45 - > img {  
46 - width: 100%;  
47 - height: 100%;  
48 - }  
49 - }  
50 - }  
51 -  
52 - .content.hide {  
53 - display: none;  
54 - }  
55 -  
56 - .swiper-container {  
57 - height: 310rem / $pxConvertRem;  
58 - }  
59 -  
60 - .swiper-pagination-bullet-active {  
61 - background: #fff;  
62 - }  
63 -  
64 - .brand-deps {  
65 - height: 40rem / $pxConvertRem;  
66 - line-height: 40rem / $pxConvertRem;  
67 - padding-left: 10rem / $pxConvertRem;  
68 - font-size: 14px;  
69 - background: #fff;  
70 - max-width: 100%;  
71 - overflow: hidden;  
72 - white-space: nowrap;  
73 - text-overflow: ellipsis;  
74 - }  
75 -}  
76 -  
77 -.ps-detail-page {  
78 - background-color: #f0f0f0;  
79 -  
80 - .ps-block {  
81 - margin-bottom: 30rem / $pxConvertRem;  
82 - border-bottom: 1px solid #e0e0e0;  
83 - border-top: 1px solid #e0e0e0;  
84 - background-color: #fff;  
85 -  
86 - &.header, &.related-infos {  
87 - border-top: none;  
88 - }  
89 -  
90 - &.related-infos {  
91 - margin-bottom: 0;  
92 - background-color: #f0f0f0;  
93 - }  
94 - }  
95 -  
96 - .header {  
97 - position: relative;  
98 -  
99 - .banner {  
100 - width: 100%;  
101 - height: 310rem / $pxConvertRem;  
102 - }  
103 -  
104 - .logo {  
105 - position: absolute;  
106 - border: 1px solid #b5b5b5;  
107 - height: 168rem / $pxConvertRem;  
108 - width: 168rem / $pxConvertRem;  
109 - top: 226rem / $pxConvertRem;  
110 - left: 50rem / $pxConvertRem;  
111 - }  
112 -  
113 - .header-content {  
114 - padding: 0 30rem / $pxConvertRem;  
115 - }  
116 -  
117 - .name-islike-container {  
118 - padding-left: 248rem / $pxConvertRem;  
119 - margin-top: 24rem / $pxConvertRem;  
120 - font-size: 34rem / $pxConvertRem;  
121 - }  
122 -  
123 - .name {  
124 - color: #000;  
125 - height: 41rem / $pxConvertRem;  
126 - width: 295rem / $pxConvertRem;  
127 - }  
128 -  
129 - .brand-islike {  
130 - position: relative;  
131 - float: right;  
132 - color: #b0b0b0;  
133 - height: 1.5rem;  
134 - width: 1.5rem;  
135 - line-height: 1.5rem;  
136 - text-align: center;  
137 - top: -0.25rem;  
138 - left: -0.25rem;  
139 -  
140 - &.like {  
141 - color: #f00;  
142 - }  
143 - }  
144 - }  
145 -  
146 - .intro {  
147 - margin-top: 49rem / $pxConvertRem;  
148 - font-size: 24rem / $pxConvertRem;  
149 - color: #444;  
150 - line-height: 150%;  
151 - }  
152 -  
153 - .more-intro {  
154 - padding: 30rem / $pxConvertRem 0;  
155 - font-size: 28rem / $pxConvertRem;  
156 - line-height: 104%;  
157 - color: #bbb;  
158 - float: right;  
159 -  
160 - .icon {  
161 - display: inline-block;  
162 - height: 100%;  
163 - width: 40rem / $pxConvertRem;  
164 - @include transition(transform .1s ease-in)  
165 - }  
166 -  
167 - &.spread .icon {  
168 - @include rotate(-180deg);  
169 - }  
170 - }  
171 -  
172 - .new-arrival {  
173 - padding-left: 0 30rem / $pxConvertRem;  
174 -  
175 - .new-arrival-content {  
176 - padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;  
177 - }  
178 -  
179 - .more-goods-container {  
180 - height: 90rem / $pxConvertRem;  
181 - padding: 0 30rem / $pxConvertRem;  
182 - border-top: 1px solid #e0e0e0;  
183 - color: #000;  
184 - }  
185 -  
186 - .mg-text {  
187 - height: 100%;  
188 - line-height: 90rem / $pxConvertRem;  
189 - color: #000;  
190 - text-decoration: none;  
191 - display: block;  
192 - font-size: 16px;  
193 - }  
194 -  
195 - .more-prods {  
196 - float: right;  
197 - color: #b0b0b0;  
198 - }  
199 -  
200 - .new-arrival-header .more-prods {  
201 - margin-right: 30rem / $pxConvertRem;  
202 - margin-top: 10rem / $pxConvertRem;  
203 - }  
204 -  
205 - }  
206 -  
207 - .new-arrival-header {  
208 - padding-left: 222rem / $pxConvertRem;  
209 - padding-top: 33rem / $pxConvertRem;  
210 -  
211 - .header-text {  
212 - font-size: 28rem / $pxConvertRem;  
213 - color: #000;  
214 - line-height: 122%;  
215 - font-weight: bold;  
216 - }  
217 - }  
218 -  
219 -  
220 - .related-info-title {  
221 - margin: 0 29rem / $pxConvertRem;  
222 - border: 1px solid #e0e0e0;  
223 - border-bottom: none;  
224 - line-height: 72rem / $pxConvertRem;  
225 - font-size: 30rem / $pxConvertRem;  
226 - color: #b0b0b0;  
227 - text-align: center;  
228 - background-color: #fff;  
229 - }  
230 -  
231 - .related-infos-container .guang-info:first-child {  
232 - margin-top: 0;  
233 - }  
234 -}  
1 -.yoho-header .nav-title {  
2 - font-weight: normal;  
3 -}  
4 -  
5 -.star-class-body {  
6 - background: #333;  
7 - width: 100%;  
8 - font: 12rem / $pxConvertRem/1.5 Arial,'黑体';  
9 - float: left;  
10 -}  
11 -  
12 -.star-classroom {  
13 - background: #333;  
14 -  
15 - img {  
16 - max-width: 100%;  
17 - display: block;  
18 - border: 0;  
19 - margin: 0 auto;  
20 - }  
21 -  
22 - a {  
23 - text-decoration: none;  
24 - outline: none;  
25 - color: #000;  
26 -  
27 - &:link,  
28 - &:visited,  
29 - &:hover,  
30 - &:actived {  
31 - color: #000;  
32 - }  
33 - }  
34 -  
35 - *:focus {  
36 - outline: none;  
37 - }  
38 -  
39 - .font-bold {  
40 - font-weight: bold;  
41 - }  
42 -  
43 - .classroom-mask {  
44 - background-color: rgba(0,0,0,.5);  
45 - position: fixed;  
46 - left: 0;  
47 - right: 0;  
48 - top: 0;  
49 - bottom: 0;  
50 - z-index: -1;  
51 - display: none;  
52 - }  
53 -  
54 - .head-tab {  
55 - width: 100%;  
56 - height: 88rem / $pxConvertRem;  
57 - background: #000;  
58 -  
59 - li {  
60 - width: 33.3%;  
61 - text-align: center;  
62 - float: left;  
63 - line-height: 88rem / $pxConvertRem;  
64 - font-size: 30rem / $pxConvertRem;  
65 -  
66 - a {  
67 - color: #b0b0b0;  
68 - display: inline-block;  
69 - }  
70 -  
71 - &.cur a{  
72 - color: #fff;  
73 - }  
74 - }  
75 - }  
76 -  
77 - .banner-top {  
78 - width: 100%;  
79 - height: 310rem / $pxConvertRem;  
80 - margin-top: 30rem / $pxConvertRem;  
81 - position: relative;  
82 -  
83 - .banner-swiper {  
84 - width: 100%;  
85 - height: 310rem / $pxConvertRem;  
86 - overflow: hidden;  
87 - position: relative;  
88 -  
89 - ul {  
90 - position: relative;  
91 - height: 310rem / $pxConvertRem;  
92 -  
93 - li {  
94 - float: left;  
95 - width: 100%;  
96 - height: 310rem / $pxConvertRem;  
97 - }  
98 -  
99 - img {  
100 - width: 100%;  
101 - height: 100%;  
102 - }  
103 - }  
104 - }  
105 -  
106 - .swiper-pagination {  
107 - position: absolute;  
108 - left: 0;  
109 - right: 0;  
110 - bottom: 20rem / $pxConvertRem;  
111 - text-align: center;  
112 - z-index: 1;  
113 -  
114 - .pagination-inner {  
115 - display: inline-block;  
116 - }  
117 -  
118 - span {  
119 - display: inline-block;  
120 - width: 14rem / $pxConvertRem;  
121 - height: 14rem / $pxConvertRem;  
122 - background: #fff;  
123 - opacity: 0.5;  
124 - margin: 0 10rem / $pxConvertRem;  
125 - border-radius: 50%;  
126 - }  
127 -  
128 - .swiper-pagination-bullet-active {  
129 - background: #fff;  
130 - opacity: 1;  
131 - }  
132 - }  
133 - }  
134 -  
135 - .home-floor-sign {  
136 - width: 100%;  
137 - height: 220rem / $pxConvertRem;  
138 - margin-top: 30rem / $pxConvertRem;  
139 - background: #000;  
140 -  
141 - .nav-left {  
142 - width: 102rem / $pxConvertRem;  
143 - margin: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem;  
144 - text-align: center;  
145 - float: left;  
146 -  
147 - .user-name {  
148 - font-size: 24rem / $pxConvertRem;  
149 - color: #fff;  
150 - margin-top: 30rem / $pxConvertRem;  
151 - white-space: nowrap;  
152 - }  
153 - }  
154 -  
155 - .nav-main {  
156 - width: 252rem / $pxConvertRem;  
157 - height: 90rem / $pxConvertRem;  
158 - float: left;  
159 - background-image: image-url("guang/star-classroom/user_info_bg.png");  
160 - background-repeat: no-repeat;  
161 - background-size: contain;  
162 - margin:36rem / $pxConvertRem 0 0 10rem / $pxConvertRem;  
163 -  
164 - p {  
165 - color: #fff;  
166 - line-height: 46rem / $pxConvertRem;  
167 - font-size: 24rem / $pxConvertRem;  
168 - margin-left: 30rem / $pxConvertRem;  
169 - white-space: nowrap;  
170 - }  
171 - }  
172 -  
173 - .nav-right {  
174 - width: 195rem / $pxConvertRem;  
175 - text-align: center;  
176 - float: right;  
177 -  
178 - .wyf-img {  
179 - width: 119rem / $pxConvertRem;  
180 - height: 108rem / $pxConvertRem;  
181 - margin-top: 30rem / $pxConvertRem;  
182 - background-image: image-url("guang/star-classroom/home-wyf.png");  
183 - background-repeat: no-repeat;  
184 - background-size: contain;  
185 - display: inline-block;  
186 - }  
187 -  
188 - .add-intimacy {  
189 - width: 131rem / $pxConvertRem;  
190 - height: 52rem / $pxConvertRem;  
191 - background-image: image-url("guang/star-classroom/add_intimacy_bg.png");  
192 - background-repeat: no-repeat;  
193 - background-size: contain;  
194 - color: #fff;  
195 - font-size: 22rem / $pxConvertRem;  
196 - display: inline-block;  
197 - white-space: nowrap;  
198 - line-height: 66rem / $pxConvertRem;  
199 - margin-left: 12rem / $pxConvertRem;  
200 - }  
201 - }  
202 -  
203 - .user-head {  
204 - width: 100rem / $pxConvertRem;  
205 - height: 100rem / $pxConvertRem;  
206 - border-radius: 50%;  
207 - border: 2rem / $pxConvertRem solid #e0e0e0;  
208 - background-image: image-url("me/index/user-avatar.png");  
209 - background-repeat: no-repeat;  
210 - background-size: contain;  
211 - display: block;  
212 - }  
213 - }  
214 -  
215 - .floor-header-more {  
216 - width: 100%;  
217 - height: 88rem / $pxConvertRem;  
218 - background: #000;  
219 - position: relative;  
220 - margin-top: 30rem / $pxConvertRem;  
221 - border-top: 1rem / $pxConvertRem solid #000;  
222 -  
223 - h2 {  
224 - color: #fff;  
225 - font-size: 34rem / $pxConvertRem;  
226 - line-height: 88rem / $pxConvertRem;  
227 - text-align: center;  
228 - }  
229 -  
230 - .more-btn {  
231 - width: 64rem / $pxConvertRem;  
232 - height: 96rem / $pxConvertRem;  
233 - line-height: 86rem / $pxConvertRem;  
234 - position: absolute;  
235 - right: 20rem / $pxConvertRem;  
236 - top: 0;  
237 - color: #b0b0b0;  
238 - font-size: 50rem / $pxConvertRem;  
239 - }  
240 - }  
241 -  
242 - .home-floor-subject {  
243 - .subject-banner {  
244 - width: 100%;  
245 - height: 310rem / $pxConvertRem;  
246 - }  
247 - }  
248 -  
249 - .subject-video-area {  
250 - width: 100%;  
251 - height: 310rem / $pxConvertRem;  
252 - margin-top: 30rem / $pxConvertRem;  
253 - background: #000;  
254 -  
255 - #subject-video {  
256 - width: 100%;  
257 - height: 310rem / $pxConvertRem;  
258 - }  
259 - }  
260 -  
261 - .home-floor-collocation {  
262 - background: #000;  
263 - padding-bottom: 60rem / $pxConvertRem;  
264 -  
265 - .collocation-big-img {  
266 - width: 100%;  
267 - height: 277rem / $pxConvertRem;  
268 - padding: 0 14rem / $pxConvertRem;  
269 - box-sizing: border-box;  
270 -  
271 - li {  
272 - width: 276rem / $pxConvertRem;  
273 - height: 277rem / $pxConvertRem;  
274 - margin: 0 15rem / $pxConvertRem;  
275 - float: left;  
276 - }  
277 -  
278 - img {  
279 - height: 100%;  
280 - }  
281 - }  
282 -  
283 - .collocation-img {  
284 - width: 100%;  
285 - height: 139rem / $pxConvertRem;  
286 - margin-top: 30rem / $pxConvertRem;  
287 - position: relative;  
288 -  
289 - .collocation-swiper {  
290 - width: 100%;  
291 - height: 139rem / $pxConvertRem;  
292 - overflow: hidden;  
293 - position: relative;  
294 - }  
295 -  
296 - ul {  
297 - position: relative;  
298 - height: 139rem / $pxConvertRem;  
299 - }  
300 -  
301 - li {  
302 - float: left;  
303 - width: 229rem / $pxConvertRem;  
304 - height: 139rem / $pxConvertRem;  
305 - margin-left: 30rem / $pxConvertRem;  
306 - }  
307 -  
308 - img {  
309 - width: 100%;  
310 - height: 100%;  
311 - }  
312 - }  
313 - }  
314 -  
315 - .pop-intimacy {  
316 - width: 580rem / $pxConvertRem;  
317 - height: 920rem / $pxConvertRem;  
318 - background: #fff;  
319 - border-radius: 10rem / $pxConvertRem;  
320 - position: fixed;  
321 - top:20rem / $pxConvertRem;  
322 - left: 30rem / $pxConvertRem;  
323 - z-index: -1;  
324 - display: none;  
325 -  
326 - .intimacy-head {  
327 - text-align: center;  
328 - color: #444;  
329 - height: 140rem / $pxConvertRem;  
330 - padding-top: 20rem / $pxConvertRem;  
331 - box-sizing: border-box;  
332 - position: relative;  
333 -  
334 - .pop-close {  
335 - width: 25rem / $pxConvertRem;  
336 - height: 25rem / $pxConvertRem;  
337 - background-image: image-url("guang/star-classroom/pop-close.png");  
338 - background-repeat: no-repeat;  
339 - background-size: contain;  
340 - position: absolute;  
341 - right: 20rem / $pxConvertRem;  
342 - top: 24rem / $pxConvertRem;  
343 - }  
344 -  
345 - h1 {  
346 - font-size: 56rem / $pxConvertRem;  
347 - font-weight: bold;  
348 - line-height: 40rem / $pxConvertRem;  
349 - }  
350 -  
351 - h4 {  
352 - font-size: 24rem / $pxConvertRem;  
353 - }  
354 - }  
355 -  
356 - .my-intimacy {  
357 - font-size: 24rem / $pxConvertRem;  
358 -  
359 - span {  
360 - min-width: 10rem / $pxConvertRem;  
361 - height: 30rem / $pxConvertRem;  
362 - line-height: 30rem / $pxConvertRem;  
363 - border-radius: 30rem / $pxConvertRem;  
364 - font-size: 20rem / $pxConvertRem;  
365 - color: #fff;  
366 - padding: 0 10rem / $pxConvertRem;  
367 - margin-left: 14rem / $pxConvertRem;  
368 - background-color: #444;  
369 - }  
370 - }  
371 -  
372 - .increased {  
373 - font-size: 24rem / $pxConvertRem;  
374 - display: none;  
375 -  
376 - span {  
377 - color: red;  
378 - }  
379 - }  
380 -  
381 - .calendar {  
382 - width: 100%;  
383 - float: left;  
384 - }  
385 -  
386 - .week {  
387 - width: 100%;  
388 - height: 38rem / $pxConvertRem;  
389 - background: #aeaeae;  
390 - padding: 0 23rem / $pxConvertRem;  
391 - box-sizing: border-box;  
392 -  
393 - h3 {  
394 - width: 76rem / $pxConvertRem;  
395 - text-align: center;  
396 - font-size: 24rem / $pxConvertRem;  
397 - color: #fff;  
398 - float: left;  
399 - line-height: 38rem / $pxConvertRem;  
400 - }  
401 - }  
402 -  
403 - .day-item {  
404 - float: left;  
405 - width: 100%;  
406 - padding: 5rem / $pxConvertRem 23rem / $pxConvertRem;  
407 - box-sizing: border-box;  
408 -  
409 - .item {  
410 - width: 76rem / $pxConvertRem;  
411 - color: #444;  
412 - float: left;  
413 - text-align: center;  
414 - cursor: pointer;  
415 - margin: 5rem / $pxConvertRem 0 0 0;  
416 - height: 56rem / $pxConvertRem;  
417 - line-height: 56rem / $pxConvertRem;  
418 - font-size: 28rem / $pxConvertRem;  
419 - }  
420 -  
421 - .last-item {  
422 - color: #D2D2D2;  
423 - }  
424 -  
425 - .sign-item {  
426 - background-image: image-url("guang/star-classroom/sign-circle.png");  
427 - background-position: center;  
428 - background-repeat: no-repeat;  
429 - background-size: contain;  
430 - }  
431 - }  
432 -  
433 - .fan-charts {  
434 - width: 100%;  
435 - height: 88rem / $pxConvertRem;  
436 - border-top: 1rem / $pxConvertRem solid #d5d5d5;  
437 - text-align: center;  
438 - position: relative;  
439 - float: left;  
440 -  
441 - h2 {  
442 - font-size: 28rem / $pxConvertRem;  
443 - color: #444;  
444 - line-height: 88rem / $pxConvertRem;  
445 - }  
446 -  
447 - .arrow {  
448 - width: 88rem / $pxConvertRem;  
449 - height: 88rem / $pxConvertRem;  
450 - position: absolute;  
451 - top: 0;  
452 - right: 0;  
453 - color: #b0b0b0;  
454 - line-height: 88rem / $pxConvertRem;  
455 - }  
456 - }  
457 - }  
458 -  
459 - .fan-charts-cont {  
460 - width: 100%;  
461 - line-height: 88rem / $pxConvertRem;  
462 - float: left;  
463 -  
464 - li {  
465 - width: 100%;  
466 - height: 88rem / $pxConvertRem;  
467 - border-top: 1rem / $pxConvertRem solid #d5d5d5;  
468 - position: relative;  
469 - padding: 0 25rem / $pxConvertRem;  
470 - box-sizing: border-box;  
471 - }  
472 -  
473 - .rank-ico {  
474 - width: 52rem / $pxConvertRem;  
475 - height: 39rem / $pxConvertRem;  
476 - border-radius: 0;  
477 - background-image: image-url("guang/star-classroom/king-ico.png");  
478 - background-color: #fff;  
479 - background-repeat: no-repeat;  
480 - background-size: contain;  
481 - color: #fff;  
482 - font-size: 24rem / $pxConvertRem;  
483 - text-align: center;  
484 - line-height: 50rem / $pxConvertRem;  
485 - font-weight: bold;  
486 - position: relative;  
487 - top: 25rem / $pxConvertRem;  
488 - }  
489 -  
490 - .rank-avatar {  
491 - width: 60rem / $pxConvertRem;  
492 - height: 60rem / $pxConvertRem;  
493 - border-radius: 50%;  
494 - position: relative;  
495 - top: 15rem / $pxConvertRem;  
496 - margin-left: 20rem / $pxConvertRem;  
497 - background-image: image-url("me/index/user-avatar.png");  
498 - background-repeat: no-repeat;  
499 - background-size: contain;  
500 - display: block;  
501 - }  
502 -  
503 - .fans-name {  
504 - margin-left: 24rem / $pxConvertRem;  
505 - font-size: 24rem / $pxConvertRem;  
506 - color: #444;  
507 - width: 180rem / $pxConvertRem;  
508 - white-space: nowrap;  
509 - text-overflow: ellipsis;  
510 - overflow: hidden;  
511 - height: 88rem / $pxConvertRem;  
512 - }  
513 -  
514 - .fans-intimacy {  
515 - width: 150rem / $pxConvertRem;  
516 - float: right;  
517 - font-size: 20rem / $pxConvertRem;  
518 - color: #444;  
519 -  
520 - span {  
521 - font-size: 24rem / $pxConvertRem;  
522 - color: #d0021b;  
523 - margin-left: 5rem / $pxConvertRem;  
524 - }  
525 - }  
526 -  
527 - li > * {  
528 - float: left;  
529 - }  
530 - }  
531 -  
532 - .things-article {  
533 - width: 100%;  
534 - float: left;  
535 - }  
536 -  
537 - .things-article > li {  
538 - width: 100%;  
539 - float: left;  
540 - padding: 0 0 30rem / $pxConvertRem 30rem / $pxConvertRem;  
541 - box-sizing: border-box;  
542 - background: #000;  
543 -  
544 - .author-info {  
545 - width: 100%;  
546 - padding-top: 30rem / $pxConvertRem;  
547 - float: left;  
548 - border-top:1rem / $pxConvertRem solid #b0b0b0;  
549 -  
550 - img {  
551 - width: 70rem / $pxConvertRem;  
552 - height: 70rem / $pxConvertRem;  
553 - border-radius: 50%;  
554 - float: left;  
555 - }  
556 - }  
557 -  
558 - .author-nav {  
559 - float: left;  
560 - margin-left: 20rem / $pxConvertRem;  
561 - overflow: hidden;  
562 -  
563 - h2 {  
564 - font-size: 28rem / $pxConvertRem;  
565 - color: #fff;  
566 - }  
567 - }  
568 -  
569 - .article-count {  
570 - font-size: 24rem / $pxConvertRem;  
571 - color: #b0b0b0;  
572 -  
573 - span {  
574 - margin-right:22rem / $pxConvertRem;  
575 - }  
576 -  
577 - .see-ico {  
578 - width: 31rem / $pxConvertRem;  
579 - height: 24rem / $pxConvertRem;  
580 - padding-left: 40rem / $pxConvertRem;  
581 - }  
582 - }  
583 -  
584 - .artice-cont {  
585 - width: 100%;  
586 - margin-top: 30rem / $pxConvertRem;  
587 - float: left;  
588 -  
589 - p {  
590 - width: 100%;  
591 - height: 180rem / $pxConvertRem;  
592 - font-size: 28rem / $pxConvertRem;  
593 - line-height: 46rem / $pxConvertRem;  
594 - padding-right: 30rem / $pxConvertRem;  
595 - color: #fff;  
596 - box-sizing: border-box;  
597 - overflow: hidden;  
598 - text-overflow: ellipsis;  
599 - display: -webkit-box;  
600 - -webkit-line-clamp: 4;  
601 - -webkit-box-orient: vertical;  
602 - }  
603 - }  
604 -  
605 - .artice-imgs {  
606 - width: 100%;  
607 - margin-top: 30rem / $pxConvertRem;  
608 - float: left;  
609 - }  
610 -  
611 - .artice-imgs > li {  
612 - float: left;  
613 - width: 190rem / $pxConvertRem;  
614 - height: 190rem / $pxConvertRem;  
615 - margin-right: 5rem / $pxConvertRem;  
616 -  
617 - img {  
618 - width: 100%;  
619 - height: 100%;  
620 - border-radius: 4rem / $pxConvertRem;  
621 - }  
622 - }  
623 - }  
624 -  
625 - .artice-zan {  
626 - width: 100%;  
627 - border-top: 1rem / $pxConvertRem solid #b0b0b0;  
628 - margin-top: 27rem / $pxConvertRem;  
629 - float: left;  
630 - padding-top: 20rem / $pxConvertRem;  
631 -  
632 - .iconfont {  
633 - float: left;  
634 - width: 34rem / $pxConvertRem;  
635 - height: 34rem / $pxConvertRem;  
636 - line-height: 34rem / $pxConvertRem;  
637 - display: inline-block;  
638 - color: #b0b0b0;  
639 - font-size: 34rem / $pxConvertRem;  
640 - text-align: center;  
641 - margin: 9rem / $pxConvertRem 53rem / $pxConvertRem 0 14rem / $pxConvertRem;  
642 - outline: none;  
643 - }  
644 -  
645 - .like {  
646 - color: #D62927;  
647 - }  
648 -  
649 - ul {  
650 - float: left;  
651 - width: 420rem / $pxConvertRem;  
652 - height: 50rem / $pxConvertRem;  
653 - overflow: hidden;  
654 - }  
655 -  
656 - li {  
657 - float: left;  
658 - margin: 0 10rem / $pxConvertRem;  
659 - width: 50rem / $pxConvertRem;  
660 - height: 50rem / $pxConvertRem;  
661 -  
662 - img {  
663 - width: 100%;  
664 - height: 100%;  
665 - border-radius: 50%;  
666 - }  
667 - }  
668 -  
669 - .zan-more {  
670 - float: left;  
671 - width: 50rem / $pxConvertRem;  
672 - height: 50rem / $pxConvertRem;  
673 - border-radius: 50%;  
674 - margin: 0 10rem / $pxConvertRem;  
675 - background: #f0f0f0;  
676 - color: #acb1b7;  
677 - font-size: 24rem / $pxConvertRem;  
678 - text-align: center;  
679 - line-height: 50rem / $pxConvertRem;  
680 - /*display: none;*/  
681 - }  
682 - }  
683 -  
684 - .subject-list {  
685 - width: 100%;  
686 - height: auto;  
687 - overflow: hidden;  
688 -  
689 - li {  
690 - width: 100%;  
691 - float: left;  
692 - background: #000;  
693 - margin-top: 30rem / $pxConvertRem;  
694 -  
695 - img {  
696 - width: 100%;  
697 - }  
698 -  
699 - p {  
700 - width: 100%;  
701 - height: 88rem / $pxConvertRem;  
702 - box-sizing: border-box;  
703 - overflow: hidden;  
704 - white-space: nowrap;  
705 - text-overflow: ellipsis;  
706 - padding: 0 34rem / $pxConvertRem;  
707 - font-size: 34rem / $pxConvertRem;  
708 - line-height: 88rem / $pxConvertRem;  
709 - }  
710 -  
711 - a {  
712 - color: #fff;  
713 - }  
714 - }  
715 - }  
716 -  
717 - .collocation-list {  
718 - width: 100%;  
719 - float: left;  
720 -  
721 - li {  
722 - float: left;  
723 - width: 100%;  
724 - margin-top: 30rem / $pxConvertRem;  
725 - background: #000;  
726 -  
727 - .cont-area {  
728 - width: 100%;  
729 - box-sizing: border-box;  
730 - padding: 30rem / $pxConvertRem;  
731 - }  
732 -  
733 - .cont-txt {  
734 - font-size: 28rem / $pxConvertRem;  
735 - line-height: 46rem / $pxConvertRem;  
736 - color: #b0b0b0;  
737 - margin-top: 10rem / $pxConvertRem;  
738 - }  
739 -  
740 - img {  
741 - width: 100%;  
742 - }  
743 -  
744 - .title {  
745 - font-size: 40rem / $pxConvertRem;  
746 - line-height: 48rem / $pxConvertRem;  
747 - color: #fff;  
748 - width: 100%;  
749 - }  
750 - }  
751 - }  
752 -  
753 - .count-area {  
754 - position: relative;  
755 - width: 100%;  
756 - height: 32rem / $pxConvertRem;  
757 -  
758 - span {  
759 - font-size: 24rem / $pxConvertRem;  
760 - color: #b0b0b0;  
761 - height: 32rem / $pxConvertRem;  
762 - line-height: 32rem / $pxConvertRem;  
763 -  
764 - i {  
765 - display: inline-block;  
766 - margin-right: 5rem / $pxConvertRem;  
767 - font-size: 24rem / $pxConvertRem;  
768 - }  
769 - }  
770 -  
771 - .time {  
772 - float: left;  
773 - }  
774 -  
775 - .see {  
776 - float: left;  
777 - margin-left: 20rem / $pxConvertRem;  
778 - }  
779 -  
780 - .time-ico {  
781 - width: 24rem / $pxConvertRem;  
782 - height: 24rem / $pxConvertRem;  
783 - }  
784 -  
785 - .see-ico {  
786 - width: 31rem / $pxConvertRem;  
787 - height: 24rem / $pxConvertRem;  
788 - }  
789 -  
790 - .collection {  
791 - position: absolute;  
792 - right: 122rem / $pxConvertRem;  
793 - }  
794 -  
795 - .collected-ico {  
796 - width: 34rem / $pxConvertRem;  
797 - height: 32rem / $pxConvertRem;  
798 - vertical-align: text-bottom;  
799 - }  
800 -  
801 - .collected {  
802 - color: #D62927;  
803 - }  
804 -  
805 - .forward {  
806 - width: 40rem / $pxConvertRem;  
807 - height: 28rem / $pxConvertRem;  
808 - position: absolute;  
809 - right: 23rem / $pxConvertRem;  
810 - margin-left: 45rem / $pxConvertRem;  
811 - font-size: 24rem / $pxConvertRem;  
812 - color: #b0b0b0;  
813 - height: 32rem / $pxConvertRem;  
814 - line-height: 32rem / $pxConvertRem;  
815 - }  
816 - }  
817 -  
818 - .things-list {  
819 - .things-article > li {  
820 - margin-top: 30rem / $pxConvertRem;  
821 -  
822 - .author-info {  
823 - border-top: none;  
824 - }  
825 - }  
826 - }  
827 -  
828 - .check-in {  
829 - background: #f0f0f0;  
830 -  
831 - .check-in-header {  
832 - width: 100%;  
833 - height: 283rem / $pxConvertRem;  
834 - background-image: image-url("guang/star-classroom/checkIn-bg.jpg");  
835 - background-repeat: no-repeat;  
836 - background-size: contain;  
837 - }  
838 -  
839 - .head-cont {  
840 - text-align: center;  
841 - padding-top: 30rem / $pxConvertRem;  
842 - height: 195rem / $pxConvertRem;  
843 - box-sizing: border-box;  
844 -  
845 - .user-avatar {  
846 - width: 100rem / $pxConvertRem;  
847 - height: 100rem / $pxConvertRem;  
848 - border-radius: 50%;  
849 - border:4rem / $pxConvertRem solid;  
850 - border-color: rgba(255,255,255,.6);  
851 - background-image: image-url("me/index/user-avatar.png");  
852 - background-repeat: no-repeat;  
853 - background-origin: border-box;  
854 - background-size: contain;  
855 - display: inline-block;  
856 - }  
857 -  
858 - .user-name {  
859 - color: #fff;  
860 - font-size: 24rem / $pxConvertRem;  
861 - font-weight: bold;  
862 - margin-top: 7rem / $pxConvertRem;  
863 - }  
864 - }  
865 -  
866 - .count-area {  
867 - width: 100%;  
868 - float: left;  
869 - }  
870 -  
871 - .count-nav {  
872 - width: 319rem / $pxConvertRem;  
873 - float: left;  
874 - margin-top: 12rem / $pxConvertRem;  
875 -  
876 - p {  
877 - width: 100%;  
878 - text-align: center;  
879 - color: #fff;  
880 - line-height: 32rem / $pxConvertRem;  
881 - font-size: 22rem / $pxConvertRem;  
882 - }  
883 - }  
884 -  
885 - .line {  
886 - width: 2rem / $pxConvertRem;  
887 - height: 46rem / $pxConvertRem;  
888 - float: left;  
889 - margin-top: 26rem / $pxConvertRem;  
890 - box-sizing: border-box;  
891 - border-left: 1rem / $pxConvertRem solid #fff;  
892 - }  
893 -  
894 - .ranking-area {  
895 - width: 100%;  
896 - background: #fff;  
897 - border-top: 1rem / $pxConvertRem solid #e0e0e0;  
898 - margin-top: 30rem / $pxConvertRem;  
899 - padding-left: 30rem / $pxConvertRem;  
900 - box-sizing: border-box;  
901 -  
902 - li {  
903 - width: 100%;  
904 - height: 120rem / $pxConvertRem;  
905 - padding-top: 20rem / $pxConvertRem;  
906 - box-sizing: border-box;  
907 - border-bottom: 1rem / $pxConvertRem solid #e0e0e0;  
908 - }  
909 -  
910 - .rank-avatar {  
911 - width: 80rem / $pxConvertRem;  
912 - height: 80rem / $pxConvertRem;  
913 - border-radius: 50%;  
914 - background-image: image-url("me/index/user-avatar.png");  
915 - background-repeat: no-repeat;  
916 - background-size: contain;  
917 - float: left;  
918 - }  
919 -  
920 - .ranking-mid {  
921 - float: left;  
922 - margin-left: 20rem / $pxConvertRem;  
923 - }  
924 -  
925 - .rank-ico {  
926 - min-width: 18rem / $pxConvertRem;  
927 - height: 38rem / $pxConvertRem;  
928 - border-radius: 38rem / $pxConvertRem;  
929 - background: #444;  
930 - display: inline-block;  
931 - text-align: center;  
932 - line-height: 40rem / $pxConvertRem;  
933 - color: #fff;  
934 - font-size: 24rem / $pxConvertRem;  
935 - font-weight: bold;  
936 - padding: 0 10rem / $pxConvertRem;  
937 - }  
938 -  
939 - .rank-name {  
940 - font-size: 24rem / $pxConvertRem;  
941 - color: #444;  
942 - margin-top: 5rem / $pxConvertRem;  
943 - width: 260rem / $pxConvertRem;  
944 - white-space: nowrap;  
945 - text-overflow: ellipsis;  
946 - overflow: hidden;  
947 - height: 30rem / $pxConvertRem;  
948 - }  
949 -  
950 - .ranking-rg {  
951 - font-size: 20rem / $pxConvertRem;  
952 - color: #444;  
953 - float: right;  
954 - margin:20rem / $pxConvertRem 30rem / $pxConvertRem 0 0;  
955 - }  
956 -  
957 - .intimacy {  
958 - margin-left: 10rem / $pxConvertRem;  
959 - font-size: 36rem / $pxConvertRem;  
960 - color: #b0b0b0;  
961 - }  
962 - }  
963 -  
964 - .high-light {  
965 - .rank-ico {  
966 - width: 52rem / $pxConvertRem;  
967 - height: 39rem / $pxConvertRem;  
968 - line-height: 50rem / $pxConvertRem;  
969 - border-radius: 0;  
970 - background-image: image-url("guang/star-classroom/king-ico.png");  
971 - background-color: #fff;  
972 - background-repeat: no-repeat;  
973 - background-size: contain;  
974 - padding: 0;  
975 - }  
976 -  
977 - .intimacy {  
978 - color: #d0021b;  
979 - }  
980 - }  
981 - }  
982 -}  
983 -  
984 -  
985 -@media screen and (max-height: 480rem / $pxConvertRem){  
986 - .star-classroom {  
987 - .pop-intimacy {  
988 - height: 796rem / $pxConvertRem;  
989 -  
990 - .day-item .item {  
991 - height: 50rem / $pxConvertRem;  
992 - line-height: 50rem / $pxConvertRem;  
993 - margin-top: 0;  
994 - }  
995 -  
996 - .fan-charts {  
997 - height: 76rem / $pxConvertRem;  
998 -  
999 - h2 {  
1000 - line-height: 76rem / $pxConvertRem;  
1001 - }  
1002 -  
1003 - .arrow {  
1004 - height: 76rem / $pxConvertRem;  
1005 - line-height: 76rem / $pxConvertRem;  
1006 - }  
1007 - }  
1008 -  
1009 - .intimacy-head h1{  
1010 - font-size: 50rem / $pxConvertRem;  
1011 - }  
1012 - }  
1013 -  
1014 - .fan-charts-cont {  
1015 - line-height: 76rem / $pxConvertRem;  
1016 -  
1017 - .rank-ico {  
1018 - top: 17rem / $pxConvertRem;  
1019 - }  
1020 -  
1021 - .rank-avatar {  
1022 - top: 7rem / $pxConvertRem;  
1023 - }  
1024 -  
1025 - .fans-name {  
1026 - height: 76rem / $pxConvertRem;  
1027 - }  
1028 -  
1029 - li {  
1030 - height: 76rem / $pxConvertRem;  
1031 - }  
1032 - }  
1033 - }  
1034 -}  
1 -.time-view-like-share {  
2 - color: #b0b0b0;  
3 - line-height: 38rem / $pxConvertRem;  
4 - height: 38rem / $pxConvertRem;  
5 - font-size: 24rem / $pxConvertRem;  
6 -  
7 - .iconfont {  
8 - vertical-align: 9%;  
9 - margin-right: 4rem / $pxConvertRem;  
10 - font-size: 24rem / $pxConvertRem;  
11 - }  
12 -  
13 - .like-share-container {  
14 - display: inline-block;  
15 - float: right;  
16 -  
17 - > * {  
18 - float: left;  
19 - }  
20 -  
21 - .iconfont {  
22 - position: relative;  
23 - height: 60rem / $pxConvertRem;  
24 - line-height: 60rem / $pxConvertRem;  
25 - display: inline-block;  
26 -  
27 - color: #b0b0b0;  
28 - width: 60rem / $pxConvertRem;  
29 - top: -14rem / $pxConvertRem;  
30 - font-size: 34rem / $pxConvertRem;  
31 - text-align: center;  
32 - margin-right: 0;  
33 - outline: none;  
34 - }  
35 -  
36 - .share-btn {  
37 - margin-left: 20rem / $pxConvertRem;  
38 - }  
39 -  
40 - .like-btn.like {  
41 - color: #444;  
42 - }  
43 -  
44 - .collect-btn {  
45 - margin-left: 20rem / $pxConvertRem;  
46 - &.collected {  
47 - color: #D62927;  
48 - }  
49 - }  
50 - }  
51 -}  
1 -.banner-bottom {  
2 - margin: (30rem / $pxConvertRem) 0 0;  
3 - height: 160rem / $pxConvertRem;  
4 - overflow: hidden;  
5 - img {  
6 - display: block;  
7 - width: 100%;  
8 - }  
9 -}  
1 -.banner-center {  
2 - margin: (30rem / $pxConvertRem) 0 0;  
3 - height: 200rem / $pxConvertRem;  
4 - overflow: hidden;  
5 - img {  
6 - display: block;  
7 - width: 100%;  
8 - height: 100%;  
9 - }  
10 -}  
1 -.banner-top {  
2 - position: relative;  
3 - .swiper-pagination {  
4 - position: absolute;  
5 - left: 0;  
6 - right: 0;  
7 - bottom: 20rem / $pxConvertRem;  
8 - text-align: center;  
9 - z-index: 1;  
10 - .pagination-inner {  
11 - display: inline-block;  
12 - span {  
13 - display: inline-block;  
14 - width: 14rem / $pxConvertRem;  
15 - height: 14rem / $pxConvertRem;  
16 - background: #fff;  
17 - opacity: 0.5;  
18 - margin: 0 (9rem / $pxConvertRem);  
19 - border-radius: 50%;  
20 - &.swiper-pagination-bullet-active {  
21 - background: #fff;  
22 - opacity: 1;  
23 - }  
24 - }  
25 - }  
26 - }  
27 -}  
28 -  
29 -.banner-swiper {  
30 - position: relative;  
31 - height: 310.303rem / $pxConvertRem;  
32 - overflow: hidden;  
33 -  
34 - ul {  
35 - position: relative;  
36 - height: 310.303rem / $pxConvertRem;  
37 -  
38 - li {  
39 - float: left;  
40 - width: 100%;  
41 - height: 100%;  
42 - img {  
43 - width: 100%;  
44 - height: 100%;  
45 - }  
46 - }  
47 - }  
48 -}  
1 -.coupon-area {  
2 - max-width: 640px;  
3 - overflow: hidden;  
4 -  
5 - .banner-top {  
6 - float: left;  
7 - }  
8 -}  
9 -  
10 -.just-img{  
11 - width: 100%;  
12 - float: left;  
13 - margin: 20rem / $pxConvertRem 0;  
14 -}  
15 -.coupon-floor {  
16 - float: left;  
17 - width: 100%;  
18 - .floor-title {  
19 - background-color: #fff;  
20 - text-align: center;  
21 - height: 96rem / $pxConvertRem;  
22 - line-height: 96rem / $pxConvertRem;  
23 - font-size: 30rem / $pxConvertRem;  
24 - }  
25 -  
26 - .floor-main {  
27 - height: 180rem / $pxConvertRem;  
28 - width: 100%;  
29 - background-size: 100%;  
30 - background-repeat: no-repeat;  
31 - padding: 10rem / $pxConvertRem 30rem / $pxConvertRem;  
32 - box-sizing: border-box;  
33 - float: left;  
34 -  
35 - .main-left {  
36 - float: left;  
37 - width: 467rem / $pxConvertRem;  
38 - height: 160rem / $pxConvertRem;  
39 - }  
40 -  
41 - .main-right-receive, .main-right-use, .main-right-go {  
42 - float: right;  
43 - width: 113rem / $pxConvertRem;  
44 - height: 160rem / $pxConvertRem;  
45 - position: relative;  
46 -  
47 - span {  
48 - background-repeat: no-repeat;  
49 - background-size: contain;  
50 -  
51 - &.on-receive {  
52 - position: absolute;  
53 - left: 50%;  
54 - top: 50rem / $pxConvertRem;  
55 - margin-left: -26rem / $pxConvertRem;  
56 - display: inline-block;  
57 - width: 52rem / $pxConvertRem;  
58 - height: 54rem / $pxConvertRem;  
59 - background-image: image-url('coupon/click-txt.png');  
60 - }  
61 -  
62 - &.received {  
63 - width: 113rem / $pxConvertRem;  
64 - height: 132rem / $pxConvertRem;  
65 - background-image: image-url('coupon/received.png');  
66 - position: absolute;  
67 - top: 0;  
68 - right: 0;  
69 - }  
70 -  
71 - &.zero {  
72 - width: 111rem / $pxConvertRem;  
73 - height: 132rem / $pxConvertRem;  
74 - background-image: image-url('coupon/zero.png');  
75 - position: absolute;  
76 - top: 0;  
77 - right: 0;  
78 - }  
79 - }  
80 - }  
81 - }  
82 -}  
83 -  
84 -.floor-mask {  
85 - position: absolute;  
86 - top: 0;  
87 - left: 0;  
88 - right: 0;  
89 - bottom: 0;  
90 - background-color: rgba(0, 0, 0, .5);  
91 - display: none;  
92 - z-index: 9;  
93 -}  
94 -  
95 -.floor-message {  
96 - position: fixed;  
97 - top: 50%;  
98 - left: 50%;  
99 - width: 550rem/$pxConvertRem;  
100 - height: 250rem/$pxConvertRem;  
101 - margin-left: -275rem/$pxConvertRem;  
102 - margin-top: -125rem/$pxConvertRem;  
103 - z-index: 10;  
104 - background-color: rgba(250, 250, 250, .92);  
105 - display: none;  
106 - border-radius: 10px;  
107 -  
108 - .coupon-message-content {  
109 - border-bottom: 1px solid rgb(197, 197, 197);  
110 - height: 160rem/$pxConvertRem;  
111 - text-align: center;  
112 - line-height: 160rem/$pxConvertRem;  
113 - font-size: 28rem/$pxConvertRem;  
114 - }  
115 -  
116 - .coupon-message-op {  
117 - height: 90rem/$pxConvertRem;  
118 - text-align: center;  
119 - line-height: 90rem/$pxConvertRem;  
120 - font-size: 32rem/$pxConvertRem;  
121 - color: rgb(223, 98, 112);  
122 - }  
123 -}  
124 -  
125 -.floor-tooltip{  
126 - position: fixed;  
127 - top: 50%;  
128 - left: 50%;  
129 - width: 220rem/$pxConvertRem;  
130 - height: 140rem/$pxConvertRem;  
131 - margin-left: -110rem/$pxConvertRem;  
132 - margin-top: -70rem/$pxConvertRem;  
133 - z-index: 11;  
134 - background-color: rgba(60, 60, 60, .7);  
135 - display: none;  
136 - border-radius: 8rem/$pxConvertRem;  
137 - color: #fff;  
138 -  
139 - .icon-box{  
140 - height: 84rem/$pxConvertRem;  
141 - line-height: 84rem/$pxConvertRem;  
142 - text-align: center;  
143 - }  
144 -  
145 - .icon-msg{  
146 - height: 56rem/$pxConvertRem;  
147 - text-align: center;  
148 - }  
149 -}  
1 -.creative-life {  
2 - background: #fff;  
3 -  
4 - .banner {  
5 - display: block;  
6 - height: 400rem / $pxConvertRem;  
7 - overflow: hidden;  
8 - img {  
9 - width: 100%;  
10 - height: 100%;  
11 - }  
12 - }  
13 -  
14 - .classify-list {  
15 - border-top: 1px solid #e0e0e0;  
16 - border-bottom: 1px solid #e0e0e0;  
17 - }  
18 -  
19 - .classify-list > li {  
20 - float: left;  
21 - width: 212rem / $pxConvertRem;  
22 - height: 192rem / $pxConvertRem;  
23 - border-top: 1px solid #e0e0e0;  
24 - border-right: 1px solid #e0e0e0;  
25 - }  
26 -  
27 - .classify-logo {  
28 - width: 212rem / $pxConvertRem;  
29 - height: 192rem / $pxConvertRem;  
30 -  
31 - img {  
32 - display: block;  
33 - width: 100%;  
34 - height: 100%;  
35 - }  
36 - }  
37 -  
38 - .classify-name {  
39 - line-height: 52rem / $pxConvertRem;  
40 - font-size: 26rem / $pxConvertRem;  
41 - color: #000;  
42 - text-align: center;  
43 - text-decoration: none;  
44 - border-bottom: none;  
45 - overflow: hidden;  
46 - }  
47 -  
48 - .classify:nth-child(3n) {  
49 - border-right: 0;  
50 - }  
51 -  
52 -}