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 @@
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="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 ">
<div class="container relative">
<div class="word-box">
<p class="line1"></p>
......@@ -123,7 +84,7 @@
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">
智慧城市可视化管控平台
</p>
<p class="conword animated bounceInRight" style="animation-delay: 0.4s;">
<p class="conword animated bounceInRight" style="animation-delay: 02s;">
<li>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
......@@ -136,6 +97,7 @@
<p class="line2"></p>
</div>
</div>
<img src="../img/bg4_small.png" alt="" class="qiu">
</div>
</div>
......@@ -165,8 +127,13 @@
</div>
</div>
<div class="earth">
<img src="../img/earth1.png" alt="" />
<img src="../img/earthselect.png" class="select animated rotateIn infinite" alt="" />
<img class="earth-bg" src="../img/earth2.png" 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>
......@@ -443,7 +410,8 @@
on:{
transitionEnd: function(swiper){
// alert('过渡结束');
console.log(mySwiper.activeIndex)
computeMasking()
// console.log(mySwiper.activeIndex)
},
}
// spaceBetween: 30,
......@@ -493,11 +461,40 @@
.children();
list_item.hide();
mySwiper.slideTo(0, 1000, false);
list_item.eq(index).show();
list_item.eq(0).show();
list_item.eq(index+1).show();
});
}
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>
......
style/index.less
......@@ -188,6 +188,7 @@ ul {
height: 80%;
// background-color: #ccc;
position: relative;
.word-box {
// position: absolute;
padding-left: 20px;
......
style/products.less
......@@ -97,14 +97,20 @@ ul {
margin: auto;
width: 100%;
height: 80%;
.qiu {
position: absolute;
bottom: 0;
left: 10%;
z-index: 1
}
// background-color: #ccc;
position: relative;
.word-box {
// position: absolute;
position: absolute;
padding-left: 20px;
padding-top: 10%;
top: 18.5%;
left: 15%;
// top: 18.5%;
// left: 15%;
z-index: 555;
width: 80%;
p.line1 {
......@@ -265,7 +271,22 @@ ul {
position: absolute;
left: 37px;
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 {
......@@ -410,6 +431,7 @@ ul {
}
.solution {
padding-top: 50px;
padding-bottom: 50px;
.table-a {
margin-bottom: 20px;
}
......@@ -453,8 +475,25 @@ ul {
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;
}
}
.show-mask {
&::after {
opacity: 1;
}
}
}
......@@ -462,7 +501,7 @@ ul {
.item {
width:374px;
height: 300px;
margin-left: 26px;
margin-right: 26px;
margin-bottom: 27px;
position: relative;
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