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

- 替换多张图片资源为PNG格式
- 重构底部播放器样式，调整布局和动画效果
- 优化guess页面的UI元素和交互提示
- 修复CSS中的z-index和line-height问题
- 调整音频预加载策略为auto

static/css/index.css

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