Skip to content

html / bdideal

Go to a project
Commit 186dd204 by hank
Options

解决方案

parent 2cbb9390
Showing with 806 additions and 128 deletions
html/solution.html
......@@ -13,7 +13,10 @@
<!-- 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）功能 -->
......@@ -22,7 +25,7 @@
<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/less" href="../style/index.less">
<link rel="stylesheet/less" href="../style/solution.less">
<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>
......@@ -31,8 +34,9 @@
<body>
<div class="main-container">
<div class="navbar-fixed-container">
<div class="navbar navbar-inverse navbar-fixed-top affix-top" data-spy="affix" data-offset-top="1">
<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">
......@@ -42,159 +46,235 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><span itemprop="name">数字理想</span></a>
<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><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 ><a id="nav-about" href="./about.html">关于我们</a></li>
<li >
<a id="nav-products" href="./products.html">我们的产品</a>
</li>
<li><a href="./recruit.html" id="nav-recruit">招贤纳士</a>
<li class="link-active">
<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="animated fadeInUp" style="height: 690px;
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide banner1">
<div class="container relative">
<div class="word-box">
<p class="btword animated bounceInRight " style="animation-delay: 1s;">SOLUTION</p>
<p class="btworden animated bounceInRight" style="animation-delay: 0.7s;">完整数据可视化解决方案
</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">案例遍布金融、地产、旅游、汽车、教育、科技等行业的 500 强客户。</p>
</div>
<a href="" class="img-container">
<img src="../img/banner1.jpg" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
<p class="line1"></p>
<!-- 如果需要滚动条 -->
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">
SOLUTION
</p>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">
完整数据可视化解决方案
</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.32s;">
案例遍布金融、地产、旅游、汽车、教育、科技等行业的 500 强客户。
</p>
<p class="line2"></p>
</div>
</div>
</div>
<div class="solution-container">
<div class="main2-container">
<div class="solution">
<div class="container">
<div class="field">
<div class="common-title">
行业领域
</div>
<div class="field-list">
<div class="field-item">
智慧城市
</div>
<div class="field-item">
数字工厂
</div>
<div class="field-item">
数字政务
</div>
<div class="field-item">
特色小镇
<div class="left-menu">
<div class="menu-title">
<img src="../img/titlte2.png" alt="" />
</div>
<div class="field-item">
展览展厅
<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 class="case">
<div class="common-title">
合作案例
</div>
<div class="case-list" id="masonry">
<div class="case-item" >
<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">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</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="case-item" >
<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 class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</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="case-item" >
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</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="case-item" >
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</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="case-item" >
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</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="case-item">
<div class="swiper-slide">
<div class="item">
<a href="">
<div class="img-container">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
<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="case-item" >
<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 class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
<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>
......@@ -252,39 +332,128 @@
<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://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="../js/masonry-docs.min.js"></script>
<script src="../js/banner.js"></script>
</body>
<script>
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
$(document).ready(function() {
function createHtml(data) {
var html = '';
data.forEach(item => {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
'<a href=""> ' +
'<div class="img-container">' +
'<img src="' +
item.imagesUrl +
'" alt="">' +
'</div>' +
'<div class="item-title"> ' +
item.proName +
'</div>' +
'<ul class="tag-list">' +
(function(a) {
var li = '';
a.forEach(ele => {
li += '<li>' + ele + '</li>';
});
return li;
})(item.tags) +
'</ul>' +
'</a></div></div>';
});
return html;
}
console.log(createHtml(ideal.produtsList));
window.mySwiper = new Swiper('#swiper1', {
slidesPerView: 'auto',
slidesPerColumn: 2,
on: {
transitionEnd: function(swiper) {
// alert('过渡结束');
computeMasking(this);
}
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination',
// 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// pagination: '.swiper-pagination'
});
function update(html) {
$('#swiper1')
.children()
.html(html ? html : createHtml(ideal.produtsList));
mySwiper.update(true);
}
update();
$('#slidePrev').click(function() {
mySwiper.slidePrev(200, true, function(e) {
console.log(e);
alert('slidePrev');
});
});
$('#slideNext').click(function() {
mySwiper.slideNext(200, true, function(e) {
console.log(e);
alert('slideNext');
});
});
mySwiper.$wrapperEl.transitionEnd(function(e) {
console.log(mySwiper.activeIndex);
// alert('swiper自带transitionEnd不会触发，这是自定义的');
});
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);
});
}
tab();
$('.earth .left-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', '../img/earth1.png');
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(0deg)'
});
});
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.case-item',
gutter: 20,
isAnimated: true,
$('.earth .right-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', '../img/earth2.png');
$('.earth .select').css({
'transform-origin': '53% 50%',
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);
});
</script>
......
img/02_01.png
img/02_01.png

