You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
7.6 KiB
235 lines
7.6 KiB
<template>
|
|
<!-- #ifdef H5 -->
|
|
<view class="static-footer-bar" :style="{ 'padding-bottom': safeAreaInsets.bottom + 'px' }">
|
|
<view class="static-footer-li" @click="tabChange(1)">
|
|
<image src="../static/footBar-image/home.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
|
|
<image src="../static/footBar-image/home-selected.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
|
|
<view :class="type == 'home' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
首页</view>
|
|
</view>
|
|
<view class="static-footer-li" @click="tabChange(2)">
|
|
<image src="../static/footBar-image/marketSituation.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
|
|
</image>
|
|
<image src="../static/footBar-image/marketSituation-selected.png" class="static-footer-li-icon"
|
|
v-if="type == 'marketSituation'"></image>
|
|
<view :class="type == 'marketSituation' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
行情</view>
|
|
</view>
|
|
<view class="static-footer-li static-footer-li-special" @click="tabChange(3)">
|
|
<image src="../static/footBar-image/deepMate.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type != 'deepMate'"></image>
|
|
<image src="../static/footBar-image/deepMate-selected.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type == 'deepMate'">
|
|
</image>
|
|
<view :class="type == 'deepMate' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
DeepMate</view>
|
|
</view>
|
|
<view class="static-footer-li" @click="tabChange(4)">
|
|
<image src="../static/footBar-image/deepExploration.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
|
|
</image>
|
|
<image src="../static/footBar-image/deepExploration-selected.png" class="static-footer-li-icon"
|
|
v-if="type == 'deepExploration'"></image>
|
|
<view :class="type == 'deepExploration' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
深度探索</view>
|
|
</view>
|
|
<view class="static-footer-li" @click="tabChange(5)">
|
|
<image src="../static/footBar-image/member.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
|
|
<image src="../static/footBar-image/member-selected.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
|
|
<view :class="type == 'member' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
我的</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifndef H5 -->
|
|
<view class="static-footer-bar" :style="{ 'padding-bottom': safeAreaInsets.bottom + 'px' }">
|
|
<view class="static-footer-li" @click="tabChange(1)">
|
|
<image src="../static/footBar-image/home.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
|
|
<image src="../static/footBar-image/home-selected.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
|
|
<view :class="type == 'home' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
{{ $t('components.footerBar.homepage') }}</view>
|
|
</view>
|
|
<view class="static-footer-li" @click="tabChange(2)">
|
|
<image src="../static/footBar-image/marketSituation.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
|
|
</image>
|
|
<image src="../static/footBar-image/marketSituation-selected.png" class="static-footer-li-icon"
|
|
v-if="type == 'marketSituation'"></image>
|
|
<view :class="type == 'marketSituation' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
{{ $t('components.footerBar.marketSituation') }}</view>
|
|
</view>
|
|
<view class="static-footer-li static-footer-li-special" @click="tabChange(3)">
|
|
<image src="../static/footBar-image/deepMate.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type != 'deepMate'"></image>
|
|
<image src="../static/footBar-image/deepMate-selected.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type == 'deepMate'">
|
|
</image>
|
|
<view :class="type == 'deepMate' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
{{ $t('components.footerBar.deepMate') }}</view>
|
|
</view>
|
|
<view class="static-footer-li" @click="tabChange(4)">
|
|
<image src="../static/footBar-image/deepExploration.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
|
|
</image>
|
|
<image src="../static/footBar-image/deepExploration-selected.png" class="static-footer-li-icon"
|
|
v-if="type == 'deepExploration'"></image>
|
|
<view :class="type == 'deepExploration' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
{{ $t('components.footerBar.deepExploration') }}</view>
|
|
</view>
|
|
<view class="static-footer-li" @click="tabChange(5)">
|
|
<image src="../static/footBar-image/member.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
|
|
<image src="../static/footBar-image/member-selected.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
|
|
<view :class="type == 'member' ? 'static-footer-li-title1' : 'static-footer-li-title'">
|
|
{{ $t('components.footerBar.member') }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted } from 'vue'
|
|
|
|
// 定义 props
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
// 计算属性：获取安全区域
|
|
const safeAreaInsets = computed(() => {
|
|
// 获取系统信息中的安全区域
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
return {
|
|
bottom: systemInfo.safeAreaInsets?.bottom || 0
|
|
}
|
|
})
|
|
|
|
// 方法：标签切换
|
|
const tabChange = (value) => {
|
|
// console.log(value)
|
|
if (value == 1) { //首页
|
|
uni.redirectTo({
|
|
url: '/pages/home/home',
|
|
animationType: 'fade-in'
|
|
})
|
|
} else if (value == 2) { //行情
|
|
uni.redirectTo({
|
|
url: '/pages/home/marketSituation',
|
|
animationType: 'fade-in'
|
|
})
|
|
} else if (value == 3) { //DeepMate
|
|
uni.redirectTo({
|
|
url: '/pages/deepMate/deepMate',
|
|
animationType: 'fade-in'
|
|
})
|
|
} else if (value == 4) { //深度探索
|
|
if (props.type == 'deepExploration') return;
|
|
uni.redirectTo({
|
|
url: '/pages/deepExploration/deepExploration',
|
|
animationType: 'fade-in'
|
|
})
|
|
} else if (value == 5) { //我的
|
|
if (props.type == 'member') return;
|
|
uni.redirectTo({
|
|
url: '/pages/home/member',
|
|
animationType: 'fade-in'
|
|
})
|
|
}
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
// 组件挂载后的逻辑
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.static-footer-bar {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
border-top: 1px solid #E2E2E2;
|
|
background: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.static-footer-li {
|
|
display: inline-block;
|
|
width: 20%;
|
|
height: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
transform: translateY(-12rpx);
|
|
}
|
|
|
|
.static-footer-li-icon {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin: 12rpx 0;
|
|
}
|
|
|
|
/* 中间导航项的特殊样式 */
|
|
.static-footer-li-special {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.static-footer-li-icon-special {
|
|
width: 95rpx !important;
|
|
height: 95rpx !important;
|
|
margin: 0rpx 0 !important;
|
|
border-radius: 50rpx;
|
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-12rpx);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.static-footer-li-title {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
margin-top: -20rpx;
|
|
color: gray;
|
|
}
|
|
|
|
.static-footer-li-title1 {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
margin-top: -20rpx;
|
|
color: black;
|
|
}
|
|
|
|
.unreadNum {
|
|
position: absolute;
|
|
right: 15%;
|
|
background-color: #f00;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
padding: 0 6rpx;
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
min-width: 36rpx;
|
|
border-radius: 18rpx;
|
|
z-index: 9;
|
|
}
|
|
|
|
.taskNew {
|
|
position: absolute;
|
|
right: 15%;
|
|
height: 30rpx;
|
|
z-index: 9;
|
|
}
|
|
|
|
.homeWorkUnRead {
|
|
position: absolute;
|
|
right: 30%;
|
|
top: 10%;
|
|
background-color: #f00;
|
|
color: #fff;
|
|
height: 12rpx;
|
|
width: 12rpx;
|
|
border-radius: 6rpx;
|
|
z-index: 9;
|
|
}
|
|
</style>
|