Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-26 05:39:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 调整战绩页面UI

Browse Source
This commit is contained in:
目棃
2025-03-19 16:20:40 +08:00
parent 96dfec969c
commit a2f68b92c7
11 changed files with 218 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/userRecord/tur-avatar-grid.vue
View File

@@ -43,8 +43,7 @@ function getTitle(avatar: TGApp.Sqlite.Record.Avatar): string {
<style lang="css" scoped>
.tur-ag-box {
display: grid;
margin-bottom: 10px;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
</style>

7
src/components/userRecord/tur-box.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<div class="tur-box-container">
<slot name="default"></slot>
</div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

2
src/components/userRecord/tur-home-grid.vue
View File

@@ -13,7 +13,7 @@ defineProps<{ modelValue: Array<TGApp.Sqlite.Record.Home> }>();
.tur-hg-box {
display: grid;
width: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
</style>

22
src/components/userRecord/tur-home-sub.vue
View File

@@ -44,7 +44,7 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
align-items: center;
justify-content: space-between;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
border-radius: 4px;
background: var(--box-bg-2);
}
@@ -63,14 +63,14 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
box-sizing: border-box;
align-items: center;
justify-content: space-between;
padding: 10px;
padding: 8px;
}
.tur-hs-name {
color: var(--tgc-white-1);
font-family: var(--font-text);
font-size: 16px;
text-shadow: 0 0 5px var(--tgc-yellow-1);
text-shadow: 0 0 4px var(--tgc-yellow-1);
}
.tur-hs-title {
@@ -78,14 +78,14 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
align-items: center;
color: var(--tgc-white-1);
font-family: var(--font-title);
font-size: 20px;
text-shadow: 0 0 5px var(--tgc-yellow-1);
font-size: 18px;
text-shadow: 0 0 4px var(--tgc-yellow-1);
}
.tur-hs-title img {
width: 30px;
height: 30px;
margin-right: 5px;
width: 24px;
height: 24px;
margin-right: 4px;
}
.tur-hs-text-grid {
@@ -94,12 +94,12 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
display: flex;
width: 100%;
justify-content: space-between;
padding: 10px;
padding: 8px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgb(0 0 0 / 40%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: var(--tgc-white-1);
text-align: center;
}

10
src/components/userRecord/tur-overview-grid.vue
View File

@@ -33,9 +33,9 @@
<template #icon>
<img
alt="achievement-icon"
height="25px"
height="20px"
src="@/assets/icons/achievements.svg"
width="25px"
width="20px"
/>
</template>
</TurOverviewSub>
@@ -92,15 +92,15 @@ defineProps<{ modelValue: TGApp.Sqlite.Record.Stats }>();
.tur-og-box {
display: grid;
width: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(4, 0.25fr);
}
.tur-og-box-3 {
display: grid;
width: 100%;
margin-bottom: 10px;
grid-gap: 10px;
margin-bottom: 8px;
grid-gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
</style>

34
src/components/userRecord/tur-overview-sub.vue
View File

@@ -1,17 +1,21 @@
<template>
<div class="tur-os-box">
<div class="tur-os-title">
<slot name="title">{{ props.title }}</slot>
</div>
<div class="tur-os-text">
<div v-if="props.icon !== undefined" class="tur-os-icon">
<slot name="icon"><img :src="props.icon" alt="icon" /></slot>
<slot name="icon">
<TMiImg :ori="true" :src="props.icon" alt="icon" />
</slot>
</div>
<slot name="val-text">{{ props.text }}</slot>
</div>
<div class="tur-os-title">
<slot name="title">{{ props.title }}</slot>
</div>
</div>
</template>
<script lang="ts" setup>
import TMiImg from "@comp/app/t-mi-img.vue";
type TAOProps = { title: string; text: string | number | undefined; icon?: string | undefined };
const props = defineProps<TAOProps>();
@@ -24,26 +28,26 @@ const props = defineProps<TAOProps>();
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 5px;
background: var(--box-bg-2);
padding: 8px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-1);
}
.tur-os-title {
color: var(--box-text-4);
font-family: var(--font-title);
font-size: 20px;
}
.tur-os-text {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
color: var(--tgc-yellow-1);
column-gap: 4px;
font-family: var(--font-text);
font-size: 20px;
gap: 5px;
font-size: 18px;
line-height: 24px;
}
.dark .tur-os-text {
@@ -52,8 +56,12 @@ const props = defineProps<TAOProps>();
}
.tur-os-icon {
width: 25px;
height: 25px;
position: relative;
display: flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
img {
width: 100%;

71
src/components/userRecord/tur-role-info.vue
View File

@@ -1,31 +1,40 @@
<template>
<div class="tur-ri-box">
<div class="tur-ri-avatar">
<img :src="props.modelValue.avatar" alt="avatar" />
</div>
<div class="tur-ri-content">
<div class="tur-ri-title">
<span>{{ props.modelValue.nickname }}</span>
<span>{{ props.modelValue.level }}</span>
</div>
<div class="tur-ri-subtitle">
<span>UID:{{ props.uid }}</span>
<span>({{ props.modelValue.region }})</span>
</div>
<div class="tur-ri-title">{{ role.nickname }}({{ uid }})</div>
<div class="tur-ri-subtitle">Lv.{{ role.level }} {{ role.region }}</div>
</div>
<div class="tur-ri-avatar">
<TMiImg :ori="true" :src="role.avatar" alt="avatar" />
</div>
</div>
</template>
<script lang="ts" setup>
type TurRoleInfoProps = { uid: number; modelValue: TGApp.Sqlite.Record.Role };
import TMiImg from "@comp/app/t-mi-img.vue";
const props = defineProps<TurRoleInfoProps>();
type TurRoleInfoProps = { uid: number; role: TGApp.Sqlite.Record.Role };
defineProps<TurRoleInfoProps>();
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@use "@styles/github.styles.scss" as github-styles;
.tur-ri-box {
@include github-styles.github-card();
position: relative;
display: flex;
height: 40px;
height: 48px;
align-items: center;
justify-content: center;
column-gap: 4px;
padding: 4px;
border-radius: 4px 24px 24px 4px;
box-sizing: border-box;
}
.dark .tur-ri-box {
@include github-styles.github-card("dark");
}
.tur-ri-avatar {
@@ -47,42 +56,28 @@ const props = defineProps<TurRoleInfoProps>();
.tur-ri-content {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: flex-end;
justify-content: center;
}
.tur-ri-title {
display: flex;
height: 25px;
align-items: center;
justify-content: flex-start;
column-gap: 5px;
:first-child {
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 18px;
}
:last-child {
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 5px;
background: var(--tgc-od-blue);
color: var(--tgc-white-1);
font-size: 12px;
line-height: 20px;
}
column-gap: 4px;
font-family: var(--font-title);
color: var(--common-text-title);
font-size: 16px;
line-height: 20px;
}
.tur-ri-subtitle {
display: flex;
height: 15px;
font-size: 14px;
line-height: 16px;
align-items: center;
justify-content: flex-start;
column-gap: 10px;
opacity: 0.8;
color: var(--box-text-1);
}
</style>

4
src/components/userRecord/tur-world-grid.vue
View File

@@ -13,7 +13,7 @@ defineProps<{ modelValue: Array<TGApp.Sqlite.Record.WorldExplore> }>();
.tur-wg-box {
display: grid;
width: 100%;
grid-gap: 10px;
grid-template-columns: repeat(3, calc(33.3333% - 10px));
grid-gap: 8px;
grid-template-columns: repeat(3, 0.33fr);
}
</style>

31
src/components/userRecord/tur-world-sub.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="tur-ws-box">
<div class="tur-ws-bg">
<img :src="data.bg" alt="bg" />
<TMiImg :ori="true" :src="data.bg" alt="bg" />
</div>
<div class="tur-ws-icon">
<img :src="icon" alt="icon" />
@@ -11,7 +11,7 @@
<span>{{ data.name }}</span>
<span v-if="data.offering" class="tur-ws-sub">
<img :src="data.offering.icon" alt="offer" />
<span>{{ data.offering.name }}等级：</span>
<span>{{ data.offering.name }}-</span>
<span>{{ data.offering.level }}</span>
<span>级</span>
</span>
@@ -42,6 +42,7 @@
</div>
</template>
<script lang="ts" setup>
import TMiImg from "@comp/app/t-mi-img.vue";
import { storeToRefs } from "pinia";
import { computed } from "vue";
@@ -62,15 +63,18 @@ const icon = computed<string>(() => {
return props.data.iconDark;
});
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
.tur-ws-box {
position: relative;
display: flex;
overflow: hidden;
align-items: center;
align-items: flex-start;
justify-content: center;
padding: 10px;
border-radius: 5px;
padding: 8px;
border-radius: 4px;
column-gap: 4px;
background: var(--box-bg-1);
border: 1px solid var(--common-shadow-1);
}
.tur-ws-bg {
@@ -83,9 +87,8 @@ const icon = computed<string>(() => {
.tur-ws-icon {
z-index: 1;
width: 60px;
height: 60px;
padding: 5px;
width: 64px;
height: 64px;
}
.tur-ws-icon img {
@@ -96,7 +99,7 @@ const icon = computed<string>(() => {
.tur-ws-content {
z-index: 1;
width: calc(100% - 60px);
width: calc(100% - 68px);
height: 100%;
color: var(--box-text-4);
}
@@ -107,7 +110,7 @@ const icon = computed<string>(() => {
justify-content: space-between;
border-bottom: 1px inset var(--common-shadow-8);
font-family: var(--font-title);
font-size: 20px;
font-size: 18px;
}
.tur-ws-sub {
@@ -119,13 +122,13 @@ const icon = computed<string>(() => {
}
.tur-ws-sub img {
width: 20px;
height: 20px;
margin-right: 5px;
width: 24px;
height: 24px;
}
.tur-ws-sub :nth-last-child(2) {
color: var(--tgc-yellow-1);
font-family: var(--font-title);
text-shadow: 0 0 2px #0d1117;
}
</style>