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

💄 调整成就页面UI

Browse Source
This commit is contained in:
目棃
2025-03-19 14:59:24 +08:00
parent 1b5ddf9b3f
commit 96dfec969c
5 changed files with 119 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/styles/github.styles.scss
View File

@@ -6,13 +6,22 @@
/* Card，传入theme参数 */
@mixin github-card($theme: 'default') {
@include github-card-shadow($theme);
@if $theme == 'default' {
background: #ffffff;
border: 1px solid #d1d9e0;
box-shadow: rgba(31, 35, 40, 0.06) 0 1px 1px 0, rgba(31, 35, 40, 0.06) 0 1px 3px 0;
} @else {
background: #0d1117;
border: 1px solid #3d444d;
}
}
/* CardShadow，传入theme参数 */
@mixin github-card-shadow($theme: 'default') {
@if $theme == 'default' {
box-shadow: rgba(31, 35, 40, 0.06) 0 1px 1px 0, rgba(31, 35, 40, 0.06) 0 1px 3px 0;
} @else {
box-shadow: rgba(1, 4, 9, 0.6) 0 1px 1px 0, rgba(1, 4, 9, 0.6) 0 1px 3px 0;
}
}

20
src/components/app/top-nameCard.vue
View File

@@ -7,7 +7,7 @@
<template #prepend>
<v-img
width="80px"
style="margin-right: 10px"
style="margin-right: 8px"
:src="`/WIKI/nameCard/icon/${props.data.name}.webp`"
/>
</template>
@@ -28,13 +28,17 @@ const bgImage = computed<string>(() => {
return `url("/WIKI/nameCard/bg/${props.data.name}.webp")`;
});
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@use "@styles/github.styles.scss" as github-styles;
.top-nc-box {
@include github-styles.github-card-shadow();
width: 100%;
height: 80px;
border: 1px solid var(--common-shadow-2);
border-radius: 10px 50px 50px 10px;
margin-bottom: 10px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px 50px 50px 4px;
margin-bottom: 8px;
background-color: var(--box-bg-1);
background-image: v-bind(bgImage);
background-position: right;
@@ -43,7 +47,11 @@ const bgImage = computed<string>(() => {
font-family: var(--font-title);
}
.dark .top-nc-box {
@include github-styles.github-card-shadow("dark");
}
.desc {
text-shadow: 1px 1px 1px #222;
text-shadow: 0 0 2px var(--common-shadow-8);
}
</style>

40
src/components/userAchi/tua-achi.vue
View File

@@ -90,32 +90,38 @@ async function setAchiStat(stat: boolean): Promise<void> {
model.value = data.value;
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@use "@styles/github.styles.scss" as github-styles;
.achi-container {
@include github-styles.github-card();
position: relative;
display: flex;
height: 60px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
background: var(--box-bg-1);
color: var(--box-text-7);
padding: 8px;
border-radius: 4px;
cursor: pointer;
}
.dark .achi-container {
@include github-styles.github-card("dark");
}
.achi-version {
@include github-styles.github-tag-dark-gen(#fb7299);
position: absolute;
top: 0;
left: 0;
width: 50px;
border-right: 1px solid var(--common-shadow-1);
border-bottom: 1px solid var(--common-shadow-1);
background: var(--box-bg-2);
width: 48px;
border-left: unset;
border-top: unset;
border-bottom-right-radius: 20px;
border-top-left-radius: 10px;
color: var(--tgc-pink-1);
border-top-left-radius: 4px;
font-family: var(--font-title);
font-size: 10px;
text-align: center;
@@ -125,7 +131,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: 10px;
column-gap: 8px;
}
.achi-pre-icon {
@@ -154,7 +160,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
.achi-pre-info :nth-child(1) {
display: flex;
align-items: flex-end;
column-gap: 5px;
column-gap: 4px;
font-family: var(--font-title);
font-size: 14px;
}
@@ -179,8 +185,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 50%);
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);
font-size: 8px;
}
@@ -202,7 +208,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
position: relative;
width: 40px;
height: 40px;
border-radius: 5px;
border-radius: 4px;
background-image: url("/icon/bg/5-Star.webp");
background-size: cover;
}

76
src/components/userAchi/tua-series.vue
View File

@@ -1,7 +1,20 @@
<template>
<div class="tuas-card" @click="selectSeries" v-if="data">
<div
class="tuas-card"
@click="selectSeries"
v-if="data"
:class="{ 'tuas-selected': props.cur === props.series }"
>
<div class="tuas-version">v{{ data.version }}</div>
<img alt="icon" class="tuas-icon" :src="`/icon/achievement/${data.icon}.webp`" />
<div class="tuas-icon">
<img alt="icon" :src="`/icon/achievement/${data.icon}.webp`" />
<v-progress-circular
class="progress"
bg-color="var(--tgc-od-white)"
color="var(--tgc-yellow-2)"
:model-value="`${(overview.fin / overview.total) * 100}`"
/>
</div>
<div class="tuas-content">
<span :title="data.name">{{ data.name }}</span>
<span>{{ overview.fin }}/{{ overview.total }}</span>
@@ -63,44 +76,75 @@ function selectSeries(): void {
emits("selectSeries", props.series);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@use "@styles/github.styles.scss" as github-styles;
.tuas-card {
@include github-styles.github-card();
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
background: var(--box-bg-1);
justify-content: flex-start;
padding: 8px;
height: 60px;
border-radius: 4px;
color: var(--box-text-1);
column-gap: 10px;
column-gap: 8px;
cursor: pointer;
overflow: hidden;
&.tuas-selected {
background: var(--box-bg-1);
}
}
.dark .tuas-card {
@include github-styles.github-card("dark");
&.tuas-selected {
background: var(--box-bg-1);
}
}
.tuas-version {
@include github-styles.github-tag-dark-gen(#ffa726);
position: absolute;
right: 0;
bottom: 0;
width: 80px;
border-top: 1px solid var(--common-shadow-1);
border-left: 1px solid var(--common-shadow-1);
background: var(--box-bg-2);
border-bottom-right-radius: 10px;
width: 64px;
border-right: unset;
border-bottom: unset;
border-top-left-radius: 20px;
color: var(--tgc-yellow-1);
font-family: var(--font-title);
font-size: 10px;
text-align: center;
text-shadow: 1px 1px 1px var(--common-shadow-1);
}
.tuas-icon {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 5px;
border-radius: 50%;
box-sizing: border-box;
background: var(--tgc-dark-7);
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
}
}
.tuas-content {

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

@@ -41,6 +41,7 @@
<v-virtual-scroll :items="seriesList" class="left-wrap" item-height="60">
<template #default="{ item }">
<TuaSeries
class="left-item"
v-model:cur="selectedSeries"
:series="item"
:uid="uidCur"
@@ -324,14 +325,21 @@ onUnmounted(async () => {
.wrap {
display: flex;
height: calc(100vh - 150px);
column-gap: 10px;
height: calc(100vh - 144px);
column-gap: 8px;
}
.left-wrap {
width: 400px;
position: relative;
box-sizing: border-box;
width: 332px;
height: 100%;
padding-right: 10px;
padding-right: 8px;
flex-shrink: 0;
overflow-y: auto;
}
:deep(.v-virtual-scroll__item + .v-virtual-scroll__item) {
margin-top: 8px;
}
</style>