+
![]()
@@ -68,7 +68,7 @@
@@ -68,7 +68,7 @@
-
+
![]()
-
{{ item.title }}
{{ item.text }}
@@ -99,7 +99,7 @@
{{ item.date }}
+
![]()
@@ -119,7 +119,7 @@
{{ item.title }}
{{ item.desc }}
{{ item.date }}
-
+
@@ -145,7 +145,7 @@
{{ item.title }}
{{ item.desc }}
-
+
@@ -172,7 +172,7 @@
- ![]()
+ ![]()
《{{ zeroOrderStudents.title }}》
@@ -180,7 +180,7 @@
{{ zeroOrderStudents.name }} | {{ zeroOrderStudents.age }}岁 | {{ zeroOrderStudents.city }}
-
+
diff --git a/static/css/index.css b/static/css/index.css
index 7006c6d..567bc23 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -224,6 +224,7 @@
.content .introduce .trait {
background-color: #ffffff;
height: 420px;
+ justify-content: space-between;
}
.content .introduce .trait .item {
padding-top: 98px;
@@ -244,7 +245,7 @@
margin-bottom: 42px;
}
.content .introduce .trait .item .text {
- width: 266px;
+ width: 270px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
diff --git a/static/css/index.less b/static/css/index.less
index 8b10484..39ea6dd 100644
--- a/static/css/index.less
+++ b/static/css/index.less
@@ -255,7 +255,7 @@
.trait {
background-color: #ffffff;
height: 420px;
-
+ justify-content: space-between;
.item {
padding-top: 98px;
flex-direction: column;
@@ -276,7 +276,7 @@
}
.text {
- width: 266px;
+ width: 270px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
diff --git a/static/js/index.js b/static/js/index.js
index 8310682..45cba22 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -64,7 +64,9 @@ const search = createApp({
if (item.playurl == src) item.progress = val;
});
- if (zeroOrderStudents.value?.playurl == src) zeroOrderStudents.value["progress"] = val;
+ if (zeroOrderStudents.value?.playurl == src) {
+ zeroOrderStudents.value["progress"] = val;
+ }
};
const introduceRef = ref(null);
@@ -108,6 +110,7 @@ const search = createApp({
const init = () => {
ajax("https://pujianchaoyin.com/api/getHomeData").then((res) => {
+ // ajax("https://pujianchaoyin.com/index/api").then((res) => {
if (res.code != 200) return;
const data = res.data;
console.log("data", data);
@@ -136,7 +139,9 @@ const search = createApp({
};
let bannerSwiperTimer = null;
+ // 头部轮播图 定时器
const bannerSwiper = () => {
+ clearTimeout(bannerSwiperTimer);
bannerSwiperTimer = setTimeout(() => {
let index = pointerIndex.value + 1;
if (index > bannerList.value.length - 1) index = 0;
@@ -145,6 +150,7 @@ const search = createApp({
}, 3000);
};
+ // 头部轮播图 - 切换 定时器
const changeInterval = (type) => {
if (type) clearTimeout(bannerSwiperTimer);
else bannerSwiper();
@@ -172,7 +178,7 @@ const search = createApp({
let art = null;
// 开启播放 MV
- const openPreview = (id, poster = "") => {
+ const openPreview = (id) => {
ajax("https://pujianchaoyin.com/api/getMvDetail", {
id,
}).then((res) => {
@@ -180,12 +186,13 @@ const search = createApp({
const data = res.data;
previewState.value = true;
+
nextTick(() => {
art = new Artplayer({
container: ".artplayer-app",
url: data.playurl,
autoplay: true,
- poster,
+ poster: data.img || "",
fullscreen: true,
});
art.play();
@@ -220,13 +227,16 @@ const search = createApp({
getProgress();
};
+ // 播放 组件数据
let playData = ref(null);
+ // 管理音频播放
const manageAudio = (src, area) => {
const audio = audioPlayer.value;
closeAll();
nextTick(() => {
if (audio?.src != src) audio.src = src;
+ console.log("audio", audio);
audio.play().then(() => {
if (area == "works") {
@@ -262,6 +272,7 @@ const search = createApp({
manageAudio(playurl, area);
};
+ // 关闭所有播放
const closeAll = () => {
audioPlayer.value.pause();
@@ -275,46 +286,44 @@ const search = createApp({
zeroOrderStudents.value["state"] = false;
- console.log("playData", playData);
-
playData.value && (playData.value.state = false);
};
+ // 定制音乐 数据
let customList = ref([]);
- let studentIndex = ref(0);
- let zeroOrderStudents = ref({});
+ let studentList = ref([]); // 学生数据
+ let studentIndex = ref(0); // 学生下标
+ let zeroOrderStudents = ref({}); // 学生 选中播放 数据
- let studentList = ref([]);
-
- const cutStudent = (order) => {
+ // 切换学生 播放
+ const cutStudent = (index) => {
// 找到目标元素和第一个元素
- const [target, first] = [studentList.value.find((item) => item.order == order), studentList.value.find((item) => item.order == 0)];
+ const [target, first] = [studentList.value[index], studentList.value.find((item) => item.order == 0)];
// 交换order值
if (target && first && target !== first) [target.order, first.order] = [first.order, target.order];
- console.log("studentList.value", studentList.value);
-
zeroOrderStudents.value = target;
-
+ studentIndex.value = index;
target.playurl ? manageAudio(target.playurl, "student") : getPlayUrl(0, "student");
};
- // 响应式数据：音量值、是否静音
- const volume = ref(84);
- const isMuted = ref(false);
+ // 切换学生 歌曲 上\下一首
+ const cutSong = (type) => {
+ const listLength = studentList.value.length;
+ const index = studentIndex.value;
+ let newIndex = 0;
- // 切换静音状态的方法
- const toggleMute = () => {
- isMuted.value = !isMuted.value;
- if (audioPlayer.value) {
- audioPlayer.value.muted = isMuted.value;
- }
+ if (type === "up") newIndex = index - 1 < 0 ? listLength - 1 : index - 1;
+ else if (type === "down") newIndex = index + 1 >= listLength ? 0 : index + 1;
+ cutStudent(newIndex);
};
+ // 响应式数据：音量值、是否静音
+ let volume = ref(100);
+
// 计算并设置音量百分比
const setVolumePercentage = (percentage) => {
- // 确保百分比在0-100之间
const volumePercent = Math.max(0, Math.min(100, percentage));
volume.value = Math.abs(~~volumePercent);
@@ -328,11 +337,8 @@ const search = createApp({
const progressBar = event.currentTarget;
const rect = progressBar.getBoundingClientRect();
- // 计算点击位置相对于进度条的比例
- // 因为是垂直进度条，所以用clientY
const clickPosition = rect.bottom - event.clientY;
const percentage = (clickPosition / rect.height) * 100;
- console.log("percentage", percentage);
setVolumePercentage(percentage);
};
@@ -436,6 +442,7 @@ const search = createApp({
document.removeEventListener("mouseup", stopBarDragBottom);
};
+ // 直接点击进度条 跳转
const handleBarDragBottomClick = (event) => {
// 获取进度条元素
const progressBar = event.currentTarget;
@@ -476,11 +483,9 @@ const search = createApp({
};
const getPlayUrl = (index, area) => {
- console.log("index", index);
let id = null;
if (area == "student") {
const item = zeroOrderStudents.value;
- console.log("item", item.id);
id = item.id;
}
@@ -489,31 +494,14 @@ const search = createApp({
}).then((res) => {
if (res.code != 200) return;
const data = res.data;
- console.log("data", data);
-
- zeroOrderStudents.value = { ...data, ...zeroOrderStudents.value };
-
- manageAudio(data.playurl, area);
-
- console.log(zeroOrderStudents.value, "zeroOrderStudents");
+ if (area == "student") {
+ zeroOrderStudents.value = { ...data, ...zeroOrderStudents.value };
+ manageAudio(data.playurl, area);
+ console.log(zeroOrderStudents.value, "zeroOrderStudents");
+ }
});
};
- const cutSong = (type, order) => {
- const listLength = studentList.value.length;
- let newOrder = 0;
-
- if (type === "up") {
- // 上一首：order减1，如果小于0则设置为列表最后一个元素的order
- newOrder = order - 1 < 0 ? listLength - 1 : order - 1;
- } else if (type === "down") {
- // 下一首：order加1，如果大于等于列表长度则设置为0
- newOrder = order + 1 >= listLength ? 0 : order + 1;
- }
-
- cutStudent(newOrder);
- };
-
- return { cutSong, getPlayUrl, handleBarDragBottomClick, startBarDragBottom, volumeShow, handleVolumeHide, handleVolumeShow, zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, trait, fastForward };
+ return { cutSong, getPlayUrl, handleBarDragBottomClick, startBarDragBottom, volumeShow, handleVolumeHide, handleVolumeShow, zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, trait, fastForward };
},
}).mount("#appIndex");