A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 更新图片资源并优化播放器样式和布局

Browse Source 
- 替换多张图片资源为PNG格式
- 重构底部播放器样式，调整布局和动画效果
- 优化guess页面的UI元素和交互提示
- 修复CSS中的z-index和line-height问题
- 调整音频预加载策略为auto
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-23 15:52:51 +08:00
parent 8a764d2fdb
commit b40e69dac2
30 changed files with 303 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@@ -18,7 +18,7 @@
<body>
<div class="content" id="appIndex" v-cloak>
<!-- 原生audio标签（隐藏） -->
<audio ref="audioPlayer" preload="none" loop></audio>
<audio ref="audioPlayer" preload="auto" loop></audio>
<div class="introduce" ref="introduceRef">
<div class="head flexacenter">
@@ -43,13 +43,13 @@
</div>
<div class="album" @mouseover="changeInterval(true)" @mouseleave="changeInterval(false)">
<img class="bj bj1" src="./static/img/album-bj1.svg" />
<img class="bj bj2" src="./static/img/album-bj2.svg" />
<img class="bj bj2" src="./static/img/album-bj2.png" />
<div class="album-box" ref="albumBoxRef">
<div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.id)">
<img class="img" :src="item.img" />
<img class="bj bj3" src="./static/img/album-bj3.svg" />
<img class="bj bj4" src="./static/img/album-bj4.png" />
<img class="bj bj5" src="./static/img/album-bj5.svg" />
<img class="bj bj5" src="./static/img/album-bj5.png" />
<img class="play" src="./static/img/play-white-icon.svg" />
</div>
</div>
@@ -162,9 +162,9 @@
</div>
</div>
<div class="bottom flexcenter">
<img class="bj" src="./static/img/custom-bj-1.svg" />
<img class="bj" src="./static/img/custom-bj-2.svg" />
<img class="bj" src="./static/img/custom-bj-1.svg" />
<img class="bj" src="./static/img/custom-bj-1.png" />
<img class="bj" src="./static/img/custom-bj-2.png" />
<img class="bj" src="./static/img/custom-bj-1.png" />
</div>
</div>
</div>
@@ -205,7 +205,7 @@
</div>
</div>
<div class="footer flexcenter" :style="{ marginBottom: playData ? '76px' : '' }">
<div class="footer flexcenter">
<img class="logo" src="./static/img/ai-title.png" />
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div>
</div>
@@ -217,18 +217,12 @@
<div class="bottom-play flexacenter" v-if="playData">
<div class="bottom-left flex1 flexacenter">
<img class="img" :src="playData?.img" />
<!-- <img class="img" :src="playData?.img" /> -->
<div class="name">{{ playData?.title }}</div>
</div>
<div class="bottom-middle flexcenter">
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
</div>
<div class="flexacenter">
<div class="flexacenter" style="margin-bottom: 10px">
<div class="time-display">{{ currentTimeFormatted }}</div>
<div class="progress-bar flexacenter" @click="handleBarDragBottomClick">
<div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div>
@@ -236,6 +230,12 @@
</div>
<div class="time-display">{{ durationFormatted }}</div>
</div>
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
</div>
</div>
<div class="bottom-right flex1 flexcenter">