Toggle navigation
Toggle navigation
This project
Loading...
Sign in
chenchao
/
YOHOBUYPC
·
Commits
Go to a project
GitLab
Go to dashboard
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
Email Patches
Plain Diff
Browse Files
Authored by
weiqingting
9 years ago
Commit
9f4ab7a8619f18a870fe8c1075eaaec70facc58f
1 parent
29fdd709
兼容990
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
402 additions
and
279 deletions
template/www.yohobuy.com/actions/index/boys/index.phtml
template/www.yohobuy.com/partials/index/slide-accordion.phtml
web-static/js/common/accordion.js
web-static/sass/home/_index-pliffy.scss
web-static/sass/home/_index.scss
web-static/sass/home/_slide-accordion.scss
template/www.yohobuy.com/actions/index/boys/index.phtml
View file @
9f4ab7a
...
...
@@ -70,7 +70,7 @@
{
{!
广告
}
}
{
{#
adbanner
}
}
<div
class=
"adbanner"
>
<a
class=
"impo{{@index}}"
href=
"{{url}}"
><img
class=
"lazy"
data-original=
"{{img}}"
/></a>
<a
href=
"{{url}}"
><img
class=
"lazy"
data-original=
"{{img}}"
/></a>
</div>
{
{/
adbanner
}
}
...
...
template/www.yohobuy.com/partials/index/slide-accordion.phtml
View file @
9f4ab7a
{
{>
index/floor-header
}
}
<div
class=
"slide-accordion"
>
<div
class=
"slide-list"
>
<ul>
{
{#each
slide
}
}
<li><a
title=
"{{name}}"
href=
"{{href}}"
><img
class=
"lazy"
data-original=
"{{img}}"
/></a></li>
{
{/each
}
}
</ul>
</div>
<div
class=
"slide-accordion clearfix"
>
<ul>
{
{#each
slide
}
}
<li><a
title=
"{{name}}"
href=
"{{href}}"
><img
class=
"lazy"
data-original=
"{{img}}"
/></a></li>
{
{/each
}
}
</ul>
</div>
...
...
web-static/js/common/accordion.js
View file @
9f4ab7a
var
Slide
=
require
(
'./yohoui/YH.slide'
);
var
$
=
require
(
'yoho.jquery'
);
var
$contain
=
$
(
'.slide-
list'
,
'.slide-
accordion'
);
var
$contain
=
$
(
'.slide-accordion'
);
var
$item
=
$contain
.
find
(
'li'
);
var
$width
=
650
;
var
$width
=
$item
.
width
();
var
$spn
=
parseInt
(
$
(
'.home-page'
).
width
())
==
1150
?
(
120
+
5
)
:
(
102
+
5
);
var
slide
;
function
switchfun
(
to
)
{
$item
.
each
(
function
(
index
)
{
if
(
index
<=
to
)
{
$
(
this
).
stop
().
animate
({
left
:
index
*
(
120
+
5
)
left
:
index
*
$spn
});
}
else
{
$
(
this
).
stop
().
animate
({
left
:
(
to
)
*
(
120
+
5
)
+
$width
+
(
120
+
5
)
*
(
index
-
to
-
1
)
left
:
(
to
)
*
$spn
+
$width
+
$spn
*
(
index
-
to
-
1
)
});
}
});
...
...
web-static/sass/home/_index-pliffy.scss
View file @
9f4ab7a
.girls
,
.kids
,
.lifestyle
{
.commodity
{
.commodity-list
{
li
{
width
:
280px
;
/**
* 热门推荐模板样式
*/
.home-page
{
//common样式
.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
;
}
.tpl-category
{
padding
:
10px
0
;
background-color
:
#f8f8f8
;
overflow
:
hidden
;
a
{
display
:
block
;
width
:
280px
;
height
:
465px
;
position
:
relative
;
}
i
{
position
:
absolute
;
bottom
:
0
;
width
:
100%
;
height
:
20px
;
background
:
#ffac5b
;
color
:
#fff
;
line-height
:
20px
;
float
:
left
;
width
:
50%
;
text-align
:
center
;
font-size
:
12px
;
color
:
#000
;
overflow
:
hidden
;
}
i
.top
{
position
:
absolute
;
width
:
60px
;
height
:
60px
;
top
:
10px
;
right
:
10px
;
line-height
:
60px
;
background-color
:
rgb
(
255
,
87
,
92
);
font-size
:
20px
;
color
:
#fff
;
border-radius
:
30px
;
}
.commodity-img
{
img
{
width
:
280px
;
height
:
374px
;
}
}
}
.tpl-brands
{
float
:
left
;
overflow
:
hidden
;
margin-left
:
8px
;
li
{
margin-top
:
8px
;
}
}
.tpl-types
{
float
:
left
;
overflow
:
hidden
;
margin-top
:
-8px
;
li
{
float
:
left
;
margin-left
:
8px
;
margin-top
:
8px
;
}
}
.tpl-products
{
overflow
:
hidden
;
margin-left
:
-10px
;
li
{
float
:
left
;
margin-left
:
10px
;
}
}
//990样式
.tpl-nav
{
width
:
158px
;
.keywords0
,
.keywords1
,
.keywords2
{
margin-bottom
:
8px
;
height
:
65px
;
}
.keywords2
{
margin-bottom
:
0px
;
}
.tpl-category
{
a
{
height
:
32px
;
line-height
:
32px
;
font-size
:
12px
;
}
}
}
.tpl-brands
{
width
:
324px
;
li
a
{
height
:
212px
;
}
}
.tpl-types
{
width
:
498px
;
li
a
{
width
:
158px
;
height
:
212px
;
}
}
.tpl-products
{
li
a
{
width
:
190px
;
height
:
254px
;
}
}
}
}
.boys
{
.commodity-list
i
{
/**
* 单品模板样式
*/
.home-page
{
.singlehot
{
a
{
display
:
block
;
img
{
display
:
block
;
width
:
100%
;
height
:
100%
;}
}
overflow
:
hidden
;
margin-left
:
-8px
;
li
{
float
:
left
;
margin-left
:
8px
;
margin-bottom
:
8px
;
}
}
.singlehot
{
li
a
{
width
:
158px
;
height
:
212px
;
}
.impo1
,
.impo9
{
width
:
323px
;
}
}
.adbanner
{
a
{
display
:
block
;
img
{
display
:
block
;
width
:
100%
;
height
:
100%
;}
}
a
{
height
:
129px
;
}
}
}
/**
* 新品上架模板样式
*/
.home-page
{
.commodity
{
a
{
display
:
block
;
img
{
display
:
block
;
width
:
100%
;
height
:
100%
;}
}
.commodity-list
{
margin-left
:
-10px
;
li
{
float
:
left
;
margin-left
:
10px
;
}
i
{
position
:
absolute
;
top
:
-20px
;
display
:
block
;
width
:
64px
;
bottom
:
0
;
width
:
100%
;
height
:
20px
;
background
:
#ffac5b
;
color
:
#fff
;
line-height
:
20px
;
text-align
:
center
;
font-size
:
12px
;
}
.tpl-keywords
{
.keywords0
{
img
{
height
:
152px
;
i
.top
{
position
:
absolute
;
top
:
10px
;
right
:
10px
;
background-color
:
rgb
(
255
,
87
,
92
);
color
:
#fff
;
border-radius
:
30px
;
}
.commodity-img
{
position
:
relative
;
}
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
0
;
text-align
:
center
;
line-height
:
20px
;
color
:
#000
;
span
{
display
:
inline-block
;
font-size
:
12px
;
}
}
margin-bottom
:
10px
;
}
.keywords1
{
img
{
height
:
86px
;
.commodity-brands
{
margin-left
:
-8px
;
a
{
float
:
left
;
margin-left
:
8px
;
display
:
block
;
}
}
.loading
{
position
:
relative
;
width
:
100%
;
text-align
:
center
;
font-size
:
16px
;
top
:
-20px
;
}
}
//990
.commodity
{
.commodity-list
{
a
{
height
:
400px
;
}
.commodity-img
{
width
:
240px
;
height
:
320px
;
}
i
.top
{
height
:
52px
;
width
:
52px
;
line-height
:
52px
;
font-size
:
14px
;
}
}
.commodity-brands
{
a
{
width
:
158px
;
height
:
74px
;
}
}
}
}
.girls
{
.tpl-keywords
{
img
{
height
:
76px
!
important
;
.home-page
{
.slide-accordion
{
overflow
:
hidden
;
height
:
342px
;
position
:
relative
;
a
{
display
:
block
;
img
{
display
:
block
;
width
:
100%
;
height
:
100%
;}
}
ul
{
position
:
absolute
;
left
:
-5px
;
}
li
{
position
:
absolute
;
a
{
width
:
558px
;
height
:
342px
;
border-left
:
5px
solid
#fff
;
}
}
}
}
.boys
{
.tpl-nav
{
.keywords0
{
margin-bottom
:
10px
;
margin-bottom
:
8px
!
important
;
height
:
130px
!
important
;
}
.keywords1
{
margin-bottom
:
10px
;
margin-bottom
:
0px
!
important
;
height
:
74px
!
important
;
}
}
.tpl-brands
img
{
height
:
502px
!
important
;
width
:
100%
!
important
;
.tpl-brands
{
margin-top
:
-8px
!
important
;
}
.commodity
{
.commodity-list
{
a
{
height
:
360px
!
important
;
}
.commodity-img
{
width
:
188px
!
important
;
height
:
255px
!
important
;
}
i
.top
{
height
:
52px
!
important
;
width
:
52px
!
important
;
line-height
:
52px
!
important
;
font-size
:
14px
!
important
;
}
}
}
}
@import
"_slide-accordion"
;
\ No newline at end of file
//1150样式
@media
screen
and
(
min-width
:
1150px
)
{
.home-page
{
.tpl-recommend
{
.tpl-nav
{
width
:
185px
;
.keywords0
{
margin-bottom
:
10px
;
height
:
152px
;
}
.keywords1
{
height
:
86px
;
}
.tpl-category
{
a
{
height
:
38px
;
line-height
:
38px
;
font-size
:
14px
;
}
}
}
.tpl-brands
{
width
:
378px
;
li
a
{
height
:
248px
;
}
}
.tpl-types
{
width
:
579px
;
li
a
{
width
:
185px
;
height
:
248px
;
}
}
.tpl-products
{
li
a
{
width
:
222px
;
height
:
298px
;
}
}
}
.singlehot
{
li
a
{
width
:
185px
;
height
:
284px
;
}
.impo1
,
.impo9
{
width
:
378px
;
}
}
.adbanner
{
margin-top
:
12px
;
a
{
height
:
150px
;
}
}
.commodity
{
.commodity-list
{
a
{
height
:
465px
;
}
.commodity-img
{
height
:
374px
;
width
:
280px
;
}
i
.top
{
height
:
60px
;
width
:
60px
;
line-height
:
60px
;
font-size
:
20px
;
}
}
.commodity-brands
{
a
{
width
:
185px
;
height
:
86px
;
}
}
}
.slide-accordion
{
height
:
400px
;
li
{
a
{
width
:
650px
;
height
:
400px
;
}
}
}
}
.boys
{
.commodity
{
.commodity-list
{
a
{
height
:
408px
!
important
;
}
.commodity-img
{
height
:
298px
!
important
;
width
:
222px
!
important
;
}
i
.top
{
height
:
60px
!
important
;
width
:
60px
!
important
;
line-height
:
60px
!
important
;
font-size
:
20px
!
important
;
}
}
}
}
}
\ No newline at end of file
...
...
web-static/sass/home/_index.scss
View file @
9f4ab7a
...
...
@@ -510,185 +510,7 @@
}
}
.tpl-recommend
{
width
:
1150px
;
overflow
:
hidden
;
a
{
display
:
block
;
background-color
:
#f8f8f8
;
img
{
display
:
block
;
width
:
100%
;}
}
.tpl-nav
{
float
:
left
;
width
:
185px
;
height
:
512px
;
overflow
:
hidden
;
.tpl-keywords
{
margin-bottom
:
8px
;
}
.tpl-category
{
height
:
228px
;
padding
:
10px
0
;
background-color
:
#f8f8f8
;
overflow
:
hidden
;
a
{
float
:
left
;
width
:
50%
;
height
:
38px
;
line-height
:
38px
;
text-align
:
center
;
color
:
#000
;
font-size
:
14px
;
overflow
:
hidden
;
}
}
}
.tpl-brands
{
float
:
left
;
margin-left
:
8px
;
width
:
378px
;
height
:
512px
;
overflow
:
hidden
;
li
{
margin-bottom
:
8px
;
img
{
height
:
248px
;
width
:
100%
;
}
}
}
.tpl-types
{
float
:
left
;
width
:
579px
;
height
:
512px
;
overflow
:
hidden
;
li
{
float
:
left
;
margin-left
:
8px
;
margin-bottom
:
8px
;
img
{
width
:
185px
;
height
:
248px
;
}
}
}
.tpl-products
{
height
:
298px
;
overflow
:
hidden
;
margin-left
:
-10px
;
li
{
float
:
left
;
margin-left
:
10px
;
img
{
width
:
222px
;
height
:
298px
;
}
}
}
}
.commodity
{
position
:
relative
;
width
:
1150px
;
margin-bottom
:
80px
;
.commodity-list
{
margin-left
:
-10px
;
li
{
float
:
left
;
margin-left
:
10px
;
a
{
display
:
block
;
height
:
408px
;
width
:
222px
;
}
.commodity-img
{
position
:
relative
;
img
{
display
:
block
;
height
:
298px
;
width
:
222px
;
}
}
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
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
;
width
:
185px
;
height
:
86px
;
display
:
block
;
img
{
display
:
block
;
width
:
185px
;
height
:
86px
;
}
}
}
.loading
{
position
:
absolute
;
bottom
:
0
;
width
:
100%
;
text-align
:
center
;
font-size
:
20px
;
}
}
.singlehot
{
width
:
1150px
;
height
:
584px
;
overflow
:
hidden
;
ul
{
margin-left
:
-8px
;
}
li
{
float
:
left
;
margin-left
:
8px
;
margin-bottom
:
8px
;
}
a
{
display
:
block
;
background-color
:
#f8f8f8
;
img
{
display
:
block
;
width
:
185px
;
height
:
284px
;
}
}
.impo1
img
,
.impo9
img
{
width
:
378px
;
}
}
.adbanner
{
width
:
100%
;
height
:
150px
;
margin-top
:
12px
;
img
{
display
:
block
;
width
:
1150px
;
height
:
150px
;
}
}
.floor-header
{
position
:
relative
;
...
...
@@ -734,5 +556,4 @@
}
@import
"_index-pliffy"
,
"index1150"
;
...
...
web-static/sass/home/_slide-accordion.scss
deleted
100644 → 0
View file @
29fdd70
.slide-accordion
{
.slide-list
{
width
:
1150px
;
height
:
400px
;
overflow
:
hidden
;
position
:
relative
;
}
ul
{
position
:
absolute
;
left
:
-5px
;
}
li
{
position
:
absolute
;
width
:
650px
;
height
:
400px
;
display
:
block
;
border-left
:
5px
solid
#fff
;
img
{
display
:
block
;
width
:
650px
;
height
:
400px
;
}
}
}
Please
register
or
login
to post a comment