[细节调整] 1.拆分主菜单，修改切换逻辑 2.按钮移动效果添加

Jin Lei

2023-11-15 61c3846cd8213fe3a7a5580c653936b4cbf0e3ef

 src/components/right/right-top.vue

@@ -53,8 +53,8 @@
      </div>
    </el-dialog>
    <div class="rightTool">
      <el-button @click="showInput">
        <img class="searchBg" src="@/assets/img/new/leftCircle.png" />
      <el-button class="searchElBg" @click="showInput">
        <div class="searchBg"></div>
        <img
          class="searchBtn"
          v-if="!isShowInput"
@@ -678,16 +678,25 @@
  margin: 1px;
  margin: 20px 0;
}

.searchBtn {
  width: 40px;
.searchElBg{
  background-image: url("~@/assets/img/new/leftCircle.png") !important;
  background-size: 48px 48px !important;
}

.searchBtn {
  margin-top: 3px;
  width: 40px;
  pointer-events: none;
}
.searchElBg:hover{
  background-image: url("~@/assets/img/new/leftCircle-y.png") !important;
  background-size: 48px 48px !important;
}
.searchBg {
  position: absolute;
  left: -4px;
  top: 15px;
  width: 54.5px;
  width: 56px;
  height: 56px;
  z-index: -10;
}
.active {
@@ -698,11 +707,13 @@
  position: absolute;
  right: 26px;
  top: 17px;
  width: 70.6px;
  height: 70.6px;
  width: 71px;
  height: 71px;
  background-image: url("~@/assets/img/new/rightCircle.png");
}

.user:hover {
  background-image: url("~@/assets/img/new/rightCircle-y.png");
}
.user .el-avatar {
  background-color: transparent;
  margin: 3px auto 0;