From d37ceed2ad5b94bbfc71a8a4cbdb7b498ddf724d Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Sat, 19 Jul 2025 14:14:18 +0800
Subject: [PATCH] 1
---
src/components/foot.vue | 146 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 102 insertions(+), 44 deletions(-)
diff --git a/src/components/foot.vue b/src/components/foot.vue
index ca0b10a..5cff97b 100644
--- a/src/components/foot.vue
+++ b/src/components/foot.vue
@@ -1,7 +1,10 @@
<template>
<div class="footCss">
- <div :class="touch == 1 ? 'footDemos' : 'footDemo'" @click="goRouter('/home', 1)">
- <div class="homeImgOut" v-show="$store.state.select == '/home'">
+ <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" />
</div>
@@ -9,29 +12,92 @@
<div v-show="$store.state.select != '/home'" class="footImgDeft">
<img src="~@/assets/foot/tab_main_home_default.png" />
</div>
- <div v-show="$store.state.select != '/home'">{{ $t('hj224') }}</div>
- </div>
- <div :class="touch == 2 ? 'footDemos' : 'footDemo'" @click="goRouter('/trading-list', 2)">
+ <div v-show="$store.state.select != '/home'">{{ $t('hj224') }}</div> -->
<div class="footImgDeft">
-
- <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" />
+ <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 == '/trading-list' ? 'blueFont' : ''">{{ $t('hj225') }}</div>
+ <div :class="$store.state.select == '/home' ? 'blueFont' : ''">
+ {{ $t("hj224") }}
+ </div>
</div>
- <div :class="touch == 3 ? 'footDemos' : 'footDemo'" @click="goRouter('/warehouse', 3)">
+ <div
+ :class="touch == 2 ? 'footDemos' : 'footDemo'"
+ @click="goRouter('/trading-list', 2)"
+ >
<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" />
+ <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 == '/warehouse' ? 'blueFont' : ''">{{ $t('hj226') }}</div>
+ <div :class="$store.state.select == '/trading-list' ? 'blueFont' : ''">
+ {{ $t("hj225") }}
+ </div>
</div>
- <div :class="touch == 4 ? 'footDemos' : 'footDemo'" @click="goRouter('/user', 4)">
+ <!-- <div
+ :class="touch == 3 ? 'footDemos' : 'footDemo'"
+ @click="goRouter('/favorites', 3)"
+ >
<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" />
+ <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"
+ />
</div>
- <div :class="$store.state.select == '/user' ? 'blueFont' : ''">{{ $t('hj227') }}</div>
+ <div :class="$store.state.select == '/favorites' ? 'blueFont' : ''">
+ {{ $t("hj282") }}
+ </div>
+ </div> -->
+ <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 == 5 ? 'footDemos' : 'footDemo'"
+ @click="goRouter('/user', 5)"
+ >
+ <div class="footImgDeft">
+ <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 == '/user' ? 'blueFont' : ''">
+ {{ $t("hj227") }}
+ </div>
</div>
</div>
</template>
@@ -40,39 +106,30 @@
export default {
data() {
return {
- touch: 0,
- }
+ touch: 0
+ };
},
- mounted() {
-
- },
+ mounted() {},
methods: {
goRouter(url, index) {
- if (index == 3 || index == 4) {
- if (window.localStorage.getItem('USERTOKEN') == "" || window.localStorage.getItem('USERTOKEN') == null || window.localStorage.getItem('USERTOKEN') == undefined) {
- this.$emit('close')
- return;
- }
- }
- this.touch = 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]);
}
}
- },
-
-}
+ }
+};
</script>
<style>
.footCss {
border-top: 0.01rem solid rgba(192, 192, 192, 0.1);
-
+ z-index: 199;
position: fixed;
bottom: 0;
width: 100%;
@@ -82,13 +139,15 @@
}
.footDemo {
+ /* 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 {
@@ -98,12 +157,12 @@
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;
@@ -131,7 +190,6 @@
75% {
background-color: rgba(25, 122, 246, 0.1);
-
}
100% {
@@ -143,7 +201,7 @@
width: 0.56rem;
height: 0.56rem;
margin-bottom: 0.08rem;
-
+ /* font-size: 20px; */
}
.footImgDeft img {
@@ -155,7 +213,7 @@
width: 0.9rem;
height: 0.9rem;
border-radius: 100%;
- background-color: rgb(25, 122, 246);
+ /* background-color: rgb(25, 122, 246); */
}
.homeImg {
@@ -169,6 +227,6 @@
}
.blueFont {
- color: rgb(25, 122, 246);
+ color: #185546;
}
</style>
--
Gitblit v1.9.3