介绍

src/App.vue

@@ -10,9 +10,10 @@ export default {
 
 <style lang="less">
 @import url('./assets/reset.less');
-
+html, body, #app {
-body {
   height: 100%;
+}
+body {
   background-color: #000;
   color: #FFF;
   font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
@@ -30,4 +31,18 @@ body {
     }
   }
 }
+.text-wrapper {
+  line-height: 25px;
+  padding-top: 35%;
+  opacity: 1;
+  transition: all .5s;
+  &.hide {
+    opacity: 0;
+    font-size: 20px;
+    line-height: 30px;
+  }
+}
+.center {
+  text-align: center;
+}
 </style>

src/main.js

@@ -9,7 +9,7 @@ import axios from 'axios'
 const service = axios.create({
   timeout: 10000
 })
-
+service.interceptors.response.use(response => response.data.data)
 createApp(App)
   .use(router)
   .use(store)

src/router.js

@@ -1,9 +1,11 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Guide from '@/views/Guide.vue'
+import Introduce from '@/views/Introduce.vue'
 
 const routes = [
   { path: '/', name: 'Guide', component: Guide },
+  { path: '/introduce', name: 'Introduce', component: Introduce },
 ]
 
 export default createRouter({

src/views/Guide.vue

@@ -1,14 +1,14 @@
 <template>
-  <div>
+<div>
-    <div class="text-wrapper" :class="{hide: hideText}">
+  <div class="text-wrapper center" :class="{hide: hideText}">
-      <div class="text" v-for="(item,index) in guideText[guideIndex]" :key="index" v-text="item"></div>
+    <div class="text" v-for="(item,index) in guideText[guideIndex]" :key="index" v-text="item"></div>
-    </div>
-    <div class="btn-wrapper">
-      <button class="btn" @click="nextStep(-1)" v-if="guideIndex > 1" style="margin-right: 45px">上一步</button>
-      <button class="btn btn-primary" @click="nextStep(1)" v-text="btnText"></button>
-      <div class="tip" v-show="guideIndex > 0">准备好后，点击"下一步"</div>
-    </div>
   </div>
+  <div class="btn-wrapper center">
+    <button class="btn" @click="nextStep(-1)" v-if="guideIndex > 1" style="margin-right: 45px">上一步</button>
+    <button class="btn btn-primary" @click="nextStep(1)" v-text="btnText"></button>
+    <div class="tip" v-show="guideIndex > 0">准备好后，点击"下一步"</div>
+  </div>
+</div>
 </template>
 
 <script>
@@ -36,6 +36,10 @@ export default {
   },
   methods: {
     nextStep(step) {
+      if(this.guideIndex === this.guideText.length - 1) {
+        this.$router.push('/introduce')
+        return
+      }
       this.hideText = true
       setTimeout(() => {
         this.hideText = false
@@ -47,18 +51,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.text-wrapper {
-  text-align: center;
-  line-height: 25px;
-  margin-top: 35%;
-  opacity: 1;
-  transition: all .5s;
-  &.hide {
-    opacity: 0;
-    font-size: 20px;
-    line-height: 30px;
-  }
-}
 .btn-wrapper {
   position: absolute;
   bottom: 30%;

src/views/Introduce.vue

@@ -0,0 +1,64 @@
+<template>
+<div>
+  <div class="card-list show">
+    <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code"></div>
+  </div>
+  <div class="center tip">
+    <span @click="showIntroduce = !showIntroduce">{{ showIntroduce ? '收起介绍' : '查看介绍' }}</span>
+  </div>
+  <div class="introduce" v-show="showIntroduce">
+    <p>彩虹卡全部都是智慧和肯定的话语。</p>
+    <p>彩虹卡是你人生的灵性陪伴者。它们提供你思想、 希望、安慰、确定和爱的想法。</p>
+    <p>这些卡片由七种不同颜色的卡片所组成，每种颜色卡片有35个不同的想法。</p>
+    <p>彩虹卡总共提供了 245则像彩虹般充满智慧的话语。 当你抽卡时最好闭上眼睛，并以左手来抽卡。</p>
+    <p class="center">********</p>
+    <p>你所抽到的每张卡片都反映出你当下最关心的问题，你的心情以及你内在的需要。</p>
+    <p class="center">********</p>
+    <div class="card-list">
+      <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code">
+        {{ cardType.name }}（{{ cardType.chakra }}）{{ cardType.describe }}
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showIntroduce: false,
+      cardTypes: []
+    }
+  },
+  async created() {
+    this.cardTypes = await this.$http.get('/api/rainbow_card/card/types')
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tip {
+  color: #858585;
+  font-size: 14px;
+  margin-top: 70px;
+}
+.introduce {
+  padding: 20px;
+  line-height: 26px;
+}
+.card-list {
+  font-size: 14px;
+  color: #FFF;
+  text-shadow: 1px 1px 6px black;
+  &.show {
+    margin: auto;
+    width: 75%;
+    border-radius: 30px;
+  }
+  > .card-item {
+    padding: 0 5px;
+    min-height: 26px;
+  }
+}
+</style>