Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-21 04:49:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 调整UI

Browse Source
This commit is contained in:
目棃
2025-03-20 16:52:41 +08:00
parent f4a0165e81
commit a47afbf2e0
15 changed files with 98 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/app/t-subline.vue
View File

@@ -8,26 +8,20 @@
.tsl-box {
display: flex;
align-items: center;
padding: 5px;
border-radius: 5px;
margin: 5px 0;
background: var(--box-bg-3);
color: var(--box-text-4);
padding: 4px;
border-radius: 4px;
background: var(--box-bg-1);
color: var(--box-text-1);
font-family: var(--font-title);
gap: 5px;
gap: 4px;
}
.tsl-box :first-child {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
box-sizing: border-box;
padding: 2px;
border-radius: 5px;
filter: invert(22%) sepia(7%) saturate(1241%) hue-rotate(182deg) brightness(95%) contrast(99%);
}
.dark .tsl-box {
background: #2c313a;
color: #faf7e8;
filter: invert(0.75);
}
.dark .tsl-box :first-child {

2
src/components/userAbyss/tua-detail-battle.vue
View File

@@ -54,7 +54,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.CharacterInfo): TItemBoxData {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 10px;
gap: 12px;
}
.tud-db-time {

10
src/components/userAbyss/tua-detail-level.vue
View File

@@ -28,11 +28,13 @@ const props = defineProps<TuaDetailLevelProps>();
<style lang="css" scoped>
.tua-dl-box {
display: flex;
box-sizing: border-box;
flex-direction: column;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
padding: 8px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
margin-top: 8px;
background: var(--box-bg-2);
gap: 10px;
gap: 8px;
}
</style>

6
src/components/userAbyss/tua-detail.vue
View File

@@ -24,15 +24,15 @@ const props = defineProps<TuaDetailProps>();
</script>
<style lang="css" scoped>
.tuad-box {
padding: 10px;
border-radius: 5px;
padding: 8px;
border-radius: 4px;
background: var(--box-bg-1);
}
.tuad-index-box {
display: grid;
width: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
</style>

1
src/components/userAbyss/tua-overview.vue
View File

@@ -70,6 +70,7 @@ function getBoxData(avatar: TGApp.Sqlite.Abyss.Character): TItemBoxData {
color: var(--tgc-yellow-1);
font-family: var(--font-text);
font-size: 20px;
font-weight: bold;
}
.tuao-val-icons {

4
src/components/userCombat/tuc-avatars.vue
View File

@@ -48,12 +48,12 @@ function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
gap: 4px;
&.grid {
display: grid;
width: 100%;
grid-gap: 10px;
grid-gap: 4px;
grid-template-columns: repeat(2, 1fr);
}
}

14
src/components/userCombat/tuc-buffs.vue
View File

@@ -31,7 +31,7 @@ const columnCnt = computed<number>(() => {
.tuc-buff-box {
display: grid;
width: 100%;
grid-gap: 5px;
grid-gap: 4px;
grid-template-columns: repeat(v-bind(columnCnt), 1fr);
}
@@ -42,8 +42,8 @@ const columnCnt = computed<number>(() => {
height: 80px;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 5px;
padding: 8px;
border-radius: 4px;
background-color: var(--box-bg-3);
img {
@@ -56,14 +56,14 @@ const columnCnt = computed<number>(() => {
position: absolute;
right: 0;
bottom: 0;
padding: 0 5px;
padding: 0 4px;
background: var(--common-shadow-2);
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
color: var(--tgc-white-2);
font-family: var(--font-title);
font-size: 14px;
text-shadow: 0 0 5px rgb(0 0 0 / 20%);
text-shadow: 0 0 4px rgb(0 0 0 / 20%);
}
}
</style>

2
src/components/userCombat/tuc-overview.vue
View File

@@ -46,7 +46,7 @@ function getTime(): string {
.tuco-box {
display: grid;
width: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
</style>

15
src/components/userCombat/tuc-round.vue
View File

@@ -35,10 +35,10 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
height: fit-content;
flex-direction: column;
align-items: center;
padding: 5px;
border-radius: 5px;
padding: 8px;
border-radius: 4px;
background: var(--box-bg-1);
row-gap: 5px;
row-gap: 4px;
}
.tucr-title {
@@ -46,7 +46,7 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
align-items: flex-end;
justify-content: center;
margin-right: auto;
column-gap: 5px;
column-gap: 4px;
img {
width: 30px;
@@ -67,13 +67,10 @@ defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
.tucr-content {
display: flex;
width: 100%;
flex-shrink: 0;
align-items: flex-start;
justify-content: flex-start;
column-gap: 10px;
.main {
width: 180px;
}
column-gap: 8px;
.sub {
width: 100%;

8
src/components/userCombat/tuc-sub.vue
View File

@@ -11,12 +11,14 @@ defineProps<{ title: string }>();
.tuc-sub-box {
position: relative;
display: flex;
height: 200px;
height: 205px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 5px;
border-radius: 5px;
padding: 8px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
}

5
src/components/userCombat/tuc-tile.vue
View File

@@ -22,8 +22,8 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 5px;
padding: 8px;
border-radius: 4px;
background: var(--box-bg-1);
}
@@ -37,6 +37,7 @@ defineProps<{ title: string; val: string | number | Array<number> }>();
color: var(--tgc-yellow-1);
font-family: var(--font-text);
font-size: 20px;
font-weight: bold;
}
.tuct-icons {

47
src/pages/User/Abyss.vue
View File

@@ -88,7 +88,6 @@
<TuaOverview title="出战次数" :val-icons="item.revealRank" :multi4="true" />
<TuaOverview title="元素爆发" :val-icons="item.energySkillRank" />
</div>
<TSubLine>详情</TSubLine>
<div class="uaw-d-box">
<TuaDetail v-for="floor in item.floors" :key="floor.id" :model-value="floor" />
</div>
@@ -341,11 +340,10 @@ async function deleteAbyss(): Promise<void> {
<style lang="css" scoped>
.uat-left {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding: 10px;
gap: 10px;
margin-left: 8px;
gap: 8px;
img {
width: 32px;
@@ -366,7 +364,7 @@ async function deleteAbyss(): Promise<void> {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
margin-right: 12px;
font-family: var(--font-text);
font-size: 16px;
@@ -381,8 +379,9 @@ async function deleteAbyss(): Promise<void> {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
gap: 10px;
padding: 8px;
margin-left: 8px;
gap: 8px;
}
.ua-btn {
@@ -391,13 +390,19 @@ async function deleteAbyss(): Promise<void> {
font-family: var(--font-text);
}
.dark .ua-btn {
border: 1px solid var(--common-shadow-2);
}
.ua-box {
display: flex;
height: calc(100vh - 150px);
height: calc(100vh - 144px);
align-items: flex-start;
justify-content: center;
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
border: 1px solid var(--common-shadow-2);
border-radius: 4px;
background: var(--box-bg-1);
color: var(--box-text-1);
}
.ua-tabs-box {
@@ -407,22 +412,25 @@ async function deleteAbyss(): Promise<void> {
.ua-window {
overflow: hidden;
width: calc(100% - 100px);
width: 100%;
height: 100%;
padding: 10px;
padding: 8px;
background: var(--app-page-bg);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.ua-window-item {
height: 100%;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
padding-right: 8px;
overflow-y: auto;
}
.uaw-i-ref {
display: flex;
flex-direction: column;
gap: 5px;
gap: 8px;
}
.uaw-top {
@@ -436,13 +444,12 @@ async function deleteAbyss(): Promise<void> {
display: flex;
align-items: center;
color: var(--common-text-title);
column-gap: 4px;
font-family: var(--font-title);
font-size: 20px;
}
.uaw-title :nth-child(2n) {
margin-right: 10px;
margin-left: 10px;
color: var(--tgc-yellow-1);
}
@@ -455,14 +462,14 @@ async function deleteAbyss(): Promise<void> {
.uaw-o-box {
display: grid;
width: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
.uaw-d-box {
display: flex;
flex-direction: column;
gap: 10px;
gap: 8px;
}
.user-empty {
@@ -474,7 +481,7 @@ async function deleteAbyss(): Promise<void> {
height: 400px;
flex-direction: column;
align-items: center;
border-radius: 5px;
border-radius: 4px;
background: var(--common-shadow-t-2);
box-shadow: 0 0 5px var(--common-shadow-2);
color: var(--common-text-title);

39
src/pages/User/Combat.vue
View File

@@ -77,7 +77,6 @@
<TucOverview :data="item.stat" :fights="item.detail.fight_statisic" />
<TSubLine>使用角色({{ item.detail.backup_avatars.length }}名)</TSubLine>
<TucAvatars :model-value="item.detail.backup_avatars" :detail="false" />
<TSubLine>详情</TSubLine>
<div class="ucw-rounds">
<TucRound
v-for="(round, idx) in item.detail.rounds_data"
@@ -300,11 +299,10 @@ async function deleteCombat(): Promise<void> {
<style lang="css" scoped>
.uct-left {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding: 10px;
gap: 10px;
margin-left: 12px;
gap: 8px;
img {
width: 32px;
@@ -323,11 +321,10 @@ async function deleteCombat(): Promise<void> {
.uct-right {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding: 10px;
gap: 10px;
margin-right: 12px;
gap: 8px;
}
.uc-btn {
@@ -336,13 +333,18 @@ async function deleteCombat(): Promise<void> {
font-family: var(--font-text);
}
.dark .uc-btn {
border: 1px solid var(--common-shadow-2);
}
.uc-box {
display: flex;
height: calc(100vh - 100px);
height: calc(100vh - 96px);
align-items: flex-start;
justify-content: center;
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
border: 1px solid var(--common-shadow-2);
border-radius: 4px;
background: var(--box-bg-1);
}
.uc-tabs-box {
@@ -352,22 +354,24 @@ async function deleteCombat(): Promise<void> {
.uc-window {
overflow: hidden;
width: calc(100% - 100px);
width: 100%;
height: 100%;
padding: 10px;
padding: 8px;
background: var(--app-page-bg);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.uc-window-item {
height: 100%;
padding: 10px;
border-radius: 5px;
padding-right: 8px;
overflow-y: auto;
}
.ucw-i-ref {
display: flex;
flex-direction: column;
gap: 5px;
gap: 8px;
}
.ucw-top {
@@ -381,13 +385,12 @@ async function deleteCombat(): Promise<void> {
display: flex;
align-items: center;
color: var(--common-text-title);
column-gap: 4px;
font-family: var(--font-title);
font-size: 20px;
}
.ucw-title :nth-child(2n) {
margin-right: 10px;
margin-left: 10px;
color: var(--tgc-yellow-1);
}
@@ -416,7 +419,7 @@ async function deleteCombat(): Promise<void> {
.ucw-rounds {
display: grid;
gap: 10px;
gap: 8px;
grid-template-columns: repeat(2, 1fr);
}
</style>

4
src/pages/User/Record.vue
View File

@@ -238,6 +238,10 @@ async function deleteRecord(): Promise<void> {
font-family: var(--font-text);
}
.dark .ur-top-btn {
border: 1px solid var(--common-shadow-2);
}
.ur-box {
@include github-styles.github-card-shadow();

3
src/pages/common/PageAchi.vue
View File

@@ -279,7 +279,7 @@ onUnmounted(async () => {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
margin-left: 8px;
gap: 8px;
img {
@@ -310,6 +310,7 @@ onUnmounted(async () => {
.top-extension {
position: relative;
padding: 8px;
margin-left: 8px;
display: flex;
align-items: center;
justify-content: center;