植被介绍页API联调

 <!--
  * @Date: 2024-04-10 16:08:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-12 10:55:12
+ * @LastEditTime: 2024-04-12 14:11:05
  * @FilePath: /fxPark/src/views/fxPark/intro.vue
  * @Description: 文件描述
 -->
@@ -10,20 +10,17 @@
     <div></div>
     <div style="margin: 1rem;">
       <div style="margin-bottom: 1rem;">
-        <span style="font-size: 1.25rem;">悬铃木{{ revision }}</span>
-        <span style="font-size: 0.85rem;">智者长老</span>
+        <span style="font-size: 1.25rem;">{{ tree_data?.name }}</span>
+        <span style="font-size: 0.85rem;">{{ tree_data?.nickname }}</span>
       </div>
       <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;">
-        <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被类型:</span>&nbsp;待补充</div>
-        <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span>&nbsp;待补充</div>
-        <div style="margin-bottom: 1.5rem;">
-          截至2022年累计固定二氧化碳约7.7吨，可抵消用煤炭发电7.7万度所排放的二氧化碳量，或者可抵消一辆轻型汽车行驶绕地球1周排放的二氧化碳量。
+        <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被类型:</span>&nbsp;{{ tree_data?.type }}</div>
+        <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span>&nbsp;{{ tree_data?.study_name }}</div>
+        <div style="margin-bottom: 1.5rem;white-space: pre-wrap;line-height: 1.8;">
+          {{ tree_data?.note }}
         </div>
         <div style="margin-bottom: 1rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被介绍:</span></div>
-        <div>
-          这棵悬铃木已经有120岁，胸径为123cm，被称为“沪上老二”，拥有悠久的历史和深厚的底蕴。<br/>
-          悬铃木生长快，成型后树大荫浓，是作为庭荫树和行道树的优良树种，是上海最常见的行道树种之一。
-        </div>
+        <div class="tree-intro" v-html="formattedIntro"></div>
       </div>
     </div>
     <div class="task-tips">
@@ -31,8 +28,8 @@
         <span class="title-text">任务卡</span>
       </div>
       <div class="task-wrapper">
-        <div class="task-title">自带咖啡杯</div>
-        <div>去咖啡店时自带咖啡杯，<br/>代替一次性纸杯。</div>
+        <div class="task-title">{{ tree_data?.mission_title }}</div>
+        <div class="tree-mission-note" v-html="formattedNote"></div>
       </div>
     </div>
     <div class="light-up-text">恭喜您植被已被点亮</div>
@@ -57,15 +54,28 @@ const $router = useRouter();
 useTitle($route.meta.title);
 
 const revision = $route.query.revision; // revision 植被编号
-console.log("🚀 ~ file: intro.vue:58 ~ revision:", revision);
+const tree_data = ref({});
 
 onMounted(async () => {
   const { code, data } = await getTreeAPI();
   if (code) {
-    console.warn(data);
+    let index = data.findIndex(item => item.revision == revision); // 植被信息index
+    tree_data.value = data[index];
+    // 植被介绍样式
+    nextTick(() => {
+      $('.tree-intro').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
+      $('.tree-mission-note').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
+    })
   }
 });
 
+const formattedIntro = computed(() => {
+  return tree_data?.value?.intro?.split("\n").map((line) => `<p>${line}</p>`).join("");
+});
+const formattedNote = computed(() => {
+  return tree_data?.value?.mission_note?.split("\n").map((line) => `<p>${line}</p>`).join("");
+});
+
 const goToPoster = () => {
   $router.push({
     path: '/poster',
@@ -88,11 +98,7 @@ const goToPoster = () => {
         font-size: 24px;
         font-weight: bold;
         color: #BBFEE2; /* 文字颜色 */
-        text-shadow:
-          -1px -1px 0 #000,
-          1px -1px 0 #000,
-          -1px  1px 0 #000,
-          1px  1px 0 #000;
+        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;
       }
     }
     .task-wrapper {