:root { --ink: #0c2320; --jade: #17755a; --jade-deep: #0e4f3b; --mint: #35a67e; --gold: #c8a24b; --gold-soft: #e8d9ae; --paper: #e6efe9; --line: rgba(12, 35, 32, 0.1); --line-jade: rgba(23, 117, 90, 0.22); --card: rgba(255, 255, 255, 0.97); --font: "Figtree", "Noto Sans SC", system-ui, sans-serif; --display: "Syne", "Noto Serif SC", "Songti SC", serif; --serif: "Noto Serif SC", "Songti SC", serif; --tabbar-h: 64px; --radius: 18px; --radius-lg: 24px; --shadow: 0 14px 32px rgba(12, 35, 32, 0.08); --shadow-lg: 0 26px 52px rgba(12, 35, 32, 0.14); } * { box-sizing: border-box; } html, body { height: 100%; } /* —— 双语防闪烁（FOUC）—— 英文用户：模块脚本异步加载前，HTML 静态文案仍是中文。这里在 时先隐藏尚未应用 i18n 的静态文案，待 apply() 替换后（data-i18n-applied）再显示， 从而避免"先显示中文再变英文"的闪现。中文用户不受影响。 */ html[lang="en"] [data-i18n] { visibility: hidden; } html[lang="en"] [data-i18n][data-i18n-applied] { visibility: visible; } /* 禁止横向滚动：ambient 装饰等局部溢出不再引起整页左右晃动 */ html, body { overflow-x: hidden; overscroll-behavior-x: none; } body { margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink); background: radial-gradient(620px 300px at 4% -12%, rgba(53,166,126,.20), transparent 60%), radial-gradient(460px 240px at 98% -4%, rgba(200,162,75,.16), transparent 56%), radial-gradient(560px 300px at 88% 108%, rgba(14,79,59,.12), transparent 60%), radial-gradient(380px 200px at 6% 96%, rgba(200,162,75,.10), transparent 55%), linear-gradient(180deg, #cfe4da 0%, var(--paper) 36%, #f6f4ea 100%); -webkit-font-smoothing: antialiased; } /* 全局细腻质感：极淡噪点纹理 + 顶部翡翠柔光（不遮挡内容） */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 44% at 50% -8%, rgba(23,117,90,.10), transparent 70%); mix-blend-mode: multiply; } /* 底栏占位以 .shell-tabs 为准；body 仅保留安全区余量 */ body.has-tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); } /* 演示模式不再展示顶部「演示模式」标签（2026-08-17 应需求移除） */ .shell { max-width: 420px; margin: 0 auto; min-height: 100vh; padding: 1rem 1rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; } .shell-tabs { /* 固定底栏高度 + 呼吸间距，滚动到底不被遮挡 */ /* 兜底：不识别 env() 的浏览器用固定值，避免整条 calc 失效导致底栏盖住内容 */ padding-bottom: calc(var(--tabbar-h) + 1.75rem); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.75rem); } /* —— 统一底栏 —— */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; transform: none; width: min(420px, 100%); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: .35rem 0 env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(11, 31, 42, 0.08); z-index: 40; backdrop-filter: blur(10px); } .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; text-decoration: none; color: #80929c; font-size: 0.68rem; font-weight: 800; } .tab-ico { width: 22px; height: 22px; display: grid; place-items: center; } .tab-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } .tab.is-active { color: var(--jade-deep); } .tab.is-active .tab-ico { width: 34px; height: 28px; border-radius: 10px; background: rgba(27,122,90,.12); } .tab.is-active .tab-ico svg { stroke-width: 2.15; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2rem; } .page-head h1 { margin: 0; font-family: var(--display); font-size: 1.4rem; letter-spacing: -.02em; } .back, .link-quiet { color: var(--jade-deep); font-weight: 800; text-decoration: none; font-size: .84rem; } .shop-shell { position: relative; gap: .9rem; padding-top: .85rem; overflow: visible; } .shop-ambient { pointer-events: none; position: absolute; inset: -40px -30px auto; height: 280px; z-index: 0; } .sa-blob { position: absolute; border-radius: 50%; filter: blur(2px); animation: sa-float 8s ease-in-out infinite; will-change: transform; } /* 滚动时暂停装饰动画，规避 iOS 滚动重绘导致头部空白 */ .is-scrolling .sa-blob, .is-scrolling .sa-ring { animation-play-state: paused; } .sa-a { width: 160px; height: 160px; left: -36px; top: 10px; background: radial-gradient(circle, rgba(47,157,120,.35), transparent 70%); } .sa-b { width: 120px; height: 120px; right: -20px; top: 60px; background: radial-gradient(circle, rgba(15,90,66,.22), transparent 70%); animation-delay: -3s; } .sa-ring { position: absolute; width: 180px; height: 180px; right: 40px; top: -20px; border: 1px solid rgba(27,122,90,.12); border-radius: 50%; animation: sa-spin 18s linear infinite; } @keyframes sa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @keyframes sa-spin { to { transform: rotate(360deg); } } .shop-shell > *:not(.shop-ambient) { position: relative; z-index: 1; } .shop-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; animation: shop-rise .45s ease both; } .shop-brand { display: flex; align-items: center; gap: .65rem; } .shop-logo { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 14px; display: block; flex-shrink: 0; overflow: hidden; box-shadow: 0 10px 20px rgba(20, 60, 45, 0.28); } .shop-logo-img { width: 100%; height: 100%; display: block; object-fit: cover; } .shop-logo-mark { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: #fff; } .shop-logo-glow { position: absolute; inset: -40% auto auto -30%; width: 70%; height: 70%; background: rgba(255,255,255,.28); border-radius: 50%; filter: blur(2px); } .shop-brand strong { display: block; font-family: var(--display); font-size: 1.12rem; letter-spacing: -.02em; } .shop-brand em { display: block; margin-top: .12rem; font-style: normal; font-size: .68rem; font-weight: 700; color: #5f737c; } .shell-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; padding: .15rem 0 .1rem; animation: shop-rise .4s ease both; } .shell-brand img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 14px rgba(20, 60, 45, 0.2); } .shell-brand span { font-family: var(--display); font-weight: 800; font-size: .92rem; letter-spacing: .04em; color: var(--jade-deep); } .shop-bell { width: 2.5rem; height: 2.5rem; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.94); border: 1px solid var(--line); color: var(--jade-deep); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; } .shop-bell:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .shop-bell svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .shop-search { display: flex; align-items: center; gap: .55rem; padding: .74rem .9rem; border-radius: 16px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow); animation: shop-rise .5s ease both .04s; } .shop-search svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: #7a8c96; stroke-width: 1.8; } .shop-search input { border: none; outline: none; width: 100%; background: transparent; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); } .shop-search input::placeholder { color: #8a9aa3; font-weight: 600; } .shop-search-hint { flex: 0 0 auto; font-size: .65rem; font-weight: 800; letter-spacing: .04em; color: var(--jade-deep); background: rgba(27,122,90,.1); padding: .22rem .45rem; border-radius: 999px; } .shop-hero { position: relative; border-radius: 24px; overflow: hidden; min-height: 178px; color: #f4fbf8; background: radial-gradient(circle at 92% 12%, rgba(255,255,255,.32), transparent 26%), linear-gradient(128deg, #0c4a36 0%, #147255 38%, #2f9d78 100%); box-shadow: 0 22px 40px rgba(15, 90, 66, 0.3); animation: shop-rise .55s ease both .08s; } .shop-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%); background-size: 220% 100%; animation: shop-sheen 5.5s ease-in-out infinite; pointer-events: none; } @keyframes shop-sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } } .shop-hero-track { position: relative; min-height: 178px; } .shop-hero-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.35fr .9fr; gap: .4rem; padding: 1.15rem 1.15rem 1.7rem; opacity: 0; transform: translateX(12px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; } .shop-hero-slide.is-on { opacity: 1; transform: translateX(0); pointer-events: auto; position: relative; } .sh-copy { min-width: 0; z-index: 1; } .sb-kicker { margin: 0 0 .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .16em; opacity: .86; } .shop-hero h2 { margin: 0 0 .4rem; font-family: var(--display); font-size: 1.42rem; line-height: 1.15; letter-spacing: -.03em; } .shop-hero h2 span { color: rgba(255,255,255,.82); font-size: .92em; } .sh-lead { margin: 0; max-width: 15.5rem; font-size: .78rem; line-height: 1.45; opacity: .9; font-weight: 600; } .sb-cta { display: inline-flex; align-items: center; margin-top: .85rem; padding: .46rem .9rem; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff; font: inherit; font-size: .75rem; font-weight: 800; text-decoration: none; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s, transform .15s; } .sb-cta:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); } .sh-art { position: relative; min-height: 110px; } .sh-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.16); } .sh-o1 { width: 86px; height: 86px; right: 4px; top: 2px; } .sh-o2 { width: 46px; height: 46px; right: 58px; bottom: 18px; background: rgba(0,0,0,.1); } .sh-o3 { width: 22px; height: 22px; right: 18px; bottom: 42px; background: rgba(255,255,255,.35); animation: sa-float 3.2s ease-in-out infinite; } .sh-chip { position: absolute; right: 8px; bottom: 10px; z-index: 1; font-size: .66rem; font-weight: 800; padding: .28rem .55rem; border-radius: 999px; background: rgba(11,31,42,.28); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(4px); } .sh-tree { position: absolute; right: 10px; top: 18px; width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(90deg, transparent 48%, rgba(255,255,255,.35) 48% 52%, transparent 52%), linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 0 10px rgba(255,255,255,.05); } .sh-tree::before, .sh-tree::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.35); top: 18px; } .sh-tree::before { left: 10px; } .sh-tree::after { right: 10px; top: 36px; } .shop-banner-dots { position: absolute; left: .85rem; bottom: .55rem; display: flex; align-items: center; gap: .05rem; z-index: 2; } .shop-banner-dots i { position: relative; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; cursor: pointer; background: transparent; border: 0; } .shop-banner-dots i::after { content: ""; width: .35rem; height: .35rem; border-radius: 999px; background: rgba(255,255,255,.38); transition: width .2s, background .2s; } .shop-banner-dots i:active { transform: scale(.92); } .shop-banner-dots i.is-on::after { width: .9rem; background: #fff; } .shop-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; animation: shop-rise .55s ease both .12s; } .shop-cat { display: flex; flex-direction: column; align-items: center; gap: .38rem; padding: .78rem .35rem .7rem; border-radius: 18px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.85); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; transition: transform .15s, box-shadow .15s; } .shop-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .shop-cat i.sc-ico { width: 2.25rem; height: 2.25rem; border-radius: 13px; display: grid; place-items: center; background: rgba(27,122,90,.1); position: relative; } .shop-cat:nth-child(1) .sc-ico { background: rgba(47,157,120,.16); } .shop-cat:nth-child(2) .sc-ico { background: rgba(15,90,66,.12); } .shop-cat:nth-child(3) .sc-ico { background: rgba(196,140,56,.14); } .shop-cat:nth-child(4) .sc-ico { background: rgba(61,110,168,.12); } .sc-ico::before { content: ""; width: .95rem; height: .95rem; background: currentColor; color: var(--jade-deep); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .sc-pkg::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 8l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 8v8l9 4 9-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 8l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 8v8l9 4 9-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E"); } .sc-team::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 19c1.2-3 3.4-4.5 6-4.5S13.8 16 15 19'/%3E%3Cpath d='M14.5 14.5c1.8 0 4.5 1.2 4.5 4.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 19c1.2-3 3.4-4.5 6-4.5S13.8 16 15 19'/%3E%3Cpath d='M14.5 14.5c1.8 0 4.5 1.2 4.5 4.5'/%3E%3C/svg%3E"); } .sc-gift::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='10' rx='1'/%3E%3Cpath d='M4 13h16M12 10v10M12 10c0-2.5 2-4 3.5-4S19 8.5 19 10h-7zm0 0c0-2.5-2-4-3.5-4S5 8.5 5 10h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='10' rx='1'/%3E%3Cpath d='M4 13h16M12 10v10M12 10c0-2.5 2-4 3.5-4S19 8.5 19 10h-7zm0 0c0-2.5-2-4-3.5-4S5 8.5 5 10h7z'/%3E%3C/svg%3E"); } .sc-me::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 19.5c1.4-3.2 3.8-4.8 7-4.8s5.6 1.6 7 4.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5 19.5c1.4-3.2 3.8-4.8 7-4.8s5.6 1.6 7 4.8'/%3E%3C/svg%3E"); } .shop-notice { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; padding: .8rem .9rem; border-radius: 16px; background: linear-gradient(105deg, rgba(27,122,90,.12), rgba(255,255,255,.95) 42%); border: 1px solid rgba(27,122,90,.16); font-size: .78rem; animation: shop-rise .55s ease both .16s; } .shop-notice-ico { width: 1.85rem; height: 1.85rem; border-radius: 10px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 40%), linear-gradient(145deg, #2f9d78, #0f5a42); box-shadow: 0 8px 14px rgba(27,122,90,.2); position: relative; } .shop-notice-ico::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .85rem; } .shop-notice-body { min-width: 0; } .shop-notice strong { display: block; font-size: .72rem; color: var(--jade-deep); margin-bottom: .12rem; } .shop-notice span { color: #5a6d76; font-weight: 600; line-height: 1.35; } .shop-notice a { color: var(--jade-deep); font-weight: 800; text-decoration: none; white-space: nowrap; padding: .35rem .55rem; border-radius: 999px; background: rgba(27,122,90,.1); } .shop-section { display: grid; gap: .8rem; animation: shop-rise .55s ease both .2s; } .shop-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; } .shop-sec-eyebrow { margin: 0 0 .15rem !important; font-size: .62rem !important; letter-spacing: .14em; color: var(--jade) !important; font-weight: 800 !important; } .shop-sec-head h2 { margin: 0; font-family: var(--display); font-size: 1.18rem; letter-spacing: -.02em; } .shop-sec-head p { margin: .2rem 0 0; font-size: .72rem; color: #6a7d86; font-weight: 700; } .shop-sec-tag { font-size: .68rem; font-weight: 800; padding: .3rem .6rem; border-radius: 999px; background: rgba(11,31,42,.06); color: #334851; border: 1px solid rgba(11,31,42,.05); } .sku-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; } .sku-skel { display: grid; grid-template-columns: 108px 1fr; min-height: 138px; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.7); border: 1px solid var(--line); } .sku-skel i { display: block; background: linear-gradient(90deg, rgba(11,31,42,.04), rgba(11,31,42,.08), rgba(11,31,42,.04)); background-size: 200% 100%; animation: sku-shimmer 1.2s linear infinite; } .sku-skel i:first-child { background-color: rgba(27,122,90,.08); } @keyframes sku-shimmer { to { background-position: -200% 0; } } .sku-card { position: relative; display: grid; grid-template-columns: 112px 1fr; min-height: 146px; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 32px rgba(11, 31, 42, 0.09); transition: transform .18s ease, box-shadow .18s ease; animation: shop-rise .5s ease both; } .sku-card:nth-child(1) { animation-delay: .02s; } .sku-card:nth-child(2) { animation-delay: .08s; } .sku-card:nth-child(3) { animation-delay: .14s; } .sku-card:nth-child(4) { animation-delay: .2s; } .sku-card:hover, .sku-card:active { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .sku-card.is-hot { border-color: rgba(27,122,90,.28); box-shadow: 0 18px 36px rgba(27,122,90,.14); } .sku-card.has-ribbon::before { content: "HOT"; position: absolute; top: 10px; left: -18px; z-index: 2; transform: rotate(-38deg); font-size: .56rem; font-weight: 800; letter-spacing: .08em; padding: .18rem 1.4rem; color: #fff; background: linear-gradient(90deg, #c45c26, #d9823a); box-shadow: 0 4px 10px rgba(196,92,38,.28); } .sku-art { position: relative; overflow: hidden; display: grid; place-items: center; } .sku-art::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(0,0,0,.12)); } .sku-art em { position: relative; z-index: 1; font-style: normal; font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: rgba(255,255,255,.96); letter-spacing: -.03em; text-shadow: 0 8px 18px rgba(0,0,0,.2); } .sku-art-code { position: absolute; left: .55rem; bottom: .5rem; z-index: 1; font-size: .58rem; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.8); } .sku-orb { position: absolute; width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.18); top: -20px; right: -24px; } .sku-orb-2 { width: 58px; height: 58px; top: auto; bottom: -14px; left: -12px; right: auto; background: rgba(0,0,0,.08); } .tone-mint .sku-art { background: linear-gradient(160deg, #8ad4b6, #2f9d78 55%, #1b7a5a); } .tone-jade .sku-art { background: linear-gradient(160deg, #4db892, #147255 50%, #0f5a42); } .tone-teal .sku-art { background: linear-gradient(160deg, #5fc4b8, #1f7a78 55%, #164f52); } .tone-ink .sku-art { background: linear-gradient(160deg, #4a6672, #1a3340 50%, #0b1f2a); } .sku-body { padding: .9rem .95rem .9rem .85rem; display: flex; flex-direction: column; gap: .16rem; min-width: 0; } .sku-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .08rem; } .sku-tag { font-size: .65rem; font-weight: 800; padding: .16rem .48rem; border-radius: 999px; background: rgba(27,122,90,.12); color: var(--jade-deep); } .sku-card.is-hot .sku-tag { background: rgba(196,92,38,.14); color: #8a3d14; } .sku-pv { font-size: .7rem; font-weight: 800; color: #7a8c96; } .sku-card strong { font-size: 1.05rem; font-family: var(--display); letter-spacing: -.02em; } .sku-name { font-size: .8rem; color: #334851; font-weight: 700; } .sku-blurb { font-size: .72rem; color: #7a8c96; font-weight: 600; line-height: 1.35; margin-top: .08rem; } .sku-chips { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .28rem; } .sku-chips span { font-size: .6rem; font-weight: 800; padding: .12rem .38rem; border-radius: 999px; background: rgba(11,31,42,.05); color: #4d616a; } .sku-foot { margin-top: auto; padding-top: .5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .price { color: var(--jade-deep); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .price small { margin-left: .2rem; font-size: .68rem; font-weight: 800; opacity: .75; } .sku-cta { display: inline-flex; align-items: center; justify-content: center; gap: .2rem; min-width: 3.4rem; padding: .42rem .72rem; border-radius: 999px; background: linear-gradient(135deg, #24956d, #0f5a42); color: #fff; font-size: .72rem; font-weight: 800; box-shadow: 0 8px 14px rgba(27,122,90,.24); } .sku-cta::after { content: "→"; font-size: .78rem; opacity: .9; } .shop-benefits { display: grid; grid-template-columns: 1fr; gap: .55rem; margin-bottom: .15rem; padding-bottom: .25rem; animation: shop-rise .55s ease both .24s; } .shop-benefits article { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; row-gap: .1rem; align-items: center; padding: .85rem .95rem; border-radius: 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 8px 20px rgba(11,31,42,.05); } .shop-benefits .sb-ico { grid-row: 1 / span 2; width: 2.15rem; height: 2.15rem; border-radius: 12px; background: rgba(27,122,90,.1); position: relative; } .shop-benefits .sb-ico::before { content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; background: var(--jade-deep); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .sb-pay::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); } .sb-bin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 4v16M6 8l6-4 6 4M6 16l6 4 6-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 4v16M6 8l6-4 6 4M6 16l6 4 6-4'/%3E%3C/svg%3E"); } .sb-ship::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 7h11v10H3zM14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.5'/%3E%3Ccircle cx='17' cy='18' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 7h11v10H3zM14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.5'/%3E%3Ccircle cx='17' cy='18' r='1.5'/%3E%3C/svg%3E"); } .shop-benefits b { font-size: .84rem; color: var(--ink); } .shop-benefits span { font-size: .72rem; color: #6a7d86; font-weight: 600; } @keyframes shop-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .banner, .card, .card.soft, .wallet-box, .ship-box, .complete-card, .side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .lead-inline, .hint, .meta { color: #5a6d76; font-size: .82rem; line-height: 1.45; } .lead-inline { margin: 0; } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 14px; padding: .28rem; } .seg-btn { border: none; background: transparent; border-radius: 11px; padding: .62rem; font: inherit; font-weight: 800; color: #5a6d76; cursor: pointer; } .seg-btn.is-on { background: var(--jade); color: #fff; box-shadow: 0 8px 16px rgba(27,122,90,.22); } .dual-pane { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .side-card { padding: .95rem; } .side-card header { font-weight: 800; margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem; } .side-card header::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--jade); } .kv { display: flex; justify-content: space-between; font-size: .86rem; margin: .28rem 0; font-weight: 700; } .kv span { color: #5a6d76; font-weight: 600; } .card.soft, .wallet-box, .ship-box { padding: 1rem; } .card.soft strong, .wallet-box strong, .ship-box strong { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; font-size: .95rem; } .complete-card { display: flex; justify-content: space-between; align-items: center; gap: .75rem; text-decoration: none; color: inherit; padding: 1rem; border-color: rgba(27,122,90,.28); background: linear-gradient(135deg, rgba(27,122,90,.1), #fff 60%); } .complete-card strong { display: block; margin-bottom: .15rem; } .complete-card .meta { margin: 0; } .chip-row { display: flex; flex-wrap: wrap; gap: .4rem; } .chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem; font-size: .74rem; font-weight: 800; color: #334851; box-shadow: 0 4px 12px rgba(11,31,42,.04); } .chip.is-accent { background: rgba(27,122,90,.12); border-color: rgba(27,122,90,.2); color: var(--jade-deep); } .simple-list, .order-list, .menu { list-style: none; margin: .45rem 0 0; padding: 0; } .simple-list li, .order-list li { padding: .7rem 0; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 700; } .simple-list li:first-child, .order-list li:first-child { border-top: none; } .simple-list li { display: flex; justify-content: space-between; gap: .5rem; } .simple-list em { font-style: normal; color: #7a8c96; font-weight: 600; font-size: .78rem; } .rw-main, .ord-main { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .rw-main strong { color: var(--jade-deep); } .muted-amt { color: #8a9aa3 !important; font-weight: 700 !important; font-size: .82rem !important; } .ord-st { font-size: .68rem; font-weight: 800; padding: .15rem .45rem; border-radius: 999px; background: rgba(27,122,90,.12); color: var(--jade-deep); } .ord-st.is-wait { background: rgba(196,92,38,.12); color: #8a3d14; } .banner { padding: .8rem .95rem; font-size: .84rem; font-weight: 700; color: var(--jade-deep); background: rgba(27,122,90,.08); box-shadow: none; } .banner.is-warn { background: rgba(196,92,38,.1); color: #8a3d14; border-color: rgba(196,92,38,.18); } .banner.is-ok { background: rgba(27,122,90,.12); } .profile { display: flex; gap: .85rem; align-items: center; padding: .2rem 0; } .avatar { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--jade), #3aa882); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; box-shadow: 0 10px 20px rgba(27,122,90,.25); } .profile strong { font-size: 1.05rem; } .menu { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .95rem; box-shadow: var(--shadow); } .menu li { border-top: 1px solid var(--line); padding: .9rem 0; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 700; } .menu li:first-child { border-top: none; } .menu a { display: flex; justify-content: space-between; align-items: center; width: 100%; text-decoration: none; color: inherit; font-weight: 700; } .btn { border: none; border-radius: 12px; padding: .78rem 1rem; font: inherit; font-weight: 800; cursor: pointer; } .btn-primary { background: var(--jade); color: #fff; width: 100%; box-shadow: 0 10px 18px rgba(27,122,90,.22); } .btn-secondary { background: #e7f3ed; color: var(--jade-deep); width: 100%; } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); width: 100%; } .btn-mini { width: auto !important; padding: .4rem .75rem !important; font-size: .78rem !important; } .btn-row { display: grid; gap: .55rem; margin-top: .75rem; } .btn-row.two { grid-template-columns: 1fr 1fr; } .ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .65rem; margin: .75rem 0 .5rem; } .ship-grid .field, .field { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 800; color: #5a6d76; } .ship-grid .field.full { grid-column: 1 / -1; } .ship-grid input, .ship-grid select, .field select, .field input { border: 1px solid var(--line); border-radius: 11px; padding: .6rem .7rem; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink); background: #fbfefd; } .check { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: #5a6d76; margin: .35rem 0 .65rem; } .badge { font-size: .68rem; background: rgba(27,122,90,.12); color: var(--jade-deep); padding: .18rem .5rem; border-radius: 999px; font-weight: 800; } .badge.is-ok { background: rgba(27,122,90,.16); } .badge.is-warn { background: rgba(196,92,38,.14); color: #8a3d14; } .top { display: flex; justify-content: space-between; align-items: center; } .brand { font-family: var(--display); font-weight: 800; font-size: 1.15rem; } .brand-with-logo { display: flex; align-items: center; gap: .65rem; } .brand-logo { width: 2.5rem; height: 2.5rem; border-radius: 12px; object-fit: cover; flex-shrink: 0; box-shadow: 0 8px 18px rgba(20, 60, 45, 0.22); } .brand-name { display: block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; } .brand em { display: block; font-style: normal; font-size: .72rem; color: #5a6d76; font-weight: 700; margin-top: .15rem; } .nav a { color: var(--jade-deep); font-weight: 800; text-decoration: none; font-size: .84rem; margin-left: .65rem; } .card { padding: 1.15rem 1.2rem; } .card h1 { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.35rem; } .card p.lead { margin: 0 0 1rem; color: #5a6d76; font-size: .9rem; line-height: 1.5; } .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: .5rem 0 1rem; } #qrCanvas { width: 220px; height: 220px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); } .status { font-weight: 800; font-size: .95rem; } .status.ok { color: var(--jade-deep); } .status.wait { color: #8a5a12; } .status.err { color: #8b2e12; } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .steps li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .45rem; font-size: .84rem; color: #334851; font-weight: 600; } .steps b { display: inline-flex; width: 1.35rem; height: 1.35rem; border-radius: 999px; align-items: center; justify-content: center; background: var(--jade); color: #fff; font-size: .7rem; } .foot { text-align: center; font-size: .75rem; color: #7a8c96; margin-top: auto; } .foot a { color: var(--jade-deep); font-weight: 700; } .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #eaf6f1; padding: .65rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; z-index: 50; box-shadow: 0 12px 28px rgba(0,0,0,.2); } body:not(.has-tabbar) .toast { bottom: 1.25rem; } @media (max-width: 520px) { .ship-grid { grid-template-columns: 1fr; } } /* —— Mobile QA polish v37 —— */ @media (max-width: 430px) { .shell { padding: 0.85rem 0.85rem 1.25rem; } /* 窄屏下重申底部留白：防止上面 .shell 的 padding 覆盖 .shell-tabs 的 padding-bottom，导致固定底栏盖住页面底部内容 */ .shell-tabs { padding-bottom: calc(var(--tabbar-h) + 1.75rem); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.75rem); } .tabbar a { min-height: 48px; font-size: 0.68rem; gap: 0.15rem; } .sku-card, .card { border-radius: 14px; } .page-head h1 { font-size: 1.35rem; } .chip-row { gap: 0.35rem; } .chip { font-size: 0.72rem; padding: 0.28rem 0.55rem; } .btn, .sb-cta { min-height: 44px; touch-action: manipulation; } .shop-hero-slide h2 { font-size: 1.45rem; line-height: 1.2; } .order-list li { padding: 0.75rem 0.15rem; } } @supports (padding: max(0px)) { .tabbar { padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px)); } } /* —— Auth 统一登录中心 v47 —— */ .auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; background: rgba(27,122,90,.07); border: 1px solid rgba(27,122,90,.14); border-radius: 14px; padding: .3rem; margin: .2rem 0 1rem; } .auth-tab { border: 0; background: transparent; color: #48606a; font: inherit; font-weight: 800; font-size: .84rem; padding: .55rem .4rem; border-radius: 10px; cursor: pointer; transition: all .18s ease; touch-action: manipulation; } .auth-tab.is-on { background: #fff; color: var(--jade-deep); box-shadow: 0 4px 10px rgba(14,122,88,.14); } .auth-pane[hidden] { display: none; } .auth-form { display: grid; gap: .8rem; } .field { display: grid; gap: .35rem; } .field > span { font-size: .78rem; font-weight: 800; color: #3a4d55; letter-spacing: .02em; } .field input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfd; padding: .72rem .85rem; font: inherit; font-size: .95rem; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(27,122,90,.14); background: #fff; } .field input::placeholder { color: #9db0b8; } .code-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; } /* 钱包登录：绑定邮箱 / 合并账号折叠区 */ .wallet-bind { margin-top: 14px; border-top: 1px dashed var(--line, rgba(128, 128, 128, .35)); padding-top: 12px; } .wallet-bind summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-dim, #888); list-style: none; user-select: none; } .wallet-bind summary::-webkit-details-marker { display: none; } .wallet-bind summary::before { content: '▸ '; } .wallet-bind[open] summary::before { content: '▾ '; } .wallet-bind .bind-tip { font-size: .82rem; color: var(--text-dim, #888); margin: 8px 0 12px; line-height: 1.55; } .wallet-bind .field { margin-bottom: .55rem; } .btn-code { width: auto !important; white-space: nowrap; min-height: 44px; } .btn-code[disabled] { opacity: .62; cursor: not-allowed; border-color: var(--line); color: #7a8c96; background: #f2f6f6; } .btn-block { width: 100% !important; } .btn-danger { background: #fff0ec; color: #b3361c; border: 1px solid rgba(179,54,28,.28); width: 100%; } .btn-danger:active { background: #ffe3dc; } .auth-link { display: block; text-align: center; font-size: .8rem; font-weight: 700; color: var(--jade-deep); text-decoration: none; padding: .3rem; } .auth-dev { margin-top: .9rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(138,90,18,.08); border: 1px dashed rgba(138,90,18,.35); color: #7a5210; font-size: .74rem; text-align: center; word-break: break-all; } /* 确认弹窗 sheet（退出登录等） */ .sheet-mask { position: fixed; inset: 0; z-index: 80; background: rgba(7,18,24,.55); display: flex; align-items: flex-end; justify-content: center; animation: sheetFade .18s ease; } .sheet-mask[hidden] { display: none; } .sheet-card { width: 100%; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 22px 22px 0 0; padding: 1.2rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .55rem; box-shadow: 0 -10px 34px rgba(0,0,0,.18); animation: sheetUp .22s cubic-bezier(.2,.9,.3,1); } .sheet-card strong { font-family: var(--display); font-size: 1.05rem; } .sheet-card .meta { margin: 0; line-height: 1.55; } @keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 480px) { .sheet-card { border-radius: 22px; margin-bottom: 2rem; } } /* —— 推荐码反馈弹窗（注册页） —— */ .invite-fb-mask { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(46, 125, 90, .18), transparent 55%), rgba(6, 16, 22, .62); backdrop-filter: blur(6px); animation: sheetFade .2s ease; } .invite-fb-mask[hidden] { display: none; } .invite-fb-card { position: relative; width: min(100%, 380px); padding: 1.45rem 1.25rem 1.2rem; border-radius: 22px; background: linear-gradient(165deg, #fff 0%, #f4faf7 48%, #eef6f1 100%); border: 1px solid rgba(46, 125, 90, .16); box-shadow: 0 24px 48px rgba(8, 28, 22, .22), 0 0 0 1px rgba(255, 255, 255, .6) inset; display: grid; gap: .65rem; text-align: center; overflow: hidden; animation: inviteFbIn .28s cubic-bezier(.2, .9, .3, 1); } .invite-fb-glow { position: absolute; inset: -40% -20% auto; height: 140px; background: radial-gradient(circle, rgba(62, 160, 110, .22), transparent 70%); pointer-events: none; } .invite-fb-icon { position: relative; width: 56px; height: 56px; margin: .1rem auto .15rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; font-weight: 800; color: #fff; background: linear-gradient(145deg, #e8a23a, #c97820); box-shadow: 0 10px 22px rgba(201, 120, 32, .35); } .invite-fb-icon[data-kind="pending"] { background: linear-gradient(145deg, #3d9a6e, #2a6f4f); box-shadow: 0 10px 22px rgba(45, 120, 80, .35); font-size: 1.2rem; } .invite-fb-card strong { position: relative; font-family: var(--display, "Source Han Serif SC", "Noto Serif SC", Georgia, serif); font-size: 1.18rem; letter-spacing: .02em; color: #143028; } .invite-fb-code { position: relative; margin: 0 auto; padding: .35rem .85rem; width: fit-content; max-width: 100%; border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; font-weight: 700; letter-spacing: .06em; color: #1f5c45; background: rgba(46, 125, 90, .1); border: 1px dashed rgba(46, 125, 90, .35); word-break: break-all; } .invite-fb-body { position: relative; margin: 0; line-height: 1.55; color: #3d5550; font-size: .9rem; } .invite-fb-tips { position: relative; margin: .15rem 0 .35rem; padding: .75rem .9rem .75rem 1.35rem; text-align: left; border-radius: 14px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(20, 60, 48, .08); color: #2f4a42; font-size: .82rem; line-height: 1.55; display: grid; gap: .35rem; } .invite-fb-tips li::marker { color: #3d9a6e; } @keyframes inviteFbIn { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .sponsor-rule-hint { margin: -.15rem 0 .15rem; font-size: .78rem; line-height: 1.5; color: #6a7d86; } .sponsor-live { margin: -.25rem 0 .2rem; font-size: .8rem; font-weight: 700; line-height: 1.45; } .sponsor-live.is-checking { color: #6a7d86; } .sponsor-live.is-ok { color: #1f7a4d; } .sponsor-live.is-bad { color: #b42318; } @media (max-width: 430px) { .invite-fb-mask { align-items: flex-end; padding: 0; } .invite-fb-card { width: 100%; max-width: none; border-radius: 22px 22px 0 0; padding: 1.25rem 1.1rem calc(1.15rem + env(safe-area-inset-bottom, 0px)); } .invite-fb-body, .invite-fb-tips { font-size: .8rem; } .sponsor-rule-hint { font-size: .74rem; } } @media (max-width: 360px) { .invite-fb-card strong { font-size: 1.05rem; } .invite-fb-icon { width: 48px; height: 48px; font-size: 1.2rem; } } /* —— DApp 手机端体验优化 v38 —— */ .search-empty { grid-column: 1 / -1; padding: 1.5rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .85); border: 1px dashed var(--line); color: #6a7d86; font-size: .84rem; font-weight: 700; line-height: 1.6; text-align: center; } .btn-row.order-actions { margin: .55rem 0 .2rem; } .field.ck-pay { margin-top: .85rem; } /* 软键盘避让：键盘弹出时按钮条贴上键盘上沿 */ .kb-open .ship-box .btn-row { position: sticky; bottom: .4rem; z-index: 5; margin-bottom: 0; padding: .6rem 0 .3rem; background: linear-gradient(transparent, var(--card) 30%); } .kb-open .ship-box .btn-row .btn { min-height: 44px; } /* 超窄屏（≤360px）hero 单列，隐藏装饰图，避免两列挤压 */ @media (max-width: 360px) { .shop-hero-slide { grid-template-columns: 1fr; padding: 1.05rem 1rem 1.6rem; } .sh-art { display: none; } .shop-banner-dots { left: .85rem; bottom: .5rem; } } /* 团队页视图联动：安置树 / 推荐树高亮对应区块 */ body.view-sponsor .dual-pane { opacity: .55; filter: saturate(.7); } body:not(.view-sponsor) .card.soft { opacity: .55; filter: saturate(.7); } body.view-sponsor .dual-pane, body:not(.view-sponsor) .card.soft { transition: opacity .25s ease, filter .25s ease; } /* ===== 账户明细 · 资产总览卡 ===== */ .asset-hero { position: relative; overflow: hidden; margin: .4rem 0 .9rem; padding: 1.1rem 1.15rem 1.05rem; border-radius: 20px; color: #f2fbf7; background: radial-gradient(240px 140px at 92% -20%, rgba(120,255,205,.32), transparent 62%), radial-gradient(200px 120px at -8% 110%, rgba(255,255,255,.14), transparent 55%), linear-gradient(135deg, #0f5a42 0%, #1b7a5a 58%, #2f9d78 100%); box-shadow: var(--shadow-lg); } .asset-hero::after { content: ""; position: absolute; right: -34px; top: -34px; width: 128px; height: 128px; border-radius: 50%; border: 22px solid rgba(255,255,255,.08); } .asset-hero-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; } .asset-label { font-size: .82rem; font-weight: 600; opacity: .88; letter-spacing: .04em; } .asset-cur { font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding: .22rem .6rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); } .asset-amount { font-family: var(--display); font-size: 2rem; font-weight: 800; line-height: 1.1; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0,0,0,.16); } .asset-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .85rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.18); } .asset-metrics div { display: flex; flex-direction: column; gap: .15rem; } .asset-metrics em { font-style: normal; font-weight: 800; font-size: .98rem; } .asset-metrics span { font-size: .7rem; opacity: .75; } /* 科目分类卡 */ .sec-title { margin: .2rem 0 .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .05em; opacity: .75; } /* —— 提现页 —— */ .asset-sub { margin-top: .35rem; font-size: .78rem; opacity: .78; word-break: break-all; } .amt-row { display: flex; gap: .5rem; align-items: center; } .amt-row input { flex: 1; min-width: 0; } .amt-row .btn-mini { flex-shrink: 0; } .fee-preview { display: grid; gap: .35rem; padding: .7rem .8rem; margin: .55rem 0 .25rem; background: rgba(90,109,118,.06); border-radius: var(--radius); } .fee-preview > div { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; } .fee-preview b { color: inherit; } .fee-preview b.is-net { color: var(--jade-deep); font-size: 1rem; } .wd-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .18rem .5rem; border-radius: 99px; background: rgba(90,109,118,.12); color: #5a6d76; } .wd-status.is-ok { background: rgba(27,122,90,.16); color: #0c5c43; } .wd-status.is-bad { background: rgba(214,69,65,.14); color: #b0322e; } .order-list code.tx { font-size: .68rem; opacity: .7; } .subj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; } .subj-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .7rem .7rem .62rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 6px 16px rgba(11,31,42,.05); text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .subj-card:active { transform: scale(.97); } .subj-card.is-active { border-color: var(--mint); box-shadow: 0 8px 20px rgba(47,157,120,.24); } .subj-ic { font-size: 1.1rem; line-height: 1; } .subj-card b { font-size: .8rem; font-weight: 700; color: var(--ink); } .subj-card em { font-style: normal; font-weight: 800; font-size: .86rem; color: var(--jade); letter-spacing: .01em; } .subj-card em.is-neg { color: #d64541; } .subj-card small { font-size: .64rem; opacity: .6; color: var(--ink); } /* 流水列表强化 */ .order-list .rw-main b { display: flex; align-items: center; gap: .45rem; } .rw-ic { font-size: .95rem; line-height: 1; } .order-list strong.is-neg { color: #d64541; } @media (max-width: 380px) { .subj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asset-amount { font-size: 1.7rem; } } /* ===== 团队双轨 · 总览卡与树节点 ===== */ .team-hero { position: relative; overflow: hidden; margin: .4rem 0 .9rem; padding: 1.05rem 1.1rem 1rem; border-radius: 20px; color: #f2fbf7; background: radial-gradient(240px 130px at 94% -16%, rgba(120,255,205,.3), transparent 62%), radial-gradient(190px 110px at -6% 108%, rgba(255,255,255,.13), transparent 55%), linear-gradient(135deg, #123f6e 0%, #1b5a8a 55%, #2f7f9d 100%); box-shadow: var(--shadow-lg); } .team-hero::after { content: ""; position: absolute; right: -32px; top: -32px; width: 120px; height: 120px; border-radius: 50%; border: 20px solid rgba(255,255,255,.07); } .team-hero-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; } .star-chip { font-family: var(--display); font-size: .95rem; font-weight: 800; letter-spacing: .04em; padding: .26rem .7rem; border-radius: 999px; background: linear-gradient(120deg, #f5b301, #f97316); color: #4a2a00; box-shadow: 0 4px 14px rgba(249,115,22,.35); } .leg-stats { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: .5rem; text-align: center; } .leg { display: flex; flex-direction: column; gap: .14rem; padding: .55rem .3rem; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); } .leg em { font-style: normal; font-weight: 800; font-size: 1.05rem; } .leg span { font-size: .66rem; opacity: .78; } .leg-weak { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); box-shadow: 0 4px 12px rgba(255,255,255,.08); } .star-progress { margin-top: .8rem; padding-top: .72rem; border-top: 1px solid rgba(255,255,255,.16); } .sp-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; font-weight: 700; margin-bottom: .45rem; } .sp-head b { font-family: var(--display); color: #ffd166; } .sp-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; } .sp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #f97316); transition: width .5s ease; } .team-hero .meta { margin-top: .4rem; font-size: .68rem; opacity: .8; } /* 树节点 */ .t-node-wrap { display: flex; justify-content: center; margin: .6rem 0 .75rem; } .t-node { display: flex; flex-direction: column; align-items: center; gap: .18rem; width: 92px; padding: .7rem .4rem .55rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(11,31,42,.06); } .t-node.is-live { border-color: var(--mint); } .t-node.is-idle { border-color: #c9cfd4; opacity: .82; } .t-node.is-empty { border-style: dashed; } .t-av { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: 1.05rem; background: linear-gradient(135deg, #0f5a42, #34d399); color: #fff; box-shadow: 0 4px 10px rgba(47,157,120,.3); } .t-node.is-idle .t-av { background: linear-gradient(135deg, #7b8794, #aab4bd); box-shadow: none; } .t-node.is-empty .t-av { background: #eef2f1; color: #9aa7a3; box-shadow: none; } .t-node b { font-size: .74rem; font-weight: 800; color: var(--ink); } .t-node em { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--jade); } .t-node.is-idle em { color: #7b8794; } .t-node small { font-size: .6rem; opacity: .6; color: var(--ink); } /* 直推列表强化 */ .simple-list li span { font-weight: 700; } .simple-list li em { font-style: normal; font-size: .7rem; color: var(--jade); } @media (max-width: 380px) { .team-hero { padding: .9rem .85rem .9rem; } .leg em { font-size: .92rem; } } /* ===== 我的 · 个人中心总览卡 ===== */ .me-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 1.1rem 1rem .95rem; color: #f6fbfa; background: radial-gradient(320px 180px at 92% -20%, rgba(52,211,153,.45), transparent 60%), linear-gradient(135deg, #243049 0%, #1b3a44 55%, #0f5a42 100%); box-shadow: 0 16px 32px rgba(15,90,66,.22); } .me-hero::after { content: ""; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); pointer-events: none; } .me-hero-top { position: relative; display: flex; align-items: center; gap: .8rem; } .me-hero-top .avatar { width: 52px; height: 52px; background: linear-gradient(135deg, #f5b301, #f97316); box-shadow: 0 8px 18px rgba(249,115,22,.32); } .me-id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; } .me-id .me-name { font-size: 1.08rem; letter-spacing: .04em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me-id .me-name.is-clickable { cursor: pointer; } .me-id .me-name.is-clickable:hover { opacity: .9; } .me-id .me-name.is-clickable::after { content: ' \270E'; margin-left: .25rem; font-size: .72em; opacity: .55; } /* 昵称下方副行：邀请码 + 复制 + 掩码邮箱（紧凑一行，不再独占整行） */ .me-id-sub { display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; } .me-id .me-code { font-size: .76rem; font-weight: 700; letter-spacing: .05em; opacity: .88; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .me-id .me-email { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 500; opacity: .72; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .copy-chip { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #eafff6; border-radius: 50%; cursor: pointer; transition: background .2s ease, transform .1s ease; } .copy-chip svg { width: .9rem; height: .9rem; display: block; } .copy-chip:active { transform: scale(.96); } .copy-chip:hover { background: rgba(255,255,255,.2); } .me-metrics { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.14); } .me-metrics div { display: flex; flex-direction: column; gap: .16rem; } .me-metrics em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: #ffe08a; } .me-metrics span { font-size: .64rem; opacity: .75; letter-spacing: .04em; } .me-hero .meta { position: relative; margin-top: .7rem; color: rgba(246,251,250,.78); } /* ===== 我的 · 6 宫格快捷入口 ===== */ .quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; } .quick-cell { appearance: none; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: .85rem .5rem .7rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; cursor: pointer; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .2s ease; } .quick-cell:active { transform: scale(.97); } .quick-ic { font-size: 1.45rem; line-height: 1; filter: drop-shadow(0 3px 5px rgba(11,31,42,.14)); } .quick-cell b { font-size: .82rem; font-weight: 800; } .quick-cell em { font-style: normal; font-size: .62rem; color: var(--jade-deep); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .quick-cell em.qc-copy { display: inline-flex; align-items: center; gap: .18rem; } .quick-cell em.qc-copy svg { width: .78rem; height: .78rem; flex: none; } /* ===== 商城 · 资产胶囊 ===== */ .asset-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .asset-pill { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,255,250,.72)); border-radius: 16px; padding: .62rem .7rem; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .12s ease; } .asset-pill:active { transform: scale(.97); } .ap-ico { font-size: 1.25rem; line-height: 1; } .ap-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; } .ap-body em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: .98rem; color: var(--jade-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-body em.star { color: #d97706; } .ap-body small { font-size: .6rem; opacity: .7; letter-spacing: .02em; } /* ===== 结算 · 下单计奖引导 ===== */ .ck-guide { display: flex; align-items: center; gap: .6rem; border: 1px dashed rgba(217,119,6,.45); background: rgba(255,244,220,.55); border-radius: 14px; padding: .62rem .75rem; } .ck-guide-ico { font-size: 1.15rem; line-height: 1; } .ck-guide-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .ck-guide-body b { font-size: .8rem; color: #92400e; } .ck-guide-body small { font-size: .64rem; color: #a16207; } .ck-guide-link { font-size: .7rem; font-weight: 800; color: #b45309; text-decoration: none; white-space: nowrap; } /* ===== 结算 · 下单成功卡 ===== */ .ck-success { margin-top: .9rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; border-radius: 18px; padding: 1.1rem .9rem 1.05rem; color: #f0fdf4; background: radial-gradient(200px 120px at 88% -20%, rgba(52,211,153,.5), transparent 60%), linear-gradient(140deg, #14532d, #0f5a42 70%); box-shadow: 0 14px 30px rgba(20,83,45,.25); } .ck-success i { font-style: normal; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; color: #14532d; background: linear-gradient(135deg, #a7f3d0, #34d399); box-shadow: 0 8px 18px rgba(52,211,153,.4); } .ck-success strong { font-size: 1.05rem; } .ck-success span { font-size: .7rem; opacity: .82; } .ck-success .btn-row { margin-top: .7rem; width: 100%; } .ck-success a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ===== 结算 · 支付方式多档差异化 ===== */ .pay-block { margin-top: .85rem; } .pay-block-title { display: block; font-size: .72rem; font-weight: 800; color: #5a6d76; margin-bottom: .45rem; } .pay-tiers { display: flex; flex-direction: column; gap: .5rem; } .pay-card { position: relative; display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 14px; padding: .66rem .75rem; background: #fff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .1s ease; } .pay-card:active { transform: scale(.99); } .pay-card.is-checked { border-color: var(--jade); background: rgba(27,122,90,.06); box-shadow: 0 6px 14px rgba(27,122,90,.12); } .pay-card input { position: absolute; opacity: 0; pointer-events: none; } .pay-card-ico { font-size: 1.3rem; line-height: 1; } .pay-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .pay-card-body b { font-size: .84rem; color: var(--ink); display: flex; align-items: center; gap: .35rem; } .pay-card-body small { font-size: .64rem; color: #5a6d76; } .pay-badge { font-style: normal; font-size: .56rem; font-weight: 800; padding: .08rem .38rem; border-radius: 999px; background: rgba(217,119,6,.14); color: #b45309; } .pay-card .pay-badge + .pay-badge, .pay-card:nth-child(2) .pay-badge { background: rgba(27,122,90,.12); color: var(--jade-deep); } .pay-check { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #c9d4cf; display: grid; place-items: center; transition: all .18s ease; } .pay-card.is-checked .pay-check { border-color: var(--jade); background: var(--jade); } .pay-card.is-checked .pay-check::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .pay-perks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; } .pay-perks span { font-size: .62rem; font-weight: 800; color: var(--jade-deep); background: rgba(27,122,90,.08); border: 1px solid rgba(27,122,90,.16); padding: .14rem .5rem; border-radius: 999px; } .pay-block-hint { font-size: .62rem; color: #8aa09b; margin: .5rem 0 0; } /* ===== 订单中心 · 筛选 / 订单卡 / 状态徽章 / 详情 ===== */ .back-chip { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .1s ease, box-shadow .18s ease; } .back-chip:active { transform: scale(.95); } .ord-filter { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem 0 .55rem; scrollbar-width: none; } .ord-filter::-webkit-scrollbar { display: none; } .ord-filter .chip { flex: none; font-size: .68rem; font-weight: 800; color: #5a6d76; background: #f3f6f4; border: 1px solid var(--line); border-radius: 999px; padding: .36rem .8rem; cursor: pointer; transition: all .18s ease; } .ord-filter .chip.is-active { color: #fff; background: var(--jade); border-color: var(--jade); box-shadow: 0 4px 10px rgba(27,122,90,.25); } .ord-card-list { display: flex; flex-direction: column; gap: .6rem; } .ord-card-list > li { padding: 0; border-top: none; font-weight: 400; font-size: 1rem; } .ord-card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: .7rem .82rem .62rem; cursor: pointer; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .1s ease; } /* 左侧状态色条：随状态变化 */ .ord-card::before { content: ''; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 4px; border-radius: 0 99px 99px 0; opacity: .55; } .ord-card.st-is-wait::before { background: linear-gradient(#f59e0b, #d97706); } .ord-card.st-is-paid::before { background: linear-gradient(#34d399, #177a5a); } .ord-card.st-is-done::before { background: linear-gradient(#60a5fa, #2563eb); } .ord-card.st-is-refund::before { background: linear-gradient(#94a3b8, #64748b); } .ord-card:active { transform: scale(.99); } .ord-card:hover { border-color: rgba(27,122,90,.4); box-shadow: 0 10px 22px -12px rgba(27,122,90,.35), 0 2px 8px rgba(27,122,90,.08); } .ord-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ord-card-top b.ord-no { font-size: .68rem; color: #7b8a8f; font-weight: 700; letter-spacing: .03em; } .ord-card-main { display: flex; align-items: center; gap: .62rem; margin-top: .55rem; } .ord-ic { flex: none; width: 2.55rem; height: 2.55rem; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; border-radius: 13px; color: hsl(var(--hue, 160), 70%, 38%); background: linear-gradient(145deg, hsl(var(--hue, 160), 80%, 94%), hsl(var(--hue, 160), 65%, 86%)); box-shadow: inset 0 -2px 4px rgba(255,255,255,.6), 0 3px 8px -3px hsla(var(--hue, 160), 60%, 60%, .5); } .ord-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18rem; } .ord-name { font-size: .85rem; font-weight: 800; color: #22303a; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ord-sub { font-size: .62rem; color: #93a1a7; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ord-sub b { color: #6b7b81; font-weight: 800; margin-left: .18rem; } .ord-amount { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; font-size: .94rem; font-weight: 900; color: var(--jade-deep); line-height: 1; } .ord-amount small { font-size: .56rem; font-weight: 700; color: #9db0a8; } .ord-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .45rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed var(--line); font-size: .64rem; } .ord-time { color: #8a9a9f; display: inline-flex; align-items: center; gap: .22rem; font-weight: 600; } .ord-arrow { font-style: normal; font-size: 1.15rem; color: #b7c4bf; line-height: 1; transition: transform .15s ease, color .15s ease; } .ord-card:hover .ord-arrow { transform: translateX(2px); color: var(--jade); } .ord-badge { flex: none; display: inline-flex; align-items: center; gap: .28rem; font-size: .6rem; font-weight: 800; padding: .18rem .5rem; border-radius: 999px; letter-spacing: .02em; } .ord-badge .ord-dot { width: .36rem; height: .36rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,.35); } .ord-badge.is-wait { background: rgba(217,119,6,.13); color: #b45309; } .ord-badge.is-paid { background: rgba(27,122,90,.12); color: var(--jade-deep); } .ord-badge.is-done { background: rgba(37,99,235,.1); color: #1d4ed8; } .ord-badge.is-refund { background: rgba(100,116,139,.14); color: #64748b; } .ord-more { display: block; text-align: center; font-size: .7rem; font-weight: 800; color: var(--jade); text-decoration: none; padding: .55rem 0 .1rem; } /* 详情视图 */ .ord-detail { display: flex; flex-direction: column; gap: .7rem; } .ord-detail[hidden] { display: none; } .ord-detail-head { display: flex; align-items: center; gap: .6rem; } .ord-detail-head strong { flex: 1; font-size: .9rem; color: var(--ink); } .od-sec { margin-bottom: .9rem; } .od-sec:last-child { margin-bottom: 0; } .od-sec-t { display: block; font-size: .66rem; font-weight: 800; color: #5a6d76; margin-bottom: .45rem; } .od-kv { display: flex; flex-direction: column; gap: .3rem; } .od-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; font-size: .7rem; } .od-kv span { color: #8aa09b; flex: none; } .od-kv b { color: #2b3940; text-align: right; word-break: break-all; } .od-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px dashed var(--line); } .od-item:first-child { border-top: none; } .od-item-name { flex: 1; min-width: 0; font-size: .78rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .od-item .meta { flex: none; font-size: .62rem; } .od-item strong { font-size: .78rem; color: var(--jade-deep); } .od-note { font-size: .7rem; font-weight: 700; color: var(--jade-deep); background: rgba(27,122,90,.08); border-radius: 10px; padding: .55rem .7rem; margin: 0; } /* ========================================================= 团队画布 · 二叉团队树（v44） ========================================================= */ .ph-t { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .page-head .meta { margin-top: .2rem; } /* 双轨平衡可视化 */ .leg-balance { display: flex; align-items: stretch; justify-content: space-between; gap: .6rem; margin: .9rem 0 .8rem; } .lb-side { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: .7rem .4rem; } .lb-side em { font-style: normal; font-weight: 800; font-size: .95rem; color: #fff; letter-spacing: .3px; } .lb-tag { font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.72); } .lb-node { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } .lb-side.is-left .lb-node { background: linear-gradient(135deg,#52e0c4,#0e7a58); } .lb-side.is-right .lb-node { background: linear-gradient(135deg,#ffd98a,#e8a33d); } .lb-mid { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32rem; min-width: 4.6rem; } .lb-units { display: flex; align-items: baseline; gap: .22rem; font-size: .62rem; color: rgba(255,255,255,.66); } .lb-units em { font-style: normal; font-weight: 800; color: #fff; font-size: .72rem; } /* 画布卡片 */ .canvas-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: .8rem; margin-bottom: 1.1rem; overflow: hidden; } .canvas-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; } .ch-t { display: flex; flex-direction: column; gap: .18rem; } .ch-t strong { font-size: .88rem; color: var(--ink); letter-spacing: .2px; } .ch-t .meta { font-size: .6rem; } .tc-tools { display: flex; gap: .38rem; } .tc-tools button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--jade-deep); font-size: .9rem; font-weight: 800; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, background .15s ease; } .tc-tools button:active { transform: scale(.9); background: var(--jade-wash); } .team-canvas { position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 16px; background: radial-gradient(1100px 480px at 12% -12%, rgba(46,213,164,.16), transparent 60%), radial-gradient(900px 420px at 108% 0%, rgba(232,163,61,.12), transparent 55%), linear-gradient(180deg, #f3faf7, #eaf3ee); border: 1px solid rgba(27,122,90,.1); touch-action: none; user-select: none; -webkit-user-select: none; } .team-canvas.is-empty { display: grid; place-items: center; color: #8aa09b; font-size: .72rem; } .tc-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #6f8b80; font-size: .72rem; font-weight: 700; z-index: 2; background: rgba(243,250,247,.7); backdrop-filter: blur(2px); } .tc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .tc-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; z-index: 2; will-change: transform; } .tc-node { position: absolute; width: 42px; height: 42px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; } .tc-node:active { transform: scale(.92); } .tc-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .72rem; color: #fff; background: linear-gradient(135deg,#52e0c4,#0e7a58); box-shadow: 0 6px 14px rgba(14,122,88,.32), inset 0 1px 0 rgba(255,255,255,.35); } .tc-node.is-idle .tc-av { background: linear-gradient(135deg,#c3cfd9,#93a3b3); box-shadow: 0 6px 12px rgba(100,116,139,.24); color: #fff; } .tc-node.is-root .tc-av { background: linear-gradient(135deg,#ffd98a,#e8a33d); box-shadow: 0 8px 16px rgba(232,163,61,.4), inset 0 1px 0 rgba(255,255,255,.5); color: #6b4a12; font-size: .78rem; } .tc-node b { margin-top: 3px; font-size: .5rem; font-weight: 800; color: #2b3940; max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .tc-node.is-root b { color: #8a6210; } .tc-plus { position: absolute; right: -2px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg,#2fd6a4,#0e7a58); color: #fff; font-style: normal; font-size: .55rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 6px rgba(14,122,88,.35); animation: tc-pulse 1.8s ease-in-out infinite; } .tc-node.is-loading .tc-av { opacity: .5; } @keyframes tc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,122,88,.35); } 50% { box-shadow: 0 0 0 5px rgba(14,122,88,0); } } /* 图例 */ .tc-legend { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; padding: .1rem .2rem; } .tc-legend span { display: inline-flex; align-items: center; gap: .3rem; font-size: .58rem; font-weight: 700; color: #5a6d76; } .lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .lg-root { background: linear-gradient(135deg,#ffd98a,#e8a33d); } .lg-live { background: linear-gradient(135deg,#52e0c4,#0e7a58); } .lg-idle { background: linear-gradient(135deg,#c3cfd9,#93a3b3); } .lg-third { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #d9a441; border-radius: 0; } /* 节点详情弹层 */ .node-panel { position: fixed; inset: 0; z-index: 90; pointer-events: none; } .node-panel.show { pointer-events: auto; } .np-mask { position: absolute; inset: 0; background: rgba(11,31,42,.45); opacity: 0; transition: opacity .25s ease; } .node-panel.show .np-mask { opacity: 1; } .np-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 1.1rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .3s cubic-bezier(.32,.72,.28,1); box-shadow: 0 -12px 40px rgba(11,31,42,.18); } .node-panel.show .np-sheet { transform: translateY(0); } .np-head { display: flex; align-items: center; gap: .7rem; } .np-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #6b4a12; background: linear-gradient(135deg,#ffd98a,#e8a33d); box-shadow: 0 6px 14px rgba(232,163,61,.35); } .np-id { flex: 1; display: flex; flex-direction: column; gap: .12rem; } .np-id b { font-size: .95rem; color: var(--ink); } .np-id em { font-style: normal; font-size: .6rem; font-weight: 700; color: #8aa09b; } .np-badge { font-size: .6rem; font-weight: 800; padding: .28rem .6rem; border-radius: 999px; } .np-badge.is-on { background: rgba(27,122,90,.12); color: var(--jade-deep); } .np-badge.is-off { background: rgba(100,116,139,.14); color: #64748b; } .np-body { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .9rem 0 .5rem; } .np-stat { background: var(--jade-wash); border-radius: 14px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .16rem; } .np-stat span { font-size: .58rem; font-weight: 700; color: #8aa09b; } .np-stat strong { font-size: .95rem; color: var(--jade-deep); } .np-actions { display: flex; gap: .55rem; margin-top: .6rem; } .np-actions .btn { flex: 1; } /* ========================================================= v44 · 高级视觉升级层（全站组件精修） ========================================================= */ :root { --gold: #e8a33d; --gold-soft: #ffd98a; --grad-jade: linear-gradient(135deg, #2fd6a4, #0e7a58); --grad-gold: linear-gradient(135deg, #ffd98a, #e8a33d); --card-radius: 22px; --shadow-lift: 0 14px 34px rgba(11,31,42,.1); } body { background: linear-gradient(180deg, #f4faf7 0%, #edf5f0 100%); } /* 按钮统一质感 */ .btn-primary { background: var(--grad-jade); border: none; color: #fff; box-shadow: 0 10px 22px rgba(14,122,88,.32); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } .btn-primary:active { transform: translateY(1px) scale(.985); box-shadow: 0 6px 14px rgba(14,122,88,.26); } .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%); pointer-events: none; } .btn-primary, .btn-secondary, .btn-ghost { position: relative; overflow: hidden; } .btn-secondary { background: rgba(27,122,90,.1); color: var(--jade-deep); border: 1px solid rgba(27,122,90,.22); } .btn-ghost { border: 1px solid var(--line); color: #3a4d55; background: #fff; } /* 页面头部统一 */ .page-head { position: relative; } .page-head h1 { font-family: var(--display); letter-spacing: .2px; } /* 资产总览卡（rewards）升级：翡翠渐变 + 光斑 */ .asset-hero { position: relative; background: radial-gradient(420px 220px at 88% -18%, rgba(255,255,255,.24), transparent 60%), radial-gradient(320px 200px at -10% 115%, rgba(46,213,164,.35), transparent 60%), linear-gradient(135deg, #0f8f66, #0b6a4c); border: none; border-radius: var(--card-radius); color: #fff; box-shadow: 0 18px 38px rgba(11,122,84,.3); overflow: hidden; } .asset-hero::after { content: ''; position: absolute; right: -38px; top: -44px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,217,138,.28), transparent 68%); pointer-events: none; } .asset-amount { font-family: var(--display); font-weight: 800; font-size: 2.35rem; letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0,0,0,.18); } .asset-metrics { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; } .asset-metrics em { color: #ffe6ad; } .asset-metrics span { color: rgba(255,255,255,.78); } /* 科目网格卡升级 */ .subj-grid .subj-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 20px rgba(11,31,42,.06); transition: transform .16s ease, box-shadow .16s ease; } .subj-grid .subj-card:active { transform: scale(.96); } .subj-grid .subj-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; background: var(--jade-wash); box-shadow: inset 0 0 0 1px rgba(27,122,90,.08); } /* 个人中心 hero（me）升级 */ .me-hero { position: relative; background: radial-gradient(360px 200px at 96% -12%, rgba(255,217,138,.3), transparent 62%), radial-gradient(420px 240px at -8% 118%, rgba(46,213,164,.32), transparent 60%), linear-gradient(135deg, #0e8760, #0a5f43); border: none; border-radius: var(--card-radius); color: #fff; box-shadow: 0 18px 38px rgba(11,122,84,.28); overflow: hidden; } .me-hero .avatar { background: var(--grad-gold); color: #6b4a12; font-weight: 800; box-shadow: 0 8px 18px rgba(232,163,61,.4), inset 0 1px 0 rgba(255,255,255,.5); } .me-hero .me-id .me-name, .me-hero .me-id .me-code { color: #fff; } .me-hero .copy-chip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); color: #fff; } .me-hero .me-metrics { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; } .me-hero .me-metrics em { color: #ffe6ad; } .me-hero .me-metrics span { color: rgba(255,255,255,.78); } .me-hero .meta { color: rgba(255,255,255,.72); } /* 6 宫格快捷入口升级 */ .quick-grid { grid-template-columns: repeat(3, 1fr); gap: .55rem; } .quick-cell { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 20px rgba(11,31,42,.05); padding: .9rem .35rem; transition: transform .16s ease, box-shadow .16s ease; } .quick-cell:active { transform: scale(.95); } .quick-cell .quick-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; background: linear-gradient(135deg, #e8f6f0, #d7efe4); box-shadow: inset 0 0 0 1px rgba(27,122,90,.1); margin-bottom: .45rem; } .quick-cell b { font-size: .72rem; } /* 钱包卡升级 */ .wallet-box, .ship-box { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: 0 10px 26px rgba(11,31,42,.06); } /* 表单字段（profile）升级 */ .ship-grid .field { background: #f7fbf9; border: 1px solid rgba(27,122,90,.12); border-radius: 14px; padding: .34rem .7rem .5rem; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } .ship-grid .field:focus-within { border-color: var(--jade); background: #fff; box-shadow: 0 0 0 3px rgba(27,122,90,.12); } .ship-grid .field span { font-size: .58rem; font-weight: 800; color: #7d938c; text-transform: uppercase; letter-spacing: .4px; } .ship-grid .field input, .ship-grid .field select { background: transparent; border: none; padding: .18rem 0 0; font-size: .86rem; font-weight: 700; color: var(--ink); width: 100%; } .ship-grid .field input:focus, .ship-grid .field select:focus { outline: none; } .ship-grid .field input::placeholder { color: #b6c7c0; font-weight: 500; } /* 收银台（checkout）升级 */ .checkout .ck-total { font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--jade-deep); } .pay-tiers .pay-tier { transition: transform .15s ease, box-shadow .15s ease; } .pay-tiers .pay-tier:active { transform: scale(.97); } /* 扫码登录页（index）升级 */ .qr-wrap { position: relative; background: radial-gradient(300px 180px at 50% -20%, rgba(46,213,164,.16), transparent 70%), linear-gradient(180deg, #f6fcf9, #ecf5f0); border: 1px solid rgba(27,122,90,.12); border-radius: 24px; box-shadow: 0 16px 36px rgba(11,31,42,.08); } .steps li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .6rem .75rem; box-shadow: 0 6px 16px rgba(11,31,42,.05); } .steps li b { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-jade); color: #fff; display: grid; place-items: center; font-size: .78rem; box-shadow: 0 4px 10px rgba(14,122,88,.3); } .steps li span { font-size: .7rem; } .steps code { font-size: .62rem; } /* 首页（shop）轻升级 */ .shop-search { background: rgba(255,255,255,.92); border: 1px solid rgba(27,122,90,.14); box-shadow: 0 10px 24px rgba(11,31,42,.07); border-radius: 16px; } .shop-search:focus-within { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(27,122,90,.14), 0 10px 24px rgba(11,31,42,.07); } .sku-grid .sku-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 24px rgba(11,31,42,.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .sku-grid .sku-card:active { transform: translateY(2px) scale(.98); box-shadow: 0 6px 14px rgba(11,31,42,.08); } /* 通用卡片质感提升 */ .card, .card.soft { border-radius: var(--card-radius); box-shadow: 0 10px 26px rgba(11,31,42,.06); } .seg { background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 14px; padding: .22rem; } .seg-btn { border-radius: 10px; } .seg-btn.is-on { background: var(--grad-jade); color: #fff; box-shadow: 0 4px 12px rgba(14,122,88,.3); } /* 页面入场微动效 */ .shell-tabs .page-head { animation: v44-in .38s ease both; } .canvas-card, .team-hero, .card, .asset-hero, .me-hero, .quick-grid, .shop-section, .shop-benefits { animation: v44-in .4s ease both; } .shop-hero, .asset-pills, .shop-cats { animation: v44-in .45s ease both; } @keyframes v44-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 底部导航升级 */ .tabbar { background: rgba(255,255,255,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(11,31,42,.07); box-shadow: 0 -10px 30px rgba(11,31,42,.06); } .tabbar a.is-on { color: var(--jade-deep); } .tabbar a.is-on .tab-ico { background: var(--jade-wash); border-radius: 12px; } .tabbar .tab-ico { transition: background .2s ease, border-radius .2s ease; } /* toast 统一 */ .toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(8px); background: rgba(11,31,42,.88); color: #fff; font-size: .72rem; font-weight: 700; padding: .6rem .95rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 200; backdrop-filter: blur(6px); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .od-note.is-warn { color: #b45309; background: rgba(217,119,6,.1); } /* ================================================================== v49 · 主题系统 · 头像 · 客服浮窗 · 主题选择器 · 收货档案表单升级 ================================================================== */ /* —— 1. 主题体系（data-theme；默认「翡翠」无需标注） —— */ :root[data-theme='night'] { --ink: #e8f1ef; --jade: #3ec89b; --jade-deep: #8be3c4; --mint: #2f9d78; --paper: #0d1a21; --line: rgba(232, 241, 239, 0.14); --card: rgba(19, 32, 40, 0.97); --shadow: 0 12px 28px rgba(0, 0, 0, 0.4); --shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.5); } :root[data-theme='sun'] { --ink: #3a2b1a; --jade: #c25b2a; --jade-deep: #9c4217; --mint: #e08a4c; --paper: #fdf3e7; --line: rgba(58, 43, 26, 0.12); --card: rgba(255, 255, 255, 0.97); } :root[data-theme='ocean'] { --ink: #0b2233; --jade: #1273b8; --jade-deep: #0b5286; --mint: #2f9dd8; --paper: #e9f2f8; --line: rgba(11, 34, 51, 0.1); --card: rgba(255, 255, 255, 0.97); } :root[data-theme='lilac'] { --ink: #2a2140; --jade: #7a5cc0; --jade-deep: #5b3fa0; --mint: #9a7dd8; --paper: #f3effa; --line: rgba(42, 33, 64, 0.12); --card: rgba(255, 255, 255, 0.97); } :root[data-theme='rose'] { --ink: #3d1a26; --jade: #b23a5a; --jade-deep: #8f2440; --mint: #e0668a; --paper: #fdf0f4; --line: rgba(61, 26, 38, 0.12); --card: rgba(255, 255, 255, 0.97); } :root[data-theme='forest'] { --ink: #14281c; --jade: #2f6b3a; --jade-deep: #1e4a27; --mint: #5a9a5f; --paper: #eef4ec; --line: rgba(20, 40, 28, 0.12); --card: rgba(255, 255, 255, 0.97); } :root[data-theme='galaxy'] { --ink: #e6e4ff; --jade: #7a5fe0; --jade-deep: #a58cf5; --mint: #9a7dd8; --paper: #17142b; --line: rgba(230, 228, 255, 0.14); --card: rgba(28, 24, 52, 0.97); --shadow: 0 12px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55); } :root[data-theme='gold'] { --ink: #3a2c0f; --jade: #a97c1f; --jade-deep: #8a6316; --mint: #e0b54a; --paper: #faf4e4; --line: rgba(58, 44, 15, 0.12); --card: rgba(255, 255, 255, 0.97); } /* 主题背景（覆盖 body 默认渐变） */ :root[data-theme='night'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(62, 200, 155, 0.14), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(20, 80, 60, 0.12), transparent 52%), linear-gradient(180deg, #0c1519 0%, var(--paper) 40%, #0b1317 100%); } :root[data-theme='sun'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(194, 91, 42, 0.14), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(224, 138, 76, 0.1), transparent 52%), linear-gradient(180deg, #f6e3cd 0%, var(--paper) 38%, #fbf1e4 100%); } :root[data-theme='ocean'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(18, 115, 184, 0.14), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(47, 157, 216, 0.1), transparent 52%), linear-gradient(180deg, #cfe4f2 0%, var(--paper) 38%, #f0f7fb 100%); } :root[data-theme='lilac'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(122, 92, 192, 0.14), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(154, 125, 216, 0.1), transparent 52%), linear-gradient(180deg, #e6def6 0%, var(--paper) 38%, #f6f2fc 100%); } :root[data-theme='rose'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(178, 58, 90, 0.14), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(224, 102, 138, 0.1), transparent 52%), linear-gradient(180deg, #fbdde6 0%, var(--paper) 38%, #fef2f6 100%); } :root[data-theme='forest'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(47, 107, 58, 0.14), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(90, 154, 95, 0.1), transparent 52%), linear-gradient(180deg, #dcead9 0%, var(--paper) 38%, #f0f6ee 100%); } :root[data-theme='galaxy'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(122, 95, 224, 0.22), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(90, 70, 200, 0.18), transparent 52%), linear-gradient(180deg, #100d22 0%, var(--paper) 40%, #120f26 100%); } :root[data-theme='gold'] body { background: radial-gradient(560px 280px at 8% -10%, rgba(169, 124, 31, 0.16), transparent 58%), radial-gradient(420px 220px at 96% 4%, rgba(224, 181, 74, 0.12), transparent 52%), linear-gradient(180deg, #f2e2b6 0%, var(--paper) 38%, #fdf7e8 100%); } /* 暗色主题：卡片 / 表单 / 底栏适配（浅色主题沿用默认即可） */ :root[data-theme='night'] .wallet-box, :root[data-theme='night'] .ship-box, :root[data-theme='night'] .canvas-card, :root[data-theme='night'] .card, :root[data-theme='night'] .shop-section, :root[data-theme='night'] .team-hero, :root[data-theme='night'] .asset-hero, :root[data-theme='night'] .quick-grid, :root[data-theme='night'] .quick-cell, :root[data-theme='night'] .menu li, :root[data-theme='night'] .sup-panel { background: var(--card); } :root[data-theme='night'] .ship-grid .field { background: rgba(255, 255, 255, 0.05); border-color: rgba(232, 241, 239, 0.16); } :root[data-theme='night'] .ship-grid .field:focus-within { background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(62, 200, 155, 0.2); } :root[data-theme='night'] .ship-grid .field input, :root[data-theme='night'] .ship-grid .field select, :root[data-theme='night'] .field input { color: var(--ink); background: transparent; } :root[data-theme='night'] .banner { background: rgba(232, 241, 239, 0.08); color: var(--ink); } :root[data-theme='night'] .tabbar { background: rgba(13, 26, 33, 0.92); border-top-color: rgba(232, 241, 239, 0.1); } :root[data-theme='night'] .meta, :root[data-theme='night'] .field-hint, :root[data-theme='night'] .form-group-title { color: rgba(232, 241, 239, 0.6); } :root[data-theme='night'] .shop-avatar { background: rgba(255, 255, 255, 0.08); border-color: rgba(232, 241, 239, 0.2); } /* —— 2. 头像（个人中心 + 首页右上角） —— */ .avatar { overflow: hidden; } .avatar-btn { position: relative; padding: 0; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; } .avatar-btn .avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--grad-gold); } /* 无自定义头像时隐藏 img（.display:block 会覆盖 hidden 属性，需显式声明） */ .avatar-btn .avatar-img[hidden] { display: none; } /* 昵称首字母头像：铺满按钮、渐变底、居中 */ .avatar-letter { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(135deg, #f5b301, #f97316); color: #fff; font-weight: 800; font-size: 1.35rem; line-height: 1; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(11, 31, 42, 0.25); user-select: none; pointer-events: none; } .avatar-letter[hidden] { display: none; } .avatar-edit { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(11, 31, 42, 0.72); color: #fff; display: grid; place-items: center; font-size: 0.6rem; font-style: normal; border: 2px solid rgba(255, 255, 255, 0.85); pointer-events: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .shop-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: block; flex: none; position: relative; padding: 0; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .shop-avatar:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .shop-avatar .avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .shop-avatar .avatar-img[hidden] { display: none; } .shop-avatar .avatar-letter { font-size: 1rem; border-radius: 50%; } /* —— 3. 客服浮窗（开关按钮 + 弹窗对话框；后续接入 AI） —— */ .support-fab { position: fixed; right: 14px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--jade), var(--jade-deep)); box-shadow: 0 10px 24px rgba(11, 31, 42, 0.28); z-index: 160; transition: transform 0.18s ease, box-shadow 0.18s ease; } .support-fab:active { transform: scale(0.94); } .support-fab .sup-fab-badge { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #ff6b4a; border: 2px solid #fff; } .support-panel { position: fixed; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 80px); width: min(340px, calc(100vw - 24px)); height: min(480px, calc(100vh - 220px)); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; z-index: 170; animation: sup-in 0.22s ease both; } .support-panel[hidden] { display: none; } @keyframes sup-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .sup-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 0.9rem; background: linear-gradient(135deg, var(--jade), var(--jade-deep)); color: #fff; } .sup-head b { font-size: 0.92rem; } .sup-head .meta { color: rgba(255, 255, 255, 0.82); font-size: 0.62rem; margin-left: auto; } .sup-close { background: rgba(255, 255, 255, 0.18); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; line-height: 1; flex: none; } .sup-body { flex: 1; overflow-y: auto; padding: 0.8rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; background: var(--paper); -webkit-overflow-scrolling: touch; } .sup-msg { max-width: 84%; padding: 0.55rem 0.75rem; border-radius: 14px; font-size: 0.8rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; animation: sup-in 0.18s ease both; } .sup-msg.is-bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); } .sup-msg.is-user { align-self: flex-end; background: linear-gradient(135deg, var(--jade), var(--jade-deep)); color: #fff; border-bottom-right-radius: 4px; } .sup-typing { color: #8ba29b; font-size: 0.78rem; padding: 0.2rem 0.4rem; } .sup-quick { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.55rem 0.85rem; border-top: 1px solid var(--line); background: var(--card); } .sup-quick button { font-size: 0.72rem; padding: 0.34rem 0.62rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: transform 0.15s; } .sup-quick button:active { transform: scale(0.95); } .sup-inputbar { display: flex; gap: 0.5rem; padding: 0.6rem 0.7rem 0.75rem; border-top: 1px solid var(--line); background: var(--card); } .sup-inputbar input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.85rem; font: inherit; font-size: 0.82rem; background: var(--paper); color: var(--ink); } .sup-inputbar input:focus { outline: none; border-color: var(--jade); } .sup-send { border: none; border-radius: 999px; padding: 0 1.05rem; background: linear-gradient(135deg, var(--jade), var(--jade-deep)); color: #fff; font-size: 0.8rem; font-weight: 700; cursor: pointer; } /* —— 4. 主题选择器（个人中心） —— */ .theme-sheet { margin-top: 0.2rem; padding: 0.85rem 0.9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--shadow); } .theme-sheet[hidden] { display: none; } .theme-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } .theme-sheet-head strong { font-size: 0.86rem; } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; } .theme-swatch { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font: inherit; text-align: left; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .theme-swatch:active { transform: scale(0.97); } .theme-swatch.is-on { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(27, 122, 90, 0.15); } .theme-swatch .sw-orb { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } .theme-swatch b { display: block; font-size: 0.78rem; color: var(--ink); } .theme-swatch em { display: block; font-style: normal; font-size: 0.62rem; color: #8ba29b; } /* —— 5. 收货档案表单升级（profile） —— */ .ship-box-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.1rem; } .profile-progress { height: 6px; border-radius: 99px; background: rgba(27, 122, 90, 0.12); overflow: hidden; margin: 0.6rem 0 0.9rem; } .profile-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--jade), var(--mint)); transition: width 0.45s ease; } .form-group { display: grid; gap: 0.6rem; grid-column: 1 / -1; } .form-group-title { grid-column: 1 / -1; margin: 0.15rem 0 0; font-size: 0.68rem; font-weight: 800; color: #7d938c; letter-spacing: 0.5px; display: flex; align-items: center; gap: 0.35rem; } .form-group .field { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'ico label' 'in in' 'hint hint'; align-items: center; gap: 0.08rem 0.45rem; } .form-group .field .f-ico { grid-area: ico; font-size: 0.98rem; line-height: 1; } .form-group .field em { grid-area: label; font-style: normal; font-size: 0.58rem; font-weight: 800; color: #7d938c; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-group .field input, .form-group .field select { grid-area: in; } .form-group .field .field-hint { grid-area: hint; margin: 0; font-size: 0.6rem; font-weight: 500; color: #a3b4ae; } .form-group .field.is-invalid { border-color: #d9534f; background: #fdf5f4; box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.12); } .form-group .field.is-invalid em, .form-group .field.is-invalid .field-hint { color: #c0392b; } /* —— 5.1 收货名片 / 进度文本 / 字段实时校验 / 登录锁定（v86） —— */ .ship-box { position: relative; } .ship-card { display: flex; align-items: center; gap: 0.7rem; background: linear-gradient(135deg, rgba(27, 122, 90, 0.08), rgba(62, 200, 155, 0.06)); border: 1px solid rgba(27, 122, 90, 0.18); border-radius: 14px; padding: 0.7rem 0.8rem; margin-bottom: 0.75rem; } .ship-card-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--jade), var(--mint)); color: #fff; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 3px 8px rgba(27, 122, 90, 0.28); } .ship-card-main { min-width: 0; flex: 1; } .ship-card-top { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .ship-card-top b { font-size: 0.92rem; } .ship-card-top .badge { margin-left: auto; } .ship-card-addr { margin: 0.15rem 0 0; font-size: 0.76rem; color: #5a6d76; line-height: 1.5; word-break: break-all; } .ship-card-meta { margin: 0.1rem 0 0; font-size: 0.68rem; color: #a3b4ae; } .progress-wrap { display: flex; align-items: center; gap: 0.55rem; margin: 0.6rem 0 0.9rem; } .progress-wrap .profile-progress { flex: 1; margin: 0; } .progress-text { font-size: 0.68rem; font-weight: 800; color: #7d938c; white-space: nowrap; min-width: 4.2em; text-align: right; } .profile-progress i.is-done { background: linear-gradient(90deg, #1a8f6b, #2fd08f); } .progress-text.is-done { color: #1a8f6b; } /* 字段实时校验：错误文本行 */ .form-group .field .field-error { grid-area: err; margin: 0; font-size: 0.6rem; font-weight: 600; color: #c0392b; } .form-group .field.is-invalid { grid-template-areas: 'ico label' 'in in' 'hint hint' 'err err'; } .form-group .field.is-valid { border-color: rgba(27, 122, 90, 0.35); background: rgba(27, 122, 90, 0.045); } .form-group .field.is-valid em { color: #1a8f6b; } /* 未登录锁定遮罩（v92：必须配套 [hidden] 规则，否则 display:flex 会覆盖 hidden 属性导致遮罩永远显示） */ .ship-lock { position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(3px); border-radius: 14px; display: flex; align-items: center; justify-content: center; } .ship-lock[hidden] { display: none; } .ship-lock-card { text-align: center; padding: 1rem 1.4rem; } .ship-lock-ico { font-size: 1.5rem; display: block; margin-bottom: 0.4rem; } .ship-lock-card p { margin: 0 0 0.8rem; font-size: 0.8rem; color: #5a6d76; } :root[data-theme='night'] .ship-card { background: rgba(62, 200, 155, 0.08); border-color: rgba(62, 200, 155, 0.2); } :root[data-theme='night'] .ship-card-addr { color: rgba(232, 241, 239, 0.75); } :root[data-theme='night'] .ship-card-meta { color: rgba(232, 241, 239, 0.5); } :root[data-theme='night'] .ship-lock { background: rgba(13, 26, 33, 0.78); } :root[data-theme='night'] .ship-lock-card p { color: rgba(232, 241, 239, 0.75); } /* 滚动条观感统一 */ .sup-body::-webkit-scrollbar, .ord-card-list::-webkit-scrollbar { width: 4px; } .sup-body::-webkit-scrollbar-thumb, .ord-card-list::-webkit-scrollbar-thumb { background: rgba(11, 31, 42, 0.18); border-radius: 99px; } /* 个人中心 8 宫格（4×2 整齐排列） */ .quick-grid { grid-template-columns: repeat(4, 1fr); gap: 0.55rem; } .quick-cell { padding: 0.85rem 0.3rem; } @media (max-width: 360px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } } /* ===== 购买确认弹窗（checkout v50）===== */ .ck-confirm-mask { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(7, 18, 24, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ckFade .2s ease; } .ck-confirm-mask[hidden] { display: none; } .ck-confirm-card { width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 1.05rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 30px 70px rgba(7, 18, 24, .32); animation: ckUp .26s cubic-bezier(.2, .9, .3, 1); } @keyframes ckFade { from { opacity: 0; } to { opacity: 1; } } @keyframes ckUp { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .ck-confirm-head { display: flex; align-items: center; justify-content: space-between; } .ck-confirm-title { font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: var(--ink); } .ck-confirm-close { appearance: none; border: none; background: transparent; color: rgba(11, 31, 42, .55); font-size: 1rem; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; } .ck-confirm-close:active { background: rgba(11, 31, 42, .08); } .ck-confirm-badge { display: flex; align-items: center; gap: .7rem; background: linear-gradient(120deg, #eefaf4, #e2f4ea); border: 1px solid rgba(27, 122, 90, .12); border-radius: 16px; padding: .65rem .75rem; } .ck-confirm-badge-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(27,122,90,.1), 0 4px 10px rgba(11,31,42,.08); } .ck-confirm-badge-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .ck-confirm-badge-body b { font-size: .92rem; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-confirm-badge-body em { font-style: normal; font-size: .66rem; color: var(--jade-deep); opacity: .85; } .ck-confirm-amount { text-align: center; padding: .5rem 0 .2rem; display: flex; flex-direction: column; gap: .15rem; } .ck-confirm-amount span { font-size: .7rem; color: rgba(11, 31, 42, .55); font-weight: 700; letter-spacing: .04em; } .ck-confirm-amount strong { font-family: var(--display); font-size: 2.15rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg, var(--jade), var(--jade-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ck-confirm-amount em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--jade-deep); opacity: .8; } .ck-confirm-rows { margin: 0; display: flex; flex-direction: column; gap: .3rem; border-top: 1px dashed rgba(11, 31, 42, .12); border-bottom: 1px dashed rgba(11, 31, 42, .12); padding: .6rem 0; } .ck-confirm-row { display: flex; gap: .6rem; align-items: baseline; } .ck-confirm-row dt { flex: none; width: 52px; font-size: .7rem; font-weight: 700; color: rgba(11,31,42,.5); } .ck-confirm-row dd { margin: 0; flex: 1; font-size: .8rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .ck-confirm-note { font-size: .66rem; color: rgba(11, 31, 42, .5); line-height: 1.5; } .ck-confirm-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; } .ck-confirm-actions .btn { border-radius: 14px; } /* 暗夜主题适配 */ :root[data-theme='night'] .ck-confirm-card { background: #16262e; } :root[data-theme='night'] .ck-confirm-title, :root[data-theme='night'] .ck-confirm-row dd, :root[data-theme='night'] .ck-confirm-badge-body b { color: var(--ink); } :root[data-theme='night'] .ck-confirm-badge { background: rgba(232, 241, 239, .06); border-color: rgba(232,241,239,.12); } :root[data-theme='night'] .ck-confirm-amount span, :root[data-theme='night'] .ck-confirm-row dt, :root[data-theme='night'] .ck-confirm-note { color: rgba(232, 241, 239, .55); } :root[data-theme='night'] .ck-confirm-rows { border-color: rgba(232, 241, 239, .14); } :root[data-theme='night'] .ck-confirm-close { color: rgba(232,241,239,.6); } :root[data-theme='night'] .ck-confirm-close:active { background: rgba(232,241,239,.1); } /* ============================================================ v51 · 全站体验增强层 1) 列表骨架屏（多行 shimmer） 2) 精美空态组件 3) 行交互动效 4) 数字滚动（count-up） 5) 主题平滑过渡 6) tabbar 激活指示器动效 7) 列表入场动画 ============================================================ */ /* ---------- 1. 列表骨架屏 ---------- */ .skel-list { display: flex; flex-direction: column; gap: .7rem; padding: 0; margin: 0; list-style: none; } .skel-item { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.72); } .skel-line { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, rgba(11,31,42,.05), rgba(11,31,42,.12), rgba(11,31,42,.05)); background-size: 200% 100%; animation: sku-shimmer 1.3s linear infinite; } .skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; } .skel-line.w55 { width: 55%; } .skel-line.w70 { width: 70%; } .skel-line.badge { width: 54px; height: 22px; border-radius: 99px; justify-self: end; } .skel-item .skel-line + .skel-line { margin-top: .5rem; } /* ---------- 2. 精美空态组件 ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 2.6rem 1.4rem; text-align: center; color: #5a6d76; animation: ckUp .4s ease both; } .empty-ico { width: 74px; height: 74px; border-radius: 24px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(150deg, rgba(27,122,90,.12), rgba(15,90,66,.06)); border: 1px dashed rgba(27,122,90,.35); box-shadow: inset 0 0 0 4px rgba(255,255,255,.5); position: relative; } .empty-ico::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(60px 30px at 50% -10%, rgba(27,122,90,.22), transparent 70%); pointer-events: none; } .empty-title { font-size: .95rem; font-weight: 800; color: var(--ink); } .empty-sub { font-size: .78rem; line-height: 1.5; opacity: .85; max-width: 240px; } .empty-cta { margin-top: .4rem; border: 1px solid rgba(27,122,90,.4); background: rgba(255,255,255,.7); color: var(--jade-deep); font: inherit; font-weight: 800; font-size: .82rem; padding: .5rem 1.15rem; border-radius: 99px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s ease, box-shadow .2s ease, background .2s ease; } .empty-cta:hover { background: #fff; box-shadow: 0 6px 16px rgba(27,122,90,.18); } .empty-cta:active { transform: scale(.96); } /* ---------- 3. 行交互动效 ---------- */ .ripple-row { position: relative; overflow: hidden; } .ripple-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(27,122,90,.1) 46%, transparent 60%); transform: translateX(-130%); transition: transform .5s ease; pointer-events: none; } .ripple-row:hover::after, .ripple-row:active::after { transform: translateX(130%); } /* 通用卡片按压反馈（列表项） */ .press-card { transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease; } .press-card:hover { border-color: rgba(27,122,90,.4); box-shadow: 0 8px 20px rgba(27,122,90,.12); transform: translateY(-1px); } .press-card:active { transform: scale(.985); } /* ---------- 4. 数字滚动（count-up） ---------- */ .count-up { font-variant-numeric: tabular-nums; transition: color .2s ease; } .count-up.is-counting { color: var(--jade-deep); } /* ---------- 5. 主题平滑过渡 ---------- */ body, body .card, body .sheet-card, body .subj-card, body .ord-card, body .seg, body .field, body .me-hero, body .team-hero, body .ord-filter, body .tabbar, body .quick-cell, body .menu-item, body .toast, body .ck-confirm-card { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* ---------- 6. tabbar 激活指示器动效 ---------- */ /* 底栏保持 position: fixed（勿用 relative 覆盖，激活点相对 .tab 定位即可） */ .tabbar .tab { position: relative; } .tabbar .tab.is-active .tab-ico { transform: translateY(-1px); } .tabbar .tab.is-active .tab-lab { color: var(--jade-deep); } .tabbar .tab.is-active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: 18px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--jade), var(--jade-deep)); animation: tabPop .28s cubic-bezier(.2, .9, .3, 1.3) both; } .tabbar .tab-ico, .tabbar .tab-lab { transition: transform .2s ease, color .2s ease; } .tabbar .tab:active .tab-ico { transform: scale(.9); } @keyframes tabPop { from { opacity: 0; transform: translateX(-50%) scaleX(.3); } to { opacity: 1; transform: translateX(-50%) scaleX(1); } } /* ---------- 7. 列表入场动画 ---------- */ .list-pop > li { animation: listIn .38s ease both; } .list-pop > li:nth-child(2) { animation-delay: .05s; } .list-pop > li:nth-child(3) { animation-delay: .1s; } .list-pop > li:nth-child(4) { animation-delay: .15s; } .list-pop > li:nth-child(5) { animation-delay: .2s; } .list-pop > li:nth-child(6) { animation-delay: .25s; } @keyframes listIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 骨架屏在暗夜主题下的观感 */ :root[data-theme='night'] .skel-item, :root[data-theme='night'] .empty-ico { background-color: rgba(255,255,255,.04); } :root[data-theme='night'] .skel-line { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; } :root[data-theme='night'] .empty-ico { background: linear-gradient(150deg, rgba(47,157,120,.16), rgba(47,157,120,.06)); border-color: rgba(47,157,120,.4); } :root[data-theme='night'] .empty-cta { background: rgba(255,255,255,.06); color: var(--mint); } /* ============================================================ v52 · 平板 / 大屏自适应层 断点：≥768px（竖屏平板）与 ≥1024px（横屏/大平板） 覆盖：主容器加宽、底栏跟随、网格扩列、字号间距放大、 登录页与收银台大屏布局 ============================================================ */ @media (min-width: 768px) { /* —— 主容器与底栏加宽 —— */ .shell { max-width: 780px; padding: 1.4rem 1.5rem 2.2rem; gap: 1.1rem; } .tabbar { width: min(780px, 100%); height: calc(70px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; } .shell-tabs { padding-bottom: calc(70px + 1.75rem); padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 1.75rem); } .tabbar a { gap: .3rem; } .tabbar .tab-ico { width: 26px; height: 26px; } .tabbar .tab-lab { font-size: .78rem; } /* —— 全局字号与卡片呼吸感微放大 —— */ .page-head h1 { font-size: 1.35rem; } .banner { padding: .85rem 1rem; } /* —— 首页 SKU：单列 → 双列 —— */ .sku-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } /* —— 快捷入口：4 列 → 6 列 —— */ .quick-grid { grid-template-columns: repeat(6, 1fr); gap: .7rem; } .quick-cell { padding: 1rem .5rem; } /* —— 奖励科目汇总：3 列 → 6 列 —— */ .subj-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; } /* —— 团队双栏 —— */ .dual-pane { gap: 1rem; } .side-card { padding: 1.1rem; } /* —— 收货表单：2 列 → 3 列 —— */ .ship-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem .9rem; } .ship-grid .field.full { grid-column: 1 / -1; } /* —— 菜单：单列列表 → 双列卡片 —— */ .menu { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: .8rem; } .menu li { border: 1px solid var(--line); border-radius: 14px; padding: .85rem .95rem; background: var(--card); } .menu li:first-child { border: 1px solid var(--line); } /* —— hero 卡内边距放大 —— */ .me-hero, .asset-hero, .team-hero { padding: 1.4rem 1.5rem 1.25rem; } .me-metrics { gap: .5rem; } .me-metrics em { font-size: 1.35rem; } /* —— 登录页：卡片居中限宽 + 扫码横向 —— */ .auth-card { max-width: 560px; margin-left: auto; margin-right: auto; padding: 1.6rem 1.8rem; } .auth-tabs { grid-template-columns: repeat(4, 1fr); } .qr-wrap { padding: 1.2rem; } .steps { grid-template-columns: repeat(3, 1fr); } .steps li { grid-template-columns: auto 1fr; } /* —— 收银台支付档位：单列 → 双列 —— */ .pay-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } /* —— 确认弹窗：加宽 —— */ .ck-confirm-card { width: min(440px, 92vw); } /* —— 订单列表行：放大 —— */ .ord-card { padding: 1rem 1.05rem .86rem; } .ord-name { font-size: .98rem; } .ord-amount { font-size: 1.02rem; } .ord-ic { width: 2.85rem; height: 2.85rem; font-size: 1.5rem; } .ord-filter .chip { font-size: .76rem; padding: .5rem .9rem; } .skel-item { padding: 1rem 1.15rem; } .skel-line { height: 14px; } } /* —— ≥1024px：横屏 / 大平板进一步加宽 —— */ @media (min-width: 1024px) { .shell { max-width: 920px; padding: 1.6rem 1.8rem 2.4rem; } .tabbar { width: min(920px, 100%); } .shell-tabs { padding-bottom: calc(72px + 1.75rem); padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1.75rem); } .tabbar { height: calc(72px + env(safe-area-inset-bottom, 0px)); } /* SKU：双列 → 三列 */ .sku-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } /* 奖励科目：6 列 → 8 列（大屏更紧凑） */ .subj-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } /* 收银台：双列卡片 + 右侧摘要可留白 */ .pay-tiers { grid-template-columns: 1fr 1fr; } .auth-card { max-width: 620px; } } /* ============================================================ 唯美增强层 v53 —— 翡翠 × 暖金：卡片渐变描边 / 玻璃高光 / 微光 （叠加于既有规则之上；夜间主题已做兼容回退） ============================================================ */ /* —— 卡片：翡翠→暖金 1px 渐变描边 + 顶部柔光 + 水色玻璃底 —— */ .sku-card, .asset-pill, .complete-card, .side-card, .wallet-box, .ship-box, .menu li, .steps li, .sup-panel, .canvas-card, .card, .card.soft { border: 1px solid transparent; background: linear-gradient(180deg, rgba(255,255,255,.62), transparent 44%) padding-box, linear-gradient(165deg, rgba(255,255,255,.99), rgba(245,252,247,.90)) padding-box, linear-gradient(150deg, rgba(23,117,90,.32), rgba(200,162,75,.18) 46%, rgba(255,255,255,.42)) border-box; box-shadow: 0 18px 44px rgba(12,35,32,.08), inset 0 1px 0 rgba(255,255,255,.95); } /* 轻量卡保持柔和，避免过度阴影 */ .card.soft, .side-card, .menu li, .steps li { box-shadow: 0 10px 26px rgba(12,35,32,.06), inset 0 1px 0 rgba(255,255,255,.9); } /* —— 夜间主题：取消渐变描边，回退为夜卡 —— */ :root[data-theme='night'] .sku-card, :root[data-theme='night'] .asset-pill, :root[data-theme='night'] .complete-card, :root[data-theme='night'] .side-card, :root[data-theme='night'] .wallet-box, :root[data-theme='night'] .ship-box, :root[data-theme='night'] .menu li, :root[data-theme='night'] .steps li, :root[data-theme='night'] .sup-panel, :root[data-theme='night'] .canvas-card, :root[data-theme='night'] .card, :root[data-theme='night'] .card.soft { border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); } /* —— hero 级渐变卡：翡翠主调 + 暖金光斑点缀 —— */ .asset-hero, .team-hero, .me-hero, .shop-hero { position: relative; overflow: hidden; } .asset-hero::after, .team-hero::after, .me-hero::after, .shop-hero::after { content: ""; position: absolute; right: -14%; top: -30%; width: 46%; height: 90%; border-radius: 50%; background: radial-gradient(circle, rgba(232,217,174,.28), transparent 68%); pointer-events: none; } /* —— 按钮：渐变微光 + 金色提示 —— */ .btn-primary { background: linear-gradient(135deg, #2ba06f, #0e5f45); box-shadow: 0 12px 26px rgba(14,95,69,.30), inset 0 1px 0 rgba(255,255,255,.22); } .btn-primary:hover { filter: brightness(1.05); } .btn-secondary { background: linear-gradient(180deg, rgba(23,117,90,.12), rgba(23,117,90,.08)); border: 1px solid rgba(23,117,90,.26); } .btn-ghost { border: 1px solid rgba(12,35,32,.14); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,247,.92)); } /* —— 底部导航：玻璃感 + 激活项翡翠渐变 —— */ .tabbar { background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid rgba(23,117,90,.14); box-shadow: 0 -12px 34px rgba(12,35,32,.10); } .tab.is-active .tab-ico { background: linear-gradient(145deg, rgba(53,166,126,.16), rgba(200,162,75,.14)); } /* —— 标题：衬线字距、更雅致 —— */ .page-head h1 { letter-spacing: .4px; font-weight: 800; } .shop-brand strong, .sku-card strong, .ap-body em { letter-spacing: .2px; } .sku-name { line-height: 1.5; } /* —— 输入框：淡翡翠描边 + 聚焦光晕 —— */ .field input { background: rgba(255,255,255,.9); border: 1px solid rgba(23,117,90,.16); border-radius: 13px; } .field input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgba(53,166,126,.16), 0 6px 18px rgba(23,117,90,.08); } /* —— 二维码容器 / 步骤条：暖调背景 —— */ .qr-wrap { background: radial-gradient(300px 180px at 50% -20%, rgba(53,166,126,.16), transparent 70%), radial-gradient(220px 140px at 90% 110%, rgba(200,162,75,.14), transparent 70%), linear-gradient(180deg, #f4fbf7, #edf4ee); border: 1px solid rgba(23,117,90,.14); } /* —— 全局暖金角落光晕（增强唯美氛围，不遮挡交互） —— */ body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 42vh; z-index: -1; pointer-events: none; background: radial-gradient(560px 300px at 92% 100%, rgba(200,162,75,.10), transparent 62%), radial-gradient(420px 240px at 4% 100%, rgba(23,117,90,.08), transparent 60%); } :root[data-theme='night'] body::after { opacity: .35; } /* —— 店铺 ambient：追加一枚暖金气泡 —— */ .shop-ambient .sa-b { box-shadow: 0 0 60px rgba(200,162,75,.18); } /* ============ v54 精致化增强（2026-08-17） ============ */ /* —— 钱包卡：连接后展示 USDT 余额，不再重复显示「连接钱包」 —— */ .wallet-box { position: relative; overflow: hidden; border-radius: var(--card-radius, 22px); background: linear-gradient(150deg, #f1fbf5, #e7f3ec 55%, #edf7f0); border: 1px solid rgba(23,117,90,.16); box-shadow: 0 10px 30px rgba(23,117,90,.10), inset 0 1px 0 rgba(255,255,255,.75); transition: box-shadow .3s ease, border-color .3s ease; } .wallet-box.is-connected { background: linear-gradient(150deg, #eafaf1, #ddf0e5 55%, #e8f5ec); border-color: rgba(23,117,90,.30); box-shadow: 0 12px 34px rgba(23,117,90,.16), inset 0 1px 0 rgba(255,255,255,.85); } .wb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wb-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .92rem; } .wb-title .badge { font-style: normal; font-size: .56rem; font-weight: 800; letter-spacing: .06em; padding: .12rem .36rem; border-radius: 999px; background: linear-gradient(135deg, #156f52, #1c8a64); color: #fff; box-shadow: 0 2px 8px rgba(23,117,90,.28); } .wb-chain { font-size: .64rem; font-weight: 700; letter-spacing: .05em; color: var(--jade-deep); background: rgba(23,117,90,.10); padding: .16rem .46rem; border-radius: 999px; white-space: nowrap; } .wb-addr { margin-top: .5rem; font-family: 'Figtree', ui-monospace, monospace; font-size: 1rem; font-weight: 800; letter-spacing: .02em; color: var(--ink-2, #24343c); word-break: break-all; } .wb-addr.is-off { color: var(--ink-3, #6b7c84); font-weight: 700; font-size: .88rem; } .wb-addr.is-on { color: var(--jade-deep); } .wb-balance { margin-top: .7rem; display: flex; align-items: center; gap: .5rem; padding: .6rem .72rem; border-radius: 14px; background: rgba(255,255,255,.66); border: 1px dashed rgba(23,117,90,.30); } .wb-balance.is-error { border-color: rgba(190,58,58,.42); } .wb-balance-label { font-size: .68rem; font-weight: 700; color: var(--ink-3, #6b7c84); letter-spacing: .05em; display: inline-flex; align-items: center; gap: .3rem; } .wb-balance-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #1c8a64, #2fb27f); box-shadow: 0 0 0 3px rgba(31,138,100,.16); } .wb-balance-num { font-family: 'Syne', 'Figtree', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--jade-deep); letter-spacing: .01em; line-height: 1; } .wb-balance-num.is-err { color: #be3a3a; } .wb-refresh { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(23,117,90,.24); background: #fff; color: var(--jade-deep); font-size: .92rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .wb-refresh:active { transform: rotate(180deg); } .wb-refresh:disabled { opacity: .45; cursor: wait; } /* —— 已绑定钱包列表（个人中心） —— */ .bound-wallet-box { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius, 12px) - 2px); padding: 0.78rem 0.86rem; margin-top: 0.7rem; box-shadow: 0 1px 2px rgba(20, 70, 55, 0.05), 0 6px 18px -10px rgba(20, 70, 55, 0.18); } .bound-wallet-box strong { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; } .bound-wallet-box .meta { font-size: 0.78rem; color: var(--text-dim, #888); margin: 0.35rem 0; } .bound-wallet-list { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .bound-wallet-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line, rgba(128, 128, 128, 0.25)); border-radius: calc(var(--radius, 12px) - 6px); background: rgba(23, 117, 90, 0.04); font-size: 0.8rem; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .bound-wallet-item.flash { animation: bwFlash 1.6s ease; } @keyframes bwFlash { 0%, 55% { background: rgba(255, 209, 102, .34); border-color: #f5b73f; box-shadow: 0 0 0 3px rgba(255, 209, 102, .35); } 100% { background: rgba(23, 117, 90, 0.04); } } .bound-wallet-item .bw-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .bound-wallet-item .bw-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; word-break: break-all; color: var(--ink, #15303a); cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color .18s ease, color .18s ease; } .bound-wallet-item .bw-addr:hover { border-bottom-color: var(--jade, #177a5a); color: var(--jade-deep, #0e5c44); } .bound-wallet-item .bw-chain { flex: none; font-size: 0.6rem; font-weight: 800; letter-spacing: .04em; color: var(--jade-deep, #0e5c44); background: rgba(27, 122, 90, 0.1); padding: .1rem .4rem; border-radius: 999px; } .bound-wallet-item .bw-foot { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .bound-wallet-item .bw-meta, .bound-wallet-item .bw-time { color: var(--text-dim, #888); font-size: 0.68rem; } .bound-wallet-item .bw-actions { margin-left: auto; display: flex; gap: 0.3rem; flex-wrap: wrap; } .bw-btn { border: 1px solid var(--line, rgba(128, 128, 128, 0.25)); background: #fff; color: var(--ink, #15303a); font-size: 0.66rem; font-weight: 800; padding: 0.22rem 0.5rem; border-radius: 999px; cursor: pointer; transition: all .18s ease; } .bw-btn:hover { border-color: var(--jade, #177a5a); color: var(--jade-deep, #0e5c44); } .bw-btn-primary { border-color: rgba(27, 122, 90, .35); color: var(--jade-deep, #0e5c44); background: rgba(27, 122, 90, .08); } .bw-btn-primary:hover { background: var(--jade, #177a5a); color: #fff; } .bw-btn-danger { border-color: rgba(196, 92, 38, .35); color: #8a3d14; background: rgba(196, 92, 38, .06); } .bw-btn-danger:hover { background: #c45c26; color: #fff; } .bw-btn-lock { opacity: .55; cursor: not-allowed; border-color: rgba(128, 128, 128, .3); color: var(--text-dim, #888); background: transparent; } .badge-primary { background: linear-gradient(135deg, #f5b73f, #e09a1a) !important; color: #4a2f00 !important; box-shadow: 0 1px 4px rgba(224, 154, 26, .4); } .badge-plain { background: rgba(90, 109, 118, .12) !important; color: #5a6d76 !important; } /* 「使用中」徽标：当前连接的钱包（个人中心绑定列表） */ .badge-inuse { background: linear-gradient(135deg, #2f9e6e, #177a5a) !important; color: #fff !important; box-shadow: 0 1px 4px rgba(23, 122, 90, .35); } .bw-empty { color: var(--text-dim, #888); font-style: italic; } .bw-err { color: #b3261e; } /* 阻断弹窗：钱包未绑定当前账号的说明与已绑定钱包列表 */ .ny-body { margin: 0 0 .5rem; line-height: 1.55; } .ny-body:last-of-type { margin-bottom: .25rem; } .ny-addr, .ny-item { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .ny-addr { color: #b3261e; font-weight: 600; word-break: break-all; } .ny-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; } .ny-item { display: inline-block; padding: .25rem .55rem; border-radius: 999px; background: rgba(90, 109, 118, .12); color: #5a6d76; font-size: .82rem; } .ny-item.is-primary { background: rgba(224, 154, 26, .18); color: #8a5b00; border: 1px solid rgba(224, 154, 26, .4); } .ny-none { color: var(--text-dim, #888); font-style: italic; } /* 引导绑定：绑定钱包按钮脉冲高亮 */ .pulse { animation: pulseGlow 1.1s ease-in-out 2; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 154, 26, 0); } 50% { box-shadow: 0 0 0 7px rgba(224, 154, 26, .5); } } /* 钱包环境引导（未检测到钱包 / 已就绪可绑定） */ .wallet-guide { margin-top: 0.6rem; padding: 0.6rem 0.7rem; border-radius: calc(var(--radius, 12px) - 4px); font-size: 0.76rem; line-height: 1.5; border: 1px dashed; } .wallet-guide.is-warn { color: #8a3d14; border-color: rgba(196, 92, 38, .4); background: rgba(196, 92, 38, .06); } .wallet-guide.is-ok { color: var(--jade-deep, #0e5c44); border-color: rgba(27, 122, 90, .4); background: rgba(27, 122, 90, .06); } :root[data-theme='night'] .bound-wallet-box { background: rgba(22, 50, 42, 0.92); border-color: rgba(90, 200, 160, 0.20); } :root[data-theme='night'] .bound-wallet-item { background: rgba(90, 200, 160, 0.06); border-color: rgba(90, 200, 160, 0.18); } :root[data-theme='night'] .bound-wallet-item.flash { animation: bwFlashNight 1.6s ease; } @keyframes bwFlashNight { 0%, 55% { background: rgba(255, 209, 102, .28); border-color: #d9a83c; box-shadow: 0 0 0 3px rgba(255, 209, 102, .25); } 100% { background: rgba(90, 200, 160, 0.06); } } :root[data-theme='night'] .bound-wallet-item .bw-meta, :root[data-theme='night'] .bound-wallet-item .bw-time { color: #5ccf9a; } :root[data-theme='night'] .bound-wallet-item .bw-addr { color: rgba(232, 241, 239, .92); } :root[data-theme='night'] .bw-btn { background: rgba(232, 241, 239, .06); color: rgba(232, 241, 239, .85); border-color: rgba(232, 241, 239, .22); } :root[data-theme='night'] .bw-btn-primary { background: rgba(90, 200, 160, .14); color: #5ccf9a; border-color: rgba(90, 200, 160, .4); } :root[data-theme='night'] .bw-btn-danger { background: rgba(196, 92, 38, .14); color: #ffb98a; border-color: rgba(196, 92, 38, .4); } :root[data-theme='night'] .bw-btn-lock { color: rgba(232, 241, 239, .45); background: transparent; } :root[data-theme='night'] .wallet-guide.is-warn { color: #ffb98a; border-color: rgba(196, 92, 38, .4); background: rgba(196, 92, 38, .12); } :root[data-theme='night'] .wallet-guide.is-ok { color: #5ccf9a; border-color: rgba(90, 200, 160, .4); background: rgba(90, 200, 160, .1); } :root[data-theme='night'] .wallet-box { background: linear-gradient(150deg, rgba(22,50,42,.92), rgba(15,36,30,.95)); border-color: rgba(90,200,160,.20); } :root[data-theme='night'] .wallet-box.is-connected { border-color: rgba(90,200,160,.34); background: linear-gradient(150deg, rgba(24,60,49,.94), rgba(16,42,34,.96)); } :root[data-theme='night'] .wb-balance { background: rgba(255,255,255,.05); border-color: rgba(90,200,160,.24); } :root[data-theme='night'] .wb-refresh { background: rgba(255,255,255,.08); color: #8fe3c0; border-color: rgba(90,200,160,.3); } /* —— 订单卡暗色适配 —— */ :root[data-theme='night'] .ord-card, :root[data-theme='galaxy'] .ord-card { background: rgba(255,255,255,.05); border-color: rgba(232,241,239,.14); } :root[data-theme='night'] .ord-card-top b.ord-no, :root[data-theme='galaxy'] .ord-card-top b.ord-no { color: rgba(232,241,239,.55); } :root[data-theme='night'] .ord-name, :root[data-theme='galaxy'] .ord-name { color: #f2f7f5; } :root[data-theme='night'] .ord-sub, :root[data-theme='galaxy'] .ord-sub { color: rgba(232,241,239,.5); } :root[data-theme='night'] .ord-sub b, :root[data-theme='galaxy'] .ord-sub b { color: rgba(232,241,239,.72); } :root[data-theme='night'] .ord-time, :root[data-theme='galaxy'] .ord-time { color: rgba(232,241,239,.58); } :root[data-theme='night'] .ord-amount small, :root[data-theme='galaxy'] .ord-amount small { color: rgba(232,241,239,.48); } :root[data-theme='night'] .ord-card-foot, :root[data-theme='galaxy'] .ord-card-foot { border-top-color: rgba(232,241,239,.12); } :root[data-theme='night'] .ord-arrow, :root[data-theme='galaxy'] .ord-arrow { color: rgba(232,241,239,.35); } :root[data-theme='night'] .ord-card:hover, :root[data-theme='galaxy'] .ord-card:hover { border-color: rgba(90,200,160,.45); } /* —— 快捷入口图标底色 —— */ .quick-cell .quick-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 15px; background: linear-gradient(150deg, rgba(23,117,90,.10), rgba(200,162,75,.12)); border: 1px solid rgba(23,117,90,.10); font-size: 1.22rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transition: transform .25s ease, box-shadow .25s ease; } .quick-cell:hover .quick-ic { box-shadow: 0 6px 16px rgba(23,117,90,.18); } .quick-cell:active .quick-ic { transform: scale(.9); } :root[data-theme='night'] .quick-cell .quick-ic { background: linear-gradient(150deg, rgba(90,200,160,.12), rgba(200,162,75,.10)); border-color: rgba(90,200,160,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* —— 个人中心指标数字字体统一 —— */ .me-metrics em { font-family: 'Syne', 'Figtree', sans-serif; } /* —— 表单聚焦环（完善信息等） —— */ .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--jade-mid, #1c8a64); box-shadow: 0 0 0 4px rgba(23,117,90,.12); background: #fff; } :root[data-theme='night'] .field input:focus, :root[data-theme='night'] .field textarea:focus, :root[data-theme='night'] .field select:focus { background: rgba(255,255,255,.07); box-shadow: 0 0 0 4px rgba(90,200,160,.14); } /* —— 全局微动效：我的页卡片 hover 轻浮起 —— */ @media (hover: hover) { .ship-box, .wallet-box, .menu, .quick-cell { transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .ship-box:hover, .menu:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(23,117,90,.14); } } /* —— 页面标题渐变 —— */ .page-head h1 { background: linear-gradient(120deg, #0e7a58, #1c8a64 60%, #b98a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } :root[data-theme='night'] .page-head h1 { background: linear-gradient(120deg, #57d8a8, #8fe3c0 60%, #ffd98a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* —— 横幅精致化 —— */ .banner { border-radius: 14px; border: 1px solid rgba(23,117,90,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } .banner.is-warn { border-color: rgba(196,92,38,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } /* ========================================================= v0.4.83 · 多主题（玫瑰/森林/星云/鎏金）+ 语言切换浮标 ========================================================= */ /* —— 星云（深色）主题统一适配：复用暗夜观感 —— */ :root[data-theme='galaxy'] .wallet-box, :root[data-theme='galaxy'] .ship-box, :root[data-theme='galaxy'] .canvas-card, :root[data-theme='galaxy'] .card, :root[data-theme='galaxy'] .shop-section, :root[data-theme='galaxy'] .team-hero, :root[data-theme='galaxy'] .asset-hero, :root[data-theme='galaxy'] .quick-grid, :root[data-theme='galaxy'] .quick-cell, :root[data-theme='galaxy'] .menu li, :root[data-theme='galaxy'] .sup-panel { background: var(--card); } :root[data-theme='galaxy'] .tabbar { background: rgba(20, 17, 42, 0.92); border-top-color: rgba(230, 228, 255, 0.12); } :root[data-theme='galaxy'] .ship-grid .field, :root[data-theme='galaxy'] .field input, :root[data-theme='galaxy'] .field select, :root[data-theme='galaxy'] .field textarea { background: rgba(255, 255, 255, 0.05); border-color: rgba(230, 228, 255, 0.16); color: var(--ink); } :root[data-theme='galaxy'] .field input:focus, :root[data-theme='galaxy'] .field textarea:focus, :root[data-theme='galaxy'] .field select:focus { background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(154, 125, 216, 0.25); } :root[data-theme='galaxy'] .banner { background: rgba(230, 228, 255, 0.08); color: var(--ink); } :root[data-theme='galaxy'] .meta, :root[data-theme='galaxy'] .field-hint, :root[data-theme='galaxy'] .form-group-title { color: rgba(230, 228, 255, 0.6); } :root[data-theme='galaxy'] .shop-avatar { background: rgba(255, 255, 255, 0.08); border-color: rgba(230, 228, 255, 0.2); } :root[data-theme='galaxy'] .wallet-box.is-connected { background: linear-gradient(135deg, rgba(122, 95, 224, 0.32), rgba(154, 125, 216, 0.2)); } :root[data-theme='galaxy'] .wb-balance { background: rgba(255, 255, 255, 0.06); border-color: rgba(154, 125, 216, 0.3); } :root[data-theme='galaxy'] .wb-refresh { background: rgba(255, 255, 255, 0.09); color: #c4b1ff; border-color: rgba(154, 125, 216, 0.32); } :root[data-theme='galaxy'] .page-head h1 { background: linear-gradient(120deg, #a58cf5, #c4b1ff 55%, #ffd98a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme='galaxy'] .sku-card, :root[data-theme='galaxy'] .asset-pill, :root[data-theme='galaxy'] .complete-card, :root[data-theme='galaxy'] .side-card, :root[data-theme='galaxy'] .card.soft { background: var(--card); } :root[data-theme='galaxy'] .skel-item, :root[data-theme='galaxy'] .empty-ico { background: rgba(255, 255, 255, 0.06); } :root[data-theme='galaxy'] .skel-line { background: rgba(255, 255, 255, 0.08); } :root[data-theme='galaxy'] .quick-cell .quick-ic { background: linear-gradient(135deg, rgba(122, 95, 224, 0.4), rgba(154, 125, 216, 0.28)); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); } :root[data-theme='galaxy'] body::after { opacity: 0.4; } /* —— 玫瑰 / 森林 / 鎏金（浅色）主题：点缀主色即可，卡片沿用默认 —— */ :root[data-theme='rose'] .page-head h1 { background: linear-gradient(120deg, #b23a5a, #e0668a 60%, #e0b54a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme='forest'] .page-head h1 { background: linear-gradient(120deg, #2f6b3a, #5a9a5f 60%, #7ab06a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme='gold'] .page-head h1 { background: linear-gradient(120deg, #a97c1f, #e0b54a 55%, #8a6316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme='rose'] .quick-cell .quick-ic { background: linear-gradient(135deg, rgba(178,58,90,.22), rgba(224,102,138,.14)); } :root[data-theme='forest'] .quick-cell .quick-ic { background: linear-gradient(135deg, rgba(47,107,58,.22), rgba(90,154,95,.14)); } :root[data-theme='gold'] .quick-cell .quick-ic { background: linear-gradient(135deg, rgba(169,124,31,.22), rgba(224,181,74,.14)); } /* —— 主题选择面板精致化（玫瑰/森林/星云/鎏金 色板微调） —— */ :root[data-theme='galaxy'] .theme-sheet { background: rgba(24, 20, 46, 0.97); border-color: rgba(154, 125, 216, 0.25); } :root[data-theme='galaxy'] .theme-swatch b { color: #e6e4ff; } :root[data-theme='galaxy'] .theme-swatch em { color: rgba(230, 228, 255, 0.6); } /* ════════════════════════════════════════════════════════════════ v0.4.90 · 精致紧凑层 (Polish & Compact) 全局：卡片更精致、字体更舒服、布局更紧凑，8 主题通用 ════════════════════════════════════════════════════════════════ */ /* —— A. 全局字体与渲染 —— */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1; letter-spacing: 0.01em; } h1, h2, h3, .display, .brand, .asset-amount, .price, .me-metrics em, .lb-mid em, .team-hero em, .side-card .kv strong, .leg em, .wb-balance-num, .ord-amount, .ck-confirm-amount strong { font-feature-settings: 'tnum' 1, 'lnum' 1; } em, i, .amount, .price, .meta strong, .asset-metrics em, .kv strong, .leg em, .leg-stats em, .lb-side em, .lb-units em { font-variant-numeric: tabular-nums; } /* —— B. 布局紧凑（壳 / 页头 / 区块间距收紧） —— */ .shell { gap: 0.72rem; padding: 0.85rem 0.85rem 1.1rem; } /* 底部 tabbar 遮挡修复：tab 页留白必须 ≥ 导航高度，不被上方 .shell 简写覆盖 */ .shell-tabs { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.1rem); } .page-head { padding: 0.1rem 0 0.28rem; margin-bottom: 0.15rem; } .page-head h1 { line-height: 1.18; } .page-head .meta { margin-top: 0.08rem; } .sec-title { margin: 0.18rem 0 0.42rem; letter-spacing: 0.02em; } .shop-shell { gap: 0.72rem; } .section { margin-top: 0.1rem; } .section-title { margin: 0.25rem 0 0.4rem; } .shop-cats { gap: 0.42rem; margin: 0.15rem 0 0.2rem; } .shop-cats button { padding: 0.34rem 0.78rem; } .banner { padding: 0.56rem 0.78rem; margin-bottom: 0.2rem; border-radius: var(--radius); } .hint { font-size: 0.72rem; line-height: 1.55; } /* —— C. 卡片基础精化 —— */ .card, .ship-box, .side-card, .canvas-card, .asset-hero, .team-hero, .auth-card, .wallet-box, .profile-card, .ord-detail-head { box-shadow: 0 1px 2px rgba(20, 70, 55, 0.05), 0 6px 18px -10px rgba(20, 70, 55, 0.18); } .card { padding: 0.78rem 0.86rem; border-radius: calc(var(--radius) - 2px); } .card.soft { padding: 0.78rem 0.86rem; } .card > strong, .card.soft > strong, .ship-box-head, .side-card > header, .canvas-head { letter-spacing: 0.015em; } .card > strong, .card.soft > strong { font-size: 0.82rem; } .card > strong .badge, .card.soft > strong .badge { font-size: 0.66rem; margin-left: 0.3rem; } .card .kv, .side-card .kv { padding: 0.42rem 0 0.1rem; } .card .kv + .kv { border-top: 1px dashed var(--line); margin-top: 0.32rem; padding-top: 0.32rem; } .card .meta { font-size: 0.72rem; } /* —— D. 首页/商城 —— */ .sku-grid { gap: 0.62rem; } .sku-card { border-radius: calc(var(--radius) - 3px); } .sku-card .sku-body { padding: 0.55rem 0.62rem 0.66rem; } .sku-card .sku-blurb { margin-bottom: 0.2rem; } .sku-card .sku-name { font-size: 0.86rem; line-height: 1.25; } .sku-card .price { font-size: 1.1rem; } .sku-card .sku-cta { padding: 0.38rem 0.68rem; } .sku-card:hover { transform: translateY(-2px); } .sku-card:active { transform: translateY(0) scale(0.99); } .shop-benefits { gap: 0.5rem; } .shop-benefits article { padding: 0.66rem 0.78rem; border-radius: calc(var(--radius) - 4px); } .shop-benefits b { font-size: 0.8rem; } .shop-benefits span { font-size: 0.68rem; } .shop-benefits .sb-ico { width: 1.9rem; height: 1.9rem; border-radius: 11px; } .shop-notice { font-size: 0.72rem; padding: 0.5rem 0.7rem; } .sh-chip { font-size: 0.66rem; letter-spacing: 0.02em; } /* —— E. 我的 / 钱包 —— */ .me-hero { padding: 0.95rem 0.9rem 0.85rem; border-radius: calc(var(--radius) + 2px); } .me-hero-top { gap: 0.68rem; } .me-hero-top .avatar { width: 46px; height: 46px; } .me-id .me-name { font-size: 1rem; line-height: 1.2; } .me-id { gap: 0.28rem; } .star-chip { padding: 0.24rem 0.5rem; font-size: 0.68rem; } .me-metrics { margin-top: 0.7rem; padding-top: 0.62rem; gap: 0.32rem; } .me-metrics em { font-size: 1.16rem; } .me-metrics span { font-size: 0.62rem; } .me-hero .meta { margin-top: 0.55rem; } .quick-grid { gap: 0.5rem; margin-top: 0.5rem; } .quick-cell { padding: 0.62rem 0.3rem; border-radius: calc(var(--radius) - 4px); gap: 0.22rem; } .quick-cell .quick-ic { font-size: 1.3rem; } .quick-cell b { font-size: 0.74rem; } .quick-cell em { font-size: 0.6rem; } .menu { gap: 0.38rem; margin-top: 0.45rem; } .menu li { border-radius: calc(var(--radius) - 4px); padding: 0.66rem 0.82rem; } .menu li > a, .menu li > span { font-size: 0.8rem; gap: 0.3rem; } .menu li .meta { font-size: 0.66rem; } .wallet-box { padding: 0.78rem 0.86rem; border-radius: calc(var(--radius) - 2px); } .wb-head { margin-bottom: 0.42rem; } .wb-title { font-size: 0.8rem; letter-spacing: 0.02em; } .wb-addr { font-size: 0.72rem; } .wb-balance { margin-top: 0.4rem; } .wb-balance-num { font-size: 1.28rem; } .wallet-box .btn-row { margin-top: 0.5rem; } /* —— F. 团队 —— */ .team-hero { padding: 0.8rem 0.7rem 0.75rem; border-radius: calc(var(--radius) - 2px); } .leg-balance { gap: 0.3rem; } .leg-balance .lb-mid .star-chip { font-size: 0.86rem; } .leg-stats { margin-top: 0.55rem; gap: 0.35rem; } .leg-stats .leg { padding: 0.42rem 0.5rem; border-radius: calc(var(--radius) - 5px); } .star-progress { margin-top: 0.6rem; } .star-progress .sp-head { margin-bottom: 0.32rem; } .star-progress .sp-bar { height: 8px; border-radius: 99px; } .canvas-card { padding: 0.68rem 0.72rem 0.7rem; border-radius: calc(var(--radius) - 2px); } .canvas-head { margin-bottom: 0.5rem; } .tc-legend { padding-top: 0.45rem; margin-top: 0.45rem; gap: 0.7rem; } .dual-pane { gap: 0.55rem; } .side-card { padding: 0.72rem 0.78rem; border-radius: calc(var(--radius) - 2px); } .side-card > header { font-size: 0.78rem; } .side-card .kv { padding: 0.35rem 0 0; font-size: 0.74rem; } .seg { margin: 0.1rem 0 0.4rem; } .seg-btn { padding: 0.4rem 0.7rem; font-size: 0.76rem; } /* —— G. 奖励 —— */ .asset-hero { padding: 0.9rem 0.95rem 0.85rem; border-radius: calc(var(--radius) + 2px); } .asset-hero .asset-amount { font-size: 1.6rem; line-height: 1.1; margin: 0.1rem 0 0.55rem; } .asset-metrics { gap: 0.3rem; } .asset-metrics > div { padding: 0.4rem 0.35rem; border-radius: calc(var(--radius) - 6px); } .asset-metrics em { font-size: 0.98rem; } .asset-metrics span { font-size: 0.66rem; } .subj-grid { gap: 0.5rem; } .subj-grid .subj-card { padding: 0.5rem 0.6rem; border-radius: calc(var(--radius) - 5px); } .order-list li { padding: 0.6rem 0.1rem; } .order-list li.meta { padding: 0.5rem 0.2rem; } .order-list .ord-name { font-size: 0.8rem; } /* —— H. 订单 —— */ .ord-filter { gap: 0.3rem; padding: 0.32rem; border-radius: calc(var(--radius) - 4px); margin-bottom: 0.5rem; } .ord-filter .chip { padding: 0.36rem 0.62rem; font-size: 0.72rem; } .ord-card-list { gap: 0.4rem; } .ord-card-list > li { padding: 0.6rem 0.7rem; } .ord-card-top b.ord-no { font-size: 0.66rem; } .ord-name { font-size: 0.8rem; } .ord-ic { width: 2.3rem; height: 2.3rem; font-size: 1.2rem; } .ord-amount { font-size: 0.86rem; } .ord-badge { font-size: 0.64rem; padding: 0.2rem 0.48rem; } .ord-more { padding-top: 0.3rem; } .ord-detail-head { padding: 0.6rem 0.7rem; border-radius: calc(var(--radius) - 2px); } /* —— I. 档案 / 结算 / 登录 —— */ .ship-box { padding: 0.85rem 0.9rem; border-radius: calc(var(--radius) - 2px); } .ship-box-head { margin-bottom: 0.5rem; } .profile-progress { height: 6px; border-radius: 99px; margin-bottom: 0.7rem; } .ship-grid { gap: 0.7rem; } .form-group { gap: 0.34rem; } .form-group-title { font-size: 0.76rem; letter-spacing: 0.02em; margin: 0.15rem 0 0.1rem; } .field { border-radius: calc(var(--radius) - 4px); padding: 0.52rem 0.6rem; gap: 0.24rem; } .field .f-ico { font-size: 0.9rem; } .field em { font-size: 0.66rem; } .field input, .field select { font-size: 0.84rem; } .field-hint { font-size: 0.62rem; } .btn-row { gap: 0.5rem; margin-top: 0.55rem; } .btn { padding: 0.62rem 1rem; font-size: 0.8rem; border-radius: calc(var(--radius) - 3px); } .btn-primary, .btn-secondary { box-shadow: 0 4px 12px -6px rgba(23, 117, 90, 0.4); } .btn:active { transform: scale(0.98); } .pay-tiers { gap: 0.4rem; } .pay-card { padding: 0.56rem 0.66rem; border-radius: 12px; gap: 0.62rem; } .pay-card-ico { font-size: 1.22rem; } .pay-card-body b { font-size: 0.8rem; } .pay-card-body small { font-size: 0.62rem; } .pay-badge { font-size: 0.6rem; } .ck-guide { padding: 0.6rem 0.72rem; border-radius: calc(var(--radius) - 2px); margin: 0.05rem 0; } .auth-card { padding: 1rem 1.05rem 1.1rem; } .auth-tabs { gap: 0.28rem; padding: 0.3rem; border-radius: calc(var(--radius) - 3px); } .auth-tab { padding: 0.4rem 0.5rem; font-size: 0.72rem; } .qr-wrap { padding: 0.4rem; } .steps { gap: 0.35rem; margin: 0.4rem 0 0.2rem; } .steps li { font-size: 0.76rem; } .code-row { gap: 0.5rem; } .auth-dev { margin-top: 0.5rem; } /* —— J. 弹层 / 浮标 / 精致微调 —— */ .theme-sheet { border-radius: 18px; } .theme-sheet .theme-grid { gap: 0.5rem; padding: 0.7rem; } .theme-swatch { padding: 0.5rem; border-radius: 12px; } .theme-swatch b { font-size: 0.76rem; } .theme-swatch em { font-size: 0.62rem; } .theme-sheet-head { padding: 0.7rem 0.8rem 0.4rem; } .ck-confirm-card { border-radius: 20px; padding: 0.9rem; } .node-panel .np-sheet { border-radius: 18px; padding: 0.9rem; } .sheet-card { border-radius: 18px; padding: 0.9rem; } /* —— K. 深色主题（night / galaxy）适配紧凑层 —— */ :root[data-theme='night'] .card, :root[data-theme='galaxy'] .card, :root[data-theme='night'] .ship-box, :root[data-theme='galaxy'] .ship-box, :root[data-theme='night'] .side-card, :root[data-theme='galaxy'] .side-card, :root[data-theme='night'] .canvas-card, :root[data-theme='galaxy'] .canvas-card, :root[data-theme='night'] .asset-hero, :root[data-theme='galaxy'] .asset-hero, :root[data-theme='night'] .team-hero, :root[data-theme='galaxy'] .team-hero { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 20px -12px rgba(0, 0, 0, 0.5); } :root[data-theme='night'] .card .kv + .kv, :root[data-theme='galaxy'] .card .kv + .kv, :root[data-theme='night'] .side-card .kv + .kv, :root[data-theme='galaxy'] .side-card .kv + .kv { border-top-color: rgba(255, 255, 255, 0.09); } :root[data-theme='night'] .field, :root[data-theme='galaxy'] .field, :root[data-theme='night'] .ord-filter, :root[data-theme='galaxy'] .ord-filter, :root[data-theme='night'] .auth-tabs, :root[data-theme='galaxy'] .auth-tabs { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); } /* —— L. 统一精致化小部件 —— */ .sku-card .sku-tag, .sku-card .sku-off { letter-spacing: 0.03em; } .sku-card .sku-cta { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .sku-card .sku-cta:active { transform: scale(0.96); } .chip.is-active, .seg-btn.is-on, .auth-tab.is-on { font-weight: 700; } .chip, .seg-btn, .auth-tab, .back-chip { -webkit-tap-highlight-color: transparent; } .t-node.is-root, .t-node.is-live { transition: transform 0.2s ease, box-shadow 0.2s ease; } .t-node.is-root:active, .t-node.is-live:active { transform: scale(0.94); } .lb-node, .t-av, .quick-ic { flex: none; } .badge.is-live { animation-duration: 2.2s; } a { transition: color 0.15s ease, opacity 0.15s ease; } .ck-guide-link:hover, .copy-chip:hover { opacity: 0.8; } /* —— M. 触控更精致：滚动条 / 选区 —— */ * { scrollbar-width: thin; } *::-webkit-scrollbar { width: 5px; height: 5px; } *::-webkit-scrollbar-thumb { background: rgba(23, 117, 90, 0.22); border-radius: 99px; } ::selection { background: rgba(23, 117, 90, 0.18); } /* ========================================================= v0.4.91 · 「我的」页重构层（KYC 徽章 / 紧凑钱包条 / 图标化菜单） ========================================================= */ /* —— N. 我的页 · 顶部总览卡 —— */ .me-hero { overflow: hidden; } .me-hero-top { gap: 0.65rem; } .me-hero-top .avatar { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(150deg, var(--jade), #0e7a5c); box-shadow: 0 8px 18px -8px rgba(23, 117, 90, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.18); } .me-hero-top .avatar img { border-radius: 14px; } .me-id { gap: 0.3rem; } .me-id .me-name { font-size: 1.05rem; letter-spacing: 0.02em; } .me-id .me-code { font-size: 0.72rem; } /* 顶部徽章组：KYC + 星级 */ .me-badges { display: flex; align-items: center; gap: 0.34rem; margin-top: 0.05rem; } .me-badges .star-chip { font-size: 0.64rem; padding: 0.22rem 0.55rem; } /* KYC 状态徽章 */ .kyc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; background: rgba(184, 147, 44, 0.12); color: #a8841f; box-shadow: inset 0 0 0 1px rgba(184, 147, 44, 0.25); white-space: nowrap; } .kyc-chip.is-on { background: rgba(23, 117, 90, 0.1); color: var(--jade-deep, #17755a); box-shadow: inset 0 0 0 1px rgba(23, 117, 90, 0.28); } .kyc-chip.is-on::before { content: '✓'; font-weight: 900; font-size: 0.66rem; } .kyc-chip-sm { padding: 0.16rem 0.5rem; font-size: 0.58rem; } /* —— O. 我的页 · 指标行 4 列（含 USDT 余额） —— */ .me-metrics { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; } .me-metrics > div { padding: 0.42rem 0.2rem; border-radius: calc(var(--radius) - 6px); } .me-metrics em { font-size: 0.92rem; } .me-metrics span { font-size: 0.6rem; } /* —— P. 钱包紧凑条（替代整块大卡） —— */ .wallet-box.wallet-strip { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0.4rem 0.7rem; padding: 0.62rem 0.78rem; border-radius: calc(var(--radius) - 2px); } .wallet-strip .ws-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; background: linear-gradient(150deg, var(--jade), #0e7a5c); color: #fff; box-shadow: 0 6px 14px -6px rgba(23, 117, 90, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.15); } .wallet-strip .ws-main { display: flex; flex-direction: column; gap: 0.16rem; min-width: 0; } .wallet-strip .ws-title { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: var(--ink, #14211f); } .wallet-strip .ws-title .badge { font-size: 0.54rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.1rem 0.38rem; border-radius: 999px; background: rgba(23, 117, 90, 0.12); color: var(--jade-deep, #17755a); box-shadow: inset 0 0 0 1px rgba(23, 117, 90, 0.2); } .wallet-strip .ws-addr { font-family: 'Figtree', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.01em; color: var(--jade-deep, #17755a); /* 完整显示钱包地址：允许在状态条内换行，而非截断成省略号 */ white-space: normal; word-break: break-all; overflow-wrap: anywhere; line-height: 1.25; } .wallet-strip .ws-addr.is-off { color: var(--ink-3, #6b7c84); font-weight: 600; font-size: 0.7rem; } .wallet-strip .ws-addr.is-on::before { content: '●'; font-size: 0.62rem; margin-right: 0.32rem; color: var(--jade, #17755a); } .wallet-strip .ws-side { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 0.28rem; text-align: right; min-width: 0; } .wallet-strip .ws-balance { display: flex; align-items: center; gap: 0.35rem; } .wallet-strip .ws-balance b { font-family: 'Syne', 'Figtree', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; color: var(--jade-deep, #17755a); font-variant-numeric: tabular-nums; } .wallet-strip .ws-balance .wb-refresh { width: 24px; height: 24px; margin-left: 0; font-size: 0.78rem; border-radius: 50%; } .wallet-strip .ws-chain { font-size: 0.56rem; color: var(--ink-3, #6b7c84); letter-spacing: 0.02em; } .wallet-strip .ws-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.05rem; } .wallet-strip .btn-mini { padding: 0.32rem 0.82rem; font-size: 0.7rem; font-weight: 800; border-radius: 999px; box-shadow: none; } .wallet-strip .btn-mini.btn-primary { box-shadow: 0 4px 10px -6px rgba(23, 117, 90, 0.45); } /* —— Q. 我的页 · 菜单图标化 —— */ .menu .menu-item { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; } .menu-ico { width: 30px; height: 30px; flex: none; border-radius: 10px; display: inline-grid; place-items: center; font-size: 0.92rem; background: linear-gradient(135deg, #e9f7f1, #d9efe6); box-shadow: inset 0 0 0 1px rgba(27, 122, 90, 0.1); } .menu li > a, .menu li > span { gap: 0.55rem; } .menu .meta { white-space: nowrap; } /* —— R. 深色适配（v0.4.91 新增元素） —— */ :root[data-theme='night'] .menu-ico, :root[data-theme='galaxy'] .menu-ico { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } :root[data-theme='night'] .kyc-chip, :root[data-theme='galaxy'] .kyc-chip { background: rgba(230, 180, 60, 0.1); color: #d9b453; box-shadow: inset 0 0 0 1px rgba(230, 180, 60, 0.25); } :root[data-theme='night'] .kyc-chip.is-on, :root[data-theme='galaxy'] .kyc-chip.is-on { background: rgba(60, 200, 150, 0.1); color: #7fe0b8; box-shadow: inset 0 0 0 1px rgba(60, 200, 150, 0.25); } :root[data-theme='night'] .wallet-strip .ws-title, :root[data-theme='galaxy'] .wallet-strip .ws-title { color: rgba(255, 255, 255, 0.9); } :root[data-theme='night'] .wallet-strip .ws-ico, :root[data-theme='galaxy'] .wallet-strip .ws-ico { background: linear-gradient(150deg, #1b8a66, #10614b); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } :root[data-theme='night'] .wallet-strip .ws-addr, :root[data-theme='galaxy'] .wallet-strip .ws-addr { color: #7fe0b8; } :root[data-theme='night'] .wallet-strip .ws-addr.is-off, :root[data-theme='galaxy'] .wallet-strip .ws-addr.is-off { color: rgba(255, 255, 255, 0.4); } /* —— S. 小屏适配 —— */ @media (max-width: 359px) { .me-metrics { grid-template-columns: repeat(2, 1fr); } .wallet-strip .ws-balance b { font-size: 0.9rem; } } /* ════════════════════════════════════════════════════════════════ v0.4.92 · 设置面板层（主题 + 语言 合并，个人中心「设置」v58） 1) 设置面板容器 2) 分区排版 3) 主题色板 3 列 4) 语言分段（中 / EN） 5) 深色主题与各主题适配 ════════════════════════════════════════════════════════════════ */ /* —— 1. 面板容器（弹窗：居中卡片 + 半透明遮罩） —— */ .settings-sheet { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: 1.1rem; -webkit-tap-highlight-color: transparent; } .settings-sheet.show { display: flex; } .settings-sheet::before { content: ''; position: fixed; inset: 0; background: rgba(11, 31, 42, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: sheetFade .18s ease; } .settings-sheet[hidden] { display: none !important; } .settings-sheet .ss-card { position: relative; width: 100%; max-width: 430px; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 22px 48px -20px rgba(11, 31, 42, 0.5); animation: sheetUp .22s cubic-bezier(.2,.9,.3,1); } @keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } } @keyframes sheetUp { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* —— 2. 面板头部 —— */ .settings-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 0.9rem 0.5rem; } .settings-sheet-head .st-title { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 800; color: var(--ink); } .settings-sheet-head .st-title i { font-style: normal; font-size: 1rem; } .settings-sheet-head .link-quiet { appearance: none; border: none; background: none; font-size: 0.72rem; font-weight: 700; color: #8ba29b; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 8px; } .settings-sheet-head .link-quiet:active { background: rgba(27, 122, 90, 0.08); } /* —— 3. 分区排版 —— */ .settings-sec { padding: 0.5rem 0.9rem 0.85rem; } .settings-sec + .settings-sec { border-top: 1px dashed var(--line); margin-top: 0.1rem; } .settings-sec-t { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.55rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: #8ba29b; text-transform: uppercase; } .settings-sec-t i { font-style: normal; font-size: 0.82rem; } /* —— 4. 设置面板内主题色板：3 列精致卡 —— */ .settings-sheet .theme-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0; } .settings-sheet .theme-swatch { flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 0.3rem; border-radius: 14px; background: var(--paper); } .settings-sheet .theme-swatch .sw-orb { width: 30px; height: 30px; } .settings-sheet .theme-swatch b { font-size: 0.74rem; } .settings-sheet .theme-swatch em { display: none; } .settings-sheet .theme-swatch.is-on { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(27, 122, 90, 0.15); background: linear-gradient(135deg, #e8f6f0, #d7efe4); } /* —— 5. 语言分段（中 / EN） —— */ .lang-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .lang-opt { appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 14px; padding: 0.65rem 0.5rem 0.55rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; } .lang-opt b { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.02em; color: var(--ink); } .lang-opt em { font-style: normal; font-size: 0.62rem; font-weight: 600; color: #8ba29b; } .lang-opt:active { transform: scale(0.97); } .lang-opt.is-on { border-color: var(--jade); background: linear-gradient(135deg, #e8f6f0, #d7efe4); box-shadow: 0 0 0 2px rgba(27, 122, 90, 0.15); } .lang-opt.is-on b { color: var(--jade-deep); } .lang-opt.is-on em { color: var(--jade); } /* —— 6. 深色主题适配 —— */ :root[data-theme='night'] .settings-sheet, :root[data-theme='galaxy'] .settings-sheet { background: var(--card); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65); } :root[data-theme='night'] .settings-sheet-head .st-title, :root[data-theme='galaxy'] .settings-sheet-head .st-title { color: rgba(255, 255, 255, 0.92); } :root[data-theme='night'] .lang-opt, :root[data-theme='galaxy'] .lang-opt { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme='night'] .lang-opt b, :root[data-theme='galaxy'] .lang-opt b { color: rgba(255, 255, 255, 0.9); } :root[data-theme='night'] .lang-opt.is-on, :root[data-theme='galaxy'] .lang-opt.is-on { background: rgba(60, 200, 150, 0.12); border-color: rgba(60, 200, 150, 0.4); } :root[data-theme='night'] .settings-sheet .theme-swatch.is-on, :root[data-theme='galaxy'] .settings-sheet .theme-swatch.is-on { background: rgba(60, 200, 150, 0.12); box-shadow: 0 0 0 2px rgba(60, 200, 150, 0.2); } /* —— 7. 各主题语言选中态 —— */ :root[data-theme='sun'] .lang-opt.is-on { border-color: #e8821c; background: linear-gradient(135deg, #fdf0e3, #fbe3cd); box-shadow: 0 0 0 2px rgba(232, 130, 28, 0.18); } :root[data-theme='sun'] .lang-opt.is-on b { color: #c05a12; } :root[data-theme='ocean'] .lang-opt.is-on { border-color: #0f86c2; background: linear-gradient(135deg, #e4f3fb, #d3eaf6); box-shadow: 0 0 0 2px rgba(15, 134, 194, 0.18); } :root[data-theme='ocean'] .lang-opt.is-on b { color: #0a5f94; } :root[data-theme='lilac'] .lang-opt.is-on { border-color: #8b5cf6; background: linear-gradient(135deg, #f1ecfd, #e7dcfb); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18); } :root[data-theme='lilac'] .lang-opt.is-on b { color: #6d28d9; } :root[data-theme='rose'] .lang-opt.is-on { border-color: #d54b73; background: linear-gradient(135deg, #fdeef3, #fadde8); box-shadow: 0 0 0 2px rgba(213, 75, 115, 0.18); } :root[data-theme='rose'] .lang-opt.is-on b { color: #b23a5a; } :root[data-theme='forest'] .lang-opt.is-on { border-color: #2f6b3a; background: linear-gradient(135deg, #ebf5ec, #dcecde); box-shadow: 0 0 0 2px rgba(47, 107, 58, 0.18); } :root[data-theme='forest'] .lang-opt.is-on b { color: #1f4d28; } :root[data-theme='gold'] .lang-opt.is-on { border-color: #b8862c; background: linear-gradient(135deg, #fbf4e2, #f6e8c4); box-shadow: 0 0 0 2px rgba(184, 134, 44, 0.18); } :root[data-theme='gold'] .lang-opt.is-on b { color: #8a6316; } :root[data-theme='galaxy'] .lang-opt.is-on { border-color: #9a7dd8; background: linear-gradient(135deg, rgba(154, 125, 216, 0.18), rgba(154, 125, 216, 0.08)); box-shadow: 0 0 0 2px rgba(154, 125, 216, 0.25); } :root[data-theme='galaxy'] .lang-opt.is-on b { color: #c4b1ff; } /* —— v59：KYC 认证面板 —— */ .kyc-row { cursor: pointer; } .kyc-chip.is-clickable { cursor: pointer; } .kyc-state-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.3rem 0 0.2rem; } .kyc-state-cell { background: rgba(27, 122, 90, 0.05); border: 1px solid var(--line); border-radius: 14px; padding: 0.62rem 0.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.25rem; } .kyc-state-cell em { font-style: normal; font-size: 0.62rem; font-weight: 600; color: #8ba29b; } .kyc-state-cell b { font-size: 0.8rem; font-weight: 800; color: var(--ink); white-space: nowrap; } .kyc-state-cell b.is-approved { color: var(--jade-deep); } .kyc-tip { margin: 0.15rem 0 0.1rem; font-size: 0.76rem; line-height: 1.65; color: #6d8581; background: rgba(27, 122, 90, 0.05); border: 1px dashed var(--line); border-radius: 12px; padding: 0.6rem 0.7rem; } :root[data-theme='night'] .kyc-state-cell, :root[data-theme='galaxy'] .kyc-state-cell { background: rgba(255, 255, 255, 0.05); } :root[data-theme='night'] .kyc-state-cell b, :root[data-theme='galaxy'] .kyc-state-cell b { color: rgba(255, 255, 255, 0.92); } :root[data-theme='night'] .kyc-tip, :root[data-theme='galaxy'] .kyc-tip { color: rgba(230, 228, 255, 0.72); } /* —— v70：设置/KYC 弹窗内部卡片布局 —— */ .settings-sheet .ss-card { padding: 0.2rem 0.3rem 0.6rem; } .settings-sheet .ss-card .settings-sheet-head { padding: 0.8rem 0.8rem 0.5rem; } .settings-sheet .ss-card .settings-sec { padding: 0.4rem 0.8rem 0.8rem; } body.sheet-open { overflow: hidden; } /* —— v70：KYC 三态状态值颜色 —— */ .kyc-state-cell b.is-approved { color: var(--jade-deep); } .kyc-state-cell b.is-pending { color: #d99a2b; } .kyc-state-cell b.is-rejected { color: #d9534f; } .kyc-state-cell b.is-idle { color: #8ba29b; } /* —— v70：KYC 状态横幅（审核中 / 驳回原因） —— */ .kyc-banner { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.65rem 0 0.1rem; padding: 0.6rem 0.7rem; border-radius: 12px; font-size: 0.76rem; line-height: 1.6; } .kyc-banner[hidden] { display: none; } .kyc-banner.is-pending { background: rgba(217, 154, 43, 0.1); border: 1px solid rgba(217, 154, 43, 0.3); color: #8a6517; } .kyc-banner.is-rejected { background: rgba(217, 83, 79, 0.08); border: 1px solid rgba(217, 83, 79, 0.28); color: #b0392f; } .kyc-banner i { font-style: normal; line-height: 1.6; } /* —— v70：KYC 已认证资料 —— */ .kyc-profile { display: grid; gap: 0.4rem; margin-top: 0.7rem; } .kyc-profile[hidden] { display: none; } .kyc-profile-item { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.7rem; background: rgba(27, 122, 90, 0.05); border: 1px solid var(--line); border-radius: 12px; font-size: 0.78rem; } .kyc-profile-item em { font-style: normal; font-weight: 600; color: #8ba29b; } .kyc-profile-item b { font-weight: 800; color: var(--ink); letter-spacing: 0.03em; } /* —— v70：KYC 提交表单 —— */ .kyc-form-sec[hidden] { display: none; } .kyc-form { display: grid; gap: 0.6rem; } .kyc-form .field { display: grid; gap: 0.28rem; } .kyc-form .field label { font-size: 0.72rem; font-weight: 700; color: #5a6d76; } .kyc-form .field input, .kyc-form .field select { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(23, 117, 90, 0.16); border-radius: 12px; padding: 0.62rem 0.7rem; font-size: 0.86rem; color: var(--ink); } .kyc-form .field select { appearance: auto; } .kyc-form .field input:focus, .kyc-form .field select:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(27, 122, 90, 0.12); } .kyc-form .field input::placeholder { color: #b6c7c0; } .kyc-note { margin: 0; font-size: 0.72rem; line-height: 1.6; color: #8ba29b; } .nickname-sheet .field label { font-size: 0.72rem; font-weight: 700; color: #5a6d76; } :root[data-theme='night'] .nickname-sheet .field label, :root[data-theme='galaxy'] .nickname-sheet .field label { color: rgba(230, 228, 255, 0.7); } .kyc-form-msg { margin: 0; font-size: 0.74rem; font-weight: 700; color: #d9534f; line-height: 1.5; } .kyc-form-msg[hidden] { display: none; } .btn.is-block { width: 100%; } :root[data-theme='night'] .kyc-profile-item, :root[data-theme='galaxy'] .kyc-profile-item { background: rgba(255, 255, 255, 0.05); } :root[data-theme='night'] .kyc-form .field label, :root[data-theme='galaxy'] .kyc-form .field label { color: rgba(230, 228, 255, 0.7); } :root[data-theme='night'] .kyc-form .field input, :root[data-theme='night'] .kyc-form .field select, :root[data-theme='galaxy'] .kyc-form .field input, :root[data-theme='galaxy'] .kyc-form .field select { background: rgba(255, 255, 255, 0.06); border-color: rgba(230, 228, 255, 0.16); color: var(--ink); } :root[data-theme='night'] .kyc-banner.is-pending { background: rgba(217, 154, 43, 0.14); color: #e5b75c; } :root[data-theme='night'] .kyc-banner.is-rejected { background: rgba(217, 83, 79, 0.14); color: #ef8076; } /* ============ v60 · 我的邀请卡片 ============ */ .invite-card[hidden] { display: none; } .invite-card { margin: 0.5rem 0 0.9rem; padding: 0.9rem 0.95rem; background: linear-gradient(160deg, rgba(27, 122, 90, 0.09), rgba(27, 122, 90, 0.02)); border: 1px solid var(--line); border-radius: 18px; } .invite-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; } .invite-card-head .st-title { font-size: 0.95rem; } .invite-grid { display: grid; grid-template-columns: 1fr 132px; gap: 0.8rem; align-items: center; } .invite-code-line { margin: 0 0 0.55rem; font-size: 0.8rem; color: #6d8581; display: flex; align-items: baseline; gap: 0.5rem; } .invite-code-line b { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; color: var(--jade-deep); } .invite-link-label { display: block; font-size: 0.7rem; font-weight: 600; color: #8ba29b; margin-bottom: 0.35rem; } .invite-link-row { display: flex; gap: 0.45rem; align-items: center; } .invite-link-input { flex: 1; min-width: 0; font-size: 0.7rem; color: var(--ink); background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .invite-link-input:focus { outline: 2px solid rgba(27, 122, 90, 0.35); } .invite-actions { margin-top: 0.6rem; } .invite-hint { margin: 0.55rem 0 0; font-size: 0.7rem; line-height: 1.6; color: #6d8581; } .invite-right { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .invite-right canvas { width: 132px; height: 132px; background: #fff; border-radius: 12px; padding: 4px; border: 1px solid var(--line); } .invite-qr-tip { font-size: 0.65rem; color: #8ba29b; } /* ============ v80 · 邀请卡未激活（只有完成首单，推荐码才生效并开启安置树） ============ */ .invite-status { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; padding: 0.5rem 0.6rem; border: 1px dashed rgba(217, 119, 6, 0.5); border-radius: 12px; background: rgba(217, 119, 6, 0.07); } .invite-status-badge { font-size: 0.75rem; font-weight: 700; color: #b45309; } .invite-status .meta { font-size: 0.7rem; line-height: 1.55; color: #8a6d3b; margin: 0; } .invite-link-input.is-locked { color: #9aa7a2; opacity: 0.85; cursor: not-allowed; } .invite-qr-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; gap: 0.35rem; background: rgba(0, 0, 0, 0.03); border: 1px dashed var(--line); border-radius: 12px; } .invite-qr-lock-ic { font-size: 1.6rem; } ::root[data-theme='night'] .invite-status, ::root[data-theme='galaxy'] .invite-status { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.4); } ::root[data-theme='night'] .invite-status-badge, ::root[data-theme='galaxy'] .invite-status-badge { color: #f0b06a; } ::root[data-theme='night'] .invite-status .meta, ::root[data-theme='galaxy'] .invite-status .meta { color: rgba(230, 228, 255, 0.72); } ::root[data-theme='night'] .invite-qr-locked, ::root[data-theme='galaxy'] .invite-qr-locked { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); } :root[data-theme='night'] .invite-card, :root[data-theme='galaxy'] .invite-card { background: rgba(255, 255, 255, 0.05); } :root[data-theme='night'] .invite-link-input, :root[data-theme='galaxy'] .invite-link-input { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.92); } :root[data-theme='night'] .invite-code-line, :root[data-theme='night'] .invite-hint, :root[data-theme='galaxy'] .invite-code-line, :root[data-theme='galaxy'] .invite-hint { color: rgba(230, 228, 255, 0.72); } :root[data-theme='night'] .invite-link-label, :root[data-theme='night'] .invite-qr-tip, :root[data-theme='galaxy'] .invite-link-label, :root[data-theme='galaxy'] .invite-qr-tip { color: rgba(230, 228, 255, 0.55); } /* ============ v60 · 注册页推荐码提示 ============ */ .ref-hint { margin: 0.1rem 0 0.4rem; padding: 0.5rem 0.65rem; font-size: 0.74rem; line-height: 1.55; color: var(--jade-deep); background: rgba(27, 122, 90, 0.08); border: 1px dashed rgba(27, 122, 90, 0.45); border-radius: 10px; } .ref-hint[hidden] { display: none; } /* ============ v75 · 团队页左右腿统计卡 + 抱单 ============ */ .leg-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .9rem; } .leg-stat-card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: .95rem .9rem .9rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(11, 31, 42, .07); overflow: hidden; } .leg-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .leg-stat-card.is-left::before { background: var(--grad-jade); } .leg-stat-card.is-right::before { background: var(--grad-gold); } .leg-stat-card.is-left { border-top: none; } .leg-stat-card.is-right { border-top: none; } .lsc-head { display: flex; align-items: center; gap: .5rem; } .lsc-badge { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: .82rem; color: #fff; } .leg-stat-card.is-left .lsc-badge { background: var(--grad-jade); box-shadow: 0 5px 12px rgba(15, 143, 102, .35); } .leg-stat-card.is-right .lsc-badge { background: var(--grad-gold); color: #6b4a12; box-shadow: 0 5px 12px rgba(232, 163, 61, .35); } .lsc-head b { font-family: var(--display); font-size: .88rem; letter-spacing: .3px; } .lsc-pv { display: flex; align-items: baseline; gap: .45rem; } .lsc-pv em { font-family: var(--display); font-size: 1.55rem; font-weight: 800; color: var(--jade-deep); letter-spacing: .5px; } .leg-stat-card.is-right .lsc-pv em { color: #b8860b; } .lsc-pv span { font-size: .66rem; font-weight: 700; color: #7b8f96; } .lsc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; } .lsc-row { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .55rem; border-radius: 12px; background: rgba(11, 31, 42, .045); } .lsc-row span { font-size: .62rem; font-weight: 700; color: #7b8f96; } .lsc-row b { font-family: var(--display); font-size: .92rem; color: #20333a; } .lsc-top { min-height: 30px; display: flex; align-items: center; } .lsc-top-empty { font-size: .68rem; color: #93a6ad; font-weight: 700; background: rgba(11, 31, 42, .04); border: 1px dashed rgba(11, 31, 42, .14); border-radius: 10px; padding: .3rem .55rem; width: 100%; text-align: center; } .lsc-top-node { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border-radius: 10px; background: rgba(23, 117, 90, .08); border: 1px solid rgba(23, 117, 90, .18); font-size: .72rem; } .lsc-top-node b { color: var(--jade-deep); letter-spacing: .3px; } .lsc-top-node em { font-style: normal; color: var(--gold); font-weight: 800; } .lsc-hold { margin-top: auto; width: 100%; min-height: 42px; border-radius: 14px; font-weight: 800; font-size: .84rem; color: #fff; border: none; } .leg-stat-card.is-left .lsc-hold { background: var(--grad-jade); box-shadow: 0 8px 18px rgba(15, 143, 102, .32); } .leg-stat-card.is-right .lsc-hold { background: var(--grad-gold); color: #5c420e; box-shadow: 0 8px 18px rgba(232, 163, 61, .34); } .lsc-hold:active { transform: translateY(1px) scale(.985); } .lsc-hold:disabled { opacity: .55; } /* 抱单弹窗 */ .hold-card { max-width: 400px; } .hold-block { display: flex; flex-direction: column; gap: .4rem; margin-top: .2rem; } .hold-label { font-size: .68rem; font-weight: 800; color: #6d8581; letter-spacing: .4px; } .hold-legs { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .hold-leg { padding: .65rem 0; border-radius: 14px; border: 1.5px solid var(--line); background: #f7faf9; font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: #5a6d76; transition: all .15s ease; } .hold-leg.is-on[data-leg='L'] { border-color: var(--jade); background: rgba(23, 117, 90, .1); color: var(--jade-deep); box-shadow: inset 0 0 0 1px var(--jade); } .hold-leg.is-on[data-leg='R'] { border-color: var(--gold); background: rgba(232, 163, 61, .12); color: #8a6410; box-shadow: inset 0 0 0 1px var(--gold); } .hold-stars { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; } .hold-stars button { padding: .5rem 0; border-radius: 10px; border: 1.5px solid var(--line); background: #f7faf9; font-size: .72rem; font-weight: 800; color: #5a6d76; } .hold-stars button.is-on { border-color: var(--gold); background: linear-gradient(135deg, #ffd98a, #e8a33d); color: #5c420e; box-shadow: 0 5px 12px rgba(232, 163, 61, .3); } .hold-toggle { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; padding: .6rem .65rem; border-radius: 14px; background: rgba(11, 31, 42, .04); cursor: pointer; } .hold-toggle input { display: none; } .hold-toggle-rail { position: relative; flex: 0 0 44px; height: 26px; border-radius: 999px; background: rgba(11, 31, 42, .16); transition: background .18s ease; } .hold-toggle-rail::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .18s ease; } .hold-toggle input:checked + .hold-toggle-rail { background: var(--grad-jade); } .hold-toggle input:checked + .hold-toggle-rail::after { transform: translateX(18px); } .hold-toggle-txt { display: flex; flex-direction: column; gap: .1rem; } .hold-toggle-txt b { font-size: .78rem; color: #20333a; } .hold-toggle-txt small { font-size: .64rem; color: #7b8f96; line-height: 1.45; } .hold-submit { width: 100%; min-height: 46px; border-radius: 14px; margin-top: .7rem; } .hold-err { margin: .35rem 0 0; text-align: center; color: #c0392b; font-size: .72rem; line-height: 1.5; } /* 抱单结果弹窗 */ .hold-result-card { max-width: 400px; text-align: left; } .hold-ok { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .35rem; padding: .8rem 0 .55rem; } .hold-ok span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--grad-jade); box-shadow: 0 10px 24px rgba(15, 143, 102, .38); } .hold-ok b { font-family: var(--display); font-size: 1.1rem; color: var(--jade-deep); } .hr-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .65rem; border-radius: 12px; background: rgba(11, 31, 42, .04); } .hr-item span { font-size: .68rem; font-weight: 700; color: #7b8f96; } .hr-item b { font-family: var(--display); font-size: .86rem; color: #20333a; letter-spacing: .4px; text-align: right; word-break: break-all; } .hr-rewards { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; } .hr-rw-head { font-size: .68rem; font-weight: 800; color: #6d8581; letter-spacing: .4px; } .hr-rw { display: flex; justify-content: space-between; align-items: center; padding: .45rem .65rem; border-radius: 12px; background: rgba(232, 163, 61, .1); border: 1px dashed rgba(232, 163, 61, .4); } .hr-rw b { font-size: .72rem; color: #8a6410; } .hr-rw em { font-style: normal; font-weight: 800; color: var(--jade-deep); font-family: var(--display); } body.sheet-open { overflow: hidden; } /* 夜间/银河主题适配 */ :root[data-theme='night'] .leg-stat-card, :root[data-theme='galaxy'] .leg-stat-card, :root[data-theme='night'] .hold-card, :root[data-theme='galaxy'] .hold-card, :root[data-theme='night'] .hold-result-card, :root[data-theme='galaxy'] .hold-result-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); } :root[data-theme='night'] .lsc-row, :root[data-theme='galaxy'] .lsc-row, :root[data-theme='night'] .hr-item, :root[data-theme='galaxy'] .hr-item, :root[data-theme='night'] .hold-toggle, :root[data-theme='galaxy'] .hold-toggle { background: rgba(255, 255, 255, .07); } :root[data-theme='night'] .lsc-head b, :root[data-theme='galaxy'] .lsc-head b, :root[data-theme='night'] .lsc-pv em, :root[data-theme='galaxy'] .lsc-pv em, :root[data-theme='night'] .lsc-row b, :root[data-theme='galaxy'] .lsc-row b, :root[data-theme='night'] .hr-item b, :root[data-theme='galaxy'] .hr-item b { color: #f2f5f3; } :root[data-theme='night'] .hold-stars button, :root[data-theme='galaxy'] .hold-stars button, :root[data-theme='night'] .hold-leg, :root[data-theme='galaxy'] .hold-leg { background: rgba(255, 255, 255, .07); color: rgba(230, 228, 255, .82); } :root[data-theme='night'] .hold-stars button.is-on, :root[data-theme='galaxy'] .hold-stars button.is-on { color: #5c420e; } :root[data-theme='night'] .ref-hint, :root[data-theme='galaxy'] .ref-hint { color: #9fe3c9; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); } /* ═════════════════════════════════════════════════════════════════ v76 · 深度优化层（Deep Polish） 追加于 styles.css 末尾；纯覆盖式增强，不修改既有区块。 4.1 通用 · 4.2 商城 · 4.3 我的 · 4.4 团队 · 4.5 收银/档案 ═════════════════════════════════════════════════════════════════ */ /* ── 4.1 通用 · 卡片 hover / 按压（统一 transform+shadow 语言） ── */ .sku-card, .ord-card, .quick-cell, .pay-card, .shop-cat, .asset-pill, .complete-card { transition: transform .18s cubic-bezier(.22, .8, .35, 1), box-shadow .26s ease, border-color .26s ease; will-change: transform; } .sku-card:hover, .ord-card:hover, .quick-cell:hover, .pay-card:hover, .shop-cat:hover { transform: translateY(-4px); box-shadow: 0 26px 52px rgba(10, 30, 26, .16), 0 6px 18px rgba(10, 30, 26, .08); } .sku-card:active, .ord-card:active, .quick-cell:active, .pay-card:active, .shop-cat:active { transform: translateY(-1px) scale(.985); box-shadow: 0 10px 24px rgba(10, 30, 26, .12); } /* 尊重系统「减弱动态效果」：全局收敛动画与过渡 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── 4.1 通用 · 骨架屏（商城首屏防白屏）── */ .sku-skel { background: rgba(255, 255, 255, .55); border-color: rgba(11, 31, 42, .08); } .sku-skel i { animation-duration: 1.4s; } /* ── 4.1 通用 · 空态美化（搜索无结果 / 空列表）── */ .search-empty { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.8rem 1rem; } .search-empty::before { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 2px dashed rgba(27, 122, 90, .45); background: radial-gradient(circle at 36% 38%, rgba(27, 122, 90, .55) 0 3px, transparent 3.5px), radial-gradient(circle at 62% 62%, rgba(27, 122, 90, .38) 0 2.5px, transparent 3px); margin-bottom: .2rem; animation: v76-float 2.4s ease-in-out infinite; } @keyframes v76-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(8deg); } } /* ── 4.2 商城 · sku-card 视觉升级（渐变描边 + 内图微放大 + CTA 光晕） ── */ .sku-card { border: 1px solid rgba(11, 31, 42, .07); box-shadow: 0 12px 24px -14px rgba(11, 31, 42, .22); } .sku-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 22px; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: linear-gradient(135deg, rgba(27, 122, 90, .7), rgba(255, 255, 255, 0) 45%, rgba(47, 157, 120, .55)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .sku-card:hover::after { opacity: 1; } .sku-art, .sku-cta { transition: transform .24s ease, box-shadow .24s ease; } .sku-card:hover .sku-art { transform: scale(1.05); } .sku-card:hover .sku-cta { transform: translateX(2px); box-shadow: 0 10px 18px rgba(27, 122, 90, .34); } .sku-card:hover .sku-price { color: var(--jade-deep, #0d7a55); } /* ── 4.2 商城 · hero 轮播增强（指示点 + 拖拽过渡） ── */ .shop-hero-slide { transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .35, 1); } .shop-banner-dots i { transition: width .25s ease, background .25s ease, transform .25s ease; cursor: pointer; } .shop-banner-dots i:hover { transform: scale(1.35); } .shop-banner-dots i.is-on { transform: scale(1.1); } /* ── 4.3 我的 · me-metrics 2×2 宫格 + 数字滚动样式 ── */ .me-metrics { grid-template-columns: repeat(2, 1fr); gap: .55rem; text-align: left; } .me-metrics div { border-radius: 14px; padding: .55rem .7rem; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(4px); } .me-metrics em { font-size: 1.12rem; font-variant-numeric: tabular-nums; } .me-metrics span { font-size: .62rem; opacity: .82; } /* 我的 · quick-grid 图标 hover */ .quick-ic { transition: transform .2s ease; } .quick-cell:hover .quick-ic { transform: translateY(-2px) scale(1.12); } /* 我的 · 钱包卡微卡片化 */ .wallet-box { border-radius: 18px; box-shadow: 0 14px 30px -14px rgba(11, 31, 42, .2); } /* 我的 · 头像 hover */ .avatar-btn { transition: transform .2s ease, box-shadow .2s ease; } .avatar-btn:hover { transform: scale(1.05); box-shadow: 0 8px 18px -6px rgba(11, 31, 42, .28); } .avatar-btn:active { transform: scale(.98); } /* ── 4.4 团队 · leg-stat-card 微调（渐变底 + hover 提层） ── */ .leg-stat-card { transition: transform .18s ease, box-shadow .24s ease; } .leg-stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(11, 31, 42, .24); } .leg-stat-card.is-left { background: linear-gradient(165deg, rgba(27, 122, 90, .12), rgba(255, 255, 255, .6)); } .leg-stat-card.is-right { background: linear-gradient(165deg, rgba(15, 90, 66, .12), rgba(255, 255, 255, .6)); } .leg-stat-card .lsc-pv em { font-variant-numeric: tabular-nums; } /* 团队 · canvas 工具按钮强化 */ .tc-tools button { transition: transform .16s ease, box-shadow .2s ease, background .2s ease; } .tc-tools button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(11, 31, 42, .26); } .tc-tools button:active { transform: translateY(0) scale(.96); } /* 团队 · 抱单弹窗星级 / 腿位选择动效 */ .hold-stars button, .hold-leg { transition: transform .16s ease, box-shadow .18s ease; } .hold-stars button:hover { transform: translateY(-2px) scale(1.06); } .hold-stars button.is-on { transform: scale(1.1); box-shadow: 0 6px 14px -4px rgba(27, 122, 90, .4); } .hold-leg:hover { transform: translateY(-2px); } .hold-leg.is-on { transform: scale(1.04); box-shadow: 0 6px 14px -4px rgba(27, 122, 90, .35); } /* ── 4.5 收银 · pay-card 选中态强化（对勾动画）+ 深色补齐 ── */ .pay-card { border-radius: 14px; } .pay-card:hover { border-color: rgba(27, 122, 90, .5); } .pay-card.is-checked { border-color: var(--jade, #1b7a5a); background: rgba(27, 122, 90, .08); box-shadow: 0 8px 18px -8px rgba(27, 122, 90, .32); } .pay-card.is-checked .pay-check { transform: scale(1.12); } .pay-card.is-checked .pay-check::after { width: 8px; height: 4px; border-radius: 0; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(.5px, -1px); } :root[data-theme='night'] .pay-card, :root[data-theme='galaxy'] .pay-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); } :root[data-theme='night'] .pay-card-body b, :root[data-theme='galaxy'] .pay-card-body b { color: rgba(255, 255, 255, .92); } :root[data-theme='night'] .pay-card-body small, :root[data-theme='galaxy'] .pay-card-body small { color: rgba(255, 255, 255, .55); } :root[data-theme='night'] .pay-card.is-checked, :root[data-theme='galaxy'] .pay-card.is-checked { background: rgba(27, 122, 90, .24); border-color: rgba(90, 200, 160, .7); } :root[data-theme='night'] .search-empty, :root[data-theme='galaxy'] .search-empty { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .65); } /* —— v98 · 抱单星级锁定 + 我的页卡片居中精美 —— */ .hold-star-locked .hold-star-note { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.8rem; border-radius: 14px; background: linear-gradient(155deg, rgba(232, 245, 236, 0.95), #fff); border: 1px solid rgba(26, 122, 92, 0.18); box-shadow: 0 4px 14px rgba(10, 28, 38, 0.04); } .hold-star-locked .hold-star-note b { flex: 0 0 auto; min-width: 2.6rem; text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--jade-deep); line-height: 1.35; } .hold-star-locked .hold-star-note span { font-size: 0.78rem; line-height: 1.45; color: var(--ink-muted); } /* 我的 · 快捷卡片：居中容器 + 精美宫格 */ body[data-page="me"] .shell-tabs { max-width: 480px; margin-left: auto; margin-right: auto; } body[data-page="me"] .me-hero, body[data-page="me"] .invite-card, body[data-page="me"] .quick-grid, body[data-page="me"] .banner, body[data-page="me"] .page-head { width: 100%; } body[data-page="me"] .quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin: 0.15rem auto 0.35rem; justify-items: stretch; max-width: 100%; } body[data-page="me"] .quick-cell { width: 100%; min-height: 5.6rem; padding: 0.95rem 0.45rem 0.8rem; border-radius: 18px; background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 249, 0.92)); border: 1px solid rgba(26, 122, 92, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 20px rgba(10, 28, 38, 0.06); justify-content: center; align-items: center; gap: 0.35rem; transition: transform 0.14s ease, box-shadow 0.2s ease, border-color 0.2s ease; } body[data-page="me"] .quick-cell:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(10, 28, 38, 0.08); } body[data-page="me"] .quick-ic { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(26, 122, 92, 0.1); font-size: 1.28rem; filter: none; } body[data-page="me"] .quick-cell b { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-page="me"] .quick-cell em { font-size: 0.64rem; color: var(--jade); opacity: 0.85; max-width: 100%; } body[data-page="me"] .invite-card { margin-left: auto; margin-right: auto; border-radius: 18px; } body[data-page="me"] .me-hero { border-radius: 20px; } @media (max-width: 380px) { body[data-page="me"] .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } body[data-page="me"] .quick-cell { min-height: 5.2rem; } } @media (min-width: 560px) { body[data-page="me"] .shell-tabs { max-width: 520px; } body[data-page="me"] .quick-grid { gap: 0.75rem; } body[data-page="me"] .quick-cell { min-height: 5.9rem; padding: 1.05rem 0.55rem 0.9rem; } }