Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a53b8f64 1 parent b10048f2

fix 细节调整

Inline Side-by-side
Showing 11 changed files with 16 additions and 10 deletions
<!--
* @Date: 2024-04-10 15:08:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-12 13:13:50
* @LastEditTime: 2024-04-16 14:08:28
* @FilePath: /fxPark/src/views/fxPark/audio.vue
* @Description: 文件描述
-->
......@@ -25,6 +25,7 @@
<van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
<van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" />
<van-icon @click="audioNext" name="arrow" size="1.5rem" />
<van-icon @click="showList" name="arrow-down" size="1.5rem" />
</div>
</div>
</van-col>
......@@ -44,10 +45,10 @@
</div>
</div> -->
<div>
<audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preoload></audio>
<audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
</div>
</div>
<div style="width: 75vw; height: 15rem; border: 1px solid #fff;">
<div v-if="show_audio_list" style="width: 100%; height: 15rem; border: 1px solid #fff;">
<div @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index">{{ item.audio_name }}</div>
</div>
</div>
......@@ -143,6 +144,11 @@ const audioNext = () => {
});
};
const show_audio_list = ref(false);
const showList = () => {
show_audio_list.value = !show_audio_list.value;
};
</script>
<style lang="less" scoped>
......
<!--
* @Date: 2024-04-07 10:15:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-15 14:09:39
* @LastEditTime: 2024-04-16 14:19:41
* @FilePath: /fxPark/src/views/fxPark/index.vue
* @Description: 首页
-->
......@@ -30,7 +30,7 @@
class="img"
:style="{ zIndex: index + 2 }"
>
<img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713145862.jpg" class="img" style="z-index: 1;">
<img src="https://cdn.ipadbiz.cn/xfPark/index/bg.1713248259.jpg" class="img" style="z-index: 1;">
<div v-if="all_no_light" id="magnifying-glass-box"></div>
</div>
......
<!--
* @Date: 2024-04-10 16:08:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-04-16 10:30:59
* @LastEditTime: 2024-04-16 14:23:06
* @FilePath: /fxPark/src/views/fxPark/intro.vue
* @Description: 植被介绍页
-->
......@@ -10,12 +10,12 @@
<div class="audio-wrapper" @click="handleAudio">
<img
:class="[audioStatus === 'play' ? 'play' : 'pause']"
:src="audioStatus === 'play' ? 'https://cdn.ipadbiz.cn/xfPark/intro/close-music-btn.1713232270.png' : 'https://cdn.ipadbiz.cn/xfPark/intro/open-music-btn.1713232270.png'"
:src="audioStatus === 'play' ? 'https://cdn.ipadbiz.cn/xfPark/intro/public/close-music-btn.1713232270.png' : 'https://cdn.ipadbiz.cn/xfPark/intro/public/open-music-btn.1713232270.png'"
>
<audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
</div>
<div class="go-back-wrapper" @click="goToIndex">
<img src="https://cdn.ipadbiz.cn/xfPark/intro/go-back-btn.1713232270.png">
<img src="https://cdn.ipadbiz.cn/xfPark/intro/public/go-back-btn.1713232270.png">
</div>
<div class="intro-img-wrapper">
<img :src="INTRO_IMG[revision][0]">
......@@ -23,8 +23,8 @@
</div>
<div class="go-poster-wrapper" @click="goToPoster">
<!-- <div style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">完成“碳寻”任务</div> -->
<img src="https://cdn.ipadbiz.cn/xfPark/intro/gongxi.1713232270.png" style="pointer-events:none;display: block; width: 50%; margin-bottom: 1.5rem;">
<img src="https://cdn.ipadbiz.cn/xfPark/intro/finish-btn.1713232270.png" style="pointer-events:none;display: block; width: 50%;">
<img src="https://cdn.ipadbiz.cn/xfPark/intro/public/gongxi.1713232270.png" style="pointer-events:none;display: block; width: 50%; margin-bottom: 1.5rem;">
<img src="https://cdn.ipadbiz.cn/xfPark/intro/public/finish-btn.1713232270.png" style="pointer-events:none;display: block; width: 50%;">
</div>
<!-- <div style="margin: 1rem;">
<div style="margin-bottom: 1rem;">
......