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

feat: 迁移静态资源文件至static目录

Browse Source 
将图片、音频和HTML文件从根目录迁移至static目录下的img和mp3子目录，并删除原文件
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-11 12:08:48 +08:00
parent 3d380d82de
commit 4324921fb2
62 changed files with 310 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
1.html
View File

@@ -1,104 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>红色进度条音频播放器</title>
<style>
/* 基础样式：控制播放器宽度和高度 */
audio {
width: 300px;
height: 30px;
}
/* Chrome/Safari 样式 */
/* 隐藏所有控制按钮 */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-playback-rate-button {
display: none !important;
}
/* 进度条设置 */
audio::-webkit-media-controls-timeline {
display: block !important;
width: 100% !important;
height: 6px !important;
}
/* 进度条背景 */
audio::-webkit-media-controls-timeline-container {
background-color: #eee !important;
border-radius: 3px !important;
}
/* 红色进度条和滑块 */
audio::-webkit-media-controls-thumb-container {
color: #ff0000 !important;
}
audio::-webkit-media-controls-timeline-progress-bar {
background-color: #ff0000 !important;
border-radius: 3px !important;
}
/* Firefox 样式 */
/* 隐藏所有控制按钮 */
audio::-moz-media-controls-play-button,
audio::-moz-media-controls-volume-control,
audio::-moz-media-controls-playback-rate,
audio::-moz-media-controls-current-time-display,
audio::-moz-media-controls-time-remaining-display {
display: none !important;
}
/* 控制面板样式 */
audio::-moz-media-controls-panel {
height: 30px !important;
background-color: transparent !important;
padding: 0 !important;
}
/* 进度条背景 */
audio::-moz-media-controls-timeline {
background-color: #eee !important;
border-radius: 3px !important;
height: 6px !important;
}
/* 红色进度条和滑块 */
audio::-moz-media-controls-progress-bar {
background-color: #ff0000 !important;
border-radius: 3px !important;
}
audio::-moz-media-controls-thumb {
background-color: #ff0000 !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
}
</style>
</head>
<body>
<audio controls loop>
<source src="audio1.mp3" type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
<script>
const audio = document.querySelector('audio');
audio.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(err => {
alert('请先点击页面，再点击进度条播放');
});
} else {
audio.pause();
}
});
</script>
</body>
</html>

82
index.html
View File

