限制富文本图像大小

pages/future/future.vue

@@ -14,7 +14,10 @@
         <text class="planTitle">用善意，筑就明天的模样</text>
         <text class="proProfile">{{ projectDetails.proProfile }}</text>
         <text class="introduce">项目介绍</text>
-        <rich-text :nodes="projectDetails.proIntroduce"></rich-text>
+        <rich-text
+          :nodes="formatRichText(projectDetails.proIntroduce)"
+          class="rich-text-content"
+        ></rich-text>
         <view class="donorContainer">
           <text>项目筹款情况</text>
           <view class="donorData">
@@ -166,18 +169,10 @@ export default {
             icon: "none",
           });
         }
-
         // 处理项目进度数据
         if (scheduleResponse?.code === 200) {
-          // 注意：这里应该是合并数据还是替换数据？
+          console.log("123:", scheduleResponse.rows);
-          // 方案1：直接赋值（如果只需要进度数据）
+          this.listData = scheduleResponse.rows;
-          this.scheduleData = scheduleResponse.rows;
-
-          // 方案2：合并到projectDetails（如果需要合并）
-          // this.projectDetails = {
-          //   ...this.projectDetails,
-          //   schedule: scheduleResponse.rows
-          // };
         } else {
           console.warn("获取项目进度失败:", scheduleResponse?.message);
           uni.showToast({
@@ -199,6 +194,17 @@ export default {
         this.loading = false;
       }
     },
+    formatRichText(html) {
+      if (!html) return "";
+
+      // 为图片添加最大宽度限制
+      const formattedHtml = html.replace(
+        /<img([^>]*)>/gi,
+        '<img$1 style="max-width: 100%; height: auto; display: block; margin: 10rpx auto;">',
+      );
+
+      return formattedHtml;
+    },
   },
 };
 </script>
@@ -391,7 +397,7 @@ export default {
 
       .new-develop-container {
         width: 708rpx;
-        height: 586rpx;
+
         background: #fffbf5;
         border-radius: 20rpx 20rpx 20rpx 20rpx;
         border: 2rpx solid #c7a26d;
@@ -514,4 +520,20 @@ button {
 
   color: #fff;
 }
+
+.rich-text-content {
+  /* 全局限制富文本内容宽度 */
+  img {
+    max-width: 100% !important;
+    height: auto !important;
+    display: block;
+    margin: 10rpx auto;
+  }
+
+  /* 其他富文本样式 */
+  p {
+    margin-bottom: 20rpx;
+    line-height: 1.6;
+  }
+}
 </style>