fix: 会误触菜单样式
This commit is contained in:
parent
023d708bf9
commit
292d7f076c
@ -49,9 +49,9 @@
|
|||||||
<!-- AI角色(毛绒小怪兽)占位区域 -->
|
<!-- AI角色(毛绒小怪兽)占位区域 -->
|
||||||
<view class="character-area">
|
<view class="character-area">
|
||||||
<!-- 角色图片,如有可替换为实际角色图 -->
|
<!-- 角色图片,如有可替换为实际角色图 -->
|
||||||
<view class="character-placeholder">
|
<!-- <view class="character-placeholder">
|
||||||
<text class="character-emoji">🐾</text>
|
<text class="character-emoji">🐾</text>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部输入框 -->
|
<!-- 底部输入框 -->
|
||||||
|
|||||||
@ -2,37 +2,19 @@
|
|||||||
<view class="bottom-nav-container">
|
<view class="bottom-nav-container">
|
||||||
<!-- 导航底座 -->
|
<!-- 导航底座 -->
|
||||||
<view class="base-wrapper" :class="{ 'expanded': isExpanded }">
|
<view class="base-wrapper" :class="{ 'expanded': isExpanded }">
|
||||||
<image
|
<image class="base-icon" src="/static/icon/nav-base.png" mode="aspectFit"></image>
|
||||||
class="base-icon"
|
|
||||||
src="/static/icon/nav-base.png"
|
|
||||||
mode="aspectFit"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 小怪兽图标 -->
|
<!-- 小怪兽图标 -->
|
||||||
<view class="monster-wrapper" :class="{ 'expanded': isExpanded }">
|
<view class="monster-wrapper" :class="{ 'expanded': isExpanded }">
|
||||||
<image
|
<image class="monster-icon" src="/static/icon/character.png" mode="aspectFit" @click="toggleExpand"></image>
|
||||||
class="monster-icon"
|
|
||||||
src="/static/icon/character.png"
|
|
||||||
mode="aspectFit"
|
|
||||||
@click="toggleExpand"
|
|
||||||
></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 导航图标 -->
|
<!-- 导航图标 -->
|
||||||
<view
|
<view v-for="(item, index) in navItems" :key="index" class="nav-icon-wrapper"
|
||||||
v-for="(item, index) in navItems"
|
:class="{ 'expanded': isExpanded, 'active': activeTab === index && isCurrentPage(index) }" :style="getNavIconStyle(index)"
|
||||||
:key="index"
|
@click="handleNavClick(index)">
|
||||||
class="nav-icon-wrapper"
|
<image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
|
||||||
:class="{ 'expanded': isExpanded, 'active': activeTab === index }"
|
|
||||||
:style="getNavIconStyle(index)"
|
|
||||||
@click="handleNavClick(index)"
|
|
||||||
>
|
|
||||||
<image
|
|
||||||
class="nav-icon"
|
|
||||||
:src="item.icon"
|
|
||||||
mode="aspectFit"
|
|
||||||
></image>
|
|
||||||
<text class="nav-label">{{ item.name }}</text>
|
<text class="nav-label">{{ item.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -61,30 +43,44 @@
|
|||||||
{
|
{
|
||||||
name: '搭子',
|
name: '搭子',
|
||||||
icon: '/static/icon/dazi.png',
|
icon: '/static/icon/dazi.png',
|
||||||
angle: 122 // 左上方
|
angle: 122, // 左上方
|
||||||
|
path: '/pages/ai-dazi/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '星册',
|
name: '星册',
|
||||||
icon: '/static/icon/starbook.png',
|
icon: '/static/icon/starbook.png',
|
||||||
angle: 107 // 右上方
|
angle: 107, // 右上方
|
||||||
|
path: '/pages/starbook/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '铸爱',
|
name: '铸爱',
|
||||||
icon: '/static/icon/castlove.png',
|
icon: '/static/icon/castlove.png',
|
||||||
angle: 90.01 // 正上方
|
angle: 90.01, // 正上方
|
||||||
|
path: '/pages/castlove/mall'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '星城',
|
name: '星城',
|
||||||
icon: '/static/icon/dressup.png',
|
icon: '/static/icon/dressup.png',
|
||||||
angle: 73 // 右方
|
angle: 73, // 右方
|
||||||
|
path: '/pages/starcity/index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '广场',
|
name: '广场',
|
||||||
icon: '/static/icon/square.png',
|
icon: '/static/icon/square.png',
|
||||||
angle: 57 // 右下方
|
angle: 57, // 右下方
|
||||||
|
path: '/pages/square/square'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// 检查当前页是否匹配导航项
|
||||||
|
const isCurrentPage = (index) => {
|
||||||
|
const pages = getCurrentPages();
|
||||||
|
if (pages.length === 0) return false;
|
||||||
|
const currentPage = pages[pages.length - 1];
|
||||||
|
const currentPath = '/' + currentPage.route;
|
||||||
|
return navItems[index]?.path === currentPath;
|
||||||
|
};
|
||||||
|
|
||||||
// 扇形半径
|
// 扇形半径
|
||||||
const radius = 580; // rpx
|
const radius = 580; // rpx
|
||||||
|
|
||||||
@ -185,23 +181,24 @@
|
|||||||
.monster-icon {
|
.monster-icon {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.5))
|
filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.5)) drop-shadow(0 0 40rpx rgba(255, 140, 180, 0.3));
|
||||||
drop-shadow(0 0 40rpx rgba(255, 140, 180, 0.3));
|
|
||||||
transition: filter 0.3s ease, transform 0.3s ease;
|
transition: filter 0.3s ease, transform 0.3s ease;
|
||||||
animation: breathe 2s ease-in-out infinite;
|
animation: breathe 2s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.monster-wrapper.expanded .monster-icon {
|
.monster-wrapper.expanded .monster-icon {
|
||||||
filter: drop-shadow(0 16rpx 40rpx rgba(255, 107, 157, 0.7))
|
filter: drop-shadow(0 16rpx 40rpx rgba(255, 107, 157, 0.7)) drop-shadow(0 0 60rpx rgba(255, 140, 180, 0.5));
|
||||||
drop-shadow(0 0 60rpx rgba(255, 140, 180, 0.5));
|
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小怪兽呼吸动画 */
|
/* 小怪兽呼吸动画 */
|
||||||
@keyframes breathe {
|
@keyframes breathe {
|
||||||
0%, 100% {
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
transform: scale(1.00);
|
transform: scale(1.00);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: scale(1.02);
|
transform: scale(1.02);
|
||||||
}
|
}
|
||||||
@ -238,8 +235,7 @@
|
|||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 8rpx;
|
||||||
transition: transform 0.3s ease, filter 0.3s ease;
|
transition: transform 0.3s ease, filter 0.3s ease;
|
||||||
filter: drop-shadow(0 6rpx 16rpx rgba(0, 0, 0, 0.4))
|
filter: drop-shadow(0 6rpx 16rpx rgba(0, 0, 0, 0.4)) drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.2));
|
||||||
drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.2));
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -262,9 +258,7 @@
|
|||||||
|
|
||||||
.nav-icon-wrapper.active .nav-icon {
|
.nav-icon-wrapper.active .nav-icon {
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.7))
|
filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.7)) drop-shadow(0 4rpx 16rpx rgba(255, 140, 66, 0.5)) drop-shadow(0 0 32rpx rgba(255, 107, 157, 0.4));
|
||||||
drop-shadow(0 4rpx 16rpx rgba(255, 140, 66, 0.5))
|
|
||||||
drop-shadow(0 0 32rpx rgba(255, 107, 157, 0.4));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon-wrapper:active .nav-icon {
|
.nav-icon-wrapper:active .nav-icon {
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
<swiper-item
|
<swiper-item
|
||||||
v-for="item in bannerActivities"
|
v-for="item in bannerActivities"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
@click.stop="$emit('activityClick', item)"
|
@tap.stop="$emit('activityClick', item)"
|
||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
class="banner-activity-img"
|
class="banner-activity-img"
|
||||||
|
|||||||
@ -167,11 +167,11 @@ onMounted(() => {
|
|||||||
onShow(() => {
|
onShow(() => {
|
||||||
isActive.value = true
|
isActive.value = true
|
||||||
// 检查是否需要显示引导,如果需要则跳转到引导页面
|
// 检查是否需要显示引导,如果需要则跳转到引导页面
|
||||||
if (shouldShowGuideStartModal()) {
|
// if (shouldShowGuideStartModal()) {
|
||||||
uni.navigateTo({
|
// uni.navigateTo({
|
||||||
url: '/pages/tasks/guide'
|
// url: '/pages/tasks/guide'
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
})
|
})
|
||||||
|
|
||||||
onHide(() => {
|
onHide(() => {
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 MiB After Width: | Height: | Size: 4.8 MiB |
Loading…
Reference in New Issue
Block a user