引入富文本展示

package.json

@@ -23,6 +23,7 @@
     "@lobehub/icons-static-svg": "^1.91.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.6.1",
+    "@wangeditor/editor": "^5.1.23",
     "axios": "0.27.2",
     "echarts": "5.4.3",
     "element-plus": "2.4.3",

src/components/ContactUsDialog/index.vue

@@ -28,11 +28,11 @@ const props = defineProps({
   },
   email: {
     type: String,
-    default: 'contact@example.com'
+    default: ''
   },
   phone: {
     type: String,
-    default: '138-0000-0000'
+    default: ''
   }
 })
 

src/views/industryApplications/detail.vue

 <template>
   <div class="app-container">
 
-    <div class="block-title">行业概述</div>
-    <div class="sub-title">{{ titleIndustry }}</div>
+    <!-- <div class="block-title">行业概述</div>
+    <div class="sub-title">{{ titleIndustry }}</div> -->
     <div class="content">
       <div class="html-content" v-html="industryInfo"></div>
     </div>
 
-    <div class="block-title">解决方案</div>
-    <div class="sub-title">{{ titleSolution }}</div>
+    <!-- <div class="block-title">解决方案</div>
+    <div class="sub-title">{{ titleSolution }}</div> -->
     <div class="content">
       <div class="html-content" v-html="solutionInfo"></div>
     </div>
 
 
-    <div class="block-title">咨询流程</div>
+    <!-- <div class="block-title">咨询流程</div> -->
 
-    <div class="flex flex-justify-center information-process">
+    <!-- <div class="flex flex-justify-center information-process">
       <div class="item">
         <div class="index">1</div>
         <img class="icon" src="@/assets/images/Information-process-1.png" alt="">
         <div class="title">需求咨询</div>
         <div class="desc">描述业务需求，提交需求咨询</div>
-        <!--        <el-button>立即资讯-->
-        <!--          <el-icon>-->
-        <!--            <ArrowRight/>-->
-        <!--          </el-icon>-->
-        <!--        </el-button>-->
+
       </div>
       <div class="item">
         <div class="index">2</div>
@@ -46,11 +42,13 @@
         <div class="title">商业流程</div>
         <div class="desc">方案确定后，开始执行商务流程</div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup name="Detail">
+// 引入 wangEditor v5 的 CSS，保留后台富文本编辑器的样式（与 admin 端保持一致）
+import '@wangeditor/editor/dist/css/style.css'
 import {solutionDetail} from '@/api/industry.js'
 import {useRoute} from 'vue-router'
 import {ref, watch} from 'vue'
@@ -110,10 +108,24 @@ getDetail()
   text-align: center;
 
   :deep(.html-content) {
+    text-align: left;
+    color: #303233;
+    font-size: 16px;
+    line-height: 1.8;
+
+    p {
+      margin: 0 0 12px;
+    }
+
     img {
       height: auto;
       max-width: 100%;
     }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
   }
 
 }