862 lines
56 KiB
HTML
862 lines
56 KiB
HTML
<!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="联系我们,产品演示,报价咨询,技术支持,客服热线,在线咨询,免费试用,预约演示">
|
||
|
||
<!-- 结构化数据 -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "活牛采购智能数字化系统",
|
||
"description": "联系活牛采购智能数字化系统团队，获取产品演示、报价咨询和技术支持，我们为您提供专业的数字化采购解决方案。",
|
||
"url": "https://www.niumall.com",
|
||
"logo": "https://www.niumall.com/images/logo.png",
|
||
"contactPoint": {
|
||
"@type": "ContactPoint",
|
||
"telephone": "400-xxx-xxxx",
|
||
"contactType": "customer service"
|
||
},
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"streetAddress": "xxx街道xxx号",
|
||
"addressLocality": "北京市",
|
||
"postalCode": "100000",
|
||
"addressCountry": "CN"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- 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 d-flex align-items-center" href="index.html">
|
||
<div class="logo-container me-2">
|
||
<i class="fas fa-cow text-primary fs-2"></i>
|
||
</div>
|
||
<div class="brand-text">
|
||
<div class="brand-name fw-bold">NiuMall</div>
|
||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||
</div>
|
||
</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" href="docs.html">开发者文档</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="partners.html">合作伙伴</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="support.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>
|
||
|
||
<!-- 面包屑导航 -->
|
||
<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="py-5">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<h1 class="display-5 fw-bold mb-4">联系我们</h1>
|
||
<p class="lead">我们随时准备为您提供帮助，欢迎通过以下方式联系我们</p>
|
||
<p>无论您是想了解产品信息、申请试用、预约演示还是获取技术支持，我们的专业团队都将竭诚为您服务。</p>
|
||
<div class="mt-4">
|
||
<a href="#contact-form" class="btn btn-primary btn-lg me-3">
|
||
<i class="fas fa-envelope me-2"></i>在线留言
|
||
</a>
|
||
<a href="#online-service" class="btn btn-outline-primary btn-lg">
|
||
<i class="fas fa-comments me-2"></i>在线客服
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<div class="bg-primary bg-opacity-10 p-3 rounded text-center h-100">
|
||
<div class="stat-number display-6 text-primary mb-2 count-up" data-target="1000">0</div>
|
||
<div class="stat-label">满意客户</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="bg-success bg-opacity-10 p-3 rounded text-center h-100">
|
||
<div class="stat-number display-6 text-success mb-2 count-up" data-target="98" data-suffix="%">0%</div>
|
||
<div class="stat-label">响应及时率</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="bg-warning bg-opacity-10 p-3 rounded text-center h-100">
|
||
<div class="stat-number display-6 text-warning mb-2 count-up" data-target="24">0</div>
|
||
<div class="stat-label">小时支持</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="bg-info bg-opacity-10 p-3 rounded text-center h-100">
|
||
<div class="stat-number display-6 text-info mb-2 count-up" data-target="50">0</div>
|
||
<div class="stat-label">专业顾问</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section class="py-5 bg-light">
|
||
<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-4">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||
<i class="fas fa-map-marker-alt"></i>
|
||
</div>
|
||
<h5 class="card-title">公司地址</h5>
|
||
<p class="card-text">北京市朝阳区xxx街道xxx号<br>邮编：100000</p>
|
||
<a href="#map" class="btn btn-outline-primary btn-sm">查看地图</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系电话 -->
|
||
<div class="col-md-4">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||
<i class="fas fa-phone-alt"></i>
|
||
</div>
|
||
<h5 class="card-title">联系电话</h5>
|
||
<p class="card-text">客服热线：400-xxx-xxxx<br>技术支持：010-xxxx-xxxx<br>商务合作：010-xxxx-xxxx</p>
|
||
<a href="tel:400xxx xxxx" class="btn btn-outline-success btn-sm">立即拨打</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 电子邮箱 -->
|
||
<div class="col-md-4">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||
<i class="fas fa-envelope"></i>
|
||
</div>
|
||
<h5 class="card-title">电子邮箱</h5>
|
||
<p class="card-text">商务咨询：info@example.com<br>技术支持：support@example.com<br>媒体合作：media@example.com</p>
|
||
<a href="mailto:info@example.com" class="btn btn-outline-info btn-sm">发送邮件</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 在线客服系统 -->
|
||
<section id="online-service" class="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 justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h5 class="card-title mb-0">在线客服系统</h5>
|
||
<div class="d-flex align-items-center">
|
||
<div class="bg-success rounded-circle me-2" style="width: 10px; height: 10px;"></div>
|
||
<small class="text-muted">在线</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-container bg-light p-3 rounded mb-3" style="height: 300px; overflow-y: auto;">
|
||
<div class="chat-message mb-3">
|
||
<div class="d-flex">
|
||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px; flex-shrink: 0;">
|
||
<i class="fas fa-robot"></i>
|
||
</div>
|
||
<div class="bg-white p-3 rounded">
|
||
<p class="mb-0">您好！欢迎联系活牛采购智能数字化系统客服。请问有什么可以帮助您的吗？</p>
|
||
<small class="text-muted">09:00</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-message mb-3">
|
||
<div class="d-flex justify-content-end">
|
||
<div class="bg-primary text-white p-3 rounded me-2">
|
||
<p class="mb-0">我想了解产品的价格和功能</p>
|
||
<small class="text-white-50">09:01</small>
|
||
</div>
|
||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 30px; height: 30px; flex-shrink: 0;">
|
||
<i class="fas fa-user"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-message mb-3">
|
||
<div class="d-flex">
|
||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px; flex-shrink: 0;">
|
||
<i class="fas fa-robot"></i>
|
||
</div>
|
||
<div class="bg-white p-3 rounded">
|
||
<p class="mb-0">我们的产品提供多种版本，包括基础版、标准版和企业版，价格根据用户规模和功能需求而定。您可以先申请免费试用，体验产品功能后再做决定。</p>
|
||
<small class="text-muted">09:02</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" placeholder="输入您的问题...">
|
||
<button class="btn btn-primary" type="button">
|
||
<i class="fas fa-paper-plane"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<small class="text-muted">工作时间：周一至周五 9:00-18:00</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系表单 -->
|
||
<section id="contact-form" class="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">
|
||
<div class="col-lg-8 mx-auto">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body">
|
||
<ul class="nav nav-tabs mb-4" id="contactTab" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" id="message-tab" data-bs-toggle="tab" data-bs-target="#message" type="button" role="tab">在线留言</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="demo-tab" data-bs-toggle="tab" data-bs-target="#demo" type="button" role="tab">预约演示</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="trial-tab" data-bs-toggle="tab" data-bs-target="#trial" type="button" role="tab">免费试用</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="download-tab" data-bs-toggle="tab" data-bs-target="#download" type="button" role="tab">资料下载</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content" id="contactTabContent">
|
||
<!-- 在线留言 -->
|
||
<div class="tab-pane fade show active" id="message" role="tabpanel">
|
||
<form id="messageForm" class="needs-validation" novalidate>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="name" required>
|
||
<div class="invalid-feedback">请输入您的姓名</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="company" class="form-label">公司名称</label>
|
||
<input type="text" class="form-control" id="company">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="phone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||
<input type="tel" class="form-control" id="phone" required>
|
||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="email" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||
<input type="email" class="form-control" id="email" required>
|
||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||
<select class="form-select" id="subject" required>
|
||
<option value="">请选择</option>
|
||
<option value="product">产品咨询</option>
|
||
<option value="demo">产品演示</option>
|
||
<option value="price">报价咨询</option>
|
||
<option value="support">技术支持</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
<div class="invalid-feedback">请选择咨询主题</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="messageContent" class="form-label">留言内容 <span class="text-danger">*</span></label>
|
||
<textarea class="form-control" id="messageContent" rows="5" required></textarea>
|
||
<div class="invalid-feedback">请输入留言内容</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<button class="btn btn-primary btn-lg" type="submit">
|
||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||
提交留言
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 预约演示 -->
|
||
<div class="tab-pane fade" id="demo" role="tabpanel">
|
||
<form id="demoForm" class="needs-validation" novalidate>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="demoName" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="demoName" required>
|
||
<div class="invalid-feedback">请输入您的姓名</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="demoCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="demoCompany" required>
|
||
<div class="invalid-feedback">请输入公司名称</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="demoPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||
<input type="tel" class="form-control" id="demoPhone" required>
|
||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="demoEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||
<input type="email" class="form-control" id="demoEmail" required>
|
||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="demoDate" class="form-label">预约日期 <span class="text-danger">*</span></label>
|
||
<input type="date" class="form-control" id="demoDate" required>
|
||
<div class="invalid-feedback">请选择预约日期</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="demoTime" class="form-label">预约时间 <span class="text-danger">*</span></label>
|
||
<select class="form-select" id="demoTime" required>
|
||
<option value="">请选择</option>
|
||
<option value="09:00-10:00">09:00-10:00</option>
|
||
<option value="10:00-11:00">10:00-11:00</option>
|
||
<option value="11:00-12:00">11:00-12:00</option>
|
||
<option value="14:00-15:00">14:00-15:00</option>
|
||
<option value="15:00-16:00">15:00-16:00</option>
|
||
<option value="16:00-17:00">16:00-17:00</option>
|
||
</select>
|
||
<div class="invalid-feedback">请选择预约时间</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="demoParticipants" class="form-label">参会人员及职位</label>
|
||
<textarea class="form-control" id="demoParticipants" rows="3" placeholder="请列出参会人员姓名及职位"></textarea>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="demoRequirements" class="form-label">特殊需求</label>
|
||
<textarea class="form-control" id="demoRequirements" rows="3" placeholder="如有特殊演示需求，请在此说明"></textarea>
|
||
</div>
|
||
<div class="col-12">
|
||
<button class="btn btn-primary btn-lg" type="submit">
|
||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||
预约演示
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 免费试用 -->
|
||
<div class="tab-pane fade" id="trial" role="tabpanel">
|
||
<form id="trialForm" class="needs-validation" novalidate>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="trialName" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="trialName" required>
|
||
<div class="invalid-feedback">请输入您的姓名</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="trialCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="trialCompany" required>
|
||
<div class="invalid-feedback">请输入公司名称</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="trialPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||
<input type="tel" class="form-control" id="trialPhone" required>
|
||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="trialEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||
<input type="email" class="form-control" id="trialEmail" required>
|
||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="trialScale" class="form-label">企业规模 <span class="text-danger">*</span></label>
|
||
<select class="form-select" id="trialScale" required>
|
||
<option value="">请选择</option>
|
||
<option value="small">小型企业（年采购量<200头）</option>
|
||
<option value="medium">中型企业（年采购量200-1000头）</option>
|
||
<option value="large">大型企业（年采购量1000-5000头）</option>
|
||
<option value="group">集团公司（年采购量>5000头）</option>
|
||
</select>
|
||
<div class="invalid-feedback">请选择企业规模</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="trialRole" class="form-label">您的角色 <span class="text-danger">*</span></label>
|
||
<select class="form-select" id="trialRole" required>
|
||
<option value="">请选择</option>
|
||
<option value="purchaser">采购人员</option>
|
||
<option value="manager">管理人员</option>
|
||
<option value="it">IT人员</option>
|
||
<option value="owner">企业主</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
<div class="invalid-feedback">请选择您的角色</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="trialRequirements" class="form-label">试用需求说明</label>
|
||
<textarea class="form-control" id="trialRequirements" rows="3" placeholder="请说明您希望重点体验的功能模块"></textarea>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check mb-3">
|
||
<input class="form-check-input" type="checkbox" id="agreeTerms" required>
|
||
<label class="form-check-label" for="agreeTerms">
|
||
我已阅读并同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a> <span class="text-danger">*</span>
|
||
</label>
|
||
<div class="invalid-feedback">请同意服务条款和隐私政策</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg" type="submit">
|
||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||
申请免费试用
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 资料下载 -->
|
||
<div class="tab-pane fade" id="download" role="tabpanel">
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||
<i class="fas fa-book"></i>
|
||
</div>
|
||
<h5 class="card-title">产品手册</h5>
|
||
<p class="card-text text-muted">详细的产品功能介绍和使用指南</p>
|
||
<button class="btn btn-outline-primary download-btn" data-file="product-manual">
|
||
<i class="fas fa-download me-2"></i>下载PDF
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||
<i class="fas fa-file-alt"></i>
|
||
</div>
|
||
<h5 class="card-title">技术白皮书</h5>
|
||
<p class="card-text text-muted">系统架构和技术实现方案详解</p>
|
||
<button class="btn btn-outline-success download-btn" data-file="white-paper">
|
||
<i class="fas fa-download me-2"></i>下载PDF
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-warning bg-opacity-10 text-warning mb-4 mx-auto">
|
||
<i class="fas fa-chart-bar"></i>
|
||
</div>
|
||
<h5 class="card-title">案例研究报告</h5>
|
||
<p class="card-text text-muted">典型客户成功案例深度分析</p>
|
||
<button class="btn btn-outline-warning download-btn" data-file="case-study">
|
||
<i class="fas fa-download me-2"></i>下载PDF
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body text-center">
|
||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||
<i class="fas fa-video"></i>
|
||
</div>
|
||
<h5 class="card-title">产品演示视频</h5>
|
||
<p class="card-text text-muted">系统功能演示和操作指南视频</p>
|
||
<button class="btn btn-outline-info download-btn" data-file="demo-video">
|
||
<i class="fas fa-download me-2"></i>下载视频
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 资料下载表单 -->
|
||
<div class="card border-0 shadow-sm mt-4">
|
||
<div class="card-body">
|
||
<h5 class="card-title mb-4">填写信息获取资料</h5>
|
||
<form id="downloadForm" class="needs-validation" novalidate>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="downloadName" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="downloadName" required>
|
||
<div class="invalid-feedback">请输入您的姓名</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="downloadCompany" class="form-label">公司名称 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="downloadCompany" required>
|
||
<div class="invalid-feedback">请输入公司名称</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="downloadPhone" class="form-label">联系电话 <span class="text-danger">*</span></label>
|
||
<input type="tel" class="form-control" id="downloadPhone" required>
|
||
<div class="invalid-feedback">请输入您的联系电话</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="downloadEmail" class="form-label">电子邮箱 <span class="text-danger">*</span></label>
|
||
<input type="email" class="form-control" id="downloadEmail" required>
|
||
<div class="invalid-feedback">请输入有效的电子邮箱</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<label for="downloadInterests" class="form-label">感兴趣的资料 <span class="text-danger">*</span></label>
|
||
<select class="form-select" id="downloadInterests" multiple required>
|
||
<option value="product-manual">产品手册</option>
|
||
<option value="white-paper">技术白皮书</option>
|
||
<option value="case-study">案例研究报告</option>
|
||
<option value="demo-video">产品演示视频</option>
|
||
</select>
|
||
<div class="invalid-feedback">请选择您感兴趣的资料</div>
|
||
<small class="text-muted">按住Ctrl键可多选</small>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="form-check mb-3">
|
||
<input class="form-check-input" type="checkbox" id="downloadAgree" required>
|
||
<label class="form-check-label" for="downloadAgree">
|
||
我已阅读并同意 <a href="#" class="text-primary">服务条款</a> 和 <a href="#" class="text-primary">隐私政策</a> <span class="text-danger">*</span>
|
||
</label>
|
||
<div class="invalid-feedback">请同意服务条款和隐私政策</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg" type="submit">
|
||
<span class="loading-spinner d-none me-2" role="status" aria-hidden="true"></span>
|
||
获取资料
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 办公地图 -->
|
||
<section id="map" class="py-5 bg-light">
|
||
<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">
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title mb-4">公司位置</h5>
|
||
<div class="ratio ratio-16x9">
|
||
<iframe src="https://map.baidu.com/" title="公司位置" loading="lazy"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title mb-4">交通信息</h5>
|
||
<div class="mb-4">
|
||
<h6 class="text-primary"><i class="fas fa-subway me-2"></i>地铁</h6>
|
||
<p class="mb-0">地铁10号线，xxx站下车，A出口步行500米</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<h6 class="text-primary"><i class="fas fa-bus me-2"></i>公交</h6>
|
||
<p class="mb-0">xxx路、xxx路、xxx路公交，xxx站下车</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<h6 class="text-primary"><i class="fas fa-car me-2"></i>自驾</h6>
|
||
<p class="mb-0">导航至北京市朝阳区xxx街道xxx号，附近有停车场</p>
|
||
</div>
|
||
<div>
|
||
<h6 class="text-primary"><i class="fas fa-clock me-2"></i>工作时间</h6>
|
||
<p class="mb-0">周一至周五：9:00 - 18:00</p>
|
||
<p class="mb-0">周六至周日：10:00 - 16:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="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">
|
||
<div class="col-lg-8 mx-auto">
|
||
<div class="accordion" id="faqAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingOne">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
|
||
如何获取产品演示？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
您可以通过上方的"预约演示"选项卡填写预约表单，我们的销售顾问将在24小时内与您联系并安排演示。您也可以直接致电我们的客服热线400-xxx-xxxx，或通过在线客服系统咨询。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingTwo">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
|
||
系统支持哪些设备访问？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们的系统支持PC端和移动端访问，包括Windows、Mac、iOS、Android等主流操作系统。同时我们也提供微信小程序版本，方便您随时处理业务。所有版本数据实时同步，确保您在任何设备上都能获得一致的使用体验。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingThree">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
|
||
如何进行系统部署？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们提供云部署和本地部署两种方式。云部署由我们负责运维，您只需通过浏览器访问即可；本地部署需要您的IT团队配合，我们提供全程技术支持。无论选择哪种部署方式，我们都提供完整的部署文档和技术支持。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingFour">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
|
||
系统安全性如何保障？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们采用多层安全防护机制，包括数据加密传输、访问权限控制、定期安全审计等。同时通过了ISO27001信息安全管理体系认证，确保您的数据安全。所有数据均存储在阿里云服务器上，具备高可用性和灾备能力。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingFive">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
|
||
免费试用期是多长时间？
|
||
</button>
|
||
</h2>
|
||
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
我们提供14天的免费试用期，试用期间您可以体验系统的所有功能。试用期结束后，如果您需要继续使用，我们的销售团队会与您联系讨论后续的合作方案。试用期间有任何问题，我们的技术支持团队将全程为您服务。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||
<a href="#trial" class="btn btn-light btn-lg">
|
||
<i class="fas fa-rocket me-2"></i>免费试用
|
||
</a>
|
||
<a href="#demo" class="btn btn-outline-light btn-lg">
|
||
<i class="fas fa-play-circle me-2"></i>预约演示
|
||
</a>
|
||
</div>
|
||
</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> 武汉市东湖高新区光谷软件园F2栋</li>
|
||
<li class="mb-2"><i class="fas fa-phone me-2"></i> 19971988959</li>
|
||
<li class="mb-2"><i class="fas fa-envelope me-2"></i> niumall@aiotagro.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>
|
||
|
||
<script>
|
||
// 初始化AOS动画
|
||
AOS.init({
|
||
duration: 800,
|
||
once: true
|
||
});
|
||
|
||
// 联系表单切换时滚动到表单顶部
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
|
||
|
||
tabButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
// 延迟滚动，确保tab切换完成
|
||
setTimeout(() => {
|
||
const formSection = document.getElementById('contact-form');
|
||
formSection.scrollIntoView({ behavior: 'smooth' });
|
||
}, 100);
|
||
});
|
||
});
|
||
|
||
// 资料下载按钮事件
|
||
const downloadButtons = document.querySelectorAll('.download-btn');
|
||
downloadButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const file = this.getAttribute('data-file');
|
||
alert(`资料"${file}"已发送至您的邮箱，请注意查收。`);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |