chenchao / YOHOBUYPC · 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
1 <div class="yoho-footer"> 1 <div class="yoho-footer">
2 <div class="footertop"> 2 <div class="footertop">
3 <div class="index-foot"> 3 <div class="index-foot">
4 - <dl class="clearfix screen"> 4 + <dl class="center-content clearfix">
5 <dd> 5 <dd>
6 <div class="foot-panel"> 6 <div class="foot-panel">
7 - <div class="title relative"> 7 + <div class="title">
8 <div class="title-line"></div> 8 <div class="title-line"></div>
9 <div class="text"> 9 <div class="text">
10 <span>有货SERVICES</span> 10 <span>有货SERVICES</span>
11 </div> 11 </div>
12 </div> 12 </div>
13 <div id="foot-services"> 13 <div id="foot-services">
14 - <ul class="clearfix two-dim"> 14 + <ul class="two-dim clearfix">
15 <li class="left"> 15 <li class="left">
16 - <div class=""> 16 + <div>
17 <a href="javascript:void(0);"> 17 <a href="javascript:void(0);">
18 - <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> 18 + <img class="dim-img lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/03/20/16/01863b297051f11c2be833785566cf11d1.png"></a>
19 <p>YOHO!有货</p> 19 <p>YOHO!有货</p>
20 </div> 20 </div>
21 </li> 21 </li>
22 <li class="left"> 22 <li class="left">
23 - <div class=""> 23 + <div>
24 <a href="javascript:void(0);"> 24 <a href="javascript:void(0);">
25 - <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> 25 + <img class="dim-img lazy" data-original="http://img12.static.yhbimg.com/adpic/2014/04/11/14/022ddc2b6d6b2fcabee8cdc03735e5687e.jpg"></a>
26 <p>微信</p> 26 <p>微信</p>
27 </div> 27 </div>
28 </li> 28 </li>
29 <li class="left"> 29 <li class="left">
30 - <div class=""> 30 + <div>
31 <a href="javascript:void(0);"> 31 <a href="javascript:void(0);">
32 - <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> 32 + <img class="dim-img lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/03/20/16/02e69d0afa222cf173d17411fd04be380e.png"></a>
33 <p>微博</p> 33 <p>微博</p>
34 </div> 34 </div>
35 </li> 35 </li>
@@ -38,19 +38,19 @@ @@ -38,19 +38,19 @@
38 </div> 38 </div>
39 <p class="item-nav center" id="button-services"> 39 <p class="item-nav center" id="button-services">
40 <a href="javascript:void(0);" key="0"> 40 <a href="javascript:void(0);" key="0">
41 - <span class="ifont10 cur">O</span> 41 + <span class="iconfont cur">O</span>
42 </a> 42 </a>
43 </p> 43 </p>
44 </dd> 44 </dd>
45 <dd> 45 <dd>
46 - <div class="foot-panel" id="feedbackBoxList">  
47 - <div class="title relative"> 46 + <div id="feedbackBoxList" class="foot-panel">
  47 + <div class="title">
48 <div class="title-line"></div> 48 <div class="title-line"></div>
49 <div class="text"> 49 <div class="text">
50 <span>意见反馈</span> 50 <span>意见反馈</span>
51 </div> 51 </div>
52 </div> 52 </div>
53 - <ul class="clearfix vote"> 53 + <ul class="vote clearfix">
54 <li style="display:block" key="0"> 54 <li style="display:block" key="0">
55 <form action="#" id="feedbackForm"> 55 <form action="#" id="feedbackForm">
56 <input type="hidden" name="question_id" id="question_id" value="38"> 56 <input type="hidden" name="question_id" id="question_id" value="38">
@@ -108,46 +108,49 @@ @@ -108,46 +108,49 @@
108 </li> 108 </li>
109 </ul> 109 </ul>
110 </div> 110 </div>
111 - <p class="item-nav center" id="feedbackPage"> 111 + <p id="feedbackPage" class="item-nav center">
112 <a href="javascript:void(0);"> 112 <a href="javascript:void(0);">
113 - <span class="ifont10 cur">O</span> 113 + <span class="iconfont cur">O</span>
114 </a> 114 </a>
115 <a href="javascript:void(0);"> 115 <a href="javascript:void(0);">
116 - <span class="ifont10 ">o</span> 116 + <span class="iconfont ">o</span>
117 </a> 117 </a>
118 <a href="javascript:void(0);"> 118 <a href="javascript:void(0);">
119 - <span class="ifont10 ">o</span> 119 + <span class="iconfont ">o</span>
120 </a> 120 </a>
121 </p> 121 </p>
122 </dd> 122 </dd>
123 <dd class="last"> 123 <dd class="last">
124 <div class="foot-panel"> 124 <div class="foot-panel">
125 - <div class="title relative"> 125 + <div class="title">
126 <div class="title-line"></div> 126 <div class="title-line"></div>
127 <div class="text"> 127 <div class="text">
128 <span>更多 YOHO!产品</span> 128 <span>更多 YOHO!产品</span>
129 </div> 129 </div>
130 </div> 130 </div>
131 <div id="foot-mobile"> 131 <div id="foot-mobile">
132 - <ul class="clearfix mobile"> 132 + <ul class="mobile clearfix">
133 <li> 133 <li>
134 - <a href="http://app.yohoshow.com/" target="_blank" titl="">  
135 - <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> 134 + <a href="http://app.yohoshow.com/" target="_blank">
  135 + <img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/02d5e1cbc15ab59856f4a758fa860462ed.jpg">
  136 + </a>
