Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOBUYWAP
·
Commits
Go to a project
GitLab
Go to group
Project
Activity
Files
Commits
Pipelines
0
Builds
0
Graphs
Milestones
Issues
0
Merge Requests
0
Members
Labels
Wiki
Forks
Network
Create a new issue
Download as
Plain Diff
Browse Files
Authored by
毕凯
9 years ago
Commit
ab999f2e883fdde745bfa6530939bf5b3ea32d92
2 parents
cd180796
1a21e5bd
Merge branch 'develop' of
http://git.dev.yoho.cn/web/yohobuy
into develop
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
448 additions
and
430 deletions
web-static/sass/home/_index.scss
web-static/sass/home/_index1150.scss
web-static/sass/product/_hot-rank.scss
web-static/sass/home/_index.scss
View file @
ab999f2
/*男首1150 女首/儿童/创意生活990*/
/*首页990*/
.min-screen
{
.home-page
{
width
:
990px
;
margin
:
10px
auto
0
;
// overflow: hidden;
/*大banner*/
.slide-container
{
position
:
absolute
;
left
:
0
;
right
:
0
;
height
:
387px
;
&
.slide-thumb-container
{
...
...
@@ -22,7 +19,6 @@
.slide-container-placeholder
{
height
:
387px
;
width
:
100%
;
&
.slide-thumb-container-placeholder
{
height
:
440px
;
...
...
@@ -31,43 +27,11 @@
/*大banner大图*/
.slide-wrapper
{
position
:
relative
;
height
:
387px
;
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
:
990px
;
margin
:
0
auto
;
}
&
:first-child
{
display
:
block
;
}
img
{
width
:
100%
;
height
:
100%
;
}
}
}
...
...
@@ -80,35 +44,17 @@
@include transition-duration(.2s);
@include transition-timing-function(ease-in); */
a
{
position
:
absolute
;
top
:
50%
;
margin
:
-30px
0
0
;
width
:
60px
;
height
:
60px
;
line-height
:
56px
;
text-align
:
center
;
z-index
:
2
;
background
:
#fff
;
@include
opacity
(
0
.55
);
&
.prev
{
left
:
50%
;
margin-left
:
-495px
;
}
&
.next
{
right
:
50%
;
margin-right
:
-495px
;
}
&
:hover
{
@include
opacity
(
0
.9
);
}
.iconfont
{
font-size
:
32px
;
color
:
#59585a
;
}
}
}
...
...
@@ -116,109 +62,19 @@
.thumb-pagination
{
width
:
990px
;
margin
:
7px
auto
0
;
padding
:
0
;
li
{
position
:
relative
;
float
:
left
;
margin
:
0
0
0
6px
;
width
:
118px
;
height
:
46px
;
&
:first-child
{
margin
:
0
;
}
&
.focus
{
a
{
@include
opacity
(
0
);
}
}
a
{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
0
;
top
:
0
;
background
:
#000
;
@include
opacity
(
0
.3
);
}
img
{
width
:
100%
;
height
:
100%
;
}
}
}
/*大banner圆点*/
.slide-pagination
{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
12px
;
text-align
:
center
;
font-size
:
0
;
.slide-pagination-inner
{
position
:
relative
;
padding
:
7px
;
@include
inline-block
;
}
.slide-shade
{
position
:
absolute
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
background
:
#000
;
@include
opacity
(
0
.3
);
@include
border-radius
(
13px
);
}
span
{
position
:
relative
;
@include
inline-block
;
margin
:
0
7px
;
width
:
12px
;
height
:
12px
;
background
:
#fff
;
cursor
:
pointer
;
@include
opacity
(
0
.6
);
@include
border-radius
(
6px
);
z-index
:
2
;
&
.focus
{
@include
opacity
(
1
);
}
}
}
/*女首碎片banner*/
.debris-slider
{
height
:
440px
;
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
:
9px
;
...
...
@@ -234,43 +90,8 @@
}
.center-col
{
position
:
relative
;
width
:
492px
;
height
:
100%
;
margin-right
:
9px
;
font-size
:
0
;
&
:hover
{
.slide-switch.show
{
display
:
block
;
}
}
.slide-wrapper
{
height
:
100%
;
li
{
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
{
...
...
@@ -280,28 +101,18 @@
.right-col
a
:first-child
{
height
:
326px
;
margin-bottom
:
1
1
px
;
margin-bottom
:
1
0
px
;
}
}
/*男首最新速报*/
.new-report
{
img
{
display
:
block
;
width
:
100%
;
height
:
100%
;
}
.report-list
{
float
:
left
;
width
:
748px
;
li
{
float
:
left
;
margin
:
0
8px
8px
0
;
width
:
158px
;
height
:
212px
;
overflow
:
hidden
;
&
:first-child
{
margin-right
:
7px
;
width
:
242px
;
height
:
432px
;
}
...
...
@@ -310,163 +121,57 @@
}
.last-item
{
float
:
left
;
width
:
242px
;
height
:
432px
;
overflow
:
hidden
;
}
}
/*优选品牌*/
.preference-brand
{
overflow
:
hidden
;
}
.preference-brand-list
{
margin-top
:
8px
;
width
:
998px
;
}
.preference-brand-item
{
float
:
left
;
margin-right
:
7px
;
margin-bottom
:
8px
;
a
{
display
:
table-cell
;
width
:
159px
;
height
:
74px
;
text-align
:
center
;
vertical-align
:
middle
;
}
img
{
display
:
block
;
max-width
:
100%
;
max-height
:
100%
;
margin
:
0
auto
;
}
}
.preference-more
{
float
:
left
;
width
:
159px
;
height
:
74px
;
line-height
:
90px
;
text-align
:
center
;
color
:
black
;
font-size
:
16px
;
}
.img-slider-wrapper
{
position
:
relative
;
width
:
100%
;
height
:
480px
;
background
:
#8ae6e0
;
.img-brand-switch
{
display
:
block
;
a
{
position
:
absolute
;
top
:
50%
;
font-size
:
36px
;
color
:
#fff
;
&
.next
{
right
:
30px
;
}
&
.prev
{
left
:
30px
;
}
}
}
}
.img-container-landscape
{
margin
:
73px
auto
0
;
box-sizing
:
border-box
;
width
:
844px
;
height
:
370px
;
overflow
:
hidden
;
.img-list
{
width
:
1000px
;
height
:
100%
;
}
.img-item
{
float
:
left
;
box-sizing
:
border-box
;
width
:
275px
;
height
:
100%
;
margin-right
:
9px
;
img
{
width
:
100%
;
height
:
100%
;
}
}
}
/*男首优选品牌 图片品牌*/
.img-brand
{
position
:
relative
;
width
:
100%
;
height
:
150px
;
overflow
:
hidden
;
&
:hover
{
.img-brand-switch
{
display
:
block
;
}
}
ul
{
width
:
998px
;
}
li
{
float
:
left
;
margin
:
0
8px
0
0
;
width
:
325px
;
height
:
150px
;
line-height
:
150px
;
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
;
@include
opacity
(
0
.55
);
&
.prev
{
left
:
0
;
}
&
.next
{
right
:
0
;
}
&
:hover
{
@include
opacity
(
0
.9
);
}
}
}
}
...
...
@@ -474,9 +179,7 @@
/*男首优选品牌 logo品牌*/
.logo-brand
{
width
:
100%
;
height
:
246px
;
overflow
:
hidden
;
&
.logos-10
{
height
:
164px
;
...
...
@@ -486,44 +189,10 @@
width
:
998px
;
}
li
{
float
:
left
;
margin
:
8px
8px
0
0
;
width
:
158px
;
height
:
74px
;
line-height
:
74px
;
font-size
:
0
;
text-align
:
center
;
img
{
max-width
:
100%
;
max-height
:
100%
;
vertical-align
:
middle
;
}
}
.logo-brand-switch
{
position
:
relative
;
background
:
image-url
(
'index/logo-brand-line.png'
)
no-repeat
center
center
;
line-height
:
normal
;
.iconfont
{
position
:
absolute
;
left
:
50%
;
font-size
:
32px
;
&
.prev
{
top
:
10px
;
margin
:
0
0
0
-48px
;
}
&
.next
{
bottom
:
12px
;
margin
:
0
0
0
20px
;
}
}
}
.brand-more
{
font-size
:
16px
;
&
:hover
{
text-decoration
:
underline
;
}
}
}
...
...
@@ -533,7 +202,6 @@
width
:
1004px
;
}
li
{
float
:
left
;
margin
:
0
7px
7px
0
;
width
:
161px
;
height
:
214px
;
...
...
@@ -546,58 +214,22 @@
width
:
326px
;
height
:
435px
;
}
img
{
display
:
block
;
width
:
100%
;
height
:
100%
;
}
}
}
.floor-header
{
position
:
relative
;
margin
:
50px
0
30px
;
.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
10px
;
border-left
:
1px
solid
#ccc
;
&
:first-child
{
border-left
:
none
;
}
&
:hover
{
text-decoration
:
underline
;
}
a
{
color
:
#333
;
}
}
}
}
}
}
}
@import
"index1150"
,
"_index-pliffy"
;
...
...
web-static/sass/home/_index1150.scss
View file @
ab999f2
@media
screen
and
(
min-width
:
1150px
)
{
.home-page
{
width
:
1150px
;
margin
:
10px
auto
0
;
.slide-container
{
position
:
absolute
;
left
:
0
;
right
:
0
;
height
:
450px
;
&
.slide-thumb-container
{
...
...
@@ -13,17 +15,50 @@
.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
;
...
...
@@ -33,14 +68,38 @@
.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
;
@include
opacity
(
0
.55
);
&
.prev
{
left
:
50%
;
margin-left
:
-575px
;
}
&
.next
{
right
:
50%
;
margin-right
:
-575px
;
}
&
:hover
{
@include
opacity
(
0
.9
);
}
.iconfont
{
font-size
:
32px
;
color
:
#59585a
;
}
}
}
...
...
@@ -50,14 +109,108 @@
padding
:
0
0
0
2px
;
li
{
position
:
relative
;
float
:
left
;
margin
:
0
0
0
6px
;
width
:
138px
;
height
:
54px
;
&
:first-child
{
margin
:
0
;
}
&
.focus
{
a
{
@include
opacity
(
0
);
}
}
a
{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
0
;
top
:
0
;
background
:
#000
;
@include
opacity
(
0
.3
);
}
img
{
width
:
100%
;
height
:
100%
;
}
}
}
/*大banner圆点*/
.slide-pagination
{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
12px
;
text-align
:
center
;
font-size
:
0
;
.slide-pagination-inner
{
position
:
relative
;
padding
:
7px
;
@include
inline-block
;
}
.slide-shade
{
position
:
absolute
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
background
:
#000
;
@include
opacity
(
0
.3
);
@include
border-radius
(
13px
);
}
span
{
position
:
relative
;
@include
inline-block
;
margin
:
0
7px
;
width
:
12px
;
height
:
12px
;
background
:
#fff
;
cursor
:
pointer
;
@include
opacity
(
0
.6
);
@include
border-radius
(
6px
);
z-index
:
2
;
&
.focus
{
@include
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
;
...
...
@@ -72,31 +225,74 @@
}
.center-col
{
position
:
relative
;
width
:
570px
;
height
:
100%
;
margin-right
:
10px
;
}
font-size
:
0
;
.right-col
{
a
{
width
:
280px
;
height
:
120px
;
&
:hover
{
.slide-switch.show
{
display
:
block
;
}
}
.slide-wrapper
{
height
:
100%
;
a
:first-child
{
height
:
380px
;
li
{
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
{
width
:
282px
;
margin-right
:
7px
;
width
:
282px
;
height
:
504px
;
}
...
...
@@ -104,60 +300,173 @@
}
.last-item
{
float
:
left
;
width
:
282px
;
height
:
504px
;
overflow
:
hidden
;
}
}
.img-slider-wrapper
{
height
:
558px
;
}
.img-container-landscape
{
margin
:
86px
auto
0
;
width
:
982px
;
height
:
433px
;
.img-item
{
width
:
320px
;
margin-right
:
10px
;
}
/*优选品牌*/
.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
;
.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
;
@include
opacity
(
0
.55
);
&
.prev
{
left
:
0
;
}
&
.next
{
right
:
0
;
}
&
:hover
{
@include
opacity
(
0
.9
);
}
}
}
}
/*男首优选品牌 logo品牌*/
.logo-brand
{
width
:
100%
;
height
:
282px
;
overflow
:
hidden
;
&
.logos-10
{
height
:
188px
;
...
...
@@ -167,16 +476,54 @@
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
:
image-url
(
'index/logo-brand-line.png'
)
no-repeat
center
center
;
line-height
:
normal
;
.iconfont
{
position
:
absolute
;
left
:
50%
;
font-size
:
32px
;
&
.prev
{
top
:
10px
;
margin
:
0
0
0
-48px
;
}
&
.next
{
bottom
:
12px
;
margin
:
0
0
0
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
;
...
...
@@ -189,16 +536,52 @@
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
;
}
}
}
}
}
}
\ No newline at end of file
...
...
web-static/sass/product/_hot-rank.scss
View file @
ab999f2
.hotrank-page
{
width
:
99
0px
;
width
:
115
0px
;
margin
:
0
auto
;
.popular-list
{
width
:
1160px
;
li
{
position
:
relative
;
float
:
left
;
width
:
324px
;
height
:
521px
;
width
:
378px
;
height
:
596px
;
overflow
:
hidden
;
list-style
:
none
;
margin
:
0
8px
0
0
;
.item-img
{
width
:
100%
;
height
:
434px
;
line-height
:
434px
;
height
:
506px
;
line-height
:
506px
;
text-align
:
center
;
overflow
:
hidden
;
}
...
...
@@ -82,14 +84,14 @@
.popular-item7
,
.popular-item8
,
.popular-item9
{
width
:
240px
;
height
:
408px
;
width
:
280px
;
height
:
464px
;
margin
:
0
10px
0
0
;
overflow
:
hidden
;
.item-img
{
height
:
320px
;
line-height
:
320px
;
height
:
374px
;
line-height
:
374px
;
}
}
...
...
@@ -116,7 +118,6 @@
padding
:
0
26px
;
font-size
:
14px
;
color
:
#777
;
line-height
:
20px
;
border-left
:
1px
solid
#999
;
}
}
...
...
@@ -135,21 +136,23 @@
}
}
.hot-week-list
{
width
:
1160px
;
.good-info
{
width
:
240px
;
height
:
408px
;
width
:
280px
;
height
:
464px
;
margin
:
10px
10px
0
0
;
.tag-container
{
display
:
none
;
}
.good-detail-img
{
height
:
320px
;
line-height
:
320px
;
.good-detail-img
{
height
:
374px
;
line-height
:
374px
;
text-align
:
center
;
font-size
:
0
;
...
...
@@ -243,17 +246,17 @@
}
}
@media
screen
and
(
min-width
:
1150px
)
{
.min-screen
{
.hotrank-page
{
width
:
115
0px
;
width
:
99
0px
;
.popular-list
{
li
{
width
:
378px
;
height
:
596px
;
width
:
324px
;
height
:
521px
;
.item-img
{
height
:
506px
;
line-height
:
506px
;
height
:
434px
;
line-height
:
434px
;
}
}
...
...
@@ -261,12 +264,12 @@
.popular-item7
,
.popular-item8
,
.popular-item9
{
width
:
280px
;
height
:
464px
;
width
:
240px
;
height
:
408px
;
.item-img
{
height
:
374px
;
line-height
:
374px
;
height
:
320px
;
line-height
:
320px
;
}
}
...
...
@@ -274,12 +277,12 @@
.hot-week-list
{
.good-info
{
width
:
280px
;
height
:
464px
;
width
:
240px
;
height
:
408px
;
.good-detail-img
{
height
:
374px
;
line-height
:
374px
;
height
:
320px
;
line-height
:
320px
;
}
}
}
...
...
Please
register
or
login
to post a comment