|
|
@@ -4,12 +4,14 @@
|
|
|
<!-- 顶部区域:图标 + 标题 -->
|
|
|
<div class="card_header">
|
|
|
<!-- 模拟图片中的文档图标 -->
|
|
|
- <img src="" alt="" class="card-icon" />
|
|
|
+ <span class="card_img">
|
|
|
+ <img :src="questionnaireCardIcon" alt=""/>
|
|
|
+ </span>
|
|
|
<span class="card_title two_line_ellipsis">{{ questionnaire.title }}</span>
|
|
|
|
|
|
<el-switch
|
|
|
:model-value="Boolean(questionnaire.openStatus)"
|
|
|
- v-if="cardType == 'reviewManage'"
|
|
|
+ v-if="showSwitch"
|
|
|
@change="(newVal)=>HandleOnOffChange(newVal,questionnaire.openStatus,questionnaire)"
|
|
|
style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #bbbbbb"
|
|
|
/>
|
|
|
@@ -19,17 +21,34 @@
|
|
|
<div class="card_meta">
|
|
|
<div class="meta_row">
|
|
|
<!-- 问卷总分 -->
|
|
|
- <span v-if="cardType == 'questionnareManage'" class="score_text">{{ questionnaire.assessmentScore }}分</span>
|
|
|
- <span class="creator_text">{{questionnaire.teacherName}}</span>
|
|
|
+ <span v-if="cardType == 'questionnareManage'" class="score_text icon_text">
|
|
|
+ <img :src="scoreIcon" alt="">
|
|
|
+ {{ questionnaire.assessmentScore }}分</span>
|
|
|
+
|
|
|
+ <!-- 创建者 -->
|
|
|
+ <span class="creator_text icon_text">
|
|
|
+ <img :src="peopleIcon" alt="">
|
|
|
+ {{questionnaire.teacherName}}</span>
|
|
|
<!-- 评价类型 -->
|
|
|
- <span v-if="cardType == 'reviewManage'">{{ typeNumToName(questionnaire.evaluationType).title }}</span>
|
|
|
+ <span class="icon_text" v-if="cardType == 'reviewManage'">
|
|
|
+ <img :src="questionnaire.evaluationType === 0 ? onlineDektopIcon : writeLineIcon" alt="">
|
|
|
+ {{ typeNumToName(questionnaire.evaluationType).title }}
|
|
|
+ </span>
|
|
|
<!-- 状态文本:根据 cardStatus 动态变色 -->
|
|
|
- <span :class="['status_text', statusNumToName(questionnaire.cardStatus)?.themeClass ]">
|
|
|
+
|
|
|
+ <!-- ???? -->
|
|
|
+ <span :class="['status_text', statusNumToName(questionnaire.cardStatus)?.themeClass ,'']">
|
|
|
+ <img src="" alt="">
|
|
|
{{ statusNumToName(questionnaire.cardStatus)?.title }}
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div class="time_row">
|
|
|
- <span>{{ questionnaire.time }}</span>
|
|
|
+ <div class="time_row icon_text">
|
|
|
+ <!-- 评价管理的 线下答卷 不显示 时间 -->
|
|
|
+ <template v-if="cardType == 'questionnareManage' ||
|
|
|
+ cardType == 'reviewManage' && questionnaire.evaluationType === 0">
|
|
|
+ <img :src="timeIcon" alt="">
|
|
|
+ {{ questionnaire.time }}
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -44,6 +63,17 @@
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import peopleIcon from '@/assets/currentProject/people_icon.png'
|
|
|
+import timeIcon from '@/assets/currentProject/time_icon.png'
|
|
|
+import writeLineIcon from '@/assets/currentProject/write_line_icon.png'
|
|
|
+
|
|
|
+import onlineDektopIcon from '@/assets/currentProject/online_desktop.png'
|
|
|
+import questionnaireCardIcon from '@/assets/currentProject/questionnaire_card_icon.png'
|
|
|
+
|
|
|
+import scoreIcon from '@/assets/currentProject/score_icon.png'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
interface QuestionnaireItm {
|
|
|
id:Number,
|
|
|
title:String, //标题
|
|
|
@@ -86,6 +116,10 @@ const props = defineProps({
|
|
|
cardType:{
|
|
|
type:String as ()=>CardType,
|
|
|
required:true
|
|
|
+ },
|
|
|
+ showSwitch:{
|
|
|
+ type:Boolean,
|
|
|
+ default:false
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -142,13 +176,18 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
|
|
|
gap:8px;
|
|
|
padding:0 16px;
|
|
|
|
|
|
- .card-icon {
|
|
|
+ .card_img{
|
|
|
+ flex-shrink: 0;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
- background-color: #e6f7ff; /* 浅蓝背景 */
|
|
|
- border-radius: 4px;
|
|
|
- padding: 4px;
|
|
|
+ background-color: rgba(46, 100, 250,0.1); /* 浅蓝背景 */
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
.card_title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
@@ -169,6 +208,17 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
|
|
|
gap:12px;
|
|
|
padding:0 16px;
|
|
|
|
|
|
+ .icon_text{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:4px;
|
|
|
+ img{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
.meta_row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -218,6 +268,7 @@ const typeNumToName=(type:String|Number|null|undefined)=>{
|
|
|
}
|
|
|
}
|
|
|
.time_row {
|
|
|
+ height: 18px;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|