|
|
@@ -10,7 +10,7 @@
|
|
|
<!-- 仅保留步骤一内容：选择试验任务 -->
|
|
|
<div class="animate-fadeIn space-y-6">
|
|
|
<!-- 选择试验任务区域 -->
|
|
|
- <el-card class="bg-gray-800 border-none mb-8">
|
|
|
+ <el-card class="border-none mb-8" style="background-color: #011d5c">
|
|
|
<div class="flex items-center mb-2">
|
|
|
<i class="el-icon-document mr-3 text-blue-400"></i>
|
|
|
<h2 class="text-xl font-bold">选择总体任务</h2>
|
|
|
@@ -23,8 +23,10 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="8" v-for="(plan, index) in planList" :key="index">
|
|
|
<el-card
|
|
|
- :class="`bg-gray-800 border-4 border-gray-700 rounded-md transition-all duration-300 ${selectedPlan && selectedPlan.taskName === plan.taskName ? 'border-blue-500 shadow-lg transform scale-[1.02]' : ''}`"
|
|
|
- >
|
|
|
+ @click.native="handleTaskSelect(plan)"
|
|
|
+ class="task-card"
|
|
|
+ :class="{ 'task-card--active': selectedPlan && selectedPlan.taskName === plan.taskName }"
|
|
|
+ >
|
|
|
<div class="flex justify-between items-start mb-3">
|
|
|
<h3 class="text-lg font-bold"> {{ plan.taskName || "-" }}</h3>
|
|
|
<!--<el-tag effect="dark" class="info-value">-->
|
|
|
@@ -41,18 +43,18 @@
|
|
|
<el-button
|
|
|
:class="[
|
|
|
'w-full font-medium transition-all duration-200',
|
|
|
- selectedPlan && selectedPlan.taskName === plan.taskName ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'
|
|
|
+ selectedPlan && selectedPlan.id === plan.id ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'
|
|
|
]"
|
|
|
- @click.stop="handleTaskSelect(plan)"
|
|
|
+
|
|
|
>
|
|
|
- {{ selectedPlan && selectedPlan.taskName === plan.taskName? '✅ 已选择' : '选择此总体任务' }}
|
|
|
+ {{ selectedPlan && selectedPlan.id === plan.id? '✅ 已选择' : '选择此总体任务' }}
|
|
|
</el-button>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
|
|
|
- <el-card v-if="selectedPlan" class="bg-gray-800 border-none mb-8">
|
|
|
+ <el-card v-if="selectedPlan" class="border-none mb-8" style="background-color: #011d5c">
|
|
|
<div class="flex items-center mb-2">
|
|
|
<i class="el-icon-document mr-3 text-blue-400"></i>
|
|
|
<h2 class="text-xl font-bold">选择子任务</h2>
|
|
|
@@ -61,7 +63,9 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="8" v-for="(plan, index) in subPlanList" :key="index">
|
|
|
<el-card
|
|
|
- :class="`bg-gray-800 border-4 border-gray-700 rounded-md transition-all duration-300 ${selectedSubPlan && selectedSubPlan.subTaskName === plan.subTaskName ? 'border-blue-500 shadow-lg transform scale-[1.02]' : ''}`"
|
|
|
+ @click.native="handleTaskSelectSub(plan)"
|
|
|
+ class="task-card"
|
|
|
+ :class="{ 'task-card--active': selectedSubPlan && selectedSubPlan.id === plan.id }"
|
|
|
>
|
|
|
|
|
|
<div class="flex justify-between items-start mb-3">
|
|
|
@@ -83,7 +87,7 @@
|
|
|
'w-full font-medium transition-all duration-200',
|
|
|
selectedSubPlan && selectedSubPlan.subTaskName === plan.subTaskName ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'
|
|
|
]"
|
|
|
- @click.stop="handleTaskSelectSub(plan)"
|
|
|
+
|
|
|
>
|
|
|
{{ selectedSubPlan && selectedSubPlan.subTaskName === plan.subTaskName ? '✅ 已选择' : '选择此任务' }}
|
|
|
</el-button>
|
|
|
@@ -98,7 +102,7 @@
|
|
|
<div class="flex justify-center gap-4 mt-8">
|
|
|
<el-button class="blue-btn" @click="back">返回</el-button>
|
|
|
<el-button
|
|
|
- class="blue-btn"
|
|
|
+ type="primary"
|
|
|
@click="confirmSelection"
|
|
|
:disabled="!selectedTask && !selectedSubPlan"
|
|
|
>
|
|
|
@@ -221,6 +225,27 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.task-card {
|
|
|
+ background: #09264c;
|
|
|
+ border: 1px solid #334155;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ color: #e2e8f0;
|
|
|
+ transition: all 0.25s ease;
|
|
|
+ display: flex; flex-direction: column; justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.task-card:hover {
|
|
|
+ border-color: #3b82f6;
|
|
|
+ box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.task-card--active {
|
|
|
+ border: 2px solid #3b82f6;
|
|
|
+ box-shadow: 0 0 10px rgba(59,130,246,0.7);
|
|
|
+}
|
|
|
+
|
|
|
.el-card__header {
|
|
|
background-color: transparent !important;
|
|
|
border-bottom: none !important;
|
zhaoen