fe / yohobuy-node · Commits

Go to a project

Authored by OF1706
Commit 62b5b762ee3063e93a6d06e4343693afb4b7b052 1 parent b504ca5f

code

Inline Side-by-side
Showing 9 changed files with 93 additions and 89 deletions
... ... @@ -172,11 +172,14 @@
</span>
<span id="code-buy" class="code-buy" skn="{{skn}}">
<i class="iconfont">&#xe703;</i>
<em>扫一扫购买</em>
<div class="code-box">
<div id="qrcode-img" class="code-img" data-url='https://union.yoho.cn/union/app-downloads.html?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"{{skn}}"}}'></div>
</div>
<div id="qrcode-img" class="code-img"
data-url='https://union.yoho.cn/union/app-downloads.html?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"{{skn}}"}}'>
</div>
<div class="code-font">
<em>手机客户端<br/>扫一扫购买</em>
</div>
</div>
</span>
</div>
... ...
... ... @@ -368,22 +368,20 @@
</div>
<div class="right-floating-layer hide">
<div class="qrcode-hover-box">
<a class="layer-box qrcode-download-right" href="//www.yohobuy.com/download/app" target="_blank">
<a class="layer-box qrcode-download-right" href="//www.yoho.cn/product#home" target="_blank">
<span class="qrcode-img">&nbsp;</span>
</a>
<div class="download-app-box">
<div class="download-app-left">
<div class="qr-code-img we-chat-code"></div>
<h5 class="qr-words">微信扫一扫</h5>
<h5 class="qr-words">关注"有货YOHOBUY"</h5>
<p class="qr-more">抽取限量球鞋还可赢免单大奖</p>
<h5 class="qr-words">关注公众号，赢免单</h5>
</div>
<div class="download-app-right">
<div class="qr-code-img mobile-code"></div>
<h5 class="qr-words">扫描二维码</h5>
<h5 class="qr-words">下载YohoBuy手机端</h5>
<h5 class="qr-more">
<a href="//www.yohobuy.com/download/app" target="_blank">更多客户端下载</a>
<h5 class="qr-words">下载手机客户端</h5>
<h5 class="qr-words qr-more">
<a href="//www.yoho.cn/product#home" target="_blank">更多客户端下载</a>
</h5>
</div>
</div>
... ...
... ... @@ -71,7 +71,7 @@
<a href="">关注有货</a>
<div class="download-app-box">
<div class="we-chat-img code-img"></div>
<h5 class="qr-words light">微信扫一扫</h5>
<h5 class="qr-words">微信扫一扫</h5>
<h5 class="qr-words">关注公众号，赢免单</h5>
</div>
</li>
... ... @@ -81,10 +81,9 @@
<a href="//www.yohobuy.com/download/app">手机版</a>
<div class="download-app-box">
<div class="qr-img code-img"></div>
<h5 class="qr-words">扫描二维码</h5>
<h5 class="qr-words">下载有货手机客户端</h5>
<h5 class="qr-more">
<a href="//www.yohobuy.com/download/app">更多客户端下载</a>
<a href="//www.yoho.cn/product#home">更多客户端</a>
</h5>
</div>
</li>
... ...

3.76 KB | W: | H:

3.55 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -396,15 +396,15 @@
.download-app-box {
position: absolute;
bottom: -80px;
left: -412px;
width: 412px;
height: 288px;
padding-left: 23px;
padding-right: 23px;
background-color: #f8f8f8;
left: -286px;
width: 276px;
height: 180px;
padding-left: 6px;
padding-right: 6px;
background-color: #f4f4f4;
z-index: 1000;
display: none;
border: 1px solid #b0b0b0;
border: none;
*zoom: 1;
&:after {
... ... @@ -418,43 +418,49 @@
.download-app-left,
.download-app-right {
position: relative;
float: left;
width: 182px;
width: 130px;
padding-top: 140px;
text-align: center;
}
.qr-code-img {
position: relative;
margin: 32px auto 15px;
width: 143px;
height: 147px;
margin: 0 auto;
width: 96px;
height: 168px;
}
.we-chat-code {
background-image: resolve("layout/qr-weixin.png");
position: absolute;
top: -32px;
left: 18px;
background-image: resolve("layout/qr-yifan.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mobile-code {
background-image: resolve("layout/qr.png");
position: absolute;
top: -33px;
right: 18px;
background-image: resolve("layout/qr-wenle.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.qr-words {
height: 25px;
line-height: 25px;
font-size: 16px;
height: 18px;
line-height: 18px;
font-size: 14px;
text-align: center;
color: #000;
}
.qr-more {
margin-top: 6px;
line-height: 25px;
font-size: 14px;
text-align: center;
a {
color: #d71d32;
}
}
p.qr-more {
... ...
... ... @@ -240,45 +240,39 @@
.download-app-box {
position: absolute;
top: 32px;
margin-left: -100px;
width: 229px;
height: 288px;
background-color: #f8f8f8;
border: 1px solid #b0b0b0;
margin-left: -35px;
width: 146px;
height: 216px;
background-color: #f4f4f4;
border: none;
z-index: 1000;
display: none;
.code-img {
position: relative;
margin: 32px auto 15px;
width: 143px;
height: 147px;
margin: 4px auto 3px;
width: 96px;
height: 168px;
}
.qr-img {
position: relative;
background-image: resolve("layout/qr.png");
background-image: resolve("layout/qr-wenle.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.we-chat-img {
position: relative;
background-image: resolve("layout/qr-weixin.png");
background-image: resolve("layout/qr-yifan.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.qr-words {
height: 25px;
line-height: 25px;
font-size: 16px;
text-align: center;
}
.qr-words,
.qr-more {
margin-top: 6px;
line-height: 25px;
height: 18px;
line-height: 18px;
font-size: 14px;
text-align: center;
}
... ... @@ -294,14 +288,8 @@
color: #86bf4a;
}
.light {
color: #444;
padding-top: 5px;
}
.download-app-box {
height: 268px;
margin-left: -68px;
margin-left: -26px;
}
}
... ...
... ... @@ -790,8 +790,7 @@
}
.collect-product,
.keep-shopping,
.code-buy {
.keep-shopping {
display: inline-block;
width: 140px;
height: 46px;
... ... @@ -821,40 +820,51 @@
}
.code-buy {
width: 150px;
position: relative;
&:hover .code-box {
display: block;
}
display: block;
width: 180px;
height: 90px;
text-align: center;
line-height: 42px;
margin-bottom: 15px;
background: #fff;
color: #222;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 16px;
cursor: pointer;
.code-box {
border: 1px solid #b0b0b0;
width: 150px;
height: 150px;
background: #f8f8f8;
position: absolute;
top: 62px;
left: -1px;
border: none;
width: 180px;
height: 90px;
box-sizing: border-box;
display: none;
z-index: 9;
*zoom: 1;
&:before {
content: "";
width: 16px;
height: 8px;
background: url("/product/arrow-top.png") no-repeat;
&:after {
content: " ";
display: block;
position: relative;
left: 67px;
top: -8px;
overflow: hidden;
clear: both;
}
.code-img {
width: 130px;
height: 130px;
margin: 2px auto;
float: left;
width: 90px;
height: 90px;
margin: 0 auto;
}
}
.code-font {
float: left;
width: 90px;
height: 90px;
em {
display: inline-block;
font-size: 14px;
line-height: 18px;
color: #000;
}
}
}
... ...