地图
This commit is contained in:
@@ -755,6 +755,19 @@ h2 {
|
||||
font-size: clamp(17px, 2vw, 21px);
|
||||
}
|
||||
|
||||
.hero-inline-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-top: 24px;
|
||||
color: #f3cf8b;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-inline-link:hover {
|
||||
color: #fffdf7;
|
||||
}
|
||||
|
||||
.back-link,
|
||||
.section-link {
|
||||
display: inline-flex;
|
||||
@@ -850,6 +863,495 @@ h2 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.map-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 82% 34%, rgba(232, 168, 76, 0.28), transparent 23%),
|
||||
linear-gradient(135deg, #1d2d2a, #355f52 58%, #456f94);
|
||||
}
|
||||
|
||||
.map-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: clamp(-80px, 2vw, 24px);
|
||||
bottom: -110px;
|
||||
width: clamp(280px, 34vw, 520px);
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid rgba(255, 253, 247, 0.12);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 0 48px rgba(255, 253, 247, 0.035),
|
||||
0 0 0 96px rgba(255, 253, 247, 0.02);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
padding-top: clamp(36px, 5vw, 68px);
|
||||
background:
|
||||
linear-gradient(rgba(55, 109, 90, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(55, 109, 90, 0.035) 1px, transparent 1px),
|
||||
var(--paper);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
|
||||
.map-section > .section-inner {
|
||||
width: min(1420px, 100%);
|
||||
}
|
||||
|
||||
.map-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(110px, 0.55fr)) minmax(260px, 1.7fr);
|
||||
align-items: stretch;
|
||||
margin-bottom: 18px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 253, 247, 0.94);
|
||||
box-shadow: 0 10px 34px rgba(39, 55, 52, 0.08);
|
||||
}
|
||||
|
||||
.map-summary > div {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
min-height: 90px;
|
||||
padding: 18px 22px;
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.map-summary strong {
|
||||
color: var(--green);
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.map-summary span {
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.map-summary > p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 20px 24px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.map-summary > p i {
|
||||
color: var(--green);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.class-map-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
|
||||
min-height: 720px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.class-map {
|
||||
position: relative;
|
||||
min-height: 720px;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(circle at 67% 22%, rgba(232, 168, 76, 0.14), transparent 24%),
|
||||
linear-gradient(rgba(55, 109, 90, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(55, 109, 90, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(145deg, #edf4ec, #f9f6e9 54%, #edf3f5);
|
||||
background-size: auto, 28px 28px, 28px 28px, auto;
|
||||
}
|
||||
|
||||
.map-caption {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 30px;
|
||||
z-index: 4;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.map-caption span {
|
||||
color: var(--ink);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.map-caption small {
|
||||
margin-top: 2px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.map-geo {
|
||||
position: absolute;
|
||||
inset: 60px 18px 24px;
|
||||
width: calc(100% - 36px);
|
||||
height: calc(100% - 84px);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.map-province {
|
||||
fill: url("#province-fill");
|
||||
stroke: rgba(55, 109, 90, 0.42);
|
||||
stroke-width: 1.05;
|
||||
stroke-linejoin: round;
|
||||
vector-effect: non-scaling-stroke;
|
||||
transition: fill 180ms ease, stroke 180ms ease;
|
||||
}
|
||||
|
||||
.map-province:hover {
|
||||
fill: #e5eee2;
|
||||
stroke: rgba(55, 109, 90, 0.72);
|
||||
}
|
||||
|
||||
.map-province.has-classmate {
|
||||
fill: #f3e4bd;
|
||||
stroke: rgba(201, 100, 82, 0.72);
|
||||
}
|
||||
|
||||
.map-source {
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
bottom: 18px;
|
||||
z-index: 4;
|
||||
margin: 0;
|
||||
color: rgba(98, 112, 111, 0.78);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.city-marker {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
animation: city-arrive 420ms ease forwards;
|
||||
animation-delay: var(--city-delay);
|
||||
}
|
||||
|
||||
@keyframes city-arrive {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.city-marker-leader {
|
||||
stroke: rgba(55, 109, 90, 0.48);
|
||||
stroke-width: 1.25;
|
||||
stroke-dasharray: 3 3;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.city-marker-halo {
|
||||
fill: rgba(255, 253, 247, 0.76);
|
||||
stroke: rgba(55, 109, 90, 0.26);
|
||||
stroke-width: 1;
|
||||
transition: fill 160ms ease, stroke 160ms ease, r 160ms ease;
|
||||
}
|
||||
|
||||
.city-marker-dot {
|
||||
fill: var(--green);
|
||||
stroke: rgba(255, 253, 247, 0.95);
|
||||
stroke-width: 3;
|
||||
filter: drop-shadow(0 6px 8px rgba(39, 55, 52, 0.26));
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
transition: fill 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.city-marker-count {
|
||||
fill: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.city-marker-name {
|
||||
fill: var(--ink);
|
||||
stroke: rgba(255, 253, 247, 0.96);
|
||||
stroke-width: 6px;
|
||||
stroke-linejoin: round;
|
||||
paint-order: stroke fill;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
pointer-events: none;
|
||||
transition: opacity 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.city-marker:hover .city-marker-dot,
|
||||
.city-marker:focus-visible .city-marker-dot,
|
||||
.city-marker.is-active .city-marker-dot {
|
||||
fill: var(--coral);
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.city-marker:hover .city-marker-halo,
|
||||
.city-marker:focus-visible .city-marker-halo,
|
||||
.city-marker.is-active .city-marker-halo {
|
||||
fill: rgba(255, 253, 247, 0.96);
|
||||
stroke: rgba(201, 100, 82, 0.58);
|
||||
r: 24px;
|
||||
}
|
||||
|
||||
.map-geo.is-dense .city-marker-name {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.map-geo.is-dense .city-marker-dot {
|
||||
r: 12px;
|
||||
}
|
||||
|
||||
.map-geo.is-dense .city-marker-halo {
|
||||
r: 17px;
|
||||
}
|
||||
|
||||
.map-geo.is-dense .city-marker-count {
|
||||
font-size: 10px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.map-geo.is-dense .city-marker:hover .city-marker-name,
|
||||
.map-geo.is-dense .city-marker:focus-visible .city-marker-name,
|
||||
.map-geo.is-dense .city-marker.is-active .city-marker-name {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.city-marker:focus-visible .city-marker-halo {
|
||||
stroke: var(--blue);
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.city-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding: clamp(24px, 4vw, 38px);
|
||||
border-left: 1px solid var(--line);
|
||||
background: rgba(255, 253, 247, 0.96);
|
||||
}
|
||||
|
||||
.city-panel-heading {
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.city-panel-heading .eyebrow {
|
||||
margin-bottom: 8px;
|
||||
color: var(--coral);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.city-panel-heading h2 {
|
||||
font-size: clamp(34px, 4vw, 48px);
|
||||
}
|
||||
|
||||
.city-panel-heading > p:last-child {
|
||||
margin: 8px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.city-people {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 22px 0;
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.map-person {
|
||||
display: grid;
|
||||
grid-template-columns: 46px minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 11px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
transition: border-color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.map-person:hover,
|
||||
.map-person:focus-visible {
|
||||
transform: translateX(3px);
|
||||
border-color: rgba(55, 109, 90, 0.42);
|
||||
}
|
||||
|
||||
.map-person-avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
linear-gradient(rgba(31, 43, 42, 0.12), rgba(31, 43, 42, 0.12)),
|
||||
var(--avatar-image, linear-gradient(135deg, var(--green), var(--sun)));
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.map-person > span:nth-child(2) {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.map-person strong,
|
||||
.map-person small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.map-person small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.map-person > i {
|
||||
color: var(--green);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.map-privacy-note {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 11px;
|
||||
align-items: start;
|
||||
margin-top: auto;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
background: var(--soft);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.map-privacy-note > i {
|
||||
margin-top: 4px;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.map-privacy-note p,
|
||||
.map-privacy-note span {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.map-privacy-note p {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.map-privacy-note strong {
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.city-directory {
|
||||
margin-top: 18px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.map-summary {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.map-summary > p {
|
||||
grid-column: 1 / -1;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.class-map-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.class-map,
|
||||
.class-map-shell {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.city-panel {
|
||||
min-height: 340px;
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.map-summary {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.map-summary > div {
|
||||
min-height: 78px;
|
||||
padding: 14px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.map-summary > div:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.map-summary strong {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.map-summary > p {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.class-map,
|
||||
.class-map-shell {
|
||||
min-height: 470px;
|
||||
}
|
||||
|
||||
.map-caption {
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.map-geo {
|
||||
inset: 52px -8% 20px;
|
||||
width: 116%;
|
||||
height: calc(100% - 72px);
|
||||
}
|
||||
|
||||
.map-source {
|
||||
left: 14px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.city-marker-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.city-panel {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.city-marker {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.data-guide {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
|
||||
|
||||
Reference in New Issue
Block a user