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-12 16:57:43 +08:00
parent cbcd7a501d
commit 5a957acf3f
5 changed files with 440 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
create.html
View File

@@ -204,7 +204,7 @@
<div class="spinner"></div>
<div class="loading-text">加载中...</div>
</div>
<iframe id="haimian-iframe" src="https://www.haimian.com/" frameborder="0" allowfullscreen></iframe>
<iframe id="haimian-iframe" allow="encrypted-media" src="https://www.haimian.com/" frameborder="0" allowfullscreen></iframe>
</div>
<div class="logo-mask"></div>
<script>

91
index.html
View File

@@ -57,7 +57,7 @@
<img class="bj bj1" src="./static/img/album-bj1.svg" />
<img class="bj bj2" src="./static/img/album-bj2.svg" />
<div class="album-box" ref="albumBoxRef">
<div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.playurl)">
<div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.id, item.img)">
<img class="img" :src="item.img" />
<img class="bj bj3" src="./static/img/album-bj3.svg" />
<img class="bj bj4" src="./static/img/album-bj4.png" />
@@ -99,7 +99,7 @@
<div class="time">{{ item.date }}</div>
</div>
<div class="media" @click="openPreview(item.playurl, item.img)">
<div class="media" @click="openPreview(item.id, item.img)">
<img class="img" :src="item.img" />
<img class="play" src="./static/img/play-white-icon.svg" />
</div>
@@ -109,7 +109,7 @@
<div class="audio-box mar1200 flexflex">
<div class="item" v-for="(item, index) in awardAudioList" :key="index">
<img class="serial-icon" src="./static/img/serial-icon.png" />
<div class="serial">{{ index + 1 }}</div>
<div class="serial">{{ (index + 1 + '').padStart(2, '0') }}</div>
<div class="content flexflex">
<div class="album">
<img class="img" :src="item.img" />
@@ -124,10 +124,10 @@
<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.playurl, 'works')" />
<img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow')" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.playurl, 'works')" src="./static/img/play-black-icon.svg" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast', item.playurl, 'works')" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast')" />
</div>
</div>
</div>
@@ -150,10 +150,10 @@
<div class="bar black flex1"></div>
</div>
<div class="operate flexcenter">
<img class="speed left" @click="fastForward('slow', item.playurl, 'custom')" src="./static/img/speed-left.png" />
<img class="speed left" @click="fastForward('slow')" 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.playurl, 'custom')" src="./static/img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast', item.playurl, 'custom')" src="./static/img/speed-right.png" />
<img class="speed right" @click="fastForward('fast')" src="./static/img/speed-right.png" />
</div>
</div>
@@ -181,16 +181,17 @@
</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: progress + '%' }"></div>
<div class="bar white" :style="{ width: zeroOrderStudents.progress + '%' }"></div>
<div class="bar black flex1"></div>
</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" />
<img class="cut left" src="./static/img/cut-left.svg" @click="cutSong('up', zeroOrderStudents.order)" />
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="zeroOrderStudents.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="zeroOrderStudents.playurl ? manageAudio(zeroOrderStudents.playurl, 'student') : getPlayUrl(index, 'student')" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
<img class="cut right" src="./static/img/cut-right.svg" @click="cutSong('down', zeroOrderStudents.order)" />
</div>
</div>
<div class="contact flexflex mar1200">
@@ -203,7 +204,7 @@
</div>
</div>
<div class="footer flexcenter">
<div class="footer flexcenter" :style="{ marginBottom: playData ? '76px' : '' }">
<img class="logo" src="./static/img/ai-title.png" />
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div>
</div>
@@ -213,44 +214,42 @@
<div class="artplayer-app"></div>
</div>
<div class="bottom-play" v-if="playData">
<div class="bottom-box mar1200 flexacenter">
<div class="left flexacenter">
<img class="img" :src="playData?.img" />
<div class="name">{{ playData?.title }}</div>
<div class="bottom-play flexacenter" v-if="playData">
<div class="bottom-left flex1 flexacenter">
<img class="img" :src="playData?.img" />
<div class="name">{{ playData?.title }}</div>
</div>
<div class="bottom-middle flexcenter">
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
</div>
<div class="middle flex1 flexcenter">
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow', url, 'works')" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast', url, 'works')" />
</div>
<div class="flexacenter">
<div class="time-display">{{ currentTimeFormatted }}</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: progress + '%' }"></div>
<div class="bar black flex1"></div>
</div>
<div class="time-display">{{ durationFormatted }}</div>
<div class="flexacenter">
<div class="time-display">{{ currentTimeFormatted }}</div>
<div class="progress-bar flexacenter" @click="handleBarDragBottomClick">
<div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div>
<div class="bar black flex1"></div>
</div>
<div class="time-display">{{ durationFormatted }}</div>
</div>
</div>
<div class="right">
<div class="item">
<svg v-if="volume == 0" class="svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 16 16"><path fill="#FCFCFC" d="M1 6.334a1 1 0 0 1 1-1h1.385a.667.667 0 0 0 .505-.231l2.938-3.41A.667.667 0 0 1 8 2.13v11.85c0 .604-.74.896-1.154.454l-2.958-3.165a.667.667 0 0 0-.487-.211H2a1 1 0 0 1-1-1zm3.9-.36a2 2 0 0 1-1.515.694H2.333v3.055h1.068a2 2 0 0 1 1.461.635l1.805 1.93V3.924zM9.764 6.04 11.724 8l-1.96 1.96a.333.333 0 0 0 0 .471l.472.471c.13.13.341.13.471 0l1.96-1.96 1.96 1.96c.13.13.34.13.47 0l.472-.471a.333.333 0 0 0 0-.471L13.61 8l1.96-1.96a.333.333 0 0 0 0-.47l-.471-.472a.333.333 0 0 0-.472 0l-1.96 1.96-1.959-1.96a.333.333 0 0 0-.471 0l-.472.471a.333.333 0 0 0 0 .471"></path></svg>
<div class="bottom-right flex1 flexcenter">
<div class="item" @mouseenter="handleVolumeShow" @mouseleave="handleVolumeHide">
<svg v-if="volume == 0" class="svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 16 16"><path fill="#FCFCFC" d="M1 6.334a1 1 0 0 1 1-1h1.385a.667.667 0 0 0 .505-.231l2.938-3.41A.667.667 0 0 1 8 2.13v11.85c0 .604-.74.896-1.154.454l-2.958-3.165a.667.667 0 0 0-.487-.211H2a1 1 0 0 1-1-1zm3.9-.36a2 2 0 0 1-1.515.694H2.333v3.055h1.068a2 2 0 0 1 1.461.635l1.805 1.93V3.924zM9.764 6.04 11.724 8l-1.96 1.96a.333.333 0 0 0 0 .471l.472.471c.13.13.341.13.471 0l1.96-1.96 1.96 1.96c.13.13.34.13.47 0l.472-.471a.333.333 0 0 0 0-.471L13.61 8l1.96-1.96a.333.333 0 0 0 0-.47l-.471-.472a.333.333 0 0 0-.472 0l-1.96 1.96-1.959-1.96a.333.333 0 0 0-.471 0l-.472.471a.333.333 0 0 0 0 .471"></path></svg>
<svg v-else class="svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 16 16">
<path fill="#fff" d="M1.334 6.334a1 1 0 0 1 1-1h1.385a.667.667 0 0 0 .505-.231l2.938-3.41a.667.667 0 0 1 1.172.436v11.85c0 .604-.74.896-1.154.454l-2.958-3.165a.667.667 0 0 0-.487-.211H2.334a1 1 0 0 1-1-1zm3.9-.36a2 2 0 0 1-1.515.694H2.667v3.055h1.068a2 2 0 0 1 1.461.635L7 12.288V3.924zM10.344 6.127a.364.364 0 0 1 .013-.483l.472-.472a.314.314 0 0 1 .462.009c1.374 1.601 1.374 4.038 0 5.64a.314.314 0 0 1-.462.008l-.472-.471a.364.364 0 0 1-.013-.484 3.028 3.028 0 0 0 0-3.747"></path>
<path fill="#fff" d="M12.479 12.479a.348.348 0 0 1-.007-.478c2.013-2.248 2.013-5.753 0-8.001a.348.348 0 0 1 .007-.478l.471-.471c.13-.13.342-.13.466.005 2.525 2.764 2.525 7.126 0 9.89a.322.322 0 0 1-.466.004z"></path>
</svg>
<svg v-else class="svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 16 16">
<path fill="#fff" d="M1.334 6.334a1 1 0 0 1 1-1h1.385a.667.667 0 0 0 .505-.231l2.938-3.41a.667.667 0 0 1 1.172.436v11.85c0 .604-.74.896-1.154.454l-2.958-3.165a.667.667 0 0 0-.487-.211H2.334a1 1 0 0 1-1-1zm3.9-.36a2 2 0 0 1-1.515.694H2.667v3.055h1.068a2 2 0 0 1 1.461.635L7 12.288V3.924zM10.344 6.127a.364.364 0 0 1 .013-.483l.472-.472a.314.314 0 0 1 .462.009c1.374 1.601 1.374 4.038 0 5.64a.314.314 0 0 1-.462.008l-.472-.471a.364.364 0 0 1-.013-.484 3.028 3.028 0 0 0 0-3.747"></path>
<path fill="#fff" d="M12.479 12.479a.348.348 0 0 1-.007-.478c2.013-2.248 2.013-5.753 0-8.001a.348.348 0 0 1 .007-.478l.471-.471c.13-.13.342-.13.466.005 2.525 2.764 2.525 7.126 0 9.89a.322.322 0 0 1-.466.004z"></path>
</svg>
<div class="sound-control flexflex">
<div class="value">{{ volume }}</div>
<div class="progress flexflex" @click="handleVolumeClick">
<div class="bar" :style="{ height: volume + '%' }" @mousedown="startDrag"></div>
</div>
<div class="sound-control flexflex" v-if="volumeShow">
<div class="value">{{ volume }}</div>
<div class="progress flexflex" @click="handleVolumeClick">
<div class="bar" :style="{ height: volume + '%' }" @mousedown="startDrag"></div>
</div>
</div>
</div>

