refactor(页面布局): 重构页面布局和样式

- 移除未使用的HTML文件和冗余代码
- 调整侧边栏位置和样式
- 优化标签云组件交互和性能
- 更新播放器控件样式和功能
- 改进预览弹窗的背景透明度
- 添加favicon图标

static/css/song-request-station.less

@@ -426,6 +426,7 @@
         font-weight: 650;
         color: rgb(88, 58, 5) !important;
         background-color: rgba(241, 154, 4, 1) !important;
+        z-index: 100 !important;
     }
 
     &.item2 {
@@ -463,3 +464,200 @@
         background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
     }
 }
+
+.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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}