iframe + pdf 로드

pages/about.vue

@@ -1,5 +1,15 @@
 <template>
-  <h1>I am about page</h1>
+  <div class="about-page">
+    <div class="container">
+      <figure class="avatar">
+        <img src="/me.png">
+      </figure>
+      <p>HELLO MY NAME IS 또와 I AM A SOFTWARE TEACHER</p>
+      <br>
+      <p> 또와 SW교육은 4차 산업혁명의 시대에 인간을 이롭게 할 SW 인재를 양성하는 교육기업입니다.기능 위주의 과거의 컴퓨터교육을 탈피하고, 논리적인 사고력, 창의적인 문제 해결 능력 향상을 위한 코딩(소프트웨어) 교육을 연구하고 있습니다. 또와 SW교육은 차별화된 교육체계와 방법을 통해 대한민국 코딩(소프트웨어)교육의 기준을 제시하겠습니다.</p>
+      <br>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -8,4 +18,26 @@ export default {
     title: 'Learn more about Nuxtjs | Nuxtjs'
   }
 }
-</script>
+</script>
+<style scoped lang="scss">
+  .about-page {
+    padding-top: 80px;
+    position: relative;
+    max-width: 800px;
+    margin: 0 auto 5rem auto;
+    font-size: 25px;
+  }
+  .avatar {
+    margin-right: 20px;
+    float: left;
+  }
+  .avatar img {
+    height: 128px;
+    width: 128px;
+    padding: 5px;
+    background: #fff;
+    border-radius: 50%;
+    -webkit-box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
+    box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
+  }
+</style>

pages/courses/index.vue

@@ -1,11 +1,65 @@
 <template>
-  <h1>I am Courses page</h1>
+  <div>
+    <section class="section">
+      <div class="container">
+        <h1 class="title">All Courses</h1>
+        <div class="columns is-multiline">
+          <!-- iterate columns with v-for and don't forget :key -->
+          <div
+            v-for="course in courses"
+            :key="course._id"
+            class="column is-one-quarter">
+            <!-- pass a course as a prop to course-card -->
+            <v-popover
+              offset="16"
+              trigger="hover"
+              placement="right-start">
+              <course-card :course="course"/>
+              <template slot="popover">
+                <course-card-tooltip
+                  :title="course.title"
+                  :subtitle="course.category.name"
+                  :description="course.subtitle"
+                  :wsl="course.wsl"
+                />
+              </template>
+            </v-popover>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
+import CourseCard from '~/components/CourseCard'
+import CourseCardTooltip from '~/components/CourseCardTooltip'
+import { mapState } from 'vuex'
 export default {
   head: {
     title: 'Amazing tech courses | Nuxtjs'
+  },
+  components: {
+    CourseCard, CourseCardTooltip
+  },
+  computed : {
+    ...mapState({
+      // courses: state => { 
+      //   console.log('index.vue mapState')
+      //   return state.course.items
+      // }
+      courses : state => state.course.items
+    })
+  },
+  async fetch({store}) {
+    const result = await store.dispatch('course/fetchCourses')
   }
 }
-</script>
+</script>
+
+<style scoped lang="scss">
+  // Home page
+  .links {
+    padding-top: 15px;
+  }
+</style>

pages/cv.vue

@@ -1,5 +1,7 @@
 <template>
-  <h1>I am CV page</h1>
+  <div>
+    <iframe :style="{width: '100%', height: '800px'}" src="/default.pdf"></iframe>
+  </div>
 </template>
 
 <script>