yitisheng-new-web/src/components/Header.vue

<template>
  <nav class="navbar"
       :class="{ 'collapsed': !state.isNavVisible && state.scrolledPastThreshold, 'animatable': state.isNavVisible || !state.isNavVisible }">
    <div class="box">
      <!--导航栏-->
      <div class="nav">
        <ul>
          <li v-for="column in state.columnList" :key="column.id">
            <router-link tag="a" :to="'/'+column.url" :class="{ 'active': $route.path === '/'+column.url }">
              {{ column.name }}
            </router-link>
          </li>
        </ul>
      </div>
      <!--登录菜单项-->
      <div class="menu">
        <ul>
          <li>
            <router-link tag="a" :to="'/register'">注册</router-link>
          </li>
          <li>
            <a @click="openLogin" class="a-button">登录</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <el-dialog
      v-model="state.loginDialogVisible"
      title=" "
      width="30%"
      :closeOnClickModal="false"
  >
  <template #header>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">登录</h3>
      <button @click="closeDialog" class="el-dialog__headerbtn">
        <i class="el-icon-close"></i>
      </button>
    </div>
  </template>
  <!-- 在这里放置登录内容 -->
  <Login/>
  </el-dialog>
</template>


<script setup lang="ts">
import {reactive, onMounted, ref} from "vue";
import {ElMessage} from 'element-plus'
const state = reactive({
  activeIndex: '/index',
  columnList: [] as Array<Object>,
  isNavVisible: ref(true), // 跟踪导航栏的可见性
  prevScrollPos: ref(0), // 跟踪先前的滚动位置
  scrolledPastThreshold: ref(false), // 跟踪是否已滚动超过阈值
  loginDialogVisible:ref(false),
})

// 组件挂载时清空本地token
onMounted(() => {
  let columnList = [{
    "id": 1,
    "name": "首页",
    "parentId": 0,
    "childColumn": [],
    "sort": 100,
    "linkMode": 3,
    "url": "index"
  },
    {
      "id": 2,
      "name": "模拟报志愿",
      "parentId": 0,
      "childColumn": [],
      "sort": 30,
      "linkMode": 3,
      "url": "fillVolunteer"
    },
    {"id": 3, "name": "找大学", "parentId": 0, "childColumn": [], "sort": 75, "linkMode": 3, "url": "school/search"},
    {"id": 4, "name": "查专业", "parentId": 0, "childColumn": [], "sort": 75, "linkMode": 3, "url": "major/search"},
  ];
  state.columnList = columnList
});

// 监听滚动事件
window.addEventListener('scroll', () => {
  const currentScrollPos = window.pageYOffset;
  if (currentScrollPos > 200) {
    state.scrolledPastThreshold = true;
  } else {
    state.scrolledPastThreshold = false;
  }

  if (state.scrolledPastThreshold) {
    if (currentScrollPos > state.prevScrollPos) {
      // 向下滚动，隐藏导航栏
      state.isNavVisible = false;
    } else {
      // 向上滚动，显示导航栏
      state.isNavVisible = true;
    }
  }
  state.prevScrollPos = currentScrollPos;
});

function openLogin(){
  console.log('登录')
  state.loginDialogVisible = true
}
function closeDialog() {
  // 在这里可以处理弹出层关闭时的逻辑
  state.loginDialogVisible = false
}

</script>

<style scoped lang="scss">

.custom-menu {
  border: none;
  border-radius: 0;
}


/*导航栏*/
.navbar {
  position: fixed;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  z-index: 1000; /* 可以根据需要调整 z-index 值 */
  margin: 0;
  padding: 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);
  ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    li {
      margin-right: 20px;
    }
  }

  /*导航栏左侧*/
  .box {
    margin: 0 auto;
    width: 1210px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
  }

  /*导航栏右侧*/
  .menu{
    margin: 0 0 0 auto;
    a{
      color:$color-blue-60;
      background-color: $color-blue-20;
      padding: 8px 15px;
      border-radius: 5px;
    }
  }
}

.navbar a {
  color: #000000;
  text-decoration: none;
}

.navbar a:hover {
  color: $color-blue-60;
  /*text-decoration: underline;*/
}

.navbar a.active {
  font-weight: bold;
  color: $color-blue-60; /* 设置高亮颜色，可以根据需求调整 */
}


/*导航栏折叠动画*/
.navbar {
  transition: transform 0.3s; /* 添加平滑的过渡效果 */
}

.navbar.collapsed {
  transform: translateY(-100%); /* 上滑以隐藏导航栏 */
}

.el-dialog__headerbtn {
  border: none;
  cursor: pointer;
}
</style>