<div v-if="seller.supports" class="support">
<span class="icon"></span>
<span class="text">{{ seller.supports[0].description }}</span>
</div>
- 为什么要加v-if
获取数据是一个异步过程，一开始初始化seller是个空对象，空对象传给
seller的时候supports是undefined会报错所以加v-if判断一下
avatar和content会有间隙，这是因为有些空白字符在里面
解决办法：
给他们的父元素设置font-size: 0
然后给子元素设置font-size:14px
组件设计的原则：组件依赖的图片都要放到组件里面去维护
background-img
2x dpi为2用
3x dpi为3用
- 在mixin.styl中：
bg-image($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")
- header.vue
.brand
display: inline-block
width:30px
height:18px
bg-image("brand")
background-size: 30px 18px
background-repeat: no-repeat
.name
margin-left: 6px
font-size: 16px
line-height: 18px
font-weight: fold
brand和name仍然没有对齐，给brand设置vertical-align:top
背景图片根据data改变
<span class="icon" :class="classMap[seller.supports[0].type]"></span>
export default {
props: {
seller: {
type: Object
}
},
created() {
this.classMap = ['decrease','discount','special','invoice','guarantee'];
//根据support的type来的,对应css
}
}
.support
.icon
display: inline-block
width: 12px
height: 12px
margin-right: 4px
background-size: 12px 12px
background-repeat: no-repeat
&.decrease
bg-image('decrease_1')
&.discount
bg-image('discount_1')
&.guarantee
bg-image('guarantee_1')
&.invoice
bg-image('invoice_1')
&.special
bg-image('special_1')
背景图模糊效果的实现
<div class="background">
<img :src="seller.avatar" width="100%" height="100%">
</div>
.header
background: rgba(7,17,27,0.5)
.background
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: -1
filter: blur(10px)
