fjjgpt/src/layout/index.vue

<template>
  <div :style="{ '--current-color': theme }" class="app-wrapper">
    <van-nav-bar :title="route.meta.title || '福建水利监管工作平台'" />
    <!-- 展示页 -->
    <app-main />
    <!-- 底部 -->
    <bottom-nav />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AppMain, BottomNav } from '@/layout/components/index.js'
import { useRoute } from "vue-router";
const route = useRoute()

const theme = ref(localStorage.getItem('theme'))

</script>
<style lang="scss" scoped>
.app-wrapper {
  height: 100%;
  width: 100%;
  position: relative;

  .app-main {
    position: absolute;
    top: 46px;
    left: 0;
    width: 100%;
    height: calc(100% - 102.8px);
    background-color: #ebecf0;
  }

}
</style>
<style>
.app-wrapper .van-nav-bar__content {
  background-color: #007BFF;
}
</style>