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

@@ -53,6 +53,27 @@
         {{/if}}
         {{/if}}
         {{> footer}}
         {{> 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>
         <script>window._yasVersion='2.4.8';</script>
 
 
         {{#if devEnv}}
         {{#if devEnv}}

@@ -12,3 +12,4 @@
 @import "foot-pager";
 @import "foot-pager";
 @import "list";
 @import "list";
 @import "good";
 @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);
+        }
+    }
+}