Skip to content

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

first commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 991 additions and 0 deletions
README.md 0 → 100644
View file @ fe1418d1
# antd-demo
## Environment
```
node >= 4
```
## Code Style
https://github.com/airbnb/javascript
## Develop
```
npm run dev
```
访问 http://127.0.0.1:8989
## Build
```
npm run build
```
package.json 0 → 100644
View file @ fe1418d1
{
"private": true,
"entry": {},
"dependencies": {
"antd": "^1.1.0",
"atool-build": "0.7.x",
"babel-plugin-antd": "0.4.x",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-runtime": "^6.6.1",
"classnames": "^2.2.3",
"es3ify-loader": "^0.2.0",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.1.4",
"js-cookie": "^2.1.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.0.1"
},
"devDependencies": {
"atool-test-mocha": "^0.1.4",
"babel-eslint": "^6.0.0",
"dora": "0.3.x",
"dora-plugin-browser-history": "^0.1.1",
"dora-plugin-hmr": "0.6.x",
"dora-plugin-livereload": "0.3.x",
"dora-plugin-proxy": "0.6.x",
"dora-plugin-webpack": "0.6.x",
"expect": "^1.20.1",
"eslint": "^2.7.0",
"eslint-config-airbnb": "6.x",
"eslint-plugin-react": "4.x",
"glob": "^7.0.3",
"pre-commit": "1.x"
},
"pre-commit": [
"lint"
],
"scripts": {
"build": "atool-build",
"lint": "eslint --ext .js,.jsx src",
"start": "dora -p 8001 --plugins \"webpack,hmr,proxy,livereload?enableJs=false&injectHost=127.0.0.1,browser-history?index=/src/entries/index.html\"",
"test": "atool-test-mocha ./src/**/__tests__/*-test.js"
}
}
\ No newline at end of file
proxy.config.js 0 → 100644
View file @ fe1418d1
// Learn more on how to config.
// - https://github.com/dora-js/dora-plugin-proxy#规则定义
module.exports = {
'/api/todos': function(req, res) {
setTimeout(function() {
res.json({
success: true,
data: [
{
id: 1,
text: 'Learn antd',
isComplete: true,
},
{
id: 2,
text: 'Learn ant-tool',
},
{
id: 3,
text: 'Learn dora',
},
],
});
}, 500);
},
};
src/entries/certification-process.html 0 → 100644
View file @ fe1418d1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="./certification-process.css"/>
<title>Title</title>
</head>
<body>
<header></header>
<div class="banner">
<img src="https://res.fudou6.com/c/4/20160805/rggYmFubmVyXzAz_264x237.png" alt=""/>
<span>抱歉，详细信息只对已在富豆平台认证成功的理财师开放</span>
</div>
<div class="certification-process">
<h4>认证流程</h4>
<p>Step 01 : 下载富豆优投APP并登录</p>
<img src="https://res.fudou6.com/c/4/20160805/7c9cGFnZS0wMV8wMw==_660x1173.png" alt="">
<p>Step 02 : 进入"我的"页面 , 点击"个人信息"内认证入口</p>
<img src="https://res.fudou6.com/c/4/20160805/bnzcGFnZS0wMl8wMw==_659x1173.png" alt="">
<p>Step 03 : 提交认证材料 , 等待审核即可</p>
<img src="https://res.fudou6.com/c/4/20160805/2jycGFnZS0wM18wMw==_660x1173.png" alt="">
</div>
<div class="loading-app">
<a href="">点击下载富豆优投APP</a>
</div>
<script src="./common.js"></script>
<script src="certification-process.js"></script>
<script src="./flexible.debug.js"></script>
</body>
</html>
src/entries/certification-process.js 0 → 100644
View file @ fe1418d1
/**
* Created by liaili on 16/8/5.
*/
import './certification-process.html';
import './certification-process.less';
src/entries/certification-process.less 0 → 100644
View file @ fe1418d1
:global {
*{
box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,ul,li,ol,a,strong,span,p,img {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
body {
color: #494949;
font-family: Microsoft YaHei, simhei, Tahoma, Arial;
}
header {
height: 2rem;
background: #f00;
}
.banner {
padding: 1rem 0.5rem;
background: #353950;
position: relative;
img {
width: 4rem;
}
span {
width: 4.5rem;
display: block;
position: absolute;
right: 0.5rem;
top:2rem;
font-size: 0.5rem;
line-height: 0.7rem;
color: #fefefe;
}
}
.certification-process {
padding: 0.5rem;
h4 {
font-size: 0.6rem;
color: #000;
}
p {
padding: 0.5rem 0;
font-size: 0.4rem;
}
img {
width: 9rem;
}
}
.loading-app {
a {
text-align: center;
padding:0.5rem 0;
display: block;
font-size: 0.5rem;
color: #fff;
background: #ff494b;
}
}
}
src/entries/flexible.debug.js 0 → 100644
View file @ fe1418d1
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
\ No newline at end of file
src/entries/index.html 0 → 100644
View file @ fe1418d1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="./index.css"/>
</head>
<body>
<div class="product-notice">
<div>
<h2>超打通知</h2>
</div>
<div>
<p>
【首誉光控凯宏资产3号】已经临界打超，待查账后确定具体金额，多退少补，请各位总即刻停止打款。今天务必尽快提供如下验资资料，最快验资成立！2号开放期的5810万等3号封账后明后天无缝对接！！
</p>
<p>
1. 身份证正反面
</p>
<p>
2. 银行卡正面
</p>
<p>
3. 客户打款凭条
</p>
<p>
4. 合同客户签署页照片第49、50页
</p>
<p>
特别注意（开户精确支行须精确以免耽误还本付息签署页写上
日期拍照）
</p>
</div>
<div class="time">
<span>2016-07-12 10:30</span>
</div>
</div>
</body>
<script src="./common.js"></script>
<script src="./index.js"></script>
</html>
src/entries/index.js 0 → 100644
View file @ fe1418d1
import './index.html';
import './index.less';
src/entries/index.less 0 → 100644
View file @ fe1418d1
:global {
*{
box-sizing: border-box;
}
body {
color: #fff;
font-family: Microsoft YaHei, simhei, Tahoma, Arial;
margin: 0;
}
.product-notice {
background: #313139;
& > div {
//padding:20px 0;
h2 {
width: 87.5%;
margin: 0 auto;
font-size: 20px;
padding: 20px 0 20px;
&:before {
content: '';
display: inline-block;
width: 6px;
height: 20px;
background: #ff4a4b;
position: relative;
top: 2px;
left: -10px;
}
}
&:nth-child(2) {
border: 2px solid #222228;
padding: 20px 0;
p {
width: 87.5%;
margin: 10px auto;
font-size: 14px;
font-family: Adobe Heiti Std;
line-height: 20px;
&:first-child {
margin-bottom: 30px;
}
&:last-child {
margin-top: 30px;
}
}
}
}
.time {
padding: 10px 0;
width: 87.5%;
text-align: right;
span {
font-size: 14px;
}
}
}
@media screen and (max-width: 415px) {
.product-notice {
height: 100vh;
& > div {
padding: 16px 0;
h2 {
font-size: 18px;
&:before {
width: 4px;
height: 18px;
background: #ff4a4b;
position: relative;
top: 3px;
left: -10px;
}
}
}
}
}
@media screen and (min-width: 767px) {
.product-notice {
height: 100vh;
& > div {
padding: 30px 0;
h2 {
font-size: 28px;
&:before {
width: 6px;
height: 28px;
background: #ff4a4b;
position: relative;
top: 4px;
left: -10px;
}
}
&:nth-child(2) {
border: 2px solid #222228;
padding: 20px 0;
p {
width: 87.5%;
margin: 10px auto;
font-size: 18px;
line-height: 28px;
&:first-child {
margin-bottom: 30px;
}
&:last-child {
margin-top: 30px;
}
}
}
}
.time {
padding: 20px 0;
width: 87.5%;
text-align: right;
span {
font-family: Microsoft YaHei, simhei, Tahoma, Arial;
font-size: 18px;
}
}
}
}
}
src/entries/navitation-friend.html 0 → 100644
View file @ fe1418d1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="./navitation-friend.css">
<!--<link rel="stylesheet" href="navitation-friend.css"/>-->
<title>Title</title>
</head>
<body>
<header></header>
<div class="navitation-steps">
<div>
<p>1、点击页面右上角“ <strong>●</strong> <strong>●</strong> <strong>●</strong> ”</p>
<p>2、选择“<span>发送给朋友</span>“或”<span>分享到朋友圈</span>”。邀请好友入驻富豆优投</p>
</div>
</div>
<div class="mobile"><input type="text" placeholder="请输入手机号"/></div>
<div class="purchase"><a href="javascript:;">我要出单</a></div>
<footer>
<strong>
&copy;2015-2016 杭州枢纽科技有限公司 <br> 浙CP备16018845号 <br>
</strong>
<span>
点击"我要出单"代表已同意 <a href="javascript:;">&lt;&lt;注册协议&gt;&gt;</a>
</span>
</footer>
</body>
<script src="./common.js"></script>
<script src="./navitation-friend.js"></script>
<script src="./flexible.debug.js"></script>
</html>
src/entries/navitation-friend.js 0 → 100644
View file @ fe1418d1
/**
* Created by liaili on 16/8/4.
*/
import './navitation-friend.html';
import './navitation-friend.less';
src/entries/navitation-friend.less 0 → 100644
View file @ fe1418d1
:global {
*{
box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,ul,li,ol,a,strong,span,p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
body {
color: #fff;
font-family: Microsoft YaHei, simhei, Tahoma, Arial;
}
header {
height: 2rem;
background: #f00;
}
.navitation-steps {
height: 10rem;
background: url(https://res.fudou6.com/c/4/20160804/q83YmdfMDI=_750x741.jpg)no-repeat center center;
& > div {
background: #fff;
padding:1rem 1.2rem;
p {
color: #000;
font-size: 0.45rem;
line-height: 0.8rem;
text-align: justify;
span {
color: #ff494b;
}
}
}
}
.mobile {
background: #1d1f21;
input {
width: 100%;
padding: 0.4rem 0;
text-align: center;
font-size: 0.4rem;
outline:none;
border: none;
color: #a6a6a6;
background: #1d1f21;
}
}
.purchase {
a {
text-align: center;
padding:0.4rem 0;
display: block;
font-size: 0.5rem;
color: #fff;
background: #a63030;
}
}
footer {
padding-top: 1.5rem;
padding-bottom: 0.3rem;
color: #949494;
font-size: 0.3rem;
line-height: 0.45rem;
text-align: center;
background: #0e141d;
span {
font-size: 0.35rem;
a {
text-decoration: underline;
color: #ff4a4a;
}
}
}
}
src/entries/navitation-record.html 0 → 100644
View file @ fe1418d1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./navitation-record.css"/>
</head>
<body>
<header></header>
<div class="navitation">
<h2>尊敬的维基，您好</h2>
<div>
<a href="javascript:;">绑定成功：2人</a>
<a href="javascript:;">邀请人数：10人</a>
</div>
</div>
<div class="users-list">
<div class="title">
<span></span>
<span><strong>手机号码</strong></span>
<span><strong>绑定状态</strong></span>
<span><strong>成单状态</strong></span>
<span></span>
</div>
<div>
<span>01.</span>
<span>18766773541</span>
<span class="success-red">抢到了</span>
<span>已成单</span>
<span> <strong> > </strong> </span>
</div>
<div>
<span>02.</span>
<span>18766773541</span>
<span class="success-red">抢到了</span>
<span>已成单</span>
<span> <strong> > </strong> </span>
</div>
<div>
<span>03.</span>
<span>18766773541</span>
<span>未绑定</span>
<span>已成单</span>
<span> <strong> > </strong> </span>
</div>
<div>
<span>04.</span>
<span>18766773541</span>
<span class="lose-green">被抢了</span>
<span>未成单</span>
<span> <strong> </strong> </span>
</div>
<div>
<span>05.</span>
<span>18766773541</span>
<span class="lose-green">被抢了</span>
<span>已成单</span>
<span> <strong> </strong> </span>
</div>
</div>
<div class="explain">
<h3>说明</h3>
<h5>绑定状态释义如下：</h5>
<p>-抢到了：被邀请用户下载注册富豆优投APP时使用了您的邀请码；</p>
<p>-未绑定：被邀请用户未下载注册富豆优投APP或注册时未填写邀请码；</p>
<p>-被抢了：被邀请用户下载注册富豆优投APP时使用了其它邀请码。</p>
</div>
<div class="navitation-friend">
<a href="javascript:;">邀请好友入驻</a>
</div>
</body>
<script src="./common.js"></script>
<script src="./navitation-record.js"></script>
</html>
src/entries/navitation-record.js 0 → 100644
View file @ fe1418d1
/**
* Created by liaili on 16/8/4.
*/
import './navitation-record.html';
import './navitation-record.less';
src/entries/navitation-record.less 0 → 100644
View file @ fe1418d1
:global {
*{
box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,ul,li,ol,a,strong,span,p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
html {
font-size: 14px;
}
body {
color: #fff;
font-family: Microsoft YaHei, simhei, Tahoma, Arial;
}
header {
height: 60px;
}
.navitation {
background: #353950 url(https://res.fudou6.com/c/4/20160804/udmYmctMDFfMDM=_749x66.png)no-repeat center bottom;
padding:40px 0 80px;
h2 {
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
}
& > div {
width: 80%;
margin: 0 auto;
&:after {
content:'';
display: block;
clear: both;
}
a {
font-size: 1rem;
background: #494d68;
padding: 6px 10px;
border-radius: 4px;
color: #fff;
float: left;
&:last-child {
float: right;
}
}
}
}
.users-list {
background: #ececec;
div {
width: 90%;
margin: 0 auto;
border-bottom: 1px solid #969696;
color: #222228;
font-size: 1rem;
span {
display: block;
float: left;
text-align: center;
padding: 10px 0;
&:nth-child(1) {
width: 10%;
}
&:nth-child(2) {
width: 30%;
}
&:nth-child(3) {
width: 25%;
}
&:nth-child(4) {
width: 25%;
}
&:nth-child(5) {
width: 10%;
color: #c3c3c3;
}
}
&:first-child {
font-weight: bold;
font-size: 1.2rem;
}
&:last-child {
border-bottom: 0;
}
&:after {
content: '';
display: block;
clear: both;
}
}
.success-red {
color: #ff494b;
}
.lose-green {
color: #66d03c;
}
}
.explain {
width: 90%;
margin: 0 auto;
padding:10px 0;
color: #969696;
font-size: 1rem;
h3 {
font-size: 1.3rem;
text-align: center;
position: relative;
&:before {
content: '';
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid #969696;
position: absolute;
top:10px;
left:0;
z-index: -2;
}
&:after {
content: '';
display: block;
width: 20%;
height: 1px;
background: #fff;
position: absolute;
top:10px;
left:40%;
z-index: -1;
}
}
h5 {
font-size: 1.1rem;
padding: 6px 0 10px;
}
p {
line-height: 20px;
}
}
.navitation-friend {
a {
width: 100%;
display: block;
padding:20px;
text-align: center;
font-size: 1.3rem;
font-weight: bold;
background: #ff494b;
color: #fff;
}
}
/* ipad 手机横屏*/
@media screen and (min-width: 767px) {
.navitation {
padding:40px 0 80px;
h2 {
font-size: 2rem;
margin-bottom: 40px;
text-align: center;
}
& > div {
width: 55%;
a {
font-size: 1.5rem;
padding: 10px 16px;
border-radius: 6px;
}
}
}
.users-list {
background: #ececec;
padding-top: 20px;
padding-bottom: 20px;
div {
width: 85%;
font-size: 1.5rem;
&:first-child {
font-size: 1.7rem;
}
}
}
.explain {
width: 85%;
margin-top: 20px;
font-size: 1.5rem;
h3 {
font-size: 2rem;
&:before {
top:14px;
}
&:after {
width: 22%;
height: 3px;
left:39%;
top:13px;
}
}
h5 {
font-size: 1.7rem;
padding: 10px 0 14px;
}
p {
line-height: 34px;
}
}
.navitation-friend {
a {
width: 100%;
display: block;
padding:20px;
text-align: center;
font-size: 1.3rem;
font-weight: bold;
background: #ff494b;
color: #fff;
}
}
}
}
src/entries/register-info.html 0 → 100644
View file @ fe1418d1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="./register-info.css"/>
<title>Title</title>
</head>
<body>
<header></header>
<div class="banner">
<img src="https://res.fudou6.com/c/4/20160805/m9pYmFubmVyLTAy_179x179.png" alt="">
<span>
</span>
</div>
<div class="info"></div>
<div class="order-record"></div>
<script src="./common.js"></script>
<script src="./register-info.js"></script>
<script src="./flexible.debug.js"></script>
</body>
</html>
src/entries/register-info.js 0 → 100644
View file @ fe1418d1
/**
* Created by liaili on 16/8/5.
*/
import './register-info.html';
import './register-info.less';
src/stylesheets/variable.less 0 → 100644
View file @ fe1418d1
@container-width-ipad-small: 768px;
@container-width-ipad-large: 1024px;
@container-width-phone-small: 415px;
@screen-width-phone-large:569px;
webpack.config.js 0 → 100644
View file @ fe1418d1
// Learn more on how to config.
// - https://github.com/ant-tool/atool-build#配置扩展
const webpack = require('atool-build/lib/webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
module.exports = function (webpackConfig) {
webpackConfig.babel.plugins.push('transform-runtime');
webpackConfig.babel.plugins.push(['antd', {
style: 'css', // if true, use less
}]);
// Enable this if you have to support IE8.
// webpackConfig.module.loaders.unshift({
// test: /\.jsx?$/,
// loader: 'es3ify-loader',
// });
// Parse all less files as css module.
webpackConfig.module.loaders.forEach(function(loader, index) {
if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
loader.test = /\.dont\.exist\.file/;
}
if (loader.test.toString() === '/\\.module\\.less$/') {
loader.test = /\.less$/;
}
});
// Load src/entries/*.js as entry automatically.
const files = glob.sync('./src/entries/*.js');
const newEntries = files.reduce(function(memo, file) {
const name = path.basename(file, '.js');
memo[name] = file;
return memo;
}, {});
webpackConfig.entry = Object.assign({}, webpackConfig.entry, newEntries);
return webpackConfig;
};
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