소스 검색

feat(components): 添加 Footer 组件并创建全局样式文件

- 新增 FooterBlock 组件,包含快捷链接、联系方式和关注我们等板块- 创建 globals.css 文件,定义全局样式包括字体、颜色主题和滚动条样式
nahida 8 달 전
부모
커밋
e6c9374911
3개의 변경된 파일167개의 추가작업 그리고 0개의 파일을 삭제
  1. 1 0
      public/globe.svg
  2. 81 0
      src/app/globals.css
  3. 85 0
      src/components/footerBlock.tsx

+ 1 - 0
public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

+ 81 - 0
src/app/globals.css

@@ -0,0 +1,81 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@font-face {
+  font-family: 'AliMaMaShuHeiTi';
+  src: url('/fonts/AliMaMaShuHeiTi.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.shuheiti {
+  font-family: 'AliMaMaShuHeiTi', sans-serif;
+}
+
+@font-face {
+  font-family: 'SourceHanSansCN-Heavy';
+  src: url('/fonts/SourceHanSansCN-Heavy.otf');
+}
+.SourceHanSansCN-Heavy {
+  font-family: 'SourceHanSansCN-Heavy', serif;
+}
+
+@font-face {
+  font-family: 'SourceHanSansCN-Heavy';
+  src: url('/fonts/SourceHanSansCN-Medium.otf');
+}
+.SourceHanSansCN-Medium {
+  font-family: 'SourceHanSansCN-Medium', serif;
+}
+
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --scrollbar-thumb: #c1c1c1;
+  --scrollbar-thumb-hover: #a1a1a1;
+  --scrollbar-track: #f1f1f1;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+    --scrollbar-thumb: #555555;
+    --scrollbar-thumb-hover: #777777;
+    --scrollbar-track: #2a2a2a;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* 自定义横向滚动条样式 */
+.overflow-x-auto::-webkit-scrollbar {
+  height: 12px;
+}
+
+.overflow-x-auto::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 10px;
+}
+
+.overflow-x-auto::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 10px;
+  border: 2px solid var(--scrollbar-track);
+}
+
+.overflow-x-auto::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+.overflow-x-auto {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+

+ 85 - 0
src/components/footerBlock.tsx

@@ -0,0 +1,85 @@
+import Link from "next/link"
+import Image from "next/image";
+
+export default function FooterBlock() {
+  return (
+    <footer className="bg-[url('/assets/home/27.jpg')] bg-cover text-white py-12 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mb-8">
+          {/* 快捷链接 - Quick Links */}
+          <div>
+            <h3 className="text-lg font-semibold mb-4">快捷链接</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/" className="text-blue-200 hover:text-white transition-colors">
+                  首页
+                </Link>
+              </li>
+              <li>
+                <Link href="/products" className="text-blue-200 hover:text-white transition-colors">
+                  产品中心
+                </Link>
+              </li>
+              <li>
+                <Link href="/solutions" className="text-blue-200 hover:text-white transition-colors">
+                  解决方案
+                </Link>
+              </li>
+              <li>
+                <Link href="/news" className="text-blue-200 hover:text-white transition-colors">
+                  新闻动态
+                </Link>
+              </li>
+              <li>
+                <Link href="/support" className="text-blue-200 hover:text-white transition-colors">
+                  服务支持
+                </Link>
+              </li>
+              <li>
+                <Link href="/about" className="text-blue-200 hover:text-white transition-colors">
+                  关于我们
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* 联系方式 - Contact Information */}
+          <div>
+            <h3 className="text-lg font-semibold mb-4">联系方式</h3>
+            <div className="space-y-3">
+              <p className="text-blue-200">0731-85315153</p>
+              <div>
+                <h4 className="font-medium mb-2">公司地址</h4>
+                <p className="text-blue-200 text-sm leading-relaxed">
+                  湖南省长沙市岳麓区梅溪湖街道泉水路461号
+                  <br />
+                  长沙健康医疗大数据产业孵化基地1-2#楼 未来楼5楼左侧
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* 关注我们 - Follow Us */}
+          <div>
+            <h3 className="text-lg font-semibold mb-4">关注我们</h3>
+            <div className="space-y-4">
+              {/* QR Code placeholder - using a colored block */}
+              <div className="w-28 h-28 bg-white border-2 border-gray-300 flex items-center justify-center">
+                  <Image src={"/assets/home/26.jpg"} alt={"qrCode"} width={500} height={500} />
+              </div>
+              <div className="text-sm text-blue-200">
+                <p>- 版权所有 -</p>
+                <Link href={"https://beian.miit.gov.cn"} target="_blank" className="hover:underline cursor-pointer">湘ICP备2023023220号-1</Link>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="border-t border-blue-800 pt-6 text-center">
+          <p className="text-blue-200 text-sm">@COPYRUGHT@2014-2024 中科盛阳信息技术有限公司</p>
+        </div>
+      </div>
+    </footer>
+  )
+}