From 2977d97b59e336bd53baa14b8d1022b087c8fdc1 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期四, 10 四月 2025 09:05:57 +0800
Subject: [PATCH] 新建页面，打开表格的滚动条
---
src/App.vue | 67 +++++++++++++++++++++------------
1 files changed, 42 insertions(+), 25 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f6f68ce..4566a62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,57 +5,77 @@
</template>
<script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
export default {
- name: 'App',
+ name: "App",
data() {
return {
windowWidth: window.innerWidth,
- }
+ };
},
watch: {
windowWidth(newWidth) {
// 当窗口宽度小于某个值时，可以触发折叠
if (newWidth < 1000) {
- this.$store.commit('SET_ISFOLD', true)
+ this.$store.commit("SET_ISFOLD", true);
} else if (newWidth >= 1000 && this.isFold) {
- this.$store.commit('SET_ISFOLD', false)
+ this.$store.commit("SET_ISFOLD", false);
}
- }
+ },
},
computed: {
- ...mapState(['isFold'])
+ ...mapState(["isFold"]),
},
created() {
// 初始化时检查窗口大小
- this.handleResize()
+ this.handleResize();
},
mounted() {
// 监听窗口大小变化
- window.addEventListener('resize', this.handleResize)
+ window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
// 移除监听
- window.removeEventListener('resize', this.handleResize)
+ window.removeEventListener("resize", this.handleResize);
},
methods: {
handleResize() {
if (window.innerWidth < 1000) {
- this.$store.commit('SET_ISFOLD', true)
+ this.$store.commit("SET_ISFOLD", true);
} else if (window.innerWidth >= 1000 && this.isFold) {
- this.$store.commit('SET_ISFOLD', false)
+ this.$store.commit("SET_ISFOLD", false);
}
- this.windowWidth = window.innerWidth
- }
+ 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 {
@@ -66,7 +86,7 @@
}
.selected {
- color: #049C9A !important;
+ color: #049c9a !important;
}
.el-button--primary {
@@ -82,15 +102,14 @@
.el-button--default:hover {
color: #009688 !important;
border-color: #009688 !important;
- background: #E6FFFF !important;
+ background: #e6ffff !important;
}
.card-custom {
.el-form {
-
.el-form-item__label {
color: #222222;
- font-family: 'SourceHanSansCN-Medium';
+ font-family: "SourceHanSansCN-Medium";
line-height: 14px;
}
@@ -103,7 +122,6 @@
}
.el-dialog {
-
.el-form-item__label {
line-height: 32px;
}
@@ -118,7 +136,7 @@
border-radius: 16px 16px 6px 6px;
.el-dialog__header {
- font-family: 'Source Han Sans CN Bold Bold';
+ font-family: "Source Han Sans CN Bold Bold";
font-weight: bold;
font-size: 20px;
line-height: 20px;
@@ -165,8 +183,8 @@
background-color: #009688;
}
-.el-button+.el-button,
-.el-checkbox.is-bordered+.el-checkbox.is-bordered {
+.el-button + .el-button,
+.el-checkbox.is-bordered + .el-checkbox.is-bordered {
margin-left: 0;
}
@@ -178,7 +196,6 @@
}
.search-btn-box .el-form-item__content {
-
margin-left: 63px;
}
</style>
--
Gitblit v1.7.1