Skip to content

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

6

parent 5374abec
Hide whitespace changes
Inline Side-by-side
Showing with 882 additions and 1 deletion
HTML/hotProject.html
View file @ 00edee35
......@@ -131,6 +131,6 @@
<p class="copyright">Copyright2016 <span>shuniu</span> All Right Reserved&copy;2014-2015 杭州枢纽科技有限公司 版权所有</p>
</div>
<script src="../public/javascripts/jquery-1.8.3.min.js"></script>
<script src="../public/javascripts/hotProject.js"></script>
<script src="../public/javascripts/project.js"></script>
</body>
</html>
public/stylesheets/product.css 0 → 100644
View file @ 00edee35
@media screen and (min-width: 769px) {
body .banner .banner-box {
width: 990px;
}
body .product-info {
width: 990px;
}
body .product-info table {
width: 742.5px;
}
}
@media screen and (min-width: 1281px) {
body .banner .banner-box {
width: 1150px;
}
body .product-info {
width: 1150px;
}
body .product-info table {
width: 862.5px;
}
}
@media screen and (min-width: 1441px) {
body .banner .banner-box {
width: 1360px;
}
body .product-info {
width: 1360px;
}
body .product-info table {
width: 1020px;
}
}
/*.banner begin*/
.banner {
background: url("/images/index/banner.jpg") no-repeat center center;
background-size: cover;
padding-top: 120px;
padding-bottom: 160px;
}
.banner .banner-box {
margin: 0 auto;
color: #fff;
}
.banner .banner-box h1 {
margin-top: 0;
margin-bottom: 35px;
text-align: center;
font-weight: normal;
font-size: 64px;
}
.banner .banner-box p {
font-size: 20px;
line-height: 35px;
}
/*.banner end*/
/*.product-info start*/
.product-info {
margin: 0 auto 300px;
}
.product-info .product-info-title {
margin: 26px 0;
height: 40px;
line-height: 40px;
position: relative;
font-size: 28px;
color: #2d2f33;
padding-left: 20px;
}
.product-info .product-info-title b {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 9px;
height: 40px;
background: #2d2f33;
}
.product-info .product-intro {
position: relative;
}
.product-info .product-intro table {
text-align: center;
color: #3f3f3f;
border-spacing: 0;
}
.product-info .product-intro table thead td {
width: 33.33%;
font-size: 22px;
line-height: 56px;
}
.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 {
font-weight: bold;
color: #fff;
padding: 19px 13px;
margin-top: 43px;
background: #ff4a4a;
border-radius: 10px;
}
.product-info .product-intro table tbody .profit {
color: #ff4a4a;
}
.product-info .product-intro table tbody .profit span {
font-size: 36px;
}
.product-info .product-intro table tbody .noborder {
border-right: none;
}
.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 {
display: inline-block;
width: 365px;
height: 13px;
border: 1px solid #ff4a4a;
margin-left: 42px;
position: relative;
}
.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 {
width: 180px;
height: 180px;
border-radius: 50%;
border: 10px solid #ececec;
position: absolute;
right: 0px;
top: 95px;
}
.product-info .product-intro > div p {
width: 100%;
height: 100%;
text-align: center;
line-height: 180px;
font-size: 40px;
color: #000;
}
.product-info .product-intro > div > div {
position: absolute;
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;
animation: huxian 1s infinite linear;
}
@-webkit-keyframes huxian {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.product-info .product-intro {
width: 100%;
height: 408px;
border-bottom: 1px solid #aaa;
}
.product-info .product-appointment {
width: 100%;
height: 242px;
border-bottom: 1px solid #aaa;
}
.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 {
padding-left: 20px;
}
.product-info .product-appointment form input {
outline: none;
font-size: 14px;
color: #939393;
height: 48px;
width: 246px;
border: 1px solid #939393;
padding-left: 14px;
border-radius: 10px;
margin-right: 45px;
}
.product-info .product-appointment form #submit {
border: none;
line-height: 48px;
width: 86px;
text-align: center;
color: #fff;
background: #ff4a4a;
font-size: 18px;
padding: 0;
}
.product-info .product-appointment form #submit:hover {
background: #ec3737;
}
.product-info .product-appointment #errorName {
width: 246px;
height: 40px;
line-height: 40px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
margin-left: 20px;
}
.product-info .product-appointment #errorTel {
width: 246px;
height: 40px;
line-height: 40px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
margin-left: 45px;
}
.product-info .product-detail {
width: 100%;
height: 1759px;
}
.product-info .product-detail table {
font-size: 14px;
color: #000;
border-spacing: 0;
line-height: 24px;
}
.product-info .product-detail table .product-detail-key {
width: 140px;
}
.product-info .product-detail table .product-detail-value {
width: 939px;
}
.product-info .product-detail table td {
padding: 26px 60px;
vertical-align: top;
}
.product-info .product-detail table .bb {
border-bottom: 1px solid #939393;
}
.product-info .product-detail table .br {
border-right: 1px solid #939393;
}
/*.product-info end*/
public/stylesheets/product.less 0 → 100644
View file @ 00edee35
@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);
}
}
.rules(@container-width) {
.banner {
.banner-box {
width: @container-width;
}
}
.product-info {
width:@container-width;
table {
width: @container-width/4*3;
}
}
}
body {
.screen();
}
/*.banner begin*/
.banner {
background: url("/images/index/banner.jpg") no-repeat center center;
background-size: cover;
padding-top: 120px;
padding-bottom: 160px;
.banner-box {
margin: 0 auto;
color: #fff;
h1 {
margin-top: 0;
margin-bottom: 35px;
text-align: center;
font-weight: normal;
font-size: 64px;
}
p {
font-size: 20px;
line-height: 35px;
}
}
}
/*.banner end*/
/*.product-info start*/
.product-info {
margin: 0 auto 300px;
.product-info-title {
margin: 26px 0;
height: 40px;
line-height: 40px;
position: relative;
font-size: 28px;
color: #2d2f33;
padding-left: 20px;
b {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 9px;
height: 40px;
background: #2d2f33;
}
}
.product-intro {
position: relative;
table {
text-align: center;
color: #3f3f3f;
border-spacing: 0;
thead {
td {
width: 33.33%;
font-size: 22px;
line-height: 56px;
}
}
tbody {
td {
font-size: 18px;
line-height: 67px;
border-right: 1px solid #eaeaea;
a {
font-weight: bold;
color: #fff;
padding: 19px 13px;
margin-top: 43px;
background: #ff4a4a;
border-radius: 10px;
}
}
.profit {
color: #ff4a4a;
span {
font-size: 36px;
}
}
.noborder {
border-right: none;
}
}
tfoot {
td {
line-height: 106px;
text-align: left;
padding-left: 100px;
font-size: 18px;
p {
display: inline-block;
width: 365px;
height: 13px;
border: 1px solid #ff4a4a;
margin-left: 42px;
position: relative;
i {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
height: 13px;
background: #ff4a4a;
}
}
}
}
}
> div {
width: 180px;
height: 180px;
border-radius: 50%;
border: 10px solid #ececec;
position: absolute;
right: 0px;
top: 95px;
p {
width: 100%;
height: 100%;
text-align: center;
line-height: 180px;
font-size: 40px;
color: #000;
}
> div {
position: absolute;
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;
animation: huxian 1s infinite linear;
}
}
}
@-webkit-keyframes huxian {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.product-intro {
width: 100%;
height: 408px;
border-bottom: 1px solid #aaa;
}
.product-appointment {
width: 100%;
height: 242px;
border-bottom: 1px solid #aaa;
p:nth-child(2) {
font-size: 18px;
color: #2d2f33;
margin: 34px 0 24px;
padding-left: 20px;
}
form {
padding-left: 20px;
input {
outline: none;
font-size: 14px;
color: #939393;
height: 48px;
width: 246px;
border: 1px solid #939393;
padding-left: 14px;
border-radius: 10px;
margin-right: 45px;
}
#submit {
border: none;
line-height: 48px;
width: 86px;
text-align: center;
color: #fff;
background: #ff4a4a;
font-size: 18px;
padding: 0;
}
#submit:hover {
background: #ec3737;
}
}
#errorName {
width: 246px;
height: 40px;
line-height: 40px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
margin-left: 20px;
}
#errorTel {
width: 246px;
height: 40px;
line-height: 40px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
margin-left: 45px;
}
}
.product-detail {
width: 100%;
height: 1759px;
table {
font-size: 14px;
color: #000;
border-spacing: 0;
line-height: 24px;
.product-detail-key {
width: 140px;
}
.product-detail-value {
width: 939px;
}
td {
padding: 26px 60px;
vertical-align: top;
}
.bb {
border-bottom: 1px solid #939393;
}
.br {
border-right: 1px solid #939393;
}
}
}
}
/*.product-info end*/
\ No newline at end of file
public/stylesheets/project.css 0 → 100644
View file @ 00edee35
.hot-project-introducer {
height: 728px;
margin: 0 auto;
}
.hot-project-introducer > ul {
width: 100%;
height: 180px;
}
.hot-project-introducer > ul li {
width: 25%;
font-size: 18px;
color: #000;
line-height: 180px;
text-align: center;
font-weight: bold;
}
.hot-project-introducer > ul li i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #bb342e;
position: relative;
top: -3px;
margin-right: 40px;
}
.hot-project-introducer > ul li b {
display: inline-block;
width: 46px;
height: 46px;
position: relative;
top: 20px;
margin-right: 6px;
background: url("../images/hot_project/tabs01.png") no-repeat -46px -13px;
}
.hot-project-introducer > ul li:nth-child(2) > b {
background-position: -176px -13px;
}
.hot-project-introducer > ul li:nth-child(3) > b {
background-position: -329px -13px;
}
.hot-project-introducer > ul li:nth-child(4) > b {
background-position: -450px -13pxpx;
}
.hot-project-introducer > hr {
width: 940px;
margin: 0 auto;
background: #959595;
position: relative;
}
.hot-project-introducer hr::after {
content: '';
display: block;
width: 73px;
height: 3px;
background: #01a9dd;
position: absolute;
left: 433px;
top: -2px;
}
.hot-project-introducer .introducer {
width: 700px;
margin: 0 auto;
position: relative;
}
.hot-project-introducer .introducer h4 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin: 50px 0 58px;
}
.hot-project-introducer .introducer div {
width: 100%;
color: #000;
margin: 15px 0;
}
.hot-project-introducer .introducer div span {
font-size: 25px;
}
.hot-project-introducer .introducer div input {
width: 506px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #7f7f7f;
outline: none;
border: 1px solid #090204;
padding: 0 30px;
background: #f4f4f4;
}
.hot-project-introducer .introducer div textarea {
width: 506px;
min-height: 100px;
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 {
position: relative;
left: 0;
top: -74px;
}
.hot-project-introducer .introducer div:last-child {
text-align: center;
margin-top: 55px;
}
.hot-project-introducer .introducer div:last-child input {
width: 333px;
height: 60px;
line-height: 60px;
border: none;
font-size: 24px;
color: #fff;
background: #868686;
border-radius: 10px;
text-align: center;
}
.hot-project-introducer .introducer p {
height: 40px;
line-height: 40px;
font-size: 18px;
color: #ff4a4b;
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;
}
public/stylesheets/project.less 0 → 100644
View file @ 00edee35
@import 'variable';
.hot-project-introducer {
height: 728px;
margin: 0 auto;
& > ul {
width: 100%;
height: 180px;
li {
width: 25%;
font-size: 18px;
color: #000;
line-height: 180px;
text-align: center;
font-weight: bold;
i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #bb342e;
position: relative;
top: -3px;
margin-right: 40px;
}
b {
display: inline-block;
width: 46px;
height: 46px;
position: relative;
top: 20px;
margin-right: 6px;
background: url("../images/hot_project/tabs01.png") no-repeat -46px -13px;
}
}
li:nth-child(2) {
> b {
background-position: -176px -13px;
}
}
li:nth-child(3) {
> b {
background-position: -329px -13px;
}
}
li:nth-child(4) {
> b {
background-position: -450px -13pxpx;
}
}
}
> hr {
width: 940px;
margin: 0 auto;
background: #959595;
position: relative;
}
hr::after {
content: '';
display: block;
width: 73px;
height: 3px;
background: #01a9dd;
position: absolute;
left: 433px;
top: -2px;
}
.introducer {
width: 700px;
margin: 0 auto;
position: relative;
h4 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin: 50px 0 58px;
}
div {
width: 100%;
color: #000;
margin: 15px 0;
span {
font-size: 25px;
}
input {
width: 506px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #7f7f7f;
outline: none;
border: 1px solid #090204;
padding: 0 30px;
background: #f4f4f4;
}
textarea {
width: 506px;
min-height: 100px;
padding: 12px 30px;
font-size: 18px;
color: #7f7f7f;
border: 1px solid #090204;
background: #f4f4f4;
outline: none;
}
}
div:nth-child(4) {
span {
position: relative;
left: 0;
top: -74px;
}
}
div:last-child {
text-align: center;
margin-top: 55px;
input {
width: 333px;
height: 60px;
line-height: 60px;
border: none;
font-size: 24px;
color: #fff;
background: #868686;
border-radius: 10px;
text-align: center;
}
}
p {
height: 40px;
line-height: 40px;
font-size: 18px;
color: #ff4a4b;
position: absolute;
}
p:nth-child(3) {
top: 102px;
right: -238px;
}
p:nth-child(5) {
top: 172px;
right: -152px;
}
}
}
//
//.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
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