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

no message

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-11 14:45:15 +08:00
parent cdd34ea0ed
commit 7116519dd8
5 changed files with 322 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
static/css/index.css
View File

@@ -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;

34
static/css/index.less
View File

@@ -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;
}
}
}

57
static/js/index.js
View File

@@ -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 };