Skip to content

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

2-4

parent d994d517
Show whitespace changes
Inline Side-by-side
Showing with 537 additions and 517 deletions
public/javascripts/product.js
View file @ 5b2612e1
...@@ -2,68 +2,74 @@ ...@@ -2,68 +2,74 @@
* Created by Administrator on 2016/7/26. * Created by Administrator on 2016/7/26.
*/ */
(function () { (function () {
var $errorName = $('#errorName');
var $errorTel = $('#errorTel');
var $userName = $('#userName');
var $userTel = $('#userTel');
var $submit = $('#submit');
var $form=$('#form');
var myBalance = $('#myBalance').html(); var $form = $('#form');
var total = $('#total').html(); var $userName = $('input[name="userName"]', $form);
var progressBar = parseFloat($('#progressBar').css('width')); var $userTel = $('input[name="userTel"]', $form);
var $errorName = $('.appointment .errorName');
var $errorTel = $('.appointment .errorTel');
$('#progressBar i').animate({ var balance = $('.balance').html();
width:myBalance/total*progressBar+'px', var total = $('.total').html();
opacity:1 var progressBar = $('.progress-bar');
},1000); var progress = progressBar.width();
$('i', progressBar).width(balance / total * progress);
/** /**
* 验证用户姓名 * 验证用户姓名
* @param obj * @param obj
* @returns {boolean} * @returns {boolean}
*/ */
function valiUserName(userName) { function valiUserName(userName) {
$errorName.html(userName ? '' : '用户名不能为空，请重新输入！'); $errorName.html(userName ? '' : '请输入您的姓名！');
return !userName; return !userName;
} }
function filterNotNumber(mobile) {
if (/[^\d]/g.test(mobile)) {
$userTel.val(mobile.replace(/[^\d]/g, ''));
return false;
}
return true;
}
/** /**
* 验证电话号码 * 验证电话号码
* @param obj * @param obj
* @returns {boolean} * @returns {boolean}
*/ */
function valiMobile(mobile) { function valiMobile(mobile) {
var msg = /^[\d]/g.test(mobile) ? '' : '手机号有误，请重新输入！'; if (/^[\d]{11}$/g.test(mobile)) {
/^[\d]/g.test(mobile[mobile.length-1])? $userTel.val(mobile) : $userTel.val(mobile.slice(0,mobile.length-1)); $errorTel.html('');
console.log(mobile[mobile.length-1]); return false;
console.log(/^[\d]/g.test(mobile[mobile.length-1])); }
$errorTel.html(msg); $errorTel.html('手机号有误，请重新输入！');
return !mobile; return true;
} }
$userName.on('keyup', function () { $userName.on('keyup', function () {
valiUserName($.trim($userName.val()+'')); valiUserName($.trim($userName.val() + ''));
}); });
$userTel.on('keyup', function () { $userTel.on('keyup', function () {
valiMobile($userTel.val()); var mobile = $userTel.val();
filterNotNumber(mobile);
valiMobile(mobile);
}); });
/** /**
* 提交验证 * 提交验证
*/ */
$form.on('submit',function (e) { $form.on('submit', function (e) {
if( valiUserName($.trim($userName.val()+'')) ){
$userName.focus();
e.preventDefault(); e.preventDefault();
$errorName.html('用户名输入有误,请再次输入!'); if (valiUserName($.trim($userName.val() + ''))) {
$userName.focus();
return; return;
} }
if( valiMobile( $.trim( $userTel.val()+'' ) ) ){ if (valiMobile($.trim($userTel.val() + ''))) {
$userTel.focus(); $userTel.focus();
e.preventDefault();
$errorTel.html('密码有误,请再次输入!');
return; return;
} }
console.log('ajax submit')
}); });
......
public/stylesheets/index.css
View file @ 5b2612e1
/*.banner begin*/ /*.banner begin*/
.banner { .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; background-size: cover;
padding-top: 120px; padding-top: 120px;
padding-bottom: 160px; padding-bottom: 160px;
......
public/stylesheets/index.less
View file @ 5b2612e1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/*.banner begin*/ /*.banner begin*/
.banner { .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; background-size: cover;
padding-top: 120px; padding-top: 120px;
padding-bottom: 160px; 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 start*/
.product-info { .info-title {
margin: 0 auto 300px;
}
.product-info .product-info-title {
margin: 26px 0; margin: 26px 0;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: relative; position: relative;
font-size: 28px; font-size: 28px;
color: #2d2f33; color: #2d2f33;
padding-left: 20px; padding-left: 10px;
border-left: 10px solid #2d2f33;
} }
.product-info .product-info-title b { @keyframes huxian {
position: absolute; 0% {
left: 0; transform: rotate(0deg);
top: 0; }
display: inline-block; 100% {
width: 9px; transform: rotate(360deg);
height: 40px; }
background: #2d2f33;
} }
.product-info .product-intro { .intro {
position: relative; position: relative;
height: 408px;
border-bottom: 1px solid #aaa;
} }
.product-info .product-intro table { .intro table {
text-align: center; text-align: center;
color: #3f3f3f; color: #3f3f3f;
border-spacing: 0; border-spacing: 0;
} }
.product-info .product-intro table thead td { .intro table thead th {
width: 33.33%; width: 33.33%;
font-size: 22px; font-size: 22px;
line-height: 56px; 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; font-size: 18px;
line-height: 67px; line-height: 67px;
border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea;
} }
.product-info .product-intro table tbody td a { .intro table tbody td a {
font-weight: bold; font-weight: 500;
color: #fff; color: #fff;
padding: 19px 13px; padding: 19px 13px;
margin-top: 43px;
background: #ff4a4a; background: #ff4a4a;
border-radius: 10px; border-radius: 10px;
} }
.product-info .product-intro table tbody .profit { .intro table tbody td:nth-child(2) {
color: #ff4a4a; color: #ff4a4a;
} }
.product-info .product-intro table tbody .profit span { .intro table tbody td:nth-child(2) strong {
font-size: 36px; font-size: 36px;
} }
.product-info .product-intro table tbody .noborder { .intro table tbody td:first-child {
border-right: none; border-left: 0;
} }
.product-info .product-intro table tfoot td { .intro table tfoot td {
line-height: 106px;
text-align: left;
padding-left: 100px; padding-left: 100px;
font-size: 18px; font-size: 18px;
line-height: 106px;
text-align: left;
}
.intro table tfoot td .balance:after {
content: '万 / ';
}
.intro table tfoot td .total:after {
content: '万';
} }
.product-info .product-intro table tfoot td p { .intro table tfoot td .progress-bar {
position: relative;
display: inline-block; display: inline-block;
width: 365px; width: 365px;
height: 13px; height: 13px;
border: 1px solid #ff4a4a;
margin-left: 42px; 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; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
display: inline-block;
opacity: 0;
height: 13px; height: 13px;
width: 0;
background: #ff4a4a; background: #ff4a4a;
transition: width 1s;
} }
.product-info .product-intro > div { .intro > div {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
...@@ -143,7 +95,7 @@ ...@@ -143,7 +95,7 @@
right: 0px; right: 0px;
top: 95px; top: 95px;
} }
.product-info .product-intro > div p { .intro > div p {
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
...@@ -151,47 +103,32 @@ ...@@ -151,47 +103,32 @@
font-size: 40px; font-size: 40px;
color: #000; color: #000;
} }
.product-info .product-intro > div > div { .intro > div > div {
position: absolute; position: absolute;
top: -10px; top: -10px;
left: -10px; left: -10px;
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
border: 10px solid #ff4a4a; border: 10px solid transparent;
border-bottom-color: transparent; border-right-color: #ff4a4a;
border-top-color: transparent;
border-left-color: transparent;
animation: huxian 1s infinite linear; animation: huxian 1s infinite linear;
} }
@-webkit-keyframes huxian { .appointment {
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%; width: 100%;
height: 242px; height: 242px;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
.product-info .product-appointment p:nth-child(2) { .appointment p:nth-child(2) {
font-size: 18px; font-size: 18px;
color: #2d2f33; color: #2d2f33;
margin: 34px 0 24px; margin: 34px 0 24px;
padding-left: 20px; padding-left: 20px;
} }
.product-info .product-appointment form { .appointment form {
padding-left: 20px; padding-left: 20px;
} }
.product-info .product-appointment form input { .appointment form input {
outline: none; outline: none;
font-size: 14px; font-size: 14px;
color: #939393; color: #939393;
...@@ -202,61 +139,87 @@ ...@@ -202,61 +139,87 @@
border-radius: 10px; border-radius: 10px;
margin-right: 45px; margin-right: 45px;
} }
.product-info .product-appointment form #submit { .appointment form input[type="submit"] {
width: 86px;
padding: 0;
border: none; border: none;
font-size: 18px;
line-height: 48px; line-height: 48px;
width: 86px;
text-align: center; text-align: center;
color: #fff; color: #fff;
background: #ff4a4a; background: #ff4a4a;
font-size: 18px;
padding: 0;
} }
.product-info .product-appointment form #submit:hover { .appointment form input[type="submit"]:hover {
background: #ec3737; background: #ec3737;
} }
.product-info .product-appointment #errorName { .appointment form .errorName,
.appointment form .errorTel {
display: inline-block;
width: 246px; width: 246px;
height: 40px; height: 40px;
line-height: 40px; padding-left: 7px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
margin-left: 20px; margin-left: 20px;
}
.product-info .product-appointment #errorTel {
width: 246px;
height: 40px;
line-height: 40px; line-height: 40px;
font-size: 18px;
color: #ff4a4a; color: #ff4a4a;
padding-left: 14px; }
font-size: 17px; .appointment form .errorTel {
margin-left: 45px; margin-left: 45px;
} }
.product-info .product-detail { .detail {
width: 100%; width: 100%;
height: 1759px; padding-bottom: 150px;
} }
.product-info .product-detail table { .detail table {
font-size: 14px; width: 100%;
color: #000; color: #000;
border-spacing: 0; border-spacing: 0;
line-height: 24px;
}
.product-info .product-detail table .product-detail-key {
width: 140px;
} }
.product-info .product-detail table .product-detail-value { .detail table td {
width: 939px; padding: 25px 60px;
}
.product-info .product-detail table td {
padding: 26px 60px;
vertical-align: top; vertical-align: top;
} }
.product-info .product-detail table .bb { .detail table td {
border-bottom: 1px solid #939393; border-bottom: 1px solid #939393;
}
.product-info .product-detail table .br {
border-right: 1px solid #939393; 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*/ /*.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'; @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 start*/
.product-info {
margin: 0 auto 300px; .info-title {
.product-info-title {
margin: 26px 0; margin: 26px 0;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: relative; position: relative;
font-size: 28px; font-size: 28px;
color: #2d2f33; color: #2d2f33;
padding-left: 20px; padding-left: 10px;
b { border-left: 10px solid #2d2f33;
position: absolute; }
left: 0;
top: 0; @keyframes huxian {
display: inline-block; 0% {
width: 9px; transform: rotate(0deg)
height: 40px;
background: #2d2f33;
} }
100% {
transform: rotate(360deg)
} }
.product-intro { }
.intro {
position: relative; position: relative;
height: 408px;
border-bottom: 1px solid #aaa;
table { table {
text-align: center; text-align: center;
color: #3f3f3f; color: #3f3f3f;
border-spacing: 0; border-spacing: 0;
thead { thead th {
td {
width: 33.33%; width: 33.33%;
font-size: 22px; font-size: 22px;
line-height: 56px; line-height: 56px;
} font-weight: normal;
} }
tbody { tbody {
td { td {
text-align: center;
vertical-align: middle;
font-size: 18px; font-size: 18px;
line-height: 67px; line-height: 67px;
border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea;
a { a {
font-weight: bold; font-weight: 500;
color: #fff; color: #fff;
padding: 19px 13px; padding: 19px 13px;
margin-top: 43px;
background: #ff4a4a; background: #ff4a4a;
border-radius: 10px; border-radius: 10px;
} }
} &:nth-child(2) {
.profit {
color: #ff4a4a; color: #ff4a4a;
span { strong {
font-size: 36px; font-size: 36px;
} }
} }
.noborder { &:first-child {
border-right: none; border-left: 0;
}
} }
} }
tfoot { tfoot {
td { td {
line-height: 106px;
text-align: left;
padding-left: 100px; padding-left: 100px;
font-size: 18px; font-size: 18px;
p { line-height: 106px;
text-align: left;
.balance {
&:after {
content: '万 / '
}
}
.total {
&:after {
content: '万'
}
}
.progress-bar {
position: relative;
display: inline-block; display: inline-block;
width: 365px; width: 365px;
height: 13px; height: 13px;
border: 1px solid #ff4a4a;
margin-left: 42px; margin-left: 42px;
position: relative; border: 1px solid #ff4a4a;
i { i {
display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
display: inline-block;
opacity: 0;
height: 13px; height: 13px;
width:0;
background: #ff4a4a; background: #ff4a4a;
transition: width 1s;
} }
} }
} }
} }
} }
> div { & > div {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
...@@ -151,35 +116,21 @@ body { ...@@ -151,35 +116,21 @@ body {
font-size: 40px; font-size: 40px;
color: #000; color: #000;
} }
> div { & > div {
position: absolute; position: absolute;
top: -10px; top: -10px;
left: -10px; left: -10px;
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; border-radius: 50%;
border: 10px solid #ff4a4a; border: 10px solid transparent;
border-bottom-color: transparent; border-right-color: #ff4a4a;
border-top-color: transparent;
border-left-color: transparent;
animation: huxian 1s infinite linear; animation: huxian 1s infinite linear;
} }
} }
} }
@-webkit-keyframes huxian {
0% { .appointment {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.product-intro {
width: 100%;
height: 408px;
border-bottom: 1px solid #aaa;
}
.product-appointment {
width: 100%; width: 100%;
height: 242px; height: 242px;
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
...@@ -202,65 +153,88 @@ body { ...@@ -202,65 +153,88 @@ body {
border-radius: 10px; border-radius: 10px;
margin-right: 45px; margin-right: 45px;
} }
#submit { input[type="submit"] {
width: 86px;
padding: 0;
border: none; border: none;
font-size: 18px;
line-height: 48px; line-height: 48px;
width: 86px;
text-align: center; text-align: center;
color: #fff; color: #fff;
background: #ff4a4a; background: #ff4a4a;
font-size: 18px; &:hover {
padding: 0;
}
#submit:hover {
background: #ec3737; background: #ec3737;
} }
} }
#errorName { .errorName,.errorTel {
display: inline-block;
width: 246px; width: 246px;
height: 40px; height: 40px;
line-height: 40px; padding-left: 7px;
color: #ff4a4a;
padding-left: 14px;
font-size: 17px;
margin-left: 20px; margin-left: 20px;
}
#errorTel {
width: 246px;
height: 40px;
line-height: 40px; line-height: 40px;
font-size: 18px;
color: #ff4a4a; color: #ff4a4a;
padding-left: 14px; }
font-size: 17px; .errorTel {
margin-left: 45px; margin-left: 45px;
} }
} }
.product-detail {
}
.detail {
width: 100%; width: 100%;
height: 1759px; padding-bottom: 150px;
table { table {
font-size: 14px; width: 100%;
color: #000; color: #000;
border-spacing: 0; border-spacing: 0;
line-height: 24px;
.product-detail-key {
width: 140px;
}
.product-detail-value {
width: 939px;
}
td { td {
padding: 26px 60px; padding: 25px 60px;
vertical-align: top; vertical-align: top;
} }
.bb { td {
border-bottom: 1px solid #939393; border-bottom: 1px solid #939393;
}
.br {
border-right: 1px solid #939393; border-right: 1px solid #939393;
&:last-child {
border-right: 0;
}
} }
tr:last-child td {
border-bottom: 0;
} }
} }
} }
/*.product-info end*/ /*.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 { ...@@ -521,6 +521,29 @@ hr.line-separate:after {
color: #fff; color: #fff;
} }
/*footer end*/ /*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) { @media screen and (min-width: 769px) {
body #header .container { body #header .container {
width: 990px; width: 990px;
...@@ -528,6 +551,9 @@ hr.line-separate:after { ...@@ -528,6 +551,9 @@ hr.line-separate:after {
body #header .container nav { body #header .container nav {
padding-left: 247.5px; padding-left: 247.5px;
} }
body .banner .banner-box {
width: 990px;
}
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
body #header .container { body #header .container {
...@@ -536,6 +562,9 @@ hr.line-separate:after { ...@@ -536,6 +562,9 @@ hr.line-separate:after {
body #header .container nav { body #header .container nav {
padding-left: 287.5px; padding-left: 287.5px;
} }
body .banner .banner-box {
width: 1150px;
}
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
body #header .container { body #header .container {
...@@ -544,4 +573,7 @@ hr.line-separate:after { ...@@ -544,4 +573,7 @@ hr.line-separate:after {
body #header .container nav { body #header .container nav {
padding-left: 340px; padding-left: 340px;
} }
body .banner .banner-box {
width: 1360px;
}
} }
public/stylesheets/style.less
View file @ 5b2612e1
...@@ -126,6 +126,31 @@ hr.line-separate { ...@@ -126,6 +126,31 @@ hr.line-separate {
/*footer end*/ /*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() { .screen() {
.media(@screen-width-small, @container-width-small); .media(@screen-width-small, @container-width-small);
.media(@screen-width, @container-width); .media(@screen-width, @container-width);
...@@ -138,13 +163,18 @@ hr.line-separate { ...@@ -138,13 +163,18 @@ hr.line-separate {
} }
} }
.rules(@container-width) { .rules(@cw) {
#header { #header {
.container { .container {
width: @container-width; width: @cw;
nav { nav {
padding-left: @container-width / 4; padding-left: @cw / 4;
}
}
} }
.banner {
.banner-box {
width: @cw;
} }
} }
} }
......
views/product.hbs
View file @ 5b2612e1
...@@ -9,35 +9,40 @@ ...@@ -9,35 +9,40 @@
</p> </p>
</div> </div>
</div> </div>
<div class="product-info"> <div class="intro">
<div class="product-intro"> <h2 class="info-title">XX证券-贵州同仁证券</h2>
<h4 class="product-info-title"><b></b>XX证券-贵州同仁证券</h4>
<table> <table>
<thead> <thead>
<tr> <tr>
<td>认购金额</td> <th>认购金额</th>
<td>预期收益</td> <th>预期收益</th>
<td>返佣比例</td> <th>返佣比例</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>300万≤x<1000万</td> <td>300万≤x<1000万</td>
<td class="profit"><span>6.4</span>%</td> <td>
<td rowspan="2" class="noborder"> <strong>6.4</strong>%
</td>
<td rowspan="2">
<a href="">登录富豆APP可见</a> <a href="">登录富豆APP可见</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>1000万≤x</td> <td>1000万≤x</td>
<td class="profit"><span>6.2</span>%</td> <td>
<strong>6.2</strong>%
</td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td colspan="3"> <td colspan="3">
剩余额度：<span id="myBalance">200</span>万/<span id="total">2000</span>万 <span>剩余额度：</span>
<p id="progressBar"><i></i></p> <span class="balance">200</span>
<span class="total">2000</span>
<p class="progress-bar"><i></i></p>
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
...@@ -46,90 +51,101 @@ ...@@ -46,90 +51,101 @@
<div class="huxian"></div> <div class="huxian"></div>
<p>募集中</p> <p>募集中</p>
</div> </div>
</div> </div>
<div class="product-appointment"> <div class="appointment">
<h4 class="product-info-title"><b></b>在线预约</h4> <h2 class="info-title">在线预约</h2>
<p>留下联系方式我们帮您第一时间抢占稀缺额度</p> <p>留下联系方式我们帮您第一时间抢占稀缺额度</p>
<form id="form"> <form id="form">
<input type="text" name="userName" placeholder="请填写您的姓名" id="userName"/> <div>
<input type="text" name="userTel" placeholder="请填写手机号" id="userTel" maxlength="11"/> <input type="text" name="userName" placeholder="请填写您的姓名" />
<input type="submit" id="submit" value="提交"/> <input type="text" name="userTel" placeholder="请填写手机号" maxlength="11"/>
</form> <input type="submit" value="提交"/>
<p id="errorName" class="fl"></p> </div>
<p id="errorTel" class="fl"></p> <div>
<span class="errorName"></span>
<span class="errorTel" ></span>
</div> </div>
<div class="product-detail">
<h4 class="product-info-title"><b></b>产品详情</h4> </form>
</div>
<div class="detail">
<h2 class="info-title">产品详情</h2>
<table> <table>
<colgroup>
<col width="20%" />
<col width="80%" />
</colgroup>
<tbody> <tbody>
<tr> <tr>
<td class="product-detail-key bb br">产品名称</td> <td>产品名称</td>
<td class="product-detail-value bb">XX证券-贵州同仁证券</td> <td>XX证券-贵州同仁证券</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">产品类别</td> <td>产品类别</td>
<td class="bb">集合信托</td> <td >集合信托</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">产品状态</td> <td>产品状态</td>
<td class="bb">募集中</td> <td >募集中</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">剩余额度</td> <td>剩余额度</td>
<td class="bb">200万 / 2000万</td> <td >200万 / 2000万</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">投资门槛</td> <td>投资门槛</td>
<td class="bb">100万</td> <td >100万</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">投资期限</td> <td>投资期限</td>
<td class="bb">3+2年</td> <td >3+2年</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">投资领域</td> <td>投资领域</td>
<td class="bb">房地产类</td> <td >房地产类</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">付息方式</td> <td>付息方式</td>
<td class="bb">半年付息</td> <td >半年付息</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">融资方</td> <td>融资方</td>
<td class="bb">XXX公司</td> <td >XXX公司</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">担保方</td> <td>担保方</td>
<td class="bb">XXX公司</td> <td >XXX公司</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">募集时间</td> <td>募集时间</td>
<td class="bb">2016/06/24 12:22:22 — 2016/07/24 12:22:22</td> <td >2016/06/24 12:22:22 — 2016/07/24 12:22:22</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">资金用途</td> <td>资金用途</td>
<td class="bb"> <td >
本合同项下的信托资金将由受托人纳入信托计划资金的范围，由受托人以自己的名义集合管理运用和处分，坚持稳健投资原则下获取利益最大化的理念，按照风险的权重，主要通过投资股权、股权收益权等方式，将信托资金投向民生工程、能源等行业的优质企业及项目，资金闲置期间，也可以债权、可转债、投资信托受益权的方式运用信托资金，或以有限合伙人身份加入专门从事投资业务的有限合伙企业等方式间接投资、于优质企业及项目，或投资于其他低风险且收益稳定、风险可控的产品及项目，以期为受益人获得良好的投资 本合同项下的信托资金将由受托人纳入信托计划资金的范围，由受托人以自己的名义集合管理运用和处分，坚持稳健投资原则下获取利益最大化的理念，按照风险的权重，主要通过投资股权、股权收益权等方式，将信托资金投向民生工程、能源等行业的优质企业及项目，资金闲置期间，也可以债权、可转债、投资信托受益权的方式运用信托资金，或以有限合伙人身份加入专门从事投资业务的有限合伙企业等方式间接投资、于优质企业及项目，或投资于其他低风险且收益稳定、风险可控的产品及项目，以期为受益人获得良好的投资
收益。 收益。
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="bb br">还款来源</td> <td>还款来源</td>
<td class="bb">中融信托主动管理项目下的投资回报。</td> <td >中融信托主动管理项目下的投资回报。</td>
</tr> </tr>
<tr> <tr>
<td class="bb br">风控措施</td> <td>风控措施</td>
<td class="bb"> <td>
1、信托资金投向限制：本信托计划项下信托资金不得用于资金拆入、对外担保；不得将资金运用于房地产领域，不得直接投资于债券正回购、QDII产品（代理客户境外理财产品）黄金期货等商品期货、股指期权、股票期权等产品以及法律禁止投资的领域、对象；<br>2、流动性支持：次级受益人在其与受托人签署的《信托合同》项下同时承诺，在本信托计划存续期间，受托人认为信托财产专户内的现金资产不足以支付对应的支付日预计支付的信托费用、信托税费及预计应予分配的信托收益/信托利益金额或受托人调整信托计划项下优先级信托资金和次级信托资金比例的，次级受益人应以其自有资金随时追加认购次级信托单位 1、信托资金投向限制：本信托计划项下信托资金不得用于资金拆入、对外担保；不得将资金运用于房地产领域，不得直接投资于债券正回购、QDII产品（代理客户境外理财产品）黄金期货等商品期货、股指期权、股票期权等产品以及法律禁止投资的领域、对象；<br>2、流动性支持：次级受益人在其与受托人签署的《信托合同》项下同时承诺，在本信托计划存续期间，受托人认为信托财产专户内的现金资产不足以支付对应的支付日预计支付的信托费用、信托税费及预计应予分配的信托收益/信托利益金额或受托人调整信托计划项下优先级信托资金和次级信托资金比例的，次级受益人应以其自有资金随时追加认购次级信托单位
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="bb br">项目亮点</td> <td>项目亮点</td>
<td class="bb">1、（从法律层面）《信托法》明确规定，信托公司因主动管理不善导致信托亏损，信托公司要付全责。所以主动管理型项目在任何一类信托项目中，它的受重视程度是最高的；<br>2、（从实力背景层面）主动管理型项目的融资主体就是信托公司，股东都是央企、国企、地方政府或者大型金融机构，所以信托公司作为融资主体比一般的实体企业都更具实力，况且在目前信托刚性兑付的大背景下，信托公司帮其他融资主体融的资金，在融资方不能按期兑付投资者本息的情况下，都是信托公司以自有资金垫付，然后再通过风控措施去处置抵押或者是质押物，而自主管理型信托融资主体是信托公司本身，信托项目到期信托公司更应该按时兑付投资者的本息，所以信托公司自主管理型项目是目前最安全的类型； <td >1、（从法律层面）《信托法》明确规定，信托公司因主动管理不善导致信托亏损，信托公司要付全责。所以主动管理型项目在任何一类信托项目中，它的受重视程度是最高的；<br>2、（从实力背景层面）主动管理型项目的融资主体就是信托公司，股东都是央企、国企、地方政府或者大型金融机构，所以信托公司作为融资主体比一般的实体企业都更具实力，况且在目前信托刚性兑付的大背景下，信托公司帮其他融资主体融的资金，在融资方不能按期兑付投资者本息的情况下，都是信托公司以自有资金垫付，然后再通过风控措施去处置抵押或者是质押物，而自主管理型信托融资主体是信托公司本身，信托项目到期信托公司更应该按时兑付投资者的本息，所以信托公司自主管理型项目是目前最安全的类型；
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="br">募集账号</td> <td>募集账号</td>
<td> <td>
<p>账户名：中融国际信托有限公司</p> <p>账户名：中融国际信托有限公司</p>
<p>账号：【1003 4702 7350 010035】</p> <p>账号：【1003 4702 7350 010035】</p>
...@@ -139,5 +155,4 @@ ...@@ -139,5 +155,4 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
\ 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