56.7 KB | W: | H:

img/02_01.png

18.6 KB | W: | H:

img/02_01.png
img/02_01.png
img/02_01.png
img/02_01.png
  • 2-up
  • Swipe
  • Onion skin
img/02_02.png
img/02_02.png

69 KB | W: | H:

img/02_02.png

17.4 KB | W: | H:

img/02_02.png
img/02_02.png
img/02_02.png
img/02_02.png
  • 2-up
  • Swipe
  • Onion skin
img/03_01.png
img/03_01.png

54.5 KB | W: | H:

img/03_01.png

12.8 KB | W: | H:

img/03_01.png
img/03_01.png
img/03_01.png
img/03_01.png
  • 2-up
  • Swipe
  • Onion skin
img/bg3.png
img/bg3.png

190 KB | W: | H:

img/bg3.png

52.4 KB | W: | H:

img/bg3.png
img/bg3.png
img/bg3.png
img/bg3.png
  • 2-up
  • Swipe
  • Onion skin
img/bg4.png
img/bg4.png

430 KB | W: | H:

img/bg4.png

157 KB | W: | H:

img/bg4.png
img/bg4.png
img/bg4.png
img/bg4.png
  • 2-up
  • Swipe
  • Onion skin
img/bg5.png
img/bg5.png

88.4 KB | W: | H:

img/bg5.png

40.1 KB | W: | H:

img/bg5.png
img/bg5.png
img/bg5.png
img/bg5.png
  • 2-up
  • Swipe
  • Onion skin
img/bg6.png
img/bg6.png

572 KB | W: | H:

img/bg6.png

150 KB | W: | H:

img/bg6.png
img/bg6.png
img/bg6.png
img/bg6.png
  • 2-up
  • Swipe
  • Onion skin
img/bg7.png
img/bg7.png

13.7 KB | W: | H:

img/bg7.png

6.1 KB | W: | H:

img/bg7.png
img/bg7.png
img/bg7.png
img/bg7.png
  • 2-up
  • Swipe
  • Onion skin
img/bg8.png
img/bg8.png

13.6 KB | W: | H:

img/bg8.png

6.55 KB | W: | H:

img/bg8.png
img/bg8.png
img/bg8.png
img/bg8.png
  • 2-up
  • Swipe
  • Onion skin
img/dynamics1.png
img/dynamics1.png

128 KB | W: | H:

img/dynamics1.png

37.1 KB | W: | H:

img/dynamics1.png
img/dynamics1.png
img/dynamics1.png
img/dynamics1.png
  • 2-up
  • Swipe
  • Onion skin
img/dynamics2.png
img/dynamics2.png

166 KB | W: | H:

img/dynamics2.png

44.6 KB | W: | H:

img/dynamics2.png
img/dynamics2.png
img/dynamics2.png
img/dynamics2.png
  • 2-up
  • Swipe
  • Onion skin
img/dynamics3.png
img/dynamics3.png

194 KB | W: | H:

img/dynamics3.png

64.6 KB | W: | H:

img/dynamics3.png
img/dynamics3.png
img/dynamics3.png
img/dynamics3.png
  • 2-up
  • Swipe
  • Onion skin
img/dynamics4.png
img/dynamics4.png

158 KB | W: | H:

img/dynamics4.png

67.5 KB | W: | H:

img/dynamics4.png
img/dynamics4.png
img/dynamics4.png
img/dynamics4.png
  • 2-up
  • Swipe
  • Onion skin
img/earth1.png
img/earth1.png

157 KB | W: | H:

img/earth1.png

59.2 KB | W: | H:

img/earth1.png
img/earth1.png
img/earth1.png
img/earth1.png
  • 2-up
  • Swipe
  • Onion skin
img/earth2.png
img/earth2.png

157 KB | W: | H:

img/earth2.png

58.9 KB | W: | H:

img/earth2.png
img/earth2.png
img/earth2.png
img/earth2.png
  • 2-up
  • Swipe
  • Onion skin
img/index_banner1.png
img/index_banner1.png

911 KB | W: | H:

img/index_banner1.png

377 KB | W: | H:

img/index_banner1.png
img/index_banner1.png
img/index_banner1.png
img/index_banner1.png
  • 2-up
  • Swipe
  • Onion skin
img/index_banner2.png
img/index_banner2.png

852 KB | W: | H:

img/index_banner2.png

285 KB | W: | H:

