70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<Header :showGuideIcon="false" :showTaskIcon="false" :showStarActivityIcon="false" :showBack="true" backIconColor="#e6e6e6" />
|
|
<StarbookContent :isActive="true" />
|
|
|
|
<!-- 蒙层 - 导航栏展开时显示 -->
|
|
<view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
|
|
|
|
<BottomNav :activeTab="1" :isExpanded="navExpanded" @update:activeTab="handleTabChange" @update:isExpanded="navExpanded = $event" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import Header from "../components/Header.vue";
|
|
import BottomNav from "../components/BottomNav.vue";
|
|
import StarbookContent from "../components/StarbookContent.vue";
|
|
|
|
const navExpanded = ref(false);
|
|
|
|
const handleTabChange = (newTab) => {
|
|
const routes = [
|
|
'/pages/friends/index',
|
|
'/pages/starbook/index',
|
|
'/pages/castlove/mall',
|
|
'/pages/starcity/index',
|
|
'/pages/square/square'
|
|
];
|
|
|
|
if (newTab >= 0 && newTab < routes.length) {
|
|
uni.navigateTo({
|
|
url: routes[newTab]
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
|
|
}
|
|
|
|
.nav-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
z-index: 999;
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|