ntcri/src/views/Home.vue

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import Map from "@/components/Map.vue";
import Navbar from "@/components/Navbar.vue";
import TwCities from "@/assets/TwCities.json";
import HomeList from "@/components/HomeList.vue";
import TermsList from "@/components/TermsList.vue";
import CourseCard from "@/components/CourseCard.vue";
import CraftsArticle from "@/components/CraftsArticle.vue";

const store = useMainStore();
const { t } = useI18n();

let loading = ref(true);

onMounted(() => {
  // 無障礙網頁需於 iframe 加上 title
  // let hubspot = document.querySelector("#hubspot-conversations-iframe");
  // if (hubspot) {
  //   hubspot.title = "HubSpot iframe";
  // }
  // console.log("hubspot", hubspot);

  store.getFavoriteClass();

  setTimeout(() => {
    loading.value = false;
    console.log("VITE_API_URL", import.meta.env.VITE_API_URL);
    console.log("apiUrl", store.apiUrl);
  }, 300);
});

// 地圖搜尋
let selectedCounty = ref(null); // 縣市
let selectedDistrict = ref(null); // 區域

// 縣市
let counties = reactive({
  list: [],
});

TwCities.map((e) => counties.list.push(e.name));

// 區域
let district = reactive({
  list: [],
});

// 選擇縣市後顯示對應區域
watch(selectedCounty, (newValue) => {
  district.list = [];
  selectedDistrict.value = null;
  TwCities.map((e) => {
    if (e.name === newValue) {
      e.districts.map((item) => district.list.push(item.name));
    }
  });
});

let schoolKeyword = ref("");
let locationSearchId = reactive({
  list: [],
});

// 搜尋據點
async function searchSchool() {
  pageNum.value = 1;
  schoolState.value = true;
  locationSearchId.list.length = 0;

  let url = `${store.apiUrl}/api/get_school?is_check=1`;
  let location = "";

  if (selectedCounty.value && selectedDistrict.value) {
    location = `${selectedCounty.value}${selectedDistrict.value}`;
  } else if (selectedCounty.value) {
    location = `${selectedCounty.value}`;
  }

  if (schoolKeyword.value !== "" && location !== "") {
    url += `&keyword=${schoolKeyword.value}&location_keyword=${location}`;
  } else if (schoolKeyword.value === "" && location !== "") {
    url += `&location_keyword=${location}`;
  } else if (schoolKeyword.value !== "" && location === "") {
    url += `&keyword=${schoolKeyword.value}`;
  }

  console.log("url", url);

  try {
    const response = await axios.get(url);
    // totalPages.value = store.getTotalPages(response.data.total_num, 4);
    // classes.data = response.data.classes;

    console.log("搜尋地圖", response.data.schools);

    // 存據點 ID
    response.data.schools.map((item) =>
      locationSearchId.list.push(item.location_id)
    );
    console.log("locationSearchId.list", locationSearchId.list);

    // // 儲存地圖經緯度
    store.mapLocation.lat = parseFloat(response.data.schools[0].Lat);
    store.mapLocation.lng = parseFloat(response.data.schools[0].Lng);
  } catch (error) {
    console.error(error);
  }

  getClass();
}

let pageNum = ref(1); // 頁數(預設第一頁)
let pageAmount = ref(4); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數

// 切換分頁
watch(pageNum, () => {
  getClass();
});

let classes = reactive({
  data: [],
});

let assignState = ref(false);
let assignLocationId = ref(null);

let schoolState = ref(false); // 搜尋狀態

