From 5dfb843c29fdcc1693961b70a36ddee3fea85a4a Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 27 Feb 2026 16:33:11 +0800
Subject: [PATCH] 1
---
src/components/foot.vue | 167 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 107 insertions(+), 60 deletions(-)
diff --git a/src/components/foot.vue b/src/components/foot.vue
index f98260f..0008603 100644
--- a/src/components/foot.vue
+++ b/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>
--
Gitblit v1.9.3