Skip to content

W
www.fudou6.com
Commit ef576e75 authored by liaili's avatar liaili
Browse files
Options

7.29版本

parent f92e261e
Show whitespace changes
Inline Side-by-side
Showing with 1341 additions and 830 deletions
CSS/styles.css
View file @ ef576e75
...@@ -82,18 +82,14 @@ dd { ...@@ -82,18 +82,14 @@ dd {
width: 100%; width: 100%;
} }
#header { #header {
height: 100px;
position: relative; position: relative;
} }
#header img { #header > a {
position: absolute; position: absolute;
left: 15.789%;
top: 0; top: 0;
z-index: 999; z-index: 999;
} }
#header ul { #header ul {
margin-left: 34.89%;
line-height: 100px;
font-size: 16px; font-size: 16px;
} }
#header ul li { #header ul li {
...@@ -108,6 +104,33 @@ dd { ...@@ -108,6 +104,33 @@ dd {
#header ul li:hover a { #header ul li:hover a {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
} }
#header ul li:last-child {
margin-right: 0;
}
@media screen and (min-width: 1300px) {
#header {
height: 100px;
line-height: 100px;
}
#header > a {
left: 15.789%;
}
#header ul {
margin-left: 34.89%;
}
}
@media screen and (max-width: 1300px) {
#header {
height: 80px;
line-height: 80px;
}
#header > a {
left: 8.789%;
}
#header ul {
margin-left: 25.89%;
}
}
/*header结束*/ /*header结束*/
/*footer开始*/ /*footer开始*/
#footer { #footer {
...@@ -127,20 +150,21 @@ dd { ...@@ -127,20 +150,21 @@ dd {
margin-bottom: 50px; margin-bottom: 50px;
margin-top: 30px; margin-top: 30px;
} }
#footer div { #footer hr {
position: relative; position: relative;
width: 940px; width: 940px;
height: 1px;
background: #8c8c8c; background: #8c8c8c;
margin: 0 auto; margin: 0 auto;
} }
#footer div span { #footer hr::after {
position: absolute ; content: '';
left: 433px; display: block;
top: -1px; position: absolute;
top: -2px;
left: 443px;
background: #8c8c8c;
width: 73px; width: 73px;
height: 3px; height: 3px;
background: #8c8c8c;
} }
#footer .address { #footer .address {
margin-top: 60px; margin-top: 60px;
...@@ -161,7 +185,7 @@ dd { ...@@ -161,7 +185,7 @@ dd {
} }
/*footer结束*/ /*footer结束*/
/*首页*/ /*首页*/
.icon_lists .icon { .icon-lists .icon {
font-size: 33px; font-size: 33px;
color: #fff; color: #fff;
width: 27px; width: 27px;
...@@ -171,32 +195,57 @@ dd { ...@@ -171,32 +195,57 @@ dd {
} }
.banner, .banner,
.option, .option,
.project_list { .project-list {
width: 100%; width: 100%;
} }
.banner { .banner {
height: 524px;
background: url("../imgs/index/banner.jpg") no-repeat center center; background: url("../imgs/index/banner.jpg") no-repeat center center;
background-size: cover; background-size: cover;
padding-top: 227px;
} }
.banner .banner_box { .banner .banner-box {
width: 1100px;
margin: 0 auto; margin: 0 auto;
color: #fff; color: #fff;
} }
.banner .banner_box h4 { .banner .banner-box h4 {
width: 100%; width: 100%;
font-size: 82px;
margin-top: 0; margin-top: 0;
margin-bottom: 35px; margin-bottom: 35px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
} }
.banner .banner_box p { @media screen and (max-width: 1300px) {
.banner {
height: 375px;
padding-top: 123px;
}
.banner .banner-box {
width: 914px;
}
.banner .banner-box h4 {
font-size: 64px;
}
.banner .banner-box p {
font-size: 20px;
line-height: 35px;
width: 100%; width: 100%;
}
}
@media screen and (min-width: 1300px) {
.banner {
height: 524px;
padding-top: 227px;
}
.banner .banner-box {
width: 1100px;
}
.banner .banner-box h4 {
font-size: 82px;
}
.banner .banner-box p {
line-height: 48px; line-height: 48px;
font-size: 24px; font-size: 24px;
width: 100%;
}
} }
.download { .download {
text-align: center; text-align: center;
...@@ -204,19 +253,19 @@ dd { ...@@ -204,19 +253,19 @@ dd {
height: 670px; height: 670px;
margin: 0 auto; margin: 0 auto;
} }
.download .download_top { .download .download-top {
position: relative; position: relative;
width: 100%; width: 100%;
height: 366px; height: 366px;
} }
.download .download_top ul { .download .download-top ul {
position: absolute; position: absolute;
top: 129px; top: 129px;
left: 193px; left: 193px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.download .download_top ul li { .download .download-top ul li {
width: 261px; width: 261px;
height: 68px; height: 68px;
border-radius: 4px; border-radius: 4px;
...@@ -224,12 +273,12 @@ dd { ...@@ -224,12 +273,12 @@ dd {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.download .download_top ul li i { .download .download-top ul li i {
position: absolute; position: absolute;
left: 18px; left: 18px;
top: 13px; top: 13px;
} }
.download .download_top ul li b { .download .download-top ul li b {
position: absolute; position: absolute;
left: 66px; left: 66px;
display: inline-block; display: inline-block;
...@@ -237,19 +286,19 @@ dd { ...@@ -237,19 +286,19 @@ dd {
height: 68px; height: 68px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
.download .download_top ul li span { .download .download-top ul li span {
position: absolute; position: absolute;
left: 90px; left: 90px;
line-height: 68px; line-height: 68px;
} }
.download .download_top ul .android { .download .download-top ul .android {
background: #82b21c; background: #82b21c;
margin-bottom: 20px; margin-bottom: 20px;
} }
.download .download_top ul .iphone { .download .download-top ul .iphone {
background: #0079c2; background: #0079c2;
} }
.download .download_top a { .download .download-top a {
display: inline-block; display: inline-block;
width: 124px; width: 124px;
height: 124px; height: 124px;
...@@ -258,27 +307,27 @@ dd { ...@@ -258,27 +307,27 @@ dd {
left: 493px; left: 493px;
font-size: 14px; font-size: 14px;
} }
.download .download_top .iphone_img { .download .download-top .iphone-img {
position: absolute; position: absolute;
left: 686px; left: 686px;
top: -157px; top: -157px;
z-index: 10; z-index: 10;
} }
.download .download_top p { .download .download-top hr {
width: 938px; width: 938px;
height: 1px; color: #8c8c8c;
background: #8c8c8c;
position: absolute; position: absolute;
top: 362px; top: 362px;
left: 164px; left: 164px;
} }
.download .download_top p b { .download .download-top hr::after {
display: inline-block; content: '';
display: block;
width: 74px; width: 74px;
height: 3px; height: 3px;
position: absolute; position: absolute;
left: 432px; left: 432px;
top: -1px; top: -2px;
background: #8c8c8c; background: #8c8c8c;
} }
.download .download_bottom { .download .download_bottom {
...@@ -294,31 +343,31 @@ dd { ...@@ -294,31 +343,31 @@ dd {
text-align: center; text-align: center;
float: left; float: left;
} }
.download .download_bottom ul li .fl_box { .download .download_bottom ul li .fl-box {
position: relative; position: relative;
height: 163px; height: 163px;
} }
.download .download_bottom ul li .fl_box dl { .download .download_bottom ul li .fl-box dl {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.download .download_bottom ul li .fl_box dl .title { .download .download_bottom ul li .fl-box dl .title {
font-size: 36px; font-size: 36px;
margin: 0 0 22px 0; margin: 0 0 22px 0;
} }
.download .download_bottom ul li .fl_box dl .detail { .download .download_bottom ul li .fl-box dl .detail {
font-size: 14px; font-size: 14px;
} }
.download .download_bottom ul li .fl_box h4 { .download .download_bottom ul li .fl-box h4 {
font-size: 44px; font-size: 44px;
color: #111d2b; color: #111d2b;
margin-top: 50px; margin-top: 50px;
} }
.download .download_bottom ul li .fl_box p { .download .download_bottom ul li .fl-box p {
font-size: 16px; font-size: 16px;
color: #888; color: #888;
} }
.download .download_bottom ul li .fl_box > div { .download .download_bottom ul li .fl-box > div {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -326,40 +375,40 @@ dd { ...@@ -326,40 +375,40 @@ dd {
height: 100%; height: 100%;
transform: scale(0); transform: scale(0);
} }
.download .download_bottom ul li .fl_box > div:nth-child(2) { .download .download_bottom ul li .fl-box > div:nth-child(2) {
animation-name: stretchdelay01; animation-name: stretchdelay01;
animation-duration: 5s; animation-duration: 5s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
.download .download_bottom ul li .fl_box > div:nth-child(1) { .download .download_bottom ul li .fl-box > div:nth-child(1) {
animation-name: stretchdelay02; animation-name: stretchdelay02;
animation-duration: 5s; animation-duration: 5s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
.download .download_bottom ul li:nth-child(1) .fl_box > div:nth-child(2) { .download .download_bottom ul li:nth-child(1) .fl-box > div:nth-child(2) {
animation-delay: -1s; animation-delay: -1s;
} }
.download .download_bottom ul li:nth-child(1) .fl_box > div:nth-child(1) { .download .download_bottom ul li:nth-child(1) .fl-box > div:nth-child(1) {
animation-delay: 1.5s; animation-delay: 1.5s;
} }
.download .download_bottom ul li:nth-child(2) .fl_box > div:nth-child(2) { .download .download_bottom ul li:nth-child(2) .fl-box > div:nth-child(2) {
animation-delay: -0.75s; animation-delay: -0.75s;
} }
.download .download_bottom ul li:nth-child(2) .fl_box > div:nth-child(1) { .download .download_bottom ul li:nth-child(2) .fl-box > div:nth-child(1) {
animation-delay: 1.75s; animation-delay: 1.75s;
} }
.download .download_bottom ul li:nth-child(3) .fl_box > div:nth-child(2) { .download .download_bottom ul li:nth-child(3) .fl-box > div:nth-child(2) {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
.download .download_bottom ul li:nth-child(3) .fl_box > div:nth-child(1) { .download .download_bottom ul li:nth-child(3) .fl-box > div:nth-child(1) {
animation-delay: 2s; animation-delay: 2s;
} }
.download .download_bottom ul li:nth-child(4) .fl_box > div:nth-child(2) { .download .download_bottom ul li:nth-child(4) .fl-box > div:nth-child(2) {
animation-delay: -0.25s; animation-delay: -0.25s;
} }
.download .download_bottom ul li:nth-child(4) .fl_box > div:nth-child(1) { .download .download_bottom ul li:nth-child(4) .fl-box > div:nth-child(1) {
animation-delay: 2.25s; animation-delay: 2.25s;
} }
@-webkit-keyframes stretchdelay01 { @-webkit-keyframes stretchdelay01 {
...@@ -388,135 +437,133 @@ dd { ...@@ -388,135 +437,133 @@ dd {
width: 100%; width: 100%;
background: #f6f6f6; background: #f6f6f6;
} }
.projects .projects_header { .projects .projects-header {
width: 100%; width: 100%;
height: 296px; height: 296px;
} }
.projects .projects_header div { .projects .projects-header div {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; width: 25%;
width: 24%;
height: 100%; height: 100%;
background: #111d2b url("../imgs/index/icon_01.png") no-repeat 43% 86px; background: #111d2b url("../imgs/index/icon_01.png") no-repeat 43% 86px;
} }
.projects .projects_header p { .projects .projects-header p {
display: inline-block;
width: 75%; width: 75%;
height: 100%; height: 100%;
background: #2e2e2e url("../imgs/index/icon_02.jpg") no-repeat 58px 170px; background: #2e2e2e url("../imgs/index/icon_02.jpg") no-repeat 58px 170px;
font-size: 48px; font-size: 48px;
color: #fff; color: #fff;
} }
.projects .projects_header p span { .projects .projects-header p span {
display: inline-block; display: inline-block;
margin: 90px 0 0 44px; margin: 90px 0 0 44px;
} }
.projects .projects_content { .projects .projects-content {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding-bottom: 110px; padding-bottom: 110px;
} }
.projects .projects_content .project_intro { .projects .projects-content .project-intro {
list-style: disc; list-style: disc;
margin: 53px 0 100px 48px; margin: 53px 0 100px 48px;
width: 400px; width: 400px;
padding: 79px 20px 20px 0; padding: 79px 20px 20px 0;
border-right: 1px solid #7f7f7f ; border-right: 1px solid #7f7f7f;
font-size: 28px; font-size: 28px;
color: #565656; color: #565656;
line-height: 40px; line-height: 40px;
} }
.projects .projects_content .project_intro li { .projects .projects-content .project-intro li {
margin-bottom: 30px; margin-bottom: 30px;
} }
.projects .projects_content .computer { .projects .projects-content .computer {
position: absolute; position: absolute;
top: -128px; top: -128px;
left: 50%; left: 50%;
} }
.projects .projects_content .project_info { .projects .projects-content .project-info {
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
} }
.projects .projects_content .project_info .project_img { .projects .projects-content .project-info .project-img {
width: 750px; width: 750px;
height: 400px; height: 400px;
background: #faf; background: #faf;
} }
.projects .projects_content .project_info .project_one { .projects .projects-content .project-info .project-one {
background: url("../imgs/index/528ad57.jpg") no-repeat center center; background: url("../imgs/index/528ad57.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.projects .projects_content .project_info .project_two { .projects .projects-content .project-info .project-two {
background: url("../imgs/index/041c0cc.jpg") no-repeat center center; background: url("../imgs/index/041c0cc.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.projects .projects_content .project_info .mr50 { .projects .projects-content .project-info .mr50 {
margin-right: 50px; margin-right: 50px;
} }
.projects .projects_content .project_info .project_detail { .projects .projects-content .project-info .project-detail {
width: 400px; width: 400px;
height: 400px; height: 400px;
background: #2e2e2e; background: #2e2e2e;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.projects .projects_content .project_info .project_detail h4 { .projects .projects-content .project-info .project-detail h4 {
font-size: 44px; font-size: 44px;
margin-top: 80px; margin-top: 80px;
} }
.projects .projects_content .project_info .project_detail i { .projects .projects-content .project-info .project-detail i {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
height: 1px; height: 1px;
background: #979797; background: #979797;
margin: 20px 0; margin: 20px 0;
} }
.projects .projects_content .project_info .project_detail ul { .projects .projects-content .project-info .project-detail ul {
width: 100%; width: 100%;
} }
.projects .projects_content .project_info .project_detail ul li { .projects .projects-content .project-info .project-detail ul li {
width: 33%; width: 33%;
font-size: 20px; font-size: 20px;
} }
.projects .projects_content .project_info .project_detail ul li p { .projects .projects-content .project-info .project-detail ul li p {
font-size: 16px; font-size: 16px;
} }
.projects .projects_content .project_info .project_detail ul li p b { .projects .projects-content .project-info .project-detail ul li p b {
font-size: 36px; font-size: 36px;
} }
.projects .projects_content .project_info .project_detail div { .projects .projects-content .project-info .project-detail div {
font-size: 24px; font-size: 24px;
margin-top: 24px; margin-top: 24px;
margin-bottom: 26px; margin-bottom: 26px;
} }
.projects .projects_content .project_info .project_detail div a { .projects .projects-content .project-info .project-detail div a {
color: #fff; color: #fff;
} }
.projects .projects_content .project_info .project_detail_sm { .projects .projects-content .project-info .project-detail-sm {
width: 366px; width: 366px;
height: 366px; height: 366px;
} }
.projects .projects_content .project_info .project_three { .projects .projects-content .project-info .project-three {
background: #fff url("../imgs/index/fcfbb08.jpg") no-repeat center center; background: #fff url("../imgs/index/fcfbb08.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.projects .projects_content .project_info .project_four { .projects .projects-content .project-info .project-four {
background: #fff url("../imgs/index/5ce7cf8.jpg") no-repeat center center; background: #fff url("../imgs/index/5ce7cf8.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.projects .projects_content .project_info .project_five { .projects .projects-content .project-info .project-five {
background: #fff url("../imgs/index/38be78d.jpg") no-repeat center center; background: #fff url("../imgs/index/38be78d.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
/*产品详情页面*/ /*产品详情页面*/
.product_info { .product-info {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.product_info .product_info_title { .product-info .product-info-title {
margin: 26px 0; margin: 26px 0;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -525,7 +572,7 @@ dd { ...@@ -525,7 +572,7 @@ dd {
color: #2d2f33; color: #2d2f33;
padding-left: 20px; padding-left: 20px;
} }
.product_info .product_info_title b { .product-info .product-info-title b {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -534,26 +581,26 @@ dd { ...@@ -534,26 +581,26 @@ dd {
height: 40px; height: 40px;
background: #2d2f33; background: #2d2f33;
} }
.product_info .product_intro { .product-info .product-intro {
position: relative; position: relative;
} }
.product_info .product_intro table { .product-info .product-intro table {
width: 1020px; width: 1020px;
text-align: center; text-align: center;
color: #3f3f3f; color: #3f3f3f;
border-spacing: 0; border-spacing: 0;
} }
.product_info .product_intro table thead td { .product-info .product-intro table thead td {
width: 33.33%; width: 33.33%;
font-size: 22px; font-size: 22px;
line-height: 56px; line-height: 56px;
} }
.product_info .product_intro table tbody td { .product-info .product-intro table tbody td {
font-size: 18px; font-size: 18px;
line-height: 67px; line-height: 67px;
border-right: 1px solid #eaeaea; border-right: 1px solid #eaeaea;
} }
.product_info .product_intro table tbody td a { .product-info .product-intro table tbody td a {
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
padding: 19px 13px; padding: 19px 13px;
...@@ -561,22 +608,22 @@ dd { ...@@ -561,22 +608,22 @@ dd {
background: #ff4a4a; background: #ff4a4a;
border-radius: 10px; border-radius: 10px;
} }
.product_info .product_intro table tbody .profit { .product-info .product-intro table tbody .profit {
color: #ff4a4a; color: #ff4a4a;
} }
.product_info .product_intro table tbody .profit span { .product-info .product-intro table tbody .profit span {
font-size: 36px; font-size: 36px;
} }
.product_info .product_intro table tbody .noborder { .product-info .product-intro table tbody .noborder {
border-right: none; border-right: none;
} }
.product_info .product_intro table tfoot td { .product-info .product-intro table tfoot td {
line-height: 106px; line-height: 106px;
text-align: left; text-align: left;
padding-left: 100px; padding-left: 100px;
font-size: 18px; font-size: 18px;
} }
.product_info .product_intro table tfoot td p { .product-info .product-intro table tfoot td p {
display: inline-block; display: inline-block;
width: 365px; width: 365px;
height: 13px; height: 13px;
...@@ -584,24 +631,25 @@ dd { ...@@ -584,24 +631,25 @@ dd {
margin-left: 42px; margin-left: 42px;
position: relative; position: relative;
} }
.product_info .product_intro table tfoot td p i { .product-info .product-intro table tfoot td p i {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
display: inline-block; display: inline-block;
opacity: 0;
height: 13px; height: 13px;
background: #ff4a4a; background: #ff4a4a;
} }
.product_info .product_intro > div { .product-info .product-intro > div {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
border: 10px solid #ececec ; border: 10px solid #ececec;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 95px; top: 95px;
} }
.product_info .product_intro > div p { .product-info .product-intro > div p {
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
...@@ -609,7 +657,7 @@ dd { ...@@ -609,7 +657,7 @@ dd {
font-size: 40px; font-size: 40px;
color: #000; color: #000;
} }
.product_info .product_intro > div > div { .product-info .product-intro > div > div {
position: absolute; position: absolute;
top: -10px; top: -10px;
left: -10px; left: -10px;
...@@ -630,26 +678,26 @@ dd { ...@@ -630,26 +678,26 @@ dd {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.product_info .product_intro { .product-info .product-intro {
width: 100%; width: 100%;
height: 408px; height: 408px;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
.product_info .product_appointment { .product-info .product-appointment {
width: 100%; width: 100%;
height: 242px; height: 242px;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
.product_info .product_appointment p:nth-child(2) { .product-info .product-appointment p:nth-child(2) {
font-size: 18px; font-size: 18px;
color: #2d2f33; color: #2d2f33;
margin: 34px 0 24px; margin: 34px 0 24px;
padding-left: 20px; padding-left: 20px;
} }
.product_info .product_appointment form { .product-info .product-appointment form {
padding-left: 20px; padding-left: 20px;
} }
.product_info .product_appointment form input { .product-info .product-appointment form input {
outline: none; outline: none;
font-size: 14px; font-size: 14px;
color: #939393; color: #939393;
...@@ -660,7 +708,7 @@ dd { ...@@ -660,7 +708,7 @@ dd {
border-radius: 10px; border-radius: 10px;
margin-right: 45px; margin-right: 45px;
} }
.product_info .product_appointment form #submit { .product-info .product-appointment form #submit {
border: none; border: none;
line-height: 48px; line-height: 48px;
width: 86px; width: 86px;
...@@ -670,10 +718,10 @@ dd { ...@@ -670,10 +718,10 @@ dd {
font-size: 18px; font-size: 18px;
padding: 0; padding: 0;
} }
.product_info .product_appointment form #submit:hover { .product-info .product-appointment form #submit:hover {
background: #ec3737; background: #ec3737;
} }
.product_info .product_appointment #errorName { .product-info .product-appointment #errorName {
width: 246px; width: 246px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -682,7 +730,7 @@ dd { ...@@ -682,7 +730,7 @@ dd {
font-size: 17px; font-size: 17px;
margin-left: 20px; margin-left: 20px;
} }
.product_info .product_appointment #errorTel { .product-info .product-appointment #errorTel {
width: 246px; width: 246px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -691,61 +739,83 @@ dd { ...@@ -691,61 +739,83 @@ dd {
font-size: 17px; font-size: 17px;
margin-left: 45px; margin-left: 45px;
} }
.product_info .product_detail { .product-info .product-detail {
width: 100%; width: 100%;
height: 1759px; height: 1759px;
} }
.product_info .product_detail table { .product-info .product-detail table {
font-size: 14px; font-size: 14px;
color: #000; color: #000;
border-spacing: 0; border-spacing: 0;
line-height: 24px; line-height: 24px;
} }
.product_info .product_detail table .product_detail_key { .product-info .product-detail table .product-detail-key {
width: 140px; width: 140px;
} }
.product_info .product_detail table .product_detail_value { .product-info .product-detail table .product-detail-value {
width: 939px; width: 939px;
} }
.product_info .product_detail table td { .product-info .product-detail table td {
padding: 26px 60px; padding: 26px 60px;
vertical-align: top; vertical-align: top;
} }
.product_info .product_detail table .bb { .product-info .product-detail table .bb {
border-bottom: 1px solid #939393; border-bottom: 1px solid #939393;
} }
.product_info .product_detail table .br { .product-info .product-detail table .br {
border-right: 1px solid #939393; border-right: 1px solid #939393;
} }
/*热点项目*/ /*热点项目*/
.hot_project_banner { @media screen and (min-width: 1300px) {
.hot-project-banner {
height: 600px; height: 600px;
width: 100%; width: 100%;
background: url('../imgs/hot_project/hot_project_banner.jpg') no-repeat center center; background: url('../imgs/hot_project/hot_project_banner.jpg') no-repeat center center;
background-size: cover; background-size: cover;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.hot_project_banner h4 { .hot-project-banner h4 {
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
margin-top: 240px; margin-top: 240px;
margin-bottom: 60px; margin-bottom: 60px;
} }
.hot_project_banner p { .hot-project-banner p {
font-size: 32px; font-size: 32px;
line-height: 42px; line-height: 42px;
}
} }
.hot_project_introducer { @media screen and (max-width: 1300px) {
height: 868px; .hot-project-banner {
height: 470px;
width: 100%;
background: url('../imgs/hot_project/hot_project_banner.jpg') no-repeat center center;
background-size: cover;
text-align: center;
color: #fff;
}
.hot-project-banner h4 {
font-size: 54px;
font-weight: bold;
margin-top: 120px;
margin-bottom: 40px;
}
.hot-project-banner p {
font-size: 24px;
line-height: 36px;
}
}
.hot-project-introducer {
height: 728px;
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.hot_project_introducer > ul { .hot-project-introducer > ul {
width: 100%; width: 100%;
height: 180px; height: 180px;
} }
.hot_project_introducer > ul li { .hot-project-introducer > ul li {
width: 25%; width: 25%;
font-size: 18px; font-size: 18px;
color: #000; color: #000;
...@@ -753,7 +823,7 @@ dd { ...@@ -753,7 +823,7 @@ dd {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.hot_project_introducer > ul li i { .hot-project-introducer > ul li i {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -763,61 +833,63 @@ dd { ...@@ -763,61 +833,63 @@ dd {
top: -3px; top: -3px;
margin-right: 40px; margin-right: 40px;
} }
.hot_project_introducer > ul li b { .hot-project-introducer > ul li b {
display: inline-block; display: inline-block;
width: 46px; width: 46px;
height: 46px; height: 46px;
position: relative; position: relative;
top: 20px; top: 20px;
margin-right: 6px; margin-right: 6px;
background: url("../imgs/hot_project/tabs01.png") no-repeat 0 0; background: url("../imgs/hot_project/tabs01.png") no-repeat -46px -13px;
} }
.hot_project_introducer > ul li:nth-child(2) > b { .hot-project-introducer > ul li:nth-child(2) > b {
background-position: -60px 0; background-position: -176px -13px;
} }
.hot_project_introducer > ul li:nth-child(3) > b { .hot-project-introducer > ul li:nth-child(3) > b {
background-position: -120px 0; background-position: -329px -13px;
} }
.hot_project_introducer > ul li:nth-child(4) > b { .hot-project-introducer > ul li:nth-child(4) > b {
background-position: 0 -56px; background-position: -450px -13pxpx;
} }
.hot_project_introducer > p { .hot-project-introducer > hr {
width: 940px; width: 940px;
margin: 0 auto; margin: 0 auto;
height: 1px;
background: #959595; background: #959595;
position: relative; position: relative;
} }
.hot_project_introducer > p b { .hot-project-introducer hr::after {
display: inline-block; content: '';
display: block;
width: 73px; width: 73px;
height: 3px; height: 3px;
background: #01a9dd; background: #01a9dd;
position: absolute; position: absolute;
left: 433px; left: 433px;
top: -1px; top: -2px;
} }
.hot_project_introducer .introducer { .hot-project-introducer .introducer {
width: 100%; width: 700px;
margin: 0 auto;
position: relative;
} }
.hot_project_introducer .introducer h4 { .hot-project-introducer .introducer h4 {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin: 50px 0 58px; margin: 50px 0 58px;
} }
.hot_project_introducer .introducer div { .hot-project-introducer .introducer div {
width: 100%; width: 100%;
color: #000; color: #000;
margin: 15px 0;
} }
.hot_project_introducer .introducer div span { .hot-project-introducer .introducer div span {
font-size: 25px; font-size: 25px;
padding-right: 60px;
} }
.hot_project_introducer .introducer div input { .hot-project-introducer .introducer div input {
width: 740px; width: 506px;
height: 77px; height: 40px;
line-height: 77px; line-height: 40px;
font-size: 18px; font-size: 18px;
color: #7f7f7f; color: #7f7f7f;
outline: none; outline: none;
...@@ -825,27 +897,27 @@ dd { ...@@ -825,27 +897,27 @@ dd {
padding: 0 30px; padding: 0 30px;
background: #f4f4f4; background: #f4f4f4;
} }
.hot_project_introducer .introducer div textarea { .hot-project-introducer .introducer div textarea {
width: 740px; width: 506px;
min-height: 100px; min-height: 100px;
padding: 25px 30px; padding: 12px 30px;
font-size: 18px; font-size: 18px;
color: #7f7f7f; color: #7f7f7f;
border: 1px solid #090204; border: 1px solid #090204;
background: #f4f4f4; background: #f4f4f4;
outline: none; outline: none;
} }
.hot_project_introducer .introducer div:nth-child(4) span { .hot-project-introducer .introducer div:nth-child(4) span {
position: relative; position: relative;
left: 0; left: 0;
top: -74px; top: -74px;
} }
.hot_project_introducer .introducer div:last-child { .hot-project-introducer .introducer div:last-child {
text-align: center; text-align: center;
margin-top: 55px; margin-top: 55px;
} }
.hot_project_introducer .introducer div:last-child input { .hot-project-introducer .introducer div:last-child input {
width: 434px; width: 333px;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border: none; border: none;
...@@ -853,55 +925,64 @@ dd { ...@@ -853,55 +925,64 @@ dd {
color: #fff; color: #fff;
background: #868686; background: #868686;
border-radius: 10px; border-radius: 10px;
text-align: center;
} }
.hot_project_introducer .introducer p { .hot-project-introducer .introducer p {
height: 50px; height: 40px;
line-height: 50px; line-height: 40px;
font-size: 18px; font-size: 18px;
color: #ff4a4b; color: #ff4a4b;
padding-left: 215px; position: absolute;
}
.hot-project-introducer .introducer p:nth-child(3) {
top: 102px;
right: -238px;
}
.hot-project-introducer .introducer p:nth-child(5) {
top: 172px;
right: -152px;
} }
.hot_project_address { .hot-project-address {
width: 100%; width: 100%;
height: 926px; height: 926px;
background: #1272ac; background: #1272ac;
} }
.hot_project_address .hot_project_address_box { .hot-project-address .hot-project-address-box {
width: 1200px; width: 1200px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
.hot_project_address .hot_project_address_box > div:nth-child(1) { .hot-project-address .hot-project-address-box > div:nth-child(1) {
position: absolute; position: absolute;
color: #fff; color: #fff;
top: 40px; top: 40px;
left: 20px; left: 20px;
} }
.hot_project_address .hot_project_address_box > div:nth-child(1) h4 { .hot-project-address .hot-project-address-box > div:nth-child(1) h4 {
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
line-height: 42px; line-height: 42px;
} }
.hot_project_address .hot_project_address_box > div:nth-child(1) p { .hot-project-address .hot-project-address-box > div:nth-child(1) p {
font-size: 18px; font-size: 18px;
line-height: 53px; line-height: 53px;
} }
.hot_project_address .hot_project_address_box > div:nth-child(2) { .hot-project-address .hot-project-address-box > div:nth-child(2) {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.hot_project_tabs { .hot-project-tabs {
width: 1203px; width: 1203px;
height: 350px; height: 350px;
margin: 180px auto 160px; margin: 180px auto 160px;
} }
.hot_project_tabs ul { .hot-project-tabs ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #43abb6; border: 1px solid #43abb6;
} }
.hot_project_tabs ul li { .hot-project-tabs ul li {
width: 300px; width: 300px;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
...@@ -909,66 +990,113 @@ dd { ...@@ -909,66 +990,113 @@ dd {
background: #f6f6f6; background: #f6f6f6;
text-align: center; text-align: center;
} }
.hot_project_tabs ul li dl { .hot-project-tabs ul li dl {
width: 100%; width: 100%;
} }
.hot_project_tabs ul li dl dt { .hot-project-tabs ul li dl dt {
width: 115px; width: 115px;
height: 115px; height: 115px;
margin: 44px auto 0; margin: 44px auto 0;
} }
.hot_project_tabs ul li dl dd { .hot-project-tabs ul li dl dd {
line-height: 28px; line-height: 28px;
} }
.hot_project_tabs ul li dl dd h4 { .hot-project-tabs ul li dl dd h4 {
font-size: 28px; font-size: 28px;
color: #43abb6; color: #43abb6;
margin: 14px 0 24px; margin: 14px 0 24px;
} }
.hot_project_tabs ul li:nth-child(1) { .hot-project-tabs ul li:nth-child(1) {
border-right: 1px solid #43abb6; border-right: 1px solid #43abb6;
} }
.hot_project_tabs ul li:nth-child(1) dt { .hot-project-tabs ul li:nth-child(1) dt {
background: url("../imgs/hot_project/tabs05_b.png") no-repeat; background: url("../imgs/hot_project/tabs05_b.png") no-repeat;
} }
.hot_project_tabs ul li:nth-child(2) { .hot-project-tabs ul li:nth-child(2) {
border-right: 1px solid #43abb6; border-right: 1px solid #43abb6;
} }
.hot_project_tabs ul li:nth-child(2) dt { .hot-project-tabs ul li:nth-child(2) dt {
background: url("../imgs/hot_project/tabs04_b.png") no-repeat; background: url("../imgs/hot_project/tabs04_b.png") no-repeat;
} }
.hot_project_tabs ul li:nth-child(3) { .hot-project-tabs ul li:nth-child(3) {
border-right: 1px solid #43abb6; border-right: 1px solid #43abb6;
} }
.hot_project_tabs ul li:nth-child(3) dt { .hot-project-tabs ul li:nth-child(3) dt {
background: url("../imgs/hot_project/tabs03_b.png") no-repeat; background: url("../imgs/hot_project/tabs03_b.png") no-repeat;
} }
.hot_project_tabs ul li:nth-child(4) dt { .hot-project-tabs ul li:nth-child(4) dt {
background: url("../imgs/hot_project/tabs02_b.png") no-repeat; background: url("../imgs/hot_project/tabs02_b.png") no-repeat;
} }
.hot_project_tabs ul li:hover { .hot-project-tabs ul li:hover {
color: #fff; color: #fff;
background: #43abb6; background: #43abb6;
} }
.hot_project_tabs ul li:hover h4 { .hot-project-tabs ul li:hover h4 {
color: #fff; color: #fff;
} }
.hot_project_tabs ul li:nth-child(1):hover dt { @-webkit-keyframes changeOne {
0% {
opacity: 1;
background: url("../imgs/hot_project/tabs05_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../imgs/hot_project/tabs05_a.png ") no-repeat; background: url("../imgs/hot_project/tabs05_a.png ") no-repeat;
opacity: 1;
}
}
.hot-project-tabs ul li:nth-child(1):hover dt {
animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
} }
.hot_project_tabs ul li:nth-child(2):hover dt { @-webkit-keyframes changeTwo {
0% {
opacity: 1;
background: url("../imgs/hot_project/tabs04_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../imgs/hot_project/tabs04_a.png ") no-repeat; background: url("../imgs/hot_project/tabs04_a.png ") no-repeat;
opacity: 1;
}
}
.hot-project-tabs ul li:nth-child(2):hover dt {
animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
} }
.hot_project_tabs ul li:nth-child(3):hover dt { @-webkit-keyframes changeThree {
0% {
opacity: 1;
background: url("../imgs/hot_project/tabs03_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
background: url("../imgs/hot_project/tabs03_a.png ") no-repeat; background: url("../imgs/hot_project/tabs03_a.png ") no-repeat;
}
}
.hot-project-tabs ul li:nth-child(3):hover dt {
animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
} }
.hot_project_tabs ul li:nth-child(4):hover dt { @-webkit-keyframes changeFour {
0% {
background: url("../imgs/hot_project/tabs02_a.png ") no-repeat; background: url("../imgs/hot_project/tabs02_a.png ") no-repeat;
}
} }
body { body {
position: relative; position: relative;
} }
.modal_box { .modal-box {
display: none; display: none;
top: 0; top: 0;
left: 0; left: 0;
...@@ -978,7 +1106,7 @@ body { ...@@ -978,7 +1106,7 @@ body {
z-index: 999; z-index: 999;
position: fixed; position: fixed;
} }
.modal_box .modal_dialog { .modal-box .modal-dialog {
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -989,33 +1117,33 @@ body { ...@@ -989,33 +1117,33 @@ body {
background: #fff; background: #fff;
padding-left: 70px; padding-left: 70px;
} }
.modal_box .modal_dialog h4 { .modal-box .modal-dialog h4 {
margin-top: 69px; margin-top: 69px;
font-size: 35px; font-size: 35px;
color: #000; color: #000;
} }
.modal_box .modal_dialog h3 { .modal-box .modal-dialog h3 {
font-size: 45px; font-size: 45px;
font-weight: bold; font-weight: bold;
color: #ff4a4a; color: #ff4a4a;
margin: 43px 0; margin: 43px 0;
} }
.modal_box .modal_dialog h6 { .modal-box .modal-dialog h6 {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.modal_box .modal_dialog p { .modal-box .modal-dialog p {
font-size: 18px; font-size: 18px;
width: 331px; width: 331px;
line-height: 28px; line-height: 28px;
} }
.modal_box .modal_dialog img { .modal-box .modal-dialog img {
position: absolute; position: absolute;
right: 55px; right: 55px;
top: 108px; top: 108px;
} }
.modal_box .modal_dialog b { .modal-box .modal-dialog b {
font-size: 42px; font-size: 42px;
position: absolute; position: absolute;
right: 27px; right: 27px;
...@@ -1023,63 +1151,97 @@ body { ...@@ -1023,63 +1151,97 @@ body {
cursor: pointer; cursor: pointer;
} }
/*关于我们页面*/ /*关于我们页面*/
.about_us_banner { @media screen and (min-width: 1300px) {
.about_us-banner {
width: 100%; width: 100%;
height: 667px; height: 667px;
background: url("../imgs/index/banner.jpg") no-repeat center center; background: url("../imgs/index/banner.jpg") no-repeat center center;
background-size: cover; background-size: cover;
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
.about_us_banner .banner_box { .about_us-banner .banner-box {
width: 1100px; width: 1100px;
margin: 200px auto 0; margin: 200px auto 0;
color: #fff; color: #fff;
} }
.about_us_banner .banner_box h4 { .about_us-banner .banner-box h4 {
width: 100%; width: 100%;
font-size: 82px; font-size: 82px;
margin-top: 0; margin-top: 0;
margin-bottom: 35px; margin-bottom: 35px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
} }
.about_us_banner .banner_box p { .about_us-banner .banner-box p {
width: 100%; width: 100%;
line-height: 48px; line-height: 48px;
font-size: 24px; font-size: 24px;
text-align: left;
}
}
@media screen and (max-width: 1300px) {
.about-us-banner {
width: 100%;
height: 450px;
background: url("../imgs/index/banner.jpg") no-repeat center center;
background-size: cover;
color: #fff;
text-align: center;
}
.about-us-banner .banner-box {
width: 914px;
margin: 140px auto 0;
color: #fff;
}
.about-us-banner .banner-box h4 {
width: 100%;
font-size: 64px;
margin-top: 0;
margin-bottom: 35px;
text-align: center;
font-weight: normal;
}
.about-us-banner .banner-box p {
width: 100%;
line-height: 35px;
font-size: 20px;
text-align: left;
}
} }
.about_us_banner_bottom { .about-us-banner-bottom {
width: 100%; width: 100%;
height: 824px; height: 824px;
background: url("../imgs/about_us/bg_2.jpg") no-repeat center center; background: url("../imgs/about_us/bg_2.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.about_us_banner_bottom h4 { .about-us-banner-bottom h4 {
font-size: 52px; font-size: 52px;
color: #fff; color: #fff;
margin: 28px auto 16px; margin: 28px auto 16px;
text-align: center; text-align: center;
} }
.about_us_banner_bottom b { .about-us-banner-bottom hr {
display: block; display: block;
width: 73px; width: 73px;
height: 3px; border: 3px solid #0074c3;
border-bottom: transparent;
border-left: transparent;
border-right: transparent;
margin: 0 auto; margin: 0 auto;
background: #0074c3;
} }
.about_us_banner_bottom p { .about-us-banner-bottom p {
font-size: 22px; font-size: 22px;
width: 992px; width: 992px;
margin: 572px auto 0; margin: 572px auto 0;
line-height: 42px; line-height: 42px;
} }
.company_introduction { .company-introduction {
height: 1300px; height: 1300px;
width: 100%; width: 100%;
background: #f6f6f6; background: #f6f6f6;
} }
.company_introduction h2 { .company-introduction h2 {
width: 1200px; width: 1200px;
height: 74px; height: 74px;
line-height: 74px; line-height: 74px;
...@@ -1088,7 +1250,7 @@ body { ...@@ -1088,7 +1250,7 @@ body {
padding-left: 20px; padding-left: 20px;
margin: 40px auto; margin: 40px auto;
} }
.company_introduction h2 b { .company-introduction h2 b {
display: inline-block; display: inline-block;
height: 74px; height: 74px;
width: 3px; width: 3px;
...@@ -1097,89 +1259,146 @@ body { ...@@ -1097,89 +1259,146 @@ body {
left: 0; left: 0;
top: 0; top: 0;
} }
.company_introduction ul { .company-introduction ul {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.company_introduction ul li { .company-introduction ul li {
text-align: center; text-align: center;
width: 300px; width: 300px;
padding: 0 50px 60px; padding: 0 50px 60px;
} }
.company_introduction ul li h4 { .company-introduction ul li h4 {
font-size: 54px; font-size: 54px;
color: #000; color: #000;
line-height: 75px; line-height: 75px;
} }
.company_introduction ul li h6 { .company-introduction ul li h6 {
font-size: 18px; font-size: 18px;
color: #666666; color: #666666;
margin: 10px 0 20px; margin: 10px 0 20px;
} }
.company_introduction ul li p { .company-introduction ul li p {
line-height: 27px; line-height: 27px;
font-size: 15px; font-size: 15px;
color: #000; color: #000;
text-align: left; text-align: left;
} }
.company_introduction ul li:nth-child(1) { .company-introduction ul li:nth-child(1) {
width: 299px; width: 299px;
border-right: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3;
} }
.company_introduction ul li:nth-child(2) { .company-introduction ul li:nth-child(2) {
width: 299px; width: 299px;
border-right: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3;
} }
.company_introduction div { .company-introduction div {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
background: url("../imgs/about_us/bg_3.jpg");
} }
.company_introduction div a { .company-introduction div a {
display: inline-block; display: inline-block;
width: 280px; width: 280px;
height: 270px; height: 270px;
text-align: center; text-align: center;
margin-right: 17px; margin-right: 17px;
border-right: 1px solid #c3c3c3;
position: relative;
} }
.company_introduction div a:nth-child(1) { .company-introduction div a:nth-child(1) {
background: url("../imgs/about_us/zhongjiang.jpg") no-repeat; background: url("../imgs/about_us/zhongjiang.jpg") no-repeat;
border-bottom: 1px solid #c3c3c3;
} }
.company_introduction div a:nth-child(2) { .company-introduction div a:nth-child(1)::before {
content: '';
display: inline-block;
width: 17px;
height: 20px;
position: absolute;
left: 0;
bottom: -10px;
background: #f6f6f6;
}
.company-introduction div a:nth-child(1)::after {
content: '';
display: inline-block;
width: 34px;
height: 20px;
position: absolute;
right: -17px;
bottom: -10px;
background: #f6f6f6;
}
.company-introduction div a:nth-child(2) {
background: url("../imgs/about_us/zhongrong.jpg") no-repeat; background: url("../imgs/about_us/zhongrong.jpg") no-repeat;
border-bottom: 1px solid #c3c3c3;
}
.company-introduction div a:nth-child(2)::after {
content: '';
display: inline-block;
width: 34px;
height: 20px;
position: absolute;
right: -17px;
bottom: -10px;
background: #f6f6f6;
} }
.company_introduction div a:nth-child(3) { .company-introduction div a:nth-child(3) {
background: url("../imgs/about_us/guomin.jpg") no-repeat; background: url("../imgs/about_us/guomin.jpg") no-repeat;
border-bottom: 1px solid #c3c3c3;
}
.company-introduction div a:nth-child(3)::after {
content: '';
display: inline-block;
width: 34px;
height: 20px;
position: absolute;
right: -17px;
bottom: -10px;
background: #f6f6f6;
} }
.company_introduction div a:nth-child(4) { .company-introduction div a:nth-child(4) {
background: url("../imgs/about_us/guangda.jpg") no-repeat; background: url("../imgs/about_us/guangda.jpg") no-repeat;
margin-right: 0; margin-right: 0;
border-right: none;
border-bottom: 1px solid #c3c3c3;
}
.company-introduction div a:nth-child(4)::after {
content: '';
display: inline-block;
width: 17px;
height: 20px;
position: absolute;
right: 0px;
bottom: -10px;
background: #f6f6f6;
} }
.company_introduction div a:nth-child(5) { .company-introduction div a:nth-child(5) {
background: url("../imgs/about_us/zhongxing.jpg") no-repeat; background: url("../imgs/about_us/zhongxing.jpg") no-repeat;
} }
.company_introduction div a:nth-child(6) { .company-introduction div a:nth-child(6) {
background: url("../imgs/about_us/fangzheng.jpg") no-repeat; background: url("../imgs/about_us/fangzheng.jpg") no-repeat;
} }
.company_introduction div a:nth-child(7) { .company-introduction div a:nth-child(7) {
background: url("../imgs/about_us/huaxing.jpg") no-repeat; background: url("../imgs/about_us/huaxing.jpg") no-repeat;
} }
.company_introduction div a:nth-child(8) { .company-introduction div a:nth-child(8) {
background: url("../imgs/about_us/zhongtai.jpg") no-repeat; background: url("../imgs/about_us/zhongtai.jpg") no-repeat;
margin: 0; margin: 0;
border-right: none;
} }
.address_map { .address-map {
height: 575px; height: 575px;
width: 100%; width: 100%;
background: url("../imgs/about_us/map.jpg") no-repeat center center; background: url("../imgs/about_us/map.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.address_map > div { .address-map > div {
width: 1200px; width: 1200px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
} }
.address_map > div > div { .address-map > div > div {
margin: 150px 0 0 240px; margin: 150px 0 0 240px;
width: 291px; width: 291px;
height: 207px; height: 207px;
...@@ -1187,7 +1406,7 @@ body { ...@@ -1187,7 +1406,7 @@ body {
background: #fff; background: #fff;
position: relative; position: relative;
} }
.address_map > div > div span { .address-map > div > div span {
display: inline-block; display: inline-block;
width: 66px; width: 66px;
height: 66px; height: 66px;
...@@ -1198,28 +1417,28 @@ body { ...@@ -1198,28 +1417,28 @@ body {
top: 18px; top: 18px;
text-align: center; text-align: center;
} }
.address_map > div > div span img { .address-map > div > div span img {
margin-top: 18px; margin-top: 18px;
} }
.address_map > div > div h4 { .address-map > div > div h4 {
font-size: 36px; font-size: 36px;
color: #444444; color: #444444;
line-height: 46px; line-height: 46px;
margin-left: 64px; margin-left: 64px;
} }
.address_map > div > div b { .address-map > div > div hr {
display: block; display: block;
width: 149px; width: 149px;
height: 1px; border: none;
background: #a9a9a9; border-bottom: 1px solid #a9a9a9;
margin: 5px auto 10px; margin: 5px auto 20px;
} }
.address_map > div > div p { .address-map > div > div p {
font-size: 18px; font-size: 18px;
color: #828282; color: #828282;
line-height: 24px; line-height: 24px;
} }
.address_map > div > div h3 { .address-map > div > div h3 {
font-size: 25px; font-size: 25px;
color: #fb2274; color: #fb2274;
margin-top: 20px; margin-top: 20px;
......
CSS/styles.less
View file @ ef576e75
/*公共样式*/ /*公共样式*/
@import 'iconfont'; @import 'iconfont';
body { body {
font-family: Microsoft YaHei, simhei, Tahoma, Arial, sans-serif; font-family: Microsoft YaHei, simhei, Tahoma, Arial, sans-serif;
} }
ul,ol {
ul, ol {
list-style: none; list-style: none;
} }
.clear::after{
.clear::after {
content: ''; content: '';
display: block; display: block;
clear: both; clear: both;
} }
.clear::before { .clear::before {
content: ''; content: '';
display: table; display: table;
} }
a { a {
text-decoration: none; text-decoration: none;
color:#000; color: #000;
} }
h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
margin:0;padding: 0; h1, h2, h3, h4, h5, h6, ul, li, b, p, dl, dt, dd {
margin: 0;
padding: 0;
font-weight: normal; font-weight: normal;
} }
.fl {float: left;}
.fr {float: right} .fl {
float: left;
}
.fr {
float: right
}
/*公共样式结束*/ /*公共样式结束*/
/*header开始*/ /*header开始*/
#header,#footer {width: 100%;} #header, #footer {
width: 100%;
}
#header { #header {
height: 100px;
position: relative; position: relative;
img { > a {
position: absolute; position: absolute;
left:15.789%; top: 0;
top:0;
z-index: 999; z-index: 999;
} }
ul { ul {
margin-left:34.89%;
line-height: 100px;
font-size: 16px; font-size: 16px;
li { li {
margin-right: 44px; margin-right: 44px;
...@@ -55,11 +68,39 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -55,11 +68,39 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
} }
} }
li:last-child {
margin-right: 0;
}
}
}
@media screen and (min-width: 1300px) {
#header {
height: 100px;
line-height: 100px;
> a {
left: 15.789%;
}
ul {
margin-left: 34.89%;
}
} }
} }
/*header结束*/
@media screen and (max-width: 1300px) {
#header {
height: 80px;
line-height: 80px;
> a {
left: 8.789%;
}
ul {
margin-left: 25.89%;
}
}
}
/*header结束*/
/*footer开始*/ /*footer开始*/
#footer { #footer {
...@@ -78,20 +119,21 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -78,20 +119,21 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
margin-bottom: 50px; margin-bottom: 50px;
margin-top: 30px; margin-top: 30px;
} }
div { hr {
position: relative; position: relative;
width: 940px; width: 940px;
height: 1px;
background: #8c8c8c; background: #8c8c8c;
margin: 0 auto; margin: 0 auto;
span { }
position:absolute ; hr::after {
left:433px; content: '';
top:-1px; display: block;
position: absolute;
top: -2px;
left: 443px;
background: #8c8c8c;
width: 73px; width: 73px;
height: 3px; height: 3px;
background: #8c8c8c;
}
} }
.address { .address {
margin-top: 60px; margin-top: 60px;
...@@ -111,49 +153,84 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -111,49 +153,84 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
} }
} }
/*footer结束*/
/*footer结束*/
/*首页*/ /*首页*/
.icon_lists .icon { .icon-lists .icon {
font-size:33px; font-size: 33px;
color:#fff; color: #fff;
width: 27px; width: 27px;
} }
#section {width:100%;}
.banner,.option,.project_list { #section {
width:100%; width: 100%;
}
.banner, .option, .project-list {
width: 100%;
} }
.banner { .banner {
height: 524px;
background: url("../imgs/index/banner.jpg")no-repeat center center; background: url("../imgs/index/banner.jpg") no-repeat center center;
background-size:cover; background-size: cover;
padding-top:227px; .banner-box {
.banner_box {
width:1100px;
margin: 0 auto; margin: 0 auto;
color:#fff; color: #fff;
h4 { h4 {
width:100%; width: 100%;
font-size: 82px; margin-top: 0;
margin-top:0;
margin-bottom: 35px; margin-bottom: 35px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
} }
}
}
@media screen and (max-width: 1300px) {
.banner {
height: 375px;
padding-top: 123px;
.banner-box {
width: 914px;
h4 {
font-size: 64px;
}
p {
font-size: 20px;
line-height: 35px;
width: 100%;
}
}
}
}
@media screen and (min-width: 1300px) {
.banner {
height: 524px;
padding-top: 227px;
.banner-box {
width: 1100px;
h4 {
font-size: 82px;
}
p { p {
width:100%;
line-height: 48px; line-height: 48px;
font-size: 24px; font-size: 24px;
width: 100%;
}
} }
} }
} }
.download { .download {
text-align: center; text-align: center;
width: 1207px; width: 1207px;
height: 670px; height: 670px;
margin: 0 auto; margin: 0 auto;
.download_top { .download-top {
position: relative; position: relative;
width: 100%; width: 100%;
height: 366px; height: 366px;
...@@ -206,30 +283,30 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -206,30 +283,30 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
left: 493px; left: 493px;
font-size: 14px; font-size: 14px;
} }
.iphone_img { .iphone-img {
position: absolute; position: absolute;
left: 686px; left: 686px;
top: -157px; top: -157px;
z-index: 10; z-index: 10;
} }
p { hr {
width: 938px; width: 938px;
height: 1px; color: #8c8c8c;
background: #8c8c8c;
position: absolute; position: absolute;
top: 362px; top: 362px;
left: 164px; left: 164px;
b { }
display: inline-block; hr::after {
content: '';
display: block;
width: 74px; width: 74px;
height: 3px; height: 3px;
position: absolute; position: absolute;
left: 432px; left: 432px;
top: -1px; top: -2px;
background: #8c8c8c; background: #8c8c8c;
} }
} }
}
.download_bottom { .download_bottom {
width: 100%; width: 100%;
...@@ -241,7 +318,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -241,7 +318,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
height: 163px; height: 163px;
text-align: center; text-align: center;
float: left; float: left;
.fl_box { .fl-box {
position: relative; position: relative;
height: 163px; height: 163px;
dl { dl {
...@@ -264,7 +341,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -264,7 +341,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
font-size: 16px; font-size: 16px;
color: #888; color: #888;
} }
>div { > div {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
...@@ -272,56 +349,56 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -272,56 +349,56 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
height: 100%; height: 100%;
transform: scale(0); transform: scale(0);
} }
>div:nth-child(2){ > div:nth-child(2) {
animation-name: stretchdelay01; animation-name: stretchdelay01;
animation-duration:5s; animation-duration: 5s;
animation-iteration-count:infinite; animation-iteration-count: infinite;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
>div:nth-child(1){ > div:nth-child(1) {
animation-name: stretchdelay02; animation-name: stretchdelay02;
animation-duration:5s; animation-duration: 5s;
animation-iteration-count:infinite; animation-iteration-count: infinite;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
} }
} }
li:nth-child(1){ li:nth-child(1) {
.fl_box{ .fl-box {
>div:nth-child(2) { > div:nth-child(2) {
animation-delay: -1s; animation-delay: -1s;
} }
>div:nth-child(1) { > div:nth-child(1) {
animation-delay: 1.5s; animation-delay: 1.5s;
} }
} }
} }
li:nth-child(2){ li:nth-child(2) {
.fl_box{ .fl-box {
>div:nth-child(2) { > div:nth-child(2) {
animation-delay: -0.75s; animation-delay: -0.75s;
} }
>div:nth-child(1) { > div:nth-child(1) {
animation-delay: 1.75s; animation-delay: 1.75s;
} }
} }
} }
li:nth-child(3){ li:nth-child(3) {
.fl_box{ .fl-box {
>div:nth-child(2) { > div:nth-child(2) {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
>div:nth-child(1) { > div:nth-child(1) {
animation-delay: 2s; animation-delay: 2s;
} }
} }
} }
li:nth-child(4){ li:nth-child(4) {
.fl_box{ .fl-box {
>div:nth-child(2) { > div:nth-child(2) {
animation-delay: -0.25s; animation-delay: -0.25s;
} }
>div:nth-child(1) { > div:nth-child(1) {
animation-delay: 2.25s; animation-delay: 2.25s;
} }
} }
...@@ -330,38 +407,39 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -330,38 +407,39 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
} }
@-webkit-keyframes stretchdelay01 { @-webkit-keyframes stretchdelay01 {
0%,50%,100%{ 0%, 50%, 100% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
} }
5%,45%{ 5%, 45% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
} }
} }
@-webkit-keyframes stretchdelay02 { @-webkit-keyframes stretchdelay02 {
0%,55%,100%{ 0%, 55%, 100% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
} }
5%,50%{ 5%, 50% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
} }
} }
.projects { .projects {
width: 100%; width: 100%;
background: #f6f6f6; background: #f6f6f6;
.projects_header { .projects-header {
width: 100%; width: 100%;
height: 296px; height: 296px;
div { div {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; width: 25%;
width: 24%;
height: 100%; height: 100%;
background: #111d2b url("../imgs/index/icon_01.png") no-repeat 43% 86px; background: #111d2b url("../imgs/index/icon_01.png") no-repeat 43% 86px;
} }
p { p {
display: inline-block;
width: 75%; width: 75%;
height: 100%; height: 100%;
background: #2e2e2e url("../imgs/index/icon_02.jpg") no-repeat 58px 170px; background: #2e2e2e url("../imgs/index/icon_02.jpg") no-repeat 58px 170px;
...@@ -373,18 +451,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -373,18 +451,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
} }
} }
.projects_content { .projects-content {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding-bottom: 110px; padding-bottom: 110px;
.project_intro { .project-intro {
list-style: disc; list-style: disc;
margin: 53px 0 100px 48px; margin: 53px 0 100px 48px;
width: 400px; width: 400px;
padding:79px 20px 20px 0; padding: 79px 20px 20px 0;
border-right:1px solid #7f7f7f ; border-right: 1px solid #7f7f7f;
font-size: 28px; font-size: 28px;
color: #565656; color: #565656;
line-height: 40px; line-height: 40px;
...@@ -394,29 +472,29 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -394,29 +472,29 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
.computer { .computer {
position: absolute; position: absolute;
top:-128px; top: -128px;
left:50%; left: 50%;
} }
.project_info{ .project-info {
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
.project_img { .project-img {
width: 750px; width: 750px;
height: 400px; height: 400px;
background: #faf; background: #faf;
} }
.project_one { .project-one {
background: url("../imgs/index/528ad57.jpg")no-repeat center center; background: url("../imgs/index/528ad57.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.project_two { .project-two {
background: url("../imgs/index/041c0cc.jpg")no-repeat center center; background: url("../imgs/index/041c0cc.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.mr50{ .mr50 {
margin-right: 50px; margin-right: 50px;
} }
.project_detail{ .project-detail {
width: 400px; width: 400px;
height: 400px; height: 400px;
background: #2e2e2e; background: #2e2e2e;
...@@ -431,7 +509,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -431,7 +509,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
width: 300px; width: 300px;
height: 1px; height: 1px;
background: #979797; background: #979797;
margin:20px 0; margin: 20px 0;
} }
ul { ul {
width: 100%; width: 100%;
...@@ -455,20 +533,20 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -455,20 +533,20 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
} }
} }
.project_detail_sm { .project-detail-sm {
width: 366px; width: 366px;
height: 366px; height: 366px;
} }
.project_three { .project-three {
background: #fff url("../imgs/index/fcfbb08.jpg")no-repeat center center; background: #fff url("../imgs/index/fcfbb08.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.project_four { .project-four {
background: #fff url("../imgs/index/5ce7cf8.jpg")no-repeat center center; background: #fff url("../imgs/index/5ce7cf8.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
.project_five { .project-five {
background: #fff url("../imgs/index/38be78d.jpg")no-repeat center center; background: #fff url("../imgs/index/38be78d.jpg") no-repeat center center;
background-size: cover; background-size: cover;
} }
} }
...@@ -476,28 +554,28 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -476,28 +554,28 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
/*产品详情页面*/ /*产品详情页面*/
.product_info { .product-info {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
.product_info_title { .product-info-title {
margin:26px 0; margin: 26px 0;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: relative; position: relative;
font-size: 28px; font-size: 28px;
color:#2d2f33; color: #2d2f33;
padding-left: 20px; padding-left: 20px;
b { b {
position: absolute; position: absolute;
left:0; left: 0;
top:0; top: 0;
display: inline-block; display: inline-block;
width: 9px; width: 9px;
height: 40px; height: 40px;
background: #2d2f33; background: #2d2f33;
} }
} }
.product_intro { .product-intro {
position: relative; position: relative;
table { table {
width: 1020px; width: 1020px;
...@@ -520,18 +598,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -520,18 +598,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
padding: 19px 13px; padding: 19px 13px;
margin-top:43px; margin-top: 43px;
background: #ff4a4a; background: #ff4a4a;
border-radius: 10px; border-radius: 10px;
} }
} }
.profit{ .profit {
color: #ff4a4a; color: #ff4a4a;
span { span {
font-size: 36px; font-size: 36px;
} }
} }
.noborder{ .noborder {
border-right: none; border-right: none;
} }
} }
...@@ -551,8 +629,9 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -551,8 +629,9 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
i { i {
position: absolute; position: absolute;
left: 0; left: 0;
top:0; top: 0;
display: inline-block; display: inline-block;
opacity: 0;
height: 13px; height: 13px;
background: #ff4a4a; background: #ff4a4a;
} }
...@@ -560,14 +639,14 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -560,14 +639,14 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
} }
} }
>div { > div {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
border:10px solid #ececec ; border: 10px solid #ececec;
position: absolute; position: absolute;
right:0px; right: 0px;
top:95px; top: 95px;
p { p {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -576,38 +655,42 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -576,38 +655,42 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
font-size: 40px; font-size: 40px;
color: #000; color: #000;
} }
>div { > div {
position: absolute; position: absolute;
top:-10px; top: -10px;
left:-10px; left: -10px;
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
border: 10px solid #ff4a4a; border: 10px solid #ff4a4a;
border-bottom-color:transparent; border-bottom-color: transparent;
border-top-color:transparent; border-top-color: transparent;
border-left-color:transparent; border-left-color: transparent;
animation: huxian 1s infinite linear; animation: huxian 1s infinite linear;
} }
} }
} }
@-webkit-keyframes huxian { @-webkit-keyframes huxian {
0% {transform:rotate(0deg)} 0% {
100% {transform: rotate(360deg)} transform: rotate(0deg)
} }
.product_intro { 100% {
transform: rotate(360deg)
}
}
.product-intro {
width: 100%; width: 100%;
height: 408px; height: 408px;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
.product_appointment { .product-appointment {
width: 100%; width: 100%;
height: 242px; height: 242px;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
p:nth-child(2) { p:nth-child(2) {
font-size: 18px; font-size: 18px;
color: #2d2f33; color: #2d2f33;
margin:34px 0 24px; margin: 34px 0 24px;
padding-left: 20px; padding-left: 20px;
} }
form { form {
...@@ -633,7 +716,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -633,7 +716,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
font-size: 18px; font-size: 18px;
padding: 0; padding: 0;
} }
#submit:hover{ #submit:hover {
background: #ec3737; background: #ec3737;
} }
} }
...@@ -641,7 +724,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -641,7 +724,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
width: 246px; width: 246px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color:#ff4a4a; color: #ff4a4a;
padding-left: 14px; padding-left: 14px;
font-size: 17px; font-size: 17px;
margin-left: 20px; margin-left: 20px;
...@@ -650,13 +733,13 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -650,13 +733,13 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
width: 246px; width: 246px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
color:#ff4a4a; color: #ff4a4a;
padding-left: 14px; padding-left: 14px;
font-size: 17px; font-size: 17px;
margin-left: 45px; margin-left: 45px;
} }
} }
.product_detail { .product-detail {
width: 100%; width: 100%;
height: 1759px; height: 1759px;
table { table {
...@@ -664,20 +747,20 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -664,20 +747,20 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
color: #000; color: #000;
border-spacing: 0; border-spacing: 0;
line-height: 24px; line-height: 24px;
.product_detail_key{ .product-detail-key {
width: 140px; width: 140px;
} }
.product_detail_value{ .product-detail-value {
width: 939px; width: 939px;
} }
td { td {
padding:26px 60px; padding: 26px 60px;
vertical-align: top; vertical-align: top;
} }
.bb { .bb {
border-bottom: 1px solid #939393; border-bottom: 1px solid #939393;
} }
.br{ .br {
border-right: 1px solid #939393; border-right: 1px solid #939393;
} }
} }
...@@ -685,10 +768,11 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -685,10 +768,11 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
} }
/*热点项目*/ /*热点项目*/
.hot_project_banner { @media screen and (min-width: 1300px) {
.hot-project-banner {
height: 600px; height: 600px;
width: 100%; width: 100%;
background: url('../imgs/hot_project/hot_project_banner.jpg')no-repeat center center; background: url('../imgs/hot_project/hot_project_banner.jpg') no-repeat center center;
background-size: cover; background-size: cover;
text-align: center; text-align: center;
color: #fff; color: #fff;
...@@ -702,14 +786,37 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -702,14 +786,37 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
font-size: 32px; font-size: 32px;
line-height: 42px; line-height: 42px;
} }
}
}
@media screen and (max-width: 1300px) {
.hot-project-banner {
height: 470px;
width: 100%;
background: url('../imgs/hot_project/hot_project_banner.jpg') no-repeat center center;
background-size: cover;
text-align: center;
color: #fff;
h4 {
font-size: 54px;
font-weight: bold;
margin-top: 120px;
margin-bottom: 40px;
}
p {
font-size: 24px;
line-height: 36px;
}
}
} }
.hot_project_introducer {
height: 868px; .hot-project-introducer {
width:1200px; height: 728px;
width: 1200px;
margin: 0 auto; margin: 0 auto;
>ul { > ul {
width: 100%; width: 100%;
height:180px; height: 180px;
li { li {
width: 25%; width: 25%;
font-size: 18px; font-size: 18px;
...@@ -724,7 +831,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -724,7 +831,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
border-radius: 50%; border-radius: 50%;
background: #bb342e; background: #bb342e;
position: relative; position: relative;
top:-3px; top: -3px;
margin-right: 40px; margin-right: 40px;
} }
b { b {
...@@ -732,62 +839,64 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -732,62 +839,64 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
width: 46px; width: 46px;
height: 46px; height: 46px;
position: relative; position: relative;
top:20px; top: 20px;
margin-right: 6px; margin-right: 6px;
background: url("../imgs/hot_project/tabs01.png")no-repeat 0 0; background: url("../imgs/hot_project/tabs01.png") no-repeat -46px -13px;
} }
} }
li:nth-child(2){ li:nth-child(2) {
>b { > b {
background-position: -60px 0; background-position: -176px -13px;
} }
} }
li:nth-child(3){ li:nth-child(3) {
>b { > b {
background-position: -120px 0; background-position: -329px -13px;
} }
} }
li:nth-child(4){ li:nth-child(4) {
>b { > b {
background-position: 0 -56px; background-position: -450px -13pxpx;
} }
} }
} }
>p { > hr {
width: 940px; width: 940px;
margin: 0 auto; margin: 0 auto;
height: 1px;
background: #959595; background: #959595;
position: relative; position: relative;
b { }
display: inline-block; hr::after {
content: '';
display: block;
width: 73px; width: 73px;
height: 3px; height: 3px;
background: #01a9dd; background: #01a9dd;
position: absolute; position: absolute;
left:433px; left: 433px;
top:-1px; top: -2px;
}
} }
.introducer{ .introducer {
width: 100%; width: 700px;
margin: 0 auto;
position: relative;
h4 { h4 {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin:50px 0 58px; margin: 50px 0 58px;
} }
div { div {
width: 100%; width: 100%;
color: #000; color: #000;
margin: 15px 0;
span { span {
font-size: 25px; font-size: 25px;
padding-right: 60px;
} }
input { input {
width: 740px; width: 506px;
height: 77px; height: 40px;
line-height: 77px; line-height: 40px;
font-size: 18px; font-size: 18px;
color: #7f7f7f; color: #7f7f7f;
outline: none; outline: none;
...@@ -796,9 +905,9 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -796,9 +905,9 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
background: #f4f4f4; background: #f4f4f4;
} }
textarea { textarea {
width: 740px; width: 506px;
min-height: 100px; min-height: 100px;
padding: 25px 30px; padding: 12px 30px;
font-size: 18px; font-size: 18px;
color: #7f7f7f; color: #7f7f7f;
border: 1px solid #090204; border: 1px solid #090204;
...@@ -806,18 +915,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -806,18 +915,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
outline: none; outline: none;
} }
} }
div:nth-child(4){ div:nth-child(4) {
span { span {
position: relative; position: relative;
left:0; left: 0;
top:-74px; top: -74px;
} }
} }
div:last-child{ div:last-child {
text-align: center; text-align: center;
margin-top: 55px; margin-top: 55px;
input { input {
width: 434px; width: 333px;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border: none; border: none;
...@@ -825,31 +934,41 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -825,31 +934,41 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
color: #fff; color: #fff;
background: #868686; background: #868686;
border-radius: 10px; border-radius: 10px;
text-align: center;
} }
} }
p { p {
height: 50px; height: 40px;
line-height: 50px; line-height: 40px;
font-size: 18px; font-size: 18px;
color: #ff4a4b; color: #ff4a4b;
padding-left: 215px; position: absolute;
}
p:nth-child(3) {
top: 102px;
right: -238px;
}
p:nth-child(5) {
top: 172px;
right: -152px;
} }
} }
} }
.hot_project_address {
.hot-project-address {
width: 100%; width: 100%;
height: 926px; height: 926px;
background:#1272ac; background: #1272ac;
.hot_project_address_box{ .hot-project-address-box {
width: 1200px; width: 1200px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
>div:nth-child(1) { > div:nth-child(1) {
position: absolute; position: absolute;
color: #fff; color: #fff;
top:40px; top: 40px;
left:20px; left: 20px;
h4 { h4 {
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
...@@ -860,17 +979,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -860,17 +979,18 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
line-height: 53px; line-height: 53px;
} }
} }
>div:nth-child(2) { > div:nth-child(2) {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.hot_project_tabs{
.hot-project-tabs {
width: 1203px; width: 1203px;
height: 350px; height: 350px;
margin: 180px auto 160px; margin: 180px auto 160px;
ul{ ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #43abb6; border: 1px solid #43abb6;
...@@ -881,7 +1001,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -881,7 +1001,7 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
color: #000; color: #000;
background: #f6f6f6; background: #f6f6f6;
text-align: center; text-align: center;
dl{ dl {
width: 100%; width: 100%;
dt { dt {
width: 115px; width: 115px;
...@@ -893,32 +1013,32 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -893,32 +1013,32 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
h4 { h4 {
font-size: 28px; font-size: 28px;
color: #43abb6; color: #43abb6;
margin:14px 0 24px; margin: 14px 0 24px;
} }
} }
} }
} }
li:nth-child(1){ li:nth-child(1) {
border-right: 1px solid #43abb6; border-right: 1px solid #43abb6;
dt{ dt {
background: url("../imgs/hot_project/tabs05_b.png")no-repeat; background: url("../imgs/hot_project/tabs05_b.png") no-repeat;
} }
} }
li:nth-child(2){ li:nth-child(2) {
border-right: 1px solid #43abb6; border-right: 1px solid #43abb6;
dt{ dt {
background: url("../imgs/hot_project/tabs04_b.png")no-repeat; background: url("../imgs/hot_project/tabs04_b.png") no-repeat;
} }
} }
li:nth-child(3){ li:nth-child(3) {
border-right: 1px solid #43abb6; border-right: 1px solid #43abb6;
dt{ dt {
background: url("../imgs/hot_project/tabs03_b.png")no-repeat; background: url("../imgs/hot_project/tabs03_b.png") no-repeat;
} }
} }
li:nth-child(4){ li:nth-child(4) {
dt{ dt {
background: url("../imgs/hot_project/tabs02_b.png")no-repeat; background: url("../imgs/hot_project/tabs02_b.png") no-repeat;
} }
} }
li:hover { li:hover {
...@@ -928,52 +1048,104 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd { ...@@ -928,52 +1048,104 @@ h1,h2,h3,h4,h5,h6,ul,li,b,p,dl,dt,dd {
color: #fff; color: #fff;
} }
} }
li:nth-child(1):hover{ li:nth-child(1):hover {
@-webkit-keyframes changeOne {
0% {
opacity: 1;
background: url("../imgs/hot_project/tabs05_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../imgs/hot_project/tabs05_a.png ") no-repeat;
opacity: 1;
}
}
dt { dt {
background: url("../imgs/hot_project/tabs05_a.png ")no-repeat; animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
li:nth-child(2):hover {
@-webkit-keyframes changeTwo {
0% {
opacity: 1;
background: url("../imgs/hot_project/tabs04_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../imgs/hot_project/tabs04_a.png ") no-repeat;
opacity: 1;
} }
} }
li:nth-child(2):hover{
dt { dt {
background: url("../imgs/hot_project/tabs04_a.png ")no-repeat; animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
li:nth-child(3):hover {
@-webkit-keyframes changeThree {
0% {
opacity: 1;
background: url("../imgs/hot_project/tabs03_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
background: url("../imgs/hot_project/tabs03_a.png ") no-repeat;
} }
} }
li:nth-child(3):hover{
dt { dt {
background: url("../imgs/hot_project/tabs03_a.png ")no-repeat; animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
li:nth-child(4):hover {
@-webkit-keyframes changeFour {
0% {
background: url("../imgs/hot_project/tabs02_a.png ") no-repeat;
} }
} }
li:nth-child(4):hover{
dt { dt {
background: url("../imgs/hot_project/tabs02_a.png ")no-repeat;
} }
} }
} }
} }
body { body {
position: relative; position: relative;
} }
.modal_box {
.modal-box {
display: none; display: none;
top:0; top: 0;
left:0; left: 0;
bottom: 0; bottom: 0;
right:0; right: 0;
background: rgba(0,0,0,0.3); background: rgba(0, 0, 0, 0.3);
z-index: 999; z-index: 999;
position: fixed; position: fixed;
.modal_dialog { .modal-dialog {
position: fixed; position: fixed;
left:50%; left: 50%;
top:50%; top: 50%;
margin-top: -300px; margin-top: -300px;
margin-left: -450px; margin-left: -450px;
width: 830px; width: 830px;
height: 600px; height: 600px;
background: #fff; background: #fff;
padding-left:70px; padding-left: 70px;
h4 { h4 {
margin-top:69px; margin-top: 69px;
font-size: 35px; font-size: 35px;
color: #000; color: #000;
} }
...@@ -995,73 +1167,110 @@ body { ...@@ -995,73 +1167,110 @@ body {
} }
img { img {
position: absolute; position: absolute;
right:55px; right: 55px;
top:108px; top: 108px;
} }
b { b {
font-size: 42px; font-size: 42px;
position: absolute; position: absolute;
right:27px; right: 27px;
top:9px; top: 9px;
cursor: pointer; cursor: pointer;
} }
} }
} }
/*关于我们页面*/ /*关于我们页面*/
.about_us_banner { @media screen and (min-width: 1300px) {
.about_us-banner {
width: 100%; width: 100%;
height: 667px; height: 667px;
background: url("../imgs/index/banner.jpg")no-repeat center center; background: url("../imgs/index/banner.jpg") no-repeat center center;
background-size:cover; background-size: cover;
color:#fff; color: #fff;
text-align: center; text-align: center;
.banner_box { .banner-box {
width:1100px; width: 1100px;
margin: 200px auto 0; margin: 200px auto 0;
color:#fff; color: #fff;
h4 { h4 {
width:100%; width: 100%;
font-size: 82px; font-size: 82px;
margin-top:0; margin-top: 0;
margin-bottom: 35px; margin-bottom: 35px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
} }
p { p {
width:100%; width: 100%;
line-height: 48px; line-height: 48px;
font-size: 24px; font-size: 24px;
text-align: left;
}
} }
} }
} }
.about_us_banner_bottom {
@media screen and (max-width: 1300px) {
.about-us-banner {
width: 100%;
height: 450px;
background: url("../imgs/index/banner.jpg") no-repeat center center;
background-size: cover;
color: #fff;
text-align: center;
.banner-box {
width: 914px;
margin: 140px auto 0;
color: #fff;
h4 {
width: 100%;
font-size: 64px;
margin-top: 0;
margin-bottom: 35px;
text-align: center;
font-weight: normal;
}
p {
width: 100%;
line-height: 35px;
font-size: 20px;
text-align: left;
}
}
}
}
.about-us-banner-bottom {
width: 100%; width: 100%;
height: 824px; height: 824px;
background: url("../imgs/about_us/bg_2.jpg")no-repeat center center; background: url("../imgs/about_us/bg_2.jpg") no-repeat center center;
background-size:cover; background-size: cover;
h4 { h4 {
font-size: 52px; font-size: 52px;
color: #fff; color: #fff;
margin: 28px auto 16px; margin: 28px auto 16px;
text-align: center; text-align: center;
} }
b { hr {
display: block; display: block;
width: 73px; width: 73px;
height: 3px; border: 3px solid #0074c3;
margin:0 auto; border-bottom: transparent;
background: #0074c3; border-left: transparent;
border-right: transparent;
margin: 0 auto;
} }
p { p {
font-size: 22px; font-size: 22px;
width: 992px; width: 992px;
margin:572px auto 0; margin: 572px auto 0;
line-height: 42px; line-height: 42px;
} }
} }
.company_introduction {
.company-introduction {
height: 1300px; height: 1300px;
width: 100%; width: 100%;
background: #f6f6f6; background: #f6f6f6;
...@@ -1072,24 +1281,24 @@ body { ...@@ -1072,24 +1281,24 @@ body {
font-size: 46px; font-size: 46px;
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
margin:40px auto; margin: 40px auto;
b { b {
display: inline-block; display: inline-block;
height: 74px; height: 74px;
width: 3px; width: 3px;
background: #0074c3; background: #0074c3;
position: absolute; position: absolute;
left:0; left: 0;
top:0; top: 0;
} }
} }
ul { ul {
width: 1200px; width: 1200px;
margin:0 auto; margin: 0 auto;
li { li {
text-align: center; text-align: center;
width: 300px; width: 300px;
padding:0 50px 60px; padding: 0 50px 60px;
h4 { h4 {
font-size: 54px; font-size: 54px;
color: #000; color: #000;
...@@ -1107,11 +1316,11 @@ body { ...@@ -1107,11 +1316,11 @@ body {
text-align: left; text-align: left;
} }
} }
li:nth-child(1){ li:nth-child(1) {
width: 299px; width: 299px;
border-right: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3;
} }
li:nth-child(2){ li:nth-child(2) {
width: 299px; width: 299px;
border-right: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3;
} }
...@@ -1119,57 +1328,115 @@ body { ...@@ -1119,57 +1328,115 @@ body {
div { div {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
background: url("../imgs/about_us/bg_3.jpg");
a { a {
display: inline-block; display: inline-block;
width: 280px; width: 280px;
height: 270px; height: 270px;
text-align: center; text-align: center;
margin-right: 17px; margin-right: 17px;
border-right: 1px solid #c3c3c3;
position: relative;
} }
a:nth-child(1){ a:nth-child(1) {
background: url("../imgs/about_us/zhongjiang.jpg")no-repeat; background: url("../imgs/about_us/zhongjiang.jpg") no-repeat;
border-bottom: 1px solid #c3c3c3;
} }
a:nth-child(2){ a:nth-child(1)::before {
background: url("../imgs/about_us/zhongrong.jpg")no-repeat; content: '';
display: inline-block;
width: 17px;
height: 20px;
position: absolute;
left:0;
bottom: -10px;
background: #f6f6f6;
}
a:nth-child(1)::after {
content: '';
display: inline-block;
width: 34px;
height: 20px;
position: absolute;
right:-17px;
bottom: -10px;
background: #f6f6f6;
} }
a:nth-child(3){ a:nth-child(2) {
background: url("../imgs/about_us/guomin.jpg")no-repeat; background: url("../imgs/about_us/zhongrong.jpg") no-repeat;
border-bottom: 1px solid #c3c3c3;
} }
a:nth-child(4){ a:nth-child(2)::after {
background: url("../imgs/about_us/guangda.jpg")no-repeat; content: '';
display: inline-block;
width: 34px;
height: 20px;
position: absolute;
right:-17px;
bottom: -10px;
background: #f6f6f6;
}
a:nth-child(3) {
background: url("../imgs/about_us/guomin.jpg") no-repeat;
border-bottom: 1px solid #c3c3c3;
}
a:nth-child(3)::after {
content: '';
display: inline-block;
width: 34px;
height: 20px;
position: absolute;
right:-17px;
bottom: -10px;
background: #f6f6f6;
}
a:nth-child(4) {
background: url("../imgs/about_us/guangda.jpg") no-repeat;
margin-right: 0; margin-right: 0;
border-right: none;
border-bottom: 1px solid #c3c3c3;
} }
a:nth-child(5){ a:nth-child(4)::after {
background: url("../imgs/about_us/zhongxing.jpg")no-repeat; content: '';
display: inline-block;
width: 17px;
height: 20px;
position: absolute;
right:0px;
bottom: -10px;
background: #f6f6f6;
}
a:nth-child(5) {
background: url("../imgs/about_us/zhongxing.jpg") no-repeat;
} }
a:nth-child(6){ a:nth-child(6) {
background: url("../imgs/about_us/fangzheng.jpg")no-repeat; background: url("../imgs/about_us/fangzheng.jpg") no-repeat;
} }
a:nth-child(7){ a:nth-child(7) {
background: url("../imgs/about_us/huaxing.jpg")no-repeat; background: url("../imgs/about_us/huaxing.jpg") no-repeat;
} }
a:nth-child(8){ a:nth-child(8) {
background: url("../imgs/about_us/zhongtai.jpg")no-repeat; background: url("../imgs/about_us/zhongtai.jpg") no-repeat;
margin: 0; margin: 0;
border-right: none;
} }
} }
} }
.address_map {
.address-map {
height: 575px; height: 575px;
width: 100%; width: 100%;
background: url("../imgs/about_us/map.jpg")no-repeat center center; background: url("../imgs/about_us/map.jpg") no-repeat center center;
background-size: cover; background-size: cover;
>div { > div {
width: 1200px; width: 1200px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
>div { > div {
margin: 150px 0 0 240px; margin: 150px 0 0 240px;
width: 291px; width: 291px;
height: 207px; height: 207px;
padding:32px 18px 0; padding: 32px 18px 0;
background: #fff; background: #fff;
position: relative; position: relative;
span { span {
...@@ -1180,7 +1447,7 @@ body { ...@@ -1180,7 +1447,7 @@ body {
background: #121e2c; background: #121e2c;
position: absolute; position: absolute;
left: 9px; left: 9px;
top:18px; top: 18px;
text-align: center; text-align: center;
img { img {
margin-top: 18px; margin-top: 18px;
...@@ -1192,12 +1459,12 @@ body { ...@@ -1192,12 +1459,12 @@ body {
line-height: 46px; line-height: 46px;
margin-left: 64px; margin-left: 64px;
} }
b { hr {
display: block; display: block;
width: 149px; width: 149px;
height: 1px; border: none;
background: #a9a9a9; border-bottom: 1px solid #a9a9a9;
margin: 5px auto 10px; margin: 5px auto 20px;
} }
p { p {
font-size: 18px; font-size: 18px;
......
HTML/about_us.html → HTML/aboutUs.html
View file @ ef576e75
...@@ -4,32 +4,32 @@ ...@@ -4,32 +4,32 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>富豆优投</title> <title>富豆优投</title>
<link rel="stylesheet" href="../CSS/normalize.css"/> <link rel="stylesheet" href="../CSS/normalize.css"/>
<link rel="stylesheet" href="../CSS/styles.css" /> <link rel="stylesheet" href="../CSS/styles.css"/>
</head> </head>
<body> <body>
<div id="header"> <div id="header">
<!--暂时放在这里--> <!--暂时放在这里-->
<a href="index.html"><img src="../imgs/logo.png" alt="logo"></a> <a href="index.html"><img src="../imgs/logo.png" alt="logo"></a>
<ul class="clear"> <ul class="clear">
<li class="fl"><a href="">首页 / PROJECT</a></li> <li class="fl"><a href="index.html">首页 / PROJECT</a></li>
<li class="fl"><a href="">项目合作 / PROJECT</a></li> <li class="fl"><a href="product.html">项目合作 / PROJECT</a></li>
<li class="fl"><a href="">最新产品 / PRODUCT</a></li> <li class="fl"><a href="hotProject.html">最新产品 / PRODUCT</a></li>
<li class="fl"><a href="">关于我们 / ABOUT</a></li> <li class="fl"><a href="aboutUs.html">关于我们 / ABOUT</a></li>
</ul> </ul>
</div> </div>
<div id="section"> <div id="section">
<div class="about_us_banner clear"> <div class="about-us-banner clear">
<div class="banner_box"> <div class="banner-box">
<h4>海量资源 轻松抢单</h4> <h4>海量资源 轻松抢单</h4>
<p>以科技为手段，面向财富管理行业从业人员的运营服务提供商。匹配用户风险偏好与投资品，利用互联网大数据，对用户行为、市场、产品等进行详细的分析，系统为客户推荐多元化的投资组合，避免客户与理财顾问之间可能的利益冲突，减少用户的投资理财成本支出，使投资人获得更多的收益。</p> <p>以科技为手段，面向财富管理行业从业人员的运营服务提供商。匹配用户风险偏好与投资品，利用互联网大数据，对用户行为、市场、产品等进行详细的分析，系统为客户推荐多元化的投资组合，避免客户与理财顾问之间可能的利益冲突，减少用户的投资理财成本支出，使投资人获得更多的收益。</p>
</div> </div>
</div> </div>
<div class="about_us_banner_bottom clear"> <div class="about-us-banner-bottom clear">
<h4>企业愿景</h4> <h4>企业愿景</h4>
<b></b> <hr/>
<p>通过自有的风控部门，严格审核项目背景，设计产品结构，同时搭建涵盖APP、微信、网站等多端口的互联网平台，通过科技金融与移动互联网技术，将信息流、业务流整合，让理财师轻松获取需要的优质金融产品，真正为客户提供资产配置服务。</p> <p>通过自有的风控部门，严格审核项目背景，设计产品结构，同时搭建涵盖APP、微信、网站等多端口的互联网平台，通过科技金融与移动互联网技术，将信息流、业务流整合，让理财师轻松获取需要的优质金融产品，真正为客户提供资产配置服务。</p>
</div> </div>
<div class="company_introduction clear"> <div class="company-introduction clear">
<h2><b></b>股东背景</h2> <h2><b></b>股东背景</h2>
<ul class="clear"> <ul class="clear">
<li class="fl"> <li class="fl">
...@@ -60,12 +60,12 @@ ...@@ -60,12 +60,12 @@
<a href="javascrpt:;"></a> <a href="javascrpt:;"></a>
</div> </div>
</div> </div>
<div class="address_map"> <div class="address-map">
<div class="clear"> <div class="clear">
<div> <div>
<span><img src="../imgs/about_us/icon01.png"/></span> <span><img src="../imgs/about_us/icon01.png"/></span>
<h4>杭州枢纽科技</h4> <h4>杭州枢纽科技</h4>
<b></b> <hr/>
<p>浙江省杭州市余杭区良睦路1299号 互联网村5-305</p> <p>浙江省杭州市余杭区良睦路1299号 互联网村5-305</p>
<h3>400-888-8888</h3> <h3>400-888-8888</h3>
</div> </div>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<p class="hotline">全国客服热线 9:30-18:30</p> <p class="hotline">全国客服热线 9:30-18:30</p>
<h4>400-888-8888</h4> <h4>400-888-8888</h4>
<div><span></span></div> <hr/>
<p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p> <p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p>
<p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p> <p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
</div> </div>
......
HTML/hot_project.html → HTML/hotProject.html
View file @ ef576e75
...@@ -11,30 +11,28 @@ ...@@ -11,30 +11,28 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<a href="index.html"><img src="../imgs/logo.png" alt="logo"></a> <a href="index.html"><img src="../imgs/logo.png" alt="logo"></a>
<ul class="clear"> <ul class="clear">
<li class="fl"><a href="">首页 / PROJECT</a></li> <li class="fl"><a href="index.html">首页 / PROJECT</a></li>
<li class="fl"><a href="">项目合作 / PROJECT</a></li> <li class="fl"><a href="product.html">项目合作 / PROJECT</a></li>
<li class="fl"><a href="">最新产品 / PRODUCT</a></li> <li class="fl"><a href="hotProject.html">最新产品 / PRODUCT</a></li>
<li class="fl"><a href="">关于我们 / ABOUT</a></li> <li class="fl"><a href="aboutUs.html">关于我们 / ABOUT</a></li>
</ul> </ul>
</div> </div>
<div class="modal_box"> <div class="modal-box">
<div class="modal_dialog"> <div class="modal-dialog">
<h4>中电投先融-西安灞桥</h4> <h4>中电投先融-西安灞桥</h4>
<h3>180天 </h3> <h3>180天 </h3>
<h6>基础设施类</h6> <h6>基础设施类</h6>
<p>认购光大信托计划，用于“绿源公司”发放信托贷款，用于建设西安绿源农产品批发市场项目</p> <p>认购光大信托计划，用于“绿源公司”发放信托贷款，用于建设西安绿源农产品批发市场项目</p>
<img src="../imgs/hot_project/success.jpg"> <img src="../imgs/hot_project/success.jpg">
<b id="modal_box_hidden">&times;</b> <b id="modalBoxHidden">&times;</b>
</div> </div>
</div> </div>
<div id="section"> <div id="section">
<div class="hot_project_banner clear"> <div class="hot-project-banner clear">
<h4>富豆优投是枢纽科技旗下</h4> <h4>富豆优投是枢纽科技旗下</h4>
<p>专为地方性项目或企业提供有保障的融资渠道、</p> <p>专为地方性项目或企业提供有保障的融资渠道、<br/>合理对投资资金需求的互联网平台，<br/>拥有数个大型项目资金问题解决方案</p>
<p>合理对投资资金需求的互联网平台，</p>
<p>拥有数个大型项目资金问题解决方案</p>
</div> </div>
<div class="hot_project_introducer"> <div class="hot-project-introducer">
<ul class="clear"> <ul class="clear">
<li class="fl"> <li class="fl">
<i></i> <i></i>
...@@ -57,26 +55,26 @@ ...@@ -57,26 +55,26 @@
<span>扩展融资渠道</span> <span>扩展融资渠道</span>
</li> </li>
</ul> </ul>
<p><b></b></p> <hr/>
<div class="introducer"> <div class="introducer">
<form id="introducer"> <form id="introducer">
<h4>寻找优质项目介绍人</h4> <h4>寻找优质项目介绍人</h4>
<div> <div>
<span>联系方式：</span> <span>联系方式：</span>
<input type="text" id="introducer_tel" name="introducer_tel" placeholder="填写您的联系方式" maxlength="11"/> <input type="text" id="introducerMobile" name="introducer-mobile" placeholder="填写您的联系方式" maxlength="11"/>
</div> </div>
<p class="error_phone"></p> <p class="error-phone"></p>
<div> <div>
<span>项目描述：</span> <span>项目描述：</span>
<textarea name="project_description" id="project_description" placeholder="详细写明您的项目需求 例如：项目时间、内容、合作意向。"></textarea> <textarea name="project-description" id="projectDescription" placeholder="详细写明您的项目需求 例如：项目时间、内容、合作意向。"></textarea>
</div> </div>
<p class="error_description"></p> <p class="error-description"></p>
<div><input type="button" value="立即提交" disabled id="submit"/></div> <div><input type="button" value="立即提交" disabled id="submit"/></div>
</form> </form>
</div> </div>
</div> </div>
<div class="hot_project_address"> <div class="hot-project-address">
<div class="hot_project_address_box"> <div class="hot-project-address-box">
<div> <div>
<h4>热点项目</h4> <h4>热点项目</h4>
<p>※国内各地在进行项目分布图</p> <p>※国内各地在进行项目分布图</p>
...@@ -84,7 +82,7 @@ ...@@ -84,7 +82,7 @@
</div> </div>
</div> </div>
<div class="hot_project_tabs"> <div class="hot-project-tabs">
<ul class="clear"> <ul class="clear">
<li class="fl"> <li class="fl">
<dl> <dl>
...@@ -128,11 +126,11 @@ ...@@ -128,11 +126,11 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<p class="hotline">全国客服热线 9:30-18:30</p> <p class="hotline">全国客服热线 9:30-18:30</p>
<h4>400-888-8888</h4> <h4>400-888-8888</h4>
<div><span></span></div> <hr/>
<p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p> <p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p>
<p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p> <p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
</div> </div>
<script src="../JS/jquery-1.8.3.min.js"></script> <script src="../JS/jquery-1.8.3.min.js"></script>
<script src="../JS/hot_project.js"></script> <script src="../JS/hotProject.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
HTML/index.html
View file @ ef576e75
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>富豆优投</title> <title>富豆优投</title>
<link rel="icon" href="../imgs/favicon.ico"/>
<link rel="stylesheet" href="../CSS/normalize.css"/> <link rel="stylesheet" href="../CSS/normalize.css"/>
<link rel="stylesheet" href="../CSS/styles.css" /> <link rel="stylesheet" href="../CSS/styles.css"/>
</head> </head>
<body> <body>
<!--v1.0版--> <!--v1.0版-->
...@@ -12,22 +13,23 @@ ...@@ -12,22 +13,23 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<a href="index.html"><img src="../imgs/logo.png" alt="logo"></a> <a href="index.html"><img src="../imgs/logo.png" alt="logo"></a>
<ul class="clear"> <ul class="clear">
<li class="fl"><a href="">首页 / PROJECT</a></li> <li class="fl"><a href="index.html">首页 / PROJECT</a></li>
<li class="fl"><a href="">项目合作 / PROJECT</a></li> <li class="fl"><a href="product.html">项目合作 / PROJECT</a></li>
<li class="fl"><a href="">最新产品 / PRODUCT</a></li> <li class="fl"><a href="hotProject.html">最新产品 / PRODUCT</a></li>
<li class="fl"><a href="">关于我们 / ABOUT</a></li> <li class="fl"><a href="aboutUs.html">关于我们 / ABOUT</a></li>
</ul> </ul>
</div> </div>
<div id="section"> <div id="section">
<div class="banner"> <div class="banner">
<div class="banner_box"> <div class="banner-box">
<h4>海量资源 轻松抢单</h4> <h4>海量资源 轻松抢单</h4>
<p>以科技为手段，面向财富管理行业从业人员的运营服务提供商。匹配用户风险偏好与投资品，利用互联网大数据，对用户行为、市场、产品等进行详细的分析，系统为客户推荐多元化的投资组合，避免客户与理财顾问之间可能的利益冲突，减少用户的投资理财成本支出，使投资人获得更多的收益。</p> <p>
以科技为手段，面向财富管理行业从业人员的运营服务提供商。匹配用户风险偏好与投资品，利用互联网大数据，对用户行为、市场、产品等进行详细的分析，系统为客户推荐多元化的投资组合，避免客户与理财顾问之间可能的利益冲突，减少用户的投资理财成本支出，使投资人获得更多的收益。</p>
</div> </div>
</div> </div>
<div class="download"> <div class="download">
<div class="download_top"> <div class="download-top">
<ul class="icon_lists clear"> <ul class="icon-lists clear">
<li class="android"> <li class="android">
<i class="icon iconfont">&#xe600;</i> <i class="icon iconfont">&#xe600;</i>
<b></b> <b></b>
...@@ -40,13 +42,13 @@ ...@@ -40,13 +42,13 @@
</li> </li>
</ul> </ul>
<a href=""><img src="../imgs/index/QR_Code.jpg" alt=""><span>扫描下载富豆APP</span></a> <a href=""><img src="../imgs/index/QR_Code.jpg" alt=""><span>扫描下载富豆APP</span></a>
<img src="../imgs/index/iphone.png" alt="iphone" class="iphone_img"> <img src="../imgs/index/iphone.png" alt="iphone" class="iphone-img">
<p><b></b></p> <hr/>
</div> </div>
<div class="download_bottom"> <div class="download_bottom">
<ul> <ul>
<li class="fl"> <li class="fl">
<div class="fl_box"> <div class="fl-box">
<div> <div>
<h4>1000亿</h4> <h4>1000亿</h4>
<p>累计交易</p> <p>累计交易</p>
...@@ -62,7 +64,7 @@ ...@@ -62,7 +64,7 @@
</li> </li>
<li class="fl"> <li class="fl">
<div class="fl_box"> <div class="fl-box">
<div> <div>
<h4>1000位</h4> <h4>1000位</h4>
<p>精英理财师数</p> <p>精英理财师数</p>
...@@ -77,7 +79,7 @@ ...@@ -77,7 +79,7 @@
</div> </div>
</li> </li>
<li class="fl"> <li class="fl">
<div class="fl_box"> <div class="fl-box">
<div> <div>
<h4>1000款</h4> <h4>1000款</h4>
<p>发行产品数</p> <p>发行产品数</p>
...@@ -92,7 +94,7 @@ ...@@ -92,7 +94,7 @@
</div> </div>
</li> </li>
<li class="fl"> <li class="fl">
<div class="fl_box"> <div class="fl-box">
<div> <div>
<h4>13亿</h4> <h4>13亿</h4>
<p>累计发行佣金</p> <p>累计发行佣金</p>
...@@ -110,33 +112,31 @@ ...@@ -110,33 +112,31 @@
</div> </div>
</div> </div>
<div class="projects"> <div class="projects">
<div class="projects_header"> <div class="projects-header">
<div class="fl"></div> <div class="fl"></div>
<p class="fl"><span>推荐优质项目 领取高额介绍费</span></p> <p class="fl"><span>推荐优质项目 领取高额介绍费</span></p>
</div> </div>
<div class="projects_content"> <div class="projects-content">
<ul class="project_intro"> <div>
<ul class="project-intro">
<li> <li>
<p>精选稀缺产品</p> 精选稀缺产品<br/>非区非县，市级资产端一手政信
<p>非区非县，市级资产端一手政信</p>
</li> </li>
<li> <li>
<p>尽享高额佣金</p> 尽享高额佣金<br/>远高市场佣金比例的返佣制度
<p>远高市场佣金比例的返佣制度</p>
</li> </li>
<li> <li>
<p>完善风控体系</p> 完善风控体系<br/>原招商银行风控团队层层把关
<p>原招商银行风控团队层层把关</p>
</li> </li>
<li> <li>
<p>佣金快速结算</p> 佣金快速结算<br/>项目成立 T+0 ，帮您快速结佣
<p>项目成立 T+0 ，帮您快速结佣</p>
</li> </li>
</ul> </ul>
<img src="../imgs/index/computer.jpg" class="computer"/> <img src="../imgs/index/computer.jpg" class="computer"/>
<div class="project_info clear"> </div>
<p class="project_img project_one fl"></p> <div class="project-info clear">
<div class="project_detail fr"> <p class="project-img project-one fl"></p>
<div class="project-detail fr">
<h4>中电投西安</h4> <h4>中电投西安</h4>
<i></i> <i></i>
<ul class="clear"> <ul class="clear">
...@@ -156,9 +156,9 @@ ...@@ -156,9 +156,9 @@
<div><a href="">查看详情 &gt;</a></div> <div><a href="">查看详情 &gt;</a></div>
</div> </div>
</div> </div>
<div class="project_info clear"> <div class="project-info clear">
<p class="project_img project_two fl"></p> <p class="project-img project-two fl"></p>
<div class="project_detail fr"> <div class="project-detail fr">
<h4>中电投西安</h4> <h4>中电投西安</h4>
<i></i> <i></i>
<ul class="clear"> <ul class="clear">
...@@ -178,8 +178,8 @@ ...@@ -178,8 +178,8 @@
<div><a href="">查看详情 &gt;</a></div> <div><a href="">查看详情 &gt;</a></div>
</div> </div>
</div> </div>
<div class="project_info clear "> <div class="project-info clear ">
<div class="project_detail project_three fl mr50 project_detail_sm"> <div class="project-detail project-three fl mr50 project-detail-sm">
<h4>中电投西安</h4> <h4>中电投西安</h4>
<div><a href="">查看详情 &gt;</a></div> <div><a href="">查看详情 &gt;</a></div>
<ul class="clear"> <ul class="clear">
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="project_detail project_four fl mr50 project_detail_sm"> <div class="project-detail project-four fl mr50 project-detail-sm">
<h4>中电投西安</h4> <h4>中电投西安</h4>
<div><a href="">查看详情 &gt;</a></div> <div><a href="">查看详情 &gt;</a></div>
<ul class="clear"> <ul class="clear">
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="project_detail project_five fr project_detail_sm"> <div class="project-detail project-five fr project-detail-sm">
<h4>中电投西安</h4> <h4>中电投西安</h4>
<div><a href="">查看详情 &gt;</a></div> <div><a href="">查看详情 &gt;</a></div>
<ul class="clear"> <ul class="clear">
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<p class="hotline">全国客服热线 9:30-18:30</p> <p class="hotline">全国客服热线 9:30-18:30</p>
<h4>400-888-8888</h4> <h4>400-888-8888</h4>
<div><span></span></div> <hr/>
<p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p> <p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p>
<p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p> <p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
</div> </div>
......
HTML/product.html
View file @ ef576e75
...@@ -12,22 +12,22 @@ ...@@ -12,22 +12,22 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<a href="index.html"><img src="../imgs/logo.png" alt="logo"></a> <a href="index.html"><img src="../imgs/logo.png" alt="logo"></a>
<ul class="clear"> <ul class="clear">
<li class="fl"><a href="">首页 / PROJECT</a></li> <li class="fl"><a href="index.html">首页 / PROJECT</a></li>
<li class="fl"><a href="">项目合作 / PROJECT</a></li> <li class="fl"><a href="product.html">项目合作 / PROJECT</a></li>
<li class="fl"><a href="">最新产品 / PRODUCT</a></li> <li class="fl"><a href="hotProject.html">最新产品 / PRODUCT</a></li>
<li class="fl"><a href="">关于我们 / ABOUT</a></li> <li class="fl"><a href="aboutUs.html">关于我们 / ABOUT</a></li>
</ul> </ul>
</div> </div>
<div id="section"> <div id="section">
<div class="banner"> <div class="banner">
<div class="banner_box"> <div class="banner-box">
<h4>海量资源 轻松抢单</h4> <h4>海量资源 轻松抢单</h4>
<p>以科技为手段，面向财富管理行业从业人员的运营服务提供商。匹配用户风险偏好与投资品，利用互联网大数据，对用户行为、市场、产品等进行详细的分析，系统为客户推荐多元化的投资组合，避免客户与理财顾问之间可能的利益冲突，减少用户的投资理财成本支出，使投资人获得更多的收益。</p> <p>以科技为手段，面向财富管理行业从业人员的运营服务提供商。匹配用户风险偏好与投资品，利用互联网大数据，对用户行为、市场、产品等进行详细的分析，系统为客户推荐多元化的投资组合，避免客户与理财顾问之间可能的利益冲突，减少用户的投资理财成本支出，使投资人获得更多的收益。</p>
</div> </div>
</div> </div>
<div class="product_info"> <div class="product-info">
<div class="product_intro"> <div class="product-intro">
<h4 class="product_info_title"><b></b>XX证券-贵州同仁证券</h4> <h4 class="product-info-title"><b></b>XX证券-贵州同仁证券</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
<tfoot> <tfoot>
<tr> <tr>
<td colspan="3"> <td colspan="3">
剩余额度：<span id="my_balance">200</span>万/<span id="total">2000</span>万 剩余额度：<span id="myBalance">200</span>万/<span id="total">2000</span>万
<p id="progress_bar"><i></i></p> <p id="progressBar"><i></i></p>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
...@@ -63,8 +63,8 @@ ...@@ -63,8 +63,8 @@
<p>募集中</p> <p>募集中</p>
</div> </div>
</div> </div>
<div class="product_appointment"> <div class="product-appointment">
<h4 class="product_info_title"><b></b>在线预约</h4> <h4 class="product-info-title"><b></b>在线预约</h4>
<p>留下联系方式我们帮您第一时间抢占稀缺额度</p> <p>留下联系方式我们帮您第一时间抢占稀缺额度</p>
<form id="form"> <form id="form">
<input type="text" name="userName" placeholder="请填写您的姓名" id="userName"/> <input type="text" name="userName" placeholder="请填写您的姓名" id="userName"/>
...@@ -74,13 +74,13 @@ ...@@ -74,13 +74,13 @@
<p id="errorName" class="fl"></p> <p id="errorName" class="fl"></p>
<p id="errorTel" class="fl"></p> <p id="errorTel" class="fl"></p>
</div> </div>
<div class="product_detail"> <div class="product-detail">
<h4 class="product_info_title"><b></b>产品详情</h4> <h4 class="product-info-title"><b></b>产品详情</h4>
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td class="product_detail_key bb br">产品名称</td> <td class="product-detail-key bb br">产品名称</td>
<td class="product_detail_value bb">XX证券-贵州同仁证券</td> <td class="product-detail-value bb">XX证券-贵州同仁证券</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">产品类别</td> <td class="bb br">产品类别</td>
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
<!--暂时放在这里--> <!--暂时放在这里-->
<p class="hotline">全国客服热线 9:30-18:30</p> <p class="hotline">全国客服热线 9:30-18:30</p>
<h4>400-888-8888</h4> <h4>400-888-8888</h4>
<div><span></span></div> <hr/>
<p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p> <p class="address">浙江省杭州市余杭区良睦路1299号互联网村5-305 E-mail: <a href="hr@shuniu.com">hr@shuniu.com</a></p>
<p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p> <p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
</div> </div>
......
JS/hotProject.js 0 → 100755
View file @ ef576e75
/**
* Created by Administrator on 2016/7/27.
*/
(function () {
var $submit = $('#submit');
var $errorPhone = $('.error-phone');
var $errorDescription = $('.error-description');
var $introducerMobile = $('#introducerMobile');
var $projectDescription = $('#projectDescription');
var $modalBox = $('.modal_box');
/**
* 验证手机号
* @param tel
* @returns {boolean}
*/
function valiTel(tel) {
var msg = /^[\d]{11}$/.test(tel) ? '' : '电话号码有误，请再次输入！';
$errorPhone.html(msg);
!msg && disableSubmit();
return !msg;
}
/**
* 验证项目描述不能为空
* @param text
* @returns {boolean}
*/
function valiDescription(text) {
$errorDescription.html(text ? '' : '项目描述不能为空!');
text && disableSubmit();
return !text;
}
/**
* 提交按钮是否可用
*/
function disableSubmit() {
$submit.attr('disabled') && $submit.attr('disabled', false).css('background', '#ff4a4b');
}
$introducerMobile.on({
keyup: function (e) {
valiTel(($introducerMobile.val() + '').trim());
}
})
$projectDescription.on({
keyup: function (e) {
valiDescription(($projectDescription.val() + '').trim());
}
});
$('#introducer').on('submit', function (e) {
if (valiTel(($introducerMobile.val() + '').trim())) {
$introducerMobile.focus();
e.preventDefault();
return;
}
if (valiDescription(($projectDescription.val() + '').trim())) {
$projectDescription.focus();
e.preventDefault();
return;
}
});
/**
* 地图项目地址弹框
*/
$('.project_one').click(function (e) {
e.preventDefault();
$modalBox.show();
});
$('#modal_box_hidden').click(function (e) {
e.preventDefault();
$modalBox.hide();
});
})();
\ No newline at end of file
JS/hot_project.js deleted 100755 → 0
View file @ f92e261e
/**
* Created by Administrator on 2016/7/27.
*/
(function(){
$('#introducer_tel').focus(function(){
if($('#submit').attr('disabled')){
$('#submit').attr('disabled',false);
$('#submit').css('background','#ff4a4b');
}
});
$('#project_description').focus(function(){
if($('#submit').attr('disabled')){
$('#submit').attr('disabled',false);
$('#submit').css('background','#ff4a4b');
}
});
$('#introducer_tel').keyup(function(){
valiTel(this);
});
$('#project_description').keyup(function(){
valiDescription(this);
})
$('#submit').click(function(){
var introducer_tel=$('#introducer_tel')[0];
var project_description=$('#project_description')[0];
var valiT=valiTel(introducer_tel);
var valiD=valiDescription(project_description);
if( !valiT ){
$(introducer_tel).focus();
}else{
if( !valiD ){
$(project_description).focus();
}else{
$('#introducer')[0].submit;
}
}
})
function valiTel(obj){
var reg=/^[0-9]{11}$/;
var tel=obj.value.trim();
if( !reg.test(tel) ){
$('.error_phone').html('电话号码有误，请再次输入！');
return false;
}else{
$('.error_phone').html('');
return true;
}
}
function valiDescription(obj){
var text=obj.value.trim();
if( !text){
$('.error_description').html('项目描述不能为空！');
return false;
}else{
$('.error_description').html('');
return true;
}
}
$('.project_one').click(function(e){
e.preventDefault();
$('.modal_box').css('display','block');
})
$('#modal_box_hidden').click(function(){
$('.modal_box').css('display','none');
});
})();
\ No newline at end of file
JS/product.js
View file @ ef576e75
/** /**
* Created by Administrator on 2016/7/26. * Created by Administrator on 2016/7/26.
*/ */
(function() { (function () {
var my_balance=$('#my_balance').html(); var $errorName = $('#errorName');
var total=$('#total').html(); var $errorTel = $('#errorTel');
var progress_bar=parseFloat( $('#progress_bar').css('width') ); var $userName = $('#userName');
$('#progress_bar i').css('width', my_balance/ total *progress_bar+'px'); var $userTel = $('#userTel');
var $submit = $('#submit');
$('#userName').keyup(function(){ var myBalance = $('#myBalance').html();
valiUsername(this); var total = $('#total').html();
}); var progressBar = parseFloat($('#progressBar').css('width'));
$('#userTel').keyup(function(){
valiTel(this); $('#progressBar i').animate({
}); width:myBalance/total*progressBar+'px',
$('#submit').click(function(){ opacity:1
var userName=$('#userName')[0]; },1000);
var userTel=$('#userTel')[0]; /**
var valiU=valiUsername(userName); * 验证用户姓名
var valiT=valiTel(userTel); * @param obj
if( !valiU ){ * @returns {boolean}
$(userName).focus(); */
}else { function valiUserName(userName) {
if( !valiT ){ $errorName.html(userName ? '' : '用户名不能为空，请重新输入！');
$(userTel).focus(); return !userName;
}else{
$('#form')[0].submit;
} }
/**
* 验证电话号码
* @param obj
* @returns {boolean}
*/
function valiMobile(mobile) {
var msg = /^[\d]{11}$/.test(mobile) ? '' : '手机号有误，请重新输入！';
$errorTel.html(msg);
return !mobile;
} }
$userName.on('keyup', function () {
valiUserName($.trim($userName.val()+''));
}); });
function valiUsername(obj){ $userTel.on('keyup', function () {
var uText=obj.value.trim(); valiMobile($userTel.val());
if(!uText){ });
$('#errorName').html('用户名不能为空，请重新输入！');
return false; /**
}else { * 提交验证
$('#errorName').html(''); */
return true; $submit.on('click',function (e) {
} if( valiUserName($.trim($userName.val()+'')) ){
} $userName.focus();
function valiTel(obj){ e.preventDefault();
var telText=obj.value.trim(); $errorName.html('用户名输入有误,请再次输入!');
var reg=/^[0-9]{11}$/; return;
if( !reg.test(telText) ){
$('#errorTel').html('手机号有误，请重新输入！');
return false;
}else{ }else{
$('#errorTel').html(''); if( valiMobile( $.trim( $userTel.val()+'' ) ) ){
return true; $userTel.focus();
e.preventDefault();
$errorTel.html('密码有误,请再次输入!');
return;
}else{
$("#form").submit;
console.log('ok');
} }
} }
});
})(); })();
imgs/hot_project/tabs01.png 100755 → 100644
View replaced file @ f92e261e View file @ ef576e75
imgs/hot_project/tabs01.png

16.2 KB | W: | H:

imgs/hot_project/tabs01.png

17.4 KB | W: | H:

imgs/hot_project/tabs01.png
imgs/hot_project/tabs01.png
imgs/hot_project/tabs01.png
imgs/hot_project/tabs01.png
  • 2-up
  • Swipe
  • Onion skin
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 to comment