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

💄 调整样式

Browse Source
This commit is contained in:
目棃
2025-03-17 10:10:06 +08:00
parent 4ef3313eb1
commit a3e42b63e6
32 changed files with 233 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/app/t-gameNav.vue
View File

@@ -127,30 +127,34 @@ async function toBBS(link: URL): Promise<void> {
showSnackbar.warn(`不支持的链接：${link.href}`);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.tgn-container {
position: relative;
display: flex;
padding: 5px;
gap: 10px;
padding: 8px;
gap: 8px;
}
.tgn-nav {
@include github-card();
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 5px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background: var(--common-shadow-t-4);
box-shadow: 0 0 5px var(--common-shadow-4);
padding: 4px;
border-radius: 4px;
color: var(--tgc-white-1);
cursor: pointer;
}
.dark .tgn-nav {
@include github-card("dark");
}
.tgn-nav img {
width: 25px;
height: 25px;
width: 28px;
height: 28px;
}
.tgn-nav span {

21
src/components/app/t-postcard.vue
View File

@@ -244,8 +244,11 @@ function onUserClick(): void {
emits("onUserClick", card.value.user);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.tpc-card {
@include github-card();
position: relative;
display: flex;
overflow: hidden;
@@ -254,15 +257,12 @@ function onUserClick(): void {
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-1);
box-shadow: 2px 2px 4px var(--common-shadow-2);
row-gap: 8px;
}
.dark .tpc-card {
box-shadow: unset;
@include github-card("dark");
}
.tpc-top {
@@ -334,31 +334,28 @@ function onUserClick(): void {
}
.tpc-tag {
@include github-tag-dark-gen(#e06c63);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
color: var(--box-text-5);
cursor: pointer;
gap: 4px;
&:hover {
color: var(--box-text-3);
@include github-tag-dark-gen(#00aeec);
}
}
.tpc-reason {
@include github-tag-dark-gen(#d19a66);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
color: var(--tgc-od-orange);
gap: 4px;
}

59
src/components/pageAnno/ta-card.vue
View File

@@ -1,13 +1,13 @@
<template>
<div :id="`anno_card_${props.modelValue.id}`" class="anno-card">
<div class="anno-cover" :title="props.modelValue.title" @click="createAnno">
<div :title="props.modelValue.title" class="anno-cover" @click="createAnno">
<TMiImg
v-if="props.modelValue.banner !== ''"
:ori="true"
:src="props.modelValue.banner"
alt="cover"
:ori="true"
v-if="props.modelValue.banner !== ''"
/>
<img alt="cover" src="/source/UI/defaultCover.webp" v-else />
<img v-else alt="cover" src="/source/UI/defaultCover.webp" />
<div class="anno-info">
<div class="anno-time">
<v-icon>mdi-clock-time-four-outline</v-icon>
@@ -15,10 +15,10 @@
</div>
</div>
</div>
<div class="anno-title" :title="props.modelValue.title" @click="shareAnno">
<div :title="props.modelValue.title" class="anno-title" @click="shareAnno">
{{ parseTitle(props.modelValue.subtitle) }}
</div>
<div class="anno-label" :title="`标签：${props.modelValue.tagLabel}`">
<div :title="`标签：${props.modelValue.tagLabel}`" class="anno-label">
<img :src="props.modelValue.tagIcon" alt="tag" />
<span>{{ props.modelValue.tagLabel }}</span>
</div>
@@ -29,11 +29,12 @@
import TMiImg from "@comp/app/t-mi-img.vue";
import showSnackbar from "@comp/func/snackbar.js";
import type { AnnoCard } from "@/pages/common/PageAnno.vue";
import TGLogger from "@/utils/TGLogger.js";
import { generateShareImg } from "@/utils/TGShare.js";
import { createTGWindow } from "@/utils/TGWindow.js";
type TAnnoCardProps = { region: string; modelValue: TGApp.App.Announcement.ListCard; lang: string };
type TAnnoCardProps = { region: string; modelValue: AnnoCard; lang: string };
const props = defineProps<TAnnoCardProps>();
function parseTitle(title: string): string {
@@ -58,14 +59,20 @@ async function shareAnno(): Promise<void> {
await generateShareImg(fileName, element, 2.5);
}
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.anno-card {
@include github-card();
position: relative;
overflow: hidden;
width: 100%;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
box-shadow: 2px 2px 5px var(--common-shadow-2);
border-radius: 6px;
box-sizing: border-box;
}
.dark .anno-card {
@include github-card("dark");
}
.anno-cover {
@@ -89,13 +96,15 @@ async function shareAnno(): Promise<void> {
.anno-title {
position: relative;
overflow: hidden;
width: 100%;
padding: 5px;
max-width: 100%;
width: fit-content;
padding: 4px;
cursor: pointer;
font-size: 18px;
text-align: right;
margin-left: auto;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.anno-info {
@@ -116,9 +125,9 @@ async function shareAnno(): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 5px;
margin: 4px;
color: var(--tgc-white-1);
gap: 5px;
gap: 4px;
}
.anno-label {
@@ -128,19 +137,19 @@ async function shareAnno(): Promise<void> {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px;
padding: 4px;
background-color: var(--tgc-od-white);
border-bottom-left-radius: 5px;
border-bottom-left-radius: 6px;
box-shadow: 0 0 10px var(--tgc-dark-1);
color: var(--tgc-white-1);
opacity: 0.8;
text-shadow: 0 0 5px var(--tgc-dark-1);
text-shadow: 0 0 4px var(--tgc-dark-1);
}
.anno-label img {
width: 20px;
height: 20px;
margin-right: 5px;
margin-right: 4px;
}
.anno-cover img:hover {
@@ -155,14 +164,14 @@ async function shareAnno(): Promise<void> {
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
padding: 0 4px;
background: var(--tgc-od-orange);
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0 0 10px var(--tgc-dark-1);
border-bottom-right-radius: 6px;
border-top-left-radius: 6px;
box-shadow: 0 0 8px var(--tgc-dark-1);
color: var(--tgc-white-1);
font-size: 12px;
opacity: 0.8;
text-shadow: 0 0 5px var(--tgc-dark-1);
text-shadow: 0 0 4px var(--tgc-dark-1);
}
</style>

4
src/components/pageCollect/to-collectPost.vue
View File

@@ -133,8 +133,8 @@ async function freshData(): Promise<void> {
}
.tocp-btn {
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}

12
src/components/pageConfig/tco-gameLogin.vue
View File

@@ -61,6 +61,11 @@ const selects: Array<ToGameLoginSelect> = [
value: 7,
icon: "/platforms/mhy/bh2.webp",
},
// {
// title: "星布谷地",
// value: 13,
// icon: "/platforms/mhy/xbgd.webp",
// },
];
// eslint-disable-next-line no-undef
@@ -245,20 +250,21 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
column-gap: 4px;
column-gap: 8px;
}
.tog-select-item {
position: relative;
width: 36px;
height: 36px;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
&.active {
border: 3px solid var(--tgc-od-orange);
border: 2px solid var(--tgc-od-orange);
cursor: default;
opacity: 1;
}
img {

19
src/components/pageHome/ph-calendar-birth.vue
View File

@@ -95,14 +95,15 @@ function parseDesc(intro: string): string {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 5px inset var(--common-shadow-1);
padding: 8px;
border-radius: 4px;
background: var(--box-bg-1);
overflow-y: auto;
row-gap: 5px;
row-gap: 4px;
}
.tcb-top-none,
@@ -136,15 +137,17 @@ function parseDesc(intro: string): string {
width: 100%;
align-items: center;
justify-content: flex-start;
padding: 5px;
border-radius: 10px;
background: var(--box-bg-1);
padding: 8px;
border: 1px solid var(--common-shadow-1);
border-radius: 4px;
background: var(--box-bg-2);
}
.tcb-item img {
height: 100px;
height: 80px;
border-radius: 50%;
aspect-ratio: 1;
background: var(--box-bg-3);
cursor: pointer;
}

12
src/components/pageHome/ph-comp-calendar.vue
View File

@@ -120,7 +120,7 @@ function getBoxData(item: TGApp.App.Calendar.Item): TItemBoxData {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
margin-bottom: 8px;
font-family: var(--font-title);
font-size: 20px;
}
@@ -130,14 +130,14 @@ function getBoxData(item: TGApp.App.Calendar.Item): TItemBoxData {
height: 36px;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-right: 4px;
}
.tc-btn-list {
display: flex;
align-items: center;
justify-content: center;
column-gap: 5px;
column-gap: 8px;
}
.tc-btn {
@@ -162,16 +162,16 @@ function getBoxData(item: TGApp.App.Calendar.Item): TItemBoxData {
.tc-content {
position: relative;
display: flex;
height: 210px;
height: 208px;
align-items: center;
justify-content: space-between;
column-gap: 10px;
column-gap: 8px;
}
.calendar-grid {
display: grid;
height: 100%;
grid-gap: 10px;
grid-gap: 8px;
grid-template-columns: repeat(8, 100px);
place-items: flex-start flex-start;
}

38
src/components/pageHome/ph-comp-card.vue
View File

@@ -1,51 +1,61 @@
<template>
<div class="thc-container">
<div class="thc-title">
<slot name="title"></slot>
<slot name="title" />
</div>
<div v-if="append" class="thc-append">
<slot name="title-append"></slot>
<slot name="title-append" />
</div>
<div class="thc-box">
<slot name="default"></slot>
<slot name="default" />
</div>
</div>
</template>
<script lang="ts" setup>
defineProps<{ append?: boolean }>();
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.thc-container {
@include github-card();
position: relative;
min-height: 100px;
padding: 20px 10px 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-top: 30px;
box-shadow: 2px 2px 5px var(--common-shadow-1);
padding: 24px 8px 8px;
box-sizing: border-box;
border-radius: 4px;
margin-top: 24px;
}
.dark .thc-container {
@include github-card("dark");
}
.thc-title,
.thc-append {
position: absolute;
top: -20px;
top: -16px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 5px;
border-radius: 4px;
background: var(--tgc-od-blue);
font-family: var(--font-title);
border: 1px solid var(--tgc-od-white);
box-sizing: border-box;
}
.thc-title {
left: 10px;
color: var(--tgc-white-4);
left: 8px;
color: var(--tgc-white-1);
font-size: 20px;
}
.thc-append {
right: 10px;
right: 8px;
color: var(--tgc-white-1);
font-size: 16px;
}

8
src/components/pageHome/ph-comp-position.vue
View File

@@ -32,12 +32,10 @@ onMounted(async () => {
emits("success");
});
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
.position-grid {
display: grid;
margin-top: 10px;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(400px + 2rem), 0.5fr));
grid-gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(calc(400px), 0.5fr));
}
</style>

2
src/components/pageHome/ph-pool-card.vue
View File

@@ -165,7 +165,7 @@ async function toPool(): Promise<void> {
width: 100%;
border-radius: 4px;
aspect-ratio: 69 / 32;
box-shadow: 2px 2px 4px var(--common-shadow-2);
box-shadow: 0 2px 4px var(--common-shadow-2);
}
.ph-pool-cover {

11
src/components/pageHome/ph-position-card.vue
View File

@@ -92,7 +92,9 @@ onUnmounted(() => {
if (timer !== null) clearInterval(timer);
});
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
@import "@styles/github.styles.scss";
.ph-position-card {
position: relative;
display: flex;
@@ -101,13 +103,8 @@ onUnmounted(() => {
justify-content: flex-start;
border-radius: 4px;
background: var(--box-bg-1);
box-shadow: 0 0 5px var(--common-shadow-2);
color: var(--box-text-1);
}
.dark .ph-position-card {
border: 1px solid var(--common-shadow-1);
box-shadow: unset;
}
.top {
@@ -118,7 +115,7 @@ onUnmounted(() => {
align-items: center;
justify-content: space-between;
padding: 8px;
border-bottom: 2px solid var(--common-shadow-2);
border-bottom: 1px solid var(--common-shadow-2);
.main {
position: relative;

4
src/components/userGacha/ugo-uid.vue
View File

@@ -319,8 +319,8 @@ async function handleExport(): Promise<void> {
.ugo-item-btn {
height: 40px;
border: 1px solid var(--common-shadow-2);
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
&.active {

4
src/components/viewPost/vp-overlay-collect.vue
View File

@@ -179,8 +179,8 @@ async function onSubmit(): Promise<void> {
}
.topc-btn {
background: var(--btn-bg-1);
color: var(--btn-text-1);
background: var(--tgc-btn-1);
color: var(--btn-text);
font-family: var(--font-title);
}

4
src/components/viewPost/vp-reply-item.vue
View File

@@ -252,7 +252,11 @@ async function handleUser(): Promise<void> {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
border-top: 1px inset var(--common-shadow-1);
border-right: 1px inset var(--common-shadow-1);
background-color: v-bind("props.modelValue.user.reply_bubble?.bg_color");
border-top-right-radius: 4px;
opacity: 0.5;
}