mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
||
<div
|
||
class="tur-ws-box"
|
||
:style="{
|
||
backgroundImage: 'url(' + data.bg + ')',
|
||
backgroundPositionX: 'right',
|
||
backgroundSize: 'auto 100%',
|
||
backgroundRepeat: 'no-repeat'
|
||
}"
|
||
>
|
||
<div class="tur-ws-icon">
|
||
<img :src="iconShow" alt="icon">
|
||
</div>
|
||
<div class="tur-ws-content">
|
||
<div class="tur-ws-title">
|
||
{{ data.name }}
|
||
</div>
|
||
<div class="tur-ws-sub">
|
||
探索度：{{ data.exploration / 10 }}%
|
||
</div>
|
||
<div v-if="data.type==='Reputation'" class="tur-ws-sub">
|
||
声望等级: {{ data.level }}级
|
||
</div>
|
||
<div v-if="data.offerings.length>0" class="tur-ws-sub">
|
||
<img :src="data.offerings[0].icon" alt="offer">
|
||
<span>
|
||
{{ data.offerings[0].name }}等级:
|
||
<span class="tur-wss-level">{{ data.offerings[0].level }}级</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
// vue
|
||
import { onMounted, ref } from "vue";
|
||
import { event } from "@tauri-apps/api";
|
||
|
||
interface TurWorldSubProps {
|
||
theme: "default" | "dark",
|
||
data: TGApp.Sqlite.Record.WorldExplore
|
||
}
|
||
|
||
const props = defineProps<TurWorldSubProps>();
|
||
const iconShow = ref("");
|
||
|
||
onMounted(async () => {
|
||
props.theme === "dark" ? iconShow.value = props.data.iconLight : iconShow.value = props.data.iconDark;
|
||
await listenOnTheme();
|
||
});
|
||
|
||
async function listenOnTheme () {
|
||
await event.listen("readTheme", (e) => {
|
||
const theme = e.payload as string;
|
||
if (theme === "dark") {
|
||
iconShow.value = props.data.iconLight;
|
||
} else {
|
||
iconShow.value = props.data.iconDark;
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
<style lang="css" scoped>
|
||
.tur-ws-box {
|
||
padding: 5px;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: var(--common-bg);
|
||
}
|
||
|
||
.tur-ws-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.tur-ws-icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.tur-ws-content {
|
||
color: #faf7e8;
|
||
text-shadow: 0 0 5px rgb(0 0 0 / 20%);
|
||
width: calc(100% - 60px);
|
||
height: 100%;
|
||
}
|
||
|
||
.tur-ws-title {
|
||
font-family: var(--font-title);
|
||
font-size: 20px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.tur-ws-sub {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: var(--font-text);
|
||
font-size: 14px;
|
||
justify-content: start;
|
||
}
|
||
|
||
.tur-ws-sub img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 5px;
|
||
}
|
||
</style>
|