Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5d77b66b 1 parent a0ebef6a

植被介绍页API联调

Inline Side-by-side
Showing 1 changed file with 26 additions and 20 deletions
1 <!-- 1 <!--
2 * @Date: 2024-04-10 16:08:09 2 * @Date: 2024-04-10 16:08:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-12 10:55:12 4 + * @LastEditTime: 2024-04-12 14:11:05
5 * @FilePath: /fxPark/src/views/fxPark/intro.vue 5 * @FilePath: /fxPark/src/views/fxPark/intro.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -10,20 +10,17 @@ ...@@ -10,20 +10,17 @@
10 <div></div> 10 <div></div>
11 <div style="margin: 1rem;"> 11 <div style="margin: 1rem;">
12 <div style="margin-bottom: 1rem;"> 12 <div style="margin-bottom: 1rem;">
13 - <span style="font-size: 1.25rem;">悬铃木{{ revision }}</span> 13 + <span style="font-size: 1.25rem;">{{ tree_data?.name }}</span>
14 - <span style="font-size: 0.85rem;">智者长老</span> 14 + <span style="font-size: 0.85rem;">{{ tree_data?.nickname }}</span>
15 </div> 15 </div>
16 <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;"> 16 <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;">
17 - <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被类型:</span>&nbsp;待补充</div> 17 + <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>
18 - <div style="margin-bottom: 1.5rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被学名:</span>&nbsp;待补充</div> 18 + <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>
19 - <div style="margin-bottom: 1.5rem;"> 19 + <div style="margin-bottom: 1.5rem;white-space: pre-wrap;line-height: 1.8;">
20 - 截至2022年累计固定二氧化碳约7.7吨，可抵消用煤炭发电7.7万度所排放的二氧化碳量，或者可抵消一辆轻型汽车行驶绕地球1周排放的二氧化碳量。 20 + {{ tree_data?.note }}
21 </div> 21 </div>
22 <div style="margin-bottom: 1rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被介绍:</span></div> 22 <div style="margin-bottom: 1rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被介绍:</span></div>
23 - <div> 23 + <div class="tree-intro" v-html="formattedIntro"></div>
24 - 这棵悬铃木已经有120岁，胸径为123cm，被称为“沪上老二”，拥有悠久的历史和深厚的底蕴。<br/>
25 - 悬铃木生长快，成型后树大荫浓，是作为庭荫树和行道树的优良树种，是上海最常见的行道树种之一。
26 - </div>
27 </div> 24 </div>
28 </div> 25 </div>
29 <div class="task-tips"> 26 <div class="task-tips">
...@@ -31,8 +28,8 @@ ...@@ -31,8 +28,8 @@
31 <span class="title-text">任务卡</span> 28 <span class="title-text">任务卡</span>
32 </div> 29 </div>
33 <div class="task-wrapper"> 30 <div class="task-wrapper">
34 - <div class="task-title">自带咖啡杯</div> 31 + <div class="task-title">{{ tree_data?.mission_title }}</div>
35 - <div>去咖啡店时自带咖啡杯，<br/>代替一次性纸杯。</div> 32 + <div class="tree-mission-note" v-html="formattedNote"></div>
36 </div> 33 </div>
37 </div> 34 </div>
38 <div class="light-up-text">恭喜您植被已被点亮</div> 35 <div class="light-up-text">恭喜您植被已被点亮</div>
...@@ -57,15 +54,28 @@ const $router = useRouter(); ...@@ -57,15 +54,28 @@ const $router = useRouter();
57 useTitle($route.meta.title); 54 useTitle($route.meta.title);
58 55
59 const revision = $route.query.revision; // revision 植被编号 56 const revision = $route.query.revision; // revision 植被编号
60 -console.log("🚀 ~ file: intro.vue:58 ~ revision:", revision); 57 +const tree_data = ref({});
61 58
62 onMounted(async () => { 59 onMounted(async () => {
63 const { code, data } = await getTreeAPI(); 60 const { code, data } = await getTreeAPI();
64 if (code) { 61 if (code) {
65 - console.warn(data); 62 + let index = data.findIndex(item => item.revision == revision); // 植被信息index
63 + tree_data.value = data[index];
64 + // 植被介绍样式
65 + nextTick(() => {
66 + $('.tree-intro').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
67 + $('.tree-mission-note').find('p').css('lineHeight', '1.8').css('marginBottom', '0.5rem');
68 + })
66 } 69 }
67 }); 70 });
68 71
72 +const formattedIntro = computed(() => {
73 + return tree_data?.value?.intro?.split("\n").map((line) => `<p>${line}</p>`).join("");
74 +});
75 +const formattedNote = computed(() => {
76 + return tree_data?.value?.mission_note?.split("\n").map((line) => `<p>${line}</p>`).join("");
77 +});
78 +
69 const goToPoster = () => { 79 const goToPoster = () => {
70 $router.push({ 80 $router.push({
71 path: '/poster', 81 path: '/poster',
...@@ -88,11 +98,7 @@ const goToPoster = () => { ...@@ -88,11 +98,7 @@ const goToPoster = () => {
88 font-size: 24px; 98 font-size: 24px;
89 font-weight: bold; 99 font-weight: bold;
90 color: #BBFEE2; /* 文字颜色 */ 100 color: #BBFEE2; /* 文字颜色 */
91 - text-shadow: 101 + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
92 - -1px -1px 0 #000,
93 - 1px -1px 0 #000,
94 - -1px 1px 0 #000,
95 - 1px 1px 0 #000;
96 } 102 }
97 } 103 }
98 .task-wrapper { 104 .task-wrapper {
......