style.css•3.23 kB
/* 全局样式 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* 导航栏样式 */
.navbar-brand {
font-weight: 700;
}
.container {
max-width: 1200px;
}
/* 卡片样式 */
.card {
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* 项目卡片样式 */
.project-card {
height: 100%;
display: flex;
flex-direction: column;
}
.project-card .card-body {
flex: 1;
}
.project-card .card-footer {
background-color: rgba(0, 0, 0, 0.02);
padding: 0.75rem 1.25rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
/* 代码示例样式 */
.code-example {
background-color: #f8f9fa;
border-radius: 6px;
overflow: hidden;
margin-bottom: 1.5rem;
}
.code-example pre {
margin-bottom: 0;
padding: 1rem;
font-size: 0.9rem;
}
/* 特性列表样式 */
.feature-list li {
margin-bottom: 0.5rem;
position: relative;
padding-left: 1.5rem;
}
.feature-list li::before {
content: '•';
position: absolute;
left: 0;
color: #007bff;
font-weight: bold;
}
/* 页脚样式 */
.footer {
margin-top: auto;
padding: 1.5rem 0;
background-color: #f8f9fa;
border-top: 1px solid #e9ecef;
}
.footer p {
margin-bottom: 0.5rem;
}
/* API参考样式 */
.api-section {
margin-bottom: 3rem;
}
.api-method {
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.api-method h3 {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e9ecef;
}
.api-method .method-badge {
margin-right: 1rem;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-weight: 700;
font-size: 0.8rem;
}
.method-get {
background-color: #e3f2fd;
color: #0d47a1;
}
.method-post {
background-color: #e8f5e9;
color: #1b5e20;
}
.method-put {
background-color: #fff8e1;
color: #ff6f00;
}
.method-delete {
background-color: #ffebee;
color: #b71c1c;
}
.api-method .endpoint {
font-family: monospace;
font-size: 1rem;
color: #333;
padding: 0.25rem 0.5rem;
background-color: #f5f5f5;
border-radius: 4px;
word-break: break-all;
}
.api-params {
margin-bottom: 1.5rem;
}
.api-response {
padding: 1rem;
background-color: #f8f9fa;
border-radius: 6px;
}
/* 响应式调整 */
@media (max-width: 767.98px) {
.api-method h3 {
flex-direction: column;
align-items: flex-start;
}
.api-method .method-badge {
margin-bottom: 0.5rem;
}
}
/* 添加自定义样式可以覆盖Bootstrap的导航栏样式 */
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.85);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: #ffffff;
}
.navbar-dark .navbar-nav .nav-link.active {
color: #ffffff;
font-weight: 500;
}