mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-04-18 21:29:04 +08:00
♻️ 重构留影叙佳期页面，处理部分文本加载异常
This commit is contained in:
BTMuli
@@ -1,42 +1,60 @@
|
||||
<!-- 留影叙佳期 -->
|
||||
<template>
|
||||
<div class="ab-container">
|
||||
<div class="ab-draw-top">
|
||||
<div @click="toAct" class="ab-draw-act" title="前往网页活动">
|
||||
<img src="/source/UI/act_birthday.webp" alt="archive_birthday_icon" class="side-icon" />
|
||||
<v-app-bar>
|
||||
<div class="ab-top">
|
||||
<div class="ab-title">
|
||||
<img alt="archive_birthday_icon" src="/source/UI/act_birthday.webp" @click="toAct()" />
|
||||
<span>留影叙佳期</span>
|
||||
</div>
|
||||
<div class="ab-switch">
|
||||
<span>{{ isAether ? "空" : "荧" }}</span>
|
||||
<v-switch
|
||||
v-model="isAether"
|
||||
class="ab-switch-btn"
|
||||
color="var(--tgc-od-orange)"
|
||||
density="compact"
|
||||
/>
|
||||
</div>
|
||||
<v-switch class="ab-draw-switch" v-model="isAether" />
|
||||
<span>{{ isAether ? "空" : "荧" }}</span>
|
||||
<v-select
|
||||
v-model="curSelect"
|
||||
class="ab-select"
|
||||
:items="ArcBirRole"
|
||||
clearable
|
||||
variant="outlined"
|
||||
label="角色"
|
||||
:item-value="(item: TGApp.Archive.Birth.RoleItem) => item"
|
||||
:hide-details="true"
|
||||
:item-props="(item: TGApp.Archive.Birth.RoleItem) => getItemProps(item)"
|
||||
:item-value="(item: TGApp.Archive.Birth.RoleItem) => item"
|
||||
:items="ArcBirRole"
|
||||
class="ab-select"
|
||||
clearable
|
||||
density="compact"
|
||||
label="角色"
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
<div class="ab-draw-grid">
|
||||
<div v-for="item in selectedItem" :key="item.op_id" class="ab-draw">
|
||||
<div class="ab-draw-cover" @click="showImg(item)">
|
||||
<div class="ab-draw-img">
|
||||
<TMiImg :src="item.unread_picture[Number(isAether)]" :alt="item.word_text" />
|
||||
</div>
|
||||
<div class="ab-draw-hide" />
|
||||
<v-icon class="ab-draw-icon">mdi-magnify</v-icon>
|
||||
</div>
|
||||
<div class="ab-di-info">{{ item.year }} {{ item.birthday }} {{ item.role_name }}</div>
|
||||
<div class="ab-di-text" :title="item.word_text">{{ item.word_text }}</div>
|
||||
<template #append>
|
||||
<div class="ab-top-append">
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="length"
|
||||
:total-visible="visible"
|
||||
density="compact"
|
||||
variant="elevated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<v-pagination v-model="page" :length="length" :total-visible="visible" />
|
||||
</template>
|
||||
</v-app-bar>
|
||||
<div class="ab-grid-container">
|
||||
<PacBirthCard
|
||||
v-for="item in selectedItem"
|
||||
:key="item.op_id"
|
||||
:isAether
|
||||
:item
|
||||
@open="showImg(item)"
|
||||
/>
|
||||
</div>
|
||||
<ToArcBrith v-model="showOverlay" :data="current" :choice="isAether" />
|
||||
<!-- TODO: 左右SLOT -->
|
||||
<ToArcBrith v-model="showOverlay" :choice="isAether" :data="current" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import TMiImg from "@comp/app/t-mi-img.vue";
|
||||
import ToArcBrith from "@comp/pageArchive/to-arcBrith.vue";
|
||||
import PacBirthCard from "@comp/pageArchive/pac-birth-card.vue";
|
||||
import ToArcBrith from "@comp/pageArchive/pao-birth-card.vue";
|
||||
import TGClient from "@utils/TGClient.js";
|
||||
import { computed, onMounted, ref, shallowRef, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
@@ -94,152 +112,73 @@ async function toAct(): Promise<void> {
|
||||
function getItemProps(item: TGApp.Archive.Birth.RoleItem) {
|
||||
return {
|
||||
title: `${item.name} ${item.role_birthday}`,
|
||||
subtitle: new DOMParser().parseFromString(item.text, "text/html").body.textContent,
|
||||
prependAvatar: item.head_icon,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.ab-container {
|
||||
<style lang="scss" scoped>
|
||||
.ab-top {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
column-gap: 24px;
|
||||
}
|
||||
|
||||
.ab-title {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--common-text-title);
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ab-draw-top {
|
||||
.ab-switch {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
column-gap: 10px;
|
||||
justify-content: center;
|
||||
column-gap: 12px;
|
||||
|
||||
span {
|
||||
color: var(--common-text-title);
|
||||
font-family: var(--font-title);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ab-switch-btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.ab-draw-act {
|
||||
cursor: pointer;
|
||||
.ab-select {
|
||||
position: relative;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.ab-draw-act img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.ab-top-append {
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.ab-draw-switch {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ab-draw-grid {
|
||||
.ab-grid-container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.ab-draw {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-draw-cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
aspect-ratio: 125 / 54;
|
||||
}
|
||||
|
||||
.ab-draw-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ab-draw-hide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
background: var(--common-shadow-t-2);
|
||||
}
|
||||
|
||||
.ab-draw-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: var(--common-shadow-8);
|
||||
font-size: 30px;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-draw-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-draw-act img:hover {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-draw:hover img {
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-draw:hover .ab-draw-hide {
|
||||
-webkit-backdrop-filter: blur(0);
|
||||
backdrop-filter: blur(0);
|
||||
background: var(--common-shadow-2);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-draw:hover .ab-draw-icon {
|
||||
color: var(--common-shadow-t-4);
|
||||
cursor: pointer;
|
||||
scale: 2;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.ab-di-info {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ab-di-text {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
opacity: 0.8;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user