From f3b42b591484889f6b26006dbe6f43fbe9e20119 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Thu, 25 Mar 2021 15:09:48 +0800
Subject: [PATCH] [Component] add EventBlock for Agenda

---
 src/assets/images/arrow-left.svg        |   3 +
 src/assets/images/arrow-right.svg       |   3 +
 src/assets/images/event-block-bg.svg    |   3 +
 src/assets/images/group.svg             |  16 ++++
 src/assets/images/guide-outline.svg     |  14 ++++
 src/assets/images/lightning-outline.svg |   3 +
 src/assets/images/stall-outline.svg     |   3 +
 src/assets/images/union.svg             |   6 ++
 src/assets/scss/agenda.scss             |  17 ++++
 src/assets/scss/eventblock.scss         | 105 ++++++++++++++++++++++++
 src/components/EventBlock.vue           |  27 ++++++
 src/pages/Agenda.vue                    |  25 +++++-
 12 files changed, 222 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/arrow-left.svg
 create mode 100644 src/assets/images/arrow-right.svg
 create mode 100644 src/assets/images/event-block-bg.svg
 create mode 100644 src/assets/images/group.svg
 create mode 100644 src/assets/images/guide-outline.svg
 create mode 100644 src/assets/images/lightning-outline.svg
 create mode 100644 src/assets/images/stall-outline.svg
 create mode 100644 src/assets/images/union.svg
 create mode 100644 src/assets/scss/agenda.scss
 create mode 100644 src/assets/scss/eventblock.scss
 create mode 100644 src/components/EventBlock.vue

