Skip to content

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

updata-9.21-arrow

parent 8f8c782d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 353 additions and 327 deletions
.idea/workspace.xml
View file @ 9576653b
This diff is collapsed.
package.json
View file @ 9576653b
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
"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", "babel-preset-es2015": "^6.14.0",
"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",
......
src/entries/index.html
View file @ 9576653b
...@@ -5,9 +5,16 @@ ...@@ -5,9 +5,16 @@
<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="./index.css"/> <link rel="stylesheet" type="text/css" href="./index.css"/>
<title>Title</title> <title>Title</title>
<style>
h1 {
font-family: "Microsoft YaHei";
}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app">
<h1>hello world! 12345%</h1>
</div>
<script src="/common.js"></script> <script src="/common.js"></script>
<script src="/index.js"></script> <script src="/index.js"></script>
</body> </body>
......
src/entries/normalize.less
View file @ 9576653b
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
*/ */
html { html {
font-family: "PingFang SC","Microsoft YaHei","Arial","黑体","tsans-serif" ; /* 1 */ font-family: Microsoft YaHei, simhei, Tahoma, Arial, sans-serif; /* 1 */
font-weight: 300; font-weight: 200;
-ms-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
} }
......
src/entries/product-account.html
View file @ 9576653b
...@@ -4,17 +4,17 @@ ...@@ -4,17 +4,17 @@
<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-infos02.css"/> <link rel="stylesheet" href="./product-account.css"/>
<title>项目详情-募集账户</title> <title>项目详情-募集账户</title>
</head> </head>
<body> <body>
<section class="container"> <section class="container">
<header> <header>
<header> <header>
<a href="product-infos01.html">基本要素</a> <a href="product-points.html">基本要素</a>
<a href="product-infos03.html">费率收益</a> <a href="product-commission.html">费率收益</a>
<a href="product-infos04.html">相关材料</a> <a href="product-points.html">相关材料</a>
<a href="product-infos02.html" class="active">募集账户</a> <a href="product-account.html" class="active">募集账户</a>
</header> </header>
</header> </header>
<section class="main"> <section class="main">
...@@ -59,6 +59,6 @@ ...@@ -59,6 +59,6 @@
</section> </section>
</section> </section>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./product-infos02.js"></script> <script src="product-account.js"></script>
</body> </body>
</html> </html>
src/entries/product-account.js
View file @ 9576653b
/** /**
* Created by liaili on 16/8/15. * Created by liaili on 16/8/15.
*/ */
import './product-infos02.html'; import './product-account.html';
import './product-infos02.less'; import './product-account.less';
src/entries/product-commission.html
View file @ 9576653b
...@@ -4,17 +4,17 @@ ...@@ -4,17 +4,17 @@
<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-infos03.css"/> <link rel="stylesheet" href="./product-commission.css"/>
<title>项目详情-费率收益</title> <title>项目详情-费率收益</title>
</head> </head>
<body> <body>
<section class="main"> <section class="main">
<header> <header>
<header> <header>
<a href="product-infos01.html">基本要素</a> <a href="product-points.html">基本要素</a>
<a href="product-infos03.html" class="active">费率收益</a> <a href="product-commission.html" class="active">费率收益</a>
<a href="product-infos04.html">相关材料</a> <a href="product-points.html">相关材料</a>
<a href="product-infos02.html">募集账户</a> <a href="product-account.html">募集账户</a>
</header> </header>
</header> </header>
<section class="commission-list"> <section class="commission-list">
...@@ -111,6 +111,6 @@ ...@@ -111,6 +111,6 @@
</div> </div>
</section> </section>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./product-infos03.js"></script> <script src="product-commission.js"></script>
</body> </body>
</html> </html>
src/entries/product-commission.js
View file @ 9576653b
/** /**
* Created by liaili on 16/8/15. * Created by liaili on 16/8/15.
*/ */
import './product-infos03.html'; import './product-commission.html';
import './product-infos03.less'; import './product-commission.less';
src/entries/product-material.html
View file @ 9576653b
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>$Title$</title> <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-material.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-material.js"></script>
</body> </body>
</html> </html>
src/entries/product-material.js
View file @ 9576653b
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
* Created by liaili on 16/8/26. * Created by liaili on 16/8/26.
*/ */
import './product-points.html'; import './product-points.html';
import './product-infos04.less'; import './product-material.less';
src/entries/product-points.html
View file @ 9576653b
...@@ -4,16 +4,16 @@ ...@@ -4,16 +4,16 @@
<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-infos01.css"/> <link rel="stylesheet" type="text/css" href="./product-points.css"/>
<title>项目详情-基本要素</title> <title>项目详情-基本要素</title>
</head> </head>
<body> <body>
<section class="container"> <section class="container">
<header> <header>
<a href="product-infos01.html" class="active">基本要素</a> <a href="product-points.html" class="active">基本要素</a>
<a href="product-infos03.html">费率收益</a> <a href="product-commission.html">费率收益</a>
<a href="product-infos04.html">相关材料</a> <a href="product-points.html">相关材料</a>
<a href="product-infos02.html">募集账户</a> <a href="product-account.html">募集账户</a>
</header> </header>
<section class="main"> <section class="main">
<!-- 暂无基本要素信息 --> <!-- 暂无基本要素信息 -->
...@@ -57,6 +57,6 @@ ...@@ -57,6 +57,6 @@
</section> </section>
</section> </section>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="product-infos01.js"></script> <script src="product-points.js"></script>
</body> </body>
</html> </html>
src/entries/product-points.js
View file @ 9576653b
/** /**
* Created by liaili on 16/8/15. * Created by liaili on 16/8/15.
*/ */
import './product-infos01.html'; import './product-points.html';
import './product-infos01.less'; import './product-points.less';
src/entries/product.html
View file @ 9576653b
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<body> <body>
<section> <section>
<header> <header>
<h1>7.8% ~ 8.4%</h1> <h1>浮动</h1>
<h2>半年期</h2> <h2>半年期</h2>
</header> </header>
<div class="project-status-img"> <div class="project-status-img">
...@@ -40,7 +40,6 @@ ...@@ -40,7 +40,6 @@
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</section> </section>
<a href="#" class="appointment">我要预约</a>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./product.js"></script> <script src="./product.js"></script>
</body> </body>
......
src/entries/product.js
View file @ 9576653b
...@@ -60,6 +60,8 @@ import $ from 'jquery'; ...@@ -60,6 +60,8 @@ import $ from 'jquery';
$('span', '.circle').html(parcent); $('span', '.circle').html(parcent);
$('i', '.circle').height($('.circle').height() * data.raised / data.total.toFixed(2)); $('i', '.circle').height($('.circle').height() * data.raised / data.total.toFixed(2));
$('h3', '.project-status-img').html(formatMoney(data.raised) + ' / ' + formatMoney(data.total)); $('h3', '.project-status-img').html(formatMoney(data.raised) + ' / ' + formatMoney(data.total));
})(); })();
......
src/entries/product.less
View file @ 9576653b
...@@ -4,51 +4,70 @@ ...@@ -4,51 +4,70 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body {
background-color: #f1f6f8;
font-weight: 100;
color: #353535;
-webkit-font-smoothing: antialiased;
}
section { section {
//max-width: 768px; //max-width: 768px;
margin: 0 auto 50px; margin: 0 auto;
header { header {
position: relative;
height: 200px; height: 200px;
background: url(https://res.fudou6.com/c/4/20160810/7hsaW1hZ2UtMDFfMDI=_768x428.jpg)no-repeat center center; background: #f1f6f8 url(https://res.fudou6.com/c/4/20160919/z71YmdfMDI=_750x414.png)no-repeat center center;
background-size: cover; background-size: 100% 100%;
h1 { h1 {
display: inline-block; position: absolute;
padding: 15% 0 0 44%; right: 10%;
top:18.8%;
min-width: 124px;
font-size: 30px;
font-weight: lighter;
text-align: center; text-align: center;
font-size: 26px; color: #ff494b;
color: #fff;
&:after { &:after {
content: '参考收益'; content: '参考收益';
display: block; display: block;
font-size: 14px; font-size: 14px;
color: #949494; line-height: 24px;
color: #666;
font-weight: lighter;
} }
} }
h2 { h2 {
display: inline-block; position: absolute;
padding: 0 0 0 37%; top:57%;
text-align: center; left:37.7%;
font-size: 22px; font-size: 18px;
color: #fff; font-weight: normal;
color: #ff494b;
&:after { &:after {
content: '期限'; content: '期限';
display: block; display: block;
font-size: 14px; font-size: 14px;
color: #949494; text-align: center;
line-height: 24px;
font-weight: lighter;
color: #666;
} }
} }
} }
.project-status-img { .project-status-img {
position: relative; position: relative;
padding-left: 120px; padding-left: 120px;
padding-top: 10px; background-color: #f1f6f8;
& > h3 { & > h3 {
font-family: "Microsoft YaHei"; font-size: 17px;
margin-bottom: 2px;
color: #1c1c1c;
font-weight: 500;
} }
& > p { & > p {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 22px;
color: #949494; color: #666;
span { span {
color: #ff4a4b; color: #ff4a4b;
} }
...@@ -56,21 +75,23 @@ ...@@ -56,21 +75,23 @@
} }
.circle { .circle {
position: absolute; position: absolute;
top:-14px; top:-23px;
left:20px; left:20px;
width: 90px; width: 91px;
height: 90px; height: 90px;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
border: 6px solid #fff; border: 3px solid #fff;
background: #ff494b; background: #ff494b;
color: #fff; color: #fff;
font-size: 22px; font-size: 22px;
font-weight: normal; font-weight: normal;
overflow: hidden; overflow: hidden;
span { span {
position: relative; position: relative;
font-weight: 200;
z-index:3; z-index:3;
} }
i { i {
...@@ -84,19 +105,18 @@ ...@@ -84,19 +105,18 @@
} }
} }
.project-detail { .project-detail {
margin: 50px 0; margin: 45px 0;
padding: 20px 30px; padding: 18px 30px;
background: #656b7a; background: #fff;
color: #fff; color: #1c1c1c;
h3 { h3 {
margin-bottom: 12px; margin-bottom: 18px;
font-size: 16px; font-size: 17px;
line-height: 30px;
} }
p { p {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
font-weight: lighter; color: #666;
} }
} }
.drag { .drag {
...@@ -115,39 +135,25 @@ ...@@ -115,39 +135,25 @@
content: '继续拖动，查看详情'; content: '继续拖动，查看详情';
display: inline-block; display: inline-block;
position: relative; position: relative;
top:-14px; top:-11px;
padding: 0 10px; padding: 0 10px;
font-size: 14px; font-size: 12px;
font-family: "Adobe Fan Heiti Std"; background-color: #f1f6f8;
color: #949494; color: #666;
background: #fff;
} }
& > .arrow { & > .arrow {
position: absolute; position: absolute;
top:-4px; top:14px;
left: 50%; left: 50%;
margin-left: -32px; margin-left: -17px;
width: 68px; width: 34px;
height: 55px; height: 27px;
background: url(https://res.fudou6.com/c/4/20160910/fv2bmV3_68x163.png)no-repeat;
background-position: 0 0;
animation-duration: 2s; animation-duration: 2s;
animation-iteration-count: infinite; 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){ @media screen and (min-width: 767px){
section { section {
max-width: 768px; max-width: 768px;
...@@ -218,16 +224,20 @@ ...@@ -218,16 +224,20 @@
} }
@keyframes arrow-change { @keyframes arrow-change {
0% { 0% {
background: url(../images/new2_03.png)no-repeat; background: url(https://res.fudou6.com/c/4/20160911/y55bmV3Ml8wMw==_68x54.png)no-repeat;
background-size: 34px 27px;
} }
33% { 33% {
background: url(../images/new2_02.png)no-repeat; background: url(https://res.fudou6.com/c/4/20160911/k13bmV3Ml8wMg==_68x54.png)no-repeat;
background-size: 34px 27px;
} }
66% { 66% {
background: url(../images/new2_01.png)no-repeat; background: url(https://res.fudou6.com/c/4/20160911/fs8bmV3Ml8wMQ==_68x55.png)no-repeat;
background-size: 34px 27px;
} }
100% { 100% {
background: url(../images/new2_03.png)no-repeat; background: url(https://res.fudou6.com/c/4/20160911/y55bmV3Ml8wMw==_68x54.png)no-repeat;
background-size: 34px 27px;
} }
} }
} }
......
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