kk
115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<view class="page-nav">
|
|
<!-- 首页按钮 -->
|
|
<view class="nav-item" @click="handleNav('home')">
|
|
<text class="nav-icon">🏠</text>
|
|
<text class="nav-text">首页</text>
|
|
</view>
|
|
|
|
<!-- 开门按钮 - 圆形凸起 -->
|
|
<view class="door-btn-wrapper" @click="handleOpenDoor">
|
|
<view class="door-btn">开门</view>
|
|
</view>
|
|
|
|
<!-- 我的按钮 -->
|
|
<view class="nav-item" @click="handleNav('mine')">
|
|
<text class="nav-icon">👤</text>
|
|
<text class="nav-text">我的</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'PageNav',
|
|
props: {
|
|
// 当前高亮的tab: 'home' | 'mine'
|
|
activeTab: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
},
|
|
methods: {
|
|
handleNav(tab) {
|
|
// 发出事件，由父组件处理导航
|
|
this.$emit('change', tab);
|
|
},
|
|
handleOpenDoor() {
|
|
uni.showModal({
|
|
title: '开门',
|
|
content: '确认打开柜门？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({ title: '柜门已打开', icon: 'success' });
|
|
}
|
|
}
|
|
});
|
|
this.$emit('openDoor');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120rpx;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
z-index: 999;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 40rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.nav-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.nav-item:active .nav-text,
|
|
.nav-item.active .nav-text {
|
|
color: #2979ff;
|
|
}
|
|
|
|
.door-btn-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: -80rpx;
|
|
}
|
|
|
|
.door-btn {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
|
color: #fff;
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 10rpx 36rpx rgba(41, 121, 255, 0.55);
|
|
}
|
|
</style> |