mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-15 09:48:14 +08:00
🌈 style(eslint): 第三次格式化
camecase 回头在部分文件 ignore 掉，不然不兼容之前的版本及外部接口 (cherry picked from commit 740b4698e916ce0f7911f5eac934183a94288e61)
This commit is contained in:
BTMuli
@@ -1,102 +1,102 @@
|
||||
<template>
|
||||
<!-- 顶部操作栏 -->
|
||||
<v-app-bar style="background: rgb(0 0 0 / 50%); color: #f4d8a8; font-family: Genshin, serif">
|
||||
<template #prepend>
|
||||
<span style="font-size: 30px">{{ title }}</span>
|
||||
</template>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
<template #append>
|
||||
<v-btn prepend-icon="mdi-import" class="ms-2 top-btn" @click="importJson">
|
||||
导入
|
||||
</v-btn>
|
||||
<v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson">
|
||||
导出
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<div v-show="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-show="!loading" class="wrap">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="left-wrap">
|
||||
<v-list v-for="(series, index) in seriesList" :key="series.id" class="card-left" @click="selectSeries(index)">
|
||||
<div class="version-icon-series">
|
||||
v{{ series.version }}
|
||||
</div>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-img width="40px" style="margin-right: 10px" :src="series.icon" />
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ series.name }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle> {{ series.completed_count }} / {{ series.total_count }} </v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- 顶部操作栏 -->
|
||||
<v-app-bar style="background: rgb(0 0 0 / 50%); color: #f4d8a8; font-family: Genshin, serif">
|
||||
<template #prepend>
|
||||
<span style="font-size: 30px">{{ title }}</span>
|
||||
</template>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
<template #append>
|
||||
<v-btn prepend-icon="mdi-import" class="ms-2 top-btn" @click="importJson">
|
||||
导入
|
||||
</v-btn>
|
||||
<v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson">
|
||||
导出
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<div v-show="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<!-- 右侧内容-->
|
||||
<div class="right-wrap">
|
||||
<v-list
|
||||
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + getCardInfo.bg || null + ')',
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: 'auto 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
margin: '10px',
|
||||
borderRadius: '10px 50px 50px 10px',
|
||||
color: '#485466',
|
||||
fontFamily: 'Genshin,serif',
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
@click="openImg()"
|
||||
>
|
||||
<v-list-item :title="getCardInfo.name" :subtitle="getCardInfo.description">
|
||||
<template #prepend>
|
||||
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list v-for="achievement in selectedAchievement" :key="achievement.id" class="card-right">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon :color="achievement.completed ? '#fec90b' : '#485466'">
|
||||
<!-- todo 图标替换 -->
|
||||
{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ achievement.name }}
|
||||
{{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
|
||||
<span class="version-icon-single">v{{ achievement.version }}</span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<span v-show="achievement.completed" class="right-time">{{ achievement.completed_time }}</span>
|
||||
<v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
|
||||
<v-img src="/source/material/原石.webp" sizes="32" />
|
||||
<div class="reward-num">
|
||||
<span>{{ achievement.reward }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<div v-show="!loading" class="wrap">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="left-wrap">
|
||||
<v-list v-for="(series, index) in seriesList" :key="series.id" class="card-left" @click="selectSeries(index)">
|
||||
<div class="version-icon-series">
|
||||
v{{ series.version }}
|
||||
</div>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-img width="40px" style="margin-right: 10px" :src="series.icon" />
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ series.name }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle> {{ series.completed_count }} / {{ series.total_count }} </v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
<!-- 右侧内容-->
|
||||
<div class="right-wrap">
|
||||
<v-list
|
||||
v-show="selectedIndex !== -1 && selectedSeries !== 0 && selectedSeries !== 17"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + getCardInfo.bg || null + ')',
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: 'auto 100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
margin: '10px',
|
||||
borderRadius: '10px 50px 50px 10px',
|
||||
color: '#485466',
|
||||
fontFamily: 'Genshin,serif',
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
@click="openImg()"
|
||||
>
|
||||
<v-list-item :title="getCardInfo.name" :subtitle="getCardInfo.description">
|
||||
<template #prepend>
|
||||
<v-img width="80px" style="margin-right: 10px" :src="getCardInfo.icon" />
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list v-for="achievement in selectedAchievement" :key="achievement.id" class="card-right">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon :color="achievement.completed ? '#fec90b' : '#485466'">
|
||||
<!-- todo 图标替换 -->
|
||||
{{ achievement.completed ? "mdi-check-circle" : "mdi-circle" }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ achievement.name }}
|
||||
{{ achievement.progress !== 0 ? "| " + achievement.progress : null }}
|
||||
<span class="version-icon-single">v{{ achievement.version }}</span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ achievement.description }}</v-list-item-subtitle>
|
||||
<template #append>
|
||||
<span v-show="achievement.completed" class="right-time">{{ achievement.completed_time }}</span>
|
||||
<v-card class="reward-card" @click="showMaterial('/source/material/原石.webp')">
|
||||
<v-img src="/source/material/原石.webp" sizes="32" />
|
||||
<div class="reward-num">
|
||||
<span>{{ achievement.reward }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
<!-- 弹窗提示 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="#F5810A" top>
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
<!-- 弹窗提示 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="#F5810A" top>
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -271,7 +271,7 @@ async function importJson () {
|
||||
const localTime = localData.completed_time;
|
||||
// 如果本地数据不存在，或者本地数据的 timeStamp 小于远程数据的 timeStamp，更新数据
|
||||
if (data.timestamp !== 0) {
|
||||
const fin_time = new Date(data.timestamp * 1000).toLocaleString("zh", {
|
||||
const finishTime = new Date(data.timestamp * 1000).toLocaleString("zh", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
@@ -279,8 +279,9 @@ async function importJson () {
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
if (fin_time !== localTime || localData.progress !== data.current) {
|
||||
localData.completed_time = fin_time;
|
||||
if (finishTime !== localTime || localData.progress !== data.current) {
|
||||
// eslint-disable-next-line camelcase
|
||||
localData.completed_time = finishTime;
|
||||
localData.progress = data.current;
|
||||
localData.completed = true;
|
||||
// 更新数据
|
||||
@@ -288,6 +289,7 @@ async function importJson () {
|
||||
}
|
||||
} else {
|
||||
if (localData.progress !== data.current) {
|
||||
// eslint-disable-next-line camelcase
|
||||
localData.completed_time = "";
|
||||
localData.progress = data.current;
|
||||
localData.completed = false;
|
||||
@@ -303,6 +305,7 @@ async function importJson () {
|
||||
seriesDB.map(async (data) => {
|
||||
const seriesId = data.id;
|
||||
const achievementsDB = await ReadTGDataByIndex("Achievements", "series", seriesId);
|
||||
// eslint-disable-next-line camelcase
|
||||
data.completed_count = achievementsDB.filter((data) => {
|
||||
return data.completed === true;
|
||||
}).length;
|
||||
@@ -311,13 +314,13 @@ async function importJson () {
|
||||
);
|
||||
loadingTitle.value = "正在刷新数据";
|
||||
seriesDB = await ReadAllTGData("AchievementSeries");
|
||||
const fin_achievements = seriesDB.reduce((a, b) => {
|
||||
const finishAchievments = seriesDB.reduce((a, b) => {
|
||||
return a + b.completed_count;
|
||||
}, 0);
|
||||
const total_achievements = seriesDB.reduce((a, b) => {
|
||||
const totalAchievements = seriesDB.reduce((a, b) => {
|
||||
return a + b.total_count;
|
||||
}, 0);
|
||||
achievementsStore.flushData(total_achievements, fin_achievements);
|
||||
achievementsStore.flushData(totalAchievements, finishAchievments);
|
||||
// 刷新数据
|
||||
await loadData();
|
||||
}
|
||||
@@ -361,7 +364,7 @@ async function exportJson () {
|
||||
};
|
||||
});
|
||||
UIAF_DATA.info = await UiafOper.getUiafInfo();
|
||||
const is_save = await dialog.save({
|
||||
const isSave = await dialog.save({
|
||||
filters: [
|
||||
{
|
||||
name: "achievements",
|
||||
@@ -369,8 +372,8 @@ async function exportJson () {
|
||||
},
|
||||
],
|
||||
});
|
||||
if (is_save) {
|
||||
await fs.writeTextFile(is_save, JSON.stringify(UIAF_DATA));
|
||||
if (isSave) {
|
||||
await fs.writeTextFile(isSave, JSON.stringify(UIAF_DATA));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -378,102 +381,102 @@ async function exportJson () {
|
||||
<style lang="css" scoped>
|
||||
/* 顶部按钮 */
|
||||
.top-btn {
|
||||
background: #393b40;
|
||||
color: #faf7e8 !important;
|
||||
background: #393b40;
|
||||
color: #faf7e8 !important;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
max-height: 90vh;
|
||||
font-family: Genshin-Light, serif;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
max-height: 90vh;
|
||||
font-family: Genshin-Light, serif;
|
||||
}
|
||||
|
||||
/* 左侧系列 */
|
||||
.left-wrap {
|
||||
float: left;
|
||||
width: 25%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
float: left;
|
||||
width: 25%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 右侧成就 */
|
||||
.right-wrap {
|
||||
float: right;
|
||||
width: 75%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
float: right;
|
||||
width: 75%;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-icon-series {
|
||||
font-family: Genshin, serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
background: #546d8b;
|
||||
border-radius: 10px 0 0;
|
||||
border-top: #fff 2px solid;
|
||||
border-left: #fff 2px solid;
|
||||
color: #fec90b;
|
||||
font-size: 10px;
|
||||
font-family: Genshin, serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
background: #546d8b;
|
||||
border-radius: 10px 0 0;
|
||||
border-top: #fff 2px solid;
|
||||
border-left: #fff 2px solid;
|
||||
color: #fec90b;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.version-icon-single {
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #ff6d6d !important;
|
||||
font-size: 10px;
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #ff6d6d !important;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.card-left {
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #485466;
|
||||
color: #fec90b;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #485466;
|
||||
color: #fec90b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 成就卡片 */
|
||||
.card-right {
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
/* 成就完成时间 */
|
||||
.right-time {
|
||||
margin-right: 10px;
|
||||
font-size: small;
|
||||
color: #faf7e8;
|
||||
margin-right: 10px;
|
||||
font-size: small;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
/* 成就奖励 */
|
||||
.reward-card {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: url("/source/material/bg/5-Star.webp");
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: url("/source/material/bg/5-Star.webp");
|
||||
}
|
||||
|
||||
.reward-num {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: #faf7e8;
|
||||
display: flex;
|
||||
font-size: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: #faf7e8;
|
||||
display: flex;
|
||||
font-size: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +1,90 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font mb-2">
|
||||
<v-tab value="activity" title="活动公告" />
|
||||
<v-tab value="game" title="游戏公告" />
|
||||
<v-spacer />
|
||||
<v-btn class="switch-btn" @click="switchNews">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bullhorn</v-icon>
|
||||
</template>
|
||||
切换米游社咨讯
|
||||
</v-btn>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="activity">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.activity" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>
|
||||
{{ item.title }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="game">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.game" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<TLoading :title="loadingTitle" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font mb-2">
|
||||
<v-tab value="activity" title="活动公告" />
|
||||
<v-tab value="game" title="游戏公告" />
|
||||
<v-spacer />
|
||||
<v-btn class="switch-btn" @click="switchNews">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bullhorn</v-icon>
|
||||
</template>
|
||||
切换米游社咨讯
|
||||
</v-btn>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="activity">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.activity" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>
|
||||
{{ item.title }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="game">
|
||||
<div class="anno-grid">
|
||||
<v-card v-for="item in annoCards.game" :key="item.id" class="anno-card" width="340">
|
||||
<div class="anno-cover" @click="toPost(item)">
|
||||
<img :src="item.banner" alt="cover">
|
||||
</div>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||
<v-card-actions>
|
||||
<v-btn class="anno-btn" @click="toPost(item)">
|
||||
<template #prepend>
|
||||
<img :src="item.tag_icon || '../assets/icons/arrow-right.svg'" alt="right">
|
||||
</template>
|
||||
查看
|
||||
</v-btn>
|
||||
<v-card-subtitle v-show="!appStore.devMode">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
{{ item.start_time.split(" ")[0] }} -
|
||||
{{ item.end_time.split(" ")[0] }}
|
||||
</v-card-subtitle>
|
||||
<v-card-subtitle v-show="appStore.devMode">
|
||||
id: {{ item.id }}
|
||||
</v-card-subtitle>
|
||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/arrow-right.svg" alt="right">
|
||||
</template>
|
||||
查看数据
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -140,6 +140,7 @@ async function toPost (item: AnnoListCard) {
|
||||
const path = router.resolve({
|
||||
name: "游戏内公告",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
anno_id: item.id,
|
||||
},
|
||||
}).href;
|
||||
@@ -150,6 +151,7 @@ async function toJson (item: AnnoListCard) {
|
||||
const path = router.resolve({
|
||||
name: "游戏内公告（JSON）",
|
||||
params: {
|
||||
// eslint-disable-next-line camelcase
|
||||
anno_id: item.id,
|
||||
},
|
||||
}).href;
|
||||
@@ -159,55 +161,55 @@ async function toJson (item: AnnoListCard) {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.anno-grid {
|
||||
font-family: Genshin, serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-gap: 20px;
|
||||
font-family: Genshin, serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.anno-card {
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-bottom: #4b5366 1px solid;
|
||||
border-radius: 10px;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-bottom: #4b5366 1px solid;
|
||||
}
|
||||
|
||||
.anno-cover {
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.anno-cover :hover {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.anno-cover img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
transition: all 0.3s linear;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
.anno-btn {
|
||||
margin-left: 5px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
margin-left: 5px;
|
||||
background: #546d8b;
|
||||
color: #faf7e8;
|
||||
}
|
||||
|
||||
.anno-btn img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/* switch */
|
||||
.switch-btn {
|
||||
font-family: Genshin, serif;
|
||||
background: #ffca0a;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
color: #546d8b;
|
||||
font-family: Genshin, serif;
|
||||
background: #ffca0a;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
color: #546d8b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,127 +1,127 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-list class="config-list">
|
||||
<v-list-subheader inset class="config-header">
|
||||
应用信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/platforms/tauri.webp" alt="Tauri">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/icon.webp" alt="App">
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
应用版本
|
||||
<v-btn
|
||||
class="card-btn"
|
||||
size="small"
|
||||
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
|
||||
>
|
||||
Alpha
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionApp }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="成就版本">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
系统信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="系统平台">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="系统版本">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
设置
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder" title="打开用户数据目录" @click="openMergeData" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除用户缓存" @click="tryConfirm('delUser')" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除临时数据" @click="tryConfirm('delTemp')" />
|
||||
<v-list-item prepend-icon="mdi-cog" title="恢复默认设置" @click="tryConfirm('delApp')" />
|
||||
<v-list-subheader inset class="config-header">
|
||||
调试
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="开发者模式" subtitle="开启后将显示调试信息">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bug</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-switch
|
||||
v-model="appStore.devMode"
|
||||
:label="appStore.devMode ? '开启' : '关闭'"
|
||||
inset
|
||||
color="#FAC51E"
|
||||
@click="submitDevMode"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</template>
|
||||
<v-select v-model="showHome" :items="homeStore.getShowItem()" label="首页显示组件" multiple chips />
|
||||
<template #append>
|
||||
<v-btn class="card-btn" @click="submitHome">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">
|
||||
提交
|
||||
</template>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
路径
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地应用数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地用户数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- 弹窗提示条 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
<!-- 确认弹窗 -->
|
||||
<TConfirm v-model="confirmShow" :title="confirmText" @confirm="doConfirm(confirmOper)" />
|
||||
</div>
|
||||
<div v-if="loading">
|
||||
<TLoading />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-list class="config-list">
|
||||
<v-list-subheader inset class="config-header">
|
||||
应用信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="Tauri 版本" @click="toOuter('https://next--tauri.netlify.app/')">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/platforms/tauri.webp" alt="Tauri">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionTauri }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="/icon.webp" alt="App">
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
应用版本
|
||||
<v-btn
|
||||
class="card-btn"
|
||||
size="small"
|
||||
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
|
||||
>
|
||||
Alpha
|
||||
</v-btn>
|
||||
</v-list-item-title>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ versionApp }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="成就版本">
|
||||
<template #prepend>
|
||||
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements">
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ achievementsStore.last_version }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
系统信息
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="系统平台">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osPlatform }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="系统版本">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-desktop-classic</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-list-item-subtitle>{{ osVersion }}</v-list-item-subtitle>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
设置
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder" title="打开用户数据目录" @click="openMergeData" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除用户缓存" @click="tryConfirm('delUser')" />
|
||||
<v-list-item prepend-icon="mdi-delete" title="清除临时数据" @click="tryConfirm('delTemp')" />
|
||||
<v-list-item prepend-icon="mdi-cog" title="恢复默认设置" @click="tryConfirm('delApp')" />
|
||||
<v-list-subheader inset class="config-header">
|
||||
调试
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item title="开发者模式" subtitle="开启后将显示调试信息">
|
||||
<template #prepend>
|
||||
<v-icon>mdi-bug</v-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<v-switch
|
||||
v-model="appStore.devMode"
|
||||
:label="appStore.devMode ? '开启' : '关闭'"
|
||||
inset
|
||||
color="#FAC51E"
|
||||
@click="submitDevMode"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</template>
|
||||
<v-select v-model="showHome" :items="homeStore.getShowItem()" label="首页显示组件" multiple chips />
|
||||
<template #append>
|
||||
<v-btn class="card-btn" @click="submitHome">
|
||||
<template #prepend>
|
||||
<img src="../assets/icons/circle-check.svg" alt="check">
|
||||
提交
|
||||
</template>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-subheader inset class="config-header">
|
||||
路径
|
||||
</v-list-subheader>
|
||||
<v-divider inset class="border-opacity-75" />
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地应用数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.app }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-list-item prepend-icon="mdi-folder">
|
||||
<v-list-item-title>本地用户数据路径</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ appStore.dataPath.user }}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- 弹窗提示条 -->
|
||||
<v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
|
||||
{{ snackbarText }}
|
||||
</v-snackbar>
|
||||
<!-- 确认弹窗 -->
|
||||
<TConfirm v-model="confirmShow" :title="confirmText" @confirm="doConfirm(confirmOper)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -301,27 +301,27 @@ async function submitHome () {
|
||||
|
||||
<style lang="css" scoped>
|
||||
.config-list {
|
||||
margin: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
font-family: Genshin-Light, serif;
|
||||
background: #faf7e8;
|
||||
color: #546d8b;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #faf7e8;
|
||||
color: #fec90b;
|
||||
font-size: large;
|
||||
margin-top: 10px;
|
||||
font-family: Genshin, serif;
|
||||
background: #faf7e8;
|
||||
color: #fec90b;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.config-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
background: #5b738f;
|
||||
border-radius: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
background: #5b738f;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,93 +1,93 @@
|
||||
<template>
|
||||
<div v-if="loading">
|
||||
<TLoading title="正在加载卡牌列表" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font">
|
||||
<div v-show="!doSearch">
|
||||
<v-tab value="character" title="角色牌" />
|
||||
<v-tab value="action" title="行动牌" />
|
||||
<v-tab value="monster" title="魔物牌" />
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
</v-tabs>
|
||||
<div v-if="!doSearch">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="character">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoC" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="action">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoA" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="monster">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoM" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
<div v-if="loading">
|
||||
<TLoading title="正在加载卡牌列表" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in CardsInfoS" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
<v-tabs v-model="tab" align-tabs="start" class="global-font">
|
||||
<div v-show="!doSearch">
|
||||
<v-tab value="character" title="角色牌" />
|
||||
<v-tab value="action" title="行动牌" />
|
||||
<v-tab value="monster" title="魔物牌" />
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
/>
|
||||
</v-tabs>
|
||||
<div v-if="!doSearch">
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="character">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoC" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="action">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoA" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
<v-window-item value="monster">
|
||||
<div class="cards-grid">
|
||||
<v-card v-for="item in CardsInfoM" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="cards-grid">
|
||||
<div v-for="item in CardsInfoS" :key="item.id" class="card-cls" @click="toOuter(item.name, item.id)">
|
||||
<div class="card-border">
|
||||
<img src="/source/GCG/base/bg-normal.webp" alt="border">
|
||||
</div>
|
||||
<div class="card-cover">
|
||||
<img :src="item.icon.normal" alt="cover">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
未找到相关卡牌
|
||||
</v-snackbar>
|
||||
</div>
|
||||
<v-snackbar v-model="snackbar" timeout="1500" color="error">
|
||||
未找到相关卡牌
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
@@ -125,9 +125,9 @@ async function loadData () {
|
||||
CardsInfoM.value = CardsInfo.filter((item) => item.type === "魔物牌") as MonsterCard[];
|
||||
loading.value = false;
|
||||
}
|
||||
function toOuter (card_name: string, card_id: number) {
|
||||
const url = OBC_CONTENT_API.replace("{content_id}", card_id.toString());
|
||||
createTGWindow(url, "GCG", card_name, 1200, 800, true);
|
||||
function toOuter (cardName: string, cardId: number) {
|
||||
const url = OBC_CONTENT_API.replace("{content_id}", cardId.toString());
|
||||
createTGWindow(url, "GCG", cardName, 1200, 800, true);
|
||||
}
|
||||
async function searchCard () {
|
||||
loading.value = true;
|
||||
@@ -147,73 +147,73 @@ async function searchCard () {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
grid-gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
grid-gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-cls {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 240px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 240px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: absolute;
|
||||
transition: all 0.3s;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
transition: all 0.3s;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.card-cls:hover .card-cover {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card-border {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-border img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: small;
|
||||
overflow: hidden;
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 0 0 10px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: small;
|
||||
overflow: hidden;
|
||||
font-family: Genshin, serif;
|
||||
border-radius: 0 0 10px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<TLoading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
|
||||
<component :is="item" v-for="item in components" v-show="!loading" :key="item" :ref="setItemRef" />
|
||||
<TLoading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
|
||||
<component :is="item" v-for="item in components" v-show="!loading" :key="item" :ref="setItemRef" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
Reference in New Issue
Block a user