分类:人物图鉴:修订间差异
来自SOKA CAFE
小 |
|||
| (未显示5个用户的75个中间版本) | |||
| 第1行: | 第1行: | ||
{{提示 | {{提示 | ||
| | |内容='''人物图鉴'''<br><small><div style="margin-top: 6px;line-height:22px;">本页面为SOKA CAFE站点中“人物图鉴”区的中心页,用以收录相关人物信息。</div></small> | ||
}} | }} | ||
< | <html lang="zh-CN"> | ||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>整体页面</title> | |||
<style> | |||
* { | |||
margin: 0; | |||
padding: 0; | |||
box-sizing: border-box; | |||
} | |||
.container { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
background: #fff; | |||
border-radius: 12px; | |||
padding: 20px; | |||
box-shadow: 0 8px 32px rgba(0,0,0,0.1); | |||
} | |||
{ | |||
.title-bar { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin-bottom: 20px; | |||
position: relative; | |||
} | |||
.title-bar::before, .title-bar::after { | |||
content: ""; | |||
flex: 1; | |||
height: 2px; | |||
background: #ccc; | |||
margin: 0 20px; | |||
} | |||
.title-text { | |||
font-size: 24px; | |||
font-weight: bold; | |||
color: #333; | |||
} | |||
.search-box { | |||
width: 100%; | |||
padding: 12px 16px; | |||
border: 1px solid #ddd; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
font-size: 16px; | |||
outline: none; | |||
transition: border-color 0.3s; | |||
} | |||
.search-box:focus { | |||
border-color: #4facfe; | |||
box-shadow: 0 0 0 3px rgba(79,172,254,0.2); | |||
} | |||
.filter-panel { | |||
border-bottom: 1px solid #eee; | |||
padding-bottom: 16px; | |||
margin-bottom: 20px; | |||
} | |||
.filter-title { | |||
font-size: 20px; | |||
font-weight: 600; | |||
margin-bottom: 12px; | |||
color: #333; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.close-btn { | |||
background: none; | |||
border: none; | |||
font-size: 24px; | |||
cursor: pointer; | |||
color: #999; | |||
padding: 0 8px; | |||
} | |||
.filter-section { | |||
margin-bottom: 16px; | |||
} | |||
.filter-section h3 { | |||
font-size: 16px; | |||
font-weight: 500; | |||
margin-bottom: 8px; | |||
color: #555; | |||
} | |||
.filter-tags { | |||
display: flex; | |||
gap: 10px; | |||
flex-wrap: wrap; | |||
} | |||
.filter-tag { | |||
padding: 6px 14px; | |||
background: #f0f2f5; | |||
border: 1px solid #ddd; | |||
border-radius: 20px; | |||
cursor: pointer; | |||
font-size: 14px; | |||
transition: all 0.3s; | |||
} | |||
.filter-tag.active { | |||
background: #4facfe; | |||
color: #fff; | |||
border-color: #4facfe; | |||
} | |||
.filter-tag.link-tag { | |||
color: #4facfe; | |||
background: transparent; | |||
border-color: #4facfe; | |||
} | |||
.filter-tag.link-tag:hover { | |||
background: rgba(79,172,254,0.1); | |||
} | |||
.org-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 20px; | |||
} | |||
.org-card { | |||
display: block; | |||
text-decoration: none; | |||
border-radius: 8px; | |||
overflow: hidden; | |||
transition: all 0.3s ease; | |||
} | |||
.org-card:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 6px 16px rgba(0,0,0,0.1); | |||
} | |||
.org-img { | |||
width: 100%; | |||
height: 240px; | |||
object-fit: cover; | |||
border-radius: 6px; | |||
border: 1px solid #eee; | |||
} | |||
</div> | @media (max-width: 768px) { | ||
<div class=" | .org-grid { | ||
<span class=" | grid-template-columns: repeat(2, 1fr); | ||
} | |||
.org-img { | |||
height: 200px; | |||
} | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div class="container"> | |||
<div class="title-bar"> | |||
<span class="title-text">人物图鉴</span> | |||
</div> | |||
<div class="filter-panel"> | |||
< | <input type="text" class="search-box" placeholder="搜索你想寻找的人物"> | ||
< | |||
<div class=" | <div class="filter-section"> | ||
<div class=" | <h3>身份</h3> | ||
<span class=" | <div class="filter-tags"> | ||
<span class="filter-tag" data-filter="non-religious">非政教人士</span> | |||
<span class="filter-tag" data-filter="religious">政教人士</span> | |||
</div> | |||
</div> | |||
<div class="filter-section"> | |||
<h3>所属团体势力</h3> | |||
<div class="filter-tags"> | |||
<span class="filter-tag" data-filter="soka">创价学会</span> | |||
<span class="filter-tag" data-filter="nichiren">日莲正宗</span> | |||
<span class="filter-tag" data-filter="kensho">显正会</span> | |||
<span class="filter-tag" data-filter="neutral">中立 / 其他</span> | |||
</div> | |||
</div> | |||
</div> | <div class="filter-section"> | ||
< | <h3>主要登场于</h3> | ||
<span class=" | <div class="filter-tags"> | ||
<span class="filter-tag" data-filter="main">本篇作品</span> | |||
<span class="filter-tag" data-filter="side">编外作品</span> | |||
</div> | |||
</div> | |||
<div class="filter-section"> | |||
</div> | <h3>主要职业</h3> | ||
</div> | <div class="filter-tags"> | ||
<span class="filter-tag" data-filter="actor">演员</span> | |||
<span class="filter-tag" data-filter="vocal">歌手 / Vocal</span> | |||
<span class="filter-tag" data-filter="musician">乐手</span> | |||
<span class="filter-tag" data-filter="worker">工人</span> | |||
<span class="filter-tag" data-filter="teacher">教师</span> | |||
<span class="filter-tag" data-filter="artist">美术家</span> | |||
<span class="filter-tag" data-filter="athlete">运动员</span> | |||
<span class="filter-tag" data-filter="dancer">舞者</span> | |||
<span class="filter-tag" data-filter="journalist">记者</span> | |||
<span class="filter-tag" data-filter="doctor">医生</span> | |||
<span class="filter-tag" data-filter="lawyer">律师</span> | |||
</div> | |||
</div> | |||
<div class=" | <div class="filter-section"> | ||
<div class=" | <h3>其他</h3> | ||
< | <div class="filter-tags"> | ||
<a href="https://soka.cafe/index.php?title=問題発言シリーズ" class="filter-tag link-tag">問題発言シリーズ</a> | |||
<a href="https://soka.cafe/index.php?title=900シリーズ" class="filter-tag link-tag">900シリーズ</a> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="org-grid" id="orgGrid"></div> | |||
</div> | |||
</ | <script> | ||
const wikiDomain = "https://soka.cafe"; | |||
const orgData = [ | |||
{ | |||
imgName: "图鉴久本雅美.jpg", | |||
link: "久本雅美", | |||
name: "久本雅美", | |||
tags: ["non-religious", "soka", "main", "actor"] | |||
}, | |||
{ | |||
imgName: "图鉴柴田理惠.jpg", | |||
link: "柴田理惠", | |||
name: "柴田理惠", | |||
tags: ["non-religious", "soka", "main", "actor"] | |||
}, | |||
{ | |||
imgName: "图鉴男子部石川.jpg", | |||
link: "石川", | |||
name: "石川", | |||
tags: ["non-religious", "soka", "main"] | |||
}, | |||
{ | |||
imgName: "图鉴齐藤房子.jpg", | |||
link: "齐藤房子", | |||
name: "齐藤房子", | |||
tags: ["non-religious", "soka", "main"] | |||
}, | |||
{ | |||
imgName: "图鉴森雅晴.jpg", | |||
link: "森雅晴", | |||
name: "森雅晴", | |||
tags: ["non-religious", "neutral", "main", "actor"] | |||
}, | |||
{ | |||
imgName: "图鉴古贺清.jpg", | |||
link: "古贺清", | |||
name: "古贺清", | |||
tags: ["non-religious", "neutral", "main", "actor"] | |||
}, | |||
{ | |||
imgName: "图鉴元气安.jpg", | |||
link: "元气安", | |||
name: "元气安", | |||
tags: ["non-religious", "neutral", "main", "actor"] | |||
}, | |||
{ | |||
imgName: "挑同图鉴仓地.png", | |||
link: "仓地透", | |||
name: "仓地透", | |||
tags: ["non-religious", "soka", "main", "worker"] | |||
}, | |||
{ | |||
imgName: "图鉴背后灵.jpg", | |||
link: "背后灵", | |||
name: "背后灵", | |||
tags: ["non-religious", "soka", "main"] | |||
}, | |||
{ | |||
imgName: "图鉴大岛正幸.jpg", | |||
link: "大岛正幸", | |||
name: "大岛正幸", | |||
tags: ["non-religious", "soka", "main", "worker"] | |||
}, | |||
{ | |||
imgName: "图鉴大野俊三.jpg", | |||
link: "大野俊三", | |||
name: "大野俊三", | |||
tags: ["non-religious", "soka", "main", "musician"] | |||
}, | |||
{ | |||
imgName: "图鉴城达也.jpg", | |||
link: "城达也", | |||
name: "城达也", | |||
tags: ["non-religious", "soka", "main", "vocal"] | |||
}, | |||
{ | |||
imgName: "人物图鉴阿尔伯特.jpg", | |||
link: "阿尔伯特·城间", | |||
name: "阿尔伯特·城间", | |||
tags: ["non-religious", "soka", "main", "vocal"] | |||
}, | |||
{ | |||
imgName: "图鉴马尼修.jpg", | |||
link: "马尼修·卡普尔", | |||
name: "马尼修·卡普尔", | |||
tags: ["non-religious", "soka", "main", "vocal"] | |||
}, | |||
{ | |||
imgName: "图鉴凯瑟琳.jpg", | |||
link: "凯瑟琳·卡什", | |||
name: "凯瑟琳·卡什", | |||
tags: ["non-religious", "neutral", "main", "musician"] | |||
}, | |||
{ | |||
imgName: "图鉴内斯特.jpg", | |||
link: "内斯特·托雷斯", | |||
name: "内斯特·托雷斯", | |||
tags: ["non-religious", "soka", "main", "musician"] | |||
}, | |||
{ | |||
imgName: "图鉴高桥.jpg", | |||
link: "高桥乔治", | |||
name: "高桥乔治", | |||
tags: ["non-religious", "soka", "main", "vocal", "musician"] | |||
}, | |||
{ | |||
imgName: "图鉴山崎旭萃.jpg", | |||
link: "山崎旭萃", | |||
name: "山崎旭萃", | |||
tags: ["non-religious", "soka", "main", "musician"] | |||
}, | |||
{ | |||
imgName: "图鉴伊藤日出夫.jpg", | |||
link: "伊藤日出夫", | |||
name: "伊藤日出夫", | |||
tags: ["non-religious", "soka", "main", "musician"] | |||
}, | |||
{ | |||
imgName: "图鉴松田芳正.jpg", | |||
link: "松田芳正", | |||
name: "松田芳正", | |||
tags: ["non-religious", "neutral", "main", "musician"] | |||
}, | |||
]; | |||
const orgGrid = document.getElementById("orgGrid"); | |||
let activeFilters = new Set(); | |||
function getWikiImageUrl(imgName) { | |||
return `${wikiDomain}/Special:FilePath/${encodeURIComponent(imgName)}`; | |||
} | |||
function renderOrgCards(filteredData = orgData) { | |||
orgGrid.innerHTML = ""; | |||
filteredData.forEach(org => { | |||
const card = document.createElement("a"); | |||
card.className = "org-card"; | |||
card.href = `${wikiDomain}/index.php?title=${encodeURIComponent(org.link)}`; | |||
const img = document.createElement("img"); | |||
img.className = "org-img"; | |||
img.src = getWikiImageUrl(org.imgName); | |||
img.alt = org.name; | |||
img.onerror = function() { | |||
this.src = `${wikiDomain}/Special:FilePath/默认图片.png`; | |||
}; | |||
card.appendChild(img); | |||
orgGrid.appendChild(card); | |||
}); | |||
} | |||
// 筛选标签 | |||
document.querySelectorAll('.filter-tag:not(.link-tag)').forEach(tag => { | |||
tag.addEventListener('click', function() { | |||
const filter = this.dataset.filter; | |||
if (activeFilters.has(filter)) { | |||
activeFilters.delete(filter); | |||
this.classList.remove('active'); | |||
} else { | |||
activeFilters.add(filter); | |||
this.classList.add('active'); | |||
} | |||
applyFilters(); | |||
}); | |||
}); | |||
// 搜索 | |||
const searchBox = document.querySelector(".search-box"); | |||
searchBox.addEventListener("input", applyFilters); | |||
function applyFilters() { | |||
const keyword = searchBox.value.toLowerCase().trim(); | |||
let filtered = [...orgData]; | |||
// 标签筛选(AND 逻辑:必须包含所有选中标签) | |||
if (activeFilters.size > 0) { | |||
filtered = filtered.filter(item => { | |||
return Array.from(activeFilters).every(t => item.tags.includes(t)); | |||
}); | |||
} | |||
// 关键词搜索 | |||
if (keyword) { | |||
filtered = filtered.filter(item => | |||
item.name.toLowerCase().includes(keyword) | |||
); | |||
} | |||
renderOrgCards(filtered); | |||
} | |||
renderOrgCards(); | |||
</ | </script> | ||
</ | </body> | ||
</ | </html> | ||
[[分类:中心页]] | [[分类:中心页]] | ||
2026年3月1日 (日) 21:02的最新版本

人物图鉴
本页面为SOKA CAFE站点中“人物图鉴”区的中心页,用以收录相关人物信息。
