wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 1454e9c08a44e6713622b8c9938354f8da962a21 1 parent 27be89eb

Guang scss => css

Inline Side-by-side
Showing 10 changed files with 975 additions and 2 deletions
@define-mixin relatedTitle {
margin: 0 29px;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72px;
font-size: 30px;
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: 90px;
+ .fixed-top {
top: 90px;
}
}
}
.author {
border-bottom: 1px solid #e0e0e0;
background: #fff;
> a {
display: block;
height: 100%;
}
.avatar {
float: left;
margin-top: 20px;
margin-left: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.name {
float: left;
font-size: 28px;
color: #000;
padding: 30px 0;
margin-left: 30px;
}
.intro {
float: left;
font-size: 28px;
color: #b0b0b0;
padding: 30px 0;
margin-left: 30px;
}
}
.post-title {
padding: 16px 0 26px 30px;
background: #fff;
.title {
line-height: 60px;
font-size: 40px;
color: #000;
font-weight: bold;
}
}
.text-block {
padding: 20px 30px;
line-height: 46px;
font-size: 28px;
background: #fff;
color: #444;
}
.big-img-block {
padding-bottom: 5px;
background: #fff;
img {
width: 100%;
height: 640px;
}
}
.small-img-block {
padding-bottom: 8px;
background: #fff;
img {
float: right;
width: 315px;
height: 420px;
&:first-child {
float: left;
}
}
}
.collocation-block {
background: #fff;
.good-list {
padding-left:15px;
}
}
.thumb-container {
padding-top: 30px;
padding-left: 20px;
background: transparent resolve('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: 6px;
bottom: 34px;
width: 20px;
height: 20px;
border-radius: 50%;
&.bag {
background: url("/guang/clothes/bag.png");
background-color: #fff;
background-size: 100%;
}
&.cloth {
background: url("/guang/clothes/cloth.png");
background-color: #fff;
background-size: 100%;
}
&.dress {
background: url("/guang/clothes/dress.png");
background-color: #fff;
background-size: 100%;
}
&.headset {
background: url("/guang/clothes/headset.png");
background-color: #fff;
background-size: 100%;
}
&.lamp {
background: url("/guang/clothes/lamp.png");
background-color: #fff;
background-size: 100%;
}
&.pants {
background: url("/guang/clothes/pants.png");
background-color: #fff;
background-size: 100%;
}
&.shoe {
background: url("/guang/clothes/shoe.png");
background-color: #fff;
background-size: 100%;
}
&.swim-suit {
background: url("/guang/clothes/swim-suit.png");
background-color: #fff;
background-size: 100%;
}
&.under {
background: url("/guang/clothes/under.png");
background-color: #fff;
background-size: 100%;
}
&.watch {
background: url("/guang/clothes/watch.png");
background-color: #fff;
background-size: 100%;
}
}
.thumb {
display: inline-block;
position: relative;
margin-right: 22px;
padding-bottom: 30px;
&:last-child {
margin-right: 0;
}
&.focus .thumb-img {
border-color: #000;
}
}
.thumb-img {
height: 134px;
width: 96px;
border: 1px solid transparent;
}
.related-reco-block {
background: #fff;
padding-left: 15px;
border-top: 1px solid #e0e0e0;
h2 {
margin-left: -15px;
line-height: 104px;
font-size: 30px;
color: #b0b0b0;
text-align: center;
}
.one-good {
padding-left: 15px;
padding-right: 30px;
margin-bottom: 20px;
.thumb {
float: left;
height: 134px;
width: 96px;
}
.content-container {
padding-left: 120px;
height: 134px;
line-height: 1;
font-size: 24px;
> p {
height: 50%;
line-height: 94px;
}
span {
display: inline-block;
line-height: 24px;
}
.price {
line-height: 47px;
}
}
.sale-price {
color: #d62927;
line-height: 1.5;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin-left: 5px;
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: 80px;
line-height: 80px;
padding: 0 30px;
font-size: 16px;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.iconfont {
float: right;
color: #ccc;
}
}
.related-brand {
margin-top: 30px;
h2 {
@mixin relatedTitle;
}
.brand-list {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 30px 0 30px;
background: #fff;
}
.brand {
float: left;
width: 158px;
height: 128px;
border-right: 1px solid #e0e0e0;
margin-bottom: 10px;
a {
display: block;
}
&:nth-child(4n) {
border-right: none;
}
}
.brand-logo {
display: table-cell;
width: 158px;
height: 94px;
vertical-align: middle;
img {
display: block;
max-width: 158px;
max-height: 94px;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
margin: 10px 0 0 0;
line-height: 24px;
font-size: 18px;
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: 30px;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.tag-bg {
position: absolute;
height: 40px;
width: 40px;
background: resolve('guang/tag.png') no-repeat;
background-size: 100% 100%;
top: 35px;
left: 20px;
}
.tag-list {
margin-left: 50px;
}
li {
float: left;
margin-top: 31px;
margin-left: 31px;
}
a {
height: 50px;
line-height: 50px;
font-size: 30px;
color: #000;
text-decoration: underline;
white-space: nowrap;
}
}
.related-info {
margin-top: 30px;
h2 {
@mixin relatedTitle;
}
.info-list {
background: #fff;
padding-bottom: 30px;
border-top: 1px solid #e0e0e0;
}
li {
padding-top: 30px;
margin-bottom: 10px;
a {
display: block;
}
img {
float: left;
margin-left: 30px;
width: 182px;
height: 114px;
&.square {
height: 182px;
}
}
}
.title, .publish-time {
float: left;
width: 360px;
margin-left: 30px;
line-height: 40px;
color: #444;
font-size: 28px;
}
.publish-time {
font-size: 18px;
margin-top: 0;
color: #b0b0b0;
.iconfont {
font-size: 18px;
}
}
}
}
... ...
@import "tvls";
@import "info";
@import "plus-star";
@import "info-list";
@import "detail";
... ...
.guang-list-page {
.editor-header {
margin-bottom: 30px;
padding-top: 36px;
padding-bottom: 40px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.avatar {
float: left;
margin-left: 30px;
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
}
.text {
float: left;
margin-left: 32px;
width: 475px;
.name {
font-size: 32px;
line-height: 40px;
}
.info {
margin-top: 6px;
color: #bdbdbf;
font-size: 24px;
line-height: 32px;
}
}
.swiper-container {
width: 100%;
height: 310px;
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: 80px;
}
.guang-nav-item {
float: left;
color: #ccc;
font-size: 28px;
padding: 0 22px;
line-height: 80px;
&.focus {
color: #000;
}
}
.bytouch{
background:#eee;
}
.info-list-container {
overflow-x: hidden;
background: #f0f0f0;
}
.info-list.hide {
display: none;
}
}
... ...
.guang-info {
margin-bottom: 30px;
padding: 0 0 24px 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.info-author {
display: block;
width: 100%;
.avatar {
float: left;
margin-top: 20px;
width: 50px;
height: 50px;
margin-left: 30px;
border-radius: 50%;
}
.name {
float: left;
margin-left: 30px;
padding: 30px 0;
font-size: 28px;
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: 130px;
height: 50px;
line-height: 50px;
font-size: 28px;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
z-index: 1;
}
.info-tag {
position: absolute;
top: 0;
left: 105px;
height: 50px;
width: 50px;
&.collocation {
background-image: url('/guang/info/collocation.png');
}
&.fashion-good {
background-image: url('/guang/info/fashion-good.png');
}
&.fashion-man {
background-image: url('/guang/info/fashion-man.png');
}
&.tip {
background-image: url('/guang/info/tip.png');
}
&.topic {
background-image: url('/guang/info/topic.png');
}
}
.info-deps {
margin: 32px 0 0 0;
padding: 0 40px 0 30px;
.info-title-container {
text-decoration: none;
color: #000;
}
.info-title{
line-height: 44px;
color: #000;
font-size: 40px;
font-weight:bold;
}
.info-text {
margin: 16px 0 0 0;
line-height: 46px;
font-size: 28px;
color: #444;
}
.time-view-like-share {
margin-top: 16px;
}
}
}
... ...
.ps-list-page {
background-color: #f0f0f0;
.nav-tab, .ps-content {
width: 100%;
}
.nav-tab {
height: 60px;
padding: 10px 0;
background-color: #fff;
}
.star-nav, .plus-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: 60px;
line-height: 60px;
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: 30px;
&:last-child {
margin-bottom: 0;
}
> a {
display: block;
height: 310px;
}
}
.content.hide {
display: none;
}
.swiper-container {
height: 310px;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.brand-deps {
height: 40px;
line-height: 40px;
padding-left: 10px;
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: 30px;
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: 310px;
}
.logo {
position: absolute;
border: 1px solid #b5b5b5;
height: 168px;
width: 168px;
top: 226px;
left: 50px;
}
.header-content {
padding: 0 30px;
}
.name-islike-container {
padding-left: 248px;
margin-top: 24px;
font-size: 34px;
}
.name {
color: #000;
height: 41px;
width: 295px;
}
.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: 49px;
font-size: 24px;
color: #444;
line-height: 150%;
}
.more-intro {
padding: 30px 0;
font-size: 28px;
line-height: 104%;
color: #bbb;
float: right;
.icon {
display: inline-block;
height: 100%;
width: 40px;
transition: transform .1s ease-in;
}
&.spread .icon {
transform: rotate(-180deg);
}
}
.new-arrival {
padding-left: 0 30px;
.new-arrival-content {
padding: 20px 14px;
}
.more-goods-container {
height: 90px;
padding: 0 30px;
border-top: 1px solid #e0e0e0;
color: #000;
}
.mg-text {
height: 100%;
line-height: 90px;
color: #000;
text-decoration: none;
display: block;
font-size: 16px;
}
.more-prods {
float: right;
color: #b0b0b0;
}
.new-arrival-header .more-prods {
margin-right: 30px;
margin-top: 10px;
}
}
.new-arrival-header {
padding-left: 222px;
padding-top: 33px;
.header-text {
font-size: 28px;
color: #000;
line-height: 122%;
font-weight: bold;
}
}
.related-info-title {
margin: 0 29px;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72px;
font-size: 30px;
color: #b0b0b0;
text-align: center;
background-color: #fff;
}
.related-infos-container .guang-info:first-child {
margin-top: 0;
}
}
... ...
.time-view-like-share {
color: #b0b0b0;
line-height: 38px;
height: 38px;
font-size: 24px;
.iconfont {
vertical-align: 9%;
margin-right: 4px;
font-size: 24px;
}
.like-share-container {
display: inline-block;
float: right;
> * {
float: left;
}
.iconfont {
position: relative;
height: 60px;
line-height: 60px;
display: inline-block;
color: #b0b0b0;
width: 60px;
top: -14px;
font-size: 34px;
text-align: center;
margin-right: 0;
outline: none;
}
.share-btn {
margin-left: 20px;
}
.like-btn.like {
color: #444;
}
.collect-btn {
margin-left: 20px;
&.collected {
color: #D62927;
}
}
}
}
... ...
... ... @@ -181,8 +181,8 @@ a {
@import "loading";
@import "index/index";
@import "passport/index";
/*
@import "guang/index";
/*
@import "home/index";
@import "category/index";
@import "me/index";
... ...
... ... @@ -50,7 +50,7 @@
width: 88px;
height: 88px;
margin: 0 14px;
@include border-radius(50%);
border-radius: 50%;
background-color: #333;
background-repeat: no-repeat;
background-size: 100% 100%;
... ...