fjrcloud-community-app/pages/sub/community/dynamics-detail.vue

<!-- 社区动态详情页 -->
<template>
  <s-layout title="社区动态" color="#333333">
    <view class="detail-page">
      <!-- 渐变背景 -->
      <view class="gradient-bg"></view>

      <!-- 头部区域（标题+发布信息）-->
      <view class="detail-header">
        <view class="header-inner">
          <!-- 标题 -->
          <view class="detail-title">
            <text class="title-text">{{ detailInfo.title }}</text>
          </view>

          <!-- 发布信息 -->
          <view class="publish-info">
            <text class="community-name">{{ detailInfo.communityName }}</text>
            <text class="publish-date">{{ detailInfo.publishDate ? sheep.$helper.timeFormat(detailInfo.publishDate, 'yyyy年mm月dd日 hh:MM') : '' }}</text>
          </view>

          <!-- 分割线 -->
          <view class="divider"></view>
        </view>
      </view>

      <!-- 富文本内容 - calc 计算高度滚动区域 -->
      <scroll-view class="content-scroll" scroll-y>
        <view class="content-card">
          <view class="content-inner">
            <mp-html :content="detailInfo.content+detailInfo.content"></mp-html>
          </view>
        </view>
        <!-- 底部占位 -->
        <view class="bottom-placeholder"></view>
      </scroll-view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import DynamicsApi from '@/sheep/api/community/dynamics';
import sheep from '@/sheep';

// 详情数据
const detailInfo = ref({
  title: '',
  communityName: '',
  publishDate: '',
  content: '',
});

// 页面加载
onLoad((options) => {
  if (options.id) {
    loadDetail(options.id);
  }
});

// 加载详情
async function loadDetail(id) {
  const { code, data } = await DynamicsApi.getDetail(id);
  if (code === 0 && data) {
    const communityName = data.author || '';

    detailInfo.value = {
      title: data.title || '',
      communityName,
      publishDate: data.publishTime || '',
      content: data.content || '',
    };
  }
}
</script>

<style lang="scss" scoped>
/* 页面容器：纵向 flex 布局，减去导航栏高度 176rpx */
.detail-page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 176rpx);
  overflow: hidden;
}

/* 渐变背景 */
.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 660rpx;
  background: linear-gradient(180deg, #F8EDE8 0%, #F5F5F5 50%);
  z-index: 0;
  pointer-events: none;
}

/* 头部区域：正常文档流，不参与滚动 */
.detail-header {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.header-inner {
  padding: 0 32rpx;
}

/* 文章标题 */
.detail-title {
  padding: 32rpx 0 24rpx;

  .title-text {
    font-size: 40rpx;
    font-weight: 600;
    color: #333333;
    line-height: 1.5;
    font-family: 'PingFang SC', sans-serif;
  }
}

/* 发布信息 */
.publish-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding-bottom: 24rpx;
  justify-content: space-between;


  .community-name {
    font-size: 28rpx;
    color: #666666;
    font-family: 'PingFang SC', sans-serif;
  }

  .publish-date {
    font-size: 26rpx;
    color: #999999;
    font-family: 'PingFang SC', sans-serif;
  }
}

/* 分割线 */
.divider {
  height: 1rpx;
  background-color: #E5E5E5;
  margin-bottom: 32rpx;
}

/* 内容滚动区域：flex:1 占满头部剩余空间，height:0 是小程序 scroll-view 配合 flex 的关键 */
.content-scroll {
  position: relative;
  z-index: 5;
  flex: 1;
  height: 0;
}

/* 内容卡片 */
.content-card {
  border-radius: 24rpx;
  padding: 32rpx;
}

/* 富文本内容 */
.content-inner {
  :deep(p) {
    font-size: 30rpx;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 24rpx;
    font-family: 'PingFang SC', sans-serif;
  }

  :deep(img) {
    width: 100%;
    border-radius: 16rpx;
    margin: 16rpx 0;
  }
}

/* 底部占位：40rpx 基础间距 + 安全区域 */
.bottom-placeholder {
  height: calc(40rpx + env(safe-area-inset-bottom));
}
</style>