Showing
8 changed files
with
10 additions
and
6 deletions
src/assets/images/poster/public/title/1.png
0 → 100644
16.4 KB
src/assets/images/poster/public/title/2.png
0 → 100644
11.9 KB
src/assets/images/poster/public/title/3.png
0 → 100644
12.2 KB
src/assets/images/poster/public/title/4.png
0 → 100644
14.6 KB
src/assets/images/poster/public/title/5.png
0 → 100644
25.1 KB
src/assets/images/poster/public/title/6.png
0 → 100644
13.1 KB
| 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-18 17:15:11 | 4 | + * @LastEditTime: 2024-04-22 09:16:49 |
| 5 | * @FilePath: /fxPark/src/views/fxPark/intro.vue | 5 | * @FilePath: /fxPark/src/views/fxPark/intro.vue |
| 6 | * @Description: 植被介绍页 | 6 | * @Description: 植被介绍页 |
| 7 | --> | 7 | --> | ... | ... |
| ... | @@ -12,7 +12,7 @@ | ... | @@ -12,7 +12,7 @@ |
| 12 | <div ref="canvasRef" class="poster-contain" style=""> | 12 | <div ref="canvasRef" class="poster-contain" style=""> |
| 13 | <div v-if="tree_data?.name" class="poster-text-boxer"> | 13 | <div v-if="tree_data?.name" class="poster-text-boxer"> |
| 14 | <div class="poster-text"> | 14 | <div class="poster-text"> |
| 15 | - <span class="name">{{ tree_data?.name }}</span> | 15 | + <div class="name">{{ tree_data?.name }}</div> |
| 16 | <div class="nickname">{{ tree_data?.nickname }}</div> | 16 | <div class="nickname">{{ tree_data?.nickname }}</div> |
| 17 | </div> | 17 | </div> |
| 18 | </div> | 18 | </div> |
| ... | @@ -109,10 +109,16 @@ onMounted(async () => { | ... | @@ -109,10 +109,16 @@ onMounted(async () => { |
| 109 | const { code, data } = await getTreeAPI(); | 109 | const { code, data } = await getTreeAPI(); |
| 110 | if (code) { | 110 | if (code) { |
| 111 | raw_data.value = data.filter(item => item.is_light === '1' || item.is_tree === 0); // 获取已点亮的植被/全点亮的图片 | 111 | raw_data.value = data.filter(item => item.is_light === '1' || item.is_tree === 0); // 获取已点亮的植被/全点亮的图片 |
| 112 | + all_actived.value = data.findIndex(item => item.is_tree === 0) !== -1 ? true : false; | ||
| 112 | let index = raw_data.value.findIndex(item => item.revision == revision); // 植被信息index | 113 | let index = raw_data.value.findIndex(item => item.revision == revision); // 植被信息index |
| 114 | + if (all_actived.value) { | ||
| 115 | + index = 0; // 全部点亮获取第一个海报 | ||
| 116 | + } | ||
| 113 | tree_data.value = raw_data.value[index]; // 获取当前植被信息 | 117 | tree_data.value = raw_data.value[index]; // 获取当前植被信息 |
| 118 | + if (tree_data.value.is_tree === 0) { // 全点亮加个任务标题 | ||
| 119 | + tree_data.value.mission_title = '祝贺你完成“碳寻”任务!'; | ||
| 120 | + } | ||
| 114 | imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic; | 121 | imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic; |
| 115 | - all_actived.value = data.findIndex(item => item.is_tree === 0) !== -1 ? true : false; | ||
| 116 | un_light_num.value = data.filter(item => item.is_tree === 1).length - data.filter(item => item.is_light === '1').length; | 122 | un_light_num.value = data.filter(item => item.is_tree === 1).length - data.filter(item => item.is_light === '1').length; |
| 117 | } | 123 | } |
| 118 | nextTick(() => { | 124 | nextTick(() => { |
| ... | @@ -125,9 +131,6 @@ onMounted(async () => { | ... | @@ -125,9 +131,6 @@ onMounted(async () => { |
| 125 | 131 | ||
| 126 | const resizePoster = () => { // 重置海报 | 132 | const resizePoster = () => { // 重置海报 |
| 127 | tree_data.value = raw_data.value[posterIndex.value]; | 133 | tree_data.value = raw_data.value[posterIndex.value]; |
| 128 | - if (tree_data.value.is_tree === 0) { // 全点亮加个任务标题 | ||
| 129 | - tree_data.value.mission_title = '祝贺你完成“碳寻”任务!'; | ||
| 130 | - } | ||
| 131 | flag.value = true; | 134 | flag.value = true; |
| 132 | imgUrl.value = ''; | 135 | imgUrl.value = ''; |
| 133 | imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic; | 136 | imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic; |
| ... | @@ -305,6 +308,7 @@ const afterRead = async (res) => { | ... | @@ -305,6 +308,7 @@ const afterRead = async (res) => { |
| 305 | text-orientation: upright; | 308 | text-orientation: upright; |
| 306 | .poster-text { | 309 | .poster-text { |
| 307 | position: relative; | 310 | position: relative; |
| 311 | + width: 6rem; | ||
| 308 | .name { | 312 | .name { |
| 309 | font-size: 2.2rem; | 313 | font-size: 2.2rem; |
| 310 | font-weight: bolder; | 314 | font-weight: bolder; | ... | ... |
-
Please register or login to post a comment