|
@@ -1,5 +1,14 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="card p-4 mb-3 clickable border-l-4 border-primary" :style="borderStyle" @click="$emit('click', task.id)">
|
|
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="card p-4 mb-3 clickable border-l-4 border-primary"
|
|
|
|
|
+ hover-class="scale-down"
|
|
|
|
|
+ :class="{
|
|
|
|
|
+ 'border-red-500': task.type === 'emergency',
|
|
|
|
|
+ 'bg-green-50': task.status === 'completed'
|
|
|
|
|
+ }"
|
|
|
|
|
+ :style="borderStyle"
|
|
|
|
|
+ @click="$emit('click', task.id)"
|
|
|
|
|
+ >
|
|
|
<view class="flex justify-between items-start mb-2">
|
|
<view class="flex justify-between items-start mb-2">
|
|
|
<view class="flex-1 min-w-0 mr-3">
|
|
<view class="flex-1 min-w-0 mr-3">
|
|
|
<text class="text-sm font-semibold text-gray-800 truncate block">{{ task.projectName || '未命名任务' }}</text>
|
|
<text class="text-sm font-semibold text-gray-800 truncate block">{{ task.projectName || '未命名任务' }}</text>
|
|
@@ -112,4 +121,12 @@ const actionColor = computed(() => {
|
|
|
.border-l-4 {
|
|
.border-l-4 {
|
|
|
border-left-width: 4px;
|
|
border-left-width: 4px;
|
|
|
}
|
|
}
|
|
|
|
|
+.scale-down {
|
|
|
|
|
+ transition: transform 0.15s ease;
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+}
|
|
|
|
|
+.scale-down:hover,
|
|
|
|
|
+.scale-down:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|