sookie/rainbow-card-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

心灵问句

Browse Source
This commit is contained in:
灌糖包子 2021-12-12 22:11:32 +08:00
parent 77b155f58b
commit 20a7c55512
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

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

33
src/views/Introduce.vue
View File

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