Update WBBR frontend template collection
This commit is contained in:
Codex
302
app/anime/AnimeDetail.module.css
Normal file
302
app/anime/AnimeDetail.module.css
Normal file
@@ -0,0 +1,302 @@
|
||||
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
|
||||
|
||||
.page {
|
||||
--night: #080b19;
|
||||
--ink: #17182b;
|
||||
--purple: #7c5cff;
|
||||
--purple-dark: #5e42d9;
|
||||
--purple-soft: #f0edff;
|
||||
--line: #e9e7f0;
|
||||
--muted: #7c7d8e;
|
||||
min-height: 100vh;
|
||||
overflow: clip;
|
||||
background: #fbfafc;
|
||||
color: var(--ink);
|
||||
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.page button, .page textarea { font: inherit; }
|
||||
.header { position: absolute; inset: 0 0 auto; z-index: 20; height: 76px; display: flex; align-items: center; gap: 48px; padding: 0 max(28px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid rgba(255,255,255,.12); color: white; }
|
||||
.logo { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; }
|
||||
.logoMark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: linear-gradient(145deg,#8c6bff,#5e3fd1); color: #fff; font-family: Georgia,serif; font-size: 18px; font-style: italic; box-shadow: 0 5px 16px rgba(67,35,169,.3); }
|
||||
.logo > span:last-child { display: flex; flex-direction: column; gap: 1px; }
|
||||
.logo strong { font-size: 13px; letter-spacing: 3px; }
|
||||
.logo small { color: rgba(255,255,255,.55); font-size: 7px; letter-spacing: 2px; }
|
||||
.primaryNav { display: flex; align-self: stretch; }
|
||||
.primaryNav button { position: relative; min-width: 68px; padding: 0 14px; border: 0; background: none; color: rgba(255,255,255,.62); cursor: pointer; font-size: 13px; }
|
||||
.primaryNav button:hover, .primaryNav .currentNav { color: #fff; }
|
||||
.primaryNav .currentNav::after { content: ""; position: absolute; inset: auto 14px -1px; height: 2px; background: #a68cff; }
|
||||
.headerActions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
||||
.headerActions > button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.09); color: white; cursor: pointer; font-size: 20px; }
|
||||
.headerActions > button:hover { background: rgba(255,255,255,.18); }
|
||||
.headerActions .cartButton { position: relative; font-size: 16px; }
|
||||
.cartButton span { position: absolute; right: -2px; top: -2px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border-radius: 9px; background: #ff6d8a; font-size: 9px; }
|
||||
.headerAvatar { width: 36px; height: 36px; display: grid; place-items: center; margin-left: 5px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: linear-gradient(135deg,#d7d0ff,#8a73ea); color: #2c2255; font-size: 12px; font-weight: 800; }
|
||||
|
||||
.hero { position: relative; height: 720px; overflow: hidden; background: #080b19; color: #fff; }
|
||||
.heroImage { position: absolute; inset: 0; background-image: url('/anime/star-echoes-hero.png'); background-position: center 42%; background-size: cover; transform: scale(1.002); }
|
||||
.heroShade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,7,20,.98) 0%,rgba(6,8,24,.89) 25%,rgba(8,10,26,.41) 54%,rgba(8,10,25,.11) 80%),linear-gradient(0deg,rgba(8,11,25,1) 0%,transparent 35%,rgba(4,7,20,.35) 100%); }
|
||||
.heroContent { position: relative; width: min(1240px,calc(100% - 56px)); height: 100%; margin: auto; padding-top: 108px; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.42); font-size: 10px; }
|
||||
.breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; }
|
||||
.breadcrumb strong { color: rgba(255,255,255,.76); font-weight: 500; }
|
||||
.heroCopy { width: min(590px,50vw); margin-top: 80px; }
|
||||
.statusLine { display: flex; align-items: center; gap: 8px; margin-bottom: 21px; }
|
||||
.statusLine > span { padding: 4px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: rgba(255,255,255,.67); font-size: 10px; }
|
||||
.statusLine .onAir { display: flex; align-items: center; gap: 6px; border-color: rgba(125,255,207,.28); background: rgba(48,166,125,.13); color: #8ef0cb; }
|
||||
.onAir i { width: 5px; height: 5px; border-radius: 50%; background: #74e8bd; box-shadow: 0 0 8px #74e8bd; }
|
||||
.englishTitle { margin: 0 0 6px; color: #ad9bff; font-size: 10px; font-weight: 700; letter-spacing: 3.6px; }
|
||||
.hero h1 { margin: 0; font-family: "STSong","SimSun",serif; font-size: clamp(60px,6vw,92px); font-weight: 500; letter-spacing: 8px; line-height: 1.08; text-shadow: 0 4px 22px rgba(0,0,0,.25); }
|
||||
.heroSubtitle { max-width: 520px; margin: 20px 0 17px; color: rgba(255,255,255,.76); font-family: "STSong","SimSun",serif; font-size: 16px; line-height: 1.8; letter-spacing: .5px; }
|
||||
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.tags span { padding: 5px 11px; border-radius: 16px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.72); font-size: 10px; backdrop-filter: blur(8px); }
|
||||
.heroButtons { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
|
||||
.heroButtons button { height: 44px; border-radius: 24px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform .18s,background .18s; }
|
||||
.heroButtons button:hover { transform: translateY(-2px); }
|
||||
.playButton { min-width: 152px; padding: 0 22px; border: 0; background: #fff; color: #19142c; box-shadow: 0 9px 28px rgba(0,0,0,.2); }
|
||||
.playButton span { margin-right: 8px; color: var(--purple); }
|
||||
.favoriteButton, .favoritedButton { min-width: 96px; padding: 0 18px; border: 1px solid rgba(255,255,255,.36); background: rgba(14,15,35,.35); color: #fff; backdrop-filter: blur(8px); }
|
||||
.favoritedButton { border-color: #9e89ff; background: rgba(124,92,255,.32); }
|
||||
.roundButton { width: 44px; border: 1px solid rgba(255,255,255,.3); background: rgba(14,15,35,.35); color: #fff; }
|
||||
.heroRating { position: absolute; right: 0; bottom: 112px; width: 236px; padding: 19px 21px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(13,14,33,.44); backdrop-filter: blur(16px); }
|
||||
.heroRating > small { color: rgba(255,255,255,.53); font-size: 9px; letter-spacing: 1px; }
|
||||
.heroRating > div { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
|
||||
.heroRating > div > strong { font-family: Georgia,serif; font-size: 40px; font-weight: 500; }
|
||||
.heroRating > div > span { display: flex; flex-direction: column; gap: 4px; }
|
||||
.heroRating b { color: #ffd36d; font-size: 10px; letter-spacing: 1px; }
|
||||
.heroRating span small { color: rgba(255,255,255,.48); font-size: 8px; }
|
||||
.heroRating > i { display: block; height: 1px; margin: 13px 0 10px; background: rgba(255,255,255,.13); }
|
||||
.heroRating p { display: flex; justify-content: space-between; margin: 0; font-size: 9px; }
|
||||
.heroRating p span { color: rgba(255,255,255,.48); }
|
||||
.heroRating p b { color: #bcaeff; font-size: 9px; }
|
||||
.heroMetrics { position: absolute; left: 0; bottom: 45px; display: flex; }
|
||||
.heroMetrics > div { min-width: 110px; padding-right: 34px; margin-right: 34px; border-right: 1px solid rgba(255,255,255,.14); }
|
||||
.heroMetrics > div:last-child { border-right: 0; }
|
||||
.heroMetrics small { display: block; margin-bottom: 4px; color: rgba(255,255,255,.42); font-size: 9px; }
|
||||
.heroMetrics strong { font-family: Georgia,serif; font-size: 20px; font-weight: 500; }
|
||||
.heroMetrics em { color: rgba(255,255,255,.38); font-size: 12px; font-style: normal; }
|
||||
|
||||
.sectionNav { position: sticky; top: 0; z-index: 15; height: 64px; border-bottom: 1px solid var(--line); background: rgba(251,250,252,.94); backdrop-filter: blur(14px); }
|
||||
.sectionNav > div { width: min(1240px,calc(100% - 56px)); height: 100%; display: flex; align-items: stretch; gap: 36px; margin: auto; }
|
||||
.sectionNav button { position: relative; padding: 0 4px; border: 0; background: transparent; color: #8b8995; cursor: pointer; font-size: 12px; }
|
||||
.sectionNav .activeTab { color: var(--ink); font-weight: 700; }
|
||||
.sectionNav .activeTab::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--purple); }
|
||||
.content { width: min(1240px,calc(100% - 56px)); margin: auto; padding: 4px 0 80px; }
|
||||
.anchorSection { scroll-margin-top: 84px; padding-top: 74px; }
|
||||
.sectionHeading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
|
||||
.sectionHeading > div > span, .kicker { display: block; margin-bottom: 7px; color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: 2.5px; }
|
||||
.sectionHeading h2 { margin: 0; font-family: "STSong","SimSun",serif; font-size: 28px; font-weight: 600; letter-spacing: 1px; }
|
||||
.sectionHeading > p { margin: 0; color: #9a98a4; font-size: 9px; }
|
||||
.textButton { border: 0; background: none; color: #7163ad; cursor: pointer; font-size: 10px; }
|
||||
|
||||
.overviewGrid { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(280px,.8fr); gap: 20px; }
|
||||
.synopsisCard { min-height: 444px; display: grid; grid-template-columns: 39% 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 15px 50px rgba(29,20,58,.06); }
|
||||
.posterCrop { min-height: 444px; background-image: linear-gradient(0deg,rgba(8,9,22,.35),transparent 40%),url('/anime/star-echoes-hero.png'); background-position: 65% center; background-size: auto 100%; }
|
||||
.synopsisBody { padding: 50px 46px 40px; }
|
||||
.synopsisBody h3 { margin: 0 0 23px; font-family: "STSong","SimSun",serif; font-size: 26px; font-weight: 600; line-height: 1.62; letter-spacing: 1px; }
|
||||
.synopsisBody > p { margin: 0; color: #6f6e7b; font-size: 12px; line-height: 2.05; }
|
||||
.quote { margin-top: 25px; padding: 15px 17px; border-left: 2px solid #9c88fa; background: #f7f5ff; color: #6b608e; font-family: "STSong","SimSun",serif; font-size: 11px; line-height: 1.8; }
|
||||
.infoCard { padding: 28px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
|
||||
.infoCard h3 { margin: 0 0 23px; font-size: 13px; }
|
||||
.infoCard dl { margin: 0; }
|
||||
.infoCard dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid #f0eef3; font-size: 10px; }
|
||||
.infoCard dt { color: #9a98a3; }
|
||||
.infoCard dd { margin: 0; color: #444250; font-weight: 600; text-align: right; }
|
||||
.notice { display: flex; gap: 10px; margin-top: 22px; padding: 13px; border-radius: 9px; background: var(--purple-soft); }
|
||||
.notice > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #8169e4; color: #fff; font-family: Georgia,serif; font-size: 11px; font-style: italic; }
|
||||
.notice p { margin: 0; color: #6a6285; font-size: 9px; line-height: 1.6; }
|
||||
.notice p strong { display: block; color: #473a77; font-size: 10px; }
|
||||
|
||||
.episodeFeature { display: grid; grid-template-columns: 42% 1fr; min-height: 220px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
|
||||
.episodeVisual { position: relative; display: grid; place-items: center; overflow: hidden; background-image: linear-gradient(90deg,rgba(6,8,23,.15),rgba(6,8,23,.35)),url('/anime/star-echoes-hero.png'); background-position: 58% center; background-size: cover; color: #fff; }
|
||||
.episodeVisual::after { content: ""; position: absolute; inset: 0; box-shadow: inset -35px 0 35px rgba(8,10,28,.08); }
|
||||
.episodeVisual > span { position: absolute; left: 18px; top: 17px; z-index: 1; padding: 4px 8px; border-radius: 4px; background: rgba(8,10,28,.55); font-size: 8px; backdrop-filter: blur(6px); }
|
||||
.episodeVisual button { position: relative; z-index: 2; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; font-size: 17px; backdrop-filter: blur(6px); }
|
||||
.episodeVisual small { position: absolute; right: 18px; bottom: 14px; z-index: 1; font-size: 9px; }
|
||||
.episodeFeature > div:last-child { align-self: center; padding: 34px 42px; }
|
||||
.episodeFeature h3 { margin: 0 0 10px; font-size: 18px; }
|
||||
.episodeFeature p { margin: 0 0 25px; color: #85838f; font-size: 11px; }
|
||||
.watchProgress { display: flex; align-items: center; gap: 10px; }
|
||||
.watchProgress > span { height: 4px; flex: 1; overflow: hidden; border-radius: 2px; background: #eeeaf4; }
|
||||
.watchProgress i { display: block; height: 100%; border-radius: inherit; background: var(--purple); }
|
||||
.watchProgress small { color: #9b98a5; font-size: 8px; }
|
||||
.episodeGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
|
||||
.episodeCard { min-height: 76px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; transition: border .18s,transform .18s,box-shadow .18s; }
|
||||
.episodeCard:hover { transform: translateY(-2px); border-color: #cfc5fa; box-shadow: 0 8px 22px rgba(49,31,101,.07); }
|
||||
.episodeNumber { width: 31px; color: #aaa5b6; font-family: Georgia,serif; font-size: 18px; }
|
||||
.episodeInfo { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 5px; }
|
||||
.episodeInfo strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.episodeInfo small { color: #aaa8b2; font-size: 8px; }
|
||||
.episodeCard > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #f2effb; color: #8370d6; font-size: 8px; font-style: normal; }
|
||||
.selectedEpisode { border-color: #9c88f1; background: #faf9ff; box-shadow: inset 3px 0 #7c5cff; }
|
||||
.selectedEpisode .episodeNumber { color: var(--purple); }
|
||||
.lockedEpisode { opacity: .52; background: #f5f4f6; }
|
||||
|
||||
.productBanner { min-height: 148px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 30px 42px; border-radius: 15px; background: radial-gradient(circle at 80% 20%,rgba(168,140,255,.22),transparent 32%),linear-gradient(110deg,#15132a,#282043 58%,#111326); color: #fff; }
|
||||
.productBanner span { color: #b6a4ff; font-size: 9px; letter-spacing: 2px; }
|
||||
.productBanner h3 { margin: 8px 0 5px; font-family: "STSong","SimSun",serif; font-size: 25px; font-weight: 500; letter-spacing: 2px; }
|
||||
.productBanner p { margin: 0; color: rgba(255,255,255,.48); font-size: 9px; }
|
||||
.productBanner button { height: 38px; padding: 0 18px; border: 1px solid rgba(255,255,255,.46); border-radius: 20px; background: transparent; color: #fff; cursor: pointer; font-size: 10px; }
|
||||
.productGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
|
||||
.productCard { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: transform .2s,box-shadow .2s; }
|
||||
.productCard:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(41,31,78,.1); }
|
||||
.productImage { position: relative; height: 310px; background-image: url('/anime/star-echoes-merch.png'); background-repeat: no-repeat; background-size: 300% 100%; }
|
||||
.productImage.left { background-position: left center; }
|
||||
.productImage.center { background-position: center center; }
|
||||
.productImage.right { background-position: right center; }
|
||||
.productImage > span { position: absolute; left: 13px; top: 13px; padding: 5px 9px; border-radius: 4px; background: rgba(26,22,50,.84); color: #fff; font-size: 8px; letter-spacing: 1px; }
|
||||
.productImage > button { position: absolute; right: 13px; top: 13px; width: 31px; height: 31px; border: 0; border-radius: 50%; background: rgba(255,255,255,.86); color: #594c86; cursor: pointer; font-size: 16px; backdrop-filter: blur(8px); }
|
||||
.productBody { padding: 18px; }
|
||||
.productBody > small { color: #9a96a5; font-size: 8px; letter-spacing: .6px; }
|
||||
.productBody h3 { height: 34px; margin: 7px 0 8px; font-size: 12px; line-height: 1.5; }
|
||||
.productRating { display: flex; justify-content: space-between; }
|
||||
.productRating span { color: #e39b34; font-size: 8px; }
|
||||
.productRating small { color: #aaa7b0; font-size: 8px; }
|
||||
.productFooter { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 18px; padding-top: 15px; border-top: 1px solid #f0eef3; }
|
||||
.productFooter p { margin: 0; }
|
||||
.productFooter strong { color: #6950dc; font-family: Georgia,serif; font-size: 18px; }
|
||||
.productFooter del { margin-left: 7px; color: #b7b3bd; font-size: 8px; }
|
||||
.productFooter button { height: 32px; padding: 0 14px; border: 0; border-radius: 17px; background: #1d1b31; color: #fff; cursor: pointer; font-size: 9px; }
|
||||
.productFooter button:hover { background: var(--purple); }
|
||||
|
||||
.reviewSummary { display: grid; grid-template-columns: 210px 1fr 1.15fr; align-items: center; min-height: 165px; padding: 24px 34px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
|
||||
.scoreBlock { display: flex; flex-direction: column; align-items: center; border-right: 1px solid #eeecf1; }
|
||||
.scoreBlock strong { font-family: Georgia,serif; font-size: 46px; font-weight: 500; }
|
||||
.scoreBlock span { margin: 4px 0; color: #f4b94c; font-size: 11px; letter-spacing: 2px; }
|
||||
.scoreBlock small { color: #a3a0aa; font-size: 8px; }
|
||||
.distribution { padding: 0 42px; border-right: 1px solid #eeecf1; }
|
||||
.distribution > div { display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 8px; margin: 6px 0; color: #aaa6b1; font-size: 8px; }
|
||||
.distribution i { height: 4px; overflow: hidden; border-radius: 3px; background: #eeeaf3; }
|
||||
.distribution b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c5cff,#b191ff); }
|
||||
.reviewHighlights { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; }
|
||||
.reviewHighlights > div { border-right: 1px solid #f0eef3; }
|
||||
.reviewHighlights > div:last-child { border: 0; }
|
||||
.reviewHighlights strong { display: block; font-family: Georgia,serif; font-size: 21px; font-weight: 500; }
|
||||
.reviewHighlights small { color: #a19da8; font-size: 8px; }
|
||||
.commentLayout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 25px; margin-top: 20px; }
|
||||
.commentMain { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
|
||||
.commentToolbar { height: 63px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #efedf2; }
|
||||
.commentToolbar button { padding: 8px 11px; border: 0; border-radius: 5px; background: transparent; color: #9995a3; cursor: pointer; font-size: 10px; }
|
||||
.commentToolbar .sortActive { background: var(--purple-soft); color: #6854c1; font-weight: 700; }
|
||||
.commentToolbar > span { color: #aaa7b0; font-size: 8px; }
|
||||
.commentList { padding: 0 24px; }
|
||||
.commentCard { display: flex; gap: 13px; padding: 25px 0; border-bottom: 1px solid #efedf2; }
|
||||
.commentCard:last-child { border-bottom: 0; }
|
||||
.commentAvatar { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-size: 10px; font-weight: 800; }
|
||||
.violet { background: #e9e1ff; color: #6d50c4; }
|
||||
.blue { background: #dfeeff; color: #3975ae; }
|
||||
.coral { background: #ffe5e2; color: #bd5f55; }
|
||||
.green { background: #dff5ec; color: #318669; }
|
||||
.commentBody { min-width: 0; flex: 1; }
|
||||
.commentBody > header { display: flex; justify-content: space-between; gap: 15px; }
|
||||
.commentBody header > div { display: flex; align-items: center; gap: 10px; }
|
||||
.commentBody header strong { font-size: 10px; }
|
||||
.commentBody header span { color: #f0ad38; font-size: 7px; letter-spacing: 1px; }
|
||||
.commentBody header span i { color: #ddd9e2; font-style: normal; }
|
||||
.commentBody header small { color: #aaa7b1; font-size: 8px; }
|
||||
.commentBody > p { margin: 12px 0; color: #5e5c68; font-size: 11px; line-height: 1.85; }
|
||||
.commentActions { display: flex; gap: 4px; }
|
||||
.commentActions button { padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; color: #a29eaa; cursor: pointer; font-size: 8px; }
|
||||
.commentActions button:hover { background: #f5f2fb; color: #6655ad; }
|
||||
.commentActions .liked { background: #f0ebff; color: #6c52dd; }
|
||||
.reply { display: flex; gap: 9px; margin-top: 14px; padding: 12px; border-radius: 7px; background: #f8f7fa; }
|
||||
.reply > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e6eeff; color: #5176b4; font-size: 8px; }
|
||||
.reply p { margin: 0; color: #74717c; font-size: 9px; line-height: 1.6; }
|
||||
.reply p strong { margin-right: 8px; color: #393744; }
|
||||
.reply small { display: block; margin-top: 4px; color: #aaa6b0; font-size: 7px; }
|
||||
.composer { position: sticky; top: 84px; padding: 27px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 35px rgba(38,27,73,.05); }
|
||||
.composerEyebrow { color: var(--purple); font-size: 7px; font-weight: 800; letter-spacing: 1.6px; }
|
||||
.composer h3 { margin: 7px 0 5px; font-size: 16px; }
|
||||
.composer > p { margin: 0 0 20px; color: #9b98a4; font-size: 8px; }
|
||||
.scorePicker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.scorePicker > span { color: #777381; font-size: 9px; }
|
||||
.scorePicker button { padding: 1px; border: 0; background: none; color: #dcd8e0; cursor: pointer; font-size: 15px; }
|
||||
.scorePicker .starOn { color: #f1b243; }
|
||||
.composer textarea { width: 100%; height: 125px; resize: none; padding: 12px; border: 1px solid #e4e1e9; border-radius: 8px; outline: none; background: #fbfafc; color: #4c4956; font-size: 10px; line-height: 1.7; }
|
||||
.composer textarea:focus { border-color: #a997ed; box-shadow: 0 0 0 3px rgba(124,92,255,.08); }
|
||||
.composerMeta { display: flex; justify-content: space-between; margin: 8px 0 16px; color: #aaa7b1; font-size: 8px; }
|
||||
.composerMeta input { width: 11px; height: 11px; accent-color: var(--purple); vertical-align: middle; }
|
||||
.publishButton { width: 100%; height: 38px; border: 0; border-radius: 7px; background: linear-gradient(90deg,#7053e2,#8b69ee); color: #fff; cursor: pointer; font-size: 10px; font-weight: 700; box-shadow: 0 8px 18px rgba(112,83,226,.2); }
|
||||
.composer > small { display: block; margin-top: 10px; color: #b0acb5; font-size: 7px; text-align: center; }
|
||||
|
||||
.footer { min-height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px,calc((100vw - 1240px) / 2)); background: #111020; color: #fff; }
|
||||
.footer > div { display: flex; align-items: center; gap: 12px; }
|
||||
.footer p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
|
||||
.footer p strong { font-size: 9px; letter-spacing: 1.5px; }
|
||||
.footer p small { color: rgba(255,255,255,.38); font-size: 8px; }
|
||||
.footer a { color: rgba(255,255,255,.56); font-size: 9px; text-decoration: none; }
|
||||
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; display: flex; align-items: center; gap: 9px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(20,18,38,.93); color: #fff; box-shadow: 0 12px 30px rgba(14,10,32,.25); font-size: 10px; backdrop-filter: blur(12px); animation: toastIn .22s ease both; }
|
||||
.toast span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #7c5cff; font-size: 8px; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.header { gap: 20px; }
|
||||
.primaryNav { display: none; }
|
||||
.hero { height: 690px; }
|
||||
.heroImage { background-position: 57% center; }
|
||||
.heroCopy { width: 70vw; margin-top: 65px; }
|
||||
.heroRating { display: none; }
|
||||
.overviewGrid { grid-template-columns: 1fr; }
|
||||
.infoCard { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
|
||||
.infoCard h3 { grid-column: 1/-1; margin-bottom: 0; }
|
||||
.episodeGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
|
||||
.productImage { height: 240px; }
|
||||
.reviewSummary { grid-template-columns: 170px 1fr; }
|
||||
.reviewHighlights { grid-column: 1/-1; margin-top: 24px; padding-top: 20px; border-top: 1px solid #efedf2; }
|
||||
.distribution { border-right: 0; }
|
||||
.commentLayout { grid-template-columns: 1fr; }
|
||||
.composer { position: static; order: -1; }
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.header { height: 64px; padding: 0 18px; }
|
||||
.logo small { display: none; }
|
||||
.logo strong { font-size: 10px; letter-spacing: 2px; }
|
||||
.headerActions > button:first-child, .headerAvatar { display: none; }
|
||||
.hero { height: 700px; }
|
||||
.heroImage { background-position: 64% center; opacity: .85; }
|
||||
.heroShade { background: linear-gradient(0deg,#080b19 0%,rgba(7,9,24,.72) 50%,rgba(5,7,20,.26) 100%); }
|
||||
.heroContent { width: calc(100% - 36px); padding-top: 88px; }
|
||||
.breadcrumb { font-size: 8px; }
|
||||
.heroCopy { width: 100%; margin-top: 220px; }
|
||||
.hero h1 { font-size: 49px; letter-spacing: 5px; }
|
||||
.heroSubtitle { margin: 12px 0; font-size: 12px; }
|
||||
.statusLine { margin-bottom: 12px; }
|
||||
.statusLine > span:nth-last-child(-n+2) { display: none; }
|
||||
.heroButtons { margin-top: 20px; }
|
||||
.heroMetrics { left: 0; right: 0; bottom: 25px; justify-content: space-between; }
|
||||
.heroMetrics > div { min-width: 0; margin: 0; padding: 0 20px 0 0; }
|
||||
.heroMetrics strong { font-size: 16px; }
|
||||
.sectionNav { overflow-x: auto; }
|
||||
.sectionNav > div { width: max-content; margin: 0; padding: 0 18px; gap: 24px; }
|
||||
.content { width: calc(100% - 32px); padding-bottom: 50px; }
|
||||
.anchorSection { padding-top: 52px; }
|
||||
.sectionHeading { margin-bottom: 20px; }
|
||||
.sectionHeading h2 { font-size: 24px; }
|
||||
.sectionHeading > p { display: none; }
|
||||
.synopsisCard { grid-template-columns: 1fr; }
|
||||
.posterCrop { min-height: 300px; background-position: 62% center; background-size: cover; }
|
||||
.synopsisBody { padding: 29px 24px; }
|
||||
.synopsisBody h3 { font-size: 20px; }
|
||||
.infoCard { display: block; padding: 24px; }
|
||||
.infoCard h3 { margin-bottom: 18px; }
|
||||
.episodeFeature { grid-template-columns: 1fr; }
|
||||
.episodeVisual { min-height: 190px; }
|
||||
.episodeFeature > div:last-child { padding: 25px; }
|
||||
.episodeGrid { grid-template-columns: 1fr; }
|
||||
.productBanner { padding: 25px; }
|
||||
.productBanner button { display: none; }
|
||||
.productGrid { grid-template-columns: 1fr; }
|
||||
.productImage { height: 340px; }
|
||||
.reviewSummary { grid-template-columns: 1fr; padding: 25px; }
|
||||
.scoreBlock { padding-bottom: 20px; border-right: 0; border-bottom: 1px solid #eeecf1; }
|
||||
.distribution { padding: 20px 0 0; }
|
||||
.reviewHighlights { gap: 0; }
|
||||
.commentToolbar { padding: 0 14px; }
|
||||
.commentToolbar > span { display: none; }
|
||||
.commentList { padding: 0 16px; }
|
||||
.commentCard { gap: 10px; }
|
||||
.commentBody > header { flex-direction: column; gap: 5px; }
|
||||
.composer { padding: 23px; }
|
||||
.footer { min-height: 105px; padding: 0 20px; }
|
||||
.footer a { display: none; }
|
||||
}
|
||||
300
app/anime/page.tsx
Normal file
300
app/anime/page.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import animeData from "../data/anime-detail.json";
|
||||
import styles from "./AnimeDetail.module.css";
|
||||
|
||||
type Episode = (typeof animeData.episodes)[number];
|
||||
type Product = (typeof animeData.products)[number];
|
||||
type Reply = { id: number; author: string; initial: string; content: string; time: string; likes: number };
|
||||
type Comment = {
|
||||
id: number;
|
||||
author: string;
|
||||
initial: string;
|
||||
tone: string;
|
||||
score: number;
|
||||
time: string;
|
||||
episode: string;
|
||||
content: string;
|
||||
likes: number;
|
||||
spoiler: boolean;
|
||||
replies: Reply[];
|
||||
};
|
||||
|
||||
const work = animeData.work;
|
||||
|
||||
export default function AnimeDetailPage() {
|
||||
const [favorite, setFavorite] = useState(false);
|
||||
const [cartCount, setCartCount] = useState(0);
|
||||
const [selectedEpisode, setSelectedEpisode] = useState(2);
|
||||
const [comments, setComments] = useState<Comment[]>(animeData.comments as Comment[]);
|
||||
const [likedComments, setLikedComments] = useState<number[]>([]);
|
||||
const [commentText, setCommentText] = useState("");
|
||||
const [commentScore, setCommentScore] = useState(5);
|
||||
const [sort, setSort] = useState<"hot" | "new">("hot");
|
||||
const [toast, setToast] = useState("");
|
||||
const [activeSection, setActiveSection] = useState("overview");
|
||||
const [hydrated, setHydrated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
setFavorite(window.localStorage.getItem("star-echoes-favorite") === "1");
|
||||
setCartCount(Number(window.localStorage.getItem("star-echoes-cart") || 0));
|
||||
const savedComments = window.localStorage.getItem("star-echoes-comments");
|
||||
const savedLikes = window.localStorage.getItem("star-echoes-likes");
|
||||
if (savedComments) setComments(JSON.parse(savedComments));
|
||||
if (savedLikes) setLikedComments(JSON.parse(savedLikes));
|
||||
} catch {
|
||||
// Invalid demo cache falls back to the bundled JSON data.
|
||||
}
|
||||
setHydrated(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hydrated) return;
|
||||
window.localStorage.setItem("star-echoes-favorite", favorite ? "1" : "0");
|
||||
window.localStorage.setItem("star-echoes-cart", String(cartCount));
|
||||
window.localStorage.setItem("star-echoes-comments", JSON.stringify(comments));
|
||||
window.localStorage.setItem("star-echoes-likes", JSON.stringify(likedComments));
|
||||
}, [favorite, cartCount, comments, likedComments, hydrated]);
|
||||
|
||||
const visibleComments = useMemo(
|
||||
() => [...comments].sort((a, b) => (sort === "hot" ? b.likes - a.likes : b.id - a.id)),
|
||||
[comments, sort],
|
||||
);
|
||||
|
||||
const notify = (message: string) => {
|
||||
setToast(message);
|
||||
window.setTimeout(() => setToast(""), 2200);
|
||||
};
|
||||
|
||||
const jumpTo = (id: string) => {
|
||||
setActiveSection(id);
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
};
|
||||
|
||||
const playEpisode = (episode: Episode) => {
|
||||
if (!episode.released) return notify("该剧集尚未更新，已为你开启更新提醒");
|
||||
setSelectedEpisode(episode.id);
|
||||
notify(`正在播放：第 ${episode.id} 话 ${episode.title}`);
|
||||
};
|
||||
|
||||
const addProduct = (product: Product) => {
|
||||
setCartCount((count) => count + 1);
|
||||
notify(`已将「${product.name}」加入购物车`);
|
||||
};
|
||||
|
||||
const publishComment = () => {
|
||||
if (commentText.trim().length < 8) return notify("评论至少需要 8 个字");
|
||||
const newComment: Comment = {
|
||||
id: Date.now(),
|
||||
author: "林知夏",
|
||||
initial: "林",
|
||||
tone: "blue",
|
||||
score: commentScore,
|
||||
time: "刚刚",
|
||||
episode: `看到第 ${selectedEpisode} 话`,
|
||||
content: commentText.trim(),
|
||||
likes: 0,
|
||||
spoiler: false,
|
||||
replies: [],
|
||||
};
|
||||
setComments((current) => [newComment, ...current]);
|
||||
setCommentText("");
|
||||
setSort("new");
|
||||
notify("评论发布成功，已保存在当前浏览器");
|
||||
};
|
||||
|
||||
const toggleLike = (id: number) => {
|
||||
setLikedComments((current) => current.includes(id) ? current.filter((item) => item !== id) : [...current, id]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<header className={styles.header}>
|
||||
<Link href="/" className={styles.logo} aria-label="返回模板首页">
|
||||
<span className={styles.logoMark}>S</span>
|
||||
<span><strong>STELLAR</strong><small>ANIME ARCHIVE</small></span>
|
||||
</Link>
|
||||
<nav className={styles.primaryNav} aria-label="主导航">
|
||||
<button className={styles.currentNav} onClick={() => jumpTo("overview")}>作品</button>
|
||||
<button onClick={() => jumpTo("episodes")}>剧集</button>
|
||||
<button onClick={() => jumpTo("products")}>周边</button>
|
||||
<button onClick={() => jumpTo("comments")}>社区</button>
|
||||
</nav>
|
||||
<div className={styles.headerActions}>
|
||||
<button aria-label="搜索" onClick={() => notify("搜索面板为模板交互占位")}>⌕</button>
|
||||
<button className={styles.cartButton} aria-label={`购物车，共 ${cartCount} 件商品`} onClick={() => notify(`购物车中有 ${cartCount} 件商品`)}>
|
||||
◇<span>{cartCount}</span>
|
||||
</button>
|
||||
<span className={styles.headerAvatar}>林</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className={styles.hero} aria-labelledby="work-title">
|
||||
<div className={styles.heroImage} />
|
||||
<div className={styles.heroShade} />
|
||||
<div className={styles.heroContent}>
|
||||
<div className={styles.breadcrumb}><Link href="/">模板首页</Link><span>/</span><span>动漫作品</span><span>/</span><strong>星海回响</strong></div>
|
||||
<div className={styles.heroCopy}>
|
||||
<div className={styles.statusLine}>
|
||||
<span className={styles.onAir}><i />{work.status}</span>
|
||||
<span>{work.year}</span><span>{work.region}</span><span>{work.age}</span>
|
||||
</div>
|
||||
<p className={styles.englishTitle}>{work.titleEn}</p>
|
||||
<h1 id="work-title">{work.title}</h1>
|
||||
<p className={styles.heroSubtitle}>{work.subtitle}</p>
|
||||
<div className={styles.tags}>{work.tags.map((tag) => <span key={tag}>{tag}</span>)}</div>
|
||||
<div className={styles.heroButtons}>
|
||||
<button className={styles.playButton} onClick={() => playEpisode(animeData.episodes[selectedEpisode - 1])}><span>▶</span>续看第 {selectedEpisode} 话</button>
|
||||
<button className={favorite ? styles.favoritedButton : styles.favoriteButton} onClick={() => { setFavorite((value) => !value); notify(favorite ? "已取消追番" : "已加入追番列表"); }}>
|
||||
{favorite ? "✓ 已追番" : "+ 追番"}
|
||||
</button>
|
||||
<button className={styles.roundButton} aria-label="分享" onClick={() => notify("分享链接已复制（演示）")}>↗</button>
|
||||
</div>
|
||||
</div>
|
||||
<aside className={styles.heroRating}>
|
||||
<small>STELLAR 用户评分</small>
|
||||
<div><strong>{work.rating}</strong><span><b>★★★★★</b><small>{work.ratingCount.toLocaleString()} 人评分</small></span></div>
|
||||
<i />
|
||||
<p><span>本季排名</span><b>{work.rank}</b></p>
|
||||
</aside>
|
||||
<div className={styles.heroMetrics}>
|
||||
<div><small>总播放</small><strong>{work.watchCount}</strong></div>
|
||||
<div><small>追番人数</small><strong>{work.followCount}</strong></div>
|
||||
<div><small>当前更新</small><strong>{work.updatedEpisode}<em> / {work.episodes}</em></strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav className={styles.sectionNav} aria-label="页面内容导航">
|
||||
<div>
|
||||
{[["overview", "作品详情"], ["episodes", `剧集 ${work.updatedEpisode}/${work.episodes}`], ["products", "官方周边"], ["comments", `评论 ${comments.length}`]].map(([id, label]) => (
|
||||
<button key={id} className={activeSection === id ? styles.activeTab : ""} onClick={() => jumpTo(id)}>{label}</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className={styles.content}>
|
||||
<section id="overview" className={styles.anchorSection}>
|
||||
<div className={styles.sectionHeading}>
|
||||
<div><span>ABOUT THE SERIES</span><h2>作品详情</h2></div>
|
||||
<p>{work.copyright}</p>
|
||||
</div>
|
||||
<div className={styles.overviewGrid}>
|
||||
<article className={styles.synopsisCard}>
|
||||
<div className={styles.posterCrop} role="img" aria-label="星海回响作品海报" />
|
||||
<div className={styles.synopsisBody}>
|
||||
<span className={styles.kicker}>STORY</span>
|
||||
<h3>在没有星空的城市，<br />追寻一束跨越十二年的光。</h3>
|
||||
<p>{work.description}</p>
|
||||
<div className={styles.quote}>“我们不是为了找到答案才抬头，而是因为抬头之后，世界会变得不一样。”</div>
|
||||
</div>
|
||||
</article>
|
||||
<aside className={styles.infoCard}>
|
||||
<h3>作品信息</h3>
|
||||
<dl>
|
||||
<div><dt>动画制作</dt><dd>{work.studio}</dd></div>
|
||||
<div><dt>监督</dt><dd>{work.director}</dd></div>
|
||||
<div><dt>首播日期</dt><dd>{work.release}</dd></div>
|
||||
<div><dt>更新安排</dt><dd>{work.schedule}</dd></div>
|
||||
<div><dt>话数</dt><dd>全 {work.episodes} 话</dd></div>
|
||||
<div><dt>内容分级</dt><dd>{work.age}</dd></div>
|
||||
</dl>
|
||||
<div className={styles.notice}><span>i</span><p><strong>更新提醒</strong>{work.announcement}</p></div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="episodes" className={styles.anchorSection}>
|
||||
<div className={styles.sectionHeading}>
|
||||
<div><span>EPISODE GUIDE</span><h2>剧集列表</h2></div>
|
||||
<button className={styles.textButton} onClick={() => notify("已为你开启自动连播")}>自动连播 ○</button>
|
||||
</div>
|
||||
<div className={styles.episodeFeature}>
|
||||
<div className={styles.episodeVisual}><span>正在观看</span><button onClick={() => playEpisode(animeData.episodes[selectedEpisode - 1])}>▶</button><small>第 {selectedEpisode} 话</small></div>
|
||||
<div><span className={styles.kicker}>CONTINUE WATCHING</span><h3>第 {selectedEpisode} 话 {animeData.episodes[selectedEpisode - 1].title}</h3><p>{animeData.episodes[selectedEpisode - 1].summary}</p><div className={styles.watchProgress}><span><i style={{ width: `${animeData.episodes[selectedEpisode - 1].progress}%` }} /></span><small>{animeData.episodes[selectedEpisode - 1].progress}%</small></div></div>
|
||||
</div>
|
||||
<div className={styles.episodeGrid}>
|
||||
{animeData.episodes.map((episode) => (
|
||||
<button key={episode.id} className={`${styles.episodeCard} ${selectedEpisode === episode.id ? styles.selectedEpisode : ""} ${!episode.released ? styles.lockedEpisode : ""}`} onClick={() => playEpisode(episode)}>
|
||||
<span className={styles.episodeNumber}>{String(episode.id).padStart(2, "0")}</span>
|
||||
<span className={styles.episodeInfo}><strong>{episode.title}</strong><small>{episode.date} · {episode.duration}</small></span>
|
||||
<i>{episode.released ? "▶" : "⌕"}</i>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="products" className={styles.anchorSection}>
|
||||
<div className={styles.sectionHeading}>
|
||||
<div><span>OFFICIAL MERCHANDISE</span><h2>官方周边</h2></div>
|
||||
<button className={styles.textButton} onClick={() => notify("全部商品页为模板交互占位")}>查看全部商品 →</button>
|
||||
</div>
|
||||
<div className={styles.productBanner}><div><span>限时企划</span><h3>把星光，带回日常。</h3><p>动画官方收藏系列 · 满 299 元免运费</p></div><button onClick={() => jumpTo("products")}>浏览本期新品</button></div>
|
||||
<div className={styles.productGrid}>
|
||||
{animeData.products.map((product) => (
|
||||
<article className={styles.productCard} key={product.id}>
|
||||
<div className={`${styles.productImage} ${styles[product.imagePosition]}`}><span>{product.badge}</span><button aria-label={`收藏 ${product.name}`} onClick={() => notify(`已收藏「${product.name}」`)}>♡</button></div>
|
||||
<div className={styles.productBody}>
|
||||
<small>{product.category}</small><h3>{product.name}</h3>
|
||||
<div className={styles.productRating}><span>★ {product.rating}</span><small>{product.stock}</small></div>
|
||||
<div className={styles.productFooter}><p><strong>¥{product.price}</strong><del>¥{product.originalPrice}</del></p><button onClick={() => addProduct(product)}>加入购物车</button></div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="comments" className={styles.anchorSection}>
|
||||
<div className={styles.sectionHeading}>
|
||||
<div><span>COMMUNITY REVIEWS</span><h2>观众评论</h2></div>
|
||||
<p>友善交流，请勿发布未经标记的剧透内容</p>
|
||||
</div>
|
||||
<div className={styles.reviewSummary}>
|
||||
<div className={styles.scoreBlock}><strong>{work.rating}</strong><span>★★★★★</span><small>{work.ratingCount.toLocaleString()} 人评分</small></div>
|
||||
<div className={styles.distribution}>
|
||||
{animeData.ratingDistribution.map((row) => <div key={row.stars}><span>{row.stars} 星</span><i><b style={{ width: `${row.percent}%` }} /></i><small>{row.percent}%</small></div>)}
|
||||
</div>
|
||||
<div className={styles.reviewHighlights}><div><strong>96%</strong><small>愿意推荐</small></div><div><strong>8.8</strong><small>剧情表现</small></div><div><strong>9.6</strong><small>美术音乐</small></div></div>
|
||||
</div>
|
||||
|
||||
<div className={styles.commentLayout}>
|
||||
<div className={styles.commentMain}>
|
||||
<div className={styles.commentToolbar}><div><button className={sort === "hot" ? styles.sortActive : ""} onClick={() => setSort("hot")}>热门评论</button><button className={sort === "new" ? styles.sortActive : ""} onClick={() => setSort("new")}>最新评论</button></div><span>共 {comments.length} 条精选评论</span></div>
|
||||
<div className={styles.commentList}>
|
||||
{visibleComments.map((comment) => <CommentItem key={comment.id} comment={comment} liked={likedComments.includes(comment.id)} onLike={() => toggleLike(comment.id)} onReply={() => notify("回复编辑器为模板交互占位")} />)}
|
||||
</div>
|
||||
</div>
|
||||
<aside className={styles.composer}>
|
||||
<span className={styles.composerEyebrow}>SHARE YOUR THOUGHTS</span><h3>写下你的观后感</h3><p>你正在评论《{work.title}》第 {selectedEpisode} 话</p>
|
||||
<div className={styles.scorePicker}><span>我的评分</span><div>{[1, 2, 3, 4, 5].map((score) => <button key={score} className={score <= commentScore ? styles.starOn : ""} onClick={() => setCommentScore(score)} aria-label={`${score} 星`}>★</button>)}</div></div>
|
||||
<textarea value={commentText} onChange={(event) => setCommentText(event.target.value)} maxLength={500} placeholder="聊聊最打动你的剧情、角色或画面……" />
|
||||
<div className={styles.composerMeta}><label><input type="checkbox" /> 包含剧透</label><span>{commentText.length}/500</span></div>
|
||||
<button className={styles.publishButton} onClick={publishComment}>发布评论</button>
|
||||
<small>评论将仅保存在当前浏览器中，刷新后仍可查看。</small>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className={styles.footer}><div><span className={styles.logoMark}>S</span><p><strong>STELLAR ANIME ARCHIVE</strong><small>原创动漫详情页前端模板 · JSON 数据演示</small></p></div><Link href="/">返回 WBBR 模板首页 →</Link></footer>
|
||||
{toast && <div className={styles.toast}><span>✓</span>{toast}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CommentItem({ comment, liked, onLike, onReply }: { comment: Comment; liked: boolean; onLike: () => void; onReply: () => void }) {
|
||||
return (
|
||||
<article className={styles.commentCard}>
|
||||
<span className={`${styles.commentAvatar} ${styles[comment.tone]}`}>{comment.initial}</span>
|
||||
<div className={styles.commentBody}>
|
||||
<header><div><strong>{comment.author}</strong><span>{"★".repeat(comment.score)}<i>{"★".repeat(5 - comment.score)}</i></span></div><small>{comment.time} · {comment.episode}</small></header>
|
||||
<p>{comment.content}</p>
|
||||
<div className={styles.commentActions}><button className={liked ? styles.liked : ""} onClick={onLike}>♡ {comment.likes + (liked ? 1 : 0)}</button><button onClick={onReply}>回复</button><button>•••</button></div>
|
||||
{comment.replies.map((reply) => <div className={styles.reply} key={reply.id}><span>{reply.initial}</span><p><strong>{reply.author}</strong>{reply.content}<small>{reply.time} ♡ {reply.likes}</small></p></div>)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user