<template>
|
<div id="app">
|
<router-view />
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
name: "App",
|
data() {
|
return {
|
windowWidth: window.innerWidth,
|
};
|
},
|
watch: {
|
windowWidth(newWidth) {
|
// 当窗口宽度小于某个值时，可以触发折叠
|
if (newWidth < 1000) {
|
this.$store.commit("SET_ISFOLD", true);
|
} else if (newWidth >= 1000 && this.isFold) {
|
this.$store.commit("SET_ISFOLD", false);
|
}
|
},
|
},
|
computed: {
|
...mapState(["isFold"]),
|
},
|
created() {
|
// 初始化时检查窗口大小
|
this.handleResize();
|
},
|
mounted() {
|
// 监听窗口大小变化
|
window.addEventListener("resize", this.handleResize);
|
},
|
beforeDestroy() {
|
// 移除监听
|
window.removeEventListener("resize", this.handleResize);
|
},
|
methods: {
|
handleResize() {
|
if (window.innerWidth < 1000) {
|
this.$store.commit("SET_ISFOLD", true);
|
} else if (window.innerWidth >= 1000 && this.isFold) {
|
this.$store.commit("SET_ISFOLD", false);
|
}
|
this.windowWidth = window.innerWidth;
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
::-webkit-scrollbar {
|
display: none;
|
}
|
.table-container {
|
::-webkit-scrollbar {
|
display: block !important;
|
width: 6px;
|
height: 6px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
border-radius: 3px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #009688;
|
border-radius: 3px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #00796b;
|
}
|
}
|
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-custom {
|
.el-form {
|
.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 {
|
.el-form-item__label {
|
line-height: 32px;
|
}
|
|
.el-input__inner {
|
width: 200px;
|
}
|
}
|
}
|
|
.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;
|
gap: 10px;
|
|
button {
|
width: 150px;
|
}
|
}
|
|
.el-tabs__item.is-active {
|
color: #009688;
|
}
|
|
.el-tabs__item:hover {
|
color: #009688;
|
}
|
|
.el-tabs__active-bar {
|
background-color: #009688;
|
}
|
|
.el-button + .el-button,
|
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
margin-left: 0;
|
}
|
|
.btn_box,
|
.search-btn-box .el-form-item__content {
|
display: flex;
|
justify-content: center;
|
gap: 10px;
|
}
|
|
.search-btn-box .el-form-item__content {
|
margin-left: 63px;
|
}
|
</style>
|
