first commit
This commit is contained in:
+28
@@ -0,0 +1,28 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
||||
import Header from './components/Header'
|
||||
import Footer from './components/Footer'
|
||||
import Home from './pages/Home'
|
||||
import About from './pages/About'
|
||||
import Products from './pages/Products'
|
||||
import Contact from './pages/Contact'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div className="app">
|
||||
<Header />
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/products" element={<Products />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,177 @@
|
||||
.footer {
|
||||
background-color: var(--gray-900);
|
||||
color: var(--gray-300);
|
||||
padding: 60px 0 0;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer-logo-img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.8;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--gray-400);
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.footer-contact li {
|
||||
color: var(--gray-400);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.social-item {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.social-name {
|
||||
display: block;
|
||||
color: var(--gray-400);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--gray-800);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.social-name:hover {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.social-qr {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-bottom: 16px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-social {
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.social-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.social-qr {
|
||||
left: 0;
|
||||
transform: none;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.social-qr-img {
|
||||
width: 180px !important;
|
||||
height: 180px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.social-item:hover .social-qr {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.social-qr .qr-placeholder {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-500);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.social-qr-img {
|
||||
width: 220px !important;
|
||||
height: 220px !important;
|
||||
border-radius: 8px;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid var(--gray-800);
|
||||
padding: 20px 0;
|
||||
margin-top: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
.icp-link {
|
||||
color: var(--gray-500);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.icp-link:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 40px 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import './Footer.css'
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<div className="footer-content">
|
||||
<div className="footer-section">
|
||||
<div className="footer-logo">
|
||||
<img src="/logo-h.svg" alt="logo" className="footer-logo-img" />
|
||||
</div>
|
||||
<p className="footer-desc">
|
||||
我们致力于提供高品质产品与专业服务，以科技创新赋能行业进步
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>快速链接</h4>
|
||||
<ul className="footer-links">
|
||||
<li><Link to="/">首页</Link></li>
|
||||
<li><Link to="/about">关于我们</Link></li>
|
||||
<li><Link to="/products">产品中心</Link></li>
|
||||
<li><Link to="/contact">联系我们</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>联系方式</h4>
|
||||
<ul className="footer-contact">
|
||||
<li>地址：深圳市南山区粤海街道高新区社区高新南九道53号航空航天大厦2号楼1108</li>
|
||||
<li>电话：0755-86702680</li>
|
||||
<li>邮箱：luosihai@yunduanweilai.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>关注我们</h4>
|
||||
<div className="footer-social">
|
||||
<div className="social-item">
|
||||
<span className="social-name">公众号</span>
|
||||
<div className="social-qr">
|
||||
<img src="/gzh.png" alt="公众号" className="social-qr-img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-item">
|
||||
<span className="social-name">抖音</span>
|
||||
<div className="social-qr">
|
||||
<img src="/dy.png" alt="抖音" className="social-qr-img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-bottom">
|
||||
<p>© 2026 深圳市云端未来科技有限公司 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" className="icp-link">粤ICP备2022021444号</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -0,0 +1,144 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--gray-600);
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.menu-toggle span {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: var(--gray-700);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-toggle.active span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
.menu-toggle.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-toggle.active span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(5px, -5px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
height: 60px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 36px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--white);
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
gap: 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.nav-open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import './Header.css'
|
||||
|
||||
function Header() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const location = useLocation()
|
||||
|
||||
const navLinks = [
|
||||
{ path: '/', label: '首页' },
|
||||
{ path: '/about', label: '关于我们' },
|
||||
{ path: '/products', label: '产品中心' },
|
||||
{ path: '/contact', label: '联系我们' },
|
||||
]
|
||||
|
||||
const isActive = (path) => location.pathname === path
|
||||
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="container header-content">
|
||||
<Link to="/" className="logo">
|
||||
<img src="/logo.svg" alt="logo" className="logo-img" />
|
||||
</Link>
|
||||
|
||||
<nav className={`nav ${isMenuOpen ? 'nav-open' : ''}`}>
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className={`nav-link ${isActive(link.path) ? 'active' : ''}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<button
|
||||
className={`menu-toggle ${isMenuOpen ? 'active' : ''}`}
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
aria-label="切换菜单"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--secondary: #64748b;
|
||||
--dark: #1e293b;
|
||||
--light: #f8fafc;
|
||||
--white: #ffffff;
|
||||
--gray-100: #f1f5f9;
|
||||
--gray-200: #e2e8f0;
|
||||
--gray-300: #cbd5e1;
|
||||
--gray-400: #94a3b8;
|
||||
--gray-500: #64748b;
|
||||
--gray-600: #475569;
|
||||
--gray-700: #334155;
|
||||
--gray-800: #1e293b;
|
||||
--gray-900: #0f172a;
|
||||
}
|
||||
|
||||
main {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--gray-800);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
text-align: center;
|
||||
color: var(--gray-500);
|
||||
margin-bottom: 3rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 32px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
border: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,216 @@
|
||||
.about {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: var(--white);
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* About Intro */
|
||||
.about-intro {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-intro-content h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.about-intro-content p {
|
||||
font-size: 1rem;
|
||||
color: var(--gray-600);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.about-intro-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.company-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 1rem;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
/* Team Section */
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.team-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: var(--white);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.team-card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.team-position {
|
||||
font-size: 0.875rem;
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.team-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Values Section */
|
||||
.values-section {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
background: var(--white);
|
||||
padding: 40px 24px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.value-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.value-card p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.about-intro {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
.team-grid,
|
||||
.values-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.about-intro-content h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
.team-grid,
|
||||
.values-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useEffect } from 'react'
|
||||
import './About.css'
|
||||
|
||||
function About() {
|
||||
useEffect(() => {
|
||||
document.title = '关于我们 - 深圳市云端未来科技有限公司'
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="about">
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<h1>关于我们</h1>
|
||||
<p>了解我们的故事、文化</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Intro */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="about-intro">
|
||||
<div className="about-intro-content">
|
||||
<h2>公司简介</h2>
|
||||
<p>
|
||||
深圳市云端未来科技有限公司，专注云游戏、云手机、云直播领域。面向大规模移动端部署场景提供综合解决方案，同时为高算力需求客户提供异构分布式算力运营服务，帮助客户实现成本优化。
|
||||
</p>
|
||||
<p>
|
||||
作为 ARM 云计算服务商，我们依托自研 ARM 核心技术及软硬件产品，为行业客户提供实时算力，应用优化、快速部署的一体化交付服务。
|
||||
</p>
|
||||
</div>
|
||||
<div className="about-intro-image">
|
||||
<img src="/Company.png" alt="深圳市云端未来科技有限公司办公环境" className="company-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className="section values-section">
|
||||
<div className="container">
|
||||
<h2 className="section-title">核心价值观</h2>
|
||||
<p className="section-subtitle">指引我们前行的信念</p>
|
||||
<div className="values-grid">
|
||||
<div className="value-card">
|
||||
<h3>创新</h3>
|
||||
<p>持续创新是企业的灵魂，我们不断探索新技术、新方法，为客户创造更大价值。</p>
|
||||
</div>
|
||||
<div className="value-card">
|
||||
<h3>诚信</h3>
|
||||
<p>诚信是合作的基石，我们始终以诚相待，信守承诺，赢得客户信赖。</p>
|
||||
</div>
|
||||
<div className="value-card">
|
||||
<h3>共赢</h3>
|
||||
<p>我们追求与客户、员工、合作伙伴的共同发展，实现多方共赢。</p>
|
||||
</div>
|
||||
<div className="value-card">
|
||||
<h3>卓越</h3>
|
||||
<p>卓越是我们永恒的追求，我们不断挑战自我，追求更高目标。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@@ -0,0 +1,265 @@
|
||||
.contact {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
/* Contact Info */
|
||||
.contact-info h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.contact-desc {
|
||||
font-size: 1rem;
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: var(--white);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-content h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-content p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-600);
|
||||
word-break: break-word;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Contact Form */
|
||||
.contact-form-wrapper {
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.contact-form h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--gray-700);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 1rem;
|
||||
color: var(--gray-800);
|
||||
background-color: var(--gray-50);
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group input.error,
|
||||
.form-group textarea.error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.form-group input::placeholder,
|
||||
.form-group textarea::placeholder {
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: #ef4444;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.contact-form .btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
.success-message {
|
||||
text-align: center;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||
color: var(--white);
|
||||
font-size: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.success-message h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.success-message p {
|
||||
font-size: 1rem;
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* Map Section */
|
||||
.map-section {
|
||||
padding: 0 0 80px;
|
||||
}
|
||||
|
||||
.map-iframe {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* QR Codes */
|
||||
.qr-codes {
|
||||
padding: 32px;
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.qr-codes h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.qr-hint {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-list {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.qr-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-500);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.qr-item p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.contact-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-form-wrapper {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.qr-list {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import './Contact.css'
|
||||
|
||||
function Contact() {
|
||||
useEffect(() => {
|
||||
document.title = '联系我们 - 深圳市云端未来科技有限公司'
|
||||
}, [])
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
company: '',
|
||||
message: '',
|
||||
})
|
||||
|
||||
const [errors, setErrors] = useState({})
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target
|
||||
setFormData((prev) => ({ ...prev, [name]: value }))
|
||||
if (errors[name]) {
|
||||
setErrors((prev) => ({ ...prev, [name]: '' }))
|
||||
}
|
||||
}
|
||||
|
||||
const validate = () => {
|
||||
const newErrors = {}
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = '请输入您的姓名'
|
||||
}
|
||||
if (!formData.phone.trim()) {
|
||||
newErrors.phone = '请输入您的电话'
|
||||
} else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
|
||||
newErrors.phone = '请输入正确的手机号码'
|
||||
}
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = '请输入您的邮箱'
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = '请输入正确的邮箱地址'
|
||||
}
|
||||
if (!formData.message.trim()) {
|
||||
newErrors.message = '请输入您的留言内容'
|
||||
}
|
||||
return newErrors
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
const newErrors = validate()
|
||||
if (Object.keys(newErrors).length > 0) {
|
||||
setErrors(newErrors)
|
||||
return
|
||||
}
|
||||
setSubmitted(true)
|
||||
setFormData({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
company: '',
|
||||
message: '',
|
||||
})
|
||||
}
|
||||
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: '地址',
|
||||
title: '公司地址',
|
||||
content: '深圳市南山区粤海街道高新区社区高新南九道53号航空航天大厦2号楼1108',
|
||||
},
|
||||
{
|
||||
icon: '电话',
|
||||
title: '联系电话',
|
||||
content: '0755-86702680',
|
||||
},
|
||||
{
|
||||
icon: '邮箱',
|
||||
title: '电子邮箱',
|
||||
content: 'luosihai@yunduanweilai.com',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="contact">
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<h1>联系我们</h1>
|
||||
<p>有任何问题或建议，请随时联系我们</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="contact-content">
|
||||
{/* Contact Info */}
|
||||
<div className="contact-info">
|
||||
<h2>联系方式</h2>
|
||||
<p className="contact-desc">
|
||||
期待您的来信，我们会尽快回复您的问题和需求
|
||||
</p>
|
||||
<div className="info-list">
|
||||
{contactInfo.map((item, index) => (
|
||||
<div key={index} className="info-item">
|
||||
<div className="info-icon">{item.icon}</div>
|
||||
<div className="info-content">
|
||||
<h4>{item.title}</h4>
|
||||
<p>{item.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QR Codes */}
|
||||
<div className="qr-codes">
|
||||
<h3>关注我们</h3>
|
||||
<p className="qr-hint">扫码关注，获取更多资讯</p>
|
||||
<div className="qr-list">
|
||||
<div className="qr-item">
|
||||
<img src="/gzh.png" alt="公众号" className="qr-image" />
|
||||
<p>公众号</p>
|
||||
</div>
|
||||
<div className="qr-item">
|
||||
<img src="/dy.png" alt="抖音" className="qr-image" />
|
||||
<p>抖音</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
@@ -0,0 +1,239 @@
|
||||
.home {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
|
||||
color: var(--white);
|
||||
padding: 120px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 40px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-btns {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero .btn-secondary {
|
||||
color: var(--white);
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
.hero .btn-secondary:hover {
|
||||
background-color: var(--white);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--white);
|
||||
padding: 40px 24px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: var(--white);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Products Preview Section */
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-tag {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.product-info h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.product-info p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
color: var(--primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.product-link:hover {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.cta .btn-primary {
|
||||
background-color: var(--white);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.cta .btn-primary:hover {
|
||||
background-color: var(--gray-100);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-btns {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.features-grid,
|
||||
.products-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cta h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import './Home.css'
|
||||
|
||||
function Home() {
|
||||
useEffect(() => {
|
||||
document.title = '云端未来 Future in Cloud - 云游戏|云手机|云直播解决方案'
|
||||
}, [])
|
||||
const features = [
|
||||
{
|
||||
icon: '01',
|
||||
title: '专业团队',
|
||||
desc: '汇聚行业精英，为您提供专业的服务',
|
||||
},
|
||||
{
|
||||
icon: '02',
|
||||
title: '优质产品',
|
||||
desc: '严选品质，确保每一款产品都达到高标准',
|
||||
},
|
||||
{
|
||||
icon: '03',
|
||||
title: '创新技术',
|
||||
desc: '持续研发投入，推动行业技术革新',
|
||||
},
|
||||
{
|
||||
icon: '04',
|
||||
title: '完善服务',
|
||||
desc: '贴心服务，全程无忧',
|
||||
},
|
||||
]
|
||||
|
||||
const products = [
|
||||
{
|
||||
name: 'FC-3580',
|
||||
desc: '2U架构ARM集群服务器，80核心节点，支持IDC建设',
|
||||
tag: '热门推荐',
|
||||
image: '3580.png',
|
||||
imageAlt: '3580云游戏产品图片',
|
||||
},
|
||||
{
|
||||
name: 'FC-3520',
|
||||
desc: '高性能桌面服务器，20核心节点，中小企业/工作室的推荐方案',
|
||||
tag: '热门推荐',
|
||||
image: '3520.png',
|
||||
imageAlt: '3520云手机产品图片',
|
||||
},
|
||||
{
|
||||
name: 'AI 个人算力终端',
|
||||
desc: '小型服务器，双核心架构，面向个体用户的智能体',
|
||||
tag: '热销中',
|
||||
image: 'cloudbox.png',
|
||||
imageAlt: 'cloudbox云手机产品图片',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="home">
|
||||
{/* Hero Section */}
|
||||
<section className="hero">
|
||||
<div className="container">
|
||||
<div className="hero-content">
|
||||
<h1>深耕创新发展<br />共筑美好未来</h1>
|
||||
<p>我们致力于提供高品质产品与专业服务，以科技创新赋能行业进步</p>
|
||||
<div className="hero-btns">
|
||||
<Link to="/products" className="btn btn-primary">了解更多产品</Link>
|
||||
<Link to="/contact" className="btn btn-secondary">联系我们</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="section features">
|
||||
<div className="container">
|
||||
<h2 className="section-title">为什么选择我们</h2>
|
||||
<p className="section-subtitle">专业品质，值得信赖</p>
|
||||
<div className="features-grid">
|
||||
{features.map((item, index) => (
|
||||
<div key={index} className="feature-card">
|
||||
<div className="feature-icon">{item.icon}</div>
|
||||
<h3>{item.title}</h3>
|
||||
<p>{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Products Section */}
|
||||
<section className="section products-preview">
|
||||
<div className="container">
|
||||
<h2 className="section-title">热门产品</h2>
|
||||
<p className="section-subtitle">精选产品，品质保证</p>
|
||||
<div className="products-grid">
|
||||
{products.map((item, index) => (
|
||||
<div key={index} className="product-card">
|
||||
<div className="product-image">
|
||||
<img src={`/${item.image}`} alt={item.imageAlt} className="product-img" />
|
||||
<span className="product-tag">{item.tag}</span>
|
||||
</div>
|
||||
<div className="product-info">
|
||||
<h3>{item.name}</h3>
|
||||
<p>{item.desc}</p>
|
||||
<Link to="/products" className="product-link">查看详情 →</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="section cta">
|
||||
<div className="container">
|
||||
<h2>准备好开始了吗？</h2>
|
||||
<p>联系我们，获取更多信息和专业咨询</p>
|
||||
<Link to="/contact" className="btn btn-primary">立即咨询</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
@@ -0,0 +1,164 @@
|
||||
.products {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-tag {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.product-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
background-color: var(--gray-100);
|
||||
color: var(--gray-700);
|
||||
padding: 4px 12px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.product-card .btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Service Section */
|
||||
.service-section {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.service-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.service-step {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-step::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
width: 32px;
|
||||
height: 2px;
|
||||
background-color: var(--gray-300);
|
||||
}
|
||||
|
||||
.service-step:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
color: var(--white);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.service-step h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.service-step p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.service-steps {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.service-step::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.products-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useEffect } from 'react'
|
||||
import './Products.css'
|
||||
|
||||
function Products() {
|
||||
useEffect(() => {
|
||||
document.title = '产品中心 - 云端未来|云游戏|云手机|云直播产品'
|
||||
}, [])
|
||||
const products = [
|
||||
{
|
||||
name: 'FC-3580',
|
||||
category: '企业/政务解决方案',
|
||||
desc: '2U架构ARM集群服务器，80核心节点，支持IDC建设，帮助企业实现数字化管理，提升运营效率。',
|
||||
features: ['高性能', 'IDC部署', '移动办公', 'API接口'],
|
||||
tag: '热门推荐',
|
||||
},
|
||||
{
|
||||
name: 'FC-3520',
|
||||
category: '企业级智能体',
|
||||
desc: '高性能桌面服务器，20核心节点，中小企业/工作室的推荐方案，提供个性化的服务体验，适用于多种场景。',
|
||||
features: ['AI智能体', '矩阵社媒', '远程可控', 'API接口'],
|
||||
tag: '热门推荐',
|
||||
},
|
||||
{
|
||||
name: 'AI 个人算力终端',
|
||||
category: '个人智能助理',
|
||||
desc: '小型服务器，双核心架构，面向个体用户的智能体',
|
||||
features: ['opc', '矩阵社媒', '游戏多开', 'API接口'],
|
||||
tag: '热销中',
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="products">
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<h1>产品中心</h1>
|
||||
<p>精选产品，品质保证</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="products-grid">
|
||||
{products.map((item, index) => (
|
||||
<div key={index} className="product-card">
|
||||
<div className="product-header">
|
||||
<span className="product-tag">{item.tag}</span>
|
||||
<span className="product-category">{item.category}</span>
|
||||
</div>
|
||||
<h3>{item.name}</h3>
|
||||
<p className="product-desc">{item.desc}</p>
|
||||
<div className="product-features">
|
||||
{item.features.map((feature, idx) => (
|
||||
<span key={idx} className="feature-tag">{feature}</span>
|
||||
))}
|
||||
</div>
|
||||
<button className="btn btn-primary">了解更多</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Process */}
|
||||
<section className="section service-section">
|
||||
<div className="container">
|
||||
<h2 className="section-title">服务流程</h2>
|
||||
<p className="section-subtitle">专业服务，全程贴心</p>
|
||||
<div className="service-steps">
|
||||
<div className="service-step">
|
||||
<div className="step-number">1</div>
|
||||
<h4>需求咨询</h4>
|
||||
<p>了解您的需求，提供专业建议</p>
|
||||
</div>
|
||||
<div className="service-step">
|
||||
<div className="step-number">2</div>
|
||||
<h4>方案定制</h4>
|
||||
<p>根据需求定制专属解决方案</p>
|
||||
</div>
|
||||
<div className="service-step">
|
||||
<div className="step-number">3</div>
|
||||
<h4>实施部署</h4>
|
||||
<p>专业团队高效部署实施</p>
|
||||
</div>
|
||||
<div className="service-step">
|
||||
<div className="step-number">4</div>
|
||||
<h4>售后服务</h4>
|
||||
<p>持续服务，保障稳定运行</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Products
|
||||
Reference in New Issue
Block a user