diff --git a/1.html b/1.html new file mode 100644 index 0000000..26f7246 --- /dev/null +++ b/1.html @@ -0,0 +1,235 @@ + + + + + + 朴见潮音官网 + + + + + + +
+ + + + +
+
+ +
+
+
+
+
+
+ AI music + Pioneering brand +
+
+
+ + +
+
中国AIGC产业联盟(AIGCxChina)
+
温州市社科联
+
温州市新闻媒体中心
+
第一届AI音乐春晚 正选节目
+
+
+
+
+ + + + + + + + +
+
+
+
+ +
{{ item.title }}
+
{{ item.text }}
+
+
+
+ +
+ +
+ + + + + + + + +
+
+
+ +
{{ index + 1}}
+
深港双城故事
+
{{ text }}
+
2024.12
+
+ + +
+
+
+ +
+
+ +
{{ index + 1 }}
+
+
+ + +
+
+
画Remix
+
AI音乐榜冠军
+
2024.3
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ +
+ +
+
+ +
往事可成追忆,把你的故事谱成歌
+
+
+
+
画Remix
+
走过的路汇成星河,脚下的路更辽阔
+
+
+
+
+
+
+ + + + +
+
+ + +
+
+
+ + + +
+
+
+ +
+
+ +
+ + + + + + + +
+
《听风少年的梦幻之城》
+
+ + 林林林 | 7岁 | 广州 +
+ +
+
+
+
+
+ + +
+ + + + + +
+
+
+ +
我们可以为你提供AI音乐定制服务,谱写你独有的人生歌曲
+
我们可以为你提供AI音乐教学培训服务,让你拥有独立完成音乐作品的能力
+ + + +
+
+ + + +
+ +
+
+
+ + + + diff --git a/index.html b/index.html index 26f7246..b85c09d 100644 --- a/index.html +++ b/index.html @@ -176,13 +176,7 @@
- - - - - - - +
《听风少年的梦幻之城》
diff --git a/static/css/index.css b/static/css/index.css index f91cad6..4a37dc7 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -685,33 +685,33 @@ cursor: pointer; transition: all 0.3s ease-in-out; } -.content .student .student-box .list .img.img6 { +.content .student .student-box .list .img.img5 { left: 0; z-index: 2; } -.content .student .student-box .list .img.img4 { +.content .student .student-box .list .img.img3 { left: 149px; z-index: 4; } -.content .student .student-box .list .img.img2 { +.content .student .student-box .list .img.img1 { left: 299px; z-index: 6; } -.content .student .student-box .list .img.img1 { +.content .student .student-box .list .img.img0 { width: 320px; height: 320px; left: 440px; z-index: 7; } -.content .student .student-box .list .img.img3 { +.content .student .student-box .list .img.img2 { left: 654px; z-index: 5; } -.content .student .student-box .list .img.img5 { +.content .student .student-box .list .img.img4 { left: 804px; z-index: 3; } -.content .student .student-box .list .img.img7 { +.content .student .student-box .list .img.img6 { left: 954px; z-index: 1; } diff --git a/static/css/index.less b/static/css/index.less index 62d73ae..9b80cb1 100644 --- a/static/css/index.less +++ b/static/css/index.less @@ -787,39 +787,39 @@ cursor: pointer; transition: all 0.3s ease-in-out; - &.img6 { + &.img5 { left: 0; z-index: 2; } - &.img4 { + &.img3 { left: 149px; z-index: 4; } - &.img2 { + &.img1 { left: 299px; z-index: 6; } - &.img1 { + &.img0 { width: 320px; height: 320px; left: 440px; z-index: 7; } - &.img3 { + &.img2 { left: 654px; z-index: 5; } - &.img5 { + &.img4 { left: 804px; z-index: 3; } - &.img7 { + &.img6 { left: 954px; z-index: 1; } diff --git a/static/img/student-img-2.png b/static/img/student-img-2.png new file mode 100644 index 0000000..fb0a0f1 Binary files /dev/null and b/static/img/student-img-2.png differ diff --git a/static/img/student-img-3.png b/static/img/student-img-3.png new file mode 100644 index 0000000..178533d Binary files /dev/null and b/static/img/student-img-3.png differ diff --git a/static/img/student-img-4.png b/static/img/student-img-4.png new file mode 100644 index 0000000..65cbb4e Binary files /dev/null and b/static/img/student-img-4.png differ diff --git a/static/img/student-img-5.png b/static/img/student-img-5.png new file mode 100644 index 0000000..89fe315 Binary files /dev/null and b/static/img/student-img-5.png differ diff --git a/static/img/student-img-6.png b/static/img/student-img-6.png new file mode 100644 index 0000000..c9c0796 Binary files /dev/null and b/static/img/student-img-6.png differ diff --git a/static/img/student-img-7.png b/static/img/student-img-7.png new file mode 100644 index 0000000..e28f79a Binary files /dev/null and b/static/img/student-img-7.png differ diff --git a/static/js/index.js b/static/js/index.js index fa86b73..ec84c14 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -3,22 +3,22 @@ const search = createApp({ setup() { const trait = [ { - icon: "./img/headset-icon.png", + icon: "./static/img/headset-icon.png", title: "音乐创作", text: "朴见潮音,2024 年成立于广州,是专注 AI 音乐领域的创新工作室。短短一年便跻身于AI音乐浪潮先锋品牌!", }, { - icon: "./img/mv-icon.png", + icon: "./static/img/mv-icon.png", title: "MV创作", text: "以 AI 技术为核心,整合音乐创作、MV 制作、教学培训、发行级重制等业务,为创作者和爱好者打造一站式平台。", }, { - icon: "./img/train-icon.png", + icon: "./static/img/train-icon.png", title: "教学培训", text: "工作室运用多种 AI 工具,突破传统创作局限,支持流行、摇滚等多元风格创作,满足个性化需求。", }, { - icon: "./img/remake-icon.png", + icon: "./static/img/remake-icon.png", title: "发行级重制", text: "构建全流程服务体系,从 AI 音乐创作、MV 视觉呈现,到零基础教学,再到发行级重制提升品质,实现作品价值最大化。", }, @@ -90,25 +90,25 @@ const search = createApp({ const element = document.querySelector(`.${state}`); if (!element) return; - element.scrollIntoView({ + element.scrollIntoView({ behavior: "smooth", }); }; // 向上滚动到上一页 const scrollToPrevious = () => { - const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value); + const currentIndex = ["introduce", "works", "custom", "student"].indexOf(pointerState.value); if (currentIndex > 0) { - const prevState = ['introduce', 'works', 'custom', 'student'][currentIndex - 1]; + const prevState = ["introduce", "works", "custom", "student"][currentIndex - 1]; changePointer(prevState); } }; // 向下滚动到下一页 const scrollToNext = () => { - const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value); + const currentIndex = ["introduce", "works", "custom", "student"].indexOf(pointerState.value); if (currentIndex < 3) { - const nextState = ['introduce', 'works', 'custom', 'student'][currentIndex + 1]; + const nextState = ["introduce", "works", "custom", "student"][currentIndex + 1]; changePointer(nextState); } }; @@ -335,6 +335,51 @@ const search = createApp({ }, ]); - 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 }; + let studentIndex = ref(0); + + let studentList = ref([ + { + img: "./static/img/student-img.png", + src: "https://app.gter.net/image/miniApp/mp3/1.mp3", + serial: 0, + }, + { + 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); + }; + + 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 }; }, }).mount("#appIndex");