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:08:30 +08:00
parent 798a144791
commit cdd34ea0ed
11 changed files with 305 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
1.html Normal file
View File

@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>朴见潮音官网</title>
<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;
}
</style>
</head>
<body>
<div class="content" id="appIndex" v-cloak>
<!-- 原生audio标签（隐藏） -->
<audio ref="audioPlayer" preload="none" loop></audio>
<div class="sidebar flexflex">
<div class="pointer">
<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 v-if="pointerState !== 'introduce'" class="item top orange" src="./static/img/arrow-orange.svg" @click="scrollToPrevious" />
<img v-else class="item top" src="./static/img/arrow-white.svg" />
<!-- 向下按钮：不是学生页时显示 -->
<img v-if="pointerState !== 'student'" class="item bottom orange" src="./static/img/arrow-orange.svg" @click="scrollToNext" />
<img v-else class="item bottom white" src="./static/img/arrow-white.svg" />
</div>
</div>
<div class="introduce" ref="introduceRef">
<div class="head flexacenter">
<div class="logo mar1200">
<img class="icon" src="./static/img/logo.png" />
</div>
</div>
<div class="box flexflex mar1200">
<div class="info">
<div class="brand flexacenter">
<div class="fill"></div>
<div class="text flexflex">
<span>AI music</span>
<span>Pioneering brand</span>
</div>
</div>
<div class="award flexflex">
<img class="title" src="./static/img/award-winning-works.png" />
<img class="name" src="./static/img/gushi.png" />
<div class="explain">
<div>中国AIGC产业联盟（AIGCxChina）</div>
<div>温州市社科联</div>
<div>温州市新闻媒体中心</div>
<div>第一届AI音乐春晚 正选节目</div>
</div>
</div>
</div>
<div class="album">
<img class="bj bj1" src="./static/img/album-bj1.svg" />
<img class="bj bj2" src="./static/img/album-bj2.svg" />
<img class="img" src="./static/img/album-img.svg" />
<img class="bj bj3" src="./static/img/album-bj3.svg" />
<img class="bj bj4" src="./static/img/album-bj4.png" />
<img class="bj bj5" src="./static/img/album-bj5.svg" />
<img v-if="!audioHeadState" class="play" @click="manageAudio('./mp3/1.MP3','head')" src="./static/img/play-white-icon.svg" />
<img v-else class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
</div>
</div>
<div class="trait flexflex mar1200">
<div class="item flexflex flex1" v-for="(item, index) in trait" :key="index">
<img class="icon" :src="item.icon" />
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.text }}</div>
</div>
</div>
</div>
<div class="works flexacenter" ref="worksRef">
<img class="bj1" src="./static/img/works-bj1.png" />
<div class="name-box">
<img class="bj" src="./static/img/works-title-bj.svg" />
<img class="title" src="./static/img/works-title.png" />
<img class="line line-1" src="./static/img/works-line-1.svg" />
<img class="line line-2" src="./static/img/works-line-2.svg" />
<img class="line line-3" src="./static/img/works-line-3.svg" />
<img class="line line-4" src="./static/img/works-line-4.svg" />
<img class="line line-5" src="./static/img/works-line-5.svg" />
<img class="line line-6" src="./static/img/works-line-6.svg" />
</div>
<div class="mv-box mar1200">
<div class="item flexflex" v-for="(item, index) in 6" :key="index">
<img class="serial-icon" src="./static/img/serial-icon.png" />
<div class="serial">{{ index + 1}}</div>
<div class="title">深港双城故事</div>
<div class="text">{{ text }}</div>
<div class="time">2024.12</div>
<div class="media" @click="openPreview(index)">
<img class="img" src="./static/img/mv-1.svg" />
<img class="play" src="./static/img/play-white-icon.svg" />
</div>
</div>
</div>
<div class="audio-box mar1200 flexflex">
<div class="item" v-for="(item, index) in audioList" :key="index">
<img class="serial-icon" src="./static/img/serial-icon.png" />
<div class="serial">{{ index + 1 }}</div>
<div class="content flexflex">
<div class="album">
<img class="img" src="./static/img/audio-img.png" />
<img class="icon" src="./static/img/record-icon.png" />
</div>
<div class="info flexflex">
<div class="name">画Remix</div>
<div class="subtitle">AI音乐榜冠军</div>
<div class="time">2024.3</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: item.progress + '%' }"></div>
<div class="circle"></div>
<div class="bar black flex1"></div>
</div>
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow', item.url, 'works')" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.url, 'works')" src="./static/img/play-black-icon.svg" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast', item.url, 'works')" />
</div>
</div>
</div>
</div>
</div>
<img class="bj2" src="./static/img/works-bj2.png" />
</div>
<div class="custom" ref="customRef">
<div class="custom-box mar1200 flexflex">
<img class="title" src="./static/img/custom-title.png" />
<div class="subtitle">往事可成追忆，把你的故事谱成歌</div>
<div class="list flexflex mar1200">
<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: item.progress + '%' }"></div>
<div class="circle"></div>
<div class="bar black flex1"></div>
</div>
<div class="operate flexcenter">
<img class="speed left" @click="fastForward('slow', item.src, 'custom')" src="./static/img/speed-left.png" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.src, 'custom')" src="./static/img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast', item.src, 'custom')" src="./static/img/speed-right.png" />
</div>
</div>
<img class="info-img" src="./static/img/custom-img.png" />
</div>
</div>
<div class="bottom flexcenter">
<img class="bj" src="./static/img/custom-bj-1.svg" />
<img class="bj" src="./static/img/custom-bj-2.svg" />
<img class="bj" src="./static/img/custom-bj-1.svg" />
</div>
</div>
</div>
<div class="student" ref="studentRef">
<div class="student-box flexflex">
<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="./static/img/student-img.png" />
</div>
<div class="name">《听风少年的梦幻之城》</div>
<div class="info flexacenter">
<img class="icon" src="./static/img/student-icon.svg" />
林林林 | 7岁 | 广州
</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: progress + '%' }"></div>
<div class="circle"></div>
<div class="bar black" :style="{ width: (100 - progress) + '%' }"></div>
</div>
<!-- <div class="time-display">
<span>{{ formatTime(currentTime) }}</span>
<span>/</span>
<span>{{ formatTime(duration) }}</span>
</div> -->
<div class="operate flexcenter">
<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="./static/img/contact-title.png" />
<div class="hint">我们可以为你提供AI音乐定制服务，谱写你独有的人生歌曲</div>
<div class="hint">我们可以为你提供AI音乐教学培训服务，让你拥有独立完成音乐作品的能力</div>
<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="./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="./static/img/close.svg" />
<div class="artplayer-app"></div>
</div>
</div>
<script src="./static/js/index.js"></script>
</body>
</html>

8
index.html
View File

@@ -176,13 +176,7 @@
<div class="student-box flexflex">
<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="./static/img/student-img.png" />
<img class="img" :class="[`img${ item.serial }`]" v-for="(item,index) in studentList" :src="item.img" :key="item.serial" @click="cutStudent(index)" />
</div>
<div class="name">《听风少年的梦幻之城》</div>
<div class="info flexacenter">

14
static/css/index.css
View File

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

14
static/css/index.less
View File

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

BIN
static/img/student-img-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/img/student-img-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/img/student-img-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
static/img/student-img-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
static/img/student-img-6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
static/img/student-img-7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

65
static/js/index.js
View File

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