Skip to content

html / bdideal

Go to a project
Commit 8e2aa2e4 by hank
Options

首页更改

parent e3e03af8
Showing with 192 additions and 48 deletions
html/index.html
......@@ -31,7 +31,7 @@
<body>
<div class="main-container">
<div class="navbar-container">
<div class="navbar-container nav-absolute-container">
<div class="navbar navbar-inverse ">
<!-- data-spy="affix" data-offset-top="1" -->
<nav role="navigation">
......@@ -61,37 +61,55 @@
</nav>
</div>
</div>
<div id="banner" class="" style="height: 552px;
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="swiper-container">
<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;">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>
</div>
<a href="" class="img-container">
<img src="../img/banner1.jpg" alt="">
</a>
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">ART AND TECHNOLOGY INTEGRATION</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 class="swiper-slide banner2">
<div class="word-box"></div>
<a href="" class="img-container">
<img src="../img/banner2.jpg" alt="">
</a>
<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 class="swiper-slide banner3">
<div class="word-box"></div>
<a href="" class="img-container">
<img src="../img/banner3.jpg" alt="">
</a>
<div class="container ">
<div class="word-box">
<p class="line1"></p>
<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>
<!-- 如果需要分页器 -->
......@@ -103,6 +121,11 @@
<!-- 如果需要滚动条 -->
</div>
<!-- <div id="banner" class="" style="height: 552px;
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;">
<div class="container ">
<div class="word-box">
<p class="line1"></p>
......@@ -113,7 +136,7 @@
<p class="line2"></p>
</div>
</div>
</div>
</div> -->
</div>
<!-- <div class="tab-container">
......@@ -514,7 +537,7 @@
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: 1500,
autoplay: 3000,
paginationClickable: true,
// 如果需要分页器
pagination: '.swiper-pagination',
......
style/index.less
......@@ -74,9 +74,98 @@ ul {
}
}
.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 ;
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 {
height: 100vh;
......@@ -85,7 +174,7 @@ ul {
left: 0;
top: 0;
width: 100%;
z-index: -1;
z-index: -2;
-webkit-transition: all 0.9s;
transition: all 0.9s;
}
......
style/products.less
......@@ -157,7 +157,7 @@ ul {
.swiper-container {
width: 100%;
height: 100%;
.img-container {
height: 100%;
width: 100%;
......@@ -417,18 +417,53 @@ ul {
float: right;
width: 860px;
display: inline-block;
height: 672px;
overflow: hidden;
// 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 {
height: 672px;
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 {
width: auto;
height: auto;
}
}
}
.item {
width:374px;
height: 300px;
margin-left: 9px;
margin-bottom: 9px;
float: left;
margin-left: 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;
......@@ -447,25 +482,22 @@ ul {
height: 100%;
}
}
.item-title {
display: none;
position: absolute;
bottom: 6px;
padding-left: 20px;
color: #fff;
overflow: hidden;
font-size: 18px;
padding-left: 19px;
padding-top: 22px;
font-size:18px;
font-weight:400;
color:rgba(0,0,0,1);
}
&:hover {
img {
transform: scale(1.1);
transition: all 0.5s;
}
.item-title {
display: block;
}
}
}
.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