Skip to content

html / bdideal

Go to a project
Commit 25ebb4d3 by hank
Options

首页我们的产品

parent 7aa05571
Showing with 251 additions and 48 deletions
html/index.html
...@@ -139,14 +139,6 @@ ...@@ -139,14 +139,6 @@
</div> --> </div> -->
</div> </div>
<!-- <div class="tab-container">
<ul>
<li>专业数据平台</li>
<li>先进解决方案</li>
<li>技术驱动创新</li>
<li>图形震撼创业</li>
</ul>
</div> -->
<div class="main2-container"> <div class="main2-container">
<div class="our-products"> <div class="our-products">
...@@ -157,12 +149,38 @@ ...@@ -157,12 +149,38 @@
<div class="">将纷繁的数字变成一道令人兴奋与震撼的风景线</div> <div class="">将纷繁的数字变成一道令人兴奋与震撼的风景线</div>
</div> </div>
<div class="views-content"> <div class="views-content">
<div class="one animated fadeInUp" style="animation-delay: 0.2s;"> <div class="one animated fadeInUp left-item" style="animation-delay: 0.2s;">
<img src="../img/02_01.png" alt=""> <!-- <img src="../img/02_01.png" alt=""> -->
<div class="introduce">
<div class="top">
<div class="line1"></div>
<div class="name">智慧城市可视化管控平台</div>
<div class="en">Smart City Visualization Platform</div>
<div class="line2"></div>
</div>
<div class="bottom">
<p>> 毫秒级数据采集，全类型数据汇聚</p>
<p>> 探索全量企业数据，充分发挥大数据价值</p>
<p>> 实时分布式计算平台，构建大数据算力</p>
</div>
</div>
<a href="">进入详情</a> <a href="">进入详情</a>
</div> </div>
<div class="two animated fadeInUp" style="animation-delay: 0.5s;"> <div class="two animated fadeInUp left-item" style="animation-delay: 0.5s;">
<img src="../img/02_02.png" alt=""> <!-- <img src="../img/02_02.png" alt=""> -->
<div class="introduce">
<div class="top">
<div class="line1"></div>
<div class="name">企业智慧可视化管控平台</div>
<div class="en">Enterprise Intelligence Visualization Control Platform</div>
<div class="line2"></div>
</div>
<div class="bottom">
<p>> 兼容各种数据源类型，支持海量数据</p>
<p>> 多平台数据可视化展现</p>
<p>> 运营决策分析，规避企业风险</p>
</div>
</div>
<a href="">进入详情</a> <a href="">进入详情</a>
</div> </div>
</div> </div>
......
style/index.css
...@@ -294,11 +294,12 @@ ul { ...@@ -294,11 +294,12 @@ ul {
position: relative; position: relative;
background-size: 100%; background-size: 100%;
font-size: 18px; font-size: 18px;
height: 450px; height: 500px;
} }
.our-products .our { .our-products .our {
background: url('../img/kuang.png') no-repeat center; background: url('../img/kuang.png') no-repeat center;
background-size: 95%; background-size: 98%;
background-position: 0 100px;
height: 450px; height: 450px;
} }
.our-products .word-right { .our-products .word-right {
...@@ -333,7 +334,7 @@ ul { ...@@ -333,7 +334,7 @@ ul {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: -40px; top: -40px;
left: 7%; left: 5%;
} }
.our-products .views-content img { .our-products .views-content img {
width: 100%; width: 100%;
...@@ -349,12 +350,103 @@ ul { ...@@ -349,12 +350,103 @@ ul {
line-height: 31.2px; line-height: 31.2px;
font-size: 14.5px; font-size: 14.5px;
} }
.our-products .views-content .left-item a {
display: inline-block;
color: #A7A7A7;
border: 1px solid #A7A7A7;
cursor: pointer;
}
.our-products .views-content .left-item:hover .introduce {
background: url('../img/index_02bgpink.png') no-repeat top center;
background-size: cover;
}
.our-products .views-content .left-item:hover .introduce .top {
padding-top: 60px;
}
.our-products .views-content .left-item:hover .introduce .top .line1 {
width: 169px;
height: 1px;
background: #fff;
}
.our-products .views-content .left-item:hover .introduce .top .line2 {
width: 33px;
height: 1px;
background: #fff;
}
.our-products .views-content .left-item:hover .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #fff;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.our-products .views-content .left-item:hover .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #fff;
padding-bottom: 18px;
}
.our-products .views-content .left-item:hover .introduce .bottom {
padding-top: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
}
.our-products .views-content .left-item:hover a {
display: inline-block;
color: #fff;
border: 1px solid #ffffff;
}
.our-products .views-content .introduce {
width: 340px;
height: 411px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding-left: 34px;
}
.our-products .views-content .introduce .top {
padding-top: 60px;
}
.our-products .views-content .introduce .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.our-products .views-content .introduce .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.our-products .views-content .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.our-products .views-content .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.our-products .views-content .introduce .bottom {
padding-top: 40px;
color: #979797;
font-size: 14px;
line-height: 30px;
}
.our-products .views-content .one { .our-products .views-content .one {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
float: left;
position: relative; position: relative;
width: 302px; width: 340px;
height: 365px; height: 411px;
display: inline-block; display: inline-block;
margin-right: 20px; margin-right: 20px;
} }
...@@ -362,24 +454,18 @@ ul { ...@@ -362,24 +454,18 @@ ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.our-products .views-content .one a { .our-products .views-content .one::after {
display: inline-block; content: "";
color: #A7A7A7; clear: both;
border: 1px solid #A7A7A7;
cursor: pointer;
} }
.our-products .views-content .two { .our-products .views-content .two {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 302px; width: 340px;
height: 365px; height: 411px;
} float: left;
.our-products .views-content .two a {
display: inline-block;
color: #fff;
border: 1px solid #ffffff;
} }
.left-menu { .left-menu {
display: inline-block; display: inline-block;
......
style/index.less
...@@ -317,10 +317,11 @@ ul { ...@@ -317,10 +317,11 @@ ul {
position: relative; position: relative;
background-size: 100%; background-size: 100%;
font-size: 18px; font-size: 18px;
height:450px; height: 500px;
.our { .our {
background: url('../img/kuang.png') no-repeat center; background: url('../img/kuang.png') no-repeat center;
background-size: 95%; background-size: 98%;
background-position: 0 100px;
height:450px; height:450px;
} }
.word-right { .word-right {
...@@ -354,9 +355,10 @@ ul { ...@@ -354,9 +355,10 @@ ul {
} }
.views-content { .views-content {
position: absolute; position: absolute;
// overflow: hidden;
z-index: 999; z-index: 999;
top: -40px; top: -40px;
left: 7%; left: 5%;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -372,39 +374,136 @@ ul { ...@@ -372,39 +374,136 @@ ul {
font-size: 14.5px; font-size: 14.5px;
} }
.left-item {
a {
display: inline-block;
color: #A7A7A7;
border:1px solid #A7A7A7;
cursor: pointer;
}
&:hover {
.introduce {
// background-image: url('') !important;
background: url('../img/index_02bgpink.png') no-repeat top center;
background-size: cover;
.top {
padding-top: 60px;
.line1 {
width:169px;
height:1px;
// background:rgba(199,1,81,1);
background: #fff;
}
.line2 {
width:33px;
height:1px;
background: #fff; }
.name{
font-size:24px;
font-weight:400;
color: #fff;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.en {
font-size:12px;
font-weight:300;
line-height: 1;
color:#fff;
padding-bottom: 18px;
}
}
.bottom {
padding-top: 40px;
color: #fff;
font-size: 14px;
line-height: 30px;
}
}
a {
display: inline-block;
color: #fff;
border:1px solid #ffffff;
}
}
}
.introduce {
width:340px;
height: 411px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding-left: 34px;
.top {
padding-top: 60px;
.line1 {
width:169px;
height:1px;
background:rgba(199,1,81,1);
}
.line2 {
width:33px;
height:1px;
background:rgba(199,1,81,1);
}
.name{
font-size:24px;
font-weight:400;
color:rgba(199,1,81,1);
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.en {
font-size:12px;
font-weight:300;
line-height: 1;
color:rgba(199,1,81,1);
padding-bottom: 18px;
}
}
.bottom {
padding-top: 40px;
color: #979797;
font-size: 14px;
line-height: 30px;
}
}
.one { .one {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
float: left;
position: relative; position: relative;
width:302px; width:340px;
height:365px; height: 411px;
display: inline-block; display: inline-block;
margin-right: 20px; margin-right: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
a {
display: inline-block; }
color: #A7A7A7; .one::after {
border:1px solid #A7A7A7; content: "";
cursor: pointer; clear: both;
}
} }
.two { .two {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
display: inline-block; display: inline-block;
position: relative; position: relative;
width:302px; width:340px;
height:365px; height: 411px;
a { float: left;
display: inline-block; // a {
color: #fff; // display: inline-block;
border:1px solid #ffffff; // color: #fff;
} // border:1px solid #ffffff;
// }
} }
} }
} }
......
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