Skip to content

html / bdideal

Go to a project
Commit cd778c9f by hank
Options

首页

parent 3a004fef
Showing with 347 additions and 32 deletions
html/solution.html
......@@ -69,30 +69,16 @@
<div class="swiper-wrapper">
<div class="swiper-slide banner1">
<div class="word-box">
<p class="btword animated bounceInRight " style="animation-delay: 1s;">我们是将科技与艺术完美结合的大数据可视化团队</p>
<p class="btworden animated bounceInRight" style="animation-delay: 0.7s;">Perfect Combination of Science
and Technology and Art</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">我们坚持用科技创造艺术的理想，不断走在视觉艺术的最前沿。</p>
<a target="_blank animated bounceInRight" href="" class="linkword">
<i></i> 查看详情
</a>
<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 class="swiper-slide banner2">
<div class="word-box"></div>
<a href="" class="img-container">
<img src="../img/banner2.jpg" alt="">
</a>
</div>
<div class="swiper-slide banner3">
<div class="word-box"></div>
<a href="" class="img-container">
<img src="../img/banner3.jpg" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
......@@ -105,7 +91,117 @@
</div>
</div>
</div>
<div class="solution-container">
<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>
<div class="field-item">
展览展厅
</div>
</div>
</div>
<div class="case">
<div class="common-title">
合作案例
</div>
<div class="case-list" id="masonry">
<div class="case-item" >
<img src="http://bdideal.com/asset/img/homepro1.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
<div class="case-item" >
<img src="http://bdideal.com/asset/img/homepro2.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
<div class="case-item" >
<img src="http://bdideal.com/asset/img/homepro3.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
<div class="case-item" >
<img src="http://bdideal.com/asset/img/homepro4.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
<div class="case-item" >
<img src="http://bdideal.com/asset/img/homepro5.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
<div class="case-item">
<img src="http://bdideal.com/asset/img/homepro6.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
<div class="case-item" >
<img src="http://bdideal.com/asset/img/homepro7.jpg" alt="">
<div class="bottom-container">
<div class="title">
华夏幸福产业地图
</div>
<div class="tag">
• 客群画像 • 视频直播
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;">
<div class="container">
......@@ -157,17 +253,18 @@
<!-- 加载 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="../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', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: 1500,
paginationClickable: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination',
// 如果需要前进后退按钮
// navigation: {
......@@ -179,7 +276,15 @@
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
});
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.case-item',
gutter: 20,
isAnimated: true,
});
});
});
</script>
......
img/time.png 0 → 100644
img/time.png

321 Bytes
img/weixin.png
img/weixin.png

40.7 KB | W: | H:

img/weixin.png

10.4 KB | W: | H:

img/weixin.png
img/weixin.png
img/weixin.png
img/weixin.png
  • 2-up
  • Swipe
  • Onion skin
js/banner.js
resize = function() {
var height = window.innerHeight - 71;
if(height< 690) {
if(height< 552) {
$('#banner').css({
height: height
});
......@@ -14,14 +14,14 @@ resize = function() {
position: ''
})
}
if(window.innerWidth< 1920) {
if(window.innerWidth< 1200) {
$('#banner.img-container img').css({
"left": -(1920-window.innerWidth)/2
"left": -(1200-window.innerWidth)/2
})
$('#banner').css({
height: window.innerWidth/1920*690 <300 ? 300 : window.innerWidth/1920*690
height: window.innerWidth/1200*552 <300 ? 300 : window.innerWidth/1200*552
});
// console.log(window.innerWidth/1920*690)
// console.log(window.innerWidth/1200*552)
// if(window.innerWidth<768) {
// $('#banner').css({
// height: 300
......
js/partticles.js 0 → 100644
particlesJS("particles-js", {
particles: {
number: {
value: 5,
density: {
enable: !0,
value_area: 90
}
},
color: {
value: ["#c1e0ed", "#c9d0d3", "#e7f3f8", "#ededed", "#ededed"]
},
shape: {
type: "circle",
stroke: {
width: 0,
color: ["#dbdede", "#153548", "#45c2fd"]
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 1,
random: !0,
anim: {
enable: !0,
speed: 1,
opacity_min: .9,
sync: !1
}
},
size: {
value: 3.5,
random: !0,
anim: {
enable: !1,
speed: 1e3,
size_min: 2.5,
sync: !1
}
},
line_linked: {
enable: !0,
distance: 150,
color: "#dbdede",
opacity: .8,
width: 1
},
move: {
enable: !0,
speed: 2,
direction: "none",
random: !1,
straight: !1,
out_mode: "out",
bounce: !1,
attract: {
enable: !1,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: !0,
mode: "grab"
},
onclick: {
enable: !0,
mode: "push"
},
resize: !0
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: .4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: !0
});particlesJS("particles-js", {
particles: {
number: {
value: 5,
density: {
enable: !0,
value_area: 90
}
},
color: {
value: ["#c1e0ed", "#c9d0d3", "#e7f3f8", "#ededed", "#ededed"]
},
shape: {
type: "circle",
stroke: {
width: 0,
color: ["#dbdede", "#153548", "#45c2fd"]
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 1,
random: !0,
anim: {
enable: !0,
speed: 1,
opacity_min: .9,
sync: !1
}
},
size: {
value: 3.5,
random: !0,
anim: {
enable: !1,
speed: 1e3,
size_min: 2.5,
sync: !1
}
},
line_linked: {
enable: !0,
distance: 150,
color: "#dbdede",
opacity: .8,
width: 1
},
move: {
enable: !0,
speed: 2,
direction: "none",
random: !1,
straight: !1,
out_mode: "out",
bounce: !1,
attract: {
enable: !1,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: !0,
mode: "grab"
},
onclick: {
enable: !0,
mode: "push"
},
resize: !0
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: .4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: !0
});
\ No newline at end of file
style/common.css
......@@ -29,7 +29,7 @@ html, body {
body {
font-size: 14px;
font-family: 'Microsoft yahei', arial, Tahoma, Verdana, sans-serif;
padding-top: 70px;
/* padding-top: 70px; */
}
/* custom */
......@@ -1248,7 +1248,7 @@ a.caseMore:hover span.words {
}
body {
padding-top: 50px;
/* padding-top: 50px; */
}
#header {
......
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