feat: 头部和菜单照ui图进行调整

罗广辉

2025-06-07 8d3f263508b9f2ee6ebf102beca4e6c447629976

feat: 头部和菜单照ui图进行调整

 public/img/bg/mainLogo.png

 src/assets/images/layoutBg.png

 src/page/index/index.vue

@@ -10,7 +10,9 @@
        <!-- 顶部导航栏 -->
        <top ref="top" />
        <!-- 顶部标签卡 -->
        <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>

 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%" />
          <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>

 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&#45;&#45;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&#45;&#45;top"
          ></div>
        </el-tooltip>
      </div>
      </div>-->
      <h5>页面布局</h5>
      <div class="setting-checkbox">
        <div class="setting-item" v-for="(item, index) in list1" :key="index">

 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>

 src/page/index/tags.vue

@@ -166,3 +166,9 @@
  },
}
</script>

<style lang="scss" scoped>
.avue-tags{
  border-radius: 4px;
}
</style>

 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 {

 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

 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;
  display: flex;
  align-items: center;
  font-size: 18px;
  justify-content: center;
    cursor: pointer;
    color: #FFFFFF; /* 白色 */
    display: inline-block !important;
    line-height: 1 !important;
  }
}

/* 优化弹出框样式 */

 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;

 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 {

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


 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 {