Skip to content

html / bdideal

Go to a project
Commit c6045877 by hank
Options

lessc => css

parent 9dd66e64
Showing with 2548 additions and 64 deletions
html/about.html
......@@ -22,9 +22,9 @@
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" href="../style/about.less" />
<script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<link rel="stylesheet" href="../style/about.css" />
<!-- <link rel="stylesheet/less" href="../style/about.less" />
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=orRAyNA22FrzmG9B61BkNQZPI1KR41tO"></script>
......
html/dynamic.html
......@@ -25,9 +25,9 @@
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" href="../style/solution.less">
<script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<link rel="stylesheet" href="../style/solution.css">
<!-- <script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
</head>
......
html/index.html
......@@ -22,9 +22,9 @@
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" href="../style/index.less">
<script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<link rel="stylesheet" href="../style/index.css">
<!-- <script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
</head>
......
html/products.html
......@@ -29,9 +29,9 @@
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" href="../style/products.less" />
<script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<link rel="stylesheet" href="../style/products.css" />
<!-- <script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
</head>
......
html/recruit.html
......@@ -22,9 +22,9 @@
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" href="../style/solution.less">
<script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<link rel="stylesheet" href="../style/solution.css">
<!-- <script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/tools.js"></script>
</head>
......
html/solution.html
......@@ -25,9 +25,9 @@
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet/less" href="../style/solution.less">
<script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script>
<link rel="stylesheet" href="../style/solution.css">
<!-- <script src="../js/less.min.js"></script>
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
</head>
......
style/about.css 0 → 100644
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
}
}
@media (max-width: 1920px) {
#banner .img-container img {
position: absolute;
}
}
.indent-32 {
text-indent: 32px;
}
ol,
ul {
margin-top: 0;
margin-bottom: 0px;
}
.link-active {
position: relative;
}
.link-active::after {
content: "";
width: 12px;
height: 2px;
background: #000;
position: absolute;
bottom: 0;
left: 15px;
}
.swiper-pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
.navbar-inverse {
background: none;
border: none;
margin-bottom: 0;
}
.navbar-container {
position: relative;
}
.navbar-container a {
color: black !important;
font-size: 16px;
}
#footer .footer-content {
padding-top: 40px;
padding-bottom: 40px;
}
#footer .footer-content .weixin-img {
text-align: center;
}
#footer .footer-content .weixin-img img {
max-width: 130px;
height: auto;
display: inline-block;
}
.main-container {
background: #E4E5E8 url('/img/bg5.png') top center no-repeat;
background-size: cover ;
height: 280px;
position: relative;
}
.main-container .word-box {
position: absolute;
padding-left: 20px;
padding-top: 4%;
z-index: 555;
width: 80%;
}
.main-container .word-box p.line1 {
width: 28px;
height: 1px;
background: #333333;
margin-bottom: 21px;
}
.main-container .word-box p.line2 {
width: 147px;
height: 1px;
background: #333333;
margin-top: 30px;
}
.main-container .word-box p.btword {
font-size: 24px;
color: #333333;
/* font-weight: bold; */
margin-bottom: 15px;
}
.main-container .word-box p.btworden {
font-size: 10px;
color: #333333;
}
.main-container .word-box p.conword {
font-size: 10px;
color: #333333;
line-height: 26px;
margin-top: 15px;
max-width: 466px;
text-align: justify;
}
.main-container .word-box 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;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#particles-js {
height: 100vh;
opacity: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.9s;
transition: all 0.9s;
}
.swiper-container {
display: none;
}
.relative {
position: relative;
}
.main2-container {
background: url('../img/paper.png') no-repeat top center;
background-size: 100% auto;
}
.main2-container .quan-bg {
background: url('../img/quan.png') no-repeat center;
background-size: 1200px ;
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height: 540px;
padding-top: 30px;
}
.our-products .our {
background: url('../img/bg6.png') no-repeat left;
background-size: 98% auto;
height: 450px;
position: relative;
}
.our-products .our .word {
padding-top: 160px;
margin-left: 108px;
color: #D6D6D6;
font-size: 16px;
width: 652px;
height: 147px;
line-height: 26px;
}
.our-products .our .word p {
margin-bottom: 30px;
}
.our-products .our .bottom-container {
width: 922px;
height: 173px;
position: absolute;
bottom: -80px;
left: 90px;
}
.our-products .our .bottom-container .item {
background: url(../img/p1-1.jpg) center no-repeat;
background-size: cover;
height: 173px;
width: 290px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.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.34901961);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
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: 534px;
margin-top: 89px;
background: #000;
background: url('../img/bg7.png') no-repeat top right;
background-size: 98% auto;
}
.strength .list {
padding-top: 150px;
padding-left: 80px;
}
.strength .list .item {
display: inline-block;
margin-left: -40px;
}
.strength .list img {
display: inline-block;
}
.patners {
padding-top: 100px;
padding-bottom: 134px;
}
.map-container {
position: relative;
height: 617px;
background: url('../img/bg8.png') no-repeat top center;
}
.map-container #map {
width: 591px;
height: 332px;
position: absolute;
top: 162px;
left: 457px;
}
.map-container .introduce {
margin-left: 27px;
width: 368px;
height: 460px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
margin-top: 41px;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
padding-left: 34px;
}
.map-container .introduce .top {
padding-top: 60px;
}
.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: 24px;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.map-container .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.map-container .introduce .bottom {
padding-top: 40px;
color: #979797;
font-size: 16px;
line-height: 20px;
}
.left-menu {
display: inline-block;
background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 280px;
}
.left-menu .menu-title {
height: 115px;
margin-bottom: 96px;
}
.left-menu .menu-title img {
width: auto;
height: 100%;
}
.left-menu .menu-list {
border-left: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.left-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-left: 25px;
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.left-menu .menu-list .active {
color: #000000;
}
.left-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
left: -2px;
top: 0;
background: #000;
}
.right-menu {
display: inline-block;
background-position: 0 0;
width: 280px;
text-align: right;
float: right;
}
.right-menu::after {
content: '';
clear: both;
}
.right-menu .menu-title {
height: 115px;
margin-bottom: 96px;
}
.right-menu .menu-title img {
display: inline-block;
width: auto;
height: 100%;
}
.right-menu .menu-list {
border-right: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.right-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-right: 25px;
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.right-menu .menu-list .active {
color: #000000;
}
.right-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
right: -2px;
top: 0;
background: #000;
}
@media only screen and (max-width: 1212px) {
.jobs .block .detail {
width: 28%;
}
}
@media only screen and (max-width: 750px) {
.jobs .block .detail {
width: 40%;
}
}
@media only screen and (max-width: 440px) {
.jobs .block .detail {
width: 95%;
}
.jobs .block .pdr24 {
padding-right: 0px;
}
}
style/about.less
......@@ -6,7 +6,7 @@
}
@media (max-width: 1920px) {
#banner .img-container img {
// margin-left: -25% ;
// margin-left: -25% ;y
position: absolute;
}
}
......@@ -138,9 +138,7 @@ ul {
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;
}
}
......@@ -310,7 +308,8 @@ ul {
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
margin-top: 41px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
padding-left: 34px;
.top {
padding-top: 60px;
......@@ -364,7 +363,8 @@ ul {
}
.menu-list {
border-left: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -374,7 +374,8 @@ ul {
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -416,7 +417,8 @@ ul {
}
.menu-list {
border-right: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -426,7 +428,8 @@ ul {
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......
style/index.css 0 → 100644
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
}
}
@media (max-width: 1920px) {
#banner .img-container img {
position: absolute;
}
}
.indent-32 {
text-indent: 32px;
}
ol,
ul {
margin-top: 0;
margin-bottom: 0px;
}
.link-active {
position: relative;
}
.link-active::after {
content: "";
width: 12px;
height: 2px;
background: #fff;
position: absolute;
bottom: 0;
left: 15px;
}
.swiper-pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
.navbar-inverse {
background: none;
border: none;
margin-bottom: 0;
}
.navbar-container {
position: relative;
}
.navbar-container a {
color: white !important;
font-size: 16px;
}
#footer .footer-content {
padding-top: 40px;
padding-bottom: 40px;
}
#footer .footer-content .weixin-img {
text-align: center;
}
#footer .footer-content .weixin-img img {
max-width: 130px;
height: auto;
display: inline-block;
}
.main-container {
height: 614px;
background-size: cover ;
position: relative;
}
.main-container .nav-absolute-container {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
margin: 0 auto;
}
.main-container .swiper-container {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: 0;
left: 0;
top: 0;
}
.main-container .swiper-container .banner1 {
background: #0c2655 url('../img/index_banner1.png') top center no-repeat;
background-size: cover ;
}
.main-container .swiper-container .banner2 {
background: #0c2655 url('../img/index_banner2.png') top center no-repeat;
background-size: cover ;
}
.main-container .swiper-container .banner3 {
background: #0c2655 url('../img/index_banner3.png') top center no-repeat;
background-size: cover ;
}
.main-container .swiper-container .banner4 {
background: #0c2655 url('../img/index_banner4.png') top center no-repeat;
background-size: cover ;
}
.main-container .swiper-container .word-box {
padding-left: 20px;
padding-top: 18.5%;
top: 18.5%;
left: 15%;
z-index: 555;
width: 80%;
}
.main-container .swiper-container .word-box p.line1 {
width: 40px;
height: 2px;
background: #ffffff;
margin-bottom: 30px;
}
.main-container .swiper-container .word-box p.line2 {
width: 211px;
height: 2px;
background: #ffffff;
margin-top: 30px;
}
.main-container .swiper-container .word-box p.btword {
font-size: 36px;
color: #ffffff;
/* font-weight: bold; */
}
.main-container .swiper-container .word-box p.btworden {
font-size: 16px;
color: #ffffff;
margin-top: 8px;
}
.main-container .swiper-container .word-box p.conword {
font-size: 14px;
color: #ffffff;
line-height: 26px;
margin-top: 20px;
max-width: 530px;
text-align: justify;
}
.main-container .swiper-container .word-box 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;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#particles-js {
height: 100vh;
opacity: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: -2;
-webkit-transition: all 0.9s;
transition: all 0.9s;
}
.swiper-container {
display: none;
}
#banner {
max-width: 1920px;
margin: auto;
width: 100%;
height: 80%;
position: relative;
}
#banner .word-box {
padding-left: 20px;
padding-top: 10%;
top: 18.5%;
left: 15%;
z-index: 555;
width: 80%;
}
#banner .word-box p.line1 {
width: 40px;
height: 2px;
background: #ffffff;
margin-bottom: 30px;
}
#banner .word-box p.line2 {
width: 211px;
height: 2px;
background: #ffffff;
margin-top: 30px;
}
#banner .word-box p.btword {
font-size: 36px;
color: #ffffff;
/* font-weight: bold; */
}
#banner .word-box p.btworden {
font-size: 16px;
color: #ffffff;
margin-top: 8px;
}
#banner .word-box p.conword {
font-size: 14px;
color: #ffffff;
line-height: 26px;
margin-top: 20px;
max-width: 466px;
text-align: justify;
}
#banner .word-box 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;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#banner .swiper-container {
width: 100%;
height: 100%;
}
#banner .swiper-container .img-container {
height: 100%;
width: 100%;
overflow: hidden;
display: inline-block;
bottom: 0;
}
#banner .swiper-container .img-container img {
max-height: 690px;
height: 690px;
width: auto;
bottom: 0;
}
#banner .swiper-container .swiper-slide {
overflow: hidden;
position: relative;
}
.tab-container ul {
overflow: hidden;
}
.tab-container li {
width: 25%;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 25px;
float: left;
background: #e2e2e2;
}
.tab-container li:nth-child(2n) {
background: #d2d2d2;
}
.common-title {
background: white;
font-size: 36px;
text-align: center;
padding: 20px 0;
}
.common-title .word {
padding: 10px;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.relative {
position: relative;
}
.main2-container {
background: url('../img/paper.png') no-repeat top center;
background-size: 100% auto;
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height: 450px;
}
.our-products .our {
background: url('../img/kuang.png') no-repeat center;
background-size: 95%;
height: 450px;
}
.our-products .word-right {
text-align: right;
position: absolute;
right: 0px;
top: 28%;
font-size: 14px;
color: #333333;
}
.our-products .word-right .title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #000000;
margin-bottom: 30px;
}
.our-products .word-right .title:before {
content: "" attr(data) "";
position: absolute;
right: 5px;
top: 15px;
font-size: 38px;
color: rgba(0, 0, 0, 0.5);
opacity: 0.3;
letter-spacing: 1px;
}
.our-products .word-right p {
letter-spacing: 0;
}
.our-products .views-content {
position: absolute;
z-index: 999;
top: -40px;
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.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
position: relative;
width: 302px;
height: 365px;
display: inline-block;
margin-right: 20px;
}
.our-products .views-content .one img {
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 .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;
}
.left-menu {
display: inline-block;
background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 280px;
}
.left-menu .menu-title {
height: 167px;
margin-bottom: 96px;
}
.left-menu .menu-title img {
width: auto;
height: 100%;
}
.left-menu .menu-list {
border-left: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.left-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-left: 25px;
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.left-menu .menu-list .active {
color: #000000;
}
.left-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
left: -2px;
top: 0;
background: #000;
}
.right-menu {
display: inline-block;
background-position: 0 0;
width: 280px;
text-align: right;
float: right;
}
.right-menu::after {
content: '';
clear: both;
}
.right-menu .menu-title {
height: 167px;
margin-bottom: 96px;
}
.right-menu .menu-title img {
display: inline-block;
width: auto;
height: 100%;
}
.right-menu .menu-list {
border-right: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.right-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-right: 25px;
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.right-menu .menu-list .active {
color: #000000;
}
.right-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
right: -2px;
top: 0;
background: #000;
}
.solution {
padding-top: 50px;
}
.solution .table-a {
margin-bottom: 20px;
}
.solution .list {
float: right;
width: 860px;
display: inline-block;
height: 672px;
overflow: hidden;
}
.solution .list .list-item {
height: 672px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .item {
width: 417px;
height: 215px;
margin-left: 9px;
margin-bottom: 9px;
float: left;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.solution .list .item a {
display: inline-block;
height: 100%;
width: 100%;
overflow: hidden;
}
.solution .list .item a img {
width: 100%;
height: 100%;
}
.solution .list .item .item-title {
display: none;
position: absolute;
bottom: 6px;
padding-left: 20px;
color: #fff;
overflow: hidden;
font-size: 18px;
}
.solution .list .item:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .item:hover .item-title {
display: block;
}
.solution .list .item::after {
content: '';
clear: both;
}
.industry-dynamics {
padding-top: 129px;
}
.industry-dynamics .list {
width: 860px;
height: 712px;
overflow: hidden;
display: inline-block;
}
.industry-dynamics .list .list-item {
width: 860px;
height: 712px;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.industry-dynamics .list .item {
width: 396px;
height: 340px;
background: #fff;
margin-right: 16px;
margin-bottom: 16px;
float: left;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.industry-dynamics .list .item a {
display: inline-block;
height: 100%;
width: 100%;
}
.industry-dynamics .list .item .img-container {
width: 396px;
height: 220px;
overflow: hidden;
}
.industry-dynamics .list .item .img-container img {
width: 100%;
height: auto;
}
.industry-dynamics .list .item .item-title {
padding-left: 30px;
padding-top: 15px;
line-height: 24px;
width: 330px;
font-size: 18px;
color: #000;
}
.industry-dynamics .list .item .bottom-word {
padding-top: 13px;
padding-left: 30px;
}
.industry-dynamics .list .item .bottom-word .name {
display: inline-block;
width: 89px;
height: 24px;
text-align: center;
line-height: 24px;
background: #c70151;
color: #fff;
}
.industry-dynamics .list .item .bottom-word .date {
padding-left: 16px;
color: #000000;
}
.industry-dynamics .list .item .bottom-word .date img {
display: inline-block;
height: 12px;
margin-right: 5px;
}
.industry-dynamics .list .item::after {
content: '';
clear: both;
}
.industry-dynamics .more {
font-size: 18px;
font-weight: 300;
color: rgba(0, 0, 0, 0.8);
line-height: 30px;
margin-bottom: 105px;
cursor: pointer;
}
.about-container .bottom-list {
position: relative;
margin-top: 50px;
padding-bottom: 50px;
}
.about-container .bottom-list .item {
width: 356px;
height: 184px;
padding: 40px 0 30px 0;
background: inherit;
background-color: #ffffff;
border: none;
border-radius: 0px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
text-align: center;
}
.about-container .bottom-list .item .title {
font-size: 22px;
padding-bottom: 30px;
}
.about-container .bottom-list .item:hover {
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: scale(1.1) translateY(-20px);
transform: scale(1.1) translateY(-20px);
}
.about-container .bottom-list .item2 {
position: relative;
width: 260px;
height: 184px;
padding: 40px 0 30px 0;
background: inherit;
background-color: #ffffff;
border: none;
border-radius: 0px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
text-align: center;
}
.about-container .bottom-list .item2 .title {
font-size: 22px;
padding-bottom: 20px;
}
.about-container .bottom-list .item2 .avator {
position: absolute;
width: 120px;
height: 120px;
left: 70px;
top: -80px;
border-radius: 50%;
background: white;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
}
.about-container .bottom-list .item2:hover {
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transform: scale(1.1) translateY(-20px);
transform: scale(1.1) translateY(-20px);
}
.about-container .partner {
height: 400px;
background: url('http://bdideal.com/asset/img/part.jpg') no-repeat center;
}
.about-container .map-container {
padding-top: 50px;
padding-bottom: 50px;
}
.about-container .map-container #map {
height: 280px;
width: 100%;
}
.about-container .map-container .font-18 {
font-size: 16px;
}
.about-container .map-container .word {
margin-top: 30px;
}
.about-container .map-container .addr {
margin-top: 40px;
}
.jobs h3 {
text-align: center;
background: #d2d2d2;
height: 50px;
line-height: 50px;
}
.jobs .detail {
width: 30%;
float: left;
font-size: 14px;
line-height: 24px;
text-indent: 0px;
margin-right: 1%;
}
.solution-container .field .field-item {
float: left;
font-size: 18px;
width: 20%;
height: 200px;
line-height: 200px;
text-align: center;
}
.solution-container .case .case-item {
overflow: hidden;
width: 30%;
float: left;
font-size: 14px;
min-height: 300px;
text-indent: 0px;
margin-right: 1%;
margin-bottom: 30px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
}
.solution-container .case .case-item img {
width: 100%;
height: auto;
}
.solution-container .case .case-item .bottom-container {
padding: 20px 0 20px 20px;
}
.solution-container .case .case-item::nth-child(2) {
height: 350px;
}
@media only screen and (max-width: 1212px) {
.jobs .block .detail {
width: 28%;
}
}
@media only screen and (max-width: 750px) {
.jobs .block .detail {
width: 40%;
}
}
@media only screen and (max-width: 440px) {
.jobs .block .detail {
width: 95%;
}
.jobs .block .pdr24 {
padding-right: 0px;
}
}
style/index.less
......@@ -169,9 +169,7 @@ ul {
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;
}
}
......@@ -248,9 +246,7 @@ ul {
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;
}
}
......@@ -304,7 +300,8 @@ ul {
.word {
padding: 10px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
}
// 我们的产品
......@@ -427,7 +424,8 @@ ul {
}
.menu-list {
border-left: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -437,7 +435,8 @@ ul {
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -479,7 +478,8 @@ ul {
}
.menu-list {
border-right: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -489,7 +489,8 @@ ul {
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -522,6 +523,7 @@ ul {
overflow: hidden;
.list-item {
height: 672px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.item {
......@@ -531,7 +533,8 @@ ul {
margin-bottom: 9px;
float: left;
position: relative;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat;
a {
display: inline-block;
......@@ -555,7 +558,9 @@ ul {
}
&:hover {
img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.item-title {
......@@ -581,6 +586,7 @@ ul {
width: 860px;
height: 712px;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.item {
......@@ -591,7 +597,8 @@ ul {
margin-bottom: 16px;
float: left;
position: relative;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
a {
display: inline-block;
height: 100%;
......@@ -667,7 +674,6 @@ ul {
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 0px;
-moz-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);
text-align: center;
......@@ -676,8 +682,10 @@ ul {
padding-bottom: 30px;
}
&:hover {
-webkit-transition: 0.3s;
transition: 0.3s;
transform: scale(1.1) translateY(-20px);
-webkit-transform: scale(1.1) translateY(-20px);
transform: scale(1.1) translateY(-20px);
}
}
.item2 {
......@@ -690,7 +698,6 @@ ul {
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 0px;
-moz-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);
text-align: center;
......@@ -706,11 +713,14 @@ ul {
top: -80px;
border-radius: 50%;
background: white;
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);
}
&:hover {
-webkit-transition: 0.3s;
transition: 0.3s;
transform: scale(1.1) translateY(-20px);
-webkit-transform: scale(1.1) translateY(-20px);
transform: scale(1.1) translateY(-20px);
}
}
}
......@@ -779,7 +789,8 @@ ul {
text-indent: 0px;
margin-right: 1%;
margin-bottom: 30px;
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);
.img-container {}
img {
width: 100%;
......
style/products.css 0 → 100644
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
}
}
@media (max-width: 1920px) {
#banner .img-container img {
position: absolute;
}
}
.indent-32 {
text-indent: 32px;
}
ol,
ul {
margin-top: 0;
margin-bottom: 0px;
}
.link-active {
position: relative;
}
.link-active::after {
content: "";
width: 12px;
height: 2px;
background: #000000;
position: absolute;
bottom: 0;
left: 15px;
}
.swiper-pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
.navbar-inverse {
background: none;
border: none;
margin-bottom: 0;
}
.navbar-container {
position: relative;
}
.navbar-container a {
color: black !important;
font-size: 16px;
}
#footer .footer-content {
padding-top: 40px;
padding-bottom: 40px;
}
#footer .footer-content .weixin-img {
text-align: center;
}
#footer .footer-content .weixin-img img {
max-width: 130px;
height: auto;
display: inline-block;
}
.main-container {
background: #E4E5E8 url('/img/bg4.png') top center no-repeat;
background-size: cover ;
}
#particles-js {
height: 100vh;
opacity: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.9s;
transition: all 0.9s;
}
.swiper-container {
display: none;
}
#banner {
max-width: 1920px;
margin: auto;
width: 100%;
height: 80%;
position: relative;
}
#banner .qiu {
position: absolute;
bottom: 0;
left: 10%;
z-index: 1;
}
#banner .word-box {
position: absolute;
padding-left: 20px;
padding-top: 10%;
z-index: 555;
width: 80%;
}
#banner .word-box p.line1 {
width: 40px;
height: 2px;
background: rgba(0, 0, 0, 0.4);
margin-bottom: 30px;
}
#banner .word-box p.line2 {
width: 211px;
height: 2px;
background: rgba(0, 0, 0, 0.4);
margin-top: 30px;
}
#banner .word-box p.btword {
font-size: 36px;
color: #000000;
/* font-weight: bold; */
}
#banner .word-box p.btworden {
font-size: 16px;
color: #000000;
margin-top: 8px;
}
#banner .word-box p.conword {
font-size: 14px;
color: #000000;
line-height: 26px;
margin-top: 20px;
max-width: 466px;
text-align: justify;
}
#banner .word-box 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;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#banner .swiper-container {
width: 100%;
height: 100%;
}
#banner .swiper-container .img-container {
height: 100%;
width: 100%;
overflow: hidden;
display: inline-block;
bottom: 0;
}
#banner .swiper-container .img-container img {
max-height: 690px;
height: 690px;
width: auto;
bottom: 0;
}
#banner .swiper-container .swiper-slide {
overflow: hidden;
position: relative;
}
.tab-container ul {
overflow: hidden;
}
.tab-container li {
width: 25%;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 25px;
float: left;
background: #e2e2e2;
}
.tab-container li:nth-child(2n) {
background: #d2d2d2;
}
.common-title {
background: white;
font-size: 36px;
text-align: center;
padding: 20px 0;
}
.common-title .word {
padding: 10px;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.relative {
position: relative;
}
.main2-container {
background: url('../img/paper.png') no-repeat top center;
background-size: 100% auto;
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height: 682px;
}
.our-products .our {
background: url('../img/kuang2.png') no-repeat center;
background-size: 95%;
height: 450px;
}
.our-products .word-right {
text-align: right;
position: absolute;
width: 300px;
right: 0px;
top: 20%;
font-size: 14px;
color: #333333;
}
.our-products .word-right .title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #000000;
margin-bottom: 30px;
}
.our-products .word-right .title:before {
content: "" attr(data) "";
position: absolute;
right: 5px;
top: 15px;
font-size: 38px;
color: rgba(0, 0, 0, 0.5);
opacity: 0.3;
width: 500px;
letter-spacing: 1px;
}
.our-products .word-right p {
letter-spacing: 0;
}
.our-products .earth {
position: absolute;
right: 60px;
top: 170px;
}
.our-products .earth .select {
position: absolute;
left: 37px;
top: 3px;
-webkit-transition: all 1s;
transition: all 1s;
}
.our-products .earth .ctr-container {
position: absolute;
width: 621px;
height: 443px;
top: 0;
overflow: hidden;
}
.our-products .earth .ctr-container .ctr-btn {
display: inline-block;
width: 50%;
height: 100%;
float: left;
}
.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.34901961);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
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;
}
.left-menu {
display: inline-block;
background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 280px;
}
.left-menu .menu-title {
height: 115px;
margin-bottom: 96px;
}
.left-menu .menu-title img {
width: auto;
height: 100%;
}
.left-menu .menu-list {
border-left: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.left-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-left: 25px;
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.left-menu .menu-list .active {
color: #000000;
}
.left-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
left: -2px;
top: 0;
background: #000;
}
.right-menu {
display: inline-block;
background-position: 0 0;
width: 280px;
text-align: right;
float: right;
}
.right-menu::after {
content: '';
clear: both;
}
.right-menu .menu-title {
height: 115px;
margin-bottom: 96px;
}
.right-menu .menu-title img {
display: inline-block;
width: auto;
height: 100%;
}
.right-menu .menu-list {
border-right: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.right-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-right: 25px;
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.right-menu .menu-list .active {
color: #000000;
}
.right-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
right: -2px;
top: 0;
background: #000;
}
.solution {
padding-top: 50px;
padding-bottom: 50px;
}
.solution .table-a {
margin-bottom: 20px;
}
.solution .list {
float: right;
width: 860px;
display: inline-block;
height: 704px;
position: relative;
}
.solution .list .ctr {
padding-top: 16px;
}
.solution .list .ctr span {
display: inline-block;
}
.solution .list .ctr .spanbtn {
cursor: pointer;
width: 38px;
height: 26px;
background: #000000;
line-height: 26px;
font-size: 18px;
color: white;
opacity: 0.8;
text-align: center;
}
.solution .list .list-item {
position: absolute;
top: 51px;
left: 0;
width: 100%;
height: 654px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .list-item .swiper-container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.solution .list .list-item .swiper-container .swiper-slide {
position: relative;
width: auto;
height: auto;
}
.solution .list .list-item .swiper-container .swiper-slide::after {
content: "";
background: rgba(0, 0, 0, 0.5);
width: 374px;
left: 0;
top: 0;
height: 300px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
.solution .list .list-item .swiper-container .show-mask::after {
opacity: 1;
display: block;
}
.solution .list .item {
width: 374px;
height: 300px;
margin-right: 26px;
margin-bottom: 27px;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.solution .list .item a {
display: inline-block;
height: 100%;
width: 100%;
overflow: hidden;
}
.solution .list .item a .img-container {
width: 374px;
height: 212px;
overflow: hidden;
}
.solution .list .item a img {
width: 100%;
height: 100%;
}
.solution .list .item a .tag-list {
list-style: circle;
overflow: hidden;
width: 100%;
padding-left: 32px;
padding-top: 10px;
}
.solution .list .item a .tag-list li {
list-style: disc;
float: left;
font-size: 12px;
padding-right: 22px;
color: rgba(0, 0, 0, 0.6);
}
.solution .list .item .item-title {
padding-left: 19px;
padding-top: 16px;
font-size: 18px;
font-weight: 400;
color: #000000;
}
.solution .list .item:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .item::after {
content: '';
clear: both;
}
.jobs h3 {
text-align: center;
background: #d2d2d2;
height: 50px;
line-height: 50px;
}
.jobs .detail {
width: 30%;
float: left;
font-size: 14px;
line-height: 24px;
text-indent: 0px;
margin-right: 1%;
}
.solution-container .field .field-item {
float: left;
font-size: 18px;
width: 20%;
height: 200px;
line-height: 200px;
text-align: center;
}
.solution-container .case .case-item {
overflow: hidden;
width: 30%;
float: left;
font-size: 14px;
min-height: 300px;
text-indent: 0px;
margin-right: 1%;
margin-bottom: 30px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.34901961);
}
.solution-container .case .case-item img {
width: 100%;
height: auto;
}
.solution-container .case .case-item .bottom-container {
padding: 20px 0 20px 20px;
}
.solution-container .case .case-item::nth-child(2) {
height: 350px;
}
@media only screen and (max-width: 1212px) {
.jobs .block .detail {
width: 28%;
}
}
@media only screen and (max-width: 750px) {
.jobs .block .detail {
width: 40%;
}
}
@media only screen and (max-width: 440px) {
.jobs .block .detail {
width: 95%;
}
.jobs .block .pdr24 {
padding-right: 0px;
}
}
style/products.less
......@@ -164,9 +164,7 @@ ul {
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;
}
}
......@@ -220,7 +218,8 @@ ul {
.word {
padding: 10px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
}
// 我们的产品
......@@ -281,6 +280,7 @@ ul {
position: absolute;
left: 37px;
top: 3px;
-webkit-transition: all 1s;
transition: all 1s;
// display: none;
}
......@@ -357,7 +357,8 @@ ul {
}
.menu-list {
border-left: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -367,7 +368,8 @@ ul {
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -409,7 +411,8 @@ ul {
}
.menu-list {
border-right: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -419,7 +422,8 @@ ul {
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -477,6 +481,7 @@ ul {
// width: calc(860px + (100vw - 1200px)/2);
width: 100%;
height: 654px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
.swiper-container {
width: 100%;
......@@ -497,6 +502,7 @@ ul {
height:300px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
......@@ -516,7 +522,8 @@ ul {
margin-right: 26px;
margin-bottom: 27px;
position: relative;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat;
a {
display: inline-block;
......@@ -561,7 +568,9 @@ ul {
}
&:hover {
img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
}
......@@ -617,7 +626,8 @@ ul {
text-indent: 0px;
margin-right: 1%;
margin-bottom: 30px;
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);
.img-container {}
img {
width: 100%;
......
style/solution.css 0 → 100644
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 25px;
}
}
@media (max-width: 1920px) {
#banner .img-container img {
position: absolute;
}
}
.indent-32 {
text-indent: 32px;
}
ol,
ul {
margin-top: 0;
margin-bottom: 0px;
}
.link-active {
position: relative;
}
.link-active::after {
content: "";
width: 12px;
height: 2px;
background: #000;
position: absolute;
bottom: 0;
left: 15px;
}
.swiper-pagination {
position: absolute;
z-index: 20;
bottom: 10px;
width: 100%;
text-align: center;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
.navbar-inverse {
background: none;
border: none;
margin-bottom: 0;
}
.navbar-container {
position: relative;
}
.navbar-container a {
color: black !important;
font-size: 16px;
}
#footer .footer-content {
padding-top: 40px;
padding-bottom: 40px;
}
#footer .footer-content .weixin-img {
text-align: center;
}
#footer .footer-content .weixin-img img {
max-width: 130px;
height: auto;
display: inline-block;
}
.bg-10 {
background: #E4E5E8 url('/img/bg10.png') top center no-repeat !important;
}
.bg-11 {
background: #E4E5E8 url('/img/bg11.png') top center no-repeat !important;
}
.bg-12 {
background: #E4E5E8 url('/img/bg12.png') top center no-repeat !important;
}
.main-container {
background: #E4E5E8 url('/img/bg5.png') top center no-repeat;
background-size: cover ;
height: 280px;
position: relative;
}
.main-container .word-box {
position: absolute;
padding-left: 20px;
padding-top: 4%;
z-index: 555;
width: 80%;
}
.main-container .word-box p.line1 {
width: 28px;
height: 1px;
background: #333333;
margin-bottom: 21px;
}
.main-container .word-box p.line2 {
width: 147px;
height: 1px;
background: #333333;
margin-top: 30px;
}
.main-container .word-box p.btword {
font-size: 24px;
color: #333333;
/* font-weight: bold; */
margin-bottom: 15px;
}
.main-container .word-box p.btworden {
font-size: 10px;
color: #333333;
}
.main-container .word-box p.conword {
font-size: 10px;
color: #333333;
line-height: 26px;
margin-top: 15px;
max-width: 466px;
text-align: justify;
}
.main-container .word-box 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;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#particles-js {
height: 100vh;
opacity: 1;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: -1;
-webkit-transition: all 0.9s;
transition: all 0.9s;
}
.swiper-container {
display: none;
}
.relative {
position: relative;
}
.main2-container {
background: url('../img/paper.png') no-repeat top center;
background-size: 100% auto;
}
.main2-container .quan-bg {
background: url('../img/quan.png') no-repeat center;
background-size: 1200px ;
}
.our-products {
position: relative;
background-size: 100%;
font-size: 18px;
height: 540px;
padding-top: 30px;
}
.our-products .our {
background: url('../img/bg6.png') no-repeat left;
background-size: 98% auto;
height: 450px;
position: relative;
}
.our-products .our .word {
padding-top: 160px;
margin-left: 108px;
color: #D6D6D6;
font-size: 16px;
width: 652px;
height: 147px;
line-height: 26px;
}
.our-products .our .word p {
margin-bottom: 30px;
}
.our-products .our .bottom-container {
width: 922px;
height: 173px;
position: absolute;
bottom: -80px;
left: 90px;
}
.our-products .our .bottom-container .item {
background: url(../img/p1-1.jpg) center no-repeat;
background-size: cover;
height: 173px;
width: 290px;
color: white;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.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.34901961);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
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;
}
.solution {
padding-top: 70px;
padding-bottom: 60px;
}
.solution .table-a {
margin-bottom: 20px;
}
.solution .list {
float: right;
width: 860px;
display: inline-block;
height: 704px;
position: relative;
}
.solution .list .ctr {
padding-top: 16px;
}
.solution .list .ctr span {
display: inline-block;
}
.solution .list .ctr .spanbtn {
cursor: pointer;
width: 38px;
height: 26px;
background: #000000;
line-height: 26px;
font-size: 18px;
color: white;
opacity: 0.8;
text-align: center;
}
.solution .list .list-item {
position: absolute;
top: 51px;
left: 0;
width: 100%;
height: 654px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .list-item .swiper-container {
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.solution .list .list-item .swiper-container .swiper-slide {
position: relative;
width: auto;
height: auto;
}
.solution .list .list-item .swiper-container .swiper-slide::after {
content: "";
background: rgba(0, 0, 0, 0.5);
width: 374px;
left: 0;
top: 0;
height: 310px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
.solution .list .list-item .swiper-container .show-mask::after {
opacity: 1;
display: block;
}
.solution .list .item {
width: 374px;
height: 310px;
margin-right: 26px;
margin-bottom: 27px;
position: relative;
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
.solution .list .item a {
text-decoration: none;
display: inline-block;
height: 100%;
width: 100%;
overflow: hidden;
}
.solution .list .item a .img-container {
width: 374px;
height: 212px;
overflow: hidden;
}
.solution .list .item a .img-container img {
width: 100%;
height: 100%;
}
.solution .list .item a .tag-list {
text-decoration: none;
list-style: circle;
overflow: hidden;
width: 100%;
padding-left: 32px;
padding-top: 15px;
}
.solution .list .item a .tag-list li {
list-style: disc;
float: left;
font-size: 12px;
padding-right: 22px;
color: rgba(0, 0, 0, 0.6);
}
.solution .list .item a .bottom-word {
text-decoration: none;
padding-left: 20px;
}
.solution .list .item a .bottom-word .name {
display: inline-block;
width: 89px;
height: 24px;
text-align: center;
line-height: 24px;
background: #c70151;
color: #fff;
}
.solution .list .item a .bottom-word .date {
padding-left: 16px;
color: #000000;
}
.solution .list .item a .bottom-word .date img {
width: auto;
display: inline-block;
height: 12px;
margin-right: 5px;
}
.solution .list .item .item-title {
padding-left: 19px;
padding-top: 16px;
font-size: 18px;
font-weight: 400;
color: #000000;
}
.solution .list .item .item-title2 {
min-height: 60px;
font-size: 16px;
line-height: 22px;
padding-top: 10px;
padding-bottom: 6px;
}
.solution .list .item:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.solution .list .item::after {
content: '';
clear: both;
}
.left-menu {
display: inline-block;
background: url('/img/bg3.png') top center no-repeat;
background-position: 0 0;
width: 280px;
}
.left-menu .menu-title {
height: 115px;
height: 167px;
margin-bottom: 64px;
}
.left-menu .menu-title img {
width: auto;
height: 100%;
}
.left-menu .menu-list {
border-left: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.left-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-left: 25px;
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.left-menu .menu-list .active {
color: #000000;
}
.left-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
left: -2px;
top: 0;
background: #000;
}
.right-menu {
display: inline-block;
background-position: 0 0;
width: 280px;
text-align: right;
float: right;
}
.right-menu::after {
content: '';
clear: both;
}
.right-menu .menu-title {
height: 115px;
margin-bottom: 96px;
}
.right-menu .menu-title img {
display: inline-block;
width: auto;
height: 100%;
}
.right-menu .menu-list {
border-right: 2px solid #cccccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 305px;
padding-top: 47px;
}
.right-menu .menu-list .menu-item {
line-height: 45px;
height: 45px;
padding-right: 25px;
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.right-menu .menu-list .active {
color: #000000;
}
.right-menu .menu-list .active::after {
content: "";
position: absolute;
width: 6px;
height: 45px;
right: -2px;
top: 0;
background: #000;
}
.join {
background: url('/img/bg9.png') top center no-repeat;
min-height: 1000px;
}
.join .introduce {
margin-left: 27px;
width: 368px;
height: 439px;
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
margin-top: 41px;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
padding-left: 34px;
}
.join .introduce .top {
padding-top: 60px;
}
.join .introduce .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.join .introduce .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.join .introduce .top .name {
font-size: 24px;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.join .introduce .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.join .introduce .bottom {
width: 307px;
height: 198px;
text-align: justify;
padding-top: 40px;
color: #979797;
font-size: 16px;
line-height: 26px;
}
.jobs {
margin-top: 100px;
padding-bottom: 70px;
}
.jobs .detail {
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.34901961);
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding: 0 26px;
padding-bottom: 30px;
margin-top: 30px;
color: #999999;
line-height: 22px;
font-size: 14px;
}
.jobs h3 {
text-align: center;
background: #d2d2d2;
height: 50px;
line-height: 50px;
}
.jobs .top {
padding-top: 60px;
padding-bottom: 20px;
}
.jobs .top .line1 {
width: 169px;
height: 1px;
background: #c70151;
}
.jobs .top .line2 {
width: 33px;
height: 1px;
background: #c70151;
}
.jobs .top .name {
font-size: 24px;
font-weight: 400;
color: #c70151;
line-height: 1;
padding-top: 17px;
padding-bottom: 9px;
}
.jobs .top .en {
font-size: 12px;
font-weight: 300;
line-height: 1;
color: #c70151;
padding-bottom: 18px;
}
.jobs .detail {
width: 30%;
float: left;
font-size: 14px;
line-height: 24px;
text-indent: 0px;
margin-right: 1%;
}
@media only screen and (max-width: 1212px) {
.jobs .block .detail {
width: 28%;
}
}
@media only screen and (max-width: 750px) {
.jobs .block .detail {
width: 40%;
}
}
@media only screen and (max-width: 440px) {
.jobs .block .detail {
width: 95%;
}
.jobs .block .pdr24 {
padding-right: 0px;
}
}
style/solution.less
......@@ -147,9 +147,7 @@ ul {
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;
}
}
......@@ -316,6 +314,7 @@ ul {
// width: calc(860px + (100vw - 1200px)/2);
width: 100%;
height: 654px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
.swiper-container {
width: 100%;
......@@ -336,6 +335,7 @@ ul {
height:310px ;
position: absolute;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
display: none;
}
......@@ -355,7 +355,8 @@ ul {
margin-right: 26px;
margin-bottom: 27px;
position: relative;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
// background: url('/img/banner2.jpg') center no-repeat;
a {
text-decoration: none;
......@@ -433,7 +434,9 @@ ul {
}
&:hover {
img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
}
......@@ -462,7 +465,8 @@ ul {
}
.menu-list {
border-left: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -472,7 +476,8 @@ ul {
font-size: 18px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -514,7 +519,8 @@ ul {
}
.menu-list {
border-right: 2px solid rgba(204,204,204,1);
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height:305px;
padding-top: 47px;
.menu-item {
......@@ -524,7 +530,8 @@ ul {
font-size: 24px;
margin-bottom: 34px ;
color: #999999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
cursor: pointer;
......@@ -555,7 +562,8 @@ ul {
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
margin-top: 41px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
padding-left: 34px;
.top {
padding-top: 60px;
......@@ -600,7 +608,8 @@ ul {
margin-top: 100px;
padding-bottom: 70px;
.detail{
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.349019607843137);
background: url('../img/mapbg.png') no-repeat top center;
background-size: cover;
padding: 0 26px;
......
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