💄 调整成就系列IconUI,调整纳塔Icon浅色模式下的样式

This commit is contained in:
目棃
2024-09-09 16:35:13 +08:00
parent 86d0145925
commit 07f3e993f4
3 changed files with 16 additions and 21 deletions

View File

@@ -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 [];

View File

@@ -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 {

View File

@@ -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 {