1

zzzz

2024-03-21 50298673b5146454bf81e642ebadb9697400d13a

 src/components/footer/index.vue

@@ -1,80 +1,88 @@
<template>
  <van-tabbar
    route
    v-model="active"
    active-color="#1D91FF"
    fixed
    inactive-color="#868D9A"
    safe-area-inset-bottom
    class="bgFooter"
  >
    <van-tabbar-item name="home" to="/home">
      <span>{{ $t("首页") }}</span>
      <template #icon="props">
        <img :src="props.active ? home.active : home.inactive" alt="home" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="quotes"
      :to="{ name: 'Quotes', query: { active: 2 } }"
  <div class="tabbar-footer">
    <van-tabbar
      route
      v-model="active"
      active-color="#1D91FF"
      fixed
      inactive-color="#868D9A"
      safe-area-inset-bottom
      class="bgFooter"
    >
      <span>{{ $t("市场") }}</span>
      <template #icon="props">
        <img
          :src="props.active ? qoutes.active : qoutes.inactive"
          alt="Quotes"
        />
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="/trade/btc"
      :to="{
        name: 'Trade',
        params: { symbol: getStorage('tradeSymbol') || 'btc' },
      }"
    >
      <span>{{ $t("交易") }}</span>
      <template #icon="props">
        <img :src="props.active ? trade.active : trade.inactive" alt="trade" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="perpetualContract/btc"
      :to="{
        name: 'perpetualContract',
        params: { symbol: getStorage('symbol') || 'btc' },
      }"
    >
      <span>{{ $t("合约") }}</span>
      <template #icon="props">
        <img
          :src="props.active ? contract.active : contract.inactive"
          alt="perpetualContract"
        />
      </template>
    </van-tabbar-item>
    <van-tabbar-item
      name="perpetualContract/btc"
      :to="{
        name: 'perpetualContract',
        params: { symbol: getStorage('symbol') || 'btc' },
      }"
    >
      <span>{{ $t("基金") }}</span>
      <template #icon="props">
        <img
          :src="props.active ? contract.active : contract.inactive"
          alt="perpetualContract"
        />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="funds" to="/funds">
      <span>{{ $t("资金") }}</span>
      <template #icon="props">
        <img :src="props.active ? funds.active : funds.inactive" alt="funds" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
      <div class="bgc"></div>
      <van-tabbar-item name="home" to="/home">
        <span>{{ $t("首页") }}</span>
        <template #icon="props">
          <img :src="props.active ? home.active : home.inactive" alt="home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        name="quotes"
        :to="{ name: 'Quotes', query: { active: 2 } }"
      >
        <span>{{ $t("市场") }}</span>
        <template #icon="props">
          <img
            :src="props.active ? qoutes.active : qoutes.inactive"
            alt="Quotes"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        name="/trade/btc"
        :to="{
          name: 'Trade',
          params: { symbol: getStorage('tradeSymbol') || 'btc' },
        }"
      >
        <span>{{ $t("交易") }}</span>
        <template #icon="props">
          <img
            :src="props.active ? trade.active : trade.inactive"
            alt="trade"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        name="perpetualContract/btc"
        :to="{
          name: 'perpetualContract',
          params: { symbol: getStorage('symbol') || 'btc' },
        }"
      >
        <span>{{ $t("合约") }}</span>
        <template #icon="props">
          <img
            :src="props.active ? contract.active : contract.inactive"
            alt="perpetualContract"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="funds" to="/funds">
        <span>{{ $t("资金") }}</span>
        <template #icon="props">
          <img
            :src="props.active ? funds.active : funds.inactive"
            alt="funds"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        name="profile"
        :to="{
          name: 'profile',
        }"
      >
        <span>{{ $t("Profile") }}</span>
        <template #icon="props">
          <img
            :src="props.active ? contract.active : contract.inactive"
            alt="perpetualContract"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
@@ -157,22 +165,47 @@
}

.bgFooter {
  ::v-deep .van-tabbar-item--active {
    @include themify() {
      background: themed("footer_background");
    }
  }
  // ::v-deep .van-tabbar-item--active {
  //   @include themify() {
  //     background: themed("footer_background");
  //   }
  // }

  ::v-deep .van-tabbar-item--active {
    @include themify() {
      color: themed("color_main") !important;
    }
  }
  // ::v-deep .van-tabbar-item--active {
  //   @include themify() {
  //     color: themed("color_main") !important;
  //   }
  // }
}

.bg-night {
  ::v-deep .van-tabbar-item--active {
    background: $night;
// .bg-night {
//   ::v-deep .van-tabbar-item--active {
//     background: $night;
//   }
// }

.tabbar-footer {
  position: relative;
  .bgc {
    position: absolute;
    left: 0;
    top: 6px;
    background-color: #f5f5f8;
    width: calc(100% - 60px);
    height: 60px;
    border-radius: 30px;
    margin: 0 30px;
  }
}
::v-deep .van-tabbar-item__text {
  position: relative;
  z-index: 99;
  // color: #d2d2dc;
}
::v-deep .van-tabbar-item {
  color: #d2d2dc !important;
}
::v-deep .van-tabbar-item--active {
  color: #9691fa !important;
}
</style>