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.

/**
* GULP-FILE
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/9/30
*/
var gulp = require('gulp'),
compass = require('gulp-compass'),
cp = require('child_process');
var fs = require('fs'),
ftp = require('gulp-ftp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglify'),
Package = require('father').SpmPackage,
transport = require('gulp-spm'),
concat = require('gulp-concat');
var config = JSON.parse(fs.readFileSync('./package.json').toString());
var rootDist = 'dist/myohobuy/',
ftpConfig = {
host: '218.94.75.58',
user: 'php',
pass: 'yoho9646'
};
var distDir = {
js: rootDist + config.version,
css: rootDist + config.version,
img: rootDist + 'assets/img',
font: rootDist + 'assets/font'
};
gulp.task('default', ['compass', 'compass-watch', 'spm-doc']);
// compass
gulp.task('compass', function() {
gulp.src('sass/**/*.scss')
.pipe(
compass({
config_file: 'config.rb',
css: 'css',
sass: 'sass'
})
).on('error', function(error) {
console.log(error);
this.emit('end');
});
});
// compass watch
gulp.task('compass-watch', function() {
gulp.watch('sass/**/*.scss', ['compass']);
});
// start spm server
gulp.task('spm-doc', function() {
var sd = cp.exec('spm doc');
// sd.stdout.on('data', function(data) {
// console.log(data);
// });
sd.stderr.on('data', function(data) {
console.log(data);
});
sd.on('exit', function(code) {
console.log('process spm doc exit with code ' + code);
});
});
//生成发布目录，可用于上传测试机
gulp.task('ge', ['assets', 'compass-production', 'build']);
//发布
gulp.task('dist', ['assets', 'compass-production', 'build'], function() {
var ftpstream = ftp(ftpConfig);
return gulp.src('dist/**/')
.pipe(ftpstream)
.pipe(gutil.noop());
});
//font+img->dist/assets
gulp.task('assets', function() {
gulp.src('img/**')
.pipe(gulp.dest(distDir.img));
gulp.src('font/*')
.pipe(gulp.dest(distDir.font));
});
//compass
gulp.task('compass-production', ['assets'], function() {
gulp.src('sass/index.scss')
.pipe(
compass({
css: distDir.css,
sass: 'sass',
image: distDir.img,
font: distDir.font,
http_path: '/',
style: 'compressed'
})
)
.on('error', function(error) {
console.log(error);
this.emit('end');
});
});
//spm build
gulp.task('build', ['libs', 'business']);
//libs
gulp.task('libs', ['pre-libs', 'concat-min-libs', 'clear-libs']);
gulp.task('pre-libs', function() {
var obj = {
name: '',
version: config.version,
spm: config.spm
};
var packages = [],
libsjs = '';
var libCon, key, i;
var pkg;
obj.spm.main = 'libs.js';
obj.spm.buildArgs = '--idleading {{}} --include all';
libCon = JSON.stringify(obj);
fs.renameSync('package.json', 'package.bak.json');
fs.writeFileSync('package.json', libCon);
for (key in obj.spm.dependencies) {
if (obj.spm.inside && obj.spm.inside[key]) {
packages.push(obj.spm.inside[key]);
} else {
packages.push(key);
}
}
for (i = 0; i < packages.length; i++) {
libsjs += 'require("' + packages[i] + '");';
}
fs.writeFileSync('libs.js', libsjs); //重写入口文件
pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(gulp.dest(distDir.js));
});
gulp.task('concat-min-libs', ['pre-libs'], function() {
var path = distDir.js + '/libs.js';
var jsStr = fs.readFileSync(path).toString();
fs.writeFileSync(path, jsStr.substr(jsStr.indexOf('});') + 4));
return gulp.src(['js/plugin/sea.js', distDir.js + '/libs.js'])
.pipe(concat('lib.js'))
.pipe(uglify())
.pipe(gulp.dest(distDir.js));
});
gulp.task('clear-libs', ['concat-min-libs'], function() {
fs.renameSync('package.bak.json', 'package.json');
fs.unlinkSync('./libs.js');
fs.unlinkSync(distDir.js + '/libs.js');
});
gulp.task('business', ['libs'], function() {
var pkg = new Package(__dirname);
return gulp.src(pkg.main)
.pipe(transport({
pkg: pkg
}))
.pipe(concat('index-debug.js'))
.pipe(gulp.dest(distDir.js))
.pipe(uglify())
.pipe(concat('index.js'))
.pipe(gulp.dest(distDir.js));
});
\ No newline at end of file
.filter-mask, .filter-body {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.filter-mask {
height: 100%;
background: rgba(0,0,0,0.1);
}
.filter-body {
background: #fff;
color: #000;
cursor: pointer;
font-size: 14px;
height: 440px;
.classify {
width: 50%;
height: 100%;
background: #f8f8f8;
> li {
height: 60px;
line-height: 60px;
> * {
box-sizing: border-box;
}
&.active {
background: #fff;
}
.shower {
padding-left: 20px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #333;
&.highlight {
background: #eee;
}
}
.default {
color: #999;
}
.title {
float: left;
color: #000;
}
}
}
.sub-classify {
position: absolute;
display: none;
width: 50%;
height: 440px;
left: 50%;
top: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
> li {
height: 60px;
line-height: 60px;
padding-left: 15px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&.highlight {
background: #eee;
}
}
.chosed-icon {
display: none;
}
.chosed .chosed-icon {
display: inline;
}
}
.active > .sub-classify {
display: block;
}
}
\ No newline at end of file
.good-info {
float: left;
width: 276rem / $pxConvertRem;
height: 486rem / $pxConvertRem;
margin: 0 (15rem / $pxConvertRem) (15rem / $pxConvertRem);
.tag-container {
height: 28rem / $pxConvertRem;
width: 100%;
overflow: hidden;
.good-tag {
display: block;
float: left;
height: 28rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
text-align: center;
line-height: 28rem / $pxConvertRem;
box-sizing: border-box;
margin-right: 4rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
}
.new-tag {
width: 60rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.renew-tag {
width: 90rem / $pxConvertRem;
background-color: #78dc7e;
color: #fff;
}
.sale-tag {
width: 60rem / $pxConvertRem;
background-color: #ff575c;
color: #fff;
}
.running-man-tag {
width: 90rem / $pxConvertRem;
background-color: #017df9;
color: #f7ed02;
}
.limit-tag {
width: 100rem / $pxConvertRem;
border: 1px solid #000;
color: #000;
}
}
}
.good-detail-img {
position: relative;
height: 368rem / $pxConvertRem;
.good-islike {
position: absolute;
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
top: 0rem / $pxConvertRem;
right: 0rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
text-align: center;
color: #b0b0b0;
text-decoration: none;
}
.good-like {
color: #d72928;
}
img {
display: block;
width: 100%;
height: 368rem / $pxConvertRem;
}
.few-tag {
position: absolute;
bottom: 0;
width: 100%;
height: 28rem / $pxConvertRem;
background: #ffac5b;
font-size: 18rem / $pxConvertRem;
color: #fff;
line-height: 28rem / $pxConvertRem;
text-align: center;
}
}
.good-detail-text {
.name a {
display: block;
line-height: 56rem / $pxConvertRem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
font-size: 22rem / $pxConvertRem;
color: #444;
}
.price {
line-height: 22rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
.sale-price {
color: #d62927;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin: 0 0 0 (5rem / $pxConvertRem);
color: #b0b0b0;
text-decoration: line-through;
}
}
}
\ No newline at end of file
.order-failure {
background-image: image-url('lazy-failure/order-good.jpg');
background-size: 100%;
}
.good-failure {
background-image: image-url('lazy-failure/order-good.jpg');
background-size: 132rem / $pxConvertRem !important;
background-position-x: 40%;
}
.loading-mask {
position: fixed;
background: rgba(0,0,0,.1);
top: 0;
bottom: 0;
right: 0;
left: 0;
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.loading {
position: absolute;
width: 60px;
height: 20px;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -30px;
> div {
display: inline-block;
background: #fff;
width: 15px;
height: 15px;
@include border-radius(100%);
margin: 2px;
$init: 0.12;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
-webkit-animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);
animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);
}
$init: ($i + 1) * 0.12;
}
}
}
}
\ No newline at end of file
.chose-panel {
position: fixed;
display: none;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.3);
z-index:3;
.main {
position: absolute;
height: pxToRem(610px);
bottom: 0;
left: 0;
right: 0;
background: #fff;
}
.infos {
height: 460rem / $pxConvertRem;
padding: 0 22rem / $pxConvertRem;
// padding-top: 30rem / $pxConvertRem;
}
.chose-items {
height: 325rem / $pxConvertRem;
overflow: auto;
}
.basic-info {
// height: 100rem / $pxConvertRem;
overflow: hidden;
position: relative;
margin-bottom: pxToRem(30px);
margin-top: pxToRem(30px);
}
.thumb {
float: left;
width: 100rem / $pxConvertRem;
margin-right: 20rem / $pxConvertRem;
}
.text-info {
height: auto;
.name {
font-size: 28rem / $pxConvertRem;
height: 74rem / $pxConvertRem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price{
font-size: pxToRem(24px);
display: inline;
}
.sale-price {
color: #e10;
margin-right: pxToRem(15px);
&.no-price {
color: #000;
}
}
.market-price {
color: #b0b0b0;
text-decoration: line-through;
}
}
.color-list, .size-list, .num {
position: relative;
font-size: 28rem / $pxConvertRem;
padding-left: 80rem / $pxConvertRem;
input.disabled{
background-color:#fff;
color: #000;
opacity: 1;
@include border-radius(0);
-webkit-appearance: none;
}
> span {
position: absolute;
left: 0;
top: 20rem / $pxConvertRem;
}
>span.left-num{
position: absolute;
left: pxToRem(380px);
top: 20rem / $pxConvertRem;
}
span.disabled{
color: #e6e6e6;
}
}
.size-list li.hide {
display: none;
}
.block {
float: left;
display: block;
box-sizing: border-box;
padding: 0 20rem / $pxConvertRem;
min-width: 80rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
border: 1px solid #000;
margin-right: 30rem / $pxConvertRem;
margin-bottom: 30rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
text-align: center;
&.chosed {
border-color: #e10;
background: image-url('shopping-cart/right.png') no-repeat;
background-size: 38rem / $pxConvertRem;
background-position: bottom right;
color: #e10;
}
&.zero-stock {
color: #e0e0e0;
border-color: #e0e0e0;
}
&.zero-stock.chosed {
border-color: #e0e0e0;
background: none;
color: #e0e0e0;
background-color: #c0c0c0;
}
}
.num {
margin-bottom: 20rem / $pxConvertRem;
}
.num .btn {
float: left;
display: block;
height: 80rem / $pxConvertRem;
width: 80rem / $pxConvertRem;
text-align: center;
line-height: 80rem / $pxConvertRem;
border: 1px solid #e6e6e6;
&.disable {
color: #e6e6e6;
}
}
.good-num {
float: left;
width: 106rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
padding: 0;
border: 1px solid #e6e6e6;
text-align: center;
margin-left: -1px;
}
.btn-plus{
margin-left: -1px;
}
.btn-wrap {
position: relative;
height: 120rem / $pxConvertRem;
border-top: 1px solid #e6e6e6;
padding: 20rem / $pxConvertRem;
text-align: center;
background: #fff;
box-sizing: border-box;
.btn-sure {
width: 260rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
background: #e10;
color: #fff;
font-size: 32rem / $pxConvertRem;
border: none;
}
}
}
.gift-advance-page {
.gift-advance-good {
position: relative;
padding: 20rem / $pxConvertRem 0;
margin-left: 34rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
}
.advance-block:last-child .gift-advance-good:last-child {
border-bottom: 1px solid #e0e0e0;
}
.thumb-wrap {
position: relative;
float: left;
width: 120rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
.thumb {
width: 100%;
height: 100%;
}
}
.tag {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 25rem / $pxConvertRem;
color: #fff;
text-align: center;
background: #eb76aa;
&:before {
content: '加价购';
display: block;
font-size: 12px;
line-height: 25rem / $pxConvertRem;
transform: scale(0.833);
}
}
.deps {
margin-left: 135rem / $pxConvertRem;
}
.gift-advance-good .name {
margin-bottom: 20rem / $pxConvertRem;
width: 440rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
}
.row:nth-child(2) {
font-size: 22rem / $pxConvertRem;
height: 45rem / $pxConvertRem;
line-height: 45rem / $pxConvertRem;
> span {
margin-right: 15rem / $pxConvertRem;
}
}
.row:nth-child(3) {
position: relative;
}
.color, .size {
color: #b6b6b6;
}
.price {
// margin-left: 10rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #f1545b;
&.market-price {
color: #999;
text-decoration: line-through;
}
}
.count {
font-size: 20rem / $pxConvertRem;
color: #999;
margin-left: 22rem / $pxConvertRem;
}
.chose {
position: absolute;
width: 88rem / $pxConvertRem;
height: 58rem / $pxConvertRem;
background: #f8f8f8;
border: 1px solid #ccc;
right: 20rem / $pxConvertRem;
top: 71rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
line-height: 58rem / $pxConvertRem;
text-align: center;
}
.title {
width: 600rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
padding: 0 20rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
background: #f8f8f8;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.gift-block .tag {
background: #a1ce4e;
&:before {
content: '赠品';
}
}
}
.shopping-cart-good {
$cartRed: #d0253b;
position: relative;
padding-left: 16rem / $pxConvertRem;
.prevent-img-click {
position: absolute;
width: 20rem / $pxConvertRem;
height: 200rem / $pxConvertRem;
background-color: transparent;
z-index: 99;
}
.none{
display: none;
}
.checkbox {
position: absolute;
top: 50%;
margin-top: -34rem / $pxConvertRem;
margin-left: 8rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
&.icon-cb-checked {
color: #000;
}
&.disabled {
color: #f0f0f0;
}
}
.few-tag {
width: 150rem / $pxConvertRem;
position: absolute;
text-align: center;
top: 72%;
color: #fff;
span {
display: inline-block;
@include transform(scale(0.833));
}
}
.gift-tag {
background-color: #88BE51;
}
.plus-tag {
background-color: #FC1264;
}
.few-tag-expire {
position: absolute;
top: 40%;
left: 20rem / $pxConvertRem;
background-color: #7f7f7f;
display: inline-block;
color: #fff;
border-radius: 12rem / $pxConvertRem;
padding: 4rem / $pxConvertRem;
font-size: 20rem / $pxConvertRem;
width: 48rem / $pxConvertRem;
text-align: center;
}
.info {
float: left;
margin-left: 60rem / $pxConvertRem;
padding: 16rem / $pxConvertRem 0;
padding-right: 20rem / $pxConvertRem;
}
.fixed-height {
height: 2.7rem;
}
.thumb {
float: left;
width: 150rem / $pxConvertRem;
background-size: 100%;
background-repeat: no-repeat;
}
.deps {
position: relative;
width: 380rem / $pxConvertRem;
margin-left: 180rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
padding: 0.5rem 0;
}
.name {
display: inline-block;
width: 80%;
color: #5a5a5a;
font-size: 0.6rem;
line-height: 0.7rem;
}
.color-size-row > span {
margin-right: 15rem / $pxConvertRem;
}
.color, .size {
font-size: 0.6rem;
color: #b6b6b6;
}
.appear-date {
float: left;
color: $cartRed;
display: block;
font-size: 0.5rem;
}
.price {
font-size: 0.6rem;
color: $cartRed;
display: inline;
.sale-price{
color: #b0b0b0;
text-decoration: line-through;
}
}
.count {
font-size: 20rem / $pxConvertRem;
color: #999;
display: inline-block;
width: 22%;
position: absolute;
text-align: center;
}
.low-stocks {
display: inline-block;
width: 100rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
border: none;
color: #fff;
text-align: center;
float: right;
margin-right: 16rem / $pxConvertRem;
padding: 4rem / $pxConvertRem;
border-radius: 20rem / $pxConvertRem;
}
.low-stocks {
background: #7f7f7f;
}
.vip {
display: inline-block;
color: #fff;
background: #e01;
@include border-radius(16rem / $pxConvertRem);
padding: 0 12rem / $pxConvertRem;
margin-left: 8rem / $pxConvertRem;
font-size: 20rem / $pxConvertRem;
}
.la-tag {
margin-top: 0.3rem;
min-height: 1rem;
}
.icon-del,
.icon-edit {
position: absolute;
color: #ccc;
font-size: 30rem / $pxConvertRem;
}
.icon-del {
right: 20rem / $pxConvertRem;
}
.icon-edit {
right: 72rem / $pxConvertRem;
}
.opt-panel {
position: absolute;
width: 220rem / $pxConvertRem;
right: 0;
top: 0;
bottom: 0;
color: #fff;
> div {
float: left;
box-sizing: border-box;
width: 110rem / $pxConvertRem;
height: 100%;
text-align: center;
padding: 40rem / $pxConvertRem 20rem / $pxConvertRem 0;
font-size: 15px;
}
span {
display: block;
}
.put-in-favorite {
background: #bbb;
}
.del {
background: #999;
.iconfont {
margin-bottom: 20rem / $pxConvertRem;
}
}
}
.calculate-num{
float: right;
.calculate{
float: right;
border:1px solid #b0b0b0;
border-radius:.2rem;
p{
color: #444;
&:first-child{
height: 60rem / $pxConvertRem;
border-bottom:1px solid #b0b0b0;
span {
border-left:1px solid #b0b0b0;
border-right:1px solid #b0b0b0;
}
}
i{
width: 72rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
float: left;
line-height: 60rem / $pxConvertRem;
text-align: center;
}
span{
width: 96rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
float: left;
font-size: 40rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
text-align: center;
}
&:last-child {
span{
width: 168rem / $pxConvertRem;
overflow: hidden;
font-size: 48em / $pxConvertRem;
text-overflow:ellipsis;
white-space:nowrap;
}
}
}
}
.price{
line-height: 60rem / $pxConvertRem;
font-size: 52em / $pxConvertRem;
font-weight: bold;
}
.count {
position: absolute;
right: 20rem / $pxConvertRem;;
top: 20rem / $pxConvertRem;;
font-size: 52em / $pxConvertRem;
}
}
}
.shopping-cart-good:last-child {
.deps {
border: none;
}
}
@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon", "select-address";
.icon-checkbox:before { content: "\e61c"; }
.icon-cb-checked:before { content: "\e61d"; }
.icon-radio:before { content: "\e647"; }
.icon-cb-radio:before { content: "\e646"; }
.shopping-cart-page {
margin-bottom: 120rem / $pxConvertRem;
overflow-x: hidden;
background: #f0f0f0;
display: none;
.yoho-tip {
z-index: 4;
}
.cart-content > * {
background: #fff;
&:first-child {
border-top: none;
margin-top: 0;
}
}
.cart-nav {
color: #c6c6c6;
border-bottom: 1px solid #e0e0e0;
background: #fff;
li {
float: left;
width: 50%;
padding: 30rem / $pxConvertRem 0;
height: 30rem / $pxConvertRem;
}
li.active {
color: #000;
}
span {
display: block;
box-sizing: border-box;
width: 100%;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
text-align: center;
}
li:first-child span {
border-right: 1px solid #e0e0e0;
}
li:last-child {
position: relative;
}
.presell-tip {
position: absolute;
z-index: 1;
left: -2rem;
top: 1.75rem;
}
.triangle {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid #000;
margin-left: 6rem;
}
.pt-content {
position: relative;
padding: 10px;
background: #000;
color: #fff;
font-size: 12px;
@include border-radius(5px);
text-align: center;
width: 7rem;
}
}
.login-info {
height: 46rem / $pxConvertRem;
padding: 17rem / $pxConvertRem 20rem / $pxConvertRem;
color: #24acaa;
text-align: center;
font-size: 28rem / $pxConvertRem;
.btn {
display: inline-block;
background: #ed0010;
color: #fff;
width: 80rem / $pxConvertRem;
height: 46rem / $pxConvertRem;
line-height: 46rem / $pxConvertRem;
}
}
.presell-info {
height: 60rem / $pxConvertRem;
padding: 15rem / $pxConvertRem 30rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
background: #f0f0f0;
color: #b7b7b7;
> span {
display: block;
}
.iconfont {
float: left;
font-size: 45rem / $pxConvertRem;
}
.txt {
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
margin-left: 80rem / $pxConvertRem;
}
}
.cart-goods {
border-bottom: 1px solid #e0e0e0;
margin-bottom: 0.75rem;
.shopping-cart-good:last-child .info {
border-bottom: none;
}
}
.invalid-goods {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin: 0.75rem 0;
}
.freebie-and-advance-buy {
font-size: 24rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 30rem / $pxConvertRem;
> li {
box-sizing: border-box;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
margin-bottom: 10rem / $pxConvertRem;
padding: 0 20rem / $pxConvertRem;
&:last-child {
margin-bottom: 0;
}
a {
float: right;
width: 100%;
}
.under-line {
display: inline-block;
height: 1px;
width: 91%;
position: absolute;
left: 9%;
background-color: #f1f1f1;
}
}
> li:first-child {
.under-line {
display: none;
}
}
.count {
color: #7b7b7b;
float: right;
}
.icon-right-arrow {
color: #8f8f8f;
float: right;
}
}
.activity-title{
border-top: 1px solid #e0e0e0;
font-size: 32rem / $pxConvertRem;
padding: 20rem / $pxConvertRem 20rem / $pxConvertRem 0;
}
.activity{
padding: 8rem / $pxConvertRem 20rem / $pxConvertRem 20rem / $pxConvertRem 32rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
li:before {
content: "";
display: inline-block;
margin-right: 10rem / $pxConvertRem;
width: 8rem / $pxConvertRem;
height: 8rem / $pxConvertRem;
background-color: #000;
border-radius: 50%;
position: relative;
left: 0;
top: -.12rem;
}
}
.price-compute {
padding: 20rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
font-size: 28rem / $pxConvertRem;
.title {
display: inline-block;
width: 175rem / $pxConvertRem;
}
.minus {
float: right;
}
}
.balance {
position: fixed;
box-sizing: border-box;
bottom: 0;
width: 100%;
padding: 20rem / $pxConvertRem;
height: 120rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
background: #fff;
.iconfont {
position: absolute;
top: 50%;
margin-top: -14rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
}
p {
float: right;
margin-right: 32rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
span {
display: block;
height: 40rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
color: #d0253b;
font-weight: bold;
}
.tip {
color: #666;
font-size: 22rem / $pxConvertRem;
text-align: right;
font-weight:normal;
}
}
.btn-balance {
float: right;
width: 140rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
text-align: center;
background: #e01;
color: #fff;
border: none;
font-size: 28rem / $pxConvertRem;
}
}
.cart-zero{
width: 100%;
height: auto;
padding-top:2rem;
padding-bottom:20%;
i{
font-size: 6em;
display: block;
margin: 0 auto;
text-align: center;
color: #505050;
}
p{
display: block;
text-align: center;
font-size: 1.2em;
color: #505050;
padding:.6rem 0;
}
a{
width: 27%;
height: 1.2rem;
overflow: hidden;
line-height: 1.2rem;
border:1px solid #505050;
border-radius:.2rem;
display: block;
margin: 0 auto;
text-align: center;
}
}
}
.order-ensure-page {
background: #f0f0f0;
.block {
background: #fff;
margin: 20rem / $pxConvertRem 0;
padding: 30rem / $pxConvertRem 20rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.title {
font-size: 32rem / $pxConvertRem;
color: #444;
}
/*xwg 2016-3-19 10:53*/
.price-cost{
span{
color: #f00;
}
}
.goods-bottom{
padding-bottom: 0;
}
.border-none{
border-bottom:none !important;
}
.boys{
background:image-url('shopping-cart/boys.png') bottom left repeat-x #fff;
}
.girls{
background:image-url('shopping-cart/girls.png') bottom left repeat-x #fff;
}
.kids{
background:image-url('shopping-cart/kids.png') bottom left repeat-x #fff;
}
.life-style{
background:image-url('shopping-cart/lifeStyle.png') bottom left repeat-x #fff !important;
}
.not-address{
position: relative;
i{
position: absolute;
left: 16rem / $pxConvertRem;
top: 0%;
font-size: 44rem / $pxConvertRem;
}
.choose{
display: block;
color: #000;
height: 64rem / $pxConvertRem;
overflow: hidden;
position: static;
padding-left:40rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
line-height: 82rem / $pxConvertRem;
span{
position: absolute;
right: 20rem / $pxConvertRem;
top: 28rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
}
}
}
.address{
display: block;
position: relative;
margin-top: 0;
border-top: none;
padding-bottom:.8rem;
.info{
width: 90%;
height: auto;
overflow: hidden;
padding-left: 10%;
padding-bottom: 12rem / $pxConvertRem;
position: relative;
span{
display: inline-block;
}
i{
position: absolute;
left: 0;
top: 0%;
font-size: 44rem / $pxConvertRem;
}
}
.info-name{
width: 48%;
height: 40rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.info-phone{
width: 48%;
font-size: 24rem / $pxConvertRem;
text-align: right;
}
.info-address{
width: 100%;
font-size: 24rem / $pxConvertRem;
line-height: 38rem / $pxConvertRem;
}
.rest{
position: absolute;
right: 32rem / $pxConvertRem;
bottom:20rem / $pxConvertRem;
color: #f00;
font-size: 24rem / $pxConvertRem;
span{
font-size: 24rem / $pxConvertRem;
}
}
}
.dispatch{
padding:0%;
margin:0;
.sub-block{
color: #444;
&:last-child h3{
border-bottom:none;
}
h3{
.hide{
display: none !important;
}
width: 95%;
height: 80rem / $pxConvertRem;
overflow: hidden;
line-height: 80rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
margin-left: 5%;
border-bottom:1px solid #e0e0e0;
p{
display: inline-block;
height: 80rem / $pxConvertRem;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
i{
font-size: 36rem / $pxConvertRem;
margin-left: 8rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
display: inline-block;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
span{
display: inline-block;
width: 65%;
height: 80rem / $pxConvertRem;
text-align: right;
font-size: 28rem / $pxConvertRem;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
ul{
width: 90%;
height:auto;
overflow: hidden;
line-height: 80rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
background: #e0e0e0;
padding-left:10%;
display: none;
padding-bottom: 8rem / $pxConvertRem;
.right{
float: right;
margin-right: 40rem / $pxConvertRem;
}
li{
border-bottom:1px solid #fff;
&:last-child{
border-bottom:none;
}
}
}
}
}
.goods-num{
width: 100%;
height: 52rem / $pxConvertRem;
color: #b0b0b0;
background:#fff;
padding:20rem / $pxConvertRem 0;
text-align: right;
font-size: 28rem / $pxConvertRem;
line-height: 52rem / $pxConvertRem;
span{
padding-right:20rem / $pxConvertRem;
color: #f00;
}
}
.bill{
position: fixed;
background:#fff;
left: 0;
bottom: 0;
width: 96%;
height: 100rem / $pxConvertRem;
overflow: hidden;
line-height: 100rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
padding-left: 4%;
span{
color: #f00;
}
a{
position: absolute;
right: 20rem / $pxConvertRem;
top: 10rem / $pxConvertRem;
background:#d0021b;
display: inline-block;
color: #fff;
width: 25%;
height: 80rem / $pxConvertRem;
overflow: hidden;
border-radius: 10rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
text-align: center;
font-size: 30rem / $pxConvertRem;
}
}
.price-cal{
margin-bottom: 90rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
position: relative;
span{
position: absolute;
right: 28rem / $pxConvertRem;
text-align: right;
}
li{
font-size: 28rem / $pxConvertRem;
p{
display: inline-block;
}
span{
display: inline-block;
}
}
}
// .dispatch .sub-block:first-child {
// border-bottom: 1px solid #f7f7f7;
// margin-bottom: 15rem / $pxConvertRem;
// }
// .dispatch-mode li,
// .dispatch-time li {
// float: left;
// padding: 10rem / $pxConvertRem 20rem / $pxConvertRem;
// margin-right: 15rem / $pxConvertRem;
// margin-bottom: 15rem / $pxConvertRem;
// border: 1px solid #c9c9c9;
// color: #676767;
// font-size: 26rem / $pxConvertRem;
// &.chosed {
// border-color: #000;
// background: image-url('shopping-cart/black-right.png') no-repeat;
// background-size: 30rem / $pxConvertRem;
// background-position: bottom right;
// }
// }
// .goods {
// margin-right: -20rem / $pxConvertRem;
// .price-wrap {
// position: static;
// text-align: left;
// .price {
// color: #444;
// }
// .count {
// display: inline;
// margin-left: 20rem / $pxConvertRem;
// }
// }
// .name {
// max-width: pxToRem(400px);
// }
// }
.order-good {
position: relative;
padding: 20rem / $pxConvertRem 0;
margin-left: 34rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
font-size: 26rem / $pxConvertRem;
&:last-child {
border-bottom: none;
}
.thumb-wrap {
position: relative;
float: left;
width: 120rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
}
.thumb {
width: 100%;
height: 100%;
}
.tag {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
text-align: center;
font-size: 12px;
&:before {
display: block;
line-height: 1;
@include transform(scale(0.833));
}
}
.gift-tag {
height: 25rem / $pxConvertRem;
background: #a1ce4e;
&:before {
content: '赠品';
}
}
.advance-buy-tag {
height: 25rem / $pxConvertRem;
background: #eb76aa;
&:before {
content: '加价购';
}
}
.deps {
margin-left: 135rem / $pxConvertRem;
}
.name {
font-size: 28rem / $pxConvertRem;
max-width: 70%;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.row:nth-child(2) {
height: 45rem / $pxConvertRem;
line-height: 45rem / $pxConvertRem;
> span {
margin-right: 15rem / $pxConvertRem;
}
}
.color, .size {
color: #b6b6b6;
}
.price-wrap {
position: absolute;
top: 20rem / $pxConvertRem;
right: 30rem / $pxConvertRem;
text-align: right;
}
.price {
color: #e01;
}
.count {
display: block;
color: #999;
text-align: right;
line-height: 45rem / $pxConvertRem;
}
.appear-date {
color: #f00;
}
}
.sale-invoice {
margin-top: -20rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
li {
height: 90rem / $pxConvertRem;
line-height: 90rem / $pxConvertRem;
border-bottom: 1px solid #f7f7f7;
overflow: hidden;
a {
display: block;
}
}
.coupon-count {
padding: 5rem / $pxConvertRem 15rem / $pxConvertRem;
background: #f00;
color: #fff;
@include border-radius(10px);
margin-left: 20rem / $pxConvertRem;
}
.coupon-use {
@include box-sizing(border-box);
position: relative;
float: right;
padding-right: 30rem / $pxConvertRem;
color: #999;
text-align: right;
width: 320rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.iconfont {
position: absolute;
top:0;
right: 0;
color: #999;
}
}
.checkbox {
display: inline-block;
width: 80rem / $pxConvertRem;
text-align: center;
margin-right: -20rem / $pxConvertRem;
}
.coin-check {
float: right;
color: #999;
.checkbox {
margin-left: 5rem / $pxConvertRem;
color: #000;
}
&.used {
color: #f00;
}
em {
color: #f00;
}
}
.checkbox.icon-checkbox {
color: #ccc;
}
.invoice {
.checkbox {
float: right;
}
&.focus {
height: auto;
}
}
.desc {
color: #999;
}
}
.block {
input, textarea {
box-sizing: border-box;
margin: pxToRem(20px) 0;
padding: 0 pxToRem(12px);
width: 100%;
height: pxToRem(72px);
color: #444;
background: #efefef;
font-size: pxToRem(24px);
line-height: 1;
outline: 0;
border: 0;
@include border-radius(4px);
}
textarea {
padding: pxToRem(12px);
height: auto;
resize: none;
}
}
#invoice {
border-top: 1px solid #f7f7f7;
label {
display: block;
border-top: 1px solid #f7f7f7;
}
select {
position: relative;
float: right;
width: 40%;
height: pxToRem(50px);
top: pxToRem(20px);
border: 1px solid #f7f7f7;
}
}
#msg {
padding-top: pxToRem(20px);
input {
margin: 0;
}
}
.total {
font-size: 22rem / $pxConvertRem;
margin-top: 20rem / $pxConvertRem;
span {
display: inline-block;
width: 130rem / $pxConvertRem;
}
}
// .price-cal {
// font-family: monospace;
// }
.cost {
border-top: 1px solid #f7f7f7;
line-height: 100rem / $pxConvertRem;
margin-top: 10rem / $pxConvertRem;
font-size: 34rem / $pxConvertRem;
em {
color: #f00;
}
}
.pay-mode {
background: #fff;
padding: 0 20rem / $pxConvertRem;
margin-top: -22rem / $pxConvertRem;
li {
height: 88rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
margin-bottom: 28rem / $pxConvertRem;
@include border-radius(5px);
font-size: 32rem / $pxConvertRem;
color: #fff;
text-align: center;
background: #000;
}
.default {
background: #57b038;
}
.iconfont {
margin-right: 20rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
}
}
}
.select-address-page {
padding-bottom: pxToRem(20px);
.add-address {
margin-bottom: 0;
}
}
.select-coupon-page {
margin-top: pxToRem(30px);
margin-bottom: pxToRem(30px);
#new-coupon {
margin-bottom: pxToRem(30px);
padding-left: pxToRem(30px);
padding-right: pxToRem(30px);
font-size: pxToRem(24px);
input {
padding: 0 pxToRem(12px);
width: pxToRem(384px);
height: pxToRem(80px);
border: 1px solid #b0b0b0;
border-radius: .1rem;
outline: 0;
}
.submit {
margin-left: pxToRem(30px);
width: pxToRem(130px);
height: pxToRem(80px);
color: #fff;
background: #b0b0b0;
border-radius: .1rem;
border: none;
outline: 0;
}
}
.coupon-list {
.employ-main:first-child {
margin-top: 0;
}
.employ-main:last-child {
margin-bottom: 0;
}
}
%line {
content: '';
position: absolute;
top: 50%;
border-top: 1px solid #b0b0b0;
width: pxToRem(120px);
height: 0;
}
.not-use {
display: block;
width: pxToRem(560px);
margin: pxToRem(30px) auto 0;
text-align: center;
font-size: pxToRem(32px);
line-height: 2.5;
border: 1px solid #444;
@include border-radius(4px);
}
.not-avaliable-coupon-line {
position: relative;
margin-top: pxToRem(30px);
margin-bottom: pxToRem(30px);
font-size: pxToRem(28px);
line-height: 2;
color: #b0b0b0;
text-align: center;
&:before {
@extend %line;
left: pxToRem(60px);
}
&:after {
@extend %line;
right: pxToRem(60px);
}
}
.not-avaliable {
background-image: image-url('me/employ/employ-grey.jpg') !important;
}
}
.brand-page {
.re-pos-search {
top: 170rem / $pxConvertRem !important;
}
.hide-when-loading {
display: none;
}
.genderNav {
display: block;
width: 100%;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
overflow: hidden;
color: #aeaeae;
z-index: 3;
position: fixed;
top: 90rem / $pxConvertRem;
border-bottom: 1px solid #e1e1e1;
background-color: #fff;
ul{
width: 100%;
height: 90%;
overflow: hidden;
li{
width: 25%;
height: 100%;
overflow: hidden;
float: left;
text-align: center;
position: relative;
font-size: 28rem / $pxConvertRem;
i{
width: 100%;
height: 40%;
overflow: hidden;
display: block;
}
span:not(.split-border){
width: 100%;
height: auto;
overflow: hidden;
display: block;
//line-height: 40rem / $pxConvertRem;
}
.split-border {
display: inline-block;
width: 2px;
height: 1rem;
background-color: #e1e1e1;
position: absolute;
top: 30%;
right: 0;
}
}
li:last-child {
.split-border {
display: none;
}
}
li.active {
color: #444;
}
}
}
.newbrand-search {
width: 93.75%;
height: 60rem / $pxConvertRem;
padding: 14rem / $pxConvertRem 3.125%;
background-color: #f8f8f8;
left: 0;
top: 90rem / $pxConvertRem;
position: fixed;
z-index: 2;
.search-box {
position: relative;
width: 500rem / $pxConvertRem; //450
height: 60rem / $pxConvertRem;
background-color: #FFF;
border-radius: 30rem / $pxConvertRem;
padding: 0 32rem / $pxConvertRem 0 52rem / $pxConvertRem;
a {
width: 100%;
height: 60rem / $pxConvertRem;
border: 0;
display: block;
span {
line-height: 60rem / $pxConvertRem;
color: #bdbdbd;
font-size: 1.2em;
padding-left: 18rem / $pxConvertRem;
}
}
.search-icon {
position: absolute;
font-size: 24rem / $pxConvertRem;
top: 0;
left: 24rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
color: #bdbdbd;
}
.search-input {
border: none;
width: 95%;
height: 60rem / $pxConvertRem;
// line-height: 1;
font-size: 1.2em;
padding: 0 10rem / $pxConvertRem;
}
.search-action {
display: none;
position: absolute;
top: 0;
right: -74rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
color: #666;
}
.cancel-btn {
display: inline;
font-size: 28rem / $pxConvertRem;
vertical-align: middle;
color: #666;
}
.clear-text {
margin-right: 20rem / $pxConvertRem;
}
}
}
.banner-top {
padding-top: 258rem / $pxConvertRem;
background-color:#f8f8f8;
}
.hot-brands {
padding-top: 178rem / $pxConvertRem;
.floor-header {
padding: 0;
}
.brands-swiper {
border-top: 0;
}
}
.hot-brand {
margin: (30rem / $pxConvertRem) 0 0;
.hot-brand-list {
background: #fff;
li {
float: left;
width: 158rem / $pxConvertRem;
height: 158rem / $pxConvertRem;
.img-box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 158rem / $pxConvertRem;
height: 158rem / $pxConvertRem;
}
img {
max-width: 140rem / $pxConvertRem;
max-height: 140rem / $pxConvertRem;
}
}
}
}
.brand-list {
width: 100%;
.title-bar {
width: 100%;
background: #eeeeee;
color: #999999;
// font-weight: bold;
position: relative;
h2 {
// width: 100%;
padding: 0 20rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
font-size: 34rem / $pxConvertRem;
border-top: 1px solid #e6e6e6;
background-color: #f4f4f4;
}
}
p {
cursor: pointer;
// height: 50rem / $pxConvertRem;
padding: 0 20rem / $pxConvertRem;
a {
display: block;
// padding-top: 10rem / $pxConvertRem;
height: 76rem / $pxConvertRem;
line-height: 76rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
border-bottom: 1px solid #f3f3f3;
border-top: 1px solid #f9f9f9;
i {
display: inline-block;
margin-top: -4rem / $pxConvertRem;
width: 108rem / $pxConvertRem;
height: 42rem / $pxConvertRem;
text-align: center;
vertical-align: middle;
font-size: 28rem / $pxConvertRem;
line-height: 44rem / $pxConvertRem;
color: #fff;
border-radius: 50rem / $pxConvertRem;
@include scale(.8)
}
.icon-hot {
background: #ff0000;
}
.icon-new {
background: #86c048;
}
}
}
}
.right-bar {
width: 60rem / $pxConvertRem;
height: 75%;
top: 20%;
overflow: auto;
position: fixed;
right: 2rem / $pxConvertRem;
border-radius: 12rem / $pxConvertRem;
background: rgba(0, 0, 0, .8);
z-index: 2;
display: none;
b {
height: 36rem / $pxConvertRem;
line-height: 36rem / $pxConvertRem;
text-align: center;
display: block;
color: #999999;
font-weight: bold;
}
}
.right-bar::-webkit-scrollbar {
display: none;
}
.con {
padding-top: 10rem / $pxConvertRem;
}
.search-result {
padding-top: 176rem / $pxConvertRem;
}
}
.hot-category {
margin: (30rem / $pxConvertRem) 0 0;
border-top: 1px solid #e0e0e0;
.category-banner {
height: 198rem / $pxConvertRem;
img {
display: block;
width: 100%;
height: 100%;
}
}
.category-list {
background: #fff;
border-top: 1px solid #e0e0e0;
li {
float: left;
width: 158rem / $pxConvertRem;
height: 174rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
.img-box {
width: 100%;
height: 138rem / $pxConvertRem;
text-align: center;
vertical-align: middle;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
}
}
}
\ No newline at end of file
@import "brand";
.category-page {
font-size: 30rem / $pxConvertRem;
.search-input {
position: relative;
background-color: #f8f8f8;
padding: 13rem / $pxConvertRem 20rem / $pxConvertRem;
p {
box-sizing: border-box;
width: 100%;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
border: none;
padding-left: 66rem / $pxConvertRem;
border-radius: 60rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
background: #fff;
color: #999;
}
}
.search-icon {
position: absolute;
top: 0;
bottom: 0;
left: 43rem / $pxConvertRem;
line-height: 86rem / $pxConvertRem;
color: #999;
}
.category-nav {
height: 70rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
box-sizing: border-box;
float: left;
height: 100%;
padding: 20rem / $pxConvertRem 0;
width: 25%;
text-align: center;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
&.bytouch{
background:#eee;
}
}
span {
display: block;
width: 100%;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
border-right: 1px solid #e6e6e6;
}
li:last-child span {
border-right: 0;
}
}
.content {
background: #f8f8f8;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 45%;
> li {
height: 89rem / $pxConvertRem;
line-height: 89rem / $pxConvertRem;
padding-left: 32rem / $pxConvertRem;
&.focus {
background-color: #fff;
}
&.highlight {
background-color: #eee;
}
}
}
.sub-level-container {
float: left;
box-sizing: border-box;
background: #fff;
width: 55%;
height: 100%;
}
.sub-level {
width: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 89rem / $pxConvertRem;
line-height: 89rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
padding-left: 20rem / $pxConvertRem;
&.highlight {
background: #eee;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #000;
}
}
}
\ No newline at end of file
@import "guang/clothes/*.png";
$clothes: sprite-map("guang/clothes/*.png");
@mixin retina-sprite($map, $sprite, $scale) {
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
$offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);
background: sprite-url($map) 0 $offsetY no-repeat;
$zoomX: ceil(image_width(sprite-path($map)) / $scale);
$zoomY: auto;
@include background-size($zoomX $zoomY);
display: block;
}
@mixin relatedTitle {
margin: 0 29rem / $pxConvertRem;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
}
.guang-detail-page {
#wrapper {
background: #f0f0f0;
}
#wrapper.ios {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
&.has-head {
top: 90rem / $pxConvertRem;
+ .fixed-top {
top: 90rem / $pxConvertRem;
}
}
}
.author {
border-bottom: 1px solid #e0e0e0;
background: #fff;
> a {
display: block;
height: 100%;
}
.avatar {
float: left;
margin-top: 20rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
@include border-radius(50%);
}
.name {
float: left;
font-size: 28rem / $pxConvertRem;
color: #000;
padding: 30rem / $pxConvertRem 0;
margin-left: 30rem / $pxConvertRem;
}
.intro {
float: left;
font-size: 28rem / $pxConvertRem;
color: #b0b0b0;
padding: 30rem / $pxConvertRem 0;
margin-left: 30rem / $pxConvertRem;
}
}
.post-title {
padding: 16rem / $pxConvertRem 0 26rem / $pxConvertRem 30rem / $pxConvertRem;
background: #fff;
.title {
line-height: 60rem / $pxConvertRem;
font-size: 40rem / $pxConvertRem;
color: #000;
font-weight: bold;
}
}
.text-block {
padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
line-height: 46rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
background: #fff;
color: #444;
}
.big-img-block {
padding-bottom: 5rem / $pxConvertRem;
background: #fff;
img {
width: 100%;
height: 640rem / $pxConvertRem;
}
}
.small-img-block {
padding-bottom: 8rem / $pxConvertRem;
background: #fff;
img {
float: right;
width: 315rem / $pxConvertRem;
height: 420rem / $pxConvertRem;
&:first-child {
float: left;
}
}
}
.collocation-block {
background: #fff;
.good-list {
padding-left:15rem / $pxConvertRem;
}
}
.thumb-container {
padding-top: 30rem / $pxConvertRem;
padding-left: 20rem / $pxConvertRem;
background: transparent image-url('guang/thumb-container-bg.png') no-repeat;
background-size: 200% 100%;
&.fixed-top {
position: fixed;
left: 0;
right: 0;
top: 0;
}
&.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
}
&.absolute {
position: absolute;
left: 0;
right: 0;
}
&.static {
position: static;
}
&.hide {
display: none;
}
}
.clothe-type {
position: absolute;
right: 6rem / $pxConvertRem;
bottom: 34rem / $pxConvertRem;
width: 20px;
height: 20px;
@include border-radius(50%);
&.bag {
@include retina-sprite ($clothes, bag, 80/20);
background-color: #fff;
background-size: 100%;
}
&.cloth {
@include retina-sprite ($clothes, cloth, 80/20);
background-color: #fff;
background-size: 100%;
}
&.dress {
@include retina-sprite ($clothes, dress, 80/20);
background-color: #fff;
background-size: 100%;
}
&.headset {
@include retina-sprite ($clothes, headset, 80/20);
background-color: #fff;
background-size: 100%;
}
&.lamp {
@include retina-sprite ($clothes, lamp, 80/20);
background-color: #fff;
background-size: 100%;
}
&.pants {
@include retina-sprite ($clothes, pants, 80/20);
background-color: #fff;
background-size: 100%;
}
&.shoe {
@include retina-sprite ($clothes, shoe, 80/20);
background-color: #fff;
background-size: 100%;
}
&.swim-suit {
@include retina-sprite ($clothes, swim-suit, 80/20);
background-color: #fff;
background-size: 100%;
}
&.under {
@include retina-sprite ($clothes, under, 80/20);
background-color: #fff;
background-size: 100%;
}
&.watch {
@include retina-sprite ($clothes, watch, 80/20);
background-color: #fff;
background-size: 100%;
}
}
.thumb {
display: inline-block;
position: relative;
margin-right: 22rem / $pxConvertRem;
padding-bottom: 30rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
&.focus .thumb-img {
border-color: #000;
}
}
.thumb-img {
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
border: 1px solid transparent;
}
.related-reco-block {
background: #fff;
padding-left: 15rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
h2 {
margin-left: -15rem / $pxConvertRem;
line-height: 104rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
}
.one-good {
padding-left: 15rem / $pxConvertRem;
padding-right: 30rem / $pxConvertRem;
margin-bottom: 20rem / $pxConvertRem;
.thumb {
float: left;
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
}
.content-container {
padding-left: 120rem / $pxConvertRem;
height: 134rem / $pxConvertRem;
line-height: 1;
font-size: 24rem / $pxConvertRem;
> p {
height: 50%;
line-height: 94rem / $pxConvertRem;
}
span {
display: inline-block;
line-height: 24rem / $pxConvertRem;
}
.price {
line-height: 47rem / $pxConvertRem;
}
}
.sale-price {
color: #d62927;
line-height: 1.5;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin-left: 5rem / $pxConvertRem;
color: #b0b0b0;
text-decoration: line-through;
line-height: 1.5;
}
.check-detail {
display: inline-block;
color: #000;
border: 1px solid;
border-radius: 2px;
float: right;
padding: 0 5px;
line-height: 1.5;
}
}
}
.link-block {
display: block;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
padding: 0 30rem / $pxConvertRem;
font-size: 16px;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.iconfont {
float: right;
color: #ccc;
}
}
.related-brand {
margin-top: 30rem / $pxConvertRem;
h2 {
@include relatedTitle;
}
.brand-list {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
background: #fff;
}
.brand {
float: left;
width: 158rem / $pxConvertRem;
height: 128rem / $pxConvertRem;
border-right: 1px solid #e0e0e0;
margin-bottom: 10rem / $pxConvertRem;
a {
display: block;
}
&:nth-child(4n) {
border-right: none;
}
}
.brand-logo {
display: table-cell;
width: 158rem / $pxConvertRem;
height: 94rem / $pxConvertRem;
vertical-align: middle;
img {
display: block;
max-width: 158rem / $pxConvertRem;
max-height: 94rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
margin: 10rem / $pxConvertRem 0 0 0;
line-height: 24rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.related-tag {
position: relative;
padding-bottom: 30rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.tag-bg {
position: absolute;
height: 40rem / $pxConvertRem;
width: 40rem / $pxConvertRem;
background: image-url('guang/tag.png') no-repeat;
background-size: 100% 100%;
top: 35rem / $pxConvertRem;
left: 20rem / $pxConvertRem;
}
.tag-list {
margin-left: 50rem / $pxConvertRem;
}
li {
float: left;
margin-top: 31rem / $pxConvertRem;
margin-left: 31rem / $pxConvertRem;
}
a {
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #000;
text-decoration: underline;
white-space: nowrap;
}
}
.related-info {
margin-top: 30rem / $pxConvertRem;
h2 {
@include relatedTitle;
}
.info-list {
background: #fff;
padding-bottom: 30rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
}
li {
padding-top: 30rem / $pxConvertRem;
margin-bottom: 10rem / $pxConvertRem;
a {
display: block;
}
img {
float: left;
margin-left: 30rem / $pxConvertRem;
width: 182rem / $pxConvertRem;
height: 114rem / $pxConvertRem;
&.square {
height: 182rem / $pxConvertRem;
}
}
}
.title, .publish-time {
float: left;
width: 360rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
color: #444;
font-size: 28rem / $pxConvertRem;
}
.publish-time {
font-size: 18rem / $pxConvertRem;
margin-top: 0;
color: #b0b0b0;
.iconfont {
font-size: 18rem / $pxConvertRem;
}
}
}
}
\ No newline at end of file
@import "tvls", "info", "plus-star", "info-list", "detail", "star-classroom";
\ No newline at end of file
.guang-list-page {
.editor-header {
margin-bottom: 30rem / $pxConvertRem;
padding-top: 36rem / $pxConvertRem;
padding-bottom: 40rem / $pxConvertRem;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.avatar {
float: left;
margin-left: 30rem / $pxConvertRem;
img {
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
@include border-radius(50%);
}
}
.text {
float: left;
margin-left: 32rem / $pxConvertRem;
width: 475rem / $pxConvertRem;
.name {
font-size: 32rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
}
.info {
margin-top: 6rem / $pxConvertRem;
color: #bdbdbf;
font-size: 24rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
}
}
.swiper-container {
width: 100%;
height: 310rem / $pxConvertRem;
img {
height: 100%;
width: 100%;
}
.swiper-pagination {
bottom: 0;
left: 0;
width: 100%;
}
.swiper-pagination-bullet-active {
background: #fff;
}
}
.guang-nav {
background-color: #fff;
overflow: hidden;
height: 80rem / $pxConvertRem;
}
.guang-nav-item {
float: left;
color: #ccc;
font-size: 28rem / $pxConvertRem;
padding: 0 22rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
&.focus {
color: #000;
}
}
.bytouch{
background:#eee;
}
.info-list-container {
overflow-x: hidden;
background: #f0f0f0;
}
.info-list.hide {
display: none;
}
}
\ No newline at end of file
.guang-info {
margin-bottom: 30rem / $pxConvertRem;
padding: 0 0 24rem / $pxConvertRem 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.info-author {
display: block;
width: 100%;
.avatar {
float: left;
margin-top: 20rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
@include border-radius(50%);
}
.name {
float: left;
margin-left: 30rem / $pxConvertRem;
padding: 30rem / $pxConvertRem 0;
font-size: 28rem / $pxConvertRem;
color: #000;
}
}
&:last-child {
margin-bottom: 0;
}
.info-img {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
}
}
.info-match {
position: absolute;
top: 0;
left: 0;
width: 130rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
z-index: 1;
}
.info-tag {
position: absolute;
top: 0;
left: 105rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
&.collocation {
background: image-url('guang/info/collocation.png');
background-size: 100% 100%;
}
&.fashion-good {
background: image-url('guang/info/fashion-good.png');
background-size: 100% 100%;
}
&.fashion-man {
background: image-url('guang/info/fashion-man.png');
background-size: 100% 100%;
}
&.tip {
background: image-url('guang/info/tip.png');
background-size: 100% 100%;
}
&.topic {
background: image-url('guang/info/topic.png');
background-size: 100% 100%;
}
}
.info-deps {
margin: 32rem / $pxConvertRem 0 0 0;
padding: 0 40rem / $pxConvertRem 0 30rem / $pxConvertRem;
.info-title-container {
text-decoration: none;
color: #000;
}
.info-title{
line-height: 44rem / $pxConvertRem;
color: #000;
font-size: 40rem / $pxConvertRem;
font-weight:bold;
}
.info-text {
margin: 16rem / $pxConvertRem 0 0 0;
line-height: 46rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
color: #444;
}
.time-view-like-share {
margin-top: 16rem / $pxConvertRem;
}
}
}
\ No newline at end of file
.ps-list-page {
background-color: #f0f0f0;
.nav-tab, .ps-content {
width: 100%;
}
.nav-tab {
height: 60rem / $pxConvertRem;
padding: 10rem / $pxConvertRem 0;
background-color: #fff;
}
.star-nav, .plus-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 16px;
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.bytouch{
background:#eee;
}
.star-nav {
border-right: 1px solid #ccc;
}
.plus-star-row {
margin-bottom: 30rem / $pxConvertRem;
&:last-child {
margin-bottom: 0;
}
> a {
display: block;
height: 310rem / $pxConvertRem;
> img {
width: 100%;
height: 100%;
}
}
}
.content.hide {
display: none;
}
.swiper-container {
height: 310rem / $pxConvertRem;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.brand-deps {
height: 40rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
padding-left: 10rem / $pxConvertRem;
font-size: 14px;
background: #fff;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.ps-detail-page {
background-color: #f0f0f0;
.ps-block {
margin-bottom: 30rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
background-color: #fff;
&.header, &.related-infos {
border-top: none;
}
&.related-infos {
margin-bottom: 0;
background-color: #f0f0f0;
}
}
.header {
position: relative;
.banner {
width: 100%;
height: 310rem / $pxConvertRem;
}
.logo {
position: absolute;
border: 1px solid #b5b5b5;
height: 168rem / $pxConvertRem;
width: 168rem / $pxConvertRem;
top: 226rem / $pxConvertRem;
left: 50rem / $pxConvertRem;
}
.header-content {
padding: 0 30rem / $pxConvertRem;
}
.name-islike-container {
padding-left: 248rem / $pxConvertRem;
margin-top: 24rem / $pxConvertRem;
font-size: 34rem / $pxConvertRem;
}
.name {
color: #000;
height: 41rem / $pxConvertRem;
width: 295rem / $pxConvertRem;
}
.brand-islike {
position: relative;
float: right;
color: #b0b0b0;
height: 1.5rem;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
top: -0.25rem;
left: -0.25rem;
&.like {
color: #f00;
}
}
}
.intro {
margin-top: 49rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #444;
line-height: 150%;
}
.more-intro {
padding: 30rem / $pxConvertRem 0;
font-size: 28rem / $pxConvertRem;
line-height: 104%;
color: #bbb;
float: right;
.icon {
display: inline-block;
height: 100%;
width: 40rem / $pxConvertRem;
@include transition(transform .1s ease-in)
}
&.spread .icon {
@include rotate(-180deg);
}
}
.new-arrival {
padding-left: 0 30rem / $pxConvertRem;
.new-arrival-content {
padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
}
.more-goods-container {
height: 90rem / $pxConvertRem;
padding: 0 30rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
color: #000;
}
.mg-text {
height: 100%;
line-height: 90rem / $pxConvertRem;
color: #000;
text-decoration: none;
display: block;
font-size: 16px;
}
.more-prods {
float: right;
color: #b0b0b0;
}
.new-arrival-header .more-prods {
margin-right: 30rem / $pxConvertRem;
margin-top: 10rem / $pxConvertRem;
}
}
.new-arrival-header {
padding-left: 222rem / $pxConvertRem;
padding-top: 33rem / $pxConvertRem;
.header-text {
font-size: 28rem / $pxConvertRem;
color: #000;
line-height: 122%;
font-weight: bold;
}
}
.related-info-title {
margin: 0 29rem / $pxConvertRem;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
background-color: #fff;
}
.related-infos-container .guang-info:first-child {
margin-top: 0;
}
}
\ No newline at end of file
.yoho-header .nav-title {
font-weight: normal;
}
.star-class-body {
background: #333;
width: 100%;
font: 12rem / $pxConvertRem/1.5 Arial,'黑体';
float: left;
}
.star-classroom {
background: #333;
img {
max-width: 100%;
display: block;
border: 0;
margin: 0 auto;
}
a {
text-decoration: none;
outline: none;
color: #000;
&:link,
&:visited,
&:hover,
&:actived {
color: #000;
}
}
*:focus {
outline: none;
}
.font-bold {
font-weight: bold;
}
.classroom-mask {
background-color: rgba(0,0,0,.5);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
display: none;
}
.head-tab {
width: 100%;
height: 88rem / $pxConvertRem;
background: #000;
li {
width: 33.3%;
text-align: center;
float: left;
line-height: 88rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
a {
color: #b0b0b0;
display: inline-block;
}
&.cur a{
color: #fff;
}
}
}
.banner-top {
width: 100%;
height: 310rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
position: relative;
.banner-swiper {
width: 100%;
height: 310rem / $pxConvertRem;
overflow: hidden;
position: relative;
ul {
position: relative;
height: 310rem / $pxConvertRem;
li {
float: left;
width: 100%;
height: 310rem / $pxConvertRem;
}
img {
width: 100%;
height: 100%;
}
}
}
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20rem / $pxConvertRem;
text-align: center;
z-index: 1;
.pagination-inner {
display: inline-block;
}
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 10rem / $pxConvertRem;
border-radius: 50%;
}
.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
.home-floor-sign {
width: 100%;
height: 220rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
background: #000;
.nav-left {
width: 102rem / $pxConvertRem;
margin: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
text-align: center;
float: left;
.user-name {
font-size: 24rem / $pxConvertRem;
color: #fff;
margin-top: 30rem / $pxConvertRem;
white-space: nowrap;
}
}
.nav-main {
width: 252rem / $pxConvertRem;
height: 90rem / $pxConvertRem;
float: left;
background-image: image-url("guang/star-classroom/user_info_bg.png");
background-repeat: no-repeat;
background-size: contain;
margin:36rem / $pxConvertRem 0 0 10rem / $pxConvertRem;
p {
color: #fff;
line-height: 46rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
white-space: nowrap;
}
}
.nav-right {
width: 195rem / $pxConvertRem;
text-align: center;
float: right;
.wyf-img {
width: 119rem / $pxConvertRem;
height: 108rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
background-image: image-url("guang/star-classroom/home-wyf.png");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.add-intimacy {
width: 131rem / $pxConvertRem;
height: 52rem / $pxConvertRem;
background-image: image-url("guang/star-classroom/add_intimacy_bg.png");
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: 22rem / $pxConvertRem;
display: inline-block;
white-space: nowrap;
line-height: 66rem / $pxConvertRem;
margin-left: 12rem / $pxConvertRem;
}
}
.user-head {
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
border-radius: 50%;
border: 2rem / $pxConvertRem solid #e0e0e0;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
}
.floor-header-more {
width: 100%;
height: 88rem / $pxConvertRem;
background: #000;
position: relative;
margin-top: 30rem / $pxConvertRem;
border-top: 1rem / $pxConvertRem solid #000;
h2 {
color: #fff;
font-size: 34rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
text-align: center;
}
.more-btn {
width: 64rem / $pxConvertRem;
height: 96rem / $pxConvertRem;
line-height: 86rem / $pxConvertRem;
position: absolute;
right: 20rem / $pxConvertRem;
top: 0;
color: #b0b0b0;
font-size: 50rem / $pxConvertRem;
}
}
.home-floor-subject {
.subject-banner {
width: 100%;
height: 310rem / $pxConvertRem;
}
}
.subject-video-area {
width: 100%;
height: 310rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
background: #000;
#subject-video {
width: 100%;
height: 310rem / $pxConvertRem;
}
}
.home-floor-collocation {
background: #000;
padding-bottom: 60rem / $pxConvertRem;
.collocation-big-img {
width: 100%;
height: 277rem / $pxConvertRem;
padding: 0 14rem / $pxConvertRem;
box-sizing: border-box;
li {
width: 276rem / $pxConvertRem;
height: 277rem / $pxConvertRem;
margin: 0 15rem / $pxConvertRem;
float: left;
}
img {
height: 100%;
}
}
.collocation-img {
width: 100%;
height: 139rem / $pxConvertRem;
margin-top: 30rem / $pxConvertRem;
position: relative;
.collocation-swiper {
width: 100%;
height: 139rem / $pxConvertRem;
overflow: hidden;
position: relative;
}
ul {
position: relative;
height: 139rem / $pxConvertRem;
}
li {
float: left;
width: 229rem / $pxConvertRem;
height: 139rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
}
img {
width: 100%;
height: 100%;
}
}
}
.pop-intimacy {
width: 580rem / $pxConvertRem;
height: 920rem / $pxConvertRem;
background: #fff;
border-radius: 10rem / $pxConvertRem;
position: fixed;
top:20rem / $pxConvertRem;
left: 30rem / $pxConvertRem;
z-index: -1;
display: none;
.intimacy-head {
text-align: center;
color: #444;
height: 140rem / $pxConvertRem;
padding-top: 20rem / $pxConvertRem;
box-sizing: border-box;
position: relative;
.pop-close {
width: 25rem / $pxConvertRem;
height: 25rem / $pxConvertRem;
background-image: image-url("guang/star-classroom/pop-close.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: 20rem / $pxConvertRem;
top: 24rem / $pxConvertRem;
}
h1 {
font-size: 56rem / $pxConvertRem;
font-weight: bold;
line-height: 40rem / $pxConvertRem;
}
h4 {
font-size: 24rem / $pxConvertRem;
}
}
.my-intimacy {
font-size: 24rem / $pxConvertRem;
span {
min-width: 10rem / $pxConvertRem;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
border-radius: 30rem / $pxConvertRem;
font-size: 20rem / $pxConvertRem;
color: #fff;
padding: 0 10rem / $pxConvertRem;
margin-left: 14rem / $pxConvertRem;
background-color: #444;
}
}
.increased {
font-size: 24rem / $pxConvertRem;
display: none;
span {
color: red;
}
}
.calendar {
width: 100%;
float: left;
}
.week {
width: 100%;
height: 38rem / $pxConvertRem;
background: #aeaeae;
padding: 0 23rem / $pxConvertRem;
box-sizing: border-box;
h3 {
width: 76rem / $pxConvertRem;
text-align: center;
font-size: 24rem / $pxConvertRem;
color: #fff;
float: left;
line-height: 38rem / $pxConvertRem;
}
}
.day-item {
float: left;
width: 100%;
padding: 5rem / $pxConvertRem 23rem / $pxConvertRem;
box-sizing: border-box;
.item {
width: 76rem / $pxConvertRem;
color: #444;
float: left;
text-align: center;
cursor: pointer;
margin: 5rem / $pxConvertRem 0 0 0;
height: 56rem / $pxConvertRem;
line-height: 56rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
}
.last-item {
color: #D2D2D2;
}
.sign-item {
background-image: image-url("guang/star-classroom/sign-circle.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
.fan-charts {
width: 100%;
height: 88rem / $pxConvertRem;
border-top: 1rem / $pxConvertRem solid #d5d5d5;
text-align: center;
position: relative;
float: left;
h2 {
font-size: 28rem / $pxConvertRem;
color: #444;
line-height: 88rem / $pxConvertRem;
}
.arrow {
width: 88rem / $pxConvertRem;
height: 88rem / $pxConvertRem;
position: absolute;
top: 0;
right: 0;
color: #b0b0b0;
line-height: 88rem / $pxConvertRem;
}
}
}
.fan-charts-cont {
width: 100%;
line-height: 88rem / $pxConvertRem;
float: left;
li {
width: 100%;
height: 88rem / $pxConvertRem;
border-top: 1rem / $pxConvertRem solid #d5d5d5;
position: relative;
padding: 0 25rem / $pxConvertRem;
box-sizing: border-box;
}
.rank-ico {
width: 52rem / $pxConvertRem;
height: 39rem / $pxConvertRem;
border-radius: 0;
background-image: image-url("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: 24rem / $pxConvertRem;
text-align: center;
line-height: 50rem / $pxConvertRem;
font-weight: bold;
position: relative;
top: 25rem / $pxConvertRem;
}
.rank-avatar {
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
border-radius: 50%;
position: relative;
top: 15rem / $pxConvertRem;
margin-left: 20rem / $pxConvertRem;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
.fans-name {
margin-left: 24rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #444;
width: 180rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 88rem / $pxConvertRem;
}
.fans-intimacy {
width: 150rem / $pxConvertRem;
float: right;
font-size: 20rem / $pxConvertRem;
color: #444;
span {
font-size: 24rem / $pxConvertRem;
color: #d0021b;
margin-left: 5rem / $pxConvertRem;
}
}
li > * {
float: left;
}
}
.things-article {
width: 100%;
float: left;
}
.things-article > li {
width: 100%;
float: left;
padding: 0 0 30rem / $pxConvertRem 30rem / $pxConvertRem;
box-sizing: border-box;
background: #000;
.author-info {
width: 100%;
padding-top: 30rem / $pxConvertRem;
float: left;
border-top:1rem / $pxConvertRem solid #b0b0b0;
img {
width: 70rem / $pxConvertRem;
height: 70rem / $pxConvertRem;
border-radius: 50%;
float: left;
}
}
.author-nav {
float: left;
margin-left: 20rem / $pxConvertRem;
overflow: hidden;
h2 {
font-size: 28rem / $pxConvertRem;
color: #fff;
}
}
.article-count {
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
span {
margin-right:22rem / $pxConvertRem;
}
.see-ico {
width: 31rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
padding-left: 40rem / $pxConvertRem;
}
}
.artice-cont {
width: 100%;
margin-top: 30rem / $pxConvertRem;
float: left;
p {
width: 100%;
height: 180rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
line-height: 46rem / $pxConvertRem;
padding-right: 30rem / $pxConvertRem;
color: #fff;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
.artice-imgs {
width: 100%;
margin-top: 30rem / $pxConvertRem;
float: left;
}
.artice-imgs > li {
float: left;
width: 190rem / $pxConvertRem;
height: 190rem / $pxConvertRem;
margin-right: 5rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
border-radius: 4rem / $pxConvertRem;
}
}
}
.artice-zan {
width: 100%;
border-top: 1rem / $pxConvertRem solid #b0b0b0;
margin-top: 27rem / $pxConvertRem;
float: left;
padding-top: 20rem / $pxConvertRem;
.iconfont {
float: left;
width: 34rem / $pxConvertRem;
height: 34rem / $pxConvertRem;
line-height: 34rem / $pxConvertRem;
display: inline-block;
color: #b0b0b0;
font-size: 34rem / $pxConvertRem;
text-align: center;
margin: 9rem / $pxConvertRem 53rem / $pxConvertRem 0 14rem / $pxConvertRem;
outline: none;
}
.like {
color: #D62927;
}
ul {
float: left;
width: 420rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
overflow: hidden;
}
li {
float: left;
margin: 0 10rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.zan-more {
float: left;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
border-radius: 50%;
margin: 0 10rem / $pxConvertRem;
background: #f0f0f0;
color: #acb1b7;
font-size: 24rem / $pxConvertRem;
text-align: center;
line-height: 50rem / $pxConvertRem;
/*display: none;*/
}
}
.subject-list {
width: 100%;
height: auto;
overflow: hidden;
li {
width: 100%;
float: left;
background: #000;
margin-top: 30rem / $pxConvertRem;
img {
width: 100%;
}
p {
width: 100%;
height: 88rem / $pxConvertRem;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 34rem / $pxConvertRem;
font-size: 34rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
}
a {
color: #fff;
}
}
}
.collocation-list {
width: 100%;
float: left;
li {
float: left;
width: 100%;
margin-top: 30rem / $pxConvertRem;
background: #000;
.cont-area {
width: 100%;
box-sizing: border-box;
padding: 30rem / $pxConvertRem;
}
.cont-txt {
font-size: 28rem / $pxConvertRem;
line-height: 46rem / $pxConvertRem;
color: #b0b0b0;
margin-top: 10rem / $pxConvertRem;
}
img {
width: 100%;
}
.title {
font-size: 40rem / $pxConvertRem;
line-height: 48rem / $pxConvertRem;
color: #fff;
width: 100%;
}
}
}
.count-area {
position: relative;
width: 100%;
height: 32rem / $pxConvertRem;
span {
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
i {
display: inline-block;
margin-right: 5rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
}
}
.time {
float: left;
}
.see {
float: left;
margin-left: 20rem / $pxConvertRem;
}
.time-ico {
width: 24rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
}
.see-ico {
width: 31rem / $pxConvertRem;
height: 24rem / $pxConvertRem;
}
.collection {
position: absolute;
right: 122rem / $pxConvertRem;
}
.collected-ico {
width: 34rem / $pxConvertRem;
height: 32rem / $pxConvertRem;
vertical-align: text-bottom;
}
.collected {
color: #D62927;
}
.forward {
width: 40rem / $pxConvertRem;
height: 28rem / $pxConvertRem;
position: absolute;
right: 23rem / $pxConvertRem;
margin-left: 45rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #b0b0b0;
height: 32rem / $pxConvertRem;
line-height: 32rem / $pxConvertRem;
}
}
.things-list {
.things-article > li {
margin-top: 30rem / $pxConvertRem;
.author-info {
border-top: none;
}
}
}
.check-in {
background: #f0f0f0;
.check-in-header {
width: 100%;
height: 283rem / $pxConvertRem;
background-image: image-url("guang/star-classroom/checkIn-bg.jpg");
background-repeat: no-repeat;
background-size: contain;
}
.head-cont {
text-align: center;
padding-top: 30rem / $pxConvertRem;
height: 195rem / $pxConvertRem;
box-sizing: border-box;
.user-avatar {
width: 100rem / $pxConvertRem;
height: 100rem / $pxConvertRem;
border-radius: 50%;
border:4rem / $pxConvertRem solid;
border-color: rgba(255,255,255,.6);
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-origin: border-box;
background-size: contain;
display: inline-block;
}
.user-name {
color: #fff;
font-size: 24rem / $pxConvertRem;
font-weight: bold;
margin-top: 7rem / $pxConvertRem;
}
}
.count-area {
width: 100%;
float: left;
}
.count-nav {
width: 319rem / $pxConvertRem;
float: left;
margin-top: 12rem / $pxConvertRem;
p {
width: 100%;
text-align: center;
color: #fff;
line-height: 32rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
}
}
.line {
width: 2rem / $pxConvertRem;
height: 46rem / $pxConvertRem;
float: left;
margin-top: 26rem / $pxConvertRem;
box-sizing: border-box;
border-left: 1rem / $pxConvertRem solid #fff;
}
.ranking-area {
width: 100%;
background: #fff;
border-top: 1rem / $pxConvertRem solid #e0e0e0;
margin-top: 30rem / $pxConvertRem;
padding-left: 30rem / $pxConvertRem;
box-sizing: border-box;
li {
width: 100%;
height: 120rem / $pxConvertRem;
padding-top: 20rem / $pxConvertRem;
box-sizing: border-box;
border-bottom: 1rem / $pxConvertRem solid #e0e0e0;
}
.rank-avatar {
width: 80rem / $pxConvertRem;
height: 80rem / $pxConvertRem;
border-radius: 50%;
background-image: image-url("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.ranking-mid {
float: left;
margin-left: 20rem / $pxConvertRem;
}
.rank-ico {
min-width: 18rem / $pxConvertRem;
height: 38rem / $pxConvertRem;
border-radius: 38rem / $pxConvertRem;
background: #444;
display: inline-block;
text-align: center;
line-height: 40rem / $pxConvertRem;
color: #fff;
font-size: 24rem / $pxConvertRem;
font-weight: bold;
padding: 0 10rem / $pxConvertRem;
}
.rank-name {
font-size: 24rem / $pxConvertRem;
color: #444;
margin-top: 5rem / $pxConvertRem;
width: 260rem / $pxConvertRem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 30rem / $pxConvertRem;
}
.ranking-rg {
font-size: 20rem / $pxConvertRem;
color: #444;
float: right;
margin:20rem / $pxConvertRem 30rem / $pxConvertRem 0 0;
}
.intimacy {
margin-left: 10rem / $pxConvertRem;
font-size: 36rem / $pxConvertRem;
color: #b0b0b0;
}
}
.high-light {
.rank-ico {
width: 52rem / $pxConvertRem;
height: 39rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
border-radius: 0;
background-image: image-url("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
padding: 0;
}
.intimacy {
color: #d0021b;
}
}
}
}
@media screen and (max-height: 480rem / $pxConvertRem){
.star-classroom {
.pop-intimacy {
height: 796rem / $pxConvertRem;
.day-item .item {
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
margin-top: 0;
}
.fan-charts {
height: 76rem / $pxConvertRem;
h2 {
line-height: 76rem / $pxConvertRem;
}
.arrow {
height: 76rem / $pxConvertRem;
line-height: 76rem / $pxConvertRem;
}
}
.intimacy-head h1{
font-size: 50rem / $pxConvertRem;
}
}
.fan-charts-cont {
line-height: 76rem / $pxConvertRem;
.rank-ico {
top: 17rem / $pxConvertRem;
}
.rank-avatar {
top: 7rem / $pxConvertRem;
}
.fans-name {
height: 76rem / $pxConvertRem;
}
li {
height: 76rem / $pxConvertRem;
}
}
}
}
\ No newline at end of file
.time-view-like-share {
color: #b0b0b0;
line-height: 38rem / $pxConvertRem;
height: 38rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
.iconfont {
vertical-align: 9%;
margin-right: 4rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
}
.like-share-container {
display: inline-block;
float: right;
> * {
float: left;
}
.iconfont {
position: relative;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
display: inline-block;
color: #b0b0b0;
width: 60rem / $pxConvertRem;
top: -14rem / $pxConvertRem;
font-size: 34rem / $pxConvertRem;
text-align: center;
margin-right: 0;
outline: none;
}
.share-btn {
margin-left: 20rem / $pxConvertRem;
}
.like-btn.like {
color: #444;
}
.collect-btn {
margin-left: 20rem / $pxConvertRem;
&.collected {
color: #D62927;
}
}
}
}
\ No newline at end of file
.banner-bottom {
margin: (30rem / $pxConvertRem) 0 0;
height: 160rem / $pxConvertRem;
overflow: hidden;
img {
display: block;
width: 100%;
}
}
\ No newline at end of file
.banner-center {
margin: (30rem / $pxConvertRem) 0 0;
height: 200rem / $pxConvertRem;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
\ No newline at end of file
.banner-top {
position: relative;
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20rem / $pxConvertRem;
text-align: center;
z-index: 1;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
background: #fff;
opacity: 0.5;
margin: 0 (9rem / $pxConvertRem);
border-radius: 50%;
&.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
}
}
.banner-swiper {
position: relative;
height: 310.303rem / $pxConvertRem;
overflow: hidden;
ul {
position: relative;
height: 310.303rem / $pxConvertRem;
li {
float: left;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
}
.coupon-area {
max-width: 640px;
overflow: hidden;
.banner-top {
float: left;
}
}
.just-img{
width: 100%;
float: left;
margin: 20rem / $pxConvertRem 0;
}
.coupon-floor {
float: left;
width: 100%;
.floor-title {
background-color: #fff;
text-align: center;
height: 96rem / $pxConvertRem;
line-height: 96rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
}
.floor-main {
height: 180rem / $pxConvertRem;
width: 100%;
background-size: 100%;
background-repeat: no-repeat;
padding: 10rem / $pxConvertRem 30rem / $pxConvertRem;
box-sizing: border-box;
float: left;
.main-left {
float: left;
width: 467rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
}
.main-right-receive, .main-right-use, .main-right-go {
float: right;
width: 113rem / $pxConvertRem;
height: 160rem / $pxConvertRem;
position: relative;
span {
background-repeat: no-repeat;
background-size: contain;
&.on-receive {
position: absolute;
left: 50%;
top: 50rem / $pxConvertRem;
margin-left: -26rem / $pxConvertRem;
display: inline-block;
width: 52rem / $pxConvertRem;
height: 54rem / $pxConvertRem;
background-image: image-url('coupon/click-txt.png');
}
&.received {
width: 113rem / $pxConvertRem;
height: 132rem / $pxConvertRem;
background-image: image-url('coupon/received.png');
position: absolute;
top: 0;
right: 0;
}
&.zero {
width: 111rem / $pxConvertRem;
height: 132rem / $pxConvertRem;
background-image: image-url('coupon/zero.png');
position: absolute;
top: 0;
right: 0;
}
}
}
}
}
.floor-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 9;
}
.floor-message {
position: fixed;
top: 50%;
left: 50%;
width: 550rem/$pxConvertRem;
height: 250rem/$pxConvertRem;
margin-left: -275rem/$pxConvertRem;
margin-top: -125rem/$pxConvertRem;
z-index: 10;
background-color: rgba(250, 250, 250, .92);
display: none;
border-radius: 10px;
.coupon-message-content {
border-bottom: 1px solid rgb(197, 197, 197);
height: 160rem/$pxConvertRem;
text-align: center;
line-height: 160rem/$pxConvertRem;
font-size: 28rem/$pxConvertRem;
}
.coupon-message-op {
height: 90rem/$pxConvertRem;
text-align: center;
line-height: 90rem/$pxConvertRem;
font-size: 32rem/$pxConvertRem;
color: rgb(223, 98, 112);
}
}
.floor-tooltip{
position: fixed;
top: 50%;
left: 50%;
width: 220rem/$pxConvertRem;
height: 140rem/$pxConvertRem;
margin-left: -110rem/$pxConvertRem;
margin-top: -70rem/$pxConvertRem;
z-index: 11;
background-color: rgba(60, 60, 60, .7);
display: none;
border-radius: 8rem/$pxConvertRem;
color: #fff;
.icon-box{
height: 84rem/$pxConvertRem;
line-height: 84rem/$pxConvertRem;
text-align: center;
}
.icon-msg{
height: 56rem/$pxConvertRem;
text-align: center;
}
}
\ No newline at end of file
.creative-life {
background: #fff;
.banner {
display: block;
height: 400rem / $pxConvertRem;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.classify-list {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.classify-list > li {
float: left;
width: 212rem / $pxConvertRem;
height: 192rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.classify-logo {
width: 212rem / $pxConvertRem;
height: 192rem / $pxConvertRem;
img {
display: block;
width: 100%;
height: 100%;
}
}
.classify-name {
line-height: 52rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
color: #000;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
.classify:nth-child(3n) {
border-right: 0;
}
}
\ No newline at end of file