1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00

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

This reverts commit 7f06c7e92e565bd5ab5b9703377c0d8f814443e6.
This commit is contained in:
wanghe-fit2cloud 2024-09-25 10:24:33 +08:00
parent ec4d708569
commit cb6c58cb5d
3 changed files with 80 additions and 84 deletions

View File

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

View File

@ -1,6 +1,6 @@
<template> <template>
<el-card class="router_card"> <el-card class="router_card">
<div class="flex w-full justify-between items-center md:justify-between md:flex-row"> <div class="flex w-full flex-col md:justify-between md:flex-row">
<el-radio-group v-model="activeName" @change="handleChange"> <el-radio-group v-model="activeName" @change="handleChange">
<el-radio-button <el-radio-button
class="router_card_button" class="router_card_button"

View File

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