<script setup lang='ts'>
const router = useRouter();
function routerPush(path: string) {
  router.push(path);
}

</script>

<template>
  <div class="flex items-center divide-x-1 text-hex-707070 text-xl">
    <div
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      首页
    </div>
    <el-popover
      placement="bottom"
      :width="150"
      trigger="hover"
      popper-style="--el-popover-padding:0px"
    >
      <template #reference>
        <div
          class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
        >
          名师
        </div>
      </template>

      <div class="flex flex-col">
        <div
          @click="routerPush('/home_mszx')"
          class="px-2 py-3 text-center hover:bg-hex-1259A1 hover:text-white cursor-pointer"
        >
          名师在线
        </div>
        <div
          @click="routerPush('/home_tjkc')"
          class="px-2 py-3 text-center hover:bg-hex-1259A1 hover:text-white cursor-pointer"
        >
          推荐课程
        </div>
        <div
          @click="routerPush('/home_msgzs')"
          class="px-2 py-3 text-center hover:bg-hex-1259A1 hover:text-white cursor-pointer"
        >
          名师工作室
        </div>
      </div>
    </el-popover>

    <div
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      同步课堂
    </div>
    <div
      @click="routerPush('/home_tskc')"
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      特色课程
    </div>
    <div
      @click="routerPush('/home_zbkc')"
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      直播课程
    </div>
    <div
      @click="routerPush('/home_zyfd')"
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      作业辅导
    </div>
    <div
      @click="routerPush('/home_jtjy')"
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      家庭教育
    </div>
    <div
      class="px-4 py-5 hover:text-hex-1259A1 hover:bg-hex-1259A110 cursor-pointer"
    >
      桐艺云校
    </div>
  </div>
</template>
