<template>
|
<div
|
style="position: fixed; bottom: 0; width: 100%"
|
:class="`footer ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"
|
>
|
<mt-tabbar v-model="select">
|
<mt-tab-item
|
id="home"
|
:class="$store.state.select == '/home' ? 'on' : ''"
|
>
|
<!-- <i v-if="$store.state.select == '/home'" class="iconfont icon-zhuiocn02"></i>
|
<i v-else class="iconfont icon-zhuiocn"></i> -->
|
<img
|
class="foot-icon"
|
v-if="$store.state.select == '/home'"
|
:src="
|
require(`../../../static/img/foot/${$state.theme}/home-active.png`)
|
"
|
alt=""
|
/>
|
<img
|
class="foot-icon"
|
v-else
|
:src="require(`../../../static/img/foot/${$state.theme}/home.png`)"
|
alt=""
|
/>
|
<p
|
v-if="$store.state.select == '/home'"
|
:style="{ color: $state.theme === 'black' ? '#138DB3' : '#C11815' }"
|
>
|
首页
|
</p>
|
<p
|
v-else
|
:style="{ color: $state.theme === 'black' ? '#FFFFFF' : '#656565' }"
|
>
|
首页
|
</p>
|
</mt-tab-item>
|
<mt-tab-item
|
id="list"
|
:class="
|
$store.state.select == '/list' || $store.state.select == '/indexlist'
|
? 'on'
|
: ''
|
"
|
>
|
<!-- <i v-if="$store.state.select == '/list'" class="iconfont icon-hangqing"></i>
|
<i v-else class="iconfont icon-hangqing-copy"></i> -->
|
<img
|
class="foot-icon"
|
v-if="$store.state.select == '/list'"
|
:src="
|
require(`../../../static/img/foot/${$state.theme}/hangqing-active.png`)
|
"
|
alt=""
|
/>
|
<img
|
class="foot-icon"
|
v-else
|
:src="
|
require(`../../../static/img/foot/${$state.theme}/hangqing.png`)
|
"
|
alt=""
|
/>
|
<p
|
v-if="$store.state.select == '/list'"
|
:style="{ color: $state.theme === 'black' ? '#138DB3' : '#C11815' }"
|
>
|
行情
|
</p>
|
<p
|
v-else
|
:style="{ color: $state.theme === 'black' ? '#FFFFFF' : '#656565' }"
|
>
|
行情
|
</p>
|
</mt-tab-item>
|
<mt-tab-item
|
id="orderlist"
|
:class="$store.state.select == '/orderlist' ? 'on' : ''"
|
>
|
<!-- <i v-if="$store.state.select == '/orderlist'" class="iconfont icon-hangqing2"></i>
|
<i v-else class="iconfont icon-hangqing-unselectedx"></i> -->
|
<img
|
class="foot-icon"
|
v-if="$store.state.select == '/orderlist'"
|
:src="
|
require(`../../../static/img/foot/${$state.theme}/chicang-active.png`)
|
"
|
alt=""
|
/>
|
<img
|
class="foot-icon"
|
v-else
|
:src="require(`../../../static/img/foot/${$state.theme}/chicang.png`)"
|
alt=""
|
/>
|
<p
|
v-if="$store.state.select == '/orderlist'"
|
:style="{ color: $state.theme === 'black' ? '#138DB3' : '#C11815' }"
|
>
|
持仓
|
</p>
|
<p
|
v-else
|
:style="{ color: $state.theme === 'black' ? '#FFFFFF' : '#656565' }"
|
>
|
持仓
|
</p>
|
</mt-tab-item>
|
<mt-tab-item
|
id="mylist"
|
:class="$store.state.select == '/mylist' ? 'on' : ''"
|
>
|
<!-- <i v-if="$store.state.select == '/mylist'" class="iconfont icon-xuanze3" style="font-size: 0.40rem; padding-top: 0.04rem;"></i>
|
<i v-else class="iconfont icon-xuanze" style="font-size: 0.40rem; padding-top: 0.04rem;"></i> -->
|
<img
|
class="foot-icon"
|
v-if="$store.state.select == '/mylist'"
|
:src="
|
require(`../../../static/img/foot/${$state.theme}/zixuan-active.png`)
|
"
|
alt=""
|
/>
|
<img
|
class="foot-icon"
|
v-else
|
:src="require(`../../../static/img/foot/${$state.theme}/zixuan.png`)"
|
alt=""
|
/>
|
<p
|
v-if="$store.state.select == '/mylist'"
|
:style="{ color: $state.theme === 'black' ? '#138DB3' : '#C11815' }"
|
>
|
自选
|
</p>
|
<p
|
v-else
|
:style="{ color: $state.theme === 'black' ? '#FFFFFF' : '#656565' }"
|
>
|
自选
|
</p>
|
</mt-tab-item>
|
<mt-tab-item
|
id="user"
|
:class="$store.state.select == '/user' ? 'on' : ''"
|
>
|
<!-- <i v-if="$store.state.select == '/user'" class="iconfont icon-peoplefill"></i>
|
<i v-else class="iconfont icon-my"></i> -->
|
<img
|
class="foot-icon"
|
v-if="$store.state.select == '/user'"
|
:src="
|
require(`../../../static/img/foot/${$state.theme}/user-active.png`)
|
"
|
alt=""
|
/>
|
<img
|
class="foot-icon"
|
v-else
|
:src="require(`../../../static/img/foot/${$state.theme}/user.png`)"
|
alt=""
|
/>
|
<p
|
v-if="$store.state.select == '/user'"
|
:style="{ color: $state.theme === 'black' ? '#138DB3' : '#C11815' }"
|
>
|
我的
|
</p>
|
<p
|
v-else
|
:style="{ color: $state.theme === 'black' ? '#FFFFFF' : '#656565' }"
|
>
|
我的
|
</p>
|
</mt-tab-item>
|
</mt-tabbar>
|
</div>
|
</template>
|
<script>
|
import eventBus from "@/event.js";
|
export default {
|
data() {
|
return {
|
select: "",
|
theme: "black",
|
};
|
},
|
mounted: function () {
|
this.select = this.$store.state.select;
|
},
|
watch: {
|
select: {
|
handler: function (newval, oldval) {
|
// console.log("======"+this.$store.state.select)
|
console.log(newval);
|
let tabList = ["home", "list", "orderlist", "mylist", "user"];
|
if (tabList.includes(newval)) {
|
this.$store.state.select = newval;
|
this.select = newval;
|
this.$router.push(newval);
|
}
|
},
|
},
|
},
|
};
|
</script>
|
<style lang="css" scoped>
|
.black-theme {
|
background-color: #040506;
|
}
|
.red-theme {
|
background-color: #ffffff;
|
}
|
.foot-icon {
|
width: 0.4rem;
|
margin-top: 0.1rem;
|
margin-bottom: 0.02rem;
|
}
|
/* .mint-tabbar > .mint-tab-item,
|
.mint-tabbar > .mint-tab-item.is-selected {
|
color: #ff9600;
|
} */
|
.mint-tabbar {
|
/* background: #ffffff; */
|
height: 0.97rem;
|
}
|
|
.footer .mint-tabbar {
|
/* background: #13161b; */
|
background: none;
|
box-shadow: 0px 0px 10px #c7c7c7;
|
box-shadow: 0px 0px 4px rgba(6, 0, 1, 0.2);
|
}
|
|
.mint-tab-item-label .iconfont {
|
display: block;
|
font-size: 0.5rem;
|
margin-top: 0.05rem;
|
height: 0.5rem;
|
}
|
|
.mint-tab-item-label .icon-recharge,
|
.mint-tab-item-label .icon-rechargefill {
|
font-size: 0.46rem;
|
}
|
|
.mint-tab-item-label .icon-xuanze,
|
.mint-tab-item-label .icon-xuanze2 {
|
font-size: 0.38rem;
|
padding-top: 0.02rem;
|
}
|
|
.mint-tab-item-label .icon-chicang {
|
font-size: 0.36rem;
|
margin-top: 0.1rem;
|
}
|
.red-theme .mint-tabbar {
|
background-color: #ffffff !important;
|
}
|
.black-theme .mint-tabbar {
|
background-color: #040506 !important;
|
}
|
</style>
|
