Chartlines

src/App.vue

@@ -1,11 +1,42 @@
 <template>
+  <div class="flex justify-evenly">
+    <Textbox
+      set-color="#ffc111"
+      content-text="跳島趣行程"
+    />
+  </div>
+  <div class="flex justify-center">
+    <Imgbox
+      introduction-link=""
+      img-source="https://firebasestorage.googleapis.com/v0/b/phelomi-bdd9a.appspot.com/o/img%2Fnews%2Fnews_sanli.jpg?alt=media&token=2d9da6d2-3903-42ff-be92-90b5d8b788b7"
+      title-text="猜猜我是誰"
+    >
+      我要顯示在slot
+    </Imgbox>
+    <Imgbox
+      introduction-link=""
+      img-source="https://firebasestorage.googleapis.com/v0/b/phelomi-bdd9a.appspot.com/o/img%2Fnews%2Fnews_sanli.jpg?alt=media&token=2d9da6d2-3903-42ff-be92-90b5d8b788b7"
+      title-text="猜猜我是誰"
+    >
+      我要顯示在slot
+    </Imgbox>
+    <Imgbox
+      introduction-link=""
+      img-source="https://firebasestorage.googleapis.com/v0/b/phelomi-bdd9a.appspot.com/o/img%2Fnews%2Fnews_sanli.jpg?alt=media&token=2d9da6d2-3903-42ff-be92-90b5d8b788b7"
+      title-text="猜猜我是誰"
+    >
+      我要顯示在slot
+    </Imgbox>
+  </div>
   <layout>
     <router-view />
   </layout>
 </template>
 
-<script>
+<script setup>
 import Layout from '@/components/Layout/index.vue';
+import Textbox from './components/TextBox.vue';
+import Imgbox from './components/ImgBox.vue';
 
 export default {
   components: { Layout },
@@ -14,3 +45,6 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+</style>

src/components/ImgBox.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="p-screen-0.95">
+    <a
+      :href="introductionLink"
+      class="block w-screen-27.54"
+    >
+      <img
+        alt=""
+        :src="imgSource"
+        class="inline-block w-screen-2754 h-screen-19.66"
+      >
+      <div class="py-0 px-screen-2.42">
+        <p
+          class="py-screen-0.4 px-0 border-b-screen-0.15 border-solid border-darkblue text-center
+           text-screen-2.08 tracking-screen-0.4 text-darkblue"
+        >
+          {{ titleText }}
+        </p>
+        <p
+          :style="contentStyle"
+          class="py-screen-0.4 px-0 text-center text-screen-1.3 tracking-03vw"
+        >
+          <slot />
+        </p>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['introductionLink', 'imgSource', 'titleText'],
+  data() {
+    return {
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/TextBox.vue

@@ -0,0 +1,48 @@
+<template>
+  <a
+    class="block w-screen-20.15vw h-screen-20.15vw border-screen-1vw
+    border-solid text-center leading-screen-18.15vw rounded-screen-3vw"
+    :style="toggleLinkType"
+    @mouseover.stop="toggle = false"
+    @mouseleave.stop="toggle = true"
+  >
+    <p
+      class="inline-block text-screen-3vw font-bold tracking-screen-0.3vw align-middle leading-none"
+      :style="toggleTextType"
+    >
+      {{ contentText }}
+    </p>
+  </a>
+</template>
+
+<script>
+export default {
+  props: ['setColor', 'contentText'],
+  data() {
+    return {
+      toggle: true,
+    };
+  },
+  computed: {
+    toggleLinkType() {
+      const vm = this;
+      if (vm.toggle) {
+        return { 'border-color': vm.setColor };
+      }
+      return { 'border-color': vm.setColor, 'background-color': vm.setColor, cursor: 'pointer' };
+    },
+    toggleTextType() {
+      const vm = this;
+      if (vm.toggle) {
+        return { color: vm.setColor };
+      }
+      return { color: 'white' };
+    },
+  },
+};
+
+</script>
+
+<style scoped>
+
+</style>

tailwind.config.js

@@ -5,7 +5,46 @@ module.exports = {
     container: {
       center: true,
     },
-    extend: {},
+    extend: {
+      width: {
+        'screen-20.15vw': '20.15vw',
+        'screen-27.54': '27.54vw',
+      },
+      height: {
+        'screen-20.15vw': '20.15vw',
+        'screen-19.66': '19.66vw',
+      },
+      padding: {
+        'screen-0.4': '0.4vw',
+        'screen-0.95': '0.95vw',
+        'screen-2.42': '2.42vw',
+      },
+      borderWidth: {
+        'screen-0.15': '0.15vw',
+        'screen-1vw': '1vw',
+      },
+      borderRadius: {
+        'screen-3vw': '3vw',
+      },
+      textColor: {
+        'darkblue': '#2f599c'
+      },
+      borderColor: {
+        'darkblue': '#2f599c'
+      },
+      lineHeight: {
+        'screen-18.15vw': '18.15vw',
+      },
+      fontSize: {
+        'screen-3vw': '3vw',
+        'screen-1.3': '1.3vw',
+        'screen-2.08': '2.08vw',
+      },
+      letterSpacing: {
+        'screen-0.3vw': '0.3vw',
+        'screen-0.4': '0.4vw',
+      },
+    },
   },
   variants: {
     extend: {},