forked from fzu102201435/front
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.8 KiB
142 lines
3.8 KiB
<!-- 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>
|