18 changed files with 1106 additions and 31 deletions
-
3src/api/system/menu.js
-
BINsrc/assets/401_images/401.gif
-
BINsrc/assets/404_images/404.png
-
BINsrc/assets/404_images/404_cloud.png
-
60src/assets/styles/mixin.scss
-
33src/assets/styles/variables.scss
-
13src/components/Permission/index.js
-
21src/components/Permission/permission.js
-
149src/components/RightPanel/index.vue
-
0src/components/ThemePicker/index.vue
-
44src/layout/components/Sidebar/TopMenu.vue
-
44src/layout/mixin/ResizeHandler.js
-
4src/main.js
-
56src/router/routers.js
-
384src/utils/index.js
-
89src/views/features/401.vue
-
225src/views/features/404.vue
-
12src/views/features/redirect.vue
|
After Width: 313 | Height: 428 | Size: 160 KiB |
|
After Width: 1014 | Height: 556 | Size: 96 KiB |
|
After Width: 152 | Height: 138 | Size: 4.7 KiB |
@ -0,0 +1,60 @@ |
|||||
|
@mixin clearfix { |
||||
|
&:after { |
||||
|
content: ''; |
||||
|
display: table; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin scrollBar { |
||||
|
&::-webkit-scrollbar-track-piece { |
||||
|
background: #d3dce6; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background: #99a9bf; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin relative { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
@mixin pct($pct) { |
||||
|
width: #{$pct}; |
||||
|
position: relative; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
@mixin triangle($width, $height, $color, $direction) { |
||||
|
$width: $width/2; |
||||
|
$color-border-style: $height solid $color; |
||||
|
$transparent-border-style: $width solid transparent; |
||||
|
height: 0; |
||||
|
width: 0; |
||||
|
|
||||
|
@if $direction==up { |
||||
|
border-bottom: $color-border-style; |
||||
|
border-left: $transparent-border-style; |
||||
|
border-right: $transparent-border-style; |
||||
|
} @else if $direction==right { |
||||
|
border-left: $color-border-style; |
||||
|
border-top: $transparent-border-style; |
||||
|
border-bottom: $transparent-border-style; |
||||
|
} @else if $direction==down { |
||||
|
border-top: $color-border-style; |
||||
|
border-left: $transparent-border-style; |
||||
|
border-right: $transparent-border-style; |
||||
|
} @else if $direction==left { |
||||
|
border-right: $color-border-style; |
||||
|
border-top: $transparent-border-style; |
||||
|
border-bottom: $transparent-border-style; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
// base color |
||||
|
$blue: #324157; |
||||
|
$light-blue: #3a71a8; |
||||
|
$red: #c03639; |
||||
|
$pink: #e65d6e; |
||||
|
$green: #30b08f; |
||||
|
$tiffany: #4ab7bd; |
||||
|
$yellow: #fec171; |
||||
|
$panGreen: #30b08f; |
||||
|
|
||||
|
// sidebar |
||||
|
$menuText: #bfcbd9; |
||||
|
$menuActiveText: #409eff; |
||||
|
$subMenuActiveText: #f4f4f5; |
||||
|
|
||||
|
$menuBg: #304156; |
||||
|
$menuHover: #263445; |
||||
|
|
||||
|
$subMenuBg: #1f2d3d; |
||||
|
$subMenuHover: #001528; |
||||
|
|
||||
|
$sideBarWidth: 205px; |
||||
|
|
||||
|
:export { |
||||
|
menuText: $menuText; |
||||
|
menuActiveText: $menuActiveText; |
||||
|
subMenuActiveText: $subMenuActiveText; |
||||
|
menuBg: $menuBg; |
||||
|
menuHover: $menuHover; |
||||
|
subMenuBg: $subMenuBg; |
||||
|
subMenuHover: $subMenuHover; |
||||
|
sideBarWidth: $sideBarWidth; |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import permission from './permission' |
||||
|
|
||||
|
const install = function(Vue) { |
||||
|
Vue.directive('permission', permission) |
||||
|
} |
||||
|
|
||||
|
if (window.Vue) { |
||||
|
window['permission'] = permission |
||||
|
Vue.use(install); // eslint-disable-line
|
||||
|
} |
||||
|
|
||||
|
permission.install = install |
||||
|
export default permission |
||||
@ -0,0 +1,21 @@ |
|||||
|
import store from '@/store' |
||||
|
|
||||
|
export default { |
||||
|
inserted(el, binding) { |
||||
|
const { value } = binding |
||||
|
const roles = store.getters && store.getters.roles |
||||
|
if (value && value instanceof Array) { |
||||
|
if (value.length > 0) { |
||||
|
const permissionRoles = value |
||||
|
const hasPermission = roles.some(role => { |
||||
|
return permissionRoles.includes(role) |
||||
|
}) |
||||
|
if (!hasPermission) { |
||||
|
el.parentNode && el.parentNode.removeChild(el) |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
throw new Error(`使用方式： v-permission="['admin','editor']"`) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> |
||||
|
<div class="rightPanel-background" /> |
||||
|
<div class="rightPanel"> |
||||
|
<div class="rightPanel-items"> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { addClass, removeClass } from '@/utils' |
||||
|
|
||||
|
export default { |
||||
|
name: 'RightPanel', |
||||
|
props: { |
||||
|
clickNotClose: { |
||||
|
default: false, |
||||
|
type: Boolean |
||||
|
}, |
||||
|
buttonTop: { |
||||
|
default: 250, |
||||
|
type: Number |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
show: { |
||||
|
get() { |
||||
|
return this.$store.state.settings.showSettings |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$store.dispatch('settings/changeSetting', { |
||||
|
key: 'showSettings', |
||||
|
value: val |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
theme() { |
||||
|
return this.$store.state.settings.theme |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
show(value) { |
||||
|
if (value && !this.clickNotClose) { |
||||
|
this.addEventClick() |
||||
|
} |
||||
|
if (value) { |
||||
|
addClass(document.body, 'showRightPanel') |
||||
|
} else { |
||||
|
removeClass(document.body, 'showRightPanel') |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.insertToBody() |
||||
|
this.addEventClick() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
const elx = this.$refs.rightPanel |
||||
|
elx.remove() |
||||
|
}, |
||||
|
methods: { |
||||
|
addEventClick() { |
||||
|
window.addEventListener('click', this.closeSidebar) |
||||
|
}, |
||||
|
closeSidebar(evt) { |
||||
|
const parent = evt.target.closest('.rightPanel') |
||||
|
if (!parent) { |
||||
|
this.show = false |
||||
|
window.removeEventListener('click', this.closeSidebar) |
||||
|
} |
||||
|
}, |
||||
|
insertToBody() { |
||||
|
const elx = this.$refs.rightPanel |
||||
|
const body = document.querySelector('body') |
||||
|
body.insertBefore(elx, body.firstChild) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.showRightPanel { |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
width: calc(100% - 15px); |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.rightPanel-background { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); |
||||
|
background: rgba(0, 0, 0, 0.2); |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
.rightPanel { |
||||
|
width: 100%; |
||||
|
max-width: 260px; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05); |
||||
|
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1); |
||||
|
transform: translate(100%); |
||||
|
background: #fff; |
||||
|
z-index: 40000; |
||||
|
} |
||||
|
|
||||
|
.show { |
||||
|
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); |
||||
|
|
||||
|
.rightPanel-background { |
||||
|
z-index: 20000; |
||||
|
opacity: 1; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.rightPanel { |
||||
|
transform: translate(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.handle-button { |
||||
|
width: 48px; |
||||
|
height: 48px; |
||||
|
position: absolute; |
||||
|
left: -48px; |
||||
|
text-align: center; |
||||
|
font-size: 24px; |
||||
|
border-radius: 6px 0 0 6px !important; |
||||
|
z-index: 0; |
||||
|
pointer-events: auto; |
||||
|
cursor: pointer; |
||||
|
color: #fff; |
||||
|
line-height: 48px; |
||||
|
i { |
||||
|
font-size: 24px; |
||||
|
line-height: 48px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,44 @@ |
|||||
|
<!-- |
||||
|
* @Author: Liu_li |
||||
|
* @Descripttion: |
||||
|
* @Date: 2021-09-26 11:03:50 |
||||
|
--> |
||||
|
<template> |
||||
|
<div> |
||||
|
<template> |
||||
|
<app-link> |
||||
|
<el-menu-item> |
||||
|
<item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" /> |
||||
|
</el-menu-item> |
||||
|
</app-link> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import path from 'path' |
||||
|
import {isExternal} from '@/utils/validate' |
||||
|
|
||||
|
export default { |
||||
|
name:'SidebarItem', |
||||
|
props:{ |
||||
|
item:{ |
||||
|
type:Object, |
||||
|
required:true |
||||
|
}, |
||||
|
isNest:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
}, |
||||
|
basePath:{ |
||||
|
type:String, |
||||
|
default:'' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
this.onlyOneChild=null |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,44 @@ |
|||||
|
import store from '@/store' |
||||
|
|
||||
|
const { body} =document |
||||
|
const WIDTH=992 |
||||
|
|
||||
|
export default { |
||||
|
watch: { |
||||
|
$route(route) { |
||||
|
if (this.device === 'mobile' && this.sidebar.opened) { |
||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
beforeMount() { |
||||
|
window.addEventListener('resize', this.$_resizeHandler) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
window.removeEventListener('resize', this.$_resizeHandler) |
||||
|
}, |
||||
|
mounted() { |
||||
|
const isMobile = this.$_isMobile() |
||||
|
if (isMobile) { |
||||
|
store.dispatch('app/toggleDevice', 'mobile') |
||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: true }) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
$_isMobile() { |
||||
|
const rect = body.getBoundingClientRect() |
||||
|
return rect.width - 1 < WIDTH |
||||
|
}, |
||||
|
$_resizeHandler() { |
||||
|
if (!document.hidden) { |
||||
|
const isMobile = this.$_isMobile() |
||||
|
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop') |
||||
|
|
||||
|
if (isMobile) { |
||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: true }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,384 @@ |
|||||
|
/** |
||||
|
* |
||||
|
* @param {(Object|string|number)} time |
||||
|
* @param {string} cFormat |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function parseTime(time, cFormat) { |
||||
|
if (arguments.length === 0) { |
||||
|
return null |
||||
|
} |
||||
|
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' |
||||
|
let date |
||||
|
if (typeof time === 'undefined' || time === null || time === 'null') { |
||||
|
return '' |
||||
|
} else if (typeof time === 'object') { |
||||
|
date = time |
||||
|
} else { |
||||
|
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { |
||||
|
time = parseInt(time) |
||||
|
} |
||||
|
if ((typeof time === 'number') && (time.toString().length === 10)) { |
||||
|
time = time * 1000 |
||||
|
} |
||||
|
date = new Date(time) |
||||
|
} |
||||
|
const formatObj = { |
||||
|
y: date.getFullYear(), |
||||
|
m: date.getMonth() + 1, |
||||
|
d: date.getDate(), |
||||
|
h: date.getHours(), |
||||
|
i: date.getMinutes(), |
||||
|
s: date.getSeconds(), |
||||
|
a: date.getDay() |
||||
|
} |
||||
|
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { |
||||
|
let value = formatObj[key] |
||||
|
// Note: getDay() returns 0 on Sunday
|
||||
|
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] } |
||||
|
if (result.length > 0 && value < 10) { |
||||
|
value = '0' + value |
||||
|
} |
||||
|
return value || 0 |
||||
|
}) |
||||
|
return time_str |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {number} time |
||||
|
* @param {string} option |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function formatTime(time, option) { |
||||
|
if (('' + time).length === 10) { |
||||
|
time = parseInt(time) * 1000 |
||||
|
} else { |
||||
|
time = +time |
||||
|
} |
||||
|
const d = new Date(time) |
||||
|
const now = Date.now() |
||||
|
|
||||
|
const diff = (now - d) / 1000 |
||||
|
|
||||
|
if (diff < 30) { |
||||
|
return '刚刚' |
||||
|
} else if (diff < 3600) { |
||||
|
// less 1 hour
|
||||
|
return Math.ceil(diff / 60) + '分钟前' |
||||
|
} else if (diff < 3600 * 24) { |
||||
|
return Math.ceil(diff / 3600) + '小时前' |
||||
|
} else if (diff < 3600 * 24 * 2) { |
||||
|
return '1天前' |
||||
|
} |
||||
|
if (option) { |
||||
|
return parseTime(time, option) |
||||
|
} else { |
||||
|
return ( |
||||
|
d.getMonth() + |
||||
|
1 + |
||||
|
'月' + |
||||
|
d.getDate() + |
||||
|
'日' + |
||||
|
d.getHours() + |
||||
|
'时' + |
||||
|
d.getMinutes() + |
||||
|
'分' |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {string} url |
||||
|
* @returns {Object} |
||||
|
*/ |
||||
|
export function getQueryObject(url) { |
||||
|
url = url == null ? window.location.href : url |
||||
|
const search = url.substring(url.lastIndexOf('?') + 1) |
||||
|
const obj = {} |
||||
|
const reg = /([^?&=]+)=([^?&=]*)/g |
||||
|
search.replace(reg, (rs, $1, $2) => { |
||||
|
const name = decodeURIComponent($1) |
||||
|
let val = decodeURIComponent($2) |
||||
|
val = String(val) |
||||
|
obj[name] = val |
||||
|
return rs |
||||
|
}) |
||||
|
return obj |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {string} input value |
||||
|
* @returns {number} output value |
||||
|
*/ |
||||
|
export function byteLength(str) { |
||||
|
// returns the byte length of an utf8 string
|
||||
|
let s = str.length |
||||
|
for (var i = str.length - 1; i >= 0; i--) { |
||||
|
const code = str.charCodeAt(i) |
||||
|
if (code > 0x7f && code <= 0x7ff) s++ |
||||
|
else if (code > 0x7ff && code <= 0xffff) s += 2 |
||||
|
if (code >= 0xDC00 && code <= 0xDFFF) i-- |
||||
|
} |
||||
|
return s |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {Array} actual |
||||
|
* @returns {Array} |
||||
|
*/ |
||||
|
export function cleanArray(actual) { |
||||
|
const newArray = [] |
||||
|
for (let i = 0; i < actual.length; i++) { |
||||
|
if (actual[i]) { |
||||
|
newArray.push(actual[i]) |
||||
|
} |
||||
|
} |
||||
|
return newArray |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {Object} json |
||||
|
* @returns {Array} |
||||
|
*/ |
||||
|
export function param(json) { |
||||
|
if (!json) return '' |
||||
|
return cleanArray( |
||||
|
Object.keys(json).map(key => { |
||||
|
if (json[key] === undefined) return '' |
||||
|
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]) |
||||
|
}) |
||||
|
).join('&') |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {string} url |
||||
|
* @returns {Object} |
||||
|
*/ |
||||
|
export function param2Obj(url) { |
||||
|
const search = url.split('?')[1] |
||||
|
if (!search) { |
||||
|
return {} |
||||
|
} |
||||
|
return JSON.parse( |
||||
|
'{"' + |
||||
|
decodeURIComponent(search) |
||||
|
.replace(/"/g, '\\"') |
||||
|
.replace(/&/g, '","') |
||||
|
.replace(/=/g, '":"') |
||||
|
.replace(/\+/g, ' ') + |
||||
|
'"}' |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {string} val |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function html2Text(val) { |
||||
|
const div = document.createElement('div') |
||||
|
div.innerHTML = val |
||||
|
return div.textContent || div.innerText |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Merges two objects, giving the last one precedence |
||||
|
* @param {Object} target |
||||
|
* @param {(Object|Array)} source |
||||
|
* @returns {Object} |
||||
|
*/ |
||||
|
export function objectMerge(target, source) { |
||||
|
if (typeof target !== 'object') { |
||||
|
target = {} |
||||
|
} |
||||
|
if (Array.isArray(source)) { |
||||
|
return source.slice() |
||||
|
} |
||||
|
Object.keys(source).forEach(property => { |
||||
|
const sourceProperty = source[property] |
||||
|
if (typeof sourceProperty === 'object') { |
||||
|
target[property] = objectMerge(target[property], sourceProperty) |
||||
|
} else { |
||||
|
target[property] = sourceProperty |
||||
|
} |
||||
|
}) |
||||
|
return target |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {HTMLElement} element |
||||
|
* @param {string} className |
||||
|
*/ |
||||
|
export function toggleClass(element, className) { |
||||
|
if (!element || !className) { |
||||
|
return |
||||
|
} |
||||
|
let classString = element.className |
||||
|
const nameIndex = classString.indexOf(className) |
||||
|
if (nameIndex === -1) { |
||||
|
classString += '' + className |
||||
|
} else { |
||||
|
classString = |
||||
|
classString.substr(0, nameIndex) + |
||||
|
classString.substr(nameIndex + className.length) |
||||
|
} |
||||
|
element.className = classString |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {string} type |
||||
|
* @returns {Date} |
||||
|
*/ |
||||
|
export function getTime(type) { |
||||
|
if (type === 'start') { |
||||
|
return new Date().getTime() - 3600 * 1000 * 24 * 90 |
||||
|
} else { |
||||
|
return new Date(new Date().toDateString()) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {Function} func |
||||
|
* @param {number} wait |
||||
|
* @param {boolean} immediate |
||||
|
* @return {*} |
||||
|
*/ |
||||
|
export function debounce(func, wait, immediate) { |
||||
|
let timeout, args, context, timestamp, result |
||||
|
|
||||
|
const later = function() { |
||||
|
// 据上一次触发时间间隔
|
||||
|
const last = +new Date() - timestamp |
||||
|
|
||||
|
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
||||
|
if (last < wait && last > 0) { |
||||
|
timeout = setTimeout(later, wait - last) |
||||
|
} else { |
||||
|
timeout = null |
||||
|
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
||||
|
if (!immediate) { |
||||
|
result = func.apply(context, args) |
||||
|
if (!timeout) context = args = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return function(...args) { |
||||
|
context = this |
||||
|
timestamp = +new Date() |
||||
|
const callNow = immediate && !timeout |
||||
|
// 如果延时不存在，重新设定延时
|
||||
|
if (!timeout) timeout = setTimeout(later, wait) |
||||
|
if (callNow) { |
||||
|
result = func.apply(context, args) |
||||
|
context = args = null |
||||
|
} |
||||
|
|
||||
|
return result |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* This is just a simple version of deep copy |
||||
|
* Has a lot of edge cases bug |
||||
|
* If you want to use a perfect deep copy, use lodash's _.cloneDeep |
||||
|
* @param {Object} source |
||||
|
* @returns {Object} |
||||
|
*/ |
||||
|
export function deepClone(source) { |
||||
|
if (!source && typeof source !== 'object') { |
||||
|
throw new Error('error arguments', 'deepClone') |
||||
|
} |
||||
|
const targetObj = source.constructor === Array ? [] : {} |
||||
|
Object.keys(source).forEach(keys => { |
||||
|
if (source[keys] && typeof source[keys] === 'object') { |
||||
|
targetObj[keys] = deepClone(source[keys]) |
||||
|
} else { |
||||
|
targetObj[keys] = source[keys] |
||||
|
} |
||||
|
}) |
||||
|
return targetObj |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {Array} arr |
||||
|
* @returns {Array} |
||||
|
*/ |
||||
|
export function uniqueArr(arr) { |
||||
|
return Array.from(new Set(arr)) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function createUniqueString() { |
||||
|
const timestamp = +new Date() + '' |
||||
|
const randomNum = parseInt((1 + Math.random()) * 65536) + '' |
||||
|
return (+(randomNum + timestamp)).toString(32) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Check if an element has a class |
||||
|
* @param {HTMLElement} elm |
||||
|
* @param {string} cls |
||||
|
* @returns {boolean} |
||||
|
*/ |
||||
|
export function hasClass(ele, cls) { |
||||
|
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Add class to element |
||||
|
* @param {HTMLElement} elm |
||||
|
* @param {string} cls |
||||
|
*/ |
||||
|
export function addClass(ele, cls) { |
||||
|
if (!hasClass(ele, cls)) ele.className += ' ' + cls |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove class from element |
||||
|
* @param {HTMLElement} elm |
||||
|
* @param {string} cls |
||||
|
*/ |
||||
|
export function removeClass(ele, cls) { |
||||
|
if (hasClass(ele, cls)) { |
||||
|
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)') |
||||
|
ele.className = ele.className.replace(reg, ' ') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 替换邮箱字符
|
||||
|
export function regEmail(email) { |
||||
|
if (String(email).indexOf('@') > 0) { |
||||
|
const str = email.split('@') |
||||
|
let _s = '' |
||||
|
if (str[0].length > 3) { |
||||
|
for (var i = 0; i < str[0].length - 3; i++) { |
||||
|
_s += '*' |
||||
|
} |
||||
|
} |
||||
|
var new_email = str[0].substr(0, 3) + _s + '@' + str[1] |
||||
|
} |
||||
|
return new_email |
||||
|
} |
||||
|
|
||||
|
// 替换手机字符
|
||||
|
export function regMobile(mobile) { |
||||
|
if (mobile.length > 7) { |
||||
|
var new_mobile = mobile.substr(0, 3) + '****' + mobile.substr(7) |
||||
|
} |
||||
|
return new_mobile |
||||
|
} |
||||
|
|
||||
|
// 下载文件
|
||||
|
export function downloadFile(obj, name, suffix) { |
||||
|
const url = window.URL.createObjectURL(new Blob([obj])) |
||||
|
const link = document.createElement('a') |
||||
|
link.style.display = 'none' |
||||
|
link.href = url |
||||
|
const fileName = parseTime(new Date()) + '-' + name + '.' + suffix |
||||
|
link.setAttribute('download', fileName) |
||||
|
document.body.appendChild(link) |
||||
|
link.click() |
||||
|
document.body.removeChild(link) |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
<template> |
||||
|
<div class="errPage-container"> |
||||
|
<el-button icon="arrow-left" class="pan-back-btn" @click="back"> |
||||
|
返回 |
||||
|
</el-button> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<h1 class="text-jumbo text-ginormous"> |
||||
|
Oops! |
||||
|
</h1> |
||||
|
<h2>你没有权限去该页面</h2> |
||||
|
<h6>如有不满请联系你领导</h6> |
||||
|
<ul class="list-unstyled"> |
||||
|
<li>或者你可以去:</li> |
||||
|
<li class="link-type"> |
||||
|
<router-link to="/dashboard"> |
||||
|
回首页 |
||||
|
</router-link> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream."> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import errGif from '@/assets/401_images/401.gif' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Page401', |
||||
|
data() { |
||||
|
return { |
||||
|
errGif: errGif + '?' + +new Date() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
back() { |
||||
|
if (this.$route.query.noGoBack) { |
||||
|
this.$router.push({ path: '/dashboard' }) |
||||
|
} else { |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.errPage-container { |
||||
|
width: 800px; |
||||
|
max-width: 100%; |
||||
|
margin: 100px auto; |
||||
|
.pan-back-btn { |
||||
|
background: #008489; |
||||
|
color: #fff; |
||||
|
border: none !important; |
||||
|
} |
||||
|
.pan-gif { |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
} |
||||
|
.pan-img { |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.text-jumbo { |
||||
|
font-size: 60px; |
||||
|
font-weight: 700; |
||||
|
color: #484848; |
||||
|
} |
||||
|
.list-unstyled { |
||||
|
font-size: 14px; |
||||
|
li { |
||||
|
padding-bottom: 5px; |
||||
|
} |
||||
|
a { |
||||
|
color: #008489; |
||||
|
text-decoration: none; |
||||
|
&:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,225 @@ |
|||||
|
<template> |
||||
|
<div class="wscn-http404-container"> |
||||
|
<div class="wscn-http404"> |
||||
|
<div class="pic-404"> |
||||
|
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404"> |
||||
|
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404"> |
||||
|
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404"> |
||||
|
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404"> |
||||
|
</div> |
||||
|
<div class="bullshit"> |
||||
|
<div class="bullshit__oops">OOPS!</div> |
||||
|
<div class="bullshit__headline">{{ message }}</div> |
||||
|
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div> |
||||
|
<a href="/" class="bullshit__return-home">返回首页</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'Page404', |
||||
|
computed: { |
||||
|
message() { |
||||
|
return '网管说这个页面你不能进......' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.wscn-http404-container { |
||||
|
transform: translate(-50%, -50%); |
||||
|
position: absolute; |
||||
|
top: 40%; |
||||
|
left: 50%; |
||||
|
} |
||||
|
.wscn-http404 { |
||||
|
position: relative; |
||||
|
width: 1200px; |
||||
|
padding: 0 50px; |
||||
|
overflow: hidden; |
||||
|
.pic-404 { |
||||
|
position: relative; |
||||
|
float: left; |
||||
|
width: 600px; |
||||
|
overflow: hidden; |
||||
|
&__parent { |
||||
|
width: 100%; |
||||
|
} |
||||
|
&__child { |
||||
|
position: absolute; |
||||
|
&.left { |
||||
|
width: 80px; |
||||
|
top: 17px; |
||||
|
left: 220px; |
||||
|
opacity: 0; |
||||
|
animation-name: cloudLeft; |
||||
|
animation-duration: 2s; |
||||
|
animation-timing-function: linear; |
||||
|
animation-fill-mode: forwards; |
||||
|
animation-delay: 1s; |
||||
|
} |
||||
|
&.mid { |
||||
|
width: 46px; |
||||
|
top: 10px; |
||||
|
left: 420px; |
||||
|
opacity: 0; |
||||
|
animation-name: cloudMid; |
||||
|
animation-duration: 2s; |
||||
|
animation-timing-function: linear; |
||||
|
animation-fill-mode: forwards; |
||||
|
animation-delay: 1.2s; |
||||
|
} |
||||
|
&.right { |
||||
|
width: 62px; |
||||
|
top: 100px; |
||||
|
left: 500px; |
||||
|
opacity: 0; |
||||
|
animation-name: cloudRight; |
||||
|
animation-duration: 2s; |
||||
|
animation-timing-function: linear; |
||||
|
animation-fill-mode: forwards; |
||||
|
animation-delay: 1s; |
||||
|
} |
||||
|
@keyframes cloudLeft { |
||||
|
0% { |
||||
|
top: 17px; |
||||
|
left: 220px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
20% { |
||||
|
top: 33px; |
||||
|
left: 188px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
80% { |
||||
|
top: 81px; |
||||
|
left: 92px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
100% { |
||||
|
top: 97px; |
||||
|
left: 60px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
@keyframes cloudMid { |
||||
|
0% { |
||||
|
top: 10px; |
||||
|
left: 420px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
20% { |
||||
|
top: 40px; |
||||
|
left: 360px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
70% { |
||||
|
top: 130px; |
||||
|
left: 180px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
100% { |
||||
|
top: 160px; |
||||
|
left: 120px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
@keyframes cloudRight { |
||||
|
0% { |
||||
|
top: 100px; |
||||
|
left: 500px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
20% { |
||||
|
top: 120px; |
||||
|
left: 460px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
80% { |
||||
|
top: 180px; |
||||
|
left: 340px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
100% { |
||||
|
top: 200px; |
||||
|
left: 300px; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bullshit { |
||||
|
position: relative; |
||||
|
float: left; |
||||
|
width: 300px; |
||||
|
padding: 30px 0; |
||||
|
overflow: hidden; |
||||
|
&__oops { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
line-height: 40px; |
||||
|
color: #1482f0; |
||||
|
opacity: 0; |
||||
|
margin-bottom: 20px; |
||||
|
animation-name: slideUp; |
||||
|
animation-duration: 0.5s; |
||||
|
animation-fill-mode: forwards; |
||||
|
} |
||||
|
&__headline { |
||||
|
font-size: 20px; |
||||
|
line-height: 24px; |
||||
|
color: #222; |
||||
|
font-weight: bold; |
||||
|
opacity: 0; |
||||
|
margin-bottom: 10px; |
||||
|
animation-name: slideUp; |
||||
|
animation-duration: 0.5s; |
||||
|
animation-delay: 0.1s; |
||||
|
animation-fill-mode: forwards; |
||||
|
} |
||||
|
&__info { |
||||
|
font-size: 13px; |
||||
|
line-height: 21px; |
||||
|
color: grey; |
||||
|
opacity: 0; |
||||
|
margin-bottom: 30px; |
||||
|
animation-name: slideUp; |
||||
|
animation-duration: 0.5s; |
||||
|
animation-delay: 0.2s; |
||||
|
animation-fill-mode: forwards; |
||||
|
} |
||||
|
&__return-home { |
||||
|
display: block; |
||||
|
float: left; |
||||
|
width: 110px; |
||||
|
height: 36px; |
||||
|
background: #1482f0; |
||||
|
border-radius: 100px; |
||||
|
text-align: center; |
||||
|
color: #ffffff; |
||||
|
opacity: 0; |
||||
|
font-size: 14px; |
||||
|
line-height: 36px; |
||||
|
cursor: pointer; |
||||
|
animation-name: slideUp; |
||||
|
animation-duration: 0.5s; |
||||
|
animation-delay: 0.3s; |
||||
|
animation-fill-mode: forwards; |
||||
|
} |
||||
|
@keyframes slideUp { |
||||
|
0% { |
||||
|
transform: translateY(60px); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
transform: translateY(0); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,12 @@ |
|||||
|
<script> |
||||
|
export default { |
||||
|
created() { |
||||
|
const { params, query } = this.$route |
||||
|
const { path } = params |
||||
|
this.$router.replace({ path: '/' + path, query }) |
||||
|
}, |
||||
|
render: function(h) { |
||||
|
return h() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue