Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-04-28 22:59:38 +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> <template>
<div class="hta-tu-box"> <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="9">第09层</v-tab>
<v-tab value="10">第10层</v-tab> <v-tab value="10">第10层</v-tab>
<v-tab value="11">第11层</v-tab> <v-tab value="11">第11层</v-tab>
@@ -9,7 +9,7 @@
<v-window v-model="tab" class="hta-tu-window"> <v-window v-model="tab" class="hta-tu-window">
<v-window-item :value="tab"> <v-window-item :value="tab">
<div v-if="select" class="hta-tu-grid"> <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> </div>
</v-window-item> </v-window-item>
</v-window> </v-window>
@@ -21,14 +21,14 @@ import { onMounted, ref, watch } from "vue";
import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue"; import TibWikiAbyss from "../itembox/tib-wiki-abyss.vue";
interface HtaTabUseProps { interface HtaTabUseProps {
modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUp[]; modelValue: TGApp.Plugins.Hutao.Abyss.AvatarUse[];
} }
const props = defineProps<HtaTabUseProps>(); const props = defineProps<HtaTabUseProps>();
// data // data
const tab = ref<string>("9"); const tab = ref<string>("9");
const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUp>(); const select = ref<TGApp.Plugins.Hutao.Abyss.AvatarUse>();
function loadData() { function loadData() {
select.value = props.modelValue.filter((item) => item.floor.toString() === tab.value)?.[0]; select.value = props.modelValue.filter((item) => item.floor.toString() === tab.value)?.[0];
@@ -57,6 +57,9 @@ watch(tab, () => {
} }
.hta-tu-tab { .hta-tu-tab {
position: absolute;
top: 5px;
left: 5px;
width: 100px; width: 100px;
height: 100%; height: 100%;
color: var(--common-text-title); color: var(--common-text-title);
@@ -64,7 +67,8 @@ watch(tab, () => {
} }
.hta-tu-window { .hta-tu-window {
width: 100%; margin-left: 100px;
width: calc(100% - 100px);
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }

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

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

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

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