feat: add new brand logos
Desktop Client Build / Resolve Build Metadata (push) Successful in 26s
Frontend CI / Frontend (push) Successful in 3m23s
Backend CI / Backend (push) Successful in 16m58s
Desktop Client Build / Build Desktop Client (push) Successful in 24m56s
Desktop Client Build / Publish Client Artifacts to NAS (push) Successful in 36s
Desktop Client Build / Resolve Build Metadata (push) Successful in 26s
Frontend CI / Frontend (push) Successful in 3m23s
Backend CI / Backend (push) Successful in 16m58s
Desktop Client Build / Build Desktop Client (push) Successful in 24m56s
Desktop Client Build / Publish Client Artifacts to NAS (push) Successful in 36s
- Introduced icon-color.svg featuring a colorful gradient design. - Added icon-with-title.svg that includes a title and multiple gradient elements.
This commit is contained in:
@@ -1,9 +1,23 @@
|
||||
<template>
|
||||
<a-layout style="min-height: 100vh">
|
||||
<a-layout-sider v-model:collapsed="collapsed" collapsible breakpoint="lg" :trigger="null">
|
||||
<div class="ops-brand">
|
||||
<span v-if="!collapsed">省心推 · 运营</span>
|
||||
<span v-else>SXT</span>
|
||||
<div class="ops-brand" aria-label="省心推运营控制台">
|
||||
<img
|
||||
v-if="!collapsed"
|
||||
class="ops-brand__logo ops-brand__logo--full"
|
||||
src="/logos/icon-with-title.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-if="!collapsed" class="ops-brand__badge">运营端</span>
|
||||
<img
|
||||
v-else
|
||||
class="ops-brand__logo ops-brand__logo--icon"
|
||||
src="/logos/icon-color.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span v-if="collapsed" class="ops-brand__badge ops-brand__badge--compact">运</span>
|
||||
</div>
|
||||
<a-menu
|
||||
theme="light"
|
||||
@@ -235,18 +249,65 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.ops-brand {
|
||||
height: 40px;
|
||||
background: #eef2ff;
|
||||
border: 1px solid #c7d2fe;
|
||||
margin: 16px;
|
||||
border-radius: 6px;
|
||||
height: 38px;
|
||||
margin: 14px 12px 18px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
margin 0.2s ease,
|
||||
width 0.2s ease;
|
||||
}
|
||||
|
||||
.ops-brand__logo {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.ops-brand__logo--full {
|
||||
width: 96px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.ops-brand__logo--icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.ops-brand__badge {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid rgba(79, 70, 229, 0.22);
|
||||
border-radius: 999px;
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ops-brand__badge--compact {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
:deep(.ant-layout-sider-collapsed) .ops-brand {
|
||||
width: 58px;
|
||||
margin: 14px auto 18px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.ops-header {
|
||||
|
||||
Reference in New Issue
Block a user