<template>
<div class="editInform">
<div class="testNav">
<div class="flow-item flow-item-3" @click="toTab(1)">
<div class="firstStep" :class="{'active': tab === 1}">
①编辑基本信息
</div>
</div>
<div class="flow-item flow-item-3" @click="toTab(2)">
<div :class="{'active': tab === 2}">
②编辑商品详情
</div>
</div>
<div class="flow-item flow-item-3" @click="toTab(3)">
<div class="lastStep" :class="{'active': tab === 3}">
③设置店铺
</div>
</div>
</div>
<div class="container">
<div v-if="tab === 1" @nextStep="nextStep">111111111111111111111</div>
<div v-if="tab === 2" @goBackLastStep="goBackLastStep">22222222222222</div>
<div v-if="tab === 3" @goBackLastStep="goBackLastStep">3333333333333333</div>
</div>
</div>
</template>
<script>
export default {
name: 'editInform',
data() {
return {
tab: 1
}
},
methods: {
nextStep() {
this.toTab(2)
},
goBackLastStep() {
this.tab = 1
},
toTab(index) {
this.tab = index;
},
}
}
</script>
<style scoped>
.testNav{
overflow: hidden;
}
.flow-item {
float: left;
width: 30.66667%;
max-width: 380px;
text-align: center;
margin-bottom: 9px;
padding-right: 6px;
}
.flow-item > div {
position: relative;
padding: 5px 0 5px 8px;
line-height: 20px;
background: #E8EBEF;
white-space: nowrap;
overflow: visible;
color: #3c4353;
}
.flow-item > div:before, .flow-item > div:after {
content: ' ';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 10px;
border-color: transparent transparent transparent #E8EBEF;
position: absolute;
left: 0;
top: 0;
}
.flow-item > div:after {
left: auto;
right: -10px;
z-index: 2;
}
.flow-item-3 > div {
background: #F9FAFC;
}
.flow-item-3 > div:before {
border-left-color: #fff;
z-index: 1;
}
.flow-item-3 > div:after {
border-left-color: #F9FAFC;
}
.flow-item-3 > div:hover {
background: #00A4FF;
color: #fff;
cursor: pointer;
}
.flow-item-3 > div:hover:after {
border-left-color: #00A4FF;
}
.flow-item > div.firstStep:before{
content: ' ';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0;
border-color: #fff;
position: absolute;
left: 0;
top: 0;
}
.flow-item > div.lastStep:after{
content: ' ';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0;
border-color: #fff;
position: absolute;
left: 0;
top: 0;
}
</style>
