1

jhzh

2026-02-27 5dfb843c29fdcc1693961b70a36ddee3fea85a4a

 src/components/foot.vue

@@ -1,6 +1,9 @@
<template>
  <div class="footCss">
    <div :class="touch == 1 ? 'footDemos' : 'footDemo'" @click="goRouter('/home', 1)">
    <div
      :class="touch == 1 ? 'footDemos' : 'footDemo'"
      @click="goRouter('/home', 1)"
    >
      <!-- <div class="homeImgOut" v-show="$store.state.select == '/home'">
        <div class="homeImg">
          <img src="~@/assets/foot/ic_home_tab_def.png" />
@@ -10,83 +13,125 @@
        <img src="~@/assets/foot/tab_main_home_default.png" />
      </div>
      <div v-show="$store.state.select != '/home'">{{ $t('hj224') }}</div> -->
       <div class="footImgDeft">
      <div class="footImgDeft">
        <img
          v-show="$store.state.select == '/home'"
          src="@/assets/foot/home-active.png"
        />
        <img
          v-show="$store.state.select != '/home'"
          src="@/assets/foot/home.png"
        />
      </div>
      <div :class="$store.state.select == '/home' ? 'blueFont' : ''">
        {{ $t("hj224") }}
      </div>
    </div>
    <div
      :class="touch == 2 ? 'footDemos' : 'footDemo'"
      @click="goRouter('/trading-list', 2)"
    >
      <div class="footImgDeft">
        <img
          v-show="$store.state.select == '/trading-list'"
          src="@/assets/foot/hangqing-active.png"
        />
        <img
          v-show="$store.state.select != '/trading-list'"
          src="@/assets/foot/hangqing.png"
        />
      </div>
      <div :class="$store.state.select == '/trading-list' ? 'blueFont' : ''">
        {{ $t("hj225") }}
      </div>
    </div>

        <img v-show="$store.state.select == '/home'" src="~@/assets/foot/ic_home_tab_def.png" />
        <img v-show="$store.state.select != '/home'" src="~@/assets/foot/tab_main_home_default.png" />
      </div>
      <div :class="$store.state.select == '/home' ? 'blueFont' : ''">{{ $t('hj224') }}</div>
    </div>
    <div :class="touch == 2 ? 'footDemos' : 'footDemo'" @click="goRouter('/trading-list', 2)">
    <div
      :class="touch == 4 ? 'footDemos' : 'footDemo'"
      @click="goRouter('/warehouse', 4)"
    >
      <div class="footImgDeft">
        <img
          v-show="$store.state.select == '/warehouse'"
          src="@/assets/foot/chicang-active.png"
        />
        <img
          v-show="$store.state.select != '/warehouse'"
          src="@/assets/foot/chicang.png"
        />
      </div>
      <div :class="$store.state.select == '/warehouse' ? 'blueFont' : ''">
        {{ $t("hj226") }}
      </div>
    </div>
    <div
      :class="touch == 3 ? 'footDemos' : 'footDemo'"
      @click="goRouter('/guide', 3)"
    >
      <div class="footImgDeft">
        <img
          v-show="$store.state.select == '/guide'"
          src="@/assets/foot/yindao_active.png"
        />
        <img
          v-show="$store.state.select != '/guide'"
          src="@/assets/foot/yindao.png"
        />
      </div>
      <div :class="$store.state.select == '/guide' ? 'blueFont' : ''">
        {{ $t("引导") }}
      </div>
    </div>

        <img v-show="$store.state.select == '/trading-list'" src="~@/assets/foot/trade_selected.png" />
        <img v-show="$store.state.select != '/trading-list'" src="~@/assets/foot/tab_main_trade_default.png" />
      </div>
      <div :class="$store.state.select == '/trading-list' ? 'blueFont' : ''">{{ $t('hj225') }}</div>
    </div>
    <div :class="touch == 3 ? 'footDemos' : 'footDemo'" @click="goRouter('/favorites', 3)">
    <div
      :class="touch == 5 ? 'footDemos' : 'footDemo'"
      @click="goRouter('/user', 5)"
    >
      <div class="footImgDeft">

        <img v-show="$store.state.select == '/favorites'" src="~@/assets/foot/ic_favorites_take.png" />
        <img v-show="$store.state.select != '/favorites'" src="~@/assets/foot/ic_favorites_default.png" />
        <img
          v-show="$store.state.select == '/user'"
          src="@/assets/foot/user-active.png"
        />
        <img
          v-show="$store.state.select != '/user'"
          src="@/assets/foot/user.png"
        />
      </div>
      <div :class="$store.state.select == '/favorites' ? 'blueFont' : ''">{{ $t('hj282') }}</div>
    </div>
    <div :class="touch == 4 ? 'footDemos' : 'footDemo'" @click="goRouter('/warehouse', 3)">
      <div class="footImgDeft">
        <img v-show="$store.state.select == '/warehouse'" src="~@/assets/foot/positions_selected.png" />
        <img v-show="$store.state.select != '/warehouse'" src="~@/assets/foot/tab_main_positions_default.png" />
      <div :class="$store.state.select == '/user' ? 'blueFont' : ''">
        {{ $t("hj227") }}
      </div>
      <div :class="$store.state.select == '/warehouse' ? 'blueFont' : ''">{{ $t('hj226') }}</div>
    </div>
    <div :class="touch == 5 ? 'footDemos' : 'footDemo'" @click="goRouter('/user', 4)">
      <div class="footImgDeft">
        <img v-show="$store.state.select == '/user'" src="~@/assets/foot/mine_selected.png" />
        <img v-show="$store.state.select != '/user'" src="~@/assets/foot/tab_main_mine_default.png" />
      </div>
      <div :class="$store.state.select == '/user' ? 'blueFont' : ''">{{ $t('hj227') }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
  data() {
    return {
      touch: 0
    }
    };
  },
  mounted () {

  },
  mounted() {},
  methods: {
    goRouter (url, index) {
      if (index === 2||index === 3 || index === 4 || index === 5) {
        if (window.localStorage.getItem('USERTOKEN') === '' || window.localStorage.getItem('USERTOKEN') == null || window.localStorage.getItem('USERTOKEN') == undefined) {
          this.$emit('close')
          return
        }
      }
      this.touch = index
    goRouter(url, index) {
      this.touch = index;
      setTimeout(() => {
        this.touch = 0
      }, 500)
      this.$router.push(url)
        this.touch = 0;
      }, 500);
      this.$router.push(url);
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55])
        navigator.vibrate([55]);
      }
    }
  }

}
};
</script>

<style>
.footCss {
  border-top: 0.01rem solid rgba(192, 192, 192, 0.1);

  z-index: 199;
  position: fixed;
  bottom: 0;
  width: 100%;
@@ -96,28 +141,31 @@
}

.footDemo {
  width: 0.8rem;
  width: 1.8rem;
  /* width: 0.8rem; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.24rem;
  font-size: 16px;
  color: rgb(104, 114, 132);
}

.footDemos {
  width: 0.8rem;
  /* width: 0.8rem; */
  width: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.24rem;
  /* font-size: 0.24rem; */
}

.footDemos::before {
  content: '';
  width: 0.9rem;
  content: "";
  width: 0.8rem;
  height: 0.9rem;
  border-radius: 100%;
  position: absolute;
@@ -145,7 +193,6 @@

  75% {
    background-color: rgba(25, 122, 246, 0.1);

  }

  100% {
@@ -157,7 +204,7 @@
  width: 0.56rem;
  height: 0.56rem;
  margin-bottom: 0.08rem;

  /* font-size: 20px; */
}

.footImgDeft img {
@@ -183,6 +230,6 @@
}

.blueFont {
  color: rgb(25, 122, 246);
  color: #185546;
}
</style>