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 @@
</div> -->
</div>
<!-- <div class="tab-container">
<ul>
<li>专业数据平台</li>
<li>先进解决方案</li>
<li>技术驱动创新</li>
<li>图形震撼创业</li>
</ul>
</div> -->
<div class="main2-container">
<div class="our-products">
......@@ -157,12 +149,38 @@
<div class="">将纷繁的数字变成一道令人兴奋与震撼的风景线</div>
</div>
<div class="views-content">
<div class="one animated fadeInUp" style="animation-delay: 0.2s;">
<img src="../img/02_01.png" alt="">
<div class="one animated fadeInUp left-item" style="animation-delay: 0.2s;">
<!-- <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>
</div>
<div class="two animated fadeInUp" style="animation-delay: 0.5s;">
<img src="../img/02_02.png" alt="">
<div class="two animated fadeInUp left-item" style="animation-delay: 0.5s;">
<!-- <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>
</div>
</div>
......
style/index.css
......@@ -294,11 +294,12 @@ ul {
position: relative;
background-size: 100%;
font-size: 18px;
height: 450px;
height: 500px;
}
.our-products .our {
background: url('../img/kuang.png') no-repeat center;
background-size: 95%;
background-size: 98%;
background-position: 0 100px;
height: 450px;
}
.our-products .word-right {
......@@ -333,7 +334,7 @@ ul {
position: absolute;
z-index: 999;
top: -40px;
left: 7%;
left: 5%;
}
.our-products .views-content img {
width: 100%;
......@@ -349,12 +350,103 @@ ul {
line-height: 31.2px;
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 {
-webkit-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;
width: 302px;
height: 365px;
width: 340px;
height: 411px;
display: inline-block;
margin-right: 20px;
}
......@@ -362,24 +454,18 @@ ul {
width: 100%;
height: 100%;
}
.our-products .views-content .one a {
display: inline-block;
color: #A7A7A7;
border: 1px solid #A7A7A7;
cursor: pointer;
.our-products .views-content .one::after {
content: "";
clear: both;
}
.our-products .views-content .two {
-webkit-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;
position: relative;
width: 302px;
height: 365px;
}
.our-products .views-content .two a {
display: inline-block;
color: #fff;
border: 1px solid #ffffff;
width: 340px;
height: 411px;
float: left;
}
.left-menu {
display: inline-block;
......
style/index.less
......@@ -317,10 +317,11 @@ ul {
position: relative;
background-size: 100%;
font-size: 18px;
height:450px;
height: 500px;
.our {
background: url('../img/kuang.png') no-repeat center;
background-size: 95%;
background-size: 98%;
background-position: 0 100px;
height:450px;
}
.word-right {
......@@ -354,9 +355,10 @@ ul {
}
.views-content {
position: absolute;
// overflow: hidden;
z-index: 999;
top: -40px;
left: 7%;
left: 5%;
img {
width: 100%;
height: 100%;
......@@ -372,39 +374,136 @@ ul {
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 {
-webkit-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;
width:302px;
height:365px;
width:340px;
height: 411px;
display: inline-block;
margin-right: 20px;
img {
width: 100%;
height: 100%;
}
a {
display: inline-block;
color: #A7A7A7;
border:1px solid #A7A7A7;
cursor: pointer;
}
}
.one::after {
content: "";
clear: both;
}
.two {
-webkit-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;
position: relative;
width:302px;
height:365px;
a {
display: inline-block;
color: #fff;
border:1px solid #ffffff;
}
width:340px;
height: 411px;
float: left;
// a {
// display: inline-block;
// 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