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.
154 lines
3.8 KiB
154 lines
3.8 KiB
<!-- TabBar.vue -->
|
|
<template>
|
|
|
|
<view class="bar_background"></view>
|
|
|
|
<!-- 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="pick_up_community"
|
|
src="/static/components/tarbar/pictures/community_pick_up.png"
|
|
@click="pick_up_community">
|
|
</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>
|
|
|
|
|
|
</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.reLaunch({
|
|
url: '/pages/homepages/home/home', // 使用 navigateTo
|
|
});
|
|
},
|
|
pick_up_community() {
|
|
this.resetPicks();
|
|
this.is_communnity_picked_up = true;
|
|
uni.reLaunch({
|
|
url: '/pages/homepages/community/community',
|
|
});
|
|
},
|
|
pick_up_assistant() {
|
|
this.resetPicks();
|
|
this.is_assistant_picked_up = true;
|
|
uni.reLaunch({
|
|
url: '/pages/homepages/puppy_chat/puppy_chat',
|
|
});
|
|
},
|
|
pick_up_user() {
|
|
this.resetPicks();
|
|
this.is_user_picked_up = true;
|
|
uni.reLaunch({
|
|
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">
|
|
|
|
@keyframes colorTransition {
|
|
from {
|
|
background-color: #5858cd;
|
|
}
|
|
to {
|
|
background-color: #E9D0D0;
|
|
}
|
|
}
|
|
.bar_background{
|
|
position: absolute;
|
|
width: 95%; /* 宽度占95% */
|
|
height: 10%; /* 高度 */
|
|
bottom: 1.2%; /* 距离底部2% */
|
|
left: 2.5%; /* 左侧2.5% */
|
|
background-color: khaki; /* 初始颜色 */
|
|
border-radius: 37px; /* 圆角半径，可以根据需要调整 */
|
|
z-index: -1; /* 使背景框在其他元素后面 */
|
|
animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
|
|
}
|
|
|
|
|
|
|
|
|
|
.home, .community, .assistant, .user {
|
|
position: absolute;
|
|
width: 15%;
|
|
height: 6%;
|
|
bottom: 2%;
|
|
transition: opacity 0.7s ease; /* 添加渐变过渡 */
|
|
|
|
}
|
|
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
|
|
position: absolute;
|
|
width: 17%;
|
|
height: 10%;
|
|
bottom: 2%;
|
|
transition: opacity 1s 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>
|