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 | 314 +++++++++++++++++++++++++++++++--------------------
1 files changed, 189 insertions(+), 125 deletions(-)
diff --git a/src/components/foot.vue b/src/components/foot.vue
index bf7a6dd..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,160 +12,221 @@
<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'">首页</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':''">交易</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':''">仓位</div>
+ <div :class="$store.state.select == '/trading-list' ? 'blueFont' : ''">
+ {{ $t("hj225") }}
+ </div>
</div>
- <div :class="touch==4?'footDemos':'footDemo'" @click="goRouter('/newUser',4)">
+ <!-- <div
+ :class="touch == 3 ? 'footDemos' : 'footDemo'"
+ @click="goRouter('/favorites', 3)"
+ >
<div class="footImgDeft">
- <img v-show="$store.state.select == '/newUser'" src="~@/assets/foot/mine_selected.png" />
- <img v-show="$store.state.select != '/newUser'" 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 == '/newUser'?'blueFont':''">我的</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>
<script>
- export default {
- data() {
- return {
- touch: 0,
+export default {
+ data() {
+ return {
+ touch: 0
+ };
+ },
+ mounted() {},
+ methods: {
+ goRouter(url, index) {
+ this.touch = index;
+ setTimeout(() => {
+ this.touch = 0;
+ }, 500);
+ this.$router.push(url);
+ if (navigator.vibrate) {
+ // 支持
+ navigator.vibrate([55]);
}
- },
- mounted() {
-
- },
- methods: {
- goRouter(url, index) {
- this.touch = index
- setTimeout(() => {
- 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);
-
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 1.3rem;
- display: flex;
- justify-content: space-around;
+.footCss {
+ border-top: 0.01rem solid rgba(192, 192, 192, 0.1);
+ z-index: 199;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 1.3rem;
+ display: flex;
+ justify-content: space-around;
+}
+
+.footDemo {
+ /* width: 1.8rem; */
+ width: 0.8rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ font-size: 16px;
+ color: rgb(104, 114, 132);
+}
+
+.footDemos {
+ width: 0.8rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ /* font-size: 0.24rem; */
+}
+
+.footDemos::before {
+ content: "";
+ width: 0.8rem;
+ height: 0.9rem;
+ border-radius: 100%;
+ position: absolute;
+ background-color: rgba(25, 122, 246, 0.14);
+ -webkit-animation: footBlueBg 0.5s linear infinite;
+ animation: footBlueBg 0.5s linear infinite;
+ transition: all 0.5s;
+}
+
+@-webkit-keyframes footBlueBg {
+ 0% {
+ -webkit-transform: scale(1.6);
+ transform: scale(1.6);
}
- .footDemo {
- width: 0.8rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- font-size: 0.24rem;
+ 25% {
+ -webkit-transform: scale(1.3);
+ transform: scale(1.3);
}
- .footDemos {
- width: 0.8rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- font-size: 0.24rem;
+ 50% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
}
- .footDemos::before {
- content: '';
- width: 0.9rem;
- height: 0.9rem;
- border-radius: 100%;
- position: absolute;
- background-color: rgba(25, 122, 246, 0.14);
- -webkit-animation: footBlueBg 0.5s linear infinite;
- animation: footBlueBg 0.5s linear infinite;
- transition: all 0.5s;
+ 75% {
+ background-color: rgba(25, 122, 246, 0.1);
}
- @-webkit-keyframes footBlueBg {
- 0% {
- -webkit-transform: scale(1.6);
- transform: scale(1.6);
- }
-
- 25% {
- -webkit-transform: scale(1.3);
- transform: scale(1.3);
- }
-
- 50% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
-
- 75% {
- background-color: rgba(25, 122, 246, 0.1);
-
- }
-
- 100% {
- background-color: rgba(25, 122, 246, 0);
- }
+ 100% {
+ background-color: rgba(25, 122, 246, 0);
}
+}
- .footImgDeft {
- width: 0.56rem;
- height: 0.56rem;
- margin-bottom: 0.08rem;
+.footImgDeft {
+ width: 0.56rem;
+ height: 0.56rem;
+ margin-bottom: 0.08rem;
+ /* font-size: 20px; */
+}
- }
+.footImgDeft img {
+ width: 100%;
+ height: 100%;
+}
- .footImgDeft img {
- width: 100%;
- height: 100%;
- }
+.homeImgOut {
+ width: 0.9rem;
+ height: 0.9rem;
+ border-radius: 100%;
+ /* background-color: rgb(25, 122, 246); */
+}
- .homeImgOut {
- width: 0.9rem;
- height: 0.9rem;
- border-radius: 100%;
- background-color: rgb(25, 122, 246);
- }
+.homeImg {
+ width: 0.9rem;
+ height: 0.9rem;
+}
- .homeImg {
- width: 0.9rem;
- height: 0.9rem;
- }
+.homeImg img {
+ width: 100%;
+ height: 100%;
+}
- .homeImg img {
- width: 100%;
- height: 100%;
- }
-
- .blueFont {
- color: rgb(25, 122, 246);
- }
+.blueFont {
+ color: #185546;
+}
</style>
--
Gitblit v1.9.3