ie浏览器提示信息

front/public/static/css/modal.css

@@ -13,14 +13,13 @@
 }
 
 .model-container {
-    width: 360px;
+    width: 446px;
-    height: 150px;
+    height: 194px;
     background: #fff;
-    border-radius: 10px;
-    /* box-shadow: 0px 0px 12px 4px #ff3; */
     text-align: center;
     font-size: 18px;
-    color: #333;
+    color: #707070;
+    font-family: 'Alibaba PuHuiTi';
     position: absolute;
     top: 50%;
     left: 50%;
@@ -33,7 +32,32 @@
 }
 
 .model-container .model-title {
-    font-size: 16px;
+    height: 40px;
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 10px;
+    background: #007fff;
+    text-align: left;
+}
+
+.model-container .title-span {
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 18px !important;
+    color: #ffffff;
+}
+
+.model-container .model-close {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAALZJREFUOE9jZACC////ZwIpcyBOZGRk/A8SIwSAehqAatiB6itBahmBAhVAuh2qcRGQTiBkGNSQeqie6UA6G2QQyGSYIEgOr2E41UO9RpRh+CxlhIUFIZcRkocbhM9lUK/j9T6KQTgMuwgU10eKRaxhiGEQDsNg5uCMCKwGQQ07AKTtkVxyF8hWxZU0aOciLLFDehjhimKSYo1QOiEkDw4jQoqISbTUy2tUy/1Qr1FeHiElOIqYAKkPngur14nOAAAAAElFTkSuQmCC);
+}
+
+.model-container .model-content {
+    margin-top: 24px;
 }
 
 .model-container .controls {
@@ -51,25 +75,32 @@
     cursor: pointer;
 }
 
-.model-container .confirm {
+.model-container .confirmChrome {
-    width: 60px;
+    width: 140px;
-    height: 30px;
+    height: 36px;
     background: #0087ff;
     border-radius: 0.04rem !important;
-    font-size: 14px;
+    font-size: 16px;
-    font-weight: 400;
+    font-family: 'Alibaba PuHuiTi';
     color: #fff;
-    line-height: 30px;
+    line-height: 36px;
+    border-radius: 6px;
 }
 
-.model-container .cancel {
+.model-container .confirm360 {
-    width: 60px;
+    width: 140px;
-    height: 30px;
+    height: 36px;
     background: #0087ff;
     border-radius: 0.04rem !important;
-    font-size: 14px;
+    font-size: 16px;
-    font-weight: 400;
+    font-family: 'Alibaba PuHuiTi';
     color: #fff;
-    line-height: 30px;
+    line-height: 36px;
-    margin-left: 100px;
+    margin-left: 50px;
+    border-radius: 6px;
+}
+
+@font-face {
+    font-family: 'Alibaba PuHuiTi';
+    src: url('~@/assets/home/font/Alibaba-PuHuiTi-Light.otf');
 }

front/public/static/js/modal.js

@@ -64,17 +64,22 @@ var ModelBox = (function() {
             _this.isShow = this.option.isShow
             var html =
                 '<div class="model-container">' +
-                '<h1 class="model-title">title</h1>' +
+                '<div class="model-title">' +
-                '<div class="model-content"></div>' +
+                '<span class="title-span">title</span>' +
+                '<div class="model-close"></div>' +
+                '</div>' +
+                '<div class="model-content">content</div>' +
                 '<div class="controls">' +
-                '<a class="confirm">下载</a>' +
+                '<a class="confirmChrome">下载谷歌浏览器</a>' +
-                '<a class="cancel">取消</a>' +
+                '<a class="confirm360">下载360浏览器</a>' +
                 '</div>' +
                 '</div>'
             var ModelBoxCon = document.createElement('div')
             ModelBoxCon.setAttribute('class', 'mask-layer')
             ModelBoxCon.innerHTML = html
-            ModelBoxCon.querySelector('.model-title').innerHTML =
+                // ModelBoxCon.querySelector('.model-title').innerHTML =
+                //     _this.option.title
+            ModelBoxCon.querySelector('.title-span').innerHTML =
                 _this.option.title
             ModelBoxCon.querySelector('.model-content').innerHTML =
                 _this.option.content
@@ -82,8 +87,9 @@ var ModelBox = (function() {
             if (!_this.isShow) {
                 ModelBoxCon.style.display = 'none'
             }
-            ModelBoxCon.querySelector('.cancel').onclick =
+            ModelBoxCon.querySelector('.model-close').onclick =
-                ModelBoxCon.querySelector('.confirm').onclick =
+                ModelBoxCon.querySelector('.confirmChrome').onclick =
+                ModelBoxCon.querySelector('.confirm360').onclick =
                 _this.eventsFn.bind('', this, ModelBoxCon)
         },
         show: function() {
@@ -95,9 +101,13 @@ var ModelBox = (function() {
             this.isShow = false
         },
         eventsFn: function(e, doc, target) {
+            debugger
             var _thisEvent = target.target
-            if (_thisEvent.classList.contains('confirm')) {
+            if (_thisEvent.classList.contains('confirmChrome')) {
-                e.option.confirmCallBack()
+                e.option.confirmCallBack('Chrome')
+
+            } else if (_thisEvent.classList.contains('confirm360')) {
+                e.option.confirmCallBack('360')
             }
             doc.style.display = 'none'
             e.isShow = false
@@ -108,13 +118,16 @@ var ModelBox = (function() {
 })()
 
 var opt = new ModelBox({
-    title: '当前系统不支持IE内核，建议使用Chrome浏览器或360浏览器极速模式',
+    title: '提示信息',
-    content: '',
+    content: '平台暂不支持IE内核浏览器访问，建议使用谷歌(Chrome)或360浏览器极速模式登录！',
     isShow: false,
-    confirmCallBack: function() {
+    confirmCallBack: function(data) {
+        debugger
         // 获取当前系统的方法
         const agent = getPCNum()
-        console.log('agent------------>', agent)
+            //console.log('agent------------>', agent)
+            //console.log('datadatadatadata----------->', data)
+        if (data === 'Chrome') {
             if (agent == 64) {
                 // 64位操作系统
                 downloadFile(
@@ -128,6 +141,22 @@ var opt = new ModelBox({
                     '/static/download/standalonesetup32.exe'
                 )
             }
+        } else {
+            if (agent == 64) {
+                // 64位操作系统
+                downloadFile(
+                    '360se13.1.6260.0.exe',
+                    '/static/download/360se13.1.6260.0.exe'
+                )
+            } else {
+                // 32位操作系统
+                downloadFile(
+                    '360se13.1.6110.0.exe',
+                    '/static/download/360se13.1.6110.0.exe'
+                )
+            }
+        }
+
     },
 })