<template>
<div class="editInform">
<div class="testNav">
<div :class="{'selected':tab === 1}" class="tabItem baseInfo">
① 编辑基础信息
<div class="arrow-right"></div>
</div>
<div :class="{'selected':tab === 2}" class="tabItem editBaseDetail">
② 编辑商品详情
<div class="arrow-left"></div>
</div>
</div>
<div class="container">
<keep-alive>
<edit-base-info v-if="tab === 1" @nextStep="nextStep" @goBackPage="$router.go(-1)"></edit-base-info>
<edit-base-detail v-else @goBackLastStep="goBackLastStep"></edit-base-detail>
</keep-alive>
</div>
</div>
</template>
<script>
import editBaseInfo from './editBaseInfo'
import editBaseDetail from './editBaseDetail'
export default {
name: 'editInform',
components: {
editBaseInfo,
editBaseDetail
},
data() {
return {
tab: 1
}
},
methods: {
nextStep() {
this.toTab(2)
},
goBackLastStep() {
this.tab = 1
},
toTab(index) {
this.tab = index;
},
}
}
</script>
<style scoped lang="less">
.editInform{
.testNav{
display: flex;
}
.tabItem{
height:45px;
width:50%;
line-height: 45px;
color: #666666;
font-size: 16px;
text-align: center;
display: inline-block;
position: relative;
background:linear-gradient(147deg,rgba(63,141,255,1) 0%,rgba(24,173,255,1) 100%);
color: #fff;
}
.arrow-left {
font-size: 0;
line-height: 0;
border-width: 22.5px;
border-color: #F5F7FA;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
left: 0;
top: 0px;
z-index: 10;
}
.editBaseDetail{
background:#F9FAFC;
color: #666;
}
.arrow-right {
font-size: 0;
line-height: 0;
border-width: 22.5px;
border-color: #18ADFF;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
right: -22px;
top: 0px;
z-index: 20;
}
.baseInfo{
margin-right: 6px;
}
.selected{
color: #fff;
background:linear-gradient(147deg,rgba(63,141,255,1) 0%,rgba(24,173,255,1) 100%);
}
}
</style>
