Skip to content

html / bdideal

Go to a project
Commit 14a5a697 by hank
Options

样式修改

parent ea6d6fb5
Showing with 886 additions and 27 deletions
html/about.html
...@@ -53,7 +53,17 @@ ...@@ -53,7 +53,17 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li class="link-active"><a id="nav-about" href="./about.html">关于我们</a></li> <li class="link-active"><a id="nav-about" href="./about.html">关于我们</a></li>
<li > <li >
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li> <li>
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
......
html/dynamic.html
...@@ -53,7 +53,17 @@ ...@@ -53,7 +53,17 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li ><a id="nav-about" href="./about.html">关于我们</a></li> <li ><a id="nav-about" href="./about.html">关于我们</a></li>
<li > <li >
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li > <li >
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
......
html/dynamicDetail.html
...@@ -53,7 +53,17 @@ ...@@ -53,7 +53,17 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li ><a id="nav-about" href="./about.html">关于我们</a></li> <li ><a id="nav-about" href="./about.html">关于我们</a></li>
<li > <li >
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li > <li >
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
......
html/index.html
...@@ -49,7 +49,17 @@ ...@@ -49,7 +49,17 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li class="link-active"><a id="nav-index" href="./index.html">首页</a></li> <li class="link-active"><a id="nav-index" href="./index.html">首页</a></li>
<li><a id="nav-about" href="./about.html">关于我们</a></li> <li><a id="nav-about" href="./about.html">关于我们</a></li>
<li><a id="nav-products" href="./products.html">我们的产品</a></li> <li><a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a></li>
<li><a id="nav-solution" href="./solution.html">解决方案</a></li> <li><a id="nav-solution" href="./solution.html">解决方案</a></li>
<li><a href="./dynamic.html" id="nav-dynamic">行业动态</a> <li><a href="./dynamic.html" id="nav-dynamic">行业动态</a>
</li> </li>
...@@ -164,7 +174,7 @@ ...@@ -164,7 +174,7 @@
<p>> 实时分布式计算平台，构建大数据算力</p> <p>> 实时分布式计算平台，构建大数据算力</p>
</div> </div>
</div> </div>
<a href="">进入详情</a> <a href="./products.html">进入详情</a>
</div> </div>
<div class="two animated fadeInUp left-item" style="animation-delay: 0.5s;"> <div class="two animated fadeInUp left-item" style="animation-delay: 0.5s;">
<!-- <img src="../img/02_02.png" alt=""> --> <!-- <img src="../img/02_02.png" alt=""> -->
...@@ -181,7 +191,7 @@ ...@@ -181,7 +191,7 @@
<p>> 运营决策分析，规避企业风险</p> <p>> 运营决策分析，规避企业风险</p>
</div> </div>
</div> </div>
<a href="">进入详情</a> <a href="./products2.html">进入详情</a>
</div> </div>
</div> </div>
</div> </div>
......
html/productDetail.html
...@@ -50,7 +50,17 @@ ...@@ -50,7 +50,17 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li><a id="nav-about" href="./about.html">关于我们</a></li> <li><a id="nav-about" href="./about.html">关于我们</a></li>
<li> <li>
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li class="link-active"> <li class="link-active">
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
......
html/products.html
...@@ -52,7 +52,19 @@ ...@@ -52,7 +52,19 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li><a id="nav-about" href="./about.html">关于我们</a></li> <li><a id="nav-about" href="./about.html">关于我们</a></li>
<li class="link-active"> <li class="link-active">
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
<span>我们的产品</span>
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li> <li>
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
...@@ -85,12 +97,15 @@ ...@@ -85,12 +97,15 @@
</p> </p>
<p class="conword animated bounceInRight" style="animation-delay: 02s;"> <p class="conword animated bounceInRight" style="animation-delay: 02s;">
<li> <li>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 · · 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。
完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
</li> </li>
<li> <li>
· 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。 · · 完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。</li>
完善 API 接口，实现数据实时同步，动态展示。 <li>
· 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。
</li>
<li>
· 完善 API 接口，实现数据实时同步，动态展示。
</li> </li>
</p> </p>
<p class="line2"></p> <p class="line2"></p>
...@@ -398,7 +413,6 @@ ...@@ -398,7 +413,6 @@
$(document).ready(function () { $(document).ready(function () {
$('.earth .left-btn').mouseenter(function () { $('.earth .left-btn').mouseenter(function () {
$('.earth .earth-bg').attr('src', '../img/earth1.png'); $('.earth .earth-bg').attr('src', '../img/earth1.png');
$('.earth .select').css({ $('.earth .select').css({
'-ms-transform-origin': '53% 50%', '-ms-transform-origin': '53% 50%',
'-webkit-transform-origin': '53% 50%', '-webkit-transform-origin': '53% 50%',
...@@ -406,6 +420,24 @@ ...@@ -406,6 +420,24 @@
'transform': 'rotate(0deg)', 'transform': 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)' '-ms-transform': 'rotate(0deg)'
}); });
$('.one').html(
'<p>' +
'智慧城市可视化管控平台，可以实现智慧城市各种信息的互联互通与数据共享，带来城市管理方式、治理模式、资源配置等方面的变革，她与用户直接对话、帮助用户完成决策的载体工具。从而对包括应急指挥、城市管理、公共安全、环境保护、智能交通、基础设施等领域进行管理决策支持，进而提升城市综合管理水平。' +
' </p>' +
'<blockquote>' +
'1、城市全景精细呈现' +
'<br />' +
'2、多部门、多类型数据融合，全面互联互通' +
'<br />' +
'3、强大的统计分析' +
'<br />' +
'4、真正与数据对话——丰富的交互查询手段' +
'<br />' +
'5、可视化部署、指挥调度' +
'</blockquote>'
)
}); });
$('.earth .right-btn').mouseenter(function () { $('.earth .right-btn').mouseenter(function () {
$('.earth .earth-bg').attr('src', '../img/earth2.png'); $('.earth .earth-bg').attr('src', '../img/earth2.png');
...@@ -413,6 +445,22 @@ ...@@ -413,6 +445,22 @@
'transform': 'rotate(180deg)', 'transform': 'rotate(180deg)',
'-ms-transform': 'rotate(180deg)' '-ms-transform': 'rotate(180deg)'
}); });
$('.one').html(
'<p>' +
'智慧城市可视化管控平台，能够将城市运行核心系统的各项关键数据进行可视化呈现，通过多部分，多种类的数据交叉出来完成大数据的可视化展现，通过智能物联技术，3D高渲染搜索引擎，将科技与艺术完美的融合展现，保证了平台的高度安全性和易用性' +
' </p>' +
'<blockquote>' +
'1、全面互联互通，多类型数据融合，大数据云计算处理' +
'<br />' +
'2、全三维城市态势，千万数据前端展示' +
'<br />' +
'3、二三维态势联动分析决策' +
'<br />' +
'4、全时空态势呈现，三维实时渲染' +
'<br />' +
'5、智能物联，全方位感知城市信息' +
'</blockquote>'
)
}); });
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") { if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
function createSlider(swiper, data) { function createSlider(swiper, data) {
...@@ -569,26 +617,26 @@ ...@@ -569,26 +617,26 @@
// pagination: '.swiper-pagination' // pagination: '.swiper-pagination'
}); });
// update(); // update();
ideal.ajax("product").done(function(res){ ideal.ajax("product").done(function (res) {
console.log(JSON.parse(res)) console.log(JSON.parse(res))
var res = JSON.parse(res); var res = JSON.parse(res);
ideal.produtsList = res.data; ideal.produtsList = res.data;
var html= "" var html = ""
res.data.forEach( function (item,index) { res.data.forEach(function (item, index) {
if(index==0) { if (index == 0) {
html += '<div class="menu-item active">' + item.catname + '</div>' html += '<div class="menu-item active">' + item.catname + '</div>'
} else { } else {
html += '<div class="menu-item">' + item.catname + '</div>' html += '<div class="menu-item">' + item.catname + '</div>'
} }
}) })
$(".menu-list").html(html) // $(".menu-list").html(html)
update(createHtml(res.data[0].news)) // update(createHtml(res.data[0].news))
tab(); // tab();
}) })
update() update()
function update(html) { function update(html) {
$('#swiper1') $('#swiper1')
...@@ -619,7 +667,7 @@ ...@@ -619,7 +667,7 @@
var index = $(this).index(); var index = $(this).index();
// mySwiper.slideTo(0, 1000, false); // mySwiper.slideTo(0, 1000, false);
// update(createHtml(ideal.produtsList[index].news)); // update(createHtml(ideal.produtsList[index].news));
}); });
} }
tab() tab()
......
html/products2.html 0 → 100644
<!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" />
<meta name="keywords" content="数字理想 ，可视化，数字展厅 ，智慧城市" />
<meta name="description" content="数字理想 ，可视化，数字展厅 ，智慧城市" />
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>我们的产品</title>
<link rel="icon" href="/img/favicon.ico" />
<!-- Bootstrap -->
<link rel="stylesheet" href="../style/common.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" />
<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/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="../style/products.css" />
<!-- <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="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
</head>
<body>
<div class="main-container">
<div class="navbar-container">
<div class="navbar navbar-inverse ">
<!-- data-spy="affix" data-offset-top="1" -->
<nav role="navigation">
<div class="container">
<div class="nav navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"
aria-label="Expand and Collapse Menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="../img/LOGOsmall2.png" alt="" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="nav-index" href="./index.html">首页</a></li>
<li><a id="nav-about" href="./about.html">关于我们</a></li>
<li class="link-active">
<a id="nav-products" href="./products.html">
<span>我们的产品</span>
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li>
<li>
<a id="nav-solution" href="./solution.html">解决方案</a>
</li>
<li>
<a href="./dynamic.html" id="nav-dynamic">行业动态</a>
</li>
<li>
<a href="./recruit.html" id="nav-recruit">招贤纳士</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div id="banner" class="" style="height: 552px;
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="container relative">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">
顶尖的数据分析能力
</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">
企业智慧可视化管控平台
</p>
<p class="conword animated bounceInRight" style="animation-delay: 02s;">
<li>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。
</li>
<li>
· 完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。</li>
<li>
· 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。
</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>
智慧城市可视化管控平台，能够将城市运行核心系统的各项关键数据进行可视化呈现，通过多部分，多种类的数据交叉出来完成大数据的可视化展现，通过智能物联技术，3D高渲染搜索引擎，将科技与艺术完美的融合展现，保证了平台的高度安全性和易用性
</p>
<blockquote>
1、城市全景精细呈现
<br />
2、多部门、多类型数据融合，全面互联互通
<br />
3、强大的统计分析
<br />
4、真正与数据对话——丰富的交互查询手段
<br />
5、可视化部署、指挥调度
</blockquote>
</div>
</div>
<div class="earth">
<div class="ctr-container">
<div class="left-btn ctr-btn"></div>
<div class="right-btn ctr-btn"></div>
</div>
<img class="earth-bg" src="../img/earth1.png" alt="" />
<!-- animated rotateIn infinite -->
<img src="../img/earthselect.png" class="select " alt="" />
</div>
</div>
</div>
<div class="solution">
<div class="container">
<div class="left-menu">
<div class="menu-title">
<img src="../img/titlte2.png" alt="" />
</div>
<div class="menu-list">
<div class="menu-item active">大数据可视化平台</div>
<div class="menu-item">数字展厅</div>
<div class="menu-item">数字互动解决方案</div>
</div>
</div>
<div class="list">
<div class="text-right ctr">
<span class="spanbtn" id="slidePrev">
< </span> <span class="spanbtn" id="slideNext"> >
</span>
</div>
<div id="dashuju" class="list-item">
<div class="swiper-container swiper1" id="swiper1">
<div class="swiper-wrapper" style="width: 2000px;">
<!-- <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>
</div>
<div id="footer" style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;">
<div class="container">
<div class="row footer-content">
<div class="col-xs-12 col-sm-12 col-md-4">
<p>联系我们:</p>
<p>
电话：(8601)56833060
</p>
<p>
Email：service@bdideal.com
</p>
<p>
地址：北京市海淀区知春路盈都大厦D座3010室
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<p>友情链接:</p>
<p>
迈动互联（北京）科技有限公司
</p>
<p>
美智互联网络有限公司
</p>
<!-- <p>
地址：北京市海淀区知春路盈都大厦D座3010室
</p> -->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<p class="weixin-img">
<img src="/img//weixin.png" alt="" />
</p>
<div>扫一扫获取更多资讯</div>
</div>
</div>
</div>
<div class="copyright text-center" style="height: 50px;
line-height: 50px;
text-align: center;
font-size: 12px;
color: #fff;
background: #212121;">
@2018 all copyrights reserved by bdideal.com
</div>
</div>
<div id="particles-js" class="is-hello"></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css">
<![endif]-->
<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>
</body>
<script>
$(document).ready(function () {
$('.earth .left-btn').mouseenter(function () {
$('.earth .earth-bg').attr('src', '../img/earth1.png');
$('.earth .select').css({
'-ms-transform-origin': '53% 50%',
'-webkit-transform-origin': '53% 50%',
'transform-origin': '53% 50%',
'transform': 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)'
});
$('.one').html(
'<p>' +
'基于企业应用场景可视化，实现从企业运营规划、日常运行、数据监测等多个维度进行监测与协调管理,基于企业各种维度的数据作数据分析和利用企业管理层发现问题，定位问题，为企业发展作出合理规划。'+
' </p>'+
'<blockquote>'+
'1、全面互联互通，多类型数据融合，大数据云计算处理'+
'<br />'+
'2、全三维城市态势，千万数据前端展示'+
'<br />'+
'3、二三维态势联动分析决策'+
'<br />'+
'4、全时空态势呈现，三维实时渲染'+
'<br />'+
'5、智能物联，全方位感知城市信息'+
'</blockquote>'
)
});
$('.earth .right-btn').mouseenter(function () {
$('.earth .earth-bg').attr('src', '../img/earth2.png');
$('.earth .select').css({
'transform': 'rotate(180deg)',
'-ms-transform': 'rotate(180deg)'
});
});
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
function createSlider(swiper, data) {
var html = '';
swiper.removeAllSlides(); //移除全部
data.forEach(function (item) {
var html = '';
html =
'<div class="item"> ' +
'<a href="./productDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' +
'<img src="' +
item.thumb +
'" alt="">' +
'</div>' +
'<div class="item-title"> ' +
item.title +
'</div>' +
'<ul class="tag-list">' +
(function (a) {
var li = '';
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
})(item.tags) +
'</ul>' +
'</a></div>';
swiper.appendSlide(html, 'swiper-slide', 'div');
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
update();
mySwiper.slideTo(0, 1000, false);
mySwiper.swipeTo(0, 1000, false);
});
}
tab();
}
window.mySwiper = new Swiper('#swiper1', {
slidesPerView: 'auto',
slidesPerColumn: 2,
cssWidthAndHeight: true,
onSlideChangeEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
change(swiper)
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
createSlider(mySwiper, ideal.produtsList);
$('#swiper1 .swiper-wrapper')
$('#slidePrev').click(function () {
mySwiper.swipePrev();
});
$('#slideNext').click(function () {
mySwiper.swipeNext();
});
function change(swiper) {
var getTranslate = swiper.getWrapperTranslate('x');
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = $('.list-item').width();
var leftBtn = $('#slidePrev');
var rightBtn = $('#slideNext');
// console.log(totalWidth,getTranslate, viewWidth)
if (getTranslate >= -100) {
leftBtn.css({ 'background': "none" });
}
else {
leftBtn.css({ 'background': "black" });
}
if (totalWidth + getTranslate - 200 <= viewWidth) {
rightBtn.css({ 'background': "none" });
}
else {
rightBtn.css({ 'background': "black" });
}
}
change(mySwiper)
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
mySwiper.swipeTo(0, 1000, false);
});
}
tab();
} else {
function createHtml(data) {
var html = '';
data.forEach(function (item) {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
'<a href="./productDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' +
'<img src="' +
item.thumb +
// item.thumb +
'" alt="">' +
'</div>' +
'<div class="item-title"> ' +
item.title +
// item.title +
'</div>' +
'<ul class="tag-list">' +
(function (a) {
var li = '';
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
})(item.tags) +
'</ul>' +
'</a></div></div>';
});
return html;
}
// Swiper.modules = Swiper.modules || {};
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
onTransitionEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
// update();
ideal.ajax("product").done(function(res){
console.log(JSON.parse(res))
var res = JSON.parse(res);
ideal.produtsList = res.data;
var html= ""
res.data.forEach( function (item,index) {
if(index==0) {
html += '<div class="menu-item active">' + item.catname + '</div>'
} else {
html += '<div class="menu-item">' + item.catname + '</div>'
}
})
// $(".menu-list").html(html)
// update(createHtml(res.data[0].news))
// tab();
})
update()
function update(html) {
$('#swiper1')
.children()
.html(html ? html : createHtml(ideal.produtsList));
mySwiper.update(true);
}
$('#slidePrev').click(function () {
mySwiper.slidePrev(function (e) {
console.log(e);
alert('slidePrev');
}, 200);
});
$('#slideNext').click(function () {
mySwiper.slideNext(function (e) {
console.log(e);
alert('slideNext');
}, 200);
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
// mySwiper.slideTo(0, 1000, false);
// update(createHtml(ideal.produtsList[index].news));
});
}
tab()
function computeMasking(swiper) {
var getTranslate = swiper.getWrapperTranslate();
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = $('.list-item').width();
var leftBtn = $('#slidePrev');
var rightBtn = $('#slideNext');
// console.log(totalWidth,getTranslate, viewWidth)
if (getTranslate == 0) {
leftBtn.css({ 'background': "none" });
}
else {
leftBtn.css({ 'background': "black" });
}
if (totalWidth + getTranslate <= viewWidth) {
rightBtn.css({ 'background': "none" });
}
else {
rightBtn.css({ 'background': "black" });
}
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);
}
});
</script>
</script>
</html>
\ No newline at end of file
html/recruit.html
...@@ -49,7 +49,17 @@ ...@@ -49,7 +49,17 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li ><a id="nav-about" href="./about.html">关于我们</a></li> <li ><a id="nav-about" href="./about.html">关于我们</a></li>
<li > <li >
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li > <li >
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
......
html/solution.html
...@@ -50,7 +50,17 @@ ...@@ -50,7 +50,17 @@
<li><a id="nav-index" href="./index.html">首页</a></li> <li><a id="nav-index" href="./index.html">首页</a></li>
<li><a id="nav-about" href="./about.html">关于我们</a></li> <li><a id="nav-about" href="./about.html">关于我们</a></li>
<li> <li>
<a id="nav-products" href="./products.html">我们的产品</a> <a id="nav-products" href="./products.html">
我们的产品
<ul class="dropdown-menu">
<li>
<object data="" type=""><a href="./products.html">智慧城市可视化管控平台</a></object>
</li>
<li>
<object data="" type=""><a href="./products2.html">企业智慧可视化管控平台</a></object>
</li>
</ul>
</a>
</li> </li>
<li class="link-active"> <li class="link-active">
<a id="nav-solution" href="./solution.html">解决方案</a> <a id="nav-solution" href="./solution.html">解决方案</a>
......
style/common.css
...@@ -1728,3 +1728,41 @@ margin-top: 0.1rem; ...@@ -1728,3 +1728,41 @@ margin-top: 0.1rem;
.iw_bt { .iw_bt {
margin: 0 !important; margin: 0 !important;
} }
/* .navbar-right li:hover .dropdown-menu {
display: block;
} */
#nav-products:hover .dropdown-menu{
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: transparent !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
\ 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