65 lines
3.6 KiB
Plaintext
65 lines
3.6 KiB
Plaintext
<template>
|
|
<view class="footer-nav">
|
|
<view class="nav-item" :class="activeTab === 'home' ? 'nav-item-active' : ''" @tap="goPage('/pages/index/index')">
|
|
<view class="nav-icon-slot"><UniIcons :type="activeTab === 'home' ? 'home-filled' : 'home'" class="nav-icon" :class="activeTab === 'home' ? 'nav-icon-active' : ''"></UniIcons></view>
|
|
<text class="nav-label" :class="activeTab === 'home' ? 'nav-label-active' : ''">首页</text>
|
|
</view>
|
|
<view class="nav-item" :class="activeTab === 'study' ? 'nav-item-active' : ''" @tap="goPage('/pages/study/index')">
|
|
<view class="nav-icon-slot"><view class="nav-chart">
|
|
<view class="nav-chart-bar nav-chart-short" :class="activeTab === 'study' ? 'nav-chart-active' : ''"></view>
|
|
<view class="nav-chart-bar nav-chart-tall" :class="activeTab === 'study' ? 'nav-chart-active' : ''"></view>
|
|
<view class="nav-chart-bar nav-chart-medium" :class="activeTab === 'study' ? 'nav-chart-active' : ''"></view>
|
|
</view></view>
|
|
<text class="nav-label" :class="activeTab === 'study' ? 'nav-label-active' : ''">学情</text>
|
|
</view>
|
|
<view class="nav-item" :class="activeTab === 'tasks' ? 'nav-item-active' : ''" @tap="goPage('/pages/tasks/index')">
|
|
<view class="nav-icon-slot"><UniIcons :type="activeTab === 'tasks' ? 'checkbox-filled' : 'checkbox'" class="nav-icon" :class="activeTab === 'tasks' ? 'nav-icon-active' : ''"></UniIcons></view>
|
|
<text class="nav-label" :class="activeTab === 'tasks' ? 'nav-label-active' : ''">任务</text>
|
|
</view>
|
|
<view class="nav-item" :class="activeTab === 'profile' ? 'nav-item-active' : ''" @tap="goPage('/pages/profile/index')">
|
|
<view class="nav-icon-slot"><UniIcons :type="activeTab === 'profile' ? 'person-filled' : 'person'" class="nav-icon" :class="activeTab === 'profile' ? 'nav-icon-active' : ''"></UniIcons></view>
|
|
<text class="nav-label" :class="activeTab === 'profile' ? 'nav-label-active' : ''">我的</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UniIcons from '../uni_modules/uni-icons-x/components/uni-icons/uni-icons.uvue'
|
|
|
|
const props = defineProps<{ activeTab: string }>()
|
|
|
|
function goPage(url: string) {
|
|
const pages = getCurrentPages()
|
|
const route = normalizeRoute(url)
|
|
const currentPage = pages[pages.length - 1]
|
|
if (currentPage && normalizeRoute(currentPage.route) === route) return
|
|
for (let index = 0; index < pages.length; index++) {
|
|
if (normalizeRoute(pages[index].route) === route) {
|
|
uni.navigateBack({ delta: pages.length - index - 1 })
|
|
return
|
|
}
|
|
}
|
|
uni.navigateTo({ url })
|
|
}
|
|
|
|
function normalizeRoute(route: string): string {
|
|
return route.split('?')[0].replace(/^\/+/, '')
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.footer-nav { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-around; padding: 10px 14px calc(9px + var(--uni-safe-area-inset-bottom)); background-color: #ffffff; border-top: 1px solid #e5e8f0; }
|
|
.nav-item { display: flex; flex-direction: column; align-items: center; width: 25%; }
|
|
.nav-icon-slot { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 5px; }
|
|
.nav-icon { font-size: 22px; color: #9da8ba; }
|
|
.nav-icon-active { color: #554be9; }
|
|
.nav-chart { display: flex; flex-direction: row; align-items: flex-end; justify-content: center; width: 22px; height: 22px; padding-bottom: 2px; }
|
|
.nav-chart-bar { width: 4px; margin: 0 1px; border-radius: 2px; background-color: #9da8ba; }
|
|
.nav-chart-short { height: 9px; }
|
|
.nav-chart-tall { height: 18px; }
|
|
.nav-chart-medium { height: 13px; }
|
|
.nav-chart-active { background-color: #554be9; }
|
|
.nav-label { font-size: 11px; color: #9da8ba; }
|
|
.nav-label-active { color: #554be9; }
|
|
</style>
|