<template>
|
<view>
|
<!-- 占位栏 -->
|
<!-- <view
|
class="school"
|
:style="{
|
paddingTop: `${StatusBar}px`,
|
height: `${CustomBar}rpx`,
|
lineHeight: `${CustomBar}rpx`,
|
}"
|
></view> -->
|
|
<!-- 自定义导航栏 -->
|
<view class="custom-navbar">
|
<view class="navbar-content">
|
<!-- 左侧图标 + 标题 -->
|
<view class="left">
|
<up-icon name="/static/images/tabbar/line-Film.png" size="40rpx" color="#fff" />
|
<text class="title">光影旅程</text>
|
</view>
|
|
<!-- 右侧按钮 -->
|
<view class="right">
|
<view class="login-view" @click="goLogin" v-if="!isLoggedIn">
|
<up-icon name="/static/images/tabbar/user.png" size="30rpx" />
|
<text class="login-text">登录</text>
|
</view>
|
<up-icon name="list" size="40rpx" color="#fff" @click="openMenu" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted ,computed} from 'vue'
|
import { useUserStore } from '@/store/user'
|
const userStore = useUserStore()
|
const isLoggedIn = computed(() => userStore.hasLogin)
|
console.log("登录状态")
|
console.log(isLoggedIn.value)
|
|
// 可选：自动获取系统信息进行替代
|
onMounted(() => {
|
|
})
|
|
function goLogin() {
|
uni.navigateTo({ url: '/pages/login/login' })
|
}
|
|
function openMenu() {
|
console.log('打开菜单')
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.school {
|
background-color: #000;
|
color: #fff;
|
}
|
|
.custom-navbar {
|
background-color: #111;
|
padding: 6rpx 20rpx;
|
}
|
|
.navbar-content {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 44px;
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
}
|
|
.left .title {
|
font-size: 17px;
|
font-weight: bold;
|
margin-left: 15rpx;
|
color: #fff;
|
letter-spacing: 4rpx;
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
}
|
|
.login-view {
|
display: flex;
|
align-items: center;
|
padding: 8rpx 16rpx;
|
background-color: #fff;
|
border-radius: 10rpx;
|
color: #333;
|
}
|
|
.login-text {
|
margin-left: 10rpx;
|
font-size: 28rpx;
|
font-weight: bold;
|
}
|
</style>
|
