|
|
@@ -0,0 +1,238 @@
|
|
|
+<template>
|
|
|
+ <div class="step2v2-card">
|
|
|
+ <!-- 顶部插画 -->
|
|
|
+ <div
|
|
|
+ class="guide-illustration"
|
|
|
+ style="background: linear-gradient(135deg, #2C6FBF 0%, #5B9FE6 50%, #87CEEB 100%);"
|
|
|
+ >
|
|
|
+ <div class="illus-bubble bubble-1">✅</div>
|
|
|
+ <div class="illus-bubble bubble-2">📅</div>
|
|
|
+ <div class="illus-center">🏷️</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 信息区域 -->
|
|
|
+ <div class="guide-body">
|
|
|
+ <div class="step2-badge">Step 2</div>
|
|
|
+ <h2 class="step2-title">每日签到，积分到手</h2>
|
|
|
+ <p class="step2-desc">
|
|
|
+ 当月工作日满签可领取额外奖励大礼包
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- 签到日历示意 -->
|
|
|
+ <div class="checkin-preview">
|
|
|
+ <div class="preview-header">
|
|
|
+ <span class="preview-weekday" v-for="d in weekDays" :key="d">{{ d }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="preview-row">
|
|
|
+ <div
|
|
|
+ v-for="(day, idx) in checkinDays"
|
|
|
+ :key="idx"
|
|
|
+ class="preview-day"
|
|
|
+ :class="{
|
|
|
+ checked: day.checked,
|
|
|
+ today: day.isToday,
|
|
|
+ reward: day.isReward,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <span class="day-num">{{ day.num }}</span>
|
|
|
+ <span v-if="day.isReward" class="day-bonus">+{{ day.bonus }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="step2-tip">
|
|
|
+ <span class="tip-icon">💡</span>
|
|
|
+ <span>连续签到 7 天可领取额外积分大礼包</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="guide-footer">
|
|
|
+ <button class="btn-primary" @click="handleGoSignIn">
|
|
|
+ <span>✅</span> 去签到
|
|
|
+ </button>
|
|
|
+ <button v-if="!isFirst" class="btn-prev" @click="$emit('prev')">
|
|
|
+ 上一步
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'SignInGuideV2',
|
|
|
+
|
|
|
+ props: {
|
|
|
+ isLast: { type: Boolean, default: false },
|
|
|
+ isFirst: { type: Boolean, default: false },
|
|
|
+ isReplay: { type: Boolean, default: false },
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ weekDays: ['一', '二', '三', '四', '五', '六', '日'],
|
|
|
+ checkinDays: [
|
|
|
+ { num: 1, checked: true, isToday: false, isReward: false, bonus: 0 },
|
|
|
+ { num: 2, checked: true, isToday: false, isReward: false, bonus: 0 },
|
|
|
+ { num: 3, checked: true, isToday: false, isReward: false, bonus: 0 },
|
|
|
+ { num: 4, checked: true, isToday: true, isReward: true, bonus: 10 },
|
|
|
+ { num: 5, checked: false, isToday: false, isReward: false, bonus: 0 },
|
|
|
+ { num: 6, checked: false, isToday: false, isReward: false, bonus: 0 },
|
|
|
+ { num: 7, checked: false, isToday: false, isReward: true, bonus: 30 },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleGoSignIn() {
|
|
|
+ this.$router.push('/home/signIn')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$emit('next')
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+@import './guide-common.css';
|
|
|
+
|
|
|
+/* Step2V2 卡片 — 上下布局，宽度与其他步骤统一 */
|
|
|
+.step2v2-card {
|
|
|
+ width: 500px;
|
|
|
+ max-width: 90vw;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
|
|
+ animation: cardFloat 0.5s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+/* ---- 信息区域 ---- */
|
|
|
+.step2-info {
|
|
|
+ padding: 28px 28px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.step2-badge {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #2C6FBF;
|
|
|
+ background: #eaf2ff;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.step2-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1d2129;
|
|
|
+ margin: 0 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.step2-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: #86909c;
|
|
|
+ margin: 0 0 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.step2-desc strong {
|
|
|
+ color: #2C6FBF;
|
|
|
+}
|
|
|
+
|
|
|
+/* ---- 签到日历预览 ---- */
|
|
|
+.checkin-preview {
|
|
|
+ background: #f7f9fc;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 12px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-header {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-weekday {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #86909c;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-day {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 2px;
|
|
|
+ padding: 6px 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.25s;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-day.checked {
|
|
|
+ background: #eaf2ff;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-day.today {
|
|
|
+ background: #2C6FBF;
|
|
|
+ box-shadow: 0 2px 8px rgba(44, 111, 191, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.preview-day.today .day-num {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-day.reward:not(.checked) {
|
|
|
+ background: linear-gradient(135deg, #fff5e6, #fff0d6);
|
|
|
+ border: 1px dashed #f5a623;
|
|
|
+}
|
|
|
+
|
|
|
+.day-num {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #4e5969;
|
|
|
+}
|
|
|
+
|
|
|
+.day-bonus {
|
|
|
+ font-size: 9px;
|
|
|
+ color: #f5a623;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/* ---- 提示条 ---- */
|
|
|
+.step2-tip {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ background: linear-gradient(135deg, #fff9e6, #fff3cc);
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b8860b;
|
|
|
+}
|
|
|
+
|
|
|
+.tip-icon {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* ---- 底部按钮 — 复用 guide-common.css ---- */
|
|
|
+.btn-primary {
|
|
|
+ background: linear-gradient(135deg, #2C6FBF, #5B9FE6);
|
|
|
+ box-shadow: 0 4px 14px rgba(44, 111, 191, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-primary:hover {
|
|
|
+ box-shadow: 0 6px 18px rgba(44, 111, 191, 0.45);
|
|
|
+}
|
|
|
+</style>
|
longyang