buddhism/pages/Monk/Monk.vue
2025-07-29 15:14:31 +08:00

104 lines
1.8 KiB
Vue

<template>
<view class="page">
<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar">
</u-navbar>
<view class="container">
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<view class='searchBox'>
<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
<text class="search-text">张姗姗</text>
<view class="search-btn">搜索</view>
</view>
</view>
</view>
</template>
<script>
import {
CommonEnum
} from '@/enum/common.js';
import { MonkEnum } from '@/enum/monk.js'
export default {
data() {
return {
bgc: {
backgroundColor: "#F5F0E7",
},
CommonEnum,
MonkEnum
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
page {
width: 750rpx;
height: 2492rpx;
background: #F5F0E7;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.container {
display: flex;
justify-content: center;
min-height: 100vh;
background-color: transparent;
width: 750rpx;
position: relative;
}
.searchBox {
display: flex;
align-items: center;
width: 660rpx;
height: 70rpx;
background: #FFFBF5;
border-radius: 10rpx;
border: 1rpx solid #C7A26D;
margin-top: 20rpx;
padding: 0 12rpx;
}
.search-icon {
width: 32rpx;
height: 32rpx;
margin: 0 16rpx 0 0;
}
.search-text {
flex: 1;
font-size: 28rpx;
color: #bfa16b;
}
.search-btn {
background: #bfa16b;
color: #fff;
font-size: 26rpx;
border-radius: 6rpx;
padding: 0 24rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 16rpx;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 16rpx;
}
</style>