1、首页的活动列表的详情的活动简介的展开和收起

2、我发布的活动详情的活动简介的展开和收起

packageA/center/detail.vue

@@ -110,8 +110,7 @@
 						<image class="icons" src="/static/detail/xiangqing.png"></image>
 					</span>
 				</view>
-				<view class="third-center" :style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden',margin: '0 auto',paddingBottom: '0'}">
+				<!-- <view class="third-center" :style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden',margin: '0 auto',paddingBottom: '0'}">
-					<!-- <view></view> -->
 					<view class="v_html">
 						<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
 					</view>
@@ -126,10 +125,31 @@
 						position: sticky; bottom: -16px; background: #fff; height: 50rpx;padding: 30rpx 0;">收起
 						<u-icon name="arrow-up" color="#323232"></u-icon>
 					</view>
-
+				</view> -->
-
+				<view class="third-center1" ref="richTextContainer" v-if="!showToggleButtons" style="height: auto;">
-
+					<view class="v_html">
+						<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
 					</view>
+				</view>
+				<view class="third-center" v-if="showToggleButtons"
+					:style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden', margin: '0 auto', paddingBottom: '0' }"
+					ref="richTextContainer">
+					<view class="v_html">
+						<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
+					</view>
+					<!-- 仅当内容高度超过容器高度时显示展开/收起按钮 -->
+					<view v-if="!richTextShow" @click="richTextShow = true" style="width: 100%; display: flex; align-items: center; justify-content: center;
+				                   position: sticky; bottom: 0; background: #fff; height: 50rpx; padding: 30rpx 0;">
+						展开
+						<u-icon name="arrow-down" color="#323232"></u-icon>
+					</view>
+					<view v-if="richTextShow" @click="richTextShow = false" style="width: 100%; display: flex; align-items: center; justify-content: center;
+				                   position: sticky; bottom: -16px; background: #fff; height: 50rpx; padding: 30rpx 0;">
+						收起
+						<u-icon name="arrow-up" color="#323232"></u-icon>
+					</view>
+				</view>
+				
 				<view class="third-center" style="padding-top: 0;">
 					<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
 					</image>
@@ -369,6 +389,7 @@
 		data() {
 			return {
 				richTextShow: false,
+				showToggleButtons: false, // 控制是否显示展开/收起按钮
 				qunShow: false,
 				height_sw: '580rpx',
 				style: {
@@ -456,8 +477,24 @@
 			// this.getTime()
 			this.getShare()
 		},
-
+		mounted() {
+			this.checkContentHeight();
+		},
+		updated() {
+			this.checkContentHeight();
+		},
 		methods: {
+			checkContentHeight() {
+				// 使用 uni.createSelectorQuery 获取富文本容器的高度
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.v_html').boundingClientRect(data => {
+					if (data && data.height > 300) { // 300px 是容器的固定高度
+						this.showToggleButtons = true;
+					} else {
+						this.showToggleButtons = false;
+					}
+				}).exec();
+			},
 			swiperImg(index) {
 				uni.previewImage({
 					current: index,
@@ -1264,6 +1301,21 @@
 			}
 		}
 		
+		.third-center1 {
+			padding: 30rpx;
+			overflow: hidden;
+		
+			.v_html {
+				font-size: 34rpx;
+				line-height: 44rpx;
+			}
+		
+			.imgs {
+				width: 690rpx;
+				display: block;
+			}
+		}
+
 		.imgs {
 			display: block;
 			width: 690rpx;

packageA/center/detailSys.vue

@@ -160,14 +160,43 @@
 						<image class="icons" src="/static/detail/xiangqing.png"></image>
 					</span>
 				</view>
-				<view class="third-center">
+				<!-- <view class="third-center">
 					<view class="v_html">
 						<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
 					</view>
 					<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
 					</image>
+				</view> -->
+				<view class="third-center1" ref="richTextContainer" v-if="!showToggleButtons" style="height: auto;">
+					<view class="v_html">
+						<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
 					</view>
 				</view>
+				<view class="third-center" v-if="showToggleButtons"
+					:style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden', margin: '0 auto', paddingBottom: '0' }"
+					ref="richTextContainer">
+					<view class="v_html">
+						<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
+					</view>
+					<!-- 仅当内容高度超过容器高度时显示展开/收起按钮 -->
+					<view v-if="!richTextShow" @click="richTextShow = true" style="width: 100%; display: flex; align-items: center; justify-content: center;
+				                   position: sticky; bottom: 0; background: #fff; height: 50rpx; padding: 30rpx 0;">
+						展开
+						<u-icon name="arrow-down" color="#323232"></u-icon>
+					</view>
+					<view v-if="richTextShow" @click="richTextShow = false" style="width: 100%; display: flex; align-items: center; justify-content: center;
+				                   position: sticky; bottom: -16px; background: #fff; height: 50rpx; padding: 30rpx 0;">
+						收起
+						<u-icon name="arrow-up" color="#323232"></u-icon>
+					</view>
+				</view>
+
+				<view class="third-center" style="padding-top: 0;">
+					<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
+					</image>
+				</view>
+
+			</view>
 
 
 			<view class="footer" style="display: flex;align-items: center;;justify-content: space-between;gap: 30rpx;">
@@ -313,6 +342,8 @@
 
 		data() {
 			return {
+				richTextShow: false,
+				showToggleButtons: false, // 控制是否显示展开/收起按钮
 				style: {
 					// 字符串的形式
 					img: 'width: 100%'
@@ -395,8 +426,24 @@
 			this.getPeople()
 			this.getShare()
 		},
-
+		mounted() {
+			this.checkContentHeight();
+		},
+		updated() {
+			this.checkContentHeight();
+		},
 		methods: {
+			checkContentHeight() {
+				// 使用 uni.createSelectorQuery 获取富文本容器的高度
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.v_html').boundingClientRect(data => {
+					if (data && data.height > 300) { // 300px 是容器的固定高度
+						this.showToggleButtons = true;
+					} else {
+						this.showToggleButtons = false;
+					}
+				}).exec();
+			},
 			swiperImg(index) {
 				uni.previewImage({
 					current: index,
@@ -1184,6 +1231,21 @@
 			}
 		}
 
+		.third-center1 {
+			padding: 30rpx;
+			overflow: hidden;
+
+			.v_html {
+				font-size: 34rpx;
+				line-height: 44rpx;
+			}
+
+			.imgs {
+				width: 690rpx;
+				display: block;
+			}
+		}
+
 		.third-center-gro {
 			margin-top: 28rpx;
 			width: auto;
@@ -1691,6 +1753,7 @@
 			align-items: center;
 		}
 	}
+
 	.footer-right-no {
 		margin: 0 auto;
 		width: 100%;