hookehuyr

fix 细节调整

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;
......