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.
432 lines
14 KiB
432 lines
14 KiB
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: Arial, sans-serif;
|
|
color: #333;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
.page-layout {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
/* display: flex; */
|
|
/* flex-direction: column; */
|
|
flex: 1;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.container {
|
|
max-width: 1226px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
.clearfix::after {
|
|
content: '';
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.navbar-brand {
|
|
float: left;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ===== 顶部导航 响应式 ===== */
|
|
.navbar {
|
|
position: relative;
|
|
}
|
|
|
|
.navbar .menu-toggle {
|
|
display: none;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar .menu-toggle .bar {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: #333;
|
|
margin: 5px auto;
|
|
transition: transform .2s ease, opacity .2s ease;
|
|
}
|
|
|
|
.navbar .mobile-menu {
|
|
display: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
transition: max-height .25s ease;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 0 0 12px 12px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
|
|
}
|
|
|
|
.navbar.open .mobile-menu {
|
|
display: none;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.navbar .mobile-menu .menu-item {
|
|
display: block;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
/* 桌面端可见区域 */
|
|
.desktop-only {
|
|
display: block;
|
|
}
|
|
|
|
/* <= 1024 宽度：显示切换按钮，隐藏桌面菜单 */
|
|
@media (max-width: 1024px) {
|
|
.desktop-only {
|
|
display: none;
|
|
}
|
|
|
|
.navbar .menu-toggle {
|
|
display: inline-block;
|
|
}
|
|
|
|
.navbar .mobile-menu {
|
|
padding: 8px 20px 12px;
|
|
}
|
|
|
|
.navbar.open .mobile-menu {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
height: 100%;
|
|
margin-left: 20px;
|
|
|
|
.menu-item {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: rgba(175, 175, 175, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu.left {
|
|
float: left;
|
|
|
|
.menu-item {
|
|
float: left;
|
|
|
|
&+.menu-item {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right.menu {
|
|
float: right;
|
|
|
|
.menu-item {
|
|
float: right;
|
|
|
|
&+.menu-item {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.footer-panel {
|
|
padding: 0;
|
|
font-size: 14px;
|
|
margin-top: auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1226px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.footer-main {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-section {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-title {
|
|
margin-bottom: 1rem;
|
|
color: #111827;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer-desc {
|
|
color: #6b7280;
|
|
line-height: 1.6;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
text-decoration: none;
|
|
color: #6b7280;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.social-link:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.social-link span {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid #e5e7eb;
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.footer-bottom-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.copyright {
|
|
color: #6b7280;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-actions {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.footer-actions a {
|
|
text-decoration: none;
|
|
color: #6b7280;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-actions a:hover {
|
|
color: #2563eb;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (min-width: 768px) {
|
|
.footer-main {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
text-align: left;
|
|
}
|
|
|
|
.footer-section {
|
|
text-align: left;
|
|
}
|
|
|
|
.social-links {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.footer-bottom-content {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.copyright {
|
|
text-align: left;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/* 移动端优化（<=767px） */
|
|
@media (max-width: 767px) {
|
|
.footer-content {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.footer-main {
|
|
gap: 1.25rem;
|
|
/* 20px */
|
|
margin-bottom: 1rem;
|
|
/* 16px */
|
|
}
|
|
|
|
.footer-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.footer-desc {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: 0.5rem;
|
|
/* 8px */
|
|
}
|
|
|
|
.footer-actions {
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
/* 16px */
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-actions a {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.social-links {
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
/* 12px */
|
|
justify-content: center;
|
|
}
|
|
|
|
.social-link {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.footer-bottom-content {
|
|
gap: 0.75rem;
|
|
/* 12px */
|
|
}
|
|
}
|
|
|
|
/* iconify图标 */
|
|
.streamline-ultimate-color--wechat-logo {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%2378eb7b' d='M12.385 3.757a8.45 8.45 0 0 0-6.93-.541a7.06 7.06 0 0 0-3.633 2.862a5.36 5.36 0 0 0-.669 4.11a6.3 6.3 0 0 0 2.73 3.691q-.372 1.065-.714 2.138c.821-.428 1.634-.872 2.451-1.308a9.1 9.1 0 0 0 3.06.436a5.3 5.3 0 0 1-.211-2.47c.212-1.15.8-2.195 1.673-2.973a7.24 7.24 0 0 1 5.433-1.785a6.34 6.34 0 0 0-3.19-4.162z'/%3E%3Cpath fill='%23c9f7ca' d='M1.176 10.269c.14-.533.356-1.042.644-1.511a7.05 7.05 0 0 1 3.632-2.863a8.45 8.45 0 0 1 6.93.542c.7.389 1.326.9 1.848 1.507a8 8 0 0 1 1.343-.023a6.34 6.34 0 0 0-3.19-4.162a8.45 8.45 0 0 0-6.931-.541A7.05 7.05 0 0 0 1.82 6.08a5.36 5.36 0 0 0-.67 4.11q.016.038.026.079'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M12.385 3.757a8.45 8.45 0 0 0-6.93-.541a7.06 7.06 0 0 0-3.633 2.862a5.36 5.36 0 0 0-.669 4.11a6.3 6.3 0 0 0 2.73 3.691q-.372 1.065-.714 2.138c.821-.428 1.634-.872 2.451-1.308a9.1 9.1 0 0 0 3.06.436a5.3 5.3 0 0 1-.211-2.47c.212-1.15.8-2.195 1.673-2.973a7.24 7.24 0 0 1 5.433-1.785a6.34 6.34 0 0 0-3.19-4.162z' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M5.643 6.299a.478.478 0 1 1 .321.9a.478.478 0 0 1-.321-.9m5.029.005a.478.478 0 1 1 .338.894a.478.478 0 0 1-.338-.894' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' d='M22.6 13.584a5.54 5.54 0 0 0-2.58-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482a4.48 4.48 0 0 0 .574 3.314a6.1 6.1 0 0 0 4.157 2.712a7.6 7.6 0 0 0 3.633-.24c.702.274 1.333.716 2.015 1.042a41 41 0 0 0-.564-1.756a5.7 5.7 0 0 0 1.876-2.073a4.5 4.5 0 0 0 .112-3.872z'/%3E%3Cpath fill='%23c9f7ca' d='M13.633 13.288a7.11 7.11 0 0 1 6.38-.024a5.54 5.54 0 0 1 2.58 2.632q.143.325.231.67a4.5 4.5 0 0 0-.23-2.986a5.54 5.54 0 0 0-2.581-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482c-.151.69-.13 1.406.064 2.085a5.35 5.35 0 0 1 2.764-3.25'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M22.6 13.584a5.54 5.54 0 0 0-2.58-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482a4.48 4.48 0 0 0 .574 3.314a6.1 6.1 0 0 0 4.157 2.712a7.6 7.6 0 0 0 3.633-.24c.702.274 1.333.716 2.015 1.042a41 41 0 0 0-.564-1.756a5.7 5.7 0 0 0 1.876-2.073a4.5 4.5 0 0 0 .112-3.872z' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' d='M14.813 13.282a.485.485 0 0 1 .613.617a.478.478 0 1 1-.613-.617'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M14.813 13.282a.485.485 0 0 1 .613.617a.478.478 0 1 1-.613-.617' stroke-width='1'/%3E%3Cpath fill='%2378eb7b' d='M18.968 13.27c.36-.03.616.342.462.668l-.001.001a.468.468 0 0 1-.74.128a.74.74 0 0 1-.164-.346a.525.525 0 0 1 .443-.45'/%3E%3Cpath stroke='%23191919' stroke-linecap='round' stroke-linejoin='round' d='M18.968 13.27c.36-.03.616.342.462.668l-.001.001a.468.468 0 0 1-.74.128a.74.74 0 0 1-.164-.346a.525.525 0 0 1 .443-.45' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
.fa7-brands--weibo {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M407 177.6c7.6-24-13.4-46.8-37.4-41.7c-22 4.8-28.8-28.1-7.1-32.8c50.1-10.9 92.3 37.1 76.5 84.8c-6.8 21.2-38.8 10.8-32-10.3M214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6c79.5-33.6 140.5-16.8 114 51.4c-3.7 9.4 1.1 10.9 8.3 13.1c135.7 42.3 34.8 215.2-169.7 215.2m143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7c-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116M347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3c72.3-15.2 134.8 52.8 111.7 124c-7.4 24.2 29.1 37 37.4 12c31.9-99.8-55.1-195.9-157.4-174.3m-78.5 311c-17.1 38.8-66.8 60-109.1 46.3c-40.8-13.1-58-53.4-40.3-89.7c17.7-35.4 63.1-55.4 103.4-45.1c42 10.8 63.1 50.2 46 88.5m-86.3-30c-12.9-5.4-30 .3-38 12.9c-8.3 12.9-4.3 28 8.6 34c13.1 6 30.8.3 39.1-12.9c8-13.1 3.7-28.3-9.7-34m32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4c-2.9 5.1-1.4 10.6 3.7 12.9c5.1 2 11.7-.3 14.6-5.4c2.8-5.2 1.1-10.9-4-12.9'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.cib--tencent-qq {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M28.527 20.047a57 57 0 0 0-1.068-3.02l-1.443-3.595c.005-.041.02-.744.02-1.115C26.036 6.177 23.136 0 16 0S5.964 6.177 5.964 12.323c0 .365.02 1.073.02 1.115l-1.443 3.593q-.576 1.493-1.068 3.016c-1.359 4.38-.921 6.193-.583 6.235c.719.083 2.803-3.297 2.803-3.297c0 1.959 1.009 4.516 3.192 6.36c-.812.249-1.817.64-2.459 1.115c-.577.427-.505.859-.4 1.036c.457.771 7.843.489 9.973.251c2.136.239 9.521.52 9.979-.251c.104-.177.177-.609-.4-1.036c-.647-.475-1.647-.865-2.464-1.115c2.183-1.849 3.192-4.407 3.192-6.365c0 0 2.084 3.385 2.803 3.297c.339-.036.776-1.855-.583-6.229zM16.88 6.464c.052-1.407.88-2.505 1.849-2.464c.968.041 1.708 1.213 1.656 2.62c-.052 1.401-.88 2.505-1.849 2.459c-.963-.043-1.708-1.215-1.656-2.615M13.271 4c.969-.041 1.797 1.057 1.849 2.464c.052 1.4-.693 2.572-1.656 2.615c-.969.047-1.797-1.057-1.849-2.459c-.052-1.407.688-2.579 1.656-2.62m-3.375 7.057c.255-.573 2.859-1.208 6.088-1.208h.032c3.224 0 5.833.635 6.088 1.208a.15.15 0 0 1 .021.083a.2.2 0 0 1-.037.111c-.219.317-3.109 1.889-6.067 1.889h-.037c-2.963 0-5.853-1.572-6.072-1.889a.18.18 0 0 1-.016-.193zm13.896 11.495c-.297 4.907-3.204 7.984-7.699 8.032h-.181c-4.496-.048-7.407-3.125-7.699-8.032c-.109-1.797 0-3.323.193-4.573q.64.133 1.281.235v4.677s2.208.448 4.421.136V18.73c.651.036 1.281.052 1.875.041h.032c2.239.032 4.953-.271 7.577-.792c.199 1.251.303 2.776.199 4.573zM13.973 7.74c.417-.057.724-.547.677-1.1c-.047-.557-.416-.963-.839-.905c-.416.052-.724.547-.676 1.099s.416.959.837.907zm5.334-.865c.105.047.292.057.387-.192c.047-.131.031-.224-.016-.287c-.032-.047-.177-.156-.495-.235c-1.204-.297-1.787.511-1.871.661c-.057.099-.015.24.073.308c.088.067.188.047.24-.011c.771-.839 1.615-.276 1.681-.245z'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.ri--github-fill {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.001 2c-5.525 0-10 4.475-10 10a9.99 9.99 0 0 0 6.837 9.488c.5.087.688-.213.688-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.337 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.687c-.1-.25-.45-1.275.1-2.65c0 0 .837-.263 2.75 1.024a9.3 9.3 0 0 1 2.5-.337c.85 0 1.7.112 2.5.337c1.913-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.02 10.02 0 0 0 22 12c0-5.525-4.475-10-10-10'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.icomoon-free--blog {
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6 0v1.5a8.46 8.46 0 0 1 6.01 2.489a8.47 8.47 0 0 1 2.489 6.01h1.5c0-5.523-4.477-10-10-10z'/%3E%3Cpath fill='%23000' d='M6 3v1.5c1.469 0 2.85.572 3.889 1.611S11.5 8.531 11.5 10H13a7 7 0 0 0-7-7m1.5 3l-1 1L3 8l-3 6.5l.396.396l3.638-3.638a1 1 0 1 1 .707.707l-3.638 3.638l.396.396l6.5-3l1-3.5l1-1l-2.5-2.5z'/%3E%3C/svg%3E");
|
|
background-color: currentColor;
|
|
-webkit-mask-image: var(--svg);
|
|
mask-image: var(--svg);
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|