<template>
  <div class="pageContent planDescription">
    <NavBar title="任务详情" @on-click-left="$router.back()"></NavBar>
    <div class="bannar radius">
      <div class="image">
        <img src="@/assets/development/images/banner2.png" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="gap"></div>
      <div class="max-title">离完成任务解锁奖励</div>
      <div class="max-title">又近了一步！</div>
      <div class="gap"></div>
      <div class="text center">
        你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
        你一定可以实现你的目标！
      </div>
      <div class="gap"></div>
      <div class="progress">
        <div class="bg" width="100%"></div>
        <div class="text" :style="`left:${progress}%;`">3</div>
      </div>
      <div class="gap"></div>
      <div class="gap"></div>
      <div class="mid-title center">任务即将达成</div>
      <div class="gap"></div>
      <div class="mid-title">目标</div>
      <div class="text">美好开始</div>
      <div class="gap"></div>
      <div class="mid-title">目标解释</div>
      <div class="text">
        帮助孩子了解自己；认识什么叫“德智体美劳全面发展”； 和孩子一起找到通往幸福的魔法钥匙 ⸺ 情绪共生力。
      </div>
      <div class="gap"></div>
      <div class="mid-title">任务</div>
      <div class="text">1:帮助孩子阅读一封信和计划玩法拆解</div>
      <div class="text">2:一起安装手办柜，放上熊，并合影</div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      progress: 50
    };
  },
  computed: {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
@import './include.scss';
.max-title {
  font-size: 50px;
  font-weight: bold;
  text-align: center;
}
.mid-title {
  font-size: 30px;
}
.min-title {
  font-size: 26px;
}
.title {
  font-size: 24px;
}
.text {
  font-size: 24px;
  color: gray;
}
.center {
  text-align: center;
}
.planDescription {
  padding-top: 130px;

  .bannar {
    overflow: hidden;
    position: relative;
    width: 75%;
    min-height: 200px;
    margin: 0 auto;
  }

  .content {
    width: 100%;
    padding: 0px 40px;

    .progress {
      position: relative;
      width: 100%;

      .bg {
        left: 0;
        top: 0px;
        height: 30px;
        border-radius: 20px;
        background: #29943a;
        z-index: 1;
      }
      .text {
        position: absolute;
        top: 0px;
        bottom: 0;
        width: 60px;
        height: 60px;
        line-height: 60px;
        color: #fff;
        font-size: 34px;
        text-align: center;
        border-radius: 50%;
        margin: auto;
        margin-left: -30px;
        background: black;
        z-index: 2;
      }
    }
  }
}
</style>
