ntcri/src/views/CollegeGroup/Future.vue

<script setup>
import { ref, reactive } from "vue";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";
import { useMainStore } from "@/stores/store";

const store = useMainStore();

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "工藝學群",
    disabled: false,
    href: "/ntcri/college-group/craft",
  },
  {
    title: "未來工藝",
    disabled: true,
  },
]);

const testData = [
  {
    title: "工藝跨域研創補助計畫【徵件至9月28日止】",
    start_time: "2023/06/15",
    end_time: "2023/09/28",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "積極性藝文紓困補助方案",
    start_time: "2023/06/15",
    end_time: "2023/09/28",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
];
</script>

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

  <div class="title">
    <h2>研發補助</h2>
  </div>

  <ul>
    <li v-for="(item, index) in testData" :key="index" class="mb-10">
      <v-card
        variant="outlined"
        class="d-flex flex-md-row flex-column align-center pa-5"
      >
        <v-row class="align-center">
          <v-col sm="4" cols="12">
            <img src="@/assets/img/img-04.jpg" alt="" />
          </v-col>
          <v-col sm="8" cols="12">
            <section class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0">
              <h2 class="ms-0 mb-16">{{ item.title }}</h2>
              <span class="d-flex align-center">
                <v-icon
                  color="gray"
                  icon="mdi-calendar-range"
                  class="me-2"
                ></v-icon>
                <p>
                  {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }}
                  ～ {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                </p>
              </span>
              <span class="d-flex align-center mt-3">
                <v-icon
                  color="gray"
                  icon="mdi-map-marker"
                  class="me-2"
                ></v-icon>
                <p>
                  {{ item.address }}
                </p>
              </span>
            </section>
          </v-col>
        </v-row>
      </v-card>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.main-block {
  img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  span {
    line-height: 24px;
  }
}
</style>