fix: 会误触菜单样式
This commit is contained in:
parent
023d708bf9
commit
292d7f076c
@ -49,9 +49,9 @@
|
||||
<!-- AI角色（毛绒小怪兽）占位区域 -->
|
||||
<view class="character-area">
|
||||
<!-- 角色图片，如有可替换为实际角色图 -->
|
||||
<view class="character-placeholder">
|
||||
<!-- <view class="character-placeholder">
|
||||
<text class="character-emoji">🐾</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 底部输入框 -->
|
||||
|
||||
@ -2,131 +2,127 @@
|
||||
<view class="bottom-nav-container">
|
||||
<!-- 导航底座 -->
|
||||
<view class="base-wrapper" :class="{ 'expanded': isExpanded }">
|
||||
<image
|
||||
class="base-icon"
|
||||
src="/static/icon/nav-base.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<image class="base-icon" src="/static/icon/nav-base.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 小怪兽图标 -->
|
||||
<view class="monster-wrapper" :class="{ 'expanded': isExpanded }">
|
||||
<image
|
||||
class="monster-icon"
|
||||
src="/static/icon/character.png"
|
||||
mode="aspectFit"
|
||||
@click="toggleExpand"
|
||||
></image>
|
||||
<image class="monster-icon" src="/static/icon/character.png" mode="aspectFit" @click="toggleExpand"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 导航图标 -->
|
||||
<view
|
||||
v-for="(item, index) in navItems"
|
||||
:key="index"
|
||||
class="nav-icon-wrapper"
|
||||
:class="{ 'expanded': isExpanded, 'active': activeTab === index }"
|
||||
:style="getNavIconStyle(index)"
|
||||
@click="handleNavClick(index)"
|
||||
>
|
||||
<image
|
||||
class="nav-icon"
|
||||
:src="item.icon"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view v-for="(item, index) in navItems" :key="index" class="nav-icon-wrapper"
|
||||
:class="{ 'expanded': isExpanded, 'active': activeTab === index && isCurrentPage(index) }" :style="getNavIconStyle(index)"
|
||||
@click="handleNavClick(index)">
|
||||
<image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
|
||||
<text class="nav-label">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// 定义 props
|
||||
const props = defineProps({
|
||||
activeTab: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isExpanded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// 定义 emits
|
||||
const emit = defineEmits(['update:activeTab', 'update:isExpanded']);
|
||||
|
||||
// 导航项配置
|
||||
const navItems = [
|
||||
{
|
||||
name: '搭子',
|
||||
icon: '/static/icon/dazi.png',
|
||||
angle: 122 // 左上方
|
||||
},
|
||||
{
|
||||
name: '星册',
|
||||
icon: '/static/icon/starbook.png',
|
||||
angle: 107 // 右上方
|
||||
},
|
||||
{
|
||||
name: '铸爱',
|
||||
icon: '/static/icon/castlove.png',
|
||||
angle: 90.01 // 正上方
|
||||
},
|
||||
{
|
||||
name: '星城',
|
||||
icon: '/static/icon/dressup.png',
|
||||
angle: 73 // 右方
|
||||
},
|
||||
{
|
||||
name: '广场',
|
||||
icon: '/static/icon/square.png',
|
||||
angle: 57 // 右下方
|
||||
}
|
||||
];
|
||||
|
||||
// 扇形半径
|
||||
const radius = 580; // rpx
|
||||
|
||||
// 计算每个导航图标的位置
|
||||
const getNavIconStyle = (index) => {
|
||||
if (!props.isExpanded) {
|
||||
// 未展开时，所有图标都在中心位置，透明且缩小
|
||||
return {
|
||||
'--x': '0rpx',
|
||||
'--y': '0rpx',
|
||||
'--delay': '0s'
|
||||
};
|
||||
}
|
||||
|
||||
const item = navItems[index];
|
||||
const angle = item.angle;
|
||||
const radian = angle * Math.PI / 180;
|
||||
const x = radius * Math.cos(radian);
|
||||
const y = -radius * Math.sin(radian);
|
||||
|
||||
// 添加延迟，形成序列动画效果
|
||||
const delay = index * 0.03;
|
||||
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// 定义 props
|
||||
const props = defineProps({
|
||||
activeTab: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isExpanded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// 定义 emits
|
||||
const emit = defineEmits(['update:activeTab', 'update:isExpanded']);
|
||||
|
||||
// 导航项配置
|
||||
const navItems = [
|
||||
{
|
||||
name: '搭子',
|
||||
icon: '/static/icon/dazi.png',
|
||||
angle: 122, // 左上方
|
||||
path: '/pages/ai-dazi/index'
|
||||
},
|
||||
{
|
||||
name: '星册',
|
||||
icon: '/static/icon/starbook.png',
|
||||
angle: 107, // 右上方
|
||||
path: '/pages/starbook/index'
|
||||
},
|
||||
{
|
||||
name: '铸爱',
|
||||
icon: '/static/icon/castlove.png',
|
||||
angle: 90.01, // 正上方
|
||||
path: '/pages/castlove/mall'
|
||||
},
|
||||
{
|
||||
name: '星城',
|
||||
icon: '/static/icon/dressup.png',
|
||||
angle: 73, // 右方
|
||||
path: '/pages/starcity/index'
|
||||
},
|
||||
{
|
||||
name: '广场',
|
||||
icon: '/static/icon/square.png',
|
||||
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 getNavIconStyle = (index) => {
|
||||
if (!props.isExpanded) {
|
||||
// 未展开时，所有图标都在中心位置，透明且缩小
|
||||
return {
|
||||
'--x': `${x}rpx`,
|
||||
'--y': `${y}rpx`,
|
||||
'--delay': `${delay}s`
|
||||
'--x': '0rpx',
|
||||
'--y': '0rpx',
|
||||
'--delay': '0s'
|
||||
};
|
||||
}
|
||||
|
||||
const item = navItems[index];
|
||||
const angle = item.angle;
|
||||
const radian = angle * Math.PI / 180;
|
||||
const x = radius * Math.cos(radian);
|
||||
const y = -radius * Math.sin(radian);
|
||||
|
||||
// 添加延迟，形成序列动画效果
|
||||
const delay = index * 0.03;
|
||||
|
||||
return {
|
||||
'--x': `${x}rpx`,
|
||||
'--y': `${y}rpx`,
|
||||
'--delay': `${delay}s`
|
||||
};
|
||||
|
||||
// 切换展开/收起状态
|
||||
const toggleExpand = () => {
|
||||
emit('update:isExpanded', !props.isExpanded);
|
||||
};
|
||||
|
||||
// 处理导航点击
|
||||
const handleNavClick = (index) => {
|
||||
// 触发事件，通知父组件切换 tab
|
||||
emit('update:activeTab', index);
|
||||
// 收起导航栏
|
||||
emit('update:isExpanded', false);
|
||||
};
|
||||
};
|
||||
|
||||
// 切换展开/收起状态
|
||||
const toggleExpand = () => {
|
||||
emit('update:isExpanded', !props.isExpanded);
|
||||
};
|
||||
|
||||
// 处理导航点击
|
||||
const handleNavClick = (index) => {
|
||||
// 触发事件，通知父组件切换 tab
|
||||
emit('update:activeTab', index);
|
||||
// 收起导航栏
|
||||
emit('update:isExpanded', false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -185,23 +181,24 @@
|
||||
.monster-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.5))
|
||||
drop-shadow(0 0 40rpx rgba(255, 140, 180, 0.3));
|
||||
filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.5)) drop-shadow(0 0 40rpx rgba(255, 140, 180, 0.3));
|
||||
transition: filter 0.3s ease, transform 0.3s ease;
|
||||
animation: breathe 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.monster-wrapper.expanded .monster-icon {
|
||||
filter: drop-shadow(0 16rpx 40rpx rgba(255, 107, 157, 0.7))
|
||||
drop-shadow(0 0 60rpx rgba(255, 140, 180, 0.5));
|
||||
filter: drop-shadow(0 16rpx 40rpx rgba(255, 107, 157, 0.7)) drop-shadow(0 0 60rpx rgba(255, 140, 180, 0.5));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* 小怪兽呼吸动画 */
|
||||
@keyframes breathe {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1.00);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
@ -222,8 +219,8 @@
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.64, 1),
|
||||
opacity 0.3s ease-out;
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.64, 1),
|
||||
opacity 0.3s ease-out;
|
||||
transition-delay: var(--delay);
|
||||
}
|
||||
|
||||
@ -238,8 +235,7 @@
|
||||
height: 100rpx;
|
||||
margin-bottom: 8rpx;
|
||||
transition: transform 0.3s ease, filter 0.3s ease;
|
||||
filter: drop-shadow(0 6rpx 16rpx rgba(0, 0, 0, 0.4))
|
||||
drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.2));
|
||||
filter: drop-shadow(0 6rpx 16rpx rgba(0, 0, 0, 0.4)) drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.2));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -255,16 +251,14 @@
|
||||
opacity: 0.2;
|
||||
transform: scaleY(-1);
|
||||
filter: blur(4rpx);
|
||||
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 60%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 60%);
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-icon-wrapper.active .nav-icon {
|
||||
transform: scale(1.25);
|
||||
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));
|
||||
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));
|
||||
}
|
||||
|
||||
.nav-icon-wrapper:active .nav-icon {
|
||||
@ -280,7 +274,7 @@
|
||||
color: rgba(255, 255, 255, 0.98);
|
||||
font-weight: 500;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4),
|
||||
0 1rpx 4rpx rgba(0, 0, 0, 0.3);
|
||||
0 1rpx 4rpx rgba(0, 0, 0, 0.3);
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@ -289,7 +283,7 @@
|
||||
color: #e6e6e6;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2rpx 12rpx rgba(255, 107, 157, 0.6),
|
||||
0 1rpx 6rpx rgba(0, 0, 0, 0.4);
|
||||
0 1rpx 6rpx rgba(0, 0, 0, 0.4);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<swiper-item
|
||||
v-for="item in bannerActivities"
|
||||
:key="item.id"
|
||||
@click.stop="$emit('activityClick', item)"
|
||||
@tap.stop="$emit('activityClick', item)"
|
||||
>
|
||||
<image
|
||||
class="banner-activity-img"
|
||||
|
||||
@ -167,11 +167,11 @@ onMounted(() => {
|
||||
onShow(() => {
|
||||
isActive.value = true
|
||||
// 检查是否需要显示引导，如果需要则跳转到引导页面
|
||||
if (shouldShowGuideStartModal()) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/tasks/guide'
|
||||
})
|
||||
}
|
||||
// if (shouldShowGuideStartModal()) {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/tasks/guide'
|
||||
// })
|
||||
// }
|
||||
})
|
||||
|
||||
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