fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 4175b24c927622ff425e6b358d34db3310985484 1 parent d9e64c0b

page footer style rebuild

Inline Side-by-side
Showing 3 changed files with 429 additions and 41 deletions
<div class="yoho-footer">
<div class="footertop">
<div class="index-foot">
<dl class="clearfix screen">
<dl class="center-content clearfix">
<dd>
<div class="foot-panel">
<div class="title relative">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>有货SERVICES</span>
</div>
</div>
<div id="foot-services">
<ul class="clearfix two-dim">
<ul class="two-dim clearfix">
<li class="left">
<div class="">
<div>
<a href="javascript:void(0);">
<img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png" src="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png" style=""></a>
<img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png"></a>
<p>YOHO!有货</p>
</div>
</li>
<li class="left">
<div class="">
<div>
<a href="javascript:void(0);">
<img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg" src="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg" style=""></a>
<img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg"></a>
<p>微信</p>
</div>
</li>
<li class="left">
<div class="">
<div>
<a href="javascript:void(0);">
<img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png" src="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png" style="display: inline;"></a>
<img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png"></a>
<p>微博</p>
</div>
</li>
... ... @@ -38,19 +38,19 @@
</div>
<p class="item-nav center" id="button-services">
<a href="javascript:void(0);" key="0">
<span class="ifont10 cur">O</span>
<span class="iconfont cur">O</span>
</a>
</p>
</dd>
<dd>
<div class="foot-panel" id="feedbackBoxList">
<div class="title relative">
<div id="feedbackBoxList" class="foot-panel">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>意见反馈</span>
</div>
</div>
<ul class="clearfix vote">
<ul class="vote clearfix">
<li style="display:block" key="0">
<form action="#" id="feedbackForm">
<input type="hidden" name="question_id" id="question_id" value="38">
... ... @@ -108,46 +108,49 @@
</li>
</ul>
</div>
<p class="item-nav center" id="feedbackPage">
<p id="feedbackPage" class="item-nav center">
<a href="javascript:void(0);">
<span class="ifont10 cur">O</span>
<span class="iconfont cur">O</span>
</a>
<a href="javascript:void(0);">
<span class="ifont10 ">o</span>
<span class="iconfont ">o</span>
</a>
<a href="javascript:void(0);">
<span class="ifont10 ">o</span>
<span class="iconfont ">o</span>
</a>
</p>
</dd>
<dd class="last">
<div class="foot-panel">
<div class="title relative">
<div class="title">
<div class="title-line"></div>
<div class="text">
<span>更多 YOHO!产品</span>
</div>
</div>
<div id="foot-mobile">
<ul class="clearfix mobile">
<ul class="mobile clearfix">
<li>
<a href="http://app.yohoshow.com/" target="_blank" titl="">
<img alt="" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg" class="lazy" src="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg" style=""></a>
<a href="http://app.yohoshow.com/" target="_blank">
<img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg">
</a>
</li>
<li>
<a href="http://www.yohoboys.com/" target="_blank" titl="">
<img alt="" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg" class="lazy" src="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg" style=""></a>
<a href="http://www.yohoboys.com/" target="_blank">
<img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg">
</a>
</li>
<li>
<a href="http://www.yohogirls.com/" target="_blank" titl="">
<img alt="" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg" class="lazy" src="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg" style=""></a>
<a href="http://www.yohogirls.com/" target="_blank">
<img class="lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg">
</a>
</li>
</ul>
</div>
</div>
<p class="item-nav center" id="button-mobile">
<a href="javascript:void(0);">
<span class="ifont10 cur">O</span>
<span class="iconfont cur">O</span>
</a>
</p>
</dd>
... ... @@ -156,39 +159,36 @@
</div>
<div class="footerbottom">
<div class="promise">
<div class="screen clearfix">
<div class="center-content clearfix">
<div class="left">
<span class="ifont rgbf">g</span>
<span class="iconfont rgbf">g</span>
<span class="red">100%</span>
<span class="rgbf">品牌授权正品</span>
</div>
<div class="left">
<span class="ifont rgbf">L</span>
<span class="iconfont rgbf">L</span>
<span class="red">7天</span>
<span class="rgbf">无理由退换货</span>
</div>
<div class="left">
<span class="ifont rgbf">p</span>
<span class="iconfont rgbf">p</span>
<span class="rgbf">客服电话：</span>
<span class="red">400-889-9646</span>
&nbsp;&nbsp;
<span class="rgb9">08:00-22:30(周一至周日)</span>
&nbsp;&nbsp;
<span>
<a href="http://chat80.live800.com/live800/chatClient/chatbox.jsp?companyID=493979&amp;configID=123576&amp;jid=9277320930" target="_blank" style="color:red">在线客服</a>
<a class="red" href="http://chat80.live800.com/live800/chatClient/chatbox.jsp?companyID=493979&amp;configID=123576&amp;jid=9277320930" target="_blank">在线客服</a>
</span>
</div>
<div class="right subscribe footer-right">
<input class="rgb6 top" name="subscriberBox" id="subscriberBox" value="订阅我们的邮件">
<a href="javascript:void(0);" id="subscriberBtn" class="ifont rgbf">m</a>
<!--<input class="rgb6 top wrong" value="订阅我们的邮件" />
<a href="" class="ifont rgbf done">=</a>
-->
</div>
</div>
</div>
<div class="footer-help">
<div class="screen clearfix">
<div class="center-content clearfix">
<div class="left">
<ul class="clearfix">
<li class="left">
... ... @@ -315,12 +315,14 @@
</div>
</div>
<div class="footer-link">
<div class="screen clearfix">
<div class="center-content clearfix">
<div class="left right-flag">
<a href="https://ss.knet.cn/verifyseal.dll?sn=e14021832010046477dka7000000&amp;ct=df&amp;a=1&amp;pa=0.5902942178957805" target="_blank" rel="nofollow">
<img src="http://static.yohobuy.com/images/v3/icon/credit-flag3.png"></a>
<img src="http://static.yohobuy.com/images/v3/icon/credit-flag3.png">
</a>
<a href="http://www.isc.org.cn/" target="_blank" rel="nofollow">
<img src="http://static.yohobuy.com/images/v3/icon/isc2.png"></a>
<img src="http://static.yohobuy.com/images/v3/icon/isc2.png">
</a>
</div>
<div class="left about-us">
<p>
... ... @@ -340,7 +342,7 @@
</p>
<p>
CopyRight © 2007-2016 南京新与力文化传播有限公司
<a href="http://www.miibeian.gov.cn/" target="_blank" style="color:#666">苏ICP备09011225号</a>
<a class="rbg6" href="http://www.miibeian.gov.cn/" target="_blank">苏ICP备09011225号</a>
NewPower Co. 版权所有 经营许可证编号：苏B2-20120395
</p>
</div>
... ... @@ -348,4 +350,7 @@
</div>
</div>
</div>
<div class="return-top">
<span class="iconfont">&#xe610;</span>
</div>
</div>
\ No newline at end of file
... ...
.yoho-footer {
font-size: 12px;
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
* {
box-sizing: border-box;
}
.red {
color: #ee0011;
}
.rgb6 {
color: #666;
}
.rgb9 {
color: #999;
}
.rgbf {
color: #fff;
}
.index-foot {
background: #eeeeee;
padding:20px 0;
dd {
width: 370px;
margin-right: 20px;
float: left;
overflow:hidden;
&.last {
margin-right: 0;
}
.foot-panel {
background: #fff;
padding: 20px;
}
.title {
position: relative;
text-align: center;
}
.title-line {
border-bottom: 1px solid #dddddd;
position: absolute;
top: 9px;
width: 100%;
left: 0;
}
.text {
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
span {
background: #fff;
font-size: 18px;
line-height: 18px;
padding: 0 10px;
}
}
ul {
margin-top: 18px;
padding-top: 18px;
}
.two-dim {
margin-right: -10px;
overflow: hidden;
li {
border: 1px solid #ddd;
padding: 7px;
margin-right: 10px;
a {
display: block;
}
p {
text-align: center;
margin-top: 13px;
margin-bottom: 3px;
line-height: 12px;
}
}
}
.dim-img {
display: block;
width: 87px;
height: 87px;
}
.dim-hover {
position: absolute;
img {
width: 38px;
height: 38px;
}
}
.dim-active .dim-img {
opacity: 1;
filter:alpha(opacity=100);
}
.dim-active .dim-hover {
display: none;
}
.item-nav{
padding-top: 20px;
a {
color: #999;
padding: 0 3px;
cursor:pointer;
}
}
}
.vote {
line-height: 24px;
input {
margin: 0 5px 0 1px;
}
.button {
height: 24px;
line-height: 24px;
width: 55px;
font-size: 12px;
margin-top: 10px;
margin-right: 10px;
background: #222;
color: #fff;
display: inline-block;
text-align: center;
}
p {
height: 24px;
overflow: hidden;
}
textarea{
width: 98%;
height: 60px;
vertical-align: middle;
margin: 5px 0px 0px 0px;
resize:none;
}
}
.vote-item p {
float: left;
width: 50%;
}
.mobile {
margin-right: -10px;
li {
margin-right: 10px;
float: left;
margin-bottom: 12px;
}
img {
width: 103px;
height: 131px;
}
}
.index-banner {
width: 100%;
margin-top: 20px;
}
}
.footerbottom {
width: 100%;
}
.promise {
padding: 20px 0 10px 0;
background: #000;
.left {
margin-right: 60px;
line-height: 30px;
font-size: 12px;
font-weight: bold;
}
}
.subscribe {
border: 1px solid #262626;
width: 240px;
input {
width: 180px;
height: 32px;
padding: 0 10px;
line-height: 32px;
border: none;
margin: 0;
background: #000;
}
a {
margin-left: 10px;
font-size: 18px;
line-height: 32px;
opacity: 0.5;
filter: alpha(opacity=50);
}
}
.footer-help {
background: #000;
font-size: 12px;
overflow: hidden;
ul {
width: 110%;
}
p {
line-height: 24px;
span {
color: #fff;
}
a {
color: #666;
&:hover {
text-decoration: underline;
}
}
}
li {
width: 180px;
}
.screen {
border-top: 1px solid #262626;
padding: 15px 0;
}
}
.footer-link {
background: #000;
padding: 10px 0 30px 0;
font-size: 12px;
.right-flag {
margin-top: 3px;
a {
margin-right: 5px;
}
}
.about-us {
line-height: 20px;
color: #666;
margin-left: 10px;
a {
color: #666;
}
span {
padding: 0 10px;
}
}
}
.return-top {
position: fixed;
width: 60px;
height: 60px;
left: 50%;
margin-left: 595px;
text-align: center;
line-height: 50px;
color: #fff;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
bottom: 20px;
cursor: pointer;
&:hover {
opacity: 0.9;
filter: alpha(opacity=90);
}
.iconfont {
font-size: 34px;
}
}
}
@media (max-width: 1360px) {
.yoho-footer .return-top {
left: 100%;
right: 20px;
margin-left: auto;
}
}
@media (max-width:1180px) {
.yoho-footer {
.index-foot dd {
width: 316px;
.two-dim {
margin-top: 26px;
margin-bottom: 10px;
overflow: hidden;
}
.dim-img {
width: 69px;
height: 69px;
}
.mobile img {
width: 85px;
height: 108px;
}
}
.subscribe {
width: 200px;
input {
width: 140px;
}
}
.footer-help li {
width: 150px;
}
}
}
\ No newline at end of file
... ...
... ... @@ -3,7 +3,7 @@
@import "compass",
"compass/reset",
"header",
"footer",
"page-footer",
"path-nav";
body {
... ... @@ -60,10 +60,15 @@ a:focus {
outline: none;
}
.yoho-page {
.center-content {
width: 1150px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1180px) {
.center-content {
width: 990px;
}
}
@import "home/index", "product/index";
\ No newline at end of file
... ...