修改路线图, deck内容和背景分开

public/index.html

@@ -20,6 +20,10 @@
             font-family: zitic;
             src: url('/assets/fonts/zitic.ttf');
         }
+        @font-face {
+            font-family: zitic-r;
+            src: url('/assets/fonts/zitic-regular.ttf');
+        }
         html *
         {
             font-family: zitic,serif;

src/components/roadmap/InfoPanel.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="info-panel" :class="{'mobile': mobile}">
-    <img :src="img" alt="step" />
+    <road-deck :deck-data="currentDeckData"></road-deck>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule, DeviceType } from '@/store/modules/app'
+import RoadDeck from '@/components/roadmap/RoadDeck.vue'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -16,18 +17,93 @@ declare module 'vue/types/vue' {
 @Component({
   name: 'InfoPanel',
   components: {
+    RoadDeck
   },
   props: ['dataIndex']
 })
 export default class InfoPanel extends Vue {
+  private currentIdx = 1
   private img = require('@/assets/202202/roadmap/step1.png')
+
+  private infos = [
+    {
+      id: 1,
+      texts: [
+        {
+          title: 'Jul. 2021',
+          desc: ['Game development kick off']
+        }
+      ]
+    },
+    {
+      id: 2,
+      texts: [
+        {
+          title: 'Nov. 2021',
+          desc: ['Complete Alpha Test']
+        }
+      ]
+    },
+    {
+      id: 3,
+      texts: [
+        {
+          title: 'Jan. 2022',
+          desc: ['Angel round financing']
+        },
+        {
+          title: 'Feb. 2022',
+          desc: ['Private round financing', 'Official website & whitepaper']
+        },
+        {
+          title: 'Mar. 2022',
+          desc: ['IGO', 'Beta test']
+        }
+      ]
+    },
+    {
+      id: 4,
+      texts: [
+        {
+          title: 'Apr. 2022',
+          desc: ['IDO', 'Official publication, including:', '- Free-to-play ', '- PVP', '- Chatting room ', '- NFT can be leveled up to Lv.10']
+        },
+        {
+          title: 'May. 2022',
+          desc: ['New function release:', 'PVE', 'PVP Ranking NFT', 'can be leveled up to Lv.15', 'Mobile version on App Store and Google Play']
+        }
+      ]
+    },
+    {
+      id: 5,
+      texts: [
+        {
+          title: 'Jan. 2022',
+          desc: ['Streaming to 3rd party platform']
+        },
+        {
+          title: 'Jul. 2022',
+          desc: ['Endorsement from famous esport player']
+        },
+        {
+          title: 'Aug. 2022',
+          desc: ['3D version game available']
+        }
+      ]
+    }
+  ]
+
   get mobile() {
     return AppModule.device === DeviceType.Mobile
   }
 
   @Watch('dataIndex')
   private indexChange() {
-    this.img = require(`@/assets/202202/roadmap/step${this.dataIndex || 1}.png`)
+    this.currentIdx = this.dataIndex!
+  }
+
+  get currentDeckData() {
+    return this.infos[(this.dataIndex || 1) - 1]
   }
 }
 </script>

src/components/roadmap/RoadDeck.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="road-deck" :class="{'mobile': mobile}" :style="cstyle">
+    <div class="content">
+      <div class="one-line" v-for="d in deckData.texts" :key="d.title">
+        <div class="title">
+          {{d.title}}
+        </div>
+        <div class="desc" v-for="s in d.desc" :key="s">
+          {{s}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+export interface IDeckData{
+  id: number
+  texts: [
+    {
+      title: string
+      desc: [string]
+    }
+  ]
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    deckData?: IDeckData
+  }
+}
+
+@Component({
+  name: 'RoadDeck',
+  components: {
+  },
+  props: ['deckData']
+})
+export default class RoadDeck extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+
+  get cstyle() {
+    const bgImg = require(`@/assets/202202/roadmap/step${this.deckData!.id}.png`)
+    return {
+      'background-image': `url(${bgImg})`
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .road-deck{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    position: relative;
+    .content{
+      position: absolute;
+      width: 280px;
+      height: 280px;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .one-line{
+        &:not(:first-child) {
+          margin-top: 10px;
+        }
+        .title{
+          color: #DA7C00;
+          font-size: 24px;
+        }
+        .desc{
+          color: #5A5A5A;
+          font-family: zitic-r,serif;
+          font-size: 14px;
+        }
+      }
+    }
+
+  }
+  .road-deck.mobile{
+    .content{
+      width: 60vw;
+      height: 60vw;
+      .one-line{
+        &:not(:first-child) {
+          margin-top: 4vw;
+        }
+        .title{
+          color: #DA7C00;
+          font-size: 4.3vw;
+        }
+        .desc{
+          color: #5A5A5A;
+          font-size: 3vw;
+        }
+      }
+    }
+  }
+</style>