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