feat(新活动): 开斋节活动

src/locales/ar.json

@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "أ) تعليقات خبيثة أو شائعات أو تلميحات وما إلى ذلك للاعبين المشاركين أثناء الحدث",
   "ranking_help_rule_6": "ب) الحصول على العملات والهدايا المحددة بشكل غير قانوني",
 
+  "recharge_help_rule_1": "١. ستعمل حدث مكافأة إعادة الشحن من الآن حتى ٤ أبريل ٢٠٢٦.",
+  "recharge_help_rule_2": "٢. إذا وصل مبلغ إعادة الشحن التراكمي للمستخدم إلى المبلغ المحدد المطلوب لصنع العناصر الحصرية خلال هذا الحدث، يجب على المستخدم الاتصال فورًا بالموظفين الرسميين (ID: 10086, ID: 10000, ID: 10003, ID: 10001)، وإرسال لقطة شاشة من الحدث ومعرف المستخدم الخاص بهم إلى الموظفين، وتقديم المواد أو المتطلبات للعناصر الحصرية.",
+  "recharge_help_rule_3": "٣. قد ينشئ المستخدمون الذين يستخدمون نفس الجهاز أو عنوان IP حسابات متعددة بأي طريقة، لذا يمكن المطالبة بالمهمة كمكافأة مرة واحدة فقط.",
+
   "withdrawal_help_rule_1": "١. يمكن للمستخدمين سحب النقود عندما تصل أرباحهم بالدولار إلى ١٠ دولارات.",
   "withdrawal_help_rule_2": "٢. يمكن للمستخدمين أيضًا التبادل أو التحويل إلى وكيل إعادة الشحن للحصول على عوائد أعلى من السحوبات النقدية.",
   "withdrawal_help_rule_3": "٣. إذا لم يقم المستخدم بأي عملية قبل نهاية الحدث، فسيعتبر أنه قد تخلى عن فرصة استلام الدولارات، وسيتم مسح الدولارات التي تلقاها بواسطة النظام.",

src/locales/bn.json

@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "ক) ইভেন্ট চলাকালীন অংশগ্রহণকারী খেলোয়াড়দের প্রতি বিদ্বেষপূর্ণ মন্তব্য, গুজব, ইঙ্গিত ইত্যাদি",
   "ranking_help_rule_6": "খ) অবৈধভাবে কয়েন এবং নির্দিষ্ট গিফট সংগ্রহ",
 
+  "recharge_help_rule_1": "১. রিচার্জ পুরস্কার ইভেন্ট এখন থেকে ২০২৬ সালের ৪ এপ্রিল পর্যন্ত চলবে।",
+  "recharge_help_rule_2": "২. যদি এই ইভেন্ট চলাকালীন কোনো ব্যবহারকারীর সঞ্চিত রিচার্জ পরিমাণ এক্সক্লুসিভ আইটেম তৈরির জন্য নির্দিষ্ট পরিমাণে পৌঁছায়, তবে ব্যবহারকারীর দ্রুত অফিসিয়াল স্টাফের সাথে যোগাযোগ করা উচিত (ID: 10086, ID: 10000, ID: 10003, ID: 10001), স্টাফের কাছে ইভেন্টের একটি স্ক্রিনশট এবং তাদের ব্যবহারকারী আইডি পাঠানো উচিত, এবং এক্সক্লুসিভ আইটেমের জন্য উপকরণ বা প্রয়োজনীয়তা প্রদান করা উচিত।",
+  "recharge_help_rule_3": "৩. একই ডিভাইস বা IP ঠিকানা ব্যবহারকারীরা যেকোনো উপায়ে একাধিক অ্যাকাউন্ট তৈরি করতে পারে, তাই টাস্কটি শুধুমাত্র একবার পুরস্কার হিসাবে দাবি করা যাবে।",
+
   "withdrawal_help_rule_1": "১. ব্যবহারকারীরা তাদের ডলার আয় $10 এ পৌঁছালে নগদ উত্তোলন করতে পারে।",
   "withdrawal_help_rule_2": "২. ব্যবহারকারীরা নগদ উত্তোলনের চেয়ে উচ্চতর রিটার্ন পেতে বিনিময় বা রিচার্জ এজেন্টের কাছে স্থানান্তরও করতে পারে।",
   "withdrawal_help_rule_3": "৩. যদি ব্যবহারকারী ইভেন্ট শেষ হওয়ার আগে কোনো অপারেশন না করে, তবে তাদের ডলার পাওয়ার সুযোগ ত্যাগ করেছে বলে গণ্য করা হবে, এবং তাদের প্রাপ্ত ডলার সিস্টেম দ্বারা মুছে ফেলা হবে।",

