hookehuyr

fix 显示细节调整

1 <!-- 1 <!--
2 * @Date: 2024-04-07 10:15:55 2 * @Date: 2024-04-07 10:15:55
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-04-18 14:02:53 4 + * @LastEditTime: 2024-04-18 17:45:34
5 * @FilePath: /fxPark/src/views/fxPark/index.vue 5 * @FilePath: /fxPark/src/views/fxPark/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 :style="{ zIndex: index + 2 }" 31 :style="{ zIndex: index + 2 }"
32 > 32 >
33 <img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713248259.jpg" class="img" style="z-index: 1;"> 33 <img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713248259.jpg" class="img" style="z-index: 1;">
34 - <div v-if="all_no_light" id="magnifying-glass-box"> 34 + <div v-if="no_light" id="magnifying-glass-box">
35 <div style="position: absolute; left: 0.5rem; bottom: -3rem; background-image: url('https://cdn.ipadbiz.cn/xfPark/index/word.1713418535.png'); background-size: 80% 80%; width: 12rem; height: 3rem; background-repeat: no-repeat;"></div> 35 <div style="position: absolute; left: 0.5rem; bottom: -3rem; background-image: url('https://cdn.ipadbiz.cn/xfPark/index/word.1713418535.png'); background-size: 80% 80%; width: 12rem; height: 3rem; background-repeat: no-repeat;"></div>
36 </div> 36 </div>
37 </div> 37 </div>
...@@ -114,7 +114,7 @@ const offset = ref({ x: -10, y: 500 }); ...@@ -114,7 +114,7 @@ const offset = ref({ x: -10, y: 500 });
114 114
115 const data_list = ref([]); 115 const data_list = ref([]);
116 const all_actived = ref(false); // 全部激活 116 const all_actived = ref(false); // 全部激活
117 -const all_no_light = ref(true); // 全部未激活 117 +const no_light = ref(false); // 存在未激活
118 118
119 const space_height = ref('10vh'); // 第一次进入没有导航栏 119 const space_height = ref('10vh'); // 第一次进入没有导航栏
120 120
...@@ -127,7 +127,6 @@ onMounted(async () => { ...@@ -127,7 +127,6 @@ onMounted(async () => {
127 const { code, data } = await getTreeAPI(); 127 const { code, data } = await getTreeAPI();
128 if (code) { 128 if (code) {
129 let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识 129 let index = data.findIndex(item => item.is_tree === 0); // 全点亮标识
130 - let light_index = data.findIndex(item => item.is_light === '1'); // 点亮标识
131 130
132 data_list.value = data.filter(item => item.is_tree === 1); // 获取植物信息,提出最后一个非植物。 131 data_list.value = data.filter(item => item.is_tree === 1); // 获取植物信息,提出最后一个非植物。
133 data_list.value.forEach(item => { 132 data_list.value.forEach(item => {
...@@ -136,9 +135,8 @@ onMounted(async () => { ...@@ -136,9 +135,8 @@ onMounted(async () => {
136 135
137 if (index !== -1) { // 全点亮 136 if (index !== -1) { // 全点亮
138 all_actived.value = true; 137 all_actived.value = true;
139 - } 138 + } else {
140 - if (light_index === -1) { // 全未点亮 139 + no_light.value = true; // 全未点亮
141 - all_no_light.value = true;
142 } 140 }
143 } 141 }
144 }); 142 });
......
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
4 <img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;"> 4 <img src="https://cdn.ipadbiz.cn/xfPark/post/public/go-back-btn.1713241695.png" style="width: 2rem; height: 2rem;">
5 </div> 5 </div>
6 <div class="poster-contain-wrapper"> 6 <div class="poster-contain-wrapper">
7 + <div style="color: #975E4D; text-align: center; margin-bottom: 1rem;">
8 + <span v-if="all_actived">请至园艺小站领取神秘礼物哦!</span>
9 + <span v-else>还有{{ un_light_num }}个任务等待你寻找哦!</span>
10 + </div>
7 <div v-if="flag" style="border: 1.5px solid #9C8882; box-shadow: 8px 8px 8px 0px rgba(156,136,130,1); height: 100%;"> 11 <div v-if="flag" style="border: 1.5px solid #9C8882; box-shadow: 8px 8px 8px 0px rgba(156,136,130,1); height: 100%;">
8 <div ref="canvasRef" class="poster-contain" style=""> 12 <div ref="canvasRef" class="poster-contain" style="">
9 <div v-if="tree_data?.name" class="poster-text-boxer"> 13 <div v-if="tree_data?.name" class="poster-text-boxer">
...@@ -76,6 +80,8 @@ const raw_data = ref([]); ...@@ -76,6 +80,8 @@ const raw_data = ref([]);
76 const tree_data = ref({}); 80 const tree_data = ref({});
77 81
78 const posterIndex = ref(0); 82 const posterIndex = ref(0);
83 +const all_actived = ref(false); // 全部激活
84 +const un_light_num = ref(0); // 点亮的数量
79 85
80 onMounted(async () => { 86 onMounted(async () => {
81 const { code, data } = await getTreeAPI(); 87 const { code, data } = await getTreeAPI();
...@@ -84,6 +90,8 @@ onMounted(async () => { ...@@ -84,6 +90,8 @@ onMounted(async () => {
84 let index = raw_data.value.findIndex(item => item.revision == revision); // 植被信息index 90 let index = raw_data.value.findIndex(item => item.revision == revision); // 植被信息index
85 tree_data.value = raw_data.value[index]; // 获取当前植被信息 91 tree_data.value = raw_data.value[index]; // 获取当前植被信息
86 imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic; 92 imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic;
93 + all_actived.value = data.findIndex(item => item.is_tree === 0) !== -1 ? true : false;
94 + un_light_num.value = data.filter(item => item.is_tree === 1).length - data.filter(item => item.is_light === '1').length;
87 } 95 }
88 nextTick(() => { 96 nextTick(() => {
89 let canvasDom = canvasRef.value; 97 let canvasDom = canvasRef.value;
......