img/index_banner2.png
img/index_banner2.png
img/index_banner2.png
img/index_banner2.png
  • 2-up
  • Swipe
  • Onion skin
img/index_banner3.png
img/index_banner3.png

1.1 MB | W: | H:

img/index_banner3.png

379 KB | W: | H:

img/index_banner3.png
img/index_banner3.png
img/index_banner3.png
img/index_banner3.png
  • 2-up
  • Swipe
  • Onion skin
img/index_banner4.png
img/index_banner4.png

1.17 MB | W: | H:

img/index_banner4.png

398 KB | W: | H:

img/index_banner4.png
img/index_banner4.png
img/index_banner4.png
img/index_banner4.png
  • 2-up
  • Swipe
  • Onion skin
img/p1-1.jpg
img/p1-1.jpg

28.4 KB | W: | H:

img/p1-1.jpg

26.9 KB | W: | H:

img/p1-1.jpg
img/p1-1.jpg
img/p1-1.jpg
img/p1-1.jpg
  • 2-up
  • Swipe
  • Onion skin
img/p1-2.jpg
img/p1-2.jpg

41.1 KB | W: | H:

img/p1-2.jpg

41.1 KB | W: | H:

img/p1-2.jpg
img/p1-2.jpg
img/p1-2.jpg
img/p1-2.jpg
  • 2-up
  • Swipe
  • Onion skin
img/p1-3.jpg
img/p1-3.jpg

18.3 KB | W: | H:

img/p1-3.jpg

17.4 KB | W: | H:

img/p1-3.jpg
img/p1-3.jpg
img/p1-3.jpg
img/p1-3.jpg
  • 2-up
  • Swipe
  • Onion skin
img/paper.png
img/paper.png

802 KB | W: | H:

img/paper.png

112 KB | W: | H:

img/paper.png
img/paper.png
img/paper.png
img/paper.png
  • 2-up
  • Swipe
  • Onion skin
img/patners.png
img/patners.png

159 KB | W: | H:

img/patners.png

40.4 KB | W: | H:

img/patners.png
img/patners.png
img/patners.png
img/patners.png
  • 2-up
  • Swipe
  • Onion skin
img/quan.png
img/quan.png

87.8 KB | W: | H:

img/quan.png

27.9 KB | W: | H:

img/quan.png
img/quan.png
img/quan.png
img/quan.png
  • 2-up
  • Swipe
  • Onion skin
img/weixin.png
img/weixin.png

10.4 KB | W: | H:

img/weixin.png

3.71 KB | W: | H:

img/weixin.png
img/weixin.png
img/weixin.png
img/weixin.png
  • 2-up
  • Swipe
  • Onion skin
