/* 鐮佸瓧鍟?PC 缃戦〉鐗?鈥?娣辩豢涓婚锛堜笌灏忕▼搴忎竴鑷达級 */* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--teal: #0f9488;
--teal-d: #0b5c55;
--teal-l: #e6f4f1;
--teal-ll: #f4faf9;
--red: #e8453c;
--gray: #7a8f8b;
--line: #cde9e4;
--ring-bright: #5eead4;
/* 娣辫壊 Hero 涓婄殑鎻忚竟鑹诧紙娴呰壊鍖鸿鐢?--teal锛?*/ --ring-card: #e8453c;
/* 鐧借壊鏁版嵁鍗＄殑鎻忚竟鑹诧細浜潚鍦ㄧ櫧鍗′笂瀵规瘮涓嶅锛岀敤楂樺弽宸壊 */ /* 渚ц竟鏍忔敹璧峰搴?鈥斺€?銆岀牬瀹瑰櫒閾烘弧鏁村睆銆嶇殑鍖哄潡瑕佺敤瀹冩潵绠楀彲鐢ㄥ搴?*/ --sb-w: 76px;
}
html, body {
height: 100%;
}
body {
font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
/* 娉ㄦ剰锛歜ody 鏈?height:100%锛? 瑙嗗彛楂橈級锛岃儗鏅浘榛樿 repeat 浼氭瘡銆屼竴灞忛珮銆嶉噸澶嶄竴娆★紝 浜庢槸椤甸潰瓒婂線涓嬫粴銆佽秺浼氬懆鏈熸€у啋鍑轰竴鏉℃祬缁挎笎鍙樺甫锛堢湅鐫€鍍?涓婇潰閭ｆ帓鐨勮儗鏅孩涓嬫潵浜?锛夈€? 蹇呴』 no-repeat锛屽苟琛ヤ竴涓櫧鑹插厹搴曪紝娓愬彉灏卞彧鍦ㄩ〉闈㈤《閮ㄥ嚭鐜颁竴娆°€?*/ background: #fff linear-gradient(180deg, #e9f6f3 0%, #ffffff 320px) no-repeat;
color: #243b38;
}
/* 鏁翠綋锛氬乏渚ц竟鏍忓浐瀹氬 + 鍙充晶鍐呭鍒楋紙鐓?Aceternity锛氭敹璧峰彧鍓╁浘鏍囥€佹偓鍋滃睍寮€锛?/#app { min-height: 100vh; }/* ===== 宸︿晶杈规爮 ===== */.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
/* 鏀惰捣瀹藉害 */ width: 76px;
background: #0a3d37;
/* 娣卞ⅷ缁匡紝鍜岄椤?hero 鍚岃壊绯?*/ display: flex;
flex-direction: column;
overflow: hidden;
z-index: 60;
transition: width .22s ease;
}
.sidebar:hover,.sidebar.open {
width: 232px;
}
/* 鎮仠灞曞紑锛?open 渚?JS/瑙﹀睆鍥哄畾灞曞紑 */.sb-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px 14px;
flex: 0 0 auto;
}
.sb-logo {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 11px;
background: #fff;
color: #0a3d37;
font-size: 22px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.sb-brand {
font-size: 15px;
font-weight: 800;
color: #fff;
white-space: nowrap;
opacity: 0;
transform: translateX(-6px);
transition: opacity .18s ease, transform .18s ease;
}
.sidebar:hover .sb-brand, .sidebar.open .sb-brand {
opacity: 1;
transform: none;
}
.sb-nav {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 14px;
overflow-y: auto;
overflow-x: hidden;
}
.sb-item {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 12px;
border-radius: 12px;
color: rgba(255,255,255,.72);
cursor: pointer;
white-space: nowrap;
font-size: 14.5px;
font-weight: 600;
transition: background .15s, color .15s;
}
.sb-item svg {
flex: 0 0 21px;
width: 21px;
height: 21px;
}
.sb-item span {
opacity: 0;
transform: translateX(-6px);
transition: opacity .18s ease, transform .18s ease;
}
.sidebar:hover .sb-item span, .sidebar.open .sb-item span {
opacity: 1;
transform: none;
}
.sb-item:hover {
background: rgba(255,255,255,.12);
color: #fff;
}
.sb-item.active {
background: #fff;
color: #0a3d37;
}
.sb-foot {
flex: 0 0 auto;
padding: 14px;
border-top: 1px solid rgba(255,255,255,.12);
}
.sb-foot .user-info-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 14px;
cursor: pointer;
transition: background .15s;
}
.sb-foot .user-info-btn:hover {
background: rgba(255,255,255,.12);
}
.sb-foot .user-avatar {
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,.16);
border: 2px solid rgba(255,255,255,.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #fff;
overflow: hidden;
}
.sb-foot .user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sb-foot .user-txt {
min-width: 0;
opacity: 0;
transform: translateX(-6px);
transition: opacity .18s ease, transform .18s ease;
}
.sidebar:hover .sb-foot .user-txt, .sidebar.open .sb-foot .user-txt {
opacity: 1;
transform: none;
}
.sb-foot .user-nick {
font-size: 14px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-foot .vip-tag {
display: inline-block;
margin-top: 3px;
font-size: 11px;
font-weight: 800;
color: #7a5200;
background: #f5c518;
border-radius: 8px;
padding: 1px 7px;
}
.sb-foot .user-plain {
font-size: 12px;
color: rgba(255,255,255,.55);
}
/* 渚ц竟鏍忓簳閮ㄧ殑銆屽井淇＄櫥褰曘€嶏紙鏈櫥褰曟椂锛?*/.sb-foot .btn-teal {
width: 100%;
background: #fff;
color: #0a3d37;
padding: 9px 0;
}
/* 鍙充晶鍐呭鍒?*/.app-col {
margin-left: 76px;
min-width: 0;
display: flex;
flex-direction: column;
min-height: calc(100 * var(--pg-vh, 1vh));
}
/* ===== 椤舵爮锛堝彧鍦ㄧ粌涔犻〉鍑虹幇锛?==== */.topbar {
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 2px 12px rgba(15,148,136,0.06);
}
.topbar[hidden] {
display: none;
}
.topbar-inner {
width: 100%;
max-width: none;
margin: 0 auto;
min-height: 64px;
padding: 0 clamp(20px, calc(3.5 * var(--pg-vw, 1vw)), 48px);
display: flex;
align-items: center;
gap: 24px;
height: 64px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
}
.brand-logo {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--teal);
color: #fff;
font-size: 24px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.brand-name {
font-size: 18px;
font-weight: 800;
color: var(--teal-d);
}
.brand-sub {
font-size: 12px;
color: var(--gray);
margin-top: 2px;
}
.topnav {
display: flex;
gap: 8px;
margin-left: auto;
}
.nav-item {
padding: 8px 18px;
border-radius: 20px;
font-size: 15px;
color: var(--gray);
cursor: pointer;
font-weight: 600;
transition: all .15s;
}
.nav-item:hover {
background: var(--teal-l);
color: var(--teal-d);
}
.nav-item.active {
background: var(--teal);
color: #fff;
}
.user-box {
margin-left: 0;
display: flex;
align-items: center;
gap: 12px;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
/* 椤舵爮鐢ㄦ埛鍧楁暣浣撳彲鐐?鈫?鎮仠寮瑰嚭涓汉鑿滃崟 */.user-info-btn {
cursor: pointer;
padding: 4px 10px 4px 4px;
border-radius: 24px;
transition: background .15s;
}
.user-info-btn > div:nth-child(2) {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.15;
}
.user-info-btn:hover {
background: var(--teal-ll);
}
.user-caret {
font-style: normal;
font-size: 10px;
color: rgba(255,255,255,.7);
margin-left: 2px;
}
/* ===== 椤舵爮鐢ㄦ埛娴眰锛堢偣澶村儚寮瑰嚭锛岀収鍙傝€冨浘锛?==== */.user-menu {
position: fixed;
top: 62px;
right: 24px;
width: 300px;
z-index: 200;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(11,59,53,.22);
opacity: 0;
transform: translateY(-8px);
transition: all .16s ease;
overflow: hidden;
}
.user-menu.in {
opacity: 1;
transform: none;
}
/* 閫忔槑銆屾ˉ銆嶏細鐩栦綇娴眰涓婃柟鍒伴《鏍忎箣闂寸殑缂濓紝榧犳爣绉昏繃鍘讳笉浼氳鍒や负銆岀Щ鍑恒€?*/.user-menu::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
}
.um-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 18px 14px;
}
.um-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
flex: 0 0 46px;
background: var(--teal-l);
border: 2px solid var(--teal);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
color: var(--teal-d);
font-weight: 800;
}
.um-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.um-name {
font-size: 16px;
font-weight: 800;
color: #16302c;
margin-bottom: 3px;
}
.um-sub {
font-size: 12px;
color: var(--gray);
}
.um-vip {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
margin: 0 14px 12px;
padding: 11px 14px;
border-radius: 14px;
background: linear-gradient(135deg, #fff8e8, #fff2d4);
border: 1.5px solid #f0d98c;
}
.um-vip:hover {
filter: brightness(1.02);
}
.um-vip-badge {
flex: 0 0 auto;
font-size: 11px;
font-weight: 800;
color: #8a6100;
background: #f5c518;
border-radius: 6px;
padding: 2px 7px;
}
.um-vip-txt {
flex: 1;
min-width: 0;
}
.um-vip-txt b {
display: block;
font-size: 13.5px;
color: #8a6100;
}
.um-vip-txt span {
font-size: 11.5px;
color: #b08b3d;
}
.um-vip i {
font-style: normal;
color: #d3b45e;
font-size: 17px;
}
.um-list {
padding: 4px 8px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.um-row {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 12px 12px;
border-radius: 11px;
font-size: 14.5px;
color: #335550;
}
.um-row:hover {
background: var(--teal-ll);
color: var(--teal-d);
}
.um-row svg {
width: 19px;
height: 19px;
flex: 0 0 19px;
color: #7f9c98;
}
.um-row:hover svg {
color: var(--teal);
}
.um-foot {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 14px 20px;
font-size: 14.5px;
color: #c0392b;
}
.um-foot:hover {
background: #fdf1ef;
}
.um-foot svg {
width: 19px;
height: 19px;
}
/* ============================================================ 涓汉涓績 v3 鈥斺€?鍏ㄩ潰瀵规爣鎵撳瓧楦増寮忛噸鍋? 宸︿晶鍥炬爣绔栧鑸?/ 椤堕儴涓夊ぇ閫夐」鍗?/ 鐧藉崱娴捣浣撶郴 鏉垮潡锛氫釜浜轰俊鎭?/ 缁冧範鎶ュ憡 / 琛ㄧ幇涓庤瘖鏂?/ 鎴愰暱璁板綍 ============================================================ *//* 鈥斺€?澶栧３ 鈥斺€?*/.me-shell {
display: flex;
gap: 20px;
align-items: flex-start;
max-width: 1240px;
margin: 24px auto 64px;
padding: 0 24px;
}
.me-main {
flex: 1;
min-width: 0;
}
/* 鈥斺€?宸︿晶鍥炬爣绔栧鑸紙鎵撳瓧楦紡绐勬爮锛夆€斺€?*/.me-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 64px;
padding: 14px 10px;
flex-shrink: 0;
background: #fff;
border-radius: 16px;
position: sticky;
top: 86px;
box-shadow: 0 2px 10px rgba(11,92,85,.06), 0 12px 32px rgba(11,92,85,.05);
}
.me-side-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, #0f9488, #0b5c55);
color: #fff;
font-size: 17px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
flex-shrink: 0;
border: 2px solid #d9efeb;
}
.me-side-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.me-nav {
width: 44px;
height: 44px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
color: #8fa5a1;
cursor: pointer;
transition: all .18s;
position: relative;
}
.me-nav span {
display: none;
}
.me-nav svg {
width: 21px;
height: 21px;
}
.me-nav:hover {
background: #f2f8f7;
color: var(--teal-d);
}
.me-nav.on {
background: linear-gradient(135deg, #14a08f, #0b5c55);
color: #fff;
box-shadow: 0 6px 16px rgba(15,148,136,.35);
}
/* 鈥斺€?椤堕儴涓夊ぇ閫夐」鍗★紙缁冧範鎶ュ憡 / 琛ㄧ幇涓庤瘖鏂?/ 鎴愰暱璁板綍锛夆€斺€?*/.me-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #fff;
border-radius: 16px;
padding: 6px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(11,92,85,.06), 0 12px 32px rgba(11,92,85,.05);
}
.me-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 13px 0 15px;
font-size: 14.5px;
font-weight: 600;
color: #7a918d;
cursor: pointer;
position: relative;
border-radius: 12px;
transition: all .18s;
}
.me-tab svg {
width: 26px;
height: 26px;
transition: transform .18s;
}
.me-tab:hover {
color: var(--teal-d);
background: #f6fbfa;
}
.me-tab:hover svg {
transform: translateY(-2px);
}
.me-tab.on {
color: var(--teal-d);
font-weight: 800;
}
.me-tab.on svg {
color: var(--teal);
}
.me-tab.on::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 72%;
height: 3.5px;
border-radius: 3px;
background: linear-gradient(90deg, var(--teal), #5ee0c8);
}
/* 鈥斺€?閫氱敤鐧藉崱 鈥斺€?*/.me-card {
background: #fff;
border-radius: 16px;
padding: 26px 30px;
margin-bottom: 20px;
border: 1px solid #f0f6f5;
box-shadow: 0 2px 10px rgba(11,92,85,.06), 0 12px 32px rgba(11,92,85,.05);
}
.me-card-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 12px;
flex-wrap: wrap;
}
.me-card-hd h3 {
font-size: 17px;
font-weight: 800;
color: #0a2623;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.me-card-hd h3::before {
content: '';
width: 4px;
height: 16px;
border-radius: 2px;
background: linear-gradient(180deg, var(--teal), var(--teal-d));
}
.me-card-links {
display: flex;
gap: 16px;
}
.me-card-link {
font-size: 13px;
color: var(--teal-d);
font-weight: 600;
cursor: pointer;
}
.me-card-link:hover {
text-decoration: underline;
}
.me-card-tip {
font-size: 12px;
color: #9bb3ae;
}
/* 鈥斺€?鐤戦棶灏忓渾鏍?鈥斺€?*/.me-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #c9d8d5;
color: #9bb3ae;
font-size: 10px;
font-style: normal;
cursor: help;
flex-shrink: 0;
transition: all .15s;
}
.me-q:hover {
border-color: var(--teal);
color: var(--teal);
}
/* 鈥斺€?绌烘€?/ 鍔犺浇 鈥斺€?*/.me-big-empty {
text-align: center;
color: #9bb3ae;
padding: 46px 20px;
font-size: 14px;
}
.me-loading {
text-align: center;
color: #9bb3ae;
padding: 60px 0;
font-size: 14px;
}
.me-head {
margin: 4px 0 18px;
}
.me-head h2 {
font-size: 24px;
font-weight: 900;
color: #0a2623;
letter-spacing: -.4px;
margin: 2px 0;
}
.me-head p {
font-size: 13px;
color: #8fa5a1;
margin: 6px 0 0;
}
/* ============================================================ 鏉垮潡鈶?涓汉淇℃伅 ============================================================ *//* VIP 淇℃伅涓夎仈鍗?*/.me-vip3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.me-vip3-item {
background: #fbfdfc;
border: 1px solid #eef5f3;
border-radius: 12px;
padding: 16px 18px;
transition: all .2s;
}
.me-vip3-item:hover {
border-color: #cfe8e3;
background: #f6fbfa;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(11,92,85,.08);
}
.me-vip3-item label {
display: block;
font-size: 12px;
color: #8fa5a1;
margin-bottom: 8px;
}
.me-vip3-item b {
font-size: 16px;
font-weight: 800;
color: #16302c;
}
.me-vip3-item b.gold {
color: #c99417;
}
.me-vip3-days {
font-style: normal;
font-size: 24px;
font-weight: 900;
margin-right: 2px;
}
/* 澶村儚琛?*/.me-ava-row {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 22px;
}
.me-ava-big {
position: relative;
width: 78px;
height: 78px;
cursor: pointer;
flex-shrink: 0;
}
.me-ava-big img, .me-ava-big > span {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.me-ava-big > span {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0f9488, #0b5c55);
color: #fff;
font-size: 26px;
font-weight: 800;
}
.me-ava-big img + span {
display: none;
}
.me-ava-pen {
position: absolute;
right: -2px;
bottom: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--teal);
color: var(--teal);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(11,92,85,.2);
transition: transform .18s;
}
.me-ava-pen svg {
width: 13px;
height: 13px;
}
.me-ava-big:hover .me-ava-pen {
transform: rotate(-12deg) scale(1.1);
}
.me-ava-txt b {
display: block;
font-size: 15.5px;
color: #16302c;
margin-bottom: 4px;
}
.me-ava-txt span {
font-size: 12.5px;
color: #9bb3ae;
}
/* 琛ㄥ崟 */.me-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 30px;
}
.me-frow {
display: flex;
flex-direction: column;
min-width: 0;
}
.me-frow > label {
font-size: 13px;
color: #5f7a75;
margin-bottom: 8px;
font-weight: 600;
}
.me-input {
height: 46px;
width: 100%;
border: 1.5px solid #e3edeb;
background: #f8fbfa;
border-radius: 10px;
padding: 0 14px;
font-size: 14.5px;
color: #16302c;
outline: none;
transition: all .18s;
font-family: inherit;
}
.me-input::placeholder {
color: #b3c8c4;
}
.me-input:focus {
background: #fff;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(15,148,136,.12);
}
.me-static {
min-height: 46px;
display: flex;
align-items: center;
gap: 8px;
background: #f8fbfa;
border: 1.5px solid #eef5f3;
border-radius: 10px;
padding: 8px 14px;
font-size: 14.5px;
color: #16302c;
word-break: break-all;
}
.me-static em {
font-style: normal;
font-size: 12px;
color: #9bb3ae;
}
.me-static .hl {
font-style: normal;
color: var(--teal-d);
font-weight: 800;
}
.me-static.me-mono {
font-family: ui-monospace, Consolas, monospace;
font-size: 12.5px;
color: #5f7a75;
letter-spacing: .3px;
}
.me-static.ok {
color: #0a2623;
font-weight: 600;
}
.me-okdot {
width: 20px;
height: 20px;
border-radius: 50%;
background: #0f9488;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.me-okdot svg {
width: 11px;
height: 11px;
}
.me-static.link {
color: var(--teal-d);
cursor: pointer;
justify-content: space-between;
font-weight: 600;
transition: all .18s;
}
.me-static.link svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform .18s;
}
.me-static.link:hover {
border-color: var(--teal);
background: #f0faf8;
}
.me-static.link:hover svg {
transform: translateX(3px);
}
.me-acct-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e8f5f3;
color: #0b5c55;
font-size: 13px;
font-weight: 800;
padding: 5px 12px;
border-radius: 8px;
}
.me-coin {
color: #c99417;
font-size: 17px;
font-weight: 900;
}
/* 鎬у埆閫夋嫨 */.me-gender {
display: flex;
gap: 12px;
}
.me-gbtn {
flex: 1;
height: 46px;
border: 1.5px solid #e3edeb;
background: #f8fbfa;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14.5px;
color: #4a6560;
cursor: pointer;
transition: all .18s;
user-select: none;
}
.me-gbtn svg {
width: 18px;
height: 18px;
}
.me-gbtn:hover {
border-color: #b7dcd6;
}
.me-gbtn.on {
background: #e8f7f4;
border-color: var(--teal);
color: var(--teal-d);
font-weight: 700;
box-shadow: 0 3px 10px rgba(15,148,136,.15);
}
/* 搴曢儴鎿嶄綔鏉?*/.me-foot2 {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
flex-wrap: wrap;
gap: 14px;
}
.me-foot2-l {
display: flex;
gap: 18px;
}
.me-link {
font-size: 13px;
color: #8fa5a1;
cursor: pointer;
transition: color .15s;
}
.me-link:hover {
color: var(--teal);
}
.me-foot2-r {
display: flex;
align-items: center;
gap: 18px;
}
.me-save {
padding: 11px 30px;
font-size: 14.5px;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(15,148,136,.28);
}
.me-save:hover {
transform: translateY(-1px);
box-shadow: 0 9px 22px rgba(15,148,136,.34);
}
.me-logout-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
color: #c0392b;
cursor: pointer;
transition: all .15s;
}
.me-logout-link svg {
width: 15px;
height: 15px;
}
.me-logout-link:hover {
color: #96281b;
text-decoration: underline;
}
/* ============================================================ 鏉垮潡鈶?缁冧範鎶ュ憡 ============================================================ */.me-rpt-top {
display: grid;
grid-template-columns: 340px 1fr;
gap: 20px;
margin-bottom: 20px;
}
.me-rpt-top .me-card {
margin-bottom: 0;
}
/* 宸︼細鐢ㄦ埛鍗?*/.me-rpt-user {
text-align: center;
padding: 28px 22px;
}
.me-rpt-ava {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto;
}
.me-rpt-avaring {
position: absolute;
inset: -5px;
border-radius: 50%;
background: conic-gradient(from 0deg, #0f9488, #5ee0c8, #0b5c55, #14a08f, #0f9488);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
animation: meRingSpin 9s linear infinite;
}
.me-rpt-ava img, .me-rpt-avaletter {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.me-rpt-avaletter {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0f9488, #0b5c55);
color: #fff;
font-size: 32px;
font-weight: 800;
}
.me-rpt-name {
font-size: 20px;
font-weight: 900;
color: #0a2623;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.me-viptag {
font-style: normal;
font-size: 10.5px;
font-weight: 800;
color: #8a5b00;
background: linear-gradient(135deg, #ffe9a8, #f5c344);
padding: 2.5px 8px;
border-radius: 6px;
letter-spacing: .5px;
}
.me-rpt-join {
font-size: 12.5px;
color: #8fa5a1;
margin-top: 6px;
}
.me-rpt-join em {
font-style: normal;
color: var(--teal-d);
font-weight: 800;
}
.me-rpt-stats {
display: flex;
justify-content: center;
margin-top: 18px;
background: #fafdfc;
border-radius: 12px;
padding: 12px 0;
}
.me-rpt-stat {
flex: 1;
border-left: 1px solid #eef5f3;
}
.me-rpt-stat:first-child {
border-left: none;
}
.me-rpt-stat b {
display: block;
font-size: 19px;
font-weight: 900;
color: #0a2623;
}
.me-rpt-stat b svg {
width: 18px;
height: 18px;
color: var(--teal);
}
.me-rpt-stat span {
display: block;
font-size: 11.5px;
color: #8fa5a1;
margin-top: 3px;
}
.me-rpt-stat-link {
cursor: pointer;
transition: all .15s;
}
.me-rpt-stat-link:hover b {
color: var(--teal-d);
transform: translateX(2px);
}
.me-medals {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
.me-medal {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f4faf9;
border: 1.5px solid #e3edeb;
opacity: .4;
filter: grayscale(.5);
transition: all .2s;
}
.me-medal svg {
width: 24px;
height: 24px;
}
.me-medal.on {
opacity: 1;
filter: none;
background: linear-gradient(135deg, #fff8e8, #ffedb8);
border-color: #f0c33e;
box-shadow: 0 6px 14px rgba(240,195,62,.25);
}
.me-medal:hover {
transform: translateY(-4px) scale(1.06);
}
/* 鍙筹細闆疯揪 + 璇婃柇 */.me-rpt-main {
display: flex;
gap: 26px;
align-items: center;
padding: 26px 30px;
}
.me-radar-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.me-radar-wrap {
position: relative;
width: 250px;
}
.me-radar {
width: 100%;
display: block;
}
.me-radar-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -54%);
text-align: center;
pointer-events: none;
}
.me-radar-center b {
display: block;
font-size: 42px;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, #14a08f, #0b5c55);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.me-radar-center span {
font-size: 12px;
color: #8fa5a1;
}
.me-beat {
display: inline-flex;
align-items: center;
gap: 6px;
background: #e8f7f4;
color: #0b5c55;
font-size: 13px;
padding: 8px 16px;
border-radius: 999px;
}
.me-beat svg {
width: 15px;
height: 15px;
}
.me-beat b {
font-weight: 800;
}
.me-diag-side {
flex: 1;
min-width: 0;
}
.me-diag-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
color: #0a2623;
}
.me-diag-title svg {
width: 19px;
height: 19px;
color: var(--teal);
}
.me-dbox {
border-radius: 14px;
padding: 16px 18px;
margin-top: 14px;
border: 1px solid transparent;
}
.me-dbox b {
display: block;
font-size: 13.5px;
font-weight: 800;
margin-bottom: 6px;
}
.me-dbox p {
font-size: 13px;
color: #3f5e59;
line-height: 1.75;
margin: 0;
}
.me-dbox.good {
background: linear-gradient(135deg, #e9f8f4, #f5fbf9);
border-color: #c6e9e2;
}
.me-dbox.good b {
color: var(--teal-d);
}
.me-dbox.bad {
background: #fdf3e7;
border-color: #f5dcc0;
}
.me-dbox.bad b {
color: #c96a12;
}
/* 浜旇仈鏁版嵁鍗?*/.me-stat5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.me-scard {
background: #fff;
border-radius: 16px;
padding: 18px 20px;
border: 1px solid #f0f6f5;
transition: all .2s;
box-shadow: 0 2px 10px rgba(11,92,85,.06), 0 12px 32px rgba(11,92,85,.05);
}
.me-scard:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(11,92,85,.12), 0 16px 40px rgba(11,92,85,.07);
}
.me-scard-lb {
font-size: 12.5px;
color: #6b8681;
display: flex;
align-items: center;
gap: 4px;
}
.me-scard-val {
margin: 10px 0 8px;
}
.me-scard-val b {
font-size: 30px;
font-weight: 900;
color: #0a2623;
letter-spacing: -.5px;
}
.me-scard-val i {
font-style: normal;
font-size: 13px;
color: #8fa5a1;
margin-left: 3px;
}
.me-scard-dl {
min-height: 20px;
}
.me-dl {
font-style: normal;
font-size: 11.5px;
padding: 3px 9px;
border-radius: 999px;
background: #f4faf9;
color: #9bb3ae;
display: inline-block;
}
.me-dl.up {
color: #0f9488;
background: #e8f7f4;
font-weight: 600;
}
.me-dl.down {
color: #d1701f;
background: #fdf1e4;
font-weight: 600;
}
/* 缁冧範鍥炴斁 */.me-replay {
padding: 0;
overflow: hidden;
}
.me-replay-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 20px 24px 14px;
}
.me-replay-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
color: #0a2623;
}
.me-replay-title svg {
width: 18px;
height: 18px;
color: var(--teal);
}
.me-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.me-chips span {
font-size: 12.5px;
padding: 5px 14px;
border-radius: 999px;
background: #f2f7f6;
color: #6b8681;
cursor: pointer;
transition: all .18s;
}
.me-chips span:hover {
color: var(--teal-d);
background: #e8f5f3;
}
.me-chips span.on {
background: linear-gradient(135deg, #14a08f, #0b5c55);
color: #fff;
font-weight: 600;
box-shadow: 0 4px 10px rgba(15,148,136,.3);
}
.me-rtable {
width: 100%;
border-collapse: collapse;
}
.me-rtable th {
font-size: 12.5px;
color: #8fa5a1;
font-weight: 600;
text-align: left;
padding: 10px 12px;
background: #fafdfc;
white-space: nowrap;
}
.me-rtable td {
font-size: 13.5px;
color: #335550;
padding: 12px;
border-top: 1px solid #f0f6f5;
}
.me-rtable th:first-child, .me-rtable td:first-child {
padding-left: 24px;
}
.me-rtable th:last-child, .me-rtable td:last-child {
padding-right: 24px;
}
.me-rtable tbody tr {
transition: background .15s;
}
.me-rtable tbody tr:hover {
background: #f7fbfa;
}
.me-td-time {
color: #8fa5a1;
font-size: 12.5px;
white-space: nowrap;
}
.me-td-content {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: #16302c;
}
.me-modechip {
font-size: 11.5px;
background: #e8f5f3;
color: #0b5c55;
padding: 3px 10px;
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
}
.me-stars i {
font-style: normal;
color: #dfe9e7;
letter-spacing: 1px;
font-size: 14px;
}
.me-stars i.on {
color: #f0b429;
text-shadow: 0 0 6px rgba(240,180,41,.35);
}
.me-td-speed {
font-size: 15px;
font-weight: 800;
color: #0b5c55;
}
.me-replay-foot {
text-align: center;
font-size: 12px;
color: #9bb3ae;
padding: 12px 0 14px;
}
/* VIP 閿佸畾鍖?*/.me-lockzone {
position: relative;
}
.me-lockzone .me-rtable.ghost {
opacity: .5;
}
.me-lockcard {
width: min(500px, 94%);
background: linear-gradient(180deg, #fff 0%, #f2faf8 100%);
border: 1.5px solid #c4e5df;
border-radius: 18px;
padding: 26px 28px;
text-align: center;
box-shadow: 0 20px 48px rgba(11,92,85,.16);
position: relative;
z-index: 2;
}
.me-lockzone .me-lockcard {
margin: -70px auto -6px;
}
.me-lockico {
width: 46px;
height: 46px;
margin: 0 auto;
border-radius: 14px;
background: linear-gradient(135deg, #14a08f, #0b5c55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(15,148,136,.35);
}
.me-lockico svg {
width: 22px;
height: 22px;
}
.me-lockcard b {
display: block;
font-size: 16px;
font-weight: 800;
color: #0a2623;
margin-top: 12px;
}
.me-lockcard p {
font-size: 13px;
color: #6b8681;
line-height: 1.7;
margin: 8px 0 14px;
}
.me-lockchips {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.me-lockchips span {
font-size: 11.5px;
background: #fdf6e3;
color: #a16e0a;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid #f0e2b8;
}
.me-lockbtn {
margin-top: 2px;
}
/* ============================================================ 鏉垮潡鈶?琛ㄧ幇涓庤瘖鏂? ============================================================ */.me-an-head {
margin-bottom: 20px;
}
.me-an-meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.me-vip-ex {
background: linear-gradient(135deg, #f0c33e, #d98c1f);
color: #fff;
font-size: 11.5px;
font-weight: 800;
padding: 4px 12px;
border-radius: 999px;
letter-spacing: .5px;
box-shadow: 0 4px 12px rgba(217,140,31,.3);
}
.me-an-time {
font-size: 12.5px;
color: #8fa5a1;
}
.me-an-titlerow {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.me-an-titlerow h2 {
font-size: 26px;
font-weight: 900;
color: #0a2623;
letter-spacing: -.5px;
margin: 0;
}
.me-an-titlerow p {
font-size: 13.5px;
color: #8fa5a1;
margin: 8px 0 0;
max-width: 560px;
line-height: 1.7;
}
.me-range {
display: flex;
background: #eef5f3;
padding: 4px;
border-radius: 999px;
gap: 2px;
flex-shrink: 0;
}
.me-range span {
padding: 7px 18px;
border-radius: 999px;
font-size: 13px;
color: #6b8681;
cursor: pointer;
transition: all .18s;
}
.me-range span:hover {
color: var(--teal-d);
}
.me-range span.on {
background: #fff;
color: var(--teal-d);
font-weight: 700;
box-shadow: 0 2px 8px rgba(11,92,85,.12);
}
/* 鍏仈妯″紡鎻掔敾鍗?*/.me-mcards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 8px;
}
.me-mcard {
background: #fff;
border-radius: 16px;
padding: 20px 22px;
border: 1px solid #f0f6f5;
transition: all .22s;
box-shadow: 0 2px 10px rgba(11,92,85,.06), 0 12px 32px rgba(11,92,85,.05);
}
.me-mcard:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(11,92,85,.13), 0 18px 44px rgba(11,92,85,.07);
}
.me-mcard.off {
background: linear-gradient(180deg, #fdfefe, #fafcfc);
}
.me-mcard-hd {
display: flex;
align-items: center;
gap: 8px;
}
.me-mcard-hd > b {
font-size: 15.5px;
font-weight: 800;
color: #0a2623;
white-space: nowrap;
}
.me-mprog {
flex: 1;
max-width: 70px;
height: 5px;
background: #eaf4f2;
border-radius: 3px;
overflow: hidden;
margin-left: auto;
min-width: 30px;
}
.me-mprog i {
display: block;
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #14a08f, #5ee0c8);
transition: width .7s cubic-bezier(.2,.7,.3,1);
}
.me-mprog-n {
font-size: 11px;
color: #9bb3ae;
flex-shrink: 0;
}
.me-mcard-fig {
background: #f6faf9;
border-radius: 14px;
padding: 16px;
margin: 14px 0 6px;
text-align: center;
overflow: hidden;
}
.me-mcard-fig img {
height: 140px;
max-width: 100%;
object-fit: contain;
transition: transform .25s;
}
.me-mcard:hover .me-mcard-fig img {
transform: scale(1.05);
}
.me-mcard-wpm {
text-align: center;
margin-top: 8px;
}
.me-mcard-wpm b {
font-size: 40px;
font-weight: 900;
color: #0a2623;
letter-spacing: -1px;
}
.me-mcard-wpm span {
font-size: 13px;
color: #8fa5a1;
margin-left: 4px;
}
.me-mcard-sub {
text-align: center;
font-size: 12px;
color: #9bb3ae;
margin: 2px 0 16px;
}
.me-mcard-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px dashed #e3edeb;
padding-top: 14px;
}
.me-mcard-stats > div {
text-align: center;
}
.me-mcard-stats span {
display: block;
font-size: 11.5px;
color: #9bb3ae;
margin-bottom: 4px;
}
.me-mcard-stats b {
font-size: 14.5px;
font-weight: 800;
color: #16302c;
}
/* 娣卞害璇婃柇 */.me-deep h2 {
font-size: 22px;
font-weight: 900;
color: #0a2623;
margin: 30px 0 8px;
letter-spacing: -.4px;
}
.me-deep > p {
font-size: 13.5px;
color: #8fa5a1;
margin: 0 0 18px;
line-height: 1.7;
}
.me-heat-card {
padding: 24px 28px;
}
.me-heat-hd {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.me-heat-t {
display: flex;
align-items: center;
gap: 8px;
font-size: 15.5px;
font-weight: 800;
color: #0a2623;
}
.me-heat-t svg {
width: 19px;
height: 19px;
color: var(--teal);
}
.me-heat-lg {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: #8fa5a1;
}
.me-heat-bar {
width: 130px;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg, #dbeefc, #b3d9f5, #7fb8e8, #4a90d9, #2264b0);
}
.me-heat-note {
font-size: 12px;
color: #9bb3ae;
margin: 10px 0 18px;
}
.me-kb-wrap {
position: relative;
}
.me-kb-wrap.locked .me-kb {
filter: blur(3px) saturate(.8);
opacity: .55;
pointer-events: none;
}
.me-kb {
background: #f7fbfa;
border: 1px solid #eef5f3;
border-radius: 14px;
padding: 16px 14px;
}
.me-kbrow {
display: flex;
gap: 6px;
margin-bottom: 6px;
justify-content: center;
}
.me-kbrow:last-child {
margin-bottom: 0;
}
.me-kbkey {
flex: 1;
min-width: 0;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e0ecea;
border-bottom-width: 2.5px;
border-radius: 7px;
font-size: 12px;
font-weight: 700;
color: #3f5e59;
padding: 0 2px;
white-space: nowrap;
transition: transform .15s, box-shadow .15s;
}
.me-kbkey:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(11,92,85,.15);
}
.me-kbkey[style*="background"] {
color: #fff;
border-color: transparent;
border-bottom-color: rgba(0,0,0,.08);
text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.me-kbkey.w15 {
flex: 1.7;
}
.me-kbkey.w18 {
flex: 2;
}
.me-kbkey.w19 {
flex: 2.1;
}
.me-kbkey.w22 {
flex: 2.4;
}
.me-kbkey.w23 {
flex: 2.6;
}
.me-kbkey.w66 {
flex: 8.4;
}
.me-lockcard-abs {
position: absolute;
inset: -6px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.me-lockcard-abs .me-lockcard {
margin: 0;
}
/* 钖勫急瀛楄瘝 */.me-weaktags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.me-weaktag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
transition: all .18s;
cursor: default;
}
.me-weaktag i {
font-style: normal;
width: 19px;
height: 19px;
border-radius: 50%;
background: rgba(255,255,255,.85);
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.me-weaktag:hover {
transform: translateY(-3px) scale(1.04);
}
.me-weaktag.me-wt-1 {
background: linear-gradient(135deg,#fff0de,#ffe0b0);
border: 1.5px solid #f5b470;
color: #b5651d;
box-shadow: 0 4px 14px rgba(217,140,31,.2);
}
.me-weaktag.me-wt-1 i {
color: #d98c1f;
}
.me-weaktag.me-wt-2 {
background: linear-gradient(135deg,#fff4e0,#ffe8b3);
border: 1.5px solid #ffd5a8;
color: #a15a10;
}
.me-weaktag.me-wt-2 i {
color: #d98c1f;
}
.me-weaktag.me-wt-3 {
background: linear-gradient(135deg,#fdf9ef,#fff4e0);
border: 1.5px solid #ffe8b3;
color: #a16e0a;
}
.me-weaktag.me-wt-3 i {
color: #a16e0a;
}
.me-weaktag.me-wt-4 {
background: #fdf9ef;
border: 1.5px solid #f5e6bc;
color: #b58a3a;
}
.me-weaktag.me-wt-4 i {
color: #b58a3a;
}
.me-weaktag.me-wt-5 {
background: #fafcfb;
border: 1.5px solid var(--line);
color: #7a6f50;
}
.me-weaktag.me-wt-5 i {
color: #a8a090;
}
/* ============================================================ 鏉垮潡鈶?鎴愰暱璁板綍 ============================================================ */.me-tstats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.me-tstat {
background: #fff;
border-radius: 16px;
padding: 22px 24px;
border: 1px solid #f0f6f5;
transition: all .2s;
box-shadow: 0 2px 10px rgba(11,92,85,.06), 0 12px 32px rgba(11,92,85,.05);
}
.me-tstat:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(11,92,85,.12), 0 16px 40px rgba(11,92,85,.07);
}
.me-tstat-ico {
width: 44px;
height: 44px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.me-tstat-ico svg {
width: 22px;
height: 22px;
}
.me-tstat-ico.c1 {
background: linear-gradient(135deg, #e3f6f3, #cdeee8);
color: #0f9488;
}
.me-tstat-ico.c2 {
background: linear-gradient(135deg, #e8f0fe, #d8e5ff);
color: #2563eb;
}
.me-tstat-ico.c3 {
background: linear-gradient(135deg, #fff2dd, #ffe6c2);
color: #d98c1f;
}
.me-tstat-lb {
font-size: 12.5px;
color: #6b8681;
margin: 14px 0 6px;
}
.me-tstat-v b {
font-size: 30px;
font-weight: 900;
color: #0a2623;
letter-spacing: -.5px;
}
.me-tstat-v span {
font-size: 13px;
color: #8fa5a1;
margin-left: 4px;
}
.me-tstat-bar {
height: 5px;
background: #eaf4f2;
border-radius: 3px;
margin-top: 14px;
overflow: hidden;
}
.me-tstat-bar i {
display: block;
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #14a08f, #5ee0c8);
transition: width .7s cubic-bezier(.2,.7,.3,1);
}
.me-tstat.up .me-tstat-v b {
color: #0f9488;
}
.me-tstat.down .me-tstat-v b {
color: #d1701f;
}
.me-tstat.down .me-tstat-bar i {
background: linear-gradient(90deg, #e8833a, #f0b429);
}
/* 姣忔棩閫熷害鏌辩姸鍥?*/.me-bigchart {
padding: 22px 26px;
}
.me-bc-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.me-bc-head h3 {
font-size: 15.5px;
font-weight: 800;
color: #0a2623;
margin: 0;
}
.me-bc-head span {
font-size: 12.5px;
color: #8fa5a1;
}
.me-bc-area {
display: flex;
align-items: stretch;
gap: 8px;
height: 250px;
padding-top: 8px;
}
.me-bc-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.me-bc-vals {
height: 18px;
margin-bottom: 4px;
}
.me-bc-val {
font-size: 11px;
font-weight: 800;
color: var(--teal-d);
}
.me-bc-bar {
width: min(70%, 30px);
border-radius: 6px 6px 2px 2px;
background: linear-gradient(180deg, #14b8a6, #0b5c55);
min-height: 4px;
max-height: calc(100% - 58px);
transition: height .6s cubic-bezier(.2,.7,.3,1), filter .18s;
}
.me-bc-col:hover .me-bc-bar {
filter: brightness(1.18);
}
.me-bc-up, .me-bc-down {
font-size: 9px;
line-height: 1;
margin-top: 3px;
}
.me-bc-up {
color: #0f9488;
}
.me-bc-down {
color: #e8833a;
}
.me-bc-date {
font-size: 10.5px;
color: #9bb3ae;
margin-top: 6px;
white-space: nowrap;
}
/* 鏄庣粏鍒楄〃 */.me-table2 {
padding: 0;
overflow: hidden;
}
.me-table2-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 20px 24px 14px;
}
.me-table2-head h3 {
font-size: 15.5px;
font-weight: 800;
color: #0a2623;
margin: 0;
}
.me-table2-head span {
font-size: 12.5px;
color: #8fa5a1;
}
.me-table2-body {
border-top: 1px solid #f0f6f5;
}
.me-table2-row {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
padding: 13px 24px;
font-size: 13.5px;
color: #335550;
transition: background .15s;
}
.me-table2-row:hover {
background: #f7fbfa;
}
.me-table2-row b {
color: #0b5c55;
font-weight: 700;
}
.me-table2-row span {
text-align: right;
}
.me-table2-row span b.ok {
color: #0f9488;
}
.me-table2-row.me-t2-h {
font-size: 12px;
color: #8fa5a1;
font-weight: 600;
padding-bottom: 10px;
}
.me-table2-row.me-t2-h b, .me-table2-row.me-t2-h span {
color: #8fa5a1;
font-weight: 600;
}
/* ============================================================ 鍏ュ満鍔ㄦ晥 ============================================================ */@keyframes meUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
}
.me-main > * {
animation: meUp .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.me-main > *:nth-child(2) {
animation-delay: .06s;
}
.me-main > *:nth-child(3) {
animation-delay: .12s;
}
.me-main > *:nth-child(4) {
animation-delay: .18s;
}
.me-main > *:nth-child(5) {
animation-delay: .24s;
}
.me-main > *:nth-child(6) {
animation-delay: .3s;
}
@keyframes meRingSpin {
to {
transform: rotate(360deg);
}
}
@keyframes meRadarIn {
from {
opacity: 0;
transform: scale(.55);
}
}
.me-radar polygon:nth-of-type(5), .me-radar circle {
transform-box: fill-box;
transform-origin: center;
animation: meRadarIn .7s cubic-bezier(.2,.7,.3,1) .15s backwards;
}
@media (prefers-reduced-motion: reduce) {
.me-main > *, .me-rpt-avaring, .me-radar polygon:nth-of-type(5), .me-radar circle {
animation: none;
}
}
/* ============================================================ 鍝嶅簲寮? ============================================================ */@media (max-width: 1100px) {
.me-rpt-top {
grid-template-columns: 1fr;
}
.me-stat5 {
grid-template-columns: repeat(3, 1fr);
}
.me-mcards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 760px) {
.me-shell {
flex-direction: column;
gap: 14px;
padding: 0 14px;
margin: 16px auto 56px;
}
.me-side {
flex-direction: row;
width: 100%;
position: static;
padding: 10px 12px;
overflow-x: auto;
}
.me-side-avatar {
width: 38px;
height: 38px;
font-size: 15px;
margin: 0 4px 0 0;
}
.me-nav {
flex: 0 0 auto;
}
.me-tab {
font-size: 13px;
padding: 10px 0 12px;
}
.me-tab svg {
width: 22px;
height: 22px;
}
.me-card {
padding: 20px 18px;
}
.me-vip3 {
grid-template-columns: 1fr;
}
.me-form {
grid-template-columns: 1fr;
gap: 16px;
}
.me-stat5 {
grid-template-columns: repeat(2, 1fr);
}
.me-mcards {
grid-template-columns: 1fr;
}
.me-rpt-main {
flex-direction: column;
}
.me-radar-wrap {
width: 220px;
}
.me-tstats {
grid-template-columns: 1fr;
}
.me-an-titlerow h2 {
font-size: 22px;
}
.me-range span {
padding: 6px 13px;
font-size: 12.5px;
}
.me-kb {
padding: 10px 8px;
}
.me-kbrow {
gap: 3px;
margin-bottom: 3px;
}
.me-kbkey {
height: 32px;
font-size: 9.5px;
border-radius: 5px;
}
.me-mcard-fig img {
height: 110px;
}
.me-bc-area {
height: 190px;
gap: 4px;
}
.me-rtable {
display: block;
overflow-x: auto;
}
.me-table2-row {
grid-template-columns: 1.2fr 1fr 1fr .8fr;
padding: 12px 14px;
font-size: 12.5px;
}
.me-table2-head, .me-replay-hd {
padding-left: 16px;
padding-right: 16px;
}
.me-rtable th:first-child, .me-rtable td:first-child {
padding-left: 16px;
}
.me-rtable th:last-child, .me-rtable td:last-child {
padding-right: 16px;
}
.me-foot2 {
flex-direction: column;
align-items: stretch;
}
.me-foot2-r {
justify-content: space-between;
}
.me-lockzone .me-lockcard {
margin-top: -40px;
}
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--teal-l);
border: 2px solid var(--teal);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
overflow: hidden;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-nick {
font-size: 14px;
font-weight: 600;
color: var(--teal-d);
}
/* 娣辫壊椤舵爮涓嬶細澶村儚鍔犱竴鍦堝崐閫忔槑鐧借竟锛孷IP 鏍囨敼鎴愰噾搴曟繁瀛楋紙鍘熼噾搴曢噾妫曞瓧鍦ㄩ粦搴曚笂绯婃垚涓€鍥級 */body.dark-topbar #userBox .user-avatar,body.is-home #userBox .user-avatar {
border-color: rgba(255,255,255,.35);
background: rgba(255,255,255,.12);
}
body.dark-topbar #userBox .vip-tag,body.is-home #userBox .vip-tag {
color: #7a5200;
background: #f5c518;
border-color: #f5c518;
font-weight: 800;
font-size: 11px;
padding: 2px 7px;
}
.vip-tag {
font-size: 12px;
color: #b8860b;
background: #fff6e0;
border: 1px solid #f0d98c;
border-radius: 10px;
padding: 2px 8px;
font-weight: 700;
}
.btn {
border: none;
cursor: pointer;
border-radius: 22px;
font-size: 14px;
font-weight: 700;
padding: 9px 22px;
transition: all .15s;
}
.btn-teal {
background: var(--teal);
color: #fff;
}
.btn-teal:hover {
background: var(--teal-d);
}
.btn-outline {
background: #fff;
color: var(--teal);
border: 1.5px solid var(--teal);
}
.btn-outline:hover {
background: var(--teal-l);
}
.btn-red {
background: var(--red);
color: #fff;
}
.btn:disabled {
background: #b8d8d3;
color: #f0f7f6;
cursor: not-allowed;
border: none;
}
/* ===== 涓诲尯鍩?===== */.main {
flex: 1;
max-width: 1080px;
width: 100%;
margin: 0 auto;
padding: 28px 24px 60px;
}
/* ===== 棣栭〉 hero ===== */.hero-card {
background: linear-gradient(135deg, #14b3a6, #0b7a70);
border-radius: 18px;
padding: 34px 40px;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26px;
box-shadow: 0 12px 30px rgba(15,148,136,0.25);
}
.hero-title {
font-size: 30px;
font-weight: 800;
margin-bottom: 10px;
}
.hero-sub {
font-size: 15px;
opacity: .92;
line-height: 1.7;
}
.hero-keys {
display: flex;
gap: 8px;
margin-top: 18px;
}
.key-cap {
background: rgba(255,255,255,.18);
border: 1.5px solid rgba(255,255,255,.5);
border-radius: 8px;
padding: 6px 12px;
font-size: 14px;
font-weight: 700;
}
/* hero 鍙充晶灏忛敭鐩樿楗帮紙鐧借壊鍗婇€忔槑閿附锛? 琛岋級*/.hero-kb-ico {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.hk-row {
display: flex;
gap: 8px;
}
.hk-row span {
width: 26px;
height: 22px;
border-radius: 6px;
background: rgba(255,255,255,.16);
border: 1.5px solid rgba(255,255,255,.45);
box-sizing: border-box;
}
.hk-row .hk-wide {
width: 40px;
}
.hk-row .hk-wide2 {
width: 52px;
}
.section-title {
font-size: 20px;
font-weight: 800;
color: var(--teal-d);
margin: 28px 0 16px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::before {
content: '';
width: 5px;
height: 20px;
border-radius: 3px;
background: var(--teal);
}
/* 妯″紡鍗＄墖 */.mode-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.mode-card {
background: #fff;
border: 1.5px solid var(--line);
border-radius: 16px;
padding: 24px;
cursor: pointer;
transition: all .18s;
position: relative;
overflow: hidden;
}
.mode-card:hover {
border-color: var(--teal);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(15,148,136,0.16);
}
.mode-ico {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--teal-l);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin-bottom: 14px;
}
.mode-name {
font-size: 18px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 6px;
}
.mode-desc {
font-size: 13px;
color: var(--gray);
line-height: 1.6;
}
.mode-badge {
position: absolute;
top: 14px;
right: 14px;
font-size: 11px;
background: #fef0ee;
color: var(--red);
border-radius: 8px;
padding: 3px 8px;
font-weight: 700;
}
.mode-badge.vip {
background: #fff6e0;
color: #b8860b;
}
/* ===== 鐧诲綍缁戝畾椤?===== */.login-wrap {
max-width: 520px;
margin: 40px auto;
}
.login-card {
background: #fff;
border: 1.5px solid var(--line);
border-radius: 20px;
padding: 38px 40px;
box-shadow: 0 12px 36px rgba(15,148,136,0.1);
}
.login-title {
font-size: 24px;
font-weight: 800;
color: var(--teal-d);
text-align: center;
}
.login-sub {
text-align: center;
color: var(--gray);
font-size: 14px;
margin: 10px 0 28px;
line-height: 1.7;
}
.code-display {
display: flex;
justify-content: center;
gap: 14px;
margin: 26px 0 10px;
}
.code-digit {
width: 62px;
height: 76px;
border: 2.5px solid var(--teal);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: 800;
color: var(--teal-d);
background: var(--teal-ll);
}
.code-status {
text-align: center;
font-size: 14px;
color: var(--gray);
margin: 18px 0 8px;
min-height: 22px;
}
.code-status .wait {
color: var(--teal);
font-weight: 700;
}
.login-steps {
background: var(--teal-ll);
border-radius: 14px;
padding: 18px 22px;
margin-top: 24px;
font-size: 14px;
color: #335550;
line-height: 2.1;
}
.login-steps b {
color: var(--teal-d);
}
.login-tip {
text-align: center;
font-size: 12px;
color: #9bb8b3;
margin-top: 20px;
}
/* 寰俊鎵爜鐧诲綍 */.scan-title {
text-align: center;
font-size: 17px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 14px;
}
.scan-qr {
display: flex;
justify-content: center;
min-height: 260px;
align-items: center;
}
.scan-qr iframe {
width: 260px !important;
height: 260px !important;
}
.scan-tip {
text-align: center;
font-size: 13px;
color: var(--gray);
margin-top: 6px;
}
/* 灏忕▼搴忕爜鎵爜鐧诲綍锛堜富鍏ュ彛锛?*/.qr-frame {
display: flex;
justify-content: center;
align-items: center;
width: 236px;
height: 236px;
margin: 0 auto 10px;
border: 1.5px solid var(--line);
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.qr-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.qr-img:not([src]) {
visibility: hidden;
}
.qr-status {
text-align: center;
font-size: 14px;
color: var(--gray);
margin: 12px 0 8px;
min-height: 22px;
}
/* 鎶樺彔寮忔墜杈撳叆鍙ｏ細鏁磋鍙偣 */.qr-toggle {
cursor: pointer;
user-select: none;
}
.qr-toggle:hover span {
color: var(--teal);
}
.login-divider {
display: flex;
align-items: center;
text-align: center;
margin: 24px 0 20px;
color: #b3c8c4;
font-size: 13px;
}
.login-divider::before, .login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.login-divider span {
padding: 0 14px;
}
.btn-block {
width: 100%;
padding: 13px;
font-size: 16px;
margin-top: 8px;
}
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: #fff;
border-radius: 50%;
animation: spin .7s linear infinite;
vertical-align: -3px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.poll-dot {
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
0%,100% {
opacity: 1;
}
50% {
opacity: .35;
}
}
/* ===== 缁冧範椤?===== */.practice-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.practice-title {
font-size: 22px;
font-weight: 800;
color: var(--teal-d);
display: flex;
align-items: center;
gap: 10px;
}
.back-link {
color: var(--teal);
font-size: 14px;
cursor: pointer;
font-weight: 700;
}
.back-link:hover {
text-decoration: underline;
}
.stat-bar {
display: flex;
gap: 14px;
margin-bottom: 20px;
}
.stat-box {
flex: 1;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 16px 20px;
text-align: center;
}
.stat-num {
font-size: 30px;
font-weight: 800;
color: var(--teal-d);
line-height: 1.1;
}
.stat-num.warn {
color: var(--red);
}
.stat-label {
font-size: 13px;
color: var(--gray);
margin-top: 4px;
}
.practice-card {
background: #fff;
border: 1.5px solid var(--line);
border-radius: 20px;
padding: 40px 44px;
margin-bottom: 20px;
}
.typing-area {
outline: none;
}
.word-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px 34px;
margin-bottom: 30px;
}
.word-row.text-mode {
flex-direction: column;
gap: 10px;
}
.pinyin-line {
line-height: 1.5;
}
.word-unit {
text-align: center;
padding: 8px 6px;
border-radius: 12px;
min-width: 70px;
}
.word-unit.active {
background: var(--teal-l);
}
.word-hanzi {
font-size: 46px;
font-weight: 800;
color: #9fb8b3;
line-height: 1.2;
letter-spacing: 4px;
}
.word-unit.active .word-hanzi {
color: var(--teal-d);
}
.word-pinyin {
font-size: 22px;
font-weight: 700;
color: #b9cdc9;
margin-top: 8px;
letter-spacing: 2px;
min-height: 30px;
}
.word-unit.active .word-pinyin {
color: var(--teal);
}
.typed-hint {
font-size: 17px;
color: #7dc9c0;
letter-spacing: 3px;
min-height: 24px;
margin-top: 4px;
font-weight: 700;
}
.pinyin-line {
text-align: center;
font-size: 34px;
font-weight: 800;
letter-spacing: 6px;
min-height: 48px;
margin: 8px 0 4px;
}
.py-cur {
color: var(--teal);
}
.py-done {
color: var(--teal-d);
}
.py-todo {
color: #c9d9d6;
}
.py-wrong {
color: var(--red);
}
.input-line {
text-align: center;
margin-top: 26px;
}
.typing-input {
width: 100%;
max-width: 460px;
height: 58px;
border: 2.5px solid var(--teal);
border-radius: 14px;
font-size: 26px;
font-weight: 700;
text-align: center;
letter-spacing: 8px;
color: var(--teal-d);
background: var(--teal-ll);
outline: none;
}
.typing-input:focus {
box-shadow: 0 0 0 4px rgba(15,148,136,.15);
}
.typing-input.wrong {
border-color: var(--red);
animation: shake .3s;
}
@keyframes shake {
0%,100%{
transform:translateX(0)}
25%{
transform:translateX(-6px)}
75%{
transform:translateX(6px)}
}
.typing-feedback {
text-align: center;
font-size: 14px;
color: var(--gray);
margin-top: 14px;
}
.finish-card {
text-align: center;
padding: 50px 20px;
}
.finish-title {
font-size: 28px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 6px;
}
.finish-sub {
color: var(--gray);
font-size: 15px;
margin-bottom: 30px;
}
.finish-stats {
display: flex;
justify-content: center;
gap: 18px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.fs-item {
background: var(--teal-ll);
border-radius: 14px;
padding: 18px 30px;
min-width: 130px;
}
.fs-num {
font-size: 34px;
font-weight: 800;
color: var(--teal-d);
}
.fs-label {
font-size: 13px;
color: var(--gray);
margin-top: 4px;
}
.finish-btns {
display: flex;
gap: 14px;
justify-content: center;
}
/* ===== 鎺掕姒?===== */.rank-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.rank-tab {
padding: 10px 24px;
border-radius: 22px;
background: #fff;
border: 1.5px solid var(--line);
cursor: pointer;
font-size: 15px;
font-weight: 700;
color: var(--gray);
transition: all .15s;
}
.rank-tab.active {
background: var(--teal);
color: #fff;
border-color: var(--teal);
}
.rank-list {
background: #fff;
border: 1.5px solid var(--line);
border-radius: 18px;
overflow: hidden;
}
.rank-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 24px;
border-bottom: 1px solid #eef6f4;
}
.rank-row:last-child {
border-bottom: none;
}
.rank-row.me {
background: var(--teal-ll);
}
.rank-no {
width: 34px;
height: 34px;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: var(--gray);
background: #f2f7f6;
}
.rank-no.r1 {
background: linear-gradient(135deg,#ffd86b,#f0a92e);
color: #fff;
}
.rank-no.r2 {
background: linear-gradient(135deg,#d7e0ea,#aab8c4);
color: #fff;
}
.rank-no.r3 {
background: linear-gradient(135deg,#e8b48d,#c98a56);
color: #fff;
}
.rank-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex: none;
background: var(--teal-l);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border: 2px solid var(--line);
}
.rank-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rank-name {
flex: 1;
font-size: 15px;
font-weight: 600;
color: #335550;
display: flex;
align-items: center;
gap: 8px;
}
.rank-vip {
font-size: 11px;
color: #b8860b;
background: #fff6e0;
border: 1px solid #f0d98c;
border-radius: 8px;
padding: 1px 7px;
}
.rank-val {
font-size: 17px;
font-weight: 800;
color: var(--teal-d);
}
.rank-empty {
text-align: center;
padding: 60px;
color: var(--gray);
font-size: 15px;
}
.footer {
text-align: center;
padding: 22px;
color: var(--gray);
font-size: 13px;
border-top: 1px solid var(--line);
background: #fff;
}
.footer-sep {
margin: 0 8px;
}
.toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
background: rgba(11,92,85,.95);
color: #fff;
padding: 12px 26px;
border-radius: 24px;
font-size: 14px;
z-index: 200;
animation: toastIn .25s;
}
.modal-mask {
position: fixed;
inset: 0;
background: rgba(10,38,35,.52);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 150;
animation: meModalMask .2s ease-out;
}
@keyframes meModalMask {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-card {
background: linear-gradient(180deg, #ffffff 0%, #fcfefd 100%);
border-radius: 22px;
padding: 30px 32px 24px;
width: 430px;
max-width: calc(92 * var(--pg-vw, 1vw));
box-shadow: 0 24px 64px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.08);
border: 1px solid rgba(15,148,136,.14);
position: relative;
overflow: hidden;
animation: meModalPop .28s cubic-bezier(.2,.8,.3,1);
}
.modal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--teal), #5ee0c8, var(--teal-d));
border-radius: 22px 22px 0 0;
}
@keyframes meModalPop {
from {
opacity: 0;
transform: translateY(14px) scale(.97);
}
to {
opacity: 1;
transform: none;
}
}
.modal-title {
font-size: 21px;
font-weight: 900;
margin-bottom: 10px;
background: linear-gradient(135deg, var(--teal-d), var(--teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (max-width: 760px) {
.mode-grid {
grid-template-columns: 1fr;
}
.hero-card {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 26px;
}
.word-hanzi {
font-size: 34px;
}
.pinyin-line {
font-size: 26px;
letter-spacing: 3px;
}
.practice-card {
padding: 24px 18px;
}
.topnav {
display: none;
}
.user-box {
margin-left: auto;
}
}
/* ================================================================== *//* ===== 楂樼骇瀹樼綉椋庨椤碉紙lp- 鍓嶇紑锛屼粎棣栭〉浣跨敤锛屼笉褰卞搷缁冧範椤碉級===== *//* ================================================================== */body {
overflow-x: hidden;
}
/* 顶栏本体恒透明 —— 底色由内部那条悬浮胶囊承担（见 drill.css 的 .topbar-inner）。 这三条曾经给它加黑底，现在会把胶囊衬成「黑条上又一条胶囊」，必须清掉。 */body.dark-topbar .topbar,body.is-home .topbar,body.practice-mode .topbar {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
}
body.dark-topbar .brand-logo {
background: #fff;
color: var(--teal-d);
}
body.dark-topbar .brand-name {
color: #fff;
}
body.dark-topbar .brand-sub {
color: rgba(255,255,255,.62);
}
body.dark-topbar .nav-item {
color: rgba(255,255,255,.85);
}
body.dark-topbar .nav-item:hover {
background: rgba(255,255,255,.15);
color: #fff;
}
body.dark-topbar .nav-item.active {
background: #fff;
color: #000;
}
/* 閫変腑椤硅鎮仠鏃讹細淇濇寔鐧藉簳 + 榛戝瓧锛堝師鏉ョ户鎵?hover 鐨勬繁缁垮瓧锛岀櫧搴曟繁缁垮嚑涔庣湅涓嶆竻锛夈€? 鏀惧湪 active 瑙勫垯涔嬪悗锛屾墠鑳界洊杩囦笂闈㈤偅鏉?hover銆?*/body.dark-topbar .nav-item.active:hover {
background: #fff;
color: #000;
}
body.dark-topbar #userBox .btn-teal {
background: #fff;
color: #000;
}
body.dark-topbar #userBox .btn-teal:hover {
background: var(--teal-l);
}
body.dark-topbar #userBox .user-nick {
color: #fff;
}
body.is-home .brand-logo {
background: #fff;
color: var(--teal-d);
}
body.is-home .brand-name {
color: #fff;
}
body.is-home .brand-sub {
color: rgba(255,255,255,.62);
}
body.is-home .nav-item {
color: rgba(255,255,255,.85);
}
body.is-home .nav-item:hover {
background: rgba(255,255,255,.15);
color: #fff;
}
body.is-home .nav-item.active {
background: #fff;
color: #000;
}
body.is-home .nav-item.active:hover {
background: #fff;
color: #000;
}
body.is-home #userBox .btn-teal {
background: #fff;
color: #000;
}
body.is-home #userBox .btn-teal:hover {
background: var(--teal-l);
}
body.is-home #userBox .user-nick {
color: #fff;
}
/* 棣栭〉锛氶《鏍忓凡闅愯棌锛堝鑸湪宸︿晶杈规爮锛夛紝鍙渶鎶垫秷 .main 鐨勪笂鍐呰竟璺?28锛? 璁╂繁鑹?hero 椤跺埌鍐呭鍒楁渶涓娿€傦紙鍘熸潵杩樿鍑?64 鐨勯《鏍忛珮锛岀幇鍦ㄩ《鏍忔病浜嗐€傦級 */.home-page {
margin-top: -28px;
}
/* 首页是「全宽」版式（深色 hero / 演示窗轮播 / 深色页脚都要铺满内容列）， 不能受 .main 那个 1080px 阅读宽度的限制 —— 这里把上限放开、内边距归零， 由内部各区块自己控制文字宽度（.lp-hero-inner 等都有 max-width + auto 居中）。 */.main:has(.home-page) {
max-width: none;
padding: 0;
}
/* ===== Hero 鍖猴紙鍏ㄥ娣辫壊锛?==== 鍔犱簡宸︿晶杈规爮鍚庯紝銆岀牬瀹瑰櫒閾烘弧鏁村睆銆嶄笉鑳藉啀鐩存帴鐢?100vw 鈥斺€?閭ｆ牱浼氱洊鍒拌竟鏍忓簳涓嬨€? 鏀规垚鎸夈€屽彲鐢ㄥ搴?= 100vw - 杈规爮瀹姐€嶆潵绠楋紝margin-left 鐢ㄥ悓鏍风殑鍏紡鎶婂乏杈规媺鍒板唴瀹瑰垪鏈€宸︺€? 锛堟帹瀵硷細50% 鏄墍鍦ㄥ鍣ㄧ殑瀹斤紝鍑忓幓鍗婁釜鍙敤瀹藉害鍚庯紝缁撴灉鎭板ソ钀藉湪鍐呭鍒楀乏娌匡紱 瀹瑰櫒鑷韩瀹藉害浼氬湪璁＄畻涓姷娑堬紝鎵€浠ョ獎灞忎篃鎴愮珛銆傦級 */.lp-hero {
position: relative;
width: 100%;
margin-left: 0;
margin-right: 0;
min-height: calc(calc(100 * var(--pg-vh, 1vh)) + 28px);
background: radial-gradient(1100px 520px at 78% -10%, rgba(45,212,191,.20), transparent 60%), linear-gradient(160deg, #073b35 0%, #0a5148 42%, #0e6f64 100%);
overflow: hidden;
color: #fff;
}
.lp-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.lp-bggrid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
.lp-orb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
transition: transform .25s ease-out;
}
.lp-orb-a {
width: 460px;
height: 460px;
top: -150px;
right: -90px;
background: rgba(45,212,191,.26);
}
.lp-orb-b {
width: 380px;
height: 380px;
bottom: -170px;
left: -110px;
background: rgba(16,185,129,.22);
}
.lp-orb-c {
width: 280px;
height: 280px;
top: 38%;
left: 42%;
background: rgba(125,232,214,.13);
}
.lp-spot {
position: absolute;
inset: 0;
transition: background .12s linear;
}
.lp-hero-inner {
position: relative;
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 104px 24px 96px;
display: flex;
flex-direction: column;
gap: 40px;
}
/* hero 鍚夌ゥ鐗╋細閫忔槑搴曚汉鐗╁浘锛屾斁鍦?.lp-kbd-stage 鍐?鈥斺€?璺熺潃閿洏涓€璧峰€炬枩/涓€璧锋诞鍔? 浣嶇疆鐩稿鑸炲彴锛氶敭鐩樺湪鑸炲彴鍐?top=68锛屽ス搴曡竟鍘嬪湪閿洏涓婃部锛岃韩浣撴矇杩涢敭鐩樹竴鐐?*/.lp-hero-kid {
position: absolute;
z-index: 3;
right: 131px;
top: -204px;
width: 168px;
height: auto;
cursor: pointer;
user-select: none;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.38));
transition: transform .25s cubic-bezier(.2,.7,.2,1);
transform-origin: 50% 92%;
}
/* hover 鍙敼婊ら暅锛堜笉鏀?transform锛夛紝閬垮厤鍜屽€炬枩鎵撴灦 */.lp-hero-kid:hover {
filter: drop-shadow(0 14px 24px rgba(0,0,0,.46)) brightness(1.06);
}
/* 涓嶅仛鐙珛娴姩锛氬ス鍜岄敭鐩橀兘鏄潤姝㈢殑锛屽彧鏈夐紶鏍囩Щ鍔ㄦ椂涓€璧峰€炬枩 鈥斺€?杩欐牱涓よ€呮案杩滆创鍚?*//* 鐐瑰嚮鍥炲簲鐨勫洓绉嶅姩浣滐紙JS 杞祦鍒囨崲锛?*/.lp-hero-kid.kid-wave {
animation: kidWave .9s cubic-bezier(.3,1.4,.5,1);
}
.lp-hero-kid.kid-jump {
animation: kidJump .8s cubic-bezier(.3,1.5,.5,1);
}
.lp-hero-kid.kid-spin {
animation: kidSpin .9s cubic-bezier(.4,.1,.2,1);
}
.lp-hero-kid.kid-shake {
animation: kidShake .7s ease-in-out;
}
@keyframes kidWave {
0% {
transform: rotate(0) translateY(0);
}
25% {
transform: rotate(-9deg) translateY(-6px) scale(1.04);
}
50% {
transform: rotate(8deg) translateY(-10px) scale(1.05);
}
75% {
transform: rotate(-5deg) translateY(-4px) scale(1.03);
}
100% {
transform: rotate(0) translateY(0);
}
}
@keyframes kidJump {
0%, 100% {
transform: translateY(0) scaleY(1);
}
22% {
transform: translateY(2px) scaleY(.93) scaleX(1.05);
}
/* 涓嬭共钃勫姏 */ 45% {
transform: translateY(-34px) scaleY(1.06) scaleX(.96);
}
70% {
transform: translateY(0) scaleY(.96) scaleX(1.03);
}
}
@keyframes kidSpin {
0% {
transform: rotateY(0deg) scale(1);
}
50% {
transform: rotateY(180deg) scale(1.04);
}
100% {
transform: rotateY(360deg) scale(1);
}
}
@keyframes kidShake {
0%, 100% {
transform: rotate(0);
}
20% {
transform: rotate(-7deg) translateX(-4px);
}
45% {
transform: rotate(7deg) translateX(4px);
}
70% {
transform: rotate(-4deg) translateX(-2px);
}
}
/* 鐐瑰嚮鏃跺ご椤跺啋鍑虹殑姘旀场锛?浣犲ソ鍛€""鍔犳补"鈥︼級 */.lp-kid-bubble {
position: absolute;
z-index: 4;
/* 绉诲埌鍚夌ゥ鐗┾€滃ス鐨勫彸渚р€濓紙鐢婚潰宸︿晶锛夈€佸ご閮ㄩ珮搴︼紝閬垮厤琚笂鏂归偅鎺掓寜閽尅浣?*/ right: 322px;
top: -176px;
padding: 8px 15px;
font-size: 13px;
font-weight: 700;
color: #0b5c55;
background: #fff;
border-radius: 14px 14px 4px 14px;
box-shadow: 0 10px 24px rgba(0,0,0,.22);
pointer-events: none;
white-space: nowrap;
opacity: 0;
transform: translateY(6px) scale(.9);
transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.5,.64,1);
}
.lp-kid-bubble.on {
opacity: 1;
transform: translateY(0) scale(1);
}
/* 绐勫睆鏀句笉涓嬶紝鐩存帴闅愯棌锛堟爣棰樻槸灞呬腑鐨勶紝纭浼氭尋鍒版枃瀛楋級 */@media (max-width: 1240px) {
.lp-hero-kid, .lp-kid-bubble {
display: none;
}
}
.lp-hero-head {
max-width: 1020px;
margin: 0 auto;
text-align: center;
}
.lp-brand-xl {
font-size: 52px;
line-height: 1.18;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 18px;
color: #fff;
}
@media (max-width: 980px) {
.lp-brand-xl {
font-size: 40px;
}
}
@media (max-width: 760px) {
.lp-brand-xl {
font-size: 31px;
}
}
.lp-badge {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(8px);
padding: 7px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.92);
margin-bottom: 24px;
}
.lp-badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #5eead4;
box-shadow: 0 0 0 4px rgba(94,234,212,.22);
animation: lpPulse 2s ease-in-out infinite;
}
@keyframes lpPulse {
0%,100% {
opacity: 1;
}
50% {
opacity: .45;
}
}
.lp-h1 {
font-size: clamp(40px, calc(3.4 * var(--pg-vw, 1vw)), 48px);
line-height: 1.22;
font-weight: 800;
letter-spacing: .5px;
margin-bottom: 0;
/* 鎵撳瓧鏈洪偅琛岀揣璺熷叾鍚庯紝闂磋窛浜ょ粰瀹冭嚜宸辩殑琛岄珮鎺у埗 */}
.lp-h1-accent {
color: #7de8d6;
text-shadow: 0 0 34px rgba(94,234,212,.45);
}
/* 銆岀爜瀛楀暒鎵撳瓧閫熺粌銆嶉噷鐨勩€屾墦瀛楅€熺粌銆嶏細浜摑锛屽拰鍓嶉潰鐨勭櫧鑹叉媺寮€灞傛 */.lp-brand-blue {
color: #7cc4ff;
text-shadow: 0 0 30px rgba(96,165,250,.55);
}
/* 銆屾墦瀛楃粌涔犮€嶏細鏆栭粍锛屼笌闈掔豢鐨勩€岀洸鎵撱€嶅舰鎴愬姣?*/.lp-h1-gold {
color: #ffd66e;
text-shadow: 0 0 34px rgba(255,214,110,.45);
}
/* 鈥斺€?Hero 鏍囬鐨勩€屾枃瀛楁帓鏂ャ€嶏細閫愬瓧鍖?span锛屽彧鍋氳瑙変綅绉伙紝涓嶅奖鍝嶆帓鐗?鈥斺€? inline-block 鐨勫熀绾垮氨鏄噷闈㈤偅琛屾枃瀛楃殑鍩虹嚎锛屾墍浠ヤ笉浼氭妸琛岄珮鎾戝紑銆? will-change 璁╂瘡涓瓧鍗曠嫭鎻愬眰锛屼綅绉绘椂璧?GPU銆佷笉瑙﹀彂閲嶆帓銆?*/.lp-char {
display: inline-block;
will-change: transform;
}
/* 璇诲睆鍣ㄤ笓鐢細瑙嗚涓婃敹鎴?1px锛屽睆骞曢槄璇诲櫒浠嶈兘璇诲嚭瀹屾暣鍘熸枃 */.lp-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
/* 鍏虫帀鍔ㄧ敾鍋忓ソ锛氫笉鍋氫綅绉伙紙JS 渚т篃宸茶烦杩囩粦瀹氾級 */@media (prefers-reduced-motion: reduce) {
.lp-char {
will-change: auto;
}
}
/* 鎵撳瓧鏈洪偅琛岋紙"缁冧範妯″紡"鎵€鍦級锛氱嫭绔嬫垚琛岋紝瀛楀彿/琛岄珮涓庝富鏍囬涓€鑷达紝 杩欐牱绗?1鈫? 琛屻€?鈫? 琛岀殑闂磋窛鎵嶅潎鍖€锛堝師鏉ヨ窡鍦?
鍚庨潰浼氳鎸わ級 */.lp-type-wrap {
color: #ffd66e;
font-size: clamp(40px, calc(3.4 * var(--pg-vw, 1vw)), 48px);
line-height: 1.22;
font-weight: 800;
letter-spacing: .5px;
min-height: 1.22em;
/* 绌烘枃鏈椂涔熷崰浣忛珮搴︼紝閬垮厤鎵撳瓧鏈烘竻绌虹灛闂撮〉闈㈣烦鍔?*/ /* 涓绘爣棰樹笌瀹冧箣闂寸暀鍑哄拰涓绘爣棰樿璺濅竴鑷寸殑绌洪殭锛坔1 鐨?line-height 鍙綔鐢ㄤ簬鍐呴儴琛岋紝 璺ㄥ厓绱犱箣闂撮渶瑕佹樉寮忕粰闂磋窛锛屽惁鍒欎細璐存锛?*/ margin-top: 14px;
}
.lp-caret {
display: inline-block;
width: 4px;
height: .92em;
margin-left: 5px;
background: #ffd66e;
border-radius: 2px;
vertical-align: -6px;
animation: lpBlink 1s steps(1) infinite;
}
@keyframes lpBlink {
0%,55% {
opacity: 1;
}
56%,100% {
opacity: 0;
}
}
.lp-lede {
font-size: 16px;
line-height: 1.85;
color: rgba(255,255,255,.78);
max-width: 470px;
margin: 22px auto 32px;
text-align: center;
/* 涓婅竟璺濊ˉ鍥炴爣棰樹笌鎻忚堪涔嬮棿鐨勭┖闅?*/}
.lp-cta-row {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 38px;
}
/* Hero 涓変釜缁冧範鍏ュ彛锛堟寚娉?/ 鎷奸煶 / 涓枃锛夛細姣斿師 CTA 绋嶇揣鍑?*/.lp-cta-nav .lp-btn {
padding: 14px 26px;
font-size: 15px;
}
.lp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
cursor: pointer;
border-radius: 13px;
font-size: 15.5px;
font-weight: 700;
padding: 15px 28px;
transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s, border-color .2s;
font-family: inherit;
}
.lp-btn b {
font-weight: 800;
transition: transform .2s;
}
.lp-btn:hover {
transform: translateY(-2px);
}
.lp-btn:hover b {
transform: translateX(4px);
}
.lp-btn:active {
transform: translateY(0);
}
.lp-btn-primary, .lp-btn-light {
background: #fff;
color: #0b5c55;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.lp-btn-primary:hover, .lp-btn-light:hover {
box-shadow: 0 16px 34px rgba(0,0,0,.3);
}
.lp-btn-ghost {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,.4);
}
.lp-btn-ghost:hover {
border-color: #fff;
background: rgba(255,255,255,.1);
}
.lp-cta-nav .lp-btn {
color:#212121;
background:#e8e8e8;
border:none;
border-radius:15px;
font-weight:800;
position:relative;
overflow:hidden;
z-index:1;
box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);
transition:color .25s, transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.lp-cta-nav .lp-btn::before {
content:"";
position:absolute;
top:0;
left:0;
height:100%;
width:0;
border-radius:15px;
background:#212121;
z-index:-1;
box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);
transition:width .25s;
}
.lp-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.lp-stat b {
display: block;
font-size: 30px;
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.lp-stat span {
font-size: 13px;
color: rgba(255,255,255,.62);
}
.lp-stat-sep {
width: 1px;
height: 34px;
background: rgba(255,255,255,.18);
}
/* Hero 瑙嗚鍖哄灞傦細鍙礋璐ｆ帓鐗堬紝涓嶅弬涓庨紶鏍囪窡闅忥紙閫熷害鐗屻€佹暟鎹崱鍥哄畾鍦ㄨ繖閲岋級 */.lp-hero-visual {
position: relative;
z-index: 1;
}
/* 闀块敭鐩樿垶鍙帮紙鍚潗鐫€鐨勫悏绁ョ墿锛夛細榧犳爣绉诲姩鏃?JS 浼氭暣浣?translate3d 璺熼殢锛? 鎵€浠ュ彧鏈夊畠锛堝拰閲岄潰鐨勫皬浜猴級浼氬姩锛屽闈㈢殑閫熷害鐗?鏁版嵁鍗′繚鎸佷笉鍔?*/.lp-kbd-stage {
position: relative;
}
.lp-kbd {
position: relative;
transform: none;
background: rgba(3,32,28,.55);
border: 1px solid rgba(255,255,255,.14);
border-radius: 16px;
padding: clamp(10px, calc(1.4 * var(--pg-vw, 1vw)), 18px);
backdrop-filter: blur(6px);
box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
will-change: transform;
overflow: hidden;
/* 璁╄窡闅忛紶鏍囩殑鏌斿厜涓嶆孩鍑哄渾瑙?*/}
/* 璺熼殢榧犳爣鐨勬煍鍏夛細浣嶇疆鐢?JS 鍐?--kx/--ky锛岄紶鏍囩寮€鏃惰嚜鍔ㄦ秷澶?*/.lp-kbd::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(190px circle at var(--kx, -999px) var(--ky, -999px), rgba(94,234,212,.16), rgba(94,234,212,.05) 45%, transparent 70%);
opacity: 0;
transition: opacity .25s ease;
}
.lp-kbd:hover::before {
opacity: 1;
}
.lp-kbd-row {
position: relative;
z-index: 1;
}
.lp-kbd-row {
display: flex;
gap: clamp(3px, calc(.55 * var(--pg-vw, 1vw)), 7px);
margin-bottom: clamp(3px, calc(.5 * var(--pg-vw, 1vw)), 7px);
}
.lp-kbd-row:last-child {
margin-bottom: 0;
}
.lp-key {
position: relative;
flex: var(--kw, 1) 1 0;
height: clamp(26px, calc(3.9 * var(--pg-vw, 1vw)), 46px);
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.17);
border-radius: 7px;
color: rgba(255,255,255,.78);
font-size: clamp(8.5px, calc(.95 * var(--pg-vw, 1vw)), 12.5px);
font-weight: 700;
box-shadow: 0 3px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.lp-key span {
pointer-events: none;
white-space: nowrap;
}
.lp-key-home {
border-color: rgba(94,234,212,.45);
color: #c9f7ef;
}
.lp-key-ridge::after {
content: '';
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 3px;
border-radius: 2px;
background: rgba(94,234,212,.7);
}
.lp-key-hot {
animation: lpKeyTap 3.6s ease-in-out infinite;
}
@keyframes lpKeyTap {
0%, 91%, 100% {
background: rgba(255,255,255,.07);
color: #c9f7ef;
box-shadow: 0 3px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
transform: translateY(0);
}
95% {
background: #5eead4;
color: #07413b;
border-color: #5eead4;
box-shadow: 0 0 0 rgba(0,0,0,.28), 0 0 22px rgba(94,234,212,.65);
transform: translateY(3px);
}
}
/* 榧犳爣鍒掕繃閿附锛氬彉浜€佹诞璧枫€佹硾鍏夛紙!important 鍘嬭繃寰幆鍔ㄧ敾锛?*/.lp-kbd:not(.lp-kbd-light) .lp-key:hover {
background: rgba(94,234,212,.30) !important;
border-color: rgba(94,234,212,.85) !important;
color: #fff !important;
box-shadow: 0 6px 0 rgba(0,0,0,.24), 0 0 22px rgba(94,234,212,.55) !important;
transform: translateY(-4px) !important;
z-index: 3;
}
.lp-kbd:not(.lp-kbd-light) .lp-key:active {
transform: translateY(1px) !important;
}
/* 銆岀鍔涖€嶏細榧犳爣闄勮繎涓€鍦堥敭甯借交杞绘诞璧凤紙璺濈鐢?JS 鍒ゅ畾锛屽姞 .lp-key-near锛?*/.lp-kbd:not(.lp-kbd-light) .lp-key-near {
background: rgba(94,234,212,.13) !important;
border-color: rgba(94,234,212,.42) !important;
box-shadow: 0 2px 0 rgba(0,0,0,.26), 0 0 12px rgba(94,234,212,.22) !important;
transform: translateY(-2px);
transition: transform .16s cubic-bezier(.3,1.4,.5,1), background .16s, border-color .16s, box-shadow .16s;
}
/* :hover 浼樺厛绾ф渶楂橈紝榧犳爣姝ｄ笅鏂归偅棰楅敭娴緱鏇村 */.lp-kbd:not(.lp-kbd-light) .lp-key-near:hover {
transform: translateY(-4px) !important;
}
/* 娴呰壊閿洏锛堟暀瀛︽紨绀虹獥鐢紝骞抽摵鏃?3D锛?*/.lp-kbd-light {
transform: none;
background: #fff;
border: 1px solid #dcefea;
border-radius: 14px;
padding: clamp(8px, calc(1.1 * var(--pg-vw, 1vw)), 14px);
box-shadow: 0 14px 34px rgba(11,92,85,.10);
}
.lp-kbd-light .lp-key {
background: #f7fbfa;
border-color: #d9ebe7;
color: #5c7570;
box-shadow: 0 2px 0 #d9ebe7;
font-size: clamp(8px, calc(.9 * var(--pg-vw, 1vw)), 12px);
height: clamp(22px, calc(3.2 * var(--pg-vw, 1vw)), 38px);
}
.lp-kbd-light .lp-key-home {
background: #e6f4f1;
border-color: #9ad8ce;
color: #0b7a70;
}
.lp-kbd-light .lp-key-ridge::after {
background: #0b7a70;
}
.lp-kbd-light .lp-key-hot {
animation: none;
}
/* 鏁版嵁鐗岋細閿洏涓婃柟灞呬腑涓€鎺掞紝涓嶆尅閿洏 */.lp-kbd-chips {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 22px;
}
.lp-chip {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.28);
backdrop-filter: blur(14px);
border-radius: 999px;
padding: 10px 20px;
font-size: 13px;
color: rgba(255,255,255,.85);
white-space: nowrap;
box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.lp-chip b {
color: #7de8d6;
font-size: 18px;
font-variant-numeric: tabular-nums;
}
.lp-chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #5eead4;
}
/* 閿洏涓嬫柟 4 寮犳暟鎹ぇ鍗★紙鍙傝€冪珵鍝侊細鍥炬爣鍦ㄤ笂銆佺櫧搴曞ぇ鍗★級 */.lp-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-top: 64px;
}
.lp-metric {
position: relative;
/* 缁欐弿杈瑰湀鐨?::after 鍋氬畾浣嶅熀鍑?*/ display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
min-width: 0;
padding: 30px 28px;
border-radius: 20px;
background: #fff;
border: 1px solid rgba(255,255,255,.55);
box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s;
transform-style: preserve-3d;
}
.lp-metric:hover {
box-shadow: 0 26px 56px rgba(0,0,0,.38), 0 4px 12px rgba(0,0,0,.22);
}
.lp-metric-ico {
flex: 0 0 auto;
width: 58px;
height: 58px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #e6faf5;
color: #0d9488;
}
.lp-metric-ico svg {
width: 30px;
height: 30px;
}
.lp-metric-txt {
min-width: 0;
width: 100%;
}
.lp-metric-txt b {
display: block;
font-size: 20px;
font-weight: 800;
color: #0f3d36;
line-height: 1.3;
white-space: nowrap;
}
.lp-metric-txt b em {
font-style: normal;
margin-left: 7px;
font-size: 15.5px;
color: #0d9488;
}
.lp-metric-txt span {
display: block;
font-size: 13.5px;
color: #6b7f7a;
margin-top: 7px;
line-height: 1.5;
}
/* ===== Hero 鍖猴紙娣辫壊搴曪級鎻忚竟鍦堬細閿洏澶栨 + 4 寮犳暟鎹崱 ===== 涓?.lp-qbtn::after 鍚屼竴濂楁満鍒讹紙鍏辩敤 --lp-ring锛夛紝鍙槸搴曡壊娣憋紝鐜崲鎴愪寒闈掕壊 */.lp-kbd::after,.lp-metric::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
/* 鐜殑绮楃粏 */ background: conic-gradient(var(--ring-bright) 0deg var(--lp-ring), transparent var(--lp-ring) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 4;
/* 鍘嬪湪閿附涔嬩笂 */ transition: --lp-ring 800ms ease-in-out;
}
.lp-kbd:hover::after,.lp-metric:hover::after {
--lp-ring: 360deg;
}
@media (prefers-reduced-motion: reduce) {
.lp-kbd::after, .lp-metric::after {
transition: none;
}
}
/* 鍏抽敭淇锛氱粷瀵瑰畾浣嶅厓绱犵殑 inset:0 鍙傜収鐨勬槸鐖剁骇銆宲adding box銆嶏紝涓嶆槸 border box銆? .lp-metric 甯?1px 杈规 鈫?鐜暣浣撳線閲岀缉 1px锛屽闈㈤湶鍑轰竴鏉＄櫧杈癸紙"闇茬櫧"锛夈€? 鐢?-1px 璐熷亸绉绘妸鐜帹鍥炲幓锛岃瀹冨帇浣忚竟妗嗐€佽创榻愬崱鐗囧娌裤€? 锛?lp-qbtn 鏄?border:none锛宲adding box 灏辩瓑浜?border box锛屼笉闇€瑕佽繖鏉★紱 .mp-slide / .lp-kbd 铏界劧涔熸湁 1px 杈规锛屼絾瀹冧滑 overflow:hidden 浼氭妸婧㈠嚭閮ㄥ垎瑁佹帀锛? 鑰屼笖搴曡壊涓€娣变竴娴咃紝闇插嚭鐨勯偅 1px 鍩烘湰鐪嬩笉鍑烘潵锛屾晠涓嶅鐞嗭級 *//* 鐧藉崱鏄櫧鑹叉湰浣擄紝鐜彧瑕佸帇鍦ㄥ崱鐗囪竟涓婏紝鏈€澶栭偅鍦堟姉閿娇鍍忕礌灏卞繀鐒舵贩杩涚櫧搴?鈫?鐪嬬潃婕忕櫧銆? 骞茶剢鎶婄幆鏁翠綋鐢诲埌鍗＄墖澶栭潰鍘伙紝璁╁畠瀹屽叏钀藉湪娣辫壊 Hero 鑳屾櫙涓婏紝褰诲簳涓嶆帴瑙︾櫧鑹插尯鍩熴€? inset 鍙傜収 padding box锛氬崱鐗囨湁 1px 杈规锛屽線澶栨帹 4px銆佺幆绮?3px 鈫?鐜濂借创鍦ㄥ崱鐗囧娌裤€? 棰滆壊鏄?--ring-card锛堥珮鍙嶅樊鑹诧級锛屾敼涓€涓€煎嵆鍙崲鑹层€?*/.lp-metric::after {
inset: -4px;
padding: 3px;
border-radius: 23px;
/* 鍗＄墖鍦嗚 20 + 澶栨墿 3 */ background: conic-gradient(var(--ring-card) 0deg var(--lp-ring), transparent var(--lp-ring) 360deg);
}
.lp-scroll-hint {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,.55);
font-size: 12px;
letter-spacing: 2px;
}
.lp-scroll-mouse {
width: 22px;
height: 34px;
border: 1.5px solid rgba(255,255,255,.45);
border-radius: 12px;
display: flex;
justify-content: center;
padding-top: 6px;
}
.lp-scroll-mouse i {
width: 3px;
height: 7px;
border-radius: 2px;
background: #7de8d6;
animation: lpWheel 1.6s ease-in-out infinite;
}
@keyframes lpWheel {
0% {
transform: translateY(0);
opacity: 1;
}
70% {
transform: translateY(9px);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ===== 鍐呭瀹瑰櫒 ===== *//* 鍐呭鍖虹殑涓婂唴琛細绗竴涓爣棰樹笌 hero 涔嬮棿鐨勮窛绂伙紙澶ぇ浼氱┖涓€鏉″甫锛屽お灏忎細椤跺埌椤舵爮锛?*/.lp-wrap {
position: relative;
padding-top: 24px;
}
/* 婕旂ず鍖猴細涓嶅啀寮哄埗鍗犳弧涓€灞忓仛鍨傜洿灞呬腑锛堥偅鏍蜂細鎶婂唴瀹规帹涓嬪幓銆侀《閮ㄧ暀鐧借繃澶э級锛? 鏀逛负鎸夊唴瀹硅嚜鐒堕珮搴︽帓甯冿紝闂磋窛浜ょ粰 .lp-wrap 鍜屾爣棰樿嚜宸辩殑澶栬竟璺濇帶鍒?*/.lp-screen-sec {
display: flex;
flex-direction: column;
}
/* 涓ゅ睆涔嬮棿鐨勫垎闅旂嚎锛氫袱澶存祬銆佷腑闂存繁 */.lp-divider {
width: min(1120px, calc(100% - 48px));
height: 2px;
margin: 62px auto 0;
border-radius: 2px;
background: linear-gradient(90deg, rgba(14, 111, 100, 0) 0%, rgba(14, 111, 100, 0.55) 50%, rgba(14, 111, 100, 0) 100%);
}
/* 鈥斺€?鎸囨硶澶у崱 鈥斺€?*/.lp-kf {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 28px;
/* 娴呯豢娓愬彉 + 宸︿晶涓€閬撲富棰樿壊绔栨潯锛屽仛鍑?閲嶇偣澶у崱"鐨勪唤閲?*/ background: linear-gradient(120deg, #ffffff 0%, #eef9f6 100%);
border: 1px solid #cfe9e2;
border-radius: 22px;
padding: 40px 44px;
cursor: pointer;
box-shadow: 0 14px 40px rgba(11,92,85,.09);
transform-style: preserve-3d;
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
.lp-kf::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(180deg, #2dd4bf, #0b7a70);
transition: width .26s ease;
}
.lp-kf:hover::before {
width: 8px;
}
.lp-kf:hover {
transform: translateY(-4px);
box-shadow: 0 30px 66px rgba(11,92,85,.18);
border-color: #9fdbd0;
}
.lp-kf-spot {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
background: radial-gradient(460px circle at var(--mx, -200px) var(--my, -200px), rgba(15,148,136,.10), transparent 65%);
}
.lp-kf:hover .lp-kf-spot {
opacity: 1;
}
.lp-kf-badge {
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
color: var(--teal);
background: var(--teal-l);
border-radius: 8px;
padding: 6px 12px;
position: absolute;
top: 24px;
right: 30px;
}
.lp-kf-main {
flex: 1;
}
.lp-kf-title {
font-size: 27px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 10px;
}
.lp-kf-desc {
font-size: 14.5px;
color: #5c7570;
line-height: 1.8;
max-width: 640px;
margin-bottom: 16px;
}
.lp-kf-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lp-kf-tags span {
font-size: 12.5px;
font-weight: 600;
color: var(--teal-d);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 5px 14px;
}
.lp-kf-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex: none;
}
.lp-kf-go {
font-size: 13px;
font-weight: 700;
color: var(--gray);
}
.lp-kf-arrow {
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, #14b3a6, #0b7a70);
color: #fff;
font-size: 24px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 26px rgba(15,148,136,.35);
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.lp-kf:hover .lp-kf-arrow {
transform: translateX(6px) scale(1.05);
}
/* 鈥斺€?鍒嗗尯鏍囬 鈥斺€?*/.lp-sec-head {
display: flex;
align-items: center;
gap: 18px;
margin: 62px 0 24px;
}
.lp-sec-no {
font-size: 15px;
font-weight: 800;
color: var(--teal);
border: 1.5px solid var(--teal);
border-radius: 10px;
width: 44px;
height: 44px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.lp-sec-title {
font-size: 24px;
font-weight: 800;
color: var(--teal-d);
line-height: 1.3;
}
.lp-sec-sub {
font-size: 13.5px;
color: var(--gray);
margin-top: 3px;
}
.lp-sec-tag {
margin-left: auto;
flex: none;
font-size: 12.5px;
font-weight: 700;
color: var(--teal);
background: var(--teal-l);
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 16px;
}
/* 鈥斺€?妯″紡鍗＄墖 鈥斺€?*/.lp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.lp-card {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid #e6f0ee;
border-radius: 18px;
padding: 24px;
cursor: pointer;
transform-style: preserve-3d;
transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
will-change: transform;
}
.lp-card:hover {
border-color: #b7e0d9;
box-shadow: 0 22px 46px rgba(11,92,85,.13);
}
.lp-card-spot {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
background: radial-gradient(260px circle at var(--mx, -100px) var(--my, -100px), rgba(15,148,136,.09), transparent 62%);
}
.lp-card:hover .lp-card-spot {
opacity: 1;
}
.lp-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.lp-card-ico {
width: 50px;
height: 50px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.lp-card:hover .lp-card-ico {
transform: translateY(-3px) scale(1.06);
}
.lp-tone-teal {
background: #e6f4f1;
color: #0b7a70;
}
.lp-tone-blue {
background: #e8f0fe;
color: #1d4ed8;
}
.lp-tone-amber {
background: #fdf0dd;
color: #b45309;
}
.lp-tone-violet {
background: #f1ecfb;
color: #6d28d9;
}
.lp-tone-gray {
background: #eef1f0;
color: #8a9794;
}
.lp-card-arrow {
font-size: 19px;
font-weight: 800;
color: var(--teal);
opacity: 0;
transform: translateX(-8px);
transition: opacity .25s, transform .25s;
}
.lp-card:hover .lp-card-arrow {
opacity: 1;
transform: translateX(0);
}
.lp-card-name {
font-size: 17px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 7px;
}
.lp-card-desc {
font-size: 13px;
color: var(--gray);
line-height: 1.65;
}
.lp-tag {
font-size: 11.5px;
font-weight: 700;
color: #93a39f;
background: #f1f4f3;
border-radius: 999px;
padding: 5px 12px;
}
.lp-card-soon {
cursor: default;
}
.lp-card-soon:hover {
border-color: #e6f0ee;
box-shadow: none;
}
.lp-card-soon .lp-card-ico {
transform: none;
}
/* 鈥斺€?鐗规€ф潯 鈥斺€?*/.lp-feats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
margin-top: 66px;
}
.lp-feat {
display: flex;
gap: 14px;
align-items: flex-start;
}
.lp-feat-ico {
width: 44px;
height: 44px;
flex: none;
border-radius: 13px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 6px 16px rgba(11,92,85,.08);
color: var(--teal);
font-size: 20px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.lp-feat-name {
font-size: 15px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 5px;
}
.lp-feat-desc {
font-size: 12.5px;
color: var(--gray);
line-height: 1.7;
}
/* 鈥斺€?搴曢儴 CTA 鈥斺€?*/.lp-band {
position: relative;
overflow: hidden;
width: min(1120px, calc(100% - 48px));
margin: 72px auto 0;
border-radius: 24px;
background: linear-gradient(140deg, #0a5148 0%, #0e6f64 70%, #11806f 100%);
padding: 44px 48px;
display: flex;
align-items: center;
gap: 24px;
box-shadow: 0 24px 60px rgba(11,92,85,.28);
}
.lp-band-glow {
position: absolute;
top: -60%;
right: -8%;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94,234,212,.28), transparent 65%);
pointer-events: none;
}
.lp-band-txt h2 {
font-size: 24px;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
}
.lp-band-txt p {
font-size: 14px;
color: rgba(255,255,255,.72);
}
.lp-band .lp-btn {
margin-left: auto;
flex: none;
}
/* ===== 灞呬腑鍒嗗尯鏍囬 ===== *//* 灞呬腑鍒嗗尯鏍囬锛氫笌涓婁竴鍖哄潡鎷夊紑瓒冲璺濈锛岃姣忎釜鍖哄潡鍚勮嚜鎴愪竴灞忥紙鍘熸潵 76px 浠嶆樉鎸わ級 */.lp-sec-head-center {
display: block;
text-align: center;
margin: 124px 0 44px;
}
/* 绱ц窡 hero 鐨勭涓€涓爣棰橈細瀹冩墍鍦ㄧ殑 .lp-screen-sec 宸茬粡璐熻矗鍨傜洿灞呬腑锛? 杩欓噷涓嶅啀鍙﹀姞涓婅竟璺濓紙鍚﹀垯灞呬腑浼氳椤跺亸锛?*/.lp-sec-head-center.lp-sec-head-up {
margin-top: 44px;
margin-bottom: 30px;
}
.lp-sec-head-center .lp-sec-title {
font-size: clamp(30px, calc(3 * var(--pg-vw, 1vw)), 40px);
font-weight: 900;
letter-spacing: 1.5px;
line-height: 1.25;
color: var(--teal-d);
}
.lp-sec-head-center .lp-sec-title.lp-sec-title-lg {
font-size: clamp(32px, calc(3.2 * var(--pg-vw, 1vw)), 46px);
line-height: 1.25;
}
.lp-sec-head-center .lp-sec-sub {
margin-top: 14px;
font-size: 14.5px;
}
/* ===== 銆岀瀛︾殑鎸囨硶鏁欏銆嶆爣棰樺姩鏁?===== 鈶?閫愬瓧鍗囪捣锛氳剼鏈氨缁紙.lp-tfx-ready锛夊悗瀛楁墠闅愯棌骞堕€愬瓧閿欏嘲鍗囪捣锛岃剼鏈け鏁堝垯鐓у父鏄剧ず锛? 鈶?鍒嗛殧銆屄枫€嶏細鏀圭敾涓€棰楀懠鍚哥殑闈掔豢鍦嗙偣锛屽鍦堟湁涓€閬撴墿鏁ｅ厜鐜紱 鈶?鎵厜锛氭暣琛屽彔涓€灞傛枩鍚戦珮鍏夛紝screen 娣峰悎鍙彁浜瓧闈€佺櫧搴曟鍙戞棤鎹熴€?*/.lp-tfx {
position: relative;
}
.lp-tfx-ready .lp-tfx-ch {
display: inline-block;
opacity: 0;
transform: translateY(.5em);
filter: blur(6px);
will-change: transform, opacity, filter;
transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.lp-tfx-ready .lp-tfx-ch.in {
opacity: 1;
transform: none;
filter: none;
}
/* 鍒嗛殧鐐癸細鍘熴€屄枫€嶈杩欓鍦嗙偣鏇挎崲锛?3em 鎶珮锛岃鍦嗗績瀵瑰噯姹夊瓧瑙嗚涓嚎锛?*/.lp-tfx-dot {
display: inline-block;
position: relative;
width: .26em;
height: .26em;
margin: 0 .5em;
border-radius: 50%;
background: var(--teal);
vertical-align: .3em;
animation: lpDotPulse 2.4s ease-in-out infinite;
}
.lp-tfx-dot::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--teal);
animation: lpDotRing 2.4s ease-out infinite;
}
@keyframes lpDotPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(15,148,136,.34);
}
50% {
transform: scale(1.22);
box-shadow: 0 0 0 7px rgba(15,148,136,0);
}
}
@keyframes lpDotRing {
0% {
transform: scale(1);
opacity: .55;
}
70%, 100% {
transform: scale(2.8);
opacity: 0;
}
}
/* 鎵厜锛氱櫧搴曠粡 screen 娣峰悎鍚庢棤鍙樺寲锛屽彧鏈夌粡杩囨繁鑹插瓧闈㈡椂鎵嶆彁浜?鈥斺€?涓嶈鐩栥€佷笉绯婂簳 */.lp-tfx-shine {
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
background-size: 300% 100%;
background-repeat: no-repeat;
animation: lpTitleShine 5.6s ease-in-out 1.2s infinite;
}
@keyframes lpTitleShine {
0% {
background-position: 150% 0;
}
60%, 100% {
background-position: -150% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.lp-tfx-ready .lp-tfx-ch {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
.lp-tfx-dot, .lp-tfx-dot::after, .lp-tfx-shine {
animation: none;
}
}
/* ===== 銆屼负浠€涔堥€夋嫨鐮佸瓧鍟︺€嶆爣棰樺悗鐨勯€愬瓧杞挱妗?===== 鍙傝€?RotatingText锛氭棫瀛楀悜涓婇鍑恒€佹柊瀛椾粠涓嬫柟鍗囧叆锛岄€愬瓧閿欏嘲锛坉elay 鐢?JS 鍐欙級銆? 妗嗗彧闇蹭竴琛岋紙overflow:hidden锛夛紝妗嗗鐢?JS 閲忓嚭鏈€闀挎枃妗堝悗瀹氭锛屾崲瀛楁椂涓嶅乏鍙虫姈銆? 瀵归綈锛?026-09-17 淇級锛? 鈶?涔嬪墠鐢?inline-block + vertical-align:middle 瀵归綈锛宮iddle 鍙傜収鐨勬槸銆屽熀绾?+ 鍗婁釜 x-height銆嶏紝 涓枃瀛椾綋鐨?x-height 涓庢眽瀛楀ⅷ杩逛腑蹇冧笉閲嶅悎锛屽疄娴嬫鍐呮枃瀛楁瘮鏍囬浣?5.2px锛? 鈶?鏀规垚鎶?h2 鍙?flex 琛岋紙瑙?.lp-sec-head-nav .lp-sec-title锛夛紝鏍囬鏂囧瓧涓庢鍚勮嚜浣滀负涓€涓? flex item 鎸変腑绾垮眳涓€備袱鑰呭悓瀛椾綋 鈫?鍚勮嚜銆屽ⅷ杩逛腑蹇?vs 琛岀洅涓績銆嶇殑鍋忕Щ瀹屽叏涓€鑷达紝 鎵€浠ヤ腑绾垮榻愬悗澧ㄨ抗涔熶弗涓濆悎缂濓紝瀹炴祴鍋忓樊 0.00px锛屼笖涓嶄緷璧栦换浣曞瓧浣撳害閲忕‖缂栫爜銆?*/.lp-sec-head-nav .lp-sec-title {
display: flex;
flex-wrap: wrap;
align-items: center;
/* 鏍囬鏂囧瓧涓庤疆鎾鎸夊悓涓€涓嚎瀵归綈 */ justify-content: center;
/* 鏁磋浠嶅眳涓?*/ column-gap: .22em;
row-gap: .1em;
}
.lp-rot {
position: relative;
display: inline-flex;
/* 琚?flex 鐖剁骇 block 鍖栧悗鍗?flex锛岃繖閲屽厹搴曢潪 flex 鍦烘櫙 */ align-items: center;
justify-content: center;
box-sizing: border-box;
height: 1.3em;
/* 姣斿師鏉?1.22em 鐣ラ珮锛屾鏇撮ケ婊?*/ top: .05em;
/* 涓?.lp-rot-layer 鐨?-.05em 閰嶅锛氭鏁翠綋涓嬫矇鍗婁釜涓嶅绉伴噺锛? 璁┿€屾鐨勪腑绾裤€嶈惤鍦ㄣ€屾枃瀛楃殑澧ㄨ抗涓嚎銆嶄笂锛堣涓嬫枃瀛楀眰璇存槑锛?*/ margin-left: 0;
/* 闂磋窛浜ょ粰鐖剁骇 column-gap锛岄伩鍏嶄袱澶勫彔鍔?*/ padding: 0 .42em;
/* 宸﹀彸鏇村锛岃兌鍥婃劅鏇村己 */ border-radius: .34em;
/* 涓庝笅鏂广€屾嫾闊虫嫾璇绘暀绋嬨€嶆繁澧ㄧ豢涓诲崱鍚岃壊绯伙細宸︽繁鍙虫祬鐨勬枩鍚戞笎鍙橈紝鐧藉瓧鍘嬪簳鏇撮珮绾?*/ background: linear-gradient(140deg, #073b35 0%, #0a5148 46%, #0e6f64 100%);
border: 1px solid rgba(125,232,214,.28);
/* 娣￠潚鎻忚竟锛屽懠搴斾富鍗″浘鏍囧湀 */ box-shadow: 0 6px 18px rgba(7,59,53,.28), inset 0 1px 0 rgba(255,255,255,.12);
overflow: hidden;
white-space: nowrap;
color: #fff;
/* 鐧藉瓧 */ font-weight: 900;
letter-spacing: 0;
}
/* 閲忓鐢ㄧ殑鎺㈤拡锛堜笉鍙锛?*/.lp-rot-probe {
display: inline-block;
white-space: pre;
visibility: hidden;
}
/* 璇诲睆鍣ㄨ杩欎竴浠藉畬鏁存枃妗堬紱閫愬瓧灞傚叏閮?aria-hidden */.lp-rot-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
/* 瀛楀眰閾烘弧妗嗐€倀op:-.05em = 鎶婂ⅷ杩逛笂鎻愬崐涓€屼笂涓嬩笉瀵圭О閲忋€嶏細 涓枃瀛椾綋琛岀洅鍐呭ⅷ杩瑰ぉ鐢熷亸涓嬶紙瀹炴祴 40px 瀛楀彿涓嬩綆 2px = .05em锛夛紝 鎻愯繖涓€涓嬭銆屽瓧鐨勫ⅷ杩逛腑蹇冦€嶆濂借惤鍦ㄦ鐨勫嚑浣曚腑绾夸笂锛屼笂涓嬬殑鐣欑櫧鎵嶇瓑瀹姐€?*/.lp-rot-layer {
position: absolute;
left: 0;
top: -.05em;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lp-rot-char {
display: inline-block;
white-space: pre;
/* 绌烘牸涔熺畻涓€涓瓧绗︼紝鍒鎶樺彔 */ transform: translateY(105%);
/* 鍒濆浣嶇疆锛氭涓嬫柟澶栭潰 */ opacity: 0;
transition: transform .62s cubic-bezier(.22,1,.36,1), opacity .34s ease;
}
.lp-rot-char.in {
transform: translateY(0);
opacity: 1;
}
.lp-rot-char.out {
transform: translateY(-115%);
opacity: 0;
}
/* 鍏虫帀鍔ㄧ敾鍋忓ソ锛氱洿鎺ュ垏瀛楋紝涓嶅仛浣嶇Щ */@media (prefers-reduced-motion: reduce) {
.lp-rot-char {
transition: none;
}
}
/* ===== 涓夊ぇ缁冧範鐩磋揪鍏ュ彛 ===== *//* 浣嶇疆锛氭暀瀛︽紨绀虹獥涓嬫柟銆佷负浠€涔堥€夋嫨涔嬩笂锛涘師鏉ヨ繖閲屾槸涓€鏉?124px 鐨勭函绌虹櫧甯?*//* 杩欓噷鍘熸潵杩樻湁涓€琛屻€岄€変竴涓叆鍙ｏ紝椹笂寮€缁冦€嶆爣棰橈紝宸叉寜瑕佹眰鍘绘帀锛屾墍浠ヤ笂杈硅窛鏀剁揣 */.lp-quick {
margin-top: 2px;
}
/* 涓€琛屼笁涓湸绱犳寜閽紝灞呬腑鎺掑竷锛堜笉鐢ㄥ浘鏍囧潡銆佷笉甯︾澶达級 */.lp-quick-grid {
display: flex;
justify-content: center;
align-items: stretch;
gap: 18px;
flex-wrap: wrap;
}
.lp-qbtn {
position: relative;
flex: 0 1 250px;
min-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
font-family: inherit;
cursor: pointer;
text-align: center;
padding: 18px 24px;
border: none;
border-radius: 14px;
color: var(--teal);
/* 鎻忚竟绾跨殑棰滆壊锛坰troke 鐢ㄧ殑鏄?currentColor锛?*/ background: #fff;
box-shadow: inset 0 0 0 1px #e0efec, 0 4px 14px rgba(11,92,85,.05);
transition: transform .2s, box-shadow .2s;
}
/* 鎻忚竟鍦堬細::after 閾轰竴灞?conic-gradient 鐨勭幆锛岀敤閬僵鎶婁腑闂存寲绌恒€佸彧鐣?2px锛? 鍐嶈鎵繃瑙掑害 --lp-ring 浠?0掳 杞埌 360掳锛岀嚎灏辨部鐫€鍦嗚鐢讳竴鏁村湀銆? 闈欐鏃惰搴︽槸 0掳锛岀幆鏈韩鍗抽€忔槑锛屾墍浠ヤ笉浼氬嚭鐜?杩樻病 hover 灏辨湁绾?銆?*/@property --lp-ring {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.lp-qbtn::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
/* 鐜殑绮楃粏 */ background: conic-gradient(var(--teal) 0deg var(--lp-ring), transparent var(--lp-ring) 360deg);
/* 涓や釜 shorthand 閮藉啓鍦ㄥ墠闈紝composite 鍐欏湪鍚庨潰锛岄伩鍏嶈 shorthand 閲嶇疆 */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: --lp-ring 700ms ease-in-out;
}
.lp-qbtn:hover::after {
--lp-ring: 360deg;
}
.lp-qbtn:hover {
transform: translateY(-2px);
box-shadow: inset 0 0 0 1px #e0efec, 0 12px 26px rgba(15,148,136,.14);
}
.lp-qbtn:active {
transform: translateY(0);
}
/* 鍏虫帀鍔ㄧ敾鍋忓ソ锛氱洿鎺ョ粰涓€鍦堝疄绾挎弿杈?*/@media (prefers-reduced-motion: reduce) {
.lp-qbtn::after {
transition: none;
}
.lp-qbtn:hover::after {
--lp-ring: 360deg;
}
}
.lp-qbtn-cn {
font-size: 19px;
font-weight: 800;
color: var(--teal-d);
letter-spacing: 2px;
line-height: 1.2;
}
.lp-qbtn-tip {
font-size: 12.5px;
color: var(--gray);
line-height: 1.4;
}
/* 銆屼负浠€涔堥€夋嫨銆嶆爣棰橈細绱ц窡涓婃柟鐨勭洿杈惧叆鍙ｏ紝鎶婂師鏉ョ殑 124px 澶х暀鐧芥敹鎺?*/.lp-sec-head-center.lp-sec-head-nav {
margin-top: 38px;
}
/* ===== 鏁欏婕旂ず绐?===== */.lp-mock {
position: relative;
width: 100%;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
background: #fff;
border: 1px solid #dcefea;
box-shadow: 0 30px 70px rgba(11,92,85,.14);
transform-style: preserve-3d;
}
.lp-mock-bar {
display: flex;
align-items: center;
gap: 8px;
background: #eef6f4;
padding: 12px 18px;
border-bottom: 1px solid #e1efeb;
}
.lp-mock-bar i {
width: 11px;
height: 11px;
border-radius: 50%;
background: #c9dcd7;
}
.lp-mock-bar i:first-child {
background: #ff8a80;
}
.lp-mock-bar i:nth-child(2) {
background: #ffd66e;
}
.lp-mock-bar i:nth-child(3) {
background: #7fd08b;
}
.lp-mock-bar span {
margin: 0 auto;
font-size: 12px;
color: #7a8f8a;
background: #fff;
border: 1px solid #e1efeb;
border-radius: 999px;
padding: 4px 18px;
}
/* 鈥斺€?浠垮皬绋嬪簭缁冧範椤佃垶鍙帮紙960 鍥哄畾鍩哄噯锛岀獎灞忔暣浣撶缉鏀撅級鈥斺€?*/.lp-mock-body {
background: linear-gradient(180deg, #E6F4F1 0%, #FFFFFF 30%);
padding: 16px 0 0;
overflow: hidden;
}
.mp-stage {
position: relative;
/* 蹇呴』鍥哄畾 960px 鍩哄噯瀹斤紙涓嶈 max-width 鏀剁缉锛夛細 鍐呴儴鎵€鏈夊昂瀵搁兘鐢?cqw锛? 鏈鍣ㄥ鐨?1%锛夛紝鍐欏湪 960 鍩哄噯涓婃墠鑳藉拰缁冧範椤?1:1銆? 鍗＄墖鏁翠綋缂╁皬鐢卞灞?.mp-slide 鐨?scale 璐熻矗锛岃繖閲岀粷涓嶈兘璺熺潃鍙樼獎锛? 鍚﹀垯 cqw 鍩哄噯琚敼灏忋€佹柟鍧楀拰绫冲瓧鏍间細琚帇鎵侊紙鏇惧嚭鐜?.face 楂樺害鍙墿 7px锛夈€?*/ width: 960px;
margin: 0 auto;
container-type: inline-size;
container-name: mpstage;
}
/* 婕旂ず绐楀唴閮紙鎷奸煶鏍?绫冲瓧鏍?閿洏/鎵嬪浘/鎸夐挳锛夊叏閮ㄥ鐢?drill.css 鐨勭粌涔犻〉鍚屾鏍峰紡锛岃繖閲屼笉鍐嶅彟鍐?*//* 鎺у埗鏍?搴曢儴鎿嶄綔琛?閿洏/鎵嬪浘锛氬叏閮ㄧ敤 drill.css 缁冧範椤靛悓娆剧被鍚嶏紝鏍峰紡涓嶅啀閲嶅 *//* 鎵嬪浘瀵逛綅鍙橀噺涓庡畾浣嶅叏閮ㄧ敱 drill.css/.hand-clipper 鎻愪緵锛孞S 鐩存帴鍒?left/bottom锛堟棤杩囨浮锛?*//* ===== 婕旂ず绐楋細妯悜杞挱锛堜腑闂村ぇ銆佷袱杈瑰皬锛岀偣绠ご鍒囨崲锛?==== 瀹藉害 100vw 鐮村鍣ㄩ摵婊℃暣灞忥紝宸﹀彸涓ゅ紶鍗℃墠鏈夌┖闂村畬鏁撮湶鍑烘潵銆? 楂樺害锛氳繖閲?864px 鍙槸銆孞S 杩樻病璺戝埌銆嶆椂鐨勫厹搴曞€笺€? 瀹為檯楂樺害鐢?app.js 鎸変腑闂村崱鐗囩殑娓叉煋楂樺害 + 64px 鎶曞奖浣欓噺鍔ㄦ€佸啓鍏ュ唴鑱旀牱寮忥紝 鍥犱负鍐欐 864 浼氳鍗＄墖涓婁笅鍚勭┖鍑?80px锛堢暀鐧借繃澶氾級銆?*/.mp-carousel {
position: relative;
/* 鍚?.lp-hero锛氬彲鐢ㄥ搴﹁鎵ｆ帀宸︿晶杈规爮锛屽惁鍒欎細鐩栧埌杈规爮搴曚笅 */ width: 100%;
margin-left: 0;
margin-right: 0;
height: 888px;
padding: 92px 0;
box-sizing: border-box;
display: flex;
align-items: center;
overflow: visible;
}
/* 杞ㄩ亾鍙槸瀹氫綅瀹瑰櫒锛屽崱鐗囧叏閮ㄧ粷瀵瑰畾浣嶅埌涓変釜鍥哄畾妲戒綅锛堝乏/涓?鍙筹級锛? 浣嶇疆鐢?CSS 璇翠簡绠楋紝鍒囨崲鏃跺彧鎹?class 鈥斺€?涓嶈鎬庝箞鍒囬兘涓嶄細璺戝亸 */.mp-track {
position: absolute;
inset: 0;
}
/* 姣忓紶鍗★細浠ュ鍣ㄤ腑蹇冧负鍩哄噯缁濆瀹氫綅銆俵eft/top 50% 閰嶅悎 translate(-50%,-50%) 鍗充负灞呬腑锛屼笉瑕佸啀鍔?margin-left 璐熷€硷紙閭ｄ細閲嶅鎶垫秷銆佹暣浣撳亸绉伙級銆? 瀹藉害鎸夊鍣ㄥ弽绠楋細瀹瑰櫒 1032 瑕佹斁涓嬨€屼腑闂村崱 + 宸﹀彸鍚勫崐寮犮€嶏紝 鎵€浠ュ崱涓嶈兘澶 鈥斺€?760px 鏃朵笁寮犳€诲崰 760脳.80 + 涓や晶鍚勯湶鍑?~130px 鍒氬ソ鎺掓弧銆?*/.mp-slide {
position: absolute;
left: 50%;
/* 鍗＄墖涓績鐣ラ珮浜庡鍣ㄤ腑蹇?15px锛氬鍣ㄩ珮搴︽槸銆屽崱鐗囬珮 + 70銆嶏紝 杩欐牱浣欓噺鍒嗘垚涓?20 / 涓?50 鈥斺€?涓嬫柟蹇呴』鐣欏 50px 鎵嶈兘瑁呬笅缂╂斁鍚庣殑鎶曞奖锛? 鍚﹀垯闃村奖浼氳瀹瑰櫒搴曡竟鍒囧嚭涓€鏉＄洿绾匡紙鍘熸潵灞呬腑鐣欑櫧鏃朵笂涓嬮兘绌?80px锛夈€?*/ top: calc(50% - 15px);
/* 鍗″蹇呴』鍜岀湡瀹炵粌涔犻〉涓€鑷达紙缁冧範妗?932 + 宸﹀彸鍐呰‖ 鈮?960锛夈€? 鍘熷洜锛氶噷闈㈢珛鏂逛綋鏍?閿洏鐨勫昂瀵稿叏鐢?vw 绠楋紝鍗″涓嶅浼氭帓涓嶄笅銆佹牸瀛愯鍘嬫墎銆? 鍗＄墖鏁翠綋缂╂斁浜ょ粰 scale锛屼笉瑕侀潬鏀瑰崱瀹藉幓缂╂斁銆?*/ width: 960px;
border-radius: 20px;
overflow: hidden;
background: #fff;
border: 1px solid #dcefea;
box-shadow: 0 20px 46px rgba(11,92,85,.16);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: transform .55s cubic-bezier(.25,.8,.3,1), filter .5s ease, opacity .5s ease, box-shadow .5s ease;
}
/* 涓変釜妲戒綅锛氫腑闂达紙鏀惧ぇ銆佹竻鏅帮級銆佸彸銆佸乏锛堢缉灏忋€佸彉鏆楋級銆? translate(-50%, -50%) 鍏堟妸鍗＄墖鑷韩灞呬腑锛屽啀鎸夋Ы浣嶅钩绉汇€?*//* 涓棿閭ｅ紶锛氬崱鐗囪嚜鐒堕珮 1354px锛岀缉鍒?.52 鈫?瑙嗚楂樼害 704px锛屾濂借杩涘鍣ㄣ€? 缂╂斁澶ぇ鍐呭浼氳鎺ㄥ埌瑙嗗彛澶栵紙鏂瑰潡璺戝埌 y=1770銆佺湅涓嶈锛夈€?*/.mp-slide.pos-mid {
transform: translate(-50%, -50%) scale(.52);
filter: none;
opacity: 1;
/* 闃村奖鐢ㄧ函榛戯紙涓嶈甯︾豢鑹诧級锛氬甫鑹查槾褰卞湪澶х櫧搴曚笂浼氭樉鑴?*/ box-shadow: 0 30px 60px rgba(0,0,0,.20);
cursor: default;
pointer-events: auto;
z-index: 3;
}
/* 涓や晶鍗★細姣斾腑闂村皬锛?36锛夛紝寰€涓棿闈狅紙骞崇Щ 355px锛夈€? 355 鏄€屽垰濂借创浣忎腑闂村崱杈圭紭銆嶇殑璺濈锛堜腑闂村崱缂╂斁鍚庡绾?500锛屽崐瀹?250锛? 涓や晶鍗″ 346锛屽崐瀹?173 鈫?250+173-68 璁╁畠浠暐寰涓棿鍗″帇浣忥紝涓嶉湶缂濅篃涓嶈窇鍑哄睆锛夈€?*/.mp-slide.pos-right {
transform: translate(calc(-50% + 355px), -50%) scale(.36);
filter: brightness(.88) saturate(.85);
opacity: .78;
pointer-events: auto;
z-index: 2;
}
.mp-slide.pos-left {
transform: translate(calc(-50% - 355px), -50%) scale(.36);
filter: brightness(.88) saturate(.85);
opacity: .78;
pointer-events: auto;
z-index: 2;
}
.mp-slide .lp-mock-body {
border-radius: 0;
}
/* 婕旂ず绐楀崱鐗囦篃鐢ㄥ悓涓€濂椼€宧over 鎻忚竟缁曚竴鍦堛€嶏紙涓?.lp-qbtn::after 鍚屼竴涓?--lp-ring锛夛細 鍗＄墖琚?scale 缂╂斁杩囷紝鐜殑绮楃粏瑕佹寜缂╂斁鍙嶇潃缁欙紙middle 鍗?.52 鈫?4px 缂╂垚绾?2px锛?*/.mp-slide::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 4px;
background: conic-gradient(var(--teal) 0deg var(--lp-ring), transparent var(--lp-ring) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 5;
transition: --lp-ring 900ms ease-in-out;
}
.mp-slide:hover::after {
--lp-ring: 360deg;
}
@media (prefers-reduced-motion: reduce) {
.mp-slide::after {
transition: none;
}
}
/* 宸﹀彸鍒囨崲绠ご锛氱幓鐠冭川鎰熷渾閽紝鍘嬪湪涓棿鍗′笌涓や晶鍗′箣闂寸殑缂濋殭涓?*/.mp-nav {
position: absolute;
top: 50%;
z-index: 6;
width: 56px;
height: 56px;
margin-top: -28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #0b5c55;
/* 姣涚幓鐠冿細鍗婇€忔槑鐧?+ 鑳屾櫙妯＄硦锛涘彔涓€灞傞《閮ㄥ唴楂樺厜鍋氱幓鐠冨帤搴︼紝鍙充笅鍐嶅姞涓€鍦堝唴闃村奖鍘嬭竟 */ background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(240,250,248,.78) 100%);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
backdrop-filter: blur(10px) saturate(1.4);
border: 1px solid rgba(15,118,110,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(15,118,110,.07), 0 10px 24px rgba(11,92,85,.16), 0 2px 6px rgba(11,92,85,.10);
cursor: pointer;
user-select: none;
transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
}
.mp-nav svg {
width: 22px;
height: 22px;
display: block;
transition: transform .24s cubic-bezier(.2,.7,.2,1);
}
/* 鎮仠锛氬疄蹇冮潚缁挎笎鍙?+ 鍏夋檿锛涚澶村線瀵瑰簲鏂瑰悜杞绘帹锛屾殫绀?缈婚〉鏂瑰悜" */.mp-nav:hover {
color: #fff;
background: linear-gradient(160deg, #17c4b5 0%, #0b7a70 100%);
border-color: rgba(11,122,112,.9);
transform: scale(1.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 6px rgba(20,179,166,.14), 0 14px 32px rgba(11,92,85,.30);
}
.mp-nav-l:hover svg {
transform: translateX(-2px);
}
.mp-nav-r:hover svg {
transform: translateX(2px);
}
/* 鎸変笅锛氬洖寮规敹缂?*/.mp-nav:active {
transform: scale(.94);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(11,92,85,.20);
}
/* 涓棿鍗℃斁澶у悗瀹界害 500px锛堝崐瀹?250锛夛紝涓や晶鍗′腑蹇冨湪 卤355px锛? 绠ご鏀惧湪涓よ€呬箣闂寸殑缂濋殭涓?*/.mp-nav-l {
left: calc(50% - 372px);
}
.mp-nav-r {
left: calc(50% + 316px);
}
/* 绐勫睆锛氭暣浣撶缉灏?*/@media (max-width: 980px) {
.mp-carousel {
height: 680px;
}
.mp-slide {
width: 620px;
transform: scale(.60);
}
.mp-nav {
width: 46px;
height: 46px;
margin-top: -23px;
}
.mp-nav svg {
width: 18px;
height: 18px;
}
.mp-nav-l {
left: 12px;
}
.mp-nav-r {
right: 12px;
}
}
/* ===== 婕旂ず绐楄嚜鍔ㄦ墦瀛?===== *//* 鍐呭鍖猴細鐢?JS 鎸夊綋鍓嶅満鏅噸寤猴紙鎸囨硶绔嬫柟浣撴牸 / 鎷奸煶鎺夎惤闃熷垪 / 鎷奸煶鍥涚嚎鏍?/ 涓枃鍙岀背瀛楁牸锛夈€? 鍚勬ā寮忚嚜宸辩殑鏍峰紡澶嶇敤 drill.css 閲岀粌涔犻〉鐨勫悓娆剧被锛岃繖閲屽彧鍏滃簳鐩掑瓙涓庡唴杈硅窛銆?*//* 鍐呭鍖猴細鍐呴儴鍐呭涓€寰嬩笉鍔紙鍚勫満鏅寜缁冧範椤靛師鏍锋覆鏌擄級銆? 鍙粰涓€涓渶灏忛珮搴?鈥斺€?涓変釜鍦烘櫙閲屾渶楂樼殑閭ｄ釜锛堟寚娉曠珛鏂逛綋锛夋拺鍒拌繖涓珮搴︼紝 鍏朵綑鍦烘櫙鐢ㄧ┖鐧借ˉ瓒筹紝杩欐牱宸﹀彸鍒囨崲鏃跺崱鐗囬珮搴﹀畬鍏ㄤ竴鑷达紝涓斾笉浼氭湁鍐呭琚銆?*//* 鍥哄畾楂樺害鍙栨渶楂樼殑鎸囨硶鍦烘櫙锛堝疄娴嬪唴瀹硅嚜鐒堕珮 499px锛夛紱flex:0 0 auto 闃叉琚埗绾у帇缂┿€? box-sizing 鐢?border-box锛屼繚璇佽ˉ浜嗗唴杈硅窛鍚庢€诲浠嶅拰閿洏涓€鑷淬€?*/.mp-play {
width: 100%;
height: 499px;
flex: 0 0 auto;
box-sizing: border-box;
}
/* 鍐呭妗嗚鍜屼笅闈㈢殑閿洏绛夊锛氶敭鐩樺彲瑙佸 = 960 - 2脳14px 鍐呰‖ = 932px銆? 杩欓噷鍐欐垚 932 灞呬腑锛屽惁鍒欐嫾闊虫牸浼氬鍑轰竴鍦堬紙鎴愯/涓夊瓧鍗℃浘鏄?960 vs 932锛夈€?*/.mp-play .pinyin-flow,.mp-play .pinyin-flow-scroll {
width: 932px;
max-width: 100%;
margin: 0 auto;
padding: 0;
}
.mp-play .drill-stack {
width: 100%;
}
/* 鎸囨硶鍦烘櫙锛氱珛鏂逛綋鍗¤鍜屼笅闈㈢殑閿洏绛夊銆? 瀹炴祴锛堢缉鏀惧墠锛夛細閿洏 932px锛岀珛鏂逛綋鍗￠粯璁?884px 鈥斺€?宸?48px銆? 缁欑珛鏂逛綋鍗¤ˉ鍒板拰閿洏鍚屽锛堢敤涓庨敭鐩樹竴鑷寸殑澶栧锛夈€?*/.mp-play .seq-bar {
padding: 0;
}
.mp-play .seq-track {
width: 932px;
max-width: 100%;
box-sizing: border-box;
}
/* 涓枃杈撳叆锛氭鍦ㄨ緭鍏?宸茶緭鍏ョ殑鎷奸煶鎻愮ず鐫€鑹诧紙澶嶅埢缁冧範椤电殑娣辩豢鈫掔伆锛?*/.mp-play .pf-py-done {
color: #0C615B;
}
.mp-play .pf-py-active {
color: #0F766E;
font-weight: 800;
}
/* 鎵嬪浘鐩存帴鍒囨崲锛屼笉鍔犱换浣曡繃娓★紙瀵归綈灏忕▼搴忥細鎹㈤敭鐬棿鎹㈡墜鍨嬶級 *//* ===== 婕旂ず绐椾笅鏂圭殑妯″紡鏍囩锛氱函鏂囧瓧鑳跺泭锛屽彲鐐广€侀紶鏍囨偓鍋滄湁鍙嶉 ===== */.lp-mock-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 11px;
margin-top: 26px;
}
.lp-mtag {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .3px;
color: #0b7a70;
background: #ffffff;
border: 1px solid #cde8e2;
border-radius: 999px;
padding: 9px 20px;
cursor: pointer;
user-select: none;
box-shadow: 0 2px 6px rgba(11,92,85,.05);
transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s, color .2s, background .22s;
}
/* 榧犳爣绉诲叆锛氫笂娴?+ 鎻忚竟鐐逛寒 + 搴曡壊鍙樻祬缁?+ 杞诲井鏀惧ぇ */.lp-mtag:hover {
transform: translateY(-3px) scale(1.04);
border-color: #14b3a6;
color: #073b35;
background: #eafaf7;
box-shadow: 0 10px 22px rgba(11,122,112,.20), 0 0 0 3px rgba(20,179,166,.10);
}
/* 褰撳墠閫変腑鐨勯偅鏋氾細瀹炲績闈掔豢搴?+ 鐧藉瓧锛堝啓鍦?:hover 涔嬪悗锛屼繚璇侀€変腑鎬佷笉琚鐩栵級 */.lp-mtag.on,.lp-mtag.on:hover {
background: linear-gradient(140deg, #14b3a6, #0b7a70);
border-color: #0b7a70;
color: #fff;
box-shadow: 0 6px 16px rgba(11,122,112,.28);
}
/* 鎸変笅鏃惰交寰笅娌夛紝缁?鍙偣"鐨勫疄鎰?*/.lp-mtag:active {
transform: translateY(0) scale(.97);
box-shadow: 0 4px 10px rgba(11,122,112,.16);
}
/* 鎮仠鏃朵竴閬撶櫧鍏夋壂杩?*/.lp-mtag::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.8) 50%, transparent 68%);
transform: translateX(-120%);
transition: transform .55s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.lp-mtag:hover::after {
transform: translateX(120%);
}
/* ===== 涓轰粈涔堥€夋嫨锛欱ento 甯冨眬 鈥斺€?棣栧潡鏄繁澧ㄧ豢澶у崱锛堟墦鐮村叏椤垫祬鑹诧級锛屽叾浣欐槸鐧藉崱 ===== *//* 3 鍒楋細涓诲崱鍗?2脳2锛堝乏涓婏級锛屽叾浣?5 寮犳濂藉～婊″彸渚?2 鏍?+ 搴曢儴 3 鏍硷紝涓嶇暀绌烘牸 */.lp-why-grid {
width: min(1120px, calc(100% - 48px));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(158px, auto);
gap: 18px;
}
.lp-why {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fff;
border-radius: 20px;
/* 杈规鏀圭敤 inset 闃村奖锛氱粷瀵瑰畾浣嶇殑 inset:0 鍙傜収鐨勬槸 padding box锛? 鐣欑潃 1px 鐪熻竟妗嗕細璁╀笅闈㈢殑鎻忚竟鍦堝線閲岀缉銆佸闈㈤湶鍑轰竴鏉℃祬鑹茬粏杈?*/ box-shadow: inset 0 0 0 1px #e3efec;
padding: 26px 24px;
transform-style: preserve-3d;
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.lp-why:hover {
transform: translateY(-5px);
box-shadow: inset 0 0 0 1px #b9e2da, 0 24px 54px rgba(11,92,85,.15);
}
/* hover 鏃舵弿涓€鍦堬紙涓?.lp-qbtn::after 鍚屼竴濂楁満鍒躲€佸悓涓€涓?--lp-ring锛? 鐧藉崱鐢ㄤ富棰樼豢锛涙繁澧ㄧ豢涓诲崱鍦ㄤ笅闈㈠崟鐙崲鎴愪寒闈掞紝鍚﹀垯鍜屽簳鑹茬硦涓€璧?*/.lp-why::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
/* 鐜殑绮楃粏 */ background: conic-gradient(var(--ring-c, var(--teal)) 0deg var(--lp-ring), transparent var(--lp-ring) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 3;
transition: --lp-ring 800ms ease-in-out;
}
.lp-why:hover::after {
--lp-ring: 360deg;
}
.lp-why-feat {
--ring-c: var(--ring-bright);
}
@media (prefers-reduced-motion: reduce) {
.lp-why::after {
transition: none;
}
}
.lp-why-spot {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
background: radial-gradient(300px circle at var(--mx, -200px) var(--my, -200px), rgba(15,148,136,.09), transparent 65%);
}
.lp-why:hover .lp-why-spot {
opacity: 1;
}
/* 鈥斺€?鍥炬爣锛氱櫧鍗′笂鐢ㄩ潚缁挎笎鍙樺疄蹇冨潡 鈥斺€?*/.lp-why-ico {
flex: none;
width: 52px;
height: 52px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight: 800;
color: #fff;
background: linear-gradient(140deg, #14b3a6 0%, #0b7a70 100%);
box-shadow: 0 8px 18px rgba(11,122,112,.26), inset 0 1px 0 rgba(255,255,255,.28);
margin-bottom: 16px;
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.lp-why:hover .lp-why-ico {
transform: translateY(-3px) scale(1.07) rotate(-4deg);
}
.lp-why-txt {
flex: 1;
min-width: 0;
}
.lp-why-name {
font-size: 17px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 8px;
}
.lp-why-desc {
font-size: 13px;
color: var(--gray);
line-height: 1.75;
}
/* 鈥斺€?棣栧潡锛堟嫾闊虫嫾璇绘暀绋嬶級锛氬崰 2脳2 鐨勬繁澧ㄧ豢涓诲崱锛屽叏椤靛敮涓€鐨勯噸鑹插潡 鈥斺€?*/.lp-why-feat {
grid-column: span 2;
grid-row: span 2;
justify-content: flex-end;
padding: 32px 30px;
border: none;
color: #fff;
background: radial-gradient(520px 260px at 84% -16%, rgba(45,212,191,.26), transparent 62%), linear-gradient(152deg, #073b35 0%, #0a5148 46%, #0e6f64 100%);
box-shadow: 0 20px 46px rgba(7,59,53,.26);
}
.lp-why-feat:hover {
box-shadow: 0 30px 62px rgba(7,59,53,.34);
border: none;
}
.lp-why-feat .lp-why-spot {
background: radial-gradient(420px circle at var(--mx, -200px) var(--my, -200px), rgba(125,232,214,.14), transparent 62%);
}
.lp-why-feat .lp-why-ico {
width: 62px;
height: 62px;
border-radius: 18px;
font-size: 27px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(125,232,214,.30);
box-shadow: none;
margin-bottom: 20px;
}
.lp-why-feat .lp-why-name {
font-size: 26px;
color: #fff;
letter-spacing: .5px;
margin-bottom: 12px;
}
.lp-why-feat .lp-why-desc {
font-size: 14px;
color: rgba(255,255,255,.76);
line-height: 1.85;
max-width: 420px;
}
/* ===== 寰俊灏忕▼搴忓尯 ===== */.lp-mp {
width: min(1120px, calc(100% - 48px));
margin: 76px auto 0;
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 40px;
align-items: center;
background: linear-gradient(135deg, #f0f8f6 0%, #e2f2ee 100%);
border: 1px solid #cde8e2;
border-radius: 24px;
padding: 48px clamp(24px, calc(4.5 * var(--pg-vw, 1vw)), 56px);
overflow: hidden;
position: relative;
}
.lp-mp::before {
content: '';
position: absolute;
right: -120px;
top: -120px;
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(circle, rgba(20,179,166,.18), transparent 65%);
pointer-events: none;
}
.lp-mp-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 700;
color: #0b7a70;
background: #fff;
border: 1px solid #b9e2da;
border-radius: 999px;
padding: 6px 16px;
margin-bottom: 16px;
}
.lp-mp-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #14b3a6;
box-shadow: 0 0 0 4px rgba(20,179,166,.18);
}
.lp-mp-txt h2 {
font-size: clamp(22px, calc(2.6 * var(--pg-vw, 1vw)), 28px);
font-weight: 800;
color: var(--teal-d);
margin-bottom: 12px;
}
.lp-mp-txt p {
font-size: 14.5px;
color: #4d6661;
line-height: 1.9;
max-width: 560px;
margin-bottom: 16px;
}
.lp-mp-list {
list-style: none;
}
.lp-mp-list li {
font-size: 14px;
color: #37534e;
padding: 5px 0 5px 26px;
position: relative;
}
.lp-mp-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 5px;
width: 17px;
height: 17px;
border-radius: 50%;
background: #14b3a6;
color: #fff;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.lp-mp-card {
position: relative;
z-index: 1;
background: #fff;
border-radius: 20px;
padding: 22px;
text-align: center;
box-shadow: 0 22px 50px rgba(11,92,85,.16);
justify-self: center;
}
.lp-mp-card img {
width: clamp(150px, calc(16 * var(--pg-vw, 1vw)), 190px);
height: auto;
display: block;
margin: 0 auto;
border-radius: 10px;
}
.lp-mp-cap {
font-size: 13px;
font-weight: 700;
color: var(--teal-d);
margin-top: 12px;
}
/* ===== 椤佃剼 ===== */body.is-home .footer {
display: none;
}
.lp-foot {
position: relative;
width: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: -60px;
/* 鎶垫秷 .main 搴曢儴鍐呰竟璺濓紝娣辫壊椤佃剼璐村埌椤甸潰鏈€搴?*/ background: #072b27;
color: rgba(255,255,255,.68);
margin-top: 78px;
}
.lp-foot-inner {
max-width: 1120px;
margin: 0 auto;
padding: 54px 24px 40px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr .9fr;
gap: 40px;
}
.lp-foot-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.lp-foot-logo .brand-logo {
width: 42px;
height: 42px;
border-radius: 11px;
background: #fff;
color: var(--teal-d);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 900;
flex: none;
}
.lp-foot-name {
font-size: 17px;
font-weight: 800;
color: #fff;
}
.lp-foot-sub {
font-size: 12px;
color: rgba(255,255,255,.5);
margin-top: 2px;
}
.lp-foot-brand p {
font-size: 13px;
line-height: 1.9;
color: rgba(255,255,255,.55);
max-width: 340px;
}
.lp-foot-col h4 {
font-size: 14.5px;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
}
.lp-foot-col a {
display: block;
font-size: 13.5px;
color: rgba(255,255,255,.6);
padding: 6px 0;
cursor: pointer;
transition: color .2s;
}
.lp-foot-col a:hover {
color: #7de8d6;
}
.lp-foot-qr {
text-align: center;
}
.lp-foot-qr img {
width: 112px;
height: 112px;
background: #fff;
border-radius: 12px;
padding: 7px;
display: block;
margin: 0 auto 10px;
}
.lp-foot-qr span {
font-size: 12.5px;
color: rgba(255,255,255,.6);
}
.lp-foot-bar {
border-top: 1px solid rgba(255,255,255,.1);
max-width: 1120px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(255,255,255,.45);
}
.lp-foot-links {
display: flex;
align-items: center;
gap: 12px;
}
.lp-foot-links a {
cursor: pointer;
color: rgba(255,255,255,.6);
transition: color .2s;
}
.lp-foot-links a:hover {
color: #7de8d6;
}
.lp-foot-links i {
font-style: normal;
color: rgba(255,255,255,.22);
}
/* ===== 鏈嶅姟鏉℃ / 闅愮鏀跨瓥 ===== */.legal-page {
max-width: 780px;
margin: 30px auto 60px;
padding: 0 22px;
}
.legal-back {
display: inline-block;
margin-bottom: 18px;
}
.legal-title {
font-size: 28px;
font-weight: 800;
color: var(--teal-d);
margin-bottom: 6px;
}
.legal-updated {
font-size: 13px;
color: var(--gray);
margin-bottom: 26px;
}
.legal-h2 {
font-size: 17px;
font-weight: 800;
color: var(--teal-d);
margin: 26px 0 10px;
}
.legal-p {
font-size: 14.5px;
color: #44585386;
color: #4a5f5a;
line-height: 2;
}
/* 鈥斺€?婊氬姩娴幇 鈥斺€?*/.lp-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.lp-reveal.in-view {
opacity: 1;
transform: none;
}
/* ===== 鎷奸煶缁冧範 路 妯″紡閫夋嫨锛堟繁鑹?Hero + Bento 缃戞牸锛?==== */.pym2-page {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px 72px;
}
/* 椤甸潰搴曡壊锛氶《閮ㄤ竴灞傚ⅷ缁挎煍鍏夛紝璁╁崱鐗?娴?鍦ㄤ富棰樿壊姘涘洿閲岋紝鑰屼笉鏄创鍦ㄧ函鐧戒笂 */body:has(.pym2-page) {
background: radial-gradient(1100px 480px at 50% -120px, rgba(15,118,110,.10), transparent 70%), linear-gradient(180deg, #eef8f6 0%, #ffffff 380px);
}
/* 鈥斺€?妯″紡椤甸〉澶达細鏁村潡澧ㄧ豢娓愬彉 + 鍏夋檿 + 缃戞牸绾圭悊 + 璺熼殢榧犳爣鐨勮仛鍏夌伅 鈥斺€?*/.mode-bar {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding: 38px 24px 36px;
margin: 20px 0 22px;
border-radius: 20px;
/* 鏂滃悜澧ㄧ豢娓愬彉锛堜笌棣栭〉 hero 鍚屼竴璇█锛夛紝涓嶅啀鍋?涓や晶閫忔槑" */ background: radial-gradient(620px 240px at 84% -30%, rgba(45,212,191,.28), transparent 66%), linear-gradient(152deg, #073b35 0%, #0a5148 46%, #0e6f64 100%);
box-shadow: 0 18px 40px rgba(7,59,53,.26);
}
/* 缁嗙綉鏍肩汗鐞嗭紙鍙犲湪娓愬彉涓婏級锛岃澶у潡娣辫壊涓嶆樉绌?*/.mode-bar::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(rgba(125,232,214,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(125,232,214,.07) 1px, transparent 1px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(120% 140% at 50% 0%, #000 30%, transparent 78%);
mask-image: radial-gradient(120% 140% at 50% 0%, #000 30%, transparent 78%);
}
/* 璺熼殢榧犳爣鐨勮仛鍏夌伅锛圝S 鍐?--mbx/--mby锛?*/.mode-bar::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(280px circle at var(--mbx, -999px) var(--mby, -999px), rgba(125,232,214,.22), rgba(125,232,214,.06) 45%, transparent 72%);
opacity: 0;
transition: opacity .3s ease;
}
.mode-bar:hover::after {
opacity: 1;
}
/* 鏄熺偣锛堜繚鐣欎絾鏇村惈钃勶級 */.mode-bar-dots {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .35;
background-image: radial-gradient(2px 2px at 16% 32%, rgba(125,232,214,.9), transparent), radial-gradient(1.6px 1.6px at 28% 74%, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 76% 28%, rgba(125,232,214,.8), transparent), radial-gradient(1.5px 1.5px at 88% 70%, rgba(255,255,255,.6), transparent);
animation: mbTwinkle 4.5s ease-in-out infinite;
}
@keyframes mbTwinkle {
0%, 100% {
opacity: .25;
}
50% {
opacity: .6;
}
}
.mode-bar-txt {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
text-align: center;
max-width: 720px;
}
.mode-bar-txt h1 {
font-size: 26px;
font-weight: 800;
letter-spacing: 1px;
color: #fff;
line-height: 1.2;
text-shadow: 0 2px 14px rgba(0,0,0,.28);
}
.mode-bar-txt p {
font-size: 13.5px;
color: rgba(255,255,255,.86);
line-height: 1.6;
}
/* 鈥斺€?鏃?Hero锛氫繚鐣欑被鍚嶅厹搴曪紙鎬昏椤?hub-hero 绛変粛鍙兘寮曠敤锛夆€斺€?*/.pym2-hero {
position: relative;
overflow: hidden;
margin: 28px 0 30px;
padding: 52px 54px;
border-radius: 26px;
color: #fff;
background: radial-gradient(820px 400px at 82% -12%, rgba(45,212,191,.22), transparent 62%), linear-gradient(158deg, #073b35 0%, #0a5148 44%, #0e6f64 100%);
box-shadow: 0 26px 60px rgba(7, 59, 53, .30);
display: flex;
align-items: center;
gap: 44px;
}
.pym2-hero-txt {
position: relative;
z-index: 2;
flex: 1;
min-width: 0;
}
/* 榧犳爣鑱氬厜鐏紙JS 鍐?background锛?*/.pym2-hero-spot {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
transition: background .16s ease-out;
}
/* 鈥斺€?鍙充晶澶ч敭鐩橈細娣辫壊鐜荤拑閿附锛岄紶鏍囨帬杩囩偣浜?鈥斺€?*/.pym2-hero-kb {
position: relative;
z-index: 2;
flex: none;
display: flex;
flex-direction: column;
gap: 9px;
padding: 18px;
border-radius: 18px;
background: rgba(3, 32, 28, .42);
border: 1px solid rgba(125, 232, 214, .18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px rgba(0, 0, 0, .32);
backdrop-filter: blur(8px);
user-select: none;
}
.pym2-hkb-row {
display: flex;
gap: 7px;
justify-content: center;
}
.pym2-hkb-key {
position: relative;
width: 38px;
height: 38px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
letter-spacing: .5px;
color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 rgba(0,0,0,.24);
transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}
.pym2-hkb-key.is-home {
color: rgba(125, 232, 214, .85);
border-color: rgba(94, 234, 212, .32);
}
.pym2-hkb-key.near {
background: rgba(94, 234, 212, .16);
color: #cffaf4;
border-color: rgba(94, 234, 212, .45);
}
.pym2-hkb-key.hot {
background: linear-gradient(180deg, #5eead4 0%, #2dd4bf 100%);
color: #04302b;
border-color: #7de8d6;
transform: translateY(2px) scale(1.06);
box-shadow: 0 0 0 4px rgba(94, 234, 212, .20), 0 6px 18px rgba(94, 234, 212, .48);
}
.pym2-hkb-bump {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 2px;
border-radius: 2px;
background: currentColor;
opacity: .7;
}
.pym2-hero::before {
content: '';
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
right: -100px;
top: -150px;
background: radial-gradient(circle, rgba(45, 212, 191, .35), transparent 65%);
}
.pym2-hero::after {
content: '';
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
right: 220px;
bottom: -170px;
background: radial-gradient(circle, rgba(251, 191, 36, .16), transparent 65%);
}
.pym2-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
letter-spacing: 3px;
font-weight: 700;
color: #7de8d6;
text-transform: uppercase;
}
.pym2-kicker::before {
content: '';
width: 28px;
height: 2px;
border-radius: 2px;
background: #5eead4;
}
.pym2-hero h1 {
position: relative;
font-size: 42px;
font-weight: 900;
letter-spacing: 2px;
margin: 16px 0 12px;
color: #fff;
}
.pym2-hero p {
position: relative;
font-size: 15px;
color: rgba(255, 255, 255, .72);
line-height: 1.7;
}
.pym2-stats {
position: relative;
display: flex;
gap: 14px;
margin-top: 28px;
flex-wrap: wrap;
}
.pym2-stat {
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .20);
backdrop-filter: blur(8px);
border-radius: 14px;
padding: 13px 20px;
min-width: 108px;
}
.pym2-stat b {
display: block;
font-size: 21px;
font-weight: 900;
color: #7de8d6;
}
.pym2-stat span {
font-size: 12px;
color: rgba(255, 255, 255, .68);
}
/* 鈥斺€?妯″紡鍗＄墖锛氶《閮ㄦ彃鐢诲尯锛堥敭鐩?鍙屾墜+瀛楁瘝鍧楋級+ 涓嬫柟鏂囧瓧锛堝弬鑰冩墦瀛楅腑鍗＄墖锛夆€斺€?*/.pym2-card {
--pc: #0F766E;
position: relative;
overflow: hidden;
background: #ffffff;
border-radius: 16px;
cursor: pointer;
box-sizing: border-box;
transform-style: preserve-3d;
will-change: transform;
transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
animation: pym2In .45s cubic-bezier(.2, .7, .2, 1) backwards;
/* 杈规鏀规垚 inset 闃村奖锛堜笌 .lp-why 鍚屾硶锛夛細鐣欑湡杈规浼氳鎻忚竟鍦堝唴缂?1px銆佸娌块湶涓€鏉＄粏杈?*/ box-shadow: inset 0 0 0 1px rgba(15,118,110,.14), 0 1px 3px rgba(15,118,110,.05), 0 6px 16px rgba(15,118,110,.07);
}
/* 鎮仠锛?D 鍊炬枩鐢?JS 鍐?transform锛堣窡闅忛紶鏍囨柟鍚戯級锛岃繖閲屽彧鍔犻槾褰卞拰鎻忚竟 */.pym2-card:hover {
box-shadow: inset 0 0 0 1px rgba(15,118,110,.38), 0 2px 6px rgba(15,118,110,.08), 0 22px 44px rgba(15,118,110,.20), 0 0 0 1px rgba(94,234,212,.18);
}
/* hover 鏃舵部鍗＄墖澶栨部鎻忎竴鍦堬紙涓?.lp-qbtn::after 鍚屼竴濂楁満鍒躲€佸叡鐢?--lp-ring锛?*/.pym2-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
/* 鐜殑绮楃粏 */ background: conic-gradient(var(--ring-c, var(--teal)) 0deg var(--lp-ring), transparent var(--lp-ring) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 3;
/* 鍘嬪湪 .pym2-spot(z-index:2) 涔嬩笂 */ transition: --lp-ring 800ms ease-in-out;
}
.pym2-card:hover::after {
--lp-ring: 360deg;
}
/* 鍗冲皢涓婄嚎鐨勫崱鏄帇鏆椾笖涓嶅彲鐐圭殑锛屼笉缁欐弿杈瑰湀 */.pym2-card-soon::after {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.pym2-card::after {
transition: none;
}
}
/* 榧犳爣浣嶇疆鐨勫厜鏂戯紙--mx/--my 鐢?JS 鍐欏叆锛夛細璁╁崱鐗囨湁涓€澶勮窡鐫€榧犳爣浜殑鍖哄煙 */.pym2-card .pym2-spot {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: 16px;
background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(94,234,212,.20), rgba(94,234,212,.05) 42%, transparent 68%);
opacity: 0;
transition: opacity .3s ease;
}
.pym2-card:hover .pym2-spot {
opacity: 1;
}
@keyframes pym2In {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
}
/* 鎻掔敾鍖猴細鏌斿拰搴曡壊 + 閿洏銆佸弻鎵嬨€佹紓娴瓧姣嶅潡 *//* 鎻掔敾鍖猴細娴呰壊娓愬彉搴?+ 3D 鍗￠€氫汉鐗╁浘 鍥句笉瑁?鈥斺€?鎻掔敾鍖洪珮搴﹁窡鐫€鍥剧墖璧帮紝浜虹墿瀹屾暣鏄剧ず锛堣浠讳綍涓€杈归兘浼氬垏鎺夊ご鎴栨墜锛?*/.pym2-card-art {
position: relative;
overflow: hidden;
/* 鍗＄墖杈规宸叉敼鎴?inset 闃村奖锛屽唴瀹逛粠鍗＄墖澶栨部寮€濮嬶紝鍦嗚瑕佸拰鍗＄墖涓€鑷达紙鍘?15px 鏄墸鎺?1px 杈规鐨勶級 */ border-radius: 16px 16px 0 0;
background: linear-gradient(168deg, var(--pc) 0%, #ffffff 150%);
line-height: 0;
}
.pym2-art-img {
display: block;
width: 100%;
height: auto;
transform-origin: 50% 88%;
/* 浠ヨ剼涓嬩负杞村績锛屾诞鍔ㄦ墠鍍忕珯鐫€鑰屼笉鏄鐫€ */ /* 杞诲井鏀惧ぇ 3% 骞朵笂绉伙紝璁╁浘鐗囧洓鍛ㄥ鍑轰竴鐐逛綑閲?鈥斺€?娴姩涓婃诞鏃朵笉浼氶湶鍑哄簳涓嬬殑绌虹櫧 */ animation: pym2Float 4.2s ease-in-out infinite;
transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
@keyframes pym2Float {
0%, 100% {
transform: scale(1.07) translateY(0);
}
50% {
transform: scale(1.07) translateY(-6px);
}
}
/* hover锛氬仠鎺夋诞鍔紙閬垮厤涓庡崱鐗囩殑 3D 鍊炬枩鎵撴灦锛夛紝鏀逛负杞诲井鏀惧ぇ + 鎶曞奖鍔犳繁锛? 浜虹墿鍍忎粠鍗＄墖閲?鎺?鍑烘潵涓€鐐癸紙閰嶅悎鍗＄墖鐨?3D 鍊炬枩鏇存湁灞傛锛夈€? 缂╂斁鍊煎繀椤?鈮?娴姩鍔ㄧ敾鐨?1.07锛屽惁鍒欎粠鍔ㄧ敾鍒囧埌 hover 浼氱獊鐒剁缉涓€涓嬨€?*/.pym2-card:hover .pym2-art-img {
animation-play-state: paused;
transform: scale(1.09) translateY(-4px);
filter: drop-shadow(0 14px 20px rgba(11,92,85,.22));
}
/* 浜虹墿鑴氫笅鐨勪竴鍦堝奖瀛愶細璺熺潃娴姩涓€璧风缉鏀撅紝璁?绔欑潃"鏇村疄 */.pym2-art-shadow {
position: absolute;
left: 50%;
bottom: 8px;
z-index: 0;
width: 46%;
height: 12px;
margin-left: -23%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(11,92,85,.20), transparent 70%);
animation: pym2Shadow 4.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes pym2Shadow {
0%, 100% {
transform: scale(1);
opacity: .9;
}
50% {
transform: scale(.86);
opacity: .6;
}
}
/* 鏂囧瓧鍖?*/.pym2-card-in {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
text-align: left;
padding: 12px 14px 14px;
}
.pym2-name {
font-size: 14.5px;
font-weight: 800;
color: #111827;
}
.pym2-desc {
font-size: 11px;
color: #94A3B8;
line-height: 1.5;
min-height: 33px;
}
/* 鈥斺€?鍗冲皢涓婄嚎锛氬帇鏆楅檷楗卞拰锛岃鍙敤妯″紡鎴愪负瑙嗚涓昏 鈥斺€?*/.pym2-card-soon {
opacity: .55;
filter: grayscale(.8) saturate(.35);
cursor: default;
}
.pym2-card-soon:hover {
transform: none;
box-shadow: inset 0 0 0 1px rgba(15,118,110,.14), 0 1px 3px rgba(15,118,110,.05), 0 6px 16px rgba(15,118,110,.07);
}
.pym2-card-soon:hover .pym2-art {
transform: none;
}
.pym2-soon-tag {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
font-size: 10.5px;
font-weight: 700;
color: #64748B;
background: rgba(255,255,255,.88);
border-radius: 999px;
padding: 3px 9px;
}
.pym2-foot {
margin-top: 32px;
text-align: center;
font-size: 13px;
color: #94A3B8;
}
/* ===== 缁冧範鎬昏椤碉紙鎸囨硶 / 鎷奸煶 / 涓枃 涓夋绔栨帓锛?==== */.hub-page {
padding-bottom: 40px;
}
.hub-hero {
position: relative;
overflow: hidden;
margin: 28px 0 34px;
padding: 44px 50px;
border-radius: 26px;
color: #fff;
background: radial-gradient(760px 380px at 84% -14%, rgba(45,212,191,.22), transparent 62%), linear-gradient(158deg, #073b35 0%, #0a5148 44%, #0e6f64 100%);
box-shadow: 0 26px 60px rgba(7, 59, 53, .28);
}
.hub-hero::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
right: -110px;
top: -170px;
background: radial-gradient(circle, rgba(94, 234, 212, .24), transparent 65%);
}
.hub-hero h1 {
position: relative;
font-size: 38px;
font-weight: 900;
letter-spacing: 1.5px;
margin: 14px 0 8px;
color: #fff;
}
.hub-hero p {
position: relative;
font-size: 15px;
color: rgba(255, 255, 255, .72);
}
.hub-sec {
padding-top: 12px;
margin-bottom: 30px;
}
/* 娈佃惤鏍囬锛氳创浣忓惛椤堕《鏍忔椂鐣欑櫧锛屾粴鍔ㄥ畾浣嶆墠涓嶄細椤跺埌瀛?*/.hub-sec-head {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 18px;
padding: 20px 24px;
background: #fff;
border: 1px solid #E4EEEB;
border-radius: 18px;
box-shadow: 0 6px 18px rgba(15, 118, 110, .06);
}
.hub-sec-no {
flex: none;
width: 46px;
height: 46px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
font-weight: 900;
color: #FFFFFF;
background: linear-gradient(135deg, #12857C, #0B4F47);
box-shadow: 0 8px 18px rgba(11, 79, 71, .28);
}
.hub-sec-txt {
flex: 1;
min-width: 0;
}
.hub-sec-title {
font-size: 22px;
font-weight: 900;
color: #0F172A;
letter-spacing: .5px;
}
.hub-sec-sub {
font-size: 13.5px;
color: #64748B;
margin-top: 4px;
}
.hub-sec-tag {
flex: none;
font-size: 12.5px;
font-weight: 700;
color: #0B7A70;
background: #E6F4F1;
border: 1px solid #CDE8E2;
border-radius: 999px;
padding: 6px 14px;
}
/* 涓€娈电殑鍒嗗壊绾匡紙闈炴渶鍚庝竴娈碉級*/.hub-sec + .hub-sec {
border-top: 1px dashed #D8E8E4;
padding-top: 34px;
}
/* 鎸囨硶娈碉細4 寮犲崱涓€琛岋紙鍏朵綑娈佃惤娌跨敤 3 鍒楋紝涓庢嫾闊?涓枃閫夋嫨椤典竴鑷达級 */.hub-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
/* 涓枃閫夋嫨椤?Hero 鏃犲彸渚ч敭鐩樻椂鏀剁獎鐣欑櫧 */.pym2-hero-plain {
min-height: 190px;
}
@media (max-width: 1180px) {
.hub-hero {
padding: 34px 30px;
}
.hub-hero h1 {
font-size: 30px;
}
}
@media (max-width: 1000px) {
.hub-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.hub-sec-head {
padding: 16px 18px;
gap: 12px;
}
.hub-sec-no {
width: 40px;
height: 40px;
font-size: 17px;
border-radius: 12px;
}
.hub-sec-title {
font-size: 19px;
}
}
@media (max-width: 760px) {
.hub-hero {
padding: 28px 22px;
margin: 20px 0 26px;
}
.hub-hero h1 {
font-size: 25px;
}
.hub-grid-4 {
grid-template-columns: 1fr;
}
.hub-sec-head {
flex-wrap: wrap;
}
.hub-sec-tag {
margin-left: 58px;
}
}
/* Hero 閿洏锛氶殢瑙嗗彛鏀剁獎閫愮骇缂╁皬锛岀獎灞忛殣钘忥紙绾楗帮紝涓嶅崰绌洪棿锛?*/@media (max-width: 1180px) {
.pym2-hero {
gap: 26px;
}
.pym2-hkb-key {
width: 33px;
height: 33px;
font-size: 12px;
border-radius: 8px;
}
.pym2-hkb-row {
gap: 6px;
}
.pym2-hero-kb {
gap: 7px;
padding: 13px;
}
}
@media (max-width: 1100px) {
.mode-bar-txt h1 {
font-size: 20px;
}
}
@media (max-width: 820px) {
.pym2-art {
height: 82px;
}
.mode-bar {
padding: 18px 20px;
}
.mode-bar-txt h1 {
font-size: 18px;
}
}
@media (max-width: 560px) {
.pym2-page {
padding: 0 16px 52px;
}
.mode-bar-txt h1 {
font-size: 17px;
}
}
/* ===== 鍝嶅簲寮?===== */@media (max-width: 980px) {
.lp-hero-inner {
gap: 36px;
padding: 96px 24px 72px;
}
.lp-h1 {
font-size: 40px;
}
.lp-why-grid {
grid-template-columns: repeat(2, 1fr);
}
.lp-mp {
grid-template-columns: 1fr;
gap: 30px;
}
.lp-mp-card {
justify-self: start;
}
.lp-foot-inner {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.lp-foot-brand {
grid-column: 1 / -1;
}
.lp-foot-qr {
grid-column: 1 / -1;
text-align: left;
}
.lp-foot-qr img {
margin: 0 0 8px;
}
/* 姝ゆ。鑸炲彴瀹?= 瀹瑰櫒瀹斤紝鐢ㄧ櫨鍒嗘瘮鎶垫秷缂╂斁鐣欑櫧 */ .mp-stage {
margin-bottom: -37.1%;
}
}
@media (max-width: 760px) {
.lp-h1 {
font-size: 31px;
}
.lp-lede {
font-size: 14.5px;
margin-bottom: 26px;
}
.lp-grid {
grid-template-columns: 1fr;
}
.lp-kf {
flex-direction: column;
align-items: flex-start;
padding: 28px 24px;
}
.lp-kf-badge {
position: static;
margin-bottom: 14px;
}
.lp-kf-action {
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.lp-kf-arrow {
width: 50px;
height: 50px;
font-size: 20px;
}
.lp-sec-head {
flex-wrap: wrap;
gap: 12px;
margin: 48px 0 20px;
}
.lp-sec-tag {
margin-left: 0;
}
.lp-sec-head-center {
margin: 68px 0 32px;
}
.lp-sec-head-center .lp-sec-title {
font-size: 26px;
}
.lp-band {
flex-direction: column;
align-items: flex-start;
padding: 32px 26px;
}
.lp-band .lp-btn {
margin-left: 0;
}
.lp-stats {
gap: 16px;
flex-wrap: wrap;
}
.lp-stat b {
font-size: 25px;
}
.lp-hero-inner {
padding: 84px 16px 56px;
gap: 26px;
}
.lp-cta-row {
margin-bottom: 30px;
}
.lp-scroll-hint {
display: none;
}
.lp-kbd-chips {
gap: 10px;
margin-bottom: 14px;
}
.lp-chip {
padding: 8px 14px;
font-size: 11.5px;
border-radius: 999px;
}
.lp-chip b {
font-size: 15px;
}
.lp-kbd {
border-radius: 12px;
padding: 8px;
}
.lp-kbd-row {
gap: 3px;
margin-bottom: 3px;
}
.lp-key {
height: 23px;
border-radius: 5px;
font-size: 8px;
box-shadow: 0 2px 0 rgba(0,0,0,.28);
}
.lp-kbd-light {
padding: 7px;
border-radius: 10px;
}
.lp-kbd-light .lp-key {
height: 20px;
font-size: 7.5px;
gap: 0;
}
.lp-metrics {
gap: 12px;
margin-top: 40px;
}
.lp-metric {
padding: 18px 16px;
gap: 12px;
border-radius: 16px;
}
.lp-metric-ico {
width: 44px;
height: 44px;
border-radius: 12px;
}
.lp-metric-ico svg {
width: 23px;
height: 23px;
}
.lp-metric-txt b {
font-size: 17px;
white-space: normal;
}
.lp-metric-txt b em {
font-size: 14px;
margin-left: 5px;
}
.lp-metric-txt span {
font-size: 11.5px;
}
.lp-why-grid {
grid-template-columns: 1fr;
}
.lp-quick {
margin-top: 34px;
}
.lp-quick-grid {
gap: 12px;
}
.lp-qbtn {
flex: 1 1 100%;
min-width: 0;
padding: 15px 20px;
}
.lp-qbtn-cn {
font-size: 17px;
}
.lp-sec-head-center.lp-sec-head-nav {
margin-top: 52px;
}
.lp-mp {
padding: 30px 22px;
margin-top: 56px;
}
.lp-mp-card {
justify-self: center;
width: 100%;
box-sizing: border-box;
}
/* 鎵嬫満妗ｏ細鑸炲彴涓嶅啀缂╂斁锛屽昂瀵稿叏閮ㄧ敱 cqw 鑷劧鍚屾瘮缂╁皬锛堜笌灏忕▼搴忎竴鑷达級 */ .mp-stage {
transform: none;
margin-bottom: 0;
}
.lp-sec-head-center .lp-sec-title.lp-sec-title-lg {
font-size: 27px;
}
.lp-foot-inner {
grid-template-columns: 1fr 1fr;
padding: 40px 22px 30px;
gap: 26px;
}
.lp-foot-brand {
grid-column: 1 / -1;
}
.lp-foot-qr {
grid-column: 1 / -1;
text-align: left;
}
.lp-foot-bar {
justify-content: center;
text-align: center;
}
}
@media (min-width: 561px) and (max-width: 760px) {
.lp-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.lp-reveal {
opacity: 1;
transform: none;
transition: none;
}
.lp-key-hot, .lp-chip, .lp-badge-dot, .lp-scroll-mouse i, .lp-caret {
animation: none;
}
}
/* ============================================================ 浼氬憳椤碉紙VIP锛? 缁撴瀯鐓ф惉灏忕▼搴?pages/vip锛欻ero锛圴IP 寰界珷锛夆啋 濂楅 鈫?鐗规潈 鈫?椤荤煡锛? 搴曢儴涓€鏉″浐瀹氭搷浣滄潯銆傞厤鑹叉部鐢ㄥ叏绔欑殑澧ㄧ豢 + 闈掔豢娓愬彉銆? ============================================================ *//* 鑳屾櫙瑕佺敾鍦?html 涓婏紝涓嶈兘鐢诲湪 body 涓?鈥斺€? body 鐨勯珮搴﹀彧鏈変竴灞忥紙808px锛夛紝娓愬彉鍒?460px 灏辩櫧浜嗭紝 鑰岄〉闈㈡湁 2000+px锛屽線涓嬫粴鐨勯儴鍒嗛湶鍑虹殑灏辨槸榛樿搴曡壊锛? 涓棿浼氬嚭鐜颁竴鏉℃槑鏄剧殑鍒嗙晫甯︺€俬tml 浼氳窡鐫€鏁翠釜鏂囨。楂樺害璧般€?*/html:has(.vip-page) {
background-color: #ffffff;
background-image: radial-gradient(1400px 600px at 50% -160px, rgba(15,118,110,.12), transparent 70%), linear-gradient(180deg, #eef8f6 0%, #ffffff 460px);
background-repeat: no-repeat, no-repeat;
background-position: top center, top left;
}
body:has(.vip-page) {
background: transparent;
}
/* 鐢佃剳绔鏈夌數鑴戠鐨勪綋閲忥細鏁撮〉 1160 瀹斤紙璺熸嫾闊?妯″紡椤典竴鑷达級锛? 澶х暀鐧姐€佸ぇ瀛楀彿锛屼笉缂╁湪涓棿涓€灏忔潯銆? #main 鑷甫 1080 闄愬 + 28/24/60 鍐呰竟璺濓紝浼氭妸瀹冨帇鍥炲幓锛屾墍浠ヨ繖涓€椤佃鏀惧紑銆?*/body:has(.vip-page) #main {
max-width: none;
padding: 28px 32px 60px;
}
.vip-page {
max-width: 1160px;
margin: 0 auto;
padding-bottom: 130px;
}
/* 鈥斺€?Hero 鈥斺€?*/.vip-hero {
position: relative;
overflow: hidden;
border-radius: 28px;
/* 搴曢儴鍘熸潵鐣欑粰銆屾爣绛炬爮銆嶇殑浣嶇疆宸茬粡鍘绘帀浜嗭紝杩欓噷琛ュ洖姝ｅ父鍐呰竟璺?*/ padding: 60px 48px 56px;
color: #fff;
background: radial-gradient(900px 360px at 82% -26%, rgba(45,212,191,.32), transparent 66%), linear-gradient(152deg, #073b35 0%, #0a5148 46%, #0e6f64 100%);
box-shadow: 0 26px 60px rgba(7,59,53,.30);
}
/* 涓や釜瑁呴グ鍦嗙幆 + 缁嗙綉鏍硷紝閬垮厤澶х墖娣辫壊鍙戠┖ */.vip-ring {
position: absolute;
border-radius: 50%;
border: 1.5px solid rgba(125,232,214,.18);
pointer-events: none;
}
.vip-ring-a {
width: 420px;
height: 420px;
right: -120px;
top: -170px;
}
.vip-ring-b {
width: 280px;
height: 280px;
right: 40px;
top: -80px;
border-color: rgba(125,232,214,.12);
}
.vip-hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(rgba(125,232,214,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(125,232,214,.07) 1px, transparent 1px);
background-size: 42px 42px;
-webkit-mask-image: radial-gradient(120% 140% at 50% 0%, #000 30%, transparent 78%);
mask-image: radial-gradient(120% 140% at 50% 0%, #000 30%, transparent 78%);
}
.vip-hero-main {
position: relative;
z-index: 1;
text-align: center;
}
/* VIP 瀛楁牱锛氶噾鑹叉笎鍙?+ 鏂滀綋琛嚎锛堢収鎼皬绋嬪簭鐨?.vip-word锛?*/.vip-word {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 900;
font-size: 96px;
letter-spacing: 8px;
line-height: 1;
background: linear-gradient(180deg, #fff9c4, #fde047 30%, #f59e0b 70%, #b45309);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #fbbf24;
filter: drop-shadow(0 6px 22px rgba(245,158,11,.40));
}
.vip-sub {
margin-top: 20px;
font-size: 18px;
color: rgba(255,255,255,.85);
letter-spacing: .5px;
}
.vip-tags {
display: flex;
gap: 14px;
justify-content: center;
margin-top: 26px;
flex-wrap: wrap;
}
.vip-tags span {
padding: 8px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
color: #7de8d6;
background: rgba(94,234,212,.12);
border: 1px solid rgba(94,234,212,.28);
}
/* 濂楅绫诲瀷鏍囩锛堜釜浜哄椁?/ 浼氬憳鐮佸厬鎹級鈥斺€? 鐙珛鍦?Hero 澶栭潰锛屼笉璐村湪娣辫壊鍗＄墖涓娿€傛祬鑹茶兌鍥婏紝閫変腑杞繁澧ㄧ豢銆?*/.vip-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 34px;
}
.vip-tab {
padding: 13px 42px;
border-radius: 999px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
color: var(--teal-d);
background: #fff;
border: 1.5px solid var(--line);
transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vip-tab:hover {
border-color: rgba(15,118,110,.42);
}
.vip-tab.on {
background: linear-gradient(135deg, #14B8A6, #0F766E);
border-color: transparent;
color: #fff;
box-shadow: 0 8px 22px rgba(20,184,166,.32);
}
/* 鈥斺€?娈佃惤鏍囬 鈥斺€?*/.vip-sec-title {
display: flex;
align-items: center;
justify-content: center;
margin: 56px 0 26px;
font-size: 30px;
font-weight: 900;
color: #0b3b35;
letter-spacing: 1px;
}
.vip-loading {
padding: 40px 0;
text-align: center;
color: var(--gray);
font-size: 15px;
}
/* 鈥斺€?濂楅瀵规瘮琛細鍏嶈垂鐗?+ 鍚勫椁愬苟鍒楋紝姣忓垪鑷甫鏉冪泭娓呭崟 鈥斺€? 4 鍒楀浐瀹氱瓑瀹斤紙鍏嶈垂鐗?+ 3 濂楅锛夛紝auto-fit 浼氭妸瀹冧滑鎸ゆ垚涓€琛岃秴绐勩€? 绐勫睆鍐嶉€愮骇闄嶅垪鏁般€?*/.vip-plans {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.vip-col {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 34px 28px 30px;
border-radius: 20px;
background: #fff;
border: 2px solid #e8f0ee;
cursor: pointer;
transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .2s ease, box-shadow .24s ease;
}
.vip-col:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(15,118,110,.14);
}
.vip-col.free {
cursor: default;
background: #fbfdfd;
}
.vip-col.free:hover {
transform: none;
box-shadow: none;
}
/* 閫変腑鐨勯偅涓€鍒楋細娣卞ⅷ缁垮簳 + 鐧藉瓧锛堣窡鎵撳瓧楦悓娆惧仛娉曪紝涓€鐪肩湅鍑洪€変腑锛?*/.vip-col.on {
background: linear-gradient(165deg, #0c443d 0%, #093832 100%);
border-color: #0c443d;
box-shadow: 0 24px 52px rgba(7,59,53,.30);
}
.vip-col-tag {
position: absolute;
right: -40px;
top: 20px;
padding: 6px 48px;
font-size: 13px;
font-weight: 800;
font-style: normal;
color: #4A2E00;
background: linear-gradient(135deg, #FFD75E, #F59E0B);
transform: rotate(38deg);
}
.vip-col-name {
font-size: 22px;
font-weight: 900;
color: #0b3b35;
}
.vip-col.on .vip-col-name {
color: #fff;
}
.vip-col-desc {
margin-top: 6px;
font-size: 13.5px;
color: var(--gray);
min-height: 20px;
}
.vip-col.on .vip-col-desc {
color: rgba(255,255,255,.72);
}
.vip-col-price {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: 20px;
color: #0b3b35;
}
.vip-col-price b {
font-size: 52px;
font-weight: 900;
line-height: 1;
letter-spacing: -2px;
}
.vip-col-price i {
font-size: 15px;
font-style: normal;
font-weight: 700;
}
.vip-col.on .vip-col-price {
color: #fff;
}
.vip-col-was {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
min-height: 24px;
font-size: 13px;
color: #a9bdb9;
}
.vip-col-was-empty {
visibility: hidden;
}
.vip-col-save {
padding: 2px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 800;
color: #D97706;
background: #FFF4E0;
}
.vip-col.on .vip-col-was {
color: rgba(255,255,255,.6);
}
.vip-col.on .vip-col-save {
color: #FFD75E;
background: rgba(255,215,94,.16);
}
.vip-col-btn {
margin-top: 18px;
padding: 14px 0;
border-radius: 999px;
text-align: center;
font-size: 16px;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #14B8A6, #0F766E);
box-shadow: 0 8px 20px rgba(20,184,166,.30);
}
.vip-col-btn-free {
color: #0b3b35;
background: #EDF5F3;
box-shadow: none;
}
.vip-col-list-title {
margin-top: 24px;
padding-top: 20px;
border-top: 1px dashed rgba(15,118,110,.18);
font-size: 15px;
font-weight: 800;
color: #0b3b35;
}
.vip-col.on .vip-col-list-title {
color: #fff;
border-top-color: rgba(255,255,255,.18);
}
.vip-col-list {
list-style: none;
margin: 14px 0 0;
padding: 0;
}
.vip-col-list li {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 7px 0;
font-size: 14px;
line-height: 1.5;
color: #3d5a55;
}
.vip-col-list li svg {
width: 17px;
height: 17px;
flex: none;
margin-top: 2px;
}
.vip-col-list li.has svg {
color: #14B8A6;
}
.vip-col-list li.no {
color: #b6c7c3;
}
.vip-col-list li.no svg {
color: #cfdeda;
}
.vip-col.on .vip-col-list li {
color: rgba(255,255,255,.86);
}
.vip-col.on .vip-col-list li.has svg {
color: #5EEAD4;
}
.vip-col.on .vip-col-list li.no {
color: rgba(255,255,255,.38);
}
.vip-col.on .vip-col-list li.no svg {
color: rgba(255,255,255,.30);
}
/* 鈥斺€?鏀粯寮圭獥锛氬乏閫夊椁?/ 鍙虫壂鐮?鈥斺€?*/.vip-pay-mask {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(12,42,38,.52);
backdrop-filter: blur(3px);
animation: cfIn .22s ease;
}
.vip-pay-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
width: 100%;
max-width: 880px;
max-height: calc(88 * var(--pg-vh, 1vh));
border-radius: 22px;
overflow: hidden;
background: #fff;
box-shadow: 0 40px 90px rgba(0,0,0,.34);
animation: cfCardIn .28s cubic-bezier(.2,.9,.25,1.05) both;
}
.vip-pay-close {
position: absolute;
right: 16px;
top: 14px;
z-index: 3;
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
font-style: normal;
font-size: 22px;
line-height: 1;
color: #8aa39e;
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
.vip-pay-close:hover {
background: #f0f6f5;
color: #0f3d36;
}
/* 宸︼細濂楅鍒楄〃 */.vip-pay-left {
padding: 26px 26px 22px;
overflow-y: auto;
}
.vip-pay-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 20px;
}
.vip-pay-logo {
font-size: 20px;
font-weight: 900;
color: var(--teal-d);
letter-spacing: .5px;
}
.vip-pay-head-sub {
font-size: 13px;
color: var(--gray);
}
.vip-pay-plans {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.vip-pay-plan {
padding: 18px 16px;
border-radius: 14px;
background: #fff;
border: 2px solid #e8f0ee;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vip-pay-plan:hover {
border-color: rgba(15,118,110,.42);
}
.vip-pay-plan.on {
border-color: var(--teal-d);
background: #f4faf9;
box-shadow: 0 10px 26px rgba(15,118,110,.14);
}
.vip-pay-plan-name {
font-size: 14px;
font-weight: 800;
color: #0f3d36;
}
.vip-pay-plan-price {
display: flex;
align-items: baseline;
gap: 2px;
margin-top: 8px;
color: #d93a30;
}
.vip-pay-plan-price i {
font-size: 14px;
font-style: normal;
font-weight: 800;
}
.vip-pay-plan-price b {
font-size: 32px;
font-weight: 900;
line-height: 1;
letter-spacing: -1px;
}
.vip-pay-plan-was {
margin-top: 8px;
font-size: 12px;
color: #a9bdb9;
}
.vip-pay-plan-was em {
font-style: normal;
margin-left: 4px;
padding: 2px 7px;
border-radius: 5px;
font-weight: 800;
color: #d93a30;
background: #FDECEA;
}
/* 鍙筹細鎵爜鏀粯 */.vip-pay-right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 30px 24px;
background: #fafdfc;
border-left: 1px solid #eaf3f1;
}
.vip-pay-price {
display: flex;
align-items: baseline;
gap: 3px;
color: #d93a30;
}
.vip-pay-price i {
font-size: 20px;
font-style: normal;
font-weight: 800;
}
.vip-pay-price b {
font-size: 44px;
font-weight: 900;
line-height: 1;
letter-spacing: -2px;
}
.vip-pay-save {
min-height: 20px;
font-size: 12.5px;
font-weight: 800;
color: #d93a30;
padding: 2px 10px;
border-radius: 6px;
background: #FDECEA;
}
.vip-pay-save:empty {
visibility: hidden;
}
.vip-pay-qr {
position: relative;
width: 180px;
height: 180px;
padding: 8px;
border-radius: 12px;
background: #fff;
border: 1px solid #e4eeeb;
box-shadow: 0 8px 22px rgba(15,118,110,.08);
}
.vip-pay-qr svg {
display: block;
}
/* 鍗犱綅閬僵锛氭槑纭憡璇夌敤鎴疯繕娌℃帴鏀粯锛屼笉鍐掑厖鐪熶簩缁寸爜 */.vip-pay-qr-mask {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(255,255,255,.86);
}
.vip-pay-qr-mask span {
padding: 6px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
color: #fff;
background: rgba(15,118,110,.86);
}
.vip-pay-scan-tip {
font-size: 13.5px;
color: #4a6560;
}
.vip-pay-scan-tip b {
color: #07C160;
}
.vip-pay-note {
font-size: 12px;
color: #a9bdb9;
}
@media (max-width: 820px) {
.vip-pay-card {
grid-template-columns: 1fr;
max-height: calc(92 * var(--pg-vh, 1vh));
}
.vip-pay-right {
border-left: 0;
border-top: 1px solid #eaf3f1;
}
.vip-pay-plans {
grid-template-columns: 1fr;
}
}
/* 鈥斺€?甯歌闂锛堟姌鍙狅級鈥斺€?*/.vip-faq {
display: flex;
flex-direction: column;
gap: 12px;
}
.vip-faq-item {
border-radius: 14px;
background: #fff;
border: 1px solid #e4eeeb;
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease;
}
.vip-faq-item:hover {
border-color: rgba(15,118,110,.32);
}
.vip-faq-item.open {
border-color: rgba(15,118,110,.40);
box-shadow: 0 10px 26px rgba(15,118,110,.10);
}
.vip-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 26px;
font-size: 16px;
font-weight: 700;
color: #0f3d36;
cursor: pointer;
user-select: none;
}
/* 鍙充晶绠ご锛氬睍寮€鏃惰浆 180掳 */.vip-faq-arrow {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--line);
position: relative;
transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.vip-faq-arrow::after {
content: '';
position: absolute;
left: 7px;
top: 7px;
width: 6px;
height: 6px;
border: solid var(--teal-d);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.vip-faq-item.open .vip-faq-arrow {
transform: rotate(180deg);
background: var(--teal-l);
border-color: var(--teal-d);
}
.vip-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}
.vip-faq-item.open .vip-faq-a {
max-height: 300px;
}
.vip-faq-a-in {
padding: 0 26px 22px;
font-size: 14px;
line-height: 1.9;
color: var(--gray);
border-top: 1px dashed rgba(15,118,110,.16);
padding-top: 18px;
margin: 0 26px 0;
padding-left: 0;
padding-right: 0;
}
/* 鈥斺€?搴曢儴鍥哄畾鎿嶄綔鏉?鈥斺€?*/.vip-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: flex;
align-items: center;
gap: 20px;
max-width: 1160px;
margin: 0 auto;
padding: 18px 32px;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 30px rgba(15,118,110,.10);
}
.vip-bar-info {
flex: 1;
min-width: 0;
}
.vip-bar-label {
font-size: 13px;
color: var(--gray);
}
.vip-bar-row {
display: flex;
align-items: baseline;
gap: 14px;
margin-top: 2px;
}
.vip-bar-row span {
font-size: 17px;
font-weight: 700;
color: #0f3d36;
}
.vip-bar-row b {
font-size: 30px;
font-weight: 900;
color: var(--teal-d);
letter-spacing: -1px;
}
.vip-bar-btn {
flex: 0 0 auto;
padding: 17px 62px;
border-radius: 999px;
font-size: 18px;
font-weight: 800;
color: #fff;
cursor: pointer;
background: linear-gradient(135deg, #14B8A6, #0F766E);
box-shadow: 0 10px 28px rgba(20,184,166,.38);
transition: transform .18s ease, box-shadow .2s ease;
}
.vip-bar-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(20,184,166,.50);
}
/* 鈥斺€?绐勫睆锛堢數鑴戠鏁撮〉鎸?1160 璁捐锛岃繖閲屽彧鍏滀綇骞虫澘/鎵嬫満锛夆€斺€?*/@media (max-width: 1240px) {
.vip-plans {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media (max-width: 1080px) {
.vip-col {
padding: 28px 22px 24px;
}
.vip-col-price b {
font-size: 42px;
}
.vip-word {
font-size: 72px;
}
.vip-hero {
padding: 44px 32px 0;
}
.vip-tabs {
margin: 0 -32px;
padding: 14px 32px 16px;
}
}
@media (max-width: 820px) {
.vip-plans {
grid-template-columns: 1fr;
gap: 14px;
}
.vip-col {
padding: 24px 20px 20px;
}
.vip-col-price b {
font-size: 40px;
}
.vip-word {
font-size: 52px;
letter-spacing: 4px;
}
.vip-sub {
font-size: 15px;
}
.vip-tab {
padding: 9px 22px;
font-size: 14px;
}
.vip-sec-title {
font-size: 21px;
margin: 38px 0 18px;
}
.vip-faq-q {
padding: 16px 18px;
font-size: 15px;
}
.vip-faq-a-in {
margin: 0 18px;
padding-top: 14px;
}
.vip-bar {
padding: 12px 18px;
gap: 12px;
}
.vip-bar-btn {
padding: 13px 30px;
font-size: 15px;
}
.vip-bar-row b {
font-size: 22px;
}
}
/* ===== 模式卡网格（.pym2-grid）=====
拼音/中文/总览/指法关卡共用。基础 3 列；窄屏降为 2 列 / 1 列。
注意：drill.css 里还有一条 .pym2-page .pym2-grid { margin-top }，
那条优先级更高（两个类），所以这里必须写成同等或更高的选择器，
否则 display:grid 会被它的「只设 margin」压掉（卡片就会塌成一列）。 */
.pym2-grid,
.pym2-page .pym2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: stretch;
}
@media (max-width: 1080px) {
.pym2-grid, .pym2-page .pym2-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
.pym2-grid, .pym2-page .pym2-grid { grid-template-columns: 1fr; }
}