187 lines
3.9 KiB
Vue
187 lines
3.9 KiB
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.viewCount || 0 }}次浏览</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>
|
||
|
||
<!-- 富文本内容 - 滚动区域 -->
|
||
<scroll-view class="content-scroll" scroll-y>
|
||
<view class="content-card">
|
||
<view class="content-inner">
|
||
<mp-html :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 KnowledgeApi from '@/sheep/api/community/knowledge';
|
||
import sheep from '@/sheep';
|
||
|
||
// 详情数据
|
||
const detailInfo = ref({
|
||
title: '',
|
||
viewCount: '',
|
||
publishDate: '',
|
||
content: '',
|
||
});
|
||
|
||
// 页面加载
|
||
onLoad((options) => {
|
||
if (options.id) {
|
||
loadDetail(options.id);
|
||
}
|
||
});
|
||
|
||
// 加载详情
|
||
async function loadDetail(id) {
|
||
const { code, data } = await KnowledgeApi.getDetail(id);
|
||
if (code === 0 && data) {
|
||
detailInfo.value = {
|
||
title: data.title || '',
|
||
viewCount: data.viewCount || '',
|
||
publishDate: data.createTime || '',
|
||
content: data.content || '',
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 页面容器：纵向 flex 布局，减去导航栏高度 */
|
||
.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;
|
||
margin: 0 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;
|
||
}
|
||
}
|
||
|
||
/* 底部占位：基础间距 + 安全区域 */
|
||
.bottom-placeholder {
|
||
height: calc(40rpx + env(safe-area-inset-bottom));
|
||
}
|
||
</style>
|