shoot-miniprograms/src/components/AppFooter.vue

<script setup>
const tabs = [
  { image: "../static/tab-vip.png" },
  { image: "../static/tab-point-book.png" },
  { image: "../static/tab-mall.png" },
];

function handleTabClick(index) {
  if (index === 0) {
    uni.navigateTo({
      url: "/pages/be-vip",
    });
  }
  if (index === 1) {
    uni.navigateTo({
      url: "/pages/point-book",
    });
  }
  if (index === 2) {
    uni.navigateTo({
      url: "/pages/device-intro",
    });
  }
}
</script>

<template>
  <view class="footer">
    <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
    <view
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-item"
      @click="handleTabClick(index)"
      :style="{
        width: index === 1 ? '36%' : '20%',
      }"
    >
      <image :src="tab.image" mode="widthFix" />
    </view>
  </view>
</template>

<style scoped>
.footer {
  height: 120px;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.footer-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}
.tab-item {
  z-index: 1;
  display: flex;
  justify-content: center;
}
.tab-item > image {
  width: 65rpx;
}
.tab-item:last-child > image {
  width: 85rpx;
}
.tab-item:nth-child(2) {
  transform: translate(10%, 40%);
}
.tab-item:nth-child(3) {
  margin-bottom: 25rpx;
}
.tab-item:nth-child(3) > image {
  width: 140rpx;
}
.tab-item:nth-child(4) {
  transform: translate(-10%, 44%);
}
</style>