Skip to content

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

9

parent 8c45dfd1
Show whitespace changes
Inline Side-by-side
Showing with 299 additions and 31 deletions
public/javascripts/product.js
View file @ e4e7b55a
......@@ -8,6 +8,7 @@
var $userTel = $('input[name="userTel"]', $form);
var $errorName = $('.appointment .errorName');
var $errorTel = $('.appointment .errorTel');
var $modalBox=$('.modal-box');
var balance = $('.balance').html();
var total = $('.total').html();
......@@ -69,8 +70,12 @@
$userTel.focus();
return;
}
console.log('ajax submit')
$modalBox.show(500);
});
$('#modalBoxHidden').click(function (e) {
e.preventDefault();
$modalBox.hide(500);
});
......
public/javascripts/project.js
View file @ e4e7b55a
......@@ -7,7 +7,7 @@
var $errorDescription = $('.error-description');
var $introducerMobile = $('#introducerMobile');
var $projectDescription = $('#projectDescription');
var $modalBox = $('.modal_box');
var $modalBox = $('.modal-box');
var $introducer = $('#introducer');
......@@ -80,13 +80,13 @@
/**
* 地图项目地址弹框
*/
$('.project_one').click(function (e) {
$('.hot-project-address a').click(function (e) {
e.preventDefault();
$modalBox.show();
$modalBox.show(500);
});
$('#modal_box_hidden').click(function (e) {
$('#modalBoxHidden').click(function (e) {
e.preventDefault();
$modalBox.hide();
$modalBox.hide(500);
});
......
public/stylesheets/product.css
View file @ e4e7b55a
......@@ -190,6 +190,78 @@
border-bottom: 0;
}
/*.product-info 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: -200px;
margin-left: -300px;
width: 600px;
height: 400px;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.modal-box .modal-dialog div:nth-child(1) {
width: 100%;
height: 80px;
background: #ff4a4b;
position: relative;
}
.modal-box .modal-dialog div:nth-child(1) b {
display: inline-block;
width: 46px;
height: 46px;
line-height: 46px;
text-align: center;
border-radius: 50%;
border: 3px solid #fff;
font-size: 42px;
position: absolute;
right: 27px;
top: 15px;
cursor: pointer;
color: #fff;
}
.modal-box .modal-dialog div:nth-child(2) {
position: relative;
}
.modal-box .modal-dialog div:nth-child(2) i {
display: inline-block;
width: 69px;
height: 69px;
background: url(https://res.fudou6.com/c/4/20160730/e86YXBwb2ludG1lbnQtc3VjY2VzcyA=_69x69.png) no-repeat;
position: absolute;
left: 90px;
top: 8px;
}
.modal-box .modal-dialog div:nth-child(2) h3 {
font-size: 50px;
font-weight: bold;
color: #ff4a4a;
margin: 43px 0;
padding-left: 180px;
}
.modal-box .modal-dialog p {
font-size: 24px;
line-height: 28px;
text-align: center;
}
/* .modal-box end */
@media screen and (min-width: 769px) {
body .intro,
body .appointment,
......
public/stylesheets/product.less
View file @ e4e7b55a
......@@ -210,6 +210,85 @@
/*.product-info 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: -200px;
margin-left: -300px;
width: 600px;
height: 400px;
background: #fff;
border-radius: 10px;
overflow: hidden;
div {
&:nth-child(1){
width: 100%;
height: 80px;
background: #ff4a4b;
position: relative;
b {
display: inline-block;
width: 46px;
height: 46px;
line-height: 46px;
text-align: center;
border-radius: 50%;
border: 3px solid #fff;
font-size: 42px;
position: absolute;
right: 27px;
top: 15px;
cursor: pointer;
color: #fff;
}
}
&:nth-child(2){
position: relative;
i {
display: inline-block;
width: 69px;
height: 69px;
background: url(https://res.fudou6.com/c/4/20160730/e86YXBwb2ludG1lbnQtc3VjY2VzcyA=_69x69.png)no-repeat;
position: absolute;
left:90px;
top:8px;
}
h3 {
font-size: 50px;
font-weight: bold;
color: #ff4a4a;
margin: 43px 0;
padding-left:180px;
}
}
}
p {
font-size: 24px;
line-height: 28px;
text-align: center;
}
}
}
/* .modal-box end */
.screen() {
.media(@screen-width-small, @container-width-small);
.media(@screen-width, @container-width);
......
public/stylesheets/project.css
View file @ e4e7b55a
......@@ -145,22 +145,23 @@
/* .hot-project-address start */
.hot-project-address {
width: 100%;
height: 926px;
background: #1272ac;
}
.hot-project-address .hot-project-address-box {
width: 1200px;
width: 800px;
height: 100%;
margin: 0 auto;
padding-top: 118px;
padding-bottom: 118px;
position: relative;
}
.hot-project-address .hot-project-address-box > div:nth-child(1) {
position: absolute;
color: #fff;
top: 40px;
left: 20px;
left: -60px;
}
.hot-project-address .hot-project-address-box > div:nth-child(1) h4 {
.hot-project-address .hot-project-address-box > div:nth-child(1) h2 {
font-size: 32px;
font-weight: bold;
line-height: 42px;
......@@ -171,7 +172,49 @@
}
.hot-project-address .hot-project-address-box > div:nth-child(2) {
width: 100%;
height: 100%;
position: relative;
left: -80px;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) img {
width: 100%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a {
width: 138px;
height: 46px;
text-align: center;
line-height: 46px;
font-size: 18px;
font-weight: bold;
border-radius: 26px;
background: #fff;
color: #000;
position: absolute;
right: -144px;
z-index: 3;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(2) {
top: 3%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(3) {
top: 23%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(4) {
top: 38%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(5) {
top: 56%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(6) {
top: 65%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(7) {
top: 74%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(8) {
top: 84%;
}
.hot-project-address .hot-project-address-box > div:nth-child(2) a:nth-child(9) {
top: 94%;
}
/* .hot-project-address end */
/* .hot-project-tabs start */
......
public/stylesheets/project.less
View file @ e4e7b55a
......@@ -230,19 +230,21 @@
.hot-project-address {
width: 100%;
height: 926px;
background: #1272ac;
.hot-project-address-box {
width: 1200px;
width: 800px;
height: 100%;
margin: 0 auto;
padding-top: 118px;
padding-bottom: 118px;
position: relative;
> div:nth-child(1) {
& > div {
&:nth-child(1) {
position: absolute;
color: #fff;
top: 40px;
left: 20px;
h4 {
left: -60px;
h2 {
font-size: 32px;
font-weight: bold;
line-height: 42px;
......@@ -252,9 +254,52 @@
line-height: 53px;
}
}
> div:nth-child(2) {
&:nth-child(2){
width: 100%;
height: 100%;
position: relative;
left:-80px;
img {
width: 100%;
}
a {
width: 138px;
height: 46px;
text-align: center;
line-height: 46px;
font-size: 18px;
font-weight: bold;
border-radius: 26px;
background: #fff;
color: #000;
position: absolute;
right:-144px;
z-index:3;
&:nth-child(2) {
top:3%;
}
&:nth-child(3) {
top:23%;
}
&:nth-child(4) {
top:38%;
}
&:nth-child(5) {
top:56%;
}
&:nth-child(6) {
top:65%;
}
&:nth-child(7) {
top:74%;
}
&:nth-child(8) {
top:84%;
}
&:nth-child(9) {
top:94%;
}
}
}
}
}
}
......
views/product.hbs
View file @ e4e7b55a
......@@ -156,3 +156,17 @@
</tbody>
</table>
</div>
<div class="modal-box">
<div class="modal-dialog">
<div>
<b id="modalBoxHidden">&times;</b>
</div>
<div>
<i></i>
<h3>恭喜你预约成功</h3>
</div>
<p>富豆工作人员将第一时间与您取得联系!</p>
</div>
</div>
\ No newline at end of file
views/project.hbs
View file @ e4e7b55a
......@@ -46,10 +46,20 @@
<div class="hot-project-address">
<div class="hot-project-address-box">
<div>
<h4>热点项目</h4>
<h2>热点项目</h2>
<p>※国内各地在进行项目分布图</p>
</div>
<div>
<img src="https://res.fudou6.com/c/4/20160730/g3zbWFw_1075x722.png" alt="map">
<a href="javascrpt:;">天津</a>
<a href="javascrpt:;">西安灞桥</a>
<a href="javascrpt:;">江苏海安</a>
<a href="javascrpt:;">成都金堂</a>
<a href="javascrpt:;">四川巴中</a>
<a href="javascrpt:;">贵州同仁</a>
<a href="javascrpt:;">贵州余庆</a>
<a href="javascrpt:;">贵州南州</a>
</div>
</div>
</div>
<div class="hot-project-tabs clear">
......
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