feat: 完成网站功能开发与优化
- 完善产品页面布局与交互 - 优化服务详情页用户体验 - 增强新闻模块内容展示 - 改进团队页面设计 - 优化全局样式和响应式布局 - 添加分页组件支持 - 提升性能与SEO优化 - 修复已知问题与改进代码质量
This commit is contained in:
张翔
+41
-40
@@ -98,6 +98,19 @@
|
||||
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
/* z-index 层级 */
|
||||
--z-sticky: 40;
|
||||
--z-dropdown: 50;
|
||||
--z-modal: 100;
|
||||
--z-toast: 200;
|
||||
|
||||
/* border-radius */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 24px;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -304,36 +317,36 @@
|
||||
}
|
||||
|
||||
.transition-smooth {
|
||||
transition: all var(--transition-normal) var(--ease-out);
|
||||
transition: color var(--transition-normal) var(--ease-out), background-color var(--transition-normal) var(--ease-out), border-color var(--transition-normal) var(--ease-out), opacity var(--transition-normal) var(--ease-out);
|
||||
}
|
||||
|
||||
|
||||
.transition-fast {
|
||||
transition: all var(--transition-fast) var(--ease-out);
|
||||
transition: color var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out), border-color var(--transition-fast) var(--ease-out), opacity var(--transition-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
/* 渐变背景 - Wickret 风格 */
|
||||
.bg-gradient-modern {
|
||||
background: linear-gradient(135deg, var(--color-dark-bg) 0%, #1a1a2e 50%, #16213e 100%);
|
||||
background: linear-gradient(135deg, #1C1C1C 0%, #1a1a2e 50%, #16213e 100%);
|
||||
}
|
||||
|
||||
|
||||
.bg-gradient-brand {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
|
||||
background: linear-gradient(135deg, #C41E3A, #E04A68, #1C1C1C);
|
||||
}
|
||||
|
||||
|
||||
.bg-gradient-radial {
|
||||
background: radial-gradient(ellipse at center, var(--color-gradient-start) 0%, transparent 70%);
|
||||
background: radial-gradient(ellipse at center, #C41E3A 0%, transparent 70%);
|
||||
}
|
||||
|
||||
|
||||
/* 渐变文字 */
|
||||
.text-gradient-brand {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
|
||||
background: linear-gradient(135deg, #C41E3A, #E04A68, #1C1C1C);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
|
||||
.text-gradient-cyan {
|
||||
background: linear-gradient(135deg, var(--color-gradient-cyan), var(--color-gradient-mid));
|
||||
background: linear-gradient(135deg, #C41E3A, #E04A68);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@@ -341,7 +354,7 @@
|
||||
|
||||
/* 发光效果 */
|
||||
.bg-glow-red {
|
||||
background: radial-gradient(circle at center, var(--color-accent-red-glow) 0%, transparent 70%);
|
||||
background: radial-gradient(circle at center, rgba(196, 30, 58, 0.3) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.bg-glow-purple {
|
||||
@@ -532,7 +545,7 @@
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s var(--ease-out);
|
||||
transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.geometric-card::before,
|
||||
@@ -543,7 +556,7 @@
|
||||
height: 12px;
|
||||
border: 1px solid rgba(196, 30, 58, 0.15);
|
||||
opacity: 0;
|
||||
transition: all 0.3s var(--ease-out);
|
||||
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.geometric-card::before {
|
||||
@@ -619,7 +632,7 @@
|
||||
.scroll-reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s var(--ease-out);
|
||||
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
|
||||
}
|
||||
|
||||
.scroll-reveal.revealed {
|
||||
@@ -827,21 +840,21 @@
|
||||
|
||||
@keyframes expandWidth {
|
||||
0% {
|
||||
width: 0;
|
||||
transform: scaleX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
transform: scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
from {
|
||||
width: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -907,6 +920,7 @@
|
||||
|
||||
.animate-expand-width {
|
||||
animation: expandWidth 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
@@ -988,7 +1002,7 @@
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.seal-stamp:hover::before {
|
||||
@@ -1032,7 +1046,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
@@ -1047,7 +1061,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
@@ -1063,7 +1077,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
@@ -1077,7 +1091,7 @@
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.card-health:hover {
|
||||
@@ -1087,13 +1101,13 @@
|
||||
}
|
||||
|
||||
.icon-container-primary {
|
||||
background: linear-gradient(135deg, rgba(0, 94, 184, 0.1), rgba(0, 163, 224, 0.1));
|
||||
background: linear-gradient(135deg, rgba(196, 30, 58, 0.1), rgba(224, 74, 104, 0.1));
|
||||
border-radius: 12px;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-container-primary:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 94, 184, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(196, 30, 58, 0.15);
|
||||
}
|
||||
|
||||
.icon-container-brand {
|
||||
@@ -1131,19 +1145,6 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 优化移动端文字大小 */
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
/* 优化移动端按钮和链接的触摸目标 */
|
||||
a, button {
|
||||
min-height: 44px;
|
||||
|
||||
Reference in New Issue
Block a user