feat: 网站布局统一化+公告卡片重做+地形素材归类+加载动画升级+底部栏拆分
- 网站 7 个页签统一内边距/宽度/滚动方式，去掉重复页头 - 公告卡片改为图文大卡（支持后台 image/title/pinned 字段） - assets/terrain/ 拆 6 个子目录并同步 manifest + TERRAIN_ASSETS - 删除 assets/art/（transition 图片已清空） - 加载界面增加随机过渡背景图 + 深色压暗层 - 底部栏建造按钮拆为地形/移动/高度/管理 4 个独立按钮 - 侧面板改为从底部向上展开（WorldBox 风格） - 删除视频背景文件（已回滚为静态 JPG） - 新增 wc1.js（六边形地图渲染）、wc2.js（导航控件）
This commit is contained in:
李鹏宇
+163
-75
@@ -57,8 +57,16 @@
|
||||
.cta:hover{filter:brightness(1.08);}
|
||||
|
||||
.content{flex:1;position:relative;overflow:hidden;}
|
||||
.panel{position:absolute;inset:0;display:none;flex-direction:column;padding:30px 44px;overflow:hidden;}
|
||||
.panel{position:absolute;inset:0;display:none;flex-direction:column;padding:28px 48px;overflow:hidden;}
|
||||
.panel.active{display:flex;}
|
||||
.panel-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:8px;}
|
||||
/* 隐藏内部滚动条但保留滚轮/触控滑动（规则/世界数据/公告/论坛/图鉴/剧情等） */
|
||||
.rules-scroll,#worldDataContent,#announce .notes,.threads,.codex-grid,.story-reader,.panel-scroll,.toc-list{
|
||||
scrollbar-width:none; -ms-overflow-style:none;
|
||||
}
|
||||
.rules-scroll::-webkit-scrollbar,#worldDataContent::-webkit-scrollbar,#announce .notes::-webkit-scrollbar,
|
||||
.threads::-webkit-scrollbar,.codex-grid::-webkit-scrollbar,.story-reader::-webkit-scrollbar,
|
||||
.panel-scroll::-webkit-scrollbar,.toc-list::-webkit-scrollbar{display:none;width:0;height:0;}
|
||||
|
||||
/* ===== 介绍（视频主页） ===== */
|
||||
#intro{padding:0;}
|
||||
@@ -77,8 +85,6 @@
|
||||
|
||||
/* ===== 特色 ===== */
|
||||
#features{align-items:center;justify-content:center;gap:22px;}
|
||||
.sec-title{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:32px;letter-spacing:4px;color:#fff;text-shadow:0 0 18px rgba(139,92,246,.5);}
|
||||
.sec-title small{display:block;font-family:"Press Start 2P",monospace;font-size:9px;color:var(--magenta);letter-spacing:1px;margin-top:7px;}
|
||||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:min(1060px,100%);}
|
||||
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:18px 20px;transition:.26s;min-height:132px;}
|
||||
.card:hover{transform:translateY(-4px);border-color:var(--violet);box-shadow:var(--glow);background:rgba(139,92,246,.12);}
|
||||
@@ -87,8 +93,8 @@
|
||||
.card p{font-size:13px;color:var(--text-dim);line-height:1.6;}
|
||||
|
||||
/* ===== 背景 ===== */
|
||||
#background{flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;padding:48px 6% 90px;}
|
||||
.bg-page{max-width:1060px;width:100%;margin:0 auto;padding:30px 0;border-top:1px solid var(--card-bd);}
|
||||
#background{flex-direction:column;align-items:stretch;gap:0;overflow:hidden;padding:28px 48px;}
|
||||
.bg-page{max-width:1080px;width:100%;margin:0 auto;padding:24px 0;border-top:1px solid var(--card-bd);}
|
||||
.bg-page:first-child{border-top:none;padding-top:0;}
|
||||
.bg-page-head{text-align:center;margin-bottom:28px;}
|
||||
.bg-page-title{font-family:"Noto Serif SC",serif;font-weight:800;font-size:40px;letter-spacing:3px;line-height:1.2;margin:0 0 10px;
|
||||
@@ -120,7 +126,7 @@
|
||||
.bg-text p{font-size:14.5px;color:var(--text-dim);line-height:1.95;max-width:640px;}
|
||||
|
||||
/* ===== 规则 ===== */
|
||||
#rules{flex-direction:column;gap:14px;}
|
||||
#rules{flex-direction:column;gap:0;}
|
||||
.rules-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:22px;padding-right:8px;}
|
||||
.rule-block h3{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:22px;color:#fff;letter-spacing:2px;margin-bottom:6px;}
|
||||
.rule-intro{font-size:13.5px;color:var(--text-dim);margin-bottom:12px;line-height:1.7;max-width:780px;}
|
||||
@@ -132,8 +138,8 @@
|
||||
.tier-row .tdesc{font-size:13px;color:var(--text-dim);line-height:1.5;}
|
||||
|
||||
/* ===== 图鉴 ===== */
|
||||
#codex{padding:22px 44px;gap:0;}
|
||||
.codex-wrap{display:flex;flex-direction:column;gap:13px;height:100%;min-height:0;}
|
||||
#codex{padding:28px 48px;gap:0;}
|
||||
.codex-wrap{display:flex;flex-direction:column;gap:13px;flex:1;min-height:0;}
|
||||
.codex-cats{display:flex;gap:6px;flex-wrap:wrap;}
|
||||
.codex-cats button{font-family:"Noto Sans SC",sans-serif;font-size:14px;color:var(--text-dim);background:var(--card);border:1px solid var(--card-bd);padding:8px 15px;border-radius:11px;cursor:pointer;transition:.2s;}
|
||||
.codex-cats button:hover{color:#fff;}
|
||||
@@ -146,7 +152,7 @@
|
||||
.codex-search{background:rgba(8,12,26,.6);border:1px solid var(--card-bd);border-radius:18px;color:var(--text);padding:7px 14px;font-size:13px;outline:none;width:200px;flex:0 0 auto;}
|
||||
.codex-search:focus{border-color:var(--violet);}
|
||||
.codex-count{font-size:12px;color:var(--text-dim);white-space:nowrap;flex:0 0 auto;}
|
||||
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px;overflow-y:auto;padding:4px 6px 4px 0;align-content:start;flex:1;min-height:0;}
|
||||
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;overflow-y:auto;padding:4px 6px 4px 0;align-content:start;flex:1;min-height:0;}
|
||||
.cx{background:var(--card);border:1px solid var(--card-bd);border-radius:13px;overflow:hidden;transition:.24s;display:flex;flex-direction:column;cursor:default;}
|
||||
.cx:hover{transform:translateY(-3px);border-color:var(--violet);box-shadow:var(--glow);}
|
||||
.cx .thumb{width:100%;aspect-ratio:1/1;display:block;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(76,201,240,.10));}
|
||||
@@ -159,38 +165,49 @@
|
||||
.cx .ds{font-size:11.5px;color:var(--text-dim);line-height:1.5;margin-top:6px;}
|
||||
|
||||
/* ===== 论坛 ===== */
|
||||
#forum{flex-direction:row;gap:22px;}
|
||||
.f-cats{flex:0 0 180px;display:flex;flex-direction:column;gap:8px;}
|
||||
.f-cats .ch{font-size:14px;color:var(--text-dim);background:var(--card);border:1px solid var(--card-bd);padding:11px 14px;border-radius:10px;cursor:pointer;transition:.2s;}
|
||||
.f-cats .ch:hover{color:#fff;}
|
||||
.f-cats .ch.active{color:#fff;background:rgba(139,92,246,.22);border-color:var(--magenta);}
|
||||
#forum{flex-direction:row;gap:28px;}
|
||||
.f-cats{flex:0 0 200px;display:flex;flex-direction:column;gap:12px;}
|
||||
.f-cats .ch{font-size:15.5px;color:var(--text-dim);background:var(--card);border:1px solid var(--card-bd);padding:13px 18px;border-radius:12px;cursor:pointer;transition:.22s;letter-spacing:.5px;}
|
||||
.f-cats .ch:hover{color:#fff;background:rgba(139,92,246,.12);}
|
||||
.f-cats .ch.active{color:#fff;background:linear-gradient(120deg,rgba(139,92,246,.28),rgba(199,125,255,.16));border-color:var(--magenta);box-shadow:var(--glow);}
|
||||
.f-main{flex:1;display:flex;flex-direction:column;min-width:0;}
|
||||
.f-head{display:flex;align-items:center;margin-bottom:12px;gap:12px;}
|
||||
.f-head h2{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:24px;letter-spacing:2px;color:#fff;}
|
||||
.f-head .new{margin-left:auto;font-size:13px;color:#0b1020;background:linear-gradient(120deg,var(--gold),#f0d49a);padding:8px 15px;border-radius:9px;font-weight:700;cursor:pointer;}
|
||||
.f-head .new:hover{filter:brightness(1.08);}
|
||||
.threads{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:6px;}
|
||||
.th{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--card-bd);border-radius:11px;padding:13px 16px;transition:.2s;cursor:pointer;}
|
||||
.th:hover{border-color:var(--violet);background:rgba(139,92,246,.10);}
|
||||
.th .pin{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--gold);background:rgba(231,184,92,.14);border:1px solid rgba(231,184,92,.42);border-radius:5px;padding:1px 7px;}
|
||||
.th .tt{flex:1;font-size:15px;color:#fff;}
|
||||
.th .meta{font-size:12px;color:var(--text-dim);white-space:nowrap;}
|
||||
.th .rp{color:var(--cyan);font-weight:500;}
|
||||
.post-form{display:none;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--magenta);border-radius:12px;padding:14px;margin-bottom:12px;}
|
||||
.threads{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;padding-right:8px;align-content:start;}
|
||||
.th{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:16px 20px;transition:.22s;cursor:pointer;}
|
||||
.th:hover{border-color:var(--violet);background:rgba(139,92,246,.12);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
|
||||
.th .pin{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--gold);background:rgba(231,184,92,.16);border:1px solid rgba(231,184,92,.45);border-radius:6px;padding:2px 8px;}
|
||||
.th .tt{flex:1;font-size:16.5px;color:#fff;letter-spacing:.3px;}
|
||||
.th .meta{font-size:13px;color:var(--text-dim);white-space:nowrap;}
|
||||
.th .rp{color:var(--cyan);font-weight:600;}
|
||||
.post-form{display:none;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--magenta);border-radius:14px;padding:16px;margin-bottom:14px;}
|
||||
.post-form.show{display:flex;}
|
||||
.post-form input,.post-form textarea{background:rgba(8,12,26,.6);border:1px solid var(--card-bd);border-radius:8px;color:var(--text);padding:9px 12px;font-family:inherit;font-size:13px;outline:none;}
|
||||
.post-form textarea{resize:vertical;min-height:64px;}
|
||||
.post-form .row{display:flex;gap:8px;justify-content:flex-end;}
|
||||
.post-form .row button{font-size:13px;padding:7px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--card-bd);background:var(--card);color:var(--text);}
|
||||
.post-form input,.post-form textarea{background:rgba(8,12,26,.6);border:1px solid var(--card-bd);border-radius:10px;color:var(--text);padding:10px 14px;font-family:inherit;font-size:14px;outline:none;}
|
||||
.post-form textarea{resize:vertical;min-height:72px;}
|
||||
.post-form .row{display:flex;gap:10px;justify-content:flex-end;}
|
||||
.post-form .row button{font-size:14px;padding:8px 18px;border-radius:10px;cursor:pointer;border:1px solid var(--card-bd);background:var(--card);color:var(--text);}
|
||||
.post-form .row .ok{background:linear-gradient(120deg,var(--gold),#f0d49a);color:#0b1020;font-weight:700;border:none;}
|
||||
|
||||
/* ===== 公告 ===== */
|
||||
#announce{gap:18px;}
|
||||
#announce .notes{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding-right:6px;}
|
||||
.note{border-left:3px solid var(--magenta);padding:12px 16px;background:var(--card);border:1px solid var(--card-bd);border-left:3px solid var(--magenta);border-radius:0 12px 12px 0;}
|
||||
.note .date{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--cyan);margin-bottom:8px;}
|
||||
.note .body{font-size:14px;color:var(--text);line-height:1.7;}
|
||||
.note.pin{box-shadow:var(--glow);}
|
||||
#announce{gap:0;align-items:stretch;}
|
||||
#announce .notes{flex:1;min-height:0;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px;overflow-y:auto;padding-right:8px;align-content:start;}
|
||||
#announce .notes{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px;}
|
||||
.note{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(76,201,240,.04));border:1px solid var(--card-bd);border-left:4px solid var(--magenta);border-radius:16px;transition:.24s;}
|
||||
.note:hover{transform:translateY(-3px);border-color:var(--violet);background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(76,201,240,.07));box-shadow:var(--glow);}
|
||||
.note.pin{border-left-color:var(--gold);background:linear-gradient(135deg,rgba(231,184,92,.12),rgba(139,92,246,.06));}
|
||||
.note.pin:hover{background:linear-gradient(135deg,rgba(231,184,92,.18),rgba(139,92,246,.08));}
|
||||
.note.feat{grid-column:1 / -1;flex-direction:row;align-items:stretch;}
|
||||
.note.feat .note-cover{flex:0 0 44%;width:44%;min-height:260px;}
|
||||
.note.feat .note-body{flex:1;justify-content:center;}
|
||||
.note.feat .note-title{font-size:27px;}
|
||||
.note.feat .body{font-size:16px;}
|
||||
.note-cover{height:168px;flex:0 0 auto;background-size:cover;background-position:center;background-repeat:no-repeat;border-bottom:1px solid var(--card-bd);position:relative;}
|
||||
.note-cover.empty{background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(76,201,240,.10));}
|
||||
.note-cover.empty::after{content:'封面图 · 后台配置';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.5);}
|
||||
.note-body{padding:18px 22px;display:flex;flex-direction:column;min-width:0;}
|
||||
.note .date{font-size:13px;font-weight:600;color:var(--cyan);letter-spacing:1px;margin-bottom:8px;}
|
||||
.note-title{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:21px;color:#fff;letter-spacing:1px;margin-bottom:10px;line-height:1.32;text-shadow:0 0 14px rgba(139,92,246,.4);}
|
||||
.note .body{font-size:15px;color:var(--text);line-height:1.9;}
|
||||
.note .body p{margin:0 0 11px;}
|
||||
.note .body p:last-child{margin-bottom:0;}
|
||||
|
||||
/* ===== 致玩家 ===== */
|
||||
#letter{align-items:center;justify-content:center;}
|
||||
@@ -204,19 +221,18 @@
|
||||
#letter .letter-wrap .lt-sign{text-align:right;margin-top:28px;font-size:14px;color:var(--magenta);font-style:italic;}
|
||||
|
||||
/* ===== 论坛（竖排：顶部分类条 + 下方纵向帖子流） ===== */
|
||||
#forum{flex-direction:column;gap:16px;}
|
||||
.f-cats{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:8px;}
|
||||
#forum{flex-direction:column;gap:20px;}
|
||||
.f-cats{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:10px;}
|
||||
.f-cats .ch{flex:0 0 auto;}
|
||||
.f-main{flex:1;min-height:0;}
|
||||
.threads{max-width:900px;width:100%;}
|
||||
.threads{width:100%;}
|
||||
|
||||
/* ===== 公告（居左竖排） ===== */
|
||||
#announce{align-items:stretch;}
|
||||
#announce .notes{max-width:1080px;width:100%;margin:0;}
|
||||
/* ===== 公告（内容居中） ===== */
|
||||
#announce .notes{margin:0;}
|
||||
|
||||
/* ===== 剧情（小说阅读器：左目录 + 右正文，竖排阅读感） ===== */
|
||||
#story{padding:30px 44px;}
|
||||
.story-wrap{display:flex;flex-direction:row;width:100%;height:100%;min-height:0;}
|
||||
#story{padding:28px 48px;}
|
||||
.story-wrap{display:flex;flex-direction:row;width:100%;flex:1;min-height:0;}
|
||||
.story-toc{flex:0 0 286px;display:flex;flex-direction:column;border-right:1px solid var(--card-bd);background:rgba(8,12,26,.35);min-height:0;}
|
||||
.toc-head{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:24px;letter-spacing:3px;color:#fff;padding:24px 0 12px;text-shadow:0 0 16px rgba(139,92,246,.5);}
|
||||
.toc-head small{display:block;font-family:"Press Start 2P",monospace;font-size:8px;color:var(--magenta);letter-spacing:1px;margin-top:6px;}
|
||||
@@ -230,28 +246,28 @@
|
||||
.toc-ch.active{color:#fff;background:rgba(139,92,246,.20);border-left-color:var(--magenta);}
|
||||
.story-reader{flex:1;overflow-y:auto;min-width:0;background:linear-gradient(180deg, rgba(139,92,246,.04), transparent 240px);}
|
||||
.reader-loading{padding:80px 20px;text-align:center;color:var(--text-dim);font-size:15px;}
|
||||
.reader-inner{max-width:760px;margin:0 auto;padding:44px 48px 90px;}
|
||||
.reader-inner{max-width:840px;margin:0 auto;padding:48px 52px 100px;}
|
||||
.reader-inner .r-vol{font-size:12px;color:var(--cyan);letter-spacing:2px;margin-bottom:10px;}
|
||||
.reader-inner h1{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:30px;letter-spacing:2px;color:#fff;text-shadow:0 0 16px rgba(139,92,246,.5);margin-bottom:18px;line-height:1.3;}
|
||||
.reader-inner .body{font-size:15.5px;color:var(--text);line-height:2.15;}
|
||||
.reader-inner .body p{margin-bottom:18px;text-indent:2em;}
|
||||
.reader-inner h1{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:32px;letter-spacing:2px;color:#fff;text-shadow:0 0 16px rgba(139,92,246,.5);margin-bottom:18px;line-height:1.3;}
|
||||
.reader-inner .body{font-size:17.5px;color:#eef2fb;line-height:2.0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
|
||||
.reader-inner .body p{margin-bottom:20px;text-indent:2em;}
|
||||
.reader-inner .body p:first-child{text-indent:0;}
|
||||
.reader-inner .body h2,.reader-inner .body h3{color:#fff;margin:22px 0 10px;font-size:18px;}
|
||||
|
||||
/* ===== 世界数据报表 ===== */
|
||||
#worlddata{overflow-y:auto;padding:46px 6% 90px;}
|
||||
#worldDataContent{max-width:1080px;width:100%;margin:0 auto;}
|
||||
#worlddata{overflow:hidden;padding:28px 48px;}
|
||||
#worldDataContent{flex:1;min-height:0;overflow-y:auto;width:100%;padding-right:8px;}
|
||||
.wd-tag{display:inline-block;font-size:12px;letter-spacing:2px;color:var(--gold);background:rgba(231,184,92,.12);border:1px solid rgba(231,184,92,.38);border-radius:6px;padding:3px 11px;margin-bottom:22px;}
|
||||
.wd-h{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:22px;letter-spacing:3px;color:#fff;margin:38px 0 18px;text-shadow:0 0 14px rgba(139,92,246,.45);display:flex;align-items:center;gap:10px;}
|
||||
.wd-h::before{content:"";width:4px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--violet),var(--cyan));box-shadow:0 0 10px rgba(139,92,246,.6);}
|
||||
.wd-h small{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--magenta);letter-spacing:1px;}
|
||||
|
||||
.wd-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;}
|
||||
.wd-kpi-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(76,201,240,.05));border:1px solid var(--card-bd);border-radius:16px;padding:18px 20px;transition:.26s;}
|
||||
.wd-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
|
||||
.wd-kpi-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(76,201,240,.05));border:1px solid var(--card-bd);border-radius:16px;padding:22px 26px;transition:.26s;}
|
||||
.wd-kpi-card:hover{transform:translateY(-4px);border-color:var(--violet);box-shadow:var(--glow);}
|
||||
.wd-kpi-card::after{content:"";position:absolute;right:-26px;top:-26px;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(199,125,255,.22),transparent 70%);}
|
||||
.wd-kpi-ic{font-size:22px;filter:drop-shadow(0 0 7px rgba(139,92,246,.55));}
|
||||
.wd-kpi-num{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:34px;line-height:1.1;color:#fff;margin:8px 0 2px;}
|
||||
.wd-kpi-num{font-family:"ZCOOL QingKe HuangYou",sans-serif;font-size:40px;line-height:1.1;color:#fff;margin:10px 0 4px;}
|
||||
.wd-kpi-num .u{font-size:14px;color:var(--text-dim);margin-left:4px;letter-spacing:1px;}
|
||||
.wd-kpi-label{font-size:13px;color:var(--text-dim);letter-spacing:1px;}
|
||||
.wd-kpi-delta{position:absolute;right:14px;top:16px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:5px;}
|
||||
@@ -320,7 +336,6 @@
|
||||
.hero .enter-wrap{bottom:28px;}
|
||||
.hero .enter-btn{font-size:15px;padding:11px 30px;}
|
||||
.panel{padding:18px 18px;}
|
||||
.sec-title{font-size:26px;letter-spacing:2px;}
|
||||
.bg-page-title{font-size:30px;}
|
||||
.bg-page-body{font-size:15.5px;line-height:1.9;}
|
||||
.grid{grid-template-columns:repeat(2,1fr);gap:12px;}
|
||||
@@ -333,6 +348,9 @@
|
||||
.story-toc{flex-basis:auto;}
|
||||
#story{padding:18px 18px;}
|
||||
.tier-row{grid-template-columns:72px 92px 1fr;gap:8px;}
|
||||
.note.feat{flex-direction:column;}
|
||||
.note.feat .note-cover{flex:0 0 auto;width:100%;min-height:180px;}
|
||||
#announce .notes{grid-template-columns:1fr;}
|
||||
}
|
||||
@media (max-width:480px){
|
||||
.topbar{padding:8px 10px;gap:8px;}
|
||||
@@ -390,11 +408,12 @@
|
||||
</section>
|
||||
|
||||
<!-- ===== 背景（特色 + 世界背景 + 致玩家 合并平铺） ===== -->
|
||||
<section class="panel" id="background"></section>
|
||||
<section class="panel" id="background">
|
||||
<div class="panel-scroll" id="bgBody"></div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 规则 ===== -->
|
||||
<section class="panel" id="rules">
|
||||
<div class="sec-title">等级制度<small>TIERS & RANK SYSTEM</small></div>
|
||||
<div class="rules-scroll">
|
||||
<!-- ① 世界等级 · 五阶段 -->
|
||||
<div class="rule-block">
|
||||
@@ -479,15 +498,12 @@
|
||||
<div class="f-cats">
|
||||
<div class="ch active" data-fcat="all">全部</div>
|
||||
<div class="ch" data-fcat="discuss">综合讨论</div>
|
||||
<div class="ch" data-fcat="guide">玩法攻略</div>
|
||||
<div class="ch" data-fcat="fan">同人创作</div>
|
||||
<div class="ch" data-fcat="bug">BUG 反馈</div>
|
||||
<div class="ch" data-fcat="strategy">攻略</div>
|
||||
<div class="ch" data-fcat="lore">背景考据</div>
|
||||
<div class="ch" data-fcat="showcase">作品秀</div>
|
||||
<div class="ch" data-fcat="bug">反馈</div>
|
||||
</div>
|
||||
<div class="f-main">
|
||||
<div class="f-head">
|
||||
<h2>社区论坛</h2>
|
||||
<div class="new" id="newPost">发新帖</div>
|
||||
</div>
|
||||
<div class="post-form" id="postForm">
|
||||
<input id="pfTitle" placeholder="标题" />
|
||||
<textarea id="pfBody" placeholder="说点什么…（演示：仅本次会话内可见）"></textarea>
|
||||
@@ -495,24 +511,96 @@
|
||||
</div>
|
||||
<div class="threads" id="threads">
|
||||
<div class="th" data-fcat="discuss"><span class="pin">置顶</span><span class="tt">【公告】宇森官网第一阶段上线，欢迎园丁们入驻</span><span class="meta"><span class="rp">128</span> 回复 · 官方</span></div>
|
||||
<div class="th" data-fcat="guide"><span class="tt">新手向：园丁视角的三种开局思路</span><span class="meta"><span class="rp">42</span> 回复 · 行者</span></div>
|
||||
<div class="th" data-fcat="strategy"><span class="tt">新手向：园丁视角的三种开局思路</span><span class="meta"><span class="rp">42</span> 回复 · 行者</span></div>
|
||||
<div class="th" data-fcat="discuss"><span class="tt">你们更喜欢哪种族？来投个票</span><span class="meta"><span class="rp">76</span> 回复 · 雾岛</span></div>
|
||||
<div class="th" data-fcat="fan"><span class="tt">手绘了我的主世界浮空岛，求轻喷</span><span class="meta"><span class="rp">31</span> 回复 · 青柠</span></div>
|
||||
<div class="th" data-fcat="showcase"><span class="tt">手绘了我的主世界浮空岛，求轻喷</span><span class="meta"><span class="rp">31</span> 回复 · 青柠</span></div>
|
||||
<div class="th" data-fcat="bug"><span class="tt">反馈：飞入微观时偶现卡顿</span><span class="meta"><span class="rp">9</span> 回复 · K</span></div>
|
||||
<div class="th" data-fcat="guide"><span class="tt">地下矿脉怎么规划最省心？</span><span class="meta"><span class="rp">18</span> 回复 · 老周</span></div>
|
||||
<div class="th" data-fcat="strategy"><span class="tt">地下矿脉怎么规划最省心？</span><span class="meta"><span class="rp">18</span> 回复 · 老周</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 公告 ===== -->
|
||||
<section class="panel" id="announce">
|
||||
<div class="sec-title">公告<small>ANNOUNCEMENTS</small></div>
|
||||
<div class="notes">
|
||||
<div class="note pin"><div class="date">2026.07.09</div><div class="body">宇森官网第一阶段上线：介绍 / 特色 / 背景 / 规则 / 图鉴 / 论坛 / 公告 / 致玩家 八块，单页切换呈现，介绍页即概念宣传片。</div></div>
|
||||
<div class="note"><div class="date">2026.07.09</div><div class="body">图鉴系统升级：种族 204 条、系别/性格/天赋/神器/传奇事件全面扩量，装备槽位对齐 头/手/胸/裤/鞋/戒指(双)/项链/宝物；全部缩略图改为程序化矢量插画，零 AI 生图。</div></div>
|
||||
<div class="note"><div class="date">2026.07.08</div><div class="body">概念宣传片《垂直生长》完成，呈现五层世界自上而下生长的镜头语言（天空层改为云朵地基块，星空层改为陨石科技带）。</div></div>
|
||||
<div class="note"><div class="date">2026.07.01</div><div class="body">园丁视角核心玩法原型启动，首版六边形地图与活 NPC 验证中。</div></div>
|
||||
<div class="note"><div class="date">2026.06.20</div><div class="body">图鉴系统规划确定：种族 / 建筑 / 生物 / 神器 四大类目，美术持续补充中。</div></div>
|
||||
<div class="note pin feat">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.07.09 · 官方</div>
|
||||
<div class="note-title">宇森官网第一阶段上线，欢迎园丁们入驻</div>
|
||||
<div class="body">
|
||||
<p>历经三个月打磨，宇森官网第一阶段正式上线。本次更新带来八大板块——介绍、特色、背景、规则、图鉴、论坛、公告、致玩家，全部以单页切换形式呈现，介绍页即一段概念宣传片，让你在三秒内读懂我们要做什么。</p>
|
||||
<p>「园丁视角」是宇森的核心：你不是旁观者，而是世界的第一位居民。上传你的世界种子，观看五层世界自上而下生长——从星空陨石带到地心熔岩，每一寸地形、每一个种族，都由你的选择塑造。</p>
|
||||
<p>我们同步开放了社区论坛与图鉴共建入口。欢迎在「论坛」留下你的构想，或在「图鉴」认领尚未完成的种族条目；被采纳的内容，会带上你的署名进入正式世界观。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.07.09</div>
|
||||
<div class="note-title">图鉴系统全面升级：204 种族 + 程序化矢量插画</div>
|
||||
<div class="body">
|
||||
<p>图鉴系统完成一次大版本升级：种族条目扩充至 204 条，系别、性格、天赋、神器与传奇事件全面扩量，装备槽位对齐「头 / 手 / 胸 / 裤 / 鞋 / 戒指（双）/ 项链 / 宝物」九宫格。</p>
|
||||
<p>所有缩略图改用程序化矢量插画生成，零 AI 生图、零版权风险，且在任意分辨率下都不糊。后续会逐步开放玩家投稿的「同人词条」分区。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.07.08</div>
|
||||
<div class="note-title">概念宣传片《垂直生长》完成</div>
|
||||
<div class="body">
|
||||
<p>概念宣传片《垂直生长》正式杀青。片长 90 秒，以「自上而下」的镜头语言呈现五层世界的生长过程：天空层改为云朵地基块，星空层改为陨石科技带，地心则翻涌着熔岩血脉。</p>
|
||||
<p>这支片子将成为官网介绍页的自动背景，也会在后续对外宣发中使用。如果你喜欢这种克制的科幻基调，记得在论坛给我们反馈。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.07.01</div>
|
||||
<div class="note-title">园丁视角核心玩法原型启动</div>
|
||||
<div class="body">
|
||||
<p>园丁视角核心玩法原型进入验证阶段。首版采用六边形地图，配合「活 NPC」系统——NPC 拥有独立的日程、记忆与情绪，会对你的长期行为产生不同反应。</p>
|
||||
<p>这一阶段我们重点关注「放手感」：玩家拖拽、缩放、种植、引导文明，每一步都要足够顺滑。手感达标后，再叠加叙事与冲突。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.06.25</div>
|
||||
<div class="note-title">五大世界层设定公开</div>
|
||||
<div class="body">
|
||||
<p>我们公开了宇森的底层世界观——五大世界层：星空、天空、大地、地下、地心。每一层对应一种文明形态与资源循环，层与层之间通过「根系」与「星轨」双向连通。</p>
|
||||
<p>这套设定不是装饰，而是玩法骨架：你在大地的每一次开采，都会改变地心的压力；地心的每一次喷发，又会重塑天空的气候。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.06.20</div>
|
||||
<div class="note-title">社区共建计划：你的名字可以写进世界观</div>
|
||||
<div class="body">
|
||||
<p>图鉴系统规划正式确定，分为「种族 / 建筑 / 生物 / 神器」四大类目。我们决定把相当一部分条目开放给社区共建。</p>
|
||||
<p>被采纳的投稿会标注作者署名，并永久保留在官方图鉴中。第一批评审将在论坛「共建」分区进行，欢迎有想法的园丁报名。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
<div class="note-cover empty"></div>
|
||||
<div class="note-body">
|
||||
<div class="date">2026.06.12</div>
|
||||
<div class="note-title">限量内测招募开启</div>
|
||||
<div class="body">
|
||||
<p>宇森首轮封闭内测招募正式开启，名额 500 人。我们将优先邀请在论坛持续输出高质量内容的园丁，以及愿意参与玩法共创的核心用户。</p>
|
||||
<p>内测的重点不是「好不好玩」，而是「哪里别扭」——你的每一条吐槽，都会直接进入我们的周度复盘会。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -531,7 +619,6 @@
|
||||
|
||||
<!-- ===== 世界数据（登录后可见） ===== -->
|
||||
<section class="panel" id="worlddata">
|
||||
<div class="sec-title">世界数据<small>WORLD DATA</small></div>
|
||||
<div id="worldDataContent"></div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -737,7 +824,8 @@
|
||||
|
||||
// forum post (in-session demo)
|
||||
const postForm=document.getElementById('postForm');
|
||||
document.getElementById('newPost').addEventListener('click',()=>postForm.classList.toggle('show'));
|
||||
const newPostBtn=document.getElementById('newPost');
|
||||
if(newPostBtn && postForm) newPostBtn.addEventListener('click',()=>postForm.classList.toggle('show'));
|
||||
document.getElementById('pfCancel').addEventListener('click',()=>postForm.classList.remove('show'));
|
||||
document.getElementById('pfOk').addEventListener('click',()=>{
|
||||
const t=document.getElementById('pfTitle').value.trim();
|
||||
@@ -791,7 +879,7 @@
|
||||
|
||||
// ============ 背景页：从 odoo 拉取页面板块渲染 ============
|
||||
async function renderBackground(){
|
||||
const box = document.getElementById('background');
|
||||
const box = document.getElementById('bgBody');
|
||||
if(!box) return;
|
||||
try{
|
||||
const r = await fetch('/game/api/pages?db=game', {credentials:'same-origin'});
|
||||
|
||||
Reference in New Issue
Block a user