<template>
|
<div id="app" class='el-science-blue'>
|
<router-view ref="routerView"></router-view>
|
</div>
|
</template>
|
|
<script>
|
let link;
|
export default {
|
name: 'App',
|
data() {
|
return {
|
fullScreen: false,
|
skinActive: 'science-blue'
|
}
|
},
|
mounted() {
|
this.skinActive = localStorage.getItem('setSkinItem');
|
require('./assets/css/m-elementui.css');
|
this.appenCss();
|
window.addEventListener('setSkinItem', (e) => {
|
this.skinActive = e.newValue;
|
this.changeSkin();
|
let iframes = this.$refs.routerView.$el.getElementsByTagName("iframe");
|
for (let i = 0; i < iframes.length; i++) {
|
iframes[i].contentDocument.getElementById("theme").href = link.href;
|
}
|
});
|
this.changeSkin();
|
require('./assets/css/basic.css');
|
require('./assets/css/common.css');
|
},
|
methods: {
|
appenCss() {
|
link = document.createElement('link');
|
link.type = 'text/css';
|
link.id = "theme";
|
link.rel = 'stylesheet';
|
link.href = './theme/science-blue.css';
|
document.getElementsByTagName("head")[0].appendChild(link);
|
},
|
changeSkin() {
|
if (this.skinActive == 'science-black') {
|
link.href = './theme/science-black.css';
|
} else {
|
link.href = './theme/science-blue.css';
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
#app {
|
box-sizing: border-box;
|
height: 100vh;
|
}
|
</style>
|
