<template> <div id="tabbar"> <div class="tab" :class="active=='databook'?'active':''" @click="handleDataBook"> <img v-if="active=='databook'" src="../assets/tabbar2/tab1_on.png" alt=""> <img v-else src="../assets/tabbar2/tab1_off.png" alt=""> <p>数据宝典</p> </div> <div class="tab" :class="active=='careerplan'?'active':''" @click="handleCareerPlan"> <img v-if="active=='careerplan'" src="../assets/tabbar2/tab2_on.png" alt=""> <img v-else src="../assets/tabbar2/tab2_off.png" alt=""> <p>生涯规划</p> </div> <!-- <div class="tab" :class="active=='community'?'active':''" @click="handleCommunity"> <img v-if="active=='community'" src="../assets/tabbar2/tab3_on.png" alt=""> <img v-else src="../assets/tabbar2/tab3_off.png" alt=""> <p>社区</p> </div> --> <div class="tab" :class="active=='service'?'active':''" @click="handleService"> <img v-if="active=='service'" src="../assets/tabbar2/tab3_on.png" alt=""> <img v-else src="../assets/tabbar2/tab3_off.png" alt=""> <p>服务活动</p> </div> <div class="tab" :class="active=='center'?'active':''" @click="handleCenter"> <img v-if="active=='center'" src="../assets/tabbar2/tab4_on.png" alt=""> <img v-else src="../assets/tabbar2/tab4_off.png" alt=""> <p>个人中心</p> </div> </div> </template> <script> export default { name: 'Tabbar2', props: { active: String }, methods: { handleDataBook () { this.$router.push({ name: 'DataBook' }) }, handleCareerPlan () { this.$router.push({ name: 'CareerPlan' }) }, handleCommunity () { this.$router.push({ name: 'Community' }) }, handleService () { this.$router.push({ name: 'Service' }) }, handleCenter(){ this.$router.push({ name: 'Home' }) } } } </script> <style lang="scss" scoped> #tabbar { position: fixed; bottom: 0; width: 100%; height: 100px; background: #fff; display: flex; justify-content: space-around; padding-bottom: 40px; z-index: 99; .tab { padding: 18px; img { width: 36px; padding: 20px; display: block; margin: 0 auto; } .block { width: 52px; height: 52px; } p { font-size: 20px; color: #999999; text-align: center; } &.active { p { color: #5789ff; } } } .center { width: 92px; height: 92px; padding: 30px; background: transparent; position: absolute; top: -60px; left: 299px; overflow: hidden; z-index: 1; .tip { width: 92px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } } } </style>