From 0e0d977c3bf95ec68271051f85af2c0bc76259b5 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Fri, 19 Sep 2025 19:18:28 +0800 Subject: [PATCH] =?UTF-8?q?style(css):=20=E4=BC=98=E5=8C=96=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E6=8C=89=E9=92=AE=E5=92=8C=E6=A0=87=E7=AD=BE=E7=9A=84?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 简化播放按钮的样式实现，移除冗余的伪元素，改用box-shadow实现边框效果 统一标签的圆角半径和背景色，移除注释掉的代码 调整播放按钮点击逻辑，当playurl不存在时自动获取播放链接 --- index.html | 2 +- static/css/song-request-station.css | 15 +---- static/css/song-request-station.less | 89 ++++++---------------------- static/js/index.js | 11 +++- 4 files changed, 30 insertions(+), 87 deletions(-) diff --git a/index.html b/index.html index 85e5ce1..0a05bbc 100644 --- a/index.html +++ b/index.html @@ -152,7 +152,7 @@
- +
diff --git a/static/css/song-request-station.css b/static/css/song-request-station.css index fd92c5d..81f0779 100644 --- a/static/css/song-request-station.css +++ b/static/css/song-request-station.css @@ -295,22 +295,11 @@ .container .container-box .list-box .list-fill .fill-item { width: 33px; height: 23px; - border-radius: 8px; - background-color: rgba(255, 255, 255, 0.223529); + border-radius: 100px; position: absolute; cursor: pointer; -} -.container .container-box .list-box .list-fill .fill-item::after { - content: ""; - width: calc(100% - 6px); - height: calc(100% - 6px); + box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529); background: rgba(255, 255, 255, 0.5); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 8px; - z-index: -1; } .container .container-box .list-box .list-fill .fill-item.item2 { width: 48px; diff --git a/static/css/song-request-station.less b/static/css/song-request-station.less index 6dd223a..8284c1e 100644 --- a/static/css/song-request-station.less +++ b/static/css/song-request-station.less @@ -342,23 +342,25 @@ .fill-item { width: 33px; height: 23px; - border-radius: 8px; - background-color: rgba(255, 255, 255, 0.223529); + border-radius: 100px; + // background-color: rgba(255, 255, 255, 0.223529); position: absolute; cursor: pointer; + box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529); + background: rgba(255, 255, 255, 0.5); - &::after { - content: ""; - width: calc(100% - 6px); - height: calc(100% - 6px); - background: rgba(255, 255, 255, 0.5); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 8px; - z-index: -1; - } + // &::after { + // content: ""; + // width: calc(100% - 6px); + // height: calc(100% - 6px); + // background: rgba(255, 255, 255, 0.5); + // position: absolute; + // top: 50%; + // left: 50%; + // transform: translate(-50%, -50%); + // border-radius: 100px; + // z-index: -1; + // } &.item2 { width: 48px; @@ -409,112 +411,55 @@ .tag-item { height: 60px; line-height: 60px; - // border-radius: 8px; border-radius: 30px; - // background-color: rgba(255, 255, 255, 0.223529); background: #d5e7f7; - position: absolute; font-size: 20px !important; color: #1c3e5e; - padding: 0 25px; width: fit-content; cursor: pointer; - // transition: all 0.3s; box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529); opacity: 1 !important; + &:hover { font-weight: 650; color: rgb(88, 58, 5) !important; background-color: rgba(241, 154, 4, 1) !important; - - // &::after { - // background-color: rgba(241, 154, 4, 1) !important; - // } } - // &.item2 { - // height: 60px; - // line-height: 60px; - // border-radius: 30px; - - // color: #1c3e5e; - // font-size: 20px !important; - - // // &::after { - // // background: #d5e7f7; - // // } - // } - &.item2 { height: 50px; line-height: 50px; border-radius: 25px; - color: #1c3e5e; padding: 0 20px; font-size: 18px !important; background: #d5e7f7; - // &::after { - // background: #d5e7f7; - // border-radius: 250px; - // } } &.item3 { height: 47px; line-height: 47px; border-radius: 25px; - color: #1c3e5e; padding: 0 16px; font-size: 16px !important; background: #d5e7f7; - - // &::after { - // background: #d5e7f7; - // border-radius: 25px; - // } } &.item4 { height: 30px; line-height: 30px; border-radius: 30px; - color: #1c3e5e; padding: 0 10px; font-size: 14px !important; background: #d5e7f7; - - // &::after { - // background: #d5e7f7; - // border-radius: 30px; - // } } - // &::after { - // content: ""; - // width: calc(100% - 6px); - // height: calc(100% - 6px); - // // background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%); - // background: #d5e7f7; - // position: absolute; - // top: 50%; - // left: 50%; - // transform: translate(-50%, -50%); - // // border-radius: 8px; - // border-radius: 30px; - // z-index: -1; - // } - &.red { color: #62263c !important; background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%); - - &::after { - // background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%); - } } } diff --git a/static/js/index.js b/static/js/index.js index 52d5736..870d1c2 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -489,6 +489,11 @@ const search = createApp({ id = item.id; } + if (area == "custom") { + const item = customList.value[index]; + id = item.id; + } + ajax("https://pujianchaoyin.com/api/getMusicDetail", { id, }).then((res) => { @@ -497,7 +502,11 @@ const search = createApp({ if (area == "student") { zeroOrderStudents.value = { ...data, ...zeroOrderStudents.value }; manageAudio(data.playurl, area); - console.log(zeroOrderStudents.value, "zeroOrderStudents"); + } + + if (area == "custom") { + customList.value[index] = { ...data, ...customList.value[index] }; + manageAudio(data.playurl, area); } }); };