效果图
实现
<!-- 步骤条 --><div class="flex-box" v-if="showStep"><div :class="['first-step-box', activeIndex == 1 ? 'active-step' : 'inactive-step']">填写商品信息<div class="triangle-right-theme" v-if="activeIndex == 1"></div><div class="triangle-left-white" v-if="activeIndex == 2"></div></div><div class="center-box"></div><div :class="['second-step-box', activeIndex == 2 ? 'active-step' : 'inactive-step']">填写属性及其他<div class="triangle-right-white" v-if="activeIndex == 1"></div><div class="triangle-left-theme" v-if="activeIndex == 2"></div></div></div>
.flex-box {display: flex;height: 48px;margin-bottom: 8px;.first-step-box {flex: 1;height: 48px;line-height: 48px;text-align: center;color: @1D2129;position: relative;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}.second-step-box {flex: 1;height: 48px;line-height: 48px;text-align: center;position: relative;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}.center-box {width: 5px;height: 48px;}.active-step {background-color: @primary-color;color: #fff;}.inactive-step {background-color: #f2f3f5;color: @1D2129;}.triangle-right-theme {width: 0;height: 0;border-top: 24px solid transparent;border-left: 24px solid @primary-color;border-bottom: 24px solid transparent;position: absolute;top: 0;right: -24px;z-index: 100;}.triangle-right-white {width: 0;height: 0;border-top: 24px solid transparent;border-left: 24px solid #fff;border-bottom: 24px solid transparent;position: absolute;top: 0;left: 0;z-index: 90;}.triangle-left-theme {width: 0;height: 0;border: 24px solid @primary-color;border-top: 24px solid transparent;border-left: 24px solid transparent;border-bottom: 24px solid transparent;position: absolute;top: 0;left: -48px;z-index: 100;}.triangle-left-white {width: 0;height: 0;border: 24px solid #fff;border-top: 24px solid transparent;border-left: 24px solid transparent;border-bottom: 24px solid transparent;position: absolute;top: 0;right: 0;z-index: 90;}}
欢迎大家提供更好的方法~
