邀请新用户注册页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邀请好友得VIP - 专属邀请页面</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 全局样式 */
:root {
--primary-color: #FF3300;
--primary-light: #FF6633;
--primary-dark: #CC2900;
--text-color: #333;
--light-text: #666;
--bg-color: #FFF9F7;
--card-bg: #fff;
--border-radius: 12px;
--box-shadow: 0 8px 20px rgba(255, 51, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
padding-bottom: 40px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
.header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
padding: 40px 0;
text-align: center;
border-radius: 0 0 var(--border-radius) var(--border-radius);
margin-bottom: 30px;
box-shadow: var(--box-shadow);
position: relative;
overflow: hidden;
}
.header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://page.mixinnet.cn/api/placeholder?w=1200&h=300&bg=FF3300&text=邀请好友') center/cover no-repeat;
opacity: 0.2;
}
.header-content {
position: relative;
z-index: 1;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.header p {
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
opacity: 0.9;
}
/* 卡片通用样式 */
.card {
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 25px;
margin-bottom: 25px;
transition: var(--transition);
border: 1px solid rgba(255, 51, 0, 0.1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(255, 51, 0, 0.15);
}
.card-title {
font-size: 1.4rem;
margin-bottom: 20px;
color: var(--primary-color);
display: flex;
align-items: center;
}
.card-title i {
margin-right: 10px;
font-size: 1.2em;
}
/* 用户数据卡片 */
.stats-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
text-align: center;
}
.stat-item {
padding: 15px;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--primary-color);
margin: 10px 0;
position: relative;
display: inline-block;
}
.stat-number::after {
content: "+";
position: absolute;
top: 0;
right: -15px;
font-size: 1.5rem;
color: var(--primary-light);
}
.stat-label {
color: var(--light-text);
font-size: 0.95rem;
}
.progress-container {
margin-top: 30px;
grid-column: 1 / -1;
}
.progress-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.progress-bar {
height: 10px;
background-color: #f0f0f0;
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), #FF9900);
border-radius: 5px;
width: 65%;
position: relative;
transition: width 1s ease-in-out;
}
.progress-fill::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.1) 100%);
animation: progressShine 2s infinite;
}
@keyframes progressShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* 邀请方式区块 */
.invite-methods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.invite-methods {
grid-template-columns: 1fr;
}
}
.invite-link {
display: flex;
flex-direction: column;
}
.link-container {
display: flex;
margin-bottom: 15px;
}
.link-input {
flex: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: var(--border-radius) 0 0 var(--border-radius);
font-size: 0.95rem;
outline: none;
transition: var(--transition);
}
.link-input:focus {
border-color: var(--primary-color);
}
.copy-btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0 20px;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.copy-btn:hover {
background-color: var(--primary-dark);
}
.copy-btn i {
margin-right: 5px;
}
.qr-code {
display: flex;
flex-direction: column;
align-items: center;
}
.qr-image {
width: 180px;
height: 180px;
background-color: #f5f5f5;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
overflow: hidden;
}
.qr-image img {
max-width: 100%;
max-height: 100%;
}
.share-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
padding: 10px;
border-radius: 30px;
color: white;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.share-btn i {
margin-right: 8px;
font-size: 1.2rem;
}
.wechat {
background-color: #07C160;
}
.weibo {
background-color: #E6162D;
}
.qq {
background-color: #12B7F5;
}
.link {
background-color: var(--primary-color);
}
/* 奖励说明 */
.rewards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.reward-tier {
background: linear-gradient(135deg, #FFF5F2, white);
border-radius: var(--border-radius);
padding: 20px;
border: 1px solid rgba(255, 51, 0, 0.1);
transition: var(--transition);
}
.reward-tier:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 51, 0, 0.1);
}
.tier-header {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed #eee;
}
.tier-icon {
width: 40px;
height: 40px;
background-color: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.2rem;
}
.tier-name {
font-weight: bold;
font-size: 1.1rem;
}
.tier-requirement {
color: var(--primary-color);
font-weight: 500;
}
.tier-benefits {
list-style-type: none;
}
.tier-benefits li {
margin-bottom: 8px;
position: relative;
padding-left: 25px;
}
.tier-benefits li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
color: var(--primary-color);
}
.vip-badge {
background-color: #FFD700;
color: #8B6508;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
margin-left: 5px;
}
/* 邀请记录 */
.records-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.records-table th, .records-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.records-table th {
background-color: #FFF5F2;
color: var(--primary-color);
font-weight: 500;
}
.records-table tr:hover {
background-color: #FFF9F7;
}
.status {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
}
.status-success {
background-color: #E8F5E9;
color: #2E7D32;
}
.status-pending {
background-color: #FFF8E1;
color: #F57F17;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.page-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
border-radius: 50%;
background-color: white;
border: 1px solid #ddd;
cursor: pointer;
transition: var(--transition);
}
.page-btn:hover, .page-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* 活动规则 */
.rule-item {
margin-bottom: 15px;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.rule-header {
background-color: #FFF5F2;
padding: 15px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.rule-header:hover {
background-color: #FFEBE6;
}
.rule-title {
font-weight: 500;
color: var(--primary-color);
}
.rule-icon {
transition: transform 0.3s ease;
}
.rule-content {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background-color: white;
}
.rule-item.active .rule-content {
padding: 20px;
max-height: 500px;
}
.rule-item.active .rule-icon {
transform: rotate(180deg);
}
/* 动画效果 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 2s infinite;
}
/* 响应式调整 */
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.header p {
font-size: 1rem;
}
.stats-card {
grid-template-columns: 1fr;
}
.card-title {
font-size: 1.2rem;
}
.records-table {
display: block;
overflow-x: auto;
}
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<h1>邀请好友，尊享VIP特权</h1>
<p>每成功邀请一位好友注册，即可获得丰厚奖励，累计邀请达到指定人数更可升级VIP会员</p>
</div>
</div>
<div class="container">
<!-- 用户数据卡片 -->
<div class="card">
<h2 class="card-title"><i class="fas fa-chart-line"></i>我的邀请数据</h2>
<div class="stats-card">
<div class="stat-item">
<div class="stat-label">已邀请好友</div>
<div class="stat-number">28</div>
</div>
<div class="stat-item">
<div class="stat-label">有效邀请</div>
<div class="stat-number">24</div>
</div>
<div class="stat-item">
<div class="stat-label">累计奖励</div>
<div class="stat-number">480</div>
<div class="stat-label">积分</div>
</div>
<div class="progress-container">
<div class="progress-title">
<span>VIP升级进度</span>
<span>65% (还需邀请8人)</span>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
</div>
</div>
<!-- 邀请方式区块 -->
<div class="card">
<h2 class="card-title"><i class="fas fa-share-alt"></i>邀请好友</h2>
<div class="invite-methods">
<div class="invite-link">
<h3>邀请链接</h3>
<p style="margin-bottom: 15px; color: var(--light-text);">复制下方链接发送给好友，好友通过链接注册后您将获得奖励</p>
<div class="link-container">
<input type="text" class="link-input" value="https://example.com/invite/abc123" readonly>
<button class="copy-btn" id="copyBtn">
<i class="far fa-copy"></i> 复制
</button>
</div>
<p style="font-size: 0.9rem; color: var(--light-text); margin-top: 10px;">
<i class="fas fa-info-circle"></i> 链接永久有效，可多次使用
</p>
</div>
<div class="qr-code">
<h3>邀请二维码</h3>
<div class="qr-image">
<img src="https://page.mixinnet.cn/api/placeholder?w=180&h=180&bg=FF3300&text=扫码邀请" alt="邀请二维码">
</div>
<p style="color: var(--light-text); font-size: 0.9rem;">扫描二维码直接邀请好友</p>
</div>
</div>
<div class="share-buttons">
<button class="share-btn wechat">
<i class="fab fa-weixin"></i> 微信分享
</button>
<button class="share-btn weibo">
<i class="fab fa-weibo"></i> 微博分享
</button>
<button class="share-btn qq">
<i class="fab fa-qq"></i> QQ分享
</button>
<button class="share-btn link pulse">
<i class="fas fa-link"></i> 复制链接
</button>
</div>
</div>
<!-- 奖励说明 -->
<div class="card">
<h2 class="card-title"><i class="fas fa-gift"></i>奖励说明</h2>
<p style="margin-bottom: 20px; color: var(--light-text);">邀请好友可获得丰厚奖励，邀请人数越多，奖励越丰厚</p>
<div class="rewards-grid">
<div class="reward-tier">
<div class="tier-header">
<div class="tier-icon">
<i class="fas fa-user-plus"></i>
</div>
<div>
<div class="tier-name">新秀邀请官</div>
<div class="tier-requirement">邀请1-5人</div>
</div>
</div>
<ul class="tier-benefits">
<li>每邀请1人获得10积分</li>
<li>专属新人奖励礼包</li>
<li>基础等级标识</li>
</ul>
</div>
<div class="reward-tier">
<div class="tier-header">
<div class="tier-icon">
<i class="fas fa-user-friends"></i>
</div>
<div>
<div class="tier-name">精英邀请官</div>
<div class="tier-requirement">邀请6-15人</div>
</div>
</div>
<ul class="tier-benefits">
<li>每邀请1人获得15积分</li>
<li>额外邀请奖励礼包</li>
<li>专属精英标识</li>
</ul>
</div>
<div class="reward-tier">
<div class="tier-header">
<div class="tier-icon">
<i class="fas fa-crown"></i>
</div>
<div>
<div class="tier-name">VIP邀请官 <span class="vip-badge">VIP</span></div>
<div class="tier-requirement">邀请16+人</div>
</div>
</div>
<ul class="tier-benefits">
<li>每邀请1人获得20积分</li>
<li>尊享VIP会员特权</li>
<li>专属VIP标识和礼包</li>
<li>优先客服支持</li>
</ul>
</div>
</div>
</div>
<!-- 邀请记录 -->
<div class="card">
<h2 class="card-title"><i class="fas fa-history"></i>邀请记录</h2>
<table class="records-table">
<thead>
<tr>
<th>好友昵称</th>
<th>注册时间</th>
<th>奖励积分</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户_158***</td>
<td>2023-10-15 14:30</td>
<td>+20</td>
<td><span class="status status-success">已生效</span></td>
</tr>
<tr>
<td>用户_792***</td>
<td>2023-10-14 09:15</td>
<td>+20</td>
<td><span class="status status-success">已生效</span></td>
</tr>
<tr>
<td>用户_356***</td>
<td>2023-10-13 18:45</td>
<td>+15</td>
<td><span class="status status-success">已生效</span></td>
</tr>
<tr>
<td>用户_647***</td>
<td>2023-10-12 11:20</td>
<td>+15</td>
<td><span class="status status-success">已生效</span></td>
</tr>
<tr>
<td>用户_923***</td>
<td>2023-10-11 16:05</td>
<td>+10</td>
<td><span class="status status-pending">审核中</span></td>
</tr>
</tbody>
</table>
<div class="pagination">
<div class="page-btn"><i class="fas fa-chevron-left"></i></div>
<div class="page-btn active">1</div>
<div class="page-btn">2</div>
<div class="page-btn">3</div>
<div class="page-btn"><i class="fas fa-chevron-right"></i></div>
</div>
</div>
<!-- 活动规则 -->
<div class="card">
<h2 class="card-title"><i class="fas fa-question-circle"></i>活动规则</h2>
<div class="rule-item">
<div class="rule-header">
<div class="rule-title">邀请规则</div>
<div class="rule-icon">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="rule-content">
<p>1. 每位用户可通过专属邀请链接或二维码邀请好友注册。</p>
<p>2. 被邀请好友需通过您的专属链接完成注册并验证手机号才算有效邀请。</p>
<p>3. 同一设备、同一IP地址或同一手机号仅计为一次有效邀请。</p>
</div>
</div>
<div class="rule-item">
<div class="rule-header">
<div class="rule-title">奖励规则</div>
<div class="rule-icon">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="rule-content">
<p>1. 每成功邀请一位好友注册，您将获得10-20积分奖励，具体数额取决于您的当前邀请等级。</p>
<p>2. 积分可用于兑换平台VIP会员或各种实物礼品。</p>
<p>3. 邀请人数达到16人及以上，您将自动升级为VIP会员，享受专属特权。</p>
</div>
</div>
<div class="rule-item">
<div class="rule-header">
<div class="rule-title">注意事项</div>
<div class="rule-icon">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="rule-content">
<p>1. 禁止使用任何不正当手段刷邀请，一经发现将取消所有奖励并封禁账号。</p>
<p>2. 活动最终解释权归平台所有，平台有权根据实际情况调整活动规则。</p>
<p>3. 如有任何疑问，请联系客服咨询。</p>
</div>
</div>
</div>
</div>
<script>
// 复制功能
document.getElementById('copyBtn').addEventListener('click', function() {
const linkInput = document.querySelector('.link-input');
linkInput.select();
document.execCommand('copy');
const originalText = this.innerHTML;
this.innerHTML = '<i class="fas fa-check"></i> 已复制';
this.style.backgroundColor = '#07C160';
setTimeout(() => {
this.innerHTML = originalText;
this.style.backgroundColor = 'var(--primary-color)';
}, 2000);
});
// 折叠面板功能
const ruleHeaders = document.querySelectorAll('.rule-header');
ruleHeaders.forEach(header => {
header.addEventListener('click', () => {
const ruleItem = header.parentElement;
ruleItem.classList.toggle('active');
});
});
// 模拟加载动画
window.addEventListener('load', function() {
setTimeout(() => {
document.querySelector('.progress-fill').style.width = '65%';
}, 500);
});
// 分享按钮点击效果
const shareBtns = document.querySelectorAll('.share-btn');
shareBtns.forEach(btn => {
btn.addEventListener('click', function() {
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = '';
}, 200);
// 这里可以添加实际的分享功能
alert('分享功能需要接入相应平台的SDK');
});
});
</script>
</body>
</html>页面特点
- 炫酷橙色主题：以#FF3300为主色调，搭配渐变色和阴影效果
- 响应式设计：完美适配各种屏幕尺寸
丰富动画效果：
- 进度条加载动画
- 按钮点击反馈动画
- 卡片悬浮效果
- 脉冲效果的分享按钮
完整功能区块：
- 用户数据统计
- 邀请链接和二维码
- 多平台分享功能
- 阶梯奖励说明
- 邀请记录表格
- 折叠式活动规则
交互体验优化：
- 复制链接功能
- 折叠面板交互
- 分页控制
- 状态标识
页面无需任何框架依赖，仅使用原生HTML/CSS/JavaScript和Font Awesome图标库实现所有功能。
需支付 5元 阅读剩余内容
