<template>
  <div class="myStory">
    <!-- 宗旨 -->
    <!-- 我们的团队 -->
    <div class="storyItem"
         :class="[item.bindClass]"
         v-for='item in myStoryBody'
         :key='item.id'>
      <div class="imgCont">
        <img :src="item.contImg" alt="我们的故事">
      </div>
      <div class="articleCont">
        <h3>{{ item.title }}</h3>
        <div class="article-body">
          <transition name="transX">
            <p v-if='isCmptShow'>{{ item.article }}</p>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      isCmptShow: false,
      myStoryBody: [
        {
          id: 1,
          contImg: require('../../assets/img/aboutus-article-pic01.jpg'),
          bindClass: 'Purpose',
          title: '我们的宗旨',
          article: `关于校园小飞侠的定位，是为每一位客户在现有的条件下，
          为客户提供最方便有效的快递服务,创造有影响力的校园形象
          与口碑，让我们的校园小飞侠变得更具商业价值，
          用方便+快捷+优质为客户提供最好的服务。`
        },
        {
          id: 2,
          contImg: require('../../assets/img/aboutus-article-pic02.jpg'),
          title: '我们的团队',
          bindClass: 'ourTeam',
          article: `对于校园小飞侠的运营，我们团队提供最高端有效的技术，以客户为中心，提供优质服务。`
        }
      ],

    }
  }
}
</script>

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

}

.storyItem {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.Purpose {
  flex-direction: row;
}

.ourTeam {
  flex-direction: row-reverse;
}

.imgCont {
  width: 50%;
  min-width: 50%;

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

.articleCont {
  width: 50%;

  h3 {
    margin: 4rem 0 2rem;
    line-height: 2rem;
    font-size: 1.1rem;
    color: #666;
    font-family: '微软雅黑';
  }
}

.article-body {
  width: 100%;

  p {
    width: 60%;
    margin: 0 auto;
    line-height: 1.3rem;
    letter-spacing: 0.1rem;
    text-align: justify;
    text-justify: inter-ideograph;
    color: #999;
  }
}

@media only screen and (max-width: 640px) {
  .imgCont,
  .articleCont {
    width: 100%;
  }
  .articleCont {
    margin-bottom: 3rem;
  }
  .article-body p {
    width: 80%;
    line-height: 1.5rem;
  }
  .Purpose,
  .ourTeam {
    flex-direction: column-reverse;
  }

}
</style>
