Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3120ff2f 1 parent cdd030c9

fix 植被介绍页功能按钮都fixed到页面上

Inline Side-by-side
Showing 1 changed file with 8 additions and 35 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-17 13:36:04 4 + * @LastEditTime: 2024-04-18 17:15:11
5 * @FilePath: /fxPark/src/views/fxPark/intro.vue 5 * @FilePath: /fxPark/src/views/fxPark/intro.vue
6 * @Description: 植被介绍页 6 * @Description: 植被介绍页
7 --> 7 -->
...@@ -20,39 +20,12 @@ ...@@ -20,39 +20,12 @@
20 <div class="intro-img-wrapper"> 20 <div class="intro-img-wrapper">
21 <img v-for="(item, index) in INTRO_IMG[revision]" :key="index" :src="item"> 21 <img v-for="(item, index) in INTRO_IMG[revision]" :key="index" :src="item">
22 </div> 22 </div>
23 - <div class="go-poster-wrapper" @click="goToPoster"> 23 + <div class="go-poster-wrapper">
24 - <!-- <div style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">完成“碳寻”任务</div> --> 24 + <img src="https://cdn.ipadbiz.cn/xfPark/intro/public/gongxi.1713232270.png" style="pointer-events:none;display: block; width: 12rem;">
25 - <img src="https://cdn.ipadbiz.cn/xfPark/intro/public/gongxi.1713232270.png" style="pointer-events:none;display: block; width: 50%; margin-bottom: 1.5rem;">
26 - <img src="https://cdn.ipadbiz.cn/xfPark/intro/public/finish-btn.1713232270.png" style="pointer-events:none;display: block; width: 50%;">
27 </div> 25 </div>
28 - <!-- <div style="margin: 1rem;"> 26 + <div @click="goToPoster" style="position: fixed; bottom: 3rem; left: calc(50% - 6rem);">
29 - <div style="margin-bottom: 1rem;"> 27 + <img src="https://cdn.ipadbiz.cn/xfPark/intro/public/finish-btn.1713232270.png" style="pointer-events:none;display: block; width: 12rem;">
30 - <span style="font-size: 1.25rem;">{{ tree_data?.name }}</span>
31 - <span style="font-size: 0.85rem;">{{ tree_data?.nickname }}</span>
32 </div> 28 </div>
33 - <div style="border: 1px solid #000; padding: 1rem; border-radius: 8px;">
34 - <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>
35 - <div v-if="tree_data.study_name" 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>
36 - <div style="margin-bottom: 1.5rem;white-space: pre-wrap;line-height: 1.8;">
37 - {{ tree_data?.note }}
38 - </div>
39 - <div style="margin-bottom: 1rem;"><span style="background-color: #D0FCF0; padding: 0.5rem 0.75rem; border-radius: 1rem;">植被介绍:</span></div>
40 - <div class="tree-intro" v-html="formattedIntro"></div>
41 - </div>
42 - </div>
43 - <div class="task-tips">
44 - <div class="title-wrapper">
45 - <span class="title-text">任务卡</span>
46 - </div>
47 - <div class="task-wrapper">
48 - <div class="task-title">{{ tree_data?.mission_title }}</div>
49 - <div class="tree-mission-note" v-html="formattedNote"></div>
50 - </div>
51 - </div>
52 - <div class="light-up-text">恭喜您植被已被点亮</div>
53 - <div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center;">
54 - <div @click="goToPoster" style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">生成海报</div>
55 - </div> -->
56 </div> 29 </div>
57 </template> 30 </template>
58 31
...@@ -170,7 +143,7 @@ const goToIndex = () => { // 返回首页 ...@@ -170,7 +143,7 @@ const goToIndex = () => { // 返回首页
170 display: flex; 143 display: flex;
171 flex-direction: column; 144 flex-direction: column;
172 .audio-wrapper { 145 .audio-wrapper {
173 - position: absolute; 146 + position: fixed;
174 right: 10px; 147 right: 10px;
175 top: 10px; 148 top: 10px;
176 img { 149 img {
...@@ -180,7 +153,7 @@ const goToIndex = () => { // 返回首页 ...@@ -180,7 +153,7 @@ const goToIndex = () => { // 返回首页
180 } 153 }
181 } 154 }
182 .go-back-wrapper { 155 .go-back-wrapper {
183 - position: absolute; 156 + position: fixed;
184 right: 10px; 157 right: 10px;
185 top: 3.5rem; 158 top: 3.5rem;
186 img { 159 img {
...@@ -201,7 +174,7 @@ const goToIndex = () => { // 返回首页 ...@@ -201,7 +174,7 @@ const goToIndex = () => { // 返回首页
201 color: white; 174 color: white;
202 text-align: center; 175 text-align: center;
203 position: absolute; 176 position: absolute;
204 - bottom: 1rem; 177 + bottom: 5rem;
205 left: 0; 178 left: 0;
206 right: 0; 179 right: 0;
207 display: flex; 180 display: flex;
......