async function getClass() {
  console.log("get_class_name");
  let url = `${store.apiUrl}/api/get_class_name?is_check=1&page_num=${pageNum.value}&page_amount=${pageAmount.value}`;

  let assignUrl = `${store.apiUrl}/api/get_class_name?is_check=1&page_num=${pageNum.value}&page_amount=${pageAmount.value}&location_id=${assignLocationId.value}`;

  if (schoolState.value) {
    const list = `[${locationSearchId.list.join(",")}]`;
    url += `&location_id=${list}`;
  }

  console.log("schoolState url", url);

  // if (schoolState.value) {
  //   let location = "";

  //   if (selectedCounty.value && selectedDistrict.value) {
  //     location = `${selectedCounty.value}${selectedDistrict.value}`;
  //     console.log("location &&", location);
  //   } else if (selectedCounty.value) {
  //     location = `${selectedCounty.value}`;
  //     console.log("location >>", location);
  //   }

  //   if (schoolKeyword.value !== "" && location !== "") {
  //     url += `&keyword=${schoolKeyword.value}&location_keyword=${location}`;
  //   } else if (schoolKeyword.value === "" && location !== "") {
  //     url += `&location_keyword=${location}`;
  //   } else if (schoolKeyword.value !== "" && location === "") {
  //     url += `&keyword=${schoolKeyword.value}`;
  //   }

  //   console.log("url", url);
  // }

  try {
    const response = await axios.get(assignState.value ? assignUrl : url);
    totalPages.value = store.getTotalPages(response.data.total_num, 4);
    classes.data = response.data.classes;

    console.log("response", response.data.classes);

    // 儲存地圖經緯度
    store.mapLocation.lat = parseFloat(response.data.classes[0].Lat);
    store.mapLocation.lng = parseFloat(response.data.classes[0].Lng);
  } catch (error) {
    console.error(error);
  }
}

getClass();

// 取得特定據點課程總筆數
const getClassList = async (locationId) => {
  assignState.value = true;
  assignLocationId.value = locationId;

  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?location_id=${locationId}`
    );
    getClass();
    pageNum.value = 1;
    totalPages.value = store.getTotalPages(response.data.classes.length, 4);
  } catch (error) {
    console.log("error", error);
  }
};

let recommend = reactive({
  list: [],
});

// 推薦課程
(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?recommend=1`
    );
    console.log("推薦課程", response);
    recommend.list = response.data.classes;
    console.log(" recommend.list", recommend.list);
  } catch (error) {
    console.error(error);
  }
})();

let panel = ref([]);

const tagList = reactive([
  {
    title: "crafts.title_1",
    url: "/crafts#articleList",
  },
  {
    title: "crafts.title_2",
    url: "/crafts#readList",
  },
  {
    title: "crafts.title_3",
    url: "/crafts#bookList",
  },
  {
    title: "crafts.title_4",
    url: "/crafts#journal",
  },
  {
    title: "crafts.title_5",
    url: "/crafts#thesisGrant",
  },
]);

let news = reactive({
  list: [],
});

// 重要訊息
async function getNews() {
  // 取得最新兩篇
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_news?page_num=1&page_amount=2`
    );
    news.list = response.data.news;
    console.log("重要訊息(新聞)", news.list);
  } catch (error) {
    console.error(error);
  }
}

getNews();

let exhibit = reactive({
  list: [],
});

// 展覽(課程)
async function getExhibit() {
  // 取得最新兩篇
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?category=展覽&page_num=1&page_amount=2`
    );
    exhibit.list = response.data.classes;
    console.log("重要訊息(展覽)", exhibit.list);
  } catch (error) {
    console.error(error);
  }
}

let assignTag = ref("news");

function selectTag(btn) {
  if (btn === "news") {
    assignTag.value = "news";
  } else {
    assignTag.value = "exhibit";
    getExhibit();
  }
}

// 工藝地圖手機版列表(底部彈出視窗)
const isBottomSheetOpen = ref(false);

// 開啟底部彈出視窗
function handleTouch() {
  console.log("handleTouch");
  isBottomSheetOpen.value = !isBottomSheetOpen.value;
}

onMounted(() => {
  if (store.isMobile) {
    window.addEventListener("scroll", () => {
      let scrollHeight = document.documentElement.scrollTop;
      let bottomSheet = document.querySelector(".bottom-sheet");
      let mapBlock = document.querySelector(".map-block"); // 全台工藝地圖
      let recommendBlock = document.querySelector(".recommend-block"); // 工藝課程推薦

      // 取得位置
      let mapPosition = mapBlock.offsetTop;
      let recommendPosition = recommendBlock.offsetTop;

      // 判斷是否滾動到工藝地圖區塊
      if (
        scrollHeight >= mapPosition - 300 &&
        scrollHeight <= recommendPosition - 300
      ) {
        bottomSheet.style.display = "flex";
      } else {
        bottomSheet.style.display = "none";
      }
    });
  }
});

