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

♻️ 用户相关的四个一级页面勉强改完

Browse Source
This commit is contained in:
BTMuli
2023-09-02 14:03:23 +08:00
parent a8488c04f8
commit 95eca77d0a
18 changed files with 189 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/func/confirm.vue
View File

@@ -20,7 +20,7 @@
<button
class="confirm-btn"
:style="{
backgroundColor: 'var(--box-bg-t-4)',
backgroundColor: 'var(--tgc-dark-2)',
}"
@click="handleClick(true)"
>

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

@@ -207,8 +207,9 @@ watch(
.gro-dv-container {
height: 100%;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--common-shadow-2);
background: var(--box-bg-2);
}
.gro-dvt-title {
@@ -223,16 +224,16 @@ watch(
.gro-dvt-subtitle {
width: 100%;
color: var(--common-text-quote);
font-family: var(--font-text);
font-size: 12px;
opacity: 0.6;
}
.gro-mid-list {
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid var(--common-shadow-4);
color: var(--common-text-content);
color: var(--box-text-7);
}
.gro-ml-item {
@@ -250,7 +251,7 @@ watch(
.gro-b-window-item {
display: flex;
max-height: calc(100vh - 400px);
max-height: calc(100vh - 420px);
flex-direction: column;
margin-top: 10px;
gap: 5px;
@@ -285,6 +286,6 @@ watch(
justify-content: space-between;
padding: 0 10px;
border-radius: 5px;
background: var(--common-shadow-2);
background: var(--box-bg-3);
}
</style>

1
src/components/gachaRecord/gro-overview.vue
View File

@@ -44,6 +44,5 @@ watch(
width: 100%;
height: 100%;
grid-gap: 10px;
transition: all 0.3s ease-in-out;
}
</style>

16
src/components/main/t-subline.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="tsl-box">
<img src="/src/assets/icons/arrow-right.svg" alt="right" />
<img src="/src/assets/icons/arrow-right.svg" alt="right" class="tsl-icon" />
<slot>
{{ props.title }}
</slot>
@@ -14,19 +14,21 @@ const props = defineProps<{
<style lang="css" scoped>
.tsl-box {
display: flex;
height: 30px;
align-items: center;
padding: 0 10px;
padding: 5px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin: 5px 0;
background: var(--common-shadow-2);
color: var(--common-color-white);
font-family: var(--font-text);
color: var(--box-text-4);
font-family: var(--font-title);
gap: 5px;
}
.tsl-box img {
width: 20px;
height: 20px;
margin-right: 5px;
padding: 5px;
border-radius: 5px;
background: var(--common-shadow-4);
}
</style>

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

@@ -21,12 +21,6 @@ interface TuaDetailBattleProps {
const props = defineProps<TuaDetailBattleProps>();
</script>
<style lang="css" scoped>
.tud-db-box {
padding: 5px;
border-radius: 5px;
background: var(--common-shadow-t-1);
}
.tud-db-icons-grid {
display: flex;
flex-direction: row;

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

@@ -25,9 +25,10 @@ const props = defineProps<TuaDetailLevelProps>();
display: flex;
flex-direction: column;
padding: 10px;
border: 1px inset var(--common-shadow-2);
border-radius: 5px;
margin-top: 10px;
background: var(--common-shadow-1);
background: var(--box-bg-2);
gap: 10px;
}
</style>

18
src/components/userAbyss/tua-detail-title.vue
View File

@@ -43,31 +43,27 @@ const props = defineProps<TuaDetailTitleProps>();
height: 30px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--common-shadow-4);
}
.tud-t-title {
color: var(--common-text-content);
color: var(--box-text-4);
}
.tud-t-val {
display: flex;
align-items: center;
color: var(--common-color-white);
font-family: var(--font-text);
text-shadow: 0 0 10px var(--common-color-yellow);
}
.dark .tud-t-val {
color: var(--common-color-yellow);
text-shadow: none;
color: var(--tgc-yellow-1);
font-family: var(--font-title);
gap: 5px;
}
.tud-t-val img {
width: 20px;
height: 20px;
padding: 1px;
border-radius: 50%;
margin-right: 5px;
background: var(--common-shadow-4);
background: var(--tgc-btn-1);
object-fit: cover;
}
</style>

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

@@ -5,7 +5,6 @@
:name="`第${props.modelValue.id}层`"
mode="floor"
/>
<div class="tuad-divider" />
<div class="tuad-index-box">
<TuaDetailLevel
v-for="level in props.modelValue.levels"
@@ -26,11 +25,11 @@ interface TuaDetailProps {
const props = defineProps<TuaDetailProps>();
</script>
<style lang="css" scoped>
.tuad-divider {
width: 100%;
height: 1px;
.tuad-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--common-text-content);
background: var(--box-bg-1);
}
.tuad-index-box {

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

@@ -45,26 +45,21 @@ const getIconNum = computed(() => (props.multi4 ? 4 : 1));
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--common-shadow-1);
background: var(--box-bg-2);
}
.tuao-title {
color: var(--common-text-content);
color: var(--box-text-4);
font-family: var(--font-title);
font-size: 20px;
}
.tuao-val-text {
color: var(--common-color-white);
color: var(--tgc-yellow-1);
font-family: var(--font-text);
font-size: 20px;
text-shadow: 0 0 10px var(--common-color-yellow);
}
.dark .tuao-val-text {
color: var(--common-color-yellow);
text-shadow: none;
}
.tuao-val-icons {

22
src/components/userCharacter/tuc-role-box.vue
View File

@@ -130,15 +130,12 @@ onUnmounted(() => {
padding: 5px;
border: 1px inset var(--common-shadow-4);
border-radius: 5px;
background: var(--box-bg-2);
cursor: pointer;
row-gap: 5px;
transition: all 0.3s;
}
.tuc-rb-box:hover {
box-shadow: 0 0 10px var(--common-color-yellow);
}
.tuc-rb-top {
display: flex;
width: 100%;
@@ -153,7 +150,7 @@ onUnmounted(() => {
align-items: center;
justify-content: space-between;
padding: 5px;
border: 1px inset var(--common-bg-1);
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
font-family: var(--font-title);
font-size: 12px;
@@ -176,7 +173,7 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: flex-end;
color: var(--common-shadow-8);
color: var(--box-text-4);
column-gap: 5px;
}
@@ -199,14 +196,14 @@ onUnmounted(() => {
justify-content: center;
border-radius: 5px;
backdrop-filter: blur(5px);
background: var(--common-shadow-4);
background: var(--tgc-btn-1);
}
.tuc-rbb-bg img {
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: contain;
object-fit: fill;
}
.tuc-rbb-content {
@@ -236,9 +233,10 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid var(--tgc-white-8);
border-radius: 50%;
background: rgb(0 0 0 /40%);
box-shadow: 0 0 10px rgb(255 255 255/40%);
background: var(--tgc-dark-7);
opacity: 0.5;
}
.tuc-rbb-talent :nth-child(2) {
@@ -247,9 +245,9 @@ onUnmounted(() => {
height: 30px;
align-items: center;
justify-content: center;
color: #faf7e8;
color: var(--tgc-white-8);
font-family: var(--font-title);
font-size: 12px;
text-shadow: 0 0 5px rgb(0 0 0 / 50%);
text-shadow: 0 0 10px var(--tgc-dark-7);
}
</style>

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

@@ -10,7 +10,6 @@
{{ data.name }}
</div>
<div class="tur-hs-title">
<!-- canvas -->
<img :src="getUrl.icon" alt="comfort" />
{{ data.comfortName }}
</div>
@@ -65,20 +64,18 @@ onMounted(async () => {
position: absolute;
top: 10px;
right: 10px;
color: var(--common-color-white);
color: var(--tgc-white-1);
font-family: var(--font-text);
font-size: 16px;
text-shadow: 0 0 10px rgb(0 0 0 / 40%);
}
.tur-hs-title {
display: flex;
align-items: center;
padding: 10px;
color: var(--common-color-white);
color: var(--tgc-white-1);
font-family: var(--font-title);
font-size: 20px;
text-shadow: 0 0 10px rgb(0 0 0 / 40%);
}
.tur-hs-title img {
@@ -92,15 +89,16 @@ onMounted(async () => {
width: 100%;
justify-content: space-between;
padding: 10px;
backdrop-filter: blur(5px);
background: rgb(0 0 0 / 40%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: var(--common-color-white);
color: var(--tgc-white-1);
text-align: center;
}
.tur-hs-text :nth-child(1) {
color: var(--common-color-yellow);
color: var(--tgc-yellow-1);
font-family: var(--font-text);
}

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

@@ -29,21 +29,21 @@ defineProps<TAOProps>();
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--common-shadow-1);
background: var(--box-bg-2);
}
.tur-os-title {
color: var(--common-text-content);
color: var(--box-text-4);
font-family: var(--font-title);
font-size: 20px;
}
.tur-os-text {
color: var(--common-color-white);
color: var(--tgc-yellow-1);
font-family: var(--font-text);
font-size: 20px;
text-shadow: 0 0 10px var(--common-color-yellow);
}
.dark .tur-os-text {

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

@@ -86,8 +86,9 @@ async function listenOnTheme(): Promise<void> {
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--common-shadow-1);
background: var(--box-bg-2);
}
.tur-ws-icon {
@@ -104,11 +105,11 @@ async function listenOnTheme(): Promise<void> {
.tur-ws-content {
width: calc(100% - 60px);
height: 100%;
color: var(--common-text-content);
color: var(--box-text-4);
}
.tur-ws-title {
border-bottom: 1px inset var(--common-text-content);
border-bottom: 1px inset var(--common-shadow-8);
font-family: var(--font-title);
font-size: 20px;
}
@@ -128,12 +129,6 @@ async function listenOnTheme(): Promise<void> {
}
.tur-ws-sub :nth-last-child(2) {
color: var(--common-color-white);
text-shadow: 0 0 10px var(--common-color-yellow);
}
.dark .tur-ws-sub :nth-last-child(2) {
color: var(--common-color-yellow);
text-shadow: none;
color: var(--tgc-yellow-1);
}
</style>