@@ -4,9 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>朴见潮音官网</title>
<script src="./js/vue.global.js"></script>
<script src="./js/artplayer.js"></script>
<link rel="stylesheet" href="./css/index.css" />
<script src="./static/js/vue.global.js"></script>
<script src="./static/js/artplayer.js"></script>
<link rel="stylesheet" href="./static/css/index.css" />
<style>
[v-cloak] {
display: none;
@@ -20,18 +20,23 @@
<div class="sidebar flexflex">
<div class="pointer">
<div class="item" :data-index="'01'"></div>
<div class="item active" :data-index="'02'"></div>
<div class="item" :data-index="'03'"></div>
<div class="item" :data-index="'04'"></div>
<div class="item" :class="{'active': pointerState === 'introduce'}" :data-index="'01'" @click="changePointer('introduce')"></div>
<div class="item" :class="{'active': pointerState === 'works'}" :data-index="'02'" @click="changePointer('works')"></div>
<div class="item" :class="{'active': pointerState === 'custom'}" :data-index="'03'" @click="changePointer('custom')"></div>
<div class="item" :class="{'active': pointerState === 'student'}" :data-index="'04'" @click="changePointer('student')"></div>
</div>
<div class="arrow">
<img class="item top" src="./img/arrow-white.svg" />
<img class="item bottom" src="./img/arrow-orange.svg" />
<!-- 向上按钮：不是介绍页时显示 -->
<img v-if="pointerState !== 'introduce'" class="item top orange" src="./img/arrow-orange.svg" @click="scrollToPrevious" />
<img v-else class="item top" src="./img/arrow-white.svg" />
<!-- 向下按钮：不是学生页时显示 -->
<img v-if="pointerState !== 'student'" class="item bottom orange" src="./img/arrow-orange.svg" @click="scrollToNext" />
<img v-else class="item bottom white" src="./img/arrow-white.svg" />
</div>
</div>
<div class="introduce">
<div class="introduce" ref="introduceRef">
<div class="head flexacenter">
<div class="logo mar1200">
<img class="icon" src="./img/logo.png" />
@@ -77,7 +82,7 @@
</div>
</div>
<div class="works flexacenter">
<div class="works flexacenter" ref="worksRef">
<img class="bj1" src="./img/works-bj1.png" />
<div class="name-box">
<img class="bj" src="./img/works-title-bj.svg" />
@@ -134,24 +139,25 @@
<img class="bj2" src="./img/works-bj2.png" />
</div>
<div class="custom">
<div class="custom" ref="customRef">
<div class="custom-box mar1200 flexflex">
<img class="title" src="./img/custom-title.png" />
<div class="subtitle">往事可成追忆，把你的故事谱成歌</div>
<div class="list flexflex mar1200">
<div class="item flexacenter" v-for="(item, index) in 6" :key="index">
<div class="item flexacenter" v-for="(item, index) in customList" :key="index">
<div class="info flexflex">
<div class="name">画Remix</div>
<div class="lyric">走过的路汇成星河，脚下的路更辽阔</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: progress + '%' }"></div>
<div class="bar white" :style="{ width: item.progress + '%' }"></div>
<div class="circle"></div>
<div class="bar black" :style="{ width: (100 - progress) + '%' }"></div>
<div class="bar black flex1"></div>
</div>
<div class="operate flexcenter">
<img class="speed left" src="./img/speed-left.png" />
<img class="play" src="./img/play-black-icon.svg" />
<img class="speed right" src="./img/speed-right.png" />
<img class="speed left" @click="fastForward('slow', item.src, 'custom')" src="./img/speed-left.png" />
<img v-if="item.state" class="play" @click="closeAll()" src="./img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.src, 'custom')" src="./img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast', item.src, 'custom')" src="./img/speed-right.png" />
</div>
</div>
@@ -166,15 +172,21 @@
</div>
</div>
<div class="student">
<div class="student" ref="studentRef">
<div class="student-box flexflex">
<img class="title" src="./img/student-title.png" alt="" />
<div class="list">
<img class="img" src="./img/student-img.png" />
<img class="title" src="./static/img/student-title.png" alt="" />
<div class="list flexacenter">
<img class="img img1" src="./static/img/student-img.png" />
<img class="img img2" src="./static/img/student-img.png" />
<img class="img img3" src="./static/img/student-img.png" />
<img class="img img4" src="./static/img/student-img.png" />
<img class="img img5" src="./static/img/student-img.png" />
<img class="img img6" src="./static/img/student-img.png" />
<img class="img img7" src="./img/student-img.png" />
</div>
<div class="name">《听风少年的梦幻之城》</div>
<div class="info flexacenter">
<img class="icon" src="./img/student-icon.svg" />
<img class="icon" src="./static/img/student-icon.svg" />
林林林 | 7岁 | 广州
</div>
@@ -190,34 +202,34 @@
</div> -->
<div class="operate flexcenter">
<img class="cut left" src="./img/cut-left.svg" />
<img class="speed left" src="./img/speed-white-left.png" />
<img class="play" src="./img/play-white-icon.svg" />
<img class="speed right" src="./img/speed-white-right.png" />
<img class="cut right" src="./img/cut-right.svg" />
<img class="cut left" src="./static/img/cut-left.svg" />
<img class="speed left" src="./static/img/speed-white-left.png" />
<img class="play" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" />
<img class="cut right" src="./static/img/cut-right.svg" />
</div>
</div>
<div class="contact flexflex mar1200">
<img class="title" src="./img/contact-title.png" />
<img class="title" src="./static/img/contact-title.png" />
<div class="hint">我们可以为你提供AI音乐定制服务，谱写你独有的人生歌曲</div>
<div class="hint">我们可以为你提供AI音乐教学培训服务，让你拥有独立完成音乐作品的能力</div>
<img class="arrows" src="./img/arrows-yellow.svg" />
<img class="WeChat" src="./img/WeChat-img.jpg" />
<img class="logo" src="./img/logo-black.png" />
<img class="arrows" src="./static/img/arrows-yellow.svg" />
<img class="WeChat" src="./static/img/WeChat-img.jpg" />
<img class="logo" src="./static/img/logo-black.png" />
</div>
</div>
<div class="footer flexcenter">
<img class="logo" src="./img/ai-title.png" />
<img class="logo" src="./static/img/ai-title.png" />
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div>
</div>
<div v-if="previewState" class="preview flexcenter">
<img class="close" @click="closePreview()" src="./img/close.svg" />
<img class="close" @click="closePreview()" src="./static/img/close.svg" />
<div class="artplayer-app"></div>
</div>
</div>
<script src="./js/index.js"></script>
<script src="./static/js/index.js"></script>
</body>
</html>

