fix(frontend): 替换Logo、增大顶栏侧栏尺寸及全局字号
- 替换顶栏Logo为七牛logo图片(logo-qiniu.png) - 顶栏高度 56→70px,侧栏宽度 226→282px - 顶栏各元素字号增大约25%,头像26→32px,搜索框240→280px - 侧栏导航项字号13→16px,分组标题10.5→13px,徽标10→12px - 全局基础字号 14→16px
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<div class="mark">xi</div>
|
<img src="/logo-qiniu.png" alt="logo" class="mark-img" />
|
||||||
xinfra <span class="sub">统一基础设施平台</span>
|
xinfra <span class="sub">统一基础设施平台</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="env-pill">● 生产环境</span>
|
<span class="env-pill">● 生产环境</span>
|
||||||
@@ -61,27 +61,20 @@ const { theme, toggleTheme } = useTheme()
|
|||||||
gap: 9px;
|
gap: 9px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
font-size: 15px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand .mark {
|
.brand .mark-img {
|
||||||
width: 22px;
|
width: 36px;
|
||||||
height: 22px;
|
height: 36px;
|
||||||
border-radius: 5px;
|
border-radius: 6px;
|
||||||
background: linear-gradient(135deg, var(--accent), #1C8F69);
|
object-fit: contain;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-family: var(--mono);
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--bg-deep);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand .sub {
|
.brand .sub {
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 15px;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -91,7 +84,7 @@ const { theme, toggleTheme } = useTheme()
|
|||||||
|
|
||||||
.env-pill {
|
.env-pill {
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 11px;
|
font-size: 14px;
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
border: 1px solid var(--accent-dim);
|
border: 1px solid var(--accent-dim);
|
||||||
background: var(--accent-dim);
|
background: var(--accent-dim);
|
||||||
@@ -109,14 +102,14 @@ const { theme, toggleTheme } = useTheme()
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
font-size: 12.5px;
|
font-size: 15px;
|
||||||
width: 240px;
|
width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box kbd {
|
.search-box kbd {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
background: var(--bg-panel);
|
background: var(--bg-panel);
|
||||||
padding: 1px 5px;
|
padding: 1px 5px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
@@ -128,27 +121,27 @@ const { theme, toggleTheme } = useTheme()
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
font-size: 12.5px;
|
font-size: 15px;
|
||||||
color: var(--text-mid);
|
color: var(--text-mid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.identity .avatar {
|
.identity .avatar {
|
||||||
width: 26px;
|
width: 32px;
|
||||||
height: 26px;
|
height: 32px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--bg-panel-2);
|
background: var(--bg-panel-2);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 11px;
|
font-size: 14px;
|
||||||
color: var(--text-hi);
|
color: var(--text-hi);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.identity .ldap-tag {
|
.identity .ldap-tag {
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -81,7 +81,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-label {
|
.nav-label {
|
||||||
font-size: 10.5px;
|
font-size: 13px;
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
@@ -94,10 +94,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 8px 10px;
|
padding: 10px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
color: var(--text-mid);
|
color: var(--text-mid);
|
||||||
font-size: 13px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
@@ -108,7 +108,7 @@
|
|||||||
.nav-item .ic {
|
.nav-item .ic {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 16px;
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -126,7 +126,7 @@
|
|||||||
.nav-item .badge {
|
.nav-item .badge {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
background: var(--bg-panel-2);
|
background: var(--bg-panel-2);
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
@@ -144,7 +144,7 @@
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-top: 1px solid var(--line-soft);
|
border-top: 1px solid var(--line-soft);
|
||||||
font-size: 11px;
|
font-size: 14px;
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,8 +15,8 @@ import AppMain from '@/components/Layout/AppMain.vue'
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.shell {
|
.shell {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 226px 1fr;
|
grid-template-columns: 282px 1fr;
|
||||||
grid-template-rows: 56px 1fr;
|
grid-template-rows: 70px 1fr;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ html, body {
|
|||||||
background: var(--bg-deep);
|
background: var(--bg-deep);
|
||||||
color: var(--text-hi);
|
color: var(--text-hi);
|
||||||
font-family: var(--sans);
|
font-family: var(--sans);
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user