Skip to content

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

updata-9.21-arrow

parent 8f8c782d
Expand all Show 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 @@
"devDependencies": {
"atool-test-mocha": "^0.1.4",
"babel-eslint": "^6.0.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-es2015": "^6.14.0",
"dora": "0.3.x",
"dora-plugin-browser-history": "^0.1.1",
"dora-plugin-hmr": "0.6.x",
......
src/entries/index.html
View file @ 9576653b
......@@ -5,9 +5,16 @@
<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>
<style>
h1 {
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<div id="app"></div>
<div id="app">
<h1>hello world! 12345%</h1>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
......
src/entries/normalize.less
View file @ 9576653b
......@@ -6,8 +6,8 @@
*/
html {
font-family: "PingFang SC","Microsoft YaHei","Arial","黑体","tsans-serif" ; /* 1 */
font-weight: 300;
font-family: Microsoft YaHei, simhei, Tahoma, Arial, sans-serif; /* 1 */
font-weight: 200;
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
......
src/entries/product-account.html
View file @ 9576653b
......@@ -4,17 +4,17 @@
<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="./product-infos02.css"/>
<link rel="stylesheet" href="./product-account.css"/>
<title>项目详情-募集账户</title>
</head>
<body>
<section class="container">
<header>
<header>
<a href="product-infos01.html">基本要素</a>
<a href="product-infos03.html">费率收益</a>
<a href="product-infos04.html">相关材料</a>
<a href="product-infos02.html" class="active">募集账户</a>
<a href="product-points.html">基本要素</a>
<a href="product-commission.html">费率收益</a>
<a href="product-points.html">相关材料</a>
<a href="product-account.html" class="active">募集账户</a>
</header>
</header>
<section class="main">
......@@ -59,6 +59,6 @@
</section>
</section>
<script src="./common.js"></script>
<script src="./product-infos02.js"></script>
<script src="product-account.js"></script>
</body>
</html>
src/entries/product-account.js
View file @ 9576653b
/**
* Created by liaili on 16/8/15.
*/
import './product-infos02.html';
import './product-infos02.less';
import './product-account.html';
import './product-account.less';
src/entries/product-commission.html
View file @ 9576653b
......@@ -4,17 +4,17 @@
<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="./product-infos03.css"/>
<link rel="stylesheet" href="./product-commission.css"/>
<title>项目详情-费率收益</title>
</head>
<body>
<section class="main">
<header>
<header>
<a href="product-infos01.html">基本要素</a>
<a href="product-infos03.html" class="active">费率收益</a>
<a href="product-infos04.html">相关材料</a>
<a href="product-infos02.html">募集账户</a>
<a href="product-points.html">基本要素</a>
<a href="product-commission.html" class="active">费率收益</a>
<a href="product-points.html">相关材料</a>
<a href="product-account.html">募集账户</a>
</header>
</header>
<section class="commission-list">
......@@ -111,6 +111,6 @@
</div>
</section>
<script src="./common.js"></script>
<script src="./product-infos03.js"></script>
<script src="product-commission.js"></script>
</body>
</html>
src/entries/product-commission.js
View file @ 9576653b
/**
* Created by liaili on 16/8/15.
*/
import './product-infos03.html';
import './product-infos03.less';
import './product-commission.html';
import './product-commission.less';
src/entries/product-material.html
View file @ 9576653b
<!DOCTYPE html>
<html lang="en">
<head>
<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-material.css"/>
<title>相关材料</title>
</head>
<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>
</html>
src/entries/product-material.js
View file @ 9576653b
......@@ -2,4 +2,4 @@
* Created by liaili on 16/8/26.
*/
import './product-points.html';
import './product-infos04.less';
import './product-material.less';
src/entries/product-points.html
View file @ 9576653b
......@@ -4,16 +4,16 @@
<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="./product-infos01.css"/>
<link rel="stylesheet" type="text/css" href="./product-points.css"/>
<title>项目详情-基本要素</title>
</head>
<body>
<section class="container">
<header>
<a href="product-infos01.html" class="active">基本要素</a>
<a href="product-infos03.html">费率收益</a>
<a href="product-infos04.html">相关材料</a>
<a href="product-infos02.html">募集账户</a>
<a href="product-points.html" class="active">基本要素</a>
<a href="product-commission.html">费率收益</a>
<a href="product-points.html">相关材料</a>
<a href="product-account.html">募集账户</a>
</header>
<section class="main">
<!-- 暂无基本要素信息 -->
......@@ -57,6 +57,6 @@
</section>
</section>
<script src="./common.js"></script>
<script src="product-infos01.js"></script>
<script src="product-points.js"></script>
</body>
</html>
src/entries/product-points.js
View file @ 9576653b
/**
* Created by liaili on 16/8/15.
*/
import './product-infos01.html';
import './product-infos01.less';
import './product-points.html';
import './product-points.less';
src/entries/product.html
View file @ 9576653b
......@@ -10,7 +10,7 @@
<body>
<section>
<header>
<h1>7.8% ~ 8.4%</h1>
<h1>浮动</h1>
<h2>半年期</h2>
</header>
<div class="project-status-img">
......@@ -40,7 +40,6 @@
<span class="arrow"></span>
</div>
</section>
<a href="#" class="appointment">我要预约</a>
<script src="./common.js"></script>
<script src="./product.js"></script>
</body>
......
src/entries/product.js
View file @ 9576653b
......@@ -60,6 +60,8 @@ import $ from 'jquery';
$('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 @ 9576653b
......@@ -4,51 +4,70 @@
margin: 0;
padding: 0;
}
body {
background-color: #f1f6f8;
font-weight: 100;
color: #353535;
-webkit-font-smoothing: antialiased;
}
section {
//max-width: 768px;
margin: 0 auto 50px;
margin: 0 auto;
header {
position: relative;
height: 200px;
background: url(https://res.fudou6.com/c/4/20160810/7hsaW1hZ2UtMDFfMDI=_768x428.jpg)no-repeat center center;
background-size: cover;
background: #f1f6f8 url(https://res.fudou6.com/c/4/20160919/z71YmdfMDI=_750x414.png)no-repeat center center;
background-size: 100% 100%;
h1 {
display: inline-block;
padding: 15% 0 0 44%;
position: absolute;
right: 10%;
top:18.8%;
min-width: 124px;
font-size: 30px;
font-weight: lighter;
text-align: center;
font-size: 26px;
color: #fff;
color: #ff494b;
&:after {
content: '参考收益';
display: block;
font-size: 14px;
color: #949494;
line-height: 24px;
color: #666;
font-weight: lighter;
}
}
h2 {
display: inline-block;
padding: 0 0 0 37%;
text-align: center;
font-size: 22px;
color: #fff;
position: absolute;
top:57%;
left:37.7%;
font-size: 18px;
font-weight: normal;
color: #ff494b;
&:after {
content: '期限';
display: block;
font-size: 14px;
color: #949494;
text-align: center;
line-height: 24px;
font-weight: lighter;
color: #666;
}
}
}
.project-status-img {
position: relative;
padding-left: 120px;
padding-top: 10px;
background-color: #f1f6f8;
& > h3 {
font-family: "Microsoft YaHei";
font-size: 17px;
margin-bottom: 2px;
color: #1c1c1c;
font-weight: 500;
}
& > p {
font-size: 14px;
line-height: 24px;
color: #949494;
line-height: 22px;
color: #666;
span {
color: #ff4a4b;
}
......@@ -56,21 +75,23 @@
}
.circle {
position: absolute;
top:-14px;
top:-23px;
left:20px;
width: 90px;
width: 91px;
height: 90px;
line-height: 80px;
text-align: center;
border-radius: 50%;
border: 6px solid #fff;
border: 3px solid #fff;
background: #ff494b;
color: #fff;
font-size: 22px;
font-weight: normal;
overflow: hidden;
span {
position: relative;
font-weight: 200;
z-index:3;
}
i {
......@@ -84,19 +105,18 @@
}
}
.project-detail {
margin: 50px 0;
padding: 20px 30px;
background: #656b7a;
color: #fff;
margin: 45px 0;
padding: 18px 30px;
background: #fff;
color: #1c1c1c;
h3 {
margin-bottom: 12px;
font-size: 16px;
line-height: 30px;
margin-bottom: 18px;
font-size: 17px;
}
p {
font-size: 14px;
line-height: 20px;
font-weight: lighter;
color: #666;
}
}
.drag {
......@@ -115,39 +135,25 @@
content: '继续拖动，查看详情';
display: inline-block;
position: relative;
top:-14px;
top:-11px;
padding: 0 10px;
font-size: 14px;
font-family: "Adobe Fan Heiti Std";
color: #949494;
background: #fff;
font-size: 12px;
background-color: #f1f6f8;
color: #666;
}
& > .arrow {
position: absolute;
top:-4px;
top:14px;
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;
margin-left: -17px;
width: 34px;
height: 27px;
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;
......@@ -218,16 +224,20 @@
}
@keyframes arrow-change {
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% {
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% {
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% {
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