feat: 添加签到页面，包含签到信息和记录展示，优化页面布局和样式

src/views/home/index.vue

@@ -63,6 +63,7 @@ const newsList = ref([
   },
 ]);
 
+const router = useRouter();
 // 快捷入口
 const quickActions = ref([
   { id: 1, name: "签到", icon: calendarOutline, color: "#c32120" },
@@ -72,8 +73,14 @@ const quickActions = ref([
 ]);
 
 function handleQuickAction(action: any) {
-  console.log("点击快捷入口:", action.name);
+  switch (action.id) {
-  // TODO: 实现各个快捷入口的功能
+    case 1:
+      router.push("/signup");
+      break;
+    case 2:
+      console.log("团队中心");
+      break;
+  }
 }
 
 function handleAnnouncementClick(announcement: any) {

src/views/signup/index.vue

@@ -1,32 +1,196 @@
 <script lang='ts' setup>
+import {
+  calendarOutline,
+  checkmarkCircleOutline,
+  flameOutline,
+  ribbonOutline,
+  trophyOutline,
+} from "ionicons/icons";
 
+// 签到信息
+const signupInfo = ref({
+  consecutiveDays: 53,
+  totalDays: 127,
+  isSignedToday: false,
+});
+
+// 签到记录（最近7天）
+const recentSignup = ref([
+  { day: "周一", date: "01-13", signed: true },
+  { day: "周二", date: "01-14", signed: true },
+  { day: "周三", date: "01-15", signed: true },
+  { day: "周四", date: "01-16", signed: true },
+  { day: "周五", date: "01-17", signed: false },
+  { day: "周六", date: "01-18", signed: false },
+  { day: "周日", date: "01-19", signed: false },
+]);
+
+function handleSignup() {
+  console.log("立即签到");
+  // TODO: 实现签到功能
+}
 </script>
 
 <template>
   <ion-page>
     <ion-content>
+      <!-- 顶部横幅 -->
       <img src="@/assets/images/signup-banner.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
 
-      <div class="ion-padding-horizontal mt-4 text-center text-4xl text-primary font-bold">
+      <div class="ion-padding">
+        <!-- 主标题卡片 -->
+        <section class="mt-3 mb-4">
+          <div class="relative z-1">
+            <div class="flex items-center justify-center gap-2 mb-4">
+              <img src="@/assets/images/icon-1.png" class="size-6">
+              <div class="text-4xl text-[#c41e3a] font-bold m-0">
                 初心如磐 使命如坚
               </div>
-      <div class="ion-padding-horizontal mt-4 text-center text-sm text-black font-bold opacity-90 tracking-widest">
+              <img src="@/assets/images/icon-1.png" class="size-6">
-        讲党性/树新风/作表率/当先锋
             </div>
-      <div class="ion-padding-horizontal mt-2 text-center text-sm text-primary font-bold tracking-widest">
+            <div class="text-center text-sm text-[#333] font-bold opacity-90 tracking-widest mb-1">
+              讲党性 / 树新风 / 作表率 / 当先锋
+            </div>
+            <div class="text-center text-sm text-[#c41e3a] font-bold tracking-wider">
               红色印记，燃动今日的奋斗之光
             </div>
-      <div class="ion-padding-horizontal mt-6 text-center text-2xl text-primary font-bold tracking-wider">
+          </div>
-        已连续 <span class="text-5xl mx-3">53</span> 天签到
+        </section>
+
+        <!-- 签到统计卡片 -->
+        <section class="mb-8 mt-10">
+          <div class="card rounded-2xl shadow-lg p-6">
+            <div class="grid grid-cols-2 gap-4 mb-4">
+              <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4 text-center">
+                <div class="text-xs opacity-90 mb-1">
+                  连续签到
+                </div>
+                <div class="text-4xl font-bold mb-1">
+                  {{ signupInfo.consecutiveDays }}
+                </div>
+                <div class="text-xs opacity-80">
+                  天
+                </div>
+              </div>
+              <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4 text-center">
+                <div class="text-xs opacity-90 mb-1">
+                  累计签到
+                </div>
+                <div class="text-4xl font-bold mb-1">
+                  {{ signupInfo.totalDays }}
+                </div>
+                <div class="text-xs opacity-80">
+                  天
+                </div>
+              </div>
             </div>
 
-      <div class="ion-padding-horizontal mt-8 flex justify-center">
+            <!-- 签到按钮 -->
-        <ion-button size="large" class="w-3/4 bg-primary text-white font-bold rounded-full shadow-lg">
+            <ion-button
-          立即签到
+              expand="block"
+              :disabled="signupInfo.isSignedToday"
+              @click="handleSignup"
+            >
+              <ion-icon slot="start" :icon="checkmarkCircleOutline" class="text-xl" />
+              {{ signupInfo.isSignedToday ? '今日已签到' : '立即签到' }}
             </ion-button>
           </div>
+        </section>
+
+        <!-- 本周签到记录 -->
+        <section class="mb-8">
+          <div class="card rounded-2xl shadow-lg p-5">
+            <div class="flex items-center gap-2 mb-5">
+              <img src="@/assets/images/icon.png" class="size-7">
+              <div class="text-xl font-bold text-[#1a1a1a]">
+                本周签到
+              </div>
+            </div>
+
+            <div class="grid grid-cols-7 gap-2">
+              <div
+                v-for="(day, index) in recentSignup"
+                :key="index"
+                class="flex flex-col items-center gap-2"
+              >
+                <div
+                  class="w-10 h-10 rounded-full flex-center text-xs font-bold transition-all"
+                  :class="day.signed
+                    ? 'bg-primary text-white shadow-md'
+                    : 'bg-gray-100 text-gray-400'"
+                >
+                  <ion-icon v-if="day.signed" :icon="checkmarkCircleOutline" class="text-xl" />
+                  <span v-else>{{ day.date.split('-')[1] }}</span>
+                </div>
+                <span class="text-xs text-[#666] font-medium">{{ day.day }}</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 签到奖励说明 -->
+        <section class="mb-8">
+          <div class="card rounded-2xl shadow-lg p-5">
+            <div class="flex items-center gap-2 mb-5">
+              <img src="@/assets/images/icon.png" class="size-7">
+              <div class="text-xl font-bold text-[#1a1a1a]">
+                签到奖励
+              </div>
+            </div>
+
+            <div class="space-y-3">
+              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-[#fff7e6] to-transparent rounded-xl">
+                <div class="flex items-center gap-3">
+                  <div class="w-2 h-2 rounded-full bg-[#faad14]" />
+                  <span class="text-sm text-[#333] font-medium">连续签到7天</span>
+                </div>
+                <span class="text-sm text-[#c41e3a] font-bold">+10积分</span>
+              </div>
+              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-[#f6ffed] to-transparent rounded-xl">
+                <div class="flex items-center gap-3">
+                  <div class="w-2 h-2 rounded-full bg-[#52c41a]" />
+                  <span class="text-sm text-[#333] font-medium">连续签到30天</span>
+                </div>
+                <span class="text-sm text-[#c41e3a] font-bold">+50积分</span>
+              </div>
+              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-[#fff1f0] to-transparent rounded-xl">
+                <div class="flex items-center gap-3">
+                  <div class="w-2 h-2 rounded-full bg-[#c41e3a]" />
+                  <span class="text-sm text-[#333] font-medium">连续签到60天</span>
+                </div>
+                <span class="text-sm text-[#c41e3a] font-bold">+100积分</span>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style lang='css' scoped>
+.signup-btn {
+  --background: white;
+  --color: #c41e3a;
+  --border-radius: 12px;
+  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  font-weight: 700;
+  font-size: 16px;
+  height: 50px;
+  text-transform: none;
+}
+
+.card {
+  background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
+}
+
+.signup-btn::part(native) {
+  font-weight: 700;
+}
+
+.signup-btn:disabled {
+  --background: rgba(255, 255, 255, 0.5);
+  --color: rgba(255, 255, 255, 0.8);
+  opacity: 0.6;
+}
+</style>