ntcri/src/views/CollegeGroup/Teenager.vue

<script setup>
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_groups",
    disabled: true,
  },
  {
    title: "青年工藝",
    disabled: true,
  },
]);

const testData = [
  {
    title:
      "臺灣工藝學習平台獎助博碩士生研撰臺灣工藝相關研究論文作業要點",
    date: "2023.08.26",
    category: "工藝政策",
    introduction:
      "臺灣工藝學習平台為提升臺灣工藝文化之主體性及營造工藝學領域發展環境，鼓勵國內大學校院培養工藝研究人才，發表研究成果，促使工藝升級、文化深耕，並建構相關資源支持體系，特訂定本要點，獎助內容如下：",
  },
  {
    title: "博碩士生研撰臺灣工藝相關研究論文獎助申請，申請至6月30日止",
    date: "2023.06.07",
    category: "獎助申請",
    introduction:
      "國立臺灣工藝硏究發展中心溈提升臺灣工藝文化之主體性及營造工藝學領域發展環境，鼓勵國內大學校院培養工藝研究人才，發表研究成果，促使工藝升級、文化深耕，並建構相關資源支持體系，獎助國內各大學院校撰寫有闕工藝相關硏究學位論文之在學博士班、碩士班學生，最高#新臺幣12萬元",
  },
  {
    title:
      "2024學年度「傅爾布萊特一臺灣文化部藝文專業人才獎助計畫」即日開始徵件",
    date: "2023.08.31",
    category: "獎助申請",
    introduction:
      "2024學年度「傅爾布萊特一臺灣文化部藝文專業人才獎助計畫」即日起開始徵件，甄選對象含藝文行政、管理、技術、策展、評論人員，薦送名額為3人，申請截止日期為2023年10月31日，有志前往美國機構交流的藝文工作者，請務必把握機會申請.",
  },
  {
    title: "2023臺北設計獎",
    date: "2023.08.31",
    category: "競賽資訊",
    introduction:
      "2023臺北設計獎(Taipei Design Awardy總獎金高達423萬元，其中「工業設計類小、「視覺傳達設計類」、「公共空間設計類」三大類別已於5月20日開始徵件。今年特別新增全新獎項「臺北城市設計",
  },
];

const categoryList = reactive([
  {
    title: "總覽",
  },
  {
    title: "工藝政策",
  },
  {
    title: "競賽資訊",
  },
  {
    title: "校園扎根",
  },
  {
    title: "策展補助",
  },
  {
    title: "獎助申請",
  },
  {
    title: "重要訊息",
  },
]);
</script>

<template>
  <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-10 p-0">
    <template v-slot:title="{ item }">
      {{ t(item.title) }}
    </template>
  </v-breadcrumbs>

  <div class="d-flex flex-column flex-sm-row align-center justify-end title">
    <div class="search">
      <span>
        <input
          v-model="searchInput"
          type="text"
          @keyup.enter="search()"
          :placeholder="t('keyword_search')"
        />
        <button @click="search()">
          <img
            src="@/assets/img/news/news-search-icon.png"
            alt="臺灣工藝學習平台"
          />
        </button>
      </span>
      <div
        v-if="searchError"
        class="d-flex justify-center align-center error me-4"
      >
        <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
        {{ t("no_found") }}
      </div>
    </div>
  </div>

  <v-row>
    <v-col sm="2" cols="12" class="px-0">
      <ul class="btn-list">
        <li v-for="(item, index) in categoryList" :key="index" class="mx-3">
          <v-btn class="mb-5" variant="outlined">
            {{ item.title }}
          </v-btn>
        </li>
      </ul>
    </v-col>
    <v-col sm="10" cols="12">
      <!-- <ul class="article-list">
        <li
          v-for="(item, index) in testData"
          :key="index"
          class="post-item pa-5"
          rounded="xl"
        >
          <section class="d-flex">
            <p class="category mb-5">
              <span></span>
              {{ item.category }}
            </p>
            <p class="ms-5">
              {{ moment(`${item.date}`).format("YYYY-MM-DD") }}
            </p>
          </section>
          <v-card
            variant="outlined"
            class="d-flex flex-md-row flex-column align-center pa-3 pa-md-5"
          >
            <v-row class="align-center">
              <v-col cols="12">
                <h3>{{ item.title }}</h3>
                <ul>
                  <li class="d-flex align-center mt-3">
                    <p class="mb-0 ms-3">
                      {{ item.introduction }}
                    </p>
                  </li>
                </ul>
              </v-col>
            </v-row>
          </v-card>
        </li>
      </ul> -->
    </v-col>
  </v-row>
</template>

<style lang="scss" scoped>
.btn-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.875em, max-content));
  justify-content: center;
  padding: initial;
  li {
    list-style-type: none;
  }

  .v-btn {
    width: 6.25em;
    @media (max-width: 600px) {
      width: 9.375em;
    }
  }
}
.post-item {
  margin-bottom: 1.875em;
}
</style>