let closeBanner = ref(false);
</script>

<template>
  <Transition>
    <div class="loading-item" v-if="loading">
      <v-progress-circular
        color="grey-lighten-4"
        indeterminate
      ></v-progress-circular>
    </div>
  </Transition>

  <div class="banner" :class="{ close: closeBanner }">
    <img
      src="@/assets/img/home/banner.webp"
      alt="臺灣工藝學習平台"
      class="cover"
    />
    <img
      src="@/assets/img/home/logo-center.png"
      alt="臺灣工藝學習平台"
      class="logo"
    />
  </div>

  <button
    @click="closeBanner = true"
    class="close-btn"
    :class="{ close: closeBanner }"
  >
    <v-icon icon="mdi-close"></v-icon>
  </button>
  <Navbar />
  <v-container class="px-md-0 pb-16 mb-16">
    <section class="text-center intro">
      <h2 class="title">{{ t("home.title_1") }}</h2>
      <p class="my-10">
        {{ t("home.content") }}
      </p>
      <!-- <p class="my-10">
        以佈局具國際視野之工藝學習共享平台為目標，藉由「工藝學校」的主體概念，推動臺灣工藝學習平台，以共享、友善、全人、全民的終身工藝手作平台進行人才、課程、知識、教材之工藝資源嫁接媒合與內容設計，以在地、就近、線上、線下等多元方式提供不同型態之學習體驗內容及選擇。
      </p>
      <p>
        With the goal of laying out a craft learning and sharing platform with
        an international perspective, through the main concept of "craft
        school", we promote the global learning platform of International Craft
        Learning Platform co-ops, and use a lifelong craft platform run on the
        values of sharing, friendliness, and holisticness to design and
        integrate craft resources such as talents, courses, knowledge and
        teaching materials, and provide different types of learning experiences
        in local ways, both online and offline.
      </p> -->
    </section>

    <v-carousel
      cycle
      height="auto"
      hide-delimiters
      hide-delimiter-background
      show-arrows="hover"
    >
      <v-carousel-item>
        <div class="d-flex h-100 align-center">
          <img
            src="@/assets/img/home/carousel-01.jpg"
            alt="臺灣工藝學習平台"
            class="w-100"
          />
        </div>
      </v-carousel-item>
    </v-carousel>

    <div class="news-content">
      <div class="d-flex tab-btn mb-16">
        <v-btn
          variant="text"
          @click="selectTag('news')"
          :class="{ active: assignTag === 'news' }"
        >
          {{ t("news") }}
        </v-btn>
        <v-btn
          variant="text"
          @click="selectTag('exhibit')"
          :class="{ active: assignTag === 'exhibit' }"
        >
          {{ t("exhibitions") }}
        </v-btn>
      </div>
      <div class="d-flex justify-end mb-5 mb-sm-0">
        <router-link to="/news">{{ t("more_news") }} >></router-link>
      </div>
      <ul v-if="assignTag === 'news'">
        <li v-for="(item, index) in news.list" :key="index" class="mb-16 list">
          <HomeList :data="item" />
          <!-- <section class="d-flex">
            <p class="category mb-5">
              <span></span>
              {{ item.category }}
            </p>
            <p class="ms-5">
              {{ moment(`${item.create_time}`).format("YYYY-MM-DD") }}
            </p>
          </section>
          <v-card
            variant="outlined"
            class="d-flex flex-md-row flex-column align-center pa-5"
          >
            <v-row class="align-center">
              <v-col cols="12">
                <router-link :to="`/news/${item.news_id}`" class="cover-img">
                  <section class="d-flex flex-column pa-3">
                    <h3>{{ item.title }}</h3>
                    <p v-html="item.content"></p>
                  </section>
                </router-link>
              </v-col>
            </v-row>
          </v-card> -->
        </li>
      </ul>

      <ul v-else>
        <li
          v-for="(item, index) in exhibit.list"
          :key="index"
          class="mb-16 list"
        >
          <HomeList :data="item" />
        </li>
      </ul>
    </div>

    <h2 class="my-10 title">{{ t("home.title_2") }}</h2>
    <v-row>
      <v-col cols="6" md="4">
        <router-link to="/college-group/future" class="img-info">
          <img
            src="@/assets/img/home/首頁元素-12.webp"
            alt="臺灣工藝學習平台"
          />
          <section>
            <p>{{ t("college_group_1") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/craft" class="img-info">
          <img
            src="@/assets/img/home/首頁元素-11.webp"
            alt="臺灣工藝學習平台"
          />
          <section>
            <p>{{ t("college_group_2") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/cross" class="img-info">
          <img
            src="@/assets/img/home/首頁元素-06.webp"
            alt="臺灣工藝學習平台"
          />
          <section>
            <p>{{ t("college_group_3") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/online" class="img-info">
          <img
            src="@/assets/img/home/首頁元素-09.webp"
            alt="臺灣工藝學習平台"
          />
          <section>
            <p>{{ t("college_group_4") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/craft-for-all" class="img-info">
          <img
            src="@/assets/img/home/臺灣綠工藝希望工程.png"
            alt="臺灣工藝學習平台"
          />
          <section>
            <p>{{ t("college_group_5") }}</p>
          </section>
        </router-link>
      </v-col>
      <v-col cols="6" md="4">
        <router-link to="/college-group/life" class="img-info">
          <img
            src="@/assets/img/home/首頁元素-07.webp"
            alt="臺灣工藝學習平台"
          />
          <section>
            <p>{{ t("college_group_6") }}</p>
          </section>
        </router-link>
      </v-col>
    </v-row>

    <div class="map-block">
      <h3 class="mb-10 title">{{ t("home.title_3") }}</h3>

      <v-row class="justify-center align-center mb-3">
        <v-col cols="6" sm="3" md="2">
          <v-select
            v-model="selectedCounty"
            :label="t('cities')"
            :items="counties.list"
            density="compact"
            variant="outlined"
            hide-details
            clearable
          ></v-select>
        </v-col>
        <v-col cols="6" sm="3" md="2">
          <v-select
            v-model="selectedDistrict"
            :label="t('districts')"
            :items="district.list"
            density="compact"
            variant="outlined"
            hide-details
            clearable
          ></v-select>
        </v-col>

        <v-col cols="8" sm="4" md="5" lg="3">
          <v-text-field
            v-model="schoolKeyword"
            variant="outlined"
            density="compact"
            :placeholder="t('location_keywords')"
            hide-details
          ></v-text-field>
        </v-col>

        <v-col cols="4" sm="2" lg="2">
          <v-btn
            @click="searchSchool()"
            variant="flat"
            append-icon="mdi-magnify"
            color="purple"
          >
            {{ t("search") }}
          </v-btn>
        </v-col>
      </v-row>

      <div class="v-row">
        <v-col md="8" cols="12">
          <div class="map">
            <Map @locationId="getClassList" />
          </div>
        </v-col>
        <v-col md="4" cols="12" :class="{ 'd-none': store.isMobile }">
          <p v-if="!classes.data.length" class="text-center text-gray">
            未找到符合條件的結果
          </p>
          <v-list v-else lines="three" class="list pa-0">
            <v-list-item v-for="item in classes.data" :key="item.id">
              <div class="d-flex align-center">
                <router-link
                  :to="`/course-detail/${item.class_name_id}`"
                  class="link"
                >
                  <v-img
                    :lazy-src="store.getImageSrc(item)"
                    cover
                    :src="store.getImageSrc(item)"
                    alt="臺灣工藝學習平台"
                  >
                    <template v-slot:placeholder>
                      <div
                        class="d-flex align-center justify-center fill-height"
                      >
                        <v-progress-circular
                          color="grey-lighten-4"
                          indeterminate
                        ></v-progress-circular>
                      </div>
                    </template>
                  </v-img>
                </router-link>
                <section>
                  <h2>{{ item.name }}</h2>
                  <div class="d-flex align-start">
                    <v-icon
                      color="primary"
                      icon="mdi-domain"
                      class="me-2"
                    ></v-icon>
                    <p>
                      {{
                        item.group_id === 9
                          ? item.location_name
                          : item.organizer
                      }}
                    </p>
                  </div>
                  <div class="d-flex align-start">
                    <v-icon
                      color="primary"
                      icon="mdi-map-marker"
                      class="me-2 pt-1"
                    ></v-icon>
                    <p>{{ item.address }}</p>
                  </div>
                </section>
              </div>
            </v-list-item>
          </v-list>
          <v-pagination
            v-if="classes.data.length"
            v-model="pageNum"
            :length="totalPages"
            class="my-4"
            rounded="circle"
          ></v-pagination>
        </v-col>
      </div>

      <!-- 手機版底部視窗 -->
      <div class="bottom-sheet" :class="{ show: isBottomSheetOpen }">
        <div class="content">
          <div @touchstart.prevent="handleTouch" class="btn">
            <span></span>
          </div>

          <div class="list">
            <v-list lines="three" class="list pa-0">
              <v-list-item v-for="item in classes.data" :key="item.id">
                <div class="d-flex align-center">
                  <router-link
                    :to="`/course-detail/${item.class_name_id}`"
                    class="link"
                  >
                    <v-img
                      :lazy-src="
                        item.is_inner === 0
                          ? item.cover_img
                          : item.special_class_list_name === 'one_day_class'
                          ? store.getImageUrl('default.webp')
                          : `${store.imgUrl}/${item.cover_img}`
                      "
                      cover
                      :src="
                        item.is_inner === 0
                          ? item.cover_img
                          : item.special_class_list_name === 'one_day_class'
                          ? store.getImageUrl('default.webp')
                          : `${store.imgUrl}/${item.cover_img}`
                      "
                      alt="臺灣工藝學習平台"
                    >
                      <template v-slot:placeholder>
                        <div
                          class="d-flex align-center justify-center fill-height"
                        >
                          <v-progress-circular
                            color="grey-lighten-4"
                            indeterminate
                          ></v-progress-circular>
                        </div>
                      </template>
                    </v-img>
                  </router-link>
                  <section>
                    <h2>{{ item.name }}</h2>
                    <div class="d-flex align-start">
                      <v-icon
                        color="primary"
                        icon="mdi-domain"
                        class="me-2"
                      ></v-icon>
                      <p>{{ item.organizer }}</p>
                    </div>
                    <div class="d-flex align-start">
                      <v-icon
                        color="primary"
                        icon="mdi-map-marker"
                        class="me-2 pt-1"
                      ></v-icon>
                      <p>{{ item.location_name }}</p>
                    </div>
                  </section>
                </div>
              </v-list-item>
            </v-list>

            <v-pagination
              v-model="pageNum"
              :length="totalPages"
              class="my-4"
              rounded="circle"
            ></v-pagination>
          </div>
        </div>
      </div>

      <!-- <div class="map">
        <Map @locationId="getClassList" />
      </div> -->
    </div>

    <h2 class="mb-10 title">{{ t("home.title_4") }}</h2>
    <v-row class="recommend-block">
      <v-col
        cols="12"
        sm="6"
        lg="4"
        v-for="(item, index) in recommend.list"
        :key="index"
        class="pa-5"
      >
        <CourseCard :data="item" />
      </v-col>
      <v-col cols="12">
        <router-link to="/course-list" class="course-link">
          <img
            src="@/assets/img/course/探索課程素材-15.png"
            alt="臺灣工藝學習平台"
          />
          <p>{{ t("see_more") }}</p>
        </router-link>
      </v-col>
    </v-row>
  </v-container>

  <!-- <v-container fluid class="pa-0 pt-sm-16 tutorial-block">
    <h2 class="mb-10 title">{{ t("tutorial.title") }}</h2>
    <CoursesTutorial />
  </v-container> -->

  <v-container class="px-md-0 my-16">
    <h2 class="mb-10 title">{{ t("home.title_6") }}</h2>
    <v-expansion-panels v-model="panel" multiple>
      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_1")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          <ul>
            <li>
              <h4><span></span> {{ t("home.faq.a_1_1") }}</h4>
              <p>
                {{ t("home.faq.a_1_2") }}
              </p>
            </li>
            <li>
              <h4><span></span> {{ t("home.faq.a_2_1") }}</h4>
              <p>
                {{ t("home.faq.a_2_2") }}
              </p>
            </li>
            <li>
              <h4><span></span> {{ t("home.faq.a_3_1") }}</h4>
              <p>
                {{ t("home.faq.a_3_2") }}
              </p>
            </li>
            <li>
              <h4><span></span> {{ t("home.faq.a_4_1") }}</h4>
              <p>
                {{ t("home.faq.a_4_2") }}
              </p>
            </li>
          </ul>
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>
          {{ t("terms.terms_of_service") }}</v-expansion-panel-title
        >
        <v-expansion-panel-text>
          <TermsList />
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_2")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          <p v-html="$t('home.faq.a_2')"></p>
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_3")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          {{ t("home.faq.a_3") }}
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_4")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          {{ t("home.faq.a_4") }}
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel elevation="0">
        <v-expansion-panel-title>{{
          t("home.faq.q_5")
        }}</v-expansion-panel-title>
        <v-expansion-panel-text>
          {{ t("home.faq.a_5") }}
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>

    <h2 class="mb-10 mt-16 title">{{ t("crafts.title") }}</h2>

    <v-row class="px-5 px-sm-10 mt-16 mb-10 tag-btn">
      <v-col
        v-for="(item, index) in tagList"
        :key="index"
        :cols="index + 1 === tagList.length ? '12' : '6'"
        md=""
      >
        <a :href="item.url" target="_blank" class="py-3 py-lg-6 item">
          <!-- 網址 -->
          {{ t(`${item.title}`) }}
        </a>
      </v-col>
    </v-row>

    <CraftsArticle />

    <router-link to="/crafts" class="crafts-link">
      <img
        src="@/assets/img/course/探索課程素材-15.png"
        alt="臺灣工藝學習平台"
      />
      <p>{{ t("crafts.see_more") }}</p>
    </router-link>

    <div class="mt-16">
      <img
        class="d-none d-md-block"
        src="@/assets/img/course/banner.webp"
        alt="臺灣工藝學習平台"
      />
      <img
        class="d-block d-md-none"
        src="@/assets/img/course/banner-mb.webp"
        alt="臺灣工藝學習平台"
      />
    </div>
  </v-container>
</template>

<style lang="scss" scoped>
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 1;
  transition: all 0.3s;
  .cover {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
  .logo {
    max-width: 600px;
    position: absolute;
    z-index: 10;
  }

  &.close {
    opacity: 0;
    position: absolute;
  }
}

.intro {
  margin: 120px 0 6.25em;
  p {
    line-height: 32px;
  }
}

.title {
  font-size: 1.625em;
  font-weight: 400;
  letter-spacing: 0.125em;
  text-align: center;
}

.navbar {
  margin-top: 40px;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;

  &::before {
    top: unset;
    left: unset;
    width: auto;
    height: 100%;
  }
}

.img-info {
  display: block;
  position: relative;
  section {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 149, 163, 0.5);
    // background: rgba(167, 193, 204, 0.7);
    cursor: pointer;
    opacity: 1;
    transition: all 0.5s;
    &:hover {
      // opacity: 1;
      p {
        font-size: 1.4em;
      }
    }
    p {
      color: #fff;
      font-size: 1.25em;
      letter-spacing: 0.0625em;
      transition: all 0.3s;
    }
  }
}

.news-content {
  margin: 6.25em auto;
}

.map-block {
  margin: 6.25em auto;
  .map {
    height: 100%;
    min-height: 100vh;
  }

  .list {
    .link {
      width: 40%;
      margin-right: 1.25em;
      border-radius: 0.3125em;
      overflow: hidden;

      @media (max-width: 960px) {
        width: auto;
      }
      .v-img {
        width: 200px;
        height: 9.375em;
        margin-right: 1.25em;
        border-radius: 0.3125em;
        box-shadow: 0.125em 0.125em 4px #aaaaaa;
        transition: all 0.3s;
        object-fit: cover;

        @media (max-width: 960px) {
          width: 250px;
          height: 170px;
          margin-right: 0;
        }

        @media (max-width: 575px) {
          width: 9.375em;
          height: 70px;
        }

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    section {
      width: 60%;

      h2 {
        margin-bottom: 0.625em;
        font-size: 1em;
        font-weight: 500;
      }

      p {
        font-size: 0.875em;
        font-weight: 400;
      }

      h2,
      p {
        line-height: 1.625em;
        letter-spacing: 0.0625em;
        // 超過兩行則省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-break: after-white-space;
      }
    }

    .v-list-item {
      height: 215px;
      padding: 1.25em 0;
      border-bottom: 0.0625em solid #cccccc;

      @media (max-width: 575px) {
        height: auto;
      }

      &:last-child {
        border-bottom: none;
      }

      .v-list-item__content {
        overflow: initial !important;
      }
    }
  }
}

.course-link {
  margin-top: 0.9375em;
  color: #000;
  background-color: var(--sub-color);
}

.crafts-link {
  margin: 6.25em 0;
  color: #fff;
  background-color: var(--purple);
  img {
    filter: invert(88%) sepia(100%) saturate(0%) hue-rotate(151deg)
      brightness(103%) contrast(103%);
  }
}

.crafts-link,
.course-link {
  padding: 0.9375em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625em;
  box-shadow: 0.125em 0.125em 0.625em #aaaaaa;
  &:hover {
    img {
      transform: rotateZ(10deg);
    }
  }
  img {
    max-width: 85px;
    padding-right: 1.25em;
    transition: all 0.3s;
  }
  p {
    font-size: 1.25em;
    letter-spacing: 0.125em;
  }
}

.tutorial-block {
  max-width: 100% !important;
}

.loading-item {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* 底部彈出視窗的樣式 */
.bottom-sheet {
  display: none;
  // display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 2.1875em;
  left: 0;
  width: 100%;
  height: 300px; /* 設置底部彈出視窗的高度 */
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  transform: translateY(100%); /* 預設隱藏底部視窗 */

  &.show {
    bottom: 0;
    transform: translateY(0);
  }
  .content {
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .btn {
      width: 100%;
      padding: 1.25em;
      display: flex;
      justify-content: center;

      span {
        display: block;
        height: 0.3125em;
        width: 3.75em;
        position: absolute;
        top: 0.9375em;
        z-index: 1000;
        background: #bbbbbb;
        border-radius: 1.25em;
      }
    }

    .v-pagination {
      width: 200px;
    }

    .list {
      margin: 0 0.625em 1.25em;
      overflow-y: auto;

      section {
        text-align: start;
      }
    }
  }
}

.close-btn {
  position: absolute;
  right: 15px;
  top: 5px;
  .v-icon {
    color: #fff;
    font-size: 40px;
    text-shadow: 1px 1px 3px #333;
  }
  &.close {
    display: none;
  }
}

// Vuetify Expansion 樣式
.v-expansion-panel {
  margin-bottom: 1.875em;
  line-height: 1.875em;
  border-radius: 0.625em !important;
  li:first-child {
    h4 {
      margin-top: 0;
    }
  }
  h4 {
    display: flex;
    align-items: center;
    margin-top: 1.25em;
    font-size: 1.125em;
    font-weight: 500;
    span {
      display: block;
      width: 8px;
      height: 8px;
      margin-top: 0.3125em;
      margin-right: 0.625em;
      border-radius: 0.625em;
      background-color: var(--blue);
    }
  }
}

.v-expansion-panel-title {
  padding: 1.25em 1.875em;
  font-size: 1em;
  line-height: 1.625em;
  letter-spacing: 0.0625em;
  border: 0.0625em solid var(--blue);
}

.v-expansion-panel-text {
  padding-top: 8px;
}

.v-expansion-panel-title__overlay {
  opacity: 0 !important;
}

.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :first-child:not(:last-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--before-active
  ),
.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :last-child:not(:first-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--after-active
  ),
.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--after-active
  ),
.v-expansion-panels:not(.v-expansion-panels--variant-accordion)
  > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(
    .v-expansion-panel--before-active
  ),
.v-expansion-panel--active > .v-expansion-panel-title {
  border-top-left-radius: 0.625em !important;
  border-top-right-radius: 0.625em !important;
  border-bottom-left-radius: 0.625em !important;
  border-bottom-right-radius: 0.625em !important;
}
.v-expansion-panel:not(:first-child)::after {
  border-top-style: none;
}

.v-expansion-panel-title--active:hover > .v-expansion-panel-title__overlay,
.v-expansion-panel-title[aria-haspopup="menu"][aria-expanded="true"]:hover
  > .v-expansion-panel-title__overlay {
  opacity: 0;
}
</style>