From 7116519dd86e9221975a9400935a313c2569ac82 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Thu, 11 Sep 2025 14:45:15 +0800 Subject: [PATCH] no message --- create.html | 242 ++++++++++++++++++++++++++++++++++++++++++ index.html | 11 +- static/css/index.css | 21 +++- static/css/index.less | 34 ++++-- static/js/index.js | 57 +++++----- 5 files changed, 322 insertions(+), 43 deletions(-) create mode 100644 create.html diff --git a/create.html b/create.html new file mode 100644 index 0000000..4f7e413 --- /dev/null +++ b/create.html @@ -0,0 +1,242 @@ + + + + + + 朴见潮音 + + + + +
+
+
+ +
探索音乐的无限可能
+
+
+ + + +
+
+
+
+
+ +
加载中...
+
+ +
+
+ + + diff --git a/index.html b/index.html index b85c09d..74f06fe 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@ - + @@ -176,7 +176,7 @@
- +
《听风少年的梦幻之城》
@@ -187,13 +187,8 @@
-
+
-
diff --git a/static/css/index.css b/static/css/index.css index 4a37dc7..a394e65 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -748,12 +748,31 @@ height: 4px; background-color: #ffffff; border-radius: 10px; + position: relative; + cursor: pointer; } -.content .student .student-box .progress-bar .circle { +.content .student .student-box .progress-bar .bar.white { + width: 0; + border-radius: 10px 0 0 10px; + background-color: #5241b0; +} +.content .student .student-box .progress-bar .bar.white::before { + content: ""; width: 10px; height: 10px; background-color: #f3974b; border-radius: 50%; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -5px; + cursor: pointer; + z-index: 1; + display: block; +} +.content .student .student-box .progress-bar .bar.black { + background-color: #000000; + border-radius: 0 10px 10px 0; } .content .student .student-box .operate .cut { width: 14px; diff --git a/static/css/index.less b/static/css/index.less index 9b80cb1..b9f35e3 100644 --- a/static/css/index.less +++ b/static/css/index.less @@ -859,17 +859,37 @@ margin-bottom: 32px; .bar { - // width: 500px; height: 4px; background-color: rgba(255, 255, 255, 1); border-radius: 10px; - } + position: relative; + cursor: pointer; - .circle { - width: 10px; - height: 10px; - background-color: #f3974b; - border-radius: 50%; + &.white { + width: 0; + border-radius: 10px 0 0 10px; + background-color: #5241b0; + + &::before { + content: ""; + width: 10px; + height: 10px; + background-color: #f3974b; + border-radius: 50%; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: -5px; + cursor: pointer; + z-index: 1; + display: block; + } + } + + &.black { + background-color: rgba(0, 0, 0, 1); + border-radius: 0 10px 10px 0; + } } } diff --git a/static/js/index.js b/static/js/index.js index ec84c14..e134d39 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -149,29 +149,19 @@ const search = createApp({ 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); + setTimeout(() => initObserver(), 1000); // 添加进度更新事件监听器 if (audioPlayer.value) { audioPlayer.value.addEventListener("timeupdate", getProgress); audioPlayer.value.addEventListener("loadedmetadata", getProgress); } + + studentList.value.forEach((item, index) => { + item["order"] = index; + // item["random"] = generateRandomString(); + }); }); // 组件卸载时清理事件监听器 @@ -339,45 +329,58 @@ const search = createApp({ let studentList = ref([ { - img: "./static/img/student-img.png", src: "https://app.gter.net/image/miniApp/mp3/1.mp3", - serial: 0, + img: "./static/img/student-img.png", }, { src: "https://app.gter.net/image/miniApp/mp3/2.mp3", img: "./static/img/student-img-2.png", - serial: 1, }, { src: "https://app.gter.net/image/miniApp/mp3/3.mp3", img: "./static/img/student-img-3.png", - serial: 2, }, { src: "https://app.gter.net/image/miniApp/mp3/4.mp3", img: "./static/img/student-img-4.png", - serial: 3, }, { src: "https://app.gter.net/image/miniApp/mp3/4.mp3", img: "./static/img/student-img-5.png", - serial: 4, }, { src: "https://app.gter.net/image/miniApp/mp3/4.mp3", img: "./static/img/student-img-6.png", - serial: 5, }, { src: "https://app.gter.net/image/miniApp/mp3/4.mp3", img: "./static/img/student-img-7.png", - serial: 6, }, ]); - const cutStudent = (serial) => { - let index = studentList.value.findIndex((item) => item.serial == serial); - console.log("index", index); + const cutStudent = (order) => { + // 找到目标元素和第一个元素 + const [target, first] = [ + studentList.value.find(item => item.order == order), + studentList.value.find(item => item.order == 0) + ]; + // 交换order值 + if (target && first && target !== first) { + [target.order, first.order] = [first.order, target.order]; + } + }; + + const generateRandomString = () => { + const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + let result = ""; + const length = 6; + + for (let i = 0; i < length; i++) { + const randomIndex = Math.floor(Math.random() * chars.length); + result += chars.charAt(randomIndex); + } + + return result; }; return { cutStudent, studentList, studentIndex, 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 };