ntcri/src/components/CraftsArticle.vue

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import { useMainStore } from "@/stores/store";
// import { useI18n } from "vue-i18n";

// const { t } = useI18n();
const store = useMainStore();
let loading = ref(false);
let data = reactive({
  list: [],
});

// 國際專欄
(async () => {
  loading.value = true;
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_sort=國際專欄`
    );
    data.list = response.data.articles;
    loading.value = false;
    console.log("國際專欄", data.list);
  } catch (error) {
    console.error(error);
  }
})();
</script>

<template>
  <div v-if="loading" class="d-flex justify-center my-10">
    <v-progress-circular
      color="grey-lighten-4"
      indeterminate
    ></v-progress-circular>
  </div>

  <v-row v-else class="list">
    <v-col cols="12" sm="6" v-for="(item, index) in data.list" :key="index">
      <a :href="item.url" target="_blank">
        <!-- <img :src="`${store.imgUrl}/${item.cover_img}`" alt="臺灣工藝學習平台" /> -->
        <div class="overflow-hidden">
          <v-img
            class="mx-auto cover-img"
            :lazy-src="`${store.imgUrl}/${item.cover_img}`"
            cover
            :src="`${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>
        </div>
      </a>
      <section>
        <p>{{ item.depiction }}</p>
        <h3 v-html="item.title"></h3>
      </section>
    </v-col>
  </v-row>
</template>

<style lang="scss" scoped>
.cover-img {
  transition: all 0.5s;

  &:hover {
    transform: translate(0, -0.625em);
  }
}
.list {
  p {
    margin-bottom: 0.625em;
  }
  h3,
  p {
    font-weight: 500;
    text-align: center;
    line-height: 1.875em;
  }
}
</style>