xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 会误触菜单样式

Browse Source
This commit is contained in:
zheng020 2026-05-12 17:18:01 +08:00
parent 023d708bf9
commit 292d7f076c
5 changed files with 129 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/pages/ai-dazi/index.vue
View File

@ -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>
<!-- 底部输入框 --> <!-- 底部输入框 -->

248
frontend/pages/components/BottomNav.vue
View File

@ -2,131 +2,127 @@
<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>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
// 定义 props // 定义 props
const props = defineProps({ const props = defineProps({
activeTab: { activeTab: {
type: Number, type: Number,
default: 0 default: 0
}, },
isExpanded: { isExpanded: {
type: Boolean, type: Boolean,
default: false default: false
} }
}); });
// 定义 emits // 定义 emits
const emit = defineEmits(['update:activeTab', 'update:isExpanded']); const emit = defineEmits(['update:activeTab', 'update:isExpanded']);
// 导航项配置 // 导航项配置
const navItems = [ const navItems = [
{ {
name: '搭子', name: '搭子',
icon: '/static/icon/dazi.png', icon: '/static/icon/dazi.png',
angle: 122 // 左上方 angle: 122, // 左上方
}, path: '/pages/ai-dazi/index'
{ },
name: '星册', {
icon: '/static/icon/starbook.png', name: '星册',
angle: 107 // 右上方 icon: '/static/icon/starbook.png',
}, angle: 107, // 右上方
{ path: '/pages/starbook/index'
name: '铸爱', },
icon: '/static/icon/castlove.png', {
angle: 90.01 // 正上方 name: '铸爱',
}, icon: '/static/icon/castlove.png',
{ angle: 90.01, // 正上方
name: '星城', path: '/pages/castlove/mall'
icon: '/static/icon/dressup.png', },
angle: 73 // 右方 {
}, name: '星城',
{ icon: '/static/icon/dressup.png',
name: '广场', angle: 73, // 右方
icon: '/static/icon/square.png', path: '/pages/starcity/index'
angle: 57 // 右下方 },
} {
]; name: '广场',
icon: '/static/icon/square.png',
// 扇形半径 angle: 57, // 右下方
const radius = 580; // rpx path: '/pages/square/square'
}
// 计算每个导航图标的位置 ];
const getNavIconStyle = (index) => {
if (!props.isExpanded) { // 检查当前页是否匹配导航项
// 未展开时，所有图标都在中心位置，透明且缩小 const isCurrentPage = (index) => {
return { const pages = getCurrentPages();
'--x': '0rpx', if (pages.length === 0) return false;
'--y': '0rpx', const currentPage = pages[pages.length - 1];
'--delay': '0s' const currentPath = '/' + currentPage.route;
}; return navItems[index]?.path === currentPath;
} };
const item = navItems[index]; // 扇形半径
const angle = item.angle; const radius = 580; // rpx
const radian = angle * Math.PI / 180;
const x = radius * Math.cos(radian); // 计算每个导航图标的位置
const y = -radius * Math.sin(radian); const getNavIconStyle = (index) => {
if (!props.isExpanded) {
// 添加延迟，形成序列动画效果 // 未展开时，所有图标都在中心位置，透明且缩小
const delay = index * 0.03;
return { return {
'--x': `${x}rpx`, '--x': '0rpx',
'--y': `${y}rpx`, '--y': '0rpx',
'--delay': `${delay}s` '--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 toggleExpand = () => {
}; emit('update:isExpanded', !props.isExpanded);
};
// 处理导航点击
const handleNavClick = (index) => { // 处理导航点击
// 触发事件，通知父组件切换 tab const handleNavClick = (index) => {
emit('update:activeTab', index); // 触发事件，通知父组件切换 tab
// 收起导航栏 emit('update:activeTab', index);
emit('update:isExpanded', false); // 收起导航栏
}; emit('update:isExpanded', false);
};
</script> </script>
<style scoped> <style scoped>
@ -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);
} }
@ -222,8 +219,8 @@
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
z-index: 5; z-index: 5;
transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.64, 1), transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.64, 1),
opacity 0.3s ease-out; opacity 0.3s ease-out;
transition-delay: var(--delay); transition-delay: var(--delay);
} }
@ -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;
} }
@ -255,16 +251,14 @@
opacity: 0.2; opacity: 0.2;
transform: scaleY(-1); transform: scaleY(-1);
filter: blur(4rpx); filter: blur(4rpx);
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%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
pointer-events: none; pointer-events: none;
} }
.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 {
@ -280,7 +274,7 @@
color: rgba(255, 255, 255, 0.98); color: rgba(255, 255, 255, 0.98);
font-weight: 500; font-weight: 500;
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4), 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; white-space: nowrap;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -289,7 +283,7 @@
color: #e6e6e6; color: #e6e6e6;
font-weight: bold; font-weight: bold;
text-shadow: 0 2rpx 12rpx rgba(255, 107, 157, 0.6), 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); transform: scale(1.05);
} }
</style> </style>

2
frontend/pages/square/components/BannerCarousel.vue
View File

@ -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"

10
frontend/pages/square/square.vue
View File

@ -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(() => {

BIN
frontend/static/AIimg/beijing.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 MiB

After

Width:  |  Height:  |  Size: 4.8 MiB