WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序导航栏设计

Browse Source
This commit is contained in:
minimaxagent1 2025-07-31 09:02:38 +08:00
parent 6c02ba4ea2
commit 5b555ddf90
3 changed files with 305 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
enum/common.js
View File

@ -1,6 +1,7 @@
export const CommonEnum = { export const CommonEnum = {
BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //返回的按钮图像 BACKGROUND: "https://api.ccttiot.com/image-1753769939853.png", //背景图片
RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png" RIGHT_CHEVRON:"https://api.ccttiot.com/image-1753773619878.png",
BACK_BUTTON:"https://api.ccttiot.com/image-1753868358514.png"
}; };
export default CommonEnum; export default CommonEnum;

418
pages/monk/monk.vue
View File

@ -1,233 +1,237 @@
<template> <template>
<view class="page"> <view class="page">
<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' <u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar"> title-size='36' height='36' id="navbar">
</u-navbar> </u-navbar>
<view class="header"> <container>
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image> <view class="header">
<view class='searchBox'> <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image> <view class='searchBox'>
<input <image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
class="search-input" <input
v-model="searchName" class="search-input"
placeholder="请输入高僧姓名" v-model="searchName"
placeholder-class="search-placeholder" placeholder="请输入高僧姓名"
@confirm="onSearch" placeholder-class="search-placeholder"
confirm-type="search" @confirm="onSearch"
/> confirm-type="search"
<view class="search-btn" @click="onSearch">搜索</view> />
</view> <view class="search-btn" @click="onSearch">搜索</view>
<view class="monk-list"> </view>
<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id"> <view class="monk-list">
<image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image> <view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
<view class="monk-info"> <image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
<view class="desc-row"> <view class="monk-info">
<view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view> <view class="desc-row">
<view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view> <view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view>
</view> <view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</container>
</view>
</template> </template>
<script> <script>
import { import {
CommonEnum CommonEnum
} from '@/enum/common.js' } from '@/enum/common.js'
import { import {
MonkEnum MonkEnum
} from '@/enum/monk.js' } from '@/enum/monk.js'
import { import {
getMonkList getMonkList
} from '@/api/monk/monk.js' } from '@/api/monk/monk.js'
export default { export default {
data() { data() {
return { return {
bgc: { bgc: {
backgroundColor: "#F5F0E7" backgroundColor: "#F5F0E7"
}, },
CommonEnum, CommonEnum,
MonkEnum, MonkEnum,
monkList: [], monkList: [],
searchName: '' searchName: ''
} }
}, },
onLoad() { onLoad() {
this.fetchMonkList() this.fetchMonkList()
}, },
methods: { methods: {
async fetchMonkList() { async fetchMonkList() {
try { try {
const res = await getMonkList({ name: this.searchName }) const res = await getMonkList({name: this.searchName})
if (res.code === 200 && Array.isArray(res.rows)) { if (res.code === 200 && Array.isArray(res.rows)) {
this.monkList = res.rows this.monkList = res.rows
} else { } else {
uni.showToast({ uni.showToast({
title: res.msg || '获取失败', title: res.msg || '获取失败',
icon: 'none' icon: 'none'
}) })
} }
} catch (e) { } catch (e) {
uni.showToast({ uni.showToast({
title: '网络错误', title: '网络错误',
icon: 'none' icon: 'none'
}) })
} }
}, },
onSearch() { onSearch() {
this.fetchMonkList() this.fetchMonkList()
}, },
// 去除 HTML 标签，返回纯文本 // 去除 HTML 标签，返回纯文本
stripHtmlTags(html) { stripHtmlTags(html) {
if (!html) return ''; // 处理空值 if (!html) return ''; // 处理空值
return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签 return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
}, },
goDetail(item) { goDetail(item) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/monk/monkDetail?id=${item.id}`, url: `/pages/monk/monkDetail?id=${item.id}`,
fail: (err) => { fail: (err) => {
console.error('跳转失败:', err); console.error('跳转失败:', err);
uni.showToast({ uni.showToast({
title: '页面跳转失败', title: '页面跳转失败',
icon: 'none' icon: 'none'
}); });
} }
}); });
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.page { .page {
width: 750rpx; position: relative;
min-height: 100vh; width: 750rpx;
background: #F5F0E7; min-height: 100vh;
border-radius: 0rpx 0rpx 0rpx 0rpx; background: #F5F0E7;
} border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
background-color: transparent; background-color: transparent;
margin: 20px 14px 40rpx 14px; margin: 20px 14px 40rpx 14px;
width: 694rpx; width: 694rpx;
border-radius: 16rpx; border-radius: 16rpx;
position: relative; position: relative;
} }
.background-image { .background-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: -1;
border-radius: 16rpx; border-radius: 16rpx;
} }
.searchBox { .searchBox {
display: flex; display: flex;
align-items: center; align-items: center;
width: 660rpx; width: 660rpx;
height: 70rpx; height: 70rpx;
background: #FFFBF5; background: #FFFBF5;
border-radius: 10rpx; border-radius: 10rpx;
border: 1rpx solid #C7A26D; border: 1rpx solid #C7A26D;
margin-top: 20rpx; margin-top: 20rpx;
padding: 0 12rpx; padding: 0 12rpx;
} }
.search-icon { .search-icon {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin: 0 28rpx; margin: 0 28rpx;
} }
.search-input { .search-input {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
height: 100%; height: 100%;
} }
.search-placeholder { .search-placeholder {
color: #bfa16b; color: #bfa16b;
font-size: 28rpx; font-size: 28rpx;
} }
.search-btn { .search-btn {
background: #bfa16b; background: #bfa16b;
color: #fff; color: #fff;
font-size: 26rpx; font-size: 26rpx;
border-radius: 6rpx; border-radius: 6rpx;
padding: 0 24rpx; padding: 0 24rpx;
height: 48rpx; height: 48rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 16rpx; margin-left: 16rpx;
} }
.monk-list { .monk-list {
width: 100%; width: 100%;
margin-top: 24rpx; margin-top: 24rpx;
} }
.monk-item { .monk-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
background: transparent; background: transparent;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
.monk-avatar { .monk-avatar {
width: 184rpx; width: 184rpx;
height: 184rpx; height: 184rpx;
background: #e5e5e5; background: #e5e5e5;
border-radius: 8rpx; border-radius: 8rpx;
margin-right: 18rpx; margin-right: 18rpx;
} }
.monk-info { .monk-info {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.desc-row { .desc-row {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
.monk-desc { .monk-desc {
line-height: 38rpx; line-height: 38rpx;
font-size: 28rpx; font-size: 28rpx;
color: #695347; color: #695347;
margin-top: 8rpx; margin-top: 8rpx;
word-break: break-all; word-break: break-all;
// 让内容最多显示4行，超出省略 // 让内容最多显示4行，超出省略
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.monk-detail { .monk-detail {
color: #bfa16b; color: #bfa16b;
font-size: 24rpx; font-size: 24rpx;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>

98
pages/walkInto/walkInto.vue
View File

@ -1,29 +1,65 @@
<template> <template>
<view class="page"> <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"> <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
</u-navbar> <view class="navbar-left" @click="goBack" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">
<view class="header"> <image :src="CommonEnum.BACK_BUTTON" mode="aspectFit" class="back-icon"></image>
</view>
<view class="navbar-title" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">走进平山</view>
<view class="navbar-right" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"></view>
</view>
<view class="header" :style="{ marginTop: navBarHeight + 'px' }">
<!-- <image src="" mode=""></image> --> <!-- <image src="" mode=""></image> -->
<view>111</view> <view>111222</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import CommonEnum from "../../enum/common";
export default { export default {
computed: {
CommonEnum() {
return CommonEnum
}
},
data() { data() {
return { return {
bgc: { bgc: {
backgroundColor: "#F5F0E7", backgroundColor: "#F5F0E7",
}, },
statusBarHeight: 0,
navBarHeight: 0,
menuButtonInfo: null,
capsuleHeight: 0,
} }
}, },
onLoad() { onLoad() {
this.getSystemInfo();
}, },
methods: { methods: {
goBack() {
uni.navigateBack({
delta: 1
});
},
getSystemInfo() {
// 获取系统信息
const systemInfo = uni.getSystemInfoSync();
// 获取状态栏高度
this.statusBarHeight = systemInfo.statusBarHeight;
// 获取胶囊按钮信息
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 计算胶囊高度
this.capsuleHeight = this.menuButtonInfo.height;
// 计算导航栏高度（胶囊底部到状态栏顶部的距离）
this.navBarHeight = this.menuButtonInfo.bottom + 8;
}
} }
} }
</script> </script>
@ -35,6 +71,54 @@ page {
background: #F5F0E7; background: #F5F0E7;
border-radius: 0rpx 0rpx 0rpx 0rpx; border-radius: 0rpx 0rpx 0rpx 0rpx;
} }
/* 自定义导航栏样式 */
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding-top: 0;
background-color: #F5F0E7;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 30rpx;
padding-right: 30rpx;
box-sizing: border-box;
}
.navbar-left {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
.back-icon {
width: 56rpx;
height: 56rpx;
}
}
.navbar-title {
font-size: 36rpx;
font-weight: bold;
color: #695347;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-right {
width: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.header { .header {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;