226 lines
9.0 KiB
HTML
226 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>联系我们 - 云南智慧牛产业平台</title>
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="css/animate.min.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<!--[if lt IE 9]>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
<style>
|
||
.contact-header {
|
||
background-image: url('images/contact-header.jpg');
|
||
background-size: cover;
|
||
background-position: center;
|
||
color: white;
|
||
padding: 120px 0 80px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.contact-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.6);
|
||
}
|
||
.contact-header .container {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.contact-card {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 12px;
|
||
margin-bottom: 30px;
|
||
transition: all 0.3s;
|
||
background: #fff;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||
}
|
||
.contact-card:hover {
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
transform: translateY(-10px);
|
||
border-color: #409EFF;
|
||
}
|
||
.contact-icon {
|
||
font-size: 48px;
|
||
color: #409EFF;
|
||
margin-bottom: 25px;
|
||
}
|
||
.map-container {
|
||
height: 450px;
|
||
background-color: #f5f7fa;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #909399;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
.form-control {
|
||
height: 46px;
|
||
border-radius: 4px;
|
||
box-shadow: none;
|
||
border-color: #dcdfe6;
|
||
}
|
||
.form-control:focus {
|
||
border-color: #409EFF;
|
||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||
}
|
||
textarea.form-control {
|
||
height: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-default navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
|
||
<span class="sr-only">切换导航</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="index.html">云南智慧牛产业平台</a>
|
||
</div>
|
||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<li><a href="index.html">首页</a></li>
|
||
<li><a href="solutions.html">解决方案</a></li>
|
||
<li><a href="news.html">新闻中心</a></li>
|
||
<li><a href="about.html">关于我们</a></li>
|
||
<li><a href="help.html">帮助中心</a></li>
|
||
<li class="active"><a href="contact.html">联系我们</a></li>
|
||
<li><a href="#" class="btn btn-primary navbar-btn" style="margin-left: 10px;">登录 / 注册</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="contact-header">
|
||
<div class="container">
|
||
<h1 class="animated fadeInDown">联系我们</h1>
|
||
<p class="lead animated fadeInUp delay-1s">无论是业务咨询还是技术支持，我们随时为您服务</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container" style="margin-top: 50px; margin-bottom: 80px;">
|
||
<div class="row animated fadeInUp">
|
||
<div class="col-md-4">
|
||
<div class="contact-card">
|
||
<i class="glyphicon glyphicon-map-marker contact-icon"></i>
|
||
<h3>公司地址</h3>
|
||
<p>云南省昆明市高新技术产业开发区科高路999号</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="contact-card">
|
||
<i class="glyphicon glyphicon-earphone contact-icon"></i>
|
||
<h3>联系电话</h3>
|
||
<p>400-888-8888</p>
|
||
<p>0871-12345678</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="contact-card">
|
||
<i class="glyphicon glyphicon-envelope contact-icon"></i>
|
||
<h3>电子邮箱</h3>
|
||
<p>contact@caiyunniu.com</p>
|
||
<p>support@caiyunniu.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" style="margin-top: 40px;">
|
||
<div class="col-md-6 wow fadeInLeft">
|
||
<h2>在线留言</h2>
|
||
<div class="section-divider" style="margin-left: 0;"></div>
|
||
<p class="text-muted">请填写以下表单，我们的工作人员会在24小时内与您联系。</p>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="name">您的姓名</label>
|
||
<input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">联系电话</label>
|
||
<input type="tel" class="form-control" id="phone" placeholder="请输入您的手机号码">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">电子邮箱</label>
|
||
<input type="email" class="form-control" id="email" placeholder="请输入您的电子邮箱">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">留言内容</label>
|
||
<textarea class="form-control" id="message" rows="5" placeholder="请详细描述您的需求或建议"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary btn-lg">提交留言</button>
|
||
</form>
|
||
</div>
|
||
<div class="col-md-6 wow fadeInRight">
|
||
<div class="map-container">
|
||
<img src="https://via.placeholder.com/600x450.png?text=Map+Placeholder" alt="Map" style="width: 100%; height: 100%; object-fit: cover;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<h3>联系我们</h3>
|
||
<p>电话：400-888-8888</p>
|
||
<p>邮箱：contact@caiyunniu.com</p>
|
||
<p>地址：云南省昆明市高新技术产业开发区</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h3>快速链接</h3>
|
||
<ul class="list-unstyled">
|
||
<li><a href="about.html">关于平台</a></li>
|
||
<li><a href="solutions.html">核心服务</a></li>
|
||
<li><a href="help.html">帮助中心</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h3>关注我们</h3>
|
||
<p>微信公众号：云南智慧牛</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom text-center">
|
||
<p>© 2025 云南智慧牛产业平台 版权所有</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||
<script src="js/wow.min.js"></script>
|
||
<script>
|
||
new WOW().init();
|
||
|
||
// Navbar Scroll Effect
|
||
$(document).ready(function(){
|
||
$(window).scroll(function() {
|
||
if ($(this).scrollTop() > 50) {
|
||
$('.navbar-default').addClass('navbar-scrolled');
|
||
} else {
|
||
$('.navbar-default').removeClass('navbar-scrolled');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |