更新测试步骤的size

whychdw

2021-05-19 4753fef91a9c867755481a231b353093c652967c

更新测试步骤的size

 src/components/smallModule/stepList.vue

@@ -1,5 +1,5 @@
<template>
    <div class="step-list">
    <div class="step-list" :class="sizeClass">
        <div class="step-item">
            {{ data.name }}
        </div>
@@ -38,6 +38,10 @@
                }
            }
        },
        size: {
            type: String,
            default: ''
        },
    },
    data() {
        return {}
@@ -60,6 +64,18 @@
                    break;
            }
            return result;
        },
        sizeClass() {
            let sizeClass = "";
            switch (this.size) {
                case 'mini':
                    sizeClass = "mini-size";
                    break;
                case 'small':
                    sizeClass = "small-size";
                    break;
            }
            return sizeClass;
        }
    }
}
@@ -74,6 +90,12 @@
.step-item {
    padding-right: 36px;
}
.mini-size .step-item {
    padding-right: 24px;
}
.mini-size .step-item {
    padding-right: 12px;
}
.step-status-circle {
    background-color: #FFFFFF;
    width: 24px;
@@ -82,6 +104,16 @@
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
}
.small-size .step-status-circle {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
.mini-size .step-status-circle {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
.step-status-circle.complete {
    border-color: #666EE8;
@@ -101,4 +133,10 @@
    margin-left: 50%;
    left: -1px;
}
.small-size .step-status-line {
    height: 25px;
}
.mini-size .step-status-line {
    height: 20px;
}
</style>