pray页面制作

enum/common.js

@@ -10,7 +10,9 @@ export const CommonEnum = {
     REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png", //刷新图标
     NAV_ARROW:"https://api.ccttiot.com/image-1754127104177.png", //导航箭头
     PHONE:"https://api.ccttiot.com/image-1754292810234.png",//电话图标
-    ADDRESS:"https://api.ccttiot.com/image-1754292905805.png"//地址图标
+    ADDRESS:"https://api.ccttiot.com/image-1754292905805.png",//地址图标
+    BUDDHA_BACKGROUND:"https://api.ccttiot.com/image-1754297645655.png",//佛像背景
+    CENSER:"https://api.ccttiot.com/image-1754297886734.png",//香炉
 
 };
 export default CommonEnum;

pages.json

@@ -136,6 +136,15 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/pray/pray",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
 		}
 	],
 

pages/basePage/basePage.vue

@@ -16,15 +16,11 @@
 </template>
 
 <script>
-import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
-import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
 import StatusDisplay from "../../components/status-display/status-display.vue";
 
 export default {
   components: {
-    CustomNavbar,
-    TileGrid,
     StatusDisplay
   },
   data() {
@@ -57,7 +53,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
   background: #F5F0E7;
 }

pages/pray/pray.vue

@@ -0,0 +1,123 @@
+<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>