136 </li> 137 </li>
137 <li> 138 <li>
138 - <a href="http://www.yohoboys.com/" target="_blank" titl="">  
139 - <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> 139 + <a href="http://www.yohoboys.com/" target="_blank">
  140 + <img class="lazy" data-original="http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg">
  141 + </a>
140 </li> 142 </li>
141 <li> 143 <li>
142 - <a href="http://www.yohogirls.com/" target="_blank" titl="">  
143 - <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> 144 + <a href="http://www.yohogirls.com/" target="_blank">
  145 + <img class="lazy" data-original="http://img11.static.yhbimg.com/adpic/2014/07/21/15/018be2a193424658b5201240ef8c7729e6.jpg">
  146 + </a>
144 </li> 147 </li>
145 </ul> 148 </ul>
146 </div> 149 </div>
147 </div> 150 </div>
148 <p class="item-nav center" id="button-mobile"> 151 <p class="item-nav center" id="button-mobile">
149 <a href="javascript:void(0);"> 152 <a href="javascript:void(0);">
150 - <span class="ifont10 cur">O</span> 153 + <span class="iconfont cur">O</span>
151 </a> 154 </a>
152 </p> 155 </p>
153 </dd> 156 </dd>
@@ -156,39 +159,36 @@ @@ -156,39 +159,36 @@
156 </div> 159 </div>
157 <div class="footerbottom"> 160 <div class="footerbottom">
158 <div class="promise"> 161 <div class="promise">
159 - <div class="screen clearfix"> 162 + <div class="center-content clearfix">
160 <div class="left"> 163 <div class="left">
161 - <span class="ifont rgbf">g</span> 164 + <span class="iconfont rgbf">g</span>
162 <span class="red">100%</span> 165 <span class="red">100%</span>
163 <span class="rgbf">品牌授权正品</span> 166 <span class="rgbf">品牌授权正品</span>
164 </div> 167 </div>
165 <div class="left"> 168 <div class="left">
166 - <span class="ifont rgbf">L</span> 169 + <span class="iconfont rgbf">L</span>
167 <span class="red">7天</span> 170 <span class="red">7天</span>
168 <span class="rgbf">无理由退换货</span> 171 <span class="rgbf">无理由退换货</span>
169 </div> 172 </div>
170 <div class="left"> 173 <div class="left">
171 - <span class="ifont rgbf">p</span> 174 + <span class="iconfont rgbf">p</span>
172 <span class="rgbf">客服电话：</span> 175 <span class="rgbf">客服电话：</span>
173 <span class="red">400-889-9646</span> 176 <span class="red">400-889-9646</span>
174 &nbsp;&nbsp; 177 &nbsp;&nbsp;
175 <span class="rgb9">08:00-22:30(周一至周日)</span> 178 <span class="rgb9">08:00-22:30(周一至周日)</span>
176 &nbsp;&nbsp; 179 &nbsp;&nbsp;
177 <span> 180 <span>
178 - <a href="http://chat80.live800.com/live800/chatClient/chatbox.jsp?companyID=493979&amp;configID=123576&amp;jid=9277320930" target="_blank" style="color:red">在线客服</a> 181 + <a class="red" href="http://chat80.live800.com/live800/chatClient/chatbox.jsp?companyID=493979&amp;configID=123576&amp;jid=9277320930" target="_blank">在线客服</a>
179 </span> 182 </span>
180 </div> 183 </div>
181 <div class="right subscribe footer-right"> 184 <div class="right subscribe footer-right">
182 <input class="rgb6 top" name="subscriberBox" id="subscriberBox" value="订阅我们的邮件"> 185 <input class="rgb6 top" name="subscriberBox" id="subscriberBox" value="订阅我们的邮件">
183 <a href="javascript:void(0);" id="subscriberBtn" class="ifont rgbf">m</a> 186 <a href="javascript:void(0);" id="subscriberBtn" class="ifont rgbf">m</a>
184 - <!--<input class="rgb6 top wrong" value="订阅我们的邮件" />  
185 - <a href="" class="ifont rgbf done">=</a>  
186 - -->  
187 </div> 187 </div>
188 </div> 188 </div>
189 </div> 189 </div>
190 <div class="footer-help"> 190 <div class="footer-help">
191 - <div class="screen clearfix"> 191 + <div class="center-content clearfix">
192 <div class="left"> 192 <div class="left">
193 <ul class="clearfix"> 193 <ul class="clearfix">
194 <li class="left"> 194 <li class="left">
@@ -315,12 +315,14 @@ @@ -315,12 +315,14 @@
315 </div> 315 </div>
316 </div> 316 </div>
317 <div class="footer-link"> 317 <div class="footer-link">
318 - <div class="screen clearfix"> 318 + <div class="center-content clearfix">
319 <div class="left right-flag"> 319 <div class="left right-flag">
320 <a href="https://ss.knet.cn/verifyseal.dll?sn=e14021832010046477dka7000000&amp;ct=df&amp;a=1&amp;pa=0.5902942178957805" target="_blank" rel="nofollow"> 320 <a href="https://ss.knet.cn/verifyseal.dll?sn=e14021832010046477dka7000000&amp;ct=df&amp;a=1&amp;pa=0.5902942178957805" target="_blank" rel="nofollow">
321 - <img src="http://static.yohobuy.com/images/v3/icon/credit-flag3.png"></a> 321 + <img src="http://static.yohobuy.com/images/v3/icon/credit-flag3.png">
  322 + </a>
