rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify ui

Browse Source
This commit is contained in:
Rogee
2025-05-14 17:42:44 +08:00
parent 2f8f7c6072
commit a8a41b8382
9 changed files with 352 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/wechat/src/layouts/MainLayout.vue
View File

@@ -22,22 +22,26 @@ const switchTab = (index, route) => {
<div class="h-screen flex flex-col bg-gray-50">
<div class="flex-1 overflow-hidden">
<router-view v-slot="{ Component }">
<keep-alive>
<transition name="fade" mode="out-in">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</div>
<nav class="flex-none bg-white border-t border-gray-200">
<div class="flex justify-around items-center h-14">
<div v-for="(tab, index) in tabs" :key="index"
class="flex flex-col items-center justify-center w-full h-full py-1 focus:outline-none" :class="[
<nav class="flex-none bg-white border-t border-gray-200 shadow-[0_-1px_3px_rgba(0,0,0,0.05)]">
<div class="flex justify-around items-center h-14 max-w-[480px] mx-auto px-2">
<div v-for="(tab, index) in tabs"
:key="index"
class="flex flex-col items-center justify-center w-full h-full py-1 select-none"
:class="[
activeTab === index
? 'text-blue-600'
: 'text-gray-600 hover:text-blue-600 active:text-blue-700'
]" @click="switchTab(index, tab.route)">
<component :is="tab.icon" class="w-6 h-6" />
<span class="mt-1 text-xs">{{ tab.label }}</span>
? 'text-primary-600'
: 'text-gray-500 hover:text-primary-500 active:text-primary-700'
]"
@click="switchTab(index, tab.route)">
<component :is="tab.icon"
class="w-6 h-6 transition-colors duration-200" />
<span class="mt-1 text-xs font-medium">{{ tab.label }}</span>
</div>
</div>
</nav>
@@ -45,5 +49,13 @@ const switchTab = (index, route) => {
</template>
<style scoped>
/* Remove all existing styles */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>