fe / yohobuy-node · Commits

Go to a project

Authored by liangxs
Commit fa165872cbecaba0b4d15b358226f7ef47d5fcde 1 parent 31b5042a

最新上架页面

Inline Side-by-side
Showing 19 changed files with 2271 additions and 5 deletions
... ... @@ -12,6 +12,7 @@ var app = express();
// set view engin
var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
var partials = path.join(__dirname, './views'); // parent view root
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
... ... @@ -23,7 +24,7 @@ app.engine('.hbs', hbs({
extname: '.hbs',
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: ['./views/partial', `${doraemon}/partial`],
partialsDir: [`${partials}/partials`, `${doraemon}/partial`],
helpers: 'helpers'
}));
... ...
this is boys
<div class="home-page yoho-page boys" data-page="boys">
{{> commodity}}
</div>
<script>__custom = {"yopid":"index"};</script>
... ...
<div class="commodity clearfix" id="newarrivals">
{{> floor-header}}
<div class="goods-container clearfix">
</div>
<div class="loading">
<a href="{{href}}" target= "_blank">Loading...</a>
</div>
</div>
... ...
<div class="floor-header clearfix">
<h2 class="floor-title">{{name}}</h2>
<ul class="header-navs">
<li data-classify="s">
<a target="_blank" href="">sss</a>
</li>
</ul>
</div>
... ...
... ... @@ -218,9 +218,9 @@ a {
left: 0;
}
@define-mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
@define-mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
... ... @@ -230,3 +230,4 @@ a {
@import "404";
/* 模块 */
@import "index/index";
... ...
.brands {
/* 路径导航样式重置 */
.path-nav {
border-bottom: none;
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 20px;
}
.brands-tabs {
position: relative;
a {
display: block;
img {
width: 100%;
height: 100%;
display: block;
}
}
li {
float: left;
p {
display: block;
font-size: 30px;
text-align: center;
color: #dedede;
position: absolute;
top: 50%;
width: 100%;
margin-top: -15px;
z-index: 3;
}
.g-mask {
opacity: 0.4;
}
&:hover .g-mask,
.g-mask-on {
opacity: 0;
}
}
.hover-contain {
position: relative;
border-bottom: 1px solid #dfdfdf;
.hoverarr {
background-color: #3d3d3d;
position: absolute;
bottom: 0;
z-index: 10;
i {
width: 0;
height: 0;
position: absolute;
left: 50%;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3d3d3d;
top: -6px;
margin-left: -3px;
}
}
}
}
.header-navs {
margin-right: -15px;
}
.category-nav {
border: 2px solid #222;
padding-left: 16px;
height: 44px;
line-height: 44px;
font-size: 12px;
font-weight: bold;
position: relative;
z-index: 100;
background-color: #fff;
span {
display: inline-block;
margin-right: 15px;
}
a {
display: inline-block;
padding: 0 7px;
text-align: center;
color: #222;
cursor: pointer;
}
}
.category-fix {
position: fixed;
top: 0;
z-index: 100;
margin-top: 0 !important;
}
.brands-list {
dl {
position: relative;
border-top: 1px dotted #999;
padding: 20px 0;
}
dt {
position: absolute;
width: 130px;
text-align: center;
font-weight: bold;
font-size: 16px;
text-align: center;
top: 50%;
margin-top: -9px;
}
dd {
margin-left: 130px;
li {
float: left;
display: block;
width: 170px;
height: 18px;
}
a {
color: #666;
line-height: 18px;
font-size: 12px;
position: relative;
}
span {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
&:hover {
text-decoration: underline;
}
}
.brands-dialog {
display: inline;
position: relative;
}
.hot {
font-weight: bold;
color: #222;
}
i {
position: relative;
top: -4px;
color: #e01;
font-size: 14px;
}
}
}
.brands-category {
width: 1150px;
}
.brands-tabs {
width: 100%;
li {
margin-left: 10px;
a {
position: relative;
width: 222px;
height: 180px;
}
}
li:first-child {
margin-left: 0;
}
.hover-contain {
height: 30px;
.hoverarr {
height: 5px;
width: 222px;
}
}
}
.brands-ad,
.brands-logo {
margin: 20px 0;
}
.brands-ad li {
float: left;
margin-left: 10px;
img {
display: block;
width: 280px;
height: 280px;
}
&:first-child {
margin-left: 0;
img {
width: 570px;
}
}
}
.brands-logo a {
float: left;
margin-left: 26px;
&:first-child {
margin-left: 0;
}
img {
display: block;
width: 91px;
height: 38px;
}
}
.list-floor {
width: 1160px;
}
.brandfloor {
.g-list {
margin-top: -32px;
}
li {
margin-right: 8px;
margin-top: 32px;
a {
width: 378px;
height: 250px;
}
}
}
.singlegoods {
.g-list {
margin-top: -10px;
}
li {
margin-right: 10px;
margin-top: 10px;
a {
width: 280px;
height: 374px;
}
}
.singlegoods-title {
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 18px;
text-align: center;
color: #fff;
}
}
}
.video {
.g-list {
margin-top: -10px;
}
li {
margin-right: 8px;
margin-top: 10px;
a {
width: 378px;
height: 242px;
}
}
.video-play {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -28px;
width: 60px;
height: 56px;
background-image: resolve(img/index/play.png);
}
.video-title {
position: absolute;
left: 0;
bottom: 0;
height: 32px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 32px;
text-align: center;
color: #fff;
}
}
}
.news {
margin-bottom: 40px;
.news-pic {
position: relative;
float: left;
width: 764px;
height: 436px;
.slide-container {
height: 100%;
li a {
height: 100%;
width: 764px;
}
.slide-wrapper {
height: 100%;
}
.slide-switch {
display: none;
}
.prev {
left: 0;
margin-left: 0;
}
.next {
right: 0;
margin-right: 0;
}
.slide-switch.show {
display: block;
}
}
.slide-tips {
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
background: #000;
opacity: 0.8;
p {
position: absolute;
left: 18px;
z-index: 2;
height: 30px;
font-size: 14px;
line-height: 30px;
color: #fff;
}
}
.slide-pagination {
right: 0;
left: auto;
bottom: 0;
.slide-shade {
opacity: 0;
background: none;
}
span {
margin-top: 3px;
}
}
}
.news-txt {
float: right;
padding: 20px 16px;
float: right;
border: 1px solid #000;
overflow: hidden;
ul {
height: 100%;
}
li {
position: relative;
display: block;
margin-bottom: 10px;
margin-left: 20px;
}
a {
font-size: 14px;
line-height: 27px;
cursor: pointer;
color: #010101;
display: block;
&:hover {
color: #fff;
background: #000;
padding-left: 12px;
transition: padding 0.4s;
}
}
i {
position: absolute;
top: 0;
left: -26px;
font-size: 22px;
}
}
.news-txt {
width: 342px;
height: 394px;
}
}
.ads {
margin: 40px 0;
li {
margin-right: 10px;
margin-bottom: 10px;
a {
width: 280px;
img {
height: 160px;
}
}
.name {
font-size: 14px;
}
.des {
font-size: 12px;
}
}
}
.brands-items {
margin: 25px auto;
.brands-item {
float: left;
padding: 15px 0;
width: 50%;
}
a.brands-pic {
float: left;
width: 280px;
height: 136px;
display: block;
img {
width: 100%;
height: 100%;
}
}
.brand-info {
float: right;
padding: 0 20px;
width: 255px;
color: #000;
h3 {
width: 100%;
font-size: 20px;
line-height: 1;
@mixin ellipsis;
}
.brand-desc {
padding: 12px 0;
height: 92px;
font-size: 14px;
line-height: 22px;
overflow: hidden;
}
}
}
.pagination {
margin: 40px 0 80px;
text-align: center;
a {
height: 24px;
padding: 0 9px;
line-height: 24px;
display: inline-block;
text-align: center;
margin-right: 8px;
color: #222;
font-size: 12px;
i {
position: relative;
top: -1px;
font-size: 10px;
transform: scale(0.8);
}
}
a.cur {
background: #222;
color: #fff;
}
}
}
.min-screen .brands {
.header-navs {
margin-right: -10px;
}
.sit-nav {
padding-top: 10px;
font-size: 12px;
.sep {
margin: 0 6px;
}
}
.brands-category {
width: 990px;
}
.brands-tabs {
li {
a {
width: 190px;
height: 154px;
}
}
.hover-contain {
height: 25px;
.hoverarr {
height: 4px;
width: 190px;
}
}
}
.brands-ad li {
img {
width: 240px;
height: 240px;
}
&:first-child img {
width: 490px;
}
}
.brands-logo a {
margin-left: 10px;
&:first-child {
margin-left: 0;
}
img {
width: 90px;
height: 37px;
}
}
.list-floor {
width: 1000px;
}
.brandfloor {
.g-list {
margin-top: -26px;
}
li {
margin-right: 9px;
margin-top: 26px;
a {
width: 324px;
height: 214px;
}
}
}
.singlegoods {
.g-list {
margin-top: -10px;
}
li {
margin-right: 10px;
margin-top: 10px;
a {
width: 240px;
height: 324px;
}
}
.singlegoods-title {
position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
line-height: 50px;
font-size: 18px;
text-align: center;
color: #fff;
}
}
}
.video {
.g-list {
margin-top: -10px;
}
li {
margin-right: 9px;
margin-top: 10px;
a {
width: 324px;
height: 206px;
}
}
.video-play {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -28px;
width: 60px;
height: 56px;
background-image: resolve(img/index/play.png);
}
.video-title {
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
p {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #fff;
}
}
}
.news {
.news-pic {
width: 660px;
height: 376px;
.slide-container {
height: 376px;
img {
height: 376px;
}
}
}
.news-txt {
width: 284px;
height: 334px;
li {
margin-bottom: 13px;
}
}
}
.ads {
margin-bottom: 30px;
li {
margin-right: 10px;
margin-bottom: 10px;
a {
width: 240px;
img {
height: 138px;
}
}
.name {
font-size: 14px;
}
.des {
font-size: 12px;
}
}
}
.brands-items {
a.brands-pic {
width: 240px;
height: 116px;
}
.brand-info {
width: 212px;
.brand-desc {
height: 72px;
}
}
}
}
.brands-layer {
position: absolute;
z-index: 100;
top: -83px;
left: 15px;
width: 325px;
height: 287px;
background: resolve(img/index/brands-layer.png) no-repeat;
font-weight: normal;
.layer-content {
padding: 20px 20px 20px 35px;
.title {
font-size: 24px;
line-height: 24px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc {
margin: 5px 0;
height: 72px;
overflow: hidden;
img {
width: 80px;
height: 50px;
margin: 3px 5px 0 0;
float: left;
}
.right {
width: 180px;
float: right;
font-size: 12px;
line-height: 150%;
max-height: 80px;
}
}
.featured {
font-size: 16px;
margin-right: -15px;
img {
height: 100px;
width: 80px;
float: left;
margin: 15px 15px 0 0;
}
}
}
}
.brands-layer-right {
background: resolve(img/index/brands-layer.png) no-repeat 0 -287px;
left: -325px;
top: -83px;
.layer-content {
padding: 20px 35px 20px 20px;
}
}
... ...
.coupon-page {
width: 1150px;
margin: 10px auto 0;
.slide-container {
position: relative;
}
.slide-wrapper {
position: relative;
height: 450px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover .slide-switch.show {
display: block;
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
a {
display: block;
height: 100%;
width: 1150px;
margin: 0 auto;
}
&:first-child {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
}
.slide-switch {
display: block;
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
opacity: 0.55;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
&.prev {
left: 50%;
margin-left: -575px;
}
&.next {
right: 50%;
margin-right: -575px;
}
&:hover {
opacity: 0.9;
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
.title {
width: 300px;
margin: 80px auto 40px;
text-align: center;
border: 1px solid #000;
height: 31px;
line-height: 31px;
position: relative;
span {
margin: 5px;
}
}
.coupon {
display: inline-block;
position: relative;
width: 282px;
height: 258px;
margin-right: 2px;
img {
width: 100%;
height: 100%;
}
.coupon-mask {
width: 100%;
height: 259px;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.info {
width: 78px;
height: 78px;
position: absolute;
right: 2px;
bottom: -1px;
> div {
width: 100%;
height: 38px;
font-size: 16px;
color: #fff;
text-align: center;
position: absolute;
top: 50%;
margin-top: -19px;
}
p {
margin-bottom: 5px;
}
.guang {
width: 50px;
height: 18px;
line-height: 18px;
font-size: 12px;
background-color: #fff;
color: #d0021b;
margin: 0 auto;
}
}
}
}
... ...
/* 公共样式 */
.g-list {
li {
float: left;
a {
position: relative;
display: block;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
}
}
.g-mask {
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
background: #000;
opacity: 0.5;
overflow: hidden;
transition: opacity 0.6s;
}
.g-title {
display: block;
text-align: center;
font-weight: bold;
line-height: 1.5;
width: 100%;
margin-top: 14px;
}
/* 热门推荐模板样式 */
.home-page {
.tpl-recommend {
width: 100%;
position: relative;
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
.tpl-body {
margin-bottom: 8px;
}
.tpl-nav {
float: left;
overflow: hidden;
.tpl-keywords {
margin-bottom: 8px;
}
.tpl-category {
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a {
float: left;
width: 50%;
text-align: center;
color: #000;
overflow: hidden;
}
}
}
.tpl-brands {
float: left;
overflow: hidden;
margin-left: 8px;
li {
margin-top: 8px;
}
}
.tpl-types {
float: left;
overflow: hidden;
margin-top: -8px;
width: 579px;
li {
float: left;
margin-left: 8px;
margin-top: 8px;
a {
width: 185px;
height: 248px;
}
}
}
.tpl-products {
overflow: hidden;
margin-left: -10px;
li {
float: left;
margin-left: 10px;
a {
width: 222px;
height: 298px;
}
}
}
.tpl-nav {
width: 185px;
.keywords0,
.keywords1,
.keywords2 {
margin-bottom: 10px;
height: 76px;
}
.keywords2 {
margin-bottom: 0;
}
.tpl-category {
height: 228px;
a {
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands {
width: 378px;
height: 512px;
li a {
height: 248px;
}
}
}
}
.min-screen .home-page .tpl-recommend {
.tpl-nav {
width: 158px;
.keywords0,
.keywords1,
.keywords2 {
margin-bottom: 8px;
height: 65px;
}
.keywords2 {
margin-bottom: 0;
}
.tpl-category {
height: 192px;
a {
height: 32px;
line-height: 32px;
font-size: 12px;
&:hover {
text-decoration: underline;
}
}
}
}
.tpl-brands {
width: 324px;
height: 432px;
li a {
height: 212px;
}
}
.tpl-types {
width: 498px;
li a {
width: 158px;
height: 212px;
}
}
.tpl-products li a {
width: 190px;
height: 254px;
}
}
/* 单品模板样式 */
.home-page {
.singlehot {
overflow: hidden;
margin-left: -8px;
li {
margin-left: 8px;
margin-bottom: 8px;
a {
width: 185px;
height: 248px;
}
}
.impo1,
.impo9 {
width: 378px;
}
}
.floor-ad a {
display: block;
height: 129px;
img {
display: block;
width: 100%;
height: 100%;
}
}
.goods-container {
margin-right: -10px;
width: inherit;
padding-top: 0;
.good-info {
margin-bottom: 0;
width: 280px;
height: 485px;
}
.good-detail-img {
height: 374px;
}
.good-detail-text {
text-align: center;
}
}
.adbanner {
margin-top: 12px;
a {
height: 150px;
}
}
}
.min-screen,
.home-page {
.singlehot {
li a {
width: 158px;
height: 212px;
}
.impo1,
.impo9 {
width: 323px;
}
}
.goods-container {
.good-info {
width: 240px;
height: 412px;
.good-detail-img {
height: 320px;
}
}
}
}
/* 人气单品 */
.home-page .commodity {
.commodity-list {
margin-left: -10px;
a {
height: 465px;
width: 280px;
}
li {
margin-left: 10px;
}
i {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #ffac5b;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 12px;
}
i.top {
position: absolute;
top: 10px;
right: 10px;
background-color: rgb(255, 87, 92);
color: #fff;
border-radius: 30px;
z-index: 2;
height: 60px;
width: 60px;
line-height: 60px;
font-size: 20px;
}
.commodity-img {
position: relative;
height: 374px;
}
p.commodity-name {
font-size: 12px;
color: #000;
text-align: center;
margin-top: 14px;
line-height: 18px;
}
p.commodity-price {
position: relative;
margin: 3px 0 0;
text-align: center;
line-height: 20px;
color: #000;
span {
display: inline-block;
font-size: 12px;
}
}
}
.commodity-brands {
margin-left: -8px;
a {
float: left;
margin-left: 8px;
display: block;
width: 185px;
height: 86px;
img {
width: 100%;
height: 100%;
}
}
}
.loading {
position: relative;
width: 100%;
text-align: center;
padding-top: 40px;
a {
display: block;
height: 35px;
width: 120px;
margin: 0 auto 40px;
background-color: #000;
color: #fff;
font-size: 14px;
line-height: 35px;
text-align: center;
}
}
}
.min-screen .home-page .commodity {
.commodity-list {
a {
height: 400px;
width: 240px;
}
.commodity-img {
height: 320px;
}
i.top {
height: 52px;
width: 52px;
line-height: 52px;
font-size: 14px;
}
}
.commodity-brands {
a {
width: 158px;
height: 74px;
}
}
}
/* 手风琴 */
.home-page {
.slide-accordion {
overflow: hidden;
position: relative;
height: 400px;
a {
position: relative;
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
ul {
position: absolute;
left: -5px;
}
li {
position: absolute;
border-left: 5px solid #fff;
a {
width: 650px;
height: 400px;
}
}
.g-mask {
opacity: 0.2;
&:hover {
opacity: 0;
}
}
}
}
.min-screen .home-page .slide-accordion {
height: 342px;
li a {
width: 558px;
height: 342px;
}
}
.boys {
.tpl-nav {
.keywords0 {
margin-bottom: 10px !important;
height: 152px !important;
}
.keywords1 {
height: 86px !important;
}
.tpl-category {
a {
height: 38px !important;
line-height: 38px !important;
font-size: 14px !important;
}
}
}
.tpl-brands {
margin-top: -8px !important;
}
}
.boys,
.lifestyle {
.goods-container {
.good-info {
width: 222px !important;
height: 408px !important;
.good-detail-img {
height: 298px !important;
}
}
}
}
.min-screen {
.boys {
.tpl-nav {
.keywords0 {
margin-bottom: 8px !important;
height: 130px !important;
}
.keywords1 {
margin-bottom: 0 !important;
height: 74px !important;
}
}
.tpl-brands {
margin-top: -8px !important;
}
}
.boys,
.lifestyle {
.goods-container {
.good-info {
width: 188px;
height: 360px;
.good-detail-img {
height: 255px;
}
}
}
}
}
... ...
.home-page {
width: 1150px;
margin: 10px auto 0;
.slide-container {
position: absolute;
left: 0;
right: 0;
height: 450px;
}
.slide-thumb-container {
height: 510px;
}
.slide-wrapper {
position: relative;
height: 450px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover .slide-switch.show {
display: block;
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
a {
display: block;
height: 100%;
width: 1150px;
margin: 0 auto;
}
&:first-child {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
}
.slide-container-placeholder {
height: 450px;
width: 100%;
}
.slide-thumb-container-placeholder {
height: 510px;
}
.slide-switch {
display: block;
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
opacity: 0.55;
&.prev {
left: 50%;
margin-left: -575px;
}
&.next {
right: 50%;
margin-right: -575px;
}
&:hover {
opacity: 0.9;
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
.thumb-pagination {
width: 1148px;
margin: 6px auto 0;
padding-left: 2px;
li {
position: relative;
float: left;
margin-left: 6px;
width: 138px;
height: 54px;
&:first-child {
margin: 0;
}
&.focus a {
opacity: 0;
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
opacity: 0.3;
}
img {
width: 100%;
height: 100%;
}
}
}
/* 大banner圆点 */
.slide-pagination {
font-size: 0;
.slide-shade {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
opacity: 0.3;
border-radius: 13px;
}
span {
position: relative;
display: inline-block;
margin: 0 7px;
width: 12px;
height: 12px;
background: #fff;
cursor: pointer;
opacity: 0.6;
border-radius: 6px;
z-index: 2;
&.focus {
opacity: 1;
}
}
}
.debris-slider {
height: 510px;
width: 100%;
.col {
float: left;
a {
display: block;
}
}
.left-col a,
.right-col a {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.right-col img,
.left-col img {
height: 100%;
width: 100%;
}
.left-col {
margin-right: 10px;
a {
width: 280px;
height: 120px;
}
a:first-child {
height: 250px;
}
}
.center-col {
position: relative;
width: 570px;
height: 100%;
margin-right: 10px;
font-size: 0;
&:hover {
.slide-switch.show {
display: block;
}
}
.slide-wrapper {
height: 100%;
a {
width: 100%;
}
}
.slide-switch {
a.prev {
left: 0;
margin-left: 0;
}
a.next {
right: 0;
margin-right: 0;
}
}
img {
max-width: 100%;
max-height: 100%;
}
}
.right-col a {
width: 280px;
height: 120px;
}
.right-col a:first-child {
height: 380px;
margin-bottom: 11px;
}
}
.new-report {
img {
display: block;
width: 100%;
height: 100%;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
}
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
/* 优选品牌 */
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 1158px;
}
.preference-brand-item {
float: left;
margin-right: 8px;
margin-bottom: 8px;
a {
display: table-cell;
width: 185px;
height: 86px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 185px;
height: 86px;
line-height: 100px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 558px;
background: #8ae6e0;
overflow: hidden;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
box-sizing: border-box;
margin: 86px auto 0;
width: 982px;
height: 433px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 320px;
height: 100%;
margin-right: 10px;
img {
width: 100%;
height: 100%;
}
}
}
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 378px;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
opacity: 0.55;
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
opacity: 0.9;
}
}
}
}
.logo-brand {
width: 100%;
height: 282px;
overflow: hidden;
&.logos-10 {
height: 188px;
}
ul {
width: 1158px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 185px;
height: 86px;
line-height: 86px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: resolve(img/index/logo-brand-line.png) no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin-left: -48px;
}
&.next {
bottom: 12px;
margin-left: 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
.categorys-list {
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
&.cate-item0 {
width: 185px;
height: 504px;
}
&.cate-item1 {
width: 377px;
height: 504px;
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
.floor-header {
position: relative;
margin: 80px 0 40px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 15px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
}
@import "index-pliffy";
@import "min-index";
@import "brand";
@import "coupon";
... ...
/* 首页990 */
.min-screen .home-page {
width: 990px;
/* 大banner */
.slide-container {
height: 387px;
img {
display: block;
}
}
.slide-thumb-container {
height: 440px;
}
.slide-container-placeholder {
height: 387px;
}
.slide-thumb-container-placeholder {
height: 440px;
}
/* 大banner大图 */
.slide-wrapper {
height: 387px;
li {
a {
width: 990px;
}
}
}
/* 大图上的左右切换按钮 */
.slide-switch {
display: block;
a {
&.prev {
margin-left: -495px;
}
&.next {
margin-right: -495px;
}
&:hover {
opacity: 0.9;
}
}
}
/* 大banner缩略图 */
.thumb-pagination {
width: 990px;
margin: 7px auto 0;
padding: 0;
li {
width: 118px;
height: 46px;
}
}
/* 女首碎片banner */
.debris-slider {
height: 440px;
.left-col {
margin-right: 9px;
a {
width: 240px;
height: 103px;
}
a:first-child {
height: 214px;
}
}
.center-col {
width: 492px;
margin-right: 9px;
}
.right-col a {
width: 240px;
height: 103px;
}
.right-col a:first-child {
height: 326px;
margin-bottom: 10px;
}
}
/* 男首最新速报 */
.new-report {
.report-list {
width: 748px;
li {
width: 158px;
height: 212px;
&:first-child {
width: 242px;
height: 432px;
}
}
}
.last-item {
width: 242px;
height: 432px;
}
}
/* 优选品牌 */
.preference-brand-list {
width: 998px;
}
.preference-brand-item {
margin-right: 7px;
a {
width: 159px;
height: 74px;
}
}
.preference-more {
width: 159px;
height: 74px;
line-height: 90px;
}
.img-slider-wrapper {
height: 480px;
}
.img-container-landscape {
margin: 73px auto 0;
width: 844px;
height: 370px;
.img-item {
width: 275px;
height: 100%;
margin-right: 9px;
}
}
/* 男首优选品牌 图片品牌 */
.img-brand {
height: 150px;
ul {
width: 998px;
}
li {
width: 325px;
height: 150px;
line-height: 150px;
}
}
/* 男首优选品牌 logo品牌 */
.logo-brand {
height: 246px;
&.logos-10 {
height: 164px;
}
ul {
width: 998px;
}
li {
margin: 8px 8px 0 0;
width: 158px;
height: 74px;
line-height: 74px;
}
.logo-brand-switch {
.iconfont {
font-size: 24px;
&.prev {
top: -12px;
}
&.next {
bottom: -12px;
}
}
}
}
/* 创意生活商品分类 */
.categorys-list {
ul {
width: 1004px;
}
li {
margin: 0 7px 7px 0;
width: 161px;
height: 214px;
&.cate-item0 {
width: 160px;
height: 435px;
}
&.cate-item1 {
width: 326px;
height: 435px;
}
}
}
.floor-header {
margin: 50px 0 30px;
.header-navs {
li {
padding: 1px 10px;
}
}
}
}
... ...