docs: 更新项目文档，完善需求和技术细节
This commit is contained in:
ylweng
21
website/README.md
Normal file
21
website/README.md
Normal file
@@ -0,0 +1,21 @@
|
||||
# 爱鉴花官方网站
|
||||
|
||||
## 项目介绍
|
||||
这是爱鉴花项目的官方网站，基于HTML5和Bootstrap开发。
|
||||
|
||||
## 技术栈
|
||||
- HTML5
|
||||
- CSS3
|
||||
- Bootstrap
|
||||
- JavaScript
|
||||
|
||||
## 文件结构
|
||||
- index.html: 首页
|
||||
- about.html: 关于我们页面
|
||||
- contact.html: 联系我们页面
|
||||
- css: 样式文件
|
||||
- js: JavaScript文件
|
||||
- images: 图片资源
|
||||
|
||||
## 开发说明
|
||||
这是一个静态网站项目，可以直接部署到任何Web服务器上。
|
||||
309
website/about.html
Normal file
309
website/about.html
Normal file
@@ -0,0 +1,309 @@
|
||||
<!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">爱鉴花成立于2023年，由一群热爱植物和AI技术的专家组成。</p>
|
||||
<p>我们致力于通过先进的AI技术，让植物识别变得简单有趣，帮助更多人了解和欣赏自然之美。我们的团队由资深人工智能专家、植物学家和用户体验设计师组成，共同打造了这款智能花卉识别平台。</p>
|
||||
<p>我们的使命是通过技术创新，连接人与自然，让更多人能够轻松识别和了解身边的植物世界。</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img src="images/about-company.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="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 border-0 shadow-sm h-100">
|
||||
<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-bullseye fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">使命</h5>
|
||||
<p class="card-text text-muted">通过AI技术连接人与自然，让植物识别变得简单有趣。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<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-eye 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 border-0 shadow-sm h-100">
|
||||
<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-heart fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">价值观</h5>
|
||||
<p class="card-text text-muted">创新、专业、责任、合作，致力于为用户提供最佳体验。</p>
|
||||
</div>
|
||||
</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年6月</h5>
|
||||
<p>项目启动，爱鉴花项目正式启动，组建核心团队</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2023年9月</h5>
|
||||
<p>技术验证，完成AI识别技术验证，准确率达到预期目标</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2023年12月</h5>
|
||||
<p>内测版本，发布内测版本，邀请植物专家参与测试</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h5>2024年1月</h5>
|
||||
<p>正式上线，微信小程序正式上线，面向公众开放使用</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-md-3">
|
||||
<div class="card team-card border-0 shadow-sm text-center">
|
||||
<img src="images/team-1.jpg" class="card-img-top team-img lazy-load" alt="张伟" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">张伟</h5>
|
||||
<p class="text-muted">创始人 & CEO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card team-card border-0 shadow-sm text-center">
|
||||
<img src="images/team-2.jpg" class="card-img-top team-img lazy-load" alt="李娜" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">李娜</h5>
|
||||
<p class="text-muted">AI技术总监</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card team-card border-0 shadow-sm text-center">
|
||||
<img src="images/team-3.jpg" class="card-img-top team-img lazy-load" alt="王强" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">王强</h5>
|
||||
<p class="text-muted">植物学专家</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card team-card border-0 shadow-sm text-center">
|
||||
<img src="images/team-4.jpg" class="card-img-top team-img lazy-load" alt="赵敏" loading="lazy">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">赵敏</h5>
|
||||
<p class="text-muted">用户体验总监</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>
|
||||
324
website/contact.html
Normal file
324
website/contact.html
Normal file
@@ -0,0 +1,324 @@
|
||||
<!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="联系我们 - 爱鉴花团队很乐意听取您的意见和建议，您可以通过在线表单、电话或邮件与我们取得联系。">
|
||||
<meta name="keywords" content="联系我们,在线留言,客服支持,爱鉴花团队">
|
||||
<meta name="author" content="爱鉴花团队">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="联系我们 - 爱鉴花">
|
||||
<meta property="og:description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议。">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://aijianhua.com/contact.html">
|
||||
<meta property="og:image" content="https://aijianhua.com/images/contact-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" 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 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-5">
|
||||
<h2 class="card-title text-center mb-4">发送消息</h2>
|
||||
<form id="contactForm">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
<div class="invalid-feedback">请输入有效的邮箱地址</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="phone" class="form-label">电话</label>
|
||||
<input type="tel" class="form-control" id="phone">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="subject" required>
|
||||
<div class="invalid-feedback">请输入消息主题</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="message" class="form-label">消息内容 <span class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
<div class="invalid-feedback">请输入消息内容</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="privacyPolicy" required>
|
||||
<label class="form-check-label" for="privacyPolicy">
|
||||
我同意 <a href="#" class="text-primary">隐私政策</a> 和 <a href="#" class="text-primary">服务条款</a> <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="invalid-feedback">请同意隐私政策和服务条款</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button type="submit" class="btn btn-primary btn-lg px-5">发送消息</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||||
<div class="card-body p-4">
|
||||
<div class="contact-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-map-marker-alt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">公司地址</h5>
|
||||
<p class="card-text">北京市海淀区中关村大街1号<br>海龙大厦15层</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||||
<div class="card-body p-4">
|
||||
<div class="contact-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-phone fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">联系电话</h5>
|
||||
<p class="card-text">客服热线：400-123-4567<br>工作时间：周一至周五 9:00-18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||||
<div class="card-body p-4">
|
||||
<div class="contact-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-envelope fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="card-title">电子邮箱</h5>
|
||||
<p class="card-text">商务合作：business@aijianhua.com<br>技术支持：support@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 在线地图 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="text-center display-5 fw-bold text-dark mb-5">公司位置</h2>
|
||||
<div class="ratio ratio-21x9">
|
||||
<iframe src="https://map.baidu.com/" title="公司位置地图" allowfullscreen></iframe>
|
||||
</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">
|
||||
<h2 class="display-5 fw-bold text-dark mb-4">关注我们</h2>
|
||||
<p class="lead text-muted mb-5">通过社交媒体与我们保持联系</p>
|
||||
<div class="social-contact-links">
|
||||
<a href="#" class="btn btn-primary btn-lg me-3 mb-3"><i class="fab fa-weixin me-2"></i> 微信</a>
|
||||
<a href="#" class="btn btn-info btn-lg me-3 mb-3"><i class="fab fa-weibo me-2"></i> 微博</a>
|
||||
<a href="#" class="btn btn-dark btn-lg mb-3"><i class="fab fa-github me-2"></i> GitHub</a>
|
||||
</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="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-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>
|
||||
|
||||
<script>
|
||||
// 表单验证
|
||||
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 获取表单元素
|
||||
const name = document.getElementById('name');
|
||||
const email = document.getElementById('email');
|
||||
const subject = document.getElementById('subject');
|
||||
const message = document.getElementById('message');
|
||||
const privacyPolicy = document.getElementById('privacyPolicy');
|
||||
|
||||
// 重置验证状态
|
||||
[name, email, subject, message, privacyPolicy].forEach(element => {
|
||||
element.classList.remove('is-invalid');
|
||||
});
|
||||
|
||||
let isValid = true;
|
||||
|
||||
// 验证姓名
|
||||
if (!name.value.trim()) {
|
||||
name.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 验证邮箱
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email.value)) {
|
||||
email.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 验证主题
|
||||
if (!subject.value.trim()) {
|
||||
subject.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 验证消息内容
|
||||
if (!message.value.trim()) {
|
||||
message.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 验证隐私政策
|
||||
if (!privacyPolicy.checked) {
|
||||
privacyPolicy.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 如果表单有效，显示成功消息
|
||||
if (isValid) {
|
||||
alert('感谢您的消息！我们会尽快回复您。');
|
||||
// 重置表单
|
||||
this.reset();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
526
website/css/style.css
Normal file
526
website/css/style.css
Normal file
@@ -0,0 +1,526 @@
|
||||
/* 全局样式 */
|
||||
: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);
|
||||
}
|
||||
|
||||
.news-img {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
/* 修复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%); /* 深绿色渐变 */
|
||||
}
|
||||
|
||||
/* 页面标题样式 */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
|
||||
margin-top: 76px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* 价格卡片样式 */
|
||||
.pricing-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pricing-card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.pricing-price {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 测试imonial卡片样式 */
|
||||
.testimonial-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.testimonial-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.testimonial-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* 联系卡片样式 */
|
||||
.contact-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 社交联系样式 */
|
||||
.social-contact-links a {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-contact-links a:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.min-vh-75 {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
width: fit-content;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
72
website/image-requirements.md
Normal file
72
website/image-requirements.md
Normal file
@@ -0,0 +1,72 @@
|
||||
# 爱鉴花官网图片需求说明
|
||||
|
||||
## 概述
|
||||
本文档列出了爱鉴花官方网站所有缺失的图片文件，包括图片名称、尺寸要求、内容描述和用途说明，用于AI生成图片。
|
||||
|
||||
## 图片文件列表
|
||||
|
||||
### 1. Open Graph 分享图片
|
||||
| 图片名称 | 尺寸 | 内容描述 | 用途 |
|
||||
|---------|------|---------|------|
|
||||
| `og-image.png` | 1200×630px | 爱鉴花品牌标识，包含logo、AI花卉识别主题视觉元素，清新自然的植物花卉背景 | 首页Open Graph分享图片 |
|
||||
| `about-og.png` | 1200×630px | 关于我们页面分享图片，展示团队协作场景，包含植物元素和AI技术视觉 | 关于页面Open Graph分享 |
|
||||
| `products-og.png` | 1200×630px | 产品介绍页面分享图片，展示微信小程序界面、API技术图表和产品功能视觉 | 产品页面Open Graph分享 |
|
||||
|
||||
### 2. 首页图片
|
||||
| 图片名称 | 尺寸 | 内容描述 | 用途 |
|
||||
|---------|------|---------|------|
|
||||
| `hero-image.png` | 800×600px | 现代简约的AI花卉识别应用界面展示，包含手机设备显示花卉识别结果 | 首页英雄区域背景图片 |
|
||||
| `product-1.jpg` | 400×300px | 玫瑰花特写，清晰展示花瓣细节和鲜艳色彩 | 热门产品展示区域 |
|
||||
| `product-2.jpg` | 400×300px | 向日葵特写，明亮的黄色花朵面向阳光 | 热门产品展示区域 |
|
||||
| `product-3.jpg` | 400×300px | 兰花特写，优雅的紫色或白色花朵，精致的花型 | 热门产品展示区域 |
|
||||
|
||||
### 3. 关于我们页面图片
|
||||
| 图片名称 | 尺寸 | 内容描述 | 用途 |
|
||||
|---------|------|---------|------|
|
||||
| `about-1.jpg` | 600×400px | 现代科技公司办公环境，包含植物装饰和AI技术工作场景 | 公司介绍区域配图 |
|
||||
| `team-1.jpg` | 300×300px | 亚洲男性CEO肖像，专业商务形象，背景简洁 | 团队介绍-张明CEO |
|
||||
| `team-2.jpg` | 300×300px | 亚洲女性CTO肖像，技术专家形象，背景简洁 | 团队介绍-李华CTO |
|
||||
| `team-3.jpg` | 300×300px | 亚洲男性植物学家肖像，学者形象，背景简洁 | 团队介绍-王强首席植物学家 |
|
||||
| `team-4.jpg` | 300×300px | 亚洲女性设计师肖像，创意专业形象，背景简洁 | 团队介绍-赵雪产品设计师 |
|
||||
|
||||
### 4. 产品介绍页面图片
|
||||
| 图片名称 | 尺寸 | 内容描述 | 用途 |
|
||||
|---------|------|---------|------|
|
||||
| `product-mini-program.jpg` | 600×400px | 微信小程序界面展示，包含花卉识别功能和结果页面 | 微信小程序产品介绍 |
|
||||
| `product-api.jpg` | 600×400px | API技术图表和数据流可视化，现代科技感设计 | API服务产品介绍 |
|
||||
| `product-enterprise.jpg` | 600×400px | 企业级解决方案展示，包含服务器架构和团队协作场景 | 企业版产品介绍 |
|
||||
|
||||
### 5. 新闻中心页面图片
|
||||
| 图片名称 | 尺寸 | 内容描述 | 用途 |
|
||||
|---------|------|---------|------|
|
||||
| `news-1.jpg` | 400×300px | 微信小程序上线庆祝场景，包含团队合影和产品展示 | 小程序上线新闻配图 |
|
||||
| `news-2.jpg` | 400×300px | AI技术突破可视化，包含准确率图表和深度学习模型展示 | 技术突破新闻配图 |
|
||||
| `news-3.jpg` | 400×300px | 植物数据库更新展示，包含多种花卉图片和数据界面 | 数据更新新闻配图 |
|
||||
|
||||
### 6. 品牌标识图片
|
||||
| 图片名称 | 尺寸 | 内容描述 | 用途 |
|
||||
|---------|------|---------|------|
|
||||
| `logo.png` | 200×200px | 爱鉴花品牌logo，包含花卉元素和AI技术视觉，圆形设计 | 网站favicon和品牌标识 |
|
||||
|
||||
## 图片风格要求
|
||||
- **色彩方案**: 使用植物花卉色系，主色调为绿色(#4CAF50)、紫色(#9C27B0)、粉色(#E91E63)
|
||||
- **设计风格**: 现代简约、清新自然、科技感
|
||||
- **图片格式**: PNG格式（带透明背景）或JPG格式（高质量压缩）
|
||||
- **视觉一致性**: 所有图片保持统一的色彩风格和设计语言
|
||||
|
||||
## 技术规格
|
||||
- **分辨率**: 所有图片提供2x高清版本
|
||||
- **文件大小**: 单个图片不超过500KB
|
||||
- **色彩模式**: RGB
|
||||
- **版权**: 所有图片需为原创或拥有合法使用权
|
||||
|
||||
## 优先级
|
||||
1. **高优先级**: `og-image.png`, `hero-image.png`, `logo.png`（品牌标识和关键页面）
|
||||
2. **中优先级**: 产品图片和团队肖像（核心内容展示）
|
||||
3. **低优先级**: 新闻配图和其他辅助图片
|
||||
|
||||
## 备注
|
||||
- 所有人物肖像需使用模特授权图片或AI生成的可商用肖像
|
||||
- 产品界面图片需体现现代科技感和用户体验
|
||||
- 植物花卉图片需真实准确，符合植物学特征
|
||||
- 团队形象图片需专业、友好、多样化
|
||||
303
website/index.html
Normal file
303
website/index.html
Normal file
@@ -0,0 +1,303 @@
|
||||
<!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="products.html" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="products.html" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="products.html" 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="contact.html" 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
513
website/js/main.js
Normal file
513
website/js/main.js
Normal file
@@ -0,0 +1,513 @@
|
||||
// 主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();
|
||||
|
||||
// 通用JavaScript功能
|
||||
|
||||
// 导航栏滚动效果
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
// 懒加载图片
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy-load'));
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
let lazyImage = entry.target;
|
||||
lazyImage.src = lazyImage.dataset.src || lazyImage.src;
|
||||
lazyImage.classList.remove('lazy-load');
|
||||
lazyImageObserver.unobserve(lazyImage);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
lazyImages.forEach(function(lazyImage) {
|
||||
lazyImageObserver.observe(lazyImage);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
window.scrollTo({
|
||||
top: target.offsetTop - 76,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 表单验证增强
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
// 获取所有表单并阻止默认提交行为
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
|
||||
// 动态年份更新
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const yearElements = document.querySelectorAll('.current-year');
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
yearElements.forEach(element => {
|
||||
element.textContent = currentYear;
|
||||
});
|
||||
});
|
||||
281
website/news.html
Normal file
281
website/news.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!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="获取最新的公司动态、行业资讯和媒体报道。">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://aijianhua.com/news.html">
|
||||
<meta property="og:image" content="https://aijianhua.com/images/news-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" 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 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-pills justify-content-center">
|
||||
<li class="nav-item mx-2 mb-2">
|
||||
<a class="nav-link active" href="#">全部</a>
|
||||
</li>
|
||||
<li class="nav-item mx-2 mb-2">
|
||||
<a class="nav-link" href="#">公司动态</a>
|
||||
</li>
|
||||
<li class="nav-item mx-2 mb-2">
|
||||
<a class="nav-link" href="#">行业资讯</a>
|
||||
</li>
|
||||
<li class="nav-item mx-2 mb-2">
|
||||
<a class="nav-link" href="#">媒体报道</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻列表 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-3">
|
||||
<div class="row g-4">
|
||||
<!-- 新闻项 1 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm h-100">
|
||||
<img src="images/news-1.jpg" class="card-img-top news-img lazy-load" alt="爱鉴花小程序正式上线" loading="lazy">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-primary me-2">公司动态</span>
|
||||
<span class="text-muted small">2024-01-15</span>
|
||||
</div>
|
||||
<h5 class="card-title">爱鉴花小程序正式上线</h5>
|
||||
<p class="card-text text-muted flex-grow-1">经过数月开发，我们的微信小程序正式上线，欢迎体验。用户可以通过拍照或上传图片快速识别花卉种类。</p>
|
||||
<a href="#" class="btn btn-outline-primary mt-auto">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻项 2 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm h-100">
|
||||
<img src="images/news-2.jpg" class="card-img-top news-img lazy-load" alt="AI识别准确率再创新高" loading="lazy">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-success me-2">技术突破</span>
|
||||
<span class="text-muted small">2024-01-10</span>
|
||||
</div>
|
||||
<h5 class="card-title">AI识别准确率再创新高</h5>
|
||||
<p class="card-text text-muted flex-grow-1">通过算法优化，花卉识别准确率提升至95%，在多项测试中表现优异。</p>
|
||||
<a href="#" class="btn btn-outline-primary mt-auto">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻项 3 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm h-100">
|
||||
<img src="images/news-3.jpg" class="card-img-top news-img lazy-load" alt="新增1000种花卉数据" loading="lazy">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-info me-2">产品更新</span>
|
||||
<span class="text-muted small">2024-01-05</span>
|
||||
</div>
|
||||
<h5 class="card-title">新增1000种花卉数据</h5>
|
||||
<p class="card-text text-muted flex-grow-1">知识库新增1000种花卉信息，覆盖更全面，为用户提供更丰富的植物知识。</p>
|
||||
<a href="#" class="btn btn-outline-primary mt-auto">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻项 4 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm h-100">
|
||||
<img src="images/news-4.jpg" class="card-img-top news-img lazy-load" alt="荣获年度创新产品奖" loading="lazy">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-warning me-2">荣誉奖项</span>
|
||||
<span class="text-muted small">2023-12-20</span>
|
||||
</div>
|
||||
<h5 class="card-title">荣获年度创新产品奖</h5>
|
||||
<p class="card-text text-muted flex-grow-1">爱鉴花在2023年度科技创新产品评选中荣获"年度创新产品奖"，这是对我们技术实力的认可。</p>
|
||||
<a href="#" class="btn btn-outline-primary mt-auto">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻项 5 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm h-100">
|
||||
<img src="images/news-5.jpg" class="card-img-top news-img lazy-load" alt="与植物研究所达成合作" loading="lazy">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-danger me-2">合作伙伴</span>
|
||||
<span class="text-muted small">2023-12-10</span>
|
||||
</div>
|
||||
<h5 class="card-title">与植物研究所达成合作</h5>
|
||||
<p class="card-text text-muted flex-grow-1">我们与国家植物研究所达成战略合作，将进一步提升AI识别的准确性和知识库的权威性。</p>
|
||||
<a href="#" class="btn btn-outline-primary mt-auto">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻项 6 -->
|
||||
<div class="col-md-4">
|
||||
<div class="card news-card border-0 shadow-sm h-100">
|
||||
<img src="images/news-6.jpg" class="card-img-top news-img lazy-load" alt="用户突破10万大关" loading="lazy">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-secondary me-2">里程碑</span>
|
||||
<span class="text-muted small">2023-11-28</span>
|
||||
</div>
|
||||
<h5 class="card-title">用户突破10万大关</h5>
|
||||
<p class="card-text text-muted flex-grow-1">自上线以来，爱鉴花用户数量突破10万，感谢广大用户的信任与支持。</p>
|
||||
<a href="#" class="btn btn-outline-primary mt-auto">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<nav aria-label="新闻分页">
|
||||
<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>
|
||||
</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="products.html" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="products.html" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="products.html" 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="contact.html" 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>
|
||||
444
website/products.html
Normal file
444
website/products.html
Normal file
@@ -0,0 +1,444 @@
|
||||
<!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="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-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title">AI智能识别</h5>
|
||||
<p class="card-text">通过深度学习技术，我们的AI模型可以准确识别超过10000种花卉植物，识别准确率高达95%。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 支持拍照和图片上传识别</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 实时识别反馈</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 支持多种图片格式</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title">丰富知识库</h5>
|
||||
<p class="card-text">包含详尽的植物信息数据库，提供每种花卉的科学分类、生长习性、养护方法等详细信息。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 超过10000种植物信息</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 专业植物学描述</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 定期更新数据库</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title">社区交流</h5>
|
||||
<p class="card-text">与花卉爱好者分享经验，交流养护心得，共同成长，建立一个热爱植物的社区。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 用户分享平台</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 专家在线答疑</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 植物养护讨论</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title">个性化服务</h5>
|
||||
<p class="card-text">根据用户识别历史和兴趣偏好，提供个性化的内容推荐和养护建议。</p>
|
||||
<ul class="list-unstyled mt-3">
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 个性化内容推荐</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 植物养护提醒</li>
|
||||
<li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> 收藏和关注功能</li>
|
||||
</ul>
|
||||
</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="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>功能特性</th>
|
||||
<th>微信小程序</th>
|
||||
<th>API服务</th>
|
||||
<th>企业版</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>基础识别功能</td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>知识库查询</td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>识别准确率</td>
|
||||
<td>95%</td>
|
||||
<td>95%</td>
|
||||
<td>98%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>月识别次数</td>
|
||||
<td>100次</td>
|
||||
<td>1000次</td>
|
||||
<td>无限制</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>批量识别</td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>私有部署</td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>定制识别模型</td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>专属技术支持</td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-times text-danger"></i></td>
|
||||
<td><i class="fas fa-check text-success"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>价格</td>
|
||||
<td>免费</td>
|
||||
<td>¥99/月</td>
|
||||
<td>定制报价</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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 testimonial-card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="testimonial-rating mb-3">
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
</div>
|
||||
<p class="card-text">"作为一个园艺爱好者，爱鉴花小程序帮助我快速识别了很多以前不认识的花卉，准确率真的很高！"</p>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<div class="testimonial-avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3">
|
||||
<span>张</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0">张女士</h6>
|
||||
<small class="text-muted">园艺爱好者</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card testimonial-card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="testimonial-rating mb-3">
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
</div>
|
||||
<p class="card-text">"我们植物研究所使用爱鉴花企业版进行批量植物识别，大大提高了我们的工作效率，非常满意！"</p>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<div class="testimonial-avatar bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3">
|
||||
<span>李</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0">李先生</h6>
|
||||
<small class="text-muted">植物研究所研究员</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card testimonial-card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="testimonial-rating mb-3">
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star text-warning"></i>
|
||||
<i class="fas fa-star-half-alt text-warning"></i>
|
||||
</div>
|
||||
<p class="card-text">"我们的花卉电商平台集成了爱鉴花API服务，为用户提供了植物识别功能，显著提升了用户体验。"</p>
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<div class="testimonial-avatar bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3">
|
||||
<span>王</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0">王先生</h6>
|
||||
<small class="text-muted">电商平台产品经理</small>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="card pricing-card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-primary text-white text-center py-4">
|
||||
<h4 class="mb-0">微信小程序</h4>
|
||||
<div class="pricing-price mt-3">
|
||||
<span class="display-6">免费</span>
|
||||
</div>
|
||||
<p class="mb-0">适合个人用户</p>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 基础识别功能</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 知识库查询</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 社区交流</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 每月100次识别</li>
|
||||
<li class="mb-3 text-muted"><i class="fas fa-times-circle me-2"></i> 批量识别</li>
|
||||
<li class="mb-3 text-muted"><i class="fas fa-times-circle me-2"></i> 专属支持</li>
|
||||
</ul>
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="btn btn-outline-primary">立即使用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card pricing-card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-success text-white text-center py-4">
|
||||
<h4 class="mb-0">API服务</h4>
|
||||
<div class="pricing-price mt-3">
|
||||
<span class="display-6">¥99</span>
|
||||
<span class="text-muted">/月</span>
|
||||
</div>
|
||||
<p class="mb-0">适合开发者和企业</p>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 基础识别功能</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 知识库查询</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 每月1000次识别</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 批量识别</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> API文档和技术支持</li>
|
||||
<li class="mb-3 text-muted"><i class="fas fa-times-circle me-2"></i> 私有部署</li>
|
||||
</ul>
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="btn btn-success">立即购买</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card pricing-card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-dark text-white text-center py-4">
|
||||
<h4 class="mb-0">企业版</h4>
|
||||
<div class="pricing-price mt-3">
|
||||
<span class="display-6">定制</span>
|
||||
</div>
|
||||
<p class="mb-0">适合大型企业和机构</p>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 基础识别功能</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 知识库查询</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 无限制识别次数</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 批量识别</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 私有部署</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 定制识别模型</li>
|
||||
<li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> 专属技术支持</li>
|
||||
</ul>
|
||||
<div class="text-center mt-4">
|
||||
<a href="contact.html" class="btn btn-dark">联系我们</a>
|
||||
</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="products.html" class="text-muted text-decoration-none">微信小程序</a></li>
|
||||
<li><a href="products.html" class="text-muted text-decoration-none">API服务</a></li>
|
||||
<li><a href="products.html" 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="contact.html" 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>
|
||||
18
website/robots.txt
Normal file
18
website/robots.txt
Normal file
@@ -0,0 +1,18 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
# Sitemap location
|
||||
Sitemap: https://aijianhua.com/sitemap.xml
|
||||
|
||||
# Block access to sensitive directories
|
||||
Disallow: /admin/
|
||||
Disallow: /private/
|
||||
Disallow: /config/
|
||||
|
||||
# Allow crawlers to access all HTML, CSS, and JS files
|
||||
Allow: /*.html$
|
||||
Allow: /*.css$
|
||||
Allow: /*.js$
|
||||
|
||||
# Prevent server overloading with crawl delay
|
||||
Crawl-delay: 1
|
||||
39
website/sitemap.xml
Normal file
39
website/sitemap.xml
Normal file
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://aijianhua.com/</loc>
|
||||
<lastmod>2024-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/index.html</loc>
|
||||
<lastmod>2024-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/about.html</loc>
|
||||
<lastmod>2024-01-15</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/products.html</loc>
|
||||
<lastmod>2024-01-15</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/news.html</loc>
|
||||
<lastmod>2024-01-15</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://aijianhua.com/contact.html</loc>
|
||||
<lastmod>2024-01-15</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
28
website/功能模块.md
Normal file
28
website/功能模块.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# 爱鉴花官方网站功能模块
|
||||
|
||||
## 1. 首页
|
||||
- 公司介绍
|
||||
- 产品展示
|
||||
- 新闻动态
|
||||
- 联系方式
|
||||
|
||||
## 2. 关于我们
|
||||
- 公司简介
|
||||
- 企业文化
|
||||
- 发展历程
|
||||
- 团队介绍
|
||||
|
||||
## 3. 产品介绍
|
||||
- 产品功能介绍
|
||||
- 使用案例
|
||||
- 用户评价
|
||||
|
||||
## 4. 新闻中心
|
||||
- 行业资讯
|
||||
- 公司动态
|
||||
- 媒体报道
|
||||
|
||||
## 5. 联系我们
|
||||
- 联系方式
|
||||
- 在线留言
|
||||
- 地图位置
|
||||
32
website/开发计划.md
Normal file
32
website/开发计划.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# 爱鉴花官方网站开发计划
|
||||
|
||||
## 第一阶段：页面设计和框架搭建（1-2周）
|
||||
- 页面设计稿确认
|
||||
- HTML结构搭建
|
||||
- CSS样式开发
|
||||
- 响应式设计
|
||||
|
||||
## 第二阶段：内容开发（3-4周）
|
||||
- 首页内容开发
|
||||
- 关于我们页面开发
|
||||
- 产品介绍页面开发
|
||||
|
||||
## 第三阶段：新闻中心和联系页面开发（5-6周）
|
||||
- 新闻中心页面开发
|
||||
- 联系我们页面开发
|
||||
- 表单功能开发
|
||||
|
||||
## 第四阶段：SEO优化和性能优化（7-8周）
|
||||
- SEO优化
|
||||
- 页面加载性能优化
|
||||
- 移动端适配优化
|
||||
|
||||
## 第五阶段：测试和上线（9-10周）
|
||||
- 兼容性测试
|
||||
- 功能测试
|
||||
- 部署上线
|
||||
|
||||
## 第六阶段：维护和更新（11-16周）
|
||||
- 内容更新
|
||||
- 安全维护
|
||||
- 持续优化
|
||||
Reference in New Issue
Block a user