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

💄 美化深渊页面

Browse Source
This commit is contained in:
BTMuli
2023-06-14 23:08:41 +08:00
parent 0b5fbf5953
commit f9297b8927
8 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/index.css
View File

@@ -20,6 +20,8 @@
--common-color-blue-2: #546d8b;
--common-color-blue-3: #5b738f;
--common-color-yellow: #fec90b;
--common-color-grey: #96979a;
--common-color-grey-2: #b3b3b3;
}
html {

5
src/assets/themes/dark.css
View File

@@ -12,8 +12,9 @@ html.dark {
--common-bg-4: rgb(255 255 255 / 40%);
--common-bg-8: rgb(255 255 255 / 80%);
--common-text: var(--common-color-white);
--common-text-2: var(--common-color-white);
--common-text: var(--common-color-white); /* title */
--common-text-2: var(--common-color-white); /* text */
--common-text-3: var(--common-color-grey); /* quote */
--sidebar-bg: #1e1e1e;
--sidebar-icon: #e1e1e1;

5
src/assets/themes/default.css
View File

@@ -12,8 +12,9 @@ html.default {
--common-bg-4: rgb(0 0 0 / 40%);
--common-bg-8: rgb(0 0 0 / 80%);
--common-text: var(--common-color-blue);
--common-text-2: var(--common-color-blue-2);
--common-text: var(--common-color-blue); /* title */
--common-text-2: var(--common-color-blue-2); /* text */
--common-text-3: var(--common-color-blue-3); /* quote */
--sidebar-bg: #485466;
--sidebar-icon: #ece5d8;

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

@@ -30,6 +30,6 @@ const props = defineProps<TuaDetailBattleProps>();
width: 100%;
text-align: left;
font-size: 12px;
color: #faf7e8;
color: var(--common-text-3);
}
</style>

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

@@ -20,6 +20,6 @@ const props = defineProps<TuaDetailLevelProps>();
border-radius: 5px;
width: 100%;
height: 1px;
background: var(--common-color-white);
background: var(--common-text-2);
}
</style>

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

@@ -46,8 +46,7 @@ const getFontSize: ComputedRef<string> = computed(() => {
.tud-t-title {
font-size: v-bind(getFontSize);
color: var(--common-color-white);
text-shadow: 0 0 10px rgb(0 0 0 / 20%);
color: var(--common-text-2);
}
.tud-t-val {
@@ -56,7 +55,12 @@ const getFontSize: ComputedRef<string> = computed(() => {
font-family: var(--font-text);
font-size: v-bind(getFontSize);
color: var(--common-color-white);
text-shadow: #fec90b 0 0 5px;
text-shadow: 0 0 10px var(--common-color-yellow);
}
.dark .tud-t-val {
color: var(--common-color-yellow);
text-shadow: none;
}
.tud-t-val img {

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

@@ -51,15 +51,19 @@ const props = withDefaults(defineProps<TAOProps>(), {
.tuao-title {
font-family: var(--font-title);
font-size: 20px;
color: var(--common-color-white);
text-shadow: 0 0 10px rgb(0 0 0 / 20%);
color: var(--common-text-2);
}
.tuao-val-text {
font-family: var(--font-text);
font-size: 20px;
color: var(--common-color-white);
text-shadow: #fec90b 0 0 10px;
text-shadow: 0 0 10px var(--common-color-yellow);
}
.dark .tuao-val-text {
color: var(--common-color-yellow);
text-shadow: none;
}
.tuao-val-icons {

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

@@ -159,7 +159,7 @@ async function shareAbyss (): Promise<void> {
y: -25,
};
const canvasData = await html2canvas(abyssRef.value, options);
const fileName = `深渊${curAbyss.value.id}-${user.value.gameUid}-${Math.floor((new Date().getTime()) / 1000)}.png`;
const fileName = `深渊${curAbyss.value.id}-${user.value.gameUid}-${Math.floor(Date.now() / 1000)}.png`;
await saveCanvasImg(canvasData, fileName);
}
@@ -173,7 +173,7 @@ function getTheme () {
</script>
<style lang="css" scoped>
.ua-box {
box-shadow: 0 0 10px 0 var(--common-bg);
box-shadow: 0 0 10px 0 var(--common-bg-4);
display: flex;
justify-content: left;
align-items: center;
@@ -183,7 +183,7 @@ function getTheme () {
.ua-tab {
font-family: var(--font-text);
color: var(--content-text-3);
color: var(--common-text);
width: 100px;
height: 100%;
}
@@ -196,7 +196,7 @@ function getTheme () {
}
.ua-btn {
margin-top: 5px;
margin-top: 15px;
background: var(--common-bg-2);
color: var(--common-color-white);
}
@@ -212,24 +212,29 @@ function getTheme () {
padding: 10px;
overflow-y: auto;
border-radius: 5px;
box-shadow: 0 0 10px var(--common-bg-4);
box-shadow: 0 0 10px var(--common-bg-2);
}
.uaw-title {
display: flex;
align-items: center;
color: var(--common-color-white);
text-shadow: 0 0 10px rgb(0 0 0 / 40%);
color: var(--common-text);
font-size: 20px;
font-family: var(--font-title);
}
.uaw-title :nth-child(2n) {
text-shadow: #fec90b 0 0 10px;
color: var(--common-color-white);
text-shadow: 0 0 10px var(--common-color-yellow);
margin-left: 10px;
margin-right: 10px;
}
.dark .uaw-title :nth-child(2n) {
color: var(--common-color-yellow);
text-shadow: none;
}
.uaw-sub-title {
background: var(--common-bg-2);
display: flex;
@@ -274,7 +279,7 @@ function getTheme () {
flex-direction: column;
align-items: center;
font-size: 1.5rem;
color: var(--common-color-white);
color: var(--common-text);
font-family: var(--font-title);
}
</style>