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';
:global {
body {
background: #151f2c;
font-weight: lighter;
background: #f1f6f8;
font-weight: 200;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
}
a {
text-decoration: none;
color: #fff;
color: #353535;
}
.main {
color: #fff;
header {
height: 56px;
background: #282d3a;
.container {
color: #353535;
& > header {
height:43px;
background: #fff;
a {
position: relative;
display: block;
......@@ -20,70 +22,87 @@
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
line-height: 43px;
font-size: 12px;
font-weight: 300;
&:after {
content: '';
width:0;
width:70%;
height:0;
margin-left: -10px;
position:absolute;
left: 50%;
bottom: -10px;
border-width:10px 10px 0;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
left: 15%;
bottom: 0;
border: 1px solid transparent;
}
&.active {
font-size: 18px;
color: #b63e43;
font-size: 15px;
color: #ff4a4a;
&:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/
border-color:#ff2d41;
}
}
}
}
& > div {
& > .main {
margin-top: 10px;
& > p {
color: #84868a;
font-size: 14px;
color: #949494;
font-size: 12px;
text-align: center;
font-weight: lighter;
}
.row {
width: 100%;
&:before {
content: '';
display: table;
}
&:after {
content: '';
display: block;
clear: both;
}
& > .col-xs-4 {
float: left;
width: 33.33%;
}
& > .col-xs-8 {
float: left;
width: 66.67%;
}
}
& > table {
padding: 30px;
background: #282d3a;
td {
padding: 20px 0;
font-size: 14px;
vertical-align: top;
.account {
padding: 0 25px;
background: #fff;
font-size: 13px;
& > .row {
padding: 10px 0;
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;
& > .col-xs-4 {
padding-left: 32px;
background: url(https://res.fudou6.com/c/4/20160918/vwxaWNvbnNfMDM=_36x294.png)no-repeat;
background-size:18px;
color: #1c1c1c;
}
&:nth-child(1) {
& > .col-xs-4 {
background-position: 0 1px;
}
tr:nth-child(1){
td {
background-position: 0 16px;
}
&:nth-child(2) {
& > .col-xs-4 {
background-position: 0 -43px;
}
tr:nth-child(2){
td {
background-position: 0 -46px;
}
&:nth-child(3) {
& > .col-xs-4 {
background-position: 0 -87px;
}
tr:nth-child(3){
td {
background-position: 0 -110px;
}
&:nth-child(4) {
& > .col-xs-4 {
background-position: 0 -131px;
}
tr:nth-child(4){
td {
background-position: 0 -174px;
}
}
}
......
......@@ -10,107 +10,104 @@
<body>
<section class="main">
<header>
<a href="">基本要素</a>
<a href="" class="active">费率收益</a>
<a href="">相关材料</a>
<a href="">募集账户</a>
<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>
</header>
</header>
<section class="commission-list">
<!-- 没有费率收益数据 -->
<!--<p>* 暂无费率收益信息</p>-->
<!-- 有费率收益数据 -->
<div>
<table>
<colgroup>
<col width="33.33%">
<col width="33.33%">
<col width="33.33%">
</colgroup>
<div class="rate">
<!-- 状态为募集中,展示 认购金额 参考收益 佣金比率 -->
<!-- 状态不为募集中,展示 认购金额 参考收益 -->
<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>
<div class="row title">
<div class="col-xs-4">认购金额</div>
<div class="col-xs-4">参考收益</div>
<div class="col-xs-4">佣金比率</div>
<!--<div class="col-xs-6">认购金额</div>-->
<!--<div class="col-xs-6">参考收益</div>-->
</div>
<div class="row">
<div class="col-xs-4">100万</div>
<div class="col-xs-4">8%</div>
<div class="col-xs-4">3%</div>
<!--<div class="col-xs-6">100万</div>-->
<!--<div class="col-xs-6">8%</div>-->
</div>
<div class="row">
<div class="col-xs-4">100-300万</div>
<div class="col-xs-4">9%</div>
<div class="col-xs-4">2%</div>
<!--<div class="col-xs-6">100-300万</div>-->
<!--<div class="col-xs-6">9%</div>-->
</div>
<div class="row">
<div class="col-xs-4">300万以上</div>
<div class="col-xs-4">10%</div>
<div class="col-xs-4">1%</div>
<!--<div class="col-xs-6">300万以上</div>-->
<!--<div class="col-xs-6">10%</div>-->
</div>
<h1>结佣方式:打款结佣</h1>
</div>
</section>
<div class="tips">
<p></p>
<table>
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<tbody>
<tr>
<td>政策风险:</td>
<td>
<div class="list">
<div class="row">
<div class="col-xs-3">政策风险:</div>
<div class="col-xs-9">
国家或地方相关政策如货币政策、财政政策、税收政
策、产业政策、投资政策及相关配套法规的调整与变
化,可能会影响基金项下证券投资的收益水平。
</td>
</tr>
<tr>
<td>市场风险:</td>
<td>
</div>
</div>
<div class="row">
<div class="col-xs-3">市场风险:</div>
<div class="col-xs-9">
本基金项下的基金资金主要用于证券投资,因证券市
场受经济周期、上市公司经营情况、市场竞争环境等
相关因素影响,价格波动较大,因此证券投资存在较
大市场风险,本基金项下的基金资金存在亏损甚至基
金本金全部亏损的可能。
</td>
</tr>
<tr>
<td>管理风险:</td>
<td>
金本金全部亏损的可能。
</div>
</div>
<div class="row">
<div class="col-xs-3">管理风险:</div>
<div class="col-xs-9">
本基金项下的基金资金主要用于证券投资,因证券市
场受经济周期、上市公司经营情况、市场竞争环境等
相关因素影响,价格波动较大,因此证券投资存在较
大市场风险,本基金项下的基金资金存在亏损甚至基
金本金全部亏损的可能。
</td>
</tr>
<tr>
<td>托管机构及证券经纪人的经营及操作风险:</td>
<td>
</div>
</div>
<div class="row">
<div class="col-xs-3">托管机构及证券经纪人的经营及操作风险:</div>
<div class="col-xs-9">
基金存续期间,若基
金资金托管机构及证券经纪人出现经营情况恶化、不
按基金文件约定管理基金资金或其他违法违规行为,
则可能因此对基金财产造成不利影响。
</td>
</tr>
<tr>
<td>其他风险:</td>
<td>
</div>
</div>
<div class="row">
<div class="col-xs-3">其他风险:</div>
<div class="col-xs-9">
本基金不排除其他政治、经济、法律、自然灾害等不
可抗力因素对基金财产产生影响的可能。
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<script src="./common.js"></script>
......
......@@ -2,20 +2,48 @@
:global {
body {
background: #151f2c;
background: #f1f6f8;
font-size: 14px;
color: #fff;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
}
a {
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 {
color: #fff;
color: #353535;
& > header {
background: #282d3a;
height: 56px;
height:43px;
background: #fff;
a {
position: relative;
display: block;
......@@ -23,25 +51,23 @@
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
line-height: 43px;
font-size: 12px;
font-weight: 300;
&: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; /*灰 透明 透明*/
width:70%;
height:0;
position:absolute;
left: 15%;
bottom: 0;
border: 1px solid transparent;
}
&.active {
font-size: px;
color: #b63e43;
font-size: 15px;
color: #ff4a4a;
&:after {
border-color: #282d3a transparent transparent; /*灰 透明 透明*/
border-color:#ff2d41;
}
}
}
......@@ -49,40 +75,50 @@
& > .commission-list {
margin-top: 18px;
& > p {
color: #84868a;
font-size: 14px;
text-align: center;
}
& > div {
color: #949494;
font-size: 12px;
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;
}
& > .rate {
padding: 30px 46px 0 46px;
background: #fff;
& > .row {
padding-bottom: 10px;
font-size: 12px;
color: #757575;
&.title {
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 14px;
color: #1c1c1c;
font-weight: normal;
border-bottom: 1px solid #808594;
}
& > .col-xs-6 {
&:first-child {
padding-left: 64px;
}
&:last-child {
padding-right: 64px;
text-align: right;
}
}
tbody {
td {
padding-top: 20px;
& > .col-xs-4 {
&:nth-child(2){
text-align: center;
}
&:nth-child(3){
text-align: right;
}
}
}
& > h1 {
margin: 30px -30px 0 -30px;
margin: 20px -46px 0 -46px;
padding: 10px 0 10px 30px;
font-size: 18px;
font-weight: lighter;
background: #323743;
font-size: 14px;
background: #e6eef1;
font-weight: normal;
text-align: left;
}
}
......@@ -90,15 +126,16 @@
& > .tips {
margin-bottom: 20px;
padding: 20px 30px;
background: #282d3a;
background: #fff;
& > p {
position: relative;
padding-bottom: 10px;
&:before {
content: '';
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid #808594;
border-bottom: 1px solid #7e7e7e;
}
&:after {
content: '风险揭示';
......@@ -107,21 +144,16 @@
left: 50%;
top: -10px;
margin-left: -15%;
font-size: 18px;
font-size: 15px;
font-weight: normal;
background: #282d3a;
background: #fff;
}
}
& > table {
& > .list {
font-size: 12px;
font-weight: lighter;
td {
line-height: 18px;
}
tr td:first-child {
color: #84868a;
vertical-align: top;
font-weight: normal;
font-weight: 300;
.col-xs-3 {
color: #1c1c1c;
}
}
}
......
<!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.
*/
import './product-infos04.html';
import './product-points.html';
import './product-infos04.less';
@import "normalize.less";
:global{
:global {
body {
background: #151f2c;
font-weight: lighter;
background: #f1f6f8;
font-weight: 200;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
}
a {
text-decoration: none;
color: #fff;
color: #353535;
}
.main {
font-weight: lighter;
color: #fff;
header {
background: #282d3a;
height: 56px;
color: #353535;
& > header {
height:43px;
background: #fff;
a {
position: relative;
display: block;
......@@ -21,25 +23,23 @@
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
line-height: 43px;
font-size: 12px;
font-weight: 300;
&:after {
content: '';
width:0;
width:70%;
height:0;
margin-left: -10px;
position:absolute;
left: 50%;
bottom: -10px;
border-width:10px 10px 0;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
left: 15%;
bottom: 0;
border: 1px solid transparent;
}
&.active {
font-size: 18px;
color: #b63e43;
font-size: 15px;
color: #ff4a4a;
&:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/
border-color:#ff2d41;
}
}
}
......@@ -47,19 +47,20 @@
.material {
margin-top: 14px;
& > p {
color: #84868a;
font-size: 14px;
color: #949494;
font-size: 12px;
text-align: center;
font-weight: lighter;
}
& > div {
background: #282d3a;
background: #fff;
& > h1 {
margin: 0;
padding: 20px;
border-bottom: 1px solid #454a57;
font-size: 18px;
font-weight: lighter;
padding: 14px 30px;
border-bottom: 1px solid #e7eff2;
font-size: 14px;
font-weight: normal;
}
& > p {
margin: 0;
......@@ -67,24 +68,23 @@
a {
position: relative;
display: block;
padding: 20px 60px 20px 110px;
padding: 16px 40px 16px 82px;
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%;
text-align: justify;
background: url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png) no-repeat 40px center;
background-size: 22px;
&:hover {
background-size: 30px;
background: #151f2c url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png)no-repeat 60px center;
background: #f1f6f8 url(https://res.fudou6.com/c/4/20160826/23rbWF0ZXJpYWwtaWNvbl8wMw==_43x43.png) no-repeat 40px center;
background-size: 22px;
}
&:after {
content: '';
position: absolute;
left:46px;
bottom:0;
right:50px;
left: 30px;
bottom: 0;
right: 30px;
height: 0;
border-bottom: 1px solid #454a57;
border-bottom: 1px solid #e7eff2;
}
&:last-child:after {
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';
:global {
body {
background: #151f2c;
font-weight: lighter;
background: #f1f6f8;
font-weight: 200;
-webkit-font-smoothing: antialiased;
font-family: "PingFang SC";
}
a {
text-decoration: none;
color: #fff;
color: #353535;
}
.main {
color: #fff;
header {
background: #282d3a;
height: 56px;
.row {
width: 100%;
&:before {
content: '';
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 {
position: relative;
display: block;
......@@ -20,51 +42,46 @@
width: 25%;
text-align: center;
height: 100%;
line-height: 56px;
font-size: 14px;
line-height: 43px;
font-size: 12px;
font-weight: 300;
&:after {
content: '';
width:0;
width:70%;
height:0;
margin-left: -10px;
position:absolute;
left: 50%;
bottom: -10px;
border-width:10px 10px 0;
border-style:solid;
border-color:transparent transparent transparent;/*灰 透明 透明*/
left: 15%;
bottom: 0;
border: 1px solid transparent;
}
&.active {
font-size: 18px;
color: #b63e43;
font-size: 15px;
color: #ff4a4a;
&:after {
border-color:#282d3a transparent transparent;/*灰 透明 透明*/
border-color:#ff2d41;
}
}
}
}
.key-infos {
.main {
margin-top: 18px;
& > p {
color: #949494;
font-size: 12px;
text-align: center;
font-size: 14px;
color: #84868a;
}
table {
padding: 20px;
background: #282d3a;
font-size: 14px;
line-height: 18px;
th {
padding: 10px 0;
color: #85868a;
font-weight: normal;
vertical-align: top;
text-align: right;
}
td {
padding: 10px 6px;
color: #e0e0e1;
font-weight: lighter;
}
& > .points {
padding: 20px 30px 0 30px;
font-size: 13px;
background: #fff;
& > .row {
padding-bottom: 20px;
text-align: justify;
& > .col-xs-3 {
padding-right: 11px;
color: #1c1c1c;
}
}
}
......
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