mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🌈 style(eslint): 第三次格式化
camecase 回头在部分文件 ignore 掉，不然不兼容之前的版本及外部接口 (cherry picked from commit 740b4698e916ce0f7911f5eac934183a94288e61)
This commit is contained in:
BTMuli
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-show="canTop" class="back-top" @click="handleScrollTop">
|
||||
<img src="../assets/icons/arrow-top.svg" alt="back-icon">
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div v-show="canTop" class="back-top" @click="handleScrollTop">
|
||||
<img src="../assets/icons/arrow-top.svg" alt="back-icon">
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -50,37 +50,37 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.back-top {
|
||||
position: fixed;
|
||||
right: 0.4rem;
|
||||
bottom: 1rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
position: fixed;
|
||||
right: 0.4rem;
|
||||
bottom: 1rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.back-top :hover {
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px 5px #546d8b;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: scale(0.9);
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px 5px #546d8b;
|
||||
}
|
||||
|
||||
.back-top img {
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +1,50 @@
|
||||
<template>
|
||||
<v-list class="calendar-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif">
|
||||
<v-icon color="#EBD49E">
|
||||
mdi-calendar-clock
|
||||
</v-icon> 今日素材
|
||||
<span style="color: #faf7e8">{{ new Date().toLocaleDateString() }}</span>
|
||||
<v-btn
|
||||
v-for="text of btnText"
|
||||
:key="text.week"
|
||||
class="calendar-btn"
|
||||
:style="{
|
||||
border: text.week === weekNow ? '2px solid #fec90b' : '0',
|
||||
background: text.week === btnNow ? '#fec90b' : '#4A5366',
|
||||
}"
|
||||
@click="getShowCards(text.week)"
|
||||
>
|
||||
{{ text.text }}
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="calendar-grid">
|
||||
<v-card title="天赋培养" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img v-for="item in showCharacters" :key="item.id" :src="item.cover" class="calendar-icon" @click="showContent(item)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card title="武器突破" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img v-for="item in showWeapons" :key="item.id" :src="item.cover" class="calendar-icon" @click="showContent(item)" />
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="calendar-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif">
|
||||
<v-icon color="#EBD49E">
|
||||
mdi-calendar-clock
|
||||
</v-icon> 今日素材
|
||||
<span style="color: #faf7e8">{{ new Date().toLocaleDateString() }}</span>
|
||||
<v-btn
|
||||
v-for="text of btnText"
|
||||
:key="text.week"
|
||||
class="calendar-btn"
|
||||
:style="{
|
||||
border: text.week === weekNow ? '2px solid #fec90b' : '0',
|
||||
background: text.week === btnNow ? '#fec90b' : '#4A5366',
|
||||
}"
|
||||
@click="getShowCards(text.week)"
|
||||
>
|
||||
{{ text.text }}
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="calendar-grid">
|
||||
<v-card title="天赋培养" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img
|
||||
v-for="item in showCharacters"
|
||||
:key="item.id"
|
||||
:src="item.cover"
|
||||
class="calendar-icon"
|
||||
@click="showContent(item)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card title="武器突破" class="calendar-single">
|
||||
<v-card-text class="calendar-icons">
|
||||
<v-img
|
||||
v-for="item in showWeapons"
|
||||
:key="item.id"
|
||||
:src="item.cover"
|
||||
class="calendar-icon"
|
||||
@click="showContent(item)"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -127,46 +139,46 @@ function showContent (item: CalendarCard) {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.calendar-card {
|
||||
margin-top: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.calendar-single {
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.calendar-icons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
grid-gap: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.calendar-icon :hover {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-btn {
|
||||
margin-left: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin-left: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #faf7e8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<v-overlay v-model="visible">
|
||||
<div class="confirm-div">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="confirm-btn-box">
|
||||
<button class="confirm-btn" @click="onCancel">
|
||||
<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
|
||||
<span class="btn-text">
|
||||
{{ cancel }}
|
||||
</span>
|
||||
</button>
|
||||
<button class="confirm-btn" @click="onConfirm">
|
||||
<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm">
|
||||
<span class="btn-text">
|
||||
{{ confirm }}
|
||||
</span>
|
||||
</button>
|
||||
<v-overlay v-model="visible">
|
||||
<div class="confirm-div">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="confirm-btn-box">
|
||||
<button class="confirm-btn" @click="onCancel">
|
||||
<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
|
||||
<span class="btn-text">
|
||||
{{ cancel }}
|
||||
</span>
|
||||
</button>
|
||||
<button class="confirm-btn" @click="onConfirm">
|
||||
<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm">
|
||||
<span class="btn-text">
|
||||
{{ confirm }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-overlay>
|
||||
</v-overlay>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -68,64 +68,64 @@ const onConfirm = () => {
|
||||
|
||||
<style scoped>
|
||||
.confirm-div {
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 20vh;
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
width: 40vw;
|
||||
height: 20vh;
|
||||
top: 40vh;
|
||||
left: 30vw;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.confirm-box {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.confirm-title {
|
||||
font-family: Genshin, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: #393b40;
|
||||
margin: 20px;
|
||||
font-size: 30px;
|
||||
font-family: Genshin, serif;
|
||||
text-align: center;
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
color: #393b40;
|
||||
margin: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.confirm-btn-box {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 30%;
|
||||
min-width: 150px;
|
||||
min-height: 30px;
|
||||
background: #4a5366;
|
||||
color: #faf7e8;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30%;
|
||||
min-width: 150px;
|
||||
min-height: 30px;
|
||||
background: #4a5366;
|
||||
color: #faf7e8;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
width: calc(100% - 70px);
|
||||
text-align: center;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-size: 20px;
|
||||
width: calc(100% - 70px);
|
||||
text-align: center;
|
||||
font-family: Genshin-Light, serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div class="loading-div">
|
||||
<div class="loading-content">
|
||||
<div class="loading-title">
|
||||
{{ title }}
|
||||
<v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
|
||||
</div>
|
||||
<div v-if="subtitle !== ''" class="loading-subtitle">
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
<div v-if="!empty" class="loading-img">
|
||||
<img src="/source/UI/loading.webp" alt="loading">
|
||||
</div>
|
||||
<div v-else class="loading-img">
|
||||
<img src="/source/UI/empty.webp" alt="empty">
|
||||
</div>
|
||||
<div v-if="content !== ''" class="loading-text">
|
||||
{{ content }}
|
||||
<div class="loading-div">
|
||||
<div class="loading-content">
|
||||
<div class="loading-title">
|
||||
{{ title }}
|
||||
<v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
|
||||
</div>
|
||||
<div v-if="subtitle !== ''" class="loading-subtitle">
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
<div v-if="!empty" class="loading-img">
|
||||
<img src="/source/UI/loading.webp" alt="loading">
|
||||
</div>
|
||||
<div v-else class="loading-img">
|
||||
<img src="/source/UI/empty.webp" alt="empty">
|
||||
</div>
|
||||
<div v-if="content !== ''" class="loading-text">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
interface LoadingProps {
|
||||
@@ -29,59 +29,56 @@ interface LoadingProps {
|
||||
position?: string;
|
||||
}
|
||||
|
||||
withDefaults(
|
||||
defineProps<LoadingProps>(),
|
||||
{
|
||||
title: "加载中",
|
||||
subtitle: "",
|
||||
content: "",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
},
|
||||
);
|
||||
withDefaults(defineProps<LoadingProps>(), {
|
||||
title: "加载中",
|
||||
subtitle: "",
|
||||
content: "",
|
||||
empty: false,
|
||||
position: "absolute",
|
||||
});
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.loading-div {
|
||||
position: v-bind(position);
|
||||
display: flex;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: rgb(57 59 64 / 50%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
position: v-bind(position);
|
||||
display: flex;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: rgb(57 59 64 / 50%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
border: #f4d8a8 1px solid;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
border: #f4d8a8 1px solid;
|
||||
border-radius: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
font-size: 2rem;
|
||||
font-family: Genshin, serif;
|
||||
font-weight: 600;
|
||||
color: #f4d8a8;
|
||||
font-size: 2rem;
|
||||
font-family: Genshin, serif;
|
||||
font-weight: 600;
|
||||
color: #f4d8a8;
|
||||
}
|
||||
|
||||
.loading-subtitle {
|
||||
font-size: 1rem;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #f4d8a8;
|
||||
font-size: 1rem;
|
||||
font-family: Genshin-Light, serif;
|
||||
color: #f4d8a8;
|
||||
}
|
||||
|
||||
.loading-img {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,45 +1,49 @@
|
||||
<template>
|
||||
<v-list class="pool-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon">
|
||||
限时祈愿
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="pool-grid">
|
||||
<v-card v-for="pool in poolCards" :key="pool.post_id" style="background: #faf7e8; color: #546d8b; border-radius: 10px">
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="pool.title" :subtitle="pool.subtitle">
|
||||
<template #prepend>
|
||||
<v-img :src="pool.voice.icon" style="transform: translate(0, -10px); width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #append>
|
||||
<audio :src="pool.voice.url" controls />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pool-cover" @click="toPost(pool)">
|
||||
<img :src="pool.cover" alt="cover">
|
||||
</div>
|
||||
<div class="pool-character">
|
||||
<div v-for="character in pool.characters" :key="character.url" @click="toOuter(character.url, pool.title)">
|
||||
<img :src="character.icon" class="pool-icon" alt="character">
|
||||
<v-list class="pool-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon">
|
||||
限时祈愿
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="pool-grid">
|
||||
<v-card
|
||||
v-for="pool in poolCards"
|
||||
:key="pool.post_id"
|
||||
style="background: #faf7e8; color: #546d8b; border-radius: 10px"
|
||||
>
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="pool.title" :subtitle="pool.subtitle">
|
||||
<template #prepend>
|
||||
<v-img :src="pool.voice.icon" style="transform: translate(0, -10px); width: 60px; height: 60px" />
|
||||
</template>
|
||||
<template #append>
|
||||
<audio :src="pool.voice.url" controls />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div class="pool-cover" @click="toPost(pool)">
|
||||
<img :src="pool.cover" alt="cover">
|
||||
</div>
|
||||
<div class="pool-clock">
|
||||
<v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" color="#90caf9">
|
||||
{{ poolTimeGet[pool.post_id] }}
|
||||
</v-progress-circular>
|
||||
<div class="pool-character">
|
||||
<div v-for="character in pool.characters" :key="character.url" @click="toOuter(character.url, pool.title)">
|
||||
<img :src="character.icon" class="pool-icon" alt="character">
|
||||
</div>
|
||||
<div class="pool-clock">
|
||||
<v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" color="#90caf9">
|
||||
{{ poolTimeGet[pool.post_id] }}
|
||||
</v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ pool.time.start }}~{{ pool.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ pool.time.start }}~{{ pool.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -101,7 +105,7 @@ onMounted(async () => {
|
||||
poolCards.value.map((pool) => {
|
||||
poolTimeGet.value[pool.post_id] = getLastPoolTime(pool.time.end_stamp - Date.now());
|
||||
poolTimePass.value[pool.post_id] =
|
||||
((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
|
||||
((pool.time.end_stamp - Date.now()) / (pool.time.end_stamp - pool.time.start_stamp)) * 100;
|
||||
return pool;
|
||||
});
|
||||
}, 1000);
|
||||
@@ -120,14 +124,14 @@ function checkCover (data: GachaData[]) {
|
||||
return false;
|
||||
}
|
||||
return data.every((item) => {
|
||||
const post_id = item.activity_url.split("/").pop();
|
||||
if (!post_id || isNaN(Number(post_id))) {
|
||||
const postId = item.activity_url.split("/").pop();
|
||||
if (!postId || isNaN(Number(postId))) {
|
||||
return false;
|
||||
}
|
||||
if (!Object.keys(cover).includes(post_id)) {
|
||||
if (!Object.keys(cover).includes(postId)) {
|
||||
return false;
|
||||
} else {
|
||||
const coverUrl = Object.keys(cover).find((key) => key === post_id);
|
||||
const coverUrl = Object.keys(cover).find((key) => key === postId);
|
||||
return coverUrl !== "/source/UI/empty.webp";
|
||||
}
|
||||
});
|
||||
@@ -148,6 +152,7 @@ function toPost (pool: GachaCard) {
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: pool.post_id.toString(),
|
||||
},
|
||||
}).href;
|
||||
@@ -157,75 +162,75 @@ function toPost (pool: GachaCard) {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.pool-wish-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pool-card {
|
||||
font-family: Genshin, serif;
|
||||
width: 100%;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
width: 100%;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pool-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pool-cover {
|
||||
margin: 0 20px 10px;
|
||||
width: calc(100% - 40px);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 20px 10px;
|
||||
width: calc(100% - 40px);
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pool-cover img {
|
||||
max-width: 100%;
|
||||
transition: all 0.5s;
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
transition: all 0.5s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-cover :hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.pool-character {
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
margin: 0 20px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pool-character img {
|
||||
border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.pool-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.pool-character :hover .pool-icon {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pool-clock {
|
||||
width: auto;
|
||||
margin-left: 40px;
|
||||
float: right;
|
||||
font-size: small;
|
||||
height: 80px;
|
||||
width: auto;
|
||||
margin-left: 40px;
|
||||
float: right;
|
||||
font-size: small;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,47 +1,51 @@
|
||||
<template>
|
||||
<v-list class="position-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/board.svg" alt="act" class="position-act-icon">
|
||||
近期活动
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="position-grid">
|
||||
<v-card v-for="card in positionCards" :key="card.post_id" style="background: #faf7e8; color: #546d8b; border-radius: 10px">
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="card.title" :subtitle="card.abstract">
|
||||
<template #prepend>
|
||||
<v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
|
||||
<v-img :src="card.icon" style="border-radius: 10px" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider class="border-opacity-75" />
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ card.time.start }}~{{ card.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<span style="width: 80%; margin-left: 10px">
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
剩余时间：
|
||||
<span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #90caf9">{{
|
||||
positionTimeGet[card.post_id]
|
||||
}}</span>
|
||||
<span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
|
||||
</span>
|
||||
<v-btn class="card-btn" @click="toPost(card)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list class="position-card">
|
||||
<v-list-item>
|
||||
<v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
|
||||
<img src="../assets/icons/board.svg" alt="act" class="position-act-icon">
|
||||
近期活动
|
||||
</v-list-item-title>
|
||||
<div v-if="!loading" class="position-grid">
|
||||
<v-card
|
||||
v-for="card in positionCards"
|
||||
:key="card.post_id"
|
||||
style="background: #faf7e8; color: #546d8b; border-radius: 10px"
|
||||
>
|
||||
<v-list style="background: #faf7e8; color: #546d8b">
|
||||
<v-list-item :title="card.title" :subtitle="card.abstract">
|
||||
<template #prepend>
|
||||
<v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
|
||||
<v-img :src="card.icon" style="border-radius: 10px" />
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-divider class="border-opacity-75" />
|
||||
<v-card-text>
|
||||
<span style="width: 60%">
|
||||
<v-icon>mdi-calendar-clock</v-icon>
|
||||
{{ card.time.start }}~{{ card.time.end }}
|
||||
</span>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<span style="width: 80%; margin-left: 10px">
|
||||
<v-icon>mdi-clock-outline</v-icon>
|
||||
剩余时间：
|
||||
<span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #90caf9">{{
|
||||
positionTimeGet[card.post_id]
|
||||
}}</span>
|
||||
<span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
|
||||
</span>
|
||||
<v-btn class="card-btn" @click="toPost(card)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">查看
|
||||
</template>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -105,12 +109,12 @@ function getLastPositionTime (time: number) {
|
||||
}
|
||||
|
||||
async function toPost (card: PositionCard) {
|
||||
const post_id = card.post_id;
|
||||
// 获取路由路径
|
||||
const path = router.resolve({
|
||||
name: "帖子详情",
|
||||
params: {
|
||||
post_id,
|
||||
// eslint-disable-next-line camelcase
|
||||
post_id: card.post_id,
|
||||
},
|
||||
}).href;
|
||||
// 打开新窗口
|
||||
@@ -120,22 +124,22 @@ async function toPost (card: PositionCard) {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.position-act-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(400px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(400px, 1fr));
|
||||
grid-gap: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,110 +1,110 @@
|
||||
<template>
|
||||
<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #faf7e8">
|
||||
<v-list v-model:opened="open" class="side-list" density="compact" nav>
|
||||
<!-- 负责收缩侧边栏 -->
|
||||
<v-list-item @click="collapse">
|
||||
<template v-if="rail" #prepend>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-chevron-right
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
<template v-else #append>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-chevron-left
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<!-- 菜单项 -->
|
||||
<v-list-item value="home" title="首页" link href="/">
|
||||
<template #prepend>
|
||||
<img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="公告" value="announcements" link href="/announcements">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/board.svg" alt="annoIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
<v-list-group value="mihoyo" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item title="米游社" v-bind="props">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="原神" value="mhy-ys" link href="/news/2">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/ys.webp" alt="ys" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏3" value="mhy-bh3" link href="/news/1">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/bh3.webp" alt="bh3" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏2" value="mhy-bh2" link href="/news/3">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/bh2.webp" alt="bh2" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="未定事件簿" value="mhy-wd" link href="/news/4">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/wd.webp" alt="wd" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="星穹铁道" value="mhy-sr" link href="/news/6">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/sr.webp" alt="sr" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="绝区零" value="mhy-zzz" link href="/news/8">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/zzz.webp" alt="zzz" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="大别野" value="mhy-dby" link href="/news/5">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/dby.webp" alt="dby" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider />
|
||||
<v-list-item title="成就" value="achievements" link href="/achievements">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
<v-list-group value="database" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item title="数据库" v-bind="props">
|
||||
<template #prepend>
|
||||
<v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #faf7e8">
|
||||
<v-list v-model:opened="open" class="side-list" density="compact" nav>
|
||||
<!-- 负责收缩侧边栏 -->
|
||||
<v-list-item @click="collapse">
|
||||
<template v-if="rail" #prepend>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-database
|
||||
mdi-chevron-right
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="GCG" value="db-GCG" link href="/GCG">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
<template v-else #append>
|
||||
<v-list-item-action>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-chevron-left
|
||||
</v-icon>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider />
|
||||
<v-list-item title="设置" value="config" link href="/config">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/setting.svg" alt="setting" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<!-- 菜单项 -->
|
||||
<v-list-item value="home" title="首页" link href="/">
|
||||
<template #prepend>
|
||||
<img src="/source/UI/paimon.webp" alt="homeIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="公告" value="announcements" link href="/announcements">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/board.svg" alt="annoIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
<v-list-group value="mihoyo" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item title="米游社" v-bind="props">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/mys.webp" alt="mihoyo" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="原神" value="mhy-ys" link href="/news/2">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/ys.webp" alt="ys" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏3" value="mhy-bh3" link href="/news/1">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/bh3.webp" alt="bh3" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="崩坏2" value="mhy-bh2" link href="/news/3">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/bh2.webp" alt="bh2" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="未定事件簿" value="mhy-wd" link href="/news/4">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/wd.webp" alt="wd" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="星穹铁道" value="mhy-sr" link href="/news/6">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/sr.webp" alt="sr" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="绝区零" value="mhy-zzz" link href="/news/8">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/zzz.webp" alt="zzz" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="大别野" value="mhy-dby" link href="/news/5">
|
||||
<template #prepend>
|
||||
<img src="/platforms/mhy/dby.webp" alt="dby" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider />
|
||||
<v-list-item title="成就" value="achievements" link href="/achievements">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
<v-list-group value="database" fluid>
|
||||
<template #activator="{ props }">
|
||||
<v-list-item title="数据库" v-bind="props">
|
||||
<template #prepend>
|
||||
<v-icon color="rgb(205, 182, 145)">
|
||||
mdi-database
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
<v-list-item title="GCG" value="db-GCG" link href="/GCG">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
<v-divider />
|
||||
<v-list-item title="设置" value="config" link href="/config">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/setting.svg" alt="setting" class="side-icon">
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -134,13 +134,13 @@ function collapse () {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.side-list {
|
||||
font-family: Genshin-Light, serif;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
.side-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 32px;
|
||||
border-radius: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 32px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user