monk页面复用背景图片组件

This commit is contained in:
minimaxagent1 2025-07-31 14:44:31 +08:00
parent 8b8b519b8e
commit 05e0b00031

View File

@ -1,6 +1,6 @@
<template> <template>
<view class="page"> <view class="page">
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image> <base-background />
<!-- 使用自定义导航栏组件 --> <!-- 使用自定义导航栏组件 -->
<custom-navbar title="寺庙高僧" /> <custom-navbar title="寺庙高僧" />
<view class="header"> <view class="header">
@ -43,10 +43,12 @@
getMonkList getMonkList
} from '@/api/monk/monk.js' } from '@/api/monk/monk.js'
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue"; import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import BaseBackground from "../../components/base-background/base-background.vue";
export default { export default {
components: { components: {
CustomNavbar CustomNavbar,
BaseBackground
}, },
data() { data() {
return { return {
@ -126,16 +128,7 @@
position: relative; position: relative;
} }
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 16rpx;
/* 确保背景图不被导航栏遮挡 */
}
.searchBox { .searchBox {
display: flex; display: flex;