This commit is contained in:
cookfront 2017-03-30 16:18:36 +08:00
parent 50d87fa634
commit 09be7c9323
3 changed files with 38 additions and 17 deletions

View File

@ -9,9 +9,13 @@
<a href="#">首页</a> <a href="#">首页</a>
</li> </li>
<li> <li>
<a href="#" class="active">组件</a> <a href="#" class="active">基础组件</a>
</li>
<li>
<a href="#">业务组件</a>
</li> </li>
</ul> </ul>
<a href="#" class="github-logo">Github</a>
</div> </div>
<div class="main-content"> <div class="main-content">
<div class="page-container clearfix"> <div class="page-container clearfix">

View File

@ -70,6 +70,8 @@ ul, ol {
height: 60px; height: 60px;
background-color: #fbfbfb; background-color: #fbfbfb;
overflow: hidden; overflow: hidden;
padding-right: 62px;
position: relative;
} }
.page-header-logo { .page-header-logo {
@ -88,7 +90,6 @@ ul, ol {
.page-header-navs { .page-header-navs {
float: right; float: right;
margin-right: 50px;
li { li {
float: left; float: left;
@ -99,14 +100,28 @@ ul, ol {
line-height: 60px; line-height: 60px;
color: #333; color: #333;
font-size: 16px; font-size: 16px;
margin: 0 35px; margin: 0 20px;
&.active { &.active,
&:hover {
color: #3388FF; color: #3388FF;
} }
} }
} }
.github-logo {
position: absolute;
top: 19px;
right: 20px;
width: 22px;
height: 0;
padding-top: 22px;
overflow: hidden;
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
background-size: contain;
background-repeat: no-repeat;
}
.main-content { .main-content {
margin: 40px 15px; margin: 40px 15px;
} }
@ -121,10 +136,11 @@ ul, ol {
.page-content { .page-content {
box-sizing: border-box; box-sizing: border-box;
padding: 0 40px;
flex: 1; flex: 1;
section { section {
padding: 0 40px;
> h1, > h1,
> h2, > h2,
> h3, > h3,

View File

@ -6,7 +6,7 @@
class="footer-nav__link footer-nav__left" class="footer-nav__link footer-nav__left"
@click="handleNavClick('prev')"> @click="handleNavClick('prev')">
<zan-icon name="arrow"></zan-icon> <zan-icon name="arrow"></zan-icon>
{{ leftNav.title }} <span>{{ leftNav.title }}</span>
</a> </a>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
@ -14,7 +14,7 @@
class="footer-nav__link footer-nav__right" class="footer-nav__link footer-nav__right"
@click="handleNavClick('next')"> @click="handleNavClick('next')">
<zan-icon name="arrow"></zan-icon> <zan-icon name="arrow"></zan-icon>
{{ rightNav.title }} <span>{{ rightNav.title }}</span>
</a> </a>
</div> </div>
</template> </template>
@ -85,27 +85,26 @@ export default {
<style> <style>
@component-namespace footer { @component-namespace footer {
@b nav { @b nav {
padding: 24px 0; padding: 24px 40px;
font-size: 30px;
overflow: hidden; overflow: hidden;
border-top: 1px solid #e5e5e5;
@e link { @e link {
color: #3388FF; color: #3388FF;
overflow: hidden; overflow: hidden;
padding-top: 35px;
position: relative; position: relative;
font-size: 20px;
line-height: 1.5;
.zan-icon { .zan-icon {
box-sizing: border-box;
width: 20px; width: 20px;
display: block;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 16px;
border: 2px solid #3388FF; border: 2px solid #3388FF;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
margin-bottom: 10px; margin-top: 5px;
position: absolute;
top: 0;
} }
} }
@ -113,8 +112,9 @@ export default {
float: left; float: left;
.zan-icon { .zan-icon {
float: left;
transform: rotate(180deg); transform: rotate(180deg);
left: 0; margin-right: 10px;
} }
} }
@ -122,7 +122,8 @@ export default {
float: right; float: right;
.zan-icon { .zan-icon {
right: 0; float: right;
margin-left: 10px;
} }
} }
} }