Skip to content

html / bdideal

Go to a project
Commit 8e2aa2e4 by hank
Options

首页更改

parent e3e03af8
Showing with 598 additions and 407 deletions
html/index.html
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<body> <body>
<div class="main-container"> <div class="main-container">
<div class="navbar-container"> <div class="navbar-container nav-absolute-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">
...@@ -61,37 +61,55 @@ ...@@ -61,37 +61,55 @@
</nav> </nav>
</div> </div>
</div> </div>
<div id="banner" class="" style="height: 552px; <div class="swiper-container">
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide banner1"> <div class="swiper-slide banner1">
<div class="word-box"> <div class="container ">
<p class="btword animated bounceInRight " style="animation-delay: 1s;">我们是将科技与艺术完美结合的大数据可视化团队</p> <div class="word-box">
<p class="btworden animated bounceInRight" style="animation-delay: 0.7s;">Perfect Combination of Science <p class="line1"></p>
and Technology and Art</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">我们坚持用科技创造艺术的理想，不断走在视觉艺术的最前沿。</p> <p class="btworden animated bounceInRight" style="animation-delay: 1s;">ART AND TECHNOLOGY INTEGRATION</p>
<a target="_blank animated bounceInRight" href="" class="linkword"> <p class="btword animated bounceInRight " style="animation-delay: 0.7s;">技术创造艺术的大数据可视化团队</p>
<i></i> 查看详情 <p class="conword animated bounceInRight" style="animation-delay: 0.4s;">我们坚持用科技创造艺术的理想，不断走在视觉艺术的最前沿。</p>
</a> <p class="line2"></p>
</div> </div>
<a href="" class="img-container"> </div>
<img src="../img/banner1.jpg" alt="">
</a>
</div> </div>
<div class="swiper-slide banner2"> <div class="swiper-slide banner2">
<div class="word-box"></div> <div class="container ">
<a href="" class="img-container"> <div class="word-box">
<img src="../img/banner2.jpg" alt=""> <p class="line1"></p>
</a>
<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: 0.4s;">商业智能利器，你身边的数据分析与数据表现专家。</p>
<p class="line2"></p>
</div>
</div>
</div> </div>
<div class="swiper-slide banner3"> <div class="swiper-slide banner3">
<div class="word-box"></div> <div class="container ">
<a href="" class="img-container"> <div class="word-box">
<img src="../img/banner3.jpg" alt=""> <p class="line1"></p>
</a>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">案例遍布金融、地产、旅游、汽车、教育、科技等行业的500强客户</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">完整的数据可视化解决方案</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">每天，我们处理超过10,000,000万条数据，累计服务用户480，348,355人次</p>
<p class="line2"></p>
</div>
</div>
</div>
<div class="swiper-slide banner4">
<div class="container ">
<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: 0.4s;">对海量数据自由计算、极速响应，驱动大数据行业变革</p>
<p class="line2"></p>
</div>
</div>
</div> </div>
</div> </div>
<!-- 如果需要分页器 --> <!-- 如果需要分页器 -->
...@@ -103,6 +121,11 @@ ...@@ -103,6 +121,11 @@
<!-- 如果需要滚动条 --> <!-- 如果需要滚动条 -->
</div> </div>
<!-- <div id="banner" class="" style="height: 552px;
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="container "> <div class="container ">
<div class="word-box"> <div class="word-box">
<p class="line1"></p> <p class="line1"></p>
...@@ -113,7 +136,7 @@ ...@@ -113,7 +136,7 @@
<p class="line2"></p> <p class="line2"></p>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<!-- <div class="tab-container"> <!-- <div class="tab-container">
...@@ -514,7 +537,7 @@ ...@@ -514,7 +537,7 @@
var mySwiper = new Swiper('.swiper-container', { var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项 direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项 loop: true, // 循环模式选项
autoplay: 1500, autoplay: 3000,
paginationClickable: true, paginationClickable: true,
// 如果需要分页器 // 如果需要分页器
pagination: '.swiper-pagination', pagination: '.swiper-pagination',
......
html/products.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <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="../style/animate.min.css" />
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <head>
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <meta charset="utf-8" />
<!--[if lt IE 9]> <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/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 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"
type="button" aria-label="Expand and Collapse Menu">
class="navbar-toggle" <span class="icon-bar"></span>
data-toggle="collapse" <span class="icon-bar"></span>
data-target=".navbar-collapse" <span class="icon-bar"></span>
aria-label="Expand and Collapse Menu" </button>
> <a class="navbar-brand" href="index.html"><img src="../img/LOGOsmall2.png" alt="" /></a>
<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">我们的产品</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> </div>
</nav> <div class="navbar-collapse collapse">
</div> <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">我们的产品</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 </div>
id="banner" <div id="banner" class="" style="height: 552px;
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="swiper-container">
<!-- <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide banner1"> <div class="swiper-slide banner1">
<div class="word-box"> <div class="word-box">
...@@ -127,332 +113,392 @@ ...@@ -127,332 +113,392 @@
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
</div> --> </div> -->
<div class="container "> <div class="container ">
<div class="word-box"> <div class="word-box">
<p class="line1"></p> <p class="line1"></p>
<p <p class="btworden animated bounceInRight" style="animation-delay: 1s;">
class="btworden animated bounceInRight" 顶尖的数据分析能力
style="animation-delay: 1s;" </p>
> <p class="btword animated bounceInRight " style="animation-delay: 0.7s;">
顶尖的数据分析能力 智慧城市可视化管控平台
</p> </p>
<p <p class="conword animated bounceInRight" style="animation-delay: 0.4s;">
class="btword animated bounceInRight " <li>
style="animation-delay: 0.7s;" · 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
> 完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
智慧城市可视化管控平台 </li>
</p> <li>
<p · 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。 ·
class="conword animated bounceInRight" 完善 API 接口，实现数据实时同步，动态展示。
style="animation-delay: 0.4s;" </li>
> </p>
<li> <p class="line2"></p>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
</li>
<li>
· 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。 ·
完善 API 接口，实现数据实时同步，动态展示。
</li>
</p>
<p class="line2"></p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="main2-container"> <div class="main2-container">
<div class="our-products"> <div class="our-products">
<div class="container relative our"> <div class="container relative our">
<div class="word-right"> <div class="word-right">
<div class="title" data="Ability and Service">能力与服务</div> <div class="title" data="Ability and Service">能力与服务</div>
</div> </div>
<div class="views-content"> <div class="views-content">
<div class="one animated fadeInUp" style="animation-delay: 0.2s;"> <div class="one animated fadeInUp" style="animation-delay: 0.2s;">
<p> <p>
智慧城市可视化管控平台，可以实现智慧城市各种信息的互联互通与数据共享，带来城市管理方式、治理模式、资源配置等方面的变革，她与用户直接对话、帮助用户完成决策的载体工具。从而对包括应急指挥、城市管理、公共安全、环境保护、智能交通、基础设施等领域进行管理决策支持，进而提升城市综合管理水平。 智慧城市可视化管控平台，可以实现智慧城市各种信息的互联互通与数据共享，带来城市管理方式、治理模式、资源配置等方面的变革，她与用户直接对话、帮助用户完成决策的载体工具。从而对包括应急指挥、城市管理、公共安全、环境保护、智能交通、基础设施等领域进行管理决策支持，进而提升城市综合管理水平。
</p> </p>
<blockquote> <blockquote>
1、城市全景精细呈现 1、城市全景精细呈现
<br /> <br />
2、多部门、多类型数据融合，全面互联互通 2、多部门、多类型数据融合，全面互联互通
<br /> <br />
3、强大的统计分析 3、强大的统计分析
<br /> <br />
4、真正与数据对话——丰富的交互查询手段 4、真正与数据对话——丰富的交互查询手段
<br /> <br />
5、可视化部署、指挥调度 5、可视化部署、指挥调度
</blockquote> </blockquote>
</div>
</div>
<div class="earth">
<img src="../img/earth1.png" alt="" />
<img
src="../img/earthselect.png"
class="select animated rotateIn infinite"
alt=""
/>
</div> </div>
</div> </div>
<div class="earth">
<img src="../img/earth1.png" alt="" />
<img src="../img/earthselect.png" class="select animated rotateIn infinite" alt="" />
</div>
</div> </div>
<div class="solution"> </div>
<div class="container"> <div class="solution">
<div class="left-menu"> <div class="container">
<div class="menu-title"> <div class="left-menu">
<img src="../img/titlte2.png" alt="" /> <div class="menu-title">
</div> <img src="../img/titlte2.png" alt="" />
<div class="menu-list"> </div>
<div class="menu-item active">大数据可视化平台</div> <div class="menu-list">
<div class="menu-item">数字展厅</div> <div class="menu-item active">大数据可视化平台</div>
<div class="menu-item">数字互动解决方案</div> <div class="menu-item">数字展厅</div>
</div> <div class="menu-item">数字互动解决方案</div>
</div> </div>
<div class="list"> </div>
<div id="dashuju" class="list-item"> <div class="list">
<div class="item"> <div class="text-right ctr"> <span class="spanbtn" id="slidePrev"> < </span> <span class="spanbtn" id="slideNext"> > </span></div>
<a href=""> <div id="dashuju" class="list-item">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="" /> <div class="swiper-container swiper-container-horizontal swiper-container-multirow">
</a> <div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item">
</div> <a href="">
<div class="item"> <div class="img-container">
<a href=""> <img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="" </div>
/></a> <div class="item-title">隆基泰和大数据分析决策系统0</div>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-column="0" data-swiper-row="1">
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item">
</div> <a href="">
<div class="item"> <div class="img-container">
<a href=""> <img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" </div>
/></a> <div class="item-title">隆基泰和大数据分析决策系统1</div>
</a>
</div>
</div>
<div class="swiper-slide" >
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item">
</div> <a href="">
<div class="item"> <div class="img-container">
<a href=""> <img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" </div>
/></a> <div class="item-title">隆基泰和大数据分析决策系统2</div>
</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>
</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>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item">
</div> <a href="">
<div class="item"> <div class="img-container">
<a href=""> <img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" </div>
/></a> <div class="item-title">隆基泰和大数据分析决策系统5</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item">
</div> <a href="">
<div class="item"> <div class="img-container">
<a href=""> <img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="" </div>
/></a> <div class="item-title">隆基泰和大数据分析决策系统6</div>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="item-title">隆基泰和大数据分析决策系统</div> <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>
</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>
</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>
</a>
</div>
</div>
</div> </div>
</div> </div>
<div id="shuzizhanting" class="list-item"> </div>
<div class="item"> <div id="shuzizhanting" style="display: none;" class="list-item">
<a href=""> <div class="item">
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="" <a href="">
/></a> <img src="http://bdideal.com/asset/img/homepro2.jpg" alt="" /></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<div class="img-container"></div> <div class="img-container"></div>
</a> </a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro1.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
</div> </div>
<div id="shuzihudong" class="list-item"> </div>
<div class="item"> <div id="shuzihudong" style="display: none;" class="list-item">
<a href=""> <div class="item">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" <a href="">
/></a> <img src="http://bdideal.com/asset/img/homepro4.jpg" alt="" /></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro1.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro7.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro8.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro8.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro5.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div> </div>
<div class="item"> <div class="item">
<a href=""> <a href="">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" <img src="http://bdideal.com/asset/img/homepro6.jpg" alt="" /></a>
/></a>
<div class="item-title">隆基泰和大数据分析决策系统</div> <div class="item-title">隆基泰和大数据分析决策系统</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div </div>
id="footer" <div id="footer" style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;">
style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;" <div class="container">
> <div class="row footer-content">
<div class="container"> <div class="col-xs-12 col-sm-12 col-md-4">
<div class="row footer-content"> <p>联系我们:</p>
<div class="col-xs-12 col-sm-12 col-md-4"> <p>
<p>联系我们:</p> 电话：(8601)56833060
<p> </p>
电话：(8601)56833060 <p>
</p> Email：service@bdideal.com
<p> </p>
Email：service@bdideal.com <p>
</p> 地址：北京市海淀区知春路盈都大厦D座3010室
<p> </p>
地址：北京市海淀区知春路盈都大厦D座3010室 </div>
</p> <div class="col-xs-12 col-sm-12 col-md-4">
</div> <p>友情链接:</p>
<div class="col-xs-12 col-sm-12 col-md-4"> <p>
<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>
class="copyright text-center" <div class="copyright text-center" style="height: 50px;
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 id="particles-js" class="is-hello"></div> </div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <div id="particles-js" class="is-hello"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../js/banner.js"></script> <script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js <script src="../js/banner.js"></script>
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js
"></script> "></script>
<script src="../js/partticles.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</body> <script src="../js/partticles.js"></script>
<script> </body>
$(document).ready(function() { <script>
var mySwiper = new Swiper('.swiper-container', { $(document).ready(function () {
direction: 'horizontal', // 垂直切换选项 window.mySwiper = new Swiper('.swiper-container', {
loop: true, // 循环模式选项 slidesPerView: "auto",
autoplay: 1500, slidesPerColumn: 2,
paginationClickable: true, on:{
// 如果需要分页器 transitionEnd: function(swiper){
pagination: '.swiper-pagination' // alert('过渡结束');
console.log(mySwiper.activeIndex)
// 如果需要前进后退按钮 },
// navigation: { }
// nextEl: '.swiper-button-next', // spaceBetween: 30,
// prevEl: '.swiper-button-prev', // direction: 'horizontal', // 垂直切换选项
// }, // loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
// 如果需要滚动条 });
// scrollbar: { $('#slidePrev').click(function(){
// el: '.swiper-scrollbar', mySwiper.slidePrev(200,true,function(e) {
// }, console.log(e)
alert('slidePrev')
}); });
function tab(container) { })
$('.menu-item').click(function(e) { $('#slideNext').click(function(){
$(this) mySwiper.slideNext(200, true, function(e) {
.parent() console.log(e)
.children() alert('slideNext')
.removeClass('active'); });
$(this).addClass('active'); });
var index = $(this).index(); mySwiper.$wrapperEl.transitionEnd(function (e) {
$(this) console.log(mySwiper.activeIndex)
.parent() // alert('swiper自带transitionEnd不会触发，这是自定义的');
.parent()
.parent()
.children()
.find('.list');
var list_item = $(this)
.parent()
.parent()
.parent()
.find('.list')
.children();
list_item.hide();
list_item.eq(index).show();
});
}
tab();
}); });
</script> function tab(container) {
</html> $('.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(index).show();
});
}
tab();
});
</script>
</html>
\ No newline at end of file
style/index.less
...@@ -74,9 +74,98 @@ ul { ...@@ -74,9 +74,98 @@ ul {
} }
} }
.main-container { .main-container {
background: #0c2655 url('/img/bg2.png') top center no-repeat; // background: #0c2655 url('../img/bg2.png') top center no-repeat;
height: 614px;
background-size: cover ; background-size: cover ;
position: relative;
.nav-absolute-container {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
margin: 0 auto;
}
.swiper-container {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: 0;
left: 0;
top: 0;
.banner1 {
background: #0c2655 url('../img/index_banner1.png') top center no-repeat;
background-size: cover ;
}
.banner2 {
background: #0c2655 url('../img/index_banner2.png') top center no-repeat;
background-size: cover ;
}
.banner3 {
background: #0c2655 url('../img/index_banner3.png') top center no-repeat;
background-size: cover ;
}
.banner4 {
background: #0c2655 url('../img/index_banner4.png') top center no-repeat;
background-size: cover ;
}
.word-box {
// position: absolute;
padding-left: 20px;
padding-top: 18.5%;
top: 18.5%;
left: 15%;
z-index: 555;
width: 80%;
p.line1 {
width: 40px;
height: 2px;
background:rgba(255,255,255,1);
margin-bottom: 30px;
}
p.line2 {
width: 211px;
height: 2px;
background:rgba(255,255,255,1);
margin-top: 30px;
}
p.btword {
font-size: 36px;
color: #ffffff;
/* font-weight: bold; */
}
p.btworden {
font-size: 16px;
color: #ffffff;
margin-top: 8px;
}
p.conword {
font-size: 14px;
color: #ffffff;
line-height: 26px;
margin-top: 20px;
max-width: 530px;
text-align: justify;
}
a.linkword {
width: 140px;
height: 43px;
border: 1px solid #ffffff;
text-align: center;
color: #ffffff;
line-height: 40px;
font-size: 16px;
display: block;
margin-top: 35px;
position: relative;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
}
}
} }
#particles-js { #particles-js {
height: 100vh; height: 100vh;
...@@ -85,7 +174,7 @@ ul { ...@@ -85,7 +174,7 @@ ul {
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: -1; z-index: -2;
-webkit-transition: all 0.9s; -webkit-transition: all 0.9s;
transition: all 0.9s; transition: all 0.9s;
} }
......
style/products.less
...@@ -157,7 +157,7 @@ ul { ...@@ -157,7 +157,7 @@ ul {
.swiper-container { .swiper-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
.img-container { .img-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -417,18 +417,53 @@ ul { ...@@ -417,18 +417,53 @@ ul {
float: right; float: right;
width: 860px; width: 860px;
display: inline-block; display: inline-block;
height: 672px; // height: 654px;
overflow: hidden; height: 704px;
// overflow: hidden;
position: relative;
.ctr {
padding-top: 16px;
span {
display: inline-block;
}
.spanbtn {
cursor: pointer;
width:38px;
height:26px;
background:rgba(0,0,0,1);
line-height: 26px;
font-size: 18px;
color: white;
opacity:0.8;
text-align: center;
}
}
.list-item { .list-item {
height: 672px; position: absolute;
top: 51px;
left: 0;
// width: calc(860px + (100vw - 1200px)/2);
width: 100%;
height: 654px;
transition: all 0.5s; transition: all 0.5s;
.swiper-container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
.swiper-slide {
width: auto;
height: auto;
}
}
} }
.item { .item {
width:374px; width:374px;
height: 300px; height: 300px;
margin-left: 9px; margin-left: 26px;
margin-bottom: 9px; margin-bottom: 27px;
float: left;
position: relative; position: relative;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat; // background: url('/img/banner2.jpg') center no-repeat;
...@@ -447,25 +482,22 @@ ul { ...@@ -447,25 +482,22 @@ ul {
height: 100%; height: 100%;
} }
} }
.item-title { .item-title {
display: none; padding-left: 19px;
position: absolute; padding-top: 22px;
bottom: 6px; font-size:18px;
padding-left: 20px; font-weight:400;
color: #fff; color:rgba(0,0,0,1);
overflow: hidden;
font-size: 18px;
} }
&:hover { &:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
transition: all 0.5s; transition: all 0.5s;
} }
.item-title {
display: block;
}
} }
} }
.item::after { .item::after {
......
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