mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-17 03:04:46 +08:00
feat: 修改概况部分样式
This commit is contained in:
parent
65feaa20bf
commit
0912a87874
@ -19,13 +19,13 @@
|
|||||||
border-top: 1px solid #e4e7ed;
|
border-top: 1px solid #e4e7ed;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
a {
|
a {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: #858585;
|
color: #858585;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: #858585;
|
color: #858585;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<el-card :style="{ height: height }" class="home-card">
|
<el-card :style="{ height: height }" class="home-card">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span></span>
|
|
||||||
<span>{{ header }}</span>
|
<span>{{ header }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -24,20 +23,36 @@ defineProps({
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.home-card {
|
.home-card {
|
||||||
.header {
|
.header {
|
||||||
span:first-child {
|
span {
|
||||||
background: $primary-color;
|
position: relative;
|
||||||
border-radius: 7px;
|
font-size: 16px;
|
||||||
flex: none;
|
font-weight: 500;
|
||||||
order: 0;
|
margin-left: 18px;
|
||||||
flex-grow: 0;
|
&::before {
|
||||||
padding: 3px;
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: -13px;
|
||||||
|
width: 4px;
|
||||||
|
height: 14px;
|
||||||
|
content: '';
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
// span:first-child {
|
||||||
|
// background: $primary-color;
|
||||||
|
// border-radius: 7px;
|
||||||
|
// flex: none;
|
||||||
|
// order: 0;
|
||||||
|
// flex-grow: 0;
|
||||||
|
// padding: 3px;
|
||||||
|
// }
|
||||||
|
|
||||||
span:nth-child(2) {
|
// span:nth-child(2) {
|
||||||
font-size: 18px;
|
// font-size: 18px;
|
||||||
font-weight: 700;
|
// font-weight: 700;
|
||||||
margin-left: 10px;
|
// margin-left: 10px;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
div:nth-child(2) {
|
div:nth-child(2) {
|
||||||
|
@ -201,7 +201,7 @@ export default {
|
|||||||
logs: '面板日志',
|
logs: '面板日志',
|
||||||
},
|
},
|
||||||
home: {
|
home: {
|
||||||
overview: '概 览',
|
overview: '概览',
|
||||||
appInstalled: '已安装应用',
|
appInstalled: '已安装应用',
|
||||||
systemInfo: '系统信息',
|
systemInfo: '系统信息',
|
||||||
hostname: '主机名称',
|
hostname: '主机名称',
|
||||||
|
@ -5,7 +5,6 @@ import App from './App.vue';
|
|||||||
|
|
||||||
import '@/styles/index.scss';
|
import '@/styles/index.scss';
|
||||||
// import '@/styles/reset.scss';
|
// import '@/styles/reset.scss';
|
||||||
import '@/styles/common-dark.scss';
|
|
||||||
import '@/styles/common.scss';
|
import '@/styles/common.scss';
|
||||||
import '@/assets/fonts/font.scss';
|
import '@/assets/fonts/font.scss';
|
||||||
import '@/assets/iconfont/iconfont.css';
|
import '@/assets/iconfont/iconfont.css';
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
html {
|
html {
|
||||||
|
--el-box-shadow-light: 0px 0px 4px rgba(0, 94, 235, 0.1) !important;
|
||||||
// * menu
|
// * menu
|
||||||
--el-menu-bg-color: rgba(0, 94, 235, 0.1) !important;
|
--el-menu-bg-color: rgba(0, 94, 235, 0.1) !important;
|
||||||
--el-menu-item-bg-color: rgba(255, 255, 255, 0.3);
|
--el-menu-item-bg-color: rgba(255, 255, 255, 0.3);
|
||||||
@ -179,4 +180,12 @@ html {
|
|||||||
|
|
||||||
.el-avatar {
|
.el-avatar {
|
||||||
--el-avatar-bg-color: #ffffff !important;
|
--el-avatar-bg-color: #ffffff !important;
|
||||||
|
border: 0.5px solid #eaeaea;
|
||||||
|
box-shadow: 0px 0px 2px 1px rgba(186, 186, 186, 0.22);
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
@use 'fit2cloud-ui-plus/src/styles/index.scss' as *;
|
@use 'fit2cloud-ui-plus/src/styles/index.scss' as *;
|
||||||
@use './element-dark.scss';
|
|
||||||
@use './element.scss';
|
@use './element.scss';
|
||||||
@use './reset.scss';
|
@use './reset.scss';
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="5">
|
<el-col :span="5">
|
||||||
<div>
|
<div>
|
||||||
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
|
<el-avatar shape="square" :size="55" :src="'data:image/png;base64,' + app.icon" />
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="15">
|
<el-col :span="15">
|
||||||
@ -33,7 +33,6 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div class="h-app-divider"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
@ -101,18 +100,18 @@ defineExpose({
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.h-app-card {
|
.h-app-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 15px;
|
padding: 10px 15px;
|
||||||
|
|
||||||
.h-app-content {
|
.h-app-content {
|
||||||
.h-app-title {
|
.h-app-title {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-app-desc {
|
.h-app-desc {
|
||||||
span {
|
span {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: #646a73;
|
color: #646a73;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -126,7 +125,7 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.h-app-divider {
|
.h-app-divider {
|
||||||
margin-top: 5px;
|
margin-top: 13px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: var(--panel-border);
|
border-top: var(--panel-border);
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
/>
|
/>
|
||||||
<el-row :gutter="20" style="margin-top: 20px">
|
<el-row :gutter="20" style="margin-top: 20px">
|
||||||
<el-col :span="16">
|
<el-col :span="16">
|
||||||
<CardWithHeader :header="$t('home.overview')" height="180px">
|
<CardWithHeader :header="$t('home.overview')" height="146px">
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="h-overview">
|
<div class="h-overview">
|
||||||
<el-row>
|
<el-row>
|
||||||
@ -46,7 +46,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</CardWithHeader>
|
</CardWithHeader>
|
||||||
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="285px">
|
<CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="275px">
|
||||||
<template #body>
|
<template #body>
|
||||||
<Status ref="statuRef" />
|
<Status ref="statuRef" />
|
||||||
</template>
|
</template>
|
||||||
@ -117,7 +117,7 @@
|
|||||||
</CardWithHeader>
|
</CardWithHeader>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<CardWithHeader :header="$t('home.systemInfo')" height="350px">
|
<CardWithHeader :header="$t('home.systemInfo')" height="306px">
|
||||||
<template #body>
|
<template #body>
|
||||||
<el-descriptions :column="1" class="h-systemInfo">
|
<el-descriptions :column="1" class="h-systemInfo">
|
||||||
<el-descriptions-item class-name="system-content">
|
<el-descriptions-item class-name="system-content">
|
||||||
@ -583,14 +583,14 @@ onBeforeUnmount(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
span:first-child {
|
span:first-child {
|
||||||
font-size: 18px;
|
font-size: 14px;
|
||||||
color: #646a73;
|
color: #646a73;
|
||||||
}
|
}
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
span {
|
span {
|
||||||
font-size: 28px;
|
font-size: 25px;
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
@ -605,12 +605,12 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
.system-label {
|
.system-label {
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
font-size: 16px !important;
|
font-size: 14px !important;
|
||||||
color: #1f2329;
|
color: #1f2329;
|
||||||
}
|
}
|
||||||
|
|
||||||
.system-content {
|
.system-content {
|
||||||
font-size: 15px !important;
|
font-size: 13px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-tags {
|
.monitor-tags {
|
||||||
|
@ -183,22 +183,22 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
|
|||||||
text: Data + '%',
|
text: Data + '%',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#0f0f0f',
|
color: '#0f0f0f',
|
||||||
lineHeight: 30,
|
lineHeight: 25,
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
fontWeight: '400',
|
fontWeight: '400',
|
||||||
},
|
},
|
||||||
left: '50%',
|
left: '49%',
|
||||||
top: '32%',
|
top: '32%',
|
||||||
subtext: Title,
|
subtext: Title,
|
||||||
subtextStyle: {
|
subtextStyle: {
|
||||||
color: '#000000',
|
color: '#646A73',
|
||||||
fontSize: 14,
|
fontSize: 13,
|
||||||
},
|
},
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
polar: {
|
polar: {
|
||||||
radius: ['72%', '92%'],
|
radius: ['71%', '82%'],
|
||||||
center: ['50%', '50%'],
|
center: ['50%', '50%'],
|
||||||
},
|
},
|
||||||
angleAxis: {
|
angleAxis: {
|
||||||
@ -245,7 +245,7 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['0%', '55%'],
|
radius: ['0%', '61%'],
|
||||||
center: ['50%', '50%'],
|
center: ['50%', '50%'],
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -256,7 +256,7 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
|
|||||||
value: 0,
|
value: 0,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
shadowColor: '#e3e3e3',
|
shadowColor: '#e3e3e3',
|
||||||
shadowBlur: 20,
|
shadowBlur: 5,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
Loading…
x
Reference in New Issue
Block a user