Skip to content

html / bdideal

Go to a project
Commit cc27f0cb by hank
Options

优化

parent 8c577267
Showing with 415 additions and 701 deletions
html/products.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="keywords" content="数字理想 ，可视化，数字展厅 ，智慧城市" />
<meta name="keywords" content="数字理想 ，可视化，数字展厅 ，智慧城市" /> <meta name="description" content="数字理想 ，可视化，数字展厅 ，智慧城市" />
<meta name="description" content="数字理想 ，可视化，数字展厅 ，智慧城市" /> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>我们的产品</title>
<title>我们的产品</title> <link rel="icon" href="/img/favicon.ico" />
<link rel="icon" href="/img/favicon.ico" /> <!-- Bootstrap -->
<!-- Bootstrap --> <link rel="stylesheet" href="../style/common.css" />
<link rel="stylesheet" href="../style/common.css" /> <link
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" /> href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css" /> --> rel="stylesheet"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"> />
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css" /> -->
<link rel="stylesheet" href="../style/animate.min.css" /> <link
rel="stylesheet"
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> />
<!--[if lt IE 9]>
<link rel="stylesheet" href="../style/animate.min.css" />
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]--> <![endif]-->
<link rel="stylesheet/less" href="../style/products.less" /> <link rel="stylesheet/less" href="../style/products.less" />
<script src="../js/less.min.js"></script> <script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> <script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<script src="../js/swiper.animate1.0.3.min.js"></script> <script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script> <script src="../js/tools.js"></script>
</head> </head>
<body> <body>
<div class="main-container"> <div class="main-container">
<div class="navbar-container"> <div class="navbar-container">
<div class="navbar navbar-inverse "> <div class="navbar navbar-inverse ">
<!-- data-spy="affix" data-offset-top="1" --> <!-- data-spy="affix" data-offset-top="1" -->
<nav role="navigation"> <nav role="navigation">
<div class="container"> <div class="container">
<div class="nav navbar-header"> <div class="nav navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" <button
aria-label="Expand and Collapse Menu"> type="button"
<span class="icon-bar"></span> class="navbar-toggle"
<span class="icon-bar"></span> data-toggle="collapse"
<span class="icon-bar"></span> data-target=".navbar-collapse"
</button> aria-label="Expand and Collapse Menu"
<a class="navbar-brand" href="index.html"><img src="../img/LOGOsmall2.png" alt="" /></a> >
</div> <span class="icon-bar"></span>
<div class="navbar-collapse collapse"> <span class="icon-bar"></span>
<ul class="nav navbar-nav navbar-right"> <span class="icon-bar"></span>
<li><a id="nav-index" href="./index.html">首页</a></li> </button>
<li><a id="nav-about" href="./about.html">关于我们</a></li> <a class="navbar-brand" href="index.html"
<li class="link-active"> ><img src="../img/LOGOsmall2.png" alt=""
<a id="nav-products" href="./products.html">我们的产品</a> /></a>
</li> </div>
<li> <div class="navbar-collapse collapse">
<a id="nav-solution" href="./solution.html">解决方案</a> <ul class="nav navbar-nav navbar-right">
</li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li> <li><a id="nav-about" href="./about.html">关于我们</a></li>
<a href="./dynamic.html" id="nav-dynamic">行业动态</a> <li class="link-active">
</li> <a id="nav-products" href="./products.html">我们的产品</a>
<li> </li>
<a href="./recruit.html" id="nav-recruit">招贤纳士</a> <li>
</li> <a id="nav-solution" href="./solution.html">解决方案</a>
</ul> </li>
<li>
<a href="./dynamic.html" id="nav-dynamic">行业动态</a>
</li>
<li>
<a href="./recruit.html" id="nav-recruit">招贤纳士</a>
</li>
</ul>
</div>
</div> </div>
</div> </nav>
</nav> </div>
</div> </div>
</div> <div
<div id="banner" class="" style="height: 552px; id="banner"
class=""
style="height: 552px;
visibility: visible; visibility: visible;
animation-delay: 0.3s; animation-delay: 0.3s;
animation-duration: 0.3s;"> animation-duration: 0.3s;"
>
<div class="container relative"> <div class="container relative">
<div class="word-box"> <div class="word-box">
<p class="line1"></p> <p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;"> <p
顶尖的数据分析能力 class="btworden animated bounceInRight"
</p> style="animation-delay: 1s;"
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;"> >
智慧城市可视化管控平台 顶尖的数据分析能力
</p>
<p class="conword animated bounceInRight" style="animation-delay: 02s;">
<li>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
</li>
<li>
· 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。 ·
完善 API 接口，实现数据实时同步，动态展示。
</li>
</p>
<p class="line2"></p>
</div>
</div>
<img src="../img/bg4_small.png" alt="" class="qiu">
</div>
</div>
<div class="main2-container">
<div class="our-products">
<div class="container relative our">
<div class="word-right">
<div class="title" data="Ability and Service">能力与服务</div>
</div>
<div class="views-content">
<div class="one animated fadeInUp" style="animation-delay: 0.2s;">
<p>
智慧城市可视化管控平台，可以实现智慧城市各种信息的互联互通与数据共享，带来城市管理方式、治理模式、资源配置等方面的变革，她与用户直接对话、帮助用户完成决策的载体工具。从而对包括应急指挥、城市管理、公共安全、环境保护、智能交通、基础设施等领域进行管理决策支持，进而提升城市综合管理水平。
</p> </p>
<blockquote> <p
1、城市全景精细呈现 class="btword animated bounceInRight "
<br /> style="animation-delay: 0.7s;"
>
2、多部门、多类型数据融合，全面互联互通 智慧城市可视化管控平台
<br /> </p>
3、强大的统计分析 <p
<br /> class="conword animated bounceInRight"
4、真正与数据对话——丰富的交互查询手段 style="animation-delay: 02s;"
<br /> >
5、可视化部署、指挥调度 <li>
</blockquote> · 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
</div> 完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
</div> </li>
<div class="earth"> <li>
<img class="earth-bg" src="../img/earth2.png" alt="" /> · 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。 ·
<!-- animated rotateIn infinite --> 完善 API 接口，实现数据实时同步，动态展示。
<img src="../img/earthselect.png" class="select " alt="" /> </li>
<div class="ctr-container"> </p>
<div class="left-btn ctr-btn"></div> <p class="line2"></p>
<div class="right-btn ctr-btn"></div>
</div> </div>
</div> </div>
<img src="../img/bg4_small.png" alt="" class="qiu" />
</div> </div>
</div> </div>
<div class="solution">
<div class="container"> <div class="main2-container">
<div class="left-menu"> <div class="our-products">
<div class="menu-title"> <div class="container relative our">
<img src="../img/titlte2.png" alt="" /> <div class="word-right">
<div class="title" data="Ability and Service">能力与服务</div>
</div> </div>
<div class="menu-list"> <div class="views-content">
<div class="menu-item active">大数据可视化平台</div> <div class="one animated fadeInUp" style="animation-delay: 0.2s;">
<div class="menu-item">数字展厅</div> <p>
<div class="menu-item">数字互动解决方案</div> 智慧城市可视化管控平台，可以实现智慧城市各种信息的互联互通与数据共享，带来城市管理方式、治理模式、资源配置等方面的变革，她与用户直接对话、帮助用户完成决策的载体工具。从而对包括应急指挥、城市管理、公共安全、环境保护、智能交通、基础设施等领域进行管理决策支持，进而提升城市综合管理水平。
</p>
<blockquote>
1、城市全景精细呈现
<br />
2、多部门、多类型数据融合，全面互联互通
<br />
3、强大的统计分析
<br />
4、真正与数据对话——丰富的交互查询手段
<br />
5、可视化部署、指挥调度
</blockquote>
</div>
</div> </div>
</div> <div class="earth">
<div class="list"> <img class="earth-bg" src="../img/earth2.png" alt="" />
<div class="text-right ctr"> <span class="spanbtn" id="slidePrev"> <!-- animated rotateIn infinite -->
< </span> <span class="spanbtn" id="slideNext"> > <img src="../img/earthselect.png" class="select " alt="" />
</span></div> <div class="ctr-container">
<div id="dashuju" class="list-item"> <div class="left-btn ctr-btn"></div>
<div class="swiper-container swiper1" id="swiper1"> <div class="right-btn ctr-btn"></div>
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统0</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="1">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统1</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统2</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统3</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统4</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统5</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统6</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统7</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro9.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统8</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统9</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div id="shuzizhanting" style="" class="list-item"> </div>
<div class="swiper-container swiper2" id="swiper2"> </div>
<div class="swiper-wrapper"> <div class="solution">
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0"> <div class="container">
<div class="left-menu">
<div class="item"> <div class="menu-title">
<a href=""> <img src="../img/titlte2.png" alt="" />
<div class="img-container"> </div>
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt=""> <div class="menu-list">
</div> <div class="menu-item active">大数据可视化平台</div>
<div class="item-title">隆基泰和大数据分析决策系统0</div> <div class="menu-item">数字展厅</div>
<ul class="tag-list"> <div class="menu-item">数字互动解决方案</div>
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="1">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统1</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统2</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统3</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统4</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统5</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统6</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统7</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro9.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统8</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
</div>
<div class="item-title">隆基泰和大数据分析决策系统9</div>
<ul class="tag-list">
<li>客群画像</li>
<li>视频直播</li>
<li>实时客流</li>
<li>·动线热力图</li>
</ul>
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div id="shuzihudong" style="" class="list-item"> <div class="list">
<div class="swiper-container swiper3" id="swiper3"> <div class="text-right ctr">
<div class="swiper-wrapper"> <span class="spanbtn" id="slidePrev"> < </span>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0"> <span class="spanbtn" id="slideNext"> > </span>
</div>
<div id="dashuju" class="list-item">
<div class="swiper-container swiper1" id="swiper1">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item"> <div class="item">
<a href=""> <a href="">
...@@ -668,6 +347,7 @@ ...@@ -668,6 +347,7 @@
</ul> </ul>
</a> </a>
</div> </div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -675,195 +355,188 @@ ...@@ -675,195 +355,188 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div
<div id="footer" style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;"> id="footer"
<div class="container"> style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;"
<div class="row footer-content"> >
<div class="col-xs-12 col-sm-12 col-md-4"> <div class="container">
<p>联系我们:</p> <div class="row footer-content">
<p> <div class="col-xs-12 col-sm-12 col-md-4">
电话：(8601)56833060 <p>联系我们:</p>
</p> <p>
<p> 电话：(8601)56833060
Email：service@bdideal.com </p>
</p> <p>
<p> Email：service@bdideal.com
地址：北京市海淀区知春路盈都大厦D座3010室 </p>
</p> <p>
</div> 地址：北京市海淀区知春路盈都大厦D座3010室
<div class="col-xs-12 col-sm-12 col-md-4"> </p>
<p>友情链接:</p> </div>
<p> <div class="col-xs-12 col-sm-12 col-md-4">
迈动互联（北京）科技有限公司 <p>友情链接:</p>
</p> <p>
<p> 迈动互联（北京）科技有限公司
美智互联网络有限公司 </p>
</p> <p>
<!-- <p> 美智互联网络有限公司
</p>
<!-- <p>
地址：北京市海淀区知春路盈都大厦D座3010室 地址：北京市海淀区知春路盈都大厦D座3010室
</p> --> </p> -->
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center"> <div class="col-xs-12 col-sm-12 col-md-4 text-center">
<p class="weixin-img"> <p class="weixin-img">
<img src="/img//weixin.png" alt="" /> <img src="/img//weixin.png" alt="" />
</p> </p>
<div>扫一扫获取更多资讯</div> <div>扫一扫获取更多资讯</div>
</div>
</div> </div>
</div> </div>
</div> <div
<div class="copyright text-center" style="height: 50px; class="copyright text-center"
style="height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
background: #212121;"> background: #212121;"
@2018 all copyrights reserved by bdideal.com >
@2018 all copyrights reserved by bdideal.com
</div>
</div> </div>
</div> <div id="particles-js" class="is-hello"></div>
<div id="particles-js" class="is-hello"></div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script> <script src="../js/banner.js"></script>
<script src="../js/banner.js"></script> <script src="../js/tools.js"></script>
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js <script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js
"></script> "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="../js/partticles.js"></script> <script src="../js/partticles.js"></script>
</body> </body>
<script> <script>
$(document).ready(function () { $(document).ready(function() {
window.mySwiper = new Swiper('#swiper1', { function createHtml(data) {
slidesPerView: "auto", var html = '';
slidesPerColumn: 2, data.forEach(item => {
on: { html +=
transitionEnd: function (swiper) { '<div class="swiper-slide">' +
// alert('过渡结束'); '<div class="item"> ' +
computeMasking(this) '<a href=""> ' +
}, '<div class="img-container">' +
} '<img src="' +
// spaceBetween: 30, item.imagesUrl +
// direction: 'horizontal', // 垂直切换选项 '" alt="">' +
// loop: true, // 循环模式选项 '</div>' +
// autoplay: 1500, '<div class="item-title"> ' +
// paginationClickable: true, item.proName +
// // 如果需要分页器 '</div>' +
// pagination: '.swiper-pagination' '<ul class="tag-list">' +
(function(a) {
}); var li = '';
window.mySwiper1 = new Swiper('#swiper2', { a.forEach(ele => {
slidesPerView: "auto", li += '<li>' + ele + '</li>';
slidesPerColumn: 2, });
on: { return li;
transitionEnd: function (swiper) { })(item.tags) +
// alert('过渡结束'); '</ul>' +
computeMasking(this) '</a></div></div>';
}, });
return html;
} }
// spaceBetween: 30, console.log(createHtml(ideal.produtsList));
// direction: 'horizontal', // 垂直切换选项 window.mySwiper = new Swiper('#swiper1', {
// loop: true, // 循环模式选项 slidesPerView: 'auto',
// autoplay: 1500, slidesPerColumn: 2,
// paginationClickable: true, on: {
// // 如果需要分页器 transitionEnd: function(swiper) {
// pagination: '.swiper-pagination' // alert('过渡结束');
computeMasking(this);
}); }
window.mySwiper2 = new Swiper('#swiper3', { }
slidesPerView: "auto", // spaceBetween: 30,
slidesPerColumn: 2, // direction: 'horizontal', // 垂直切换选项
on: { // loop: true, // 循环模式选项
transitionEnd: function (swiper) { // autoplay: 1500,
// alert('过渡结束'); // paginationClickable: true,
computeMasking(this) // // 如果需要分页器
}, // pagination: '.swiper-pagination'
});
function update(html) {
$('#swiper1')
.children()
.html(html ? html : createHtml(ideal.produtsList));
mySwiper.update(true);
} }
// spaceBetween: 30, update();
// direction: 'horizontal', // 垂直切换选项 $('#slidePrev').click(function() {
// loop: true, // 循环模式选项 mySwiper.slidePrev(200, true, function(e) {
// autoplay: 1500, console.log(e);
// paginationClickable: true, alert('slidePrev');
// // 如果需要分页器 });
// pagination: '.swiper-pagination'
});
$("#swiper3").parent().hide()
$("#swiper3").parent().hide()
$('#slidePrev').click(function () {
mySwiper.slidePrev(200, true, function (e) {
console.log(e)
alert('slidePrev')
}); });
}) $('#slideNext').click(function() {
$('#slideNext').click(function () { mySwiper.slideNext(200, true, function(e) {
mySwiper.slideNext(200, true, function (e) { console.log(e);
console.log(e) alert('slideNext');
alert('slideNext') });
}); });
}); mySwiper.$wrapperEl.transitionEnd(function(e) {
mySwiper.$wrapperEl.transitionEnd(function (e) { console.log(mySwiper.activeIndex);
console.log(mySwiper.activeIndex) // alert('swiper自带transitionEnd不会触发，这是自定义的');
// alert('swiper自带transitionEnd不会触发，这是自定义的');
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
$(this)
.parent()
.parent()
.parent()
.children()
.find('.list');
var list_item = $(this)
.parent()
.parent()
.parent()
.find('.list')
.children();
list_item.hide();
mySwiper.slideTo(0, 1000, false);
list_item.eq(0).show();
list_item.eq(index + 1).show();
}); });
} function tab(container) {
tab(); $('.menu-item').click(function(e) {
$('.earth .left-btn').mousemove(function () { $(this)
$('.earth .earth-bg').attr('src', "../img/earth1.png"); .parent()
.children()
$('.earth .select').css({ .removeClass('active');
'transform-origin': '53% 50%', $(this).addClass('active');
transform: 'rotate(0deg)' var index = $(this).index();
}) update();
}) mySwiper.slideTo(0, 1000, false);
$('.earth .right-btn').mousemove(function () { });
$('.earth .earth-bg').attr('src', "../img/earth2.png"); }
$('.earth .select').css({ tab();
'transform-origin': '53% 50%', $('.earth .left-btn').mousemove(function() {
transform: 'rotate(180deg)' $('.earth .earth-bg').attr('src', '../img/earth1.png');
})
}) $('.earth .select').css({
function computeMasking(swiper) { 'transform-origin': '53% 50%',
var getTranslate = swiper.getTranslate(); transform: 'rotate(0deg)'
var totalWidth = $('.swiper-wrapper').width(); });
var viewWidth = 860; });
if (getTranslate / 400 <= 0) { $('.earth .right-btn').mousemove(function() {
console.log(totalWidth / 200, Math.abs(getTranslate / 400) + 4) $('.earth .earth-bg').attr('src', '../img/earth2.png');
$('.swiper-slide').removeClass('show-mask') $('.earth .select').css({
for (var i = (totalWidth) / 200; i >= Math.abs(getTranslate / 400 * 2) + 4; i--) { 'transform-origin': '53% 50%',
$('.swiper-slide').eq(i).addClass('show-mask'); transform: 'rotate(180deg)'
});
});
function computeMasking(swiper) {
var getTranslate = swiper.getTranslate();
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = 860;
if (getTranslate / 400 <= 0) {
console.log(totalWidth / 200, Math.abs(getTranslate / 400) + 4);
$('.swiper-slide').removeClass('show-mask');
for (
var i = totalWidth / 200;
i >= Math.abs((getTranslate / 400) * 2) + 4;
i--
) {
$('.swiper-slide')
.eq(i)
.addClass('show-mask');
}
} }
} }
} computeMasking(mySwiper);
computeMasking(mySwiper) });
}); </script>
</script> </html>
</html>
\ No newline at end of file
js/tools.js
Date.prototype.Format = function (fmt) { //author: meizz Date.prototype.Format = function(fmt) {
//author: meizz
var o = { var o = {
"M+": this.getMonth() + 1, //月份 'M+': this.getMonth() + 1, //月份
"d+": this.getDate(), //日 'd+': this.getDate(), //日
"h+": this.getHours(), //小时 'h+': this.getHours(), //小时
"m+": this.getMinutes(), //分 'm+': this.getMinutes(), //分
"s+": this.getSeconds(), //秒 's+': this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度 'q+': Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒 S: this.getMilliseconds() //毫秒
}; };
if (/(y+)/.test(fmt)) if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + '').substr(4 - RegExp.$1.length)
);
for (var k in o) for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) if (new RegExp('(' + k + ')').test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
);
return fmt; return fmt;
} };
this.ideal = this.ideal || {}; this.ideal = this.ideal || {};
(function (window) { (function(window) {
function GetRequest(key) { function GetRequest(key) {
var url = location.search; //获取url中"?"符后的字串 var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object(); var theRequest = new Object();
if (url.indexOf("?") != -1) { if (url.indexOf('?') != -1) {
var str = url.substr(1); var str = url.substr(1);
strs = str.split("&"); strs = str.split('&');
for (var i = 0; i < strs.length; i++) { for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]); theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
} }
} }
if(key) { if (key) {
return theRequest[key]; return theRequest[key];
} else { } else {
return theRequest; return theRequest;
} }
} }
ideal.getUrlQuery = GetRequest ideal.getUrlQuery = GetRequest;
// 解决方案列表 // 解决方案列表
// type 123 大数据可视化 | 数字展厅 | 数字互动展厅解决方案 // type 123 大数据可视化 | 数字展厅 | 数字互动展厅解决方案
ideal.produtsList = [ ideal.produtsList = [
{ {
id: 1, id: 1,
proName: '隆基泰和大数据分析决策系统', proName: '隆基泰和大数据分析决策系统',
images: [], imagesUrl: 'http://bdideal.com/asset/img/homepro9.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1 type: 1
}, },
{ {
id: 2, id: 2,
proName: '隆基泰和大数据分析决策系统', proName: '隆基泰和大数据分析决策系统',
images: [], imagesUrl: 'http://bdideal.com/asset/img/homepro10.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1 type: 1
}, },
{ {
id: 3, id: 3,
proName: '隆基泰和大数据分析决策系统', proName: '隆基泰和大数据分析决策系统',
images: [], imagesUrl: 'http://bdideal.com/asset/img/homepro8.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1 type: 1
}, },
{ {
id: 4, id: 4,
proName: '隆基泰和大数据分析决策系统', proName: '隆基泰和大数据分析决策系统',
images: [], imagesUrl: 'http://bdideal.com/asset/img/homepro7.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1 type: 1
}, },
{ {
id: 5, id: 5,
proName: '隆基泰和大数据分析决策系统', proName: '隆基泰和大数据分析决策系统',
images: [], imagesUrl: 'http://bdideal.com/asset/img/homepro6.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1 type: 1
}, },
{ {
id: 6, id: 6,
proName: '隆基泰和大数据分析决策系统', proName: '隆基泰和大数据分析决策系统',
images: [], imagesUrl: 'http://bdideal.com/asset/img/homepro5.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1
},
{
id: 7,
proName: '隆基泰和大数据分析决策系统',
imagesUrl: 'http://bdideal.com/asset/img/homepro4.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1
},
{
id: 8,
proName: '隆基泰和大数据分析决策系统',
imagesUrl: 'http://bdideal.com/asset/img/homepro3.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1
},
{
id: 9,
proName: '隆基泰和大数据分析决策系统',
imagesUrl: 'http://bdideal.com/asset/img/homepro2.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1
},
{
id: 10,
proName: '隆基泰和大数据分析决策系统',
imagesUrl: 'http://bdideal.com/asset/img/homepro1.jpg',
tags: ['客群画像', '视频直播', '实时客流', '动线热力图'],
type: 1 type: 1
} }
]; ];
ideal.dynamicList = [ ideal.dynamicList = [
{ {
id: 1, id: 1,
title: "数字理想作为优秀被投企业受邀参加哈工创投三周年庆典", title: '数字理想作为优秀被投企业受邀参加哈工创投三周年庆典',
date: '2019.01.18', date: '2019.01.21',
type: "商讯", imagesUrl: '../img/dynamics1.png',
type: '大数据',
images: [] images: []
}, },
{ {
id: 2, id: 2,
title: "数字理想作为优秀被投企业受邀参加哈工创投三周年庆典", title: '数字理想用120个昼夜在潼湖实现了一个小目标',
date: '2019.01.18', date: '2018.11.29',
type: "商讯", type: '数据可视化',
imagesUrl: '../img/dynamics2.png',
images: [] images: []
}, },
{ {
id: 3, id: 3,
title: "数字理想作为优秀被投企业受邀参加哈工创投三周年庆典", title: '可视化百人谈丨彭群生：可视化应成为辅助思维的有力工具',
date: '2019.01.18', date: '2019.02.15',
type: "商讯", type: '数据可视化',
imagesUrl: '../img/dynamics3.png',
images: [] images: []
}, },
{ {
id: 4, id: 4,
title: "数字理想作为优秀被投企业受邀参加哈工创投三周年庆典", title: '《新闻1+1》大数据里，我们过了怎样的年？',
date: '2019.01.18', date: '2019.01.21',
type: "商讯", imagesUrl: '../img/dynamics4.png',
type: '大数据',
images: [] images: []
} }
];
] })(this);
})(this)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment