diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue index 7f9ff39..917003b 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/EmergencyPlanContent.vue @@ -144,7 +144,12 @@
-
{{ step.content }}
+
@@ -159,7 +164,10 @@ class="title-icon" />

力量调派方案

- +
@@ -168,9 +176,10 @@ :key="plan.id" class="dispatch-card" > +

- {{ plan.name }} + 基地{{ plan.id }}:{{ plan.stationName || 'xxxxx名称' }}

后续处治
- +
@@ -374,6 +475,15 @@ const handleAddPlan = () => { font-family: SourceHanSansCN-Medium, sans-serif; cursor: pointer; transition: all 0.3s ease; + display: flex; + align-items: center; + gap: vw(6); + + .add-icon { + font-size: fs(18); + font-weight: bold; + line-height: 1; + } &:hover { background: var(--primary-light); @@ -591,6 +701,35 @@ const handleAddPlan = () => { background: #052044; border-radius: vw(4); } + + .step-content-input { + flex: 1; + + :deep(.el-textarea__inner) { + background: #052044 !important; + border: 1px solid rgba(28, 161, 255, 0.3) !important; + border-radius: vw(4); + color: var(--text-white); + font-size: fs(13); + font-family: SourceHanSansCN-Regular, sans-serif; + line-height: 1.6; + padding: vh(8) vw(12); + transition: border-color 0.3s ease; + + &:hover { + border-color: var(--primary-color) !important; + } + + &:focus { + border-color: var(--primary-color) !important; + box-shadow: none !important; + } + + &::placeholder { + color: rgba(255, 255, 255, 0.3); + } + } + } } /* 调派预案 */ @@ -605,13 +744,45 @@ const handleAddPlan = () => { border: 1px solid rgba(28, 161, 255, 0.2); border-radius: vw(8); padding: vh(12) vw(14); + position: relative; + + .close-btn { + position: absolute; + top: vh(12); + right: vw(14); + width: vw(24); + height: vw(24); + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.3); + background: transparent; + color: rgba(255, 255, 255, 0.6); + font-size: fs(20); + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + + &:hover { + background: rgba(255, 77, 79, 0.2); + border-color: #ff4d4f; + color: #ff4d4f; + transform: rotate(90deg); + } + + &:active { + transform: rotate(90deg) scale(0.95); + } + } .plan-name { font-size: fs(15); font-family: SourceHanSansCN-Bold, sans-serif; font-weight: bold; color: var(--text-white); - margin: 0 0 vh(10) 0; + margin: 0 vw(30) vh(10) 0; + .plan-icon { display: inline-block; width: 9px; @@ -660,6 +831,33 @@ const handleAddPlan = () => { background: #052044; border-radius: vw(4); } + +.follow-up-textarea { + :deep(.el-textarea__inner) { + background: #052044 !important; + border: 1px solid rgba(28, 161, 255, 0.3) !important; + border-radius: vw(4); + color: var(--text-white); + font-size: fs(13); + font-family: SourceHanSansCN-Regular, sans-serif; + line-height: 1.8; + padding: vh(10) vw(14); + transition: border-color 0.3s ease; + + &:hover { + border-color: var(--primary-color) !important; + } + + &:focus { + border-color: var(--primary-color) !important; + box-shadow: none !important; + } + + &::placeholder { + color: rgba(255, 255, 255, 0.3); + } + } +}