1172 行
45 KiB
HTML
1172 行
45 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|||
|
|
<title>洪荒大陆 - UI预览</title>
|
|||
|
|
<style>
|
|||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|||
|
|
background: #0a0a0f;
|
|||
|
|
color: #f0e6d2;
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phone-frame {
|
|||
|
|
width: 375px;
|
|||
|
|
height: 812px;
|
|||
|
|
background: linear-gradient(180deg, #1a1520 0%, #2a2535 100%);
|
|||
|
|
border-radius: 40px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow: 0 0 60px rgba(201, 168, 76, 0.3);
|
|||
|
|
border: 3px solid #3a3040;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-bar {
|
|||
|
|
height: 44px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #c8b8a0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.screen {
|
|||
|
|
height: calc(100% - 44px - 70px);
|
|||
|
|
overflow-y: auto;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.screen.active { display: block; }
|
|||
|
|
.screen::-webkit-scrollbar { display: none; }
|
|||
|
|
|
|||
|
|
/* 通用组件 */
|
|||
|
|
.top-bar {
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
background: linear-gradient(180deg, rgba(42,37,53,0.95) 0%, rgba(42,37,53,0.8) 100%);
|
|||
|
|
border-bottom: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-item .icon { font-size: 16px; }
|
|||
|
|
.resource-item .value { color: #e8c86c; font-weight: 600; }
|
|||
|
|
|
|||
|
|
.char-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-avatar {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(135deg, #c9a84c 0%, #8a6d2b 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 28px;
|
|||
|
|
border: 2px solid #e8d08c;
|
|||
|
|
box-shadow: 0 0 20px rgba(201,168,76,0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-name { font-size: 18px; color: #e8c86c; font-weight: 600; }
|
|||
|
|
.char-realm { font-size: 12px; color: #4ce84c; margin-top: 2px; }
|
|||
|
|
.char-race { font-size: 11px; color: #b44ce8; margin-top: 2px; }
|
|||
|
|
|
|||
|
|
.stats-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item { display: flex; align-items: center; gap: 4px; }
|
|||
|
|
.stat-item .label { color: #8a7d6d; }
|
|||
|
|
.stat-item .value { color: #f0e6d2; }
|
|||
|
|
.stat-item.green .value { color: #4ce84c; }
|
|||
|
|
.stat-item.blue .value { color: #4c8ce8; }
|
|||
|
|
|
|||
|
|
/* 底部导航 */
|
|||
|
|
.bottom-nav {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 70px;
|
|||
|
|
background: linear-gradient(180deg, rgba(26,21,32,0.95) 0%, rgba(26,21,32,1) 100%);
|
|||
|
|
border-top: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-item .nav-icon {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 20px;
|
|||
|
|
background: rgba(58,48,64,0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-item .nav-text { font-size: 11px; color: #8a7d6d; }
|
|||
|
|
.nav-item.active .nav-icon {
|
|||
|
|
background: linear-gradient(135deg, #c9a84c 0%, #8a6d2b 100%);
|
|||
|
|
box-shadow: 0 0 12px rgba(201,168,76,0.5);
|
|||
|
|
}
|
|||
|
|
.nav-item.active .nav-text { color: #e8c86c; }
|
|||
|
|
|
|||
|
|
/* 能量条 */
|
|||
|
|
.energy-bar {
|
|||
|
|
height: 8px;
|
|||
|
|
background: #1a1520;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 8px 0;
|
|||
|
|
}
|
|||
|
|
.energy-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #4c8ce8 0%, #6caeff 100%);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.energy-label {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #8a7d6d;
|
|||
|
|
}
|
|||
|
|
.energy-label .current { color: #4c8ce8; }
|
|||
|
|
|
|||
|
|
/* 修炼区域 */
|
|||
|
|
.cultivation-area { padding: 16px; }
|
|||
|
|
|
|||
|
|
.realm-card {
|
|||
|
|
background: rgba(58,48,64,0.8);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.4);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.realm-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.realm-sub {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #c8b8a0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.realm-progress {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.realm-bar {
|
|||
|
|
height: 6px;
|
|||
|
|
background: #1a1520;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.realm-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #c9a84c 0%, #e8d08c 100%);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
.realm-stats {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #8a7d6d;
|
|||
|
|
}
|
|||
|
|
.realm-stats .val { color: #4ce84c; }
|
|||
|
|
|
|||
|
|
/* 功法卡片 */
|
|||
|
|
.skill-card {
|
|||
|
|
background: rgba(58,48,64,0.6);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 12px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.skill-icon {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.skill-icon.fire { background: linear-gradient(135deg, #e84c4c 0%, #8a2a2a 100%); }
|
|||
|
|
.skill-icon.ice { background: linear-gradient(135deg, #4c8ce8 0%, #2a4a8a 100%); }
|
|||
|
|
.skill-icon.earth { background: linear-gradient(135deg, #8a6d2b 0%, #5a4a1a 100%); }
|
|||
|
|
.skill-icon.nature { background: linear-gradient(135deg, #4ce84c 0%, #2a8a2a 100%); }
|
|||
|
|
.skill-icon.dark { background: linear-gradient(135deg, #b44ce8 0%, #6a2a8a 100%); }
|
|||
|
|
|
|||
|
|
.skill-info { flex: 1; }
|
|||
|
|
.skill-name { font-size: 14px; color: #f0e6d2; margin-bottom: 2px; }
|
|||
|
|
.skill-level { font-size: 11px; color: #8a7d6d; }
|
|||
|
|
.skill-type { font-size: 10px; color: #e8c86c; }
|
|||
|
|
|
|||
|
|
.skill-btn {
|
|||
|
|
padding: 6px 16px;
|
|||
|
|
background: rgba(201,168,76,0.2);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.5);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 操作按钮 */
|
|||
|
|
.action-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
background: linear-gradient(135deg, #3a3040 0%, #4a3d50 100%);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.4);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn .icon { font-size: 24px; margin-bottom: 6px; }
|
|||
|
|
.action-btn .text { font-size: 13px; color: #e8c86c; }
|
|||
|
|
.action-btn .desc { font-size: 10px; color: #8a7d6d; margin-top: 4px; }
|
|||
|
|
|
|||
|
|
.action-btn.active {
|
|||
|
|
border-color: #4ce84c;
|
|||
|
|
background: linear-gradient(135deg, #2a4a3a 0%, #3a5a4a 100%);
|
|||
|
|
}
|
|||
|
|
.action-btn.active .text { color: #4ce84c; }
|
|||
|
|
|
|||
|
|
/* 消息区域 */
|
|||
|
|
.news-section { padding: 0 16px 16px; }
|
|||
|
|
.news-header {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
.news-content {
|
|||
|
|
background: rgba(232,213,184,0.08);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.2);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 12px;
|
|||
|
|
max-height: 140px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
.news-content::-webkit-scrollbar { width: 3px; }
|
|||
|
|
.news-content::-webkit-scrollbar-thumb { background: #c9a84c; border-radius: 2px; }
|
|||
|
|
.news-item {
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
color: #c8b8a0;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
.news-item .hl { color: #e8c86c; }
|
|||
|
|
.news-item .red { color: #e84c4c; }
|
|||
|
|
.news-item .green { color: #4ce84c; }
|
|||
|
|
.news-item .blue { color: #4c8ce8; }
|
|||
|
|
.news-item .purple { color: #b44ce8; }
|
|||
|
|
|
|||
|
|
/* ===== 世界地图 ===== */
|
|||
|
|
.map-header {
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.map-tip { font-size: 13px; color: #c8b8a0; }
|
|||
|
|
.map-btn {
|
|||
|
|
padding: 6px 14px;
|
|||
|
|
background: rgba(58,48,64,0.8);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.5);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-layers {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 6px;
|
|||
|
|
padding: 0 16px 12px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
.map-layers::-webkit-scrollbar { display: none; }
|
|||
|
|
|
|||
|
|
.layer-tab {
|
|||
|
|
padding: 6px 14px;
|
|||
|
|
background: rgba(58,48,64,0.6);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #8a7d6d;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.layer-tab.active {
|
|||
|
|
background: rgba(201,168,76,0.2);
|
|||
|
|
border-color: #e8c86c;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
}
|
|||
|
|
.layer-tab.locked { opacity: 0.4; }
|
|||
|
|
|
|||
|
|
.map-area {
|
|||
|
|
position: relative;
|
|||
|
|
height: 480px;
|
|||
|
|
margin: 0 16px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: linear-gradient(180deg, #1a2a3a 0%, #0f1a2a 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-grid {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(rgba(201,168,76,0.05) 1px, transparent 1px),
|
|||
|
|
linear-gradient(90deg, rgba(201,168,76,0.05) 1px, transparent 1px);
|
|||
|
|
background-size: 40px 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-loc {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
}
|
|||
|
|
.map-loc:hover { transform: scale(1.1); }
|
|||
|
|
.map-loc .icon { font-size: 24px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
|
|||
|
|
.map-loc .name {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #f0e6d2;
|
|||
|
|
background: rgba(26,21,32,0.85);
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.map-loc.safe .name { color: #4ce84c; }
|
|||
|
|
.map-loc.danger .name { color: #e84c4c; }
|
|||
|
|
.map-loc.special .name { color: #e8c86c; }
|
|||
|
|
.map-loc.faction .name { color: #b44ce8; }
|
|||
|
|
|
|||
|
|
/* ===== 角色面板 ===== */
|
|||
|
|
.panel { padding: 16px; }
|
|||
|
|
|
|||
|
|
.char-header {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-avatar-lg {
|
|||
|
|
width: 90px;
|
|||
|
|
height: 90px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: linear-gradient(135deg, #c9a84c 0%, #8a6d2b 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 42px;
|
|||
|
|
border: 3px solid #e8d08c;
|
|||
|
|
box-shadow: 0 0 30px rgba(201,168,76,0.4);
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-info-lg { flex: 1; }
|
|||
|
|
.char-name-lg { font-size: 18px; color: #e8c86c; font-weight: 600; }
|
|||
|
|
.char-realm-lg { font-size: 13px; color: #4ce84c; margin: 4px 0; }
|
|||
|
|
.char-race-lg { font-size: 12px; color: #b44ce8; }
|
|||
|
|
.char-faction-lg { font-size: 11px; color: #8a7d6d; margin-top: 4px; }
|
|||
|
|
|
|||
|
|
.stat-block {
|
|||
|
|
background: rgba(58,48,64,0.8);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 14px;
|
|||
|
|
margin-bottom: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-block-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
border-bottom: 1px solid rgba(201,168,76,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
background: rgba(26,21,32,0.5);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.stat-row .name { color: #c8b8a0; }
|
|||
|
|
.stat-row .val { color: #f0e6d2; font-weight: 600; }
|
|||
|
|
.stat-row .val.green { color: #4ce84c; }
|
|||
|
|
.stat-row .val.blue { color: #4c8ce8; }
|
|||
|
|
.stat-row .val.purple { color: #b44ce8; }
|
|||
|
|
|
|||
|
|
/* 装备槽 */
|
|||
|
|
.equip-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.equip-slot {
|
|||
|
|
aspect-ratio: 1;
|
|||
|
|
background: rgba(26,21,32,0.8);
|
|||
|
|
border: 2px solid rgba(201,168,76,0.3);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.equip-slot .icon { font-size: 22px; margin-bottom: 2px; }
|
|||
|
|
.equip-slot .name { font-size: 9px; color: #8a7d6d; }
|
|||
|
|
.equip-slot.red { border-color: #e84c4c; }
|
|||
|
|
.equip-slot.orange { border-color: #e8a04c; }
|
|||
|
|
.equip-slot.purple { border-color: #b44ce8; }
|
|||
|
|
.equip-slot.blue { border-color: #4c8ce8; }
|
|||
|
|
|
|||
|
|
/* 物品格子 */
|
|||
|
|
.inv-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(6, 1fr);
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inv-slot {
|
|||
|
|
aspect-ratio: 1;
|
|||
|
|
background: rgba(26,21,32,0.8);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.2);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 18px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.inv-slot .count {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 1px;
|
|||
|
|
right: 3px;
|
|||
|
|
font-size: 8px;
|
|||
|
|
color: #f0e6d2;
|
|||
|
|
}
|
|||
|
|
.inv-slot.purple { border-color: #b44ce8; background: rgba(180,76,232,0.08); }
|
|||
|
|
.inv-slot.blue { border-color: #4c8ce8; background: rgba(76,140,232,0.08); }
|
|||
|
|
.inv-slot.green { border-color: #4ce84c; background: rgba(76,232,76,0.08); }
|
|||
|
|
.inv-slot.orange { border-color: #e8a04c; background: rgba(232,160,76,0.08); }
|
|||
|
|
|
|||
|
|
/* ===== 战斗界面 ===== */
|
|||
|
|
.combat-header { padding: 16px; text-align: center; }
|
|||
|
|
.combat-tip { font-size: 13px; color: #c8b8a0; margin-bottom: 4px; }
|
|||
|
|
.combat-target { font-size: 20px; color: #e84c4c; font-weight: 600; margin-bottom: 10px; }
|
|||
|
|
|
|||
|
|
.combat-hp-bar {
|
|||
|
|
height: 10px;
|
|||
|
|
background: #3a1a1a;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
.combat-hp-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #c83232 0%, #e84c4c 100%);
|
|||
|
|
border-radius: 5px;
|
|||
|
|
width: 85%;
|
|||
|
|
}
|
|||
|
|
.combat-hp-text { font-size: 12px; color: #e84c4c; }
|
|||
|
|
|
|||
|
|
.combat-arena {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20px 16px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.combat-char { text-align: center; }
|
|||
|
|
|
|||
|
|
.combat-avatar {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 70px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 36px;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
.combat-avatar.player {
|
|||
|
|
background: linear-gradient(135deg, #4ce84c 0%, #2a8a2a 100%);
|
|||
|
|
border: 3px solid #4ce84c;
|
|||
|
|
}
|
|||
|
|
.combat-avatar.enemy {
|
|||
|
|
background: linear-gradient(135deg, #e84c4c 0%, #8a2a2a 100%);
|
|||
|
|
border: 3px solid #e84c4c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.combat-name { font-size: 12px; margin-bottom: 4px; }
|
|||
|
|
.combat-name.player { color: #4ce84c; }
|
|||
|
|
.combat-name.enemy { color: #e84c4c; }
|
|||
|
|
|
|||
|
|
.combat-mini-hp {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 5px;
|
|||
|
|
background: #3a1a1a;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.combat-mini-hp-fill { height: 100%; background: #c83232; border-radius: 3px; }
|
|||
|
|
|
|||
|
|
.atb-bar {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: #1a1520;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
.atb-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #4ce84c 0%, #8cff8c 100%);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
transition: width 0.3s;
|
|||
|
|
}
|
|||
|
|
.atb-fill.enemy {
|
|||
|
|
background: linear-gradient(90deg, #e84c4c 0%, #ff8c8c 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.combat-vs { font-size: 20px; color: #e8c86c; }
|
|||
|
|
|
|||
|
|
.combat-skill-name {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #4c8ce8;
|
|||
|
|
text-shadow: 0 0 12px rgba(76,140,232,0.8);
|
|||
|
|
animation: pulse 1.2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% { opacity: 1; }
|
|||
|
|
50% { opacity: 0.5; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.combat-log {
|
|||
|
|
margin: 0 16px;
|
|||
|
|
background: rgba(232,213,184,0.08);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.2);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 12px;
|
|||
|
|
max-height: 220px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
.combat-log::-webkit-scrollbar { width: 3px; }
|
|||
|
|
.combat-log::-webkit-scrollbar-thumb { background: #c9a84c; border-radius: 2px; }
|
|||
|
|
|
|||
|
|
.log-time {
|
|||
|
|
color: #e8c86c;
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin: 10px 0 4px;
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
background: rgba(201,168,76,0.1);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.log-round { color: #e8c86c; font-weight: 600; margin: 8px 0 4px; }
|
|||
|
|
.log-event { color: #c8b8a0; }
|
|||
|
|
.log-dmg { color: #e84c4c; }
|
|||
|
|
.log-heal { color: #4ce84c; }
|
|||
|
|
.log-skill { color: #4c8ce8; }
|
|||
|
|
.log-buff { color: #b44ce8; }
|
|||
|
|
|
|||
|
|
.combat-footer { padding: 16px; text-align: center; }
|
|||
|
|
.end-btn {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 12px 40px;
|
|||
|
|
background: linear-gradient(135deg, #3a3040 0%, #4a3d50 100%);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.5);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
font-size: 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== 帮派界面 ===== */
|
|||
|
|
.faction-header { padding: 16px; text-align: center; }
|
|||
|
|
.faction-name { font-size: 22px; color: #e8c86c; font-weight: 600; margin-bottom: 6px; }
|
|||
|
|
.faction-type { font-size: 12px; color: #b44ce8; margin-bottom: 4px; }
|
|||
|
|
.faction-info { font-size: 12px; color: #c8b8a0; }
|
|||
|
|
|
|||
|
|
.faction-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 0 16px 12px;
|
|||
|
|
}
|
|||
|
|
.faction-tab {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 8px;
|
|||
|
|
background: rgba(58,48,64,0.6);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.3);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #8a7d6d;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.faction-tab.active {
|
|||
|
|
background: rgba(201,168,76,0.15);
|
|||
|
|
border-color: #e8c86c;
|
|||
|
|
color: #e8c86c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.building-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 10px;
|
|||
|
|
padding: 0 16px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.building-card {
|
|||
|
|
background: rgba(58,48,64,0.7);
|
|||
|
|
border: 1px solid rgba(201,168,76,0.25);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.building-card:hover { border-color: #e8c86c; }
|
|||
|
|
|
|||
|
|
.building-icon {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
background: rgba(26,21,32,0.8);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.building-info { flex: 1; }
|
|||
|
|
.building-name { font-size: 13px; color: #f0e6d2; }
|
|||
|
|
.building-desc { font-size: 10px; color: #8a7d6d; margin-top: 2px; }
|
|||
|
|
|
|||
|
|
/* 动画 */
|
|||
|
|
.screen { animation: fadeIn 0.3s ease; }
|
|||
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|||
|
|
@keyframes floatUp {
|
|||
|
|
0% { opacity: 1; transform: translateY(0); }
|
|||
|
|
100% { opacity: 0; transform: translateY(-40px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 400px) {
|
|||
|
|
.phone-frame { width: 100%; height: 100vh; border-radius: 0; border: none; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="phone-frame">
|
|||
|
|
<div class="status-bar">
|
|||
|
|
<span>9:41</span>
|
|||
|
|
<span>📶 🔋</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== 修炼主界面 ===== -->
|
|||
|
|
<div class="screen active" id="screen-cultivate">
|
|||
|
|
<div class="top-bar">
|
|||
|
|
<div class="resource-row">
|
|||
|
|
<div class="resource-item"><span class="icon">🪙</span><span class="value">12,580</span></div>
|
|||
|
|
<div class="resource-item"><span class="icon">💎</span><span class="value">342</span></div>
|
|||
|
|
<div class="resource-item"><span class="icon">🌀</span><span class="value">86</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="char-info">
|
|||
|
|
<div class="char-avatar">🧑</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="char-name">李长风</div>
|
|||
|
|
<div class="char-realm">炼气期 · 三层</div>
|
|||
|
|
<div class="char-race">人族 · 剑修</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="energy-bar"><div class="energy-fill" style="width:72%"></div></div>
|
|||
|
|
<div class="energy-label">
|
|||
|
|
<span>真元（能量）</span>
|
|||
|
|
<span class="current">720 / 1000</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stats-row">
|
|||
|
|
<div class="stat-item"><span class="label">内力：</span><span class="value">85,420</span></div>
|
|||
|
|
<div class="stat-item green"><span class="label">纯净度：</span><span class="value">94%</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="cultivation-area">
|
|||
|
|
<div class="realm-card">
|
|||
|
|
<div class="realm-title">当前境界：炼气期三层</div>
|
|||
|
|
<div class="realm-sub">距离筑基期还需 · 渡劫突破</div>
|
|||
|
|
<div class="realm-progress">
|
|||
|
|
<div class="realm-bar"><div class="realm-fill" style="width:35%"></div></div>
|
|||
|
|
<div class="realm-stats">
|
|||
|
|
<span>内力积累</span>
|
|||
|
|
<span class="val">85,420 / 250,000</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="action-grid">
|
|||
|
|
<div class="action-btn active">
|
|||
|
|
<div class="icon">🧘</div>
|
|||
|
|
<div class="text">修炼</div>
|
|||
|
|
<div class="desc">积累内力 · 挂机中</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-btn">
|
|||
|
|
<div class="icon">🗺️</div>
|
|||
|
|
<div class="text">游历</div>
|
|||
|
|
<div class="desc">探索洪荒 · 触发事件</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-btn">
|
|||
|
|
<div class="icon">⚔️</div>
|
|||
|
|
<div class="text">战斗</div>
|
|||
|
|
<div class="desc">ATB即时制 · 全自动</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-btn">
|
|||
|
|
<div class="icon">🏠</div>
|
|||
|
|
<div class="text">洞府</div>
|
|||
|
|
<div class="desc">个人基地 · 设施加成</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="skill-card">
|
|||
|
|
<div class="skill-icon fire">🔥</div>
|
|||
|
|
<div class="skill-info">
|
|||
|
|
<div class="skill-name">三昧真火诀</div>
|
|||
|
|
<div class="skill-level">Lv.12 · 主修功法</div>
|
|||
|
|
<div class="skill-type">火系 · 人族修真</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="skill-btn">修炼</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="skill-card">
|
|||
|
|
<div class="skill-icon ice">❄️</div>
|
|||
|
|
<div class="skill-info">
|
|||
|
|
<div class="skill-name">寒冰真气</div>
|
|||
|
|
<div class="skill-level">Lv.8 · 辅修功法</div>
|
|||
|
|
<div class="skill-type">冰系 · 人族修真</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="skill-btn">修炼</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="skill-card">
|
|||
|
|
<div class="skill-icon earth">🪨</div>
|
|||
|
|
<div class="skill-info">
|
|||
|
|
<div class="skill-name">厚土功</div>
|
|||
|
|
<div class="skill-level">Lv.5 · 辅修功法</div>
|
|||
|
|
<div class="skill-type">土系 · 人族修真</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="skill-btn">修炼</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="news-section">
|
|||
|
|
<div class="news-header">📜 洪荒见闻</div>
|
|||
|
|
<div class="news-content">
|
|||
|
|
<div class="news-item">天道广播：<span class="hl">妖族·白泽</span>突破至<span class="green">金丹期</span>，成为灵界首位结丹者！</div>
|
|||
|
|
<div class="news-item">洪荒事件：<span class="purple">深潜裔</span>在混沌之渊触发<span class="red">旧日低语</span>，SAN值急速下降...</div>
|
|||
|
|
<div class="news-item">天启消息：第一位筑基期玩家即将触发<span class="hl">天启</span>，洪荒边境即将对所有种族开放！</div>
|
|||
|
|
<div class="news-item">帮派动态：<span class="blue">天机阁</span>完成帮派领地竞标，获得灵界<span class="hl">翠灵矿脉</span>开采权。</div>
|
|||
|
|
<div class="news-item">拍卖行：<span class="red">龙族真血晶</span>以<span class="hl">50,000灵石</span>成交，创造灵界拍卖纪录。</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== 角色面板 ===== -->
|
|||
|
|
<div class="screen" id="screen-role">
|
|||
|
|
<div class="panel">
|
|||
|
|
<div class="char-header">
|
|||
|
|
<div class="char-avatar-lg">🧑</div>
|
|||
|
|
<div class="char-info-lg">
|
|||
|
|
<div class="char-name-lg">李长风</div>
|
|||
|
|
<div class="char-realm-lg">炼气期 · 三层</div>
|
|||
|
|
<div class="char-race-lg">人族 · 天道阵营</div>
|
|||
|
|
<div class="char-faction-lg">职业：剑修（修真路线）</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-block">
|
|||
|
|
<div class="stat-block-title">六维素质</div>
|
|||
|
|
<div class="stat-grid">
|
|||
|
|
<div class="stat-row"><span class="name">力</span><span class="val">128</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">体</span><span class="val">96</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">悟</span><span class="val green">156</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">速</span><span class="val">112</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">灵</span><span class="val blue">143</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">命</span><span class="val">89</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-block">
|
|||
|
|
<div class="stat-block-title">战斗属性</div>
|
|||
|
|
<div class="stat-grid">
|
|||
|
|
<div class="stat-row"><span class="name">攻击</span><span class="val">2,847</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">防御</span><span class="val">1,256</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">暴击率</span><span class="val green">32%</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">暴击伤害</span><span class="val green">165%</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">闪避</span><span class="val blue">18%</span></div>
|
|||
|
|
<div class="stat-row"><span class="name">命中</span><span class="val">87%</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-block">
|
|||
|
|
<div class="stat-block-title">装备</div>
|
|||
|
|
<div class="equip-grid">
|
|||
|
|
<div class="equip-slot red"><span class="icon">⚔️</span><span class="name">飞剑</span></div>
|
|||
|
|
<div class="equip-slot orange"><span class="icon">👑</span><span class="name">发冠</span></div>
|
|||
|
|
<div class="equip-slot purple"><span class="icon">👘</span><span class="name">道袍</span></div>
|
|||
|
|
<div class="equip-slot blue"><span class="icon">📿</span><span class="name">玉佩</span></div>
|
|||
|
|
<div class="equip-slot"><span class="icon">👢</span><span class="name">云履</span></div>
|
|||
|
|
<div class="equip-slot orange"><span class="icon">💍</span><span class="name">戒指</span></div>
|
|||
|
|
<div class="equip-slot purple"><span class="icon">📜</span><span class="name">法宝</span></div>
|
|||
|
|
<div class="equip-slot"><span class="icon">🐴</span><span class="name">坐骑</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-block">
|
|||
|
|
<div class="stat-block-title">背包 (28/50)</div>
|
|||
|
|
<div class="inv-grid">
|
|||
|
|
<div class="inv-slot purple">📜<span class="count">3</span></div>
|
|||
|
|
<div class="inv-slot blue">💎<span class="count">45</span></div>
|
|||
|
|
<div class="inv-slot green">🌿<span class="count">12</span></div>
|
|||
|
|
<div class="inv-slot orange">🔥<span class="count">2</span></div>
|
|||
|
|
<div class="inv-slot">🪙<span class="count">128</span></div>
|
|||
|
|
<div class="inv-slot purple">🔮<span class="count">1</span></div>
|
|||
|
|
<div class="inv-slot blue">💠<span class="count">8</span></div>
|
|||
|
|
<div class="inv-slot">📦<span class="count">5</span></div>
|
|||
|
|
<div class="inv-slot green">🍵<span class="count">20</span></div>
|
|||
|
|
<div class="inv-slot">📋<span class="count">3</span></div>
|
|||
|
|
<div class="inv-slot purple">📖<span class="count">1</span></div>
|
|||
|
|
<div class="inv-slot">🪨<span class="count">15</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== 帮派界面 ===== -->
|
|||
|
|
<div class="screen" id="screen-faction">
|
|||
|
|
<div class="faction-header">
|
|||
|
|
<div class="faction-name">天机阁</div>
|
|||
|
|
<div class="faction-type">自建门派 · 天道阵营</div>
|
|||
|
|
<div class="faction-info">门主：李长风 | 弟子：8/10 | 贡献：2,340</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="faction-tabs">
|
|||
|
|
<div class="faction-tab active">建筑</div>
|
|||
|
|
<div class="faction-tab">弟子</div>
|
|||
|
|
<div class="faction-tab">功法</div>
|
|||
|
|
<div class="faction-tab">采集</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="building-grid">
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">🏛️</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">议事大殿</div>
|
|||
|
|
<div class="building-desc">Lv.3 · 门派管理</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">📚</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">藏经阁</div>
|
|||
|
|
<div class="building-desc">Lv.2 · 功法存储</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">⚔️</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">演武场</div>
|
|||
|
|
<div class="building-desc">Lv.2 · 弟子修炼</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">🧪</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">炼丹房</div>
|
|||
|
|
<div class="building-desc">Lv.1 · 丹药制作</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">⚒️</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">炼器室</div>
|
|||
|
|
<div class="building-desc">Lv.1 · 装备打造</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">🌾</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">灵田</div>
|
|||
|
|
<div class="building-desc">Lv.2 · 资源采集</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">⛰️</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">矿脉</div>
|
|||
|
|
<div class="building-desc">Lv.1 · 矿石采集</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="building-card">
|
|||
|
|
<div class="building-icon">🏯</div>
|
|||
|
|
<div class="building-info">
|
|||
|
|
<div class="building-name">弟子居</div>
|
|||
|
|
<div class="building-desc">Lv.2 · 弟子容纳</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== 世界地图 ===== -->
|
|||
|
|
<div class="screen" id="screen-map">
|
|||
|
|
<div class="map-header">
|
|||
|
|
<span class="map-tip">点击地名进入历练</span>
|
|||
|
|
<div class="map-btn">📜 风云录</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="map-layers">
|
|||
|
|
<div class="layer-tab active">凡界 · 出生地</div>
|
|||
|
|
<div class="layer-tab">灵界 · 洪荒边境</div>
|
|||
|
|
<div class="layer-tab locked">道界 · 太古秘境 🔒</div>
|
|||
|
|
<div class="layer-tab locked">圣界 · 混沌之渊 🔒</div>
|
|||
|
|
<div class="layer-tab locked">神域 · 界域 🔒</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="map-area">
|
|||
|
|
<div class="map-grid"></div>
|
|||
|
|
|
|||
|
|
<!-- 人族出生地 -->
|
|||
|
|
<div class="map-loc safe" style="top:30%;left:25%">
|
|||
|
|
<span class="icon">🏔️</span>
|
|||
|
|
<span class="name">昆仑墟</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc" style="top:45%;left:40%">
|
|||
|
|
<span class="icon">🏯</span>
|
|||
|
|
<span class="name">长安城</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc" style="top:55%;left:20%">
|
|||
|
|
<span class="icon">🌿</span>
|
|||
|
|
<span class="name">蜀山灵脉</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc special" style="top:35%;left:60%">
|
|||
|
|
<span class="icon">📜</span>
|
|||
|
|
<span class="name">藏经洞</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc" style="top:65%;left:50%">
|
|||
|
|
<span class="icon">⚔️</span>
|
|||
|
|
<span class="name">试炼场</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc danger" style="top:75%;left:35%">
|
|||
|
|
<span class="icon">👻</span>
|
|||
|
|
<span class="name">邪祟巢穴</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc" style="top:20%;left:70%">
|
|||
|
|
<span class="icon">🌳</span>
|
|||
|
|
<span class="name">灵药园</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc faction" style="top:80%;left:65%">
|
|||
|
|
<span class="icon">⛩️</span>
|
|||
|
|
<span class="name">门派驻地</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc safe" style="top:50%;left:75%">
|
|||
|
|
<span class="icon">🏠</span>
|
|||
|
|
<span class="name">洞府</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="map-loc special" style="top:15%;left:45%">
|
|||
|
|
<span class="icon">🌀</span>
|
|||
|
|
<span class="name">灵气漩涡</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- ===== 战斗界面 ===== -->
|
|||
|
|
<div class="screen" id="screen-combat">
|
|||
|
|
<div class="combat-header">
|
|||
|
|
<div class="combat-tip">游历遭遇</div>
|
|||
|
|
<div class="combat-target">三尾妖狐</div>
|
|||
|
|
<div class="combat-hp-bar"><div class="combat-hp-fill"></div></div>
|
|||
|
|
<div class="combat-hp-text">HP: 12,840 / 15,000</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="combat-arena">
|
|||
|
|
<div class="combat-char">
|
|||
|
|
<div class="combat-avatar player">🧑</div>
|
|||
|
|
<div class="combat-name player">李长风</div>
|
|||
|
|
<div class="combat-mini-hp"><div class="combat-mini-hp-fill" style="width:68%"></div></div>
|
|||
|
|
<div class="atb-bar"><div class="atb-fill" style="width:90%"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="combat-vs">⚔️</div>
|
|||
|
|
<div class="combat-char">
|
|||
|
|
<div class="combat-avatar enemy">🦊</div>
|
|||
|
|
<div class="combat-name enemy">三尾妖狐</div>
|
|||
|
|
<div class="combat-mini-hp"><div class="combat-mini-hp-fill" style="width:85%"></div></div>
|
|||
|
|
<div class="atb-bar"><div class="atb-fill enemy" style="width:45%"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="combat-skill-name">三昧真火诀</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="combat-log">
|
|||
|
|
<div class="log-time">ATB 00:01</div>
|
|||
|
|
<div class="log-event">你催动<span class="log-skill">三昧真火诀</span>，三道真火自指尖射出，命中<span class="log-dmg">三尾妖狐</span>，造成<span class="log-dmg">2,847</span>点伤害！</div>
|
|||
|
|
<div class="log-event"><span class="log-buff">寒冰真气</span>被动触发，<span class="log-dmg">三尾妖狐</span>速度降低15%。</div>
|
|||
|
|
|
|||
|
|
<div class="log-time">ATB 00:02</div>
|
|||
|
|
<div class="log-event"><span class="log-dmg">三尾妖狐</span>发动<span class="log-skill">妖爪</span>，你身形一晃闪过攻击。</div>
|
|||
|
|
|
|||
|
|
<div class="log-time">ATB 00:03</div>
|
|||
|
|
<div class="log-event">你使出<span class="log-skill">御剑术</span>，飞剑化作流光刺向<span class="log-dmg">三尾妖狐</span>，造成<span class="log-dmg">3,124</span>点伤害！<span class="log-dmg">暴击！</span></div>
|
|||
|
|
|
|||
|
|
<div class="log-time">ATB 00:04</div>
|
|||
|
|
<div class="log-event"><span class="log-dmg">三尾妖狐</span>施展<span class="log-skill">幻影分身</span>，场上出现三个分身。</div>
|
|||
|
|
<div class="log-event">你的<span class="log-buff">厚土功</span>护体触发，减免了<span class="log-heal">230</span>点伤害。</div>
|
|||
|
|
|
|||
|
|
<div class="log-time">ATB 00:05</div>
|
|||
|
|
<div class="log-event">你催动<span class="log-skill">三昧真火诀</span>，真火克制妖气，对<span class="log-dmg">三尾妖狐</span>造成<span class="log-dmg">4,271</span>点伤害！（火克木 +30%）</div>
|
|||
|
|
<div class="log-event"><span class="log-dmg">三尾妖狐</span>身上的灼烧效果持续，损失<span class="log-dmg">380</span>点气血。</div>
|
|||
|
|
|
|||
|
|
<div class="log-time">ATB 00:07</div>
|
|||
|
|
<div class="log-event"><span class="log-dmg">三尾妖狐</span>发动<span class="log-skill">妖狐魅惑</span>，你的<span class="log-buff">浩然正气</span>抵御了精神侵袭。</div>
|
|||
|
|
<div class="log-event">你使出<span class="log-skill">御剑术</span>，飞剑贯穿分身，真身暴露，造成<span class="log-dmg">3,580</span>点伤害！</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="combat-footer">
|
|||
|
|
<div class="end-btn">结束战斗</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部导航 -->
|
|||
|
|
<div class="bottom-nav">
|
|||
|
|
<div class="nav-item active" data-screen="cultivate">
|
|||
|
|
<div class="nav-icon">🧘</div>
|
|||
|
|
<div class="nav-text">修炼</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav-item" data-screen="role">
|
|||
|
|
<div class="nav-icon">👤</div>
|
|||
|
|
<div class="nav-text">角色</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav-item" data-screen="faction">
|
|||
|
|
<div class="nav-icon">🏯</div>
|
|||
|
|
<div class="nav-text">门派</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav-item" data-screen="map">
|
|||
|
|
<div class="nav-icon">🗺️</div>
|
|||
|
|
<div class="nav-text">洪荒</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav-item" data-screen="combat">
|
|||
|
|
<div class="nav-icon">⚔️</div>
|
|||
|
|
<div class="nav-text">战斗</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|||
|
|
const screens = document.querySelectorAll('.screen');
|
|||
|
|
|
|||
|
|
navItems.forEach(item => {
|
|||
|
|
item.addEventListener('click', () => {
|
|||
|
|
navItems.forEach(n => n.classList.remove('active'));
|
|||
|
|
item.classList.add('active');
|
|||
|
|
screens.forEach(s => s.classList.remove('active'));
|
|||
|
|
document.getElementById('screen-' + item.dataset.screen).classList.add('active');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 模拟伤害数字
|
|||
|
|
function showDamage() {
|
|||
|
|
const arena = document.querySelector('.combat-arena');
|
|||
|
|
if (!arena || !document.getElementById('screen-combat').classList.contains('active')) return;
|
|||
|
|
const d = document.createElement('div');
|
|||
|
|
d.textContent = `-${Math.floor(Math.random() * 3000 + 1500)}`;
|
|||
|
|
d.style.cssText = `position:absolute;right:25%;top:15%;color:#e84c4c;font-size:18px;font-weight:bold;animation:floatUp 1s forwards;pointer-events:none;`;
|
|||
|
|
arena.appendChild(d);
|
|||
|
|
setTimeout(() => d.remove(), 1000);
|
|||
|
|
}
|
|||
|
|
setInterval(showDamage, 2500);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
