Skip to content

S
statichtml
Commit 9c3b6912 authored by liaili's avatar liaili
Browse files
Options

updata-arrowAnimation-9-11-01

parent 4ec759a2
Show whitespace changes
Inline Side-by-side
Showing with 1801 additions and 759 deletions
.idea/watcherTasks.xml
View file @ 9c3b6912
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="Less;Babel"> <component name="ProjectTasksOptions" suppressed-tasks="Less;Babel;SCSS">
<TaskOptions isEnabled="false"> <TaskOptions isEnabled="false">
<option name="arguments" value="--no-color $FileName$" /> <option name="arguments" value="--no-color $FileName$" />
<option name="checkSyntaxErrors" value="true" /> <option name="checkSyntaxErrors" value="true" />
...@@ -26,5 +26,24 @@ ...@@ -26,5 +26,24 @@
<option name="workingDir" value="$FileDir$" /> <option name="workingDir" value="$FileDir$" />
<envs /> <envs />
</TaskOptions> </TaskOptions>
<TaskOptions isEnabled="true">
<option name="arguments" value="--source-maps --out-file $FileNameWithoutExtension$-compiled.js --presets es2015 $FilePath$" />
<option name="checkSyntaxErrors" value="true" />
<option name="description" value="Transpiles ECMAScript 6 code to ECMAScript 5" />
<option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="jsx" />
<option name="immediateSync" value="true" />
<option name="name" value="Babel" />
<option name="output" value="$FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$-compiled.js.map" />
<option name="outputFilters">
<array />
</option>
<option name="outputFromStdout" value="false" />
<option name="program" value="/usr/local/bin/babel" />
<option name="scopeName" value="Project Files" />
<option name="trackOnlyRoot" value="true" />
<option name="workingDir" value="$FileDir$" />
<envs />
</TaskOptions>
</component> </component>
</project> </project>
\ No newline at end of file
.idea/workspace.xml
View file @ 9c3b6912
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 9c3b6912
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"es3ify-loader": "^0.2.0", "es3ify-loader": "^0.2.0",
"history": "^2.0.1", "history": "^2.0.1",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"j": "^0.4.3",
"jquery": "^2.1.4", "jquery": "^2.1.4",
"js-cookie": "^2.1.1", "js-cookie": "^2.1.1",
"react": "^15.0.2", "react": "^15.0.2",
...@@ -20,16 +21,17 @@ ...@@ -20,16 +21,17 @@
"devDependencies": { "devDependencies": {
"atool-test-mocha": "^0.1.4", "atool-test-mocha": "^0.1.4",
"babel-eslint": "^6.0.0", "babel-eslint": "^6.0.0",
"babel-preset-es2015": "^6.13.2",
"dora": "0.3.x", "dora": "0.3.x",
"dora-plugin-browser-history": "^0.1.1", "dora-plugin-browser-history": "^0.1.1",
"dora-plugin-hmr": "0.6.x", "dora-plugin-hmr": "0.6.x",
"dora-plugin-livereload": "0.3.x", "dora-plugin-livereload": "0.3.x",
"dora-plugin-proxy": "0.6.x", "dora-plugin-proxy": "0.6.x",
"dora-plugin-webpack": "0.6.x", "dora-plugin-webpack": "0.6.x",
"expect": "^1.20.1",
"eslint": "^2.7.0", "eslint": "^2.7.0",
"eslint-config-airbnb": "6.x", "eslint-config-airbnb": "6.x",
"eslint-plugin-react": "4.x", "eslint-plugin-react": "4.x",
"expect": "^1.20.1",
"glob": "^7.0.3", "glob": "^7.0.3",
"pre-commit": "1.x" "pre-commit": "1.x"
}, },
......
proxy.config.js
View file @ 9c3b6912
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
// - https://github.com/dora-js/dora-plugin-proxy#规则定义 // - https://github.com/dora-js/dora-plugin-proxy#规则定义
module.exports = { module.exports = {
'/api/todos': function(req, res) { '/api/todos': function (req, res) {
setTimeout(function() { setTimeout(function () {
res.json({ res.json({
success: true, success: true,
data: [ data: [
...@@ -24,4 +24,5 @@ module.exports = { ...@@ -24,4 +24,5 @@ module.exports = {
}); });
}, 500); }, 500);
}, },
'/api/*': 'http://m.yanky.cn/api/'
}; };
src/entries/certification-process.html
View file @ 9c3b6912
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./certification-process.css"/> <link rel="stylesheet" type="text/css" href="./certification-process.css"/>
<title>Title</title> <title>引导认证</title>
</head> </head>
<body> <body>
<section> <section>
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
<img src="https://res.fudou6.com/c/4/20160805/2jycGFnZS0wM18wMw==_660x1173.png" alt=""> <img src="https://res.fudou6.com/c/4/20160805/2jycGFnZS0wM18wMw==_660x1173.png" alt="">
</div> </div>
</section> </section>
<a href="" class="loading-app">点击下载富豆优投APP</a> <a href="#" class="loading-app">点击下载富豆优投APP</a>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="certification-process.js"></script> <script src="./certification-process.js"></script>
</body> </body>
</html> </html>
src/entries/certification-process.js
View file @ 9c3b6912
...@@ -3,3 +3,23 @@ ...@@ -3,3 +3,23 @@
*/ */
import './certification-process.html'; import './certification-process.html';
import './certification-process.less'; import './certification-process.less';
import $ from 'jquery';
(function(){
const $loadingApp = $('.loading-app');
/*判断安卓和IOS start*/
function judgePhoneSystem($loadingApp) {
let ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
$loadingApp.attr('href', 'https://itunes.apple.com/cn/app/fu-dou-you-tou/id1125652968?mt=8')
} else if (/android/.test(ua)) {
$loadingApp.attr('href', 'http://android.myapp.com/myapp/detail.htm?apkName=com.fudou6.app')
}
}
/*判断安卓和IOS end*/
$loadingApp.on('click',()=>{
judgePhoneSystem($loadingApp);
})
})();
src/entries/certification-process.less
View file @ 9c3b6912
...@@ -12,36 +12,26 @@ ...@@ -12,36 +12,26 @@
padding-bottom: 50px; padding-bottom: 50px;
header { header {
padding:80px 20px 80px 180px; padding:80px 20px 80px 180px;
background: #353950 url(https://res.fudou6.com/c/4/20160805/rggYmFubmVyXzAz_264x237.png)no-repeat 30px center;
background-size: 132px 118px;
font-size: 16px;
line-height: 28px; line-height: 28px;
color: #fefefe;
span {
width: 50%;
display: block;
position: absolute;
right: 20px;
top:2rem;
font-size: 16px; font-size: 16px;
line-height: 28px;
color: #fefefe; color: #fefefe;
} background: #353950 url(https://res.fudou6.com/c/4/20160805/rggYmFubmVyXzAz_264x237.png)no-repeat 30px center;
background-size: 132px 118px;
} }
.certification-process { .certification-process {
padding: 20px 54px ; padding: 20px 54px ;
h4 { h4 {
margin: 0; margin: 0;
font-size: 20px;
color: #000; color: #000;
font-size: 20px;
} }
p { p {
padding: 10px 0; padding: 10px 0;
font-size: 14px; font-size: 14px;
} }
img { img {
max-width: 100%;
margin: 0 auto; margin: 0 auto;
max-width: 100%;
} }
} }
} }
...@@ -58,10 +48,10 @@ ...@@ -58,10 +48,10 @@
} }
@media screen and (min-width: 1023px) { @media screen and (min-width: 1023px) {
.loading-app { .loading-app {
position: static; margin: 0 auto 20px;
position: inherit;
display: block; display: block;
width: 660px; width: 660px;
margin: 0 auto 20px;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border-radius: 4px; border-radius: 4px;
......
src/entries/index.html
View file @ 9c3b6912
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>$Title$</title> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<link rel="stylesheet" type="text/css" href="./index.css"/>
<title>Title</title>
</head> </head>
<body> <body>
$END$ <div id="app"></div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body> </body>
</html> </html>
src/entries/index.js
View file @ 9c3b6912
/** /**
* Created by liaili on 16/8/8. * Created by liaili on 16/8/8.
*/ */
import './index.html';
import './index.less';
import React from 'react';
import { ReactDOM } from 'react-dom';
const About = React.createClass({
render: ()=> {
return <h2>About</h2>
}
});
const Inbox = React.createClass({
render: ()=> {
return <h2>Inbox</h2>
}
});
const Home = React.createClass({
render: ()=> {
return <h2>Home</h2>
}
});
const App = React.createClass({
render:function(){
return (
<section>
<header>
<ul>
<li><Link to="/app">Dashboard</Link></li>
<li><Link to="/Inbox">Inbox</Link></li>
<li><Link to="/Calendar">Calendar</Link></li>
</ul>
</header>
Loggend in as Jane
<RouteHandler/>
</section>
)
}
});
ReactDOM.render((
<Route name="app" path="/" handler={app}>
<Route name="inbox" handler={Inbox}/>
<Route name="calendar" handler={Calendar}/>
<DefaultRoute handler={Dashboard}/>
</Route>
),document.getElementById('app'));
src/entries/index.less
View file @ 9c3b6912
@import 'normalize.less';
:global {
}
src/entries/navitation-friend.html
View file @ 9c3b6912
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<article> <article>
1、点击页面右上角“ ● ● ● ” 1、点击页面右上角“ ● ● ● ”
<br/> <br/>
2、选择“<span>发送给朋友</span>“或”<span>分享到朋友圈</span>”, 邀请好友入驻富豆优投。 2、选择“<a href="javascript:;">发送给朋友</a>“或”<a href="javascript:;">分享到朋友圈</a>”, 邀请好友入驻富豆优投。
</article> </article>
</body> </body>
<script src="./common.js"></script> <script src="./common.js"></script>
......
src/entries/navitation-record.html
View file @ 9c3b6912
...@@ -4,20 +4,27 @@ ...@@ -4,20 +4,27 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title> <title>邀请排行榜</title>
<link rel="stylesheet" type="text/css" href="./navitation-record.css"/> <link rel="stylesheet" type="text/css" href="./navitation-record.css"/>
</head> </head>
<body> <body>
<section> <section>
<div class="navitation"> <header>
<h1>尊敬的维基，您好!</h1> <h1>尊敬的维基，您好!</h1>
<div class="navitation-amount"> <div class="navitation-amount">
<span>邀请人数：10人</span> <span>邀请人数：10人</span>
<span>绑定成功：2人</span> <span>绑定成功：2人</span>
</div> </div>
</div> </header>
<div class="user-list"> <div class="user-list">
<table> <table>
<colgroup>
<col width="10%">
<col width="30%">
<col width="20%">
<col width="20%">
<col width="10%">
</colgroup>
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
...@@ -28,45 +35,45 @@ ...@@ -28,45 +35,45 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr class="status-1">
<td>01.</td> <td>01.</td>
<td>18766773541</td> <td>18766773541</td>
<td class="success-red">抢到了</td> <td>抢到了</td>
<td>已成单</td> <td>已成单</td>
<td><a href="">&gt;</a></td> <td><a href="">&gt;</a></td>
</tr> </tr>
<tr> <tr class="status-1">
<td>02.</td> <td>02.</td>
<td>18766773541</td> <td>18766773541</td>
<td class="success-red">抢到了</td> <td>抢到了</td>
<td>已成单</td> <td>已成单</td>
<td><a href="">&gt;</a></td> <td><a href="">&gt;</a></td>
</tr> </tr>
<tr> <tr class="status-2">
<td>03.</td> <td>03.</td>
<td>18766773541</td> <td>18766773541</td>
<td>未绑定</td> <td>未绑定</td>
<td>已成单</td> <td>已成单</td>
<td><a href="">&gt;</a></td> <td><a href="">&gt;</a></td>
</tr> </tr>
<tr> <tr class="status-3">
<td>04.</td> <td>04.</td>
<td>18766773541</td> <td>18766773541</td>
<td class="lose-green">被抢了</td> <td>被抢了</td>
<td>未成单</td> <td>未成单</td>
<td><a href=""></a></td> <td><a href="">&gt;</a></td>
</tr> </tr>
<tr> <tr class="status-3">
<td>05.</td> <td>05.</td>
<td>18766773541</td> <td>18766773541</td>
<td class="lose-green">被抢了</td> <td>被抢了</td>
<td>已成单</td> <td>已成单</td>
<td><a href=""></a></td> <td><a href="">&gt;</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="explain"> <article>
<h3></h3> <h3></h3>
<h5>绑定状态释义如下：</h5> <h5>绑定状态释义如下：</h5>
<p> <p>
...@@ -74,7 +81,7 @@ ...@@ -74,7 +81,7 @@
-未绑定：被邀请用户未下载注册富豆优投APP或注册时未填写邀请码；<br/> -未绑定：被邀请用户未下载注册富豆优投APP或注册时未填写邀请码；<br/>
-被抢了：被邀请用户下载注册富豆优投APP时使用了其它邀请码。 -被抢了：被邀请用户下载注册富豆优投APP时使用了其它邀请码。
</p> </p>
</div> </article>
</section> </section>
<a href="javascript:;" class="navitation-friend">邀请好友入驻</a> <a href="javascript:;" class="navitation-friend">邀请好友入驻</a>
</body> </body>
......
src/entries/navitation-record.js
View file @ 9c3b6912
...@@ -3,5 +3,35 @@ ...@@ -3,5 +3,35 @@
*/ */
import './navitation-record.html'; import './navitation-record.html';
import './navitation-record.less'; import './navitation-record.less';
// import './normalize.less'; import $ from 'jquery';
function request(url, data, method = 'GET') {
let promise = $.Deferred();
$.ajax(url, {
type: method,
dataType: 'json',
data,
success: res=> {
if (res && res.status == 1) {
promise.resolve(res.result);
} else {
promise.reject({
code: res && res.code || 0,
message: res && res.msg || res.message || '系统错误,请稍后再试!'
});
}
},
error: (xhr, status, text)=> {
console.log(xhr, status, text);
promise.reject({
code: xhr && xhr.status || status,
message: text
});
}
});
return promise;
}
src/entries/navitation-record.less
View file @ 9c3b6912
...@@ -3,32 +3,31 @@ ...@@ -3,32 +3,31 @@
section{ section{
max-width: 768px; max-width: 768px;
margin: 0 auto 60px; margin: 0 auto 60px;
.navitation { header {
background: #353950 url(https://res.fudou6.com/c/4/20160804/udmYmctMDFfMDM=_749x66.png)no-repeat center bottom;
padding:30px 0 60px; padding:30px 0 60px;
background: #353950 url(https://res.fudou6.com/c/4/20160804/udmYmctMDFfMDM=_749x66.png)no-repeat center bottom;
h1 { h1 {
font-size: 18px;
margin-bottom: 16px; margin-bottom: 16px;
text-align: center; text-align: center;
font-size: 18px;
color: #fff; color: #fff;
} }
.navitation-amount { .navitation-amount {
width: 250px;
margin: 0 auto; margin: 0 auto;
width: 250px;
&:after { &:after {
content:''; content:'';
display: block; display: block;
clear: both; clear: both;
} }
span { span {
float: left;
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
background: #494d68; background: #494d68;
color: #fff; color: #fff;
float: left;
&:last-child { &:last-child {
float: right; float: right;
} }
...@@ -44,26 +43,9 @@ ...@@ -44,26 +43,9 @@
border-collapse: collapse; border-collapse: collapse;
thead tr { thead tr {
border-bottom: 1px solid #969696; border-bottom: 1px solid #969696;
color: #222228;
font-size: 14px; font-size: 14px;
th { th {
padding: 10px 0; padding: 10px 0;
&:nth-child(1) {
width: 10%;
}
&:nth-child(2) {
width: 30%;
}
&:nth-child(3) {
width: 20%;
}
&:nth-child(4) {
width: 20%;
}
&:nth-child(5) {
width: 10%;
}
} }
} }
tbody tr { tbody tr {
...@@ -84,16 +66,27 @@ ...@@ -84,16 +66,27 @@
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
/* 1-成功 2-未绑定 3-被抢*/
.rule(@index,@color,@display){
&.status-@{index} {
& > td:nth-child(3) {
color: @color;
}
& > td:last-child {
a {
display: @display;
}
} }
.success-red {
color: #ff494b;
} }
.lose-green {
color: #66d03c;
} }
.rule(1,#ff494b,inline-block);
.rule(3,#66d03c,none);
.rule(2,#222228,inline-block);
}
} }
} }
.explain { article {
padding:10px 20px; padding:10px 20px;
color: #969696; color: #969696;
font-size: 14px; font-size: 14px;
...@@ -103,24 +96,22 @@ ...@@ -103,24 +96,22 @@
position: relative; position: relative;
&:before { &:before {
content: ''; content: '';
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid #969696;
position: absolute; position: absolute;
top:9px; top:9px;
left:0; width: 100%;
height: 0;
z-index: -2; z-index: -2;
border-bottom: 1px solid #969696;
} }
&:after { &:after {
content: '说明'; content: '说明';
display: block; margin-left: -30px;
padding: 6px 10px; padding: 6px 10px;
background: #fff;
position: absolute; position: absolute;
top:-5px; top:-5px;
left:40%; left:50%;
z-index: -1; z-index: -1;
background: #fff;
font-size: 18px; font-size: 18px;
} }
} }
...@@ -134,15 +125,15 @@ ...@@ -134,15 +125,15 @@
} }
} }
.navitation-friend { .navitation-friend {
width: 100%;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%;
padding:16px 0; padding:16px 0;
color: #fff;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
background: #ff494b; background: #ff494b;
color: #fff;
text-decoration: none; text-decoration: none;
} }
@media screen and (min-width: 1023px) { @media screen and (min-width: 1023px) {
...@@ -161,6 +152,8 @@ ...@@ -161,6 +152,8 @@
text-decoration: none; text-decoration: none;
} }
} }
} }
src/entries/navitation.html
View file @ 9c3b6912
...@@ -2,9 +2,34 @@ ...@@ -2,9 +2,34 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>$Title$</title> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./navitation.css"/>
<title>邀请</title>
</head> </head>
<body> <body>
$END$ <section>
<header>
<img src="https://res.fudou6.com/c/4/20160809/xe5aGVhZGVyXzAy_768x806.jpg" alt="logo">
</header>
<div class="loading-app">
<input type="text" id="mobile" placeholder="输入您的手机号码" maxlength="11" value=""/> <br>
<a class='loading' href="#">立刻下载 成为富豆首批用户</a>
*使用#超超弟弟#B346573#347588#
</div>
<div class="advantage">
<img src="https://res.fudou6.com/c/4/20160809/8ruYmdfMDI=_768x2558.jpg" alt="公司特点">
</div>
<div class="modal-box">
<div class="modal-dailog">
<h1>温馨提示</h1>
<p></p>
<a href="javascript:;">确认</a>
</div>
</div>
</section>
<script src="./common.js"></script>
<script src="./navitation.js"></script>
</body> </body>
</html> </html>
src/entries/navitation.js
View file @ 9c3b6912
/** /**
* Created by liaili on 16/8/9. * Created by liaili on 16/8/9.
*/ */
import './navitation.html';
import './navitation.less';
// import $ from 'jquery';
var $ = require("jquery");
(function () {
const $loading = $('.loading');
const $modalBox = $('.modal-box');
const $modalBoxContent = $('p',$modalBox);
const $modalBoxHidden = $('a', $modalBox);
const $mobile = $('#mobile');
/*手机号验证 start*/
const filterMobileInput = ($mobile)=> {
$mobile.val($mobile.val().replace(/[^\d]/g, ''));
};
const validataMobile = ()=> {
if ( /^\d{11}$/g.test( $.trim( $mobile.val() ) ) ) {
return mobile;
} else {
return false;
}
};
/*号码传到数据库 start*/
function request(url, data, method = 'GET') {
let promise = $.Deferred();
$.ajax(url, {
type: method,
dataType: 'json',
data,
success: res=> {
if (res && res.status == 1) {
promise.resolve(res.result);
} else {
promise.reject({
code: res && res.code || 0,
message: res && res.msg || res.message || '系统错误,请稍后再试!'
});
}
},
error: (xhr, status, text)=> {
console.log(xhr, status, text);
promise.reject({
code: xhr && xhr.status || status,
message: text
});
}
});
return promise;
}
/*号码传到数据库 end*/
$mobile.on('keyup', (()=> {
filterMobileInput($mobile);
}));
/*手机号验证 end*/
/*错误提示框消逝 start*/
$modalBoxHidden.on('click', ()=> {
$modalBox.fadeOut(500);
});
/*错误提示框消逝 end*/
/*判断安卓和IOS start*/
function judgePhoneSystem($loading) {
let ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
$loading.attr('href', 'https://itunes.apple.com/cn/app/fu-dou-you-tou/id1125652968?mt=8')
} else if (/android/.test(ua)) {
$loading.attr('href', 'http://android.myapp.com/myapp/detail.htm?apkName=com.fudou6.app')
}
}
/*判断安卓和IOS end*/
/*弹框提示内容 start*/
function modalBoxContent(content){
$modalBoxContent.html(content);
}
/*弹框提示内容 end*/
$loading.on('click', ()=> {
let validataInput = validataMobile();
let mobile = $mobile.val();
if(validataInput){
request('/api/1.0/proj/add.json', mobile, 'POST').done(()=> {
judgePhoneSystem($loading);
}).fail(()=> {
$modalBoxContent.html('提交失败, 请稍后再试!');
$modalBox.fadeIn(500);
});
}else {
$modalBoxContent.html('请检查手机号码!');
$modalBox.fadeIn(500);
}
$mobile.val('');
});
})();
src/entries/navitation.less
View file @ 9c3b6912
@import 'normalize.less';
:global {
a {
text-decoration: none;
}
@loading-app-color:#888;
section {
max-width: 768px;
margin: 0 auto;
font-size: 14px;
img {
max-width: 100%;
margin: auto;
}
.loading-app {
padding: 50px 30px 20px 30px;
color: @loading-app-color;
#mobile {
width: 100%;
padding: 16px ;
border: 1px solid @loading-app-color;
outline: none;
font-size: 18px;
border-radius: 4px;
}
a {
display: block;
margin: 20px 0;
padding: 16px 0;
text-align: center;
background: #ff4a4b;
font-size: 20px;
color: #fff;
border-radius: 4px;
}
}
.modal-box {
display: none;
position: fixed;
top:0;
left:0;
right:0;
bottom: 0;
background: rgba(0,0,0,.3);
.modal-dailog {
position: fixed;
top:200px;
left:50%;
margin-left: -150px;
width: 300px;
padding: 20px;
text-align: center;
background: #fff;
color: #666;
border-radius: 6px;
& > h1{
padding: 10px 0;
font-size: 16px;
border-bottom: 1px solid #e6e7e8;
}
& > a {
margin-top: 20px;
display: inline-block;
padding: 10px 24px;
font-size: 14px;
background: #a7e6f4;
color: #fff;
border-radius: 6px;
}
}
}
}
}
src/entries/normalize.less
View file @ 9c3b6912
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
*/ */
html { html {
font-family: sans-serif; /* 1 */ font-family: "PingFang SC","Microsoft YaHei","Arial","黑体","tsans-serif" ; /* 1 */
font-weight: 300;
-ms-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
} }
...@@ -364,9 +365,7 @@ textarea { ...@@ -364,9 +365,7 @@ textarea {
* 1. Add the correct box sizing in IE 10-. * 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-. * 2. Remove the padding in IE 10-.
*/ */
*{
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */ padding: 0; /* 2 */
} }
......
src/entries/notice.html
View file @ 9c3b6912
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./index.css"/> <link rel="stylesheet" type="text/css" href="./notice.css"/>
<title>产品公告</title>
</head> </head>
<body> <body>
<article> <article>
...@@ -30,5 +31,5 @@ ...@@ -30,5 +31,5 @@
</article> </article>
</body> </body>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./index.js"></script> <script src="notice.js"></script>
</html> </html>
src/entries/notice.js
View file @ 9c3b6912
import './index.html'; import './notice.html';
import './index.less'; import './notice.less';
src/entries/product-infos01.html
View file @ 9c3b6912
...@@ -4,61 +4,65 @@ ...@@ -4,61 +4,65 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./product-infos.css"/> <link rel="stylesheet" type="text/css" href="./product-infos01.css"/>
<title>项目详情-基本要素</title> <title>项目详情-基本要素</title>
</head> </head>
<body> <body>
<section> <section class="main">
<header> <header>
<a href="">基本要素</a> <a href="" class="active">基本要素</a>
<a href="">费率收益</a> <a href="">费率收益</a>
<a href="">相关材料</a> <a href="">相关材料</a>
<a href="" class="active">募集账户</a> <a href="">募集账户</a>
</header> </header>
<div> <section class="key-infos">
<table> <!-- 暂无基本要素信息 -->
<colgroup> <p>* 暂无基本要素信息</p>
<col width="40%">
<col width="60%"> <!-- 有基本要素信息 -->
</colgroup> <!--<table>-->
<tbody> <!--<colgroup>-->
<tr> <!--<col width="22%">-->
<td> <!--<col width="78%">-->
开户名: <!--</colgroup>-->
</td> <!--<tbody>-->
<td> <!--<tr>-->
嘉兴惠博投资管理有限公司 <!--<th>总规模:</th>-->
</td> <!--<td>2亿</td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td> <!--<th>结算模式:</th>-->
募集银行: <!--<td>半年付息</td>-->
</td> <!--</tr>-->
<td> <!--<tr>-->
中信银行北京万达广场支行 <!--<th>认购起点:</th>-->
</td> <!--<td>100万起</td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td> <!--<th>发行方:</th>-->
募集账号: <!--<td>XX信托有限公司</td>-->
</td> <!--</tr>-->
<td> <!--<tr>-->
8888 8888 8888 8888 888 <!--<th>资金用途:</th>-->
</td> <!--<td>贵州生遵义市余庆县傲溪镇至关心镇道路工程建设</td>-->
</tr> <!--</tr>-->
<tr> <!--<tr>-->
<td> <!--<th>融资主体:</th>-->
大款备注: <!--<td>余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。</td>-->
</td> <!--</tr>-->
<td> <!--<tr>-->
请务必从您本人的银行账户转出账款,并在汇款备注中注明"吴超认购华服创银9号" <!--<th>担保主体:</th>-->
</td> <!--<td>余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。</td>-->
</tr> <!--</tr>-->
</tbody> <!--<tr>-->
</table> <!--<th>亮点风投:</th>-->
</div> <!--<td>土地抵押低余50%,海纳公司提供评估总价为4.17亿的出土地抵押,并在余庆县国土局办理抵押登记。</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
</section>
</section> </section>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./product-infos.js"></script> <script src="product-infos01.js"></script>
</body> </body>
</html> </html>
src/entries/product-infos01.js
View file @ 9c3b6912
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
* Created by liaili on 16/8/15. * Created by liaili on 16/8/15.
*/ */
import './product-infos01.html'; import './product-infos01.html';
import './product-infos02.less'; import './product-infos01.less';
src/entries/product-infos01.less
View file @ 9c3b6912
...@@ -2,12 +2,13 @@ ...@@ -2,12 +2,13 @@
:global { :global {
body { body {
background: #151f2c; background: #151f2c;
font-weight: lighter;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
section { .main {
color: #fff; color: #fff;
header { header {
background: #282d3a; background: #282d3a;
...@@ -20,7 +21,7 @@ ...@@ -20,7 +21,7 @@
text-align: center; text-align: center;
height: 100%; height: 100%;
line-height: 56px; line-height: 56px;
font-size: 16px; font-size: 14px;
&:after { &:after {
content: ''; content: '';
width:0; width:0;
...@@ -34,7 +35,7 @@ ...@@ -34,7 +35,7 @@
border-color:transparent transparent transparent;/*灰 透明 透明*/ border-color:transparent transparent transparent;/*灰 透明 透明*/
} }
&.active { &.active {
font-size: 20px; font-size: 18px;
color: #b63e43; color: #b63e43;
&:after { &:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/ border-color:#282d3a transparent transparent;/*灰 透明 透明*/
...@@ -42,9 +43,14 @@ ...@@ -42,9 +43,14 @@
} }
} }
} }
/*partials01 start*/ .key-infos {
article.partials01 {
margin-top: 18px; margin-top: 18px;
& > p {
text-align: center;
font-size: 14px;
color: #84868a;
}
table {
padding: 20px; padding: 20px;
background: #282d3a; background: #282d3a;
font-size: 14px; font-size: 14px;
...@@ -54,17 +60,14 @@ ...@@ -54,17 +60,14 @@
color: #85868a; color: #85868a;
font-weight: normal; font-weight: normal;
vertical-align: top; vertical-align: top;
text-align: left; text-align: right;
} }
td { td {
padding: 10px 6px; padding: 10px 6px;
color: #e0e0e1; color: #e0e0e1;
} }
} }
/*partials01 end*/
/* partials02 start*/
/* partials02 end*/ }
} }
} }
src/entries/product-infos02.html
View file @ 9c3b6912
...@@ -4,22 +4,26 @@ ...@@ -4,22 +4,26 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./product-info02.css"/> <link rel="stylesheet" href="./product-infos02.css"/>
<title>Title</title> <title>项目详情-募集账户</title>
</head> </head>
<body> <body>
<section> <section class="main">
<header> <header>
<a href="" class="active">基本要素</a> <a href="">基本要素</a>
<a href="">费率收益</a> <a href="">费率收益</a>
<a href="">相关材料</a> <a href="">相关材料</a>
<a href="">募集账户</a> <a href="" class="active">募集账户</a>
</header> </header>
<div> <div>
<!-- 没有募集账户信息 -->
<!--<p>* 暂无募集账户信息</p>-->
<!-- 有募集账户信息 -->
<table> <table>
<colgroup> <colgroup>
<col width="40%"> <col width="35%">
<col width="60%"> <col width="65%">
</colgroup> </colgroup>
<tbody> <tbody>
<tr> <tr>
...@@ -43,6 +47,6 @@ ...@@ -43,6 +47,6 @@
</div> </div>
</section> </section>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./product-info02.js"></script> <script src="./product-infos02.js"></script>
</body> </body>
</html> </html>
src/entries/product-infos02.less
View file @ 9c3b6912
@import 'normalize.less';
:global {
body {
background: #151f2c;
font-weight: lighter;
}
a {
text-decoration: none;
color: #fff;
}
.main {
color: #fff;
header {
height: 56px;
background: #282d3a;
a {
position: relative;
display: block;
float: left;
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
&:after {
content: '';
width:0;
height:0;
margin-left: -10px;
position:absolute;
left: 50%;
bottom: -10px;
border-width:10px 10px 0;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
}
&.active {
font-size: 18px;
color: #b63e43;
&:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/
}
}
}
}
& > div {
margin-top: 10px;
& > p {
color: #84868a;
font-size: 14px;
text-align: center;
}
& > table {
padding: 30px;
background: #282d3a;
td {
padding: 20px 0;
font-size: 14px;
vertical-align: top;
text-align: justify;
&:nth-child(odd){
padding-right: 20px;
text-align: right;
background: url(https://res.fudou6.com/c/4/20160815/w92aWNvbg==_36x294.png)no-repeat;
background-size:26px;
font-weight: normal;
}
}
tr:nth-child(1){
td {
background-position: 0 16px;
}
}
tr:nth-child(2){
td {
background-position: 0 -46px;
}
}
tr:nth-child(3){
td {
background-position: 0 -110px;
}
}
tr:nth-child(4){
td {
background-position: 0 -174px;
}
}
}
}
}
}
src/entries/product-infos03.html
View file @ 9c3b6912
...@@ -2,9 +2,118 @@ ...@@ -2,9 +2,118 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>$Title$</title> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./product-infos03.css"/>
<title>项目详情-费率收益</title>
</head> </head>
<body> <body>
$END$ <section class="main">
<header>
<a href="">基本要素</a>
<a href="" class="active">费率收益</a>
<a href="">相关材料</a>
<a href="">募集账户</a>
</header>
<section class="commission-list">
<!-- 没有费率收益数据 -->
<!--<p>* 暂无费率收益信息</p>-->
<!-- 有费率收益数据 -->
<div>
<table>
<colgroup>
<col width="33.33%">
<col width="33.33%">
<col width="33.33%">
</colgroup>
<!-- 状态为募集中,展示 认购金额 参考收益 佣金比率 -->
<!-- 状态不为募集中,展示 认购金额 参考收益 -->
<thead>
<tr>
<th>认购金额</th>
<th>参考收益</th>
<!--<th>佣金比率</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>100万</td>
<td>8%</td>
<!--<td>3%</td>-->
</tr>
<tr>
<td>100-300万</td>
<td>9%</td>
<!--<td>2%</td>-->
</tr>
<tr>
<td>300万以上</td>
<td>10%</td>
<!--<td>1%</td>-->
</tr>
</tbody>
</table>
<h1>结佣方式:打款结佣</h1>
</div>
</section>
<div class="tips">
<p></p>
<table>
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<tbody>
<tr>
<td>政策风险:</td>
<td>
国家或地方相关政策如货币政策、财政政策、税收政
策、产业政策、投资政策及相关配套法规的调整与变
化，可能会影响基金项下证券投资的收益水平。
</td>
</tr>
<tr>
<td>市场风险:</td>
<td>
本基金项下的基金资金主要用于证券投资，因证券市
场受经济周期、上市公司经营情况、市场竞争环境等
相关因素影响，价格波动较大，因此证券投资存在较
大市场风险，本基金项下的基金资金存在亏损甚至基
金本金全部亏损的可能。
</td>
</tr>
<tr>
<td>管理风险:</td>
<td>
本基金项下的基金资金主要用于证券投资，因证券市
场受经济周期、上市公司经营情况、市场竞争环境等
相关因素影响，价格波动较大，因此证券投资存在较
大市场风险，本基金项下的基金资金存在亏损甚至基
金本金全部亏损的可能。
</td>
</tr>
<tr>
<td>托管机构及证券经纪人的经营及操作风险：</td>
<td>
基金存续期间，若基
金资金托管机构及证券经纪人出现经营情况恶化、不
按基金文件约定管理基金资金或其他违法违规行为，
则可能因此对基金财产造成不利影响。
</td>
</tr>
<tr>
<td>其他风险:</td>
<td>
本基金不排除其他政治、经济、法律、自然灾害等不
可抗力因素对基金财产产生影响的可能。
</td>
</tr>
</tbody>
</table>
</div>
</section>
<script src="./common.js"></script>
<script src="./product-infos03.js"></script>
</body> </body>
</html> </html>
src/entries/product-infos03.js
View file @ 9c3b6912
/** /**
* Created by liaili on 16/8/15. * Created by liaili on 16/8/15.
*/ */
import './product-infos03.html';
import './product-infos03.less';
src/entries/product-infos03.less
View file @ 9c3b6912
@import 'normalize.less';
:global {
body {
background: #151f2c;
font-size: 14px;
color: #fff;
}
a {
text-decoration: none;
color: #fff;
}
.main {
color: #fff;
& > header {
background: #282d3a;
height: 56px;
a {
position: relative;
display: block;
float: left;
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
&:after {
content: '';
width: 0;
height: 0;
margin-left: -10px;
position: absolute;
left: 50%;
bottom: -10px;
border-width: 10px 10px 0;
border-style: solid;
border-color: transparent transparent transparent; /*灰 透明 透明*/
}
&.active {
font-size: px;
color: #b63e43;
&:after {
border-color: #282d3a transparent transparent; /*灰 透明 透明*/
}
}
}
}
& > .commission-list {
margin-top: 18px;
& > p {
color: #84868a;
font-size: 14px;
text-align: center;
}
& > div {
text-align: center;
padding: 30px 30px 0 30px;
background: #282d3a;
& > table {
width: 100%;
border-collapse: collapse;
color: #fff;
font-weight: lighter;
thead {
th {
padding: 10px 0;
font-weight: lighter;
border-bottom: 1px solid #808594;
}
}
tbody {
td {
padding-top: 20px;
text-align: center;
}
}
}
& > h1 {
margin: 30px -30px 0 -30px;
padding: 10px 0 10px 30px;
font-size: 18px;
font-weight: lighter;
background: #323743;
text-align: left;
}
}
}
& > .tips {
margin-bottom: 20px;
padding: 20px 30px;
background: #282d3a;
& > p {
position: relative;
&:before {
content: '';
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid #808594;
}
&:after {
content: '风险揭示';
position: absolute;
padding: 0 10px;
left: 50%;
top: -10px;
margin-left: -15%;
font-size: 18px;
font-weight: normal;
background: #282d3a;
}
}
& > table {
font-size: 12px;
font-weight: lighter;
td {
line-height: 18px;
}
tr td:first-child {
color: #84868a;
vertical-align: top;
font-weight: normal;
}
}
}
}
}
src/entries/product-infos04.html
View file @ 9c3b6912
...@@ -2,9 +2,35 @@ ...@@ -2,9 +2,35 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>$Title$</title> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./product-infos04.css"/>
<title>相关材料</title>
</head> </head>
<body> <body>
$END$ <section class="main">
<header>
<a href="">基本要素</a>
<a href="">费率收益</a>
<a href="" class="active">相关材料</a>
<a href="">募集账户</a>
</header>
<section class="material">
<!-- 暂无相关材料信息 -->
<p>* 暂无相关材料信息</p>
<!-- 有相关材料信息 -->
<div>
<h1>产品资料 :</h1>
<p>
<a href="">新叶华服创赢9号夹层机会投资基金</a>
<a href="">新叶华服创赢9号夹层机会投资基金</a>
<a href="">新叶华服创赢9号夹层机会投资基金投资基金投资基金投资基金</a>
</p>
</div>
</section>
</section>
<script src="./common.js"></script>
<script src="./product-infos04.js"></script>
</body> </body>
</html> </html>
src/entries/product-infos04.js
View file @ 9c3b6912
/** /**
* Created by liaili on 16/8/26. * Created by liaili on 16/8/26.
*/ */
import './product-infos04.html';
import './product-infos04.less';
src/entries/product-infos04.less
View file @ 9c3b6912
@import "normalize.less";
:global{
body {
background: #151f2c;
font-weight: lighter;
}
a {
text-decoration: none;
color: #fff;
}
.main {
font-weight: lighter;
color: #fff;
header {
background: #282d3a;
height: 56px;
a {
position: relative;
display: block;
float: left;
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
&:after {
content: '';
width:0;
height:0;
margin-left: -10px;
position:absolute;
left: 50%;
bottom: -10px;
border-width:10px 10px 0;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
}
&.active {
font-size: 18px;
color: #b63e43;
&:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/
}
}
}
}
.material {
margin-top: 14px;
& > p {
color: #84868a;
font-size: 14px;
text-align: center;
}
& > div {
background: #282d3a;
& > h1 {
margin: 0;
padding: 20px;
border-bottom: 1px solid #454a57;
font-size: 18px;
font-weight: lighter;
}
& > p {
margin: 0;
padding: 0;
a {
position: relative;
display: block;
padding: 20px 60px 20px 110px;
font-size: 12px;
text-align:justify;
background-size: 30px;
background: url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png)no-repeat 60px center;
background-size:8%;
&:hover {
background-size: 30px;
background: #151f2c url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png)no-repeat 60px center;
}
&:after {
content: '';
position: absolute;
left:46px;
bottom:0;
right:50px;
height: 0;
border-bottom: 1px solid #454a57;
}
&:last-child:after {
width: 0;
}
}
}
}
}
}
}
src/entries/product.html
View file @ 9c3b6912
...@@ -2,9 +2,46 @@ ...@@ -2,9 +2,46 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>$Title$</title> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./product.css"/>
<title>项目详情</title>
</head> </head>
<body> <body>
$END$ <section>
<header>
<h1>7.8% ~ 8.4%</h1>
<h2>半年期</h2>
</header>
<div class="project-status-img">
<h3>
<!--8000万／ 2亿-->
</h3>
<p>
剩余额度 / 本期额度<br>
<span class="status">
<!--预计封账时间：2016-04-24 12:23:32-->
</span>
</p>
<div class="circle">
<i></i>
<span></span>
</div>
</div>
<div class="project-detail">
<h3>
中电投先融—瑞云系列资产管理计划
</h3>
<p>
五角星云南地级市政府项目，用于补充云南广厦政府资 金，隆阳区未来财政收入保障。
</p>
</div>
<div class="drag">
<span class="arrow"></span>
</div>
</section>
<a href="#" class="appointment">我要预约</a>
<script src="./common.js"></script>
<script src="./product.js"></script>
</body> </body>
</html> </html>
src/entries/product.js
View file @ 9c3b6912
/** /**
* Created by liaili on 16/8/10. * Created by liaili on 16/8/10.
*/ */
import './product.html';
const styles = require('./product.less');
import $ from 'jquery';
(function () {
const data = {
id: 5005,
raised: 80000000,
total: 200000000,
sealTime: '2016-09-01 12:00:00'
};
const $arrow = $('.arrow');
$arrow.css('animation-name',styles['arrow-change']);
function formatMoney(money = 0) {
let ret;
if (isNaN(money)) {
ret = '0'
} else if (money >= 1E8) {
ret = (money / 1E8) + '亿';
} else if (money >= 1E4) {
ret = money / 1E4 + '万';
} else {
ret = money;
}
return ret;
}
function projectStatus(data) {
let html;
switch (data.id) {
case 5001 :
html = '预热中';
break;
case 5002 :
html = '已成立';
break;
case 5003 :
html = '已封账';
break;
case 5004 :
html = '暂停中';
break;
case 5005 :
html = data.sealTime === 'undefined' ? '募集中' : '预计封账时间: ' + data.sealTime;
break;
}
return html;
}
$('.status').html(projectStatus(data));
let parcent = ((data.total - data.raised) / data.total).toFixed(2) * 100 + '%';
$('span', '.circle').html(parcent);
$('i', '.circle').height($('.circle').height() * data.raised / data.total.toFixed(2));
$('h3', '.project-status-img').html(formatMoney(data.raised) + ' / ' + formatMoney(data.total));
})();
src/entries/product.less
View file @ 9c3b6912
@import 'normalize.less';
:global {
h1,h2,h3,h4,p {
margin: 0;
padding: 0;
}
section {
//max-width: 768px;
margin: 0 auto 50px;
header {
height: 200px;
background: url(https://res.fudou6.com/c/4/20160810/7hsaW1hZ2UtMDFfMDI=_768x428.jpg)no-repeat center center;
background-size: cover;
h1 {
display: inline-block;
padding: 15% 0 0 44%;
text-align: center;
font-size: 26px;
color: #fff;
&:after {
content: '参考收益';
display: block;
font-size: 14px;
color: #949494;
}
}
h2 {
display: inline-block;
padding: 0 0 0 37%;
text-align: center;
font-size: 22px;
color: #fff;
&:after {
content: '期限';
display: block;
font-size: 14px;
color: #949494;
}
}
}
.project-status-img {
position: relative;
padding-left: 120px;
padding-top: 10px;
& > h3 {
font-family: "Microsoft YaHei";
}
& > p {
font-size: 14px;
line-height: 24px;
color: #949494;
span {
color: #ff4a4b;
}
}
}
.circle {
position: absolute;
top:-14px;
left:20px;
width: 90px;
height: 90px;
line-height: 80px;
text-align: center;
border-radius: 50%;
border: 6px solid #fff;
background: #ff494b;
color: #fff;
font-size: 22px;
font-weight: normal;
overflow: hidden;
span {
position: relative;
z-index:3;
}
i {
position: absolute;
top:0;
left: 0;
width: 120px;
height: 120px;
background: #ff8283;
transition: height 1s;
}
}
.project-detail {
margin: 50px 0;
padding: 20px 30px;
background: #656b7a;
color: #fff;
h3 {
margin-bottom: 12px;
font-size: 16px;
line-height: 30px;
}
p {
font-size: 14px;
line-height: 20px;
font-weight: lighter;
}
}
.drag {
position: relative;
margin-top: 70px;
padding: 44px 30px 20px 30px;
text-align: center;
&:before {
content: '';
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid #949494;
}
&:after {
content: '继续拖动，查看详情';
display: inline-block;
position: relative;
top:-14px;
padding: 0 10px;
font-size: 14px;
font-family: "Adobe Fan Heiti Std";
color: #949494;
background: #fff;
}
& > .arrow {
position: absolute;
top:-4px;
left: 50%;
margin-left: -32px;
width: 68px;
height: 55px;
background: url(https://res.fudou6.com/c/4/20160910/fv2bmV3_68x163.png)no-repeat;
background-position: 0 0;
animation-duration: 2s;
animation-iteration-count: infinite;
}
}
}
.appointment {
position: fixed;
bottom: 0;
width: 100%;
padding: 20px 0;
text-align: center;
text-decoration: none;
background: #ff4a4b;
color: #fff;
font-size: 20px;
}
@media screen and (min-width: 767px){
section {
max-width: 768px;
margin: 0 auto;
header {
height: 380px;
background-position: center -42px;
background-size: cover;
h1 {
padding: 13% 0 0 62%;
font-size: 30px;
&:after {
font-size: 20px;
}
}
h2 {
padding: 8% 0 0 48%;
font-size: 28px;
&:after {
font-size: 20px;
}
}
}
.status {
padding-left: 180px;
padding-top: 30px;
& > p {
font-size: 20px;
line-height: 34px;
}
h3 {
font-size: 32px;
line-height: 46px;
}
}
.circle {
top:-24px;
left:30px;
width: 120px;
height: 120px;
line-height: 120px;
background: #ff494b;
color: #fff;
font-size: 26px;
i {
width: 120px;
}
}
.project-detail {
h3 {
font-size: 20px;
line-height: 34px;
}
p {
font-size: 18px;
line-height: 28px;
}
}
.drag {
margin-top: 70px;
&:after {
top:-12px;
padding: 0 20px;
font-size: 20px;
}
}
}
}
@keyframes arrow-change {
0% {
background: url(../images/new2_03.png)no-repeat;
}
33% {
background: url(../images/new2_02.png)no-repeat;
}
66% {
background: url(../images/new2_01.png)no-repeat;
}
100% {
background: url(../images/new2_03.png)no-repeat;
}
}
}
src/entries/projects.html
View file @ 9c3b6912
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<link rel="stylesheet" type="text/css" href="./project.css"/> <link rel="stylesheet" type="text/css" href="./projects.css"/>
<title>Title</title> <title>Title</title>
</head> </head>
<body> <body>
<section> <section>
<a href="javascript:;" class="hiddenBtn">&times;</a>
<header> <header>
<a href="javascript:;" class="hiddenBtn">&times;</a>
富豆优投是枢纽科技旗下专为地方性项目或企业提供有保障的融资渠道、合理对接资金需求的互联网平台，拥有数个大型项目资金问题解决方案。 富豆优投是枢纽科技旗下专为地方性项目或企业提供有保障的融资渠道、合理对接资金需求的互联网平台，拥有数个大型项目资金问题解决方案。
</header> </header>
<section class="project-list"> <section class="project-list">
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
<ul> <ul>
<li class="project-1"> <li class="project-1">
<i></i> <i></i>
<i></i>
<div>
<h2> <h2>
中电投西安 中电投西安
</h2> </h2>
...@@ -29,9 +31,11 @@ ...@@ -29,9 +31,11 @@
<p> <p>
认购光大信托计划，用于“XX公司-发信托贷款”用于建设西安绿源农产品批发市场项目 认购光大信托计划，用于“XX公司-发信托贷款”用于建设西安绿源农产品批发市场项目
</p> </p>
</div>
</li> </li>
<li class="project-2"> <li class="project-1">
<i></i> <i></i>
<div>
<h2> <h2>
中电投西安 中电投西安
</h2> </h2>
...@@ -42,12 +46,13 @@ ...@@ -42,12 +46,13 @@
<p> <p>
认购光大信托计划，用于“XX公司-发信托贷款”用于建设西安绿源农产品批发市场项目 认购光大信托计划，用于“XX公司-发信托贷款”用于建设西安绿源农产品批发市场项目
</p> </p>
</div>
</li> </li>
</ul> </ul>
</section> </section>
</section> </section>
<a href="javascript:;" class="recommendProject">我有优质项目,现在推荐</a> <a href="javascript:;" class="recommendProject">我有优质项目,现在推荐</a>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./project.js"></script> <script src="projects.js"></script>
</body> </body>
</html> </html>
src/entries/projects.js
View file @ 9c3b6912
...@@ -2,4 +2,5 @@ ...@@ -2,4 +2,5 @@
* Created by liaili on 16/8/8. * Created by liaili on 16/8/8.
*/ */
import './projects.html'; import './projects.html';
import './project.less'; import './projects.less';
src/entries/projects.less
View file @ 9c3b6912
...@@ -11,11 +11,15 @@ ...@@ -11,11 +11,15 @@
section { section {
max-width: 768px; max-width: 768px;
margin: 0 auto 70px; margin: 0 auto 70px;
/* .hiddenBtn样式 */
.hiddenBtn { .hiddenBtn {
position: fixed; position: absolute;
top:20px; top:20px;
left:30px; left:30px;
padding: 10px; width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
border-radius: 50%; border-radius: 50%;
...@@ -24,12 +28,13 @@ ...@@ -24,12 +28,13 @@
box-shadow: 0px 0px 24px 0px rgba(38,135,255,0.3); box-shadow: 0px 0px 24px 0px rgba(38,135,255,0.3);
} }
header { header {
position: relative;
padding: 80px 56px 30px; padding: 80px 56px 30px;
border-top:2px solid #21e7b6; border-top:2px solid #21e7b6;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
background: url(../images/banner.jpg)no-repeat center center; background: url(https://res.fudou6.com/c/4/20160810/rrmYmFubmVy_768x360.jpg)no-repeat center center;
} }
.project-list { .project-list {
h1 { h1 {
...@@ -43,14 +48,12 @@ ...@@ -43,14 +48,12 @@
li { li {
position: relative; position: relative;
margin: 0 0 14px 0; margin: 0 0 14px 0;
padding: 50px 176px 16px 20px; padding-right:28px;
background-repeat: no-repeat;
background-position: 250px 50px;
background-color: #efeff1; background-color: #efeff1;
background-size:140px;
i { i {
position: absolute; position: absolute;
top:0; top:-2px;
right:0; right:0;
width: 70px; width: 70px;
height: 70px; height: 70px;
...@@ -58,27 +61,20 @@ ...@@ -58,27 +61,20 @@
background-position: center center; background-position: center center;
background-size: 70px; background-size: 70px;
} }
&.project-1 { div {
background-image: url(../images/project-01.jpg); padding: 50px 130px 30px 20px;
i { background-repeat: no-repeat;
background-image: url(../images/corner-01.png); background-position: right center;
} background-size:120px;
}
&.project-2 {
background-image: url(../images/project-02.jpg);
i {
background-image: url(../images/corner-01.png);
}
}
h2 { h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: 20px;
} }
h3 { h3 {
margin: 10px 0; margin: 10px 0;
font-size: 16px; font-size: 12px;
span { span {
width: 40%; width: 45%;
&:first-child { &:first-child {
float: left; float: left;
} }
...@@ -93,10 +89,19 @@ ...@@ -93,10 +89,19 @@
} }
} }
p { p {
font-size: 14px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
} }
&.project-1 {
div {
background-image: url(../images/project-01.jpg);
}
i {
background-image: url(../images/corner-01.png);
}
}
}
} }
} }
.recommendProject { .recommendProject {
......
src/entries/register-info.html
View file @ 9c3b6912
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes, maximum-scale=3,minimum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./register-info.css"/> <link rel="stylesheet" type="text/css" href="./register-info.css"/>
<title>Title</title> <title>用户详情</title>
</head> </head>
<body> <body>
<section> <section>
......
src/entries/util.js
View file @ 9c3b6912
/*判断安卓和IOS start*/
function judgePhoneSystem() {
let ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
$loading.attr('href', 'https://itunes.apple.com/cn/app/fu-dou-you-tou/id1125652968?mt=8')
} else if (/android/.test(ua)) {
$loading.attr('href', 'http://android.myapp.com/myapp/detail.htm?apkName=com.fudou6.app')
}
}
/*判断安卓和IOS end*/
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