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"
                },
            ]

        }
    },
    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>