diff --git a/guess.html b/guess.html index a455df3..a0a54bd 100644 --- a/guess.html +++ b/guess.html @@ -48,6 +48,12 @@
+
连对3题有奖品哦，快来挑战吧！
+ +
+
+ +
diff --git a/index.html b/index.html index 80ad903..faba99a 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
- +
@@ -43,13 +43,13 @@
- +
- +
@@ -162,9 +162,9 @@
- - - + + +
@@ -205,7 +205,7 @@ -
+
广州九微科技有限公司 | Copyright 2001-2025 GTER All Rights Reserved | 粤ICP备14050432号
@@ -217,18 +217,12 @@
- +
{{ playData?.title }}
-
- - - - -
-
+
{{ currentTimeFormatted }}
@@ -236,6 +230,12 @@
{{ durationFormatted }}
+
+ + + + +
diff --git a/static/css/guess.css b/static/css/guess.css index 0c709f9..989a269 100644 --- a/static/css/guess.css +++ b/static/css/guess.css @@ -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; } diff --git a/static/css/guess.less b/static/css/guess.less index 68b4fa7..211ff4a 100644 --- a/static/css/guess.less +++ b/static/css/guess.less @@ -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; } } } diff --git a/static/css/index.css b/static/css/index.css index 708184a..fa5697e 100644 --- a/static/css/index.css +++ b/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; diff --git a/static/css/index.less b/static/css/index.less index 15e69d0..b8bf231 100644 --- a/static/css/index.less +++ b/static/css/index.less @@ -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; diff --git a/static/css/song-request-station.css b/static/css/song-request-station.css index 3ebe10e..028827a 100644 --- a/static/css/song-request-station.css +++ b/static/css/song-request-station.css @@ -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 { diff --git a/static/css/song-request-station.less b/static/css/song-request-station.less index 9fe9125..2d2eb39 100644 --- a/static/css/song-request-station.less +++ b/static/css/song-request-station.less @@ -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; diff --git a/static/img/album-bj2.png b/static/img/album-bj2.png new file mode 100644 index 0000000..bd966da Binary files /dev/null and b/static/img/album-bj2.png differ diff --git a/static/img/album-bj5.png b/static/img/album-bj5.png new file mode 100644 index 0000000..4ea1162 Binary files /dev/null and b/static/img/album-bj5.png differ diff --git a/static/img/custom-bj-1.png b/static/img/custom-bj-1.png new file mode 100644 index 0000000..5c5a09e Binary files /dev/null and b/static/img/custom-bj-1.png differ diff --git a/static/img/custom-bj-2.png b/static/img/custom-bj-2.png new file mode 100644 index 0000000..39d6a10 Binary files /dev/null and b/static/img/custom-bj-2.png differ diff --git a/static/img/green-glow.png b/static/img/green-glow.png index 1490b51..ad05375 100644 Binary files a/static/img/green-glow.png and b/static/img/green-glow.png differ diff --git a/static/img/guess/figure-one.png b/static/img/guess/figure-one.png new file mode 100644 index 0000000..39d57a0 Binary files /dev/null and b/static/img/guess/figure-one.png differ diff --git a/static/img/guess/figure-three.png b/static/img/guess/figure-three.png new file mode 100644 index 0000000..f43b69f Binary files /dev/null and b/static/img/guess/figure-three.png differ diff --git a/static/img/guess/figure-two.png b/static/img/guess/figure-two.png new file mode 100644 index 0000000..538f4f8 Binary files /dev/null and b/static/img/guess/figure-two.png differ diff --git a/static/img/guess/start-icon.png b/static/img/guess/start-icon.png new file mode 100644 index 0000000..785d74a Binary files /dev/null and b/static/img/guess/start-icon.png differ diff --git a/static/img/halo.png b/static/img/halo.png index b06b2a1..53ae0b9 100644 Binary files a/static/img/halo.png and b/static/img/halo.png differ diff --git a/static/img/headset-icon.png b/static/img/headset-icon.png index 6ed875d..4de939c 100644 Binary files a/static/img/headset-icon.png and b/static/img/headset-icon.png differ diff --git a/static/img/left-icon.png b/static/img/left-icon.png index 23aee1b..dc5b812 100644 Binary files a/static/img/left-icon.png and b/static/img/left-icon.png differ diff --git a/static/img/logo.png b/static/img/logo.png index c11eac8..1874cad 100644 Binary files a/static/img/logo.png and b/static/img/logo.png differ diff --git a/static/img/mv-icon.png b/static/img/mv-icon.png index 2ac0b4d..36d63e5 100644 Binary files a/static/img/mv-icon.png and b/static/img/mv-icon.png differ diff --git a/static/img/remake-icon.png b/static/img/remake-icon.png index dc7539c..813b2c4 100644 Binary files a/static/img/remake-icon.png and b/static/img/remake-icon.png differ diff --git a/static/img/right-icon.png b/static/img/right-icon.png index 068ed19..42307a8 100644 Binary files a/static/img/right-icon.png and b/static/img/right-icon.png differ diff --git a/static/img/shadow.png b/static/img/shadow.png index f967f80..e539629 100644 Binary files a/static/img/shadow.png and b/static/img/shadow.png differ diff --git a/static/img/smiling-face.png b/static/img/smiling-face.png index 4b54b82..e0431a5 100644 Binary files a/static/img/smiling-face.png and b/static/img/smiling-face.png differ diff --git a/static/img/train-icon.png b/static/img/train-icon.png index 4b39221..054a5e5 100644 Binary files a/static/img/train-icon.png and b/static/img/train-icon.png differ diff --git a/static/img/works-bj1.png b/static/img/works-bj1.png index 6225c59..2373937 100644 Binary files a/static/img/works-bj1.png and b/static/img/works-bj1.png differ diff --git a/static/img/works-bj2.png b/static/img/works-bj2.png index b54a699..05bf18f 100644 Binary files a/static/img/works-bj2.png and b/static/img/works-bj2.png differ diff --git a/static/js/tagcloud-3.1.js b/static/js/tagcloud-3.1.js index 920be2e..d081420 100644 --- a/static/js/tagcloud-3.1.js +++ b/static/js/tagcloud-3.1.js @@ -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";