1062 lines
23 KiB
HTML
Executable File
1062 lines
23 KiB
HTML
Executable File
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<div class="leaderboard-page">
|
||
<div class="header">
|
||
<a href="{{ url_for('more') }}" class="back-link" title="返回">
|
||
<i class="fas fa-arrow-left"></i>
|
||
</a>
|
||
<h1>邀请榜单</h1>
|
||
</div>
|
||
|
||
<!--<div class="leaderboard-container">-->
|
||
<!-- 顶部横幅 -->
|
||
<!-- <div class="leaderboard-banner">-->
|
||
<!-- {% if session.huawei_user %}-->
|
||
<!-- <div class="banner-content">-->
|
||
<!-- <i class="fas fa-trophy"></i>-->
|
||
<!-- <div class="banner-text">-->
|
||
<!-- <h2>邀请好友排行榜</h2>-->
|
||
<!-- {% if session.huawei_user.unlocked_features %}-->
|
||
<!-- <div class="status-row">-->
|
||
<!-- <span class="invite-count">已邀请 5 位好友</span>-->
|
||
<!-- <span class="unlock-status">-->
|
||
<!-- <i class="fas fa-unlock"></i>-->
|
||
<!-- 已解锁20个名额-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- {% else %}-->
|
||
<!-- <div class="status-row">-->
|
||
<!-- <span class="invite-count">已邀请 <span id="inviteCount">0</span>/3 位好友</span>-->
|
||
<!-- <span class="unlock-tip">邀请3位好友即可解锁20个名额</span>-->
|
||
<!-- </div>-->
|
||
<!-- {% endif %}-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="invite-link">-->
|
||
<!-- <input type="text" id="inviteUrl" readonly>-->
|
||
<!-- <button onclick="copyInviteUrl()">-->
|
||
<!-- <i class="fas fa-copy"></i>-->
|
||
<!-- 复制-->
|
||
<!-- </button>-->
|
||
<!-- </div>-->
|
||
<!-- {% else %}-->
|
||
<!-- <div class="banner-content">-->
|
||
<!-- <i class="fas fa-user-circle"></i>-->
|
||
<!-- <div class="banner-text">-->
|
||
<!-- <h2>邀请好友排行榜</h2>-->
|
||
<!-- <p>登录后可查看您的邀请信息</p>-->
|
||
<!-- <a href="{{ url_for('huawei_login') }}" class="login-btn">-->
|
||
<!-- <i class="fas fa-sign-in-alt"></i>-->
|
||
<!-- 去登录-->
|
||
<!-- </a>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- {% endif %}-->
|
||
<!-- </div>-->
|
||
|
||
<!-- 活动说明 -->
|
||
<!-- <div class="activity-rules">-->
|
||
<!-- <div class="rules-header">-->
|
||
<!-- <i class="fas fa-gift"></i>-->
|
||
<!-- <h3>活动说明</h3>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="rules-content">-->
|
||
<!-- <div class="prize-list">-->
|
||
<!-- <h4>奖励设置：</h4>-->
|
||
<!-- <ul>-->
|
||
<!-- <li><span class="rank">第一名</span>：100元京东E卡</li>-->
|
||
<!-- <li><span class="rank">第二名</span>：50元京东E卡</li>-->
|
||
<!-- <li><span class="rank">第三名</span>：20元京东E卡</li>-->
|
||
<!-- <li><span class="rank">第4-10名</span>：10元京东E卡</li>-->
|
||
<!-- </ul>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="activity-info">-->
|
||
<!-- <h4>活动规则：</h4>-->
|
||
<!-- <ul>-->
|
||
<!-- <li>活动时间：2025年1月1日 - 2025年2月28日</li>-->
|
||
<!-- <li>活动结束后3个工作日内发放奖励</li>-->
|
||
<!-- <li>每位用户仅可获得一次奖励</li>-->
|
||
<!-- <li>被邀请用户需完成账号注册才计入邀请数</li>-->
|
||
<!-- <li>被邀请用户需至少一次活跃行为（如登录、修改资料等）</li>-->
|
||
<!-- </ul>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="activity-notes">-->
|
||
<!-- <p>注意事项：</p>-->
|
||
<!-- <ul>-->
|
||
<!-- <li>活动最终解释权归平台所有</li>-->
|
||
<!-- <li>请勿使用任何非法手段进行刷量一经发现，平台有权取消用户的参与资格</li>-->
|
||
<!-- <li>奖品将通过邮件方式发放，请确保联系方式正确</li>-->
|
||
<!-- <li>平台有权审核邀请用户的活跃度，对无实际行为的邀请进行无效处理</li>-->
|
||
<!-- </ul>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- 排行榜列表 -->
|
||
<div class="leaderboard-list">
|
||
{% for user in leaderboard %}
|
||
<div class="leaderboard-item {% if loop.index <= 3 %}top-{{ loop.index }}{% endif %} {% if loop.index == 1 %}champion{% endif %}">
|
||
<div class="rank-number">
|
||
{% if loop.index == 1 %}
|
||
<div class="crown">
|
||
<i class="fas fa-crown"></i>
|
||
</div>
|
||
{% elif loop.index == 2 %}
|
||
<div class="medal silver">
|
||
<i class="fas fa-medal"></i>
|
||
</div>
|
||
{% elif loop.index == 3 %}
|
||
<div class="medal bronze">
|
||
<i class="fas fa-medal"></i>
|
||
</div>
|
||
{% else %}
|
||
{{ loop.index }}
|
||
{% endif %}
|
||
</div>
|
||
<div class="user-info">
|
||
<img src="{{ user.avatar or '/static/images/default-avatar.png' }}"
|
||
alt="{{ user.name }}"
|
||
class="user-avatar">
|
||
<div class="user-details">
|
||
<div class="user-info-row">
|
||
<div class="user-name">{{ user.name }}</div>
|
||
<span class="invite-count">已邀请 {{ user.invite_count }} 位好友</span>
|
||
{% if user.unlocked_features %}
|
||
<span class="unlocked-badge">
|
||
<i class="fas fa-unlock"></i>
|
||
已解锁
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="empty-tip">
|
||
<i class="fas fa-trophy"></i>
|
||
<p>暂无邀请记录</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示消息 -->
|
||
<div id="toast" class="developing-tip">
|
||
<span id="toastMessage"></span>
|
||
</div>
|
||
|
||
<style>
|
||
.leaderboard-page {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px 15px;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-bottom: 30px;
|
||
background: white;
|
||
padding: 10px 15px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.back-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
padding: 8px;
|
||
border-radius: 50%;
|
||
background: #f5f5f7;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.header h1 {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
font-family: "SimHei", "黑体", sans-serif;
|
||
transform: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
.leaderboard-container {
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.leaderboard-banner {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
||
}
|
||
|
||
.banner-content {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.banner-content i {
|
||
font-size: 24px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.banner-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.banner-text h2 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.banner-text p {
|
||
margin: 4px 0 0;
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.invite-link {
|
||
display: flex;
|
||
gap: 8px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.invite-link input {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
color: white;
|
||
padding: 4px 8px;
|
||
font-size: 14px;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
}
|
||
|
||
.invite-link input::placeholder {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.invite-link button {
|
||
padding: 6px 16px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.invite-link button:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.invite-link button i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.login-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 8px 20px;
|
||
border-radius: 20px;
|
||
margin-top: 12px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.login-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.login-btn i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.leaderboard-list {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 16px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
margin-top: 24px;
|
||
position: relative;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.leaderboard-list::before {
|
||
content: "当前排名";
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 20px;
|
||
background: #6366f1;
|
||
color: white;
|
||
padding: 4px 16px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
|
||
}
|
||
|
||
.leaderboard-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
border-bottom: 1px solid #eee;
|
||
transition: all 0.3s ease;
|
||
border-radius: 12px;
|
||
margin-bottom: 8px;
|
||
background: #f8f9ff;
|
||
}
|
||
|
||
.leaderboard-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.leaderboard-item:hover {
|
||
background: rgba(99, 102, 241, 0.05);
|
||
}
|
||
|
||
.rank-number {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: #666;
|
||
}
|
||
footer,
|
||
.footer {
|
||
display: none !important;
|
||
}
|
||
|
||
.fa-crown {
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.crown i {
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid #fff;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.user-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.user-info-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.user-name {
|
||
font-weight: 500;
|
||
color: #333;
|
||
font-size: 15px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.invite-count {
|
||
font-size: 14px;
|
||
color: #574b4b;
|
||
opacity: 0.9;
|
||
flex: 1;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.unlocked-badge {S
|
||
background: rgba(99, 102, 241, 0.1);
|
||
color: #6366f1;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.unlocked-badge i {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.empty-tip i {
|
||
font-size: 48px;
|
||
color: #ddd;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .header {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .header h1 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .back-link {
|
||
background: #333;
|
||
color: #ccc;
|
||
}
|
||
|
||
[data-theme="dark"] .leaderboard-list {
|
||
background: #242424;
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .leaderboard-item {
|
||
border-color: #333;
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
[data-theme="dark"] .leaderboard-item:hover {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
[data-theme="dark"] .user-name {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .invite-count {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .unlocked-badge {
|
||
background: rgba(129, 140, 248, 0.1);
|
||
color: #818cf8;
|
||
}
|
||
|
||
/* 前三名样式 */
|
||
.champion {
|
||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
|
||
border: 1px solid rgba(255, 215, 0, 0.3);
|
||
transform: scale(1.02);
|
||
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.1);
|
||
}
|
||
|
||
.top-2 {
|
||
background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%) !important;
|
||
border: 1px solid rgba(192, 192, 192, 0.3);
|
||
transform: scale(1.01);
|
||
box-shadow: 0 4px 12px rgba(192, 192, 192, 0.1);
|
||
}
|
||
|
||
.top-3 {
|
||
background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%) !important;
|
||
border: 1px solid rgba(205, 127, 50, 0.3);
|
||
transform: scale(1.005);
|
||
box-shadow: 0 4px 12px rgba(205, 127, 50, 0.1);
|
||
}
|
||
|
||
.crown {
|
||
font-size: 24px;
|
||
color: #ffd700;
|
||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||
}
|
||
|
||
.medal {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.medal.silver {
|
||
color: #c0c0c0;
|
||
text-shadow: 0 0 5px rgba(192, 192, 192, 0.5);
|
||
}
|
||
|
||
.medal.bronze {
|
||
color: #cd7f32;
|
||
text-shadow: 0 0 5px rgba(205, 127, 50, 0.5);
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .champion {
|
||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.1) 100%);
|
||
border-color: rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
[data-theme="dark"] .top-2 {
|
||
background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.1) 100%);
|
||
border-color: rgba(192, 192, 192, 0.3);
|
||
}
|
||
|
||
[data-theme="dark"] .top-3 {
|
||
background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.1) 100%);
|
||
border-color: rgba(205, 127, 50, 0.3);
|
||
}
|
||
|
||
.medal i {
|
||
padding-right: 15px;
|
||
}
|
||
|
||
/* 活动说明样式 */
|
||
.activity-rules {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 12px 16px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.rules-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.rules-header i {
|
||
color: #6366f1;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.rules-header h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.rules-content {
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
.prize-list h4,
|
||
.activity-info h4 {
|
||
color: #333;
|
||
margin: 12px 0 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.prize-list ul,
|
||
.activity-info ul,
|
||
.activity-notes ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.prize-list li,
|
||
.activity-info li,
|
||
.activity-notes li {
|
||
margin-bottom: 6px;
|
||
position: relative;
|
||
padding-left: 20px;
|
||
display: block;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.prize-list li::before,
|
||
.activity-info li::before,
|
||
.activity-notes li::before {
|
||
content: "•";
|
||
position: absolute;
|
||
left: 8px;
|
||
top: 0;
|
||
color: #6366f1;
|
||
}
|
||
|
||
.rank {
|
||
color: #6366f1;
|
||
font-weight: 500;
|
||
min-width: 70px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.activity-notes {
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px dashed #eee;
|
||
}
|
||
|
||
.activity-notes p {
|
||
color: #ff4d4f;
|
||
font-weight: 500;
|
||
margin: 0 0 6px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .activity-rules {
|
||
background: #242424;
|
||
}
|
||
|
||
[data-theme="dark"] .rules-header {
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .rules-header h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .rules-content {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .prize-list h4,
|
||
[data-theme="dark"] .activity-info h4 {
|
||
color: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] .activity-notes {
|
||
border-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] .rank {
|
||
color: #818cf8;
|
||
}
|
||
|
||
.prize-list li:nth-child(1) {
|
||
color: #f59e0b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.prize-list li:nth-child(2) {
|
||
color: #6b7280;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.prize-list li:nth-child(3) {
|
||
color: #b45309;
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-theme="dark"] .leaderboard-list::before {
|
||
background: #818cf8;
|
||
box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
|
||
}
|
||
|
||
/* 邀请卡片样式 */
|
||
.invite-card {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
||
}
|
||
|
||
.invite-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.invite-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.invite-status i {
|
||
font-size: 24px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.status-text p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.unlock-tip {
|
||
opacity: 0.9;
|
||
font-size: 12px;
|
||
margin-top: 4px !important;
|
||
}
|
||
|
||
.invite-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.invite-link {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 8px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.invite-link input {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
color: white;
|
||
padding: 4px 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.invite-link button {
|
||
padding: 4px 12px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.invite-link button:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.share-btn {
|
||
padding: 8px 20px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.share-btn:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
/* Toast 提示样式 */
|
||
.developing-tip {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.developing-tip.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .developing-tip {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
color: black;
|
||
}
|
||
|
||
.status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 4px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.invite-count {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.unlock-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.unlock-status i {
|
||
font-size: 12px;
|
||
margin: 0;
|
||
}
|
||
|
||
.unlock-tip {
|
||
font-size: 13px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .invite-info {
|
||
color: #999;
|
||
}
|
||
|
||
[data-theme="dark"] .unlocked-badge {
|
||
background: rgba(129, 140, 248, 0.1);
|
||
color: #818cf8;
|
||
}
|
||
|
||
/* 移动端适配 */
|
||
@media (max-width: 768px) {
|
||
.leaderboard-page {
|
||
padding: 15px 10px;
|
||
}
|
||
|
||
.header {
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.leaderboard-banner {
|
||
padding: 15px;
|
||
}
|
||
|
||
.banner-text h2 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.banner-text p {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.invite-link {
|
||
padding: 6px;
|
||
}
|
||
|
||
.invite-link button {
|
||
padding: 4px 12px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.activity-rules {
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.rules-header h3 {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.rules-content {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.prize-list h4,
|
||
.activity-info h4 {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.rank {
|
||
min-width: 60px;
|
||
}
|
||
|
||
.leaderboard-item {
|
||
padding: 12px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.user-info {
|
||
gap: 8px;
|
||
}
|
||
|
||
.user-info-row {
|
||
gap: 8px;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 14px;
|
||
min-width: auto;
|
||
}
|
||
|
||
.invite-count {
|
||
font-size: 13px;
|
||
min-width: auto;
|
||
}
|
||
|
||
.unlocked-badge {
|
||
padding: 2px 6px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.rank-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.crown,
|
||
.medal {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.status-row {
|
||
gap: 8px;
|
||
}
|
||
|
||
.unlock-status,
|
||
.unlock-tip {
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
}
|
||
}
|
||
|
||
/* 小屏幕适配 */
|
||
@media (max-width: 480px) {
|
||
.leaderboard-page {
|
||
padding: 12px 8px;
|
||
}
|
||
|
||
.header {
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.user-info-row {
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
.user-name,
|
||
.invite-count {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.unlocked-badge {
|
||
margin-left: 0;
|
||
margin-top: 4px;
|
||
}
|
||
}
|
||
|
||
/* 横幅中的邀请数字体样式 */
|
||
.banner-text .invite-count {
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
line-height: 1.4;
|
||
color: white;
|
||
}
|
||
|
||
/* 排行榜列表中的邀请数字体样式 */
|
||
.leaderboard-list .invite-count {
|
||
font-size: 14px;
|
||
color: #574b4b;
|
||
opacity: 0.9;
|
||
flex: 1;
|
||
min-width: 120px;
|
||
}
|
||
|
||
/* 暗色模式适配 */
|
||
[data-theme="dark"] .leaderboard-list .invite-count {
|
||
color: #999;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 加载邀请信息
|
||
function loadInviteInfo() {
|
||
fetch('/user/invite_code')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
document.getElementById('inviteCount').textContent = data.invite_count;
|
||
document.getElementById('inviteUrl').value = data.invite_url;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 复制邀请链接
|
||
function copyInviteUrl() {
|
||
const input = document.getElementById('inviteUrl');
|
||
input.select();
|
||
document.execCommand('copy');
|
||
showToast('邀请链接已复制');
|
||
}
|
||
|
||
// Toast 提示函数
|
||
function showToast(message) {
|
||
const toast = document.getElementById('toast');
|
||
const toastMessage = document.getElementById('toastMessage');
|
||
toastMessage.textContent = message;
|
||
toast.classList.add('show');
|
||
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 2000);
|
||
}
|
||
|
||
// 页面加载时获取邀请信息
|
||
document.addEventListener('DOMContentLoaded', loadInviteInfo);
|
||
</script>
|
||
{% endblock %}
|
||
|
||
{% block footer %}{% endblock %} |