ntcri/src/views/CollegeGroup/Craft.vue

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
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: "種子教師研習",
    start_time: "2023/06/15",
    end_time: "2023/06/20",
    address: "地方工藝館 工藝教室",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "種子教師研習",
    start_time: "2023/06/15",
    end_time: "2023/06/20",
    address: "地方工藝館 工藝教室",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "種子教師研習",
    start_time: "2023/06/15",
    end_time: "2023/06/20",
    address: "地方工藝館 工藝教室",
    img: store.getImageUrl("college-group/img.jpg"),
  },
];
</script>

<template>
  <div class="college-bg-img">
    <Navbar />
    <v-container fluid class="college-content pb-16 px-sm-0">
      <div class="college-banner">
        <img src="@/assets/img/college-group/craft/banner.png" alt="" />
        <h1>技藝工藝</h1>
      </div>
      <div class="main-block">
        <v-breadcrumbs
          :items="breadcrumbs"
          divider="/"
          class="mt-10 p-0"
        ></v-breadcrumbs>

        <div
          class="d-flex flex-column flex-sm-row align-center justify-space-between title"
        >
          <h2>校園扎根－教師限定課程</h2>
          <div class="search">
            <span>
              <input
                v-model="searchInput"
                type="text"
                @keyup.enter="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>
              沒有符合搜尋條件的項目
            </div>
          </div>
        </div>

        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in testData"
            :key="index"
            class="pa-5"
          >
            <div class="card">
              <h3>{{ item.title }}</h3>
              <img :src="item.img" alt="" class="cover-img" />
              <ul>
                <li class="d-flex align-center">
                  <img src="@/assets/img/icon/date_icon.png" alt="" />
                  <p class="mb-0 ms-3">
                    {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
                    {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                  </p>
                </li>
                <li class="d-flex align-center mt-3">
                  <img src="@/assets/img/icon/location_icon.png" alt="" />
                  <p class="mb-0 ms-3">
                    {{ item.address }}
                  </p>
                </li>
              </ul>
            </div>
          </v-col>
        </v-row>

        <div
          class="d-flex flex-column flex-sm-row align-center justify-space-between title"
        >
          <h2>輕工藝私塾</h2>
          <div class="search">
            <span>
              <input
                v-model="searchInput"
                type="text"
                @keyup.enter="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>
              沒有符合搜尋條件的項目
            </div>
          </div>
        </div>

        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in testData"
            :key="index"
            class="pa-5"
          >
            <div class="card">
              <h3>{{ item.title }}</h3>
              <img :src="item.img" alt="" class="cover-img" />
              <ul>
                <li class="d-flex align-center">
                  <img src="@/assets/img/icon/date_icon.png" alt="" />
                  <p class="mb-0 ms-3">
                    {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
                    {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                  </p>
                </li>
                <li class="d-flex align-center mt-3">
                  <img src="@/assets/img/icon/location_icon.png" alt="" />
                  <p class="mb-0 ms-3">
                    {{ item.address }}
                  </p>
                </li>
              </ul>
            </div>
          </v-col>
        </v-row>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 0;
  width: 90%;
  
  @media (max-width: 600px) {
    width: 85%;
  }
  .main-block {
    padding: 100px 80px;
    margin-top: -30%;
    background-color: #fff;

    @media (max-width: 960px) {
      padding: 100px 50px;
    }

    @media (max-width: 600px) {
      padding: 100px 20px;
    }

    h2 {
      font-size: 30px;
      font-weight: 500;
      line-height: 32px;
      margin-left: 10px;

      @media (max-width: 960px) {
        font-size: 24px;
      }

      @media (max-width: 600px) {
        margin-left: 0;
        margin-bottom: 50px;
      }
    }
    .title {
      margin: 80px 0;
      @media (max-width: 600px) {
        margin: 50px 0;
      }
    }
    .v-breadcrumbs {
      position: relative;
      z-index: 100;
      justify-content: flex-start;
      @media (max-width: 600px) {
        justify-content: center;
      }
    }
  }
}

.card {
      letter-spacing: 1px;
      border-radius: 10px;
      box-shadow: 2px 2px 10px #aaaaaa;
      background-color: var(--sub-color);
      h3 {
        padding: 15px;
        font-size: 22px;
        font-weight: 400;
        text-align: center;
        margin-bottom: 15px;
        border-bottom: 2px solid #fff;
      }
      ul {
        padding: 20px;
      }
      .cover-img {
        padding: 0 15px;
      }
    }
</style>