diff --git a/src/components/MusicView.vue b/src/components/MusicView.vue index 97b449c2fbf853add36e0cac6589b665c1d0768b..1006ce6628fba6204c7b2454c250658a222cfcd0 100644 --- a/src/components/MusicView.vue +++ b/src/components/MusicView.vue @@ -345,12 +345,11 @@ const openEpisodeView= (id)=>{ </div> </div> -<!-- <div class="other-info"> - <div class="lyrics-lines" :style="{ transform: `translateY(${-currentLineIndex * 40}px)` }"> + <div class="other-info"> + <div class="lyrics-lines"> <div v-for="(line, index) in lyrics" :key="index" - :class="{ active: index === currentLineIndex }" class="lyrics-line" >{{ line.text }} </div> @@ -361,7 +360,7 @@ const openEpisodeView= (id)=>{ font-family: Consolas, 骞煎渾, serif; ">Ouch锛佽姝屾洸鏆傛棤姝岃瘝锛�</h1> </div> - </div>--> + </div> <!--TODO:鎺ㄨ崘姝屾洸鐨勭粏鑺傚鐞�--> <div class="other-info"> @@ -851,4 +850,103 @@ li:hover { color: #aaa; transition: color 0.3s; } + + +p{ + margin: 0; +} + +#click-scroll-X { + position: relative; + display: flex; + align-items: center; + + .left_btn,.right_btn { + font-size: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + height: 40px; + width: 40px; + color: #fff; + background-color: #1f1f1f; + position: absolute; + cursor: pointer; + opacity: 0; + transition: opacity 0.4s ease-in-out; + bottom: 140px; + } + .right_btn{ + right: -10px; + } + .left_btn{ + left: -10px; + } + .scroll_wrapper { + + width: 100%; + overflow-x: scroll; + padding: 20px 0; + + .scroll_list { + display: flex; + align-items: center; + justify-content: space-between; + gap:2px; + } + } +} + +h1 { + font-size: 24px; + margin-bottom: 15px; + margin-left: 10px; + color: #fff; + text-align: left; +} +.scroll-entry { + padding:9px; + align-items: center; + box-shadow: 0 4px 15px rgb(17, 17, 17); /* 鎮诞鏁堟灉鐨勯槾褰� */ + width: 180px; + height: 210px; + display: flex; + flex-direction: column; + gap:5px; + &:hover{ + cursor: pointer; + border-radius: 6px; + background-color: rgba(255, 255, 255, 0.1); + } + &.large-scroll-entry{ + height: 230px; + } +} + +.big-img { + border-radius: 6px; + width: 160px; + height: 160px; +} +.very-big-img { + border-radius: 6px; + width: 180px; + height: 180px; +} +.entry-text{ + width: 160px; + margin-left: 4px; + text-align: left; + color: #a6a6a6; + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.bolder-white-theme{ + font-size: 18px; + font-weight: bolder; + color: rgb(241, 241, 241); +} </style>