//底部按钮 .hui-button-box { background-color: #ffffff; box-shadow: 0px 2px 10px rgba(3, 3, 3, 0.1); position: fixed; bottom: 0; left: 0; right: 0; height: 100rpx; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); padding-right: 40rpx; padding-left: 40rpx; } .text-flex { display: flex; justify-content: space-between; align-items: center; } .color-primary{ color: $uv-primary; } .color-success{ color: $uv-success; } .color-warning{ color: $uv-warning; } .color-error { color: $uv-error; } //通用列表 .status-tag { height: 52rpx; border-radius: 52rpx; line-height: 52rpx; padding: 0 30rpx; font-size: 24rpx; color: #fff; &.success { background-color: $uv-success; } &.primary { background-color: $uv-primary; } &.info { background-color: $uv-info; } &.warning { background-color: $uv-warning; } &.error { background-color: $uv-error; } } .process-box{ .process-set-item { padding-left: 80rpx; position: relative; } .process-item-title { padding: 10rpx 0; display: flex; align-items: center; .label { font-weight: bold; } } .process-item-content { padding: 5px 0; } .process-set-state { width: 20px; height: 20px; border-radius: 50%; position: absolute; left: 7px; top: 6px; display: flex; align-items: center; justify-content: center; .el-icon-success { font-size: 20px; } &.info { background: rgba(144, 157, 143, 0.4); .process-set-state-1 { background: rgba(144, 157, 143, 1); } .process-set-state-2 { background: rgba(144, 157, 143, 0.6); } } &.waiting { background: rgba(255, 125, 0, 0.4); .process-set-state-1 { background: rgba(255, 125, 0, 1); } .process-set-state-2 { background: rgba(255, 125, 0, 0.6); } .el-icon-success { color: rgba(255, 125, 0, 1); } } &.success { background: rgba(0, 180, 42, 0.4); .process-set-state-1 { background: rgba(0, 180, 42, 1); } .process-set-state-2 { background: rgba(0, 180, 42, 0.6); } } &.error { background: rgba(245, 63, 63, 0.4); .process-set-state-1 { background: rgba(245, 63, 63, 1); } .process-set-state-2 { background: rgba(245, 63, 63, 0.6); } } &.state-last { background: #fff; } } .process-set-state-1 { width: 8px; height: 8px; border-radius: 50%; } .process-set-state-2 { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .line { position: absolute; left: 16px; width: 2px; &.info { background: rgba(144, 157, 143, 0.4); } &.waiting { background: rgba(255, 125, 0, 0.4); } &.success { background: rgba(0, 180, 42, 0.4); } &.error { background: rgba(245, 63, 63, 0.4); } } .line-top { top: 0; height: 6px; } .line-bottom { top: 26px; bottom: 0; } }