ntcri/src/views/CollegeGroup/Future.vue

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

const { t } = useI18n();
const store = useMainStore();

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

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

// 線上閱讀
(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?category=研究計畫`
    );
    read.list = response.data.articles;
    console.log("線上閱讀", read.list);
  } catch (error) {
    console.error(error);
  }
})();
</script>

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

  <h2 class="mb-0 title">{{ t("research_and_development_subsidy") }}</h2>

  <v-container class="pa-0 pa-sm-3">
    <div class="content">
      <img
        src="@/assets/img/college-group/future/素材-07.png"
        alt="臺灣工藝學習平台"
      />
      <section>
        <h3 class="mb-10">工藝跨域研創補助計畫【徵件至9月28日止】</h3>
        <span class="d-flex align-center mb-2">
          <v-icon color="gray" icon="mdi-calendar-range" class="me-2"></v-icon>
          2023/05/18 09:00 ~ 2023/09/28 17:00
        </span>
        <span class="d-flex align-center">
          <v-icon color="gray" icon="mdi-map-marker" class="me-2"></v-icon>
          臺灣工藝學習平台
        </span>
        <p class="mt-8">
          臺灣工藝學習平台為實踐從總體經濟觀上思考整體工藝文化產業價值，及厚實臺灣工藝產業未來發展之國際文化競爭力，徵求類型含物件型研創、新材料研創、技術性研創、社會與環境議題研創等，申請團隊可提出相關實績說明或規畫構想，最高獲得
          #新臺幣50萬元
          補助，歡迎國內相關機構、產業、公司等法人或團體以及個人創作者等單位踴躍提案申請！
        </p>
      </section>

      <section>
        <p class="sub-title mb-5">附件下載</p>
        <ul>
          <li class="dot">
            <span class="dot"></span>
            <a href="">工藝跨域研創補助須知.pdf</a>
          </li>
          <li class="dot py-2 py-sm-0">
            <a href="">工藝跨域研創補助計畫申請書.docx</a>
          </li>
          <li class="dot">
            <a href="">工藝跨域研創補助計畫申請書.odt</a>
          </li>
        </ul>
      </section>

      <p class="text-end mt-5">
        聯絡資訊 : 049-2334141 分機134 王小姐、分機136 張小姐
      </p>

      <img
        class="mt-16"
        src="@/assets/img/college-group/future/素材-08.png"
        alt="臺灣工藝學習平台"
      />
    </div>
  </v-container>

  <h2 class="title">{{ t("research_plan") }}</h2>

  <v-container class="book-block">
    <v-row
      v-for="(item, index) in read.list"
      :key="index"
      class="align-center mb-16"
    >
      <v-col cols="12" md="4" class="d-flex flex-column align-center">
        <a
          v-if="store.isMobile"
          :href="store.getPDF(item.fileName)"
          target="_blank"
          class="cover-img"
        >
          <img
            :src="`${store.imgUrl}/${item.cover_img}`"
            alt="臺灣工藝學習平台"
          />
          <button class="read-btn">點我閱讀</button>
        </a>

        <!-- <router-link v-else :to="`/crafts/${item.fileName}`" class="cover-img"> -->
        <router-link
          v-else
          :to="`/college-group/future/proposal/${item.article_id}`"
          class="cover-img"
        >
          <img
            :src="`${store.imgUrl}/${item.cover_img}`"
            alt="臺灣工藝學習平台"
          />
          <button class="read-btn">點我閱讀</button>
        </router-link>
        <h3 v-html="item.title"></h3>
      </v-col>
      <v-col cols="12" md="8" class="px-md-16 pb-md-16 mb-md-10">
        <p class="mt-10 content" v-html="item.depiction"></p>
      </v-col>
    </v-row>
  </v-container>

  <!-- <div>
    <h2 class="title">國際工藝村</h2>
    <p class="cooming-soon">「籌備中 cooming soon」</p>
  </div>

  <div>
    <h2 class="title">青年工藝</h2>
    <p class="cooming-soon">「籌備中 cooming soon」</p>
  </div> -->

  <!-- <button class="sloped-btn">點我閱讀</button> -->
</template>

<style lang="scss" scoped>
.content {
  margin: auto;
  max-width: 50em;
  letter-spacing: 0.0625em;

  p {
    line-height: 1.75em;
  }

  section {
    padding: 3.125em;
    margin-top: 1.25em;
    border: 0.0625em solid #ccc;
    border-radius: 0.3125em;

    @media (max-width: 600px) {
      padding: 1.5em;
    }

    h3 {
      font-weight: 500;
      font-size: 1.75em;
      line-height: 2.25em;

      @media (max-width: 600px) {
        font-size: 1.375em;
      }
    }

    a,
    span {
      line-height: 1.375em;
    }

    .sub-title {
      font-size: 1.125em;
    }

    li {
      display: flex;
      align-items: center;
      &::before {
        content: "•";
        font-size: 2em;
        color: #bca2b5;
        display: inline-block;
      }
    }
  }
}

.book-block {
  line-height: 1.875em;
  letter-spacing: 0.0625em;

  @media (max-width: 600px) {
    padding: 0 !important;
  }

  h3 {
    text-align: center;
    font-weight: 500;
  }
  h4 {
    font-size: 1.125em;
    font-weight: 400;
  }
  .cover-img {
    position: relative;
    cursor: pointer;

    img {
      @media (max-width: 960px) {
        max-height: 31.25em;
      }
    }

    &:hover {
      .read-btn {
        background-color: #99b1bb;
      }
    }
    .read-btn {
      padding: 0.5em 3.125em;
      position: absolute;
      right: -3.125em;
      bottom: 2.8125em;
      font-size: 1.125em;
      letter-spacing: 0.125em;
      text-shadow: 0.0625em 0.0625em 0.1875em #939393;
      background-color: #a7c2cd;
      color: white;
      cursor: pointer;
      clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
      transition: all 0.3s;
      &:hover {
        background-color: #99b1bb;
      }

      @media (max-width: 600px) {
        padding: 0.5em 2.1875em;
        right: -0.9375em;
        font-size: 1em;
      }
    }
  }

  .content {
    // 超過兩行則省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-break: after-white-space;
  }
}
</style>