KivotosRailway/website
1
0
Fork 0
mirror of https://github.com/KivotosRailway/website.git synced 2026-11-03 11:06:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

缩减图片尺寸，优化界面

Browse Source
This commit is contained in:
MisakaAkio
2026-09-25 06:14:59 +08:00
parent e0e6846359
commit d3bbe95aa5
50 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/city/page.tsx
+1 -1
View File
@@ -11,5 +11,5 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
export default async function CityPage({ params }: { params: Promise<{ locale: string }> }) {
const { locale } = await params;
if (!isLocale(locale)) notFound();
return <SimpleTitlePage locale={locale} title={getLocaleMessages(locale).header.nav[3]} image="/city/city-hero.png" imagePosition="47% 24%" />;
return <SimpleTitlePage locale={locale} title={getLocaleMessages(locale).header.nav[3]} image="/city/city-hero.webp" imagePosition="47% 24%" />;
}
src/app/[locale]/join-us/page.tsx
+1 -1
View File
@@ -12,5 +12,5 @@ export default async function JoinUsPage({ params }: { params: Promise<{ locale:
const { locale } = await params;
if (!isLocale(locale)) notFound();
const messages = getLocaleMessages(locale);
return <SimpleTitlePage locale={locale} title={messages.footer.columns[1].links[2]} image="/pages/join-hero.png" imagePosition="center" />;
return <SimpleTitlePage locale={locale} title={messages.footer.columns[1].links[2]} image="/pages/join-hero.webp" imagePosition="center" />;
}
src/app/[locale]/railway/page.tsx
+1 -1
View File
@@ -11,5 +11,5 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
export default async function RailwayPage({ params }: { params: Promise<{ locale: string }> }) {
const { locale } = await params;
if (!isLocale(locale)) notFound();
return <SimpleTitlePage locale={locale} title={getLocaleMessages(locale).header.nav[2]} image="/pages/railway-hero.png" imagePosition="47% 24%" />;
return <SimpleTitlePage locale={locale} title={getLocaleMessages(locale).header.nav[2]} image="/pages/railway-hero.webp" imagePosition="47% 24%" />;
}
src/app/globals.css
+9 -9
View File
@@ -36,7 +36,7 @@ a { color: inherit; text-decoration: none; }
.home-page { padding: 0 0 48px; }
.home-hero, .home-stories, .home-news, .home-collage, .home-actions { width: min(1200px, calc(100% - 32px)); margin-right: auto; margin-left: auto; }
.home-hero { position: relative; height: 560px; overflow: hidden; border-radius: 15px; isolation: isolate; color: #fff; background: #173c59; }
.hero-scene, .hero-shade { position: absolute; inset: 0; }.hero-scene { background: url("/home-hero-scene.png") center / cover no-repeat; }
.hero-scene, .hero-shade { position: absolute; inset: 0; }.hero-scene { background: url("/home-hero-scene.webp") center / cover no-repeat; }
.hero-city { position: absolute; bottom: 0; width: 34%; height: 70%; opacity: .82; background: repeating-linear-gradient(90deg, #244052 0 17px, #98b1ba 18px 21px, #1b3347 22px 42px); }.hero-city-left { left: -7%; transform: skewY(8deg); }.hero-city-right { right: -6%; height: 61%; background: repeating-linear-gradient(90deg, #405d70 0 29px, #b3c1c4 30px 33px, #314c60 34px 58px); transform: skewY(-4deg); }
.hero-overpass { position: absolute; right: 14%; bottom: 21%; width: 65%; height: 15%; border-top: 10px solid #d9dedb; border-bottom: 12px solid #6e8284; transform: skewY(-7deg); box-shadow: 0 14px 0 rgba(25,48,57,.35); }
.hero-track { position: absolute; bottom: -18%; left: 17%; width: 70%; height: 55%; border-top: 10px solid #dee4e1; border-right: 10px solid #c5cecb; transform-origin: bottom left; }.hero-track-one { transform: skewX(-31deg) rotate(-5deg); }.hero-track-two { bottom: -25%; left: 36%; width: 62%; opacity: .75; transform: skewX(-31deg) rotate(-5deg); }
@@ -47,8 +47,8 @@ a { color: inherit; text-decoration: none; }
.home-stories { display: flex; flex-direction: column; gap: 100px; margin-top: 100px; }
.home-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 462px; overflow: hidden; border-radius: 10px; background: var(--home-story-surface); color: var(--ink); }
.home-story-image { min-height: 462px; background: center / cover no-repeat; }
.home-story-image--railway { background-image: url("/home/rail-network.png"); }
.home-story-image--city { background-image: url("/home/city-skyline.png"); }
.home-story-image--railway { background-image: url("/home/rail-network.webp"); }
.home-story-image--city { background-image: url("/home/city-skyline.webp"); }
.home-story-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 72px; }
.home-story-copy h2 { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
.home-story-copy p { margin: 14px 0 0; font-size: 25px; line-height: 1.8; letter-spacing: -.04em; }
@@ -69,11 +69,11 @@ a { color: inherit; text-decoration: none; }
.news-card time { color: var(--muted); font-size: 16px; }
.home-collage { position: relative; height: 648px; margin-top: 100px; }
.home-collage-tile { position: absolute; border-radius: 13px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.home-collage-wide { top: 0; left: 0; width: 41.4%; height: 359px; background-image: url("/home/collage-1.png"); }
.home-collage-medium { top: 0; left: 42.57%; width: 28.87%; height: 359px; background-image: url("/home/collage-2.png"); }
.home-collage-small { top: 376px; left: 27.28%; width: 44.3%; height: 272px; background-image: url("/home/collage-3.png"); }
.home-collage-bottom { top: 376px; left: 0; width: 25.83%; height: 272px; background-image: url("/home/collage-4.png"); }
.home-collage-tall { top: 0; right: 0; width: 27.1%; height: 648px; background-image: url("/home/collage-5.png"); }
.home-collage-wide { top: 0; left: 0; width: 41.4%; height: 359px; background-image: url("/home/collage-1.webp"); }
.home-collage-medium { top: 0; left: 42.57%; width: 28.87%; height: 359px; background-image: url("/home/collage-2.webp"); }
.home-collage-small { top: 376px; left: 27.28%; width: 44.3%; height: 272px; background-image: url("/home/collage-3.webp"); }
.home-collage-bottom { top: 376px; left: 0; width: 25.83%; height: 272px; background-image: url("/home/collage-4.webp"); }
.home-collage-tall { top: 0; right: 0; width: 27.1%; height: 648px; background-image: url("/home/collage-5.webp"); }
.page-action-cards { display: grid; width: min(1200px, calc(100% - 32px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; margin-right: auto; margin-left: auto; padding-bottom: 121px; }
.home-actions { margin-top: 100px; }
.page-action-card { display: block; min-width: 0; color: var(--ink); }
@@ -92,7 +92,7 @@ a { color: inherit; text-decoration: none; }
.about-introduction-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 80px; background: #535360; color: #fff; }
.about-introduction-copy p { align-self: flex-start; margin: 0 0 39px; padding: 4px 10px; background: #1267d8; color: #fff; font-size: 18px; font-weight: 700; line-height: 28px; }
.about-introduction-copy h2 { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.28; letter-spacing: -.04em; }
.about-introduction-image { min-height: 512px; background: url("/pages/about-intro-overlay.png") center / cover no-repeat; }
.about-introduction-image { min-height: 512px; background: url("/pages/about-intro-overlay.webp") center / cover no-repeat; }
.about-action-cards { margin-top: 50px; }
.news-page { padding: 30px 0 60px; }
src/components/about/about-page.tsx
+3 -3
View File
@@ -18,7 +18,7 @@ export function AboutPage({ locale }: { locale: Locale }) {
return (
<>
<main className="title-page about-page">
<PageTitleHero title={title} image="/pages/about-hero.png" imagePosition="center 52%" />
<PageTitleHero title={title} image="/pages/about-hero.webp" imagePosition="center 52%" />
<section className="about-introduction" aria-labelledby="about-introduction-title">
<div className="about-introduction-copy">
@@ -33,8 +33,8 @@ export function AboutPage({ locale }: { locale: Locale }) {
label={messages.footer.columns[1].title}
className="about-action-cards"
items={[
{ href: "/members", image: "/home/about-card.png", label: messages.footer.columns[1].links[1] },
{ href: "/join-us", image: "/home/join-card.png", label: messages.footer.columns[1].links[2] },
{ href: "/members", image: "/home/about-card.webp", label: messages.footer.columns[1].links[1] },
{ href: "/join-us", image: "/pages/join-hero.webp", label: messages.footer.columns[1].links[2] },
]}
/>
</main>
src/components/home/home-page-content.tsx
+2 -2
View File
@@ -133,8 +133,8 @@ export function HomePageContent({ newsByLocale }: { newsByLocale: Record<Locale,
label={t.common.siteTitle}
className="home-actions"
items={[
{ href: "/about", image: "/home/about-card.png", label: t.footer.columns[1].title },
{ href: "/join-us", image: "/home/join-card.png", label: t.footer.columns[1].links[2] },
{ href: "/about", image: "/home/about-card.webp", label: t.footer.columns[1].title },
{ href: "/join-us", image: "/pages/join-hero.webp", label: t.footer.columns[1].links[2] },
]}
/>
</main>
src/components/links/friendly-links-page.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export function FriendlyLinksPage({ locale }: { locale: Locale }) {
return (
<>
<main className="title-page friendly-links-page">
<PageTitleHero title={messages.footer.legal[2]} image="/links/friendly-links-hero.png" imagePosition="center 28.2%" />
<PageTitleHero title={messages.footer.legal[2]} image="/links/friendly-links-hero.webp" imagePosition="center 28.2%" />
<div className="friendly-links-content">
{linkSections.map((section) => (
<section className="friendly-links-section" key={section.id} aria-labelledby={`friendly-links-${section.id}`}>
src/components/members/members-page.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export function MembersPage({ locale }: { locale: Locale }) {
return (
<>
<main className="title-page members-page">
<PageTitleHero title={pageTitle} image="/members/members-hero.png" imagePosition="center 47%" />
<PageTitleHero title={pageTitle} image="/members/members-hero.webp" imagePosition="center 47%" />
<div className="members-sections">
{memberData.sections.map((section) => (
<section className="member-section" key={section.id} aria-labelledby={`members-${section.id}`}>
src/components/policy/policy-page-content.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function PolicyPageContent({ catalog }: { catalog: PolicyCatalog }) {
return (
<>
<main className="title-page policy-page">
<PageTitleHero title={document.title} image="/policy-hero.png" />
<PageTitleHero title={document.title} image="/policy-hero.webp" />
<article className="policy-card">
{isTranslated && (
<div className="news-detail-ai-banner" aria-label="AI translated content">
src/data/members.json
+2 -2
View File
@@ -24,7 +24,7 @@
{
"name": "IF-Chan",
"role": "服主&主要出资者",
"avatar": "/icon/avatar/if-chan.png",
"avatar": "/icon/avatar/if-chan.webp",
"url": "https://if-chan.mika.vin/",
"i18n": {
"name": {
@@ -58,7 +58,7 @@
{
"name": "yiranxiaoxiong",
"role": "资源包制作者",
"avatar": "/icon/avatar/yiranxiaoxiong.jpg",
"avatar": "/icon/avatar/yiranxiaoxiong.webp",
"url": "https://space.bilibili.com/1754428275",
"i18n": {
"name": {