<template>
  <div class="card-2-wrapper">
    <Logo></Logo>
    <div class="bgi-wrapper">
      <img src="~@/images/annual/page-2-back.png" alt />
    </div>
    <section class="ani detail" swiper-animate-effect="fadeInRight"
        swiper-animate-duration="1.5s"
        swiper-animate-delay="0"
        >
      <div id="detail-content">
        <p>{{anualData.yearType}}年，您一共学习了</p>
        <p class="mt-10">
          <span class="fbig6 cg2"
          >{{anualData.loginTotalTimeM}}</span> 分钟
        </p>
        <p v-show="anualData.learnCourseNum">
          <span class="fbig6 cg2">{{anualData.learnCourseNum}}</span> 门课程
        </p>
        <p v-show="anualData.learnArticleNum">
          <span class="fbig6 cg2">{{anualData.learnArticleNum}}</span> 篇文章
        </p>
        <p v-show="anualData.learnMoreCourseLabelName" class="mt-5">您最关注的学科</p>
        <p
          v-show="anualData.learnMoreCourseLabelName"
          class="cg2 b"
        >{{anualData.learnMoreCourseLabelName | shortName(10)}}</p>
      </div>
    </section>
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
  components: {
    Logo
  },
  props: {
    anualData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-2-wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 16px;
  color: #3b3b3b;
  background: #f4fef8;
  .bgi-wrapper {
    position: absolute;
    bottom: 0;
    right: 10px;
    z-index: 1;
    img {
      display: block;
      width: 308px;
      height: 305px;
    }
  }
  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 20px 30px;
    p {
      line-height: 1.8;
    }
  }
}
</style>