greenwhale/app/pages/technology/patents.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="title--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">
            그린웨일글로벌은 까다롭기로 유명한 <br />
            <strong>친환경 플라스틱 관련 미국 특허 및 유럽 인증을 획득</strong>하여
            <br />그 기술력을 입증받았습니다.
          </h2>
        </div>
        <div class="tab--wrap patents">
          <NuxtLink to="/" class="active">전체</NuxtLink>
          <NuxtLink to="/" class="">특허증</NuxtLink>
          <NuxtLink to="/" class="">인증서</NuxtLink>
          <NuxtLink to="/" class="">성적서</NuxtLink>
          <NuxtLink to="/" class="">MSD&TDS</NuxtLink>
        </div>
        <div class="patents--wrap">
          <div class="patents--list">
            <UModal v-model:open="isModalOpen" title="특허 / 인증 크게보기" :close="false">
              <UButton @click="openModal('/img/img--patents.png')" class="patents">
                <div class="img--wrap">
                  <img src="/img/img--patents.png" alt="">
                </div>
                <h4>플라스틱 감축 소재 인증서</h4>
              </UButton>
              <template #content>
                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
                <div class="modal--img--container">
                  <img :src="selectedImage" alt="">
                </div>
              </template>
            </UModal>
            <UModal v-model:open="isModalOpen" title="특허 / 인증 크게보기" :close="false">
              <UButton @click="openModal('/img/img--patents.png')" class="patents">
                <div class="img--wrap">
                  <img src="/img/img--patents.png" alt="">
                </div>
                <h4>플라스틱 감축 소재 인증서</h4>
              </UButton>
              <template #content>
                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
                <div class="modal--img--container">
                  <img :src="selectedImage" alt="">
                </div>
              </template>
            </UModal>
            <UModal v-model:open="isModalOpen" title="특허 / 인증 크게보기" :close="false">
              <UButton @click="openModal('/img/img--patents.png')" class="patents">
                <div class="img--wrap">
                  <img src="/img/img--patents.png" alt="">
                </div>
                <h4>플라스틱 감축 소재 인증서</h4>
              </UButton>
              <template #content>
                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
                <div class="modal--img--container">
                  <img :src="selectedImage" alt="">
                </div>
              </template>
            </UModal>
            <UModal v-model:open="isModalOpen" title="특허 / 인증 크게보기" :close="false">
              <UButton @click="openModal('/img/img--patents.png')" class="patents">
                <div class="img--wrap">
                  <img src="/img/img--patents.png" alt="" />
                </div>
                <h4>플라스틱 감축 소재 인증서</h4>
              </UButton>
              <template #content>
                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
                <div class="modal--img--container">
                  <img :src="selectedImage" alt="" />
                </div>
              </template>
            </UModal>
            <UModal
              v-model:open="isModalOpen"
              title="특허 / 인증 크게보기"
              :close="false"
            >
              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
                <div class="img--wrap">
                  <img src="/img/top_ban_technology.jpg" alt="" />
                </div>
                <h4>플라스틱 감축 소재 인증서</h4>
              </UButton>
              <template #content>
                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
                <div class="modal--img--container">
                  <img :src="selectedImage" alt="" />
                </div>
              </template>
            </UModal>
          </div>
          <div class="pagination--wrap">
            <UButton class="prev--btn" disabled></UButton>
            <div class="numbs">
              <UButton class="active">1</UButton>
              <UButton>2</UButton>
              <UButton>3</UButton>
              <UButton>4</UButton>
              <UButton>5</UButton>
            </div>
            <UButton class="next--btn"></UButton>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
  import TopVisual from "~/components/topVisual.vue";

  const className = ref("technology");
  const title = ref("Technology");
  const isModalOpen = ref(false);
  const navigation = ref([
    {
      name: "Technology",
      link: "/technology/patents",
      gnbList: [
        { name: "Company", link: "/company/intro" },
        { name: "Product", link: "/products/materials" },
        { name: "Technology", link: "/technology/facilities" },
        { name: "Media", link: "/media/news" },
        { name: "Contact", link: "/contact/notice" },
      ],
    },
    {
      name: "특허 / 인증",
      link: "/technology/patents",
      gnbList: [
        { name: "시설", link: "/technology/facilities" },
        { name: "특허 / 인증", link: "/technology/patents" },
      ],
    },
  ]);

  const selectedImage = ref("/img/img--patents.png");

  const openModal = (imagePath) => {
    selectedImage.value = imagePath;
    isModalOpen.value = true;
  };
</script>