322 <a href="http://www.isc.org.cn/" target="_blank" rel="nofollow"> 323 <a href="http://www.isc.org.cn/" target="_blank" rel="nofollow">
323 - <img src="http://static.yohobuy.com/images/v3/icon/isc2.png"></a> 324 + <img src="http://static.yohobuy.com/images/v3/icon/isc2.png">
  325 + </a>
324 </div> 326 </div>
325 <div class="left about-us"> 327 <div class="left about-us">
326 <p> 328 <p>
@@ -340,7 +342,7 @@ @@ -340,7 +342,7 @@
340 </p> 342 </p>
341 <p> 343 <p>
342 CopyRight © 2007-2016 南京新与力文化传播有限公司 344 CopyRight © 2007-2016 南京新与力文化传播有限公司
343 - <a href="http://www.miibeian.gov.cn/" target="_blank" style="color:#666">苏ICP备09011225号</a> 345 + <a class="rbg6" href="http://www.miibeian.gov.cn/" target="_blank">苏ICP备09011225号</a>
344 NewPower Co. 版权所有 经营许可证编号：苏B2-20120395 346 NewPower Co. 版权所有 经营许可证编号：苏B2-20120395
345 </p> 347 </p>
346 </div> 348 </div>
@@ -348,4 +350,7 @@ @@ -348,4 +350,7 @@
348 </div> 350 </div>
349 </div> 351 </div>
350 </div> 352 </div>
  353 + <div class="return-top">
  354 + <span class="iconfont">&#xe610;</span>
  355 + </div>