52
css/index.css → static/css/index.css
View File

@@ -71,11 +71,19 @@
.content .sidebar .arrow .item {
width: 12px;
height: 7px;
}
.content .sidebar .arrow .item.orange {
cursor: pointer;
}
.content .sidebar .arrow .item.top.orange {
transform: rotate(180deg);
}
.content .sidebar .arrow .item:not(:last-of-type) {
margin-bottom: 34px;
}
.content .sidebar .arrow .item.bottom.white {
transform: rotate(180deg);
}
.content .introduce {
width: 100%;
}
@@ -366,7 +374,7 @@
position: relative;
width: 340px;
height: 191px;
margin: 0 30px;
margin: 0 auto;
cursor: pointer;
}
.content .works .mv-box .item .media .img {
@@ -378,8 +386,8 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 27px;
width: 28px;
height: 28px;
cursor: pointer;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
@@ -591,7 +599,7 @@
position: absolute;
}
.content .custom .list .item .info .progress-bar .bar.white {
width: 20%;
width: 0;
border-radius: 10px 0 0 10px;
}
.content .custom .list .item .info .progress-bar .bar.white::after {
@@ -663,17 +671,49 @@
margin-bottom: 93px;
}
.content .student .student-box .list {
margin-bottom: 69px;
position: relative;
width: 1200px;
height: 320px;
margin: 0 auto 69px;
}
.content .student .student-box .list .img {
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.content .student .student-box .list .img.pitch {
.content .student .student-box .list .img.img6 {
left: 0;
z-index: 2;
}
.content .student .student-box .list .img.img4 {
left: 149px;
z-index: 4;
}
.content .student .student-box .list .img.img2 {
left: 299px;
z-index: 6;
}
.content .student .student-box .list .img.img1 {
width: 320px;
height: 320px;
left: 440px;
z-index: 7;
}
.content .student .student-box .list .img.img3 {
left: 654px;
z-index: 5;
}
.content .student .student-box .list .img.img5 {
left: 804px;
z-index: 3;
}
.content .student .student-box .list .img.img7 {
left: 954px;
z-index: 1;
}
.content .student .student-box .name {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;

64
css/index.less → static/css/index.less
View File

@@ -76,11 +76,22 @@
.item {
width: 12px;
height: 7px;
cursor: pointer;
&.orange {
cursor: pointer;
}
&.top.orange {
transform: rotate(180deg);
}
&:not(:last-of-type) {
margin-bottom: 34px;
}
&.bottom.white {
transform: rotate(180deg);
}
}
}
}
@@ -413,7 +424,7 @@
position: relative;
width: 340px;
height: 191px;
margin: 0 30px;
margin: 0 auto;
cursor: pointer;
.img {
@@ -426,8 +437,8 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 27px;
height: 27px;
width: 28px;
height: 28px;
cursor: pointer;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
@@ -671,7 +682,7 @@
position: absolute;
}
&.white {
width: 20%;
width: 0;
border-radius: 10px 0 0 10px;
&::after {
@@ -763,15 +774,54 @@
}
.list {
margin-bottom: 69px;
position: relative;
width: 1200px;
height: 320px;
margin: 0 auto 69px;
.img {
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
&.pitch {
cursor: pointer;
transition: all 0.3s ease-in-out;
&.img6 {
left: 0;
z-index: 2;
}
&.img4 {
left: 149px;
z-index: 4;
}
&.img2 {
left: 299px;
z-index: 6;
}
&.img1 {
width: 320px;
height: 320px;
left: 440px;
z-index: 7;
}
&.img3 {
left: 654px;
z-index: 5;
}
&.img5 {
left: 804px;
z-index: 3;
}
&.img7 {
left: 954px;
z-index: 1;
}
}
}

0
img/WeChat-img.jpg → static/img/WeChat-img.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 182 KiB

0
img/ai-title.png → static/img/ai-title.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

0
img/album-bj1.svg → static/img/album-bj1.svg
View File

0
img/album-bj2.svg → static/img/album-bj2.svg
View File

0
img/album-bj3.svg → static/img/album-bj3.svg
View File

0
img/album-bj4.png → static/img/album-bj4.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
img/album-bj5.svg → static/img/album-bj5.svg
View File

0
img/album-img.svg → static/img/album-img.svg
View File

0
img/arrow-orange.svg → static/img/arrow-orange.svg
View File

0
img/arrow-white.svg → static/img/arrow-white.svg
View File

0
img/arrows-yellow.svg → static/img/arrows-yellow.svg
View File

0
img/audio-img.png → static/img/audio-img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

0
img/audio-img.svg → static/img/audio-img.svg
View File

0
img/award-winning-works.png → static/img/award-winning-works.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
img/close.svg → static/img/close.svg
View File

0
img/contact-title.png → static/img/contact-title.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

0
img/custom-bj-1.svg → static/img/custom-bj-1.svg
View File

0
img/custom-bj-2.svg → static/img/custom-bj-2.svg
View File

0
img/custom-img.png → static/img/custom-img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

0
img/custom-title.png → static/img/custom-title.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

0
img/cut-left.svg → static/img/cut-left.svg
View File

0
img/cut-right.svg → static/img/cut-right.svg
View File

0
img/gushi.png → static/img/gushi.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

0
img/headset-icon.png → static/img/headset-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

0
img/logo-black.png → static/img/logo-black.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

0
img/logo.png → static/img/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

0
img/mv-1.svg → static/img/mv-1.svg
View File

0
img/mv-icon.png → static/img/mv-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

0
img/pause-black-icon.svg → static/img/pause-black-icon.svg
View File

0
img/pause-white-icon.svg → static/img/pause-white-icon.svg
View File

0
img/play-black-icon.svg → static/img/play-black-icon.svg
View File

0
img/play-white-icon.svg → static/img/play-white-icon.svg
View File

0
img/record-icon.png → static/img/record-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

0
img/remake-icon.png → static/img/remake-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

0
img/serial-icon.png → static/img/serial-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

0
img/serial-icon.svg → static/img/serial-icon.svg
View File

0
img/speed-left.png → static/img/speed-left.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
img/speed-right.png → static/img/speed-right.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
img/speed-white-left.png → static/img/speed-white-left.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

0
img/speed-white-right.png → static/img/speed-white-right.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

0
img/student-icon.svg → static/img/student-icon.svg
View File

0
img/student-img.png → static/img/student-img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 180 KiB

After

Width:  |  Height:  |  Size: 180 KiB

0
img/student-title.png → static/img/student-title.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

0
img/train-icon.png → static/img/train-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

0
img/works-bj1.png → static/img/works-bj1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

0
img/works-bj2.png → static/img/works-bj2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

0
img/works-line-1.svg → static/img/works-line-1.svg
View File

0
img/works-line-2.svg → static/img/works-line-2.svg
View File

0
img/works-line-3.svg → static/img/works-line-3.svg
View File

0
img/works-line-4.svg → static/img/works-line-4.svg
View File

0
img/works-line-5.svg → static/img/works-line-5.svg
View File

0
img/works-line-6.svg → static/img/works-line-6.svg
View File

0
img/works-title-bj.svg → static/img/works-title-bj.svg
View File

0
img/works-title.png → static/img/works-title.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

0
js/artplayer.js → static/js/artplayer.js
View File

172
js/index.js → static/js/index.js
View File

@@ -45,9 +45,128 @@ const search = createApp({
audioList.value.forEach((item) => {
if (item.url === src) item.progress = val;
});
customList.value.forEach((item) => {
if (item.src === src) item.progress = val;
});
};
const introduceRef = ref(null);
const worksRef = ref(null);
const customRef = ref(null);
const studentRef = ref(null);
let pointerState = ref("introduce");
const elements = ref([
{
isVisible: false,
ref: introduceRef,
title: "介绍",
state: "introduce",
},
{
isVisible: false,
ref: worksRef,
title: "作品",
state: "works",
},
{
isVisible: false,
ref: customRef,
title: "定制",
state: "custom",
},
{
isVisible: false,
ref: studentRef,
title: "学生",
state: "student",
},
]);
// 点击侧边栏
const changePointer = (state) => {
const element = document.querySelector(`.${state}`);
if (!element) return;
element.scrollIntoView({
behavior: "smooth",
});
};
// 向上滚动到上一页
const scrollToPrevious = () => {
const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
if (currentIndex > 0) {
const prevState = ['introduce', 'works', 'custom', 'student'][currentIndex - 1];
changePointer(prevState);
}
};
// 向下滚动到下一页
const scrollToNext = () => {
const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
if (currentIndex < 3) {
const nextState = ['introduce', 'works', 'custom', 'student'][currentIndex + 1];
changePointer(nextState);
}
};
// 获取当前在可视窗口中的元素ref
const visibleRef = computed(() => {
const visibleElement = elements.value.find((el) => el.isVisible);
return visibleElement ? visibleElement.ref : null;
});
const observer = ref(null);
// 初始化观察器
const initObserver = () => {
observer.value = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
// 找到对应的元素状态并更新
const targetEl = elements.value.find((el) => el.ref === entry.target);
if (targetEl) {
targetEl.isVisible = entry.isIntersecting;
if (entry.isIntersecting) pointerState.value = targetEl.state;
}
});
},
{
root: null, // 视口作为根元素
rootMargin: "0px",
threshold: 0.3, // 可见比例达到10%时触发
}
);
// 开启监听 - 对所有预定义的元素执行observe
elements.value.forEach((element) => {
if (element.ref && element.ref) observer.value.observe(element.ref);
});
console.log(observer.value);
};
// 添加元素到监听列表
const addElement = (elRef) => {
if (elRef.value) {
// 存储元素ref和其可见状态
elements.value.push({
ref: elRef.value,
isVisible: false,
});
// 开始监听
observer.value?.observe(elRef.value);
}
};
onMounted(() => {
setTimeout(() => {
initObserver();
}, 1000);
// 添加进度更新事件监听器
if (audioPlayer.value) {
audioPlayer.value.addEventListener("timeupdate", getProgress);
@@ -57,6 +176,8 @@ const search = createApp({
// 组件卸载时清理事件监听器
onUnmounted(() => {
observer.value?.disconnect();
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
});
@@ -68,7 +189,7 @@ const search = createApp({
const playHead = () => {
closeAll();
nextTick(() => {
audioPlayer.value.src = "./mp3/1.MP3";
audioPlayer.value.src = "./static/mp3/1.MP3";
audioPlayer.value.play().then(() => (audioHeadState.value = true));
});
};
@@ -156,37 +277,64 @@ const search = createApp({
};
const manageAudio = (src, area) => {
console.log("src", src, "area", area);
const audio = audioPlayer.value;
console.log("audio", audio.paused);
closeAll();
if (area == "head") {
nextTick(() => {
nextTick(() => {
if (area == "head") {
if (audio?.src != src) audio.src = src;
audio.play().then(() => (audioHeadState.value = true));
});
}
}
if (area == "works") {
nextTick(() => {
if (area == "works") {
if (audio?.src != src) audio.src = src;
audio.play().then(() => {
audioList.value.forEach((item) => {
if (item.url == src) item["state"] = true;
});
});
});
}
}
console.log("area", area, src);
if (area == "custom") {
if (audio?.src != src) audio.src = src;
audio.play().then(() => {
customList.value.forEach((item) => {
if (item.src == src) item["state"] = true;
});
});
}
});
};
const closeAll = () => {
audioPlayer.value.pause();
audioHeadState.value = false;
audioList.value.forEach((item) => {
item["progress"] = 0;
item["state"] = false;
});
customList.value.forEach((item) => {
item["progress"] = 0;
item["state"] = false;
});
};
return { closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
let customList = ref([
{
src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
},
{
src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
},
{
src: "https://app.gter.net/image/miniApp/mp3/3.mp3",
},
{
src: "https://app.gter.net/image/miniApp/mp3/4.mp3",
},
]);
return { scrollToPrevious, scrollToNext, changePointer, pointerState, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
},
}).mount("#appIndex");

0
js/vue.global.js → static/js/vue.global.js
View File

0
mp3/1.MP3 → static/mp3/1.MP3
View File