1

jhzh

2025-04-04 9b2bee1321e99dfce7fe8442f750b1300391e841

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
  <van-tabbar style="background: #F5F5F5" 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 } }">
      <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="userCenter" to="/userCenter">
      <span>{{ $t('个人中心') }}</span>
      <template #icon="props">
        <img :src="props.active ? user.active : user.inactive" alt="userCenter"/>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
 
<script>
import {mapGetters} from 'vuex';
import {getStorage} from '@/utils/utis'
 
export default {
  props: {
    isActive: {
      type: Boolean,
      default: true
    },
  },
  components: {},
  computed: {
    ...mapGetters({
      theme: 'home/theme'
    }),
  },
  data() {
    return {
      getStorage,
      active: 'home',
      home: {},
      qoutes: {},
      trade: {},
      contract: {},
      funds: {},
      user: {}
    }
  },
  mounted() {
    this.home = {
      active: require(`../../assets/theme/${this.theme}/image/footer/img_1.png`),
      inactive: require(`../../assets/theme/${this.theme}/image/footer/img.png`),
    }
    this.qoutes = {
      active: require(`../../assets/theme/${this.theme}/image/footer/img_2.png`),
      inactive: require(`../../assets/theme/${this.theme}/image/footer/img_3.png`),
    }
    this.trade = {
      active: require(`../../assets/theme/${this.theme}/image/footer/img_4.png`),
      inactive: require(`../../assets/theme/${this.theme}/image/footer/img_5.png`),
    }
    this.contract = {
      active: require(`../../assets/theme/${this.theme}/image/footer/img_6.png`),
      inactive: require(`../../assets/theme/${this.theme}/image/footer/img_7.png`),
    }
    this.funds = {
      active: require(`../../assets/theme/${this.theme}/image/footer/img_8.png`),
      inactive: require(`../../assets/theme/${this.theme}/image/footer/img_9.png`),
    }
    this.user = {
      active: require(`../../assets/theme/${this.theme}/image/footer/img_11.png`),
      inactive: require(`../../assets/theme/${this.theme}/image/footer/img_10.png`),
    }
  },
}
</script>
 
<style lang="scss" scoped>
@import "../../assets/init.scss";
 
.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
 
.van-tabbar {
  height: 108px;
  font-size: 22px;
}
 
.van-tabbar-item__icon img {
  height: 50px;
  width: 50px;
}
 
::v-deep .van-tabbar-item__icon {
  margin-bottom: 9px;
}
 
::v-deep .van-tabbar-item__text {
  text-align: center;
  font-size: 23px;
}
 
.bgFooter {
  ::v-deep .van-tabbar-item--active {
    @include themify() {
      background: themed("footer_background");
    }
  }
 
  ::v-deep .van-tabbar-item--active {
    @include themify() {
      color: rgb(196, 149, 2) !important;
    }
  }
}
 
.bg-night {
  ::v-deep .van-tabbar-item--active {
    background: $night;
  }
}
</style>