src/locales/en.json

@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "a) Malicious comments, rumors, insinuations, etc. to participating players during the event",
   "ranking_help_rule_6": "b) Illegally obtaining coins and designated gifts",
 
+  "recharge_help_rule_1": "1. The recharge reward event will run from now until April 4th, 2026.",
+  "recharge_help_rule_2": "2. If a user's cumulative recharge amount reaches the specified amount required to craft exclusive items during this event, the user should promptly contact official staff (ID: 10086, ID: 10000, ID: 10003, ID: 10001), send a screenshot of the event and their user ID to the staff, and provide the materials or requirements for the exclusive items.",
+  "recharge_help_rule_3": "3. Users using the same device or IP address may create multiple accounts in any way, so the task can only be claimed as a reward once.",
+
   "withdrawal_help_rule_1": "1. Users can cash out when their dollar earnings reach $10.",
   "withdrawal_help_rule_2": "2. Users can also exchange or transfer to a recharge agent to obtain higher returns than cash withdrawals.",
   "withdrawal_help_rule_3": "3. If the user does not perform any operation before the end of the event, it will be deemed that they have given up the opportunity to receive the dollars, and the dollars they have received will be cleared by the system.",

src/locales/tr.json

@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "a) Etkinlik sırasında katılımcı oyunculara kötü niyetli yorumlar, dedikodular, ima vb.",
   "ranking_help_rule_6": "b) Coin ve belirli hediyeleri yasa dışı yollarla elde etme",
 
+  "recharge_help_rule_1": "1. Yükleme ödülü etkinliği şu andan 4 Nisan 2026'ya kadar sürecektir.",
+  "recharge_help_rule_2": "2. Bu etkinlik sırasında bir kullanıcının kümülatif yükleme miktarı özel öğeler oluşturmak için gereken belirtilen miktara ulaşırsa, kullanıcı derhal resmi personelle iletişime geçmelidir (ID: 10086, ID: 10000, ID: 10003, ID: 10001), etkinliğin ekran görüntüsünü ve kullanıcı ID'sini personele göndermelidir ve özel öğeler için malzemeleri veya gereksinimleri sağlamalıdır.",
+  "recharge_help_rule_3": "3. Aynı cihazı veya IP adresini kullanan kullanıcılar herhangi bir şekilde birden fazla hesap oluşturabilir, bu nedenle görev sadece bir kez ödül olarak talep edilebilir.",
+
   "withdrawal_help_rule_1": "1. Kullanıcılar dolar kazançları $10'a ulaştığında nakit çekebilir.",
   "withdrawal_help_rule_2": "2. Kullanıcılar nakit çekimlerinden daha yüksek getiri elde etmek için bozdurabilir veya yeniden yükleme acentesine transfer edebilir.",
   "withdrawal_help_rule_3": "3. Kullanıcı etkinlik bitmeden önce herhangi bir işlem yapmazsa, dolarları alma fırsatından vazgeçmiş sayılacak ve aldıkları dolarlar sistem tarafından temizlenecektir.",

src/locales/zh.json

@@ -245,6 +245,10 @@
   "ranking_help_rule_5": "a) 活动期间对参与玩家进行恶意评论、造谣、暗示等",
   "ranking_help_rule_6": "b) 非法获取硬币和指定礼物",
 
+  "recharge_help_rule_1": "1. 充值奖励活动将从现在持续到 2026 年 4 月 4 日。",
+  "recharge_help_rule_2": "2. 如果用户在此期间累计充值金额达到制作专属物品所需的指定金额，用户应及时联系官方工作人员（ID: 10086, ID: 10000, ID: 10003, ID: 10001），向工作人员发送活动截图和用户 ID，并提供专属物品的材料或要求。",
+  "recharge_help_rule_3": "3. 使用相同设备或 IP 地址的用户可能以任何方式创建多个账户，因此该任务只能作为奖励领取一次。",
+
   "withdrawal_help_rule_1": "1. 当用户的美元收益达到$10 时可以提现。",
   "withdrawal_help_rule_2": "2. 用户也可以兑换或转账给充值代理以获得比现金提现更高的回报。",
   "withdrawal_help_rule_3": "3. 如果用户在活动结束前未进行任何操作，将被视为放弃领取美元的机会，已获得的美元将被系统清空。",

