
[网站模板]展览会宣传网站
2025年9月5日
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>未来数码电子科技城</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #4e6fff;
--primary-dark: #3a5afd;
--secondary: #00c6ff;
--dark-bg: #0f172a;
--dark-card: #1e293b;
--dark-text: #f1f5f9;
--light-bg: #f8fafc;
--light-card: #ffffff;
--light-text: #0a0a0a;
--transition: all 0.3s ease;
--q-color:#94a3b8;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--dark-bg);
color: var(--dark-text);
transition: var(--transition);
}
body.light-mode {
background-color: var(--light-bg);
color: var(--light-text);
--q-color: var(--light-text);
}
/* 导航栏样式 */
header {
background-color: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
padding: 1rem 5%;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition);
}
body.light-mode header {
background-color: rgba(248, 250, 252, 0.9);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo-icon {
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(45deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(--dark-text);
text-decoration: none;
font-weight: 500;
position: relative;
transition: var(--transition);
}
.nav-links a:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
transition: var(--transition);
}
.nav-links a:hover:after {
width: 100%;
}
.nav-links a:hover {
color: var(--primary);
}
body.light-mode .nav-links a {
color: var(--light-text);
}
.theme-toggle {
background: none;
border: none;
color: var(--dark-text);
cursor: pointer;
font-size: 1.2rem;
transition: var(--transition);
}
body.light-mode .theme-toggle {
color: var(--light-text);
}
.hamburger {
display: none;
background: none;
border: none;
color: var(--dark-text);
font-size: 1.5rem;
cursor: pointer;
}
body.light-mode .hamburger {
color: var(--light-text);
}
/* 英雄区域 */
.hero {
padding: 5rem 5%;
min-height: 80vh;
display: flex;
align-items: center;
background: radial-gradient(circle at 10% 20%, rgba(78, 111, 255, 0.1) 0%, rgba(15, 23, 42, 0) 50%);
}
body.light-mode .hero {
background: radial-gradient(circle at 10% 20%, rgba(78, 111, 255, 0.05) 0%, rgba(248, 250, 252, 0) 50%);
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.hero-text h1 {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
background: linear-gradient(45deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-text p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
color: #94a3b8;
max-width: 600px;
}
body.light-mode .hero-text p {
color: #64748b;
}
.cta-button {
display: inline-block;
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
padding: 1rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition);
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(78, 111, 255, 0.4);
}
.hero-image {
position: relative;
display: flex;
justify-content: center;
}
.hero-image-container {
width: 100%;
max-width: 500px;
height: 400px;
background: linear-gradient(45deg, rgba(78, 111, 255, 0.2), rgba(0, 198, 255, 0.2));
border-radius: 20px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.glowing-circle {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: linear-gradient(45deg, var(--primary), var(--secondary));
filter: blur(50px);
opacity: 0.4;
animation: pulse 4s infinite alternate;
}
.tech-icons {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
z-index: 2;
}
.tech-icon {
width: 80px;
height: 80px;
background-color: var(--dark-card);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: var(--transition);
}
body.light-mode .tech-icon {
background-color: var(--light-card);
}
.tech-icon:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
/* 特色区域 */
.features {
padding: 5rem 5%;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-subtitle {
text-align: center;
color: #94a3b8;
max-width: 700px;
margin: 0 auto 3rem;
font-size: 1.1rem;
}
body.light-mode .section-subtitle {
color: #64748b;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background-color: var(--dark-card);
border-radius: 15px;
padding: 2rem;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.05);
}
body.light-mode .feature-card {
background-color: var(--light-card);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-color: rgba(78, 111, 255, 0.2);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.feature-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-description {
color: #94a3b8;
line-height: 1.6;
}
body.light-mode .feature-description {
color: #64748b;
}
/* 产品展示区 */
.products {
padding: 5rem 5%;
background: radial-gradient(circle at 90% 50%, rgba(78, 111, 255, 0.1) 0%, rgba(15, 23, 42, 0) 50%);
}
body.light-mode .products {
background: radial-gradient(circle at 90% 50%, rgba(78, 111, 255, 0.05) 0%, rgba(248, 250, 252, 0) 50%);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.product-card {
background-color: var(--dark-card);
border-radius: 15px;
overflow: hidden;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.05);
}
body.light-mode .product-card {
background-color: var(--light-card);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.product-image {
height: 200px;
background: linear-gradient(45deg, rgba(78, 111, 255, 0.2), rgba(0, 198, 255, 0.2));
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--primary);
}
.product-info {
padding: 1.5rem;
}
.product-title {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.product-price {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary);
}
.product-description {
color: #94a3b8;
margin-bottom: 1.5rem;
}
body.light-mode .product-description {
color: #64748b;
}
/* 页脚 */
footer {
background-color: var(--dark-card);
padding: 3rem 5%;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
body.light-mode footer {
background-color: var(--light-card);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
}
.footer-column h3:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
border-radius: 3px;
}
.footer-column .about_text {
color: var(--q-color);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
color: var(--q-color);
}
.footer-links a {
color: var(--q-color);
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary);
padding-left: 5px;
}
body.light-mode .footer-links a {
color: var(--light-text);
}
.social-icons {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-icon {
width: 40px;
height: 40px;
background-color: var(--dark-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.social-icon {
color: var(--dark-text);
text-decoration: none;
}
body.light-mode .social-icon {
background-color: #e2e8f0;
color: var(--light-text);
}
.social-icon:hover {
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
transform: translateY(-5px);
}
body.light-mode .social-icon:hover {
background: linear-gradient(45deg, var(--primary), var(--secondary));
color: white;
transform: translateY(-5px);
}
.copyright {
text-align: center;
padding-top: 3rem;
color: #94a3b8;
font-size: 0.9rem;
max-width: 1200px;
margin: 0 auto;
}
.copyright a {
text-decoration: none;
color: var(--dark-text);
}
body.light-mode .copyright {
color: #64748b;
}
body.light-mode .copyright a {
color: var(--light-text);
}
/* 动画 */
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.4;
}
100% {
transform: scale(1.1);
opacity: 0.6;
}
}
/* 响应式设计 */
@media screen and (max-width: 992px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text {
display: flex;
flex-direction: column;
align-items: center;
}
.hero-text p {
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
.nav-links {
position: fixed;
top: 70px;
left: 0;
background-color: var(--dark-card);
width: 100%;
flex-direction: column;
align-items: center;
padding: 2rem 0;
gap: 1.5rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: var(--transition);
z-index: 99;
}
body.light-mode .nav-links {
background-color: var(--light-card);
}
.nav-links.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hamburger {
display: block;
}
.hero-text h1 {
font-size: 2.5rem;
}
}
@media screen and (max-width: 480px) {
.section-title {
font-size: 2rem;
}
.hero-text h1 {
font-size: 2rem;
}
.hero-text p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<nav class="navbar">
<div class="logo">
<div class="logo-icon">
<i class="fas fa-microchip"></i>
</div>
<div class="logo-text">XG数码电子科技城</div>
</div>
<ul class="nav-links">
<li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
<li><a href="#"><i class="fas fa-shopping-bag"></i> 产品中心</a></li>
<li><a href="#footer-column-about"><i class="fas fa-info-circle"></i> 关于我们</a></li>
<li><a href="#"><i class="fas fa-headset"></i> 技术支持</a></li>
<li><a href="#footer-column-contact"><i class="fas fa-phone-alt"></i> 联系我们</a></li>
</ul>
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
</nav>
</header>
<!-- 英雄区域 -->
<section class="hero">
<div class="hero-content">
<div class="hero-text">
<h1>探索未来科技世界</h1>
<p>XG数码电子科技城为您提供最前沿的电子产品、智能设备和技术解决方案。我们致力于打造一个集创新、科技与生活于一体的电子科技生态圈。</p>
<a href="#" class="cta-button">立即探索 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="hero-image">
<div class="hero-image-container">
<div class="glowing-circle"></div>
<div class="tech-icons">
<div class="tech-icon"><i class="fas fa-laptop"></i></div>
<div class="tech-icon"><i class="fas fa-mobile-alt"></i></div>
<div class="tech-icon"><i class="fas fa-headphones"></i></div>
<div class="tech-icon"><i class="fas fa-camera"></i></div>
<div class="tech-icon"><i class="fas fa-gamepad"></i></div>
<div class="tech-icon"><i class="fas fa-tablet-alt"></i></div>
</div>
</div>
</div>
</div>
</section>
<!-- 特色区域 -->
<section class="features">
<h2 class="section-title">我们的优势</h2>
<p class="section-subtitle">XG数码电子科技城提供全方位的电子产品服务与解决方案,满足您对科技生活的所有想象</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shipping-fast"></i>
</div>
<h3 class="feature-title">快速配送</h3>
<p class="feature-description">覆盖全国300+城市的极速物流网络,确保您第一时间收到心仪的产品</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="feature-title">正品保障</h3>
<p class="feature-description">所有产品均为官方授权正品,提供完善的售后保障与技术支持</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-headset"></i>
</div>
<h3 class="feature-title">专业支持</h3>
<p class="feature-description">7×24小时专业客服团队,随时为您解答技术问题与产品咨询</p>
</div>
</div>
</section>
<!-- 产品展示区 -->
<section class="products">
<h2 class="section-title">热门产品</h2>
<p class="section-subtitle">探索我们最新最热门的电子产品,享受科技带来的无限可能</p>
<div class="products-grid">
<div class="product-card">
<div class="product-image">
<i class="fas fa-laptop"></i>
</div>
<div class="product-info">
<h3 class="product-title">超极本 Pro X</h3>
<div class="product-price">¥8,999</div>
<p class="product-description">14英寸4K显示屏,第12代酷睿i7处理器,16GB内存,1TB SSD</p>
<a href="#" class="cta-button">立即购买</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="product-info">
<h3 class="product-title">智能手机 Alpha</h3>
<div class="product-price">¥5,299</div>
<p class="product-description">6.7英寸AMOLED屏幕,骁龙8 Gen2处理器,120Hz刷新率</p>
<a href="#" class="cta-button">立即购买</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-headphones"></i>
</div>
<div class="product-info">
<h3 class="product-title">降噪耳机 Pro</h3>
<div class="product-price">¥1,299</div>
<p class="product-description">主动降噪技术,30小时续航,Hi-Fi音质,无线充电</p>
<a href="#" class="cta-button">立即购买</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-headphones"></i>
</div>
<div class="product-info">
<h3 class="product-title">降噪耳机 Pro</h3>
<div class="product-price">¥1,299</div>
<p class="product-description">主动降噪技术,30小时续航,Hi-Fi音质,无线充电</p>
<a href="#" class="cta-button">立即购买</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="product-info">
<h3 class="product-title">智能手机 Alpha</h3>
<div class="product-price">¥5,299</div>
<p class="product-description">6.7英寸AMOLED屏幕,骁龙8 Gen2处理器,120Hz刷新率</p>
<a href="#" class="cta-button">立即购买</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<i class="fas fa-laptop"></i>
</div>
<div class="product-info">
<h3 class="product-title">超极本 Pro X</h3>
<div class="product-price">¥8,999</div>
<p class="product-description">14英寸4K显示屏,第12代酷睿i7处理器,16GB内存,1TB SSD</p>
<a href="#" class="cta-button">立即购买</a>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="footer-content">
<div class="footer-column" id="footer-column-about">
<h3>关于我们</h3>
<p class="about_text">XG数码电子科技城成立于2010年,是领先的电子产品零售与解决方案提供商,致力于为消费者带来最前沿的科技体验。</p>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
<a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a>
<a href="#" class="social-icon"><i class="fab fa-bilibili"></i></a>
</div>
</div>
<div class="footer-column">
<h3>快速链接</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> 首页</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 产品中心</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 促销活动</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 技术支持</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 关于我们</a></li>
</ul>
</div>
<div class="footer-column" id="footer-column-contact">
<h3>联系我们</h3>
<ul class="footer-links">
<li><i class="fas fa-map-marker-alt"></i> 深圳市南山区科技园A区8888号</li>
<li><i class="fas fa-phone-alt"></i> 400-8888-9999</li>
<li><i class="fas fa-envelope"></i> xg@tomde.cloud</li>
<li><i class="fas fa-clock"></i> 周一至周日: 9:00 - 21:00</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a></p>
</div>
</footer>
<script>
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
const themeIcon = themeToggle.querySelector('i');
// 检查本地存储中的主题设置
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
body.classList.add('light-mode');
themeIcon.classList.replace('fa-moon', 'fa-sun');
}
themeToggle.addEventListener('click', () => {
body.classList.toggle('light-mode');
if (body.classList.contains('light-mode')) {
themeIcon.classList.replace('fa-moon', 'fa-sun');
localStorage.setItem('theme', 'light');
} else {
themeIcon.classList.replace('fa-sun', 'fa-moon');
localStorage.setItem('theme', 'dark');
}
});
// 移动端导航菜单
const hamburger = document.getElementById('hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
// 切换汉堡菜单图标
const icon = hamburger.querySelector('i');
if (navLinks.classList.contains('active')) {
icon.classList.replace('fa-bars', 'fa-times');
} else {
icon.classList.replace('fa-times', 'fa-bars');
}
});
// 关闭移动菜单当点击菜单项时
const navItems = document.querySelectorAll('.nav-links a');
navItems.forEach(item => {
item.addEventListener('click', () => {
navLinks.classList.remove('active');
hamburger.querySelector('i').classList.replace('fa-times', 'fa-bars');
});
});
</script>
</body>
</html>