github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style:优化概览界面的布局 (#6491) 

* fix: <body> cannot be child of <div>

* style:优化概览界面的布局
pull/6498/head
see-more 2 months ago committed by GitHub
parent
0e6fdffeec
commit
7f06c7e92e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 85 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      frontend/src/components/error-message/error_code.vue
  2. 3
      frontend/src/components/router-button/index.vue
  3. 142
      frontend/src/views/home/index.vue

20
frontend/src/components/error-message/error_code.vue
Unescape View File

@ -1,16 +1,14 @@
<template>
<div>
<body>
<div>
<el-row type="flex" justify="center">
<h1>{{ loadErrInfo() }}</h1>
</el-row>
</div>
<hr />
<div>
<el-row type="flex" justify="center"><span>nginx</span></el-row>
</div>
</body>
<div>
<el-row type="flex" justify="center">
<h1>{{ loadErrInfo() }}</h1>
</el-row>
</div>
<hr />
<div>
<el-row type="flex" justify="center"><span>nginx</span></el-row>
</div>
</div>
</template>

3
frontend/src/components/router-button/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<el-card class="router_card">
<div class="flex w-full flex-col md:justify-between md:flex-row">
<div class="flex w-full justify-between items-center md:justify-between md:flex-row">
<el-radio-group v-model="activeName" @change="handleChange">
<el-radio-button
class="router_card_button"
@ -76,6 +76,7 @@ onMounted(() => {
<style lang="scss">
.router_card {
--el-card-padding: 0;
width: 100%;
.el-card__body {
display: flex;
justify-content: space-between;

142
frontend/src/views/home/index.vue
Unescape View File

@ -42,39 +42,37 @@
<el-row :gutter="20" style="margin-top: 20px">
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
<CardWithHeader :header="$t('home.overview')" height="166px">
<CardWithHeader :header="$t('home.overview')">
<template #body>
<div class="h-overview">
<el-row>
<el-col :span="6">
<span>{{ $t('menu.website') }}</span>
<div class="count">
<span @click="goRouter('/websites')">{{ baseInfo?.websiteNumber }}</span>
</div>
</el-col>
<el-col :span="6">
<span>{{ $t('menu.database') }} - {{ $t('database.all') }}</span>
<div class="count">
<span @click="goRouter('/databases')">{{ baseInfo?.databaseNumber }}</span>
</div>
</el-col>
<el-col :span="6">
<span>{{ $t('menu.cronjob') }}</span>
<div class="count">
<span @click="goRouter('/cronjobs')">
{{ baseInfo?.cronjobNumber }}
</span>
</div>
</el-col>
<el-col :span="6">
<span>{{ $t('home.appInstalled') }}</span>
<div class="count">
<span @click="goRouter('/apps/installed')">
{{ baseInfo?.appInstalledNumber }}
</span>
</div>
</el-col>
</el-row>
<div>
<span>{{ $t('menu.website') }}</span>
<div class="count">
<span @click="goRouter('/websites')">{{ baseInfo?.websiteNumber }}</span>
</div>
</div>
<div>
<span>{{ $t('menu.database') }} - {{ $t('database.all') }}</span>
<div class="count">
<span @click="goRouter('/databases')">{{ baseInfo?.databaseNumber }}</span>
</div>
</div>
<div>
<span>{{ $t('menu.cronjob') }}</span>
<div class="count">
<span @click="goRouter('/cronjobs')">
{{ baseInfo?.cronjobNumber }}
</span>
</div>
</div>
<div>
<span>{{ $t('home.appInstalled') }}</span>
<div class="count">
<span @click="goRouter('/apps/installed')">
{{ baseInfo?.appInstalledNumber }}
</span>
</div>
</div>
</div>
</template>
</CardWithHeader>
@ -85,42 +83,44 @@
</CardWithHeader>
<CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px; margin-bottom: 20px">
<template #header-r>
<el-radio-group
style="float: right; margin-left: 5px"
v-model="chartOption"
@change="changeOption"
>
<el-radio-button value="network">{{ $t('home.network') }}</el-radio-button>
<el-radio-button value="io">{{ $t('home.io') }}</el-radio-button>
</el-radio-group>
<el-select
v-if="chartOption === 'network'"
@change="onLoadBaseInfo(false, 'network')"
v-model="searchInfo.netOption"
class="p-w-200 float-right"
<div
class="float-right flex flex-col items-end flex-wrap sm:items-center gap-2 sm:flex-row sm:gap-4"
>
<template #prefix>{{ $t('home.networkCard') }}</template>
<el-option
v-for="item in netOptions"
:key="item"
:label="item == 'all' ? $t('commons.table.all') : item"
:value="item"
/>
</el-select>
<el-select
v-if="chartOption === 'io'"
v-model="searchInfo.ioOption"
@change="onLoadBaseInfo(false, 'io')"
class="p-w-200 float-right"
>
<template #prefix>{{ $t('home.disk') }}</template>
<el-option
v-for="item in ioOptions"
:key="item"
:label="item == 'all' ? $t('commons.table.all') : item"
:value="item"
/>
</el-select>
<el-radio-group v-model="chartOption" @change="changeOption">
<el-radio-button value="network">{{ $t('home.network') }}</el-radio-button>
<el-radio-button value="io">{{ $t('home.io') }}</el-radio-button>
</el-radio-group>
<div>
<el-select
v-if="chartOption === 'network'"
@change="onLoadBaseInfo(false, 'network')"
v-model="searchInfo.netOption"
class="p-w-200 float-right"
>
<template #prefix>{{ $t('home.networkCard') }}</template>
<el-option
v-for="item in netOptions"
:key="item"
:label="item == 'all' ? $t('commons.table.all') : item"
:value="item"
/>
</el-select>
<el-select
v-if="chartOption === 'io'"
v-model="searchInfo.ioOption"
@change="onLoadBaseInfo(false, 'io')"
class="p-w-200 float-right"
>
<template #prefix>{{ $t('home.disk') }}</template>
<el-option
v-for="item in ioOptions"
:key="item"
:label="item == 'all' ? $t('commons.table.all') : item"
:value="item"
/>
</el-select>
</div>
</div>
</template>
<template #body>
<div style="position: relative; margin-top: 20px">
@ -685,14 +685,20 @@ onBeforeUnmount(() => {
<style lang="scss">
.h-overview {
text-align: center;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: row;
span:first-child {
font-size: 14px;
color: var(--el-text-color-regular);
}
@media only screen and (max-width: 1300px) {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
span:first-child {
font-size: 12px;
font-size: 16px;
color: var(--el-text-color-regular);
}
}

Write Preview
Loading…
Cancel
Save