<template> <div> <div class="arrowsBox"> <div class="arrowsItem" v-for="(item, index) in list" :key="index"> <div class="arrows-up arrows" :class="{ arrows_active: item.status === 'active', arrows_done: item.status === 'done', arrows_todo: item.status === 'todo', }" ></div> <div class="arrows-down arrows" :class="{ arrows_active: item.status === 'active', arrows_done: item.status === 'done', arrows_todo: item.status === 'todo', }" ></div> <div class="arrows-label" :class="{ arrows_label_active: item.status === 'active', arrows_label_done: item.status === 'done', arrows_label_todo: item.status === 'todo', }" > {{ item.label }} </div> </div> </div> <button v-if="unFinish" @click="next" class="btn">下一步</button> </div> </template> <script> export default { data() { return { unFinish: true, list: [ { label: "1-规则说明", prop: "1", status: "done", }, { label: "2-参与活动", prop: "2", status: "done", }, { label: "3-参与抽奖", prop: "3", status: "active", }, { label: "4-奖品发放", prop: "4", status: "todo", }, { label: "5-查看结果", prop: "5", status: "todo", }, ], }; }, methods: { next() { for (let item of this.list) { if (item.status === "active") { item.status = "done"; } if (item.status === "todo") { item.status = "active"; if (this.list[this.list.length - 1].status === "active") { this.unFinish = false; } break; } } }, }, }; </script> <style scoped> .arrowsBox { display: flex; justify-content: center; height: 40px; margin: 20px; font-weight: bold; } .arrowsItem { position: relative; height: 100%; width: 140px; margin-right: 10px; } .arrows-up { transform: skewX(30deg); } .arrows-down { transform: skewX(-30deg); } .arrows { height: 50%; background: gray; } .arrows-label { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; bottom: 0; text-align: center; } .arrows_done { background: #edf9ff; } .arrows_active { background: #009fe9; } .arrows_todo { background: #ebedf0; } .arrows_label_done { color: #009fe9; } .arrows_label_active { color: #fff; } .arrows_label_todo { color: #929393; } .btn { background: #009fe9; color: #fff; border: none; padding: 6px; width: 100px; border-radius: 4px; margin: auto; display: block; } </style>
css 斜切skew的妙用