Authored by 李奇

低版本浏览器小于IE9、提示升级

... ... @@ -53,6 +53,27 @@
{{/if}}
{{> footer}}
<!--[if lt IE 9]>
<div class="invalid-ie">
<div class="invalid-ie-cover"></div>
<div class="invalid-ie-content">
<p class="tip">您使用的浏览器版本过低,</p>
<p class="tip">可能有安全风险,您可以选择</p>
<p class="tip-download">Yoho!Buy有货APP扫码浏览</p>
<div class="download">
<span class="app-icon"></span>
<span class="app-qrcode"></span>
</div>
<a class="link first" href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop">
谷歌浏览器
</a>
<a class="link" href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">
IE浏览器最新版
</a>
<div class="spokesman"></div>
</div>
</div>
<![endif]-->
<script>window._yasVersion='2.4.8';</script>
{{#if devEnv}}
... ...
... ... @@ -12,3 +12,4 @@
@import "foot-pager";
@import "list";
@import "good";
@import "invalid-ie";
... ...
.invalid-ie {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999999;
.invalid-ie-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
background: #000;
}
.invalid-ie-content {
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
width: 590px;
height: 328px;
padding-top: 49px;
padding-left: 45px;
margin-top: -164px;
margin-left: -295px;
background: #fff;
.tip {
color: #b0b0b0;
font-size: 16px;
line-height: 24px;
}
.tip-download {
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.download {
margin-bottom: 24px;
}
.link {
color: #444;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #444;
&.first {
margin-right: 10px;
}
}
.app-icon {
display: inline-block;
width: 100px;
height: 100px;
background: resolve(layout/app-icon.png);
}
.app-qrcode {
box-sizing: border-box;
display: inline-block;
width: 96px;
height: 96px;
padding: 4px;
margin-left: 16px;
margin-bottom: 2px;
background: resolve(layout/app-qrcode.png);
}
.spokesman {
position: absolute;
width: 293px;
height: 356px;
bottom: 0;
right: 20px;
background: resolve(layout/spokesman.png);
}
}
}
... ...