ntcri/src/views/Courses/Tutorial.vue

<script setup>
import { ref, reactive } from "vue";
import Navbar from "@/components/Navbar.vue";
import CoursesTutorial from "@/components/CoursesTutorial.vue";

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "我要開課",
    disabled: false,
    href: "/setup-courses",
  },
  {
    title: "開課教學",
    disabled: true,
  },
]);
</script>

<template>
  <Navbar />

  <div class="breadcrumbs-item">
    <v-breadcrumbs :items="breadcrumbs" divider="/"></v-breadcrumbs>
  </div>

  <CoursesTutorial />
</template>

<style lang="scss" scoped>
.breadcrumbs-item {
  padding: 30px 0 30px 16vw;
  @media (max-width: 1800px) {
    padding: 30px 0 30px 5vw;
  }
}
</style>