src/router/index.js

@@ -389,12 +389,18 @@ const router = createRouter({
     },
 
     // 限时活动
+    {
+      path: '/activities/lesser-bairam',
+      name: 'lesser-bairam',
+      component: () => import('../views/Activities/LesserBairam/index.vue'),
+      meta: { requiresAuth: true },
+    }, //2026年4月4日上午5点结束
     {
       path: '/activities/lucky-dollars-season3',
       name: 'lucky-dollars-season3',
       component: () => import('../views/Activities/LuckyDollars/Season3/index.vue'),
       meta: { requiresAuth: true },
-    }, //2026年3月19日上午5点结束
+    }, //2026年3月19日上午5点结束（每周倒计时直到最后一周截止时间）
     {
       path: '/activities/spring-festival',
       name: 'spring-festival',

src/utils/permissionManager.js

@@ -60,6 +60,7 @@ const ACTIVITIES = [
   '/recharge-reward', //充值奖励
   '/login-reward', // 登录奖励
 
+  '/activities/lesser-bairam', // 开斋节打榜
   '/activities/lucky-dollars-season3', // 斋月打榜
   '/activities/spring-festival', // 春节打榜
 ]

src/utils/routeGuard.js

@@ -411,6 +411,7 @@ class RouteGuard {
       '/recharge-reward', //充值奖励
       '/login-reward', // 登录奖励
 
+      '/activities/lesser-bairam', // 开斋节打榜
       '/activities/lucky-dollars-season3', // 斋月打榜
       '/activities/spring-festival', // 春节打榜
     ]

src/views/Activities/LesserBairam/components/topUser.vue

@@ -0,0 +1,331 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative" :style="{ minHeight: ranking == '1' ? '68.75vw' : '45vw' }">
+      <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%"
+            style="display: block; border-radius: 50%; 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: 1vw;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <!-- 名字 -->
+        <itemCenter
+          :imgUrl="imageUrl('userNameBorder')"
+          :contentStyle="``"
+          :style="{
+            width: nameValueWidth,
+            height: nameValueHeight,
+          }"
+        >
+          <div
+            style="font-weight: 700; direction: ltr"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+          >
+            {{ name }}
+          </div>
+        </itemCenter>
+
+        <!-- 贡献值 -->
+        <div
+          style="
+            border-radius: 40px;
+            box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
+            border: 0.64px solid #ffdf36;
+            padding: 1px 2px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{
+            width: distributionValueWidth,
+            background:
+              ranking == '1'
+                ? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
+                : ranking == '2'
+                  ? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
+                  : `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
+          }"
+        >
+          <div v-if="rankingType == 'activity'" style="display: flex">
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block"
+              :style="{ width: coinWidth }"
+            />
+            <div
+              style="font-weight: 590"
+              class="showText"
+              :class="isTopOne ? 'top1Text' : 'text'"
+              :style="{
+                color: ranking == '1' ? `#FFE601` : '#FFF',
+              }"
+            >
+              {{ distributionValue }}
+            </div>
+          </div>
+          <div
+            v-if="rankingType == 'recharge'"
+            style="font-weight: 590"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+            :style="{
+              color: ranking == '1' ? `#FFE601` : '#FFF',
+            }"
+          >
+            $*
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Activities/LesserBairam/', filename)
+
+const props = defineProps({
+  rankingType: {
+    type: String,
+    default: 'activity',
+  },
+
+  ranking: {
+    type: String,
+    default: '',
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+})
+
+// 是否为第一名
+const isTopOne = computed(() => {
+  return props.ranking === '1'
+})
+
+// 头像容器高度
+const avatarContainerHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '65%'
+    case '2':
+      return '65%'
+    case '3':
+      return '65%'
+    default:
+      return '65%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '50%'
+    case '2':
+      return '50%'
+    case '3':
+      return '50%'
+    default:
+      return '50%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '37%'
+    case '2':
+      return '42%'
+    case '3':
+      return '43%'
+    default:
+      return '37%'
+  }
+})
+
+// 名称宽度
+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 '30%'
+    case '2':
+      return '45%'
+    case '3':
+      return '45%'
+    default:
+      return '30%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '50%'
+    case '2':
+      return '50%'
+    case '3':
+      return '50%'
+    default:
+      return '50%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '35%'
+    case '2':
+      return '20%'
+    case '3':
+      return '20%'
+    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: 0.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+@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>