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