<template>
  <div class="card-1-wrapper">
    <Logo></Logo>
    <div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
    <section class="detail">
      <p class="title">尊敬的<span class="shareanimate" swiper-animate-effect="shareanimate" swiper-animate-duration="4s"  swiper-animate-delay="0s">齐天大圣</span>医生</p>
      <p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
      <p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
      <p>第一次遇见您</p>
      <p class="mt-20"><span class="cg2 b">陈半仙</span> 老师的<span class="cg2 b">《我的大学》</span>课程</p>
      <p>是您学习的第一门课；</p>
    </section>
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
  components: {
    Logo
  }
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-1-wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 16px;
  color: #3b3b3b;
  background: #f4fef8;
  .bgi-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    img {
      display: block;
      width: 100%;
      height: 321px;
    }
  }
  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 20px 30px;
    .title {
      line-height: 1;
      font-size: 20px;
      font-weight: 700;
      color: #3f3f3f;
      span {
        display: inline-block;
        margin: 0 7px;
        padding: 1px 25px;
        border-bottom: 2px solid #3b3b3b;
        color: #3b3b3b;
        opacity: 1;
      }
    }
    p {
      line-height: 1.8;
    }
  }
  .shareanimate {
    animation: shareani 4s ease;
    -webkit-animation: shareani 4s ease;
    -moz-animation: shareani 4s ease;
    -ms-animation: shareani 4s ease;
  }
  @keyframes shareani {
    0% {
      left: 50%;
      top: 74%;
      opacity: 0.1;
    }
    100% {
      left: 85%;
      top: 0;
      opacity: 1;
    }
  }

  @-webkit-keyframes shareani {
    0% {
      left: 50%;
      top: 74%;
      opacity: 0.8;
    }
    100% {
      left: 85%;
      top: 0;
      opacity: 0;
    }
  }

  @-moz-keyframes shareani {
    0% {
      left: 50%;
      top: 74%;
      opacity: 0.8;
    }
    100% {
      left: 85%;
      top: 0;
      opacity: 0;
    }
  }

  @-ms-keyframes shareani {
    0% {
      left: 50%;
      top: 74%;
      opacity: 0.8;
    }
    100% {
      left: 85%;
      top: 0;
      opacity: 0;
    }
  }
}
</style>