방명록 작업완료

leesum-in · Nov 6, 2019 · 5769d1f · 5769d1f
1 parent 12813c1
commit 5769d1f
Show file tree

Hide file tree

Showing 15 changed files with 1,665 additions and 123 deletions.
diff --git a/components/ArrowLeft.vue b/components/ArrowLeft.vue
@@ -0,0 +1,21 @@
+<template>
+  <button class="arrow left" @click="$emit('click')">
+    <svg width="30px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
+      <polyline
+        fill="none"
+        stroke="#FFFFFF"
+        stroke-width="1"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        points="
+	45.63,75.8 0.375,38.087 45.63,0.375 "
+      />
+    </svg>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ArrowLeft'
+}
+</script>
diff --git a/components/ArrowRight.vue b/components/ArrowRight.vue
@@ -0,0 +1,28 @@
+<template>
+  <button class="arrow right" @click="$emit('click')">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="30px"
+      height="40px"
+      viewBox="0 0 50 80"
+      xml:space="preserve"
+    >
+      <polyline
+        fill="none"
+        stroke="#FFFFFF"
+        stroke-width="1"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        points="
+	0.375,0.375 45.63,38.087 0.375,75.8 "
+      />
+    </svg>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ArrowRight'
+}
+</script>
diff --git a/components/Gallery.vue b/components/Gallery.vue
@@ -1,14 +1,14 @@
 <template>
-  <div id="section2" class="section">
-    <div id="slide2-0" class="slide">
+  <div id="section3" class="section">
+    <div id="slide3-0" class="slide">
       <div class="fp-bg" :style="getSlideStyle(0)"></div>
-      <h2 class="text-bot" @click="$emit('click-gallery')">
-        GALLERY&gt;&gt;
-      </h2>
+      <div class="arrow-container" @click="$emit('move', 3, 1)">
+        <arrow-right />
+      </div>
     </div>
     <div
       v-for="index in 10"
-      :id="'slide2-' + index"
+      :id="'slide3-' + index"
       :key="index"
       class="slide slide-poem"
     >
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import ArrowRight from '@/components/ArrowRight'
 const slidesPoem = [
   '사람이 온다는 것은',
   '실은 어마어마한 일이다.',
@@ -48,6 +49,16 @@ const verticals = [
 
 export default {
   name: 'Gallery',
+  components: { ArrowRight },
+  computed: {
+    arrowStyle() {
+      return {
+        position: 'absolute',
+        top: '50%',
+        right: '5px'
+      }
+    }
+  },
   methods: {
     getSlideStyle(index) {
       return {
@@ -67,4 +78,10 @@ export default {
 .slide-poem .text-box {
   margin-top: 100px;
 }
+
+.arrow-container {
+  position: absolute;
+  top: 48%;
+  right: 5px;
+}
 </style>