diff --git a/public/css/layouts/empty.css b/public/css/layouts/empty.css index d2e68b1..75d245a 100644 --- a/public/css/layouts/empty.css +++ b/public/css/layouts/empty.css @@ -1,6 +1,3 @@ -* { - box-sizing: border-box; -} html, body { @@ -175,270 +172,3 @@ body { } } - -.footer-panel { - padding: 0; - font-size: 14px; - margin-top: auto; - background-color: #ffffff; -} - -.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%; -} - -.fe--notice-active { - display: inline-block; - width: 24px; - height: 24px; - --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M15.085 4.853a2.501 2.501 0 1 1 2.572 3.142A6 6 0 0 1 18 10v6h1c.55 0 1 .45 1 1s-.45 1-1 1h-4v1a3 3 0 0 1-6 0v-1H5c-.55 0-1-.45-1-1s.45-1 1-1h1v-6a6 6 0 0 1 5-5.917V3a1 1 0 0 1 2 0v1.083a6 6 0 0 1 2.085.77M12 20a1 1 0 0 0 1-1v-1h-2v1a1 1 0 0 0 1 1m-4-4h8v-6a4 4 0 1 0-8 0z'/%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%; -} \ No newline at end of file diff --git a/public/css/layouts/root.css b/public/css/layouts/root.css deleted file mode 100644 index dd80da7..0000000 --- a/public/css/layouts/root.css +++ /dev/null @@ -1,15 +0,0 @@ -html, -body { - margin: 0; - padding: 0; - height: 100%; - font-family: Arial, sans-serif; - color: #333; - scroll-behavior: smooth; -} - -body { - min-height: 100vh; - display: flex; - flex-direction: column; -} \ No newline at end of file diff --git a/src/views/htmx/footer/index.pug b/src/views/htmx/footer/index.pug index 59ae97e..1e84ef8 100644 --- a/src/views/htmx/footer/index.pug +++ b/src/views/htmx/footer/index.pug @@ -1,51 +1,53 @@ +style + include ./style.css footer.footer.shadow - .footer-panel(class="bg-white border-t border-gray-200") - .footer-content.container(class="pt-12 pb-6") - .footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8") - .footer-section - h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") #{siteConfig.site_title} - p.footer-desc(class="text-gray-600 text-sm leading-relaxed") 明月照佳人，用真心对待世界。
岁月催人老，用真情对待自己。 - - .footer-section - h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 快速链接 - ul.footer-links(class="space-y-3") - li - a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页 - li - a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我 - li - a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我 - li - a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心 - - .footer-section - h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 服务支持 - ul.footer-links(class="space-y-3") - li - a(href="/terms" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 服务条款 - li - a(href="/privacy" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 隐私政策 - li - a(href="/faq" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 常见问题 - li - a(href="/feedback" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 意见反馈 - - .footer-section - h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我 - .social-links(class="flex space-x-4 flex-wrap") - //- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信") - //- span.streamline-ultimate-color--wechat-logo - //- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ") - //- span.cib--tencent-qq - //- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") - //- span.ri--github-fill - a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") - span.icomoon-free--blog + .footer-panel(class="bg-white border-t border-gray-200") + .footer-content.container(class="pt-12 pb-6") + .footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8") + .footer-section + h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") #{siteConfig.site_title} + p.footer-desc(class="text-gray-600 text-sm leading-relaxed") 明月照佳人，用真心对待世界。
岁月催人老，用真情对待自己。 - .footer-bottom(class="border-t border-gray-200 pt-6") - .footer-bottom-content(class="flex flex-col md:flex-row justify-between items-center") - .copyright(class="text-gray-500 text-sm mb-4 md:mb-0") - | © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。 - .footer-actions(class="flex items-center space-x-6") - //- a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图 - //- a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅 + .footer-section + h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 快速链接 + ul.footer-links(class="space-y-3") + li + a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页 + li + a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我 + li + a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我 + li + a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心 + + .footer-section + h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 服务支持 + ul.footer-links(class="space-y-3") + li + a(href="/terms" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 服务条款 + li + a(href="/privacy" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 隐私政策 + li + a(href="/faq" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 常见问题 + li + a(href="/feedback" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 意见反馈 + + .footer-section + h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我 + .social-links(class="flex space-x-4 flex-wrap") + //- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信") + //- span.streamline-ultimate-color--wechat-logo + //- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ") + //- span.cib--tencent-qq + //- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") + //- span.ri--github-fill + a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub") + span.icomoon-free--blog + + .footer-bottom(class="border-t border-gray-200 pt-6") + .footer-bottom-content(class="flex flex-col md:flex-row justify-between items-center") + .copyright(class="text-gray-500 text-sm mb-4 md:mb-0") + | © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。 + .footer-actions(class="flex items-center space-x-6") + //- a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图 + //- a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅 diff --git a/src/views/htmx/footer/style.css b/src/views/htmx/footer/style.css new file mode 100644 index 0000000..35b177f --- /dev/null +++ b/src/views/htmx/footer/style.css @@ -0,0 +1,266 @@ +.footer-panel { + padding: 0; + font-size: 14px; + margin-top: auto; + background-color: #ffffff; +} + +.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%; +} + +.fe--notice-active { + display: inline-block; + width: 24px; + height: 24px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M15.085 4.853a2.501 2.501 0 1 1 2.572 3.142A6 6 0 0 1 18 10v6h1c.55 0 1 .45 1 1s-.45 1-1 1h-4v1a3 3 0 0 1-6 0v-1H5c-.55 0-1-.45-1-1s.45-1 1-1h1v-6a6 6 0 0 1 5-5.917V3a1 1 0 0 1 2 0v1.083a6 6 0 0 1 2.085.77M12 20a1 1 0 0 0 1-1v-1h-2v1a1 1 0 0 0 1 1m-4-4h8v-6a4 4 0 1 0-8 0z'/%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%; +} \ No newline at end of file diff --git a/src/views/htmx/navbar/index.pug b/src/views/htmx/navbar/index.pug index 0093901..d0ae6b7 100644 --- a/src/views/htmx/navbar/index.pug +++ b/src/views/htmx/navbar/index.pug @@ -1,31 +1,36 @@ - const navbarOptions = { title: siteConfig.site_title, - + showLeftMenu: true, + showRightMenu: true, } + const _leftMenu = [ + { child: '所有文章', link: '/articles', extra: { class: (currentPath === '/articles' || currentPath === '/articles/' + ? 'text-blue-600 font-bold border-b-2 border-blue-600' + : 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400') } }, + ] + const _rightMenu = !user ? [ + { child: '登录', link: '/login' }, + ] : [ + { child: `欢迎您，${'aaa' || user.name || user.nickname}`, link: '/profile' }, + { child: `
`, link: '/notice' }, + { child: `退出`, link: '/logout', extra: { 'hx-post': '/logout' } }, + ] nav.navbar(class="relative") - .placeholder(class="h-[45px] w-full opacity-0") - .fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10") - .container.clearfix(class="h-full") - .navbar-brand - a(href="/" class="text-[20px]") #{navbarOptions.title} - //- .left.menu.desktop-only - //- a.menu-item( - //- href="/articles" - //- class=(currentPath === '/articles' || currentPath === '/articles/' - //- ? 'text-blue-600 font-bold border-b-2 border-blue-600' - //- : 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400' - //- ) - //- ) 所有文章 - if !user - .right.menu.desktop-only - a.menu-item(href="/login") 登录 - //- a.menu-item(href="/register") 注册 - else - .right.menu.desktop-only - a.menu-item(href="/profile") - span 欢迎您， - span.font-semibold #{user.name || user.nickname} - a.menu-item(href="/notice") - .fe--notice-active - a.menu-item(hx-post="/logout") 退出 \ No newline at end of file + .placeholder(class="h-[45px] w-full opacity-0") + .fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10") + .container.clearfix(class="h-full") + .navbar-brand + a(href="/" class="text-[20px]") #{navbarOptions.title} + if navbarOptions.showLeftMenu + .left.menu.desktop-only + - _leftMenu.forEach(item => { + a.menu-item(href=item.link)&attributes(item.extra || {}) + != item.child + - }) + if navbarOptions.showRightMenu + .right.menu.desktop-only + - _rightMenu.forEach(item => { + a.menu-item(href=item.link)&attributes(item.extra || {}) + != item.child + - }) \ No newline at end of file diff --git a/src/views/layouts/root.pug b/src/views/layouts/root.pug index 965e3d6..6b84d50 100644 --- a/src/views/layouts/root.pug +++ b/src/views/layouts/root.pug @@ -13,10 +13,25 @@ html(lang="zh-CN") +css('lib/reset.css') +css('lib/simplebar.css') +css('lib/simplebar-shim.css') - +css('css/layouts/root.css') +js('lib/htmx.min.js') +js('lib/tailwindcss.3.4.17.js') +js('lib/simplebar.min.js') + style. + html, + body { + margin: 0; + padding: 0; + height: 100%; + font-family: Arial, sans-serif; + color: #333; + scroll-behavior: smooth; + } + + body { + min-height: 100vh; + display: flex; + flex-direction: column; + } block $$head body noscript @@ -35,35 +50,33 @@ html(lang="zh-CN") div(data-simplebar style="height: 100%") div(style="height: 100%; display: flex; flex-direction: column") block $$content - block $$scripts script. //- 处理滚动条位置 const el = document.querySelector('.simplebar-content-wrapper') const scrollTop = sessionStorage.getItem('scrollTop-'+location.pathname) - window.onload = function() { - el.scrollTop = scrollTop - el.addEventListener("scroll", function(e) { - sessionStorage.setItem('scrollTop-'+location.pathname, e.target.scrollTop) - }) - } + el.scrollTop = scrollTop + el.addEventListener("scroll", function(e) { + sessionStorage.setItem('scrollTop-'+location.pathname, e.target.scrollTop) + }) //- 处理点击慢慢回到顶部 - const backToTopBtn = document.querySelector('.back-to-top'); - if (backToTopBtn) { - backToTopBtn.addEventListener('click', function(e) { - e.preventDefault(); - const el = document.querySelector('.simplebar-content-wrapper'); - if (!el) return; - const duration = 400; - const start = el.scrollTop; - const startTime = performance.now(); - function animateScroll(currentTime) { - const elapsed = currentTime - startTime; - const progress = Math.min(elapsed / duration, 1); - el.scrollTop = start * (1 - progress); - if (progress < 1) { - requestAnimationFrame(animateScroll); - } - } - requestAnimationFrame(animateScroll); - }); - } \ No newline at end of file + //- const backToTopBtn = document.querySelector('.back-to-top'); + //- if (backToTopBtn) { + //- backToTopBtn.addEventListener('click', function(e) { + //- e.preventDefault(); + //- const el = document.querySelector('.simplebar-content-wrapper'); + //- if (!el) return; + //- const duration = 400; + //- const start = el.scrollTop; + //- const startTime = performance.now(); + //- function animateScroll(currentTime) { + //- const elapsed = currentTime - startTime; + //- const progress = Math.min(elapsed / duration, 1); + //- el.scrollTop = start * (1 - progress); + //- if (progress < 1) { + //- requestAnimationFrame(animateScroll); + //- } + //- } + //- requestAnimationFrame(animateScroll); + //- }); + //- } + block $$scripts \ No newline at end of file diff --git a/src/views/page/index/index copy.pug b/src/views/page/index/index copy.pug new file mode 100644 index 0000000..cb73249 --- /dev/null +++ b/src/views/page/index/index copy.pug @@ -0,0 +1,51 @@ +extends /layouts/empty.pug + +block pageHead + +js("https://unpkg.com/tiny-swiper@latest/lib/index.min.js") + +mixin PeopleCared(name, role, desc, avatar) + .bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4 + img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name) + .flex-1 + .text-lg.font-semibold.text-gray-900 #{name} + if role + .text-sm.text-gray-500.mt-1 #{role} + if desc + p.text-sm.text-gray-600.mt-2 #{desc} + + +block pageContent + .-mt-5 + //- form(action="/upload" method="post" enctype="multipart/form-data" class="mb-4 flex items-center") + //- input(type="file" name="file" required) + //- button(type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded") 上传文件 + //- box-shadow 是在所有内容底部 + .swiper-container(style="height:400px;box-shadow: inset 0 -100px 120px #fff;overflow:hidden;mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);") + .swiper-wrapper.h-full + .swiper-slide(style="flex-shrink: 0;") + img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") + .swiper-slide(style="flex-shrink: 0;") + img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") + .swiper-slide(style="flex-shrink: 0;") + img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") + .container + .grid.grid-cols-1.gap-4(class="md:grid-cols-4") + +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') + +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') + +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') + +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') + +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') + +block pageScripts + script. + //- Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) + const swiper = new Swiper(".swiper-container", { + //- loop: true, + //- pagination: { + //- el: ".swiper-pagination", + //- clickable: true, + //- }, + //- lazy: { + //- loadPrevNext: true, + //- }, + }); \ No newline at end of file diff --git a/src/views/page/index/index.pug b/src/views/page/index/index.pug index bd411dc..9a1924b 100644 --- a/src/views/page/index/index.pug +++ b/src/views/page/index/index.pug @@ -1,51 +1,15 @@ -extends /layouts/empty.pug +extends /layouts/root.pug -block pageHead - +js("https://unpkg.com/tiny-swiper@latest/lib/index.min.js") +block $$head + style + include ./style.css -mixin PeopleCared(name, role, desc, avatar) - .bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4 - img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name) - .flex-1 - .text-lg.font-semibold.text-gray-900 #{name} - if role - .text-sm.text-gray-500.mt-1 #{role} - if desc - p.text-sm.text-gray-600.mt-2 #{desc} - - -block pageContent - .-my-5 - form(action="/upload" method="post" enctype="multipart/form-data" class="mb-4 flex items-center") - input(type="file" name="file" required) - button(type="submit" class="ml-2 px-4 py-2 bg-blue-500 text-white rounded") 上传文件 - //- box-shadow 是在所有内容底部 - .swiper-container(style="height:400px;box-shadow: inset 0 -100px 120px #fff;overflow:hidden;mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);") - .swiper-wrapper.h-full - .swiper-slide(style="flex-shrink: 0;") - img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") - .swiper-slide(style="flex-shrink: 0;") - img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") - .swiper-slide(style="flex-shrink: 0;") - img(src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png") +block $$content + .page-layout.bg-gray-50 .container - .grid.grid-cols-1.gap-4(class="md:grid-cols-4") - +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') - +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') - +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') - +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') - +PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650') - -block pageScripts - script. - //- Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ]) - const swiper = new Swiper(".swiper-container", { - //- loop: true, - //- pagination: { - //- el: ".swiper-pagination", - //- clickable: true, - //- }, - //- lazy: { - //- loadPrevNext: true, - //- }, - }); \ No newline at end of file + div(style="height:2000px") sad + div dsad + include /htmx/footer/index.pug + +block $$scripts + block pageScripts diff --git a/src/views/page/index/style.css b/src/views/page/index/style.css new file mode 100644 index 0000000..68dd56e --- /dev/null +++ b/src/views/page/index/style.css @@ -0,0 +1,22 @@ +.page-layout { + flex: 1; + display: flex; + flex-direction: column; + width: 100%; + 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; + } +} \ No newline at end of file