diff --git a/src/assets/images/arrow-left.svg b/src/assets/images/arrow-left.svg
new file mode 100644
index 0000000..c74b2f2
--- /dev/null
+++ b/src/assets/images/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
+    <path fill="#1060ff" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
+</svg>
diff --git a/src/assets/images/arrow-right.svg b/src/assets/images/arrow-right.svg
new file mode 100644
index 0000000..3ee986d
--- /dev/null
+++ b/src/assets/images/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
+    <path fill="#1060ff" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
+</svg>
diff --git a/src/assets/images/event-block-bg.svg b/src/assets/images/event-block-bg.svg
new file mode 100644
index 0000000..341b097
--- /dev/null
+++ b/src/assets/images/event-block-bg.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216.324" height="216.324" viewBox="0 0 216.324 216.324">
+    <path fill="#1060ff" d="M270.137 214.144l-49.566-49.566-43.62-43.62a14.8 14.8 0 0 0-20.924 0l-93.548 93.554a14.79 14.79 0 0 0 0 20.924l93.179 93.179a14.79 14.79 0 0 0 20.924 0l43.62-43.62 49.934-49.934a14.8 14.8 0 0 0 .001-20.917z" transform="translate(-58.143 -116.627)"/>
+</svg>
diff --git a/src/assets/images/group.svg b/src/assets/images/group.svg
new file mode 100644
index 0000000..ba66cbe
--- /dev/null
+++ b/src/assets/images/group.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="105.871" height="92.748" viewBox="0 0 105.871 92.748">
+    <defs>
+        <style>
+            .cls-2{fill:#1060ff;stroke:#fff;stroke-width:3.5px}
+        </style>
+    </defs>
+    <g id="Group_540" opacity="0.3" transform="translate(-126.894 -400.496)">
+        <g id="Group_92" transform="translate(143.99 402.246)">
+            <path id="Path_383" d="M179.22 450.7c-8.739 0-17.086-2.021-23.505-5.693-7.839-4.482-12.335-11.238-12.335-18.534s4.5-14.052 12.335-18.534c6.419-3.67 14.766-5.691 23.505-5.691s17.085 2.021 23.5 5.691c7.839 4.482 12.335 11.238 12.335 18.534s-4.5 14.052-12.335 18.534c-6.42 3.67-14.762 5.693-23.5 5.693zm0-31.015c-12.484 0-18.4 5.445-18.4 6.788s5.918 6.789 18.4 6.789 18.4-5.445 18.4-6.789-5.92-6.79-18.4-6.79z" class="cls-2" transform="translate(-143.38 -402.246)"/>
+        </g>
+        <g id="Group_93" transform="translate(128.673 445.406)">
+            <path id="Path_384" d="M223.192 438.249c-3.057-3.235-5.611 1.516-8.116 4.88-3.321 4.46-11.068 9.493-18.615 10.916a37.429 37.429 0 0 1-13.794 0c1.529 8.213-2.845 11.857-2.845 11.857a39.3 39.3 0 0 0 15.22 15.176c5.919 3.215 9.737 2.471 12.973 1.048s2.544-6.977 2.544-6.977 4.594-.236 6.966-3.32-.711-8.062-.711-8.062 4.979-1.185 5.437-5.705-1.643-6.625-1.643-6.625 6.825-8.7 2.584-13.188z" class="cls-2" transform="translate(-122.266 -437.17)"/>
+            <path id="Path_385" d="M173.586 454.045a37.429 37.429 0 0 1-13.794 0c-7.547-1.423-15.294-6.455-18.615-10.916-2.505-3.364-5.059-8.115-8.115-4.88-4.243 4.489 2.585 13.188 2.585 13.188s-2.1 2.1-1.643 6.625 5.438 5.705 5.438 5.705-3.083 4.98-.712 8.062 6.966 3.32 6.966 3.32-.693 5.553 2.544 6.977 7.054 2.167 12.973-1.048a39.3 39.3 0 0 0 15.22-15.176s-4.376-3.644-2.847-11.857z" class="cls-2" transform="translate(-131.673 -437.17)"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/guide-outline.svg b/src/assets/images/guide-outline.svg
new file mode 100644
index 0000000..5558a22
--- /dev/null
+++ b/src/assets/images/guide-outline.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.621" height="94.167" viewBox="0 0 73.621 94.167">
+    <defs>
+        <style>
+            .cls-2{fill:none;stroke:#fff;stroke-width:3.5px}
+        </style>
+    </defs>
+    <g id="Guide_outline" opacity="0.3" transform="translate(-324.946 -220.658)">
+        <g id="Group_95" transform="translate(326.696 237.248)">
+            <path id="Rectangle_189" d="M0 0H10.423V75.826H0z" class="cls-2" transform="translate(56.632)"/>
+            <path id="Path_386" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5px" d="M335.075 259.877l56.632 22.208v-44.416z" transform="translate(-335.075 -236.451)"/>
+        </g>
+        <ellipse id="Ellipse_13" cx="8.278" cy="7.62" class="cls-2" rx="8.278" ry="7.62" transform="translate(380.262 222.408)"/>
+    </g>
+</svg>
diff --git a/src/assets/images/lightning-outline.svg b/src/assets/images/lightning-outline.svg
new file mode 100644
index 0000000..c657333
--- /dev/null
+++ b/src/assets/images/lightning-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44.299" height="82.48" viewBox="0 0 44.299 82.48">
+    <path fill="none" stroke="#fff" stroke-width="5px" d="M331.807 398.336h32.662l-15.836 25.636 11.392 12.83-30.046 40.012 14.357-36.914-16.984-12.4z" opacity="0.3" transform="translate(-324.652 -395.836)"/>
+</svg>
diff --git a/src/assets/images/stall-outline.svg b/src/assets/images/stall-outline.svg
new file mode 100644
index 0000000..2ea6c65
--- /dev/null
+++ b/src/assets/images/stall-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66.419" height="67.359" viewBox="0 0 66.419 67.359">
+    <path fill="none" stroke="#fefefe" stroke-width="5px" d="M186.072 98.126a13.924 13.924 0 0 0-7.162-7.8 11.178 11.178 0 1 0-11.753 0 13.924 13.924 0 0 0-7.162 7.8h-12V71.065h-9.543V87.85h7.9v10.276h-12.481v33.886h61.419V98.126z" opacity="0.3" transform="translate(-131.371 -67.153)"/>
+</svg>
diff --git a/src/assets/images/union.svg b/src/assets/images/union.svg
new file mode 100644
index 0000000..22be503
--- /dev/null
+++ b/src/assets/images/union.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="65" height="78.999" viewBox="0 0 65 78.999">
+    <g fill="none" stroke-linejoin="round" opacity="0.3">
+        <path d="M-3975 79a5.005 5.005 0 0 1-5-5V28.487a5.007 5.007 0 0 1 5-5h16.5a14.8 14.8 0 0 1-2.82-8.718A14.7 14.7 0 0 1-3946.687 0a14.7 14.7 0 0 1 14.63 14.768 14.794 14.794 0 0 1-2.82 8.718H-3920a5.007 5.007 0 0 1 5 5v15.468a10.994 10.994 0 0 0-6.808-2.27c-5.5 0-9.973 3.783-9.973 8.432s4.474 8.431 9.973 8.431a11 11 0 0 0 6.808-2.269V74a5.005 5.005 0 0 1-5 5z" transform="translate(3980)"/>
+        <path fill="#fff" d="M-3920.003 73.999l.003-.003V63.45c-.597.065-1.2.098-1.808.098-3.84 0-7.49-1.298-10.277-3.654-1.436-1.214-2.574-2.647-3.382-4.259-.872-1.74-1.315-3.598-1.315-5.519 0-1.921.443-3.778 1.315-5.519.808-1.612 1.945-3.045 3.381-4.259 2.787-2.356 6.437-3.654 10.278-3.654.607 0 1.21.033 1.808.097V28.49l-.004-.004h-14.873c-1.88 0-3.6-1.054-4.454-2.729-.854-1.675-.697-3.687.407-5.208 1.222-1.683 1.867-3.682 1.867-5.781 0-5.386-4.32-9.768-9.63-9.768-5.31 0-9.629 4.382-9.629 9.768 0 2.1.646 4.098 1.867 5.782 1.104 1.521 1.261 3.533.407 5.207-.854 1.675-2.574 2.729-4.454 2.729h-16.5l-.004.004v45.506l.003.003h54.994m.003 5h-55c-2.757 0-5-2.242-5-5V28.488c0-2.758 2.243-5.001 5-5.001h16.504c-1.773-2.443-2.82-5.458-2.82-8.718 0-8.157 6.55-14.768 14.63-14.768 8.08 0 14.63 6.611 14.63 14.768 0 3.26-1.048 6.275-2.821 8.718H-3920c2.756 0 5 2.243 5 5.001v15.467c-1.853-1.463-4.27-2.27-6.808-2.27-5.5 0-9.974 3.783-9.974 8.432 0 4.65 4.474 8.432 9.974 8.432 2.537 0 4.955-.807 6.808-2.27V74c0 2.757-2.244 4.999-5 4.999z" transform="translate(3980)"/>
+    </g>
+</svg>
diff --git a/src/assets/scss/agenda.scss b/src/assets/scss/agenda.scss
new file mode 100644
index 0000000..efe9cc4
--- /dev/null
+++ b/src/assets/scss/agenda.scss
@@ -0,0 +1,17 @@
+#agenda {
+    margin: 0 auto;
+    max-width: 1200px;
+
+    div.event.container {
+        display: grid;
+        grid-template-columns: min-content repeat(6, 1fr) min-content;
+        grid-template-rows: 1fr;
+        column-gap: 30px;
+
+        img.arrow {
+            margin: auto;
+            width: auto;
+            height: calc(99/217 * 100%);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/scss/eventblock.scss b/src/assets/scss/eventblock.scss
new file mode 100644
index 0000000..3585457
--- /dev/null
+++ b/src/assets/scss/eventblock.scss
@@ -0,0 +1,105 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap');
+
+.event.block {
+  position: relative;
+  height: 100%;
+
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 24px;
+  line-height: 1.44;
+  font-family: 'Noto Serif TC', serif;
+  font-weight: bold;
+
+  .background {
+    width: 100%;
+    height: auto;
+  }
+
+  .inner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: .75em;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+    text-decoration: none;
+    color: white;
+
+    span {
+      white-space: pre;
+      z-index: 1;
+    }
+  
+    i.icon {
+      position: absolute;
+      z-index: 0;
+      scale: 0.75;
+  
+      &::before {
+        width: 100%;
+        height: 100%;
+        display: block;
+        content: '';
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+  
+      // different size for each icon
+      &.union {
+        width: 65px;
+        height: 79px;
+  
+        &::before {
+          background-image: url('../assets/images/union.svg');
+        }
+      }
+  
+      &.stall-outline {
+        width: 61px;
+        height: 62px;
+  
+        &::before {
+          background-image: url('../assets/images/stall-outline.svg');
+        }
+      }
+  
+      &.group {
+        width: 100px;
+        height: 85px;
+  
+        &::before {
+          background-image: url('../assets/images/group.svg');
+        }
+      }
+  
+      &.lightning-outline {
+        margin-top: 10px;
+        width: 37px;
+        height: 78px;
+  
+        &::before {
+          background-image: url('../assets/images/lightning-outline.svg');
+        }
+      }
+  
+      &.guide-outline {
+        margin-right: 40px;
+        width: 74px;
+        height: 95px;
+  
+        &::before {
+          background-image: url('../assets/images/guide-outline.svg');
+        }
+      }
+    }
+  }
+
+}
diff --git a/src/components/EventBlock.vue b/src/components/EventBlock.vue
new file mode 100644
index 0000000..f4dcfa1
--- /dev/null
+++ b/src/components/EventBlock.vue
@@ -0,0 +1,27 @@
+<template>
+    <a href="" class="event block">
+        <img class="background" src="../assets/images/event-block-bg.svg">
+        <div class="inner">
+            <i v-if="icon" :class="icon" class="icon" />
+            <span>{{ newlineText }}</span>
+        </div>
+    </a>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({
+})
+export default class EventBlock extends Vue {
+    @Prop({ default: '' }) private text!: string;
+    @Prop({ default: '' }) private icon!: string;
+
+    get newlineText () {
+        return this.text.replace('\\n', '\n');
+    }
+}
+</script>
+<style lang="scss">
+@import '@/assets/scss/eventblock';
+</style>
\ No newline at end of file
diff --git a/src/pages/Agenda.vue b/src/pages/Agenda.vue
index cb40fb6..bd2cc0e 100644
--- a/src/pages/Agenda.vue
+++ b/src/pages/Agenda.vue
@@ -1,11 +1,30 @@
 <template>
+  <div id="agenda">
+    <div class="event container">
+      <img class="arrow" src="@/assets/images/arrow-left.svg">
+      <EventBlock icon="union" text="大地遊戲"/>
+      <EventBlock icon="stall-outline" text="社群攤位"/>
+      <EventBlock icon="group" text="天使計劃"/>
+      <EventBlock icon="lightning-outline" text="Lightning\nTalk" style="font-size: 20px"/>
+      <EventBlock icon="guide-outline" text="導遊團"/>
+      <EventBlock text="開放式\n議程"/>
+      <img class="arrow" src="@/assets/images/arrow-right.svg">
+    </div>
+  </div>
 </template>
-<script>
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script lang="ts">
+import { Watch, Component, Prop, Vue } from 'vue-property-decorator';
 
+import EventBlock from '../components/EventBlock.vue';
 @Component({
+  components: {
+    EventBlock
+  }
 })
 export default class Agenda extends Vue {
 
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="scss">
+@import '@/assets/scss/agenda';
+</style>
\ No newline at end of file