2000s
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
.notice-banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
padding: 10px 14px;
|
||||
color: #102033;
|
||||
font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
|
||||
background: linear-gradient(90deg, #fff7d6, #dff7ff);
|
||||
border-bottom: 1px solid rgba(16, 32, 51, 0.14);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.notice-banner.is-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.notice-banner__inner {
|
||||
width: min(100%, 1120px);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.notice-banner__badge {
|
||||
min-width: 40px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
background: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.notice-banner[data-level="warning"] .notice-banner__badge {
|
||||
background: #b45309;
|
||||
}
|
||||
|
||||
.notice-banner[data-level="error"] .notice-banner__badge {
|
||||
background: #be123c;
|
||||
}
|
||||
|
||||
.notice-banner[data-level="success"] .notice-banner__badge {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
.notice-banner__content {
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.notice-banner__title {
|
||||
margin-right: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.notice-banner__message {
|
||||
color: rgba(16, 32, 51, 0.84);
|
||||
}
|
||||
|
||||
.notice-banner__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
color: #ffffff;
|
||||
background: #075985;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-banner__link:hover {
|
||||
background: #0369a1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notice-banner__close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: #102033;
|
||||
background: rgba(16, 32, 51, 0.08);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notice-banner__close:hover {
|
||||
background: rgba(16, 32, 51, 0.14);
|
||||
}
|
||||
|
||||
body.has-notice-banner {
|
||||
padding-top: calc(var(--notice-body-pad-top, 0px) + var(--notice-banner-height, 0px) + 12px) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.notice-banner {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.notice-banner__inner {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.notice-banner__link {
|
||||
grid-column: 2 / 3;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.notice-banner__content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.notice-banner {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.has-notice-banner {
|
||||
padding-top: var(--notice-body-pad-top, 0px) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,536 @@
|
||||
:root {
|
||||
--bg: #07111f;
|
||||
--panel: rgba(9, 20, 40, 0.78);
|
||||
--panel-strong: rgba(10, 24, 46, 0.94);
|
||||
--line: rgba(103, 213, 255, 0.22);
|
||||
--line-strong: rgba(103, 213, 255, 0.48);
|
||||
--text: #edf7ff;
|
||||
--muted: #96b2d1;
|
||||
--accent: #67d5ff;
|
||||
--accent-strong: #2de2a6;
|
||||
--warning: #ffcc66;
|
||||
--font-display: "Orbitron", "Segoe UI", sans-serif;
|
||||
--font-body: "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(7, 17, 31, 0.96), rgba(10, 28, 54, 0.96)),
|
||||
repeating-linear-gradient(90deg, rgba(103, 213, 255, 0.055) 0 1px, transparent 1px 72px),
|
||||
repeating-linear-gradient(0deg, rgba(103, 213, 255, 0.045) 0 1px, transparent 1px 72px);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.notice-page {
|
||||
width: min(calc(100% - 32px), 1120px);
|
||||
margin: 0 auto;
|
||||
padding: 28px 0 56px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.brand,
|
||||
.back-link,
|
||||
.primary-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand {
|
||||
gap: 10px;
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 12px;
|
||||
color: var(--accent);
|
||||
font-family: var(--font-display);
|
||||
background: rgba(103, 213, 255, 0.08);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.back-link:hover,
|
||||
.primary-action:hover {
|
||||
border-color: var(--line-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.notice-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 280px;
|
||||
gap: 22px;
|
||||
align-items: stretch;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.status-panel,
|
||||
.notice-card,
|
||||
.side-card {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
padding: clamp(28px, 5vw, 54px);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
color: var(--accent);
|
||||
font-family: var(--font-display);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 16px;
|
||||
font-size: clamp(34px, 6vw, 64px);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
max-width: 760px;
|
||||
margin-bottom: 0;
|
||||
color: var(--muted);
|
||||
font-size: 17px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
display: flex;
|
||||
min-height: 240px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
width: max-content;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
color: #06111f;
|
||||
background: var(--warning);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-code {
|
||||
color: var(--accent);
|
||||
font-family: var(--font-display);
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-panel p {
|
||||
margin-bottom: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.notice-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 22px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.notice-card,
|
||||
.side-card {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
padding: clamp(24px, 4vw, 40px);
|
||||
}
|
||||
|
||||
.notice-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.notice-meta span,
|
||||
.info-label {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notice-meta span {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.notice-card h2,
|
||||
.side-card h2 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.notice-card p,
|
||||
.side-card p {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.info-grid div {
|
||||
min-height: 92px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.info-grid strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--accent);
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid rgba(45, 226, 166, 0.5);
|
||||
color: #06111f;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.notice-hero,
|
||||
.notice-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Light visual refresh for notice detail */
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #172033;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(236, 248, 255, 0.92), rgba(255, 255, 255, 0.96) 48%, rgba(245, 250, 255, 0.94)),
|
||||
linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(20, 184, 166, 0.035) 1px, transparent 1px);
|
||||
background-size: auto, 52px 52px, 52px 52px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
color: #2563eb;
|
||||
background: rgba(37, 99, 235, 0.07);
|
||||
border-color: rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #66758a;
|
||||
background: #ffffff;
|
||||
border-color: rgba(120, 144, 176, 0.24);
|
||||
}
|
||||
|
||||
.back-link:hover,
|
||||
.primary-action:hover {
|
||||
color: #172033;
|
||||
border-color: rgba(37, 99, 235, 0.36);
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.status-panel,
|
||||
.notice-card,
|
||||
.side-card {
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
border-color: rgba(120, 144, 176, 0.24);
|
||||
box-shadow: 0 18px 44px rgba(47, 74, 112, 0.12);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.status-code,
|
||||
code {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
.info-grid strong {
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.hero-copy p,
|
||||
.status-panel p,
|
||||
.notice-card p,
|
||||
.side-card p,
|
||||
.notice-meta span,
|
||||
.info-label {
|
||||
color: #66758a;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
color: #854d0e;
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.notice-meta span,
|
||||
.info-grid div {
|
||||
background: rgba(248, 251, 255, 0.86);
|
||||
border-color: rgba(120, 144, 176, 0.2);
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb, #0891b2);
|
||||
border-color: rgba(37, 99, 235, 0.16);
|
||||
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
|
||||
}
|
||||
|
||||
/* Youthful unified layout refresh */
|
||||
:root {
|
||||
--joy-blue: #2563eb;
|
||||
--joy-cyan: #06b6d4;
|
||||
--joy-mint: #10b981;
|
||||
--joy-coral: #fb7185;
|
||||
--joy-yellow: #facc15;
|
||||
--joy-ink: #172033;
|
||||
--joy-muted: #627187;
|
||||
--joy-line: rgba(96, 116, 148, 0.18);
|
||||
--joy-card: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
linear-gradient(128deg, rgba(255, 255, 255, 0.96) 0 34%, rgba(232, 249, 255, 0.9) 34% 58%, rgba(255, 246, 249, 0.92) 58% 100%),
|
||||
linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(16, 185, 129, 0.035) 1px, transparent 1px);
|
||||
background-size: auto, 44px 44px, 44px 44px;
|
||||
}
|
||||
|
||||
.notice-page {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, var(--joy-blue), var(--joy-coral));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
min-height: 38px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notice-hero {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.28fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.notice-layout {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.status-panel,
|
||||
.notice-card,
|
||||
.side-card {
|
||||
border-radius: 18px;
|
||||
border-color: var(--joy-line);
|
||||
background: var(--joy-card);
|
||||
box-shadow: 0 16px 34px rgba(37, 63, 101, 0.1);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
min-height: 250px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
padding: clamp(26px, 5vw, 48px);
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.notice-card,
|
||||
.side-card,
|
||||
.status-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-copy::after,
|
||||
.notice-card::after,
|
||||
.side-card::after,
|
||||
.status-panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--joy-blue), var(--joy-cyan), var(--joy-mint), var(--joy-coral));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
width: max-content;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.11), rgba(6, 182, 212, 0.11));
|
||||
color: var(--joy-blue);
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
border-top: 5px solid var(--joy-coral);
|
||||
}
|
||||
|
||||
.status-code {
|
||||
color: var(--joy-coral);
|
||||
font-size: clamp(34px, 4vw, 44px);
|
||||
}
|
||||
|
||||
.status-badge,
|
||||
.notice-meta span {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
color: #8a4b05;
|
||||
background: #fff2bf;
|
||||
}
|
||||
|
||||
.notice-meta span,
|
||||
.info-grid div {
|
||||
border-radius: 14px;
|
||||
background: #f8fbff;
|
||||
border-color: rgba(96, 116, 148, 0.12);
|
||||
}
|
||||
|
||||
.notice-card,
|
||||
.side-card {
|
||||
padding: clamp(22px, 4vw, 34px);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
min-height: 46px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, var(--joy-blue), var(--joy-cyan));
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.notice-page {
|
||||
width: min(calc(100% - 20px), 1120px);
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.status-panel,
|
||||
.notice-card,
|
||||
.side-card {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
/* ===========================================
|
||||
1. 通用响应式底座 (所有样式均需依赖)
|
||||
=========================================== */
|
||||
:root {
|
||||
--text-color: #333;
|
||||
--paper-bg: #fff;
|
||||
--wish-color: #333;
|
||||
--border-color: #ddd;
|
||||
--font-family-base: "Noto Serif SC", serif;
|
||||
--font-family-sig: "Noto Serif SC", serif; /* 默认署名字体 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f6f6f6; /* 默认外背景 */
|
||||
font-family: var(--font-family-base);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
/* 自适应容器 */
|
||||
.letter-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
min-height: 85vh;
|
||||
padding: 5% 7%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||||
background-color: var(--paper-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 手机端适配 */
|
||||
@media (max-width: 600px) {
|
||||
body { padding: 10px; }
|
||||
.letter-container { padding: 35px 20px; }
|
||||
}
|
||||
|
||||
/* 传统书信格式公共逻辑 */
|
||||
.salutation {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content p {
|
||||
text-indent: 2em; /* 首行缩进 */
|
||||
line-height: 1.8;
|
||||
text-align: justify;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.closing { margin-top: 2.5rem; }
|
||||
.wish-prefix { text-indent: 2em; margin: 0; color: var(--wish-color); }
|
||||
.wish-suffix { font-weight: bold; margin-top: 5px; color: var(--wish-color); }
|
||||
|
||||
.footer {
|
||||
text-align: right;
|
||||
margin-top: 4rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.signature {
|
||||
font-size: 1.1em;
|
||||
font-family: var(--font-family-sig);
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
2. 原始场景皮肤 (Modern, Traditional, Vintage)
|
||||
=========================================== */
|
||||
/* ... (保留你之前的定义，此处略以节省空间，直接写新的) ... */
|
||||
.theme-modern { --paper-bg: #fff; border-top: 4px solid #333; }
|
||||
.theme-traditional { --paper-bg: #fdfaf2; writing-mode: vertical-rl; height: 650px; }
|
||||
@media (max-width: 600px) { .theme-traditional { writing-mode: horizontal-tb; height: auto; } }
|
||||
.theme-vintage { --paper-bg: #fff; border: 2px solid #b71c1c; background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(183, 28, 28, 0.1) 31px, rgba(183, 28, 28, 0.1) 32px); line-height: 32px; --text-color: #b71c1c; --wish-color: #b71c1c; }
|
||||
|
||||
|
||||
/* ===========================================
|
||||
3. [新增] 青春与多样场景皮肤
|
||||
=========================================== */
|
||||
|
||||
/* --- A. 青春派对 (Youthful) --- */
|
||||
/* 特点：明亮多彩、活力、柔和 */
|
||||
.theme-youth {
|
||||
--paper-bg: #fff;
|
||||
--text-color: #4a4a4a;
|
||||
--wish-color: #ff6b6b; /* 鲜艳的颜色 */
|
||||
--border-color: #ffe0e0;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 使用现代无衬线字体 */
|
||||
|
||||
border-radius: 15px; /* 圆角增加亲和力 */
|
||||
border: 3px solid #ffe0e0;
|
||||
}
|
||||
|
||||
/* 装饰：顶部和底部加点彩色条纹 */
|
||||
.theme-youth::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; height: 8px;
|
||||
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9f43);
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
|
||||
.theme-youth .salutation { color: #222; }
|
||||
.theme-youth .content p { text-indent: 0; text-align: left; background-color: #fcfcfc; padding: 10px; border-radius: 8px; margin-bottom: 1.2rem; } /* 类似气泡感 */
|
||||
.theme-youth .wish-prefix { text-indent: 0; padding-left: 1rem; } /* 青春风不一定强制缩进 */
|
||||
.theme-youth .wish-suffix { font-weight: 800; font-size: 1.1rem; }
|
||||
.theme-youth .footer { color: #888; }
|
||||
.theme-youth .signature { color: #333; font-weight: bold; }
|
||||
|
||||
|
||||
/* --- B. 青葱校园 (Campus) --- */
|
||||
/* 特点：数学格子纸、怀旧、清爽蓝调 */
|
||||
.theme-campus {
|
||||
--paper-bg: #fdfdfd;
|
||||
--text-color: #3e3e3e;
|
||||
--wish-color: #2980b9; /* 校园蓝 */
|
||||
--border-color: #87ceeb;
|
||||
font-family: "SimSun", serif; /* 怀旧宋体 */
|
||||
|
||||
/* 模拟蓝格子纸 */
|
||||
background-image:
|
||||
linear-gradient(rgba(135, 206, 235, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(135, 206, 235, 0.3) 1px, transparent 1px);
|
||||
background-size: 25px 25px; /* 格子大小 */
|
||||
}
|
||||
|
||||
/* 顶部加一个类似书签或校徽的圆 */
|
||||
.theme-campus::after {
|
||||
content: "CAMPUS";
|
||||
position: absolute;
|
||||
top: -15px; right: 30px;
|
||||
background-color: #2980b9;
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.theme-campus .content p { line-height: 1.6; text-indent: 2em; }
|
||||
.theme-campus .closing { border-top: 1px dashed rgba(135, 206, 235, 0.5); padding-top: 1rem; }
|
||||
.theme-campus .footer .date { color: #888; }
|
||||
|
||||
|
||||
/* --- C. 极简和风 (Wabi-Sabi / Minimalist) --- */
|
||||
/* 特点：淡雅、素净、极低对比度、高端商务或长辈 */
|
||||
.theme-wabi {
|
||||
--paper-bg: #fafafa;
|
||||
--text-color: #555;
|
||||
--wish-color: #777;
|
||||
--border-color: transparent; /* 无边框 */
|
||||
font-family: "Source Han Serif SC", serif; /* 高质量宋体 */
|
||||
|
||||
background-color: #fff;
|
||||
padding: 8% 10%; /* 更宽松的内边距 */
|
||||
border-radius: 0;
|
||||
box-shadow: none; /* 去掉阴影，极度扁平 */
|
||||
}
|
||||
|
||||
/* 手机端去掉过于宽松的内边距 */
|
||||
@media (max-width: 600px) {
|
||||
.theme-wabi { padding: 40px 20px; }
|
||||
}
|
||||
|
||||
/* 装饰：只在底部加一条极淡的灰线 */
|
||||
.theme-wabi .footer {
|
||||
text-align: right;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.theme-wabi .salutation { font-weight: normal; font-size: 1.2rem; color: #333; }
|
||||
.theme-wabi .content p { text-indent: 2em; line-height: 2; color: #666; font-size: 0.95rem; }
|
||||
.theme-wabi .wish-suffix { font-weight: normal; color: #777; }
|
||||
.theme-wabi .signature { font-family: "Zhi Mang Xing", cursive; font-size: 1.8rem; color: #333; } /* 使用Google Font书法字体 */
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,95 @@
|
||||
body {
|
||||
font-family: Arial, "Microsoft YaHei";
|
||||
margin: 0;
|
||||
color: #172033;
|
||||
background:
|
||||
linear-gradient(128deg, rgba(255, 255, 255, 0.96) 0 34%, rgba(232, 249, 255, 0.9) 34% 58%, rgba(255, 246, 249, 0.92) 58% 100%);
|
||||
}
|
||||
|
||||
/* ===== A4 容器 ===== */
|
||||
.page {
|
||||
width: 210mm;
|
||||
min-height: 297mm;
|
||||
margin: 18px auto;
|
||||
padding: 20mm;
|
||||
position: relative;
|
||||
background: white;
|
||||
box-shadow: 0 18px 44px rgba(47, 74, 112, 0.12);
|
||||
border-top: 5px solid #2563eb;
|
||||
}
|
||||
|
||||
/* ===== 水印 ===== */
|
||||
.watermark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-30deg);
|
||||
font-size: 50px;
|
||||
color: rgba(0, 0, 0, 0.08);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== 标题 ===== */
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: #172033;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ===== 信息表格 ===== */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border: 1px solid #dbe4ef;
|
||||
padding: 11px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 25%;
|
||||
color: #66758a;
|
||||
background: linear-gradient(135deg, #f3f8ff, #f8fbff);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 20mm;
|
||||
left: 20mm;
|
||||
right: 20mm;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ===== 打印优化 ===== */
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin: auto;
|
||||
box-shadow: none;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user