From 8d3f263508b9f2ee6ebf102beca4e6c447629976 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 07 Jun 2025 13:50:30 +0800
Subject: [PATCH] feat: 头部和菜单照ui图进行调整
---
src/styles/top.scss | 5 -
src/page/index/index.vue | 10 +++
src/page/index/tags.vue | 6 ++
src/styles/theme/white.scss | 5 +
src/page/index/top/top-qna.vue | 17 ++---
src/styles/common.scss | 2
src/page/index/logo.vue | 41 ++++++++++---
src/page/index/top/top-lock.vue | 2
public/img/bg/mainLogo.png | 0
src/assets/images/layoutBg.png | 0
src/page/index/top/index.vue | 23 ++++---
src/page/index/setting.vue | 8 +-
src/page/index/sidebar/index.vue | 22 +++++++
src/page/index/top/top-search.vue | 16 +++++
14 files changed, 113 insertions(+), 44 deletions(-)
diff --git a/public/img/bg/mainLogo.png b/public/img/bg/mainLogo.png
index 0db1ec8..9e4425f 100644
--- a/public/img/bg/mainLogo.png
+++ b/public/img/bg/mainLogo.png
Binary files differ
diff --git a/src/assets/images/layoutBg.png b/src/assets/images/layoutBg.png
new file mode 100644
index 0000000..a582cc7
--- /dev/null
+++ b/src/assets/images/layoutBg.png
Binary files differ
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 2e0d270..c925305 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -10,7 +10,9 @@
<!-- 顶部导航栏 -->
<top ref="top" />
<!-- 顶部标签卡 -->
- <tags />
+ <div class="tags-box">
+ <tags />
+ </div>
<search class="avue-view" v-show="isSearch"></search>
<!-- 主体视图层 -->
<div id="avue-view" v-show="!isSearch" v-if="isRefresh">
@@ -126,4 +128,10 @@
// }
// }
// }
+
+.tags-box{
+ background: transparent;
+ padding: 0 10px;
+ --el-color-primary: rgba(20, 65, 255, 1);
+}
</style>
diff --git a/src/page/index/logo.vue b/src/page/index/logo.vue
index 652c131..456fa78 100644
--- a/src/page/index/logo.vue
+++ b/src/page/index/logo.vue
@@ -2,18 +2,19 @@
<div class="avue-logo">
<transition name="fade">
<span v-if="getScreen(isCollapse)" class="avue-logo_subtitle" key="0">
- {{ website.logo }}
+<!-- {{ website.logo }}-->
+ <img class="logoImg" src="/img/bg/mainLogo.png" alt=""/>
</span>
</transition>
<transition-group name="fade">
<template v-if="getScreen(!isCollapse)">
<div class="fadeStyle">
- <img class="img" src="/img/bg/mainLogo.png" alt="" width="50%" height="50%" />
- <!-- <span style="font-size: 20px;" key="1">
- {{ this.parentDeptInfo.sysName }}
- </span> -->
-</div>
-
+ <img class="logoImg" src="/img/bg/mainLogo.png" alt=""/>
+ <div class="titleName">综合管理平台</div>
+ <!-- <span style="font-size: 20px;" key="1">
+ {{ this.parentDeptInfo.sysName }}
+ </span> -->
+ </div>
</template>
</transition-group>
</div>
@@ -27,8 +28,7 @@
data() {
return {};
},
- created() {
- },
+ created() {},
computed: {
...mapGetters(['isCollapse']),
...mapGetters(['userInfo']),
@@ -38,7 +38,28 @@
};
</script>
<style scoped lang="scss">
+.avue-logo{
+ box-shadow: none;
+}
+.avue-logo_subtitle{
+ .logoImg{
+ width: 80%;
+ }
+}
.fadeStyle {
-display: flex; align-items: left; gap: 5px; margin: 8px 8px 10px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ .logoImg{
+ width: 50px;
+ height: 20px;
+ }
+ .titleName{
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 24px;
+ color: #1C5CFF;
+ }
}
</style>
diff --git a/src/page/index/setting.vue b/src/page/index/setting.vue
index d2d719d..6b2e42d 100644
--- a/src/page/index/setting.vue
+++ b/src/page/index/setting.vue
@@ -8,21 +8,21 @@
></el-button>
<el-drawer append-to-body :with-header="false" v-model="show" size="30%">
<div class="setting">
- <h5>导航模式</h5>
+<!-- <h5>导航模式</h5>
<div class="setting-checkbox">
<el-tooltip class="item" effect="dark" content="侧边菜单布局" placement="top">
<div
@click="setting.sidebar = 'vertical'"
- class="setting-checkbox-item setting-checkbox-item--side"
+ class="setting-checkbox-item setting-checkbox-item--side"
></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="顶部菜单布局" placement="top">
<div
@click="setting.sidebar = 'horizontal'"
- class="setting-checkbox-item setting-checkbox-item--top"
+ class="setting-checkbox-item setting-checkbox-item--top"
></div>
</el-tooltip>
- </div>
+ </div>-->
<h5>页面布局</h5>
<div class="setting-checkbox">
<div class="setting-item" v-for="(item, index) in list1" :key="index">
diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index 557cb99..243229b 100644
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@@ -38,4 +38,24 @@
},
};
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.el-menu{
+ :deep(){
+ .el-menu-item.is-active{
+ background: linear-gradient( 90deg, rgba(179,194,255,0.02) 0%, rgba(20,65,255,0.09) 100%) !important;
+ border-radius: 16px 16px 16px 16px;
+ i,span{
+ color: rgba(20, 65, 255, 1) !important;
+ }
+ }
+ .el-sub-menu i{
+ font-size: 16px;
+ }
+ .el-menu-item i{
+ font-size: 16px;
+ }
+
+ }
+}
+
+</style>
diff --git a/src/page/index/tags.vue b/src/page/index/tags.vue
index 1fa540c..53c1aa3 100644
--- a/src/page/index/tags.vue
+++ b/src/page/index/tags.vue
@@ -166,3 +166,9 @@
},
}
</script>
+
+<style lang="scss" scoped>
+.avue-tags{
+ border-radius: 4px;
+}
+</style>
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index b7dd5a9..38e201b 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -7,18 +7,14 @@
</div>
</div>
<div class="top-bar__title">
- <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
+<!-- <top-menu ref="topMenu" v-if="setting.menu"></top-menu>-->
<top-search class="top-bar__item" v-if="setting.search"></top-search>
</div>
<div class="top-bar__right">
- <div v-if="setting.lock" class="top-bar__item">
- <top-lock></top-lock>
- </div>
- <div class="top-bar__item">
- <top-qna></top-qna>
- </div>
- <div class="top-bar__item" v-if="setting.fullscreen">
- <top-full></top-full>
+ <div class="icon-box">
+ <top-lock v-if="setting.lock"/>
+ <top-qna title="帮助中心"/>
+ <top-full v-if="setting.fullscreen" title="全屏"/>
</div>
<div class="top-user">
<img class="top-bar__img" :src="userInfo.avatar " />
@@ -139,6 +135,15 @@
display: flex !important;
align-items: center;
height: 100%;
+
+ .icon-box{
+ display: flex;
+ align-items: center;
+ gap: 0 20px;
+ >*{
+ cursor: pointer;
+ }
+ }
}
.top-bar__item {
diff --git a/src/page/index/top/top-lock.vue b/src/page/index/top/top-lock.vue
index cd70b5c..fa6d7a1 100644
--- a/src/page/index/top/top-lock.vue
+++ b/src/page/index/top/top-lock.vue
@@ -1,6 +1,6 @@
<template>
<span v-if="text" @click="handleLock">{{ text }}</span>
- <i v-else class="icon-suoping" @click="handleLock"></i>
+ <i v-else class="icon-suoping" @click="handleLock" title="锁屏"></i>
<el-dialog title="设置锁屏密码" v-model="box" width="30%" append-to-body>
<el-form :model="form" ref="form" label-width="80px">
<el-form-item
diff --git a/src/page/index/top/top-qna.vue b/src/page/index/top/top-qna.vue
index 01d3209..89435d5 100644
--- a/src/page/index/top/top-qna.vue
+++ b/src/page/index/top/top-qna.vue
@@ -65,16 +65,11 @@
<style lang="scss" scoped>
.top-qna {
- display: inline-block !important;
- padding: 5px;
-
- .help-icon {
- font-size: 20px !important;
- cursor: pointer;
- color: #FFFFFF; /* 白色 */
- display: inline-block !important;
- line-height: 1 !important;
- }
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ justify-content: center;
+ cursor: pointer;
}
/* 优化弹出框样式 */
@@ -128,4 +123,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/page/index/top/top-search.vue b/src/page/index/top/top-search.vue
index a3da15d..cd62011 100644
--- a/src/page/index/top/top-search.vue
+++ b/src/page/index/top/top-search.vue
@@ -1,6 +1,6 @@
<template>
<el-autocomplete
- class="top-search"
+ class="top-search ztzf-top-search"
popper-class="my-autocomplete"
v-model="value"
:fetch-suggestions="querySearch"
@@ -86,7 +86,21 @@
};
</script>
+
<style lang="scss">
+.ztzf-top-search{
+ display: flex !important;
+ width: 150px;
+ align-items: center;
+ .el-input__inner{
+ background: #ffffff !important;
+ border-radius: 80px 80px 80px 80px;
+ padding: 0 20px;
+ &::placeholder {
+ color:rgba(172, 172, 172, 1) !important;
+ }
+ }
+}
.my-autocomplete {
li {
line-height: normal !important;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index dcbf1b2..488a42d 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -22,6 +22,7 @@
display: flex;
height: 1080px;
width: 1920px;
+ background: url("@/assets/images/layoutBg.png") no-repeat center / 100% 100%;
overflow: hidden;
&--horizontal {
@@ -75,7 +76,6 @@
box-sizing: border-box;
overflow: hidden;
// background: #f0f2f5;
- background: linear-gradient( 180deg, #EEF3FE 0%, #F8F9FB 100%);
}
#avue-view {
diff --git a/src/styles/theme/white.scss b/src/styles/theme/white.scss
index 76f8c05..5799dcc 100644
--- a/src/styles/theme/white.scss
+++ b/src/styles/theme/white.scss
@@ -36,7 +36,7 @@
.avue-top,
.avue-logo,
.tags-container {
- background-color: #409EFF;
+ background-color: transparent;
}
.avue-sidebar--tip {
@@ -58,7 +58,8 @@
color: #fff;
i {
- color: #fff;
+ cursor: pointer;
+ color: rgba(20, 65, 255, 1);
}
}
diff --git a/src/styles/top.scss b/src/styles/top.scss
index 5481f33..e15e00c 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -44,9 +44,9 @@
.top-search {
line-height: $top_height;
position: absolute !important;
- right: 200px;
+ right: 300px;
top: 0;
- width: 300px;
+ width: 250px;
.el-input__wrapper {
font-size: 13px;
@@ -71,7 +71,6 @@
.top-bar__right {
height: $top_height;
position: absolute;
- margin-top: 2px;
top: 0;
i {
--
Gitblit v1.9.3