gjjd-web/components/AppHeader.vue

<template>
  <header class="header">
    <div class="container between">
      <div class="header__left">
        <nuxt-link to="/" class="logo">{{ config?.siteName || '网站名称' }}</nuxt-link>
        <nav v-if="route.path.indexOf('/user') === -1" class="hidden-sm-and-down">
          <ul>
            <li
                v-for="item in navigation?.data"
                :key="item.navigationId"
                :class="route.path === item.path ? 'active' : ''"
            >
              <nuxt-link v-if="item.target === '_blank'" :to="item.path" target="_blank">{{ item.title }}</nuxt-link>
              <nuxt-link v-else :to="`${item.path}`">{{ item.title }}</nuxt-link>
            </li>
          </ul>
        </nav>
      </div>
      <div class="header__right items-center">
        <el-input
            class="w-50 m-2 mr-20"
            placeholder="请输入搜索的影视名"
            :suffix-icon="ElIconSearch"
            v-model="searchValue"
            @keyup.enter.native="handleSearch"
        />
        <ClientOnly>
          <template v-if="token">
            <el-dropdown @command="handleCommand">
              <el-button circle :icon="ElIconUserFilled" color="#155FAA"></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="user">个人中心</el-dropdown-item>
                  <el-dropdown-item divided command="logOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button circle :icon="ElIconUserFilled" @click="goLogin"></el-button>
          </template>
        </ClientOnly>
      </div>
    </div>
    <div class="mobile-nav hidden-sm-only hidden-sm-and-up">
      <ul>
        <li><nuxt-link :to="`/c`">1电影</nuxt-link></li>
        <li><nuxt-link :to="`/c`">电视剧</nuxt-link></li>
      </ul>
    </div>
  </header>
  <div class="header__height__placeholder"></div>
</template>

<script setup lang="ts">
import type {Config} from "~/types/config";
import type {ApiResult} from "~/api";
import type {Navigation} from "~/api/cms/navigation/model";

const route = useRoute()

const searchValue = ref<string>('')
const token = ref<string | undefined>(undefined)
// 请求数据
const { data: config } = await useServerRequest<Config>('/cms/website-field/config', {})
const { data: navigation } = useServerRequest<ApiResult<Navigation[]>>('/cms/navigation');

function handleCommand(command: string) {
  switch (command) {
    case 'logOut':
      logOut()
      break;
    default:
      navigateTo('/user')
      break;
  }
}

function logOut() {}

function goLogin() {}

function handleSearch() {
  navigateTo('/search?keyword=' + searchValue.value)
}
</script>


<style lang="scss">
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 55px;
  background-color: #292838;

  &__left {
    display: flex;
    .logo {
      display: flex;
      width: 150px;
      height: 55px;
      line-height: 55px;
      font-size: 24px;
      color: #FF9900;
      font-weight: bold;
      background-position: 50% 50% !important;
      background-size: cover !important;
      overflow: hidden;
    }
    nav {
      ul {
        display: flex;
        li {
          a {
            display: inline-block;
            height: 55px;
            line-height: 55px;
            font-size: 15px;
            padding: 0 20px;
            color: #fff;
          }
          &.active {
            a {
              background-color: #155FAA;
              color: #fff;
            }
          }
        }
      }
    }
  }
  &__height__placeholder {
    height: 55px;
  }
}


@media only screen and (max-width:991px){
  .header {
    position: relative;

    .mobile-nav {
      border-top: #666 solid 1px;
      background: #292838;
      position: absolute;
      height: 46px;
      bottom: -46px;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      box-sizing: border-box;
      padding-top: 8px;
      z-index: 9;
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        white-space: nowrap;
        li {
          display: inline-block;
          position: relative;
          &.active {
            a {
              color: #1583f3;
            }
          }
          a {
            display: inline-block;
            padding: 5px 19px;
            color: #ffffff;
            font-size: 16px;
          }
        }
      }
    }
  }
  .header__height__placeholder {
    height: 46px;
  }
}
</style>