From 49fb3065c7b62b3ac531b3b623e44719aa79b67b Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Thu, 1 Apr 2021 01:51:38 +0800
Subject: [PATCH] [Component] Block Title

---
 src/assets/images/title-block.svg |  3 +++
 src/assets/scss/blocktitle.scss   | 37 +++++++++++++++++++++++++++++++
 src/components/BlockTitle.vue     | 17 ++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 src/assets/images/title-block.svg
 create mode 100644 src/assets/scss/blocktitle.scss
 create mode 100644 src/components/BlockTitle.vue

diff --git a/src/assets/images/title-block.svg b/src/assets/images/title-block.svg
new file mode 100644
index 0000000..8c77521
--- /dev/null
+++ b/src/assets/images/title-block.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30.252" height="30.252" viewBox="0 0 30.252 30.252">
+    <path fill="#1060ff" d="M87.79 130.265l-6.932-6.932-6.1-6.1a2.07 2.07 0 0 0-2.926 0L58.75 130.316a2.068 2.068 0 0 0 0 2.926l13.031 13.031a2.068 2.068 0 0 0 2.926 0l6.1-6.1 6.983-6.983a2.069 2.069 0 0 0 0-2.925z" transform="translate(-58.143 -116.627)"/>
+</svg>
diff --git a/src/assets/scss/blocktitle.scss b/src/assets/scss/blocktitle.scss
new file mode 100644
index 0000000..b19823f
--- /dev/null
+++ b/src/assets/scss/blocktitle.scss
@@ -0,0 +1,37 @@
+$fontFamily: "Noto Serif CJK TC -Black";
+
+div.block.title {
+    display: flex;
+    justify-content: center;
+
+    font-size: 26px;
+    font-family: $fontFamily;
+    font-weight: bold;
+
+    line-height: 1.44;
+    
+    margin: 36px 0;
+    
+    span.text {
+        display: contents;
+
+        &::before, &::after {
+            display: inline-block;
+            content: '';
+            width: 1.44em;
+            height: 1.44em;
+            margin: auto;
+            vertical-align: middle;
+            background-image: url('../assets/images/title-block.svg');
+            background-size: contain;
+        }
+    
+        &::before {
+            margin-right: 18px;
+        }
+    
+        &::after {
+            margin-left: 18px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/BlockTitle.vue b/src/components/BlockTitle.vue
new file mode 100644
index 0000000..e81a78b
--- /dev/null
+++ b/src/components/BlockTitle.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="block title">
+    <span class="text">{{ text }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class BlockTitle extends Vue {
+  @Prop({ default: '' }) private text!: string;
+}
+</script>
+<style lang="scss">
+@import '@/assets/scss/blocktitle';
+</style>
\ No newline at end of file