54 lines
2.4 KiB
Plaintext
54 lines
2.4 KiB
Plaintext
<view class="container">
|
|
<view class="title-area">
|
|
<text class="app-title">塔罗 · 今日指引</text>
|
|
<text class="app-subtitle">📅 今日指引 · {{todayDate}}</text>
|
|
<text class="instruction" style="font-size: 14px; margin-top: 5px; opacity: 0.8; color: #ccc;">当你需要一个答案时</text>
|
|
</view>
|
|
|
|
<!-- 标题区域 -->
|
|
<view class="header">
|
|
<text class="app-title">🔮 神秘塔罗 🔮</text>
|
|
</view>
|
|
|
|
<!-- 1. 抽卡前的状态：如果还没抽卡 (!currentCard)，显示这个 -->
|
|
<view class="intro" wx:if="{{!currentCard}}">
|
|
<text class="instruction">请静下心来，排除杂念</text>
|
|
<text class="instruction">默念你想询问的问题...</text>
|
|
<text class="instruction" style="font-size: 12px; margin-top: 20px; color: #666;">（点击下方按钮开始洗牌）</text>
|
|
</view>
|
|
|
|
<!-- 2. 抽卡后的状态：如果抽了卡 (currentCard)，显示这个 -->
|
|
<view class="card-display" wx:if="{{currentCard}}">
|
|
<view class="flip-scene" bindtap="revealCard">
|
|
<view class="flip-card {{isRevealed ? 'flipped' : ''}}">
|
|
<!-- A. 牌背 (正面朝上时显示) -->
|
|
<view class="card-face face-back">
|
|
<image class="card-image" src="{{cardBackImage}}" mode="widthFix"></image>
|
|
<text class="hint-text">👆 点击揭晓</text>
|
|
</view>
|
|
|
|
<!-- B. 牌面 (翻转后显示) -->
|
|
<view class="card-face face-front">
|
|
<image class="card-image {{currentCard.isReversed ? 'reversed' : ''}}" src="{{currentCard.image}}" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 此处文字区域只在翻牌后显示，加一个淡入动画 -->
|
|
<view class="card-info {{isRevealed ? 'visible' : ''}}">
|
|
<text class="card-name">{{currentCard.name}} {{currentCard.isReversed ? '(逆位)' : ''}}</text>
|
|
<text class="card-meaning">{{explanation}}</text>
|
|
|
|
<!-- 星座入口占位 -->
|
|
<view class="horoscope-entry" bindtap="goToHoroscope">
|
|
<text>👉 查看今日星座运势</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 3. 抽卡按钮：点击触发 drawCard -->
|
|
<button class="draw-btn" bindtap="drawCard" type="primary">
|
|
{{currentCard ? '重抽一张' : '✨ 抽一张塔罗牌'}}
|
|
</button>
|
|
|
|
</view> |