71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const active = ref('home')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="m">
|
|
<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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #f8f8f8;
|
|
.scroll-container {
|
|
// flex: 1;
|
|
overflow-y: auto;
|
|
height: calc(100vh - 40px);
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|