Skip to content

W
www.fudou6.com
Commit 5b2612e1 authored by superman's avatar superman
Browse files
Options

2-4

parent d994d517
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 537 additions and 517 deletions
public/javascripts/product.js
View file @ 5b2612e1
......@@ -2,68 +2,74 @@
* Created by Administrator on 2016/7/26.
*/
(function () {
var $errorName = $('#errorName');
var $errorTel = $('#errorTel');
var $userName = $('#userName');
var $userTel = $('#userTel');
var $submit = $('#submit');
var $form=$('#form');
var myBalance = $('#myBalance').html();
var total = $('#total').html();
var progressBar = parseFloat($('#progressBar').css('width'));
var $form = $('#form');
var $userName = $('input[name="userName"]', $form);
var $userTel = $('input[name="userTel"]', $form);
var $errorName = $('.appointment .errorName');
var $errorTel = $('.appointment .errorTel');
$('#progressBar i').animate({
width:myBalance/total*progressBar+'px',
opacity:1
},1000);
var balance = $('.balance').html();
var total = $('.total').html();
var progressBar = $('.progress-bar');
var progress = progressBar.width();
$('i', progressBar).width(balance / total * progress);
/**
* 验证用户姓名
* @param obj
* @returns {boolean}
*/
function valiUserName(userName) {
$errorName.html(userName ? '' : '用户名不能为空，请重新输入！');
$errorName.html(userName ? '' : '请输入您的姓名！');
return !userName;
}
function filterNotNumber(mobile) {
if (/[^\d]/g.test(mobile)) {
$userTel.val(mobile.replace(/[^\d]/g, ''));
return false;
}
return true;
}
/**
* 验证电话号码
* @param obj
* @returns {boolean}
*/
function valiMobile(mobile) {
var msg = /^[\d]/g.test(mobile) ? '' : '手机号有误，请重新输入！';
/^[\d]/g.test(mobile[mobile.length-1])? $userTel.val(mobile) : $userTel.val(mobile.slice(0,mobile.length-1));
console.log(mobile[mobile.length-1]);
console.log(/^[\d]/g.test(mobile[mobile.length-1]));
$errorTel.html(msg);
return !mobile;
if (/^[\d]{11}$/g.test(mobile)) {
$errorTel.html('');
return false;
}
$errorTel.html('手机号有误，请重新输入！');
return true;
}
$userName.on('keyup', function () {
valiUserName($.trim($userName.val()+''));
valiUserName($.trim($userName.val() + ''));
});
$userTel.on('keyup', function () {
valiMobile($userTel.val());
var mobile = $userTel.val();
filterNotNumber(mobile);
valiMobile(mobile);
});
/**
* 提交验证
*/
$form.on('submit',function (e) {
if( valiUserName($.trim($userName.val()+'')) ){
$form.on('submit', function (e) {
e.preventDefault();
if (valiUserName($.trim($userName.val() + ''))) {
$userName.focus();
e.preventDefault();
$errorName.html('用户名输入有误,请再次输入!');
return;
}
if( valiMobile( $.trim( $userTel.val()+'' ) ) ){
if (valiMobile($.trim($userTel.val() + ''))) {
$userTel.focus();
e.preventDefault();
$errorTel.html('密码有误,请再次输入!');
return;
}
console.log('ajax submit')
});
......
public/stylesheets/index.css
View file @ 5b2612e1
/*.banner begin*/
.banner {
background: url("/images/index/banner.jpg") no-repeat center center;
background: url(https://res.fudou6.com/c/4/20160730/tayYmFubmVy_1920x677.jpg) no-repeat center center;
background-size: cover;
padding-top: 120px;
padding-bottom: 160px;
......
public/stylesheets/index.less
View file @ 5b2612e1
......@@ -2,7 +2,7 @@
/*.banner begin*/
.banner {
background: url("/images/index/banner.jpg") no-repeat center center;
background: url(https://res.fudou6.com/c/4/20160730/tayYmFubmVy_1920x677.jpg) no-repeat center center;
background-size: cover;
padding-top: 120px;
padding-bottom: 160px;
......
public/stylesheets/product.css
View file @ 5b2612e1
@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 {
.info-title {
margin: 26px 0;
height: 40px;
line-height: 40px;
position: relative;
font-size: 28px;
color: #2d2f33;
padding-left: 20px;
padding-left: 10px;
border-left: 10px solid #2d2f33;
}
.product-info .product-info-title b {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 9px;
height: 40px;
background: #2d2f33;
@keyframes huxian {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.product-info .product-intro {
.intro {
position: relative;
height: 408px;
border-bottom: 1px solid #aaa;
}
.product-info .product-intro table {
.intro table {
text-align: center;
color: #3f3f3f;
border-spacing: 0;
}
.product-info .product-intro table thead td {
.intro table thead th {
width: 33.33%;
font-size: 22px;
line-height: 56px;
font-weight: normal;
}
.product-info .product-intro table tbody td {
.intro table tbody td {
text-align: center;
vertical-align: middle;
font-size: 18px;
line-height: 67px;
border-right: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
}
.product-info .product-intro table tbody td a {
font-weight: bold;
.intro table tbody td a {
font-weight: 500;
color: #fff;
padding: 19px 13px;
margin-top: 43px;
background: #ff4a4a;
border-radius: 10px;
}
.product-info .product-intro table tbody .profit {
.intro table tbody td:nth-child(2) {
color: #ff4a4a;
}
.product-info .product-intro table tbody .profit span {
.intro table tbody td:nth-child(2) strong {
font-size: 36px;
}
.product-info .product-intro table tbody .noborder {
border-right: none;
.intro table tbody td:first-child {
border-left: 0;
}
.product-info .product-intro table tfoot td {
line-height: 106px;
text-align: left;
.intro table tfoot td {
padding-left: 100px;
font-size: 18px;
line-height: 106px;
text-align: left;
}
.intro table tfoot td .balance:after {
content: '万 / ';
}
.product-info .product-intro table tfoot td p {
.intro table tfoot td .total:after {
content: '万';
}
.intro table tfoot td .progress-bar {
position: relative;
display: inline-block;
width: 365px;
height: 13px;
border: 1px solid #ff4a4a;
margin-left: 42px;
position: relative;
border: 1px solid #ff4a4a;
}
.product-info .product-intro table tfoot td p i {
.intro table tfoot td .progress-bar i {
display: inline-block;
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
height: 13px;
width: 0;
background: #ff4a4a;
transition: width 1s;
}
.product-info .product-intro > div {
.intro > div {
width: 180px;
height: 180px;
border-radius: 50%;
......@@ -143,7 +95,7 @@
right: 0px;
top: 95px;
}
.product-info .product-intro > div p {
.intro > div p {
width: 100%;
height: 100%;
text-align: center;
......@@ -151,47 +103,32 @@
font-size: 40px;
color: #000;
}
.product-info .product-intro > div > div {
.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;
border: 10px solid transparent;
border-right-color: #ff4a4a;
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 {
.appointment {
width: 100%;
height: 242px;
border-bottom: 1px solid #aaa;
}
.product-info .product-appointment p:nth-child(2) {
.appointment p:nth-child(2) {
font-size: 18px;
color: #2d2f33;
margin: 34px 0 24px;
padding-left: 20px;
}
.product-info .product-appointment form {
.appointment form {
padding-left: 20px;
}
.product-info .product-appointment form input {
.appointment form input {
outline: none;
font-size: 14px;
color: #939393;
......@@ -202,61 +139,87 @@
border-radius: 10px;
margin-right: 45px;
}
.product-info .product-appointment form #submit {
.appointment form input[type="submit"] {
width: 86px;
padding: 0;
border: none;
font-size: 18px;
line-height: 48px;
width: 86px;
text-align: center;
color: #fff;
background: #ff4a4a;
font-size: 18px;
padding: 0;
}
.product-info .product-appointment form #submit:hover {
.appointment form input[type="submit"]:hover {
background: #ec3737;
}
.product-info .product-appointment #errorName {
.appointment form .errorName,
.appointment form .errorTel {
display: inline-block;
width: 246px;
height: 40px;
line-height: 40px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
padding-left: 7px;
margin-left: 20px;
}
.product-info .product-appointment #errorTel {
width: 246px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
}
.appointment form .errorTel {
margin-left: 45px;
}
.product-info .product-detail {
.detail {
width: 100%;
height: 1759px;
padding-bottom: 150px;
}
.product-info .product-detail table {
font-size: 14px;
.detail table {
width: 100%;
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;
.detail table td {
padding: 25px 60px;
vertical-align: top;
}
.product-info .product-detail table .bb {
.detail table td {
border-bottom: 1px solid #939393;
}
.product-info .product-detail table .br {
border-right: 1px solid #939393;
}
.detail table td:last-child {
border-right: 0;
}
.detail table tr:last-child td {
border-bottom: 0;
}
/*.product-info end*/
@media screen and (min-width: 769px) {
body .intro,
body .appointment,
body .detail {
width: 990px;
margin: 0 auto;
}
body .intro > table {
width: 742.5px;
}
}
@media screen and (min-width: 1281px) {
body .intro,
body .appointment,
body .detail {
width: 1150px;
margin: 0 auto;
}
body .intro > table {
width: 862.5px;
}
}
@media screen and (min-width: 1441px) {
body .intro,
body .appointment,
body .detail {
width: 1360px;
margin: 0 auto;
}
body .intro > table {
width: 1020px;
}
}
public/stylesheets/product.less
View file @ 5b2612e1
@import 'variable';
.screen() {
.media(@screen-width-small, @container-width-small);
.media(@screen-width, @container-width);
.media(@screen-width-large, @container-width-large);
}
/*.product-info start*/
.media(@sw, @cw) {
@media screen and (min-width: @sw) {
.rules(@cw);
}
.info-title {
margin: 26px 0;
height: 40px;
line-height: 40px;
position: relative;
font-size: 28px;
color: #2d2f33;
padding-left: 10px;
border-left: 10px solid #2d2f33;
}
.rules(@container-width) {
.banner {
.banner-box {
width: @container-width;
}
@keyframes huxian {
0% {
transform: rotate(0deg)
}
.product-info {
width:@container-width;
table {
width: @container-width/4*3;
}
100% {
transform: rotate(360deg)
}
}
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;
.intro {
position: relative;
height: 408px;
border-bottom: 1px solid #aaa;
table {
text-align: center;
color: #3f3f3f;
border-spacing: 0;
thead th {
width: 33.33%;
font-size: 22px;
line-height: 56px;
font-weight: normal;
}
}
.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;
}
tbody {
td {
text-align: center;
vertical-align: middle;
font-size: 18px;
line-height: 67px;
border-left: 1px solid #eaeaea;
a {
font-weight: 500;
color: #fff;
padding: 19px 13px;
background: #ff4a4a;
border-radius: 10px;
}
.profit {
&:nth-child(2) {
color: #ff4a4a;
span {
strong {
font-size: 36px;
}
}
.noborder {
border-right: none;
&:first-child {
border-left: 0;
}
}
tfoot {
td {
line-height: 106px;
text-align: left;
padding-left: 100px;
font-size: 18px;
p {
}
tfoot {
td {
padding-left: 100px;
font-size: 18px;
line-height: 106px;
text-align: left;
.balance {
&:after {
content: '万 / '
}
}
.total {
&:after {
content: '万'
}
}
.progress-bar {
position: relative;
display: inline-block;
width: 365px;
height: 13px;
margin-left: 42px;
border: 1px solid #ff4a4a;
i {
display: inline-block;
width: 365px;
position: absolute;
left: 0;
top: 0;
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;
}
width:0;
background: #ff4a4a;
transition: width 1s;
}
}
}
}
> div {
}
& > 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 #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)
border: 10px solid transparent;
border-right-color: #ff4a4a;
animation: huxian 1s infinite linear;
}
}
.product-intro {
width: 100%;
height: 408px;
border-bottom: 1px solid #aaa;
}
.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;
}
.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;
}
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 {
input[type="submit"] {
width: 86px;
padding: 0;
border: none;
font-size: 18px;
line-height: 48px;
text-align: center;
color: #fff;
background: #ff4a4a;
&:hover {
background: #ec3737;
}
}
#errorName {
.errorName,.errorTel {
display: inline-block;
width: 246px;
height: 40px;
line-height: 40px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
padding-left: 7px;
margin-left: 20px;
}
#errorTel {
width: 246px;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
}
.errorTel {
margin-left: 45px;
}
}
.product-detail {
}
.detail {
width: 100%;
padding-bottom: 150px;
table {
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;
color: #000;
border-spacing: 0;
td {
padding: 25px 60px;
vertical-align: top;
}
td {
border-bottom: 1px solid #939393;
border-right: 1px solid #939393;
&:last-child {
border-right: 0;
}
}
tr:last-child td {
border-bottom: 0;
}
}
}
/*.product-info end*/
\ No newline at end of file
/*.product-info 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);
}
}
.rules(@cw) {
.intro,
.appointment,
.detail {
width: @cw;
margin: 0 auto;
}
.intro > table {
width: @cw/4*3;
}
}
body {
.screen();
}
\ No newline at end of file
public/stylesheets/style.css
View file @ 5b2612e1
......@@ -521,6 +521,29 @@ hr.line-separate:after {
color: #fff;
}
/*footer end*/
/*.banner begin*/
.banner {
background: url(https://res.fudou6.com/c/4/20160730/tayYmFubmVy_1920x677.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*/
@media screen and (min-width: 769px) {
body #header .container {
width: 990px;
......@@ -528,6 +551,9 @@ hr.line-separate:after {
body #header .container nav {
padding-left: 247.5px;
}
body .banner .banner-box {
width: 990px;
}
}
@media screen and (min-width: 1281px) {
body #header .container {
......@@ -536,6 +562,9 @@ hr.line-separate:after {
body #header .container nav {
padding-left: 287.5px;
}
body .banner .banner-box {
width: 1150px;
}
}
@media screen and (min-width: 1441px) {
body #header .container {
......@@ -544,4 +573,7 @@ hr.line-separate:after {
body #header .container nav {
padding-left: 340px;
}
body .banner .banner-box {
width: 1360px;
}
}
public/stylesheets/style.less
View file @ 5b2612e1
......@@ -126,6 +126,31 @@ hr.line-separate {
/*footer end*/
/*.banner begin*/
.banner {
background: url(https://res.fudou6.com/c/4/20160730/tayYmFubmVy_1920x677.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*/
.screen() {
.media(@screen-width-small, @container-width-small);
.media(@screen-width, @container-width);
......@@ -138,15 +163,20 @@ hr.line-separate {
}
}
.rules(@container-width) {
.rules(@cw) {
#header {
.container {
width: @container-width;
width: @cw;
nav {
padding-left: @container-width / 4;
padding-left: @cw / 4;
}
}
}
.banner {
.banner-box {
width: @cw;
}
}
}
body{
......
views/product.hbs
View file @ 5b2612e1
This diff is collapsed.
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