Files
Road_roller/src/components/home/homeNav.vue
2026-09-16 14:48:23 +08:00

108 lines
2.1 KiB
Vue

<script setup lang="ts">
import storage from '@/utils/storage'
const project = ref(storage.get('current_project'))
// 页面显示时刷新数据(从设置页返回时)
onShow(() => {
project.value = storage.get('current_project')
})
function onIconClick(name: string) {
if (name === '通知') {
uni.navigateTo({
url: '/pages/message/index',
})
}
else if (name === '蓝牙') {
uni.navigateTo({
url: '/pages/bluetooth/index',
})
}
else if (name === '设置') {
uni.navigateTo({
url: '/pages/settings/index',
})
}
else {
console.log(`点击了${name}图标`)
}
}
</script>
<template>
<view class="custom-nav">
<view class="nav-left">
<image class="nav-logo" src="/static/logo.png" mode="aspectFit" @tap="onIconClick('logo')" />
<view class="nav-info">
<text class="nav-title">
{{ project?.project_name || '-----' }}
</text>
<text class="nav-subtitle">
{{ project?.stake_range || '-----' }}
</text>
</view>
</view>
<view class="nav-right">
<image class="nav-icon" src="/static/seting.png" mode="aspectFit" @tap="onIconClick('设置')" />
<image class="nav-icon" src="/static/Bluetooth.png" mode="aspectFit" @tap="onIconClick('蓝牙')" />
<image class="nav-icon" src="/static/message.png" mode="aspectFit" @tap="onIconClick('通知')" />
</view>
</view>
</template>
<style scoped>
.custom-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
padding-left: 16px;
padding-right: 16px;
background-color: #ffffff;
z-index: 999;
}
.nav-left {
display: flex;
align-items: center;
}
.nav-logo {
width: 270rpx;
height: 810rpx;
margin-right: 12px;
}
.nav-info {
display: flex;
flex-direction: column;
}
.nav-title {
font-size: 18px;
font-weight: bold;
color: #333333;
}
.nav-subtitle {
font-size: 12px;
color: #999999;
}
.nav-right {
display: flex;
align-items: center;
gap: 12px;
}
.nav-icon {
width: 32px;
height: 32px;
}
</style>