diff --git a/src/assets/sass/renderSass/steps.scss b/src/assets/sass/renderSass/steps.scss new file mode 100644 index 0000000..41b1b36 --- /dev/null +++ b/src/assets/sass/renderSass/steps.scss @@ -0,0 +1,93 @@ +.render-steps { + &.el-steps--simple { + background: #fff; + padding: 0; + } + & .el-step__icon { + width: auto !important; + height: auto !important; + &.is-text { + border: none; + } + } + & .el-step { + background: #fff; + &.is-horizontal { + & .el-step__line { + background: #ebeef2; + top: 9px; + left: 45px; + right: 10px; + height: 1px; + } + } + &.is-simple { + display: flex; + align-items: center; + & .el-step__arrow { + &:after, + &:before { + background: unset; + } + &:before { + width: 100%; + border-top: 1px solid #ddd; + top: 10px; + right: 20px; + transform: scaleY(0.4); + } + } + & .el-step__title { + font-family: PingFangSC, PingFang SC; + font-weight: 600; + font-size: 13px; + font-style: normal; + } + } + + & .el-step__title { + background: #fff; + z-index: 9; + padding-right: 20px; + } + & .el-step__head, + & .el-step__title { + &.is-process { + color: $--color-primary; + + & .is-text { + & .icon-text { + font-family: PingFangSC, PingFang SC; + + font-weight: 500; + font-size: 10px; + color: #ffffff; + font-style: normal; + background: $--color-primary; + padding: 2px 5px; + border-radius: 8px; + border: unset; + } + } + } + } + } +} +.icon-text { + font-family: PingFangSC, PingFang SC; + font-weight: 500; + font-size: 10px; + font-style: normal; + padding: 2px 5px; + border-radius: 8px; + border: 1px solid #eee; +} + +.el-step__title { + &.is-success { + color: $--color-primary-success; + background: #fff; + z-index: 8; + padding: 0 20px 0 0; + } +} diff --git a/src/assets/sass/renderSass/theme.scss b/src/assets/sass/renderSass/theme.scss index 228cc21..356dd3f 100644 --- a/src/assets/sass/renderSass/theme.scss +++ b/src/assets/sass/renderSass/theme.scss @@ -12,6 +12,7 @@ $--color-primary-table-button-hover: #e3e5f1; $--color-primary-label: #70778d; $--color-primary-button-color: #4f47f5; $--color-primary-button-background: #4f47f51a; +$--color-primary-success: #02a838; :root { --swiper-theme-color: #4f47f5ff; diff --git a/src/assets/sass/renderUi.scss b/src/assets/sass/renderUi.scss index d4dfee8..c0a8aa9 100644 --- a/src/assets/sass/renderUi.scss +++ b/src/assets/sass/renderUi.scss @@ -6,6 +6,7 @@ @import 'renderSass/label'; @import 'renderSass/radio'; @import 'renderSass/drawer'; +@import 'renderSass/steps'; html, body, diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue index e7584bc..613cabe 100644 --- a/src/views/knowledge/detail/create.vue +++ b/src/views/knowledge/detail/create.vue @@ -5,10 +5,25 @@