家谱现有接口调试50%
This commit is contained in:
rain
@@ -0,0 +1,187 @@
|
||||
.about-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.about-tags {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-tags span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.about-tags span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.about-seal {
|
||||
position: relative;
|
||||
min-height: 260px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(155deg, var(--green-dark), var(--green));
|
||||
}
|
||||
|
||||
.about-seal:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .34;
|
||||
}
|
||||
|
||||
.seal-orb {
|
||||
position: absolute;
|
||||
right: 76px;
|
||||
top: 40px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,.16);
|
||||
box-shadow: 0 0 40px rgba(255,255,255,.1);
|
||||
animation: sealPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.about-seal span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: rgba(255,255,255,.94);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
transition: transform .24s ease, background .24s ease;
|
||||
}
|
||||
|
||||
.about-seal:hover span {
|
||||
transform: rotate(-8deg) scale(1.08);
|
||||
}
|
||||
|
||||
.about-seal p {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0;
|
||||
color: rgba(255,255,255,.84);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.values-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.values-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.value-card {
|
||||
min-height: 190px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.value-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -42%;
|
||||
top: 0;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .56s ease;
|
||||
}
|
||||
|
||||
.value-card:hover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #f7e4dc;
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
transition: transform .26s ease, background .26s ease, color .26s ease;
|
||||
}
|
||||
|
||||
.value-card:hover .value-icon {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
transform: rotate(-6deg) scale(1.08);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes sealPulse {
|
||||
0%, 100% { opacity: .55; transform: scale(.92); }
|
||||
50% { opacity: .9; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
.app-hero .container {
|
||||
min-height: 500px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.app-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.app-stats span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.app-stats span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.app-shot-wrap {
|
||||
position: relative;
|
||||
min-height: 390px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 18% 20%, rgba(200,59,50,.12), transparent 24%),
|
||||
radial-gradient(circle at 80% 24%, rgba(71,111,99,.16), transparent 30%),
|
||||
linear-gradient(135deg, #f7efe2, #edf4ef);
|
||||
}
|
||||
|
||||
.app-shot-wrap:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 22px;
|
||||
border: 1px solid rgba(224, 211, 189, .62);
|
||||
border-radius: 22px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-orbit {
|
||||
position: absolute;
|
||||
right: 64px;
|
||||
top: 44px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 50%;
|
||||
background: rgba(196, 146, 69, .18);
|
||||
animation: appOrbit 4.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.phone-shot {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 185px;
|
||||
height: 380px;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
border: 8px solid #252b28;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 26px 60px rgba(33, 28, 22, .2);
|
||||
transition: transform .3s ease, box-shadow .3s ease;
|
||||
}
|
||||
|
||||
.phone-shot.first {
|
||||
animation: phoneFloatA 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.phone-shot.second {
|
||||
transform: translateY(28px);
|
||||
animation: phoneFloatB 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.app-shot-wrap:hover .phone-shot {
|
||||
box-shadow: 0 34px 70px rgba(33, 28, 22, .26);
|
||||
}
|
||||
|
||||
.app-feature-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-feature-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.app-feature-card {
|
||||
min-height: 190px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-feature-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -42%;
|
||||
top: 0;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .56s ease;
|
||||
}
|
||||
|
||||
.app-feature-card:hover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #f7e4dc;
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
transition: transform .26s ease, background .26s ease, color .26s ease;
|
||||
}
|
||||
|
||||
.app-feature-card:hover .app-icon {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
transform: rotate(-6deg) scale(1.08);
|
||||
}
|
||||
|
||||
.app-promotion-section {
|
||||
/* 应用推广列表承载后端推广内容，不在 JS 中写样式 */
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.promotion-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.promotion-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffaf0;
|
||||
box-shadow: 0 18px 42px rgba(57, 48, 36, .08);
|
||||
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
|
||||
}
|
||||
|
||||
.promotion-card:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 24px 54px rgba(57, 48, 36, .12);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.promotion-card img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
background: #f3eadc;
|
||||
}
|
||||
|
||||
.promotion-card div {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.promotion-card h3 {
|
||||
margin-bottom: 8px;
|
||||
color: var(--ink);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.promotion-card p {
|
||||
margin: 0 0 12px;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.promotion-card span {
|
||||
color: var(--red);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes phoneFloatA {
|
||||
0%, 100% { transform: translateY(0) rotate(-1deg); }
|
||||
50% { transform: translateY(-8px) rotate(1deg); }
|
||||
}
|
||||
|
||||
@keyframes phoneFloatB {
|
||||
0%, 100% { transform: translateY(28px) rotate(1deg); }
|
||||
50% { transform: translateY(18px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
@keyframes appOrbit {
|
||||
0%, 100% { opacity: .5; transform: scale(.92); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
.phone-shot.second { display: none; }
|
||||
.promotion-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
.article-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-meta span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.article-cover-detail {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 72% 24%, rgba(255,255,255,.35) 0 9%, transparent 10%),
|
||||
linear-gradient(135deg, #e7c89e, #b94135 48%, #143d57);
|
||||
}
|
||||
|
||||
.article-cover-detail:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -40%;
|
||||
top: 0;
|
||||
width: 34%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .58s ease;
|
||||
}
|
||||
|
||||
.article-cover-detail:hover:after { left: 112%; }
|
||||
|
||||
.article-cover-detail span {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: rgba(255,253,248,.94);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.article-cover-detail p {
|
||||
margin: 18px 0 0;
|
||||
color: rgba(255,255,255,.9);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.article-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 820px) 300px;
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.article-content,
|
||||
.article-side {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255,253,248,.82);
|
||||
box-shadow: 0 20px 54px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.article-content {
|
||||
padding: 42px;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
color: #5f665f;
|
||||
font-size: 18px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.article-content h2 {
|
||||
margin-top: 34px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.article-side {
|
||||
position: sticky;
|
||||
top: 108px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.article-side a {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
color: #6f4a37;
|
||||
background: #fbf7ed;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.article-side a:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover { --lift: -6px; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.article-layout { grid-template-columns: 1fr; }
|
||||
.article-side { position: static; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
.article-content { padding: 28px; }
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
.create-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.create-tags {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.create-tags span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.create-tags span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.process-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.process-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(196,146,69,.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(196,146,69,.06) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.process-card h3,
|
||||
.process-card .step-list {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.process-orb {
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
top: -80px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 62%);
|
||||
animation: createPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.step-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.step-list p {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
transition: transform .22s ease, color .22s ease;
|
||||
}
|
||||
|
||||
.step-list p:hover {
|
||||
color: var(--green-dark);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.step-list b {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
flex: 0 0 auto;
|
||||
box-shadow: 0 12px 28px rgba(71, 111, 99, .18);
|
||||
transition: transform .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.step-list p:hover b {
|
||||
background: var(--red);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.create-form-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.create-form-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.create-form {
|
||||
max-width: 720px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 36px;
|
||||
}
|
||||
|
||||
.form-ornament {
|
||||
position: absolute;
|
||||
right: -82px;
|
||||
top: -88px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(71, 111, 99, .12), transparent 66%);
|
||||
}
|
||||
|
||||
.create-form h2,
|
||||
.create-form .form-note,
|
||||
.create-form .form-grid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-note {
|
||||
margin-bottom: 22px;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.create-form .input,
|
||||
.create-form textarea {
|
||||
transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease;
|
||||
}
|
||||
|
||||
.create-region-picker {
|
||||
/* 创建家谱页地区选择器占满表单宽度，编码通过隐藏字段提交 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.create-form .input:focus,
|
||||
.create-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgba(200, 59, 50, .62);
|
||||
background: #fffdf8;
|
||||
box-shadow: 0 0 0 4px rgba(200, 59, 50, .08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes createPulse {
|
||||
0%, 100% { opacity: .5; transform: scale(.92); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
.create-region-picker { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
.culture-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.culture-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.culture-stats span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.culture-stats span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.culture-quote {
|
||||
position: relative;
|
||||
min-height: 260px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(33,63,56,.18), rgba(33,63,56,.86)),
|
||||
linear-gradient(135deg, #476f63, #c49245 50%, #c83b32);
|
||||
}
|
||||
|
||||
.culture-quote:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .34;
|
||||
}
|
||||
|
||||
.quote-moon {
|
||||
position: absolute;
|
||||
right: 72px;
|
||||
top: 34px;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,.32);
|
||||
box-shadow: 0 0 34px rgba(255,255,255,.12);
|
||||
animation: moonFloat 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.culture-quote span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: rgba(255,255,255,.94);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
transition: transform .24s ease, background .24s ease;
|
||||
}
|
||||
|
||||
.culture-quote:hover span {
|
||||
transform: rotate(-8deg) scale(1.08);
|
||||
}
|
||||
|
||||
.culture-quote p {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0;
|
||||
color: rgba(255,255,255,.86);
|
||||
font-size: 22px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.article-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.article-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 18px 48px rgba(57, 48, 36, .07);
|
||||
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 24px 60px rgba(57, 48, 36, .11);
|
||||
}
|
||||
|
||||
.article-cover {
|
||||
position: relative;
|
||||
height: 190px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 74% 28%, rgba(255,255,255,.7) 0 8%, transparent 9%),
|
||||
linear-gradient(135deg, #e7c89e, #b94135 48%, #143d57);
|
||||
}
|
||||
|
||||
.article-cover:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -42%;
|
||||
top: 0;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .58s ease;
|
||||
}
|
||||
|
||||
.article-card:hover .article-cover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.article-cover span {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
bottom: 20px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--green-dark);
|
||||
background: rgba(255,253,248,.86);
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.article-card:nth-child(2) .article-cover {
|
||||
background: linear-gradient(135deg, #dfd1b5, #6b7f70 48%, #26302c);
|
||||
}
|
||||
|
||||
.article-card:nth-child(3) .article-cover {
|
||||
background: linear-gradient(135deg, #f0d8ac, #c49245 45%, #7d342d);
|
||||
}
|
||||
|
||||
.article-body { padding: 24px; }
|
||||
.article-body h3 { transition: color .22s ease; }
|
||||
.article-card:hover .article-body h3 { color: var(--red); }
|
||||
.article-body p { color: var(--muted); line-height: 1.75; }
|
||||
.article-body span { color: #9a8f82; font-size: 14px; }
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes moonFloat {
|
||||
0%, 100% { transform: translateY(0) scale(1); opacity: .72; }
|
||||
50% { transform: translateY(-8px) scale(1.04); opacity: .92; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.download-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.qr-card {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
padding: 16px;
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(90deg, var(--green) 12px, transparent 12px) 0 0 / 32px 32px,
|
||||
linear-gradient(var(--green) 12px, transparent 12px) 0 0 / 32px 32px,
|
||||
#fffdf8;
|
||||
border: 1px solid var(--line);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow: inset 0 0 0 12px #fffdf8;
|
||||
}
|
||||
|
||||
.qr-box span {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.qr-card p,
|
||||
.download-card p {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
|
||||
}
|
||||
|
||||
.download-card:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover { --lift: -6px; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
.page-family-detail [data-family-detail].is-loading {
|
||||
/* 详情接口加载时只改变透明度，具体状态由公共 is-loading 类控制 */
|
||||
opacity: .82;
|
||||
}
|
||||
|
||||
.detail-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.family-summary {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 24px;
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(33,63,56,.18), rgba(33,63,56,.88)),
|
||||
linear-gradient(135deg, #476f63, #c49245 52%, #8f4634);
|
||||
}
|
||||
|
||||
.family-summary:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
.family-summary > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.summary-badge {
|
||||
width: fit-content;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
color: var(--green-dark);
|
||||
background: rgba(255,253,248,.88);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
/* 接口统计数据会替换这里的四个格子，固定列数避免加载后跳动 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-grid span {
|
||||
min-height: 84px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(255,255,255,.13);
|
||||
border: 1px solid rgba(255,255,255,.18);
|
||||
}
|
||||
|
||||
.summary-grid b {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
/* 详情页侧栏和正文为本页独有布局，不放入公共样式 */
|
||||
display: grid;
|
||||
grid-template-columns: 330px 1fr;
|
||||
gap: 26px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.detail-panel,
|
||||
.content-card,
|
||||
.mini-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255,253,248,.78);
|
||||
box-shadow: 0 20px 54px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
padding: 26px;
|
||||
position: sticky;
|
||||
top: 108px;
|
||||
}
|
||||
|
||||
.detail-panel p,
|
||||
.content-card p,
|
||||
.mini-card p {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-main {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.mini-card {
|
||||
min-height: 170px;
|
||||
padding: 24px;
|
||||
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
|
||||
}
|
||||
|
||||
.mini-card:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 24px 60px rgba(57, 48, 36, .11);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover { --lift: -6px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.detail-layout { grid-template-columns: 1fr; }
|
||||
.detail-panel { position: static; }
|
||||
.summary-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/* 找回密码页只保留单页装饰，公共认证卡片样式在 public.css */
|
||||
.recover-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recover-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -80px;
|
||||
top: -90px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 64%);
|
||||
}
|
||||
|
||||
.recover-card > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.code-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
.page-genealogy {
|
||||
background: #fbf7ed;
|
||||
}
|
||||
|
||||
.genealogy-hero .container {
|
||||
min-height: 470px;
|
||||
padding-top: 76px;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 136px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.genealogy-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 18px;
|
||||
background: rgba(255,253,248,.74);
|
||||
box-shadow: 0 16px 36px rgba(72, 57, 38, .07);
|
||||
}
|
||||
|
||||
.genealogy-stats div {
|
||||
min-width: 118px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.genealogy-stats div + div {
|
||||
border-left: 1px solid rgba(218, 201, 174, .78);
|
||||
}
|
||||
|
||||
.genealogy-stats strong {
|
||||
display: block;
|
||||
color: var(--green);
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.genealogy-stats span {
|
||||
color: #6d766f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tree-preview {
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255,253,248,.95), rgba(255,253,248,.78)),
|
||||
radial-gradient(circle at 78% 22%, rgba(196,146,69,.2), transparent 28%);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.tree-glow {
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
top: -80px;
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 62%);
|
||||
animation: treePulse 4.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.tree-row {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tree-row span {
|
||||
min-width: 110px;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid #dac9ae;
|
||||
border-radius: 14px;
|
||||
text-align: center;
|
||||
color: var(--green-dark);
|
||||
background: rgba(255,250,241,.9);
|
||||
box-shadow: 0 12px 28px rgba(69, 53, 35, .06);
|
||||
font-weight: 800;
|
||||
transition: transform .24s ease, color .24s ease, background .24s ease, box-shadow .24s ease;
|
||||
}
|
||||
|
||||
.tree-preview:hover .tree-row span {
|
||||
animation: nodeFloat 1.9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.tree-row span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
box-shadow: 0 16px 32px rgba(71, 111, 99, .22);
|
||||
}
|
||||
|
||||
.tree-row.branch span:nth-child(2) { animation-delay: .08s; }
|
||||
.tree-row.branch span:nth-child(3) { animation-delay: .16s; }
|
||||
.tree-row.generation span:nth-child(2) { animation-delay: .08s; }
|
||||
.tree-row.generation span:nth-child(3) { animation-delay: .16s; }
|
||||
.tree-row.generation span:nth-child(4) { animation-delay: .24s; }
|
||||
|
||||
.tree-line {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(360px, 70%);
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(90deg, transparent, rgba(196, 146, 69, .5), transparent);
|
||||
}
|
||||
|
||||
.tree-line.short {
|
||||
width: min(500px, 86%);
|
||||
}
|
||||
|
||||
.capability-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.capability-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 210px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -40%;
|
||||
top: 0;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .56s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover:after {
|
||||
left: 110%;
|
||||
}
|
||||
|
||||
.icon-word {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #f7e4dc;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
transition: transform .26s ease, background .26s ease, color .26s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover .icon-word {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
transform: rotate(-6deg) scale(1.08);
|
||||
}
|
||||
|
||||
.coedit-section {
|
||||
background:
|
||||
radial-gradient(circle at 18% 20%, rgba(200, 59, 50, .08), transparent 24%),
|
||||
#f7efe2;
|
||||
}
|
||||
|
||||
.coedit-card {
|
||||
min-height: 260px;
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.coedit-card .btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.process-card {
|
||||
min-height: 260px;
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.step-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.step-list p {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.step-list b {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
flex: 0 0 auto;
|
||||
box-shadow: 0 12px 28px rgba(71, 111, 99, .18);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes nodeFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
@keyframes treePulse {
|
||||
0%, 100% { opacity: .5; transform: scale(.92); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
.genealogy-stats { flex-direction: column; }
|
||||
.genealogy-stats div + div { border-left: 0; border-top: 1px solid rgba(218, 201, 174, .78); }
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
.help-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.help-tags {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.help-tags span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.help-tags span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.help-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.help-card:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(196,146,69,.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(196,146,69,.06) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.help-card h3,
|
||||
.help-card p,
|
||||
.help-card .btn,
|
||||
.help-icon {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.help-orb {
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
top: -80px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 62%);
|
||||
animation: helpPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 14px 32px rgba(71, 111, 99, .2);
|
||||
transition: transform .26s ease, background .26s ease;
|
||||
}
|
||||
|
||||
.help-card:hover .help-icon {
|
||||
background: var(--red);
|
||||
transform: rotate(-8deg) scale(1.08);
|
||||
}
|
||||
|
||||
.faq-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.faq-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
/* 帮助文章接口会替换 FAQ 内容，固定列表容器宽度避免加载后跳动 */
|
||||
position: relative;
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.faq-list details {
|
||||
padding: 22px 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: #fffdf8;
|
||||
box-shadow: 0 12px 34px rgba(57, 48, 36, .06);
|
||||
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
|
||||
}
|
||||
|
||||
.faq-list.is-loading {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.faq-list details:hover,
|
||||
.faq-list details[open] {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 22px 54px rgba(57, 48, 36, .1);
|
||||
}
|
||||
|
||||
.faq-list summary {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: var(--ink);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
list-style: none;
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.faq-list summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-list summary:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-left: 10px solid var(--green-dark);
|
||||
transition: transform .24s ease, border-left-color .24s ease;
|
||||
}
|
||||
|
||||
.faq-list details[open] summary:before {
|
||||
border-left-color: var(--red);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.faq-list p {
|
||||
margin: 14px 0 0;
|
||||
padding-left: 34px;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
animation: faqReveal .24s ease both;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes helpPulse {
|
||||
0%, 100% { opacity: .5; transform: scale(.92); }
|
||||
50% { opacity: 1; transform: scale(1.08); }
|
||||
}
|
||||
|
||||
@keyframes faqReveal {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
/* 加入家谱页只保留单页差异，公共认证卡片样式在 public.css */
|
||||
.page-join-genealogy .auth-card {
|
||||
width: min(500px, 100%);
|
||||
}
|
||||
|
||||
.invite-box {
|
||||
padding: 14px;
|
||||
border: 1px dashed var(--gold);
|
||||
border-radius: 22px;
|
||||
background: #fffaf1;
|
||||
}
|
||||
|
||||
.page-join-genealogy textarea.input {
|
||||
/* 申请说明需要多行输入，仍复用公共输入框视觉 */
|
||||
min-height: 112px;
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/* 登录页只保留单页差异，公共认证卡片样式在 public.css */
|
||||
.page-login .auth-card {
|
||||
width: min(440px, 100%);
|
||||
}
|
||||
|
||||
.login-mode-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin: 18px 0 16px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(138, 64, 42, .14);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, .72);
|
||||
}
|
||||
|
||||
/* 登录方式按钮只负责状态呈现，切换逻辑在 auth-pages.js */
|
||||
.login-mode-tab {
|
||||
min-height: 38px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-mode-tab.is-active {
|
||||
background: var(--brand);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgba(138, 64, 42, .18);
|
||||
}
|
||||
|
||||
.login-mode-panel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-login .code-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 124px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.page-login .auth-layout {
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.page-login .code-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
.notice-hero .container {
|
||||
min-height: 420px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.article-meta span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255,253,248,.74);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, var(--green-dark), var(--green));
|
||||
}
|
||||
|
||||
.notice-card span {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: rgba(255,253,248,.94);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.notice-card p {
|
||||
margin: 18px 0 0;
|
||||
color: rgba(255,255,255,.88);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.notice-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 820px) 300px;
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.notice-content,
|
||||
.notice-side {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255,253,248,.82);
|
||||
box-shadow: 0 20px 54px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
padding: 42px;
|
||||
}
|
||||
|
||||
.notice-content p {
|
||||
color: #5f665f;
|
||||
font-size: 18px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.notice-side {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.notice-side a {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
color: #6f4a37;
|
||||
background: #fbf7ed;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.notice-side a:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover { --lift: -6px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.notice-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy { padding-left: 0; }
|
||||
.hero-copy:before { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
.plaza-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.plaza-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.plaza-stats span {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 16px;
|
||||
color: #6d766f;
|
||||
background: rgba(255, 253, 248, .74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
}
|
||||
|
||||
.plaza-stats b {
|
||||
margin-right: 6px;
|
||||
color: var(--green);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
align-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-card h3 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.search-ornament {
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
top: -84px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 62%);
|
||||
animation: plazaPulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 250, 241, .82);
|
||||
}
|
||||
|
||||
.search-card .input {
|
||||
flex: 1 1 280px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-card .tag-row {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.family-card.featured {
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(28, 48, 45, .18), rgba(21, 55, 51, .84)),
|
||||
linear-gradient(135deg, #476f63, #a95c3e);
|
||||
border-radius: 18px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 22px 58px rgba(42, 65, 59, .16);
|
||||
}
|
||||
|
||||
.family-card.featured:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
.family-card.featured h3,
|
||||
.family-card.featured p,
|
||||
.family-card.featured .tag-row,
|
||||
.family-badge {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.family-card.featured p {
|
||||
color: rgba(255, 255, 255, .82);
|
||||
}
|
||||
|
||||
.family-badge {
|
||||
width: fit-content;
|
||||
margin-bottom: auto;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--green-dark);
|
||||
background: rgba(255, 253, 248, .86);
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-card-shine {
|
||||
position: absolute;
|
||||
left: -40%;
|
||||
top: 0;
|
||||
width: 34%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .6s ease;
|
||||
}
|
||||
|
||||
.family-card.featured:hover .family-card-shine {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.family-lite {
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.family-lite:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
bottom: -70px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .13), transparent 68%);
|
||||
transition: transform .28s ease, opacity .28s ease;
|
||||
}
|
||||
|
||||
.family-lite:hover:after {
|
||||
transform: scale(1.25);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.family-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-bottom: 24px;
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #f7e4dc;
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
transition: transform .26s ease, background .26s ease, color .26s ease;
|
||||
}
|
||||
|
||||
.family-lite:hover .family-icon {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
transform: rotate(-6deg) scale(1.08);
|
||||
}
|
||||
|
||||
.tag {
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes plazaPulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: .5;
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,722 @@
|
||||
.page-profile-module {
|
||||
background: #f8f4ec;
|
||||
}
|
||||
|
||||
.module-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 58px 0 42px;
|
||||
background:
|
||||
radial-gradient(circle at 76% 18%, rgba(196, 146, 69, .16), transparent 25%),
|
||||
linear-gradient(125deg, #fffaf0 0%, #f5eadb 52%, #eaf2ee 100%);
|
||||
}
|
||||
|
||||
.module-hero:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(138, 50, 43, .05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(138, 50, 43, .05) 1px, transparent 1px);
|
||||
background-size: 64px 64px;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
|
||||
}
|
||||
|
||||
.module-hero .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.module-kicker {
|
||||
width: fit-content;
|
||||
margin-bottom: 18px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
color: var(--red);
|
||||
background: rgba(248, 229, 223, .92);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.module-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 22px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.module-title-row h1 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.module-title-row p {
|
||||
max-width: 780px;
|
||||
margin: 0;
|
||||
color: #636c65;
|
||||
font-size: 17px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.module-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.module-nav,
|
||||
.module-panel,
|
||||
.module-card {
|
||||
border: 1px solid rgba(224, 211, 189, .86);
|
||||
border-radius: 18px;
|
||||
background: rgba(255,253,248,.88);
|
||||
box-shadow: 0 22px 58px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.module-nav {
|
||||
position: sticky;
|
||||
top: 106px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.module-nav a {
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
color: #5e665f;
|
||||
font-weight: 900;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.module-nav a:hover,
|
||||
.module-nav a.active {
|
||||
color: var(--red);
|
||||
background: #f8e5df;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.module-main {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.module-panel {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.module-panel h2 {
|
||||
margin-bottom: 10px;
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.module-panel > p {
|
||||
color: var(--muted);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.module-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.module-grid.two {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.module-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 170px;
|
||||
padding: 22px;
|
||||
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
|
||||
}
|
||||
|
||||
.module-action-card {
|
||||
/* 按钮型模块卡片用于消息中心操作，保留卡片视觉但去掉浏览器按钮默认样式 */
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.notification-row.is-unread {
|
||||
/* 未读消息用轻量背景强调，不新增内联样式 */
|
||||
border-color: rgba(200, 59, 50, .28);
|
||||
background: #fff7f2;
|
||||
}
|
||||
|
||||
.join-apply-row {
|
||||
/* 加入申请行复用 module-row，只补充审核业务的按钮对齐 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.join-apply-row .bottom-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.generation-row {
|
||||
/* 字辈谱行复用 module-row，补充按钮型 pill 的对齐和点击反馈 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.generation-row .pill {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.lineage-row {
|
||||
/* 世系人物行使用 button 承载点击详情，保留列表卡片视觉 */
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.lineage-row.is-selected {
|
||||
border-color: rgba(200, 59, 50, .38);
|
||||
background: #fff6f1;
|
||||
}
|
||||
|
||||
.lineage-toolbar {
|
||||
/* 搜索栏只做世系图页面差异布局，不放到 JS 内联样式 */
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.lineage-toolbar input {
|
||||
min-height: 46px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lineage-tree-wrap {
|
||||
overflow-x: auto;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.lineage-tree-wrap.is-compact {
|
||||
max-height: 420px;
|
||||
}
|
||||
|
||||
.lineage-tree,
|
||||
.lineage-tree ul {
|
||||
/* 树结构只负责层级缩进，避免用 JS 计算位置 */
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding-left: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.lineage-tree {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.lineage-node {
|
||||
min-width: 168px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .86);
|
||||
border-radius: 8px;
|
||||
background: #fff7f2;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.lineage-node strong,
|
||||
.lineage-node span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lineage-node span {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.member-admin-row {
|
||||
/* 成员管理行保留列表结构，右侧放权限和移除操作 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pill.is-danger {
|
||||
color: #8a322b;
|
||||
background: #fde8e2;
|
||||
}
|
||||
|
||||
.article-row {
|
||||
/* 谱文列表行复用模块列表视觉，单独保留类名方便后续文章样式调整 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feed-row {
|
||||
/* 家族圈动态行右侧承载点赞和评论按钮 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feed-row small {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.album-row,
|
||||
.album-photo-row {
|
||||
/* 相册和照片行使用独立类名，便于后续相册页单独调样式 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.album-photo-form {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.upload-control {
|
||||
/* 公共上传按钮使用 label 触发文件选择，避免 JS 注入按钮样式 */
|
||||
width: fit-content;
|
||||
min-height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
color: var(--red);
|
||||
background: #f8e5df;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-status {
|
||||
margin: 8px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ceremony-row,
|
||||
.ceremony-gift-row,
|
||||
.merit-row {
|
||||
/* 贺礼、献礼和功德记录行复用模块列表，仅补业务类名方便维护 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ceremony-gift-form {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.growth-row {
|
||||
/* 成长记录行复用模块列表，单独留类名方便后续调整 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.memo-row {
|
||||
/* 备忘录行复用模块列表，单独留类名方便后续调整 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vip-package-list {
|
||||
/* 会员套餐列表用网格呈现，套餐卡片由接口数据渲染 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.vip-package-card {
|
||||
min-height: 188px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(224, 211, 189, .86);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
|
||||
}
|
||||
|
||||
.vip-package-card:hover,
|
||||
.vip-package-card.is-selected {
|
||||
border-color: rgba(200, 59, 50, .48);
|
||||
box-shadow: 0 18px 42px rgba(57, 48, 36, .1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.vip-package-name,
|
||||
.vip-package-card strong,
|
||||
.vip-package-card small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vip-package-name {
|
||||
margin-bottom: 12px;
|
||||
color: var(--red);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.vip-package-card strong {
|
||||
margin-bottom: 6px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.vip-package-card small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.vip-package-card p {
|
||||
margin: 14px 0 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.vip-order-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.vip-order-row {
|
||||
/* 会员订单行只补业务类名，方便和其他 module-row 分开维护 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.security-form {
|
||||
/* 安全设置表单复用编辑表单结构，只补模块间距 */
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.security-danger {
|
||||
border-color: rgba(138, 50, 43, .28);
|
||||
background: #fff7f2;
|
||||
}
|
||||
|
||||
.security-danger .editor-field input,
|
||||
.security-danger .editor-field textarea {
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.region-profile-form {
|
||||
/* 个人资料地区表单使用公共地区选择器，样式集中在 CSS */
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.profile-region-picker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profile-region-picker select {
|
||||
min-height: 48px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.profile-create-family-form {
|
||||
/* 个人中心创建家谱页复用编辑表单，只保留页面级间距 */
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.module-card:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 24px 60px rgba(57, 48, 36, .11);
|
||||
}
|
||||
|
||||
.module-card.is-selected {
|
||||
border-color: rgba(200, 59, 50, .5);
|
||||
background: #fff6f1;
|
||||
box-shadow: 0 24px 60px rgba(200, 59, 50, .12);
|
||||
}
|
||||
|
||||
.module-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 -42%;
|
||||
width: 34%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .54s ease;
|
||||
}
|
||||
|
||||
.module-card:hover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.module-card .icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #f8e5df;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.module-card h3 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.module-card p {
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.module-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.module-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 15px;
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.module-row h3 {
|
||||
margin-bottom: 4px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.module-row p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--red);
|
||||
background: #f8e5df;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-like {
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.form-like p {
|
||||
display: grid;
|
||||
grid-template-columns: 170px 1fr auto;
|
||||
gap: 16px;
|
||||
margin: 0;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-like p:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.form-like span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form-like b {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editor-form {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.profile-data-form {
|
||||
/* 个人资料编辑表单只补充本页间距，基础控件继续复用 editor-form。 */
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.editor-field {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.editor-field label {
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.editor-field input,
|
||||
.editor-field select,
|
||||
.editor-field textarea {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
outline: none;
|
||||
transition: border-color .2s ease, box-shadow .2s ease;
|
||||
}
|
||||
|
||||
.editor-field textarea {
|
||||
min-height: 160px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.editor-field input:focus,
|
||||
.editor-field select:focus,
|
||||
.editor-field textarea:focus {
|
||||
border-color: rgba(200, 59, 50, .45);
|
||||
box-shadow: 0 0 0 4px rgba(200, 59, 50, .08);
|
||||
}
|
||||
|
||||
.editor-two {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.profile-form-actions {
|
||||
/* 保存状态跟随按钮排列，避免用 JS 写入临时样式。 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.generation-batch-form {
|
||||
/* 批量字辈表单复用编辑表单，只补充本页预览前的间距。 */
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.generation-batch-check {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.generation-batch-check input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--red);
|
||||
}
|
||||
|
||||
.generation-batch-actions {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.generation-batch-preview {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
min-height: 136px;
|
||||
border: 1px dashed rgba(138, 50, 43, .28);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #fff8f2;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch-row {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1060px) {
|
||||
.module-layout,
|
||||
.module-grid,
|
||||
.module-grid.two,
|
||||
.vip-package-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.module-nav {
|
||||
position: static;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.module-title-row {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.module-title-row h1 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.module-nav {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-like p,
|
||||
.module-row,
|
||||
.editor-two,
|
||||
.profile-region-picker {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,613 @@
|
||||
.page-profile {
|
||||
background: #f8f4ec;
|
||||
}
|
||||
|
||||
.profile-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 62px 0 34px;
|
||||
background:
|
||||
radial-gradient(circle at 78% 12%, rgba(196, 146, 69, .18), transparent 25%),
|
||||
linear-gradient(125deg, #fffaf0 0%, #f4eadb 48%, #eaf2ee 100%);
|
||||
}
|
||||
|
||||
.profile-hero:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(138, 50, 43, .05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(138, 50, 43, .05) 1px, transparent 1px);
|
||||
background-size: 64px 64px;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
|
||||
}
|
||||
|
||||
.profile-hero-grid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 420px;
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.profile-card,
|
||||
.profile-stats,
|
||||
.panel,
|
||||
.side-card {
|
||||
border: 1px solid rgba(224, 211, 189, .84);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 253, 248, .86);
|
||||
box-shadow: 0 22px 58px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
display: grid;
|
||||
grid-template-columns: 116px 1fr;
|
||||
gap: 28px;
|
||||
padding: 34px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
border-radius: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .38), transparent 24%),
|
||||
linear-gradient(145deg, var(--red), #ee8d60 52%, var(--green));
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 46px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 18px 40px rgba(200, 59, 50, .18);
|
||||
}
|
||||
|
||||
.avatar-wrap span {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 5px solid #fffdf8;
|
||||
border-radius: 50%;
|
||||
background: #31bf6b;
|
||||
}
|
||||
|
||||
.profile-info h1 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.profile-info p {
|
||||
max-width: 720px;
|
||||
color: #636c65;
|
||||
font-size: 17px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.profile-tags,
|
||||
.mini-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.profile-tags span,
|
||||
.mini-actions span {
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--red);
|
||||
background: #f8e5df;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 22px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.profile-stats div {
|
||||
min-height: 116px;
|
||||
padding: 20px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
background: rgba(247, 239, 226, .72);
|
||||
}
|
||||
|
||||
.profile-stats strong {
|
||||
color: var(--green);
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-stats span,
|
||||
.panel-head p,
|
||||
.data-list span,
|
||||
.todo-list span,
|
||||
.family-card p,
|
||||
.feature-tile p,
|
||||
.content-tile p {
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dashboard-section {
|
||||
padding-top: 42px;
|
||||
}
|
||||
|
||||
.dashboard-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dashboard-side {
|
||||
position: sticky;
|
||||
top: 106px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.side-card,
|
||||
.panel {
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.side-card h2,
|
||||
.panel h2 {
|
||||
margin-bottom: 8px;
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-actions a,
|
||||
.todo-list a {
|
||||
display: block;
|
||||
padding: 15px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #fbf7ed;
|
||||
transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
|
||||
}
|
||||
|
||||
.user-actions a:hover,
|
||||
.todo-list a:hover {
|
||||
transform: translateX(5px);
|
||||
border-color: rgba(71, 111, 99, .28);
|
||||
background: #eef4ef;
|
||||
}
|
||||
|
||||
.user-actions span,
|
||||
.todo-list b {
|
||||
display: block;
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.user-actions b {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.logout-link span {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.card-head,
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.card-head span {
|
||||
padding: 6px 11px;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.todo-list,
|
||||
.dashboard-main {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.panel-head.compact {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-head h2 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.family-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.family-card {
|
||||
display: grid;
|
||||
grid-template-columns: 112px 1fr;
|
||||
gap: 20px;
|
||||
min-height: 190px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: #fffdf8;
|
||||
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
|
||||
}
|
||||
|
||||
.family-card:hover,
|
||||
.feature-tile:hover,
|
||||
.content-tile:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 22px 52px rgba(57, 48, 36, .1);
|
||||
}
|
||||
|
||||
.book-cover {
|
||||
min-height: 150px;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fffdf8;
|
||||
background:
|
||||
linear-gradient(90deg, transparent calc(100% - 16px), rgba(255, 255, 255, .7) calc(100% - 15px), transparent calc(100% - 14px)),
|
||||
linear-gradient(135deg, #0f405c, #092c42);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 22px;
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
box-shadow: inset -12px 0 0 rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
.book-cover.alt {
|
||||
background:
|
||||
linear-gradient(90deg, transparent calc(100% - 16px), rgba(255, 255, 255, .7) calc(100% - 15px), transparent calc(100% - 14px)),
|
||||
linear-gradient(135deg, #173c35, #785f35);
|
||||
}
|
||||
|
||||
.family-card h3,
|
||||
.feature-tile h3,
|
||||
.content-tile h3 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.feature-grid,
|
||||
.content-grid,
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.management-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.feature-tile,
|
||||
.content-tile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 170px;
|
||||
padding: 22px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: #fffdf8;
|
||||
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
|
||||
}
|
||||
|
||||
.feature-tile span,
|
||||
.content-tile span {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: #f7e4dc;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.feature-tile:after,
|
||||
.content-tile:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 -42%;
|
||||
width: 34%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .54s ease;
|
||||
}
|
||||
|
||||
.feature-tile:hover:after,
|
||||
.content-tile:hover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.content-tile.large {
|
||||
grid-column: span 2;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, var(--green-dark), var(--green));
|
||||
}
|
||||
|
||||
.content-tile.large p,
|
||||
.content-tile.large h3 {
|
||||
color: rgba(255, 255, 255, .86);
|
||||
}
|
||||
|
||||
.content-tile.large span {
|
||||
color: var(--green-dark);
|
||||
background: rgba(255, 253, 248, .9);
|
||||
}
|
||||
|
||||
.profile-data-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr .85fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
flex: 0 0 auto;
|
||||
padding: 9px 14px;
|
||||
border-radius: 999px;
|
||||
color: var(--red);
|
||||
background: #f8e5df;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
display: grid;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.data-list p {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
gap: 16px;
|
||||
margin: 0;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.data-list b {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.service-grid a {
|
||||
min-height: 88px;
|
||||
padding: 18px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #6f4a37;
|
||||
background: #fbf7ed;
|
||||
border: 1px solid var(--line);
|
||||
font-weight: 900;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.service-grid a:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -5px;
|
||||
}
|
||||
|
||||
.logout-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .22s ease;
|
||||
}
|
||||
|
||||
.logout-modal.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.logout-modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(32, 35, 34, .46);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.logout-dialog {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(420px, 100%);
|
||||
padding: 34px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 28px 80px rgba(61, 73, 68, .24);
|
||||
text-align: center;
|
||||
transform: translateY(12px) scale(.98);
|
||||
transition: transform .22s ease;
|
||||
}
|
||||
|
||||
.logout-modal.show .logout-dialog {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.logout-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #f4f1eb;
|
||||
color: #7f786f;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: transform .2s ease, background .2s ease, color .2s ease;
|
||||
}
|
||||
|
||||
.logout-close:hover {
|
||||
transform: rotate(90deg);
|
||||
background: var(--red-soft);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 16px;
|
||||
background: var(--red-soft);
|
||||
color: var(--red);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.logout-dialog h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 24px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.logout-dialog p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.logout-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.logout-actions .btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logout-modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
|
||||
.profile-hero-grid,
|
||||
.dashboard-layout,
|
||||
.profile-data-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-side {
|
||||
position: static;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.content-grid,
|
||||
.management-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.profile-hero {
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.profile-info h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.profile-stats,
|
||||
.dashboard-side,
|
||||
.family-grid,
|
||||
.content-grid,
|
||||
.management-grid,
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.family-card {
|
||||
grid-template-columns: 88px 1fr;
|
||||
}
|
||||
|
||||
.book-cover {
|
||||
min-height: 120px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.content-tile.large {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.panel-head,
|
||||
.card-head {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.data-list p {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.logout-dialog {
|
||||
padding: 30px 22px;
|
||||
}
|
||||
|
||||
.logout-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
.promo-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.promo-tags {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.promo-tags span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255, 253, 248, .74);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.promo-tags span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.album-preview {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
grid-template-rows: repeat(2, 130px);
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-photo {
|
||||
border-radius: 18px;
|
||||
background: radial-gradient(circle at 72% 24%, rgba(255, 255, 255, .75) 0 8%, transparent 9%), linear-gradient(135deg, #e7c89e, #b94135 48%, #143d57);
|
||||
box-shadow: 0 16px 36px rgba(57, 48, 36, .08);
|
||||
transition: transform .26s ease;
|
||||
}
|
||||
|
||||
.album-photo.large {
|
||||
grid-row: 1 / 3;
|
||||
background: linear-gradient(180deg, rgba(28, 48, 45, .1), rgba(21, 55, 51, .72)), url("../images/ancestral-hall.png") center/cover;
|
||||
}
|
||||
|
||||
.album-photo.warm {
|
||||
background: linear-gradient(135deg, #f0d8ac, #c49245 45%, #7d342d);
|
||||
}
|
||||
|
||||
.album-photo.green {
|
||||
background: linear-gradient(135deg, #dfd1b5, #6b7f70 48%, #26302c);
|
||||
}
|
||||
|
||||
.album-preview:hover .album-photo {
|
||||
transform: scale(1.025);
|
||||
}
|
||||
|
||||
.album-card {
|
||||
min-height: 180px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -42%;
|
||||
top: 0;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .54), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .56s ease;
|
||||
}
|
||||
|
||||
.album-card:hover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.album-preview {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, 120px);
|
||||
}
|
||||
|
||||
.album-photo.large {
|
||||
grid-row: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
.promo-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.promo-tags {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.promo-tags span {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255, 253, 248, .74);
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.promo-tags span:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, rgba(31, 63, 55, .1), rgba(25, 39, 34, .86)), url("../images/ancestral-hall.png") center/cover;
|
||||
}
|
||||
|
||||
.video-preview:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
opacity: .35;
|
||||
}
|
||||
|
||||
.video-preview h3,
|
||||
.video-preview p,
|
||||
.play-button {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.video-preview p {
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
|
||||
.play-button {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 46px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .94);
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
|
||||
transition: transform .24s ease;
|
||||
}
|
||||
|
||||
.play-button:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
top: 19px;
|
||||
border-top: 13px solid transparent;
|
||||
border-bottom: 13px solid transparent;
|
||||
border-left: 20px solid var(--red);
|
||||
}
|
||||
|
||||
.video-preview:hover .play-button {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.video-card {
|
||||
min-height: 180px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -42%;
|
||||
top: 0;
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .54), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .56s ease;
|
||||
}
|
||||
|
||||
.video-card:hover:after {
|
||||
left: 112%;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,900 @@
|
||||
:root {
|
||||
--red: #c83b32;
|
||||
--red-soft: #f4ded8;
|
||||
--green: #476f63;
|
||||
--green-dark: #213f38;
|
||||
--gold: #c49245;
|
||||
--ink: #26302c;
|
||||
--muted: #737b76;
|
||||
--paper: #fbf7ed;
|
||||
--paper-2: #f7efe2;
|
||||
--line: #eadfce;
|
||||
--white: #fffdf8;
|
||||
--shadow: 0 24px 70px rgba(69, 53, 35, .12);
|
||||
}
|
||||
|
||||
.auth-layer-message {
|
||||
/* 认证页 layui 消息提示皮肤，替代浏览器原生 alert。 */
|
||||
min-width: 160px;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(38, 48, 44, .94) !important;
|
||||
box-shadow: 0 16px 42px rgba(38, 48, 44, .24) !important;
|
||||
}
|
||||
|
||||
.auth-layer-message .layui-layer-content {
|
||||
padding: 10px 18px !important;
|
||||
color: #fffdf8 !important;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
|
||||
a,
|
||||
.btn,
|
||||
.card,
|
||||
button,
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(1280px, calc(100% - 72px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background:
|
||||
linear-gradient(115deg, rgba(110, 38, 32, .96) 0%, rgba(200, 59, 50, .96) 48%, rgba(139, 52, 39, .96) 100%);
|
||||
border-bottom: 1px solid rgba(255, 253, 248, .2);
|
||||
box-shadow:
|
||||
0 4px 0 rgba(93, 30, 26, .2),
|
||||
0 18px 38px rgba(83, 32, 26, .34),
|
||||
0 30px 70px rgba(83, 32, 26, .22);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 82px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 253, 248, .92);
|
||||
box-shadow: 0 10px 28px rgba(63, 28, 22, .18);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
display: block;
|
||||
width: 270px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.footer .brand-logo {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.auth-page-brand .brand-logo {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.brand-logo-mark {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
box-shadow: 0 10px 24px rgba(200, 59, 50, .22);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
color: rgba(255, 253, 248, .78);
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-links a.active,
|
||||
.nav-links a:hover {
|
||||
color: #fff7d8;
|
||||
}
|
||||
|
||||
.nav-links a,
|
||||
.nav-actions a {
|
||||
position: relative;
|
||||
transition: color .22s ease, transform .22s ease;
|
||||
}
|
||||
|
||||
.nav-links a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10px;
|
||||
height: 2px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #f5d99b, #fff3c8);
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform .24s ease;
|
||||
}
|
||||
|
||||
.nav-links a.active:after,
|
||||
.nav-links a:hover:after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
color: rgba(255, 253, 248, .86);
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 118px;
|
||||
height: 44px;
|
||||
padding: 0 24px;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
box-shadow: 0 14px 30px rgba(200, 59, 50, .24);
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
box-shadow: 0 18px 38px rgba(200, 59, 50, .3);
|
||||
}
|
||||
|
||||
.site-header .btn.primary {
|
||||
color: #8f332b;
|
||||
background: linear-gradient(135deg, #fff8e6, #f1d49a);
|
||||
box-shadow: 0 12px 28px rgba(64, 26, 21, .22);
|
||||
}
|
||||
|
||||
.site-header .btn.primary:hover {
|
||||
box-shadow: 0 16px 34px rgba(64, 26, 21, .3);
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
color: var(--red);
|
||||
border-color: rgba(200, 59, 50, .28);
|
||||
background: rgba(255, 255, 255, .68);
|
||||
}
|
||||
|
||||
.inner-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 82% 12%, rgba(196, 146, 69, .16), transparent 24%),
|
||||
linear-gradient(125deg, #fffaf0 0%, #f7efe2 48%, #edf4ef 100%);
|
||||
}
|
||||
|
||||
.inner-hero:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(138, 50, 43, .05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(138, 50, 43, .05) 1px, transparent 1px);
|
||||
background-size: 68px 68px;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
|
||||
}
|
||||
|
||||
.inner-hero .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 410px;
|
||||
padding: 68px 0 72px;
|
||||
display: grid;
|
||||
grid-template-columns: .9fr 1.1fr;
|
||||
gap: 54px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 22px;
|
||||
color: #8a5a3b;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.eyebrow:before {
|
||||
content: "";
|
||||
width: 42px;
|
||||
height: 2px;
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
color: var(--ink);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 52px;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 14px;
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 42px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
max-width: 620px;
|
||||
margin-bottom: 0;
|
||||
color: #645d52;
|
||||
font-size: 18px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
min-height: 260px;
|
||||
padding: 28px;
|
||||
border: 1px solid rgba(224, 211, 189, .88);
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 253, 248, .92);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 76px 0;
|
||||
}
|
||||
|
||||
.section.alt {
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-bottom: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-head p {
|
||||
max-width: 720px;
|
||||
margin: 14px auto 0;
|
||||
color: var(--muted);
|
||||
font-size: 17px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px;
|
||||
border-radius: 18px;
|
||||
background: #fffdf8;
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 16px 42px rgba(57, 48, 36, .07);
|
||||
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-6px);
|
||||
border-color: rgba(196, 146, 69, .38);
|
||||
box-shadow: 0 24px 60px rgba(57, 48, 36, .11);
|
||||
}
|
||||
|
||||
.card.soft {
|
||||
background: #fbf7ed;
|
||||
}
|
||||
|
||||
.card.dark {
|
||||
color: #fff;
|
||||
background: linear-gradient(155deg, var(--green-dark), var(--green));
|
||||
}
|
||||
|
||||
.card.dark p {
|
||||
color: rgba(255, 255, 255, .78);
|
||||
}
|
||||
|
||||
.card p,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--green);
|
||||
background: #eaf0eb;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #e2d4bf;
|
||||
border-radius: 999px;
|
||||
color: var(--ink);
|
||||
background: #fbf8f1;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 128px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.auth-layout {
|
||||
min-height: calc(100vh - 82px);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 62px 24px;
|
||||
background:
|
||||
radial-gradient(circle at 18% 20%, rgba(200, 59, 50, .09), transparent 24%),
|
||||
linear-gradient(125deg, #fffaf0, #f7efe2 54%, #edf4ef);
|
||||
}
|
||||
|
||||
/* 认证类页面共用祖堂背景，登录、注册、找回密码只保留自己的差异样式 */
|
||||
.auth-scenic-layout {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
min-height: 100vh;
|
||||
padding: 56px 24px 72px;
|
||||
place-items: center;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 253, 248, .86), rgba(255, 253, 248, .46) 45%, rgba(255, 253, 248, .88)),
|
||||
linear-gradient(135deg, rgba(200, 59, 50, .08), transparent 34%),
|
||||
url("../images/ancestral-hall-new.png") center / cover no-repeat;
|
||||
}
|
||||
|
||||
.auth-scenic-layout:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(251, 247, 237, .42), rgba(251, 247, 237, .86)),
|
||||
radial-gradient(circle at 50% 42%, rgba(255, 253, 248, .3), transparent 30%);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.auth-page-brand {
|
||||
position: absolute;
|
||||
left: clamp(18px, 4vw, 56px);
|
||||
top: clamp(18px, 4vw, 42px);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 认证卡片公共样式，避免登录、注册、找回密码页面重复维护 */
|
||||
.auth-card {
|
||||
width: min(440px, 100%);
|
||||
padding: 38px;
|
||||
border-radius: 16px;
|
||||
border-color: rgba(224, 211, 189, .9);
|
||||
background: rgba(255, 253, 248, .94);
|
||||
box-shadow: 0 26px 70px rgba(57, 48, 36, .16);
|
||||
}
|
||||
|
||||
.auth-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.auth-card .lead {
|
||||
margin-bottom: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.auth-card .form-grid {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.auth-card .input {
|
||||
height: 50px;
|
||||
background: #fffaf1;
|
||||
}
|
||||
|
||||
.auth-card .btn.primary,
|
||||
.auth-card .btn.ghost {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.auth-card .btn.primary {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.auth-card .btn.primary:before,
|
||||
.auth-card .btn.ghost:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -45%;
|
||||
width: 38%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left .48s ease;
|
||||
}
|
||||
|
||||
.auth-card .btn.primary:hover,
|
||||
.auth-card .btn.ghost:hover {
|
||||
transform: translateY(-3px) scale(1.012);
|
||||
}
|
||||
|
||||
.auth-card .btn.primary:hover {
|
||||
box-shadow: 0 18px 42px rgba(200, 59, 50, .34);
|
||||
}
|
||||
|
||||
.auth-card .btn.ghost:hover {
|
||||
color: #fff;
|
||||
border-color: rgba(200, 59, 50, .2);
|
||||
background: var(--red);
|
||||
box-shadow: 0 16px 34px rgba(200, 59, 50, .2);
|
||||
}
|
||||
|
||||
.auth-card .btn.primary:hover:before,
|
||||
.auth-card .btn.ghost:hover:before {
|
||||
left: 110%;
|
||||
}
|
||||
|
||||
.auth-card .btn.primary:active,
|
||||
.auth-card .btn.ghost:active {
|
||||
transform: translateY(-1px) scale(.99);
|
||||
}
|
||||
|
||||
.auth-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
color: #8a5a3b;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.auth-links a {
|
||||
transition: color .22s ease, transform .22s ease;
|
||||
}
|
||||
|
||||
.auth-links a:hover {
|
||||
color: var(--red);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.auth-captcha-box {
|
||||
/* 认证页滑动验证挂载点，TAC 内部 DOM 由第三方库生成 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-captcha-box:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-captcha-box #tianai-captcha-parent {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.auth-captcha-modal {
|
||||
/* 认证页滑动验证弹窗挂载点，TAC 内部 DOM 由第三方库生成 */
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(38, 48, 44, .32);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.auth-captcha-modal:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-captcha-modal #tianai-captcha-parent {
|
||||
max-width: min(318px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 32px);
|
||||
}
|
||||
|
||||
/* 验证码输入和按钮的通用双列布局，窄屏在页面 CSS 中改为单列 */
|
||||
.code-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 接口请求期间的公共状态，只由 JS 切换 class，不在 JS 内写样式 */
|
||||
.is-loading {
|
||||
pointer-events: none;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
/* 接口列表为空时的统一占位样式 */
|
||||
.api-empty {
|
||||
padding: 22px;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 14px;
|
||||
color: var(--muted);
|
||||
background: rgba(255, 253, 248, .7);
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 60px 0 36px;
|
||||
color: rgba(255, 255, 255, .78);
|
||||
background: #3f3a35;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr repeat(3, 1fr);
|
||||
gap: 48px;
|
||||
padding-bottom: 38px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .12);
|
||||
}
|
||||
|
||||
.footer h4 {
|
||||
margin: 0 0 18px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.footer p,
|
||||
.footer a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
margin: 10px 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
width: fit-content;
|
||||
transition: color .22s ease, transform .22s ease;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #fff;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.footer .brand {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.footer .brand:hover {
|
||||
transform: translateX(0) translateY(-2px);
|
||||
}
|
||||
|
||||
.copyright,
|
||||
.footer-legal {
|
||||
padding-top: 28px;
|
||||
color: rgba(255, 255, 255, .48);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-legal a {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.footer-legal a:hover {
|
||||
color: #fff;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.profile-layer-confirm {
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-layer-confirm .layui-layer-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid rgba(224, 211, 189, .72);
|
||||
background: #fffaf0;
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.profile-layer-confirm .layui-layer-content {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.profile-layer-confirm .layui-layer-btn a {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.profile-layer-confirm .layui-layer-btn .layui-layer-btn0 {
|
||||
border-color: var(--red);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.pending-layer-dialog {
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(38, 30, 21, .18) !important;
|
||||
}
|
||||
|
||||
.pending-layer-dialog .layui-layer-title {
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
border-bottom: 1px solid rgba(224, 211, 189, .72);
|
||||
background: #fffaf0;
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pending-layer-dialog .layui-layer-content {
|
||||
padding: 28px 28px 16px !important;
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pending-layer-dialog .layui-layer-btn {
|
||||
padding: 0 24px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pending-layer-dialog .layui-layer-btn a {
|
||||
height: 38px;
|
||||
min-width: 108px;
|
||||
padding: 0 24px;
|
||||
border-radius: 999px;
|
||||
line-height: 38px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pending-layer-dialog .layui-layer-btn .layui-layer-btn0 {
|
||||
border-color: var(--red);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.profile-popup-select {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.profile-popup-select button {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: border-color .2s ease, color .2s ease, background .2s ease;
|
||||
}
|
||||
|
||||
.profile-popup-select button:hover {
|
||||
border-color: rgba(200, 59, 50, .38);
|
||||
color: var(--red);
|
||||
background: #fff4ef;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner-hero .container,
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.container {
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
|
||||
.nav-actions a:not(.btn) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner-hero .container {
|
||||
padding: 46px 0 54px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.grid-3,
|
||||
.grid-4,
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.auth-scenic-layout {
|
||||
padding: 36px 14px 48px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 28px 22px;
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
animation-duration: .01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/* 注册页只保留单页差异，公共认证卡片样式在 public.css */
|
||||
.page-register .auth-links {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.page-register .auth-layout {
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
.result-hero .container {
|
||||
min-height: 420px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.result-search {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.result-search .toolbar {
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 250, 241, .82);
|
||||
}
|
||||
|
||||
.result-search .input {
|
||||
flex: 1 1 260px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.result-list {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 26px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 253, 248, .82);
|
||||
box-shadow: 0 18px 48px rgba(57, 48, 36, .07);
|
||||
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
|
||||
}
|
||||
|
||||
.result-card:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -70px;
|
||||
bottom: -80px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .13), transparent 68%);
|
||||
transition: transform .28s ease;
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
border-color: rgba(196, 146, 69, .42);
|
||||
box-shadow: 0 24px 60px rgba(57, 48, 36, .11);
|
||||
}
|
||||
|
||||
.result-card:hover:after {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.result-card span {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
color: var(--green-dark);
|
||||
background: #e8f0eb;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-card p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-search .toolbar {
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
.ticket-hero .container {
|
||||
min-height: 420px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.ticket-tip {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(145deg, var(--green-dark), var(--green));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ticket-tip span {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: rgba(255, 253, 248, .94);
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ticket-tip p {
|
||||
max-width: 360px;
|
||||
margin: 18px 0 0;
|
||||
color: rgba(255, 255, 255, .86);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.ticket-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 720px) 320px;
|
||||
gap: 26px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.ticket-form {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.ticket-form textarea {
|
||||
min-height: 150px;
|
||||
padding-top: 16px;
|
||||
border-radius: 18px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ticket-side {
|
||||
padding: 26px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 253, 248, .82);
|
||||
box-shadow: 0 20px 54px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.ticket-side p {
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.ticket-side a {
|
||||
display: inline-flex;
|
||||
margin-top: 10px;
|
||||
color: var(--red);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.ticket-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
.surname-detail-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.surname-emblem {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(circle at 72% 24%, rgba(255, 255, 255, .28) 0 10%, transparent 11%),
|
||||
linear-gradient(135deg, #476f63, #c49245 54%, #8f4634);
|
||||
}
|
||||
|
||||
.surname-emblem span {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--red);
|
||||
background: rgba(255, 253, 248, .95);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 58px;
|
||||
font-weight: 800;
|
||||
transition: transform .24s ease;
|
||||
}
|
||||
|
||||
.surname-emblem:hover span {
|
||||
transform: rotate(-8deg) scale(1.08);
|
||||
}
|
||||
|
||||
.surname-emblem p {
|
||||
margin: 18px 0 0;
|
||||
color: rgba(255, 255, 255, .9);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.surname-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.content-card,
|
||||
.related-panel {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 253, 248, .82);
|
||||
box-shadow: 0 20px 54px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.content-card {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.content-card:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.content-card p {
|
||||
color: var(--muted);
|
||||
font-size: 17px;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.generation-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.generation-row span {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #7c4a33;
|
||||
background: #fbf7ed;
|
||||
border: 1px solid var(--line);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.generation-row span:hover {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.related-panel {
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.related-panel a {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
color: #6f4a37;
|
||||
background: #fbf7ed;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.related-panel a:hover {
|
||||
color: #fff;
|
||||
background: var(--green);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.surname-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-card:first-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
.surname-hero .container {
|
||||
min-height: 440px;
|
||||
padding-top: 74px;
|
||||
padding-bottom: 74px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
width: 4px;
|
||||
height: 132px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, var(--red), var(--gold));
|
||||
}
|
||||
|
||||
.surname-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.surname-stats span {
|
||||
padding: 11px 14px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
color: #6d766f;
|
||||
background: rgba(255, 253, 248, .74);
|
||||
box-shadow: 0 14px 32px rgba(72, 57, 38, .06);
|
||||
}
|
||||
|
||||
.surname-stats b {
|
||||
margin-right: 6px;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.surname-search-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.search-ornament {
|
||||
position: absolute;
|
||||
right: -72px;
|
||||
top: -84px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(200, 59, 50, .13), transparent 62%);
|
||||
animation: surnamePulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.surname-search-card h3,
|
||||
.search-toolbar,
|
||||
.hot-query {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(224, 211, 189, .78);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 250, 241, .82);
|
||||
}
|
||||
|
||||
.search-toolbar .input {
|
||||
flex: 1 1 280px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hot-query {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hot-query span {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #7c4a33;
|
||||
background: #fbf7ed;
|
||||
border: 1px solid var(--line);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-weight: 800;
|
||||
transition: transform .22s ease, color .22s ease, background .22s ease;
|
||||
}
|
||||
|
||||
.hot-query span:hover {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.surname-list-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.surname-list-section:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 58px;
|
||||
width: 520px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.surname-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(224, 211, 189, .8);
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 253, 248, .72);
|
||||
box-shadow: 0 22px 60px rgba(57, 48, 36, .08);
|
||||
}
|
||||
|
||||
.surname-grid a {
|
||||
height: 64px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #7c4a33;
|
||||
background: #fbf7ed;
|
||||
border: 1px solid var(--line);
|
||||
font-family: "SimSun", "Songti SC", serif;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
transition: transform .24s ease, color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.surname-grid a:hover {
|
||||
color: #fff;
|
||||
background: var(--red);
|
||||
border-color: rgba(200, 59, 50, .72);
|
||||
box-shadow: 0 16px 34px rgba(200, 59, 50, .18);
|
||||
transform: translateY(-6px) scale(1.03);
|
||||
}
|
||||
|
||||
.surname-grid:hover a {
|
||||
animation: surnameFloat 1.9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.surname-grid:hover a:nth-child(2n) {
|
||||
animation-delay: .08s;
|
||||
}
|
||||
|
||||
.surname-grid:hover a:nth-child(3n) {
|
||||
animation-delay: .14s;
|
||||
}
|
||||
|
||||
.surname-grid:hover a:nth-child(4n) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
.tilt-card {
|
||||
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
|
||||
transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease;
|
||||
}
|
||||
|
||||
.tilt-card:hover {
|
||||
--lift: -6px;
|
||||
}
|
||||
|
||||
@keyframes surnameFloat {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes surnamePulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: .5;
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-copy {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero-copy:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.surname-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user