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 {
height: 728px;
margin: 0 auto;
}
.hot-project-introducer > ul {
width: 100%;
height: 180px;
}
.hot-project-introducer > ul li {
width: 25%;
float: left;
font-size: 18px;
color: #000;
line-height: 180px;
......@@ -133,3 +151,230 @@
top: 172px;
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';
//
//.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 {
height: 728px;
margin: 0 auto;
& > ul {
width: 100%;
height: 180px;
li {
width: 25%;
float: left;
font-size: 18px;
color: #000;
line-height: 180px;
......@@ -145,74 +238,249 @@
}
}
// /* .hot-project-introducer end*/
//
//.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 end */
//
//
//}
\ No newline at end of file
/* .hot-project-address start */
.hot-project-address {
width: 100%;
height: 926px;
background: #1272ac;
.hot-project-address-box {
width: 1200px;
height: 100%;
margin: 0 auto;
position: relative;
> div:nth-child(1) {
position: absolute;
color: #fff;
top: 40px;
left: 20px;
h4 {
font-size: 32px;
font-weight: bold;
line-height: 42px;
}
p {
font-size: 18px;
line-height: 53px;
}
}
> 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;
ul {
width: 1203px;
height: 350px;
margin:180px auto 160px;
border: 1px solid #43abb6;
li {
width: 300px;
height: 100%;
float:left;
font-size: 16px;
color: #000;
text-align: center;
dl {
width: 100%;
dt {
width: 115px;
height: 115px;
margin: 44px auto 0;
}
dd {
line-height: 28px;
h4 {
font-size: 28px;
color: #43abb6;
margin: 14px 0 24px;
}
}
}
}
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