Skip to content

梁建民 / pcb

Go to a project
Commit 22708e00 by 施宇
Options

首页

parent a36d6110
Inline Side-by-side
Showing with 2031 additions and 20 deletions
css/common/base.css
......@@ -152,7 +152,3 @@ html,
body {
width: 100%;
}
body {
overflow: hidden;
}
/*# sourceMappingURL=base.css.map */
\ No newline at end of file
css/common/base.less
......@@ -124,5 +124,5 @@ html, body {
}
body {
overflow: hidden;
// overflow: hidden;
}
\ No newline at end of file
css/home/home.css
......@@ -152,10 +152,644 @@ html,
body {
width: 100%;
}
body {
.width-1180 {
width: 1180px;
margin: 0 auto;
}
.ellipsis {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.home {
width: 100%;
}
/*# sourceMappingURL=home.css.map */
\ No newline at end of file
.home .header {
height: 90px;
background: #0081D2;
}
.home .header .title-logo {
width: 121px;
height: 31px;
margin: 29px 38px 0 0;
}
.home .header .header-nav {
margin-top: 20px;
}
.home .header .header-nav a {
color: #fff;
font-size: 15px;
padding: 14px 0;
margin-left: 43px;
cursor: pointer;
}
.home .header .header-nav a.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
}
.home .header .car {
height: 24px;
width: 24px;
background: url('../../images/home/car-icon.png') 100% 100% no-repeat;
position: relative;
margin-top: 30px;
cursor: pointer;
}
.home .header .car .car-msg {
color: #fff;
background-color: #FF0D0D;
font-size: 12px;
position: absolute;
border-radius: 50% 50%;
height: 20px;
width: 20px;
right: 0;
top: 0;
line-height: 20px;
text-align: center;
padding: 0 2px;
transform: translate(50%, -50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home .header .account-btn {
width: 120px;
height: 32px;
background-color: #E89721;
border-radius: 19px;
padding: 0 16px;
position: relative;
top: -10px;
margin-left: 39px;
cursor: pointer;
}
.home .header .account-btn .user-icon {
width: 18px;
height: 18px;
background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
position: relative;
top: 7px;
}
.home .header .account-btn .account-text {
color: #fff;
font-size: 14px;
margin: 0 3px;
position: relative;
top: 4px;
}
.home .header .account-btn .arrow-down-icon {
height: 5px;
width: 7px;
background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
position: relative;
top: 2px;
}
.home .home-header {
height: 600px;
background: #0081D2;
}
.home .home-header .width-1180 .home-header-title {
width: 550px;
height: 98px;
font-size: 44px;
color: #fff;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding-top: 70px;
}
.home .home-header .width-1180 .home-header-desc {
width: 440px;
height: 60px;
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 20px;
text-align: center;
margin: 24px auto 0;
}
.home .home-header .width-1180 .header-form {
background: #fff;
height: 241px;
margin-top: 87px;
box-shadow: 0px 4px 10px 0px rgba(0, 129, 210, 0.1);
}
.home .home-custom-desc .width-1180 {
padding: 36px 0;
}
.home .home-custom-desc .section {
padding: 14px 0;
border-right: 1px solid #F0F4F7;
}
.home .home-custom-desc .section.section-1 {
width: 330px;
}
.home .home-custom-desc .section.section-2 {
width: 380px;
margin-left: 28px;
}
.home .home-custom-desc .section.section-3 {
margin-left: 38px;
border: none;
}
.home .home-custom-desc img {
height: 70px;
width: 70px;
}
.home .home-custom-desc .desc {
margin-left: 23px;
position: relative;
top: -5px;
}
.home .home-custom-desc .desc h3 {
color: #2B2F33;
font-size: 16px;
}
.home .home-custom-desc .desc p {
color: #828E99;
font-size: 13px;
padding-top: 10px;
}
.home .home-goods-section {
background-color: #F0F4F7;
padding-bottom: 80px;
}
.home .home-goods-section .goods-title {
color: #2B2F33;
font-size: 24px;
text-align: center;
padding-top: 60px;
}
.home .home-goods-section .goods-desc {
color: #575E66;
font-size: 16px;
text-align: center;
padding-top: 16px;
}
.home .home-goods-section .goods-desc .goods-desc-span2 {
margin: 0 35px;
}
.home .home-goods-section .goods-list {
margin-top: 60px;
width: 1200px;
transform: translateX(-20px);
}
.home .home-goods-section .goods-list .good-sigle {
background-color: #fff;
width: 280px;
padding: 0 5px 20px;
position: relative;
margin-left: 20px;
}
.home .home-goods-section .goods-list .good-sigle .good-img {
width: 146px;
height: 102px;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -35%);
}
.home .home-goods-section .goods-list .good-sigle .price-div {
padding-top: 75px;
}
.home .home-goods-section .goods-list .good-sigle .price-div .price {
font-size: 30px;
color: #E89721;
text-align: right;
width: 130px;
margin-right: 10px;
}
.home .home-goods-section .goods-list .good-sigle .price-div .text {
color: #828E99;
width: 130px;
font-size: 13px;
}
.home .home-goods-section .goods-list .good-sigle .good-sigle-desc {
color: #2B2F33;
font-size: 16px;
text-align: center;
padding: 20px 0 8px;
}
.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param {
padding-top: 6px;
}
.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param .param-text {
font-size: 13px;
color: #828E99;
width: 95px;
text-align: right;
margin-right: 10px;
}
.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param .param-value {
font-size: 13px;
color: #2B2F33;
width: 165px;
}
.home .home-goods-section .goods-list .good-sigle .computer-section {
background-color: #0081D2;
width: 160px;
height: 36px;
border-radius: 2px;
margin: 40px auto 0;
text-align: center;
cursor: pointer;
}
.home .home-goods-section .goods-list .good-sigle .computer-section .img {
margin-top: 10px;
height: 16px;
width: 16px;
background: url('../../images/home/js-icon.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-list .good-sigle .computer-section .text {
color: #FFFFFF;
font-size: 16px;
margin-left: 5px;
position: relative;
top: -2px;
}
.home .home-goods-section .goods-bottom {
padding: 0 65px;
margin-top: 50px;
}
.home .home-goods-section .goods-bottom .goods-bottom-div {
text-align: center;
}
.home .home-goods-section .goods-bottom .goods-bottom-div.goods-bottom-other {
margin-left: 72px;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img {
height: 60px;
width: 60px;
margin: 0 auto;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-1 {
background: url('../../images/home/goods-s-1.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-2 {
background: url('../../images/home/goods-s-2.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-3 {
background: url('../../images/home/goods-s-3.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-4 {
background: url('../../images/home/goods-s-4.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-5 {
background: url('../../images/home/goods-s-5.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-6 {
background: url('../../images/home/goods-s-6.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-7 {
background: url('../../images/home/goods-s-7.png') 100% 100% no-repeat;
}
.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-text {
color: #828E99;
font-size: 13px;
}
.home .map-section .map-section-title {
font-size: 24px;
color: #2B2F33;
text-align: center;
padding-top: 60px;
}
.home .map-section .map-section-desc {
font-size: 16px;
color: #575E66;
text-align: center;
padding-top: 16px;
}
.home .map-section .map-nums {
padding: 40px 154px 60px;
text-align: center;
}
.home .map-section .map-nums .map-num-2 {
margin: 0 267px;
}
.home .map-section .map-nums h3 {
font-size: 40px;
color: #0081D2;
}
.home .map-section .map-nums p {
font-size: 13px;
color: #575E66;
margin-top: 3px;
}
.home .map-section .map-data .map-data-left {
width: 410px;
}
.home .map-section .map-data .map-data-left .title {
padding: 0 20px;
}
.home .map-section .map-data .map-data-left .title .title-l {
color: #2B2F33;
font-size: 16px;
width: 92px;
}
.home .map-section .map-data .map-data-left .title .title-r {
width: 273px;
margin-left: 5px;
text-align: right;
}
.home .map-section .map-data .map-data-left .title .title-r .count-text {
color: #828E99;
font-size: 13px;
width: 118px;
}
.home .map-section .map-data .map-data-left .title .title-r .count {
font-size: 13px;
color: #E89721;
max-width: 140px;
padding: 0 4px;
}
.home .map-section .map-data .map-data-left .title .title-r b {
color: #FF0D0D;
font-weight: bold;
font-size: 14px;
width: 7px;
}
.home .map-section .map-data .data-table .data-table-header {
height: 32px;
line-height: 32px;
background-color: #F0F4F7;
margin-top: 17px;
}
.home .map-section .map-data .data-table .data-table-header div {
color: #2B2F33;
font-size: 13px;
}
.home .map-section .map-data .data-table .data-table-header div.table-header-1 {
padding-left: 20px;
}
.home .map-section .map-data .data-table .data-table-header div.table-header-2 {
padding-left: 36px;
}
.home .map-section .map-data .data-table .data-table-header div.table-header-3,
.home .map-section .map-data .data-table .data-table-header div.table-header-4 {
padding-left: 46px;
}
.home .map-section .map-data .data-table .data-table-body .data-table-tr {
margin-top: 20px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-1 {
color: #828E99;
font-size: 13px;
width: 37px;
margin-left: 20px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-2 {
margin-left: 30px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-2 img {
width: 20px;
height: 15px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-2 span {
color: #828E99;
font-size: 13px;
width: 45px;
margin-left: 7px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-3 {
color: #E89721;
font-size: 13px;
margin-left: 46px;
width: 65px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-4 {
margin-left: 23px;
}
.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress {
width: 100px;
background-color: #DFE2E6;
height: 12px;
border-radius: 6px;
position: relative;
}
.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress .active-progress {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 40px;
background-color: #1DDA74;
border-radius: 6px;
z-index: 2;
}
.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress .text-progress {
z-index: 3;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
font-size: 11px;
color: #FFFFFF;
text-align: center;
line-height: 12px;
}
.home .map-section .map-data .map-data-right {
position: relative;
margin: 20px 0 0 57px;
width: 700px;
height: 342.6px;
background: url('../../images/home/map.png') 100% 100% no-repeat;
z-index: 2;
}
.home .map-section .map-data .map-data-right .point-div {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50% 50%;
cursor: pointer;
}
.home .map-section .map-data .map-data-right .point-div:hover .point-mark {
background-color: #E89721;
}
.home .map-section .map-data .map-data-right .point-div:hover .point-desc {
display: block;
}
.home .map-section .map-data .map-data-right .point-div .point-mark {
width: 10px;
height: 10px;
background-color: #0081D2;
border-radius: 50% 50%;
position: absolute;
z-index: 5;
}
.home .map-section .map-data .map-data-right .point-div.point-div-1 {
top: 81px;
left: 123px;
}
.home .map-section .map-data .map-data-right .point-div.point-div-2 {
top: 116px;
left: 113px;
}
.home .map-section .map-data .map-data-right .point-div.point-div-3 {
top: 139px;
left: 153px;
}
.home .map-section .map-data .map-data-right .point-div.point-div-4 {
top: 222px;
left: 199px;
}
.home .map-section .map-data .map-data-right .point-div.point-div-5 {
top: 282px;
left: 200px;
}
.home .map-section .map-data .map-data-right .point-div .point-desc {
width: 223px;
height: 132px;
background-color: #fff;
border: 1px solid #E89721;
padding: 16px;
position: absolute;
left: -218px;
top: 5px;
display: none;
z-index: 6;
}
.home .map-section .map-data .map-data-right .point-div .point-desc h3 {
color: #2B2F33;
font-size: 16px;
}
.home .map-section .map-data .map-data-right .point-div .point-desc .descs {
margin-top: 4px;
font-size: 13px;
}
.home .map-section .map-data .map-data-right .point-div .point-desc .descs .desc {
margin-top: 6px;
}
.home .map-section .map-data .map-data-right .point-div .point-desc .descs .text {
color: #828E99;
}
.home .map-section .map-data .map-data-right .point-div .point-desc .descs .num {
color: #E89721;
}
.home .banner-1-section {
background: #F0F4F7;
}
.home .banner-1-section .banner-1-section-title {
font-size: 24px;
color: #2B2F33;
text-align: center;
padding: 60px 0 40px;
}
.home .banner-1-section .banner-1-datas-div {
overflow: hidden;
position: relative;
}
.home .banner-1-section .banner-1-datas-div .pre-div,
.home .banner-1-section .banner-1-datas-div .next-div {
position: absolute;
width: 48px;
height: 48px;
background: #000000;
opacity: 0.8;
z-index: 888;
border-radius: 50%;
top: 151px;
cursor: pointer;
}
.home .banner-1-section .banner-1-datas-div .pre-div div,
.home .banner-1-section .banner-1-datas-div .next-div div {
width: 14px;
height: 24px;
margin: 12px 0 0 16px;
}
.home .banner-1-section .banner-1-datas-div .pre-div.pre-div,
.home .banner-1-section .banner-1-datas-div .next-div.pre-div {
left: 10px;
}
.home .banner-1-section .banner-1-datas-div .pre-div.pre-div div,
.home .banner-1-section .banner-1-datas-div .next-div.pre-div div {
background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
}
.home .banner-1-section .banner-1-datas-div .pre-div.next-div,
.home .banner-1-section .banner-1-datas-div .next-div.next-div {
right: 10px;
}
.home .banner-1-section .banner-1-datas-div .pre-div.next-div div,
.home .banner-1-section .banner-1-datas-div .next-div.next-div div {
background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
}
.home .banner-1-section .banner-1-datas {
width: 999999px;
transform: translateX(-20px);
}
.home .banner-1-section .banner-1-datas .banner-1-data {
margin-left: 20px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.home .banner-1-section .banner-1-datas .banner-1-data img {
width: 280px;
height: 350px;
display: block;
}
.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text {
background: #0081d2;
opacity: 0.9;
height: 350px;
}
.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text .hover {
display: block;
}
.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text .no-hover {
display: none;
}
.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(180deg, rgba(0, 129, 210, 0) 0%, #0081d2 100%);
transition: all 0.3s ease-in-out;
}
.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text .no-hover {
padding: 40px 20px 18px;
display: block;
overflow: hidden;
}
.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text .no-hover h3 {
color: #FFFFFF;
font-size: 16px;
}
.home .banner-1-section .banner-1-datas .banner-1-data .hover {
margin: 30px 20px;
height: 290px;
overflow: hidden;
display: none;
}
.home .banner-1-section .banner-1-datas .banner-1-data .hover h3 {
color: #FFFFFF;
font-size: 16px;
}
.home .banner-1-section .banner-1-datas .banner-1-data .hover ul {
margin-top: 10px;
}
.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li {
margin-top: 10px;
}
.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li i {
height: 7px;
width: 7px;
border-radius: 50% 50%;
background-color: #fff;
position: relative;
top: 5px;
}
.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li span {
width: 225px;
margin-left: 8px;
font-size: 13px;
color: #FFFFFF;
}
css/home/home.less
@import '../common/base.less';
.home{
.width-1180 {
width: 1180px;
margin: 0 auto;
}
.ellipsis {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.home {
width: 100%;
.header {
height: 90px;
background: #0081D2;
.title-logo {
width: 121px;
height: 31px;
margin: 29px 38px 0 0;
}
.header-nav {
margin-top: 20px;
a {
color: #fff;
font-size: 15px;
padding: 14px 0;
margin-left: 43px;
cursor: pointer;
&.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
}
}
}
.car {
height: 24px;
width: 24px;
background: url('../../images/home/car-icon.png') 100% 100% no-repeat;
position: relative;
margin-top: 30px;
cursor: pointer;
.car-msg {
color: #fff;
background-color: #FF0D0D;
font-size: 12px;
position: absolute;
border-radius: 50% 50%;
height: 20px;
width: 20px;
right: 0;
top: 0;
line-height: 20px;
text-align: center;
padding: 0 2px;
transform: translate(50%, -50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.account-btn {
width: 120px;
height: 32px;
background-color: #E89721;
border-radius: 19px;
padding: 0 16px;
position: relative;
top: -10px;
margin-left: 39px;
cursor: pointer;
.user-icon {
width: 18px;
height: 18px;
background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
position: relative;
top: 7px;
}
.account-text {
color: #fff;
font-size: 14px;
margin: 0 3px;
position: relative;
top: 4px;
}
.arrow-down-icon {
height: 5px;
width: 7px;
background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
position: relative;
top: 2px;
}
}
}
.home-header {
height: 600px;
background: #0081D2;
.width-1180 {
.home-header-title {
width: 550px;
height: 98px;
font-size: 44px;
color: #fff;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding-top: 70px;
}
.home-header-desc {
width: 440px;
height: 60px;
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 20px;
text-align: center;
margin: 24px auto 0;
}
.header-form {
background: #fff;
height: 241px;
margin-top: 87px;
box-shadow: 0px 4px 10px 0px rgba(0, 129, 210, 0.1);
}
}
}
.home-custom-desc {
.width-1180 {
padding: 36px 0;
}
.section {
padding: 14px 0;
border-right: 1px solid #F0F4F7;
&.section-1 {
width: 330px;
}
&.section-2 {
width: 380px;
margin-left: 28px;
}
&.section-3 {
margin-left: 38px;
border: none
}
}
img {
height: 70px;
width: 70px;
}
.desc {
margin-left: 23px;
position: relative;
top: -5px;
h3 {
color: #2B2F33;
font-size: 16px;
}
p {
color: #828E99;
font-size: 13px;
padding-top: 10px;
}
}
}
.home-goods-section {
background-color: #F0F4F7;
padding-bottom: 80px;
.goods-title {
color: #2B2F33;
font-size: 24px;
text-align: center;
padding-top: 60px;
}
.goods-desc {
color: #575E66;
font-size: 16px;
text-align: center;
padding-top: 16px;
.goods-desc-span2 {
margin: 0 35px;
}
}
.goods-list {
margin-top: 60px;
width: 1200px;
transform: translateX(-20px);
.good-sigle {
background-color: #fff;
width: 280px;
padding: 0 5px 20px;
position: relative;
margin-left: 20px;
.good-img {
width: 146px;
height: 102px;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -35%);
}
.price-div {
padding-top: 75px;
.price {
font-size: 30px;
color: #E89721;
text-align: right;
width: 130px;
margin-right: 10px;
}
.text {
color: #828E99;
width: 130px;
font-size: 13px;
}
}
.good-sigle-desc {
color: #2B2F33;
font-size: 16px;
text-align: center;
padding: 20px 0 8px;
}
.good-sigle-params {
.param {
padding-top: 6px;
.param-text {
font-size: 13px;
color: #828E99;
width: 95px;
text-align: right;
margin-right: 10px;
}
.param-value {
font-size: 13px;
color: #2B2F33;
width: 165px;
}
}
}
.computer-section {
background-color: #0081D2;
width: 160px;
height: 36px;
border-radius: 2px;
margin: 40px auto 0;
text-align: center;
cursor: pointer;
.img {
margin-top: 10px;
height: 16px;
width: 16px;
background: url('../../images/home/js-icon.png') 100% 100% no-repeat;
}
.text {
color: #FFFFFF;
font-size: 16px;
margin-left: 5px;
position: relative;
top: -2px;
}
}
}
}
.goods-bottom {
padding: 0 65px;
margin-top: 50px;
.goods-bottom-div {
text-align: center;
&.goods-bottom-other {
margin-left: 72px;
}
.goods-bottom-img {
height: 60px;
width: 60px;
margin: 0 auto;
&.goods-bottom-img-1 {
background: url('../../images/home/goods-s-1.png') 100% 100% no-repeat;
}
&.goods-bottom-img-2 {
background: url('../../images/home/goods-s-2.png') 100% 100% no-repeat;
}
&.goods-bottom-img-3 {
background: url('../../images/home/goods-s-3.png') 100% 100% no-repeat;
}
&.goods-bottom-img-4 {
background: url('../../images/home/goods-s-4.png') 100% 100% no-repeat;
}
&.goods-bottom-img-5 {
background: url('../../images/home/goods-s-5.png') 100% 100% no-repeat;
}
&.goods-bottom-img-6 {
background: url('../../images/home/goods-s-6.png') 100% 100% no-repeat;
}
&.goods-bottom-img-7 {
background: url('../../images/home/goods-s-7.png') 100% 100% no-repeat;
}
}
.goods-bottom-text {
color: #828E99;
font-size: 13px;
}
}
}
}
.map-section {
.map-section-title {
font-size: 24px;
color: #2B2F33;
text-align: center;
padding-top: 60px;
}
.map-section-desc {
font-size: 16px;
color: #575E66;
text-align: center;
padding-top: 16px;
}
.map-nums {
padding: 40px 154px 60px;
text-align: center;
.map-num-2 {
margin: 0 267px;
}
h3 {
font-size: 40px;
color: #0081D2
}
p {
font-size: 13px;
color: #575E66;
margin-top: 3px;
}
}
.map-data {
.map-data-left {
width: 410px;
.title {
padding: 0 20px;
.title-l {
color: #2B2F33;
font-size: 16px;
width: 92px;
}
.title-r {
width: 273px;
margin-left: 5px;
text-align: right;
.count-text {
color: #828E99;
font-size: 13px;
width: 118px;
}
.count {
font-size: 13px;
color: #E89721;
max-width: 140px;
padding: 0 4px;
}
b {
color: #FF0D0D;
font-weight: bold;
font-size: 14px;
width: 7px;
}
}
}
}
.data-table {
.data-table-header {
height: 32px;
line-height: 32px;
background-color: #F0F4F7;
margin-top: 17px;
div {
color: #2B2F33;
font-size: 13px;
&.table-header-1 {
padding-left: 20px;
}
&.table-header-2 {
padding-left: 36px;
}
&.table-header-3,
&.table-header-4 {
padding-left: 46px;
}
}
}
.data-table-body {
.data-table-tr {
margin-top: 20px;
}
.table-td-1 {
color: #828E99;
font-size: 13px;
width: 37px;
margin-left: 20px;
}
.table-td-2 {
margin-left: 30px;
img {
width: 20px;
height: 15px;
}
span {
color: #828E99;
font-size: 13px;
width: 45px;
margin-left: 7px;
}
}
.table-td-3 {
color: #E89721;
font-size: 13px;
margin-left: 46px;
width: 65px
}
.table-td-4 {
margin-left: 23px;
.progress {
width: 100px;
background-color: #DFE2E6;
height: 12px;
border-radius: 6px;
position: relative;
.active-progress {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 40px;
background-color: #1DDA74;
border-radius: 6px;
z-index: 2;
}
.text-progress {
z-index: 3;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
font-size: 11px;
color: #FFFFFF;
text-align: center;
line-height: 12px;
}
}
}
}
}
.map-data-right {
position: relative;
margin: 20px 0 0 57px;
width: 700px;
height: 342.6px;
background: url('../../images/home/map.png') 100% 100% no-repeat;
z-index: 2;
.point-div {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50% 50%;
cursor: pointer;
&:hover {
.point-mark {
background-color: #E89721;
}
.point-desc {
display: block;
}
}
.point-mark {
width: 10px;
height: 10px;
background-color: #0081D2;
border-radius: 50% 50%;
position: absolute;
z-index: 5;
}
&.point-div-1 {
top: 81px;
left: 123px;
}
&.point-div-2 {
top: 116px;
left: 113px;
}
&.point-div-3 {
top: 139px;
left: 153px;
}
&.point-div-4 {
top: 222px;
left: 199px;
}
&.point-div-5 {
top: 282px;
left: 200px;
}
.point-desc {
width: 223px;
height: 132px;
background-color: #fff;
border: 1px solid #E89721;
padding: 16px;
position: absolute;
left: -218px;
top: 5px;
display: none;
z-index: 6;
h3 {
color: #2B2F33;
font-size: 16px;
}
.descs {
margin-top: 4px;
font-size: 13px;
.desc {
margin-top: 6px;
}
.text {
color: #828E99
}
.num {
color: #E89721
}
}
}
}
}
}
}
.banner-1-section {
background: #F0F4F7;
.banner-1-section-title {
font-size: 24px;
color: #2B2F33;
text-align: center;
padding: 60px 0 40px;
}
.banner-1-datas-div {
overflow: hidden;
position: relative;
.pre-div,
.next-div {
position: absolute;
width: 48px;
height: 48px;
background: rgba(0, 0, 0, 1);
opacity: 0.8;
z-index: 888;
border-radius: 50%;
top:151px;
cursor: pointer;
div{
width:14px;
height:24px;
margin:12px 0 0 16px;
}
&.pre-div{
left:10px;
div{
background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
}
}
&.next-div{
right:10px;
div{
background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
}
}
}
}
.banner-1-datas {
width: 999999px;
transform: translateX(-20px);
.banner-1-data {
margin-left: 20px;
position: relative;
cursor: pointer;
overflow: hidden;
img {
width: 280px;
height: 350px;
display: block;
}
&:hover {
.banner-1-data-text {
background: rgba(0, 129, 210, 1);
opacity: 0.9;
height: 350px;
.hover {
display: block;
}
.no-hover {
display: none;
}
}
}
.banner-1-data-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(180deg, rgba(0, 129, 210, 0) 0%, rgba(0, 129, 210, 1) 100%);
transition: all .3s ease-in-out;
.no-hover {
padding: 40px 20px 18px;
display: block;
overflow: hidden;
h3 {
color: #FFFFFF;
font-size: 16px;
}
}
}
.hover {
margin: 30px 20px;
height: 290px;
overflow: hidden;
display: none;
h3 {
color: #FFFFFF;
font-size: 16px;
}
ul {
margin-top: 10px;
li {
margin-top: 10px;
i {
height: 7px;
width: 7px;
border-radius: 50% 50%;
background-color: #fff;
position: relative;
top: 5px;
}
span {
width: 225px;
margin-left: 8px;
font-size: 13px;
color: #FFFFFF;
}
}
}
}
// .banner-1-data-text{
// position: absolute;
// bottom:0;
// left:0;
// right:0;
// height:100px;
// background:linear-gradient(180deg,rgba(0,129,210,0) 0%,rgba(0,129,210,1) 100%);
// overflow: hidden;
// padding:13px 20px;
// h3{
// color:#FFFFFF;
// font-size: 16px;
// }
// ul{
// font-size: 13px;
// color:#FFFFFF;
// li{
// margin-top:13px;
// }
// }
// }
}
}
}
}
\ No newline at end of file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link type="favicon" rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="./css/home/home.css"/>
<link type="favicon" rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="./css/home/home.css" />
</head>
<body>
<div class="home"></div>
<div class="home">
<div class="header">
<div class="header-width-1180 width-1180 clr">
<img src="./images/home/title-logo.png" alt="" class="title-logo fl">
<div class="header-nav fl lbBox">
<a href="" class="lineBlock boxsiz active">Home</a>
<a href="" class="lineBlock boxsiz">PCB Prototype
</a>
<a href="" class="lineBlock boxsiz">PCB Assembly
</a>
<a href="" class="lineBlock boxsiz">SMT-Stencil
</a>
<a href="" class="lineBlock boxsiz">Membrane Switch
</a>
</div>
<div class="fr lbBox">
<a class="car lineBlock">
<span class="car-msg lineBlock boxsiz">1</span>
</a>
<a class="account-btn lineBlock lbBox boxsiz">
<span class="user-icon lineBlock"></span>
<span class="lineBlock account-text">Account</span>
<span class="arrow-down-icon lineBlock"></span>
</a>
</div>
</div>
</div>
<div class="home-header">
<div class="width-1180">
<h3 class="home-header-title">Full Function Customized PCB Service</h3>
<p class="home-header-desc">24 hours quick turnaround PCB prototype.<br /> Delivered directly from our
factory to your door. <br />Fast
shipping from our factory near Hong Kong Aviation Hub.</p>
<div class="header-form">
</div>
</div>
</div>
<div class="home-custom-desc">
<div class="width-1180 clr">
<div class="section-1 fl lbBox section">
<img src="./images/home/time-icon.png" alt="" class="lineBlock">
<div class="desc lineBlock">
<h3>Ultrafast</h3>
<p>24 Hours Lead Time<br />2-5 Days Delivery Time</p>
</div>
</div>
<div class="section-2 fl lbBox section">
<img src="./images/home/zs-icon.png" alt="" class="lineBlock">
<div class="desc lineBlock">
<h3>Quality</h3>
<p>A–grade Military Material and Taiyo Ink<br />Equipped with Advanced Machines</p>
</div>
</div>
<div class="section-3 fl lbBox section">
<img src="./images/home/user-b-icon.png" alt="" class="lineBlock">
<div class="desc lineBlock">
<h3>Service</h3>
<p>24/7 Customer Service and Technical Support<br />One-stop PCB Assembly Service</p>
</div>
</div>
</div>
</div>
<div class="home-goods-section">
<div class="width-1180">
<h3 class="goods-title">You need a superber manufacturer for PCB orders</h3>
<p class="goods-desc">
<span>Ultra-fast</span>
<span class="goods-desc-span2">Customized</span>
<span>Customized</span>
</p>
<div class="goods-list clr">
<div class="good-sigle fl boxsiz">
<img src="./images/home/good-img.png" alt="" class="good-img">
<div class="price-div lbBox">
<div class="price lineBlock ellipsis">$1.99</div>
<div class="text lineBlock ellipsis va-b">at Minimum</div>
</div>
<h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
<div class="good-sigle-params">
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Layers: </div>
<div class="param-value lineBlock ellipsis">1-6</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quantity: </div>
<div class="param-value lineBlock ellipsis">1-1million pcs</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quality: </div>
<div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Material: </div>
<div class="param-value lineBlock ellipsis">FR4</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Lead Time: </div>
<div class="param-value lineBlock ellipsis">48 Hours</div>
</div>
</div>
<div class="computer-section lbBox">
<span class="img lineBlock"></span>
<span class="text lineBlock">Quote now</span>
</div>
</div>
<div class="good-sigle fl boxsiz">
<img src="./images/home/good-img.png" alt="" class="good-img">
<div class="price-div lbBox">
<div class="price lineBlock ellipsis">$1.99</div>
<div class="text lineBlock ellipsis va-b">at Minimum</div>
</div>
<h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
<div class="good-sigle-params">
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Layers: </div>
<div class="param-value lineBlock ellipsis">1-6</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quantity: </div>
<div class="param-value lineBlock ellipsis">1-1million pcs</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quality: </div>
<div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Material: </div>
<div class="param-value lineBlock ellipsis">FR4</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Lead Time: </div>
<div class="param-value lineBlock ellipsis">48 Hours</div>
</div>
</div>
<div class="computer-section lbBox">
<span class="img lineBlock"></span>
<span class="text lineBlock">Quote now</span>
</div>
</div>
<div class="good-sigle fl boxsiz">
<img src="./images/home/good-img.png" alt="" class="good-img">
<div class="price-div lbBox">
<div class="price lineBlock ellipsis">$1.99</div>
<div class="text lineBlock ellipsis va-b">at Minimum</div>
</div>
<h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
<div class="good-sigle-params">
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Layers: </div>
<div class="param-value lineBlock ellipsis">1-6</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quantity: </div>
<div class="param-value lineBlock ellipsis">1-1million pcs</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quality: </div>
<div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Material: </div>
<div class="param-value lineBlock ellipsis">FR4</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Lead Time: </div>
<div class="param-value lineBlock ellipsis">48 Hours</div>
</div>
</div>
<div class="computer-section lbBox">
<span class="img lineBlock"></span>
<span class="text lineBlock">Quote now</span>
</div>
</div>
<div class="good-sigle fl boxsiz">
<img src="./images/home/good-img.png" alt="" class="good-img">
<div class="price-div lbBox">
<div class="price lineBlock ellipsis">$1.99</div>
<div class="text lineBlock ellipsis va-b">at Minimum</div>
</div>
<h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
<div class="good-sigle-params">
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Layers: </div>
<div class="param-value lineBlock ellipsis">1-6</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quantity: </div>
<div class="param-value lineBlock ellipsis">1-1million pcs</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Quality: </div>
<div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Material: </div>
<div class="param-value lineBlock ellipsis">FR4</div>
</div>
<div class="param lbBox">
<div class="param-text lineBlock ellipsis">Lead Time: </div>
<div class="param-value lineBlock ellipsis">48 Hours</div>
</div>
</div>
<div class="computer-section lbBox">
<span class="img lineBlock"></span>
<span class="text lineBlock">Quote now</span>
</div>
</div>
</div>
<div class="goods-bottom lbBox">
<div class="goods-bottom-1 goods-bottom-div lineBlock">
<div class="goods-bottom-img goods-bottom-img-1"></div>
<div class="goods-bottom-text">Online Quote</div>
</div>
<div class="goods-bottom-other goods-bottom-div lineBlock">
<div class="goods-bottom-img goods-bottom-img-2"></div>
<div class="goods-bottom-text">Online Quote</div>
</div>
<div class="goods-bottom-other goods-bottom-div lineBlock">
<div class="goods-bottom-img goods-bottom-img-3"></div>
<div class="goods-bottom-text">Order Review</div>
</div>
<div class="goods-bottom-other goods-bottom-div lineBlock">
<div class="goods-bottom-img goods-bottom-img-4"></div>
<div class="goods-bottom-text">Payment</div>
</div>
<div class="goods-bottom-other goods-bottom-div lineBlock" style="position: relative;top:17px;">
<div class="goods-bottom-img goods-bottom-img-5"></div>
<div class="goods-bottom-text">Real-time Fabrication<br />Tracking</div>
</div>
<div class="goods-bottom-other goods-bottom-div lineBlock">
<div class="goods-bottom-img goods-bottom-img-6"></div>
<div class="goods-bottom-text">Delivery</div>
</div>
<div class="goods-bottom-other goods-bottom-div lineBlock">
<div class="goods-bottom-img goods-bottom-img-7"></div>
<div class="goods-bottom-text">Confirm Received</div>
</div>
</div>
</div>
</div>
<div class="map-section">
<div class="width-1180 ">
<h3 class="map-section-title">Make innovation simpler, faster and more convenient</h3>
<p class="map-section-desc">The best one-stop service for global electronic engineers.</p>
<div class="map-nums lbBox">
<div class="map-num lineBlock">
<h3>72626</h3>
<p>Paying Customers</p>
</div>
<div class="map-num lineBlock map-num-2">
<h3>38096</h3>
<p>Paid Customers</p>
</div>
<div class="map-num lineBlock">
<h3>2640</h3>
<p>Last 30 days</p>
</div>
</div>
<div class="map-data clr">
<div class="map-data-left fl">
<div class="title lbBox">
<div class="title-l lineBlock">Latest order</div>
<div class="title-r lineBlock lbBox">
<span class="count-text lineBlock">Today's new order: </span>
<span class="count lineBlock ellipsis va-b">1699</span>
<b class="lineBlock va-b">↑</b></div>
</div>
<div class="data-table">
<div class="data-table-header lbBox">
<div class="table-header-1 lineBlock">Date</div>
<div class="table-header-2 lineBlock">Buyer name</div>
<div class="table-header-3 lineBlock">Pieces</div>
<div class="table-header-4 lineBlock">Progress</div>
</div>
<div class="data-table-body">
<div class="data-table-tr lbBox">
<div class="table-td-1 lineBlock va-t">01-14</div>
<div class="table-td-2 lineBlock lbBox">
<img src="./images/home/mg.png" alt="">
<span class="lineBlock ellipsis">1111</span>
</div>
<div class="table-td-3 lineBlock ellipsis">1</div>
<div class="table-td-4 lineBlock">
<div class="progress">
<div class="active-progress"></div>
<div class="text-progress">70%</div>
</div>
</div>
</div>
<div class="data-table-tr lbBox">
<div class="table-td-1 lineBlock va-t">01-14</div>
<div class="table-td-2 lineBlock lbBox">
<img src="./images/home/mg.png" alt="">
<span class="lineBlock ellipsis">1111</span>
</div>
<div class="table-td-3 lineBlock ellipsis">10</div>
<div class="table-td-4 lineBlock">
<div class="progress">
<div class="active-progress"></div>
<div class="text-progress">70%</div>
</div>
</div>
</div>
<div class="data-table-tr lbBox">
<div class="table-td-1 lineBlock va-t">01-14</div>
<div class="table-td-2 lineBlock lbBox">
<img src="./images/home/mg.png" alt="">
<span class="lineBlock ellipsis">1111</span>
</div>
<div class="table-td-3 lineBlock ellipsis">10</div>
<div class="table-td-4 lineBlock">
<div class="progress">
<div class="active-progress"></div>
<div class="text-progress">70%</div>
</div>
</div>
</div>
<div class="data-table-tr lbBox">
<div class="table-td-1 lineBlock va-t">01-14</div>
<div class="table-td-2 lineBlock lbBox">
<img src="./images/home/mg.png" alt="">
<span class="lineBlock ellipsis">1111</span>
</div>
<div class="table-td-3 lineBlock ellipsis">10</div>
<div class="table-td-4 lineBlock">
<div class="progress">
<div class="active-progress"></div>
<div class="text-progress">70%</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="map-data-right fl">
<div class="point-div-1 point-div">
<div class="point-mark"></div>
<div class="point-desc boxsiz">
<h3 class="ellipsis">China</h3>
<div class="descs">
<div class="desc">
<span class="text">Files in production: </span>
<span class="num">42</span class="text">
</div>
<div class="desc">
<span class="text">Total number of files: </span class="text">
<span class="num">5280</span>
</div>
<div class="desc">
<span class="text">User Numbers: </span class="text">
<span class="num">1248</span>
</div>
</div>
</div>
</div>
<div class="point-div-2 point-div">
<div class="point-mark"></div>
<div class="point-desc boxsiz">
<h3 class="ellipsis">China</h3>
<div class="descs">
<div class="desc">
<span class="text">Files in production: </span>
<span class="num">42</span class="text">
</div>
<div class="desc">
<span class="text">Total number of files: </span class="text">
<span class="num">5280</span>
</div>
<div class="desc">
<span class="text">User Numbers: </span class="text">
<span class="num">1248</span>
</div>
</div>
</div>
</div>
<div class="point-div-3 point-div">
<div class="point-mark"></div>
<div class="point-desc boxsiz">
<h3 class="ellipsis">China</h3>
<div class="descs">
<div class="desc">
<span class="text">Files in production: </span>
<span class="num">42</span class="text">
</div>
<div class="desc">
<span class="text">Total number of files: </span class="text">
<span class="num">5280</span>
</div>
<div class="desc">
<span class="text">User Numbers: </span class="text">
<span class="num">1248</span>
</div>
</div>
</div>
</div>
<div class="point-div-4 point-div">
<div class="point-mark"></div>
<div class="point-desc boxsiz">
<h3 class="ellipsis">China</h3>
<div class="descs">
<div class="desc">
<span class="text">Files in production: </span>
<span class="num">42</span class="text">
</div>
<div class="desc">
<span class="text">Total number of files: </span class="text">
<span class="num">5280</span>
</div>
<div class="desc">
<span class="text">User Numbers: </span class="text">
<span class="num">1248</span>
</div>
</div>
</div>
</div>
<div class="point-div-5 point-div">
<div class="point-mark"></div>
<div class="point-desc boxsiz">
<h3 class="ellipsis">China</h3>
<div class="descs">
<div class="desc">
<span class="text">Files in production: </span>
<span class="num">42</span class="text">
</div>
<div class="desc">
<span class="text">Total number of files: </span class="text">
<span class="num">5280</span>
</div>
<div class="desc">
<span class="text">User Numbers: </span class="text">
<span class="num">1248</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</div>
</div>
</div>
<div class="banner-1-section">
<div class="width-1180">
<h3 class="banner-1-section-title">Chinese Ultrafast PCB & PCBA Manufacturer</h3>
<div class="banner-1-datas-div">
<div class="pre-div">
<div></div>
</div>
<div class="next-div">
<div></div>
</div>
<div class="banner-1-datas clr">
<div class="banner-1-data fl">
<img src="./images/home/banner-1.png" alt="">
<div class="banner-1-data-text">
<div class="no-hover boxsiz">
<h3>High Precision Drilling Machine</h3>
</div>
<div class="hover">
<h3>High Precision Drilling Machine</h3>
<ul>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> High-loaded, high precision ball screw</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> Guarantees the stability during performance</span>
</li>
</ul>
</div>
</div>
</div>
<div class="banner-1-data fl">
<img src="./images/home/banner-1.png" alt="">
<div class="banner-1-data-text">
<div class="no-hover boxsiz">
<h3>High Precision Drilling Machine</h3>
</div>
<div class="hover">
<h3>High Precision Drilling Machine</h3>
<ul>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> High-loaded, high precision ball screw</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> Guarantees the stability during performance</span>
</li>
</ul>
</div>
</div>
</div>
<div class="banner-1-data fl">
<img src="./images/home/banner-1.png" alt="">
<div class="banner-1-data-text">
<div class="no-hover boxsiz">
<h3>High Precision Drilling Machine</h3>
</div>
<div class="hover">
<h3>High Precision Drilling Machine</h3>
<ul>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> High-loaded, high precision ball screw</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> Guarantees the stability during performance</span>
</li>
</ul>
</div>
</div>
</div>
<div class="banner-1-data fl">
<img src="./images/home/banner-1.png" alt="">
<div class="banner-1-data-text">
<div class="no-hover boxsiz">
<h3>High Precision Drilling Machine</h3>
</div>
<div class="hover">
<h3>High Precision Drilling Machine</h3>
<ul>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> High-loaded, high precision ball screw</span>
</li>
<li class="lbBox">
<i class="lineBlock va-t"></i>
<span class="lineBlock"> Guarantees the stability during performance</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-2-section"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</body>
</html>
\ 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