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