mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
💄 调整成就系列IconUI,调整纳塔Icon浅色模式下的样式
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div v-if="!props.modelValue">暂无数据</div>
|
||||
<div v-else class="tur-wg-box">
|
||||
<TurWorldSub v-for="area in getData()" :key="area.id" :data="area" :theme="theme" />
|
||||
<TurWorldSub v-for="area in getData()" :key="area.id" :data="area" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
import TurWorldSub from "./tur-world-sub.vue";
|
||||
|
||||
interface TurWorldGridProps {
|
||||
@@ -14,14 +12,6 @@ interface TurWorldGridProps {
|
||||
}
|
||||
|
||||
const props = defineProps<TurWorldGridProps>();
|
||||
const theme = computed(() => {
|
||||
const data = localStorage.getItem("theme");
|
||||
if (data) {
|
||||
return JSON.parse(data).theme || "default";
|
||||
} else {
|
||||
return "default";
|
||||
}
|
||||
});
|
||||
|
||||
function getData(): TGApp.Sqlite.Record.WorldExplore[] {
|
||||
if (!props.modelValue) return [];
|
||||
|
||||
@@ -41,12 +41,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { event } from "@tauri-apps/api";
|
||||
import { Event, UnlistenFn } from "@tauri-apps/api/event";
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import { computed, onMounted, onUnmounted, ref } from "vue";
|
||||
|
||||
import { useAppStore } from "../../store/modules/app.js";
|
||||
import { saveImgLocal } from "../../utils/TGShare.js";
|
||||
|
||||
interface TurWorldSubProps {
|
||||
theme: "default" | "dark";
|
||||
data: TGApp.Sqlite.Record.WorldExplore;
|
||||
}
|
||||
|
||||
@@ -57,6 +57,13 @@ const icon = ref<string>();
|
||||
const iconLight = ref<string>();
|
||||
const iconDark = ref<string>();
|
||||
const offer = ref<string>();
|
||||
const appStore = useAppStore();
|
||||
|
||||
const imgFilter = computed<string>(() => {
|
||||
if (props.data.name !== "纳塔") return "none";
|
||||
if (appStore.theme === "dark") return "none";
|
||||
return "invert(0.75)";
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
themeListener = await event.listen("readTheme", (e: Event<string>) => {
|
||||
@@ -73,7 +80,7 @@ onMounted(async () => {
|
||||
if (props.data.offering) {
|
||||
offer.value = await saveImgLocal(props.data.offering.icon);
|
||||
}
|
||||
if (props.theme === "dark") {
|
||||
if (appStore.theme === "dark") {
|
||||
icon.value = iconLight.value;
|
||||
} else {
|
||||
icon.value = iconDark.value;
|
||||
@@ -120,6 +127,7 @@ onUnmounted(() => {
|
||||
.tur-ws-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: v-bind(imgFilter);
|
||||
}
|
||||
|
||||
.tur-ws-content {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
hide-details
|
||||
:hide-details="true"
|
||||
variant="outlined"
|
||||
@click:append="searchCard"
|
||||
@keyup.enter="searchCard"
|
||||
@@ -601,18 +601,15 @@ async function getAchiData(
|
||||
font-family: var(--font-title);
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px var(--common-shadow-1);
|
||||
}
|
||||
|
||||
.series-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
filter: invert(60%) brightness(100%);
|
||||
}
|
||||
|
||||
.dark .series-icon {
|
||||
filter: none;
|
||||
border-radius: 50%;
|
||||
background: var(--tgc-dark-7);
|
||||
}
|
||||
|
||||
.series-content {
|
||||
|
||||
Reference in New Issue
Block a user