feat: 样式调整

This commit is contained in:
xuziqiang
2024-06-21 15:19:28 +08:00
parent 2ebe536243
commit fea7abd476
32 changed files with 2994 additions and 2793 deletions

View File

@@ -9,11 +9,13 @@
style="width: 192px; height: 48px; object-fit: contain" />
<ns-icon v-else name="headerLogin" class="headerLogin" style="width: auto; height: 48px" />
</div>
<div>
<component v-if="headerSlot" :is="headerSlot.component" v-bind="headerSlot.componentProps" />
</div>
<div class="header-menu">
<a-menu style="width: 100%" mode="horizontal" :selectedKeys="initHeaderKey">
<a-menu
v-if="menuList?.length"
style="width: 100%"
mode="horizontal"
:selectedKeys="initHeaderKey">
<a-menu-item v-for="item in menuList" :key="item.name">
<div @click="tochildren(item)">
<ns-icon :name="item.meta.icon" size="16" /><span>{{ item.meta.title }}</span>
@@ -61,17 +63,17 @@
</template>
</template>
</a-menu>
<div v-else>
<div v-if="configStore.projectName" class="projectTitle">{{ configStore.projectName }}</div>
</div>
</div>
<div class="nsHeader_action">
<div class="projectName action" v-if="showProject">
{{ projectName ? projectName : enterpriseName }}
<div>
<component
v-if="headerSlot"
:is="headerSlot.component"
v-bind="headerSlot.componentProps" />
</div>
<div
class="projectName action"
v-if="['服务管理平台', '报表中心'].includes(configStore.resourceInfo?.application?.label)"
@click="backDoor"
>{{ '返回门户' }}</div
>
<div v-if="bellInfo.isShow" class="bells action" @click="backMessage">
<a-badge :count="messageCount > 99 ? 99 : messageCount">
<ns-icon name="bells" size="32" />
@@ -80,7 +82,7 @@
<a-dropdown :trigger="['hover']">
<div class="userName action">
<!-- <img src="/asset/image/login/adminIcon.png" /> -->
<ns-icon class="headerAdminIcon" name="headerAdminIcon" size="20" />
<!-- <ns-icon class="headerAdminIcon" name="headerAdminIcon" size="20" /> -->
<span
style="
display: block;
@@ -424,11 +426,22 @@
}
}
:deep(.ant-menu-submenu-title) {
color: rgba(255, 255, 255, 0.9);
// color: rgba(255, 255, 255, 0.9);
}
.header-menu {
flex: 1;
.projectTitle {
font-size: 28px;
font-weight: 900;
letter-spacing: 2.33px;
line-height: 40px;
color: @primary-color;
text-align: left;
}
}
:deep(.header-menu .ant-menu-title-content) {
div {
color: rgba(255, 255, 255, 0.9);
// color: rgba(255, 255, 255, 0.9);
.ns-icon {
margin-right: 7px;
transform: translateY(2px);
@@ -436,7 +449,7 @@
}
}
:deep(.ant-menu-submenu-title .ant-menu-title-content) {
color: rgba(255, 255, 255, 0.9);
// color: rgba(255, 255, 255, 0.9);
.ns-icon {
margin-right: 7px;
transform: translateY(2px);
@@ -447,10 +460,13 @@
padding: 0;
position: fixed;
top: 0;
z-index: 5;
z-index: 999;
width: 100%;
background-image: url(/asset/image/header.png);
background-size: 100% 100%;
// background-image: url(/asset/image/header.png);
// background-size: 100% 100%;
box-shadow: @ns-box-shadow;
display: flex;
align-items: center;
}
:deep(.ant-badge-count) {
@@ -504,10 +520,10 @@
}
.nsHeader_action {
color: rgba(255, 255, 255, 0.9);
color: @black;
padding-left: 16px;
padding-right: 16px;
width: 208px;
// width: 208px;
display: flex;
align-items: center;
justify-content: right;