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