<template>
  <div class="app-wrapper">
    <div class="nav-bar">
      <div class="logo flex-align-center">
        <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">
        <img class="xjjt" src="@/assets/logo/xjjt-logo.png" alt="">
        <span class="logo-text">先进公共服务平台</span>
      </div>

      <div class="menu">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal">
          <el-sub-menu index="1">
            <template #title>计算资源</template>
            <el-sub-menu index="1-1">
              <template #title>天河超级计算机</template>
              <el-menu-item index="1-1-1">天河一代</el-menu-item>
              <el-menu-item index="1-1-2">天河新一代</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="1-2">CPU裸金属服务器</el-menu-item>
            <el-menu-item index="1-3">存储</el-menu-item>
            <el-menu-item index="1-4">云计算资源</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="2">行业应用</el-menu-item>
          <el-menu-item index="3">组件服务</el-menu-item>
          <el-menu-item index="4">合作伙伴</el-menu-item>
        </el-menu>
      </div>

      <div class="right-menu">
        <el-button type="primary">登录/注册</el-button>
      </div>
    </div>
    <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>-->
    <app-main/>
  </div>
</template>

<script setup>
import AppMain from '@/layout/components/AppMain.vue'
// import Breadcrumb from '@/components/Breadcrumb/index.vue'
const activeIndex = ref('1')
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

.nav-bar {
  height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ECECEB;
  background-color: #ffffff;
  padding: 0 80px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;

  .logo {
    .nscc {
      height: 46px;
    }

    img {
      margin-right: 20px;
      height: 50px;
    }

    .logo-text {
      font-family: YouSheBiaoTiHei, system-ui;
      font-weight: 400;
      font-size: 24px;
      color: #2E77E3;
    }
  }


  .menu {
    width: 600px;
    flex: 1;
    margin-left: 72px;
  }

  :deep(.el-menu) {
    border-bottom: none;

    .el-sub-menu, .el-menu-item {
      &.is-active {
        font-weight: bold;
      }
    }

    .el-sub-menu__title, .el-menu-item {
      font-weight: 400;
      font-size: 16px;
      color: #626566;
    }
  }

  .el-button {
    background-color: #2E77E3;
    height: 38px;
    border-radius: 2px;
    font-size: 14px;
  }
}

.app-main {
  padding-top: 64px;
  //height: calc(100vh - 64px);
  //overflow-y: auto;
}
</style>
