zhxg_pc/src/views/Home/comps/sj-undo.vue

<template>
  <div>
    <div class="six-action-container">
      <div
        style="padding: 1rem"
        class="six-action-item"
        v-for="(v, i) in taskList"
        :key="i"
      >
        <div
          class="bubble"
          :style="{
            backgroundImage: `url(${require('@/assets/index_bg/' +
              (i + 1) +
              '.png')})`,
          }"
        >
          <div class="act-text">
            <div class="title">{{ v.label }}·待办</div>
            <div class="todo">
              {{ v.value }}
            </div>
          </div>
          <div class="bg-to" @click="toRoute(v.url)">更多☞</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { countSjUnDo as countUndo } from "@/api/stuCQS/good/apply";
import { isEmpty } from "@/api/helpFunc";
import { checkPermi } from "@/utils/permission";
export default {
  name: "sj-undo",
  data() {
    return {
      hasPrem: false,

      taskList: [
        {
          label: "书记·任务管理审核",
          name: "rwgl",
          value: 0,
          url: "/task/todo",
        },
        {
          label: "书记·辅导员综合绩效审核",
          name: "jx",
          value: 0,
          url: "teacher/performance/evaluate/party",
        },
        // 宁博
        {
          label: "书记·辅导员管理-成果绩效审核",
          name: "cg",
          value: 0,
          url: "/teacher/achievement/achievementCheck",
        },
      ],
    };
  },
  created() {
    if (checkPermi(["home:sj:undo1"])) {
      this.countUndo();
      this.hasPrem = true;
    }
  },
  methods: {
    async countUndo() {
      let res = await countUndo();
      if (res.code == 200) {
        let data = [...res.data];
        this.taskList.map((x) => {
          let temp = data.filter((y) => y.startsWith(x.name));
          if (!isEmpty(temp)) {
            let result = temp[0].split("-")[1];
            x.value = result;
          }
        });
      }
    },

    toRoute(url) {
      if (!isEmpty(url)) {
        this.$router.push(url);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.six-action-container {
  display: flex;
  flex-wrap: wrap;
}

.six-action-item {
  flex-basis: 33.33%;
}

.bubble {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  height: 170px;
  border-radius: 1rem;
  // background-image: linear-gradient(120deg, rgb(134, 233, 98) 0%, rgb(45, 175, 92) 100%);
  position: relative;
  background-size: cover;
  min-width: 250px;
}

.act-text {
  width: 100%;
  z-index: 2;
  margin: 1rem;

  .title {
    text-align: left;
    font-size: 1.25rem;
    color: #fff;
  }

  .todo {
    margin-top: 1rem;
    font-size: 6rem;
    color: #fff;
  }
}

.bg-to {
  cursor: pointer;
  z-index: 3;
  position: absolute;
  bottom: 5%;
  right: 3%;
  margin-top: 10px;
  color: white;
}

.six-action-item:hover,
.fast-act:hover {
  cursor: pointer;

  transform: scale(1.1);
}
</style>