1 Star 0 Fork 0

Deshun / 鸿运通官网

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index.html 11.83 KB
一键复制 编辑 原始数据 按行查看 历史
Deshun 提交于 2018-01-18 19:13 . Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鸿运通官网</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1" data-offset="100">
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/images/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"> 首页 </a></li>
<li><a href="#part1">关于我们</a></li>
<li><a href="#part2">我们的服务</a></li>
<li><a href="#part3">功能介绍</a></li>
<li><a href="#part5">联系我们</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<main data-offset="200">
<div class="swiper-container visible-xs-block">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/b_1.png"/></div>
<div class="swiper-slide"><img src="assets/images/b_2.png"/></div>
<div class="swiper-slide"><img src="assets/images/b_3.png"/></div>
</div>
</div>
<div class="swiper-container hidden-xs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/banner_1.png"/></div>
<div class="swiper-slide"><img src="assets/images/banner_2.png"/></div>
<div class="swiper-slide"><img src="assets/images/banner_3.png"/></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!--<img class="visible-xs-block" src="鸿运通/1/b_1.png" width="100%"/>-->
<section>
<div class="part" id="part1">
<div class="partInner row">
<div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-offset-0">
<img src="assets/images/product.png" width="100%"/>
</div>
<div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-offset-0 partText">
<div class="title">
<p class="titUp">关于我们</p>
<p class="titDown">ABOUT US</p>
</div>
<div class="textIn">
<p>
鸿讯通软件是信华网络工作室出品,主要为广大行业内人士提供在线交流的平台,实现文字、语音、视频等一对一、一对多的在线沟通平台,本平台集合广大行业内专家、学者包括:金融类、股票类、期货类、投资类等行业人士,本平台为免费试用,本平台提供在线群聊,可创建群聊,用户可登陆平台搜索群号或者群名称直接加入,广告合作请联系在线客服。
</p>
</div>
</div>
</div>
</div>
<div class="part" id="part2">
<div class="partbg">
<div class="partInner">
<div class=" partText">
<div class="title">
<p class="titUp">为什么选择我们</p>
<p class="titDown">OUR SERVICE</p>
</div>
<div class="service row">
<div class="col-sm-4">
<div class="icon-box">
<div class="s-icon">
<img src="assets/images/ico_1.png"/>
</div>
<span>在线沟通</span>
</div>
</div>
<div class="col-sm-4">
<div class="icon-box center-block">
<div class="s-icon">
<img src="assets/images/ico_2.png"/>
</div>
<span>免费试用</span>
</div>
</div>
<div class="col-sm-4 clearfix">
<div class="icon-box pull-right">
<div class="s-icon">
<img src="assets/images/ico_3.png"/>
</div>
<span>专家云集</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="part" id="part3">
<div class="partInner">
<div class="partText">
<div class="title">
<p class="titUp">功能全面</p>
<p class="titDown">FUNCTION</p>
</div>
<div class="function row">
<div class="col-sm-4">
<p class="funTitle">即时消息/私聊</p>
<p class="funText">可通过好友列表在线单聊,基础功能,文字、图片、语音、文件等,满足用户单聊之间的及时沟通。</p>
<p class="funTitle marTop">讨论组/群组</p>
<p class="funText">用户可根据需要建立群租讨论组,创建方式简便,以便于满足多人的畅聊沟通。</p>
</div>
<div class="col-sm-4 hidden-xs">
<div class="funico-box center-block">
<img src="assets/images/funico_1.png" height="125" width="125"
style="position: absolute;top: -5px;left: 64px;">
<img src="assets/images/funico_2.png" height="125" width="125"
style="position: absolute;top: 68px;left: -2px;">
<img src="assets/images/funico_3.png" height="125" width="125"
style="position: absolute;top: 66px;left: 133px;">
<img src="assets/images/funico_4.png" height="125" width="125"
style="position: absolute;top: 138px;left: 66px;">
</div>
</div>
<div class="col-sm-4">
<p class="funTitle">语音通话交流</p>
<p class="funText">既然是聊天,语音功能自然少不了,可实现语音录制发送,在线语音聊天,有效提升传达消息的速度。</p>
<p class="funTitle marTop">视频会议沟通</p>
<p class="funText">支持在线面对面的视频功能,可一对多进行视频沟通,丰富日常生活乐趣。</p>
</div>
</div>
</div>
</div>
</div>
<div id="part4">
<div style="padding-top: 50px;">
<p>我们为您提供更方便的在线沟通平台</p>
<p>
<small>24小时服务热线:000000000</small>
</p>
</div>
</div>
<div class="part" id="part5">
<div class="partInner">
<div class="partText">
<div class="title">
<p class="titUp">联系我们</p>
<p class="titDown">CONTACT US</p>
</div>
<div class="contact row">
<div class="col-sm-6 conText">
<p><img class="c-icon" src="assets/images/tel.png"/>0531-00000000</p>
<p><img class="c-icon" src="assets/images/address.png"/>山东省济南市高新区</p>
<p><img class="c-icon" src="assets/images/mail.png"/>123456@qq.com</p>
</div>
<div class="col-sm-6 contMap">
<div id="wrap" class="my-map">
<div id="mapContainer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<ul>
<li>友情链接:</li>
<li><a href="">鸿运通官网</a></li>
<li><a href="">公司介绍</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
<p>Copyright © 2013-2018 鸿运通. All Rights Reserved. </p>
</footer>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<!--GaodeMap-->
<script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
<script src="assets/js/gaodemap.js"></script>
<script>
$(function () {
$('body').scrollspy({target: '#bs-example-navbar-collapse-1'})//bs滚动监听
$('.navbar-nav>li').click(function () {
$('.navbar-nav>li').removeClass("active")
$(this).addClass("active");
$('.navbar-collapse').removeClass("in");
})
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//自动切换
loop: true,//循环
direction: 'horizontal',//横向切换
// grabCursor : true,//鼠标手型
setWrapperSize: true,//flex布局
autoHeight: true, //高度随内容变化
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
uniqueNavElements: false,
})
$(window).scroll(function () {
// var h = $(window).height()*0.98;//浏览器窗口的高度
var hh = $(window).scrollTop();//滚动条位置
if (hh >= 80) {//滚动条位置-窗口高度>=0表示已经置底了
$('header').addClass("navbar-fixed-top");
} else {
$('header').removeClass("navbar-fixed-top");
$('.navbar-nav>li:first-child').addClass("active");
}
})
})
</script>
</body>
</html>
HTML
1
https://gitee.com/deshun/HYT.git
git@gitee.com:deshun/HYT.git
deshun
HYT
鸿运通官网
master

搜索帮助