From e83ddfe47e601d3ab129c4773da81f3337e4b1ac Mon Sep 17 00:00:00 2001 From: guoyue Date: Sun, 9 Oct 2022 10:07:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=EF=BC=9A=E6=96=87=E4=BB=B6=E6=8A=BD=E5=8F=96?= =?UTF-8?q?=E5=BC=95=E5=85=A5js,css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/public/index.html | 221 +----------------------------- front/public/static/css/modal.css | 75 ++++++++++ front/public/static/js/modal.js | 138 +++++++++++++++++++ 3 files changed, 216 insertions(+), 218 deletions(-) create mode 100644 front/public/static/css/modal.css create mode 100644 front/public/static/js/modal.js diff --git a/front/public/index.html b/front/public/index.html index c3e97038..10035c44 100644 --- a/front/public/index.html +++ b/front/public/index.html @@ -19,226 +19,11 @@ - + + + - - diff --git a/front/public/static/css/modal.css b/front/public/static/css/modal.css new file mode 100644 index 00000000..858877fa --- /dev/null +++ b/front/public/static/css/modal.css @@ -0,0 +1,75 @@ +* { + font-weight: normal; + font-style: normal; +} + +.mask-layer { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); +} + +.model-container { + width: 360px; + height: 150px; + background: #fff; + border-radius: 10px; + /* box-shadow: 0px 0px 12px 4px #ff3; */ + text-align: center; + font-size: 18px; + color: #333; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 99999999999; +} + +.model-container .model-title { + font-size: 16px; +} + +.model-container .controls { + position: absolute; + bottom: 10px; + width: 100%; + padding: 12px; + padding-top: 40px; +} + +.model-container a { + display: inline-block; + width: 49%; + text-align: center; + cursor: pointer; +} + +.model-container .confirm { + width: 60px; + height: 30px; + background: #0087ff; + border-radius: 0.04rem !important; + font-size: 14px; + font-weight: 400; + color: #fff; + line-height: 30px; +} + +.model-container .cancel { + width: 60px; + height: 30px; + background: #0087ff; + border-radius: 0.04rem !important; + font-size: 14px; + font-weight: 400; + color: #fff; + line-height: 30px; + margin-left: 100px; +} \ No newline at end of file diff --git a/front/public/static/js/modal.js b/front/public/static/js/modal.js new file mode 100644 index 00000000..cfd026dd --- /dev/null +++ b/front/public/static/js/modal.js @@ -0,0 +1,138 @@ +function judgeAgent() { + let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串 + console.log('userAgent------------>', userAgent) + let isOpera = userAgent.indexOf('Opera') > -1 + //判断是否Opera浏览器 + if (isOpera) { + return 'Opera' + } + //判断是否Firefox浏览器 + if (userAgent.indexOf('Firefox') > -1) { + return 'FF' + } + //判断是否chorme浏览器 + if (userAgent.indexOf('Chrome') > -1) { + return 'Chrome' + } + //判断是否Safari浏览器 + if (userAgent.indexOf('Safari') > -1) { + return 'Safari' + } + //判断是否IE浏览器 + if ( + userAgent.indexOf('compatible') > -1 && + userAgent.indexOf('MSIE') > -1 && + !isOpera + ) { + return 'IE' + } + //判断是否Edge浏览器 + if (userAgent.indexOf('Trident') > -1) { + return 'Edge' + } +} + +function downloadFile(name, url) { + const alink = document.createElement('a') + alink.download = name // 文件名,大部分浏览器兼容,IE10及以下不兼容 + alink.href = url // 创建 url地址 + alink.click() // 自动点击 +} + +function getPCNum() { + const agent = navigator.userAgent.toLowerCase() + if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) { + return 32 + } + if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) { + return 64 + } +} + +console.log('------判断浏览器------>', judgeAgent()) + +var ModelBox = (function() { + var ModelBox = function(option) { + this.option = option || {} + console.log(999, 'init') + this.init() + } + ModelBox.prototype = { + isShow: false, + init: function() { + var _this = this + _this.isShow = this.option.isShow + var html = + '
' + + '

title

' + + '
' + + '
' + + '下载' + + '取消' + + '
' + + '
' + var ModelBoxCon = document.createElement('div') + ModelBoxCon.setAttribute('class', 'mask-layer') + ModelBoxCon.innerHTML = html + ModelBoxCon.querySelector('.model-title').innerHTML = + _this.option.title + ModelBoxCon.querySelector('.model-content').innerHTML = + _this.option.content + document.getElementsByTagName('html')[0].appendChild(ModelBoxCon) + if (!_this.isShow) { + ModelBoxCon.style.display = 'none' + } + ModelBoxCon.querySelector('.cancel').onclick = + ModelBoxCon.querySelector('.confirm').onclick = + _this.eventsFn.bind('', this, ModelBoxCon) + }, + show: function() { + document.querySelector('.mask-layer').style.display = 'block' + this.isShow = true + }, + hide: function() { + document.querySelector('.mask-layer').style.display = 'none' + this.isShow = false + }, + eventsFn: function(e, doc, target) { + var _thisEvent = target.target + if (_thisEvent.classList.contains('confirm')) { + e.option.confirmCallBack() + } + doc.style.display = 'none' + e.isShow = false + return false + }, + } || {} + return ModelBox +})() + +var opt = new ModelBox({ + title: '当前系统不支持IE内核，建议使用Chrome浏览器或360浏览器极速模式', + content: '', + isShow: false, + confirmCallBack: function() { + // 获取当前系统的方法 + const agent = getPCNum() + console.log('agent------------>', agent) + if (agent == 64) { + // 64位操作系统 + downloadFile( + 'ChromeStandaloneSetup64.exe', + '/static/download/ChromeStandaloneSetup64.exe' + ) + } else { + // 32位操作系统 + downloadFile( + 'ChromeStandalonesetup32.exe', + '/static/download/standalonesetup32.exe' + ) + } + }, +}) + +// 提示下载谷歌 +if (judgeAgent() !== 'Chrome') { + //alert('哈哈哈不支持') + opt.show() +} \ No newline at end of file