diff --git a/src/components/main/t-pool.vue b/src/components/main/t-pool.vue index 01b77437..4cbdf202 100644 --- a/src/components/main/t-pool.vue +++ b/src/components/main/t-pool.vue @@ -5,50 +5,45 @@ 限时祈愿
- - - - - - - - +
cover
-
-
-
- character +
+
+
+
+ character +
-
- +
+ mdi-calendar-clock + {{ pool.time.start }}~{{ pool.time.end }} +
+ + +
{{ poolTimeGet[pool.postId] }} - +
+
+ 剩余时间: + + {{ poolTimeGet[pool.postId] }} + +
- - - mdi-calendar-clock - {{ pool.time.start }}~{{ pool.time.end }} - - - +
{{ barText }} @@ -92,7 +87,7 @@ defineExpose({ loading, }); -function poolLastInterval(postId: number): void { +function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard | undefined { const pool = poolCards.value.find((pool) => pool.postId === postId); if (!pool) return; if (poolTimeGet.value[postId] === "未开始") { @@ -122,6 +117,8 @@ onMounted(async () => { console.error("获取限时祈愿数据失败"); return; } + console.log("获取限时祈愿数据成功"); + console.info(gachaData); if (!checkCover(gachaData)) { poolCards.value = await Mys.Gacha.card(gachaData); const coverData: Record = {}; @@ -241,42 +238,31 @@ onUnmounted(() => { .pool-grid { display: grid; margin-top: 10px; - grid-gap: 20px; + gap: 20px; grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); } .pool-card { + position: relative; + overflow: hidden; border-radius: 5px; background: var(--common-bg-1); color: var(--common-bgt-1); } -.pool-list { - background: inherit; - color: inherit; - font-family: var(--font-title); -} - -.pool-voice-icon { - width: 40px; - height: 40px; - transform: translateY(-5px); -} - .pool-cover { display: flex; overflow: hidden; - width: calc(100% - 40px); + width: 100%; height: auto; align-items: center; justify-content: center; border-radius: 5px; - margin: 0 20px 10px; } .pool-cover img { width: 100%; - border-radius: 10px; + border-radius: 5px; transition: all 0.5s; } @@ -286,23 +272,45 @@ onUnmounted(() => { transition: all 0.5s; } -.pool-character { +.pool-bottom { + position: absolute; + bottom: 0; + left: 0; display: flex; width: 100%; - height: 70px; - margin: 0 20px; + align-items: center; + justify-content: space-between; + backdrop-filter: blur(20px); + background: rgb(0 0 0/20%); + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.pool-character { + display: flex; + width: auto; + height: 60px; + margin: 10px; } .pool-icon-grid { display: grid; grid-column-gap: 10px; - grid-template-columns: repeat(4, 70px); + grid-template-columns: repeat(4, 60px); } .pool-icon { - width: 70px; - height: 70px; + width: 60px; + height: 60px; + border: 1px solid rgb(255 255 255 / 50%); border-radius: 5px; + box-shadow: 0 0 5px rgb(0 0 0/20%); + transition: all ease-in-out 0.3s; +} + +.pool-icon:hover { + transform: scale(1.1); + transition: all ease-in-out 0.3s; } .pool-icon img { @@ -312,8 +320,15 @@ onUnmounted(() => { cursor: pointer; } -.pool-clock { - margin-left: 60px; - font-size: small; +.pool-time { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + margin-right: 10px; + color: #faf7e8; + font-size: 12px; + gap: 10px; + text-align: left; }