fjjgpt/src/layout/index.vue

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

const router = useRouter();
const route = useRoute();

const theme = ref(localStorage.getItem("theme"));
const showBackButton = computed(() => route.meta.showBack);

function back() {
  router.go(-1);
}
</script>
<style lang="scss" scoped>
.app-wrapper {
  height: 100%;
  width: 100%;
  position: relative;

  .app-main {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ebecf0;
  }
}
</style>
<style>
.app-wrapper .van-nav-bar__content {
  background-color: #007bff;
}
.app-wrapper .van-nav-bar__title {
  color: #fff;
}
.app-wrapper .van-nav-bar .van-icon {
  color: #fff;
}
</style>