Jelajahi Sumber

feat: 初始化 zksy-website-front 项目

- 创建项目结构和基本配置
- 添加关于页面,包括公司简介、发展历程、荣誉资质、公司招聘、联系我们等板块
- 集成 Ant Design 组件库
- 设置 TypeScript 和 ESLint
nahida 8 bulan lalu
induk
melakukan
e13bee1989
3 mengubah file dengan 165 tambahan dan 0 penghapusan
  1. 6 0
      next-env.d.ts
  2. 32 0
      package.json
  3. 127 0
      src/app/about/page.tsx

+ 6 - 0
next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

+ 32 - 0
package.json

@@ -0,0 +1,32 @@
+{
+  "name": "zksy-website-front",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 80",
+    "build": "next build",
+    "start": "next start -p 80",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@ant-design/nextjs-registry": "^1.1.0",
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
+    "antd": "^5.27.2",
+    "lucide-react": "^0.542.0",
+    "next": "15.5.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tw-animate-css": "^1.3.8"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

+ 127 - 0
src/app/about/page.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import { Tabs, Card, Pagination } from "antd"
+
+export default function Home() {
+  return (
+    <div className="w-full">
+      {/* 导航栏 */}
+      <div className="flex justify-center space-x-10 border-b py-4 bg-white sticky top-0 z-50">
+        {["公司简介", "发展历程", "荣誉资质", "公司招聘", "联系我们"].map((item, idx) => (
+          <a
+            key={idx}
+            href={`#section-${idx}`}
+            className="text-gray-700 hover:text-blue-600 font-medium"
+          >
+            {item}
+          </a>
+        ))}
+      </div>
+
+      {/* 公司简介 */}
+      <section id="section-0" className="max-w-6xl mx-auto py-12 px-4 grid sm:grid-cols-1 md:grid-cols-2 gap-8">
+        <div>
+          <h2 className="text-xl font-bold text-blue-600 mb-4">公司简介</h2>
+          <p className="text-gray-700 leading-7 mb-6">
+            中科图信信息技术有限公司是一家专注于智慧图书馆知识服务与平台研发的国家高新技术企业...
+          </p>
+          <div className="grid grid-cols-2 gap-6 mt-6">
+            <div className="text-center">
+              <div className="text-2xl">🏢</div>
+              <p className="text-sm">专精特新小巨人企业</p>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl">💡</div>
+              <p className="text-sm">创新型中小企业</p>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl">🚀</div>
+              <p className="text-sm">高新技术企业</p>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl">🎓</div>
+              <p className="text-sm">硕博士后创新基地</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-gray-300 w-full h-80 rounded-lg"></div>
+      </section>
+
+      {/* 发展历程 */}
+      <section id="section-1" className="bg-blue-900 text-white py-12 px-4">
+        <h2 className="text-xl font-bold mb-8">发展历程</h2>
+        <div className="flex flex-col sm:flex-row justify-between gap-8">
+          {[
+            { year: "2014", text: "专注图书馆系统研发..." },
+            { year: "2018", text: "业务规模扩展..." },
+            { year: "2022", text: "建设研发测试基地..." },
+            { year: "2023", text: "获批博士后创新实践基地..." },
+          ].map((item, idx) => (
+            <div key={idx} className="flex-1">
+              <p className="text-2xl font-bold">{item.year}</p>
+              <p className="mt-2 text-sm">{item.text}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 荣誉资质 */}
+      <section id="section-2" className="max-w-6xl mx-auto py-12 px-4">
+        <h2 className="text-xl font-bold text-blue-600 mb-6">荣誉资质</h2>
+        <Tabs
+          defaultActiveKey="1"
+          items={[
+            {
+              key: "1",
+              label: "荣誉证书",
+              children: (
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+                  <div className="bg-gray-300 h-40 rounded"></div>
+                  <div className="bg-gray-300 h-40 rounded"></div>
+                  <div className="bg-gray-300 h-40 rounded"></div>
+                </div>
+              ),
+            },
+            { key: "2", label: "专利证书", children: <p>专利证书内容...</p> },
+            { key: "3", label: "ISO认证书", children: <p>ISO认证书内容...</p> },
+            { key: "4", label: "软件作品证书", children: <p>软件作品证书内容...</p> },
+          ]}
+        />
+      </section>
+
+      {/* 公司招聘 */}
+      <section id="section-3" className="max-w-6xl mx-auto py-12 px-4">
+        <h2 className="text-xl font-bold text-blue-600 mb-6">公司招聘</h2>
+        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
+          <Card title="前端工程师" bordered>
+            <p>工作地点:湖南长沙</p>
+            <p>招聘人数:2</p>
+            <p>岗位要求:熟悉React、Next.js...</p>
+          </Card>
+          <Card title="前端工程师" bordered>
+            <p>工作地点:湖南怀化</p>
+            <p>招聘人数:3</p>
+            <p>岗位要求:掌握TypeScript、Ant Design...</p>
+          </Card>
+        </div>
+        <div className="flex justify-center mt-6">
+          <Pagination defaultCurrent={1} total={50} />
+        </div>
+      </section>
+
+      {/* 联系我们 */}
+      <section id="section-4" className="bg-gray-50 py-12 px-4">
+        <h2 className="text-xl font-bold text-blue-600 mb-6">联系我们</h2>
+        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="bg-gray-300 h-64 rounded"></div>
+          <div className="space-y-4">
+            <p>电话:0731-85315153</p>
+            <p>邮箱:337843345@qq.com</p>
+            <p>地址:湖南省长沙市岳麓区...</p>
+            <div className="bg-gray-300 w-40 h-40"></div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}