Skip to content

html / bdideal

Go to a project
Commit 0079a026 by hank
Options

关于我们移动端

parent 61b577d1
Showing with 479 additions and 8 deletions
html/about.html
......@@ -30,6 +30,7 @@
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=orRAyNA22FrzmG9B61BkNQZPI1KR41tO"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<script src="../js/rem.js"></script>
</head>
<body>
......@@ -125,7 +126,7 @@
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="item item2 hidden-sm hidden-xs">
<div class="item item2 hidden-sm ">
<div class="title">
数字化体系
</div>
......@@ -135,7 +136,7 @@
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="item item3 hidden-sm hidden-xs" >
<div class="item item3 hidden-sm " >
<div class="title">
视觉互动体验
</div>
......@@ -160,10 +161,10 @@
<div class="item">
<img src="../img/personal2.png" alt="">
</div>
<div class="item hidden-xs hidden-sm">
<div class="item hidden-sm">
<img src="../img/personal3.png" alt="">
</div>
<div class="item hidden-sm hidden-md hidden-xs">
<div class="item hidden-sm hidden-md ">
<img src="../img/personal4.png" alt="">
</div>
......@@ -173,10 +174,12 @@
</div>
</div>
<div class="container patners" >
<img src="../img/patners.png" alt="">
<img class="hidden-xs" src="../img/patners.png" alt="">
<img class="visible-xs" src="../img/patners02.png" alt="">
</div>
<div class="container map-container" >
<div id="map" class="visible-lg visible-md"></div>
<div class="kuang visible-xs"></div>
<div id="map" class="visible-lg visible-md visible-xs"></div>
<div class="introduce">
<div class="top">
<div class="line1"></div>
......@@ -187,7 +190,7 @@
<div class="bottom">
<p>客户咨询:010-58060808</p>
<p>平台服务:400-061-2966</p>
<br>
<br >
<p>EMAIL: service@9ideal.com</p>
<p>总部地址:北京市海淀区知春路盈都大 厦D座3010</p>
</div>
......@@ -228,8 +231,11 @@
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<p class="weixin-img">
<img src="/img//weixin.png" alt="" />
<object data="" type="">
<div>扫一扫获取更多资讯</div>
</object>
</p>
<div>扫一扫获取更多资讯</div>
</div>
</div>
</div>
......
style/about.css
......@@ -462,3 +462,229 @@ ul {
padding-right: 0px;
}
}
@media (max-width: 768px) {
body .main-container {
height: 240px;
margin-top: 50px;
}
body .main-container .word-box {
position: absolute;
padding-left: 20px;
padding-top: 10%;
z-index: 555;
width: 80%;
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height: auto;
padding-top: 30px;
}
.our-products .our {
background: url('../img/bg602.png') no-repeat left top;
background-size: 98% auto;
height: 450px;
position: relative;
}
.our-products .our .word {
padding-top: 1.2rem;
margin-left: 0.2rem;
color: rgba(0, 0, 0, 0.7);
font-size: 0.22rem;
width: 6.4rem;
height: 2.6rem;
line-height: 0.4rem;
}
.our-products .our .word p {
margin-bottom: 0.1rem;
text-indent: 0.45rem;
}
.our-products .our .bottom-container {
width: auto;
height: auto;
position: relative;
bottom: 0;
left: 0.05rem;
padding-top: 2.5rem;
}
.our-products .our .bottom-container .item {
background: url(../img/p1-1.jpg) center no-repeat;
background-size: cover;
width: 6.7rem;
height: 3.83rem;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
-webkit-transition: all 1s;
transition: all 1s;
margin-bottom: 0.29rem;
}
.our-products .our .bottom-container .item:hover {
background-size: 120%;
}
.our-products .our .bottom-container .item .title {
padding-top: 50px;
font-size: 24px;
font-weight: bold;
padding-bottom: 30px;
}
.our-products .our .bottom-container .item2 {
background-image: url(../img/p1-2.jpg);
}
.our-products .our .bottom-container .item3 {
background-image: url(../img/p1-3.jpg);
}
.our-products .views-content {
position: absolute;
z-index: 999;
top: 100px;
left: 7%;
}
.our-products .views-content img {
width: 100%;
height: 100%;
}
.our-products .views-content a {
position: absolute;
bottom: 40px;
right: 40px;
text-align: center;
width: 107.2px;
height: 31.2px;
line-height: 31.2px;
font-size: 14.5px;
}
.our-products .views-content .one {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
background: url('../img/03_01.png') no-repeat top center;
position: relative;
width: 378px;
height: 588px;
display: inline-block;
margin-right: 20px;
padding: 169px 35px 0 35px;
font-size: 16px;
color: #939393;
}
.our-products .views-content .one blockquote {
color: #B5B5B5;
padding: 0;
font-size: 14px;
line-height: 30px;
border: none;
}
.strength {
height: auto;
padding-top: 1.5rem;
margin: 0 ;
background: #000;
background: url('../img/bg702.png') no-repeat top right;
background-size: 98% auto;
}
.strength .list {
padding-top: 2.2rem;
padding-left: .25rem;
}
.strength .list .item {
display: inline-block;
margin-left: 0rem;
width: 3.2rem;
height: 4rem;
}
.strength .list img {
width: 100%;
display: inline-block;
-webkit-transition: all 1s;
transition: all 1s;
}
.strength .list img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.patners {
padding-top: 2rem;
padding-bottom: 0rem;
padding-left: 0.4rem;
}
.patners img {
width: 100%;
}
.map-container {
position: relative;
height: 617px;
background: url('../img/bg802.png') no-repeat top center;
background-size: 93% auto;
}
.map-container .kuang {
content: "";
position: absolute;
z-index: 1;
top: 7.2rem;
left: 1rem;
width: 5.9rem;
height: 3.3rem;
border: 3px solid rgba(199, 1, 81, 0.2);
}
.map-container #map {
width: 5.9rem;
height: 3.3rem;
position: absolute;
z-index: 4;
top: 7.5rem;
left: 0.8rem;
border: 2px solid #D6D6D6 ;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) inset;
}
.map-container .introduce {
margin-left: 0.2rem;
width: 6.2rem;
height: 3.42rem;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
margin-top: 3.3rem;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
padding-left: 34px;
}
.map-container .introduce .top {
padding-top: 0.5rem;
}
.map-container .introduce .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.map-container .introduce .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.map-container .introduce .top .name {
font-size: 0.25rem;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 0.26rem;
padding-bottom: 0.1rem;
}
.map-container .introduce .top .en {
font-size: 0.2rem;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 0.2rem;
}
.map-container .introduce .bottom {
padding-top: 0.2rem;
color: #979797;
font-size: 0.22rem;
line-height: 0.25rem;
}
.map-container .introduce .bottom p {
margin-bottom: 0.1rem;
}
}
style/about.less
......@@ -489,3 +489,241 @@ ul {
.jobs .block .detail{width: 95%;}
.jobs .block .pdr24{padding-right: 0px;}
}
@media (max-width: 768px) {
body .main-container {
height: 240px;
margin-top: 50px;
.word-box {
position: absolute;
padding-left: 20px;
padding-top: 10%;
z-index: 555;
width: 80%;
}
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height:auto;
padding-top: 30px;
.our {
background: url('../img/bg602.png') no-repeat left top;
background-size: 98% auto;
height:450px;
position: relative;
.word {
padding-top: 1.2rem;
margin-left: 0.2rem;
color: rgba(0, 0, 0, 0.7);
font-size: 0.22rem;
width:6.4rem;
height:2.6rem;
line-height: 0.4rem;
p {
margin-bottom:0.1rem;
text-indent: 0.45rem;
}
}
.bottom-container {
width:auto;
height:auto;
position: relative;
bottom: 0;
left: 0.05rem;
padding-top: 2.5rem;
// background: #333333;
.item {
background: url(../img/p1-1.jpg) center no-repeat;
background-size: cover;
width:6.7rem;
height:3.83rem;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
-webkit-transition: all 1s;
transition: all 1s;
margin-bottom: 0.29rem;
&:hover {
background-size: 120%;
}
.title {
padding-top: 50px;
font-size: 24px;
font-weight: bold;
padding-bottom: 30px;
}
}
.item2 {
background-image: url(../img/p1-2.jpg);
}
.item3 {
background-image: url(../img/p1-3.jpg);
}
}
}
.views-content {
position: absolute;
z-index: 999;
top: 100px;
left: 7%;
img {
width: 100%;
height: 100%;
}
a {
position: absolute;
bottom: 40px;
right: 40px;
text-align: center;
width:107.2px;
height:31.2px;
line-height: 31.2px;
font-size: 14.5px;
}
.one {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
background: url('../img/03_01.png') no-repeat top center;
position: relative;
width:378px;
height:588px;
display: inline-block;
margin-right: 20px;
padding: 169px 35px 0 35px;
font-size:16px;
color:#939393;
blockquote {
color: #B5B5B5;
padding: 0;
font-size: 14px;
line-height: 30px;
border: none;
}
}
}
}
.strength {
height: auto;
padding-top: 1.5rem;
margin:0 ;
background: #000;
background: url('../img/bg702.png') no-repeat top right;
background-size: 98% auto;
// background-position: right top;
.list {
padding-top: 2.2rem;
padding-left: .25rem;
.item {
display: inline-block;
margin-left: 0rem;
width:3.2rem;
height:4rem;
}
img {
width: 100%;
display: inline-block;
-webkit-transition: all 1s;
transition: all 1s;
&:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
}
}
.patners {
padding-top: 2rem;
padding-bottom: 0rem;
padding-left: 0.4rem;
img {
width: 100%;
}
}
.map-container {
position: relative;
height: 617px;
background: url('../img/bg802.png') no-repeat top center;
background-size: 93% auto;
.kuang {
content: "";
position: absolute;
z-index: 1;
top: 7.2rem;
left: 1rem;
width: 5.9rem;
height:3.3rem;
border: 3px solid rgba(199,1,81,0.2);
}
#map {
width: 5.9rem;
height:3.3rem;
position: absolute;
z-index: 4;
top: 7.5rem;
left: 0.8rem;
border: 2px solid #D6D6D6 ;
// -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) inset;box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) inset;
&::after {
}
}
.introduce {
margin-left: 0.2rem;
width:6.2rem;
height:3.42rem;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
margin-top: 3.3rem;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
padding-left: 34px;
.top {
padding-top: 0.5rem;
.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:0.25rem;
font-weight:400;
color:rgba(199,1,81,1);
line-height: 1;
padding-top: 0.26rem;
padding-bottom:0.1rem;
}
.en {
font-size:0.2rem;
font-weight:300;
line-height: 1;
color:rgba(199,1,81,1);
padding-bottom: 0.2rem;
}
}
.bottom {
padding-top: 0.2rem;
color: #979797;
font-size: 0.22rem;
line-height: 0.25rem;
p {
margin-bottom: 0.1rem;
}
}
}
}
}
\ No newline at end of file
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