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

💄 优化样式

Browse Source
This commit is contained in:
BTMuli
2023-06-30 21:29:54 +08:00
parent 622aca5a55
commit b83ff4674d
3 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/hutaoAbyss/hta-tab-up.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="hta-tu-box">
<v-tabs v-model="tab" align-tabs="start" direction="vertical" class="hta-tu-tab">
<v-tabs v-model="tab" direction="vertical" class="hta-tu-tab">
<v-tab value="9">第09层</v-tab>
<v-tab value="10">第10层</v-tab>
<v-tab value="11">第11层</v-tab>
@@ -9,7 +9,7 @@
<v-window v-model="tab" class="hta-tu-window">
<v-window-item :value="tab">
<div v-if="select" class="hta-tu-grid">
<TibWikiAbyss v-for="item in select.ranks" :key="item" :model-value="item" />
<TibWikiAbyss v-for="item in select.ranks" :key="item.item" :model-value="item" />
</div>
</v-window-item>
</v-window>
@@ -21,14 +21,14 @@ import { onMounted, ref, watch } from "vue";
import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
interface HtaTabUseProps {
modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUp[];
modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUse[];
}
const props = defineProps<HtaTabUseProps>();
// data
const tab = ref<string>("9");
const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUp>();
const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse>();
function loadData() {
select.value = props.modelValue.filter((item) => item.floor.toString() === tab.value)?.[0];
@@ -57,6 +57,9 @@ watch(tab, () => {
}
.hta-tu-tab {
position: absolute;
top: 5px;
left: 5px;
width: 100px;
height: 100%;
color: var(--common-text-title);
@@ -64,7 +67,8 @@ watch(tab, () => {
}
.hta-tu-window {
width: 100%;
margin-left: 100px;
width: calc(100% - 100px);
height: 100%;
overflow: auto;
}

8
src/components/hutaoAbyss/hta-tab-use.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="hta-tu-box">
<v-tabs v-model="tab" align-tabs="start" direction="vertical" class="hta-tu-tab">
<v-tabs v-model="tab" direction="vertical" class="hta-tu-tab">
<v-tab value="9">第09层</v-tab>
<v-tab value="10">第10层</v-tab>
<v-tab value="11">第11层</v-tab>
@@ -57,6 +57,9 @@ watch(tab, () => {
}
.hta-tu-tab {
position: absolute;
top: 5px;
left: 5px;
width: 100px;
height: 100%;
color: var(--common-text-title);
@@ -64,7 +67,8 @@ watch(tab, () => {
}
.hta-tu-window {
width: 100%;
margin-left: 100px;
width: calc(100% - 100px);
height: 100%;
overflow: auto;
}

9
src/pages/WIKI/Abyss.vue
View File

@@ -101,18 +101,21 @@ function getShareTitle() {
}
async function shareWiki() {
const div = document.querySelector(".hta-box") as HTMLDivElement;
const div = <HTMLDivElement>document.querySelector(".hta-tab-item");
const title = getShareTitle();
loadingTitle.value = "正在生成分享图";
loading.value = true;
await generateShareImg(title, div);
loading.value = false;
}
</script>
<style lang="css" scoped>
.hta-box {
width: 100%;
height: 100%;
max-height: calc(100vh - 30px);
padding: 10px;
box-sizing: border-box;
overflow: auto;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0 0 10px var(--common-shadow-4);
}