add news view

src/plugins/vuetify.js

@@ -21,7 +21,8 @@ export default createVuetify({
         dark: false,
         colors: {
           primary: '#C39F68',
-          gray: '#888888'
+          gray: '#888888',
+          brown: '#3E3A39'
         },
       },
     },

src/router/index.js

@@ -3,6 +3,7 @@ import { defineAsyncComponent } from 'vue';
 
 const home = defineAsyncComponent(() => import('@/views/Home.vue'));
 const login = defineAsyncComponent(() => import('@/views/Login.vue'));
+const news = defineAsyncComponent(() => import('@/views/News.vue'));
 const courseList = defineAsyncComponent(() => import('@/views/CourseList.vue'));
 const courseDetail = defineAsyncComponent(() => import('@/views/CourseDetail.vue'));
 
@@ -17,6 +18,16 @@ const routes = [
     name: 'Login',
     component: login,
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: login,
+  },
+  {
+    path: '/news',
+    name: 'News',
+    component: news,
+  },
   {
     path: '/course-list',
     name: 'CourseList',

src/views/News.vue

@@ -0,0 +1,249 @@
+<script setup>
+import { ref, reactive } from "vue";
+import Navbar from "@/components/Navbar.vue";
+
+const breadcrumbs = reactive([
+  {
+    title: '首頁',
+    disabled: false,
+    href: '/',
+
+  },
+  {
+    title: '最新消息',
+    disabled: true,
+    href: '/news',
+
+  }
+]);
+
+const categoryList = reactive([
+  {
+    title: '總覽'
+  },
+  {
+    title: '一日學徒'
+  },
+  {
+    title: '工藝行旅'
+  },
+  {
+    title: '希望工程'
+  },
+  {
+    title: '展覽資訊'
+  },
+  {
+    title: '補助計畫'
+  },
+  {
+    title: '策展補助'
+  }
+])
+
+const getImageUrl = (name) => {
+  return new URL(`/src/assets/img/${name}`, import.meta.url).href;
+};
+
+console.log("getImageUrl('img-11.jpg')", getImageUrl('img-11.jpg'));
+const newsData = reactive([
+  {
+    date: '2023.06.19',
+    category: '工藝行旅',
+    img: getImageUrl('img-11.jpg'),
+    title: '臺灣綠工藝Taiwan Green Craft 健全臺灣工藝生態系 工藝價值的社會實踐',
+    describe: '臺灣綠工藝兼具「頂真精神、工作倫理、愉悅勞動、生活美學」的精神，以及「自然、循環、平衡、寬容、生命力」的本質，從生態系的宏觀視野，關注跨越文化面向、經濟面向、社會面向等廣大範疇，從而以工藝產業鏈的架構...'
+  },
+  {
+    date: '2023.06.19',
+    category: '工藝行旅',
+    img: getImageUrl('img-11.jpg'),
+    title: '臺灣綠工藝Taiwan Green Craft 健全臺灣工藝生態系 工藝價值的社會實踐',
+    describe: '臺灣綠工藝兼具「頂真精神、工作倫理、愉悅勞動、生活美學」的精神，以及「自然、循環、平衡、寬容、生命力」的本質，從生態系的宏觀視野，關注跨越文化面向、經濟面向、社會面向等廣大範疇，從而以工藝產業鏈的架構...'
+  },
+  {
+    date: '2023.06.19',
+    category: '工藝行旅',
+    img: getImageUrl('img-11.jpg'),
+    title: '臺灣綠工藝Taiwan Green Craft 健全臺灣工藝生態系 工藝價值的社會實踐',
+    describe: '臺灣綠工藝兼具「頂真精神、工作倫理、愉悅勞動、生活美學」的精神，以及「自然、循環、平衡、寬容、生命力」的本質，從生態系的宏觀視野，關注跨越文化面向、經濟面向、社會面向等廣大範疇，從而以工藝產業鏈的架構...'
+  },
+])
+</script>
+
+<template>
+  <Navbar />
+  <div class="position-relative">
+    <img src="@/assets/img/news/news-01.png" alt="" class="material-img">
+    <v-container>
+      <img src="@/assets/img/news/news-banner.png" alt="">
+
+      <div class="content pt-10 mt-16">
+        <div class="bg-img">
+          <img src="@/assets/img/news/news-02.png" alt="">
+        </div>
+
+        <v-breadcrumbs :items="breadcrumbs" divider="/" class="pt-16 mb-5"></v-breadcrumbs>
+
+        <div class="category-btn">
+          <v-btn v-for="(item, index) in categoryList" :key="index" rounded="xl" color="brown"
+            :class="{ 'me-5': index !== categoryList.length - 1 }" class="mb-5">
+            {{ item.title }}
+          </v-btn>
+        </div>
+
+        <div class="search mt-5 mb-10 me-16">
+          <span>
+            <input type="text">
+            <button>
+              <img src="@/assets/img/news/news-search-icon.png" alt="">
+            </button>
+          </span>
+        </div>
+        <ul>
+          <li v-for="(item, index) in newsData" :key="index" class="mb-10">
+            <section class="d-flex">
+              <p class="category mb-5">
+                <span></span>
+                {{ item.category }}
+              </p>
+              <p class="ms-5">{{ item.date }}</p>
+            </section>
+            <v-card variant="outlined" class="d-flex align-center pa-5">
+              <img :src="item.img" alt="">
+              <section class="d-flex flex-column px-10">
+                <h2>{{ item.title }}</h2>
+                <p>{{ item.describe }}</p>
+              </section>
+            </v-card>
+          </li>
+        </ul>
+      </div>
+    </v-container>
+    <img src="@/assets/img/news/news-01.png" alt="" class="material-img">
+  </div>
+</template>
+
+<style lang="scss">
+.material-img {
+  position: absolute;
+
+  &:first-child {
+    top: -185px;
+  }
+
+  &:last-child {
+    bottom: 0;
+    z-index: -5;
+    transform: scaleX(-1);
+  }
+}
+
+.category-btn {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .v-btn {
+    width: 130px;
+  }
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+
+  span {
+    position: relative;
+  }
+
+  input {
+    padding: 5px 10px;
+    border-radius: 100px;
+    background-color: #fff;
+    box-shadow: 1px 1px 3px #ccc;
+  }
+
+  button {
+    position: absolute;
+    right: 10px;
+    left: 0;
+    top: 3px;
+
+    img {
+      width: 25px;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+}
+
+.content {
+  position: relative;
+  margin-bottom: 200px;
+
+  .bg-img {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: -110px;
+
+    img {
+      min-width: 105%;
+    }
+  }
+
+  ul {
+    padding: 0 80px;
+
+    li {
+      letter-spacing: 1px;
+
+      .v-card {
+        background-color: #fff;
+
+        section {
+          h2 {
+            margin-bottom: 20px;
+            font-size: 26px;
+            font-weight: 500;
+            line-height: 36px;
+          }
+
+          p {
+            line-height: 22px;
+          }
+        }
+
+        img {
+          width: 100%;
+          max-width: 330px;
+          height: 200px;
+          object-fit: cover;
+        }
+      }
+
+      .category {
+        display: flex;
+        align-items: center;
+
+        span {
+          display: block;
+          width: 8px;
+          height: 8px;
+          margin-right: 10px;
+          border-radius: 10px;
+          background-color: #000;
+        }
+
+      }
+    }
+  }
+}
+</style>