1 <template> 2 <div class="content"> 3 <header class="tab_nav"> 4 <div v-for="(item,index) in tabNav" :key="index" @click = "selected(index, $event)" :class="{'active':item.active}"> 5 <img :src="item.imgUrl" alt="icon"> 6 <span>{{item.title}}</span> 7 </div> 8 </header> 9 <main></main> 10 <footer></footer> 11 </div> 12 </template> 13 14 <script> 15 export default { 16 data() { 17 return { 18 tabNav:[ 19 {title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'}, 20 {title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'}, 21 {title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'}, 22 ] 23 } 24 }, 25 methods: { 26 selected: function(index) { 27 this.tabNav.forEach(e => e.active = false); 28 this.tabNav[index].active = true; 29 } 30 } 31 } 32 </script> 33 34 <style scoped lang="less"> 35 .border{ 36 content: ''; 37 display: block; 38 width: 1px; 39 height: 1.5rem; 40 background: #D9D9D9; 41 position: absolute; 42 top: 0.75rem; 43 } 44 .tab_nav{ 45 display: flex; 46 width: 100%; 47 height: 2.5rem; 48 background: #fff; 49 opacity: 0.5rem; 50 &>div{ 51 height: 2.5rem; 52 width: 33.33%; 53 opacity: 0.5; 54 text-align: center; 55 &:nth-of-type(2) { 56 position: relative; 57 &::before{ 58 .border; 59 left: 0; 60 } 61 &::after{ 62 .border; 63 right: 0; 64 } 65 } 66 &>img{ 67 width: 1rem; 68 height: 1rem; 69 display: block; 70 margin: 0.5rem auto 0; 71 } 72 &>span{ 73 display: block; 74 font-size: 0.5rem; 75 color: #69728E; 76 line-height: 0.8rem; 77 } 78 } 79 &>div.active { 80 color: #69728E; 81 opacity: 1; 82 }84 85 86 } 87 88 </style>
