You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.6 KiB
87 lines
1.6 KiB
|
|
:root {
|
|
font-family: 'Roboto', 'Open Sans', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
color-scheme: light dark;
|
|
color: #333333;
|
|
background-color: #ffffff;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* 自定义变量 */
|
|
:root {
|
|
--primary-color: #0066cc; /* 科技蓝 */
|
|
--secondary-color: #333333; /* 深灰 */
|
|
--accent-color: #00aaff; /* 亮色点缀 */
|
|
--background-color: #ffffff; /* 白色 */
|
|
--text-color: #333333; /* 文本颜色 */
|
|
}
|
|
|
|
/* 基础样式 */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Roboto', 'Open Sans', sans-serif;
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
overflow-x: hidden; /* 防止水平滚动条 */
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* 容器样式 */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
/* 视差滚动相关样式 */
|
|
.parallax-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
.parallax-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 120%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transform: translateZ(0);
|
|
will-change: transform;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* 动画过渡效果 */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|