130 lines
2.5 KiB
Vue
130 lines
2.5 KiB
Vue
<template>
|
||
<view class="item" :class="item.examStatText == 'Y' ? 'completed' : 'incomplete'" @click="gotoDetails(item)">
|
||
<view class="subscript" v-if="item.examStatText === 'N'">未完成</view>
|
||
<view class="subscript" v-if="item.examStatText === 'Y'">已完成</view>
|
||
<view class="title ellipsis-text">
|
||
{{ item.papersName }}
|
||
</view>
|
||
<view class="time">
|
||
<text class="color_3">起止时间：</text>
|
||
<text class="color_class">{{ item.examStartTm.substr(0 , 10) }}至{{ item.examEndTm.substr(0 , 10) }}</text>
|
||
</view>
|
||
<view class="num_div">
|
||
<text class="color_3">完成人数：</text>
|
||
<text class="color_2">{{ item.execPersionNumer }}/{{ item.planPersionNumber }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import { setPageCache } from '@/common/common';
|
||
import common from '@/common/common';
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
});
|
||
const emit = defineEmits(['click_item']);
|
||
const item = computed(() => props.item);
|
||
const gotoDetails = (item) => {
|
||
setPageCache('testing_hall_details', item)
|
||
common.navigateTo('/pages/testingHall/details');
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.subscript {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 92rpx;
|
||
height: 46rpx;
|
||
border-radius: 0px 0px 0px 22rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
line-height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.incomplete {
|
||
// 进行中
|
||
.subscript {
|
||
color: #ffffff;
|
||
background-color: #ef5705;
|
||
}
|
||
|
||
.color_class {
|
||
color: #d70c18;
|
||
}
|
||
}
|
||
|
||
.completed {
|
||
// 已完成
|
||
.subscript {
|
||
color: #ffffff;
|
||
background-color: #33c583;
|
||
}
|
||
|
||
.color_class {
|
||
color: #0066ff;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
padding: 30rpx 44rpx 20rpx 38rpx;
|
||
// margin: 0rpx 22rpx 22rpx 22rpx;
|
||
margin-top: 22rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.title {
|
||
font-family: PingFangSC;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 28rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.num_div {
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.color_1 {
|
||
color: #d70c18;
|
||
}
|
||
|
||
.color_2 {
|
||
color: #333333;
|
||
}
|
||
|
||
.color_3 {
|
||
color: #666666;
|
||
}
|
||
}
|
||
</style>
|