diff --git a/song-request-station copy.html b/song-request-station copy.html
new file mode 100644
index 0000000..15ea7e9
--- /dev/null
+++ b/song-request-station copy.html	
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>标签气泡动效</title>
+        <style></style>
+
+        <link rel="stylesheet" href="./static/css/song-request-station.css" />
+    </head>
+    <body>
+        <!-- <div class="container" id="bubbleContainer"></div> -->
+        <div class="container">
+            <div class="container-box mar1200">
+                <img class="logo" src="./static/img/logo.png" alt="" />
+                <div class="header">
+                    <img class="halo" src="./static/img/halo.png" />
+                    <img class="record-black" src="./static/img/record-black.svg" />
+                    <div class="record-circle"></div>
+                    <img class="star-icon" src="./static/img/star-icon.png" alt="" />
+                    <img class="bj-2" src="./static/img/song-request-bj-2.svg" alt="" />
+                    <img class="love-little" src="./static/img/love-little.svg" alt="" />
+                    <img class="music-icon" src="./static/img/music-icon.svg" alt="" />
+                    <img class="bj" src="./static/img/song-request-bj.svg" alt="" />
+                    <img class="love-big" src="./static/img/love-big.svg" alt="" />
+                    <img class="music-score" src="./static/img/music-score.png" />
+                    <img class="robot" src="./static/img/robot.png" />
+                    <img class="text" src="./static/img/song-request-text.svg" />
+                    <img class="face" src="./static/img/smiling-face.png" />
+                    <img class="star-icon-2" src="./static/img/star-icon-2.png" />
+                    <img class="ai-music" src="./static/img/ai-music.png" />
+                    <img class="green-glow" src="./static/img/green-glow.png" />
+                    <img class="shadow" src="./static/img/shadow.png" />
+                </div>
+                <div class="list-box">
+                    <div class="list" id="bubbleContainer"></div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            // 标签数据
+            const tags = ["前端开发", "JavaScript", "CSS动画", "HTML5", "React", "Vue", "TypeScript", "Node.js", "UI设计", "用户体验", "响应式布局", "性能优化", "微信小程序", "PWA", "Canvas", "SVG", "WebGL", "数据可视化", "模块化", "组件化", "", "", "", "", ""];
+
+            // 获取容器
+            const container = document.getElementById("bubbleContainer");
+            
+            // 创建空白标签数组，用于存储所有空白标签的信息
+            const emptyTags = [];
+
+            // 存储所有标签的位置和大小信息
+            const allTags = [];
+            const tagSizes = []; // 存储每个标签的实际尺寸
+            const defaultTagWidth = 120; // 默认标签宽度
+            const defaultTagHeight = 40; // 默认标签高度
+
+            // 计算容器尺寸
+            function getContainerDimensions() {
+                const containerWidth = container.offsetWidth;
+                const containerHeight = container.offsetHeight;
+                return { containerWidth, containerHeight };
+            }
+
+            // 获取标签的实际尺寸
+            function getTagDimensions(tagText) {
+                // 创建一个临时标签来测量实际尺寸
+                const tempTag = document.createElement("div");
+                tempTag.className = "bubble-tag";
+                tempTag.textContent = tagText;
+                tempTag.style.position = "absolute";
+                tempTag.style.visibility = "hidden";
+                tempTag.style.left = "-9999px";
+                tempTag.style.top = "-9999px";
+
+                document.body.appendChild(tempTag);
+                const width = tempTag.offsetWidth;
+                const height = tempTag.offsetHeight;
+                document.body.removeChild(tempTag);
+
+                // 确保至少有默认的尺寸
+                return {
+                    width: Math.max(width, defaultTagWidth),
+                    height: Math.max(height, defaultTagHeight),
+                };
+            }
+
+            // 检查两个标签是否碰撞
+            function isColliding(tag1, tag2, padding = 20) {
+                // 计算两个标签之间的距离
+                const dx = Math.abs(tag1.x + tag1.width / 2 - (tag2.x + tag2.width / 2));
+                const dy = Math.abs(tag1.y + tag1.height / 2 - (tag2.y + tag2.height / 2));
+
+                // 如果距离小于两个标签半径之和加上内边距，则发生碰撞
+                return dx < tag1.width / 2 + tag2.width / 2 + padding && dy < tag1.height / 2 + tag2.height / 2 + padding;
+            }
+
+            // 计算理想的网格大小以实现均匀分布
+            function calculateGridSize(totalTags, containerWidth, containerHeight, avgTagSize) {
+                // 估计每个标签需要的空间（包括间距）
+                const tagSpacing = avgTagSize + 60; // 标签直径 + 间距
+
+                // 计算大致的行数和列数
+                const idealColumns = Math.ceil(Math.sqrt((totalTags * containerWidth) / containerHeight));
+                const idealRows = Math.ceil(totalTags / idealColumns);
+
+                // 确保网格不会太拥挤
+                const actualColumns = Math.min(idealColumns, Math.floor(containerWidth / tagSpacing));
+                const actualRows = Math.min(idealRows, Math.floor(containerHeight / tagSpacing));
+
+                return { columns: Math.max(1, actualColumns), rows: Math.max(1, actualRows) };
+            }
+
+            // 为新标签找到一个不与其他标签碰撞的位置，优先使用均匀分布
+            function findNonCollidingPosition(tagWidth, tagHeight, containerWidth, containerHeight, totalTags, currentIndex) {
+                const maxAttempts = 200;
+                let attempts = 0;
+
+                // 计算网格大小
+                const avgTagSize = (tagWidth + tagHeight) / 2;
+                const { columns, rows } = calculateGridSize(totalTags, containerWidth, containerHeight, avgTagSize);
+
+                // 首先尝试网格均匀分布位置
+                while (attempts < maxAttempts * 0.7) {
+                    attempts++;
+
+                    // 计算理想的网格位置
+                    const gridX = (currentIndex % columns) * (containerWidth / columns);
+                    const gridY = Math.floor(currentIndex / columns) * (containerHeight / rows);
+
+                    // 添加一些随机偏移，避免完全规则排列，但保持大致均匀
+                    const randomOffset = 0.2; // 20%的随机偏移
+                    const xOffset = (((Math.random() - 0.5) * containerWidth) / columns) * randomOffset;
+                    const yOffset = (((Math.random() - 0.5) * containerHeight) / rows) * randomOffset;
+
+                    // 计算最终位置，确保不会超出容器
+                    const x = Math.max(0, Math.min(containerWidth - tagWidth, gridX + xOffset));
+                    const y = Math.max(0, Math.min(containerHeight - tagHeight, gridY + yOffset));
+
+                    const newTag = { x, y, width: tagWidth, height: tagHeight };
+
+                    // 检查与所有已有标签是否碰撞
+                    let colliding = false;
+                    for (let i = 0; i < allTags.length; i++) {
+                        if (isColliding(newTag, allTags[i])) {
+                            colliding = true;
+                            break;
+                        }
+                    }
+
+                    if (!colliding) {
+                        return { x, y };
+                    }
+                }
+
+                // 如果网格分布尝试失败，回退到随机位置搜索
+                while (attempts < maxAttempts) {
+                    attempts++;
+
+                    // 随机生成一个位置
+                    const x = Math.random() * (containerWidth - tagWidth);
+                    const y = Math.random() * (containerHeight - tagHeight);
+                    const newTag = { x, y, width: tagWidth, height: tagHeight };
+
+                    // 检查与所有已有标签是否碰撞
+                    let colliding = false;
+                    for (let i = 0; i < allTags.length; i++) {
+                        if (isColliding(newTag, allTags[i])) {
+                            colliding = true;
+                            break;
+                        }
+                    }
+
+                    if (!colliding) {
+                        return { x, y };
+                    }
+                }
+
+                // 如果尝试次数用完仍然找不到完全不碰撞的位置，返回随机位置
+                return {
+                    x: Math.random() * (containerWidth - tagWidth),
+                    y: Math.random() * (containerHeight - tagHeight),
+                };
+            }
+
+            // 创建标签并添加动画
+            function createTags() {
+                const { containerWidth, containerHeight } = getContainerDimensions();
+                const totalTags = tags.length;
+
+                // 清空容器
+                container.innerHTML = "";
+                allTags.length = 0;
+                tagSizes.length = 0;
+
+                tags.forEach((tagText, index) => {
+                    // 创建标签元素
+                    const tag = document.createElement("div");
+                    tag.className = "bubble-tag";
+                    tag.textContent = tagText;
+
+                    // 获取标签的实际尺寸
+                    const { width, height } = getTagDimensions(tagText);
+                    tagSizes.push({ width, height });
+
+                    // 查找不碰撞的位置
+                    const { x, y } = findNonCollidingPosition(width, height, containerWidth, containerHeight, totalTags, index);
+                    tag.style.left = `${x}px`;
+                    tag.style.top = `${y}px`;
+
+                    // 保存标签信息
+                    allTags.push({ x, y, width, height, element: tag });
+
+                    // 随机大小
+                    const randomSize = 0.9 + Math.random() * 0.4; // 稍微增大了最小尺寸
+                    tag.style.transform = `scale(${randomSize})`;
+
+                    // 随机动画延迟
+                    const delay = Math.random() * 5;
+                    tag.style.animationDelay = `${delay}s`;
+
+                    // 随机动画持续时间
+                    const duration = 10 + Math.random() * 10; // 延长动画周期，使效果更流畅
+                    tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
+
+                    // 随机背景色 - 模仿截图中的颜色范围
+                    const hue = 250 + Math.random() * 60; // 紫色到粉色的范围
+                    const lightness = 85 + Math.random() * 10; // 亮度调整
+                    tag.style.backgroundColor = `hsla(${hue}, 70%, ${lightness}%, 0.9)`;
+
+                    // 添加到容器
+                    container.appendChild(tag);
+
+                    // 添加点击效果
+                    tag.addEventListener("click", () => {
+                        tag.style.animation = "none";
+                        tag.style.transform = "scale(1.3)";
+                        tag.style.zIndex = "10";
+                        setTimeout(() => {
+                            tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
+                            tag.style.animationDelay = "0s";
+                            tag.style.zIndex = "1";
+                        }, 300);
+                    });
+                });
+            }
+
+            // 窗口大小变化时重新创建标签
+            window.addEventListener("resize", () => {
+                createTags();
+            });
+
+            // 初始创建标签
+            createTags();
+        </script>
+    </body>
+</html>
diff --git a/song-request-station.html b/song-request-station.html
new file mode 100644
index 0000000..56e88d2
--- /dev/null
+++ b/song-request-station.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>标签气泡动效</title>
+        <style></style>
+
+        <link rel="stylesheet" href="./static/css/song-request-station.css" />
+    </head>
+    <body>
+        <!-- <div class="container" id="bubbleContainer"></div> -->
+        <div class="container">
+            <div class="container-box mar1200">
+                <img class="logo" src="./static/img/logo.png" alt="" />
+                <div class="header">
+                    <img class="halo" src="./static/img/halo.png" />
+                    <img class="record-black" src="./static/img/record-black.svg" />
+                    <div class="record-circle"></div>
+                    <img class="star-icon" src="./static/img/star-icon.png" alt="" />
+                    <img class="bj-2" src="./static/img/song-request-bj-2.svg" alt="" />
+                    <img class="love-little" src="./static/img/love-little.svg" alt="" />
+                    <img class="music-icon" src="./static/img/music-icon.svg" alt="" />
+                    <img class="bj" src="./static/img/song-request-bj.svg" alt="" />
+                    <img class="love-big" src="./static/img/love-big.svg" alt="" />
+                    <img class="music-score" src="./static/img/music-score.png" />
+                    <img class="robot" src="./static/img/robot.png" />
+                    <img class="text" src="./static/img/song-request-text.svg" />
+                    <img class="face" src="./static/img/smiling-face.png" />
+                    <img class="star-icon-2" src="./static/img/star-icon-2.png" />
+                    <img class="ai-music" src="./static/img/ai-music.png" />
+                    <img class="green-glow" src="./static/img/green-glow.png" />
+                    <img class="shadow" src="./static/img/shadow.png" />
+                </div>
+                <div class="list-box">
+                    <div class="list" id="bubbleContainer"></div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            // 标签数据
+            const tags = ["前端开发", "JavaScript", "CSS动画", "HTML5", "React", "Vue", "TypeScript", "Node.js", "UI设计", "用户体验", "响应式布局", "性能优化", "微信小程序", "PWA", "Canvas", "SVG", "WebGL", "数据可视化", "模块化", "组件化", "", "", "", "", ""];
+
+            // 获取容器
+            const container = document.getElementById("bubbleContainer");
+            
+            // 创建空白标签数组，用于存储所有空白标签的信息
+            const emptyTags = [];
+
+            // 存储所有标签的位置和大小信息
+            const allTags = [];
+            const tagSizes = []; // 存储每个标签的实际尺寸
+            const defaultTagWidth = 120; // 默认标签宽度
+            const defaultTagHeight = 40; // 默认标签高度
+
+            // 计算容器尺寸
+            function getContainerDimensions() {
+                const containerWidth = container.offsetWidth;
+                const containerHeight = container.offsetHeight;
+                return { containerWidth, containerHeight };
+            }
+
+            // 获取标签的实际尺寸
+            function getTagDimensions(tagText) {
+                // 创建一个临时标签来测量实际尺寸
+                const tempTag = document.createElement("div");
+                tempTag.className = "bubble-tag";
+                tempTag.textContent = tagText;
+                tempTag.style.position = "absolute";
+                tempTag.style.visibility = "hidden";
+                tempTag.style.left = "-9999px";
+                tempTag.style.top = "-9999px";
+
+                document.body.appendChild(tempTag);
+                const width = tempTag.offsetWidth;
+                const height = tempTag.offsetHeight;
+                document.body.removeChild(tempTag);
+
+                // 确保至少有默认的尺寸
+                return {
+                    width: Math.max(width, defaultTagWidth),
+                    height: Math.max(height, defaultTagHeight),
+                };
+            }
+
+            // 检查两个标签是否碰撞
+            function isColliding(tag1, tag2, padding = 20) {
+                // 判断是否为空白标签
+                const isTag1Empty = tag1.isEmpty === true;
+                const isTag2Empty = tag2.isEmpty === true;
+                
+                // 如果其中一个是空白标签，允许它们重叠
+                if (isTag1Empty || isTag2Empty) {
+                    return false;
+                }
+                
+                // 计算两个标签之间的距离
+                const dx = Math.abs(tag1.x + tag1.width / 2 - (tag2.x + tag2.width / 2));
+                const dy = Math.abs(tag1.y + tag1.height / 2 - (tag2.y + tag2.height / 2));
+
+                // 如果距离小于两个标签半径之和加上内边距，则发生碰撞
+                return dx < tag1.width / 2 + tag2.width / 2 + padding && dy < tag1.height / 2 + tag2.height / 2 + padding;
+            }
+
+            // 计算理想的网格大小以实现均匀分布
+            function calculateGridSize(totalTags, containerWidth, containerHeight, avgTagSize) {
+                // 估计每个标签需要的空间（包括间距）
+                const tagSpacing = avgTagSize + 60; // 标签直径 + 间距
+
+                // 计算大致的行数和列数
+                const idealColumns = Math.ceil(Math.sqrt((totalTags * containerWidth) / containerHeight));
+                const idealRows = Math.ceil(totalTags / idealColumns);
+
+                // 确保网格不会太拥挤
+                const actualColumns = Math.min(idealColumns, Math.floor(containerWidth / tagSpacing));
+                const actualRows = Math.min(idealRows, Math.floor(containerHeight / tagSpacing));
+
+                return { columns: Math.max(1, actualColumns), rows: Math.max(1, actualRows) };
+            }
+
+            // 为新标签找到一个不与其他标签碰撞的位置，优先使用均匀分布
+            function findNonCollidingPosition(tagWidth, tagHeight, containerWidth, containerHeight, totalTags, currentIndex) {
+                const maxAttempts = 200;
+                let attempts = 0;
+
+                // 计算网格大小
+                const avgTagSize = (tagWidth + tagHeight) / 2;
+                const { columns, rows } = calculateGridSize(totalTags, containerWidth, containerHeight, avgTagSize);
+
+                // 首先尝试网格均匀分布位置
+                while (attempts < maxAttempts * 0.7) {
+                    attempts++;
+
+                    // 计算理想的网格位置
+                    const gridX = (currentIndex % columns) * (containerWidth / columns);
+                    const gridY = Math.floor(currentIndex / columns) * (containerHeight / rows);
+
+                    // 添加一些随机偏移，避免完全规则排列，但保持大致均匀
+                    const randomOffset = 0.2; // 20%的随机偏移
+                    const xOffset = (((Math.random() - 0.5) * containerWidth) / columns) * randomOffset;
+                    const yOffset = (((Math.random() - 0.5) * containerHeight) / rows) * randomOffset;
+
+                    // 计算最终位置，确保不会超出容器
+                    const x = Math.max(0, Math.min(containerWidth - tagWidth, gridX + xOffset));
+                    const y = Math.max(0, Math.min(containerHeight - tagHeight, gridY + yOffset));
+
+                    const newTag = { x, y, width: tagWidth, height: tagHeight };
+
+                    // 检查与所有已有标签是否碰撞
+                    let colliding = false;
+                    for (let i = 0; i < allTags.length; i++) {
+                        if (isColliding(newTag, allTags[i])) {
+                            colliding = true;
+                            break;
+                        }
+                    }
+
+                    if (!colliding) {
+                        return { x, y };
+                    }
+                }
+
+                // 如果网格分布尝试失败，回退到随机位置搜索
+                while (attempts < maxAttempts) {
+                    attempts++;
+
+                    // 随机生成一个位置
+                    const x = Math.random() * (containerWidth - tagWidth);
+                    const y = Math.random() * (containerHeight - tagHeight);
+                    const newTag = { x, y, width: tagWidth, height: tagHeight };
+
+                    // 检查与所有已有标签是否碰撞
+                    let colliding = false;
+                    for (let i = 0; i < allTags.length; i++) {
+                        if (isColliding(newTag, allTags[i])) {
+                            colliding = true;
+                            break;
+                        }
+                    }
+
+                    if (!colliding) {
+                        return { x, y };
+                    }
+                }
+
+                // 如果尝试次数用完仍然找不到完全不碰撞的位置，返回随机位置
+                return {
+                    x: Math.random() * (containerWidth - tagWidth),
+                    y: Math.random() * (containerHeight - tagHeight),
+                };
+            }
+
+            // 创建标签并添加动画
+            function createTags() {
+                const { containerWidth, containerHeight } = getContainerDimensions();
+                const totalTags = tags.length;
+
+                // 清空容器
+                container.innerHTML = "";
+                allTags.length = 0;
+                tagSizes.length = 0;
+
+                tags.forEach((tagText, index) => {
+                    // 创建标签元素
+                    const tag = document.createElement("div");
+                    tag.className = "bubble-tag";
+                    tag.textContent = tagText;
+                    
+                    // 判断是否为空白标签
+                    const isEmpty = tagText === "";
+                    
+                    // 获取标签的实际尺寸
+                    const { width, height } = getTagDimensions(tagText);
+                    tagSizes.push({ width, height });
+
+                    // 查找不碰撞的位置
+                    const { x, y } = findNonCollidingPosition(width, height, containerWidth, containerHeight, totalTags, index);
+                    tag.style.left = `${x}px`;
+                    tag.style.top = `${y}px`;
+
+                    // 保存标签信息
+                    const tagInfo = { x, y, width, height, element: tag };
+                    
+                    // 如果是空白标签，添加标记并设置不同的样式
+                    if (isEmpty) {
+                        tagInfo.isEmpty = true;
+                        tag.style.backgroundColor = "transparent";
+                        tag.style.zIndex = "0";
+                        tag.style.border = "1px dashed rgba(150, 150, 255, 0.5)";
+                        tag.style.pointerEvents = "none";
+                        emptyTags.push(tagInfo);
+                    } else {
+                        tag.style.zIndex = "1";
+                    }
+                    
+                    allTags.push(tagInfo);
+
+                    // 随机大小
+                    const randomSize = 0.9 + Math.random() * 0.4; // 稍微增大了最小尺寸
+                    tag.style.transform = `scale(${randomSize})`;
+
+                    // 随机动画延迟
+                    const delay = Math.random() * 5;
+                    tag.style.animationDelay = `${delay}s`;
+
+                    // 随机动画持续时间
+                    const duration = 10 + Math.random() * 10; // 延长动画周期，使效果更流畅
+                    tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
+
+                    // 非空白标签设置背景色
+                    if (!isEmpty) {
+                        // 随机背景色 - 模仿截图中的颜色范围
+                        const hue = 250 + Math.random() * 60; // 紫色到粉色的范围
+                        const lightness = 85 + Math.random() * 10; // 亮度调整
+                        tag.style.backgroundColor = `hsla(${hue}, 70%, ${lightness}%, 0.9)`;
+                    }
+
+                    // 添加到容器
+                    container.appendChild(tag);
+
+                    // 非空白标签添加点击效果
+                    if (!isEmpty) {
+                        tag.addEventListener("click", () => {
+                            tag.style.animation = "none";
+                            tag.style.transform = "scale(1.3)";
+                            tag.style.zIndex = "10";
+                            setTimeout(() => {
+                                tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
+                                tag.style.animationDelay = "0s";
+                                tag.style.zIndex = "1";
+                            }, 300);
+                        });
+                    }
+                });
+            }
+
+            // 窗口大小变化时重新创建标签
+            window.addEventListener("resize", () => {
+                createTags();
+            });
+
+            // 初始创建标签
+            createTags();
+        </script>
+    </body>
+</html>
diff --git a/static/css/song-request-station.css b/static/css/song-request-station.css
new file mode 100644
index 0000000..3a5f82d
--- /dev/null
+++ b/static/css/song-request-station.css
@@ -0,0 +1,290 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.container {
+  width: 100%;
+  background-color: #333333;
+  /* 气泡浮动动画 */
+  /* 呼吸效果动画 */
+}
+.container .flexflex {
+  display: flex;
+}
+.container .flexcenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container .flexjcenter {
+  display: flex;
+  justify-content: center;
+}
+.container .flexacenter {
+  display: flex;
+  align-items: center;
+}
+.container .flex1 {
+  flex: 1;
+}
+.container .flexcolumn {
+  display: flex;
+  flex-direction: column;
+}
+.container .mar1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.container * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.container body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  overflow: hidden;
+}
+.container .bubble-tag {
+  position: absolute;
+  padding: 8px 18px;
+  border-radius: 25px;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  user-select: none;
+  z-index: 1;
+}
+.container .bubble-tag:hover {
+  transform: scale(1.15);
+  z-index: 10;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) translateX(0) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-15px) translateX(10px) rotate(1deg);
+  }
+  50% {
+    transform: translateY(-30px) translateX(5px) rotate(0deg);
+  }
+  75% {
+    transform: translateY(-15px) translateX(-10px) rotate(-1deg);
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 0.8;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  }
+  100% {
+    opacity: 1;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  }
+}
+.container .container-box {
+  padding-top: 24px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.container .container-box .logo {
+  width: 121px;
+  height: 24px;
+  margin-bottom: 31px;
+}
+.container .container-box .header {
+  position: relative;
+  width: 1200px;
+  height: 320px;
+  border-radius: 20px;
+  margin-bottom: 20px;
+}
+.container .container-box .header::after {
+  content: "";
+  width: 1200px;
+  height: 320px;
+  background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
+  border-radius: 20px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.container .container-box .header .halo {
+  width: 240px;
+  height: 214px;
+  position: absolute;
+  top: -71px;
+  left: -59px;
+}
+.container .container-box .header .star-icon {
+  position: absolute;
+  top: 46px;
+  left: 51px;
+  width: 56px;
+  height: 56px;
+  z-index: 1;
+}
+.container .container-box .header .love-little {
+  position: absolute;
+  top: 46px;
+  left: 51px;
+  width: 186px;
+  height: 160px;
+  transform: rotate(315deg);
+  top: 137px;
+  left: -10px;
+  z-index: 1;
+}
+.container .container-box .header .bj-2 {
+  width: 360px;
+  height: 128px;
+  position: absolute;
+  left: 25px;
+  bottom: 0;
+  z-index: 1;
+}
+.container .container-box .header .music-icon {
+  width: 34px;
+  height: 37px;
+  position: absolute;
+  top: 194px;
+  left: 40px;
+  transform: rotate(345deg);
+  z-index: 1;
+}
+.container .container-box .header .bj {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 1064px;
+  height: 320px;
+  z-index: 1;
+}
+.container .container-box .header .love-big {
+  transform: rotate(44deg);
+  width: 321px;
+  height: 276px;
+  position: absolute;
+  top: 31px;
+  left: 69px;
+  z-index: 1;
+}
+.container .container-box .header .music-score {
+  width: 240px;
+  height: 240px;
+  position: absolute;
+  top: 1px;
+  left: 217px;
+  z-index: 1;
+}
+.container .container-box .header .robot {
+  width: 238px;
+  height: 238px;
+  position: absolute;
+  top: 42px;
+  left: 432px;
+  z-index: 1;
+}
+.container .container-box .header .text {
+  width: 224px;
+  height: 194px;
+  position: absolute;
+  top: 68px;
+  left: 694px;
+  z-index: 1;
+}
+.container .container-box .header .face {
+  width: 83px;
+  height: 83px;
+  position: absolute;
+  top: -27px;
+  left: 1080px;
+  z-index: 1;
+}
+.container .container-box .header .star-icon-2 {
+  width: 110px;
+  height: 110px;
+  position: absolute;
+  left: 953px;
+  top: 70px;
+  z-index: 1;
+}
+.container .container-box .header .ai-music {
+  width: 81px;
+  height: 28px;
+  position: absolute;
+  top: 282px;
+  left: 1106px;
+  z-index: 1;
+}
+.container .container-box .header .record-black {
+  width: 223px;
+  height: 233px;
+  position: absolute;
+  bottom: 0;
+  right: -1px;
+  z-index: 1;
+}
+.container .container-box .header .record-circle {
+  position: absolute;
+  top: 147px;
+  left: 1039px;
+  background-color: #72db86;
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  z-index: 1;
+}
+.container .container-box .header .record-circle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #fff;
+}
+.container .container-box .header .green-glow {
+  width: 306px;
+  height: 62px;
+  position: absolute;
+  top: 285px;
+  left: 217px;
+}
+.container .container-box .header .shadow {
+  width: 240px;
+  height: 165px;
+  position: absolute;
+  top: 191px;
+  left: 997px;
+}
+.container .container-box .list-box {
+  width: 1200px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.10980392);
+  border-radius: 20px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 0;
+  margin-bottom: 40px;
+  flex: 1;
+}
+.container .container-box .list-box .list {
+  width: 1194px;
+  height: 100%;
+  background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
+  border-radius: 18px;
+}
diff --git a/static/css/song-request-station.less b/static/css/song-request-station.less
new file mode 100644
index 0000000..c5b64ce
--- /dev/null
+++ b/static/css/song-request-station.less
@@ -0,0 +1,324 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.container {
+    width: 100%;
+    background-color: rgba(51, 51, 51, 1);
+
+    .flexflex {
+        display: flex;
+    }
+    .flexcenter {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .flexjcenter {
+        display: flex;
+        justify-content: center;
+    }
+    .flexacenter {
+        display: flex;
+        align-items: center;
+    }
+    .flex1 {
+        flex: 1;
+    }
+    .flexcolumn {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mar1200 {
+        width: 1200px;
+        margin: 0 auto;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        overflow: hidden;
+    }
+
+
+    .bubble-tag {
+        position: absolute;
+        padding: 8px 18px;
+        border-radius: 25px;
+        background-color: rgba(255, 255, 255, 0.9);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        font-size: 14px;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+        user-select: none;
+        z-index: 1;
+    }
+
+    .bubble-tag:hover {
+        transform: scale(1.15);
+        z-index: 10;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    /* 气泡浮动动画 */
+    @keyframes float {
+        0%,
+        100% {
+            transform: translateY(0) translateX(0) rotate(0deg);
+        }
+        25% {
+            transform: translateY(-15px) translateX(10px) rotate(1deg);
+        }
+        50% {
+            transform: translateY(-30px) translateX(5px) rotate(0deg);
+        }
+        75% {
+            transform: translateY(-15px) translateX(-10px) rotate(-1deg);
+        }
+    }
+
+    /* 呼吸效果动画 */
+    @keyframes pulse {
+        0% {
+            opacity: 0.8;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        100% {
+            opacity: 1;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    .container-box {
+        padding-top: 24px;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+
+        .logo {
+            width: 121px;
+            height: 24px;
+            margin-bottom: 31px;
+        }
+
+        .header {
+            position: relative;
+            width: 1200px;
+            height: 320px;
+            // background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
+            border-radius: 20px;
+            margin-bottom: 20px;
+
+            &::after {
+                content: "";
+                width: 1200px;
+                height: 320px;
+                background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
+                border-radius: 20px;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+
+            .halo {
+                width: 240px;
+                height: 214px;
+                position: absolute;
+                top: -71px;
+                left: -59px;
+            }
+
+            .star-icon {
+                position: absolute;
+                top: 46px;
+                left: 51px;
+                width: 56px;
+                height: 56px;
+                z-index: 1;
+            }
+
+            .love-little {
+                position: absolute;
+                top: 46px;
+                left: 51px;
+                width: 186px;
+                height: 160px;
+                transform: rotate(315deg);
+                top: 137px;
+                left: -10px;
+                z-index: 1;
+            }
+
+            .bj-2 {
+                width: 360px;
+                height: 128px;
+                position: absolute;
+                left: 25px;
+                bottom: 0;
+                z-index: 1;
+            }
+
+            .music-icon {
+                width: 34px;
+                height: 37px;
+                position: absolute;
+                top: 194px;
+                left: 40px;
+                transform: rotate(345deg);
+                z-index: 1;
+            }
+
+            .bj {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                width: 1064px;
+                height: 320px;
+                z-index: 1;
+            }
+
+            .love-big {
+                transform: rotate(44deg);
+                width: 321px;
+                height: 276px;
+                position: absolute;
+                top: 31px;
+                left: 69px;
+                z-index: 1;
+            }
+
+            .music-score {
+                width: 240px;
+                height: 240px;
+                position: absolute;
+                top: 1px;
+                left: 217px;
+                z-index: 1;
+            }
+
+            .robot {
+                width: 238px;
+                height: 238px;
+                position: absolute;
+                top: 42px;
+                left: 432px;
+                z-index: 1;
+            }
+
+            .text {
+                width: 224px;
+                height: 194px;
+                position: absolute;
+                top: 68px;
+                left: 694px;
+                z-index: 1;
+            }
+
+            .face {
+                width: 83px;
+                height: 83px;
+                position: absolute;
+                top: -27px;
+                left: 1080px;
+                z-index: 1;
+            }
+
+            .star-icon-2 {
+                width: 110px;
+                height: 110px;
+                position: absolute;
+                left: 953px;
+                top: 70px;
+                z-index: 1;
+            }
+
+            .ai-music {
+                width: 81px;
+                height: 28px;
+                position: absolute;
+                top: 282px;
+                left: 1106px;
+                z-index: 1;
+            }
+
+            .record-black {
+                width: 223px;
+                height: 233px;
+                position: absolute;
+                bottom: 0;
+                right: -1px;
+                z-index: 1;
+            }
+
+            .record-circle {
+                position: absolute;
+                top: 147px;
+                left: 1039px;
+                background-color: rgb(114, 219, 134);
+                width: 110px;
+                height: 110px;
+                border-radius: 50%;
+                z-index: 1;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    display: block;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50%;
+                    background-color: #fff;
+                }
+            }
+
+            .green-glow {
+                width: 306px;
+                height: 62px;
+                position: absolute;
+                top: 285px;
+                left: 217px;
+            }
+
+            .shadow {
+                width: 240px;
+                height: 165px;
+                position: absolute;
+                top: 191px;
+                left: 997px;
+            }
+        }
+
+        .list-box {
+            width: 1200px;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.109803921568627);
+            border-radius: 20px;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 3px 0;
+            margin-bottom: 40px;
+            flex: 1;
+            .list {
+                width: 1194px;
+                height: 100%;
+                background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
+                border-radius: 18px;
+            }
+        }
+    }
+}
diff --git a/static/img/ai-music.png b/static/img/ai-music.png
new file mode 100644
index 0000000..03b17f8
Binary files /dev/null and b/static/img/ai-music.png differ
diff --git a/static/img/favicon.ico b/static/img/favicon.ico
deleted file mode 100644
index 2670973..0000000
Binary files a/static/img/favicon.ico and /dev/null differ
diff --git a/static/img/green-glow.png b/static/img/green-glow.png
new file mode 100644
index 0000000..1490b51
Binary files /dev/null and b/static/img/green-glow.png differ
diff --git a/static/img/halo.png b/static/img/halo.png
new file mode 100644
index 0000000..b06b2a1
Binary files /dev/null and b/static/img/halo.png differ
diff --git a/static/img/love-big.svg b/static/img/love-big.svg
new file mode 100644
index 0000000..2d46457
--- /dev/null
+++ b/static/img/love-big.svg
@@ -0,0 +1,12 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="321px" height="276px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="80.0208971180524" y1="201.54595377948" x2="297.940183742093" y2="22.7556431456892" id="LinearGradient83">
+      <stop id="Stop84" stop-color="#ff8eba" offset="0" />
+      <stop id="Stop85" stop-color="#f4458c" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -429 -110 )">
+    <path d="M 168.381696428571 272.765625  C 166.232142857143 274.921875  163.604910714286 276  160.5 276  C 157.395089285714 276  154.767857142857 274.921875  152.618303571429 272.765625  L 40.8415178571429 164.59375  C 39.6473214285714 163.635416666667  38.0053013392857 162.078125  35.9154575892857 159.921875  C 33.8256138392857 157.765625  30.51171875 153.842447916667  25.9737723214286 148.15234375  C 21.4358258928571 142.462239583333  17.3755580357143 136.622395833333  13.79296875 130.6328125  C 10.2103794642857 124.643229166667  7.01590401785714 117.395833333333  4.20954241071429 108.890625  C 1.40318080357143 100.385416666667  0 92.1197916666666  0 84.09375  C 0 57.7395833333333  7.58314732142857 37.1354166666667  22.7494419642857 22.28125  C 37.9157366071429 7.42708333333333  58.8738839285714 0  85.6238839285714 0  C 93.0279017857143 0  100.581194196429 1.28776041666665  108.283761160714 3.86328125000001  C 115.986328125 6.43880208333331  123.151506696429 9.91276041666665  129.779296875 14.28515625  C 136.407087053571 18.6575520833333  142.109375 22.7604166666666  146.886160714286 26.59375  C 151.662946428571 30.4270833333333  156.200892857143 34.5  160.5 38.8125  C 164.799107142857 34.5  169.337053571429 30.4270833333333  174.113839285714 26.59375  C 178.890625 22.7604166666666  184.592912946429 18.6575520833333  191.220703125 14.28515625  C 197.848493303571 9.91276041666665  205.013671875 6.43880208333331  212.716238839286 3.86328125000001  C 220.418805803571 1.28776041666665  227.972098214286 0  235.376116071429 0  C 262.126116071429 0  283.084263392857 7.42708333333333  298.250558035714 22.28125  C 313.416852678571 37.1354166666667  321 57.7395833333333  321 84.09375  C 321 110.567708333333  307.326450892857 137.520833333333  279.979352678571 164.953125  L 168.381696428571 272.765625  Z " fill-rule="nonzero" fill="url(#LinearGradient83)" stroke="none" transform="matrix(1 0 0 1 429 110 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/love-little.svg b/static/img/love-little.svg
new file mode 100644
index 0000000..40905d5
--- /dev/null
+++ b/static/img/love-little.svg
@@ -0,0 +1,12 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="186px" height="160px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="49.0234708755539" y1="118.474345856316" x2="180.341391096329" y2="24.280835020015" id="LinearGradient77">
+      <stop id="Stop78" stop-color="#a943e4" offset="0" />
+      <stop id="Stop79" stop-color="#f4458c" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -350 -216 )">
+    <path d="M 97.5669642857143 158.125  C 96.3214285714286 159.375  94.7991071428572 160  93 160  C 91.2008928571429 160  89.6785714285714 159.375  88.4330357142857 158.125  L 23.6651785714286 95.4166666666667  C 22.9732142857143 94.8611111111111  22.0217633928571 93.9583333333333  20.8108258928571 92.7083333333333  C 19.5998883928571 91.4583333333333  17.6796875 89.1840277777778  15.0502232142857 85.8854166666667  C 12.4207589285714 82.5868055555555  10.0680803571429 79.2013888888889  7.9921875 75.7291666666667  C 5.91629464285714 72.2569444444444  4.06529017857143 68.0555555555556  2.43917410714286 63.125  C 0.813058035714286 58.1944444444444  0 53.4027777777778  0 48.75  C 0 33.4722222222222  4.39397321428571 21.5277777777778  13.1819196428571 12.9166666666667  C 21.9698660714286 4.30555555555555  34.1138392857143 0  49.6138392857143 0  C 53.9040178571429 0  58.2806919642857 0.746527777777768  62.7438616071429 2.23958333333334  C 67.20703125 3.73263888888888  71.3588169642857 5.74652777777777  75.19921875 8.28125  C 79.0396205357143 10.8159722222222  82.34375 13.1944444444444  85.1116071428571 15.4166666666667  C 87.8794642857143 17.6388888888889  90.5089285714286 20  93 22.5  C 95.4910714285714 20  98.1205357142857 17.6388888888889  100.888392857143 15.4166666666667  C 103.65625 13.1944444444444  106.960379464286 10.8159722222222  110.80078125 8.28125  C 114.641183035714 5.74652777777777  118.79296875 3.73263888888888  123.256138392857 2.23958333333334  C 127.719308035714 0.746527777777768  132.095982142857 0  136.386160714286 0  C 151.886160714286 0  164.030133928571 4.30555555555555  172.818080357143 12.9166666666667  C 181.606026785714 21.5277777777778  186 33.4722222222222  186 48.75  C 186 64.0972222222222  178.077008928571 79.7222222222222  162.231026785714 95.625  L 97.5669642857143 158.125  Z " fill-rule="nonzero" fill="url(#LinearGradient77)" stroke="none" transform="matrix(1 0 0 1 350 216 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/music-icon.svg b/static/img/music-icon.svg
new file mode 100644
index 0000000..afc2675
--- /dev/null
+++ b/static/img/music-icon.svg
@@ -0,0 +1,12 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="37px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="17" y1="0" x2="17" y2="37" id="LinearGradient86">
+      <stop id="Stop87" stop-color="#fddf6d" offset="0" />
+      <stop id="Stop88" stop-color="#f3974a" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -400 -273 )">
+    <path d="M 33.3802083333333 0.622596153846156  C 33.7934027777778 1.03766025641025  34 1.54166666666667  34 2.13461538461539  L 34 27.0384615384615  C 34 27.7796474358974  33.7491319444444 28.4393028846154  33.2473958333333 29.0174278846154  C 32.7456597222222 29.5955528846154  32.1111111111111 30.0439703525641  31.34375 30.3626802884615  C 30.5763888888889 30.681390224359  29.8127170138889 30.9185697115385  29.052734375 31.07421875  C 28.2927517361111 31.2298677884615  27.5807291666667 31.3076923076923  26.9166666666667 31.3076923076923  C 26.2526041666667 31.3076923076923  25.5405815972222 31.2298677884615  24.7805989583333 31.07421875  C 24.0206163194444 30.9185697115385  23.2569444444444 30.681390224359  22.4895833333333 30.3626802884615  C 21.7222222222222 30.0439703525641  21.0876736111111 29.5955528846154  20.5859375 29.0174278846154  C 20.0842013888889 28.4393028846154  19.8333333333333 27.7796474358974  19.8333333333333 27.0384615384615  C 19.8333333333333 26.2972756410256  20.0842013888889 25.6376201923077  20.5859375 25.0594951923077  C 21.0876736111111 24.4813701923077  21.7222222222222 24.032952724359  22.4895833333333 23.7142427884615  C 23.2569444444444 23.3955328525641  24.0206163194444 23.1583533653846  24.7805989583333 23.0027043269231  C 25.5405815972222 22.8470552884615  26.2526041666667 22.7692307692308  26.9166666666667 22.7692307692308  C 28.4661458333333 22.7692307692308  29.8828125 23.0582932692308  31 23.6364182692308  L 31 11.6959134615385  L 14.1666666666667 16.9657451923077  L 14.1666666666667 32.7307692307692  C 14.1666666666667 33.4719551282051  13.9157986111111 34.1316105769231  13.4140625 34.7097355769231  C 12.9123263888889 35.2878605769231  12.2777777777778 35.7362780448718  11.5104166666667 36.0549879807692  C 10.7430555555556 36.3736979166667  9.97938368055556 36.6108774038462  9.21940104166667 36.7665264423077  C 8.45941840277778 36.9221754807692  7.74739583333333 37  7.08333333333333 37  C 6.41927083333333 37  5.70724826388889 36.9221754807692  4.947265625 36.7665264423077  C 4.18728298611111 36.6108774038462  3.42361111111111 36.3736979166667  2.65625 36.0549879807692  C 1.88888888888889 35.7362780448718  1.25434027777778 35.2878605769231  0.752604166666667 34.7097355769231  C 0.250868055555556 34.1316105769231  0 33.4719551282051  0 32.7307692307692  C 0 31.9895833333333  0.250868055555556 31.3299278846154  0.752604166666667 30.7518028846154  C 1.25434027777778 30.1736778846154  1.88888888888889 29.7252604166667  2.65625 29.4065504807692  C 3.42361111111111 29.0878405448718  4.18728298611111 28.8506610576923  4.947265625 28.6950120192308  C 5.70724826388889 28.5393629807692  6.41927083333333 28.4615384615385  7.08333333333333 28.4615384615385  C 8.6328125 28.4615384615385  10.0494791666667 28.7506009615385  12 29.3287259615385  L 12 7.82692307692308  C 11.3333333333333 7.36738782051282  11.4735243055556 6.94861778846154  11.75390625 6.57061298076923  C 12.0342881944444 6.19260817307692  12.3958333333333 5.92948717948718  12.8385416666667 5.78125  L 31.2552083333333 0.0889423076923074  C 31.4322916666667 0.0296474358974358  31.6388888888889 0  31.875 0  C 32.4652777777778 0  32.9670138888889 0.207532051282051  33.3802083333333 0.622596153846156  Z " fill-rule="nonzero" fill="url(#LinearGradient86)" stroke="none" transform="matrix(1 0 0 1 400 273 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/music-score.png b/static/img/music-score.png
new file mode 100644
index 0000000..eed5c2e
Binary files /dev/null and b/static/img/music-score.png differ
diff --git a/static/img/record-black.svg b/static/img/record-black.svg
new file mode 100644
index 0000000..e6d3ca9
--- /dev/null
+++ b/static/img/record-black.svg
@@ -0,0 +1,6 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="223px" height="233px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1338 -166 )">
+    <path d="M 116.443349753695 0  C 164.076564175014 0  204.253703364059 27.3522430445635  222 67.5256649406986  L 222 165.474335053222  C 204.253703364059 205.647756955436  164.076564175014 233  116.443349753695 233  C 51.2350738916256 233  0 181.74  0 116.5  C 0 51.26  51.2350738916256 0  116.443349753695 0  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1338 166 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/robot.png b/static/img/robot.png
new file mode 100644
index 0000000..09af665
Binary files /dev/null and b/static/img/robot.png differ
diff --git a/static/img/shadow.png b/static/img/shadow.png
new file mode 100644
index 0000000..f967f80
Binary files /dev/null and b/static/img/shadow.png differ
diff --git a/static/img/smiling-face.png b/static/img/smiling-face.png
new file mode 100644
index 0000000..4b54b82
Binary files /dev/null and b/static/img/smiling-face.png differ
diff --git a/static/img/song-request-bj-2.svg b/static/img/song-request-bj-2.svg
new file mode 100644
index 0000000..6980fb3
--- /dev/null
+++ b/static/img/song-request-bj-2.svg
@@ -0,0 +1,12 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="128px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="130.108695652174" y1="128" x2="259.239130434783" y2="79.0588235294117" id="LinearGradient74">
+      <stop id="Stop75" stop-color="#2f1071" offset="0" />
+      <stop id="Stop76" stop-color="#611ccf" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -385 -271 )">
+    <path d="M 177 128  L 0 83.6535433070867  L 347 0  L 360 128  L 177 128  Z " fill-rule="nonzero" fill="url(#LinearGradient74)" stroke="none" transform="matrix(1 0 0 1 385 271 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/song-request-bj.svg b/static/img/song-request-bj.svg
new file mode 100644
index 0000000..f7c4a07
--- /dev/null
+++ b/static/img/song-request-bj.svg
@@ -0,0 +1,12 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1064px" height="320px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="31.9200000000012" y1="16.9411764705882" x2="1028.53333333334" y2="310.588235294118" id="LinearGradient80">
+      <stop id="Stop81" stop-color="#c22cc3" offset="0" />
+      <stop id="Stop82" stop-color="#db2cd9" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -496 -79 )">
+    <path d="M 184 320  L 0 271  L 111 0  L 1064 247  L 1064 300  C 1064 311.2  1055.2 320  1044 320  L 184 320  Z " fill-rule="nonzero" fill="url(#LinearGradient80)" stroke="none" transform="matrix(1 0 0 1 496 79 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/song-request-text.svg b/static/img/song-request-text.svg
new file mode 100644
index 0000000..a502e5b
--- /dev/null
+++ b/static/img/song-request-text.svg
@@ -0,0 +1,18 @@
+﻿<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="224px" height="194px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="1054px" y="147px" width="224px" height="194px" filterUnits="userSpaceOnUse" id="filter92">
+      <feOffset dx="5" dy="5" in="SourceAlpha" result="shadowOffsetInner" />
+      <feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.211764705882353 0  " in="shadowComposite" />
+    </filter>
+    <g id="widget93">
+      <image preserveAspectRatio="none" style="overflow:visible" width="214" height="184" xlink:href="data:image/png;base64,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" x="1054px" y="147px" />
+    </g>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1054 -147 )">
+    <use xlink:href="#widget93" filter="url(#filter92)" />
+    <use xlink:href="#widget93" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/star-icon-2.png b/static/img/star-icon-2.png
new file mode 100644
index 0000000..db57fff
Binary files /dev/null and b/static/img/star-icon-2.png differ
diff --git a/static/img/star-icon.png b/static/img/star-icon.png
new file mode 100644
index 0000000..bdcc078
Binary files /dev/null and b/static/img/star-icon.png differ
diff --git a/static/js/index.js b/static/js/index.js
index 45cba22..52d5736 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -179,6 +179,8 @@ const search = createApp({
         let art = null;
         // 开启播放 MV
         const openPreview = (id) => {
+            closeAll();
+
             ajax("https://pujianchaoyin.com/api/getMvDetail", {
                 id,
             }).then((res) => {
@@ -234,10 +236,8 @@ const search = createApp({
         const manageAudio = (src, area) => {
             const audio = audioPlayer.value;
             closeAll();
-            nextTick(() => {
+            setTimeout(() => {
                 if (audio?.src != src) audio.src = src;
-                console.log("audio", audio);
-
                 audio.play().then(() => {
                     if (area == "works") {
                         awardAudioList.value.forEach((item) => {
@@ -262,7 +262,7 @@ const search = createApp({
                         playData.value = { ...zeroOrderStudents.value, area };
                     }
                 });
-            });
+            }, 500);
         };
 
         // 重新播放
diff --git a/tag-bubbles copy.html b/tag-bubbles copy.html
new file mode 100644
index 0000000..a8dd7ff
--- /dev/null
+++ b/tag-bubbles copy.html	
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>标签气泡动效</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            overflow: hidden;
+        }
+        
+        .container {
+            width: 100%;
+            height: 100vh;
+            position: relative;
+            padding: 20px;
+        }
+        
+        .bubble-tag {
+            position: absolute;
+            padding: 8px 18px;
+            border-radius: 25px;
+            background-color: rgba(255, 255, 255, 0.9);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            font-size: 14px;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+            user-select: none;
+            z-index: 1;
+        }
+        
+        .bubble-tag:hover {
+            transform: scale(1.15);
+            z-index: 10;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        }
+        
+        /* 气泡浮动动画 */
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) translateX(0) rotate(0deg);
+            }
+            25% {
+                transform: translateY(-15px) translateX(10px) rotate(1deg);
+            }
+            50% {
+                transform: translateY(-30px) translateX(5px) rotate(0deg);
+            }
+            75% {
+                transform: translateY(-15px) translateX(-10px) rotate(-1deg);
+            }
+        }
+        
+        /* 呼吸效果动画 */
+        @keyframes pulse {
+            0% {
+                opacity: 0.8;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            }
+            100% {
+                opacity: 1;
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+            }
+        }
+        
+        .title {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 24px;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <h1 class="title">标签气泡动效演示</h1>
+    <div class="container" id="bubbleContainer"></div>
+
+    <script>
+        // 标签数据
+        const tags = [
+            "前端开发", "JavaScript", "CSS动画", "HTML5", 
+            "React", "Vue", "TypeScript", "Node.js",
+            "UI设计", "用户体验", "响应式布局", "性能优化",
+            "微信小程序", "PWA", "Canvas", "SVG",
+            "WebGL", "数据可视化", "模块化", "组件化"
+        ];
+        
+        // 获取容器
+        const container = document.getElementById('bubbleContainer');
+        const containerWidth = container.offsetWidth;
+        const containerHeight = container.offsetHeight;
+        
+        // 创建标签并添加动画
+        tags.forEach((tagText, index) => {
+            // 创建标签元素
+            const tag = document.createElement('div');
+            tag.className = 'bubble-tag';
+            tag.textContent = tagText;
+            
+            // 随机位置
+            const randomX = Math.random() * (containerWidth - 120);
+            const randomY = Math.random() * (containerHeight - 50);
+            tag.style.left = `${randomX}px`;
+            tag.style.top = `${randomY}px`;
+            
+            // 随机大小
+            const randomSize = 0.8 + Math.random() * 0.4;
+            tag.style.transform = `scale(${randomSize})`;
+            
+            // 随机动画延迟
+            const delay = Math.random() * 5;
+            tag.style.animationDelay = `${delay}s`;
+            
+            // 随机动画持续时间
+            const duration = 8 + Math.random() * 8;
+            tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
+            
+            // 随机背景色
+            const hue = 260 + Math.random() * 40; // 紫色调范围
+            const lightness = 90 + Math.random() * 5;
+            tag.style.backgroundColor = `hsla(${hue}, 70%, ${lightness}%, 0.9)`;
+            
+            // 添加到容器
+            container.appendChild(tag);
+            
+            // 添加点击效果
+            tag.addEventListener('click', () => {
+                tag.style.animation = 'none';
+                tag.style.transform = 'scale(1.3)';
+                setTimeout(() => {
+                    tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
+                    tag.style.animationDelay = '0s';
+                }, 300);
+            });
+        });
+    </script>
+</body>
+</html>
