cocoroboWork-App2/src/components/pages/my.vue

<template>
  <div class="pb_content" style="background: #fff">
    <div class="pb_head">
      <span>我的</span>
    </div>
    <div class="pb_content_body" style="height: calc(100% - 3rem)">
      <div class="my_nav">
        <div :class="{ active: type == 1 }" @click="setType(1)">全部任务</div>
        <div :class="{ active: type == 2 }" @click="setType(2)">家庭校园</div>
        <div :class="{ active: type == 3 }" @click="setType(3)">义工社团</div>
        <div :class="{ active: type == 4 }" @click="setType(4)">五育融合</div>
        <div :class="{ active: type == 5 }" @click="setType(5)">创新</div>
      </div>
      <div class="my_navBox">
        <div v-if="type == 1" class="nav">
          <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/word.png')" alt="" />
                <span class="van-ellipsis">绿色快乐农耕园</span>
              </div>
              <span>详情></span>
            </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 v-if="type == 2" class="nav">
          <div
            class="my_wordBox"
            v-for="x in 10"
            :key="x"
            @click="goTo('myWorkDetail')"
          >
            <div class="my_wordBox_title">
              <div class="my_wordBox_titlet">
                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
                <span class="van-ellipsis">绿色快乐农耕园</span>
              </div>
              <span>详情></span>
            </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 v-if="type == 3" class="nav">
          <div
            class="my_wordBox"
            v-for="x in 10"
            :key="x"
            @click="goTo('myWorkDetail')"
          >
            <div class="my_wordBox_title">
              <div class="my_wordBox_titlet">
                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
                <span class="van-ellipsis">组前分组培训</span>
              </div>
              <span>详情></span>
            </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 v-if="type == 4" class="nav">
          <div
            class="my_wordBox"
            v-for="x in 3"
            :key="x"
            @click="goTo('myWorkDetail')"
          >
            <div class="my_wordBox_title">
              <div class="my_wordBox_titlet">
                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
                <span class="van-ellipsis">绿色快乐农耕园</span>
              </div>
              <span>详情></span>
            </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 != 5 }">
                {{ x != 2 ? "已完成" : "未完成" }}
              </div>
            </div>
          </div>
        </div>
        <div v-if="type == 5" class="nav">
          <div
            class="my_wordBox"
            v-for="x in 1"
            :key="x"
            @click="goTo('myWorkDetail')"
          >
            <div class="my_wordBox_title">
              <div class="my_wordBox_titlet">
                <img v-lazy="require('../../assets/icon/word.png')" alt="" />
                <span class="van-ellipsis">绿色快乐农耕园</span>
              </div>
              <span>详情></span>
            </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>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 2,
    };
  },
  methods: {
    setType(type) {
      this.type = type;
    },
    goTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.my_nav {
  width: 100%;
  display: flex;
  font-size: 0.9rem;
  font-family: "黑体";
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
  justify-content: space-around;
  height: 1.8rem;
}

.my_nav .active {
  color: #46bb65;
}

.my_navBox {
  height: calc(100% - 1.8rem);
}
.my_navBox .nav {
  height: 100%;
  overflow: auto;
}
.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.3rem;
  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>