<template>
  <section>
    <div class="banner-box">
      <a target="_blank" :href="bannerLink">
        <img :src="bannerImg" alt />
      </a>
    </div>
  </section>
</template>
<script>
import CONFIG from '@/config'

export default {
  props: {
    info: {
      type: String,
      default: ''
    }
  },
  computed: {
    bannerImg() {
      const { banner } = this.info
      const img = banner || CONFIG.defBanner
      return `${img}${CONFIG.ossImageServe}`
    },
    bannerLink() {
      const { url } = this.info
      return url || false
    }
  }
}
</script>
<style lang="less" scoped>
.banner-box {
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  img {
    border-radius: 6px;
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>
