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

💄 修复 tabs 渲染异常

Browse Source
This commit is contained in:
目棃
2024-05-09 16:41:17 +08:00
parent 040f49a33e
commit 083381f2ec
4 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/gachaRecord/gro-history.vue
View File

@@ -183,9 +183,9 @@ function getBox(id: number): TItemBoxData {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
column-gap: 10px;
} }
.gro-tabs { .gro-tabs {
@@ -194,8 +194,8 @@ function getBox(id: number): TItemBoxData {
} }
/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
.v-tabs.v-slide-group--vertical { .gro-container :deep(.v-tabs.v-slide-group--vertical) {
height: 100%; max-height: 100%;
} }
.gro-window { .gro-window {
@@ -210,6 +210,11 @@ function getBox(id: number): TItemBoxData {
overflow-y: scroll; overflow-y: scroll;
} }
/* stylelint-disable-next-line selector-class-pattern */
.gro-window :deep(.v-window__container) {
width: 100%;
}
.gro-pools { .gro-pools {
position: relative; position: relative;
display: flex; display: flex;

7
src/components/hutaoAbyss/hta-tab-team.vue
View File

@@ -69,22 +69,21 @@ onMounted(async () => {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.hta-tt-box { .hta-tt-box {
width: calc(100% - 10px); display: flex;
height: 100%; height: 100%;
column-gap: 10px;
} }
.hta-tt-tab { .hta-tt-tab {
position: absolute;
height: 100%; height: 100%;
color: var(--box-text-4); color: var(--box-text-4);
} }
.hta-tt-window { .hta-tt-window {
overflow: auto; overflow: auto;
width: calc(100% - 100px); width: 100%;
height: 100%; height: 100%;
max-height: calc(100vh - 130px); max-height: calc(100vh - 130px);
margin-left: 100px;
overflow-x: hidden; overflow-x: hidden;
} }

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

@@ -43,19 +43,20 @@ onMounted(async () => {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.hta-tu-box { .hta-tu-box {
display: flex;
height: 100%; height: 100%;
padding-top: 10px;
column-gap: 10px;
} }
.hta-tu-tab { .hta-tu-tab {
position: absolute;
height: 100%; height: 100%;
color: var(--box-text-4); color: var(--box-text-4);
} }
.hta-tu-window { .hta-tu-window {
width: calc(100% - 100px); width: 100%;
height: 100%; height: 100%;
margin-left: 100px;
} }
.hta-tu-grid { .hta-tu-grid {

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

@@ -1,18 +1,18 @@
<template> <template>
<div class="hta-tu-box"> <div class="hta-tus-box">
<v-tabs v-model="tab" direction="vertical" class="hta-tu-tab"> <v-tabs v-model="tab" direction="vertical" class="hta-tus-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>
<v-tab value="12">第12层</v-tab> <v-tab value="12">第12层</v-tab>
</v-tabs> </v-tabs>
<v-window v-model="tab" class="hta-tu-window"> <v-window v-model="tab" class="hta-tus-window">
<v-window-item <v-window-item
v-for="selectItem in select" v-for="selectItem in select"
:key="selectItem.Floor" :key="selectItem.Floor"
:value="selectItem.Floor.toString()" :value="selectItem.Floor.toString()"
> >
<div class="hta-tu-grid"> <div class="hta-tus-grid">
<TibWikiAbyss v-for="item in selectItem.Ranks" :key="item.Item" :model-value="item" /> <TibWikiAbyss v-for="item in selectItem.Ranks" :key="item.Item" :model-value="item" />
</div> </div>
</v-window-item> </v-window-item>
@@ -42,23 +42,25 @@ onMounted(async () => {
}); });
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.hta-tu-box { .hta-tus-box {
display: flex;
height: 100%; height: 100%;
padding-top: 10px;
column-gap: 10px;
} }
.hta-tu-tab { .hta-tus-tab {
position: absolute; width: 100px;
height: 100%; height: 100%;
color: var(--box-text-4); color: var(--box-text-4);
} }
.hta-tu-window { .hta-tus-window {
width: calc(100% - 100px); width: 100%;
height: 100%; height: 100%;
margin-left: 100px;
} }
.hta-tu-grid { .hta-tus-grid {
display: grid; display: grid;
overflow: auto; overflow: auto;
width: 100%; width: 100%;