样式修改
This commit is contained in:
@@ -54,45 +54,63 @@
|
||||
v-for="task in taskList"
|
||||
:key="task.taskID"
|
||||
class="task-card"
|
||||
@click="handleTaskClick(task)"
|
||||
>
|
||||
<!-- 背景装饰 -->
|
||||
<div class="task-bg-decoration"></div>
|
||||
|
||||
<!-- 内容容器 -->
|
||||
<div class="task-content">
|
||||
<!-- 状态标签（小标签，自适应宽度） -->
|
||||
<div
|
||||
class="status-tag"
|
||||
:class="{
|
||||
'status-pending': task.status === 0,
|
||||
'status-processing': task.status === 1,
|
||||
'status-completed': task.status === 2
|
||||
}"
|
||||
>
|
||||
{{ task.status === 0 ? '待完成' : task.status === 1 ? '进行中' : '已完成' }}
|
||||
</div>
|
||||
<!-- 顶部信息区 -->
|
||||
<div class="task-header">
|
||||
<!-- 状态标签（小标签，自适应宽度） -->
|
||||
<div
|
||||
class="status-tag"
|
||||
:class="{
|
||||
'status-pending': task.status === 0,
|
||||
'status-processing': task.status === 1,
|
||||
'status-completed': task.status === 2
|
||||
}"
|
||||
>
|
||||
{{ task.status === 0 ? '待完成' : task.status === 1 ? '进行中' : '已完成' }}
|
||||
</div>
|
||||
|
||||
<!-- 任务标题 -->
|
||||
<h3 class="task-title">{{ task.name }}</h3>
|
||||
<!-- 任务标题 -->
|
||||
<h3 class="task-title">{{ task.name }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 任务描述 -->
|
||||
<p class="task-desc">{{ task.description || '暂无描述' }}</p>
|
||||
|
||||
<!-- 学习进度 -->
|
||||
<div class="task-progress">
|
||||
<div class="progress-header">
|
||||
<span class="progress-label">学习进度</span>
|
||||
<span class="progress-value">{{ getTaskProgress(task) }}%</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: getTaskProgress(task) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 任务底部信息 -->
|
||||
<div class="task-footer">
|
||||
<span class="task-time">
|
||||
任务时间：{{ formatDate(task.startTime) }}-{{ formatDate(task.endTime) }}
|
||||
</span>
|
||||
<div
|
||||
v-if="getDeadlineStatus(task).show"
|
||||
class="deadline-tag"
|
||||
:class="{
|
||||
'deadline-danger': getDeadlineStatus(task).type === 'danger',
|
||||
'deadline-info': getDeadlineStatus(task).type === 'info',
|
||||
'deadline-success': getDeadlineStatus(task).type === 'success',
|
||||
'deadline-primary': getDeadlineStatus(task).type === 'primary',
|
||||
}"
|
||||
>
|
||||
{{ getDeadlineStatus(task).text }}
|
||||
<div class="task-time">
|
||||
<el-icon class="calendar-icon"><Calendar /></el-icon>
|
||||
<span>任务时间：{{ formatDate(task.startTime) }}-{{ formatDate(task.endTime) }}</span>
|
||||
<span
|
||||
v-if="getDeadlineStatus(task).show"
|
||||
class="deadline-text"
|
||||
:class="'deadline-' + getDeadlineStatus(task).type"
|
||||
>
|
||||
（{{ getDeadlineStatus(task).text }}）
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
class="start-btn"
|
||||
@click.stop="handleTaskClick(task)"
|
||||
>
|
||||
{{ task.status === 0 ? '开始学习' : '继续学习' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,10 +128,10 @@
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { DocumentCopy, DocumentChecked } from '@element-plus/icons-vue';
|
||||
import { DocumentCopy, DocumentChecked, Calendar } from '@element-plus/icons-vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { learningTaskApi } from '@/apis/study';
|
||||
import type { LearningTask, TaskItemVO } from '@/types';
|
||||
import type { TaskItemVO } from '@/types';
|
||||
import { StudyPlanLayout } from '@/views/user/study-plan';
|
||||
|
||||
defineOptions({
|
||||
@@ -123,7 +141,7 @@ defineOptions({
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const loading = ref(false);
|
||||
const taskList = ref<LearningTask[]>([]);
|
||||
const taskList = ref<TaskItemVO[]>([]);
|
||||
|
||||
// 统计数据
|
||||
const totalCount = ref(0);
|
||||
@@ -210,7 +228,7 @@ async function loadUserProgress() {
|
||||
|
||||
|
||||
// 点击任务卡片
|
||||
function handleTaskClick(task: LearningTask) {
|
||||
function handleTaskClick(task: TaskItemVO) {
|
||||
if (!task.taskID) {
|
||||
ElMessage.warning('任务ID不存在');
|
||||
return;
|
||||
@@ -232,8 +250,14 @@ function formatDate(dateString?: string): string {
|
||||
return `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// 获取任务学习进度
|
||||
function getTaskProgress(task: TaskItemVO): number {
|
||||
if (!task.progress && task.progress !== 0) return 0;
|
||||
return Math.round(task.progress);
|
||||
}
|
||||
|
||||
// 获取截止时间状态
|
||||
function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; type: 'danger' | 'info' | 'success' | 'primary' } {
|
||||
function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; type: 'danger' | 'info' | 'success' | 'primary' } {
|
||||
if (!task.endTime) {
|
||||
return { show: false, text: '', type: 'primary' };
|
||||
}
|
||||
@@ -426,127 +450,217 @@ function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; t
|
||||
}
|
||||
|
||||
.task-card {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
min-height: 278px;
|
||||
height: 376px;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 20px rgba(164, 182, 199, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
// 背景装饰
|
||||
.task-bg-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(253, 144, 130, 0.03) 0%, rgba(253, 109, 120, 0.03) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.task-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
height: 100%;
|
||||
gap: 0;
|
||||
|
||||
// 状态标签 - 小标签，自适应宽度
|
||||
.status-tag {
|
||||
align-self: flex-start;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5714285714285714;
|
||||
border-radius: 2px;
|
||||
// 顶部信息区
|
||||
.task-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
// 待完成 - 红色
|
||||
&.status-pending {
|
||||
background-color: #FFECE8;
|
||||
color: #F53F3F;
|
||||
}
|
||||
|
||||
// 进行中 - 蓝色
|
||||
&.status-processing {
|
||||
background-color: #E8F7FF;
|
||||
color: #3491FA;
|
||||
}
|
||||
|
||||
// 已完成 - 绿色
|
||||
&.status-completed {
|
||||
background-color: #E8FFEA;
|
||||
color: #00B42A;
|
||||
// 状态标签 - 小标签，自适应宽度
|
||||
.status-tag {
|
||||
align-self: flex-start;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5714285714285714;
|
||||
border-radius: 2px;
|
||||
|
||||
// 待完成 - 红色
|
||||
&.status-pending {
|
||||
background-color: #FFECE8;
|
||||
color: #F53F3F;
|
||||
}
|
||||
|
||||
// 进行中 - 蓝色
|
||||
&.status-processing {
|
||||
background-color: #E8F7FF;
|
||||
color: #3491FA;
|
||||
}
|
||||
|
||||
// 已完成 - 绿色
|
||||
&.status-completed {
|
||||
background-color: #E8FFEA;
|
||||
color: #00B42A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.task-desc {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #334155;
|
||||
line-height: 1.5714285714285714;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.task-time {
|
||||
.task-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.task-desc {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #979797;
|
||||
color: #334155;
|
||||
line-height: 1.5714285714285714;
|
||||
flex: 1;
|
||||
margin: 0 0 20px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 截止时间标签
|
||||
.deadline-tag {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
// 学习进度
|
||||
.task-progress {
|
||||
margin-bottom: auto;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.progress-label {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #1D2129;
|
||||
line-height: 1.5714285714285714;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #1D2129;
|
||||
line-height: 1.5714285714285714;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #F7F8F9;
|
||||
border-radius: 27px;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
|
||||
border-radius: 27px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6666666666666667;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
background-color: transparent;
|
||||
gap: 20px;
|
||||
margin-top: auto;
|
||||
|
||||
// 即将截止 - 红色边框
|
||||
&.deadline-danger {
|
||||
border-color: #F53F3F;
|
||||
color: #F53F3F;
|
||||
}
|
||||
|
||||
// 已截止 - 灰色边框
|
||||
&.deadline-info {
|
||||
border-color: #979797;
|
||||
.task-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #979797;
|
||||
line-height: 1.5714285714285714;
|
||||
flex: 1;
|
||||
|
||||
.calendar-icon {
|
||||
font-size: 16px;
|
||||
color: #979797;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 截止时间文本
|
||||
.deadline-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5714285714285714;
|
||||
|
||||
// 即将截止 - 红色
|
||||
&.deadline-danger {
|
||||
color: #F53F3F;
|
||||
}
|
||||
|
||||
// 已截止 - 灰色
|
||||
&.deadline-info {
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
// 已完成 - 绿色
|
||||
&.deadline-success {
|
||||
color: #00B42A;
|
||||
}
|
||||
|
||||
// 进行中 - 蓝色
|
||||
&.deadline-primary {
|
||||
color: #3491FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 已完成 - 绿色边框
|
||||
&.deadline-success {
|
||||
border-color: #00B42A;
|
||||
color: #00B42A;
|
||||
}
|
||||
// 进行中 - 蓝色边框
|
||||
&.deadline-primary {
|
||||
border-color: #3491FA;
|
||||
color: #3491FA;
|
||||
|
||||
// 开始学习按钮
|
||||
.start-btn {
|
||||
flex-shrink: 0;
|
||||
width: 104px;
|
||||
height: 42px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #D32F2F;
|
||||
box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user