Commit 8f8c782d authored by liaili's avatar liaili

update-fontWeight

parent cd7addfb
<!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="./product-infos02.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>
</header>
</header>
<section class="main">
<!-- 没有募集账户信息 -->
<!--<p>* 暂无募集账户信息</p>-->
<!-- 有募集账户信息 -->
<div class="account">
<div class="row">
<div class="col-xs-4">
开户名:
</div>
<div class="col-xs-8">
嘉兴惠博投资管理有限公司
</div>
</div>
<div class="row">
<div class="col-xs-4">
募集银行:
</div>
<div class="col-xs-8">
中信银行北京万达广场支行
</div>
</div>
<div class="row">
<div class="col-xs-4">
募集账户:
</div>
<div class="col-xs-8">
8888 8888 8888 8888 888
</div>
</div>
<div class="row">
<div class="col-xs-4">
打款备注:
</div>
<div class="col-xs-8">
请务必从您本人的银行账户转出账款,并在汇款备注中注明"吴超认购华服创银9号"
</div>
</div>
</div>
</section>
</section>
<script src="./common.js"></script>
<script src="./product-infos02.js"></script>
</body>
</html>
@import 'normalize.less'; @import 'normalize.less';
:global { :global {
body { body {
background: #151f2c; background: #f1f6f8;
font-weight: lighter; font-weight: 200;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
} }
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #353535;
} }
.main { .container {
color: #fff; color: #353535;
header { & > header {
height: 56px; height:43px;
background: #282d3a; background: #fff;
a { a {
position: relative; position: relative;
display: block; display: block;
...@@ -20,70 +22,87 @@ ...@@ -20,70 +22,87 @@
width: 25%; width: 25%;
text-align: center; text-align: center;
height: 100%; height: 100%;
line-height: 56px; line-height: 43px;
font-size: 14px; font-size: 12px;
font-weight: 300;
&:after { &:after {
content: ''; content: '';
width:0; width:70%;
height:0; height:0;
margin-left: -10px;
position:absolute; position:absolute;
left: 50%; left: 15%;
bottom: -10px; bottom: 0;
border-width:10px 10px 0; border: 1px solid transparent;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
} }
&.active { &.active {
font-size: 18px; font-size: 15px;
color: #b63e43; color: #ff4a4a;
&:after { &:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/ border-color:#ff2d41;
} }
} }
} }
} }
& > div { & > .main {
margin-top: 10px; margin-top: 10px;
& > p { & > p {
color: #84868a; color: #949494;
font-size: 14px; font-size: 12px;
text-align: center; text-align: center;
font-weight: lighter;
} }
& > table { .row {
padding: 30px; width: 100%;
background: #282d3a; &:before {
td { content: '';
padding: 20px 0; display: table;
font-size: 14px; }
vertical-align: top; &:after {
content: '';
display: block;
clear: both;
}
& > .col-xs-4 {
float: left;
width: 33.33%;
}
& > .col-xs-8 {
float: left;
width: 66.67%;
}
}
.account {
padding: 0 25px;
background: #fff;
font-size: 13px;
& > .row {
padding: 10px 0;
text-align: justify; text-align: justify;
&:nth-child(odd){ & > .col-xs-4 {
padding-right: 20px; padding-left: 32px;
text-align: right; background: url(https://res.fudou6.com/c/4/20160918/vwxaWNvbnNfMDM=_36x294.png)no-repeat;
background: url(https://res.fudou6.com/c/4/20160815/w92aWNvbg==_36x294.png)no-repeat; background-size:18px;
background-size:26px; color: #1c1c1c;
font-weight: normal;
} }
} &:nth-child(1) {
tr:nth-child(1){ & > .col-xs-4 {
td { background-position: 0 1px;
background-position: 0 16px; }
} }
} &:nth-child(2) {
tr:nth-child(2){ & > .col-xs-4 {
td { background-position: 0 -43px;
background-position: 0 -46px; }
} }
} &:nth-child(3) {
tr:nth-child(3){ & > .col-xs-4 {
td { background-position: 0 -87px;
background-position: 0 -110px; }
} }
} &:nth-child(4) {
tr:nth-child(4){ & > .col-xs-4 {
td { background-position: 0 -131px;
background-position: 0 -174px; }
} }
} }
} }
......
...@@ -10,107 +10,104 @@ ...@@ -10,107 +10,104 @@
<body> <body>
<section class="main"> <section class="main">
<header> <header>
<a href="">基本要素</a> <header>
<a href="" class="active">费率收益</a> <a href="product-infos01.html">基本要素</a>
<a href="">相关材料</a> <a href="product-infos03.html" class="active">费率收益</a>
<a href="">募集账户</a> <a href="product-infos04.html">相关材料</a>
<a href="product-infos02.html">募集账户</a>
</header>
</header> </header>
<section class="commission-list"> <section class="commission-list">
<!-- 没有费率收益数据 --> <!-- 没有费率收益数据 -->
<!--<p>* 暂无费率收益信息</p>--> <!--<p>* 暂无费率收益信息</p>-->
<!-- 有费率收益数据 --> <!-- 有费率收益数据 -->
<div> <div class="rate">
<table> <!-- 状态为募集中,展示 认购金额 参考收益 佣金比率 -->
<colgroup> <!-- 状态不为募集中,展示 认购金额 参考收益 -->
<col width="33.33%"> <div class="row title">
<col width="33.33%"> <div class="col-xs-4">认购金额</div>
<col width="33.33%"> <div class="col-xs-4">参考收益</div>
</colgroup> <div class="col-xs-4">佣金比率</div>
<!-- 状态为募集中,展示 认购金额 参考收益 佣金比率 -->
<!-- 状态不为募集中,展示 认购金额 参考收益 --> <!--<div class="col-xs-6">认购金额</div>-->
<thead> <!--<div class="col-xs-6">参考收益</div>-->
<tr> </div>
<th>认购金额</th> <div class="row">
<th>参考收益</th> <div class="col-xs-4">100万</div>
<!--<th>佣金比率</th>--> <div class="col-xs-4">8%</div>
</tr> <div class="col-xs-4">3%</div>
</thead>
<tbody> <!--<div class="col-xs-6">100万</div>-->
<tr> <!--<div class="col-xs-6">8%</div>-->
<td>100万</td> </div>
<td>8%</td> <div class="row">
<!--<td>3%</td>--> <div class="col-xs-4">100-300万</div>
</tr> <div class="col-xs-4">9%</div>
<tr> <div class="col-xs-4">2%</div>
<td>100-300万</td>
<td>9%</td> <!--<div class="col-xs-6">100-300万</div>-->
<!--<td>2%</td>--> <!--<div class="col-xs-6">9%</div>-->
</tr> </div>
<tr> <div class="row">
<td>300万以上</td> <div class="col-xs-4">300万以上</div>
<td>10%</td> <div class="col-xs-4">10%</div>
<!--<td>1%</td>--> <div class="col-xs-4">1%</div>
</tr>
</tbody> <!--<div class="col-xs-6">300万以上</div>-->
</table> <!--<div class="col-xs-6">10%</div>-->
</div>
<h1>结佣方式:打款结佣</h1> <h1>结佣方式:打款结佣</h1>
</div> </div>
</section> </section>
<div class="tips"> <div class="tips">
<p></p> <p></p>
<table> <div class="list">
<colgroup> <div class="row">
<col width="20%"> <div class="col-xs-3">政策风险:</div>
<col width="80%"> <div class="col-xs-9">
</colgroup>
<tbody>
<tr>
<td>政策风险:</td>
<td>
国家或地方相关政策如货币政策、财政政策、税收政 国家或地方相关政策如货币政策、财政政策、税收政
策、产业政策、投资政策及相关配套法规的调整与变 策、产业政策、投资政策及相关配套法规的调整与变
化,可能会影响基金项下证券投资的收益水平。 化,可能会影响基金项下证券投资的收益水平。
</td> </div>
</tr> </div>
<tr> <div class="row">
<td>市场风险:</td> <div class="col-xs-3">市场风险:</div>
<td> <div class="col-xs-9">
本基金项下的基金资金主要用于证券投资,因证券市 本基金项下的基金资金主要用于证券投资,因证券市
场受经济周期、上市公司经营情况、市场竞争环境等 场受经济周期、上市公司经营情况、市场竞争环境等
相关因素影响,价格波动较大,因此证券投资存在较 相关因素影响,价格波动较大,因此证券投资存在较
大市场风险,本基金项下的基金资金存在亏损甚至基 大市场风险,本基金项下的基金资金存在亏损甚至基
金本金全部亏损的可能。 金本金全部亏损的可能。
</td> </div>
</tr> </div>
<tr> <div class="row">
<td>管理风险:</td> <div class="col-xs-3">管理风险:</div>
<td> <div class="col-xs-9">
本基金项下的基金资金主要用于证券投资,因证券市 本基金项下的基金资金主要用于证券投资,因证券市
场受经济周期、上市公司经营情况、市场竞争环境等 场受经济周期、上市公司经营情况、市场竞争环境等
相关因素影响,价格波动较大,因此证券投资存在较 相关因素影响,价格波动较大,因此证券投资存在较
大市场风险,本基金项下的基金资金存在亏损甚至基 大市场风险,本基金项下的基金资金存在亏损甚至基
金本金全部亏损的可能。 金本金全部亏损的可能。
</td> </div>
</tr> </div>
<tr> <div class="row">
<td>托管机构及证券经纪人的经营及操作风险:</td> <div class="col-xs-3">托管机构及证券经纪人的经营及操作风险:</div>
<td> <div class="col-xs-9">
基金存续期间,若基 基金存续期间,若基
金资金托管机构及证券经纪人出现经营情况恶化、不 金资金托管机构及证券经纪人出现经营情况恶化、不
按基金文件约定管理基金资金或其他违法违规行为, 按基金文件约定管理基金资金或其他违法违规行为,
则可能因此对基金财产造成不利影响。 则可能因此对基金财产造成不利影响。
</td> </div>
</tr> </div>
<tr> <div class="row">
<td>其他风险:</td> <div class="col-xs-3">其他风险:</div>
<td> <div class="col-xs-9">
本基金不排除其他政治、经济、法律、自然灾害等不 本基金不排除其他政治、经济、法律、自然灾害等不
可抗力因素对基金财产产生影响的可能。 可抗力因素对基金财产产生影响的可能。
</td> </div>
</tr> </div>
</tbody> </div>
</table>
</div> </div>
</section> </section>
<script src="./common.js"></script> <script src="./common.js"></script>
......
...@@ -2,20 +2,48 @@ ...@@ -2,20 +2,48 @@
:global { :global {
body { body {
background: #151f2c; background: #f1f6f8;
font-size: 14px; font-size: 14px;
color: #fff; -webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
} }
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #353535;
}
.row {
width: 100%;
&:before {
content: '';
display: table;
}
&:after {
content: '';
display: block;
clear: both;
}
& > .col-xs-4 {
float: left;
width: 33.33%;
}
& > .col-xs-6 {
float: left;
width: 50%;
}
& > .col-xs-3 {
float: left;
width: 25%;
}
& > .col-xs-9 {
float: left;
width: 75%;
}
} }
.main { .main {
color: #fff; color: #353535;
& > header { & > header {
background: #282d3a; height:43px;
height: 56px; background: #fff;
a { a {
position: relative; position: relative;
display: block; display: block;
...@@ -23,25 +51,23 @@ ...@@ -23,25 +51,23 @@
width: 25%; width: 25%;
text-align: center; text-align: center;
height: 100%; height: 100%;
line-height: 56px; line-height: 43px;
font-size: 14px; font-size: 12px;
font-weight: 300;
&:after { &:after {
content: ''; content: '';
width: 0; width:70%;
height: 0; height:0;
margin-left: -10px; position:absolute;
position: absolute; left: 15%;
left: 50%; bottom: 0;
bottom: -10px; border: 1px solid transparent;
border-width: 10px 10px 0;
border-style: solid;
border-color: transparent transparent transparent; /*灰 透明 透明*/
} }
&.active { &.active {
font-size: px; font-size: 15px;
color: #b63e43; color: #ff4a4a;
&:after { &:after {
border-color: #282d3a transparent transparent; /*灰 透明 透明*/ border-color:#ff2d41;
} }
} }
} }
...@@ -49,40 +75,50 @@ ...@@ -49,40 +75,50 @@
& > .commission-list { & > .commission-list {
margin-top: 18px; margin-top: 18px;
& > p { & > p {
color: #84868a; color: #949494;
font-size: 14px; font-size: 12px;
text-align: center; text-align: center;
font-weight: lighter;
} }
& > div { & > .rate {
text-align: center; padding: 30px 46px 0 46px;
padding: 30px 30px 0 30px; background: #fff;
background: #282d3a; & > .row {
& > table { padding-bottom: 10px;
width: 100%; font-size: 12px;
color: #757575;
border-collapse: collapse; &.title {
color: #fff; margin-bottom: 20px;
font-weight: lighter; padding-bottom: 10px;
thead { font-size: 14px;
th { color: #1c1c1c;
padding: 10px 0; font-weight: normal;
font-weight: lighter; border-bottom: 1px solid #808594;
border-bottom: 1px solid #808594; }
& > .col-xs-6 {
&:first-child {
padding-left: 64px;
}
&:last-child {
padding-right: 64px;
text-align: right;
} }
} }
tbody { & > .col-xs-4 {
td { &:nth-child(2){
padding-top: 20px;
text-align: center; text-align: center;
} }
&:nth-child(3){
text-align: right;
}
} }
} }
& > h1 { & > h1 {
margin: 30px -30px 0 -30px; margin: 20px -46px 0 -46px;
padding: 10px 0 10px 30px; padding: 10px 0 10px 30px;
font-size: 18px; font-size: 14px;
font-weight: lighter; background: #e6eef1;
background: #323743; font-weight: normal;
text-align: left; text-align: left;
} }
} }
...@@ -90,15 +126,16 @@ ...@@ -90,15 +126,16 @@
& > .tips { & > .tips {
margin-bottom: 20px; margin-bottom: 20px;
padding: 20px 30px; padding: 20px 30px;
background: #282d3a; background: #fff;
& > p { & > p {
position: relative; position: relative;
padding-bottom: 10px;
&:before { &:before {
content: ''; content: '';
display: block; display: block;
width: 100%; width: 100%;
height: 0; height: 0;
border-bottom: 1px solid #808594; border-bottom: 1px solid #7e7e7e;
} }
&:after { &:after {
content: '风险揭示'; content: '风险揭示';
...@@ -107,21 +144,16 @@ ...@@ -107,21 +144,16 @@
left: 50%; left: 50%;
top: -10px; top: -10px;
margin-left: -15%; margin-left: -15%;
font-size: 18px; font-size: 15px;
font-weight: normal; font-weight: normal;
background: #282d3a; background: #fff;
} }
} }
& > table { & > .list {
font-size: 12px; font-size: 12px;
font-weight: lighter; font-weight: 300;
td { .col-xs-3 {
line-height: 18px; color: #1c1c1c;
}
tr td:first-child {
color: #84868a;
vertical-align: top;
font-weight: normal;
} }
} }
} }
......
<!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="./product-infos01.css"/>
<title>项目详情-基本要素</title>
</head>
<body>
<section class="main">
<header>
<a href="" class="active">基本要素</a>
<a href="">费率收益</a>
<a href="">相关材料</a>
<a href="">募集账户</a>
</header>
<section class="key-infos">
<!-- 暂无基本要素信息 -->
<p>* 暂无基本要素信息</p>
<!-- 有基本要素信息 -->
<!--<table>-->
<!--<colgroup>-->
<!--<col width="22%">-->
<!--<col width="78%">-->
<!--</colgroup>-->
<!--<tbody>-->
<!--<tr>-->
<!--<th>总规模:</th>-->
<!--<td>2亿</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>结算模式:</th>-->
<!--<td>半年付息</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>认购起点:</th>-->
<!--<td>100万起</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>发行方:</th>-->
<!--<td>XX信托有限公司</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>资金用途:</th>-->
<!--<td>贵州生遵义市余庆县傲溪镇至关心镇道路工程建设</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>融资主体:</th>-->
<!--<td>余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>担保主体:</th>-->
<!--<td>余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<th>亮点风投:</th>-->
<!--<td>土地抵押低余50%,海纳公司提供评估总价为4.17亿的出土地抵押,并在余庆县国土局办理抵押登记。</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
</section>
</section>
<script src="./common.js"></script>
<script src="product-infos01.js"></script>
</body>
</html>
<!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="./product-infos02.css"/>
<title>项目详情-募集账户</title>
</head>
<body>
<section class="main">
<header>
<a href="">基本要素</a>
<a href="">费率收益</a>
<a href="">相关材料</a>
<a href="" class="active">募集账户</a>
</header>
<div>
<!-- 没有募集账户信息 -->
<!--<p>* 暂无募集账户信息</p>-->
<!-- 有募集账户信息 -->
<table>
<colgroup>
<col width="35%">
<col width="65%">
</colgroup>
<tbody>
<tr>
<td>开户名:</td>
<td>嘉兴惠博投资管理有限公司</td>
</tr>
<tr>
<td>募集银行:</td>
<td>中信银行北京万达广场支行</td>
</tr>
<tr>
<td>募集账户:</td>
<td>8888 8888 8888 8888 888</td>
</tr>
<tr>
<td>打款备注:</td>
<td>请务必从您本人的银行账户转出账款,并在汇款备注中注明"吴超认购华服创银9号"</td>
</tr>
</tbody>
</table>
</div>
</section>
<script src="./common.js"></script>
<script src="./product-infos02.js"></script>
</body>
</html>
<!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="./product-infos04.css"/>
<title>相关材料</title>
</head>
<body>
<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>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
$END$
</body>
</html>
/** /**
* Created by liaili on 16/8/26. * Created by liaili on 16/8/26.
*/ */
import './product-infos04.html'; import './product-points.html';
import './product-infos04.less'; import './product-infos04.less';
@import "normalize.less"; @import "normalize.less";
:global{
:global {
body { body {
background: #151f2c; background: #f1f6f8;
font-weight: lighter; font-weight: 200;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
} }
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #353535;
} }
.main { .main {
font-weight: lighter; color: #353535;
color: #fff; & > header {
header { height:43px;
background: #282d3a; background: #fff;
height: 56px;
a { a {
position: relative; position: relative;
display: block; display: block;
...@@ -21,25 +23,23 @@ ...@@ -21,25 +23,23 @@
width: 25%; width: 25%;
text-align: center; text-align: center;
height: 100%; height: 100%;
line-height: 56px; line-height: 43px;
font-size: 14px; font-size: 12px;
font-weight: 300;
&:after { &:after {
content: ''; content: '';
width:0; width:70%;
height:0; height:0;
margin-left: -10px;
position:absolute; position:absolute;
left: 50%; left: 15%;
bottom: -10px; bottom: 0;
border-width:10px 10px 0; border: 1px solid transparent;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
} }
&.active { &.active {
font-size: 18px; font-size: 15px;
color: #b63e43; color: #ff4a4a;
&:after { &:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/ border-color:#ff2d41;
} }
} }
} }
...@@ -47,19 +47,20 @@ ...@@ -47,19 +47,20 @@
.material { .material {
margin-top: 14px; margin-top: 14px;
& > p { & > p {
color: #84868a; color: #949494;
font-size: 14px; font-size: 12px;
text-align: center; text-align: center;
font-weight: lighter;
} }
& > div { & > div {
background: #282d3a; background: #fff;
& > h1 { & > h1 {
margin: 0; margin: 0;
padding: 20px; padding: 14px 30px;
border-bottom: 1px solid #454a57; border-bottom: 1px solid #e7eff2;
font-size: 18px; font-size: 14px;
font-weight: lighter; font-weight: normal;
} }
& > p { & > p {
margin: 0; margin: 0;
...@@ -67,24 +68,23 @@ ...@@ -67,24 +68,23 @@
a { a {
position: relative; position: relative;
display: block; display: block;
padding: 20px 60px 20px 110px; padding: 16px 40px 16px 82px;
font-size: 12px; font-size: 12px;
text-align:justify; text-align: justify;
background-size: 30px; background: url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png) no-repeat 40px center;
background: url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png)no-repeat 60px center; background-size: 22px;
background-size:8%;
&:hover { &:hover {
background-size: 30px; background: #f1f6f8 url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png) no-repeat 40px center;
background: #151f2c url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png)no-repeat 60px center; background-size: 22px;
} }
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
left:46px; left: 30px;
bottom:0; bottom: 0;
right:50px; right: 30px;
height: 0; height: 0;
border-bottom: 1px solid #454a57; border-bottom: 1px solid #e7eff2;
} }
&:last-child:after { &:last-child:after {
width: 0; width: 0;
......
<!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="./product-infos01.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>
</header>
<section class="main">
<!-- 暂无基本要素信息 -->
<!--<p>* 暂无基本要素信息</p>-->
<!-- 有基本要素信息 -->
<div class="points">
<div class="row">
<div class="col-xs-3">总规模 :</div>
<div class="col-xs-9">2亿</div>
</div>
<div class="row">
<div class="col-xs-3">结算模式 :</div>
<div class="col-xs-9">半年付息</div>
</div>
<div class="row">
<div class="col-xs-3">认购起点 :</div>
<div class="col-xs-9">100万起</div>
</div>
<div class="row">
<div class="col-xs-3">发行方 :</div>
<div class="col-xs-9">XX信托有限公司</div>
</div>
<div class="row">
<div class="col-xs-3">资金用途 :</div>
<div class="col-xs-9">贵州生遵义市余庆县傲溪镇至关心镇道路工程建设</div>
</div>
<div class="row">
<div class="col-xs-3">融资主体 :</div>
<div class="col-xs-9">余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。</div>
</div>
<div class="row">
<div class="col-xs-3">担保主体 :</div>
<div class="col-xs-9">余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。余庆县海纳投资责任有限公司。</div>
</div>
<div class="row">
<div class="col-xs-3">亮点风投 :</div>
<div class="col-xs-9">土地抵押低余50%,海纳公司提供评估总价为4.17亿的出土地抵押,并在余庆县国土局办理抵押登记。</div>
</div>
</div>
</section>
</section>
<script src="./common.js"></script>
<script src="product-infos01.js"></script>
</body>
</html>
@import 'normalize.less'; @import 'normalize.less';
:global { :global {
body { body {
background: #151f2c; background: #f1f6f8;
font-weight: lighter; font-weight: 200;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
} }
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #353535;
} }
.main { .row {
color: #fff; width: 100%;
header { &:before {
background: #282d3a; content: '';
height: 56px; display: table;
}
&:after {
content: '';
display: block;
clear: both;
}
& > .col-xs-3 {
float: left;
width: 25%;
}
& > .col-xs-9 {
float: left;
width: 75%;
}
}
.container {
color: #353535;
& > header {
height:43px;
background: #fff;
a { a {
position: relative; position: relative;
display: block; display: block;
...@@ -20,51 +42,46 @@ ...@@ -20,51 +42,46 @@
width: 25%; width: 25%;
text-align: center; text-align: center;
height: 100%; height: 100%;
line-height: 56px; line-height: 43px;
font-size: 14px; font-size: 12px;
font-weight: 300;
&:after { &:after {
content: ''; content: '';
width:0; width:70%;
height:0; height:0;
margin-left: -10px;
position:absolute; position:absolute;
left: 50%; left: 15%;
bottom: -10px; bottom: 0;
border-width:10px 10px 0; border: 1px solid transparent;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
} }
&.active { &.active {
font-size: 18px; font-size: 15px;
color: #b63e43; color: #ff4a4a;
&:after { &:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/ border-color:#ff2d41;
} }
} }
} }
} }
.key-infos { .main {
margin-top: 18px; margin-top: 18px;
& > p { & > p {
color: #949494;
font-size: 12px;
text-align: center; text-align: center;
font-size: 14px; font-weight: lighter;
color: #84868a;
} }
table { & > .points {
padding: 20px; padding: 20px 30px 0 30px;
background: #282d3a; font-size: 13px;
font-size: 14px; background: #fff;
line-height: 18px; & > .row {
th { padding-bottom: 20px;
padding: 10px 0; text-align: justify;
color: #85868a; & > .col-xs-3 {
font-weight: normal; padding-right: 11px;
vertical-align: top; color: #1c1c1c;
text-align: right; }
}
td {
padding: 10px 6px;
color: #e0e0e1;
} }
} }
......
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