添加 IntelliJ IDEA 项目配置文件
This commit is contained in:
ylweng
606
website/about.html
Normal file
606
website/about.html
Normal file
@@ -0,0 +1,606 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>关于我们 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="了解活牛采购智能数字化系统的公司背景、团队实力、发展历程和企业文化，我们致力于为养殖行业提供专业的数字化采购解决方案。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.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="news.html">新闻动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main>
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-dark text-white py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">关于我们</h1>
|
||||
<p class="lead mb-4">致力于用科技赋能传统养殖行业，打造智能化的活牛采购数字化平台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 公司介绍 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<h2 class="fw-bold text-dark mb-4">公司简介</h2>
|
||||
<p class="text-muted mb-4">
|
||||
活牛采购智能数字化系统成立于2018年，是一家专注于为养殖行业提供数字化采购解决方案的科技公司。
|
||||
我们深耕畜牧行业多年，深刻理解传统采购模式的痛点和挑战。
|
||||
</p>
|
||||
<p class="text-muted mb-4">
|
||||
通过结合物联网、大数据分析和人工智能技术，我们开发了一套完整的活牛采购数字化管理系统，
|
||||
帮助养殖企业实现采购流程的标准化、透明化和智能化。
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
|
||||
<i class="fas fa-users fs-4 text-primary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 fw-bold text-dark mb-0">200+</div>
|
||||
<small class="text-muted">企业客户</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
|
||||
<i class="fas fa-cow fs-4 text-success"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 fw-bold text-dark mb-0">50,000+</div>
|
||||
<small class="text-muted">年交易牛只</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
|
||||
<i class="fas fa-map-marker-alt fs-4 text-warning"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 fw-bold text-dark mb-0">15+</div>
|
||||
<small class="text-muted">省份覆盖</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-info bg-opacity-10 p-3 rounded-circle me-3 feature-icon">
|
||||
<i class="fas fa-award fs-4 text-info"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="h4 fw-bold text-dark mb-0">10+</div>
|
||||
<small class="text-muted">行业专利</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="placeholder-image bg-primary bg-opacity-10 rounded-3 p-5 text-center">
|
||||
<i class="fas fa-building fs-1 text-primary mb-3"></i>
|
||||
<h5 class="text-dark">公司总部</h5>
|
||||
<p class="text-muted mb-0">北京市朝阳区科技园区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 使命愿景 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4" data-aos="fade-up">
|
||||
<div class="text-center p-4">
|
||||
<div class="bg-primary bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
|
||||
<i class="fas fa-bullseye fs-2 text-primary"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-3">我们的使命</h4>
|
||||
<p class="text-muted">
|
||||
通过数字化技术推动传统养殖行业转型升级，
|
||||
让每一头牛的采购都更加智能、高效、透明。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="text-center p-4">
|
||||
<div class="bg-success bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
|
||||
<i class="fas fa-eye fs-2 text-success"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-3">我们的愿景</h4>
|
||||
<p class="text-muted">
|
||||
成为全球领先的畜牧行业数字化解决方案提供商，
|
||||
构建智慧养殖新生态。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="text-center p-4">
|
||||
<div class="bg-warning bg-opacity-10 p-4 rounded-circle d-inline-block mb-3 feature-icon">
|
||||
<i class="fas fa-handshake fs-2 text-warning"></i>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-3">我们的价值观</h4>
|
||||
<p class="text-muted">
|
||||
客户至上、技术创新、诚信务实、合作共赢，
|
||||
为行业发展创造持续价值。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 团队介绍 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="fw-bold text-dark mb-3">核心团队</h2>
|
||||
<p class="text-muted">汇聚行业专家和技术精英，为您提供专业服务</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- 团队成员1 -->
|
||||
<div class="col-lg-3 col-md-6" data-aos="fade-up">
|
||||
<div class="card border-0 shadow-sm h-100 text-center team-card">
|
||||
<div class="team-avatar mx-auto mt-4">
|
||||
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
|
||||
<i class="fas fa-user-tie fs-1 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-1">张明</h5>
|
||||
<span class="text-primary small mb-2 d-block">创始人 & CEO</span>
|
||||
<p class="text-muted small">
|
||||
15年畜牧行业经验，前某大型养殖集团采购总监，
|
||||
深刻理解行业痛点。
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 团队成员2 -->
|
||||
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="card border-0 shadow-sm h-100 text-center team-card">
|
||||
<div class="team-avatar mx-auto mt-4">
|
||||
<div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
|
||||
<i class="fas fa-laptop-code fs-1 text-success"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-1">李华</h5>
|
||||
<span class="text-success small mb-2 d-block">CTO</span>
|
||||
<p class="text-muted small">
|
||||
前BAT技术专家，10年大数据和AI研发经验，
|
||||
主导系统架构设计。
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-muted me-2"><i class="fab fa-github"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 团队成员3 -->
|
||||
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="card border-0 shadow-sm h-100 text-center team-card">
|
||||
<div class="team-avatar mx-auto mt-4">
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
|
||||
<i class="fas fa-chart-line fs-1 text-warning"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-1">王芳</h5>
|
||||
<span class="text-warning small mb-2 d-block">运营总监</span>
|
||||
<p class="text-muted small">
|
||||
8年互联网运营经验，擅长用户增长和客户成功，
|
||||
负责整体运营策略。
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-muted me-2"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 团队成员4 -->
|
||||
<div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="card border-0 shadow-sm h-100 text-center team-card">
|
||||
<div class="team-avatar mx-auto mt-4">
|
||||
<div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 120px; height: 120px;">
|
||||
<i class="fas fa-graduation-cap fs-1 text-info"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-1">陈教授</h5>
|
||||
<span class="text-info small mb-2 d-block">首席科学家</span>
|
||||
<p class="text-muted small">
|
||||
农业大学生物科技教授，畜牧专家，
|
||||
负责技术研发和标准制定。
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="#" class="text-muted me-2"><i class="fas fa-book"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 text-center">
|
||||
<a href="#" class="btn btn-outline-primary">查看完整团队</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="fw-bold text-dark mb-3">发展历程</h2>
|
||||
<p class="text-muted">从初创到行业领先的成长轨迹</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="timeline">
|
||||
<!-- 时间线项目1 -->
|
||||
<div class="timeline-item" data-aos="fade-right">
|
||||
<div class="timeline-date">2018.06</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">公司成立</h5>
|
||||
<p class="text-muted mb-0">在北京正式注册成立，开始产品研发</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间线项目2 -->
|
||||
<div class="timeline-item" data-aos="fade-left">
|
||||
<div class="timeline-date">2019.03</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">首版发布</h5>
|
||||
<p class="text-muted mb-0">推出第一代活牛采购管理系统</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间线项目3 -->
|
||||
<div class="timeline-item" data-aos="fade-right">
|
||||
<div class="timeline-date">2020.01</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">A轮融资</h5>
|
||||
<p class="text-muted mb-0">获得千万级A轮融资，加速市场扩张</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间线项目4 -->
|
||||
<div class="timeline-item" data-aos="fade-left">
|
||||
<div class="timeline-date">2021.08</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">用户突破</h5>
|
||||
<p class="text-muted mb-0">服务客户超过100家，年交易牛只破万</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间线项目5 -->
|
||||
<div class="timeline-item" data-aos="fade-right">
|
||||
<div class="timeline-date">2022.12</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">技术升级</h5>
|
||||
<p class="text-muted mb-0">发布AI智能评估系统，获得多项专利</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间线项目6 -->
|
||||
<div class="timeline-item" data-aos="fade-left">
|
||||
<div class="timeline-date">2023.06</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">全国布局</h5>
|
||||
<p class="text-muted mb-0">业务覆盖全国15个省份，成为行业标杆</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时间线项目7 -->
|
||||
<div class="timeline-item" data-aos="fade-right">
|
||||
<div class="timeline-date">2024.01</div>
|
||||
<div class="timeline-content">
|
||||
<h5 class="fw-bold text-dark">生态构建</h5>
|
||||
<p class="text-muted mb-0">启动智慧养殖生态平台建设</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 合作伙伴 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="fw-bold text-dark mb-3">合作伙伴</h2>
|
||||
<p class="text-muted">与行业领先企业共同推动养殖数字化发展</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up">
|
||||
<div class="partner-logo bg-light rounded-3 p-4 text-center">
|
||||
<i class="fas fa-university fs-2 text-muted"></i>
|
||||
<p class="small text-muted mb-0 mt-2">农业大学</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="partner-logo bg-light rounded-3 p-4 text-center">
|
||||
<i class="fas fa-hospital fs-2 text-muted"></i>
|
||||
<p class="small text-muted mb-0 mt-2">兽医研究所</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="partner-logo bg-light rounded-3 p-4 text-center">
|
||||
<i class="fas fa-industry fs-2 text-muted"></i>
|
||||
<p class="small text-muted mb-0 mt-2">牧业集团</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="partner-logo bg-light rounded-3 p-4 text-center">
|
||||
<i class="fas fa-truck fs-2 text-muted"></i>
|
||||
<p class="small text-muted mb-0 mt-2">物流公司</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="partner-logo bg-light rounded-3 p-4 text-center">
|
||||
<i class="fas fa-money-bill-wave fs-2 text-muted"></i>
|
||||
<p class="small text-muted mb-0 mt-2">金融机构</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4" data-aos="fade-up" data-aos-delay="500">
|
||||
<div class="partner-logo bg-light rounded-3 p-4 text-center">
|
||||
<i class="fas fa-cloud fs-2 text-muted"></i>
|
||||
<p class="small text-muted mb-0 mt-2">云服务商</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA区域 -->
|
||||
<section class="py-5 bg-primary text-white">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h3 class="fw-bold mb-3">加入我们，共创未来</h3>
|
||||
<p class="mb-4">我们正在寻找志同道合的伙伴，一起用科技改变传统养殖行业</p>
|
||||
</div>
|
||||
<div class="col-lg-4 text-lg-end">
|
||||
<a href="contact.html" class="btn btn-light btn-lg px-4">加入团队</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="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-light">
|
||||
专业的数字化采购管理解决方案，
|
||||
为养殖企业提供全流程的采购数字化服务。
|
||||
</p>
|
||||
</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="product.html" class="text-light text-decoration-none">产品介绍</a></li>
|
||||
<li><a href="solutions.html" class="text-light text-decoration-none">解决方案</a></li>
|
||||
<li><a href="#" class="text-light 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="cases.html" class="text-light text-decoration-none">客户案例</a></li>
|
||||
<li><a href="news.html" class="text-light text-decoration-none">新闻动态</a></li>
|
||||
<li><a href="#" class="text-light 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-light text-decoration-none">关于我们</a></li>
|
||||
<li><a href="contact.html" class="text-light text-decoration-none">联系我们</a></li>
|
||||
<li><a href="#" class="text-light text-decoration-none">加入我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">联系信息</h6>
|
||||
<div class="text-light">
|
||||
<p class="mb-1"><i class="fas fa-phone me-2"></i> 15927219038(周经理)</p>
|
||||
<p class="mb-1"><i class="fas fa-envelope me-2"></i> service@aiotagro.com</p>
|
||||
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 武汉光谷软件园F2栋</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-light mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<div class="d-flex justify-content-md-end">
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.team-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 1.5rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--bs-primary);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -3rem;
|
||||
top: 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: var(--bs-primary);
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 0 3px var(--bs-primary);
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
position: absolute;
|
||||
left: -8rem;
|
||||
top: 0;
|
||||
width: 6rem;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.partner-logo {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.partner-logo:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
.placeholder-image {
|
||||
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
503
website/cases.html
Normal file
503
website/cases.html
Normal file
@@ -0,0 +1,503 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>客户案例 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="活牛采购智能数字化系统成功案例展示，真实客户评价和使用效果验证，为您选择数字化采购解决方案提供参考。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="cases.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="news.html">新闻动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main>
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-dark text-white py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">客户成功案例</h1>
|
||||
<p class="lead mb-4">见证我们如何帮助客户实现采购数字化转型升级，提升业务效率和盈利能力</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 案例筛选 -->
|
||||
<section class="py-4 bg-white">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-wrap justify-content-center gap-2">
|
||||
<button class="btn btn-outline-primary active" data-filter="all">全部案例</button>
|
||||
<button class="btn btn-outline-primary" data-filter="large">大型企业</button>
|
||||
<button class="btn btn-outline-primary" data-filter="medium">中型企业</button>
|
||||
<button class="btn btn-outline-primary" data-filter="small">小型企业</button>
|
||||
<button class="btn btn-outline-primary" data-filter="beef">肉牛养殖</button>
|
||||
<button class="btn btn-outline-primary" data-filter="dairy">奶牛牧场</button>
|
||||
<button class="btn btn-outline-primary" data-filter="trade">贸易服务</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 案例展示 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row g-4" id="cases-container">
|
||||
<!-- 案例1 -->
|
||||
<div class="col-lg-4 col-md-6 case-item" data-category="large beef" data-aos="fade-up">
|
||||
<div class="card h-100 border-0 shadow-sm case-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center feature-icon" style="height: 200px;">
|
||||
<i class="fas fa-building fs-1 text-primary"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 end-0 m-3 badge bg-primary">大型企业</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-2">内蒙古草原牧业集团</h5>
|
||||
<span class="badge bg-light text-dark mb-3">肉牛养殖 · 年采购5000+头</span>
|
||||
<p class="text-muted mb-3">通过系统实现采购流程标准化，采购效率提升40%，成本降低15%</p>
|
||||
|
||||
<div class="case-stats mb-3">
|
||||
<div class="d-flex justify-content-between small text-muted">
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +40%</span>
|
||||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -15%</span>
|
||||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.2倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||||
<p class="mb-0 small text-muted">"系统帮助我们实现了采购全流程数字化，现在我们可以实时追踪每头牛的状态，大大提升了管理效率。"</p>
|
||||
<div class="d-flex align-items-center mt-2">
|
||||
<div class="avatar-placeholder bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center feature-icon" style="width: 30px; height: 30px;">
|
||||
<i class="fas fa-user text-primary fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="small fw-bold">张总</span>
|
||||
<span class="small d-block text-muted">采购总监</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例2 -->
|
||||
<div class="col-lg-4 col-md-6 case-item" data-category="medium dairy" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="card h-100 border-0 shadow-sm case-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-tractor fs-1 text-success"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 end-0 m-3 badge bg-success">中型企业</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-2">河北优牧乳业</h5>
|
||||
<span class="badge bg-light text-dark mb-3">奶牛牧场 · 年采购2000头</span>
|
||||
<p class="text-muted mb-3">数字化管理育种牛只采购，奶牛品质提升20%，产奶量增加15%</p>
|
||||
|
||||
<div class="case-stats mb-3">
|
||||
<div class="d-flex justify-content-between small text-muted">
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 品质 +20%</span>
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 产量 +15%</span>
|
||||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.8倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||||
<p class="mb-0 small text-muted">"系统的数据分析功能帮助我们筛选出最优质的育种牛只，现在我们的奶牛品质和产奶量都有了显著提升。"</p>
|
||||
<div class="d-flex align-items-center mt-2">
|
||||
<div class="avatar-placeholder bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||||
<i class="fas fa-user text-success fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="small fw-bold">李经理</span>
|
||||
<span class="small d-block text-muted">牧场负责人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例3 -->
|
||||
<div class="col-lg-4 col-md-6 case-item" data-category="small trade" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="card h-100 border-0 shadow-sm case-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-handshake fs-1 text-warning"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 end-0 m-3 badge bg-warning">小型企业</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-2">山东牛贸中介服务</h5>
|
||||
<span class="badge bg-light text-dark mb-3">贸易服务 · 年交易3000头</span>
|
||||
<p class="text-muted mb-3">通过平台实现买卖双方高效匹配，交易成功率提升50%，佣金收入翻倍</p>
|
||||
|
||||
<div class="case-stats mb-3">
|
||||
<div class="d-flex justify-content-between small text-muted">
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 成功率 +50%</span>
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 收入 +100%</span>
|
||||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.1倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||||
<p class="mb-0 small text-muted">"这个系统彻底改变了我们的业务模式，现在我们可以同时处理多个交易，客户满意度大幅提升。"</p>
|
||||
<div class="d-flex align-items-center mt-2">
|
||||
<div class="avatar-placeholder bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||||
<i class="fas fa-user text-warning fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="small fw-bold">王总</span>
|
||||
<span class="small d-block text-muted">创始人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例4 -->
|
||||
<div class="col-lg-4 col-md-6 case-item" data-category="medium beef" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="card h-100 border-0 shadow-sm case-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-industry fs-1 text-info"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 end-0 m-3 badge bg-info">中型企业</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-2">河南美味肉制品</h5>
|
||||
<span class="badge bg-light text-dark mb-3">肉牛加工 · 年采购1500头</span>
|
||||
<p class="text-muted mb-3">实现从采购到加工的全程追溯，产品质量提升30%，客户投诉减少80%</p>
|
||||
|
||||
<div class="case-stats mb-3">
|
||||
<div class="d-flex justify-content-between small text-muted">
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 质量 +30%</span>
|
||||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 投诉 -80%</span>
|
||||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 3.5倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||||
<p class="mb-0 small text-muted">"追溯系统让我们的产品质量有了保障，现在客户可以扫描二维码了解每块肉的来源，信任度大大提升。"</p>
|
||||
<div class="d-flex align-items-center mt-2">
|
||||
<div class="avatar-placeholder bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||||
<i class="fas fa-user text-info fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="small fw-bold">赵厂长</span>
|
||||
<span class="small d-block text-muted">生产总监</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例5 -->
|
||||
<div class="col-lg-4 col-md-6 case-item" data-category="large dairy" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="card h-100 border-0 shadow-sm case-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-seedling fs-1 text-purple"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 end-0 m-3 badge bg-purple">大型企业</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-2">宁夏现代牧业</h5>
|
||||
<span class="badge bg-light text-dark mb-3">综合养殖 · 年采购8000头</span>
|
||||
<p class="text-muted mb-3">多牧场统一管理平台，运营成本降低25%，管理效率提升60%</p>
|
||||
|
||||
<div class="case-stats mb-3">
|
||||
<div class="d-flex justify-content-between small text-muted">
|
||||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -25%</span>
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 效率 +60%</span>
|
||||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 4.3倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||||
<p class="mb-0 small text-muted">"系统帮助我们实现了多个牧场的统一管理，现在我们可以实时掌握各牧场的运营状况，决策更加科学。"</p>
|
||||
<div class="d-flex align-items-center mt-2">
|
||||
<div class="avatar-placeholder bg-purple bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||||
<i class="fas fa-user text-purple fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="small fw-bold">陈总</span>
|
||||
<span class="small d-block text-muted">运营副总裁</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例6 -->
|
||||
<div class="col-lg-4 col-md-6 case-item" data-category="small beef" data-aos="fade-up" data-aos-delay="500">
|
||||
<div class="card h-100 border-0 shadow-sm case-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-home fs-1 text-orange"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 end-0 m-3 badge bg-orange">小型企业</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold text-dark mb-2">四川家庭农场</h5>
|
||||
<span class="badge bg-light text-dark mb-3">家庭养殖 · 年采购500头</span>
|
||||
<p class="text-muted mb-3">小规模养殖数字化入门方案，管理成本降低40%，养殖效益提升35%</p>
|
||||
|
||||
<div class="case-stats mb-3">
|
||||
<div class="d-flex justify-content-between small text-muted">
|
||||
<span><i class="fas fa-arrow-down text-danger me-1"></i> 成本 -40%</span>
|
||||
<span><i class="fas fa-arrow-up text-success me-1"></i> 效益 +35%</span>
|
||||
<span><i class="fas fa-chart-line text-primary me-1"></i> ROI 2.5倍</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial bg-light p-3 rounded mb-3">
|
||||
<p class="mb-0 small text-muted">"作为家庭农场，我们原本担心数字化门槛太高，但这个系统非常容易上手，现在我们的养殖效益明显提升了。"</p>
|
||||
<div class="d-flex align-items-center mt-2">
|
||||
<div class="avatar-placeholder bg-orange bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
|
||||
<i class="fas fa-user text-orange fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="small fw-bold">刘先生</span>
|
||||
<span class="small d-block text-muted">农场主</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<div class="row mt-5 pt-5" data-aos="fade-up">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h3 class="fw-bold text-dark mb-3">客户成功数据</h3>
|
||||
<p class="text-muted">基于200+企业客户的真实使用数据统计</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="display-4 fw-bold text-primary mb-2">85%</div>
|
||||
<p class="text-muted">客户续约率</p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="display-4 fw-bold text-success mb-2">3.2倍</div>
|
||||
<p class="text-muted">平均投资回报率</p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="display-4 fw-bold text-warning mb-2">45%</div>
|
||||
<p class="text-muted">平均效率提升</p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="display-4 fw-bold text-info mb-2">20%</div>
|
||||
<p class="text-muted">平均成本降低</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA区域 -->
|
||||
<section class="py-5 bg-primary text-white">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h3 class="fw-bold mb-3">Ready to see similar results?</h3>
|
||||
<p class="mb-4">加入200+成功企业的行列，开启您的数字化采购转型之旅</p>
|
||||
</div>
|
||||
<div class="col-lg-4 text-lg-end">
|
||||
<a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<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-light">
|
||||
专业的数字化采购管理解决方案，
|
||||
为养殖企业提供全流程的采购数字化服务。
|
||||
</p>
|
||||
</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="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
|
||||
<li><a href="solutions.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">资源</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
|
||||
<li><a href="news.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">公司</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
|
||||
<li><a href="contact.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">联系信息</h6>
|
||||
<div class="text-muted">
|
||||
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
|
||||
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
|
||||
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-muted mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<div class="d-flex justify-content-md-end">
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
|
||||
// 案例筛选功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterButtons = document.querySelectorAll('[data-filter]');
|
||||
const caseItems = document.querySelectorAll('.case-item');
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// 移除所有active状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
// 添加当前active状态
|
||||
this.classList.add('active');
|
||||
|
||||
const filterValue = this.getAttribute('data-filter');
|
||||
|
||||
caseItems.forEach(item => {
|
||||
if (filterValue === 'all') {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
const categories = item.getAttribute('data-category').split(' ');
|
||||
if (categories.includes(filterValue)) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bg-purple { background-color: #6f42c1 !important; }
|
||||
.bg-orange { background-color: #fd7e14 !important; }
|
||||
.text-purple { color: #6f42c1 !important; }
|
||||
.text-orange { color: #fd7e14 !important; }
|
||||
|
||||
.case-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.placeholder-image {
|
||||
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
304
website/contact.html
Normal file
304
website/contact.html
Normal file
@@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>联系我们 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.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">
|
||||
<span class="ms-2 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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.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="news.html">新闻动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="ms-3">
|
||||
<a href="contact.html" class="btn btn-primary">免费试用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<section class="bg-primary py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold text-white mb-4">联系我们</h1>
|
||||
<p class="lead text-white-50 mb-0">
|
||||
我们期待为您提供专业的数字化采购解决方案，立即联系获取产品演示和报价
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- 联系表单 -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<h3 class="fw-bold text-dark mb-4">发送咨询</h3>
|
||||
<p class="text-muted mb-4">填写以下信息，我们的专业顾问会尽快联系您</p>
|
||||
|
||||
<form id="contactForm" class="needs-validation" novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label fw-bold">姓名 *</label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="company" class="form-label fw-bold">公司名称</label>
|
||||
<input type="text" class="form-control" id="company">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone" class="form-label fw-bold">手机号 *</label>
|
||||
<input type="tel" class="form-control" id="phone" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label fw-bold">邮箱 *</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="interest" class="form-label fw-bold">您感兴趣的是</label>
|
||||
<select class="form-select" id="interest">
|
||||
<option value="">请选择...</option>
|
||||
<option value="demo">产品演示</option>
|
||||
<option value="quote">报价咨询</option>
|
||||
<option value="cooperation">合作洽谈</option>
|
||||
<option value="support">技术支持</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="message" class="form-label fw-bold">详细需求 *</label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="agree" required>
|
||||
<label class="form-check-label text-muted" for="agree">
|
||||
我同意隐私政策和服务条款
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100">
|
||||
<i class="bi bi-send me-2"></i>发送咨询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="col-lg-4">
|
||||
<div class="sticky-top" style="top: 100px;">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-4">
|
||||
<h4 class="fw-bold text-dark mb-4">联系信息</h4>
|
||||
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||||
<i class="bi bi-telephone text-primary fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">联系电话</h6>
|
||||
<p class="text-light mb-0">15927219038(周经理)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||||
<i class="bi bi-envelope text-success fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">商务邮箱</h6>
|
||||
<p class="text-light mb-0">service@aiotagro.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||||
<i class="bi bi-geo-alt text-warning fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">公司地址</h6>
|
||||
<p class="text-light mb-0">武汉光谷软件园F2栋</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
|
||||
<i class="bi bi-clock text-info fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">工作时间</h6>
|
||||
<p class="text-light mb-0">周一至周五 9:00-18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h6 class="fw-bold mb-3">关注我们</h6>
|
||||
<div class="d-flex gap-3">
|
||||
<a href="#" class="text-primary fs-4">
|
||||
<i class="bi bi-wechat"></i>
|
||||
</a>
|
||||
<a href="#" class="text-primary fs-4">
|
||||
<i class="bi bi-weibo"></i>
|
||||
</a>
|
||||
<a href="#" class="text-primary fs-4">
|
||||
<i class="bi bi-linkedin"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速联系卡片 -->
|
||||
<div class="card border-0 shadow-lg mt-4">
|
||||
<div class="card-body p-4 text-center bg-dark">
|
||||
<h6 class="fw-bold mb-3 text-light">急需技术支持？</h6>
|
||||
<p class="text-light small mb-3">
|
||||
我们的技术团队提供7×24小时紧急支持服务
|
||||
</p>
|
||||
<a href="tel:400-123-4567" class="btn btn-outline-light btn-sm w-100">
|
||||
<i class="bi bi-telephone me-2"></i>紧急联系
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-0">
|
||||
<div class="ratio ratio-21x9">
|
||||
<!-- 这里可以嵌入实际的地图 -->
|
||||
<div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-map text-primary fs-1 mb-3"></i>
|
||||
<h5 class="fw-bold text-dark">公司位置地图</h5>
|
||||
<p class="text-muted">北京市朝阳区科技园区创新大厦A座12层</p>
|
||||
<a href="#" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-geo-alt me-2"></i>查看详细地图
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-light 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-light">
|
||||
专业的数字化采购管理解决方案，
|
||||
助力养殖企业提升采购效率和经济效益。
|
||||
</p>
|
||||
</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="product.html" class="text-light text-decoration-none">功能特性</a></li>
|
||||
<li><a href="solutions.html" class="text-light 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="cases.html" class="text-light text-decoration-none">客户案例</a></li>
|
||||
<li><a href="#" class="text-light text-decoration-none">文档中心</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">联系我们</h6>
|
||||
<ul class="list-unstyled text-light">
|
||||
<li><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
|
||||
<li><i class="bi bi-envelope me-2"></i> info@niumall.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 bg-secondary">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-light mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<a href="#" class="text-light text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-light text-decoration-none">服务条款</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 自定义JS -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
450
website/css/custom.css
Normal file
450
website/css/custom.css
Normal file
@@ -0,0 +1,450 @@
|
||||
/* 自定义样式文件 - 活牛采购智能数字化系统官网 */
|
||||
|
||||
/* 全局样式 */
|
||||
:root {
|
||||
--primary-color: #4CAF50; /* 农业绿色主色调 */
|
||||
--primary-light: #81C784; /* 浅绿色 */
|
||||
--primary-dark: #388E3C; /* 深绿色 */
|
||||
--secondary-color: #1976D2; /* 深蓝色辅助色 */
|
||||
--success-color: #00d474; /* 绿色成功色 */
|
||||
--warning-color: #FF9800; /* 橙色警告色 */
|
||||
--danger-color: #ff3c78; /* 粉色危险色 */
|
||||
--light-color: #f8f9fa;
|
||||
--dark-color: #121212; /* 深色背景 */
|
||||
--gray-color: #2d2d2d; /* 灰色 */
|
||||
--text-light: #f8f9fa; /* 浅色文字 */
|
||||
--text-dark: #343a40; /* 深色文字 */
|
||||
|
||||
--font-family-base: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Source Han Sans CN';
|
||||
--border-radius: 0.75rem;
|
||||
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
|
||||
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
--neon-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
|
||||
--neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.8);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
line-height: 1.6;
|
||||
color: var(--text-light);
|
||||
background-color: var(--dark-color);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
padding: 1rem 0;
|
||||
transition: var(--transition);
|
||||
background: rgba(30, 30, 30, 0.8) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-light) !important;
|
||||
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
font-weight: 500;
|
||||
color: var(--text-light) !important;
|
||||
transition: var(--transition);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: var(--secondary-color) !important;
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active {
|
||||
color: var(--secondary-color) !important;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
/* 英雄区域样式 */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
color: var(--text-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6rem 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 10% 20%, rgba(111, 66, 193, 0.1) 0%, transparent 20%),
|
||||
radial-gradient(circle at 90% 80%, rgba(0, 198, 255, 0.1) 0%, transparent 20%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 3.5rem;
|
||||
background: linear-gradient(to right, var(--secondary-color), var(--primary-light));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* 功能特性卡片样式 */
|
||||
.feature-icon {
|
||||
transition: var(--transition);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
box-shadow: var(--neon-shadow);
|
||||
color: var(--text-light);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
background: rgba(45, 45, 45, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: var(--neon-shadow-hover), 0 15px 40px rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
.card:hover .feature-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: var(--neon-shadow-hover);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 600;
|
||||
padding: 0.875rem 1.75rem;
|
||||
transition: var(--transition);
|
||||
border: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: 0.5s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
|
||||
border: none;
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(45deg, var(--primary-light), var(--primary-color));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--neon-shadow-hover), 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: transparent;
|
||||
box-shadow: var(--neon-shadow);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--neon-shadow-hover);
|
||||
border: 2px solid var(--primary-light);
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
footer {
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
||||
border-top: 1px solid rgba(111, 66, 193, 0.2);
|
||||
}
|
||||
|
||||
footer h5, footer h6 {
|
||||
color: var(--text-light) !important;
|
||||
text-shadow: 0 0 10px rgba(111, 66, 193, 0.3);
|
||||
}
|
||||
|
||||
footer a {
|
||||
transition: var(--transition);
|
||||
color: var(--text-light) !important;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--secondary-color) !important;
|
||||
text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hero-section .lead {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-bottom: 1rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
text-align: center;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 新增：加载动画 */
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 0.2em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner-border {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 新增：图片占位符样式 */
|
||||
.placeholder-image {
|
||||
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 新增：表单验证样式 */
|
||||
.form-control.is-invalid {
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* 新增：动画效果 */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 新增：回到顶部按钮样式 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), #0056b3);
|
||||
}
|
||||
|
||||
.bg-gradient-dark {
|
||||
background: linear-gradient(135deg, var(--dark-color), #2c3e50);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
1
website/images/placeholder-800x400.png
Normal file
1
website/images/placeholder-800x400.png
Normal file
@@ -0,0 +1 @@
|
||||
iVBORw0KGgoAAAANSUhEUgAAAyAAAAACCAYAAACg/LjIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGMtVWAAAAAxJREFUCB1j/P//PwMABfAC/11JyjcAAAAASUVORK5CYII=
|
||||
26
website/images/placeholder.txt
Normal file
26
website/images/placeholder.txt
Normal file
@@ -0,0 +1,26 @@
|
||||
图片资源目录说明
|
||||
================
|
||||
|
||||
此目录用于存放网站所需的图片资源，包括：
|
||||
|
||||
1. logo.png - 网站Logo图片
|
||||
2. hero-banner.jpg - 首页英雄区域横幅图片
|
||||
3. feature-*.jpg - 功能特性相关图片
|
||||
4. case-*.jpg - 客户案例图片
|
||||
5. team-*.jpg - 团队成员照片
|
||||
6. icons/ - 图标资源目录
|
||||
|
||||
建议图片规格：
|
||||
- Logo: 200x60px (PNG透明背景)
|
||||
- Banner图片: 1200x600px (JPG/WebP格式)
|
||||
- 功能图片: 800x600px
|
||||
- 案例图片: 600x400px
|
||||
- 团队照片: 400x400px
|
||||
|
||||
图片优化建议：
|
||||
1. 使用WebP格式以获得更好的压缩效果
|
||||
2. 确保所有图片都经过压缩优化
|
||||
3. 为重要图片添加alt文本描述
|
||||
4. 使用懒加载技术提高页面加载速度
|
||||
|
||||
当前为占位文件，实际使用时请替换为真实的图片资源。
|
||||
445
website/index.html
Normal file
445
website/index.html
Normal file
@@ -0,0 +1,445 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>活牛采购智能数字化系统 - 专业数字化采购解决方案</title>
|
||||
<meta name="description" content="专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案，助力养殖企业提升采购效率。">
|
||||
<meta name="keywords" content="活牛采购,畜牧管理,数字化系统,SOP系统,农业数字化,养殖业">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
|
||||
<!-- 结构化数据 -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "活牛采购智能数字化系统",
|
||||
"description": "专业的活牛采购数字化管理系统，提供从采购、运输到结算的全流程数字化解决方案",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Web",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="images/logo.png" alt="活牛采购智能数字化系统" height="40">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.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="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="ms-3">
|
||||
<a href="contact.html" class="btn btn-primary">免费试用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<nav aria-label="breadcrumb" class="pt-5 mt-5">
|
||||
<div class="container">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">首页</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">活牛采购智能数字化系统</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-dark text-white py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">数字化活牛采购全流程管理</h1>
|
||||
<p class="lead mb-4">专业的SOP采购管理系统，从供应商筛选、订单管理、运输跟踪到财务结算，一站式解决活牛采购的所有难题。</p>
|
||||
|
||||
<div class="d-flex flex-wrap gap-3 justify-content-center mb-4">
|
||||
<a href="contact.html" class="btn btn-primary btn-lg">
|
||||
<i class="fas fa-rocket me-2"></i>立即试用
|
||||
</a>
|
||||
<a href="product.html" class="btn btn-outline-primary btn-lg">
|
||||
<i class="fas fa-play-circle me-2"></i>观看演示
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<small>已有 500+ 企业选择我们的系统</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section class="features-section py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">核心功能</h2>
|
||||
<p class="text-muted">一站式解决活牛采购全流程管理需求</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 text-center border-0">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">供应商管理</h5>
|
||||
<p class="card-text">建立供应商档案，记录资质信息，评估供应商信誉等级</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 text-center border-0">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-clipboard-list"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">采购计划</h5>
|
||||
<p class="card-text">制定科学采购计划，自动生成采购清单和时间安排</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 text-center border-0">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">质检系统</h5>
|
||||
<p class="card-text">标准化质检流程，制定质检标准，记录质检数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100 text-center border-0">
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-truck"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">运输跟踪</h5>
|
||||
<p class="card-text">实时跟踪运输状态，确保货物安全准时到达</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 统计数据 -->
|
||||
<section class="stats-section">
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-target="500">0</div>
|
||||
<div class="stat-label">服务企业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-target="99">0</div>
|
||||
<div class="stat-label">客户满意度(%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-target="40">0</div>
|
||||
<div class="stat-label">效率提升(%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-6">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-target="15">0</div>
|
||||
<div class="stat-label">成本节约(%)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 解决方案 -->
|
||||
<section class="solutions-section py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">行业解决方案</h2>
|
||||
<p class="text-muted">针对不同规模和类型的畜牧企业提供定制化解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card solution-card h-100 border-0">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">大型养殖企业</h5>
|
||||
<p class="card-text">针对年采购量超过1000头的大型养殖企业，提供集团化采购管理解决方案。</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>
|
||||
<a href="solutions.html" class="btn btn-outline-primary mt-3">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card solution-card h-100 border-0">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">中小型牧场</h5>
|
||||
<p class="card-text">针对年采购量在100-1000头的中小型牧场，提供简化版采购管理方案。</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>
|
||||
<a href="solutions.html" class="btn btn-outline-primary mt-3">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card solution-card h-100 border-0">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
<a href="solutions.html" class="btn btn-outline-primary mt-3">了解更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户案例 -->
|
||||
<section class="cases-section py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">客户案例</h2>
|
||||
<p class="text-muted">看看我们的客户如何通过系统提升业务效率</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card case-card h-100 border-0">
|
||||
<img src="images/case1.jpg" class="card-img-top" alt="XX牧业集团" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">大型企业</span>
|
||||
<h5 class="card-title">XX牧业集团采购数字化转型</h5>
|
||||
<p class="card-text">通过实施活牛采购智能数字化系统，该集团实现了采购流程标准化，采购效率提升40%。</p>
|
||||
<a href="cases.html" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card case-card h-100 border-0">
|
||||
<img src="images/case2.jpg" class="card-img-top" alt="YY生态牧场" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-success mb-2">中型企业</span>
|
||||
<h5 class="card-title">YY生态牧场采购管理升级</h5>
|
||||
<p class="card-text">该牧场通过系统化管理采购流程，显著降低了采购风险，提升了供应商管理效率。</p>
|
||||
<a href="cases.html" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card case-card h-100 border-0">
|
||||
<img src="images/case3.jpg" class="card-img-top" alt="ZZ活牛贸易平台" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-info mb-2">贸易商</span>
|
||||
<h5 class="card-title">ZZ活牛贸易平台业务优化</h5>
|
||||
<p class="card-text">贸易商通过系统实现了多方交易协调，显著提升了交易效率和资金安全性。</p>
|
||||
<a href="cases.html" class="btn btn-outline-primary">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="cases.html" class="btn btn-primary btn-lg">查看更多案例</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻动态 -->
|
||||
<section class="news-section py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="display-6 mb-3">新闻动态</h2>
|
||||
<p class="text-muted">获取最新产品资讯和行业动态</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card news-card h-100 border-0">
|
||||
<img src="images/news1.jpg" class="card-img-top" alt="产品更新" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-primary mb-2">产品更新</span>
|
||||
<h5 class="card-title">活牛采购智能数字化系统V3.0正式发布</h5>
|
||||
<p class="card-text text-muted">新版本增加了智能采购建议、移动端优化、数据可视化等功能...</p>
|
||||
<a href="news.html" class="btn btn-outline-primary">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card news-card h-100 border-0">
|
||||
<img src="images/news2.jpg" class="card-img-top" alt="行业资讯" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-success mb-2">行业资讯</span>
|
||||
<h5 class="card-title">数字化转型推动畜牧业高质量发展</h5>
|
||||
<p class="card-text text-muted">随着信息技术的发展，数字化转型已成为畜牧业发展的必然趋势...</p>
|
||||
<a href="news.html" class="btn btn-outline-primary">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card news-card h-100 border-0">
|
||||
<img src="images/news3.jpg" class="card-img-top" alt="客户案例" loading="lazy">
|
||||
<div class="card-body">
|
||||
<span class="badge bg-info mb-2">客户案例</span>
|
||||
<h5 class="card-title">XX牧业集团成功实施采购数字化项目</h5>
|
||||
<p class="card-text text-muted">通过与我们合作，XX牧业集团实现了采购流程的全面数字化...</p>
|
||||
<a href="news.html" class="btn btn-outline-primary">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="news.html" class="btn btn-primary btn-lg">查看更多新闻</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="card bg-primary text-white border-0 shadow">
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="mb-3">开启您的数字化采购之旅</h3>
|
||||
<p class="mb-4">立即申请免费试用，体验活牛采购智能数字化系统带来的效率提升</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg">免费试用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<h5 class="footer-title">活牛采购智能数字化系统</h5>
|
||||
<p>专业的活牛采购全流程数字化管理解决方案，提升采购效率，降低经营风险。</p>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
|
||||
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
|
||||
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="footer-title">产品</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="product.html">功能介绍</a></li>
|
||||
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
|
||||
<li class="mb-2"><a href="cases.html">客户案例</a></li>
|
||||
<li class="mb-2"><a href="news.html">更新日志</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="footer-title">支持</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="#">帮助中心</a></li>
|
||||
<li class="mb-2"><a href="#">在线客服</a></li>
|
||||
<li class="mb-2"><a href="#">开发者文档</a></li>
|
||||
<li class="mb-2"><a href="#">合作伙伴</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-4">
|
||||
<h5 class="footer-title">联系我们</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区xxx街道xxx号</li>
|
||||
<li class="mb-2"><i class="fas fa-phone me-2"></i> 400-xxx-xxxx</li>
|
||||
<li class="mb-2"><i class="fas fa-envelope me-2"></i> info@example.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="copyright text-center">
|
||||
<p>© 2023 活牛采购智能数字化系统. 保留所有权利。</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button class="back-to-top" aria-label="返回顶部">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AOS Animation -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<!-- 自定义脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
310
website/js/main.js
Normal file
310
website/js/main.js
Normal file
@@ -0,0 +1,310 @@
|
||||
// 活牛采购智能数字化系统官网 - 主JavaScript文件
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化所有功能
|
||||
initNavigation();
|
||||
initScrollEffects();
|
||||
initAnimations();
|
||||
initContactForm();
|
||||
initBackToTop();
|
||||
initImageLazyLoading();
|
||||
initFormValidation();
|
||||
|
||||
console.log('官网初始化完成 - 活牛采购智能数字化系统');
|
||||
});
|
||||
|
||||
// 导航功能初始化
|
||||
function initNavigation() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
// 滚动时导航栏样式变化
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 100) {
|
||||
navbar.classList.add('navbar-scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
|
||||
navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
|
||||
} else {
|
||||
navbar.classList.remove('navbar-scrolled');
|
||||
navbar.style.backgroundColor = 'rgba(255, 255, 255, 1)';
|
||||
navbar.style.boxShadow = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 导航链接点击效果
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
// 移除所有active类
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
// 添加当前active类
|
||||
this.classList.add('active');
|
||||
|
||||
// 平滑滚动到目标区域
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId && targetId.startsWith('#')) {
|
||||
e.preventDefault();
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动效果初始化
|
||||
function initScrollEffects() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in-up');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
const animateElements = document.querySelectorAll('.card, .feature-icon, h2, h3, p.lead');
|
||||
animateElements.forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 动画效果初始化
|
||||
function initAnimations() {
|
||||
// 数字统计动画
|
||||
const stats = document.querySelectorAll('.stat-number');
|
||||
if (stats.length > 0) {
|
||||
stats.forEach(stat => {
|
||||
const target = parseInt(stat.textContent);
|
||||
let current = 0;
|
||||
const duration = 2000; // 2秒
|
||||
const increment = target / (duration / 16); // 60fps
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= target) {
|
||||
stat.textContent = target.toLocaleString();
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
stat.textContent = Math.floor(current).toLocaleString();
|
||||
}
|
||||
}, 16);
|
||||
});
|
||||
}
|
||||
|
||||
// 鼠标悬停效果
|
||||
const cards = document.querySelectorAll('.card');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px)';
|
||||
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 联系表单初始化
|
||||
function initContactForm() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 表单验证
|
||||
if (!validateForm(contactForm)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(this);
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
// 显示加载状态
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="loading-spinner" role="status" aria-hidden="true"></span> 提交中...';
|
||||
|
||||
// 模拟表单提交
|
||||
setTimeout(() => {
|
||||
// 这里可以替换为实际的API调用
|
||||
showAlert('success', '提交成功！我们会尽快联系您。');
|
||||
contactForm.reset();
|
||||
|
||||
// 恢复按钮状态
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalText;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function validateForm(form) {
|
||||
let isValid = true;
|
||||
const requiredFields = form.querySelectorAll('[required]');
|
||||
|
||||
requiredFields.forEach(field => {
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.classList.add('is-invalid');
|
||||
|
||||
// 创建错误提示
|
||||
if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'invalid-feedback';
|
||||
errorDiv.textContent = '此字段为必填项';
|
||||
field.parentNode.insertBefore(errorDiv, field.nextSibling);
|
||||
}
|
||||
} else {
|
||||
field.classList.remove('is-invalid');
|
||||
|
||||
// 移除错误提示
|
||||
if (field.nextElementSibling && field.nextElementSibling.classList.contains('invalid-feedback')) {
|
||||
field.nextElementSibling.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// 显示提示信息
|
||||
function showAlert(type, message) {
|
||||
const alertDiv = document.createElement('div');
|
||||
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
alertDiv.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
// 添加到页面顶部
|
||||
document.body.insertBefore(alertDiv, document.body.firstChild);
|
||||
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
if (alertDiv.parentNode) {
|
||||
alertDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// 返回顶部功能
|
||||
function initBackToTop() {
|
||||
const backToTopBtn = document.createElement('button');
|
||||
backToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
|
||||
backToTopBtn.className = 'btn btn-primary back-to-top';
|
||||
|
||||
document.body.appendChild(backToTopBtn);
|
||||
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 300) {
|
||||
backToTopBtn.style.display = 'block';
|
||||
} else {
|
||||
backToTopBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initImageLazyLoading() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
} else {
|
||||
// 降级处理
|
||||
images.forEach(img => {
|
||||
img.src = img.dataset.src;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证初始化
|
||||
function initFormValidation() {
|
||||
const forms = document.querySelectorAll('.needs-validation');
|
||||
|
||||
Array.from(forms).forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
if (!form.checkValidity()) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
// 工具函数：防抖
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 工具函数：节流
|
||||
function throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 页面性能监控
|
||||
function monitorPerformance() {
|
||||
window.addEventListener('load', function() {
|
||||
// 页面加载完成时间
|
||||
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
|
||||
console.log(`页面加载完成时间: ${loadTime}ms`);
|
||||
|
||||
// 核心网页指标
|
||||
if ('loading' in HTMLImageElement.prototype) {
|
||||
console.log('浏览器支持原生懒加载');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化性能监控
|
||||
monitorPerformance();
|
||||
517
website/news.html
Normal file
517
website/news.html
Normal file
@@ -0,0 +1,517 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新闻动态 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="获取活牛采购智能数字化系统的最新动态、行业新闻和技术更新，了解养殖数字化领域的最新发展趋势和公司进展。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="index.html">活牛采购智能数字化系统</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.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="about.html">关于我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">帮助</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main>
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-dark text-white py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">新闻动态</h1>
|
||||
<p class="lead mb-4">了解最新的行业资讯、产品更新和公司动态</p>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="搜索新闻..." id="newsSearch">
|
||||
<button class="btn btn-outline-light" type="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻分类 -->
|
||||
<section class="py-4 bg-white">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-wrap justify-content-center gap-2">
|
||||
<button class="btn btn-outline-primary active" data-category="all">全部</button>
|
||||
<button class="btn btn-outline-primary" data-category="company">公司动态</button>
|
||||
<button class="btn btn-outline-primary" data-category="industry">行业新闻</button>
|
||||
<button class="btn btn-outline-primary" data-category="technology">技术更新</button>
|
||||
<button class="btn btn-outline-primary" data-category="event">活动预告</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 新闻列表 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row" id="news-container">
|
||||
<!-- 新闻1 -->
|
||||
<div class="col-lg-6 mb-4 news-item" data-category="company" data-aos="fade-up">
|
||||
<div class="card border-0 shadow-sm h-100 news-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-newspaper fs-1 text-primary"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 start-0 m-3 badge bg-primary">公司动态</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-15</small>
|
||||
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,245</small>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">活牛采购智能数字化系统完成B轮融资，加速全国市场布局</h5>
|
||||
<p class="text-muted mb-3">
|
||||
公司宣布完成数千万元B轮融资，由某知名投资机构领投，老股东跟投。
|
||||
本轮融资将用于产品研发、市场拓展和团队建设。
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="btn btn-outline-primary btn-sm">阅读全文</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 86</a>
|
||||
<a href="#" class="text-muted"><i class="far fa-comment"></i> 23</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻2 -->
|
||||
<div class="col-lg-6 mb-4 news-item" data-category="industry" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="card border-0 shadow-sm h-100 news-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-chart-line fs-1 text-success"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 start-0 m-3 badge bg-success">行业新闻</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-10</small>
|
||||
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 892</small>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">2024年中国畜牧行业数字化发展趋势报告发布</h5>
|
||||
<p class="text-muted mb-3">
|
||||
最新行业报告显示，数字化采购管理系统渗透率预计将从目前的15%提升至30%，
|
||||
市场规模将突破百亿元。
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="btn btn-outline-success btn-sm">阅读全文</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 64</a>
|
||||
<a href="#" class="text-muted"><i class="far fa-comment"></i> 18</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻3 -->
|
||||
<div class="col-lg-6 mb-4 news-item" data-category="technology" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="card border-0 shadow-sm h-100 news-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-info bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-robot fs-1 text-info"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 start-0 m-3 badge bg-info">技术更新</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-03-05</small>
|
||||
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,567</small>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">AI智能牛只评估系统V2.0正式上线，准确率提升至95%</h5>
|
||||
<p class="text-muted mb-3">
|
||||
新一代AI评估系统采用深度学习算法，大幅提升牛只品质评估准确率，
|
||||
同时新增健康监测和生长预测功能。
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="btn btn-outline-info btn-sm">阅读全文</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 128</a>
|
||||
<a href="#" class="text-muted"><i class="far fa-comment"></i> 45</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻4 -->
|
||||
<div class="col-lg-6 mb-4 news-item" data-category="event" data-aos="fade-up" data-aos-delay="300">
|
||||
<div class="card border-0 shadow-sm h-100 news-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-calendar-alt fs-1 text-warning"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 start-0 m-3 badge bg-warning">活动预告</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-04-10</small>
|
||||
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 734</small>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">2024智慧养殖创新峰会将于4月在北京举行</h5>
|
||||
<p class="text-muted mb-3">
|
||||
峰会聚焦数字化养殖、智能采购、产业链协同等热点话题，
|
||||
邀请行业专家、企业代表共同探讨发展趋势。
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="btn btn-outline-warning btn-sm">立即报名</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 92</a>
|
||||
<a href="#" class="text-muted"><i class="far fa-comment"></i> 31</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻5 -->
|
||||
<div class="col-lg-6 mb-4 news-item" data-category="company" data-aos="fade-up" data-aos-delay="400">
|
||||
<div class="card border-0 shadow-sm h-100 news-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-purple bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-award fs-1 text-purple"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 start-0 m-3 badge bg-purple">公司动态</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-02-28</small>
|
||||
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 987</small>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">荣获"2024年度畜牧科技创新企业"称号</h5>
|
||||
<p class="text-muted mb-3">
|
||||
在2024中国畜牧产业创新大会上，公司凭借数字化采购解决方案
|
||||
获得行业权威认可。
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="btn btn-outline-purple btn-sm">阅读全文</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 105</a>
|
||||
<a href="#" class="text-muted"><i class="far fa-comment"></i> 28</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻6 -->
|
||||
<div class="col-lg-6 mb-4 news-item" data-category="technology" data-aos="fade-up" data-aos-delay="500">
|
||||
<div class="card border-0 shadow-sm h-100 news-card">
|
||||
<div class="card-img-top position-relative">
|
||||
<div class="placeholder-image bg-orange bg-opacity-10 d-flex align-items-center justify-content-center" style="height: 200px;">
|
||||
<i class="fas fa-mobile-alt fs-1 text-orange"></i>
|
||||
</div>
|
||||
<span class="position-absolute top-0 start-0 m-3 badge bg-orange">技术更新</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<small class="text-muted"><i class="far fa-calendar me-1"></i> 2024-02-20</small>
|
||||
<small class="text-muted ms-3"><i class="far fa-eye me-1"></i> 1,203</small>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">移动端APP全新升级，支持离线操作和实时同步</h5>
|
||||
<p class="text-muted mb-3">
|
||||
新版本移动端应用优化用户体验，新增离线数据采集功能，
|
||||
即使在网络信号较差的牧场也能正常使用。
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="#" class="btn btn-outline-orange btn-sm">阅读全文</a>
|
||||
<div class="d-flex">
|
||||
<a href="#" class="text-muted me-2"><i class="far fa-thumbs-up"></i> 142</a>
|
||||
<a href="#" class="text-muted"><i class="far fa-comment"></i> 37</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<nav aria-label="News pagination">
|
||||
<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>
|
||||
|
||||
<!-- 订阅区域 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h3 class="fw-bold text-dark mb-3">订阅我们的新闻动态</h3>
|
||||
<p class="text-muted mb-4">及时获取最新行业资讯、产品更新和活动信息</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="email" class="form-control" placeholder="请输入您的邮箱" aria-label="Email">
|
||||
<button class="btn btn-primary" type="button">订阅</button>
|
||||
</div>
|
||||
<small class="text-muted">我们承诺不会泄露您的邮箱信息</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<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-muted">
|
||||
专业的数字化采购管理解决方案，
|
||||
为养殖企业提供全流程的采购数字化服务。
|
||||
</p>
|
||||
</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="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
|
||||
<li><a href="solutions.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">资源</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
|
||||
<li><a href="news.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">公司</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
|
||||
<li><a href="contact.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">联系信息</h6>
|
||||
<div class="text-muted">
|
||||
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
|
||||
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
|
||||
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-muted mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<div class="d-flex justify-content-md-end">
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
|
||||
// 新闻筛选功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterButtons = document.querySelectorAll('[data-category]');
|
||||
const newsItems = document.querySelectorAll('.news-item');
|
||||
const searchInput = document.getElementById('newsSearch');
|
||||
|
||||
// 分类筛选
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// 移除所有active状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
// 添加当前active状态
|
||||
this.classList.add('active');
|
||||
|
||||
const category = this.getAttribute('data-category');
|
||||
|
||||
newsItems.forEach(item => {
|
||||
if (category === 'all') {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
const itemCategory = item.getAttribute('data-category');
|
||||
if (itemCategory === category) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 搜索功能
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchText = this.value.toLowerCase();
|
||||
|
||||
newsItems.forEach(item => {
|
||||
const title = item.querySelector('h5').textContent.toLowerCase();
|
||||
const content = item.querySelector('p').textContent.toLowerCase();
|
||||
|
||||
if (title.includes(searchText) || content.includes(searchText)) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.news-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.placeholder-image {
|
||||
background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-light));
|
||||
}
|
||||
|
||||
.bg-purple { background-color: #6f42c1 !important; }
|
||||
.bg-orange { background-color: #fd7e14 !important; }
|
||||
.text-purple { color: #6f42c1 !important; }
|
||||
.text-orange { color: #fd7e14 !important; }
|
||||
|
||||
.btn-outline-purple {
|
||||
color: #6f42c1;
|
||||
border-color: #6f42c1;
|
||||
}
|
||||
|
||||
.btn-outline-purple:hover {
|
||||
color: white;
|
||||
background-color: #6f42c1;
|
||||
border-color: #6f42c1;
|
||||
}
|
||||
|
||||
.btn-outline-orange {
|
||||
color: #fd7e14;
|
||||
border-color: #fd7e14;
|
||||
}
|
||||
|
||||
.btn-outline-orange:hover {
|
||||
color: white;
|
||||
background-color: #fd7e14;
|
||||
border-color: #fd7e14;
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
color: var(--bs-primary);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
340
website/product.html
Normal file
340
website/product.html
Normal file
@@ -0,0 +1,340 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>产品介绍 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="详细了解活牛采购智能数字化系统的核心功能，包括供应商管理、采购流程、运输跟踪、财务结算等全流程数字化解决方案。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.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="news.html">新闻动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="ms-3">
|
||||
<a href="contact.html" class="btn btn-primary">免费试用</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<section class="hero-section bg-dark text-white py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">产品功能特性</h1>
|
||||
<p class="lead mb-0">
|
||||
全面覆盖活牛采购全流程，从供应商管理到财务结算的一站式数字化解决方案
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能模块介绍 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<!-- 供应商管理 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100 border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
|
||||
<i class="fas fa-users text-primary"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold text-dark">供应商管理</h3>
|
||||
<p class="text-muted">完善的供应商评估和管理体系</p>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>供应商档案管理：</strong>完整的供应商信息数据库
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>资质审核：</strong>在线审核供应商资质和认证
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>绩效评估：</strong>基于历史交易的供应商评分系统
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>黑名单管理：</strong>不良供应商预警和屏蔽机制
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>合作记录：</strong>完整的合作历史和数据统计
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 采购流程管理 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100 border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<div class="feature-icon bg-success bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
|
||||
<i class="fas fa-shopping-cart text-success"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold text-dark">采购流程管理</h3>
|
||||
<p class="text-muted">标准化的SOP采购流程控制</p>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>需求计划：</strong>智能需求预测和采购计划制定
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>询价比价：</strong>多供应商在线询价和比价
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>订单管理：</strong>电子化订单创建、审批和执行
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>合同管理：</strong>电子合同签署和管理
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>进度跟踪：</strong>实时采购进度监控和预警
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 运输跟踪 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100 border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
|
||||
<i class="fas fa-map-marker-alt text-warning"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold text-dark">运输跟踪</h3>
|
||||
<p class="text-muted">全程可视化的运输监控系统</p>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>GPS定位：</strong>实时车辆位置追踪
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>视频监控：</strong>运输过程实时视频监控
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>温度监控：</strong>车厢环境温度实时监测
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>异常预警：</strong>运输异常自动预警和通知
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>电子围栏：</strong>预设路线偏离预警
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 财务结算 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card h-100 border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center mb-4">
|
||||
<div class="feature-icon bg-info bg-opacity-10 p-4 rounded-circle d-inline-block mb-3" style="width: 100px; height: 100px; font-size: 2.5rem;">
|
||||
<i class="fas fa-coins text-info"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold text-dark">财务结算</h3>
|
||||
<p class="text-muted">自动化财务对账和结算系统</p>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>对账管理：</strong>自动化对账和差异处理
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>发票管理：</strong>电子发票上传和验证
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>支付管理：</strong>多方式支付和资金流水管理
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>成本分析：</strong>采购成本统计和分析报表
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<strong>税务管理：</strong>税务合规性检查和申报
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技术优势 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark mb-4">技术优势</h2>
|
||||
<p class="lead text-muted">基于先进技术架构，确保系统稳定可靠</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-shield-check text-primary fs-1 mb-3"></i>
|
||||
<h5 class="fw-bold">安全可靠</h5>
|
||||
<p class="text-muted">多重安全防护机制，数据加密存储，确保业务安全</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-lightning-charge text-success fs-1 mb-3"></i>
|
||||
<h5 class="fw-bold">高性能</h5>
|
||||
<p class="text-muted">分布式架构设计，支持高并发访问，响应迅速</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-arrows-fullscreen text-warning fs-1 mb-3"></i>
|
||||
<h5 class="fw-bold">可扩展</h5>
|
||||
<p class="text-muted">模块化设计，支持功能灵活扩展，适应业务发展</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA区域 -->
|
||||
<section class="py-5 bg-primary">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h2 class="display-5 fw-bold text-white mb-4">立即体验专业采购管理系统</h2>
|
||||
<p class="lead text-white-50 mb-4">
|
||||
免费试用30天，体验数字化采购带来的效率提升
|
||||
</p>
|
||||
<a href="contact.html" class="btn btn-light btn-lg px-5">
|
||||
<i class="bi bi-rocket-takeoff me-2"></i>开始免费试用
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-dark text-light 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-muted">
|
||||
专业的数字化采购管理解决方案，
|
||||
助力养殖企业提升采购效率和经济效益。
|
||||
</p>
|
||||
</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="product.html" class="text-muted text-decoration-none">功能特性</a></li>
|
||||
<li><a href="solutions.html" class="text-muted 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="cases.html" 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 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">联系我们</h6>
|
||||
<ul class="list-unstyled text-muted">
|
||||
<li><i class="bi bi-telephone me-2"></i> 15927219038(周经理)</li>
|
||||
<li><i class="bi bi-envelope me-2"></i> service@aiotagro.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 bg-secondary">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-muted mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 自定义JS -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
311
website/solutions.html
Normal file
311
website/solutions.html
Normal file
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>解决方案 - 活牛采购智能数字化系统</title>
|
||||
<meta name="description" content="活牛采购智能数字化系统针对不同行业和企业规模的专业解决方案，提供全流程数字化采购管理服务。">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||||
<!-- AOS Animation -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||
<!-- 自定义样式 -->
|
||||
<link href="css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<span class="ms-2 fw-bold">活牛采购智能数字化系统</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="product.html">产品介绍</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="solutions.html">解决方案</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="cases.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="news.html">新闻动态</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main>
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section bg-dark text-white py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mx-auto text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">专业解决方案</h1>
|
||||
<p class="lead mb-4">针对不同行业特点和企业规模，提供定制化的活牛采购数字化管理解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 行业解决方案 -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="fw-bold text-dark mb-3">按行业细分解决方案</h2>
|
||||
<p class="text-muted">针对不同养殖行业的特殊需求，提供专业定制的数字化解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-4 col-md-6" data-aos="fade-up">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
|
||||
<i class="fas fa-cow text-primary"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">肉牛养殖企业</h5>
|
||||
<p class="text-muted">专注于肉牛育肥和屠宰加工环节的采购管理，优化饲料采购和出栏计划</p>
|
||||
<ul class="text-start text-muted small">
|
||||
<li>育肥牛只采购管理</li>
|
||||
<li>饲料和兽药采购优化</li>
|
||||
<li>出栏计划和销售对接</li>
|
||||
<li>成本控制和效益分析</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
|
||||
<i class="fas fa-seedling text-success"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">奶牛牧场</h5>
|
||||
<p class="text-muted">针对奶牛养殖的特殊需求，优化育种牛只采购和牧场设备采购管理</p>
|
||||
<ul class="text-start text-muted small">
|
||||
<li>优质奶牛育种采购</li>
|
||||
<li>牧场设备和设施采购</li>
|
||||
<li>饲草料采购优化</li>
|
||||
<li>奶制品生产配套</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
|
||||
<div class="card h-100 border-0 shadow-sm">
|
||||
<div class="card-body text-center p-4">
|
||||
<div class="feature-icon bg-warning bg-opacity-10 p-3 rounded-circle d-inline-block mb-3" style="width: 60px; height: 60px; font-size: 1.5rem; margin: 0 auto;">
|
||||
<i class="fas fa-handshake text-warning"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold text-dark mb-3">贸易中介服务</h5>
|
||||
<p class="text-muted">为牛只贸易商提供完整的采购中介服务解决方案，提升交易效率</p>
|
||||
<ul class="text-start text-muted small">
|
||||
<li>买卖双方匹配服务</li>
|
||||
<li>交易流程数字化管理</li>
|
||||
<li>资金结算和安全保障</li>
|
||||
<li>客户关系维护工具</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 企业规模解决方案 -->
|
||||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="fw-bold text-dark mb-3">按企业规模定制方案</h2>
|
||||
<p class="text-muted">根据企业规模和采购需求，提供灵活可扩展的数字化解决方案</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6" data-aos="fade-right">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-5">
|
||||
<h4 class="fw-bold text-primary mb-4">中小型养殖企业</h4>
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="feature-icon bg-primary bg-opacity-10 p-3 rounded-circle d-inline-block me-3" style="width: 50px; height: 50px; font-size: 1.25rem;">
|
||||
<i class="fas fa-users text-primary"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">标准版解决方案</h6>
|
||||
<small class="text-muted">适合年采购量100-1000头的企业</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>基础采购流程管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>供应商信息管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>财务结算基础功能</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>移动端基础应用</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>标准报表和分析</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-center">
|
||||
<span class="h4 text-dark fw-bold">¥9,800</span>
|
||||
<span class="text-muted d-block">/年</span>
|
||||
<a href="contact.html" class="btn btn-primary mt-3">立即咨询</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6" data-aos="fade-left">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-body p-5">
|
||||
<h4 class="fw-bold text-primary mb-4">大型养殖集团</h4>
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="feature-icon bg-success bg-opacity-10 p-3 rounded-circle d-inline-block me-3" style="width: 50px; height: 50px; font-size: 1.25rem;">
|
||||
<i class="fas fa-building text-success"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">企业版解决方案</h6>
|
||||
<small class="text-muted">适合年采购量1000头以上的企业</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>全流程采购管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>多层级权限管理</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>高级财务分析</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>定制化报表开发</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>API集成服务</li>
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>专属技术支持</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-center">
|
||||
<span class="h4 text-dark fw-bold">定制报价</span>
|
||||
<span class="text-muted d-block">根据需求定制</span>
|
||||
<a href="contact.html" class="btn btn-success mt-3">获取定制方案</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA区域 -->
|
||||
<section class="py-5 bg-primary text-white">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h3 class="fw-bold mb-3">寻找适合您的解决方案？</h3>
|
||||
<p class="mb-4">我们的专家团队将为您提供个性化的咨询和方案定制服务</p>
|
||||
</div>
|
||||
<div class="col-lg-4 text-lg-end">
|
||||
<a href="contact.html" class="btn btn-light btn-lg px-4">立即咨询</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<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-light">
|
||||
专业的数字化采购管理解决方案，
|
||||
为养殖企业提供全流程的采购数字化服务。
|
||||
</p>
|
||||
</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="product.html" class="text-muted text-decoration-none">产品介绍</a></li>
|
||||
<li><a href="solutions.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">资源</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="cases.html" class="text-muted text-decoration-none">客户案例</a></li>
|
||||
<li><a href="news.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">公司</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="about.html" class="text-muted text-decoration-none">关于我们</a></li>
|
||||
<li><a href="contact.html" 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-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">联系信息</h6>
|
||||
<div class="text-muted">
|
||||
<p class="mb-1"><i class="fas fa-phone me-2"></i> 400-123-4567</p>
|
||||
<p class="mb-1"><i class="fas fa-envelope me-2"></i> info@niumall.com</p>
|
||||
<p class="mb-0"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-muted mb-0">© 2024 活牛采购智能数字化系统. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<div class="d-flex justify-content-md-end">
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weixin fa-lg"></i></a>
|
||||
<a href="#" class="text-muted me-3"><i class="fab fa-weibo fa-lg"></i></a>
|
||||
<a href="#" class="text-muted"><i class="fab fa-linkedin fa-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<script>
|
||||
// 初始化AOS动画
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true,
|
||||
offset: 100
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user