<template>
|
<div id="main" class="app-main">
|
<router-view></router-view>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {};
|
},
|
computed: {
|
mainTheme() {
|
return this.$store.state.theme.theme.mainTheme;
|
},
|
},
|
mounted() {
|
this.changeMode();
|
},
|
beforeDestroy() {},
|
methods: {
|
changeMode() {
|
let v = this.mainTheme;
|
if (v == "darkMode") {
|
document.getElementsByTagName("body")[0].className = "darkMode";
|
} else if (v == "weakMode") {
|
document.getElementsByTagName("body")[0].className = "weakMode";
|
} else {
|
document.getElementsByTagName("body")[0].className = "";
|
}
|
},
|
},
|
watch: {
|
mainTheme() {
|
this.changeMode();
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
background: #f0f0f0;
|
/* overflow: hidden; */
|
}
|
|
.app-main {
|
width: 100%;
|
height: 100%;
|
}
|
|
.br button {
|
margin-right: 8px;
|
}
|
|
.operation button {
|
margin-right: 8px;
|
}
|
|
.operation .brr button {
|
margin-right: 0px !important;
|
}
|
|
.ivu-btn-text:focus {
|
box-shadow: none !important;
|
}
|
|
.ivu-tag {
|
cursor: pointer;
|
}
|
|
.block-tool .ivu-tooltip,
|
.block-tool .ivu-tooltip-rel {
|
display: block;
|
}
|
|
.block-pop .ivu-poptip,
|
.block-pop .ivu-poptip-rel {
|
display: block;
|
}
|
|
.form-noheight {
|
.ivu-form-item-content {
|
line-height: unset !important;
|
}
|
}
|
|
.modal-fullscreen {
|
z-index: 1;
|
position: absolute;
|
right: 43px;
|
top: 14px;
|
overflow: hidden;
|
cursor: pointer;
|
.model-fullscreen-icon {
|
font-size: 18px;
|
color: #999;
|
-webkit-transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
position: relative;
|
top: 1px;
|
&:hover {
|
color: #444;
|
}
|
}
|
}
|
|
.viewer-container {
|
z-index: 2050 !important;
|
}
|
|
// 修改drawer层级 避免固定nav时遮挡
|
.ivu-drawer-mask,
|
.ivu-drawer-wrap {
|
z-index: 1002;
|
}
|
|
.ivu-drawer-wrap-1 {
|
z-index: 1003;
|
}
|
|
.ivu-drawer-wrap-2 {
|
z-index: 1004;
|
}
|
|
// 修改Message层级
|
.ivu-message {
|
z-index: 9999 !important;
|
}
|
|
// 修改Menu层级
|
.ivu-menu {
|
z-index: 0;
|
}
|
|
// 暗黑
|
.darkMode {
|
filter: invert(1) hue-rotate(180deg);
|
transition: all 300ms;
|
img,
|
video {
|
filter: invert(1) hue-rotate(180deg);
|
}
|
}
|
|
// 色弱
|
.weakMode {
|
touch-action: none;
|
filter: invert(80%);
|
}
|
</style>
|
