feat(app): 添加多模板关于我们页面及相关路由和404页面
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ==================== 全局基础样式 ==================== */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Noto Sans SC", "Source Han Sans SC", "思源黑体", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* ==================== 通用工具类 ==================== */
|
||||
.container-prose {
|
||||
@apply mx-auto max-w-3xl px-4 sm:px-6;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* 文本截断 */
|
||||
.text-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user