water_maintenance/src/view/student/trainMain/itemCard.vue

<template>
    <div class="card-box">
        <div class="card-img" :class="cardClass" :style="cardStyle" @click="cardClick"></div>
        <div v-if="progress.show" class="card-progress">
            <el-progress :percentage="progress.percent.toFixed(0)" :stroke-width="10" :status="progressStatus" />
            <div class="progress-name">{{ progress.name }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    type: 'training' | 'report' | 'report_share';
    size?: string;
    active?: boolean;
    progress?: {
        show: boolean;
        name: string;
        percent: number;
    };
}
const props = withDefaults(defineProps<Props>(), {
    type: 'training',
    size: '25rem',
    active: false,
    progress: () => {
        return { show: false, name: '', percent: 0 };
    },
});

const emits = defineEmits(['click']);

const progressStatus = computed(() => {
    return props.progress.percent == 100 ? 'success' : '';
});

const cardClass = computed(() => {
    let className = props.active ? props.type : props.type + '_gray';
    return [className];
});
const cardStyle = computed(() => {
    return {
        width: props.size,
        height: props.size,
    };
});

const cardClick = () => {
    if (props.active) emits('click', props.type);
};
</script>
<style lang="scss" scoped>
.card-img {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    // &.training {
    //     background-image: url(/src/assets/student/step/training.png);
    // }
    // &.training_gray {
    //     background-image: url(/src/assets/student/step/training.png);
    //     cursor: not-allowed;
    // }
    &.training {
        background-image: url(/src/assets/student/step/LiLunYuShiXunXueXi_Yes.webp);
    }
    &.training_gray {
        background-image: url(/src/assets/student/step/LiLunYuShiXunXueXi_No.webp);
        cursor: not-allowed;
    }
    &.assessment {
        background-image: url(/src/assets/student/step/LiLunYuShiXunKaoHe_Yes.webp);
    }
    &.assessment_gray {
        background-image: url(/src/assets/student/step/LiLunYuShiXunKaoHe_No.webp);
        cursor: not-allowed;
    }
    &.report {
        background-image: url(/src/assets/student/step/report.png);
    }
    &.report_gray {
        background-image: url(/src/assets/student/step/report_gray.png);
        cursor: not-allowed;
    }
    &.report_share {
        background-image: url(/src/assets/student/step/report_share.png);
    }
    &.report_share_gray {
        background-image: url(/src/assets/student/step/report_share_gray.png);
        cursor: not-allowed;
    }
}
.card-progress {
    margin-left: 4rem;
    .progress-name {
        padding-right: 2rem;
        line-height: 3rem;
        color: white;
        text-align: center;
        font-size: 1rem;
    }
}
:deep(.el-progress__text) {
    color: white;
    min-width: unset;
}
</style>