From c3e7b1b3d7c47145cd31aaf46c459900e89fd04a Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 22 May 2026 16:42:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E6=B4=BB=E5=8A=A8):=20=E5=8F=A4?=
 =?UTF-8?q?=E5=B0=94=E9=82=A6=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/activity.js                           |  102 +
 src/config/security.js                        |    1 +
 src/router/index.js                           |    6 +
 src/utils/permissionManager.js                |    1 +
 .../GulbenFestival/components/topUser.vue     |  333 +++
 src/views/Activities/GulbenFestival/index.vue | 2654 +++++++++++++++++
 .../Activities/GulbenFestival/page.config.js  |  208 ++
 7 files changed, 3305 insertions(+)
 create mode 100644 src/views/Activities/GulbenFestival/components/topUser.vue
 create mode 100644 src/views/Activities/GulbenFestival/index.vue
 create mode 100644 src/views/Activities/GulbenFestival/page.config.js

diff --git a/src/api/activity.js b/src/api/activity.js
index b959833..eb3a12f 100644
--- a/src/api/activity.js
+++ b/src/api/activity.js
@@ -110,3 +110,105 @@ export const claimDailyRechargeTask2 = async (data) => {
     throw error
   }
 }
+
+// 查询用户票券数量
+export const apiGetCardTicketList = async (activityId) => {
+  try {
+    const response = await get(
+      `/activity/card/ticket/list?activityId=${encodeURIComponent(activityId)}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get card ticket list:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 查询奖励池奖品列表
+export const apiGetCardRewardPrizeList = async (activityId, poolType) => {
+  try {
+    const response = await get(
+      `/activity/card/reward/prize/list?activityId=${encodeURIComponent(activityId)}&poolType=${encodeURIComponent(poolType)}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get card reward prize list:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 查询中奖飘窗列表
+export const apiGetCardRewardMarquee = async (activityId) => {
+  try {
+    const response = await get(
+      `/activity/card/reward/marquee?activityId=${encodeURIComponent(activityId)}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get card reward marquee:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 抽卡（消耗抽卡票或金币，抽 R 级卡片）
+export const apiPostCardDraw = async (data) => {
+  try {
+    const response = await post('/activity/card/draw', data)
+    return response
+  } catch (error) {
+    console.error('Failed to draw card:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 合成卡片（R×5→SR，SR×3→SSR）
+export const apiPostCardCombine = async (data) => {
+  try {
+    const response = await post('/activity/card/combine', data)
+    return response
+  } catch (error) {
+    console.error('Failed to combine card:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 兑换奖励票（卡片 → STANDARD/PREMIUM/LUXURY 票）
+export const apiPostCardRedeem = async (data) => {
+  try {
+    const response = await post('/activity/card/redeem', data)
+    return response
+  } catch (error) {
+    console.error('Failed to redeem card reward ticket:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 奖励池抽奖（消耗奖励票，抽取实际奖励）
+export const apiPostCardRewardDraw = async (data) => {
+  try {
+    const response = await post('/activity/card/reward/draw', data)
+    return response
+  } catch (error) {
+    console.error('Failed to draw card reward:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
+
+// 查询用户卡包
+export const apiPostCardBagList = async (data) => {
+  try {
+    const response = await post('/activity/card/bag/list', data)
+    return response
+  } catch (error) {
+    console.error('Failed to get card bag list:', error)
+    console.error('error:' + (error.response?.errorMsg || error.errorMsg || error.message || ''))
+    throw error
+  }
+}
diff --git a/src/config/security.js b/src/config/security.js
index 17abbda..73d429a 100644
--- a/src/config/security.js
+++ b/src/config/security.js
@@ -19,6 +19,7 @@ export const PUBLIC_PATHS = Object.freeze([
   '/login-reward',
   '/activities/poker-ace',
   '/daily-recharge',
+  '/activities/gulben-festival',
   '/activities/lucky-dollars-season5',
   '/activities/lucky-dollars-season4',
   '/activities/lesser-bairam',
diff --git a/src/router/index.js b/src/router/index.js
index ea42c07..9ca7917 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -414,6 +414,12 @@ const router = createRouter({
       component: () => import('../views/Activities/LuckyDollars/Season5/index.vue'),
       meta: { requiresAuth: true },
     }, //2026年x月x日上午5点结束
+    {
+      path: '/activities/gulben-festival',
+      name: 'gulben-festival',
+      component: () => import('../views/Activities/GulbenFestival/index.vue'),
+      meta: { requiresAuth: true },
+    }, // 古尔邦节活动
     {
       path: '/activities/poker-ace',
       name: 'pokerAce',
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 42a0258..ccc4e8e 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -63,6 +63,7 @@ const ACTIVITIES = [
   '/activities/poker-ace', // 扑克王牌排行榜
   '/daily-recharge', // 每日充值页面
   '/activities/lucky-dollars-season5', // 幸运美金活动
+  '/activities/gulben-festival', // 古尔邦节活动
   '/activities/lucky-dollars-season4', // 幸运美金活动
   '/activities/lesser-bairam', // 开斋节打榜
   '/activities/lucky-dollars-season3', // 斋月打榜
diff --git a/src/views/Activities/GulbenFestival/components/topUser.vue b/src/views/Activities/GulbenFestival/components/topUser.vue
new file mode 100644
index 0000000..b92aa8d
--- /dev/null
+++ b/src/views/Activities/GulbenFestival/components/topUser.vue
@@ -0,0 +1,333 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative">
+      <img
+        v-smart-img
+        :src="BorderImgUrl"
+        alt=""
+        width="100%"
+        style="display: block; position: relative; z-index: 2"
+      />
+      <!-- 头像 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        :style="{ height: avatarContainerHeight }"
+      >
+        <div :style="{ width: avatarWidth }">
+          <img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            class="top-avatar"
+            :class="{ 'top-avatar-square': avatarSquare }"
+            style="display: block; aspect-ratio: 1/1; object-fit: cover"
+            @error="handleAvatarImageError"
+          />
+        </div>
+      </div>
+
+      <!-- 用户名和贡献值 -->
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 2px;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <div
+          style="display: flex; justify-content: center; align-items: center"
+          :style="{
+            width: nameValueWidth,
+            height: nameValueHeight,
+          }"
+        >
+          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ name }}
+          </div>
+        </div>
+
+        <!-- 贡献值：参考 GamesKing topUserDaily 的金币样式 -->
+        <div
+          class="distribution-value-pill"
+          :class="distributionValueClass"
+          style="padding: 1px 2px; display: flex; justify-content: center; align-items: center"
+          :style="{
+            width: distributionValueWidth,
+            height: distributionValueHeight,
+          }"
+        >
+          <img
+            v-smart-img
+            :src="valueIconUrl"
+            alt=""
+            style="display: block; aspect-ratio: 1/1; flex: 0 0 auto"
+            :style="{ width: coinWidth }"
+          />
+          <div style="font-weight: 590" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ distributionValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  ranking: {
+    type: String,
+    default: '',
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: [String, Number],
+    default: '',
+  },
+
+  valueIconUrl: {
+    type: String,
+    required: true,
+  },
+
+  avatarSquare: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 是否为第一名
+const isTopOne = computed(() => {
+  return props.ranking === '1'
+})
+
+const distributionValueClass = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return 'distribution-value-pill-top1'
+    case '2':
+      return 'distribution-value-pill-top2'
+    case '3':
+      return 'distribution-value-pill-top3'
+    default:
+      return ''
+  }
+})
+
+// 头像容器高度
+const avatarContainerHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '70%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '60%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '55%'
+    case '2':
+      return '73%'
+    case '3':
+      return '73%'
+    default:
+      return '77%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '38%'
+    case '2':
+      return '45%'
+    case '3':
+      return '45%'
+    default:
+      return '39%'
+  }
+})
+
+// 名称宽度
+const nameValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '60%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '60%'
+  }
+})
+
+// 名称高度
+const nameValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '17%'
+    case '2':
+      return '17%'
+    case '3':
+      return '17%'
+    default:
+      return '17%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '60%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '40%'
+  }
+})
+
+// 贡献值高度
+const distributionValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '15%'
+    case '2':
+      return '15%'
+    case '3':
+      return '15%'
+    default:
+      return '20%'
+  }
+})
+
+// 金币图标宽度
+const coinWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '1em'
+    case '2':
+      return '0.9em'
+    case '3':
+      return '0.9em'
+    default:
+      return '0.9em'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: black;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 1em;
+}
+
+.text {
+  font-size: 0.7em;
+}
+
+.top-avatar {
+  border-radius: 50%;
+}
+
+.top-avatar-square {
+  border-radius: 4px;
+}
+
+.distribution-value-pill {
+  border-radius: 40px;
+  border: 0.64px solid #ffdf36;
+  box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
+}
+
+.distribution-value-pill-top1 {
+  background: linear-gradient(270deg, #063a16 0%, #49d890 47.45%, #063a2c 100%);
+}
+
+.distribution-value-pill-top2 {
+  background: linear-gradient(270deg, #a3fdf9 0%, #1d7bbd 50%, #a3fdf9 100%);
+}
+
+.distribution-value-pill-top3 {
+  background: linear-gradient(270deg, #f5eae4 0%, #f9c29e 50%, #f5eae4 100%);
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/views/Activities/GulbenFestival/index.vue b/src/views/Activities/GulbenFestival/index.vue
new file mode 100644
index 0000000..51cdd62
--- /dev/null
+++ b/src/views/Activities/GulbenFestival/index.vue
@@ -0,0 +1,2654 @@
+<template>
+  <div class="fullPage">
+    <!-- 页面同步预加载：首屏关键图片加载完成前展示 loading -->
+    <div
+      v-if="isLoading"
+      style="display: flex; min-height: 100vh; align-items: center; justify-content: center"
+    >
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
+    </div>
+
+    <div
+      v-else
+      class="scroll"
+      :dir="isRtlLayout ? 'rtl' : 'ltr'"
+      style="min-height: 100vh; position: relative; overflow-x: hidden"
+    >
+      <!-- 页面主背景：背景图内包含活动标题和顶部视觉信息 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
+
+      <main
+        style="
+          position: relative;
+          z-index: 1;
+          width: min(100vw, 480px);
+          min-height: 100vh;
+          margin: 0 auto;
+          padding: 100vw 0 12vw;
+        "
+      >
+        <!-- 规则入口：默认贴右，阿语 RTL 时通过样式贴左 -->
+        <section class="rule-row">
+          <itemCenter
+            :imgUrl="imageUrl('ruleBtBg')"
+            style="width: 20vw; flex: 0 0 20vw"
+            contentStyle="padding: 4vw 3vw;"
+            @click="openRulePopup"
+          >
+            <span
+              style="
+                color: #fff8d7;
+                font-size: 1em;
+                font-weight: 800;
+                line-height: 1;
+                text-align: center;
+                text-shadow: 0 1px 2px rgba(63, 20, 57, 0.5);
+                white-space: nowrap;
+              "
+            >
+              rule
+            </span>
+          </itemCenter>
+        </section>
+
+        <!-- 倒计时：天/时/分/秒分别用 timeBg 承载，时分秒之间显示英文冒号 -->
+        <section style="display: flex; justify-content: center; margin-bottom: 4vw">
+          <div
+            style="
+              width: min(95vw, 440px);
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: 1vw;
+              padding: 0 2vw;
+              overflow: hidden;
+            "
+          >
+            <itemCenter
+              class="countdown-cell"
+              :imgUrl="imageUrl('timeBg')"
+              contentStyle="padding: 1.8vw 1vw;"
+            >
+              <span class="countdown-value">{{ Days }}D</span>
+            </itemCenter>
+            <span class="countdown-colon"></span>
+            <itemCenter
+              class="countdown-cell"
+              :imgUrl="imageUrl('timeBg')"
+              contentStyle="padding: 1.8vw 1vw;"
+            >
+              <span class="countdown-value">{{ Hours }}</span>
+            </itemCenter>
+            <span class="countdown-colon">:</span>
+            <itemCenter
+              class="countdown-cell"
+              :imgUrl="imageUrl('timeBg')"
+              contentStyle="padding: 1.8vw 1vw;"
+            >
+              <span class="countdown-value">{{ Minutes }}</span>
+            </itemCenter>
+            <span class="countdown-colon">:</span>
+            <itemCenter
+              class="countdown-cell"
+              :imgUrl="imageUrl('timeBg')"
+              contentStyle="padding: 1.8vw 1vw;"
+            >
+              <span class="countdown-value">{{ Seconds }}</span>
+            </itemCenter>
+          </div>
+        </section>
+
+        <!-- 一级标签：CollectCards / Personal Rank / Room Rank -->
+        <section
+          style="
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            align-items: stretch;
+            gap: 2vw;
+            margin: 0 0 4vw;
+          "
+        >
+          <button
+            v-for="tab in visibleTopTabs"
+            :key="tab.value"
+            type="button"
+            class="image-tab top-tab"
+            :class="{ 'image-tab-active': activeTopTab === tab.value }"
+            @click="changeTopTab(tab.value)"
+          >
+            <itemCenter
+              class="tab-background"
+              :imgUrl="tabButtonImage(tab.value)"
+              contentStyle="padding: 4vw 4vw 0;"
+            >
+              <span style="font-weight: 700">{{ tab.label }}</span>
+            </itemCenter>
+          </button>
+        </section>
+
+        <!-- 标签内容预览区：后续按模块逐步替换为真实业务内容 -->
+        <section style="min-height: 86vw; padding: 0; margin: 0">
+          <div v-if="currentTopSection">
+            <!-- 二级标签：个人榜和房间榜下的 Reward / Ranking -->
+            <div
+              v-if="visibleChildTabs.length"
+              style="
+                display: grid;
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+                gap: 3vw;
+                padding: 0 5vw;
+                margin-bottom: 4vw;
+              "
+            >
+              <button
+                v-for="tab in visibleChildTabs"
+                :key="tab.value"
+                type="button"
+                class="image-tab child-tab"
+                :class="{ 'image-tab-active': activeChildTab === tab.value }"
+                @click="changeChildTab(tab.value)"
+              >
+                <itemCenter
+                  class="tab-background"
+                  :imgUrl="childTabButtonImage(tab.value)"
+                  contentStyle="padding: 1vw 4vw 0;"
+                >
+                  <span style="font-weight: 700">{{ tab.label }}</span>
+                </itemCenter>
+              </button>
+            </div>
+
+            <!-- 当前模块容器背景：container 大背景图统一用 itemCenter 自上而下渲染 -->
+            <div
+              v-if="activeContainerImages.length"
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 0;
+                margin: 0;
+                padding: 0;
+              "
+            >
+              <template v-for="imageName in activeContainerImages" :key="imageName">
+                <itemCenter
+                  v-if="imageName === 'lotteryBg'"
+                  :imgUrl="imageUrl(imageName)"
+                  style="width: 100vw; margin: 0; padding: 0"
+                  contentStyle="padding: 8vw 5vw 0; align-items: stretch; justify-content: flex-start; box-sizing: border-box;"
+                >
+                  <!-- 抽奖区域：上层放左右切换按钮和奖品占位，下层放抽奖按钮 -->
+                  <div
+                    style="width: 100%; height: 100%; display: flex; flex-direction: column; gap: 0"
+                  >
+                    <!-- 抽奖区域上层：左 / 奖品 / 右三列 -->
+                    <div style="display: flex; flex: 1; align-items: center; gap: 4vw">
+                      <div
+                        style="
+                          width: 10vw;
+                          flex: 0 0 10vw;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                        "
+                        @click="changeLotteryPoolMode(-1)"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl('leftBt')"
+                          alt=""
+                          style="width: 8vw; display: block"
+                        />
+                      </div>
+
+                      <div style="flex: 1; min-width: 0">
+                        <div
+                          :class="['lottery-prize-list', activeLotteryPoolMode.listClass]"
+                          style="
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+                            gap: var(--lottery-prize-gap);
+                          "
+                        >
+                          <div
+                            v-for="(row, rowIndex) in activeLotteryPrizeRows"
+                            :key="`${activeLotteryPoolMode.name}-${rowIndex}`"
+                            style="
+                              width: 100%;
+                              display: flex;
+                              align-items: center;
+                              justify-content: center;
+                              gap: var(--lottery-prize-gap);
+                            "
+                          >
+                            <itemCenter
+                              v-for="prize in row"
+                              :key="prize.renderKey"
+                              :imgUrl="lotteryPrizeImage(prize.index)"
+                              :class="['lottery-prize-item', activeLotteryPoolMode.itemClass]"
+                              contentStyle="padding: 1vw; flex-direction: column; gap: 0.5vw; align-items: center; justify-content: center; box-sizing: border-box;"
+                            >
+                              <img
+                                v-if="prize.prizeImage"
+                                v-smart-img
+                                :src="prize.prizeImage"
+                                alt=""
+                                style="width: 60%; display: block; object-fit: contain"
+                                @error="handleRewardImageError"
+                              />
+                              <div
+                                style="
+                                  width: 100%;
+                                  color: #fff;
+                                  font-size: 0.7em;
+                                  font-weight: 700;
+                                  line-height: 1.1;
+                                  text-align: center;
+                                  overflow-wrap: anywhere;
+                                "
+                              >
+                                {{ getLotteryPrizeDisplayText(prize) }}
+                              </div>
+                            </itemCenter>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div
+                        style="
+                          width: 10vw;
+                          flex: 0 0 10vw;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                        "
+                        @click="changeLotteryPoolMode(1)"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl('leftBt')"
+                          alt=""
+                          style="width: 8vw; display: block; transform: scaleX(-1)"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- 抽奖区域下层：单抽和十连抽按钮，内部后续可替换抽奖券图标 -->
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-around;
+                        gap: 0;
+                        margin: 0;
+                        padding: 0;
+                      "
+                    >
+                      <itemCenter
+                        :imgUrl="imageUrl('draw1Bt')"
+                        style="width: 38vw; margin: 0; padding: 0"
+                        contentStyle="padding: 0; align-items: flex-end;padding: 0 0 2vw"
+                        @click="handleLotteryDraw(1)"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl(activeLotteryTicketImage)"
+                          alt=""
+                          style="width: 10vw; display: block"
+                        />
+                      </itemCenter>
+                      <itemCenter
+                        :imgUrl="imageUrl('draw5BtBg')"
+                        style="width: 38vw; margin: 0; padding: 0"
+                        contentStyle="padding: 0; align-items: flex-end;padding: 0 0 2vw"
+                        @click="handleLotteryDraw(10)"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl(activeLotteryTicketImage)"
+                          alt=""
+                          style="width: 10vw; display: block"
+                        />
+                      </itemCenter>
+                    </div>
+                  </div>
+                </itemCenter>
+
+                <itemCenter
+                  v-else-if="imageName === 'collectGameBg'"
+                  :imgUrl="imageUrl(imageName)"
+                  style="width: 100vw; margin: 0; padding: 0"
+                  contentStyle="padding: 0; align-items: stretch; justify-content: flex-start; box-sizing: border-box;"
+                >
+                  <!-- 集卡玩法区域：票券、提示、标题、奖池和操作按钮五层结构 -->
+                  <div
+                    style="
+                      width: 100%;
+                      height: 100%;
+                      display: flex;
+                      flex-direction: column;
+                      justify-content: space-between;
+
+                      margin: 0;
+                      padding: 0;
+                    "
+                  >
+                    <!-- 第一层：三种票券数量 -->
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 2vw;
+                        padding: 17vw 9vw 15vw;
+                        margin: 0;
+                      "
+                    >
+                      <div
+                        v-for="(ticket, index) in collectTicketItems"
+                        :key="ticket.type"
+                        style="
+                          position: relative;
+                          flex: 1;
+                          min-width: 0;
+                          height: 100%;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                          gap: 0.5vw;
+                        "
+                      >
+                        <div style="width: 3vw; height: 100%">
+                          <img
+                            v-smart-img
+                            :src="imageUrl('helpBt')"
+                            alt=""
+                            style="width: 100%; display: block"
+                          />
+                        </div>
+
+                        <img
+                          v-smart-img
+                          :src="imageUrl(ticket.image)"
+                          alt=""
+                          style="width: 13vw; display: block"
+                        />
+                        <span style="color: #fff; font-size: 1.7em; font-weight: 600">
+                          :{{ getTicketRemainingCount(ticket.type) }}
+                        </span>
+                      </div>
+                    </div>
+
+                    <!-- 第二层：玩法提示文案 -->
+                    <div
+                      style="
+                        color: #d2d2d2;
+                        font-size: 0.7em;
+                        font-weight: 600;
+                        text-align: center;
+                        padding: 0;
+                        margin: 0;
+                      "
+                    >
+                      *Redeem Your Cards and Draw for Amazing Rewards!
+                    </div>
+
+                    <!-- 第三层：当前奖池标题 -->
+                    <div
+                      style="
+                        height: 9vw;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        padding: 0;
+                        margin: 0;
+                      "
+                    >
+                      <img
+                        v-smart-img
+                        :src="imageUrl(activeCollectGameTitle)"
+                        alt=""
+                        style="height: 6.5vw; width: auto; display: block"
+                      />
+                    </div>
+
+                    <!-- 第四层：当前奖池卡牌 -->
+                    <div
+                      style="
+                        height: 25vw;
+                        display: flex;
+                        align-items: center;
+                        gap: 0;
+                        padding: 0;
+                        margin: 0;
+                      "
+                    >
+                      <div
+                        style="
+                          width: 10vw;
+                          flex: 0 0 10vw;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                        "
+                        @click="changeCollectGameMode(-1)"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl('leftBt')"
+                          alt=""
+                          style="width: 8vw; display: block"
+                        />
+                      </div>
+
+                      <div
+                        style="
+                          flex: 1;
+                          min-width: 0;
+                          height: 24vw;
+                          display: flex;
+                          align-items: center;
+                          justify-content: space-around;
+                          gap: 0;
+                        "
+                      >
+                        <template v-for="card in activeCollectCards" :key="card.cardTemplateId">
+                          <img
+                            v-if="card.isCardBack"
+                            v-smart-img
+                            :src="imageUrl('cardBackBg')"
+                            alt=""
+                            style="height: 100%; width: auto; display: block"
+                          />
+                          <itemCenter
+                            v-else
+                            :imgUrl="imageUrl(card.imageName)"
+                            style="
+                              height: 100%;
+                              width: auto;
+                              aspect-ratio: 159 / 261;
+                              flex: 0 0 auto;
+                            "
+                            contentStyle="padding: 0;"
+                          >
+                            <div
+                              style="
+                                position: absolute;
+                                top: 0.8vw;
+                                right: 0.8vw;
+                                border-radius: 33px 33px 33px 34px;
+                                background: rgba(0, 0, 0, 0.1);
+                                backdrop-filter: blur(2px);
+                                -webkit-backdrop-filter: blur(2px);
+                                padding: 4px;
+                                color: #fff;
+                                font-size: 1em;
+                                font-weight: 600;
+                                line-height: 1;
+                              "
+                            >
+                              {{ card.quantity }}
+                            </div>
+                          </itemCenter>
+                        </template>
+                      </div>
+
+                      <div
+                        style="
+                          width: 10vw;
+                          flex: 0 0 10vw;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                        "
+                        @click="changeCollectGameMode(1)"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl('leftBt')"
+                          alt=""
+                          style="width: 8vw; display: block; transform: scaleX(-1)"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- 第五层：当前奖池操作按钮 -->
+                    <div
+                      style="
+                        height: 25vw;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-around;
+                        gap: 0;
+                        padding: 0;
+                        margin: 0;
+                      "
+                    >
+                      <itemCenter
+                        v-if="activeCollectGameMode.name === 'gameR'"
+                        :imgUrl="imageUrl('GameDrawBtBg')"
+                        style="width: 40vw; margin: 0; padding: 0"
+                        contentStyle="padding: 10vw 6vw 5vw; flex-direction: column; gap: 0.5vw; align-items: center; justify-content: center;"
+                        @click="handleCardDraw()"
+                      >
+                        <div
+                          style="
+                            color: #fff;
+                            font-size: 0.75em;
+                            font-weight: 700;
+                            line-height: 1.1;
+                            text-align: center;
+                            white-space: nowrap;
+                          "
+                        >
+                          Remaining Tickets: *{{ cardDrawTicketCount }}
+                        </div>
+                        <div
+                          style="
+                            color: #fff;
+                            font-size: 0.75em;
+                            font-weight: 700;
+                            line-height: 1.1;
+                            text-align: center;
+                            white-space: nowrap;
+                          "
+                        >
+                          1000/coins
+                        </div>
+                      </itemCenter>
+                      <itemCenter
+                        v-if="activeCollectGameMode.name !== 'gameSSR'"
+                        :imgUrl="imageUrl('ticketHandleBtBg')"
+                        :class="{ 'collect-action-disabled': !canCombineActiveCards }"
+                        style="width: 25vw; margin: 0; padding: 0"
+                        contentStyle="padding: 2vw 3vw; align-items: center; justify-content: center;"
+                        @click="handleCardCombine"
+                      >
+                        <div
+                          style="
+                            color: #fff;
+                            font-size: 0.8em;
+                            font-weight: 700;
+                            line-height: 1.1;
+                            text-align: center;
+                            white-space: nowrap;
+                          "
+                        >
+                          Combine * 1
+                        </div>
+                      </itemCenter>
+                      <itemCenter
+                        :imgUrl="imageUrl('ticketHandleBtBg')"
+                        :class="{ 'collect-action-disabled': !canRedeemActiveCards }"
+                        style="width: 25vw; margin: 0; padding: 0"
+                        contentStyle="padding: 2vw 3vw; flex-direction: column; gap: 0.5vw; align-items: center; justify-content: center;"
+                        @click="handleCardRedeem"
+                      >
+                        <div
+                          style="
+                            color: #fff;
+                            font-size: 0.8em;
+                            font-weight: 700;
+                            line-height: 1.1;
+                            text-align: center;
+                            white-space: nowrap;
+                          "
+                        >
+                          Redeem
+                        </div>
+                        <div
+                          style="
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            gap: 0.5vw;
+                            color: #fff;
+                            font-size: 0.8em;
+                            font-weight: 700;
+                            line-height: 1;
+                            white-space: nowrap;
+                          "
+                        >
+                          <img
+                            v-smart-img
+                            :src="imageUrl(activeCollectTicketImage)"
+                            alt=""
+                            style="width: 6vw; display: block"
+                          />
+                          <span style="color: #fff; font-size: 1em; font-weight: 700">
+                            *1
+                          </span>
+                        </div>
+                      </itemCenter>
+                    </div>
+                  </div>
+                </itemCenter>
+
+                <div
+                  v-else-if="imageName === 'taskModule'"
+                  style="
+                    width: 100vw;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 2vw;
+                    margin: 0;
+                    padding: 0 2vw;
+                    box-sizing: border-box;
+                  "
+                >
+                  <!-- 任务模块：复用 Season5 的任务列表字段，不展示任务类型图标和票券图标 -->
+                  <itemCenter
+                    v-for="task in taskList"
+                    :key="task.taskCode || task.id"
+                    :imgUrl="imageUrl('taskItemBg')"
+                    style="width: 100%; margin: 0; padding: 0"
+                    contentStyle="display: flex; padding: 7vw; justify-content: space-between; align-items: center;"
+                  >
+                    <div
+                      style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vw"
+                    >
+                      <div
+                        style="color: #fff; font-size: 0.9em; font-weight: 590; line-height: 1.2"
+                      >
+                        {{ showTarget(task) }}
+                      </div>
+                      <div style="font-size: 0.9em; display: flex; align-items: center; gap: 1vw">
+                        <span style="color: #fff; font-size: 1em; font-weight: 590">Rewards:</span>
+                        <img
+                          v-smart-img
+                          :src="imageUrl('Gameticket')"
+                          :alt="t('ticket')"
+                          width="20vw"
+                          style="display: block"
+                        />
+                        <span style="color: #fff; font-size: 1em; font-weight: 590"
+                          >*{{ task.rewardValue }}</span
+                        >
+                      </div>
+                    </div>
+
+                    <div style="width: 17vw; flex: 0 0 17vw">
+                      <!-- 前往任务 -->
+                      <itemCenter
+                        v-if="task.taskStatus == 0"
+                        style=""
+                        :imgUrl="imageUrl('taskBtGo')"
+                      >
+                        <div style="font-size: 1em; font-weight: 600; white-space: nowrap">
+                          {{ t('task_go') }}
+                        </div>
+                      </itemCenter>
+
+                      <!-- 领取抽奖券 -->
+                      <itemCenter
+                        v-else-if="task.taskStatus === 1"
+                        style=""
+                        :imgUrl="imageUrl('taskBtReceive')"
+                        @click="receiveTaskReward(task.taskCode)"
+                      >
+                        <div style="font-size: 1em; font-weight: 600; white-space: nowrap">
+                          {{ t('task_receive') }}
+                        </div>
+                      </itemCenter>
+
+                      <!-- 已完成 -->
+                      <itemCenter v-else style="" :imgUrl="imageUrl('taskBtReceived')">
+                        <div style="font-size: 0.9em; font-weight: 600; white-space: nowrap">
+                          {{ t('task_received') }}
+                        </div>
+                      </itemCenter>
+                    </div>
+                  </itemCenter>
+                </div>
+
+                <itemCenter
+                  v-else
+                  :imgUrl="imageUrl(imageName)"
+                  style="width: 100vw; margin: 0; padding: 0"
+                  contentStyle="padding: 0;"
+                />
+              </template>
+            </div>
+
+            <div
+              v-else-if="isPersonalRewardSection"
+              style="
+                width: 100vw;
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                gap: 2vw;
+              "
+            >
+              <!-- Personal Rank / Reward：三套奖励从上往下展示 -->
+              <itemCenter
+                v-for="(rewardTop, topIndex) in personalRewardTops"
+                :key="rewardTop.rule?.id || topIndex"
+                :imgUrl="imageUrl(`RewardTop${topIndex + 1}`)"
+                style="width: 100vw; margin: 0; padding: 0"
+                contentStyle="padding: 25.5vw 9vw 5vw; align-items: flex-start; justify-content: center; box-sizing: border-box;"
+              >
+                <div style="width: 100%; display: flex; align-items: center; gap: 3.5vw">
+                  <!-- 左侧主奖励：每套奖励的第一个奖励大图展示 -->
+                  <div
+                    v-if="getRewardTopMainReward(rewardTop)"
+                    style="
+                      width: 33vw;
+                      flex: 0 0 33vw;
+                      height: 100%;
+                      display: flex;
+                      flex-direction: column;
+                      justify-content: flex-start;
+                      align-items: center;
+                      gap: 4vw;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 100%;
+                        height: 68vw;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                      "
+                    >
+                      <img
+                        :src="getRewardTopMainReward(rewardTop).cover || ''"
+                        alt=""
+                        style="width: 92%; display: block; object-fit: contain"
+                        @error="
+                          (event) =>
+                            handleRewardImageError(event, getRewardTopMainReward(rewardTop).type)
+                        "
+                      />
+                    </div>
+                    <div
+                      style="
+                        color: #fff;
+                        font-size: 1em;
+                        font-weight: 700;
+                        line-height: 1.1;
+                        text-align: center;
+                      "
+                    >
+                      {{ getRewardDisplayText(getRewardTopMainReward(rewardTop)) }}
+                    </div>
+                  </div>
+
+                  <!-- 右侧小奖励：前两行每行两个，第三行单个展示位居中 -->
+                  <div
+                    style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.7vw"
+                  >
+                    <div
+                      v-for="(row, rowIndex) in getRewardTopGridRows(rewardTop)"
+                      :key="`${topIndex}-${rowIndex}`"
+                      style="display: flex; justify-content: center; gap: 2.7vw"
+                    >
+                      <div
+                        v-if="rowIndex === 2 && row.length === 0"
+                        aria-hidden="true"
+                        style="width: calc((100% - 2vw) / 2); min-width: 0; visibility: hidden"
+                      >
+                        <div style="width: 100%; aspect-ratio: 1/1"></div>
+                        <div style="font-size: 0.8em; line-height: 1.1">&nbsp;</div>
+                      </div>
+                      <div
+                        v-for="(reward, rewardIndex) in row"
+                        :key="getRewardRenderKey(reward, rewardIndex)"
+                        style="
+                          width: calc((100% - 2vw) / 2);
+                          min-width: 0;
+                          display: flex;
+                          flex-direction: column;
+                          align-items: center;
+                          gap: 0.5vw;
+                        "
+                      >
+                        <div
+                          style="
+                            width: 100%;
+                            aspect-ratio: 1/1;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          "
+                        >
+                          <img
+                            :src="reward.cover || ''"
+                            alt=""
+                            style="width: 88%; display: block; object-fit: contain"
+                            @error="(event) => handleRewardImageError(event, reward.type)"
+                          />
+                        </div>
+                        <div
+                          style="
+                            width: 100%;
+                            color: #fff;
+                            font-size: 0.8em;
+                            font-weight: 700;
+                            line-height: 1.1;
+                            text-align: center;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                          "
+                        >
+                          {{ getRewardDisplayText(reward) }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </itemCenter>
+            </div>
+
+            <div
+              v-else-if="isRoomRewardSection"
+              style="width: 100vw; margin: 0; padding: 0; box-sizing: border-box"
+            >
+              <!-- Room Rank / Reward：直接展示规则奖励图 -->
+              <img
+                v-smart-img
+                :src="imageUrl('ruleActivity')"
+                alt=""
+                style="width: 100vw; display: block"
+              />
+            </div>
+
+            <div
+              v-else-if="isRankingSection"
+              style="
+                width: 100vw;
+                margin: 0;
+                padding: 0 0 12vw;
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                gap: 4vw;
+              "
+            >
+              <!-- 活动礼物模块：参考 KingAndQueen 每周礼物结构，使用 giftBg 承载 -->
+              <itemCenter
+                v-if="isPersonalRankingSection"
+                :imgUrl="imageUrl('giftBg')"
+                style="width: 100%; margin: 0; padding: 0"
+                contentStyle="padding: 0;flex-direction: column;align-items: center;"
+              >
+                <div
+                  style="
+                    width: 89vw;
+                    display: flex;
+                    align-items: flex-start;
+                    gap: 4vw;
+                    margin-top: 18vw;
+                  "
+                >
+                  <div
+                    v-for="(gift, index) in weeklyGifts"
+                    :key="gift.giftId || index"
+                    style="
+                      flex: 1;
+                      min-width: 0;
+                      display: flex;
+                      flex-direction: column;
+                      align-items: center;
+                      gap: 2vw;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 100%;
+                        aspect-ratio: 1/1;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                      "
+                    >
+                      <img
+                        :src="gift.giftPhoto"
+                        alt=""
+                        style="width: 70%; aspect-ratio: 1/1; object-fit: contain; display: block"
+                      />
+                    </div>
+
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 0.4vw;
+                      "
+                    >
+                      <img
+                        v-smart-img
+                        :src="coinIcon"
+                        alt=""
+                        style="display: block; width: 1.3em; aspect-ratio: 1/1"
+                      />
+                      <div
+                        style="
+                          color: #fff;
+                          font-size: 1em;
+                          font-weight: 590;
+                          text-align: center;
+                          white-space: nowrap;
+                        "
+                      >
+                        {{ gift.giftCandy }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </itemCenter>
+
+              <!-- 排行榜前三名：使用 GulbenFestival 私有 TopUser 组件 -->
+              <div
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  gap: 2vw;
+                  margin: 0;
+                "
+              >
+                <div style="flex: 1; min-width: 0">
+                  <TopUser
+                    ranking="2"
+                    :BorderImgUrl="imageUrl('top2')"
+                    :avatarUrl="rankingTop3[1].userAvatar"
+                    :name="rankingTop3[1].userName"
+                    :distributionValue="rankingTop3[1].amount"
+                    :valueIconUrl="coinIcon"
+                    :avatar-square="isRoomRankingSection"
+                    style="width: 100%"
+                  />
+                </div>
+                <div style="flex: 1.5; min-width: 0">
+                  <TopUser
+                    ranking="1"
+                    :BorderImgUrl="imageUrl('top1')"
+                    :avatarUrl="rankingTop3[0].userAvatar"
+                    :name="rankingTop3[0].userName"
+                    :distributionValue="rankingTop3[0].amount"
+                    :valueIconUrl="coinIcon"
+                    :avatar-square="isRoomRankingSection"
+                    style="width: 100%"
+                  />
+                </div>
+                <div style="flex: 1; min-width: 0">
+                  <TopUser
+                    ranking="3"
+                    :BorderImgUrl="imageUrl('top3')"
+                    :avatarUrl="rankingTop3[2].userAvatar"
+                    :name="rankingTop3[2].userName"
+                    :distributionValue="rankingTop3[2].amount"
+                    :valueIconUrl="coinIcon"
+                    :avatar-square="isRoomRankingSection"
+                    style="width: 100%"
+                  />
+                </div>
+              </div>
+
+              <!-- 第四名开始的排行榜 -->
+              <div v-if="rankingListAfterTop3.length" style="position: relative; z-index: 2">
+                <itemCenter
+                  v-for="(listItem, index) in rankingListAfterTop3"
+                  :key="listItem.userId || index"
+                  :imgUrl="imageUrl('RankingItem')"
+                  :contentStyle="`padding: 0 8vw`"
+                  style="width: 100%; margin: 0 0 5vw; padding: 0"
+                >
+                  <div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 2vw">
+                    <div style="color: #fff; font-size: 1.5em; font-weight: 700">
+                      {{ listItem.rank }}
+                    </div>
+                    <img
+                      :src="listItem.userAvatar || ''"
+                      alt=""
+                      :class="['ranking-avatar', { 'ranking-avatar-square': isRoomRankingSection }]"
+                      style="display: block; width: 3.5em; aspect-ratio: 1/1; object-fit: cover"
+                    />
+                    <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+                      <div
+                        style="
+                          color: #fff;
+                          font-size: 1em;
+                          font-weight: 860;
+                          overflow: hidden;
+                          white-space: nowrap;
+                          text-overflow: ellipsis;
+                        "
+                      >
+                        {{ listItem.userName }}
+                      </div>
+                      <div style="color: #fff; font-size: 1em; font-weight: 590">
+                        {{ t('user_id_prefix') }} {{ listItem.specialAccount || listItem.account }}
+                      </div>
+                      <div
+                        v-if="!isRoomRankingSection"
+                        style="display: flex; align-items: center; gap: 1vw; margin-top: 0.5vw"
+                      >
+                        <img
+                          v-smart-img
+                          :src="imageUrl('vip1')"
+                          alt=""
+                          style="width: 12vw; display: block"
+                        />
+                        <itemCenter
+                          :imgUrl="imageUrl('userLevel1Bg')"
+                          style="width: 12vw; margin: 0; padding: 0"
+                          contentStyle="padding: 0;"
+                        />
+                        <itemCenter
+                          :imgUrl="imageUrl('wealthLevel1Bg')"
+                          style="width: 12vw; margin: 0; padding: 0"
+                          contentStyle="padding: 0;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    style="
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      gap: 0.4vw;
+                      color: #fff;
+                      font-size: 1em;
+                      font-weight: 700;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      :src="coinIcon"
+                      alt=""
+                      style="display: block; width: 1.3em; aspect-ratio: 1/1"
+                    />
+                    <span style="color: #fff; font-size: 1em; font-weight: 700">
+                      {{ listItem.amount || 0 }}
+                    </span>
+                  </div>
+                </itemCenter>
+              </div>
+              <div
+                ref="rankingLoadmore"
+                style="width: 100%; height: 1px; margin: 0; padding: 0"
+              ></div>
+            </div>
+
+            <!-- 当前模块临时内容：只保留无边框、无额外间距的预览结构 -->
+            <div
+              v-else
+              style="
+                min-height: 58vw;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 0;
+                margin: 0;
+                padding: 0;
+              "
+            >
+              <img
+                v-for="imageName in activePreviewImages"
+                :key="imageName"
+                v-smart-img
+                :src="imageUrl(imageName)"
+                alt=""
+                class="preview-image"
+              />
+              <div
+                style="
+                  color: rgba(255, 246, 216, 0.86);
+                  font-size: 1em;
+                  font-weight: 700;
+                  text-align: center;
+                "
+              >
+                {{ activeContentTitle }}
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <!-- Personal Rank / Ranking 下固定贴底展示我的排名 -->
+      <itemCenter
+        v-if="isRankingSection"
+        style="
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          width: min(100vw, 480px);
+          margin: 0 auto;
+          padding: 0;
+        "
+        :imgUrl="imageUrl('RankingItem')"
+        :contentStyle="`padding: 2vw 8vw;`"
+      >
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 2vw;
+          "
+        >
+          <div style="color: #fff; font-size: 1em; font-weight: 700">
+            {{ myRanking.rank || 999 }}
+          </div>
+          <img
+            :src="myRanking.userAvatar || ''"
+            alt=""
+            :class="['ranking-avatar', { 'ranking-avatar-square': isRoomRankingSection }]"
+            style="display: block; width: 4em; aspect-ratio: 1/1; object-fit: cover"
+          />
+          <div style="flex: 1; min-width: 0">
+            <div
+              style="
+                color: #fff;
+                font-size: 1em;
+                font-weight: 860;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              "
+            >
+              {{ myRanking.userName }}
+            </div>
+            <div
+              v-if="isRoomRankingSection"
+              style="
+                color: #fff;
+                font-size: 1em;
+                font-weight: 590;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              "
+            >
+              {{ t('user_id_prefix') }} {{ myRanking.specialAccount || myRanking.account }}
+            </div>
+            <div v-else style="display: flex; align-items: center; gap: 1vw; margin-top: 0.5vw">
+              <img v-smart-img :src="imageUrl('vip1')" alt="" style="width: 10vw; display: block" />
+              <itemCenter
+                :imgUrl="imageUrl('userLevel1Bg')"
+                style="width: 10vw; margin: 0; padding: 0"
+                contentStyle="padding: 0;"
+              />
+              <itemCenter
+                :imgUrl="imageUrl('wealthLevel1Bg')"
+                style="width: 10vw; margin: 0; padding: 0"
+                contentStyle="padding: 0;"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.4vw;
+            color: #fff;
+            font-size: 1em;
+            font-weight: 700;
+          "
+        >
+          <img
+            v-smart-img
+            :src="coinIcon"
+            alt=""
+            style="display: block; width: 1.3em; aspect-ratio: 1/1"
+          />
+          <span style="color: #fff; font-size: 1em; font-weight: 700">
+            {{ myRanking.amount || 0 }}
+          </span>
+        </div>
+      </itemCenter>
+
+      <!-- 规则弹窗：点击遮罩关闭，内容使用 ruleInfoBg 背景承载 -->
+      <MaskLayer :maskLayerShow="maskLayerShow">
+        <div
+          style="
+            min-height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8vw 0;
+            box-sizing: border-box;
+          "
+          @click="closeRulePopup"
+        >
+          <div v-if="ruleShow" style="position: relative; width: min(92vw, 440px)" @click.stop>
+            <itemCenter
+              :imgUrl="imageUrl('ruleInfoBg')"
+              style="width: 100%; margin: 0; padding: 0"
+              contentStyle="padding: 27vw 7vw 12vw; align-items: stretch; justify-content: flex-start; box-sizing: border-box;"
+            >
+              <div
+                class="rule-popup-scroll"
+                style="
+                  max-height: 62vh;
+                  overflow-y: auto;
+                  color: #fff;
+                  font-size: 1.5em;
+                  font-weight: 600;
+                  line-height: 1.35;
+                  text-align: left;
+                "
+              >
+                <div>1、How to Earn Tickets:</div>
+                <div>(1)Complete designated series of tasks to earnTickets.</div>
+                <div style="margin-top: 2vw">2、How to Use Tickets:</div>
+                <div>(1)Each Ticket can be used to randomly drawone R-grade Card.</div>
+                <div style="margin-top: 2vw">3、Card Combining& Upgrade:</div>
+                <div>(1)Combine 5 different R-grade Cards to randomlydraw one SR-grade Card.</div>
+                <div>(2)Combine 3 different SR-grade Cards torandomly draw one SSR-grade Card.</div>
+                <div style="margin-top: 2vw">4、Collect & Redeem Rewards:</div>
+                <div>
+                  (1)Collect 5 different R-grade Cards to redeem onechance to draw a Standard
+                  Reward.
+                </div>
+                <div>
+                  (2)Collect 3 different SR-grade Cards to redeemone chance to draw a Premium
+                  Reward.
+                </div>
+                <div>
+                  (3)Collect 2 different SSR-grade Cards to redeemone chance to draw a Deluxe
+                  Reward!
+                </div>
+              </div>
+            </itemCenter>
+          </div>
+        </div>
+      </MaskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+import { useLangStore } from '@/stores/lang'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages, preloadImagesIdle } from '@/utils/image/imagePreloader.js'
+import { showError } from '@/utils/toast.js'
+import { handleRewardImageError } from '@/utils/image/imageHandler.js'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+import {
+  apiGetActivityResource,
+  apiGetCardRewardMarquee,
+  apiGetCardRewardPrizeList,
+  apiGetCardTicketList,
+  apiPostCardBagList,
+  apiPostCardCombine,
+  apiPostCardDraw,
+  apiPostCardRedeem,
+} from '@/api/activity.js'
+import { ActTaskList, activityDetail, receiveTickets } from '@/api/lottery'
+import { getThisWeekRewardsAndGifts } from '@/api/topList.js'
+import { getMemberProfile } from '@/api/wallet'
+import { getMyWeekStarRanking, getWeekStarRanking } from '@/api/weeklyStar.js'
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import MaskLayer from '@/components/MaskLayer.vue'
+import TopUser from './components/topUser.vue'
+import { pageConfig } from './page.config.js'
+
+const { t, locale } = useI18n()
+const langStore = useLangStore()
+const coinIcon = new URL('../../../assets/icon/Azizi/coin.png', import.meta.url).href
+
+const gulbenActivityId = '1001'
+const kingQueenGiftTemplateId = '1966020557831610370'
+const weeklyStarPageSize = 10
+
+const isLoading = ref(true)
+const activeTopTab = ref(pageConfig.modules.tabs.defaultValue)
+const activeChildTab = ref('')
+const activeLotteryIndex = ref(0)
+const isLotteryRolling = ref(false)
+const isCardDrawing = ref(false)
+const isCardCombining = ref(false)
+const isCardRedeeming = ref(false)
+const activeLotteryPoolIndex = ref(0)
+const activeCollectGameIndex = ref(0)
+const ruleShow = ref(false)
+const activityId = ref(gulbenActivityId)
+const activityCode = ref(pageConfig.activity.activityCode || '')
+const activity = ref({})
+const Days = ref(0)
+const Hours = ref('00')
+const Minutes = ref('00')
+const Seconds = ref('00')
+const weeklyGifts = ref([
+  {
+    giftPhoto: getPngUrl(pageConfig.assetPath, 'redeemRGift'),
+    giftCandy: 0,
+  },
+  {
+    giftPhoto: getPngUrl(pageConfig.assetPath, 'redeemSRLamb'),
+    giftCandy: 0,
+  },
+  {
+    giftPhoto: getPngUrl(pageConfig.assetPath, 'redeemSSRGoat'),
+    giftCandy: 0,
+  },
+])
+const rankingPageNo = ref(1)
+const ranking = ref([])
+const rankingAdd = ref([])
+const myRanking = ref({})
+const userInfo = ref({})
+const rankingLoaded = ref(false)
+const loadedRankingType = ref('')
+const rankingLoading = ref(false)
+const rankingHasMore = ref(true)
+const rankingLoadmore = ref(null)
+const personalRewardLoaded = ref(false)
+const activityRewards = ref([])
+const cardTicketList = ref([])
+const cardRewardPrizePools = ref({})
+const cardRewardMarqueeList = ref([])
+const cardBagPools = ref({})
+const taskList = ref([
+  {
+    taskCode: 'GF_MIC_TIME_30',
+    taskType: 1,
+    taskName: 'Stay on mic',
+    targetType: 'MIC_TIME',
+    currentValue: 12,
+    targetValue: 30,
+    rewardValue: 1,
+    taskStatus: 0,
+  },
+  {
+    taskCode: 'GF_SEND_GIFT_5',
+    taskType: 2,
+    taskName: 'Send 5 gifts',
+    targetType: 'SEND_GIFT',
+    currentValue: 3,
+    targetValue: 5,
+    rewardValue: 2,
+    taskStatus: 1,
+  },
+  {
+    taskCode: 'GF_RECHARGE_10',
+    taskType: 5,
+    taskName: 'Daily total recharge amount: $10',
+    targetType: 'RECHARGE_AMOUNT',
+    currentValue: 10,
+    targetValue: 10,
+    rewardValue: 3,
+    taskStatus: 2,
+  },
+])
+
+let countdownTimer = null
+let lotteryAnimationTimer = null
+let rankingObserver = null
+
+const createLotteryPrizes = (poolName, count) =>
+  Array.from({ length: count }, (_, index) => ({
+    id: `${poolName}-${index}`,
+    index,
+    renderKey: `${poolName}-${index}`,
+  }))
+
+const lotteryPoolModes = [
+  {
+    name: 'lotteryR',
+    poolType: 'STANDARD',
+    ticketImage: 'ticketR',
+    rowCounts: [2, 3, 2],
+    listClass: '',
+    itemClass: '',
+    prizes: createLotteryPrizes('lotteryR', 7),
+  },
+  {
+    name: 'lotterySR',
+    poolType: 'PREMIUM',
+    ticketImage: 'ticketSR',
+    rowCounts: [3],
+    listClass: 'lottery-prize-list-large',
+    itemClass: 'lottery-prize-item-sr',
+    prizes: createLotteryPrizes('lotterySR', 3),
+  },
+  {
+    name: 'lotterySSR',
+    poolType: 'LUXURY',
+    ticketImage: 'ticketSSR',
+    rowCounts: [2],
+    listClass: 'lottery-prize-list-large',
+    itemClass: 'lottery-prize-item-ssr',
+    prizes: createLotteryPrizes('lotterySSR', 2),
+  },
+]
+const collectTicketItems = [
+  {
+    type: 'STANDARD',
+    image: 'ticketR',
+  },
+  {
+    type: 'PREMIUM',
+    image: 'ticketSR',
+  },
+  {
+    type: 'LUXURY',
+    image: 'ticketSSR',
+  },
+]
+const collectGameModes = [
+  {
+    name: 'gameR',
+    cardGrade: 'R',
+    poolType: 'STANDARD',
+    title: 'gameTitleR',
+    ticketImage: 'ticketR',
+    cardTemplateIds: [2001, 2002, 2003, 2004, 2005],
+  },
+  {
+    name: 'gameSR',
+    cardGrade: 'SR',
+    poolType: 'PREMIUM',
+    title: 'gameTitleSR',
+    ticketImage: 'ticketSR',
+    cardTemplateIds: [2011, 2012, 2013],
+  },
+  {
+    name: 'gameSSR',
+    cardGrade: 'SSR',
+    poolType: 'LUXURY',
+    title: 'gameTitleSSR',
+    ticketImage: 'ticketSSR',
+    cardTemplateIds: [2021, 2022],
+  },
+]
+
+// 卡包模板图片映射：接口返回对应 cardTemplateId 后，替换默认 cardBackBg。
+const cardTemplateImageMap = {
+  2001: 'redeemR2001',
+  2002: 'redeemR2002',
+  2003: 'redeemR2003',
+  2004: 'redeemR2004',
+  2005: 'redeemR2005',
+  2011: 'redeemSR2011',
+  2012: 'redeemSR2012',
+  2013: 'redeemSR2013',
+  2021: 'redeemSSR2021',
+  2022: 'redeemSSR2022',
+}
+
+// 多语言方向：当前只根据语言类型判断是否需要 RTL 布局。
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isRtlLayout = computed(() => currentLangType.value === 'ar')
+
+const imageUrl = (filename) => getPngUrl(pageConfig.assetPath, filename)
+
+// 多语言图片：阿语图片存在时按 `_ar` 后缀读取，否则由资源层回退原图。
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+// 一级标签配置归一化：字符串写法和对象写法都转成统一结构。
+const normalizeTab = (item, index) => {
+  if (typeof item === 'string') {
+    return {
+      value: item,
+      label: item,
+      section: pageConfig.modules.sections[index],
+    }
+  }
+
+  return {
+    value: item.value,
+    label: item.label || item.labelKey || item.value,
+    section: pageConfig.modules.sections[index],
+  }
+}
+
+// 一级标签：只展示已启用的 section。
+const visibleTopTabs = computed(() => {
+  if (!pageConfig.modules.tabs.enabled) {
+    return []
+  }
+
+  return pageConfig.modules.tabs.items
+    .map(normalizeTab)
+    .filter((tab) => tab.section?.enabled !== false)
+})
+
+const currentTopTab = computed(() => {
+  return (
+    visibleTopTabs.value.find((tab) => tab.value === activeTopTab.value) || visibleTopTabs.value[0]
+  )
+})
+
+// 当前一级标签和对应 section。
+const currentTopSection = computed(() => {
+  return currentTopTab.value?.section
+})
+
+// 二级标签：读取当前一级 section.children.tabs / children.sections。
+const visibleChildTabs = computed(() => {
+  const children = currentTopSection.value?.children
+  if (!children?.tabs?.enabled) {
+    return []
+  }
+
+  return children.tabs.items
+    .map((item, index) => {
+      const section = children.sections?.[index]
+      const value = typeof item === 'string' ? item : item.value
+      return {
+        value,
+        label: typeof item === 'string' ? item : item.label || item.labelKey || value,
+        section,
+      }
+    })
+    .filter((tab) => tab.section?.enabled !== false)
+})
+
+const currentChildTab = computed(() => {
+  return (
+    visibleChildTabs.value.find((tab) => tab.value === activeChildTab.value) ||
+    visibleChildTabs.value[0]
+  )
+})
+
+// 当前真正生效的内容区：优先取二级标签，没有二级标签时取一级 section。
+const activeSection = computed(() => {
+  return currentChildTab.value?.section || currentTopSection.value
+})
+
+const isPersonalRankingSection = computed(() => {
+  return (
+    currentTopSection.value?.name === 'personalRank' && currentChildTab.value?.value === 'Ranking'
+  )
+})
+
+const isRoomRewardSection = computed(() => {
+  return currentTopSection.value?.name === 'roomRank' && currentChildTab.value?.value === 'Reward'
+})
+
+const isRoomRankingSection = computed(() => {
+  return currentTopSection.value?.name === 'roomRank' && currentChildTab.value?.value === 'Ranking'
+})
+
+const isRankingSection = computed(() => {
+  return isPersonalRankingSection.value || isRoomRankingSection.value
+})
+
+const activePreviewImages = computed(() => {
+  return activeSection.value?.previewImages || []
+})
+
+// 模块大背景容器：md 中 images.container 或 page.config 中 containerImages 都会按顺序渲染。
+const activeContainerImages = computed(() => {
+  return activeSection.value?.containerImages || activeSection.value?.images?.container || []
+})
+
+const activeLotteryPoolMode = computed(() => {
+  return lotteryPoolModes[activeLotteryPoolIndex.value] || lotteryPoolModes[0]
+})
+
+const activeLotteryPrizes = computed(() => {
+  const poolPrizes = cardRewardPrizePools.value[activeLotteryPoolMode.value.poolType]
+
+  if (!Array.isArray(poolPrizes) || !poolPrizes.length) {
+    return activeLotteryPoolMode.value.prizes || []
+  }
+
+  return [...poolPrizes]
+    .sort((a, b) => Number(a.sortOrder || 0) - Number(b.sortOrder || 0))
+    .map((prize, index) => ({
+      ...prize,
+      index,
+      renderKey: `${prize.poolType || activeLotteryPoolMode.value.poolType}-${prize.id}-${index}`,
+    }))
+})
+
+const activeLotteryTicketImage = computed(
+  () => activeLotteryPoolMode.value.ticketImage || 'ticketR',
+)
+
+const activeLotteryPrizeRows = computed(() => {
+  const prizes = activeLotteryPrizes.value
+  const rows = []
+  let cursor = 0
+
+  activeLotteryPoolMode.value.rowCounts.forEach((count) => {
+    const row = prizes.slice(cursor, cursor + count)
+    if (row.length) {
+      rows.push(row)
+    }
+    cursor += count
+  })
+
+  if (cursor < prizes.length) {
+    rows.push(prizes.slice(cursor))
+  }
+
+  return rows
+})
+
+const activeCollectGameMode = computed(() => {
+  return collectGameModes[activeCollectGameIndex.value] || collectGameModes[0]
+})
+
+const activeCollectGameTitle = computed(() => activeCollectGameMode.value.title)
+
+const activeCollectTicketImage = computed(
+  () => activeCollectGameMode.value.ticketImage || 'ticketR',
+)
+
+const activeCollectCards = computed(() => {
+  const cardGrade = activeCollectGameMode.value.cardGrade
+  const cards = cardBagPools.value[cardGrade] || []
+  const cardMap = new Map(cards.map((card) => [Number(card.cardTemplateId), card]))
+
+  return activeCollectGameMode.value.cardTemplateIds.map((cardTemplateId) => {
+    const card = cardMap.get(cardTemplateId)
+    return {
+      ...card,
+      cardTemplateId,
+      imageName: card ? cardTemplateImageMap[cardTemplateId] || 'cardBackBg' : 'cardBackBg',
+      isCardBack: !card || !cardTemplateImageMap[cardTemplateId],
+      quantity: Number(card?.quantity || 0),
+    }
+  })
+})
+
+const activeOwnedCollectCardTemplateIds = computed(() => {
+  return activeCollectCards.value
+    .filter((card) => !card.isCardBack && card.quantity > 0)
+    .map((card) => String(card.cardTemplateId))
+})
+
+const activeCollectRequiredCardCount = computed(() => {
+  return activeCollectGameMode.value.cardTemplateIds.length
+})
+
+const canCombineActiveCards = computed(() => {
+  return (
+    activeCollectGameMode.value.name !== 'gameSSR' &&
+    activeOwnedCollectCardTemplateIds.value.length >= activeCollectRequiredCardCount.value
+  )
+})
+
+const canRedeemActiveCards = computed(() => {
+  return activeOwnedCollectCardTemplateIds.value.length >= activeCollectRequiredCardCount.value
+})
+
+const cardDrawTicketCount = computed(() => getTicketRemainingCount('CARD'))
+
+const maskLayerShow = computed(() => ruleShow.value)
+
+const weeklyStarRankingType = computed(() => {
+  if (isRoomRankingSection.value) {
+    return (
+      pageConfig.activity.roomRankActivityType ||
+      pageConfig.activity.personalRankActivityType ||
+      'THIS_WEEK'
+    )
+  }
+
+  return pageConfig.activity.personalRankActivityType || 'THIS_WEEK'
+})
+
+const personalRewardActivityType = computed(() => {
+  return pageConfig.activity.rewardActivityType || 'DAILY_RECHARGE_TASK2'
+})
+
+const rankingTotal = computed(() => [...ranking.value, ...rankingAdd.value])
+
+const rankingTop3 = computed(() => {
+  const top3 = [...rankingTotal.value]
+  if (top3.length < 3) {
+    top3.push(
+      ...Array.from({ length: 3 - top3.length }, () => ({
+        userAvatar: '',
+        userName: '',
+        amount: '',
+      })),
+    )
+  }
+  return top3
+})
+
+const rankingListAfterTop3 = computed(() => rankingTotal.value.filter((_, index) => index >= 3))
+
+const isPersonalRewardSection = computed(() => {
+  return (
+    currentTopSection.value?.name === 'personalRank' && currentChildTab.value?.value === 'Reward'
+  )
+})
+
+const fallbackPersonalRewardTops = computed(() => {
+  const rewardImages = [
+    'redeemRGift',
+    'redeemRGoat',
+    'redeemRLamp',
+    'redeemRLight',
+    'redeemRMoon',
+    'redeemSRLamb',
+  ]
+
+  return Array.from({ length: 3 }, (_, topIndex) => ({
+    rule: {
+      id: `fallback-${topIndex}`,
+    },
+    propsGroup: {
+      activityRewardProps: rewardImages.map((imageName, rewardIndex) => ({
+        type: 'GIFT',
+        cover: imageUrl(imageName),
+        content: `${rewardIndex + 1}`,
+      })),
+    },
+  }))
+})
+
+const personalRewardTops = computed(() => {
+  const rewardTops = activityRewards.value.length
+    ? activityRewards.value
+    : fallbackPersonalRewardTops.value
+  return rewardTops.slice(0, 3)
+})
+
+const changeCollectGameMode = (step) => {
+  activeCollectGameIndex.value =
+    (activeCollectGameIndex.value + step + collectGameModes.length) % collectGameModes.length
+}
+
+const changeLotteryPoolMode = (step) => {
+  if (isLotteryRolling.value) {
+    return
+  }
+
+  activeLotteryPoolIndex.value =
+    (activeLotteryPoolIndex.value + step + lotteryPoolModes.length) % lotteryPoolModes.length
+  activeLotteryIndex.value = 0
+}
+
+// 任务目标展示：沿用 LuckyDollars Season5 的任务字段，当前先保留本地测试数据。
+const showTarget = (task) => {
+  if (task.targetType === 'MIC_TIME') {
+    const timeType = task.targetValue < 60
+    let currentValue = timeType ? task.currentValue : task.currentValue / 60
+    let targetValue = timeType ? task.targetValue : task.targetValue / 60
+    currentValue = Math.floor(currentValue * 10) / 10
+    targetValue = Math.floor(targetValue * 10) / 10
+    const timeUnit = timeType ? t('minutes_short') : t('hours_short')
+
+    return t('on_mic_progress', {
+      current: currentValue,
+      total: targetValue,
+      unit: timeUnit,
+    })
+  }
+
+  return `${task.taskName}(${task.currentValue}/${task.targetValue})`
+}
+
+const taskActivityId = computed(() => {
+  return activityId.value || gulbenActivityId
+})
+
+const getActivityDetail = async () => {
+  if (!activityCode.value) {
+    activity.value = {}
+    return
+  }
+
+  const resDetail = await activityDetail(activityCode.value)
+  if (resDetail.status && resDetail.body) {
+    activity.value = resDetail.body
+    activityId.value = resDetail.body.id || resDetail.body.activityId || activityId.value
+  } else {
+    activity.value = {}
+  }
+}
+
+const getTaskList = async () => {
+  const activityId = taskActivityId.value
+  if (!activityId) {
+    return
+  }
+
+  const resTaskList = await ActTaskList(activityId)
+  if (resTaskList.status && resTaskList.body) {
+    taskList.value = resTaskList.body
+  }
+}
+
+const getTicketRemainingCount = (ticketType) => {
+  const ticket = cardTicketList.value.find((item) => item.ticketType === ticketType)
+  return Number(ticket?.remainingCount || 0)
+}
+
+const getCardTicketList = async () => {
+  const resTicketList = await apiGetCardTicketList(gulbenActivityId)
+  if (resTicketList.status && resTicketList.body) {
+    cardTicketList.value = resTicketList.body
+  }
+}
+
+const getCardRewardPrizePools = async () => {
+  const prizePoolEntries = await Promise.all(
+    lotteryPoolModes.map(async (pool) => {
+      const resPrizeList = await apiGetCardRewardPrizeList(gulbenActivityId, pool.poolType)
+      return [pool.poolType, resPrizeList.status && resPrizeList.body ? resPrizeList.body : []]
+    }),
+  )
+
+  cardRewardPrizePools.value = Object.fromEntries(prizePoolEntries)
+}
+
+const getCardRewardMarquee = async () => {
+  const resMarquee = await apiGetCardRewardMarquee(gulbenActivityId)
+  if (resMarquee.status && resMarquee.body) {
+    cardRewardMarqueeList.value = resMarquee.body
+  }
+}
+
+const getCardBagListByGrade = async (cardGrade) => {
+  if (!cardGrade) {
+    return []
+  }
+
+  const resCardBag = await apiPostCardBagList({
+    activityId: gulbenActivityId,
+    cardGrade,
+    current: 1,
+    size: 20,
+  })
+
+  const records = resCardBag.status && resCardBag.body?.records ? resCardBag.body.records : []
+  cardBagPools.value = {
+    ...cardBagPools.value,
+    [cardGrade]: records,
+  }
+
+  return records
+}
+
+const getCardBagPools = async () => {
+  const cardBagEntries = await Promise.all(
+    collectGameModes.map(async (mode) => {
+      const records = await getCardBagListByGrade(mode.cardGrade)
+      return [mode.cardGrade, records]
+    }),
+  )
+
+  cardBagPools.value = Object.fromEntries(cardBagEntries)
+}
+
+const refreshCardBagGrades = async (cardGrades) => {
+  const uniqueGrades = [...new Set(cardGrades.filter(Boolean))]
+  await Promise.all(uniqueGrades.map((cardGrade) => getCardBagListByGrade(cardGrade)))
+}
+
+const handleCardDraw = async (drawCount = 1) => {
+  if (isCardDrawing.value) {
+    return
+  }
+
+  isCardDrawing.value = true
+
+  try {
+    const resDraw = await apiPostCardDraw({
+      activityId: gulbenActivityId,
+      drawCount,
+      needCoins: cardDrawTicketCount.value === 0,
+    })
+
+    if (resDraw.status) {
+      await Promise.all([
+        getCardTicketList(), // 刷新 CARD 抽卡票数量
+        getCardBagListByGrade('R'), // 抽卡只产出 R 级卡片，刷新当前 R 卡数量
+      ])
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  } finally {
+    isCardDrawing.value = false
+  }
+}
+
+const getCombineTargetGrade = () => {
+  if (activeCollectGameMode.value.cardGrade === 'R') {
+    return 'SR'
+  }
+
+  if (activeCollectGameMode.value.cardGrade === 'SR') {
+    return 'SSR'
+  }
+
+  return ''
+}
+
+const handleCardCombine = async () => {
+  if (isCardCombining.value || !canCombineActiveCards.value) {
+    return
+  }
+
+  isCardCombining.value = true
+
+  try {
+    const resCombine = await apiPostCardCombine({
+      activityId: gulbenActivityId,
+      cardTemplateIds: activeOwnedCollectCardTemplateIds.value,
+    })
+
+    if (resCombine.status) {
+      await refreshCardBagGrades([activeCollectGameMode.value.cardGrade, getCombineTargetGrade()])
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  } finally {
+    isCardCombining.value = false
+  }
+}
+
+const handleCardRedeem = async () => {
+  if (isCardRedeeming.value || !canRedeemActiveCards.value) {
+    return
+  }
+
+  isCardRedeeming.value = true
+
+  try {
+    const resRedeem = await apiPostCardRedeem({
+      activityId: gulbenActivityId,
+      cardTemplateIds: activeOwnedCollectCardTemplateIds.value,
+    })
+
+    if (resRedeem.status) {
+      await Promise.all([
+        getCardTicketList(), // 刷新 STANDARD / PREMIUM / LUXURY 奖励票数量
+        getCardBagListByGrade(activeCollectGameMode.value.cardGrade), // 刷新当前奖池卡片数量
+      ])
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  } finally {
+    isCardRedeeming.value = false
+  }
+}
+
+const initData = async () => {
+  await Promise.all([
+    getActivityDetail(), // 获取活动详情
+    getTaskList(), // 获取任务列表
+    getCardTicketList(), // 查询用户票券数量
+    getCardRewardPrizePools(), // 查询奖励池奖品列表
+    getCardRewardMarquee(), // 查询中奖飘窗列表
+    getCardBagPools(), // 查询用户卡包
+  ])
+}
+
+const receiveTaskReward = async (code) => {
+  const activityId = taskActivityId.value
+  if (!activityId || !code) {
+    return
+  }
+
+  try {
+    const resReceive = await receiveTickets({
+      activityId,
+      taskCode: code,
+    })
+    if (resReceive.status && resReceive.body) {
+      getTaskList()
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+const getWeeklyGifts = async () => {
+  const resRewardsAndGifts = await getThisWeekRewardsAndGifts(kingQueenGiftTemplateId)
+  if (resRewardsAndGifts.status && resRewardsAndGifts.body?.gifts?.length) {
+    weeklyGifts.value = resRewardsAndGifts.body.gifts.slice(0, 3)
+  }
+}
+
+const getPersonalRewardList = (rewardTop) => {
+  const rewards = rewardTop?.propsGroup?.activityRewardProps
+  if (!Array.isArray(rewards)) {
+    return []
+  }
+
+  const rewardList = rewards.slice(0, 6)
+  if (rewardList.length === 5) {
+    rewardList.push({
+      ...rewardList[4],
+      isCopiedPreviewReward: true,
+    })
+  }
+
+  return rewardList
+}
+
+const getRewardTopMainReward = (rewardTop) => {
+  return getPersonalRewardList(rewardTop)[0] || null
+}
+
+const getRewardTopGridRows = (rewardTop) => {
+  const rewards = getPersonalRewardList(rewardTop).slice(1, 6)
+  return [rewards.slice(0, 2), rewards.slice(2, 4), rewards.slice(4, 5)]
+}
+
+const getRewardDisplayText = (reward) => {
+  if (!reward) {
+    return ''
+  }
+
+  return formatRewardDisplay(reward.type, reward)
+}
+
+const getLotteryPrizeDisplayText = (prize) => {
+  if (!prize?.prizeType) {
+    return ''
+  }
+
+  return (
+    formatRewardDisplay(prize.prizeType, {
+      ...prize,
+      type: prize.prizeType,
+      content: prize.prizeValue,
+      quantity: prize.prizeValue,
+    }) || prize.prizeName
+  )
+}
+
+const getRewardRenderKey = (reward, index) => {
+  return [index, reward?.type || '', reward?.detailType || '', reward?.cover || ''].join('-')
+}
+
+const getPersonalRewardConfigs = async () => {
+  if (personalRewardLoaded.value) {
+    return
+  }
+
+  personalRewardLoaded.value = true
+
+  try {
+    const res = await apiGetActivityResource(personalRewardActivityType.value)
+    if (res.status && res.body) {
+      activityRewards.value = Array.isArray(res.body) ? res.body.slice(0, 3) : []
+    }
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+const normalizeWeeklyStarRankingItem = (item = {}, index = 0) => {
+  return {
+    ...item,
+    rank: item.rank || item.ranking || (index === null ? '' : index + 1),
+    userAvatar: item.userAvatar || '',
+    userName: item.userName || item.userNickname || item.nickname || '',
+    amount: item.amount ?? item.quantity ?? item.total ?? 0,
+    account: item.specialAccount || item.account || '',
+    specialAccount: item.specialAccount || '',
+  }
+}
+
+const getUserInfo = async () => {
+  if (userInfo.value?.id) {
+    return userInfo.value
+  }
+
+  const resUserInfo = await getMemberProfile()
+  if (resUserInfo.status && resUserInfo.body) {
+    userInfo.value = resUserInfo.body
+  }
+
+  return userInfo.value
+}
+
+const getMyPersonalRanking = async () => {
+  const profile = await getUserInfo()
+  if (!profile?.id) {
+    return
+  }
+
+  const resMyRanking = await getMyWeekStarRanking({
+    type: weeklyStarRankingType.value,
+    userId: profile.id,
+  })
+
+  if (resMyRanking.status && resMyRanking.body) {
+    myRanking.value = normalizeWeeklyStarRankingItem(resMyRanking.body, null)
+  }
+}
+
+const getPersonalRanking = async () => {
+  if (rankingLoading.value || !rankingHasMore.value) {
+    return
+  }
+
+  rankingLoading.value = true
+
+  try {
+    const resRanking = await getWeekStarRanking({
+      type: weeklyStarRankingType.value,
+      current: rankingPageNo.value,
+      size: weeklyStarPageSize,
+    })
+
+    if (resRanking.status && resRanking.body?.rankUsers) {
+      const rankUsers = resRanking.body.rankUsers
+      const records = rankUsers.records || []
+      const pageSize = Number(rankUsers.size || weeklyStarPageSize)
+      const total = Number(rankUsers.total || 0)
+      const startIndex = (rankingPageNo.value - 1) * pageSize
+      const list = records.map((item, index) =>
+        normalizeWeeklyStarRankingItem(item, startIndex + index),
+      )
+
+      if (rankingPageNo.value === 1) {
+        ranking.value = list
+      } else {
+        ranking.value.push(...list)
+      }
+
+      rankingAdd.value = []
+      rankingHasMore.value = records.length > 0 && rankingPageNo.value * pageSize < total
+
+      if (rankingHasMore.value) {
+        rankingPageNo.value += 1
+      }
+
+      return
+    }
+
+    ranking.value = []
+    rankingAdd.value = []
+    rankingHasMore.value = false
+  } finally {
+    rankingLoading.value = false
+  }
+}
+
+const loadPersonalRankingSection = async () => {
+  const rankingType = weeklyStarRankingType.value
+
+  if (rankingLoaded.value && loadedRankingType.value === rankingType) {
+    observeRankingLoadmore()
+    return
+  }
+
+  rankingLoaded.value = true
+  loadedRankingType.value = rankingType
+  rankingPageNo.value = 1
+  ranking.value = []
+  rankingAdd.value = []
+  myRanking.value = {}
+  rankingHasMore.value = true
+
+  try {
+    const loaders = [getMyPersonalRanking(), getPersonalRanking()]
+    if (isPersonalRankingSection.value) {
+      loaders.unshift(getWeeklyGifts())
+    }
+    await Promise.all(loaders)
+    observeRankingLoadmore()
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+const observeRankingLoadmore = async () => {
+  await nextTick()
+  if (!rankingObserver || !rankingLoadmore.value || !isRankingSection.value) {
+    return
+  }
+
+  rankingObserver.disconnect()
+  rankingObserver.observe(rankingLoadmore.value)
+}
+
+// 抽奖奖品占位：同一时间只允许一个奖品使用选中背景。
+const lotteryPrizeImage = (index) => {
+  return imageUrl(index === activeLotteryIndex.value ? 'lotteryPrizeActiveBg' : 'lotteryPrizeBg')
+}
+
+const normalizeLotteryIndex = (index) => {
+  const prizeCount = activeLotteryPrizes.value.length
+  if (!prizeCount) {
+    return 0
+  }
+
+  return (((Number(index) || 0) % prizeCount) + prizeCount) % prizeCount
+}
+
+// 抽奖结果位置计算：正式接口接入后，优先用接口返回的奖品 id/name 在奖池中查找位置。
+const getLotteryResultIndex = (drawResult) => {
+  if (typeof drawResult?.prizeIndex === 'number') {
+    return normalizeLotteryIndex(drawResult.prizeIndex)
+  }
+
+  return normalizeLotteryIndex(0)
+}
+
+// 抽奖动画：从左到右、从上到下依次切换奖品背景，最终停在接口返回的中奖位置。
+const startLotteryAnimation = (resultIndex) => {
+  return new Promise((resolve) => {
+    const prizeCount = activeLotteryPrizes.value.length
+    if (!prizeCount) {
+      resolve()
+      return
+    }
+
+    if (lotteryAnimationTimer) {
+      window.clearTimeout(lotteryAnimationTimer)
+    }
+
+    const targetIndex = normalizeLotteryIndex(resultIndex)
+    const minRounds = 3
+    const totalSteps = prizeCount * minRounds + targetIndex + 1
+    let step = 0
+
+    const roll = () => {
+      if (step >= totalSteps) {
+        activeLotteryIndex.value = targetIndex
+        lotteryAnimationTimer = null
+        window.setTimeout(resolve, 350)
+        return
+      }
+
+      activeLotteryIndex.value = step % prizeCount
+      step += 1
+
+      const progress = step / totalSteps
+      const delay = 70 + Math.round(progress * progress * 190)
+      lotteryAnimationTimer = window.setTimeout(roll, delay)
+    }
+
+    roll()
+  })
+}
+
+// 抽奖接口占位：后续对接接口时在这里替换成 drawOnce / drawTen 的真实请求。
+const requestLotteryDraw = async (drawCount) => {
+  return {
+    drawCount,
+    prizeIndex: Math.min(3, activeLotteryPrizes.value.length - 1),
+    results: [],
+  }
+}
+
+const handleLotteryDraw = async (drawCount = 1) => {
+  if (isLotteryRolling.value) {
+    return
+  }
+
+  isLotteryRolling.value = true
+
+  try {
+    const drawResult = await requestLotteryDraw(drawCount)
+    const resultIndex = getLotteryResultIndex(drawResult)
+    await startLotteryAnimation(resultIndex)
+  } finally {
+    isLotteryRolling.value = false
+  }
+}
+
+const activeContentTitle = computed(() => {
+  if (currentChildTab.value) {
+    return `${currentTopTab.value?.label || ''} / ${currentChildTab.value.label}`
+  }
+
+  return currentTopTab.value?.label || ''
+})
+
+const padTime = (value) => String(value).padStart(2, '0')
+
+// 获取目标时间（2026年6月1日上午5点，北京时间）
+const getTargetTime = () => {
+  const target = new Date(2026, 5, 1, 5, 0, 0) // 月份从0开始，5代表6月
+  return target.getTime()
+}
+
+// 计算倒计时：写法参考 LuckyDollars Season5，四个展示字段单独维护。
+const calculateCountdown = () => {
+  const targetTime = getTargetTime()
+  const diff = targetTime - Date.now()
+
+  if (!targetTime || diff <= 0) {
+    Days.value = 0
+    Hours.value = '00'
+    Minutes.value = '00'
+    Seconds.value = '00'
+
+    if (countdownTimer) {
+      window.clearInterval(countdownTimer)
+      countdownTimer = null
+    }
+    return
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / 86400)
+  Hours.value = padTime(Math.floor((totalSeconds % 86400) / 3600))
+  Minutes.value = padTime(Math.floor((totalSeconds % 3600) / 60))
+  Seconds.value = padTime(totalSeconds % 60)
+}
+
+// 启动倒计时：立即执行一次，之后每秒刷新。
+const startCountdown = () => {
+  if (countdownTimer) {
+    window.clearInterval(countdownTimer)
+  }
+
+  calculateCountdown()
+  countdownTimer = window.setInterval(calculateCountdown, 1000)
+}
+
+// 标签按钮背景：根据当前激活状态切换默认图和选中图。
+const tabButtonImage = (value) => {
+  return imageUrl(value === activeTopTab.value ? 'tagActiveBg' : 'tagBg')
+}
+
+const childTabButtonImage = (value) => {
+  return imageUrl(value === activeChildTab.value ? 'moduleActiveBg' : 'moduleBg')
+}
+
+const changeTopTab = (value) => {
+  activeTopTab.value = value
+}
+
+const changeChildTab = (value) => {
+  activeChildTab.value = value
+}
+
+// 规则弹窗：参考 LuckyDollars Season5，点击规则入口打开，点击遮罩关闭。
+const openRulePopup = () => {
+  ruleShow.value = true
+}
+
+const closeRulePopup = () => {
+  ruleShow.value = false
+}
+
+// 图片预加载：支持普通图片名和带 localized 标记的配置项。
+const resolvePreloadUrls = (items = []) => {
+  return items.map((item) => {
+    if (typeof item === 'string') {
+      return imageUrl(getImgName(item))
+    }
+
+    return imageUrl(item.localized ? getImgName(item.name) : item.name)
+  })
+}
+
+// 进入页面前阻塞加载首屏关键图，进入后后台加载其它图片。
+const completePreloading = async () => {
+  try {
+    await Promise.all([initData(), preloadImages(resolvePreloadUrls(pageConfig.preload.blocking))])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    isLoading.value = false
+    preloadImagesIdle(resolvePreloadUrls(pageConfig.preload.background))
+    observeRankingLoadmore()
+  }
+}
+
+// 切换一级标签时，同步选中当前模块的默认二级标签。
+watch(
+  currentTopSection,
+  (section) => {
+    const firstChild = section?.children?.tabs?.defaultValue || section?.children?.tabs?.items?.[0]
+    activeChildTab.value = typeof firstChild === 'string' ? firstChild : firstChild?.value || ''
+  },
+  { immediate: true },
+)
+
+watch(
+  isRankingSection,
+  (enabled) => {
+    if (enabled) {
+      loadPersonalRankingSection()
+    } else if (rankingObserver) {
+      rankingObserver.disconnect()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  isPersonalRewardSection,
+  (enabled) => {
+    if (enabled) {
+      getPersonalRewardConfigs()
+    }
+  },
+  { immediate: true },
+)
+
+// 页面初始化：设置文档方向、加载首屏图片并启动倒计时刷新。
+onMounted(() => {
+  locale.value && setDocumentDirection(locale.value)
+  if ('IntersectionObserver' in window) {
+    rankingObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (
+          entry.intersectionRatio > 0 &&
+          isRankingSection.value &&
+          rankingTotal.value.length !== 0 &&
+          rankingHasMore.value &&
+          !rankingLoading.value
+        ) {
+          getPersonalRanking()
+        }
+      })
+    })
+  }
+  completePreloading()
+  startCountdown()
+})
+
+// 页面卸载：清理倒计时定时器。
+onUnmounted(() => {
+  if (countdownTimer) {
+    window.clearInterval(countdownTimer)
+  }
+
+  if (lotteryAnimationTimer) {
+    window.clearTimeout(lotteryAnimationTimer)
+  }
+
+  if (rankingObserver) {
+    rankingObserver.disconnect()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.fullPage {
+  width: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+  background: #0b190d;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
+/* 第一行：规则按钮 */
+.rule-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 4vw;
+}
+
+[dir='rtl'] .rule-row {
+  justify-content: flex-start;
+}
+
+/* 第二行：倒计时 */
+.countdown-cell {
+  width: min(18vw, 88px);
+  min-width: 0;
+  flex: 0 1 min(18vw, 88px);
+}
+
+.countdown-value {
+  width: 100%;
+  color: #fff8d7;
+  font-size: 2em;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  text-shadow: 0 1px 2px rgba(63, 20, 57, 0.5);
+}
+
+.countdown-colon {
+  flex: 0 0 auto;
+  color: #fff8d7;
+  font-size: 2em;
+  font-weight: 800;
+  line-height: 1;
+  text-shadow: 0 1px 2px rgba(63, 20, 57, 0.5);
+}
+
+/* 第三行：一级标签和内容区内的二级标签 */
+.image-tab {
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  color: #6d3426;
+  font-weight: 800;
+  line-height: 1.1;
+  text-align: center;
+}
+
+.tab-background {
+  height: 100%;
+}
+
+.image-tab span {
+  display: block;
+  width: 100%;
+  font-size: 1em;
+  overflow-wrap: anywhere;
+  color: #9fff71;
+}
+
+.top-tab {
+  min-height: 18vw;
+  font-size: 1em;
+}
+
+.child-tab {
+  min-height: 12vw;
+  font-size: 1em;
+}
+
+.image-tab-active {
+  text-shadow: 0 1px 2px rgba(74, 30, 27, 0.55);
+}
+
+.image-tab-active span {
+  font-size: 1em;
+  color: #5b0000;
+}
+
+/* 第四行：当前标签内容占位区 */
+.lottery-prize-list {
+  --lottery-prize-gap: 3vw;
+}
+
+.lottery-prize-list-large {
+  --lottery-prize-gap: 1vw;
+}
+
+.lottery-prize-item {
+  width: calc((100% - var(--lottery-prize-gap) * 2) / 3);
+  min-width: 0;
+  flex: 0 0 calc((100% - var(--lottery-prize-gap) * 2) / 3);
+}
+
+.lottery-prize-item-sr {
+  width: calc((100% - var(--lottery-prize-gap) * 2) / 3);
+  flex-basis: calc((100% - var(--lottery-prize-gap) * 2) / 3);
+}
+
+.lottery-prize-item-ssr {
+  width: calc((100% - var(--lottery-prize-gap)) / 2.2);
+  flex-basis: calc((100% - var(--lottery-prize-gap)) / 2.2);
+}
+
+.preview-image {
+  width: min(58vw, 280px);
+  max-height: 42vw;
+  display: block;
+  object-fit: contain;
+}
+
+.ranking-avatar {
+  border-radius: 50%;
+}
+
+.ranking-avatar-square {
+  border-radius: 4px;
+}
+
+.rule-popup-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.rule-popup-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.collect-action-disabled {
+  filter: grayscale(1);
+  opacity: 0.55;
+}
+</style>
diff --git a/src/views/Activities/GulbenFestival/page.config.js b/src/views/Activities/GulbenFestival/page.config.js
new file mode 100644
index 0000000..f57ac4c
--- /dev/null
+++ b/src/views/Activities/GulbenFestival/page.config.js
@@ -0,0 +1,208 @@
+export const pageConfig = {
+  name: 'Gulben Festival',
+  routePath: '/activities/gulben-festival',
+  routeName: 'gulben-festival',
+  assetPath: 'Activities/GulbenFestival/',
+
+  activity: {
+    activityId: '1001',
+    activityCode: '',
+    activityType: '',
+    personalRankActivityType: 'THIS_WEEK',
+    roomRankActivityType: '',
+    rewardActivityType: 'DAILY_RECHARGE_TASK2',
+    periodText: '',
+  },
+
+  preload: {
+    blocking: ['bg', 'ruleBtBg', 'timeBg', 'tagActiveBg', 'tagBg', 'lotteryBg', 'collectGameBg'],
+    background: [
+      'barrageBg',
+      'cardBackBg',
+      'draw5BtBg',
+      'draw1Bt',
+      'GameDrawBtBg',
+      'Gameticket',
+      'gameTitleR',
+      'gameTitleSR',
+      'gameTitleSSR',
+      'giftBg',
+      'leftBt',
+      'lotteryPrizeActiveBg',
+      'lotteryPrizeBg',
+      'moduleActiveBg',
+      'moduleBg',
+      'redeemRGift',
+      'redeemRGoat',
+      'redeemRLamp',
+      'redeemRLight',
+      'redeemRMoon',
+      'redeemR2001',
+      'redeemR2002',
+      'redeemR2003',
+      'redeemR2004',
+      'redeemR2005',
+      'redeemSR2011',
+      'redeemSR2012',
+      'redeemSR2013',
+      'redeemSRLamb',
+      'redeemSRScroll',
+      'redeemSRTurkey',
+      'redeemSSR2021',
+      'redeemSSR2022',
+      'redeemSSRGoat',
+      'redeemSSRLamb',
+      'ruleActivity',
+      'ruleInfoBg',
+      'taskBtGo',
+      'taskBtReceive',
+      'taskBtReceived',
+      'taskItemBg',
+      'ticketHandleBtBg',
+      'ticketR',
+      'ticketSR',
+      'ticketSSR',
+      'RankingItem',
+      'RewardTop1',
+      'RewardTop2',
+      'RewardTop3',
+      'top1',
+      'top2',
+      'top3',
+      'vip1',
+      'userLevel1Bg',
+      'wealthLevel1Bg',
+    ],
+  },
+
+  modules: {
+    tabs: {
+      enabled: true,
+      defaultValue: 'CollectCards toWin Prizes',
+      items: ['CollectCards toWin Prizes', 'Personal Rank', 'Room Rank'],
+    },
+    sections: [
+      {
+        name: 'collectCards',
+        label: 'CollectCards toWin Prizes',
+        enabled: true,
+        apis: [],
+        images: ['tagActiveBg', 'tagBg'],
+        containerImages: ['lotteryBg', 'collectGameBg', 'taskModule'],
+        previewImages: [],
+        remark:
+          '一级标签内容区；container 大背景图使用 itemCenter 组件，宽度 100vw，从上往下排列；开发期 padding、margin、gap 先设为 0，后续再微调。',
+        children: {},
+      },
+      {
+        name: 'personalRank',
+        label: 'Personal Rank',
+        enabled: true,
+        apis: [],
+        images: ['tagActiveBg', 'tagBg'],
+        remark:
+          '一级标签内容区；图片为背景图，使用 itemCenter 组件居中换行展示英文标题文本，开发期间不加翻译',
+        children: {
+          tabs: {
+            enabled: true,
+            defaultValue: 'Reward',
+            items: ['Reward', 'Ranking'],
+          },
+          sections: [
+            {
+              name: 'Reward',
+              enabled: true,
+              apis: [],
+              images: ['moduleActiveBg', 'moduleBg'],
+              previewImages: ['RewardTop1', 'RewardTop2', 'RewardTop3'],
+              remark:
+                '二级奖励标签内容区；图片为背景图，使用 itemCenter 组件居中换行展示英文标题文本，开发期间不加翻译',
+              children: {},
+            },
+            {
+              name: 'Ranking',
+              enabled: true,
+              apis: [],
+              images: ['moduleActiveBg', 'moduleBg'],
+              previewImages: ['top1', 'top2', 'top3'],
+              remark:
+                '二级排行榜标签内容区；图片为背景图，使用 itemCenter 组件居中换行展示英文标题文本，开发期间不加翻译',
+              children: {},
+            },
+          ],
+        },
+      },
+      {
+        name: 'roomRank',
+        label: 'Room Rank',
+        enabled: true,
+        apis: [],
+        images: ['tagActiveBg', 'tagBg'],
+        remark:
+          '一级标签内容区；图片为背景图，使用 itemCenter 组件居中换行展示英文标题文本，开发期间不加翻译',
+        children: {
+          tabs: {
+            enabled: true,
+            defaultValue: 'Reward',
+            items: ['Reward', 'Ranking'],
+          },
+          sections: [
+            {
+              name: 'Reward',
+              enabled: true,
+              apis: [],
+              images: ['moduleActiveBg', 'moduleBg'],
+              previewImages: ['ruleActivity'],
+              remark:
+                'Room Rank / Reward 内容区；直接 100vw 展示 ruleActivity',
+              children: {},
+            },
+            {
+              name: 'Ranking',
+              enabled: true,
+              apis: [],
+              images: ['moduleActiveBg', 'moduleBg'],
+              previewImages: ['top1', 'top2', 'top3'],
+              remark:
+                '二级排行榜标签内容区；图片为背景图，使用 itemCenter 组件居中换行展示英文标题文本，开发期间不加翻译',
+              children: {},
+            },
+          ],
+        },
+      },
+    ],
+    popups: [
+      {
+        name: 'rule',
+        triggerImage: 'ruleBtBg',
+        component: 'MaskLayer',
+        backgroundImage: 'ruleInfoBg',
+        contentComponent: 'itemCenter',
+        closeRule: 'click mask to close, click popup content stop propagation',
+        textStyle: {
+          color: '#FFF',
+          fontSize: '1em',
+          fontWeight: 600,
+        },
+      },
+    ],
+    features: [
+      {
+        name: 'countdown',
+        enabled: '',
+        deadline: '',
+        images: ['timeBg'],
+        fields: {
+          endTime: '2026-06-01 05:00:00',
+          remainingText: '',
+        },
+        remark:
+          '倒计时方法参考 LuckyDollars Season5：Days/Hours/Minutes/Seconds 四个 ref + calculateCountdown/startCountdown；目标时间直接在 getTargetTime 中使用 new Date(2026, 5, 1, 5, 0, 0)，不解析中文；时分秒的中间用英文冒号：',
+      },
+    ],
+  },
+
+  images: {
+    localized: {},
+  },
+}