/* 导入 Google Font (示例：Lato) - 需要在 HTML 的 中添加链接 */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); */
/* 或者使用 Noto Sans SC 获得更好的中文字体支持 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
/* --- 全局样式 --- */
body {
/* font-family: 'Lato', sans-serif; */ /* 使用导入的字体 */
font-family: 'Noto Sans SC', sans-serif; /* 或者使用 Noto Sans SC */
margin: 0;
padding: 0;
background-color: #f8f9fa; /* 更柔和的背景色 */
color: #343a40; /* 深灰色文字，对比度好 */
line-height: 1.6; /* 改善阅读行高 */
padding-bottom: 80px; /* 为静态页脚留出空间 (如果页脚不再固定) */
}
/* --- 头部样式 --- */
header {
background-color: #343a40; /* 深灰蓝，更显稳重 */
color: white;
padding: 25px 0; /* 增加垂直内边距 */
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加细微阴影 */
}
header h1 {
margin: 0;
font-weight: 700; /* 标题加粗 */
font-size: 2em; /* 调整标题大小 */
}
header p {
color: #adb5bd; /* 副标题使用浅灰色 */
font-size: 1em;
margin-top: 5px;
}
/* --- 平台页面导航栏 (.NavigationBar) --- */
.NavigationBar {
padding-top: 15px; /* 在标题下方增加一些间距 */
}
.NavigationBar a {
font-size: 1.1em; /* 减小导航字体大小 */
text-align: center;
text-decoration: none;
color: #dee2e6; /* 使用更柔和的浅灰色 */
margin: 0 15px; /* 调整链接间距 */
padding: 5px 0; /* 增加垂直点击区域 */
border-bottom: 2px solid transparent; /* 为 hover 效果准备 */
transition: color 0.3s ease, border-bottom-color 0.3s ease; /* 平滑过渡 */
}
.NavigationBar a:hover,
.NavigationBar a:focus { /* :focus 用于键盘导航 */
color: #ffffff; /* 悬停时变白 */
border-bottom-color: #ffffff; /* 添加下划线效果 */
}
/* --- 主内容区域 --- */
.container {
max-width: 850px; /* 可以稍微加宽一点 */
margin: 30px auto; /* 增加上下外边距 */
padding: 30px; /* 增加内边距 */
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 更柔和的阴影 */
border-radius: 8px; /* 添加圆角 */
}
/* --- 首页平台链接 (.platform-links) --- */
.platform-links h2 {
margin-bottom: 25px; /* 增加标题下方间距 */
font-weight: 700;
color: #495057;
}
.platform-links ul {
list-style: none;
padding: 0;
text-align: center;
}
.platform-links ul li {
display: inline-block; /* 改为 inline-block 以应用更多样式 */
margin: 10px 10px; /* 增加列表项间距 */
}
.platform-links ul li a {
text-decoration: none;
color: #ffffff; /* 按钮文字白色 */
background-color: #007bff; /* 主题蓝色 */
padding: 12px 25px; /* 增大按钮内边距 */
font-size: 1.1em;
border-radius: 5px; /* 按钮圆角 */
transition: background-color 0.3s ease, transform 0.2s ease; /* 平滑过渡 */
display: block; /* 让链接充满 li */
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); /* 按钮阴影 */
}
.platform-links ul li a:hover {
background-color: #0056b3; /* 悬停时颜色变深 */
transform: translateY(-2px); /* 轻微上移效果 */
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
/* --- 软件列表项 (.software-item) --- */
.software-item {
border-bottom: 1px solid #e9ecef; /* 更浅的分隔线 */
padding: 20px 0; /* 增加上下内边距 */
}
.software-item:last-child {
border-bottom: none;
}
.software-item h3 {
margin-top: 0;
margin-bottom: 10px; /* 调整标题下方间距 */
display: flex; /* 使用 Flexbox 对齐图标和文字 */
align-items: center; /* 垂直居中对齐 */
font-size: 1.3em;
color: #343a40;
}
.software-item h3 img {
width: 32px; /* 稍微调整图标大小 */
height: 32px;
margin-right: 10px; /* 图标和文字间距 */
flex-shrink: 0; /* 防止图标被压缩 */
}
.software-item h3 .description {
color: #6c757d; /* 描述文字用次级灰色 */
font-size: 0.8em; /* 描述字体稍小 */
font-weight: 400; /* 正常字重 */
margin-left: 8px; /* 与标题名称的间距 */
white-space: nowrap; /* 如果希望描述不换行 */
overflow: hidden; /* 配合 nowrap 防止溢出 */
text-overflow: ellipsis; /* 溢出时显示省略号 */
}
.software-item .download-link {
display: inline-block;
background-color: #28a745; /* 绿色下载按钮，更醒目 */
color: white;
padding: 8px 18px; /* 调整按钮大小 */
text-decoration: none;
border-radius: 5px;
margin-right: 15px; /* 增加与历史版本链接的间距 */
font-size: 0.95em;
transition: background-color 0.3s ease;
}
.software-item .download-link:hover {
background-color: #218838; /* 悬停颜色变深 */
}
.software-item .history-link {
text-decoration: none;
color: #007bff; /* 历史版本链接用主题蓝 */
font-size: 0.9em;
transition: color 0.3s ease;
}
.software-item .history-link:hover {
color: #0056b3; /* 悬停颜色变深 */
text-decoration: underline; /* 添加下划线 */
}
/* --- 历史版本列表 (.history-versions) --- */
.history-versions {
margin-top: 15px; /* 与上方链接的间距 */
padding-left: 0; /* 移除默认内边距 */
background-color: #f8f9fa; /* 给历史版本区域一个浅背景 */
border-radius: 4px;
padding: 10px 15px;
border: 1px solid #e9ecef;
}
.history-versions ul {
list-style: none;
padding: 0;
margin: 0; /* 移除 ul 的默认外边距 */
}
.history-versions ul li {
margin-bottom: 8px; /* 列表项间距 */
}
.history-versions ul li:last-child {
margin-bottom: 0;
}
.history-versions ul li a {
color: #495057; /* 历史版本链接颜色 */
text-decoration: none;
font-size: 0.9em;
transition: color 0.3s ease;
}
.history-versions ul li a:hover {
color: #007bff; /* 悬停时用主题蓝 */
}
/* --- 页脚样式 --- */
footer {
text-align: center;
padding: 20px 0; /* 增加页脚内边距 */
background-color: #e9ecef; /* 浅灰色背景 */
color: #6c757d; /* 页脚文字颜色 */
/* position: fixed; */ /* 移除固定定位 */
/* bottom: 0; */
/* width: 100%; */
margin-top: 40px; /* 与上方内容的间距 */
border-top: 1px solid #dee2e6; /* 添加顶部边框 */
}
/* --- 响应式设计 (针对小屏幕设备) --- */
@media (max-width: 768px) { /* 调整断点 */
.container {
margin: 20px 15px; /* 调整外边距 */
padding: 20px; /* 调整内边距 */
}
header h1 {
font-size: 1.8em;
}
.NavigationBar a {
font-size: 1em;
margin: 0 10px;
}
.platform-links ul li {
display: block; /* 在小屏幕上让平台链接独占一行 */
margin: 15px auto; /* 调整间距 */
width: 80%; /* 限制宽度 */
max-width: 300px; /* 最大宽度 */
}
.software-item h3 {
font-size: 1.2em;
}
.software-item h3 .description {
/* 在小屏幕上可以考虑换行或隐藏 */
/* white-space: normal; */ /* 允许换行 */
font-size: 0.75em;
}
.software-item .download-link,
.software-item .history-link {
font-size: 0.9em; /* 统一调整按钮/链接大小 */
padding: 6px 12px;
}
}
@media (max-width: 480px) {
body {
font-size: 15px; /* 为非常小的屏幕稍微调整基础字体 */
padding-bottom: 70px; /* 调整页脚空间 */
}
header {
padding: 20px 0;
}
header h1 {
font-size: 1.6em;
}
.NavigationBar a {
margin: 0 5px; /* 进一步减小导航链接间距 */
font-size: 0.95em;
}
.software-item h3 {
align-items: flex-start; /* 图标和文字顶部对齐，防止描述换行时错位 */
}
.software-item h3 .description {
white-space: normal; /* 在最小屏幕上允许描述换行 */
margin-left: 0; /* 如果换行，去掉左边距 */
display: block; /* 让描述成为块级元素 */
margin-top: 5px; /* 与标题名称增加间距 */
}
.software-item .download-link {
display: block; /* 下载按钮独占一行 */
margin-bottom: 10px; /* 与历史链接的间距 */
margin-right: 0;
text-align: center;
}
.software-item .history-link {
display: block; /* 历史链接也独占一行 */
text-align: center; /* 居中显示 */
}
}