16 changed files with 464 additions and 191 deletions
@ -0,0 +1,8 @@ |
|||
# 默认忽略的文件 |
|||
/shelf/ |
|||
/workspace.xml |
|||
# 基于编辑器的 HTTP 客户端请求 |
|||
/httpRequests/ |
|||
# Datasource local storage ignored files |
|||
/dataSources/ |
|||
/dataSources.local.xml |
|||
@ -0,0 +1,6 @@ |
|||
<component name="InspectionProjectProfileManager"> |
|||
<profile version="1.0"> |
|||
<option name="myName" value="Project Default" /> |
|||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" /> |
|||
</profile> |
|||
</component> |
|||
@ -0,0 +1,8 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<project version="4"> |
|||
<component name="ProjectModuleManager"> |
|||
<modules> |
|||
<module fileurl="file://$PROJECT_DIR$/.idea/next-10398.iml" filepath="$PROJECT_DIR$/.idea/next-10398.iml" /> |
|||
</modules> |
|||
</component> |
|||
</project> |
|||
@ -0,0 +1,12 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<module type="WEB_MODULE" version="4"> |
|||
<component name="NewModuleRootManager"> |
|||
<content url="file://$MODULE_DIR$"> |
|||
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> |
|||
<excludeFolder url="file://$MODULE_DIR$/temp" /> |
|||
<excludeFolder url="file://$MODULE_DIR$/tmp" /> |
|||
</content> |
|||
<orderEntry type="inheritedJdk" /> |
|||
<orderEntry type="sourceFolder" forTests="false" /> |
|||
</component> |
|||
</module> |
|||
@ -0,0 +1,6 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<project version="4"> |
|||
<component name="VcsDirectoryMappings"> |
|||
<mapping directory="" vcs="Git" /> |
|||
</component> |
|||
</project> |
|||
@ -1,7 +1,68 @@ |
|||
import type { NextConfig } from "next"; |
|||
|
|||
const nextConfig: NextConfig = { |
|||
/* config options here */ |
|||
images: { |
|||
remotePatterns: [ |
|||
// OSS 图片域名
|
|||
{ |
|||
protocol: 'https', |
|||
hostname: 'oss.wsdns.cn', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
{ |
|||
protocol: 'http', |
|||
hostname: 'oss.wsdns.cn', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
// API 服务器图片
|
|||
{ |
|||
protocol: 'https', |
|||
hostname: 'cms-api.websoft.top', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
{ |
|||
protocol: 'http', |
|||
hostname: 'cms-api.websoft.top', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
// 常见的图片 CDN 域名
|
|||
{ |
|||
protocol: 'https', |
|||
hostname: '*.aliyuncs.com', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
{ |
|||
protocol: 'https', |
|||
hostname: '*.qiniudn.com', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
{ |
|||
protocol: 'https', |
|||
hostname: '*.qiniu.com', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
// 本地开发
|
|||
{ |
|||
protocol: 'http', |
|||
hostname: 'localhost', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
{ |
|||
protocol: 'https', |
|||
hostname: 'localhost', |
|||
port: '', |
|||
pathname: '/**', |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default nextConfig; |
|||
|
|||
@ -1,26 +1,240 @@ |
|||
@import "tailwindcss"; |
|||
@tailwind base; |
|||
@tailwind components; |
|||
@tailwind utilities; |
|||
|
|||
/* 企业官网全局样式 */ |
|||
:root { |
|||
--background: #ffffff; |
|||
--foreground: #171717; |
|||
--primary-color: #2563eb; |
|||
--primary-dark: #1d4ed8; |
|||
--secondary-color: #64748b; |
|||
--accent-color: #f59e0b; |
|||
--text-primary: #1f2937; |
|||
--text-secondary: #6b7280; |
|||
--text-light: #9ca3af; |
|||
--bg-primary: #ffffff; |
|||
--bg-secondary: #f8fafc; |
|||
--bg-dark: #1f2937; |
|||
--border-color: #e5e7eb; |
|||
} |
|||
|
|||
@theme inline { |
|||
--color-background: var(--background); |
|||
--color-foreground: var(--foreground); |
|||
--font-sans: var(--font-geist-sans); |
|||
--font-mono: var(--font-geist-mono); |
|||
* { |
|||
box-sizing: border-box; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--background: #0a0a0a; |
|||
--foreground: #ededed; |
|||
} |
|||
html, |
|||
body { |
|||
max-width: 100vw; |
|||
overflow-x: hidden; |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |
|||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', |
|||
sans-serif; |
|||
line-height: 1.6; |
|||
color: var(--text-primary); |
|||
} |
|||
|
|||
body { |
|||
background: var(--background); |
|||
color: var(--foreground); |
|||
font-family: Arial, Helvetica, sans-serif; |
|||
background-color: var(--bg-primary); |
|||
} |
|||
|
|||
a { |
|||
color: inherit; |
|||
text-decoration: none; |
|||
transition: color 0.3s ease; |
|||
} |
|||
|
|||
a:hover { |
|||
color: var(--primary-color); |
|||
} |
|||
|
|||
/* 通用组件样式 */ |
|||
.container { |
|||
max-width: 1200px; |
|||
margin: 0 auto; |
|||
padding: 0 1rem; |
|||
} |
|||
|
|||
.btn { |
|||
@apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-lg transition-all duration-300 cursor-pointer; |
|||
} |
|||
|
|||
.btn-primary { |
|||
@apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200; |
|||
} |
|||
|
|||
.btn-secondary { |
|||
@apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-4 focus:ring-gray-100; |
|||
} |
|||
|
|||
.btn-outline { |
|||
@apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white focus:ring-4 focus:ring-blue-200; |
|||
} |
|||
|
|||
.card { |
|||
@apply bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-lg; |
|||
} |
|||
|
|||
.section-padding { |
|||
@apply py-16 lg:py-24; |
|||
} |
|||
|
|||
.section-title { |
|||
@apply text-3xl lg:text-4xl font-bold text-center mb-4; |
|||
} |
|||
|
|||
.section-subtitle { |
|||
@apply text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto; |
|||
} |
|||
|
|||
/* 导航栏样式 */ |
|||
.navbar { |
|||
@apply bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50; |
|||
} |
|||
|
|||
.navbar-brand { |
|||
@apply text-2xl font-bold text-blue-600; |
|||
} |
|||
|
|||
.navbar-nav { |
|||
@apply flex items-center space-x-8; |
|||
} |
|||
|
|||
.navbar-link { |
|||
@apply text-gray-700 hover:text-blue-600 font-medium transition-colors duration-300; |
|||
} |
|||
|
|||
.navbar-link.active { |
|||
@apply text-blue-600; |
|||
} |
|||
|
|||
/* 英雄区域样式 */ |
|||
.hero { |
|||
@apply bg-gradient-to-br from-blue-50 to-indigo-100 py-20 lg:py-32; |
|||
} |
|||
|
|||
.hero-title { |
|||
@apply text-4xl lg:text-6xl font-bold text-gray-900 mb-6; |
|||
} |
|||
|
|||
.hero-subtitle { |
|||
@apply text-xl lg:text-2xl text-gray-600 mb-8 max-w-3xl; |
|||
} |
|||
|
|||
/* 特色区域样式 */ |
|||
.feature-card { |
|||
@apply text-center p-8 rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow duration-300; |
|||
} |
|||
|
|||
.feature-icon { |
|||
@apply w-16 h-16 mx-auto mb-6 text-blue-600; |
|||
} |
|||
|
|||
.feature-title { |
|||
@apply text-xl font-semibold mb-4; |
|||
} |
|||
|
|||
.feature-description { |
|||
@apply text-gray-600; |
|||
} |
|||
|
|||
/* 文章卡片样式 */ |
|||
.article-card { |
|||
@apply bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300; |
|||
} |
|||
|
|||
.article-image { |
|||
@apply w-full h-48 object-cover; |
|||
} |
|||
|
|||
.article-content { |
|||
@apply p-6; |
|||
} |
|||
|
|||
.article-category { |
|||
@apply inline-block px-3 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full mb-3; |
|||
} |
|||
|
|||
.article-title { |
|||
@apply text-xl font-semibold mb-3 hover:text-blue-600 transition-colors duration-300; |
|||
} |
|||
|
|||
.article-excerpt { |
|||
@apply text-gray-600 mb-4 line-clamp-3; |
|||
} |
|||
|
|||
.article-meta { |
|||
@apply flex items-center justify-between text-sm text-gray-500; |
|||
} |
|||
|
|||
/* 页脚样式 */ |
|||
.footer { |
|||
@apply bg-gray-900 text-white py-12; |
|||
} |
|||
|
|||
.footer-section { |
|||
@apply mb-8 lg:mb-0; |
|||
} |
|||
|
|||
.footer-title { |
|||
@apply text-lg font-semibold mb-4; |
|||
} |
|||
|
|||
.footer-link { |
|||
@apply text-gray-300 hover:text-white transition-colors duration-300; |
|||
} |
|||
|
|||
/* 响应式样式 */ |
|||
@media (max-width: 768px) { |
|||
.container { |
|||
padding: 0 1rem; |
|||
} |
|||
|
|||
.hero-title { |
|||
@apply text-3xl lg:text-4xl; |
|||
} |
|||
|
|||
.hero-subtitle { |
|||
@apply text-lg; |
|||
} |
|||
|
|||
.section-title { |
|||
@apply text-2xl lg:text-3xl; |
|||
} |
|||
} |
|||
|
|||
/* 动画效果 */ |
|||
@keyframes fadeInUp { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(30px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.fade-in-up { |
|||
animation: fadeInUp 0.6s ease-out; |
|||
} |
|||
|
|||
/* 加载动画 */ |
|||
.loading { |
|||
@apply inline-block w-6 h-6 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin; |
|||
} |
|||
|
|||
/* 文本截断 */ |
|||
.line-clamp-2 { |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.line-clamp-3 { |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
@ -1,103 +1,26 @@ |
|||
import Image from "next/image"; |
|||
import HeroSection from '@/components/sections/HeroSection'; |
|||
import FeaturesSection from '@/components/sections/FeaturesSection'; |
|||
import AboutSection from '@/components/sections/AboutSection'; |
|||
import ArticlesSection from '@/components/sections/ArticlesSection'; |
|||
import ContactSection from '@/components/sections/ContactSection'; |
|||
|
|||
export default function Home() { |
|||
return ( |
|||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> |
|||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> |
|||
<Image |
|||
className="dark:invert" |
|||
src="/next.svg" |
|||
alt="Next.js logo" |
|||
width={180} |
|||
height={38} |
|||
priority |
|||
/> |
|||
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> |
|||
<li className="mb-2 tracking-[-.01em]"> |
|||
Get started by editing{" "} |
|||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold"> |
|||
src/app/page.tsx |
|||
</code> |
|||
. |
|||
</li> |
|||
<li className="tracking-[-.01em]"> |
|||
Save and see your changes instantly. |
|||
</li> |
|||
</ol> |
|||
<main> |
|||
{/* 英雄区域 */} |
|||
<HeroSection /> |
|||
|
|||
<div className="flex gap-4 items-center flex-col sm:flex-row"> |
|||
<a |
|||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto" |
|||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
|||
target="_blank" |
|||
rel="noopener noreferrer" |
|||
> |
|||
<Image |
|||
className="dark:invert" |
|||
src="/vercel.svg" |
|||
alt="Vercel logomark" |
|||
width={20} |
|||
height={20} |
|||
/> |
|||
Deploy now |
|||
</a> |
|||
<a |
|||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]" |
|||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
|||
target="_blank" |
|||
rel="noopener noreferrer" |
|||
> |
|||
Read our docs |
|||
</a> |
|||
</div> |
|||
</main> |
|||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center"> |
|||
<a |
|||
className="flex items-center gap-2 hover:underline hover:underline-offset-4" |
|||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
|||
target="_blank" |
|||
rel="noopener noreferrer" |
|||
> |
|||
<Image |
|||
aria-hidden |
|||
src="/file.svg" |
|||
alt="File icon" |
|||
width={16} |
|||
height={16} |
|||
/> |
|||
Learn |
|||
</a> |
|||
<a |
|||
className="flex items-center gap-2 hover:underline hover:underline-offset-4" |
|||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
|||
target="_blank" |
|||
rel="noopener noreferrer" |
|||
> |
|||
<Image |
|||
aria-hidden |
|||
src="/window.svg" |
|||
alt="Window icon" |
|||
width={16} |
|||
height={16} |
|||
/> |
|||
Examples |
|||
</a> |
|||
<a |
|||
className="flex items-center gap-2 hover:underline hover:underline-offset-4" |
|||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
|||
target="_blank" |
|||
rel="noopener noreferrer" |
|||
> |
|||
<Image |
|||
aria-hidden |
|||
src="/globe.svg" |
|||
alt="Globe icon" |
|||
width={16} |
|||
height={16} |
|||
/> |
|||
Go to nextjs.org → |
|||
</a> |
|||
</footer> |
|||
</div> |
|||
{/* 特色服务 */} |
|||
<FeaturesSection /> |
|||
|
|||
{/* 关于我们 */} |
|||
<AboutSection /> |
|||
|
|||
{/* 最新文章 */} |
|||
<ArticlesSection /> |
|||
|
|||
{/* 联系我们 */} |
|||
<ContactSection /> |
|||
</main> |
|||
); |
|||
} |
|||
|
|||
Loading…
Reference in new issue