A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 更新图片资源并优化播放器样式和布局

Browse Source 
- 替换多张图片资源为PNG格式
- 重构底部播放器样式，调整布局和动画效果
- 优化guess页面的UI元素和交互提示
- 修复CSS中的z-index和line-height问题
- 调整音频预加载策略为auto
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-23 15:52:51 +08:00
parent 8a764d2fdb
commit b40e69dac2
30 changed files with 303 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
guess.html
View File

@@ -48,6 +48,12 @@
<div class="start-box">
<img class="microphone" src="./static/img/guess/microphone.png" alt="" />
<img class="suspect-text" src="./static/img/guess/suspect-text.png" alt="" />
<div class="hint">连对3题有奖品哦，快来挑战吧！</div>
<img class="start-icon" src="./static/img/guess/start-icon.png" alt="" />
</div>
<div class="answer-box answer-one">
<img class="figure" src="./static/img/guess/figure-one.png" alt="" />
<div class="topic-list"></div>
</div>
</div>
</div>

30
index.html
View File

@@ -18,7 +18,7 @@
<body>
<div class="content" id="appIndex" v-cloak>
<!-- 原生audio标签（隐藏） -->
<audio ref="audioPlayer" preload="none" loop></audio>
<audio ref="audioPlayer" preload="auto" loop></audio>
<div class="introduce" ref="introduceRef">
<div class="head flexacenter">
@@ -43,13 +43,13 @@
</div>
<div class="album" @mouseover="changeInterval(true)" @mouseleave="changeInterval(false)">
<img class="bj bj1" src="./static/img/album-bj1.svg" />
<img class="bj bj2" src="./static/img/album-bj2.svg" />
<img class="bj bj2" src="./static/img/album-bj2.png" />
<div class="album-box" ref="albumBoxRef">
<div class="item" v-for="(item, index) in bannerList" :key="index" @click="openPreview(item.id)">
<img class="img" :src="item.img" />
<img class="bj bj3" src="./static/img/album-bj3.svg" />
<img class="bj bj4" src="./static/img/album-bj4.png" />
<img class="bj bj5" src="./static/img/album-bj5.svg" />
<img class="bj bj5" src="./static/img/album-bj5.png" />
<img class="play" src="./static/img/play-white-icon.svg" />
</div>
</div>
@@ -162,9 +162,9 @@
</div>
</div>
<div class="bottom flexcenter">
<img class="bj" src="./static/img/custom-bj-1.svg" />
<img class="bj" src="./static/img/custom-bj-2.svg" />
<img class="bj" src="./static/img/custom-bj-1.svg" />
<img class="bj" src="./static/img/custom-bj-1.png" />
<img class="bj" src="./static/img/custom-bj-2.png" />
<img class="bj" src="./static/img/custom-bj-1.png" />
</div>
</div>
</div>
@@ -205,7 +205,7 @@
</div>
</div>
<div class="footer flexcenter" :style="{ marginBottom: playData ? '76px' : '' }">
<div class="footer flexcenter">
<img class="logo" src="./static/img/ai-title.png" />
<div class="text">广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号</div>
</div>
@@ -217,18 +217,12 @@
<div class="bottom-play flexacenter" v-if="playData">
<div class="bottom-left flex1 flexacenter">
<img class="img" :src="playData?.img" />
<!-- <img class="img" :src="playData?.img" /> -->
<div class="name">{{ playData?.title }}</div>
</div>
<div class="bottom-middle flexcenter">
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
</div>
<div class="flexacenter">
<div class="flexacenter" style="margin-bottom: 10px">
<div class="time-display">{{ currentTimeFormatted }}</div>
<div class="progress-bar flexacenter" @click="handleBarDragBottomClick">
<div class="bar white" :style="{ width: progress + '%' }" @mousedown="startBarDragBottom"></div>
@@ -236,6 +230,12 @@
</div>
<div class="time-display">{{ durationFormatted }}</div>
</div>
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow')" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast')" />
</div>
</div>
<div class="bottom-right flex1 flexcenter">

20
static/css/guess.css
View File

@@ -44,6 +44,7 @@
width: 121px;
height: 24px;
margin-bottom: 31px;
z-index: 1;
}
.container .container-box .header {
position: relative;
@@ -283,4 +284,23 @@
.container .container-box .details .start-box .suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
}
.container .container-box .details .start-box .hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
position: absolute;
top: 215px;
left: 517px;
}
.container .container-box .details .start-box .start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
cursor: pointer;
}

22
static/css/guess.less
View File

@@ -46,6 +46,7 @@
width: 121px;
height: 24px;
margin-bottom: 31px;
z-index: 1;
}
.header {
@@ -314,6 +315,27 @@
.suspect-text {
width: 493px;
height: 56px;
position: absolute;
top: 136px;
left: 517px;
}
.hint {
font-size: 18px;
color: #ffffff;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
position: absolute;
top: 215px;
left: 517px;
}
.start-icon {
width: 168px;
height: 69px;
position: absolute;
top: 268px;
left: 517px;
cursor: pointer;
}
}
}

29
static/css/index.css
View File

