<template>
  <div class="hello">
    <div class="banner">
      <img class="bannerLogo" src="../../images/Shape@2x.png"/>
      <div class="fs28 center infoName">{{resourceData.name}}</div>
      <div class="fs28 line center">
        <span class="gray">{{resourceData.hospital}}</span>
        <span class="gray">{{resourceData.rank}}</span>
        <span class="gray">{{resourceData.type}}</span>>
      </div>
      <div class="studyCount">
        <div class="fs28">
          <div class="fs28">{{resourceData.studyCount}}</div>
          <div class="fs24 gray">学习人数</div>
        </div>
        <div class="fs28">
          <div class="fs28">{{resourceData.follower}}</div>
          <div class="fs24 gray">关注人数</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'banner',
  watch: {
  },
  props: {
      resourceData: {
          type: Object,
          default:()=>{
              return {
                name: '蒋立新',
                hospital: '阜外医院',
                rank: '教授',
                type: '主任医师',
                studyCount: 8969,
                follower: 8969
              }
          }
      }
  },
  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: 100%;
  background-color: #F8F8F8;
}
.banner{
  width: px2rem(335px);
  height: px2rem(139px);
  background-color: #fff;
  position: absolute;
  top: px2rem(165px);
  left: px2rem(17px);
  padding: px2rem(15px) px2rem(22px);
  box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
  border-radius: px2rem(3px);
}
.infoName{
  margin-top: px2rem(15px);
}
.line{
  margin-top: px2rem(4px);
}
.fs28{
  font-size: px2rem(14px);
}
.fs24{
  font-size: px2rem(12px);
}
.gray{
  color: RGBA(102, 102, 102, 1);
  margin-top: px2rem(5px);
}
.bannerLogo{
  width: px2rem(45px);
  height: px2rem(45px);
  border-radius: 50%;
  margin: 0 px2rem(122px);
  position: absolute;
  top: px2rem(-20px);
}
.studyCount{
  display: flex;
  justify-content: space-between;
  padding: 0 px2rem(33px);
  margin-top: px2rem(15px);
}
</style>
