chore(国王皇后、周星): 帮助弹窗，帮助文本调整
This commit is contained in:
hzj
parent
f5437b1b1b
commit
0848522865
@ -495,5 +495,15 @@
|
||||
"greedy_king_help_rule_5": "(2) بدون سحب: إذا تم تحويلها إلى عملات، سنمنحك 5% عملات ذهبية إضافية فوق المبلغ الأصلي ($1:10500 عملة).",
|
||||
"bounty_football_help_rule_1": "1. كلما جمع المستخدم المزيد من العملات خلال الحدث، ارتفع ترتيبه.",
|
||||
"bounty_football_help_rule_2": "2. سيستمر الحدث لمدة 7 أيام. بعد انتهاء الحدث، سيتم توزيع المكافآت على أفضل ثلاثة مستخدمين في لوحة الترتيب.",
|
||||
"bounty_football_help_rule_3": "3.إشعار: إذا تم العثور على لاعب يشارك في النشاط باستخدام وسائل غير مناسبة، تحتفظ الجهة الرسمية بالحق في استبعاد اللاعب المشارك أو المخالف من القائمة، وحظر الحساب، وسحب جميع المكافآت من اللاعب وفقا لخطورة الحالة دون إشعار مسبق، بما في ذلك على سبيل المثال لا الحصر: a) تعليقات خبيثة أو شائعات أو تلميحات وما إلى ذلك ضد اللاعبين المشاركين أثناء النشاط. b) الحصول على العملات والهدايا المحددة بطرق غير قانونية. *هذا النشاط لا علاقة له بشركة Apple Inc."
|
||||
"bounty_football_help_rule_3": "3.إشعار: إذا تم العثور على لاعب يشارك في النشاط باستخدام وسائل غير مناسبة، تحتفظ الجهة الرسمية بالحق في استبعاد اللاعب المشارك أو المخالف من القائمة، وحظر الحساب، وسحب جميع المكافآت من اللاعب وفقا لخطورة الحالة دون إشعار مسبق، بما في ذلك على سبيل المثال لا الحصر: a) تعليقات خبيثة أو شائعات أو تلميحات وما إلى ذلك ضد اللاعبين المشاركين أثناء النشاط. b) الحصول على العملات والهدايا المحددة بطرق غير قانونية. *هذا النشاط لا علاقة له بشركة Apple Inc.",
|
||||
"weekly_star_help_rule_1": "1. يقام النشاط أسبوعيا من الساعة 05:00:00 (UTC+8) كل يوم اثنين حتى الساعة 04:59:59 (UTC+8) يوم الاثنين التالي.",
|
||||
"weekly_star_help_rule_2": "2. يكافئ نشاط النجم الأسبوعي أفضل ثلاثة لاعبين بناء على الترتيب الأسبوعي النهائي. بالإضافة إلى المكافآت العادية، سيحصل الفائزون على \"شظايا النجم الأسبوعي\". يمكن استبدال هذه الشظايا في صفحة الاستبدال المخصصة.",
|
||||
"weekly_star_help_rule_3": "3. كل عملة واحدة = نقطة واحدة.",
|
||||
"weekly_star_help_rule_4": "4. يلزم الحصول على مليون نقطة على الأقل للتأهل لمكافآت المراكز الثلاثة الأولى. اللاعبون دون هذا الحد لن يحصلوا على أي مكافآت ترتيب.",
|
||||
"weekly_star_help_rule_5": "5. بعد انتهاء النشاط، سيتم إصدار المكافآت لأفضل ثلاثة لاعبين في ترتيب النجم الأسبوعي خلال 24 ساعة.",
|
||||
"king_queen_help_rule_1": "1. مدة النشاطيبدأ النشاط في الساعة 05:00:00 (UTC+8) كل يوم اثنين وينتهي في الساعة 04:59:59 (UTC+8) يوم الاثنين التالي.",
|
||||
"king_queen_help_rule_2": "2. معايير التصنيفترتيب الملك: يتم ترتيب المستخدمين بناءً على إجمالي قيمة العملات الذهبية التي أرسلوها كهدايا.ترتيب الملكة: يتم ترتيب المستخدمين بناءً على إجمالي قيمة العملات الذهبية التي أنفقوها على الهدايا.",
|
||||
"king_queen_help_rule_3": "3. قاعدة النقاط: 1 عملة = 1 نقطة.",
|
||||
"king_queen_help_rule_4": "4. يلزم حد أدنى قدره 1m نقطة للتأهل لمكافآت المراكز الثلاثة الأولى. اللاعبون دون هذا الحد لن يحصلوا على أي مكافآت ترتيب.",
|
||||
"king_queen_help_rule_5": "5. المكافآت والتوزيعبعد انتهاء النشاط، سيحصل أفضل ثلاثة مستخدمين في ترتيبي الملك والملكة على المكافآت المقابلة. سيتم إصدار المكافآت إلى حسابات الفائزين خلال 3 أيام عمل بعد إعلان النتائج النهائية."
|
||||
}
|
||||
|
||||
@ -495,5 +495,15 @@
|
||||
"greedy_king_help_rule_5": "(2) উত্তোলন নয়: কয়েনে রূপান্তর করলে, আমরা মূল পরিমাণের উপর অতিরিক্ত ৫% গোল্ড কয়েন দেব ($1:10500 কয়েন)।",
|
||||
"bounty_football_help_rule_1": "১. ইভেন্ট চলাকালীন একজন ব্যবহারকারী যত বেশি কয়েন জমা করবেন, তার র্যাঙ্কিং তত বেশি হবে।",
|
||||
"bounty_football_help_rule_2": "২. ইভেন্টটি ৭ দিন চলবে। ইভেন্ট শেষ হওয়ার পরে, লিডারবোর্ডের শীর্ষ তিন ব্যবহারকারীকে পুরস্কার বিতরণ করা হবে।",
|
||||
"bounty_football_help_rule_3": "৩.নোটিশ: যদি কোনো খেলোয়াড়কে অনুচিত উপায়ে কার্যকলাপে অংশগ্রহণ করতে পাওয়া যায়, তবে অফিসিয়াল পক্ষ ঘটনার গুরুতরতা অনুযায়ী পূর্ব নোটিশ ছাড়াই অংশগ্রহণকারী খেলোয়াড় বা লঙ্ঘনকারীকে তালিকা থেকে অযোগ্য ঘোষণা, অ্যাকাউন্ট নিষিদ্ধ এবং খেলোয়াড়ের সব পুরস্কার প্রত্যাহার করার অধিকার সংরক্ষণ করে, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়: a) কার্যকলাপ চলাকালীন অংশগ্রহণকারী খেলোয়াড়দের বিরুদ্ধে বিদ্বেষপূর্ণ মন্তব্য, গুজব, ইঙ্গিত ইত্যাদি। b) অবৈধভাবে কয়েন এবং নির্দিষ্ট উপহার সংগ্রহ। *এই কার্যকলাপের Apple Inc.-এর সঙ্গে কোনো সম্পর্ক নেই।"
|
||||
"bounty_football_help_rule_3": "৩.নোটিশ: যদি কোনো খেলোয়াড়কে অনুচিত উপায়ে কার্যকলাপে অংশগ্রহণ করতে পাওয়া যায়, তবে অফিসিয়াল পক্ষ ঘটনার গুরুতরতা অনুযায়ী পূর্ব নোটিশ ছাড়াই অংশগ্রহণকারী খেলোয়াড় বা লঙ্ঘনকারীকে তালিকা থেকে অযোগ্য ঘোষণা, অ্যাকাউন্ট নিষিদ্ধ এবং খেলোয়াড়ের সব পুরস্কার প্রত্যাহার করার অধিকার সংরক্ষণ করে, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়: a) কার্যকলাপ চলাকালীন অংশগ্রহণকারী খেলোয়াড়দের বিরুদ্ধে বিদ্বেষপূর্ণ মন্তব্য, গুজব, ইঙ্গিত ইত্যাদি। b) অবৈধভাবে কয়েন এবং নির্দিষ্ট উপহার সংগ্রহ। *এই কার্যকলাপের Apple Inc.-এর সঙ্গে কোনো সম্পর্ক নেই।",
|
||||
"weekly_star_help_rule_1": "১. কার্যক্রমটি প্রতি সপ্তাহে সোমবার 05:00:00 (UTC+8) থেকে পরবর্তী সোমবার 04:59:59 (UTC+8) পর্যন্ত চলবে।",
|
||||
"weekly_star_help_rule_2": "২. সাপ্তাহিক স্টার কার্যক্রম চূড়ান্ত সাপ্তাহিক র্যাঙ্কের ভিত্তিতে শীর্ষ তিন খেলোয়াড়কে পুরস্কৃত করে। নিয়মিত পুরস্কারের পাশাপাশি বিজয়ীরা \"Weekly Star Fragments\" পাবেন। এই ফ্র্যাগমেন্টগুলো নির্দিষ্ট এক্সচেঞ্জ পেজে রিডিম করা যাবে।",
|
||||
"weekly_star_help_rule_3": "৩. ১ কয়েন = ১ পয়েন্ট।",
|
||||
"weekly_star_help_rule_4": "৪. শীর্ষ তিন র্যাঙ্ক পুরস্কারের যোগ্য হতে কমপক্ষে ১ মিলিয়ন পয়েন্ট প্রয়োজন। এই সীমার নিচে থাকা খেলোয়াড়রা কোনো র্যাঙ্ক পুরস্কার পাবেন না।",
|
||||
"weekly_star_help_rule_5": "৫. কার্যক্রম শেষ হওয়ার পর Weekly Star র্যাঙ্কের শীর্ষ তিন খেলোয়াড়কে ২৪ ঘণ্টার মধ্যে পুরস্কার প্রদান করা হবে।",
|
||||
"king_queen_help_rule_1": "1. কার্যক্রমের সময়কালকার্যক্রমটি প্রতি সোমবার 05:00:00 (UTC+8)-এ শুরু হয় এবং পরের সোমবার 04:59:59 (UTC+8)-এ শেষ হয়।",
|
||||
"king_queen_help_rule_2": "2. র্যাঙ্কিংয়ের মানদণ্ডকিং র্যাঙ্ক: ব্যবহারকারীরা উপহার হিসেবে দেওয়া গোল্ড কয়েনের মোট মূল্যের ভিত্তিতে র্যাঙ্ক করা হয়।কুইন র্যাঙ্ক: ব্যবহারকারীরা উপহারের জন্য খরচ করা গোল্ড কয়েনের মোট মূল্যের ভিত্তিতে র্যাঙ্ক করা হয়।",
|
||||
"king_queen_help_rule_3": "3. স্কোরিং নিয়ম: 1 coin = 1 point.",
|
||||
"king_queen_help_rule_4": "4. শীর্ষ তিন র্যাঙ্ক পুরস্কারের জন্য যোগ্য হতে ন্যূনতম 1m পয়েন্ট প্রয়োজন। এই সীমার নিচে থাকা খেলোয়াড়রা কোনো র্যাঙ্ক পুরস্কার পাবে না।",
|
||||
"king_queen_help_rule_5": "5. পুরস্কার ও বিতরণকার্যক্রম শেষ হওয়ার পর কিং ও কুইন র্যাঙ্কের শীর্ষ তিন ব্যবহারকারী সংশ্লিষ্ট পুরস্কার পাবেন। চূড়ান্ত ফলাফল ঘোষণা হওয়ার পর 3 কর্মদিবসের মধ্যে বিজয়ীদের অ্যাকাউন্টে পুরস্কার প্রদান করা হবে।"
|
||||
}
|
||||
|
||||
@ -495,5 +495,15 @@
|
||||
"greedy_king_help_rule_5": "(2) No withdrawal: If converted to coins, we will give you an additional 5% gold coins on top of the original amount ($1:10500 coins).",
|
||||
"bounty_football_help_rule_1": "1. The more coins a user accumulates during the event, the higher their ranking will be.",
|
||||
"bounty_football_help_rule_2": "2. The event will last for 7 days. After the event ends, rewards will be distributed to the top three users on the leaderboard.",
|
||||
"bounty_football_help_rule_3": "3.Notice：If a player is found to be participating in an activity using improper means, the official reserves the right to disqualify the participating player or violator from the list, ban the account, and withdraw all rewards from the player according to the seriousness of the case without prior notice,including but not limited to:a) Malicious comments, rumors, insinuations, etc.to participating players during the activity.b) Illegally obtaining coins and designated gifts.*This activity has nothing to do with Apple Inc."
|
||||
"bounty_football_help_rule_3": "3.Notice：If a player is found to be participating in an activity using improper means, the official reserves the right to disqualify the participating player or violator from the list, ban the account, and withdraw all rewards from the player according to the seriousness of the case without prior notice,including but not limited to:a) Malicious comments, rumors, insinuations, etc.to participating players during the activity.b) Illegally obtaining coins and designated gifts.*This activity has nothing to do with Apple Inc.",
|
||||
"weekly_star_help_rule_1": "1. The activity runs weekly from 05:00:00 (UTC+8) every Monday to 04:59:59 (UTC+8) the following Monday.",
|
||||
"weekly_star_help_rule_2": "2. The Weekly Star activity rewards the top three players based on the final weekly rank. In addition to regular rewards, winners will receive \"Weekly Star Fragments\". These fragments can be redeemed on the dedicated exchange page.",
|
||||
"weekly_star_help_rule_3": "3. 1 coin = 1 poin.",
|
||||
"weekly_star_help_rule_4": "4. A minimum of 1m points is required to qualify for the top three rank rewards. Players below this threshold will not receive any rank rewards.",
|
||||
"weekly_star_help_rule_5": "5. After the activity concludes, rewards will be issued to the top three players on the Weekly Star rank within 24 hours.",
|
||||
"king_queen_help_rule_1": "1. Activity DurationThe activity starts at 05:00:00 (UTC+8) every Monday and ends at 04:59:59 (UTC+8) the following Monday.",
|
||||
"king_queen_help_rule_2": "2. Ranking CriteriaKing Rank: Users are ranked based on the total value of gold coins they have gifted.Queen Rank: Users are ranked based on the total value of gold coins they have spent on gifts.",
|
||||
"king_queen_help_rule_3": "3. Scoring Rule：1 coin = 1 point.",
|
||||
"king_queen_help_rule_4": "4. A minimum of 1m points is required to qualify for the top three rank rewards. Players below this threshold will not receive any rank rewards.",
|
||||
"king_queen_help_rule_5": "5. Rewards & DistributionThe top three users on the King and Queen ranks will receive corresponding rewards after the activity concludes. Rewards will be issued to winners' accounts within 3 working days after the final results are announced."
|
||||
}
|
||||
|
||||
@ -495,6 +495,15 @@
|
||||
"greedy_king_help_rule_5": "(2) Para çekmeme: Coin'e dönüştürülürse, orijinal tutarın üzerine ek %5 gold coin vereceğiz ($1:10500 coin).",
|
||||
"bounty_football_help_rule_1": "1. Bir kullanıcı etkinlik boyunca ne kadar çok coin biriktirirse sıralaması o kadar yüksek olur.",
|
||||
"bounty_football_help_rule_2": "2. Etkinlik 7 gün sürecektir. Etkinlik sona erdikten sonra ödüller liderlik tablosundaki ilk üç kullanıcıya dağıtılacaktır.",
|
||||
"bounty_football_help_rule_3": "3.Duyuru: Bir oyuncunun uygunsuz yollarla etkinliğe katıldığı tespit edilirse resmi taraf, durumun ciddiyetine göre önceden haber vermeksizin katılımcı oyuncuyu veya ihlal edeni listeden diskalifiye etme, hesabı yasaklama ve oyuncunun tüm ödüllerini geri alma hakkını saklı tutar; bunlara şunlar dahildir ancak bunlarla sınırlı değildir: a) Etkinlik sırasında katılımcı oyunculara yönelik kötü niyetli yorumlar, söylentiler, imalar vb. b) Coin ve belirlenmiş hediyeleri yasa dışı yollarla elde etmek. *Bu etkinliğin Apple Inc. ile hiçbir ilgisi yoktur."
|
||||
"bounty_football_help_rule_3": "3.Duyuru: Bir oyuncunun uygunsuz yollarla etkinliğe katıldığı tespit edilirse resmi taraf, durumun ciddiyetine göre önceden haber vermeksizin katılımcı oyuncuyu veya ihlal edeni listeden diskalifiye etme, hesabı yasaklama ve oyuncunun tüm ödüllerini geri alma hakkını saklı tutar; bunlara şunlar dahildir ancak bunlarla sınırlı değildir: a) Etkinlik sırasında katılımcı oyunculara yönelik kötü niyetli yorumlar, söylentiler, imalar vb. b) Coin ve belirlenmiş hediyeleri yasa dışı yollarla elde etmek. *Bu etkinliğin Apple Inc. ile hiçbir ilgisi yoktur.",
|
||||
"weekly_star_help_rule_1": "1. Etkinlik her hafta Pazartesi 05:00:00 (UTC+8) ile sonraki Pazartesi 04:59:59 (UTC+8) arasında gerçekleşir.",
|
||||
"weekly_star_help_rule_2": "2. Weekly Star etkinliği, son haftalık sıralamaya göre ilk üç oyuncuyu ödüllendirir. Normal ödüllere ek olarak kazananlar \"Weekly Star Fragments\" alacaktır. Bu parçalar özel takas sayfasında kullanılabilir.",
|
||||
"weekly_star_help_rule_3": "3. 1 coin = 1 puan.",
|
||||
"weekly_star_help_rule_4": "4. İlk üç sıralama ödüllerine hak kazanmak için en az 1 milyon puan gereklidir. Bu eşiğin altındaki oyuncular herhangi bir sıralama ödülü alamaz.",
|
||||
"weekly_star_help_rule_5": "5. Etkinlik sona erdikten sonra, Weekly Star sıralamasındaki ilk üç oyuncunun ödülleri 24 saat içinde verilecektir.",
|
||||
"king_queen_help_rule_1": "1. Etkinlik SüresiEtkinlik her Pazartesi 05:00:00'te (UTC+8) başlar ve bir sonraki Pazartesi 04:59:59'da (UTC+8) sona erer.",
|
||||
"king_queen_help_rule_2": "2. Sıralama KriterleriKral Sıralaması: Kullanıcılar, hediye ettikleri altın coinlerin toplam değerine göre sıralanır.Kraliçe Sıralaması: Kullanıcılar, hediyelere harcadıkları altın coinlerin toplam değerine göre sıralanır.",
|
||||
"king_queen_help_rule_3": "3. Puanlama Kuralı: 1 coin = 1 puan.",
|
||||
"king_queen_help_rule_4": "4. İlk üç sıralama ödülüne hak kazanmak için en az 1m puan gerekir. Bu eşiğin altındaki oyuncular herhangi bir sıralama ödülü alamaz.",
|
||||
"king_queen_help_rule_5": "5. Ödüller ve DağıtımEtkinlik sona erdikten sonra Kral ve Kraliçe sıralamalarındaki ilk üç kullanıcı ilgili ödülleri alacaktır. Ödüller, nihai sonuçlar açıklandıktan sonra 3 iş günü içinde kazananların hesaplarına verilecektir."
|
||||
}
|
||||
|
||||
|
||||
@ -495,5 +495,15 @@
|
||||
"greedy_king_help_rule_5": "(2) 不提现：如果兑换为金币，我们将在原金额基础上额外赠送 5% 金币（$1:10500 金币）。",
|
||||
"bounty_football_help_rule_1": "1. 活动期间用户累计的金币越多，排名越高。",
|
||||
"bounty_football_help_rule_2": "2. 活动将持续7天。活动结束后，奖励将发放给排行榜前三名用户。",
|
||||
"bounty_football_help_rule_3": "3.注意：如果发现玩家使用不正当手段参与活动，官方保留根据情节严重程度在不提前通知的情况下，将参与玩家或违规者从榜单中取消资格、封禁账号并收回其全部奖励的权利，包括但不限于：a) 在活动期间对参与玩家进行恶意评论、散布谣言、影射等。b) 非法获取金币和指定礼物。*本活动与 Apple Inc. 无关。"
|
||||
"bounty_football_help_rule_3": "3.注意：如果发现玩家使用不正当手段参与活动，官方保留根据情节严重程度在不提前通知的情况下，将参与玩家或违规者从榜单中取消资格、封禁账号并收回其全部奖励的权利，包括但不限于：a) 在活动期间对参与玩家进行恶意评论、散布谣言、影射等。b) 非法获取金币和指定礼物。*本活动与 Apple Inc. 无关。",
|
||||
"weekly_star_help_rule_1": "1. 活动每周进行，时间为每周一 05:00:00（UTC+8）至次周一 04:59:59（UTC+8）。",
|
||||
"weekly_star_help_rule_2": "2. 周星活动将根据每周最终排名奖励前三名玩家。除常规奖励外，获奖者还将获得“周星碎片”。这些碎片可在专属兑换页面兑换。",
|
||||
"weekly_star_help_rule_3": "3. 1 金币 = 1 积分。",
|
||||
"weekly_star_help_rule_4": "4. 至少需要 100 万积分才有资格获得前三名排名奖励。低于该门槛的玩家将不会获得任何排名奖励。",
|
||||
"weekly_star_help_rule_5": "5. 活动结束后，周星排行榜前三名玩家的奖励将在 24 小时内发放。",
|
||||
"king_queen_help_rule_1": "1. 活动时间活动于每周一 05:00:00 (UTC+8) 开始，并于下周一 04:59:59 (UTC+8) 结束。",
|
||||
"king_queen_help_rule_2": "2. 排名规则国王榜：用户根据其赠送礼物的金币总价值进行排名。女王榜：用户根据其在礼物上消耗的金币总价值进行排名。",
|
||||
"king_queen_help_rule_3": "3. 计分规则：1 金币 = 1 积分。",
|
||||
"king_queen_help_rule_4": "4. 至少需要 100万积分才有资格获得前三名排名奖励。低于此门槛的玩家将不会获得任何排名奖励。",
|
||||
"king_queen_help_rule_5": "5. 奖励与发放活动结束后，国王榜和女王榜前三名用户将获得相应奖励。奖励将在最终结果公布后 3 个工作日内发放至获奖者账户。"
|
||||
}
|
||||
|
||||
@ -355,277 +355,340 @@
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
|
||||
<div class="ranking-popup-content" @click.self="closedPopup">
|
||||
<!-- help弹窗 -->
|
||||
<div
|
||||
v-show="helpInfoShow"
|
||||
style="width: 100vw; margin: 20% 0; overflow: hidden"
|
||||
@click.stop
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl(getImgName('helpInfo'))"
|
||||
alt=""
|
||||
style="width: 108vw; position: relative; left: -4vw; display: block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- history弹窗 -->
|
||||
<div v-show="historyShow" style="width: 100vw; margin: 20% 0; overflow: hidden" @click.stop>
|
||||
<div style="width: 108vw; position: relative; left: -4vw">
|
||||
<borderImg title="History">
|
||||
<!-- help弹窗 -->
|
||||
<div
|
||||
v-show="helpInfoShow"
|
||||
style="
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
"
|
||||
@click.self="closedPopup"
|
||||
>
|
||||
<itemCenter
|
||||
:imgUrl="webpUrl(getImgName('helpBg'))"
|
||||
style="width: 92vw; object-fit: contain"
|
||||
:contentStyle="`box-sizing: border-box; padding: 32vw 7vw 7vw; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;`"
|
||||
@click.stop
|
||||
>
|
||||
<div
|
||||
style="
|
||||
background-size: 100% 100%;
|
||||
min-height: 20px;
|
||||
margin: -10px 0;
|
||||
padding: 10px 10%;
|
||||
width: 8vw;
|
||||
aspect-ratio: 1/1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
"
|
||||
@click.stop="closedPopup"
|
||||
></div>
|
||||
<div
|
||||
class="scrollY"
|
||||
style="
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vw;
|
||||
"
|
||||
:style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
|
||||
>
|
||||
<!-- 国王皇后榜首 -->
|
||||
<div
|
||||
<p
|
||||
v-for="ruleKey in helpRuleKeys"
|
||||
:key="ruleKey"
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 16px;
|
||||
margin: 0;
|
||||
color: #d89a6c;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
font-style: italic;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="width: 40%"
|
||||
v-for="(topOne, topIndex) in showTopOne.top"
|
||||
:key="topIndex"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
min-height: 34.56vw;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 头像框 -->
|
||||
<img v-smart-img :src="topOne.Frame" alt="" style="width: 100%; z-index: 1" />
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="topOne.userInfo.userAvatar"
|
||||
alt=""
|
||||
width="70%"
|
||||
style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
height: 10%;
|
||||
width: 50%;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
font-weight: 860;
|
||||
font-size: 12px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{ bottom: topOne.type == 'topKing' ? '9.3%' : '7%' }"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{ topOne.userInfo.userNickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590; text-align: center">
|
||||
{{ $t('user_id_prefix') }} {{ topOne.userInfo.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeBack')"
|
||||
alt=""
|
||||
width="18px"
|
||||
height="18px"
|
||||
@click="changeHistoryIndex(1)"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
background-image: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(243, 183, 0, 1),
|
||||
rgba(255, 238, 198, 1)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
{{ showTopOne.group }}
|
||||
</div>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeNext')"
|
||||
alt=""
|
||||
width="18px"
|
||||
height="18px"
|
||||
@click="changeHistoryIndex(-1)"
|
||||
/>
|
||||
</div>
|
||||
{{ $t(ruleKey) }}
|
||||
</p>
|
||||
</div>
|
||||
</borderImg>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- rewards弹窗 -->
|
||||
<div
|
||||
v-show="rewardsShow"
|
||||
style="width: 100vw; padding: 20% 0; overflow: hidden"
|
||||
@click.stop
|
||||
>
|
||||
<div style="width: 108vw; position: relative; left: -4vw">
|
||||
<!-- 取消按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('cancel')"
|
||||
alt=""
|
||||
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
|
||||
@click.stop.prevent="closedPopup"
|
||||
/>
|
||||
<div style="width: 100%">
|
||||
<borderImg title="Rewards">
|
||||
<!-- history弹窗 -->
|
||||
<div
|
||||
v-show="historyShow"
|
||||
style="width: 100vw; margin: 20% 0; overflow: hidden"
|
||||
@click.stop
|
||||
>
|
||||
<div style="width: 108vw; position: relative; left: -4vw">
|
||||
<borderImg title="History">
|
||||
<div
|
||||
style="
|
||||
background-size: 100% 100%;
|
||||
min-height: 20px;
|
||||
margin: -20px 0;
|
||||
padding: 20px 10%;
|
||||
margin: -10px 0;
|
||||
padding: 10px 10%;
|
||||
"
|
||||
:style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
|
||||
>
|
||||
<!-- 奖励榜切换按钮 -->
|
||||
<div style="width: 100%; min-height: 18.54vw">
|
||||
<!-- 国王皇后榜首 -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 16px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-show="visibleKingRewards"
|
||||
style="width: 100%; display: flex; justify-content: space-around"
|
||||
style="width: 40%"
|
||||
v-for="(topOne, topIndex) in showTopOne.top"
|
||||
:key="topIndex"
|
||||
>
|
||||
<img v-smart-img :src="webpUrl('kingBtActive')" alt="" style="width: 40%" />
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('queenBt')"
|
||||
alt=""
|
||||
style="width: 40%"
|
||||
@click="visibleKingRewards = false"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="!visibleKingRewards"
|
||||
style="width: 100%; display: flex; justify-content: space-around"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('kingBt')"
|
||||
alt=""
|
||||
style="width: 40%"
|
||||
@click="visibleKingRewards = true"
|
||||
/>
|
||||
<img v-smart-img :src="webpUrl('queenBtActive')" alt="" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 奖励榜 -->
|
||||
<div v-for="(rewardsTop, top) in rewardsList" :key="top">
|
||||
<div
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
v-if="rewardsTop.rewards.length > 0"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
alt=""
|
||||
style="min-height: 19.13vw; width: 40%; margin: 24px 0"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
min-height: 34.56vw;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3%;
|
||||
margin-bottom: 3%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 头像框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="topOne.Frame"
|
||||
alt=""
|
||||
style="width: 100%; z-index: 1"
|
||||
/>
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 0;
|
||||
"
|
||||
>
|
||||
<itemCenter style="min-height: 27.07vw" :imgUrl="webpUrl('gift')">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
width="50%"
|
||||
style="aspect-ratio: 1/1"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
</itemCenter>
|
||||
<img
|
||||
:src="topOne.userInfo.userAvatar"
|
||||
alt=""
|
||||
width="70%"
|
||||
style="border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
height: 10%;
|
||||
width: 50%;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
font-weight: 860;
|
||||
font-size: 12px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{ bottom: topOne.type == 'topKing' ? '9.3%' : '7%' }"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 590;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 0.7em;
|
||||
font-weight: 860;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
{{ topOne.userInfo.userNickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #fff; font-weight: 590; text-align: center">
|
||||
{{ $t('user_id_prefix') }} {{ topOne.userInfo.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeBack')"
|
||||
alt=""
|
||||
width="18px"
|
||||
height="18px"
|
||||
@click="changeHistoryIndex(1)"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 590;
|
||||
background-image: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(243, 183, 0, 1),
|
||||
rgba(255, 238, 198, 1)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
>
|
||||
{{ showTopOne.group }}
|
||||
</div>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeNext')"
|
||||
alt=""
|
||||
width="18px"
|
||||
height="18px"
|
||||
@click="changeHistoryIndex(-1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</borderImg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- rewards弹窗 -->
|
||||
<div
|
||||
v-show="rewardsShow"
|
||||
style="width: 100vw; padding: 20% 0; overflow: hidden"
|
||||
@click.stop
|
||||
>
|
||||
<div style="width: 108vw; position: relative; left: -4vw">
|
||||
<!-- 取消按钮 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('cancel')"
|
||||
alt=""
|
||||
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
|
||||
@click.stop.prevent="closedPopup"
|
||||
/>
|
||||
<div style="width: 100%">
|
||||
<borderImg title="Rewards">
|
||||
<div
|
||||
style="
|
||||
background-size: 100% 100%;
|
||||
min-height: 20px;
|
||||
margin: -20px 0;
|
||||
padding: 20px 10%;
|
||||
"
|
||||
:style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
|
||||
>
|
||||
<!-- 奖励榜切换按钮 -->
|
||||
<div style="width: 100%; min-height: 18.54vw">
|
||||
<div
|
||||
v-show="visibleKingRewards"
|
||||
style="width: 100%; display: flex; justify-content: space-around"
|
||||
>
|
||||
<img v-smart-img :src="webpUrl('kingBtActive')" alt="" style="width: 40%" />
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('queenBt')"
|
||||
alt=""
|
||||
style="width: 40%"
|
||||
@click="visibleKingRewards = false"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="!visibleKingRewards"
|
||||
style="width: 100%; display: flex; justify-content: space-around"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('kingBt')"
|
||||
alt=""
|
||||
style="width: 40%"
|
||||
@click="visibleKingRewards = true"
|
||||
/>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('queenBtActive')"
|
||||
alt=""
|
||||
style="width: 40%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 奖励榜 -->
|
||||
<div v-for="(rewardsTop, top) in rewardsList" :key="top">
|
||||
<div
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
v-if="rewardsTop.rewards.length > 0"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="topImg[Number(rewardsTop.rankRange) - 1]"
|
||||
alt=""
|
||||
style="min-height: 19.13vw; width: 40%; margin: 24px 0"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 3%;
|
||||
margin-bottom: 3%;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(reward, rewardIndex) in rewardsTop.rewards"
|
||||
:key="rewardIndex"
|
||||
style="width: 100%"
|
||||
>
|
||||
<itemCenter style="min-height: 27.07vw" :imgUrl="webpUrl('gift')">
|
||||
<img
|
||||
:src="reward.cover || ''"
|
||||
alt=""
|
||||
width="50%"
|
||||
style="aspect-ratio: 1/1"
|
||||
@error="(e) => handleRewardImageError(e, reward.type)"
|
||||
/>
|
||||
</itemCenter>
|
||||
|
||||
<div
|
||||
style="
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 590;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
{{ showDetail(reward.type, reward) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</borderImg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</maskLayer>
|
||||
|
||||
@ -821,7 +884,7 @@ const currentLangType = computed(() => {
|
||||
const isLoading = ref(true)
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const webpUrl = (filename) => getWebpUrl('Ranking/KingQueenWebp/', filename)
|
||||
const webpUrl = (filename) => getWebpUrl('Ranking/KingQueen/webp/', filename)
|
||||
// 根据语言获取图片名
|
||||
const getImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
||||
@ -933,6 +996,13 @@ const maskLayerShow = computed(() => {
|
||||
return helpInfoShow.value || historyShow.value || rewardsShow.value
|
||||
})
|
||||
const helpInfoShow = ref(false)
|
||||
const helpRuleKeys = [
|
||||
'king_queen_help_rule_1',
|
||||
'king_queen_help_rule_2',
|
||||
'king_queen_help_rule_3',
|
||||
'king_queen_help_rule_4',
|
||||
'king_queen_help_rule_5',
|
||||
]
|
||||
const historyShow = ref(false)
|
||||
const rewardsShow = ref(false)
|
||||
|
||||
@ -1154,7 +1224,7 @@ const preloadCriticalImages = async () => {
|
||||
webpUrl('queenBt'),
|
||||
webpUrl('kingBt'),
|
||||
webpUrl('queenBtActive'),
|
||||
webpUrl(getImgName('helpInfo')),
|
||||
webpUrl(getImgName('helpBg')),
|
||||
webpUrl('timeBack'),
|
||||
webpUrl('timeNext'),
|
||||
webpUrl('cancel'),
|
||||
@ -1275,6 +1345,17 @@ onUnmounted(() => {
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
.scrollY {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.scrollY::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 添加加载动画样式 */
|
||||
.loading-container {
|
||||
width: 100vw;
|
||||
|
||||
@ -580,270 +580,284 @@
|
||||
<!-- 弹窗遮罩层 -->
|
||||
<maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
|
||||
<div class="ranking-popup-content" @click.self="closedPopup">
|
||||
<!-- help弹窗 -->
|
||||
<div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
|
||||
<img v-smart-img :src="webpUrl(getImgName('helpInfo'))" alt="" style="width: 100%" />
|
||||
</div>
|
||||
|
||||
<!-- history弹窗 -->
|
||||
<div
|
||||
v-show="historyShow"
|
||||
style="min-height: 107.97vw; position: relative; margin: 20% 0"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('mediumBg')"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="wks-x1"
|
||||
>
|
||||
History
|
||||
<!-- help弹窗 -->
|
||||
<div v-show="helpInfoShow" class="popup-center" @click.self="closedPopup">
|
||||
<div class="popup-panel" @click.stop>
|
||||
<itemCenter
|
||||
style="min-height: 91vw"
|
||||
:imgUrl="webpUrl('helpInfoBg')"
|
||||
:contentStyle="`inset: 20vw 10vw 10vw; overflow-y: auto; display: block;`"
|
||||
>
|
||||
<div class="helpInfo">
|
||||
<p>{{ $t('weekly_star_help_rule_1') }}</p>
|
||||
<p>{{ $t('weekly_star_help_rule_2') }}</p>
|
||||
<p>{{ $t('weekly_star_help_rule_3') }}</p>
|
||||
<p>{{ $t('weekly_star_help_rule_4') }}</p>
|
||||
<p>{{ $t('weekly_star_help_rule_5') }}</p>
|
||||
</div>
|
||||
</itemCenter>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
|
||||
<!-- history弹窗 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 31% 7% 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
v-show="historyShow"
|
||||
style="min-height: 107.97vw; position: relative; margin: 20% 0"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<div style="min-height: 43.93vw; position: relative; width: 75%">
|
||||
<!-- 头像框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('topOneHistory')"
|
||||
alt=""
|
||||
style="width: 100%; display: block; position: relative; z-index: 1"
|
||||
/>
|
||||
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('mediumBg')"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="wks-x1"
|
||||
>
|
||||
History
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 31% 7% 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<div style="min-height: 43.93vw; position: relative; width: 75%">
|
||||
<!-- 头像框 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('topOneHistory')"
|
||||
alt=""
|
||||
style="width: 100%; display: block; position: relative; z-index: 1"
|
||||
/>
|
||||
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="showTopOne.userAvatar || ''"
|
||||
alt=""
|
||||
style="
|
||||
width: 50%;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 名字 -->
|
||||
<div style="min-height: 7.16vw; position: relative; width: 25%">
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('nameBg')"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: 1%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="showTopOne.userAvatar || ''"
|
||||
alt=""
|
||||
<div
|
||||
style="
|
||||
width: 50%;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
"
|
||||
@error="handleAvatarImageError"
|
||||
/>
|
||||
class="wks-x2"
|
||||
>
|
||||
{{ showTopOne.userNickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 名字 -->
|
||||
<div style="min-height: 7.16vw; position: relative; width: 25%">
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('nameBg')"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 历史时间 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: 1%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeBack')"
|
||||
alt=""
|
||||
width="13%"
|
||||
@click="changeHistoryIndex(1)"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-weight: 590;
|
||||
background-image: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(243, 183, 0, 1),
|
||||
rgba(255, 238, 198, 1)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
class="wks-x2"
|
||||
class="wks-x3"
|
||||
>
|
||||
{{ showTopOne.userNickname }}
|
||||
{{ showTopOne.group }}
|
||||
</div>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeNext')"
|
||||
alt=""
|
||||
width="13%"
|
||||
@click="changeHistoryIndex(-1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- gifts弹窗 -->
|
||||
<itemCenter
|
||||
v-show="giftsShow"
|
||||
style="min-height: 76.66vw; margin: 20% 0"
|
||||
@click.stop
|
||||
:imgUrl="webpUrl('giftsBg')"
|
||||
:contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
|
||||
>
|
||||
<!-- 礼物单元 -->
|
||||
<div style="width: 30%" v-for="gift in gifts" :key="gift.id">
|
||||
<!-- 礼物背景 -->
|
||||
<itemCenter style="min-height: 27vw" :imgUrl="webpUrl('giftItemBg')">
|
||||
<!-- 礼物 -->
|
||||
<img
|
||||
:src="gift.giftPhoto"
|
||||
alt=""
|
||||
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||
/>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 礼物价值 -->
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/Azizi/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
<div style="color: #fff; font-weight: 590">
|
||||
{{ gift.giftCandy }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 历史时间 -->
|
||||
<!-- 交易商品弹窗 -->
|
||||
<div
|
||||
v-if="exchargeGoodsShow"
|
||||
style="min-height: 108vw; position: relative; margin: 20% 0"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('mediumBg')"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="wks-x1"
|
||||
>
|
||||
Exchange
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30% 7% 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeBack')"
|
||||
:src="selectedGood.propsGroup.activityRewardProps[0].cover"
|
||||
alt=""
|
||||
width="13%"
|
||||
@click="changeHistoryIndex(1)"
|
||||
style="width: 50%; display: block"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-weight: 590;
|
||||
background-image: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(243, 183, 0, 1),
|
||||
rgba(255, 238, 198, 1)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
class="wks-x3"
|
||||
>
|
||||
{{ showTopOne.group }}
|
||||
</div>
|
||||
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('timeNext')"
|
||||
:src="webpUrl('ConfirmBt')"
|
||||
alt=""
|
||||
width="13%"
|
||||
@click="changeHistoryIndex(-1)"
|
||||
style="width: 30%; display: block"
|
||||
@click="exchangeSelectedGood(selectedGood.rule.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- gifts弹窗 -->
|
||||
<itemCenter
|
||||
v-show="giftsShow"
|
||||
style="min-height: 76.66vw; margin: 20% 0"
|
||||
@click.stop
|
||||
:imgUrl="webpUrl('giftsBg')"
|
||||
:contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
|
||||
>
|
||||
<!-- 礼物单元 -->
|
||||
<div style="width: 30%" v-for="gift in gifts" :key="gift.id">
|
||||
<!-- 礼物背景 -->
|
||||
<itemCenter style="min-height: 27vw" :imgUrl="webpUrl('giftItemBg')">
|
||||
<!-- 礼物 -->
|
||||
<img
|
||||
:src="gift.giftPhoto"
|
||||
alt=""
|
||||
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||
/>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 礼物价值 -->
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/Azizi/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
|
||||
/>
|
||||
<div style="color: #fff; font-weight: 590">
|
||||
{{ gift.giftCandy }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</itemCenter>
|
||||
|
||||
<!-- 交易商品弹窗 -->
|
||||
<div
|
||||
v-if="exchargeGoodsShow"
|
||||
style="min-height: 108vw; position: relative; margin: 20% 0"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 背景图 -->
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('mediumBg')"
|
||||
alt=""
|
||||
style="width: 100%; display: block"
|
||||
/>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 860;
|
||||
"
|
||||
class="wks-x1"
|
||||
>
|
||||
Exchange
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30% 7% 15%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="selectedGood.propsGroup.activityRewardProps[0].cover"
|
||||
alt=""
|
||||
style="width: 50%; display: block"
|
||||
/>
|
||||
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
|
||||
<img
|
||||
v-smart-img
|
||||
:src="webpUrl('ConfirmBt')"
|
||||
alt=""
|
||||
style="width: 30%; display: block"
|
||||
@click="exchangeSelectedGood(selectedGood.rule.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</maskLayer>
|
||||
</div>
|
||||
</div>
|
||||
@ -853,7 +867,6 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { closePage, viewUserInfo } from '@/utils/appBridge.js'
|
||||
import { useLangStore } from '@/stores/lang'
|
||||
import { connectToApp } from '@/utils/appConnector.js'
|
||||
import { useThrottle } from '@/utils/useDebounce'
|
||||
import { showWarning } from '@/utils/toast.js'
|
||||
@ -878,22 +891,12 @@ import itemCenter from '@/components/itemCenter.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
import TopUser from './components/topUser.vue'
|
||||
|
||||
const langStore = useLangStore()
|
||||
const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
|
||||
// 当前语言类型
|
||||
const currentLangType = computed(() => {
|
||||
return langStore.selectedLang?.type || 'en'
|
||||
})
|
||||
|
||||
// 预加载状态
|
||||
const isLoading = ref(true)
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const webpUrl = (filename) => getWebpUrl('Ranking/WeeklyStarWebp/', filename)
|
||||
// 根据语言获取图片名
|
||||
const getImgName = (filename) => {
|
||||
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
|
||||
}
|
||||
const webpUrl = (filename) => getWebpUrl('Ranking/WeeklyStar/webp/', filename)
|
||||
const POPUP_CLOSE_CLICK_GUARD_MS = 400
|
||||
const lastPopupClosedAt = ref(0)
|
||||
|
||||
@ -1251,7 +1254,7 @@ const preloadCriticalImages = async () => {
|
||||
webpUrl('longBg'),
|
||||
webpUrl('debris'),
|
||||
webpUrl('myRankingBg'),
|
||||
webpUrl(getImgName('helpInfo')),
|
||||
webpUrl('helpInfoBg'),
|
||||
webpUrl('mediumBg'),
|
||||
webpUrl('topOneHistory'),
|
||||
webpUrl('nameBg'),
|
||||
@ -1358,6 +1361,33 @@ onUnmounted(() => {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.popup-center {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-panel {
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.helpInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1vw;
|
||||
}
|
||||
|
||||
.helpInfo > p {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .ranking-back-btn {
|
||||
left: auto;
|
||||
right: 4vw;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user