<template>
  <div class="home-news">
    <div class="news-title">
      <h3>小飞侠服务</h3>
      <div class="circle"></div>
    </div>
    <div class="news-body">
      <div class="news-item-cont"
           v-for='obj in newsSoure' :key=obj.id>
        <div class="ns-item">
          <div class="out-border"></div>
          <transition name='opa'>
            <img :src="obj.imgSrc" v-if="isCmptShow" alt="小飞侠服务">
          </transition>
          <div class="item-body">
            <h4>{{ obj.title }}</h4>
            <p>{{ obj.article }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import newsBanner from './Banner'

export default {
  data () {
    return {
      isCmptShow: false
    }
  },
  props: {
    newsSoure: Array
  },
  components: {
    newsBanner
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin';

.home-news {
  position: relative;
  width: 100%;
  margin-bottom: 10rem;
}

.news-title {
  position: relative;
  padding-bottom: 2rem;
  background-color: #fff;
  width: 97%;
  margin: 0 auto;
  z-index: 99;

  h3 {
    $lateValue: -3rem;
    overflow: hidden;
    position: relative;
    display: block;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    color: #666;
    z-index: 66;

    &:after,
    &:before {
      content: '';
      display: block;
      position: absolute;
      right: $lateValue;
      top: 50%;
      width: 50%;
      height: 0.2rem;
      background-color: #FFCCCC;
      background-image: linear-gradient(to right, #97d9e1 0%, #fff 50%);
    }

    &:before {
      left: $lateValue;
      background-image: linear-gradient(to left, #97d9e1 0%, #fff 50%);
    }
  }
}

.circle {
  $circle-w: 6rem;
  $circle-h: 3rem;
  position: absolute;
  left: 50%;
  top: 0;
  margin-top: -$circle-h +0.7rem;
  margin-left: -$circle-h;
  @include circle($circle-w, #fff);

  &::after {
    $moveValue: 0.5rem;
    content: '';
    display: block;
    position: absolute;
    @include circle($circle-w +$moveValue, #97d9e1);
    margin-left: -$moveValue /2;
    margin-top: -$moveValue /2;
    z-index: -1;
  }
}

.news-body {
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 95%;
  margin: 0.05rem auto 0;
  padding-bottom: 5rem;
  @include box-shadow(0 0 0.3rem 0.3rem #ccc);
  cursor: pointer;
}

.news-item-cont {
  display: flex;
  justify-content: center;
}

.out-border {
  position: absolute;
  top: 1rem;
  left: -2rem;
  width: 50%;
  height: 1rem;
  background-color: #00f2fe;
  @include rotate(-45deg);
  @include box-shadow(0 0 3px 1px #4facfe);
  z-index: 99;
}

.ns-item {
  position: relative;
  display: flex;
  overflow: hidden;
  margin-top: 4rem;
  @include box-shadow(0.5rem 0.5rem 3px #666);

  img {
    display: block;
    width: 15rem;
    height: 20rem;
    @include transition(.5s);
  }

  &:hover img {
    @include set-opacity(0.5);
    @include scale(1.1);
  }
}

.item-body {
  $title-h: 1.2rem;
  position: absolute;
  bottom: 0;
  background-color: #fff;
  background-color: rgba(255, 255, 255, .6);
  height: $title-h;
  @include transition(.5s);

  h4 {
    display: block;
    line-height: $title-h;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: #333;
    background-color: #c2e9fb;
    @include set-opacity(0.7);
  }

  p {
    width: 90%;
    margin: 0 auto;
    line-height: 1.5rem;
    font-size: 0.7rem;
    text-indent: 1.4rem;
    letter-spacing: 0.1rem;
    text-align: justify;
    text-justify: inter-ideograph;
    color: #333;

    &::selection {
      background-color: #93C;
      color: #FCF;
    }
  }
}

.ns-item:hover .item-body {
  height: 70%;
}

@media only screen and (max-width: 768px) {
  .news-item-cont {
    width: 40%;
  }
}
</style>

