ntcri/src/views/Home.vue

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import axios from "axios";
import Map from "@/components/Map.vue";
import Navbar from "@/components/Navbar.vue";

(async function getData() {
  try {
    const response = await axios.get("https://cmm.ai:8088/api/get_school");
    console.log("response.data", response.data);
  } catch (error) {
    console.error(error);
  }
})();

const scrollLeft = ref(0);
let shouldAnimate = ref(false);
let shouldFadeOut = ref(false);
let scrollCount = 1;

const handleScroll = () => {
  const windowWidth = window.innerWidth; // 螢幕寬度
  const windowHeight = window.innerHeight;
  const documentHeight = document.body.scrollHeight - windowHeight;
  const windowScrollable = windowWidth * scrollCount; // 可捲動寬度
  const scrollTop = window.pageYOffset;
  const steps = windowScrollable / documentHeight;
  const goLeft = scrollTop * steps;

  // console.log('windowWidth',windowWidth);
  // console.log('windowScrollable',windowScrollable);

  if (scrollTop > 0) {
    shouldAnimate.value = true;
    shouldFadeOut.value = false;
  } else {
    shouldFadeOut.value = true;
  }

  scrollLeft.value = goLeft;
};

let innerWidth = ref("");
const handleResize = () => {
  innerWidth.value = window.innerWidth;
  console.log(innerWidth.value);
  if (window.innerWidth <= 991) {
    scrollCount = 2;
  } else {
    scrollCount = 1;
  }
};

onMounted(() => {
  handleResize(); // 初始化檢查一次
  window.addEventListener("resize", handleResize);
});

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

// 取得該據點所有課程
const getClassList = async (locationId) => {
  console.log("locationId", locationId);

  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?location_id=${locationId}`
    );
    console.log("response", response);
    classes.data = response.data.classes;
    console.log("classes.data", classes.data);
  } catch (error) {
    console.log("error", error);
  }
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll);
});

const previous = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};
</script>

<template>
  <div class="home-container">
    <div class="wrapper">
      <div>
      </div>
      <div class="scrollable" :style="{ transform: `translateX(-${scrollLeft}px)` }">
        <section class="main-block">
          <Navbar />
          <div class="img-item">
            <img src="@/assets/img/banner-0615.webp" alt="" />
            <p v-show="shouldAnimate" :class="{
              animate__animated: shouldAnimate,
              animate__fadeInRight: shouldAnimate && !shouldFadeOut,
              animate__fadeOutRight: shouldAnimate && shouldFadeOut,
            }">
              臺灣工藝學校 <br />
              以佈局具國際視野之工藝學習共享平台為目標，藉由「工藝學校」的主體概念，推動臺灣工藝學校全球學習平台，以共享、友善、全人、全民的終身工藝手作台進行人才、課程、知識、教材之工藝資源嫁接媒合與內容設計，以在地、就近、線上、線下等多元方式提供不同型態之學習體驗內容及選擇。
            </p>
          </div>
        </section>
        <section class="map-block">
          <div class="back-btn">
            <p @click="previous()">回到首頁</p>
          </div>
          <div class="content">
            <div class="map">
              <Map @locationId="getClassList" />
            </div>
            <v-list lines="three" class="list">
              <v-list-item v-for="item in classes.data" :key="item.id">
                <div class="d-flex align-center">
                  <img :src="`https://cmm.ai/ntcri/${item.cover_img}`" alt="" />
                  <section>
                    <h2>{{ item.name }}</h2>
                    <p>主辦單位：{{ item.organizer }}</p>
                    <p>據點名稱：{{ item.school }}</p>
                  </section>
                </div>
              </v-list-item>
            </v-list>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "animate.css/animate.min.css";

.home-container {
  height: 150vw; // 捲軸高度
  overflow: hidden;

  @media (max-width: 960px) {
    height: 300vw;
  }

  .wrapper {
    overflow: hidden;
    position: fixed;
  }

  .scrollable {
    height: 100vh;
    display: flex;
    align-items: end;

    .img-item {
      width: 100%;
      height: 100%;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
      }

      p {
        width: 600px;
        top: 170px;
        right: 7.5%;
        position: absolute;
        z-index: 100;
        font-size: 24px;
        line-height: 38px;
        color: #fff;
        text-shadow: 2px 2px 5px #333;

        @media (max-width: 1700px) {
          width: 33vw;
          top: 140px;
          right: 6%;
        }

        @media (max-width: 767px) {
          display: none !important;
        }
      }
    }

    &::after {
      content: "";
      display: table;
      clear: both;
    }

    .main-block,
    .map-block {
      width: 100vw;
      display: flex;
      align-items: center;

      @media (max-width: 1200px) {
        height: 84vh;
      }

      @media (max-width: 960px) {
        width: 150vw;
      }
    }

    .main-block {
      height: 82vh;

      .navbar {
        right: 50.5%;
        position: absolute;
      }
    }

    .map-block {
      height: 100vh;

      .content {
        width: 100%;
        height: 100%;
        display: flex;

        .map,
        .list {
          @media (max-width: 960px) {
            width: 100%;
          }
        }

        .map {
          width: 60%;
        }

        .list {
          width: 40%;

          img {
            width: 200px;
            margin-right: 20px;
            border-radius: 5px;
            box-shadow: 2px 2px 4px #aaaaaa;
          }

          h2 {
            font-size: 18px;
          }

          h2,
          p {
            line-height: 30px;
          }

          .v-list-item {
            padding: 30px 20px;
            border-bottom: 1px solid #cccccc;

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

  .back-btn {
    height: 18vh;
    position: absolute;
    // top: 0;
    // right: 80px;
    top: -4%;
    right: 22%;
    z-index: 1000;
    display: flex;
    align-items: center;

    @media (max-width: 1200px) {
      height: 16vh;
    }

    p {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}</style>