Works作成 #2 , headerの修正

components/Header.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="py-4 max-w-2xl px-4 mx-auto">
-    <div class="flex flex-row items-end gap-2">
+    <NuxtLink class="flex flex-row items-end gap-2" to="/">
       <img src="@/assets/images/kpc_logo.svg" class="h-6">
       <h2 class="font-[josefin-sans] text-xl">Kaijo Physics Club</h2>
-    </div>
+    </NuxtLink>
   </div>
 </template>

components/index/About.vue

@@ -28,7 +28,7 @@
         <span class="whitespace-nowrap">モノづくりを</span>
         <span class="whitespace-nowrap">しています。</span>
       </div>
-      <Link text='See more' class="ml-8 mt-4 float-left" :black="false"/>
+      <Link text='See more' class="ml-8 mt-4 float-left" :black="false" to="/about"/>
     </div>
   </div>
 </template>

components/index/Works.vue

@@ -20,7 +20,7 @@
         <span class="whitespace-nowrap">プログラムまで</span>
         <span class="whitespace-nowrap">紹介しています。</span>
       </div>
-      <Link text='See more' class="mr-8 mt-4 float-right" :black="true"/>
+      <Link text='See more' class="mr-8 mt-4 float-right" :black="true" to="/works"/>
     </div>
   </div>
 </template>

components/works/work.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="bg-white h-[220px] flex-col">
+    <div
+      class="h-32 relative bg-cover bg-center"
+      :style="`background-image:url(${img_url});`">
+      <h2
+        class="text-3xl font-bold absolute bottom-2 left-4"
+        :class="{'text-white/70':white, 'text-black/50':!white}"
+      >{{name}}</h2>
+    </div>
+    <div class="px-4 pb-4 pt-2 flex flex-col">
+      <p class="text-sm">{{description}}</p>
+    </div>
+  </div>
+</template>
+<script>
+export default{
+  props: ["name","description", "img_url", "white"]
+}
+</script>

pages/about.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="max-w-xl mx-auto pt-12 px-4 pb-4">
+    <h1 class="text-6xl font-bold">About</h1>
+  </div>
+  <div class="max-w-xl mx-auto px-4 pb-4 pt-4 border-t-2 flex flex-col gap-6">
+    <div class="flex flex-col gap-2">
+      <div>
+        <h2 class="font-bold text-5xl float-left text-black/30">01</h2>
+        <h1 class="text-4xl font-bold pt-4 -ml-6 float-left">活動内容</h1>
+      </div>
+      <div class="text-lg">
+        <span class="whitespace-nowrap">海城の物理部は</span>
+        <span class="whitespace-nowrap">自由な雰囲気で</span>
+        <span class="whitespace-nowrap">幅広い分野の</span>
+        <span class="whitespace-nowrap">モノづくりを</span>
+        <span class="whitespace-nowrap">している</span>
+        <span class="whitespace-nowrap">部活です。</span>
+        <span class="whitespace-nowrap">部員が</span>
+        <span class="whitespace-nowrap">それぞれ</span>
+        <span class="whitespace-nowrap">作っている</span>
+        <span class="whitespace-nowrap">ものは、</span>
+        <span class="whitespace-nowrap">ドローン・</span>
+        <span class="whitespace-nowrap">ロボット・</span>
+        <span class="whitespace-nowrap">電子工作・</span>
+        <span class="whitespace-nowrap">ピタゴラスイッチなどで、</span>
+        <span class="whitespace-nowrap">幅広い分野の</span>
+        <span class="whitespace-nowrap">モノづくりを</span>
+        <span class="whitespace-nowrap">しています。</span>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <div>
+        <h2 class="font-bold text-5xl float-left text-black/30">02</h2>
+        <h1 class="text-4xl font-bold pt-4 -ml-6 float-left">活動場所</h1>
+      </div>
+      <div class="text-lg">
+        <span class="whitespace-nowrap">海城の物理部は</span>
+        <span class="whitespace-nowrap">自由な雰囲気で</span>
+        <span class="whitespace-nowrap">幅広い分野の</span>
+        <span class="whitespace-nowrap">モノづくりを</span>
+        <span class="whitespace-nowrap">している</span>
+        <span class="whitespace-nowrap">部活です。</span>
+        <span class="whitespace-nowrap">部員が</span>
+        <span class="whitespace-nowrap">それぞれ</span>
+        <span class="whitespace-nowrap">作っている</span>
+        <span class="whitespace-nowrap">ものは、</span>
+        <span class="whitespace-nowrap">ドローン・</span>
+        <span class="whitespace-nowrap">ロボット・</span>
+        <span class="whitespace-nowrap">電子工作・</span>
+        <span class="whitespace-nowrap">ピタゴラスイッチなどで、</span>
+        <span class="whitespace-nowrap">幅広い分野の</span>
+        <span class="whitespace-nowrap">モノづくりを</span>
+        <span class="whitespace-nowrap">しています。</span>
+      </div>
+    </div>
+  </div>
+</template>

pages/works.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="max-w-xl mx-auto pt-12 px-4 pb-4">
+    <h1 class="text-6xl font-bold">Works</h1>
+  </div>
+  <div class="w-full bg-black py-8 px-4">
+    <div class="max-w-xl mx-auto grid gap-6 grid-cols-[repeat(2,260px)] place-content-center">
+      <WorksWork
+        v-for="work in works"
+        :key="work.key"
+        :name="work.name"
+        :description="work.description"
+        :img_url="work.img_url"
+        :white="work.white"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){return{
+    works:[
+      {
+        name:"LED Cube",
+        description:"LED CubeはLEDを512個組み合わせてプログラム通りに動かす作品です",
+        img_url:"https://content.instructables.com/ORIG/FUX/O1RW/GICYBAOS/FUXO1RWGICYBAOS.jpg",
+        white:true
+      }
+    ]
+  }}
+}
+</script>