student-assessment/src/views/appView/QuestionnaireTaskListPage.vue

<template>
    <div class="main_container">
        <div class="questionnaire_card">
            <div class="title">{{ questionnaire.evaluationName }}</div>
            <div class="time_group">
                <span class="time">开始时间：{{ questionnaire.evaluationStartDatetime }}</span>
                <span class="time">结束时间：{{ questionnaire.evaluationEndDatetime }}</span>
            </div>
            <div class="operation">
                <el-button class="button_border" @click="GoEnter(questionnaire)">进入</el-button>
            </div>
        </div>
    </div>
</template>   

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

interface QuestionnaireData {
    id:string
    evaluationName:string   //任务名称
    evaluationStartDatetime:string  //任务开始时间
    evaluationEndDatetime:string   //任务结束时间
}
// 问卷列表
const questionnaire = ref<QuestionnaireData|{}>({})


// 处理进入问卷逻辑
const GoEnter = (row)=>{
    console.log(row.id)
    if(row.showSelectSubject){
        router.push('/app/questionnaireElectiveSubject')
    }else{
        router.push('/main/selfQuestionnaireProcess')
    }
}


onMounted(()=>{
    let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    questionnaire.value = userInfo.evaluationBO
})
</script>



<style lang="scss" scoped>
.main_container{
    padding-bottom: calc(90 * var(--app-rpx)) !important;
    align-items: center;
    background-color: #ffffff !important;

    .questionnaire_card{
        margin-top: calc(92 * var(--app-rpx));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: calc(300 * var(--app-rpx));
        height: calc(400 * var(--app-rpx));
        padding:calc(40 * var(--app-rpx)) calc(20 * var(--app-rpx));
        background-image: url('@/assets/studentQuestionnaire/questionnaire_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%; 

        .title{
            font-weight: 600;
            font-size: calc(20 * var(--app-rpx));
            color: #FFFFFF;
            margin-bottom:  calc(20 * var(--app-rpx));
        }

        .time_group{
            display: flex;
            flex-direction: column;
            gap: calc(10 * var(--app-rpx));
            font-weight: 400;
            font-size: calc(14 * var(--app-rpx));
            color: rgba(255,255,255,0.8);
        }

        .operation{
            flex: 1 1 ;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            .button_border{ 
                :deep(>span){
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                width: 100%;
                height: calc(52 * var(--app-rpx));
                font-weight: 600;
                font-size:  calc(18 * var(--app-rpx)); 
                color: #2E64FA;
            }
        }
    }
}

</style>