docs: 更新项目文档，完善需求和技术细节
This commit is contained in:
ylweng
326
official_website/about.html
Normal file
326
official_website/about.html
Normal file
@@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="了解爱鉴花的故事、使命和团队 - 专业的AI花卉识别平台，由资深人工智能专家和植物学家组成的创新团队。">
|
||||
<meta name="keywords" content="爱鉴花团队,AI花卉识别,植物识别技术,公司介绍,团队介绍,发展历程">
|
||||
<meta name="author" content="爱鉴花团队">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="关于我们 - 爱鉴花">
|
||||
<meta property="og:description" content="了解爱鉴花的故事、使命和专业团队，我们致力于通过AI技术让植物识别变得简单有趣。">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://aijianhua.com/about.html">
|
||||
<meta property="og:image" content="https://aijianhua.com/images/about-og.png">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="关于我们 - 爱鉴花">
|
||||
<meta name="twitter:description" content="了解爱鉴花的故事、使命和专业团队。">
|
||||
|
||||
<title>关于我们 - 爱鉴花</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-flower text-primary me-2"></i>
|
||||
<span class="fw-bold text-primary">爱鉴花</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="products.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="news.html">新闻中心</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<section class="page-header bg-gradient-primary text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1 class="display-4 fw-bold mb-3">关于我们</h1>
|
||||
<p class="lead">了解爱鉴花的故事、使命和团队</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 公司介绍 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="display-5 fw-bold text-dark mb-4">我们的故事</h2>
|
||||
<p class="lead text-muted mb-4">
|
||||
爱鉴花成立于2023年，是一家专注于人工智能花卉识别技术的创新企业。
|
||||
我们致力于通过先进的AI技术，让每个人都能轻松识别和了解身边的植物。
|
||||
</p>
|
||||
<p class="text-muted">
|
||||
我们的团队由资深的人工智能专家、植物学家和产品设计师组成，
|
||||
共同打造了这款智能花卉识别平台。通过深度学习和大数据分析，
|
||||
我们能够准确识别数千种花卉植物，并提供详细的养护知识。
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img src="images/about-1.jpg" alt="公司环境" class="img-fluid rounded shadow lazy-load" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 使命愿景 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 text-center p-4">
|
||||
<div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-bullseye fa-2x"></i>
|
||||
</div>
|
||||
<h4 class="mb-3">我们的使命</h4>
|
||||
<p class="text-muted">
|
||||
通过人工智能技术，让植物识别变得简单有趣，
|
||||
帮助人们更好地了解和保护自然环境。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 text-center p-4">
|
||||
<div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-eye fa-2x"></i>
|
||||
</div>
|
||||
<h4 class="mb-3">我们的愿景</h4>
|
||||
<p class="text-muted">
|
||||
成为全球领先的植物识别平台，
|
||||
构建连接人与自然的知识桥梁。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 text-center p-4">
|
||||
<div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-handshake fa-2x"></i>
|
||||
</div>
|
||||
<h4 class="mb-3">我们的价值观</h4>
|
||||
<p class="text-muted">
|
||||
创新、专业、用户至上、环境保护，
|
||||
这些是我们始终坚持的核心价值观。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<h2 class="display-5 fw-bold text-dark text-center mb-5">发展历程</h2>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2023年1月</h5>
|
||||
<p>公司成立，开始AI花卉识别技术研发</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2023年6月</h5>
|
||||
<p>完成首个花卉识别模型，准确率达到85%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2023年9月</h5>
|
||||
<p>微信小程序上线，获得首批用户</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2024年1月</h5>
|
||||
<p>识别准确率提升至95%，用户突破10万</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 团队介绍 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container py-5">
|
||||
<h2 class="display-5 fw-bold text-dark text-center mb-5">核心团队</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card team-card border-0 text-center">
|
||||
<img src="images/team-1.jpg" alt="CEO" class="card-img-top rounded-circle mx-auto mt-4 lazy-load" style="width: 120px; height: 120px; object-fit: cover;" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">张明</h5>
|
||||
<p class="text-muted">CEO/创始人</p>
|
||||
<p class="card-text text-muted small">
|
||||
前Google AI工程师，10年人工智能领域经验
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card team-card border-0 text-center">
|
||||
<img src="images/team-2.jpg" alt="CTO" class="card-img-top rounded-circle mx-auto mt-4 lazy-load" style="width: 120px; height: 120px; object-fit: cover;" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">李华</h5>
|
||||
<p class="text-muted">CTO</p>
|
||||
<p class="card-text text-muted small">
|
||||
深度学习专家，专注于计算机视觉技术
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card team-card border-0 text-center">
|
||||
<img src="images/team-3.jpg" alt="植物学家" class="card-img-top rounded-circle mx-auto mt-4 lazy-load" style="width: 120px; height: 120px; object-fit: cover;" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">王教授</h5>
|
||||
<p class="text-muted">首席植物学家</p>
|
||||
<p class="card-text text-muted small">
|
||||
中科院植物研究所博士，30年植物学研究经验
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="card team-card border-0 text-center">
|
||||
<img src="images/team-4.jpg" alt="产品经理" class="card-img-top rounded-circle mx-auto mt-4" style="width: 120px; height: 120px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">陈小姐</h5>
|
||||
<p class="text-muted">产品总监</p>
|
||||
<p class="card-text text-muted small">
|
||||
前腾讯产品经理，擅长用户体验设计
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h5 class="mb-3">爱鉴花</h5>
|
||||
<p class="text-muted">智能花卉识别平台，让您更好地了解和欣赏自然之美。</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="text-white"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">产品</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">企业版</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">支持</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">帮助中心</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">常见问题</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h6 class="mb-3">联系我们</h6>
|
||||
<p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区中关村大街</p>
|
||||
<p class="text-muted mb-1"><i class="fas fa-phone me-2"></i>400-123-4567</p>
|
||||
<p class="text-muted"><i class="fas fa-envelope me-2"></i>contact@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p class="text-muted mb-0">© 2024 爱鉴花. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<p class="text-muted mb-0">
|
||||
<a href="#" class="text-muted text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-muted text-decoration-none">京ICP备12345678号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-muted small">
|
||||
友情链接：
|
||||
<a href="#" class="text-muted text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-muted text-decoration-none">园林在线</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Schema.org结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "AboutPage",
|
||||
"name": "关于爱鉴花",
|
||||
"description": "了解爱鉴花的故事、使命和专业团队，我们致力于通过AI技术让植物识别变得简单有趣。",
|
||||
"url": "https://aijianhua.com/about.html",
|
||||
"mainEntity": {
|
||||
"@type": "Organization",
|
||||
"name": "爱鉴花",
|
||||
"description": "专业的AI花卉识别平台",
|
||||
"url": "https://aijianhua.com",
|
||||
"foundingDate": "2023-01",
|
||||
"founder": [
|
||||
{
|
||||
"@type": "Person",
|
||||
"name": "张明"
|
||||
}
|
||||
],
|
||||
"numberOfEmployees": "15",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "北京",
|
||||
"addressCountry": "CN"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
481
official_website/contact.html
Normal file
481
official_website/contact.html
Normal file
@@ -0,0 +1,481 @@
|
||||
<!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 href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-flower text-primary me-2"></i>
|
||||
<span class="fw-bold text-primary">爱鉴花</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="products.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="news.html">新闻中心</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<section class="page-header bg-gradient-primary text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1 class="display-4 fw-bold mb-3">联系我们</h1>
|
||||
<p class="lead">我们很乐意听取您的意见和建议</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- 联系表单 -->
|
||||
<div class="card border-0 shadow-sm mb-5">
|
||||
<div class="card-body p-5">
|
||||
<h2 class="fw-bold mb-4 text-dark">发送消息</h2>
|
||||
<form id="contactForm">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">姓名 *</label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">邮箱 *</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="phone" class="form-label">电话</label>
|
||||
<input type="tel" class="form-control" id="phone">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="subject" class="form-label">主题 *</label>
|
||||
<select class="form-select" id="subject" required>
|
||||
<option value="">请选择主题</option>
|
||||
<option value="general">一般咨询</option>
|
||||
<option value="technical">技术支持</option>
|
||||
<option value="business">商务合作</option>
|
||||
<option value="feedback">产品反馈</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">消息内容 *</label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="agree" required>
|
||||
<label class="form-check-label" for="agree">
|
||||
我同意<a href="#" class="text-primary">隐私政策</a>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100">发送消息</button>
|
||||
<div class="mt-3 text-center">
|
||||
<small class="text-muted">我们将在24小时内回复您的消息</small>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 表单提交成功提示 -->
|
||||
<div class="alert alert-success mt-4 d-none" id="successAlert">
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
消息发送成功！我们会尽快与您联系。
|
||||
</div>
|
||||
|
||||
<!-- 表单提交失败提示 -->
|
||||
<div class="alert alert-danger mt-4 d-none" id="errorAlert">
|
||||
<i class="fas fa-exclamation-circle me-2"></i>
|
||||
发送失败，请检查表单内容后重试。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<!-- 联系信息卡片 -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-map-marker-alt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">公司地址</h5>
|
||||
<p class="text-muted">
|
||||
北京市海淀区中关村大街<br>
|
||||
科技园区A座1001室
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-phone fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">联系电话</h5>
|
||||
<p class="text-muted">
|
||||
400-123-4567<br>
|
||||
+86 10-8888-7777
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-envelope fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">电子邮箱</h5>
|
||||
<p class="text-muted">
|
||||
contact@aijianhua.com<br>
|
||||
support@aijianhua.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-clock fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">工作时间</h5>
|
||||
<p class="text-muted">
|
||||
周一至周五: 9:00-18:00<br>
|
||||
周末: 10:00-16:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 地图 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">我们的位置</h2>
|
||||
<p class="lead text-muted">欢迎来访我们的办公室</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<!-- 地图占位图 -->
|
||||
<div class="map-placeholder bg-secondary text-white text-center py-5">
|
||||
<i class="fas fa-map-marked-alt fa-4x mb-3"></i>
|
||||
<h4>地图位置</h4>
|
||||
<p>北京市海淀区中关村大街科技园区A座</p>
|
||||
<small class="text-white-50">（实际部署时可集成百度地图或高德地图）</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">常见问题</h2>
|
||||
<p class="lead text-muted">快速找到您需要的答案</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="accordion" id="faqAccordion">
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
||||
如何开始使用爱鉴花小程序？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
在微信中搜索"爱鉴花"即可找到我们的小程序，
|
||||
点击进入后即可开始使用花卉识别功能。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
||||
识别准确率如何？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
我们的AI识别准确率目前达到95%，
|
||||
在良好光线和清晰图片条件下准确率更高。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="accordion" id="faqAccordion2">
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
||||
是否支持企业定制？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
是的，我们提供企业定制服务，包括私有化部署、
|
||||
定制模型训练等，请联系商务合作部门。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
|
||||
技术支持响应时间？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
普通咨询：24小时内回复<br>
|
||||
紧急问题：4小时内响应<br>
|
||||
企业客户：专属技术支持
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="btn btn-outline-primary">查看更多问题</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h5 class="fw-bold mb-3">爱鉴花</h5>
|
||||
<p class="text-white-50">
|
||||
用AI技术连接人与自然，让植物识别变得简单有趣。
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-white-50 me-3"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-white-50 me-3"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="text-white-50"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">产品</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="products.html" class="text-white-50 text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="products.html" class="text-white-50 text-decoration-none">API服务</a></li>
|
||||
<li><a href="products.html" class="text-white-50 text-decoration-none">企业版</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">关于</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="about.html" class="text-white-50 text-decoration-none">关于我们</a></li>
|
||||
<li><a href="about.html" class="text-white-50 text-decoration-none">团队介绍</a></li>
|
||||
<li><a href="news.html" class="text-white-50 text-decoration-none">新闻动态</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">支持</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">帮助中心</a></li>
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">API文档</a></li>
|
||||
<li><a href="contact.html" class="text-white-50 text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">法律</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">隐私政策</a></li>
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">服务条款</a></li>
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">版权声明</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p class="text-white-50 mb-0">© 2024 爱鉴花. 保留所有权利</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<p class="text-white-50 mb-0">
|
||||
<a href="#" class="text-white-50 text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none">京ICP备12345678号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-white-50 small">
|
||||
友情链接：
|
||||
<a href="#" class="text-white-50 text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none">园林在线</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- 表单验证脚本 -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const successAlert = document.getElementById('successAlert');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
|
||||
// 实时表单验证
|
||||
const inputs = contactForm.querySelectorAll('input, textarea, select');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('blur', function() {
|
||||
validateField(this);
|
||||
});
|
||||
|
||||
input.addEventListener('input', function() {
|
||||
clearValidation(this);
|
||||
});
|
||||
});
|
||||
|
||||
// 表单提交处理
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isValid = true;
|
||||
inputs.forEach(input => {
|
||||
if (!validateField(input)) {
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
// 模拟表单提交成功
|
||||
simulateFormSubmission();
|
||||
}
|
||||
});
|
||||
|
||||
function validateField(field) {
|
||||
let isValid = true;
|
||||
let errorMessage = '';
|
||||
|
||||
if (field.required && !field.value.trim()) {
|
||||
isValid = false;
|
||||
errorMessage = '此字段为必填项';
|
||||
} else if (field.type === 'email' && field.value) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(field.value)) {
|
||||
isValid = false;
|
||||
errorMessage = '请输入有效的邮箱地址';
|
||||
}
|
||||
} else if (field.type === 'tel' && field.value) {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
if (!phoneRegex.test(field.value)) {
|
||||
isValid = false;
|
||||
errorMessage = '请输入有效的手机号码';
|
||||
}
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
showError(field, errorMessage);
|
||||
} else {
|
||||
clearValidation(field);
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function showError(field, message) {
|
||||
clearValidation(field);
|
||||
field.classList.add('is-invalid');
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'invalid-feedback';
|
||||
errorDiv.textContent = message;
|
||||
field.parentNode.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
function clearValidation(field) {
|
||||
field.classList.remove('is-invalid');
|
||||
const errorDiv = field.parentNode.querySelector('.invalid-feedback');
|
||||
if (errorDiv) {
|
||||
errorDiv.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function simulateFormSubmission() {
|
||||
// 显示加载状态
|
||||
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 发送中...';
|
||||
|
||||
// 模拟网络请求延迟
|
||||
setTimeout(() => {
|
||||
// 恢复按钮状态
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalText;
|
||||
|
||||
// 显示成功消息
|
||||
successAlert.classList.remove('d-none');
|
||||
errorAlert.classList.add('d-none');
|
||||
|
||||
// 重置表单
|
||||
contactForm.reset();
|
||||
|
||||
// 3秒后隐藏成功消息
|
||||
setTimeout(() => {
|
||||
successAlert.classList.add('d-none');
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
472
official_website/css/style.css
Normal file
472
official_website/css/style.css
Normal file
@@ -0,0 +1,472 @@
|
||||
/* 全局样式 */
|
||||
:root {
|
||||
--primary-color: #4CAF50; /* 植物绿色 */
|
||||
--secondary-color: #9C27B0; /* 花卉紫色 */
|
||||
--success-color: #66BB6A; /* 嫩绿色 */
|
||||
--info-color: #42A5F5; /* 天空蓝色 */
|
||||
--warning-color: #FFA726; /* 橙黄色 */
|
||||
--danger-color: #EF5350; /* 红色 */
|
||||
--light-color: #F1F8E9; /* 淡绿色背景 */
|
||||
--dark-color: #2E7D32; /* 深绿色 */
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
padding: 1rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin: 0 0.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover,
|
||||
.navbar-nav .nav-link.active {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* 英雄区域样式 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); /* 绿色渐变 */
|
||||
margin-top: 76px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.min-vh-75 {
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #3a56c4;
|
||||
border-color: #3a56c4;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 特性图标样式 */
|
||||
.feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card:hover .feature-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 产品卡片样式 */
|
||||
.product-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
|
||||
/* 新闻卡片样式 */
|
||||
.news-card {
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
/* 修复body样式 */
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100vh; /* 确保body有足够高度 */
|
||||
/* 移除了overflow-x: hidden */
|
||||
}
|
||||
|
||||
/* 增强页脚样式 */
|
||||
footer {
|
||||
position: relative;
|
||||
z-index: 10; /* 提高层级避免被遮挡 */
|
||||
background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%); /* 深绿色渐变 */
|
||||
}
|
||||
|
||||
footer h5,
|
||||
footer h6 {
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: white !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 表单验证样式 */
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
border-color: var(--danger-color) !important;
|
||||
}
|
||||
|
||||
.is-invalid:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
|
||||
}
|
||||
|
||||
/* 客户评价样式 */
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: var(--light-color);
|
||||
|
||||
/* 性能优化样式 */
|
||||
.lazy-load {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.lazy-load.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rating {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.team-card img {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.team-card:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.display-5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.min-vh-75 {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.avatar i {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.hero-section h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* 交互效果增强样式 */
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.back-to-top.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background: var(--secondary-color);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 移动端菜单动画 */
|
||||
.navbar-toggler {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-toggler.active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 页面过渡效果 */
|
||||
.page-entering {
|
||||
animation: pageEnter 0.3s ease-out;
|
||||
}
|
||||
|
||||
.page-leaving {
|
||||
animation: pageLeave 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes pageEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pageLeave {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* 增强悬停效果 */
|
||||
.card, .product-card, .news-card {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn, .nav-link {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 表单聚焦效果增强 */
|
||||
.form-control:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.3rem rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* 焦点可见性增强 */
|
||||
*:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 减少运动偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
316
official_website/index.html
Normal file
316
official_website/index.html
Normal file
@@ -0,0 +1,316 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="爱鉴花 - 专业的AI花卉识别平台，提供精准的花卉识别服务，包含数万种花卉知识库和智能识别技术，准确率高达95%。">
|
||||
<meta name="keywords" content="花卉识别,AI识别,植物识别,花卉知识,智能识别,爱鉴花">
|
||||
<meta name="author" content="爱鉴花团队">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="爱鉴花 - 智能花卉识别平台">
|
||||
<meta property="og:description" content="专业的AI花卉识别平台，提供精准的花卉识别服务，准确率高达95%。">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://aijianhua.com">
|
||||
<meta property="og:image" content="https://aijianhua.com/images/og-image.png">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="爱鉴花 - 智能花卉识别平台">
|
||||
<meta name="twitter:description" content="专业的AI花卉识别平台，提供精准的花卉识别服务。">
|
||||
|
||||
<title>爱鉴花 - 智能花卉识别平台</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-flower text-primary me-2"></i>
|
||||
<span class="fw-bold text-primary">爱鉴花</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="index.html">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="products.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="news.html">新闻中心</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-gradient-primary text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center min-vh-75">
|
||||
<div class="col-lg-6">
|
||||
<h1 class="display-4 fw-bold mb-4">智能花卉识别，发现自然之美</h1>
|
||||
<p class="lead mb-4">爱鉴花为您提供精准的花卉识别服务，通过AI技术快速识别各种花卉植物，让您更好地了解和欣赏自然。</p>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#features" class="btn btn-light btn-lg px-4">了解更多</a>
|
||||
<a href="contact.html" class="btn btn-outline-light btn-lg px-4">立即体验</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img src="images/hero-image.png" alt="花卉识别" class="img-fluid rounded shadow lazy-load" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 特性介绍 -->
|
||||
<section id="features" class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark mb-3">核心功能</h2>
|
||||
<p class="lead text-muted">爱鉴花为您提供全方位的花卉识别解决方案</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-camera fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">智能识别</h5>
|
||||
<p class="card-text text-muted">通过拍照或上传图片，快速识别花卉种类，准确率高达95%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-book fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">知识库</h5>
|
||||
<p class="card-text text-muted">包含数万种花卉的详细信息，包括生长习性、养护方法等</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-users fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">社区交流</h5>
|
||||
<p class="card-text text-muted">与花卉爱好者分享经验，交流养护心得，共同成长</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品展示 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container py-5">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark mb-3">热门产品</h2>
|
||||
<p class="lead text-muted">探索我们的核心产品和服务</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card product-card border-0 shadow-sm h-100">
|
||||
<img src="images/product-1.jpg" class="card-img-top lazy-load" alt="微信小程序" loading="lazy">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title fw-bold">微信小程序</h5>
|
||||
<p class="card-text text-muted">随时随地识别花卉，操作简单便捷</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-success me-2">免费使用</span>
|
||||
<span class="badge bg-info">95%准确率</span>
|
||||
</div>
|
||||
<a href="products.html" class="btn btn-primary mt-3">立即体验</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card product-card border-0 shadow-sm h-100">
|
||||
<img src="images/product-2.jpg" class="card-img-top lazy-load" alt="API服务" loading="lazy">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title fw-bold">API服务</h5>
|
||||
<p class="card-text text-muted">为开发者提供稳定可靠的识别接口</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-primary me-2">¥99/月</span>
|
||||
<span class="badge bg-warning">1000次调用</span>
|
||||
</div>
|
||||
<a href="products.html" class="btn btn-primary mt-3">查看文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card product-card border-0 shadow-sm h-100">
|
||||
<img src="images/product-3.jpg" class="card-img-top lazy-load" alt="企业版" loading="lazy">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title fw-bold">企业版</h5>
|
||||
<p class="card-text text-muted">定制化解决方案，满足专业需求</p>
|
||||
<div class="mt-3">
|
||||
<span class="badge bg-dark me-2">私有部署</span>
|
||||
<span class="badge bg-success">专属支持</span>
|
||||
</div>
|
||||
<a href="contact.html" class="btn btn-primary mt-3">咨询方案</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻动态 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark mb-3">最新动态</h2>
|
||||
<p class="lead text-muted">关注我们的最新进展和行业资讯</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<small class="text-muted">2024-01-15</small>
|
||||
<h6 class="card-title mt-2">爱鉴花小程序正式上线</h6>
|
||||
<p class="card-text text-muted">经过数月开发，我们的微信小程序正式上线，欢迎体验。</p>
|
||||
<a href="news.html" class="text-primary text-decoration-none">阅读更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<small class="text-muted">2024-01-10</small>
|
||||
<h6 class="card-title mt-2">AI识别准确率再创新高</h6>
|
||||
<p class="card-text text-muted">通过算法优化，花卉识别准确率提升至95%。</p>
|
||||
<a href="news.html" class="text-primary text-decoration-none">阅读更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<small class="text-muted">2024-01-05</small>
|
||||
<h6 class="card-title mt-2">新增1000种花卉数据</h6>
|
||||
<p class="card-text text-muted">知识库新增1000种花卉信息，覆盖更全面。</p>
|
||||
<a href="news.html" class="text-primary text-decoration-none">阅读更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a href="news.html" class="btn btn-primary">查看更多新闻</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h5 class="mb-3">爱鉴花</h5>
|
||||
<p class="text-muted">智能花卉识别平台，让您更好地了解和欣赏自然之美。</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="text-white"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">产品</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">企业版</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">支持</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">帮助中心</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">常见问题</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h6 class="mb-3">联系我们</h6>
|
||||
<p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区中关村大街</p>
|
||||
<p class="text-muted mb-1"><i class="fas fa-phone me-2"></i>400-123-4567</p>
|
||||
<p class="text-muted"><i class="fas fa-envelope me-2"></i>contact@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p class="text-muted mb-0">© 2024 爱鉴花. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<p class="text-muted mb-0">
|
||||
<a href="#" class="text-muted text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-muted text-decoration-none">京ICP备12345678号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-muted small">
|
||||
友情链接：
|
||||
<a href="#" class="text-muted text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-muted text-decoration-none">园林在线</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Schema.org结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "爱鉴花",
|
||||
"url": "https://aijianhua.com",
|
||||
"logo": "https://aijianhua.com/images/logo.png",
|
||||
"description": "专业的AI花卉识别平台，提供精准的花卉识别服务",
|
||||
"sameAs": [
|
||||
"https://weixin.qq.com/",
|
||||
"https://github.com/aijianhua"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "爱鉴花",
|
||||
"url": "https://aijianhua.com",
|
||||
"potentialAction": {
|
||||
"@type": "SearchAction",
|
||||
"target": "https://aijianhua.com/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
435
official_website/js/main.js
Normal file
435
official_website/js/main.js
Normal file
@@ -0,0 +1,435 @@
|
||||
// 主JavaScript文件 - 爱鉴花官方网站
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化函数
|
||||
initWebsite();
|
||||
});
|
||||
|
||||
function initWebsite() {
|
||||
// 初始化导航栏滚动效果
|
||||
initNavbarScroll();
|
||||
|
||||
// 初始化滚动动画
|
||||
initScrollAnimation();
|
||||
|
||||
// 初始化表单验证
|
||||
initFormValidation();
|
||||
|
||||
// 初始化计数器动画
|
||||
initCounterAnimation();
|
||||
|
||||
// 初始化图片懒加载
|
||||
initLazyLoading();
|
||||
|
||||
// 初始化移动端菜单
|
||||
initMobileMenu();
|
||||
|
||||
// 初始化平滑滚动
|
||||
initSmoothScroll();
|
||||
|
||||
// 初始化悬停动画
|
||||
initHoverEffects();
|
||||
|
||||
// 初始化加载状态
|
||||
initLoadingStates();
|
||||
|
||||
// 初始化页面过渡效果
|
||||
initPageTransitions();
|
||||
}
|
||||
|
||||
// 导航栏滚动效果
|
||||
function initNavbarScroll() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('navbar-scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('navbar-scrolled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动动画效果
|
||||
function initScrollAnimation() {
|
||||
const animatedElements = document.querySelectorAll('.card, .feature-icon');
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in-up');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
animatedElements.forEach(function(element) {
|
||||
observer.observe(element);
|
||||
});
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function initFormValidation() {
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
forms.forEach(function(form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
if (!validateForm(form)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function validateForm(form) {
|
||||
let isValid = true;
|
||||
const inputs = form.querySelectorAll('input[required], textarea[required]');
|
||||
|
||||
inputs.forEach(function(input) {
|
||||
if (!input.value.trim()) {
|
||||
showError(input, '此字段为必填项');
|
||||
isValid = false;
|
||||
} else if (input.type === 'email' && !isValidEmail(input.value)) {
|
||||
showError(input, '请输入有效的邮箱地址');
|
||||
isValid = false;
|
||||
} else {
|
||||
clearError(input);
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
function isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
function showError(input, message) {
|
||||
clearError(input);
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'invalid-feedback';
|
||||
errorDiv.textContent = message;
|
||||
|
||||
input.classList.add('is-invalid');
|
||||
input.parentNode.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
function clearError(input) {
|
||||
input.classList.remove('is-invalid');
|
||||
const errorDiv = input.parentNode.querySelector('.invalid-feedback');
|
||||
if (errorDiv) {
|
||||
errorDiv.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// 计数器动画
|
||||
function initCounterAnimation() {
|
||||
const counters = document.querySelectorAll('.counter');
|
||||
|
||||
if (counters.length > 0) {
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
animateCounters();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(counters[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function animateCounters() {
|
||||
const counters = document.querySelectorAll('.counter');
|
||||
|
||||
counters.forEach(function(counter) {
|
||||
const target = parseInt(counter.getAttribute('data-target'));
|
||||
const duration = 2000; // 2 seconds
|
||||
const frameDuration = 1000 / 60; // 60fps
|
||||
const totalFrames = Math.round(duration / frameDuration);
|
||||
let currentFrame = 0;
|
||||
|
||||
const updateCounter = function() {
|
||||
currentFrame++;
|
||||
const progress = currentFrame / totalFrames;
|
||||
const currentValue = Math.round(target * progress);
|
||||
|
||||
counter.textContent = currentValue.toLocaleString();
|
||||
|
||||
if (currentFrame < totalFrames) {
|
||||
requestAnimationFrame(updateCounter);
|
||||
} else {
|
||||
counter.textContent = target.toLocaleString();
|
||||
}
|
||||
};
|
||||
|
||||
updateCounter();
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initLazyLoading() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
const lazyImages = document.querySelectorAll('img.lazy-load');
|
||||
|
||||
const imageObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
// 确保图片完全加载后显示
|
||||
img.onload = function() {
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
// 处理data-src属性或直接使用src
|
||||
if (img.hasAttribute('data-src')) {
|
||||
img.src = img.getAttribute('data-src');
|
||||
img.removeAttribute('data-src');
|
||||
}
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '50px 0px'
|
||||
});
|
||||
|
||||
lazyImages.forEach(function(img) {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
} else {
|
||||
// 浏览器不支持IntersectionObserver时的降级方案
|
||||
const lazyImages = document.querySelectorAll('img.lazy-load');
|
||||
lazyImages.forEach(function(img) {
|
||||
img.classList.add('loaded');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端菜单处理
|
||||
function initMobileMenu() {
|
||||
const navbarToggler = document.querySelector('.navbar-toggler');
|
||||
const navbarCollapse = document.querySelector('.navbar-collapse');
|
||||
|
||||
if (navbarToggler && navbarCollapse) {
|
||||
navbarToggler.addEventListener('click', function() {
|
||||
navbarCollapse.classList.toggle('show');
|
||||
// 添加菜单动画效果
|
||||
navbarToggler.classList.toggle('active');
|
||||
});
|
||||
|
||||
// 点击菜单项后自动关闭菜单（移动端）
|
||||
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
|
||||
navLinks.forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
if (window.innerWidth < 992) {
|
||||
navbarCollapse.classList.remove('show');
|
||||
navbarToggler.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 平滑滚动效果
|
||||
function initSmoothScroll() {
|
||||
// 内部链接平滑滚动
|
||||
const internalLinks = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
internalLinks.forEach(function(link) {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const targetElement = document.getElementById(targetId);
|
||||
|
||||
if (targetElement) {
|
||||
const offsetTop = targetElement.offsetTop - 80; // 考虑导航栏高度
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 返回顶部按钮
|
||||
const backToTopBtn = document.createElement('button');
|
||||
backToTopBtn.className = 'back-to-top';
|
||||
backToTopBtn.innerHTML = '↑';
|
||||
backToTopBtn.setAttribute('aria-label', '返回顶部');
|
||||
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时显示/隐藏返回顶部按钮
|
||||
window.addEventListener('scroll', debounce(function() {
|
||||
if (window.scrollY > 500) {
|
||||
backToTopBtn.classList.add('show');
|
||||
} else {
|
||||
backToTopBtn.classList.remove('show');
|
||||
}
|
||||
}, 100));
|
||||
|
||||
document.body.appendChild(backToTopBtn);
|
||||
}
|
||||
|
||||
// 悬停动画效果
|
||||
function initHoverEffects() {
|
||||
// 卡片悬停效果
|
||||
const cards = document.querySelectorAll('.card, .product-card, .news-card');
|
||||
|
||||
cards.forEach(function(card) {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-5px) scale(1.02)';
|
||||
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
|
||||
});
|
||||
});
|
||||
|
||||
// 按钮悬停效果
|
||||
const buttons = document.querySelectorAll('.btn, .nav-link');
|
||||
|
||||
buttons.forEach(function(button) {
|
||||
button.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-2px)';
|
||||
});
|
||||
|
||||
button.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 加载状态指示器
|
||||
function initLoadingStates() {
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
forms.forEach(function(form) {
|
||||
form.addEventListener('submit', function() {
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...';
|
||||
|
||||
// 3秒后恢复按钮状态（防止无限加载）
|
||||
setTimeout(function() {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerHTML = submitBtn.getAttribute('data-original-text') || '提交';
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 保存按钮原始文本
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const submitButtons = document.querySelectorAll('button[type="submit"]');
|
||||
submitButtons.forEach(function(btn) {
|
||||
btn.setAttribute('data-original-text', btn.textContent);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 页面过渡效果
|
||||
function initPageTransitions() {
|
||||
// 链接点击时的过渡效果
|
||||
const links = document.querySelectorAll('a:not([href^="#"]):not([href^="javascript"])');
|
||||
|
||||
links.forEach(function(link) {
|
||||
link.addEventListener('click', function(e) {
|
||||
if (this.href && !this.target && !this.hasAttribute('download')) {
|
||||
e.preventDefault();
|
||||
|
||||
// 添加页面离开动画
|
||||
document.body.classList.add('page-leaving');
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.href = link.href;
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 页面进入动画
|
||||
document.body.classList.add('page-entering');
|
||||
|
||||
setTimeout(function() {
|
||||
document.body.classList.remove('page-entering');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 工具函数：防抖
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function() {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(function() {
|
||||
func.apply(context, args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 工具函数：节流
|
||||
function throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(function() {
|
||||
inThrottle = false;
|
||||
}, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 页面性能监控
|
||||
function monitorPerformance() {
|
||||
// 页面加载时间
|
||||
window.addEventListener('load', function() {
|
||||
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
|
||||
console.log('页面加载时间:', loadTime + 'ms');
|
||||
});
|
||||
|
||||
// 最大内容绘制（LCP）
|
||||
new PerformanceObserver(function(entryList) {
|
||||
const entries = entryList.getEntries();
|
||||
const lastEntry = entries[entries.length - 1];
|
||||
console.log('LCP:', lastEntry.startTime);
|
||||
}).observe({type: 'largest-contentful-paint', buffered: true});
|
||||
}
|
||||
|
||||
// 错误监控
|
||||
function monitorErrors() {
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('JavaScript错误:', e.error);
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', function(e) {
|
||||
console.error('未处理的Promise拒绝:', e.reason);
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化性能和错误监控
|
||||
monitorPerformance();
|
||||
monitorErrors();
|
||||
386
official_website/news.html
Normal file
386
official_website/news.html
Normal file
@@ -0,0 +1,386 @@
|
||||
<!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 href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-flower text-primary me-2"></i>
|
||||
<span class="fw-bold text-primary">爱鉴花</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="products.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="news.html">新闻中心</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<section class="page-header bg-gradient-primary text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1 class="display-4 fw-bold mb-3">新闻中心</h1>
|
||||
<p class="lead">关注爱鉴花的最新动态和行业资讯</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻内容 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<!-- 主内容区 -->
|
||||
<div class="col-lg-8">
|
||||
<!-- 公司动态 -->
|
||||
<div class="mb-5">
|
||||
<h2 class="fw-bold mb-4 text-dark">公司动态</h2>
|
||||
|
||||
<!-- 新闻文章1 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news-1.jpg" class="img-fluid h-100 object-fit-cover rounded-start" alt="小程序上线">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-primary me-2">公司新闻</span>
|
||||
<small class="text-muted">2024-01-15</small>
|
||||
</div>
|
||||
<h3 class="h4 card-title">爱鉴花微信小程序正式上线</h3>
|
||||
<p class="card-text text-muted">
|
||||
经过数月的精心开发和测试，爱鉴花微信小程序今日正式上线。
|
||||
用户可以通过微信搜索"爱鉴花"或扫描二维码即可体验智能花卉识别服务。
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-primary btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 新闻文章2 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news-2.jpg" class="img-fluid h-100 object-fit-cover rounded-start" alt="AI识别">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-primary me-2">技术突破</span>
|
||||
<small class="text-muted">2024-01-10</small>
|
||||
</div>
|
||||
<h3 class="h4 card-title">AI识别准确率突破95%大关</h3>
|
||||
<p class="card-text text-muted">
|
||||
通过最新的深度学习算法优化，爱鉴花的AI识别准确率成功突破95%，
|
||||
在花卉识别领域达到行业领先水平。
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-primary btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 新闻文章3 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img src="images/news-3.jpg" class="img-fluid h-100 object-fit-cover rounded-start" alt="数据更新">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-primary me-2">产品更新</span>
|
||||
<small class="text-muted">2024-01-05</small>
|
||||
</div>
|
||||
<h3 class="h4 card-title">知识库新增1000种花卉数据</h3>
|
||||
<p class="card-text text-muted">
|
||||
本次更新新增1000种花卉的详细信息，包括生长习性、养护方法、药用价值等，
|
||||
为用户提供更全面的植物知识服务。
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-primary btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- 行业资讯 -->
|
||||
<div class="mb-5">
|
||||
<h2 class="fw-bold mb-4 text-dark">行业资讯</h2>
|
||||
|
||||
<!-- 行业新闻1 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-info me-2">行业动态</span>
|
||||
<small class="text-muted">2024-01-08</small>
|
||||
</div>
|
||||
<h3 class="h5 card-title">人工智能在植物识别领域的应用前景</h3>
|
||||
<p class="card-text text-muted">
|
||||
随着深度学习技术的发展，AI在植物识别领域的应用越来越广泛。
|
||||
专家预测，未来几年该领域将迎来爆发式增长。
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-info btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 行业新闻2 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-info me-2">市场分析</span>
|
||||
<small class="text-muted">2024-01-03</small>
|
||||
</div>
|
||||
<h3 class="h5 card-title">2024年植物识别APP市场趋势分析</h3>
|
||||
<p class="card-text text-muted">
|
||||
最新市场研究报告显示，植物识别类APP用户规模持续增长，
|
||||
预计2024年全球市场规模将达到50亿美元。
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-info btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- 媒体报道 -->
|
||||
<div>
|
||||
<h2 class="fw-bold mb-4 text-dark">媒体报道</h2>
|
||||
|
||||
<!-- 媒体报道1 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-warning me-2">媒体报道</span>
|
||||
<small class="text-muted">2024-01-12</small>
|
||||
</div>
|
||||
<h3 class="h5 card-title">科技日报：爱鉴花用AI技术连接人与自然</h3>
|
||||
<p class="card-text text-muted">
|
||||
"爱鉴花团队通过先进的AI技术，让普通用户也能轻松识别植物，
|
||||
这种技术创新对普及植物知识具有重要意义。"
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-warning btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 媒体报道2 -->
|
||||
<article class="card news-article border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-warning me-2">专访</span>
|
||||
<small class="text-muted">2024-01-07</small>
|
||||
</div>
|
||||
<h3 class="h5 card-title">创业邦专访：爱鉴花创始人的AI情怀</h3>
|
||||
<p class="card-text text-muted">
|
||||
"我们希望通过技术让更多人关注和热爱自然，
|
||||
这是爱鉴花团队的初心和使命。"——创始人张明
|
||||
</p>
|
||||
<a href="news-detail.html" class="btn btn-outline-warning btn-sm">阅读全文</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">上一页</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">下一页</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div class="col-lg-4">
|
||||
<!-- 搜索框 -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">搜索新闻</h5>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="输入关键词...">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻分类 -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">新闻分类</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="text-decoration-none text-dark">公司新闻</a>
|
||||
<span class="badge bg-primary rounded-pill">12</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="text-decoration-none text-dark">技术突破</a>
|
||||
<span class="badge bg-primary rounded-pill">8</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="text-decoration-none text-dark">产品更新</a>
|
||||
<span class="badge bg-primary rounded-pill">15</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="text-decoration-none text-dark">行业动态</a>
|
||||
<span class="badge bg-primary rounded-pill">6</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="text-decoration-none text-dark">媒体报道</a>
|
||||
<span class="badge bg-primary rounded-pill">9</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门新闻 -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">热门新闻</h5>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">小程序上线首日用户破万</h6>
|
||||
<small class="text-muted">3天前</small>
|
||||
</div>
|
||||
<small class="text-muted">阅读量: 2,345</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">AI识别准确率行业领先</h6>
|
||||
<small class="text-muted">1周前</small>
|
||||
</div>
|
||||
<small class="text-muted">阅读量: 1,876</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">新增千种花卉数据</h6>
|
||||
<small class="text-muted">2周前</small>
|
||||
</div>
|
||||
<small class="text-muted">阅读量: 1,532</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订阅更新 -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title">订阅更新</h5>
|
||||
<p class="text-muted small">第一时间获取最新新闻动态</p>
|
||||
<div class="input-group mb-3">
|
||||
<input type="email" class="form-control" placeholder="您的邮箱">
|
||||
<button class="btn btn-primary" type="button">订阅</button>
|
||||
</div>
|
||||
<small class="text-muted">我们尊重您的隐私，绝不会分享您的信息</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h5 class="mb-3">爱鉴花</h5>
|
||||
<p class="text-muted">智能花卉识别平台，让您更好地了解和欣赏自然之美。</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="text-white"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">产品</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">企业版</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">支持</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">帮助中心</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">常见问题</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h6 class="mb-3">联系我们</h6>
|
||||
<p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区中关村大街</p>
|
||||
<p class="text-muted mb-1"><i class="fas fa-phone me-2"></i>400-123-4567</p>
|
||||
<p class="text-muted"><i class="fas fa-envelope me-2"></i>contact@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p class="text-muted mb-0">© 2024 爱鉴花. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<p class="text-muted mb-0">
|
||||
<a href="#" class="text-muted text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-muted text-decoration-none">京ICP备12345678号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-muted small">
|
||||
友情链接：
|
||||
<a href="#" class="text-muted text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-muted text-decoration-none">园林在线</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
537
official_website/products.html
Normal file
537
official_website/products.html
Normal file
@@ -0,0 +1,537 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="爱鉴花产品介绍 - 微信小程序、API服务和企业版解决方案，提供95%准确率的AI花卉识别服务，满足不同用户需求。">
|
||||
<meta name="keywords" content="花卉识别API,微信小程序,企业解决方案,AI识别服务,植物识别技术">
|
||||
<meta name="author" content="爱鉴花团队">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="产品介绍 - 爱鉴花">
|
||||
<meta property="og:description" content="探索爱鉴花的智能花卉识别解决方案，包括微信小程序、API服务和企业版定制方案。">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://aijianhua.com/products.html">
|
||||
<meta property="og:image" content="https://aijianhua.com/images/products-og.png">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="产品介绍 - 爱鉴花">
|
||||
<meta name="twitter:description" content="探索爱鉴花的智能花卉识别解决方案。">
|
||||
|
||||
<title>产品介绍 - 爱鉴花</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<i class="fas fa-flower text-primary me-2"></i>
|
||||
<span class="fw-bold text-primary">爱鉴花</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="products.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="news.html">新闻中心</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<section class="page-header bg-gradient-primary text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1 class="display-4 fw-bold mb-3">产品介绍</h1>
|
||||
<p class="lead">探索爱鉴花的智能花卉识别解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品概览 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">我们的产品体系</h2>
|
||||
<p class="lead text-muted">为不同用户群体提供专业的花卉识别服务</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 微信小程序 -->
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-lg-6">
|
||||
<img src="images/product-mini-program.jpg" alt="微信小程序" class="img-fluid rounded shadow lazy-load" loading="lazy">
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="fw-bold mb-3">微信小程序</h3>
|
||||
<p class="text-muted mb-4">
|
||||
随时随地识别花卉，操作简单，使用便捷。无需下载安装，
|
||||
打开微信即可使用，满足日常花卉识别需求。
|
||||
</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>拍照即时识别</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>详细的植物信息</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>养护知识指导</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>识别历史记录</li>
|
||||
</ul>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="btn btn-primary me-3">立即体验</a>
|
||||
<a href="#" class="btn btn-outline-primary">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API服务 -->
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-lg-6 order-lg-2">
|
||||
<img src="images/product-api.jpg" alt="API服务" class="img-fluid rounded shadow lazy-load" loading="lazy">
|
||||
</div>
|
||||
<div class="col-lg-6 order-lg-1">
|
||||
<h3 class="fw-bold mb-3">API服务</h3>
|
||||
<p class="text-muted mb-4">
|
||||
为开发者和企业提供稳定可靠的花卉识别API接口，
|
||||
轻松集成到您的应用中，扩展植物识别功能。
|
||||
</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>RESTful API接口</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>高并发支持</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>99.9%可用性</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>详细技术文档</li>
|
||||
</ul>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="btn btn-primary me-3">查看文档</a>
|
||||
<a href="#" class="btn btn-outline-primary">申请试用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 企业版 -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<img src="images/product-enterprise.jpg" alt="企业版" class="img-fluid rounded shadow lazy-load" loading="lazy">
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h3 class="fw-bold mb-3">企业版解决方案</h3>
|
||||
<p class="text-muted mb-4">
|
||||
为园林公司、教育机构、科研单位等提供定制化的
|
||||
花卉识别解决方案，满足专业级应用需求。
|
||||
</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>私有化部署</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>定制化模型训练</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>专业技术支持</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>批量处理功能</li>
|
||||
</ul>
|
||||
<div class="mt-4">
|
||||
<a href="contact.html" class="btn btn-primary me-3">联系我们</a>
|
||||
<a href="#" class="btn btn-outline-primary">方案详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能对比 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">功能对比</h2>
|
||||
<p class="lead text-muted">选择最适合您的产品方案</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card pricing-card border-0 shadow-sm text-center h-100">
|
||||
<div class="card-header bg-white py-4">
|
||||
<h4 class="fw-bold">微信小程序</h4>
|
||||
<div class="price">
|
||||
<span class="h2 text-primary">免费</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>基础花卉识别</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>植物信息查询</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>识别历史记录</li>
|
||||
<li class="mb-2"><i class="fas fa-times text-muted me-2"></i>批量识别</li>
|
||||
<li class="mb-2"><i class="fas fa-times text-muted me-2"></i>API访问</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-outline-primary w-100">开始使用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card pricing-card border-0 shadow-sm text-center h-100">
|
||||
<div class="card-header bg-primary text-white py-4">
|
||||
<h4 class="fw-bold">API服务</h4>
|
||||
<div class="price">
|
||||
<span class="h2">¥99</span>
|
||||
<span class="text-white-50">/月</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>1000次API调用</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>高精度识别</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>技术支持</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>批量识别</li>
|
||||
<li class="mb-2"><i class="fas fa-times text-muted me-2"></i>私有化部署</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary w-100">立即订阅</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card pricing-card border-0 shadow-sm text-center h-100">
|
||||
<div class="card-header bg-dark text-white py-4">
|
||||
<h4 class="fw-bold">企业版</h4>
|
||||
<div class="price">
|
||||
<span class="h2">定制</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>无限次调用</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>私有化部署</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>定制模型训练</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>专属技术支持</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>批量处理</li>
|
||||
</ul>
|
||||
<a href="contact.html" class="btn btn-dark w-100">咨询方案</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技术优势 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">技术优势</h2>
|
||||
<p class="lead text-muted">领先的AI技术，卓越的用户体验</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-brain fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">深度学习算法</h5>
|
||||
<p class="text-muted">
|
||||
基于深度卷积神经网络，
|
||||
实现高精度花卉识别
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-database fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">海量数据训练</h5>
|
||||
<p class="text-muted">
|
||||
超过100万张花卉图像训练，
|
||||
覆盖5000+种植物
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-bolt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">快速响应</h5>
|
||||
<p class="text-muted">
|
||||
平均识别时间小于2秒，
|
||||
提供流畅的用户体验
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-mobile-alt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">多平台支持</h5>
|
||||
<p class="text-muted">
|
||||
支持iOS、Android、Web等多平台，
|
||||
随时随地使用
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon bg-danger text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-shield-alt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">数据安全</h5>
|
||||
<p class="text-muted">
|
||||
HTTPS加密传输，
|
||||
确保用户数据安全
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="text-center">
|
||||
<div class="feature-icon bg-secondary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-sync fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">持续优化</h5>
|
||||
<p class="text-muted">
|
||||
算法持续迭代优化，
|
||||
不断提升识别准确率
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户评价 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">客户评价</h2>
|
||||
<p class="lead text-muted">听听我们的用户怎么说</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="avatar mx-auto mb-3">
|
||||
<i class="fas fa-user-circle fa-3x text-primary"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-2">张老师</h5>
|
||||
<p class="text-muted small mb-3">生物教师</p>
|
||||
<p class="text-muted">
|
||||
"爱鉴花小程序让我的生物课变得生动有趣，学生们现在对植物识别充满热情！"
|
||||
</p>
|
||||
<div class="rating text-warning">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="avatar mx-auto mb-3">
|
||||
<i class="fas fa-user-circle fa-3x text-primary"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-2">李经理</h5>
|
||||
<p class="text-muted small mb-3">园林公司</p>
|
||||
<p class="text-muted">
|
||||
"API接口非常稳定，集成到我们的园林管理系统中，大大提高了工作效率。"
|
||||
</p>
|
||||
<div class="rating text-warning">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="avatar mx-auto mb-3">
|
||||
<i class="fas fa-user-circle fa-3x text-primary"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-2">王女士</h5>
|
||||
<p class="text-muted small mb-3">花卉爱好者</p>
|
||||
<p class="text-muted">
|
||||
"识别准确率很高，养护知识也很实用，现在养花再也不用担心认错品种了！"
|
||||
</p>
|
||||
<div class="rating text-warning">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-white py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h5 class="mb-3">爱鉴花</h5>
|
||||
<p class="text-muted">智能花卉识别平台，让您更好地了解和欣赏自然之美。</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-white me-3"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="text-white"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">产品</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">企业版</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 mb-4">
|
||||
<h6 class="mb-3">支持</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-muted text-decoration-none">帮助中心</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">常见问题</a></li>
|
||||
<li><a href="#" class="text-muted text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h6 class="mb-3">联系我们</h6>
|
||||
<p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区中关村大街</p>
|
||||
<p class="text-muted mb-1"><i class="fas fa-phone me-2"></i>400-123-4567</p>
|
||||
<p class="text-muted"><i class="fas fa-envelope me-2"></i>contact@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p class="text-muted mb-0">© 2024 爱鉴花. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<p class="text-muted mb-0">
|
||||
<a href="#" class="text-muted text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-muted text-decoration-none">京ICP备12345678号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-muted small">
|
||||
友情链接：
|
||||
<a href="#" class="text-muted text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-muted text-decoration-none">园林在线</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Schema.org结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "ItemList",
|
||||
"name": "爱鉴花产品服务",
|
||||
"description": "爱鉴花提供的智能花卉识别产品和服务",
|
||||
"url": "https://aijianhua.com/products.html",
|
||||
"numberOfItems": 3,
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"item": {
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "微信小程序",
|
||||
"description": "免费的AI花卉识别微信小程序，随时随地识别植物",
|
||||
"applicationCategory": "UtilitiesApplication",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"item": {
|
||||
"@type": "Service",
|
||||
"name": "API服务",
|
||||
"description": "花卉识别API接口服务，为开发者提供技术支持",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "99",
|
||||
"priceCurrency": "CNY",
|
||||
"priceSpecification": {
|
||||
"@type": "UnitPriceSpecification",
|
||||
"price": "99",
|
||||
"priceCurrency": "CNY",
|
||||
"referenceQuantity": {
|
||||
"@type": "QuantitativeValue",
|
||||
"value": "1000",
|
||||
"unitCode": "C62"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 3,
|
||||
"item": {
|
||||
"@type": "Service",
|
||||
"name": "企业版解决方案",
|
||||
"description": "定制化的企业级花卉识别解决方案",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"priceSpecification": {
|
||||
"@type": "PriceSpecification",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY",
|
||||
"valueAddedTaxIncluded": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
18
official_website/robots.txt
Normal file
18
official_website/robots.txt
Normal file
@@ -0,0 +1,18 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
# Sitemap
|
||||
Sitemap: https://aijianhua.com/sitemap.xml
|
||||
|
||||
# Disallow admin pages and sensitive directories
|
||||
Disallow: /admin/
|
||||
Disallow: /private/
|
||||
Disallow: /config/
|
||||
|
||||
# Allow search engines to crawl all content
|
||||
Allow: /*.html
|
||||
Allow: /*.css
|
||||
Allow: /*.js
|
||||
|
||||
# Crawl delay to prevent overloading server
|
||||
Crawl-delay: 1
|
||||
33
official_website/sitemap.xml
Normal file
33
official_website/sitemap.xml
Normal file
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://aijianhua.com/index.html</loc>
|
||||
<lastmod>2024-01-20</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/about.html</loc>
|
||||
<lastmod>2024-01-20</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/products.html</loc>
|
||||
<lastmod>2024-01-20</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/news.html</loc>
|
||||
<lastmod>2024-01-20</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/contact.html</loc>
|
||||
<lastmod>2024-01-20</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
Reference in New Issue
Block a user