重制箭头图片并替换原来的图片

src/components/ui/CrossingDetailPanel.vue

@@ -54,8 +54,14 @@
                                 <div class="current-stage-warp">
                                     <div class="current-stage-label">当前阶段：</div>
                                     <div v-for="(item, index) in currentStageList" :key="index" class="stage-item-wrapper">
-                                        <img :src="require(`@/assets/${item.img}`)" alt="stage"
-                                            :class="{ 'stage-img': true, 'stage-active': item.value === currentStage }" />
+                                        <div 
+                                            class="phase-box" 
+                                            :class="{ 'is-active': item.value === currentStage }"
+                                            @click="currentStage = item.value"
+                                        >
+                                            <img :src="require(`@/assets/images/${item.img}`)" alt="stage" class="phase-image" />
+                                        </div>
+                                        
                                         <input 
                                             type="number" 
                                             v-model.number="item.time" 
@@ -208,10 +214,10 @@ export default {
             currentStage: '1', 
             // 补充了 time 属性，用于双向绑定输入框的时间
             currentStageList: [
-                { value: '1', time: 30, img: 'test_img1.png' },
-                { value: '2', time: 30, img: 'test_img1.png' },
-                { value: '3', time: 50, img: 'test_img1.png' },
-                { value: '4', time: 30, img: 'test_img1.png' }
+                { value: '1', time: 30, img: 'arrow_1.png' },
+                { value: '2', time: 30, img: 'arrow_2.png' },
+                { value: '3', time: 50, img: 'arrow_3.png' },
+                { value: '4', time: 30, img: 'arrow_4.png' }
             ]
         }
     },
@@ -532,17 +538,6 @@ export default {
     width: 100px;
 }
 
-.stage-img {
-    border-radius: 5px;
-    width: 65px;
-    height: 65px;
-}
-
-.stage-active {
-    background-blend-mode: multiply;
-    background-color: rgba(17, 23, 29, .5);
-}
-
 .stage-input {
     width: 65px;
     border: 1px solid rgba(161,190,255,0.7);
@@ -552,6 +547,45 @@ export default {
     text-align: center;
 }
 
+.phase-box {
+    position: relative;
+    width: 65px;         /* 保持原有的固定尺寸 */
+    height: 65px;
+    background: #E6F0FF; 
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.phase-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.phase-box::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(30, 106, 255, 0.5); /* 激活时的蒙层颜色 */
+    opacity: 0; 
+    transition: opacity 0.3s ease;
+    pointer-events: none; /* 防止阻挡点击事件 */
+}
+
+.phase-box.is-active::after {
+    opacity: 1; 
+}
+
 /** 按钮 */
 /* 按钮基础通用样式 */
 .btn {

src/components/ui/IntersectionControlCard.vue

@@ -197,7 +197,7 @@ export default {
 .phase-image {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
     display: block;
 }
 

src/views/StatusMonitoring.vue

@@ -66,7 +66,10 @@ import ButtonGroup from '@/components/ui/ButtonGroup.vue';
 import { makeTrafficTimeSpaceData } from '@/mock/data';
 import testVideo1 from '@/assets/videos/video1.mp4';
 import testVideo2 from '@/assets/videos/video2.mp4';
-import testImg1 from '@/assets/test_img1.png';
+import arrow1 from '@/assets/images/arrow_1.png';
+import arrow2 from '@/assets/images/arrow_2.png';
+import arrow3 from '@/assets/images/arrow_3.png';
+import arrow4 from '@/assets/images/arrow_4.png';
 
 
 export default {
@@ -581,10 +584,10 @@ export default {
                         btnText: '立即解锁',
                         btnType: 'normal',
                         phases: [
-                            { id: 1, icon: '↑', img: testImg1, active: false },
-                            { id: 2, icon: '↰', img: testImg1, active: false },
-                            { id: 3, icon: '↑', img: testImg1, active: true }, // 当前激活相位
-                            { id: 4, icon: '↰', img: testImg1, active: false }
+                            { id: 1, icon: '↑', img: arrow1, active: false },
+                            { id: 2, icon: '↰', img: arrow2, active: false },
+                            { id: 3, icon: '↑', img: arrow3, active: true }, // 当前激活相位
+                            { id: 4, icon: '↰', img: arrow4, active: false }
                         ],
                         // 传给你原有的 IntersectionMapVideos 组件的数据
                         mapData: {
@@ -614,10 +617,10 @@ export default {
                         stage: 2, mode: '系统', timeLeft: 15,
                         btnText: '立即执行', btnType: 'primary',
                         phases: [
-                            { id: 1, icon: '↑', img: testImg1, active: true },
-                            { id: 2, icon: '↰', img: testImg1, active: false },
-                            { id: 3, icon: '↑', img: testImg1, active: false },
-                            { id: 4, icon: '↰', img: testImg1, active: false }
+                            { id: 1, icon: '↑', img: arrow1, active: true },
+                            { id: 2, icon: '↰', img: arrow2, active: false },
+                            { id: 3, icon: '↑', img: arrow3, active: false },
+                            { id: 4, icon: '↰', img: arrow4, active: false }
                         ],
                         mapData: {
                             armsConfig: {