front/components/tarbar_home/tarbar_home.vue

<!-- TabBar.vue -->
<template>

    <view class="bar_background"></view>
    <!-- Home 图标 -->
    <image class="pick_up_home"
           src="/static/components/tarbar/pictures/home_picked_up.png"
           @click="pick_up_home">
    </image>
    <!-- Community 图标 -->
    <image class="community"
           src="/static/components/tarbar/pictures/community.png"
           @click="pick_up_community"
           :style="{ opacity: is_community_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>

</template>

<script>
export default {
  data() {
    return {
      is_community_picked_up: false,
      is_assistant_picked_up: false,
      is_user_picked_up: false
    };
  },
  props: {
    extend_class: { // 接收外部传入的 class
      type: String,
      default: ''
    }
  },
  methods: {

    pick_up_home() {
      this.resetPicks();
      this.is_home_picked_up = true;
    },
    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: fixed;
  width: 95%; /* 宽度占95% */
  height: 10%; /* 高度 */
  bottom: 0%; /* 距离底部2% */
  left: 2.5%; /* 左侧2.5% */
  background-color: khaki; /* 初始颜色 */
  border-radius: 37px; /* 圆角半径，可以根据需要调整 */
  z-index: 100; /* 使背景框在其他元素后面 */
  animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
}

.home, .community, .assistant, .user {
  position: fixed;
  width: 15%;
  height: 6%;
  bottom: 1%;
  z-index: 101;
  transition: opacity 1s ease; /* 添加渐变过渡 */
}
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
  position:fixed;
  width: 17%;
  height: 10%;
  bottom: 0.8%;
  z-index: 101;
  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>