351 </div> 356 </div>
  1 +.yoho-footer {
  2 + font-size: 12px;
  3 +
  4 + .left {
  5 + float: left;
  6 + }
  7 +
  8 + .right {
  9 + float: right;
  10 + }
  11 +
  12 + .center {
  13 + text-align: center;
  14 + }
  15 +
  16 + * {
  17 + box-sizing: border-box;
  18 + }
  19 +
  20 + .red {
  21 + color: #ee0011;
  22 + }
  23 +
  24 + .rgb6 {
  25 + color: #666;
  26 + }
  27 +
  28 + .rgb9 {
  29 + color: #999;
  30 + }
  31 +
  32 + .rgbf {
  33 + color: #fff;
  34 + }
  35 +
  36 + .index-foot {
  37 + background: #eeeeee;
  38 + padding:20px 0;
  39 +
  40 + dd {
  41 + width: 370px;
  42 + margin-right: 20px;
  43 + float: left;
  44 + overflow:hidden;
  45 +
  46 + &.last {
  47 + margin-right: 0;
  48 + }
  49 +
  50 + .foot-panel {
  51 + background: #fff;
  52 + padding: 20px;
  53 + }
  54 +
  55 + .title {
  56 + position: relative;
  57 + text-align: center;
  58 + }
  59 +
  60 + .title-line {
  61 + border-bottom: 1px solid #dddddd;
  62 + position: absolute;
  63 + top: 9px;
  64 + width: 100%;
  65 + left: 0;
  66 + }
  67 +
  68 + .text {
  69 + position: absolute;
  70 + width: 100%;
  71 + text-align: center;
  72 + left: 0;
  73 + top: 0;
  74 +
  75 + span {
  76 + background: #fff;
  77 + font-size: 18px;
  78 + line-height: 18px;
  79 + padding: 0 10px;
  80 + }
  81 + }
  82 +
  83 + ul {
  84 + margin-top: 18px;
  85 + padding-top: 18px;
  86 + }
  87 +
  88 + .two-dim {
  89 + margin-right: -10px;
  90 + overflow: hidden;
  91 +
  92 + li {
  93 + border: 1px solid #ddd;
  94 + padding: 7px;
  95 + margin-right: 10px;
  96 +
  97 + a {
  98 + display: block;
  99 + }
  100 +
  101 + p {
  102 + text-align: center;
  103 + margin-top: 13px;
  104 + margin-bottom: 3px;
  105 + line-height: 12px;
  106 + }
  107 + }
  108 + }
  109 +
  110 + .dim-img {
  111 + display: block;
  112 + width: 87px;
  113 + height: 87px;
  114 + }
  115 +
  116 + .dim-hover {
  117 + position: absolute;
  118 +
  119 + img {
  120 + width: 38px;
  121 + height: 38px;
  122 + }
  123 + }
  124 +
  125 + .dim-active .dim-img {
  126 + opacity: 1;
  127 + filter:alpha(opacity=100);
  128 + }
  129 +
  130 + .dim-active .dim-hover {
  131 + display: none;
  132 + }
  133 +
  134 + .item-nav{
  135 + padding-top: 20px;
  136 +
  137 + a {
  138 + color: #999;
  139 + padding: 0 3px;
  140 + cursor:pointer;
  141 + }
  142 + }
  143 + }
  144 +
  145 + .vote {
  146 + line-height: 24px;
  147 +
  148 + input {
  149 + margin: 0 5px 0 1px;
  150 + }
  151 +
  152 + .button {
  153 + height: 24px;
  154 + line-height: 24px;
  155 + width: 55px;
  156 + font-size: 12px;
  157 + margin-top: 10px;
  158 + margin-right: 10px;
  159 + background: #222;
  160 + color: #fff;
  161 + display: inline-block;
  162 + text-align: center;
  163 + }
  164 +
  165 + p {
  166 + height: 24px;
  167 + overflow: hidden;
  168 + }
  169 +
  170 + textarea{
  171 + width: 98%;
  172 + height: 60px;
  173 + vertical-align: middle;
  174 + margin: 5px 0px 0px 0px;
  175 + resize:none;
  176 + }
  177 + }
  178 +
  179 + .vote-item p {
  180 + float: left;
  181 + width: 50%;
  182 +
  183 + }
  184 +
  185 + .mobile {
  186 + margin-right: -10px;
  187 +
  188 + li {
  189 + margin-right: 10px;
  190 + float: left;
  191 + margin-bottom: 12px;
  192 + }
  193 +
  194 + img {
  195 + width: 103px;
  196 + height: 131px;
  197 + }
  198 + }
  199 +
  200 + .index-banner {
  201 + width: 100%;
  202 + margin-top: 20px;
  203 + }
  204 + }
  205 +
  206 + .footerbottom {
  207 + width: 100%;
  208 +
  209 +
  210 + }
  211 +
  212 + .promise {
  213 + padding: 20px 0 10px 0;
  214 + background: #000;
  215 +
  216 + .left {
  217 + margin-right: 60px;
  218 + line-height: 30px;
  219 + font-size: 12px;
  220 + font-weight: bold;
  221 + }
  222 + }
  223 +
  224 + .subscribe {
  225 + border: 1px solid #262626;
  226 + width: 240px;
  227 +
  228 + input {
  229 + width: 180px;
  230 + height: 32px;
  231 + padding: 0 10px;
  232 + line-height: 32px;
  233 + border: none;
  234 + margin: 0;
  235 + background: #000;
  236 + }
  237 +
  238 + a {
  239 + margin-left: 10px;
  240 + font-size: 18px;
  241 + line-height: 32px;
  242 + opacity: 0.5;
  243 + filter: alpha(opacity=50);
  244 + }
  245 + }
  246 +
  247 + .footer-help {
  248 + background: #000;
  249 + font-size: 12px;
  250 + overflow: hidden;
  251 +
  252 + ul {
  253 + width: 110%;
  254 + }
  255 +
  256 + p {
  257 + line-height: 24px;
  258 +
  259 + span {
  260 + color: #fff;
  261 + }
  262 +
  263 + a {
  264 + color: #666;
  265 +
  266 + &:hover {
  267 + text-decoration: underline;
  268 + }
  269 + }
  270 + }
  271 +
  272 + li {
  273 + width: 180px;
  274 + }
  275 +
  276 + .screen {
  277 + border-top: 1px solid #262626;
  278 + padding: 15px 0;
  279 + }
  280 + }
  281 +
  282 + .footer-link {
  283 + background: #000;
  284 + padding: 10px 0 30px 0;
  285 + font-size: 12px;
  286 +
  287 + .right-flag {
  288 + margin-top: 3px;
  289 +
  290 + a {
  291 + margin-right: 5px;
  292 + }
  293 + }
  294 +
  295 + .about-us {
  296 + line-height: 20px;
  297 + color: #666;
  298 + margin-left: 10px;
  299 +
  300 + a {
  301 + color: #666;
  302 + }
  303 +
  304 + span {
  305 + padding: 0 10px;
  306 + }
  307 + }
  308 + }
  309 +
  310 + .return-top {
  311 + position: fixed;
  312 + width: 60px;
  313 + height: 60px;
  314 + left: 50%;
  315 + margin-left: 595px;
  316 + text-align: center;
  317 + line-height: 50px;
  318 + color: #fff;
  319 + background: #000;
  320 + opacity: 0.5;
  321 + filter: alpha(opacity=50);
  322 + bottom: 20px;
  323 + cursor: pointer;
  324 + &:hover {
  325 + opacity: 0.9;
  326 + filter: alpha(opacity=90);
  327 + }
  328 +
  329 + .iconfont {
  330 + font-size: 34px;
  331 + }
  332 + }
  333 +}
  334 +
  335 +@media (max-width: 1360px) {
  336 + .yoho-footer .return-top {
  337 + left: 100%;
  338 + right: 20px;
  339 + margin-left: auto;
  340 + }
  341 +}
  342 +
  343 +@media (max-width:1180px) {
  344 + .yoho-footer {
  345 +
  346 + .index-foot dd {
  347 + width: 316px;
  348 +
  349 + .two-dim {
  350 + margin-top: 26px;
  351 + margin-bottom: 10px;
  352 + overflow: hidden;
  353 + }
  354 +
  355 + .dim-img {
  356 + width: 69px;
  357 + height: 69px;
  358 + }
  359 +
  360 + .mobile img {
  361 + width: 85px;
  362 + height: 108px;
  363 + }
  364 + }
  365 +
  366 + .subscribe {
  367 + width: 200px;
  368 +
  369 + input {
  370 + width: 140px;
  371 + }
  372 + }
  373 +
  374 + .footer-help li {
  375 + width: 150px;
  376 + }
  377 + }
  378 +}
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 @import "compass", 3 @import "compass",
4 "compass/reset", 4 "compass/reset",
5 "header", 5 "header",
6 - "footer", 6 + "page-footer",
7 "path-nav"; 7 "path-nav";
8 8
9 body { 9 body {
@@ -60,10 +60,15 @@ a:focus { @@ -60,10 +60,15 @@ a:focus {
60 outline: none; 60 outline: none;
61 } 61 }
62 62
63 -.yoho-page { 63 +.center-content {
64 width: 1150px; 64 width: 1150px;
65 margin-left: auto; 65 margin-left: auto;
66 margin-right: auto; 66 margin-right: auto;
67 } 67 }
68 68
  69 +@media (max-width: 1180px) {
  70 + .center-content {
  71 + width: 990px;
  72 + }
  73 +}
69 @import "home/index", "product/index"; 74 @import "home/index", "product/index";