Skip to content

Commit

Permalink
header
Browse files Browse the repository at this point in the history
  • Loading branch information
@yucccc
yucccc committed Jul 10, 2017
1 parent b990038 commit 3022ca8
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 37 deletions.
209 changes: 180 additions & 29 deletions src/common/header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,33 @@
<template>
<div class="box">
<header class="w">
<div>
<router-link to="/">首页</router-link>
<router-link :to="loginRouter" style="color: #f10215">{{name}}</router-link>
<router-link to="order">我的订单</router-link>
<router-link to="goods">进入商城</router-link>
<router-link class="shop" to="/cart">
<img src="/static/svg/shop.svg" alt="">
<span style="padding-right: 4px;">购物车 </span><span> (0)</span>
</router-link>
<div class="w-box">
<div class="nav-logo">
<h1>
<router-link to="/" title="锤子科技官网">Smartisan</router-link>
</h1>
</div>
<div class="right-box">
<div class="nav-list">
<router-link to="goods">全部商品</router-link>
<router-link to="/">坚果 Pro</router-link>
<router-link to="/"> Smartisan M1 / M1L </router-link>
<router-link to="/"> Smartisan OS </router-link>
<router-link to="/">欢喜云</router-link>
<router-link to="/">应用下载</router-link>
<router-link to="/">官方论坛</router-link>
</div>
<div class="nav-aside">
<div class="user">
<router-link to="user">个人中心</router-link>
</div>
<div class="shop">
<router-link to="shop"></router-link>
<span class="cart-num"><i>7</i></span>
</div>
</div>
</div>

</div>
</header>
</div>
Expand Down Expand Up @@ -41,35 +59,168 @@
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../assets/style/theme";
.shop {
display: flex;
align-items: center;
padding: 0 5px;
img {
margin-right: 4px;
margin-top: -4px;
}
}
.box {
background: #1a1a1a;
background-image: -webkit-linear-gradient(#000, #121212);
background-image: linear-gradient(#000, #121212);
width: 100%;
background: $head-col;
&:after {
border-top: 1px solid #232323;
border-top: 1px solid hsla(0, 0%, 100%, .06);
border-bottom: 1px solid #000;
border-bottom: 1px solid rgba(0, 0, 0, .4);
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
}
}
header {
height: 30px;
color: $c9;
> div {
display: flex;
justify-content: flex-end;
height: 100px;
z-index: 30;
position: relative;
}
.w-box {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
position: relative;
h1 {
height: 100%;
display: flex;
align-items: center;
> a {
background: url(/static/images/[email protected]) no-repeat 50%;
background-size: cover;
display: block;
height: 40px;
width: 50px;
text-indent: -9999px;
background-position: 0 0;
}
}
.nav-list {
display: flex;
justify-content: center;
align-items: center;
a {
color: $c9;
line-height: 30px;
color: #c8c8c8;
display: block;
font-size: 14px;
padding: 0 25px;
&:hover {
color: #fff;
}
}
}
.nav-aside {
position: relative;
&:before {
background: #333;
background: hsla(0, 0%, 100%, .2);
content: " ";
height: 13px;
width: 1px;
overflow: hidden;
position: absolute;
top: 4px;
left: 0;
}
}
.right-box {
display: flex;
}
.nav-aside {
display: flex;
}
.user {
margin-left: 41px;
width: 36px;
position: relative;
&:hover {
a:before {
content: " ";
background-position: -5px 0;
}
}
a {
position: relative;
width: 36px;
height: 20px;
display: block;
text-indent: -9999px;
&:before {
content: " ";
position: absolute;
left: 8px;
width: 20px;
top: 0;
height: 20px;
background: url(/static/images/[email protected]) -5px 0;
background-size: 240px 107px;
background-position: -155px 0;
transition: none;
}
}
a + a {
margin-left: 10px;
}
.shop {
position: relative;
float: left;
margin-left: 21px;
width: 61px;
&:hover {
a:before {
content: " ";
background-position: 0 -22px;
}
}
a {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: block;
right: 0;
z-index: 1;
&:before {
display: block;
height: 100%;
content: " ";
width: 30px;
background: url(/static/images/[email protected]) 0 -22px;
background-size: 240px 107px;
background-position: -150px -22px;
}
}
.cart-num {
position: relative;
display: block;
margin-left: 31px;
margin-top: -1px;
min-width: 30px;
text-indent: 0;
line-height: 20px;
> i {
background: #eb746b;
background-image: -webkit-linear-gradient(#eb746b, #e25147);
background-image: linear-gradient(#eb746b, #e25147);
box-shadow: inset 0 0 1px hsla(0, 0%, 100%, .15), 0 1px 2px hsla(0, 0%, 100%, .15);
text-align: center;
font-style: normal;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 10px;
color: #fff;
font-size: 12px;
}
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/page/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<div>
<y-header></y-header>
<!--logo搜索块-->
<div class="logo-box">
<div class="w pr">
<!--<div class="pa logo"><a href="/" style="display: block;height: 100%"></a></div>-->
<div class="search">
<y-search></y-search>
</div>
</div>
</div>
<!--<div class="logo-box">-->
<!--<div class="w pr">-->
<!--&lt;!&ndash;<div class="pa logo"><a href="/" style="display: block;height: 100%"></a></div>&ndash;&gt;-->
<!--<div class="search">-->
<!--<y-search></y-search>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<router-view></router-view>
<y-footer></y-footer>
</div>
Expand Down

0 comments on commit 3022ca8

Please sign in to comment.