feat: 新增音频播放器功能及MV预览组件
style: 优化页面布局及样式细节 refactor: 重构音频播放逻辑与进度条控制 docs: 更新README说明音频播放功能 test: 添加音频播放器交互测试用例
This commit is contained in:
DESKTOP-RQ919RC\Pc
104
1.html
Normal file
104
1.html
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>红色进度条音频播放器</title>
|
||||||
|
<style>
|
||||||
|
/* 基础样式：控制播放器宽度和高度 */
|
||||||
|
audio {
|
||||||
|
width: 300px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chrome/Safari 样式 */
|
||||||
|
/* 隐藏所有控制按钮 */
|
||||||
|
audio::-webkit-media-controls-play-button,
|
||||||
|
audio::-webkit-media-controls-volume-slider-container,
|
||||||
|
audio::-webkit-media-controls-mute-button,
|
||||||
|
audio::-webkit-media-controls-volume-slider,
|
||||||
|
audio::-webkit-media-controls-current-time-display,
|
||||||
|
audio::-webkit-media-controls-time-remaining-display,
|
||||||
|
audio::-webkit-media-controls-playback-rate-button {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度条设置 */
|
||||||
|
audio::-webkit-media-controls-timeline {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度条背景 */
|
||||||
|
audio::-webkit-media-controls-timeline-container {
|
||||||
|
background-color: #eee !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 红色进度条和滑块 */
|
||||||
|
audio::-webkit-media-controls-thumb-container {
|
||||||
|
color: #ff0000 !important;
|
||||||
|
}
|
||||||
|
audio::-webkit-media-controls-timeline-progress-bar {
|
||||||
|
background-color: #ff0000 !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox 样式 */
|
||||||
|
/* 隐藏所有控制按钮 */
|
||||||
|
audio::-moz-media-controls-play-button,
|
||||||
|
audio::-moz-media-controls-volume-control,
|
||||||
|
audio::-moz-media-controls-playback-rate,
|
||||||
|
audio::-moz-media-controls-current-time-display,
|
||||||
|
audio::-moz-media-controls-time-remaining-display {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 控制面板样式 */
|
||||||
|
audio::-moz-media-controls-panel {
|
||||||
|
height: 30px !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 进度条背景 */
|
||||||
|
audio::-moz-media-controls-timeline {
|
||||||
|
background-color: #eee !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
height: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 红色进度条和滑块 */
|
||||||
|
audio::-moz-media-controls-progress-bar {
|
||||||
|
background-color: #ff0000 !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
}
|
||||||
|
audio::-moz-media-controls-thumb {
|
||||||
|
background-color: #ff0000 !important;
|
||||||
|
width: 14px !important;
|
||||||
|
height: 14px !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<audio controls loop>
|
||||||
|
<source src="audio1.mp3" type="audio/mpeg">
|
||||||
|
您的浏览器不支持音频播放
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const audio = document.querySelector('audio');
|
||||||
|
audio.addEventListener('click', () => {
|
||||||
|
if (audio.paused) {
|
||||||
|
audio.play().catch(err => {
|
||||||
|
alert('请先点击页面，再点击进度条播放');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
503
css/index.css
503
css/index.css
@@ -30,6 +30,52 @@
|
|||||||
width: 1200px;
|
width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
.content .sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 175px;
|
||||||
|
right: 100px;
|
||||||
|
z-index: 10;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.content .sidebar .pointer {
|
||||||
|
margin-bottom: 192px;
|
||||||
|
}
|
||||||
|
.content .sidebar .pointer .item {
|
||||||
|
width: 4px;
|
||||||
|
height: 50px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.content .sidebar .pointer .item.active {
|
||||||
|
background-color: #f3974b;
|
||||||
|
}
|
||||||
|
.content .sidebar .pointer .item.active::after {
|
||||||
|
content: attr(data-index);
|
||||||
|
position: absolute;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
color: #f3974b;
|
||||||
|
font-size: 14px;
|
||||||
|
top: 0;
|
||||||
|
left: -21px;
|
||||||
|
}
|
||||||
|
.content .sidebar .arrow {
|
||||||
|
width: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.content .sidebar .arrow .item {
|
||||||
|
width: 12px;
|
||||||
|
height: 7px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .sidebar .arrow .item:not(:last-of-type) {
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
.content .introduce {
|
.content .introduce {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -149,6 +195,7 @@
|
|||||||
left: 30px;
|
left: 30px;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.content .introduce .trait {
|
.content .introduce .trait {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@@ -259,6 +306,20 @@
|
|||||||
height: 500px;
|
height: 500px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-top: 29px;
|
padding-top: 29px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.content .works .mv-box .item:not(:nth-last-child(-n + 3)) {
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.content .works .mv-box .item:not(:nth-child(3n)) {
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.content .works .mv-box .item .serial-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 37px;
|
||||||
}
|
}
|
||||||
.content .works .mv-box .item .serial {
|
.content .works .mv-box .item .serial {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
@@ -277,6 +338,7 @@
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
|
margin-right: 40px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
}
|
}
|
||||||
.content .works .mv-box .item .text {
|
.content .works .mv-box .item .text {
|
||||||
@@ -288,6 +350,8 @@
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
white-space: pre-line;
|
||||||
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
.content .works .mv-box .item .time {
|
.content .works .mv-box .item .time {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
@@ -295,9 +359,448 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
|
padding: 0 40px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.content .works .mv-box .item .media {
|
||||||
|
position: relative;
|
||||||
|
width: 340px;
|
||||||
|
height: 191px;
|
||||||
|
margin: 0 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .works .mv-box .item .media .img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.content .works .mv-box .item .media .play {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
cursor: pointer;
|
||||||
|
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
.content .works .audio-box {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item {
|
||||||
|
height: 314px;
|
||||||
|
padding-top: 29px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item:not(:nth-last-child(-n + 2)) {
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item:not(:nth-child(2n)) {
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .serial-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .serial {
|
||||||
|
height: 44px;
|
||||||
|
font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 32px;
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .album {
|
||||||
|
width: 234px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-right: 36px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .album .img {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .album .icon {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .subtitle {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .progress-bar {
|
||||||
|
width: 260px;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 17px;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .progress-bar .bar {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .progress-bar .bar.white {
|
||||||
|
width: 0;
|
||||||
|
border-radius: 10px 0 0 10px;
|
||||||
|
background-color: #5241b0;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .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 .works .audio-box .item .content .info .progress-bar .bar.black {
|
||||||
|
background-color: #000000;
|
||||||
|
border-radius: 0 10px 10px 0;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .operate .speed {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .works .audio-box .item .content .info .operate .play {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 30px;
|
||||||
}
|
}
|
||||||
.content .works .bj2 {
|
.content .works .bj2 {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 196px;
|
height: 196px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
.content .custom {
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
.content .custom .custom-box {
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 106px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.content .custom .title {
|
||||||
|
width: 160px;
|
||||||
|
height: 39px;
|
||||||
|
margin: 0 auto 32px;
|
||||||
|
}
|
||||||
|
.content .custom .subtitle {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555555;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 131px;
|
||||||
|
}
|
||||||
|
.content .custom .list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.content .custom .list .item {
|
||||||
|
width: 560px;
|
||||||
|
height: 160px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10196078);
|
||||||
|
}
|
||||||
|
.content .custom .list .item:not(:nth-last-child(-n + 2)) {
|
||||||
|
margin-bottom: 140px;
|
||||||
|
}
|
||||||
|
.content .custom .list .item:last-of-type {
|
||||||
|
margin-bottom: 130px;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info {
|
||||||
|
width: 280px;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 18px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info .lyric {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info .progress-bar {
|
||||||
|
width: 260px;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 17px;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info .progress-bar .bar {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
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: 20%;
|
||||||
|
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: "";
|
||||||
|
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;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info .operate .speed {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info .operate .play {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
.content .custom .list .item .info-img {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||||
|
}
|
||||||
|
.content .custom .bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
height: 384px;
|
||||||
|
z-index: -1;
|
||||||
|
width: 99vw;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.content .custom .bottom .bj {
|
||||||
|
width: 640px;
|
||||||
|
height: 384px;
|
||||||
|
}
|
||||||
|
.content .student .student-box {
|
||||||
|
background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%);
|
||||||
|
padding-top: 105px;
|
||||||
|
padding-bottom: 130px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.content .student .student-box .title {
|
||||||
|
width: 160px;
|
||||||
|
height: 41px;
|
||||||
|
margin-bottom: 93px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .list {
|
||||||
|
margin-bottom: 69px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .list .img {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||||
|
}
|
||||||
|
.content .student .student-box .list .img.pitch {
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .info {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 62px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .info .icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .progress-bar {
|
||||||
|
height: 10px;
|
||||||
|
width: 500px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .progress-bar .bar {
|
||||||
|
height: 4px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.content .student .student-box .progress-bar .circle {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #f3974b;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.content .student .student-box .operate .cut {
|
||||||
|
width: 14px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .student .student-box .operate .speed {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
margin: 0 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .student .student-box .operate .play {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content .student .contact {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -30px;
|
||||||
|
padding-top: 124px;
|
||||||
|
padding-bottom: 113px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.content .student .contact .title {
|
||||||
|
width: 144px;
|
||||||
|
height: 38px;
|
||||||
|
margin-bottom: 63px;
|
||||||
|
}
|
||||||
|
.content .student .contact .hint {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.content .student .contact .arrows {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin-top: 37px;
|
||||||
|
margin-bottom: 53px;
|
||||||
|
}
|
||||||
|
.content .student .contact .WeChat {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
.content .student .contact .logo {
|
||||||
|
width: 82px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.content .footer {
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 180px;
|
||||||
|
background: linear-gradient(180deg, #5241b0 0%, #1e135e 100%);
|
||||||
|
}
|
||||||
|
.content .footer .logo {
|
||||||
|
width: 226px;
|
||||||
|
height: 30px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.content .preview {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #4c4c4c;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.content .preview .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.content .preview .artplayer-app {
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|||||||
586
css/index.less
586
css/index.less
@@ -33,6 +33,58 @@
|
|||||||
width: 1200px;
|
width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 175px;
|
||||||
|
right: 100px;
|
||||||
|
z-index: 10;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.pointer {
|
||||||
|
margin-bottom: 192px;
|
||||||
|
.item {
|
||||||
|
width: 4px;
|
||||||
|
height: 50px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: rgba(243, 151, 75, 1);
|
||||||
|
&::after {
|
||||||
|
content: attr(data-index);
|
||||||
|
position: absolute;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
color: #f3974b;
|
||||||
|
font-size: 14px;
|
||||||
|
top: 0;
|
||||||
|
left: -21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
width: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 12px;
|
||||||
|
height: 7px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.introduce {
|
.introduce {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&::after {
|
&::after {
|
||||||
@@ -164,6 +216,7 @@
|
|||||||
left: 30px;
|
left: 30px;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -293,6 +346,23 @@
|
|||||||
height: 500px;
|
height: 500px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-top: 29px;
|
padding-top: 29px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:not(:nth-last-child(-n + 3)) {
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:nth-child(3n)) {
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serial-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
|
||||||
.serial {
|
.serial {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
@@ -312,6 +382,7 @@
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
|
margin-right: 40px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -324,6 +395,8 @@
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
white-space: pre-line;
|
||||||
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
@@ -332,6 +405,177 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
|
padding: 0 40px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
position: relative;
|
||||||
|
width: 340px;
|
||||||
|
height: 191px;
|
||||||
|
margin: 0 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
cursor: pointer;
|
||||||
|
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-box {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 60px;
|
||||||
|
.item {
|
||||||
|
height: 314px;
|
||||||
|
padding-top: 29px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:not(:nth-last-child(-n + 2)) {
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:nth-child(2n)) {
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serial-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serial {
|
||||||
|
height: 44px;
|
||||||
|
font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 32px;
|
||||||
|
margin-left: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.album {
|
||||||
|
width: 234px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-right: 36px;
|
||||||
|
.img {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex-direction: column;
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 260px;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 17px;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.black {
|
||||||
|
background-color: rgba(0, 0, 0, 1);
|
||||||
|
border-radius: 0 10px 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate {
|
||||||
|
.speed {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -342,4 +586,346 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom {
|
||||||
|
background: rgba(249, 249, 249, 1);
|
||||||
|
|
||||||
|
.custom-box {
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 106px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 160px;
|
||||||
|
height: 39px;
|
||||||
|
margin: 0 auto 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555555;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 131px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
.item {
|
||||||
|
width: 560px;
|
||||||
|
height: 160px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||||||
|
|
||||||
|
&:not(:nth-last-child(-n + 2)) {
|
||||||
|
margin-bottom: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
width: 280px;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 18px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
height: 100%;
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lyric {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 260px;
|
||||||
|
height: 10px;
|
||||||
|
margin-bottom: 17px;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
&.white {
|
||||||
|
width: 20%;
|
||||||
|
border-radius: 10px 0 0 10px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: calc(100% + 5px);
|
||||||
|
height: 100%;
|
||||||
|
background-color: #5241b0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #f3974b;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate {
|
||||||
|
.speed {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-img {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
height: 384px;
|
||||||
|
z-index: -1;
|
||||||
|
width: 99vw;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.bj {
|
||||||
|
width: 640px;
|
||||||
|
height: 384px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.student {
|
||||||
|
.student-box {
|
||||||
|
background: linear-gradient(180deg, rgba(30, 19, 94, 1) 0%, rgba(82, 65, 176, 1) 100%);
|
||||||
|
padding-top: 105px;
|
||||||
|
padding-bottom: 130px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
width: 160px;
|
||||||
|
height: 41px;
|
||||||
|
margin-bottom: 93px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
margin-bottom: 69px;
|
||||||
|
.img {
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||||
|
&.pitch {
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 62px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 10px;
|
||||||
|
width: 500px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
// width: 500px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #f3974b;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate {
|
||||||
|
.cut {
|
||||||
|
width: 14px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
margin: 0 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -30px;
|
||||||
|
padding-top: 124px;
|
||||||
|
padding-bottom: 113px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 144px;
|
||||||
|
height: 38px;
|
||||||
|
margin-bottom: 63px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin-top: 37px;
|
||||||
|
margin-bottom: 53px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WeChat {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 82px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
color: #f2f2f2;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 180px;
|
||||||
|
background: linear-gradient(180deg, rgba(82, 65, 176, 1) 0%, rgba(30, 19, 94, 1) 100%);
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 226px;
|
||||||
|
height: 30px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #4c4c4c;
|
||||||
|
z-index: 1000;
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.artplayer-app {
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
img/WeChat-img.jpg
Normal file
BIN
img/WeChat-img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
img/ai-title.png
Normal file
BIN
img/ai-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
6
img/arrow-orange.svg
Normal file
6
img/arrow-orange.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1548 -616 )">
|
||||||
|
<path d="M 11.8797595190381 0.721649484536082 C 11.9599198396794 0.801832760595645 12 0.894043528064146 12 0.998281786941581 C 12 1.10252004581901 11.9599198396794 1.19473081328751 11.8797595190381 1.27491408934708 L 6.27655310621242 6.87972508591065 C 6.19639278557114 6.95990836197022 6.10420841683367 7 6 7 C 5.89579158316633 7 5.80360721442886 6.95990836197022 5.72344689378757 6.87972508591065 L 0.120240480961924 1.27491408934708 C 0.0400801603206414 1.19473081328751 0 1.10252004581901 0 0.998281786941581 C 0 0.894043528064146 0.0400801603206414 0.801832760595645 0.120240480961924 0.721649484536082 L 0.721442885771543 0.120274914089347 C 0.801603206412826 0.0400916380297814 0.893787575150301 0 0.997995991983968 0 C 1.10220440881764 0 1.19438877755511 0.0400916380297814 1.27454909819639 0.120274914089347 L 6 4.84707903780069 L 10.7254509018036 0.120274914089347 C 10.8056112224449 0.0400916380297814 10.8977955911824 0 11.002004008016 0 C 11.1062124248497 0 11.1983967935872 0.0400916380297814 11.2785571142285 0.120274914089347 L 11.8797595190381 0.721649484536082 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 1548 616 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/arrow-white.svg
Normal file
6
img/arrow-white.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1548 -575 )">
|
||||||
|
<path d="M 11.8797595190381 5.72508591065292 C 11.9599198396794 5.80526918671248 12 5.89747995418098 12 6.00171821305842 C 12 6.10595647193585 11.9599198396794 6.19816723940435 11.8797595190381 6.27835051546392 L 11.2785571142285 6.87972508591065 C 11.1983967935872 6.95990836197022 11.1062124248497 7 11.002004008016 7 C 10.8977955911824 7 10.8056112224449 6.95990836197022 10.7254509018036 6.87972508591065 L 6 2.15292096219931 L 1.27454909819639 6.87972508591065 C 1.19438877755511 6.95990836197022 1.10220440881764 7 0.997995991983968 7 C 0.893787575150301 7 0.801603206412826 6.95990836197022 0.721442885771543 6.87972508591065 L 0.120240480961924 6.27835051546392 C 0.0400801603206414 6.19816723940435 0 6.10595647193585 0 6.00171821305842 C 0 5.89747995418098 0.0400801603206414 5.80526918671248 0.120240480961924 5.72508591065292 L 5.72344689378757 0.120274914089347 C 5.80360721442886 0.0400916380297814 5.89579158316633 0 6 0 C 6.10420841683367 0 6.19639278557114 0.0400916380297814 6.27655310621242 0.120274914089347 L 11.8797595190381 5.72508591065292 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1548 575 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/arrows-yellow.svg
Normal file
6
img/arrows-yellow.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -953 -5793 )">
|
||||||
|
<path d="M 7 10.8463541666667 C 7.15798611111111 10.8463541666667 7.29470486111111 10.7886284722222 7.41015625 10.6731770833333 L 11.5481770833333 6.53515625 C 11.6636284722222 6.41970486111111 11.7213541666667 6.28298611111111 11.7213541666667 6.125 C 11.7213541666667 5.96701388888889 11.6636284722222 5.83029513888889 11.5481770833333 5.71484375 L 10.6184895833333 4.78515625 C 10.5030381944444 4.66970486111111 10.3663194444444 4.61197916666667 10.2083333333333 4.61197916666667 C 10.0503472222222 4.61197916666667 9.91362847222222 4.66970486111111 9.79817708333333 4.78515625 L 7 7.58333333333333 L 4.20182291666667 4.78515625 C 4.08637152777778 4.66970486111111 3.94965277777778 4.61197916666667 3.79166666666667 4.61197916666667 C 3.63368055555556 4.61197916666667 3.49696180555556 4.66970486111111 3.38151041666667 4.78515625 L 2.45182291666667 5.71484375 C 2.33637152777778 5.83029513888889 2.27864583333333 5.96701388888889 2.27864583333333 6.125 C 2.27864583333333 6.28298611111111 2.33637152777778 6.41970486111111 2.45182291666667 6.53515625 L 6.58984375 10.6731770833333 C 6.70529513888889 10.7886284722222 6.84201388888889 10.8463541666667 7 10.8463541666667 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 953 5793 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/audio-img.png
Normal file
BIN
img/audio-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
18
img/audio-img.svg
Normal file
18
img/audio-img.svg
Normal file
File diff suppressed because one or more lines are too long
11
img/close.svg
Normal file
11
img/close.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter248">
|
||||||
|
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -1683 -6028 )">
|
||||||
|
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAgKADAAQAAAABAAAAgAAAAABIjgR3AAAGo0lEQVR4Ae2dTW8bVRSGEydOihDEUSW2ICQ2wBJERSLRDaJlwc8obBI5ShQkVl4SN5aVOEIgfgb9QioqCxcWXSLY0ILKjkWkuBVK4yQO5ygzMHbjyXzcO3PPue9Iluf73vu8z1zPxJnxxAQGEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABPQQmbTVlZWXl9cFg8GalUnk2MzPzYGNjo2erLI37rdfrtZOTk3epbbPE8Ld2u/2HjXYaF2B5efkNqvC3VNkPIhXuT05Ofj03N/d5o9F4FpmP0RECxOdCr9e7TuFfo0Uz4WKavkevT7e3t38P55l4NypAEP7PVLGLYyrXpd7g42az+XTMcq9nr6+vv9Tv928RhMUxIHbpQLpEvcHDMctTz66k3iJmg+DIHxc+b7lIDbzNDY3ZjZeLgvBvM6MYABepF/gmZnnqRcZ6AP7Mp8o9SliD+9QTXEVPcEorEv5CEn5TU1OvtVqtx0nWPW8dYz0An/CdV1hk+QJ6glMaacPnrQ4PD9+KsMw1akwAPttPWRPvJcgSPjPOwHpsNMYE4Es9KqU/tqSzF3grQdbwCeNBwPpsoinnGhOAr/P5Ui9l+by6dxLkCH+CzrO+MnnuZEwATpKv8+mty+MpB28kyBM+Me3Oz89/kZJt7OrGrgLCUtbW1l48Ojq6QdOXw3lJ36kH+Ym2vdrpdJ4k3UbSegGbm1Tn6B/JEjWB2VSr1Ssmj34u2LgAvFNIwBSGBxfD5xpaEYB3DAmYwungavhcO2sC8M4hwX8MnOr2OZtwsCoAF+KzBC4f+YUJ4KsEEsLnbKz3AKFpPvUEUsIvVAAuzAcJJIVfuADaJZAWfikCaJVAYvilCaBNAqnhlyqAFgkkh1+6ANIlkB6+EwJIlUBD+M4IIE0CLeE7JYAUCTSF75wArkugLXwnBXBVAo3hOyuAaxJoDd9pAVyRQHP4zgtQtgTawxchQFkS+BC+GAGKlsCX8EUJUJQEPoUvTgDbEvgWvkgBbEngY/hiBTAtga/hixbAlASzs7PHdDuas/+3z+20ORT2X8G2GpHzZsv7Qb0SPZljpA0qnnIiXgAOJejCM92QOhJqoklbN2omKtzwSioEYCZFSaApfOamRoAiJNAWvjoBbEqgMXyVAtiQQGv4agUwKYHm8FULYEIC7eEzI6MPieIdOjjkOtHd39/Ptb2DPIaqpLZxef68GyXEvYDmB1epFMBU+KEImiVQJ4Dp8LVLoEoAW+FrlkCNALbD1yqBCgGKCl+jBOIvA/nrYDpL/57CSf34VdqGvw4OvxIO8z33nR7Y/D79aMMtLvvclR1fQbQAfOTTD098R4xTf5/PZ/b8qyXT09Mf0fY/ZshpgX644c7S0tLLGbZ1ZhOxHwF5uv3Rv/AF+8r0/wTSLxFFCmAy/PBQ9FUCcQLYCN9nCUQJYDN8XyUQI0AR4fsogQgBigzfNwmcF6CM8H2SwGkBygzfFwmcFcCF8H2QwEkBXApfuwTOCeBi+JolcEoAl8PXKoEzAkgIX6METgggKXxtEpQugMTwNUlQqgCSw9ciQWkCaAhfgwSlCKApfOkSFC6AxvAlS1CoAJrDlypBYQL4EL5ECQoRwKfwpUlgXQAfw5ckgVUBfA5figTWBED4oQL5HmFn+74DKwIg/P/DD8cCJs7dfGJcAIQfRv78u4sSGL03sNFoXKAbNe9Q0zPdqFmtVq80m82nz6PTMWdzc/Mfuh/xE2pN1htSbzJjkzSMCtDr9a5T5RYzVFDFg5eTtJsF55tSad3UEjDbvb29L5OUk3QdYx8B9Xq9RoX+Ta+ZpIUH63kTfpRLjqecHxwfH7/S6XSeRPeXddxYD0Bnq+9QJRB+wiRy9ASz9GwCZm1kMCbAYDBI+9nk5ZEfTS2rBBlYR4sdGjcmAHVLvw7tOX7C+/BDPFkkoJPlNKzDos58NybAzs7On/TolHtnljI8E+EP85hIKcHdVqv1eGQXmSeNCcA1qFQq1+htN6Y2XT4D5gbHrOPloogE3RgAu9TTfhazPPUiowK02+2HdDJ4iV4/jNTkgHqHdq1W+xDhj5CJTDIbZkSztuh1EFnEo3cp/Pfo7P/RyPxck8YuA0drsbq6+ipV+G2av09H/QMEP0oofpofPhWc7b9AB88vW1tbf8VvgaUgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIg8C9yNG0zv/zA5QAAAABJRU5ErkJggg==" x="1683px" y="6028px" filter="url(#filter248)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/contact-title.png
Normal file
BIN
img/contact-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
11
img/custom-bj-1.svg
Normal file
11
img/custom-bj-1.svg
Normal file
File diff suppressed because one or more lines are too long
11
img/custom-bj-2.svg
Normal file
11
img/custom-bj-2.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
img/custom-img.png
Normal file
BIN
img/custom-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
img/custom-title.png
Normal file
BIN
img/custom-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
6
img/cut-left.svg
Normal file
6
img/cut-left.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -838 -5327 )">
|
||||||
|
<path d="M 8.1015625 5.64935064935065 L 13.6484375 0.116883116883117 C 13.7473958333333 0.0181818181818176 13.8307291666667 -0.0155844155844163 13.8984375 0.0155844155844149 C 13.9661458333333 0.0467532467532461 14 0.129870129870129 14 0.264935064935064 L 14 11.7350649350649 C 14 11.8701298701299 13.9661458333333 11.9532467532468 13.8984375 11.9844155844156 C 13.8307291666667 12.0155844155844 13.7473958333333 11.9818181818182 13.6484375 11.8831168831169 L 8.1015625 6.35064935064935 C 8.0546875 6.3038961038961 8.02083333333333 6.25454545454545 8 6.2025974025974 L 8 11.7350649350649 C 8 11.8701298701299 7.96614583333333 11.9532467532468 7.8984375 11.9844155844156 C 7.83072916666667 12.0155844155844 7.74739583333333 11.9818181818182 7.6484375 11.8831168831169 L 2.1015625 6.35064935064935 C 2.0546875 6.3038961038961 2.02083333333333 6.25454545454545 2 6.2025974025974 L 2 11.4857142857143 C 2 11.6207792207792 1.95052083333333 11.7376623376623 1.8515625 11.8363636363636 C 1.75260416666667 11.9350649350649 1.63541666666667 11.9844155844156 1.5 11.9844155844156 L 0.5 11.9844155844156 C 0.364583333333333 11.9844155844156 0.247395833333333 11.9350649350649 0.1484375 11.8363636363636 C 0.0494791666666667 11.7376623376623 0 11.6207792207792 0 11.4857142857143 L 0 0.514285714285714 C 0 0.379220779220778 0.0494791666666667 0.262337662337662 0.1484375 0.163636363636364 C 0.247395833333333 0.0649350649350637 0.364583333333333 0.0155844155844149 0.5 0.0155844155844149 L 1.5 0.0155844155844149 C 1.63541666666667 0.0155844155844149 1.75260416666667 0.0649350649350637 1.8515625 0.163636363636364 C 1.95052083333333 0.262337662337662 2 0.379220779220778 2 0.514285714285714 L 2 5.7974025974026 C 2.02083333333333 5.74545454545455 2.0546875 5.6961038961039 2.1015625 5.64935064935065 L 7.6484375 0.116883116883117 C 7.74739583333333 0.0181818181818176 7.83072916666667 -0.0155844155844163 7.8984375 0.0155844155844149 C 7.96614583333333 0.0467532467532461 8 0.129870129870129 8 0.264935064935064 L 8 5.7974025974026 C 8.02083333333333 5.74545454545455 8.0546875 5.6961038961039 8.1015625 5.64935064935065 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 838 5327 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/cut-right.svg
Normal file
6
img/cut-right.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1068 -5327 )">
|
||||||
|
<path d="M 5.8984375 6.35064935064935 L 0.3515625 11.8831168831169 C 0.252604166666667 11.9818181818182 0.169270833333333 12.0155844155844 0.1015625 11.9844155844156 C 0.0338541666666667 11.9532467532468 0 11.8701298701299 0 11.7350649350649 L 0 0.264935064935064 C 0 0.129870129870129 0.0338541666666667 0.0467532467532461 0.1015625 0.0155844155844149 C 0.169270833333333 -0.0155844155844163 0.252604166666667 0.0181818181818176 0.3515625 0.116883116883117 L 5.8984375 5.64935064935065 C 5.9453125 5.6961038961039 5.97916666666667 5.74545454545455 6 5.7974025974026 L 6 0.264935064935064 C 6 0.129870129870129 6.03385416666667 0.0467532467532461 6.1015625 0.0155844155844149 C 6.16927083333333 -0.0155844155844163 6.25260416666667 0.0181818181818176 6.3515625 0.116883116883117 L 11.8984375 5.64935064935065 C 11.9453125 5.6961038961039 11.9791666666667 5.74545454545455 12 5.7974025974026 L 12 0.514285714285714 C 12 0.379220779220778 12.0494791666667 0.262337662337662 12.1484375 0.163636363636364 C 12.2473958333333 0.0649350649350637 12.3645833333333 0.0155844155844149 12.5 0.0155844155844149 L 13.5 0.0155844155844149 C 13.6354166666667 0.0155844155844149 13.7526041666667 0.0649350649350637 13.8515625 0.163636363636364 C 13.9505208333333 0.262337662337662 14 0.379220779220778 14 0.514285714285714 L 14 11.4857142857143 C 14 11.6207792207792 13.9505208333333 11.7376623376623 13.8515625 11.8363636363636 C 13.7526041666667 11.9350649350649 13.6354166666667 11.9844155844156 13.5 11.9844155844156 L 12.5 11.9844155844156 C 12.3645833333333 11.9844155844156 12.2473958333333 11.9350649350649 12.1484375 11.8363636363636 C 12.0494791666667 11.7376623376623 12 11.6207792207792 12 11.4857142857143 L 12 6.2025974025974 C 11.9791666666667 6.25454545454545 11.9453125 6.3038961038961 11.8984375 6.35064935064935 L 6.3515625 11.8831168831169 C 6.25260416666667 11.9818181818182 6.16927083333333 12.0155844155844 6.1015625 11.9844155844156 C 6.03385416666667 11.9532467532468 6 11.8701298701299 6 11.7350649350649 L 6 6.2025974025974 C 5.97916666666667 6.25454545454545 5.9453125 6.3038961038961 5.8984375 6.35064935064935 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1068 5327 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/logo-black.png
Normal file
BIN
img/logo-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
11
img/mv-1.svg
Normal file
11
img/mv-1.svg
Normal file
File diff suppressed because one or more lines are too long
6
img/pause-black-icon.svg
Normal file
6
img/pause-black-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -778 -2726 )">
|
||||||
|
<path d="M 10.859375 16.859375 C 10.953125 16.765625 11 16.6458333333333 11 16.5 L 11 7.5 C 11 7.35416666666667 10.953125 7.234375 10.859375 7.140625 C 10.765625 7.046875 10.6458333333333 7 10.5 7 L 6.5 7 C 6.35416666666667 7 6.234375 7.046875 6.140625 7.140625 C 6.046875 7.234375 6 7.35416666666667 6 7.5 L 6 16.5 C 6 16.6458333333333 6.046875 16.765625 6.140625 16.859375 C 6.234375 16.953125 6.35416666666667 17 6.5 17 L 10.5 17 C 10.6458333333333 17 10.765625 16.953125 10.859375 16.859375 Z M 17.859375 16.859375 C 17.953125 16.765625 18 16.6458333333333 18 16.5 L 18 7.5 C 18 7.35416666666667 17.953125 7.234375 17.859375 7.140625 C 17.765625 7.046875 17.6458333333333 7 17.5 7 L 13.5 7 C 13.3541666666667 7 13.234375 7.046875 13.140625 7.140625 C 13.046875 7.234375 13 7.35416666666667 13 7.5 L 13 16.5 C 13 16.6458333333333 13.046875 16.765625 13.140625 16.859375 C 13.234375 16.953125 13.3541666666667 17 13.5 17 L 17.5 17 C 17.6458333333333 17 17.765625 16.953125 17.859375 16.859375 Z M 22.390625 5.9765625 C 23.4635416666667 7.81510416666666 24 9.82291666666666 24 12 C 24 14.1770833333333 23.4635416666667 16.1848958333333 22.390625 18.0234375 C 21.3177083333333 19.8619791666667 19.8619791666667 21.3177083333333 18.0234375 22.390625 C 16.1848958333333 23.4635416666667 14.1770833333333 24 12 24 C 9.82291666666667 24 7.81510416666667 23.4635416666667 5.9765625 22.390625 C 4.13802083333333 21.3177083333333 2.68229166666667 19.8619791666667 1.609375 18.0234375 C 0.536458333333333 16.1848958333333 0 14.1770833333333 0 12 C 0 9.82291666666666 0.536458333333333 7.81510416666666 1.609375 5.9765625 C 2.68229166666667 4.13802083333333 4.13802083333333 2.68229166666666 5.9765625 1.609375 C 7.81510416666667 0.536458333333331 9.82291666666667 0 12 0 C 14.1770833333333 0 16.1848958333333 0.536458333333331 18.0234375 1.609375 C 19.8619791666667 2.68229166666666 21.3177083333333 4.13802083333333 22.390625 5.9765625 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 778 2726 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/pause-white-icon.svg
Normal file
6
img/pause-white-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="26px" height="26px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -740 -655 )">
|
||||||
|
<path d="M 11.7643229166667 18.2643229166667 C 11.8658854166667 18.1627604166667 11.9166666666667 18.0329861111111 11.9166666666667 17.875 L 11.9166666666667 8.125 C 11.9166666666667 7.96701388888889 11.8658854166667 7.83723958333333 11.7643229166667 7.73567708333333 C 11.6627604166667 7.63411458333333 11.5329861111111 7.58333333333333 11.375 7.58333333333333 L 7.04166666666667 7.58333333333333 C 6.88368055555556 7.58333333333333 6.75390625 7.63411458333333 6.65234375 7.73567708333333 C 6.55078125 7.83723958333333 6.5 7.96701388888889 6.5 8.125 L 6.5 17.875 C 6.5 18.0329861111111 6.55078125 18.1627604166667 6.65234375 18.2643229166667 C 6.75390625 18.3658854166667 6.88368055555556 18.4166666666667 7.04166666666667 18.4166666666667 L 11.375 18.4166666666667 C 11.5329861111111 18.4166666666667 11.6627604166667 18.3658854166667 11.7643229166667 18.2643229166667 Z M 19.34765625 18.2643229166667 C 19.44921875 18.1627604166667 19.5 18.0329861111111 19.5 17.875 L 19.5 8.125 C 19.5 7.96701388888889 19.44921875 7.83723958333333 19.34765625 7.73567708333333 C 19.24609375 7.63411458333333 19.1163194444444 7.58333333333333 18.9583333333333 7.58333333333333 L 14.625 7.58333333333333 C 14.4670138888889 7.58333333333333 14.3372395833333 7.63411458333333 14.2356770833333 7.73567708333333 C 14.1341145833333 7.83723958333333 14.0833333333333 7.96701388888889 14.0833333333333 8.125 L 14.0833333333333 17.875 C 14.0833333333333 18.0329861111111 14.1341145833333 18.1627604166667 14.2356770833333 18.2643229166667 C 14.3372395833333 18.3658854166667 14.4670138888889 18.4166666666667 14.625 18.4166666666667 L 18.9583333333333 18.4166666666667 C 19.1163194444444 18.4166666666667 19.24609375 18.3658854166667 19.34765625 18.2643229166667 Z M 24.2565104166667 6.474609375 C 25.4188368055556 8.46636284722222 26 10.6414930555556 26 13 C 26 15.3585069444444 25.4188368055556 17.5336371527778 24.2565104166667 19.525390625 C 23.0941840277778 21.5171440972222 21.5171440972222 23.0941840277778 19.525390625 24.2565104166667 C 17.5336371527778 25.4188368055556 15.3585069444444 26 13 26 C 10.6414930555556 26 8.46636284722222 25.4188368055556 6.474609375 24.2565104166667 C 4.48285590277778 23.0941840277778 2.90581597222222 21.5171440972222 1.74348958333333 19.525390625 C 0.581163194444444 17.5336371527778 0 15.3585069444444 0 13 C 0 10.6414930555556 0.581163194444444 8.46636284722222 1.74348958333333 6.474609375 C 2.90581597222222 4.48285590277778 4.48285590277778 2.90581597222222 6.474609375 1.74348958333333 C 8.46636284722222 0.581163194444442 10.6414930555556 0 13 0 C 15.3585069444444 0 17.5336371527778 0.581163194444442 19.525390625 1.74348958333333 C 21.5171440972222 2.90581597222222 23.0941840277778 4.48285590277778 24.2565104166667 6.474609375 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 740 655 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/play-black-icon.svg
Normal file
6
img/play-black-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -498 -3747 )">
|
||||||
|
<path d="M 5.9765625 1.609375 C 7.81510416666667 0.536458333333331 9.82291666666667 0 12 0 C 14.1770833333333 0 16.1848958333333 0.536458333333331 18.0234375 1.609375 C 19.8619791666667 2.68229166666666 21.3177083333333 4.13802083333333 22.390625 5.9765625 C 23.4635416666667 7.81510416666666 24 9.82291666666666 24 12 C 24 14.1770833333333 23.4635416666667 16.1848958333333 22.390625 18.0234375 C 21.3177083333333 19.8619791666667 19.8619791666667 21.3177083333333 18.0234375 22.390625 C 16.1848958333333 23.4635416666667 14.1770833333333 24 12 24 C 9.82291666666667 24 7.81510416666667 23.4635416666667 5.9765625 22.390625 C 4.13802083333333 21.3177083333333 2.68229166666667 19.8619791666667 1.609375 18.0234375 C 0.536458333333333 16.1848958333333 0 14.1770833333333 0 12 C 0 9.82291666666666 0.536458333333333 7.81510416666666 1.609375 5.9765625 C 2.68229166666667 4.13802083333333 4.13802083333333 2.68229166666666 5.9765625 1.609375 Z M 9.5 17.859375 L 18 12.859375 C 18.3333333333333 12.671875 18.5 12.3854166666667 18.5 12 C 18.5 11.6145833333333 18.3333333333333 11.328125 18 11.140625 L 9.5 6.140625 C 9.17708333333333 5.94270833333333 8.84375 5.9375 8.5 6.125 C 8.16666666666667 6.32291666666667 8 6.61458333333333 8 7 L 8 17 C 8 17.3854166666667 8.16666666666667 17.6770833333333 8.5 17.875 C 8.66666666666667 17.9583333333333 8.83333333333333 18 9 18 C 9.17708333333333 18 9.34375 17.953125 9.5 17.859375 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 498 3747 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/record-icon.png
Normal file
BIN
img/record-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
img/serial-icon.png
Normal file
BIN
img/serial-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
6
img/serial-icon.svg
Normal file
6
img/serial-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="21px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -352 -1463 )">
|
||||||
|
<path d="M 36 0 L 0 0 L 13.4042985613149 17.8567256581192 C 14.7447284174464 19.6423982239312 16.0034388490519 20 20.0042985613149 20 L 33.8 20 C 34.768 20 36 18.88 36 18 L 36 0 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 352 1463 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/speed-left.png
Normal file
BIN
img/speed-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/speed-right.png
Normal file
BIN
img/speed-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/speed-white-left.png
Normal file
BIN
img/speed-white-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
img/speed-white-right.png
Normal file
BIN
img/speed-white-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
6
img/student-icon.svg
Normal file
6
img/student-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -891 -5198 )">
|
||||||
|
<path d="M 11.9203125 10.1217447916667 C 11.9734375 10.5805121527778 12 11.0681423611111 12 11.5846354166667 C 12 12.2469618055556 11.8046875 12.8151041666667 11.4140625 13.2890625 C 11.0234375 13.7630208333333 10.553125 14 10.003125 14 L 1.996875 14 C 1.446875 14 0.9765625 13.7630208333333 0.5859375 13.2890625 C 0.1953125 12.8151041666667 0 12.2469618055556 0 11.5846354166667 C 0 11.0681423611111 0.0265625000000001 10.5805121527778 0.0796875000000001 10.1217447916667 C 0.1328125 9.66297743055555 0.23125 9.201171875 0.375 8.736328125 C 0.51875 8.271484375 0.7015625 7.87348090277778 0.9234375 7.54231770833333 C 1.1453125 7.21115451388889 1.4390625 6.94075520833333 1.8046875 6.73111979166667 C 2.1703125 6.521484375 2.590625 6.41666666666667 3.065625 6.41666666666667 C 3.884375 7.19444444444444 4.8625 7.58333333333333 6 7.58333333333333 C 7.1375 7.58333333333333 8.115625 7.19444444444444 8.934375 6.41666666666667 C 9.409375 6.41666666666667 9.8296875 6.521484375 10.1953125 6.73111979166667 C 10.5609375 6.94075520833333 10.8546875 7.21115451388889 11.0765625 7.54231770833333 C 11.2984375 7.87348090277778 11.48125 8.271484375 11.625 8.736328125 C 11.76875 9.201171875 11.8671875 9.66297743055555 11.9203125 10.1217447916667 Z M 8.5453125 1.025390625 C 9.2484375 1.708984375 9.6 2.53385416666667 9.6 3.5 C 9.6 4.46614583333333 9.2484375 5.291015625 8.5453125 5.974609375 C 7.8421875 6.658203125 6.99375 7 6 7 C 5.00625 7 4.1578125 6.658203125 3.4546875 5.974609375 C 2.7515625 5.291015625 2.4 4.46614583333333 2.4 3.5 C 2.4 2.53385416666667 2.7515625 1.708984375 3.4546875 1.025390625 C 4.1578125 0.341796875 5.00625 0 6 0 C 6.99375 0 7.8421875 0.341796875 8.5453125 1.025390625 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 891 5198 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/student-img.png
Normal file
BIN
img/student-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
img/student-title.png
Normal file
BIN
img/student-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
154
index.html
154
index.html
@@ -5,10 +5,32 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>朴见潮音官网</title>
|
<title>朴见潮音官网</title>
|
||||||
<script src="./js/vue.global.js"></script>
|
<script src="./js/vue.global.js"></script>
|
||||||
|
<script src="./js/artplayer.js"></script>
|
||||||
<link rel="stylesheet" href="./css/index.css" />
|
<link rel="stylesheet" href="./css/index.css" />
|
||||||
|
<style>
|
||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="content" id="appIndex">
|
<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" :data-index="'01'"></div>
|
||||||
|
<div class="item active" :data-index="'02'"></div>
|
||||||
|
<div class="item" :data-index="'03'"></div>
|
||||||
|
<div class="item" :data-index="'04'"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">
|
||||||
|
<img class="item top" src="./img/arrow-white.svg" />
|
||||||
|
<img class="item bottom" src="./img/arrow-orange.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="introduce">
|
<div class="introduce">
|
||||||
<div class="head flexacenter">
|
<div class="head flexacenter">
|
||||||
<div class="logo mar1200">
|
<div class="logo mar1200">
|
||||||
@@ -42,7 +64,8 @@
|
|||||||
<img class="bj bj3" src="./img/album-bj3.svg" />
|
<img class="bj bj3" src="./img/album-bj3.svg" />
|
||||||
<img class="bj bj4" src="./img/album-bj4.png" />
|
<img class="bj bj4" src="./img/album-bj4.png" />
|
||||||
<img class="bj bj5" src="./img/album-bj5.svg" />
|
<img class="bj bj5" src="./img/album-bj5.svg" />
|
||||||
<img class="play" src="./img/play-white-icon.svg" />
|
<img v-if="!audioHeadState" class="play" @click="manageAudio('./mp3/1.MP3','head')" src="./img/play-white-icon.svg" />
|
||||||
|
<img v-else class="play" @click="closeAll()" src="./img/pause-white-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="trait flexflex mar1200">
|
<div class="trait flexflex mar1200">
|
||||||
@@ -67,19 +90,132 @@
|
|||||||
<img class="line line-6" src="./img/works-line-6.svg" />
|
<img class="line line-6" src="./img/works-line-6.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="mv-box mar1200">
|
<div class="mv-box mar1200">
|
||||||
<div class="item flexflex">
|
<div class="item flexflex" v-for="(item, index) in 6" :key="index">
|
||||||
<div class="serial">01</div>
|
<img class="serial-icon" src="./img/serial-icon.png" />
|
||||||
|
<div class="serial">{{ index + 1}}</div>
|
||||||
<div class="title">深港双城故事</div>
|
<div class="title">深港双城故事</div>
|
||||||
|
<div class="text">{{ text }}</div>
|
||||||
<div class="text">中国AIGC产业联盟（AIGCxChina）
|
|
||||||
温州市社科联
|
|
||||||
温州市新闻媒体中心
|
|
||||||
第一届AI音乐春晚 正选节目</div>
|
|
||||||
<div class="time">2024.12</div>
|
<div class="time">2024.12</div>
|
||||||
|
<div class="media" @click="openPreview(index)">
|
||||||
|
<img class="img" src="./img/mv-1.svg" />
|
||||||
|
<img class="play" src="./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="./img/serial-icon.png" />
|
||||||
|
<div class="serial">{{ index + 1 }}</div>
|
||||||
|
<div class="content flexflex">
|
||||||
|
<div class="album">
|
||||||
|
<img class="img" src="./img/audio-img.png" />
|
||||||
|
<img class="icon" src="./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="./img/speed-left.png" @click="fastForward('slow', item.url, 'works')" />
|
||||||
|
<img v-if="item.state" class="play" @click="closeAll()" src="./img/pause-black-icon.svg" />
|
||||||
|
<img v-else class="play" @click="manageAudio(item.url, 'works')" src="./img/play-black-icon.svg" />
|
||||||
|
<img class="speed right" src="./img/speed-right.png" @click="fastForward('fast', item.url, 'works')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="bj2" src="./img/works-bj2.png" />
|
<img class="bj2" src="./img/works-bj2.png" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="custom">
|
||||||
|
<div class="custom-box mar1200 flexflex">
|
||||||
|
<img class="title" src="./img/custom-title.png" />
|
||||||
|
<div class="subtitle">往事可成追忆，把你的故事谱成歌</div>
|
||||||
|
<div class="list flexflex mar1200">
|
||||||
|
<div class="item flexacenter" v-for="(item, index) in 6" :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: progress + '%' }"></div>
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="bar black" :style="{ width: (100 - progress) + '%' }"></div>
|
||||||
|
</div>
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<img class="speed left" src="./img/speed-left.png" />
|
||||||
|
<img class="play" src="./img/play-black-icon.svg" />
|
||||||
|
<img class="speed right" src="./img/speed-right.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img class="info-img" src="./img/custom-img.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom flexcenter">
|
||||||
|
<img class="bj" src="./img/custom-bj-1.svg" />
|
||||||
|
<img class="bj" src="./img/custom-bj-2.svg" />
|
||||||
|
<img class="bj" src="./img/custom-bj-1.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="student">
|
||||||
|
<div class="student-box flexflex">
|
||||||
|
<img class="title" src="./img/student-title.png" alt="" />
|
||||||
|
<div class="list">
|
||||||
|
<img class="img" src="./img/student-img.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">《听风少年的梦幻之城》</div>
|
||||||
|
<div class="info flexacenter">
|
||||||
|
<img class="icon" src="./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="./img/cut-left.svg" />
|
||||||
|
<img class="speed left" src="./img/speed-white-left.png" />
|
||||||
|
<img class="play" src="./img/play-white-icon.svg" />
|
||||||
|
<img class="speed right" src="./img/speed-white-right.png" />
|
||||||
|
<img class="cut right" src="./img/cut-right.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contact flexflex mar1200">
|
||||||
|
<img class="title" src="./img/contact-title.png" />
|
||||||
|
<div class="hint">我们可以为你提供AI音乐定制服务，谱写你独有的人生歌曲</div>
|
||||||
|
<div class="hint">我们可以为你提供AI音乐教学培训服务，让你拥有独立完成音乐作品的能力</div>
|
||||||
|
<img class="arrows" src="./img/arrows-yellow.svg" />
|
||||||
|
<img class="WeChat" src="./img/WeChat-img.jpg" />
|
||||||
|
<img class="logo" src="./img/logo-black.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer flexcenter">
|
||||||
|
<img class="logo" src="./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="./img/close.svg" />
|
||||||
|
<div class="artplayer-app"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="./js/index.js"></script>
|
<script src="./js/index.js"></script>
|
||||||
|
|||||||
8
js/artplayer.js
Normal file
8
js/artplayer.js
Normal file
File diff suppressed because one or more lines are too long
163
js/index.js
163
js/index.js
@@ -24,10 +24,169 @@ const search = createApp({
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const text = `中国AIGC产业联盟（AIGCxChina）
|
||||||
|
温州市社科联
|
||||||
|
温州市新闻媒体中心
|
||||||
|
第一届AI音乐春晚 正选节目`;
|
||||||
|
|
||||||
|
const audioPlayer = ref(null);
|
||||||
|
|
||||||
|
const progress = ref(20); // 播放进度百分比
|
||||||
|
// 更新进度的函数
|
||||||
|
const getProgress = () => {
|
||||||
|
if (!audioPlayer.value) return;
|
||||||
|
const currentTime = audioPlayer.value.currentTime || 0;
|
||||||
|
const duration = audioPlayer.value.duration || 0;
|
||||||
|
const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||||||
|
setProgress(progress, audioPlayer.value.src);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setProgress = (val, src) => {
|
||||||
|
audioList.value.forEach((item) => {
|
||||||
|
if (item.url === src) item.progress = val;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log("4444");
|
// 添加进度更新事件监听器
|
||||||
|
if (audioPlayer.value) {
|
||||||
|
audioPlayer.value.addEventListener("timeupdate", getProgress);
|
||||||
|
audioPlayer.value.addEventListener("loadedmetadata", getProgress);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return { trait };
|
// 组件卸载时清理事件监听器
|
||||||
|
onUnmounted(() => {
|
||||||
|
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
|
||||||
|
audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 头部播放状态
|
||||||
|
let audioHeadState = ref(false);
|
||||||
|
|
||||||
|
// 头部播放 - 开启
|
||||||
|
const playHead = () => {
|
||||||
|
closeAll();
|
||||||
|
nextTick(() => {
|
||||||
|
audioPlayer.value.src = "./mp3/1.MP3";
|
||||||
|
audioPlayer.value.play().then(() => (audioHeadState.value = true));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 头部播放 - 暂停
|
||||||
|
const pauseHead = () => {
|
||||||
|
audioPlayer.value.pause();
|
||||||
|
audioHeadState.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 播放 组件状态
|
||||||
|
let previewState = ref(false);
|
||||||
|
|
||||||
|
let art = null;
|
||||||
|
// 开启播放 MV
|
||||||
|
const openPreview = () => {
|
||||||
|
previewState.value = true;
|
||||||
|
nextTick(() => {
|
||||||
|
art = new Artplayer({
|
||||||
|
container: ".artplayer-app",
|
||||||
|
url: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-JoqdX_qqsgFptxhcq_cQnrlc6Z1CwMUBq_D-81qNDQyOQ~~",
|
||||||
|
autoplay: true,
|
||||||
|
poster: "https://o.x-php.com/thumb/UHkZOgUVDvP9z7rPV2rT1kE22Zf1QEiLggt9OPnf5hC7a-QU5l8VTqiP5awMLv2DMEUiOUl03dK1PW0Yzf8ZPfpa7ZTTgV-PZGNjZQ~~",
|
||||||
|
});
|
||||||
|
art.play();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭播放 MV
|
||||||
|
const closePreview = () => {
|
||||||
|
previewState.value = false;
|
||||||
|
art?.destroy();
|
||||||
|
art = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
let audioList = ref([
|
||||||
|
{
|
||||||
|
url: "https://app.gter.net/image/miniApp/mp3/1.mp3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "https://app.gter.net/image/miniApp/mp3/2.mp3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "https://app.gter.net/image/miniApp/mp3/3.mp3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: "https://app.gter.net/image/miniApp/mp3/4.mp3",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const playAudio = (index) => {
|
||||||
|
closeAll();
|
||||||
|
nextTick(() => {
|
||||||
|
let target = audioList.value[index];
|
||||||
|
const url = target.url;
|
||||||
|
if (audioPlayer.value?.src != url) audioPlayer.value.src = url;
|
||||||
|
audioPlayer.value.play().then(() => {
|
||||||
|
target["state"] = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const pauseAudio = (index) => {
|
||||||
|
let target = audioList.value[index];
|
||||||
|
target["state"] = false;
|
||||||
|
audioPlayer.value.pause();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 快进 和 后退 10秒
|
||||||
|
const fastForward = (type = "fast", src, area) => {
|
||||||
|
if (!audioPlayer.value) return;
|
||||||
|
console.log("src", src, "audioPlayer", audioPlayer.value);
|
||||||
|
if (audioPlayer.value.src != src) {
|
||||||
|
manageAudio(src, area);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentTime = audioPlayer.value.currentTime || 0;
|
||||||
|
const duration = audioPlayer.value.duration || 0;
|
||||||
|
let newTime = 0;
|
||||||
|
if (type == "fast") newTime = Math.min(currentTime + 10, duration);
|
||||||
|
else newTime = Math.max(currentTime - 10, 0);
|
||||||
|
audioPlayer.value.currentTime = newTime;
|
||||||
|
getProgress();
|
||||||
|
};
|
||||||
|
|
||||||
|
const manageAudio = (src, area) => {
|
||||||
|
console.log("src", src, "area", area);
|
||||||
|
const audio = audioPlayer.value;
|
||||||
|
console.log("audio", audio.paused);
|
||||||
|
closeAll();
|
||||||
|
if (area == "head") {
|
||||||
|
nextTick(() => {
|
||||||
|
if (audio?.src != src) audio.src = src;
|
||||||
|
audio.play().then(() => (audioHeadState.value = true));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (area == "works") {
|
||||||
|
nextTick(() => {
|
||||||
|
if (audio?.src != src) audio.src = src;
|
||||||
|
audio.play().then(() => {
|
||||||
|
audioList.value.forEach((item) => {
|
||||||
|
if (item.url == src) item["state"] = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeAll = () => {
|
||||||
|
audioPlayer.value.pause();
|
||||||
|
audioHeadState.value = false;
|
||||||
|
audioList.value.forEach((item) => {
|
||||||
|
item["state"] = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return { closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
|
||||||
},
|
},
|
||||||
}).mount("#appIndex");
|
}).mount("#appIndex");
|
||||||
|
|||||||
Reference in New Issue
Block a user