<template>
  <view class="page">
    <view class="navbar-container">
      <custom-navbar title="在线祈福" />
    </view>
    <view class="background-container">
      <image class="background-image" :src="CommonEnum.BUDDHA_BACKGROUND" mode="aspectFit" />
    </view>
    <view class="header">
      <!-- 香炉图标 -->
      <view class="censer-container">
        <image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" />
      </view>
      <!-- 页面内容将在这里添加 -->

    </view>

  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";

export default {
  components: {
    CustomNavbar,
  },
  data() {
    return {
      CommonEnum,
      loading: false
    }
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData()
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true
      try {
        // TODO: 调用页面数据API
        // const response = await getPageData()
        // 模拟加载
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } catch (error) {
        console.error('获取页面数据失败:', error)
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #FFFBF5;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.navbar-container {
  background-color: #FAF8F3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
}

.background-container {
  position: fixed;
  top: -600rpx; /* 向上移动432rpx (312+120) */
  left: 0;
  width: 100%;
  height: calc(100vh + 432rpx); /* 增加高度以补偿向上移动的距离 */
  z-index: -1;
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 15rpx;
  padding-top: 120rpx; /* 为固定导航栏留出空间 */
  padding-bottom: 40rpx;
  z-index: 1;
}

.censer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 128rpx;
  margin-bottom: 60rpx;
}

.censer-icon {
  width: 648rpx;
  height: 648rpx;
  opacity: 0.8;
}
</style>