lihanqi/cpzs-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新项目代码：新增彩种模块、组件优化、管理后台功能完善

Browse Source
This commit is contained in:
lihanqi
2026-02-13 17:43:41 +08:00
parent d395295aa0
commit 3d7358079a
146 changed files with 48171 additions and 8804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
lottery-app/src/components/BottomNavigation.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<nav class="bottom-nav">
<router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">
<div class="nav-icon">
<img :src="$route.path === '/' ? '/assets/bottom/home-1.svg' : '/assets/bottom/home-0.svg'" alt="首页" class="nav-icon-img" />
</div>
<div class="nav-text">首页</div>
</router-link>
<div class="nav-item" @click="handleDiscoveryClick">
<div class="nav-icon">
<img src="/assets/bottom/faxian-0.svg" alt="交流" class="nav-icon-img" />
</div>
<div class="nav-text">交流</div>
</div>
<router-link to="/lottery-info" class="nav-item" :class="{ active: $route.path === '/lottery-info' }">
<div class="nav-icon">
<img :src="$route.path === '/lottery-info' ? '/assets/bottom/kaijiang-1.svg' : '/assets/bottom/kaijiang-0.svg'" alt="开奖" class="nav-icon-img" />
</div>
<div class="nav-text">开奖</div>
</router-link>
<router-link to="/data-analysis" class="nav-item" :class="{ active: $route.path === '/data-analysis' }">
<div class="nav-icon">
<img :src="$route.path === '/data-analysis' ? '/assets/bottom/tuice-1.svg' : '/assets/bottom/tuice-0.svg'" alt="分析" class="nav-icon-img" />
</div>
<div class="nav-text">分析</div>
</router-link>
<router-link to="/profile" class="nav-item" :class="{ active: $route.path === '/profile' }">
<div class="nav-icon">
<img :src="$route.path === '/profile' ? '/assets/bottom/wode-1.svg' : '/assets/bottom/wode-0.svg'" alt="我的" class="nav-icon-img" />
</div>
<div class="nav-text">我的</div>
</router-link>
</nav>
</template>
<script>
export default {
name: 'BottomNavigation',
methods: {
handleDiscoveryClick() {
// 触发自定义事件通知父组件
this.$emit('discovery-click')
}
}
}
</script>
<style scoped>
/* 底部导航栏 */
.bottom-nav {
height: 70px;
background: white;
display: flex;
align-items: center;
justify-content: space-around;
border-top: 1px solid #f0f0f0;
z-index: 1000;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: 850px;
margin: 0 auto;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #8a8a8a;
transition: all 0.3s ease;
padding: 4px 8px;
min-width: 60px;
position: relative;
border-radius: 8px;
cursor: pointer;
}
.nav-item:hover {
color: #ff6b35;
background: rgba(255, 107, 53, 0.05);
}
.nav-item:hover .nav-icon-img {
transform: scale(1.05);
}
.nav-item.active {
color: #ff6b35;
background: rgba(255, 107, 53, 0.1);
}
.nav-item.active .nav-text {
color: #ff6b35;
font-weight: 600;
}
.nav-icon {
margin-bottom: 4px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.nav-icon-img {
width: 24px;
height: 24px;
object-fit: contain;
transition: all 0.3s ease;
}
.nav-text {
font-size: 11px;
font-weight: 500;
text-align: center;
transition: all 0.3s ease;
line-height: 1;
}
/* 移动端适配 */
@media (max-width: 768px) {
.bottom-nav {
height: 65px;
max-width: 100%;
left: 15px;
right: 15px;
border-radius: 0 0 8px 8px;
}
.nav-item {
padding: 3px 6px;
min-width: 55px;
}
.nav-icon {
width: 28px;
height: 28px;
margin-bottom: 3px;
}
.nav-icon-img {
width: 22px;
height: 22px;
}
.nav-text {
font-size: 10px;
}
}
@media (max-width: 480px) {
.bottom-nav {
height: 60px;
max-width: 100%;
left: 0;
right: 0;
border-radius: 0;
}
.nav-item {
padding: 2px 4px;
min-width: 50px;
}
.nav-icon {
width: 26px;
height: 26px;
margin-bottom: 2px;
}
.nav-icon-img {
width: 20px;
height: 20px;
}
.nav-text {
font-size: 9px;
}
}
</style>