cr
/
fjrcloud-community-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复渐变背景定位问题

main
cr 2026-04-25 22:10:33 +08:00
parent 8bac945106
commit 0ab1535f7f
6 changed files with 70 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/sub/activity/list.vue
View File

@ -178,15 +178,15 @@ function handleFloatBtn() {
position: relative; position: relative;
} }
/* 渐变背景装饰 - 覆盖导航栏到内容区 */ /* 渐变背景装饰 */
.gradient-bg { .gradient-bg {
position: absolute; position: absolute;
top: -176rpx; /* 向上延伸覆盖inner-navbar */ top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: calc(100% + 176rpx); height: 100%;
background: linear-gradient(180deg, #F8EDE8 0%, #FFFFFF 30%); background: linear-gradient(180deg, #F8EDE8 0%, #FFFFFF 30%);
z-index: -1; /* 在内容层下方 */ z-index: -1;
} }
/* 固定头部区域 */ /* 固定头部区域 */

33
pages/sub/community/dynamics-detail.vue
View File

@ -1,11 +1,12 @@
<!-- 社区动态详情页 --> <!-- 社区动态详情页 -->
<template> <template>
<s-layout title="社区动态" navbar="inner" color="#333333"> <s-layout title="社区动态" color="#333333">
<!-- 渐变背景 --> <view class="detail-page">
<view class="gradient-bg"></view> <!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- 固定头部区域（标题+发布信息） --> <!-- 固定头部区域（标题+发布信息） -->
<view class="detail-header"> <view class="detail-header" :style="{ top: navbarHeight + 'px' }">
<view class="header-inner"> <view class="header-inner">
<!-- 标题 --> <!-- 标题 -->
<view class="detail-title"> <view class="detail-title">
@ -33,6 +34,7 @@
<!-- 底部占位 --> <!-- 底部占位 -->
<view class="bottom-placeholder"></view> <view class="bottom-placeholder"></view>
</scroll-view> </scroll-view>
</view>
</s-layout> </s-layout>
</template> </template>
@ -55,6 +57,9 @@ const scrollHeight = ref(0);
// 滚动区域距离顶部距离 // 滚动区域距离顶部距离
const scrollTop = ref(0); const scrollTop = ref(0);
// 导航栏高度（px），用于固定头部避开导航栏
const navbarHeight = sheep.$platform.navbar;
// 页面加载 // 页面加载
onLoad((options) => { onLoad((options) => {
if (options.id) { if (options.id) {
@ -69,13 +74,14 @@ const calcScrollHeight = () => {
const sysInfo = uni.getSystemInfoSync(); const sysInfo = uni.getSystemInfoSync();
const query = uni.createSelectorQuery().in(instance); const query = uni.createSelectorQuery().in(instance);
// 获取头部区域高度和位置 // 获取头部区域高度
query.select('.detail-header').boundingClientRect(); query.select('.detail-header').boundingClientRect();
query.exec((res) => { query.exec((res) => {
const headerRect = res[0]; const headerRect = res[0];
if (headerRect) { if (headerRect) {
const safeBottom = sysInfo.safeAreaInsets?.bottom || 0; const safeBottom = sysInfo.safeAreaInsets?.bottom || 0;
scrollTop.value = headerRect.height + headerRect.top; // scroll-view 顶部 = 导航栏高度 + 头部高度，不再依赖 headerRect.top（fixed 元素在不同平台表现不一致）
scrollTop.value = navbarHeight + headerRect.height;
scrollHeight.value = sysInfo.windowHeight - scrollTop.value - safeBottom; scrollHeight.value = sysInfo.windowHeight - scrollTop.value - safeBottom;
} }
}); });
@ -99,15 +105,24 @@ async function loadDetail(id) {
content: data.content || '', content: data.content || '',
}; };
setTimeout(calcScrollHeight, 100); // 等 Vue DOM 更新完成后再计算高度，避免网络延迟导致拿到旧尺寸
nextTick(() => {
calcScrollHeight();
});
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 页面容器 */
.detail-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */ /* 渐变背景 */
.gradient-bg { .gradient-bg {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 750rpx; width: 750rpx;

11
pages/sub/community/dynamics.vue
View File

@ -1,10 +1,9 @@
<!-- 社区动态页面 --> <!-- 社区动态页面 -->
<template> <template>
<s-layout title="社区动态" navbar="inner" color="#333333"> <s-layout title="社区动态" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<view class="community-dynamics-page"> <view class="community-dynamics-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- Tab 切换栏 --> <!-- Tab 切换栏 -->
<view class="tab-bar"> <view class="tab-bar">
<view <view
@ -190,10 +189,10 @@ function goDetail(item) {
<style lang="scss" scoped> <style lang="scss" scoped>
/* 渐变背景 */ /* 渐变背景 */
.gradient-bg { .gradient-bg {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 750rpx; width: 100%;
height: 660rpx; height: 660rpx;
background: linear-gradient(180deg, #F8EDE8 0%, #F5F5F5 50%); background: linear-gradient(180deg, #F8EDE8 0%, #F5F5F5 50%);
z-index: 0; z-index: 0;

21
pages/sub/knowledge/classroom.vue
View File

@ -1,10 +1,9 @@
<!-- 知识课堂页面 --> <!-- 知识课堂页面 -->
<template> <template>
<s-layout title="知识课堂" navbar="inner" color="#333333"> <s-layout title="知识课堂" color="#333333">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<view class="knowledge-classroom-page"> <view class="knowledge-classroom-page">
<!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- Tab 切换栏 --> <!-- Tab 切换栏 -->
<view class="tab-bar"> <view class="tab-bar">
<view <view
@ -198,9 +197,15 @@ function goDetail(item) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 页面容器 */
.knowledge-classroom-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */ /* 渐变背景 */
.gradient-bg { .gradient-bg {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 750rpx; width: 750rpx;
@ -210,12 +215,6 @@ function goDetail(item) {
pointer-events: none; pointer-events: none;
} }
/* 页面容器 */
.knowledge-classroom-page {
position: relative;
z-index: 1;
}
/* Tab 切换栏 */ /* Tab 切换栏 */
.tab-bar { .tab-bar {
display: flex; display: flex;

19
pages/sub/knowledge/detail.vue
View File

@ -1,10 +1,11 @@
<!-- 知识课堂详情页 --> <!-- 知识课堂详情页 -->
<template> <template>
<s-layout title="知识课堂" navbar="inner" color="#333333"> <s-layout title="知识课堂" color="#333333">
<!-- 渐变背景 --> <view class="detail-page">
<view class="gradient-bg"></view> <!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- 固定头部区域（标题+发布信息） --> <!-- 固定头部区域（标题+发布信息） -->
<view class="detail-header"> <view class="detail-header">
<view class="header-inner"> <view class="header-inner">
<!-- 标题 --> <!-- 标题 -->
@ -33,6 +34,7 @@
<!-- 底部占位 --> <!-- 底部占位 -->
<view class="bottom-placeholder"></view> <view class="bottom-placeholder"></view>
</scroll-view> </scroll-view>
</view>
</s-layout> </s-layout>
</template> </template>
@ -103,9 +105,15 @@ async function loadDetail(id) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 页面容器 */
.detail-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */ /* 渐变背景 */
.gradient-bg { .gradient-bg {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 750rpx; width: 750rpx;
@ -179,7 +187,6 @@ async function loadDetail(id) {
/* 内容卡片 */ /* 内容卡片 */
.content-card { .content-card {
background-color: #FFF8F0;
border-radius: 24rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
margin: 0 32rpx; margin: 0 32rpx;

24
pages/sub/notice/detail.vue
View File

@ -1,10 +1,11 @@
<!-- 通知公告详情页 --> <!-- 通知公告详情页 -->
<template> <template>
<s-layout title="通知公告" navbar="inner" color="#333333"> <s-layout title="通知公告" color="#333333">
<!-- 渐变背景 --> <view class="detail-page">
<view class="gradient-bg"></view> <!-- 渐变背景 -->
<view class="gradient-bg"></view>
<!-- 固定头部区域 --> <!-- 固定头部区域 -->
<view class="detail-header"> <view class="detail-header">
<view class="header-inner"> <view class="header-inner">
<!-- 文章标题 --> <!-- 文章标题 -->
@ -54,6 +55,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</s-layout> </s-layout>
</template> </template>
@ -246,9 +248,15 @@ function downloadAttachment(item) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 页面容器 */
.detail-page {
position: relative;
z-index: 1;
}
/* 渐变背景 */ /* 渐变背景 */
.gradient-bg { .gradient-bg {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 750rpx; width: 750rpx;
@ -258,12 +266,6 @@ function downloadAttachment(item) {
pointer-events: none; pointer-events: none;
} }
/* 页面容器 */
.notice-detail-page {
position: relative;
z-index: 1;
}
/* 固定头部区域（标题+发布信息） */ /* 固定头部区域（标题+发布信息） */
.detail-header { .detail-header {
position: fixed; position: fixed;