<template>
  <div class="model"></div>
  <div class="common-layout">
    <!-- title 标题和搜索栏 -->
    <header class="header">
      <van-nav-bar
        class=""
        :title="$route.meta.title"
        left-arrow
        safe-area-inset-top
        :border="false"
        @click-left="goBack"
      >
        <template #left>
          <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #000" />
        </template>
      </van-nav-bar>
    </header>
    <!-- content -->
    <div class="layout-body">
      <RouterView />
    </div>
  </div>
</template>

<script setup>
import { RouterView, useRouter, useRoute } from 'vue-router';
import appBridge from '@/assets/js/appBridge';
const route = useRoute();
const router = useRouter();

function goBack() {
  if (window.history.length > 1 && route.name !== 'home') {
    router.go(-1);
  } else {
    appBridge.navigateBack();
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/css/main';
.model {
  width: 100%;
  height: 100vh;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);

  z-index: -2;
}
.common-layout {
  overflow: hidden;
  height: 100vh;
  position: relative;
  //z-index:-2;
  //background-size: contain; /* 或者使用具体的尺寸，如 100% 100% */
  //background-position: center; /* 确保图片居中显示 */
  background-repeat: no-repeat;
  background-image: url('@/assets/img/home/home-pen.png');

  color: #333;
}

.van-nav-bar {
  //background-color: transparent;
  background-image: url('@/assets/img/home/home-pen.png');
}

.layout-body {
  overflow: scroll;
  height: calc(100vh - var(--sticky-top-height) - 5px);
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;

  //background-color: #a5d380;

  //background-image: url('@/assets/img/home/home-pen.png');
  .title {
    display: flex;
    align-items: end;
    justify-content: center;
  }

  .back-icon {
    width: 18px;
    height: 18px;
  }
}
</style>
