<template>
  <div class="hello">
    <div class="banner space-between">
      <div class="bannerItem" :key="index" v-for="(item,index) in resourceData">
        <!-- <img class="bannerImg" :src="item.img"/> -->
        <img class="bannerImg" src="../../images/Shape@2x.png"/>
        <span class="bannerText fs24">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YqyHomeBanner',
  watch: {
  },
  props: {
    resourceData: {
        type: Array,
        default:()=>{
            return [
            {img: '../../images/Shape@2x.png',
            name: '微专业'},
            {img: '../../images/Shape@2x.png',
            name: '名师讲堂'},
            {img: '../../images/Shape@2x.png',
            name: '患者教育'},
            {img: '../../images/Shape@2x.png',
            name: '专项合作'},
            {img: '../../images/Shape@2x.png',
            name: '活动掠影'}
          ]
        }
    }
  },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
  width: px2rem(375px);
  height: px2rem(100%);
  background-color: #F8F8F8;
}
.banner{
  width: px2rem(345px);
  height: px2rem(74px);
  background-color: #fff;
  position: absolute;
  top: px2rem(165px);
  left: px2rem(17px);
  padding: px2rem(15px) px2rem(10px);
  box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
  border-radius: px2rem(3px);
}
.bannerItem{
  width: px2rem(50px);
  display: inline;
  position: relative;
  // margin-right: px2rem(18px);
}
.bannerImg{
  min-width: px2rem(22px);
  max-height: px2rem(20px);
  margin: 0 auto;
  display: block;
}
.bannerText{
  position: absolute;
  top: px2rem(30px);
  width: px2rem(50px);
  left: 0;
  font-size: px2rem(12px);
  text-align: center;
}
</style>
