浏览器增加提示：文件抽取引入js,css
This commit is contained in:
parent
4a78bfa72e
commit
e83ddfe47e
|
|
@ -19,226 +19,11 @@
|
||||||
<meta content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档" name="keywords" />
|
<meta content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档" name="keywords" />
|
||||||
<meta content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>" name="description" />
|
<meta content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>" name="description" />
|
||||||
<meta content="<%= VUE_APP_AUTHOR %>" name="author" />
|
<meta content="<%= VUE_APP_AUTHOR %>" name="author" />
|
||||||
<style>
|
<!-- 浏览器弹框相关 -->
|
||||||
* {
|
<link href="<%= BASE_URL %>static/css/modal.css" rel="stylesheet" />
|
||||||
font-weight: normal;
|
<script type="text/javascript" src="./static/js/modal.js"></script>
|
||||||
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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
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 =
|
|
||||||
'<div class="model-container">' +
|
|
||||||
'<h1 class="model-title">title</h1>' +
|
|
||||||
'<div class="model-content"></div>' +
|
|
||||||
'<div class="controls">' +
|
|
||||||
'<a class="confirm">下载</a>' +
|
|
||||||
'<a class="cancel">取消</a>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>'
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
|
<link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
|
||||||
|
|
||||||
<link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" />
|
<link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" />
|
||||||
<link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet" />
|
<link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet" />
|
||||||
<link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet" />
|
<link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet" />
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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 =
|
||||||
|
'<div class="model-container">' +
|
||||||
|
'<h1 class="model-title">title</h1>' +
|
||||||
|
'<div class="model-content"></div>' +
|
||||||
|
'<div class="controls">' +
|
||||||
|
'<a class="confirm">下载</a>' +
|
||||||
|
'<a class="cancel">取消</a>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>'
|
||||||
|
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()
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue