Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 添加折叠框 icon

Browse Source
This commit is contained in:
BTMuli
2023-12-07 15:08:35 +08:00
parent 0bb730d2e3
commit a800ed532d
2 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/source/post/fold_marker.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 476 B

14
src/components/post/tp-backupText.vue
View File

@@ -10,6 +10,7 @@
</div> </div>
<details v-else-if="props.data.insert.fold" class="tp-backup-fold"> <details v-else-if="props.data.insert.fold" class="tp-backup-fold">
<summary class="tp-backup-summary"> <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)" /> <TpParser :data="JSON.parse(props.data.insert.fold.title)" />
</summary> </summary>
<div class="tp-backup-details"> <div class="tp-backup-details">
@@ -69,22 +70,35 @@ async function toLottery() {
} }
.tp-backup-fold { .tp-backup-fold {
position: relative;
padding: 10px; padding: 10px;
border: 1px solid var(--common-shadow-2); border: 1px solid var(--common-shadow-2);
border-radius: 10px; border-radius: 10px;
margin: 10px auto; margin: 10px auto;
} }
.tp-backup-fold summary {
list-style: none;
}
.tp-backup-fold ::marker { .tp-backup-fold ::marker {
color: var(--common-shadow-4); color: var(--common-shadow-4);
content: ""; content: "";
} }
.tp-backup-summary { .tp-backup-summary {
display: flex;
margin-left: 5px; margin-left: 5px;
font-family: var(--font-title); font-family: var(--font-title);
} }
.tp-backup-marker {
position: relative;
display: inline;
width: 20px;
height: 20px;
}
.tp-backup-details { .tp-backup-details {
padding-left: 20px; padding-left: 20px;
} }