移动端步骤3 自动伸缩
<template > <div class="pt80 mt10 f14 cor3 pr10 pl10" v-if="stepList && stepList.length" > <div class="step-item" v-for="(item, index) in stepList" :key="index"> <div class="item-left"> <div class="item-index" :style="{ backgroundColor: setColor(item.status, index)[0] }" > <span v-if="item.status == 4"> <i class="iconfont icon-ticketgou1"></i> </span> <span v-if="item.status == 3"> <i class="iconfont icon-ticketshanchu2"></i> </span> </div> <div :class="{ activeLine: stepList[index + 1].status != 1, }" v-if="index != stepList.length - 1" class="item-line" ></div> </div> <div class="item-right pl10" :style="{ opacity: item.status == 1 ? 0.7 : 1, }" > <div>测试数据</div> <div class="bgf"> <div class="mt10 p10">1</div> </div> </div> </div> </div> </template> <script> export default { components: { }, data() { return { stepList: [{ status: 2 }, { status: 2 }, { status: 1 }, { status: 1 }], }; }, created() {}, methods: { setColor(status, index) { switch (status) { case 1: return ["#E0E5F7", "#bfbfbf"]; break; case 2: return ["#2e7cf9", "#333"]; break; case 4: return ["#4caf5f", "#4caf5f"]; break; case 3: return ["#e65b54", "#e65b54"]; break; default: return ["#e7e7e7", "#bfbfbf"]; break; } }, }, }; </script> <style lang="scss" scoped> .activeLine { background-color: #2e7cf9 !important; } .red { color: #e65b54; background-color: #e65b54; } .green { color: #4caf5f; background-color: #4caf5f; } .step-item { display: flex; justify-content: flex-start; .item-left { width: 40px; .item-index { margin: -1px auto; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 16px; color: #fff; background-color: #2e7cf9; border-radius: 50%; position: relative; z-index: 10; transform: scale(1.2); } .item-line { margin: 0 auto; width: 8px; // min-height: 60px; height: 100%; // height: calc(100% + 50px); background-color: #e0e5f7; // background-color: #eaeaea; } } .item-right { flex: 1; // display: flex; // justify-content: space-between; position: relative; top: -15px; min-height: 60px; // background-color: #fff; padding: 10px; box-sizing: border-box; border-radius: 8px; } } </style>