Toggle navigation
Toggle navigation
This project
Loading...
Sign in
fe
/
YOHOOD
·
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
Email Patches
Plain Diff
Browse Files
Authored by
2586703@qq.com
10 years ago
Commit
0783926e2963dd99e93d3e867009977b456f137e
1 parent
8efc1085
detail页增加banner
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
32 additions
and
5 deletions
demo/yohood2.0/mobile/detail.html
res/css/mobile.css
res/js/mobile.js
demo/yohood2.0/mobile/detail.html
View file @
0783926
...
...
@@ -29,6 +29,22 @@
<h2
class=
"title"
>
Skin Art Series INN 2015新品
</h2>
<h3
class=
"subtitle"
>
2月13日 12:34
</h3>
</div>
<div
class=
"slide-main"
>
<div
class=
"slide-box"
>
<div
class=
"slide-wrap clearfix"
>
<div
class=
"box"
><a
href=
"javascript:;"
><img
src=
"http://img03.res.yoho.cn/blogimg/2014/09/23/13/0179e17640e29e62b52439902484a8fa50.gif?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80"
alt=
""
/></a></div>
<div
class=
"box"
><a
href=
"javascript:;"
><img
src=
"http://img03.res.yoho.cn/blogimg/2014/09/23/13/01f0a56c52203da48881a64b336b41091b.jpg?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80"
alt=
""
/></a></div>
<div
class=
"box"
><a
href=
"javascript:;"
><img
src=
"http://img04.res.yoho.cn/blogimg/2014/11/17/11/025aadd704383ed18365f15a5e1cde9e5d.jpg?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80"
alt=
""
/></a></div>
</div>
</div>
<div
class=
"slide-navigator"
>
<div
class=
"dib clearfix"
>
<a
href=
"javascript:;"
class=
"on"
></a>
<a
href=
"javascript:;"
></a>
<a
href=
"javascript:;"
></a>
</div>
</div>
</div>
<div
class=
"detail-article"
>
<img
src=
"http://img02.res.yoho.cn/blogimg/2014/10/16/16/02ad6eefcb3554eb47f5a936487d25cb21.jpg"
alt=
""
>
<p>
作为Playground唯一特装展位的THETHING,利用砂砾岩石打造出土耳其卡帕多西亚般的风化地貌,配合充满异域风情的原始帐篷和细节陈列,成为整个YOHOOD展区最独特的存在。
</p>
...
...
res/css/mobile.css
View file @
0783926
html
,
body
,
div
,
span
,
object
,
iframe
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
blockquote
,
pre
,
a
,
abbr
,
acronym
,
address
,
code
,
del
,
dfn
,
em
,
img
,
q
,
dl
,
dt
,
dd
,
ol
,
ul
,
li
,
fieldset
,
form
,
label
,
legend
,
table
,
caption
,
tbody
,
tfoot
,
thead
,
tr
,
th
,
td
,
i
{
margin
:
0
;
padding
:
0
;
border
:
0
;
font-weight
:
inherit
;
font-style
:
inherit
;
font-size
:
100%
;
font-family
:
inherit
;
vertical-align
:
baseline
}
body
{
line-height
:
1.5
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
}
caption
,
th
,
td
,
b
,
strong
{
text-align
:
left
;
font-weight
:
normal
}
table
,
td
,
th
{
vertical-align
:
middle
}
blockquote
:before
,
blockquote
:after
,
q
:before
,
q
:after
{
content
:
""
}
blockquote
,
q
{
quotes
:
""
""
}
a
img
{
border
:
none
}
em
,
cite
{
font-style
:
normal
}
body
{
background
:
#fff
;
font
:
12px
/
1.5
"arial"
,
"helvetica"
,
"微软雅黑"
;
color
:
#000
;
width
:
100%
;
height
:
100%
;
padding
:
0
;
margin
:
0
}
html
{
width
:
100%
;
height
:
100%
;
padding
:
0
;
margin
:
0
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-weight
:
normal
;
color
:
#111
}
a
{
text-decoration
:
none
;
cursor
:
pointer
}
a
:focus
{
outline
:
none
}
dl
,
dt
,
dd
,
ul
,
li
{
list-style
:
none
}
.clearfix
:before
,
.clearfix
:after
{
content
:
""
;
display
:
table
}
.clearfix
:after
{
clear
:
both
}
.clearfix
{
zoom
:
1
;
*
zoom
:
1
}
@font-face
{
font-family
:
'iconfont'
;
src
:
url("../fonts/iconfont.eot")
;
src
:
url("../fonts/iconfont.eot?#iefix")
format
(
"embedded-opentype"
),
url("../fonts/iconfont.woff")
format
(
"woff"
),
url("../fonts/iconfont.ttf")
format
(
"truetype"
),
url("../fonts/iconfont.svg#iconfont")
format
(
"svg"
)}
.iconfont
{
font-family
:
"iconfont"
!important
;
font-size
:
16px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-webkit-text-stroke-width
:
0.2px
;
-moz-osx-font-smoothing
:
grayscale
}
html
{
font-size
:
20px
}
@media
only
screen
and
(
min-width
:
360px
){
html
{
font-size
:
22.5px
!important
}}
@media
only
screen
and
(
min-width
:
375px
){
html
{
font-size
:
23.43px
!important
}}
@media
only
screen
and
(
min-width
:
401px
){
html
{
font-size
:
25px
!important
}}
@media
only
screen
and
(
min-width
:
428px
){
html
{
font-size
:
26.75px
!important
}}
@media
only
screen
and
(
min-width
:
480px
){
html
{
font-size
:
30px
!important
}}
@media
only
screen
and
(
min-width
:
569px
){
html
{
font-size
:
35px
!important
}}
@media
only
screen
and
(
min-width
:
640px
){
html
{
font-size
:
40px
!important
}}
.header-download
{
position
:
relative
;
height
:
2.2rem
;
border-top
:
1px
solid
#bcbcbe
;
border-bottom
:
1px
solid
#000
}
.header-download
.tip-pic
{
position
:
absolute
;
top
:
50%
;
left
:
1rem
;
width
:
1.8rem
;
height
:
1.8rem
;
margin
:
-0.9rem
0
0
0
;
background
:
url('../images/yohood/mobile/app-icon.png?1429867973')
;
background-size
:
100%
100%
}
.header-download
.tip-info
{
position
:
relative
;
margin
:
0
0
0
3.1rem
}
.header-download
.tip-info
h2
{
font-size
:
0.6rem
;
line-height
:
0.7rem
;
margin-top
:
0.4rem
}
.header-download
.tip-info
p
{
color
:
#959192
;
font-size
:
0.5rem
;
line-height
:
0.7rem
}
.header-download
.tip-info
.yohoboy-download-app
{
position
:
absolute
;
width
:
2.65rem
;
height
:
1.05rem
;
top
:
0.1rem
;
right
:
1.5rem
;
border
:
1px
solid
#000
;
line-height
:
1.05rem
;
border-radius
:
2px
;
text-align
:
center
;
font-size
:
0.5rem
}
.header-download
.tip-close
{
position
:
absolute
;
width
:
1rem
;
height
:
1rem
;
top
:
0
;
right
:
0
;
background
:
url('../images/yohood/mobile/tip-c.png?1430900294')
;
background-size
:
100%
100%
}
.logo
{
position
:
relative
;
height
:
2.15rem
;
line-height
:
2.15rem
;
text-align
:
center
;
font-size
:
1.2rem
;
border-bottom
:
1px
solid
#000
}
.logo
.back-btn
{
position
:
absolute
;
left
:
0.5rem
;
font-size
:
1.1rem
;
color
:
#000
}
.bd
{
padding-bottom
:
1.5rem
}
.slide-main
{
position
:
relative
}
.slide-box
{
position
:
relative
;
visibility
:
hidden
;
overflow
:
hidden
;
height
:
7.75rem
}
.slide-box
.slide-wrap
{
overflow
:
hidden
;
position
:
relative
}
.slide-box
.slide-wrap
.box
{
float
:
left
;
width
:
100%
;
position
:
relative
}
.slide-box
.slide-wrap
.box
img
{
display
:
block
;
width
:
100%
}
.slide-navigator
{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
5px
;
text-align
:
center
}
.slide-navigator
.dib
{
display
:
inline-block
}
.slide-navigator
.dib
a
{
float
:
left
;
width
:
0.3rem
;
height
:
0.3rem
;
margin-left
:
0.15rem
;
background
:
#d0cfcb
;
border-radius
:
50%
}
.slide-navigator
.dib
a
:first-child
{
margin-left
:
0
}
.slide-navigator
.dib
.on
{
background
:
#989795
}
.layout-item
{
margin
:
0
0
2.25rem
0
}
.layout-item
.image-box
{
position
:
relative
;
height
:
10.3rem
;
overflow
:
hidden
}
.layout-item
.image-box
.item-tag
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
height
:
1.25rem
;
padding
:
0
0.5rem
;
line-height
:
1.25rem
;
background
:
#000
;
color
:
#fff
;
font-size
:
0.7rem
}
.layout-item
.content
{
margin
:
0.5rem
0
0
0
;
padding
:
0
0.8rem
}
.layout-item
.content
h2
a
{
line-height
:
1.25rem
;
color
:
#000
;
font-size
:
1rem
}
.layout-item
.content
p
{
margin
:
0.5rem
0
0
0
;
font-size
:
0.7rem
;
line-height
:
1rem
}
.layout-item
.content
.time
{
color
:
#aaa
;
font-size
:
0.6rem
}
.pagination-inner
{
padding
:
0
0.75rem
}
.pagination-inner
a
{
float
:
right
;
font-size
:
0.9rem
;
color
:
#000
}
.pagination-inner
a
span
{
font-size
:
0.7rem
;
vertical-align
:
8%
}
.pagination-inner
a
:first-child
{
float
:
left
}
.cooperation-list
{
margin
:
0.6rem
0
0
0
}
.cooperation-list
li
{
float
:
left
;
margin
:
0
0.45rem
0.45rem
0
}
.cooperation-list
li
.img-box
{
width
:
6.9rem
;
height
:
4.65rem
;
line-height
:
4.65rem
;
border
:
1px
solid
#e0e0e0
;
text-align
:
center
}
.cooperation-list
li
.img-box
img
{
vertical-align
:
middle
}
.cooperation-list
li
p
{
margin
:
0.3rem
0
;
font-size
:
0.6rem
;
line-height
:
0.7rem
;
text-align
:
center
;
color
:
#000
}
.home-logo
{
border
:
none
}
.banner-swiper
{
height
:
7.8rem
;
overflow
:
hidden
}
.banner-swiper
img
{
width
:
100%
}
.channel-list
li
{
float
:
left
;
margin
:
1.1rem
0
0
1.45rem
;
text-align
:
center
}
.channel-list
.channel-pic
{
width
:
3.3rem
;
height
:
3.3rem
;
line-height
:
3.3rem
;
border-radius
:
50%
;
border
:
1px
solid
#000
;
text-align
:
center
;
color
:
#000
;
font-size
:
1.2rem
}
.channel-list
.video
{
font-size
:
0.8rem
}
.channel-list
.recmmend
{
background
:
url('../images/yohood/mobile/recmmend.png?1431936747')
no-repeat
center
center
;
background-size
:
36%
auto
}
.channel-list
.show
{
background
:
url('../images/yohood/mobile/show.png?1432276861')
no-repeat
center
center
;
background-size
:
36%
auto
}
.channel-list
.contact
{
font-size
:
0.8rem
}
.channel-list
.channel-name
{
margin-top
:
0.45rem
;
line-height
:
0.75rem
;
font-size
:
0.6rem
;
font-weight
:
bold
;
color
:
#000
}
.channel-list
.channel-name-cn
{
line-height
:
0.75rem
;
font-size
:
0.6rem
;
color
:
#000
}
.channel-list
li
.current
.channel-pic
{
color
:
#fff
;
background
:
#000
}
.content-tab
{
margin
:
0.6rem
0
0
0
;
text-align
:
center
}
.content-tab
ul
{
display
:
inline-block
;
border-left
:
1px
solid
#000
}
.content-tab
ul
li
{
float
:
left
;
border
:
1px
solid
#000
;
border-left
:
none
}
.content-tab
ul
li
a
{
display
:
block
;
width
:
4.8rem
;
height
:
1.7rem
;
line-height
:
1.7rem
;
text-align
:
center
;
font-size
:
0.7rem
;
color
:
#000
}
.content-tab
ul
li
.current
{
background
:
#000
}
.content-tab
ul
li
.current
a
{
color
:
#fff
}
.activity-main
{
margin
:
0.6rem
0
0
0
}
.activity-content
{
display
:
none
}
.activity-content
img
{
width
:
100%
}
.activity-content
.section
{
margin
:
1.2em
0
0
0
}
.activity-content
.section
p
,
.activity-content
.section
h4
{
padding
:
0
0.8rem
;
line-height
:
1rem
;
font-size
:
0.7rem
}
.activity-content.current
{
display
:
block
}
.activity-cooperation
{
padding
:
0
0
0
0.8rem
}
.activity-cooperation
h2
{
font-size
:
0.8rem
;
color
:
#000
;
line-height
:
1.1rem
}
.search-wrap
{
position
:
relative
;
z-index
:
2
;
height
:
2.2rem
;
padding
:
0
0.4rem
;
background
:
#f0f0f0
;
text-align
:
center
}
.search-wrap
input
{
width
:
15.2rem
;
height
:
1.4rem
;
margin
:
0.4rem
0
0
0
;
border
:
none
;
outline
:
none
;
font-size
:
0.7rem
}
.search-wrap
input
:focus
,
.search-wrap
input
.hasVal
{
width
:
13.6rem
;
padding-left
:
1.6rem
}
.search-wrap
.search-btn
{
position
:
absolute
;
color
:
#8e8e93
;
font-size
:
0.7rem
;
top
:
0.6rem
;
left
:
50%
;
margin-left
:
-1.05rem
}
.search-wrap
.search-btn
span
{
margin-right
:
0.1rem
;
font-size
:
0.7rem
;
vertical-align
:
2%
}
.search-wrap
input
:focus
~
.search-btn
,
.search-wrap
input
.hasVal
~
.search-btn
{
left
:
0.9rem
;
margin-left
:
0
}
.search-wrap
input
:focus
~
.search-btn
em
,
.search-wrap
input
.hasVal
~
.search-btn
em
{
display
:
none
}
.brand-content
{
padding
:
0
0
0
0.8rem
}
.no-search
{
display
:
none
;
text-align
:
center
;
font-size
:
0.6rem
}
.no-search
a
{
font-size
:
0.6rem
;
line-height
:
0.8rem
;
color
:
#000
}
.overlay
{
display
:
none
;
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.5
);
z-index
:
1
}
.overlay.show
{
display
:
block
}
.main-title
{
font-size
:
0.8rem
;
line-height
:
2.3rem
;
text-align
:
center
;
color
:
#000
}
.video-wrap
img
{
width
:
100%
}
.scene-bd
{
padding
:
0
}
.scene-tab
{
margin
:
0.5rem
0
0
0.7rem
;
height
:
1.8rem
}
.scene-tab
ul
{
display
:
inline-block
}
.scene-tab
li
{
float
:
left
;
width
:
4.8rem
;
height
:
1.7rem
;
line-height
:
1.7rem
;
text-align
:
center
;
background
:
#fff
;
border
:
1px
solid
#000
;
border-left
:
none
}
.scene-tab
li
a
{
font-size
:
0.6rem
;
color
:
#000
}
.scene-tab
li
:first-child
{
border-left
:
1px
solid
#000
}
.scene-tab
.current
{
background
:
#000
}
.scene-tab
.current
a
{
color
:
#fff
}
.scene-tab
.disable
{
background
:
#ebebeb
;
color
:
#fff
;
border-color
:
#ebebeb
;
cursor
:
default
}
.scene-tab
.disable
a
{
color
:
#fff
}
.scene-content
{
position
:
relative
;
margin
:
0
0
0
0.7rem
;
border-left
:
2px
solid
#e0e0e0
}
.scene-content
.scene-intro
{
position
:
absolute
;
top
:
0.75rem
;
left
:
1.15rem
;
padding
:
0
0.8rem
;
height
:
1.4rem
;
line-height
:
1.4rem
;
background
:
#000
;
color
:
#fff
;
font-size
:
0.6rem
}
.scene-content
.scene-intro
:before
{
position
:
absolute
;
content
:
""
;
width
:
0.3rem
;
height
:
0.85rem
;
top
:
0
;
left
:
-0.3rem
;
background
:
url("../images/yohood/site-activity-intro-icon.png")
no-repeat
;
background-size
:
100%
100%
}
.scene-content
.scene-time
{
position
:
absolute
;
top
:
2.5rem
;
left
:
1.15rem
;
color
:
#aeaeae
}
.scene-content
.scene-icon
{
position
:
absolute
;
top
:
1.45rem
;
left
:
-0.2rem
;
width
:
0.3rem
;
height
:
0.3rem
;
background
:
url("../images/yohood/site-activity-icon.png")
no-repeat
;
background-size
:
100%
100%
}
.scene-content
.main-layout
{
display
:
none
}
.scene-content
.main-layout.current
{
display
:
block
}
.scene-content
.layout-section
{
position
:
relative
;
padding
:
4.15rem
0
0
0.8rem
}
.scene-content
.layout-item
{
width
:
13.6rem
}
.scene-content
.image-box
img
{
width
:
100%
}
.show-title
{
color
:
#0099bb
}
.layout-item
.image-box
{
height
:
16rem
}
.layout-item
.image-box
img
{
width
:
100%
;
height
:
100%
}
.layout-item
.image-box
.pic-tip
{
display
:
block
;
position
:
absolute
;
background
:
rgba
(
255
,
255
,
255
,
0.9
);
color
:
#009abe
;
text-decoration
:
none
;
height
:
0.6rem
;
line-height
:
0.6rem
;
padding
:
0
0.25rem
;
border-radius
:
11px
;
font-family
:
'Helvetica'
;
font-weight
:
bold
;
box-shadow
:
1px
2px
2px
rgba
(
0
,
0
,
0
,
0.5
)}
.layout-item
.image-box
.pic-tip
:after
{
position
:
absolute
;
content
:
""
;
background-image
:
url("../images/yohood/vedio-btn.png")
;
background-repeat
:
no-repeat
;
background-position
:
0
-55px
;
background-size
:
30px
310px
;
width
:
7px
;
height
:
5px
;
top
:
0.4rem
;
left
:
-0.1rem
;
z-index
:
10
}
.contact-us-section
{
margin
:
0.5rem
0
0
0
;
text-align
:
center
}
.contact-us-section
h2
{
font-size
:
0.8rem
}
.contact-us-section
p
{
font-size
:
0.7rem
;
line-height
:
1rem
}
.detail-title
{
margin
:
0.75rem
0
;
padding
:
0
0
0
0.7rem
}
.detail-title
.title
{
line-height
:
1.2rem
;
font-size
:
1rem
;
font-weight
:
bold
}
.detail-title
.subtitle
{
margin
:
0.25rem
0
0
0
;
font-size
:
0.6rem
;
line-height
:
0.75rem
;
color
:
#a5a5a5
}
.brand-title
{
margin
:
0.4rem
0
}
.brand-title
.title
{
font-size
:
0.8rem
;
text-align
:
center
}
.detail-article
img
{
width
:
100%
}
.detail-article
p
{
margin
:
0.5rem
0.75rem
;
font-size
:
0.7rem
;
line-height
:
1.2rem
}
.related-post
{
margin
:
1.4rem
0.85rem
0
0.85rem
}
.related-post
h2
{
font-size
:
0.8rem
;
line-height
:
0.9rem
}
.related-post
ul
{
margin
:
0.2rem
0
0
0
}
.related-post
ul
li
{
margin
:
0.8rem
0
0
0
;
padding
:
0.8rem
0
0
0
;
border-top
:
1px
solid
#e5e5e5
}
.related-post
ul
li
.image-box
{
float
:
left
;
width
:
4.8rem
;
height
:
3.05rem
}
.related-post
ul
li
.image-box
img
{
width
:
100%
;
height
:
100%
}
.related-post
ul
li
.content
{
float
:
left
;
width
:
9.1rem
;
margin
:
0.4rem
0
0
0.4rem
;
font-size
:
0.7rem
;
line-height
:
1.1rem
;
color
:
#000
}
.related-post
ul
li
:first-child
{
border-top
:
none
}
.share
{
position
:
fixed
;
bottom
:
0
;
left
:
0
;
right
:
0
;
background-image
:
linear-gradient
(
rgba
(
255
,
255
,
255
,
0
),
#fff
);
text-align
:
center
}
.share
ul
{
display
:
inline-block
}
.share
li
{
float
:
left
;
margin-left
:
2.05rem
}
.share
li
a
{
display
:
block
;
width
:
46px
;
height
:
46px
;
background-image
:
url('../images/yohood/mobile/share.png?1432706070')
;
background-size
:
100%
auto
}
.share
li
:first-child
{
margin-left
:
0
}
.share
.yohoo-share-button-sina
a
{
background-position
:
0
-152px
}
.share
.yohoo-share-button-qq
a
{
background-position
:
0
-50px
}
.enter-store
{
display
:
block
;
width
:
94px
;
height
:
33px
;
margin
:
15px
auto
0
;
padding-left
:
34px
;
line-height
:
35px
;
border
:
1px
solid
#000
;
border-radius
:
4px
;
background
:
#fff
;
color
:
#000
;
background
:
url("../images/yohood/enter-store.png")
no-repeat
10px
center
}
.news-select
{
position
:
relative
;
margin
:
0.75rem
0
;
text-align
:
center
}
.news-select
select
{
font-size
:
0.8rem
;
border
:
none
;
outline
:
none
;
font-family
:
"arial"
,
"helvetica"
,
"微软雅黑"
;
text-align
:
center
;
border-color
:
red
}
.news-select
select
option
{
border-color
:
red
}
.news-main
{
display
:
none
}
.news-main.current
{
display
:
block
}
html
,
body
,
div
,
span
,
object
,
iframe
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
blockquote
,
pre
,
a
,
abbr
,
acronym
,
address
,
code
,
del
,
dfn
,
em
,
img
,
q
,
dl
,
dt
,
dd
,
ol
,
ul
,
li
,
fieldset
,
form
,
label
,
legend
,
table
,
caption
,
tbody
,
tfoot
,
thead
,
tr
,
th
,
td
,
i
{
margin
:
0
;
padding
:
0
;
border
:
0
;
font-weight
:
inherit
;
font-style
:
inherit
;
font-size
:
100%
;
font-family
:
inherit
;
vertical-align
:
baseline
}
body
{
line-height
:
1.5
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
}
caption
,
th
,
td
,
b
,
strong
{
text-align
:
left
;
font-weight
:
normal
}
table
,
td
,
th
{
vertical-align
:
middle
}
blockquote
:before
,
blockquote
:after
,
q
:before
,
q
:after
{
content
:
""
}
blockquote
,
q
{
quotes
:
""
""
}
a
img
{
border
:
none
}
em
,
cite
{
font-style
:
normal
}
body
{
background
:
#fff
;
font
:
12px
/
1.5
"arial"
,
"helvetica"
,
"微软雅黑"
;
color
:
#000
;
width
:
100%
;
height
:
100%
;
padding
:
0
;
margin
:
0
}
html
{
width
:
100%
;
height
:
100%
;
padding
:
0
;
margin
:
0
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-weight
:
normal
;
color
:
#111
}
a
{
text-decoration
:
none
;
cursor
:
pointer
}
a
:focus
{
outline
:
none
}
dl
,
dt
,
dd
,
ul
,
li
{
list-style
:
none
}
.clearfix
:before
,
.clearfix
:after
{
content
:
""
;
display
:
table
}
.clearfix
:after
{
clear
:
both
}
.clearfix
{
zoom
:
1
;
*
zoom
:
1
}
@font-face
{
font-family
:
'iconfont'
;
src
:
url("../fonts/iconfont.eot")
;
src
:
url("../fonts/iconfont.eot?#iefix")
format
(
"embedded-opentype"
),
url("../fonts/iconfont.woff")
format
(
"woff"
),
url("../fonts/iconfont.ttf")
format
(
"truetype"
),
url("../fonts/iconfont.svg#iconfont")
format
(
"svg"
)}
.iconfont
{
font-family
:
"iconfont"
!important
;
font-size
:
16px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-webkit-text-stroke-width
:
0.2px
;
-moz-osx-font-smoothing
:
grayscale
}
html
{
font-size
:
20px
}
@media
only
screen
and
(
min-width
:
360px
){
html
{
font-size
:
22.5px
!important
}}
@media
only
screen
and
(
min-width
:
375px
){
html
{
font-size
:
23.43px
!important
}}
@media
only
screen
and
(
min-width
:
401px
){
html
{
font-size
:
25px
!important
}}
@media
only
screen
and
(
min-width
:
428px
){
html
{
font-size
:
26.75px
!important
}}
@media
only
screen
and
(
min-width
:
480px
){
html
{
font-size
:
30px
!important
}}
@media
only
screen
and
(
min-width
:
569px
){
html
{
font-size
:
35px
!important
}}
@media
only
screen
and
(
min-width
:
640px
){
html
{
font-size
:
40px
!important
}}
.header-download
{
position
:
relative
;
height
:
2.2rem
;
border-top
:
1px
solid
#bcbcbe
;
border-bottom
:
1px
solid
#000
}
.header-download
.tip-pic
{
position
:
absolute
;
top
:
50%
;
left
:
1rem
;
width
:
1.8rem
;
height
:
1.8rem
;
margin
:
-0.9rem
0
0
0
;
background
:
url('../images/yohood/mobile/app-icon.png?1429867973')
;
background-size
:
100%
100%
}
.header-download
.tip-info
{
position
:
relative
;
margin
:
0
0
0
3.1rem
}
.header-download
.tip-info
h2
{
font-size
:
0.6rem
;
line-height
:
0.7rem
;
margin-top
:
0.4rem
}
.header-download
.tip-info
p
{
color
:
#959192
;
font-size
:
0.5rem
;
line-height
:
0.7rem
}
.header-download
.tip-info
.yohoboy-download-app
{
position
:
absolute
;
width
:
2.65rem
;
height
:
1.05rem
;
top
:
0.1rem
;
right
:
1.5rem
;
border
:
1px
solid
#000
;
line-height
:
1.05rem
;
border-radius
:
2px
;
text-align
:
center
;
font-size
:
0.5rem
}
.header-download
.tip-close
{
position
:
absolute
;
width
:
1rem
;
height
:
1rem
;
top
:
0
;
right
:
0
;
background
:
url('../images/yohood/mobile/tip-c.png?1430900294')
;
background-size
:
100%
100%
}
.logo
{
position
:
relative
;
height
:
2.15rem
;
line-height
:
2.15rem
;
text-align
:
center
;
font-size
:
1.2rem
;
border-bottom
:
1px
solid
#000
}
.logo
.back-btn
{
position
:
absolute
;
left
:
0.5rem
;
font-size
:
1.1rem
;
color
:
#000
}
.bd
{
padding-bottom
:
1.5rem
}
.slide-main
{
position
:
relative
}
.slide-box
{
position
:
relative
;
visibility
:
hidden
;
overflow
:
hidden
;
height
:
7.75rem
}
.slide-box
.slide-wrap
{
overflow
:
hidden
;
position
:
relative
}
.slide-box
.slide-wrap
.box
{
float
:
left
;
width
:
100%
;
position
:
relative
}
.slide-box
.slide-wrap
.box
img
{
display
:
block
;
width
:
100%
}
.slide-navigator
{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
5px
;
text-align
:
center
}
.slide-navigator
.dib
{
display
:
inline-block
}
.slide-navigator
.dib
a
{
float
:
left
;
width
:
0.3rem
;
height
:
0.3rem
;
margin-left
:
0.15rem
;
background
:
#d0cfcb
;
border-radius
:
50%
}
.slide-navigator
.dib
a
:first-child
{
margin-left
:
0
}
.slide-navigator
.dib
.on
{
background
:
#989795
}
.layout-item
{
margin
:
0
0
2.25rem
0
}
.layout-item
.image-box
{
position
:
relative
;
height
:
10.3rem
;
overflow
:
hidden
}
.layout-item
.image-box
.item-tag
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
height
:
1.25rem
;
padding
:
0
0.5rem
;
line-height
:
1.25rem
;
background
:
#000
;
color
:
#fff
;
font-size
:
0.7rem
}
.layout-item
.content
{
margin
:
0.5rem
0
0
0
;
padding
:
0
0.8rem
}
.layout-item
.content
h2
a
{
line-height
:
1.25rem
;
color
:
#000
;
font-size
:
1rem
}
.layout-item
.content
p
{
margin
:
0.5rem
0
0
0
;
font-size
:
0.7rem
;
line-height
:
1rem
}
.layout-item
.content
.time
{
color
:
#aaa
;
font-size
:
0.6rem
}
.pagination-inner
{
padding
:
0
0.75rem
}
.pagination-inner
a
{
float
:
right
;
font-size
:
0.9rem
;
color
:
#000
}
.pagination-inner
a
span
{
font-size
:
0.7rem
;
vertical-align
:
8%
}
.pagination-inner
a
:first-child
{
float
:
left
}
.cooperation-list
{
margin
:
0.6rem
0
0
0
}
.cooperation-list
li
{
float
:
left
;
margin
:
0
0.45rem
0.45rem
0
}
.cooperation-list
li
.img-box
{
width
:
6.9rem
;
height
:
4.65rem
;
line-height
:
4.65rem
;
border
:
1px
solid
#e0e0e0
;
text-align
:
center
}
.cooperation-list
li
.img-box
img
{
vertical-align
:
middle
}
.cooperation-list
li
p
{
margin
:
0.3rem
0
;
font-size
:
0.6rem
;
line-height
:
0.7rem
;
text-align
:
center
;
color
:
#000
}
.home-logo
{
border
:
none
}
.banner-swiper
{
height
:
7.8rem
;
overflow
:
hidden
}
.banner-swiper
img
{
width
:
100%
}
.channel-list
li
{
float
:
left
;
margin
:
1.1rem
0
0
1.45rem
;
text-align
:
center
}
.channel-list
.channel-pic
{
width
:
3.3rem
;
height
:
3.3rem
;
line-height
:
3.3rem
;
border-radius
:
50%
;
border
:
1px
solid
#000
;
text-align
:
center
;
color
:
#000
;
font-size
:
1.2rem
}
.channel-list
.video
{
font-size
:
0.8rem
}
.channel-list
.recmmend
{
background
:
url('../images/yohood/mobile/recmmend.png?1431936747')
no-repeat
center
center
;
background-size
:
36%
auto
}
.channel-list
.show
{
background
:
url('../images/yohood/mobile/show.png?1432276861')
no-repeat
center
center
;
background-size
:
36%
auto
}
.channel-list
.contact
{
font-size
:
0.8rem
}
.channel-list
.channel-name
{
margin-top
:
0.45rem
;
line-height
:
0.75rem
;
font-size
:
0.6rem
;
font-weight
:
bold
;
color
:
#000
}
.channel-list
.channel-name-cn
{
line-height
:
0.75rem
;
font-size
:
0.6rem
;
color
:
#000
}
.channel-list
li
.current
.channel-pic
{
color
:
#fff
;
background
:
#000
}
.content-tab
{
margin
:
0.6rem
0
0
0
;
text-align
:
center
}
.content-tab
ul
{
display
:
inline-block
;
border-left
:
1px
solid
#000
}
.content-tab
ul
li
{
float
:
left
;
border
:
1px
solid
#000
;
border-left
:
none
}
.content-tab
ul
li
a
{
display
:
block
;
width
:
4.8rem
;
height
:
1.7rem
;
line-height
:
1.7rem
;
text-align
:
center
;
font-size
:
0.7rem
;
color
:
#000
}
.content-tab
ul
li
.current
{
background
:
#000
}
.content-tab
ul
li
.current
a
{
color
:
#fff
}
.activity-main
{
margin
:
0.6rem
0
0
0
}
.activity-content
{
display
:
none
}
.activity-content
img
{
width
:
100%
}
.activity-content
.section
{
margin
:
1.2em
0
0
0
}
.activity-content
.section
p
,
.activity-content
.section
h4
{
padding
:
0
0.8rem
;
line-height
:
1rem
;
font-size
:
0.7rem
}
.activity-content.current
{
display
:
block
}
.activity-cooperation
{
padding
:
0
0
0
0.8rem
}
.activity-cooperation
h2
{
font-size
:
0.8rem
;
color
:
#000
;
line-height
:
1.1rem
}
.search-wrap
{
position
:
relative
;
z-index
:
2
;
height
:
2.2rem
;
padding
:
0
0.4rem
;
background
:
#f0f0f0
;
text-align
:
center
}
.search-wrap
input
{
width
:
15.2rem
;
height
:
1.4rem
;
margin
:
0.4rem
0
0
0
;
border
:
none
;
outline
:
none
;
font-size
:
0.7rem
}
.search-wrap
input
:focus
,
.search-wrap
input
.hasVal
{
width
:
13.6rem
;
padding-left
:
1.6rem
}
.search-wrap
.search-btn
{
position
:
absolute
;
color
:
#8e8e93
;
font-size
:
0.7rem
;
top
:
0.6rem
;
left
:
50%
;
margin-left
:
-1.05rem
}
.search-wrap
.search-btn
span
{
margin-right
:
0.1rem
;
font-size
:
0.7rem
;
vertical-align
:
2%
}
.search-wrap
input
:focus
~
.search-btn
,
.search-wrap
input
.hasVal
~
.search-btn
{
left
:
0.9rem
;
margin-left
:
0
}
.search-wrap
input
:focus
~
.search-btn
em
,
.search-wrap
input
.hasVal
~
.search-btn
em
{
display
:
none
}
.brand-content
{
padding
:
0
0
0
0.8rem
}
.no-search
{
display
:
none
;
text-align
:
center
;
font-size
:
0.6rem
}
.no-search
a
{
font-size
:
0.6rem
;
line-height
:
0.8rem
;
color
:
#000
}
.overlay
{
display
:
none
;
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
background
:
rgba
(
0
,
0
,
0
,
0.5
);
z-index
:
1
}
.overlay.show
{
display
:
block
}
.main-title
{
font-size
:
0.8rem
;
line-height
:
2.3rem
;
text-align
:
center
;
color
:
#000
}
.video-wrap
img
{
width
:
100%
}
.scene-bd
{
padding
:
0
}
.scene-tab
{
margin
:
0.5rem
0
0
0.7rem
;
height
:
1.8rem
}
.scene-tab
ul
{
display
:
inline-block
}
.scene-tab
li
{
float
:
left
;
width
:
4.8rem
;
height
:
1.7rem
;
line-height
:
1.7rem
;
text-align
:
center
;
background
:
#fff
;
border
:
1px
solid
#000
;
border-left
:
none
}
.scene-tab
li
a
{
font-size
:
0.6rem
;
color
:
#000
}
.scene-tab
li
:first-child
{
border-left
:
1px
solid
#000
}
.scene-tab
.current
{
background
:
#000
}
.scene-tab
.current
a
{
color
:
#fff
}
.scene-tab
.disable
{
background
:
#ebebeb
;
color
:
#fff
;
border-color
:
#ebebeb
;
cursor
:
default
}
.scene-tab
.disable
a
{
color
:
#fff
}
.scene-content
{
position
:
relative
;
margin
:
0
0
0
0.7rem
;
border-left
:
2px
solid
#e0e0e0
}
.scene-content
.scene-intro
{
position
:
absolute
;
top
:
0.75rem
;
left
:
1.15rem
;
padding
:
0
0.8rem
;
height
:
1.4rem
;
line-height
:
1.4rem
;
background
:
#000
;
color
:
#fff
;
font-size
:
0.6rem
}
.scene-content
.scene-intro
:before
{
position
:
absolute
;
content
:
""
;
width
:
0.3rem
;
height
:
0.85rem
;
top
:
0
;
left
:
-0.3rem
;
background
:
url("../images/yohood/site-activity-intro-icon.png")
no-repeat
;
background-size
:
100%
100%
}
.scene-content
.scene-time
{
position
:
absolute
;
top
:
2.5rem
;
left
:
1.15rem
;
color
:
#aeaeae
}
.scene-content
.scene-icon
{
position
:
absolute
;
top
:
1.45rem
;
left
:
-0.2rem
;
width
:
0.3rem
;
height
:
0.3rem
;
background
:
url("../images/yohood/site-activity-icon.png")
no-repeat
;
background-size
:
100%
100%
}
.scene-content
.main-layout
{
display
:
none
}
.scene-content
.main-layout.current
{
display
:
block
}
.scene-content
.layout-section
{
position
:
relative
;
padding
:
4.15rem
0
0
0.8rem
}
.scene-content
.layout-item
{
width
:
13.6rem
}
.scene-content
.image-box
img
{
width
:
100%
}
.show-title
{
color
:
#0099bb
}
.layout-item
.image-box
{
height
:
16rem
}
.layout-item
.image-box
img
{
width
:
100%
;
height
:
100%
}
.layout-item
.image-box
.pic-tip
{
display
:
block
;
position
:
absolute
;
background
:
rgba
(
255
,
255
,
255
,
0.9
);
color
:
#009abe
;
text-decoration
:
none
;
height
:
0.6rem
;
line-height
:
0.6rem
;
padding
:
0
0.25rem
;
border-radius
:
11px
;
font-family
:
'Helvetica'
;
font-weight
:
bold
;
box-shadow
:
1px
2px
2px
rgba
(
0
,
0
,
0
,
0.5
)}
.layout-item
.image-box
.pic-tip
:after
{
position
:
absolute
;
content
:
""
;
background-image
:
url("../images/yohood/vedio-btn.png")
;
background-repeat
:
no-repeat
;
background-position
:
0
-55px
;
background-size
:
30px
310px
;
width
:
7px
;
height
:
5px
;
top
:
0.4rem
;
left
:
-0.1rem
;
z-index
:
10
}
.contact-us-section
{
margin
:
0.5rem
0
0
0
;
text-align
:
center
}
.contact-us-section
h2
{
font-size
:
0.8rem
}
.contact-us-section
p
{
font-size
:
0.7rem
;
line-height
:
1rem
}
.detail-title
{
margin
:
0.75rem
0
;
padding
:
0
0
0
0.7rem
}
.detail-title
.title
{
line-height
:
1.2rem
;
font-size
:
1rem
;
font-weight
:
bold
}
.detail-title
.subtitle
{
margin
:
0.25rem
0
0
0
;
font-size
:
0.6rem
;
line-height
:
0.75rem
;
color
:
#a5a5a5
}
.brand-title
{
margin
:
0.4rem
0
}
.brand-title
.title
{
font-size
:
0.8rem
;
text-align
:
center
}
.detail-article
{
margin
:
0.75rem
0
}
.detail-article
img
{
width
:
100%
}
.detail-article
p
{
margin
:
0.5rem
0.75rem
;
font-size
:
0.7rem
;
line-height
:
1.2rem
}
.related-post
{
margin
:
1.4rem
0.85rem
0
0.85rem
}
.related-post
h2
{
font-size
:
0.8rem
;
line-height
:
0.9rem
}
.related-post
ul
{
margin
:
0.2rem
0
0
0
}
.related-post
ul
li
{
margin
:
0.8rem
0
0
0
;
padding
:
0.8rem
0
0
0
;
border-top
:
1px
solid
#e5e5e5
}
.related-post
ul
li
.image-box
{
float
:
left
;
width
:
4.8rem
;
height
:
3.05rem
}
.related-post
ul
li
.image-box
img
{
width
:
100%
;
height
:
100%
}
.related-post
ul
li
.content
{
float
:
left
;
width
:
9.1rem
;
margin
:
0.4rem
0
0
0.4rem
;
font-size
:
0.7rem
;
line-height
:
1.1rem
;
color
:
#000
}
.related-post
ul
li
:first-child
{
border-top
:
none
}
.share
{
position
:
fixed
;
bottom
:
0
;
left
:
0
;
right
:
0
;
background-image
:
linear-gradient
(
rgba
(
255
,
255
,
255
,
0
),
#fff
);
text-align
:
center
}
.share
ul
{
display
:
inline-block
}
.share
li
{
float
:
left
;
margin-left
:
2.05rem
}
.share
li
a
{
display
:
block
;
width
:
46px
;
height
:
46px
;
background-image
:
url('../images/yohood/mobile/share.png?1432706070')
;
background-size
:
100%
auto
}
.share
li
:first-child
{
margin-left
:
0
}
.share
.yohoo-share-button-sina
a
{
background-position
:
0
-152px
}
.share
.yohoo-share-button-qq
a
{
background-position
:
0
-50px
}
.enter-store
{
display
:
block
;
width
:
94px
;
height
:
33px
;
margin
:
15px
auto
0
;
padding-left
:
34px
;
line-height
:
35px
;
border
:
1px
solid
#000
;
border-radius
:
4px
;
background
:
#fff
;
color
:
#000
;
background
:
url("../images/yohood/enter-store.png")
no-repeat
10px
center
}
.news-select
{
position
:
relative
;
margin
:
0.75rem
0
;
text-align
:
center
}
.news-select
select
{
font-size
:
0.8rem
;
border
:
none
;
outline
:
none
;
font-family
:
"arial"
,
"helvetica"
,
"微软雅黑"
;
text-align
:
center
;
border-color
:
red
}
.news-select
select
option
{
border-color
:
red
}
.news-main
{
display
:
none
}
.news-main.current
{
display
:
block
}
...
...
res/js/mobile.js
View file @
0783926
...
...
@@ -9,8 +9,8 @@ define('mobile', function(require, exports) {
swipe
=
require
(
"plugins/swipe"
),
share
=
require
(
"plugins/share"
),
common
=
require
(
"common"
),
mlellipsis
=
require
(
"plugins/mlellipsis"
);
exports
.
index
=
function
()
{
mlellipsis
=
require
(
"plugins/mlellipsis"
);
exports
.
index
=
function
()
{
//大banner滑动
swipe
.
init
({
slideBox
:
'.slide-box'
,
...
...
@@ -46,7 +46,7 @@ define('mobile', function(require, exports) {
var
brands
=
data
.
data
;
if
(
data
.
code
==
200
&&
brands
!=
""
)
{
$
.
each
(
brands
,
function
(
k
,
v
)
{
html
+=
'<li><a href="/brand/detail/id/'
+
v
.
id
+
'" title="'
+
v
.
name
+
'"><div class="img-box">'
+
html
+=
'<li><a href="/brand/detail/id/'
+
v
.
id
+
'" title="'
+
v
.
name
+
'"><div class="img-box">'
+
'<img src="'
+
common
.
getImages
(
v
.
logo
,
'0145x0097'
,
'blogimg'
,
'primary'
)
+
'" alt="" alt="'
+
v
.
name
+
'"></div>'
+
'<p>'
+
v
.
name
+
'</p></a></li>'
;
});
...
...
@@ -108,9 +108,20 @@ define('mobile', function(require, exports) {
detailTitle
=
$
(
'.detail-title'
).
find
(
'.title'
),
detailSubtitle
=
$
(
'.detail-title'
).
find
(
'.subtitle'
);
mlellipsis
.
init
();
//大banner滑动
swipe
.
init
({
slideBox
:
'.slide-box'
,
pagination
:
'.dib a'
,
activeClass
:
'on'
,
auto
:
3000
,
continuous
:
true
});
//截字
$
(
'.related-post'
).
find
(
'.content'
).
each
(
function
()
{
$
(
this
)[
0
].
mlellipsis
(
2
);
});
//分享
share
.
init
({
shareUrl
:
shareUrl
,
img
:
shareCover
,
...
...
@@ -127,7 +138,7 @@ define('mobile', function(require, exports) {
qqText
:
'【YOHOOD 2015】'
+
detailTitle
.
text
()
+
' '
+
detailSubtitle
.
text
()
+
'#YOHOOD 2015'
})
};
exports
.
show
=
function
()
{
$
(
".layout-item"
).
bind
(
"tap"
,
function
(
event
)
{
var
imageWidth
=
320
,
...
...
Please
register
or
login
to post a comment