no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user