老师为什么我的渐变没效果

<template>
 <div class="banner">
   <img src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg">
   <div class="banner-info">
     <p class="banner-info-left">大连圣亚海洋世界(AAAA景区)</p>
     <p class="banner-info-right"><i class="iconfont">&#xe64b;</i>38</p>
   </div>
 </div>
</template>

<script>
 export default {
   name: 'DetailBanner'
 }
</script>

<style lang="stylus" scoped>
 .banner
   img
     display block
     width 100%
   .banner-info
     color #fff
     padding 0 .3rem
     margin-top -.55rem
     height .4rem
     line-height .4rem
     display flex
     justify-content space-between
     background-image linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8))
     .banner-info-left
       font-size .32rem
     .banner-info-right
       text-align center
       border-radius .4rem
       background-color rgba(0, 0, 0, .8)
       padding 0 .25rem
       font-size .24rem
       i
         padding-right .1rem
         font-size .24rem
</style>