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-16 10:19:12 4 + * @LastEditTime: 2024-04-16 10:30:59
5 * @FilePath: /fxPark/src/views/fxPark/intro.vue 5 * @FilePath: /fxPark/src/views/fxPark/intro.vue
6 * @Description: 植被介绍页 6 * @Description: 植被介绍页
7 --> 7 -->
...@@ -86,7 +86,7 @@ const INTRO_IMG = { // 植被介绍七牛图片地址映射 ...@@ -86,7 +86,7 @@ const INTRO_IMG = { // 植被介绍七牛图片地址映射
86 const audioPlayer = ref(null); 86 const audioPlayer = ref(null);
87 const audioStatus = ref('play'); 87 const audioStatus = ref('play');
88 const audio_list = ref([]); 88 const audio_list = ref([]);
89 -const audioIndex = ref(+revision); 89 +const audioIndex = ref(+revision); // 当前音频index
90 90
91 const handelPlay = () => { 91 const handelPlay = () => {
92 audioPlayer.value.play(); 92 audioPlayer.value.play();
...@@ -121,11 +121,12 @@ onMounted(async () => { ...@@ -121,11 +121,12 @@ onMounted(async () => {
121 data.forEach(item => { 121 data.forEach(item => {
122 if (item.is_tree === 1) { 122 if (item.is_tree === 1) {
123 // audio_list.value.push({ 123 // audio_list.value.push({
124 - // audio_url: item.audio_url, 124 + // audio_url: item.audio_url,
125 - // audio_cover: item.audio_cover, 125 + // audio_cover: item.audio_cover,
126 - // audio_name: item.audio_name, 126 + // audio_name: item.audio_name,
127 - // audio_note: item.audio_note, 127 + // audio_note: item.audio_note,
128 - // }); 128 + // });
129 + // TODO: 暂时用假数据
129 audio_list.value.push({ 130 audio_list.value.push({
130 audio_url: 'http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3', 131 audio_url: 'http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3',
131 audio_cover: 'https://picsum.photos/50/50', 132 audio_cover: 'https://picsum.photos/50/50',
...@@ -134,6 +135,7 @@ onMounted(async () => { ...@@ -134,6 +135,7 @@ onMounted(async () => {
134 }); 135 });
135 } 136 }
136 }); 137 });
138 + // 自动播放音频
137 nextTick(() => { 139 nextTick(() => {
138 handelPlay(); 140 handelPlay();
139 }) 141 })
...@@ -161,7 +163,7 @@ const goToPoster = () => { // 去海报页 ...@@ -161,7 +163,7 @@ const goToPoster = () => { // 去海报页
161 }); 163 });
162 }; 164 };
163 165
164 -const goToIndex = () => { 166 +const goToIndex = () => { // 返回首页
165 $router.push({ 167 $router.push({
166 path: '/', 168 path: '/',
167 }); 169 });
...@@ -180,18 +182,18 @@ const goToIndex = () => { ...@@ -180,18 +182,18 @@ const goToIndex = () => {
180 right: 10px; 182 right: 10px;
181 top: 10px; 183 top: 10px;
182 img { 184 img {
183 - width: 2.5rem; 185 + width: 2rem;
184 - height: 2.5rem; 186 + height: 2rem;
185 border-radius: 50%; 187 border-radius: 50%;
186 } 188 }
187 } 189 }
188 .go-back-wrapper { 190 .go-back-wrapper {
189 position: absolute; 191 position: absolute;
190 right: 10px; 192 right: 10px;
191 - top: 50px; 193 + top: 3.5rem;
192 img { 194 img {
193 - width: 2.5rem; 195 + width: 2rem;
194 - height: 2.5rem; 196 + height: 2rem;
195 border-radius: 50%; 197 border-radius: 50%;
196 } 198 }
197 } 199 }
......