541 lines
16 KiB
HTML
541 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>末日求生 - 个人信息</title>
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
|
||
background: linear-gradient(135deg, #2d1b0e 0%, #4a2c18 50%, #6b390f 100%);
|
||
min-height: 100vh;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.top-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
background: rgba(255, 86, 0, 0.3);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 2px solid #ff8c3a;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.nav-logo {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #ffcc99;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.content-container {
|
||
padding-top: 70px;
|
||
padding-bottom: 30px;
|
||
}
|
||
|
||
/* 用户信息卡片 */
|
||
.profile-card {
|
||
background: rgba(255, 86, 0, 0.1);
|
||
border: 3px solid #ff8c3a;
|
||
border-radius: 20px;
|
||
margin: 20px;
|
||
padding: 30px;
|
||
text-align: center;
|
||
box-shadow:
|
||
0 4px 20px rgba(255, 94, 0, 0.4),
|
||
inset 0 0 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.avatar-container {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 0 auto 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.avatar {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #ff8c3a 0%, #ff5e00 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
color: #fff;
|
||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
|
||
box-shadow:
|
||
0 4px 15px rgba(255, 94, 0, 0.8),
|
||
inset 0 2px 5px rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.avatar::before {
|
||
content: '🧔';
|
||
animation: breathe 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes breathe {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
|
||
.avatar-level {
|
||
position: absolute;
|
||
bottom: -5px;
|
||
right: -5px;
|
||
background: #ff3a00;
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
box-shadow: 0 3px 10px rgba(255, 50, 0, 0.6);
|
||
}
|
||
|
||
.profile-name {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #ffcc99;
|
||
margin-bottom: 10px;
|
||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.profile-id {
|
||
font-size: 14px;
|
||
color: #ff8c3a;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 统计信息 */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.stat-item {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 2px solid rgba(255, 107, 0, 0.3);
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: #ff8c3a;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #ffcc99;
|
||
}
|
||
|
||
/* 成就卡片 */
|
||
.achievement-card {
|
||
background: rgba(255, 86, 0, 0.1);
|
||
border: 3px solid #ff8c3a;
|
||
border-radius: 15px;
|
||
margin: 20px;
|
||
padding: 20px;
|
||
box-shadow:
|
||
0 4px 20px rgba(255, 94, 0, 0.4),
|
||
inset 0 0 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.achievement-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #ffcc99;
|
||
margin-bottom: 15px;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.achievement-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
}
|
||
|
||
.achievement-item {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 2px solid rgba(255, 107, 0, 0.3);
|
||
border-radius: 10px;
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.achievement-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #ff8c3a 0%, #ff5e00 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
box-shadow: 0 3px 10px rgba(255, 94, 0, 0.6);
|
||
}
|
||
|
||
.achievement-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.achievement-name {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #ffcc99;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.achievement-desc {
|
||
font-size: 11px;
|
||
color: #ff8c3a;
|
||
}
|
||
|
||
/* 设置卡片 */
|
||
.settings-card {
|
||
background: rgba(255, 86, 0, 0.1);
|
||
border: 3px solid #ff8c3a;
|
||
border-radius: 15px;
|
||
margin: 20px;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 4px 20px rgba(255, 94, 0, 0.4),
|
||
inset 0 0 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.settings-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid rgba(255, 107, 0, 0.2);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.settings-item:hover {
|
||
background: rgba(255, 107, 0, 0.1);
|
||
}
|
||
|
||
.settings-label {
|
||
color: #ffcc99;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.settings-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: rgba(255, 107, 0, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.settings-value {
|
||
color: #ff8c3a;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.settings-switch {
|
||
width: 50px;
|
||
height: 26px;
|
||
background: rgba(255, 107, 0, 0.3);
|
||
border-radius: 13px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.settings-switch::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 3px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #ff8c3a;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.settings-switch.active {
|
||
background: rgba(255, 107, 0, 0.6);
|
||
}
|
||
|
||
.settings-switch.active::after {
|
||
left: 27px;
|
||
}
|
||
|
||
/* 底部标签页 */
|
||
.bottom-tabs {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 70px;
|
||
background: rgba(255, 86, 0, 0.3);
|
||
backdrop-filter: blur(10px);
|
||
border-top: 2px solid #ff8c3a;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 15px 20px;
|
||
background: rgba(255, 86, 0, 0.3);
|
||
border: 2px solid #ff8c3a;
|
||
border-radius: 25px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background: linear-gradient(180deg, #ff8c3a 0%, #ff5e00 100%);
|
||
box-shadow:
|
||
0 4px 15px rgba(255, 94, 0, 0.6),
|
||
inset 0 2px 5px rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.tab-item:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow:
|
||
0 6px 20px rgba(255, 94, 0, 0.8),
|
||
inset 0 2px 5px rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
/* 按钮 */
|
||
.action-button {
|
||
display: block;
|
||
width: calc(100% - 40px);
|
||
margin: 20px;
|
||
padding: 15px;
|
||
background: linear-gradient(180deg, #ff8c3a 0%, #ff5e00 100%);
|
||
border: none;
|
||
border-radius: 25px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
box-shadow:
|
||
0 4px 15px rgba(255, 94, 0, 0.6),
|
||
inset 0 2px 5px rgba(255, 255, 255, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow:
|
||
0 6px 20px rgba(255, 94, 0, 0.8),
|
||
inset 0 2px 5px rgba(255, 255, 255, 0.4);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="top-nav">
|
||
<div class="nav-logo">👤末日求生 - 个人信息</div>
|
||
</nav>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="content-container">
|
||
<!-- 用户信息卡片 -->
|
||
<div class="profile-card">
|
||
<div class="avatar-container">
|
||
<div class="avatar"></div>
|
||
<div class="avatar-level">15</div>
|
||
</div>
|
||
<div class="profile-name">生存者：铁血战士</div>
|
||
<div class="profile-id">ID: SURV-2026-007</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<div class="stat-label">生存天数</div>
|
||
<div class="stat-value">127</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-label">技能掌握</div>
|
||
<div class="stat-value">18</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-label">救援成功</div>
|
||
<div class="stat-value">7</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成就卡片 -->
|
||
<div class="achievement-card">
|
||
<div class="achievement-title">🏆 已获得成就</div>
|
||
<div class="achievement-grid">
|
||
<div class="achievement-item">
|
||
<div class="achievement-icon">🔥</div>
|
||
<div class="achievement-info">
|
||
<div class="achievement-name">火焰使者</div>
|
||
<div class="achievement-desc">成功点燃100次火源</div>
|
||
</div>
|
||
</div>
|
||
<div class="achievement-item">
|
||
<div class="achievement-icon">🏠</div>
|
||
<div class="achievement-info">
|
||
<div class="achievement-name">家园建筑师</div>
|
||
<div class="achievement-desc">建造3座安全庇护所</div>
|
||
</div>
|
||
</div>
|
||
<div class="achievement-item">
|
||
<div class="achievement-icon">💧</div>
|
||
<div class="achievement-info">
|
||
<div class="achievement-name">水源专家</div>
|
||
<div class="achievement-desc">净化500升水源</div>
|
||
</div>
|
||
</div>
|
||
<div class="achievement-item">
|
||
<div class="achievement-icon">⚕️</div>
|
||
<div class="achievement-info">
|
||
<div class="achievement-name">急救先锋</div>
|
||
<div class="achievement-desc">成功救治10次伤病</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设置卡片 -->
|
||
<div class="settings-card">
|
||
<div class="settings-item">
|
||
<div class="settings-label">
|
||
<div class="settings-icon">🌙</div>
|
||
夜间模式
|
||
</div>
|
||
<div class="settings-switch active"></div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<div class="settings-label">
|
||
<div class="settings-icon">🔔</div>
|
||
过期提醒
|
||
</div>
|
||
<div class="settings-switch active"></div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<div class="settings-label">
|
||
<div class="settings-icon">📍</div>
|
||
位置共享
|
||
</div>
|
||
<div class="settings-switch"></div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<div class="settings-label">
|
||
<div class="settings-icon">📱</div>
|
||
新消息通知
|
||
</div>
|
||
<div class="settings-switch active"></div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<div class="settings-label">
|
||
<div class="settings-icon">🗑️</div>
|
||
清除缓存
|
||
</div>
|
||
<div class="settings-value">15.2 MB</div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<div class="settings-label">
|
||
<div class="settings-icon">📄</div>
|
||
版本信息
|
||
</div>
|
||
<div class="settings-value">v3.6.0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<button class="action-button" id="logoutBtn">退出登录</button>
|
||
</div>
|
||
|
||
<!-- 底部标签页 -->
|
||
<div class="bottom-tabs">
|
||
<div class="tab-item">首页</div>
|
||
<div class="tab-item">背包</div>
|
||
<div class="tab-item active">我的</div>
|
||
</div>
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
// 标签页切换效果
|
||
$('.tab-item').on('click', function() {
|
||
$('.tab-item').removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
const tabName = $(this).text();
|
||
if (tabName === '首页') {
|
||
window.location.href = '../home/index.html';
|
||
} else if (tabName === '背包') {
|
||
window.location.href = '../bag/index.html';
|
||
} else if (tabName === '我的') {
|
||
// 已经在当前页面
|
||
}
|
||
});
|
||
|
||
// 开关切换效果
|
||
$('.settings-switch').on('click', function() {
|
||
$(this).toggleClass('active');
|
||
|
||
const settingLabel = $(this).closest('.settings-item').find('.settings-label').text();
|
||
console.log('设置项更新：', settingLabel, '状态：', $(this).hasClass('active'));
|
||
});
|
||
|
||
// 退出登录按钮
|
||
$('#logoutBtn').on('click', function() {
|
||
if (confirm('确定要退出登录吗？')) {
|
||
alert('正在退出登录...');
|
||
window.location.href = '../login/index.html';
|
||
}
|
||
});
|
||
|
||
// 清除缓存
|
||
$('.settings-item').eq(4).on('click', function() {
|
||
if (confirm('确定要清除缓存吗？')) {
|
||
$(this).find('.settings-value').text('0 MB');
|
||
alert('缓存已清除！');
|
||
}
|
||
});
|
||
|
||
// 版本信息点击
|
||
$('.settings-item').eq(5).on('click', function() {
|
||
alert('末日求生 App\n版本：v3.6.0\n发布日期：2026-03-25\n生存者协议：本应用仅供模拟生存训练使用');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |