gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-17 03:04:46 +08:00
Code

feat: 修改概况部分样式

Browse Source
This commit is contained in:
wangdan 2023-02-16 19:04:39 +08:00 committed by wangdan-fit2cloud
parent 65feaa20bf
commit 0912a87874
10 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/app-layout/footer/index.vue
View File

@ -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;

41
frontend/src/components/card-with-header/index.vue
View File

@ -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) {

2
frontend/src/lang/modules/zh.ts
View File

@ -201,7 +201,7 @@ export default {
logs: '面板日志', logs: '面板日志',
}, },
home: { home: {
overview: '概 览', overview: '概览',
appInstalled: '已安装应用', appInstalled: '已安装应用',
systemInfo: '系统信息', systemInfo: '系统信息',
hostname: '主机名称', hostname: '主机名称',

1
frontend/src/main.ts
View File

@ -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';

0
frontend/src/styles/common-dark.scss
View File

9
frontend/src/styles/element.scss
View File

@ -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
frontend/src/styles/index.scss
View File

@ -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';

11
frontend/src/views/home/app/index.vue
View File

@ -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);
} }

14
frontend/src/views/home/index.vue
View File

@ -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 {

14
frontend/src/views/home/status/index.vue
View File

@ -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,
}, },
}, },
], ],