feat(app): 添加多模板关于我们页面及相关路由和404页面

- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
2026-09-08 12:13:44 +08:00
commit 2b69686795
381 changed files with 59891 additions and 0 deletions
@@ -0,0 +1,140 @@
+/* =========================================================
+   全局动效样式（首页动态效果）
+   零依赖：纯 CSS + 原生 IntersectionObserver（见 reveal.client.ts）
+   ========================================================= */
+
+/* ---------- 滚动渐显（Scroll Reveal） ----------
+   初始隐藏仅在 JS 可用（<html class="js">）时生效，避免无 JS 时内容不可见；
+   元素进入视口由 reveal.client.ts 加 .is-visible 触发过渡。 */
+.js [data-reveal] {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
+    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: opacity, transform;
+}
+.js [data-reveal='left'] {
+  transform: translateX(-40px);
+}
+.js [data-reveal='right'] {
+  transform: translateX(40px);
+}
+.js [data-reveal='zoom'] {
+  transform: scale(0.94);
+}
+.js [data-reveal].is-visible {
+  opacity: 1;
+  transform: none;
+}
+
+/* ---------- 首屏背景渐变流动 ---------- */
+.anim-gradient {
+  background-size: 200% 200%;
+  animation: anim-gradient-shift 16s ease infinite;
+}
+@keyframes anim-gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* ---------- 漂浮柔光球 ---------- */
+.anim-blob {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(46px);
+  opacity: 0.5;
+  pointer-events: none;
+  animation: anim-float 9s ease-in-out infinite;
+}
+.anim-blob--2 {
+  animation-duration: 13s;
+  animation-direction: reverse;
+}
+@keyframes anim-float {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(14px, -26px, 0);
+  }
+}
+
+/* ---------- CTA 按钮光泽扫过 ---------- */
+.anim-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.anim-shimmer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 45%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.5),
+    transparent
+  );
+  transform: translateX(-160%) skewX(-18deg);
+  animation: anim-shimmer 3.4s ease-in-out infinite;
+}
+@keyframes anim-shimmer {
+  0% {
+    transform: translateX(-160%) skewX(-18deg);
+  }
+  60%,
+  100% {
+    transform: translateX(280%) skewX(-18deg);
+  }
+}
+
+/* ---------- 卡片 hover 增强：上浮 + 封面放大 ---------- */
+.anim-card {
+  transition: transform 0.35s ease, box-shadow 0.35s ease;
+}
+.anim-card:hover {
+  transform: translateY(-6px);
+}
+.anim-card-media {
+  overflow: hidden;
+}
+.anim-card-media img {
+  transition: transform 0.55s ease;
+}
+.anim-card:hover .anim-card-media img {
+  transform: scale(1.06);
+}
+
+/* ---------- 无障碍：关闭所有动效 ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .js [data-reveal] {
+    opacity: 1 !important;
+    transform: none !important;
+    transition: none !important;
+  }
+  .anim-gradient,
+  .anim-blob,
+  .anim-shimmer::after {
+    animation: none !important;
+  }
+  .anim-card,
+  .anim-card-media img {
+    transition: none !important;
+  }
+  .anim-card:hover {
+    transform: none !important;
+  }
+  .anim-card:hover .anim-card-media img {
+    transform: none !important;
+  }
+}