<template>
  <div class="pb_content" style="background: #fff">
    <div class="pb_head">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="pb_back"
        size="1.2rem"
        @click="goBack"
      />
      <span>劳动能力</span>
    </div>
    <div class="pb_content_body" style="height: calc(100% - 3rem)">
      <div
            class="my_wordBox"
            v-for="x in 20"
            :key="x"
            @click="goTo('myWorkDetail')"
          >
            <div class="my_wordBox_title">
              <div class="my_wordBox_titlet">
                <img v-lazy="require('../../assets/icon/lao.png')" alt="" />
                <span class="van-ellipsis">绿色快乐农耕园</span>
              </div>
            </div>
            <div class="my_wordBox_content van-multi-ellipsis--l3">
              生活中多数家长认为，孩子身心健康、聪明、爱学习是第一位的，相比之下，动手操作一些生活中的“小事”没那么重要。其实，劳动蕴含着重要的“学习价值”，劳动也是一种学习。它能够为孩子提供丰富的感知、操作机会，使他在各种操作活动中获得认知发展；还能锻炼各种能力，帮助孩子养成良好的生活习惯，培养责任感和良好品质。
            </div>
            <div class="my_wordBox_bottom">
              <div>09-24 18:00</div>
              <div :class="{ finish: x != 2 }">
                {{ x != 2 ? "已完成" : "未完成" }}
              </div>
            </div>
          </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "main-keep-alive",
  data() {
    return {
      smailheadportrait: this.$store.state.userInfo.smailheadportrait,
      name: this.$store.state.userInfo.name,
      className: this.$store.state.userInfo.classnameA,
      schoolName: this.$store.state.userInfo.schoolName,
    };
  },
  methods: {
    goTo(path, cid) {
      this.$router.push(path);
    },
    goBack() {
      this.$router.isBack = true;
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
  },
  created() {},
};
</script>

<style scoped>
.my_wordBox {
  padding: 1rem 0.6rem;
  background: #fff;
  width: 95%;
  margin: 0.5rem auto;
  border-radius: 0.3rem;
  box-shadow: 0 0 10px #d8d8d8;
  box-sizing: border-box;
}

.my_wordBox_title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_wordBox_titlet {
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
}
.my_wordBox_titlet img {
  width: 1.5rem;
  margin-right: 0.3rem;
}
.my_wordBox_title .my_wordBox_titlet span {
  font-size: 0.9rem;
  /* font-weight: 600; */
}
.my_wordBox_title span {
  font-size: 0.65rem;
}
.my_wordBox_content {
  font-size: 0.8rem;
  color: rgb(134, 134, 134);
  margin: 0.2rem 0;
}

.my_wordBox_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my_wordBox_bottom div:nth-child(1) {
  font-size: 0.65rem;
  color: rgb(134, 134, 134);
}

.my_wordBox_bottom div:nth-child(2) {
  color: red;
  font-size: 0.9rem;
}
.my_wordBox_bottom .finish {
  color: #46bb65 !important;
}
</style>
