feat: 新手指引余下步骤追加

src/App.vue

@@ -7,6 +7,8 @@
       </transition>
       <AppBackTop></AppBackTop>
     </div>
+    <!-- 新手指引（挂载在根组件，不随路由切换销毁） -->
+    <NewUserGuide ref="guide" @finish="onGuideFinish" />
     <el-dialog  width="50%" title="系统规则" :visible.sync="dialogVisible">
       <!-- <div>座机：010-82783688转122</div>
       <div>邮箱：guowl@dgtis.com</div> -->
@@ -17,12 +19,14 @@
 <script>
 import AppHeader from '@/components/AppHeader.vue';
 import AppBackTop from '@/components/AppBackTop.vue';
-import { lockStatus } from "@/api/allApi";
+import NewUserGuide from '@/components/NewUserGuide/index.vue';
+import { lockStatus, useInfo } from "@/api/allApi";
 export default {
   name: 'app',
   components: {
     AppHeader,
-    AppBackTop
+    AppBackTop,
+    NewUserGuide
   },
   data() {
     return {
@@ -35,6 +39,16 @@ export default {
   },
   created(){
     this.$store.dispatch('GetUserInfo');
+
+
+    // 延迟显示新手指引
+    this.$nextTick(() => {
+      setTimeout(() => {
+        if (this.$refs.guide) {
+          this.$refs.guide.show();
+        }
+      }, 800);
+    });
     this.$nextTick(() => {
       // 1.禁用右键菜单
       document.oncontextmenu = new Function("event.returnValue=false");
@@ -58,6 +72,9 @@ export default {
     });
   },
   methods:{
+    onGuideFinish() {
+      console.log('新手指引已完成');
+    },
     fatherMethod() {
       lockStatus().then(response=>{
         this.htmlData = response.data.errmsg; 

src/components/NewUserGuide/index.vue

@@ -34,12 +34,25 @@
 <script>
 import WelcomeGuide from './steps/WelcomeGuide.vue'
 import SignInGuide from './steps/SignInGuide.vue'
+import PointsMallGuide from './steps/PointsMallGuide.vue'
+import ActivityGuide from './steps/ActivityGuide.vue'
+import EarnPointsGuide from './steps/EarnPointsGuide.vue'
+import ProfileGuide from './steps/ProfileGuide.vue'
+import RewardGuide from './steps/RewardGuide.vue'
 
 /**
  * 步骤组件注册表
  * 新增步骤只需：1. 创建组件文件  2. 在此数组末尾追加  3. 组件需接收 isLast prop 并 emit('next')
  */
-const stepComponents = [WelcomeGuide, SignInGuide]
+const stepComponents = [
+  WelcomeGuide,      // Step 1 — 欢迎来到誉商城
+  SignInGuide,       // Step 2 — 每日签到
+  PointsMallGuide,   // Step 3 — 积分商城
+  ActivityGuide,     // Step 4 — 参与活动
+  EarnPointsGuide,   // Step 5 — 完成任务
+  ProfileGuide,      // Step 6 — 个人中心
+  RewardGuide,       // Step 7 — 引导完成领奖
+]
 
 export default {
   name: 'NewUserGuide',

src/components/NewUserGuide/steps/ActivityGuide.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="guide-card">
+    <div class="guide-illustration" style="background: linear-gradient(135deg, #6a11cb 0%, #2575fc 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="guide-badge">Step 4</div>
+      <h2 class="guide-title">参与活动，赢取大奖</h2>
+      <p class="guide-desc">节日活动、答题游戏、转盘抽奖...<br />参与活动可解锁<strong>限时积分奖励</strong>！</p>
+
+      <!-- 活动类型展示 -->
+      <div class="activity-list">
+        <div class="activity-item" v-for="item in activities" :key="item.id">
+          <span class="activity-icon">{{ item.icon }}</span>
+          <div class="activity-info">
+            <div class="activity-name">{{ item.name }}</div>
+            <div class="activity-reward">+{{ item.reward }} 积分</div>
+          </div>
+          <span class="activity-tag">{{ item.tag }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-primary" @click="handleGoActivity">
+        <span>🎯</span> 了解活动
+      </button>
+      <button class="btn-secondary" @click="$emit('next')">
+        {{ isLast ? '完成新手教程 ✓' : '下一步' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ActivityGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      activities: [
+        { id: 1, icon: '🎮', name: '节日答题', reward: 50, tag: '限时' },
+        { id: 2, icon: '🎡', name: '转盘抽奖', reward: 100, tag: '热门' },
+        { id: 3, icon: '📝', name: '节日签到', reward: 30, tag: '每日' },
+      ],
+    }
+  },
+  methods: {
+    handleGoActivity() {
+      this.$router.push('/home/festiveEvents')
+      setTimeout(() => this.$emit('next'), 500)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.guide-card {
+  width: 440px;
+  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;
+}
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.guide-illustration {
+  position: relative;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center { font-size: 56px; z-index: 2; }
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
+.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.guide-body { padding: 24px 28px 16px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6a11cb;
+  background: #f3eeff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+.guide-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 8px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #86909c;
+  margin: 0 0 16px;
+}
+.guide-desc strong { color: #6a11cb; }
+.activity-list { display: flex; flex-direction: column; gap: 8px; }
+.activity-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: #f7f9fc;
+  border-radius: 10px;
+  transition: all 0.25s;
+}
+.activity-item:hover { background: #f3eeff; transform: translateX(4px); }
+.activity-icon { font-size: 22px; }
+.activity-info { flex: 1; }
+.activity-name { font-size: 13px; font-weight: 600; color: #1d2129; }
+.activity-reward { font-size: 12px; color: #6a11cb; font-weight: 700; margin-top: 2px; }
+.activity-tag {
+  padding: 2px 8px;
+  font-size: 11px;
+  color: #fff;
+  background: linear-gradient(135deg, #6a11cb, #2575fc);
+  border-radius: 10px;
+}
+.guide-footer {
+  padding: 16px 28px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #6a11cb, #2575fc);
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 14px rgba(106,17,203,0.3);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106,17,203,0.45); }
+.btn-secondary {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2C6FBF;
+  background: #fff;
+  border: 1.5px solid #2C6FBF;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-secondary:hover { background: #eaf2ff; }
+</style>

src/components/NewUserGuide/steps/EarnPointsGuide.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="guide-card">
+    <div class="guide-illustration" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 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="guide-badge">Step 5</div>
+      <h2 class="guide-title">完成任务，积分翻倍</h2>
+      <p class="guide-desc">多种积分获取渠道，轻松累积积分！<br />完成不同任务获取丰厚积分奖励。</p>
+
+      <!-- 积分渠道 -->
+      <div class="channel-grid">
+        <div class="channel-item" v-for="item in channels" :key="item.id">
+          <span class="channel-icon">{{ item.icon }}</span>
+          <span class="channel-name">{{ item.name }}</span>
+          <span class="channel-points">+{{ item.points }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-primary" @click="handleGoEarn">
+        <span>💰</span> 去获取积分
+      </button>
+      <button class="btn-secondary" @click="$emit('next')">
+        {{ isLast ? '完成新手教程 ✓' : '下一步' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EarnPointsGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      channels: [
+        { id: 1, icon: '✅', name: '每日签到', points: 10 },
+        { id: 2, icon: '🎓', name: '培训学习', points: 50 },
+        { id: 3, icon: '🏆', name: '员工表彰', points: 200 },
+        { id: 4, icon: '📊', name: '完成指标', points: 100 },
+        { id: 5, icon: '🎉', name: '参与活动', points: 80 },
+        { id: 6, icon: '👥', name: '投票调研', points: 20 },
+      ],
+    }
+  },
+  methods: {
+    handleGoEarn() {
+      this.$router.push('/home/earnPoints')
+      setTimeout(() => this.$emit('next'), 500)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.guide-card {
+  width: 440px;
+  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;
+}
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.guide-illustration {
+  position: relative;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center { font-size: 56px; z-index: 2; }
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
+.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.guide-body { padding: 24px 28px 16px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #11998e;
+  background: #e8fdf5;
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+.guide-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 8px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #86909c;
+  margin: 0 0 16px;
+}
+.channel-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.channel-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 6px;
+  background: #f7f9fc;
+  border-radius: 10px;
+  transition: all 0.25s;
+}
+.channel-item:hover { background: #e8fdf5; transform: translateY(-2px); }
+.channel-icon { font-size: 20px; }
+.channel-name { font-size: 11px; color: #4e5969; font-weight: 500; }
+.channel-points { font-size: 12px; color: #11998e; font-weight: 700; }
+.guide-footer {
+  padding: 16px 28px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #11998e, #38ef7d);
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 14px rgba(17,153,142,0.3);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17,153,142,0.45); }
+.btn-secondary {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2C6FBF;
+  background: #fff;
+  border: 1.5px solid #2C6FBF;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-secondary:hover { background: #eaf2ff; }
+</style>

src/components/NewUserGuide/steps/PointsMallGuide.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="guide-card">
+    <div class="guide-illustration" style="background: linear-gradient(135deg, #f76b1c 0%, #fad961 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="guide-badge">Step 3</div>
+      <h2 class="guide-title">积分商城，好礼等你</h2>
+      <p class="guide-desc">用积分兑换心仪好礼！<br />从零食饮品到数码好物，应有尽有 🎉</p>
+
+      <!-- 热门商品示意 -->
+      <div class="goods-preview">
+        <div class="goods-item" v-for="item in goods" :key="item.id">
+          <div class="goods-emoji">{{ item.emoji }}</div>
+          <div class="goods-name">{{ item.name }}</div>
+          <div class="goods-points">{{ item.points }} 积分</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-primary" @click="handleGoMall">
+        <span>🛍️</span> 去看看
+      </button>
+      <button class="btn-secondary" @click="$emit('next')">
+        {{ isLast ? '完成新手教程 ✓' : '下一步' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PointsMallGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      goods: [
+        { id: 1, emoji: '☕', name: '精品咖啡', points: 50 },
+        { id: 2, emoji: '🎧', name: '无线耳机', points: 800 },
+        { id: 3, emoji: '🧴', name: '护肤套装', points: 300 },
+      ],
+    }
+  },
+  methods: {
+    handleGoMall() {
+      this.$router.push('/home/pointsMall')
+      setTimeout(() => this.$emit('next'), 500)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.guide-card {
+  width: 440px;
+  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;
+}
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.guide-illustration {
+  position: relative;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center {
+  font-size: 56px;
+  z-index: 2;
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
+}
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
+.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.guide-body { padding: 24px 28px 16px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #f76b1c;
+  background: #fff4ec;
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+.guide-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 8px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #86909c;
+  margin: 0 0 16px;
+}
+.goods-preview {
+  display: flex;
+  gap: 10px;
+}
+.goods-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 8px;
+  background: #f7f9fc;
+  border-radius: 12px;
+  transition: all 0.25s;
+}
+.goods-item:hover { background: #fff4ec; transform: translateY(-2px); }
+.goods-emoji { font-size: 26px; margin-bottom: 6px; }
+.goods-name { font-size: 12px; color: #4e5969; font-weight: 500; margin-bottom: 4px; }
+.goods-points { font-size: 12px; color: #f76b1c; font-weight: 700; }
+.guide-footer {
+  padding: 16px 28px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #f76b1c, #fad961);
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 14px rgba(247,107,28,0.3);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(247,107,28,0.45); }
+.btn-secondary {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2C6FBF;
+  background: #fff;
+  border: 1.5px solid #2C6FBF;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-secondary:hover { background: #eaf2ff; }
+</style>

src/components/NewUserGuide/steps/ProfileGuide.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="guide-card wide">
+    <div class="guide-illustration" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 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="guide-badge">Step 6</div>
+      <h2 class="guide-title">个人中心 + 礼品券兑换引导</h2>
+      <p class="guide-desc">点击顶部头像进入个人中心，查看三大核心功能：</p>
+
+      <!-- 三个 Tab 说明 -->
+      <div class="tab-list">
+        <div class="tab-item" v-for="tab in tabs" :key="tab.id">
+          <div class="tab-num">{{ tab.num }}</div>
+          <div class="tab-info">
+            <div class="tab-title">{{ tab.title }}</div>
+            <div class="tab-desc">{{ tab.desc }}</div>
+          </div>
+          <span class="tab-icon">{{ tab.icon }}</span>
+        </div>
+      </div>
+
+      <!-- 兑换流程 -->
+      <div class="redeem-flow">
+        <span class="flow-tip">🎫 礼品券兑换路径：</span>
+        <div class="flow-steps">
+          <span v-for="(step, i) in flowSteps" :key="i" class="flow-step-wrap">
+            <span class="flow-step">{{ step }}</span>
+            <span v-if="i < flowSteps.length - 1" class="flow-arrow">→</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-primary" @click="handleGoProfile">
+        <span>👤</span> 进入个人中心
+      </button>
+      <button class="btn-secondary" @click="$emit('next')">
+        {{ isLast ? '完成新手教程 ✓' : '下一步' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProfileGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      tabs: [
+        { id: 1, num: '①', icon: '💰', title: '我的积分', desc: '查看积分收支明细' },
+        { id: 2, num: '②', icon: '📦', title: '我的兑换', desc: '历史兑换记录' },
+        { id: 3, num: '③', icon: '🎫', title: '我的礼品券', desc: '未使用 / 已使用 / 已过期' },
+      ],
+      flowSteps: ['选择商品', '确认订单', '礼品券抵扣', '兑换成功'],
+    }
+  },
+  methods: {
+    handleGoProfile() {
+      this.$router.push('/myCenter')
+      setTimeout(() => this.$emit('next'), 500)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.guide-card {
+  width: 440px;
+  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;
+}
+.guide-card.wide { width: 500px; }
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.guide-illustration {
+  position: relative;
+  height: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center { font-size: 52px; z-index: 2; }
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
+.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.guide-body { padding: 20px 28px 14px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #e87722;
+  background: #fff4e8;
+  border-radius: 12px;
+  margin-bottom: 10px;
+}
+.guide-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 6px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #86909c;
+  margin: 0 0 14px;
+}
+.tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #f7f9fc;
+  border-radius: 10px;
+  transition: all 0.25s;
+}
+.tab-item:hover { background: #fff4e8; }
+.tab-num {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  background: #e87722;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.tab-info { flex: 1; }
+.tab-title { font-size: 13px; font-weight: 600; color: #1d2129; }
+.tab-desc { font-size: 12px; color: #86909c; margin-top: 2px; }
+.tab-icon { font-size: 20px; }
+.redeem-flow {
+  padding: 10px 12px;
+  background: linear-gradient(135deg, #fff9f0, #fff4e0);
+  border-radius: 10px;
+  border-left: 3px solid #e87722;
+}
+.flow-tip { font-size: 12px; color: #e87722; font-weight: 600; display: block; margin-bottom: 6px; }
+.flow-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.flow-step-wrap { display: flex; align-items: center; gap: 4px; }
+.flow-step {
+  padding: 3px 8px;
+  background: #fff;
+  border: 1px solid #e87722;
+  border-radius: 6px;
+  font-size: 11px;
+  color: #e87722;
+  font-weight: 500;
+}
+.flow-arrow { font-size: 12px; color: #e87722; }
+.guide-footer {
+  padding: 14px 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #e87722, #f9ca24);
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
+.btn-secondary {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #2C6FBF;
+  background: #fff;
+  border: 1.5px solid #2C6FBF;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-secondary:hover { background: #eaf2ff; }
+</style>

src/components/NewUserGuide/steps/RewardGuide.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="guide-card">
+    <!-- 烟花动画背景 -->
+    <div class="guide-illustration reward-bg">
+      <div class="firework fw-1">🎆</div>
+      <div class="firework fw-2">✨</div>
+      <div class="firework fw-3">🎇</div>
+      <div class="illus-center">🎁</div>
+    </div>
+
+    <div class="guide-body">
+      <div class="guide-badge finish">Step 7 · 完成！</div>
+      <h2 class="guide-title">引导完成，领取奖励！</h2>
+      <p class="guide-desc">恭喜你完成新手引导！<br />你的专属<strong>新手礼包</strong>已准备就绪 🎉</p>
+
+      <!-- 奖励展示 -->
+      <div class="reward-list">
+        <div class="reward-item" v-for="item in rewards" :key="item.id">
+          <div class="reward-icon">{{ item.icon }}</div>
+          <div class="reward-info">
+            <div class="reward-name">{{ item.name }}</div>
+            <div class="reward-value">{{ item.value }}</div>
+          </div>
+          <div class="reward-badge">新人专享</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-finish" @click="$emit('next')">
+        <span>🎁</span> 立即领取
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RewardGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      rewards: [
+        { id: 1, icon: '💰', name: '积分奖励', value: '+200 积分' },
+        { id: 2, icon: '🏅', name: '引导完成成就徽章', value: '新手成就解锁' },
+        { id: 3, icon: '🎫', name: '专属礼品券', value: '满 100 积分可用' },
+      ],
+    }
+  },
+}
+</script>
+
+<style scoped>
+.guide-card {
+  width: 440px;
+  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;
+}
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.reward-bg {
+  position: relative;
+  height: 160px;
+  background: linear-gradient(135deg, #27ae60 0%, #6dd5fa 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center {
+  font-size: 64px;
+  z-index: 2;
+  animation: giftPulse 2s ease-in-out infinite;
+}
+@keyframes giftPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1) rotate(5deg); }
+}
+.firework {
+  position: absolute;
+  font-size: 24px;
+  animation: fireworkAnim 3s ease-in-out infinite;
+}
+.fw-1 { top: 16px; left: 24px; animation-delay: 0s; }
+.fw-2 { top: 20px; right: 28px; animation-delay: 1s; }
+.fw-3 { bottom: 16px; left: 50%; transform: translateX(-50%); animation-delay: 2s; }
+@keyframes fireworkAnim {
+  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
+  50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
+}
+.guide-body { padding: 24px 28px 16px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #27ae60, #6dd5fa);
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+.guide-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 8px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #86909c;
+  margin: 0 0 16px;
+}
+.guide-desc strong { color: #27ae60; }
+.reward-list { display: flex; flex-direction: column; gap: 10px; }
+.reward-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #f0fdf4, #e8fdf5);
+  border-radius: 12px;
+  border: 1px solid #d1fae5;
+  transition: all 0.25s;
+}
+.reward-item:hover { transform: translateX(4px); box-shadow: 0 2px 10px rgba(39,174,96,0.15); }
+.reward-icon { font-size: 26px; }
+.reward-info { flex: 1; }
+.reward-name { font-size: 13px; font-weight: 600; color: #1d2129; }
+.reward-value { font-size: 12px; color: #27ae60; font-weight: 700; margin-top: 2px; }
+.reward-badge {
+  padding: 2px 8px;
+  font-size: 11px;
+  color: #27ae60;
+  background: #fff;
+  border: 1px solid #27ae60;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.guide-footer { padding: 16px 28px 28px; }
+.btn-finish {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 50px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, #27ae60, #6dd5fa);
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 6px 20px rgba(39,174,96,0.35);
+  animation: btnShine 3s ease-in-out infinite;
+}
+.btn-finish:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(39,174,96,0.5); }
+.btn-finish:active { transform: translateY(0); }
+@keyframes btnShine {
+  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); }
+}
+</style>

src/views/HomeView.vue

@@ -16,20 +16,16 @@
         <el-button style="width:50%;font-size: 24px;" type="danger" :disabled="checked?false:true" @click="getUnlock">确认激活</el-button>
       </span>
     </el-dialog>
-    <!-- 新手指引 -->
-    <NewUserGuide ref="guide" @finish="onGuideFinish" />
   </div>
 </template>
 
 <script>
 import AppSidebar from '@/components/AppSidebar.vue'
-import NewUserGuide from '@/components/NewUserGuide/index.vue'
 import { lockStatus,unlock } from "@/api/allApi";
 export default {
   name: 'HomeView',
   components: {
-    AppSidebar,
-    NewUserGuide
+    AppSidebar
   },
   data() {
     return {
@@ -40,14 +36,6 @@ export default {
   },
   created() {
     this.getHtmldata();
-    // 延迟显示新手指引，等系统规则弹窗检查完成
-    this.$nextTick(() => {
-      setTimeout(() => {
-        if (this.$refs.guide) {
-          this.$refs.guide.show();
-        }
-      }, 800);
-    });
   },
   methods:{
     getHtmldata(){
@@ -63,10 +51,6 @@ export default {
       unlock().then(response=>{
           this.dialogVisible = false;
       })
-    },
-    onGuideFinish() {
-      // 引导完成后的回调（可扩展：标记用户已完成引导等）
-      console.log('新手指引已完成');
     }
   }
 }