greenwhale/app/pages/contact/notice.vue

<template>
  <div>
    <topVisual />
    <div class="sub-content">
      <div class="container">
        <h2 class="sub-title">공지사항</h2>
        <div class="notice-list">
          <table class="table">
            <thead>
              <tr>
                <th width="10%">번호</th>
                <th width="60%">제목</th>
                <th width="15%">작성일</th>
                <th width="15%">조회수</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(notice, index) in notices" :key="index">
                <td>{{ notices.length - index }}</td>
                <td class="text-left">
                  <a href="#" @click.prevent>{{ notice.title }}</a>
                </td>
                <td>{{ notice.date }}</td>
                <td>{{ notice.views }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import topVisual from '~/components/topVisual.vue';

const notices = [
  {
    title: '2024년 신년 인사',
    date: '2024-01-02',
    views: 150
  },
  {
    title: '홈페이지 리뉴얼 안내',
    date: '2023-12-15',
    views: 280
  },
  {
    title: '연말연시 휴무 안내',
    date: '2023-12-20',
    views: 195
  },
  {
    title: '신제품 출시 안내',
    date: '2023-11-10',
    views: 450
  },
  {
    title: '고객 감사 이벤트',
    date: '2023-10-25',
    views: 320
  }
];
</script>

<style scoped>
.notice-list {
  padding: 40px 0;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  background: #f8f8f8;
  padding: 15px;
  text-align: center;
  border-top: 2px solid #333;
  border-bottom: 1px solid #ddd;
  font-weight: 500;
}
.table td {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}
.table td.text-left {
  text-align: left;
}
.table a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}
.table a:hover {
  color: #00a651;
}
</style>