ntcri/src/views/CollegeGroup/Life/CraftJourney.vue

<script setup>
import { reactive } from "vue";
import axios from "axios";

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

(async () => {
  try {
    const response = await axios.get(
      "https://cmm.ai:8088/api/get_article?group_id=3"
    );

    travel.list = response.data.articles.filter(
      (e) => e.group_sort === "工藝行旅"
    );
  } catch (error) {
    console.error(error);
  }
})();

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "生活工藝",
    href: "/college-group/life",
    disabled: false,
  },
  {
    title: "工藝行旅",
    disabled: true,
  },
]);
</script>

<template>
  <v-breadcrumbs
    :items="breadcrumbs"
    divider="/"
    class="mt-10 pa-0"
  ></v-breadcrumbs>

  <h2 class="title">工藝行旅</h2>

  <v-row class="px-md-8 trave-content">
    <v-col cols="12" class="mb-5">
      <h4>工藝文化深度旅遊，品味在地、標記生活</h4>
      <p>
        打造以工藝為核心的文化深度旅遊路徑，結合工藝體驗、自然風土、地方美食、在地物產、
        <br />
        建築等觀光資源，旅人緩步慢行，暫離喧囂、以手作沉澱自我，發現生命中的寧靜與感動。
        <br />
        現在一起出發，感受工藝行旅的魅力和樂趣！
      </p>
    </v-col>

    <v-col
      cols="12"
      sm="6"
      md="4"
      v-for="item in travel.list"
      :key="item"
      class="py-5 info"
    >
      <a
        :href="
          $router.resolve(`/article-detail/${item.article_id}`).href
        "
      >
        <v-img
          :lazy-src="`https://ntcri.org/${item.cover_img}`"
          :src="`https://ntcri.org/${item.cover_img}`"
          cover
        >
          <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>
        <!-- <img :src="`https://ntcri.org/${item.cover_img}`" alt="" /> -->
        <section>
          <h3>{{ item.title }}</h3>
          <p>{{ item.depiction }}</p>
        </section>
      </a>
    </v-col>
  </v-row>
</template>

<style lang="scss" scoped>
.info {
  .v-img {
    height: 215px;
    width: 100%;
    object-fit: cover;
  }
  section {
    width: 90%;
  }
}
</style>