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 @@
限时祈愿
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
![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;
}