root/financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2026-01-17 03:46:59 +07:00
parent 6ee98bf326
commit 405332b040
3 changed files with 190 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/icon-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

11
src/views/home/index.vue
View File

@@ -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);
// TODO: 实现各个快捷入口的功能
switch (action.id) {
case 1:
router.push("/signup");
break;
case 2:
console.log("团队中心");
break;
}
}
function handleAnnouncementClick(announcement: any) {

182
src/views/signup/index.vue
View File

@@ -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="text-center text-sm text-[#333] font-bold opacity-90 tracking-widest mb-1">
讲党性 / 树新风 / 作表率 / 当先锋
</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-[#c41e3a] font-bold tracking-wider">
红色印记，燃动今日的奋斗之光
</div>
<div class="ion-padding-horizontal mt-6 text-center text-2xl text-primary font-bold tracking-wider">
已连续 <span class="text-5xl mx-3">53</span> 天签到
</div>
</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>