@@ -87,7 +87,6 @@
margin-bottom: 25px;
}
.content .introduce .box .info .award .name {
width: min-content;
height: 65px;
margin-bottom: 30px;
}
@@ -879,26 +878,32 @@
}
.content .bottom-play {
position: fixed;
bottom: 0;
left: 0;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 12px;
width: 100%;
height: 76px;
background-color: #353535;
padding: 12px 0;
background-color: #000;
z-index: 1000;
justify-content: space-between;
align-items: flex-end;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
width: 800px;
}
@keyframes fadeInUp {
0% {
bottom: -76px;
}
100% {
bottom: 0;
bottom: 10px;
}
}
.content .bottom-play .bottom-left {
padding-left: 12px;
height: 24px;
line-height: 24px;
position: relative;
}
.content .bottom-play .bottom-left .img {
width: 56px;
@@ -908,18 +913,19 @@
.content .bottom-play .bottom-left .name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 12px;
bottom: 0;
}
.content .bottom-play .bottom-middle {
flex-direction: column;
}
.content .bottom-play .bottom-middle .operate {
margin-bottom: 10px;
height: 24px;
}
.content .bottom-play .bottom-middle .operate .cut {
width: 14px;
@@ -980,6 +986,7 @@
.content .bottom-play .bottom-right {
justify-content: flex-end;
padding-right: 12px;
height: 24px;
}
.content .bottom-play .bottom-right .item {
position: relative;

228
static/css/index.less
View File

@@ -98,7 +98,7 @@
}
.name {
width: min-content;
// width: min-content;
height: 65px;
margin-bottom: 30px;
}
@@ -1022,17 +1022,218 @@
}
}
// .bottom-play {
// position: fixed;
// bottom: 0;
// left: 0;
// width: 100%;
// height: 76px;
// background-color: #353535;
// z-index: 1000;
// justify-content: space-between;
// animation: fadeInUp 0.3s ease forwards;
// min-width: 1200px;
// @keyframes fadeInUp {
// 0% {
// bottom: -76px;
// }
// 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;
// }
// .speed {
// width: 16px;
// height: 12px;
// margin: 0 40px;
// cursor: pointer;
// }
// .play {
// width: 24px;
// height: 24px;
// cursor: pointer;
// }
// }
// .time-display {
// color: #fff;
// font-size: 12px;
// line-height: 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;
// &.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: #f2f2f2;
// border-radius: 0 10px 10px 0;
// }
// }
// }
// }
// .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;
// &::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;
// }
// }
// }
// }
// }
// }
// }
.bottom-play {
position: fixed;
bottom: 0;
left: 0;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 12px;
width: 100%;
height: 76px;
background-color: #353535;
padding: 12px 0;
background-color: #000;
z-index: 1000;
justify-content: space-between;
align-items: flex-end;
animation: fadeInUp 0.3s ease forwards;
min-width: 1200px;
// min-width: 1200px;
width: 800px;
@keyframes fadeInUp {
0% {
@@ -1040,12 +1241,15 @@
}
100% {
bottom: 0;
bottom: 10px;
}
}
.bottom-left {
padding-left: 12px;
height: 24px;
line-height: 24px;
position: relative;
.img {
width: 56px;
@@ -1056,12 +1260,13 @@
.name {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
max-width: 240px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 12px;
bottom: 0;
}
}
@@ -1069,7 +1274,7 @@
flex-direction: column;
.operate {
margin-bottom: 10px;
height: 24px;
.cut {
width: 14px;
@@ -1140,6 +1345,7 @@
.bottom-right {
justify-content: flex-end;
padding-right: 12px;
height: 24px;
.item {
position: relative;

2
static/css/song-request-station.css
View File

@@ -49,6 +49,7 @@
width: 121px;
height: 24px;
margin-bottom: 31px;
z-index: 1;
}
.container .container-box .header {
position: relative;
@@ -372,6 +373,7 @@
.bottom-play .bottom-left {
padding-left: 12px;
height: 24px;
line-height: 24px;
position: relative;
}
.bottom-play .bottom-left .img {

5
static/css/song-request-station.less
View File

@@ -53,6 +53,7 @@
width: 121px;
height: 24px;
margin-bottom: 31px;
z-index: 1;
}
.header {
@@ -449,6 +450,7 @@
.bottom-left {
padding-left: 12px;
height: 24px;
line-height: 24px;
position: relative;
.img {
@@ -460,13 +462,10 @@
.name {
color: #fff;
font-size: 14px;
// font-weight: 600;
// margin-bottom: 6px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 12px;
bottom: 0;

BIN
static/img/album-bj2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
static/img/album-bj5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/img/custom-bj-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
static/img/green-glow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
static/img/guess/figure-one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
static/img/guess/figure-three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
static/img/guess/figure-two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
static/img/guess/start-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
static/img/halo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/img/headset-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
static/img/left-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/img/mv-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
static/img/remake-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
static/img/right-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/img/shadow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
static/img/smiling-face.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/img/train-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/img/works-bj1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 392 KiB

BIN
static/img/works-bj2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 343 KiB

2
static/js/tagcloud-3.1.js
View File

@@ -47,7 +47,7 @@ window.tagCloud = (function (win, doc) {
// 初始化容器样式（3D透视核心）
self.box.style.position = "relative";
self.box.style.visibility = "visible";
self.box.style.overflow = "hidden";
// self.box.style.overflow = "hidden";
self.box.style.perspective = `${self.perspective}px`;
self.box.style.transformStyle = "preserve-3d";