Commit acb8eeea authored by liaili's avatar liaili

3

parent 7e7e29f1
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default">
<div class="am-header-left am-header-nav">
<a href="#left-link" class="">
<img class="am-header-icon-custom" src="data:image/svg+xml;charset&#x3D;utf-8,&lt;svg xmlns&#x3D;&quot;http://www.w3.org/2000/svg&quot; viewBox&#x3D;&quot;0 0 12 20&quot;&gt;&lt;path d&#x3D;&quot;M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z&quot; fill&#x3D;&quot;%23fff&quot;/&gt;&lt;/svg&gt;" alt=""/>
</a>
</div>
<h1 class="am-header-title">
<img src="http://s.amazeui.org/media/i/brand/amazeui-cw.png" />
</h1>
<div class="am-header-right am-header-nav">
<a href="#right-link" class="">
<img class="am-header-icon-custom" src="data:image/svg+xml;charset&#x3D;utf-8,&lt;svg xmlns&#x3D;&quot;http://www.w3.org/2000/svg&quot; viewBox&#x3D;&quot;0 0 42 26&quot; fill&#x3D;&quot;%23fff&quot;&gt;&lt;rect width&#x3D;&quot;4&quot; height&#x3D;&quot;4&quot;/&gt;&lt;rect x&#x3D;&quot;8&quot; y&#x3D;&quot;1&quot; width&#x3D;&quot;34&quot; height&#x3D;&quot;2&quot;/&gt;&lt;rect y&#x3D;&quot;11&quot; width&#x3D;&quot;4&quot; height&#x3D;&quot;4&quot;/&gt;&lt;rect x&#x3D;&quot;8&quot; y&#x3D;&quot;12&quot; width&#x3D;&quot;34&quot; height&#x3D;&quot;2&quot;/&gt;&lt;rect y&#x3D;&quot;22&quot; width&#x3D;&quot;4&quot; height&#x3D;&quot;4&quot;/&gt;&lt;rect x&#x3D;&quot;8&quot; y&#x3D;&quot;23&quot; width&#x3D;&quot;34&quot; height&#x3D;&quot;2&quot;/&gt;&lt;/svg&gt;" alt=""/>
</a>
</div>
</header>
</body>
</html>
...@@ -3,3 +3,5 @@ ...@@ -3,3 +3,5 @@
*/ */
import './navitation-friend.html'; import './navitation-friend.html';
import './navitation-friend.less'; import './navitation-friend.less';
...@@ -25,39 +25,49 @@ ...@@ -25,39 +25,49 @@
<span></span> <span></span>
</div> </div>
<div> <div>
<span>01.</span> <a href="" class="clear-float">
<span>18766773541</span> <span>01.</span>
<span class="success-red">抢到了</span> <span>18766773541</span>
<span>已成单</span> <span class="success-red">抢到了</span>
<span> <strong> > </strong> </span> <span>已成单</span>
<span> <strong> > </strong> </span>
</a>
</div> </div>
<div> <div>
<span>02.</span> <a href="" class="clear-float">
<span>18766773541</span> <span>02.</span>
<span class="success-red">抢到了</span> <span>18766773541</span>
<span>已成单</span> <span class="success-red">抢到了</span>
<span> <strong> > </strong> </span> <span>已成单</span>
<span> <strong> > </strong> </span>
</a>
</div> </div>
<div> <div>
<span>03.</span> <a href="" class="clear-float">
<span>18766773541</span> <span>03.</span>
<span>未绑定</span> <span>18766773541</span>
<span>已成单</span> <span>未绑定</span>
<span> <strong> > </strong> </span> <span>已成单</span>
<span> <strong> > </strong> </span>
</a>
</div> </div>
<div> <div>
<span>04.</span> <a href="" class="clear-float">
<span>18766773541</span> <span>04.</span>
<span class="lose-green">被抢了</span> <span>18766773541</span>
<span>未成单</span> <span class="lose-green">被抢了</span>
<span> <strong> </strong> </span> <span>未成单</span>
<span> <strong> </strong> </span>
</a>
</div> </div>
<div> <div>
<span>05.</span> <a href="" class="clear-float">
<span>18766773541</span> <span>05.</span>
<span class="lose-green">被抢了</span> <span>18766773541</span>
<span>已成单</span> <span class="lose-green">被抢了</span>
<span> <strong> </strong> </span> <span>已成单</span>
<span> <strong> </strong> </span>
</a>
</div> </div>
</div> </div>
<div class="explain"> <div class="explain">
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
} }
a { a {
text-decoration: none; text-decoration: none;
color: #000000;
} }
body { body {
color: #fff; color: #fff;
...@@ -55,6 +56,9 @@ ...@@ -55,6 +56,9 @@
border-bottom: 1px solid #969696; border-bottom: 1px solid #969696;
color: #222228; color: #222228;
font-size: 0.4rem; font-size: 0.4rem;
a {
display: block;
}
span { span {
display: block; display: block;
float: left; float: left;
...@@ -91,6 +95,11 @@ ...@@ -91,6 +95,11 @@
} }
} }
.clear-float:after {
content: '';
display: block;
clear: both;
}
.success-red { .success-red {
color: #ff494b; color: #ff494b;
} }
...@@ -141,7 +150,7 @@ ...@@ -141,7 +150,7 @@
} }
.navitation-friend { .navitation-friend {
a { a {
width: 100%; width: 10rem;
display: block; display: block;
padding:0.55rem; padding:0.55rem;
text-align: center; text-align: center;
......
...@@ -9,15 +9,44 @@ ...@@ -9,15 +9,44 @@
</head> </head>
<body> <body>
<header></header> <header></header>
<div class="banner"> <section>
<img src="https://res.fudou6.com/c/4/20160805/m9pYmFubmVyLTAy_179x179.png" alt=""> <div class="banner">
<span> <img src="https://res.fudou6.com/c/4/20160805/m9pYmFubmVyLTAy_179x179.png" alt="">
<span>
被邀请人手机号码 <br>
<strong>18766773541</strong>
</span> </span>
</div> </div>
<div class="info"></div> <div class="info">
<div class="order-record"></div> <div>
<h3>绑定信息</h3>
<a href="javascript:;">抢到了</a>
</div>
<div>
<span class="fl">受邀时间:</span>
<time class="fr">2016-7-30 10:23:33</time>
</div>
<div>
<span class="fl">注册时间:</span>
<time class="fr">2016-7-30 10:23:33</time>
</div>
</div>
<div class="order-record">
<h3>成单记录</h3>
<div>
<span class="fl">成交单数:</span>
<span class="fr">3单</span>
</div>
<div>
<span class="fl">成交总额:</span>
<span class="fr">1000万</span>
</div>
<div>
<span class="fl">累计获佣:</span>
<span class="fr">10000元</span>
</div>
</div>
</section>
<script src="./common.js"></script> <script src="./common.js"></script>
<script src="./register-info.js"></script> <script src="./register-info.js"></script>
<script src="./flexible.debug.js"></script> <script src="./flexible.debug.js"></script>
......
:global{ :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: #000;
font-family: Microsoft YaHei, simhei, Tahoma, Arial;
}
header {
height: 2rem;
background: #f00;
}
.banner {
padding: 1rem;
background: #353950;
position: relative;
color: #fff;
img {
width: 3rem;
}
span {
display: block;
position: absolute;
top:1.5rem;
right: 1.2rem;
font-size: 0.5rem;
line-height: 0.8rem;
strong {
font-size: 0.6rem;
font-weight: normal;
}
}
}
.info {
background: #ececec;
div {
&:nth-child(1) {
height: 1.6rem;
padding: 0 0.5rem;
border-bottom: 2px solid #b2b2b2;
h3 {
float: left;
line-height: 1.6rem;
font-size: 0.6rem;
}
a {
padding: 0.2rem 0.3rem;
font-size: 0.5rem;
float: right;
background: #ff494b;
border-radius: 0.1rem;
color: #fff;
margin-top: 0.3rem;
}
}
&:nth-child(2),
&:nth-child(3) {
width: 9rem;
margin: 0 auto;
height: 1.5rem;
line-height: 1.3rem;
font-size: 0.5rem;
}
&:nth-child(2) {
border-bottom: 1px solid #cecece;
}
}
}
.order-record {
margin-top: 0.5rem;
background: #ececec;
h3 {
height: 1.6rem;
line-height: 1.6rem;
font-size: 0.6rem;
padding-left: 0.5rem;
border-bottom: 2px solid #b2b2b2;
}
div {
width: 9rem;
margin: 0 auto;
height: 1.3rem;
line-height: 1.3rem;
font-size: 0.5rem;
border-top:1px solid #cecece;
&:first-child {
border-top: 0;
}
}
}
.fl {
float: left;
}
.fr {
float: right;
}
} }
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