Skip to content

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

7

parent dff4a50d
Show whitespace changes
Inline Side-by-side
Showing with 585 additions and 72 deletions
public/stylesheets/project.css
View file @ 7fd1be80
.hot-project-banner {
height: 470px;
width: 100%;
background: url('../images/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 { .hot-project-introducer {
height: 728px; height: 728px;
margin: 0 auto; margin: 0 auto;
} }
.hot-project-introducer > ul { .hot-project-introducer > ul {
width: 100%;
height: 180px; height: 180px;
} }
.hot-project-introducer > ul li { .hot-project-introducer > ul li {
width: 25%; width: 25%;
float: left;
font-size: 18px; font-size: 18px;
color: #000; color: #000;
line-height: 180px; line-height: 180px;
...@@ -133,3 +151,230 @@ ...@@ -133,3 +151,230 @@
top: 172px; top: 172px;
right: -152px; right: -152px;
} }
/* .hot-project-address start */
.hot-project-address {
width: 100%;
height: 926px;
background: #1272ac;
}
.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) {
position: absolute;
color: #fff;
top: 40px;
left: 20px;
}
.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 {
font-size: 18px;
line-height: 53px;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) {
width: 100%;
height: 100%;
}
/* .hot-project-address end */
/* .hot-project-tabs start */
.hot-project-tabs {
width: 100%;
height: 690px;
background: #f6f6f6;
}
.hot-project-tabs ul {
width: 1203px;
height: 350px;
margin: 180px auto 160px;
border: 1px solid #43abb6;
}
.hot-project-tabs ul li {
width: 300px;
height: 100%;
float: left;
font-size: 16px;
color: #000;
text-align: center;
}
.hot-project-tabs ul li dl {
width: 100%;
}
.hot-project-tabs ul li dl dt {
width: 115px;
height: 115px;
margin: 44px auto 0;
}
.hot-project-tabs ul li dl dd {
line-height: 28px;
}
.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) {
border-right: 1px solid #43abb6;
}
.hot-project-tabs ul li:nth-child(1) dt {
background: url("../images/hot_project/tabs05_b.png") no-repeat;
}
.hot-project-tabs ul li:nth-child(2) {
border-right: 1px solid #43abb6;
}
.hot-project-tabs ul li:nth-child(2) dt {
background: url("../images/hot_project/tabs04_b.png") no-repeat;
}
.hot-project-tabs ul li:nth-child(3) {
border-right: 1px solid #43abb6;
}
.hot-project-tabs ul li:nth-child(3) dt {
background: url("../images/hot_project/tabs03_b.png") no-repeat;
}
.hot-project-tabs ul li:nth-child(4) dt {
background: url("../images/hot_project/tabs02_b.png") no-repeat;
}
.hot-project-tabs ul li:hover {
color: #fff;
background: #43abb6;
}
.hot-project-tabs ul li:hover h4 {
color: #fff;
}
@-webkit-keyframes changeOne {
0% {
opacity: 1;
background: url("../images/hot_project/tabs05_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../images/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;
}
@-webkit-keyframes changeTwo {
0% {
opacity: 1;
background: url("../images/hot_project/tabs04_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../images/hot_project/tabs04_a.png ") no-repeat -1px -1px;
opacity: 1;
}
}
.hot-project-tabs ul li:nth-child(2):hover dt {
animation-name: changeTwo;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@-webkit-keyframes changeThree {
0% {
opacity: 1;
background: url("../images/hot_project/tabs03_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
background: url("../images/hot_project/tabs03_a.png ") no-repeat;
}
}
.hot-project-tabs ul li:nth-child(3):hover dt {
animation-name: changeThree;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@-webkit-keyframes changeFour {
0% {
background: url("../images/hot_project/tabs02_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
background: url("../images/hot_project/tabs02_a.png ") no-repeat;
}
}
.hot-project-tabs ul li:nth-child(4):hover dt {
animation-name: changeFour;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
/* .hot-project-tabs end */
/* .modal-box start */
body {
position: relative;
}
.modal-box {
display: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
position: fixed;
}
.modal-box .modal-dialog {
position: fixed;
left: 50%;
top: 50%;
margin-top: -300px;
margin-left: -450px;
width: 830px;
height: 600px;
background: #fff;
padding-left: 70px;
}
.modal-box .modal-dialog h4 {
margin-top: 69px;
font-size: 35px;
color: #000;
}
.modal-box .modal-dialog h3 {
font-size: 45px;
font-weight: bold;
color: #ff4a4a;
margin: 43px 0;
}
.modal-box .modal-dialog h6 {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.modal-box .modal-dialog p {
font-size: 18px;
width: 331px;
line-height: 28px;
}
.modal-box .modal-dialog img {
position: absolute;
right: 55px;
top: 108px;
}
.modal-box .modal-dialog b {
font-size: 42px;
position: absolute;
right: 27px;
top: 9px;
cursor: pointer;
}
/* .modal-box end */
public/stylesheets/project.less
View file @ 7fd1be80
@import 'variable'; @import 'variable';
//
//.screen() {
// .media(@screen-width-small, @container-width-small);
// .media(@screen-width, @container-width);
// .media(@screen-width-large, @container-width-large);
//}
//
//.media(@sw, @cw) {
// @media screen and (min-width: @sw) {
// .rules(@cw);
// }
//}
//
//body {
// .screen();
//}
//
//.rules(@container-width) {
// .hot-project-introducer {
// width: @container-width;
//
// }
// /* .hot-project-banner start */
//
// //@media screen and (min-width: 1281px) {
// // .hot-project-banner {
// // height: 600px;
// // width: 100%;
// // background: url('../images/hot_project/hot_project_banner.jpg') no-repeat center center;
// // background-size: cover;
// // text-align: center;
// // color: #fff;
// // h4 {
// // font-size: 48px;
// // font-weight: bold;
// // margin-top: 240px;
// // margin-bottom: 60px;
// // }
// // p {
// // font-size: 32px;
// // line-height: 42px;
// // }
// // }
// //}
//
// //@media screen and (max-width: 1281px) {
// // .hot-project-banner {
// // height: 470px;
// // width: 100%;
// // background: url('../images/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-banner start */
.hot-project-banner {
height: 470px;
width: 100%;
background: url('../images/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-banner end */
// /* .hot-project-introducer start*/
.hot-project-introducer { .hot-project-introducer {
height: 728px; height: 728px;
margin: 0 auto; margin: 0 auto;
& > ul { & > ul {
width: 100%;
height: 180px; height: 180px;
li { li {
width: 25%; width: 25%;
float: left;
font-size: 18px; font-size: 18px;
color: #000; color: #000;
line-height: 180px; line-height: 180px;
...@@ -145,74 +238,249 @@ ...@@ -145,74 +238,249 @@
} }
} }
// /* .hot-project-introducer end*/
// /* .hot-project-address start */
//.screen() {
// .media(@screen-width-small, @container-width-small); .hot-project-address {
// .media(@screen-width, @container-width); width: 100%;
// .media(@screen-width-large, @container-width-large); height: 926px;
//} background: #1272ac;
// .hot-project-address-box {
//.media(@sw, @cw) { width: 1200px;
// @media screen and (min-width: @sw) { height: 100%;
// .rules(@cw); margin: 0 auto;
// } position: relative;
//} > div:nth-child(1) {
// position: absolute;
//body { color: #fff;
// .screen(); top: 40px;
//} left: 20px;
// h4 {
//.rules(@container-width) { font-size: 32px;
// .hot-project-introducer { font-weight: bold;
// width: @container-width; line-height: 42px;
// }
// } p {
// /* .hot-project-banner start */ font-size: 18px;
// line-height: 53px;
// //@media screen and (min-width: 1281px) { }
// // .hot-project-banner { }
// // height: 600px; > div:nth-child(2) {
// // width: 100%; width: 100%;
// // background: url('../images/hot_project/hot_project_banner.jpg') no-repeat center center; height: 100%;
// // background-size: cover; }
// // text-align: center; }
// // color: #fff; }
// // h4 {
// // font-size: 48px; /* .hot-project-address end */
// // font-weight: bold;
// // margin-top: 240px; /* .hot-project-tabs start */
// // margin-bottom: 60px;
// // } .hot-project-tabs {
// // p { width: 100%;
// // font-size: 32px; height: 690px;
// // line-height: 42px; background: #f6f6f6;
// // } ul {
// // } width: 1203px;
// //} height: 350px;
// margin:180px auto 160px;
// //@media screen and (max-width: 1281px) { border: 1px solid #43abb6;
// // .hot-project-banner { li {
// // height: 470px; width: 300px;
// // width: 100%; height: 100%;
// // background: url('../images/hot_project/hot_project_banner.jpg') no-repeat center center; float:left;
// // background-size: cover; font-size: 16px;
// // text-align: center; color: #000;
// // color: #fff; text-align: center;
// // h4 { dl {
// // font-size: 54px; width: 100%;
// // font-weight: bold; dt {
// // margin-top: 120px; width: 115px;
// // margin-bottom: 40px; height: 115px;
// // } margin: 44px auto 0;
// // p { }
// // font-size: 24px; dd {
// // line-height: 36px; line-height: 28px;
// // } h4 {
// // } font-size: 28px;
// //} color: #43abb6;
// margin: 14px 0 24px;
// /* .hot-project-banner end */ }
// }
// }
//} }
\ No newline at end of file li:nth-child(1) {
border-right: 1px solid #43abb6;
dt {
background: url("../images/hot_project/tabs05_b.png") no-repeat;
}
}
li:nth-child(2) {
border-right: 1px solid #43abb6;
dt {
background: url("../images/hot_project/tabs04_b.png") no-repeat;
}
}
li:nth-child(3) {
border-right: 1px solid #43abb6;
dt {
background: url("../images/hot_project/tabs03_b.png") no-repeat;
}
}
li:nth-child(4) {
dt {
background: url("../images/hot_project/tabs02_b.png") no-repeat;
}
}
li:hover {
color: #fff;
background: #43abb6;
h4 {
color: #fff;
}
}
li:nth-child(1):hover {
@-webkit-keyframes changeOne {
0% {
opacity: 1;
background: url("../images/hot_project/tabs05_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../images/hot_project/tabs05_a.png ") no-repeat;
opacity: 1;
}
}
dt {
animation-name: changeOne;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
li:nth-child(2):hover {
@-webkit-keyframes changeTwo {
0% {
opacity: 1;
background: url("../images/hot_project/tabs04_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
background: url("../images/hot_project/tabs04_a.png ") no-repeat -1px -1px;
opacity: 1;
}
}
dt {
animation-name: changeTwo;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
li:nth-child(3):hover {
@-webkit-keyframes changeThree {
0% {
opacity: 1;
background: url("../images/hot_project/tabs03_b.png ") no-repeat;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
background: url("../images/hot_project/tabs03_a.png ") no-repeat;
}
}
dt {
animation-name: changeThree;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
li:nth-child(4):hover {
@-webkit-keyframes changeFour {
0% {
background: url("../images/hot_project/tabs02_b.png ") no-repeat;
}
50% {
opacity:0;
}
100% {
opacity: 1;
background: url("../images/hot_project/tabs02_a.png ") no-repeat;
}
}
dt {
animation-name: changeFour;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
}
}
}
/* .hot-project-tabs end */
/* .modal-box start */
body {
position: relative;
}
.modal-box {
display: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
position: fixed;
.modal-dialog {
position: fixed;
left: 50%;
top: 50%;
margin-top: -300px;
margin-left: -450px;
width: 830px;
height: 600px;
background: #fff;
padding-left: 70px;
h4 {
margin-top: 69px;
font-size: 35px;
color: #000;
}
h3 {
font-size: 45px;
font-weight: bold;
color: #ff4a4a;
margin: 43px 0;
}
h6 {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
p {
font-size: 18px;
width: 331px;
line-height: 28px;
}
img {
position: absolute;
right: 55px;
top: 108px;
}
b {
font-size: 42px;
position: absolute;
right: 27px;
top: 9px;
cursor: pointer;
}
}
}
/* .modal-box end */
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment