cocorobo/components/AppHeader.vue

<script setup>
import("../assets/css/header.scss")
import { ref, onMounted } from "vue";
import serverConfig from '../serverConfig'
import Logo from "../assets/img/logo.png"
const userInfo = useUserInfoStore()
const router = useRouter()
// const language: any = useAppConfig().language
// console.log(language)
const activeNum = ref(0)
onMounted(() => {
  // console.log("location", user)
  let path = location.pathname
  getActiveNum(path)
})
const getActiveNum = (path) => {
  if (path === '/' || path === '/cocopi' || path === '/download' || path === '/platform') {
    activeNum.value = 0
  } else if (path === '/eduCourse') {
    activeNum.value = 1
  } else if (path === '/teacherTrain' || path === '/solutions' || path === '/teacherTrain') {
    activeNum.value = 2
  } else if (path === '/joinEvent') {
    activeNum.value = 3
  } else if (path === '/about') {
    activeNum.value = 4
  } else if (path === '/login' || path === '/persion') {
    activeNum.value = 5
  } else {
    activeNum.value = 6
  }

}

const logout = () => {
  useFetch(serverConfig.server+"/api/logout", {
    method: 'GET',
    credentials: 'include',
    mode: 'cors'
  }).then(res => {
    if (res.data.value == 'logout') {
      router.push('/')
      activeNum.value = 0
      userInfo.value = {
        username: '',
        alias: "User",
        userid: "",
        isLoading: false,
        googleId: "",
        login: false
      }
    }

  })
}
</script>
<template>
  <header>
    <div class="app-header">
      <div class="app-header-left">
        <nuxt-link to="/"><img class="logo" :src="Logo" alt="Logo" style="margin-top: 30px;" /></nuxt-link>
      </div>
      <div class="app-header-right">
        <ul>
          <li :class="activeNum === 0 ? 'active' : ''">
            <nuxt-link to="/" class="active-a" @click="activeNum = 0">产品</nuxt-link>
            <div class="dropdown" style="width: 80px;left: -10px;">
              <div>
                <nuxt-link to="/cocopi">产品介绍</nuxt-link>
              </div>
              <div>
                <nuxt-link to="/platform">配套工具</nuxt-link>
              </div>
              <div>
                <nuxt-link to="/download">下载中心</nuxt-link>
              </div>
            </div>
          </li>
          <li>
            <a href="//edu.cocorobo.cn" class="active-a" target="_blank" @click="activeNum = 6">课程</a>
          </li>
          <li >
            <a href="//cloud.cocorobo.cn" class="active-a" target="_blank" @click="activeNum = 6">可可智慧教育平台</a>
          </li>
          <li :class="activeNum === 2 ? 'active' : ''">
            <nuxt-link to="/solutions" class="active-a" @click="activeNum = 2">服务</nuxt-link>
            <div class="dropdown" style="width: 100px;left: -20px;">
              <div>
                <nuxt-link to="/solutions">整体解决方案</nuxt-link>
              </div>
              <div>
                <nuxt-link to="/teacherTrain">教师培训</nuxt-link>
              </div>
            </div>
          </li>
          <li :class="activeNum === 3 ? 'active' : ''">
            <nuxt-link to="/joinEvent" class="active-a" @click="activeNum = 3">活动</nuxt-link>
          </li>
          <li :class="activeNum === 4 ? 'active' : ''">
            <nuxt-link to="/about" class="active-a" @click="activeNum = 4">关于我们</nuxt-link>
          </li>
          <li :class="activeNum === 5 ? 'active' : ''">
            <nuxt-link :to="userInfo.username != ''?'/persion':'/login'" class="active-a" @click="activeNum = 5">{{ userInfo.username != "" ? userInfo.alias :
              "登录"
              }}</nuxt-link>
            <div v-if="userInfo.username != ''" class="dropdown" style="min-width: 90px;left: -10px;">
              <div>
                <nuxt-link to="/persion">编辑资料</nuxt-link>
              </div>
              <div>
                <span @click="logout()">注销</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<style lang="scss">
.app-header {
  .app-header-right {
    ul {
      .active {
        .active-a {
          border-bottom: 2px solid #3681FC;
        }
      }

      li {
        position: relative;
        // width: 80px;
        padding: 0 18px;
        text-align: center;

        a {
          text-decoration: none;
          padding: 8px 0;
          color: #000000;
        }

        .dropdown {
          display: none;
          line-height: initial;
          width: 100%;
          position: absolute;
          top: 60px;
          background-color: #fff;
          z-index: 1;
          border-radius: 6px;
          border: 1px solid #E7E7E7;
          animation: frame 0.3s linear;
          animation-name: slidein;
        }
      }

      li:hover {
        .active-a:hover{
          color: #555;
        }
        .dropdown {
          display: block;
          padding: 8px;


          a {
            display: inline-block;
            font-size: 12px;
            padding: 5px;
          }

          span {
            display: inline-block;
            font-size: 12px;
            padding: 5px;
            cursor: pointer;
          }

          span:hover {
            background-color: #F3F7FD;
          }

          .active-a {
            color: #555 !important;
          }

          a:hover {
            background-color: #F3F7FD;
            color: #555;
          }
        }
      }
    }
  }
}

@keyframes slidein {
  from {
    top: 100%;
  }

  to {
    top: 60px;
  }
}
</style>