<template>

  <div class="banner">

    <img class="banner-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3163665140,577786017&fm=26&gp=0.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

      display: flex

      position: absolute

      left: 0

      right: 0

      bottom: 0

      line-height: .6rem

      color #fff

      background-image: linear-gradient(top,rgba(0,0,0,0), rgba(0,0,0, 0.8))

      .banner-title

        font-size: .32rem

        flex: 1

        padding: 0 .2rem

      .banner-number

        height: .32rem

        line-height: .32rem

        margin-top: .2rem

        padding: 0 .4rem

        border-radius: .2rem

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

        font-size: .24rem

        .banner-icon

          font-size: .24rem

</style>

是因为浏览器不兼容这个css3属性吗