109
static/css/index.css
View File

@@ -187,10 +187,12 @@
height: 448px;
position: relative;
z-index: 1;
border-radius: 15px;
overflow: hidden;
}
.content .introduce .box .album .album-box .item .bj.bj3 {
width: 100%;
height: 100%;
width: 101%;
height: 101%;
z-index: 1;
}
.content .introduce .box .album .album-box .item .bj.bj4 {
@@ -396,6 +398,7 @@
.content .works .mv-box .item .media .img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.content .works .mv-box .item .media .play {
position: absolute;
@@ -611,38 +614,28 @@
position: relative;
cursor: pointer;
}
.content .custom .list .item .info .progress-bar .bar::after {
position: absolute;
}
.content .custom .list .item .info .progress-bar .bar.white {
width: 0;
border-radius: 10px 0 0 10px;
}
.content .custom .list .item .info .progress-bar .bar.white::after {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: #5241b0;
display: block;
border-radius: 10px 0 0 10px;
}
.content .custom .list .item .info .progress-bar .bar.black::after {
.content .custom .list .item .info .progress-bar .bar.white::before {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: #000000;
display: block;
border-radius: 0 10px 10px 0;
left: -5px;
}
.content .custom .list .item .info .progress-bar .circle {
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: relative;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
cursor: pointer;
z-index: 1;
display: block;
}
.content .custom .list .item .info .progress-bar .bar.black {
background-color: #000000;
border-radius: 0 10px 10px 0;
}
.content .custom .list .item .info .operate .speed {
width: 16px;
@@ -850,7 +843,8 @@
font-style: normal;
color: #f2f2f2;
font-size: 13px;
height: 180px;
padding-top: 55px;
padding-bottom: 55px;
background: linear-gradient(180deg, #5241b0 0%, #1e135e 100%);
}
.content .footer .logo {
@@ -887,17 +881,27 @@
height: 76px;
background-color: #353535;
z-index: 1000;
}
.content .bottom-play .bottom-box {
height: 100%;
justify-content: space-between;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
}
.content .bottom-play .bottom-box .left .img {
@keyframes fadeInUp {
0% {
bottom: -76px;
}
100% {
bottom: 0;
}
}
.content .bottom-play .bottom-left {
padding-left: 12px;
}
.content .bottom-play .bottom-left .img {
width: 56px;
height: 56px;
margin-right: 12px;
}
.content .bottom-play .bottom-box .left .name {
.content .bottom-play .bottom-left .name {
color: #fff;
font-size: 14px;
font-weight: 600;
@@ -907,51 +911,51 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.content .bottom-play .bottom-box .middle {
.content .bottom-play .bottom-middle {
flex-direction: column;
}
.content .bottom-play .bottom-box .middle .operate {
.content .bottom-play .bottom-middle .operate {
margin-bottom: 10px;
}
.content .bottom-play .bottom-box .middle .operate .cut {
.content .bottom-play .bottom-middle .operate .cut {
width: 14px;
height: 12px;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .operate .speed {
.content .bottom-play .bottom-middle .operate .speed {
width: 16px;
height: 12px;
margin: 0 40px;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .operate .play {
.content .bottom-play .bottom-middle .operate .play {
width: 24px;
height: 24px;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .time-display {
.content .bottom-play .bottom-middle .time-display {
color: #fff;
font-size: 12px;
line-height: 10px;
}
.content .bottom-play .bottom-box .middle .progress-bar {
.content .bottom-play .bottom-middle .progress-bar {
height: 10px;
width: 500px;
margin: 0 10px;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar {
.content .bottom-play .bottom-middle .progress-bar .bar {
height: 4px;
background-color: #ffffff;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar.white {
.content .bottom-play .bottom-middle .progress-bar .bar.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar.white::before {
.content .bottom-play .bottom-middle .progress-bar .bar.white::before {
content: "";
width: 10px;
height: 10px;
@@ -965,22 +969,23 @@
z-index: 1;
display: block;
}
.content .bottom-play .bottom-box .middle .progress-bar .bar.black {
.content .bottom-play .bottom-middle .progress-bar .bar.black {
background-color: #f2f2f2;
border-radius: 0 10px 10px 0;
}
.content .bottom-play .bottom-box .right .item {
position: relative;
.content .bottom-play .bottom-right {
justify-content: flex-end;
padding-right: 12px;
}
.content .bottom-play .bottom-box .right .item .svg {
.content .bottom-play .bottom-right .item {
position: relative;
margin-right: 18px;
}
.content .bottom-play .bottom-right .item .svg {
display: block;
cursor: pointer;
}
.content .bottom-play .bottom-box .right .item:hover .sound-control {
display: flex;
}
.content .bottom-play .bottom-box .right .item .sound-control {
display: none;
.content .bottom-play .bottom-right .item .sound-control {
justify-content: center;
left: 50%;
transform: translateX(-50%);
@@ -997,19 +1002,19 @@
padding: 12px;
cursor: auto;
}
.content .bottom-play .bottom-box .right .item .sound-control::after {
.content .bottom-play .bottom-right .item .sound-control::after {
content: "";
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
}
.content .bottom-play .bottom-box .right .item .sound-control .value {
.content .bottom-play .bottom-right .item .sound-control .value {
color: #fff;
font-size: 14px;
user-select: none;
}
.content .bottom-play .bottom-box .right .item .sound-control .progress {
.content .bottom-play .bottom-right .item .sound-control .progress {
width: 4px;
height: 100px;
border-radius: 4px;
@@ -1018,14 +1023,14 @@
justify-content: flex-end;
cursor: pointer;
}
.content .bottom-play .bottom-box .right .item .sound-control .progress .bar {
.content .bottom-play .bottom-right .item .sound-control .progress .bar {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 4px;
position: relative;
}
.content .bottom-play .bottom-box .right .item .sound-control .progress .bar::before {
.content .bottom-play .bottom-right .item .sound-control .progress .bar::before {
content: "";
width: 10px;
height: 10px;

348
static/css/index.less
View File

@@ -205,14 +205,15 @@
.item {
width: 800px;
height: 448px;
position: relative;
z-index: 1;
border-radius: 15px;
overflow: hidden;
.bj {
&.bj3 {
width: 100%;
height: 100%;
width: 101%;
height: 101%;
z-index: 1;
}
@@ -454,6 +455,7 @@
.img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.play {
@@ -702,45 +704,32 @@
position: relative;
cursor: pointer;
&::after {
position: absolute;
}
&.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
&::after {
&::before {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: #5241b0;
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;
border-radius: 10px 0 0 10px;
}
}
&.black {
&::after {
content: "";
width: calc(100% + 5px);
height: 100%;
background-color: rgba(0, 0, 0, 1);
display: block;
border-radius: 0 10px 10px 0;
left: -5px;
}
background-color: rgba(0, 0, 0, 1);
border-radius: 0 10px 10px 0;
}
}
.circle {
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: relative;
cursor: pointer;
z-index: 1;
}
}
.operate {
@@ -991,7 +980,9 @@
font-style: normal;
color: #f2f2f2;
font-size: 13px;
height: 180px;
padding-top: 55px;
padding-bottom: 55px;
// height: 180px;
background: linear-gradient(180deg, rgba(82, 65, 176, 1) 0%, rgba(30, 19, 94, 1) 100%);
.logo {
@@ -1032,78 +1023,175 @@
height: 76px;
background-color: #353535;
z-index: 1000;
justify-content: space-between;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
.bottom-box {
height: 100%;
justify-content: space-between;
@keyframes fadeInUp {
0% {
bottom: -76px;
}
.left {
.img {
width: 56px;
height: 56px;
margin-right: 12px;
100% {
bottom: 0;
}
}
.bottom-left {
padding-left: 12px;
.img {
width: 56px;
height: 56px;
margin-right: 12px;
}
.name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom-middle {
flex-direction: column;
.operate {
margin-bottom: 10px;
.cut {
width: 14px;
height: 12px;
cursor: pointer;
}
.name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.speed {
width: 16px;
height: 12px;
margin: 0 40px;
cursor: pointer;
}
.play {
width: 24px;
height: 24px;
cursor: pointer;
}
}
.middle {
flex-direction: column;
.time-display {
color: #fff;
font-size: 12px;
line-height: 10px;
}
.operate {
margin-bottom: 10px;
.progress-bar {
height: 10px;
width: 500px;
margin: 0 10px;
.bar {
height: 4px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
position: relative;
cursor: pointer;
.cut {
width: 14px;
height: 12px;
cursor: pointer;
&.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;
}
}
.speed {
width: 16px;
height: 12px;
margin: 0 40px;
cursor: pointer;
}
.play {
width: 24px;
height: 24px;
cursor: pointer;
&.black {
background-color: #f2f2f2;
border-radius: 0 10px 10px 0;
}
}
}
}
.time-display {
color: #fff;
font-size: 12px;
line-height: 10px;
.bottom-right {
justify-content: flex-end;
padding-right: 12px;
.item {
position: relative;
margin-right: 18px;
.svg {
display: block;
cursor: pointer;
}
// &:hover {
// .sound-control {
// display: flex;
// }
// }
.sound-control {
justify-content: center;
left: 50%;
transform: translateX(-50%);
height: 151px;
padding-bottom: 2px;
position: absolute;
top: -158px;
width: 42px;
align-items: center;
background: #1f1f1f;
border-radius: 8px;
flex-direction: column;
justify-content: space-between;
padding: 12px;
cursor: auto;
.progress-bar {
height: 10px;
width: 500px;
margin: 0 10px;
.bar {
height: 4px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
position: relative;
&::after {
content: "";
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
}
.value {
color: #fff;
font-size: 14px;
user-select: none;
}
.progress {
width: 4px;
height: 100px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
&.white {
width: 0;
border-radius: 10px 0 0 10px;
background-color: #5241b0;
.bar {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 4px;
position: relative;
&::before {
content: "";
width: 10px;
@@ -1111,97 +1199,13 @@
background-color: #f3974b;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -5px;
cursor: pointer;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
z-index: 1;
display: block;
}
}
&.black {
background-color: #f2f2f2;
border-radius: 0 10px 10px 0;
}
}
}
}
.right {
.item {
position: relative;
.svg {
display: block;
cursor: pointer;
}
&:hover {
.sound-control {
display: flex;
}
}
.sound-control {
display: none;
justify-content: center;
left: 50%;
transform: translateX(-50%);
height: 151px;
padding-bottom: 2px;
position: absolute;
top: -158px;
width: 42px;
align-items: center;
background: #1f1f1f;
border-radius: 8px;
flex-direction: column;
justify-content: space-between;
padding: 12px;
cursor: auto;
&::after {
content: "";
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
}
.value {
color: #fff;
font-size: 14px;
user-select: none;
}
.progress {
width: 4px;
height: 100px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
.bar {
width: 100%;
height: 50px;
background-color: #fff;
border-radius: 4px;
position: relative;
&::before {
content: "";
width: 10px;
height: 10px;
background-color: #f3974b;
border-radius: 50%;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
left: 50%;
z-index: 1;
display: block;
}
}
}
}
}
}

230
static/js/index.js
View File

@@ -24,11 +24,6 @@ const search = createApp({
},
];
const text = `中国AIGC产业联盟（AIGCxChina）
温州市社科联
温州市新闻媒体中心
第一届AI音乐春晚 正选节目`;
const audioPlayer = ref(null);
const progress = ref(0); // 播放进度百分比
@@ -68,6 +63,8 @@ const search = createApp({
studentList.value.forEach((item) => {
if (item.playurl == src) item.progress = val;
});
if (zeroOrderStudents.value?.playurl == src) zeroOrderStudents.value["progress"] = val;
};
const introduceRef = ref(null);
@@ -110,9 +107,11 @@ const search = createApp({
let awardAudioList = ref([]);
const init = () => {
ajaxget("https://pujianchaoyin.com/index/api").then((res) => {
ajax("https://pujianchaoyin.com/api/getHomeData").then((res) => {
if (res.code != 200) return;
const data = res.data;
console.log("data", data);
bannerList.value = data.banner;
awardMVList.value = data.awardMVList;
@@ -125,17 +124,14 @@ const search = createApp({
customList.value = data.customAudioList;
studentList.value = data.studentList || [];
console.log("customList", studentList.value[0]);
studentList.value.forEach((item, index) => {
item["title"] = index;
item["order"] = index;
});
zeroOrderStudents.value = studentList.value[0];
nextTick(() => {
bannerSwiper();
});
nextTick(() => bannerSwiper());
});
};
@@ -176,17 +172,24 @@ const search = createApp({
let art = null;
// 开启播放 MV
const openPreview = (url, poster = "") => {
previewState.value = true;
nextTick(() => {
art = new Artplayer({
container: ".artplayer-app",
url,
autoplay: true,
poster,
fullscreen: true,
const openPreview = (id, poster = "") => {
ajax("https://pujianchaoyin.com/api/getMvDetail", {
id,
}).then((res) => {
if (res.code != 200) return;
const data = res.data;
previewState.value = true;
nextTick(() => {
art = new Artplayer({
container: ".artplayer-app",
url: data.playurl,
autoplay: true,
poster,
fullscreen: true,
});
art.play();
});
art.play();
});
};
@@ -198,8 +201,11 @@ const search = createApp({
};
// 快进 和 后退 10秒
const fastForward = (type = "fast", src, area) => {
const fastForward = (type = "fast") => {
if (!audioPlayer.value) return;
const src = playData.value?.playurl || "";
const area = playData.value?.area || "";
if (audioPlayer.value.src != src) {
manageAudio(src, area);
return;
@@ -240,6 +246,11 @@ const search = createApp({
}
});
}
if (area == "student") {
zeroOrderStudents.value["state"] = true;
playData.value = { ...zeroOrderStudents.value, area };
}
});
});
};
@@ -253,13 +264,17 @@ const search = createApp({
const closeAll = () => {
audioPlayer.value.pause();
awardAudioList.value.forEach((item) => {
item["state"] = false;
});
customList.value.forEach((item) => {
item["state"] = false;
});
zeroOrderStudents.value["state"] = false;
console.log("playData", playData);
playData.value && (playData.value.state = false);
@@ -270,16 +285,7 @@ const search = createApp({
let studentIndex = ref(0);
let zeroOrderStudents = ref({});
let studentList = ref([
{
src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
img: "./static/img/student-img.png",
},
{
src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
img: "./static/img/student-img-2.png",
},
]);
let studentList = ref([]);
const cutStudent = (order) => {
// 找到目标元素和第一个元素
@@ -287,7 +293,11 @@ const search = createApp({
// 交换order值
if (target && first && target !== first) [target.order, first.order] = [first.order, target.order];
console.log("studentList.value", studentList.value);
zeroOrderStudents.value = target;
target.playurl ? manageAudio(target.playurl, "student") : getPlayUrl(0, "student");
};
// 响应式数据：音量值、是否静音
@@ -309,7 +319,7 @@ const search = createApp({
volume.value = Math.abs(~~volumePercent);
// 设置音频元素的音量（范围是0-1）
if (audioPlayer.value) audioPlayer.value.volume = volumePercent / 100;
if (audioPlayer.value) audioPlayer.value.volume = volume.value / 100;
};
// 处理音量进度条点击
@@ -322,17 +332,18 @@ const search = createApp({
// 因为是垂直进度条，所以用clientY
const clickPosition = rect.bottom - event.clientY;
const percentage = (clickPosition / rect.height) * 100;
console.log("percentage", percentage);
setVolumePercentage(percentage);
};
let volumeShow = ref(false);
// 处理音量进度条拖拽
let isDragging = false;
const startDrag = (event) => {
isDragging = true;
handleVolumeDrag(event);
// 添加事件监听器
document.addEventListener("mousemove", handleVolumeDrag);
document.addEventListener("mouseup", stopDrag);
@@ -362,40 +373,39 @@ const search = createApp({
document.removeEventListener("mouseup", stopDrag);
};
onMounted(() => {
// 绑定音量控制相关事件
const progressBar = document.querySelector(".sound-control .progress");
if (progressBar) {
progressBar.addEventListener("click", handleVolumeClick);
const handleVolumeShow = () => (volumeShow.value = true);
// 找到进度条内的滑块元素（bar）并绑定拖拽事件
const volumeBar = progressBar.querySelector(".bar");
if (volumeBar) volumeBar.addEventListener("mousedown", startDrag);
}
});
const handleVolumeHide = () => (volumeShow.value = false);
onUnmounted(() => {
// 清理音量控制相关事件
const progressBar = document.querySelector(".sound-control .progress");
if (progressBar) {
progressBar.removeEventListener("click", handleVolumeClick);
const volumeBar = progressBar.querySelector(".bar");
if (volumeBar) volumeBar.removeEventListener("mousedown", startDrag);
}
// 确保移除所有拖拽相关事件
document.removeEventListener("mousemove", handleVolumeDrag);
document.removeEventListener("mouseup", stopDrag);
document.removeEventListener("mousemove", handleBarDragBottomDrag);
document.removeEventListener("mouseup", stopBarDragBottom);
});
const ajax = (url, data = {}) => {
if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
return new Promise(function (resolve, reject) {
axios
.post(url, data, {
emulateJSON: true,
withCredentials: true,
})
.then(function (res) {
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
resolve(data);
});
});
};
const ajaxget = (url, data) => {
if (!data) data = {};
if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
url = url.indexOf("https://") == -1 ? projectBaseURL2 + url : url;
return new Promise((resolve, reject) => {
axios
.get(url, {
@@ -404,24 +414,106 @@ const search = createApp({
})
.then((res) => {
var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
if (data.code == 401) {
openShowWindow();
reject();
}
if (data.code == 201) creationAlertBox("error", data.message || data.msg);
resolve(data);
})
.catch((error) => {
// console.log("resolve", resolve)
if (error.response?.status == 401) openShowWindow();
resolve("");
});
});
};
return { 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, text, trait, fastForward };
// 处理音量进度条拖拽
let isBarBottomDragging = false;
const startBarDragBottom = (event) => {
isBarBottomDragging = true;
handleBarDragBottomDrag(event);
// 添加事件监听器
document.addEventListener("mousemove", handleBarDragBottomDrag);
document.addEventListener("mouseup", stopBarDragBottom);
};
const stopBarDragBottom = () => {
isBarBottomDragging = false;
document.removeEventListener("mousemove", handleBarDragBottomDrag);
document.removeEventListener("mouseup", stopBarDragBottom);
};
const handleBarDragBottomClick = (event) => {
// 获取进度条元素
const progressBar = event.currentTarget;
const rect = progressBar.getBoundingClientRect();
const clickPosition = event.clientX - rect.left;
const percentage = clickPosition / rect.width;
// 限制百分比在0-100之间
const clampedPercentage = Math.max(0, Math.min(100, percentage));
updatePlay(clampedPercentage);
};
const handleBarDragBottomDrag = (event) => {
if (!isBarBottomDragging) return;
// 获取音量进度条元素
const progressBar = document.querySelector(".bottom-play .middle .progress-bar");
if (!progressBar) return;
const rect = progressBar.getBoundingClientRect();
// 计算拖拽位置相对于进度条的比例
let dragPosition = event.clientX - rect.left;
// 限制在进度条范围内
dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
const percentage = dragPosition / rect.width;
updatePlay(percentage);
};
const updatePlay = (percentage) => {
if (!audioPlayer.value) return;
const duration = audioPlayer.value.duration || 0;
let newTime = duration * percentage;
newTime = Math.max(0, Math.min(duration, newTime));
audioPlayer.value.currentTime = newTime;
getProgress();
};
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;
}
ajax("https://pujianchaoyin.com/api/getMusicDetail", {
id,
}).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");
});
};
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 };
},
}).mount("#appIndex");