From 1598fac6c5769b061dd02e937fbaf969b5e1c20d Mon Sep 17 00:00:00 2001
From: hyingbo <1363390067@qq.com>
Date: 星期一, 18 八月 2025 14:33:52 +0800
Subject: [PATCH] 首页样式调整
---
src/views/dashboard/DncManagerSignage.vue | 233 ++++++++++++++++++++++++++++------------------------------
1 files changed, 113 insertions(+), 120 deletions(-)
diff --git a/src/views/dashboard/DncManagerSignage.vue b/src/views/dashboard/DncManagerSignage.vue
index c3ec7eb..53b7bf2 100644
--- a/src/views/dashboard/DncManagerSignage.vue
+++ b/src/views/dashboard/DncManagerSignage.vue
@@ -1,25 +1,31 @@
<template>
- <div class="page-container">
- <div class="content-container">
- <div style="width: 50%" class="left-col">
- <dv-border-box-9 style="padding: 30px 20px 0">
- <div id="running_state_chart" style="width:100%;height: 300px"></div>
- <div id="efficiency_chart" style="width: 100%;height: 465px"></div>
- </dv-border-box-9>
+ <div class="home-container">
+ <div class="left-card">
+ <div class="card">
+ <h2 class="card-title">鍗＄墖1</h2>
+ <div class="card-content">
+ </div>
</div>
+ </div>
- <div style="width: 50%" class="middle-col">
- <dv-border-box-9 style="padding: 10px 10px 0">
- <!-- 娣诲姞"鎴戠殑寰呭姙"鏍囬 -->
- <div class="flow-todo-title">鎴戠殑寰呭姙</div>
-
+ <!-- 鍙充晶涓や釜灏忓崱鐗� -->
+ <div class="right-cards">
+ <div class="card top-card">
+ <h2 class="card-title">鎴戠殑寰呭姙</h2>
+ <div class="card-content">
<!-- 宓屽叆FlowTodo缁勪欢骞惰缃粯璁ゅ垎绫� -->
<flow-todo
ref="flowTodo"
class="embedded-flow-todo"
:defaultCategories="['drApproval','ggApproval','programConfirmApproval']"
></flow-todo>
- </dv-border-box-9>
+ </div>
+ </div>
+
+ <div class="card bottom-card">
+ <h2 class="card-title">鍗＄墖2</h2>
+ <div class="card-content">
+ </div>
</div>
</div>
</div>
@@ -43,7 +49,6 @@
// 纭繚缁勪欢鍔犺浇鍚庝娇鐢ㄩ粯璁ゅ垎绫绘煡璇㈡暟鎹�
this.$nextTick(() => {
if (this.$refs.flowTodo) {
- // 瑙﹀彂鏌ヨ锛屼娇鐢ㄩ粯璁ょ殑category鏉′欢[1,2]
this.$refs.flowTodo.searchQuery()
}
})
@@ -54,115 +59,103 @@
}
</script>
-<style lang="less" scoped>
-.page-container {
- background-color: #000b29;
+<style scoped>
+.home-container {
+ display: flex;
min-height: 100vh;
- padding: 15px;
-
- .content-container {
- padding-top: 5px;
- display: flex;
- justify-content: space-between;
- gap: 15px;
-
- .left-col, .middle-col {
- display: flex;
- flex-direction: column;
- }
-
- .middle-col {
- .dv-border-box-9 {
- background-color: #000b29;
- flex-grow: 1;
- }
-
- .flow-todo-title {
- color: #fff;
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 15px;
- text-align: center;
- }
-
- .embedded-flow-todo {
- width: 100%;
- height: 340px; /* 鎺у埗楂樺害涓哄彸渚т竴鍗婂尯鍩� */
- overflow: auto;
- background-color: inherit;
- }
- }
- }
+ padding: 20px;
+ box-sizing: border-box;
+ gap: 20px;
+ background-color: #f5f7fa;
}
-// 宓屽叆缁勪欢鏍峰紡璋冩暣
-.embedded-flow-todo {
- // 闅愯棌鏌ヨ鍖哄煙銆佹搷浣滄寜閽拰閫夋嫨鎻愮ず
- /deep/ .table-page-search-wrapper,
- /deep/ .table-operator,
- /deep/ .ant-alert {
- display: none !important;
- }
-
- // 闅愯棌澶氶�夋鍒�
- /deep/ .ant-table-selection-column {
- display: none !important;
- }
-
- // 琛ㄦ牸杈规鏍峰紡
- /deep/ .ant-table {
- border: 1px solid rgba(9, 9, 9, 0.1) !important;
- border-collapse: collapse !important;
- }
- /deep/ .ant-table-thead > tr > th {
- border: 1px solid rgba(9, 9, 9, 0.1) !important;
- }
- /deep/ .ant-table-tbody > tr > td {
- border: 1px solid rgba(9, 9, 9, 0.1) !important;
- }
-
- // 琛ㄦ牸鏍峰紡璋冩暣
- /deep/ .ant-table,
- /deep/ .ant-table-tbody > tr > td,
- /deep/ .ant-table-thead > tr > th,
- /deep/ .ant-table-thead > tr > th span {
- background-color: transparent !important;
- color: #000000 !important;
- }
-
- // 鍒嗛〉鎺т欢鏍峰紡
- /deep/ .ant-pagination-item,
- /deep/ .ant-pagination-prev,
- /deep/ .ant-pagination-next {
- background-color: rgb(255, 255, 255) !important;
- border-color: rgb(255, 255, 255) !important;
- }
-
- /deep/ .ant-pagination-item a,
- /deep/ .ant-pagination-prev a,
- /deep/ .ant-pagination-next a {
- color: #000000 !important;
- }
-
- /deep/ .ant-pagination-item-active {
- background-color: rgba(33, 186, 198, 0.6) !important;
- border-color: rgba(33, 186, 198, 0.8) !important;
- }
-
- /deep/ .ant-card {
- background-color: transparent !important;
- border: none !important;
- }
-
- // 鎿嶄綔鍒楅摼鎺ユ牱寮�
- /deep/ .ant-table-tbody > tr > td a {
- color: #40a9ff !important;
- }
+.left-card {
+ flex: 1;
+ min-width: 0;
}
-// 杈规缁勪欢鏍峰紡
-/deep/ .dv-border-box-9 {
- --color: rgba(33, 186, 198, 0.6) !important;
- background-color: #000b29 !important;
+.right-cards {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
}
-</style>
+
+.card {
+ background: #ffffff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+ padding: 10px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.top-card {
+ flex: 1;
+}
+
+.bottom-card {
+ flex: 1;
+}
+
+.card-title {
+ margin: 0 0 15px 0;
+ color: #333;
+ font-size: 18px;
+ font-weight: 600;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eee;
+}
+
+.card-content {
+ flex: 1;
+ overflow: auto;
+}
+
+/* 娓呴櫎寰呭姙椤甸潰鏌ヨ鏉′欢銆侀�変腑鏉℃暟銆佸閫夋 */
+.embedded-flow-todo >>> .table-page-search-wrapper {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .table-operator {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .ant-alert.ant-alert-info {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .ant-table-thead .ant-table-selection-column,
+.embedded-flow-todo >>> .ant-table-tbody .ant-table-selection-column {
+ display: none !important;
+}
+
+.embedded-flow-todo >>> .ant-table-selection {
+ display: none !important;
+}
+.embedded-flow-todo >>> .ant-table-row-selected {
+ background: transparent !important;
+}
+
+.embedded-flow-todo >>> .a-table {
+ margin-top: 0 !important;
+ border-top: none !important;
+}
+
+@media (max-width: 992px) {
+ .home-container {
+ flex-direction: column;
+ }
+
+ .left-card, .right-cards {
+ width: 100%;
+ }
+
+ .left-card {
+ margin-bottom: 20px;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3