mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-12-27 09:49:28 +08:00
style: Fix the issue of incomplete watermark display (#10668)
This commit is contained in:
ssongliu
GitHub
parent
3274895dcf
commit
16e2ad64a2
3 changed files with 101 additions and 70 deletions
|
|
@ -23,28 +23,31 @@
|
|||
<Sidebar @menu-click="handleMenuClick" :menu-router="!classObj.openMenuTabs" @open-task="openTask" />
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<el-watermark
|
||||
v-if="globalStore.isMasterProductPro && globalStore.watermark"
|
||||
:content="loadContent()"
|
||||
:font="{
|
||||
fontSize: globalStore.watermark.fontSize,
|
||||
color: globalStore.watermark.color,
|
||||
textBaseline: 'top',
|
||||
}"
|
||||
:rotate="globalStore.watermark.rotate"
|
||||
:gap="[globalStore.watermark.gap, globalStore.watermark.gap]"
|
||||
>
|
||||
<div class="main-container">
|
||||
<mobile-header v-if="classObj.mobile" />
|
||||
<Tabs v-if="classObj.openMenuTabs" />
|
||||
<app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" class="app-main" />
|
||||
<Footer class="app-footer" v-if="!globalStore.isFullScreen" />
|
||||
</div>
|
||||
</el-watermark>
|
||||
<div class="main-container" v-else>
|
||||
<mobile-header v-if="classObj.mobile" />
|
||||
<Tabs v-if="classObj.openMenuTabs" />
|
||||
<el-watermark
|
||||
v-if="globalStore.isMasterProductPro && globalStore.watermark"
|
||||
:content="loadContent()"
|
||||
:font="{
|
||||
fontSize: globalStore.watermark.fontSize,
|
||||
color: globalStore.watermark.color,
|
||||
textBaseline: 'top',
|
||||
}"
|
||||
:rotate="globalStore.watermark.rotate"
|
||||
:gap="[globalStore.watermark.gap, globalStore.watermark.gap]"
|
||||
>
|
||||
<div class="app-main">
|
||||
<app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" />
|
||||
</div>
|
||||
</el-watermark>
|
||||
<app-main class="app-main" v-else :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" />
|
||||
<Footer :class="[!classObj.mobile ? 'app-footer' : '']" v-if="!globalStore.isFullScreen" />
|
||||
<TaskList ref="taskListRef" />
|
||||
<app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" class="app-main" />
|
||||
<Footer class="app-footer" v-if="!globalStore.isFullScreen" />
|
||||
</div>
|
||||
<TaskList ref="taskListRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -213,7 +216,6 @@ onMounted(() => {
|
|||
padding: 7px 20px;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.app-sidebar {
|
||||
z-index: 2;
|
||||
|
|
@ -229,15 +231,7 @@ onMounted(() => {
|
|||
z-index: 5;
|
||||
}
|
||||
}
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left: 180px;
|
||||
width: calc(100% - 180px);
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.main-container {
|
||||
margin-left: var(--panel-menu-hide-width);
|
||||
|
|
@ -248,10 +242,6 @@ onMounted(() => {
|
|||
.fixed-header {
|
||||
width: calc(100% - var(--panel-menu-hide-width));
|
||||
}
|
||||
.app-footer {
|
||||
margin-left: 75px;
|
||||
width: calc(100% - 75px);
|
||||
}
|
||||
}
|
||||
|
||||
.fullScreen {
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@
|
|||
<el-carousel
|
||||
class="my-carousel"
|
||||
:key="simpleNodes.length"
|
||||
height="346px"
|
||||
height="368px"
|
||||
:indicator-position="showSimpleNode() ? '' : 'none'"
|
||||
arrow="never"
|
||||
>
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
</template>
|
||||
<template #body>
|
||||
<el-scrollbar>
|
||||
<el-descriptions :column="1" class="ml-5 -mt-2" border>
|
||||
<el-descriptions :column="1" class="ml-5 -mt-2 h-systemInfo" border>
|
||||
<el-descriptions-item
|
||||
class-name="system-content"
|
||||
label-class-name="system-label"
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
<el-carousel-item key="simpleNode" v-if="showSimpleNode()">
|
||||
<CardWithHeader :header="$t('setting.panel')">
|
||||
<template #body>
|
||||
<el-scrollbar height="266px">
|
||||
<el-scrollbar height="286px">
|
||||
<div class="simple-node cursor-pointer" v-for="row in simpleNodes" :key="row.id">
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="21">
|
||||
|
|
@ -746,7 +746,7 @@ onBeforeUnmount(() => {
|
|||
|
||||
.h-systemInfo {
|
||||
margin-left: 18px;
|
||||
height: 286px;
|
||||
height: 306px;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.h-systemInfo {
|
||||
|
|
|
|||
|
|
@ -75,34 +75,79 @@
|
|||
</span>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
|
||||
<el-popover placement="bottom" :width="160" trigger="hover" v-if="chartsOption['memory']">
|
||||
<el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
|
||||
<el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}</el-tag>
|
||||
<el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}</el-tag>
|
||||
<el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryFree) }}</el-tag>
|
||||
<el-tag class="tagClass">{{ $t('home.shard') }}: {{ computeSize(currentInfo.memoryShard) }}</el-tag>
|
||||
<el-tag class="tagClass">{{ $t('home.cache') }}: {{ computeSize(currentInfo.memoryCache) }}</el-tag>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.available') }}: {{ computeSize(currentInfo.memoryAvailable) }}
|
||||
</el-tag>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
|
||||
</el-tag>
|
||||
<div v-if="currentInfo.swapMemoryTotal" class="mt-2">
|
||||
<el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
|
||||
</el-tag>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
|
||||
</el-tag>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
|
||||
</el-tag>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="currentInfo.swapMemoryTotal ? 360 : 160"
|
||||
trigger="hover"
|
||||
v-if="chartsOption['memory']"
|
||||
>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryFree) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.shard') }}: {{ computeSize(currentInfo.memoryShard) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.cache') }}: {{ computeSize(currentInfo.memoryCache) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.available') }}: {{ computeSize(currentInfo.memoryAvailable) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
|
||||
</el-tag>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="currentInfo.swapMemoryTotal" class="mt-20">
|
||||
<el-row>
|
||||
<el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-tag class="tagClass">
|
||||
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
|
||||
</el-tag>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #reference>
|
||||
<v-charts
|
||||
height="160px"
|
||||
|
|
@ -274,11 +319,6 @@ const showMore = ref(false);
|
|||
const totalCount = ref();
|
||||
|
||||
const baseInfo = ref<Dashboard.BaseInfo>({
|
||||
websiteNumber: 0,
|
||||
databaseNumber: 0,
|
||||
cronjobNumber: 0,
|
||||
appInstalledNumber: 0,
|
||||
|
||||
hostname: '',
|
||||
os: '',
|
||||
platform: '',
|
||||
|
|
@ -294,6 +334,7 @@ const baseInfo = ref<Dashboard.BaseInfo>({
|
|||
cpuLogicalCores: 0,
|
||||
cpuModelName: '',
|
||||
currentInfo: null,
|
||||
quickJump: [],
|
||||
});
|
||||
const currentInfo = ref<Dashboard.CurrentInfo>({
|
||||
uptime: 0,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue