24 lines
2.1 KiB
Plaintext
24 lines
2.1 KiB
Plaintext
<template>
|
|
<view class="bottom-nav">
|
|
<view class="nav-item" @click="go('/pages/home/home')"><view :class="active == 'home' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="home" :size="43" :muted="active != 'home'" /></view><text :class="active == 'home' ? 'nav-label active-label' : 'nav-label'">首页</text></view>
|
|
<view class="nav-item" @click="go('/pages/news/news')"><view :class="active == 'news' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="trend-up" :size="43" :muted="active != 'news'" /></view><text :class="active == 'news' ? 'nav-label active-label' : 'nav-label'">新闻</text></view>
|
|
<view class="nav-item" @click="go('/pages/messages/messages')"><view :class="active == 'message' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="message" :size="43" :muted="active != 'message'" /></view><text :class="active == 'message' ? 'nav-label active-label' : 'nav-label'">消息</text></view>
|
|
<view class="nav-item" @click="go('/pages/profile/profile')"><view :class="active == 'profile' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="user" :size="43" :muted="active != 'profile'" /></view><text :class="active == 'profile' ? 'nav-label active-label' : 'nav-label'">我的</text></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
|
defineProps({ active: { type: String, default: 'home' } })
|
|
const go = (url: string) => { uni.redirectTo({ url: url }) }
|
|
</script>
|
|
|
|
<style>
|
|
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 130rpx; padding-bottom: env(safe-area-inset-bottom); background-color: #ffffff; border-top: 1rpx solid #e7edf6; flex-direction: row; box-shadow: 0 -10rpx 30rpx rgba(18, 38, 75, 0.06); }
|
|
.nav-item { flex: 1; height: 116rpx; align-items: center; justify-content: center; }
|
|
.nav-icon { width: 60rpx; height: 60rpx; border-radius: 18rpx; align-items: center; justify-content: center; background-color: #f0f4f9; }
|
|
.active-icon { background-color: #e6f0ff; }
|
|
.nav-label { margin-top: 7rpx; font-size: 21rpx; color: #7b8799; }
|
|
.active-label { color: #0868f7; font-weight: 700; }
|
|
</style>
|