wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 添加移动端底部导航栏并优化布局样式

Browse Source
This commit is contained in:
wangqiao
2025-09-04 09:19:32 +08:00
parent 85c49890d1
commit 1a27904f23
1 changed files with 57 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
layouts/m.vue
View File

@ -1,121 +1,70 @@
<script setup lang="ts">
const active = ref('home')
</script>
<template>
<div class="m">
<slot />
<div class="scroll-container">
<slot />
</div>
<!-- 底部信息 -->
<div class="footer">
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</div>
</div>
</template>
<style lang="scss" scoped>
.m {
width: 100%;
height: 100%;
background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
/* 移动端样式重置 - 只在移动端布局中生效 */
.m {
/* 重置 body 的最小宽度限制 */
:global(body) {
min-width: unset !important;
width: 100% !important;
max-width: 100% !important;
/* 移动端样式重置 - 只在移动端布局中生效 */
.m {
display: flex;
flex-direction: column;
background-color: #f8f8f8;
}
/* 重置 #__nuxt 容器的样式 */
:global(#__nuxt) {
min-width: unset !important;
width: 100% !important;
max-width: 100% !important;
// .page-content {
// padding: 0 !important;
// overflow-x: hidden !important;
// .page-table-wrap {
// padding: 8px !important;
// }
// .page-card {
// padding: 8px !important;
// }
// }
}
/* 移动端优化滚动条 */
:global(::-webkit-scrollbar) {
width: 4px !important;
height: 4px !important;
}
/* 移动端表格优化 */
:global(.el-table) {
font-size: 12px !important;
th .cell {
font-size: 12px !important;
.scroll-container {
// flex: 1;
overflow-y: auto;
height: calc(100vh - 40px);
}
td .cell {
font-size: 12px !important;
.footer {
height: auto;
}
/* 重置 body 的最小宽度限制 */
:global(body) {
min-width: unset !important;
width: 100% !important;
max-width: 100% !important;
background-color: #f8f8f8;
}
/* 重置 #__nuxt 容器的样式 */
:global(#__nuxt) {
min-width: unset !important;
width: 100% !important;
max-width: 100% !important;
// .page-content {
// padding: 0 !important;
// overflow-x: hidden !important;
// .page-table-wrap {
// padding: 8px !important;
// }
// .page-card {
// padding: 8px !important;
// }
// }
}
/* 移动端优化滚动条 */
:global(::-webkit-scrollbar) {
width: 4px !important;
height: 4px !important;
}
}
/* 移动端按钮优化 */
:global(.el-button) {
padding: 6px 8px !important;
font-size: 13px !important;
}
/* 移动端表单优化 */
:global(.el-form-item) {
margin-bottom: 12px !important;
}
:global(.el-form-item__label) {
font-size: 13px !important;
}
:global(.el-input__inner) {
height: 32px !important;
font-size: 13px !important;
}
/* 移动端对话框优化 */
:global(.el-dialog) {
width: 95% !important;
margin: 0 auto !important;
}
:global(.el-dialog__body) {
padding: 12px !important;
max-height: calc(100vh - 200px) !important;
}
/* 移动端分页器优化 */
:global(.el-pagination) {
--el-pagination-font-size: 11px !important;
--el-pagination-font-size-small: 11px !important;
--el-pagination-button-height: 24px !important;
--el-pagination-button-width: 24px !important;
--el-pagination-button-height-small: 24px !important;
--el-pagination-button-width-small: 24px !important;
}
/* 移动端标签页优化 */
:global(.el-tabs__item) {
padding: 0 12px 6px 0 !important;
font-size: 13px !important;
}
/* 移动端徽章优化 */
:global(.el-badge) {
--el-badge-size: 14px !important;
--el-badge-padding: 3px !important;
}
}
</style>
</style>