mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-04-22 22:00:00 +08:00
2a5aa51ff5
* 在 `index.html` 中添加了新的元数据和样式，以提升SEO和用户体验。 * 移除 `src/main.js` 文件，简化项目结构，集中管理逻辑。 * 新增 `SearchHeader.vue` 组件，重构搜索表单和状态显示，优化用户交互。 * 更新样式以符合 Material 3 设计规范，增强视觉一致性。
519 lines
19 KiB
HTML
519 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<!-- Primary Meta Tags -->
|
||
<title>SearchGal - Galgame 聚合搜索</title>
|
||
<meta name="title" content="SearchGal - Galgame 聚合搜索" />
|
||
<meta
|
||
name="description"
|
||
content="Galgame 资源聚合搜索引擎，支持多站点搜索、游戏信息查询、补丁下载。一站式搜索体验，快速找到你想要的 Galgame 资源。"
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="Galgame,美少女游戏,游戏搜索,补丁下载,VNDB,聚合搜索,SearchGal"
|
||
/>
|
||
<meta name="author" content="SearchGal Team" />
|
||
<meta name="robots" content="index, follow" />
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://searchgal.homes/" />
|
||
<meta property="og:title" content="SearchGal - Galgame 聚合搜索" />
|
||
<meta
|
||
property="og:description"
|
||
content="Galgame 资源聚合搜索引擎，支持多站点搜索、游戏信息查询、补丁下载。一站式搜索体验，快速找到你想要的 Galgame 资源。"
|
||
/>
|
||
<meta property="og:image" content="https://searchgal.homes/og-image.png" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
<meta property="og:locale" content="zh_CN" />
|
||
<meta property="og:site_name" content="SearchGal" />
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image" />
|
||
<meta property="twitter:url" content="https://searchgal.homes/" />
|
||
<meta property="twitter:title" content="SearchGal - Galgame 聚合搜索" />
|
||
<meta
|
||
property="twitter:description"
|
||
content="Galgame 资源聚合搜索引擎，支持多站点搜索、游戏信息查询、补丁下载。"
|
||
/>
|
||
<meta
|
||
property="twitter:image"
|
||
content="https://searchgal.homes/og-image.png"
|
||
/>
|
||
|
||
<!-- PWA -->
|
||
<meta name="theme-color" content="#ec4899" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta
|
||
name="apple-mobile-web-app-status-bar-style"
|
||
content="black-translucent"
|
||
/>
|
||
<meta name="apple-mobile-web-app-title" content="SearchGal" />
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||
<link rel="manifest" href="/manifest.webmanifest" />
|
||
|
||
<!-- Canonical URL -->
|
||
<link rel="canonical" href="https://searchgal.homes/" />
|
||
|
||
<!-- Material Symbols - 本地字体（预加载） -->
|
||
<link
|
||
rel="preload"
|
||
href="/fonts/MaterialSymbolsOutlined.woff2"
|
||
as="font"
|
||
type="font/woff2"
|
||
crossorigin
|
||
fetchpriority="high"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="/fonts/material-symbols.css"
|
||
fetchpriority="high"
|
||
/>
|
||
|
||
<style>
|
||
/* 修复 Material 3 图标显示 */
|
||
md-icon {
|
||
font-family: "Material Symbols Outlined", sans-serif !important;
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-size: 24px;
|
||
line-height: 1;
|
||
letter-spacing: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
word-wrap: normal;
|
||
direction: ltr;
|
||
-webkit-font-feature-settings: "liga";
|
||
-webkit-font-smoothing: antialiased;
|
||
font-feature-settings: "liga";
|
||
}
|
||
</style>
|
||
|
||
<!-- Roboto 字体 - 优先使用系统字体，无需外部加载 -->
|
||
|
||
<style>
|
||
:root {
|
||
/* Material 3 主题色 - 粉色/紫色系 */
|
||
--md-sys-color-primary: rgb(236, 72, 153);
|
||
--md-sys-color-on-primary: rgb(255, 255, 255);
|
||
--md-sys-color-primary-container: rgb(252, 231, 243);
|
||
--md-sys-color-on-primary-container: rgb(139, 10, 80);
|
||
|
||
--md-sys-color-secondary: rgb(99, 102, 241);
|
||
--md-sys-color-on-secondary: rgb(255, 255, 255);
|
||
--md-sys-color-secondary-container: rgb(224, 231, 255);
|
||
--md-sys-color-on-secondary-container: rgb(26, 35, 126);
|
||
|
||
--md-sys-color-surface: rgba(255, 251, 254, 0.95);
|
||
--md-sys-color-on-surface: rgb(29, 27, 30);
|
||
--md-sys-color-surface-variant: rgba(243, 221, 235, 0.9);
|
||
--md-sys-color-on-surface-variant: rgb(81, 67, 79);
|
||
|
||
--md-sys-color-background: rgb(255, 251, 254);
|
||
--md-sys-color-on-background: rgb(29, 27, 30);
|
||
|
||
--md-sys-color-error: rgb(186, 26, 26);
|
||
--md-sys-color-on-error: rgb(255, 255, 255);
|
||
}
|
||
|
||
body {
|
||
/* 优先使用系统字体，Roboto 作为备选 */
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
"Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB",
|
||
"Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
|
||
"Roboto", Helvetica, Arial, sans-serif;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
overflow-wrap: break-word;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: var(--md-sys-color-background);
|
||
color: var(--md-sys-color-on-background);
|
||
/* 平滑滚动 */
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
#app {
|
||
min-height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
/* 全局滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgb(236, 72, 153),
|
||
rgb(139, 92, 246)
|
||
);
|
||
border-radius: 10px;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgb(219, 39, 119),
|
||
rgb(124, 58, 237)
|
||
);
|
||
}
|
||
|
||
/* 选中文本样式 */
|
||
::selection {
|
||
background: rgba(236, 72, 153, 0.3);
|
||
color: inherit;
|
||
}
|
||
|
||
/* 背景图层样式 */
|
||
#background-layer {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
z-index: -2;
|
||
}
|
||
|
||
/* 默认背景纹理 */
|
||
#background-layer::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f0bbbb
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23000000' fill-opacity='0.05' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E")
|
||
center;
|
||
z-index: -1;
|
||
transition: opacity 0.8s ease-in-out;
|
||
}
|
||
|
||
/* 当有随机图时，隐藏默认纹理 */
|
||
#background-layer.has-image::before {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* 半透明遮罩层，让内容更清晰 */
|
||
#background-layer::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Material 3 组件样式自定义 - 柔和优化 */
|
||
md-filled-text-field,
|
||
md-outlined-text-field {
|
||
width: 100%;
|
||
--md-filled-text-field-container-color: rgba(255, 255, 255, 0.98);
|
||
--md-filled-text-field-focus-active-indicator-color: var(
|
||
--md-sys-color-primary
|
||
);
|
||
--md-filled-text-field-container-shape: 20px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
|
||
0 2px 4px rgba(0, 0, 0, 0.04);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
md-filled-text-field:hover {
|
||
box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15),
|
||
0 4px 8px rgba(0, 0, 0, 0.08);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
md-filled-text-field:focus-within {
|
||
box-shadow: 0 12px 32px rgba(236, 72, 153, 0.2),
|
||
0 6px 12px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-3px) scale(1.01);
|
||
}
|
||
|
||
md-filled-button {
|
||
--md-filled-button-container-color: linear-gradient(
|
||
135deg,
|
||
rgb(236, 72, 153),
|
||
rgb(219, 39, 119)
|
||
);
|
||
--md-filled-button-label-text-color: var(--md-sys-color-on-primary);
|
||
--md-filled-button-container-shape: 16px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35),
|
||
0 3px 8px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
md-filled-button::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.3),
|
||
transparent
|
||
);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
md-filled-button:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
md-filled-button:hover {
|
||
box-shadow: 0 10px 32px rgba(236, 72, 153, 0.5),
|
||
0 6px 16px rgba(0, 0, 0, 0.15);
|
||
transform: translateY(-3px) scale(1.02);
|
||
}
|
||
|
||
md-filled-button:active {
|
||
transform: translateY(-1px) scale(0.98);
|
||
box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4);
|
||
}
|
||
|
||
md-fab {
|
||
--md-fab-container-color: var(--md-sys-color-primary);
|
||
--md-fab-icon-color: var(--md-sys-color-on-primary);
|
||
--md-fab-container-shape: 24px;
|
||
box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4),
|
||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
md-fab:hover {
|
||
box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5),
|
||
0 6px 20px rgba(0, 0, 0, 0.2);
|
||
transform: translateY(-4px) scale(1.08) rotate(5deg);
|
||
}
|
||
|
||
md-fab:active {
|
||
transform: translateY(-2px) scale(1.02);
|
||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
|
||
}
|
||
|
||
md-elevated-card,
|
||
md-filled-card,
|
||
md-outlined-card {
|
||
--md-elevated-card-container-color: rgba(255, 255, 255, 0.85);
|
||
--md-elevated-card-container-shape: 24px;
|
||
border-radius: 24px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
|
||
0 4px 16px rgba(0, 0, 0, 0.04);
|
||
backdrop-filter: blur(30px) saturate(150%);
|
||
-webkit-backdrop-filter: blur(30px) saturate(150%);
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
md-elevated-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(236, 72, 153, 0.1),
|
||
transparent
|
||
);
|
||
transition: left 0.6s ease;
|
||
}
|
||
|
||
md-elevated-card:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
md-elevated-card:hover,
|
||
md-filled-card:hover,
|
||
md-outlined-card:hover {
|
||
box-shadow: 0 16px 48px rgba(236, 72, 153, 0.15),
|
||
0 8px 24px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-4px) scale(1.01);
|
||
border-color: rgba(236, 72, 153, 0.3);
|
||
}
|
||
|
||
md-assist-chip,
|
||
md-filter-chip {
|
||
--md-assist-chip-container-shape: 16px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
md-assist-chip:hover,
|
||
md-filter-chip:hover {
|
||
transform: scale(1.08) translateY(-2px);
|
||
box-shadow: 0 4px 16px rgba(236, 72, 153, 0.2);
|
||
}
|
||
|
||
md-filter-chip[selected] {
|
||
box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3);
|
||
}
|
||
50% {
|
||
box-shadow: 0 6px 24px rgba(236, 72, 153, 0.5);
|
||
}
|
||
}
|
||
|
||
md-list-item {
|
||
border-radius: 16px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
margin: 4px 0;
|
||
}
|
||
|
||
md-list-item:hover {
|
||
background-color: rgba(236, 72, 153, 0.08);
|
||
transform: translateX(4px);
|
||
box-shadow: 0 2px 8px rgba(236, 72, 153, 0.15);
|
||
}
|
||
|
||
md-icon {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
md-icon:hover {
|
||
transform: scale(1.15) rotate(10deg);
|
||
filter: drop-shadow(0 2px 4px rgba(236, 72, 153, 0.3));
|
||
}
|
||
|
||
/* 对话框优化 */
|
||
md-dialog {
|
||
--md-dialog-container-shape: 32px;
|
||
border-radius: 32px;
|
||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25),
|
||
0 12px 32px rgba(0, 0, 0, 0.15);
|
||
backdrop-filter: blur(40px);
|
||
-webkit-backdrop-filter: blur(40px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* 进度条优化 */
|
||
md-linear-progress {
|
||
--md-linear-progress-track-shape: 8px;
|
||
border-radius: 8px;
|
||
height: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 图标按钮优化 */
|
||
md-icon-button {
|
||
--md-icon-button-state-layer-shape: 50%;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
md-icon-button:hover {
|
||
transform: scale(1.15) rotate(5deg);
|
||
filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.3));
|
||
}
|
||
|
||
/* 加载动画 */
|
||
@keyframes shimmer {
|
||
0% {
|
||
background-position: -1000px 0;
|
||
}
|
||
100% {
|
||
background-position: 1000px 0;
|
||
}
|
||
}
|
||
|
||
.loading-shimmer {
|
||
animation: shimmer 2s infinite linear;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(255, 255, 255, 0) 0%,
|
||
rgba(255, 255, 255, 0.3) 50%,
|
||
rgba(255, 255, 255, 0) 100%
|
||
);
|
||
background-size: 1000px 100%;
|
||
}
|
||
|
||
/* 淡入动画 */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fade-in {
|
||
animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
/* 弹跳动画 */
|
||
@keyframes bounce {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
.bounce {
|
||
animation: bounce 1s ease-in-out infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module" src="/src/main.ts"></script>
|
||
|
||
<!-- busuanzi 统计 (保留原有CDN) -->
|
||
<script
|
||
async
|
||
src="https://registry.npmmirror.com/js-asuna/latest/files/js/bsz.pure.mini.js"
|
||
data-swup-reload-script
|
||
fetchpriority="low"
|
||
></script>
|
||
</body>
|
||
</html>
|