<!-- TabBar.vue --> <template> <view> <image class="bar" src="/static/components/tarbar/pictures/bar.png"></image> <!-- Home 图标 --> <image class="home" src="/static/components/tarbar/pictures/home.png" @click="pick_up_home" :style="{ opacity: is_home_picked_up ? 0 : 1 }"> </image> <image class="pick_up_home" src="/static/components/tarbar/pictures/home_picked_up.png" @click="pick_up_home" :style="{ opacity: is_home_picked_up ? 1 : 0 }"> </image> <!-- Community 图标 --> <image class="community" src="/static/components/tarbar/pictures/community.png" @click="pick_up_community" :style="{ opacity: is_communnity_picked_up ? 0 : 1 }"> </image> <image class="pick_up_community" src="/static/components/tarbar/pictures/community_pick_up.png" @click="pick_up_community" :style="{ opacity: is_communnity_picked_up ? 1 : 0 }"> </image> <!-- Assistant 图标 --> <image class="assistant" src="/static/components/tarbar/pictures/assistant.png" @click="pick_up_assistant" :style="{ opacity: is_assistant_picked_up ? 0 : 1 }"> </image> <image class="pick_up_assistant" src="/static/components/tarbar/pictures/assistant_picked_up.png" @click="pick_up_assistant" :style="{ opacity: is_assistant_picked_up ? 1 : 0 }"> </image> <!-- User 图标 --> <image class="user" src="/static/components/tarbar/pictures/user.png" @click="pick_up_user" :style="{ opacity: is_user_picked_up ? 0 : 1 }"> </image> <image class="pick_up_user" src="/static/components/tarbar/pictures/user_picked_up.png" @click="pick_up_user" :style="{ opacity: is_user_picked_up ? 1 : 0 }"> </image> </view> </template> <script> export default { data() { return { is_home_picked_up: false, is_communnity_picked_up: false, is_assistant_picked_up: false, is_user_picked_up: false }; }, methods: { pick_up_home() { this.resetPicks(); this.is_home_picked_up = true; uni.navigateTo({ url: '/pages/homepages/home/home', // 使用 navigateTo }); }, pick_up_community() { this.resetPicks(); this.is_communnity_picked_up = true; uni.navigateTo({ url: '/pages/homepages/community/community', }); }, pick_up_assistant() { this.resetPicks(); this.is_assistant_picked_up = true; uni.navigateTo({ url: '/pages/homepages/puppy_chat/puppy_chat', }); }, pick_up_user() { this.resetPicks(); this.is_user_picked_up = true; uni.navigateTo({ url: '/pages/homepages/user/user', }); }, resetPicks() { this.is_home_picked_up = false; this.is_communnity_picked_up = false; this.is_assistant_picked_up = false; this.is_user_picked_up = false; } } }; </script> <style lang="scss"> .bar { position: absolute; width: 95%; height: 10%; bottom: 1%; left: 2.5%; background-size: cover; background-position: center; } .home, .community, .assistant, .user { position: absolute; width: 15%; height: 6%; bottom: 2%; transition: opacity 0.3s ease; /* 添加渐变过渡 */ } .pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user { position: absolute; width: 17%; height: 10%; bottom: 2%; transition: opacity 0.3s ease; /* 添加渐变过渡 */ } /* 图标位置调整 */ .home { left: 6%; } .pick_up_home { left: 6%; } .community { left: 30%; } .pick_up_community { left: 30%; } .assistant { left: 54%; } .pick_up_assistant { left: 54%; } .user { left: 78%; } .pick_up_user { left: 78%; } </style>