From 66c173a50b123742343c0663a03f741db4291881 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期一, 09 十月 2023 09:33:48 +0800 Subject: [PATCH] feat: 步骤条圆点前颜色与当前状态同步 --- src/views/visualization.vue | 44 ++++++++++++++++++++++++++++++++++++-------- 1 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/views/visualization.vue b/src/views/visualization.vue index c0e7cc3..8428728 100644 --- a/src/views/visualization.vue +++ b/src/views/visualization.vue @@ -90,7 +90,7 @@ </span> --> </div> <div class="gongx"> - <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0" finish-status="success" class="steps"> + <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex ?? 0" finish-status="success" class="steps"> <el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step> </el-steps> </div> @@ -1373,13 +1373,6 @@ } } } - .el-step__head.is-process{ - color: #00cc66 !important; - border-color:#00cc66; - } - .el-step__title.is-process{ - color: #00cc66 !important; - } .el-step__head.is-wait{ color:#fff; border-color:#fff; @@ -1387,6 +1380,41 @@ .el-step__title.is-wait{ color:#fff; } + + // 浣挎楠ゆ潯鑺傜偣鐘舵�佹垚鍔熸椂,鍓嶉潰鐨勭嚎鍚屾鏇存敼棰滆壊 + .steps{ + /* 杩涜涓姸鎬侊細鍦堢嚎 */ + & .el-step__head.is-process { + color: #00cc66; + border-color: #00cc66; + } + /* 杩涜涓姸鎬侊細鍦堝唴 */ + & .el-step__head.is-process > .el-step__icon { + background: #00cc66; + color: #00cc66; + } + /* 杩涜涓姸鎬侊細title锛堟枃瀛楋級 */ + & .el-step__title.is-process { + color: #00cc66; + } + + /* 瀹屾垚鐘舵�侊細鍦堢嚎 */ + & .el-step__head.is-success { + color: #00cc66; + border-color: #00cc66; + } + /* 瀹屾垚鐘舵�侊細title锛堟枃瀛楋級 */ + & .el-step__title.is-success { + color: #00cc66; + } + /* 瀹屾垚鐘舵�侊細line + * 鎻忚堪锛氱涓�姝ュ畬鎴愶紝绗簩姝ヨ繘琛屾椂锛屼箣闂寸殑杩涘害鏉℃湁棰滆壊 + */ + & .el-step__head.is-success > .el-step__line > .el-step__line-inner { + width: 100% !important; + border-width: 1px !important; + } + } } .set-title { cursor: pointer; -- Gitblit v1.8.0