.app-state-wizard { background: #fff; .view-steps{ display: flex; padding: 0 20px; position: relative; .steps_icon{ width: 30px; text-align: center; font-size: 20px; background: #409eff; color: #fff; line-height: 50px; height: 50px; margin-top: 21px; z-index: 1; } .steps_icon:hover{ cursor: pointer; } } .wizard-steps{ padding: 10px 20px 10px 70px; margin-bottom: 10px; width: 100%; .steps-item-span{ padding: 7px 20px; position: relative; right: 20px; } .drawer-box-shadow{ box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); } .el-step__head.is-process{ border-color: #7e8187; color: #7e8187; } .el-step__title.is-process{ color: #7e8187; } .el-step__head.is-success{ border-color: #1890ff; color: #1890ff; } .el-step__title.is-success{ color: #1890ff; } .el-step__title:hover{ cursor: pointer; } .app-active-step{ .el-icon-check:before { content: ""; width: 12px; height: 12px; border-radius: 8px; background-color: #1890ff; display: block; } } } .el-step__main{ background-color: rgb(239, 239, 239); } .background-box { height: 50px; width: calc(100% - 40px); position: absolute; background: #efefef; top: 21px; border-top: 2px solid rgb(225, 225, 225); } } .app-state-wizard-popover-container{ .app-state-wizard-container{ width: 100%; .popover-title{ position: absolute; top: 14px; left: 13px; } .app-state-wizard-header{ width: 100%; height: 30px; line-height: 22px; padding: 2px; border-bottom: 1px solid #ccc; margin-bottom: 10px; .app-state-wizard-header-extra{ float: right; } } .app-state-wizard-content{ width: 100%; padding: 4px 0px; } .app-state-wizard-footer{ display: flex; } } } .el-popper[x-placement^=bottom] { margin-top: 0px; } .app-state-wizard-drawer{ .app-form { height: calc(100% - 51px); } .drawer-button{ display: flex; justify-content: flex-end; } }