ntcri/src/views/Courses/SetUp.vue

<script setup>
import { ref, reactive, watch } from "vue";
import { useMainStore } from "@/stores/store";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const store = useMainStore();
let isLogin = store.checkToken();
console.log("isLogin", isLogin);

const modules = [Pagination];
</script>

<template>
  <Navbar />

  <v-container class="my-16 py-16">
    <v-row>
      <v-col cols="12" md="6">
        <div class="options">
          <img src="@/assets/img/setup-courses/素材-01.png" alt="" />
          <router-link to="/setup-courses/tutorial">觀看開課教學</router-link>
        </div>
      </v-col>
      <v-col cols="12" md="6" class="mt-16 mt-md-0">
        <div v-if="!isLogin" class="options">
          <img src="@/assets/img/setup-courses/素材-02.png" alt="" />
          <button @click="store.openLoginDialog()">登入會員開課</button>
        </div>
        <div v-else class="options">
          <img src="@/assets/img/setup-courses/素材-03.png" alt="" />
          <router-link to="/setup-courses/create">開始創建課程</router-link>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss" scoped>
.swiper-slide {
  height: 500px !important;
}
.options {
  display: flex;
  flex-direction: column;
  align-items: center;
  a,
  button {
    display: block;
    padding: 20px 80px;
    font-size: 20px;
    letter-spacing: 2px;
    border: 2px solid var(--purple);
    border-radius: 15px;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 0 8px var(--purple);
    }

    @media (max-width: 600px) {
      font-size: 18px;
    }
  }
  img {
    width: 100%;
    max-width: 500px;
  }
}

// Swiper
.background-image {
  background-image: url("@/assets/img/default.png");
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  z-index: -1;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>