心灵问句

src/App.vue

@@ -29,6 +29,10 @@ body {
       color: #FFF;
       background-color: #1aac19;
     }
+    &.btn-error {
+      color: #FFF;
+      background-color: #e64240;
+    }
   }
 }
 .text-wrapper {

src/views/Introduce.vue

@@ -9,14 +9,20 @@
     <div class="card-list card-show">
       <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code"></div>
     </div>
-    <div class="btn-wrapper">
+    <div class="btn-wrapper" style="position: absolute;top: 154px;width: 100%;">
       <button class="btn btn-primary" @click="showCard" >查收今天卡片</button>
     </div>
   </template>
-  <div class="center tip">
+  <div class="btn-wrapper" :style="{visibility: isShowCard ? 'visible' : 'hidden'}" style="margin: 20px 0 50px 0">
+    <button class="btn btn-error">保存</button>
+    <button class="btn" style="margin: 0 30px">树洞</button>
+    <button class="btn btn-primary" @click="nextQuestion">心灵问句({{ questionIndex + 1 }}/{{ questions.length }})</button>
+  </div>
+  <div class="question center" v-if="questionIndex !== -1">{{ questions[questionIndex] }}</div>
+  <div class="center tip" v-show="questionIndex === -1">
     <span @click="showIntroduce = !showIntroduce">{{ showIntroduce ? '收起介绍' : '查看介绍' }}</span>
   </div>
-  <div class="introduce" v-show="showIntroduce">
+  <div class="introduce" v-show="showIntroduce && questionIndex === -1">
     <p>彩虹卡全部都是智慧和肯定的话语。</p>
     <p>彩虹卡是你人生的灵性陪伴者。它们提供你思想、 希望、安慰、确定和爱的想法。</p>
     <p>这些卡片由七种不同颜色的卡片所组成，每种颜色卡片有35个不同的想法。</p>
@@ -46,7 +52,8 @@ export default {
         '给你带来什么样的新思考？',
         '你将采取怎样的行动？'
       ],
-      currentCard: null
+      questionIndex: -1, // 展示的心灵问句
+      currentCard: null // 当前卡片信息
     }
   },
   async created() {
@@ -61,6 +68,13 @@ export default {
         }
       })
       this.isShowCard = true
+    },
+    nextQuestion() {
+      if(this.questionIndex === this.questions.length - 1) {
+        this.questionIndex = -1
+      } else {
+        this.questionIndex++
+      }
     }
   }
 }
@@ -73,7 +87,6 @@ export default {
 .tip {
   color: #858585;
   font-size: 14px;
-  margin-top: 70px;
 }
 .introduce {
   padding: 20px;
@@ -99,17 +112,15 @@ export default {
   > .card-content {
     position: absolute;
     width: 100%;
-    padding: 0 5px;
+    padding: 0 10px;
     top: 50%;
     transform: translateY(-50%);
     box-sizing: border-box;
     text-shadow: 1px 1px #000;
-    text-align: center;
+    line-height: 22px;
   }
 }
-.btn-wrapper {
-  position: absolute;
-  top: 154px;
-  width: 100%;
+.question {
+  margin-top: 50px;
 }
 </style>