|
@@ -30,6 +30,9 @@
|
|
|
<button class="btn-finish" @click="$emit('next')">
|
|
<button class="btn-finish" @click="$emit('next')">
|
|
|
<span>🎁</span> 立即领取
|
|
<span>🎁</span> 立即领取
|
|
|
</button>
|
|
</button>
|
|
|
|
|
+ <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
|
|
|
|
|
+ 上一步
|
|
|
|
|
+ </button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -39,6 +42,7 @@ export default {
|
|
|
name: 'RewardGuide',
|
|
name: 'RewardGuide',
|
|
|
props: {
|
|
props: {
|
|
|
isLast: { type: Boolean, default: false },
|
|
isLast: { type: Boolean, default: false },
|
|
|
|
|
+ isFirst: { type: Boolean, default: false },
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
@@ -166,6 +170,20 @@ export default {
|
|
|
}
|
|
}
|
|
|
.btn-finish:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(39,174,96,0.5); }
|
|
.btn-finish:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(39,174,96,0.5); }
|
|
|
.btn-finish:active { transform: translateY(0); }
|
|
.btn-finish:active { transform: translateY(0); }
|
|
|
|
|
+.btn-prev {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #86909c;
|
|
|
|
|
+ background: #f7f9fc;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: all 0.25s;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+.btn-prev:hover { color: #4e5969; background: #eef1f6; }
|
|
|
@keyframes btnShine {
|
|
@keyframes btnShine {
|
|
|
0%, 100% { box-shadow: 0 6px 20px rgba(39,174,96,0.35); }
|
|
0%, 100% { box-shadow: 0 6px 20px rgba(39,174,96,0.35); }
|
|
|
50% { box-shadow: 0 6px 28px rgba(39,174,96,0.6); }
|
|
50% { box-shadow: 0 6px 28px rgba(39,174,96,0.6); }
|