vue饿了么学习-第十篇（header样式）

1.App.vue中路由请求到的seller数据，把它绑定到m-header头部组件中去，

<m-header :seller="seller"></m-header>

2.打开header组件，用props属性去接收刚才传过来的值，

<script type="text/ecmascript-6">
export default {
//用props去接收从App.vue传入过来的seller数据
props: {
seller: {
type: Object
}
},

（这里可以测试一下，methods下创建一个函数，并把这个函数挂在到m-header标签上，打印一下seller看看，有没有数据，如果有就代表数据传入成功）

3.写内容

<template>
<div class="m-header">
<div class="m-content">
<div class="m-content-avatar">
<img with="64" height="64" :src="seller.avatar">
</div>
<div class="m-content-cnt">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description}}/{{seller.deliveryTime}}分钟送达
</div>
<div v-if="seller.supports" class="support">
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</div>
</div>
<div class="bulletin"></div>
</div>
</template>

4.样式内容如下：

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/styles/mixin.styl"
.m-header
color: #fff
background: #000
height:300px
div
margin: 0px
padding: 0px
height:auto
.m-content
padding: 24px 12px 18px 24px
font-size: 0
.m-content-avatar
display: inline-block
vertical-align: top
img
border-radius: 2px
.m-content-cnt
display: inline-block
margin-left:16px;
.title
margin:2px 0 8px 0
.brand
display: inline-block
vertical-align top
width: 30px
height: 18px
bg-img("brand")
background-size: 30px 18px
background-repeat: no-repeat
.name
margin-left: 6px
font-size: 16px
line-height: 18px
font-weight:bold
.description
margin-bottom: 10px
line-height: 12px
font-size: 12px
.support
.icon
display: inline-block
width: 12px
height: 12px
margin-right 4px
background-size 12px 12px
background-repeat: no-repeat
&.decrease
bg-img("decrease_1")
&.discount
bg-img("discount_1")
&.guarantee
bg-img("guarantee_1")
&.invoice
bg-img("invoice_1")
&.special
bg-img("special_1")
.text
line-height: 12px
font-size: 12px

</style>

5.js内容如下

<script type="text/ecmascript-6">
export default {
//用props去接收从App.vue传入过来的seller数据
props: {
seller: {
type: Object
}
},
created() {
this.classMap = ['decrease','discount','special','invoice','guarantee']
}
}
</script>

6.针对于style中多出来的样式，主要是针对于bg-img做了处理，代码写在了mixin.styl中

@import "./base"
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color

bg-img($url)
background-image: url($url + '@2x.png')
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio: 3)
background-image: url($url + '@3x.png')

7.mixin.styl中引入的base代码是在同级目录下创建的一个基本样式，内容如下（base.styl）

body, html
line-height: 1
font-weight: 200
font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', Arial, sans-serif