<template>
|
<div id="app">
|
<router-view />
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'App',
|
data() {
|
return {
|
windowWidth: window.innerWidth,
|
isCollapse: false
|
}
|
},
|
watch: {
|
windowWidth(newWidth) {
|
// 当窗口宽度小于某个值时，可以触发折叠
|
if (newWidth < 1200 && !this.isCollapse) {
|
this.isCollapse = true
|
this.$store.commit('SET_ISFOLD', true)
|
} else if (newWidth >= 1200 && this.isCollapse) {
|
this.isCollapse = false
|
this.$store.commit('SET_ISFOLD', false)
|
}
|
}
|
},
|
created() {
|
// 初始化时检查窗口大小
|
this.handleResize()
|
},
|
mounted() {
|
// 监听窗口大小变化
|
window.addEventListener('resize', this.handleResize)
|
},
|
beforeDestroy() {
|
// 移除监听
|
window.removeEventListener('resize', this.handleResize)
|
},
|
methods: {
|
handleResize() {
|
this.windowWidth = window.innerWidth
|
}
|
},
|
}
|
</script>
|
|
<style lang="less">
|
::-webkit-scrollbar {
|
display: none;
|
}
|
|
html,
|
body,
|
#app {
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
background-color: rgb(245, 245, 245);
|
}
|
|
.selected {
|
color: #049C9A !important;
|
}
|
|
.el-button--primary {
|
background-color: #009688 !important;
|
border-color: #009688 !important;
|
}
|
|
.el-button--text {
|
color: #009688 !important;
|
}
|
|
.el-button--default:focus,
|
.el-button--default:hover {
|
color: #009688 !important;
|
border-color: #009688 !important;
|
background: #E6FFFF !important;
|
}
|
|
.card {
|
.el-form-item__label {
|
color: #222222;
|
font-family: 'SourceHanSansCN-Medium';
|
line-height: 14px;
|
}
|
|
.el-input__inner {
|
width: 290px;
|
padding: 0 12px;
|
border-radius: 6px;
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
}
|
}
|
|
.el-dialog {
|
border-radius: 16px 16px 6px 6px;
|
|
.el-dialog__header {
|
font-family: 'Source Han Sans CN Bold Bold';
|
font-weight: bold;
|
font-size: 20px;
|
line-height: 20px;
|
color: #222222;
|
padding: 39px 0 36px 30px;
|
border-bottom: 1px solid rgba(238, 238, 238, 1);
|
}
|
|
.el-dialog__body {
|
padding: 15px 24px 33px 14px;
|
overflow: hidden;
|
}
|
}
|
|
.el-input__inner:focus,
|
.el-select .el-input__inner:focus,
|
.el-select .el-input.is-focus .el-input__inner {
|
border-color: #009688;
|
}
|
|
.el-switch.is-checked .el-switch__core {
|
background-color: #009688;
|
border-color: #009688;
|
}
|
|
.select-member-footer {
|
display: flex;
|
justify-content: center;
|
|
button {
|
width: 150px;
|
}
|
}
|
|
.el-tabs__item.is-active {
|
color: #009688;
|
}
|
|
.el-tabs__item:hover {
|
color: #009688;
|
}
|
|
.el-tabs__active-bar {
|
background-color: #009688;
|
}
|
</style>
|
