Skip to content

Commit 398775f

Browse files
ssongliussongliu
committed
style: Adjust the global interval style
1 parent c59105f commit 398775f

File tree

24 files changed

+60
-56
lines changed

24 files changed

+60
-56
lines changed

‎frontend/src/components/app-status/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="app-status" v-if="data.isExist">
33
<el-card>
44
<div class="flex w-full flex-col gap-4 md:flex-row">
5-
<div class="flex flex-wrap gap-4">
5+
<div class="flex flex-wrap gap-4 ml-3">
66
<el-tag effect="dark" type="success">{{ data.app }}</el-tag>
77
<Status class="mt-0.5" :key="refresh" :status="data.status"></Status>
88
<el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>

‎frontend/src/components/layout-content/index.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,11 @@ const showBack = computed(() => {
9393
@use '@/styles/mixins.scss' as *;
9494
9595
.content-container__app {
96-
margin-top: 20px;
96+
margin-top: 7px;
9797
}
9898
9999
.content-container__search {
100-
margin-top: 20px;
100+
margin-top: 7px;
101101
.el-card {
102102
--el-card-padding: 12px;
103103
}
@@ -121,7 +121,7 @@ const showBack = computed(() => {
121121
}
122122
123123
.content-container__main {
124-
margin-top: 20px;
124+
margin-top: 7px;
125125
}
126126
127127
.prompt {

‎frontend/src/layout/components/Sidebar/components/Logo.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const goHome = () => {
4141
display: flex;
4242
align-items: center;
4343
justify-content: center;
44-
height: 55px;
44+
height: 49px;
4545
z-index: 1;
4646
img {
4747
object-fit: contain;

‎frontend/src/layout/components/Sidebar/index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
.el-menu-item {
88
border-radius: 4px;
99
background-color: var(--el-menu-item-bg-color);
10-
margin: 6px 0;
11-
height: 46px;
10+
margin: 7px 0;
11+
height: 42px;
1212
box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
1313
box-sizing: border-box;
1414

@@ -51,7 +51,7 @@
5151
.el-sub-menu__title {
5252
background-color: var(--el-menu-item-bg-color);
5353
box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
54-
margin: 6px 0;
54+
margin-top: 7px;
5555
height: 46px;
5656
border-radius: 4px;
5757
&:hover {

‎frontend/src/layout/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div :class="classObj" class="app-wrapper" v-loading="loading" :element-loading-text="loadingText" fullscreen>
33
<div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />
44
<div class="app-sidebar" v-if="!globalStore.isFullScreen">
5-
<el-affix :offset="18" class="affix">
5+
<el-affix :offset="17" class="affix">
66
<el-tooltip
77
:content="menuStore.isCollapse ? $t('commons.button.expand') : $t('commons.button.collapse')"
88
>
@@ -180,7 +180,7 @@ onMounted(() => {
180180
overflow-x: hidden;
181181
}
182182
.app-main {
183-
padding: 20px;
183+
padding: 7px 20px;
184184
flex: 1;
185185
overflow: auto;
186186
}

‎frontend/src/styles/common.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ html {
144144
font-size: 12px;
145145

146146
.el-card {
147-
--el-card-padding: 12px;
147+
--el-card-padding: 9px;
148148

149149
.buttons {
150150
margin-left: 100px;
@@ -271,6 +271,10 @@ html {
271271
width: 200px !important;
272272
}
273273

274+
.card-interval {
275+
margin-top: 7px;
276+
}
277+
274278
.p-w-300 {
275279
width: 300px !important;
276280
}

‎frontend/src/views/ai/gpu/index.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
{{ gpuInfo.cudaVersion }}
3434
</el-descriptions-item>
3535
</el-descriptions>
36-
<el-collapse v-model="activeNames" class="mt-5">
36+
<el-collapse v-model="activeNames" class="card-interval">
3737
<el-collapse-item v-for="item in gpuInfo.gpu" :key="item.index" :name="item.index">
3838
<template #title>
3939
<span class="name-class">{{ item.index + '. ' + item.productName }}</span>
@@ -152,7 +152,7 @@
152152
}}
153153
</el-descriptions-item>
154154
</el-descriptions>
155-
<div class="mt-5">
155+
<div class="card-interval">
156156
<span class="title-class">{{ $t('aiTools.gpu.process') }}</span>
157157
</div>
158158
<el-table :data="item.processes" v-if="item.processes?.length !== 0">
@@ -191,7 +191,7 @@
191191
{{ xpuInfo.driverVersion }}
192192
</el-descriptions-item>
193193
</el-descriptions>
194-
<el-collapse v-model="activeNames" class="mt-5">
194+
<el-collapse v-model="activeNames" class="card-interval">
195195
<el-collapse-item
196196
v-for="item in xpuInfo.xpu"
197197
:key="item.basic.deviceID"
@@ -226,7 +226,7 @@
226226
{{ item.basic.pciBdfAddress }}
227227
</el-descriptions-item>
228228
</el-descriptions>
229-
<div class="mt-5">
229+
<div class="card-interval">
230230
<span class="title-class">{{ $t('aiTools.gpu.process') }}</span>
231231
</div>
232232
<el-table :data="item.processes" v-if="item.processes?.length !== 0">

‎frontend/src/views/container/container/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div v-loading="loading">
33
<docker-status v-model:isActive="isActive" v-model:isExist="isExist" @search="search" />
44

5-
<div class="mt-5" v-if="isExist && isActive">
5+
<div class="card-interval" v-if="isExist && isActive">
66
<el-tag @click="searchWithStatus('all')" v-if="countItem.all" effect="plain" size="large">
77
{{ $t('commons.table.all') }} * {{ countItem.all }}
88
</el-tag>

‎frontend/src/views/container/dashboard/index.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
/>
99

1010
<div v-if="isExist" :class="{ mask: !isActive }">
11-
<CardWithHeader :header="$t('menu.container')" class="mt-5">
11+
<CardWithHeader :header="$t('menu.container')" class="card-interval">
1212
<template #body>
1313
<span class="count" @click="goRouter('Container')">{{ countItem.containerCount }}</span>
1414
</template>
@@ -39,7 +39,7 @@
3939
</el-tag>
4040
</template>
4141
</CardWithHeader>
42-
<el-row :gutter="20" class="mt-5">
42+
<el-row :gutter="7" class="card-interval">
4343
<el-col :span="8">
4444
<CardWithHeader :header="$t('container.compose')">
4545
<template #body>
@@ -69,7 +69,7 @@
6969
</CardWithHeader>
7070
</el-col>
7171
</el-row>
72-
<el-row :gutter="20" class="mt-5">
72+
<el-row :gutter="7" class="card-interval">
7373
<el-col :span="8">
7474
<CardWithHeader :header="$t('container.imageRepo')">
7575
<template #body>
@@ -92,7 +92,7 @@
9292
</CardWithHeader>
9393
</el-col>
9494
</el-row>
95-
<CardWithHeader :header="$t('container.setting')" class="mt-5">
95+
<CardWithHeader :header="$t('container.setting')" class="card-interval">
9696
<template #body>
9797
<el-descriptions :column="1" border>
9898
<el-descriptions-item :label="$t('container.sockPath')">

‎frontend/src/views/container/setting/index.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
@search="search"
99
/>
1010

11-
<div v-if="isExist" class="app-status p-mt-20">
11+
<div v-if="isExist" class="app-status card-interval">
1212
<el-card>
1313
<div class="flex w-full flex-col gap-4 md:flex-row">
14-
<div class="flex flex-wrap gap-4">
14+
<div class="flex flex-wrap gap-4 ml-3">
1515
<el-tag class="float-left" effect="dark" type="success">Docker</el-tag>
1616
<Status class="mt-0.5" :status="isActive ? 'enable' : 'disable'" />
1717
<el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
@@ -32,7 +32,7 @@
3232
</el-card>
3333
</div>
3434

35-
<LayoutContent v-if="isExist" class="p-mt-20" :title="$t('container.setting')">
35+
<LayoutContent v-if="isExist" class="card-interval" :title="$t('container.setting')">
3636
<template #main>
3737
<el-radio-group v-model="confShowType" @change="changeMode">
3838
<el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>

‎frontend/src/views/cronjob/cronjob/record/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div v-if="recordShow" v-loading="loading">
3-
<div class="app-status p-mt-20">
3+
<div class="app-status card-interval">
44
<el-card>
55
<div class="flex w-full flex-col gap-4 md:flex-row">
6-
<div class="flex flex-wrap gap-4">
6+
<div class="flex flex-wrap gap-4 ml-3">
77
<el-popover
88
v-if="dialogData.rowData.name.length >= 15"
99
placement="top-start"

‎frontend/src/views/database/mysql/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
44
<el-card>
55
<div class="flex w-full flex-col gap-4 md:flex-row">
6-
<div class="flex flex-wrap gap-4">
6+
<div class="flex flex-wrap gap-4 ml-3">
77
<el-tag class="float-left" effect="dark" type="success">
88
{{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
99
</el-tag>

‎frontend/src/views/database/postgresql/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
44
<el-card>
55
<div class="flex w-full flex-col gap-4 md:flex-row">
6-
<div class="flex flex-wrap gap-4">
6+
<div class="flex flex-wrap gap-4 ml-3">
77
<el-tag class="float-left" effect="dark" type="success">PostgreSQL</el-tag>
88
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
99
</div>

‎frontend/src/views/database/redis/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="app-status mt-5" v-if="currentDB && currentDB.from === 'remote'">
44
<el-card>
55
<div class="flex w-full flex-col gap-4 md:flex-row">
6-
<div class="flex flex-wrap gap-4">
6+
<div class="flex flex-wrap gap-4 ml-3">
77
<el-tag class="float-left" effect="dark" type="success">Redis</el-tag>
88
<el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
99
</div>

‎frontend/src/views/home/app/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<CardWithHeader :header="$t('app.app')" class="mt-5" :loading="loading">
3+
<CardWithHeader :header="$t('app.app')" class="card-interval" :loading="loading">
44
<template #header-r>
55
<el-popover placement="left" :width="226" trigger="click">
66
<el-input size="small" v-model="filter" clearable @input="loadOption()" />
@@ -23,7 +23,7 @@
2323
</el-popover>
2424
</template>
2525
<template #body>
26-
<el-scrollbar height="545px" class="moz-height">
26+
<el-scrollbar height="531px" class="moz-height">
2727
<div class="h-app-card" v-for="(app, index) in apps" :key="index">
2828
<el-row :gutter="5">
2929
<el-col :span="5">

‎frontend/src/views/home/index.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<el-alert
2323
v-if="!isSafety && globalStore.showEntranceWarn"
24-
style="margin-top: 20px"
24+
class="card-interval"
2525
type="warning"
2626
@close="hideEntrance"
2727
>
@@ -40,7 +40,7 @@
4040
</template>
4141
</el-alert>
4242

43-
<el-row :gutter="20" style="margin-top: 20px">
43+
<el-row :gutter="7" class="card-interval">
4444
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
4545
<CardWithHeader :header="$t('menu.home')" height="166px">
4646
<template #body>
@@ -82,12 +82,12 @@
8282
</div>
8383
</template>
8484
</CardWithHeader>
85-
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px">
85+
<CardWithHeader :header="$t('commons.table.status')" class="card-interval">
8686
<template #body>
8787
<Status ref="statusRef" style="margin-bottom: 33px" />
8888
</template>
8989
</CardWithHeader>
90-
<CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px; margin-bottom: 20px">
90+
<CardWithHeader :header="$t('menu.monitor')" class="card-interval">
9191
<template #header-r>
9292
<el-radio-group
9393
style="float: right; margin-left: 5px"
@@ -253,7 +253,7 @@
253253
</template>
254254
</CardWithHeader>
255255

256-
<AppLauncher ref="appRef" style="margin-top: 20px" />
256+
<AppLauncher ref="appRef" class="card-interval" />
257257
</el-col>
258258
</el-row>
259259

‎frontend/src/views/host/firewall/status/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<div class="app-status" style="margin-top: 20px" v-if="baseInfo.isExist">
2+
<div class="app-status card-interval" v-if="baseInfo.isExist">
33
<el-card>
44
<div class="flex w-full flex-col gap-4 md:flex-row">
5-
<div class="flex flex-wrap gap-4">
5+
<div class="flex flex-wrap gap-4 ml-3">
66
<el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
77
<Status class="mt-0.5" :status="baseInfo.isActive ? 'enable' : 'disable'" />
88
<el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>

‎frontend/src/views/host/monitor/monitor/index.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</div>
2020
</el-card>
2121
</div>
22-
<el-row :gutter="20" style="margin-top: 20px">
22+
<el-row :gutter="7" class="card-interval">
2323
<el-col :span="24">
2424
<el-card style="overflow: inherit">
2525
<template #header>
@@ -51,7 +51,7 @@
5151
</el-card>
5252
</el-col>
5353
</el-row>
54-
<el-row :gutter="20" style="margin-top: 20px">
54+
<el-row :gutter="7" class="card-interval">
5555
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
5656
<el-card style="overflow: inherit">
5757
<template #header>
@@ -113,7 +113,7 @@
113113
</el-card>
114114
</el-col>
115115
</el-row>
116-
<el-row :gutter="20" style="margin-top: 20px">
116+
<el-row :gutter="7" class="card-interval">
117117
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
118118
<el-card style="overflow: inherit">
119119
<template #header>
@@ -570,7 +570,7 @@ onMounted(() => {
570570

571571
<style scoped lang="scss">
572572
.content-container__search {
573-
margin-top: 20px;
573+
margin-top: 7px;
574574
.el-card {
575575
--el-card-padding: 12px;
576576
}

‎frontend/src/views/host/ssh/ssh/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div v-loading="loading">
33
<FireRouter />
44

5-
<div class="app-status mt-5">
5+
<div class="app-status card-interval">
66
<el-card>
77
<div class="flex w-full flex-col gap-4 md:flex-row">
8-
<div class="flex flex-wrap gap-4">
8+
<div class="flex flex-wrap gap-4 ml-3">
99
<el-tag class="float-left" effect="dark" type="success">SSH</el-tag>
1010
<Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" :msg="form.message" />
1111
</div>

‎frontend/src/views/terminal/terminal/index.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div>
33
<el-tabs
44
type="card"
5-
class="terminal-tabs"
6-
style="background-color: var(--panel-terminal-tag-bg-color); margin-top: 20px"
5+
class="terminal-tabs card-interval"
6+
style="background-color: var(--panel-terminal-tag-bg-color)"
77
v-model="terminalValue"
88
:before-leave="beforeLeave"
99
@tab-change="quickCmd = ''"
@@ -246,13 +246,13 @@ const cleanTimer = () => {
246246
};
247247
248248
const loadHeight = () => {
249-
return globalStore.openMenuTabs ? '269px' : '229px';
249+
return globalStore.openMenuTabs ? '230px' : '190px';
250250
};
251251
const loadEmptyHeight = () => {
252-
return globalStore.openMenuTabs ? '240px' : '200px';
252+
return globalStore.openMenuTabs ? '201px' : '156px';
253253
};
254254
const loadFullScreenHeight = () => {
255-
return globalStore.openMenuTabs ? '66px' : '90px';
255+
return globalStore.openMenuTabs ? '105px' : '60px';
256256
};
257257
258258
const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {

0 commit comments

Comments
 (0)