Skip to content

html / bdideal

Go to a project
Commit 1993f14f by hank
Options

我们的产品

parent 8e2aa2e4
Showing with 87 additions and 50 deletions
html/products.html
...@@ -73,47 +73,8 @@ ...@@ -73,47 +73,8 @@
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-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;">智慧城市可视化管控平台
</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">
<li>· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。
· 完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
</li>
<li>
· 丰富海量算法模型、数据模板、图形图表组件、满足广泛行业。
· 完善 API 接口，实现数据实时同步，动态展示。
</li>
</p>
<a target="_blank animated bounceInRight" href="" class="linkword">
<i></i> 查看详情
</a>
</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>
</div> --> <div class="container relative">
<div class="container ">
<div class="word-box"> <div class="word-box">
<p class="line1"></p> <p class="line1"></p>
...@@ -123,7 +84,7 @@ ...@@ -123,7 +84,7 @@
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;"> <p class="btword animated bounceInRight " style="animation-delay: 0.7s;">
智慧城市可视化管控平台 智慧城市可视化管控平台
</p> </p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;"> <p class="conword animated bounceInRight" style="animation-delay: 02s;">
<li> <li>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 · · 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。 完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
...@@ -136,6 +97,7 @@ ...@@ -136,6 +97,7 @@
<p class="line2"></p> <p class="line2"></p>
</div> </div>
</div> </div>
<img src="../img/bg4_small.png" alt="" class="qiu">
</div> </div>
</div> </div>
...@@ -165,8 +127,13 @@ ...@@ -165,8 +127,13 @@
</div> </div>
</div> </div>
<div class="earth"> <div class="earth">
<img src="../img/earth1.png" alt="" /> <img class="earth-bg" src="../img/earth2.png" alt="" />
<img src="../img/earthselect.png" class="select animated rotateIn infinite" alt="" /> <!-- animated rotateIn infinite -->
<img src="../img/earthselect.png" class="select " alt="" />
<div class="ctr-container">
<div class="left-btn ctr-btn" ></div>
<div class="right-btn ctr-btn"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -443,7 +410,8 @@ ...@@ -443,7 +410,8 @@
on:{ on:{
transitionEnd: function(swiper){ transitionEnd: function(swiper){
// alert('过渡结束'); // alert('过渡结束');
console.log(mySwiper.activeIndex) computeMasking()
// console.log(mySwiper.activeIndex)
}, },
} }
// spaceBetween: 30, // spaceBetween: 30,
...@@ -493,11 +461,40 @@ ...@@ -493,11 +461,40 @@
.children(); .children();
list_item.hide(); list_item.hide();
mySwiper.slideTo(0, 1000, false); mySwiper.slideTo(0, 1000, false);
list_item.eq(index).show(); list_item.eq(0).show();
list_item.eq(index+1).show();
}); });
} }
tab(); tab();
$('.earth .left-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', "../img/earth1.png");
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(0deg)'
})
})
$('.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() {
var getTranslate = mySwiper.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()
}); });
</script> </script>
......
style/index.less
...@@ -188,6 +188,7 @@ ul { ...@@ -188,6 +188,7 @@ ul {
height: 80%; height: 80%;
// background-color: #ccc; // background-color: #ccc;
position: relative; position: relative;
.word-box { .word-box {
// position: absolute; // position: absolute;
padding-left: 20px; padding-left: 20px;
......
style/products.less
...@@ -97,14 +97,20 @@ ul { ...@@ -97,14 +97,20 @@ ul {
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 80%; height: 80%;
.qiu {
position: absolute;
bottom: 0;
left: 10%;
z-index: 1
}
// background-color: #ccc; // background-color: #ccc;
position: relative; position: relative;
.word-box { .word-box {
// position: absolute; position: absolute;
padding-left: 20px; padding-left: 20px;
padding-top: 10%; padding-top: 10%;
top: 18.5%; // top: 18.5%;
left: 15%; // left: 15%;
z-index: 555; z-index: 555;
width: 80%; width: 80%;
p.line1 { p.line1 {
...@@ -265,7 +271,22 @@ ul { ...@@ -265,7 +271,22 @@ ul {
position: absolute; position: absolute;
left: 37px; left: 37px;
top: 3px; top: 3px;
transform-origin: 80% 60% !important; transition: all 1s;
// display: none;
}
.ctr-container {
position: absolute;
width: 621px;
height: 443px;
top: 0;
overflow: hidden;
.ctr-btn {
display: inline-block;
width: 50%;
height: 100%;
float: left;
}
} }
} }
.views-content { .views-content {
...@@ -410,6 +431,7 @@ ul { ...@@ -410,6 +431,7 @@ ul {
} }
.solution { .solution {
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px;
.table-a { .table-a {
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -453,8 +475,25 @@ ul { ...@@ -453,8 +475,25 @@ ul {
margin-right: auto; margin-right: auto;
display: block; display: block;
.swiper-slide { .swiper-slide {
position: relative;
width: auto; width: auto;
height: 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;
}
}
.show-mask {
&::after {
opacity: 1;
}
} }
} }
...@@ -462,7 +501,7 @@ ul { ...@@ -462,7 +501,7 @@ ul {
.item { .item {
width:374px; width:374px;
height: 300px; height: 300px;
margin-left: 26px; margin-right: 26px;
margin-bottom: 27px; margin-bottom: 27px;
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);
......
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