diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..21ec3ca --- /dev/null +++ b/.gitattributes @@ -0,0 +1,18 @@ +# 默认：入库统一 LF，检出时不因平台改变（避免 CRLF 噪音 diff） +* text=auto eol=lf + +# Windows 脚本保持 CRLF（deploy.ps1 带 UTF-8 BOM，勿去 BOM：PS 5.1 靠它识别 UTF-8） +*.ps1 text eol=crlf +*.bat text eol=crlf +*.cmd text eol=crlf + +# 二进制：不做换行符转换 +*.png binary +*.jpg binary +*.jpeg binary +*.gif binary +*.ico binary +*.webp binary +*.woff binary +*.woff2 binary +*.ttf binary diff --git a/src/assets/cookie.css b/src/assets/cookie.css index a136bbe..d8c9bcc 100644 --- a/src/assets/cookie.css +++ b/src/assets/cookie.css @@ -1,264 +1,264 @@ -:root { - --text-color: #323130; - --card-bg: rgba(255, 255, 255, 0.85); - --border-color: rgba(0, 0, 0, 0.1); - --primary-color: #0078d4; - --primary-hover: #106ebe; - --secondary-bg: #e1dfdd; - --secondary-hover: #d2d0ce; - --font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; -} - -/* -body { - padding: 2rem; - box-sizing: border-box; -} - -h1, p { - max-width: 800px; - text-align: center; - line-height: 1.6; -} -*/ - -/* --- 主内容区域 --- */ -.GCookie_MainContent { - text-align: center; -} - -.GCookie_MainContent h1 { - font-size: 2.5rem; - font-weight: 600; -} - -.GCookie_MainContent p { - font-size: 1.1rem; - color: #605e5c; -} - -/* 用于隐藏元素的 class */ -.c-furry.GCookie_Hidden { - opacity: 0; - transform: scale(0.95); - pointer-events: none; - position: absolute; -} - - -/* --- 通用按钮样式 --- */ -.GCookie_Btn { - padding: 0.6rem 1.2rem; - border: none; - border-radius: 6px; - font-size: 1rem; - font-family: var(--font-family); - cursor: pointer; - transition: background-color 0.2s ease, transform 0.1s ease; -} - -.GCookie_Btn:hover { - transform: translateY(-2px); -} - -.GCookie_Btn:active { - transform: translateY(0); -} - -.GCookie_BtnPrimary { - background-color: var(--primary-color); - color: white; -} -.GCookie_BtnPrimary:hover { - background-color: var(--primary-hover); -} - -.GCookie_BtnSecondary { - background-color: var(--secondary-bg); - color: var(--text-color); -} -.GCookie_BtnSecondary:hover { - background-color: var(--secondary-hover); -} - -/* --- Cookie 政策横幅 --- */ -#GCookie_CookieBanner { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background-color: var(--card-bg); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-top: 1px solid var(--border-color); - padding: 1.5rem 2rem; - box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1); - z-index: 1000; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; - transform: translateY(100%); - opacity: 0; - transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease; -} - -#GCookie_CookieBanner.GCookie_Show { - transform: translateY(0); - opacity: 1; -} - -#GCookie_CookieBanner .GCookie_BannerText { - color: #000; - flex-grow: 1; - margin-right: 1rem; -} - -#GCookie_CookieBanner .GCookie_BannerButtons { - display: flex; - gap: 0.8rem; - flex-wrap: wrap; -} - -/* --- Cookie 设置模态框 --- */ -#GCookie_CookieSettingsModal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 2000; - opacity: 0; - pointer-events: none; - transition: opacity 0.3s ease; -} - -#GCookie_CookieSettingsModal.GCookie_Show { - opacity: 1; - pointer-events: auto; -} - -.GCookie_ModalContent { - background-color: var(--card-bg); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-radius: 12px; - padding: 2rem; - box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2); - max-width: 500px; - width: 90%; - max-height: 80vh; - overflow-y: auto; - transform: scale(0.9); - transition: transform 0.3s ease; -} - -#GCookie_CookieSettingsModal.GCookie_Show .GCookie_ModalContent { - transform: scale(1); -} - -.GCookie_ModalHeader { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1.5rem; - color: #000; -} - -.GCookie_ModalHeader h2 { - margin: 0; - font-size: 1.5rem; - font-weight: 600; -} - -.GCookie_ModalBody { - color: #000; -} - -.GCookie_CloseBtn { - background: none; - border: none; - font-size: 1.5rem; - color: #605e5c; - cursor: pointer; - padding: 0; - width: 32px; - height: 32px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 4px; - transition: background-color 0.2s; -} -.GCookie_CloseBtn:hover { - background-color: var(--secondary-bg); -} - -.GCookie_SettingItem { - margin-bottom: 1.5rem; -} - -.GCookie_SettingItem label { - display: flex; - align-items: center; - cursor: pointer; - font-size: 1rem; -} - -/* 自定义开关样式 */ -.GCookie_Switch { - position: relative; - display: inline-block; - width: 50px; - height: 24px; - margin-left: 1rem; -} - -.GCookie_Switch input { - opacity: 0; - width: 0; - height: 0; -} - -.GCookie_Slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - transition: .4s; - border-radius: 24px; -} - -.GCookie_Slider:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - left: 3px; - bottom: 3px; - background-color: white; - transition: .4s; - border-radius: 50%; -} - -input:checked + .GCookie_Slider { - background-color: var(--primary-color); -} - -input:checked + .GCookie_Slider:before { - transform: translateX(26px); -} - -.GCookie_ModalFooter { - display: flex; - justify-content: flex-end; - margin-top: 2rem; +:root { + --text-color: #323130; + --card-bg: rgba(255, 255, 255, 0.85); + --border-color: rgba(0, 0, 0, 0.1); + --primary-color: #0078d4; + --primary-hover: #106ebe; + --secondary-bg: #e1dfdd; + --secondary-hover: #d2d0ce; + --font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; +} + +/* +body { + padding: 2rem; + box-sizing: border-box; +} + +h1, p { + max-width: 800px; + text-align: center; + line-height: 1.6; +} +*/ + +/* --- 主内容区域 --- */ +.GCookie_MainContent { + text-align: center; +} + +.GCookie_MainContent h1 { + font-size: 2.5rem; + font-weight: 600; +} + +.GCookie_MainContent p { + font-size: 1.1rem; + color: #605e5c; +} + +/* 用于隐藏元素的 class */ +.c-furry.GCookie_Hidden { + opacity: 0; + transform: scale(0.95); + pointer-events: none; + position: absolute; +} + + +/* --- 通用按钮样式 --- */ +.GCookie_Btn { + padding: 0.6rem 1.2rem; + border: none; + border-radius: 6px; + font-size: 1rem; + font-family: var(--font-family); + cursor: pointer; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +.GCookie_Btn:hover { + transform: translateY(-2px); +} + +.GCookie_Btn:active { + transform: translateY(0); +} + +.GCookie_BtnPrimary { + background-color: var(--primary-color); + color: white; +} +.GCookie_BtnPrimary:hover { + background-color: var(--primary-hover); +} + +.GCookie_BtnSecondary { + background-color: var(--secondary-bg); + color: var(--text-color); +} +.GCookie_BtnSecondary:hover { + background-color: var(--secondary-hover); +} + +/* --- Cookie 政策横幅 --- */ +#GCookie_CookieBanner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background-color: var(--card-bg); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid var(--border-color); + padding: 1.5rem 2rem; + box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1); + z-index: 1000; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + transform: translateY(100%); + opacity: 0; + transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease; +} + +#GCookie_CookieBanner.GCookie_Show { + transform: translateY(0); + opacity: 1; +} + +#GCookie_CookieBanner .GCookie_BannerText { + color: #000; + flex-grow: 1; + margin-right: 1rem; +} + +#GCookie_CookieBanner .GCookie_BannerButtons { + display: flex; + gap: 0.8rem; + flex-wrap: wrap; +} + +/* --- Cookie 设置模态框 --- */ +#GCookie_CookieSettingsModal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 2000; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} + +#GCookie_CookieSettingsModal.GCookie_Show { + opacity: 1; + pointer-events: auto; +} + +.GCookie_ModalContent { + background-color: var(--card-bg); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: 12px; + padding: 2rem; + box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2); + max-width: 500px; + width: 90%; + max-height: 80vh; + overflow-y: auto; + transform: scale(0.9); + transition: transform 0.3s ease; +} + +#GCookie_CookieSettingsModal.GCookie_Show .GCookie_ModalContent { + transform: scale(1); +} + +.GCookie_ModalHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; + color: #000; +} + +.GCookie_ModalHeader h2 { + margin: 0; + font-size: 1.5rem; + font-weight: 600; +} + +.GCookie_ModalBody { + color: #000; +} + +.GCookie_CloseBtn { + background: none; + border: none; + font-size: 1.5rem; + color: #605e5c; + cursor: pointer; + padding: 0; + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + transition: background-color 0.2s; +} +.GCookie_CloseBtn:hover { + background-color: var(--secondary-bg); +} + +.GCookie_SettingItem { + margin-bottom: 1.5rem; +} + +.GCookie_SettingItem label { + display: flex; + align-items: center; + cursor: pointer; + font-size: 1rem; +} + +/* 自定义开关样式 */ +.GCookie_Switch { + position: relative; + display: inline-block; + width: 50px; + height: 24px; + margin-left: 1rem; +} + +.GCookie_Switch input { + opacity: 0; + width: 0; + height: 0; +} + +.GCookie_Slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; + border-radius: 24px; +} + +.GCookie_Slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + transition: .4s; + border-radius: 50%; +} + +input:checked + .GCookie_Slider { + background-color: var(--primary-color); +} + +input:checked + .GCookie_Slider:before { + transform: translateX(26px); +} + +.GCookie_ModalFooter { + display: flex; + justify-content: flex-end; + margin-top: 2rem; } \ No newline at end of file diff --git a/src/assets/gvsds-page.css b/src/assets/gvsds-page.css index cc8fac2..d108123 100644 --- a/src/assets/gvsds-page.css +++ b/src/assets/gvsds-page.css @@ -1,675 +1,675 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box -} - -body { - font-family: Inter,sans-serif; - overflow-x: hidden -} - -.nav-scrolled { - background-color: rgba(0,0,0,.95); - backdrop-filter: blur(8px); - box-shadow: 0 2px 10px rgba(255,255,255,.1) -} - -.chart-container { - position: relative; - height: 350px; - width: 100% -} - -iframe { - transition: opacity .5s ease -} - -.group:hover iframe { - opacity: 1 -} - -html { - scroll-behavior: smooth -} - -button { - transition: all .3s cubic-bezier(.4, 0, .2, 1) -} - -button:hover { - transform: translateY(-2px) -} - -.card-hover { - transition: all .4s cubic-bezier(.175, .885, .32, 1.275) -} - -.card-hover:hover { - transform: translateY(-6px); - box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04) -} - -@layer base { - body { - min-height: 100vh; - margin: 0; - padding: 0; - transform: none; - will-change: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale - } -} - -body::before { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: -2; - pointer-events: none; - background: linear-gradient(-45deg,#fff,#fcfeff,#eff6ff,#d9d9ff); - background-size: 400% 400%; - animation: gradientFlow 20s ease infinite; - will-change: background-position -} - -body::after { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: -1; - pointer-events: none; - background: radial-gradient(circle at 20% 80%,rgba(120,119,198,.2) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.2) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.2) 0,transparent 50%); - background-size: 150% 150%; - animation: particleFlow 20s ease infinite; - will-change: background-position -} - -@keyframes gradientFlow { - 0% {background-position: 0 50%} - 25% {background-position: 100% 50%} - 50% {background-position: 100% 100%} - 75% {background-position: 0 100%} - 100% {background-position: 0 50%} -} - -@keyframes particleFlow { - 0% {background-position: 0 0} - 25% {background-position: 50% 100%} - 50% {background-position: 100% 100%} - 75% {background-position: 50% 0} - 100% {background-position: 0 0} -} - -@layer utilities { - .float-fix { - position: relative; - transform: translateZ(0); - backface-visibility: hidden; - perspective: 1000px; - will-change: transform - } -} - -/* 深色模式适配（可选） -@media (prefers-color-scheme: dark) { - body { - background: linear-gradient(-45deg, - #0f172a, #1e293b, #334155, #475569, - #27374d, #1a2434, #0f172a); - } - - body::before { - background: - radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.08) 0%, transparent 50%); - } -}*/ - - - - - - - - - - - - - - - - - - -@property --angle { - syntax: ""; - initial-value: 0deg; - inherits: false -} - -@keyframes sendBtnGradientRotate { - 0% { - --angle: 0deg - } - - 7.14% { - --angle: 21.8deg - } - - 42.86% { - --angle: 158.2deg - } - - 57.14% { - --angle: 201.8deg - } - - 92.86% { - --angle: 338.2deg - } - - to { - --angle: 360deg - } -} - -.sendBtn { - background: linear-gradient(var(--angle),#47c0ff -18.45%,#0094ff 17.73%,#836cff 39.48%,#ff56f2 74.15%,#ffb75c 93.09%); - -webkit-animation: sendBtnGradientRotate 5s linear infinite; - animation: sendBtnGradientRotate 5s linear infinite; -} - - - - - - - - - - - - - - - - - - - - - - - - - -/* 1. 首先引入 DIN Condensed 字体（解决字体缺失核心问题） */ -@font-face { - font-family: "DIN Condensed"; - font-style: normal; - font-weight: 700; - font-display: fallback; - /* 修正字体文件 URL，仅保留有效的字体资源地址 */ - src:url(https://cdn.marmot-cloud.com/storage/zenmux/2025/09/03/XH4qEdP/DIN_Condensed-Bold.woff2) format('woff2'), - local("DIN Condensed Bold"), local("DINCondensed-Bold"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -/* 保留原有 Noto Serif 字体定义（不影响翻牌组件） */ -@font-face { - font-family: "Noto Serif"; - font-style: normal; - font-weight: 300; - font-display: fallback; - src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/3TdWyBD/NotoSerif-Light.ttf)format("truetype") -} - -@font-face { - font-family: "Noto Serif"; - font-style: normal; - font-weight: 500; - font-display: fallback; - src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/csSK6pH/NotoSerif-Regular.ttf)format("truetype") -} - -@font-face { - font-family: "Noto Serif"; - font-style: normal; - font-weight: 700; - font-display: fallback; - src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/qSZwJRf/NotoSerif-SemiBold.ttf)format("truetype") -} - -.noto-serif { - font-family: "Noto Serif",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif; - font-feature-settings: "kern"1; - text-rendering: optimizeLegibility -} - -.noto-serif-stable { - font-family: "Noto Serif",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif; - font-size-adjust: .5; - letter-spacing: .01em -} - -.M-FlipCard { - display: inline-block; - position: relative; - width: 48px; - height: 68px; - border-radius: 5px; - font-size: 66px; - box-shadow: 0 1px 1px 0 rgba(0,0,0,.102); - font-family: "DIN Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - font-weight: 700; - font-style: bold; - font-size: 70px; - letter-spacing: 0%; - text-align: center; - line-height: 1.23; - color: #000; -} - -.M-FlipCard.flip-win { - line-height: 68px -} - -.M-FlipCard.flip-win .digital:before { - line-height: 70px -} - -.M-FlipCard.flip-win .digital:after { - line-height: 3px -} - -.M-FlipCard .digital:before,.M-FlipCard .digital:after { - content: ""; - position: absolute; - left: 0; - right: 0; - background: #fff; - overflow: hidden; - box-sizing: border-box; - /* 继承翻牌组件的字体 */ - font-family: inherit; - font-weight: inherit; - font-size: inherit; -} - -.M-FlipCard .digital:before { - top: 0; - bottom: 50%; - border-radius: 5px 5px 0 0; - border-bottom: solid 1px#e6e6e6 -} - -.M-FlipCard .digital:after { - top: 50%; - bottom: 0; - border-radius: 0 0 5px 5px; - line-height: .3 -} - -.M-FlipCard.down .front:before { - z-index: 3 -} - -.M-FlipCard.down .back:after { - z-index: 2; - transform-origin: 50%0%; - transform: perspective(160px)rotatex(180deg) -} - -.M-FlipCard.down .front:after,.M-FlipCard.down .back:before { - z-index: 1 -} - -.M-FlipCard.down.go .front:before { - transform-origin: 50%100%; - -webkit-animation: frontFlipDown var(--flipduration)linear both; - animation: frontFlipDown var(--flipduration)linear both; - box-shadow: 0 -2px 6px rgba(255,255,255,.3); - backface-visibility: hidden -} - -.M-FlipCard.down.go .back:after { - -webkit-animation: backFlipDown var(--flipduration)linear both; - animation: backFlipDown var(--flipduration)linear both -} - -.M-FlipCard.up .front:after { - z-index: 3 -} - -.M-FlipCard.up .back:before { - z-index: 2; - transform-origin: 50%100%; - transform: perspective(160px)rotatex(-180deg) -} - -.M-FlipCard.up .front:before,.M-FlipCard.up .back:after { - z-index: 1 -} - -.M-FlipCard.up.go .front:after { - transform-origin: 50%0; - -webkit-animation: frontFlipUp var(--flipduration)linear both; - animation: frontFlipUp var(--flipduration)linear both; - box-shadow: 0 2px 6px rgba(255,255,255,.3); - backface-visibility: hidden -} - -.M-FlipCard.up.go .back:before { - -webkit-animation: backFlipUp var(--flipduration)linear both; - animation: backFlipUp var(--flipduration)linear both -} - -@keyframes frontFlipDown { - 0% { - background-color: #fff; - transform: perspective(160px)rotatex(0) - } - - 50% { - background-color: #f5f5f5; - transform: perspective(160px)rotatex(-90deg) - } - - to { - background-color: #fff; - transform: perspective(160px)rotatex(-180deg) - } -} - -@keyframes backFlipDown { - 0% { - background-color: #fff; - transform: perspective(160px)rotatex(180deg) - } - - 50% { - background-color: #f5f5f5; - transform: perspective(160px)rotatex(90deg) - } - - to { - background-color: #fff; - transform: perspective(160px)rotatex(0) - } -} - -@keyframes frontFlipUp { - 0% { - transform: perspective(160px)rotatex(0) - } - - to { - transform: perspective(160px)rotatex(180deg) - } -} - -@keyframes backFlipUp { - 0% { - transform: perspective(160px)rotatex(-180deg) - } - - to { - transform: perspective(160px)rotatex(0) - } -} - -.M-FlipCard .number0:before,.M-FlipCard .number0:after { - content: "0" -} - -.M-FlipCard .number1:before,.M-FlipCard .number1:after { - content: "1" -} - -.M-FlipCard .number2:before,.M-FlipCard .number2:after { - content: "2" -} - -.M-FlipCard .number3:before,.M-FlipCard .number3:after { - content: "3" -} - -.M-FlipCard .number4:before,.M-FlipCard .number4:after { - content: "4" -} - -.M-FlipCard .number5:before,.M-FlipCard .number5:after { - content: "5" -} - -.M-FlipCard .number6:before,.M-FlipCard .number6:after { - content: "6" -} - -.M-FlipCard .number7:before,.M-FlipCard .number7:after { - content: "7" -} - -.M-FlipCard .number8:before,.M-FlipCard .number8:after { - content: "8" -} - -.M-FlipCard .number9:before,.M-FlipCard .number9:after { - content: "9" -} - -html[data-theme-mode=dark] .M-FlipCard { - color: #fff -} - -html[data-theme-mode=dark] .M-FlipCard .digital:before,html[data-theme-mode=dark] .M-FlipCard .digital:after { - background: #333 -} - -html[data-theme-mode=dark] .M-FlipCard .digital:before { - border-bottom-color: #444 -} - -@keyframes frontFlipDownDark { - 0% { - background-color: #333; - transform: perspective(160px)rotatex(0) - } - - 50% { - background-color: #2a2a2a; - transform: perspective(160px)rotatex(-90deg) - } - - to { - background-color: #333; - transform: perspective(160px)rotatex(-180deg) - } -} - -@keyframes backFlipDownDark { - 0% { - background-color: #333; - transform: perspective(160px)rotatex(180deg) - } - - 50% { - background-color: #2a2a2a; - transform: perspective(160px)rotatex(90deg) - } - - to { - background-color: #333; - transform: perspective(160px)rotatex(0) - } -} - - -.blurry { - background: rgba(0, 0, 0, 0.28); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - border-radius: 14px; - box-sizing: border-box; -} - - -/* ── Mobile: headline backdrop 仅在 md+ 显示，移动端用纯透明渐变遮罩代替 ── */ -@media (max-width: 767px) { - .hero-headline { - /* 移动端简化背景：柔和深色毛玻璃，增强可读性 */ - background: rgba(0, 0, 0, 0.28); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - border-radius: 14px; - padding: 14px 16px 12px; - width: calc(100vw - 32px); - box-sizing: border-box; - } - /* 移动端 h1 去掉 px，由父级 padding 控制 */ - .hero-headline h1 { - padding-left: 0 !important; - padding-right: 0 !important; - } -} - -/* ── Mobile: 输入框容器宽度修正 ── */ -@media (max-width: 767px) { - .hero-input-wrap { - width: 100%; - box-sizing: border-box; - } - /* 发送按钮文字在极小屏不换行 */ - .sendBtn > div { - white-space: nowrap; - } -} - -/* ── Mobile: 按钮组在移动端全宽展示，企业感间距 ── */ -@media (max-width: 639px) { - .hero-actions { - position: relative; - } - .hero-actions a { - width: 100%; - } - .hero-actions a button { - border-radius: 10px; - font-size: 15px; - height: 48px; - } -} - -/* ── Mobile: 底部统计翻牌区 移动端隐藏（原逻辑保留） ── */ -@media (max-width: 767px) { - .hero-stats { - display: none !important; - } -} - - -/* ── 极小屏 (<375px) 紧凑模式 ── */ -@media (max-width: 374px) { - .hero-headline { - padding: 10px 12px; - } - .hero-actions a button { - height: 44px; - font-size: 14px; - } -} - - - - - - - - - - - - - - - - - - - - - - - -/* ========================================= - 全局智能磨砂滚动条 (复制此段代码到 ) - ========================================= */ - -html { - /* 定义基础变量 */ - --sb-size: 6px; - --sb-track: transparent; - /* - 技巧：利用 mix-blend-mode: difference 让滑块颜色自动反转 - 无论背景黑还是白，它都会变成对比色，实现全自动适配 - */ - --sb-thumb-blend: difference; - --sb-thumb-color: rgba(200, 200, 200, 0.5); - --sb-thumb-hover: rgba(255, 255, 255, 0.8); -} - -/* 针对滚动条容器 */ -html, body, * { - scrollbar-width: thin; /* Firefox */ - scrollbar-color: rgba(128, 128, 128, 0.3) transparent; -} - -/* 定义滚动条变量 - 核心配置 */ -:root { - /* 滚动条尺寸 - 更细更低调 */ - --sb-size: 6px; - /* 轨道背景 - 完全透明 */ - --sb-track: transparent; - /* 滚动条滑块基础色 - 极低透明度的灰色 */ - --sb-thumb-color: rgba(156, 163, 175, 0.15); - /* 混合模式 - 叠加模式增强融合性 */ - --sb-thumb-blend: overlay; - /* 悬停色 - 略微提高透明度 */ - --sb-thumb-hover: rgba(156, 163, 175, 0.3); -} -/* -::-webkit-scrollbar { - width: var(--sb-size); - height: var(--sb-size); - background: transparent; -} - -::-webkit-scrollbar-track { - background: var(--sb-track); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb { - background-color: transparent; - box-shadow: inset 0 0 0 100px rgba(120, 120, 120, 0.08); -} -::-webkit-scrollbar-thumb:hover { - box-shadow: inset 0 0 0 100px rgba(120, 120, 120, 0.2); -} -::-webkit-scrollbar-corner { - background: transparent; -} -* { - scrollbar-width: thin; - scrollbar-color: rgba(156, 163, 175, 0.15) transparent; +* { + margin: 0; + padding: 0; + box-sizing: border-box +} + +body { + font-family: Inter,sans-serif; + overflow-x: hidden +} + +.nav-scrolled { + background-color: rgba(0,0,0,.95); + backdrop-filter: blur(8px); + box-shadow: 0 2px 10px rgba(255,255,255,.1) +} + +.chart-container { + position: relative; + height: 350px; + width: 100% +} + +iframe { + transition: opacity .5s ease +} + +.group:hover iframe { + opacity: 1 +} + +html { + scroll-behavior: smooth +} + +button { + transition: all .3s cubic-bezier(.4, 0, .2, 1) +} + +button:hover { + transform: translateY(-2px) +} + +.card-hover { + transition: all .4s cubic-bezier(.175, .885, .32, 1.275) +} + +.card-hover:hover { + transform: translateY(-6px); + box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04) +} + +@layer base { + body { + min-height: 100vh; + margin: 0; + padding: 0; + transform: none; + will-change: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale + } +} + +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -2; + pointer-events: none; + background: linear-gradient(-45deg,#fff,#fcfeff,#eff6ff,#d9d9ff); + background-size: 400% 400%; + animation: gradientFlow 20s ease infinite; + will-change: background-position +} + +body::after { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -1; + pointer-events: none; + background: radial-gradient(circle at 20% 80%,rgba(120,119,198,.2) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,198,.2) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,219,255,.2) 0,transparent 50%); + background-size: 150% 150%; + animation: particleFlow 20s ease infinite; + will-change: background-position +} + +@keyframes gradientFlow { + 0% {background-position: 0 50%} + 25% {background-position: 100% 50%} + 50% {background-position: 100% 100%} + 75% {background-position: 0 100%} + 100% {background-position: 0 50%} +} + +@keyframes particleFlow { + 0% {background-position: 0 0} + 25% {background-position: 50% 100%} + 50% {background-position: 100% 100%} + 75% {background-position: 50% 0} + 100% {background-position: 0 0} +} + +@layer utilities { + .float-fix { + position: relative; + transform: translateZ(0); + backface-visibility: hidden; + perspective: 1000px; + will-change: transform + } +} + +/* 深色模式适配（可选） +@media (prefers-color-scheme: dark) { + body { + background: linear-gradient(-45deg, + #0f172a, #1e293b, #334155, #475569, + #27374d, #1a2434, #0f172a); + } + + body::before { + background: + radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.08) 0%, transparent 50%); + } +}*/ + + + + + + + + + + + + + + + + + + +@property --angle { + syntax: ""; + initial-value: 0deg; + inherits: false +} + +@keyframes sendBtnGradientRotate { + 0% { + --angle: 0deg + } + + 7.14% { + --angle: 21.8deg + } + + 42.86% { + --angle: 158.2deg + } + + 57.14% { + --angle: 201.8deg + } + + 92.86% { + --angle: 338.2deg + } + + to { + --angle: 360deg + } +} + +.sendBtn { + background: linear-gradient(var(--angle),#47c0ff -18.45%,#0094ff 17.73%,#836cff 39.48%,#ff56f2 74.15%,#ffb75c 93.09%); + -webkit-animation: sendBtnGradientRotate 5s linear infinite; + animation: sendBtnGradientRotate 5s linear infinite; +} + + + + + + + + + + + + + + + + + + + + + + + + + +/* 1. 首先引入 DIN Condensed 字体（解决字体缺失核心问题） */ +@font-face { + font-family: "DIN Condensed"; + font-style: normal; + font-weight: 700; + font-display: fallback; + /* 修正字体文件 URL，仅保留有效的字体资源地址 */ + src:url(https://cdn.marmot-cloud.com/storage/zenmux/2025/09/03/XH4qEdP/DIN_Condensed-Bold.woff2) format('woff2'), + local("DIN Condensed Bold"), local("DINCondensed-Bold"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* 保留原有 Noto Serif 字体定义（不影响翻牌组件） */ +@font-face { + font-family: "Noto Serif"; + font-style: normal; + font-weight: 300; + font-display: fallback; + src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/3TdWyBD/NotoSerif-Light.ttf)format("truetype") +} + +@font-face { + font-family: "Noto Serif"; + font-style: normal; + font-weight: 500; + font-display: fallback; + src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/csSK6pH/NotoSerif-Regular.ttf)format("truetype") +} + +@font-face { + font-family: "Noto Serif"; + font-style: normal; + font-weight: 700; + font-display: fallback; + src: url(https://cdn.marmot-cloud.com/storage/zenmux/2026/01/30/qSZwJRf/NotoSerif-SemiBold.ttf)format("truetype") +} + +.noto-serif { + font-family: "Noto Serif",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif; + font-feature-settings: "kern"1; + text-rendering: optimizeLegibility +} + +.noto-serif-stable { + font-family: "Noto Serif",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif; + font-size-adjust: .5; + letter-spacing: .01em +} + +.M-FlipCard { + display: inline-block; + position: relative; + width: 48px; + height: 68px; + border-radius: 5px; + font-size: 66px; + box-shadow: 0 1px 1px 0 rgba(0,0,0,.102); + font-family: "DIN Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 70px; + letter-spacing: 0%; + text-align: center; + line-height: 1.23; + color: #000; +} + +.M-FlipCard.flip-win { + line-height: 68px +} + +.M-FlipCard.flip-win .digital:before { + line-height: 70px +} + +.M-FlipCard.flip-win .digital:after { + line-height: 3px +} + +.M-FlipCard .digital:before,.M-FlipCard .digital:after { + content: ""; + position: absolute; + left: 0; + right: 0; + background: #fff; + overflow: hidden; + box-sizing: border-box; + /* 继承翻牌组件的字体 */ + font-family: inherit; + font-weight: inherit; + font-size: inherit; +} + +.M-FlipCard .digital:before { + top: 0; + bottom: 50%; + border-radius: 5px 5px 0 0; + border-bottom: solid 1px#e6e6e6 +} + +.M-FlipCard .digital:after { + top: 50%; + bottom: 0; + border-radius: 0 0 5px 5px; + line-height: .3 +} + +.M-FlipCard.down .front:before { + z-index: 3 +} + +.M-FlipCard.down .back:after { + z-index: 2; + transform-origin: 50%0%; + transform: perspective(160px)rotatex(180deg) +} + +.M-FlipCard.down .front:after,.M-FlipCard.down .back:before { + z-index: 1 +} + +.M-FlipCard.down.go .front:before { + transform-origin: 50%100%; + -webkit-animation: frontFlipDown var(--flipduration)linear both; + animation: frontFlipDown var(--flipduration)linear both; + box-shadow: 0 -2px 6px rgba(255,255,255,.3); + backface-visibility: hidden +} + +.M-FlipCard.down.go .back:after { + -webkit-animation: backFlipDown var(--flipduration)linear both; + animation: backFlipDown var(--flipduration)linear both +} + +.M-FlipCard.up .front:after { + z-index: 3 +} + +.M-FlipCard.up .back:before { + z-index: 2; + transform-origin: 50%100%; + transform: perspective(160px)rotatex(-180deg) +} + +.M-FlipCard.up .front:before,.M-FlipCard.up .back:after { + z-index: 1 +} + +.M-FlipCard.up.go .front:after { + transform-origin: 50%0; + -webkit-animation: frontFlipUp var(--flipduration)linear both; + animation: frontFlipUp var(--flipduration)linear both; + box-shadow: 0 2px 6px rgba(255,255,255,.3); + backface-visibility: hidden +} + +.M-FlipCard.up.go .back:before { + -webkit-animation: backFlipUp var(--flipduration)linear both; + animation: backFlipUp var(--flipduration)linear both +} + +@keyframes frontFlipDown { + 0% { + background-color: #fff; + transform: perspective(160px)rotatex(0) + } + + 50% { + background-color: #f5f5f5; + transform: perspective(160px)rotatex(-90deg) + } + + to { + background-color: #fff; + transform: perspective(160px)rotatex(-180deg) + } +} + +@keyframes backFlipDown { + 0% { + background-color: #fff; + transform: perspective(160px)rotatex(180deg) + } + + 50% { + background-color: #f5f5f5; + transform: perspective(160px)rotatex(90deg) + } + + to { + background-color: #fff; + transform: perspective(160px)rotatex(0) + } +} + +@keyframes frontFlipUp { + 0% { + transform: perspective(160px)rotatex(0) + } + + to { + transform: perspective(160px)rotatex(180deg) + } +} + +@keyframes backFlipUp { + 0% { + transform: perspective(160px)rotatex(-180deg) + } + + to { + transform: perspective(160px)rotatex(0) + } +} + +.M-FlipCard .number0:before,.M-FlipCard .number0:after { + content: "0" +} + +.M-FlipCard .number1:before,.M-FlipCard .number1:after { + content: "1" +} + +.M-FlipCard .number2:before,.M-FlipCard .number2:after { + content: "2" +} + +.M-FlipCard .number3:before,.M-FlipCard .number3:after { + content: "3" +} + +.M-FlipCard .number4:before,.M-FlipCard .number4:after { + content: "4" +} + +.M-FlipCard .number5:before,.M-FlipCard .number5:after { + content: "5" +} + +.M-FlipCard .number6:before,.M-FlipCard .number6:after { + content: "6" +} + +.M-FlipCard .number7:before,.M-FlipCard .number7:after { + content: "7" +} + +.M-FlipCard .number8:before,.M-FlipCard .number8:after { + content: "8" +} + +.M-FlipCard .number9:before,.M-FlipCard .number9:after { + content: "9" +} + +html[data-theme-mode=dark] .M-FlipCard { + color: #fff +} + +html[data-theme-mode=dark] .M-FlipCard .digital:before,html[data-theme-mode=dark] .M-FlipCard .digital:after { + background: #333 +} + +html[data-theme-mode=dark] .M-FlipCard .digital:before { + border-bottom-color: #444 +} + +@keyframes frontFlipDownDark { + 0% { + background-color: #333; + transform: perspective(160px)rotatex(0) + } + + 50% { + background-color: #2a2a2a; + transform: perspective(160px)rotatex(-90deg) + } + + to { + background-color: #333; + transform: perspective(160px)rotatex(-180deg) + } +} + +@keyframes backFlipDownDark { + 0% { + background-color: #333; + transform: perspective(160px)rotatex(180deg) + } + + 50% { + background-color: #2a2a2a; + transform: perspective(160px)rotatex(90deg) + } + + to { + background-color: #333; + transform: perspective(160px)rotatex(0) + } +} + + +.blurry { + background: rgba(0, 0, 0, 0.28); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border-radius: 14px; + box-sizing: border-box; +} + + +/* ── Mobile: headline backdrop 仅在 md+ 显示，移动端用纯透明渐变遮罩代替 ── */ +@media (max-width: 767px) { + .hero-headline { + /* 移动端简化背景：柔和深色毛玻璃，增强可读性 */ + background: rgba(0, 0, 0, 0.28); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + border-radius: 14px; + padding: 14px 16px 12px; + width: calc(100vw - 32px); + box-sizing: border-box; + } + /* 移动端 h1 去掉 px，由父级 padding 控制 */ + .hero-headline h1 { + padding-left: 0 !important; + padding-right: 0 !important; + } +} + +/* ── Mobile: 输入框容器宽度修正 ── */ +@media (max-width: 767px) { + .hero-input-wrap { + width: 100%; + box-sizing: border-box; + } + /* 发送按钮文字在极小屏不换行 */ + .sendBtn > div { + white-space: nowrap; + } +} + +/* ── Mobile: 按钮组在移动端全宽展示，企业感间距 ── */ +@media (max-width: 639px) { + .hero-actions { + position: relative; + } + .hero-actions a { + width: 100%; + } + .hero-actions a button { + border-radius: 10px; + font-size: 15px; + height: 48px; + } +} + +/* ── Mobile: 底部统计翻牌区 移动端隐藏（原逻辑保留） ── */ +@media (max-width: 767px) { + .hero-stats { + display: none !important; + } +} + + +/* ── 极小屏 (<375px) 紧凑模式 ── */ +@media (max-width: 374px) { + .hero-headline { + padding: 10px 12px; + } + .hero-actions a button { + height: 44px; + font-size: 14px; + } +} + + + + + + + + + + + + + + + + + + + + + + + +/* ========================================= + 全局智能磨砂滚动条 (复制此段代码到 ) + ========================================= */ + +html { + /* 定义基础变量 */ + --sb-size: 6px; + --sb-track: transparent; + /* + 技巧：利用 mix-blend-mode: difference 让滑块颜色自动反转 + 无论背景黑还是白，它都会变成对比色，实现全自动适配 + */ + --sb-thumb-blend: difference; + --sb-thumb-color: rgba(200, 200, 200, 0.5); + --sb-thumb-hover: rgba(255, 255, 255, 0.8); +} + +/* 针对滚动条容器 */ +html, body, * { + scrollbar-width: thin; /* Firefox */ + scrollbar-color: rgba(128, 128, 128, 0.3) transparent; +} + +/* 定义滚动条变量 - 核心配置 */ +:root { + /* 滚动条尺寸 - 更细更低调 */ + --sb-size: 6px; + /* 轨道背景 - 完全透明 */ + --sb-track: transparent; + /* 滚动条滑块基础色 - 极低透明度的灰色 */ + --sb-thumb-color: rgba(156, 163, 175, 0.15); + /* 混合模式 - 叠加模式增强融合性 */ + --sb-thumb-blend: overlay; + /* 悬停色 - 略微提高透明度 */ + --sb-thumb-hover: rgba(156, 163, 175, 0.3); +} +/* +::-webkit-scrollbar { + width: var(--sb-size); + height: var(--sb-size); + background: transparent; +} + +::-webkit-scrollbar-track { + background: var(--sb-track); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + background-color: transparent; + box-shadow: inset 0 0 0 100px rgba(120, 120, 120, 0.08); +} +::-webkit-scrollbar-thumb:hover { + box-shadow: inset 0 0 0 100px rgba(120, 120, 120, 0.2); +} +::-webkit-scrollbar-corner { + background: transparent; +} +* { + scrollbar-width: thin; + scrollbar-color: rgba(156, 163, 175, 0.15) transparent; }*/ \ No newline at end of file diff --git a/src/views/MembersView.vue b/src/views/MembersView.vue index 86fc3e6..8eeae59 100644 --- a/src/views/MembersView.vue +++ b/src/views/MembersView.vue @@ -1,548 +1,548 @@ - - - - - + + + + +