style/solution.less 0 → 100644
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
// padding-bottom: 25px;
}
}
@media (max-width: 1920px) {
#banner .img-container img {
// margin-left: -25% ;
position: absolute;
}
}
.indent-32 {
text-indent: 32px;
}
ol,
ul {
margin-top: 0;
margin-bottom: 0px;
}
.link-active {
border-bottom: 2px solid black;
}
.swiper-pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
// .navbar-brand {
// padding: 25px;
// }
.navbar-inverse {
background: none;
border: none;
margin-bottom: 0;
}
.navbar-container {
a {
color: black !important;
font-size: 16px;
}
// height: 51px;
.navbar {
// border-bottom: 1px solid #d2d2d2;
}
position: relative;
}
#footer .footer-content {
padding-top: 40px;
padding-bottom: 40px;
.weixin-img {
text-align: center;
img {
max-width: 130px;
height: auto;
display: inline-block;
}
}
}
.main-container {
background: #E4E5E8 url('/img/bg5.png') top center no-repeat;
background-size: cover ;
height: 280px;
position: relative;
.word-box {
position: absolute;
padding-left: 20px;
padding-top: 4%;
// top: 18.5%;
// left: 15%;
z-index: 555;
width: 80%;
p.line1 {
width: 28px;
height: 1px;
background: #333333;
margin-bottom: 21px;
}
p.line2 {
width:147px;
height:1px;
background:#333333;
margin-top: 30px;
}
p.btword {
font-size: 24px;
color: #333333;
/* font-weight: bold; */
margin-bottom: 15px;
}
p.btworden {
font-size: 10px;
color: #333333;
// margin-top: 21px;
}
p.conword {
font-size: 10px;
color: #333333;
line-height: 26px;
margin-top: 15px;
max-width: 466px;
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 {
height: 100vh;
opacity: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.9s;
transition: all 0.9s;
}
.swiper-container {
display: none;
}
.relative {
position: relative;
}
.main2-container {
background: url('../img/paper.png') no-repeat top center;
background-size: 100% auto;
.quan-bg {
background: url('../img/quan.png') no-repeat center;
background-size: 1200px ;
}
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height:540px;
padding-top: 30px;
.our {
background: url('../img/bg6.png') no-repeat left;
background-size: 98% auto;
height:450px;
position: relative;
.word {
padding-top: 160px;
margin-left: 108px;
color: #D6D6D6;
font-size: 16px;
width: 652px;
height: 147px;
line-height: 26px;
p {
margin-bottom: 30px;
}
}
.bottom-container {
width:922px;
height:173px;
position: absolute;
bottom: -80px;
left: 90px;
// background: #333333;
.item {
background: url(../img/p1-1.jpg) center no-repeat;
background-size: cover;
height: 173px;
width: 290px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
.title {
padding-top: 50px;
font-size: 24px;
font-weight: bold;
padding-bottom: 30px;
}
}
.item2 {
background-image: url(../img/p1-2.jpg);
}
.item3 {
background-image: url(../img/p1-3.jpg);
}
}
}
.views-content {
position: absolute;
z-index: 999;
top: 100px;
left: 7%;
img {
width: 100%;
height: 100%;
}
a {
position: absolute;
bottom: 40px;
right: 40px;
text-align: center;
width:107.2px;
height:31.2px;
line-height: 31.2px;
font-size: 14.5px;
}
.one {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
background: url('../img/03_01.png') no-repeat top center;
position: relative;
width:378px;
height:588px;
display: inline-block;
margin-right: 20px;
padding: 169px 35px 0 35px;
font-size:16px;
color:#939393;
blockquote {
color: #B5B5B5;
padding: 0;
font-size: 14px;
line-height: 30px;
border: none;
}
}
}
}
.solution {
padding-top: 50px;
padding-bottom: 50px;
.table-a {
margin-bottom: 20px;
}
.list {
float: right;
width: 860px;
display: inline-block;
// height: 654px;
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 {
position: absolute;
top: 51px;
left: 0;
// width: calc(860px + (100vw - 1200px)/2);
width: 100%;
height: 654px;
transition: all 0.5s;
.swiper-container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
.swiper-slide {
position: relative;
width: auto;
height: auto;
&::after {
content: "";
background: rgba(0,0,0, 0.5);
width: 374px;
left: 0;
top: 0;
height:300px ;
position: absolute;
opacity: 0;
transition: all 1s;
display: none;
}
}
.show-mask {
&::after {
opacity: 1;
display: block;
}
}
}
}
.item {
width:374px;
height: 300px;
margin-right: 26px;
margin-bottom: 27px;
position: relative;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat;
a {
display: inline-block;
height: 100%;
width: 100%;
overflow: hidden;
.img-container {
width:374px;
height:212px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.tag-list {
list-style: circle;
overflow: hidden;
width: 100%;
padding-left: 32px;
padding-top: 10px;
li {
list-style: disc;
float: left;
font-size: 12px;
padding-right: 22px;
color:rgba(0,0,0,0.6);
}
}
}
.item-title {
padding-left: 19px;
padding-top: 16px;
font-size:18px;
font-weight:400;
color:rgba(0,0,0,1);
}
&:hover {
img {
transform: scale(1.1);
transition: all 0.5s;
}
}
}
.item::after {
content: '';
clear: both;
}
}
}
// 解决方案
.left-menu {
display: inline-block;
background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 280px;
.menu-title {
height: 115px;
img {
width: auto;
height: 100%;
}
margin-bottom: 96px;
}
.menu-list {
border-left: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
line-height: 45px;
height: 45px;
padding-left: 25px;
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.active {
color: #000000;
// border-left: 6px solid #000000;
&::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
left: -2px;
top:0;
background: #000;
}
}
}
}
.right-menu {
display: inline-block;
// background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 280px;
text-align: right;
float: right;
&::after {
content: '';
clear: both;
}
.menu-title {
height: 115px;
img {
display: inline-block;
width: auto;
height: 100%;
}
margin-bottom: 96px;
}
.menu-list {
border-right: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
line-height: 45px;
height: 45px;
padding-right: 25px;
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.active {
color: #000000;
// border-left: 6px solid #000000;
&::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
right: -2px;
top:0;
background: #000;
}
}
}
}
// 招贤纳士
//解决方案
@media only screen and (max-width: 1212px) {
.jobs .block .detail{width: 28%;}
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 750px) {
.jobs .block .detail{width: 40%;}
}
@media only screen and (max-width: 440px) {
.jobs .block .detail{width: 95%;}
.jobs .block .pdr24{padding-right: 0px;}
}
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