<template>

<div class="banner">

<img class="banner-img" src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" />

<div class="banner-info">

<div class="banner-title">大连圣亚海洋世界(AAAA景区)</div>

<div class="banner-number">

<span class="iconfont banner-icon">&#xe632</span>

39

</div>

</div>

</div>

</template>

<script>

export default{

name:'DetailBanner'

}

</script>

<style scoped>

.banner

position:relative;

overflow:hidden;

height:0;

padding-bottom:55%;

.banner-img

width:100%

.banner-info

position:absolute;

left:0;

right:0;

bottom:0;

line-height:0.6rem;

display:flex;

color:#fff;

.banner-title

flex:1;

font-size:.32rem;

padding:.2rem;

.banner-number

height:.02rem;

line-height:.02rem;

padding:.4rem;

margin-top:.14rem

border-radius: .2rem;

background:rgba(0,0,0,.8);

font-size:.24rem;

.banner-icon

font-size:.24rem;

</style>

这部分的行高和高度怎么不生效

.banner-number

height:.02rem;

line-height:.02rem;

padding:.4rem;

margin-top:.14rem

border-radius: .2rem;

background:rgba(0,0,0,.8);

font-size:.24rem;

.banner-icon

font-size:.24rem;