fix: 优化界面样式和布局
This commit is contained in:
@@ -71,10 +71,12 @@ function handleSwitchTab(tab) {
|
||||
tab="仪表盘"
|
||||
>
|
||||
<div class="tab-content dashboard-content">
|
||||
<Dashboard
|
||||
@switch-tab="handleSwitchTab"
|
||||
@edit-server="handleEditServer"
|
||||
/>
|
||||
<div class="dashboard-scroll-wrapper">
|
||||
<Dashboard
|
||||
@switch-tab="handleSwitchTab"
|
||||
@edit-server="handleEditServer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane
|
||||
@@ -129,12 +131,20 @@ html, body, #app {
|
||||
|
||||
.tab-content {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 0;
|
||||
padding: 0 0 16px 0;
|
||||
height: calc(100vh - 50px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-scroll-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
@@ -157,7 +167,6 @@ html, body, #app {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding-right: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -231,6 +231,17 @@ function handleDelete(server) {
|
||||
|
||||
.server-url {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.server-url :deep(.n-tag) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.server-url :deep(.n-tag__content) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.server-bottom {
|
||||
|
||||
@@ -95,6 +95,7 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
|
||||
>{{ store.activeServer.value.status === 'connected' ? '已连接' : store.activeServer.value.status === 'connecting' ? '连接中...' : '未连接' }}</n-tag>
|
||||
</template>
|
||||
<n-descriptions
|
||||
class="server-descriptions"
|
||||
:column="2"
|
||||
size="small"
|
||||
bordered
|
||||
@@ -182,6 +183,22 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.server-descriptions :deep(.n-descriptions-table) {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.server-descriptions :deep(.n-descriptions-table-header),
|
||||
.server-descriptions :deep(.n-descriptions-table-content) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.server-descriptions :deep(.n-descriptions-table-content) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
|
||||
Reference in New Issue
Block a user