feat: 新增成功徽章展示组件及相关静态资源

添加 success.vue 组件，用于展示用户完成关卡后获得的徽章。组件支持显示五种不同徽章，包含背景、左右装饰元素及徽章图片。

src/components/success.vue

+<script setup>
+const props = defineProps({
+    // 徽章编号 1-5
+    badgeIndex: {
+        type: Number,
+        default: 1
+    },
+    // 徽章标题
+    title: {
+        type: String,
+        default: '水源净化卫士'
+    },
+    // 副标题
+    subTitle: {
+        type: String,
+        default: '已完成第一关卡'
+    },
+    // 是否显示
+    show: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['close', 'confirm']);
+
+const ASSETS = Object.freeze({
+    bg: '/static/success/bg.webp',
+    left: '/static/success/left.webp',
+    right: '/static/success/right.webp',
+    badge1: '/static/success/badge1.webp',
+    badge2: '/static/success/badge2.webp',
+    badge3: '/static/success/badge3.webp',
+    badge4: '/static/success/badge4.webp',
+    badge5: '/static/success/badge5.webp',
+});
+
+const getBadgeImage = () => {
+    return ASSETS[`badge${props.badgeIndex}`] || ASSETS.badge1;
+};
+
+const handleConfirm = () => {
+    emit('confirm');
+    emit('close');
+};
+</script>
+
+<template>
+    <view v-if="show" class="success-overlay" @click="handleConfirm">
+        <view class="success-content" @click.stop>
+            <!-- 顶部标题 -->
+            <view class="header-text">
+                <image class="arrow-img arrow-left" :src="ASSETS.left" mode="scaleToFill" />
+                <text :class="['title-text', { 'title-text-type2': badgeIndex === 5 }]">
+                    <template v-if="badgeIndex === 5">关卡全部完成！获得</template>
+                    <template v-else>恭喜获得<text class="highlight">1</text>枚新徽章</template>
+                </text>
+                <image class="arrow-img arrow-right" :src="ASSETS.right" mode="scaleToFill" />
+            </view>
+
+            <!-- 徽章区域 -->
+            <view class="badge-area">
+                <image class="badge-bg" :src="ASSETS.bg" mode="aspectFit" />
+                <image class="badge-img" :src="getBadgeImage()" mode="aspectFit" />
+            </view>
+
+            <!-- 徽章信息 -->
+            <view class="badge-info">
+                <text class="badge-title">{{ title }}</text>
+                <text class="badge-sub">{{ subTitle }}</text>
+            </view>
+
+            <!-- 按钮 -->
+            <view class="confirm-btn" @click="handleConfirm">
+                <text class="btn-text">立即收下</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style scoped lang="scss">
+.success-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(49, 47, 47, 0.9);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.success-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40rpx;
+}
+
+.header-text {
+    display: flex;
+    align-items: center;
+    margin-bottom: 40rpx;
+
+    .arrow-img {
+        position: absolute;
+        top: 304rpx;
+        width: 126rpx;
+        height: 14rpx;
+    }
+
+    .arrow-left {
+        left: 30rpx;
+    }
+
+    .arrow-right {
+        right: 30rpx;
+    }
+
+    .title-text {
+        position: absolute;
+        top: 258rpx;
+        left: 0;
+        right: 0;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: 48rpx;
+        font-weight: 600;
+
+        .highlight {
+            color: #7ADBFF;
+            font-size: 66rpx;
+            margin: 0 8rpx;
+        }
+    }
+
+    .title-text-type2 {
+        top: 280rpx;
+    }
+}
+
+.badge-area {
+    position: relative;
+    width: 854rpx;
+    height: 832rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .badge-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+
+    .badge-img {
+        position: relative;
+        width: 464rpx;
+        height: 484rpx;
+        z-index: 2;
+    }
+}
+
+.badge-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 76rpx;
+    margin-top: -96rpx;
+
+    .badge-title {
+        color: #FFFFFF;
+        font-size: 62rpx;
+        font-weight: 500;
+        margin-bottom: 16rpx;
+    }
+
+    .badge-sub {
+        color: #ffffffb3;
+        font-size: 30rpx;
+    }
+}
+
+.confirm-btn {
+    width: 354rpx;
+    height: 76rpx;
+    background: linear-gradient(180deg, #51C3E5 0%, #267FD4 100%);
+    border-radius: 48rpx;
+    border: 4rpx solid #FFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 8px 0 0 #00000040;
+
+    .btn-text {
+        color: #FFFFFF;
+        font-size: 40rpx;
+        font-weight: 600;
+    }
+}
+</style>