Ethereal
1 month ago
5 changed files with 346 additions and 108 deletions
-
192components/footerBar-cn.vue
-
2components/footerBar.vue
-
126pages/deepMate/deepMate.vue
-
9pages/start/Registration/Registration.vue
-
23pages/start/login/login.vue
@ -0,0 +1,192 @@ |
|||
<template> |
|||
<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> |
|||
</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/home/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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue