uniapp自定义tabbar

<view class="footer">
      <view class="list" @click="tar(1,'/pages/home/home')">
        <image
          :src="page == 1 ?url+'/uploads/20231103/590a63312af28aded880a609c1b0f316.png':url+'/uploads/20231103/58b703f125cb0cdcd4ea87665fe6c5db.png'"
          mode=""></image>
        <p :class="page == 1 ? 'page' :'pages'">首页</p>
      </view>
      <view class="list" @click="tar(2,'/intro/intro')">
        <image
          :src="page == 2 ?url+'/uploads/20231103/e50897e71cd469f4833b7669007265ec.png':url+'/uploads/20231103/7f70268dc88242e4e3ae574d84a3cb6e.png'"
          mode=""></image>
        <p :class="page == 2 ? 'page' :'pages'">攻略</p>
      </view>
      <view class="lists">
        <view class="arount">
          <view class="rount">
            <image :class="status == true ? 'rockets' : 'rocket' " @click="rocket"
              :src="url+'/uploads/20231103/e774ff4e386bf2f88b4d2ac96c963250.png'" mode=""></image>
          </view>
          <p>发布</p>
        </view>
      </view>
      <view class="list" @click="tar(3,'/charts/charts')">
        <image
          :src="page == 3 ?url+'/uploads/20231103/06b506537b3d6e23441278555f51a4c9.png':url+'/uploads/20231103/8fc440c437908095de05c1b069f2b264.png'"
          mode=""></image>
        <p :class="page == 3 ? 'page' :'pages'">排行榜</p>
      </view>
      <view class="list" @click="tar(4,'/charts/charts')">
        <image
          :src="page == 4 ?url+'/uploads/20231103/852882a6a3dc026029085419860a6e59.png':url+'/uploads/20231103/2fd39d16812070f766c13e07422d7720.png'"
          mode=""></image>
        <p :class="page == 4 ? 'page' :'pages'">我的</p>
      </view>
    </view>

export default {
    data() {
      return {
        page: getApp().globalData.page,
      }
    }
  }

/* 底部导航栏 */
  .footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    height: 100rpx;
    position: fixed;
    bottom: 0px;
    align-items: center;
  }
  .list {
    width: 23%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }
  .pages {
    width: 100%;
    text-align: center;
    font-size: 10px;
  }
  .page {
    width: 100%;
    text-align: center;
    color: red;
    font-size: 10px;
  }
  .list image {
    width: 40rpx;
    height: 40rpx;
  }
  .rount {
    width: 120rpx;
    height: 120rpx;
    border-radius: 100px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 2px 1px #f9f9f9, -1px -1px 2px 1px #f9f9f9;
  }
  .rocket {
    width: 80%;
    height: 6vh;
    margin-bottom: 10rpx;
    transition: all 1s;
  }
  .rockets {
    width: 80%;
    height: 6vh;
    margin-bottom: 200vh;
    transition: all 1s;
  }
  .arount {
    margin-bottom: 90rpx;
    text-align: center;
  }
  .arount p {
    margin-top: 10rpx;
  }