feat: 一些问题抽离

src/components/NewUserGuide/steps/ActivityGuide.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="guide-card">
-    <div class="guide-illustration" style="background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);">
+    <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>
@@ -9,11 +12,18 @@
     <div class="guide-body">
       <div class="guide-badge">Step 4</div>
       <h2 class="guide-title">参与活动，赢取大奖</h2>
-      <p class="guide-desc">节日活动、答题游戏、转盘抽奖...<br />参与活动可解锁<strong>限时积分奖励</strong>！</p>
+      <p class="guide-desc">
+        节日活动、答题游戏、转盘抽奖...<br />
+        参与活动可解锁<strong>限时积分奖励</strong>！
+      </p>
 
       <!-- 活动类型展示 -->
       <div class="activity-list">
-        <div class="activity-item" v-for="item in activities" :key="item.id">
+        <div
+          v-for="item in activities"
+          :key="item.id"
+          class="activity-item"
+        >
           <span class="activity-icon">{{ item.icon }}</span>
           <div class="activity-info">
             <div class="activity-name">{{ item.name }}</div>
@@ -31,7 +41,7 @@
       <button v-if="false" class="btn-secondary" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
-      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+      <button v-if="!isFirst" class="btn-prev" @click="$emit('prev')">
         上一步
       </button>
     </div>
@@ -41,11 +51,13 @@
 <script>
 export default {
   name: 'ActivityGuide',
+
   props: {
     isLast: { type: Boolean, default: false },
     isFirst: { type: Boolean, default: false },
     isReplay: { type: Boolean, default: false },
   },
+
   data() {
     return {
       activities: [
@@ -55,6 +67,7 @@ export default {
       ],
     }
   },
+
   methods: {
     handleGoActivity() {
       this.$router.push('/home/festiveEvents')
@@ -68,16 +81,31 @@ export default {
 @import './guide-common.css';
 
 /* Step 4 专属样式 */
-.guide-badge { color: #6a11cb; background: #f3eeff; }
-.guide-desc strong { color: #6a11cb; }
+.guide-badge {
+  color: #6a11cb;
+  background: #f3eeff;
+}
+
+.guide-desc strong {
+  color: #6a11cb;
+}
+
 .btn-primary {
   background: linear-gradient(135deg, #6a11cb, #2575fc);
-  box-shadow: 0 4px 14px rgba(106,17,203,0.3);
+  box-shadow: 0 4px 14px rgba(106, 17, 203, 0.3);
+}
+
+.btn-primary:hover {
+  box-shadow: 0 6px 18px rgba(106, 17, 203, 0.45);
 }
-.btn-primary:hover { box-shadow: 0 6px 18px rgba(106,17,203,0.45); }
 
 /* 活动列表 */
-.activity-list { display: flex; flex-direction: column; gap: 8px; }
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .activity-item {
   display: flex;
   align-items: center;
@@ -87,11 +115,33 @@ export default {
   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-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;

src/components/NewUserGuide/steps/EarnPointsGuide.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="guide-card">
-    <div class="guide-illustration" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
+    <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>
@@ -9,11 +12,18 @@
     <div class="guide-body">
       <div class="guide-badge">Step 5</div>
       <h2 class="guide-title">完成任务，积分翻倍</h2>
-      <p class="guide-desc">多种积分获取渠道，轻松累积积分！<br />完成不同任务获取丰厚积分奖励。</p>
+      <p class="guide-desc">
+        多种积分获取渠道，轻松累积积分！<br />
+        完成不同任务获取丰厚积分奖励。
+      </p>
 
       <!-- 积分渠道 -->
       <div class="channel-grid">
-        <div class="channel-item" v-for="item in channels" :key="item.id">
+        <div
+          v-for="item in channels"
+          :key="item.id"
+          class="channel-item"
+        >
           <span class="channel-icon">{{ item.icon }}</span>
           <span class="channel-name">{{ item.name }}</span>
           <span class="channel-points">+{{ item.points }}</span>
@@ -28,7 +38,7 @@
       <button v-if="false" class="btn-secondary" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
-      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+      <button v-if="!isFirst" class="btn-prev" @click="$emit('prev')">
         上一步
       </button>
     </div>
@@ -38,11 +48,13 @@
 <script>
 export default {
   name: 'EarnPointsGuide',
+
   props: {
     isLast: { type: Boolean, default: false },
     isFirst: { type: Boolean, default: false },
     isReplay: { type: Boolean, default: false },
   },
+
   data() {
     return {
       channels: [
@@ -55,6 +67,7 @@ export default {
       ],
     }
   },
+
   methods: {
     handleGoEarn() {
       this.$router.push('/home/earnPoints')
@@ -68,12 +81,19 @@ export default {
 @import './guide-common.css';
 
 /* Step 5 专属样式 */
-.guide-badge { color: #11998e; background: #e8fdf5; }
+.guide-badge {
+  color: #11998e;
+  background: #e8fdf5;
+}
+
 .btn-primary {
   background: linear-gradient(135deg, #11998e, #38ef7d);
-  box-shadow: 0 4px 14px rgba(17,153,142,0.3);
+  box-shadow: 0 4px 14px rgba(17, 153, 142, 0.3);
+}
+
+.btn-primary:hover {
+  box-shadow: 0 6px 18px rgba(17, 153, 142, 0.45);
 }
-.btn-primary:hover { box-shadow: 0 6px 18px rgba(17,153,142,0.45); }
 
 /* 积分渠道 */
 .channel-grid {
@@ -81,6 +101,7 @@ export default {
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
 }
+
 .channel-item {
   display: flex;
   flex-direction: column;
@@ -91,8 +112,25 @@ export default {
   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; }
+
+.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;
+}
 </style>