chenchao / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 58ba61b5dbb0cbfcbbd97f491b3b8190635d1d93 1 parent 1454e9c0

H5 首页 scss => css

Inline Side-by-side
Showing 23 changed files with 1388 additions and 1 deletions
.banner-bottom {
margin: 30px 0 0;
height: 160px;
overflow: hidden;
img {
display: block;
width: 100%;
}
}
... ...
.banner-center {
margin: 30px 0 0;
height: 200px;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
... ...
.banner-top {
position: relative;
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
z-index: 1;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14px;
height: 14px;
background: #fff;
opacity: 0.5;
margin: 0 9px;
border-radius: 50%;
&.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
}
}
.banner-swiper {
position: relative;
height: 310.303px;
overflow: hidden;
ul {
position: relative;
height: 310.303px;
li {
float: left;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
}
... ...
.creative-life {
background: #fff;
.banner {
display: block;
height: 400px;
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: 212px;
height: 192px;
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.classify-logo {
width: 212px;
height: 192px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.classify-name {
line-height: 52px;
font-size: 26px;
color: #000;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
.classify:nth-child(3n) {
border-right: 0;
}
}
... ...
.fine-brands {
background: #fff;
border-top: 1px solid #e0e0e0;
a {
display: block;
text-decoration: none;
}
.brand {
float: left;
width: 158px;
height: 174px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
overflow: hidden;
.brand-logo {
display: table-cell;
width: 158px;
height: 130px;
vertical-align: middle;
img {
display: block;
max-width: 158px;
max-height: 130px;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
line-height: 44px;
font-size: 18px;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.brand:nth-child(4n) {
border-right: none;
}
.more {
.brand-logo {
display: block;
text-align: center;
line-height: 150px;
.iconfont {
font-size: 48px;
color: #333;
}
}
}
}
... ...
.floor-header {
margin: 29px 30px 0;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 30px;
color: #b1b1b1;
}
.floor-header-more {
position: relative;
height: 99px;
line-height: 99px;
margin: 29px 0 0;
background: #fff;
border-top: 1px solid #e0e0e0;
text-align: center;
font-size: 32px;
color: #444;
.more-btn {
position: absolute;
right: 30px;
top: 0;
bottom: 0;
color: #b0b0b0;
font-size: 50px;
}
}
... ...
.category-swiper {
position: relative;
height: 400px;
overflow: hidden;
ul {
li {
float: left;
width: 100%;
a, img {
display: block;
width: 100%;
height: 100%;
}
}
}
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
.pagination-inner {
display: inline-block;
span {
display: inline-block;
width: 14px;
height: 14px;
background: #fff;
opacity: 0.5;
margin: 0 (9px);
border-radius: 50%;
}
span.swiper-active-switch {
opacity: 1;
}
}
}
}
.goods-category {
background: #fff;
}
.goods-category .category-list {
height: 382px;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
overflow: hidden;
li {
float: left;
width: 191px;
height: 191px;
border-left: 1px solid #e0e0e0;
.first-show {
display: none;
}
.img-box {
height: 100%;
line-height: 100%;
text-align: center;
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.category-name {
line-height: 32px;
font-size: 20px;
color: #444;
text-align: center;
}
}
li:first-child {
width: 253px;
height: 382px;
border-left: none;
.img-box {
height: 100%;
line-height: 100%;
}
.category-name {
line-height: 40px;
font-size: 22px;
}
}
li:nth-child(4), li:nth-child(5) {
border-top: 1px solid #e0e0e0;
}
}
... ...
.header-download {
position: relative;
height: 212px;
padding: 48px 0 0;
overflow: hidden;
.download-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.yoho-logo {
height: 57px;
background: resolve("app-logo.png") no-repeat center center;
background-size: auto 100%;
}
p {
line-height: 48px;
font-size: 28px;
color: #fff;
text-align: center;
}
.download-btn {
display: block;
margin: (18px) auto 0;
width: 294px;
height: 64px;
line-height: 64px;
border: (3px) solid #fff;
font-size: 36px;
text-align: center;
color: #fff;
}
.close-btn {
position: absolute;
top: 17px;
right: 13px;
width: 50px;
height: 50px;
background: resolve("close-icon.png");
background-size: 100% 100%;
}
}
... ...
.home-header {
height: 90px;
line-height: 90px;
background-image: linear-gradient(#323232, #414141);
position: relative;
.iconfont {
color: #fff;
}
.nav-btn {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
padding: 0 32px;
}
.logo {
display: block;
margin: 0 auto;
width: 208px;
height: 87px;
background: resolve("yohologo02.png") no-repeat center center;
background-size: 100%;
&.animate{
background: resolve("yohologo01.png") no-repeat center center;
background-size: 100%;
}
}
.search-btn {
position: absolute;
right: 0;
top: 0;
width: 90px;
height: 90px;
text-align: center;
a {
display: block;
color: #fff;
font-size: 20px;
line-height: 90px;
}
}
.iconfont.highlight {
background: rgba(200,200,200,.4);
}
}
.girls-wrap .home-header {
background: #FF88AE;
}
.kids-wrap .home-header {
background: #7ad9f9;
}
.lifestyle-wrap .home-header {
background: #4f4138;
}
.kids-wrap .logo {
font-style: italic;
font-family: "helvetica","Arial","榛戜綋";
font-weight: bold;
color: #fff;
}
... ...
.hot-brands {
border-bottom: 1px solid #e0e0e0;
background: #fff;
.floor-header {
background: #f0f0f0;
margin: 0;
padding: 29px 30px 0;
border: 0;
h2 {
border: 1px solid #e0e0e0;
background: #fff;
border-bottom: 0;
}
}
a {
display: block;
text-decoration: none;
height: 100%;
}
.brand {
float: left;
width: 158px;
height: 174px;
border-right: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
overflow: hidden;
.brand-logo {
display: table-cell;
width: 158px;
height: 128px;
line-height: 128px;
text-align: center;
font-size: 0;
vertical-align: middle;
img {
max-width: 100%;
max-height: 100%;
}
}
.brand-name {
line-height: 44px;
font-size: 18px;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
}
.brand:nth-child(5n) {
border-right: none;
}
.more {
float: left;
width: 317px;
height: 174px;
border-top: 1px solid #e0e0e0;
a {
display: block;
width: 100%;
height: 100%;
background: resolve("more-brand.png") no-repeat;
background-size: 100% 100%;
}
}
}
.brands-swiper {
background: #fff;
width: 100%;
height: 160px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
overflow: hidden;
.brands-list {
position: relative;
height: 160px;
li {
float: left;
padding-left: 5%;
width: 21.875%;
height: 140px;
a {
position: relative;
display: block;
width: 100%;
height: 100%;
line-height: 140px;
font-size: 0;
}
img {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.brands-title {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 18px;
color: #444;
background: rgba(255, 255, 255, 0.5);
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
... ...
.hot-category {
margin: 30px 0 0;
border-bottom: 1px solid #e0e0e0;
.category-banner {
height: 198px;
img {
display: block;
width: 100%;
height: 198px;
}
}
.category-list {
background: #fff;
li {
float: left;
width: 158px;
height: 174px;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
overflow: hidden;
.img-box {
width: 100%;
height: 100%;
line-height: 154px;
text-align: center;
overflow: hidden;
font-size: 0;
img {
vertical-align: middle;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
}
.category-title {
line-height: 22px;
color: #aaa;
font-size: 18px;
text-align: center;
}
}
}
}
... ...
.icons-wrapper {
box-sizing: border-box;
padding: 30px 0 16px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.icons-item {
float: left;
margin-bottom: 10px;
width: 25%;
height: 146px;
text-align: center;
}
.imagebar {
display: block;
margin: 0 auto;
text-align: center;
width: 98px;
height: 98px;
line-height: 98px;
box-sizing: border-box;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.linkbar {
display: block;
line-height: 44px;
font-size: 24px;
color: #444;
&:visited, &:link, &:active, &:hover {
color: #444;
}
}
... ...
@import "header-download";
@import "banner-top";
@import "banner-center";
@import "banner-bottom";
@import "side-nav";
@import "floor-header";
@import "hot-brands";
@import "fine-brands";
@import "creative-life";
@import "plus-star";
@import "maybe-like";
@import "icons-enter";
@import "trendsetter-collocation";
@import "trend-topics";
@import "goods-category";
@import "hot-brands";
@import "hot-category";
@import "home-header";
@import "thumb-row";
.mobile-container{
width: 100%;
overflow: hidden;
}
.mobile-wrap {
position: relative;
z-index: 2;
background: #f0f0f0;
transition: transform .3s;
}
.mobile-wrap.menu-open {
transform: translateX(540px);
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 4;
transition: opacity 1s;
}
.overlay.show {
display: block;
opacity: 0.3;
}
... ...
.maybe-like {
position: relative;
background: #fff;
padding-left: 15px;
border-top: 1px solid #ccc;
margin-top: 30px;
.title {
height: 104px;
font-size: 38px;
line-height: 104px;
text-align: center;
color: #dadada;
}
.icon {
display: inline-block;
height: 31px;
width: 31px;
background: resolve("up-icon.png") no-repeat;
background-size: 100% 100%;
}
.maybe-like-nav {
width: 100%;
height: 60px;
padding: 10px 0;
background-color: #fff;
&:before {
content: '';
position: absolute;
border-top: 1px solid #ccc;
left: 0;
top: 80px;
width: 640px;
height: 0;
}
}
.maybe-like-nav-item {
box-sizing: border-box;
float: left;
width: 50%;
height: 60px;
line-height: 60px;
text-align: center;
color: #ccc;
border-right: 1px solid #ccc;
&.focus {
color: #000;
}
}
}
.load-more-img {
padding-left: 0;
height: 200px;
border-top: 1px solid #ccc;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
... ...
.plus-star img {
display: block;
width: 100%;
height: 198px;
border-top: 1px solid #e0e0e0;
}
... ...
.search-input{
position: relative;
padding:13px 20px;
input{
display: block;
width: 547px;
height: 60px;
line-height: 60px;
border: none;
padding: 0 0 0 53px;
margin: 0;
outline: none;
font-family: helvetica,Arial,"黑体";
border-radius: 50px;
font-size: 30px;
}
.search-icon{
position: absolute;
top: 0;
bottom: 0;
color: #999;
line-height: 86px;
left: 43px;
}
}
... ...
.side-nav {
display: none;
background: #fff;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 100px;
width: 540px;
background: #f0f0f0;
z-index: 4;
overflow: hidden;
overflow-y: auto;
transition: all .3s;
> ul {
margin-bottom: 20px;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
li {
position: relative;
height: 80px;
line-height: 80px;
background: #fff;
&:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 430px;
height: 0;
border-top: 1px solid #e0e0e0;
}
&:last-child {
&:after {
content: none;
}
}
a {
display: block;
height: 100%;
padding-left: 110px;
color: #444;
}
em {
font-weight: bold;
font-size: 26px;
}
.title {
display: inline-block;
font-size: 36px;
vertical-align: bottom;
padding-left: 20px;
/*此处字体小于 12px， 先扩大，再scale缩小*/
transform: scale(0.5);
transform-origin: 0 50% 0;
}
.nav-icon, .nav-img {
position: absolute;
width: 38px;
height: 38px;
top: 50%;
margin-top: -19px;
left: 35px;
background: no-repeat left center;
background-size: 100% 100%;
}
.enter-subnav {
position: absolute;
right: 30px;
top: 0;
bottom: 0;
font-size: 36px;
color: #b0b0b0;
font-weight: lighter;
}
&.highlight {
background: #eee;
}
}
.first {
li {
height: 100px;
line-height: 100px;
border-bottom: 1px solid #e0e0e0;
&:last-child {
border-bottom: none;
}
&:after {
content: none;
}
em {
font-size: 36px;
}
.nav-img, .nav-icon {
width: 48px;
height: 48px;
margin-top: -24px;
left: 30px;
}
}
.sub-nav {
li {
border-bottom: 1px solid #e0e0e0;
}
}
}
li.boys {
i {
background: resolve("side-nav/boys.png") no-repeat left center;
background-size: 100% 100%;
}
}
li.girls {
i {
background: resolve("side-nav/girls.png") no-repeat left center;
background-size: 100% 100%;
}
}
li.kids {
i {
background: resolve("side-nav/kids.png") no-repeat left center;
background-size: 100% 100%;
}
}
li.life {
i {
background: resolve("side-nav/life.png") no-repeat left center;
background-size: 100% 100%;
}
}
li.guang, li.trendfinder {
.nav-icon {
background: resolve("side-nav/guang.png") no-repeat left center;
background-size: 100% 100%;
}
}
}
.side-nav.on {
display: block;
}
.sub-nav {
display: none;
position: fixed;
bottom: 0;
top: 0;
left: 0;
width: 540px;
background: #fff !important;
overflow: hidden;
transform: translateX(540px);
transition: transform 0.3s
li {
height: 80px !important;
line-height: 80px !important;
border: none;
border-bottom: 1px solid #e0e0e0;
&:after {
content: none;
}
a {
position: relative;
display: block;
margin: 0 0 0 (30px);
padding-left: 10px;
font-size: 36px;
z-index: 2;
}
.nav-point {
position: absolute;
left: 0px;
font-size: 16px;
color: #f0f0f0;
}
&.highlight {
background: #eee;
}
em {
font-weight: normal;
font-size: 30px !important;
}
}
li:hover, li.current {
.nav-point {
color: #3e3e3e;
}
}
li:first-child {
height: 90px !important;
line-height: 90px !important;
background: #3e3e3e;
a {
color: #fff;
border-bottom: none;
padding-left: 70px;
}
.nav-back {
position: absolute;
left: 0;
}
}
}
.sub-nav.show {
display: block;
z-index: 1;
transform: translateX(0);
transition: transform 0.3s;
}
... ...
#thumb-row {
background-color: #f0f0f0;
text-align: center;
padding: 32px 0 0;
.thumb-row-box {
display: inline-block;
width: 275px;
height: 160px;
border-radius: 4px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
margin: 0 14.4px;
}
}
... ...
.trend-topic-wrapper {
background: #fff;
}
.trend-topic-content {
position: relative;
width: 100%;
border-bottom: 1px solid #e0e0e0;
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 22px;
text-align: center;
z-index: 0;
.pagination-inner {
display: inline-block;
}
span {
float: left;
width: 16px;
height: 16px;
margin: 0 8px;
background: #f0f0f0;
border-radius: 50%;
opacity: 1;
}
span.swiper-pagination-bullet-active {
background: #b0b0b0;
}
}
}
.trend-topic-swiper {
height: 534px;
overflow: hidden;
ul {
position: relative;
li {
float: left;
height: 534px;
.img-box {
margin: 0 auto;
width: 580px;
height: 360px;
line-height: 360px;
text-align: center;
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
}
.item-content {
margin: 20px 30px 0;
.title {
line-height: 52px;
font-size: 30px;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin: 16px 0 0;
line-height: 24px;
color: #afafaf;
font-size: 18px;
.time-icon {
margin-right: 8px;
font-size: 14px;
}
}
}
}
}
}
... ...
.trend-tops-wrapper {
width: 100%;
height: 645px;
}
.trend-tops-header {
position: relative;
width: 100%;
.trend-tops-title {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 34px;
color: #747474;
}
.more {
position: absolute;
right: 24px;
top: 20px;
}
}
.trend-tops-content {
width: 100%;
}
.main-tops-show {
display: block;
box-sizing: border-box;
width: 100%;
height: 404px;
border: 1px solid #000;
}
.tops-list {
width: 100%;
height: 385px;
.tops-left {
box-sizing: border-box;
float: left;
width: 252px;
height: 100%;
border-right: 1px solid #000;
}
.tops-right {
float: left;
width: 385px;
height: 100%;
}
}
.tops-right-toslist {
width: 100%;
.tops-right-tositem {
box-sizing: border-box;
float: left;
width: 50%;
height: 196px;
border: 1px solid #000;
}
}
.recommed-title {
margin-top: 55px;
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 35px;
}
.recommed-imgwrapper {
display: block;
margin-top: 24px;
width: 100%;
height: 184px;
text-align: center;
img {
width: 169px;
height: 100%;
border: 1px solid #000;
}
}
.recommed-productname {
display: block;
margin-top: 20px;
width: 100%;
height: 20px;
line-height: (20px) auto;
text-align: center;
}
.tops-right-imgwrapper {
display: block;
width: 100%;
height: 145px;
text-align: center;
img {
width: 130px;
height: 100%;
border: 1px solid #000;
}
}
.tops-right-productname {
display: block;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
}
... ...
.trend-coll-wrapper {
background: #fff;
height: 645px;
border-bottom: 1px solid #e0e0e0;
}
.trend-coll-header {
position: relative;
widows: 100%;
.trend-coll-title {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 34px;
color: #747474;
}
.more {
position: absolute;
right: 24px;
top: 20px;
}
}
.trend-coll-content {
padding: 0 0 0 15px;
.lspan {
float: left;
margin: 0 15px;
}
.rspan {
float: left;
margin: 0 15px;
}
}
.lspanimg {
display: block;
float: right;
width: 275px;
height: 275px;
}
.rspanimg {
display: block;
float: right;
width: 275px;
height: 275px;
}
.trend-coll-tail {
box-sizing: border-box;
width: 100%;
height: 267px;
clear: both;
}
.recommend-title {
widows: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 34px;
}
.recommend-swiper {
width: 100%;
height: 140px;
overflow: hidden;
}
.recommend-list {
position: relative;
height: 100%;
}
.recommend-list .recommend-item {
float: left;
padding-left: 5%;
width: 21.875%;
height: 140px;
a {
display: block;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
... ...
.two-column-goods {
margin: 30px 0 0;
padding: 36px 0 0;
background: #fff;
border-top: 1px solid #e0e0e0;
.column-nav {
padding: 0 0 30px;
line-height: 32px;
font-size: 28px;
border-bottom: 1px solid #f1f1f1;
li {
float: left;
width: 319px;
text-align: center;
color: #aaa;
}
li.current {
color: #000;
}
li:first-child {
border-right: 1px solid #e6e6e6;
}
}
.goods-list {
padding-left: 15px;
}
}
... ...
... ... @@ -182,8 +182,8 @@ a {
@import "index/index";
@import "passport/index";
@import "guang/index";
/*
@import "home/index";
/*
@import "category/index";
@import "me/index";
... ...