mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-29 06:09:45 +08:00
96 lines
2.3 KiB
Vue
96 lines
2.3 KiB
Vue
<template>
|
|
<span
|
|
v-if="props.data.insert.lottery"
|
|
@click="showLottery = !showLottery"
|
|
class="tp-backup-lottery"
|
|
:title="`ID: ${props.data.insert.lottery.id}`"
|
|
>
|
|
<v-icon size="16">mdi-gift</v-icon>
|
|
<span>{{ props.data.insert.lottery.toast }}</span>
|
|
</span>
|
|
<VpOverlayLottery
|
|
v-if="props.data.insert.lottery"
|
|
v-model="showLottery"
|
|
:lottery="props.data.insert.lottery.id"
|
|
/>
|
|
<details v-else-if="props.data.insert.fold" class="tp-backup-fold">
|
|
<summary class="tp-backup-summary">
|
|
<img alt="marker" src="/source/post/fold_marker.webp" class="tp-backup-marker" />
|
|
<TpParser :data="JSON.parse(props.data.insert.fold.title)" />
|
|
</summary>
|
|
<div class="tp-backup-details">
|
|
<TpParser :data="JSON.parse(props.data.insert.fold.content)" />
|
|
</div>
|
|
</details>
|
|
<TpUnknown v-else :data="<TGApp.BBS.SctPost.Empty>props.data" />
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, toRaw } from "vue";
|
|
|
|
import TpParser from "./tp-parser.vue";
|
|
import TpUnknown from "./tp-unknown.vue";
|
|
import VpOverlayLottery from "./vp-overlay-lottery.vue";
|
|
|
|
type TpBackupText = {
|
|
insert: {
|
|
backup_text: string;
|
|
fold?: { title: string; content: string };
|
|
lottery?: { id: string; toast: string };
|
|
};
|
|
};
|
|
type TpBackupTextProps = { data: TpBackupText };
|
|
|
|
const props = defineProps<TpBackupTextProps>();
|
|
const showLottery = ref<boolean>(false);
|
|
|
|
console.log("tpBackupText", props.data.insert.backup_text, toRaw(props.data));
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.tp-backup-lottery {
|
|
margin-right: 4px;
|
|
color: #00c3ff;
|
|
cursor: pointer;
|
|
|
|
:first-child {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.tp-backup-fold {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--common-shadow-2);
|
|
border-radius: 4px;
|
|
margin: 8px auto;
|
|
}
|
|
|
|
.tp-backup-summary {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 8px;
|
|
background: var(--box-bg-1);
|
|
cursor: pointer;
|
|
font-family: var(--font-title);
|
|
}
|
|
|
|
.tp-backup-marker {
|
|
position: relative;
|
|
display: inline;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.tp-backup-details {
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8px 8px 8px 24px;
|
|
border-top: 1px solid var(--common-shadow-1);
|
|
}
|
|
</style>
|