greenwhale/app/pages/media/news.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></h2>
        </div>
        <div class="news--wrap">
          <div class="news--list">
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--news.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
            <NuxtLink to="/" class="news">
              <div class="news--title--wrap">
                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
                <span>2025.07.11</span>
              </div>
              <div class="news--thumb--wrap">
                <img src="/img/img--cycle--center.png" alt="">
              </div>
            </NuxtLink>
          </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("media")
const title = ref("Media")
const navigation = ref([
  { name: "Media",
    link: "/media/news" ,
    gnbList : [
      { name: "환경뉴스", link: "/media/news" },
      { name: "보도자료", link: "/media/press" },
    ]
  },
  { name: "환경뉴스", link: "/media/news" }
])
</script>