<template>
  <div class="aboutUs">
    <div class="abt-header">
      <img src="../../assets/img/aboutUs-header-bg.jpg" alt="关于我们背景图片">
    </div>
    <topArticle :topArticle='topArticle'></topArticle>
    <myStory>
    </myStory>
    <advantage
      :advantage='advantage'
      :achievementData='achievementData'></advantage>
    <appFooter></appFooter>
  </div>
</template>

<script>
import topArticle from './topArticle'
import myStory from './myStory'
import advantage from './advantage'
import appFooter from '../AppFooter'

export default {
  data () {
    return {
      topArticle: `
                我们致力于提供最优质、最贴心的的服务，服务于每一位校园学子，
                为他们提供方便快捷的快递服务。同时打造良好的校园口碑，
                令校园小飞侠有更长远的发展，
                让小飞侠在校园快递这个服务行业中有强有力的竞争力。
            `,
      advantage: {
        title: '平台优势',
        article: `对于校园代取快递，我们平台有最系统的规划及其管理，
                在服务客户的同时可以有效保障客户的快递安全问题，
                客户的问题也可以反馈给我们平台，我们可以及时高效的解决这些问题。`
      },
      achievementData: [
        {title: '成立时间', data: 2020},
        {title: '全国站点', data: 1},
        {title: '加盟人数', data: 0},
        {title: '成交订单', data: 20}
      ]

    }
  },
  components: {
    appFooter,
    topArticle,
    myStory,
    advantage
  },
  mounted () {
    this.$emit('scrollShowComponent', this.$children)
  },
  destroyed () {
    this.$emit('pageDestroyed')
  }
}
</script>

<style lang='scss'>
.aboutUs {
  position: relative;

  P {
    text-indent: 2rem;
  }
}

.abt-header {
  position: relative;

  img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
  }

}

</style>
